@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #f2a56b;
}

:root {
  --u: 1vh;                         /* stable viewport-height unit (set by JS) = one world unit */
  --ink: #efe8dc;
  --ink-2: rgba(239, 232, 220, 0.76);
  --ink-3: rgba(239, 232, 220, 0.5);
  --hair: rgba(239, 232, 220, 0.18);
  --accent: #f2a56b;
  --ground: #050406;
  --display: 'Libre Caslon Display', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --gl: clamp(96px, 10vw, 168px);   /* content edge, clear of the depth gauge */
  --ease: cubic-bezier(0.16, 0.84, 0.24, 1);
  transition: --accent 0.9s ease;
}

* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; letter-spacing: inherit; }
::selection { background: var(--accent); color: #0b0908; }
:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

/* ── stage ─────────────────────────────────────────────────── */
#gl {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  display: block; z-index: 0;
  background: #07060a;
}
.scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(5, 4, 4, 0.74) 0%, rgba(5, 4, 4, 0.5) 30%, rgba(5, 4, 4, 0.12) 52%, rgba(5, 4, 4, 0) 62%);
  opacity: var(--scrim, 0);
}
.floor-fade {
  position: fixed; left: 0; right: 0; bottom: 0; height: 132px; z-index: 4; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 4, 5, 0.82), rgba(5, 4, 5, 0));
}
main { position: relative; z-index: 2; }

/* ── loader ────────────────────────────────────────────────── */
.loader {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: end center;
  padding-bottom: 14vh;
  background: #050406;
  transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s;
}
.is-ready .loader { opacity: 0; visibility: hidden; }
.loader__inner { display: grid; justify-items: center; gap: 14px; font: 400 0.64rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.loader__label { color: var(--ink-2); }
.loader__bar { width: 180px; height: 1px; background: var(--hair); overflow: hidden; }
.loader__bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--accent); transition: width 0.4s var(--ease); }
.loader__count b { color: var(--ink); font-weight: 400; }

/* ── top bar ───────────────────────────────────────────────── */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8;
  display: flex; align-items: center; gap: 2rem;
  padding: 20px clamp(18px, 3vw, 44px) 20px var(--gl);
  font: 400 0.64rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
}
.bar::before {
  content: ''; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(5, 4, 6, 0.6), rgba(5, 4, 6, 0));
}
.bar__mark { text-decoration: none; color: var(--ink); }
.bar__meta { color: var(--ink-3); }
.bar__nav { margin-left: auto; display: flex; gap: 0.4rem; }
.bar__btn { text-decoration: none; color: var(--ink-2); padding: 0.7rem 0.9rem; border: 1px solid transparent; transition: color 0.3s, border-color 0.3s; }
.bar__btn:hover { color: var(--ink); border-color: var(--hair); }
.bar__btn--em { color: var(--ink); border-color: var(--hair); }
.bar__btn--em:hover { border-color: var(--accent); color: var(--accent); }

/* ── depth gauge ───────────────────────────────────────────── */
.gauge { position: fixed; z-index: 7; left: clamp(14px, 2vw, 30px); top: 17vh; bottom: 19vh; width: 64px; }
.gauge__rail { position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--hair), var(--hair)) no-repeat, transparent; }
.gauge__ticks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.gauge__ticks li { position: absolute; left: 0; transform: translateY(-50%); }
.gauge__ticks button {
  display: flex; align-items: center; gap: 8px;
  font: 400 0.56rem/1 var(--mono); letter-spacing: 0.06em; color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  padding: 3px 0;
  transition: color 0.3s;
}
.gauge__ticks button::before { content: ''; width: 13px; height: 1px; background: currentColor; opacity: 0.8; }
.gauge__ticks button:hover, .gauge__ticks .is-on button { color: var(--ink); }
.gauge__ticks .is-on button::before { background: var(--accent); opacity: 1; }
.gauge__ticks button .gt__name {
  position: absolute; left: 100%; margin-left: 12px; padding: 5px 8px;
  background: rgba(8, 6, 6, 0.85); border: 1px solid var(--hair); color: var(--ink);
  opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity 0.25s, transform 0.25s;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.gauge__ticks button:hover .gt__name, .gauge__ticks button:focus-visible .gt__name { opacity: 1; transform: none; }
.gauge__needle { position: absolute; left: -4px; top: 0; width: 22px; height: 1px; background: var(--accent); will-change: transform; }
.gauge__needle span { position: absolute; left: 0; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

/* ── HUD ───────────────────────────────────────────────────── */
.hud {
  position: fixed; z-index: 7; left: var(--gl); bottom: 24px;
  font: 400 0.6rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  pointer-events: none;
}
.hud__stratum { display: flex; gap: 0.9rem; color: var(--ink); margin-bottom: 0.55rem; }
.hud__idx { color: var(--accent); }
.hud__grid { display: flex; gap: 0 clamp(1.1rem, 2.4vw, 2.2rem); margin: 0; }
.hud__grid dt { color: var(--ink-3); }
.hud__grid dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 8.5em; }
#hud-lamp { min-width: 3em; }

.minimap {
  position: fixed; z-index: 7; right: clamp(18px, 3vw, 44px); bottom: 22px; margin: 0;
  display: flex; align-items: flex-end; gap: 14px;
  font: 400 0.58rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3);
  pointer-events: none;
}
.minimap figcaption { order: -1; text-align: right; max-width: 9.5em; }
.minimap b { display: block; color: var(--ink); font-weight: 400; font-variant-numeric: tabular-nums; }
.minimap svg { filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.5)); }

/* ── reveal ────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ── surface ───────────────────────────────────────────────── */
.hero { position: relative; height: calc(var(--u) * 83.5); }
.hero__inner { position: absolute; left: var(--gl); top: calc(var(--u) * 12.5); max-width: min(46rem, 60vw); }
.hero__coords { margin: 0; font: 400 0.64rem/1.6 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.hero__name {
  margin: 1.1rem 0 1.5rem;
  font: 400 clamp(3.6rem, min(9.6vw, 17vh), 10rem)/0.84 var(--display);
  letter-spacing: -0.025em;
  text-shadow: 0 2px 40px rgba(6, 8, 20, 0.35);
}
.hero__name .line { display: block; overflow: hidden; padding: 0.02em 0 0.1em; margin-bottom: -0.1em; }
.hero__name .line > span { display: inline-block; transform: translate3d(0, 108%, 0); transition: transform 1.6s var(--ease); }
.hero__name .line:nth-child(2) > span { transition-delay: 0.12s; padding-left: 0.42em; }
.is-ready .hero__name .line > span { transform: none; }
.hero__role { margin: 0 0 1rem; font: italic 400 clamp(1.05rem, 1.45vw, 1.3rem)/1.4 var(--serif); color: var(--ink); max-width: 34rem; }
.hero__lede { margin: 0; max-width: 31rem; font-size: clamp(0.98rem, 1.15vw, 1.08rem); line-height: 1.6; color: var(--ink-2); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.8rem; margin-top: 2.2rem; }
.descend {
  display: inline-flex; align-items: center; gap: 1.2rem;
  padding: 1rem 1.25rem; text-decoration: none;
  font: 400 0.66rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid rgba(239, 232, 220, 0.34); background: rgba(8, 8, 16, 0.25);
  transition: border-color 0.35s, background 0.35s;
}
.descend em { font-style: normal; color: var(--accent); }
.descend::after { content: '↓'; font-family: var(--sans); font-size: 0.9rem; transition: transform 0.4s var(--ease); }
.descend:hover { border-color: var(--accent); background: rgba(8, 8, 16, 0.45); }
.descend:hover::after { transform: translateY(3px); }
.textlink { font: 400 0.9rem/1.4 var(--sans); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 4px; }
.textlink:hover { color: var(--ink); text-decoration-color: var(--accent); }

/* ── strata ────────────────────────────────────────────────── */
.stratum { position: relative; min-height: calc(var(--u) * var(--h, 120)); padding: calc(var(--u) * 12) 0 calc(var(--u) * 10); }
.tag {
  position: absolute; top: 0; left: var(--gl); right: clamp(18px, 3vw, 44px);
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; align-items: baseline;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(239, 232, 220, 0.24);
  font: 400 0.62rem/1.4 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.tag::before { content: ''; position: absolute; left: calc(var(--gl) * -1 + 20px); top: -1px; width: calc(var(--gl) - 30px); height: 1px; background: linear-gradient(90deg, transparent, rgba(239, 232, 220, 0.24)); }
.tag__idx { color: var(--accent); }
.tag__name { color: var(--ink); }
.tag__event { color: var(--accent); }
.tag__event::before { content: '◆ '; font-size: 0.8em; }
.tag__range { margin-left: auto; font-variant-numeric: tabular-nums; }
.tag__age { color: var(--ink-3); }

.cue { position: absolute; left: 50%; top: calc(var(--u) * 3); display: grid; justify-items: center; gap: 10px; font: 400 0.56rem/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); transform: translateX(-50%); }
.cue i { width: 1px; height: 48px; background: linear-gradient(transparent, var(--ink-2)); animation: cue 2.4s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.entry { position: relative; margin-left: var(--gl); max-width: min(37rem, 50vw); text-shadow: 0 1px 24px rgba(0, 0, 0, 0.45); }
.entry--wide { max-width: min(46rem, 58vw); }
.when { margin: 0; font: 400 0.64rem/1.5 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.org { margin: 0.9rem 0 0.7rem; font: 400 clamp(2.9rem, 6.4vw, 5.9rem)/0.92 var(--display); letter-spacing: -0.02em; }
.org--m { font-size: clamp(2.4rem, 4.8vw, 4.3rem); }
.org--long { font-size: clamp(2.5rem, 4.9vw, 4.5rem); }
.org--xl { font-size: clamp(4rem, 12vw, 11rem); letter-spacing: -0.03em; }
.role { margin: 0; font: italic 400 clamp(1.02rem, 1.4vw, 1.26rem)/1.4 var(--serif); color: var(--ink-2); }
.lede { margin: 1.6rem 0 0; font-size: clamp(1.04rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--ink); max-width: 34rem; }
.aside { margin: 1.4rem 0 0; font-size: 0.92rem; line-height: 1.6; color: var(--ink-3); max-width: 32rem; }

.metrics { display: flex; flex-wrap: wrap; gap: 1.4rem clamp(1.6rem, 3vw, 2.8rem); margin: 2.2rem 0 0.2rem; padding-top: 1.4rem; border-top: 1px solid var(--hair); }
.metric b { display: block; font: 400 clamp(2rem, 3.2vw, 2.9rem)/1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.metric b small { font-size: 0.5em; color: var(--ink-3); }
.metric span { display: block; margin-top: 0.5rem; max-width: 12em; font: 400 0.58rem/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.list { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.list li { position: relative; padding-left: 1.6rem; font-size: 0.97rem; line-height: 1.55; color: var(--ink-2); }
.list li::before { content: ''; position: absolute; left: 0; top: 0.74em; width: 0.8rem; height: 1px; background: var(--accent); }

.spec { margin: 2rem 0 0; display: grid; gap: 0.2rem; border-top: 1px solid var(--hair); }
.spec > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--hair); }
.spec dt { font: 400 0.6rem/1.9 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 0; font-size: 0.97rem; line-height: 1.55; color: var(--ink); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 2.6rem; margin-top: 2.4rem; }
.sub { border-top: 1px solid var(--hair); padding-top: 1.1rem; }
.sub h3 { margin: 0.6rem 0 0.3rem; font: 400 1.7rem/1.1 var(--display); }
.sub .role { font-size: 1rem; margin-bottom: 0.7rem; }
.sub p:last-child { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }

.kit { margin-top: 2.4rem; }
.kit h4 { margin: 0 0 0.9rem; font: 400 0.6rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips li { padding: 0.45rem 0.75rem; border: 1px solid rgba(239, 232, 220, 0.24); font-size: 0.86rem; color: var(--ink); background: rgba(10, 6, 4, 0.28); }

/* notes pinned to real depths */
.note {
  position: absolute; right: clamp(18px, 3vw, 44px); width: min(19.5rem, 25vw);
  padding: 0.95rem 1.05rem 1.05rem;
  background: linear-gradient(100deg, rgba(8, 6, 5, 0.66), rgba(8, 6, 5, 0.36));
  border-left: 1px solid var(--accent);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transform: translateY(-1px);
}
.note::before { content: ''; position: absolute; top: 0; right: 100%; width: 38px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent)); }
.flow-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2rem; }
.note--flow { position: relative; right: auto; width: auto; }
.note--flow::before { display: none; }
.note__d { font: 400 0.58rem/1 var(--mono); letter-spacing: 0.12em; color: var(--accent); font-variant-numeric: tabular-nums; }
.note h3 { margin: 0.55rem 0 0.35rem; font: 600 0.95rem/1.3 var(--sans); color: var(--ink); }
.note p { margin: 0; font-size: 0.86rem; line-height: 1.52; color: var(--ink-2); }

.marker {
  position: absolute; left: 50%; right: clamp(18px, 3vw, 44px);
  display: flex; align-items: center; justify-content: flex-end; gap: 0.8rem;
  transform: translateY(-50%);
  font: 400 0.6rem/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.marker::before { content: ''; flex: 1; height: 1px; background: repeating-linear-gradient(90deg, rgba(239, 232, 220, 0.45) 0 6px, transparent 6px 11px); }
.marker span { color: var(--accent); }
.marker > * , .marker { text-shadow: 0 0 12px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9); }
.marker--hot::before { background: repeating-linear-gradient(90deg, rgba(255, 120, 60, 0.7) 0 6px, transparent 6px 11px); }

/* duct-bank figure */
.duct { position: absolute; left: 0; right: 0; margin: 0; pointer-events: none; }
.duct__lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.duct__lines line { stroke: rgba(239, 232, 220, 0.55); stroke-width: 1; }
.duct__lines circle { fill: var(--accent); }
.duct__labels { list-style: none; margin: 0; padding: 0; }
.duct__labels li {
  position: absolute; transform: translateY(-50%); white-space: nowrap;
  font: 400 0.6rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
.duct__labels li[data-side='l'] { transform: translate(-100%, -50%); }
.duct figcaption {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: min(40rem, 86vw); text-align: center;
  font-size: 0.84rem; line-height: 1.5; color: var(--ink-3);
}
.duct figcaption b { font: 400 0.6rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-right: 0.6rem; }

/* inner core */
.entry--center { max-width: min(52rem, 70vw); }
.facts { list-style: none; margin: 1.6rem 0 0; padding: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: 1.4rem 3rem; border-top: 1px solid var(--hair); }
.facts b { display: block; font: 400 clamp(1.6rem, 2.6vw, 2.3rem)/1 var(--display); }
.facts span { display: block; margin-top: 0.45rem; font: 400 0.58rem/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); max-width: 14em; }
.stratum--center .lede { font: 400 clamp(1.5rem, 2.6vw, 2.2rem)/1.25 var(--display); margin-top: 2.6rem; }
.contact { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.btn {
  display: grid; gap: 0.5rem; min-width: 16rem; padding: 1.05rem 1.3rem;
  text-decoration: none; border: 1px solid rgba(20, 10, 0, 0.3);
  background: rgba(12, 8, 4, 0.72); color: var(--ink);
  transition: background 0.3s, border-color 0.3s, transform 0.4s var(--ease);
}
.btn span { font: 400 0.6rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.btn em { font-style: normal; font-size: 1.02rem; }
.btn:hover { background: rgba(12, 8, 4, 0.9); border-color: var(--accent); transform: translateY(-2px); }
.ascend { margin-top: 2.4rem; font: 400 0.64rem/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); padding: 0.9rem 1.1rem; border: 1px solid rgba(239, 232, 220, 0.3); background: rgba(12, 8, 4, 0.5); }
.ascend span { display: inline-block; margin-right: 0.6rem; transition: transform 0.4s var(--ease); }
.ascend:hover span { transform: translateY(-3px); }
.stratum--center { padding-top: calc(var(--u) * 60); }
.stratum--center .entry { text-shadow: 0 1px 30px rgba(40, 18, 0, 0.55); }
.credits { position: absolute; left: var(--gl); right: clamp(18px, 3vw, 44px); bottom: calc(var(--u) * 14); display: flex; justify-content: space-between; gap: 2rem; font-size: 0.72rem; line-height: 1.5; color: var(--ink-3); text-shadow: 0 1px 12px rgba(20, 8, 0, 0.8); }
.credits p { margin: 0; max-width: 46rem; }
.center-line { position: absolute; left: 0; right: 0; bottom: 0; height: 0; }

/* ── core sample dialog ────────────────────────────────────── */
.sample {
  width: min(40rem, calc(100vw - 32px)); max-height: calc(100vh - 48px);
  padding: 2rem 2rem 1.6rem; border: 1px solid var(--hair);
  background: rgba(10, 8, 8, 0.94); color: var(--ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.sample::backdrop { background: rgba(2, 2, 3, 0.6); }
.sample h2 { margin: 0.6rem 0 1.4rem; font: 400 2rem/1.1 var(--display); }
.sample__close { position: absolute; top: 0.8rem; right: 0.8rem; }
.sample__close button { width: 2.4rem; height: 2.4rem; font-size: 1.4rem; color: var(--ink-2); }
.sample__close button:hover { color: var(--ink); }
.core { list-style: none; margin: 0; padding: 0; }
.core li { position: relative; padding-left: 1.6rem; }
.core li::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); }
.core li:first-child::before { border-radius: 3px 3px 0 0; }
.core li:last-child::before { border-radius: 0 0 3px 3px; }
.core a { display: grid; grid-template-columns: 5.2rem 1fr; gap: 0.1rem 1rem; padding: 0.7rem 0.4rem; text-decoration: none; border-bottom: 1px solid var(--hair); transition: background 0.25s; }
.core a:hover { background: rgba(239, 232, 220, 0.05); }
.core time { grid-row: span 2; font: 400 0.6rem/1.9 var(--mono); letter-spacing: 0.08em; color: var(--ink-3); }
.core b { font-weight: 500; font-size: 0.98rem; }
.core span { font-size: 0.84rem; color: var(--ink-2); }
.sample__foot { margin: 1.4rem 0 0; font-size: 0.9rem; color: var(--ink-2); }

/* ── no WebGL: keep it a good-looking page ─────────────────── */
.no-gl #gl { display: none; }
.no-gl body { background: linear-gradient(180deg, #111a3a 0%, #6b4a6b 3.5%, #d0835a 5%, #3b2419 5.3%, #6b3b25 9%, #b7a88e 14%, #8c7b63 24%, #3f3a33 34%, #5d4a45 45%, #3a2e2c 55%, #2f3a14 64%, #1a2250 72%, #4a1a0c 82%, #d06a1a 92%, #fff0cf 100%); }
.no-gl .scrim { --scrim: 0.6; }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .note { position: relative; right: auto; top: auto !important; width: auto; max-width: 30rem; margin: 1.4rem clamp(18px, 4vw, 44px) 0 var(--gl); }
  .note::before { display: none; }
  .note--flow { margin: 0; }
  .entry, .entry--wide { max-width: min(40rem, calc(100vw - var(--gl) - 32px)); }
  .hud__opt:nth-child(4), .hud__opt:nth-child(5) { display: none; }
}
@media (max-width: 760px) {
  :root { --gl: 22px; }
  .bar { padding-left: 18px; gap: 0.6rem; letter-spacing: 0.1em; white-space: nowrap; }
  .bar__meta, .bar__btn[href*='linkedin'], .bar__btn[data-open-sample] { display: none; }
  .bar__btn { padding: 0.65rem 0.8rem; }
  .gauge { left: auto; right: 8px; width: 10px; }
  .gauge__ticks button { font-size: 0; gap: 0; }
  .gauge__ticks button::before { width: 7px; }
  .gauge__needle { left: -6px; width: 14px; }
  .hud { left: 18px; bottom: 16px; }
  .hud__opt { display: none; }
  .hud__grid dd { min-width: 6.5em; }
  .minimap { right: 14px; bottom: 14px; }
  .minimap svg { width: 58px; height: 58px; }
  .minimap figcaption { display: none; }
  .hero__inner { top: calc(var(--u) * 12); max-width: calc(100vw - 44px); }
  .hero__lede { display: none; }
  .hero__cta { margin-top: 1.6rem; }
  .hero__name { font-size: clamp(3.2rem, 17vw, 5rem); }
  .entry, .entry--wide, .entry--center { max-width: calc(100vw - 48px); margin-right: 26px; }
  .pair, .flow-notes { grid-template-columns: 1fr; }
  .spec > div { grid-template-columns: 1fr; gap: 0.2rem; }
  .marker, .cue { display: none; }
  .duct__labels, .duct__lines { display: none; }
  .credits { position: relative; left: auto; right: auto; bottom: auto; flex-direction: column; gap: 0.6rem; margin: 3rem 26px 0 22px; }
  #siemens { min-height: calc(var(--u) * 235) !important; }
  .scrim { background: rgba(5, 4, 4, 0.42); }
  .tag__age { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transform: none; transition: opacity 0.6s linear; }
  .hero__name .line > span { transform: none; transition: none; }
  .cue i { animation: none; }
  :root { transition: none; }
}