/* ============================================================================
   Burton v8 — Hub page components
   ----------------------------------------------------------------------------
   Shared styling for the /acoustic-treatment/ pillar hub. It is a "pillar"
   page that teaches a topic and links out to canonical sub-category hubs;
   the centrepiece is the 4-tools grid (panels, foam, bass traps, diffusers).
   The earlier /audio-gear/ hub was retired: soundbars, DJ controllers, and
   MIDI controllers are three disjoint audiences and each now lives at its
   own canonical /{slug}/ — no shared pillar page.

   Other hub sections reuse existing components:
     - hero/intro      → .mission (from mission.css, shared with Mission page)
     - decision tree   → .router__list (from problem-router.css)
     - misconceptions  → .never-list (from page-mission.css)
     - deeper reads    → .deep-dives__grid (from deep-dives.css)

   This file introduces `.tools-editorial` + `.tool-entry` (editorial
   feature entries for the four tools), `.category-columns` (newspaper-
   style category index), `.myth-stack` (containerless myth/reality flow),
   and the original `.hub-plan` / `.journey-step` card components.
   ========================================================================= */

/* ── Hub hero overrides ─────────────────────────────────────────────────── */
/* Tighten the shared .mission component when used as a hub hero so both
   the intro copy AND the intent picks fit above the fold on laptop.       */

.mission--hub {
  padding-block: var(--space-14) var(--space-20);
}

.mission--hub .mission__inner {
  text-align: left;
  max-width: none;
}

.mission--hub .mission__body {
  margin-inline: 0;
  margin-bottom: var(--space-4);
  font-size: var(--fs-base);
  max-width: none;
}

.mission--hub .mission__body:last-of-type {
  margin-bottom: 0;
}

.mission--hub .mission__statement {
  margin-bottom: var(--space-5);
}

.mission--hub .mission__eyebrow {
  margin-bottom: var(--space-3);
}

@media (min-width: 900px) {
  .mission--hub {
    padding-block: var(--space-20) var(--space-24);
  }
}

@media (min-width: 720px) and (max-width: 899px) {
  .mission--hub {
    padding-block: var(--space-16) var(--space-20);
  }
}

/* ── Above-the-fold intent picks ────────────────────────────────────────── */

.hub-picks {
  margin-top: var(--space-8);
}

.hub-picks__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-bottom: var(--space-4);
}

.hub-picks__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}

.hub-pick {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.hub-pick:hover {
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
}

.hub-pick__intent {
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.7);
}

.hub-pick__article {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--color-accent);
}

.hub-pick__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.05em;
}

.hub-picks__label {
  color: rgba(255, 255, 255, 0.4);
}

/* Tablet (500–899px) */
@media (max-width: 899px) {
  .hub-picks {
    margin-top: var(--space-6);
  }

  .hub-picks__grid {
    grid-template-columns: 1fr 1fr;
  }

  .mission--hub .mission__statement {
    font-size: clamp(var(--fs-xl), 3vw + 0.5rem, var(--fs-2xl));
    margin-bottom: var(--space-4);
  }

  .mission--hub .mission__body {
    font-size: var(--fs-sm);
  }
}

/* Mobile (<500px) */
@media (max-width: 500px) {
  .hub-picks {
    margin-top: var(--space-5);
  }

  .hub-picks__label {
    margin-bottom: var(--space-3);
  }

  .hub-picks__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .hub-pick {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-1);
  }

  .mission--hub .mission__statement {
    font-size: var(--fs-xl);
    margin-bottom: var(--space-3);
  }

  .mission--hub .mission__body {
    font-size: var(--fs-sm);
    max-width: none;
  }

  .mission--hub .mission__eyebrow {
    margin-bottom: var(--space-2);
  }
}

/* ── Hub decision Q&A — editorial reader-voice list ────────────────────────
   Used by "Where to start" and "The real cost" sections. Each item is an
   italic serif quote of a reader's question, followed by the matching
   article title. No boxes, no left accent bars — matches the containerless
   feel of the four tools and dive deeper sections. */

.hub-decision {
  max-width: 68ch;            /* editorial measure for Q&A readability */
  margin-inline: auto;
}

.router__list--hub {
  border-top: 1px solid var(--color-line);
}

.router__list--hub .router__item {
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-line);
  transition: padding-left var(--duration-base) var(--ease-out);
}

.router__list--hub .router__item:hover {
  padding-left: var(--space-3);
}

/* Italic serif quote — reader voice */
.router__list--hub .router__quote {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-ink);
  max-width: none;
}

/* Remove the blocky left accent bar — answer becomes a clean editorial line */
.router__list--hub .router__answer {
  padding-left: 0;
  border-left: none;
  text-align: left;
  align-items: flex-start;
}

.router__list--hub .router__answer-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-ink);
  text-align: left;
  display: inline-flex;
  gap: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

/* Accent mono arrow prefix — replaces the left accent bar */
.router__list--hub .router__answer-title::before {
  content: "→";
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}

.router__list--hub .router__item:hover .router__answer-title {
  color: var(--color-accent-hover);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 4px;
}

/* ── Hidden batches + show-more (mono text link, matches CTA pattern) ──── */

.router__item--hidden {
  display: none;
}

.hub-decision__more {
  display: block;
  margin: var(--space-8) auto 0;
  padding: 0 0 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-ink);
  border-radius: 0;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.hub-decision__more:hover,
.hub-decision__more:focus-visible {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  background: transparent;
  outline: none;
}

.hub-decision__more[hidden] {
  display: none;
}

@media (max-width: 500px) {
  .router__list--hub .router__item {
    padding-block: var(--space-5);
    gap: var(--space-2);
  }

  .router__list--hub .router__quote {
    font-size: var(--fs-base);
  }

  .router__list--hub .router__answer-title {
    font-size: var(--fs-sm);
  }
}

/* ── The four tools, editorial feature entries ─────────────────────────────
   No cards. Each tool is a full-width 2-column feature: narrow identity
   column (hanging outlined number + title + tagline) on the left, wide
   details column (body + notice/use-when definition list + CTA) on the
   right. Horizontal hairlines separate entries. */

.tools-editorial {
  margin-top: var(--space-10);
}

.tool-entry {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  column-gap: var(--space-8);
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
}

.tool-entry:first-child {
  border-top: none;
  padding-top: 0;
}

/* Left column — identity: number, title, tagline */
.tool-entry__identity {
  display: flex;
  flex-direction: column;
}

.tool-entry__number {
  font-family: var(--font-serif);
  font-size: 80px;
  font-weight: var(--fw-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-4);
  user-select: none;
  transition: -webkit-text-stroke-color var(--duration-base) var(--ease-out);
}

.tool-entry:hover .tool-entry__number,
.tool-entry:focus-within .tool-entry__number {
  -webkit-text-stroke-color: var(--color-accent);
}

.tool-entry__title {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.1;
  margin: 0;
}

.tool-entry__title a {
  color: var(--color-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--duration-base) var(--ease-out);
}

.tool-entry__title a:hover,
.tool-entry__title a:focus-visible {
  background-size: 100% 2px;
  outline: none;
}

.tool-entry__tagline {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  font-style: italic;
  line-height: 1.5;
  color: var(--color-ink-muted);
  margin: var(--space-3) 0 0;
}

/* Right column — details: body, meta definitions, CTA */
.tool-entry__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.tool-entry__body {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  margin: 0;
  max-width: 62ch; /* editorial measure for body prose */
}

/* Definition list for "What you notice" + "Reach for it when" — presented
   as a 2-column grid: mono caps label on the left, serif body on the right.
   Feels like a magazine spec review. */
.tool-entry__meta {
  display: grid;
  grid-template-columns: minmax(140px, 180px) 1fr;
  column-gap: var(--space-5);
  row-gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--color-line);
  width: 100%;
  max-width: 72ch;
}

.tool-entry__meta-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  line-height: 1.6;
  margin: 0;
  padding-top: 3px; /* align baseline with serif text */
}

.tool-entry__meta-text {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0;
}

/* CTA — mono caps text link, matches category column CTA for consistency */
.tool-entry__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              gap var(--duration-fast) var(--ease-out);
}

.tool-entry__cta:hover,
.tool-entry__cta:focus-visible {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  gap: var(--space-3);
  outline: none;
}

/* Tablet — stack identity above details */
@media (max-width: 899px) {
  .tool-entry {
    grid-template-columns: 1fr;
    row-gap: var(--space-5);
    padding: var(--space-7) 0;
  }
  .tool-entry__number {
    font-size: 64px;
    margin-bottom: var(--space-3);
  }
  .tool-entry__title {
    font-size: var(--fs-xl);
  }
  .tool-entry__body {
    font-size: var(--fs-base);
  }
}

/* Mobile — tighter, meta becomes stacked label-above-text */
@media (max-width: 499px) {
  .tool-entry__number {
    font-size: 48px;
  }
  .tool-entry__meta {
    grid-template-columns: 1fr;
    row-gap: var(--space-2);
  }
  .tool-entry__meta-text {
    margin-bottom: var(--space-3);
    font-size: var(--fs-sm);
  }
  .tool-entry__meta-label {
    padding-top: 0;
  }
}

/* ── Hero sensory cues ────────────────────────────────────────────────────── */

.hub-senses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-10);
}

.hub-sense {
  padding: var(--space-5);
  background: rgba(248, 250, 252, 0.78);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: var(--radius-md);
  backdrop-filter: blur(12px);
}

.hub-sense__title {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
}

.hub-sense__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin: 0;
}

/* ── Symptom cards ───────────────────────────────────────────────────────── */

.symptom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-10);
}

@media (max-width: 500px) {
  .symptom-grid {
    grid-template-columns: 1fr;
  }
}

.symptom-card {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.symptom-card__label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.symptom-card__quote {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: 1.35;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink);
  margin: var(--space-3) 0 var(--space-3);
}

.symptom-card__body {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin: 0;
}

/* ── Journey cards ───────────────────────────────────────────────────────── */

.journey-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-12);
}

@media (max-width: 899px) {
  .journey-grid {
    grid-template-columns: 1fr;
  }
}

.journey-step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.journey-step__number {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: 0.1em;
}

.journey-step__zone {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0;
}

.journey-step__problem-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.journey-step__problem,
.journey-step__result {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin: 0;
}

.journey-step__tool {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.4;
  color: var(--color-accent);
}


/* ── Room-plan cards ──────────────────────────────────────────────────────── */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-10);
}

@media (max-width: 899px) {
  .plan-grid {
    grid-template-columns: 1fr;
  }
}

.hub-plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.hub-plan__title {
  font-family: var(--font-sans);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--color-ink);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}

.hub-plan__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hub-plan__row-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-ink-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-plan__row-text {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
}

.hub-plan__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.hub-plan__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--duration-fast) var(--ease-out);
}

.hub-plan:hover .hub-plan__cta {
  gap: var(--space-3);
  color: var(--color-accent-hover);
}

.hub-plan:hover .hub-plan__cta svg {
  transform: translateX(2px);
}

/* ── Responsive — tablet ─────────────────────────────────────────────────── */

@media (max-width: 899px) {
  .hub-plan__title,
  .journey-step__zone {
    font-size: var(--fs-xl);
  }
}

/* ── Responsive — mobile ────────────────────────────────────────────────── */

@media (max-width: 500px) {
  .journey-step {
    padding: var(--space-4);
  }

  .hub-plan {
    padding: var(--space-4);
  }

  .hub-plan__title {
    font-size: var(--fs-lg);
  }
}

/* ── Dive deeper, newspaper columns ───────────────────────────────────────
   No cards. Four open columns separated by thin vertical rules, like a
   newspaper contents page. Each column: hanging outlined number, big
   display title, italic serif desc, numbered article list, text CTA. */

.category-columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Explicit rows for subgrid alignment: num, title, desc, 5 links, cta */
  grid-template-rows: auto auto auto repeat(5, auto) auto;
  column-gap: var(--space-6);
  row-gap: 0;
  margin-top: var(--space-10);
  position: relative;
}

/* Each column is a subgrid — rows inherit from parent so every column's
   title row, desc row, link 01, link 02, … line up horizontally. */
.category-column {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 9;
}

.category-column + .category-column::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--space-6) / -2);
  width: 1px;
  background: var(--color-line);
  pointer-events: none;
}

/* Hanging display number — outlined serif, ink-subtle stroke */
.category-column__num {
  grid-row: 1;
  font-family: var(--font-serif);
  font-size: 44px;
  font-weight: var(--fw-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
  user-select: none;
  transition: -webkit-text-stroke-color var(--duration-base) var(--ease-out);
}

.category-column:hover .category-column__num,
.category-column:focus-within .category-column__num {
  -webkit-text-stroke-color: var(--color-accent);
}

/* Category title — big sans display, animated underline on hover */
.category-column__title {
  grid-row: 2;
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-snug);
  line-height: 1.15;
  margin: 0;
}

.category-column__title a {
  color: var(--color-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 2px;
  background-position: 0 100%;
  transition: background-size var(--duration-base) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.category-column__title a:hover,
.category-column__title a:focus-visible {
  background-size: 100% 2px;
  outline: none;
}

/* Italic serif description — editorial voice */
.category-column__desc {
  grid-row: 3;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin: var(--space-3) 0 var(--space-5);
}

/* Article list — nested subgrid so each link row aligns across columns.
   Occupies rows 4–8 of the parent (5 rows, one per article). */
.category-column__links {
  grid-row: 4 / span 5;
  display: grid;
  grid-template-rows: subgrid;
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  counter-reset: col-link;
  border-top: 1px solid var(--color-line);
}

.category-column__links li {
  counter-increment: col-link;
  border-bottom: 1px solid var(--color-line);
}

.category-column__links li a {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: baseline;
  gap: var(--space-2);
  padding: 10px 0;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              padding-left var(--duration-fast) var(--ease-out);
}

.category-column__links li a::before {
  content: "0" counter(col-link);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  color: var(--color-ink-subtle);
  letter-spacing: 0.05em;
}

.category-column__links li a:hover,
.category-column__links li a:focus-visible {
  color: var(--color-accent-hover);
  padding-left: 4px;
  outline: none;
}

.category-column__links li a:hover::before,
.category-column__links li a:focus-visible::before {
  color: var(--color-accent);
}

/* Footer CTA — a plain text link, not a bar. Animated underline + arrow.
   Pinned to row 9 (the shared CTA row) so all four CTAs align. */
.category-column__cta {
  grid-row: 9;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--color-ink);
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              gap var(--duration-fast) var(--ease-out);
}

.category-column__cta:hover,
.category-column__cta:focus-visible {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  gap: var(--space-3);
  outline: none;
}

/* Tablet — 2 columns, 2 sets of 9 rows so each pair aligns internally.
   Row 10 is an explicit spacer between the pairs (independent of inner
   row spacing). Hide the vertical rule on the first column of row 2. */
@media (max-width: 999px) and (min-width: 600px) {
  .category-columns {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows:
      auto auto auto repeat(5, auto) auto    /* rows 1–9: pair 1 */
      var(--space-8)                           /* row 10: spacer */
      auto auto auto repeat(5, auto) auto;   /* rows 11–19: pair 2 */
    row-gap: 0;
  }
  .category-column:nth-child(1),
  .category-column:nth-child(2) {
    grid-row: 1 / span 9;
  }
  .category-column:nth-child(3),
  .category-column:nth-child(4) {
    grid-row: 11 / span 9;
  }
  .category-column:nth-child(odd)::before {
    display: none;
  }
}

/* Mobile — 1 column, block fallback. Subgrid is unnecessary since there
   is no horizontal neighbour to align with. Reset grid-row placements. */
@media (max-width: 599px) {
  .category-columns {
    display: block;
    row-gap: 0;
  }
  .category-column {
    display: block;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-line);
  }
  .category-column:first-child {
    border-top: none;
    padding-top: 0;
  }
  .category-column + .category-column::before {
    display: none; /* horizontal rule comes from border-top now */
  }
  .category-column__links {
    display: block;
    grid-row: auto;
  }
  .category-column__num,
  .category-column__title,
  .category-column__desc,
  .category-column__cta {
    grid-row: auto;
  }
  .category-column__num {
    font-size: 36px;
  }
  .category-column__title {
    font-size: var(--fs-lg);
  }
}

/* ── Misconceptions, editorial stack ──────────────────────────────────────
   No cards, no boxes. Pure typography: hanging outlined numbers in the
   margin, struck-through sans headline (the myth), flowing serif reply
   (the reality), inline middot-separated article links (the push). Thin
   hairline rule between entries for rhythm. */

.myth-stack {
  list-style: none;
  margin: var(--space-10) auto 0;
  padding: 0;
  max-width: 72ch; /* editorial measure — readable body width */
  counter-reset: myth;
}

.myth-entry {
  display: grid;
  grid-template-columns: 88px 1fr;
  column-gap: var(--space-5);
  padding: var(--space-7) 0;
  border-top: 1px solid var(--color-line);
}

.myth-entry:first-child {
  border-top: none;
}

/* Outlined display number hanging in the left margin */
.myth-entry__num {
  font-family: var(--font-serif);
  font-size: 56px;
  font-weight: var(--fw-bold);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px var(--color-ink-subtle);
  font-variant-numeric: tabular-nums;
  user-select: none;
  transition: -webkit-text-stroke-color var(--duration-base) var(--ease-out);
}

.myth-entry:hover .myth-entry__num,
.myth-entry:focus-within .myth-entry__num {
  -webkit-text-stroke-color: var(--color-accent);
}

.myth-entry__body {
  min-width: 0; /* allow text to wrap properly in grid child */
}

/* The myth headline — big, bold, struck through, in muted ink so the
   reality below reads as the "real" answer. */
.myth-entry__myth {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  letter-spacing: var(--tracking-snug);
  color: var(--color-ink-muted);
  margin: 0;
  text-decoration: line-through;
  text-decoration-color: var(--color-ink-subtle);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* The reality reply — serif body, full ink, generous line-height. Feels
   like the designer answering in their own voice. */
.myth-entry__reality {
  font-family: var(--font-serif);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-ink);
  margin: var(--space-3) 0 0;
}

/* Inline article links with a small mono caps label. No pills, no
   backgrounds — just underlined text on hover. Middot separates items. */
.myth-entry__links {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-ink-muted);
  margin: var(--space-4) 0 0;
}

.myth-entry__links-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-subtle);
  margin-right: var(--space-2);
}

.myth-entry__link {
  color: var(--color-ink);
  text-decoration: none;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 0 100%;
  transition: background-size var(--duration-base) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.myth-entry__link:hover,
.myth-entry__link:focus-visible {
  color: var(--color-accent-hover);
  background-size: 100% 1px;
  outline: none;
}

.myth-entry__sep {
  color: var(--color-ink-subtle);
  user-select: none;
}

/* Mobile: number sits above the body instead of hanging to the side */
@media (max-width: 599px) {
  .myth-entry {
    grid-template-columns: 1fr;
    row-gap: var(--space-3);
    padding: var(--space-5) 0;
  }
  .myth-entry__num {
    font-size: 40px;
  }
  .myth-entry__myth {
    font-size: var(--fs-lg);
  }
  .myth-entry__reality {
    font-size: var(--fs-sm);
  }
}