*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#f7f6f3; --panel:#fffefc; --raise:#fff; --ink:#23232a; --soft:#55555f;
  --muted:#6c6c76; --line:#e3e1db; --hair:#eeece6; --accent:#35699c;
  /* Monospace is for keys and code only. It was on dates, counts, chips and
     labels too, which made every page read like terminal output. Numbers use
     tabular-nums in the sans face instead — same alignment, far less noise. */
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  --shadow:0 1px 2px rgba(20,20,25,.04),0 8px 24px -12px rgba(20,20,25,.12);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#16161b;--panel:#26262e;--raise:#2c2c34;--ink:#e6e4df;
        --soft:#b3b1ab;--muted:#8a8992;--line:#2e2e36;--hair:#232329;
        --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6)}
}
:root[data-theme="dark"]{--bg:#16161b;--panel:#26262e;--raise:#2c2c34;
  --ink:#e6e4df;--soft:#b3b1ab;--muted:#8a8992;--line:#2e2e36;--hair:#232329}
:root[data-theme="light"]{--bg:#f7f6f3;--panel:#fffefc;--raise:#fff;--ink:#23232a;
  --soft:#55555f;--muted:#6c6c76;--line:#e3e1db;--hair:#eeece6}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
.wrap{max-width:1020px;margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
a{color:var(--accent);text-underline-offset:2px}
/* One :focus rule in the whole stylesheet meant a keyboard user could barely
   tell where they were. :focus-visible so a mouse click does not draw it. */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* Three transitions, including the card lift, ignored the OS setting. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;
    animation-iteration-count:1 !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
  .card:hover{transform:none}
}

/* header */
header.top{position:sticky;top:0;z-index:20;backdrop-filter:saturate(180%) blur(12px);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;gap:18px;align-items:center;padding-top:13px;padding-bottom:13px}
.brand{font-weight:750;font-size:18px;color:var(--ink);text-decoration:none;
  letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
nav.top-nav{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:14px}
nav.top-nav a{color:var(--muted);text-decoration:none;padding:6px 10px;border-radius:7px}
nav.top-nav a:hover{color:var(--ink);background:var(--hair)}
nav.top-nav a.sub{color:#fff;background:var(--accent);font-weight:600}
nav.top-nav a.sub:hover{color:#fff;filter:brightness(1.08)}

/* channel bar */
.chanbar{border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:15}
/* No overflow here: it clips the absolutely-positioned menus. Grouping
   means four items rather than nine, so scrolling is not needed — narrow
   screens wrap instead. */
.chanbar .wrap{display:flex;gap:2px;align-items:stretch;flex-wrap:wrap}

.chanbar summary,.chanbar a.solo{display:flex;align-items:center;gap:6px;
  padding:11px 13px;font-size:14.5px;font-weight:600;color:var(--muted);
  text-decoration:none;white-space:nowrap;letter-spacing:-.01em;cursor:pointer;
  position:relative;list-style:none}
.chanbar summary::-webkit-details-marker{display:none}
.chanbar summary:hover,.chanbar a.solo:hover{color:var(--ink)}
.chanbar summary svg{width:9px;height:6px;stroke:currentColor;fill:none;
  stroke-width:1.6;transition:transform .15s}
.chanbar details[open] summary svg{transform:rotate(180deg)}
.chanbar summary::after,.chanbar a.solo::after{content:"";position:absolute;
  left:13px;right:13px;bottom:-1px;height:2px;background:transparent;
  border-radius:2px 2px 0 0}
.chanbar details[data-here] summary{color:var(--ink)}
.chanbar details[data-here] summary::after{background:var(--accent)}
.chanbar a.solo[aria-current]{color:color-mix(in srgb,var(--cc) 45%,var(--ink))}
.chanbar a.solo[aria-current]::after{background:var(--cc)}
.chanbar a.solo.all{margin-left:auto;color:var(--muted);font-weight:500}

.chanbar details{position:static}
@media(min-width:641px){.chanbar details{position:relative}}
.chanbar .menu{position:absolute;top:100%;left:6px;min-width:250px;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);padding:6px;display:grid;gap:1px;z-index:30}
/* Seven channels in one column filled two thirds of the screen. Two
   columns halve it without dropping the descriptions. */
.chanbar .menu.wide{grid-template-columns:1fr 1fr;min-width:480px}
.chanbar .menu a{display:block;padding:9px 11px;border-radius:7px;
  text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:620;
  border-left:2px solid transparent}
.chanbar .menu a:hover{background:var(--hair);border-left-color:var(--cc)}
.chanbar .menu a[aria-current]{color:color-mix(in srgb,var(--cc) 45%,var(--ink));
  background:var(--hair);
  border-left-color:var(--cc)}
.chanbar .menu a span{display:block;font-size:12.5px;font-weight:400;
  color:var(--muted);margin-top:1px;letter-spacing:0;line-height:1.35}
@media(max-width:680px){
  /* Phone header: the nav was wrapping to two rows, which pushed the first
     story off the screen entirely. */
  header.top .wrap{gap:10px;padding-top:11px;padding-bottom:11px}
  nav.top-nav{gap:2px;font-size:13.5px}
  nav.top-nav a{padding:6px 8px}
  .brand{font-size:17px}
  .chanbar summary,.chanbar a.solo{padding:9px 9px;font-size:13.5px}
  /* On a phone the descriptions cost more than they explain */
  .chanbar .menu,.chanbar .menu.wide{position:absolute;left:8px;right:8px;
    min-width:0;grid-template-columns:1fr}
  .chanbar .menu a{padding:8px 10px}
  .chanbar .menu a span{display:none}
  .chanbar a.solo.all{display:none}   /* Search in the header already covers it */
  .stats{gap:6px 14px;font-size:13.5px}
}

/* hero *//* hero */
.hero{padding:38px 0 16px}
.hero h1{font-size:clamp(30px,4.4vw,42px);line-height:1.04;letter-spacing:-.035em;
  margin:0 0 12px;font-weight:750}
.hero .lede{font-size:17px;color:var(--soft);margin:0;max-width:62ch}
.hero .lede b{color:var(--ink);font-weight:650}
/* The edition strapline: metadata, so it should not compete with the lede */
.hero .meta{font-size:14px;color:var(--muted)}
.stats{display:flex;flex-wrap:wrap;gap:18px;margin:14px 0 0;font-size:14px;
  color:var(--muted);align-items:baseline}
.stats span{white-space:nowrap}
.stats b{color:var(--ink);font-weight:670;font-size:15.5px;
  font-variant-numeric:tabular-nums}

/* end-of-life, full form — Release Radar only */
.countdown{margin:22px 0 0;border:1px solid var(--line);border-radius:11px;
  background:var(--panel);overflow:hidden}
.countdown h2{margin:0;padding:11px 16px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:650;
  border-bottom:1px solid var(--line)}
.countdown ul{list-style:none;margin:0;padding:7px 0}
.countdown li{display:flex;align-items:center;gap:14px;padding:7px 16px;
  font-size:14.5px}
.countdown .name{font-weight:600;min-width:150px}
.countdown .bar{flex:1;height:4px;border-radius:3px;background:var(--hair);
  position:relative;min-width:40px;overflow:hidden}
.countdown .bar i{position:absolute;inset:0 auto 0 0;border-radius:3px;display:block}
.countdown .days{font-size:13px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){.countdown .name{min-width:0}.countdown .bar{display:none}}

/* section headings *//* section headings */
.sec{display:flex;align-items:baseline;gap:12px;margin:52px 0 18px}
.hero+.sec,.hero+.count{margin-top:26px}
.sec h2{font-size:14px;letter-spacing:.09em;text-transform:uppercase;margin:0;
  color:var(--muted);font-weight:650}
.sec .rule{flex:1;height:1px;background:var(--line)}
.sec a{font-size:14px;text-decoration:none}
.sec h2{white-space:nowrap}
.domlinks{font-size:13.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.domlinks a{text-decoration:none}
.domlinks a:hover{text-decoration:underline}
@media(max-width:640px){.domlinks{display:none}}

/* story feed */
.feed{display:grid;gap:0}
.item{padding:22px 0;border-top:1px solid var(--hair);max-width:72ch}
.item:first-child{border-top:0}
.item .src .ch{font-weight:600;color:var(--soft);text-decoration:none}
.item .src .ch:hover{color:var(--accent)}
.item h3{margin:0 0 7px;font-size:19px;line-height:1.32;letter-spacing:-.015em;
  font-weight:660}
.item h3 a{color:var(--ink);text-decoration:none}
.item h3 a:hover{color:var(--accent)}
.item p{margin:0;color:var(--soft);font-size:15.5px}
.tag-link{text-decoration:none;transition:color .12s}
.tag-link:hover{color:color-mix(in srgb,var(--tc) 45%,var(--ink))}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;
  font-weight:640;letter-spacing:.06em;text-transform:uppercase;
  margin:0 16px 7px 0;white-space:nowrap;color:var(--muted)}
.tag i{width:6px;height:6px;border-radius:50%;background:var(--tc);flex:none}
.why{margin-top:11px;padding:9px 13px;border-radius:8px;background:var(--hair);
  font-size:14.5px;color:var(--ink)}
.why b{font-weight:650;color:var(--accent)}
.src{margin-top:9px;font-size:13.5px;color:var(--muted)}
.src a{text-decoration:none}
.src a:hover{text-decoration:underline}

/* front-page magazine split */
.split{display:grid;grid-template-columns:1.55fr 1fr;gap:0 34px;
  align-items:start}
.lead{padding-right:2px}
.lead h3{margin:8px 0 0;font-size:26px;line-height:1.22;letter-spacing:-.022em;
  font-weight:680}
.lead h3 a{color:var(--ink);text-decoration:none}
.lead h3 a:hover{color:var(--accent)}
.lead p{margin:11px 0 0;color:var(--soft);font-size:16px}
.lead .why{margin-top:13px}
.lead .src{margin-top:13px;font-size:13.5px;color:var(--muted)}
.lead .src a.ch{color:var(--soft);font-weight:600;text-decoration:none}
.lead .src a.ch:hover{color:var(--accent)}
.aside{border-left:1px solid var(--line);padding-left:26px;
  display:grid;gap:0;align-content:start}
.aside-item{padding:0 0 18px;border-bottom:1px solid var(--hair);margin-bottom:18px}
.aside-item:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.aside-item h4{margin:7px 0 0;font-size:16px;line-height:1.34;
  letter-spacing:-.012em;font-weight:640}
.aside-item h4 a{color:var(--ink);text-decoration:none}
.aside-item h4 a:hover{color:var(--accent)}
.aside-item .src{margin-top:7px;font-size:13px;color:var(--muted)}
.aside-item .src a.ch{color:var(--soft);font-weight:600;text-decoration:none}
@media(max-width:760px){
  .split{grid-template-columns:1fr;gap:26px 0}
  .lead h3{font-size:22px}
  .aside{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:20px}
}

/* channel cards */
/* A directory, not a feature grid: this sits below six domain sections that
   already showed the stories, so it earns four columns and compact cards
   rather than the ~850px full screen it used to take. */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;padding:15px 16px 13px;text-decoration:none;
  display:flex;flex-direction:column;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--ca) 45%,var(--line))}
/* No coloured bar here. Twenty channel hues side by side read as a
   spectrum however they were tuned — tried at 0.61 saturation, at 0.34, and
   with the weights varied, and all three were noise at this density. The
   accent still identifies a channel on the channel's own page, where it is
   the only one on screen. The one exception is the hover border below,
   which shows a single card's colour at a time. */
.card h3{margin:0 0 4px;font-size:16.5px;color:var(--ink);letter-spacing:-.02em;
  font-weight:680;line-height:1.3}
.card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.45}
/* Pinned to the bottom so a two-line title never leaves the stats ragged
   against its neighbours in the same row */
.card .n{margin-top:auto;padding-top:10px;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
  /* Never wrap: a second line here makes the whole grid row taller */
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Not the accent: the card already carries it on the top bar, and colouring
   the day too put twenty saturated labels on one screen. */
.card .n .d{color:var(--muted);text-transform:uppercase;letter-spacing:.07em;
  font-weight:650;font-size:11.5px;margin-right:5px}

.morelink{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:26px 0 0;padding:15px 18px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel)}
.morelink a{font-weight:640;text-decoration:none;font-size:15.5px}
.morelink a:hover{text-decoration:underline}
.morelink span{margin-left:auto;font-size:13.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}

/* weekly editions */
.editions-note{margin:-6px 0 14px;color:var(--muted);font-size:14.5px;max-width:60ch}
.issues{list-style:none;padding:0;margin:0}
.issues li{border-top:1px solid var(--hair)}
.issues a.edition{display:grid;grid-template-columns:132px 1fr auto;gap:16px;
  align-items:baseline;padding:15px 0;text-decoration:none}
.issues a.edition:hover .h{color:var(--accent)}
.issues .d{font-size:13.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.issues .h{color:var(--ink);font-size:15.5px;font-weight:560;line-height:1.45}
.issues a.edition .n{font-size:13px;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .issues a.edition{grid-template-columns:1fr;gap:4px}
  .issues a.edition .n{display:none}
}
.issues .titles{margin:9px 0 0;padding:0;list-style:none;font-size:14.5px;
  color:var(--muted);display:grid;gap:3px}
.issues .titles li{border:0;padding:0;display:flex;gap:8px}
.issues .titles li::before{content:"–";color:var(--line)}

/* The week's sign-off. NB: .aside is already the magazine sidebar — naming
   this .aside turned every sidebar story italic with a stray dash. */
.signoff{margin:34px 0 0;padding:16px 0 0;border-top:1px solid var(--hair);
  color:var(--muted);font-size:16px;font-style:italic;letter-spacing:-.005em;
  max-width:60ch}
.signoff::before{content:"— ";opacity:.55}

/* misc */
.cta{background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:22px;margin:52px 0 0}
.cta h3{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.cta p{margin:0;color:var(--soft);font-size:15.5px}
.cta .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn{display:inline-block;padding:9px 15px;border-radius:9px;font-size:14.5px;
  text-decoration:none;font-weight:600;border:1px solid var(--line);color:var(--ink)}
.btn.primary{background:var(--accent);color:#fff;border-color:transparent}
.btn:hover{filter:brightness(1.06)}
footer{border-top:1px solid var(--line);margin-top:64px;padding:26px 0 56px;
  color:var(--muted);font-size:14px}
footer a{color:var(--muted)}
.prose p{color:var(--soft)}
.prose h2{font-size:21px;letter-spacing:-.02em;margin:38px 0 12px;color:var(--ink)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--hair)}
th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:640px){
  body{font-size:16px}
  .stats div{flex:1 1 50%;border-bottom:1px solid var(--line)}
}

.searchbox{position:relative;margin:26px 0 0}
.searchbox form{margin:0}
.searchbox input{width:100%;font:inherit;font-size:17px;padding:13px 15px 13px 42px;
  border-radius:11px;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);outline:none}
.searchbox input:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.searchbox svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2}
.searchbox kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font:600 11px var(--mono);color:var(--muted);border:1px solid var(--line);
  border-radius:5px;padding:2px 6px;background:var(--hair)}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 0}
.filters button{font:inherit;font-size:13px;padding:5px 11px;border-radius:100px;
  border:1px solid var(--line);background:var(--panel);color:var(--muted);
  cursor:pointer}
.filters button:hover{color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--accent);color:#fff;
  border-color:transparent}
.catrow{margin-top:9px;padding-top:11px;border-top:1px dashed var(--line)}
.catrow button{font-size:12.5px;padding:4px 10px}
.count{margin:22px 0 4px;font-size:13.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
mark{background:color-mix(in srgb,var(--accent) 24%,transparent);color:inherit;
  border-radius:3px;padding:0 2px}
.empty{padding:44px 0;text-align:center;color:var(--muted)}