/* ============================================================================
   Naturaliste Yoga — draft site
   Token layer → tone layer → primitives → components.
   Nothing below the token layer hardcodes a colour.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1.25rem);
}

/* Author display rules (.field, .btn, .pay…) would otherwise beat the UA's
   [hidden] rule, so state-hiding is enforced here once. */
[hidden] { display: none !important; }

body {
  margin: 0;
  /* `clip`, not `hidden` — `hidden` makes body a scroll container and breaks
     position:sticky on the nav. */
  overflow-x: clip;
  background: var(--bg-base);
  color: var(--lt-ink);
  font-family: var(--font-body);
  font-size: var(--fs-0);
  font-weight: var(--body-weight);
  line-height: 1.62;
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

:where(a, button, select, input, textarea, summary, details):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  padding: .75rem 1.25rem;
  background: var(--lt-cta-bg); color: var(--lt-cta-ink);
  text-decoration: none; font-size: var(--fs--1);
}
.skip-link:focus { transform: translateY(0); }

/* ------------------------------------------------------- 2. GLOBAL TOKENS */

:root {
  /* rhythm */
  --nav-h: 62px;
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --sect-y: clamp(4.5rem, 11vw, 9.5rem);
  --radius: 4px;
  --radius-lg: 6px;
  --draft-space: calc(112px + env(safe-area-inset-right, 0px));

  /* type scale — fluid, 375 → 1440 */
  --fs--2: clamp(.688rem, .66rem + .12vw, .75rem);
  --fs--1: clamp(.813rem, .79rem + .12vw, .875rem);
  --fs-0:  clamp(1rem, .97rem + .14vw, 1.075rem);
  --fs-1:  clamp(1.125rem, 1.07rem + .24vw, 1.28rem);
  --fs-2:  clamp(1.32rem, 1.2rem + .5vw, 1.6rem);
  --fs-3:  clamp(1.6rem, 1.36rem + 1.02vw, 2.25rem);
  --fs-4:  clamp(2rem, 1.55rem + 1.9vw, 3.1rem);
  --fs-5:  clamp(2.6rem, 1.5rem + 4.7vw, 5.4rem);
  --fs-6:  clamp(2.5rem, 1.1rem + 6.6vw, 7rem);

  --measure: 62ch;
  --ease: cubic-bezier(.22, .68, .36, 1);
  --dur: .55s;

  /* Deliberately palette-independent: these sit over photographic gradients
     and the modal backdrop, where following the palette would cost legibility.
     Box-shadows likewise stay neutral black alpha — elevation, not colour. */
  --scrim: rgba(12, 24, 24, .42);
  --scrim-ink: #F3EDE2;
  --backdrop: rgba(10, 22, 22, .58);

  /* film grain — inline, no network request */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root { --nav-h: 76px; --draft-space: calc(146px + env(safe-area-inset-right, 0px)); }
}

/* --------------------------------------------------------- 3. FONT TOKENS */

:root[data-font="fraunces"] {
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 600;
  --display-tracking: -.022em;
  --display-lh: 1.03;
  --display-scale: 1;
  --display-variation: "opsz" 96;
  --body-weight: 400;
  --body-tracking: -.002em;
  --eyebrow-weight: 600;
}

:root[data-font="italiana"] {
  --font-display: "Italiana", "Didot", Georgia, serif;
  --font-body: "Jost", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: .012em;
  --display-lh: 1.08;
  --display-scale: 1.07;
  --display-variation: normal;
  --body-weight: 400;
  --body-tracking: .004em;
  --eyebrow-weight: 500;
}

:root[data-font="cormorant"] {
  --font-display: "Cormorant Garamond", Garamond, Georgia, serif;
  --font-body: "Work Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -.006em;
  --display-lh: 1.0;
  --display-scale: 1.14;
  --display-variation: normal;
  --body-weight: 400;
  --body-tracking: -.001em;
  --eyebrow-weight: 600;
}

/* ------------------------------------------------------ 4. PALETTE TOKENS */
/* Each palette declares a light scheme (--lt-*), a dark scheme (--dk-*)
   and three section backgrounds. Tones (§5) map one onto the other. */

:root[data-palette="sea-mist"] {
  --bg-base: #F6F2EA;
  --bg-alt:  #E7DECF;
  --bg-deep: #2E4B4A;

  --lt-ink: #22302E;
  --lt-muted: #55645F;
  --lt-line: rgba(34, 48, 46, .16);
  --lt-hair: rgba(34, 48, 46, .09);
  --lt-surface: #FFFDF8;
  --lt-cta-bg: #2E4B4A;
  --lt-cta-ink: #F6F2EA;
  --lt-accent: #8F4E31;
  --lt-deco: #9FBAAB;
  --lt-ph-a: #E9DCC7; --lt-ph-b: #C6D6CC; --lt-ph-c: #9FBAAB; --lt-ph-d: #5F8079;

  --dk-ink: #F1EBDF;
  --dk-muted: #B9CBC2;
  --dk-line: rgba(241, 235, 223, .22);
  --dk-hair: rgba(241, 235, 223, .12);
  --dk-surface: #365655;
  --dk-cta-bg: #E7DECF;
  --dk-cta-ink: #22302E;
  --dk-accent: #F3C09B;
  --dk-deco: #9FBAAB;
  --dk-ph-a: #4B6E68; --dk-ph-b: #37585A; --dk-ph-c: #7E9C92; --dk-ph-d: #22403F;

  --focus: #C0764F;
}

:root[data-palette="coastal-dawn"] {
  --bg-base: #FAF6EF;
  --bg-alt:  #F1E1D8;
  --bg-deep: #1F3D3B;

  --lt-ink: #2B2724;
  --lt-muted: #6B605A;
  --lt-line: rgba(43, 39, 36, .16);
  --lt-hair: rgba(43, 39, 36, .08);
  --lt-surface: #FFFCF6;
  --lt-cta-bg: #1F3D3B;
  --lt-cta-ink: #FAF6EF;
  --lt-accent: #94492F;
  --lt-deco: #8FA893;
  --lt-ph-a: #F0D6C6; --lt-ph-b: #D9A08B; --lt-ph-c: #B7C4B2; --lt-ph-d: #7C8F84;

  --dk-ink: #F5EDE4;
  --dk-muted: #A9C0AC;
  --dk-line: rgba(245, 237, 228, .22);
  --dk-hair: rgba(245, 237, 228, .12);
  --dk-surface: #274A47;
  --dk-cta-bg: #F1E1D8;
  --dk-cta-ink: #2B2724;
  --dk-accent: #E3A88E;
  --dk-deco: #8FA893;
  --dk-ph-a: #3E5F58; --dk-ph-b: #8A5B4B; --dk-ph-c: #6E8A76; --dk-ph-d: #1B3634;

  --focus: #D9A08B;
}

:root[data-palette="ocean-deep"] {
  --bg-base: #14282A;   /* dark — this palette inverts (see §5) */
  --bg-alt:  #F4EFE4;
  --bg-deep: #0D1D1F;

  --lt-ink: #14282A;
  --lt-muted: #4E5F5D;
  --lt-line: rgba(20, 40, 42, .18);
  --lt-hair: rgba(20, 40, 42, .09);
  --lt-surface: #FFFCF4;
  --lt-cta-bg: #14282A;
  --lt-cta-ink: #EDE4D3;
  --lt-accent: #1F5F52;
  --lt-deco: #6E9A8D;
  --lt-ph-a: #E4DAC5; --lt-ph-b: #AFCBBF; --lt-ph-c: #6E9A8D; --lt-ph-d: #3C6660;

  --dk-ink: #EDE4D3;
  --dk-muted: #9FB4AE;
  --dk-line: rgba(237, 228, 211, .2);
  --dk-hair: rgba(237, 228, 211, .1);
  --dk-surface: #1B3437;
  --dk-cta-bg: #EDE4D3;
  --dk-cta-ink: #14282A;
  --dk-accent: #8FC3B4;
  --dk-deco: #8FC3B4;
  --dk-ph-a: #2C4E4E; --dk-ph-b: #1B3A3C; --dk-ph-c: #6E9A8D; --dk-ph-d: #102528;

  --focus: #8FC3B4;
}

/* ------------------------------------------------------------- 5. TONES */
/* Section backgrounds… */
[data-tone="base"] { background-color: var(--bg-base); }
[data-tone="alt"]  { background-color: var(--bg-alt); }
[data-tone="deep"] { background-color: var(--bg-deep); }

/* …then the scheme that reads on them. Light by default. */
[data-tone="base"], [data-tone="alt"] {
  --ink: var(--lt-ink);
  --muted: var(--lt-muted);
  --line: var(--lt-line);
  --hair: var(--lt-hair);
  --surface: var(--lt-surface);
  --cta-bg: var(--lt-cta-bg);
  --cta-ink: var(--lt-cta-ink);
  --accent: var(--lt-accent);
  --deco: var(--lt-deco);
  --ph-a: var(--lt-ph-a); --ph-b: var(--lt-ph-b); --ph-c: var(--lt-ph-c); --ph-d: var(--lt-ph-d);
}

/* The deep band is always dark — as is Ocean Deep's base. */
[data-tone="deep"],
:root[data-palette="ocean-deep"] [data-tone="base"] {
  --ink: var(--dk-ink);
  --muted: var(--dk-muted);
  --line: var(--dk-line);
  --hair: var(--dk-hair);
  --surface: var(--dk-surface);
  --cta-bg: var(--dk-cta-bg);
  --cta-ink: var(--dk-cta-ink);
  --accent: var(--dk-accent);
  --deco: var(--dk-deco);
  --ph-a: var(--dk-ph-a); --ph-b: var(--dk-ph-b); --ph-c: var(--dk-ph-c); --ph-d: var(--dk-ph-d);
}

[data-tone] { color: var(--ink); }

/* ------------------------------------------------------- 6. TYPE PRIMITIVES */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--wrap-narrow); }

.section { position: relative; padding-block: var(--sect-y); }
.section--intro { padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7rem); }

.section__head { margin-bottom: clamp(2.25rem, 5vw, 3.75rem); }
.section__head--split { display: grid; gap: 1.25rem; }
.section__head--center { text-align: center; max-width: 46rem; margin-inline: auto; }

.section__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-4) * var(--display-scale));
  line-height: calc(var(--display-lh) + .06);
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
  margin-top: .5rem;
}

.section__note {
  color: var(--muted);
  font-size: var(--fs--1);
  max-width: 34ch;
  line-height: 1.6;
}
.section__note--center { max-width: 48ch; margin-inline: auto; font-size: var(--fs-0); margin-top: 1rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: var(--fs--2);
  font-weight: var(--eyebrow-weight);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
}
.section__head--center .eyebrow { justify-content: center; }

.idx {
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding-right: .7rem;
  border-right: 1px solid var(--line);
}

.lede {
  font-size: var(--fs-1);
  line-height: 1.55;
  color: var(--muted);
  max-width: 46ch;
}

.caption {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: var(--fs--1);
}
.caption__icon { width: 15px; height: 15px; flex: none; }

.note-flag {
  display: inline-block;
  font-size: var(--fs--2);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: .2rem .6rem;
  white-space: nowrap;
}
/* The block-level variant sits under a paragraph and can carry a long sentence
   ("Draft list — Fayth confirms the starting lineup"), which at 320px is wider
   than the gutter allows — so this one wraps. The inline pill keeps nowrap. */
.note-flag--inline { margin-top: .75rem; white-space: normal; }

/* ---------------------------------------------------------- 7. BUTTONS */

.btn {
  --btn-py: .95rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: var(--btn-py) 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease);
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--cta-bg); color: var(--cta-ink); border-color: var(--cta-bg); }
.btn--ghost   { color: var(--ink); border-color: var(--line); }
.btn--quiet   { color: var(--ink); border-color: var(--line); background: var(--surface); }

@media (hover: hover) {
  .btn--primary:hover:not(:disabled) { transform: translateY(-1px); opacity: .88; }
  .btn--ghost:hover:not(:disabled)   { border-color: var(--ink); }
  .btn--quiet:hover:not(:disabled)   { border-color: var(--ink); }
}
.btn:active:not(:disabled) { transform: translateY(0); }

.btn--sm { min-height: 44px; padding: .7rem 1.2rem; }
.btn--block { width: 100%; }

.linkbtn {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  color: var(--accent);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
}
.linkbtn:hover { text-decoration-color: currentColor; }

/* ------------------------------------------------- 8. PHOTO PLACEHOLDERS */

.ph {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--ph-d);
  background-image:
    radial-gradient(115% 88% at 18% 8%, var(--ph-a), transparent 62%),
    radial-gradient(95% 72% at 88% 22%, var(--ph-b), transparent 58%),
    linear-gradient(174deg, var(--ph-c) 4%, var(--ph-d) 96%);
  isolation: isolate;
}
.ph--alt {
  background-image:
    radial-gradient(110% 80% at 82% 12%, var(--ph-a), transparent 58%),
    radial-gradient(120% 90% at 8% 70%, var(--ph-c), transparent 62%),
    linear-gradient(196deg, var(--ph-b) 0%, var(--ph-d) 94%);
}
/* The two extra tones exist so a row of placeholders reads as four different
   photographs rather than one gradient repeated — .ph--cool is the dark frame
   in the row, .ph--warm the bright one. */
.ph--cool {
  background-color: var(--ph-d);
  background-image:
    radial-gradient(100% 68% at 80% 6%, var(--ph-c), transparent 56%),
    radial-gradient(125% 88% at 8% 96%, var(--ph-b), transparent 50%),
    linear-gradient(178deg, var(--ph-d) 26%, var(--ph-c) 128%);
}
.ph--warm {
  background-color: var(--ph-b);
  background-image:
    radial-gradient(125% 92% at 86% 90%, var(--ph-a), transparent 66%),
    radial-gradient(84% 60% at 14% 6%, var(--ph-a), transparent 52%),
    linear-gradient(202deg, var(--ph-b) 0%, var(--ph-c) 92%);
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--grain);
  background-size: 160px 160px;
  opacity: .3;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.ph__cap {
  position: absolute;
  left: .9rem;
  bottom: .8rem;
  z-index: 1;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: var(--scrim);
  backdrop-filter: blur(6px);
  color: var(--scrim-ink);
  font-size: var(--fs--2);
  letter-spacing: .02em;
  line-height: 1.35;
}
.ph--wide { aspect-ratio: 16 / 10; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--strip { aspect-ratio: 4 / 5; border-radius: 0; }

/* -------------------------------------------------------- 8b. GALLERY (v3) */
/* One full-bleed row, no lightbox — a band of feeling between the story and
   the partners strip. */

.section--gallery { padding-bottom: 0; }
.section--gallery .section__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 100%;
}
@media (min-width: 760px) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
  .ph--strip { aspect-ratio: 1 / 1; }
}

/* -------------------------------------------------------- 9. WAVE MOTIF */

.wave {
  display: block;
  width: 100%;
  height: clamp(38px, 5vw, 64px);
  margin-top: clamp(3rem, 7vw, 5rem);
  color: var(--deco);
  overflow: visible;
}

/* --------------------------------------------- 9b. COASTLINE MOTIF (v3) */
/* Cape Naturaliste and Geographe Bay as one fine line. Purely decorative:
   colour comes from --deco, so it follows every palette, and it is hidden
   entirely below the widths where there is room for it to stay quiet. */

.coast { color: var(--deco); pointer-events: none; overflow: visible; }
.coast__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.coast__swell { fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; opacity: .5; }
.coast__pins circle { fill: currentColor; }

.coast--hero { display: none; }
@media (min-width: 1000px) {
  .coast--hero {
    display: block;
    position: absolute;
    z-index: 0;
    right: 1%;
    top: 52%;
    transform: translateY(-48%);
    width: min(33vw, 420px);
    height: auto;
    opacity: .26;
  }
  .coast--hero .coast__pins circle { r: 3.4px; }
}
@media (min-width: 1360px) { .coast--hero { right: 3%; width: min(31vw, 460px); } }

/* The dark palette swallows a hairline — give it a little more presence. */
:root[data-palette="ocean-deep"] .coast--hero { opacity: .34; }

.coast--echo { display: none; }
@media (min-width: 1100px) {
  .wrap--anchor { position: relative; }
  .coast--echo {
    display: block;
    position: absolute;
    top: -.5rem;
    right: var(--gutter);
    width: 186px;
    height: auto;
    opacity: .3;
  }
  .coast--echo .coast__line { stroke-width: 3.4; }
  .coast--echo .coast__swell { stroke-width: 2.2; }
  .coast--echo .coast__pins circle { r: 6px; }
}
:root[data-palette="ocean-deep"] .coast--echo { opacity: .42; }

/* ------------------------------------------------------------ 10. NAV */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: color-mix(in srgb, var(--bg-base) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  transition: box-shadow .35s var(--ease), background-color .35s var(--ease);
}
.nav.is-stuck { box-shadow: 0 1px 0 var(--hair), 0 12px 34px -28px rgba(0, 0, 0, .5); }

.nav__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--nav-h);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-right: max(var(--gutter), var(--draft-space));
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}
.wordmark__mark { width: 30px; height: 18px; flex: none; color: var(--deco); }
.wordmark__text {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-1) * var(--display-scale));
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark__text em { font-style: italic; font-weight: 400; }
@media (max-width: 400px) {
  .wordmark { min-width: 0; }
  .wordmark__text { font-size: calc(var(--fs-0) * var(--display-scale)); }
}
:root[data-font="italiana"] .wordmark__text em { font-style: normal; opacity: .72; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.2vw, 2.1rem);
}
.nav__links a {
  font-size: var(--fs--1);
  letter-spacing: .03em;
  text-decoration: none;
  color: var(--ink);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), opacity .3s var(--ease);
}
.nav__links a:hover { border-bottom-color: var(--accent); }
.nav__cta { margin-left: .5rem; }

/* On waiver.html the CTA is an <a> rather than a <button>, and `.nav__links a`
   outranks `.btn--primary` on specificity — restate the button's own values so
   it does not lose its colour and padding to the plain nav-link rules. */
.nav__links a.btn--primary {
  padding: .7rem 1.2rem;
  border: 1px solid var(--cta-bg);
  color: var(--cta-ink);
}
.nav__links a.btn--primary:hover { border-color: var(--cta-bg); }

.nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
}
.nav__toggle-bars { display: grid; gap: 5px; width: 18px; }
.nav__toggle-bars i {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child { transform: translateY(-3.25px) rotate(-45deg); }

@media (max-width: 899px) {
  .nav__toggle { display: inline-flex; }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: .5rem var(--gutter) 1.5rem;
    background: var(--bg-base);
    border-top: 1px solid var(--hair);
    box-shadow: 0 24px 40px -30px rgba(0, 0, 0, .6);
    /* collapsed */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav__links.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .nav__links a {
    padding-block: 1rem;
    border-bottom: 1px solid var(--hair);
    font-size: var(--fs-1);
  }
  .nav__links a:last-of-type { border-bottom: 0; }
  .nav__cta { margin: 1rem 0 0; width: 100%; }
}

/* --------------------------------------------------------- 11. DRAFT BADGE */

.draft-badge {
  position: fixed;
  top: max(.6rem, env(safe-area-inset-top));
  right: max(.75rem, env(safe-area-inset-right));
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .7rem;
  border: 1px solid var(--lt-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-alt) 82%, transparent);
  backdrop-filter: blur(8px);
  color: var(--lt-ink);
  font-size: var(--fs--2);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  pointer-events: none;
}
:root[data-palette="ocean-deep"] .draft-badge {
  border-color: var(--dk-line);
  background: color-mix(in srgb, var(--bg-deep) 84%, transparent);
  color: var(--dk-ink);
}
.draft-badge__dot {
  width: 6px; height: 6px; flex: none;
  border-radius: 50%;
  background: var(--focus);
}
.draft-badge__long { display: none; }
@media (min-width: 900px) {
  .draft-badge { top: 1.1rem; right: 1.1rem; }
  .draft-badge__long { display: inline; }
  .draft-badge__short { display: none; }
}

/* --------------------------------------------------------------- 12. HERO */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  margin-top: calc(var(--nav-h) * -1);
  padding-top: var(--nav-h);
  overflow: hidden;
}
.hero__ambient {
  position: absolute;
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(46% 40% at 22% 28%, color-mix(in srgb, var(--deco) 42%, transparent), transparent 68%),
    radial-gradient(44% 36% at 78% 66%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(60% 50% at 55% 96%, color-mix(in srgb, var(--deco) 26%, transparent), transparent 72%);
  filter: blur(24px);
  opacity: .82;
  animation: drift 48s var(--ease) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}

.hero__inner { position: relative; z-index: 1; padding-block: clamp(4rem, 12vh, 8rem); }

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-6) * var(--display-scale));
  line-height: var(--display-lh);
  letter-spacing: var(--display-tracking);
  margin: clamp(1rem, 2.5vw, 1.75rem) 0 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
/* The forced break is a desktop composition choice — below this the line
   cannot fit and must wrap naturally. */
@media (max-width: 720px) { .hero__title br { display: none; } }
.hero__sub { margin-top: clamp(1.25rem, 2.5vw, 1.9rem); max-width: 34ch; }

/* 12b. LIVING HEADLINE (v3)
   app.js splits the H1 into words → letters. Words stay whole so wrapping is
   unaffected; the inner span carries the idle swell (CSS), the outer span
   carries the cursor lift (JS transform). Keeping them on separate elements is
   what lets the two motions coexist without either overwriting the other. */

.hero__word { display: inline-block; white-space: nowrap; }
.hero__ltr { display: inline-block; }
.hero__ltr-in { display: inline-block; }

.hero__title.is-split .hero__ltr-in {
  animation: hero-swell 7s cubic-bezier(.45, 0, .55, 1) infinite;
  /* negative delay: every letter starts further through the same cycle, so the
     swell travels across the line instead of the whole line bobbing */
  animation-delay: calc(var(--i, 0) * -.115s);
  animation-play-state: paused;
}
.hero__title.is-split.is-onscreen .hero__ltr-in { animation-play-state: running; }

@keyframes hero-swell {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(0, -3.5px, 0); }
  50%  { transform: translate3d(0, 0, 0); }
  75%  { transform: translate3d(0, 3.5px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero__actions .btn { padding-inline: 1.9rem; }

.hero__meta {
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: var(--fs--1);
  letter-spacing: .02em;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  z-index: 1;
  width: 1px;
  height: 44px;
  overflow: hidden;
  background: var(--line);
}
.hero__scroll span {
  display: block;
  width: 1px;
  height: 44px;
  background: var(--ink);
  animation: trickle 3.2s var(--ease) infinite;
}
@keyframes trickle {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
@media (max-width: 899px) { .hero__scroll { display: none; } }

/* -------------------------------------------------------------- 13. INTRO */

.intro { max-width: var(--measure); }
.intro__copy {
  font-size: var(--fs-2);
  line-height: 1.5;
  letter-spacing: -.008em;
}
.intro__copy + .intro__copy { margin-top: 1.1rem; color: var(--muted); }

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1.4rem;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: var(--fs--2);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.trust span { display: inline-flex; align-items: center; gap: .8rem; }
.trust span:not(:last-child)::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--deco);
}

/* ------------------------------------------------------------ 14. CLASSES */

.cards {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 2.5rem);
}
@media (min-width: 820px) { .cards { grid-template-columns: 1fr 1fr; } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.card .ph { border-radius: 0; }
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 1rem;
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
}
.card__title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-3) * var(--display-scale));
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
}
.card__body p { color: var(--muted); max-width: 44ch; }

.meta-list {
  display: grid;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
  font-size: var(--fs--1);
}
.meta-list li {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding-top: .55rem;
  border-top: 1px solid var(--hair);
}
.meta-list li::before {
  content: "";
  width: 4px; height: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--deco);
  transform: translateY(-3px);
}
.card__body .btn { margin-top: 1rem; align-self: flex-start; }

/* ------------------------------------------------------- 15. SCHEDULE (v3) */
/* Below 900px the week is a stacked list, one block per day, with this week's
   computed date beside the day name. From 900px up the same markup becomes a
   seven-column week grid — days as columns, separated by hairlines. */

.week { border-top: 1px solid var(--line); }

.day {
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--hair);
  transition: background-color .3s var(--ease);
}

.day__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1rem .7rem;
}
.day__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-2) * var(--display-scale));
  line-height: 1.15;
  letter-spacing: var(--display-tracking);
}
/* Filled by app.js; stays out of the layout entirely when JS is off. */
.day__date {
  color: var(--muted);
  font-size: var(--fs--1);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.day__date:empty { display: none; }

.day__none {
  margin-top: .5rem;
  color: var(--muted);
  font-size: var(--fs--2);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.day--empty { opacity: .58; }

.sess {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "time  time"
    "loc   loc"
    "spots book";
  gap: .3rem 1rem;
  align-items: center;
  margin-top: .5rem;
}
.sess__time {
  grid-area: time;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-2) * var(--display-scale));
  line-height: 1.1;
  letter-spacing: var(--display-tracking);
  font-variant-numeric: tabular-nums;
}
.sess__loc { grid-area: loc; color: var(--muted); font-size: var(--fs--1); }
.sess__spots {
  grid-area: spots;
  color: var(--muted);
  font-size: var(--fs--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  align-self: center;
}
.sess__spots--low { color: var(--accent); }
.sess .btn { grid-area: book; margin-top: .55rem; }

/* Margaret River — one slim full-width note under the grid rather than an
   eighth column that would never fill. */
.week__soon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem .9rem;
  margin-top: 1.25rem;
  padding: .95rem 1.1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: var(--fs--1);
}
.week__soon-tag {
  flex: none;
  padding: .28rem .7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: var(--fs--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--line);
  }
  .day {
    display: flex;
    flex-direction: column;
    padding: 1.15rem .9rem 1.35rem;
    border-bottom: 0;
    border-left: 1px solid var(--hair);
  }
  .day:first-child { border-left: 0; }
  .day:hover { background: color-mix(in srgb, var(--surface) 55%, transparent); }
  .day--empty:hover { background: none; }

  .day__head {
    display: grid;
    gap: .15rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--hair);
  }
  .day__name { font-size: calc(var(--fs-1) * var(--display-scale)); }
  .day__date { font-size: var(--fs--2); }

  .sess {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
    flex: 1;
    margin-top: .95rem;
  }
  .sess__time { font-size: calc(var(--fs-3) * var(--display-scale)); }
  .sess__loc { line-height: 1.45; }
  .sess__spots { margin-top: .15rem; }
  .sess .btn {
    width: 100%;
    margin-top: auto;
    padding-top: .95rem;
    padding-bottom: .95rem;
    padding-inline: .5rem;
  }
  .day__none { margin-top: .95rem; }
}

/* Between 900 and 1100 the columns get tight — trim the padding rather than
   let a location name break mid-word. */
@media (min-width: 900px) and (max-width: 1099px) {
  .day { padding-inline: .6rem; }
  .sess .btn { font-size: var(--fs--2); padding-inline: .35rem; }
}

/* ------------------------------------------------------- 15a. CLASS STYLES */

.styles {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--hair);
}
.styles__lead { color: var(--muted); font-size: var(--fs--1); letter-spacing: .02em; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem .55rem; margin-top: .9rem; }
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 42%, transparent);
  color: var(--ink);
  font-size: var(--fs--1);
  letter-spacing: .02em;
  line-height: 1.2;
}

/* --------------------------------------------------- 15b. LOCATIONS (v2) */
/* Added in the v2 annotation pass. Map motifs are inline SVG styled entirely
   from tokens below — nothing in the markup carries a colour. */

.locs { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 700px) { .locs { grid-template-columns: 1fr 1fr; } }

.loc {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
/* Schedule rows link straight to a card — mark the one that was asked for. */
.loc:target { border-color: var(--accent); }

.loc__map {
  position: relative;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-bottom: 1px solid var(--hair);
}
.loc__map svg { width: 100%; height: auto; }
.loc__land  { fill: var(--deco); opacity: .13; }
.loc__coast { fill: none; stroke: var(--deco); stroke-width: 1.9; stroke-linecap: round; }
.loc__swell { fill: none; stroke: var(--deco); stroke-width: 1.1; stroke-linecap: round; }
.loc__jetty { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.loc__ring  { fill: none; stroke: var(--accent); stroke-width: 1.2; opacity: .42; }
.loc__dot   { fill: var(--accent); }

.loc__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  flex: 1;
  padding: clamp(1.35rem, 2.8vw, 1.9rem);
}
.loc__town {
  color: var(--muted);
  font-size: var(--fs--2);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.loc__name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-2) * var(--display-scale));
  line-height: 1.12;
  letter-spacing: var(--display-tracking);
}
.loc__where { color: var(--muted); font-size: var(--fs--1); max-width: 38ch; }
/* long enough to need wrapping in a narrow card */
.loc__body .note-flag { white-space: normal; margin-top: .35rem; }

.loc__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
  margin-top: auto;
  padding-top: 1.15rem;
}
/* narrow enough that both fit side by side in a stacked card at 375px; the
   nowrap makes the pair stack cleanly rather than break a label in half if a
   font pairing runs wide */
.loc__nav .btn { flex: 1 1 7.25rem; gap: .4rem; padding-inline: .75rem; white-space: nowrap; }
.loc__nav .btn svg { width: 15px; height: 15px; flex: none; color: var(--muted); }

.locs__foot { margin-top: clamp(1.75rem, 4vw, 2.5rem); color: var(--muted); font-size: var(--fs--1); }

/* Schedule location links through to the matching card. */
.sess__loc a {
  color: inherit;
  text-underline-offset: .22em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
}
.sess__loc a:hover { text-decoration-color: var(--accent); color: var(--ink); }

/* ------------------------------------------------------------ 16. PRICING */

.tiles {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.5rem);
}
@media (min-width: 780px) { .tiles { grid-template-columns: repeat(3, 1fr); align-items: stretch; } }

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.6rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
}
.tile--feature {
  border-color: var(--accent);
  box-shadow: 0 24px 50px -40px rgba(0, 0, 0, .8);
}
.tile__flag {
  position: absolute;
  top: -.72rem;
  left: clamp(1.6rem, 3vw, 2.2rem);
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--cta-bg);
  color: var(--cta-ink);
  font-size: var(--fs--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tile__name {
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.tile__price {
  display: flex;
  align-items: flex-start;
  gap: .1rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-5) * var(--display-scale));
  line-height: .95;
  letter-spacing: var(--display-tracking);
}
.tile__cur { font-size: .42em; transform: translateY(.35em); }
.tile__sub { color: var(--muted); font-size: var(--fs--1); margin-bottom: 1.4rem; }
.tile .btn { margin-top: auto; }

.pricing__foot {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--muted);
  font-size: var(--fs--1);
  text-align: center;
}

/* -------------------------------------------------------------- 17. ABOUT */

.about { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 860px) {
  .about { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}
.about__body { display: grid; gap: 1rem; }
.about__body p { color: var(--muted); max-width: 48ch; }
.about__body .section__title { margin-bottom: .35rem; }

.creds {
  display: grid;
  gap: .55rem;
  margin-top: 1rem;
  font-size: var(--fs--1);
}
.creds li {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  padding-top: .55rem;
  border-top: 1px solid var(--hair);
}
.creds li::before {
  content: "";
  width: 4px; height: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--deco);
  transform: translateY(-3px);
}

/* ----------------------------------------------------------- 18. PARTNERS */

.partners {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.75rem, 2vw, 1.25rem);
}
@media (min-width: 780px) { .partners { grid-template-columns: repeat(4, 1fr); } }

.partner {
  display: grid;
  gap: .3rem;
  place-content: center;
  min-height: 118px;
  padding: 1.25rem 1rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
}
.partner__slot { color: var(--muted); font-size: var(--fs--2); letter-spacing: .14em; text-transform: uppercase; }
.partner__town {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-1) * var(--display-scale));
  letter-spacing: var(--display-tracking);
}

.partners__cta { margin-top: 2rem; text-align: center; color: var(--muted); font-size: var(--fs--1); }
.partners__cta a {
  display: inline-block;
  padding: .7rem .3rem;
  color: var(--accent);
  text-underline-offset: .22em;
}

/* ---------------------------------------------------------------- 19. FAQ */

.faq { border-top: 1px solid var(--line); }

.qa { border-bottom: 1px solid var(--hair); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 56px;
  padding-block: 1.15rem;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-1);
  line-height: 1.4;
  transition: color .3s var(--ease);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }

.qa__sign {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
}
.qa__sign::before, .qa__sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  transition: transform .32s var(--ease), opacity .32s var(--ease);
}
.qa__sign::after { transform: rotate(90deg); }
.qa[open] .qa__sign::after { transform: rotate(0deg); opacity: 0; }

.qa__body { padding-bottom: 1.4rem; max-width: 60ch; color: var(--muted); }
.qa__body a { color: var(--accent); text-underline-offset: .22em; text-decoration-color: var(--line); }
.qa__body a:hover { text-decoration-color: currentColor; }
.qa__body p + p { margin-top: .8rem; }
.qa[open] .qa__body { animation: fade-up .42s var(--ease) both; }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------- 20. FOOTER */

.footer { padding-block: clamp(3.5rem, 8vw, 6rem); }
/* clears the fixed book bar */
@media (max-width: 899px) { .footer { padding-bottom: 7.5rem; } }

.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--hair);
}
@media (min-width: 820px) { .footer__grid { grid-template-columns: 1.3fr 1fr 1.2fr; } }

.wordmark--footer { display: inline-flex; align-items: center; gap: .6rem; }
.footer__tagline { margin-top: .9rem; color: var(--muted); font-size: var(--fs--1); max-width: 32ch; }

.footer__h {
  font-size: var(--fs--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer__list { display: grid; font-size: var(--fs--1); }
/* ≥44px tap targets without a visual box */
.footer__list a, .footer__list .linkbtn {
  display: inline-block;
  padding-block: .7rem;
  text-align: left;
  text-underline-offset: .22em;
  text-decoration-color: var(--line);
}
.footer__list a:hover { text-decoration-color: currentColor; }

/* Instagram glyph — inline SVG, stroke follows currentColor (v3). */
.ig-link { display: inline-flex; align-items: center; gap: .55rem; }
.ig-glyph { width: 20px; height: 20px; flex: none; }
.ig-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-block: -.6rem;
  color: var(--muted);
  transition: color .3s var(--ease);
}
.ig-icon:hover { color: var(--ink); }

.signup__label {
  display: block;
  font-size: var(--fs--1);
  color: var(--muted);
  margin-bottom: .5rem;
}
.signup__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.signup__input {
  flex: 1 1 12rem;
  min-height: 48px;
  padding: .7rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 22%, transparent);
  color: var(--ink);
  font-size: var(--fs--1);
}
.signup__input::placeholder { color: var(--muted); opacity: .8; }
.signup__note { margin-top: .7rem; color: var(--muted); font-size: var(--fs--2); }

.footer__base { padding-top: clamp(2rem, 4vw, 2.75rem); display: grid; gap: 1.25rem; }
.ack { color: var(--muted); font-size: var(--fs--2); line-height: 1.7; max-width: 70ch; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  color: var(--muted);
  font-size: var(--fs--2);
  letter-spacing: .04em;
}
.footer__draft {
  color: var(--accent);
  font-size: var(--fs--2);
  letter-spacing: .06em;
}

/* ------------------------------------------------------- 21. MOBILE BOOKBAR */

.bookbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  border-top: 1px solid var(--hair);
  background: color-mix(in srgb, var(--bg-deep) 92%, transparent);
  backdrop-filter: blur(14px);
  transform: translateY(105%);
  transition: transform .42s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
}
.bookbar.is-up { transform: translateY(0); }
.bookbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem var(--gutter);
}
.bookbar__text { display: grid; margin-right: auto; line-height: 1.25; }
.bookbar__text strong { font-size: var(--fs-0); font-weight: 600; }
.bookbar__text span { color: var(--muted); font-size: var(--fs--2); }
@media (min-width: 900px) { .bookbar { display: none; } }

/* ---------------------------------------------------------- 22. MODAL */

.modal {
  width: min(560px, calc(100vw - 2rem));
  max-width: none;
  max-height: min(88svh, 780px);
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
}
.modal::backdrop {
  /* ::backdrop only inherits custom properties in newer engines — keep the
     literal as the fallback so the scrim never silently disappears. */
  background: var(--backdrop, rgba(10, 22, 22, .58));
  backdrop-filter: blur(3px);
}
.modal[open] { animation: modal-in .34s var(--ease) both; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal__form { display: flex; flex-direction: column; max-height: inherit; }

.modal__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.4rem clamp(1.25rem, 4vw, 1.9rem) .9rem;
}
.modal__eyebrow {
  font-size: var(--fs--2);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.modal__title {
  margin-top: .35rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-2) * var(--display-scale));
  line-height: 1.15;
  letter-spacing: var(--display-tracking);
}
.modal__close {
  flex: none;
  width: 44px; height: 44px;
  margin: -.4rem -.5rem 0 auto;
  display: grid;
  place-content: center;
  border: 0;
  border-radius: var(--radius);
  background: none;
  cursor: pointer;
  color: var(--muted);
}
.modal__close svg { width: 20px; height: 20px; }
.modal__close:hover { color: var(--ink); }

.steps {
  display: flex;
  gap: 1.25rem;
  padding: 0 clamp(1.25rem, 4vw, 1.9rem) 1rem;
  font-size: var(--fs--2);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.steps__i { display: flex; align-items: center; gap: .5rem; }
.steps__i span:first-child {
  width: 18px; height: 2px;
  background: var(--line);
  transition: background-color .3s var(--ease);
}
.steps__i.is-on { color: var(--ink); }
.steps__i.is-on span:first-child { background: var(--accent); }

.modal__scroll {
  flex: 1;
  min-height: 0; /* without this a column flex item won't shrink to scroll */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: .4rem clamp(1.25rem, 4vw, 1.9rem) 1.25rem;
}

.summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .2rem 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--hair);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.summary__line { font-weight: 600; }
.summary__loc { grid-column: 1; color: var(--muted); font-size: var(--fs--1); }
.summary__price {
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-3) * var(--display-scale));
  line-height: 1;
  letter-spacing: var(--display-tracking);
}

/* 22b. Location + navigate line inside the modal (v2). Sits under the session
   select in step 1 and under the summary in step 2. */
.locline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .55rem;
  margin: -.4rem 0 1rem;
  font-size: var(--fs--1);
}
.locline--final { margin: -.6rem 0 1.25rem; }
.locline__pin {
  grid-row: 1 / span 2;
  width: 15px; height: 15px;
  flex: none;
  margin-top: .3rem;
  color: var(--accent);
}
.locline__name { color: var(--ink); line-height: 1.45; }
.locline__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.locline__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--accent);
  font-size: var(--fs--2);
  letter-spacing: .04em;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
}
.locline__links a:hover { text-decoration-color: currentColor; }

.field { display: grid; gap: .4rem; margin-bottom: 1rem; }
.field label { font-size: var(--fs--1); color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs-0);
  transition: border-color .25s var(--ease);
}
.field textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.field select {
  appearance: none;
  padding-right: 2.4rem;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--focus); }

.field-row { display: grid; gap: 0 1rem; }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }

.err { color: var(--accent); font-size: var(--fs--2); }

.waiver { margin-top: .25rem; }
.check {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  cursor: pointer;
  font-size: var(--fs--1);
  line-height: 1.55;
  color: var(--muted);
  padding-block: .35rem;
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 20px; height: 20px;
  margin-top: .18rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
  position: relative;
}
.check__box::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid var(--cta-ink);
  border-width: 0 1.7px 1.7px 0;
  transform: rotate(42deg) scale(.4);
  opacity: 0;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.check input:checked + .check__box { background: var(--cta-bg); border-color: var(--cta-bg); }
.check input:checked + .check__box::after { opacity: 1; transform: rotate(42deg) scale(1); }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 3px; }
.check__text a { color: var(--accent); text-underline-offset: .2em; }

.pay { display: grid; gap: 1rem; }
.pay__lead { color: var(--muted); font-size: var(--fs--1); }
.marks { display: flex; flex-wrap: wrap; gap: .5rem; }
.mark {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs--1);
  letter-spacing: .02em;
}
.mark svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.pay__secure {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  color: var(--muted);
  font-size: var(--fs--2);
  line-height: 1.55;
}
.pay__secure svg { width: 15px; height: 15px; flex: none; margin-top: .15rem; }

.enq-recap { display: grid; gap: .55rem; font-size: var(--fs--1); }
.enq-recap li {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
  padding-top: .55rem;
  border-top: 1px solid var(--hair);
}
.enq-recap span { color: var(--muted); }
.enq-recap b { font-weight: 500; overflow-wrap: anywhere; }

.draft-state {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-top: 1.25rem;
  padding: .9rem 1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: var(--fs--1);
  line-height: 1.5;
}
.draft-state svg { width: 18px; height: 18px; flex: none; margin-top: .1rem; color: var(--accent); }

.modal__foot {
  display: flex;
  gap: .6rem;
  padding: 1rem clamp(1.25rem, 4vw, 1.9rem) 1.25rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
  background: var(--surface);
}
.modal__foot .btn--sm { flex: none; }
.modal__foot .btn--block { flex: 1; width: auto; }

@media (max-width: 560px) {
  .modal {
    width: 100%;
    max-width: 100%;
    max-height: 94svh;
    margin: auto auto 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
  }
}

/* ------------------------------------------------- 23. DESIGN OPTIONS TOOL */

.opts {
  position: fixed;
  left: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 110;
  display: grid;
  gap: .5rem;
  justify-items: start;
  transition: transform .42s var(--ease);
}
body.bookbar-up .opts { transform: translateY(calc(var(--bookbar-h, 72px) * -1)); }
@media (min-width: 900px) { body.bookbar-up .opts { transform: none; } }

.opts__pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: .6rem 1rem;
  border: 1px solid var(--lt-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--lt-surface) 92%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .7);
  color: var(--lt-ink);
  font-size: var(--fs--1);
  font-weight: 600;
  letter-spacing: .03em;
  cursor: pointer;
  order: 2;
}
.opts__pill svg { width: 16px; height: 16px; color: var(--lt-muted); }

.opts__panel {
  order: 1;
  width: min(300px, calc(100vw - 2rem));
  padding: 1.1rem;
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 26px 50px -34px rgba(0, 0, 0, .8);
  animation: fade-up .3s var(--ease) both;
}
.opts__field { display: grid; gap: .4rem; margin-bottom: .9rem; }
.opts__field label {
  font-size: var(--fs--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.opts__field select {
  width: 100%;
  min-height: 44px;
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--fs--1);
  cursor: pointer;
}
.opts__note {
  padding-top: .75rem;
  border-top: 1px solid var(--hair);
  color: var(--muted);
  font-size: var(--fs--2);
  line-height: 1.5;
}

/* ------------------------------------------------------------ 24. REVEAL */
/* Only applied when JS is present, so no-JS never hides content. */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* --------------------------------------------------- 25. REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__ambient { animation: none; }
  .hero__scroll { display: none; }

  /* The living headline is off entirely: no idle swell, and !important beats
     the inline transform app.js would otherwise write for the cursor lift.
     (app.js also declines to start its loop — this is the belt to that brace.) */
  .hero__ltr, .hero__ltr-in {
    animation: none !important;
    transform: none !important;
  }
}

/* ------------------------------------------- 26. LEGAL / WAIVER PAGE (v2) */
/* Used only by waiver.html. Same tokens, same tones — a document layout
   rather than a landing layout. */

/* No mobile book bar on the document page, so the footer needs no clearance. */
@media (max-width: 899px) { body.no-bar .footer { padding-bottom: clamp(3.5rem, 8vw, 6rem); } }

.page { display: block; padding-bottom: clamp(4rem, 9vw, 7rem); }

.page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.page-head .eyebrow { margin-top: 1.35rem; }
.page-head .section__title { max-width: 20ch; }
.page-head .lede { margin-top: 1.25rem; max-width: 54ch; }
.page-head .note-flag { white-space: normal; margin-top: 1.75rem; }

.page-back {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  color: var(--muted);
  font-size: var(--fs--1);
  text-decoration: none;
}
.page-back svg { width: 14px; height: 14px; flex: none; }
.page-back:hover { color: var(--accent); }

.legal { display: grid; gap: clamp(2.25rem, 5vw, 3.25rem); padding-bottom: clamp(2rem, 4vw, 3rem); }

.legal__block { display: grid; gap: .9rem; padding-top: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 1px solid var(--hair); }
.legal__block:first-child { padding-top: 0; border-top: 0; }

.legal__h {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: var(--display-variation);
  font-size: calc(var(--fs-3) * var(--display-scale));
  line-height: 1.12;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
.legal__num {
  flex: none;
  font-family: var(--font-body);
  font-size: var(--fs--2);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
  color: var(--muted);
}
.legal p { color: var(--muted); max-width: 68ch; }
.legal a { color: var(--accent); text-underline-offset: .22em; text-decoration-color: var(--line); }
.legal a:hover { text-decoration-color: currentColor; }
.legal__block > .note-flag { justify-self: start; white-space: normal; }

.legal__list { display: grid; gap: .6rem; max-width: 68ch; color: var(--muted); }
.legal__list li {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  padding-top: .65rem;
  border-top: 1px solid var(--hair);
}
.legal__list b { color: var(--ink); font-weight: 600; }
.legal__list li::before {
  content: "";
  width: 4px; height: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--deco);
  transform: translateY(-3px);
}

.legal__version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs--2);
  letter-spacing: .06em;
}
.legal__version b { color: var(--ink); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }

/* -------------------------------------------------------------- 27. PRINT */

@media print {
  .nav, .bookbar, .opts, .draft-badge, .hero__scroll, .modal { display: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  body { background: #fff; color: #000; }
  .page-back, .loc__nav { display: none !important; }
}