/* Grainulation Blog — story-specific artwork inside a consistent publication frame. */
@font-face { font-family:'Libre Caslon Display';src:url('/fonts/libre-caslon-display.ttf') format('truetype');font-display:swap;font-weight:400;font-style:normal; }
:root { color-scheme:dark;--cover:#181619;--edge:#100f11;--raised:#242126;--gold:#fcd44c;--gold-rule:#a47a37;--light:#eee7d7;--muted:#bdb4a4;--rule:#51483a;--paper:#f1ebdd;--ink:#27231f;--paper-muted:#665e53;--paper-rule:#c4bba8;--display:'Libre Caslon Display',Baskerville,Georgia,serif;--serif:'Iowan Old Style',Baskerville,'Palatino Linotype',Georgia,serif;--sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:ui-monospace,SFMono-Regular,Consolas,monospace;--settle:cubic-bezier(.22,.72,.22,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth;scroll-padding-top:28px; }
body { margin:0;background-color:var(--cover);background-image:linear-gradient(#181619 0 125px,transparent 280px),url('/paper-grain.svg'),radial-gradient(ellipse at 75% 25%,#252025,var(--cover) 53%,var(--edge));color:var(--light);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
::selection { background:var(--gold);color:var(--cover); }
a { color:inherit;text-underline-offset:5px;text-decoration-thickness:1px; }
a,button { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:2px solid currentColor;outline-offset:6px; }
button { font:inherit;touch-action:manipulation; }
button:not(:disabled),summary { cursor:pointer; }
button:disabled { opacity:.55;cursor:default; }
img,svg { max-width:100%; }
h1,h2,h3,p,figure { margin-top:0; }
.site-width { width:min(1320px,calc(100% - 112px));margin-inline:auto; }
.site-header { min-height:104px;display:flex;align-items:center;gap:26px; }
.brand { display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-size:21px;font-weight:600;letter-spacing:-.055em;color:var(--light); }
.brand img { width:36px;height:36px;object-fit:contain; }
.journal-label { font:11px/1.5 var(--sans);color:var(--muted);border-left:1px solid var(--rule);padding-left:26px; }
.header-nav { margin-left:auto;display:flex;gap:30px; }
.header-nav a { min-height:44px;display:inline-flex;align-items:center;gap:7px;position:relative;text-decoration:none;font-size:12px; }
.header-nav a::after { content:'';height:1px;position:absolute;bottom:8px;inset-inline:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--settle); }
.header-nav a:hover::after { transform:scaleX(1); }
.header-nav a:hover { color:var(--gold); }

/* One cover image, one invitation. The art belongs to this story, not the site brand. */
.editorial-cover { min-height:min(780px,calc(100svh - 104px));position:relative;display:grid;grid-template-columns:1fr 1.12fr;grid-template-rows:1fr auto;align-items:center;column-gap:22px;padding:44px 0 0;isolation:isolate; }
.cover-copy { grid-column:1;grid-row:1;position:relative;z-index:2;padding-bottom:38px;max-width:560px; }
.cover-meta,.article-meta { display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;color:var(--muted);font:11px/1.5 var(--sans); }
.cover-meta>:first-child { color:var(--gold); }
.draft-label { border-bottom:1px dotted #796e58; }
.cover-copy h1 { font:400 clamp(74px,8.3vw,124px)/.91 var(--display);letter-spacing:-.035em;margin:32px 0 27px;color:var(--light); }
.cover-copy h1 a { text-decoration:none; }
.title-second { display:block;color:var(--gold); }
.cover-deck { max-width:390px;font:16px/1.7 var(--sans);color:var(--muted);margin:0 0 28px;text-wrap:pretty; }
.cover-actions { display:flex;align-items:center;gap:26px;flex-wrap:wrap; }
.action-link { min-height:48px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;color:var(--gold);font:13px/1.4 var(--sans);text-decoration:none;border-bottom:1px solid var(--gold-rule);padding:12px 0; }
.action-link span,.text-link span { display:inline-block;transition:transform .25s var(--settle); }
.action-link:hover span,.text-link:hover span { transform:translate(3px,-3px); }
.action-link:active { transform:translateY(1px); }
.text-link { display:inline-flex;gap:9px;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);font:12px/1.5 var(--sans); }
.text-link:hover { color:var(--light); }
.cover-visual { grid-column:2;grid-row:1;position:relative;height:560px;margin-right:-30px;overflow:hidden;align-self:center; }
.story-art { display:block;position:absolute;max-width:none;width:108%;height:auto;left:-4%;top:-25%;filter:drop-shadow(0 28px 35px #0005); }
.cover-colophon { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:86px;padding:22px 0;border-top:1px solid var(--rule);font:11px/1.6 var(--sans);color:var(--muted); }
.cover-colophon a { color:var(--light); }
.issue-index { border-top:1px solid var(--rule);padding:48px 0 64px; }
.issue-index>h2 { color:var(--muted);font:11px var(--sans);margin-bottom:26px; }
.issue-entry { display:grid;grid-template-columns:40px 1fr auto;gap:22px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--rule);text-decoration:none; }
.issue-number { font:11px var(--mono);color:var(--gold); }
.issue-entry h3 { font:36px/1.1 var(--display);margin:0 0 12px; }
.issue-entry p { max-width:650px;color:var(--muted);font:14px/1.6 var(--sans);margin:0; }
.issue-entry:hover h3 { color:var(--gold); }.issue-time { font:11px var(--sans);color:var(--muted); }

/* The closing scene is a brand composition, independent of the post artwork. */
.site-footer { position:relative;isolation:isolate;min-height:88svh;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto auto;column-gap:48px;padding:64px 0 30px;overflow:hidden;border-top:1px solid var(--rule); }
.footer-kicker { grid-column:1;grid-row:1;margin:0;color:var(--muted);font:11px/1.5 var(--sans); }
.footer-links { grid-column:1;grid-row:2;display:flex;flex-direction:column;align-self:center;max-width:430px;padding:24px 0;z-index:2; }
.footer-links a { display:grid;grid-template-columns:25px 1fr 20px;align-items:baseline;gap:17px;min-height:60px;padding:15px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:color .2s,padding-left .25s var(--settle); }
.footer-links a>span { color:var(--gold);font:10px var(--sans); }
.footer-links a strong { color:var(--light);font:400 clamp(25px,2.6vw,37px)/1.1 var(--display);letter-spacing:-.015em; }
.footer-links a:hover { padding-left:8px; }.footer-links a:hover strong { color:var(--gold); }
.footer-links a>span:last-child { transition:transform .25s var(--settle); }.footer-links a:hover>span:last-child { transform:translate(3px,-3px); }
.footer-brand-art { position:absolute;z-index:-1;width:clamp(240px,25vw,350px);height:auto;right:7%;top:100px;object-fit:contain;mask-image:radial-gradient(ellipse at center,#000 40%,transparent 71%);opacity:.8;transform:rotate(-9deg); }
.footer-wordmark { grid-column:1/-1;grid-row:3;position:relative;display:block;width:100%;color:var(--gold);font:500 clamp(68px,15.4vw,222px)/.95 var(--sans);letter-spacing:-.082em;text-decoration:none;margin:20px 0 24px;white-space:nowrap; }
.footer-wordmark>span { color:var(--gold-rule); }
.footer-note { grid-column:1/-1;grid-row:4;border-top:1px solid var(--rule);padding-top:18px;color:var(--muted);font:11px/1.6 var(--sans);margin:0; }

/* Reading pages retain the blog frame; paper is a functional reading surface. */
.article-mast { position:relative;padding:16px 0 66px;min-height:410px; }
.back-link { display:inline-flex;align-items:center;min-height:44px;color:var(--muted);font:12px var(--sans);text-decoration:none;margin-bottom:28px; }
.back-link:hover { color:var(--gold); }
.article-meta { margin-bottom:22px; }
.article-title { position:relative;z-index:1;max-width:850px;font:400 clamp(58px,7.6vw,110px)/.98 var(--display);letter-spacing:-.035em;margin:0 0 24px;color:var(--ink); }
.article-deck { position:relative;z-index:1;max-width:660px;font:19px/1.55 var(--sans);color:var(--muted);margin-bottom:25px; }
.article-author { color:var(--muted);font:11px var(--sans);margin:0; }
.article-art { position:absolute;right:0;top:5%;width:330px;height:330px;object-fit:contain;opacity:.3;pointer-events:none;z-index:0; }
.paper-sheet { background:var(--paper) url('/paper-grain.svg') repeat;color:var(--ink);color-scheme:light;padding:76px 0 80px; }
.article-grid { display:grid;grid-template-columns:170px minmax(0,720px);column-gap:clamp(45px,8vw,125px);justify-content:start;align-items:start; }
.chapter-nav { position:sticky;top:36px;display:flex;flex-direction:column;gap:4px;font:11px/1.5 var(--sans); }
.chapter-nav>p { color:var(--paper-muted);font:10px/1.5 var(--sans);margin-bottom:18px; }
.chapter-nav a { min-height:44px;display:flex;gap:11px;align-items:baseline;padding:10px 10px;margin-left:-10px;border-left:1px solid var(--paper-rule);text-decoration:none;color:var(--paper-muted); }
.chapter-nav a span { font:10px var(--mono);color:#776644; }
.chapter-nav a:hover,.chapter-nav a[aria-current='location'] { color:var(--ink);border-left-color:var(--ink); }
.chapter-nav a[aria-current='location'] { border-left-width:2px;padding-left:9px; }
.article-prose { min-width:0;max-width:720px;font:20px/1.72 var(--serif); }
.essay-section { margin-bottom:58px;scroll-margin-top:32px; }
.essay-section h2,.article-sources h2 { font:400 38px/1.12 var(--display);letter-spacing:-.02em;margin:0 0 24px;text-wrap:balance; }
.essay-section p { margin:0 0 23px; }
.section-source { color:var(--paper-muted);font:11px/1.8 var(--sans); }
.section-source a { display:inline-block;min-height:28px; }
.article-prose a:hover { color:#77500a; }
.results-figure { margin:38px 0 42px;padding:28px 0;border-block:1px solid var(--paper-rule);font-family:var(--sans); }
.results-figure h3 { font:400 26px/1.2 var(--display);margin-bottom:12px; }
.results-figure .instrument-heading { display:flex;justify-content:space-between;gap:20px;color:var(--paper-muted);font:11px/1.5 var(--sans);margin-bottom:22px; }
.result-ledger { display:flex;flex-direction:column;gap:18px;margin:24px 0; }
.result-row { display:grid;grid-template-columns:minmax(0,1fr) 55px;column-gap:20px;row-gap:8px;color:var(--ink);font:13px/1.4 var(--sans);transition:opacity .2s; }
.result-row strong { text-align:right;font:400 25px/1 var(--display);font-variant-numeric:tabular-nums; }
.result-bar { grid-column:1/-1;height:7px;background:#ded5c3;overflow:hidden; }
.result-bar span { display:block;height:100%;background:#7d715b;transform-origin:left;transition:background .25s; }
.result-row[data-outcome='kept-correct'] .result-bar span { width:69.20%; }
.result-row[data-outcome='corrected'] .result-bar span { width:17.30%;background:#947016; }
.result-row[data-outcome='harmed'] .result-bar span { width:2.28%;background:#983e29; }
.result-row[data-outcome='kept-wrong'] .result-bar span { width:11.22%; }
.results-figure[data-focus='corrected'] .result-row[data-outcome='corrected'],.results-figure[data-focus='harmed'] .result-row[data-outcome='harmed'] { background:#e3d7bc;outline:8px solid #e3d7bc; }
.results-figure[data-focus='corrected'] .result-row[data-outcome='corrected'] strong,.results-figure[data-focus='harmed'] .result-row[data-outcome='harmed'] strong { font-weight:600; }
.result-controls { display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 12px; }
[data-result-focus] { min-height:44px;border:1px solid #8c7b59;background:transparent;color:var(--ink);font:12px var(--sans);padding:10px 14px;transition:background .18s,color .18s; }
[data-result-focus]:hover { background:#e3d7bc; }
[data-result-focus][aria-pressed='true'] { background:var(--ink);color:var(--paper);border-color:var(--ink); }
[data-result-status] { display:block;color:var(--ink);font:12px/1.65 var(--sans);min-height:42px;margin-bottom:12px; }
.results-figure figcaption { color:var(--paper-muted);font:11px/1.7 var(--sans); }
.verify-flow { margin:32px 0;padding:22px;border-block:1px solid var(--paper-rule);font:14px/1.6 var(--sans); }
.article-sources { padding-top:34px;border-top:1px solid var(--paper-rule);scroll-margin-top:32px; }
.article-sources p { color:var(--paper-muted);font:12px/1.8 var(--sans);overflow-wrap:anywhere; }
.article-sources ol,.article-sources ul { padding-left:22px;font:14px/1.8 var(--sans); }
.article-sources li { padding:6px 0; }.article-sources a { overflow-wrap:anywhere; }
.article-end { margin-top:42px;padding-top:24px;border-top:1px solid var(--paper-rule); }.article-end .back-link { color:var(--paper-muted); }
.small-label { color:var(--muted);font:10px/1.5 var(--sans);letter-spacing:.05em;margin-bottom:16px; }.paper-sheet .small-label { color:var(--paper-muted); }
.reading-progress { position:fixed;z-index:30;height:3px;inset:0 0 auto;pointer-events:none; }
.reading-progress-bar { width:100%;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left; }
.skip-link { position:fixed;top:10px;left:10px;z-index:50;transform:translateY(-200%);padding:12px 20px;background:var(--gold);color:var(--cover); }.skip-link:focus { transform:none; }
.empty-cover { min-height:68vh;padding:100px 0; }.empty-cover h1 { max-width:950px;font:400 clamp(52px,7.6vw,108px)/1.02 var(--display);letter-spacing:-.035em;margin-bottom:32px; }.empty-cover>p:not(.small-label) { max-width:520px;color:var(--muted);font-size:17px; }


@media(min-width:1700px) { .cover-visual { height:650px; }.story-art { top:-14%; }.editorial-cover { min-height:820px; } }
@media(max-width:1100px) {
 .site-width { width:calc(100% - 72px); }.editorial-cover { column-gap:0; }.cover-copy h1 { font-size:94px; }.cover-visual { height:510px;margin-right:-25px; }.story-art { width:120%;left:-10%;top:-10%; }.cover-deck { max-width:340px;font-size:15px; }.article-grid { grid-template-columns:150px minmax(0,1fr);gap:44px; }.article-prose { font-size:19px; }.article-art { opacity:.18; }.footer-brand-art { width:300px;right:0; }
}
@media(max-width:800px) {
 .site-width { width:calc(100% - 48px); }.site-header { min-height:88px;gap:18px; }.journal-label { padding-left:18px; }.header-nav { gap:20px; }.editorial-cover { grid-template-columns:1fr;grid-template-rows:auto auto auto;padding-top:0;min-height:0; }.cover-visual { grid-column:1;grid-row:1;height:310px;width:min(600px,100%);margin:0 auto; }.story-art { width:110%;left:-5%;top:-50%; }.cover-copy { grid-column:1;grid-row:2;max-width:620px;padding-bottom:36px; }.cover-copy h1 { font-size:86px;max-width:650px;margin:20px 0; }.title-second { display:inline;margin-left:.12em; }.cover-deck { max-width:500px;font-size:16px;margin-bottom:21px; }.cover-colophon { grid-row:3;min-height:70px; }.article-grid { display:block; }.chapter-nav { position:static;flex-direction:row;flex-wrap:wrap;gap:0 18px;margin-bottom:38px;padding-bottom:22px;border-bottom:1px solid var(--paper-rule); }.chapter-nav>p { width:100%; }.chapter-nav a { margin:0;padding:8px 0;border:0; }.chapter-nav a[aria-current='location'] { padding-left:0;border:0;text-decoration:underline; }.article-prose { max-width:100%; }.article-art { width:260px;height:260px;top:20%;opacity:.12; }.article-title { font-size:76px; }.paper-sheet { padding:44px 0 54px; }.site-footer { min-height:78svh;column-gap:24px;padding-top:42px; }.footer-links { max-width:340px; }.footer-links a strong { font-size:30px; }.footer-brand-art { width:350px;right:-50px;top:70px;opacity:.6; }.footer-wordmark { font-size:15vw; }
}
@media(max-width:520px) {
 .site-width { width:calc(100% - 40px); }.site-header { min-height:76px;gap:12px; }.brand { font-size:18px;gap:6px; }.brand img { width:28px;height:28px; }.journal-label { font-size:10px;padding-left:12px; }.header-nav { gap:14px; }.header-nav a { font-size:10px; }.header-nav a:first-child { display:none; }.cover-visual { height:205px;margin-top:-3px; }.story-art { width:105%;left:-2%;top:-48%; }.cover-copy h1 { font-size:64px;line-height:.94;margin:20px 0 17px; }.title-second { display:block;margin-left:0; }.cover-meta,.article-meta { font-size:10px;gap:8px 14px; }.cover-deck { font-size:14px;line-height:1.65;margin-bottom:16px; }.cover-actions { gap:22px; }.action-link { font-size:13px; }.text-link { font-size:11px; }.cover-copy { padding-bottom:28px; }.cover-colophon { display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:18px 0;font-size:10px; }.issue-entry { grid-template-columns:24px 1fr;gap:12px; }.issue-entry h3 { font-size:29px; }.issue-time { grid-column:2; }
 .site-footer { grid-template-columns:1fr;min-height:78svh;padding-top:32px; }.footer-kicker { font-size:10px; }.footer-links { grid-column:1;max-width:100%;width:100%;align-self:start;padding-top:25px;padding-bottom:130px; }.footer-links a { min-height:58px;grid-template-columns:20px 1fr 20px;gap:14px; }.footer-links a strong { font-size:30px; }.footer-brand-art { width:240px;right:-58px;top:340px;opacity:.42; }.footer-wordmark { font-size:17vw;margin-top:15px;margin-bottom:23px;letter-spacing:-.085em; }.footer-note { font-size:10px; }
 .article-mast { min-height:0;padding-bottom:40px; }.back-link { margin-bottom:24px; }.article-title { font-size:57px; }.article-deck { font-size:17px;line-height:1.6; }.article-author { font-size:10px; }.article-art { display:none; }.article-prose { font-size:19px;line-height:1.72; }.essay-section { margin-bottom:43px; }.essay-section h2,.article-sources h2 { font-size:33px; }.section-source { font-size:11px; }.chapter-nav { gap:0 16px;font-size:11px; }.result-row { column-gap:14px; }.results-figure h3 { font-size:26px; }.result-controls { gap:7px; }[data-result-focus] { font-size:11px;padding:10px 11px; }.article-sources ol { font-size:13px; }
}
@media(max-width:360px) { .cover-visual { height:175px; }.story-art { top:-46%; }.cover-copy h1 { font-size:57px; }.cover-meta { gap:7px 10px;font-size:9px; }.cover-deck { font-size:13px; }.journal-label { display:none; } }
@keyframes cover-arrive { from { opacity:0;transform:translateY(14px) scale(.985);clip-path:inset(0 0 12% 0); } to { opacity:1;transform:none;clip-path:inset(0); } }
@keyframes copy-arrive { from { opacity:0;transform:translateY(7px); } to { opacity:1;transform:none; } }
@media(prefers-reduced-motion:no-preference) {
 .story-art { animation:cover-arrive .9s cubic-bezier(.16,1,.3,1) both; }
 .cover-copy { animation:copy-arrive .65s cubic-bezier(.16,1,.3,1) both; }
 .footer-wordmark { transition:color .35s; }
 .footer-wordmark:hover { color:#fff0b8; }
 .result-bar span { transition:background .3s,transform .45s cubic-bezier(.16,1,.3,1); }
 .results-figure[data-focus='harmed'] [data-outcome='harmed'] .result-bar span,
 .results-figure[data-focus='corrected'] [data-outcome='corrected'] .result-bar span { transform:scaleY(1.45); }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { animation:none!important;transition:none!important; }::view-transition-old(root),::view-transition-new(root) { animation:none!important; } }
@media(forced-colors:active) { .paper-sheet { background:Canvas;color:CanvasText; }.result-bar { border:1px solid CanvasText; }.result-bar span { background:CanvasText; } }

@media(max-height:600px) { .chapter-nav { position:static; } }
