/* The Descent (frame 2 desktop, frame 4 right phone).
   Layers, back to front: sticky painted plate (far) -> haze -> rock bands (near) -> shade
   -> molten threads (SVG) -> markers, plaques, Did You Know -> embers -> gauge -> panel. */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.page--timeline {
  --gauge-w: clamp(170px, 15vw, 250px);
  --medal: 72px;
  --gauge-line-x: 46px;
  --node-spacing: 122px;
  background: var(--void);
}

/* The shared header floats over the surface stratum, as in frame 2. */
.page--timeline .site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 0;
  background: linear-gradient(180deg, rgb(7 6 5 / 82%) 0%, rgb(7 6 5 / 46%) 62%, transparent 100%);
  box-shadow: none;
}

.descent {
  position: relative;
  display: block;
  min-height: 100vh;
  /* QA fix: the blurred label pads (.marker__label::before) and the glow of the threads poke 15px past the right
     edge on a phone. body is overflow-x:hidden, but a real phone browser still widens its layout viewport to fit
     the overflow (innerWidth 405 on a 390 screen), so the page scrolled sideways and every fixed panel was laid out
     15-49px too wide, its close button off screen. clip (not hidden) keeps position:sticky on the strata working. */
  overflow-x: clip;
}

.descent__column {
  position: relative;
}

.descent__strata {
  position: relative;
}

.descent__status:empty {
  display: none;
}

.descent__status,
.descent__noscript {
  position: fixed;
  z-index: 60;
  top: 50%;
  left: 50%;
  max-width: 34rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--hairline);
  color: var(--parchment);
  background: var(--panel-surface);
  text-align: center;
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------ strata */

.stratum {
  position: relative;
  min-height: 100vh;
}

.stratum__stage {
  position: sticky;
  z-index: 0;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--void);
}

.stratum__far,
.stratum__near {
  position: absolute;
  inset: -7% 0;
  will-change: transform;
}

.stratum__far img,
.stratum__near img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Bug fix (Sonnet, fix pass 2): on a tall, narrow desktop window (e.g. 1070x1741) the
   stage box is far taller, relative to its width, than the 1672x941 plates themselves.
   object-fit: cover always picks the LARGER of the two fit scales so nothing gaps; for a
   box this much taller than it is wide, that is always the height-driven scale, which
   lands exactly on the box height with zero vertical crop (just heavy, centred horizontal
   cropping) — so, by itself, cover already shows the plate's full vertical range (sky down
   to the lit world) end to end, and object-position's vertical component has no slack left
   to act on. The opening screen only shows the sky in practice because GSAP's scroll
   parallax (see buildParallax in descent.js) then zooms and pans that already-tall render
   by a few percent, and a few percent of an unusually tall box is a much bigger pixel swing
   than the same percentage on a normal 16:9-ish window — easily enough, on a window this
   shape, to carry the lit lower band most of the way out of frame before the user has
   scrolled. Forcing a bit of real vertical crop ourselves first (scale the image up beyond
   cover's minimum, then re-centre the crop low with transform-origin) guarantees the lit
   band is already on screen at rest, before any scroll-driven parallax runs, on exactly the
   narrow-but-tall shapes where cover alone cannot do that. Scoped to desktop widths only;
   mobile keeps its own tuned object-position above. */
@media (min-width: 761px) and (max-aspect-ratio: 3/4) {
  .stratum__far img,
  .stratum__near img {
    transform: scale(1.32);
    transform-origin: 50% 64%;
  }
}

.stratum__far img {
  filter: saturate(1.06) contrast(1.04);
}

/* Near layer = the same plate, masked to its rock bands and darkened: the painted
   world recedes behind the rock frame as you scroll. */
.stratum__near {
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 calc(var(--rock-top) + 6%),
    transparent calc(var(--rock-top) + 11%),
    transparent calc(var(--rock-bottom) + 2%),
    #000 calc(var(--rock-bottom) + 9%),
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 calc(var(--rock-top) + 6%),
    transparent calc(var(--rock-top) + 11%),
    transparent calc(var(--rock-bottom) + 2%),
    #000 calc(var(--rock-bottom) + 9%),
    #000 100%
  );
}

.stratum__near img {
  filter: brightness(0.72) contrast(1.12) saturate(0.9);
}

.stratum__haze {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 42% 30% at 40% 52%, rgb(255 170 80 / 13%), transparent 70%),
    radial-gradient(ellipse 30% 22% at 72% 44%, rgb(255 140 60 / 9%), transparent 70%);
  mix-blend-mode: screen;
  animation: haze-breathe 7s ease-in-out infinite alternate;
}

@keyframes haze-breathe {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

.stratum__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(7 6 5 / 72%) 0, rgb(7 6 5 / 30%) calc(var(--gauge-w) + 20px), transparent calc(var(--gauge-w) + 180px)),
    radial-gradient(ellipse 85% 75% at 55% 50%, transparent 55%, rgb(7 6 5 / 58%) 100%);
}

.stratum__content {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
}

.stratum__content > * {
  pointer-events: auto;
}

/* Rough rock seam where two strata meet, with a faint ember crack. */
.stratum__seam {
  position: absolute;
  top: -80px;
  right: 0;
  left: 0;
  height: 160px;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent, rgb(7 6 5 / 78%) 38%, rgb(7 6 5 / 82%) 58%, transparent);
}

.stratum__seam svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 26px;
  transform: translateY(-50%);
  overflow: visible;
}

.stratum__seam path {
  fill: none;
  stroke: #ff9a3c;
  stroke-width: 1.2;
  opacity: 0.55;
  filter: drop-shadow(0 0 3px #ff8a2a) drop-shadow(0 0 9px rgb(255 120 40 / 70%));
  vector-effect: non-scaling-stroke;
}

/* Era header: a carved plaque with the era's own title from the data. */
.stratum__plaque {
  position: absolute;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 2 * var(--gauge-w));
  padding: 14px 48px 13px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(90deg, transparent, rgb(20 14 9 / 92%) 12%, rgb(20 14 9 / 92%) 88%, transparent),
    radial-gradient(ellipse at 50% 0, rgb(230 166 86 / 16%), transparent 70%);
  text-align: center;
  transform: translateX(-50%);
}

.stratum__plaque::before,
.stratum__plaque::after {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 1px solid var(--gold-hot);
  background: var(--void);
  box-shadow: var(--gold-glow);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.stratum__plaque::before { left: 14px; }
.stratum__plaque::after { right: 14px; }

.stratum__title {
  display: grid;
  gap: 4px;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
}

.stratum__name {
  color: var(--gold-hot);
  font-size: clamp(1.25rem, 1.9vw, 2rem);
  letter-spacing: 0.12em;
  line-height: 1.1;
  text-shadow: 0 1px 0 #5b3516, 0 0 10px rgb(255 213 138 / 40%), 0 0 26px rgb(230 166 86 / 22%);
}

.stratum__range {
  color: var(--ash);
  font-size: clamp(0.8rem, 0.9vw, 0.95rem);
  font-weight: 400;
  letter-spacing: 0.22em;
}

/* ----------------------------------------------------- Did You Know */

.did-you-know {
  position: absolute;
  right: max(3.5vw, 28px);
  width: min(360px, 24vw);
  padding: 22px 24px 20px;
}

.did-you-know__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.did-you-know__title {
  margin: 0;
  color: var(--gold-hot);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgb(255 213 138 / 30%);
}

.did-you-know__refresh {
  display: grid;
  width: 36px;
  height: 36px;
  flex: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--gold-hot);
  background: rgb(7 6 5 / 70%);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.did-you-know__refresh svg {
  width: 18px;
  height: 18px;
}

.did-you-know__refresh:hover,
.did-you-know__refresh:focus-visible {
  border-color: var(--gold-hot);
  outline: none;
  box-shadow: var(--gold-glow);
}

.did-you-know__refresh.is-spinning svg {
  animation: dyk-spin 600ms ease;
}

@keyframes dyk-spin {
  to { transform: rotate(360deg); }
}

.did-you-know__fact {
  margin: 0;
  color: var(--parchment);
  font-size: 1.08rem;
  line-height: 1.5;
}

.did-you-know__fact.is-new {
  animation: fact-in 420ms ease;
}

@keyframes fact-in {
  from { opacity: 0; transform: translateY(4px); }
}

/* ------------------------------------------------------------ threads */

.descent__threads {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.thread path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.thread--gold .thread__halo { stroke: rgb(230 140 50 / 10%); stroke-width: 34; }
.thread--gold .thread__glow { stroke: rgb(255 170 70 / 26%); stroke-width: 13; }
.thread--gold .thread__body { stroke: url(#thread-gold-body); stroke: #f2a948; stroke-width: 4.6; }
.thread--gold .thread__core { stroke: #fff1c9; stroke-width: 1.7; animation: core-flicker 3.2s ease-in-out infinite alternate; }

.thread--blue .thread__halo { stroke: rgb(70 150 226 / 12%); stroke-width: 30; }
.thread--blue .thread__glow { stroke: rgb(110 190 255 / 30%); stroke-width: 11; }
.thread--blue .thread__body { stroke: #4fa4f0; stroke-width: 3.8; }
.thread--blue .thread__core { stroke: #e3f6ff; stroke-width: 1.5; animation: core-flicker 2.4s ease-in-out infinite alternate; }

@keyframes core-flicker {
  0% { opacity: 0.75; }
  50% { opacity: 1; }
  100% { opacity: 0.85; }
}

.thread__drops circle {
  mix-blend-mode: screen;
}

.descent__embers {
  position: fixed;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.8;
}

/* ------------------------------------------------------------ markers */

.stratum__events {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  pointer-events: none !important;
}

.marker-slot {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: 0;
  height: 0;
}

.marker {
  --c: var(--gold);
  --c-hot: var(--gold-hot);
  --c-glow: 230 166 86;
  position: absolute;
  top: calc(var(--medal) / -2);
  left: calc(var(--medal) / -2);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  text-align: left;
}

.marker.is-theoretical {
  --c: var(--blue);
  --c-hot: var(--blue-hot);
  --c-glow: 70 150 226;
}

.is-flip > .marker {
  right: calc(var(--medal) / -2);
  left: auto;
  flex-direction: row-reverse;
  text-align: right;
}

.marker__medal {
  position: relative;
  width: var(--medal);
  height: var(--medal);
  flex: none;
  border-radius: 50%;
  background: radial-gradient(circle, #2a1d12, var(--void));
  box-shadow:
    0 0 0 2px var(--c),
    0 0 0 5px rgb(7 6 5 / 92%),
    0 0 0 6px rgb(var(--c-glow) / 55%),
    0 0 14px 3px rgb(var(--c-glow) / 45%),
    0 0 42px 10px rgb(var(--c-glow) / 22%);
  transition: filter 700ms ease, box-shadow 240ms ease, transform 240ms ease;
}

/* Engraved tick ring around the medallion. */
.marker__medal::before {
  position: absolute;
  inset: -11px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(var(--c-glow) / 70%) 0deg 1.4deg, transparent 1.4deg 15deg);
  content: "";
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%, #000 71%, transparent 72%);
  mask: radial-gradient(circle, transparent 62%, #000 63%, #000 71%, transparent 72%);
  opacity: 0.8;
}

.marker__medal::after {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(var(--c-glow) / 80%), inset 0 0 14px rgb(0 0 0 / 70%);
  content: "";
  pointer-events: none;
}

.marker__label {
  position: relative;
  display: grid;
  width: max-content;
  max-width: min(300px, 24vw);
  gap: 1px;
  padding: 8px 6px;
  text-shadow: 0 2px 6px #000, 0 0 2px #000, 0 0 14px rgb(0 0 0 / 80%);
  transition: opacity 700ms ease;
}

/* Smoky dark pad so the label never sits bare on the painting. */
.marker__label::before {
  position: absolute;
  z-index: -1;
  inset: -10px -26px -12px -22px;
  border-radius: 46% / 50%;
  background: rgb(7 6 5 / 72%);
  content: "";
  filter: blur(12px);
}

.marker__date {
  color: var(--c-hot);
  font-family: var(--font-display);
  font-size: 1.36rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.15;
  text-shadow: 0 2px 6px #000, 0 0 12px rgb(var(--c-glow) / 55%);
}

.marker__title {
  color: var(--parchment);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.marker.is-theoretical .marker__title {
  color: var(--blue-hot);
}

.marker__short {
  color: color-mix(in srgb, var(--parchment) 86%, transparent);
  font-size: 1.06rem;
  line-height: 1.3;
}

/* Not yet reached by the molten thread: cold, dim. */
.marker:not(.is-lit) .marker__medal {
  filter: saturate(0.35) brightness(0.5);
  box-shadow:
    0 0 0 2px rgb(var(--c-glow) / 45%),
    0 0 0 5px rgb(7 6 5 / 92%),
    0 0 0 6px rgb(var(--c-glow) / 25%);
}

.marker:not(.is-lit) .marker__label {
  opacity: 0.5;
}

.marker.is-current .marker__medal,
.marker.is-open .marker__medal {
  transform: scale(1.08);
  box-shadow:
    0 0 0 2px var(--c-hot),
    0 0 0 5px rgb(7 6 5 / 92%),
    0 0 0 6px rgb(var(--c-glow) / 80%),
    0 0 20px 5px rgb(var(--c-glow) / 65%),
    0 0 60px 16px rgb(var(--c-glow) / 30%);
}

.marker:hover .marker__medal {
  transform: scale(1.1);
}

.marker:focus-visible {
  outline: none;
}

.marker:focus-visible .marker__medal {
  box-shadow:
    0 0 0 2px var(--c-hot),
    0 0 0 5px rgb(7 6 5 / 92%),
    0 0 0 8px var(--c-hot),
    0 0 26px 8px rgb(var(--c-glow) / 70%);
}

.marker:focus-visible .marker__title {
  text-decoration: underline;
  text-decoration-color: var(--c);
  text-underline-offset: 4px;
}

/* --------------------------------------------------------- event art */

.event-art {
  position: absolute;
  display: block;
  overflow: hidden;
  background-color: #1a120b;
  background-image: var(--plate);
  background-repeat: no-repeat;
}

.event-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 500ms ease;
}

.event-art.has-image img {
  opacity: 1;
}

.event-art--medal {
  inset: 5px;
  border-radius: 50%;
  background-position: var(--crop-x) 30%;
  background-size: auto 360%;
}

.event-art--panel {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background-position: var(--crop-x) 34%;
  background-size: auto 190%;
}

/* ------------------------------------------------------------- gauge */

.depth-gauge {
  position: fixed;
  z-index: 30;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--gauge-w);
  pointer-events: none;
  background: linear-gradient(90deg, rgb(7 6 5 / 72%), rgb(7 6 5 / 40%) 70%, transparent);
}

.depth-gauge__heading {
  position: absolute;
  top: 84px;
  left: 34px;
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 2px 6px #000;
}

.depth-gauge__window {
  position: absolute;
  top: 118px;
  right: 0;
  bottom: 44px;
  left: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 88%, transparent);
}

.depth-gauge__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--gauge-line-x) - 1px);
  width: 2px;
  background: linear-gradient(180deg, var(--gold-hot), var(--gold) 50%, #a4651f);
  box-shadow: 0 0 8px rgb(230 166 86 / 60%);
}

.depth-gauge__track {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  will-change: transform;
}

.gauge-node {
  --fade: 0.4;
  --n: var(--gold);
  --n-hot: var(--gold-hot);
  --n-glow: 230 166 86;
  position: relative;
  height: var(--node-spacing);
}

.gauge-node.is-theoretical {
  --n: var(--blue);
  --n-hot: var(--blue-hot);
  --n-glow: 70 150 226;
}

/* Small hollow dot between labelled nodes, as on frame 2. */
.gauge-node::after {
  position: absolute;
  top: calc(var(--node-spacing) / 2 - 4px);
  left: calc(var(--gauge-line-x) - 4px);
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  background: var(--void);
  content: "";
  opacity: calc(var(--fade) * 0.9);
}

.gauge-node:last-child::after {
  display: none;
}

.gauge-node__dot {
  position: absolute;
  top: -11px;
  left: calc(var(--gauge-line-x) - 11px);
  width: 22px;
  height: 22px;
  border: 2px solid var(--n);
  border-radius: 50%;
  background: radial-gradient(circle, var(--n-hot) 0 30%, rgb(7 6 5 / 95%) 36%);
  box-shadow: 0 0 10px rgb(var(--n-glow) / 55%);
  opacity: max(var(--fade), 0.45);
  transition: transform 300ms ease, box-shadow 300ms ease;
}

.gauge-node.is-current .gauge-node__dot {
  background: radial-gradient(circle, #fff 0 18%, var(--n-hot) 26%, rgb(var(--n-glow) / 60%) 44%, rgb(7 6 5 / 95%) 52%);
  box-shadow: 0 0 0 4px rgb(var(--n-glow) / 25%), 0 0 18px 6px rgb(var(--n-glow) / 65%);
  opacity: 1;
  transform: scale(1.3);
}

.gauge-node__text {
  position: absolute;
  top: -15px;
  right: 6px;
  left: calc(var(--gauge-line-x) + 30px);
  display: grid;
  opacity: var(--fade);
  text-shadow: 0 2px 6px #000, 0 0 2px #000;
}

.gauge-node__value {
  color: var(--n-hot);
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.05;
}

.gauge-node__unit {
  color: var(--n);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gauge-node__name {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 3px;
  color: var(--ash);
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.gauge-node.is-current .gauge-node__name {
  color: var(--parchment);
}

.depth-gauge__arrow {
  position: absolute;
  bottom: 22px;
  left: calc(var(--gauge-line-x) - 8px);
  width: 16px;
  color: var(--gold);
  filter: drop-shadow(0 0 4px rgb(230 166 86 / 70%));
}

/* ------------------------------------------------------- event panel */

.event-panel {
  position: fixed;
  z-index: 50;
  top: 112px;
  right: 24px;
  display: flex;
  width: clamp(340px, 26vw, 440px);
  max-height: calc(100vh - 136px);
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 260ms ease, transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.event-panel[hidden] {
  display: none;
}

.event-panel.is-open {
  opacity: 1;
  transform: none;
}

.event-panel__frame {
  display: flex;
  width: 100%;
  min-height: 0;
  flex-direction: column;
  padding: 18px 16px 14px;
  --panel-surface: rgb(10 8 6 / 95%);
}

.event-panel__frame.is-theoretical {
  box-shadow:
    inset 0 0 0 5px rgb(7 6 5 / 88%),
    inset 0 0 0 6px var(--hairline-faint),
    0 0 18px rgb(70 150 226 / 45%),
    0 0 60px rgb(70 150 226 / 18%);
}

.event-panel__frame.is-swapping .event-panel__scroll {
  animation: panel-swap 360ms ease;
}

@keyframes panel-swap {
  from { opacity: 0; transform: translateY(8px); }
}

.event-panel__close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  color: var(--gold-hot);
  background: rgb(7 6 5 / 80%);
  cursor: pointer;
}

.event-panel__close svg {
  width: 14px;
  height: 14px;
}

.event-panel__close:hover,
.event-panel__close:focus-visible {
  border-color: var(--gold-hot);
  outline: none;
  box-shadow: var(--gold-glow);
}

.event-panel__scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 4px 10px 8px;
  overflow-y: auto;
  scrollbar-color: var(--hairline) transparent;
  scrollbar-width: thin;
}

.event-panel__art {
  position: relative;
  margin: 0 0 14px;
  border: 1px solid var(--hairline);
  box-shadow: 0 0 0 4px rgb(7 6 5 / 90%), 0 0 0 5px var(--hairline-faint), 0 10px 30px rgb(0 0 0 / 50%);
}

.event-panel__era {
  margin: 0 0 4px;
  color: var(--ash);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
}

.event-panel__date {
  margin: 0;
  color: var(--gold-hot);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 0 12px rgb(230 166 86 / 35%);
}

.event-panel__title {
  margin: 2px 0 10px;
  color: var(--gold-hot);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.65vw, 1.8rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.15;
  text-shadow: 0 0 14px rgb(230 166 86 / 30%);
}

.event-panel__title:focus {
  outline: none;
}

.event-panel__title:focus-visible {
  outline: 1px dashed var(--gold);
  outline-offset: 4px;
}

.is-theoretical .event-panel__date,
.is-theoretical .event-panel__title {
  color: var(--blue-hot);
  text-shadow: 0 0 14px rgb(70 150 226 / 55%);
}

.event-panel__tag {
  display: inline-block;
  margin: 0 0 12px;
  padding: 5px 16px 4px;
  border: 1px solid var(--gold);
  border-radius: 6px;
  color: var(--gold-hot);
  background: rgb(var(--tag-glow, 230 166 86) / 8%);
  font-family: var(--font-display);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: inset 0 0 10px rgb(var(--tag-glow, 230 166 86) / 14%);
}

.is-theoretical .event-panel__tag {
  --tag-glow: 70 150 226;
}

.event-panel__short {
  margin: 0 0 4px;
  color: var(--ash);
  font-size: 1.1rem;
  line-height: 1.4;
}

.event-panel__desc {
  margin: 0;
  color: var(--parchment);
  font-size: 1.17rem;
  line-height: 1.55;
}

.event-panel__section {
  margin-top: 18px;
}

.event-panel__heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 6px;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.event-panel__heading::after {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--hairline), transparent);
  content: "";
}

.event-panel__text {
  margin: 0;
  color: var(--parchment);
  font-size: 1.1rem;
  line-height: 1.55;
}

.event-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 8px 0 0;
  list-style: none;
}

.event-panel__chip {
  padding: 4px 14px 5px;
  border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  border-radius: 999px;
  color: var(--parchment);
  background: rgb(7 6 5 / 60%);
  font-size: 1.02rem;
  line-height: 1.3;
}

.event-panel__nav {
  display: grid;
  align-items: stretch;
  margin-top: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: rgb(7 6 5 / 80%);
  grid-template-columns: 1fr auto 1fr;
}

.event-panel__step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  color: var(--parchment);
  background: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.event-panel__step svg {
  width: 12px;
  height: 12px;
  color: var(--gold-hot);
}

.event-panel__step:hover:not(:disabled),
.event-panel__step:focus-visible {
  color: var(--gold-hot);
  outline: none;
  background: rgb(230 166 86 / 12%);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.event-panel__step:first-child { border-radius: 7px 0 0 7px; }
.event-panel__step:last-child { border-radius: 0 7px 7px 0; }

.event-panel__step:disabled {
  opacity: 0.35;
  cursor: default;
}

.event-panel__count {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-right: 1px solid var(--hairline-faint);
  border-left: 1px solid var(--hairline-faint);
  color: var(--ash);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ------------------------------------------------ entrance + states */

html:not(.descent-ready) .stratum__plaque,
html:not(.descent-ready) .depth-gauge {
  opacity: 0;
}

.stratum__plaque,
.depth-gauge {
  transition: opacity 900ms ease 200ms;
}

/* --------------------------------------------------------- compact */

@media (max-width: 1100px) {
  .event-panel {
    top: 20px;
    right: 16px;
    width: min(440px, 62vw);
    max-height: calc(100vh - 40px);
  }

  .did-you-know {
    right: auto;
    left: calc(var(--gauge-w) + 24px);
    width: min(560px, calc(100% - var(--gauge-w) - 48px));
  }

  .marker__label {
    max-width: min(300px, 34vw);
  }
}

/* ---------------------------------------------------------- mobile */

@media (max-width: 760px) {
  .page--timeline {
    --gauge-w: 30vw;
    --medal: 50px;
    --gauge-line-x: 20px;
    --node-spacing: 108px;
  }

  .stratum__stage {
    height: 100lvh;
  }

  .stratum__far img,
  .stratum__near img {
    object-position: 46% 44%;
  }

  .stratum__plaque {
    width: calc(100% - 24px);
    max-width: none;
    padding: 10px 30px;
  }

  .stratum__plaque::before { left: 9px; }
  .stratum__plaque::after { right: 9px; }

  .stratum__name {
    font-size: 1.08rem;
    letter-spacing: 0.09em;
  }

  .stratum__range {
    font-size: 0.75rem;
  }

  .did-you-know {
    right: 12px;
    left: calc(var(--gauge-w) + 4px);
    width: auto;
    padding: 16px 16px 14px;
  }

  .did-you-know__fact {
    font-size: 1rem;
  }

  .marker {
    gap: 10px;
  }

  .marker__medal::before {
    inset: -8px;
  }

  .marker__label {
    /* QA fix: the theoretical marker sits further right (its blue thread branches off the gold one), so its label
       ran past the screen edge (to x=413 on a 390px phone) and, on a real phone, made the whole page scroll
       sideways. Cap every label by where its own marker sits (--x is set on the slot): slot x, half a medal,
       the gap and a 12px edge margin. */
    max-width: min(
      calc(100vw - var(--gauge-w) - 110px),
      calc(100vw - var(--x) - var(--medal) / 2 - 10px - 12px)
    );
    padding: 4px 2px;
  }

  .marker__date {
    font-size: 1.08rem;
  }

  .marker__title {
    font-size: 0.8rem;
  }

  .marker__short {
    font-size: 1rem;
  }

  .depth-gauge {
    background: linear-gradient(90deg, rgb(7 6 5 / 78%), rgb(7 6 5 / 50%) 80%, transparent);
  }

  .depth-gauge__heading {
    top: 188px;
    left: 12px;
    font-size: 0.75rem;
  }

  .depth-gauge__window {
    top: 214px;
    bottom: 34px;
  }

  .gauge-node__dot {
    top: -9px;
    left: calc(var(--gauge-line-x) - 9px);
    width: 18px;
    height: 18px;
  }

  .gauge-node__text {
    top: -11px;
    left: calc(var(--gauge-line-x) + 18px);
    right: 2px;
  }

  .gauge-node__value {
    font-size: 1.05rem;
  }

  .gauge-node__unit,
  .gauge-node__name {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
  }

  .depth-gauge__arrow {
    bottom: 12px;
  }

  /* Bottom sheet, as on frame 4. */
  .event-panel {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
    max-height: 74svh;
    transform: translateY(40px);
  }

  .event-panel__frame {
    padding: 14px 12px 10px;
  }

  .event-panel__scroll {
    padding: 2px 6px 6px;
  }

  .event-panel__art {
    float: left;
    width: 42%;
    margin: 4px 14px 8px 0;
  }

  .event-panel__era {
    font-size: 0.72rem;
    padding-right: 36px;
  }

  .event-panel__date {
    font-size: 1.15rem;
  }

  .event-panel__title {
    font-size: 1.12rem;
  }

  .event-panel__tag {
    padding: 4px 10px 3px;
    font-size: 0.68rem;
  }

  .event-panel__desc {
    clear: both;
    font-size: 1.06rem;
  }

  .event-panel__step span {
    font-size: 0.72rem;
  }
}

@media (max-width: 760px) and (max-height: 520px) {
  .event-panel {
    max-height: 90svh;
  }
}

/* --------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .stratum__haze,
  .thread__core,
  .did-you-know__fact.is-new,
  .did-you-know__refresh.is-spinning svg,
  .event-panel__frame.is-swapping .event-panel__scroll {
    animation: none !important;
  }

  .descent__embers,
  .thread__drops {
    display: none;
  }

  .marker__medal,
  .marker__label,
  .event-panel,
  .gauge-node__dot,
  .stratum__plaque,
  .depth-gauge {
    transition: none !important;
  }
}