/* Tember — filmic foundation. Tokens + the analog treatment layer.
   Fonts are self-hosted (see fonts/fonts.css) so the site makes no
   third-party requests — the privacy page says so, and it must stay true. */
@import url('/fonts/fonts.css');

:root{
  --paper:#D4D0C7; --darkroom:#16120E; --ink:#2B2620; --silver:#B9B3A6;
  --copper:#A65A2E; --safelight:#C97B4A; --grey18:#767676;
  /* paper-side pair: copper and 18% grey both fail AA on Paper (3.31:1 / 2.95:1) */
  --copper-ink:#7A3D1C; --mute:#5C564C;
  --edge:#3A332B; --dust:#8D867A;
  --display:'Fraunces',Georgia,serif;
  --text:'Newsreader',Georgia,'Times New Roman',serif;
  --mono:'Courier Prime','Courier New',monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ── type ─────────────────────────────────────────────── */
body{font-family:var(--text);font-size:17px;line-height:1.62;text-wrap:pretty}
.fr{font-family:var(--display);font-weight:900;letter-spacing:-0.02em}
.mono{font-family:var(--mono)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--grey18)}

/* ── grain: sits over everything, never intercepts clicks.
   The page must paint its background across the full viewport or the
   overlay blend has no backdrop below short content. ── */
html{background:inherit}
body{min-height:100vh;box-sizing:border-box}
.grain::after{content:"";position:fixed;inset:-60px;pointer-events:none;z-index:99;background-image:var(--grain);opacity:.34;mix-blend-mode:overlay;animation:grainshift 1.1s steps(3) infinite}
.grain-soft::after{opacity:.18;animation:none}
@keyframes grainshift{0%{transform:translate(0,0)}33%{transform:translate(-14px,9px)}66%{transform:translate(11px,-12px)}100%{transform:translate(0,0)}}
@media (prefers-reduced-motion:reduce){.grain::after{animation:none}}

/* ── lens: vignette + a warm light leak ── */
.vignette{position:relative}
.vignette>.vig{position:absolute;inset:0;pointer-events:none;background:radial-gradient(118% 88% at 50% 42%,transparent 38%,rgba(0,0,0,.5) 100%)}
.leak{position:absolute;inset:0;pointer-events:none;background:linear-gradient(102deg,transparent 54%,rgba(201,123,74,.16) 70%,rgba(201,123,74,.05) 78%,transparent 86%)}

/* ── the print: a lab print with a white margin, hung slightly crooked ── */
.print{background:#EDE9E0;padding:13px 13px 42px;box-shadow:0 22px 60px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.35) inset;transform:rotate(-1.3deg)}
.print>.frame{aspect-ratio:3/4;background:
  repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 3px,transparent 3px 7px),
  linear-gradient(168deg,#C9A689 0%,#8A6F5C 46%,#3E3128 100%);box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
.print>.cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A8175;margin-top:11px;text-align:center}
.halation{box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 70px rgba(201,123,74,.24)}

/* ── 35mm rail: sprocketed film edge, use as a divider or page edge ── */
.rail{height:26px;background:
  repeating-linear-gradient(90deg,transparent 0 11px,#D4D0C7 11px 27px,transparent 27px 38px) center/auto 11px no-repeat,
  #0C0A08;border-top:1px solid #241f19;border-bottom:1px solid #241f19}
.edge-code{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--safelight)}

/* ── frame counter / date stamp: the little orange numbers in the corner ── */
.stamp{font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.14em;color:#E2743B;text-shadow:0 0 9px rgba(226,116,59,.75),0 0 22px rgba(226,116,59,.35)}

/* ── surfaces ── */
.on-dark{background:var(--darkroom);color:var(--silver)}
.on-paper{background:var(--paper);color:var(--ink);background-image:radial-gradient(80% 60% at 20% 0%,rgba(255,255,255,.5),transparent 60%),radial-gradient(70% 70% at 90% 100%,rgba(43,38,32,.09),transparent 60%)}
.hair{border:0;border-top:1px solid var(--edge)}
a{color:var(--copper-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#5F2E13}
.on-dark a{color:var(--safelight)}
.on-dark a:hover{color:#E2743B}