/* ==========================================================================
   HISTORY PAGE – scroll-driven depth timeline
   Uses the site palette & type from style.css; history.js moves the camera.
   ========================================================================== */
/* Archive palette: warmer ivory, deeper green, restrained terracotta */
.hx,
.hx-end {
  --hx-ivory: #f4eee0;
  --hx-ivory-2: #faf6ec;     /* photo frames */
  --hx-green: #0a3d2d;
  --hx-terra: #b4532a;
  --hx-ink: #2b2a26;
  --hx-muted: #6b6457;
}

.hx {
  --nav-h: 76px;             /* updated by history.js from #mainNavbar */
  position: relative;
  height: 900vh;             /* real height set by history.js */
  background-color: var(--hx-ivory);
}

.hx-stage {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
  /* A soft lime glow behind the pictures, a lifted-cream light top-left,
     and a faint dot grain over the whole stage */
  /* Paper grain (fractal noise, warm brown, very low alpha), a warm glow behind
     the pictures and a lifted light behind the copy */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .36  0 0 0 0 .28  0 0 0 0 .17  0 0 0 .11 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(38% 52% at 72% 56%, rgba(214, 160, 105, .16), rgba(214, 160, 105, 0) 70%),
    radial-gradient(45% 60% at 18% 30%, rgba(250, 246, 236, .9), rgba(250, 246, 236, 0) 70%),
    var(--hx-ivory);
}

/* No stacking context here: history.js gives every item a z-index by depth,
   so nearer items always cover farther ones across both layers. */
.hx-world {
  position: absolute;
  inset: 0;
}
.hx-world--front { pointer-events: none; }


.hx-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--w, 20vw) * 1.3);   /* scenes fill the frame like the reference */
  visibility: hidden;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}


/* --------------------------------------------------------------------------
   Copy & years (travel through the scene with the images)
   -------------------------------------------------------------------------- */
.hx-text { width: 38vw; }
.hx-text--intro { width: 48vw; }
.hx-text::before {               /* soft cream halo keeps copy legible over passing photos */
  content: "";
  position: absolute;
  inset: -3vw -4vw;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(244, 238, 224, .94) 55%, rgba(244, 238, 224, 0));
}

.hx-kicker {
  font-family: var(--font-body);
  font-size: max(11px, .78vw);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hx-terra);
  margin-bottom: 1vw;
}

.hx-intro {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: max(48px, 7vw);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--hx-ink);
  margin-bottom: 1.4vw;
}
.hx-intro span { display: block; color: var(--hx-green); }

/* Title mix: a light italic serif lead-in over the bold rounded park name */
.hx-intro__lead {
  display: block;
  margin-bottom: .1em;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: .78em;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--hx-ink);
}

/* Heritage touch: one italic serif line */
.hx-serif {
  margin: -.4vw 0 1.6vw;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: max(20px, 1.7vw);
  line-height: 1.2;
  color: var(--hx-terra);
}

.hx-intro-sub {
  font-family: var(--font-body);
  font-size: max(15px, 1.15vw);
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   Cover (chapter 0): eyebrow pill · title · lead · three facts · scroll cue
   -------------------------------------------------------------------------- */
.hx-text--intro { width: 44vw; }
.hx-text--intro .hx-intro { font-size: max(44px, 5.4vw); margin-bottom: 1.6vw; }

/* Eyebrow: a short green rule, then the label; the year set apart in muted tone */
.hx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.4vw;
  font-family: var(--font-body);
  font-size: max(11px, .8vw);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hx-green);
}
.hx-eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: var(--hx-green);
}
.hx-eyebrow__est {
  padding-left: 12px;
  border-left: 1px solid rgba(6, 95, 70, .25);
  font-weight: 500;
  color: var(--color-muted);
}

.hx-lead {
  max-width: 34em;
  margin-bottom: 2.2vw;
  padding-left: 1.1vw;
  border-left: 2px solid var(--hx-terra);
  font-family: var(--font-body);
  font-size: max(15px, 1.12vw);
  line-height: 1.6;
  color: var(--hx-muted);
}

/* Three facts on one line, divided by hairlines */
.hx-facts {
  list-style: none;
  display: flex;
  gap: 2.2vw;
  margin-bottom: 2.4vw;
}
.hx-facts li + li {
  padding-left: 2.2vw;
  border-left: 1px solid rgba(6, 95, 70, .18);
}
.hx-facts strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: max(28px, 2.6vw);
  line-height: 1;
  color: var(--hx-green);
  font-variant-numeric: tabular-nums;
}
.hx-facts span {
  font-family: var(--font-body);
  font-size: max(11px, .72vw);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Scroll cue: a slowly turning ring of text around a green disc with a
   lime arrow that bobs downward */
/* Facts and the scroll badge share one row, the badge closing it */
.hx-facts-row {
  display: flex;
  align-items: center;
  gap: 3vw;
}
.hx-facts-row .hx-facts { margin-bottom: 0; }

.hx-cue {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: max(84px, 6.4vw);
  height: max(84px, 6.4vw);
}
.hx-cue__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: hxCueSpin 16s linear infinite;
}
.hx-cue__ring text {
  font-family: var(--font-body);
  font-size: 8.4px;
  font-weight: 700;
  text-transform: uppercase;             /* spacing comes from textLength: one full turn */
  fill: var(--hx-green);
}
.hx-cue__arrow {
  display: grid;
  place-items: center;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: var(--hx-green);
  box-shadow: 0 8px 18px -8px rgba(6, 95, 70, .7);
}
.hx-cue__arrow svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: var(--hx-ivory);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: hxCueBob 1.8s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes hxCueSpin { to { transform: rotate(360deg); } }
@keyframes hxCueBob {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .hx-cue__ring,
  .hx-cue__arrow svg { animation: none; }
}


.hx-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: max(32px, 4vw);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--hx-green);
  margin-bottom: 1.2vw;
}

/* Chapter marker above each slide's eyebrow: "CHAPTER 03 / 12" */
.hx-chapter {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: .7vw;
  font-family: var(--font-body);
  font-size: max(10px, .62vw);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hx-green);
}
.hx-chapter span { font-weight: 500; color: var(--hx-muted); }

/* Printed-archive divider between title and body: rule · diamond · rule */
.hx-ornament {
  position: relative;
  display: block;
  width: 72px;
  height: 9px;
  margin: 0 0 1.1vw;
  background: linear-gradient(var(--hx-terra), var(--hx-terra)) left center / 28px 1px no-repeat,
              linear-gradient(var(--hx-terra), var(--hx-terra)) right center / 28px 1px no-repeat;
}
.hx-ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--hx-terra);
  transform: translate(-50%, -50%) rotate(45deg);
}

.hx-body {
  font-family: var(--font-body);
  font-size: max(16px, 1.2vw);
  line-height: 1.7;
  color: var(--hx-muted);
}

.hx-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6vw 2.4vw;
}
.hx-stats strong {
  display: block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: max(36px, 3.8vw);
  line-height: 1;
  color: var(--hx-green);
  font-variant-numeric: tabular-nums;
}
.hx-stats span {
  font-family: var(--font-body);
  font-size: max(12px, .85vw);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.hx-year {
  width: auto;
  white-space: nowrap;
  font-family: var(--font-heading);       /* bold rounded numerals */
  font-weight: 700;
  font-size: 19vw;
  line-height: .8;
  letter-spacing: -.03em;
  color: rgba(10, 61, 45, .06);          /* solid fill, very faint: a watermark */
  mix-blend-mode: multiply;
  pointer-events: none;
  font-variant-numeric: tabular-nums;   /* steady width while the year counts */
}

/* Rolling drums, like a fairground counter: each digit is a window onto a 0–9 strip */
.hx-reels { display: inline-flex; }
.hx-drum {
  display: inline-block;
  height: 1em;
  line-height: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.hx-strip {
  display: flex;
  flex-direction: column;
  text-shadow: none;                     /* no smear: stacked shadows would darken the watermark */
}
.hx-strip > span { display: block; height: 1em; text-align: center; }
.hx-today { display: none; line-height: 1; }
.hx-year.is-today .hx-reels { display: none; }
.hx-year.is-today .hx-today { display: inline; }

/* --------------------------------------------------------------------------
   Archive objects
   -------------------------------------------------------------------------- */
/* Archival print: warm ivory mount with a thin double rule, a slight −2° tilt
   (the individual `rotate` property composes with history.js's transform),
   and a soft, low shadow */
.hx-photo {
  margin: 0;
  padding: .9vw .9vw 0;
  rotate: -2deg;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4  0 0 0 0 .32  0 0 0 0 .2  0 0 0 .07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    var(--hx-ivory-2);
  border: 1px solid rgba(90, 70, 40, .22);
  outline: 1px solid rgba(90, 70, 40, .14);
  outline-offset: -6px;
  border-radius: 2px;
  box-shadow: 0 .9vw 2.2vw -1vw rgba(70, 50, 25, .35), 0 1px 2px rgba(70, 50, 25, .12);
}
.hx-photo img { width: 100%; height: auto; display: block; border-radius: 1px; }
.hx-photo figcaption {
  padding: .6vw .1vw .8vw;
  font-family: var(--font-body);
  font-size: max(10px, .68vw);
  font-weight: 500;
  line-height: 1.4;
  color: var(--hx-muted);
}
/* Archive line: plate number · place · date */
.hx-meta {
  display: block;
  margin-top: 2px;
  font-size: max(8.5px, .56vw);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(107, 100, 87, .75);
}
.hx-photo:not(:has(figcaption)) { padding-bottom: .9vw; }

.hx-cutout { height: auto; mix-blend-mode: multiply; }

.hx-postcard {
  height: auto;
  border-radius: 3px;
  box-shadow: 0 1vw 2.4vw rgba(18, 24, 21, .18);
}


/* Postage stamp with perforated edge */
.hx-stamp {
  --r: max(4px, .3vw);
  margin: 0;
  padding: calc(var(--r) * 2.4);
  background: var(--color-white);
  -webkit-mask:
    radial-gradient(var(--r), #0000 98%, #000) round calc(var(--r) * -1.5) calc(var(--r) * -1.5) / calc(var(--r) * 3) calc(var(--r) * 3),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - var(--r) * 3) calc(100% - var(--r) * 3);
          mask:
    radial-gradient(var(--r), #0000 98%, #000) round calc(var(--r) * -1.5) calc(var(--r) * -1.5) / calc(var(--r) * 3) calc(var(--r) * 3),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - var(--r) * 3) calc(100% - var(--r) * 3);
}
.hx-stamp img { width: 100%; height: auto; display: block; }


/* --------------------------------------------------------------------------
   Cinematic frame: fills the margins around each scene. Everything is faint,
   decorative, and fades with the rail (--rail) on the cover and the ending.
   --progress (0–1, from history.js) drives the spine fill, the seal's turn
   and the marquee's drift.
   -------------------------------------------------------------------------- */
.hx-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--rail, 1);
}

/* Left: film spine with the chapter label running down it */
.hx-spine {
  position: absolute;
  left: 2.4vw;
  top: 12%;
  bottom: 12%;
  display: flex;
  gap: 14px;
}
.hx-spine__track {
  position: relative;
  width: 1px;
  height: 100%;
  background: rgba(10, 61, 45, .14);
}
.hx-spine__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--hx-green), var(--hx-terra));
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
}
.hx-spine__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hx-green);
  opacity: .7;
  transition: opacity .22s ease, translate .45s cubic-bezier(.16, 1, .3, 1);
}

/* Top right: archive postmark that turns with the scroll */
.hx-seal {
  position: absolute;
  right: 8.5vw;
  top: 17%;                       /* clear of the header when it slides back in */
  display: grid;
  place-items: center;
  width: max(96px, 7.4vw);
  aspect-ratio: 1;
}
.hx-seal__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(180, 83, 42, .45);
  stroke-width: .8;
  transform: rotate(calc(var(--progress, 0) * 540deg));
}
.hx-seal__ring circle:last-of-type { stroke-dasharray: 2 3; }
.hx-seal__ring text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  fill: rgba(180, 83, 42, .75);
  stroke: none;
}
.hx-seal__year {
  font-family: var(--font-heading);
  font-size: max(17px, 1.3vw);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--hx-terra);
  transition: opacity .22s ease, translate .45s cubic-bezier(.16, 1, .3, 1);
}

/* Bottom right: location card */
.hx-coords {
  position: absolute;
  right: 8.5vw;
  bottom: 15%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-right: 12px;
  border-right: 2px solid var(--hx-terra);
}
.hx-coords__place {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: max(22px, 1.7vw);
  line-height: 1;
  color: var(--hx-green);
  transition: opacity .22s ease, translate .45s cubic-bezier(.16, 1, .3, 1);
}
.hx-coords__geo {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  color: var(--hx-muted);
  transition: opacity .22s ease, translate .45s cubic-bezier(.16, 1, .3, 1);
}

/* Bottom: credits marquee drifting sideways with the scroll */
.hx-marquee {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5%;
  overflow: hidden;
  white-space: nowrap;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hx-marquee span {
  display: inline-block;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: max(40px, 4.6vw);
  line-height: 1.1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(10, 61, 45, .16);
  transform: translateX(calc(var(--progress, 0) * -55%));
}

/* Chapter change: the old text dips out, the new one rises in */
.hx-frame .is-swapping { opacity: 0; translate: 0 6px; }
.hx-spine__label.is-swapping { translate: -6px 0; }

@media (max-width: 1024px) {
  .hx-seal, .hx-coords { display: none; }
}
@media (max-width: 768px) {
  .hx-frame { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-seal__ring, .hx-marquee span { transform: none; }
  .hx-frame * { transition: none; }
}

/* --------------------------------------------------------------------------
   Year rail: progress through the story, and jump to any year
   -------------------------------------------------------------------------- */
.hx-rail {
  position: absolute;
  right: 2.2vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  opacity: var(--rail, 1);
  visibility: visible;
}
.hx[style*="--rail: 0.000"] .hx-rail { visibility: hidden; }
.hx-rail ol {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hx-rail ol::before,
.hx-rail ol::after {                 /* hairline track, and how far along the story we are */
  content: "";
  position: absolute;
  right: 5px;
  top: 10px;
  width: 1px;
  height: calc(100% - 20px);
  background: rgba(10, 61, 45, .12);
  transform-origin: top;
}
.hx-rail ol::after {
  background: var(--hx-green);
  transform: scaleY(var(--progress, 0));
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.hx-rail button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 3px 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
  color: var(--hx-muted);              /* inactive years: readable, not faded out */
  transition: color .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1);
}
.hx-rail button::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hx-ivory);
  border: 1px solid rgba(10, 61, 45, .35);
  transition: transform .45s cubic-bezier(.16, 1, .3, 1), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* Chapter title slides in beside the year on hover */
.hx-rail button::before {
  content: attr(data-title);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  max-width: 260px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: var(--hx-green);
  color: var(--hx-ivory);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 8px 18px -10px rgba(10, 61, 45, .7);
  opacity: 0;
  transform: translate(6px, -50%);
  pointer-events: none;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.hx-rail button:hover::before,
.hx-rail button:focus-visible::before { opacity: 1; transform: translate(0, -50%); }

/* Milestones: terracotta ring */
.hx-rail button.is-milestone { color: var(--hx-terra); }
.hx-rail button.is-milestone::after { border-color: var(--hx-terra); box-shadow: 0 0 0 3px rgba(180, 83, 42, .14); }

/* Hover: terracotta */
.hx-rail button:hover,
.hx-rail button:focus-visible { color: var(--hx-terra); transform: translateX(-3px); }
.hx-rail button:hover::after { border-color: var(--hx-terra); background: var(--hx-terra); }

/* Active year: solid forest-green dot, bolder label, eased in */
.hx-rail button[aria-current="step"] { color: var(--hx-green); font-weight: 800; transform: translateX(-4px); }
.hx-rail button[aria-current="step"]::after {
  background: var(--hx-green);
  border-color: var(--hx-green);
  box-shadow: 0 0 0 4px rgba(10, 61, 45, .14);
  transform: scale(1.35);
}
.hx-rail button:focus-visible { outline: 2px solid var(--hx-terra); outline-offset: 3px; border-radius: 4px; }

/* Final chapter: wider copy so the title sits on two lines */
.hx-text[data-ch="12"] { width: 46vw; }
.hx-text[data-ch="12"] .hx-stats { max-width: 38vw; }

/* "Today" is a word, not four digits: smaller so it stays a watermark */
.hx-year.is-today { font-size: 13vw; }

/* Alignment: every dot on one vertical line, the track through their centres.
   No sideways shifts on hover/active (they broke the column). */
.hx-rail ol { align-items: stretch; }
.hx-rail button { width: 100%; transform: none !important; }
.hx-rail button::after { flex: none; width: 9px; height: 9px; box-sizing: border-box; }
.hx-rail ol::before,
.hx-rail ol::after { right: 4px; }

/* Keyboard users can skip past the whole timeline */
.hx-skip {
  position: absolute;
  left: 16px;
  top: calc(var(--nav-h) + 12px);
  z-index: 9500;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--hx-green);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  transform: translateY(-200%);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}
.hx-skip:focus { position: fixed; transform: none; opacity: 1; }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.hx-end {
  padding: 120px 0 90px;
  text-align: center;
  background-color: var(--hx-ivory);
}
.hx-end__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.5vw, 4rem);
  line-height: 1.05;
  color: var(--color-green-dark);
  margin-bottom: 32px;
}
.hx-end__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hx-btn-outline {
  border: 1.5px solid var(--hx-green);
  color: var(--hx-green);
}
.hx-btn-outline:hover { background: var(--hx-green); color: var(--color-white); }

.hx-credits {
  max-width: 760px;
  margin: 70px auto 0;
  text-align: left;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-muted);
}
.hx-credits summary { cursor: pointer; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.hx-credits ul { margin: 14px 0 0 18px; display: grid; gap: 6px; }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hx-item { width: calc(var(--w, 20vw) * 1.45); }
  .hx-text { width: calc(100vw - 40px); }
  .hx-title { font-size: 26px; }
  .hx-body { font-size: 14.5px; line-height: 1.65; }
  .hx-intro,
  .hx-text--intro .hx-intro { font-size: 38px; }
  .hx-text--intro { width: calc(100vw - 40px); }
  .hx-facts { gap: 14px; }
  .hx-facts li + li { padding-left: 14px; }
  .hx-facts strong { font-size: 24px; }
  .hx-cue { display: none; }
  .hx-text--intro .hx-intro { font-size: 32px; margin-bottom: 12px; }
  .hx-eyebrow { margin-bottom: 12px; }
  .hx-lead { margin-bottom: 14px; padding-left: 10px; font-size: 13.5px; line-height: 1.5; }
  .hx-year { font-size: 28vw; }
  .hx-stats { gap: 16px; }
}

/* --------------------------------------------------------------------------
   Reduced motion: a calm, static timeline (history.js adds .hx--static)
   -------------------------------------------------------------------------- */
.hx--static { height: auto !important; padding: 40px 0 20px; }
.hx--static .hx-stage { position: static; height: auto; overflow: visible; }
.hx--static .hx-world {
  position: static;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 48px;
  width: 85%;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}
.hx--static .hx-item {
  position: static;
  visibility: visible;
  opacity: 1;
  transform: none;
  width: auto;
  max-width: 100%;
}
.hx--static .hx-text,
.hx--static .hx-year { grid-column: 1 / -1; }
.hx--static .hx-text::before { display: none; }
.hx--static .hx-year { font-size: clamp(3rem, 9vw, 7rem); margin-top: 48px; }
.hx--static .hx-rail { display: none; }

@media (max-width: 768px) {
  .hx-rail { display: none; }
  .hx--static .hx-world { grid-template-columns: 1fr; }
}