/* Resolve — a sticky stage inside a tall scroll; the canvas does the rest. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  --black: #0a0908; --ink: #efe9df; --ink-soft: #9d958a; --amber: #e0962e;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans: Onest, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--black); }
html, body { overflow-x: clip; }
body { min-height: 100svh; color: var(--ink); font: 300 17px/1.6 var(--sans); background: var(--black); }
code { font: 500 .95em var(--mono); color: var(--ink); }
.eyebrow { margin: 0 0 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.corner { position: fixed; z-index: 9; top: 12px; left: 12px; padding: 4px 8px; background: var(--black); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.corner:hover, .corner:focus-visible { color: var(--ink); outline: none; }

/* ---------- the stage: one viewport tall, pinned while the scroll runs through the stages ---------- */
.scroll { position: relative; height: 400svh; }   /* three screens of scroll carry the eyes, the pull-back, the face and the photograph */
.stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--black); }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.title { position: absolute; left: clamp(18px, 4vw, 48px); top: 52px; z-index: 2; padding: 10px 12px 12px; background: rgba(10,9,8,.72); pointer-events: none; }
.title h1 { font: 300 clamp(34px, 4.6vw, 64px)/.95 var(--sans); letter-spacing: -.035em; }
.readout { position: absolute; left: clamp(18px, 4vw, 48px); bottom: clamp(18px, 3vw, 36px); z-index: 2; padding: 6px 10px; background: rgba(10,9,8,.72); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; pointer-events: none; }
.readout.photo { color: var(--amber); }
.hint { position: absolute; right: clamp(18px, 4vw, 48px); bottom: clamp(18px, 3vw, 36px); z-index: 2; padding: 6px 10px; background: rgba(10,9,8,.72); font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); transition: opacity .5s; pointer-events: none; }
.hint span { display: inline-block; animation: nudge 1.6s ease-in-out infinite; }
.hint.gone { opacity: 0; }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- after the photograph ---------- */
.after { width: min(100%, 1180px); margin: 0 auto; padding: 72px clamp(18px, 4vw, 48px) 10px; display: grid; gap: 22px; }
.lede { max-width: 680px; color: #cfc7bb; text-wrap: pretty; }
.lede.small { font-size: 15px; color: var(--ink-soft); }
.colophon { width: min(100%, 1180px); margin: 0 auto; padding: 24px clamp(18px, 4vw, 48px) 60px; }
.colophon p { max-width: 760px; font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }

@media (max-width: 700px) {
  .title { top: 46px; }
  .after { padding-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .hint span { animation: none; }
  .hint { transition: none; }
}