/* hr.cafe: app.css. Consumes semantic/component tokens only (see tokens.css). */

/* =========================== RESET =========================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  :where(a) { color: inherit; }
  [hidden] { display: none !important; }
}

/* =========================== BASE =========================== */
@layer base {
  html {
    scroll-padding-top: calc(var(--nav-height) + var(--space-4));
    background: var(--color-bg);
  }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-body);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    display: flex;
    flex-direction: column;
  }
  main { flex: 1 0 auto; }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    font-optical-sizing: auto;
  }
  h1 { font-size: var(--text-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
  h2 { font-size: var(--text-h2); line-height: 1.08; letter-spacing: var(--tracking-display); }
  h3 { font-size: var(--text-h3); }
  p { text-wrap: pretty; }
  a { text-decoration-thickness: var(--hairline); text-underline-offset: 0.18em; }
  a:hover { text-decoration-color: var(--color-accent); }
  ::selection { background: var(--color-highlight); color: var(--neutral-12); }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-1); }
  hr { border: 0; border-top: var(--hairline) solid var(--color-border); margin-block: var(--space-6); }
  kbd {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    padding: 0 var(--space-1);
    border-radius: var(--radius-1);
    box-shadow: var(--shadow-hairline);
    color: var(--color-text-muted);
    background: var(--color-surface);
  }
  code { font-family: var(--font-mono); font-size: 0.9em; }
  abbr[title] { text-decoration: underline dotted; }
}

/* =========================== LAYOUT =========================== */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container-max));
    margin-inline: auto;
  }
  .container--read { width: min(100% - 2 * var(--gutter), var(--container-read)); margin-inline: auto; }
  .section { padding-block: var(--space-section); }
  .section--tight { padding-block: calc(var(--space-section) * 0.6); }
  .section--tint { background: var(--color-bg-subtle); }
  .section + .section--flush { padding-top: 0; }
  .stack > * + * { margin-top: var(--stack-sm); }
  .stack-md > * + * { margin-top: var(--stack-md); }
  .grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
  .grid > * { min-width: 0; }
  @media (min-width: 40rem) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .split {
    display: grid;
    gap: var(--space-7);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  @media (min-width: 64rem) {
    .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .split--reverse { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
    .split--aside { grid-template-columns: minmax(0, 1fr) 20rem; }
  }
  .split > * { min-width: 0; }
  .sticky-col { position: sticky; top: calc(var(--nav-height) + var(--space-5)); }
}

/* =========================== COMPONENTS =========================== */
@layer components {

  /* ----- Skip link ----- */
  .skip-link {
    position: absolute; left: var(--space-4); top: var(--space-2);
    transform: translateY(-160%);
    z-index: var(--z-toast);
    background: var(--color-surface-inverse); color: var(--color-text-inverse);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-control);
    transition: transform var(--motion-fast) var(--ease-out);
  }
  .skip-link:focus { transform: translateY(0); }
  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ----- Header / nav ----- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: var(--color-nav-bg);
    box-shadow: 0 var(--hairline) 0 0 var(--color-border);
    padding-top: var(--safe-top);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .site-header { -webkit-backdrop-filter: saturate(1.4) blur(var(--blur-1)); backdrop-filter: saturate(1.4) blur(var(--blur-1)); }
  }
  @media (prefers-reduced-transparency: reduce) { .site-header { background: var(--color-bg); } }
  .nav {
    height: var(--nav-height);
    display: flex; align-items: center; gap: var(--space-4);
    padding-inline: max(0px, var(--safe-left)) max(0px, var(--safe-right));
  }
  .brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    text-decoration: none; font-family: var(--font-display);
    font-size: var(--text-lg); letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-medium);
    min-height: var(--control-height);
    margin-right: auto;
  }
  .brand__mark { width: 38px; height: 38px; flex: none; object-fit: contain; }
  .brand__dot { color: var(--color-accent-text); }
  .primary-nav ul { display: flex; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
  .primary-nav a {
    display: inline-flex; align-items: center; min-height: var(--control-height);
    padding-inline: var(--space-3); border-radius: var(--radius-control);
    text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    transition: color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
  }
  .primary-nav a:hover { color: var(--color-text); background: var(--color-surface-2); }
  .primary-nav a[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 calc(-1 * var(--rule-heavy)) 0 0 var(--color-accent); border-radius: 0; }
  .nav-actions { display: flex; align-items: center; gap: var(--space-2); }
  .search-trigger {
    display: inline-flex; align-items: center; gap: var(--space-2);
    height: 38px; padding-inline: var(--space-3);
    border: 0; border-radius: var(--radius-pill);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
    color: var(--color-text-subtle); font-size: var(--text-sm);
  }
  .search-trigger svg { width: 16px; height: 16px; }
  .icon-btn {
    display: inline-grid; place-items: center;
    width: var(--control-height); height: var(--control-height);
    border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-text-muted);
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  }
  .icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
  .icon-btn svg { width: 20px; height: 20px; }
  .menu-btn { display: none; }
  @media (max-width: 22rem) { .nav { gap: var(--space-1); } .nav-actions { gap: 0; } .brand { font-size: var(--text-md); } }
  .theme-toggle .icon-moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
  @media (max-width: 60rem) {
    .primary-nav, .search-trigger__label, .search-trigger kbd { display: none; }
    .search-trigger { width: var(--control-height); height: var(--control-height); padding: 0; justify-content: center; background: transparent; box-shadow: none; }
    .search-trigger svg { width: 20px; height: 20px; }
    .menu-btn { display: inline-grid; }
    .nav .btn--nav { display: none; }
  }

  /* Mobile menu sheet (native dialog) */
  .sheet {
    margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh;
    width: min(24rem, 100%); max-width: 100%;
    border: 0; padding: calc(var(--space-5) + var(--safe-top)) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
    background: var(--color-bg); color: var(--color-text);
    box-shadow: var(--shadow-overlay);
  }
  .sheet::backdrop { background: var(--color-overlay); }
  .sheet[open] { animation: sheet-in var(--motion-slow) var(--ease-out); }
  @keyframes sheet-in { from { transform: translateX(8%); opacity: 0; } }
  .sheet__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-6); }
  .sheet nav ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
  .sheet nav a {
    display: flex; align-items: center; min-height: 52px; text-decoration: none;
    font-family: var(--font-display); font-size: var(--text-xl);
    border-bottom: var(--hairline) solid var(--color-border);
  }
  .sheet .btn { width: 100%; margin-top: var(--space-6); }

  /* ----- Buttons ----- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--control-height); padding: var(--space-2) var(--space-5);
    border: 0; border-radius: var(--radius-pill);
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--weight-semibold);
    text-decoration: none; text-align: center;
    transition: background-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
  }
  .btn svg { width: 18px; height: 18px; flex: none; }
  .btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
  .btn--primary:hover { background: var(--color-accent-hover); }
  .btn--secondary { background: transparent; color: var(--color-text); box-shadow: var(--shadow-hairline-strong); }
  .btn--secondary:hover { background: var(--color-surface-2); }
  .btn--ghost { background: transparent; color: var(--color-text-muted); padding-inline: var(--space-3); }
  .btn--ghost:hover { color: var(--color-text); background: var(--color-surface-2); }
  .btn--lg { min-height: var(--control-height-lg); padding-inline: var(--space-6); font-size: var(--text-base); }
  .btn--inverse { background: var(--color-text-inverse); color: var(--color-text); }
  .btn--nav { min-height: 40px; white-space: nowrap; }
  .btn:active { transform: scale(0.98); }
  .btn[aria-pressed="true"] { background: var(--color-accent-subtle); color: var(--color-accent-text); box-shadow: inset 0 0 0 var(--hairline) var(--color-accent); }
  .btn[disabled], .btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
  .text-link {
    color: var(--color-accent-text); font-weight: var(--weight-semibold); font-size: var(--text-sm);
    text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-1);
    min-height: var(--control-height);
  }
  .text-link:hover { text-decoration: underline; }
  .text-link .arrow { transition: transform var(--motion-fast) var(--ease-out); }
  .text-link:hover .arrow { transform: translateX(3px); }

  /* ----- Eyebrow, badges, chips ----- */
  .eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--color-text-muted);
  }
  .eyebrow--pill {
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
  }
  .eyebrow__dot { width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--color-accent); flex: none; }
  .badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 2px var(--space-2); border-radius: var(--radius-pill);
    font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5;
    background: var(--color-surface-2); color: var(--color-text-muted);
  }
  .badge--field { background: var(--color-format-field-bg); color: var(--color-format-field); }
  .badge--turning { background: var(--color-format-turning-bg); color: var(--color-format-turning); }
  .badge--tried { background: var(--color-format-tried-bg); color: var(--color-format-tried); }
  .badge--illustrative { background: var(--color-warning-bg); color: var(--color-warning-text); }
  .badge--illustrative::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-round); background: currentColor; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .chip {
    min-height: var(--control-height); padding-inline: var(--space-4);
    border: 0; border-radius: var(--radius-pill);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted);
    text-decoration: none; display: inline-flex; align-items: center;
    transition: background-color var(--motion-fast) var(--ease-out);
  }
  .chip:hover { color: var(--color-text); background: var(--color-surface-2); }
  .chip[aria-pressed="true"], .chip[aria-current="true"] { background: var(--color-text); color: var(--color-bg); box-shadow: none; }

  /* ----- Notices ----- */
  .notice {
    display: flex; gap: var(--space-3); align-items: flex-start;
    padding: var(--space-4) var(--space-5); border-radius: var(--radius-card);
    background: var(--color-warning-bg); color: var(--color-text);
    font-size: var(--text-sm);
  }
  .notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--color-warning-text); }
  .notice strong { color: var(--color-warning-text); }
  .notice--success { background: var(--color-success-bg); }
  .notice--success svg, .notice--success strong { color: var(--color-success-text); }
  .notice--danger { background: var(--color-danger-bg); }
  .notice--danger svg, .notice--danger strong { color: var(--color-danger); }
  .ribbon {
    background: var(--color-surface-inverse); color: var(--color-text-inverse);
    font-size: var(--text-xs); text-align: center; padding: var(--space-2) var(--gutter);
  }
  .ribbon a { color: inherit; font-weight: var(--weight-semibold); }

  /* ----- Hero ----- */
  .hero { position: relative; padding-block: clamp(3rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem); isolation: isolate; overflow: clip; }
  .hero::before {
    content: ""; position: absolute; inset: -20% -10% auto -10%; height: 90%; z-index: -1;
    background:
      radial-gradient(40% 55% at 78% 30%, var(--glow-a), transparent 70%),
      radial-gradient(35% 45% at 12% 10%, var(--glow-b), transparent 70%);
    pointer-events: none;
  }
  .hero__grid { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 64rem) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); } }
  .hero__grid > * { min-width: 0; }
  .display {
    font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.035em;
    font-variation-settings: "SOFT" 50, "WONK" 0;
    margin-block: var(--space-5) var(--space-5);
  }
  .display em { font-style: normal; color: var(--color-accent-text); position: relative; white-space: nowrap; }
  .display em::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 0.12em;
    background: var(--color-highlight); z-index: -1; border-radius: var(--radius-pill);
    transform-origin: left; animation: underline-in 900ms var(--ease-out) 300ms both;
  }
  @keyframes underline-in { from { transform: scaleX(0); } }
  .lede { font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.3125rem); color: var(--color-text-muted); max-width: 38rem; line-height: 1.55; }
  .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
  .reassure { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
  .reassure li { display: inline-flex; align-items: center; gap: var(--space-2); }
  .reassure svg { width: 16px; height: 16px; color: var(--color-accent-text); flex: none; }

  /* ----- Cover (typographic story art, no invented portraits) ----- */
  .cover {
    --cover-bg: var(--color-format-turning-bg);
    --cover-ink: var(--color-format-turning);
    position: relative; display: flex; flex-direction: column; justify-content: space-between;
    aspect-ratio: 4 / 5; padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--radius-panel);
    background:
      radial-gradient(120% 80% at 100% 0%, color-mix(in oklch, var(--cover-ink) 18%, transparent), transparent 60%),
      var(--cover-bg);
    color: var(--color-text); overflow: hidden; isolation: isolate;
    box-shadow: var(--shadow-hairline);
  }
  .cover[data-format="field-note"] { --cover-bg: var(--color-format-field-bg); --cover-ink: var(--color-format-field); }
  .cover[data-format="what-we-tried"] { --cover-bg: var(--color-format-tried-bg); --cover-ink: var(--color-format-tried); }
  .cover::after {
    content: "\201C"; position: absolute; right: -0.08em; bottom: -0.42em; z-index: -1;
    font-family: var(--font-display); font-size: clamp(14rem, 30vw, 22rem); line-height: 1;
    color: color-mix(in oklch, var(--cover-ink) 16%, transparent);
  }
  .cover__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
  .cover__format { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--cover-ink); }
  .cover__line {
    font-family: var(--font-display); font-size: clamp(1.6rem, 2.2vw + 1rem, 2.6rem); line-height: 1.08;
    letter-spacing: var(--tracking-display); font-variation-settings: "SOFT" 100;
    text-wrap: balance;
  }
  .cover__by { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
  .cover__by strong { display: block; font-weight: var(--weight-semibold); }
  .cover__by span { color: var(--color-text-muted); }
  @media (max-width: 40rem) { .hero .cover { aspect-ratio: 1 / 1; } }
  .cover-link { display: block; text-decoration: none; border-radius: var(--radius-panel); transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out); }
  @media (hover: hover) and (pointer: fine) {
    .cover-link:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-lift); }
  }
  .cover-caption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

  /* ----- Avatar (monogram; hue passed as runtime data) ----- */
  .avatar {
    --avatar-size: var(--avatar-sm);
    width: var(--avatar-size); height: var(--avatar-size); flex: none;
    display: inline-grid; place-items: center; border-radius: var(--radius-round);
    font-family: var(--font-display); font-size: calc(var(--avatar-size) * 0.4); font-weight: var(--weight-medium);
    background: oklch(88% 0.05 var(--avatar-hue, 75));
    color: oklch(30% 0.07 var(--avatar-hue, 75));
    box-shadow: inset 0 0 0 1px oklch(30% 0.07 var(--avatar-hue, 75) / 0.12);
  }
  :root[data-theme="dark"] .avatar { background: oklch(36% 0.06 var(--avatar-hue, 75)); color: oklch(92% 0.04 var(--avatar-hue, 75)); }
  .avatar--md { --avatar-size: var(--avatar-md); }
  .avatar--lg { --avatar-size: var(--avatar-lg); }

  /* ----- Section head ----- */
  .section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-7); }
  .section-head > div { max-width: 44rem; }
  .section-head h2 { margin-top: var(--space-3); }
  .section-head p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-md); }

  /* ----- Story card ----- */
  .story-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5); border-radius: var(--radius-card);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
    container-type: inline-size;
  }
  @media (hover: hover) and (pointer: fine) {
    .story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
  }
  .story-card:focus-within { box-shadow: var(--shadow-lift); }
  .story-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
  .story-card :is(h2, h3) { font-size: var(--text-h3); line-height: 1.2; }
  .story-card :is(h2, h3) a { text-decoration: none; }
  .story-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .story-card :is(h2, h3) a:focus-visible { box-shadow: none; }
  .story-card :is(h2, h3) a:focus-visible::after { box-shadow: var(--focus-ring); }
  .story-card p { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; }
  .story-card__foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; gap: var(--space-3); border-top: var(--hairline) solid var(--color-border); }
  .byline { display: flex; align-items: center; gap: var(--space-3); min-width: 0; font-size: var(--text-sm); }
  .byline__text { min-width: 0; }
  .byline__name { font-weight: var(--weight-semibold); display: block; }
  .byline__role { color: var(--color-text-subtle); display: block; font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .story-card__read { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .story-card--feature { padding: var(--space-6); }
  .story-card--feature :is(h2, h3) { font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem); }
  @container (min-width: 36rem) {
    .story-card--feature p { font-size: var(--text-base); }
  }

  /* Row list (latest) */
  .story-list { list-style: none; padding: 0; border-top: var(--hairline) solid var(--color-border); }
  .story-row {
    position: relative; display: grid; gap: var(--space-2) var(--space-6);
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--space-5); border-bottom: var(--hairline) solid var(--color-border);
  }
  @media (min-width: 48rem) { .story-row { grid-template-columns: 9rem minmax(0, 1fr) auto; align-items: baseline; } }
  .story-row__date { font-size: var(--text-sm); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
  .story-row h3 { font-size: var(--text-h3); }
  .story-row h3 a { text-decoration: none; }
  .story-row h3 a::after { content: ""; position: absolute; inset: 0; }
  .story-row p { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); }
  .story-row__side { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  @media (hover: hover) and (pointer: fine) { .story-row:hover h3 { color: var(--color-accent-text); } }

  /* ----- Format explainer (bento) ----- */
  .bento { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 64rem) {
    .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bento > :nth-child(1) { grid-column: span 3; grid-row: span 2; }
    .bento > :nth-child(2), .bento > :nth-child(3) { grid-column: span 3; }
  }
  .bento > * { min-width: 0; }
  .format-tile {
    position: relative; border-radius: var(--radius-panel); padding: clamp(1.5rem, 3vw, 2.5rem);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
    display: flex; flex-direction: column; gap: var(--space-3); overflow: hidden;
  }
  .format-tile__glyph {
    font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase;
    font-weight: var(--weight-semibold);
  }
  .format-tile h3 { font-size: clamp(1.5rem, 1.5vw + 1rem, 2.25rem); line-height: 1.05; letter-spacing: var(--tracking-display); }
  .format-tile p { color: var(--color-text-muted); max-width: 34rem; }
  .format-tile__shape { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); padding: 0; list-style: none; }
  .format-tile__shape li { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); box-shadow: var(--shadow-hairline); color: var(--color-text-muted); }
  .format-tile__shape li + li::before { content: "→ "; color: var(--color-text-subtle); }
  .format-tile__example { margin-top: auto; padding-top: var(--space-4); border-top: var(--hairline) solid var(--color-border); font-size: var(--text-sm); }
  .format-tile__example a { font-family: var(--font-display); font-size: var(--text-md); text-decoration: none; }
  .format-tile__example a:hover { text-decoration: underline; }
  .format-tile--field .format-tile__glyph { color: var(--color-format-field); }
  .format-tile--turning .format-tile__glyph { color: var(--color-format-turning); }
  .format-tile--tried .format-tile__glyph { color: var(--color-format-tried); }
  .format-tile__quote {
    margin: auto 0 0; padding-top: var(--space-6);
    font-family: var(--font-display); font-size: clamp(2rem, 2.6vw + 1rem, 3.5rem); line-height: 1.02;
    letter-spacing: var(--tracking-display); color: var(--color-format-turning); font-variation-settings: "SOFT" 100;
    text-wrap: balance;
  }
  .format-tile__quote + .format-tile__example { margin-top: var(--space-5); }
  .rail-section { padding-block: 0 var(--space-4); }
  .format-tile--turning { background: linear-gradient(160deg, var(--color-format-turning-bg), var(--color-surface) 70%); }

  /* ----- People ----- */
  .person-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-5); border-radius: var(--radius-card);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) { .person-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); } }
  .person-card :is(h2, h3) { font-size: var(--text-lg); }
  .person-card :is(h2, h3) a { text-decoration: none; }
  .person-card :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .person-card__role { font-size: var(--text-sm); color: var(--color-text-muted); }
  .person-card__quote { font-family: var(--font-read); font-style: italic; font-size: var(--text-md); line-height: 1.45; color: var(--color-text); }
  .person-card__foot { margin-top: auto; font-size: var(--text-xs); color: var(--color-text-subtle); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

  /* ----- Topics ----- */
  .topic-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-3);
    padding: var(--space-6); border-radius: var(--radius-panel); min-height: 15rem;
    background: var(--color-surface); box-shadow: var(--shadow-hairline); overflow: hidden;
    text-decoration: none;
    transition: transform var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out);
  }
  .topic-card::before {
    content: ""; position: absolute; width: 14rem; height: 14rem; right: -5rem; top: -5rem; border-radius: var(--radius-round);
    background: radial-gradient(closest-side, oklch(85% 0.08 var(--topic-hue, 160) / 0.55), transparent);
    transition: transform var(--motion-slow) var(--ease-out);
  }
  @media (hover: hover) and (pointer: fine) {
    .topic-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
    .topic-card:hover::before { transform: scale(1.25); }
  }
  .topic-card :is(h2, h3) { font-size: var(--text-xl); position: relative; }
  .topic-card p { color: var(--color-text-muted); font-size: var(--text-sm); position: relative; }
  .topic-card__count { margin-top: auto; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-accent-text); position: relative; letter-spacing: var(--tracking-caps); text-transform: uppercase; }

  /* ----- Proof canvas: five answers → story ----- */
  .demo {
    border-radius: var(--radius-panel); background: var(--color-surface);
    box-shadow: var(--shadow-lift); overflow: hidden;
  }
  .demo__chrome { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--color-border); background: var(--color-bg-subtle); }
  .demo__dots { display: flex; gap: 6px; }
  .demo__dots span { width: 10px; height: 10px; border-radius: var(--radius-round); background: var(--color-border-strong); opacity: 0.5; }
  .demo__url { flex: 1; min-width: 0; font-size: var(--text-xs); color: var(--color-text-subtle); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabs { display: flex; gap: var(--space-1); padding: var(--space-3) var(--space-4) 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .tab {
    flex: none; min-height: var(--control-height); padding-inline: var(--space-4);
    border: 0; background: transparent; border-radius: var(--radius-control) var(--radius-control) 0 0;
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-subtle);
    box-shadow: inset 0 calc(-1 * var(--rule-heavy)) 0 0 transparent;
    display: inline-flex; align-items: center; gap: var(--space-2);
  }
  .tab__num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-round); font-size: var(--text-xs); box-shadow: var(--shadow-hairline); }
  .tab[aria-selected="true"] { color: var(--color-text); box-shadow: inset 0 calc(-1 * var(--rule-heavy)) 0 0 var(--color-accent); }
  .tab[aria-selected="true"] .tab__num { background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; }
  .tab-panel { padding: var(--space-5) var(--space-5) var(--space-6); border-top: var(--hairline) solid var(--color-border); min-height: 22rem; }
  .tab-panel[hidden] { display: none; }
  .tab-panel:not([hidden]) { animation: fade-up var(--motion-slow) var(--ease-out); }
  @keyframes fade-up { from { opacity: 0; transform: translateY(var(--motion-distance)); } }
  .qa { display: grid; gap: var(--space-4); }
  .qa dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
  .qa dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); padding: var(--space-3) var(--space-4); background: var(--color-bg-subtle); border-radius: var(--radius-control); }
  .draft { font-family: var(--font-read); font-size: var(--text-md); line-height: 1.6; }
  .draft h4 { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--space-3); line-height: 1.15; }
  .draft p + p { margin-top: var(--space-3); }
  .draft mark { background: var(--color-highlight-subtle); color: inherit; padding-inline: 2px; border-radius: 3px; box-shadow: inset 0 -2px 0 var(--color-highlight); }
  .draft__note { margin-top: var(--space-4); font-family: var(--font-sans); font-size: var(--text-xs); color: var(--color-text-subtle); display: flex; gap: var(--space-2); align-items: center; }
  .checklist { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
  .checklist li { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); }
  .checklist svg { width: 20px; height: 20px; flex: none; color: var(--color-accent-text); margin-top: 1px; }

  /* ----- Steps (how it works) ----- */
  .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: var(--space-5); }
  .steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-4); }
  .steps li::before {
    content: counter(step); display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: var(--radius-round); font-family: var(--font-display); font-size: var(--text-md);
    box-shadow: var(--shadow-hairline-strong); background: var(--color-surface);
  }
  .steps h3 { font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: 0; }
  .steps p { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: var(--space-1); }

  /* ----- FAQ ----- */
  .faq { border-top: var(--hairline) solid var(--color-border); }
  .faq details { border-bottom: var(--hairline) solid var(--color-border); }
  .faq summary {
    list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4);
    min-height: 3.75rem; padding-block: var(--space-4);
    font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.3;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: ""; width: 12px; height: 12px; flex: none; margin-right: var(--space-2);
    border-right: var(--rule-heavy) solid currentColor; border-bottom: var(--rule-heavy) solid currentColor;
    transform: rotate(45deg) translateY(-3px); transition: transform var(--motion-base) var(--ease-out);
    color: var(--color-text-subtle);
  }
  .faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
  .faq .faq__a { padding-bottom: var(--space-5); color: var(--color-text-muted); max-width: var(--measure); }
  .faq .faq__a p + p { margin-top: var(--space-3); }

  /* ----- Panels ----- */
  .panel {
    border-radius: var(--radius-panel); padding: clamp(1.5rem, 4vw, 3.5rem);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
  }
  .panel--inverse {
    background:
      radial-gradient(60% 90% at 90% 0%, color-mix(in oklch, var(--green-7) 28%, transparent), transparent 70%),
      var(--neutral-12);
    color: var(--neutral-1); box-shadow: none;
  }
  .panel--inverse .lede, .panel--inverse p { color: var(--roast-8); }
  .panel--inverse h2 { color: var(--neutral-0); }
  .panel--inverse .eyebrow { color: var(--green-7); }

  /* ----- Forms ----- */
  .field { display: grid; gap: var(--space-2); }
  .grid > .field { align-content: start; }
  .field + .field, .field + .fieldset, .fieldset + .field { margin-top: var(--space-5); }
  .label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .label .opt { font-weight: var(--weight-regular); color: var(--color-text-subtle); }
  .hint { font-size: var(--text-sm); color: var(--color-text-subtle); }
  .input, .textarea, .select {
    width: 100%; min-height: var(--control-height);
    padding: var(--space-2) var(--space-4);
    border: 0; border-radius: var(--radius-control);
    background: var(--color-surface); color: var(--color-text);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border-strong);
    font-size: var(--text-base);
    transition: box-shadow var(--motion-fast) var(--ease-out);
  }
  .textarea { min-height: 8rem; padding-block: var(--space-3); line-height: 1.55; resize: vertical; field-sizing: content; }
  .input:focus, .textarea:focus, .select:focus { outline: none; box-shadow: inset 0 0 0 var(--rule-heavy) var(--color-focus); }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 var(--rule-heavy) var(--color-danger); }
  .error { font-size: var(--text-sm); color: var(--color-danger); display: flex; gap: var(--space-2); align-items: center; }
  .error:empty { display: none; }
  .error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-round); background: var(--color-danger); color: var(--color-bg); font-size: var(--text-xs); font-weight: var(--weight-semibold); flex: none; }
  .counter { font-size: var(--text-xs); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; justify-self: end; }
  .fieldset { border: 0; padding: 0; margin: 0; }
  .fieldset legend { padding: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-bottom: var(--space-3); }
  .check { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; padding-block: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
  .check input { width: 1.25rem; height: 1.25rem; margin: 2px 0 0; accent-color: var(--color-accent); }
  .check + .check { border-top: var(--hairline) solid var(--color-border); }
  .choice-grid { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .choice { position: relative; display: block; cursor: pointer; }
  .choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .choice__body {
    display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
    padding: var(--space-5); border-radius: var(--radius-card);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
    transition: box-shadow var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
  }
  .choice__body svg { width: 24px; height: 24px; color: var(--color-accent-text); }
  .choice__title { font-family: var(--font-display); font-size: var(--text-lg); }
  .choice__meta { font-size: var(--text-xs); color: var(--color-accent-text); font-weight: var(--weight-semibold); }
  .choice__body p { font-size: var(--text-sm); color: var(--color-text-muted); }
  .choice input:checked + .choice__body { box-shadow: inset 0 0 0 var(--rule-heavy) var(--color-accent); background: var(--color-accent-subtle); }
  .choice input:focus-visible + .choice__body { box-shadow: var(--focus-ring); }

  /* Stepper */
  .stepper { list-style: none; padding: 0; display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
  .stepper li { flex: 1; min-width: 0; }
  .stepper__bar { display: block; height: 4px; border-radius: var(--radius-pill); background: var(--color-surface-2); overflow: hidden; }
  .stepper__bar::after { content: ""; display: block; height: 100%; width: 0; background: var(--color-accent); transition: width var(--motion-slow) var(--ease-out); }
  .stepper li[data-state="done"] .stepper__bar::after, .stepper li[data-state="current"] .stepper__bar::after { width: 100%; }
  .stepper li[data-state="current"] .stepper__bar::after { opacity: 0.55; }
  .stepper__label { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stepper li[data-state="current"] .stepper__label { color: var(--color-text); font-weight: var(--weight-semibold); }
  .form-step[hidden] { display: none; }
  .form-step:not([hidden]) { animation: fade-up var(--motion-slow) var(--ease-out); }
  .form-nav { display: flex; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--hairline) solid var(--color-border); flex-wrap: wrap; }
  .form-nav .autosave { font-size: var(--text-xs); color: var(--color-text-subtle); align-self: center; }
  .review-list { display: grid; gap: var(--space-4); }
  .review-list dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-subtle); }
  .review-list dd { margin: var(--space-1) 0 0; white-space: pre-wrap; font-size: var(--text-sm); }
  .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

  /* ----- Page head ----- */
  .page-head { padding-block: clamp(3rem, 6vw, 5rem) var(--space-6); position: relative; isolation: isolate; }
  .page-head::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 100%; z-index: -1;
    background: radial-gradient(40% 80% at 85% 0%, var(--glow-a), transparent 70%);
  }
  .page-head h1 { margin-top: var(--space-3); max-width: 18ch; }
  .page-head .lede { margin-top: var(--space-4); }
  .breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-subtle); }
  .breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); color: var(--color-border-strong); }
  .breadcrumb a { text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .toolbar { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; margin-bottom: var(--space-6); }
  .toolbar__group { display: grid; gap: var(--space-2); }
  .toolbar__label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-subtle); }
  .search-field { position: relative; width: min(100%, 22rem); }
  .search-field svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-text-subtle); pointer-events: none; }
  .search-field .input { padding-left: calc(var(--space-3) + 26px); border-radius: var(--radius-pill); }
  .result-count { font-size: var(--text-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
  .empty {
    text-align: center; padding: var(--space-8) var(--space-5); border-radius: var(--radius-panel);
    box-shadow: inset 0 0 0 var(--hairline) var(--color-border); color: var(--color-text-muted);
  }
  .empty h2, .empty h3 { color: var(--color-text); font-size: var(--text-xl); margin-bottom: var(--space-2); }
  .empty .btn { margin-top: var(--space-5); }

  /* ----- Article ----- */
  .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-sticky) + 1); pointer-events: none; }
  .progress span { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--p, 0)); background: var(--color-accent); }
  .article-head { padding-block: clamp(2.5rem, 6vw, 5rem) var(--space-6); position: relative; isolation: isolate; }
  .article-head::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(50% 70% at 50% 0%, var(--glow-a), transparent 70%);
  }
  .article-head .kicker { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: center; }
  .article-head h1 { text-align: center; margin: var(--space-5) auto 0; max-width: 20ch; font-size: clamp(2.2rem, 3.6vw + 1.2rem, 4.5rem); }
  .dek { text-align: center; margin: var(--space-5) auto 0; max-width: 40rem; font-family: var(--font-read); font-size: clamp(1.2rem, 0.6vw + 1.05rem, 1.5rem); line-height: 1.45; color: var(--color-text-muted); font-style: italic; }
  .byline--large { justify-content: center; margin-top: var(--space-6); flex-wrap: wrap; text-align: left; }
  .byline--large .byline__role { white-space: normal; font-size: var(--text-sm); }
  .article-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-subtle); font-variant-numeric: tabular-nums; }
  .article-actions { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); flex-wrap: wrap; }
  .article-layout { display: grid; gap: var(--space-7); grid-template-columns: minmax(0, 1fr); padding-bottom: var(--space-section); }
  @media (min-width: 72rem) {
    .article-layout { grid-template-columns: minmax(0, 1fr) minmax(0, var(--container-read)) minmax(0, 1fr); }
    .article-layout > .article-main { grid-column: 2; }
    .article-layout > .article-aside { grid-column: 3; }
  }
  .article-layout > * { min-width: 0; }
  .article-aside { display: none; }
  @media (min-width: 72rem) { .article-aside { display: block; } }
  .takeaways {
    border-radius: var(--radius-card); padding: var(--space-5) var(--space-6);
    background: var(--color-surface); box-shadow: var(--shadow-hairline);
    border-left: 4px solid var(--color-accent);
  }
  .takeaways h2 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-accent-text); }
  .takeaways ul { margin-top: var(--space-3); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
  .takeaways li { font-size: var(--text-base); line-height: 1.5; }
  .takeaways li::marker { color: var(--color-accent-text); }
  .context-card { margin-top: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-bg-subtle); }
  @media (min-width: 40rem) { .context-card { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .context-card dt { font-size: var(--text-xs); color: var(--color-text-subtle); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
  .context-card dd { margin: var(--space-1) 0 0; font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .prose { font-family: var(--font-read); font-size: var(--text-read); line-height: var(--leading-read); max-width: var(--measure-read); }
  .prose > * + * { margin-top: 1.1em; }
  .prose h2 { font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem); margin-top: 1.9em; line-height: 1.15; }
  .prose h3 { font-size: var(--text-h3); margin-top: 1.6em; }
  .prose a { color: var(--color-accent-text); }
  .prose blockquote {
    margin-block: 1.6em; padding-left: var(--space-5); border-left: var(--rule-heavy) solid var(--color-highlight);
    font-family: var(--font-display); font-size: clamp(1.35rem, 0.8vw + 1.1rem, 1.75rem); line-height: 1.3; letter-spacing: var(--tracking-tight);
  }
  .prose ul, .prose ol { padding-left: 1.25em; }
  .prose li + li { margin-top: 0.4em; }
  .prose--first > p:first-of-type::first-letter {
    float: left; font-family: var(--font-display); font-size: 4.1em; line-height: 0.82; padding: 0.06em 0.1em 0 0;
    color: var(--color-accent-text);
  }
  .prose--ui { font-family: var(--font-sans); font-size: var(--text-md); line-height: 1.7; }
  .prose--ui h2 { font-family: var(--font-display); }
  .endmark { display: flex; justify-content: center; margin-top: var(--space-7); color: var(--color-highlight); }
  .endmark svg { width: 28px; height: 28px; }
  .peer-questions { margin-top: var(--space-7); padding: var(--space-6); border-radius: var(--radius-panel); background: var(--color-highlight-subtle); }
  .peer-questions h2 { font-size: var(--text-xl); }
  .peer-questions ol { margin-top: var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-3); font-family: var(--font-read); font-size: var(--text-md); }
  .author-box { margin-top: var(--space-7); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6); border-radius: var(--radius-panel); box-shadow: var(--shadow-hairline); background: var(--color-surface); }
  .author-box h2 { font-size: var(--text-xl); }
  .author-box p { color: var(--color-text-muted); margin-top: var(--space-2); font-size: var(--text-sm); }
  .toc { position: sticky; top: calc(var(--nav-height) + var(--space-6)); font-size: var(--text-sm); }
  .toc h2 { font-family: var(--font-sans); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-subtle); font-weight: var(--weight-semibold); }
  .toc ol { list-style: none; padding: 0; margin-top: var(--space-3); display: grid; gap: var(--space-1); border-left: var(--hairline) solid var(--color-border); }
  .toc a { display: block; padding: var(--space-1) var(--space-3); text-decoration: none; color: var(--color-text-muted); margin-left: -1px; border-left: var(--rule-heavy) solid transparent; }
  .toc a:hover { color: var(--color-text); }
  .toc a.btn { display: inline-flex; margin-left: 0; border-left: 0; padding: var(--space-2) var(--space-5); color: var(--color-on-accent); }
  .toc a[aria-current="true"] { color: var(--color-text); border-left-color: var(--color-accent); }
  .responses { margin-top: var(--space-7); }
  .responses h2 { font-size: var(--text-h3); }

  /* ----- Profile ----- */
  .profile-head { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 48rem) { .profile-head { grid-template-columns: auto minmax(0, 1fr); } }
  .profile-facts { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

  /* ----- Command palette ----- */
  .palette {
    width: min(40rem, 100% - 2 * var(--gutter)); max-width: none; max-height: min(34rem, 80dvh);
    margin: 12dvh auto auto; padding: 0; border: 0; border-radius: var(--radius-card);
    background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-overlay);
    overflow: hidden;
  }
  .palette::backdrop { background: var(--color-overlay); }
  .palette[open] { animation: pop-in var(--motion-base) var(--ease-out); }
  @keyframes pop-in { from { opacity: 0; transform: scale(0.97); } }
  .palette__input-wrap { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: var(--hairline) solid var(--color-border); }
  .palette__input-wrap svg { width: 20px; height: 20px; color: var(--color-text-subtle); flex: none; }
  .palette__input { flex: 1; min-width: 0; min-height: var(--control-height); border: 0; background: transparent; font-size: var(--text-md); }
  .palette__input:focus { outline: none; }
  .palette__list { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; max-height: calc(min(34rem, 80dvh) - 4.5rem); }
  .palette__group { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
  .palette__item { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); cursor: pointer; }
  .palette__item[aria-selected="true"] { background: var(--color-surface-2); }
  .palette__item-title { font-weight: var(--weight-medium); font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .palette__item-sub { font-size: var(--text-xs); color: var(--color-text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .palette__item > div { min-width: 0; flex: 1; }
  .palette__empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); }

  /* ----- Toast ----- */
  .toast-region { position: fixed; z-index: var(--z-toast); left: 50%; transform: translateX(-50%); bottom: calc(var(--space-5) + var(--safe-bottom)); display: grid; gap: var(--space-2); pointer-events: none; width: min(26rem, 100% - 2 * var(--gutter)); }
  @media (min-width: 48rem) { .toast-region { left: auto; right: var(--space-5); transform: none; } }
  .toast { pointer-events: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-inverse); color: var(--color-text-inverse); font-size: var(--text-sm); box-shadow: var(--shadow-overlay); animation: fade-up var(--motion-base) var(--ease-out); }

  /* ----- Footer ----- */
  .site-footer { margin-top: auto; background: var(--color-bg-subtle); box-shadow: inset 0 var(--hairline) 0 0 var(--color-border); padding-block: var(--space-8) calc(var(--space-6) + var(--safe-bottom)); font-size: var(--text-sm); }
  .footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 64rem) { .footer-grid { grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); } }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  @media (min-width: 64rem) { .footer-grid > :first-child { grid-column: auto; } }
  .footer-grid h2 { font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--color-text-subtle); margin-bottom: var(--space-3); }
  .footer-grid ul { list-style: none; padding: 0; display: grid; gap: var(--space-1); }
  .footer-grid a { text-decoration: none; color: var(--color-text-muted); display: inline-flex; min-height: 32px; align-items: center; }
  .footer-grid a:hover { color: var(--color-text); text-decoration: underline; }
  .footer-tagline { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; margin-top: var(--space-3); max-width: 20ch; }
  .footer-bottom { margin-top: var(--space-8); padding-top: var(--space-5); border-top: var(--hairline) solid var(--color-border); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; color: var(--color-text-subtle); font-size: var(--text-xs); }


  /* ----- Added hooks ----- */
  .h-step { font-family: var(--font-sans); font-size: var(--text-sm); margin-bottom: var(--space-5); }
  .step-title { font-family: var(--font-display); font-size: var(--text-h3); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); display: inline-block; margin-top: var(--space-1); }
  .form-step:focus { outline: none; }
  label.chip { cursor: pointer; position: relative; }
  label.chip:has(input:checked) { background: var(--color-accent-subtle); color: var(--color-accent-text); box-shadow: inset 0 0 0 var(--hairline) var(--color-accent); }
  label.chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .panel--inverse .label, .panel--inverse legend { color: var(--neutral-0); }
  .panel--inverse .hint, .panel--inverse .opt { color: var(--roast-7); }
  .panel--inverse .hint a { color: var(--neutral-0); }
  .panel--inverse .input, .panel--inverse .select { background: var(--roast-2); color: var(--roast-9); box-shadow: inset 0 0 0 var(--hairline) var(--roast-6); }
  .panel--inverse .input:focus { box-shadow: inset 0 0 0 var(--rule-heavy) var(--green-7); }
  .panel--inverse .btn--primary { background: var(--green-7); color: var(--neutral-12); }
  .panel--inverse .btn--primary:hover { background: var(--green-3); }
  .panel--inverse .error { color: oklch(80% 0.12 25); }
  .panel--inverse .notice { background: color-mix(in oklch, var(--green-7) 16%, transparent); color: var(--neutral-0); }
  .panel--inverse .notice strong, .panel--inverse .notice svg { color: var(--green-7); }
  .panel--inverse :focus-visible { box-shadow: 0 0 0 2px var(--neutral-12), 0 0 0 4px var(--green-7); }

  /* ----- Scroll reveal (progressive enhancement) ----- */
  .js [data-reveal] { opacity: 0; transform: translateY(var(--motion-distance)); transition: opacity var(--motion-reveal) var(--ease-out), transform var(--motion-reveal) var(--ease-out); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  /* ----- Marquee of prompts (paused on hover/focus, static when reduced motion) ----- */
  .prompt-rail { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); padding-block: var(--space-2); }
  .prompt-rail__track { display: flex; gap: var(--space-3); width: max-content; animation: rail 70s linear infinite; list-style: none; padding: 0; margin: 0; }
  .prompt-rail:hover .prompt-rail__track, .prompt-rail:focus-within .prompt-rail__track { animation-play-state: paused; }
  .prompt-rail__track li { flex: none; padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-hairline); font-family: var(--font-read); font-style: italic; font-size: var(--text-md); color: var(--color-text-muted); }
  @keyframes rail { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) {
    .prompt-rail { mask-image: none; }
    .prompt-rail__track { animation: none; flex-wrap: wrap; width: auto; }
    .prompt-rail__track li[aria-hidden="true"] { display: none; }
  }

  /* Pledge list */
  .pledges { list-style: none; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 48rem) { .pledges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pledges li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); }
  .pledges svg { width: 24px; height: 24px; color: var(--color-accent-text); margin-top: 2px; }
  .pledges strong { display: block; }
  .pledges span { color: var(--color-text-muted); font-size: var(--text-sm); }
  .panel--inverse .pledges span { color: var(--roast-7); }
  .panel--inverse .pledges svg { color: var(--green-7); }
}

/* =========================== UTILITIES =========================== */
@layer utilities {
  .mt-0 { margin-top: 0; }
  .mt-2 { margin-top: var(--space-2); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-5 { margin-top: var(--space-5); }
  .mt-6 { margin-top: var(--space-6); }
  .mt-7 { margin-top: var(--space-7); }
  .muted { color: var(--color-text-muted); }
  .subtle { color: var(--color-text-subtle); }
  .small { font-size: var(--text-sm); }
  .center { text-align: center; }
  .measure { max-width: var(--measure); }
  .pb-section { padding-bottom: var(--space-section); }
  .cta-row--center { justify-content: center; }
  .center-block { margin-inline: auto; }
  .text-h3 { font-size: var(--text-h3); }
  .nums { font-variant-numeric: tabular-nums; }
}

@media (forced-colors: active) {
  .btn, .chip, .story-card, .person-card, .topic-card, .panel, .input, .textarea { border: 1px solid CanvasText; }
  .btn--primary { background: Highlight; color: HighlightText; }
}
@media print {
  .site-header, .site-footer, .article-actions, .responses, .progress, .article-aside, .toast-region { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =====================================================================
   V2 EDITORIAL LAYER: research-led layout upgrade (2026-09-18)
   Patterns: centred masthead + 3-column front page (The Atlantic, Every),
   art-first cards & text tabs (Linear "Now"), thumb list rows (Atlantic Latest),
   left-aligned article head + action pills + TL;DR (Every), up-next (FRR).
   ===================================================================== */
@layer components {
  /* ---- Header: three zones, centred wordmark ---- */
  .nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-4); }
  .nav > .primary-nav { justify-self: start; }
  .nav > .nav-actions { justify-self: end; }
  .brand--center { margin: 0; font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem); justify-self: center; }
  .brand--center .brand__mark { width: 44px; height: 44px; }

  /* ---- Masthead ---- */
  .masthead { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3rem); position: relative; isolation: isolate; }
  .masthead::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(45% 70% at 50% 0%, var(--glow-a), transparent 70%);
  }
  .dateline {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-5);
    padding-block: var(--space-2); border-block: var(--hairline) solid var(--color-border);
    box-shadow: 0 calc(-1 * var(--rule-heavy)) 0 0 var(--color-text);
    font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text-muted);
  }
  .dateline strong { color: var(--color-text); font-weight: var(--weight-semibold); }
  @media (max-width: 48rem) { .dateline { justify-content: center; text-align: center; } .dateline__mid { display: none; } }
  .masthead__title { text-align: center; max-width: 15ch; margin: clamp(1.5rem, 4vw, 3rem) auto var(--space-5); }
  .masthead__lede { text-align: center; margin-inline: auto; max-width: 40rem; }

  /* ---- Front page grid ---- */
  .front { padding-bottom: clamp(3rem, 6vw, 5rem); }
  .front__grid {
    display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr);
    border-top: var(--rule-heavy) solid var(--color-text); padding-top: var(--space-6);
  }
  .front__grid > * { min-width: 0; }
  .front__lead { order: -1; }
  @media (min-width: 48rem) {
    .front__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .front__lead { grid-column: 1 / -1; }
    .front__side { display: grid; gap: var(--space-6); }
  }
  @media (min-width: 72rem) {
    .front__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 0; }
    .front__lead { order: 0; grid-column: auto; padding-inline: var(--space-6); border-inline: var(--hairline) solid var(--color-border); }
    .front__side { padding-right: var(--space-6); align-content: start; }
    .front__rail { padding-left: var(--space-6); }
  }
  .compact { position: relative; display: grid; gap: var(--space-2); }
  .compact + .compact { padding-top: var(--space-5); border-top: var(--hairline) solid var(--color-border); }
  .compact .art { margin-bottom: var(--space-2); }
  .compact :is(h2, h3) { font-size: clamp(1.2rem, 0.5vw + 1.05rem, 1.4rem); line-height: 1.2; }
  .compact :is(h2, h3) a { text-decoration: none; }
  .compact :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
  @media (hover: hover) and (pointer: fine) { .compact:hover :is(h2, h3) { text-decoration: underline; text-decoration-thickness: var(--hairline); text-underline-offset: 0.15em; } }
  .compact__meta { display: flex; gap: var(--space-2); }
  .kicker-byline { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-text); }
  .kicker-byline span { font-weight: var(--weight-regular); color: var(--color-text-subtle); letter-spacing: 0.02em; text-transform: none; }
  .lead { position: relative; }
  .lead .art { margin-bottom: var(--space-5); }
  .lead__body { text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
  .lead__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
  .lead h2 { font-size: clamp(1.9rem, 2.6vw + 1rem, 3.1rem); line-height: 1.04; max-width: 20ch; }
  .lead h2 a { text-decoration: none; }
  .lead h2 a::after { content: ""; position: absolute; inset: 0; }
  @media (hover: hover) and (pointer: fine) { .lead:hover h2 { text-decoration: underline; text-decoration-thickness: var(--rule-heavy); text-underline-offset: 0.12em; text-decoration-color: var(--color-highlight); } }
  .lead__dek { font-family: var(--font-read); font-style: italic; font-size: clamp(1.1rem, 0.4vw + 1rem, 1.3rem); color: var(--color-text-muted); max-width: 34rem; line-height: 1.45; }
  .rail-title {
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase;
    color: var(--color-accent-text); padding-bottom: var(--space-3); border-bottom: var(--hairline) solid var(--color-border);
  }
  .toc-list { list-style: none; padding: 0; margin: 0; }
  .toc-item { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-2); padding-block: var(--space-3); border-bottom: var(--hairline) solid var(--color-border); }
  .toc-item__n { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; color: var(--color-text-subtle); }
  .toc-item a { font-family: var(--font-display); font-size: var(--text-md); line-height: 1.25; text-decoration: none; display: block; }
  .toc-item a:hover { text-decoration: underline; }
  .toc-item__by { display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-subtle); }
  .rail-card { margin-top: var(--space-5); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-accent-subtle); display: grid; gap: var(--space-3); justify-items: start; }
  .rail-card__q { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.25; }

  /* ---- Generative art ---- */
  .art {
    --art-bg: var(--color-format-turning-bg);
    --art-ink: var(--color-format-turning);
    --art-hi: var(--color-accent);
    position: relative; overflow: hidden; isolation: isolate;
    aspect-ratio: 16 / 10; border-radius: var(--radius-card);
    background:
      radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--art-ink) 14%, transparent), transparent 60%),
      var(--art-bg);
  }
  .art[data-format="field-note"] { --art-bg: var(--color-format-field-bg); --art-ink: var(--color-format-field); }
  .art[data-format="what-we-tried"] { --art-bg: var(--color-format-tried-bg); --art-ink: var(--color-format-tried); }
  .art__svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform var(--motion-reveal) var(--ease-out); }
  .art__line { fill: none; stroke: var(--art-ink); stroke-opacity: 0.38; stroke-width: 2; }
  .art__hi { fill: none; stroke: var(--art-hi); stroke-width: 4.5; stroke-linecap: round; }
  .art__dot, .art__hi-fill { fill: var(--art-hi); }
  .art__fill { fill: var(--art-ink); fill-opacity: 0.5; }
  .art__faint { fill: var(--art-ink); fill-opacity: 0.32; }
  .art__base { fill: none; stroke: var(--art-ink); stroke-opacity: 0.55; stroke-width: 1.5; stroke-dasharray: 4 6; }
  .art__quote {
    position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 3vw, 2rem);
    font-family: var(--font-display); font-size: clamp(1.4rem, 1.6vw + 1rem, 2.4rem); line-height: 1.08; letter-spacing: var(--tracking-display);
    font-variation-settings: "SOFT" 100; text-wrap: balance; color: var(--color-text);
    background: linear-gradient(to top, var(--art-bg) 35%, color-mix(in oklch, var(--art-bg) 0%, transparent));
    padding-top: 30%;
  }
  .art--thumb { aspect-ratio: 1; border-radius: var(--radius-2); }
  .art--hero { aspect-ratio: 21 / 9; border-radius: var(--radius-panel); }
  @media (max-width: 48rem) { .art--hero { aspect-ratio: 4 / 3; } }
  .art--hero .art__quote { font-size: clamp(1.6rem, 2.6vw + 1rem, 3.4rem); max-width: 28ch; }
  .art--tile { aspect-ratio: 16 / 7; border-radius: 0; }
  .art--next { aspect-ratio: 16 / 10; border-radius: var(--radius-card); }
  .art--card { border-radius: 0; }
  @media (hover: hover) and (pointer: fine) {
    .story-card:hover .art__svg, .compact:hover .art__svg, .lead:hover .art__svg, .up-next__card:hover .art__svg, .story-row:hover .art__svg { transform: scale(1.04); }
  }
  @media (prefers-reduced-motion: reduce) { .art__svg { transition: none; } }

  /* ---- Story card v2 (art first) ---- */
  .story-card { padding: 0; gap: 0; overflow: hidden; }
  .story-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); flex: 1; }
  .story-card__topic { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .story-card .badge--illustrative { align-self: flex-start; }
  .grid--feature { grid-auto-flow: dense; }
  @media (min-width: 64rem) {
    .grid--feature > .story-card--wide { grid-column: span 2; flex-direction: row; }
    .story-card--wide .art { width: 52%; aspect-ratio: auto; min-height: 100%; flex: none; }
    .story-card--wide .story-card__body { padding: var(--space-6); justify-content: center; }
    .story-card--wide :is(h2, h3) { font-size: clamp(1.6rem, 1.4vw + 1rem, 2.25rem); line-height: 1.08; }
    .story-card--wide p { font-size: var(--text-base); }
  }

  /* ---- Section header with rule ---- */
  .rule-head {
    display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4);
    border-top: var(--rule-heavy) solid var(--color-text); padding-top: var(--space-4); margin-bottom: var(--space-7);
  }
  .rule-head > div { max-width: 46rem; }
  .rule-head__kicker { display: block; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-text); }
  .rule-head h2 { margin-top: var(--space-2); }
  .rule-head p { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-md); }

  /* ---- Format tiles with art ---- */
  .format-tile { padding: 0; gap: 0; }
  .format-tile__body { display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(1.25rem, 3vw, 2rem); flex: 1; }
  @media (min-width: 64rem) { .bento > :first-child .art--tile { aspect-ratio: 16 / 10; } }

  /* ---- People scroller ---- */
  .scroller__track.container {
    width: 100%; max-width: none; margin: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15.5rem, 19rem); gap: var(--space-4);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    scroll-padding-inline: max(var(--gutter), calc((100% - var(--container-max)) / 2));
    padding-block: var(--space-2) var(--space-4);
  }
  .scroller__track::-webkit-scrollbar { display: none; }
  .scroller__track > * { scroll-snap-align: start; min-width: 0; display: grid; }
  .scroller__controls { display: flex; justify-content: flex-end; gap: var(--space-2); }
  .scroller__btn { box-shadow: var(--shadow-hairline-strong); }
  .flip { transform: scaleX(-1); }
  .person-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
  .person-card :is(h2, h3) { font-size: var(--text-xl); margin-top: var(--space-2); }
  .person-card__role { font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .person-card__role span { font-weight: var(--weight-regular); color: var(--color-text-subtle); font-size: var(--text-xs); }
  .person-card__foot { margin-top: auto; padding-top: var(--space-3); border-top: var(--hairline) solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-subtle); display: block; }
  .person-card__story { display: block; color: var(--color-text); font-family: var(--font-display); font-size: var(--text-base); margin-top: var(--space-1); }

  /* ---- Topic cards v2 ---- */
  .topic-card__count { position: relative; font-family: var(--font-display); font-size: clamp(2.5rem, 3vw + 1rem, 3.5rem); line-height: 1; color: oklch(55% 0.1 var(--topic-hue, 160)); }
  .topic-card__go { margin-top: auto; position: relative; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-accent-text); }

  /* ---- List rows with thumbnails ---- */
  .story-row { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-4); align-items: start; }
  @media (min-width: 48rem) { .story-row { grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-5); } }
  .story-row__main { display: grid; gap: var(--space-2); }

  /* ---- Stories index: text tabs + search (Linear "Now") ---- */
  .filterbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: var(--hairline) solid var(--color-border); }
  .tabs-text { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
  .tabs-text a {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted);
    box-shadow: inset 0 calc(-1 * var(--rule-heavy)) 0 0 transparent;
  }
  .tabs-text a:hover { color: var(--color-text); }
  .tabs-text a[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 calc(-1 * var(--rule-heavy)) 0 0 var(--color-accent); }
  .tabs-text__n { font-size: var(--text-xs); color: var(--color-text-subtle); }
  .filterbar .search-field { margin-block: var(--space-2); }

  /* ---- Article v2 (Every / First Round) ---- */
  .article-head { padding-block: clamp(1.5rem, 4vw, 3rem) 0; }
  .article-head::before { background: radial-gradient(40% 60% at 30% 0%, var(--glow-a), transparent 70%); }
  .article-head__inner { width: min(100% - 2 * var(--gutter), var(--container-read)); margin-inline: auto; }
  .article-head .kicker { justify-content: flex-start; margin-top: var(--space-5); }
  .article-head h1 { text-align: left; margin: var(--space-4) 0 0; max-width: none; font-size: clamp(2.2rem, 3vw + 1.3rem, 4rem); line-height: 1.02; }
  .article-head .dek { text-align: left; margin: var(--space-4) 0 0; max-width: none; }
  .article-byline { margin-top: var(--space-5); }
  .article-byline .byline__role { white-space: normal; font-size: var(--text-sm); }
  .article-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-5); padding-block: var(--space-2); border-block: var(--hairline) solid var(--color-border); }
  .article-bar .article-meta { margin: 0; justify-content: flex-start; }
  .article-bar .article-actions { margin: 0; justify-content: flex-start; gap: var(--space-2); }
  .pill {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding-inline: var(--space-3);
    border: 0; border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-hairline);
    font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text); text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
  }
  .pill svg { width: 16px; height: 16px; }
  .pill:hover { background: var(--color-surface-2); }
  .pill[aria-pressed="true"] { background: var(--color-accent-subtle); color: var(--color-accent-text); box-shadow: inset 0 0 0 var(--hairline) var(--color-accent); }
  .article-hero { width: min(100% - 2 * var(--gutter), 72rem); margin: var(--space-7) auto var(--space-6); }
  .article-main { width: 100%; max-width: var(--container-read); margin-inline: auto; }
  @media (min-width: 72rem) {
    .prose blockquote { margin-inline: -4rem; padding-left: var(--space-6); font-size: clamp(1.6rem, 1vw + 1.2rem, 2.1rem); }
  }

  /* ---- Up next ---- */
  .up-next { padding-block: var(--space-section) 0; }
  .up-next__card {
    display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: center;
    text-decoration: none; padding-top: var(--space-5); border-top: var(--rule-heavy) solid var(--color-text);
  }
  @media (min-width: 48rem) { .up-next__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-7); } }
  .up-next__body { display: grid; gap: var(--space-3); }
  .up-next__title { font-family: var(--font-display); font-size: clamp(1.8rem, 2vw + 1.1rem, 3rem); line-height: 1.05; letter-spacing: var(--tracking-display); }
  .up-next__dek { font-family: var(--font-read); font-style: italic; font-size: var(--text-md); color: var(--color-text-muted); }
  @media (hover: hover) and (pointer: fine) { .up-next__card:hover .up-next__title { text-decoration: underline; text-decoration-thickness: var(--rule-heavy); text-decoration-color: var(--color-highlight); text-underline-offset: 0.12em; } }

  /* ---- Footer wordmark ---- */
  .footer-wordmark {
    margin-top: var(--space-8); font-family: var(--font-display); font-weight: var(--weight-regular);
    font-size: clamp(4.5rem, 19vw, 17rem); line-height: 0.8; letter-spacing: -0.055em; text-align: center;
    color: color-mix(in oklch, var(--color-text) 10%, transparent); user-select: none; white-space: nowrap; overflow: hidden;
  }
  .footer-wordmark::before { content: "hr.cafe"; }
}

@layer components {
  .nav > .brand--center { grid-column: 2; }
  .nav > .nav-actions { grid-column: 3; }
  @media (max-width: 60rem) {
    .nav { grid-template-columns: minmax(0, 1fr) auto; }
    .nav > .brand--center { grid-column: 1; justify-self: start; }
    .nav > .nav-actions { grid-column: 2; }
  }
  .lead-more { display: grid; gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--hairline) solid var(--color-border); }
  @media (min-width: 40rem) { .lead-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lead-more .compact + .compact { border-top: 0; padding-top: 0; } }
  .compact--text :is(h2, h3) { font-size: var(--text-lg); }
  .bento > :first-child { display: flex; flex-direction: column; }
  @media (min-width: 64rem) { .bento > :first-child .art--tile { flex: 1 1 auto; aspect-ratio: auto; min-height: 18rem; } .bento > :first-child .format-tile__body { flex: none; } }
  .story-card__foot { flex-wrap: wrap; }
  .story-card .badge--illustrative { white-space: nowrap; }
  .person-card__top { flex-wrap: wrap; }
}
@layer components { .grid > .field + .field { margin-top: 0; } }