/* ==========================================================================
   XT.PT — consolidated stylesheet
   Tokens and components recreated from the design prototype (canonical options
   2a, 2b, 1c, 4a, 5a, 3a, 3b, 2c, 6a–6d, 1e). No border radius anywhere except
   avatars and the live dot. No shadows — depth is rules and band alternation.
   ========================================================================== */

:root {
  --ink:        #0E0F11;
  --ink-2:      #1A1C20;
  --ink-3:      #3A3D43;
  --ink-4:      #43474E;
  --paper:      #F6F5F2;
  --paper-2:    #EEECE7;
  --paper-3:    #E9E7E1;
  --rule:       #D5D2CA;
  --rule-2:     #E2DFD8;
  --mute:       #6B7280;
  --mute-2:     #9AA0AA;
  --mute-3:     #C3C7CE;
  --mute-4:     #5A5E66;          /* card/list summary copy */
  --signal:     #1636E0;
  --signal-ink: #0E2299;
  --signal-tint:#DFE6FF;
  --live:       #1EFC8C;
  --warn:       #C3773A;
  --dark-rule:  #33373D;
  --dark-field: #1C1E22;

  /* 'XT Glyphs' only carries the chrome characters — see fonts.css. */
  --sans:  Archivo, 'XT Glyphs', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', 'XT Glyphs', ui-monospace, Menlo, monospace;
  --serif: 'Source Serif 4', 'XT Glyphs', Georgia, serif;

  --gutter: 32px;
  --page:   1280px;
  --measure: 700px;

  --t: 120ms ease-out;
}

/* ------------------------------------------------------------------ base */

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

/* A component's own display rule must not defeat the hidden attribute. */
[hidden] { display: none !important; }
/* Safety net: no stray element may ever hand the page a horizontal scrollbar.
   clip (not hidden) so position:sticky keeps working. Real offenders still
   get fixed at the source — this catches the next regression politely. */
html, body { overflow-x: clip; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--serif);
  -webkit-font-smoothing: antialiased;
}

/* Editor-inserted links must never render browser blue. */
a { color: var(--signal); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--signal-ink); }

h1, h2, h3, h4, h5, h6, p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
input { font: inherit; }

/* Headline links inherit ink and go signal on hover. */
.lnk { color: inherit; }
.lnk:hover { color: var(--signal); }

.anchor { display: block; height: 0; scroll-margin-top: 72px; }

/* Detail that the 390px layouts drop. */
.wide-only { display: inline; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font: 600 11px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
}
.skip:focus { left: 0; color: var(--paper); }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Image placeholders — also the CMS's empty-image state. */
.ph {
  background-color: #DEDBD4;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.055) 0 1px, transparent 1px 7px);
}
.ph--dark {
  background-color: var(--dark-field);
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 1px, transparent 1px 7px);
}
.ph--label { padding: 12px; }
.ph__tag {
  font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); background: var(--paper); padding: 4px 7px; display: inline-block;
}

/* ------------------------------------------------------------- structure */

.page { max-width: var(--page); margin: 0 auto; background: var(--paper); }
.band { padding: 30px var(--gutter) 34px; }
.band--ink { background: var(--ink); color: var(--paper); padding: 30px var(--gutter) 36px; }
.band--alt { background: var(--paper-2); border-top: 1px solid var(--rule); }
.band--wide { padding-left: 40px; padding-right: 40px; }

/* Section header rule: 2px ink, Plex Mono label. */
.rule-head {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 2px solid var(--ink); padding-bottom: 9px;
}
.rule-head__label {
  font: 700 12px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.rule-head__note { font: 500 10.5px/1 var(--mono); color: var(--mute); }
.rule-head__end { margin-left: auto; display: flex; gap: 7px; align-items: center; }
.band--ink .rule-head { border-bottom: 1px solid var(--dark-rule); }
.band--ink .rule-head__label { color: var(--paper); }
.band--ink .rule-head__note { color: var(--mute-2); }

/* h2 inside long-form copy */
.rule-h {
  font: 700 15px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--ink);
  padding-bottom: 9px; margin: 0 0 12px;
}

/* ---------------------------------------------------------------- chrome */

.utility {
  background: var(--ink); color: var(--paper);
  height: 34px; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  font: 500 10.5px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase;
}
.utility__left { display: flex; gap: 22px; align-items: center; }
.utility__right { display: flex; gap: 18px; color: var(--mute-2); }
.utility__stamp { color: var(--mute-2); }
.utility a { color: var(--paper); }
.utility a:hover { color: var(--live); }

.live { display: flex; align-items: center; gap: 6px; }
.live__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--live); display: block;
}

.masthead {
  padding: 26px var(--gutter) 18px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.lockup { display: flex; align-items: flex-end; gap: 14px; }
.lockup__xt {
  font: 900 62px/0.78 var(--sans); letter-spacing: -.05em; color: var(--ink);
}
.lockup__stack {
  display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px;
}
.lockup__pt { font: 700 11px/1 var(--mono); letter-spacing: .16em; color: var(--signal); }
.lockup__desc {
  font: 500 10px/1 var(--mono); letter-spacing: .1em;
  color: var(--mute); text-transform: uppercase;
}

.searchfield {
  display: flex; align-items: center; gap: 10px;
  flex: 1; max-width: 380px;
  border-bottom: 1.5px solid var(--ink); padding-bottom: 7px;
}
.searchfield__glyph { font: 500 12px/1 var(--mono); color: var(--ink); }
.searchfield__input {
  flex: 1; border: 0; background: none; padding: 0;
  font: 400 12.5px/1 var(--mono); color: var(--ink);
}
.searchfield__input::placeholder { color: var(--mute-2); }
.searchfield__input:focus { outline: none; }
.searchfield:focus-within { border-bottom-color: var(--signal); }

.nav {
  padding: 0 var(--gutter);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.nav__inner {
  display: flex; gap: 26px; align-items: center; height: 40px;
  font: 600 11px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
}
.nav__item { color: var(--ink-4); }
.nav__item:hover { color: var(--signal); }
.nav__item.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }
.nav__spacer { margin-left: auto; }
.nav__item--util { color: var(--mute); }

/* Inner-page header: wordmark, nav or breadcrumb, actions. */
.topbar {
  background: var(--paper); border-bottom: 1px solid var(--ink);
  padding: 0 40px; height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.topbar--narrow { padding: 0 var(--gutter); }
.lockup--sm { gap: 8px; }
.lockup--sm .lockup__xt { font-size: 26px; line-height: .8; }
.lockup--sm .lockup__pt { font-size: 9px; padding-bottom: 2px; }
.topbar__nav {
  display: flex; gap: 24px;
  font: 600 11px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
}
.crumb {
  font: 500 11px/1 var(--mono); letter-spacing: .09em;
  text-transform: uppercase; color: var(--mute);
}
.topbar__actions {
  display: flex; gap: 12px; align-items: center;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.topbar__search { font: 500 11.5px/1 var(--mono); color: var(--mute); }

.progress { height: 3px; background: var(--rule-2); }
.progress__bar {
  height: 3px; background: var(--signal); width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ------------------------------------------------------- chips & buttons */

.chip {
  font: 500 11px/1 var(--mono); padding: 6px 10px;
  border: 1px solid var(--rule); color: var(--ink-4);
  white-space: nowrap; flex: none; transition: color var(--t), background var(--t), border-color var(--t);
}
.chip:hover { color: var(--signal); border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.is-on:hover { color: var(--paper); }
.chip--outlineink { border-color: var(--ink); color: var(--ink); }

.chiprow {
  padding: 0 var(--gutter); border-bottom: 1px solid var(--rule);
  height: 44px; display: flex; align-items: center; gap: 8px;
}
.chiprow--wide { padding: 0 40px; }
.chiprow--topics { height: 42px; }
.chiprow__label {
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); margin-right: 6px; flex: none;
}
.chiprow__end { margin-left: auto; display: flex; gap: 7px; align-items: center; flex: none; }
.chiprow__sort { font: 500 10.5px/1 var(--mono); color: var(--mute); white-space: nowrap; }

.btn {
  display: inline-block;
  font: 700 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); padding: 11px 16px;
  border: 1px solid var(--ink);
  transition: background var(--t), color var(--t);
}
.btn:hover { background: var(--signal-ink); border-color: var(--signal-ink); color: var(--paper); }
.btn--ghost { background: none; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--sm { padding: 7px 10px; font-size: 10.5px; letter-spacing: .1em; }
.btn--lg { padding: 13px 18px; font-size: 11.5px; letter-spacing: .1em; }
.btn--block { display: block; text-align: center; width: 100%; padding: 14px 0; }

/* Follow toggle — same primitive for section, topic, author, search. */
.follow { display: inline-flex; }
.follow__btn {
  font: 700 11px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase;
  border: 1px solid var(--ink); color: var(--ink); background: none;
  padding: 11px 15px; transition: background var(--t), color var(--t);
}
.follow__btn:hover { background: var(--ink); color: var(--paper); }
.follow__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.kicker {
  font: 600 10px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--signal);
}
.kicker--lg { font-size: 10.5px; letter-spacing: .13em; font-weight: 700; }
.kicker--live { color: var(--live); }
.kickerbar { display: flex; gap: 10px; align-items: center; }
.kickerbar__chip {
  background: var(--signal); color: #fff; padding: 4px 7px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.kickerbar__chip--lg { padding: 5px 8px; font-weight: 700; letter-spacing: .13em; }
.kickerbar__chip--outline {
  background: none; color: var(--ink); border: 1px solid var(--ink); padding: 4px 6px;
}
.kickerbar__meta {
  font: 600 10.5px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
}

.byline {
  display: flex; gap: 14px; align-items: center;
  font: 500 11.5px/1 var(--mono); color: var(--ink-4);
}
.byline__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--rule); display: block; flex: none; object-fit: cover;
}
.byline__name { color: var(--ink); }
.byline__meta { color: var(--mute-2); }

/* ------------------------------------------------------------- home lead */

.lead { display: grid; grid-template-columns: 1fr 336px; gap: 38px; }
.lead__img { height: 330px; }
.lead__kickers { margin: 16px 0 8px; }
.lead__h1 {
  font: 800 46px/1.02 var(--sans); letter-spacing: -.028em; color: var(--ink);
}
.lead__standfirst {
  margin: 14px 0 0; font: 400 18.5px/1.5 var(--serif);
  color: var(--ink-3); max-width: 60ch;
}
.lead__byline { margin-top: 16px; }
.lead__pair {
  margin-top: 24px; border-top: 1px solid var(--rule); padding-top: 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
}

.card2 .ph { height: 120px; }
.card2__kicker { margin: 11px 0 7px; }
.card2__h {
  font: 700 21px/1.14 var(--sans); letter-spacing: -.018em; color: var(--ink);
}
.card2__meta { margin-top: 8px; font: 400 14px/1.45 var(--serif); color: var(--mute-4); }

/* --------------------------------------------------------------- the rail */

.rail { border-left: 1px solid var(--rule); padding-left: 22px; }
.rail__stack { display: flex; flex-direction: column; gap: 20px; }

.wire__head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--ink); padding-bottom: 7px; margin-bottom: 4px;
}
.wire__list { display: flex; flex-direction: column; }
.wire__row {
  display: grid; grid-template-columns: 52px 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--rule-2);
}
.wire__time { font: 500 11px/1.4 var(--mono); color: var(--signal); }
.wire__title { font: 600 14.5px/1.32 var(--sans); color: var(--ink); }
.wire__more {
  margin: 14px 0 22px; display: inline-block;
  font: 600 11px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--signal);
}
.wire__row.is-new { animation: wire-in 400ms ease-out; }
@keyframes wire-in { from { opacity: 0; } to { opacity: 1; } }

.mostread { border-top: 2px solid var(--ink); padding-top: 7px; }
.mostread__row {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--rule-2); align-items: baseline;
}
.mostread__row:last-child { border-bottom: 0; }
.mostread__n { font: 700 15px/1 var(--sans); color: var(--mute-3); }
.mostread__t { font: 600 14px/1.3 var(--sans); color: var(--ink); }

/* Boxed rail modules (section / article / review / index / author rails). */
.box { border: 1px solid var(--rule); padding: 16px; }
.box--ink-frame { border: 1.5px solid var(--ink); background: var(--paper); }
.box__head {
  font: 700 11px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); border-bottom: 1px solid var(--rule); padding-bottom: 9px;
}
.box__row {
  padding: 11px 0; border-bottom: 1px solid var(--rule-2);
  font: 500 12px/1.4 var(--mono); color: var(--ink);
}
.box__row:last-child { border-bottom: 0; }
.box__row span { color: var(--mute); }
.box__note {
  margin-top: 13px; border-top: 1px solid var(--rule); padding-top: 11px;
  font: 400 13.5px/1.5 var(--serif); color: var(--mute-4);
}

.signup { background: var(--ink); color: var(--paper); padding: 18px; }
.signup__h { font: 700 20px/1.15 var(--sans); letter-spacing: -.02em; }
.signup__p { margin: 7px 0 12px; font: 400 14px/1.5 var(--serif); color: var(--mute-2); }
.signup__form { display: flex; }
.signup__input {
  flex: 1; min-width: 0; border: 0; background: var(--dark-field);
  color: var(--paper); padding: 11px 10px; font: 400 11.5px/1 var(--mono);
}
.signup__input::placeholder { color: var(--mute); }
.signup__btn {
  font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--live); color: var(--ink); padding: 11px 12px; border: 0;
}
.signup__btn:hover { background: #17d977; }

/* ----------------------------------------------------------- dark features */

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 22px; }
.feature .ph { height: 150px; }
.feature__kicker { margin: 13px 0 8px; }
.feature__h {
  font: 700 22px/1.12 var(--sans); letter-spacing: -.018em; color: var(--paper);
}
.feature__p { margin-top: 9px; font: 400 14.5px/1.5 var(--serif); color: var(--mute-2); }
.band--ink a.lnk { color: var(--paper); }
.band--ink a.lnk:hover { color: var(--live); }

/* --------------------------------------------------------- latest listing */

.latest { display: flex; flex-direction: column; }
.latest__row {
  display: grid; grid-template-columns: 88px 104px 1fr 150px; gap: 20px;
  align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--rule-2);
}
.latest__time { font: 500 11.5px/1 var(--mono); color: var(--mute-2); }
.latest__cat {
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--signal);
}
.latest__h {
  font: 600 20px/1.22 var(--sans); letter-spacing: -.012em; color: var(--ink);
}
.latest__by { font: 500 11.5px/1 var(--mono); color: var(--mute); text-align: right; }

/* ------------------------------------------------------------ bench cards */

.bench { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 20px; }
.benchcard { background: var(--paper); border: 1px solid var(--rule); }
.benchcard .ph { height: 112px; background-color: var(--rule-2); }
.benchcard__body { padding: 12px 13px 14px; }
.benchcard__top { display: flex; justify-content: space-between; align-items: baseline; }
.benchcard__cat {
  font: 600 10px/1 var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--mute);
}
.benchcard__h { margin-top: 8px; font: 600 16px/1.2 var(--sans); color: var(--ink); }

.score { font-weight: 700; font-family: var(--sans); color: var(--signal); }
.score--low { color: var(--warn); }
.score--mid { color: var(--ink-4); }

/* --------------------------------------------------------- newsletter bar */

.nlbar {
  background: var(--paper-3); border-top: 1px solid var(--rule);
  padding: 24px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 30px;
}
.nlbar__copy { max-width: 52ch; }
.nlbar__h { font: 800 20px/1.15 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.nlbar__p { margin-top: 5px; font: 400 14.5px/1.45 var(--serif); color: var(--ink-4); }
.nlbar__form { display: flex; align-items: stretch; flex: none; }
.nlbar__input {
  font: 400 12.5px/1 var(--mono); color: var(--ink);
  border: 1.5px solid var(--ink); border-right: 0;
  padding: 13px 14px; background: var(--paper); min-width: 220px;
}
.nlbar__input::placeholder { color: var(--mute-2); }
.nlbar__btn {
  font: 700 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); padding: 13px 18px;
  border: 1.5px solid var(--ink);
}
.nlbar__btn:hover { background: var(--signal-ink); border-color: var(--signal-ink); }

/* ------------------------------------------------------------------ footer */

.footer { background: var(--ink); color: var(--mute-2); padding: 34px var(--gutter) 30px; }
.footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; }
.footer__lockup { display: flex; align-items: flex-end; gap: 9px; }
.footer__xt { font: 900 34px/0.8 var(--sans); letter-spacing: -.05em; color: var(--paper); }
.footer__pt { font: 700 10px/1 var(--mono); letter-spacing: .16em; color: var(--live); padding-bottom: 2px; }
.footer__mission {
  margin-top: 12px; font: 400 14px/1.5 var(--serif);
  color: var(--mute-2); max-width: 34ch;
}
.footer__col { display: flex; flex-direction: column; gap: 9px; font: 500 11.5px/1 var(--mono); }
.footer__col a { color: var(--mute-2); }
.footer__col a:hover { color: var(--paper); }
.footer__ch {
  color: var(--paper); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; font-size: 10px;
}
.footer__base {
  margin-top: 26px; border-top: 1px solid var(--dark-rule); padding-top: 14px;
  display: flex; justify-content: space-between; gap: 20px;
  font: 500 10.5px/1 var(--mono); letter-spacing: .06em; color: var(--mute);
}
.footer__base a { color: var(--mute); }
.footer__base a:hover { color: var(--paper); }

/* ------------------------------------------------------------ section page */

.sechead {
  padding: 32px var(--gutter) 24px; border-bottom: 2px solid var(--ink);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
}
.sechead--wide { padding-left: 40px; padding-right: 40px; }
.sechead__eyebrow {
  font: 600 10.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.sechead__h1 {
  margin: 8px 0 10px; font: 900 60px/0.92 var(--sans);
  letter-spacing: -.04em; color: var(--ink);
}
.sechead__desc { max-width: 64ch; font: 400 17px/1.5 var(--serif); color: var(--ink-4); }
.sechead__aside {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end; flex: none;
}
.sechead__count { font: 500 11px/1 var(--mono); color: var(--mute); }

.split { display: grid; grid-template-columns: 1fr 300px; gap: 36px; }
.split--320 { grid-template-columns: 1fr 320px; }
.split--260 { grid-template-columns: 1fr 260px; }

.picks {
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
  padding-bottom: 26px; border-bottom: 1px solid var(--rule);
}
.pick .ph { height: 196px; }
.pick__kickers { margin: 13px 0 8px; }
.pick__h { font: 800 30px/1.06 var(--sans); letter-spacing: -.025em; color: var(--ink); }
.pick__p { margin-top: 10px; font: 400 16px/1.5 var(--serif); color: var(--ink-4); }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; grid-template-columns: 132px 1fr; gap: 22px;
  padding: 18px 0; border-bottom: 1px solid var(--rule-2);
}
.row .ph { height: 80px; }
.row__meta { font: 500 11px/1 var(--mono); color: var(--mute-2); }
.row__h {
  margin: 7px 0 6px; font: 600 21px/1.2 var(--sans);
  letter-spacing: -.015em; color: var(--ink);
}
.row__p { font: 400 14.5px/1.45 var(--serif); color: var(--mute-4); }

.editor { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.editor:last-child { border-bottom: 0; }
.editor__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rule); display: block; flex: none; object-fit: cover;
}
.editor__name { font: 500 12px/1.35 var(--mono); color: var(--ink); }
.editor__beat { color: var(--mute); }

.wire--box .wire__row { grid-template-columns: 44px 1fr; gap: 10px; padding: 11px 0; }
.wire--box .wire__time { font-size: 10.5px; }
.wire--box .wire__title { font-size: 13.5px; line-height: 1.3; }

/* ------------------------------------------------------------ article page */

.article {
  padding: 40px 40px 0;
  display: grid; grid-template-columns: 196px minmax(0, var(--measure)) 1fr; gap: 40px;
}
.sticky { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }

.appar__label {
  font: 600 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute-2); margin-bottom: 6px;
}
.appar__value { font: 500 12px/1.5 var(--mono); color: var(--ink); }
.appar__value span { color: var(--mute); }
.appar__serif { font: 400 12.5px/1.5 var(--serif); color: var(--ink-4); }
.appar__link {
  display: inline-block; margin-top: 7px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--signal);
}

.jumper {
  display: flex; flex-direction: column; gap: 7px;
  font: 500 12px/1.35 var(--mono);
  border-left: 1px solid var(--rule); padding-left: 11px;
}
.jumper a { color: var(--ink-4); }
.jumper a:hover { color: var(--signal); }
.jumper a.is-active { color: var(--signal); box-shadow: -12px 0 0 -11px var(--signal); }

.art__h1 { font: 800 52px/1.02 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.art__standfirst { margin: 18px 0 26px; font: 400 21px/1.5 var(--serif); color: var(--ink-4); }
.art__hero { height: 300px; }
/* --------------------------------------------------------------- carousel */
/* A grid column's implicit min-width is content-sized, and the track's
   min-content is the sum of ALL slides — 400% — which dragged the whole page
   wide on phones. The column and everything down to the track must be
   allowed to shrink. */
.band.lead > * { min-width: 0; }
.carousel, .carousel__track { min-width: 0; max-width: 100%; }
.carousel__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide { flex: 0 0 100%; min-width: 100%; scroll-snap-align: start; }
.carousel__nav { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.carousel__btn {
  border: 1px solid var(--rule); background: var(--paper); cursor: pointer;
  padding: 6px 12px; font: 600 13px/1 var(--mono); color: var(--ink-4);
}
.carousel__btn:hover { border-color: var(--ink); color: var(--ink); }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dot {
  width: 9px; height: 9px; padding: 0; cursor: pointer;
  border: 1px solid var(--ink); background: transparent;
}
.carousel__dot.is-on { background: var(--ink); }

/* ------------------------------------------------------------ corrections */
.corrections {
  margin: 30px 0 8px; border: 1px solid var(--rule); border-left: 3px solid var(--warn);
  background: var(--paper-2); padding: 16px 18px;
}
.corrections__h {
  font: 600 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--warn); margin-bottom: 10px;
}
.corrections__row { display: flex; flex-direction: column; gap: 4px; }
.corrections__row + .corrections__row { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.corrections__when { font: 500 11px/1 var(--mono); color: var(--mute); }
.corrections__body { margin: 0; font: 400 15.5px/1.6 var(--serif); color: var(--ink-2); }

/* ---------------------------------------------------------------- contact */
.contact__form { max-width: 560px; display: flex; flex-direction: column; gap: 6px; }
.contact__label {
  margin-top: 14px; font: 600 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute-2);
}
.contact__input {
  border: 1px solid var(--rule); background: var(--paper);
  padding: 11px 12px; font: 400 15px/1.5 var(--serif); color: var(--ink);
}
.contact__input:focus { outline: none; border-color: var(--ink); }
.contact__textarea { min-height: 180px; resize: vertical; }
.contact__form .btn { align-self: flex-start; margin-top: 18px; }
.contact__note { font: 500 12px/1.5 var(--mono); color: var(--mute); }
.contact__error {
  max-width: 560px; border: 1px solid var(--warn); padding: 12px 14px;
  font: 500 13px/1.5 var(--mono); color: var(--warn);
}
.contact__done { max-width: 560px; }
.contact__done-h { font: 800 28px/1.1 var(--sans); color: var(--ink); margin-bottom: 10px; }
.contact__done-p { font: 400 16px/1.6 var(--serif); color: var(--ink-4); margin-bottom: 22px; }

/* Any fixed-height image slot (lead, cards, article/review heroes): the box
   keeps its design height, the picture covers it, the focal point positions it. */
.imgslot { overflow: hidden; }
.imgslot picture, .imgslot img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.art__caption { margin: 9px 0 30px; font: 400 12px/1.5 var(--mono); color: var(--mute); }

.prose > p { margin: 0 0 20px; font: 400 19.5px/1.65 var(--serif); color: var(--ink-2); }
.prose .leadin {
  font: 600 19.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .02em;
}
.prose h2 { margin: 34px 0 12px; }
.prose blockquote {
  margin: 30px 0; padding: 0 0 0 22px; border-left: 3px solid var(--signal);
}
.prose blockquote p {
  margin: 0; font: 600 25px/1.32 var(--sans); letter-spacing: -.015em; color: var(--ink);
}
.prose blockquote cite {
  display: block; margin-top: 11px; font: 500 11.5px/1 var(--mono);
  color: var(--mute); font-style: normal;
}
/* Code in article bodies — the design shipped no editorial code styles because
   the prototype articles had none; a technical magazine needs them. */
.prose pre {
  margin: 0 0 20px; padding: 14px 16px;
  background: var(--paper-2); border: 1px solid var(--rule);
  overflow-x: auto;
}
.prose pre code { font: 400 13px/1.6 var(--mono); color: var(--ink-2); border: 0; background: none; padding: 0; }
.prose code {
  font: 500 .85em/1 var(--mono); color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--rule); padding: 2px 5px;
  /* API strings ('server-side-fallback-2026-07-01') are single unbreakable
     tokens wider than a phone; let them break rather than drag the page. */
  overflow-wrap: anywhere;
}

.figure { margin: 0 0 26px; border: 1px solid var(--rule); background: var(--paper-2); }
.figure__head {
  padding: 11px 14px; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; gap: 12px;
  font: 600 10px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4);
}
.figure__cols {
  display: flex; align-items: stretch; gap: 14px;
  height: 150px; box-sizing: border-box; padding: 16px 16px 14px;
}
.figure__col {
  flex: 1; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
}
.figure__bar { background: var(--signal); }
.figure__bar--cmp { background: var(--mute-3); }
.figure__base { height: 2px; background: var(--ink); }
.figure__col span { font: 500 9.5px/1 var(--mono); color: var(--mute); }

.art__foot {
  border-top: 2px solid var(--ink); padding: 16px 0 40px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.art__tips { font: 400 14.5px/1.4 var(--serif); color: var(--ink-4); }
.art__actions {
  display: flex; gap: 8px;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.art__actions .btn { padding: 8px 11px; font-size: 10.5px; letter-spacing: .1em; }
.art__actions .btn--ghost { border-color: var(--rule); color: var(--ink-4); }
.art__actions .btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }

.related__row { padding: 13px 0; border-bottom: 1px solid var(--rule-2); }
.related__row:last-child { border-bottom: 0; }
.related__meta { font: 500 10.5px/1 var(--mono); color: var(--mute-2); }
.related__h { margin-top: 6px; font: 600 15.5px/1.24 var(--sans); color: var(--ink); }

/* The mobile apparatus strip (6c) — hidden on desktop. */
.appstrip { display: none; }

/* ------------------------------------------------------------- review page */

.review { padding: 36px 40px 0; display: grid; grid-template-columns: minmax(0,1fr) 344px; gap: 40px; }
.rev__h1 { font: 800 50px/1.02 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.rev__standfirst {
  margin: 16px 0 22px; font: 400 21px/1.5 var(--serif);
  color: var(--ink-4); max-width: 62ch;
}
.rev__byline { margin-bottom: 24px; }
.rev__hero { height: 400px; }
.rev__caption { margin: 9px 0 30px; font: 400 12px/1.5 var(--mono); color: var(--mute); }
.rev__intro { margin: 0 0 20px; font: 400 19.5px/1.65 var(--serif); color: var(--ink-2); }

.measures { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px; }
.measure { border: 1px solid var(--rule); background: var(--paper-2); padding: 16px; }
.measure__title {
  font: 600 10px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 14px;
}
.measure__rows {
  display: flex; flex-direction: column; gap: 11px;
  justify-content: center; height: 132px; box-sizing: border-box;
}
.measure__row { display: grid; grid-template-columns: 62px 1fr 44px; gap: 9px; align-items: center; }
.measure__label { font: 500 10px/1 var(--mono); color: var(--ink-4); }
.measure__row--subject .measure__label,
.measure__row--subject .measure__value { color: var(--ink); }
.measure__track { height: 14px; background: var(--rule-2); }
.measure__bar { height: 14px; background: var(--mute-3); }
.measure__row--subject .measure__bar { background: var(--signal); }
.measure__row--prior .measure__bar { background: var(--mute-2); }
.measure__value { font: 600 10px/1 var(--mono); color: var(--ink-4); text-align: right; }
.measure__note {
  margin-top: 9px; border-top: 1px solid var(--rule); padding-top: 7px;
  font: 500 9.5px/1 var(--mono); color: var(--mute-2);
}

.rubric { border: 1px solid var(--ink); margin-bottom: 12px; }
.rubric__head, .rubric__row {
  display: grid; grid-template-columns: 150px 56px 1fr 42px; gap: 14px;
}
.rubric__head {
  padding: 11px 16px; background: var(--ink); color: var(--paper);
  font: 700 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.rubric__head span:last-child { text-align: right; }
.rubric__row {
  padding: 12px 16px; align-items: center;
  border-bottom: 1px solid var(--rule-2); background: var(--paper);
}
.rubric__row:last-child { border-bottom: 0; }
.rubric__crit { font: 500 12px/1.3 var(--mono); color: var(--ink); }
.rubric__wt { font: 500 11px/1 var(--mono); color: var(--mute); }
.rubric__track { height: 10px; background: var(--rule-2); }
.rubric__bar { height: 10px; background: var(--signal); }
.rubric__bar--low { background: var(--mute-3); }
.rubric__score { font: 700 13px/1 var(--sans); color: var(--ink); text-align: right; }
.rubric__score--low { color: var(--ink-4); }
.rubric__foot { margin: 0 0 30px; font: 400 12px/1.5 var(--mono); color: var(--mute); }

.verdict { border: 1.5px solid var(--ink); background: var(--paper); }
.verdict__head {
  background: var(--ink); color: var(--paper); padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 14px;
}
.verdict__eyebrow {
  font: 700 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute-2);
}
.verdict__name { font: 700 17px/1.15 var(--sans); letter-spacing: -.015em; margin-top: 6px; }
.verdict__score {
  font: 900 46px/0.8 var(--sans); letter-spacing: -.04em; color: var(--live); flex: none;
}
.verdict__body { padding: 16px 18px; }
.verdict__label {
  font: 600 9.5px/1 var(--mono); letter-spacing: .13em;
  text-transform: uppercase; color: var(--mute);
}
.verdict__label + .verdict__label,
.verdict__list + .verdict__label {
  border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 14px;
}
.verdict__bottom { margin: 8px 0 16px; font: 400 15.5px/1.5 var(--serif); color: var(--ink-2); }
.verdict__list {
  display: flex; flex-direction: column; gap: 6px; margin-top: 8px;
  font: 400 14px/1.4 var(--serif); color: var(--ink-2);
}
.verdict__price {
  border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.verdict__price dt { font: 500 11.5px/1 var(--mono); color: var(--mute); }
.verdict__price dd { margin: 0; font: 700 17px/1 var(--sans); color: var(--ink); }

.specs {
  display: grid; grid-template-columns: 88px 1fr; gap: 8px 12px;
  margin-top: 12px; font: 500 11.5px/1.45 var(--mono);
}
.specs dt { color: var(--mute); }
.specs dd { margin: 0; color: var(--ink); }

.alsorow {
  padding: 12px 0; border-bottom: 1px solid var(--rule-2);
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.alsorow:last-child { border-bottom: 0; }
.alsorow__t { font: 600 14.5px/1.24 var(--sans); color: var(--ink); }
.alsorow__s { font: 700 13px/1 var(--sans); }

.actionbar { display: none; }
/* Two verdict slots; exactly one is ever displayed. */
.verdict-slot { display: none; }
.verdict-rail { display: block; }

/* ---------------------------------------------------------- reviews index */

.featured {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px;
  padding-bottom: 26px; border-bottom: 1px solid var(--rule);
}
.featured .ph { height: 238px; }
.featured__kickers { margin: 14px 0 9px; }
.featured__main { display: flex; gap: 16px; align-items: flex-start; }
.featured__score {
  font: 900 54px/0.8 var(--sans); letter-spacing: -.04em;
  color: var(--signal); flex: none; padding-top: 4px;
}
.featured__h { font: 800 31px/1.06 var(--sans); letter-spacing: -.026em; color: var(--ink); }
.featured__p { margin-top: 10px; font: 400 16px/1.5 var(--serif); color: var(--ink-4); }
.recent { display: flex; flex-direction: column; gap: 18px; }
.recent__row { display: flex; gap: 14px; align-items: flex-start; }
.recent__row .ph { height: 66px; width: 86px; flex: none; }
.recent__top { display: flex; gap: 9px; align-items: baseline; }
.recent__score { font: 700 17px/1 var(--sans); }
.recent__cat {
  font: 600 9.5px/1 var(--mono); letter-spacing: .11em;
  text-transform: uppercase; color: var(--mute);
}
.recent__h { margin-top: 6px; font: 600 16.5px/1.2 var(--sans); color: var(--ink); }

.rtable { margin-top: 24px; }
.rtable__head, .rtable__row {
  display: grid; grid-template-columns: 46px 1fr 118px 96px 96px; gap: 18px;
}
.rtable__head {
  padding: 10px 0; border-bottom: 1px solid var(--rule);
  font: 700 9.5px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: var(--mute);
}
.rtable__row { padding: 14px 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
.rtable__score { font: 700 19px/1 var(--sans); }
.rtable__h { font: 600 18px/1.24 var(--sans); color: var(--ink); }
.rtable__p { margin-top: 5px; font: 400 13.5px/1.4 var(--serif); color: var(--mute-4); }
.rtable__cat { font: 500 11px/1 var(--mono); color: var(--mute); }
/* Collapsed meta line is for the <768px card layout only. */
.rtable__meta { display: none; }
.rtable__price { font: 500 11.5px/1 var(--mono); color: var(--ink); text-align: right; }
.rtable__date { font: 500 11px/1 var(--mono); color: var(--mute-2); text-align: right; }
.rtable__num { text-align: right; }

.legend {
  display: grid; grid-template-columns: 44px 1fr; gap: 9px 12px;
  margin-top: 12px; font: 500 11.5px/1.35 var(--mono);
}
.legend dt { font-weight: 700; color: var(--signal); }
.legend dt.is-mid { color: var(--ink-4); }
.legend dt.is-low { color: var(--warn); }
.legend dd { margin: 0; color: var(--ink-4); }

.benchnow {
  display: flex; flex-direction: column; gap: 10px; margin-top: 12px;
  font: 500 12px/1.4 var(--mono); color: var(--ink);
}
.benchnow span { color: var(--mute-2); }

/* ------------------------------------------------------------- author page */

.authhead {
  padding: 32px 30px 26px; border-bottom: 2px solid var(--ink);
  display: grid; grid-template-columns: 132px 1fr 232px; gap: 30px; align-items: start;
}
.authhead__avatar { height: 132px; width: 132px; border-radius: 50%; object-fit: cover; }
.authhead__role {
  font: 600 10.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute);
}
.authhead__h1 { margin: 9px 0 12px; font: 900 52px/0.94 var(--sans); letter-spacing: -.04em; color: var(--ink); }
.authhead__bio { max-width: 58ch; font: 400 17.5px/1.5 var(--serif); color: var(--ink-3); }
.authhead__actions {
  margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap;
  font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.authhead__actions .btn { padding: 9px 12px; font-size: 10.5px; letter-spacing: .1em; }
.counters {
  border-left: 1px solid var(--rule); padding-left: 22px;
  display: flex; flex-direction: column; gap: 13px;
}
.counters__n { font: 700 26px/1 var(--sans); color: var(--ink); }
.counters__n--signal { color: var(--signal); }
.counters__l {
  font: 500 10.5px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--mute); margin-top: 4px;
}
.work { padding: 20px 0; border-bottom: 1px solid var(--rule-2); display: grid; grid-template-columns: 160px 1fr; gap: 22px; }
.work .ph { height: 100px; }
.work__kicker { font: 600 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--signal); }
.work__h { margin: 7px 0 6px; font: 700 25px/1.14 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.work__meta { font: 400 15px/1.5 var(--serif); color: var(--mute-4); }
.tipbox { background: var(--ink); color: var(--paper); padding: 16px; }
.tipbox__h { font: 700 17px/1.18 var(--sans); letter-spacing: -.015em; }
.tipbox__p { margin-top: 7px; font: 400 13.5px/1.5 var(--serif); color: var(--mute-2); }

/* -------------------------------------------------------- newsletter page */

.nlhead { background: var(--ink); color: var(--paper); padding: 30px 28px 28px; }
.nlhead__lockup { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 18px; }
.nlhead__xt { font: 900 32px/0.8 var(--sans); letter-spacing: -.05em; }
.nlhead__pt { font: 700 10px/1 var(--mono); letter-spacing: .16em; color: var(--live); padding-bottom: 2px; }
.nlhead__h1 { font: 900 46px/0.98 var(--sans); letter-spacing: -.035em; max-width: 26ch; }
.nlhead__p { margin: 14px 0 20px; max-width: 56ch; font: 400 17.5px/1.5 var(--serif); color: var(--mute-3); }
.nlhead__form { display: flex; align-items: stretch; max-width: 440px; }
.nlhead__input {
  flex: 1; min-width: 0; font: 400 12.5px/1 var(--mono); color: var(--paper);
  background: var(--dark-field); border: 1px solid var(--dark-rule); border-right: 0;
  padding: 13px;
}
.nlhead__input::placeholder { color: var(--mute); }
.nlhead__btn {
  font: 700 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  background: var(--live); color: var(--ink); padding: 13px 18px; border: 1px solid var(--live);
}
.nlhead__count {
  margin-top: 11px; font: 500 10.5px/1 var(--mono);
  letter-spacing: .06em; color: var(--mute);
}
.issue {
  display: grid; grid-template-columns: 74px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--rule-2);
}
.issue:last-of-type { border-bottom: 0; }
.issue__n { font: 700 22px/1 var(--sans); color: var(--mute-3); }
.issue__d { font: 500 10px/1.4 var(--mono); color: var(--mute-2); margin-top: 5px; }
.issue__h { margin-bottom: 6px; font: 700 22px/1.16 var(--sans); letter-spacing: -.018em; color: var(--ink); }
.issue__p { font: 400 15px/1.5 var(--serif); color: var(--mute-4); }

/* ------------------------------------------------------------ search page */

.searchbar {
  background: var(--paper); border-bottom: 1px solid var(--ink);
  padding: 0 28px; height: 52px; display: flex; align-items: center; gap: 20px;
}
.qfield {
  flex: 1; display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1.5px solid var(--ink); padding: 9px 11px;
}
.qfield__glyph { font: 500 12px/1 var(--mono); color: var(--ink); }
.qfield__input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 0;
  font: 500 12.5px/1 var(--mono); color: var(--ink);
}
.qfield__input:focus { outline: none; }
.qfield__input::placeholder { color: var(--mute-2); }
.qfield__hint { font: 500 10px/1 var(--mono); color: var(--mute-2); }
.qmeta {
  padding: 18px 28px 12px; display: flex; gap: 8px; align-items: center;
  border-bottom: 1px solid var(--rule);
}
.qmeta__count { font: 500 11.5px/1 var(--mono); color: var(--mute); }
.results { padding: 6px 28px 26px; display: grid; grid-template-columns: 1fr 200px; gap: 28px; }
.result { padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.result__kicker { font: 600 10px/1 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--signal); }
.result__h { margin: 7px 0 5px; font: 600 20px/1.2 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.result__p { font: 400 14.5px/1.45 var(--serif); color: var(--mute-4); }
/* Padding without affecting line height. */
mark { background: var(--signal-tint); color: inherit; box-shadow: 0 0 0 2px var(--signal-tint); }
.facets__head {
  font: 700 10.5px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 8px;
}
.facets__list {
  display: flex; flex-direction: column; gap: 9px; margin-top: 13px;
  font: 500 11.5px/1 var(--mono); color: var(--ink-4);
}
.facets__row { display: flex; justify-content: space-between; }
.facets__row.is-on { color: var(--ink); }
.facets__n { color: var(--mute-2); }
.facets__follow { margin-top: 20px; border-top: 1px solid var(--rule); padding-top: 14px; }
.facets__follow p { margin: 8px 0 10px; font: 400 13px/1.45 var(--serif); color: var(--mute-4); }

/* ---------------------------------------------------- mobile header/drawer */

.mhead { display: none; }
/* .drawer is NOT display:none here. It is hidden by its own `hidden` attribute
   until app.js opens it, and by the min-width:768px rule further down. Setting
   display:none unconditionally left the overlay permanently invisible while
   openDrawer() still scroll-locked the body — a phone reader was trapped on a
   frozen page with no visible close button and no Escape key. */

/* =========================================================================
   768–1099px — rails drop below, 4-up becomes 2-up, sticky off
   ========================================================================= */

@media (max-width: 1099px) {
  .lead, .split, .split--320, .split--260, .review, .results {
    grid-template-columns: 1fr;
  }
  .article { grid-template-columns: minmax(0, 1fr); padding: 28px var(--gutter) 0; }
  .article > .article__left { display: none; }
  .rail { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 22px; }
  .sticky { position: static; }
  .bench { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .featured { grid-template-columns: 1fr; }
  .measures { grid-template-columns: 1fr; }
  .authhead { grid-template-columns: 100px 1fr; }
  .counters {
    grid-column: 1 / -1; border-left: 0; padding-left: 0;
    border-top: 1px solid var(--rule); padding-top: 16px; flex-direction: row; gap: 32px;
  }
  .sechead__h1 { font-size: 48px; }
  .art__h1 { font-size: 42px; }
  .rev__h1 { font-size: 40px; }
  .lead__h1 { font-size: 38px; }
  .appstrip { display: block; }
}

/* =========================================================================
   <768px — single column, 16px gutters (options 6a–6d)
   ========================================================================= */

@media (max-width: 767px) {
  :root { --gutter: 16px; }

  .utility, .masthead, .nav, .topbar, .searchbar { display: none; }

  /* Mobile header + horizontally scrolling section strip */
  .mhead { display: block; }
  .mhead__bar {
    background: var(--paper); padding: 12px 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--ink);
  }
  .mhead__lockup { display: flex; align-items: flex-end; gap: 6px; }
  .mhead__xt { font: 900 26px/0.8 var(--sans); letter-spacing: -.05em; color: var(--ink); }
  .mhead__pt { font: 700 8.5px/1 var(--mono); letter-spacing: .16em; color: var(--signal); padding-bottom: 2px; }
  .mhead__tools { display: flex; gap: 14px; font: 500 13px/1 var(--mono); color: var(--ink); }
  .mhead__tools a, .mhead__tools button { color: var(--ink); padding: 4px; }
  .mhead__strip {
    background: var(--paper); padding: 9px 16px; display: flex; gap: 16px;
    border-bottom: 1px solid var(--rule);
    font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mhead__strip::-webkit-scrollbar { display: none; }
  .mhead__strip a { color: var(--ink-4); flex: none; padding: 3px 0; }
  .mhead__strip a.is-active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--signal); }

  .wide-only { display: none; }

  .band, .band--ink, .band--wide { padding: 18px 16px 20px; }
  .article, .review { padding: 18px 16px 0; }
  .sechead, .sechead--wide { padding: 20px 16px 18px; }
  .authhead { padding: 20px 16px 18px; grid-template-columns: 84px 1fr; gap: 16px; }
  .authhead__avatar { height: 84px; width: 84px; }
  .nlhead { padding: 22px 16px; }
  .qmeta { padding: 14px 16px 12px; }
  .results { padding: 6px 16px 22px; }

  /* Chip strips scroll rather than wrap */
  .chiprow, .chiprow--wide {
    padding: 11px 16px; height: auto; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .chiprow::-webkit-scrollbar { display: none; }
  .chip { padding: 8px 10px; }
  .chiprow__end { margin-left: auto; }

  /* Type ramp */
  .lead__h1 { font-size: 30px; line-height: 1.05; }
  .lead__standfirst { font-size: 16px; }
  .lead__img { height: 176px; }
  .lead__pair { grid-template-columns: 1fr; gap: 22px; }
  .sechead { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sechead__h1 { font-size: 40px; line-height: .94; }
  .sechead__desc { font-size: 15.5px; }
  .sechead__aside { align-items: flex-start; flex-direction: row; gap: 12px; align-items: center; }
  .follow__btn { padding: 12px 14px; }
  .art__h1 { font-size: 33px; line-height: 1.03; }
  .art__standfirst { font-size: 17.5px; margin: 12px 0 16px; }
  .art__hero { height: 210px; }
  .rev__h1 { font-size: 32px; line-height: 1.04; }
  .rev__standfirst { font-size: 17px; margin: 12px 0 14px; }
  .rev__hero { height: 210px; }
  .rev__intro, .prose > p { font-size: 18px; line-height: 1.62; }
  .prose .leadin { font-size: 18px; }
  .prose blockquote { margin: 24px 0; padding-left: 16px; }
  .prose blockquote p { font-size: 21px; line-height: 1.3; }
  .authhead__h1 { font-size: 34px; }
  .nlhead__h1 { font-size: 34px; }
  .figure__cols { height: 120px; gap: 10px; padding: 14px 12px 12px; }
  .figure__base { display: none; }

  .features, .bench, .picks, .measures, .featured { grid-template-columns: 1fr; }
  .feature .ph { height: 120px; }
  .card2 .ph, .pick .ph { height: 150px; }

  /* Wire */
  .wire__row { grid-template-columns: 44px 1fr; gap: 10px; }
  .wire__title { font-size: 15px; line-height: 1.3; }

  /* Latest rows collapse to meta-led cards */
  .latest__row {
    grid-template-columns: 1fr; gap: 6px; padding: 14px 0;
  }
  .latest__time { order: 2; }
  .latest__cat { order: 1; }
  .latest__h { order: 3; font-size: 17px; line-height: 1.24; }
  .latest__by { order: 4; text-align: left; }
  .row { grid-template-columns: 100px 1fr; gap: 14px; }
  .row__h { font-size: 17px; line-height: 1.24; }
  .work { grid-template-columns: 1fr; gap: 12px; }
  .work__h { font-size: 21px; }

  /* Article apparatus becomes a 2×2 strip (6c) */
  .article > .article__left { display: none; }
  .appstrip {
    display: block; border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule); margin-bottom: 0;
  }
  .appstrip__grid {
    padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px;
    font: 500 11px/1.4 var(--mono);
  }
  .appstrip__k { color: var(--mute-2); }
  .appstrip__v { color: var(--ink); display: block; }
  .appstrip__jump {
    padding: 11px 0; border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: center;
    font: 600 10.5px/1 var(--mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--signal); width: 100%; text-align: left;
  }
  .art__foot { flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 20px; }
  .art__actions { display: none; }

  /* Reviews: verdict under the hero, rubric loses its bar column */
  .verdict-slot { display: block; margin-bottom: 20px; }
  .verdict-rail { display: none; }
  .rubric__head, .rubric__row { grid-template-columns: 1fr 40px 34px; gap: 10px; padding: 11px 12px; }
  .rubric__head { padding: 9px 12px; font-size: 9px; }
  .rubric__track { display: none; }
  .rubric__crit { font-size: 11.5px; }
  .rubric__wt { font-size: 10.5px; }
  .rubric__score { font-size: 13px; }
  .verdict__score { font-size: 42px; }
  .verdict__name { font-size: 16px; }
  .measure__row { grid-template-columns: 60px 1fr 38px; }

  /* Reviews index table becomes score-led cards */
  .rtable__head { display: none; }
  .rtable__row {
    grid-template-columns: 42px 1fr; gap: 14px; padding: 15px 0;
  }
  .rtable__h { font-size: 17px; line-height: 1.24; }
  .rtable__p { display: none; }
  .rtable__cat { grid-column: 2; order: 3; }
  .rtable__meta {
    display: block; grid-column: 2; margin-top: 6px;
    font: 600 9.5px/1 var(--mono); letter-spacing: .1em;
    text-transform: uppercase; color: var(--mute);
  }
  .rtable__cat { display: none; }
  .rtable__price, .rtable__date { display: none; }
  .featured__score { font-size: 40px; }
  .featured__h { font-size: 25px; line-height: 1.08; }
  .featured .ph { height: 172px; }
  .recent__row .ph { width: 72px; height: 56px; }

  /* Newsletter bar stacks */
  .nlbar { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 16px; }
  .nlbar__form { width: 100%; }
  .nlbar__input { flex: 1; min-width: 0; }
  .nlhead__form { max-width: none; }

  .footer { padding: 24px 16px 22px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .footer__base { flex-direction: column; gap: 8px; }

  .issue { grid-template-columns: 56px 1fr; gap: 14px; }
  .issue__h { font-size: 19px; }

  .results { grid-template-columns: 1fr; }
  .facets { border-top: 1px solid var(--rule); padding-top: 16px; }

  /* Sticky bottom action bar on review pages (6a) */
  .actionbar {
    display: block; position: sticky; bottom: 0; z-index: 20;
    background: var(--paper); padding: 0 16px 16px;
  }
  .actionbar__inner {
    border-top: 2px solid var(--ink); padding-top: 11px; display: flex; gap: 8px;
    font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  }
  .actionbar__btn {
    flex: 1; text-align: center; border: 1px solid var(--rule);
    color: var(--ink-4); padding: 14px 0; background: none;
  }
  .actionbar__btn--primary {
    flex: 1.4; background: var(--ink); color: var(--paper); border-color: var(--ink);
  }
}

/* ------------------------------------------------------------ nav drawer */

.drawer {
  position: fixed; inset: 0; z-index: 50;
  background: var(--ink); color: var(--paper); overflow-y: auto;
}
.drawer[hidden] { display: none; }
body.is-locked { overflow: hidden; }

.drawer__head {
  padding: 14px 16px; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--dark-rule);
}
.drawer__lockup { display: flex; align-items: flex-end; gap: 7px; }
.drawer__xt { font: 900 28px/0.8 var(--sans); letter-spacing: -.05em; }
.drawer__pt { font: 700 8.5px/1 var(--mono); letter-spacing: .16em; color: var(--live); padding-bottom: 2px; }
.drawer__close { font: 500 15px/1 var(--mono); color: var(--mute-2); padding: 6px 10px; }
.drawer__search { padding: 16px; }
.drawer__field {
  display: flex; align-items: center; gap: 9px;
  background: var(--dark-field); border: 1px solid var(--dark-rule); padding: 14px 12px;
}
.drawer__field input {
  flex: 1; min-width: 0; border: 0; background: none;
  font: 400 12.5px/1 var(--mono); color: var(--paper);
}
.drawer__field input:focus { outline: none; }
.drawer__field input::placeholder { color: var(--mute); }
.drawer__field span { font: 500 12px/1 var(--mono); color: var(--mute-2); }
.drawer__body { padding: 4px 16px 18px; }
.drawer__label {
  font: 700 9.5px/1 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); padding: 10px 0;
}
.drawer__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 15px 0; border-top: 1px solid var(--dark-rule);
}
.drawer__row:last-of-type { border-bottom: 1px solid var(--dark-rule); }
.drawer__sec { font: 700 24px/1 var(--sans); letter-spacing: -.02em; color: var(--paper); }
.drawer__sec:hover { color: var(--live); }
.drawer__state {
  font: 500 10px/1 var(--mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--live); background: none; border: 0;
}
.drawer__state[aria-pressed="false"] { font-size: 15px; letter-spacing: 0; color: var(--mute); }
.drawer__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.drawer__chip {
  font: 500 11.5px/1 var(--mono); padding: 11px 12px;
  border: 1px solid var(--dark-rule); color: var(--mute-3);
}
.drawer__chip:hover { color: var(--paper); border-color: var(--mute); }
.drawer__util {
  margin-top: 22px; border-top: 1px solid var(--dark-rule); padding-top: 16px;
  display: flex; flex-direction: column; gap: 14px;
  font: 500 12.5px/1 var(--mono);
}
.drawer__util a { color: var(--mute-2); }
.drawer__util a:hover { color: var(--paper); }
.drawer__util a.is-strong { color: var(--paper); }

@media (min-width: 768px) { .drawer { display: none !important; } }

/* ------------------------------------------------------------ preferences */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .progress__bar { transition: none; }
}

@media print {
  .utility, .nav, .chiprow, .rail, .footer, .nlbar, .actionbar, .progress { display: none; }
  .article, .review { grid-template-columns: 1fr; }
}

/* A wire past its staleness window drops the dot and states its age instead. */
.live--stale { color: var(--mute-2); }
.utility a.live { color: var(--paper); }
.utility a.live--stale { color: var(--mute-2); }
.utility a.live:hover { color: var(--live); }

/* An unscored review: an em-dash in plain ink, not the rust that means
   "fails a claim it makes about itself". */
.score--none { color: var(--mute-2); }