@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap');

/* =============================================================================
   ccnav — canonical site navigation (LAUNCH GRAFT, June 2026)
   ONE nav, identical on every page. Self-contained + scoped under .ccnav so it
   renders the same regardless of the page's base stylesheet (live css/styles.css,
   staging assets/css/*, or shared.css). Brand tokens hard-set here on purpose.
   Order A (book-first). Styling: Jost + gold-underline. Book Verena = gold CTA,
   far right, separated. Join always present (header + footer).
   ============================================================================= */

.ccnav, .ccnav * { box-sizing: border-box; }

.ccnav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #1A1A1A;
  border-bottom: 1px solid rgba(245,240,232,0.10);
  font-family: 'Jost', 'Century Gothic', sans-serif;
  transition: background .3s ease, border-color .3s ease;
}
.ccnav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 56px);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* wordmark */
.ccnav__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.ccnav__logo img { display: block; height: 34px; width: auto; }

/* desktop links */
.ccnav__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
}
.ccnav__links a {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #F5F0E8;
  text-decoration: none;
  position: relative;
  padding: 6px 0;
  transition: color .25s ease;
}
.ccnav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: #C4965A;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}
.ccnav__links a:hover { color: #C4965A; }
.ccnav__links a:hover::after,
.ccnav__links a[aria-current="page"]::after { transform: scaleX(1); }
.ccnav__links a[aria-current="page"] { color: #C4965A; }

/* gold CTA — far right, separated */
.ccnav__cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font-family: 'Jost', 'Century Gothic', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #1A1A1A;
  background: #C4965A;
  border: 1px solid #C4965A;
  padding: 11px 24px;
  text-decoration: none;
  transition: background .3s ease, color .3s ease;
  white-space: nowrap;
}
.ccnav__cta:hover { background: transparent; color: #C4965A; }

/* right cluster holds links + cta with a clear separation */
.ccnav__right {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 40px);
}

/* hamburger (hidden on desktop) */
.ccnav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.ccnav__burger span {
  display: block; height: 1.5px; width: 100%;
  background: #F5F0E8;
  transition: transform .3s ease, opacity .3s ease;
}

/* overlay mode — transparent over a dark hero (homepage). Solid on scroll. */
.ccnav--overlay {
  position: fixed;
  left: 0; right: 0;
  background: transparent;
  border-bottom-color: transparent;
}
.ccnav--overlay.is-scrolled {
  background: #1A1A1A;
  border-bottom-color: rgba(245,240,232,0.10);
}
/* Homepage overlay: extra breathing room above the nav row so it clears the top
   edge of the hero. Scoped to the homepage body so interior pages are untouched.
   The header is fixed/full-bleed over the hero, so padding here only pushes the
   nav row down within the transparent bar — it does not add a content gap. */
body[data-header-mode="overlay"] .ccnav--overlay .ccnav__inner {
  height: 76px;
  padding-top: 0;
}
/* spacer that the overlay header sits over — page supplies its own hero, so
   no spacer needed; overlay is fixed and the hero is full-bleed beneath it. */

/* mobile drawer */
.ccnav__drawer {
  position: fixed;
  inset: 0;
  background: #1A1A1A;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  z-index: 1100;
  padding: 40px;
}
.ccnav__drawer.is-open { display: flex; }
.ccnav__drawer a {
  font-family: 'Jost', 'Century Gothic', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #F5F0E8;
  text-decoration: none;
}
.ccnav__drawer a:hover { color: #C4965A; }
.ccnav__drawer .ccnav__cta { margin-top: 8px; font-size: 0.86rem; padding: 13px 30px; }
.ccnav__drawer-close {
  position: absolute;
  top: 22px; right: 24px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 2rem; line-height: 1; color: #F5F0E8;
}

@media (max-width: 900px) {
  .ccnav__right { display: none; }
  .ccnav__burger { display: flex; }
  /* Tap target ≥44px and breathing room above the burger row on phones. */
  .ccnav__inner { height: 72px; }
  body[data-header-mode="overlay"] .ccnav--overlay .ccnav__inner {
    height: 72px;
    padding-top: 0;
  }
  .ccnav__burger { width: 44px; height: 44px; }
}

/* =============================================================================
   GLOBAL CTA BUTTON SYSTEM (locked, June 2026)
   ONE primary button everywhere: gold fill → gold-outline hover. Never white,
   grey, or black on hover. Sharp corners, no shadow, no gradient. ccnav.css is
   the last stylesheet on every page, so these win over per-page button rules.
   ============================================================================= */
.btn, .btn--primary, .btn--secondary, .btn--solid, .btn--ghost,
.btn--on-dark, .btn--on-light, .btn--outline, .fg-ed .btn {
  background-color: #C4965A !important;
  background-image: none !important;
  color: #1A1A1A !important;
  border: 1px solid #C4965A !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease !important;
}
.btn:hover, .btn:focus-visible,
.btn--primary:hover, .btn--primary:focus-visible,
.btn--secondary:hover, .btn--secondary:focus-visible,
.btn--solid:hover, .btn--solid:focus-visible,
.btn--ghost:hover, .btn--ghost:focus-visible,
.btn--on-dark:hover, .btn--on-dark:focus-visible,
.btn--on-light:hover, .btn--on-light:focus-visible,
.btn--outline:hover, .btn--outline:focus-visible,
.fg-ed .btn:hover, .fg-ed .btn:focus-visible {
  background-color: transparent !important;
  color: #C4965A !important;
  border-color: #C4965A !important;
}
/* Cream sections: gold-on-cream hover is low-contrast → keep charcoal text */
.cream .btn:hover, .cream .btn:focus-visible,
.cream .btn--solid:hover, .cream .btn--solid:focus-visible,
.cream .btn--ghost:hover,
.fg-editions .fg-ed .btn:hover, .fg-inside .btn:hover, .fg-ed .btn:hover {
  color: #1A1A1A !important;
  background-color: transparent !important;
  border-color: #C4965A !important;
}
/* visible accessible focus ring */
.btn:focus-visible, .btn--primary:focus-visible, .btn--solid:focus-visible,
.btn--secondary:focus-visible, .btn--ghost:focus-visible, .fg-ed .btn:focus-visible {
  outline: 2px solid #C4965A !important; outline-offset: 3px;
}

/* =============================================================================
   LIVE-PAGE HERO FIX (about / speaking / reviews / contact)
   .hero--page inherited a 160px top padding inside a fixed-height 60vh hero with
   align-items:flex-end → tall titles overflowed upward (sat too high) and the
   content only had 40px side padding (too far left). Let the hero grow to fit,
   clear the fixed ccnav, and give brand-appropriate side padding.
   ============================================================================= */
.hero--page {
  height: auto !important;
  min-height: 58vh !important;
  padding-top: clamp(112px, 15vh, 152px) !important;
  padding-bottom: clamp(48px, 6vh, 76px) !important;
  align-items: flex-end !important;
}
.hero--page .hero__content {
  padding-left: clamp(40px, 6vw, 76px) !important;
  padding-right: clamp(40px, 6vw, 76px) !important;
}