/* Reckoning — design system
   Extracted from the Arc 3 podcast reference, 2026-09-07. Single stylesheet, no build step.
   Tokens are defined once in :root (dark) and redefined per theme; nothing names a colour
   literal. Status colours are reserved for the register and never used as brand accent. */

:root{
  --void:#09080C; --surface:#121119; --line:#201F2A; --line-2:#2D2B3B;
  --bone:#E7E5EC; --ink-2:#C9C6D3; --dim:#8A8799; --accent:#8B7FD1;
  --true:#5D9C86; --false:#C47B66; --open:#7A828D;
  --on-accent:#0B0A0F;
  --display:"Archivo",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --body:"Newsreader",Charter,Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --void:#FBFAF9; --surface:#F1F0F4; --line:#DEDCE4; --line-2:#C6C3D0;
  --bone:#15141B; --ink-2:#3B3947; --dim:#5F5C6B; --accent:#5B4FA8;
  --true:#2F6B58; --false:#9A503C; --open:#5F5C6B; --on-accent:#FBFAF9;}}
:root[data-theme="light"]{
  --void:#FBFAF9; --surface:#F1F0F4; --line:#DEDCE4; --line-2:#C6C3D0;
  --bone:#15141B; --ink-2:#3B3947; --dim:#5F5C6B; --accent:#5B4FA8;
  --true:#2F6B58; --false:#9A503C; --open:#5F5C6B; --on-accent:#FBFAF9;}
/* The page's own background, resolved here so a section that re-declares --void (the hero band)
   can still fade into the page around it. */
:root{--page-bg:var(--void)}
*{box-sizing:border-box}
body{background:var(--void);color:var(--bone);font-family:var(--body);font-size:19px;
  line-height:1.68;margin:0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.shell{max-width:1080px;margin:0 auto;padding:0 32px}
a{color:inherit}
.toggle{position:fixed;top:20px;right:20px;z-index:10;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:8px 13px;background:var(--surface);
  color:var(--dim);border:1px solid var(--line-2);cursor:pointer}
.toggle:hover{color:var(--bone);border-color:var(--dim)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* nav */
nav{display:flex;align-items:center;gap:18px}
a.wm{color:inherit;text-decoration:none;border-bottom:0}
a.wm:hover{color:var(--bone)}
.wm{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1}
.navlinks{margin-left:auto;display:flex;gap:26px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.navlinks a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.navlinks a:hover{color:var(--bone);border-bottom-color:var(--accent)}
.navlinks a[aria-current]{color:var(--bone)}

/* hero */
.hero{padding:92px 0 0;display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:start}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:26px}
h1{font-family:var(--display);font-weight:600;font-size:clamp(42px,6.6vw,76px);line-height:1.0;
  letter-spacing:-.038em;margin:0 0 28px;text-wrap:balance}
.sub{font-size:22px;line-height:1.5;color:var(--dim);max-width:44ch;margin:0 0 36px}
.tile{border:1px solid var(--line-2);background:var(--surface);aspect-ratio:1;
  display:flex;flex-direction:column;justify-content:space-between;padding:26px}
.tile .tw{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:.2em;
  text-transform:uppercase;line-height:1.3}
.tile .td{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);line-height:1.8}

/* subscribe */
.subs{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.btn{font-family:var(--display);font-size:14px;font-weight:600;padding:13px 22px;
  text-decoration:none;border:1px solid var(--line-2);color:var(--bone);display:inline-block}
.btn:hover{border-color:var(--dim)}
.btn-p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-p:hover{opacity:.88;border-color:var(--accent)}
.soon{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--dim);
  text-transform:uppercase;margin:0}

/* sections */
section{padding:96px 0 0}
h2{font-family:var(--display);font-weight:600;font-size:37px;letter-spacing:-.028em;
  line-height:1.1;margin:0 0 20px;text-wrap:balance;max-width:20ch}
.lede{font-size:20px;color:var(--dim);max-width:60ch;margin:0 0 40px}
p{max-width:64ch;margin:0 0 18px}
.hd{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* register */
.entries{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.entry{background:var(--void);padding:26px 28px;display:grid;
  grid-template-columns:1fr auto;gap:18px 28px;align-items:start}
.entry .id{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.08em;
  grid-column:1/-1;margin-bottom:-8px}
.entry .claim{font-family:var(--display);font-size:16.5px;line-height:1.5;font-weight:500}
.entry .meta{font-family:var(--mono);font-size:12px;color:var(--dim);letter-spacing:.06em;
  line-height:2;text-align:right;white-space:nowrap}
.chip{display:inline-block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:4px 9px;border:1px solid var(--open);color:var(--open)}
.pending{color:var(--accent);border-color:var(--accent)}

/* runsheet */
.tw2{overflow-x:auto;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:560px;font-family:var(--display);
  font-size:14.5px;line-height:1.5}
th{text-align:left;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);font-weight:500;padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line);vertical-align:bottom;white-space:nowrap}
td{padding:14px 18px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
td:last-child,th:last-child{padding-right:0}
td.n{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim)}
td.seg{font-weight:600;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

/* script block */
.script{border-left:2px solid var(--accent);padding:4px 0 4px 26px;margin:0 0 28px;
  font-size:19.5px;line-height:1.66;max-width:58ch}
.script p{margin:0 0 14px}
.script p:last-child{margin:0}
.script .ph{color:var(--accent);font-family:var(--mono);font-size:.78em}

/* two-up */
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.card{border:1px solid var(--line);padding:28px}
.card h3{font-family:var(--display);font-size:17px;font-weight:600;margin:0 0 12px;letter-spacing:-.01em}
.card p{font-size:17px;color:var(--dim);margin:0}

footer{border-top:1px solid var(--line);margin-top:104px;padding:44px 0 100px;
  font-family:var(--mono);font-size:12.5px;color:var(--dim);line-height:2;letter-spacing:.05em}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:44px}
  .tile{max-width:280px}
  .two{grid-template-columns:1fr;gap:20px}
}
@media (max-width:720px){
  body{font-size:17.5px}.shell{padding:0 20px}
  h1{font-size:40px}h2{font-size:28px}section{padding-top:68px}
  .hero{padding-top:56px}
  nav{flex-wrap:wrap}
  .entry{grid-template-columns:1fr}.entry .meta{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── subscribe ─────────────────────────────────────────────────────────── */
.sub-form{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px;max-width:30rem}
.sub-form input[type=email]{flex:1 1 15rem;min-width:0;font-family:var(--display);font-size:15px;
  padding:13px 15px;background:var(--void);color:var(--bone);
  border:1px solid var(--line-2);border-radius:0}
.sub-form input[type=email]::placeholder{color:var(--dim)}
.sub-form input[type=email]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-color:var(--accent)}
.sub-form button{font-family:var(--display);font-size:14px;font-weight:600;padding:13px 24px;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);cursor:pointer}
.sub-form button:hover{opacity:.9}
.privacy{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--dim);
  margin:0 0 22px;max-width:34rem;line-height:1.7}
.textlink{font-family:var(--display);font-size:15px;font-weight:600;color:var(--bone);
  text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px}
.textlink:hover{border-bottom-color:var(--accent)}
.dateline{font-family:var(--mono);font-size:12px;letter-spacing:.11em;color:var(--dim);
  margin:26px 0 0;text-transform:uppercase}

/* ── register grid ─────────────────────────────────────────────────────── */
.entry .falsifier{grid-column:1/-1;font-family:var(--display);font-size:14.5px;line-height:1.6;
  color:var(--dim);border-top:1px solid var(--line);padding-top:14px;margin-top:2px}
.entry .falsifier b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:5px;font-weight:500}
.chip-pending{color:var(--open);border-color:var(--open)}
.filerow{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--dim);
  margin:26px 0 0;line-height:2}
.filerow a{color:var(--dim);border-bottom:1px solid var(--line-2);text-decoration:none}
.filerow a:hover{color:var(--bone);border-bottom-color:var(--accent)}

/* ── language toggle ───────────────────────────────────────────────────── */
.lang{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-left:26px}
.lang a{text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.lang a[aria-current]{color:var(--bone);border-bottom-color:transparent;
  text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;
  text-underline-offset:5px}
.lang span{opacity:.45}

/* ── utilities ─────────────────────────────────────────────────────────── */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hd a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.hd a:hover{color:var(--bone);border-bottom-color:var(--accent)}
.card h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.card h3 a:hover{border-bottom-color:var(--accent)}
footer a{color:var(--dim);text-decoration:none;border-bottom:1px solid var(--line-2)}
footer a:hover{color:var(--bone);border-bottom-color:var(--accent)}
.prose{max-width:64ch}
.prose p{font-family:var(--body);font-size:17px;line-height:1.7;margin:0 0 18px}
.prose h2{margin-top:44px}

/* ── register entries in a narrow container ────────────────────────────── */
/* The hero sidebar is ~300px. A 1fr/auto grid crushes the claim to a few
   words per line there, so compact entries stack and the meta sits inline. */
.entries-compact .entry{grid-template-columns:1fr}
.entries-compact .entry .meta{text-align:left;white-space:normal;
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;line-height:1.6}
.entries-compact .entry .meta br{display:none}
.entries-compact .entry .claim{font-size:15px;line-height:1.5}
.entries-compact .entry .falsifier{font-size:13.5px}
@media (max-width:860px){
  .hero .entries-compact{margin-top:8px}
}

/* ── grid overflow guard ───────────────────────────────────────────────────
   Grid and flex children default to min-width:auto, so they refuse to shrink
   below their content's min-content width. On a 390px viewport that pushes the
   track wider than the screen, and body{overflow-x:hidden} then CLIPS the text
   instead of wrapping it — the failure looks like a rendering bug rather than a
   layout one, which is why it survived the first pass. */
.hero > *, .hero-call > *, .two > *, .entries > *, .entry > *, .sub-form > *{min-width:0}
.entry .claim, .entry .falsifier, .lede, .sub, p{overflow-wrap:break-word}
@media (max-width:720px){
  .sub{font-size:19px}
  .sub-form{max-width:none}
  .entry .meta{white-space:normal}
  .hd, .dateline, .privacy, .filerow{overflow-wrap:anywhere}
}

/* ── sticky masthead ──────────────────────────────────────────────────────
 * The bar is inside .shell, so its own background would stop at the 1140px measure and let
 * the page show through the gutters on a wide screen. The ::before paints 100vw behind it
 * instead. The hairline underneath appears only once the page has moved, so at rest the
 * masthead still reads as part of the page rather than as chrome bolted on top of it. */
nav, .issuenav{position:sticky;top:0;z-index:20;padding:26px 0 16px;
  transition:padding .18s ease}
nav::before, .issuenav::before{content:"";position:absolute;top:0;bottom:0;left:50%;
  width:100vw;transform:translateX(-50%);background:var(--void);z-index:-1;
  border-bottom:1px solid transparent;transition:border-color .18s ease}
/* stuck state: the hairline only. The masthead used to shrink when scrolled, which read as a random size change on every click (13 Sep). */
nav.is-stuck::before, .issuenav.is-stuck::before{border-bottom-color:var(--line)}
html{scroll-padding-top:76px}
.toggle{z-index:30}
@media (prefers-reduced-motion:reduce){nav,.issuenav,nav::before,.issuenav::before{transition:none}}

/* the about layout: portrait column beside the text, on the page and in the home card */
.about-grid{display:grid;grid-template-columns:160px minmax(0,64ch);gap:0 36px;align-items:start}
.about-text{min-width:0}
.about-text p{font-family:var(--body);font-size:17px;line-height:1.7;margin:0 0 18px;color:var(--bone)}
.about-text p:last-child{margin-bottom:0}
.portrait{width:160px;height:160px;object-fit:cover;filter:grayscale(1);border:1px solid var(--line-2);display:block}
@media (max-width:700px){.about-grid{grid-template-columns:1fr;gap:20px 0}.portrait{width:120px;height:120px}}

/* the brief index's status chip: its own line under the title, never jammed against it */
.chip-row{display:inline-block;margin:8px 0 0;vertical-align:baseline}
.tw2 td .chip-row{display:block;width:max-content}

/* pre-launch label beside the wordmark; remove when the beta ends */
.beta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line-2);padding:3px 6px;margin-left:10px;vertical-align:middle;line-height:1}


/* Legibility pass, 13 Sep 2026. Reading copy in --ink-2 (about 11:1 on the ground); the
   secondary grey --dim is for labels and identifiers only. Mono metadata a half-point larger.
   Tap targets on small screens at 44px. Visible focus for keyboard readers. */
.sub,.lede,.card p,.entry .falsifier,.privacy,.filerow,footer,footer a,.about-text p,.prose p,.cal .empty{color:var(--ink-2)}
.hero .privacy,.filerow,footer{font-size:13px}
.entry .id,.entry .meta{font-size:12.5px}
.entry .falsifier{font-size:14.5px}
.entries-compact .entry .falsifier{font-size:14px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:720px){
  /* Two rows on a phone: wordmark, then the links and the language switch sharing one row.
     These must sit AFTER the base .lang rule: its margin-left:26px plus the nav gap pushed
     the switch three pixels past the line box and wrapped it onto a row of its own, where it
     read as a detached fragment. */
  /* Not sticky on a phone. The bar is two rows here, about 143px, so pinning it ate a fifth of
     the screen and slid every heading under it on the way past. At this width the masthead is
     a short scroll away, which is cheaper than the space it costs pinned. */
  nav, .issuenav{position:static}
  html{scroll-padding-top:0}
  nav{gap:12px}
  .navlinks{order:2;flex:0 1 auto;margin:14px 0 0;gap:10px 13px;flex-wrap:wrap}
  .lang{order:3;flex:0 0 auto;margin:14px 0 0 auto}
  .navlinks a,.lang a{padding:12px 0;display:inline-block}
  footer a{display:inline-block;padding:8px 0}
  .filerow,footer{line-height:2}
}


/* Footer, rendered by build_site.render_footer on every page. Links at body-ish size in the
   display face; mono for the group labels only; the two statements in the secondary ink. */
footer{font-family:var(--display);font-size:15px;color:var(--ink-2)}
.ft{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px 24px;align-items:start}
.ft-brand p{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--dim)}
.ft-wm{font-family:var(--display);font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:13px;color:var(--bone);text-decoration:none;border:0}
.ft-hd{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.ft-col a{display:block;color:var(--bone);text-decoration:none;border:0;padding:5px 0;font-size:15px;line-height:1.4}
.ft-col a:hover{color:var(--accent)}
.ft-line{margin:36px 0 0;font-size:14px;line-height:1.6;color:var(--dim);max-width:72ch}
.ft-line.an{margin-top:8px}
/* The two statements sit under a rule, below the links, as one quiet block (22 Oct 2026). The
   disclaimer drops the issue-page box here: same words, muted, 14px; --dim clears WCAG AA on
   --void in both themes (5.7:1 dark, 6.2:1 light). */
.ft-legal{margin-top:40px;padding-top:20px;border-top:1px solid var(--line)}
.ft-legal .ft-line{margin:0;max-width:100ch}
.ft-legal .ft-line+.ft-line{margin-top:10px}
footer .ft-line.disclaimer{border:0;padding:0;font-family:var(--display);font-size:14px;line-height:1.6;color:var(--dim)}
.ft-social{display:flex;gap:10px;align-items:baseline}
.ft-social span{color:var(--dim)}
@media (max-width:720px){.ft{grid-template-columns:1fr 1fr;gap:28px 20px}.ft-brand{grid-column:1/-1}.ft-col a{padding:9px 0}}
/* the sentence under the subscribe form is a sentence, not a label */
.hero .privacy{font-family:var(--display);font-size:14px;letter-spacing:0;line-height:1.55}

/* the intent section under the hero */
#intent{padding-top:88px}#intent .intent p{color:var(--bone)}#intent .intent{max-width:62ch}

/* method line under the falsifier: which process produced the probability, and its inputs */
.entry .method{grid-column:1/-1;margin-top:8px;font-family:var(--mono);font-size:11.5px;line-height:1.6;letter-spacing:.02em;color:var(--dim)}
.entry .method b{font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;margin-right:8px}

/* A tool card sits in the same grid as the two edition cards. Alone on its row it left a dead
   cell, so it spans the row; and its chip is a block eyebrow, because inline the title wrapped
   around it. */
.card-tool{grid-column:1/-1}
.chip-eyebrow{display:inline-block;margin:0 0 12px}

/* Register entry, 21 Sep 2026. The headline leads and the graded wording sits in a native
   <details>. Native, because the disclosure has to work with JavaScript off: the register is
   the artefact a hostile reader comes to check, and it cannot depend on a script running. */
.entry .headline{font-family:var(--display);font-size:18px;line-height:1.35;font-weight:600;
  margin:0;text-wrap:balance}
.entry .meta .resolves{display:block;margin-top:9px}
.entry .meta .chip{font-size:13px;padding:6px 11px;letter-spacing:.1em}
.entry details{grid-column:1/-1;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.entry summary{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;list-style:none;padding:10px 0;display:flex;align-items:center;gap:9px}
.entry summary::-webkit-details-marker{display:none}
.entry summary::before{content:"+";font-size:15px;line-height:1;width:.8em;display:inline-block}
.entry details[open] summary::before{content:"\2212"}
.entry summary:hover{color:var(--ink-2)}
.entry summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* Inside <details> these are no longer grid children, so the grid-column and the rule above
   the falsifier both have to come back off. */
.entry details .claim,.entry details .falsifier,.entry details .method{grid-column:auto;
  border-top:0;padding-top:0;margin-top:0}
.entry details .claim{font-size:15.5px;font-weight:400}
.entry details .falsifier,.entry details .method{margin-top:18px}
.entry details .claim b{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:5px;font-weight:500}
.entry details .method b{display:block;margin-bottom:5px}
.regnote{font-family:var(--mono);font-size:12px;line-height:1.85;color:var(--dim);
  letter-spacing:.03em;margin:0 0 24px;max-width:72ch}
.regnote .governs{color:var(--ink-2)}
@media (max-width:720px){
  .entry .headline{font-size:17px}
  .entry .meta .resolves{margin-top:7px}
}

/* Disclosure block, 22 Sep 2026. Was a <pre> whose space-padded label columns forced an 862px
   width; on a phone a third of each line showed and the rest hid behind an inner scrollbar.
   The rule says this block sits at the very top and is never moved to a footer — a block you
   have to drag sideways to read breaks that rule with layout instead of with markup. */
dl.disclosure{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:7px 20px;
  font-family:var(--mono);font-size:12px;line-height:1.65;margin:0 0 30px;padding:20px 22px;
  border:1px solid var(--line);background:var(--surface)}
dl.disclosure dt{color:var(--dim);letter-spacing:.1em;text-transform:uppercase;font-size:10.5px;
  padding-top:2px;white-space:nowrap}
dl.disclosure dd{margin:0;color:var(--ink-2);overflow-wrap:break-word}
dl.disclosure dd.seal{color:var(--dim);font-size:11px;word-break:break-all}
@media (max-width:720px){
  dl.disclosure{grid-template-columns:minmax(0,1fr);gap:3px;padding:16px 15px;font-size:12.5px}
  dl.disclosure dt{margin-top:11px}
  dl.disclosure dt:empty{display:none}
  dl.disclosure dt:first-child{margin-top:0}
}

/* ── entry annotations: disclosure, pending verification, amendment ──────── */
.entry-anchor{display:block;position:relative;top:-96px;visibility:hidden}
.entry .annot{grid-column:1/-1;font-family:var(--display);font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.entry .annot b{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:5px}
.entry .annot-disclosure{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em}
.entry .annot-pending b{color:var(--open);margin:0}
.entry .annot-amendment{border-left:2px solid var(--accent);padding-left:14px}
.entry .annot-amendment b{color:var(--accent)}
.entry .annot-note{color:var(--dim)}
.entry .annot-note b{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.08em;margin-right:6px}
.entry .annot .why{display:block;margin-top:6px;color:var(--dim);font-size:13.5px}
.sub-form label{flex:1 0 100%;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2)}

/* ── charts ────────────────────────────────────────────────────────────── */
.charts{display:grid;gap:72px;margin-top:56px;max-width:640px}
.chart{scroll-margin-top:88px;min-width:0}
.chart img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.issue-chart{margin:32px 0}.issue-chart img{display:block;width:100%;max-width:560px;height:auto;border:1px solid var(--line)}
.chart h3{font-family:var(--display);font-size:20px;line-height:1.3;font-weight:600;margin:22px 0 8px}
.chart h3 .chart-n{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--dim);text-decoration:none}
.chart h3 .chart-n:hover{color:var(--accent)}
.chart p{margin:0 0 8px;color:var(--ink-2)}
.chart .dateline{margin:0 0 8px}
.chart .chart-src{font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.02em;color:var(--dim);overflow-wrap:anywhere}
.chart .chart-src b{font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:10.5px;margin-right:8px}
/* the one-line subscribe under each chart (23 Oct 2026): a sentence, not a mono label */
.chart .sub-inline{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.chart .sub-inline label{font-family:var(--display);font-size:15px;line-height:1.45;letter-spacing:0;text-transform:none;color:var(--bone);margin:0 0 4px}
.chart .sub-inline .sub-priv{align-self:center;font-family:var(--display);font-size:13px;color:var(--dim);padding:12px 2px}
.chart .sub-inline .sub-priv:hover{color:var(--accent)}

/* ── forms: the deals portal, its admin and crowd sign-in (the backers form retired 22 Oct 2026) ── */
.backer-form{display:grid;gap:22px;max-width:40rem;margin:0 0 48px}
.backer-form .fld{display:grid;gap:7px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.backer-form input[type=text],.backer-form input[type=email],.backer-form input[type=url],.backer-form input[type=password],.backer-form textarea{
  font-family:var(--display);font-size:15px;letter-spacing:0;text-transform:none;padding:12px 14px;background:var(--void);color:var(--bone);
  border:1px solid var(--line-2);border-radius:0;width:100%;min-width:0}
.backer-form input:focus-visible,.backer-form textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}
.backer-form fieldset{border:0;border-top:1px solid var(--line);padding:16px 0 0;margin:0;display:grid;gap:8px;min-width:0}
.backer-form legend{padding:0;font-family:var(--display);font-size:16px;font-weight:600;color:var(--bone)}
.backer-form .opt{display:flex;gap:10px;align-items:baseline;font-family:var(--display);font-size:15px;color:var(--ink-2);line-height:1.45;min-height:32px}
.backer-form .opt input{flex:none;accent-color:var(--accent);width:16px;height:16px;transform:translateY(2px)}
.backer-form .hint,.hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:none;color:var(--dim);font-weight:400}
.backer-form p.hint{margin:-10px 0 0}
.backer-form .consent{border-top:1px solid var(--line);padding-top:18px;color:var(--bone)}
.backer-form button,.adm-bar button,#adm-table button{font-family:var(--display);font-size:14px;font-weight:600;padding:12px 22px;background:var(--accent);
  color:var(--on-accent);border:1px solid var(--accent);cursor:pointer;justify-self:start}
.backer-form button:disabled{opacity:.6;cursor:default}
.backer-privacy{max-width:40rem;border-top:1px solid var(--line);padding-top:24px}
.backer-privacy h3{font-family:var(--display);font-size:16px;margin:0 0 12px}
.backer-privacy p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.adm-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--dim)}
.adm-bar button,#adm-table button{padding:7px 12px;font-size:12.5px}
#adm-table{font-size:13px;min-width:1100px}
#adm-table th button{background:none;color:inherit;border:0;border-bottom:1px solid var(--line-2);padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit}
#adm-table td{vertical-align:top;overflow-wrap:anywhere}
.backer-form[hidden],.backer-form [hidden]{display:none}
#adm-table button,.adm-bar button{white-space:nowrap}
/* forms: brand tap targets (44px), visible focus on choices, message states, the explainer */
.backer-form .opt{min-height:44px;align-items:center}
.backer-form .opt input{width:18px;height:18px;transform:none}
.backer-form .opt input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.backer-form .consent{align-items:flex-start}.backer-form .consent input{margin-top:3px}
.backer-msg{max-width:40rem;margin:0 0 28px;padding:14px 16px;border:1px solid var(--line-2);border-left:3px solid var(--accent);
  font-family:var(--display);font-size:15px;line-height:1.5;color:var(--bone)}
.backer-msg.is-error{border-left-color:var(--false)}
.backer-msg:focus{outline:none}
.explain{border:1px solid var(--line);padding:0 16px;margin:-8px 0 0}
.explain summary{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;padding:14px 0;min-height:44px}
.explain summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.explain p,.explain li{font-family:var(--display);font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.explain ul{margin:0 0 12px;padding-left:18px}
.explain b{color:var(--bone)}
#notes-count{justify-self:end}
.backer-form button{min-height:44px}
.backer-form input[type=text],.backer-form input[type=email],.backer-form input[type=url],.backer-form input[type=password],.backer-form textarea{font-size:16px}
.backer-form .fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.backer-form .fld-row{grid-template-columns:1fr}}

/* ── deals: the backer's private page and the admin pages (rendered by api/) ── */
.deal{max-width:44rem}.deal h2{margin-bottom:14px}.deal h3{font-family:var(--display);font-size:19px;margin:36px 0 12px}.deal h4{font-family:var(--display);font-size:16px;margin:0 0 6px}
.deal p,.deal li{font-size:16px;line-height:1.6;color:var(--ink-2)}.deal ul{padding-left:20px}
.disclaimer{border:1px solid var(--line-2);border-left:3px solid var(--accent);padding:12px 14px;margin:0 0 24px;font-family:var(--display);font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.kv{display:grid;grid-template-columns:minmax(7.5rem,auto) 1fr;gap:10px 18px;margin:24px 0;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kv dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:3px}.kv dd{margin:0;font-family:var(--display);font-size:16px;color:var(--bone)}
.backer-form select{font-family:var(--display);font-size:16px;padding:12px 14px;min-height:46px;background:var(--void);color:var(--bone);border:1px solid var(--line-2);border-radius:0;width:100%}
.backer-form input[type=number],.backer-form input[type=datetime-local],.backer-form input:not([type]){font-family:var(--display);font-size:16px;letter-spacing:0;text-transform:none;padding:12px 14px;background:var(--void);color:var(--bone);border:1px solid var(--line-2);border-radius:0;width:100%;min-width:0}
.when{display:none;gap:22px}
form:has(input[name=response][value=in]:checked) .when-in,form:has(input[name=response][value=pass]:checked) .when-pass,form:has(input[name=response][value=questions]:checked) .when-questions{display:grid}
@supports not selector(:has(*)){.when{display:grid}}
.deal .btn,.deal button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font-family:var(--display);font-size:14px;font-weight:600;padding:11px 20px;
  background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);cursor:pointer;text-decoration:none;border-radius:0}
.deal button.quiet,.deal .quiet{background:none;color:var(--bone);border-color:var(--line-2)}
.deal form.inline{display:inline-block;margin:0 8px 8px 0}.deal .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.deal .card{display:block;border:1px solid var(--line);padding:18px;margin:0 0 14px;text-decoration:none;color:inherit;min-width:0;overflow-wrap:anywhere}
.deal a.card:hover{border-color:var(--accent)}.deal .card p{margin:0 0 8px}
.deal .card input[readonly]{width:100%;min-width:0;font-family:var(--mono);font-size:12.5px;padding:10px;background:var(--surface);color:var(--bone);border:1px solid var(--line-2)}
.bar{position:relative;display:flex;height:12px;background:var(--surface);border:1px solid var(--line-2);margin:10px 0 12px;overflow:hidden}
.bar-anchor{background:var(--dim)}.bar-soft{background:var(--accent)}.bar-min{position:absolute;top:0;bottom:0;width:2px;background:var(--bone)}
.adm nav .navlinks a{min-height:44px;display:inline-flex;align-items:center}
.adm-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 22px}
.adm-tabs a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid transparent}
.adm-tabs a[aria-current]{border-bottom-color:var(--accent);color:var(--bone)}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:12px;align-items:end;margin:0 0 20px}
.filters .fld{display:grid;gap:6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.filters input,.filters select{font-family:var(--display);font-size:16px;padding:10px 12px;min-height:44px;background:var(--void);color:var(--bone);border:1px solid var(--line-2);border-radius:0;width:100%;min-width:0}
.preview{border:1px dashed var(--line-2);padding:18px;margin:0 0 24px}.adm-foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
.chip-true{color:var(--true);border-color:var(--true)}.chip-false{color:var(--false);border-color:var(--false)}
.deal .backer-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.deal .backer-form select,.deal .filters input,.deal .filters select{min-height:46px}
.deal .card input[readonly]{min-height:44px}

/* ── crowd forecasts: the form inside a register entry (assets/crowd.js), and the leaderboard ── */
.crowd{margin-top:22px;padding:20px;border:1px solid var(--line-2);border-left:3px solid var(--accent);min-width:0}
.crowd h4{font-family:var(--display);font-size:18px;margin:0 0 10px}
.crowd p{font-size:15.5px;line-height:1.55;color:var(--ink-2);margin:0 0 10px}
.crowd-closes,.crowd-note,.crowd-hint{font-family:var(--display);font-size:13.5px;color:var(--dim)}
.crowd-form{display:grid;gap:10px;margin-top:14px}
.crowd-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-top:6px}
.crowd-pick{display:flex;gap:14px;align-items:center}.crowd-pick input[type=range]{flex:1;min-width:0;height:44px;accent-color:var(--accent)}
.crowd-num{display:inline-flex;align-items:center;gap:6px;font-family:var(--display);font-size:18px}
.crowd-form input[type=number]{width:5.2rem}
.crowd-form input[type=number],.crowd-form input[type=email],.crowd-form input[type=text]{font-family:var(--display);font-size:16px;padding:11px 12px;min-height:46px;
  background:var(--void);color:var(--bone);border:1px solid var(--line-2);border-radius:0;min-width:0}
.crowd-form input[type=email],.crowd-form input[type=text]{width:100%}
.crowd-opt{display:flex;gap:10px;align-items:center;min-height:44px;font-family:var(--display);font-size:15px;color:var(--ink-2)}.crowd-opt input{width:20px;height:20px;accent-color:var(--accent)}
.crowd-form button{justify-self:start;min-height:46px;font-family:var(--display);font-size:14px;font-weight:600;padding:11px 20px;background:var(--accent);color:var(--on-accent);border:1px solid var(--accent);cursor:pointer;border-radius:0}
.crowd-form button[disabled]{opacity:.6}
.crowd-facts{display:grid;gap:6px;margin:12px 0}.crowd-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:16px}
.crowd-k{color:var(--ink-2)}.crowd-v{color:var(--bone);font-weight:600;text-align:right}
.crowd-msg{font-family:var(--display);font-weight:600;color:var(--bone)}.crowd-err{color:var(--false)}.crowd-closed{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.crowd-hint a,.crowd-note a{min-height:44px;display:inline-flex;align-items:center}
.leaderboard .empty{font-family:var(--display);color:var(--ink-2)}.leaderboard table{width:100%}
.leaderboard{min-width:0;max-width:100%}.leaderboard .tw{overflow-x:auto;max-width:100%}.leaderboard table{border-collapse:collapse;font-family:var(--display);font-size:14.5px}
.leaderboard th,.leaderboard td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}.leaderboard td.n,.leaderboard th:not(:nth-child(2)){text-align:right}
.leaderboard th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);white-space:normal}
/* ── an entry's published reasoning (register/reasoning.jsonl) ── */
.entry details.reasoning{margin-top:10px}
.entry .reasoning p,.entry .reasoning li,.entry .rs-factor{font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 10px;overflow-wrap:anywhere}
.entry .reasoning b{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:500;margin-bottom:3px}
.entry .rs-model{font-family:var(--mono);font-size:13.5px}.entry .rs-factor .rs-ev{display:block;margin-top:4px;color:var(--dim)}
.entry .reasoning ul{margin:0 0 12px;padding-left:18px}.entry .rs-h{margin:16px 0 4px}.entry .rs-sig{margin:0 0 2px}
.entry .rs-src li{font-family:var(--display);font-size:13.5px}.entry .reasoning a{overflow-wrap:anywhere}
.entry details.reasoning > summary{min-height:44px;display:flex;align-items:center}

/* ── the "Latest call" hero (23 Oct 2026). The art carries its own palette; everything around it
   is the site's ordinary type and tokens, and no word sits on the image. ── */
.hc-pos{font-family:var(--display);font-size:15px;line-height:1.5;color:var(--ink-2);margin:0 0 20px;max-width:40ch}
.hc-latest{margin:18px 0 0}
.hero-call h1{font-size:clamp(40px,5.4vw,72px);margin:0 0 18px;max-width:12ch}
.hero-call .sub{margin:0 0 28px}
.hc-draft{margin-left:10px;padding:1px 6px;border:1px solid var(--line-2);color:var(--dim)}
.hc-call{border:1px solid var(--line-2);padding:18px 20px;margin:0 0 14px;max-width:34rem}
.hc-claim{font-family:var(--body);font-size:18px;line-height:1.5;color:var(--bone);margin:0 0 14px}
.hc-facts{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:6px 28px;margin:0 0 14px}
.hc-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.hc-facts dd{white-space:nowrap;margin:2px 0 0;font-family:var(--display);font-size:20px;font-weight:600;color:var(--bone)}
.hc-disc{font-family:var(--display);font-size:14px;color:var(--ink-2);margin:0 0 22px}
.hc-form{max-width:34rem}
.hc-form label{font-family:var(--display);font-size:15px;letter-spacing:0;text-transform:none;color:var(--bone);margin:0 0 4px}
.hc-form .sub-priv{align-self:center;font-family:var(--display);font-size:13px;color:var(--dim);padding:12px 2px}
.hc-form .sub-priv:hover{color:var(--accent)}
/* the "Latest calls" archive at the top of the charts page */
.calls{margin:0 0 56px}
.call-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;margin-top:16px;max-width:640px}
.call-card{display:block;color:var(--bone);text-decoration:none;border:0}
.call-card img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.call-card .cc-title{display:block;font-family:var(--display);font-size:16px;font-weight:600;line-height:1.3;margin:10px 0 4px}
.call-card .cc-meta{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim)}
.call-card:hover .cc-title{color:var(--accent)}

/* Full-bleed "Latest call" band (23 Oct 2026). The band is always dark, in both themes: the art is
   a night scene and the text sits on it. Tokens are re-declared here, so contrast is the dark
   theme's (AA) whichever theme the rest of the page is in. */
.hero-call{--void:#09080C;--surface:#121119;--line:#201F2A;--line-2:#2D2B3B;--bone:#E7E5EC;--ink-2:#C9C6D3;
  --dim:#8A8799;--accent:#8B7FD1;--on-accent:#0B0A0F;
  position:relative;width:100vw;margin-left:calc(50% - 50vw);background:#07060B;color:var(--bone);overflow:hidden}
.hc-inner{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:40px 32px 64px}
.hc-art img{display:block;width:100%;height:auto}
.hero-call .hc-call{background:rgba(9,8,12,.72)}
.hero-call a{color:var(--bone)}
.hero-call .sub-form input[type=email]{background:var(--void);color:var(--bone);border-color:var(--line-2)}
@media (min-width:1100px){
  .hero-call{display:flex;align-items:center;min-height:clamp(600px,52vw,780px)}
  .hc-inner{width:100%;padding:72px 32px 80px}
  .hc-text{max-width:500px}
  .hc-art{position:absolute;inset:0;z-index:0}
  /* The art's own background is the band's black, so it is placed, not stretched: anchored
     bottom-right at 1.4x the viewport width, which keeps the ships clear of the text column
     at every width from 1100 px up. */
  /* Sized against the text column, not the viewport: the orbit's left edge sits at 61% of the
     art's width, so a width of 129vw - 83px keeps it 40 px clear of the text column's right edge
     (which is at 50vw - 8px once the page is wider than its 1080 px column). */
  .hc-art img{position:absolute;right:0;bottom:0;width:calc(129vw - 83px);max-width:none;height:auto}
  /* the left of the band fades to the art's own black, so the text never sits on a star */
  .hc-art::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,#07060B 0,#07060B 18%,rgba(7,6,11,.82) 34%,rgba(7,6,11,0) 52%),
      linear-gradient(0deg,var(--page-bg) 0,rgba(7,6,11,0) 140px)}
}
@media (max-width:1099px){
  .hero-call{display:flex;flex-direction:column}
  /* Stacked: the art is part of the band, not a tile above it. Its lower part fades into the
     band's black and the text starts inside that fade, so the horizon dissolves into the copy. */
  .hc-art{order:-1;position:relative;z-index:0}
  .hc-art img{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%);
              mask-image:linear-gradient(180deg,#000 0,#000 80%,transparent 100%)}
  .hc-inner{width:100%;padding:0 32px 48px;margin-top:-4%}
  .hc-facts{grid-template-columns:repeat(3,max-content);gap:12px 32px}
}
@media (max-width:599px){
  /* the square art loses some empty sky on top, so the ships and the horizon fill the screen */
  .hc-art img{aspect-ratio:1/0.82;object-fit:cover;object-position:center bottom}
  .hc-inner{padding:0 20px 44px;margin-top:-6%}
  .hc-facts{grid-template-columns:repeat(2,max-content);gap:12px 32px}
  .hc-facts dd{font-size:18px}
}

/* "Recent calls" under the hero (23 Oct 2026; card structure 28 Oct): one card per question,
   art on every card (the feature's, else the sector default). Every card has the same rows:
   art, sector, title, claim, probability rows (straight under the claim), resolves line, and the
   disclosure pinned to the card's bottom edge. Cards in a row share one height. On a phone the
   row scrolls sideways with snap points, no script. */
.recent{padding:56px 0 8px}
.rc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:18px}
.rc-card{display:flex;flex-direction:column;border:1px solid var(--line-2);color:var(--bone);text-decoration:none;background:var(--surface);min-width:0}
.rc-card:hover{border-color:var(--accent)}
.rc-card:hover .rc-title{color:var(--accent)}
.rc-art img{display:block;width:100%;height:auto;aspect-ratio:1/0.82;object-fit:cover;object-position:center bottom}
.rc-body{display:flex;flex-direction:column;padding:16px 16px 18px;flex:1}
.rc-sector{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.rc-title{margin-top:8px;font-family:var(--display);font-size:18px;font-weight:600;line-height:1.3}
.rc-claim{margin-top:6px;font-family:var(--display);font-size:14px;line-height:1.4;color:var(--ink-2)}
.rc-nums{display:flex;flex-direction:column;gap:2px;margin-top:12px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.rc-num b{font-family:var(--display);font-size:20px;font-weight:600;color:var(--bone);margin-right:4px}
.rc-step{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.rc-ladder .rc-num{position:relative;padding-left:16px}
.rc-ladder .rc-num::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;margin-top:-4px;border-radius:50%;
                           border:1.5px solid var(--accent);background:var(--surface)}
.rc-ladder .rc-num+.rc-num::after{content:"";position:absolute;left:5.5px;bottom:calc(50% + 5px);height:calc(100% - 8px);border-left:1.5px solid var(--line-2)}
.rc-due{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.rc-due:empty{display:none}
.rc-disc{margin-top:auto;padding-top:14px;font-family:var(--display);font-size:13px;color:var(--dim)}
.rc-more{margin:18px 0 0}

/* "Open calls" (30 Oct 2026): the chosen open calls by resolution date, then the record line. Same
   block on the home page and on /x, the landing page for the X bio link. */
.oc{padding:40px 0 8px}
.oc-list{list-style:none;margin:18px 0 0;padding:0;border-top:1px solid var(--line-2)}
.oc-row{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2);
        color:var(--bone);text-decoration:none}
.oc-row:hover .oc-text{color:var(--accent)}
.oc-num{grid-row:span 2;font-family:var(--display);font-size:24px;font-weight:600;line-height:1.1}
.oc-text{font-family:var(--display);font-size:17px;line-height:1.35}
.oc-date{margin-top:4px;font-family:var(--mono);font-size:12px;color:var(--dim)}
.oc-record{margin:16px 0 0;font-family:var(--display);font-size:14.5px;color:var(--ink-2)}
.x-new{margin:8px 0 0;font-family:var(--display);font-size:18px}
.x-tag{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-right:6px}
.x-more{margin:24px 0 0}
@media (max-width:599px){
  .oc-row{grid-template-columns:56px minmax(0,1fr);column-gap:12px}
  .oc-num{font-size:20px}
  .oc-text{font-size:16px}
}
@media (max-width:899px){
  .rc-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:10px;
          margin-right:-20px;padding-right:20px;-webkit-overflow-scrolling:touch}
  .rc-card{flex:0 0 72%;scroll-snap-align:start}
}

/* drops: the issue-footer line and the home page's one compact row (only while a drop is open; scripts/merch.py) */
.dropline{margin:10px 0 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim)}
.dropline a{text-decoration:none;border-bottom:1px solid var(--line-2)}
.dropline a:hover{color:var(--bone);border-bottom-color:var(--accent)}
.droprow{display:flex;align-items:center;gap:16px;margin:0 0 32px;padding:16px 0;border-top:1px solid var(--line-2)}
.droprow .dr-thumbs{display:flex;gap:8px;flex:none}
.droprow .dr-thumbs img{display:block;width:auto;height:120px;max-height:160px}
.droprow .dr-line{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--dim);min-width:0}
.droprow .dr-line a{margin-left:6px}
@media (max-width:599px){.droprow{flex-direction:column;align-items:flex-start}.droprow .dr-thumbs img{height:96px}}