:root {
  --void: #07080a;
  --void-2: #0c0e11;
  --text: #ded9d0;
  --text-2: #9b968d;
  --text-3: #6b6862;
  --line: #1c1f23;
  --mask: #f2c94c;
  --serif: "Newsreader", "Iowan Old Style", Palatino, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --col: 40rem;
  --pad: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
:target { scroll-margin-top: 5rem; }
html { background: var(--void); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.58;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga", "onum";
  overflow-x: hidden;
}
::selection { background: var(--mask); color: var(--void); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--text-3); }
a:hover { color: #fff; text-decoration-color: var(--mask); }
h1, h2 { font-weight: 300; margin: 0; }
p { margin: 0; }
code { font-family: var(--mono); font-size: .9em; }
sup { font-size: .58em; line-height: 0; vertical-align: .55em; margin-left: .12em; }
sup a { text-decoration: none; color: var(--text-2); }
sup a:hover { color: var(--mask); }
img { display: block; max-width: 100%; }

/* ── grain and rail ─────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  opacity: .05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: 2px; z-index: 99; background: var(--line); }
.rail i { display: block; width: 100%; height: 0; background: var(--mask); opacity: .55; }

/* ── hud ────────────────────────────────────────────────── */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px var(--pad);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
  background: linear-gradient(180deg, rgba(7,8,10,.9), rgba(7,8,10,0));
  pointer-events: none;
}
.hud-r { display: inline-flex; align-items: center; gap: 8px; }
.hud-r .smile { transition: opacity .3s; }
#mask-state.off #mask-label { color: var(--mask); }

/* ── shots: dark until looked at ────────────────────────── */
.shot {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.22) contrast(1.06) saturate(.85);
  transform: scale(1.04);
  transition: filter 2.4s cubic-bezier(.2,.6,.2,1), transform 3.4s cubic-bezier(.2,.6,.2,1);
  will-change: filter, transform;
}
.shot.lit { filter: brightness(1) contrast(1.02) saturate(.95); transform: scale(1); }

/* ── hero ───────────────────────────────────────────────── */
.hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero .shot { position: absolute; inset: 0; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(7,8,10,.5) 100%),
    linear-gradient(180deg, rgba(7,8,10,.5) 0%, transparent 22%, transparent 45%, rgba(7,8,10,.94) 92%);
}
.hero-plate { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(56px, 9vh, 104px); z-index: 2; }
h1 {
  font-size: clamp(58px, 13vw, 168px);
  line-height: .92; letter-spacing: -.03em;
  font-variation-settings: "opsz" 72;
  text-shadow: 0 8px 60px rgba(0,0,0,.9);
}
.tag {
  font-style: italic; color: var(--text);
  font-size: clamp(19px, 2.2vw, 25px);
  margin-top: .5rem; max-width: 30ch;
  text-shadow: 0 2px 20px rgba(0,0,0,.9);
}
.scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--text-3); animation: fade 3.4s ease-in-out infinite;
}
@keyframes fade { 0%,100% { opacity: .3 } 50% { opacity: .85 } }

/* ── contract ───────────────────────────────────────────── */
.ca-line {
  display: flex; align-items: center; gap: 12px;
  margin-top: 1.6rem; max-width: min(33rem, 100%); overflow: hidden;
  border-top: 1px solid rgba(222,217,208,.28); border-bottom: 1px solid rgba(222,217,208,.1);
  padding: 11px 0;
  font-family: var(--mono); font-size: 12.5px;
}
.ca-k { font-size: 9.5px; letter-spacing: .2em; color: var(--text-3); }
.ca {
  all: unset; cursor: pointer; font: inherit; color: var(--text);
  display: inline-flex; align-items: center; gap: 12px; flex: 1 1 0%; min-width: 0; overflow: hidden;
}
.ca-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 0%; }
.ca-hint { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); flex: none; }
.ca:hover .ca-hint, .ca:focus-visible .ca-hint { color: var(--mask); }
.ca.done .ca-hint { color: var(--mask); }

/* ── frames ─────────────────────────────────────────────── */
main { position: relative; }
.frame { position: relative; }
.frame > figure:not(.sub) { position: relative; margin: 0; height: 92svh; min-height: 460px; overflow: hidden; }
.frame > figure:not(.sub)::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,10,.8) 0%, rgba(7,8,10,.25) 18%, transparent 34%, transparent 52%, rgba(7,8,10,.97) 100%);
}
.frame > figure:not(.sub) > figcaption {
  position: absolute; left: var(--pad); top: 58px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-2);
}
.frame.right > figure:not(.sub) > figcaption { left: auto; right: var(--pad); text-align: right; }

.plate {
  position: relative; z-index: 3;
  max-width: var(--col);
  margin: -14vh var(--pad) 0;
  padding: 0 0 12vh;
}
.frame.right .plate { margin-left: auto; margin-right: var(--pad); }
@media (min-width: 1100px) {
  .plate { margin-left: clamp(var(--pad), 12vw, 12rem); }
  .frame.right .plate { margin-right: clamp(var(--pad), 12vw, 12rem); margin-left: auto; }
}

h2 {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-2); margin-bottom: 1.5rem;
  display: flex; align-items: baseline; gap: 1.4rem;
}
h2 .n { color: var(--mask); opacity: .8; }
.plate p { margin-bottom: 1.15em; max-width: 34ch; }
.plate p:last-child { margin-bottom: 0; }
.plate .last { font-style: italic; color: var(--text-2); }

.terms { list-style: none; margin: 0; padding: 0; }
.terms li { position: relative; padding-left: 1.6rem; margin-bottom: .7em; max-width: 40ch; }
.terms li::before { content: "—"; position: absolute; left: 0; color: var(--text-3); }

/* the original cartoon, sitting in the dark like a filed document */
.inset { margin: 2.5rem 0 0; max-width: 16rem; }
.inset > img {
  width: 100%; height: auto;
  background: #f6f4ee;              /* the drawing kept as a print, lit in the dark */
  padding: 14px 12px;
  box-shadow: 0 18px 50px rgba(0,0,0,.75);
  filter: brightness(.9) saturate(.98);
  transition: filter .5s, transform .5s;
  transform: rotate(-.5deg);
}
.inset:hover > img { filter: brightness(1) saturate(1); transform: rotate(0deg); }
.inset figcaption {
  margin-top: .7rem;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3);
}

/* second image inside a frame */
figure.sub {
  position: relative; margin: 0 var(--pad) 12vh;
  max-width: 46rem; aspect-ratio: 3 / 2; overflow: hidden;
}
.frame.right figure.sub { margin-left: auto; }
@media (min-width: 1100px) {
  figure.sub { margin-right: clamp(var(--pad), 12vw, 12rem); }
}
figure.sub figcaption {
  position: absolute; left: 14px; bottom: 10px; top: auto; right: auto; z-index: 2;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-3); text-shadow: 0 1px 10px #000;
}

/* closing full-bleed */
figure.close { position: relative; margin: 0; height: 108svh; min-height: 520px; overflow: hidden; }
figure.close::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,8,10,.9) 0%, transparent 28%, transparent 58%, var(--void) 100%);
}
figure.close figcaption {
  position: absolute; left: 0; right: 0; bottom: 12vh; z-index: 2; text-align: center;
  font-family: var(--mono); font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--text-2);
}

/* ── ledger ─────────────────────────────────────────────── */
.ledger { max-width: 52rem; margin: 0 auto; padding: 0 var(--pad) 2rem; }
.ledger-row {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1.5rem;
  padding: 13px 0; border-bottom: 1px solid var(--line); align-items: center;
}
.ledger-row:first-child { border-top: 1px solid var(--line); }
.ledger .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); }
.ledger .v { font-family: var(--mono); font-size: 12.5px; color: var(--text); min-width: 0; }
#live b { color: var(--mask); font-weight: 400; }
.out { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.8rem; font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.out a { text-decoration: none; color: var(--text-2); border-bottom: 1px solid var(--line); padding-bottom: 3px; }
.out a:hover { color: var(--mask); border-color: var(--mask); }

/* ── notes and end ──────────────────────────────────────── */
.notes {
  max-width: 52rem; margin: 4rem auto 0; padding: 1.4rem var(--pad) 0 calc(var(--pad) + 1.4rem);
  font-size: 13.5px; line-height: 1.6; color: var(--text-2);
}
.notes li { margin-bottom: .5em; padding-left: .3rem; }
.notes li::marker { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.notes li:target { color: var(--text); }
.end { max-width: 52rem; margin: 3rem auto 0; padding: 1.4rem var(--pad) 5rem; }
.fine { font-size: 12.5px; line-height: 1.6; color: var(--text-3); max-width: 62ch; }

/* ── small screens ──────────────────────────────────────── */
@media (max-width: 700px) {
  body { font-size: 18px; }
  .frame > figure:not(.sub) { height: 66svh; }
  figure.sub { max-width: none; margin-bottom: 9vh; }
  .plate { margin-top: -8vh; padding-bottom: 9vh; }
  .plate p, .terms li { max-width: none; }
  figure.close { height: 76svh; }
  .ledger-row { grid-template-columns: 1fr; gap: .35rem; }
  .out { gap: 1.1rem; }
  .ca-line { font-size: 11.5px; gap: 9px; }
  .ledger .v { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shot { transition: none; filter: brightness(1) contrast(1.02) saturate(.95); transform: none; }
  .scroll-cue { animation: none; }
}