/* =====================================================================
   The Good Times — Direction B "Terminal" (black) · terminal.css
   Built 2026-10-11 from mocks/b-final/b.css (Nina Forma, B-SPEC.md). SCRATCH — NOT LIVE.
   iht.css stays untouched so the archive editions keep rendering.
   Fonts: https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=IBM+Plex+Mono:wght@400&display=swap
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --bg:#000000;   /* page (= iliasr.nyc dark mode) */
  --ink:#ededed;  /* headlines, body, labels        17.9:1 */
  --ink2:#b4b4b4; /* deks, subs, tree links         10.1:1 */
  --mute:#8f8f8f; /* mono meta, captions, glyphs     6.5:1 */
  --hair:#262626; /* hairlines — never text */
  --ph:#171717;   /* photo frame / missing photo */
  --f-sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --max:1280px;--pad:24px;--rail:288px;--gap:64px;--measure:680px;
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font:400 16px/24px var(--f-sans);-webkit-font-smoothing:antialiased;font-kerning:normal}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:auto}
ul{list-style:none}
[id]{scroll-margin-top:var(--s5)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.skip{position:absolute;left:-999px;top:var(--s4);z-index:9;display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s4);background:var(--ink);color:var(--bg);font:400 14px/20px var(--f-mono)}
.skip:focus{left:var(--s4)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.meta,.title,.tree,.yr,.back,.facts,.foot,.sec,.go{font-family:var(--f-mono);font-weight:400}
.meta{font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}

/* ---------- 3. Site header (same as iliasr.nyc) ---------- */
.hdr{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center;min-height:44px;font-size:18px;line-height:28px;font-weight:700;letter-spacing:-.05em;text-transform:uppercase}
.icons{display:flex;margin-right:-14px}
.icon{width:44px;height:44px;display:grid;place-items:center;color:var(--mute);background:none;border:0;cursor:pointer}
.icon:hover,.icon:focus-visible{color:var(--ink)}

/* ---------- 4. Shell: rail + feed ---------- */
.shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);column-gap:var(--gap);padding-top:var(--s7)}
.rail{position:sticky;top:var(--s5);align-self:start;max-height:calc(100vh - 48px);overflow:auto;scrollbar-width:none}
.feed{min-width:0;container-type:inline-size}
.title{margin-top:var(--s3);font-size:32px;line-height:40px;letter-spacing:-.02em}
.title a{display:inline-flex;align-items:center;min-height:44px}
.title a::after{content:"";width:2px;height:32px;margin-left:var(--s2);background:var(--ink)} /* the site's /return caret, static */
.tag{margin-top:var(--s2);font-size:14px;line-height:20px;color:var(--ink2)}

/* edition tree (desktop: always open; <1024: one 44px toggle) */
.tree{margin-top:var(--s6);font-size:14px;line-height:20px}
.tree summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;color:var(--ink);list-style:none;cursor:default}
.tree summary::-webkit-details-marker{display:none}
.tree a{display:flex;align-items:center;gap:var(--s2);min-height:44px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree .g{color:var(--mute)}
.tree a:hover,.tree a:focus-visible,.tree a[aria-current]{color:var(--ink)}
.tree a[aria-current] .g{color:var(--ink)}
@media (min-width:1024px){.tree summary{pointer-events:none}}

/* ---------- 5. Rows (every story block) ---------- */
.row{position:relative;padding:var(--s5) 0;border-top:1px solid var(--hair)}
.hed{margin-top:var(--s2);font-size:24px;line-height:32px;font-weight:700;letter-spacing:-.01em;text-wrap:pretty}
.hed a::after{content:"";position:absolute;inset:0}            /* whole block is the link */
.hed a:focus-visible{outline:none}
.hed a:focus-visible::after{outline:2px solid var(--ink);outline-offset:-2px}
.row:hover .hed a,.short:hover .hed a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--mute)}
.dek{margin-top:var(--s2);max-width:var(--measure);color:var(--ink2);text-wrap:pretty}

/* ---------- 6. Lead (01) ---------- */
.lead{padding:0 0 var(--s7);border-top:0}
.lead .hed{font-size:48px;line-height:56px;letter-spacing:-.02em}
.sub{margin-top:var(--s4);max-width:var(--measure);font-size:20px;line-height:28px;color:var(--ink2);text-wrap:pretty}
.photo{margin-top:var(--s6)}
.ph{aspect-ratio:2/1;background:var(--ph);overflow:hidden}
.ph img{height:100%;object-fit:cover}
.lead .ph img{filter:grayscale(1);transition:filter .4s ease}
.lead:hover .ph img,.lead:focus-within .ph img{filter:none}
figcaption{margin-top:var(--s2);max-width:var(--measure);font-size:12px;line-height:16px;color:var(--mute)}
.ex{margin-top:var(--s5);max-width:var(--measure);color:var(--ink2)}
.go{margin-top:var(--s4);font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.lead:hover .go{color:var(--ink)}
/* VARIANT .fit — Ilias 2026-10-05 "lead on one line at desktop": 40/48 at feed ≥880px (viewport ≥1280), fluid down to 32.
   rev1 (Nina 2026-10-11): line-height tied to size, calc(1em + 8px) — 40px gets 48, 32px gets 40; story pages use the same .fit hed. */
@media (min-width:1024px){.fit .lead .hed,.fit .story .hed{font-size:clamp(32px,4.55cqi,40px);line-height:calc(1em + 8px);letter-spacing:-.02em;text-wrap:balance}}

/* optional Dispatch Opinion (renderer block OPINION) */
.opinion{padding:var(--s5) 0 var(--s7);border-top:1px solid var(--hair)}
.opinion blockquote{margin-top:var(--s2);max-width:var(--measure);font-size:20px;line-height:28px;color:var(--ink)}
.opinion blockquote p::before{content:"“"}.opinion blockquote p::after{content:"”"}
.opinion figcaption{margin-top:var(--s2)}

/* ---------- 7. Section labels ---------- */
.sec{padding:var(--s7) 0 var(--s4);font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

/* ---------- 8. Sports ---------- */
.slead .hed{font-size:32px;line-height:40px;letter-spacing:-.02em}
.slead .dek{font-size:18px;line-height:28px}
.shorts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--s5)}
.shorts:not(:has(.short:nth-child(2))){grid-template-columns:minmax(0,1fr)}
.shorts:has(.short:nth-child(2)):not(:has(.short:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}
.short{position:relative;display:grid;grid-template-rows:subgrid;grid-row:span 3;padding:var(--s5) 0;border-top:1px solid var(--hair)}
.short .hed{font-size:20px;line-height:28px}
.short .dek{font-size:14px;line-height:20px}

/* ---------- 9. Today in History ---------- */
.tih .yr{font-size:24px;line-height:32px;color:var(--mute)}
.tih .hed{margin-top:var(--s1)}

/* ---------- 10. Footer ---------- */
.foot{max-width:calc(var(--max) - 2 * var(--pad));margin-top:var(--s8);padding:var(--s6) 0 var(--s7);border-top:1px solid var(--hair);text-align:center;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.foot p+p{margin-top:var(--s2)}
@media (max-width:1279px){.foot{margin-left:var(--pad);margin-right:var(--pad)}}

/* ---------- 11. Story page ---------- */
.back{display:flex;align-items:center;min-height:44px;margin-top:var(--s2);font-size:14px;line-height:20px;color:var(--ink)}
.back:hover{text-decoration:underline;text-underline-offset:4px}
.facts{display:grid;grid-template-columns:64px 1fr;row-gap:var(--s2);margin-top:var(--s5);font-size:12px;line-height:16px}
.facts dt{color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
.facts dd{color:var(--ink2)}
.toc{margin-top:var(--s5)}
.toc summary{font-size:12px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
.toc a{font-family:var(--f-sans);white-space:normal;padding:var(--s3) 0;line-height:20px}
.story .hed{font-size:48px;line-height:56px;letter-spacing:-.02em}
.story .photo.portrait .ph{aspect-ratio:auto;background:none}
.story .photo.portrait img{height:auto;max-height:720px;object-fit:contain;width:auto;max-width:100%}
.prose{margin-top:var(--s7);max-width:var(--measure);font-size:18px;line-height:28px;color:var(--ink)}
.prose p+p,.prose ul+p{margin-top:var(--s4)}
.prose ul{margin-top:var(--s4)}
.prose li{position:relative;padding-left:var(--s6)}
.prose li+li{margin-top:var(--s2)}
.prose li::before{content:"—";position:absolute;left:0;color:var(--mute);font-family:var(--f-mono)}
.cross{margin:var(--s7) 0 var(--s4);font-size:20px;line-height:28px;font-weight:700}
.bottom{margin-top:var(--s7);max-width:var(--measure);padding-top:var(--s5);border-top:1px solid var(--ink);font-size:18px;line-height:28px}
.bottom .meta,.sources .meta{margin-bottom:var(--s2)}
.sources{max-width:var(--measure);margin-top:var(--s5)}
.sources ul{display:flex;flex-wrap:wrap;column-gap:var(--s4)}
.sources a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:20px;color:var(--ink2);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:4px}
.sources a:hover,.sources a:focus-visible{color:var(--ink);text-decoration-color:var(--ink)}

/* ---------- 12. ≤1023: one column, tree becomes a toggle ---------- */
@media (max-width:1023px){
  .shell{grid-template-columns:minmax(0,1fr);padding-top:var(--s6)}
  .rail{position:static;max-height:none;overflow:visible;margin-bottom:var(--s6)}
  .tree{margin-top:var(--s4)}
  .tree summary{cursor:pointer;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
  .tree .tog::after{content:"+ index";font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute)}
  .tree[open] .tog::after{content:"− close"}
  .toc .tog::after{content:"+ open"}
  .tree[open] ul{border-bottom:1px solid var(--hair)}
  .tree ul{columns:2;column-gap:var(--s5)}
  .tree li{break-inside:avoid}
  .storypg .rail>.meta,.facts .dup{display:none}
  .storypg .back{margin-top:0}
  .shorts{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:none}
  .short{display:block;grid-row:auto}
  .lead .hed,.story .hed{font-size:32px;line-height:40px}
}
/* ---------- 13. ≤639: phone ---------- */
@media (max-width:639px){
  .tree ul{columns:1}
  .hed{font-size:20px;line-height:28px}
  .slead .hed{font-size:24px;line-height:32px}
  .slead .dek{font-size:16px;line-height:24px}
  .sub{font-size:18px;line-height:28px}
  .lead{padding-bottom:var(--s6)}
  .prose{margin-top:var(--s6);font-size:16px;line-height:28px}
  .bottom{font-size:16px;line-height:28px}
  .tih .yr{font-size:20px;line-height:28px}
  .sec{padding-top:var(--s6)}
}
/* ---------- 14. Build additions (render-n53-terminal.py) ---------- */
/* Theme toggle: Good Times is dark-only; the site's moon/theme control is hidden here (user 2026-10-11). */
.hdr [data-theme-toggle]{display:none!important}
/* Dateline kept in print (copy unchanged vs live); plain Inter, no small caps. */
.dl{font-weight:400}
/* Sources: labels can be raw URLs (sports) — wrap anywhere so nothing overflows at 360/390; unlinked labels get the same box. */
.sources li{min-width:0;max-width:100%}
.sources a,.sources .nolink{overflow-wrap:anywhere;word-break:normal;min-width:0;max-width:100%}
.sources .nolink{display:inline-flex;align-items:center;min-height:44px;font-size:14px;line-height:20px;color:var(--ink2)}
/* Captions carry the credit; long credits wrap. */
figcaption{overflow-wrap:anywhere}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  :root{--bg:#fff;--ink:#000;--ink2:#333;--mute:#555;--hair:#ccc}
  .hdr .icons,.tree,.skip,.go{display:none}
  .shell{display:block}.rail{position:static}
  .lead .ph img{filter:grayscale(1)}
}