/* ============================================================
   Option Four — the keeper. Option One's CLOSER film plays
   first (film.css owns that), then the page settles onto a
   Zola-style landing: deep green (#135442) ground, warm ivory
   (--c-cream) type, BW monogram, Pinyon names, Stowe House line
   art, date/venue/countdown, tab nav, the drift carousel (frames
   only, no captions), and a timeline schedule.
   ============================================================ */

.landing {
  position: relative;
  z-index: 1; /* above the fixed pigment layer */
  background: #135442;
  color: var(--c-cream);
  overflow-x: clip;
}

/* ---- hero ---- */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(3rem, 8vh, 5.5rem) 24px 0;
}

.hero__monogram {
  width: clamp(110px, 14vw, 160px);
  height: auto;
  color: var(--c-cream);
}

/* letterspaced serif caps — the falling wordmark lands on this line.
   will-change keeps the GSAP dive on its own compositor layer — without
   it the scaled text re-rasterises mid-scrub and the slide judders */
.hero__names {
  will-change: transform, opacity;
  margin-top: 1.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  letter-spacing: 0.18em;
  text-indent: 0.09em; /* half the tracking — trailing space biases the line box */
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--c-cream);
}

/* the story wordmark's own ampersand — the glyph never changes during
   the title handoff */
.hero__names .amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.hero__venue-art {
  margin-top: 1.8rem; /* sits below the date/place block now */
  width: min(560px, 86vw);
  height: auto;
  color: var(--c-cream);
}

/* names → date → place, Beth's hierarchy. The date uses lining numerals:
   Cormorant's default old-style figures sit at lowercase height next to
   the uppercase month, which read as "different sizes". */
.hero__date {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: clamp(0.9rem, 1.15vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.13em;
  text-transform: uppercase;
}

/* the place differentiates subtly: same size family, lighter weight,
   wider tracking, a step quieter */
.hero__venue {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 1vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.32em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: rgb(240 233 220 / 0.85);
}

/* days-to-go speaks in the story's script voice — clearly distinct from
   the date and place above it */
.hero__countdown {
  margin-top: 1.1rem;
  font-family: var(--font-script);
  font-variant-numeric: lining-nums;
  font-size: clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  min-height: 1.2em; /* holds the line before JS fills it */
}

/* ---- tab nav ---- */

/* hamburger — phones only; desktop keeps the inline tab row */
.tabs-toggle {
  display: none;
  align-items: center;
  gap: 0.7rem;
  margin-top: 2.2rem;
  padding: 0.7rem 1.5rem;
  background: none;
  border: 1px solid rgb(240 233 220 / 0.5);
  border-radius: 999px;
  color: var(--c-cream);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-indent: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
}

.tabs-toggle .bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.tabs-toggle .bars span {
  width: 18px;
  height: 1px;
  background: currentColor;
}

/* the overlay script moves focus here on open — only keyboard users
   should see the ring for it */
.tabs__close:focus:not(:focus-visible) {
  outline: none;
}

.tabs__close {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 12px;
  background: none;
  border: 0;
  color: var(--c-cream);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 30px);
  margin-top: 2.4rem;
  padding: 0 16px;
}

.tabs a {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: rgb(240 233 220 / 0.75);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}

.tabs a:hover {
  color: var(--c-cream);
}

.tabs a.is-current {
  color: var(--c-cream);
  border-bottom-color: currentColor;
}

/* ---- Tier C's chapter list ----

   In Tier A the film IS the navigation: you reach a chapter by scrolling to
   it, and seven more links in the production overlay would be a design change
   nobody asked for. In Tier C the pins are gone and, before this, nothing was
   focusable between "skip story" and the landing.

   Everything but `display` is declared once, unconditionally, so the class
   twin and the media original below are a single declaration each and cannot
   drift. The colours are the ones `.tabs a` already uses — measured 4.89:1 for
   the label against the overlay green — not new ones. */
.tabs__chapters {
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: clamp(10px, 1.8vw, 22px);
  width: 100%;
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgb(240 233 220 / 0.25);
}

.tabs__chapters-label {
  width: 100%;
  margin-bottom: 0.4rem;
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: rgb(240 233 220 / 0.75);
}

/* Class twin of the @media (prefers-reduced-motion: reduce) rule below.
   A URL parameter cannot trigger a media query; ?portal=1&motion=off sets
   html.static (js/option4.js). Edit both or neither. */
html.static .tabs__chapters {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .tabs__chapters {
    display: flex;
  }
}

/* ---- the gallery strip — Option Three's drift, frames only ---- */

.gallery {
  margin-top: clamp(2.5rem, 7vh, 5rem);
  overflow: clip;
  /* room for the drop shadows to fade out fully — clipping them mid-blur
     draws a hard line against the green */
  padding: 2.5rem 0 4.5rem;
}

.gallery__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
  width: max-content;
  animation: gallery-drift 70s linear infinite;
  will-change: transform;
}

.gallery:hover .gallery__track {
  animation-play-state: paused;
}

@keyframes gallery-drift {
  to {
    transform: translateX(-50%);
  }
}

/* frameless, aligned — the photograph is the object */
.print {
  flex: none;
  border-radius: 4px;
  /* soft, fully-faded falloff — no hard edge against the ground */
  box-shadow: 0 16px 44px rgb(8 30 22 / 0.24);
}

.print picture {
  display: block;
  height: 46vh;
  max-height: 460px;
}

.print img {
  height: 100%;
  width: auto;
  max-width: none;
  display: block;
  border-radius: 4px;
}

/* ---- the schedule — timeline ---- */

.schedule {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(3rem, 8vh, 6rem) 32px clamp(4rem, 10vh, 7rem);
}

.script-h {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.4rem, 4.5vw, 3.6rem);
  color: var(--c-cream);
  text-align: center;
}

.schedule__date {
  margin-top: 0.8rem;
  text-align: center;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-indent: 0.14em; /* half the tracking — trailing space biases the line box */
  text-transform: uppercase;
  color: rgb(240 233 220 / 0.85);
}

/* placeholder chips must not inherit tracking/uppercase — otherwise the
   stacked amber marks render at different widths and read as off-centre */
.timeline mark.is-placeholder {
  letter-spacing: normal;
  text-transform: none;
}

/* centred timeline: dot above each stop, a short spine between stops */
.timeline {
  position: relative;
  list-style: none;
  max-width: 30rem;
  margin: 3rem auto 0;
  padding: 0;
  text-align: center;
}

.timeline__stop {
  position: relative;
}

.timeline__stop + .timeline__stop {
  margin-top: 2.6rem;
}

/* the stop marker */
.timeline__stop::before {
  content: '';
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  border: 1px solid var(--c-cream);
  background: #135442;
}

/* the connecting spine, between one stop's text and the next stop's dot */
.timeline__stop + .timeline__stop::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -2.3rem;
  height: 2rem;
  width: 1px;
  transform: translateX(-50%);
  background: rgb(240 233 220 / 0.45);
}

/* stop headings speak in the same script voice as "The schedule" */
.timeline__stop h3 {
  font-family: var(--font-script);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1.15;
  color: var(--c-cream);
}

.timeline__place {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgb(240 233 220 / 0.85);
}

.timeline__time {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-variant-numeric: lining-nums;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgb(240 233 220 / 0.7);
}

/* the wordmark hands over to the landing's own names */
.wordmark--gone .wordmark__cta {
  pointer-events: none;
}

/* Over the film the wordmark keeps its difference blend (dark on light
   grounds, light on dark). The blend arithmetic cannot reach warm ivory
   over the landing green — the channel sums exceed 255 — so the moment
   the landing takes over (the same trigger that retires the wordmark),
   it switches to plain ivory instead. */
.wordmark {
  color: #e3fef0;
}

.wordmark--gone {
  mix-blend-mode: normal;
  color: var(--c-cream);
}

/* ---- Tier C: the wordmark leaves the blend ----

   `.wordmark--gone` is toggled ONLY by the ScrollTrigger at js/option4.js:231,
   and Tier C creates zero triggers — so in Tier C the blend never retires and
   does difference arithmetic over every pixel of the static page.

   Turning the blend off is half the fix. The other half is that a FIXED band
   with one colour has to read against every ground it floats over, and after
   the per-chapter grounds in film.css there is no such colour: --c-umber
   measures 8.31:1 on the ivory body and 1.8:1 on --c-night; --c-amber is
   6.5:1 on night and 2.5:1 on ivory. So the header joins the rest of the
   static stack in normal flow — which is also what stops it riding over ten
   thousand pixels — and takes --c-umber, the colour the four light clauses
   already use.

   `position: relative`, not `static`: it keeps the header above `.pigments`
   (fixed, z-index 0) and keeps `.wordmark__cta::after`'s -14px tap pad
   anchored to the link rather than stretched across the whole header.

   This block lives here, not in film.css, because `.wordmark { color: #e3fef0 }`
   above is what it has to beat, and a same-specificity rule in the earlier
   file would lose the cascade on the media-query path.

   Class twin + media original. Edit both or neither. */
html.static .wordmark {
  position: relative;
  mix-blend-mode: normal;
  color: var(--c-umber);
  flex-direction: column;
  gap: var(--space-1);
}

/* film.css's own max-width:767px rule floats this fixed at the bottom of the
   screen. In the static stack it belongs at the top of the document, where a
   skip link belongs. `pointer-events: none` is deliberately NOT copied from
   `.wordmark--gone .wordmark__cta` — that would remove the only focusable
   element in the whole film. */
html.static .wordmark__cta {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  translate: none;
}

@media (prefers-reduced-motion: reduce) {
  .wordmark {
    position: relative;
    mix-blend-mode: normal;
    color: var(--c-umber);
    flex-direction: column;
    gap: var(--space-1);
  }

  .wordmark__cta {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    translate: none;
  }
}

/* ---- small screens ---- */

@media (max-width: 720px) {
  /* film.css left-aligns the wordmark on small screens; keep it centred
     here so the title morph starts exactly where it lands */
  .wordmark {
    justify-content: center;
  }

  .print picture {
    height: 34vh;
  }

  /* tabs collapse into the hamburger: full-screen overlay menu.
     The button floats fixed at the top left — but only once the landing
     has taken over; it must never ride above the story film. */
  .tabs-toggle {
    display: inline-flex;
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 14px;
    z-index: 55;
    margin: 0;
    padding: 0.6rem 1.2rem;
    background: rgb(19 84 66 / 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 300ms ease;
  }

  .tabs-toggle.is-here {
    opacity: 1;
    pointer-events: auto;
  }

  /* Tier C: `.static .tabs-toggle { opacity: 1 }` used to live in the rule
     above with no scroll condition, and Tier C has no triggers for `is-here`
     to ride — so the fixed button sat at top 14 / z-index 55 over the whole
     story film. STATE.md, commit 29202b1: "it must never ride above the story
     film."

     Solved in CSS, not with a scroll listener: `stCount === 0` is a tested
     property of this tier, and emulating `is-here` with a ScrollTrigger would
     break it. Out of the fixed layer, into normal flow inside `.hero` — which
     is where the desktop tab row already sits, and where the button is
     reachable the moment the landing is on screen. `.hero` is text-align:
     center, so the inline-flex button centres itself.

     Class twin + media original. Edit both or neither. */
  html.static .tabs-toggle {
    position: static;
    margin-top: 2.2rem;
    opacity: 1;
    pointer-events: auto;
  }

  .tabs {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 60;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    margin: 0;
    padding: 4.5rem 0;
    background: #135442;
    overflow-y: auto; /* landscape phones: the list is taller than the screen */
  }

  /* auto-margin centring: reads as centred on tall screens, degrades into
     a scrollable list on short ones (justify-content: center would clip
     the top rows out of reach) */
  .tabs a:first-of-type {
    margin-top: auto;
  }

  .tabs a:last-of-type {
    margin-bottom: auto;
  }

  .tabs.is-open {
    display: flex;
  }

  .tabs .tabs__close {
    display: block;
  }

  .tabs a {
    font-size: 1.35rem;
    padding: 0.55rem 1.5rem; /* ≥44px tap height */
  }

  /* the drift strip becomes a real swipeable shelf — JS keeps a gentle
     auto-drift going and yields the moment a finger lands on it */
  .gallery {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .gallery::-webkit-scrollbar {
    display: none;
  }

  .gallery__track {
    animation: none;
  }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  /* media original of the html.static .tabs-toggle twin above */
  .tabs-toggle {
    position: static;
    margin-top: 2.2rem;
    opacity: 1;
    pointer-events: auto;
  }
}

/* R3 */
@media (prefers-reduced-motion: reduce) {
  .gallery__track {
    animation: none;
  }

  .gallery {
    overflow-x: auto;
  }
}

/* R3 class twin of the @media (prefers-reduced-motion: reduce) block above.
   A URL parameter cannot trigger a media query; ?portal=1&motion=off sets
   html.static (js/option4.js). Edit both or neither.

   MEASURED before this twin existed: on ?portal=1&motion=off the DESKTOP
   gate still ran `gallery-drift 70s` with `overflow-x: clip` — a strip
   drifting under a visitor who asked for no motion, with no way to reach its
   end. The phone gate hides the defect, because the max-width:720px block
   already kills the same animation for unrelated reasons. */
html.static .gallery__track {
  animation: none;
}

html.static .gallery {
  overflow-x: auto;
}