@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700;9..144,900&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --serif:'Fraunces',Georgia,serif; --sans:'Bricolage Grotesque',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --ink:#141310; --ink-2:#3b3831; --ink-3:#6d6860; --ink-4:#a39c91;
  --paper:#f7f4ed; --paper-2:#efeade; --card:#fffdf8;
  --rule:#e2dccd; --rule-2:#d3ccb9;
  --hot:#ff4d17; --deep:#1b3a5c; --moss:#41693f; --plum:#6b2f5e; --sun:#e8a300;
}
:root[data-theme="dark"]{
  --ink:#f4f1e8; --ink-2:#d2ccbe; --ink-3:#9b948a; --ink-4:#6a655d;
  --paper:#12110f; --paper-2:#191713; --card:#1c1a16; --rule:#2c2924; --rule-2:#3b3730;
  --hot:#ff6a3d; --deep:#7fb0dd; --moss:#7fae7c; --plum:#c98bb9; --sun:#ffc44d;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:700;letter-spacing:-.025em;line-height:1.05;}
p{margin:0;}
.mono{font-family:var(--mono);}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.03;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='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");}
.wrap{width:100%;margin:0;padding:0 clamp(24px,3.2vw,56px);}

/* ticker */
.ticker{background:var(--ink);overflow:hidden;height:34px;display:flex;align-items:center;}
.ticker-track{display:flex;white-space:nowrap;animation:slide 44s linear infinite;}
.ticker-track span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:0 26px;color:var(--paper);opacity:.8;}
.ticker-track span b{color:var(--hot);opacity:1;}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* masthead */
.mast{border-bottom:2px solid var(--ink);position:sticky;top:0;background:var(--paper);z-index:50;}
.mast-in{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:22px 0 16px;}
.logo{display:flex;align-items:baseline;gap:12px;}
.logo .word{font-family:var(--serif);font-weight:900;font-size:42px;letter-spacing:-.045em;line-height:.85;}
.logo .word i{font-style:normal;color:var(--hot);}
.logo .est{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);padding-bottom:4px;}
.mast-r{display:flex;align-items:center;gap:9px;padding-bottom:4px;}
.icobtn{width:34px;height:34px;border:1px solid var(--rule-2);border-radius:50%;background:transparent;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;transition:.18s;}
.icobtn:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.sub-btn{height:34px;padding:0 17px;border-radius:20px;background:var(--ink);color:var(--paper);border:none;font-family:var(--sans);font-weight:600;font-size:12.5px;cursor:pointer;transition:.18s;}
.sub-btn:hover{background:var(--hot);}
nav.cats{display:flex;border-top:1px solid var(--rule);overflow-x:auto;}
nav.cats a{font-weight:600;font-size:12.5px;padding:10px 0;margin-right:28px;white-space:nowrap;border-bottom:2px solid transparent;color:var(--ink-2);}
nav.cats a.on{border-bottom-color:var(--hot);color:var(--ink);}
nav.cats a:hover{color:var(--hot);}

/* ---------- hero mosaic ---------- */
.mosaic{display:grid;grid-template-columns:1.85fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:min(66vh,560px);margin:26px 0 18px;}
.mtile{position:relative;overflow:hidden;background:var(--paper-2);border:1px solid var(--rule-2);display:block;}
.mtile:first-child{grid-row:span 2;}
.mtile .slot{position:absolute;inset:0;}
.mtile .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,7,0) 30%,rgba(10,9,7,.28) 55%,rgba(10,9,7,.86) 100%);}
.mtile .over{position:absolute;left:0;right:0;bottom:0;padding:20px;pointer-events:none;}
.mtile:first-child .over{padding:28px;}
.badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;color:#fff;margin-bottom:10px;}
.mtile h3{color:#fff;font-size:19px;font-weight:700;line-height:1.2;text-wrap:pretty;}
.mtile:first-child h2{color:#fff;font-size:clamp(26px,2.9vw,42px);font-weight:900;letter-spacing:-.04em;line-height:1.06;text-wrap:pretty;}
.mby{display:flex;align-items:center;gap:9px;margin-top:14px;}
.mby .av{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:11px;}
.mby span{font-family:var(--mono);font-size:10.5px;color:rgba(255,255,255,.82);letter-spacing:.05em;}
.mtile:hover h3,.mtile:hover h2{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}

/* tag bar */
.tagbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border:1px solid var(--rule-2);padding:14px 18px;margin-bottom:12px;background:var(--card);}
.tagbar .lb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap;}
.tagbar .chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);border:1px solid var(--rule);padding:4px 10px;border-radius:20px;transition:.16s;cursor:pointer;}
.chip:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* section head */
.sh{display:flex;align-items:baseline;gap:16px;margin:52px 0 22px;}
.sh h2{font-size:32px;font-weight:800;letter-spacing:-.035em;}
.sh .line{flex:1;height:1px;background:var(--rule-2);}
.sh a{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--rule-2);padding:6px 13px;border-radius:20px;white-space:nowrap;transition:.16s;}
.sh a:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}

/* trending row */
.trend{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.tcard{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2);border:1px solid var(--rule-2);}
.tcard .slot{position:absolute;inset:0;}
.tcard .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,7,0) 40%,rgba(10,9,7,.85) 100%);}
.tcard .over{position:absolute;left:0;right:0;bottom:0;padding:18px;pointer-events:none;}
.tcard h3{color:#fff;font-size:18px;line-height:1.2;font-weight:700;}
.tcard .m{font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.75);margin-top:8px;letter-spacing:.06em;}

/* editor pick — thumb rows */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.pick{display:flex;gap:14px;padding:14px;background:var(--card);align-items:center;transition:.18s;}
.pick:hover{background:var(--paper-2);}
.pick .th{width:86px;height:66px;flex-shrink:0;overflow:hidden;background:var(--paper-2);position:relative;border:1px solid var(--rule);}
.pick .th .slot{position:absolute;inset:0;}
.pick h4{font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.35;letter-spacing:-.005em;}
.pick .d{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:6px;letter-spacing:.06em;}
.pick:hover h4{color:var(--hot);}

/* weekly best + sidebar */
.wbgrid{display:grid;grid-template-columns:1.9fr 1fr;gap:32px;align-items:start;}
.wbmain{display:grid;gap:14px;}
.wbhero{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule-2);background:var(--paper-2);}
.wbhero .slot{position:absolute;inset:0;}
.wbhero .scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(10,9,7,0) 45%,rgba(10,9,7,.88) 100%);}
.wbhero .over{position:absolute;left:0;right:0;bottom:0;padding:26px;pointer-events:none;}
.wbhero h2{color:#fff;font-size:clamp(22px,2.4vw,34px);font-weight:800;letter-spacing:-.035em;line-height:1.1;}
.wbsub{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.side-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);padding-bottom:12px;border-bottom:2px solid var(--ink);margin-bottom:4px;}
.pop{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--rule);align-items:center;}
.pop .th{width:64px;height:54px;flex-shrink:0;position:relative;overflow:hidden;background:var(--paper-2);border:1px solid var(--rule);}
.pop .th .slot{position:absolute;inset:0;}
.pop h4{font-family:var(--sans);font-weight:600;font-size:13.5px;line-height:1.35;}
.pop .d{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:5px;}
.pop:hover h4{color:var(--hot);}
.catlist{margin-top:34px;}
.catrow{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px;font-weight:500;cursor:pointer;}
.catrow .sw{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.catrow .n{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink-4);border:1px solid var(--rule);border-radius:20px;padding:2px 9px;}
.catrow:hover{color:var(--hot);}
.promo{margin-top:34px;border:1.5px dashed var(--rule-2);padding:26px 20px;text-align:center;background:var(--card);}
.promo .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);}
.promo h4{font-family:var(--serif);font-size:21px;font-weight:700;margin:10px 0 8px;letter-spacing:-.02em;}
.promo p{font-size:12.5px;color:var(--ink-3);line-height:1.55;}
.promo button{margin-top:14px;width:100%;height:38px;border:none;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:600;font-size:13px;cursor:pointer;transition:.18s;}
.promo button:hover{background:var(--hot);}

/* latest list */
.latest{display:grid;grid-template-columns:1.9fr 1fr;gap:32px;align-items:start;}
.lgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.lcard{border:1px solid var(--rule-2);background:var(--card);display:flex;flex-direction:column;transition:.18s;}
.lcard:hover{background:var(--paper-2);}
.lcard .im{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);border-bottom:1px solid var(--rule);}
.lcard .im .slot{position:absolute;inset:0;}
.lcard .bd{padding:18px;display:flex;flex-direction:column;flex:1;}
.lcard h3{font-size:20px;font-weight:700;line-height:1.22;margin-bottom:9px;}
.lcard p{font-size:13.5px;color:var(--ink-3);line-height:1.6;flex:1;}
.lcard .ft{display:flex;align-items:center;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em;}
.lcard .ft .rm{margin-left:auto;color:var(--ink);border-bottom:1px solid var(--hot);}

/* dark strip */
.strip{background:var(--ink);margin-top:64px;padding:60px 0;}
:root[data-theme="dark"] .strip{background:#000;}
.strip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hot);margin-bottom:16px;}
.kicker::before{content:'';width:26px;height:1px;background:currentColor;}
.strip .kicker{color:var(--sun);}
.strip h2{font-size:clamp(28px,3.4vw,44px);font-weight:800;letter-spacing:-.04em;color:#fff;}
.strip p{color:#b9b3a7;font-size:16px;line-height:1.65;margin-top:15px;}
.codewin{background:#0b0a08;border:1px solid #2a2722;border-radius:8px;overflow:hidden;}
.codewin .bar{display:flex;align-items:center;gap:6px;padding:10px 13px;border-bottom:1px solid #2a2722;}
.codewin .bar i{width:9px;height:9px;border-radius:50%;display:block;}
.codewin .bar span{font-family:var(--mono);font-size:10.5px;color:#6a655d;margin-left:8px;}
.codewin pre{margin:0;padding:18px;font-family:var(--mono);font-size:12.5px;line-height:1.75;color:#c9c3b6;overflow-x:auto;}
.kw{color:#ff9d7a;}.st{color:#9ad67f;}.cm{color:#5f5a52;}.fn{color:#ffd479;}.nb{color:#8fc7ff;}

/* pull quote */
.pull{margin:64px 0;padding:52px 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);text-align:center;}
.pull blockquote{margin:0 auto;max-width:22ch;font-family:var(--serif);font-weight:600;font-size:clamp(28px,4vw,50px);line-height:1.1;letter-spacing:-.035em;font-style:italic;}
.pull blockquote span{color:var(--hot);}
.pull cite{display:block;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-style:normal;}

/* numbers */
.nums{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);}
.nm-c{background:var(--card);padding:28px 24px;}
.nm-c .v{font-family:var(--serif);font-weight:900;font-size:42px;letter-spacing:-.045em;line-height:1;}
.nm-c .l{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-4);margin-top:9px;}

/* podcast + links */
.split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);}
.pane{background:var(--card);padding:30px;}
.pane h3{font-size:24px;font-weight:800;letter-spacing:-.03em;margin-bottom:5px;}
.pod{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);}
.pod .play{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;flex-shrink:0;transition:.18s;}
.pod:hover .play{background:var(--hot);border-color:var(--hot);color:#fff;}
.pod h4{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.25;}
.pod .g{font-family:var(--mono);font-size:10px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.08em;margin-top:5px;}
.wave{display:flex;align-items:flex-end;gap:2px;height:24px;}
.wave i{width:3px;background:var(--rule-2);border-radius:2px;display:block;}
.rl{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline;}
.rl .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:6px;}
.rl h4{font-family:var(--sans);font-weight:600;font-size:14px;line-height:1.4;}
.rl .src{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:4px;}

/* authors */
.authors{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.auth .ring{width:66px;height:66px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:24px;color:#fff;margin-bottom:13px;}
.auth h4{font-family:var(--sans);font-weight:700;font-size:15px;}
.auth .role{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--hot);margin-top:5px;}
.auth p{font-size:13px;line-height:1.6;color:var(--ink-3);margin-top:9px;}
.auth .cnt{font-family:var(--mono);font-size:10px;color:var(--ink-4);margin-top:8px;}

/* newsletter */
.news{margin:64px 0;border:2px solid var(--ink);padding:48px 40px;display:grid;grid-template-columns:1fr auto;gap:38px;align-items:center;background:var(--card);position:relative;overflow:hidden;}
.news::after{content:'✦';position:absolute;right:-26px;bottom:-66px;font-size:210px;color:var(--paper-2);z-index:0;line-height:1;}
.news>*{position:relative;z-index:1;}
.news h2{font-size:35px;font-weight:800;letter-spacing:-.04em;}
.news p{color:var(--ink-3);font-size:15px;margin-top:11px;max-width:48ch;line-height:1.6;}
.form{display:flex;border:1.5px solid var(--ink);overflow:hidden;min-width:370px;}
.form input{flex:1;border:none;outline:none;background:transparent;padding:13px 15px;font-family:var(--sans);font-size:14px;color:var(--ink);}
.form input::placeholder{color:var(--ink-4);}
.form button{border:none;background:var(--ink);color:var(--paper);padding:0 21px;font-family:var(--sans);font-weight:700;font-size:13.5px;cursor:pointer;transition:.18s;}
.form button:hover{background:var(--hot);}
.fine{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);margin-top:10px;letter-spacing:.04em;}

footer{border-top:2px solid var(--ink);padding:44px 0 30px;}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:38px;}
.fh{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-4);margin-bottom:13px;}
.fl{display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--ink-2);}
.fl a:hover{color:var(--hot);}
.fbot{display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:20px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;color:var(--ink-4);letter-spacing:.06em;}

@media(max-width:1100px){
  .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:auto;height:auto;}
  .mosaic .mtile{aspect-ratio:16/10;}
  .mosaic .mtile:first-child{grid-row:auto;grid-column:span 2;aspect-ratio:16/8;}
  .trend,.picks,.wbsub,.lgrid,.authors,.nums{grid-template-columns:1fr 1fr;}
  .wbgrid,.latest,.split,.strip .wrap,.news{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr 1fr;}
  .form{min-width:0;width:100%;}
}
@media(max-width:640px){
  .mosaic,.trend,.picks,.wbsub,.lgrid,.authors,.nums{grid-template-columns:1fr;}
  .mosaic .mtile:first-child{grid-column:auto;}
  .art-grid{grid-template-columns:1fr !important;}
}

/* ============================================================
   TWEAK VARIANTS — paper stock · voice · rhythm
   ============================================================ */
:root{--grain:.03;--ruleW:1px;--tCase:none;--tTrack:-.025em;--tWeight:900;--air:1;}
body::before{opacity:var(--grain);}

/* ---- paper stock ---- */
:root[data-stock="news"]{
  --paper:#ebeced;--paper-2:#e1e3e5;--card:#f9fafa;
  --ink:#15171a;--ink-2:#393e43;--ink-3:#646b72;--ink-4:#979ea5;
  --rule:#d4d7da;--rule-2:#bfc4c8;
  --hot:#c3330f;--deep:#1f4b6e;--moss:#3a6340;--plum:#5f2c56;--sun:#a8780b;
  --grain:.07;--ruleW:1.5px;
}
:root[data-stock="midnight"]{
  --ink:#f4f1e8;--ink-2:#d2ccbe;--ink-3:#9b948a;--ink-4:#6a655d;
  --paper:#0e0d0b;--paper-2:#161512;--card:#1a1815;--rule:#292620;--rule-2:#3a362e;
  --hot:#ff6a3d;--deep:#7fb0dd;--moss:#7fae7c;--plum:#c98bb9;--sun:#ffc44d;
  --grain:.05;
}
:root[data-stock="news"] .mast,:root[data-stock="news"] footer,
:root[data-stock="news"] .pull,:root[data-stock="news"] .news,
:root[data-stock="news"] .side-h{border-width:var(--ruleW);}
:root[data-stock="news"] .badge{border-radius:0;}
:root[data-stock="news"] .chip,:root[data-stock="news"] .sh a,
:root[data-stock="news"] .catrow .n,:root[data-stock="news"] .backb{border-radius:0;}
:root[data-stock="news"] .sub-btn{border-radius:0;}

/* ---- typographic voice ---- */
:root[data-voice="brutalist"]{--serif:'Bricolage Grotesque',system-ui,sans-serif;--tTrack:-.05em;--tWeight:800;}
:root[data-voice="brutalist"] h1,:root[data-voice="brutalist"] h2,
:root[data-voice="brutalist"] h3,:root[data-voice="brutalist"] h4{letter-spacing:var(--tTrack);font-weight:var(--tWeight);}
:root[data-voice="brutalist"] .sh h2,:root[data-voice="brutalist"] .pane h3{text-transform:uppercase;letter-spacing:-.02em;}
:root[data-voice="brutalist"] .logo .word{letter-spacing:-.06em;font-weight:800;}
:root[data-voice="brutalist"] .pull blockquote{font-style:normal;text-transform:uppercase;font-size:clamp(24px,3.2vw,42px);}
:root[data-voice="brutalist"] .art .lede{font-family:var(--sans);font-size:19px;}
:root[data-voice="brutalist"] .art p.drop::first-letter{font-family:var(--sans);}
:root[data-voice="brutalist"] .badge{font-weight:700;}

:root[data-voice="classic"]{--tTrack:-.005em;--tWeight:400;--air:1.35;}
:root[data-voice="classic"] h1,:root[data-voice="classic"] h2,
:root[data-voice="classic"] h3,:root[data-voice="classic"] h4{font-weight:400;letter-spacing:var(--tTrack);line-height:1.14;}
:root[data-voice="classic"] .logo .word{font-weight:400;letter-spacing:-.01em;}
:root[data-voice="classic"] .mtile:first-child h2,:root[data-voice="classic"] .nm-c .v,
:root[data-voice="classic"] .art .h1{font-weight:600;}
:root[data-voice="classic"] .sh h2{font-weight:400;}
:root[data-voice="classic"] .sh,:root[data-voice="classic"] .art h3{letter-spacing:.01em;}
:root[data-voice="classic"] .art p{font-size:18.5px;line-height:1.85;}
:root[data-voice="classic"] .art .lede{font-style:italic;font-size:23px;}
:root[data-voice="classic"] .badge{letter-spacing:.2em;}

/* ---- layout rhythm ---- */
/* ---- layout rhythm (desktop only — breakpoints below own the collapse) ---- */
@media(min-width:1101px){
:root[data-rhythm="newspaper"] .mosaic{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:1fr 1fr;height:min(52vh,440px);gap:9px;}
:root[data-rhythm="newspaper"] .mtile:first-child h2{font-size:clamp(22px,2.2vw,32px);}
:root[data-rhythm="newspaper"] .mtile h3{font-size:16px;}
:root[data-rhythm="newspaper"] .trend{grid-template-columns:repeat(6,1fr);gap:9px;}
:root[data-rhythm="newspaper"] .tcard{aspect-ratio:3/4;}
:root[data-rhythm="newspaper"] .tcard h3{font-size:14px;}
:root[data-rhythm="newspaper"] .tcard .m{display:none;}
:root[data-rhythm="newspaper"] .picks{grid-template-columns:repeat(4,1fr);}
:root[data-rhythm="newspaper"] .pick{padding:11px;gap:11px;}
:root[data-rhythm="newspaper"] .pick .th{width:62px;height:50px;}
:root[data-rhythm="newspaper"] .pick h4{font-size:13px;}
:root[data-rhythm="newspaper"] .lgrid{grid-template-columns:repeat(3,1fr);gap:9px;}
:root[data-rhythm="newspaper"] .lcard .bd{padding:14px;}
:root[data-rhythm="newspaper"] .lcard h3{font-size:17px;}
:root[data-rhythm="newspaper"] .lcard p{font-size:12.5px;line-height:1.55;}
:root[data-rhythm="newspaper"] .sh{margin:36px 0 16px;}
:root[data-rhythm="newspaper"] .sh h2{font-size:26px;}
:root[data-rhythm="newspaper"] .wbgrid,:root[data-rhythm="newspaper"] .latest{gap:24px;}
:root[data-rhythm="newspaper"] .art-grid{gap:34px;}
:root[data-rhythm="newspaper"] .art{max-width:66ch;}
:root[data-rhythm="newspaper"] .art p{font-size:16px;line-height:1.65;}
:root[data-rhythm="newspaper"] .rhero{aspect-ratio:24/7;}

:root[data-rhythm="gallery"] .mosaic{grid-template-columns:1fr 1fr;grid-template-rows:1.5fr 1fr;height:min(86vh,760px);gap:20px;}
:root[data-rhythm="gallery"] .mtile:first-child{grid-row:span 1;grid-column:span 2;}
:root[data-rhythm="gallery"] .mtile:nth-child(5){display:none;}
:root[data-rhythm="gallery"] .mtile:first-child h2{font-size:clamp(34px,4.4vw,64px);}
:root[data-rhythm="gallery"] .mtile:first-child .over{padding:40px;}
:root[data-rhythm="gallery"] .mtile h3{font-size:23px;}
:root[data-rhythm="gallery"] .trend{grid-template-columns:repeat(3,1fr);gap:20px;}
:root[data-rhythm="gallery"] .trend a:nth-child(4){display:none;}
:root[data-rhythm="gallery"] .tcard{aspect-ratio:1/1;}
:root[data-rhythm="gallery"] .tcard h3{font-size:22px;}
:root[data-rhythm="gallery"] .tcard .over{padding:24px;}
:root[data-rhythm="gallery"] .picks{grid-template-columns:repeat(2,1fr);}
:root[data-rhythm="gallery"] .pick{padding:20px;gap:18px;}
:root[data-rhythm="gallery"] .pick .th{width:120px;height:88px;}
:root[data-rhythm="gallery"] .pick h4{font-size:16px;}
:root[data-rhythm="gallery"] .lgrid{grid-template-columns:1fr;gap:20px;}
:root[data-rhythm="gallery"] .lcard{display:grid;grid-template-columns:1.1fr 1fr;}
:root[data-rhythm="gallery"] .lcard .im{aspect-ratio:auto;height:100%;border-bottom:none;border-right:1px solid var(--rule);}
:root[data-rhythm="gallery"] .lcard .bd{padding:26px;}
:root[data-rhythm="gallery"] .lcard h3{font-size:25px;}
:root[data-rhythm="gallery"] .sh{margin:70px 0 28px;}
:root[data-rhythm="gallery"] .sh h2{font-size:38px;}
:root[data-rhythm="gallery"] .tagbar,:root[data-rhythm="gallery"] .nums{display:none;}
:root[data-rhythm="gallery"] .rhero{aspect-ratio:16/9;}
:root[data-rhythm="gallery"] .art{max-width:76ch;}
:root[data-rhythm="gallery"] .art p{font-size:19px;line-height:1.85;}
}

/* ---- tweaks panel ---- */
.reader{position:fixed;inset:0;z-index:200;background:var(--paper);overflow-y:auto;display:none;}
.reader.on{display:block;}
.rbar{position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:1px solid var(--rule);}
.rbar-in{display:flex;align-items:center;gap:16px;padding:14px 0;}
.backb{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);border-radius:20px;padding:7px 15px;font-size:12.5px;font-weight:600;background:transparent;color:var(--ink-2);cursor:pointer;transition:.16s;font-family:var(--sans);}
.backb:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.rprog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--hot);width:0;}
.rhero{position:relative;aspect-ratio:21/8;overflow:hidden;border:1px solid var(--rule-2);background:var(--paper-2);margin:24px auto 0;max-width:1160px;}
.rhero .slot{position:absolute;inset:0;}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:48px;align-items:start;padding:36px 0 0;max-width:1160px;margin:0 auto;}
.art{max-width:72ch;}
.art .h1{font-family:var(--serif);font-weight:900;font-size:clamp(32px,4.4vw,58px);letter-spacing:-.045em;line-height:1.03;text-wrap:pretty;}
.art .lede{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--ink-2);margin-top:20px;font-weight:400;}
.artby{display:flex;align-items:center;gap:14px;margin:26px 0;padding:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);flex-wrap:wrap;}
.artby .av{width:46px;height:46px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:18px;}
.artby .who{font-size:14.5px;font-weight:700;}
.artby .meta{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:3px;}
.shares{margin-left:auto;display:flex;gap:7px;}
.shares button{width:34px;height:34px;border:1px solid var(--rule-2);border-radius:50%;background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:.16s;}
.shares button:hover{background:var(--hot);color:#fff;border-color:var(--hot);}
.art p{font-size:17.5px;line-height:1.75;color:var(--ink-2);margin:0 0 22px;}
.art p.drop::first-letter{float:left;font-family:var(--serif);font-weight:900;font-size:74px;line-height:.78;padding:6px 12px 0 0;color:var(--hot);}
.art h3{font-size:27px;font-weight:800;letter-spacing:-.03em;margin:38px 0 14px;}
.art blockquote{margin:32px 0;padding:4px 0 4px 26px;border-left:3px solid var(--hot);font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.45;color:var(--ink);}
.art ul{margin:0 0 22px;padding-left:22px;}
.art li{font-size:17px;line-height:1.7;color:var(--ink-2);margin-bottom:9px;}
.art .figure{margin:32px 0;}
.art .figure .box{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule-2);background:var(--paper-2);}
.art .figure .box .slot{position:absolute;inset:0;}
.art .figure figcaption{font-family:var(--mono);font-size:11px;color:var(--ink-4);margin-top:9px;letter-spacing:.03em;}
.art .cw{margin:30px 0;}
.callout{margin:30px 0;border:1.5px solid var(--ink);background:var(--card);padding:22px 24px;}
.callout .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--hot);margin-bottom:9px;}
.callout p{font-size:15.5px;margin:0;line-height:1.65;}
.arttags{display:flex;gap:7px;flex-wrap:wrap;margin:36px 0;padding-top:26px;border-top:1px solid var(--rule);}
.abox{display:flex;gap:18px;padding:26px;border:1.5px solid var(--ink);background:var(--card);margin-bottom:36px;}
.abox .ring{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:23px;color:#fff;flex-shrink:0;}
.abox h4{font-family:var(--sans);font-weight:700;font-size:16px;}
.abox .role{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--hot);margin:4px 0 8px;}
.abox p{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin:0;}
/* article sidebar */
.asb{position:sticky;top:70px;}
.toc{border-left:2px solid var(--rule);padding-left:16px;}
.toc a{display:block;font-size:13px;color:var(--ink-3);padding:6px 0;line-height:1.4;}
.toc a:hover,.toc a.on{color:var(--hot);}
.nextup{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:center;}
.nextup .th{width:58px;height:50px;flex-shrink:0;position:relative;overflow:hidden;background:var(--paper-2);border:1px solid var(--rule);}
.nextup .th .slot{position:absolute;inset:0;}
.nextup h4{font-family:var(--sans);font-weight:600;font-size:13px;line-height:1.35;}
.nextup .d{font-family:var(--mono);font-size:9.5px;color:var(--ink-4);margin-top:4px;}
.nextup:hover h4{color:var(--hot);}
/* comments */
.cmts{border-top:2px solid var(--ink);padding-top:32px;margin-top:8px;}
.cmt{display:flex;gap:14px;padding:20px 0;border-bottom:1px solid var(--rule);}
.cmt .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:15px;color:#fff;flex-shrink:0;}
.cmt .nm{font-size:13.5px;font-weight:700;}
.cmt .tm{font-family:var(--mono);font-size:10px;color:var(--ink-4);}
.cmt p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin:8px 0 0;}
.cmt .acts{display:flex;gap:14px;margin-top:10px;font-family:var(--mono);font-size:10.5px;color:var(--ink-4);text-transform:uppercase;letter-spacing:.07em;}
.cmt .acts span{cursor:pointer;}
.cmt .acts span:hover{color:var(--hot);}
.cmtbox{display:flex;gap:14px;padding:22px 0 0;}
.cmtbox textarea{flex:1;min-height:80px;resize:vertical;border:1px solid var(--rule-2);background:var(--card);padding:13px 15px;font-family:var(--sans);font-size:14.5px;color:var(--ink);outline:none;}
.cmtbox textarea:focus{border-color:var(--ink);}

/* ============================================================
   Production addendum — added when the design was ported to the
   live blog. The design used <image-slot>, a drag-and-drop
   placeholder from the design canvas; real posts carry a real
   featured image, or none at all.
   ============================================================ */
.slot{display:block;position:relative;overflow:hidden;background:var(--paper-2);}
.slot img{width:100%;height:100%;object-fit:cover;display:block;}
/* No featured image: a quiet lettered plate rather than a broken frame or a
   stock photo nobody chose. Uses the post's own category colour. */
.slot.empty{display:grid;place-items:center;background:
  linear-gradient(135deg,color-mix(in oklab,var(--sl,#6d6860) 22%,var(--paper-2)),var(--paper-2));}
.slot.empty span{font-family:var(--serif);font-weight:900;font-size:clamp(28px,6vw,64px);
  color:color-mix(in oklab,var(--sl,#6d6860) 55%,transparent);letter-spacing:-.04em;user-select:none;}
.mtile .slot,.tcard .slot,.wbhero .slot,.rhero .slot{position:absolute;inset:0;}
.lcard .im .slot,.pick .th .slot,.pop .th .slot,.nextup .th .slot{position:absolute;inset:0;}

/* Empty-state for a blog with nothing published yet. */
.blank{padding:90px 0;text-align:center;}
.blank h2{font-size:clamp(24px,3vw,34px);margin-bottom:10px;}
.blank p{color:var(--ink-3);font-size:15px;max-width:44ch;margin:0 auto;line-height:1.65;}

/* Pagination, which the static design had no need for. */
.pager{display:flex;gap:9px;justify-content:center;padding:10px 0 70px;}
.pager a,.pager span{font-family:var(--mono);font-size:12px;padding:9px 15px;border:1px solid var(--rule-2);
  background:var(--card);color:var(--ink-2);}
.pager .cur{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.pager a:hover{border-color:var(--ink-3);}

/* The reader is a full page here, not an overlay — posts have their own URL so
   they can be linked, shared and indexed. */
.reader.page{position:static;transform:none;opacity:1;visibility:visible;height:auto;overflow:visible;background:var(--paper);}

/* The design's drop cap applied to the real first paragraph. The source marked
   it by hand (<p class="drop">); a post's body is generated from blocks or
   Markdown, so it is selected structurally instead — the first paragraph of
   the article, whichever renderer produced it. */
/* ⚠️ `.art > p:first-of-type` also matched the LEDE, so the page got two drop
   caps. The design puts the cap on the paragraph immediately after the byline,
   which is exactly what this selects. */
.art .artby + p::first-letter,
.art .pb-inarticle .pb-b:first-of-type p:first-of-type::first-letter{
  float:left;font-family:var(--serif);font-weight:900;font-size:74px;line-height:.78;
  padding:6px 12px 0 0;color:var(--hot);
}
@media(max-width:640px){
  .art .artby + p::first-letter,
  .art .pb-inarticle .pb-b:first-of-type p:first-of-type::first-letter{font-size:56px;}
}
/* A partly-filled Editor's pick row showed an empty bordered cell; size the
   grid to what is actually there. */
.picks[data-n="1"]{grid-template-columns:1fr;}
.picks[data-n="2"]{grid-template-columns:1fr 1fr;}

/* ============================================================
   CODE BLOCKS INSIDE AN ARTICLE
   ------------------------------------------------------------
   ⚠️ These were rendering and completely invisible. The builder's own
   stylesheet gives .pb-code a dark surface (--pb-sf, #11141b), while the
   article wrapper sets `color:inherit` so the page's near-black ink applies —
   dark text on a dark box. The markup was correct, the CSS was correct, and
   nothing was readable.

   Rather than lightening the box, match the design's own .codewin terminal:
   dark panel, warm light text. That is what the source design uses for code
   inside an essay, so this is the intended look rather than a patch.
   ============================================================ */
.pb-inarticle .pb-code{
  background:#0b0a08;border:1px solid #2a2722;border-radius:8px;
  padding:18px 20px;margin:0 0 26px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.pb-inarticle .pb-code code{
  font-family:var(--mono);font-size:12.5px;line-height:1.75;
  color:#c9c3b6;background:none;border:none;padding:0;white-space:pre;
}
/* Inline `code` in a paragraph stays light-on-paper — it sits in running text. */
.pb-inarticle p code,.pb-inarticle li code{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:5px;
  padding:1px 6px;font-family:var(--mono);font-size:.88em;color:var(--ink);
}
.pb-inarticle .pb-list{margin:0 0 1.3em;padding-left:1.35em;}
.pb-inarticle .pb-list li{margin:0 0 .6em;color:var(--ink-2);}
.pb-inarticle .pb-alert{
  border-left:3px solid var(--hot);border-top:none;border-right:none;border-bottom:none;
  background:var(--paper-2);border-radius:0 8px 8px 0;padding:16px 20px;margin:0 0 26px;
  color:var(--ink-2);font-size:15px;line-height:1.65;
}
.pb-inarticle h2{font-family:var(--serif);font-size:clamp(22px,3vw,30px);
  letter-spacing:-.025em;margin:1.6em 0 .5em;color:var(--ink);}
.pb-inarticle .pb-quote{border-left:3px solid var(--ink);background:transparent;
  padding:6px 0 6px 22px;border-radius:0;font-family:var(--serif);font-size:1.15em;}

/* ============================================================
   RESPONSIVE LAYER
   ------------------------------------------------------------
   ⚠️ max-width queries ONLY, so the desktop rendering stays byte-identical to
   the imported design. The source shipped grid-stacking at 1100/640 and
   nothing else — the masthead, reader bar, article header, buttons and footer
   had no mobile rules at all, which is why the pill buttons ("Back to blog",
   "Subscribe") wrapped their labels inside a fixed 34px height and looked
   broken.
   ============================================================ */

/* --- the pills, everywhere ---
   ⚠️ `.sub-btn` is a <button> in the source design, where the browser centres
   the label vertically for free. Rendered as an <a> (so it can be a real link
   to the dispatch section) it does not: measured at above=0 / below=19 in a
   34px pill — the text sat on the baseline, 9.5px above centre. A fixed height
   needs explicit centring on anything that is not a <button>.
   Harmless on the real <button>s that also use this class. */
.sub-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;}
.sub-btn,.backb{white-space:nowrap;flex-shrink:0;}
.icobtn{flex-shrink:0;}

@media(max-width:1100px){
  .wrap{padding:0 20px;}
  .art-grid{grid-template-columns:1fr;}      /* the sidebar is unusable narrow */
  .asb{margin-top:38px;}
  .news{padding:38px 30px;}
  .abox{padding:22px;}
}

@media(max-width:860px){
  .mast-in{flex-wrap:wrap;align-items:center;gap:14px;padding:16px 0 12px;}
  .mast-r{padding-bottom:0;margin-left:auto;}
  .rbar-in{gap:10px;padding:10px 0;}
  .rhero{margin-top:18px;}
  .art .h1,.art h1{font-size:clamp(27px,6vw,40px);}
  .news{grid-template-columns:1fr;padding:34px 26px;gap:24px;}
  .fgrid{gap:26px;}
}

@media(max-width:640px){
  .wrap{padding:0 16px;}

  /* masthead */
  .ticker{height:28px;}
  .ticker-track span{font-size:10px;padding:0 18px;}
  .logo .word{font-size:26px;}
  .logo .est{display:none;}                  /* secondary, and it crowds the row */
  .mast-in{padding:13px 0 10px;}
  .mast-r{gap:7px;}
  .sub-btn{height:32px;padding:0 13px;font-size:12px;}
  .icobtn{width:32px;height:32px;}
  .cats{gap:0;}
  .cats a{padding:11px 13px;font-size:12px;}

  /* hero mosaic + cards */
  .mosaic{gap:10px;margin:16px 0 14px;}
  .mosaic .mtile{aspect-ratio:16/11;}
  .mosaic .mtile:first-child{aspect-ratio:16/11;}
  .mtile:first-child h2{font-size:23px;}
  .mtile h3{font-size:17px;}
  .mtile .over,.mtile:first-child .over{padding:15px;}
  .tagbar{flex-direction:column;align-items:flex-start;gap:9px;padding:14px 16px;}
  .sh{margin:34px 0 16px;}
  .sh h2{font-size:23px;}
  .wbhero{aspect-ratio:16/11;}
  .wbsub{gap:10px;}
  .lcard .bd{padding:16px;}
  .pick,.pop,.nextup{padding:11px 12px;}

  /* the reading bar: keep back + theme + subscribe, drop the metadata */
  .rbar-in{gap:8px;padding:9px 0;}
  .rbar-in .mono{display:none;}
  .backb{padding:6px 12px;font-size:12px;}

  /* article */
  .rhero{margin-top:14px;}
  .art{padding-top:22px;}
  .art .lede{font-size:16px;}
  .artby{gap:11px;margin:20px 0;padding:14px 0;}
  .artby .shares{margin-left:auto;}
  .abox{flex-direction:column;gap:14px;padding:20px;}
  .abox .ring{width:52px;height:52px;font-size:20px;}
  .arttags{gap:6px;}
  .pb-inarticle .pb-code{padding:14px;margin:0 0 20px;}
  .pb-inarticle .pb-code code{font-size:11.5px;}

  /* blocks that were still two-up at this width */
  .nums{grid-template-columns:1fr 1fr;}
  .fgrid{grid-template-columns:1fr;gap:22px;}
  .fbot{flex-direction:column;gap:8px;text-align:left;}
  .news{padding:28px 20px;}
  .news h2{font-size:26px;}
  .form{flex-direction:column;}
  .form input,.form button{width:100%;}
  .pager{flex-wrap:wrap;}
  .promo{padding:20px;}
  .pull blockquote{font-size:22px;}
  .blank{padding:60px 0;}

  /* anything wide inside an article must scroll, not overflow the page */
  .art table,.pb-inarticle table{display:block;overflow-x:auto;}
}

@media(max-width:420px){
  .logo .word{font-size:22px;}
  .sub-btn{padding:0 11px;}
  .mosaic .mtile{aspect-ratio:4/3;}
  .mtile:first-child h2{font-size:20px;}
  .nums{grid-template-columns:1fr;}
  .sh h2{font-size:20px;}
}

/* ============================================================
   THE min-width:auto TRAP
   ------------------------------------------------------------
   ⚠️ A grid or flex ITEM defaults to `min-width:auto`, which means it refuses
   to shrink below its content's min-content width. A <pre> with white-space:pre
   has a min-content width of its longest line — so one long shell command made
   the article track wider than the phone, and every line of the page was clipped
   on the right.

   `overflow-x:hidden` on the body HIDES that; it does not fix it, and it is why
   the page measured "no overflow" while the text was visibly cut off. The real
   fix is min-width:0 down the containing chain, so the track can shrink and the
   <pre> scrolls inside itself instead. */
.art-grid > *,.art,.asb,
.latest > *,.wbgrid > *,.wbmain,.split > *,.news > *{min-width:0;}
.pb-inarticle,.pb-inarticle .pb-b,.pb-inarticle .pb-w{min-width:0;max-width:100%;}

/* Belt and braces, after the real fix above. */
html,body{max-width:100%;overflow-x:hidden;}
img,svg,iframe,table{max-width:100%;}
pre{max-width:100%;}