
:root{--accent:#9f1239;--accent-dark:#6d0f28;--accent-on:#9f1239;--accent-on-hover:#6d0f28;--accent-fg:#6d0f28;--ink:#24101a;--paper:#faf7f8;}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Lora',system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}
h1,h2,h3,h4,.masthead{font-family:'Playfair Display',Georgia,serif}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
/* Accessibility: keyboard-only skip link, visible focus ring, screen-reader-only headings
   that keep the document outline valid without changing the visual design. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;font-weight:700;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--accent-on);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main:focus{outline:none}
.ticker{background:var(--ink);color:#fff;font-size:13px;overflow:hidden;white-space:nowrap;padding:8px 0}
.ticker span{margin-right:28px}
.ticker .up{color:#4ade80}.ticker .down{color:#f87171}
.ticker .asof{opacity:.55}
header.site{background:#fff;border-bottom:3px solid var(--accent)}
.mastrow{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.masthead{font-size:30px;font-weight:800;letter-spacing:-.5px}
.masthead .mark{color:var(--accent-fg)}
.tagline{font-size:12.5px;opacity:.72}
nav.cats{display:flex;gap:4px;overflow-x:auto;padding-bottom:2px}
nav.cats a{padding:10px 14px;font-size:14px;font-weight:600;border-radius:6px 6px 0 0;white-space:nowrap}
nav.cats a:hover,nav.cats a.on{background:var(--accent-on);color:#fff}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:26px;padding:30px 0}
.hero-main{position:relative;border-radius:14px;overflow:hidden;min-height:420px;display:flex;align-items:flex-end;color:#fff}
.hero-main .bg{position:absolute;inset:0}
.hero-main .txt{position:relative;padding:30px;background:linear-gradient(transparent,rgba(0,0,0,.72))}
.hero-main h1{font-size:34px;line-height:1.15;margin:8px 0}
.hero-main p{opacity:.92;font-size:15.5px}
.kicker{display:inline-block;background:var(--accent-on);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:4px 10px;border-radius:4px}
.hero-side{display:flex;flex-direction:column;gap:16px}
.side-card{display:flex;gap:14px;background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:12px;overflow:hidden;flex:1}
.side-card .thumb{width:130px;flex:none;position:relative}
.side-card .thumb .media{position:absolute;inset:0}
.media{position:relative;width:100%;height:100%;overflow:hidden}
.media svg{width:100%;height:100%;object-fit:cover}
.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.side-card .t{padding:12px 14px 12px 0}
.side-card h3{font-size:15.5px;line-height:1.3;margin-top:4px}
.side-card .cat{font-size:11px;font-weight:700;color:var(--accent-fg);text-transform:uppercase;letter-spacing:1px}
section.band h2.bandtitle{font-size:22px;border-left:5px solid var(--accent);padding-left:12px;margin:34px 0 18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:20px}
.card{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s}
.card:hover{transform:translateY(-3px)}
.card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.card .txt{padding:16px}
.card h3{font-size:17px;line-height:1.3;margin:6px 0 8px}
.card p{font-size:13.5px;opacity:.72}
.card .meta{font-size:12px;opacity:.72;margin-top:10px}
article.story{max-width:760px;margin:0 auto;padding:36px 0}
article.story h1{font-size:38px;line-height:1.12;margin:10px 0 14px}
article.story .dek{font-size:19px;opacity:.75;font-weight:400;margin-bottom:14px}
article.story .byline{font-size:13.5px;opacity:.72;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);padding:10px 0;margin-bottom:22px}
article.story .lede-art{border-radius:12px;overflow:hidden;margin-bottom:26px;aspect-ratio:1.9;position:relative}
article.story p{font-size:17px;margin-bottom:18px}
/* "More from this desk" — in-body contextual link block (backlog item 3).
   Deliberately text-only: no images, so it adds crawl depth and dwell time
   without adding page weight or a second LCP candidate. Tap targets are
   padded to >=44px high so it does not regress item 7. */
.deskmore{border-left:5px solid var(--accent);background:#fff;border-radius:0 10px 10px 0;padding:14px 20px 6px;margin:28px 0 26px}
.deskmore .deskmore-h{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;opacity:.72;font-weight:700;margin:0 0 4px;font-family:inherit}
.deskmore ul{list-style:none;padding:0;margin:0}
.deskmore li{border-top:1px solid rgba(0,0,0,.07)}
.deskmore li:first-child{border-top:0}
.deskmore a{display:block;min-height:44px;padding:11px 0;font-weight:600;font-size:15.5px;line-height:1.35;color:var(--accent-fg);text-decoration:none}
.deskmore a:hover,.deskmore a:focus-visible{text-decoration:underline}
.sources{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:10px;padding:18px 22px;margin-top:30px;font-size:14px}
.sources h4,.sources .sources-h{margin-bottom:8px;font-size:13px;text-transform:uppercase;letter-spacing:1px;opacity:.72;font-weight:700}
.sources a{color:var(--accent-fg);text-decoration:underline}
.disclaimer{font-size:12.5px;opacity:.72;margin-top:26px;font-style:italic}
article.story .byline.byline-rich{opacity:1}
.byline-rich{display:flex;align-items:center;gap:12px;border-top:1px solid rgba(0,0,0,.1);border-bottom:1px solid rgba(0,0,0,.1);padding:12px 0;margin-bottom:18px;opacity:1}
.byline-rich .avatar img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e8e8e8}
.byline-txt{font-size:15px;line-height:1.35;opacity:.95}
.byline-txt .author-name{font-weight:700}
.byline-txt .author-name:hover{color:var(--accent-fg);text-decoration:underline}
.byline-date{opacity:.76}
.byline-role{font-size:12.5px;opacity:.72;margin-top:2px}
.author-hero{display:flex;gap:22px;align-items:center;margin:6px 0 22px}
.author-hero img{width:110px;height:110px;border-radius:50%;object-fit:cover;flex:none;background:#e8e8e8}
.author-hero h1{font-size:30px;margin-bottom:2px}
.author-hero .role{font-size:15px;color:var(--accent-fg);font-weight:600}
.ai-note{background:#fff;border:1px solid rgba(0,0,0,.1);border-left:4px solid var(--accent);border-radius:8px;padding:14px 18px;font-size:13.5px;opacity:.85;margin:20px 0}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:22px 0}
.roster a{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:14px}
.roster a:hover{border-color:var(--accent)}
.roster img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;background:#e8e8e8}
.roster .n{font-weight:700;font-size:15.5px}
.roster .r{font-size:12.5px;opacity:.72}
.share{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0}
.share-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1px;opacity:.72;margin-right:4px}
.share a{font-size:13px;font-weight:600;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid rgba(0,0,0,.14)}
.share a:hover{background:var(--accent-on);color:#fff;border-color:var(--accent-on)}
.splash-banner{background:#111;color:#fff;text-align:center;font-size:12px;letter-spacing:2px;text-transform:uppercase;padding:9px 12px}
.splash-banner b{color:#ffd54d}
article.splash{max-width:720px;margin:0 auto;padding:30px 0}
article.splash h1{font-size:40px;line-height:1.1;margin:14px 0}
article.splash .subhead{font-size:20px;opacity:.8;margin-bottom:18px}
article.splash h2{font-size:24px;margin:30px 0 12px}
article.splash p{font-size:17.5px;margin-bottom:18px}
.keypoints{background:#fff;border-left:5px solid var(--accent);border-radius:8px;padding:20px 24px;margin:24px 0}
.keypoints h3{margin-bottom:10px}
.keypoints li{margin:8px 0 8px 18px;font-size:16px}
.cta-wrap{text-align:center;margin:30px 0}
.cta{display:inline-block;background:var(--accent-on);color:#fff;font-size:19px;font-weight:800;padding:16px 42px;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.18)}
.cta:hover{background:var(--accent-on-hover)}
.cta-sub{font-size:13px;opacity:.72;margin-top:8px}
/* Splash conversion furniture (backlog item 4) — all optional, all additive.
   The disclosure block below is untouched and still renders unconditionally. */
.cta-2{display:inline-block;margin-top:12px;background:transparent;color:var(--accent-fg);border:2px solid var(--accent-on);box-shadow:none;font-size:16px;font-weight:700;padding:12px 30px;border-radius:10px}
.cta-2:hover{background:var(--accent-on);color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.splash-logo{display:flex;align-items:center;gap:14px;margin-top:18px}
.splash-logo img{height:52px;width:auto;max-width:240px;object-fit:contain;background:#fff;border-radius:8px;padding:6px 10px;border:1px solid rgba(0,0,0,.08)}
.splash-logo .logo-cap{font-size:12.5px;text-transform:uppercase;letter-spacing:1.2px;opacity:.72;font-weight:700}
.splash-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.1);border-radius:10px;overflow:hidden;margin:22px 0 26px}
.splash-stats .stat{padding:18px 14px}
.splash-stats .stat-n{font-size:11.5px;opacity:.72;margin-top:6px;line-height:1.35;font-style:italic}
@media(max-width:640px){.splash-stats{grid-template-columns:1fr}.splash-logo img{height:44px}}
.sponsor-disclosure{background:#fff7e6;border:1px solid #eedaa0;border-radius:10px;padding:18px 22px;margin:30px 0;font-size:13.5px;line-height:1.7}
.sponsor-disclosure h4{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.reg-notice{background:#fff4f4;border:1px solid #e6b9b9;border-left:4px solid #c0392b;border-radius:10px;padding:18px 22px;margin:26px 0;font-size:13.5px;line-height:1.7}
.reg-notice h4{font-size:13px;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;color:#8e2b21}
.leadbox{background:#fff;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:24px 26px;margin:30px 0}
.leadbox h3{font-size:20px;margin-bottom:6px}
.leadbox p{font-size:15px;opacity:.75;margin-bottom:14px}
.leadrow{display:flex;gap:10px;flex-wrap:wrap}
.leadrow input[type=email]{flex:1 1 240px;font-family:inherit;font-size:16px;padding:13px 14px;border:1px solid rgba(0,0,0,.22);border-radius:8px}
.leadrow input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px}
.leadrow button{background:var(--accent-on);color:#fff;font-family:inherit;font-size:16px;font-weight:700;padding:13px 26px;border:0;border-radius:8px;cursor:pointer}
.leadrow button:hover{background:var(--accent-on-hover)}
.leadbox .consent{display:block;font-size:12.5px;opacity:.7;margin-top:12px;line-height:1.5}
.leadbox .consent input{margin-right:6px}
.leadbox .hp{position:absolute;left:-9999px}
/* ---- Interest-test ("watch") pages: short, image-led, one action ---- */
article.watch{max-width:680px;margin:0 auto;padding:0 0 40px}
.watch-hero{position:relative;margin:0 -20px 30px;min-height:400px;background-size:cover;background-position:center;display:flex;align-items:flex-end;border-radius:0}
.watch-hero-in{padding:34px 26px;width:100%}
.watch-kicker{display:inline-block;background:var(--accent-on);color:#fff;font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;padding:5px 11px;border-radius:3px;margin-bottom:14px}
.watch-co{font-family:'Playfair Display',Georgia,serif;font-size:54px;font-weight:800;line-height:1;color:#fff;letter-spacing:-1px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.watch-tick{font-size:14px;letter-spacing:2.5px;color:#fff;opacity:.85;margin-top:10px;font-family:ui-monospace,Menlo,monospace}
article.watch h1{font-size:34px;line-height:1.18;margin:0 0 14px}
.watch-sub{font-size:19px;line-height:1.55;opacity:.78;margin-bottom:28px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.1);border-radius:10px;overflow:hidden;margin:0 0 30px}
.stat{background:#fff;padding:18px 16px;text-align:center}
.stat-v{font-family:'Playfair Display',Georgia,serif;font-size:26px;font-weight:800;color:var(--accent-fg);line-height:1.1}
.stat-l{font-size:12px;opacity:.72;margin-top:6px;line-height:1.35}
.watch-body p{font-size:17.5px;line-height:1.68;margin-bottom:18px}
.watch-body h2{font-family:'Playfair Display',Georgia,serif;font-size:25px;font-weight:800;line-height:1.25;letter-spacing:-.3px;margin:34px 0 14px}
.watch-body ul{margin:0 0 20px;padding-left:0;list-style:none}
.watch-body li{font-size:17.5px;line-height:1.6;margin-bottom:11px;padding-left:22px;position:relative}
.watch-body li:before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.co-statement{border:1px solid rgba(0,0,0,.13);border-left:4px solid var(--accent);border-radius:10px;background:#fff;padding:24px 26px 8px;margin:34px 0 30px}
.co-statement-label{font-size:11px;font-weight:800;letter-spacing:1.7px;text-transform:uppercase;color:var(--accent-fg);margin-bottom:9px}
.co-statement-note{font-size:12.5px!important;line-height:1.6!important;opacity:.72;margin-bottom:18px!important;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.09)}
.co-statement-body p{font-size:16.5px;line-height:1.65}
.co-statement-body h2{font-size:20px;margin:26px 0 10px}
.co-statement-body li{font-size:16.5px}
.co-statement-body>*:first-child{margin-top:0}
.capture{background:var(--ink);color:#fff;border-radius:14px;padding:30px 30px 26px;margin:34px 0 26px}
.capture h3{font-size:23px;color:#fff;margin-bottom:8px;line-height:1.25}
.capture p{font-size:15px;opacity:.8;margin-bottom:18px}
.cap-row{display:flex;gap:10px;flex-wrap:wrap}
.cap-row input[type=email]{flex:1 1 240px;font-family:inherit;font-size:16px;padding:14px 15px;border:0;border-radius:8px}
.cap-row input[type=email]:focus{outline:3px solid var(--accent);outline-offset:1px}
.cap-row button{background:var(--accent-on);color:#fff;font-family:inherit;font-size:16px;font-weight:800;padding:14px 28px;border:0;border-radius:8px;cursor:pointer;white-space:nowrap}
.cap-row button:hover{filter:brightness(1.1)}
.capture .consent{display:block;font-size:12px;opacity:.72;margin-top:14px;line-height:1.5}
.capture .consent input{margin-right:6px}
.capture .hp{position:absolute;left:-9999px}
.watch-note{background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:10px;padding:16px 20px;font-size:12.5px;line-height:1.65;opacity:.8;margin-top:24px}
.watch-note a{color:var(--accent-fg);text-decoration:underline}
@media(max-width:700px){.watch-hero{min-height:320px}.watch-co{font-size:38px}article.watch h1{font-size:27px}}
.cform{max-width:640px;margin:26px 0}
.cform label{display:block;font-size:15px;font-weight:600;margin:18px 0 6px}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{width:100%;font-family:inherit;font-size:16px;color:var(--ink);background:#fff;padding:12px 14px;border:1px solid rgba(0,0,0,.22);border-radius:8px}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.cform textarea{resize:vertical;min-height:130px}
.cform button{margin-top:22px;background:var(--ink);color:#fff;font-family:inherit;font-size:17px;font-weight:700;padding:14px 40px;border:0;border-radius:8px;cursor:pointer}
.cform button:hover{background:var(--accent-on-hover)}
.cform .hp{position:absolute;left:-9999px}
footer.site{background:var(--ink);color:#fff;margin-top:50px;padding:40px 0 26px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;margin-bottom:26px}
footer h4,footer h2{margin-bottom:10px;font-size:15px;font-weight:700}
footer a{opacity:.75;display:block;font-size:14px;margin-bottom:6px}
footer a:hover{opacity:1}
footer .fine{border-top:1px solid rgba(255,255,255,.15);padding-top:16px;font-size:12px;opacity:.55;line-height:1.7}
.pagehead{padding:34px 0 6px}
.pagehead h1{font-size:32px}
.prose{max-width:760px;padding:20px 0 10px}
.prose p,.prose li{font-size:16px;margin-bottom:14px}
.prose h2{margin:22px 0 10px;font-size:22px}
.prose ul{padding-left:22px}
@media(max-width:860px){.hero{grid-template-columns:1fr}.hero-main{min-height:320px}.hero-main h1{font-size:26px}footer .cols{grid-template-columns:1fr}article.story h1{font-size:29px}}
/* ==== Backlog item 7 — mobile touch ergonomics (2026-08-17) ====================
   Measured at 390px with Playwright: no horizontal overflow anywhere, but 725 of
   1303 interactive elements were under the 44px WCAG 2.5.8 (AAA) / Apple-HIG
   minimum. The offenders were structural, not one-off: footer link stacks, the
   section nav tabs (43.1px — one pixel short), the share pills, the masthead,
   the band-title links, the sources list and the consent checkboxes.

   Applied at ALL viewports, not behind a media query: a touch target is a touch
   target on a 1024px tablet too, and duplicating the rules in a breakpoint is
   how they drift apart. Where a target grew, an adjacent margin was trimmed so
   the desktop rhythm is close to unchanged.

   DELIBERATELY NOT ENLARGED: links inline inside a sentence or a block of text
   (the byline author name, the contact email link in prose, in-body links).
   WCAG 2.5.8 exempts inline targets precisely because padding them breaks the
   line box and the typography, and it makes the surrounding text harder to read
   for everyone. Enlarging those would be a regression dressed as a fix. */
.masthead{display:inline-flex;align-items:center;min-height:44px}
nav.cats a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px}
section.band h2.bandtitle{margin:28px 0 12px}
section.band h2.bandtitle a{display:inline-flex;align-items:center;min-height:44px}
.share{gap:10px}
.share a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:6px 16px}
.sources li{margin:2px 0}
.sources a{display:inline-block;min-height:44px;padding:10px 0;line-height:1.5}
footer a{display:flex;align-items:center;min-height:44px;margin-bottom:0;padding:2px 0}
footer h4,footer h2{margin-bottom:4px}
/* Pre-existing layout bug surfaced by the taller footer links: .cols declares
   three grid tracks but has FOUR children, so "SGNL Network" wrapped onto a
   second row and left a large hole beside the brand blurb. Four tracks. */
footer .cols{grid-template-columns:2fr 1fr 1fr 1fr}
@media(max-width:1000px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:640px){footer .cols{grid-template-columns:1fr}}
.leadbox .consent,.capture .consent{display:flex;align-items:center;gap:9px;min-height:44px;padding:6px 0}
.leadbox .consent input,.capture .consent input{width:24px;height:24px;flex:none;margin-right:0}
/* Ticker: it was overflow:hidden + nowrap, so on a 390px screen every index
   past the first was simply unreachable — clipped, not scrollable. It is now a
   horizontally scrollable region with the scrollbar suppressed, and it carries
   tabindex="0" in shell() so keyboard users can reach the scroll (WCAG 2.1.1).
   An auto-scrolling marquee was rejected: moving content would need a pause
   control under WCAG 2.2.2 and adds motion nobody asked for. */
.ticker{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ticker::-webkit-scrollbar{display:none}
.ticker .wrap{display:inline-block;min-width:100%}
.ticker:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
/* ==== Backlog item 8 — category pagination control =========================== */
.pagenote{font-size:13.5px;opacity:.72;margin-top:6px}
.pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:34px 0 6px;padding-bottom:4px}
.pagination .pg{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;border:1px solid rgba(0,0,0,.14);border-radius:8px;background:#fff;font-size:15px;font-weight:600}
.pagination a.pg:hover{background:var(--accent-on);color:#fff;border-color:var(--accent-on)}
.pagination .pg.on{background:var(--accent-on);color:#fff;border-color:var(--accent-on)}
.pagination .pg-edge{font-weight:700}
