/* ==========================================================================
   Sam Chada — catalog design system
   Shared stylesheet for the landing (index) and post pages.
   Dark mode follows the OS by default, but an explicit html[data-theme]
   (set by the ND accessibility toggle) always wins.
   ========================================================================== */

/* ---- self-hosted fonts (no third-party requests) ---- */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/atkinson-400.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/atkinson-700.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/source-serif-4-400.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/source-serif-4-700.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2")}

/* ---- tokens: light is the default; dark via OS or the ND toggle ---- */
:root{
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --body:"Atkinson Hyperlegible", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* light: warm reading-room */
  --bg:#f4ecdb; --ink:#241d13; --dim:#5c4e33; --rust:#8a3a18; --rust-deep:#722d12;
  --rule:#dccdb0; --card:#ece0c8;
  --measure:66ch;
  /* alias the shared accessibility-widget accent to rust so its panel is on-brand */
  --clay:var(--rust); --sage:var(--rust-deep);
}
/* dark: the desk at night — applied when the user picks dark, OR when the OS is
   dark and the user has not explicitly forced light */
:root[data-theme="dark"]{
  --bg:#1c1813; --ink:#efe9dc; --dim:#bdae95; --rust:#e8865c; --rust-deep:#cf6339;
  --rule:#756953; --card:#24201a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1c1813; --ink:#efe9dc; --dim:#bdae95; --rust:#e8865c; --rust-deep:#cf6339;
    --rule:#756953; --card:#24201a;
  }
}
/* higher-contrast preference: deepen the accent + secondary text */
@media (prefers-contrast: more){ :root{--dim:#493c24; --rust:#762d0e} }
@media (prefers-contrast: more){ :root[data-theme="dark"]{--dim:#c6bba4; --rust:#f0916a} }
@media (prefers-contrast: more) and (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--dim:#c6bba4; --rust:#f0916a} }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--bg)}
body{margin:0; color:var(--ink); font-family:var(--body); line-height:1.72; font-size:19px; -webkit-font-smoothing:antialiased; position:relative}

/* ---- moleskine paper: fixed grain + a graph-paper grid that fades from the top ---- */
body::after{content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; mix-blend-mode:multiply; opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.19'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body::before{content:""; position:absolute; top:0; left:0; right:0; height:820px; z-index:-1; pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.06) 1px,transparent 1px);
  background-size:50px 50px;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent)}
body[data-page="post"]::before{height:620px}
body[data-page="research-index"]::before{background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px)}

:root[data-theme="dark"] body::after{mix-blend-mode:screen; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.26'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body::after{mix-blend-mode:screen; opacity:.45;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.26'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  :root:not([data-theme="light"]) body::before{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
}

a{color:var(--rust); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--rust); outline-offset:3px; text-decoration:none}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; background:var(--bg); padding:.5rem .75rem; outline:2px solid var(--rust); z-index:20}

.wrap{max-width:var(--measure); margin:0 auto; padding:0 22px}

/* ---- reading-progress rule (post pages): fills like a marker as you scroll ---- */
.progress{position:fixed; top:0; left:0; height:3px; width:100%; background:var(--rust); transform:scaleX(0); transform-origin:0 50%; z-index:15}
@media(prefers-reduced-motion:no-preference){ .progress{animation:progress linear; animation-timeline:scroll(root)} }
@keyframes progress{to{transform:scaleX(1)}}

/* ==== LANDING ==== */
/* masthead: lead with the work */
.masthead{border-bottom:2px solid var(--rule); padding:clamp(3.5rem,8vw,5rem) 0 2.4rem}
.masthead h1{font-family:var(--serif); font-weight:700; font-size:clamp(2.4rem,1rem + 5vw,3.1rem); line-height:1; letter-spacing:-.01em; margin:0 0 1.4rem}
.masthead .byline-home{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin:-.75rem 0 1.25rem}
.masthead .tag{font-size:1.05rem; color:var(--ink); line-height:1.62; margin:0; max-width:54ch}
.masthead .tag b{font-weight:700}
.publication-name,.masthead-proof{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.publication-name{margin:0 0 .8rem}
.masthead-proof{margin:1.2rem 0 0; letter-spacing:.03em; text-transform:none}
.masthead-proof a{color:var(--dim); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.masthead-proof a:hover,.masthead-proof a:focus-visible{color:var(--rust)}
.home-links{display:flex;flex-wrap:wrap;gap:.45rem 1.65rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;margin:1.2rem 0 0;color:var(--dim)}
.home-links a{color:var(--dim);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.home-links a:hover,.home-links a:focus-visible{color:var(--rust)}

/* A small, hand-maintained worklog: no status badges, just dated notes. */
.desk-notes{padding:1.5rem 0 1.35rem; border-bottom:2px solid var(--rule)}
.desk-notes h2{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 .85rem}
.desk-notes ul{list-style:none; margin:0; padding:0}
.desk-notes li{display:grid; grid-template-columns:4.75rem 1fr; gap:.8rem; margin:.38rem 0; font-size:.94rem; line-height:1.5}
.desk-notes time{font-family:var(--mono); font-size:.72rem; color:var(--dim); padding-top:.18rem}

/* category nav */
.nav{display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; border-bottom:2px solid var(--rule); padding:1.1rem 0; font-size:.95rem}
.nav a{color:var(--ink)}
.nav a:hover{color:var(--rust); text-decoration:none}
.nav a[aria-current="page"]{color:var(--rust); font-weight:700; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:2px}
.nav-context{font-size:.93rem; line-height:1.5; color:var(--dim); margin:.8rem 0 0; max-width:58ch}
.start-here{padding:1.55rem 0 1.35rem; border-bottom:2px solid var(--rule)}
.start-here h2{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 .85rem}
.start-here ol{list-style:none; counter-reset:start; margin:0; padding:0; display:grid; gap:.85rem}
.start-here li{counter-increment:start; display:grid; grid-template-columns:1.65rem minmax(0,1fr); column-gap:.65rem; font-size:.96rem; line-height:1.48}
.start-here li::before{content:counter(start,decimal-leading-zero); font-family:var(--mono); font-size:.7rem; color:var(--rust); padding-top:.2rem}
.start-here a{font-family:var(--serif); font-weight:700; color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.start-here span{grid-column:2; color:var(--dim); margin-top:.12rem}

/* Current reporting, kept as a short desk list rather than a promotional module. */
.open-files{padding:1.7rem 0 1.55rem;border-bottom:2px solid var(--rule)}
.open-files h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 .55rem}
.open-files>p{font-size:.94rem;line-height:1.5;color:var(--dim);margin:0 0 .9rem;max-width:56ch}
.open-files ol{list-style:none;counter-reset:open-file;margin:0;padding:0;display:grid;gap:.78rem}
.open-files li{counter-increment:open-file;display:grid;grid-template-columns:1.65rem minmax(0,1fr);column-gap:.65rem;font-size:.96rem;line-height:1.48}
.open-files li::before{content:counter(open-file,decimal-leading-zero);font-family:var(--mono);font-size:.7rem;color:var(--rust);padding-top:.2rem}
.open-files a{font-family:var(--serif);font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.open-files span{grid-column:2;color:var(--dim);margin-top:.12rem}

/* The home page leads with one document-backed investigation. It is a record on
   the desk, not a magazine hero or a promotional card. */
.featured-file{padding:2.3rem 0 2rem;border-bottom:2px solid var(--rule)}
.eyebrow,.featured-file .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);margin:0 0 .75rem}
.featured-file-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(13rem,.9fr);gap:clamp(1.4rem,4vw,3.25rem);align-items:start}
.featured-file h2{font-family:var(--serif);font-size:clamp(1.7rem,1.25rem + 2vw,2.25rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 .75rem}
.featured-file h2 a{color:var(--ink)}
.featured-file h2 a:hover,.featured-file h2 a:focus-visible{color:var(--rust);text-decoration:none}
.featured-file p{max-width:39ch;font-size:1.04rem;line-height:1.58;margin:.65rem 0 0}
.featured-file .featured-file-note{font-size:.9rem;line-height:1.5;color:var(--dim)}
.featured-file .featured-file-link{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;margin-top:1.15rem}
.featured-document{margin:0}
.featured-document a{display:block;border:1px solid var(--rule);background:var(--card)}
.featured-document img{display:block;width:100%;height:auto;filter:saturate(.82) contrast(1.04)}
.featured-document figcaption{font-size:.82rem;line-height:1.45;color:var(--dim);margin-top:.55rem}
.reading-trail{display:flex;flex-wrap:wrap;gap:.45rem 1.15rem;align-items:baseline;border-top:1px solid var(--rule);margin-top:1.65rem;padding-top:.85rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em}
.reading-trail span{color:var(--dim)}
.research-at-home{padding:1.7rem 0 1.55rem;border-bottom:2px solid var(--rule)}
.research-at-home h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 .65rem}
.research-at-home p{font-size:.98rem;line-height:1.55;margin:.5rem 0 0;max-width:59ch}
.research-at-home p:last-child{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;margin-top:.9rem}

/* ---- mobile menu (hamburger). Button hidden on desktop; links flow normally ---- */
.nav-links{display:contents}
.nav-toggle{display:none; font-family:var(--mono); font-size:.88rem; letter-spacing:.04em; align-items:center; gap:.45rem;
  background:transparent; color:var(--ink); border:1.5px solid var(--rule); border-radius:6px; padding:.42rem .7rem; cursor:pointer; line-height:1}
.nav-toggle .bars{font-size:1.1em}
.nav-toggle:hover{border-color:var(--rust); color:var(--rust)}
.nav-toggle:focus-visible{outline:2px solid var(--rust); outline-offset:2px}

/* catalog header */
.catalog-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); padding:1.4rem 0 .3rem}
.catalog-head h2{margin:0; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit}
.catalog-head .all{letter-spacing:.08em}

/* Homepage is intentionally a plain working index; catalog cards remain on hubs. */
.index{margin:0; padding:0}
.latest-row{padding:1.45rem 0 1.55rem; border-bottom:2px solid var(--rule)}
.latest-meta{font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; color:var(--dim); margin:0 0 .45rem}
.latest-meta .dot{opacity:.55; margin:0 .5em}
.latest-row h3{font-family:var(--serif); font-weight:700; font-size:1.38rem; line-height:1.28; margin:0}
.latest-row h3 a{color:var(--ink)}
.latest-row h3 a:hover,.latest-row h3 a:focus-visible{color:var(--rust); text-decoration:none}
.home-start{border-bottom:2px solid var(--rule);padding:2.2rem 0}
.home-start h2{font-family:var(--serif);font-size:clamp(1.55rem,1.15rem + 1.7vw,2rem);line-height:1.2;letter-spacing:-.01em;margin:0 0 .6rem}
.home-start h2 a{color:var(--ink)}
.home-start h2 a:hover,.home-start h2 a:focus-visible{color:var(--rust);text-decoration:none}
.home-start p:not(.eyebrow){font-size:1.04rem;line-height:1.58;max-width:58ch;margin:0}
.home-more{padding:2rem 0 1rem}
.home-more>h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 1.5rem}
.home-archive{font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;margin:3rem 0 0}
.home-archive a{color:var(--dim);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.home-archive a:hover,.home-archive a:focus-visible{color:var(--rust)}
.latest-dek{max-width:58ch; font-size:1rem; line-height:1.58; margin:.45rem 0 0}
.post-row{display:grid; grid-template-columns:8rem 1fr; gap:1.6rem; padding:1.8rem 0; border-bottom:2px solid var(--rule)}
.post-row[hidden]{display:none}
.card{position:relative; align-self:start; border:1.5px solid var(--rule); background:var(--card);
  padding:.7rem .75rem .6rem; display:flex; flex-direction:column; gap:.5rem}
.card .cn{font-family:var(--mono); font-weight:500; font-size:1.02rem; letter-spacing:.03em; color:var(--ink); line-height:1}
.card .div{height:1px; background:var(--rule)}
.card .class{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); line-height:1.3}
.card .series{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); line-height:1.3}
.card .acc{font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--dim); line-height:1.3}
.card .cited{font-family:var(--mono); font-size:.64rem; letter-spacing:.05em; color:var(--rust); line-height:1.3}
.card.overdue{border-color:var(--rust)}
.card.overdue .cn{color:var(--rust)}
.card.overdue .div{background:color-mix(in srgb,var(--rust) 45%,transparent)}
.card.field{border-style:dashed}
.card .flag{align-self:flex-start; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--bg); background:var(--rust); padding:.14rem .42rem; line-height:1.35}
/* h2, not h3: these sit directly under the page h1, and jumping a level was the
   site's most common a11y warning. Sized as before; the heading level is the
   document outline, not the type scale. */
.entry h2{font-family:var(--serif); font-weight:700; font-size:1.32rem; line-height:1.3; margin:0 0 .55rem}
.entry h2::before{content:none}
.entry h2 a{color:var(--ink)}
.entry h2 a:hover,.entry h2 a:focus-visible{color:var(--rust); text-decoration:none}
.entry .dek{margin:0 0 .7rem; color:var(--ink); font-size:1rem; line-height:1.6; max-width:58ch}
.entry .meta{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--dim)}
.entry .meta .dot{opacity:.55; margin:0 .5em}
.entry-topics{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:.2rem 0 .5rem}
.entry-topics span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--rule)}
.case-link{font-family:var(--mono);font-size:.68rem;letter-spacing:.02em;color:var(--dim);margin:.2rem 0 .55rem}.case-link a{color:var(--rust);text-decoration:underline;text-underline-offset:2px}
.section-intro,.start-here-more{font-size:.94rem;line-height:1.5;color:var(--dim);margin:.1rem 0 .9rem}.start-here-more{margin:1.25rem 0 .75rem}
.role-paths{list-style:none;margin:.15rem 0 0;padding:0;counter-reset:reader-path;padding-bottom:.1rem!important}
.role-paths li{counter-increment:reader-path;display:grid;grid-template-columns:1.8rem minmax(0,1fr);column-gap:.6rem;row-gap:.16rem;align-items:baseline;margin:.72rem 0;font-size:1rem;line-height:1.45}
.role-paths li::before{content:counter(reader-path,decimal-leading-zero);grid-row:1 / span 2;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--rust);padding-top:.22rem}
.role-paths a{font-family:var(--serif);font-size:1.12rem;font-weight:700;color:var(--rust);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.role-paths span{display:block;color:var(--ink);font-size:.98rem;line-height:1.52}
.case-file-intro{border-top:2px solid var(--rule);border-bottom:2px solid var(--rule);padding:1.25rem 0 1.2rem;margin:1.15rem 0}.case-file-intro h2,.finder h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin:0 0 .85rem}
.finder{border-bottom:2px solid var(--rule);padding:1.25rem 0 1.4rem;margin:0 0 .25rem}.finder>div:first-child p{font-size:.98rem;line-height:1.55;color:var(--dim);margin:-.35rem 0 .9rem;max-width:56ch}.finder-search{display:block}.finder input{width:min(100%,36rem);font:inherit;font-size:1.05rem;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--rule);padding:.65rem 0}.finder input:focus{outline:0;border-color:var(--rust)}.finder-suggestion{margin:.55rem 0 0;font-size:.9rem;color:var(--dim)}.finder-suggestion button{appearance:none;border:0;border-bottom:1px solid var(--rust);padding:0;background:none;color:var(--rust);font:inherit;cursor:pointer}.finder-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.finder-tags button{font-family:var(--body);font-size:.82rem;letter-spacing:.01em;color:var(--ink);border:1.5px solid var(--rule);background:transparent;padding:.48rem .62rem;cursor:pointer}.finder-tags button[aria-pressed="true"]{border-color:var(--rust);color:var(--rust);font-weight:700}.finder-status{font-family:var(--body);font-size:.9rem;color:var(--ink);font-weight:700;min-height:1.35em;margin:.85rem 0 0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==== POST ==== */
/* full-width site header — content in a wider bar than the 66ch article measure */
.topbar{border-bottom:2px solid var(--rule)}
.topbar .bar{max-width:80rem; margin:0 auto; padding:1.15rem 22px; display:flex; align-items:center; justify-content:space-between; gap:.5rem 2.5rem; flex-wrap:wrap}
.brand{font-family:var(--serif); font-weight:700; font-size:1.5rem; letter-spacing:-.015em; color:var(--ink); text-decoration:none; line-height:1}
.brand:hover{color:var(--rust); text-decoration:none}
.topnav{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem; font-size:.92rem}
.topnav a{color:var(--dim)}
.topnav a:hover{color:var(--rust); text-decoration:none}
.topnav a[aria-current="page"]{color:var(--ink); font-weight:700}

.article-head{padding:clamp(2.4rem,5vw,3.4rem) 0 1.6rem; border-bottom:2px solid var(--rule)}
.accession{font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin:0 0 1.1rem}
.accession .cn{color:var(--rust); font-weight:500}
.accession a{color:var(--dim); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--dim) 40%,transparent)}
.accession a:hover,.accession a:focus-visible{color:var(--rust); border-color:var(--rust); text-decoration:none}
.accession .cited{color:var(--rust)}
.accession .sep{opacity:.55; margin:0 .5em}
.article-head h1{font-family:var(--serif); font-weight:700; font-size:clamp(2rem,1rem + 3.4vw,3rem); line-height:1.12; letter-spacing:-.01em; margin:0 0 1rem; text-wrap:balance}
.dek{font-size:1.16rem; line-height:1.5; color:var(--dim); margin:0 0 1.4rem; max-width:52ch}
.byline{font-family:var(--mono); font-size:.74rem; letter-spacing:.03em; color:var(--dim); margin:0}
.byline .sep{opacity:.55; margin:0 .5em}
.reporting-strip{display:flex; flex-wrap:wrap; gap:.35rem .8rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--dim); margin:1rem 0 0}
.reporting-strip span:not(:last-of-type)::after{content:"·"; margin-left:.8rem; opacity:.55}
.reporting-strip a{color:var(--dim); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.reporting-strip a:hover,.reporting-strip a:focus-visible{color:var(--rust)}

.prose{padding-top:2rem; font-size:1.12rem; line-height:1.76}
.prose p{margin:0 0 1.35em}
/* inline links in body prose carry an underline at rest (distinguishable without color) */
.prose a{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.prose a:hover,.prose a:focus-visible{text-decoration-thickness:2px}
.prose > p:first-of-type{font-size:1.24rem; line-height:1.6}
/* Drop cap on the paragraph that opens the first real section, not on the
   disclosure that precedes it. ::first-letter is presentational only, so the
   reading order and what a screen reader announces are untouched. */
.prose > h2:first-of-type + p::first-letter{
  font-family:var(--serif); font-weight:700; float:left;
  font-size:3.3rem; line-height:.8; padding:.3rem .55rem 0 0; color:var(--rust)}
@media (max-width:30rem){
  .prose > h2:first-of-type + p::first-letter{font-size:2.6rem; padding-right:.45rem}}
/* A floated cap over 200% is a reflow hazard for anyone zoomed or on a large
   text size, so it is dropped rather than allowed to overlap the body copy. */
@media (prefers-reduced-motion:no-preference) and (max-width:22rem){
  .prose > h2:first-of-type + p::first-letter{float:none; font-size:inherit; padding:0; color:inherit}}
.prose h2{font-family:var(--serif); font-weight:700; font-size:clamp(1.45rem,1rem + 1.1vw,1.75rem); line-height:1.22; margin:2.1em 0 .65em}
.prose blockquote{margin:1.8em 0; padding:0; border:0; font-style:italic; color:var(--ink)}
.prose blockquote p{margin:0}
.pull{font-family:var(--serif); font-weight:700; font-size:clamp(1.35rem,1rem + 1.2vw,1.7rem); line-height:1.3;
  margin:2em 0; color:var(--ink); text-wrap:balance}

/* ---- article finding aids: section tabs, subheads, list rhythm ---- */
.prose h2{scroll-margin-top:1.4rem}
.prose h2::before{content:""; display:block; width:2.6rem; height:3px; background:var(--rust); margin-bottom:.6rem}
.prose h3{font-family:var(--serif); font-weight:700; font-size:1.18rem; line-height:1.3; margin:1.8em 0 .55em; scroll-margin-top:1.4rem}
.prose ul,.prose ol{margin:0 0 1.35em; padding-left:1.35em}
.prose li{margin:0 0 .5em}
.prose li::marker{color:var(--rust)}
.prose hr{border:0; height:2px; width:6rem; background:var(--rule); margin:2.6em auto}
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

/* A short finding list needs a label and breathing room, not a card. */
.tldr{border:0; border-top:2px solid var(--rust); border-bottom:1px solid var(--rule); background:transparent; padding:1rem 0; margin:0 0 2em}
.tldr .tldr-h{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin:0 0 .65rem}
.tldr ul{margin:0; padding-left:1.2em}
.tldr li{margin:0 0 .55em; font-size:1.02rem; line-height:1.55}
.tldr li:last-child{margin-bottom:0}

/* the finding aid: a compact rail on desktop and a disclosure on small screens */
.toc{border:1.5px solid var(--rule); background:var(--card); padding:1rem 1.2rem 1.1rem; margin:0 0 2.2em}
.toc summary{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); cursor:pointer; list-style:none}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"+"; float:right; color:var(--rust); font-size:1rem; line-height:.75}
.toc[open] summary{margin-bottom:.7rem}
.toc[open] summary::after{content:"–"}
.toc ol{list-style:none; counter-reset:toc; margin:0; padding:0; column-gap:2.2rem}
.toc li{counter-increment:toc; margin:0 0 .45em; break-inside:avoid; font-size:.98rem; line-height:1.45}
.toc li::before{content:counter(toc,decimal-leading-zero); font-family:var(--mono); font-size:.72rem; color:var(--rust); margin-right:.6em}
.toc a{color:var(--ink); text-decoration:none}
.toc a:hover,.toc a:focus-visible{color:var(--rust); text-decoration:underline; text-underline-offset:3px}
.toc a[aria-current="true"]{color:var(--rust); font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px}
.table-hint{display:none; font-family:var(--mono); font-size:.66rem; letter-spacing:.05em; color:var(--dim); margin:.55rem 0 0}
.source-jump{font-family:var(--mono); font-size:.72rem; letter-spacing:.03em; white-space:nowrap}

/* a reading slip, not a marketing card: present on every catalog post */
.explainer-brief{max-width:var(--measure);margin:1.35rem 0 0;padding:1rem 0;border-top:2px solid var(--rust);border-bottom:2px solid var(--rule)}
.explainer-brief h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rust);margin:0 0 .8rem}
.explainer-brief dl{display:grid;grid-template-columns:7.2rem minmax(0,1fr);gap:.55rem 1rem;margin:0}
.explainer-brief dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);padding-top:.2rem}
.explainer-brief dd{margin:0;font-size:1rem;line-height:1.52;color:var(--ink)}
/* underlined, not colour-only: rust on --card is 2.14:1 in light, under the 3:1
   WCAG 1.4.1 floor for distinguishing a link from its surrounding text. `.prose a`
   already underlines; these two blocks sit outside .prose and were missed. */
.explainer-brief a{color:var(--rust);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

.correction-note{border-top:2px solid var(--rule); margin-top:2.6rem; padding-top:1.1rem; font-size:.98rem; line-height:1.55}
.correction-note p{margin:0}
.correction-note b{font-family:var(--serif); font-size:1.08rem}
.correction-note a{margin-left:.2em;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

.prose figure figcaption::before{content:"Receipt";display:block;margin:0 0 .32rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rust);font-weight:700}

@media (min-width:980px){
  /* hug the toc+prose block (13rem + 2rem + 66ch + padding) so it centers;
     86rem left ~18rem of dead space on the right and pinned the toc to the edge */
  body[data-page="post"] .wrap{max-width:69rem}
  .article-head,.stamp,.correction-note,.readnext{max-width:var(--measure); margin-left:15rem}
  .explainer-brief{margin-left:15rem}
  .article-layout{display:grid; grid-template-columns:13rem minmax(0,var(--measure)); gap:2rem; align-items:start}
  .article-layout .prose{grid-column:2; padding-top:0}
  .article-layout .toc{grid-column:1; grid-row:1; position:sticky; top:1.25rem; border:0; border-top:2px solid var(--rule); border-bottom:2px solid var(--rule); background:transparent; padding:.8rem 0 1rem; margin:0}
  .toc summary{pointer-events:none}
  .toc summary::after{display:none}
  .toc[open] summary{margin-bottom:.7rem}
  .toc ol{columns:1}
  .toc li{font-size:.88rem}
  /* no-rail: article pages without a toc (about, stats, method) skip the blog
     posts' left rail and run a slightly wider centered column instead */
  body[data-page="post"] .wrap.no-rail{max-width:56rem}
  .no-rail .article-head{margin-left:0; max-width:none}
  .no-rail .article-layout{display:block}
  .no-rail .article-layout .prose{padding-top:2rem}
}

/* the closing station: date-due stamp */
.stamp{margin:3rem 0 0}
.stamp-box{display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--rust);
  border:2px solid var(--rust); border-radius:3px; padding:.5rem .95rem .45rem; transform:rotate(-2deg); opacity:.92}

.decoded{border:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:transparent; padding:1rem 0; margin:1.9em 0}
.decoded .lbl{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin-bottom:.55rem}
.decoded .q{font-family:var(--serif); font-style:italic; color:var(--dim); line-height:1.5}
.strike{text-decoration:line-through; text-decoration-thickness:2px; text-decoration-color:var(--rust); color:var(--dim); font-style:normal}
.decoded .truth{display:block; margin-top:.6rem; font-weight:700; color:var(--ink)}

/* Callouts are editorial annotations, not interchangeable cards. */
.prose .callout{border:0; background:transparent; padding:0; margin:1.9em 0}
.prose .callout .callout-h{font-family:var(--serif); font-size:1.1rem; font-weight:700; line-height:1.3; color:var(--ink); margin:0 0 .35rem}
.prose .callout p{margin:0 0 .7em}
.prose .callout p:last-child,.prose .callout ul:last-child,.prose .callout ol:last-child{margin-bottom:0}
.prose .callout ul,.prose .callout ol{margin:0; padding-left:1.2em}
.prose .callout li{margin:0 0 .4em}
/* the one-sentence definition remains distinct through type, not a container */
.prose .callout.info p{font-family:var(--serif); font-size:1.14rem; line-height:1.45}
/* questions carry weight through the list itself */
.prose .callout.questions li{font-weight:700; margin-bottom:.6em}

/* ==== filing furniture: components carried over from the warm engine ====
   The DOM matches unhinged-cms's warm components so the print-isolation rules
   in unhinged-warm-a11y.css (body.printing-sheet .box.sheet) still apply. Only
   the screen styling is restated here, in catalog tokens, so the sheet reads as
   part of this page instead of a transplant. */
.prose .box{margin:2.4em 0}

/* the board evidence sheet: a handout, so it has to survive being printed */
.prose .box.sheet{background:var(--card); border:1.5px solid var(--rule); border-top:3px solid var(--rust); padding:1.35rem 1.5rem}
.prose .box.sheet .sheet-top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust);
  border-bottom:1px solid var(--rule); padding-bottom:.7rem; margin:0 0 .95rem}
.prose .box.sheet .sheet-top .pr{color:var(--dim); letter-spacing:.1em}
.prose .box.sheet h3{font-family:var(--serif); font-weight:700; font-size:1.2rem; line-height:1.25; margin:0 0 .4rem}
.prose .box.sheet .meta{color:var(--dim); font-size:.88rem; margin:0 0 1rem}
.prose .box.sheet .sheet-body{margin:0 0 1.05em}
.prose .box.sheet .sheet-lbl{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rust); margin:1.15em 0 .5rem}
.prose .box.sheet ul,.prose .box.sheet ol{margin:0 0 .4em; padding-left:1.25em}
.prose .box.sheet li{margin:0 0 .45em; font-size:1rem; line-height:1.6}
.prose .box.sheet .btn{display:inline-flex; align-items:center; gap:.5rem; margin-top:.9rem;
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  padding:.6rem 1rem; cursor:pointer}
.prose .box.sheet .btn:hover{background:var(--ink); color:var(--bg)}
.prose .box.sheet .btn:focus-visible{outline:2px solid var(--rust); outline-offset:2px}

/* "what you keep": an actionable list, kept in the article flow */
.prose .box.keep{background:transparent; border:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:1.1rem 0}
.prose .box.keep .keep-eyebrow{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); margin:0 0 .5rem}
.prose .box.keep h3{font-family:var(--serif); font-weight:700; font-size:1.2rem; line-height:1.25; margin:0 0 .8rem}
.prose .box.keep .keep-links{list-style:none; margin:0; padding:0}
.prose .box.keep .keep-links li{display:flex; gap:.65rem; align-items:baseline; margin:0;
  padding:.6em 0; border-top:1px solid var(--rule); font-weight:600}
.prose .box.keep .keep-links li:first-child{border-top:none; padding-top:.1em}
.prose .box.keep .keep-links .arw{color:var(--rust)}

/* the alternate ending: a counterfactual, and the design has one job, which is to
   make sure nobody mistakes the speculation for the record. The sourced fork reads
   like the rest of the page; the road-not-taken is inset, tinted and badged. */
.prose .box.alt-ending{background:transparent; border:0; border-top:1px solid var(--dim); border-bottom:1px solid var(--dim); padding:1.15rem 0}
.prose .box.alt-ending .alt-top{display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  border-bottom:1px solid var(--rule); padding-bottom:.7rem; margin:0 0 .95rem}
.prose .box.alt-ending h3{font-family:var(--serif); font-weight:700; font-size:1.2rem; line-height:1.25; margin:0 0 .6rem}
.prose .box.alt-ending .alt-lbl{font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); margin:1.2em 0 .45rem}
.prose .box.alt-ending .alt-body,.prose .box.alt-ending .alt-grade{margin:0 0 .6em}
.prose .box.alt-ending .alt-grade{font-size:.94rem; line-height:1.6; color:var(--dim)}
/* the speculation is physically set apart from the sourced part */
.prose .box.alt-ending .alt-spec{border-top:1px dashed var(--dim); padding:.8rem 0 0; margin:1rem 0 .3em}
.prose .box.alt-ending .alt-spec p:last-child{margin-bottom:0}
/* grade badges: [P] carries the accent, [X over [P]] is deliberately drab */
.prose .box.alt-ending .g{font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; padding:.12em .45em;
  border:1px solid currentColor; margin-right:.5em; white-space:nowrap}
.prose .box.alt-ending .g-p{color:var(--rust)}
.prose .box.alt-ending .g-x{color:var(--dim)}

/* evidence figures: screenshots of the record, so the caption carries the cite */
.prose figure.post-image{margin:2.1em 0}
/* cap tall evidence screenshots at ~half a screen; width follows aspect, centered */
.prose figure.post-image img{display:block; max-width:100%; max-height:32rem; width:auto; height:auto; margin-inline:auto; border:1px solid var(--rule)}
.prose figure.post-image figcaption{font-family:var(--mono); font-size:.78rem; line-height:1.55;
  color:var(--dim); margin-top:.6rem}
.prose figure.post-image figcaption a{color:var(--rust)}

/* Pull quotes use type and space, not a branded rail. */
.prose blockquote.pull{font-family:var(--serif); font-style:normal; font-weight:700;
  font-size:clamp(1.35rem,1rem + 1.2vw,1.7rem); line-height:1.3; text-wrap:balance;
  border:0; padding:0; margin:2em 0; color:var(--ink)}
.prose blockquote.pull p{margin:0}

/* ==== data tables: sourced figures set as a ledger ==== */
.prose figure.table-fig{margin:2.1em 0}
.prose .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose .table-scroll:focus-visible{outline:2px solid var(--rust); outline-offset:3px}
.prose table{border-collapse:collapse; width:100%; min-width:32rem;
  font-family:var(--mono); font-size:.88rem; line-height:1.45}
.prose thead th{font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:var(--rust); font-weight:700; text-align:right; white-space:nowrap;
  padding:.55rem .8rem; border-bottom:2px solid var(--rule)}
.prose thead th:first-child,.prose thead th.l{text-align:left}
.prose tbody th{font-family:var(--serif); font-weight:600; font-size:.98rem;
  text-align:left; color:var(--ink); padding:.62rem .8rem;
  border-bottom:1px solid var(--rule); vertical-align:baseline}
.prose tbody th .sub{display:block; font-family:var(--mono); font-weight:400;
  font-size:.7rem; letter-spacing:.04em; text-transform:uppercase; color:var(--dim); margin-top:.18rem}
.prose tbody td{padding:.62rem .8rem; border-bottom:1px solid var(--rule);
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;
  color:var(--ink); vertical-align:baseline}
.prose tbody td.txt{text-align:left; white-space:normal; color:var(--ink)}
.prose tbody td.gouge{color:var(--rust); font-weight:700}
.prose tbody tr:last-child th,.prose tbody tr:last-child td{border-bottom:0}
.prose figure.table-fig figcaption{font-family:var(--body); font-size:.95rem;
  color:var(--ink); line-height:1.6; margin-top:.8rem}
@media (max-width:560px){ .prose table{font-size:.82rem} .prose thead th{font-size:.68rem} .table-hint{display:block} }

.receipts{border-top:2px solid var(--rule); margin-top:2.6rem; padding-top:1.7rem}
.receipts h2{font-family:var(--serif); font-weight:700; font-size:1.5rem; margin:0 0 .2rem}
.receipts .rlead{font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin:0 0 1.2rem}
.receipts ol{list-style:none; counter-reset:r; margin:0; padding:0}
.receipts li{position:relative; padding:0 0 1.1rem 2.5rem; counter-increment:r}
.receipts li:last-child{padding-bottom:0}
.receipts li::before{content:counter(r); position:absolute; left:0; top:.05rem; font-family:var(--mono); font-size:.78rem; color:var(--rust); border:1px solid var(--rule); border-radius:3px; padding:.05rem .45rem; line-height:1.3}
.receipts .claim{font-size:1.02rem; line-height:1.45}
.receipts .src{display:block; font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--dim); margin-top:.25rem; word-break:break-word}

.readnext{border-top:2px solid var(--rule); margin-top:2.6rem; padding-top:1.7rem}
.readnext-label{font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--dim); margin:0 0 1rem}
.readnext .item{display:block; text-decoration:none; margin-bottom:1.2rem}
.readnext .item:last-child{margin-bottom:0}
.readnext .rmeta{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--rust); display:block; margin-bottom:.25rem}
.readnext .rt{font-family:var(--serif); font-weight:700; font-size:1.2rem; line-height:1.25; color:var(--ink);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:color-mix(in srgb,currentColor 30%,transparent)}
.readnext .item:hover .rt,.readnext .item:focus-visible .rt{text-decoration-color:currentColor; text-decoration-thickness:2px}

/* ==== FOOTER (both page types) — three tiers: wordmark, legend, fine print ==== */
.index-foot,.foot{text-align:center; border-top:2px solid var(--rule); margin-top:2.8rem; padding:2.8rem 0 4.5rem}
.foot-mark{display:inline-block; font-family:var(--serif); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink); text-decoration:none; margin-bottom:1.3rem}
.foot-mark:hover{color:var(--rust); text-decoration:none}
.index-foot .legend,.foot .legend{font-family:var(--mono); font-size:.67rem; letter-spacing:.07em; color:var(--dim); line-height:1.9; margin:0 0 1.4rem}
.index-foot .legend b,.foot .legend b{color:var(--ink); font-weight:500}
.index-foot .legend .leg,.foot .legend .leg{white-space:nowrap}
.index-foot .legend .dot,.foot .legend .dot{opacity:.5; margin:0 .55em}
.index-foot .legal,.foot .legal{font-family:var(--mono); font-size:.72rem; letter-spacing:.02em; color:var(--ink); line-height:1.6; margin:0 0 .45rem}
.index-foot .legal a,.foot .legal a{color:var(--rust); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px}
.index-foot .fineprint,.foot .fineprint{font-family:var(--mono); font-size:.64rem; letter-spacing:.03em; color:var(--dim); line-height:1.6; margin:0}

/* ---- reduced motion: gentle load rise on the landing rows ---- */
@media (prefers-reduced-motion:no-preference){
  .masthead,.nav,.catalog-head,.post-row{opacity:0; animation:rise .55s ease forwards}
  .nav{animation-delay:.08s}
  .catalog-head{animation-delay:.12s}
  .post-row:nth-child(1){animation-delay:.18s}
  .post-row:nth-child(2){animation-delay:.24s}
  .post-row:nth-child(3){animation-delay:.3s}
  .post-row:nth-child(4){animation-delay:.36s}
  .post-row:nth-child(5){animation-delay:.42s}
  .post-row:nth-child(6){animation-delay:.48s}
  .post-row:nth-child(7){animation-delay:.54s}
  @keyframes rise{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none}}
}

/* ---- Windows High Contrast / forced-colors ---- */
@media (forced-colors: active){
  .card,.decoded,.receipts li::before,.tldr,.toc{border-color:CanvasText}
  .stamp-box{color:CanvasText; border-color:CanvasText}
  .prose h2::before{background:CanvasText}
  .card .flag{color:Canvas; background:CanvasText}
  body::before, body::after{display:none}
}

@media (max-width:560px){
  body{font-size:17px}
  .home-links{column-gap:1.15rem;row-gap:.6rem}
  .home-more>h2{margin-bottom:1.15rem}
  /* show the hamburger; collapse the category links into a dropdown */
  .nav-toggle{display:inline-flex}
  .nav{flex-direction:column; align-items:flex-start; gap:.2rem}
  .topbar .bar{flex-wrap:wrap; row-gap:.3rem}
  .topnav{width:100%; order:3}
  html.js .nav-links{display:none}
  html.js .nav-links.open{display:flex; flex-direction:column; align-items:stretch; width:100%; gap:0; padding:.4rem 0 .2rem}
  html.js .nav-links.open a{padding:.65rem .25rem; border-bottom:1px solid var(--rule)}
  html.js .nav-links.open a:last-child{border-bottom:0}
  .desk-notes li{grid-template-columns:1fr; gap:.1rem; margin:.7rem 0}
  .desk-notes time{padding:0}
  .featured-file{padding:1.8rem 0 1.65rem}
  .featured-file-grid{grid-template-columns:1fr;gap:1.25rem}
  .featured-document{max-width:28rem}
  .reading-trail{display:grid;grid-template-columns:1fr;gap:.45rem;margin-top:1.25rem}
  .post-row{grid-template-columns:1fr; gap:.9rem; padding:1.6rem 0}
  .card{flex-direction:row; align-items:center; flex-wrap:wrap; gap:.5rem .8rem; padding:.5rem .7rem}
  .card .div{display:none}
  .card .flag{margin-left:auto; order:9}
  .reporting-strip{display:block; line-height:1.8}
  .reporting-strip span,.reporting-strip a{margin-right:.65rem}
  .reporting-strip span:not(:last-of-type)::after{display:none}
  .explainer-brief{margin-top:1rem}.explainer-brief dl{grid-template-columns:1fr;gap:.2rem}.explainer-brief dt{margin-top:.55rem}.explainer-brief dt:first-of-type{margin-top:0}
  /* footer legend stacks one pair per line, no dangling separators */
  .index-foot .legend,.foot .legend{display:flex; flex-direction:column; align-items:center; gap:.4rem}
  .index-foot .legend .dot,.foot .legend .dot{display:none}
}