*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
:focus-visible{outline:3px solid var(--focus,#2847A0);outline-offset:2px;}
button{font:inherit;}

:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --tint:#F6F6F6; --fg:#101112; --fg-muted:#554F51;
  --border:#DFDBDB; --rule:#101112;
  --band:#C81E1E; --band-hover:#A51818; --edge:#C81E1E;
  --accent:#C81E1E; --accent2:#1E40AF; --accent-text:#B81C1C; --link:#1E40AF; --focus:#1E40AF;
  --stripe:rgba(200,30,30,.18);
  --serif:"Iowan Old Style",Georgia,"Times New Roman",Times,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17181A; --surface:#1F2023; --tint:#26272B; --fg:#F2F1F0; --fg-muted:#A9A6A4;
    --border:#35363C; --rule:#F2F1F0; --edge:#E33A3A;
    --accent:#E33A3A; --accent2:#8FB0FF; --accent-text:#FF8C8C; --link:#8FB0FF; --focus:#8FB0FF;
    --stripe:rgba(227,58,58,.26);
  }
}
:root[data-theme="dark"]{
  --bg:#17181A; --surface:#1F2023; --tint:#26272B; --fg:#F2F1F0; --fg-muted:#A9A6A4;
  --border:#35363C; --rule:#F2F1F0; --edge:#E33A3A;
  --accent:#E33A3A; --accent2:#8FB0FF; --accent-text:#FF8C8C; --link:#8FB0FF; --focus:#8FB0FF;
  --stripe:rgba(227,58,58,.26);
}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:800;letter-spacing:-0.02em;}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px;}

/* ------- masthead: 6px red rule on top, alert stripe underneath ------- */
.masthead{background:var(--surface);border-top:6px solid var(--band);border-bottom:2px solid var(--rule);position:sticky;top:0;z-index:30;}
.masthead::after{content:"";display:block;height:7px;border-top:1px solid var(--border);
  background:repeating-linear-gradient(135deg,var(--stripe) 0 8px,transparent 8px 18px);}
.mast-in{max-width:1240px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:16px;}
.brand{font-family:var(--serif);font-size:25px;font-weight:800;letter-spacing:-0.02em;text-decoration:none;color:var(--fg);flex:0 0 auto;}
.icons{margin-left:auto;flex:0 0 auto;}
.theme-btn{background:var(--surface);border:1.5px solid var(--rule);border-radius:0;width:44px;height:44px;cursor:pointer;color:var(--fg);}
.theme-btn:hover{border-color:var(--accent);color:var(--accent-text);}

/* ------- nav as wire-desk furniture: uppercase, rule-separated slots ------- */
.nav{display:flex;gap:0;flex-wrap:nowrap;overflow-x:auto;min-width:0;-webkit-overflow-scrolling:touch;}
.nav a{text-decoration:none;}
.nav-strip{border-top:1px solid var(--border);background:var(--surface);max-width:1240px;margin:0 auto;padding:0 20px;}
.nav .navlink{border-radius:0;padding:0 14px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--fg);}
.navitem + .navitem .navlink{border-left:1px solid var(--border);}
.nav .navlink:hover{background:none;color:var(--accent-text);box-shadow:inset 0 -3px 0 var(--band);}
.nav .navlink[aria-current]{background:var(--band);color:#F5F7FB;box-shadow:none;}
.nav .navlink[aria-current] .ic,.nav .navlink[aria-current] .navcaret{color:#F5F7FB;}
.nav .dropdown{border:1.5px solid var(--rule);border-radius:0;box-shadow:6px 6px 0 var(--stripe);}
.nav .dropdown a:hover{background:var(--tint);color:var(--accent-text);}

/* ------- THE BREAKING BAND: solid red bar, white angular-cut label ------- */
.ticker{display:flex;align-items:stretch;background:var(--band);color:#F5F7FB;overflow:hidden;border-bottom:2px solid var(--rule);}
.ticker-label{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;padding:0 26px 0 16px;
  background:#F5F7FB;color:#2847A0;font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;
  clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);}
.ticker-label .pulse{background:#2847A0;box-shadow:0 0 0 3px rgba(40,71,160,0.22);animation:wirepulse 1.1s ease-in-out infinite;}
@keyframes wirepulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.66);}}
.ticker-track{display:flex;overflow-x:auto;white-space:nowrap;padding:0 18px;-webkit-overflow-scrolling:touch;min-width:0;}
.ticker-track a{color:#F5F7FB;text-decoration:none;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.ticker-track a + a{border-left:1px solid rgba(245,247,251,0.5);margin-left:18px;padding-left:18px;}
.ticker-track a:hover{text-decoration:underline;text-decoration-thickness:2px;}

/* ------- hero: heavy serif on stark white, wire timecode meta ------- */
.hero{padding:26px 0 24px;border-bottom:3px solid var(--rule);}
.hero > div{display:grid;gap:22px;}
.hero .ratio{aspect-ratio:16/9;overflow:hidden;background:var(--tint);border:1px solid var(--rule);}
.ratio-img{width:100%;height:100%;object-fit:cover;}
.hero h1{font-size:34px;line-height:1.06;margin:11px 0;}
.hero h1 a{text-decoration:none;color:var(--fg);}
.hero h1 a:hover{color:var(--accent-text);}
.hero .dek{color:var(--fg-muted);font-size:17px;margin:0 0 12px;line-height:1.5;}
.hero .meta{display:flex;gap:8px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);}
.hero .meta span{display:inline-flex;align-items:center;padding:3px 9px;border:1px solid var(--border);border-radius:2px;background:var(--tint);}
@media(min-width:768px){.hero > div{grid-template-columns:1.3fr 1fr;align-items:center;}.hero h1{font-size:44px;}}
@media(min-width:1280px){.hero h1{font-size:52px;}}

/* ------- stamp kickers: bordered, unfilled, uppercase press stamps ------- */
.kicker{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border:1.5px solid var(--accent);border-radius:2px;
  background:transparent;color:var(--accent-text);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;}
.kicker .ic{color:var(--accent-text);}
.kicker:hover{background:var(--band);border-color:var(--band);color:#F5F7FB;}
.kicker:hover .ic{color:#F5F7FB;}

.sec{padding:24px 0;}
.sec-h{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:8px 14px;border:1.5px solid var(--accent);border-radius:3px;
  color:var(--accent-text);font-family:inherit;font-size:12.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.sec-h a{display:inline-flex;align-items:center;gap:9px;color:inherit;text-decoration:none;}
.sec-h .ic{color:var(--accent-text);}
.glance{padding:12px 0 2px;}
.glance .glance-pill{border:1px solid var(--border);border-radius:2px;background:var(--tint);color:var(--fg-muted);
  font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:8px 12px;}
.glance .glance-pill .ic{color:var(--accent-text);}
.ratio .sign{border-radius:2px;}

/* ------- the wire digest: red-flagged bulletin rows + boxed timecodes ------- */
.digest{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule);}
.dgrow{display:grid;grid-template-columns:1fr;gap:2px 16px;padding:8px 10px 10px 14px;border-bottom:1px solid var(--border);
  border-left:3px solid var(--edge);align-items:center;transition:background .15s ease,box-shadow .15s ease;}
.dgrow:hover{background:var(--tint);box-shadow:inset 3px 0 0 var(--edge);}
.dgcat{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:0 10px;border:1.5px solid var(--accent);border-radius:2px;
  color:var(--accent-text);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;}
.dgcat:hover{background:var(--band);border-color:var(--band);color:#F5F7FB;}
.dgcat:hover .ic{color:#F5F7FB;}
.dgtitle{display:flex;align-items:center;min-height:44px;padding:2px 0;font-family:var(--serif);font-size:18.5px;font-weight:800;line-height:1.22;text-decoration:none;color:var(--fg);}
.dgtitle:hover{color:var(--accent-text);}
.dgtime{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid var(--border);border-radius:2px;
  background:var(--surface);font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em;}
@media(min-width:768px){
  .dgrow{grid-template-columns:132px 1fr 148px;gap:0 18px;}
  .dgtime{justify-self:end;}
}
@media(min-width:1280px){.dgtitle{font-size:20px;}}

/* ------- feature cards: flagged bulletins, sharp rectangles ------- */
.grid,.feed{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:768px){.grid,.feed{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1280px){.grid,.feed{grid-template-columns:repeat(3,1fr);}}
.item,.card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--edge);border-radius:0;overflow:hidden;
  transition:box-shadow .15s ease,border-color .15s ease;}
.item:hover,.card:hover{border-color:var(--rule);border-left-color:var(--edge);box-shadow:inset 3px 0 0 var(--edge);}
.item .ratio,.card .ratio{aspect-ratio:16/9;overflow:hidden;background:var(--tint);border-bottom:1px solid var(--border);}
.item-img,.card-img{width:100%;height:100%;object-fit:cover;}
.item-body,.card-body{padding:14px 16px 18px;}
.item h3,.card h3{font-family:var(--serif);font-size:19px;margin:10px 0 7px;line-height:1.24;font-weight:800;}
.item h3 a,.card h3 a{text-decoration:none;color:var(--fg);}
.item h3 a:hover,.card h3 a:hover{color:var(--accent-text);}
.item .dek{color:var(--fg-muted);font-size:14px;margin:2px 0 10px;line-height:1.5;}
.item .meta,.card .meta{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--fg-muted);text-transform:uppercase;letter-spacing:.03em;}

.cols{display:block;}
.side{margin-top:30px;}
@media(min-width:1280px){
  .cols{display:grid;grid-template-columns:1fr 310px;gap:40px;align-items:start;}
  .side{position:sticky;top:118px;margin-top:0;}
}
.panel{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--edge);border-radius:0;padding:18px;margin-bottom:20px;}
.panel h4{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:6px 11px;border:1.5px solid var(--accent);border-radius:2px;
  color:var(--accent-text);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.panel h4 .ic{color:var(--accent-text);}
.trending ol{list-style:none;margin:0;padding:0;}
.trending li{display:flex;gap:12px;padding:2px 0;border-top:1px solid var(--border);align-items:center;}
.trending li:first-child{border-top:0;}
.tnum{font-family:var(--mono);font-weight:700;color:var(--accent-text);width:24px;flex:0 0 24px;font-size:12px;}
.trending a{text-decoration:none;font-size:14px;font-weight:600;line-height:1.35;color:var(--fg);}
.trending a:hover{color:var(--accent-text);}
.newsletter p{font-size:13.5px;color:var(--fg-muted);margin:0 0 12px;}
.nl-form{display:flex;gap:8px;flex-wrap:wrap;}
.nl-form input{flex:1;min-width:0;padding:11px 13px;border:1.5px solid var(--rule);border-radius:2px;background:var(--surface);color:var(--fg);min-height:44px;}
.nl-form button{background:var(--band);color:#F5F7FB;border:1.5px solid var(--band);padding:10px 20px;min-height:44px;cursor:pointer;
  font-weight:800;border-radius:2px;font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;}
.nl-form button:hover{background:var(--band-hover);border-color:var(--band-hover);}

.breadcrumb{font-family:var(--mono);font-size:11px;color:var(--fg-muted);padding:20px 0 6px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.breadcrumb a{text-decoration:none;}
.breadcrumb a:hover{color:var(--accent-text);}
.bc-sep{margin:0 8px;opacity:.5;}

.article-full{padding:8px 0 30px;max-width:740px;}
.article-full h1{font-size:34px;line-height:1.08;margin:12px 0;}
@media(min-width:768px){.article-full h1{font-size:42px;}}
.article-full .dek{font-family:var(--serif);font-size:20px;color:var(--fg-muted);margin:0 0 18px;line-height:1.45;}
.byline{display:flex;flex-wrap:wrap;gap:14px;font-family:var(--mono);font-size:11px;color:var(--fg-muted);border-top:2px solid var(--rule);
  border-bottom:1px solid var(--border);padding:12px 0;margin-bottom:22px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
.byline .author a{text-decoration:none;color:var(--accent-text);font-weight:700;}
.article-full .ratio{aspect-ratio:16/9;overflow:hidden;background:var(--tint);margin-bottom:22px;border:1px solid var(--rule);}
.hero-img{width:100%;height:100%;object-fit:cover;}
.body{font-size:18px;line-height:1.75;}
.body p{margin:0 0 19px;}
.body h2{font-size:25px;margin:33px 0 12px;}
.body h3{font-size:20px;margin:25px 0 10px;}
.body a{color:var(--link);font-weight:700;}
.body blockquote{margin:25px 0;padding:6px 0 6px 20px;border-left:3px solid var(--band);}
.body blockquote p{margin:0 0 6px;font-family:var(--serif);font-size:20px;line-height:1.48;}
.body blockquote cite{font-family:var(--mono);font-size:11px;color:var(--fg-muted);font-style:normal;text-transform:uppercase;letter-spacing:.04em;}
.pullquote{font-family:var(--serif);font-size:27px;font-weight:800;line-height:1.28;padding:20px 0;margin:27px 0;
  border-top:4px solid var(--band);border-bottom:1px solid var(--border);}
.body ul{margin:0 0 19px;padding-left:21px;}
.body li{margin:0 0 8px;}
.body li::marker{color:var(--accent-text);}
.body figure{margin:25px 0;}
.figure-img{width:100%;object-fit:cover;aspect-ratio:16/9;border:1px solid var(--border);}
.body figcaption{font-family:var(--mono);font-size:11px;color:var(--fg-muted);padding-top:8px;text-transform:uppercase;letter-spacing:.04em;}
.jumpbox{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--edge);padding:16px 18px;margin:23px 0;}
.jumpbox h4{display:inline-flex;align-items:center;margin:0 0 10px;padding:4px 9px;border:1.5px solid var(--accent);border-radius:2px;
  color:var(--accent-text);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.jumpbox ul{margin:0;padding-left:18px;}
.jumpbox a{text-decoration:none;font-weight:600;color:var(--link);}

/* ------- chips as wire-desk slug tags ------- */
.chiprow{padding:20px 0;border-top:2px solid var(--rule);}
.chiprow-h{font-size:10.5px;text-transform:uppercase;color:var(--fg-muted);margin:0 0 11px;font-weight:800;letter-spacing:.08em;}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  padding:0 13px;background:var(--surface);color:var(--fg);border:1.5px solid var(--border);border-radius:2px;margin:0 7px 7px 0;text-decoration:none;min-height:44px;}
.chip .ic{color:var(--accent-text);}
.chip:hover{border-color:var(--accent);color:var(--accent-text);}
.chip-active{background:var(--band);color:#F5F7FB;border-color:var(--band);}
.chip-active .ic{color:#F5F7FB;}

.prevnext{display:flex;justify-content:space-between;gap:13px;padding:19px 0;border-top:2px solid var(--rule);font-size:13.5px;font-weight:700;}
.prevnext a{text-decoration:none;max-width:45%;color:var(--fg);display:flex;align-items:center;min-height:44px;}
.prevnext a:hover{color:var(--accent-text);}

.hub-head{padding:28px 0 12px;}
.hub-head h1{font-size:36px;margin:0 0 11px;}
.hub-head .dek{color:var(--fg-muted);font-size:16px;max-width:700px;line-height:1.55;}
.more-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--rule);}
.more-list li{padding:2px 0 2px 12px;border-bottom:1px solid var(--border);border-left:3px solid var(--edge);}
.more-list a{text-decoration:none;font-weight:600;color:var(--fg);}
.more-list a:hover{color:var(--accent-text);}
.empty{color:var(--fg-muted);padding:20px 0;}

.site-footer{background:var(--surface);border-top:6px solid var(--band);margin-top:44px;}
.footer-in{max-width:1240px;margin:0 auto;padding:38px 20px 30px;display:grid;gap:26px;grid-template-columns:1fr;}
@media(min-width:768px){.footer-in{grid-template-columns:repeat(4,1fr);}}
.fcol h4{display:inline-flex;align-items:center;margin:0 0 13px;padding:5px 10px;border:1.5px solid var(--accent);border-radius:2px;
  color:var(--accent-text);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;}
.fcol ul{list-style:none;margin:0;padding:0;}
.fcol a{color:var(--fg-muted);text-decoration:none;font-size:13.5px;}
.fcol a:hover{color:var(--accent-text);}
.fine{max-width:1240px;margin:0 auto;padding:0 20px 26px;font-family:var(--mono);font-size:11px;color:var(--fg-muted);}

.static-page .body,.static-page{font-size:16.5px;line-height:1.7;max-width:700px;}
.static-page h1{font-size:31px;}

.ic{flex:0 0 auto;vertical-align:middle;}
.navitem{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;}
.navlink{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 13px;
  text-decoration:none;font-size:13.5px;font-weight:700;color:var(--fg-muted);
  white-space:nowrap;border-radius:2px;}
/* _NAVBAR_ONE_ROW_2026_08_21: tint of the bar's own text colour, so this works on a
   dark masthead and a light one. var(--surface) is a page-panel colour and
   rendered as a bright filled blob on every dark theme. */
.navlink:hover{color:var(--fg);background:rgba(137,140,147,0.2);
  background:color-mix(in srgb, currentColor 13%, transparent);}
.navlink[aria-current]{color:var(--fg);background:rgba(137,140,147,0.26);
  background:color-mix(in srgb, currentColor 17%, transparent);}
.navcaret{opacity:.55;}
.dropdown{position:absolute;top:100%;left:0;min-width:224px;background:var(--surface);
  border:1px solid var(--border);border-radius:2px;padding:8px;display:none;
  flex-direction:column;z-index:40;box-shadow:0 18px 40px -18px rgba(29,30,33,0.6);}
.nav .dropdown a{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 12px;
  border-radius:2px;text-decoration:none;font-size:13px;font-weight:600;
  color:var(--fg);white-space:nowrap;background:none;}
.nav .dropdown a:hover{background:var(--bg);color:var(--accent-text);}
.nav .dropdown .ic{color:var(--accent-text);}
@media(min-width:768px){
  /* _NAVBAR_SPECIFICITY_2026_08_21: qualified with header.masthead (0,2,1) so it beats
     every theme's bare .nav{overflow-x:auto} (0,1,0) no matter where the
     theme CSS is injected. terminal's lands at byte 38472, after this. */
  header.masthead .nav{overflow:visible;flex-wrap:wrap;}
  .navitem:hover .dropdown,.navitem:focus-within .dropdown{display:flex;}
}
.pulse{width:8px;height:8px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.glance{display:flex;flex-wrap:wrap;gap:9px;padding:2px 0 6px;}
.glance-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--fg-muted);background:var(--surface);border:1px solid var(--border);
  border-radius:3px;padding:8px 14px;}
.glance-pill .ic{color:var(--accent-text);}
.sign{position:absolute;top:10px;left:10px;z-index:2;font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.07em;padding:4px 9px;border-radius:6px;}
.sign-new{color:var(--accent-text);background:var(--surface);border:1px solid var(--border);}
.htext{min-width:0;}
.sec-more{margin-top:12px;}
/* Full-width pages (sidebar:"none" / river-wide) must NOT inherit the aura's
   1fr+sidebar grid, or the lone column keeps the empty sidebar track and the
   content sits off-centre. Declared after the aura CSS so it wins on order. */
@media(min-width:768px){.trending-h ol{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px;}}
@media(min-width:1280px){.trending-h ol{grid-template-columns:repeat(4,1fr);}}

/* Skip link: first focusable element on the page, visible only on focus, so a
   keyboard user can jump the masthead and nav straight to the article. */
.cols-full{display:block;}
.cols-full > div{min-width:0;}

.skip-link{position:fixed;left:-9999px;top:0;z-index:100;background:var(--surface);
  color:var(--fg);border:2px solid var(--accent);padding:12px 18px;font-weight:700;
  text-decoration:none;border-radius:2px;}
.skip-link:focus{left:12px;top:12px;}

/* Theme toggle shows the state it will switch TO. Inline SVG across all three
   states (system light, system dark, explicit override), so the control never
   depends on a platform font glyph. */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;}
.ic-sun{display:none;}
.ic-moon{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ic-sun{display:block;}
  :root:not([data-theme="light"]) .ic-moon{display:none;}
}
:root[data-theme="dark"] .ic-sun{display:block;}
:root[data-theme="dark"] .ic-moon{display:none;}
:root[data-theme="light"] .ic-sun{display:none;}
:root[data-theme="light"] .ic-moon{display:block;}

/* Dense text-link lists (trending rail, deep footer, ticker) are interactive
   targets too. Give each link its own 44px hit area rather than relying on the
   row padding, which left the anchors themselves at 18-38px. */
.trending a{display:flex;align-items:center;min-height:44px;}
.brand{display:inline-flex;align-items:center;min-height:44px;}
.sigcat,.dgcat{min-height:44px;}

/* Card headline links measured 21-43px, well under the floor, and they are the
   primary way a reader opens a story from a feed. Rather than pad the headline
   and bloat the card, the headline's ::after overlays the WHOLE card, so the
   entire card becomes the tap target. The nested category link is lifted above
   the overlay so it stays independently clickable. */
.item,.card{position:relative;}
.item h3 a::after,.card h3 a::after{content:"";position:absolute;inset:0;}
.item .kicker,.card .kicker,.item .meta,.card .meta,
.item .dek a,.card .dek a{position:relative;z-index:1;}
/* --- _LEAD_FOOTER_2026_08_20: the 44px tap floor is for FINGERS. Applying it to
   every footer link on desktop made a 10-item column 440px tall and turned the
   footer into a field of gaps. Coarse pointers keep the full target. */
/* --- _BLOB_SECTIONS_2026_08_20: decorative hero blobs must never cover the photo.
   Five auras position a 290x250 organic shape on .hero with no z-index,
   and .hero > div has none either, so paint order decided it and on
   sitech the blob landed on the subject's face. Decoration 0, content 1. */
/* --- _MARKDOWN_BLOCKS_2026_08_21: article data tables. They carry the numbers a
   reader came for, so they get real styling and scroll inside their own box
   rather than forcing the page sideways on a phone. */
/* --- _NAV_CAROUSEL_2026_08_21: nav row holds the nav AND the icons, so the theme
   toggle sits at the end of the navigation instead of alone above it. */
/* --- _MD_LINEWISE_2026_08_21: the masthead row was flex-wrap:wrap, so a
   1025px nav in a 1280px row pushed the icons onto a second line (measured
   navTop 11 / iconsTop 69). Moving them in the markup could not fix that. The
   row no longer wraps and the nav shrinks and scrolls instead. */
/* --- _NAVBAR_NOWRAP_2026_08_21: measured on a live page - the container was already
   nowrap, but .nav is itself a flex container and ITS items were wrapping
   (nav height 92, brand height 64, icons at left 1531 outside a 1280 box). The
   name must never break, the nav scrolls rather than stacks. */
/* --- _NAVBAR_ONE_ROW_2026_08_21 -----------------------------------------
   ONE rule per selector. The five rules this replaces were duplicates of each
   other at equal specificity, so only the last of each applied and every
   earlier "fix" was dead CSS. See _patch_navbar_onerow.py for the measurements.

   NOTHING in the masthead may clip: the hover dropdowns are absolutely
   positioned and must escape both .nav and .mast-in. overflow:hidden here is
   what made them unclickable (hit test returned the ticker link behind them).
   Because the nav therefore cannot scroll, the content has to fit, which is
   what the icon rule below is for. */
/* --- _MAST_ALIGNS_CONTENT_2026_08_21: max-width:100% was overriding every theme's own
   masthead width, so the brand and nav sat 313px outside the content
   column on each side (measured .mast-in 0-1905 vs .wrap 313-1593).
   Each theme already sets .mast-in and .wrap to the SAME width, so the
   alignment is theirs to define, not this rule's. */
.mast-in{flex-wrap:nowrap;}
.brand{white-space:nowrap;flex:0 0 auto;}
/* MASTREST_2026_09_01: the .navrow wrapper and every override that existed to
   manage it are gone. The approved masthead has the nav strip as a direct
   child of .masthead, so each theme's own .nav-strip rules (band background,
   borders, max-width, margin, padding) apply untouched, and per-link nav
   icons are back per the approved boards. Dropdown unclipping lives in the
   min-width:768px masthead nav rule above; mobile keeps the :has() hamburger. */
.mast-in .nav{flex:0 1 auto;min-width:0;}
.mast-in .icons{flex:0 0 auto;margin-left:auto;}
/* ONELINE_2026_09_01: with the strip nav inline in the brand row, its own
   full-band centering (margin:0 auto, max-width) would fight the flex row.
   Only margin/max-width are neutralised; the theme's padding, background,
   borders and pill styling stay, so the band stretches brand-to-toggle. */
.mast-in .nav.nav-strip{flex:1 1 auto;margin:0 10px;max-width:none;width:auto;min-width:0;}
/* NAVFIT_SPACING_2026_09_01: the one-row masthead needs the nav to actually
   fit. Horizontal padding and icon size compress slightly; type, colors and
   each theme's band/pill styling are untouched. */
header.masthead .nav>.navitem>.navlink,header.masthead .nav>a{padding-left:9px;padding-right:9px;}
header.masthead .nav .ic{width:14px;height:14px;}
/* NAVFIT_SPACING_2026_09_01: every theme measured 0px between the masthead
   band and the first widget row; all widgets get breathing room. */
main.wrap{padding-top:20px;}
@media(min-width:1200px){header.masthead .nav{flex-wrap:nowrap;}}
/* carousel arrows: the scrollbar is hidden by design, so a mouse needs these */
/* --- _CAR_NAV_FIXED_TOP_2026_08_24: was top:50%+translateY(-50%), vertically centered on
   the whole slide independent of .car-txt, which is bottom-anchored and grows
   taller as a headline wraps -- a 3-line headline could rise into the arrow.
   A fixed top offset can never compete with the bottom-anchored caption
   regardless of caption height. (hover:none already hides these on real
   touch devices; this is for the narrow-desktop-window case where they show.) */
/* --- _CAR_NAV_PROPORTIONAL_CENTER_2026_08_24: measured live, the caption's worst-case top (390px in a 563px carousel) sits well below 38% (214px), so this stays clear of a growing caption while reading as vertically centred instead of pinned to the top corner, scaling with each theme's own carousel height. */
.car-nav{position:absolute;top:38%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(9,25,72,0.62);color:#F5F7FB;font-size:20px;line-height:1;}
.car-nav:hover{background:rgba(9,25,72,0.85);}
/* --- _CAR_CLICK_LAYERING_2026_08_24: z-index:1 lifts the stretched link above the
   absolutely-positioned .ratio-img, which otherwise painted over it (both
   z-index:auto, image later in DOM) and made the whole photo unclickable. */
.car-slide-link{position:absolute;inset:0;z-index:1;}
/* --- _CARD_PHOTO_CLICKABLE_2026_08_24: the photo is the biggest, most obviously clickable part
   of every article card and was in no link at all (measured: elementFromPoint at
   a .duocell image centre hit IMG.ratio-img, resolving to no <a>). Stretched-link
   pattern: the headline link paints an invisible ::after over the whole card, so
   the photo follows it. Links that must keep their OWN target -- the .kicker
   section tag, meta/byline links -- sit above it at z-index:2. */
.card,.magbig,.duocell,.hubcard,.qfeat,.qcell,.poster,.item{position:relative;}
.card h3>a::after,.card h2>a::after,.magbig h3>a::after,.magbig h2>a::after,.duocell h3>a::after,.duocell h2>a::after,.hubcard h3>a::after,.hubcard h2>a::after,.qfeat h3>a::after,.qfeat h2>a::after,.qcell h3>a::after,.qcell h2>a::after,.poster h3>a::after,.poster h2>a::after,.item h3>a::after,.item h2>a::after{content:"";position:absolute;inset:0;z-index:1;}
.card .kicker,.card .meta a,.card .dek a,.magbig .kicker,.magbig .meta a,.magbig .dek a,.duocell .kicker,.duocell .meta a,.duocell .dek a,.hubcard .kicker,.hubcard .meta a,.hubcard .dek a,.qfeat .kicker,.qfeat .meta a,.qfeat .dek a,.qcell .kicker,.qcell .meta a,.qcell .dek a,.poster .kicker,.poster .meta a,.poster .dek a,.item .kicker,.item .meta a,.item .dek a{position:relative;z-index:2;}
.poster-scrim{pointer-events:none;}
.poster-link{position:absolute;inset:0;z-index:1;}
.poster-txt{z-index:2;}
/* --- _CARD_BODY_NOT_CONTAINING_BLOCK_2026_08_24: the stretched ::after above resolves against its NEAREST
   positioned ancestor. These inner text wrappers are position:relative in several
   themes, which trapped the overlay inside the text block so it never reached the
   photo (measured on cycleandcare.com: .magbig relative BUT .magbody relative too).
   They carry no absolutely positioned children, so dropping to static is inert for
   layout -- verified bounding boxes identical before/after -- and hands the
   containing block back to the card. .car-txt/.poster-txt are absolute by design
   and deliberately excluded. */
.magbody,.duobody,.item-body,.qbody,.hubbody,.cardbody{position:static;}
/* --- _CARD_PHOTO_CLICKABLE_REMAINING_2026_08_24: same stretched-link treatment for the card components
   the first pass did not enumerate (found by re-auditing rather than trusting the
   sampled set): .ixrow .magrow .mcard .rail-card .spoke .zzrow and their wrappers. */
.ixrow,.magrow,.mcard,.rail-card,.spoke,.zzrow{position:relative;}
.ixrow h3>a::after,.ixrow h2>a::after,.magrow h3>a::after,.magrow h2>a::after,.mcard h3>a::after,.mcard h2>a::after,.rail-card h3>a::after,.rail-card h2>a::after,.spoke h3>a::after,.spoke h2>a::after,.zzrow h3>a::after,.zzrow h2>a::after{content:"";position:absolute;inset:0;z-index:1;}
.ixrow .kicker,.ixrow .meta a,.ixrow .dek a,.magrow .kicker,.magrow .meta a,.magrow .dek a,.mcard .kicker,.mcard .meta a,.mcard .dek a,.rail-card .kicker,.rail-card .meta a,.rail-card .dek a,.spoke .kicker,.spoke .meta a,.spoke .dek a,.zzrow .kicker,.zzrow .meta a,.zzrow .dek a{position:relative;z-index:2;}
.arbody,.ixbody,.tlbody,.zzbody,.card-body{position:static;}
/* _CARD_PHOTO_CLICKABLE_FINAL_2026_08_24: .card-body is hyphenated in the builder; an earlier pass
   wrote .cardbody, so this wrapper kept trapping the stretched overlay inside
   the text block (measured on grantseason.com: H3 static -> .card-body relative
   -> .card relative). */
.ixrow>.body,.magrow>.body,.mcard>.body,.rail-card>.body,.spoke>.body,.zzrow>.body{position:static;}
.car-prev{left:10px;} .car-next{right:10px;}
.car-dot.is-on span{background:var(--accent,#F5F7FB);transform:scale(1.35);}
@media (hover:none){.car-nav{display:none;}}
.tablewrap{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch;}
.tablewrap table{border-collapse:collapse;width:100%;min-width:420px;
  font-size:.94rem;}
.tablewrap th,.tablewrap td{padding:9px 12px;text-align:left;
  border-bottom:1px solid var(--border,rgba(137,140,147,0.28));}
.tablewrap thead th{font-weight:700;white-space:nowrap;
  border-bottom-width:2px;}
.tablewrap tbody tr:last-child td{border-bottom:0;}
.hero::before,.hero::after{z-index:0;}
.hero > div{position:relative;z-index:1;}
.fcol a{display:flex;align-items:center;min-height:0;padding:5px 0;
  line-height:1.35;}
.fcol li{padding:0;}
@media (pointer:coarse){.fcol a{min-height:44px;padding:0;}}
/* Latest prints real headlines; clamp them so one long title cannot set the
   height of the whole footer. */
.fcol-latest a{-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;
  overflow:hidden;align-items:flex-start;}
.footer-in{align-items:start;}
.ticker-track{padding-top:0;padding-bottom:0;}
.ticker-track a{display:inline-flex;align-items:center;min-height:44px;}
.ticker-label{min-height:44px;}
.more-list a{display:flex;align-items:center;min-height:44px;}

/* ---- No visible scrollbar tracks anywhere. The grey UA scrollbar under the
   nav and the ticker was reading as broken chrome on both mobile and desktop. */
.nav,.ticker-track,.rail,.boardwrap,.digest,.ixlist,
.masthead .nav,.ticker .ticker-track{scrollbar-width:none !important;-ms-overflow-style:none !important;}
.masthead .nav::-webkit-scrollbar,.ticker .ticker-track::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important;}
.nav::-webkit-scrollbar,.ticker-track::-webkit-scrollbar,.rail::-webkit-scrollbar,
.boardwrap::-webkit-scrollbar{width:0;height:0;display:none;}

/* ---- Ticker auto-scrolls instead of exposing a scrollbar. The track holds the
   items twice, so translating by half its width loops seamlessly. */
/* --- _TICKER_ALIGNS_CONTENT_2026_08_21: the LIVE strip used to run to the screen edge while the
   nav and content started well inside it. The band still spans the full width;
   its contents now sit in the theme's own .wrap, so every site aligns at its own
   width with no number chosen here. The padding override is qualified
   (.masthead + .ticker, 0-2-1) because theme CSS is injected at inconsistent
   points and source order cannot be trusted. */
.ticker{max-width:100%;overflow:hidden;}
.masthead + .ticker{padding-left:0;padding-right:0;}
.ticker > .ticker-in{display:flex;align-items:center;gap:12px;
  min-width:0;width:100%;}
.ticker-track{overflow:hidden !important;padding-left:0;padding-right:0;min-width:0;flex:1 1 auto;}
.ticker-marquee{display:flex;align-items:center;gap:26px;white-space:nowrap;width:max-content;
  padding-left:16px;animation:tickerscroll 45s linear infinite;}
.ticker-dup{display:flex;align-items:center;gap:26px;}
@keyframes tickerscroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.ticker:hover .ticker-marquee,.ticker:focus-within .ticker-marquee{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){
  .ticker-marquee{animation:none;}
  .ticker-track{overflow-x:auto !important;}
}

/* ---- Mobile drawer. Base (390px) hides the nav behind a hamburger; from 768px
   the control disappears and the nav is always visible. Pure CSS, so it works
   with JavaScript disabled. */
/* the hamburger adds 44px to the masthead, so a long wordmark set to
   flex:0 0 auto pushed the icons past the viewport. Let it shrink and wrap. */
.mast-in{min-width:0;}
.brand{flex:0 1 auto;min-width:0;}
/* .icons must be the positioning context: without it the absolutely positioned
   checkbox anchored to the sticky masthead and sat invisibly on top of the
   wordmark, swallowing clicks meant for the home link. */
.icons{flex:0 0 auto;position:relative;display:inline-flex;align-items:center;gap:6px;}
.navtoggle{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:44px;height:44px;margin:0;opacity:0;z-index:3;cursor:pointer;}
.hamburger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0 10px;cursor:pointer;flex:0 0 44px;}
.hbar{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;
  transition:transform .2s ease,opacity .2s ease;}
/* --- _NAVTOGGLE_HAS_FIX_2026_08_24: was .navtoggle:checked ~ .mast-in ... (general-sibling
   combinator). The checkbox is always a DESCENDANT of .mast-in (or of .navrow
   for nav_pos=stacked) via .icons, never its sibling in any of the three
   masthead() layouts, so ~ could never match -- confirmed live, 0 of 7 and 0
   of 14 real nav links reachable via the hamburger on two different sites/
   layouts. :has() matches on descendant state instead of sibling position, so
   it works from wherever the checkbox actually sits, in every layout, with no
   HTML change. */
header.masthead:has(.navtoggle:checked) .hamburger .hbar:nth-child(1){transform:translateY(7px) rotate(45deg);}
header.masthead:has(.navtoggle:checked) .hamburger .hbar:nth-child(2){opacity:0;}
header.masthead:has(.navtoggle:checked) .hamburger .hbar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
header.masthead:has(.navtoggle:focus-visible) .hamburger{outline:3px solid var(--focus,#99C3FF);outline-offset:2px;}
.masthead .nav{display:none;}
header.masthead:has(.navtoggle:checked) .nav{display:flex;flex-direction:column;align-items:stretch;
  overflow:visible;flex-wrap:nowrap;width:100%;padding-bottom:8px;}
header.masthead:has(.navtoggle:checked) .nav .navitem{width:100%;}
header.masthead:has(.navtoggle:checked) .nav .navlink,
header.masthead:has(.navtoggle:checked) .nav > a{width:100%;justify-content:flex-start;}
/* submenus stay desktop-only: their targets are all reachable from the footer */
.masthead .dropdown{display:none;}
@media(min-width:768px){
  .navtoggle,.hamburger{display:none;}
  .masthead .nav{display:flex;}
}

/* ---- Featured carousel. CSS scroll-snap so it is swipeable on touch and fully
   linked with JavaScript disabled; the dots are real in-page anchors. */
.sec-car{padding-top:14px;}
.carousel{position:relative;}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:0;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;}
.car-track::-webkit-scrollbar{width:0;height:0;display:none;}
.car-slide{scroll-snap-align:center;position:relative;min-width:0;}
.car-slide .ratio{position:relative;aspect-ratio:16/9;overflow:hidden;}
.car-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* _CAR_CLICK_LAYERING_2026_08_24: decorative gradient only - it covered inset:0 and was
   swallowing every click aimed at the slide beneath it. */
.car-scrim{pointer-events:none;position:absolute;inset:0;background:linear-gradient(to top,
  rgba(9,25,72,0.94) 6%,rgba(9,25,72,0.55) 46%,rgba(9,25,72,0.06) 82%);}
/* _CAR_CLICK_LAYERING_2026_08_24: z-index:2 keeps the kicker and headline links above the
   stretched slide link, so they keep their own separate destinations. */
.car-txt{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 18px;z-index:2;}
.car-txt h3{margin:8px 0 6px;font-size:19px;line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.car-txt h3 a{color:#F5F7FB;text-decoration:none;}
.car-txt h3 a::after{content:"";position:absolute;inset:0;}
.car-txt .dek{color:#D7F6FF;font-size:13.5px;margin:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.car-txt .kicker{position:relative;z-index:1;}
.car-dots{display:flex;justify-content:center;gap:6px;padding:10px 0 2px;}
.car-dot{display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:44px;text-decoration:none;}
.car-dot span{display:block;width:9px;height:9px;border-radius:50%;
  background:var(--fg-muted);opacity:.45;transition:opacity .2s ease,transform .2s ease;}
.car-dot:hover span,.car-dot:focus-visible span{opacity:1;transform:scale(1.25);}
@media(min-width:768px){
  .car-txt{padding:24px 26px 26px;}
  .car-txt h3{font-size:27px;}
  .car-txt .dek{font-size:15px;}
}
@media(min-width:1280px){.car-txt h3{font-size:31px;}}

/* ---- FAQ, native <details> so it opens with no script and is keyboard operable */
.faq{display:grid;gap:8px;}
.faq-item{border:1px solid var(--border);background:var(--surface);border-radius:10px;
  padding:0 14px;}
.faq-item summary{display:flex;align-items:center;gap:9px;min-height:52px;
  cursor:pointer;font-weight:700;font-size:15px;list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-caret{color:var(--accent-text);transition:transform .2s ease;flex:0 0 auto;}
.faq-item[open] .faq-caret{transform:rotate(180deg);}
.faq-a{padding:0 0 14px 24px;color:var(--fg-muted);font-size:14.5px;line-height:1.6;}
.faq-a p{margin:0;}

/* ---- Share row */
.sharerow{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:16px 0;
  border-top:1px solid var(--border);}
.share-label{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:800;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-muted);
  margin-right:4px;}
.share-btn{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;
  color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:9px;}
.share-btn:hover{border-color:var(--accent);color:var(--accent-text);}
.share-btn .ic{color:var(--accent-text);}

/* ---- Pagination for long indexes */
.pager{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:20px 0;
  border-top:1px solid var(--border);}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;text-decoration:none;font-weight:700;
  font-size:14px;border:1px solid var(--border);border-radius:8px;color:var(--fg);}
.pager a:hover{border-color:var(--accent);color:var(--accent-text);}
.pg-current{background:var(--accent);color:var(--accent-on,#F5F7FB);border-color:var(--accent);}

/* Honour a reduced-motion preference across every aura, not only the ones that
   happen to declare an animation of their own. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}
:root{--font-display:"Libre Franklin",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--font-body:"PT Serif",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;}
body{font-family:var(--font-body);}
h1,h2,h3,.brand{font-family:var(--font-display);}
:root{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#111318;--fg-muted:#6B6D73;--border:#DADCE1;--accent:#1E40AF;--accent-text:#091948;--accent-on:#FFFFFF;--accent2:#3D64CF;--primary:#1E40AF;--secondary:#D7F6FF;--tertiary:#111318;--surface-raised:#FFFFFF;--border-strong:#A8ABB1;--focus-ring:#1E40AF;--selection-bg:#CAECFF;}
:root[data-theme="light"]{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#111318;--fg-muted:#6B6D73;--border:#DADCE1;--accent:#1E40AF;--accent-text:#091948;--accent-on:#FFFFFF;--accent2:#3D64CF;--primary:#1E40AF;--secondary:#D7F6FF;--tertiary:#111318;--surface-raised:#FFFFFF;--border-strong:#A8ABB1;--focus-ring:#1E40AF;--selection-bg:#CAECFF;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#1D1E21;--surface:#343539;--fg:#F5F7FB;--fg-muted:#C3C6CB;--border:#4E5055;--accent:#79A6FF;--accent-text:#D7F6FF;--accent-on:#1D1E21;--accent2:#5784F8;--primary:#79A6FF;--secondary:#343539;--tertiary:#F5F7FB;--surface-raised:#4E5055;--border-strong:#6B6D73;--focus-ring:#3D64CF;--selection-bg:#172E72;}}
:root[data-theme="dark"]{--bg:#1D1E21;--surface:#343539;--fg:#F5F7FB;--fg-muted:#C3C6CB;--border:#4E5055;--accent:#79A6FF;--accent-text:#D7F6FF;--accent-on:#1D1E21;--accent2:#5784F8;--primary:#79A6FF;--secondary:#343539;--tertiary:#F5F7FB;--surface-raised:#4E5055;--border-strong:#6B6D73;--focus-ring:#3D64CF;--selection-bg:#172E72;}
.brandmark{display:inline-flex;align-items:center;gap:10px;min-width:0;}
.brandtext{min-width:0;}
.markwrap{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;}
.markwrap svg{width:100%;height:100%;display:block;}
.mark-plate{background:#EBEDF1;border-radius:6px;padding:3px;}
@media(min-width:768px){.markwrap{width:34px;height:34px;}}
.brand-monogram{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--accent-on,#F5F7FB);font-weight:800;font-size:13px;flex:0 0 auto;}.hero h1{font-size:clamp(34.0px,7.2vw,52.0px);}
.article-full h1{font-size:clamp(34.0px,5.4vw,42.0px);}
:root:root:root{--tint:#F5F7FB;--rule:#1D1E21;--band:#2847A0;--band-hover:#2847A0;--edge:#2847A0;--link:#2847A0;--focus:#2847A0;--stripe:rgba(40,71,160,0.18);}
:root:root:root[data-theme="light"]{--tint:#F5F7FB;--rule:#1D1E21;--band:#2847A0;--band-hover:#2847A0;--edge:#2847A0;--link:#2847A0;--focus:#2847A0;--stripe:rgba(40,71,160,0.18);}
@media (prefers-color-scheme: dark){:root:root:root:not([data-theme="light"]){--tint:#1D1E21;--rule:#EBEDF1;--edge:#3D64CF;--link:#99C3FF;--focus:#99C3FF;--stripe:rgba(61,100,207,0.26);--band:#2847A0;--band-hover:#2847A0;}}
:root:root:root[data-theme="dark"]{--tint:#1D1E21;--rule:#EBEDF1;--edge:#3D64CF;--link:#99C3FF;--focus:#99C3FF;--stripe:rgba(61,100,207,0.26);--band:#2847A0;--band-hover:#2847A0;}
:root:root:root{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#111318;--fg-muted:#6B6D73;--border:#DADCE1;--accent:#1E40AF;--accent-text:#091948;--accent-on:#FFFFFF;--accent2:#3D64CF;--primary:#1E40AF;--secondary:#D7F6FF;--tertiary:#111318;--surface-raised:#FFFFFF;--border-strong:#A8ABB1;--focus-ring:#1E40AF;--selection-bg:#CAECFF;}
:root:root:root[data-theme="light"]{--bg:#F3F2F2;--surface:#FFFFFF;--fg:#111318;--fg-muted:#6B6D73;--border:#DADCE1;--accent:#1E40AF;--accent-text:#091948;--accent-on:#FFFFFF;--accent2:#3D64CF;--primary:#1E40AF;--secondary:#D7F6FF;--tertiary:#111318;--surface-raised:#FFFFFF;--border-strong:#A8ABB1;--focus-ring:#1E40AF;--selection-bg:#CAECFF;}
@media (prefers-color-scheme: dark){:root:root:root:not([data-theme="light"]){--bg:#1D1E21;--surface:#343539;--fg:#F5F7FB;--fg-muted:#C3C6CB;--border:#4E5055;--accent:#79A6FF;--accent-text:#D7F6FF;--accent-on:#1D1E21;--accent2:#5784F8;--primary:#79A6FF;--secondary:#343539;--tertiary:#F5F7FB;--surface-raised:#4E5055;--border-strong:#6B6D73;--focus-ring:#3D64CF;--selection-bg:#172E72;}}
:root:root:root[data-theme="dark"]{--bg:#1D1E21;--surface:#343539;--fg:#F5F7FB;--fg-muted:#C3C6CB;--border:#4E5055;--accent:#79A6FF;--accent-text:#D7F6FF;--accent-on:#1D1E21;--accent2:#5784F8;--primary:#79A6FF;--secondary:#343539;--tertiary:#F5F7FB;--surface-raised:#4E5055;--border-strong:#6B6D73;--focus-ring:#3D64CF;--selection-bg:#172E72;}
:root{--mark-accent:#2847A0;--mark-ink:#111318;--mark-ground:#F3F2F2;--mark-grey:#898C93;--favicon-tile:#1E40AF;--on-accent:#FFFFFF;}
:root[data-theme="light"]{--mark-accent:#2847A0;--mark-ink:#111318;--mark-ground:#F3F2F2;--mark-grey:#898C93;--favicon-tile:#1E40AF;--on-accent:#FFFFFF;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--mark-accent:#3D64CF;--mark-ink:#F5F7FB;--mark-ground:#1D1E21;--mark-grey:#A8ABB1;--favicon-tile:#79A6FF;--on-accent:#1D1E21;}}
:root[data-theme="dark"]{--mark-accent:#3D64CF;--mark-ink:#F5F7FB;--mark-ground:#1D1E21;--mark-grey:#A8ABB1;--favicon-tile:#79A6FF;--on-accent:#1D1E21;}

.empty{padding:44px 22px;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);text-align:center;}
.empty h1{margin:0 0 10px;}
.empty p{margin:0 auto 8px;max-width:56ch;color:var(--fg-muted);}
.empty .meta{font-size:13px;opacity:.85;}

.markwrap{color:var(--mark-accent,var(--accent));}
.brandmark .markwrap svg{color:inherit;}