/* ============================================================================
   home.css — homepage only (linked conditionally via base.ejs `extraCss`).
   References tokens.css (+ the [data-vertical] map) and components.css
   (.rk, .rk-draft, .capture, .btn) — no hardcoded hex, no duplicate rules.
   ============================================================================ */

/* ── Layout primitives ────────────────────────────────────────────────────── */
.home-container { max-width: 1280px; margin-inline: auto; padding-inline: clamp(16px, 5vw, 64px); }
.bleed { width: 100%; }

.home section { padding: 0px 0px 40px; }
.home section + section { border-top: 1px solid var(--color-hairline);    padding-top: 30px; }
.home .fold,
.home .home-hero { border-top: none; }
/* Bands alternate ground/panel to segment the scroll without rules everywhere. */
.home .brand-slot-section,
.home .latest,
.home .capture.home-newsletter { background: var(--color-panel); }
.home .latest,
.home .capture.home-newsletter,
.home .transmissions { border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-5); }
.section-head__label {
  font: var(--type-meta); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: var(--space-2);
}
.section-head__label::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--accent); }
.view-all { font: var(--type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); text-decoration: none; white-space: nowrap; }
.view-all:hover, .view-all:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* ── Reusable card (article-card.ejs) ─────────────────────────────────────── */
.card { display: block; }
.card__link { display: block; text-decoration: none; color: inherit; }
.card__media {
  position: relative; aspect-ratio: 16/9; overflow: hidden; border-radius: var(--radius);
  background: var(--color-panel);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__media[data-placeholder] {
  background:
    radial-gradient(120% 140% at 70% 20%, color-mix(in srgb, var(--vertical) 22%, transparent), transparent 60%),
    linear-gradient(to bottom, var(--color-panel), var(--color-ground));
}
.card__body { padding: var(--space-3); }
.card__eyebrow { font: var(--type-meta); letter-spacing: .1em; text-transform: uppercase; color: var(--vertical-ink); }
.card .rk-draft { margin-left: .6em; }
.card__title {
  display: block; margin: .4rem 0 0; color: var(--color-text-high); font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-card); line-height: 1.25;
}
.card__excerpt { font: var(--type-body); font-size: var(--fs-excerpt); color: var(--color-text); margin: .5rem 0 0; }
.card__meta { font: var(--type-meta); letter-spacing: .04em; color: var(--color-text-muted); margin: var(--space-2) 0 0; }
.card__meta time { color: inherit; }

.card--grid,
.card--list { border-top: 2px solid var(--vertical); padding-top: var(--space-3); }

@media (prefers-reduced-motion: no-preference) {
  .card__media img { transition: transform var(--dur-slow) var(--ease-out); }
  .card { transition: box-shadow var(--dur-slow) var(--ease-out); }
  .card:hover .card__media img,
  .card:focus-within .card__media img { transform: scale(1.03); }
  .card:hover,
  .card:focus-within {
    box-shadow: 0 0 40px -12px color-mix(in srgb, var(--vertical) 30%, transparent);
  }
}
.card:hover .card__title,
.card:focus-within .card__title { color: var(--color-text-high); }

/* Stacked (hero aside) — horizontal mini-card, image left ~40% */
.card--stacked {
  display: grid;
  /* grid-template-columns: 40% 1fr; */
  gap: var(--space-3);
  align-items: start;
}
.card--stacked .card__media { aspect-ratio: 4/3; }
.card--stacked .card__body { padding: 10px; }
.card--stacked .card__title { font-size: 1.05rem; }
.card--stacked + .card--stacked { margin-top: var(--space-4); }

/* Feature (desk selects / latest lead) — big image, excerpt shown */
.card--feature .card__media { aspect-ratio: 3/2; }
.card--feature .card__title { font-size: var(--fs-feature); }

/* ── Fluid type tokens ────────────────────────────────────────────────────── */
.home {
  --fs-hero: clamp(2rem, 5vw, 3.6rem);
  --fs-feature: clamp(1.5rem, 3vw, 2.4rem);
  --fs-card: clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-excerpt: clamp(.95rem, 1.1vw, 1.05rem);
}

/* ── Fixed homepage hero carousel (home-hero-carousel.ejs) ─────────────────── */
.home-hero { padding-block: 0; }
.home-hero__carousel { position: relative; width: 100%; height:550px;aspect-ratio: 16/9; overflow: hidden; background: var(--color-panel); }
.home-hero__slide {
  position: absolute; inset: 0; opacity: 0; z-index: 1;
}
.home-hero__slide.is-active { opacity: 1; z-index: 2; }
.home-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hero__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  background: rgba(5,6,10,.45); backdrop-filter: blur(4px); color: var(--color-text-high);
  font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.home-hero__nav:hover, .home-hero__nav:focus-visible { background: rgba(5,6,10,.7); }
.home-hero__nav--prev { left: var(--space-3); }
.home-hero__nav--next { right: var(--space-3); }
.home-hero__dots { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: .5rem; }
.home-hero__dot {
  width: 10px; height: 10px; border-radius: 50%; padding: 0; border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.25);
}
.home-hero__dot.is-active { background: var(--color-text-high); }
.home-hero__dot:focus-visible, .home-hero__nav:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .home-hero__slide { transition: opacity .8s var(--ease-out); }
}

/* Static text overlay — same on every slide, so it sits above the carousel
   (z-index 5, above slides/nav/dots) rather than being part of any one slide.
   pointer-events:none so it never intercepts clicks meant for the nav/dots
   beneath it; a translucent gradient (not a solid fill) keeps the image
   visible through the text block. */
.home-hero__overlay {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-4);
  background: radial-gradient(60% 60% at 50% 50%, rgba(5,6,10,.55), transparent 75%);
}
.home-hero__tagline {
  /* Matches whatifmag.com's hero H1: 35px at ~390px viewport up to 54px at
     1280px+, measured directly (computed getComputedStyle, not guessed). */
  font-family: var(--font-display); font-weight: 700; color: var(--color-text-high);
  font-size: clamp(2.2rem, 4.3vw, 3.4rem); line-height: 1.1; margin: 0 0 var(--space-3);
  text-shadow: 0 2px 20px rgba(0,0,0,.6); width: 65%; text-align: left;
}
.home-hero__dek {
  /* whatifmag.com's dek is a fixed 22px at every width, not fluid. */
  font: var(--type-body); font-size: 1.375rem; color: var(--color-text);
 margin: 0; text-shadow: 0 1px 12px rgba(0,0,0,.6); text-align: left; width: 65%;
}

/* ── About strip — short intro block directly under the hero carousel ──────── */
.home-about__inner { max-width: var(--measure-wide); text-align: left; }
.home-about__heading { font: var(--type-h2); color: var(--color-text-high); margin: 0 0 var(--space-3); }
.home-about__text { margin: 0; color: var(--color-text); }

/* ── THE FOLD — same pattern as Desk Selects, mirrored (feature left/big,
   stacked callouts right/small). Reuses article-card.ejs; no bespoke
   photo+scrim markup left to style here. ────────────────────────────────── */
.fold { position: relative; }
.fold[data-vertical] {
  background:none;
}
.fold__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 768px) {
  .fold__aside { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .fold__aside .card--stacked + .card--stacked { margin-top: 0; }
}
@media (min-width: 1024px) {
  /* Feature is first in the DOM, so it naturally lands in the first (8fr,
     left) column — no `order` override needed, unlike Desk Selects, which
     deliberately puts its small cards first in the DOM instead. */
  .fold__inner { grid-template-columns: 8fr 4fr; align-items: start; }
  .fold__aside { display: flex; flex-direction: column; gap: var(--space-4); }
  .fold__aside .card--stacked + .card--stacked { margin-top: 0; }
}

/* ── THE NINE (vertical navigator) ────────────────────────────────────────── */
.nine-section { margin: 20px 0px;
    padding: 0px !important; background: var(--color-panel); }
.nine { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--color-hairline); border: 1px solid var(--color-hairline); border-radius: var(--radius); overflow: hidden; }
.nine__tile {
  display: block; background: var(--color-panel); padding: var(--space-4); text-decoration: none;
  border-top: 2px solid var(--vertical); min-height: 48px;
}
.nine__name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-text-high); }
.nine__sub { display: block; font: var(--type-meta); color: var(--color-text-muted); margin-top: .4rem; letter-spacing: .02em; text-transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .nine__tile { transition: box-shadow var(--dur-slow) var(--ease-out); }
  .nine__tile:hover, .nine__tile:focus-visible { box-shadow: inset 0 0 0 1px var(--vertical), 0 0 30px -10px color-mix(in srgb, var(--vertical) 35%, transparent); }
}
@media (min-width: 768px) { .nine { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nine { grid-template-columns: repeat(3, 1fr); } }

/* ── THE DESK SELECTS ─────────────────────────────────────────────────────── */
.desk__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.desk__feature { order: -1; }
@media (min-width: 768px) {
  .desk__aside { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .desk__aside .card--stacked + .card--stacked { margin-top: 0; }
}
@media (min-width: 1024px) {
  .desk__grid { grid-template-columns: 4fr 8fr; align-items: start; }
  .desk__feature { order: 0; }
  .desk__aside { display: flex; flex-direction: column; gap: var(--space-4); }
  .desk__aside .card--stacked + .card--stacked { margin-top: 0; }
}

/* ── THE 2036 BRAND SLOT ──────────────────────────────────────────────────── */
.brand-slot-section { background: var(--color-panel); }
.brand-slot {
  margin: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  border-width: 2px; /* distinct, obviously-a-frame border vs. editorial cards (no border) */
}
.brand-slot__media { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-ground); }
.brand-slot__media img { width: 100%; height: 100%; object-fit: cover; }
.brand-slot__media[data-placeholder] {
  background: radial-gradient(120% 140% at 30% 20%, color-mix(in srgb, var(--vertical) 30%, transparent), transparent 60%), var(--color-ground);
}
.brand-slot .ad-label { border-color: var(--vertical); color: var(--vertical-ink); }
.brand-slot .brand .tm { color: var(--vertical-ink); }
@media (prefers-reduced-motion: no-preference) {
  .brand-slot__media img { transition: transform 10s var(--ease-out); }
  .brand-slot:hover .brand-slot__media img { transform: scale(1.05); }
}
@media (min-width: 768px) { .brand-slot { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ── LATEST DISPATCHES ────────────────────────────────────────────────────── */
.latest__lead { margin-bottom: var(--space-5); }
.card--list { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.card--list .card__media { aspect-ratio: 16/9; }
.card--list .card__title { font-size: var(--fs-feature); }
@media (min-width: 768px) {
  .card--list { grid-template-columns: 6fr 6fr; align-items: center; }
  .card--list .card__media { aspect-ratio: 4/3; }
}
/* Two curated leads side by side — each card stays stacked (media over body)
   so it doesn't fight the outer 50/50 split at typical desktop widths. */
.latest__lead--split { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.latest__lead--split .card--list { grid-template-columns: 1fr; }
.latest__lead--split .card--list .card__media { aspect-ratio: 16/9; }
@media (min-width: 640px) {
  .latest__lead--split { grid-template-columns: 1fr 1fr; align-items: start; }
}
.latest__row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .latest__row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .latest__row { grid-template-columns: repeat(4, 1fr); } }

/* ── CORRESPONDENTS — Two Signals ─────────────────────────────────────────── */
.correspondents { display: grid; grid-template-columns: 1fr; }
.correspondent {
  padding: var(--space-5) 0; border-top: 2px solid var(--color-hairline);
}
.correspondent[data-keyline="cyan"] { border-top-color: var(--accent); }
.correspondent[data-keyline="caution"] { border-top-color: var(--caution); }
.correspondent__avatar {
  width: auto;
    height: 350px;
    border-radius: 3%;
    object-fit: cover;
    display: block;
    margin-bottom: var(--space-3);
}
.correspondent__avatar--fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--color-text-high);
  background: var(--color-panel); border: 1px solid var(--color-hairline);
}
.correspondent__role { font: var(--type-meta); letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 .3rem; }
.correspondent[data-keyline="cyan"] .correspondent__role { color: var(--accent); }
.correspondent[data-keyline="caution"] .correspondent__role { color: var(--caution); }
.correspondent__name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--color-text-high); margin: 0 0 var(--space-3); }
.correspondent__bio { font: var(--type-body); color: var(--color-text); margin: 0 0 var(--space-3); }
.correspondent__hook { display: block; text-decoration: none; color: var(--color-text-high); font-family: var(--font-display); font-weight: 500; }
.correspondent__hook:hover { color: var(--accent); }
.correspondent__meta { display: block; font: var(--type-meta); color: var(--color-text-muted); margin-top: .3rem; }
@media (prefers-reduced-motion: no-preference) {
  .correspondent__avatar, .correspondent__avatar--fallback { transition: box-shadow var(--dur-slow) var(--ease-out); }
  .correspondent:hover .correspondent__avatar,
  .correspondent:hover .correspondent__avatar--fallback { box-shadow: var(--glow-hover); }
}
@media (min-width: 768px) {
  .correspondents:not(.correspondents--single) { padding-top: 60px;
    grid-template-columns: 1fr 1fr; gap: var(--space-6);
  }
  .correspondents:not(.correspondents--single) .correspondent { border-top: none; padding: 0; }
  .correspondents:not(.correspondents--single) .correspondent:first-child { border-right: 1px solid var(--color-hairline); padding-right: var(--space-6); }
  .correspondents:not(.correspondents--single) .correspondent:last-child { padding-left: var(--space-6); }
}

/* ── VERTICAL IN FOCUS (sanctioned single-flood band) ─────────────────────── */
.focus[data-vertical] {
  background:
    radial-gradient(70% 60% at 20% 30%, color-mix(in srgb, var(--vertical) 12%, transparent), transparent 70%),
    var(--color-ground);
}
.focus__label { color: var(--vertical-ink); }
.focus__label::before { background: var(--vertical); }
.focus__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.focus__cards { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 480px) { .focus__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .focus__grid { grid-template-columns: 7fr 5fr; align-items: start; }
}

/* ── TRANSMISSIONS ─────────────────────────────────────────────────────────── */
.transmission-list { list-style: none; margin: 0; padding: 0; }
.transmission { border-bottom: 1px solid var(--color-hairline); }
.transmission:first-child { border-top: 1px solid var(--color-hairline); }
.transmission__link {
  display: grid; grid-template-columns: 72px 1fr auto; gap: var(--space-3); align-items: center;
  padding: var(--space-3) 0; text-decoration: none;
}
.transmission__thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; background: var(--color-panel); flex: 0 0 auto; }
.transmission__thumb img { width: 100%; height: 100%; object-fit: cover; }
.transmission__thumb[data-placeholder] {
  background: radial-gradient(120% 140% at 70% 20%, var(--accent-glow), transparent 60%), var(--color-panel);
}
.transmission__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--color-text-high); margin: 0; }
.transmission__excerpt {
  font: var(--type-body); font-size: .95rem; color: var(--color-text-muted); margin: .2rem 0 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.transmission__meta { display: flex; align-items: center; gap: var(--space-3); }
.transmission__dateline { font: var(--type-meta); color: var(--color-text-muted); white-space: nowrap; }
.transmission__play {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); flex: 0 0 auto;
}
.transmission__link:hover .transmission__play,
.transmission__link:focus-visible .transmission__play { background: color-mix(in srgb, var(--accent) 18%, transparent); }
@media (max-width: 767px) {
  .transmission__link { grid-template-columns: 56px 1fr; }
  .transmission__meta { grid-column: 2; display: flex; justify-content: space-between; margin-top: .3rem; }
}

/* ── Dispatches from 2036 (primary newsletter band, §10) ──────────────────── */
.home .capture--band {
  background:
    radial-gradient(70% 90% at 50% 0%, var(--accent-glow), transparent 60%),
    var(--color-panel);
  border: none; border-radius: 0; text-align: center;
  padding: clamp(48px, 8vw, 112px) var(--grid-gutter);
}
.home .capture--band h3,
.home .capture--band > p,
.home .capture--band form,
.home .capture--band .nl-status {
  max-width: 640px; margin-inline: auto;
}
.home .capture--band h3 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-feature); }
.home .capture--band form { justify-content: center; }
.home .capture--band .nl-status { min-height: 1.1rem; }

/* ── Reveal-on-scroll (progressive enhancement; home-reveal.js) ──────────────
   The opacity:0 start state ONLY exists inside the no-preference branch, so
   content is fully visible by default — with no JS and/or reduced-motion,
   .reveal never leaves its base (visible) state. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(8px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ── TOPIC PAGE (/topics/:slug) — one landing band per vertical: latest cover
   image + the vertical's own [data-vertical] accent, standfirst from
   Category.description, lead post as a feature card, rest in a flat grid. ── */
.topic-hero { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; background: var(--color-panel); }
.topic-hero__media { position: absolute; inset: 0; }
.topic-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.topic-hero__media[data-placeholder] {
  background: radial-gradient(90% 90% at 30% 20%, color-mix(in srgb, var(--vertical) 28%, transparent), transparent 65%), var(--color-ground);
}
.topic-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,6,10,.1) 0%, rgba(5,6,10,.7) 65%, rgba(5,6,10,.92) 100%);
}
.topic-hero__inner { position: relative; z-index: 1; padding-block: clamp(64px, 14vw, 120px) var(--space-5); }
.topic-hero__eyebrow { display: block; color: var(--vertical-ink); margin: 0 0 var(--space-2); }
.topic-hero__title {
  font-family: var(--font-display); font-weight: 700; color: var(--color-text-high);
  font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1.05; margin: 0 0 var(--space-3);
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.topic-hero__dek {
  font: var(--type-body); font-size: 1.2rem; color: var(--color-text); max-width: 46rem;
  margin: 0 0 var(--space-3); text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.topic-hero__count { font: var(--type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.topic-hero__count strong { color: var(--vertical-ink); }

.topic-page__body { padding-block: var(--space-6); }
.topic-page__empty { color: var(--color-text-muted); }
.topic-grid__feature { margin-bottom: var(--space-6); }
.topic-grid--flat { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 640px) { .topic-grid--flat { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .topic-grid--flat { grid-template-columns: repeat(3, 1fr); } }

/* ── AUTHOR PAGE (/author/:slug) — correspondent portrait + full bio, then
   every dispatch they've filed via .topic-grid__feature / .topic-grid--flat
   above. data-keyline mirrors the homepage's "Two Signals" cyan/caution
   split so a correspondent reads the same accent everywhere they appear. ── */
.author-hero { padding-block: clamp(56px, 10vw, 96px) var(--space-6); border-bottom: 1px solid var(--color-hairline); }
.author-hero__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
.author-hero__portrait {
  width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius); overflow: hidden;
  border: 2px solid var(--color-hairline);
}
.author-hero__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.author-hero__portrait-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; color: var(--color-text-high);
  font-size: clamp(2rem, 10vw, 3.5rem);
  background: var(--color-panel);
}
.author-hero[data-keyline="cyan"] .author-hero__portrait { border-color: var(--accent); }
.author-hero[data-keyline="caution"] .author-hero__portrait { border-color: var(--caution); }
.author-hero__eyebrow { display: block; color: var(--accent); margin: 0 0 var(--space-2); }
.author-hero[data-keyline="caution"] .author-hero__eyebrow { color: var(--caution); }
.author-hero__name {
  font-family: var(--font-display); font-weight: 700; color: var(--color-text-high);
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; margin: 0 0 var(--space-2);
}
.author-hero__title { font: var(--type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.author-hero__bio { max-width: 42rem; }
.author-hero__bio p { font: var(--type-body); color: var(--color-text); margin: 0 0 var(--space-3); }
.author-hero__count { font: var(--type-meta); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-muted); margin: var(--space-3) 0 0; }
.author-hero__count strong { color: var(--color-text-high); }
@media (min-width: 640px) {
  /* 1fr / 2fr — portrait column is exactly a third of the row, text the other two-thirds. */
  .author-hero__inner { grid-template-columns: 1fr 2fr; align-items: start; gap: var(--space-6); }
}