/* ==========================================================================
   Alderhouse — one-page site
   Cream-dominant · navy ink · gold display serif · tone-on-tone
   Storyboard build: hero gate → gateway draw → gallery + manifesto cards →
   seasons → proust → the world (globe) → closing → finale
   Previous demo preserved in /legacy
   ========================================================================== */

:root {
  --navy:  #0B1326;
  --cream: #FDFBF7;
  --white: #FFFFFF;
  --gold:  #C5A059;
  --paper: #FAF6ED;

  --ink:        rgba(11, 19, 38, 0.84);
  --ink-strong: rgba(11, 19, 38, 0.92);
  --ink-soft:   rgba(11, 19, 38, 0.58);
  --ink-faint:  rgba(11, 19, 38, 0.38);
  --hairline:   rgba(11, 19, 38, 0.14);
  --cream-soft: rgba(253, 251, 247, 0.88);
  --gold-soft:  rgba(197, 160, 89, 0.95);

  --font-label: "neue-haas-grotesk-text", "Helvetica Neue", Arial, sans-serif;
  --font-sans-display: "neue-haas-grotesk-display", "Helvetica Neue", Arial, sans-serif;
  --font-display: "freight-big-pro", "Iowan Old Style", Georgia, serif;
  --font-serif:   "freight-text-pro", "Iowan Old Style", Georgia, serif;
  --font-body:    "freight-text-pro", "Iowan Old Style", Georgia, serif;
  --font-scrawl:  "viktorie", "Bradley Hand", "Segoe Script", cursive;

  --size-hero:      clamp(3rem, 8.2vw, 7rem);
  --size-statement: clamp(2.4rem, 5.6vw, 4.6rem);
  --size-passage:   clamp(1.5rem, 2.8vw, 2.25rem);
  --size-quote:     clamp(1.7rem, 3.4vw, 2.8rem);
  --size-body:      clamp(1.0625rem, 1.35vw, 1.1875rem);
  --size-label:     0.6875rem;

  --ease-out: cubic-bezier(0.22, 0.61, 0.21, 1);
}

/* --- Reset / base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html.gated, html.gated body { overflow: hidden; height: 100%; }

body {
  background: var(--navy);
  transition: background-color 1.6s ease;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, canvas { display: block; max-width: 100%; }
em { font-style: italic; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.frame {
  width: min(100% - clamp(3rem, 12vw, 10rem), 78rem);
  margin-inline: auto;
}

body[data-bg="navy"] { background-color: var(--navy); }
body[data-bg="cream"] { background-color: var(--cream); }
body[data-bg="white"] { background-color: var(--white); }

/* --- Shared pieces ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 1.7s var(--ease-out) var(--d, 0s),
    transform 1.7s var(--ease-out) var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

.statement {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--size-statement);
  line-height: 1.12;
  letter-spacing: 0.005em;
  max-width: 26ch;
  color: var(--navy);
}
.statement em { font-style: italic; font-weight: 600; color: inherit; }

/* ==========================================================================
   Masthead
   ========================================================================== */
.masthead {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding-top: clamp(1.75rem, 4vh, 3rem);
}
.masthead__brand img { height: clamp(34px, 4.2vw, 54px); width: auto; }

/* ==========================================================================
   Hero — static title above the inset image stage
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  background: var(--navy);
  color: var(--cream-soft);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  left: clamp(1.25rem, 14vw, 16rem);
  right: 0;
  top: clamp(9rem, 30vh, 17rem);
  bottom: 0;
  overflow: hidden;
}
.hero__media--full { inset: 0; left: 0; top: 0; }
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: saturate(0.8);
}
.hero__still {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: saturate(0.72) brightness(0.9);
  transition: opacity 2.2s ease;
}
.hero__still.is-top { opacity: 0.6; }
/* the outline drawing: crisp line art, contained, undimmed */
.hero__still--outline {
  object-fit: contain;
  object-position: right bottom;
  filter: none;
  padding: clamp(1rem, 4vw, 4rem);
}
.hero__still--outline.is-top { opacity: 0.92; }
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
      rgba(11, 19, 38, 0.55) 0%,
      rgba(11, 19, 38, 0.15) 40%,
      rgba(11, 19, 38, 0.45) 100%);
}

.hero {
  display: flex;
  align-items: center;
}
.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vh, 3rem);
}

.hero__headline {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-hero);
  line-height: 1.02;
  letter-spacing: 0.008em;
  color: var(--white);
}

.enter, .invite {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  font-family: var(--font-label);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 0.875rem 0.25rem 0.875rem 0;
}
.enter__arrow { transition: transform 0.7s var(--ease-out); }
.enter:hover .enter__arrow, .invite:hover .enter__arrow,
.enter:focus-visible .enter__arrow, .invite:focus-visible .enter__arrow { transform: translateX(8px); }
.enter:focus-visible, .invite:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }

/* ==========================================================================
   Gateway — white, the mark draws itself
   ========================================================================== */
.gateway {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--white);
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.gateway.is-on { opacity: 1; visibility: visible; transition: opacity 0.8s ease; }
.gateway.is-leaving { opacity: 0; transition: opacity 1.0s ease; }

.gateway__mark { width: min(38vh, 60vw); overflow: visible; }
.gateway__fill { opacity: 0; }
.gateway.is-filled .gateway__fill { opacity: 1; transition: opacity 0.8s ease; }
.gateway.is-filled .gateway__line { opacity: 0; transition: opacity 0.8s ease; }

.gateway__line--outer { stroke-dasharray: 3100; stroke-dashoffset: 3100; }
.gateway__line--left  { stroke-dasharray: 1800; stroke-dashoffset: 1800; }
.gateway__line--mid   { stroke-dasharray: 1900; stroke-dashoffset: 1900; }
.gateway.is-drawing .gateway__line--outer {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.3, 0, 0.25, 1);
  stroke-dashoffset: 0;
}
.gateway.is-drawing .gateway__line--left {
  transition: stroke-dashoffset 1.0s cubic-bezier(0.3, 0, 0.25, 1) 1.1s;
  stroke-dashoffset: 0;
}
/* the middle draws last */
.gateway.is-drawing .gateway__line--mid {
  transition: stroke-dashoffset 1.1s cubic-bezier(0.3, 0, 0.25, 1) 2.0s;
  stroke-dashoffset: 0;
}

/* ==========================================================================
   Opening — gallery reveal + stacked manifesto cards
   ========================================================================== */
.arrival, .standard {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(4rem, 8vh, 6rem);
}

.opening {
  position: relative;
  height: 390svh;
  color: var(--navy);
}
.opening__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.opening__cards {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.opening-card {
  position: absolute;
  width: min(64vw, 50rem);
  min-height: min(48svh, 26rem);
  padding: clamp(2.25rem, 4.5vw, 4rem);
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1px solid var(--hairline);
  box-shadow: 0 34px 70px -38px rgba(11, 19, 38, 0.55);
  opacity: 0;
  transform: translateY(110vh);
  will-change: transform, opacity;
}
.opening-card:nth-child(1) { z-index: 1; transform: translateY(26px) rotate(-0.65deg); }
.opening-card:nth-child(2) { z-index: 2; opacity: 1; }
.opening-card:nth-child(3) { z-index: 3; opacity: 1; }
.opening.is-live .opening-card:nth-child(1) {
  animation: opening-card-first 0.9s var(--ease-out) 1.35s both;
}
@keyframes opening-card-first {
  from { opacity: 0; transform: translateY(26px) rotate(-0.65deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-0.65deg); }
}
.opening-card__copy {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: calc(var(--size-statement) * 0.82);
  line-height: 1.12;
  letter-spacing: 0.005em;
  max-width: 24ch;
  text-align: center;
  text-wrap: balance;
  color: var(--navy);
}
.opening-card__copy em { font-style: italic; font-weight: 600; color: inherit; }

/* ==========================================================================
   Gallery — full-screen columns at different paces
   ========================================================================== */
.gallery {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: clamp(0.75rem, 1.6vw, 1.5rem);
  overflow: hidden;
}
.gallery__track {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
}
.gallery__col {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  will-change: transform;
}
.gallery__col:nth-child(2) { margin-top: clamp(3rem, 9vh, 7rem); }
.gallery__col:nth-child(3) { margin-top: clamp(-2rem, -4vh, -1rem); }
.gallery__col:nth-child(4) { margin-top: clamp(2rem, 6vh, 4.5rem); }
.gallery__col:nth-child(5) { margin-top: clamp(1rem, 3vh, 2.5rem); }
.gallery__col img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.96);
}
.opening__image {
  opacity: 0;
  transform: scale(0.985);
  transition:
    opacity 0.48s ease var(--gallery-delay, 0s),
    transform 0.65s var(--ease-out) var(--gallery-delay, 0s);
}
.opening.is-live .opening__image {
  opacity: 1;
  transform: none;
}
/* loose rhythm: landscapes and squares interleaved with the portraits */
.gallery__col:nth-child(odd) img:nth-child(2) { aspect-ratio: 3 / 2; }
.gallery__col:nth-child(even) img:nth-child(1) { aspect-ratio: 1 / 1; }
.gallery__col:nth-child(2) img:nth-child(3) { aspect-ratio: 3 / 2; }
.gallery__col:nth-child(3) img:nth-child(1) { aspect-ratio: 7 / 8; }
.gallery__col:nth-child(4) img:nth-child(3) { aspect-ratio: 1 / 1; }

/* ==========================================================================
   The life-line: one continuous line from "live." down the spine,
   with the seasons docking onto it as stations
   ========================================================================== */
.lifeline-wrap { position: relative; }
.lifeline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  /* no fade at the foot: the line runs crisp into the north pole
     of the world being born beneath it (motion-fx.js) */
}
.lifeline path {
  stroke: rgba(11, 19, 38, 0.75);
  transition: stroke 1.6s ease;   /* the line dissolves with the page */
}
body[data-bg="navy"] .lifeline path { stroke: rgba(253, 251, 247, 0.65); }

/* The journey begins at a single gold waypoint after the manifesto stack: a
   "you are here" that rhymes with the season nodes and the finale's gold
   handoff. It opens with one quiet expanding ring as the descent starts. */
.lifeline__origin {
  position: absolute;
  z-index: 4;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(197, 160, 89, 0.65);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.9s var(--ease-out);
  pointer-events: none;
}
.lifeline__origin.is-live { transform: translate(-50%, -50%) scale(1); }
.lifeline__origin::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  opacity: 0;
}
.lifeline__origin.is-live::after { animation: origin-ring 1.7s var(--ease-out) 0.25s; }
@keyframes origin-ring {
  0%   { transform: scale(0.35); opacity: 0.85; }
  100% { transform: scale(2.6);  opacity: 0; }
}

.seasons { color: var(--cream-soft); }

.seasons__flow {
  position: relative;
  z-index: 4;
  width: min(100% - clamp(3rem, 12vw, 10rem), 78rem);
  margin-inline: auto;
  padding-block: clamp(6rem, 14vh, 10rem);
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 10vh, 8rem);
}
/* a long quiet breath after the dissolve before the first station speaks */
.seasons__flow > .station:first-child { margin-top: clamp(8rem, 30vh, 16rem); }

.station {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(4rem, 10vw, 9rem);
  align-items: center;
  min-height: 58vh;
}
/* the node: added to the line as the station arrives */
.station::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(224, 196, 132, 0.95);
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.8);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.9s var(--ease-out) 0.3s;
}
.station.in::after { transform: translate(-50%, -50%) scale(1); }

.station__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--size-statement) * 0.82);
  line-height: 1.16;
  letter-spacing: 0.005em;
  max-width: 16ch;
}
.station__text em { font-style: italic; font-weight: 700; color: var(--white); }

/* alternating sides, text facing the spine */
.station[data-side="left"] .station__text  { grid-column: 1; justify-self: end; text-align: right; }
.station[data-side="left"] .station__print { grid-column: 2; justify-self: start; }
.station[data-side="right"] .station__text  { grid-column: 2; grid-row: 1; justify-self: start; text-align: left; }
.station[data-side="right"] .station__print { grid-column: 1; grid-row: 1; justify-self: end; }

/* formal matted prints — straight, quiet, album not snapshot */
.station__print {
  background: var(--paper);
  padding: 0.6rem 0.6rem 0.9rem;
  border: 1px solid rgba(253, 251, 247, 0.12);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.6);
  width: min(30vw, 21rem);
}
.station__print img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.8) brightness(0.94);
}

/* ==========================================================================
   The world — globe pinned scene
   ========================================================================== */
.world {
  position: relative;
  height: 2400vh;   /* the pin carries six Iceland pairings, a held note card,
                       the extended world-out reflection, and a calendar finale */
  color: var(--cream-soft);
}
.world__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.world__globe {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100svh;
  z-index: 1;   /* under all copy; over the body's navy */
}

.world__beats {
  position: relative;
  z-index: 2;   /* copy always reads above the wireframe */
  height: 100%;
  padding-inline: clamp(1.5rem, 5vw, 4rem);
}
.world__beat {
  position: absolute;
  top: 50%;
  /* the right rail: North America (and the Aspen dot) own the screen's
     left-centre, so the copy keeps clear of the little gold announcements */
  left: auto;
  right: clamp(2rem, 8vw, 8rem);
  transform: translateY(-50%);
  opacity: 0;
  max-width: 14ch;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--size-statement) * 0.88);
  line-height: 1.16;
  letter-spacing: 0.005em;
  will-change: opacity;
}
.world__beat em { font-style: italic; font-weight: 700; color: var(--white); }
.question-break { display: none; }
@media (min-width: 961px) {
  .question-break { display: block; }
}
.world__beat--center {
  --drift: 0vw;
  left: 50%;
  right: auto;
  width: min(24ch, 78vw);
  transform: translate(calc(-50% + var(--drift)), -50%);
  text-align: center;
  max-width: none;
}

/* Iceland stack: postcards shifting up the screen surface */
.icecards {
  position: absolute;
  right: clamp(2rem, 8vw, 10rem);
  top: 50%;
  width: min(44vw, 32rem);
  height: min(60svh, 30rem);
  transform: translateY(-50%);
  z-index: 2;   /* the photographs sit on top of the gold coastlines */
}
.icecard {
  position: absolute; inset: 0;
  background: var(--paper);
  padding: 0.6rem;
  border: 1px solid var(--hairline);
  box-shadow: 0 32px 60px -34px rgba(0, 0, 0, 0.65);
  transform: translateY(110%);
  opacity: 0;
  will-change: transform;
}
.icecard img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.8) contrast(0.95);
}
.icecard figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0.85rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.icecard--note {
  display: grid;
  place-items: center;
  padding: 2rem;
}
.icecard__scrawl {
  font-family: var(--font-scrawl);
  font-size: clamp(1.85rem, 3.4vw, 2.7rem);
  line-height: 1.5;
  color: var(--ink-strong);
  /* handwriting: a little tilt, uneven breathing room, ink pressure */
  transform: rotate(-2.5deg);
  letter-spacing: 0.015em;
  word-spacing: 0.12em;
  max-width: 16ch;
  text-align: left;
}
.icecard__scrawl em { font-style: normal; letter-spacing: 0.05em; }

/* captions live on the left rail, synced to the cards */
.icecaptions {
  position: absolute;
  left: clamp(2rem, 8vw, 8rem);
  top: 50%;
  transform: translateY(-50%);
  width: min(34vw, 24rem);
  z-index: 3;
}
.icecaptions p {
  position: absolute;
  left: 0; right: 0;
  transform: translateY(-50%);
  opacity: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--size-passage) * 1.05);
  line-height: 1.3;
  will-change: opacity;
}
.icecaptions em { font-style: italic; font-weight: 700; color: var(--white); }

/* postcard chips that settle onto the calendar */
.chips {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.chip {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  white-space: nowrap;
  background: var(--paper);
  color: var(--navy);
  border: 1px solid var(--hairline);
  padding: 0.5rem 0.9rem;
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6);
  will-change: left, top, opacity;
}
.chip i {
  font-style: normal;
  color: var(--ink-soft);
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  transition: max-width 0.9s var(--ease-out), max-height 0.9s var(--ease-out), opacity 0.9s var(--ease-out), margin-left 0.9s var(--ease-out);
}
.chip.is-placed i {
  max-width: 8em;
  opacity: 1;
  margin-left: 0.6em;
}
/* vertical connector down to the timeline, drawn on placement. Each pin runs
   from the chip's bottom edge exactly to the top of the ruler (bottom: 10%,
   34px tall): the row centre (--chip-row, set by motion-fx.js) plus half the
   chip's own height, subtracted from the ruler's top edge at 90svh - 34px. */
.chip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 1px;
  height: max(0px, calc(90svh - 34px - (var(--chip-row, 76) * 1svh) - 50%));
  background: rgba(253, 251, 247, 0.45);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.1s var(--ease-out) 0.25s;
}
.chip.is-placed::after { transform: scaleY(1); }

/* the calendar ruler */
.calendar {
  position: absolute;
  left: 6%; right: 6%;
  bottom: 10%;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 0;
  height: 34px;
  opacity: 0;
}
.calendar__tick {
  flex: 1;
  height: 10px;
  border-left: 1px solid rgba(253, 251, 247, 0.35);
}
.calendar__tick--year {
  height: 22px;
  border-left-color: rgba(253, 251, 247, 0.8);
  position: relative;
}
.calendar__tick--year::after {
  content: attr(data-year);
  position: absolute;
  left: 0.5rem;
  bottom: -1.4rem;
  font-family: var(--font-label);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  color: rgba(253, 251, 247, 0.7);
}

/* ==========================================================================
   Closing — cream
   ========================================================================== */
/* the descent: everything sits on the spine and steps DOWN in size —
   after ten screens of large serif, the last words are the smallest */
.arrival .frame, .standard .frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(2rem, 5vh, 3rem);
}
.statement--closing { max-width: 22ch; text-wrap: balance; }
/* The descent keeps the site's typographic voice at small sizes: Freight Big
   runs 300 only at statement scale — below ~2rem it takes 400 to hold the same
   optical colour, and display leading (≤1.35), never the body's 1.6. */
.arrival__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--size-passage) * 0.9);
  line-height: 1.35;
  letter-spacing: 0.005em;
  max-width: 32ch;
  text-wrap: balance;
  color: var(--navy);
}
.arrival__pair {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--size-passage) * 0.8);
  line-height: 1.35;
  letter-spacing: 0.005em;
  color: var(--navy);
}
.arrival__pair em { font-style: italic; font-weight: 600; color: inherit; }

.standard__setup {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(var(--size-passage) * 0.85);
  line-height: 1.35;          /* was inheriting the body's 1.6 */
  letter-spacing: 0.005em;
  max-width: 32ch;
  text-wrap: balance;
  color: var(--navy);
}
/* the punchline whispers: barely above body size, the line you lean in to hear */
.standard__punch {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-passage);
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--navy);
}
.standard__punch em { font-style: italic; font-weight: 600; color: inherit; }

/* the line returns as punctuation: a short tick drawing into each stop,
   the last one ending in the single gold node that hands over to the mark */
.descent {
  display: block;
  width: 1px;
  height: clamp(3.5rem, 11vh, 6.5rem);
  background: rgba(11, 19, 38, 0.35);
  position: relative;
}
.descent.reveal { transform: scaleY(0); transform-origin: top center; }
.descent.reveal.in { transform: scaleY(1); }
.descent--gold::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: var(--gold);
}

/* ==========================================================================
   Finale
   ========================================================================== */
.finale {
  /* icon keeps its size where the screen allows; the 1:4 ratio always holds */
  --mark-w: min(clamp(120px, 18vw, 210px), 22vw);
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(4rem, 8vh, 6rem);
}
.finale__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vh, 2rem);
}
.finale__mark {
  width: var(--mark-w);
  opacity: 0;
  will-change: transform, opacity;
}
/* the wordmark reads 4x the width of the icon */
.finale__wordmark {
  width: calc(var(--mark-w) * 4);
  height: auto;
}
/* the office line reads as the engraved subtitle of the wordmark lockup:
   present, not a whisper — navy ink, larger, widely tracked */
.finale__office {
  font-family: var(--font-label);
  font-size: calc(var(--size-label) * 1.2);
  font-weight: 500;
  letter-spacing: 0.5em;
  text-indent: 0.5em;           /* absorb the trailing track so it stays centred */
  text-transform: uppercase;
  color: var(--ink-strong);
  margin-top: 0.35rem;
}
/* the CTA is set apart from the identity lockup by the single rationed gold
   line of the page — a short hairline divider above it, never a highlight
   on the words themselves */
.finale .invite {
  position: relative;
  color: var(--navy);
  margin-top: clamp(2rem, 5vh, 3rem);
  transition: opacity 0.6s var(--ease-out);
}
.finale .invite::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * clamp(1rem, 2.5vh, 1.5rem));
  width: 2.25rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.7;
  transform: translateX(-50%);
}
/* overscroll at the end (Morgan, 2026-07-17): a gold hairline draws itself
   beneath the invitation — in from the left, out through the right — then
   the words stand unmarked again */
.finale .invite::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.45rem;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
}
.finale .invite.flash::after { animation: invite-underline 1.6s var(--ease-out); }
@keyframes invite-underline {
  0%   { transform: scaleX(0); transform-origin: left center; }
  45%  { transform: scaleX(1); transform-origin: left center; }
  55%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

/* ==========================================================================
   Invitation dialog
   ========================================================================== */
.invitation {
  border: 0;
  padding: 0;
  background: var(--navy);
  color: var(--cream-soft);
  max-width: min(90vw, 34rem);
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
}
/* the dialog is focused on open (to move the reader into it) — but it should
   never draw its own focus ring; Safari in particular paints a blue box */
.invitation:focus, .invitation:focus-visible { outline: none; }
.invitation[open] { animation: invitation-in 0.7s var(--ease-out); }
.invitation::backdrop {
  background: rgba(11, 19, 38, 0.55);
  animation: backdrop-in 0.7s ease;
}
@keyframes invitation-in {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.invitation__inner {
  padding: clamp(2.5rem, 6vw, 4rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.invitation__eyebrow {
  font-family: var(--font-label);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}
.invitation__copy { line-height: 1.7; }
.invitation__close {
  align-self: flex-start;
  font-family: var(--font-label);
  font-size: var(--size-label);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--cream);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 0.3rem;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* tablets keep the vertical gallery, one column narrower */
@media (min-width: 701px) and (max-width: 960px) {
  .gallery__track { grid-template-columns: repeat(3, 1fr); }
  .gallery__col:nth-child(n+4) { display: none; }
}
@media (max-width: 960px) {
  .opening-card { width: min(76vw, 42rem); }
  .world__beat { max-width: 12ch; }
  .world__beat--question { max-width: 18ch; }
  .icecards { right: 50%; transform: translate(50%, -50%); width: min(84vw, 30rem); }
}

@media (max-width: 960px) {
  .chip { font-size: 0.5625rem; padding: 0.4rem 0.6rem; letter-spacing: 0.12em; }
  /* the date drops to a second line — but until placement it must take NO
     height, or every chip floats over the globe as a half-empty box */
  .chip i { display: block; margin-left: 0; max-height: 0; }
  .chip.is-placed i { margin-left: 0; max-height: 1.5em; }
  .station__text { font-size: calc(var(--size-passage) * 1.05); max-width: 12ch; }
  .station__print { width: min(36vw, 15rem); }
  .station { column-gap: clamp(2.5rem, 10vw, 5rem); }
}

/* ---- Phones: the spreads that assume width collapse to single columns ---- */
@media (max-width: 700px) {
  .opening { height: 430svh; }
  .opening-card {
    width: min(82vw, 24rem);
    min-height: min(46svh, 23rem);
    padding: clamp(1.6rem, 6vw, 2.4rem) clamp(1.25rem, 5.5vw, 2rem);
  }
  .opening-card__copy {
    max-width: 18ch;
    font-size: clamp(1.65rem, 7.3vw, 2.45rem);
    line-height: 1.12;
  }

  /* the gallery becomes three RIBBONS: every photograph, in three stacked
     rows that drift horizontally at their own paces as the page scrolls —
     the sideways cousin of the desktop columns (rows built in main.js,
     driven in motion-fx.js) */
  .gallery {
    padding: clamp(1rem, 4vw, 1.5rem) 0;
  }
  .gallery__track { display: block; }   /* the desktop 5-column grid stands down */
  .gallery__row {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 2.4vw, 1rem);
    width: max-content;
    will-change: transform;
  }
  .gallery__row + .gallery__row { margin-top: clamp(0.5rem, 2.4vw, 1rem); }
  .gallery__row img {
    height: clamp(7.5rem, 34vw, 11rem);
    width: auto;
    flex: none;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    filter: saturate(0.82) brightness(0.96);
  }
  /* the desktop rhythm rules key off .gallery__col, which is gone here —
     re-interleave portraits, landscapes and squares along each row */
  .gallery__row img:nth-child(2n) { aspect-ratio: 3 / 2; }
  .gallery__row img:nth-child(3n) { aspect-ratio: 1 / 1; }

  /* a bolder, larger hero on small screens */
  .hero__headline { font-size: clamp(3.5rem, 13.5vw, 4.75rem); font-weight: 500; }

  /* Seasons: the alternating spread is too cramped to read on a phone, so each
     station becomes a single timeline ENTRY — the line runs as a left rail
     (JS draws it at x=28 to match), its gold node beside the text, and copy +
     print sit to the right so nothing reads across the line. */
  .seasons__flow {
    width: 100%;
    padding-left: 3.5rem;         /* clears the rail (28px) with air to spare */
    padding-right: 1.25rem;
    padding-block: clamp(4rem, 10vh, 7rem);
    gap: clamp(4rem, 10vh, 8rem);
  }
  .seasons__flow > .station:first-child { margin-top: clamp(3rem, 14vh, 7rem); }
  /* Each entry claims most of a screen and rides its middle — as on desktop,
     you scroll from one to the next, one dramatic beat at a time. */
  .station {
    grid-template-columns: 1fr;
    min-height: 60svh;
    align-content: center;
    row-gap: 1.75rem;
    justify-items: start;
    text-align: left;
  }
  .station[data-side] .station__text,
  .station[data-side] .station__print {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }
  /* larger, airier type — each entry reads with weight */
  .station__text {
    position: relative;
    max-width: none;
    font-size: clamp(1.9rem, 5.4vw, 2.4rem);
    line-height: 1.3;
    letter-spacing: 0.01em;
  }
  .station__print { width: min(100%, 20rem); }   /* 100% = the rail-padded column; 82vw overflowed it */
  /* the node rides the rail beside the text's first line — anchored to the
     text (not the tall centred station box) so it always lines up */
  .station::after { display: none; }
  .station__text::before {
    content: "";
    position: absolute;
    left: -1.75rem;               /* reach back from the padded content to x=28 */
    top: 0.62em;                  /* the first line's middle */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(224, 196, 132, 0.95);
    box-shadow: 0 0 12px rgba(197, 160, 89, 0.8);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.9s var(--ease-out) 0.3s;
  }
  .station.in .station__text::before { transform: translate(-50%, -50%) scale(1); }

  /* The world: the postcard stack centres, so its captions can no longer sit
     on the left rail (they'd hide behind the cards). They lift to the top. */
  .icecards { top: 55%; height: min(48svh, 20rem); width: min(84vw, 22rem); }
  .icecaptions {
    left: 50%;
    right: auto;
    top: clamp(3rem, 11svh, 5.5rem);
    transform: translateX(-50%);
    width: min(88vw, 26rem);
    text-align: center;
  }
  .icecaptions p {
    left: 0;
    right: 0;
    top: 0;
    transform: none;
    text-align: center;
    font-size: calc(var(--size-passage) * 0.95);
  }
  /* every beat sits ABOVE the world on a phone — the globe rides lower
     (cyN 0.58 in motion-fx.js) so copy and sphere never fight */
  .world__beat {
    max-width: none;
    width: min(88vw, 26ch);
    left: 50%;
    right: auto;
    top: clamp(4rem, 12svh, 7.5rem);
    transform: translate(-50%, 0);
    text-align: center;
    font-size: calc(var(--size-statement) * 0.72);
  }
  .world__beat--center {
    width: min(88vw, 26ch);
    top: clamp(4rem, 12svh, 7.5rem);
    transform: translate(-50%, 0);
  }
}