@charset "UTF-8";
/* ==========================================================================
   PRISM — "The Broadsheet, rebuilt as an app"

   Structure is borrowed from a printed front page: a utility strip, a centred
   wordmark, rule-separated columns, a ranked trending list. Everything you
   touch is app-native: sheets, segmented controls, a bottom tab bar, tactile
   press states, and scroll-driven motion.

   Palette is heritage jewel — porcelain, ink, oxblood, brass — with twelve
   deep band colours, one per topic. Nothing pastel, nothing neon.
   ========================================================================== */

/* ---------------------------------------------------------------- type -- */
/* Source Serif 4 for everything set as text, Inter for everything you operate.
   Both carry a real optical-size axis, so the same family covers a 4rem
   headline and an 8pt caption without either looking like the other stretched.
   Fraunces was the previous display face: characterful, but its wedge serifs
   and 144pt display cut read as a fashion masthead rather than a news desk. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/sourceserif4-italic-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-stretch: 100%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var.woff2") format("woff2-variations");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* -------------------------------------------------------------- tokens -- */
:root {
  --f-display: "Source Serif 4", "Iowan Old Style", Charter, Georgia, serif;
  --f-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Source Serif's opsz axis runs 8–60, not Fraunces' 9–144: large sizes get
     tighter spacing and finer hairlines, small sizes get open counters. */
  --opsz-display: 54;
  --opsz-text: 11;

  --t-2xs:  .625rem;
  --t-xs:   .6875rem;
  --t-sm:   .8125rem;
  --t-base: .9375rem;
  --t-md:   clamp(1rem, .96rem + .2vw, 1.125rem);
  --t-lg:   clamp(1.1875rem, 1.1rem + .4vw, 1.4375rem);
  --t-xl:   clamp(1.4375rem, 1.25rem + .9vw, 2rem);
  --t-2xl:  clamp(1.875rem, 1.5rem + 1.8vw, 3rem);
  --t-3xl:  clamp(2.375rem, 1.7rem + 3.2vw, 4.5rem);
  --t-4xl:  clamp(2.5rem, 1.9rem + 3.1vw, 4.25rem);

  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;   --sp-8: 4.5rem;
  --sp-9: clamp(2.75rem, 1.8rem + 3.6vw, 4.75rem);

  --shell: 1280px;
  --gutter: max(clamp(1rem, 4.2vw, 4rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));

  /* app surfaces are softly rounded; printed rules stay square */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --r-full: 999px;

  --ease: cubic-bezier(.22, .68, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* chrome geometry — every sticky offset reads these, nothing hardcodes 64px */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tabbar-h: 58px;
  --bar-h: 56px;        /* masthead row */
  --rail-h: 42px;       /* topic rail under it */
  --chrome-h: calc(var(--safe-t) + var(--bar-h) + var(--rail-h));
  --blur: saturate(180%) blur(18px);

  --band-lo: #35506B;
  --band-hi: #85AAD4;
}

/* ---- twelve bands, one per topic: a deep cut for the porcelain ground and a
   raised cut for the dark one. Surfaces choose which by re-pointing --band,
   so an always-dark block (ticker, footer, CTA) gets the raised set even in
   light mode instead of going invisible. */
[data-topic="ai"]          { --band-lo: #5D4494; --band-hi: #A992E8; }
[data-topic="science"]     { --band-lo: #1A5F5B; --band-hi: #4FC0B8; }
[data-topic="space"]       { --band-lo: #2C3970; --band-hi: #8092E8; }
[data-topic="security"]    { --band-lo: #8C1D3F; --band-hi: #EE7196; }
[data-topic="engineering"] { --band-lo: #40592C; --band-hi: #A3C878; }
[data-topic="design"]      { --band-lo: #6E3457; --band-hi: #DC8CBB; }
[data-topic="hardware"]    { --band-lo: #8A4020; --band-hi: #EE9169; }
[data-topic="technology"]  { --band-lo: #35506B; --band-hi: #85AAD4; }
[data-topic="research"]    { --band-lo: #256B4C; --band-hi: #5FC894; }
[data-topic="culture"]     { --band-lo: #8A6624; --band-hi: #E0B25C; }
[data-topic="business"]    { --band-lo: #6A4E28; --band-hi: #C9A46A; }
[data-topic="signal"]      { --band-lo: #A93C24; --band-hi: #F08A6B; }

:root, [data-topic] { --band: var(--band-lo); }
[data-theme="night"] [data-topic],
[data-theme="night"]:root { --band: var(--band-hi); }
/* blocks that are dark in every theme */
.ticker, .footer, .cta__inner, .toast,
.ticker [data-topic], .footer [data-topic], .cta__inner [data-topic] { --band: var(--band-hi); }

/* ---- porcelain (default) */
:root, [data-theme="paper"] {
  --bg:        #F2EFE9;
  --bg-warm:   #EAE5DC;
  --surface:   #FBFAF7;
  --surface-2: #F0ECE4;
  --rule:      #DAD3C8;
  --rule-soft: #E6E1D8;
  --text:      #191317;
  --text-dim:  #554D4E;
  --text-mute: #7A716F;
  --accent:      #8C1D3F;   /* oxblood — links, badges, active state */
  --accent-deep: #6E1531;
  --accent-soft: #F6E7EB;
  --brass:       #8A6624;   /* numerals, meters, quiet emphasis */
  --ink:       #191317;     /* inverted blocks */
  --on-ink:    #F2EFE9;
  --on-accent: #FFFFFF;
  --shadow-1: 0 1px 2px rgba(25, 19, 23, .05);
  --shadow-2: 0 12px 32px -18px rgba(25, 19, 23, .35);
  --img-fx: none;
  /* the accent that survives on a permanently dark block */
  --accent-on-ink: #E37B98;
  color-scheme: light;
}

/* ---- midnight ink */
[data-theme="night"] {
  --bg:        #14121A;
  --bg-warm:   #191722;
  --surface:   #1D1B26;
  --surface-2: #262332;
  --rule:      #322E3F;
  --rule-soft: #262332;
  --text:      #F1ECE6;
  --text-dim:  #BDB5B2;
  --text-mute: #8D8489;
  --accent:      #D65C7D;
  --accent-deep: #E37B98;
  --accent-soft: #2A1D26;
  --brass:       #D7AA55;
  --ink:       #0E0C13;
  --on-ink:    #F1ECE6;
  --on-accent: #17121A;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 16px 40px -20px rgba(0, 0, 0, .8);
  --img-fx: saturate(.92) brightness(.9);
  --accent-on-ink: #E37B98;
  color-scheme: dark;
}

/* Without JS the boot script never runs, so data-theme stays at its served
   value. Honour the OS preference anyway rather than forcing porcelain on a
   reader who asked the whole system for dark. */
@media (prefers-color-scheme: dark) {
  html.no-js {
    --bg:        #14121A;
    --bg-warm:   #191722;
    --surface:   #1D1B26;
    --surface-2: #262332;
    --rule:      #322E3F;
    --rule-soft: #262332;
    --text:      #F1ECE6;
    --text-dim:  #BDB5B2;
    --text-mute: #8D8489;
    --accent:      #D65C7D;
    --accent-deep: #E37B98;
    --accent-soft: #2A1D26;
    --brass:       #D7AA55;
    --ink:       #0E0C13;
    --on-ink:    #F1ECE6;
    --on-accent: #17121A;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 16px 40px -20px rgba(0, 0, 0, .8);
    --img-fx: saturate(.92) brightness(.9);
    color-scheme: dark;
  }
  html.no-js [data-topic], html.no-js:root { --band: var(--band-hi); }
}

/* The theme swap rides a View Transition when the browser has one: the new
   ground wipes in from the toggle instead of the whole page cross-fading. */
::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) {
  animation: themeWipe .42s var(--ease-out);
  mix-blend-mode: normal;
}
@keyframes themeWipe {
  from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
  to   { clip-path: circle(160% at var(--vt-x, 50%) var(--vt-y, 0)); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------- base -- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--chrome-h) + 1rem);
  /* clip, not hidden: a stray wide child never turns the page into a
     side-scroller, and position:sticky keeps working (overflow:hidden on an
     ancestor silently kills it). */
  overflow-x: clip;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: 1.55;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  padding-bottom: var(--safe-b);
}

/* Author display rules outrank the UA [hidden] rule, so re-assert it. */
[hidden] { display: none !important; }

img, svg, canvas { max-width: 100%; display: block; }
img { height: auto; filter: var(--img-fx); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }

/* no 300ms delay, no double-tap zoom, no text cursor on chrome */
a, button, [role="tab"], .pill, .chip, .tool, .iconbtn, .tabbar a, .navlink,
.sortbtn, .tab, .react { touch-action: manipulation; }
.masthead, .tabbar, .utility, .railbar, .drawer__nav, .palette__foot,
.tool, .iconbtn, .pill, .sortbtn, .tab, .navlink, .kicker, .card__topic,
.card__heat, .rank__n, .eyebrow, .brand { -webkit-user-select: none; user-select: none; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* a pointer press should never leave the ring behind on touch */
:focus:not(:focus-visible) { outline: none; }

.shell { width: min(100% - var(--gutter) * 2, var(--shell)); margin-inline: auto; }

/* horizontal scrollers behave like native rails: no bar, no rubber-band into
   the page, snap to the chip you land on */
.hscroll {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }

.skip {
  position: fixed; top: -100px; left: 12px; z-index: 300;
  padding: .75rem 1.25rem; border-radius: var(--r-full);
  background: var(--accent); color: var(--on-accent); font-weight: 600;
  transition: top .25s var(--ease);
}
.skip:focus { top: 12px; }

/* serif display, optical size wound all the way up */
.hero__title, .sechead__title, .pagehead__title, .story__title, .feature__title,
.card__title, .brief__title, .rank__title, .wordmark, .cta__title, .ritual__title,
.empty h2, .flow__step h3, .day__title, .lead__title {
  font-family: var(--f-display);
  font-variation-settings: "opsz" var(--opsz-display);
  font-weight: 600;
  letter-spacing: -.015em;
}

/* the small-caps utility label used across the paper */
.label, .eyebrow, .sechead__num, .kicker, .card__kicker, .ticker__topic, .day__topic,
.flow__num, .panel__title, .ritual__eyebrow, .footer__col h3, .crumbs, .stream__end,
.utility, .rank__n, .hero__stats dt, .day__count, .footer__stamp, .story__meta {
  font-family: var(--f-ui);
  font-size: var(--t-2xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- motion -- */
/* Scroll-driven where the browser supports it, IntersectionObserver where it
   does not. Either way the finished state is the default, so a failure to
   animate never costs the reader content. */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }

  @supports (animation-timeline: view()) {
    .reveal {
      opacity: 1; transform: none; transition: none;
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
  }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* Headline lines wipe up under a mask. Fraunces at display optical size
   overshoots its line box hard, so the mask has to sit well outside the box or
   it shaves the ascenders and descenders off every line — .1em was not enough
   and the third line lost its descender entirely. */
.line { display: block; overflow: hidden; padding-block: .34em; margin-block: -.34em; }
.line__in { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .line__in { transform: translateY(125%); animation: lineUp .75s var(--ease-out) forwards; }
  .line:nth-child(1) .line__in { animation-delay: .04s; }
  .line:nth-child(2) .line__in { animation-delay: .12s; }
  .line:nth-child(3) .line__in { animation-delay: .2s; }
  .line:nth-child(4) .line__in { animation-delay: .28s; }
}
@keyframes lineUp { to { transform: none; } }

/* ---- reading progress, painted by the scroller itself where possible */
.scroll-rail { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 200; pointer-events: none; }
.scroll-rail__fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--brass));
}
@supports (animation-timeline: scroll()) {
  .scroll-rail__fill {
    width: 100%; transform-origin: left; transform: scaleX(0);
    animation: railFill linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes railFill { to { transform: scaleX(1); } }
}

/* ------------------------------------------------------------ masthead -- */
.utility {
  display: none; align-items: center; gap: var(--sp-5);
  padding: .5rem 0; border-bottom: 1px solid var(--rule-soft);
  color: var(--text-mute);
}
.utility a { transition: color .18s var(--ease); }
.utility a:hover { color: var(--accent); }
.utility__end { margin-left: auto; display: flex; gap: var(--sp-4); }

.masthead {
  position: sticky; top: 0; z-index: 150;
  padding-top: var(--safe-t);
  /* translucent + blurred like a native large-title bar; solid fallback first
     so browsers without backdrop-filter never show text over content */
  background: var(--bg);
  transition: background .25s var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .masthead {
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    -webkit-backdrop-filter: var(--blur);
    backdrop-filter: var(--blur);
  }
}
.masthead::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--rule); opacity: 0;
  transition: opacity .25s var(--ease);
}
.masthead.is-stuck::after { opacity: 1; }

/* Phone: leading wordmark, trailing action cluster — nothing centred, because
   a centred wordmark plus two action columns cannot fit 390px and used to push
   the whole document sideways. */
.masthead__inner {
  display: flex; align-items: center; gap: .25rem;
  height: var(--bar-h);
  transition: height .3s var(--ease);
}
.masthead.is-stuck .masthead__inner { height: 50px; }

.brand { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; min-width: 0; }
.brand__mark { width: 24px; height: 24px; color: var(--accent); flex: none; }
.brand__mark svg { width: 100%; height: 100%; overflow: visible; }
.brand__tri { transition: transform .7s var(--ease-spring); transform-origin: 20px 20px; }
.brand:hover .brand__tri { transform: rotate(-14deg); }
.brand__type { display: grid; line-height: 1; min-width: 0; }
.brand__type b {
  font-family: var(--f-display);
  font-variation-settings: "opsz" 42;
  font-size: clamp(1.1875rem, 1.05rem + .9vw, 1.75rem);
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  transition: font-size .3s var(--ease);
}
.masthead.is-stuck .brand__type b { font-size: 1.125rem; }
.brand__type em {
  display: none;
  font-style: normal; font-size: var(--t-2xs); font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: var(--text-mute);
  margin-top: .3rem; white-space: nowrap;
}

.masthead__start { display: none; align-items: center; gap: .375rem; min-width: 0; }
.masthead__tools { display: flex; align-items: center; gap: .125rem; flex: none; }

.masthead__search {
  display: none; align-items: center; gap: .5rem;
  height: 38px; width: 17.5rem; max-width: 100%; padding: 0 .875rem;
  border: 1px solid var(--rule); border-radius: var(--r-full);
  background: var(--surface);
  transition: border-color .2s var(--ease), width .3s var(--ease), background .2s var(--ease);
}
.masthead__search:focus-within { border-color: var(--accent); width: 21rem; }
.masthead__search svg { width: 15px; height: 15px; flex: none; fill: none; stroke: var(--text-mute); stroke-width: 1.8; stroke-linecap: round; }
.masthead__search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: none; font-size: var(--t-sm); }
.masthead__search input::placeholder { color: var(--text-mute); }
.masthead__search kbd {
  flex: none; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em;
  padding: .15rem .3rem; border-radius: 4px; border: 1px solid var(--rule); color: var(--text-mute);
}
.masthead__search:focus-within kbd { display: none; }

.tool {
  position: relative; display: inline-grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-full);
  color: var(--text-dim); background: transparent;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease-spring);
}
.tool:hover { background: var(--surface-2); color: var(--text); }
.tool:active { transform: scale(.88); background: var(--surface-2); }
.tool svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool--pill {
  width: auto; padding: 0 .875rem; gap: .4rem; grid-auto-flow: column;
  border: 1px solid var(--rule); font-size: var(--t-sm); font-weight: 500;
}
.tool__badge {
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
  display: grid; place-items: center; padding: 0 4px;
  border-radius: var(--r-full); background: var(--accent); color: var(--on-accent);
  font-size: var(--t-2xs); font-style: normal; font-weight: 700;
  animation: pop .3s var(--ease-spring);
}
@keyframes pop { from { transform: scale(0); } }
/* The toggle shows the *preference*, not the resolved ground: half-disc for
   "follow system", sun for pinned light, moon for pinned night. Without JS no
   preference exists, so the half-disc is the honest default. */
.ico-day, .ico-night { display: none; }
[data-theme-pref="paper"] .ico-day { display: block; }
[data-theme-pref="night"] .ico-night { display: block; }
[data-theme-pref="paper"] .ico-auto, [data-theme-pref="night"] .ico-auto { display: none; }

/* Section nav — a printed rail of categories on the desktop, a native
   swipeable chip rail on a phone. Same markup, same order, no hamburger
   needed to reach a section. */
.masthead__nav { border-bottom: 1px solid var(--rule); }
.masthead__nav .shell {
  display: flex; align-items: stretch; gap: 0; height: var(--rail-h);
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  /* fade the cut edge instead of chopping a word in half */
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
}
.masthead__nav .shell::-webkit-scrollbar { display: none; }
.navlink {
  position: relative; display: inline-flex; align-items: center;
  padding: 0 clamp(.6rem, 1.1vw, 1rem);
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-mute); white-space: nowrap; flex: none;
  transition: color .2s var(--ease);
}
/* scaleX rather than animating left/right: a collapsed left:50%/right:50% box
   still rounds up to a stray 1px tick sitting on the rule */
.navlink::after {
  content: ""; position: absolute; bottom: 0; height: 2px;
  left: clamp(.6rem, 1.1vw, 1rem); right: clamp(.6rem, 1.1vw, 1rem);
  border-radius: 2px 2px 0 0; background: var(--band);
  transform: scaleX(0); transform-origin: center;
  transition: transform .3s var(--ease-out);
}
.navlink:hover { color: var(--text); }
.navlink:hover::after, .navlink.is-active::after { transform: scaleX(1); }
.navlink.is-active { color: var(--text); }
.navlink--more { color: var(--accent); gap: .3rem; }
.navlink--more svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.navlink--more::after { content: none; }

/* ---------------------------------------------------- app chrome: sheet -- */
.drawer {
  position: fixed; inset: 0; z-index: 190;
  display: grid; align-items: end;
  background: rgba(10, 8, 14, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: fade .25s var(--ease);
}
.drawer.is-closing { animation: fadeOut .28s var(--ease) forwards; }
@keyframes fade { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.drawer__nav {
  max-height: min(82vh, 82dvh); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, .7);
  padding: .375rem var(--gutter) calc(var(--sp-6) + var(--safe-b));
  animation: sheetUp .38s var(--ease-out);
  display: grid;
  touch-action: pan-y;
}
.drawer.is-closing .drawer__nav { animation: sheetDown .28s var(--ease) forwards; }
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetDown { to { transform: translateY(100%); } }
/* the grabber — also the drag target, so it needs real height */
.drawer__nav::before {
  content: ""; width: 40px; height: 5px; border-radius: var(--r-full);
  background: var(--rule); margin: .625rem auto var(--sp-3); flex: none;
}
.drawer__nav a {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  min-height: 52px;
  padding: .9rem 0 .9rem 1rem; border-bottom: 1px solid var(--rule-soft);
  font-family: var(--f-display); font-variation-settings: "opsz" 26;
  font-size: 1.25rem; font-weight: 600;
  animation: rowIn .4s var(--ease-out) backwards;
  transition: background .16s var(--ease);
}
.drawer__nav a:active { background: var(--surface-2); }
.drawer__nav a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 16px; border-radius: 2px; background: var(--band);
}
.drawer__nav a span { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; color: var(--text-mute); letter-spacing: .1em; }
.drawer__nav a:nth-child(1) { animation-delay: .03s } .drawer__nav a:nth-child(2) { animation-delay: .06s }
.drawer__nav a:nth-child(3) { animation-delay: .09s } .drawer__nav a:nth-child(4) { animation-delay: .12s }
.drawer__nav a:nth-child(5) { animation-delay: .15s } .drawer__nav a:nth-child(6) { animation-delay: .18s }
.drawer__nav a:nth-child(n+7) { animation-delay: .21s }
@keyframes rowIn { from { opacity: 0; transform: translateY(10px); } }

/* ------------------------------------------------ app chrome: tab bar -- */
.tabbar {
  position: fixed; inset: auto 0 0; z-index: 160;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding-bottom: var(--safe-b);
  transition: transform .35s var(--ease);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tabbar {
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  }
}
.tabbar.is-down { transform: translateY(calc(100% + 2px)); }
.tabbar a, .tabbar button {
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 2px;
  height: var(--tabbar-h);
  color: var(--text-mute); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
  transition: color .18s var(--ease);
}
/* the icon lifts into a tinted capsule on the active tab — the one piece of
   chrome that tells you where you are without reading */
.tabbar a::before {
  content: ""; position: absolute; top: 5px; width: 46px; height: 27px;
  border-radius: var(--r-full); background: var(--accent-soft);
  opacity: 0; transform: scale(.7);
  transition: opacity .24s var(--ease), transform .32s var(--ease-spring);
}
.tabbar .is-active::before { opacity: 1; transform: none; }
.tabbar svg {
  position: relative; width: 22px; height: 22px; margin-bottom: 1px;
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .3s var(--ease-spring), stroke-width .2s var(--ease);
}
.tabbar a:active svg, .tabbar button:active svg { transform: scale(.84); }
.tabbar .is-active { color: var(--accent); }
.tabbar .is-active svg { stroke-width: 2.1; }

/* --------------------------------------------------------------- hero -- */
.hero { padding: var(--sp-5) 0 0; }
.hero__inner { display: grid; gap: var(--sp-4); }

.eyebrow { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-mute); }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }

.hero__title {
  font-size: var(--t-4xl); line-height: 1.06; letter-spacing: -.03em;
  font-weight: 600; text-wrap: balance; max-width: 16ch;
  margin: var(--sp-3) 0 var(--sp-4);
}
.hero__title em { font-style: italic; font-weight: 500; color: var(--accent); }

.hero__lede {
  font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text);
  font-size: var(--t-md); line-height: 1.6; color: var(--text-dim); max-width: 52ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: var(--sp-5); }

.hero__stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: var(--sp-5); border-top: 1px solid var(--rule);
}
.hero__stats > div { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule-soft); }
/* only the trailing cell of each row takes a divider — `div + div` gave the
   first cell of row two a stray left border and knocked it out of alignment */
.hero__stats > div:nth-child(even) { border-left: 1px solid var(--rule-soft); padding-left: var(--sp-4); }
.hero__stats dt { color: var(--text-mute); }
.hero__stats dd {
  margin-top: .3rem;
  font-family: var(--f-display); font-variation-settings: "opsz" 48;
  font-size: clamp(1.625rem, 1.2rem + 2.2vw, 2.75rem); font-weight: 600;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  /* line-height:1 shaved the bottom off every Fraunces numeral */
  line-height: 1.12;
}

/* the spectrum rule under the masthead of the paper */
.spectrum-bar { display: flex; height: 3px; margin-top: var(--sp-6); }
.spectrum-bar i { flex: 1; transform: scaleX(0); transform-origin: left; animation: barIn .9s var(--ease-out) forwards; }
.spectrum-bar i:nth-child(1) { background: #5D4494; animation-delay: .04s; }
.spectrum-bar i:nth-child(2) { background: #2C3970; animation-delay: .1s; }
.spectrum-bar i:nth-child(3) { background: #1A5F5B; animation-delay: .16s; }
.spectrum-bar i:nth-child(4) { background: #256B4C; animation-delay: .22s; }
.spectrum-bar i:nth-child(5) { background: #8A6624; animation-delay: .28s; }
.spectrum-bar i:nth-child(6) { background: #A93C24; animation-delay: .34s; }
.spectrum-bar i:nth-child(7) { background: #8C1D3F; animation-delay: .4s; }
@keyframes barIn { to { transform: scaleX(1); } }

/* ------------------------------------------------------------- ticker -- */
.ticker {
  background: var(--ink); color: var(--on-ink);
  padding: .8125rem 0; overflow: hidden; line-height: 1.3;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.ticker__track { display: flex; gap: 2.5rem; width: max-content; animation: marquee 62s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.ticker__item { display: inline-flex; align-items: center; gap: .625rem; font-size: var(--t-sm); white-space: nowrap; opacity: .86; transition: opacity .18s var(--ease); }
.ticker__item:hover { opacity: 1; }
.ticker__topic { color: var(--band); }

/* ------------------------------------------------------------ controls -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8125rem 1.375rem; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text);
  font-size: var(--t-sm); font-weight: 600; letter-spacing: -.005em;
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease), transform .16s var(--ease-spring), border-color .2s var(--ease);
}
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { background: var(--rule); }
.btn:active { transform: scale(.97); }

.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost { background: transparent; border-color: var(--rule); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--text-mute); }
.btn--ink { background: var(--ink); color: var(--on-ink); }
.btn--ink:hover { background: var(--accent); color: var(--on-accent); }
.btn--lg { padding: 1rem 1.75rem; font-size: var(--t-base); }
.btn--block { display: flex; width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .5rem; border-radius: var(--r-xs);
  background: var(--surface-2); color: var(--text-dim);
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background .18s var(--ease), color .18s var(--ease);
}
a.chip:hover { background: var(--accent); color: var(--on-accent); }
.chip--hot { background: var(--accent); color: var(--on-accent); }
.chip--ghost { background: none; padding-inline: 0; color: var(--text-mute); }

.kicker {
  display: inline-block; padding: .3rem .55rem; border-radius: var(--r-xs);
  background: var(--accent); color: var(--on-accent);
}

.iconbtn {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: var(--r-full); color: var(--text-mute); background: transparent;
  transition: color .18s var(--ease), background .18s var(--ease), transform .16s var(--ease-spring);
}
.iconbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.iconbtn:hover { color: var(--text); background: var(--surface-2); }
.iconbtn:active { transform: scale(.86); background: var(--surface-2); }
.iconbtn.is-on { color: var(--accent); }
.iconbtn.is-on svg { fill: var(--accent); }

/* segmented control — the app's sort switch */
.segment, .railbar__sort {
  position: relative; display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--r-full); background: var(--surface-2);
}
.sortbtn {
  position: relative; z-index: 1;
  padding: .4375rem .875rem; border-radius: var(--r-full);
  font-size: var(--t-sm); font-weight: 600; color: var(--text-mute);
  transition: color .2s var(--ease);
}
.sortbtn:hover { color: var(--text); }
.sortbtn.is-active { color: var(--on-accent); }
.railbar__sort::after {
  content: ""; position: absolute; z-index: 0; top: 3px; bottom: 3px;
  left: var(--seg-x, 3px); width: var(--seg-w, 0);
  border-radius: var(--r-full); background: var(--accent);
  transition: left .34s var(--ease-spring), width .34s var(--ease-spring);
}

.pill {
  display: inline-flex; align-items: center; gap: .375rem; white-space: nowrap;
  padding: .5rem .875rem; border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--rule);
  font-size: var(--t-sm); font-weight: 500; color: var(--text-dim);
  transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), transform .16s var(--ease-spring);
}
.pill i { font-style: normal; font-size: var(--t-2xs); font-weight: 600; color: var(--text-mute); }
.pill:hover { color: var(--text); border-color: var(--band); }
.pill:active { transform: scale(.96); }
.pill.is-active { background: var(--band); border-color: var(--band); color: #fff; }
.pill.is-active i { color: rgba(255, 255, 255, .75); }

.loader { display: flex; gap: .375rem; }
.loader i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: bounce .9s var(--ease) infinite; }
.loader i:nth-child(2) { background: var(--brass); animation-delay: .12s; }
.loader i:nth-child(3) { background: var(--text-mute); animation-delay: .24s; }
@keyframes bounce { 0%, 100% { transform: translateY(0); opacity: .3; } 50% { transform: translateY(-7px); opacity: 1; } }

.meter { display: block; width: 76px; height: 3px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; width: var(--heat, 20%); background: var(--band); }
.meter--lg { width: 170px; height: 5px; }
.meter--sm { width: 40px; }

/* --------------------------------------------------------- section head */
.sechead {
  display: grid; gap: .5rem; margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3); border-bottom: 2px solid var(--text);
}
.sechead__num { color: var(--accent); }
.sechead__title { font-size: var(--t-2xl); line-height: 1.02; }
.sechead__note {
  font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text);
  font-size: var(--t-md); color: var(--text-dim); max-width: 60ch; line-height: 1.55;
}

/* ------------------------------------------------------- the front page */
.frontpage { padding: var(--sp-7) 0 var(--sp-6); }
.frontpage__grid { display: grid; gap: var(--sp-6); }
/* On a phone the paper reads lead first, then the ranked rail, then the
   briefs — the printed column order only makes sense once there are columns. */
.frontpage__lead { order: -1; }
.frontpage__briefs { order: 1; }

/* left rail: text-only briefs, separated by rules like set type */
.briefs { display: grid; }
.brief { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.briefs > .brief:first-child { padding-top: 0; }
.brief__title { font-size: 1.3125rem; line-height: 1.2; letter-spacing: -.012em; transition: color .2s var(--ease); }
.brief:hover .brief__title { color: var(--accent); }
.brief__summary {
  margin-top: .5rem; font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text);
  font-size: var(--t-base); line-height: 1.55; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.brief__meta { margin-top: .5rem; display: flex; align-items: center; gap: .4rem; font-size: var(--t-xs); color: var(--text-mute); }
.brief__meta b { color: var(--accent); font-weight: 600; }

/* centre: the lead story */
.lead {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.lead:hover { box-shadow: var(--shadow-2); }
.lead__media { position: relative; display: block; aspect-ratio: 21 / 9; overflow: hidden; background: var(--surface-2); }
.lead__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.lead:hover .lead__media img { transform: scale(1.04); }
.lead__badge { position: absolute; left: var(--sp-4); top: var(--sp-4); }
.lead__body { padding: var(--sp-5); display: grid; gap: .75rem; }
.lead__title { font-size: var(--t-2xl); line-height: 1.08; letter-spacing: -.02em; }
.lead__title a { background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .45s var(--ease-out); }
.lead__title a:hover { background-size: 100% 1px; }
.lead__summary { font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); font-size: var(--t-md); line-height: 1.55; color: var(--text-dim); }
.lead__foot { display: flex; align-items: center; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--rule-soft); }
.byline { font-size: var(--t-xs); color: var(--text-mute); }
.byline b { color: var(--accent); font-weight: 600; }

/* right rail: the ranked list with its tab head */
.ranked { border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.tabs { display: flex; border-bottom: 1px solid var(--rule); }
.tab {
  flex: 1; padding: .875rem .5rem; position: relative;
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); transition: color .2s var(--ease);
}
.tab::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ease-out); }
.tab.is-active { color: var(--accent); }
.tab.is-active::after { transform: scaleX(1); }
.ranked__list { display: grid; }
.ranked__list[hidden] { display: none; }
.rank { display: grid; grid-template-columns: 2.5rem 1fr; gap: .75rem; padding: .875rem var(--sp-4); border-bottom: 1px solid var(--rule-soft); transition: background .2s var(--ease); }
.rank:last-child { border-bottom: 0; }
.rank:hover { background: var(--surface-2); }
.rank__n {
  font-family: var(--f-display); font-variation-settings: "opsz" 48;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--text-mute); opacity: .55; line-height: 1; text-transform: none;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}
.rank:hover .rank__n { color: var(--brass); opacity: 1; }
.rank__title { display: block; font-size: 1.0625rem; line-height: 1.28; }
.rank__meta { display: block; margin-top: .3rem; font-size: var(--t-xs); color: var(--text-mute); }

/* newsletter / install box, straight from the printed page */
.subscribe {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--text); border-radius: var(--r-md);
  display: grid; gap: .5rem;
}
.subscribe h3 { font-family: var(--f-display); font-variation-settings: "opsz" 20; font-size: 1.25rem; font-weight: 600; line-height: 1.15; }
.subscribe p { font-size: var(--t-sm); color: var(--text-dim); }
.subscribe__row { display: flex; gap: .5rem; margin-top: .25rem; }
.subscribe__row .btn { flex: 1; }

/* -------------------------------------------------------------- cards -- */
.edition, .stream, .analysis, .ritual, .cta, .archive, .engine { padding: var(--sp-9) 0; }
.stream--tight { padding-top: var(--sp-7); }
/* the front page already ends on a rule of white space */
.frontpage + .stream { padding-top: var(--sp-6); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--sp-5) var(--sp-4); }
/* summaries are raw feed text and regularly contain a bare URL */
.card__summary, .brief__summary, .lead__summary, .rank__title, .card__title { overflow-wrap: anywhere; }

/* The art on every card is generated abstract colour, not photography — it
   sets a band and a mood and carries no information. So it gets a band of the
   card, never the top half of it, and the headline gets the weight. */
.card { position: relative; display: flex; flex-direction: column; background: none; transition: transform .25s var(--ease); }
.card:active { transform: scale(.99); }
.card__media {
  position: relative; display: block; aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: var(--r-md); background: var(--surface-2);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.card:hover .card__media img { transform: scale(1.05); }
.card__topic {
  position: absolute; left: .5rem; top: .5rem;
  padding: .25rem .5rem; border-radius: var(--r-xs);
  background: var(--band); color: #fff;
  font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
/* the score is a footnote on the art, not a second headline */
.card__heat {
  position: absolute; right: .5rem; bottom: .5rem;
  display: flex; align-items: center; gap: .35rem;
  padding: .2rem .4rem; border-radius: var(--r-xs);
  background: rgba(14, 12, 19, .55); color: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.card__heat i { width: 22px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); position: relative; }
.card__heat i::after { content: ""; position: absolute; inset: 0; width: var(--heat, 30%); background: currentColor; border-radius: 2px; }
.card__heat b { font-size: var(--t-2xs); font-weight: 700; }

.card__body { display: flex; flex-direction: column; gap: .4rem; padding: .875rem 0 0; flex: 1; min-width: 0; }
.card__kicker { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; color: var(--text-mute); }
.card__band { display: none; color: var(--band); font-weight: 700; }
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--band); flex: none; }
.card__title { font-size: 1.1875rem; line-height: 1.24; letter-spacing: -.008em; transition: color .2s var(--ease); }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title { color: var(--accent); }
.card__summary {
  font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text);
  font-size: var(--t-base); line-height: 1.5; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__foot { display: flex; align-items: center; gap: .5rem; margin-top: auto; padding-top: .6rem; }
.card__foot .iconbtn, .card__foot a { position: relative; z-index: 2; }
.card__spacer { flex: 1; }

.card--slim { flex-direction: row; gap: .875rem; align-items: flex-start; }
.card--slim .card__media { width: 38%; flex: none; aspect-ratio: 4 / 3; }
.card--slim .card__summary { display: none; }
.card--slim .card__body { padding: 0; }

/* feature card keeps the old class name used by other views */
.feature { position: relative; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; display: grid; }
.feature__media { overflow: hidden; aspect-ratio: 21 / 9; background: var(--surface-2); }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: var(--sp-5); display: grid; gap: .75rem; align-content: start; }
.feature__title { font-size: var(--t-xl); line-height: 1.1; }
.feature__summary { font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); font-size: var(--t-md); color: var(--text-dim); }
.feature__foot { display: flex; align-items: center; gap: .75rem; }

/* ---------------------------------------------------------------- rail -- */
.railbar {
  position: sticky; top: var(--chrome-h); z-index: 100;
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5); padding: .625rem 0;
  background: var(--bg); border-bottom: 1px solid var(--rule);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .railbar {
    background: color-mix(in srgb, var(--bg) 80%, transparent);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  }
}
.railbar__topics {
  display: flex; gap: .375rem; flex: 1; min-width: 0; padding: 2px 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.railbar__topics > * { scroll-snap-align: start; }
.railbar__topics::-webkit-scrollbar { display: none; }
.railbar__topics--static { flex-wrap: wrap; overflow: visible; margin-top: var(--sp-4); }
/* the sort switch must not be squeezed by a long topic rail */
.railbar__sort { flex: none; }

.stream__foot { display: grid; place-items: center; gap: var(--sp-4); margin-top: var(--sp-6); }
.stream__end { color: var(--text-mute); }

/* --------------------------------------------------------------- bars -- */
.bars { display: grid; }
.bars__row { display: grid; grid-template-columns: minmax(5.5rem, 8rem) 1fr auto; align-items: center; gap: var(--sp-4); padding: .8rem 0; border-bottom: 1px solid var(--rule-soft); }
.bars__label { font-size: var(--t-base); font-weight: 600; transition: color .18s var(--ease); }
.bars__label:hover { color: var(--band); }
.bars__track { height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; }
.bars__track i { display: block; height: 100%; width: 0; border-radius: var(--r-full); background: var(--band); transition: width 1.2s var(--ease-out); }
.reveal.is-in .bars__track i { width: var(--w); }
@supports (animation-timeline: view()) {
  .bars__track i { width: var(--w); animation: growBar linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  @keyframes growBar { from { width: 0; } to { width: var(--w); } }
}
.bars__value { font-size: var(--t-sm); font-weight: 600; color: var(--text-mute); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- ritual -- */
.ritual__grid { display: grid; gap: var(--sp-4); }
.ritual__card { padding: var(--sp-5); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); transition: border-color .25s var(--ease); }
.ritual__card:hover { border-color: var(--text-mute); }
.ritual__eyebrow { color: var(--text-mute); }
.ritual__big {
  display: flex; align-items: baseline; gap: .5rem; margin: .5rem 0;
  font-family: var(--f-display); font-variation-settings: "opsz" 56;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem); font-weight: 600;
  letter-spacing: -.04em; line-height: 1;
}
.ritual__big small { font-family: var(--f-ui); font-size: .8125rem; font-weight: 600; color: var(--text-mute); letter-spacing: .06em; }
.ritual__note { font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); color: var(--text-dim); font-size: var(--t-sm); line-height: 1.5; }
.ritual__title { font-size: var(--t-lg); margin: .25rem 0 .5rem; }
.ritual__card--wide { display: grid; align-content: center; }
.ritual__card--wide .btn { justify-self: start; margin-top: var(--sp-4); }
.ritual__flames { display: flex; gap: 3px; margin-top: var(--sp-4); }
.ritual__flames i { width: 18px; height: 5px; border-radius: 2px; background: var(--rule); }
.ritual__flames i.on { background: var(--brass); }
.xpbar { display: block; height: 8px; border-radius: var(--r-full); background: var(--surface-2); overflow: hidden; margin: .25rem 0 .75rem; }
.xpbar i { display: block; height: 100%; border-radius: var(--r-full); background: var(--accent); transition: width .9s var(--ease-out); }

/* ---------------------------------------------------------------- cta -- */
.cta__inner {
  display: grid; gap: var(--sp-5); padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-xl); background: var(--ink); color: var(--on-ink);
  position: relative; overflow: hidden;
}
.cta__inner::after {
  content: ""; position: absolute; inset: auto 0 0; height: 3px;
  background: linear-gradient(90deg, #5D4494, #2C3970, #1A5F5B, #256B4C, #8A6624, #A93C24, #8C1D3F);
}
.cta__title { font-size: var(--t-xl); }
.cta__note { margin-top: .5rem; font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); color: rgba(242, 239, 233, .78); max-width: 48ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .625rem; align-items: center; }
.cta .btn { background: var(--on-ink); color: var(--ink); }
.cta .btn:hover { background: var(--accent); color: var(--on-accent); }
.cta .btn--ghost { background: transparent; color: var(--on-ink); border-color: rgba(242, 239, 233, .3); }
.cta .btn--ghost:hover { background: rgba(242, 239, 233, .12); border-color: var(--on-ink); color: var(--on-ink); }

/* ----------------------------------------------------------- pagehead -- */
.pagehead { padding: var(--sp-7) 0 var(--sp-5); }
.pagehead--center { text-align: center; }
.pagehead--center .railbar__topics { justify-content: center; }
.pagehead__title { font-size: var(--t-3xl); line-height: 1; margin: var(--sp-3) 0; text-wrap: balance; }
.pagehead__note { font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); font-size: var(--t-md); color: var(--text-dim); max-width: 56ch; }
.pagehead--center .pagehead__note { margin-inline: auto; }
.pagehead__tools { display: flex; gap: .625rem; margin-top: var(--sp-4); flex-wrap: wrap; }
.pagehead--center .pagehead__tools { justify-content: center; }

.searchbox {
  display: flex; align-items: center; gap: .625rem;
  margin-top: var(--sp-4); padding: .375rem .375rem .375rem 1rem;
  border: 1px solid var(--rule); border-radius: var(--r-full);
  background: var(--surface); max-width: 40rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.searchbox:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.searchbox svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--text-mute); stroke-width: 1.8; stroke-linecap: round; }
/* under 16px iOS zooms the viewport on focus and never zooms back */
.searchbox input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: max(1rem, var(--t-base)); padding: .55rem 0; }
.searchbox input::placeholder { color: var(--text-mute); }

.empty { text-align: center; padding: var(--sp-8) 0; display: grid; gap: .75rem; justify-items: center; }
.empty__glyph { font-size: 2.25rem; color: var(--brass); }
.empty h2 { font-size: var(--t-lg); }
.empty p { font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); color: var(--text-dim); max-width: 42ch; }

/* -------------------------------------------------------------- story -- */
/* A banner, not a hero: the cover is generated texture, so it sets the band
   colour and then gets out of the headline's way. */
.story__cover { position: relative; height: clamp(120px, 19vh, 210px); overflow: hidden; background: var(--surface-2); }
.story__cover img { width: 100%; height: 100%; object-fit: cover; }
/* The headline sits over the lower third of the banner, so the veil has to be
   near-opaque by the time it gets there — a fade that only lands at 96% left
   the breadcrumbs sitting on raw gradient. */
.story__cover-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 10%, var(--bg) 88%);
  background: linear-gradient(180deg,
    rgba(0, 0, 0, .04) 12%,
    color-mix(in srgb, var(--bg) 55%, transparent) 58%,
    var(--bg) 92%);
}
.story__head { position: relative; margin-top: clamp(-4rem, -6vw, -2.5rem); z-index: 2; }
.crumbs { display: flex; gap: .4rem; color: var(--text-mute); }
.crumbs a:hover { color: var(--accent); }
/* headlines out of a feed run long; 20ch of --t-3xl turned a wire story into
   eight lines of 70px type */
.story__title { margin: var(--sp-3) 0; font-size: clamp(2rem, 1.5rem + 2.1vw, 3.25rem); line-height: 1.08; letter-spacing: -.02em; max-width: 26ch; text-wrap: balance; }
.story__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--text-mute); }
.story__meta strong { color: var(--accent); }
.story__heat { display: flex; align-items: center; gap: .75rem; margin-top: var(--sp-4); }
.story__heat-label { font-size: var(--t-xs); color: var(--text-mute); letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.story__heat-label b { color: var(--brass); }

.story__body { display: grid; gap: var(--sp-6); margin-block: var(--sp-6) var(--sp-8); }
.story__lede {
  font-family: var(--f-display); font-variation-settings: "opsz" 20;
  font-size: clamp(1.125rem, 1rem + .55vw, 1.4375rem); line-height: 1.5; color: var(--text);
}
.story__hint { margin: var(--sp-4) 0 var(--sp-5); font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); color: var(--text-dim); }
.story__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: var(--sp-5); }

.story__rail { display: grid; gap: var(--sp-4); align-content: start; }
.panel { padding: var(--sp-4); border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--surface); display: grid; gap: .625rem; }
.panel--muted { background: none; }
.panel__title { color: var(--text-mute); }

.reactions { display: grid; gap: .375rem; }
.react {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .75rem; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text-dim); font-size: var(--t-sm);
  transition: background .18s var(--ease), color .18s var(--ease), transform .16s var(--ease-spring);
}
.react:hover { color: var(--text); background: var(--rule); }
.react:active { transform: scale(.98); }
.react__glyph { font-size: .9375rem; color: var(--accent); }
.react__label { flex: 1; text-align: left; }
.react__count { font-size: var(--t-xs); font-weight: 600; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.react.is-on { background: var(--accent); color: var(--on-accent); }
.react.is-on .react__glyph, .react.is-on .react__count { color: var(--on-accent); }

.deflist { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; font-size: var(--t-sm); }
.deflist dt { font-size: var(--t-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute); }
.deflist dd { color: var(--text-dim); text-align: right; }

/* ------------------------------------------------------------ archive -- */
.day { margin-bottom: var(--sp-7); }
.day__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding-bottom: .625rem; border-bottom: 2px solid var(--text); position: sticky; top: var(--chrome-h); background: var(--bg); z-index: 20; }
.day__date { display: flex; align-items: baseline; gap: .5rem; font-family: var(--f-display); font-variation-settings: "opsz" 48; }
.day__date b { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); font-weight: 600; letter-spacing: -.03em; }
.day__date span { font-family: var(--f-ui); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--text-mute); }
.day__count { color: var(--text-mute); }
.day__list { display: grid; }
.day__row a { display: grid; grid-template-columns: 6.5rem 1fr; align-items: center; gap: .4rem 1rem; padding: .75rem .5rem; border-bottom: 1px solid var(--rule-soft); border-radius: var(--r-sm); transition: background .18s var(--ease), padding-left .22s var(--ease); }
.day__row a:hover { background: var(--surface); padding-left: .875rem; }
.day__topic { color: var(--band); }
.day__title { font-size: var(--t-base); }
.day__src, .day__row .meter { display: none; }

/* ------------------------------------------------------------- engine -- */
.table { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.table__head, .table__row { display: grid; grid-template-columns: 1.6fr 1.4fr; gap: .25rem 1rem; padding: .8rem 1rem; align-items: center; font-size: var(--t-sm); }
.table__head { display: none; background: var(--surface-2); font-size: var(--t-2xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.table__row { border-top: 1px solid var(--rule-soft); transition: background .18s var(--ease); }
.table__row:hover { background: var(--surface-2); }
.table__row span[role="cell"]:nth-child(n+3) { font-size: var(--t-xs); color: var(--text-mute); font-variant-numeric: tabular-nums; }
.table__name { display: grid; }
.table__name b { font-weight: 600; }
.table__name em { font-style: normal; font-size: var(--t-xs); color: var(--text-mute); }
.state { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; }
.state--ok { background: #256B4C; }
.state--down { background: var(--accent); }
.state--idle { background: var(--text-mute); }

.flow { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.flow__step { background: var(--surface); padding: var(--sp-5); display: grid; gap: .4rem; align-content: start; }
.flow__num { color: var(--accent); }
.flow__step h3 { font-size: var(--t-lg); }
.flow__step p { font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); font-size: var(--t-sm); color: var(--text-dim); line-height: 1.5; }

/* ------------------------------------------------------------- footer -- */
.footer { background: var(--ink); color: var(--on-ink); padding: var(--sp-8) 0 var(--sp-5); margin-top: var(--sp-8); }
.footer__grid { display: grid; gap: var(--sp-6); }
.wordmark { font-size: clamp(2.75rem, 2rem + 4.5vw, 5rem); font-weight: 700; letter-spacing: .04em; line-height: .9; text-transform: uppercase; }
.footer__blurb { margin-top: .75rem; font-family: var(--f-display); font-variation-settings: "opsz" var(--opsz-text); color: rgba(242, 239, 233, .74); max-width: 36ch; }
.footer__stamp { margin-top: .75rem; color: rgba(242, 239, 233, .6); }
.footer__col { display: grid; gap: .5rem; align-content: start; }
.footer__col h3 { color: rgba(242, 239, 233, .55); margin-bottom: .25rem; }
.footer__col a, .footer__col button { font-size: var(--t-sm); color: rgba(242, 239, 233, .85); text-align: left; transition: color .18s var(--ease), transform .18s var(--ease); }
/* --accent-deep is a *darker* red in the light theme, which vanished against
   the always-dark footer. The on-ink accent is the one that works in both. */
.footer__col a:hover, .footer__col button:hover { color: var(--accent-on-ink); transform: translateX(3px); }
.footer__base { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid rgba(242, 239, 233, .16); font-size: var(--t-xs); color: rgba(242, 239, 233, .6); }
.footer__spectrum { display: flex; gap: 2px; }
.footer__spectrum i { width: 20px; height: 3px; border-radius: 2px; }
.footer__spectrum i:nth-child(1) { background: #A992E8; }
.footer__spectrum i:nth-child(2) { background: #8092E8; }
.footer__spectrum i:nth-child(3) { background: #4FC0B8; }
.footer__spectrum i:nth-child(4) { background: #5FC894; }
.footer__spectrum i:nth-child(5) { background: #E0B25C; }
.footer__spectrum i:nth-child(6) { background: #F08A6B; }
.footer__spectrum i:nth-child(7) { background: #EE7196; }

/* ------------------------------------------------------------ palette -- */
/* Phone: a full-height sheet that rises from the bottom, so the field lands
   right above the keyboard. Desktop: the usual floating command bar. */
.palette { position: fixed; inset: 0; z-index: 220; display: grid; align-items: end; }
.palette__scrim { position: absolute; inset: 0; background: rgba(10, 8, 14, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
.palette__panel {
  position: relative; width: 100%; height: min(88vh, 88dvh);
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--surface); overflow: hidden; box-shadow: var(--shadow-2);
  padding-bottom: var(--safe-b);
  animation: sheetUp .34s var(--ease-out);
}
@keyframes paletteIn { from { opacity: 0; transform: translateY(-10px) scale(.99); } }
.palette__field { display: flex; align-items: center; gap: .625rem; padding: .875rem 1rem; border-bottom: 1px solid var(--rule); flex: none; }
.palette__field svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--text-mute); stroke-width: 1.8; stroke-linecap: round; }
/* 16px minimum or iOS zooms the whole page on focus */
.palette__field input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: max(1rem, var(--t-md)); }
.palette__field kbd { display: none; font-size: var(--t-2xs); font-weight: 600; padding: .15rem .35rem; border: 1px solid var(--rule); border-radius: 4px; color: var(--text-mute); }
.palette__results { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .375rem; -webkit-overflow-scrolling: touch; }
.palette__row { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 46px; padding: .625rem .75rem; border-radius: var(--r-sm); text-align: left; transition: background .14s var(--ease); }
.palette__row:active { background: var(--rule); }
.palette__row.is-sel, .palette__row:hover { background: var(--surface-2); }
.palette__row b { font-weight: 500; font-size: var(--t-sm); flex: 1; }
.palette__row em { font-style: normal; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.palette__row span { font-size: var(--t-2xs); color: var(--text-mute); }
.palette__empty { padding: var(--sp-6) 1rem; text-align: center; color: var(--text-mute); font-family: var(--f-display); }
.palette__foot { display: none; gap: 1rem; padding: .625rem 1rem; border-top: 1px solid var(--rule); font-size: var(--t-2xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); flex: none; }
.palette__foot kbd { border: 1px solid var(--rule); border-radius: 4px; padding: 0 .25rem; margin-right: .2rem; }
.palette__foot span:last-child { margin-left: auto; }

/* ------------------------------------------------------------- toasts -- */
.toasts { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 210; display: grid; gap: .5rem; width: min(92vw, 23rem); }
.toast {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem; border-radius: var(--r-full);
  background: var(--ink); color: var(--on-ink);
  font-size: var(--t-sm); box-shadow: var(--shadow-2);
  animation: toastIn .35s var(--ease-spring);
}
.toast i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); flex: none; }
.toast.is-out { animation: toastOut .3s var(--ease) forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* --------------------------------------------------------- breakpoints -- */
@media (max-width: 719px) {
  /* the tab bar owns the bottom of the screen */
  body { padding-bottom: calc(var(--tabbar-h) + var(--safe-b)); }
  /* a phone reads the edition, it does not read a masthead: trim the display
     type so the lead story is above the fold instead of three rules below it */
  .hero { padding-top: var(--sp-4); }
  .hero__title { font-size: clamp(2.125rem, 1.55rem + 3.4vw, 2.75rem); max-width: 18ch; }
  .hero__lede { font-size: var(--t-base); }
  .frontpage { padding-top: var(--sp-5); }
  .sechead { margin-bottom: var(--sp-4); }
  .edition, .stream, .analysis, .ritual, .cta, .archive, .engine { padding: var(--sp-7) 0; }
  .cta__inner { padding: var(--sp-6) var(--sp-5); }
  .lead__body, .feature__body { padding: var(--sp-4); }
  .footer { margin-top: var(--sp-7); padding-top: var(--sp-7); }
  /* full-bleed lead art reads as a card in an app, not a framed print */
  .lead { border-radius: var(--r-md); }
  .subscribe__row .btn { padding-inline: .875rem; }
  /* a broadsheet drop cap on a 390px column costs eight lines before the
     first sentence — bring the display sizes back to phone scale */
  .pagehead { padding: var(--sp-5) 0 var(--sp-4); }
  .pagehead__title { font-size: clamp(2.125rem, 1.6rem + 3vw, 2.75rem); }
  .story__cover { height: clamp(150px, 24vh, 220px); }
  .story__title { font-size: clamp(1.75rem, 1.35rem + 2.4vw, 2.25rem); max-width: none; }
  .story__body { gap: var(--sp-5); margin-block: var(--sp-5) var(--sp-7); }
  .story__lede { font-size: 1.0625rem; }
  .day__head { padding-top: .5rem; }
  /* The filter rail and the sort switch cannot share 390px — the topics got
     squeezed to a chip and a half. Give each a line, and stop pinning it: two
     stacked sticky bars under the masthead would eat a quarter of the screen. */
  .railbar { position: static; flex-wrap: wrap; gap: .625rem; padding-bottom: .75rem; }
  .railbar__topics { flex: 1 0 100%; }
  .railbar__sort { margin-left: auto; }
  /* The feed on a phone is a list of headlines with a thumbnail beside them —
     a column of posters buries three quarters of the stories below the fold. */
  /* minmax(0,1fr), not 1fr: the automatic min-content floor lets one summary
     containing a bare URL widen the whole column and shove the thumbnail off
     the screen */
  .grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .grid > .card {
    flex-direction: row-reverse; align-items: flex-start; gap: .875rem;
    padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule-soft);
  }
  .grid > .card:first-child { padding-top: 0; }
  .grid > .card .card__media { width: 92px; flex: none; aspect-ratio: 1; border-radius: var(--r-sm); }
  .grid > .card .card__topic, .grid > .card .card__heat { display: none; }
  .grid > .card .card__band { display: inline; }
  .grid > .card .card__body { padding: 0; }
  /* band + source + age has to survive in ~248px, so lose the wide tracking */
  .grid > .card .card__kicker { gap: .3rem; letter-spacing: .07em; }
  .grid > .card .card__title { font-size: 1.125rem; }
  .grid > .card .card__summary { font-size: var(--t-sm); -webkit-line-clamp: 2; }
  .grid > .card .card__foot { padding-top: .5rem; }
  /* the lead keeps its picture, at a third of the height it used to take */
  .lead__media { aspect-ratio: 2 / 1; }
  .lead__title { font-size: var(--t-xl); }
  /* the command sheet gets the same grabber as the sections sheet */
  .palette__panel::before {
    content: ""; width: 40px; height: 5px; border-radius: var(--r-full);
    background: var(--rule); margin: .625rem auto .25rem; flex: none;
  }
}

@media (min-width: 600px) {
  .hero__stats { grid-template-columns: repeat(4, 1fr); }
  .hero__stats > div:nth-child(even) { border-left: 0; padding-left: 0; }
  .hero__stats > div + div { border-left: 1px solid var(--rule-soft); padding-left: var(--sp-4); }
  .day__row a { grid-template-columns: 6.5rem 1fr auto; }
  .day__src { display: block; font-size: var(--t-xs); color: var(--text-mute); }
  .grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
}

@media (min-width: 720px) {
  .tabbar { display: none; }
  .utility { display: flex; }
  .masthead__start { display: flex; }
  .masthead__search { display: flex; }
  .brand__type em { display: block; }
  .masthead.is-stuck .brand__type em { display: none; }
  /* the centred broadsheet wordmark only exists once there is room for it */
  .masthead__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-4); }
  .masthead__start { grid-column: 1; }
  .brand { grid-column: 2; justify-self: center; margin-right: 0; }
  .brand__type { justify-items: center; }
  .masthead__tools { grid-column: 3; justify-self: end; gap: .25rem; }
  /* `safe center` degrades to start when the rail overflows, so a tablet does
     not centre the row and push the first section off the left edge */
  .masthead__nav .shell { justify-content: center; justify-content: safe center; }
  .navlink--more { display: none; }
  .palette { place-items: start center; padding: clamp(.75rem, 7vh, 5rem) 1rem; align-items: start; }
  .palette__panel {
    width: min(100%, 37rem); height: auto; max-height: min(76vh, 40rem);
    border: 1px solid var(--rule); border-radius: var(--r-lg);
    padding-bottom: 0; animation: paletteIn .3s var(--ease-out);
  }
  .palette__field kbd { display: block; }
  .palette__foot { display: flex; }
  .ritual__grid { grid-template-columns: repeat(2, 1fr); }
  .ritual__card--wide { grid-column: 1 / -1; }
  .cta__inner { grid-template-columns: 1.5fr auto; align-items: center; }
  .flow { grid-template-columns: repeat(2, 1fr); }
  .table__head { display: grid; }
  .table__head, .table__row { grid-template-columns: 1.7fr 1.5fr .6fr .5fr .8fr; }
  .day__row a { grid-template-columns: 6.5rem 1fr auto auto; }
  .day__row .meter { display: block; }
  .frontpage__grid { grid-template-columns: 1fr 1fr; }
  .frontpage__lead { grid-column: 1 / -1; }
  .subscribe { margin-top: var(--sp-5); }
}

@media (min-width: 1000px) {
  .masthead__nav { border-top: 1px solid var(--rule); }
  .masthead__nav .shell { mask-image: none; -webkit-mask-image: none; }
  .navlink + .navlink::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 11px; background: var(--rule);
  }
  .frontpage__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.55fr) minmax(0, .95fr); align-items: start; }
  .frontpage__lead { grid-column: auto; order: 0; }
  .frontpage__briefs { order: 0; }
  .frontpage__briefs { border-right: 1px solid var(--rule); padding-right: var(--sp-5); }
  .frontpage__ranked { border-left: 1px solid var(--rule); padding-left: var(--sp-5); }
  .story__body { grid-template-columns: minmax(0, 1.7fr) minmax(15rem, .9fr); }
  .ritual__grid { grid-template-columns: repeat(3, 1fr); }
  .ritual__card--wide { grid-column: auto; }
  .footer__grid { grid-template-columns: 1.5fr repeat(3, minmax(0, .8fr)); }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .hero__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; gap: var(--sp-7); }
  .hero__stats { margin-top: 0; }
}

/* ------------------------------------------------------------ a11y/print */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .ticker__track { animation: none; }
  .spectrum-bar i { transform: scaleX(1); }
}

@media print {
  .masthead, .utility, .footer, .scroll-rail, .ticker, .palette, .toasts, .drawer, .tabbar { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .card, .lead, .feature { break-inside: avoid; }
}