/* =============================================================
   Mystic Indigo Universe — Catherine Regan
   Home page styles
   ============================================================= */

/* -------------------- Tokens -------------------- */
:root {
  /* =========================================================================
     BRAND TRIAD — the entire palette is these three colors. Nothing else.
     One indigo, one copper, one cream (client decision, 2026-06-21). Every
     token below is one of these three, or a transparency tint OF one of them
     for text hierarchy / hover / hairlines. Do NOT introduce new hues.
     ========================================================================= */
  --indigo:        #490081;                /* THE indigo — text on cream + all indigo surfaces */
  --copper:        oklch(63% 0.115 52);    /* THE copper — accents, links, arrows, CTAs */
  --cream:         oklch(85% 0.023 82);    /* THE cream — the single reading surface (one flat tone, sitewide) */

  /* Indigo surfaces — all the one indigo (alpha only for a frosted veil) */
  --indigo-deep:   var(--indigo);
  --indigo-mid:    var(--indigo);
  --indigo-soft:   var(--indigo);
  --indigo-veil:   color-mix(in srgb, var(--indigo) 92%, transparent);

  /* Cream — one cream; "warm" is the same cream; edges are a faint indigo hairline */
  --cream-warm:    var(--cream);
  --cream-edge:    color-mix(in srgb, var(--indigo) 14%, transparent);

  /* Copper — one copper (+ a lighter copper for hover, still the same hue) */
  /* --copper is the accent copper that rides on the dark indigo surfaces.
     --copper-deep is a DEEPER copper reserved for copper TEXT on the cream — it
     keeps enough contrast now that the cream is a darker, warmer tone. */
  --copper-deep:   oklch(44% 0.12 55);     /* copper TEXT/links on cream — ~5.1:1, comfortably AA and still a warm copper */
  --copper-visited: oklch(40% 0.08 52);    /* opened/visited links — muted deeper copper, ~AA on cream */
  --copper-soft:   color-mix(in srgb, var(--copper) 72%, var(--cream));
  /* Legacy aliases — existing rules still reference --gold*; keep them on copper */
  --gold:          var(--copper);
  --gold-deep:     var(--copper-deep);
  --gold-soft:     var(--copper-soft);

  /* Ink — type on cream = the one indigo, dimmed by transparency for hierarchy.
     Kept deliberately strong so secondary/tertiary copy stays legible on cream. */
  --ink:           var(--indigo);
  --ink-soft:      color-mix(in srgb, var(--indigo) 86%, transparent);
  --ink-mist:      color-mix(in srgb, var(--indigo) 70%, transparent);

  /* Bone — type on indigo. Kept bright (near-white cream) so navbar text and
     dark-section text stay legible even though the page cream surface is now a
     much darker, warmer tone. Decoupled from --cream on purpose. */
  --bone:          oklch(96% 0.014 82);
  --bone-soft:     color-mix(in srgb, var(--bone) 82%, transparent);
  --bone-mist:     color-mix(in srgb, var(--bone) 66%, transparent);

  /* Semantic */
  --focus:         var(--copper);

  /* Typography */
  --font-display:  'Cormorant Garamond', 'Cardo', Georgia, 'Times New Roman', serif;
  --font-body:     'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:       0.8125rem;
  --text-sm:       0.9375rem;
  --text-base:     1.125rem;
  --text-lg:       1.375rem;
  --text-xl:       1.875rem;
  --text-2xl:      2.5rem;
  --text-3xl:      clamp(2.75rem, 5vw, 4rem);
  --text-display:  clamp(3.25rem, 7.5vw, 6.5rem);

  /* Spacing */
  --space-2xs:     0.25rem;
  --space-xs:      0.5rem;
  --space-sm:      0.75rem;
  --space-md:      1.25rem;
  --space-lg:      2rem;
  --space-xl:      3rem;
  --space-2xl:     4.5rem;
  --space-3xl:     7rem;
  --space-4xl:     11rem;

  /* Motion */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:     240ms;
  --dur-moment:    480ms;
  --dur-reveal:    1200ms;

  /* Layout */
  --measure:       62ch;
  /* The navbar spans --page-max so its brand + links + CTA keep room; body
     content uses the slightly narrower --content-max so it sits a touch inside
     the nav edges rather than flush to them (consistent on every page). */
  --page-max:      1440px;
  --content-max:   1320px;
  --page-pad:      clamp(1.25rem, 4vw, 3.5rem);

  /* Navbar surface — solid indigo bar with cream text and copper arrows; a soft
     copper hairline separates it from the cream page below. */
  --nav-bg:        var(--indigo);
  --nav-border:    color-mix(in srgb, var(--copper) 38%, transparent);
}

/* -------------------- Reset -------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  /* Stop the upward rubber-band so overscrolling past the top doesn't reveal the
     cream page above the sticky navbar. NB: do NOT set a background on <html> —
     that stops the body's cream from propagating to the canvas, which makes the
     body's own opaque background paint over the fixed .bg-mark watermark (the
     copper logo/stars/crystals) and hide it. */
  overscroll-behavior-y: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-optical-sizing: auto;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; text-wrap: pretty; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}

/* Skip link */
.skip {
  position: absolute;
  top: -200%;
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--indigo-deep);
  color: var(--bone);
  z-index: 100;
}
.skip:focus { top: var(--space-md); }

/* -------------------- Layout primitives -------------------- */
.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.measure { max-width: var(--measure); }

.section {
  /* Tightened: the old clamp(4.5rem, 12vw, 11rem) left up to ~352px between
     sections on wide screens. Calmer rhythm, sections still breathe. */
  padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl));
}

.section--tight {
  padding-block: clamp(var(--space-lg), 4.5vw, var(--space-xl));
}

.dark {
  background: var(--indigo-deep);
  color: var(--bone);
}
.dark p { color: var(--bone-soft); }
.dark a { color: var(--bone); }

/* Eyebrow — a small pill badge so section labels read clearly instead of
   dissolving into the cream. Copper text on a faint copper-tinted chip with a
   hairline ring. inline-flex keeps it shrink-wrapped; centered containers still
   center it (it is inline-level). */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-deep);
  background: color-mix(in srgb, var(--copper) 13%, var(--cream));
  border: 1px solid color-mix(in srgb, var(--copper) 32%, transparent);
  border-radius: 999px;
  padding: 0.42em 0.95em;
  line-height: 1;
}
/* On indigo surfaces the chip flips to a translucent cream wash with cream text */
.dark .eyebrow {
  color: var(--bone);
  background: color-mix(in srgb, var(--cream) 12%, transparent);
  border-color: color-mix(in srgb, var(--cream) 26%, transparent);
}
.eyebrow--gold { color: var(--gold-deep); }
.dark .eyebrow--gold { color: var(--gold); }

/* -------------------- Site header / nav -------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding-block: var(--space-md);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 2px 20px oklch(40% 0.06 285 / 0.06);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  /* Navbar width == --page-max (the reading column), so the brand logo and the
     CTA sit flush with the left/right edges of the body content below. */
  max-width: var(--page-max);
}

.brand {
  display: inline-flex;
  align-items: center;
  /* Never let the flex:1 nav squeeze the wordmark — it would overflow its box
     and collide with the first link. Keep the brand at its natural width. */
  flex: none;
  gap: var(--space-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.brand .lotus { width: 28px; height: 28px; color: var(--gold); }
/* The original indigo logo (wordmark + moon + lotus). Larger in the navbar so
   its lettering reads; the footer keeps the compact base size. */
.brand-logo { height: 32px; width: auto; display: block; flex: none; }
/* On the indigo navbar the indigo logo would vanish, so it rides on a cream
   rounded badge; the wordmark text beside it is cream. (Footer brand keeps the
   indigo-on-cream treatment.) */
.site-header .brand { color: var(--bone); }
.site-header .brand-logo {
  height: 44px;
  background: var(--cream);
  border-radius: 12px;
  padding: 6px 9px;
}
.brand span { white-space: nowrap; }

/* One nav mode on every viewport: a hamburger that opens a full-screen indigo
   sheet. The sheet is position:fixed relative to the viewport — which works now
   that .site-header sets no backdrop-filter (a backdrop-filter would make the
   header the containing block and trap the sheet inside the bar). Hidden until
   .is-open; the brand + toggle sit above it (z-index) so the toggle stays
   tappable to close.
   The sheet starts BELOW the header bar (main.js measures the bar into
   --header-h): when the menu is taller than the screen, scrolling items clip
   at the bar's bottom edge instead of sliding over the brand + wordmark. */
.nav {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-h, 89px);
  z-index: 90;
  flex-direction: column;
  /* Center the menu block horizontally in the viewport (the block is centered as a
     whole; its text stays left-aligned inside — see .nav-links width:fit-content). */
  align-items: center;
  /* Vertically centered in the viewport. `safe center` falls back to top-alignment
     when the menu is taller than the screen, so the first items are never clipped
     above the scroll. */
  justify-content: safe center;
  gap: var(--space-lg);
  /* Lighter top padding now that the sheet already clears the header bar;
     roomier bottom so the CTA pill isn't glued to the screen edge. */
  padding: var(--space-xl) var(--page-pad) var(--space-2xl);
  background: var(--indigo);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav.is-open { display: flex; }

/* Keep the brand visible above the open sheet (it would otherwise be painted
   over by the fixed sheet, which sits later in the header's stacking context). */
.site-header .brand { position: relative; z-index: 110; }

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Shrink to the widest item so the whole block can be centered by the parent,
     while items inside stay left-aligned (text not centered). */
  width: fit-content;
  max-width: 100%;
  gap: var(--space-lg);
}
.nav a {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  color: var(--bone);
  padding: var(--space-2xs) 0;
}
.nav a:hover, .nav a:focus-visible { color: var(--gold); }

/* Category groups expand inline within the sheet (no hover dropdown) */
.nav-group { display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: var(--space-sm); }
.nav-chev { display: none; }
.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-left: var(--space-md);
}
.nav-submenu a { font-size: var(--text-lg); text-transform: none; letter-spacing: 0.01em; color: var(--bone-soft); }
.nav-submenu a:hover, .nav-submenu a:focus-visible { color: var(--copper); }

/* Booking CTA — a gold pill at the foot of the sheet */
.nav a.nav-cta {
  margin-top: var(--space-md);
  color: var(--indigo-deep);
  background: var(--gold);
  padding: var(--space-xs) var(--space-md);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.nav a.nav-cta:hover, .nav a.nav-cta:focus-visible { color: var(--indigo-deep); background: var(--gold-soft); }

/* Hamburger toggle — shown on every viewport, floats above the open sheet and
   morphs into an X when expanded. */
.nav-toggle {
  display: inline-flex;
  position: relative;
  z-index: 110;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--bone);
}
.nav-toggle-bars { position: relative; display: block; width: 24px; height: 16px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 7px; }
.nav-toggle-bars span:nth-child(3) { top: 14px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bars span { transition: none; }
}

/* -------------------- Hero -------------------- */
.hero {
  position: relative;
  min-height: calc(100vh - 5rem);
  min-height: calc(100svh - 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  overflow: hidden;
  /* The sticky header sits in-flow above the hero; just a calm gap below it. */
  padding-top: clamp(var(--space-xl), 5vh, var(--space-2xl));
  padding-bottom: clamp(var(--space-2xl), 10vh, var(--space-3xl));
}
/* On tall / large screens, don't sink the content to the vertical middle —
   anchor it toward the top so the hero reads higher up. */
@media (min-height: 880px) {
  .hero { align-items: flex-start; justify-content: flex-start; }
}

/* Hero background: indigo gradient + optional photo + starfield */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Flat cream — identical to the page body so the hero reads as one continuous
     surface with the rest of the page (no gradient band, no warm glow tint). */
  background: var(--cream);
  z-index: -2;
}

.hero-photo { display: none; } /* dark-sky photo retired for the cream hero */

/* Starfield drawn in CSS — no external dependency */
.starfield {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85;
}

/* Cream hero: retire the literal night-sky props (round starfield, nebula, moon,
   planet, shooting star). The faint copper logo-mark below carries the moon +
   seed-of-life + lotus + 8-pointed stars instead. */
.hero .nebula,
.hero .moon,
.hero .distant-planet,
.hero .constellation,
.hero .shooting-star,
.hero .starfield { display: none; }

/* Faint copper logo-mark behind the hero (replaces the literal logo Catherine disliked) */
.hero-mark-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.hero-mark-bg svg {
  width: min(125%, 60rem);
  height: 100%;
  color: var(--copper);
  opacity: 0.16;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-mark-bg { animation: mark-float 20s ease-in-out infinite; will-change: transform; }
}
@keyframes mark-float {
  0%, 100% { transform: translate3d(0, -1.2%, 0); }
  50%      { transform: translate3d(0, 1.4%, 0); }
}

/* Page-wide faint watermark: a fixed copper mark that the transparent content
   sections scroll over, so the brand stays present down the whole page. */
.bg-mark {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.bg-mark img {
  width: auto;
  height: min(82vh, 740px);
  opacity: 0.10;
}

/* Page-wide copper sparkle field — the logo's three star shapes scattered as a
   faint FIXED layer behind every page (companion to .bg-mark, same fixed-behind-
   content trick). Calm and static so it never competes with the reading; the
   transparent content sections scroll over it the whole way down. */
.bg-stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  color: var(--copper);
}
.bg-stars svg { width: 100%; height: 100%; }
/* Copper on cream is low-contrast, so the authored per-star weights (--o ≈
   0.15–0.26) were imperceptible. Scale them up to an ambient-but-visible range
   (≈0.35–0.6); tune the multiplier to taste. */
.bg-stars use { opacity: calc(var(--o, 0.2) * 2.3); }

/* The watermark "inscribes itself" on first paint: sacred geometry drawn stroke
   by stroke (pathLength="1" keeps the dash math resolution-independent), then the
   lotus + stars bloom in. Calm, never glittery. */
@media (prefers-reduced-motion: no-preference) {
  .bg-mark .draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ink-draw 2s var(--ease-out) both;
    animation-delay: var(--d, 0s);
  }
  .bg-mark .mark-bloom {
    opacity: 0;
    animation: mark-bloom 1.6s var(--ease-out) both;
    animation-delay: var(--d, 0s);
  }
  /* Scroll-drawn section diagrams start hidden so there's no first-paint flash
     before the engine takes over. */
  [data-draw="scroll"] .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
}
@keyframes ink-draw { to { stroke-dashoffset: 0; } }
@keyframes mark-bloom { from { opacity: 0; } to { opacity: var(--bloom, 0.8); } }

.hero .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(var(--space-xl), 5vw, var(--space-3xl));
  width: 100%;
}

.hero-content { max-width: 36rem; }

/* 90-second intro video, repurposed into the hero's right column */
.hero-media { width: 100%; max-width: 26rem; justify-self: center; }
.hero-media-eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-base);
  color: var(--ink-soft);
  text-align: center;
  margin-bottom: var(--space-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media { animation: hero-media-in 1000ms var(--ease-out) 250ms both; }
  @keyframes hero-media-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
}
.hero-eyebrow { margin-bottom: var(--space-lg); }

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 1.06;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}
/* Tagline breaks into its own three lines ("Be a lighthouse / for yourself /
   and others."); block also keeps the staggered rise animation per phrase. */
.hero-title .reveal-word { display: block; }

.hero-sub {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  color: var(--gold-deep);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--gold);
  transition: gap var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.hero-cta:hover, .hero-cta:focus-visible { gap: var(--space-md); color: var(--gold-soft); }
.hero-cta-arrow { transition: transform var(--dur-micro) var(--ease-out); }
.hero-cta:hover .hero-cta-arrow { transform: translateX(4px); }

/* Hero booking CTA (the lead form lives on /contact, not here) */
.hero-book { margin-top: var(--space-xl); max-width: 32rem; }
.hero-book-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--indigo-deep);
  background: var(--gold);
  border: 0;
  border-radius: 999px;
  padding: 1rem 2.25rem;
  cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), gap var(--dur-micro) var(--ease-out);
}
.hero-book-btn:hover, .hero-book-btn:focus-visible { background: var(--gold-soft); transform: translateY(-1px); gap: var(--space-md); }
.hero-book-note { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--ink-mist); }

.hero-mark {
  display: grid;
  place-items: center;
  position: relative;
  aspect-ratio: 1;
  width: min(100%, 32rem);
  justify-self: center;
}
/* Real logo image — shown when /assets/mystic-indigo-logo.webp (or .svg) exists */
.hero-mark .brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter:
    saturate(1.2) brightness(1.07) contrast(1.05)
    drop-shadow(0 6px 22px oklch(28% 0.10 290 / 0.5))
    drop-shadow(0 0 42px oklch(58% 0.17 300 / 0.42));
  /* Own compositing layer: the drop-shadow rasterizes ONCE and is cached, so
     the float bob, the cursor tilt, and the sheen fade are all pure GPU
     composites — the big blur never re-rasterizes. Filter is static (never
     animated) to keep the raster thread idle. One promoted hero element is a
     deliberate, bounded use of will-change. */
  will-change: transform;
}

/* --- Interactive logo stage: ambient glow + cursor-driven tilt & sheen --- */
.hero-mark .brand-logo-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  perspective: 1100px;
  z-index: 1;
}
.hero-mark--fallback .brand-logo-stage { display: none; }

/* Luminous aura behind the mark — gives the colors a vibrant lift */
.brand-logo-aura {
  position: absolute;
  inset: 6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 56%,
    oklch(66% 0.18 300 / 0.55),
    oklch(56% 0.16 288 / 0.26) 42%,
    oklch(70% 0.14 90 / 0.10) 60%,
    transparent 72%);
  filter: blur(34px);
  pointer-events: none;
  /* Blur is constant (rasterized once); only opacity/transform transition,
     both composited. No filter transition → no hover re-raster. */
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Tilt layer — 3D rotation written straight to inline transform by JS
   (rAF-lerped, NO css transition) so it tracks the pointer with zero
   trailing lag. backface-visibility avoids fold seams under rotateX. */
.brand-logo-tilt {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  transform-style: flat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Float layer — ambient bob; keeps img + sheen in register */
.brand-logo-float {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

/* Cursor-follow sheen — a STATIC masked clip (no per-frame repaint) that
   holds a soft highlight blob. Only the blob is translated, so the effect
   is composite-only and cheap. No blend mode → no fold-line artifact. */
.brand-logo-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  -webkit-mask: url('/assets/mystic-indigo-logo.webp') center / contain no-repeat;
          mask: url('/assets/mystic-indigo-logo.webp') center / contain no-repeat;
}
.brand-logo-sheen-blob {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%,
    oklch(98% 0.05 95 / 0.5),
    oklch(90% 0.09 300 / 0.16) 30%,
    transparent 52%);
  transform: translate3d(0, 0, 0);
}

/* Cursor-active state — the highlight fades in (composited opacity). The
   tilt + a subtle lift (scale) are written by JS as transforms. Nothing
   here touches a filter, so the raster thread stays idle during hover. */
.brand-logo-stage.is-live .brand-logo-sheen { opacity: 1; }

/* Fallback composition (Vesica + lotus). Hidden when the real logo loads. */
.hero-mark .brand-logo-fallback {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  place-items: center;
}
.hero-mark--fallback .brand-logo-fallback { display: grid; }

.hero-mark .vesica {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--gold);
  opacity: 0.55;
}
.hero-mark .lotus-big {
  position: relative;
  width: 56%;
  color: var(--gold);
  filter: drop-shadow(0 0 32px oklch(60% 0.12 70 / 0.18));
}

.hero-scroll {
  /* Normal flow, centered below the hero's two columns (text + video) so the
     cue always sits beneath the content instead of overlapping it. */
  align-self: center;
  margin-top: clamp(1.75rem, 4vh, 3rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  color: var(--ink-mist);
  text-decoration: none;
}
.hero-scroll-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--copper-deep);
  opacity: 1;
  transition: color var(--dur-micro) var(--ease-out), opacity var(--dur-micro) var(--ease-out);
}
.hero-scroll-pendulum {
  width: 24px;
  height: 64px;
  overflow: visible;
  color: var(--copper-deep);
}
.hero-scroll-pendulum .pendulum-gem {
  transition: fill-opacity var(--dur-moment) var(--ease-out);
}
.hero-scroll:hover .hero-scroll-label,
.hero-scroll:focus-visible .hero-scroll-label {
  color: var(--ink);
  opacity: 1;
}
.hero-scroll:hover .pendulum-gem,
.hero-scroll:focus-visible .pendulum-gem {
  fill-opacity: 0.9;
}

@media (max-width: 820px) {
  /* The hero content is tall here and the navbar is fixed. Top-align (so tall
     content doesn't overflow upward past the padding) and clear the bar. */
  .hero { padding-top: var(--space-xl); align-items: flex-start; justify-content: flex-start; }
  .hero .wrap {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .hero-content { max-width: none; order: 1; }
  .hero-media { order: 2; max-width: 22rem; justify-self: center; margin-inline: auto; }
  .hero-scroll { display: none; }
}

/* -------------------- Threshold -------------------- */
.threshold {
  background: transparent;
  text-align: center;
  padding-block: clamp(var(--space-xl), 5vw, var(--space-2xl));
}

.threshold-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  max-width: 42ch;
  margin-inline: auto;
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-block: var(--space-lg);
  color: var(--gold-deep);
}
.ornament .rule {
  height: 1px;
  width: clamp(40px, 8vw, 90px);
  background: currentColor;
  opacity: 0.55;
}
.ornament .glyph { width: 8px; height: 8px; }

/* -------------------- About -------------------- */
.about .wrap {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(var(--space-xl), 6vw, var(--space-3xl));
  align-items: start;
}

.about-portrait {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--cream-warm);
  border: 1px solid var(--cream-edge);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.about-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% center;
  display: block;
}

.about-portrait .lotus-mark {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 30px;
  color: var(--cream);
  opacity: 0.92;
  filter: drop-shadow(0 1px 4px oklch(20% 0.09 282 / 0.55));
  z-index: 1;
}

/* Vesica field behind Catherine's portrait — two intersecting circles + an outer
   ring that inscribe themselves as the About section scrolls into view. */
.about-portrait-stage { position: relative; }
.about-portrait-stage .about-portrait { position: relative; z-index: 1; }
.about-vesica {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112%;
  height: auto;
  transform: translate(-50%, -50%);
  color: var(--gold-deep);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}
@media (max-width: 760px) {
  .about-vesica { width: 104%; opacity: 0.36; }
}

.about-text { padding-top: var(--space-md); }
.about-text .eyebrow { margin-bottom: var(--space-md); }
.about-title {
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--ink);
  margin-bottom: var(--space-md);
  max-width: 16ch;
}
.about-body p {
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}
.about-body p + p { margin-top: var(--space-sm); }

.about-sign {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink);
}
.about-more {
  margin-top: var(--space-md);
}
.about-more a {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color var(--dur-micro) var(--ease-out);
}
.about-more a:hover, .about-more a:focus-visible { color: var(--ink); }

@media (max-width: 760px) {
  .about .wrap { grid-template-columns: 1fr; gap: var(--space-xl); }
  .about-portrait { max-width: 22rem; }
}

/* -------------------- Practice (services) -------------------- */
.practice {
  background: transparent;
  color: var(--ink);
  position: relative;
}

.practice-header {
  text-align: center;
  margin-bottom: clamp(var(--space-xl), 4vw, var(--space-2xl));
}
.practice-header .eyebrow { margin-bottom: var(--space-md); }
.practice-header h2 {
  font-size: var(--text-3xl);
  font-style: italic;
  max-width: 16ch;
  margin-inline: auto;
}

/* -------------------- Duotone media (shared: home tiles + practice hub) --------------------
   Atmospheric celestial photos toned into the brand's indigo→warm-copper twilight
   so any source photo reads cohesive. Swap a photo by changing only its URL.
   Classic two-overlay duotone: shadows → indigo, highlights → warm cream-copper. */
.duo-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--cream-edge); /* neutral placeholder while the image loads */
}
.duo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Duotone removed — tile images render in their natural color. */
  transform: scale(1.001); /* hint own layer; hover lifts to 1.06 */
  transition: transform 900ms var(--ease-out);
}
/* Duotone color overlays removed so images show in natural color. */
.duo-media::before,
.duo-media::after { content: none; }
/* A faint star sits above the toned image as a brand accent */
.duo-media .duo-star {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  z-index: 3;
  width: 18px; height: 18px;
  color: var(--copper-soft);
  opacity: 0.85;
  pointer-events: none;
}

/* -------------------- Service tiles (home) -------------------- */
/* Filter chips */
.tile-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xl);
}
.chip {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: var(--cream-warm);
  border: 1px solid var(--cream-edge);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-md);
  min-height: 40px;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out), background var(--dur-micro) var(--ease-out),
    border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.chip:hover, .chip:focus-visible { border-color: var(--copper); color: var(--ink); }
.chip.is-active {
  color: var(--bone);
  background: linear-gradient(180deg, oklch(60% 0.115 54) 0%, oklch(50% 0.12 48) 100%);
  border-color: transparent;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--space-lg);
  max-width: 1120px;
  margin-inline: auto;
}
@media (min-width: 900px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
}
/* Filtered-out tiles: removed from flow so the grid reflows cleanly */
.tile[hidden] { display: none; }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cream-warm);
  border: 1px solid var(--cream-edge);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition:
    transform var(--dur-moment) var(--ease-out),
    border-color var(--dur-moment) var(--ease-out),
    box-shadow var(--dur-moment) var(--ease-out);
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-5px);
  border-color: var(--copper);
  box-shadow: 0 18px 44px oklch(20% 0.080 282 / 0.14);
}
.tile-media { aspect-ratio: 4 / 3; }
/* Crystals tile: the quartz point sits high in the tall photo, so bias the
   cover-crop upward in the frame — drops the image slightly so the top of the
   crystal stays visible instead of being cut at the default center. */
.tile[href="/practice/crystals"] .duo-media img { object-position: center 30%; }
/* Astrology Readings tile: same idea — drop the tall spheres photo slightly so
   the upper sphere reads and the frame isn't cropped tight at the center. */
.tile[href="/practice/astrology"] .duo-media img { object-position: center 35%; }
.tile:hover .duo-media img,
.tile:focus-visible .duo-media img { transform: scale(1.06); }

.tile-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  flex: 1;
}
.tile-title {
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--ink);
  margin: 0;
  transition: color var(--dur-micro) var(--ease-out);
}
.tile:hover .tile-title, .tile:focus-visible .tile-title { color: var(--copper-deep); }
.tile-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  color: var(--copper-deep);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tile-cta::after {
  content: "→";
  transition: transform var(--dur-micro) var(--ease-out);
}
.tile:hover .tile-cta::after, .tile:focus-visible .tile-cta::after { transform: translateX(4px); }

.practice-note {
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  text-align: center;
}
.practice-note-lead {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--ink-soft);
}
.practice-note .cta-button { margin-top: 0; }

/* Beacon CTA: a slow copper glow breathes around the button to draw the eye,
   with a lift on hover. The pulse stops on hover so the hover state reads cleanly. */
.cta-button--beacon:hover, .cta-button--beacon:focus-visible {
  transform: translateY(-2px);
  animation: none;
}
@media (prefers-reduced-motion: no-preference) {
  .cta-button--beacon { animation: cta-beacon 3s ease-in-out infinite; }
}
@keyframes cta-beacon {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 oklch(80% 0.10 60 / 0.55),
      inset 0 -1px 0 oklch(38% 0.10 45 / 0.5),
      0 2px 22px oklch(58% 0.12 50 / 0.24);
  }
  50% {
    box-shadow:
      inset 0 1px 0 oklch(84% 0.10 60 / 0.62),
      inset 0 -1px 0 oklch(38% 0.10 45 / 0.55),
      0 6px 46px oklch(63% 0.13 52 / 0.55);
  }
}

/* -------------------- Conversation -------------------- */
.conversation {
  background: transparent;
  text-align: center;
  padding-block: clamp(var(--space-2xl), 8vw, var(--space-3xl));
  position: relative;
  overflow: hidden;
}

/* Astrology chart wheel — backdrop for the conversation section */
.chart-wheel {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(420px, 62vw, 720px);
  height: clamp(420px, 62vw, 720px);
  transform: translate(-50%, -50%);
  color: var(--gold-deep);
  opacity: 0.24;
  pointer-events: none;
  z-index: 0;
}
.chart-wheel .zodiac-glyphs {
  opacity: 0.7;
  font-variant-emoji: text;  /* Reject the Apple emoji rendering of zodiac glyphs */
}
.chart-wheel .zodiac-glyphs text { font-variant-emoji: text; }
.chart-wheel .house-numbers { opacity: 0.5; letter-spacing: 0.08em; font-family: 'Cardo', serif; }

/* Auto-collected scroll-draw scopes (the chart wheel) hide until the engine has
   set up the dash state, so there's no pre-JS flash of the finished chart. The
   gate lives in no-preference, so reduced-motion simply shows the drawn chart. */
@media (prefers-reduced-motion: no-preference) {
  [data-draw-all]:not(.is-draw-ready) { opacity: 0; }
  [data-draw="scroll"] .draw-fade { opacity: 0; }
}

/* Ornament flourish above the eyebrow */
.conv-flourish {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  color: var(--gold-deep);
}
.conv-flourish .rule {
  height: 1px;
  width: clamp(28px, 6vw, 64px);
  background: currentColor;
  opacity: 0.55;
}
.conv-flourish-glyph {
  color: var(--gold-deep);
  filter: drop-shadow(0 0 6px oklch(66% 0.11 52 / 0.45));
}

.conversation > *:not(.chart-wheel) { position: relative; z-index: 1; }
.conversation .wrap { position: relative; z-index: 1; }

.conversation .eyebrow { margin-bottom: var(--space-md); }
.conversation h2 {
  font-size: var(--text-3xl);
  font-style: italic;
  color: var(--ink);
  max-width: 18ch;
  margin-inline: auto;
}
.conversation p {
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 38ch;
  margin-inline: auto;
}

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(180deg, oklch(60% 0.115 54) 0%, oklch(50% 0.12 48) 100%);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 1px;
  box-shadow:
    inset 0 1px 0 oklch(80% 0.10 60 / 0.55),
    inset 0 -1px 0 oklch(38% 0.10 45 / 0.5),
    0 2px 28px oklch(55% 0.12 50 / 0.22);
  transition: background var(--dur-micro) var(--ease-out),
              box-shadow var(--dur-moment) var(--ease-out),
              transform var(--dur-micro) var(--ease-out),
              letter-spacing var(--dur-moment) var(--ease-out);
  min-height: 56px;
  min-width: 260px;
  justify-content: center;
  position: relative;
  isolation: isolate;
}
.cta-button .cta-glyph {
  color: oklch(90% 0.07 60);
  transition: transform var(--dur-moment) var(--ease-out);
}
.cta-button:hover, .cta-button:focus-visible {
  background: linear-gradient(180deg, oklch(64% 0.115 54) 0%, oklch(54% 0.12 48) 100%);
  letter-spacing: 0.18em;
  box-shadow:
    inset 0 1px 0 oklch(84% 0.10 60 / 0.65),
    inset 0 -1px 0 oklch(38% 0.10 45 / 0.6),
    0 4px 36px oklch(55% 0.12 50 / 0.36);
}
.cta-button:hover .cta-glyph, .cta-button:focus-visible .cta-glyph {
  transform: rotate(45deg);
}
.cta-button:active { transform: translateY(1px); }

.conversation-fineprint {
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--ink-mist);
}

/* -------------------- Writing -------------------- */
.writing {
  background: transparent;
  border-top: 1px solid var(--cream-edge);
}

.writing-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-2xl);
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.writing-header h2 {
  font-size: var(--text-2xl);
  font-style: italic;
  color: var(--ink);
}
.writing-header a {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.writing-header a:hover, .writing-header a:focus-visible { color: var(--ink); }

.articles { display: grid; gap: var(--space-xl); }

.article {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid var(--cream-edge);
  align-items: baseline;
}
.article:last-child { border-bottom: 0; padding-bottom: 0; }

.article-date {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mist);
  padding-top: 0.4em;
}

.article-body { max-width: 56ch; }
.article-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  color: var(--ink);
  margin-bottom: var(--space-xs);
  line-height: 1.2;
}
.article-title a:hover, .article-title a:focus-visible { color: var(--gold-deep); }
.article-dek { color: var(--ink-soft); font-size: var(--text-base); line-height: 1.6; }

/* Home "Writing" cards: the entire card is the link, not just the title.
   The title's anchor stretches an invisible overlay across the whole .article
   row, so a click anywhere on the card opens the post (and hovering the card
   lights the title). Keeps one real link per card — no extra markup. */
.writing .article { position: relative; cursor: pointer; }
/* The reveal stagger leaves a translateY(0) transform on the title <h3>, which
   would become the overlay's containing block and clip it to the title line.
   Clear it (the card itself still fades+slides in) so the overlay can fill the
   whole card. Specificity (0,3,0) beats the reveal rules without !important. */
.writing .article .article-title { transform: none; }
.writing .article-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.writing .article:hover .article-title a { color: var(--gold-deep); }

@media (max-width: 600px) {
  .article { grid-template-columns: 1fr; gap: var(--space-xs); }
  .article-date { padding-top: 0; }
}

/* -------------------- Footer -------------------- */
.site-footer {
  background: var(--cream);
  color: var(--ink-soft);
  padding-block: var(--space-3xl);
  border-top: 1px solid var(--cream-edge);
}

.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.footer-brand .brand { color: var(--ink); }
.footer-brand p {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-mist);
  font-size: var(--text-base);
  max-width: 30ch;
  line-height: 1.5;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-md);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
.footer-col a {
  color: var(--copper-deep);
  font-size: var(--text-sm);
}
.footer-col a:hover, .footer-col a:focus-visible { color: var(--ink); }
/* A column may stack more than one group (Elsewhere, then Follow). The first
   heading sits flush with the column top; every later one needs air above it
   so the two groups read as separate rather than as one long list. */
.footer-col > * + h4 { margin-top: var(--space-lg); }

/* Footer newsletter sign-up (wired to /api/newsletter → Resend) */
.footer-news { margin-top: var(--space-lg); max-width: 36ch; }
.footer-news h4 {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--space-sm);
}
.footer-brand .footer-news-lead {
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: var(--space-md);
  max-width: none;
}
.footer-news-row { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.footer-news input[type="email"] {
  flex: 1 1 12rem;
  min-width: 0;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--ink);
  background: oklch(98% 0.006 82);
  border: 1px solid var(--cream-edge);
  border-radius: 999px;
  padding: 0.62rem 0.95rem;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.footer-news input::placeholder { color: var(--ink-mist); }
.footer-news input[type="email"]:focus {
  outline: none;
  border-color: var(--copper-deep);
  box-shadow: 0 0 0 3px oklch(75% 0.135 78 / 0.18);
}
.footer-news button {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone);
  background: linear-gradient(180deg, oklch(60% 0.115 54) 0%, oklch(50% 0.12 48) 100%);
  border: 0;
  border-radius: 999px;
  padding: 0.62rem 1.15rem;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-moment) var(--ease-out);
}
.footer-news button:hover, .footer-news button:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px oklch(55% 0.12 50 / 0.3);
}
.footer-news button:disabled { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }
.footer-news-status { margin-top: var(--space-sm); font-size: var(--text-xs); color: var(--gold-deep); }
.footer-news-status.is-error { color: oklch(55% 0.16 25); }

/* Instagram link in the Follow column. No extra top margin — the column
   heading's margin-bottom already sets the offset, so the handle's first row
   lines up with the first link of the Explore column beside it. */
.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  transition: color var(--dur-micro) var(--ease-out);
}
.footer-ig svg { flex: none; color: var(--gold); }
.footer-ig:hover, .footer-ig:focus-visible { color: var(--ink); }
.footer-ig:hover svg, .footer-ig:focus-visible svg { color: var(--copper-deep); }

.footer-base {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--cream-edge);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  font-size: var(--text-xs);
  color: var(--ink-mist);
  letter-spacing: 0.05em;
}
/* Links in the base row (email + the Clap Digital credit) read as the deep
   copper so they're distinguishable from the muted copyright text. */
.footer-base a { color: var(--copper-deep); }
.footer-base a:hover, .footer-base a:focus-visible { color: var(--ink); }
/* Address takes its own full-width row; the copyright (left) and the Clap Digital
   credit (right) share the row below via space-between. */
.footer-base > span:first-child { flex-basis: 100%; }

/* Tablet band: three columns get too tight (the newsletter row wraps), so the
   brand + newsletter take the full first row and the two link columns share
   the second. Collapses to a single column on phones below. */
@media (max-width: 960px) {
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-news { max-width: 32rem; }
}
@media (max-width: 760px) {
  .site-footer .wrap { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* -------------------- Sound altar: quartz singing bowl -------------------- */
/* A crystalline sphere in its own section, with a glowing halo that pulses so it
   reads as interactive. Click it to ring a soft singing-bowl tone. */
.sound-altar {
  text-align: center;
  padding-block: clamp(var(--space-2xl), 9vw, var(--space-3xl));
}
.sound-altar .eyebrow { margin-bottom: var(--space-md); }
.sound-altar-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--ink);
}
.sound-altar-note {
  margin: var(--space-md) auto var(--space-2xl);
  max-width: 36ch;
  color: var(--ink-soft);
  font-size: var(--text-lg);
  line-height: 1.55;
}
.quartz {
  display: inline-grid;
  place-items: center;
  padding: var(--space-xl);
  background: none;
  border: 0;
  cursor: pointer;
}
.quartz-ball {
  position: relative;
  width: clamp(136px, 19vw, 196px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 28%, oklch(99% 0.02 95 / 0.98) 0%, transparent 42%),
    radial-gradient(circle at 64% 72%, oklch(68% 0.13 52 / 0.9) 0%, transparent 58%),
    radial-gradient(circle at 50% 50%, oklch(84% 0.07 285 / 0.7), oklch(68% 0.12 300 / 0.5));
  box-shadow:
    0 16px 60px oklch(58% 0.13 52 / 0.4),
    0 0 60px oklch(66% 0.12 54 / 0.3),
    inset 0 0 34px oklch(99% 0.03 90 / 0.55),
    inset -7px -12px 30px oklch(55% 0.11 300 / 0.34);
  transition: transform var(--dur-moment) var(--ease-out);
}
/* Glowing halo that gently pulses to draw the eye */
.quartz-ball::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(68% 0.13 54 / 0.5) 0%, transparent 70%);
  z-index: -1;
}
/* Emanating beacon ring: signals "click me" and captivates the eye */
.quartz-ball::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid oklch(60% 0.13 52 / 0.55);
  pointer-events: none;
}
.quartz:hover .quartz-ball,
.quartz:focus-visible .quartz-ball { transform: scale(1.05); }
.quartz:active .quartz-ball { transform: scale(0.97); }
.quartz.is-ringing .quartz-ball { animation: quartz-ring 1.6s var(--ease-out); }

@media (prefers-reduced-motion: no-preference) {
  .quartz-ball::before { animation: quartz-pulse 5s ease-in-out infinite; }
  .quartz-ball::after  { animation: quartz-beacon 3s ease-out infinite; }
}
@keyframes quartz-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.88); }
  50%      { opacity: 1;   transform: scale(1.14); }
}
@keyframes quartz-ring {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}
/* Emanating "click me" beacon */
@keyframes quartz-beacon {
  0%        { transform: scale(1);   opacity: 0.6; }
  70%, 100% { transform: scale(1.7); opacity: 0; }
}

/* -------------------- Hero reveal motion -------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal-word {
    display: inline-block;
    transform: translateY(0.6em);
    opacity: 0;
    animation: rise var(--dur-reveal) var(--ease-out) forwards;
  }
  .reveal-word:nth-child(1) { animation-delay: 80ms; }
  .reveal-word:nth-child(2) { animation-delay: 200ms; }
  .reveal-word:nth-child(3) { animation-delay: 360ms; }
  .reveal-word:nth-child(4) { animation-delay: 520ms; }
  .reveal-word:nth-child(5) { animation-delay: 680ms; }

  .hero-eyebrow, .hero-sub, .hero-cta {
    opacity: 0;
    animation: fade-in var(--dur-moment) var(--ease-out) forwards;
  }
  .hero-eyebrow { animation-delay: 0ms; }
  .hero-sub { animation-delay: 900ms; }
  .hero-cta { animation-delay: 1100ms; }

  .hero-mark {
    opacity: 0;
    transform: scale(0.95);
    animation: appear var(--dur-reveal) var(--ease-out) forwards;
    animation-delay: 200ms;
  }

  .hero-scroll {
    opacity: 0;
    animation: fade-in var(--dur-moment) var(--ease-out) forwards;
    animation-delay: 1500ms;
  }
  .pendulum-swing {
    transform-origin: 0 0;
    transform-box: view-box;
    animation: pendulum-sway 4.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
    animation-delay: 2000ms;
  }

  /* Living logo — gentle float + breathing aura (composite-only) */
  .brand-logo-float { animation: logo-float 7s ease-in-out infinite; }
  .brand-logo-aura  { animation: logo-aura 6.5s ease-in-out infinite; }
}

@keyframes rise {
  to { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in {
  to { opacity: 1; }
}
@keyframes appear {
  to { opacity: 1; transform: scale(1); }
}
@keyframes pendulum-sway {
  0%, 100% { transform: rotate(-7deg); }
  50%      { transform: rotate(7deg); }
}
@keyframes logo-float {
  0%, 100% { transform: translateY(-1.4%); }
  50%      { transform: translateY(1.7%); }
}
@keyframes logo-aura {
  0%, 100% { opacity: 0.72; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* Reduced motion: hold everything visible at rest */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-word { transform: none; opacity: 1; }
  .tone-mark.is-breathing { animation: none; }
}

/* =============================================================
   Animated atmosphere (added in iteration 2)
   ============================================================= */

/* Soft nebula glow behind the starfield, slow breathing */
.nebula {
  position: absolute;
  inset: -10% -10%;
  pointer-events: none;
  z-index: -2;
  background:
    radial-gradient(ellipse 700px 500px at 28% 32%, oklch(48% 0.14 285 / 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 600px 420px at 78% 68%, oklch(40% 0.12 270 / 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 500px 380px at 60% 18%, oklch(46% 0.10 295 / 0.35) 0%, transparent 70%);
  filter: blur(30px);
  opacity: 0.65;
  will-change: transform, opacity;
  animation: nebula-drift 22s ease-in-out infinite;
}

@keyframes nebula-drift {
  0%, 100% { opacity: 0.55; transform: scale(1) translate3d(0, 0, 0); }
  50%      { opacity: 0.95; transform: scale(1.07) translate3d(1.2%, -0.6%, 0); }
}

/* Starfield very slow drift */
.starfield {
  animation: starfield-drift 240s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes starfield-drift {
  0%   { transform: translate3d(-1%, 0, 0) rotate(-0.4deg); }
  50%  { transform: translate3d(1%, -0.3%, 0) rotate(0.2deg); }
  100% { transform: translate3d(-1%, 0, 0) rotate(-0.4deg); }
}

/* Twinkling stars — uses inline --td (duration) and --dl (delay) */
.star--twinkle {
  animation: twinkle var(--td, 6s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
  transform-origin: center;
}
@keyframes twinkle {
  0%, 100% { opacity: var(--max-op, 0.85); }
  50%      { opacity: var(--min-op, 0.18); }
}

/* Bright stars — gentle pulsed glow. The drop-shadow is STATIC (rasterized
   once); only opacity pulses, which is composited. Animating the filter
   here would re-raster every star every frame on the main thread. */
.star--bright {
  filter: drop-shadow(0 0 5px oklch(90% 0.10 82 / 0.5));
  animation: bright-pulse 9s ease-in-out infinite;
  transform-origin: center;
}
@keyframes bright-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

/* Constellation lines fade in once, then linger */
.constellation polyline {
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: constellation-draw 2.8s var(--ease-out) forwards;
  animation-delay: 1.6s;
}
.constellation polyline:nth-child(2) { animation-delay: 2.1s; }
@keyframes constellation-draw {
  to { stroke-dashoffset: 0; }
}

/* Crescent moon entrance */
.moon {
  opacity: 0;
  transform-origin: center;
  animation: moon-rise 2.4s var(--ease-out) forwards;
  animation-delay: 0.6s;
}
@keyframes moon-rise {
  from { opacity: 0; transform: translateY(-10px) scale(0.96); }
  to   { opacity: 0.55; transform: translateY(0) scale(1); }
}

/* Distant ringed planet entrance */
.distant-planet {
  opacity: 0;
  animation: planet-fade 2.6s var(--ease-out) forwards;
  animation-delay: 1.2s;
}
@keyframes planet-fade {
  to { opacity: 0.55; }
}

/* Vesica draw-in on first paint */
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .vesica circle {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: vesica-draw 2.4s var(--ease-out) forwards;
    animation-delay: 0.9s;
  }
  .hero-mark .vesica circle:nth-child(2) { animation-delay: 1.4s; }

  .hero-mark .lotus-big {
    animation: lotus-breath 10s var(--ease-out) infinite;
    animation-delay: 2.4s;
    transform-origin: center;
  }
}
@keyframes vesica-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes lotus-breath {
  0%, 100% { transform: scale(1);     }
  50%      { transform: scale(1.018); }
}

/* Rare shooting star — one per ~28s cycle */
.shooting-star {
  position: absolute;
  top: 8%;
  left: -10%;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, oklch(85% 0.13 80) 60%, transparent);
  pointer-events: none;
  opacity: 0;
  transform-origin: left center;
  z-index: -1;
  will-change: transform;
  animation: shoot 28s linear infinite;
  animation-delay: 7s;
}
@keyframes shoot {
  0%       { opacity: 0; transform: translate3d(0, 0, 0) rotate(16deg); }
  3%       { opacity: 0; }
  4%       { opacity: 1; }
  9%       { opacity: 1; }
  11%      { opacity: 0; transform: translate3d(115vw, 38vh, 0) rotate(16deg); }
  100%     { opacity: 0; transform: translate3d(115vw, 38vh, 0) rotate(16deg); }
}

/* =============================================================
   Custom gold cursor (gold dot + lagging ring)
   ============================================================= */
.cursor, .cursor-trail { display: none; }

@media (hover: hover) and (pointer: fine) {
  /* Star-trail canvas: one composited layer, sized to the viewport in JS.
     Sits just under the dot/ring; never intercepts pointer events. */
  .cursor-trail {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
  }
  .cursor {
    display: block;
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 50%;
    /* Only transform is promoted. Size changes are done via JS scale (a
       composited transform), never width/height (which force layout). */
    will-change: transform;
    opacity: 0;
    transition: opacity 240ms var(--ease-out);
  }
  .cursor.is-ready { opacity: 1; }

  .cursor--ring {
    width: 36px;
    height: 36px;
    margin: -18px 0 0 -18px;
    border: 1px solid var(--gold);
    /* No size/layout transitions — JS lerps translate + scale. Color is the
       only paint, over a 36px box, and only on hover (cheap). */
    transition:
      opacity 240ms var(--ease-out),
      border-color 240ms var(--ease-out),
      background-color 320ms var(--ease-out);
  }
  .cursor--dot {
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    background: var(--gold);
  }
  .cursor--ring.is-hovering {
    border-color: var(--gold-soft);
    background-color: oklch(75% 0.12 78 / 0.06);
  }
  .cursor.is-hidden { opacity: 0; }
}

/* =============================================================
   Scroll reveals
   ============================================================= */
/* Reveal styles only apply when JS is active (html.js).
   Without JS, [data-reveal] elements remain visible — graceful degradation. */
html.js [data-reveal]:not(.is-revealed),
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 420ms var(--ease-out), transform 680ms var(--ease-out);
  /* No will-change here: these are whole page sections, and pinning each one
     to its own compositor layer for the life of the page made phones stutter.
     The running transition promotes a layer on its own when needed. */
}
html.js [data-reveal].is-revealed,
.reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Choreographed inner stagger — each section's contents cascade in */
.reveal :where(.eyebrow, .ornament, h2, h3, .about-portrait, .about-body,
  .about-sign, .about-badges, .vignette, .article, .cta-button, .threshold-line,
  .practice-note, .conversation-fineprint, .conv-flourish, .video-frame,
  .sound-altar-note, .begin-grid, .writing-header > a, .writing-header > h2) {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
}
.reveal.is-revealed :where(.eyebrow, .ornament, h2, h3, .about-portrait, .about-body,
  .about-sign, .about-badges, .vignette, .article, .cta-button, .threshold-line,
  .practice-note, .conversation-fineprint, .conv-flourish, .video-frame,
  .sound-altar-note, .begin-grid, .writing-header > a, .writing-header > h2) {
  opacity: 1;
  transform: translateY(0);
}

/* Individual stagger delays — make each element settle in sequence.
   Kept tight (≤ ~440ms tail): on phones the long desktop-era cascade read as
   content trickling in piece by piece after the section was already on screen. */
.reveal.is-revealed .conv-flourish     { transition-delay: 60ms; }
.reveal.is-revealed .ornament:first-child { transition-delay: 60ms; }
.reveal.is-revealed .eyebrow           { transition-delay: 110ms; }
.reveal.is-revealed h2                 { transition-delay: 170ms; }
.reveal.is-revealed .threshold-line    { transition-delay: 160ms; }
.reveal.is-revealed .about-portrait    { transition-delay: 150ms; }
.reveal.is-revealed .about-body        { transition-delay: 240ms; }
.reveal.is-revealed .about-sign        { transition-delay: 380ms; }
.reveal.is-revealed .ornament:last-child { transition-delay: 270ms; }
.reveal.is-revealed h3                 { transition-delay: 230ms; }
.reveal.is-revealed .tile:nth-child(1) { transition-delay: 110ms; }
.reveal.is-revealed .tile:nth-child(2) { transition-delay: 165ms; }
.reveal.is-revealed .tile:nth-child(3) { transition-delay: 220ms; }
.reveal.is-revealed .tile:nth-child(4) { transition-delay: 275ms; }
.reveal.is-revealed .tile:nth-child(5) { transition-delay: 330ms; }
.reveal.is-revealed .tile:nth-child(6) { transition-delay: 385ms; }
.reveal.is-revealed .tile:nth-child(7) { transition-delay: 440ms; }
.reveal.is-revealed .article           { transition-delay: 160ms; }
.reveal.is-revealed .article:nth-of-type(2) { transition-delay: 260ms; }
.reveal.is-revealed .article:nth-of-type(3) { transition-delay: 360ms; }
.reveal.is-revealed .cta-button        { transition-delay: 360ms; }
.reveal.is-revealed .practice-note     { transition-delay: 440ms; }
.reveal.is-revealed .conversation-fineprint { transition-delay: 430ms; }
.reveal.is-revealed .writing-header > h2 { transition-delay: 130ms; }
.reveal.is-revealed .writing-header > a  { transition-delay: 230ms; }

/* Service tiles fade in (opacity only → the hover lift owns the transform) */
.reveal .tile { opacity: 0; transition: opacity 480ms var(--ease-out); }
.reveal.is-revealed .tile { opacity: 1; }

/* Instant reveal — for sections already on screen when the script arrives and
   for the far-offscreen safety net: content that should simply BE there snaps
   in with no fade-lag or stagger (the pop-in phones complained about was this
   choreography playing where it could be seen mid-load). Placed after the
   delay table so it wins the specificity ties. */
.reveal.reveal-instant,
.reveal.reveal-instant .tile,
.reveal.is-revealed.reveal-instant .tile,
.reveal.is-revealed.reveal-instant :where(.eyebrow, .ornament, h2, h3, .about-portrait, .about-body,
  .about-sign, .about-badges, .vignette, .article, .cta-button, .threshold-line,
  .practice-note, .conversation-fineprint, .conv-flourish, .video-frame,
  .sound-altar-note, .begin-grid, .writing-header > a, .writing-header > h2) {
  transition: none;
}

/* Ambient twinkling 8-pointed stars in the hero (gentle scroll parallax via JS) */
.hero-stars { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-star {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  color: var(--copper);
  opacity: 0.5;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-star { animation: hero-twinkle var(--d, 6s) ease-in-out var(--dl, 0s) infinite; }
}
@keyframes hero-twinkle {
  0%, 100% { opacity: 0.2;  transform: scale(0.8); }
  50%      { opacity: 0.68; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  .reveal, .reveal.is-revealed {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .nebula, .starfield, .star--twinkle, .star--bright,
  .shooting-star, .moon, .distant-planet,
  .constellation polyline, .hero-mark .lotus-big,
  .hero-mark .vesica circle {
    animation: none !important;
  }
  .hero-mark .vesica circle { stroke-dashoffset: 0 !important; }
  .constellation polyline { stroke-dashoffset: 0 !important; }
  .moon, .distant-planet { opacity: 0.55 !important; }
}

/* -------------------- Print -------------------- */
@media print {
  .site-header, .quartz, .hero-scroll, .conversation .cta-button,
  .cursor, .nebula, .starfield, .shooting-star, .calendly-inline-widget { display: none; }
  body { background: white; color: black; }
}

/* =============================================================
   Home flow: intro video, About credential badges, begin grid + contact form
   ============================================================= */
.intro-video { padding-block: clamp(var(--space-xl), 6vw, var(--space-3xl)); }
.intro-video .wrap { max-width: 940px; }
.video-frame {
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--cream-edge);
  background: linear-gradient(160deg, oklch(94% 0.02 70), oklch(90% 0.035 58));
  box-shadow: 0 18px 50px oklch(40% 0.06 285 / 0.12);
}
.video-frame iframe, .video-frame video { width: 100%; height: 100%; border: 0; display: block; }

/* --- Hero introduction film: a portrait frame that reads on the dark hero --- */
.video-frame.hero-video {
  position: relative;
  aspect-ratio: 1432 / 2172;          /* the film's own portrait ratio */
  width: 100%;
  max-width: 24rem;
  max-height: 80vh;
  margin-inline: auto;
  border-radius: 20px;
  border: 1px solid oklch(74% 0.085 56 / 0.5);     /* copper hairline */
  background: var(--indigo-mid);                     /* deep while the file loads */
  /* No drop-shadow: the hero must read as one flat cream with no dark glow
     under the frame. The copper hairline alone defines the frame's edge. */
  box-shadow: none;
}
.hero-video__el { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Custom play overlay — copper beacon over the poster still */
.hero-video__play {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-sm);
  border: 0; padding: 0; margin: 0;
  cursor: pointer;
  color: var(--bone);
  /* Faint black scrim over the poster until the film starts (then it fades out) */
  background: oklch(0% 0 0 / 0.34);
  transition: opacity var(--dur-moment) var(--ease-out), visibility var(--dur-moment);
}
.hero-video__ring {
  position: relative;
  display: grid; place-items: center;
  flex: none;                 /* keep a true 72×72 circle in the flex column (don't shrink) */
  width: 72px; height: 72px; border-radius: 50%;
  color: var(--cream);
  padding-left: 4px;
  background: linear-gradient(180deg, var(--copper), var(--copper-deep));
  box-shadow:
    0 10px 30px oklch(45% 0.12 50 / 0.5),
    0 0 0 1px oklch(82% 0.07 62 / 0.45),
    0 0 0 8px oklch(90% 0.05 70 / 0.10);
  transition: transform var(--dur-moment) var(--ease-out), box-shadow var(--dur-moment) var(--ease-out);
}
.hero-video__icon { display: block; }
/* Circular countdown that sweeps around the beacon over 3s before auto-start.
   Fixed 86px (72px ring + 7px overhang each side), centered on the ring with a
   transform so it stays concentric regardless of the ring's optical padding. */
.hero-video__countdown {
  position: absolute; top: 50%; left: 50%;
  width: 86px; height: 86px;
  max-width: none;            /* opt out of the global svg{max-width:100%} so it stays square */
  transform: translate(-50%, -50%) rotate(-90deg);   /* center, then start the sweep at 12 o'clock */
  opacity: 0; pointer-events: none;
}
.hero-video__countdown-track,
.hero-video__countdown-fill { fill: none; stroke-width: 4; }
.hero-video__countdown-track { stroke: oklch(100% 0 0 / 0.22); }
.hero-video__countdown-fill {
  stroke: var(--bone); stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;   /* pathLength="100" → hidden */
}
.hero-video__cue {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-base); letter-spacing: 0.01em;
  color: var(--bone); text-shadow: 0 1px 14px oklch(16% 0.06 282 / 0.85);
}
.hero-video__play:hover .hero-video__ring,
.hero-video__play:focus-visible .hero-video__ring {
  transform: scale(1.08);
  box-shadow:
    0 14px 40px oklch(45% 0.12 50 / 0.6),
    0 0 0 1px oklch(85% 0.08 64 / 0.6),
    0 0 0 12px oklch(90% 0.06 70 / 0.14);
}
.hero-video__play:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* Once it's running: fade the overlay, let native controls take over */
.hero-video.is-playing .hero-video__play { opacity: 0; visibility: hidden; pointer-events: none; }

/* A slow beacon pulse invites the play — only when motion is welcome */
@media (prefers-reduced-motion: no-preference) {
  .hero-video__ring::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid oklch(82% 0.08 62 / 0.6);
    animation: hero-video-pulse 3.2s var(--ease-out) infinite;
  }
  @keyframes hero-video-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { transform: scale(1.7); opacity: 0; }
    100% { transform: scale(1.7); opacity: 0; }
  }
  .hero-video.is-playing .hero-video__ring::before { animation: none; }

  /* During the 3s countdown: show the ring sweeping, and quiet the idle pulse */
  .hero-video.is-counting .hero-video__ring::before { animation: none; opacity: 0; }
  .hero-video.is-counting .hero-video__countdown { opacity: 1; }
  .hero-video.is-counting .hero-video__countdown-fill {
    animation: hero-video-countdown 3s linear forwards;
  }
  @keyframes hero-video-countdown { to { stroke-dashoffset: 0; } }
}

/* About credential badges */
.about-badges {
  list-style: none; margin: var(--space-md) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm);
}
.about-badges li {
  font-family: var(--font-body); font-size: var(--text-xs);
  letter-spacing: 0.03em; color: var(--copper-deep);
  border: 1px solid var(--cream-edge); background: oklch(97% 0.015 70);
  padding: 0.4rem 0.85rem; border-radius: 999px;
}

/* Begin: book + contact, side by side */
.begin-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  text-align: left; margin: var(--space-2xl) auto 0; max-width: 1000px;
}
.begin-col-title {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-xl); color: var(--ink); margin-bottom: var(--space-md);
}
.begin-grid .calendly-inline-widget {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--cream-edge); background: var(--cream);
}
.contact-form { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-form .field { display: flex; flex-direction: column; gap: var(--space-2xs); }
.contact-form .field > span {
  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600;
}
.contact-form .field em { text-transform: none; letter-spacing: 0; color: var(--ink-mist); font-style: normal; }
.contact-form input, .contact-form textarea {
  font: inherit; font-size: var(--text-sm); color: var(--ink);
  background: oklch(99% 0.006 82); border: 1px solid var(--cream-edge);
  border-radius: 12px; padding: 0.7rem 0.85rem; width: 100%;
  transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.contact-form textarea { resize: vertical; min-height: 6rem; line-height: 1.6; }
.contact-form input:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--copper-deep);
  box-shadow: 0 0 0 3px oklch(63% 0.115 52 / 0.18);
}
.contact-form .cta-button { align-self: flex-start; margin-top: var(--space-2xs); min-width: 0; }
.contact-status { font-size: var(--text-sm); color: var(--copper-deep); margin-top: var(--space-xs) !important; }

/* =============================================================
   Waxing-moon scroll orb — progress ring + back-to-top, on every page.
   The copper ring fills as you descend; the moon inside it waxes from
   new to full; clicking the orb returns you to the top.
   ============================================================= */
.moon-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  bottom: max(clamp(1rem, 3vw, 2rem), env(safe-area-inset-bottom, 0px));
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--copper-soft);
  background: radial-gradient(circle at 50% 38%, var(--indigo-soft), var(--indigo-deep) 74%);
  box-shadow:
    0 6px 22px oklch(20% 0.08 282 / 0.45),
    0 0 0 1px oklch(63% 0.115 52 / 0.35),
    0 0 18px oklch(63% 0.115 52 / 0.22);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition:
    opacity var(--dur-moment) var(--ease-out),
    transform var(--dur-moment) var(--ease-out),
    box-shadow var(--dur-moment) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.moon-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.moon-top.is-suppressed { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Stack the moon SVG and the hover chevron in the same grid cell. */
.moon-top > * { grid-area: 1 / 1; }

.moon-top-track { stroke: oklch(63% 0.115 52 / 0.22); }
.moon-top-ring {
  stroke: var(--copper);
  filter: drop-shadow(0 0 3px oklch(63% 0.115 52 / 0.55));
  transition: stroke-dashoffset var(--dur-micro) linear;
}
.moon-top-disc { fill: var(--copper-soft); transition: opacity var(--dur-micro) var(--ease-out); }
.moon-top-chev { color: var(--copper-soft); opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); pointer-events: none; }

.moon-top:hover, .moon-top:focus-visible { transform: translateY(-2px); box-shadow:
    0 10px 28px oklch(20% 0.08 282 / 0.5),
    0 0 0 1px oklch(63% 0.115 52 / 0.5),
    0 0 26px oklch(63% 0.115 52 / 0.35); }
.moon-top:hover .moon-top-disc, .moon-top:focus-visible .moon-top-disc { opacity: 0.2; }
.moon-top:hover .moon-top-chev, .moon-top:focus-visible .moon-top-chev { opacity: 1; }
.moon-top:active { transform: translateY(0) scale(0.96); }
.moon-top:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (max-width: 600px) {
  .moon-top { width: 46px; height: 46px; }
  .moon-top-svg { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .moon-top { transition: opacity 1ms linear, visibility 1ms linear; transform: none; }
  .moon-top.is-shown { transform: none; }
  .moon-top:hover, .moon-top:focus-visible { transform: none; }
  .moon-top-ring { transition: none; }
}
.contact-status.is-error { color: oklch(55% 0.16 25); }
@media (max-width: 760px) { .begin-grid { grid-template-columns: 1fr; } }

/* -------------------- Honeypot -------------------- */
/* A field no human ever sees or tabs into; anything in it on the server is a
   bot. Moved off-screen rather than display:none, because some crawlers skip
   fields that are explicitly hidden and would step around the trap. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}