/* Shared tokens and chrome for the Phase 1 prototypes. Each prototype adds its own look on top. */
:root {
  --ink: #e9e2d4;          /* warm paper-white type */
  --ink-dim: #9d968a;
  --stage: #0b0a09;        /* near-black, slightly warm */
  --accent: #c9a96e;       /* candle */
  --warmth: 1;             /* 1 sepia ... 0 cold B&W, driven by scroll */
  --dread: 0;              /* 0 open ... 1 closed in, driven by scroll */
  --serif: "Spectral", "EB Garamond", Georgia, serif;
  --mono: "Courier Prime", "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--stage); color: var(--ink); }
body { font-family: var(--serif); font-size: clamp(18px, 1.15vw + 12px, 23px); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

/* Every photograph and scan is graded by the same two variables. Colour is only ever taken away. */
:root { --grade: grayscale(calc(1 - var(--warmth) * 0.55)) sepia(calc(var(--warmth) * 0.55)) contrast(calc(1 + var(--dread) * 0.18)) brightness(calc(1 - var(--dread) * 0.25)); }
.graded { filter: var(--grade); }

/* The frame closes in as things get worse. */
.vignette { position: fixed; inset: 0; pointer-events: none; z-index: 40;
  background: radial-gradient(ellipse at 50% 48%, transparent calc(62% - var(--dread) * 32%), rgba(0,0,0,calc(0.55 + var(--dread) * 0.4)) calc(100% - var(--dread) * 18%)); }
.grain { position: fixed; inset: -50%; pointer-events: none; z-index: 41; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

/* Title card */
.titlecard { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; text-align: center; background: var(--stage); transition: opacity 1.6s ease; }
.titlecard.gone { opacity: 0; pointer-events: none; }
.titlecard h1 { font-weight: 300; letter-spacing: .02em; font-size: clamp(30px, 4vw, 56px); margin: 0 0 .3em; }
.titlecard p { color: var(--ink-dim); margin: 0 0 2.2em; font-style: italic; }
.titlecard .begin { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn { font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 1px solid rgba(233,226,212,.35); padding: 12px 22px; cursor: pointer; letter-spacing: .06em; }
.btn:hover, .btn:focus-visible { border-color: var(--accent); color: #fff; outline: none; }
.titlecard small { position: absolute; bottom: 24px; left: 16px; right: 16px; color: var(--ink-dim); font-size: 13px; }

/* Persistent controls */
.controls { position: fixed; top: 14px; right: 14px; z-index: 70; display: flex; gap: 8px; }
.controls .btn { padding: 7px 12px; font-size: 13px; background: rgba(0,0,0,.4); }
.backlink { position: fixed; top: 14px; left: 14px; z-index: 70; color: var(--ink-dim); font-size: 13px; text-decoration: none; letter-spacing: .05em; }
.backlink:hover { color: var(--ink); }

/* Labels */
.meta { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.place { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--ink-dim); text-transform: uppercase; }
.caption { font-size: 13px; color: var(--ink-dim); line-height: 1.45; font-style: italic; }
.source { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); letter-spacing: .06em; }
.ai-label { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; border: 1px solid currentColor; padding: 1px 5px; color: var(--accent); margin-right: 6px; vertical-align: 1px; }
.de { font-style: italic; color: #d8cfbd; }
.en { color: var(--ink-dim); font-size: .85em; }

@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }