/* ============================================================
   AINKA WILL — Caribbean Woman Chic
   Design tokens from the client-supplied brand cheat sheet.
   Type: CarlMarx Bold caps for display and UI labels (the logo's
   parent face, owner-directed), Fraunces for running text, Zen Kaku
   Gothic Antique self-hosted as the display fallback.
   ============================================================ */

/* Self-hosted so every device gets the brand fonts, no third-party
   fetch to fail on flaky mobile connections. */
@font-face {
  font-family: "Zen Kaku Gothic Antique";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/zenkaku-500.woff2") format("woff2");
}
@font-face {
  font-family: "Zen Kaku Gothic Antique";
  font-style: normal; font-weight: 900; font-display: swap;
  src: url("../assets/fonts/zenkaku-900.woff2") format("woff2");
}
@font-face {
  font-family: "Faustina";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/faustina-400-600.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("../assets/fonts/fraunces-400-600.woff2") format("woff2");
}

:root {
  --aw-orange:  #F05825;
  --aw-magenta: #A9288D;
  --aw-mint:    #D7EACA;
  --aw-ink:     #141414;
  --aw-paper:   #FFFFFF;

  /* Owner-directed pairing: CarlMarx Bold for display (the face her
     logo is customized from, via the Adobe Fonts kit; Zen Kaku
     self-hosted fallback) and Fraunces, a warm soft serif
     (self-hosted), for running text. */
  --font-display: carlmarx, "Zen Kaku Gothic Antique", sans-serif;
  --font-body: "Fraunces", Georgia, serif;

  /* type scale, ~1.3 ratio */
  --fs-display: clamp(2.75rem, 8vw, 6rem);
  --fs-h2:      clamp(1.75rem, 4.5vw, 3.5rem);
  --fs-lead:    clamp(1.125rem, 2vw, 1.375rem);
  --fs-body:    1.0625rem;
  --fs-label:   0.8125rem;

  /* spacing scale (8px system) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  --gutter: clamp(20px, 5vw, 72px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* no overflow clipping on the root: WebKit breaks position:sticky
   (the pinned scroll story) under root overflow-x clip */
html { scroll-behavior: auto; }
/* fixed header must never cover an anchored section heading */
section[id] { scroll-margin-top: 88px; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.65;
  background: var(--aw-ink);
  color: var(--aw-paper);
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, .caps {
  font-family: var(--font-display);
  text-wrap: balance;
}
.caps {
  /* carlmarx tops out at 700; condensed rounded caps want less air */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.02;
}
.label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
p.lead, .contact-block { text-wrap: pretty; }

/* ---------- fixed chrome ---------- */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--gutter);
  mix-blend-mode: normal;
}
/* header lane (desktop): an invisible band ending a couple px below the
   logo and burger. It stays transparent to the section background but
   progressively dissolves any text or foreground imagery that scrolls
   beneath it, so nothing ever obscures the lockup or the menu. */
@media (min-width: 721px) {
  .site-head::before {
    content: "";
    position: absolute;
    inset: 0 0 -4px 0;
    z-index: -1;
    pointer-events: none;
    backdrop-filter: blur(16px) saturate(1.05);
    -webkit-backdrop-filter: blur(16px) saturate(1.05);
    mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  }
}
.wordmark { display: block; }
.wordmark img { height: 46px; width: auto; display: none; }
/* the lockup answers the section behind it (her cheat-sheet colourways):
   white over dark imagery, mint over the warm silk fields, magenta over
   the mint/light frames — matching each section's own accent pairing */
.wordmark .mark-light { display: block; }
body.logo-mint:not(.light-frame) .wordmark .mark-light { display: none; }
body.logo-mint:not(.light-frame) .wordmark .mark-mint { display: block; }
body.light-frame .wordmark .mark-light { display: none; }
body.light-frame .wordmark .mark-magenta { display: block; }

.burger {
  width: 48px; height: 48px;
  border: 0; background: transparent;
  display: grid; place-items: center;
  z-index: 60;
}
.burger span {
  display: block; width: 26px; height: 3px;
  background: currentColor; border-radius: 2px;
  transition: transform 300ms var(--ease-out), opacity 200ms;
}
.burger span + span { margin-top: 6px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------- full-screen overlay menu ---------- */
/* Two-phase menu: the panel expands fully first (550ms), then the
   links enter one by one (delays set in JS, starting after expansion) */
.menu {
  position: fixed; inset: 0; z-index: 50;
  /* Owner-directed (round 1): the flat orange field read as too flat.
     A warm highlight top-left falling to a deep burnt orange at the
     foot gives the panel dimension without leaving the brand colour,
     and the darker foot is what lets the contact block sit in white
     at 5.3:1 where the previous flat orange + mint measured 2.69:1. */
  background: var(--aw-orange);
  background:
    radial-gradient(135% 85% at 14% 0%, #FF8551 0%, rgba(255,133,81,0) 56%),
    radial-gradient(105% 70% at 96% 16%, #F97A3C 0%, rgba(249,122,60,0) 58%),
    linear-gradient(176deg, #F0601F 0%, #EC5522 38%, #D64718 72%, #B93A10 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* top padding reserves the lockup's corner; the ::before/::after
     spacers centre the links on tall screens and collapse on short
     (landscape) ones, where the panel scrolls instead of clipping */
  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter)
           calc(var(--s4) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 550ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 550ms;
  visibility: hidden;
}
.menu::before, .menu::after { content: ""; flex: 1 0 0; }
.menu.open { clip-path: inset(0 0 0% 0); visibility: visible; transition: clip-path 550ms cubic-bezier(0.22, 1, 0.36, 1); }
/* the four nav links only: the lockup and the contact block's own
   anchors are also <a> inside .menu and must not inherit display size */
.menu > a:not(.menu-mark) {
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(2.125rem, 7vw, 5rem);
  line-height: 1.14;
  letter-spacing: 0.04em; /* match .caps: no untracked all-caps */
  text-decoration: none; color: var(--aw-paper);
  width: fit-content;
  opacity: 0; transform: translateY(30px);
  transition: opacity 400ms var(--ease-out), transform 440ms var(--ease-out), color 180ms;
}
.menu.open > a:not(.menu-mark) { opacity: 1; transform: none; }
.menu > a:not(.menu-mark):hover { color: var(--aw-ink); }
/* Contact stack, owner-directed (round 1): email is the primary
   contact and carries the larger size, the phone drops to a smaller
   secondary line, socials centre beneath. White throughout against
   the gradient's deep foot (5.3:1) rather than the old mint (2.69:1). */
.menu .menu-foot {
  margin-top: var(--s6);
  font-family: var(--font-body);
  color: var(--aw-paper);
  letter-spacing: 0;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(16px);
  transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.menu .menu-contact {
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem);
  font-weight: 600; line-height: 1.35;
}
.menu .menu-contact a { text-underline-offset: 5px; text-decoration-thickness: 2px; }
.menu .menu-phone {
  margin-top: var(--s1);
  font-size: 1rem; font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
}
.menu.open .menu-foot { opacity: 1; transform: none; }
/* her lockup fills the panel's empty top-left, where the header
   wordmark sits when the menu is closed (magenta: the cheat sheet's
   primary orange pairing; hue contrast keeps it crisp at 46px) */
.menu .menu-mark {
  position: absolute;
  top: calc(var(--s3) + env(safe-area-inset-top, 0px));
  left: var(--gutter);
}
.menu .menu-mark img { height: 46px; width: auto; display: block; }
.menu-close {
  position: absolute;
  top: calc(var(--s3) + env(safe-area-inset-top, 0px));
  right: var(--gutter);
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16); color: var(--aw-paper);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 300ms var(--ease-out) 550ms, background-color 160ms;
}
.menu.open .menu-close { opacity: 1; }
.menu-close:hover { background: rgba(255, 255, 255, 0.3); }
.menu-close svg { width: 20px; height: 20px; }

/* decorative presenter figure (Ainka in the rust A-line, cut out, no
   background): rides in as the panel settles, palm presenting the links,
   dipping down them, then resting on her hip. The nav links shift left
   (--menu-shift) so her open palm never lands on them; the contact block
   stays centred and she never spans it (height caps at the link stack).
   Decorative only: aria-hidden, pointer-events none; JS swaps in the
   animated WebP on every open so the gesture replays with the link
   cascade, and reduced-motion keeps the still frame. */
.menu { --menu-shift: clamp(150px, 20vw, 300px); }
.menu > a:not(.menu-mark) { margin-right: var(--menu-shift); }
.menu-figure {
  position: absolute;
  z-index: 0;
  right: clamp(10px, 4vw, 64px);
  /* centred on the link stack, not the panel: the contact block below
     pulls the panel's own centre too low, and she must never span it */
  top: 43vh;
  height: min(44vh, 430px);
  width: auto;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%) translateX(26px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.menu.open .menu-figure {
  opacity: 1;
  transform: translateY(-50%);
  transition: opacity 420ms var(--ease-out) 430ms, transform 500ms var(--ease-out) 430ms;
}
@media (max-width: 720px) {
  .menu { --menu-shift: clamp(120px, 36vw, 170px); }
  .menu-figure { height: min(34vh, 300px); right: 8px; top: 37.5vh; }
}

@media (prefers-reduced-motion: reduce) {
  .menu, .menu.open, .menu > a, .menu .menu-foot, .menu-close { transition: none; transform: none; }
  .menu-figure, .menu.open .menu-figure { transition: none; transform: translateY(-50%); }
}

/* ---------- scroll story stage ---------- */
.story { position: relative; }
.story-stage {
  position: sticky; top: 0;
  height: 100svh; width: 100%;
  overflow: hidden;
  background: var(--aw-ink);
}
.story-stage canvas,
.story-stage .stage-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.stage-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0.12) 45%, rgba(20,20,20,0) 70%);
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.stage-scrim.off { opacity: 0; }

/* chapters over light frames read in ink, without the scrim */
.chapter.ink { color: var(--aw-ink); }
.chapter.ink .kicker { color: var(--aw-magenta); }

/* fixed chrome follows the frame's brightness */
.site-head { color: var(--aw-paper); transition: color 400ms var(--ease-out); }
body.light-frame .site-head { color: var(--aw-ink); }

/* copy chapters over the stage */
.chapter {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  opacity: 0; visibility: hidden;
  transform: translateY(24px);
  transition: opacity 420ms var(--ease-out), transform 480ms var(--ease-out), visibility 0s 420ms;
  pointer-events: none;
}
.chapter.active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 420ms var(--ease-out), transform 480ms var(--ease-out);
  pointer-events: auto;
}
.chapter .inner { max-width: 620px; }
.chapter.align-right { align-items: flex-end; }
.chapter.align-right .inner { text-align: right; }
.chapter h1 { font-size: var(--fs-display); }
.chapter h2 { font-size: var(--fs-h2); }
.chapter .kicker { color: var(--aw-mint); margin-bottom: var(--s2); display: block; }
.chapter p.lead { font-size: var(--fs-lead); margin-top: var(--s3); max-width: 46ch; }
.chapter .bang { color: var(--aw-orange); }

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1rem;
  text-decoration: none; text-align: center;
  border: 0; border-radius: 999px;
  padding: 16px 34px;
  margin-top: var(--s4);
  /* ink on orange: 5.4:1, AA for the 16px label (white was 3.4:1) */
  background: var(--aw-orange); color: var(--aw-ink);
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.btn:hover { background: var(--aw-magenta); color: var(--aw-paper); }
.btn:active { transform: scale(0.97); }
.btn.on-light { background: var(--aw-ink); color: var(--aw-paper); }
.btn.on-light:hover { background: var(--aw-magenta); }

/* scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 28px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-label); letter-spacing: 0.22em;
  text-transform: uppercase; opacity: 0.75;
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* visible way past the story into the main content */
.skip-story {
  position: absolute;
  right: var(--s3);
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 5;
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-label); letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none;
  color: var(--aw-paper);
  background: rgba(20, 20, 20, 0.5);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: 14px 22px;
}
body.light-frame .skip-story { background: rgba(20, 20, 20, 0.55); }

/* ---------- video hero (About): her reel on loop, full bleed ---------- */
.video-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--aw-ink);
  display: flex; align-items: flex-end;
}
.video-hero video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.video-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.2) 40%, rgba(20,20,20,0.78) 100%);
  pointer-events: none;
}
.video-copy {
  position: relative; z-index: 1;
  padding: 0 var(--gutter) var(--s7);
  max-width: 680px;
}
@media (max-width: 720px) {
  .video-copy { padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom, 0px)); }
}

/* About: two-column story text on the mint field */
.about-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s5); margin-top: var(--s4);
  max-width: 1080px;
}
.about-cols .lead { max-width: 52ch; }
@media (max-width: 960px) {
  .about-cols { grid-template-columns: 1fr; }
}

/* ---------- flowing full-bleed sections ---------- */
.bleed {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s8) var(--gutter);
}
.bleed.on-mint  { background: var(--aw-mint); color: var(--aw-ink); }
.bleed.on-orange{ background: var(--aw-orange); color: var(--aw-paper); }
.bleed.on-ink   { background: var(--aw-ink); color: var(--aw-paper); }
/* Brand magenta as a lit colour field (owner-directed): a highlight top-left
   falling to a deep magenta foot gives the panel dimension so a sparse
   section reads as an intentional colour block rather than dead space. */
.bleed.on-magenta {
  color: var(--aw-paper);
  background: var(--aw-magenta);
  background:
    radial-gradient(135% 85% at 14% 4%, #C749B0 0%, rgba(199, 73, 176, 0) 56%),
    radial-gradient(110% 72% at 94% 98%, #7C1A68 0%, rgba(124, 26, 104, 0) 60%),
    linear-gradient(168deg, #AE2B92 0%, #A9288D 44%, #8E1F77 100%);
}

/* full-bleed image sections: every flowing section carries a visual */
.bleed-img { color: var(--aw-paper); }
.bleed-img::before {
  content: ""; position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
/* paint-under: each image's dominant tone, so a section is never the
   body's near-black while iOS decodes the photo after an anchor jump */
.bleed-img.bg-silk     { background-color: #813C10; }
.bleed-img.bg-portrait { background-color: #9E9695; }
.bleed-img.bg-workbook { background-color: #BFAE8B; }
.bleed-img.bg-mic      { background-color: #3F222A; }
/* image per section, declared here so relative paths resolve off css/.
   Phones get 720w renditions via the media queries below — a background
   inside a non-matching media query is never fetched, so each viewport
   downloads only its own set. */
.bleed-img.bg-silk::before     { background-image: url("../assets/img/silk-still.webp"); }
.bleed-img.bg-portrait::before { background-image: url("../assets/img/portrait-laptop.webp"); }
.bleed-img.bg-workbook::before { background-image: url("../assets/img/workbook-still.webp"); }
.bleed-img.bg-mic::before      { background-image: url("../assets/img/mic-still.webp"); }
@media (max-width: 720px) {
  .bleed-img.bg-silk::before     { background-image: url("../assets/img/silk-still-720.webp"); }
  /* 9:16 recomposition: keeps the whole laptop in frame on tall screens.
     Pinned to the top so her face stays in the upper third, clear of the
     copy, which anchors to the bottom over the laptop and desk. */
  .bleed-img.bg-portrait::before { background-image: url("../assets/img/portrait-laptop-mobile.webp"); background-position: center top; }
  #services { justify-content: flex-end; padding-bottom: var(--s6); }
  #services .contact-block { margin-top: var(--s4); line-height: 1.75; }
  .bleed-img.bg-workbook::before { background-image: url("../assets/img/workbook-still-720.webp"); }
  .bleed-img.bg-mic::before      { background-image: url("../assets/img/mic-still-720.webp"); }
}
.bleed-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.25) 0%, rgba(20,20,20,0.72) 100%);
}
.bleed-img > * { position: relative; z-index: 1; }
.bleed-img.light { color: var(--aw-ink); }
.bleed-img.light::after {
  /* firmer scrim so the 13px magenta kickers hold contrast over busy photos */
  background: linear-gradient(180deg, rgba(215,234,202,0.66) 0%, rgba(255,255,255,0.74) 100%);
}

/* social icon rows: one horizontal strip, inherits section colour */
.social-row { display: flex; align-items: center; gap: var(--s3); }
.social-row a {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: -10px;  /* 44px target, tight visual row */
  padding: 10px;
  color: inherit;
  transition: color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.social-row a:hover { color: var(--aw-orange); transform: translateY(-2px); }
.social-row svg { width: 22px; height: 22px; }
.menu .menu-social {
  margin-top: var(--s4);
  justify-content: center;
  color: var(--aw-paper);
}
.menu .menu-social a:hover { color: var(--aw-ink); }
.contact-block .social-row { margin-top: var(--s3); }
.site-foot .foot-social { color: var(--aw-mint); }
.site-foot .foot-social a:hover { color: var(--aw-orange); }

/* press logos: full-colour marks cycling on a full-bleed paper band */
.press-marquee {
  margin-top: var(--s5);
  margin-inline: calc(var(--gutter) * -1);
  background: var(--aw-paper);
  overflow: hidden;
  padding: var(--s4) 0;
  box-shadow: 0 16px 48px rgba(20, 20, 20, 0.35);
}
.press-track {
  display: flex; width: max-content;
  /* Lazy-loading broke this band: the browser schedules image loads from
     layout position, not the animated transform position, so marks far
     down the tape decoded late and popped in blank mid-scroll. The imgs
     are now eager, the track is promoted to its own compositor layer, and
     the duration is scaled to the tape's length (16 marks, not the
     original 6) so it drifts at the old reading speed instead of racing. */
  animation: press-cycle 44s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
@media (max-width: 720px) {
  .press-track { animation-duration: 32s; }
  .press-marquee { padding: var(--s2) 0; }
  .press-set img { height: calc(32px * var(--logo-k, 1)); }
}
.press-set {
  display: flex; align-items: center;
  gap: clamp(40px, 6vw, 96px);
  padding-right: clamp(40px, 6vw, 96px);
}
/* Optical balance: equal pixel height makes a long wordmark shout and a
   compact symbol disappear, so each mark carries a factor against the
   base height rather than all sitting at the same number. */
.press-set img {
  height: calc(clamp(36px, 5vw, 54px) * var(--logo-k, 1));
  width: auto;
  /* opt out of the global img max-width:100%: inside a max-content flex
     track that rule has no stable base and can squash a mark mid-load */
  max-width: none;
}
.press-set img[src$="bptt.svg"]               { --logo-k: 1.22; }
.press-set img[src$="mastercard.png"]         { --logo-k: 1.06; }
.press-set img[src$="undp.png"]               { --logo-k: 0.92; }
.press-set img[src$="caribbean-airlines.png"] { --logo-k: 0.96; }
.press-set img[src$="centralbank.png"]        { --logo-k: 0.80; }
.press-set img[src$="lawassoc.png"]           { --logo-k: 0.74; }
.press-set img[src$="ttse.png"]               { --logo-k: 0.88; }
/* ANSA is only published at 176x50; held under native height so it
   stays sharp rather than upscaled soft */
.press-set img[src$="ansa.png"]               { --logo-k: 0.78; }
/* a circular seal reads smaller than a wordmark at equal height */
.press-set img[src$="opm.png"]                { --logo-k: 1.18; }
.press-set img[src$="rhand.png"]              { --logo-k: 0.92; }
.press-set img[src$="liberty.png"]            { --logo-k: 0.92; }

/* "As seen on": the image sits on the right of the section (not full bleed),
   with the logo marquee overlaid across it as a band. */
.as-grid {
  display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; width: 100%;
}
@media (min-width: 821px) {
  .as-grid { grid-template-columns: 1fr clamp(300px, 34vw, 420px); }
}
.as-media {
  position: relative; margin: 0; justify-self: center;
  width: 100%; max-width: 420px;
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 64px rgba(20, 20, 20, 0.42);
}
.as-media > img { display: block; width: 100%; height: auto; }
/* marquee as a full-width band overlaid edge to edge across the section,
   crossing the image low over the podium */
#as-seen-on .press-marquee {
  position: absolute; left: 0; right: 0; bottom: clamp(150px, 19vh, 215px);
  margin: 0; z-index: 2;
}
/* raise the heading to roughly her eye level in the photo (desktop, two-col) */
.as-copy { align-self: start; }
@media (min-width: 821px) {
  .as-copy { margin-top: clamp(40px, 12vh, 115px); }
}
@keyframes press-cycle {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .press-track { animation: none; flex-wrap: wrap; width: auto; }
  .press-set[aria-hidden] { display: none; }
}

/* reel section: a generous framed 16:9 window over the silk field */
.reel-frame {
  position: relative;
  width: min(1080px, 100%);
  aspect-ratio: 16 / 9;
  margin-top: var(--s5);
  border-radius: 12px;
  overflow: hidden;
  background: var(--aw-ink);
  box-shadow: 0 24px 64px rgba(20, 20, 20, 0.45);
}
.reel-frame iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.reel-frame .btn-sound {
  position: absolute; left: var(--s3); bottom: var(--s3);
  margin-top: 0; z-index: 2;
}
/* shown only when autoplay is refused (e.g. iOS Low Power Mode) */
.reel-play {
  position: absolute; inset: 0; margin: auto;
  width: 76px; height: 76px; z-index: 2;
  border: 0; border-radius: 50%;
  background: rgba(20, 20, 20, 0.62); color: var(--aw-paper);
  display: grid; place-items: center;
  backdrop-filter: blur(8px);
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.reel-play:hover { background: var(--aw-orange); color: var(--aw-ink); }
.reel-play:active { transform: scale(0.94); }
.reel-play svg { width: 30px; height: 30px; margin-left: 4px; }
.reel-play[hidden] { display: none; }
@media (max-width: 720px) {
  /* icon-only: the pill is too big next to a phone-width player */
  .reel-frame .btn-sound {
    left: var(--s2); bottom: var(--s2);
    width: 48px; height: 48px; padding: 0;
    border-radius: 50%; justify-content: center;
  }
  .reel-frame .btn-sound span:last-child { display: none; }
}
.btn-sound {
  background: rgba(255,255,255,0.16); color: var(--aw-paper);
  backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; gap: 10px;
  width: fit-content;
}
.btn-sound:hover { background: rgba(255,255,255,0.28); }
.btn-sound svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- section entrance reveals (below the story) ----------
   Vocabulary from the approved reference: fade-up as the default,
   directional fades for content blocks, a soft grow for imagery.
   Hidden states apply only once JS adds body.rv-live, so the page
   renders complete without JS and under reduced motion. */
body.rv-live .rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 650ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--rv-delay, 0ms);
}
body.rv-live .rv-left  { transform: translateX(-36px); }
body.rv-live .rv-right { transform: translateX(36px); }
body.rv-live .rv-grow  { transform: scale(0.94) translateY(16px); }
/* The side gutter is ~20px on phones, so a 36px hidden-state offset pokes
   past the viewport edge and makes the page pannable sideways by a few px
   (seen on book.html). Keep the directional feel, stay inside the gutter. */
@media (max-width: 720px) {
  body.rv-live .rv-left  { transform: translateX(-16px); }
  body.rv-live .rv-right { transform: translateX(16px); }
}
body.rv-live .rv.in {
  opacity: 1;
  transform: none;
}

/* contact / footer */
.contact-block { margin-top: var(--s5); font-size: var(--fs-lead); line-height: 2; }
.contact-block a { text-decoration-color: var(--aw-magenta); text-underline-offset: 4px; }

/* booking form beside the contact block */
.book-cols {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
  gap: var(--s6); align-items: start; margin-top: var(--s4);
}
.book-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.book-form label {
  display: flex; flex-direction: column; gap: var(--s1);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.18em;
}
.book-form .span2 { grid-column: 1 / -1; }
.book-form input, .book-form textarea {
  font-family: var(--font-body); font-size: var(--fs-body);
  color: var(--aw-paper);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px; padding: 12px 14px;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.book-form input::placeholder, .book-form textarea::placeholder { color: rgba(255,255,255,0.55); }
.book-form input:focus-visible, .book-form textarea:focus-visible {
  outline: none; border-color: var(--aw-orange);
  background: rgba(255, 255, 255, 0.14);
}
.book-form textarea { resize: vertical; }
/* native date/time pickers: dark scheme so the calendar/clock glyphs render
   light on the ink ground instead of near-invisible black-on-black */
.book-form input[type="date"], .book-form input[type="time"] { color-scheme: dark; }
/* honeypot: removed from sight and the tab order, still in the DOM for bots */
.book-form .hp-field {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.book-form .btn { grid-column: 1 / -1; width: fit-content; margin-top: var(--s2); }
.book-form .form-note { grid-column: 1 / -1; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.88); max-width: 46ch; }
@media (max-width: 960px) {
  .book-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .book-form { grid-template-columns: 1fr; }
}

.site-foot {
  padding: var(--s5) var(--gutter);
  background: var(--aw-ink); color: var(--aw-mint);
  font-size: 0.875rem; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: space-between; align-items: center;
}
.site-foot .foot-mark { height: 40px; width: auto; opacity: 0.9; }
.site-foot .foot-contact { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.site-foot .foot-contact a {
  color: var(--aw-paper); text-decoration-color: var(--aw-magenta);
  text-underline-offset: 4px;
}

/* ---------- gallery teaser: one full-bleed frame into the set ---------- */
.gallery-teaser {
  position: relative; display: block;
  text-decoration: none; color: var(--aw-paper);
  overflow: hidden; background: var(--aw-ink);
}
.gallery-teaser img {
  width: 100%; height: clamp(420px, 56vw, 760px);
  object-fit: cover; object-position: center 18%;
  transition: transform 700ms var(--ease-out);
}
.gallery-teaser:hover img { transform: scale(1.03); }
.gallery-teaser::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,20,20,0.15) 35%, rgba(20,20,20,0.82) 100%);
}
.gallery-teaser-copy {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: var(--s6); z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2);
}
.gallery-teaser .kicker { color: var(--aw-mint); }
.gallery-teaser-h { font-family: var(--font-display); font-size: var(--fs-h2); }
/* a span styled as the button: the whole frame is already the link, so a
   nested <a> would be invalid and a nested <button> would steal the click */
.btn.as-btn { display: inline-block; pointer-events: none; }
.gallery-teaser:hover .btn.as-btn { background: var(--aw-magenta); color: var(--aw-paper); }
.gallery-teaser:focus-visible { outline: 3px solid var(--aw-orange); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .gallery-teaser img, .gallery-teaser:hover img { transition: none; transform: none; }
}

/* cover scroll: inside .cover-stack the gallery frame pins at the top of the
   viewport while the next section is pulled up over it (sticky stack). The
   wrapper bounds the pin, so the frame is carried away with the stack's end
   and never lingers behind the sections and footer that follow. */
.cover-stack { position: relative; }
.cover-stack .gallery-teaser { position: sticky; top: 0; z-index: 0; }
.cover-stack .bleed { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .cover-stack .gallery-teaser { position: static; }
}

/* ---------- immersive serpentine gallery page (js/gallery.js) ----------
   Base state is a plain, scrollable column of images so the page works with
   JS off and under reduced motion. body.galv-live (added by the engine)
   switches it to the single full-screen panel viewer. */
.gallery-page { background: var(--aw-ink); color: var(--aw-paper); }
.galv { position: relative; }
.galv-stage { list-style: none; margin: 0; padding: 0; }
.galv-panel { position: relative; }
.galv-fig { margin: 0; position: relative; }
.galv-fig img { display: block; width: 100%; height: auto; }
.galv-fig video { display: block; width: 100%; height: auto; background: var(--aw-ink); }

/* video opener — sound toggle (shown only in the enhanced viewer) */
.galv-sound {
  position: absolute; z-index: 20;
  right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px);
  display: none; align-items: center; gap: 8px;
  padding: 9px 15px 9px 12px; border-radius: 999px;
  background: rgba(20, 20, 20, 0.5); color: var(--aw-paper);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.66rem; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: background 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
body.galv-live .galv-video .galv-sound { display: inline-flex; }
.galv-sound:hover { background: var(--aw-magenta); border-color: transparent; }
.galv-sound:focus-visible { outline: 3px solid var(--aw-orange); outline-offset: 3px; }
.galv-sound svg { width: 16px; height: 16px; }
.galv-sound .galv-ico-on { display: none; }
.galv-sound.is-on .galv-ico-off { display: none; }
.galv-sound.is-on .galv-ico-on { display: inline; }

/* placeholder tiles — preview only, deleted when the real photos arrive */
.galv-ph {
  display: grid; place-items: center; min-height: 62vh;
  background: linear-gradient(145deg, #2a1620, #16090f);
}
.galv-panel:nth-child(4n+1) .galv-ph-inner { --ph: var(--aw-orange); }
.galv-panel:nth-child(4n+2) .galv-ph-inner { --ph: var(--aw-magenta); }
.galv-panel:nth-child(4n+3) .galv-ph-inner { --ph: var(--aw-mint); }
.galv-panel:nth-child(4n)   .galv-ph-inner { --ph: #E8A13C; }
.galv-ph-inner { text-align: center; color: var(--ph, var(--aw-mint)); }
.galv-ph-num {
  display: block; font-family: var(--font-display); line-height: 1;
  font-size: clamp(3rem, 12vw, 7rem);
}
.galv-ph-label {
  display: block; margin-top: var(--s2);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.3em; font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.5);
}

/* Gallery label — top-left, her display face, underlined. Visible on the
   opener; animates up out of view once you move into the photos. */
.galv-title {
  position: fixed; z-index: 30; margin: 0;
  top: clamp(14px, 3vw, 26px); left: clamp(16px, 4vw, 32px);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1;
  color: var(--aw-paper);
  text-decoration: underline; text-underline-offset: 6px;
  text-decoration-thickness: 3px; letter-spacing: 0.02em;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
  pointer-events: none;
  transition: opacity 400ms var(--ease-out), transform 460ms var(--ease-out);
}
.galv-title.is-up { opacity: 0; transform: translateY(-150%); }

/* persistent exit — fixed top-right, visible in both modes */
.galv-close {
  position: fixed; z-index: 30;
  top: clamp(14px, 3vw, 28px); right: clamp(14px, 3vw, 28px);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(20, 20, 20, 0.5); color: var(--aw-paper);
  text-decoration: none; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  transition: background 250ms var(--ease-out), border-color 250ms var(--ease-out);
}
.galv-close:hover { background: var(--aw-magenta); border-color: transparent; }
.galv-close:focus-visible { outline: 3px solid var(--aw-orange); outline-offset: 3px; }
.galv-close svg { width: 16px; height: 16px; }

/* side rail — count indicator; only shown once enhanced */
.galv-rail {
  position: fixed; z-index: 30;
  top: 50%; right: clamp(12px, 3vw, 26px); transform: translateY(-50%);
  display: none; flex-direction: column; align-items: flex-end; gap: 12px;
  /* keep the indicator legible over bright photographs */
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
body.galv-live .galv-rail { display: flex; }
.galv-ticks { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.galv-tick {
  width: 28px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  transform: scaleX(0.5); transform-origin: right center;
  transition: transform 320ms var(--ease-out), background 320ms var(--ease-out);
}
.galv-tick.is-on { transform: scaleX(1); background: var(--aw-mint); }
.galv-count {
  margin: 0; font-family: var(--font-display);
  font-size: 0.78rem; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.78);
}
.galv-count b { color: var(--aw-mint); font-weight: inherit; }

/* swipe hint — only shown once enhanced, fades on first navigation */
.galv-hint {
  position: fixed; z-index: 30;
  left: 50%; bottom: clamp(18px, 5vh, 46px); transform: translateX(-50%);
  display: none; flex-direction: column; align-items: center; gap: 6px;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.66rem; color: rgba(255, 255, 255, 0.7);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  transition: opacity 500ms var(--ease-out);
}
body.galv-live .galv-hint { display: flex; }
.galv-hint.is-gone { opacity: 0; pointer-events: none; }
.galv-hint svg { width: 20px; height: 22px; animation: galv-bob 1.9s ease-in-out infinite; }
@keyframes galv-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

.galv-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ENHANCED MODE — single full-screen panel */
body.galv-live { overflow: hidden; }
body.galv-live .galv {
  position: fixed; inset: 0; overflow: hidden;
  touch-action: none; /* the engine owns the vertical gesture */
}
body.galv-live .galv-stage { position: absolute; inset: 0; }
body.galv-live .galv-panel {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  visibility: hidden; will-change: transform, opacity;
}
body.galv-live .galv-panel.is-active,
body.galv-live .galv-panel.is-moving { visibility: visible; }
body.galv-live .galv-fig { width: 100%; height: 100%; }
body.galv-live .galv-fig img { width: 100%; height: 100%; object-fit: cover; }
/* contain, not cover: the opener clip carries broadcast lower-thirds at the top
   and bottom of its 9:16 frame, so letterbox on the ink ground rather than crop them */
body.galv-live .galv-fig video { width: 100%; height: 100%; object-fit: contain; }
body.galv-live .galv-ph { width: 100%; height: 100%; min-height: 0; }

@media (prefers-reduced-motion: reduce) {
  .galv-hint svg { animation: none; }
  .galv-title { transition: none; }
}

/* ---------- paired buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.btn-row .btn { margin-top: 0; }
/* secondary action on a light ground: outlined, so the primary still leads */
.btn.ghost-light {
  background: transparent; color: var(--aw-ink);
  box-shadow: inset 0 0 0 2px var(--aw-ink);
}
.btn.ghost-light:hover { background: var(--aw-ink); color: var(--aw-paper); }

/* ---------- booking form: the three asks ----------
   Radios rather than a second form: her copy offers a call, a quote or a
   straight booking as alternatives, and splitting them would mean losing
   the event capture on two of the three paths. */
.ask-group { border: 0; padding: 0; margin-top: var(--s2); }
.ask-group legend {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: 0.18em; padding: 0; margin-bottom: var(--s3);
}
/* these are <label>s inside .book-form, so the field-label styling (display
   face, uppercase, tracked) applies and has to be undone: an option you read
   is running text, not a field name */
.ask-group .ask {
  /* .book-form label is a column flex container; these are rows */
  display: flex; flex-direction: row; align-items: center;
  text-align: left; gap: 12px;
  font-family: var(--font-body); font-weight: 400;
  text-transform: none; letter-spacing: normal;
  font-size: var(--fs-body); line-height: 1.5;
  padding: 10px 0; cursor: pointer;
}
.ask-group .ask > span { flex: 1 1 auto; }
.ask-group .ask + .ask { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ask-group input[type="radio"] {
  appearance: none; flex: 0 0 auto;
  width: 20px; height: 20px; margin-top: 2px;
  border: 2px solid rgba(255, 255, 255, 0.5); border-radius: 50%;
  background: transparent; cursor: pointer;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.ask-group input[type="radio"]:checked {
  border-color: var(--aw-orange);
  box-shadow: inset 0 0 0 4px var(--aw-orange);
}
.ask-group input[type="radio"]:focus-visible {
  outline: 2px solid var(--aw-orange); outline-offset: 3px;
}
.ask-group .ask:hover input[type="radio"] { border-color: var(--aw-orange); }

/* ---------- client list: the full roster under the logo band ----------
   The marquee carries the marks we hold at usable quality; this carries
   every name. Set in the display face at label size so it reads as an
   editorial credit line, not a leftover list. */
.client-list {
  list-style: none;
  margin-top: var(--s3);
  max-width: 80ch;
  display: flex; flex-wrap: wrap;
  font-family: var(--font-display);
  font-weight: 700; text-transform: uppercase;
  font-size: 0.9375rem; letter-spacing: 0.1em;
  line-height: 2;
}
.client-list li { white-space: nowrap; }
.client-list li + li::before { content: "\00b7"; margin: 0 0.85em; opacity: 0.6; }

/* ---------- services teaser (home) ---------- */
.service-teaser {
  list-style: none; margin-top: var(--s4);
  display: grid; gap: var(--s3); max-width: 58ch;
}
.service-teaser li { display: grid; gap: 2px; }
.service-teaser strong {
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 1.125rem;
}
.service-teaser span { font-size: var(--fs-body); }

/* ---------- services page: the five offers, numbered ---------- */
.service-list {
  list-style: none; counter-reset: svc;
  display: grid; gap: var(--s7); margin-top: var(--s2);
}
.service-list li { counter-increment: svc; max-width: 62ch; }
.service-list li::before {
  content: counter(svc, decimal-leading-zero);
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 0.8125rem; letter-spacing: 0.18em;
  color: var(--aw-magenta); margin-bottom: var(--s2);
}
.service-list h2 { font-size: clamp(1.5rem, 3.4vw, 2.25rem); }
.service-list p { margin-top: var(--s2); font-size: var(--fs-lead); }
.service-list p + p { margin-top: var(--s3); }
.service-list .btn { margin-top: var(--s4); }

/* ---------- accolades (about) ---------- */
.accolades {
  list-style: none; margin-top: var(--s3);
  display: grid; gap: var(--s2); max-width: 60ch;
}
.accolades li {
  position: relative; padding-left: var(--s4);
  font-size: var(--fs-lead); line-height: 1.5;
}
.accolades li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 14px; height: 2px; background: var(--aw-magenta);
}

/* ---------- highlights "menu" (About): accolade courses woven with photos,
   like a menu with a few dish shots. Courses alternate side to side. ---------- */
.hl-menu { display: grid; gap: clamp(32px, 5vw, 60px); margin-top: var(--s3); }
.hl-course { display: grid; gap: clamp(20px, 3.5vw, 44px); align-items: center; }
@media (min-width: 821px) {
  .hl-course { grid-template-columns: 1.05fr 1fr; }
  .hl-course--flip .hl-list { order: 2; }
  .hl-course--flip .hl-shot { order: 1; }
}
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.hl-list li {
  position: relative; padding-left: var(--s4);
  font-size: var(--fs-lead); line-height: 1.5; color: var(--aw-ink);
}
.hl-list li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 14px; height: 2px; background: var(--aw-magenta);
}
.hl-shot {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  box-shadow: 0 22px 50px rgba(20, 20, 20, 0.3);
}
.hl-shot img { display: block; width: 100%; height: auto; }
.hl-shot figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: clamp(28px, 5vw, 44px) clamp(16px, 3vw, 22px) clamp(14px, 2.4vw, 18px);
  background: linear-gradient(to top, rgba(20, 20, 20, 0.74), rgba(20, 20, 20, 0));
  color: var(--aw-paper);
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.78rem;
}

/* ---------- availability (book) ----------
   The written panel is what shows until a Cal.com link is configured on
   #cal-inline, so the page is never a broken or empty embed. */
.cal-panel {
  margin-top: var(--s5); max-width: 62ch;
  background: rgba(20, 20, 20, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: clamp(24px, 4vw, 44px);
}
.cal-panel[hidden] { display: none; }
.cal-lead { font-size: var(--fs-lead); font-weight: 600; }
.cal-steps { margin: var(--s4) 0 0; padding-left: 1.3em; display: grid; gap: var(--s3); }
.cal-steps li { font-size: var(--fs-body); line-height: 1.6; }
.cal-steps li::marker { color: var(--aw-orange); font-family: var(--font-display); font-weight: 700; }
.cal-note { margin-top: var(--s4); font-size: 0.9375rem; color: rgba(255, 255, 255, 0.86); }
.cal-embed {
  margin-top: var(--s5); width: min(980px, 100%); min-height: 620px;
  background: var(--aw-paper); border-radius: 14px; overflow: hidden;
}
.cal-embed[hidden] { display: none; }

/* ---------- reduced motion / fallback ---------- */
.static-story { display: none; }
.static-story .frame.bg-hero { background-image: url("../assets/img/hero-poster.webp"); }
@media (prefers-reduced-motion: reduce) {
  .story { display: none; }
  .static-story { display: block; }
  .static-story .frame {
    min-height: 100svh;
    background-size: cover; background-position: center;
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 var(--gutter);
  }
  .scroll-cue, .menu > a, .btn { animation: none; transition: none; }
}

/* ============================================================
   MOBILE — composed for the phone, same site, same codebase.
   Persistent branded nav, simplified hero, portrait animation
   (selected by the engine), independent scroll pacing.
   ============================================================ */
@media (max-width: 720px) {
  /* persistent nav: brand mint bar with the orange lockup (the approved
     logo-on-mint pairing from her cheat sheet), always readable, above
     everything in the page flow; safe-area aware; 44px+ targets */
  .site-head {
    background: var(--aw-mint);
    padding: calc(8px + env(safe-area-inset-top, 0px)) 20px 8px;
    box-shadow: 0 1px 0 rgba(20, 20, 20, 0.12);
  }
  .site-head, body.light-frame .site-head { color: var(--aw-ink); }
  /* the bar is mint at all times on mobile: only the orange lockup shows */
  .wordmark .mark-light,
  body.light-frame .wordmark .mark-light,
  body.light-frame .wordmark .mark-magenta,
  body.logo-mint:not(.light-frame) .wordmark .mark-mint { display: none; }
  .wordmark .mark-ink, body.light-frame .wordmark .mark-ink { display: block; }
  .wordmark img { height: 38px; }
  /* anchored headings clear the fixed bar */
  section[id] { scroll-margin-top: calc(62px + env(safe-area-inset-top, 0px)); }
  .menu { padding-top: calc(env(safe-area-inset-top, 0px)); }
  .menu-close { top: calc(var(--s2) + env(safe-area-inset-top, 0px)); right: 20px; }

  /* headings wrap to 2-3 lines at phone width: open the caps leading */
  .caps { line-height: 1.1; }

  .stage-scrim {
    background: linear-gradient(180deg, rgba(20,20,20,0.1) 30%, rgba(20,20,20,0.72) 100%);
  }
  .chapter { justify-content: flex-end; padding-bottom: var(--s7); }
  .chapter.align-right { align-items: flex-start; }
  .chapter.align-right .inner { text-align: left; }

  /* hero composition: one headline, one action, scroll cue — the
     imagery leads. Kickers and leads return at the closing reveal. */
  #ch-hero .kicker, #ch-hero .lead,
  #ch-stage .kicker, #ch-stage .lead,
  #ch-room .kicker, #ch-room .lead { display: none; }
  .chapter .btn { margin-top: var(--s3); }
  .chapter { padding-bottom: calc(var(--s7) + env(safe-area-inset-bottom, 0px)); }

  /* keep copy clear of the fixed bar */
  .chapter .inner { max-width: 100%; padding-top: 72px; }

  /* closing scene: the workbook and silk own the lower half, so the
     ink copy takes the mint negative space at the top instead */
  #ch-room, #ch-close { justify-content: flex-start; padding-top: var(--s5); }
}