/* Sitethreesixty 360 View — Worklight editorial prototype */
@font-face {
  font-family: "Jakarta Round";
  src: url("../fonts/jakarta-round-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Jakarta Round";
  src: url("../fonts/jakarta-round-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ============================================================
     Token/colour/breakpoint remediation, 20 Aug 2026 — owner ruling 2.

     This page now loads the repo's real ../css/tokens.css (linked in
     360view.html, before this stylesheet). Every colour, font-family,
     font-size, spacing step and radius that has a canonical token is
     used directly via var(--canonical-name) below — no local duplicate,
     no synced copy that could drift. The earlier fix kept a page-local
     copy with matching values; the owner ruled that leaves a parallel
     set that agrees today and can silently diverge tomorrow, which is
     exactly what the closed token set exists to prevent. Fixed properly
     by loading the source instead of syncing to it.

     Five font-size values (page-heading/zone-heading/sub-heading/intro/
     label) had no EXACT canonical match — owner ruling 1: use the
     nearest token, since every one is a sub-pixel or near-sub-pixel
     delta. Mapped directly to the canonical name at every use site
     instead of kept as a page-local alias, since there is no longer a
     reason to keep a separate name once the value is the same.

     --shell and --header-height stay page-local — owner-confirmed
     structural constants, not design-scale tokens (same category as
     the 90rem hardcoded into .pos-content and the 4.6rem hardcoded
     into .header-grid in the site's real critical CSS). --gutter
     folded into --container-pad since it WAS an exact duplicate.
     ============================================================ */

  /* ---- Structural page-local constants (not design tokens) ---- */
  --shell: 90rem;
  --header-height: 5rem;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-light);
  color: var(--bg-dark);
  font-family: var(--font-body);
  font-size: var(--font-body-size);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
h1, h2, h3, p, figure { margin-top: 0; }

h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: -.055em;
}

h1 { font-size: var(--font-display-view); line-height: .89; }
h2 { font-size: var(--font-h2); line-height: .94; }
h3 { font-size: var(--font-h3-sm); line-height: 1.02; }

:focus-visible {
  outline: 3px solid var(--brand-accent-on-light);
  outline-offset: 3px;
}

.shell {
  width: min(100%, calc(var(--shell) + (2 * var(--container-pad))));
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.skip-link {
  position: fixed;
  top: var(--space-sm-md);
  left: var(--space-sm-md);
  z-index: 100;
  padding: var(--space-sm-md) var(--space-md);
  background: var(--bg-dark);
  color: var(--bg-light);
  transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-label {
  margin-bottom: var(--space-md);
  color: var(--brand-accent-on-light);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.signal-dot { color: var(--brand-accent-on-light); }

.page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: 3px;
  overflow: hidden;
  pointer-events: none;
}

.page-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--brand-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--grey-light);
  background: var(--bg-light);
}

.site-header__inner {
  min-height: var(--header-height);
  display: grid;
  /* 1fr auto 1fr keeps the nav mathematically centred in the header
     regardless of how the wordmark and CTA button widths compare — an
     auto/1fr/auto split would centre the nav only within the leftover
     space, not the full width. Unchanged from the original; this was
     never a breakpoint value, so there was nothing to consolidate here. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-lg);
}

.wordmark {
  justify-self: start;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: 1;
}

.wordmark span { color: var(--brand-accent-on-light); }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2.25rem);
  font-size: .95rem;
}

.primary-nav a {
  position: relative;
  padding-block: .4rem;
}

.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--bg-dark);
  content: "";
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 180ms ease;
}

.primary-nav a:hover::after,
.primary-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left center;
}

.primary-nav a[aria-current="page"]::before {
  position: absolute;
  top: .1rem;
  right: -.45rem;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: var(--brand-accent-on-light);
  content: "";
}

.header-action,
.primary-action {
  min-height: 2.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm-md);
  padding: .78rem 1.2rem;
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-full);
  color: var(--white);
  background: var(--brand-primary);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  transition: transform 180ms ease, background-color 180ms ease;
}

.header-action { justify-self: end; }
.header-action:hover,
.primary-action:hover { transform: translateY(-2px); background: var(--brand-accent-on-light); }

.nav-toggle { display: none; }

.view-hero {
  min-height: calc(100svh - var(--header-height));
  display: grid;
  /* FIX 3 — was a fixed 3-step (1.04fr/.86fr desktop -> 1fr/1fr @1100 ->
     single column @900). minmax() floors let the two-column layout shrink
     continuously; the single genuinely binary change (2-col to stacked) is
     the mobile collapse, folded into the 1000px query below. */
  grid-template-columns: minmax(0, 1.04fr) minmax(min(25rem, 100%), .86fr);
  align-items: center;
  gap: clamp(3rem, 7vw, 8rem);
  padding-block: clamp(4rem, 8vw, 8rem);
}

.view-hero__copy h1 {
  max-width: 11ch;
  margin-bottom: var(--space-lg);
}

.view-hero__intro {
  max-width: 37rem;
  margin-bottom: var(--space-lg-xl);
  color: var(--text-muted-light);
  font-size: var(--font-body-lg);
  line-height: 1.55;
}

.hero-story-link {
  max-width: 38rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--grey-light);
  border-bottom: 1px solid var(--grey-light);
  font-weight: 600;
}

.hero-story-link__index {
  color: var(--brand-accent-on-light);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  letter-spacing: .08em;
}

.hero-story-link i,
.text-link i,
.dark-link span,
.primary-action span {
  font-style: normal;
  transition: transform 180ms ease;
}

.hero-story-link:hover i,
.story-card a:hover .text-link i,
.dark-link:hover span,
.primary-action:hover span { transform: translate(3px, -3px); }

.featured-media {
  position: relative;
  min-height: min(68svh, 44rem);
  display: grid;
  grid-template-rows: auto 1fr auto;
  margin: 0;
  padding: clamp(1.25rem, 2.4vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--grey-darkest);
  border-radius: var(--radius-lg);
  color: var(--bg-light);
  background: var(--bg-dark);
}

.featured-media__datum {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--grey-darkest);
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-size: clamp(.75rem, .5rem + .5vw, var(--font-label-sm));
  font-weight: 600;
  letter-spacing: .08em;
}

.featured-media__image {
  position: relative;
  min-height: 22rem;
  margin: var(--space-md-lg) 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-muted);
}

.featured-media__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.featured-media__axis {
  position: absolute;
  z-index: 2;
  display: block;
  background: var(--text-muted-dark);
  pointer-events: none;
}

.featured-media__axis--x { top: 50%; right: 0; left: 0; height: 1px; }
.featured-media__axis--y { top: 0; bottom: 0; left: 72%; width: 1px; }

.featured-media__point {
  position: absolute;
  z-index: 3;
  top: calc(50% - .34rem);
  left: calc(72% - .34rem);
  width: .68rem;
  height: .68rem;
  border: 2px solid var(--bg-dark);
  border-radius: 50%;
  background: var(--brand-accent);
}

.featured-media figcaption {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-md-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--grey-darkest);
  color: var(--text-muted-dark);
}

.featured-media figcaption .section-label {
  min-width: max-content;
  margin: .22rem 0 0;
  color: var(--brand-accent);
}

.topic-strip {
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  border-block: 1px solid var(--grey-light);
  background: var(--bg-muted);
}

.stories-hub { position: relative; }

.topic-strip__inner {
  min-height: 5.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  padding-block: var(--space-sm-md);
}

.topic-strip__inner > .section-label { margin: 0; color: var(--text-muted-light); }

.topic-filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  max-width: 100%;
  overflow-x: auto;
}

.topic-filter button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .66rem .9rem;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-full);
  background: var(--white);
  cursor: pointer;
  font-size: var(--font-label-sm);
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease;
}

.topic-filter button i {
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--grey-light);
}

.topic-filter button span {
  color: var(--text-muted-light);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
}

.topic-filter button:hover { border-color: var(--bg-dark); }

.topic-filter button[aria-pressed="true"] {
  border-color: var(--bg-dark);
  color: var(--bg-light);
  background: var(--bg-dark);
}

.topic-filter button[aria-pressed="true"] i { background: var(--brand-accent); }
.topic-filter button[aria-pressed="true"] span { color: var(--text-muted-dark); }

.stories-zone { padding-block: clamp(5rem, 9vw, 9rem); }

.section-heading {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 6rem);
}

.section-heading .section-label { grid-column: 1 / 13; }
/* FIX 3 — was 1/8 desktop -> 1/9 @900 -> full-width block @640. The 12-col
   feature/wide/regular story grid below genuinely needs to collapse to a
   single column at the same binary point the nav does (dense grid spans
   stop making sense once cards stack), so this rides the same 1000px
   query for consistency rather than reflowing independently. */
.section-heading h2 { grid-column: 1 / 8; max-width: 8ch; margin-bottom: 0; }
.section-heading > p:last-child { grid-column: 9 / 13; margin-bottom: .65rem; color: var(--text-muted-light); font-size: var(--font-body-lg); }

.story-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: var(--space-md-lg);
}

.story-card {
  grid-column: span 4;
  min-width: 0;
  border: 1px solid var(--grey-light);
  border-radius: var(--radius-md);
  background: var(--white);
  overflow: hidden;
}

.story-card--feature { grid-column: span 8; grid-row: span 2; }
.story-card--wide { grid-column: span 8; }
.story-card[hidden] { display: none; }

.story-card > a {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.story-card__media {
  position: relative;
  height: clamp(15rem, 22vw, 21rem);
  overflow: hidden;
  border-bottom: 1px solid var(--grey-light);
  background: var(--bg-muted);
}

.story-card--feature .story-card__media { height: clamp(22rem, 41vw, 38rem); }
.story-card--wide:not(.story-card--feature) .story-card__media { height: clamp(18rem, 28vw, 25rem); }

.story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 620ms cubic-bezier(.2, .8, .2, 1);
}

.story-card__media--contain img {
  padding: clamp(1rem, 2vw, 2rem);
  object-fit: contain;
  background: var(--white);
}

.story-card a:hover .story-card__media img { transform: scale(1.035); }
.story-card a:hover .story-card__media--contain img { transform: scale(1.015); }

.story-card__number {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  min-width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--grey-darkest);
  border-radius: 50%;
  color: var(--bg-light);
  background: var(--bg-dark);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  font-weight: 600;
}

.story-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1.3rem, 2.2vw, 2rem);
}

.story-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md-lg);
  color: var(--text-muted-light);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.story-card__meta span { color: var(--brand-accent-on-light); }
.story-card h3 { max-width: 22ch; margin-bottom: var(--space-md); }
.story-card p { max-width: 52ch; margin-bottom: var(--space-lg); color: var(--text-muted-light); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm-md);
  margin-top: auto;
  font-weight: 600;
}

.story-card__media--editorial {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  padding: clamp(1.5rem, 4vw, 4rem);
  color: var(--bg-light);
  background: var(--bg-dark);
}

.story-card__media--editorial > span {
  max-width: 8ch;
  font-family: var(--font-heading);
  font-size: clamp(2.7rem, 5vw, 5.6rem);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.055em;
}

.story-card__media--editorial .signal-dot { color: var(--brand-accent); }

.story-card__media--editorial > i {
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  font-style: normal;
}

.research-zone {
  padding-block: clamp(5rem, 9vw, 9rem);
  color: var(--bg-light);
  background: var(--bg-dark);
}

.research-zone .section-label { color: var(--brand-accent); }
.research-zone .signal-dot { color: var(--brand-accent); }

.research-zone__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-lg);
}

/* FIX 3 — copy/instrument columns (1/6 + 7/13 desktop) become a single
   binary stack at 1000px along with the rest of the page; no intermediate
   snap needed since there was only ever one reflow (desktop split ->
   mobile stack), already collapsed at 900px previously. */
.research-zone__copy { grid-column: 1 / 6; }
.research-zone__copy h2 { max-width: 8ch; margin-bottom: var(--space-lg); }
.research-zone__copy > p:not(.section-label) { max-width: 34rem; margin-bottom: var(--space-lg-xl); color: var(--text-muted-dark); font-size: var(--font-body-lg); }

.dark-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm-md);
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--brand-accent);
  font-weight: 600;
}

.research-instrument {
  grid-column: 7 / 13;
  overflow: hidden;
  border: 1px solid var(--grey-darkest);
  border-radius: var(--radius-lg);
}

.research-instrument__head,
.research-instrument__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) var(--space-md-lg);
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  font-weight: 600;
  letter-spacing: .08em;
}

.research-instrument__head { border-bottom: 1px solid var(--grey-darkest); }
.research-instrument__foot { border-top: 1px solid var(--grey-darkest); }
.research-instrument__head span:last-child,
.research-instrument__foot span:last-child { color: var(--brand-accent); }

.research-reading {
  display: grid;
  grid-template-columns: minmax(9rem, .75fr) 1fr;
  align-items: center;
  gap: var(--space-md-lg);
  padding: clamp(1.5rem, 3vw, 2.8rem) var(--space-md-lg);
  border-bottom: 1px solid var(--grey-darkest);
}

.research-reading:last-of-type { border-bottom: 0; }

.research-reading strong {
  display: block;
  color: var(--bg-light);
  font-family: var(--font-heading);
  font-size: clamp(3.7rem, 7vw, 7rem);
  font-weight: 300;
  line-height: .8;
  letter-spacing: -.06em;
}

.research-reading .section-label { margin-bottom: var(--space-sm); }
.research-reading p { margin: 0; color: var(--text-muted-dark); }

.review-zone {
  min-height: min(82svh, 58rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  gap: var(--space-lg);
  padding-block: clamp(6rem, 11vw, 11rem);
  overflow: hidden;
}

/* FIX 3 — was 1/7 + 7/13 desktop, 1/6 + 6/13 @900. The intermediate 900px
   ratio nudge is folded away; the marker and copy simply keep their
   original 1/7 + 7/13 split until the 1000px stack. */
.review-zone__marker {
  grid-column: 1 / 7;
  display: flex;
  align-items: flex-start;
  color: var(--bg-muted);
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: -.075em;
  line-height: .62;
  user-select: none;
}

.review-zone__marker span { font-size: clamp(10rem, 22vw, 23rem); }
.review-zone__marker i { color: var(--brand-accent-on-light); font-size: clamp(4rem, 8vw, 8rem); font-style: normal; letter-spacing: 0; }

.review-zone__copy { grid-column: 7 / 13; }
.review-zone__copy h2 { max-width: 9ch; margin-bottom: var(--space-lg); }
.review-zone__copy > p:not(.section-label) { max-width: 34rem; margin-bottom: var(--space-lg-xl); color: var(--text-muted-light); font-size: var(--font-body-lg); }

.site-footer {
  padding-block: clamp(4rem, 7vw, 7rem) var(--space-md-lg);
  color: var(--bg-light);
  background: var(--bg-dark);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: var(--space-lg-xl);
}

.site-footer .wordmark span { color: var(--brand-accent); }
.site-footer .section-label { margin-bottom: var(--space-md); color: var(--brand-accent); }
.site-footer a { display: block; width: max-content; margin-bottom: var(--space-sm); color: var(--text-muted-dark); }
.site-footer a:hover { color: var(--bg-light); }
.site-footer__lead > p:last-child { max-width: 28rem; color: var(--text-muted-dark); }

.site-footer small,
.site-footer .pagespeed-disclaimer {
  grid-column: 1 / -1;
  color: var(--text-muted-dark);
  font-family: var(--font-mono);
  font-size: var(--font-label-sm);
  letter-spacing: .05em;
}

/* Only the first line of the legal block draws the separator above it —
   the disclaimer paragraphs that follow share its typography but sit
   inside the same bordered block, not each under their own divider. */
.site-footer small {
  padding-top: var(--space-md-lg);
  border-top: 1px solid var(--grey-darkest);
}

.site-footer .pagespeed-disclaimer {
  margin: 0;
}

.site-footer .pagespeed-disclaimer + .pagespeed-disclaimer {
  margin-top: var(--space-sm);
}

/* The footer's own link rule sets display:block for its stacked nav columns.
   Inherited here it pushed the sentence's full stop onto its own line, so the
   disclaimer rendered as "…Google PageSpeed Insights ." — this is legal
   wording and must read exactly as written. */
.site-footer .pagespeed-disclaimer a {
  display: inline;
  color: var(--text-muted-dark);
  text-decoration: underline;
}

.site-footer .pagespeed-disclaimer a:hover {
  color: var(--bg-light);
}

/* ============================================================
   Marquee — trade links, this lane's own idiom (BEM, .shell,
   no .zone/.pos-content — see CLAUDE.md). Dark ground, matching
   .site-footer's colour treatment directly rather than inventing
   a second dark-ground link pattern.
   ============================================================ */

.marquee-zone {
  padding-block: clamp(4rem, 7vw, 7rem);
  color: var(--bg-light);
  background: var(--bg-dark);
  text-align: center;
}

.marquee-zone .section-label {
  display: block;
  margin: 0 0 var(--space-lg-xl);
  color: var(--brand-accent);
}

.marquee-zone__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md-lg);
}

.marquee-zone .text-link {
  color: var(--text-muted-dark);
}

.marquee-zone .text-link:hover {
  color: var(--bg-light);
}

.marquee-zone__sep {
  color: var(--grey-darkest);
  user-select: none;
}

/* ============================================================
   FIX 3 — single responsive breakpoint at 1000px.

   Was three: max-width 1100px, 900px and 640px. 12 West permits exactly
   one, at 1000px (12-West-Forbidden-Rules.md: "NEVER add a second
   breakpoint"). Every rule below is either:
     (a) a genuinely binary state change (desktop nav <-> mobile drawer,
         multi-column editorial grid <-> single column stack) that has to
         snap somewhere, or
     (b) the load-bearing mobile navigation logic verified against
         360view.js (nav-toggle display, primary-nav.is-open, Escape/close
         handlers — all class-toggle driven, no JS width checks, so moving
         the single snap point to 1000px does not touch behaviour).
   Every rule that was previously a pure sizing/ratio snap (grid-template-
   columns going from N to N-1, a --gutter/--page-heading/--zone-heading
   override, a switch from fixed heights to fluid ones) has been converted
   to clamp()/minmax()/auto-fit above instead, so it now adapts
   continuously and does not appear here at all.
   ============================================================ */
@media (max-width: 1000px) {
  :root { --header-height: 4.5rem; }

  .site-header__inner { position: relative; grid-template-columns: 1fr auto; }
  .header-action { display: none; }

  .nav-toggle {
    display: grid;
    min-width: 3.2rem;
    padding: .55rem;
    border: 0;
    gap: .25rem;
    background: transparent;
    cursor: pointer;
  }
  .nav-toggle span { font-size: var(--font-label-sm); font-weight: 600; }
  .nav-toggle i { display: block; width: 1.5rem; height: 1px; margin-inline: auto; background: var(--bg-dark); }

  .primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    padding: var(--space-lg) var(--container-pad);
    border-bottom: 1px solid var(--grey-light);
    flex-direction: column;
    align-items: flex-start;
    background: var(--bg-light);
  }
  .primary-nav.is-open { display: flex; }

  .view-hero { min-height: auto; grid-template-columns: 1fr; padding-block: var(--space-xl); }
  .view-hero__copy h1 { max-width: 11ch; }

  /* hero-story-link: three columns (index / link text / arrow) are fine
     down to tablet width, but at phone widths the index label and the
     link text crowd each other. This is content wrapping, not a size
     tweak, so it rides the binary query rather than becoming fluid. */
  .hero-story-link { grid-template-columns: 1fr auto; }
  .hero-story-link__index { grid-column: 1 / -1; }

  .featured-media { width: min(100%, 44rem); min-height: min(37rem, 68vh); padding: var(--space-md); }
  .featured-media__image { min-height: 18rem; }
  /* figcaption: "auto 1fr" (short mono label beside a full sentence) is
     fine while the card has room, but crushes at phone widths. Stack. */
  .featured-media figcaption { grid-template-columns: 1fr; gap: var(--space-sm); }
  .featured-media figcaption .section-label { min-width: 0; }

  .topic-strip { position: relative; top: auto; }
  .topic-strip__inner { min-height: 0; padding-block: var(--space-md); align-items: flex-start; flex-direction: column; }
  .topic-strip__inner > .section-label { display: none; }
  .topic-filter { width: 100%; justify-content: flex-start; padding-bottom: var(--space-sm); }
  .topic-filter button { flex: 0 0 auto; }

  .section-heading { display: block; }
  .section-heading h2 { margin-bottom: var(--space-md-lg); }
  .section-heading > p:last-child { margin: 0; }

  .story-grid { display: block; }
  .story-card { margin-bottom: var(--space-md-lg); }
  .story-card,
  .story-card--feature,
  .story-card--wide { grid-column: unset; grid-row: unset; }
  /* Once every card is full-width and stacked, the feature/wide/regular
     media-height distinction that justifies the desktop dense grid no
     longer applies — the original converged all three to one height here
     too (mobile 900px + 640px both did this). Single shared height. */
  .story-card--feature .story-card__media,
  .story-card--wide:not(.story-card--feature) .story-card__media,
  .story-card__media { height: clamp(16rem, 46vw, 24rem); }
  .story-card__media--editorial { min-height: 18rem; }
  .story-card__meta { align-items: flex-start; flex-direction: column; gap: var(--space-sm); }

  .research-zone__inner { display: block; }
  .research-zone__copy { margin-bottom: var(--space-lg-xl); }

  /* research-reading: the big numeral (up to 7rem) beside its label needs
     its own row once the instrument card is full-width and narrow — two
     columns crush the numeral against the label text. Binary content
     reflow, not a size tweak. */
  .research-reading { grid-template-columns: 1fr; gap: var(--space-md); }

  /* research-instrument__head/foot: flex-wrap (base rule) lets the two
     labels wrap onto separate lines, but left-aligns the wrapped second
     line under the first — reading badly for "METHOD · ..." beside
     "COMPLETE". Stacking is the correct binary fix, not a fluid one. */
  .research-instrument__head,
  .research-instrument__foot { flex-wrap: nowrap; align-items: flex-start; flex-direction: column; }

  .review-zone { display: block; }
  .review-zone__marker { margin-bottom: var(--space-xl); }

  /* site-footer__inner: was 2fr+3x1fr desktop -> 3x1fr @900 -> 2x1fr @640,
     three separate column-count snaps for the same underlying problem
     (four unequal-width tracks don't fit a narrow viewport). auto-fit lets
     the three link columns wrap fluidly below this single breakpoint
     without needing further snaps of its own; the lead block still needs
     an explicit full-width row once it's no longer sharing the desktop
     4-column line, which is the one genuinely binary change here. */
  .site-footer__inner { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .site-footer__lead { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .page-progress { display: none; }
  .featured-media__image img { transform: none !important; }
}