/* Just Living History — "the case file". Parchment, ink, oxblood, survey contours, typewritten metadata. */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-full-normal.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-latin-full-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-latin-opsz-normal.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/source-serif-4-latin-opsz-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --bg:#F3EDE2; --card:#FAF6EE; --ink:#1B1A17; --ink-2:#4F4A41; --ink-3:#857D6F;
  --line:#DCD2C0; --line-strong:#C3B7A2; --hover:rgba(27,26,23,.05);
  --accent:#8B2A1E; --accent-hover:#A33424; --accent-ink:#FBF8F2; --accent-soft:rgba(139,42,30,.14);
  --brass:#A8823A; --slate:#55665C;
  --font-display:"Fraunces",Georgia,serif; --font-body:"Source Serif 4",Georgia,serif; --font-ui:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --display-weight:560; --display-tracking:-.022em; --ui-weight:500; --em-weight:460;
  --radius:3px; --radius-sm:2px; --radius-pill:2px; --radius-btn:2px;
  --header-bg:rgba(243,237,226,.9);
  --cover-bg:#EDE4D3; --cover-line:#8C9A8E; --cover-ink:#1B1A17;
  --footer-bg:#1B1A17; --footer-ink:#EDE5D6;
  --nl-bg:#1B1A17; --nl-ink:#F3EDE2; --nl-muted:rgba(243,237,226,.66); --nl-accent:#D0563F;
  --play-bg:rgba(27,26,23,.6);
  --fs-body:17.5px;
  --logo-h:46px;
  --av-s:30%; --av-l:38%;
}
body{font-variation-settings:"opsz" 18;background-image:radial-gradient(rgba(27,26,23,.035) 1px,transparent 1px);background-size:4px 4px}
h1,h2,h3,h4{font-variation-settings:"opsz" 144,"SOFT" 0,"WONK" 0}
.hero h1 em,.page-head h1 em{font-variation-settings:"opsz" 144,"SOFT" 30,"WONK" 1}

/* hero: survey map */
.hero{background:linear-gradient(90deg,var(--bg) 0%,rgba(243,237,226,.92) 42%,rgba(243,237,226,.55) 100%),url(/brand/contours.svg) center/cover no-repeat,var(--bg)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(27,26,23,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(27,26,23,.05) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent 30%,#000 75%);-webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%)}
.hero-coords{position:absolute;right:clamp(16px,4vw,32px);top:22px;font-family:var(--font-ui);font-size:.72rem;letter-spacing:.2em;color:var(--slate)}
.hero-feature .player{border:1px solid var(--ink);box-shadow:10px 10px 0 -1px var(--bg),10px 10px 0 0 var(--ink)}
.stamp{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border:1.5px solid currentColor;padding:5px 10px;transform:rotate(-2deg);margin-bottom:14px}
.file-tab{font-family:var(--font-ui);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

.promise{background:var(--card)}
.promise strong{font-style:italic;color:var(--accent)}

/* cards read like archive folders */
.vcard .thumb{border:1px solid var(--line-strong)}
.vcard .thumb::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);pointer-events:none}
.ecard{background:var(--card)}
.ecard .art{border-bottom:1px solid var(--line)}
.ecard h3{font-variation-settings:"opsz" 72}

/* on this day */
.otd{border:1px solid var(--ink);background:var(--card);position:relative}
.otd-head{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--ink);background:var(--ink);color:var(--bg);font-family:var(--font-ui);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase}
.otd-row{display:grid;grid-template-columns:120px 1fr auto;gap:20px;padding:18px 20px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:baseline}
.otd-row:last-child{border-bottom:0}
.otd-row:hover{background:var(--hover);color:inherit}
.otd-row:hover h3{color:var(--accent)}
.otd-date{font-family:var(--font-ui);font-size:.8rem;letter-spacing:.08em;color:var(--accent)}
.otd-row h3{margin:0 0 4px;font-size:1.3rem}
.otd-row p{margin:0;color:var(--ink-2);font-size:.95rem}
@media (max-width:640px){.otd-row{grid-template-columns:1fr}}

.newsletter{background-image:linear-gradient(90deg,#1B1A17 35%,rgba(27,26,23,.88)),url(/brand/contours.svg);background-size:cover;background-position:center}
.newsletter .btn-primary{background:#C0472F;border-color:#C0472F}
.site-footer .foot-brand svg{color:#EDE5D6;--accent:#D0563F}
.page-head{background:linear-gradient(90deg,var(--bg) 40%,rgba(243,237,226,.7)),url(/brand/contours.svg) right center/900px auto no-repeat}
.facts{border-color:var(--ink)}
.facts h2{background:var(--ink);color:var(--bg);border-bottom-color:var(--ink)}
.board-list{border-color:var(--ink)}
::selection{background:var(--accent);color:var(--accent-ink)}