/* STARK BLACK AND WHITE.
   No cream, no warm grey, no second colour anywhere. Hierarchy is carried
   entirely by weight, case, tracking and the thickness of rules — the way a
   photocopied zine or an underground paper has to work, because it had one ink.
   Both verification states are BLACK AND WHITE for the same reason: a stamp is
   solid black or a black keyline, never a colour, so nothing depends on hue. */
:root{
--ink:#000; --mid:#3d3d3d; --line:#000; --bg:#fff; --paper:#fff;
--logo:'Alfa Slab One',Georgia,'Times New Roman',serif;
--display:'Playfair Display',Georgia,'Times New Roman',serif;
--body:'Old Standard TT',Georgia,'Times New Roman',serif;
/* Labels are a grotesque, as they were before the one-ink restyle. Body and
   labels returned to the stack this paper launched with on 2026-10-03; the
   display and wordmark faces were left alone. NEVER name the operator in a
   served asset — this stylesheet is public, and a comment here once carried the
   name of the person behind the paper. probe/anonymity_check.py sweeps these
   files now; run it after any change to the theme. */
--sans:ui-sans-serif,system-ui,'Helvetica Neue',Arial,sans-serif;
--maxw:1040px;
}
@media (prefers-color-scheme:dark){
:root{--ink:#fff;--mid:#bdbdbd;--line:#fff;--bg:#000;--paper:#000}
}
/* Keyboard and screen-reader users reach the content first. Off-canvas until
   focused, so it never competes with the masthead for a sighted reader. */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--bg);
color:var(--ink);border:3px solid var(--ink);padding:.5rem .8rem;
font-family:var(--sans);font-size:.6875rem;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}

# The search box on every page, under the nav rail. Compact and square, so it
# reads as nameplate furniture rather than a modern widget.
.navsearch{display:flex;gap:.4rem;align-items:stretch;max-width:24rem;
 margin:.7rem auto 0;border:3px solid var(--ink);padding:.25rem .35rem}
.navsearch input{flex:1 1 auto;min-width:0;border:0;background:transparent;
 color:var(--ink);font-family:var(--body);font-size:1rem;padding:.3rem .4rem}
.navsearch input:focus{outline:3px solid var(--ink);outline-offset:2px}
.navsearch button{font-family:var(--sans);font-size:.6875rem;font-weight:700;
 letter-spacing:.18em;text-transform:uppercase;background:var(--ink);
 color:var(--bg);border:0;padding:.45rem .8rem;cursor:pointer}
.vh{position:absolute;left:-9999px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
font-family:var(--body);font-size:17px;line-height:1.5;padding:0 1rem 3rem;
/* slightly tighter than a book: newsprint is set dense */
letter-spacing:-.003em}
.wrap{max-width:var(--maxw);margin:0 auto}

/* Photocopier grain. A 64x64 tiled PNG generated by probe/make_grain.py and
   served from this domain — no CDN, no dependency. A tiled bitmap costs almost
   nothing to composite. An inline SVG <feTurbulence> filter was tried first and
   was far too expensive: fractal noise is recomputed across the whole viewport
   on every composite, which on this hardware was slow enough to stall a
   headless screenshot for 60s. */
body::before{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
opacity:.07;mix-blend-mode:multiply;
background-image:url(/grain.png);background-repeat:repeat;background-size:64px 64px}
@media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen;opacity:.07}}

a{color:inherit}

/* masthead: ears, fat all-caps slab wordmark, then a heavy bar */
header.masthead{text-align:center;padding:1.1rem 0 0}
.masthead .ears{display:flex;justify-content:space-between;gap:1rem;
font-family:var(--sans);font-size:.6875rem;font-weight:700;text-transform:uppercase;
letter-spacing:.2em;color:var(--ink);
border-bottom:3px solid var(--ink);padding-bottom:.35rem;margin-bottom:.55rem}
.masthead h1,.masthead .masthead-name{font-family:var(--logo);font-weight:400;text-transform:uppercase;
font-size:clamp(1.9rem,9.2vw,4.9rem);line-height:.92;margin:.1rem 0 .3rem;
letter-spacing:-.015em;word-break:break-word}
.masthead h1 a,.masthead .masthead-name a{text-decoration:none;color:var(--ink)}
.masthead .tag{font-family:var(--sans);font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.28em;color:var(--ink);margin:.35rem 0 0}
.masthead .cities{font-family:var(--sans);font-size:.6875rem;font-weight:700;
text-transform:uppercase;letter-spacing:.22em;color:var(--ink);
margin-top:.6rem;border-top:1px solid var(--ink);padding-top:.4rem}

/* a fat bar over a hairline: the printer's rule, in one ink */
.rule{border-top:7px solid var(--ink);border-bottom:1px solid var(--ink);
 height:3px;margin:.55rem 0 0}

/* the nav rail under the nameplate — one shared definition, every page */
.nav{text-align:center;font-family:var(--sans);font-size:.75rem;font-weight:700;
 text-transform:uppercase;letter-spacing:.2em;
 border-bottom:3px solid var(--ink);padding:.45rem 0;margin:0 0 1.5rem}
.nav a{display:inline-block;margin:0 .75rem;text-decoration:none}
.nav a:hover{background:var(--ink);color:var(--bg)}

/* Section heads knock out of a solid black bar. The strongest signal available
   when you only have one ink, and it costs no extra weight. */
h2{font-family:var(--display);font-weight:900;font-size:1.02rem;
text-transform:uppercase;letter-spacing:.1em;text-align:center;
background:var(--ink);color:var(--bg);
padding:.35rem .6rem;margin:0 0 1.15rem}
section{margin:0 0 2.4rem}

.lead{padding-bottom:1.4rem;border-bottom:3px solid var(--ink)}
.lead .kicker{display:inline-block;font-family:var(--sans);font-size:.6875rem;
font-weight:700;text-transform:uppercase;letter-spacing:.24em;
background:var(--ink);color:var(--bg);padding:.16rem .45rem;margin-bottom:.55rem}
.lead h1,.lead h2{font-family:var(--display);font-weight:900;
font-size:clamp(1.75rem,6.2vw,3.15rem);line-height:1.02;margin:0 0 .5rem;
letter-spacing:-.015em}
.lead h1 a,.lead h2 a{text-decoration:none}
.lead h1 a:hover{text-decoration:underline;text-decoration-thickness:3px}

/* true newspaper columns, with a column rule between them */
.grid{columns:1;column-gap:1.6rem}
@media (min-width:680px){.grid{columns:2;column-rule:1px solid var(--ink)}}
.item{break-inside:avoid;padding-bottom:.95rem;margin-bottom:.95rem;
border-bottom:1px solid var(--ink)}
.grid > .item:last-child{border-bottom:none}
.item h3{font-family:var(--display);font-weight:900;font-size:1.05rem;
line-height:1.14;margin:0 0 .26rem;letter-spacing:-.01em}
.item h3 a{text-decoration:none}
.item h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.sum{font-size:.88rem;color:var(--mid);margin:.25rem 0 0}
.lead .sum{font-size:1.04rem;color:var(--ink)}
.meta{font-family:var(--sans);font-size:.6875rem;font-weight:700;
text-transform:uppercase;letter-spacing:.16em;color:var(--mid);margin-bottom:.3rem}
.src{color:var(--ink);font-weight:700}
.dot{margin:0 .35rem}

/* Stamps, not pills — square, letterpress-like, and never decorative.
   BOTH states carry an explicit class. A default-plus-override scheme lets a
   theme change silently invert which state looks like a warning: that is exactly
   what happened when the previous theme landed, and the badge is the paper's
   verification signal, so it must not be inferable by omission. The bare default
   is therefore a neutral mid grey — a missing class reads as wrong at a glance.
   Verified is a solid black stamp; unverified is a black keyline that does NOT
   fill, so the two are distinguishable in pure black and white. */
.badge{display:inline-block;font-family:var(--sans);font-size:.6875rem;font-weight:700;
letter-spacing:.16em;text-transform:uppercase;padding:.22rem .5rem;
border:2px solid var(--ink);background:var(--mid);color:#fff;border-radius:0}
.badge.verified{background:var(--ink);color:var(--bg)}
.badge.unverified{background:transparent;color:var(--ink);
box-shadow:inset 0 0 0 1px var(--ink)}
/* Opinion is neither the solid "checked" mark nor the hollow "unverified"
   outline. An editorial is the paper's own voice, so it gets a rule of its own:
   a doubled border, which reads as deliberate rather than as a warning. */
.badge.opinion{background:var(--bg);color:var(--ink);
box-shadow:inset 0 0 0 1px var(--ink),0 0 0 1px var(--ink)}
.cnote{border:2px solid var(--ink);border-left-width:8px;padding:.55rem .8rem;
font-size:.9rem;color:var(--ink);background:transparent}

.stories{border-bottom:5px solid var(--ink);padding-bottom:1.4rem}
.story{margin:0 0 1.8rem;padding-bottom:1.4rem;border-bottom:1px solid var(--ink)}
.story:last-child{border-bottom:none}
.story .sh{font-family:var(--display);font-weight:900;
font-size:clamp(1.3rem,3.8vw,2rem);line-height:1.06;margin:.45rem 0 .5rem;
letter-spacing:-.015em;
/* .sh is an <h2>, and h2 is the solid knockout section head. A headline is NOT
   a section head, so the bar has to be explicitly undone here — otherwise long
   headlines set as white-on-black bars and clash with the lead. */
background:transparent;color:var(--ink);padding:0;text-align:left}
.story .sh a{text-decoration:none}
.story .sh a:hover{text-decoration:underline;text-decoration-thickness:3px}
.stand{font-style:italic;color:var(--mid);font-size:1.02rem;margin:0 0 .9rem}
.cites{font-family:var(--sans);font-size:.7rem;color:var(--mid);
margin-top:.6rem;padding-top:.5rem;border-top:3px solid var(--ink)}
.cites a{text-decoration:underline}
/* The inline [n] marker links down to its entry above. Kept in the label tier
   (11px, the type floor) and underlined rather than coloured, because the paper
   runs one ink: the affordance has to survive with no hue to carry it. */
.citem{font-family:var(--sans);font-size:.6875rem;line-height:0;
 vertical-align:super;text-decoration:none;padding:0 .15em;
 border-bottom:1px solid var(--ink)}
.citem:hover{background:var(--ink);color:var(--bg)}
/* Landing on a source should show which one you landed on. */
.cites li:target{font-weight:700}
.story-meta{margin-top:.6rem}