/* =========================================================================
   TALISMAN — Karen, Nairobi
   Design system + components. Light theme, editorial luxury.
   Authored to convert cleanly into a classic WordPress theme.
   ========================================================================= */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Surfaces — warm paper ladder, lightest to deepest */
  --paper:      #FBF8F1;   /* page ground */
  --cream:      #F5F1E8;   /* alternating band */
  --sand:       #EDE7D9;   /* panels, cards */
  --linen:      #E2D9C6;   /* hairlines, dividers */
  --night:      #171310;   /* footer, image scrims */
  --night-2:    #241D18;

  /* Ink — all AA-verified on --paper */
  --ink:        #1B1614;   /* headings          16.1:1 */
  --ink-2:      #4A443C;   /* body               8.4:1 */
  --ink-3:      #6F6656;   /* eyebrows, meta     5.3:1 */

  /* Brand */
  --wine:       #6B222A;   /* primary action    10.6:1 on paper */
  --wine-2:     #8A2E37;   /* hover */
  --gold:       #C99A5B;   /* ORNAMENT ONLY on light — 2.4:1, never body text */
  --gold-2:     #E3B778;
  --gold-pale:  #EFD9B4;   /* text on --night    7.1:1 */

  /* Type */
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:  'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Brand script — swap this one line to change it everywhere */
  --script: 'Great Vibes', 'Snell Roundhand', 'Apple Chancery', cursive;

  /* Fluid type scale */
  --t-display: clamp(2.625rem, 6.6vw, 5.75rem);
  --t-h1:      clamp(2.5rem, 6.4vw, 5.25rem);
  --t-h2:      clamp(2.125rem, 4.6vw, 3.75rem);
  --t-h3:      clamp(1.5rem, 2.6vw, 2.125rem);
  --t-h4:      clamp(1.25rem, 1.8vw, 1.5rem);
  --t-body:    clamp(1rem, 1.05vw, 1.0625rem);
  --t-lead:    clamp(1.0625rem, 1.35vw, 1.1875rem);
  --t-small:   0.875rem;
  --t-eyebrow: 0.6875rem;

  /* 4/8pt spacing rhythm */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* Layout */
  --gutter:  clamp(20px, 5vw, 64px);
  --section: clamp(36px, 5.5vw, 75px);
  --maxw:    1320px;
  --measure: 62ch;

  /* Elevation */
  --e-1: 0 1px 2px rgba(27,22,20,.05);
  --e-2: 0 6px 24px -8px rgba(27,22,20,.14);
  --e-3: 0 18px 50px -12px rgba(27,22,20,.20);
  --e-nav: 0 10px 40px -10px rgba(27,22,20,.18);

  /* Motion */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --d-fast:    180ms;
  --d-base:    280ms;
  --d-slow:    520ms;

  /* Layers */
  --z-base: 0; --z-raised: 10; --z-sticky: 30; --z-nav: 100; --z-sheet: 200;

  --nav-h: 68px;
}

/* ---------- 2. RESET & BASE --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: .005em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.2; }
h4 { font-size: var(--t-h4); line-height: 1.3; }

p { text-wrap: pretty; }
p + p { margin-top: 1.15em; }

a { color: var(--wine); text-decoration: none; transition: color var(--d-fast) var(--ease); }
a:hover { color: var(--wine-2); }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

::selection { background: var(--gold-pale); color: var(--ink); }

/* Focus — visible, on-brand, never removed */
:focus-visible {
  outline: 2px solid var(--wine);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-dark :focus-visible, .site-footer :focus-visible, .hero :focus-visible,
.splithero :focus-visible { outline-color: var(--gold-2); }

.skip-link {
  position: absolute; top: -100px; left: var(--s-4);
  z-index: 1000;
  background: var(--wine); color: var(--paper);
  padding: var(--s-3) var(--s-5);
  font: 500 var(--t-small)/1 var(--sans); letter-spacing: .12em;
  transition: top var(--d-base) var(--ease);
}
.skip-link:focus { top: var(--s-4); color: var(--paper); }

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

/* ---------- 3. LAYOUT PRIMITIVES ---------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 940px; }
.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(24px, 3.5vw, 45px); }
.section--cream { background: var(--cream); }
.section--sand  { background: var(--sand); }

.grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.stack > * + * { margin-top: var(--s-5); }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

/* ---------- 4. TYPE COMPONENTS ------------------------------------------ */
.eyebrow {
  font: 500 var(--t-eyebrow)/1.6 var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--wine { color: var(--wine); }
.on-dark .eyebrow { color: var(--gold-pale); }

.display { font-family: var(--serif); font-size: var(--t-display); font-weight: 500; line-height: 1.04; }

em, .accent { font-style: italic; color: var(--wine); }
.on-dark em, .on-dark .accent { color: var(--gold-pale); }

.lead { font-size: var(--t-lead); line-height: 1.75; color: var(--ink-2); }
.on-dark .lead, .on-dark p { color: rgba(245,241,232,.86); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #F5F1E8; }

.subhead { display: block; font-size: .6em; font-style: italic; color: var(--wine); line-height: 1.25; }

/* Ornamental rule with the brand mark's spirit */
.rule { display: flex; align-items: center; gap: var(--s-4); color: var(--gold); }
.rule::before, .rule::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .5; }
.rule__mark { width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; flex: none; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  margin-bottom: clamp(32px, 5vw, 60px);
}
.section-head__meta { text-align: right; }

/* ---------- 5. BUTTONS --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 48px; padding: 15px 32px;
  font: 500 0.75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  text-indent: .22em;   /* cancel the trailing letter-space so the label sits centred */
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease), transform var(--d-base) var(--ease),
              box-shadow var(--d-base) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 90ms; }

.btn--primary { background: var(--wine); color: var(--cream); box-shadow: var(--e-2); }
.btn--primary:hover { background: var(--wine-2); color: var(--cream); box-shadow: var(--e-3); }

.btn--ghost { border-color: rgba(27,22,20,.28); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.on-dark .btn--ghost, .hero .btn--ghost,
.splithero .btn--ghost { border-color: rgba(245,241,232,.6); color: #F5F1E8; }
.on-dark .btn--ghost:hover, .hero .btn--ghost:hover,
.splithero .btn--ghost:hover { background: #F5F1E8; border-color: #F5F1E8; color: var(--night); }

.btn--pill { border-radius: 999px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .6em;
  font: 500 0.75rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--wine); padding-block: var(--s-3);
}
.link-arrow::after { content: "→"; transition: transform var(--d-base) var(--ease); }
.link-arrow:hover::after { transform: translateX(6px); }
.on-dark .link-arrow { color: var(--gold-2); }

/* ---------- 6. FLOATING NAVIGATION --------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-nav);
  padding: clamp(12px, 1.8vw, 20px) var(--gutter);
  pointer-events: none;
}
.nav__inner {
  pointer-events: auto;
  max-width: var(--maxw); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: 9px 9px 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(245,241,232,.26);
  background: rgba(23,19,16,.24);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: background var(--d-slow) var(--ease), border-color var(--d-slow) var(--ease),
              box-shadow var(--d-slow) var(--ease), max-width var(--d-slow) var(--ease);
}
/* Solid, light state — after scroll, or on any page without a dark hero */
.nav.is-solid .nav__inner,
.nav--light .nav__inner {
  background: rgba(251,248,241,.88);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-color: rgba(27,22,20,.09);
  box-shadow: var(--e-nav);
}

.nav__brand { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.nav__logo { height: 30px; width: auto; transition: filter var(--d-slow) var(--ease); filter: brightness(0) invert(1); }
.nav.is-solid .nav__logo, .nav--light .nav__logo { filter: none; }
.nav__wordmark {
  font: 500 1rem/1 var(--serif); letter-spacing: .34em; color: #F5F1E8;
  transition: color var(--d-slow) var(--ease);
}
.nav.is-solid .nav__wordmark, .nav--light .nav__wordmark { color: var(--ink); }

.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center;   /* 44px touch target, centred label */
  min-height: 44px;
  padding: 0 15px;
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245,241,232,.86);
  border-radius: 999px;
  transition: color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.nav__link:hover { color: #fff; background: rgba(245,241,232,.12); }
.nav.is-solid .nav__link, .nav--light .nav__link { color: var(--ink-2); }
.nav.is-solid .nav__link:hover, .nav--light .nav__link:hover { color: var(--ink); background: rgba(27,22,20,.06); }

/* Current page — a gold seed under the label, not colour alone */
.nav__link[aria-current="page"] { color: #fff; }
.nav.is-solid .nav__link[aria-current="page"], .nav--light .nav__link[aria-current="page"] { color: var(--wine); }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 5px;
  width: 4px; height: 4px; margin-left: -2px;
  background: var(--gold); transform: rotate(45deg);
}
.nav.is-solid .nav__link[aria-current="page"]::after,
.nav--light .nav__link[aria-current="page"]::after { background: var(--wine); }

.nav__cta {
  flex: none;
  /* Vertical padding + a taller min-height left the text sitting against the
     top of the pill with the slack all at the bottom. Centring it in the box
     instead means the label is optically centred at any pill height. */
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 26px;
  border-radius: 999px; background: var(--wine); color: var(--cream);
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  /* Letter-spacing adds a trailing gap after the last character, which pushes
     centred text visually left. Re-indent by the same amount to cancel it. */
  text-indent: .2em;
  transition: background var(--d-base) var(--ease), transform var(--d-base) var(--ease);
}
.nav__cta:hover { background: var(--wine-2); color: var(--cream); transform: translateY(-1px); }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 46px; height: 46px; flex: none;
  align-items: center; justify-content: center;
  border-radius: 999px;
}
.nav__toggle span {
  display: block; position: relative; width: 20px; height: 1.5px;
  background: #F5F1E8; transition: background var(--d-slow) var(--ease), transform var(--d-base) var(--ease);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: inherit;
  transition: transform var(--d-base) var(--ease), opacity var(--d-fast) var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav.is-solid .nav__toggle span, .nav--light .nav__toggle span { background: var(--ink); }

/* Mobile sheet */
.nav-sheet {
  position: fixed; inset: 0; z-index: 9400;   /* above the grain film */
  background: var(--paper);
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + 28px) var(--gutter) var(--s-8);
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility var(--d-base);
  overflow-y: auto;
}
.nav-sheet.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-sheet__close {
  position: absolute; top: 22px; right: var(--gutter);
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--ink); border-radius: 999px;
}
.nav-sheet__links { display: flex; flex-direction: column; gap: var(--s-2); margin-top: auto; margin-bottom: auto; }
.nav-sheet__link {
  font: 500 clamp(2rem, 9vw, 3rem)/1.15 var(--serif);
  color: var(--ink); padding-block: 6px;
  opacity: 0; transform: translateY(18px);
}
.nav-sheet.is-open .nav-sheet__link { animation: sheetIn .5s var(--ease-out) forwards; }
.nav-sheet__link[aria-current="page"] { color: var(--wine); font-style: italic; }
.nav-sheet__foot { border-top: 1px solid var(--linen); padding-top: var(--s-5); }
@keyframes sheetIn { to { opacity: 1; transform: translateY(0); } }

body.is-locked { overflow: hidden; }

@media (max-width: 1080px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
}

/* ---------- 7. HERO ------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 620px; height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  overflow: hidden;
  background: var(--night);
  isolation: isolate;
}
.hero--short { height: clamp(480px, 68svh, 640px); min-height: 460px; }

.hero__media {
  position: absolute; inset: -6% 0; width: 100%; height: 112%;
  object-fit: cover; object-position: center 55%;
  z-index: -2;
  animation: kenburns 11s var(--ease-out) both;
  will-change: transform;
}
/* Two layers: a vertical ramp that protects the nav and the base, plus a soft
   vignette pinned under the text block so body copy stays legible over a busy
   photograph without flattening the whole image. */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 74% 52% at 50% 80%, rgba(18,13,10,.52), transparent 72%),
    linear-gradient(180deg,
      rgba(18,13,10,.62) 0%,
      rgba(18,13,10,.18) 28%,
      rgba(18,13,10,.52) 64%,
      rgba(18,13,10,.86) 100%);
}
.hero__body {
  text-align: center; color: #F5F1E8;
  /* Top padding is a hard floor so the kicker can never tuck under the floating nav */
  padding: calc(var(--nav-h) + 48px) var(--gutter) clamp(64px, 10vh, 112px);
  max-width: 1040px;
  margin-top: auto;
}
.hero__body > * { animation: heroIn 1.3s var(--ease-out) both; }
.hero__body > *:nth-child(1) { animation-delay: .25s; }
.hero__body > *:nth-child(2) { animation-delay: .45s; }
.hero__body > *:nth-child(3) { animation-delay: .65s; }
.hero__body > *:nth-child(4) { animation-delay: .85s; }

.hero__kicker { font: 400 clamp(.625rem, 1.1vw, .8125rem)/1 var(--sans); letter-spacing: .5em; opacity: .92; text-transform: uppercase; }
.hero__title { margin-top: var(--s-5); font-size: var(--t-display); text-shadow: 0 2px 40px rgba(0,0,0,.35); color: #F5F1E8; }
.hero__title em { color: var(--gold-pale); }
.hero__sub { margin: var(--s-5) auto 0; max-width: 34rem; font-size: var(--t-lead); color: rgba(245,241,232,.9); }
.hero__actions { margin-top: var(--s-7); display: flex; gap: var(--s-4); flex-wrap: wrap; justify-content: center; }

.hero__scroll {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  color: rgba(245,241,232,.72); font-size: 20px; line-height: 1;
  animation: floaty 2.8s ease-in-out infinite;
}

@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes heroIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes floaty { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 9px); } }

/* Page hero (interior pages) */
.pagehead {
  position: relative; overflow: hidden; background: var(--night);
  min-height: clamp(420px, 62svh, 580px);
  display: grid; align-items: end;
  isolation: isolate;
}
.pagehead__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.pagehead__scrim { position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(18,13,10,.62) 0%, rgba(18,13,10,.20) 62%, transparent 100%),
    linear-gradient(180deg, rgba(18,13,10,.66) 0%, rgba(18,13,10,.26) 42%, rgba(18,13,10,.84) 100%);
}
.pagehead__body {
  /* Clears the floating nav, then hangs the copy off the bottom edge */
  padding: calc(var(--nav-h) + 56px) var(--gutter) clamp(48px, 6vw, 76px);
  max-width: var(--maxw); margin-inline: auto; width: 100%;
}
.pagehead__title { margin-top: var(--s-4); color: #F5F1E8; }
.pagehead__sub { margin-top: var(--s-5); max-width: 52ch; color: rgba(245,241,232,.88); font-size: var(--t-lead); }

/* ---------- 8. (removed — scrolling ticker) ------------------------------ */

/* ---------- 9. FIGURES / MEDIA CARDS ------------------------------------- */
.figure {
  position: relative; overflow: hidden;
  min-height: 420px;
  background: var(--sand);
  transition: transform var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
}
.figure > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.figure:hover > img { transform: scale(1.05); }
.figure figcaption {
  position: absolute; inset: auto 0 0 0;
  padding: 72px var(--s-5) var(--s-5);
  background: linear-gradient(180deg, transparent, rgba(18,13,10,.78));
  color: #F5F1E8;
  font: italic 400 1.0625rem/1.45 var(--serif);
}
.figure--tall  { min-height: clamp(420px, 58vw, 620px); }
.figure--wide  { min-height: clamp(320px, 38vw, 480px); }

/* Panel card sitting inside media grids */
.panel {
  background: var(--sand);
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6);
  min-height: 420px;
}
.panel--outline { background: transparent; border: 1px solid var(--linen); }
.panel__notes { display: flex; flex-direction: column; gap: var(--s-3);
  font: italic 400 1.1875rem/1.5 var(--serif); color: var(--ink); }

/* ---------- 10. STAT ROW ------------------------------------------------- */
.stats { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 52px); }
.stat__num { font: 500 clamp(1.75rem, 3.2vw, 2.5rem)/1 var(--serif); color: var(--wine); font-variant-numeric: tabular-nums; }
.stat__label { margin-top: var(--s-2); font: 500 var(--t-eyebrow)/1.7 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- 11. PARALLAX BAND -------------------------------------------- */
.band {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(440px, 62vh, 640px);
  display: grid; place-items: center;
  background: var(--night);
  text-align: center;
}
.band__media {
  position: absolute; inset: -12% 0; width: 100%; height: 124%;
  object-fit: cover; z-index: -2; will-change: transform;
}
/* Flat tint alone loses text over bright lanterns/highlights — add a centred
   vignette so the copy block always has a dark bed under it. */
.band__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 68% 60% at 50% 50%, rgba(18,13,10,.62), transparent 76%),
    rgba(18,13,10,.46);
}
.band__body { padding: var(--section) var(--gutter); max-width: 900px; }

/* ---------- 12. LISTS / SCHEDULE ----------------------------------------- */
.schedule { border-top: 1px solid var(--linen); }
.schedule__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap;
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--linen);
}
.schedule__name { font: 400 clamp(1.25rem, 2vw, 1.625rem)/1.3 var(--serif); color: var(--ink); }
.schedule__when { font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .24em;
  text-transform: uppercase; color: var(--wine); white-space: nowrap; }

/* ---------- 13. MENU ----------------------------------------------------- */
.menu-nav {
  position: sticky; top: calc(var(--nav-h) + 24px); z-index: var(--z-sticky);
  margin-bottom: var(--s-8);
}
.menu-nav__track {
  display: flex; gap: var(--s-2); overflow-x: auto; scrollbar-width: none;
  padding: 7px; border-radius: 999px;
  background: rgba(251,248,241,.9);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid rgba(27,22,20,.08);
  box-shadow: var(--e-2);
  scroll-snap-type: x proximity;
}
.menu-nav__track::-webkit-scrollbar { display: none; }
.menu-nav__link {
  flex: none; scroll-snap-align: center;
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 12px 20px; border-radius: 999px;
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.menu-nav__link:hover { background: rgba(27,22,20,.06); color: var(--ink); }
.menu-nav__link.is-active { background: var(--wine); color: var(--cream); }

.dish {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-5);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--linen);
}
.dish:last-child { border-bottom: 0; }
.dish__name { font: 500 clamp(1.125rem, 1.7vw, 1.375rem)/1.3 var(--serif); color: var(--ink); }
.dish__price {
  font: 400 1rem/1.4 var(--serif); color: var(--wine);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dish__desc { grid-column: 1 / -1; font-size: var(--t-small); line-height: 1.7; color: var(--ink-2); max-width: 56ch; }
.dish__tags { grid-column: 1 / -1; display: flex; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-1); }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border: 1px solid var(--linen); border-radius: 999px;
  font: 500 .625rem/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.tag svg { width: 11px; height: 11px; flex: none; }
.tag--farm { border-color: rgba(107,34,42,.28); color: var(--wine); }

.menu-block { margin-bottom: var(--s-9); scroll-margin-top: calc(var(--nav-h) + 110px); }
.menu-block__head { margin-bottom: var(--s-5); padding-bottom: var(--s-4); border-bottom: 2px solid var(--ink); }
.menu-block__note { margin-top: var(--s-2); font: italic 400 1.0625rem/1.6 var(--serif); color: var(--ink-3); }

/* ---------- 14. FORMS ---------------------------------------------------- */
.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.field { display: grid; gap: var(--s-2); }
.field__label {
  font: 500 var(--t-eyebrow)/1.6 var(--sans); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
}
.field__req { color: var(--wine); }
.field__input {
  min-height: 52px;
  width: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--linen);
  border-radius: 0;
  font-size: 1rem; font-weight: 300; color: var(--ink);
  transition: border-color var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
textarea.field__input { min-height: 128px; resize: vertical; line-height: 1.7; }
.field__input::placeholder { color: rgba(74,68,60,.62); }

/* Selects — strip the OS chrome so they sit in the same visual family */
select.field__input {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236F6656' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
}
.on-dark select.field__input {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23C99A5B' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
.on-dark select.field__input option { color: var(--ink); background: var(--paper); }
.field__input:hover { border-color: rgba(27,22,20,.28); }
.field__input:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 3px rgba(107,34,42,.12); }
.field__input[aria-invalid="true"] { border-color: #A33; box-shadow: 0 0 0 3px rgba(170,51,51,.1); }
.field__help { font-size: .8125rem; line-height: 1.6; color: var(--ink-3); }
.field__error {
  display: none; align-items: center; gap: 6px;
  font: 500 .8125rem/1.5 var(--sans); color: #97282B;
}
.field__error svg { width: 14px; height: 14px; flex: none; }
.field.has-error .field__error { display: flex; }

.form__status {
  display: none;
  align-items: flex-start; gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: rgba(107,34,42,.06);
  border-left: 3px solid var(--wine);
  font-size: var(--t-small); line-height: 1.65; color: var(--ink);
}
.form__status.is-visible { display: flex; }
.form__status svg { width: 18px; height: 18px; flex: none; color: var(--wine); margin-top: 2px; }

/* Form on a dark surface */
.on-dark .field__label { color: rgba(245,241,232,.66); }
.on-dark .field__input {
  background: rgba(245,241,232,.06); border-color: rgba(245,241,232,.24); color: #F5F1E8;
}
.on-dark .field__input::placeholder { color: rgba(245,241,232,.4); }
.on-dark .field__input:hover { border-color: rgba(245,241,232,.42); }
.on-dark .field__input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,154,91,.2); }
.on-dark .field__help { color: rgba(245,241,232,.6); }
.on-dark .form__status { background: rgba(201,154,91,.12); border-left-color: var(--gold); color: #F5F1E8; }
.on-dark .form__status svg { color: var(--gold-2); }
.on-dark .btn--primary { background: var(--gold); color: var(--night); }
.on-dark .btn--primary:hover { background: var(--gold-2); color: var(--night); }

/* ---------- 15. FOOTER --------------------------------------------------- */
.site-footer {
  background: var(--night); color: rgba(245,241,232,.72);
  padding-block: clamp(56px, 8vw, 90px) var(--s-7);
}
.site-footer a { color: var(--gold-2); }
.site-footer a:hover { color: var(--gold-pale); }
.site-footer__grid {
  display: grid; gap: clamp(32px, 5vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.site-footer__brand { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.site-footer__logo { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.site-footer__wordmark { font: 500 1rem/1 var(--serif); letter-spacing: .34em; color: #F5F1E8; }
.site-footer__title {
  font: 500 var(--t-eyebrow)/1.6 var(--sans); letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-3);
}
.site-footer__bottom {
  margin-top: clamp(40px, 6vw, 68px); padding-top: var(--s-5);
  border-top: 1px solid rgba(245,241,232,.12);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: .8125rem; color: rgba(245,241,232,.5);
}

/* ---------- 16. SCROLL REVEAL -------------------------------------------- */
/* Hiding is gated on .js, which the inline head script sets and removes again
   if talisman.js never boots. No JS — or broken JS — always means visible copy. */
.js [data-reveal] { opacity: 0; transform: translateY(30px); }
.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}

/* ---------- 17. RESPONSIVE ----------------------------------------------- */
@media (max-width: 900px) {
  .section-head { flex-direction: column; align-items: flex-start; }
  .section-head__meta { text-align: left; }
  .figure { min-height: 340px; }
  .panel { min-height: 0; }
}
@media (max-width: 560px) {
  :root { --measure: 100%; }
  .hero { min-height: 560px; }
  .btn { width: 100%; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .dish { grid-template-columns: 1fr; }
  .dish__price { justify-self: start; }
}

/* Landscape phones — don't let a 100svh hero swallow the screen */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { height: auto; min-height: 0; padding-top: 120px; }
  .hero__body { padding-bottom: var(--s-8); }
  .hero__scroll { display: none; }
}

/* ---------- 18. MOTION PREFERENCES --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__media, .band__media { animation: none; transform: none !important; }
}

/* ---------- 19. PRINT (menu) --------------------------------------------- */
@media print {
  .nav, .nav-sheet, .site-footer, .menu-nav, .hero, .band,
  .pagehead__media, .pagehead__scrim, .hero__scroll { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  /* Keep the page title, drop the dark photographic block behind it */
  .pagehead { min-height: 0; background: none; padding-top: 0; }
  .pagehead__body { padding: 0 0 24pt; }
  .pagehead__title, .pagehead__sub, .on-dark, .on-dark h1, .on-dark h2 { color: #000 !important; }
  .pagehead .eyebrow, .pagehead__title em { color: #555 !important; }
  .section { padding-block: 12pt; }
  .menu-block { break-inside: avoid; }
  .dish { break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* =========================================================================
   20. PREMIUM POLISH
   Material, choreography and optical corrections. Everything here is
   additive — remove this section and the site still works, just flatter.
   ========================================================================= */

/* ---- 20.1 Ember sections ------------------------------------------------
   Replaces the old trick of laying a photograph at 15% opacity behind dark
   sections. A warm radial ember reads as intentional lighting rather than a
   muddy picture, costs no bytes, and frees the photograph for real use. */
.section--ember {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%,   rgba(201,154,91,.16), transparent 62%),
    radial-gradient(ellipse 70% 60% at 12% 100%, rgba(107,34,42,.30),  transparent 66%),
    radial-gradient(ellipse 60% 50% at 92% 88%,  rgba(201,154,91,.10), transparent 70%),
    var(--night);
}
/* Hairline of gold light along the top edge — the "lantern" cue */
.section--ember::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(201,154,91,.5), transparent);
}

/* ---- 20.2 Film grain ----------------------------------------------------
   A single 120×120 SVG turbulence tile, ~1KB, tiled over the page at very low
   opacity. This is what stops large flat cream areas reading as "flat web
   beige" — it gives the paper a surface. Never intercepts pointer events. */
.grain::after {
  content: "";
  position: fixed; inset: 0;
  /* Below dialogs — at 9999 this film sat on top of the menu modal and
     washed it out. Texture belongs under anything you have to read. */
  z-index: 9000;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}
@media (prefers-reduced-motion: reduce) { .grain::after { opacity: .02; } }
@media print { .grain::after { display: none; } }

/* ---- 20.3 Figure choreography ------------------------------------------
   Caption rises and its scrim deepens together, so the image reads clean at
   rest and legible on approach. Transform-only: no layout work per frame. */
.figure figcaption {
  transform: translateY(6px);
  transition: transform var(--d-slow) var(--ease-out);
}
.figure::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(18,13,10,.30));
  opacity: 0;
  transition: opacity var(--d-slow) var(--ease);
  pointer-events: none;
}
.figure:hover figcaption, .figure:focus-within figcaption { transform: translateY(0); }
.figure:hover::after,   .figure:focus-within::after   { opacity: 1; }

/* Gold hairline that draws itself across the top of a figure on approach */
.figure::before {
  content: "";
  position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
  z-index: 2;
}
.figure:hover::before, .figure:focus-within::before { transform: scaleX(1); }

/* ---- 20.4 Buttons: fill from the floor ---------------------------------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn--ghost::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--d-base) var(--ease-out);
}
.btn--ghost:hover::before { transform: scaleY(1); }
.on-dark .btn--ghost::before, .hero .btn--ghost::before,
.splithero .btn--ghost::before { background: #F5F1E8; }

/* ---- 20.5 Optical type corrections --------------------------------------
   Large Cormorant needs negative tracking to stop display sizes reading loose;
   small caps-and-letterspaced text needs the opposite. Purely optical. */
.hero__title, .display, .pagehead__title { letter-spacing: -.015em; }
h2 { letter-spacing: -.008em; }
.subhead { letter-spacing: 0; }
/* Cormorant's default figures are old-style; force lining for prices/stats */
.dish__price, .stat__num { font-variant-numeric: lining-nums tabular-nums; }

/* ---- 20.6 Link underline that grows ------------------------------------- */
.prose a, .site-footer a, .menu-block__note a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--d-base) var(--ease);
}
.prose a:hover, .site-footer a:hover { background-size: 100% 1px; }

/* ---- 20.7 Section edge detail ------------------------------------------- */
.section--cream, .section--sand { position: relative; }
.section--cream::before, .section--sand::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linen) 18%, var(--linen) 82%, transparent);
}

/* =========================================================================
   21. RESPONSIVE HARDENING
   Ratio-driven media, a real tablet tier, and small-phone corrections.
   Ordered widest → narrowest so later rules win.
   ========================================================================= */

/* ---- 21.1 Media sizes by ratio, not by fixed pixel heights --------------
   Fixed min-heights force awkward crops between breakpoints. Aspect ratios
   let every figure scale with its column and keep the composition intact. */
.figure { min-height: 0; aspect-ratio: 4 / 5; }
.figure--tall { min-height: 0; aspect-ratio: 3 / 4; }
.figure--wide { min-height: 0; aspect-ratio: 3 / 2; }
/* Older engines without aspect-ratio keep a sensible floor */
@supports not (aspect-ratio: 1) {
  .figure { min-height: 420px; }
  .figure--wide { min-height: 320px; }
}

/* ---- 21.2 Ultrawide — stop the measure from stretching ------------------ */
@media (min-width: 1600px) {
  :root { --maxw: 1440px; --section: 160px; }
}

/* ---- 21.3 Laptop ---------------------------------------------------------*/
@media (max-width: 1200px) {
  :root { --nav-h: 64px; }
  .nav__link { padding: 12px 12px; }
}

/* ---- 21.4 Tablet ---------------------------------------------------------
   Nav has already collapsed at 1080. Three-up grids become two-up here
   rather than dropping straight to one column. */
@media (max-width: 1024px) {
  :root { --section: clamp(64px, 9vw, 110px); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { min-height: 0; }
  .band { min-height: clamp(380px, 52vh, 520px); }
}

/* ---- 21.5 Large phone / small tablet ------------------------------------ */
@media (max-width: 760px) {
  :root { --nav-h: 60px; --section: clamp(56px, 12vw, 88px); }

  /* Every multi-column grid folds to a single column, including the inline
     grid-template-columns set on individual sections. */
  .grid--2, .grid--3,
  .wrap > .grid, .wrap--narrow > .grid { grid-template-columns: minmax(0, 1fr) !important; }

  .figure, .figure--tall { aspect-ratio: 4 / 5; }
  .figure--wide { aspect-ratio: 16 / 10; }

  /* Schedule rows: label above the title reads better than a squeezed row */
  .schedule__row { flex-direction: column; gap: var(--s-2); }
  .schedule__when { order: -1; }

  .stats { gap: var(--s-5) var(--s-6); }
  .stat { flex: 1 1 40%; }

  .menu-nav { top: calc(var(--nav-h) + 16px); margin-bottom: var(--s-7); }
  .menu-block { scroll-margin-top: calc(var(--nav-h) + 92px); }

  .site-footer__grid { gap: var(--s-6); }
  .site-footer__bottom { flex-direction: column; gap: var(--s-2); }
}

/* ---- 21.6 Phone --------------------------------------------------------- */
@media (max-width: 560px) {
  .nav { padding-inline: 14px; }
  .nav__inner { padding: 7px 7px 7px 14px; }
  .nav__logo { height: 26px; }
  .nav__wordmark { font-size: .875rem; letter-spacing: .26em; }

  .section-head { gap: var(--s-3); }
  .pagehead__body { padding-bottom: var(--s-7); }
  .band__body { padding-inline: var(--s-5); }
  blockquote { padding-left: var(--s-4) !important; }
}

/* ---- 21.7 Small phone (iPhone SE, 320–400) ------------------------------ */
@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .nav__wordmark { display: none; }        /* mark alone; wordmark would crowd */
  .stat { flex: 1 1 100%; }
  .tag { font-size: .5625rem; padding: 3px 8px; }
  .menu-nav__link { padding: 12px 15px; }
}

/* ---- 21.8 Coarse pointers ----------------------------------------------
   Hover choreography is meaningless on touch and can leave stuck states.
   Show figure captions permanently instead. */
@media (hover: none) {
  .figure figcaption { transform: none; }
  .figure::before, .figure::after { display: none; }
  .btn:hover { transform: none; }
}

/* =========================================================================
   22. NATIVE CONTROL NORMALISATION
   Selects and date inputs ship their own platform chrome, which ignores the
   surrounding theme and — on a dark surface — renders unreadably.
   ========================================================================= */

/* Custom chevron. Specificity beats `.on-dark .field__input`, whose
   `background` shorthand would otherwise wipe the indicator. */
select.field__input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 46px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%236F6656' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 13px 9px;
  cursor: pointer;
}
.on-dark select.field__input {
  background-color: rgba(245,241,232,.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23C99A5B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 13px 9px;
}
/* The options list is painted by the OS — give it readable colours */
select.field__input option { background: var(--paper); color: var(--ink); }

/* Date picker indicator is near-black by default and vanishes on --night */
.on-dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) sepia(1) saturate(2) hue-rotate(350deg);
  opacity: .7;
  cursor: pointer;
}
.on-dark input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* Safari centres date text oddly unless the field is told to fill its box */
input[type="date"].field__input { display: block; }

/* =========================================================================
   23. STACKED FLEX BASIS CORRECTION
   Schedule/timeline rows carry an inline `flex: 1 1 <n>px` sized for a ROW.
   Once §21.5 turns those rows into columns, that basis is reinterpreted as a
   height and injects hundreds of pixels of dead space between entries.
   ========================================================================= */
@media (max-width: 760px) {
  .schedule__row > div { flex: 0 1 auto !important; }
}

/* =========================================================================
   24. MENU PAGE — summary, in-page PDF viewer, alternating rows, full bleed
   ========================================================================= */

/* ---- 24.1 Summary strip -------------------------------------------------- */
.summary-grid {
  list-style: none; padding: 0;
  margin: clamp(40px, 6vw, 64px) auto 0;
  display: grid; gap: clamp(24px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  text-align: left;
  border-top: 1px solid var(--linen);
  padding-top: clamp(28px, 4vw, 40px);
}
.summary-grid li { display: flex; flex-direction: column; gap: var(--s-3); }
.summary-grid__num {
  font: 500 clamp(1.5rem, 2.6vw, 2rem)/1 var(--serif);
  color: var(--wine); font-variant-numeric: lining-nums tabular-nums;
}
.summary-grid__label { font-size: var(--t-small); line-height: 1.7; color: var(--ink-2); }

/* ---- 24.2 In-page PDF viewer --------------------------------------------
   The viewer is a full-screen dialog (see §33). Its surface styling lives on
   .viewer__panel — putting a background here painted the whole overlay cream. */
.viewer[hidden] { display: none; }

.viewer__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-6);
}
.viewer__close {
  flex: none; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; color: var(--ink-3);
  border: 1px solid var(--linen); border-radius: 999px;
  transition: color var(--d-base) var(--ease), border-color var(--d-base) var(--ease),
              background var(--d-base) var(--ease);
}
.viewer__close:hover { color: var(--ink); border-color: var(--ink); background: var(--sand); }

.viewer__tabs {
  display: flex; gap: var(--s-2); flex-wrap: wrap;
  border-bottom: 1px solid var(--linen);
  padding-bottom: var(--s-4); margin-bottom: var(--s-5);
}
.viewer__tab {
  min-height: 44px; padding: 12px 22px;
  border: 1px solid var(--linen); border-radius: 999px;
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-2); background: transparent;
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease),
              border-color var(--d-base) var(--ease);
}
.viewer__tab:hover { background: var(--sand); color: var(--ink); }
.viewer__tab[aria-selected="true"] {
  background: var(--wine); border-color: var(--wine); color: var(--cream);
}

.viewer__stage {
  position: relative;
  background: #fff;                /* opaque under the PDF, or the blur bleeds through */
  border: 1px solid rgba(27,22,20,.10);
  border-radius: 12px;
  overflow: hidden;
  /* Tall enough to read a page without the frame becoming its own scroll trap */
  height: clamp(460px, 78vh, 900px);
}
.viewer__frame { width: 100%; height: 100%; border: 0; display: block; background: var(--sand); }

.viewer__fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-4); text-align: center; padding: var(--s-6);
}
.viewer__fallback[hidden] { display: none; }

.viewer__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-5);
}
.viewer__note { font-size: var(--t-small); color: var(--ink-3); max-width: 52ch; }

/* ---- 24.3 Alternating image / text rows --------------------------------- */
.alt__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
/* Flip by reordering, not by direction — keeps DOM order (and therefore the
   screen-reader order) as image-then-text on every row. */
.alt__row--flip .alt__media { order: 2; }
.alt__row--flip .alt__body  { order: 1; }

.alt__media {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--sand);
  transition: transform var(--d-slow) var(--ease);
}
.alt__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.alt__media:hover img { transform: scale(1.04); }
.alt__body { max-width: 54ch; }

@media (max-width: 860px) {
  .alt__row { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 36px); }
  /* On one column the image must always lead, whatever the desktop order was */
  .alt__row--flip .alt__media, .alt__row--flip .alt__body { order: 0; }
  .alt__media { aspect-ratio: 16 / 11; }
}

/* ---- 24.4 Full-bleed closing image -------------------------------------- */
.fullbleed {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(520px, 88vh, 860px);
  display: grid; place-items: center;
  text-align: center;
  background: var(--night);
}
.fullbleed__media {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; z-index: -2; will-change: transform;
}
.fullbleed__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 74% 62% at 50% 52%, rgba(18,13,10,.66), transparent 78%),
    linear-gradient(180deg, rgba(18,13,10,.52), rgba(18,13,10,.34) 42%, rgba(18,13,10,.72));
}
.fullbleed__body { padding: var(--section) var(--gutter); max-width: 860px; }
.fullbleed__body h2 { margin-top: 18px; font-size: clamp(2.25rem, 5.4vw, 4.25rem); }

/* ---- 24.5 Collapsible host section --------------------------------------
   The viewer's section would otherwise hold a full band of padding (and its
   cream background) while the viewer itself is display:none, leaving an empty
   stripe in the page. Collapse it to nothing until the viewer is shown.
   Without :has() support it simply stays collapsed — still correct, just tighter. */
.section--collapsible { padding-block: 0; background: transparent; }
.section--collapsible:has([data-viewer]:not([hidden])) {
  padding-block: clamp(56px, 8vw, 110px);
  background: var(--cream);
}
.section--collapsible:has([data-viewer]:not([hidden]))::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--linen) 18%, var(--linen) 82%, transparent);
}

/* =========================================================================
   25. LANDING PAGE — split hero, chapter marks, overlap, mosaic
   A different layout language from the interior pages: type sits ON the page
   rather than over a photograph, and images are placed asymmetrically.
   ========================================================================= */

/* ---- 25.1 Hero ----------------------------------------------------------
   One photograph covering the whole section, with the type held left over a
   gradient. The gradient is doing accessibility work, not decoration: it is
   what keeps cream text legible against a photograph we cannot control. */
.splithero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: 100svh;
  background: var(--night);
}

.splithero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  z-index: -2;
  animation: kenburns 16s var(--ease-out) both;
}

/* Strong at the left edge where the words sit, clearing to almost nothing on
   the right so the photograph still reads. The second, vertical pass lifts
   the top (behind the nav) and the bottom (behind the scroll cue). */
.splithero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg,
      rgba(14,10,8,.90) 0%,
      rgba(14,10,8,.78) 26%,
      rgba(14,10,8,.46) 50%,
      rgba(14,10,8,.12) 74%,
      rgba(14,10,8,0)   92%),
    linear-gradient(180deg,
      rgba(14,10,8,.42) 0%,
      rgba(14,10,8,0)   26%,
      rgba(14,10,8,0)   72%,
      rgba(14,10,8,.40) 100%);
}

.splithero__type {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + 64px) var(--gutter) clamp(72px, 10vh, 120px);
}
/* Animate every child, but constrain widths per element — a blanket max-width
   here wraps the letter-spaced kicker and stacks the buttons. */
.splithero__type > * { animation: heroIn 1.1s var(--ease-out) both; }
.splithero__type > *:nth-child(1) { animation-delay: .10s; }
.splithero__type > *:nth-child(2) { animation-delay: .22s; }
.splithero__type > *:nth-child(3) { animation-delay: .36s; }
.splithero__type > *:nth-child(4) { animation-delay: .50s; }

.splithero__kicker {
  font: 400 clamp(.625rem, .8vw, .75rem)/1.6 var(--sans);
  letter-spacing: .5em; text-transform: uppercase;
  color: rgba(245,241,232,.82);
  white-space: nowrap;   /* the place name should never break mid-phrase */
}
.splithero__title {
  margin-top: clamp(20px, 3vw, 30px);
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 1.02; letter-spacing: -.02em;
  color: #F5F1E8;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.splithero__title em { color: var(--gold-pale); }
.splithero__sub {
  margin-top: clamp(20px, 2.6vw, 30px);
  max-width: 34ch;
  font-size: var(--t-lead); line-height: 1.75;
  color: rgba(245,241,232,.90);
}
.splithero__actions { margin-top: clamp(28px, 3.6vw, 42px); display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* A thin vertical scroll cue rather than an arrow */
.splithero__scroll {
  position: absolute; left: var(--gutter); bottom: 26px;
  width: 1px; height: 54px; background: rgba(245,241,232,.28);
  overflow: hidden;
}
.splithero__scroll span {
  position: absolute; inset: 0; display: block;
  background: var(--gold-2);
  animation: scrollCue 2.4s var(--ease) infinite;
}
@keyframes scrollCue {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 900px) {
  /* Narrow screens need the dark bed to run the full width, not just the left */
  .splithero__scrim {
    background:
      linear-gradient(180deg,
        rgba(14,10,8,.62) 0%,
        rgba(14,10,8,.34) 34%,
        rgba(14,10,8,.62) 72%,
        rgba(14,10,8,.86) 100%);
  }
  .splithero__type { padding-top: calc(var(--nav-h) + 48px); }
  .splithero__type > * { max-width: none; }
}

/* Landscape phones: a 100svh hero would swallow the screen entirely */
@media (max-height: 560px) and (orientation: landscape) {
  .splithero { min-height: 0; }
  .splithero__type { padding-block: calc(var(--nav-h) + 40px) 56px; }
  .splithero__scroll { display: none; }
}

/* ---- 25.2 Chapter mark --------------------------------------------------
   A large ghosted numeral anchoring each chapter, with the label beside it. */
.chapter {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 36px);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.chapter__num {
  flex: none;
  font: 500 clamp(3.5rem, 9vw, 8rem)/0.8 var(--serif);
  color: var(--gold);
  opacity: .3;
  letter-spacing: -.03em;
  user-select: none;
}
.chapter__label h2 { margin-top: 10px; }

/* ---- 25.3 Overlapping panel over an image ------------------------------- */
.overlap { position: relative; }
.overlap__media {
  margin: 0; position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--sand);
}
.overlap__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.overlap__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 72px var(--s-5) var(--s-5);
  background: linear-gradient(180deg, transparent, rgba(18,13,10,.72));
  color: #F5F1E8;
  font: italic 400 1.0625rem/1.45 var(--serif);
}
.overlap__panel {
  position: relative;
  margin: -84px clamp(0px, 4vw, 64px) 0 auto;
  max-width: 480px;
  background: var(--paper);
  border: 1px solid var(--linen);
  box-shadow: var(--e-3);
  padding: clamp(28px, 3.4vw, 44px);
}
@media (max-width: 860px) {
  .overlap__media { aspect-ratio: 4 / 3; }
  .overlap__media figcaption { padding-bottom: var(--s-4); }
  /* Stop the panel eating the photograph on a narrow screen */
  .overlap__panel { margin: -32px var(--s-4) 0; max-width: none; }
}

/* ---- 25.4 Paired stack (two figures side by side in a column) ----------- */
.stack-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 560px) { .stack-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---- 25.5 Staggered mosaic ---------------------------------------------
   Replaces the equal three-column triptych. Middle tile drops, outer tiles
   rise, so the row reads as a composition rather than a grid. */
.mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}
.mosaic .figure { min-height: 0; }
.mosaic__a { aspect-ratio: 3 / 4; margin-top: clamp(0px, 4vw, 56px); }
.mosaic__b { aspect-ratio: 4 / 5; }
.mosaic__c { aspect-ratio: 3 / 4; margin-top: clamp(0px, 7vw, 96px); }

@media (max-width: 860px) {
  .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaic__a, .mosaic__b, .mosaic__c { margin-top: 0; aspect-ratio: 3 / 4; }
  .mosaic__c { grid-column: span 2; aspect-ratio: 16 / 10; }
}
@media (max-width: 520px) {
  .mosaic { grid-template-columns: minmax(0, 1fr); }
  .mosaic__c { grid-column: auto; aspect-ratio: 3 / 4; }
}

/* =========================================================================
   26. LANDING PAGE v2 — reference layout, Talisman palette
   Section patterns adapted from the supplied reference: offset gold frames,
   overlapping collages, a solid colour band, a centre-card trio, a numbered
   gallery and a split contact. Colours, type and copy are unchanged.
   ========================================================================= */

/* ---- 26.1 Hero ---------------------------------------------------------- */
.bhero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh;
  display: grid; place-items: center;
  text-align: center;
  background: var(--night);
}
.bhero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  z-index: -2;
  animation: kenburns 16s var(--ease-out) both;
}
.bhero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 72% 62% at 50% 48%, rgba(14,10,8,.62), transparent 78%),
    linear-gradient(180deg, rgba(14,10,8,.72) 0%, rgba(14,10,8,.30) 34%, rgba(14,10,8,.34) 62%, rgba(14,10,8,.86) 100%);
}
.bhero__body {
  padding: calc(var(--nav-h) + 72px) var(--gutter) clamp(56px, 8vh, 92px);
  max-width: 900px;
}
.bhero__body > * { animation: heroIn 1.1s var(--ease-out) both; }
.bhero__body > *:nth-child(1) { animation-delay: .10s; }
.bhero__body > *:nth-child(2) { animation-delay: .22s; }
.bhero__body > *:nth-child(3) { animation-delay: .36s; }
.bhero__body > *:nth-child(4) { animation-delay: .48s; }
.bhero__body > *:nth-child(5) { animation-delay: .58s; }
.bhero__body > *:nth-child(6) { animation-delay: .68s; }

.bhero__kicker {
  font: 400 clamp(.625rem, .8vw, .75rem)/1.6 var(--sans);
  letter-spacing: .5em; text-transform: uppercase; color: rgba(245,241,232,.82);
}
.bhero__title {
  margin-top: clamp(16px, 2.4vw, 26px);
  font-size: clamp(2.75rem, 6.4vw, 5.5rem);
  line-height: 1.04; letter-spacing: -.02em; color: #F5F1E8;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.bhero__title em { color: var(--gold-pale); }
.bhero__sub {
  margin: clamp(18px, 2.4vw, 26px) auto 0; max-width: 46ch;
  font-size: var(--t-lead); line-height: 1.75; color: rgba(245,241,232,.88);
}

/* Small emblem, in the spirit of the reference's certification badge */
.bhero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: clamp(24px, 3vw, 34px);
  padding: 9px 20px 9px 12px;
  border: 1px solid rgba(245,241,232,.28);
  border-radius: 999px;
  background: rgba(14,10,8,.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.bhero__badge img { height: 22px; width: auto; filter: brightness(0) invert(1); opacity: .92; }
.bhero__badge span {
  font: 500 .625rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase;
  color: rgba(245,241,232,.9);
}

.bhero__lead-in {
  margin-top: clamp(28px, 4vw, 44px);
  font: 400 .75rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: rgba(245,241,232,.7);
}

/* Segmented selector, as per the reference's restaurant switcher */
.pillrow {
  margin-top: var(--s-4);
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  padding: 6px;
  border: 1px solid rgba(245,241,232,.24);
  background: rgba(14,10,8,.36);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pillrow__item {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 12px 26px;
  font: 500 .6875rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(245,241,232,.86);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.pillrow__item:hover { background: rgba(245,241,232,.12); color: #fff; }
.pillrow__item--on { background: var(--gold); color: var(--night); }
.pillrow__item--on:hover { background: var(--gold-2); color: var(--night); }

/* ---- 26.2 Split (image + copy) ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 6vw, 90px);
  align-items: center;
}
.split__body h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); line-height: 1.12; margin-top: 12px; }

/* ---- 26.3 Framed collage ------------------------------------------------
   A gold rule offset behind two overlapping photographs — the reference's
   signature device. The rule is decorative only. */
.framed { position: relative; padding: 0 clamp(24px, 4vw, 56px) clamp(48px, 7vw, 84px) 0; }
.framed__rule {
  position: absolute; inset: clamp(-18px, -2vw, -10px) 0 clamp(48px, 7vw, 84px) clamp(28px, 5vw, 64px);
  border: 1px solid var(--gold);
  pointer-events: none;
}
.framed--light .framed__rule { border-color: rgba(245,241,232,.55); }

.framed__back {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  display: block;
}
.framed__front {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 52%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 6px solid var(--paper);
  box-shadow: var(--e-3);
}
.solidband .framed__front { border-color: var(--wine); }

@media (max-width: 640px) {
  .framed { padding-bottom: clamp(40px, 12vw, 64px); }
  .framed__front { width: 58%; }
}

/* ---- 26.4 Explore head (heading left, copy + tags right) ---------------- */
.explore {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-bottom: clamp(36px, 5vw, 60px);
}
.explore__head h2 { margin-top: 12px; font-size: clamp(1.875rem, 3.8vw, 3rem); }

.featuretags { list-style: none; padding: 0; margin: clamp(22px, 3vw, 32px) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3) clamp(18px, 2.4vw, 30px); }
.featuretags li {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 .75rem/1.4 var(--sans); letter-spacing: .04em; color: var(--ink-2);
}
.featuretags svg { width: 17px; height: 17px; flex: none; color: var(--gold); }

/* ---- 26.5 Staggered four-up -------------------------------------------- */
.quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); align-items: start; }
.quad__i { margin: 0; overflow: hidden; background: var(--sand); aspect-ratio: 3 / 4; }
.quad__i img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.quad__i:hover img { transform: scale(1.05); }
.quad__i:nth-child(2) { margin-top: clamp(16px, 3vw, 42px); }
.quad__i:nth-child(4) { margin-top: clamp(16px, 3vw, 42px); }

@media (max-width: 860px) {
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quad__i:nth-child(2), .quad__i:nth-child(4) { margin-top: 0; }
}

/* ---- 26.6 Solid colour band --------------------------------------------
   The reference uses a flat gold field. Gold at Talisman's value is only
   2.4:1 against light text, so the band takes --wine instead — a brand
   colour that carries cream text at 10.6:1 and keeps gold for the accents. */
.solidband { background: var(--wine); color: rgba(245,241,232,.9); padding-block: var(--section); }
.solidband h2, .solidband h3 { color: #F5F1E8; }
.solidband h2 em { color: var(--gold-pale); font-style: italic; }
.solidband .eyebrow { color: var(--gold-pale); }
.solidband p { color: rgba(245,241,232,.88); }
.split--band { align-items: center; }

.featuregrid {
  list-style: none; padding: 0;
  margin: clamp(28px, 4vw, 40px) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-4) clamp(20px, 3vw, 36px);
}
.featuregrid li { display: flex; align-items: flex-start; gap: 11px; font-size: var(--t-small); line-height: 1.6; }
.featuregrid svg { width: 19px; height: 19px; flex: none; color: var(--gold-pale); margin-top: 2px; }
.featuregrid strong { display: block; font: 500 1rem/1.3 var(--serif); color: #F5F1E8; letter-spacing: .02em; }
@media (max-width: 560px) { .featuregrid { grid-template-columns: minmax(0, 1fr); } }

/* Button that sits on a coloured band */
.btn--onband { background: var(--paper); color: var(--wine); border-color: var(--paper); }
.btn--onband:hover { background: #fff; color: var(--wine-2); border-color: #fff; }
.trio__card .btn--onband { background: var(--wine); color: var(--cream); border-color: var(--wine); }
.trio__card .btn--onband:hover { background: var(--wine-2); border-color: var(--wine-2); color: var(--cream); }

/* ---- 26.7 Trio (image · card · image) ---------------------------------- */
.trio {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid; grid-template-columns: 1fr 1.1fr 1fr;
  gap: clamp(14px, 2vw, 26px);
  align-items: center;
}
.trio__side { margin: 0; overflow: hidden; background: var(--sand); aspect-ratio: 3 / 4; }
.trio__side img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.trio__side:hover img { transform: scale(1.05); }
.trio__card {
  background: var(--sand);
  border: 1px solid var(--linen);
  padding: clamp(26px, 3.2vw, 44px);
}
.trio__list { list-style: none; padding: 0; margin: var(--s-5) 0 0; }
.trio__list li {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--linen);
}
.trio__list li:last-child { border-bottom: 0; }
.trio__list span:first-child { font: 400 1.0625rem/1.3 var(--serif); color: var(--ink); }
.trio__list span:last-child {
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--wine); white-space: nowrap;
}

@media (max-width: 900px) {
  .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio__card { grid-column: span 2; order: -1; }
}
@media (max-width: 560px) {
  .trio { grid-template-columns: minmax(0, 1fr); }
  .trio__card { grid-column: auto; }
}

/* ---- 26.8 Numbered gallery --------------------------------------------- */
.gallery { position: relative; }
.gallery__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(50% - clamp(7px, 1vw, 13px));
  gap: clamp(14px, 2vw, 26px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__item { margin: 0; scroll-snap-align: start; }
.gallery__num {
  font: 500 clamp(1.125rem, 1.8vw, 1.5rem)/1 var(--serif);
  color: var(--ink-3); margin-bottom: var(--s-3);
  font-variant-numeric: lining-nums tabular-nums;
}
.gallery__item img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: var(--sand);
}
.gallery__item figcaption {
  margin-top: var(--s-3);
  font: italic 400 1.0625rem/1.4 var(--serif); color: var(--ink-2);
}

.gallery__controls {
  margin-top: clamp(24px, 3vw, 36px);
  display: flex; align-items: center; gap: clamp(16px, 3vw, 32px);
}
.gallery__arrow {
  width: 46px; height: 46px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--linen); border-radius: 999px;
  color: var(--ink-2);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.gallery__arrow svg { width: 19px; height: 19px; }
.gallery__arrow:hover { background: var(--wine); border-color: var(--wine); color: var(--cream); }
.gallery__arrow[disabled] { opacity: .35; pointer-events: none; }
.gallery__bar { flex: 1; height: 2px; background: var(--linen); position: relative; overflow: hidden; }
.gallery__bar span {
  position: absolute; inset: 0 auto 0 0; width: 50%;
  background: var(--gold);
  transition: transform var(--d-slow) var(--ease), width var(--d-slow) var(--ease);
}

@media (max-width: 700px) {
  .gallery__track { grid-auto-columns: 86%; }
}

/* ---- 26.9 Contact split ------------------------------------------------- */
.contact {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.contact__aside h2 { font-size: clamp(1.875rem, 3.8vw, 3rem); line-height: 1.12; }
.contact__list { list-style: none; padding: 0; margin: clamp(28px, 4vw, 40px) 0 0; display: grid; gap: var(--s-4); }
.contact__list li { display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-small); color: var(--ink-2); }
.contact__icon {
  width: 42px; height: 42px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--gold); color: var(--night);
}
.contact__icon svg { width: 19px; height: 19px; }

.contact__card {
  background: var(--paper);
  border: 1px solid var(--linen);
  box-shadow: var(--e-3);
  padding: clamp(26px, 3.4vw, 46px);
}
.contact__card h3 { font-size: clamp(1.375rem, 2.4vw, 1.875rem); }

@media (max-width: 900px) {
  .split, .explore, .contact { grid-template-columns: minmax(0, 1fr); }
  /* Photograph should lead on a narrow screen, whatever the desktop order */
  .split__media { order: -1; }
}

/* ---- 26.10 Footer ------------------------------------------------------- */
.bfooter__top {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: start;
}
.bfooter__tagline {
  margin-top: var(--s-5);
  font: 500 clamp(1.25rem, 2.2vw, 1.75rem)/1.35 var(--serif);
  color: #F5F1E8; max-width: 22ch;
}
.bfooter__social { display: flex; gap: var(--s-3); margin-top: clamp(24px, 3vw, 32px); }
.bfooter__social a {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245,241,232,.24); border-radius: 999px;
  color: var(--gold-2);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease), border-color var(--d-base) var(--ease);
}
.bfooter__social a:hover { background: var(--gold); border-color: var(--gold); color: var(--night); }
.bfooter__social svg { width: 18px; height: 18px; }

.bfooter__nav { display: grid; gap: 0; }
.bfooter__nav a {
  display: flex; align-items: baseline; gap: var(--s-4);
  padding-block: clamp(14px, 1.8vw, 20px);
  border-bottom: 1px solid rgba(245,241,232,.12);
  font: 500 clamp(1.125rem, 1.8vw, 1.5rem)/1.2 var(--serif);
  color: #F5F1E8;
  transition: color var(--d-base) var(--ease), padding-left var(--d-base) var(--ease);
}
.bfooter__nav a:first-child { border-top: 1px solid rgba(245,241,232,.12); }
.bfooter__nav a span {
  font: 500 .6875rem/1 var(--sans); letter-spacing: .2em; color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
.bfooter__nav a:hover { color: var(--gold-2); padding-left: 8px; }

@media (max-width: 760px) { .bfooter__top { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================================
   27. INTERIOR PAGES — shared pieces for Our Story / Menu / Events
   ========================================================================= */

/* ---- 27.1 Shorter hero for interior pages ------------------------------- */
.bhero--page { min-height: clamp(500px, 70svh, 700px); }
.bhero--page .bhero__title { font-size: clamp(2.5rem, 5.4vw, 4.5rem); }
.bhero--page .bhero__body { padding-top: calc(var(--nav-h) + 56px); }

/* ---- 27.2 Numbered steps ------------------------------------------------
   The reference numbers its footer nav and gallery; the same device carries
   a timeline or a process without needing new visual vocabulary. */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--linen);
}
.steps > li:first-child { border-top: 1px solid var(--linen); }
.steps__num {
  font: 500 clamp(1.125rem, 1.8vw, 1.5rem)/1 var(--serif);
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
  padding-top: 6px;
}
.steps__title { font: 500 clamp(1.25rem, 2.2vw, 1.75rem)/1.25 var(--serif); color: var(--ink); }
.steps__body { margin-top: 10px; font-size: var(--t-small); line-height: 1.7; max-width: 60ch; }
.steps__when {
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--wine); white-space: nowrap; padding-top: 10px;
}
.solidband .steps > li { border-color: rgba(245,241,232,.18); }
.solidband .steps__title { color: #F5F1E8; }
.solidband .steps__num, .solidband .steps__when { color: var(--gold-pale); }

@media (max-width: 760px) {
  .steps > li { grid-template-columns: auto minmax(0, 1fr); }
  .steps__when { grid-column: 2; padding-top: 0; margin-top: 8px; }
}

/* ---- 27.3 Card grid (spaces, values) ------------------------------------ */
.cardgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.cardgrid > * {
  background: var(--paper);
  border: 1px solid var(--linen);
  padding: clamp(26px, 3vw, 40px);
}
.cardgrid h3 { margin-top: 12px; font-size: clamp(1.25rem, 2vw, 1.625rem); }
.cardgrid ul { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: 10px;
  font: italic 400 1.0625rem/1.4 var(--serif); color: var(--ink); }
.section--cream .cardgrid > * { background: var(--paper); }
@media (max-width: 900px) { .cardgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cardgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---- 26.11 Hero establishment line -------------------------------------- */
.bhero__est {
  margin-top: clamp(14px, 2vw, 20px);
  font: italic 400 clamp(1.125rem, 1.8vw, 1.5rem)/1 var(--serif);
  color: var(--gold-2);
  letter-spacing: .04em;
}
.bhero__est::after {
  content: "";
  display: block;
  width: 46px; height: 1px;
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  background: var(--gold);
  opacity: .7;
}

/* =========================================================================
   28. HOME v3 — nav dropdown, fill-block media, pairs, feature cards
   ========================================================================= */

/* ---- 28.1 Nav dropdown --------------------------------------------------- */
.nav__group { position: relative; display: flex; }
.nav__link--sub {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 15px;
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(245,241,232,.86); background: none; border: 0; border-radius: 999px;
  cursor: pointer;
  transition: color var(--d-base) var(--ease), background var(--d-base) var(--ease);
}
.nav__link--sub svg { width: 9px; height: 9px; transition: transform var(--d-base) var(--ease); }
.nav__link--sub:hover { color: #fff; background: rgba(245,241,232,.12); }
.nav.is-solid .nav__link--sub, .nav--light .nav__link--sub { color: var(--ink-2); }
.nav.is-solid .nav__link--sub:hover, .nav--light .nav__link--sub:hover { color: var(--ink); background: rgba(27,22,20,.06); }
.nav__group.is-open .nav__link--sub svg { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: calc(100% + 10px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 190px;
  display: grid;
  padding: 7px;
  border-radius: 18px;
  background: rgba(251,248,241,.94);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(27,22,20,.09);
  box-shadow: var(--e-nav);
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-base) var(--ease), transform var(--d-base) var(--ease), visibility var(--d-base);
  z-index: 2;
}
.nav__group.is-open .nav__sub,
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav__sub a {
  min-height: 42px; display: flex; align-items: center;
  padding: 0 16px; border-radius: 12px;
  font: 500 var(--t-eyebrow)/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  transition: background var(--d-base) var(--ease), color var(--d-base) var(--ease);
}
.nav__sub a:hover { background: var(--sand); color: var(--wine); }

/* Mobile sheet: sub-items sit inline, indented, no disclosure needed */
.nav-sheet__sub { display: grid; gap: 2px; margin: 4px 0 8px 18px; padding-left: 16px; border-left: 1px solid var(--linen); }
.nav-sheet__sub a {
  font: 400 clamp(1.125rem, 4.5vw, 1.5rem)/1.5 var(--serif);
  color: var(--ink-2); padding-block: 4px;
}
.nav-sheet__sub a:hover { color: var(--wine); }

/* ---- 28.2 Fill-block media ----------------------------------------------
   Replaces the outlined frame. A solid warm block sits behind and offset
   from the photograph — the same depth cue without a drawn line. */
.blockmedia { position: relative; padding: clamp(18px, 2.4vw, 30px) 0 clamp(36px, 5vw, 62px) clamp(18px, 2.4vw, 30px); }
.blockmedia::before {
  content: "";
  position: absolute; z-index: 0;
  top: 0; left: 0; width: 62%; height: 74%;
  background: var(--sand);
}
.solidband .blockmedia::before { background: rgba(245,241,232,.14); }
.blockmedia__main {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
}
.blockmedia__inset {
  position: absolute; right: 0; bottom: 0; z-index: 2;
  width: 46%; aspect-ratio: 1 / 1; object-fit: cover;
  border: 7px solid var(--paper);
  box-shadow: var(--e-3);
}
.solidband .blockmedia__inset { border-color: var(--wine); }
@media (max-width: 640px) { .blockmedia__inset { width: 54%; } }

/* ---- 28.3 Pair (two photographs, offset) -------------------------------- */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); align-items: start; }
.pair figure { margin: 0; position: relative; overflow: hidden; background: var(--sand); }
.pair figure:nth-child(2) { margin-top: clamp(20px, 5vw, 70px); }
.pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; transition: transform 1.2s var(--ease-out); }
.pair figure:hover img { transform: scale(1.04); }
.pair figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 64px var(--s-5) var(--s-5);
  background: linear-gradient(180deg, transparent, rgba(18,13,10,.76));
  color: #F5F1E8; font: italic 400 1.0625rem/1.4 var(--serif);
}
@media (max-width: 620px) { .pair { grid-template-columns: minmax(0,1fr); } .pair figure:nth-child(2) { margin-top: 0; } }

/* ---- 28.4 Break image (tight padding) ----------------------------------- */
.breakband { position: relative; overflow: hidden; }
.breakband img { width: 100%; height: clamp(280px, 42vw, 520px); object-fit: cover; display: block; }
.breakband__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 90px var(--gutter) clamp(24px, 3vw, 38px);
  background: linear-gradient(180deg, transparent, rgba(18,13,10,.7));
}
.breakband__cap p {
  max-width: var(--maxw); margin-inline: auto;
  font: italic 400 clamp(1.125rem, 2vw, 1.625rem)/1.4 var(--serif); color: #F5F1E8;
}

/* ---- 28.5 Feature cards (image + heading + one-liner) ------------------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 32px); }
.feature { display: flex; flex-direction: column; }
.feature__media { margin: 0; overflow: hidden; background: var(--sand); aspect-ratio: 4 / 3; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.feature:hover .feature__media img { transform: scale(1.05); }
.feature h3 { margin-top: var(--s-5); font-size: clamp(1.375rem, 2.2vw, 1.75rem); }
.feature p { margin-top: 10px; font-size: var(--t-small); line-height: 1.7; color: var(--ink-2); }
.feature__link { margin-top: auto; padding-top: var(--s-4); }
@media (max-width: 860px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* ---- 28.6 Families band -------------------------------------------------- */
.families { position: relative; isolation: isolate; overflow: hidden; background: var(--night);
  min-height: clamp(440px, 62vh, 640px); display: grid; align-items: center; }
.families__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.families__scrim { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(14,10,8,.86) 0%, rgba(14,10,8,.62) 38%, rgba(14,10,8,.16) 72%, transparent 92%); }
.families__body { width: 100%; max-width: var(--maxw); margin-inline: auto; padding: clamp(48px,7vw,90px) var(--gutter); }
.families__body h2 { color: #F5F1E8; font-size: clamp(2rem, 4.4vw, 3.5rem); }
.families__body h2 em { color: var(--gold-pale); }
.families__body p { margin-top: var(--s-5); max-width: 46ch; color: rgba(245,241,232,.9); font-size: var(--t-lead); line-height: 1.75; }
@media (max-width: 760px) {
  .families__scrim { background: linear-gradient(180deg, rgba(14,10,8,.55) 0%, rgba(14,10,8,.72) 55%, rgba(14,10,8,.88) 100%); }
}


/* =========================================================================
   29. HOME REFINEMENTS
   ========================================================================= */

/* ---- 29.1 Single image, no inset ---------------------------------------- */
.blockmedia--solo { padding-bottom: clamp(18px, 2.4vw, 30px); }
.blockmedia--solo .blockmedia__main { aspect-ratio: 5 / 4; }

/* ---- 29.2 Food & Beverages row -----------------------------------------
   Two photographs and the copy panel share one row and one height, so the
   text block lines up with the images rather than floating against them. */
.fbrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}
.fbrow > figure {
  margin: 0; position: relative; overflow: hidden; background: var(--sand);
  min-height: clamp(320px, 34vw, 460px);
}
.fbrow > figure img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 1.2s var(--ease-out);
}
.fbrow > figure:hover img { transform: scale(1.05); }
.fbrow figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px var(--s-5) var(--s-4);
  background: linear-gradient(180deg, transparent, rgba(18,13,10,.76));
  color: #F5F1E8; font: italic 400 1.0625rem/1.4 var(--serif);
}
.fbrow__panel {
  background: var(--sand);
  padding: clamp(24px, 2.8vw, 36px);
  display: flex; flex-direction: column; justify-content: center; gap: var(--s-5);
}
@media (max-width: 900px) {
  .fbrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbrow__panel { grid-column: span 2; }
}
@media (max-width: 560px) {
  .fbrow { grid-template-columns: minmax(0, 1fr); }
  .fbrow__panel { grid-column: auto; }
}

/* ---- 29.3 Feature cards inside one container ---------------------------- */
.features--boxed {
  border: 1px solid var(--linen);
  background: var(--paper);
  padding: clamp(20px, 2.6vw, 34px);
  gap: clamp(20px, 2.6vw, 34px);
}
/* The divider is drawn in the gap, not as padding — padding would narrow the
   2nd and 3rd columns and, at a fixed aspect-ratio, drop their images (and so
   their headings) out of line with the first. */
.features--boxed .feature { position: relative; }
.features--boxed .feature + .feature::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  left: calc(clamp(20px, 2.6vw, 34px) / -2);
  width: 1px; background: var(--linen);
}
@media (max-width: 860px) {
  .features--boxed .feature + .feature::before {
    top: calc(clamp(20px, 2.6vw, 34px) / -2); bottom: auto;
    left: 0; right: 0; width: auto; height: 1px;
  }
}

/* ---- 29.4 Families band, centred ---------------------------------------- */
.families--centre { text-align: center; }
.families--centre .families__scrim {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(14,10,8,.66), transparent 78%),
    linear-gradient(180deg, rgba(14,10,8,.52), rgba(14,10,8,.34) 45%, rgba(14,10,8,.68));
}
.families--centre .families__body { max-width: 860px; }
.families--centre .families__body p { margin-inline: auto; max-width: 56ch; }


/* ---- 29.5 Dimmed families band -----------------------------------------
   The photograph drops to 20% over the night ground so the headline and copy
   carry full contrast rather than fighting a busy image. */
.families--dim .families__media { opacity: .20; }
.families--dim .families__scrim { background: rgba(14,10,8,.25); }

/* =========================================================================
   30. MENU / STORY COMPONENTS
   ========================================================================= */

/* ---- 30.1 Three-column intro boxes (image + title + one-liner) ---------- */
.introcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.introcard { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--linen); }
.introcard__media { margin: 0; overflow: hidden; background: var(--sand); aspect-ratio: 4 / 3; }
.introcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.introcard:hover .introcard__media img { transform: scale(1.05); }
.introcard__body { padding: clamp(20px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; flex: 1; }
.introcard__body h3 { font-size: clamp(1.25rem, 2vw, 1.625rem); }
.introcard__body p { font-size: var(--t-small); line-height: 1.7; color: var(--ink-2); }
.introcard__body .link-arrow { margin-top: auto; padding-top: var(--s-3); }
@media (max-width: 860px) { .introcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .introcards { grid-template-columns: minmax(0, 1fr); } }

/* ---- 30.2 Plain single image for split sections -------------------------
   Replaces the outlined/inset collage: one photograph, no rule, no overlap. */
.solomedia { margin: 0; overflow: hidden; background: var(--sand); }
.solomedia img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 5; }
.solomedia--wide img { aspect-ratio: 3 / 2; }
.solomedia--tall img { aspect-ratio: 3 / 4; }

/* ---- 30.3 Monochrome treatment (Our Story) ------------------------------ */
.mono img, img.mono { filter: grayscale(1) contrast(1.06); transition: filter var(--d-slow) var(--ease); }
.mono:hover img, img.mono:hover { filter: grayscale(1) contrast(1.12); }
.bhero--mono .bhero__media { filter: grayscale(1) contrast(1.05); }


/* =========================================================================
   31. BRAND SCRIPT
   Used as an accent, never for body copy or long headings — a script at
   paragraph length is unreadable, and at heading length it stops being
   special. Applied to the establishment line, section subheads, and
   anywhere `.script` is added by hand.
   ========================================================================= */
.script,
.bhero__est,
.subhead {
  font-family: var(--script);
  font-style: normal;          /* the face is already cursive; italic double-slants it */
  letter-spacing: .01em;
}

/* Great Vibes sits small for its point size and rides high on the baseline,
   so accent lines need a nudge up in size and a little breathing room. */
.bhero__est { font-size: clamp(1.5rem, 2.6vw, 2.125rem); line-height: 1.1; }
.subhead    { font-size: .78em; line-height: 1.35; margin-top: .12em; }

/* =========================================================================
   32. HERO-LESS PAGE TOP
   Pages that open straight onto content still sit under the fixed nav, so
   the first section has to clear it. These pages also carry `nav--light`,
   since there is no dark hero for the transparent nav to sit over.
   ========================================================================= */
/* The floating nav's underside sits at roughly --nav-h + its own top offset;
   this lands the first section about 30px below it. */
.section--pagetop { padding-top: calc(var(--nav-h) + 46px); }
.pagetitle { margin-bottom: clamp(28px, 4vw, 48px); max-width: 46ch; }
.pagetitle h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.1; }
.pagetitle p { margin-top: var(--s-4); font-size: var(--t-lead); line-height: 1.75; color: var(--ink-2); }

/* The mobile sheet's "Menu" is a grouping label, not a destination. */
.nav-sheet__link--label { color: var(--ink-3); cursor: default; }

/* =========================================================================
   33. MENU VIEWER AS A MODAL
   Previously the viewer expanded inline, pushing the page down. It now sits
   over the page as a dialog, so opening a menu costs no layout.
   ========================================================================= */
.viewer {
  position: fixed; inset: 0; z-index: 9500;   /* above the grain film */
  display: grid; place-items: center;
  padding: clamp(10px, 2.5vw, 40px);
}
.viewer[hidden] { display: none; }
.viewer__backdrop {
  position: absolute; inset: 0;
  background: rgba(14,10,8,.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: fadeIn .25s var(--ease) both;
}
.viewer__panel {
  position: relative;
  width: 100%; max-width: 980px;
  /* A definite height, not just a cap: flex children can only share out space
     that actually exists. With max-height alone the stage's floor pushed the
     panel past the viewport and overflow:hidden sliced the PDF in half. */
  height: min(100%, 900px);
  display: flex; flex-direction: column;
  /* Same frosted glass as the floating nav */
  background: rgba(251,248,241,.86);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(27,22,20,.10);
  border-radius: 20px;
  box-shadow: 0 40px 90px -20px rgba(14,10,8,.55);
  padding: clamp(18px, 2.6vw, 32px);
  overflow: hidden;
  animation: viewerPop .34s var(--ease-out) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes viewerPop { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* The stage takes what is left, but an iframe with no height collapses to its
   150px default — so give it a real floor as well as the flex grow. */
/* Takes exactly what is left over, and may shrink — min-height:0 is required
   or a flex item refuses to go below its content size. */
.viewer__stage { flex: 1 1 auto; min-height: 0; }
.viewer__frame { width: 100%; height: 100%; display: block; border: 0; }
.viewer__head { margin-bottom: var(--s-4); }
.viewer__tabs { padding-bottom: var(--s-3); margin-bottom: var(--s-4); }
.viewer__foot { margin-top: var(--s-4); }

@media (max-width: 620px) {
  .viewer__panel { padding: 14px; }
  .viewer__foot { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
  .viewer__note { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .viewer__backdrop, .viewer__panel { animation: none; }
}

/* =========================================================================
   34. LINE TIMELINE
   A continuous rule from inception to today, with each moment pinned to it.
   ========================================================================= */
.timeline { position: relative; list-style: none; padding: 0; margin: 0; }
.timeline::before {
  content: "";
  position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 1px; background: var(--linen);
}
.timeline > li {
  position: relative;
  padding-left: clamp(34px, 4vw, 52px);
  padding-bottom: clamp(28px, 4vw, 44px);
}
.timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute; left: 0; top: 6px;
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--paper);
  border: 2px solid var(--gold);
}
.timeline > li:first-child::before,
.timeline > li:last-child::before { background: var(--wine); border-color: var(--wine); }
.timeline__when {
  display: block;
  font: 500 var(--t-eyebrow)/1 var(--sans);
  letter-spacing: .22em; text-transform: uppercase; color: var(--wine);
}
.timeline__title { margin-top: 10px; font: 500 clamp(1.25rem, 2.1vw, 1.625rem)/1.25 var(--serif); color: var(--ink); }
.timeline__body { margin-top: 10px; font-size: var(--t-small); line-height: 1.75; max-width: 62ch; }
.section--cream .timeline > li::before { background: var(--cream); }

/* =========================================================================
   35. ALTERNATING TIMELINE
   The line runs down the centre and the entries fall either side of it, so
   the right-hand half of the row is used instead of sitting empty.
   ========================================================================= */
@media (min-width: 861px) {
  .timeline--alt { padding-top: var(--s-4); }
  .timeline--alt::before { left: 50%; transform: translateX(-50%); }
  .timeline--alt > li {
    width: 50%;
    padding-left: 0;
    padding-bottom: clamp(30px, 4vw, 52px);
  }
  /* odd entries sit left of the line, even entries right */
  .timeline--alt > li:nth-child(odd) {
    margin-left: 0; padding-right: clamp(34px, 4vw, 56px); text-align: right;
  }
  .timeline--alt > li:nth-child(even) {
    margin-left: 50%; padding-left: clamp(34px, 4vw, 56px); text-align: left;
  }
  .timeline--alt > li:nth-child(odd)::before  { left: auto; right: -7px; }
  .timeline--alt > li:nth-child(even)::before { left: -8px; }
  .timeline--alt .timeline__body { max-width: none; }
  .timeline--alt > li:nth-child(odd) .timeline__body { margin-left: auto; }
}