/* The Daily Atomizer — a classic men's-magazine look: cream stock, black ink, deep red and navy,
   Didone headlines, Caslon text, geometric-sans kickers, asymmetric columns and lots of air.
   Original design in the spirit of 1930s–50s American magazines. Diagrams use these same color variables. */
:root{
  --paper:#ffffff; --paper-2:#f7f1e4; --ink:#1a1714; --ink-2:#463f37; --muted:#6c6458; --rule:#1a1714; --hair:#ddd4c2;
  --red:#a11d1f; --navy:#1f3556; --gold:#a07c3a; --card:#f8f2e6;
  /* diagram/legacy names */
  --bg:var(--paper); --surface:var(--card); --fg:var(--ink); --line:var(--hair); --accent:var(--red); --accent-soft:#efd9cf; --on-accent:#fff8ec; --chip:#e8dcc3; --chip2:#dfe3e6; --focus:var(--navy); --warn:var(--red);
  --display:"Playfair Display","Didot","Bodoni 72",Georgia,serif;
  --text:"Libre Caslon Text","Caslon","Georgia",serif;
  --sans:"Jost","Futura","Century Gothic",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#17140f; --paper-2:#1f1a14; --ink:#efe4cc; --ink-2:#d4c7ab; --muted:#a89a7f; --rule:#efe4cc; --hair:#4a4033;
  --red:#e2625a; --navy:#9db8e0; --gold:#d2ad66; --card:#211c15;
  --accent-soft:#3a201c; --on-accent:#17140f; --chip:#2b241b; --chip2:#232a33; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#17140f; --paper-2:#1f1a14; --ink:#efe4cc; --ink-2:#d4c7ab; --muted:#a89a7f; --rule:#efe4cc; --hair:#4a4033;
  --red:#e2625a; --navy:#9db8e0; --gold:#d2ad66; --card:#211c15;
  --accent-soft:#3a201c; --on-accent:#17140f; --chip:#2b241b; --chip2:#232a33; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--text);font-feature-settings:"liga","onum"}
a{color:inherit}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
img{max-width:100%;height:auto}
.paper{max-width:1240px;margin:0 auto;padding:max(18px,env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) 64px max(18px,env(safe-area-inset-left,0px))}

/* ---------- masthead ---------- */
.mast{text-align:center;margin-bottom:22px}
.strip{display:flex;justify-content:space-between;align-items:center;gap:8px 18px;flex-wrap:wrap;font:600 11.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:6px 12px;background:var(--card);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip a{text-decoration:none;color:var(--red)}
.strip a:hover{text-decoration:underline}
.nameplate{display:block;text-decoration:none;color:var(--ink);padding:12px 0 2px;line-height:.85}
.np-the{display:block;font:italic 700 clamp(16px,2.2vw,22px)/1 var(--display);color:var(--red);margin-bottom:4px;letter-spacing:.02em}
.np-name{display:block;font:900 clamp(44px,9vw,104px)/.88 var(--display);letter-spacing:-.02em;text-transform:uppercase}
.motto{margin:8px auto 0;font:italic 400 clamp(14px,1.8vw,17px)/1.4 var(--display);color:var(--ink-2)}
.sections{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 0;margin-top:10px;padding:7px 0;border-top:3px double var(--rule);border-bottom:3px double var(--rule)}
.sections a{font:600 12.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:6px 14px;border-right:1px solid var(--hair)}
.sections a:last-child{border-right:0}
.sections a:hover,.sections a[aria-current="page"]{color:var(--red)}
@media (max-width:560px){.strip{justify-content:center}.strip-date{order:-1;width:100%}.sections a{padding:6px 9px;letter-spacing:.12em;font-size:11.5px}}

/* ---------- shared type ---------- */
.kicker{margin:0 0 10px;font:700 12px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.deck{margin:0 0 12px;font:italic 400 clamp(17px,1.8vw,20px)/1.4 var(--display);color:var(--ink-2)}
.byline{margin:0 0 20px;font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.byline .upd{color:var(--red)}
.more{margin:14px 0 0;font:700 12.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.more a{color:var(--red);text-decoration:none;border-bottom:1px solid currentColor}
.rule-h{display:flex;align-items:center;gap:14px;font:700 13px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;margin:0 0 16px;color:var(--ink)}
.rule-h::before,.rule-h::after{content:"";flex:1;border-top:1px solid var(--rule)}

/* ---------- front page ---------- */
.fp-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:start}
@media (max-width:900px){.fp-grid{grid-template-columns:minmax(0,1fr);gap:30px}}
.lead h1{margin:0 0 14px;font:900 clamp(32px,4.6vw,52px)/1.04 var(--display);letter-spacing:-.015em;text-wrap:balance}
.lead h1 a{text-decoration:none}
.lead h1 a:hover{color:var(--red)}
.lead-text{columns:2 280px;column-gap:28px;column-rule:1px solid var(--hair)}
.lead-text p{margin:0}
.lead-text p::first-letter,.body > p:first-of-type::first-letter{float:left;font:900 4.3em/.8 var(--display);color:var(--red);padding:.06em .1em 0 0}
.rail{display:flex;flex-direction:column;gap:14px}
.box{display:block;border:1px solid var(--rule);background:var(--card);padding:12px 14px;text-decoration:none;color:var(--ink)}
.box-h{margin:0 0 10px;padding-bottom:8px;border-bottom:3px double var(--rule);font:700 12px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-align:center}
.box p{margin:0 0 6px;font-size:15px;line-height:1.5}
.toc{list-style:none;margin:0;padding:0;counter-reset:t}
.toc li{border-bottom:1px solid var(--hair)}
.toc li:last-child{border-bottom:0}
.toc a{display:block;padding:7px 0;text-decoration:none;font:700 16px/1.25 var(--display)}
.toc a:hover{color:var(--red)}
.toc-s{display:block;font:600 10.5px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:2px}
.listen-box{background:var(--navy);color:#f4ecdc;border-color:var(--navy)}
.listen-box .box-h{border-bottom-color:#f4ecdc}
.listen-box .go{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#f0c9a6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .listen-box{background:#1d2a3e;border-color:#33475f}}
.columns{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0;margin-top:28px;border-top:3px double var(--rule)}
.col-story{padding:16px 18px 10px;border-right:1px solid var(--hair)}
.col-story:last-child{border-right:0}
@media (max-width:620px){.col-story{border-right:0;border-bottom:1px solid var(--hair);padding:20px 0}}
.col-story h2{margin:0 0 8px;font:700 21px/1.15 var(--display);text-wrap:balance}
.col-story h2 a{text-decoration:none}
.col-story h2 a:hover{color:var(--red)}
.col-story .deck{font-size:15.5px;margin-bottom:8px}
.snip{margin:0;font-size:15px;color:var(--ink-2)}
.back-issues{margin-top:34px}
.bi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 30px}
.bi-d{margin:0 0 6px;font:700 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.bi ul{margin:0;padding:0;list-style:none}
.bi li{margin:0 0 6px;font:700 16px/1.3 var(--display)}
.bi a{text-decoration:none}
.bi a:hover{color:var(--red)}
.sec-title{text-align:center;font:900 clamp(34px,5vw,54px)/1 var(--display);margin:0 0 26px}
.sec-list{list-style:none;margin:0 auto;padding:0;max-width:760px}
.sec-list li{border-bottom:1px solid var(--hair)}
.sec-list a{display:grid;grid-template-columns:110px minmax(0,1fr);gap:2px 18px;padding:16px 0;text-decoration:none}
.sec-list .when{font:600 11.5px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec-list .hl{font:700 22px/1.2 var(--display)}
.sec-list .dk{grid-column:2;font:italic 16px/1.4 var(--display);color:var(--ink-2)}
.sec-list a:hover .hl{color:var(--red)}
@media (max-width:520px){.sec-list a{grid-template-columns:minmax(0,1fr)}.sec-list .dk{grid-column:1}}
.nothing{text-align:center;font-style:italic;color:var(--muted)}
.empty{max-width:640px;margin:20px auto;text-align:center}
.empty h1{font:900 clamp(30px,5vw,48px)/1.08 var(--display);margin:0 0 14px}

/* ---------- story page ---------- */
.story-wrap{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:40px;align-items:start}
@media (max-width:900px){.story-wrap{grid-template-columns:minmax(0,1fr);gap:34px}}
.story{max-width:720px}
.story h1{margin:0 0 14px;font:900 clamp(30px,4.4vw,48px)/1.06 var(--display);letter-spacing:-.015em;text-wrap:balance}
.story > .kicker{display:inline-block;border-bottom:2px solid var(--red);padding-bottom:4px}
.correction{border-left:4px solid var(--red);background:var(--card);padding:10px 16px;margin:0 0 18px;font-size:16px}
.lab{font:700 11.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.listen{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--card);padding:10px 12px;margin:0 0 20px}
.listen audio{flex:1 1 260px;min-width:0;height:40px}
.listen .note{font:600 12px var(--sans);letter-spacing:.1em;color:var(--muted)}
.why{font:italic 17px/1.5 var(--display);color:var(--ink-2);border-left:3px solid var(--gold);padding-left:14px}
.body h2{font:700 12.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:28px 0 10px;color:var(--ink)}
.body h3{font:700 22px/1.25 var(--display);margin:28px 0 8px}
.body p,.body li{margin:0 0 13px;hyphens:auto}
.body ul,.body ol{padding-left:24px;margin:0 0 18px}
.body a{color:var(--red);text-decoration-thickness:1px;text-underline-offset:2px}
.body blockquote{margin:0 0 16px;padding:2px 18px;border-left:2px solid var(--hair);color:var(--ink-2);font-style:italic}
.body blockquote.pull{border:0;border-top:3px double var(--rule);border-bottom:3px double var(--rule);padding:18px 6px;margin:28px 0;text-align:center}
.body blockquote.pull p{margin:0;font:italic 700 clamp(22px,3vw,28px)/1.3 var(--display);color:var(--red)}
.tablebox{overflow-x:auto;margin:6px 0 22px}
.body table{border-collapse:collapse;width:100%;font-size:15.5px}
.body th,.body td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
.body th{font:700 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--rule)}
.body h2#sources + ul, .body h2:last-of-type + ul{font-size:15px}
.end-mark{text-align:center;color:var(--red);font-size:14px;margin:6px 0 0}
figure.diagram{margin:30px 0;border:1px solid var(--rule);background:var(--card);padding:16px}
figure.diagram .svgbox{overflow-x:auto}
figure.diagram svg{display:block;width:100%;min-width:540px;height:auto}
figure.diagram figcaption{font:italic 15px/1.45 var(--display);color:var(--ink-2);margin-top:10px}
section.block{margin-top:30px}
.try p{font-size:17px;background:var(--card);border:1px solid var(--hair);padding:16px 18px;margin:0}
.media{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.media a{display:flex;flex-direction:column;gap:4px;text-decoration:none;background:var(--card);border:1px solid var(--hair);padding:14px}
.media a:hover{border-color:var(--rule)}
.kind{font:600 10.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.mt{font:700 17px/1.25 var(--display)}
.mw{font-size:14.5px;line-height:1.45;color:var(--ink-2)}

/* shop cards (named "shopcard", never "ad", so ad blockers leave them alone) */
.shopcard{display:flex;flex-direction:column;gap:6px;text-decoration:none;background:var(--card);border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:3px;padding:16px 18px;margin:4px}
.shopcard:hover .sc-cta{text-decoration:underline}
.sc-tag{font:600 10.5px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);text-align:center}
.sc-h{font:900 24px/1.15 var(--display);text-align:center}
.sc-p{font-size:15.5px;line-height:1.5;color:var(--ink-2);text-align:center}
.sc-cta{font:700 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);text-align:center;margin-top:4px}
.sc-wrap{max-width:560px;margin-left:auto;margin-right:auto}

/* quiz */
.quiz{display:flex;flex-direction:column;gap:16px}
.q{background:var(--card);border:1px solid var(--hair);padding:16px}
.q p.qt{font:700 18px/1.35 var(--display);margin:0 0 10px}
.opts{display:flex;flex-direction:column;gap:6px}
.opts button{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 12px;border:1px solid var(--hair);font:400 16px/1.35 var(--text);background:var(--paper)}
.opts button:hover:not([disabled]){border-color:var(--rule)}
.opts button:focus-visible{outline:2px solid var(--navy)}
.opts button.right{border-color:var(--navy);background:var(--chip2);font-weight:700}
.opts button.wrong{border-color:var(--red);text-decoration:line-through;color:var(--muted)}
.opts button[disabled]{cursor:default}
.explain{margin:10px 0 0;font:italic 15.5px/1.45 var(--display);color:var(--ink-2)}
.score{font:600 12.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.reset{all:unset;cursor:pointer;margin-top:12px;font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* letters + tips */
.fb{display:flex;flex-direction:column;gap:10px}
.rates{display:flex;flex-wrap:wrap;gap:8px}
.rate{all:unset;cursor:pointer;padding:8px 14px;border:1px solid var(--rule);font:600 12.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;background:var(--card)}
.rate:hover{color:var(--red)}
.rate[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.rate:focus-visible,.send:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.fl{font:600 12px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fb textarea,.req textarea,.req input[type=text]{width:100%;font:400 16px/1.45 var(--text);color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:9px 11px}
.fb textarea:focus,.req textarea:focus,.req input:focus{outline:2px solid var(--navy);outline-offset:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.send{all:unset;cursor:pointer;padding:10px 18px;background:var(--red);color:#fff8ec;font:700 12px var(--sans);letter-spacing:.16em;text-transform:uppercase}
.send[disabled]{opacity:.6;cursor:default}
.msg{font:italic 15px var(--display);color:var(--ink-2)}
.req{display:flex;flex-direction:column;gap:8px}
.req .small{font-size:15px;color:var(--ink-2);margin:0}
.hp,.vh{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* ---------- colophon ---------- */
.colophon{margin-top:44px;padding-top:18px;border-top:3px double var(--rule);text-align:center;color:var(--ink-2);font-size:15px}
.colophon p{margin:0 auto 8px;max-width:62ch}
.np-small{font:900 26px/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;color:var(--ink)}
.colophon nav{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.colophon a{font:700 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);text-decoration:none}
.colophon p a{font:inherit;letter-spacing:0;text-transform:none;text-decoration:underline}

/* story photos: product shots on white, framed with a hairline */
.lead-img{float:right;width:min(42%,300px);margin:0 0 12px 24px;border:1px solid var(--hair);background:#fff}
.lead-img img,.col-img img,.story-img img{display:block;width:100%;height:auto}
@media (max-width:640px){.lead-img{float:none;width:100%;max-width:420px;margin:0 auto 14px}}
.lead-text{overflow:hidden}
.col-img{display:block;border:1px solid var(--hair);background:#fff;margin:0 0 12px;aspect-ratio:4/3;overflow:hidden}
.col-img img{height:100%;object-fit:contain}
.story-img{margin:6px 0 22px;border:1px solid var(--hair);background:#fff}
.story-img img{max-height:520px;object-fit:contain}
.story-img figcaption{padding:6px 10px;border-top:1px solid var(--hair);font:600 10.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right;background:var(--card)}

/* v2.3: drawings as story art, the briefing player, The School in order */
.lead-art,.col-art{display:flex;align-items:center;justify-content:center;background:#fff;padding:6px}
.lead-art svg,.col-art svg,.sl-art svg{display:block;width:100%;height:100%;max-height:100%}
.col-art{aspect-ratio:4/3}
.briefing{margin:18px 0 0;padding:12px 14px;border:1px solid var(--rule);border-left:4px solid var(--red);background:var(--card);clear:both}
.br-h{margin:0 0 8px;font:700 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.br-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red);margin-right:8px;vertical-align:1px}
.briefing audio{display:block;width:100%;height:40px}
.sec-intro{max-width:760px;margin:-10px auto 22px;text-align:center;font:italic 18px/1.5 var(--display);color:var(--ink-2)}
.school-list a{grid-template-columns:110px minmax(0,1fr) 170px}
.school-list .when{color:var(--red);grid-row:1 / span 3}
.school-list .hl,.school-list .dk,.school-list .sl-meta{grid-column:2}
.sl-meta{font:600 11.5px/1.6 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.sl-art{grid-column:3;grid-row:1 / span 3;align-self:center;display:block;border:1px solid var(--hair);background:#fff;padding:4px;aspect-ratio:4/3}
@media (max-width:640px){.school-list a{grid-template-columns:minmax(0,1fr)}.school-list .when,.school-list .hl,.school-list .dk,.school-list .sl-meta{grid-column:1;grid-row:auto}.sl-art{display:none}}