/* site.css — the hackhack design system: layout, sections, typography
   helpers, and every component style the pages share.

   Extracted from index.html's inline <style> so the Autoresearch pages
   under /autoresearch/ can load the same rules instead of duplicating
   them. Colour and type tokens still live in colors_and_type.css, which
   must be loaded first. */

body { margin:0; min-height:100vh; overflow-x: hidden; }
  * { box-sizing: border-box; }
  img { max-width: 100%; }

  /* ── Layout ─────────────────────────────────────────────────────────── */
  html { scroll-behavior: smooth; }
  .container { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px); }
  /* Anchor targets clear the sticky nav instead of hiding under it. */
  section[id] { scroll-margin-top: 72px; }

  /* One section rhythm for the whole page. Sections are separated by a rule
     or a surface change — never by a decorative background. The generous
     block padding is the point: sections should feel far apart. */
  .section { padding-block: clamp(88px, 12vw, 176px); }
  .section-rule { border-top: 1px solid var(--hh-divider); }
  .section-sunken { background: var(--hh-bg-sunken); }

  /* Distance between a section's intro and its content. */
  .section-intro { margin-bottom: clamp(48px, 6vw, 80px); }

  /* Section intro: eyebrow → heading → lead. Same three steps everywhere. */
  .eyebrow {
    display: block; margin: 0 0 20px;
    font-family: var(--font-mono); font-weight: 500; font-size: 11px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--hh-text-muted);
  }
  /* Display type is bold and tightly tracked — hierarchy comes from weight
     and value, not from size alone. */
  .h-display {
    font-weight: 700; font-size: clamp(36px, 6.4vw, 62px); line-height: 1.04;
    letter-spacing: -0.035em; color: var(--hh-text); margin: 0 0 24px; text-wrap: balance;
  }
  .h-section {
    font-weight: 600; font-size: clamp(28px, 4.6vw, 44px); line-height: 1.08;
    letter-spacing: -0.03em; color: var(--hh-text); margin: 0 0 18px; text-wrap: balance;
  }
  /* Second line of a two-tone heading: same size and weight, quieter value. */
  .h-quiet { color: var(--hh-text-muted); }
  .lead {
    font-weight: 400; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.65;
    color: var(--hh-text-muted); margin: 0; max-width: 62ch;
  }

  /* Responsive grids — collapse by content width, not by breakpoint guesswork. */
  .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .grid-split { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
  @media (max-width: 960px) {
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-split { grid-template-columns: 1fr; }
  }
  @media (max-width: 680px) {
    .grid-3, .grid-2 { grid-template-columns: 1fr; }
  }

  /* ── Blueprint grid ─────────────────────────────────────────────────── */
  /* Two hairlines down the content edges, with a registration tick wherever
     they cross a section divider. Drawn from our own layout width, so it
     stays aligned with the content rather than floating over it. */
  /* The frame sits well outside the 1056px text column — 72px of clear air on
     each side. It is a margin rule, not a border around the content.
     Drawn as a background on each .section, so it begins below the hero and
     runs continuously from there rather than floating over the whole page. */
  :root { --grid-half: 600px; --grid-rule: rgba(235,243,255,0.045); }

  .section {
    background-image:
      linear-gradient(to right, var(--grid-rule) 0 1px, transparent 1px),
      linear-gradient(to right, var(--grid-rule) 0 1px, transparent 1px);
    background-repeat: no-repeat, no-repeat;
    background-size: 1px 100%, 1px 100%;
    background-position: calc(50% - var(--grid-half)) 0, calc(50% + var(--grid-half)) 0;
  }

  .section-rule { position: relative; }
  .section-rule::before, .section-rule::after {
    content: "+"; position: absolute; top: 0;
    transform: translate(-50%, -50%);
    font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 1;
    color: rgba(235,243,255,0.14);
    pointer-events: none;
  }
  .section-rule::before { left: calc(50% - var(--grid-half)); }
  .section-rule::after  { left: calc(50% + var(--grid-half)); }

  /* Only once there is genuinely room for the frame plus its margin. Below
     this the rules would crowd the content, so the motif drops out entirely. */
  @media (max-width: 1360px) {
    .section { background-image: none; }
    .section-rule::before, .section-rule::after { content: none; }
  }

  /* Nav recomposes rather than shrinking: section links go first, then the
     secondary sign-in, leaving the wordmark and the primary action. */
  @media (max-width: 860px) { .nav-links { display: none !important; } }
  @media (max-width: 420px) { .nav-signin { display: none !important; } }

  /* ── Controls ───────────────────────────────────────────────────────── */
  /* Primary is a flat accent fill: no gradient, no glow, no shadow. */
  .btn {
    font-family: var(--font-sans); font-weight: 500; font-size: 14px;
    padding: 11px 18px; border-radius: 4px; border: 1px solid transparent;
    cursor: pointer; line-height: 1; display: inline-flex; align-items: center;
    justify-content: center; gap: 8px; white-space: nowrap; text-decoration: none;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  .btn-primary { background: var(--hh-mint); color: #05080f; }
  .btn-primary:hover { background: var(--hh-mint-deep); }
  .btn-ghost { background: transparent; color: var(--hh-text); border-color: var(--hh-border-strong); }
  .btn-ghost:hover { border-color: var(--hh-text-muted); }
  .btn-sm { font-size: 13px; padding: 8px 12px; }
  .btn-lg { font-size: 15px; padding: 13px 22px; }

  /* ── Hero: the bug tube ─────────────────────────────────────────────── */
  /* One full-bleed stage. The copy sits over it on the left and the tube is
     laid out in the space to its right. Found bugs drop out of the bottom of
     the stage into the findings log that follows. */
  .hero-rim {
    position: relative; height: clamp(520px, 66vh, 700px); overflow: hidden;
    border-bottom: 1px solid var(--hh-divider); background: var(--hh-bg);
    user-select: none; -webkit-user-select: none;
  }
  /* The copy's left edge follows the site container (1120px, centred), so it
     lines up with the nav and the sections below on every screen width. The
     tube takes the space between the copy and the mirrored inset on the right. */
  .hero-rim {
    --hero-inset: max(clamp(20px, 5vw, 32px), calc((100% - 1120px) / 2 + 32px));
  }
  .hero-rim-copy {
    position: absolute; z-index: 2; left: var(--hero-inset); top: 50%;
    transform: translateY(-50%); width: min(27rem, 34vw);
    display: grid; gap: 18px; pointer-events: none;
  }
  .hero-rim-title {
    margin: 0; color: var(--hh-text); font-weight: 700;
    font-size: clamp(38px, 4.6vw, 64px); line-height: 0.98; letter-spacing: -0.04em;
    text-wrap: balance;
  }
  .hero-rim-title span { color: var(--hh-mint); }
  .hero-rim-lead {
    margin: 0; color: var(--hh-text-muted);
    font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6;
  }
  .hero-rim-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 8px; pointer-events: auto; }
  .hero-rim-actions .btn-ghost { color: var(--hh-text-muted); border-color: transparent; }
  .hero-rim-actions .btn-ghost:hover { color: var(--hh-text); border-color: var(--hh-border); }
  .hero-rim-actions .btn-ghost span { color: var(--hh-mint); }

  /* pan-y keeps the page scrollable over the tube on phones; taps and
     sideways drags still reach the game. */
  .rim-stage { position: absolute; inset: 0; cursor: crosshair; touch-action: pan-y; }
  .rim-stage canvas { position: absolute; inset: 0; display: block; outline: none; }
  .rim-stage canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--hh-mint); }
  /* Flights from the tube to the findings log cross the section boundary, so
     they live on a viewport-sized overlay rather than inside the clipped hero. */
  .rim-stage .rim-flights {
    position: fixed; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none;
  }

  /* Score, share and hint centre under the tube (--rim-center is set by the
     game from the tube's real position), well apart from the copy's button. */
  .rim-hud {
    position: absolute; left: var(--rim-center, 50%); transform: translateX(-50%);
    bottom: clamp(14px, 2.2vw, 22px); width: max-content; max-width: min(92%, 640px);
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 12px 20px; pointer-events: none;
  }
  .rim-score {
    display: flex; gap: 1.4em; color: var(--hh-text-dim);
    font: 500 10px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
    font-feature-settings: var(--ot-tnum);
  }
  .rim-score b { font-weight: 500; color: var(--hh-text); }
  .rim-score .rim-rule { color: var(--hh-text-dim); opacity: 0.8; }
  .rim-score .rim-lives { color: var(--hh-mint); letter-spacing: 0.18em; }

  /* A lost run: the tube holds still and dims behind the result, and only
     Retry or Share move things on — a stray click cannot lose the score. */
  .rim-stage canvas:first-of-type { transition: opacity 500ms ease, filter 500ms ease; }
  .rim-stage.is-over { cursor: default; }
  .rim-stage.is-over canvas:first-of-type { opacity: 0.22; filter: grayscale(1); }
  .rim-over {
    position: absolute; left: var(--rim-center, 50%); top: 47%; transform: translate(-50%, -50%);
    width: max-content; max-width: 92%;
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    animation: rim-over-in 360ms cubic-bezier(.2,.8,.2,1) both;
  }
  /* Its own keyframes: the transform carries the centring, so it must survive. */
  @keyframes rim-over-in {
    from { opacity: 0; transform: translate(-50%, calc(-50% + 8px)); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
  .rim-over-label {
    color: var(--hh-ruby); font: 500 11px/1.2 var(--font-mono);
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .rim-over strong {
    margin-top: 6px; color: var(--hh-text); font-weight: 700; font-size: clamp(56px, 7vw, 96px);
    line-height: 0.95; letter-spacing: -0.04em; font-feature-settings: var(--ot-tnum);
  }
  .rim-over-sub {
    color: var(--hh-text-muted); font: 500 11px/1.2 var(--font-mono);
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  .rim-over-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .rim-retry {
    padding: 10px 18px; border-radius: 4px; border: 1px solid transparent; cursor: pointer;
    color: #05080f; background: var(--hh-mint); font: 500 13px/1 var(--font-sans);
    transition: background-color 120ms ease, transform 120ms ease;
  }
  .rim-retry:hover { background: var(--hh-mint-deep); transform: translateY(-1px); }
  .rim-retry:focus-visible { outline: 2px solid var(--hh-mint); outline-offset: 3px; }
  .rim-over .rim-share { animation: none; color: var(--hh-text); background: transparent; border: 1px solid var(--hh-border-strong); }
  .rim-over .rim-share:hover { background: rgba(235,243,255,0.08); }
  .rim-share {
    display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; pointer-events: auto;
    color: #05080f; background: var(--hh-text); border-radius: 4px; text-decoration: none;
    font: 500 13px/1 var(--font-sans); white-space: nowrap;
    animation: rim-share-in 360ms cubic-bezier(.2,.8,.2,1) both;
    transition: background-color 120ms ease, transform 120ms ease;
  }
  .rim-share:hover { background: #fff; transform: translateY(-1px); }
  .rim-share:focus-visible { outline: 2px solid var(--hh-mint); outline-offset: 3px; }
  .rim-share svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
  @keyframes rim-share-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .rim-hint {
    position: absolute; left: var(--rim-center, 50%); transform: translateX(-50%); bottom: clamp(14px, 2.5vw, 22px);
    color: var(--hh-text-dim); font: 500 9px/1 var(--font-mono); letter-spacing: 0.12em;
    text-transform: uppercase; pointer-events: none; white-space: nowrap;
  }
  .rim-hint kbd { font: inherit; border: 1px solid var(--hh-text-dim); padding: 0.1em 0.4em; margin: 0 0.15em; }

  /* Narrow: copy, then the stage, stacked. */
  @media (max-width: 999px) {
    .hero-rim { height: auto; display: flex; flex-direction: column; overflow: visible; }
    .hero-rim-copy {
      position: static; transform: none; width: auto; max-width: 36rem;
      padding: clamp(28px, 6vw, 48px) clamp(20px, 5vw, 32px) 8px; /* matches .container */
    }
    .hero-rim-title { font-size: clamp(38px, 9vw, 60px); }
    /* Taller than the tube needs, so the HUD and hint sit clear beneath it. */
    .rim-stage { position: relative; height: clamp(430px, 112vw, 560px); overflow: hidden; }
    .rim-hud { bottom: 12px; gap: 10px 16px; }
    .rim-score { flex-wrap: wrap; justify-content: center; }
    .rim-hint { bottom: 14px; }
  }
  @media (max-width: 520px) {
    .rim-score .rim-rule { display: none; }
    .rim-over strong { font-size: 56px; }
    .hero-rim-actions { align-items: stretch; }
    .hero-rim-actions .btn { flex: 1 1 auto; padding-inline: 14px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rim-share, .rim-over { animation: none; }
    .rim-stage canvas:first-of-type { transition: none; }
  }

  /* Severity + state chips. These carry meaning inside the product surfaces
     (audit mock, finding card) — they are not used as page decoration. */
  .pill { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border-radius:4px; font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:0.1em; text-transform:uppercase; line-height:1.4; }
  .pill-mint { background:rgba(126,255,164,0.12); color:#7effa4; border:1px solid rgba(126,255,164,0.32); }
  .pill-cyan { background:rgba(103,228,255,0.14); color:#67e4ff; border:1px solid rgba(103,228,255,0.30); }
  .pill-ruby { background:rgba(230,59,74,0.18); color:#ffe9ea; border:1px solid rgba(230,59,74,0.45); }
  .pill-amber { background:rgba(245,179,90,0.18); color:#f5b35a; border:1px solid rgba(245,179,90,0.36); }
  .pill-orange { background:rgba(255,90,60,0.18); color:#ff5a3c; border:1px solid rgba(255,90,60,0.42); }
  .pill-violet { background:rgba(179,136,255,0.16); color:#b388ff; border:1px solid rgba(179,136,255,0.42); }
  .pill-neutral { background: rgba(235,243,255,0.06); color: var(--hh-text-muted); border:1px solid var(--hh-border); }
  .dot { width:6px; height:6px; border-radius:50%; flex-shrink: 0; }

  /* ── Comparison table ───────────────────────────────────────────────── */
  .cmp { width: 100%; border-collapse: collapse; }
  .cmp th {
    text-align: left; padding: 0 16px 12px;
    font-family: var(--font-mono); font-weight: 500; font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    border-bottom: 1px solid var(--hh-border);
  }
  .cmp th:first-child { color: var(--hh-text-muted); padding-left: 0; }
  .cmp th:last-child  { color: var(--hh-mint); }
  .cmp td {
    width: 50%; padding: 16px; font-size: 15px; line-height: 1.5;
    border-bottom: 1px solid var(--hh-divider); vertical-align: top;
  }
  .cmp td:first-child { color: var(--hh-text-muted); padding-left: 0; }
  .cmp td:last-child  { color: var(--hh-text); }
  .cmp tr:last-child td { border-bottom: none; }

  /* Narrow: each row becomes a labelled pair instead of two cramped columns. */
  @media (max-width: 680px) {
    .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .cmp tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--hh-divider); }
    .cmp tr:last-child { border-bottom: none; }
    .cmp td { display: block; width: auto; padding: 2px 0; border: none; }
    .cmp td::before {
      display: block; margin-bottom: 2px;
      font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
    }
    .cmp td:first-child::before { content: "Raw model session"; color: var(--hh-text-muted); }
    .cmp td:last-child::before  { content: "Hackhack"; color: var(--hh-mint); margin-top: 8px; }
  }

  /* ── Findings feed ──────────────────────────────────────────────────── */
  /* The log starts close under the hero so bugs found up there visibly land
     on it. The intro is one compact row rather than a full section opener. */
  .findings-section { padding-top: clamp(28px, 4vw, 44px); }
  .findings-intro {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .findings-intro > div:first-child { max-width: 720px; }
  .findings-intro .eyebrow { margin-bottom: 10px; }
  .findings-intro .h-section { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 8px; }
  .findings-intro .lead { font-size: 14.5px; margin: 0; }
  .findings-total { text-align: right; padding-bottom: 4px; }
  .findings-total div:first-child {
    font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1;
    letter-spacing: -0.03em; color: var(--hh-text);
  }
  .findings-total div:last-child {
    margin-top: 6px; font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--hh-text-muted);
  }
  /* A log, not a card grid: dense rows, hairline rules, monospaced metadata.
     Reads as a running record that gets longer over time. */
  .feed { width: 100%; border-collapse: collapse; }
  .feed th {
    text-align: left; padding: 0 14px 14px 0;
    font-family: var(--font-mono); font-weight: 500; font-size: 10px;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--hh-text-muted);
    border-bottom: 1px solid var(--hh-border);
    white-space: nowrap;
  }
  .feed th:last-child, .feed td:last-child { padding-right: 0; text-align: right; }
  /* One line per finding. Row height is the whole point — short rows read as a
     long running table, tall rows read as a stack of cards. */
  .feed td {
    padding: 13px 14px 13px 0; vertical-align: middle;
    border-bottom: 1px solid var(--hh-divider);
    white-space: nowrap;
  }
  /* Only the two prose columns may truncate. The chip columns never clip —
     their widths are fixed below so the content always fits. */
  .feed td:nth-child(6), .feed td:last-child { overflow: hidden; text-overflow: ellipsis; }
  .feed tbody tr { transition: background-color 120ms ease; }
  .feed tbody tr:hover { background: rgba(235,243,255,0.025); }
  .feed-protocol { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
  .feed-protocol img { width: 16px; height: 16px; object-fit: contain; flex-shrink: 0; }
  .feed-protocol span { font-family: var(--font-mono); font-size: 12.5px; color: var(--hh-text); }
  .feed-title { font-size: 14.5px; color: var(--hh-text); overflow: hidden; text-overflow: ellipsis; }
  .feed-time { font-family: var(--font-mono); font-size: 12px; color: var(--hh-text-muted); white-space: nowrap; }
  .feed-id { font-family: var(--font-mono); font-size: 12px; color: var(--hh-cyan); white-space: nowrap; }
  .feed-sev {
    display: inline-block; font-family: var(--font-mono); font-weight: 500; font-size: 10px;
    letter-spacing: 0.10em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 4px; white-space: nowrap;
  }
  .feed-outcome {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 10px;
    letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap;
    padding: 2px 8px; border-radius: 4px;
    color: var(--hh-text-muted); border: 1px solid var(--hh-border);
  }
  /* The Accretion mark is wide (~2.27:1). Both dimensions are explicit so the
     table can size the column before the image finishes loading — with width
     auto the cell was laid out at zero and then clipped the chip. */
  .feed-source-logo { width: 23px; height: 10px; object-fit: contain; flex-shrink: 0; }
  .feed-poc { font-size: 13px; color: var(--hh-mint); }
  .feed th:last-child, .feed td:last-child { text-align: left; padding-right: 0; }

  /* Columns: detected · id · severity · source · poc · target · finding.
     Fixed layout so a column can never be squeezed below its content — the
     source chip was being clipped when the browser sized it from content and
     the image had not loaded yet. The finding column absorbs the slack. */
  /* Widths are declared on th AND td: the header and the body are two separate
     tables (see .feed-head below), so the body has no th row to size from. */
  @media (min-width: 1001px) {
    .feed { table-layout: fixed; }
    .feed th:nth-child(1), .feed td:nth-child(1) { width: 104px; }  /* detected — date only */
    .feed th:nth-child(2), .feed td:nth-child(2) { width: 72px; }   /* id       */
    .feed th:nth-child(3), .feed td:nth-child(3) { width: 100px; }  /* severity */
    .feed th:nth-child(4), .feed td:nth-child(4) { width: 132px; }  /* source — chip + mark + label */
    .feed th:nth-child(5), .feed td:nth-child(5) { width: 46px; }   /* poc      */
    .feed th:nth-child(6), .feed td:nth-child(6) { width: 168px; }  /* target   */
  }

  /* The tail of the log dissolves rather than ending on a sentence about there
     being more. The rows it eats are ordered last on purpose — nothing that
     needs reading sits down there.
     The header sits OUTSIDE this window: `overflow: hidden` is what clips an
     arriving row while it slides down from behind the header rule, and the
     header must not be carried along by the slide transform. */
  .feed-wrap {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 68%, transparent 100%);
  }
  /* Insertion: the table is snapped up by one row height with no transition,
     then released back to zero, so the rows below appear to step down. */
  .feed-slide[data-sliding="true"] { transition: transform 640ms cubic-bezier(0.22, 0.61, 0.36, 1); }
  @keyframes feed-land {
    from { background: rgba(126,255,164,0.11); }
    to   { background: transparent; }
  }
  .feed tbody tr[data-fresh="true"] { animation: feed-land 1600ms ease-out; }
  @media (prefers-reduced-motion: reduce) {
    .feed-slide[data-sliding="true"] { transition: none; }
    .feed tbody tr[data-fresh="true"] { animation: none; }
  }

  /* Narrow: three compact lines per entry rather than seven squeezed columns. */
  @media (max-width: 1000px) {
    .feed thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .feed tbody tr {
      display: grid; grid-template-columns: auto auto 1fr; gap: 4px 10px;
      padding: 12px 0; border-bottom: 1px solid var(--hh-divider); align-items: center;
    }
    .feed td { display: block; padding: 0; border: none; width: auto; white-space: normal; }
    .feed td:nth-child(7) { grid-column: 1 / -1; grid-row: 1; }               /* finding  */
    .feed td:nth-child(1) { grid-column: 1; grid-row: 2; }                    /* detected */
    .feed td:nth-child(2) { grid-column: 2; grid-row: 2; }                    /* id       */
    .feed td:nth-child(3) { grid-column: 3; grid-row: 2; justify-self: end; } /* severity */
    .feed td:nth-child(6) { grid-column: 1; grid-row: 3; }                    /* target   */
    .feed td:nth-child(5) { grid-column: 2; grid-row: 3; }                    /* poc      */
    .feed td:nth-child(4) { grid-column: 3; grid-row: 3; justify-self: end; } /* source   */
  }
  @media (max-width: 480px) {
    .feed td:nth-child(2) { display: none; } /* id drops before the timestamp does */
  }

  /* ── Benchmark ──────────────────────────────────────────────────────── */
  /* One line per system: label, qualifier, bar, value. Dense on purpose — the
     comparison between the rows is the point, not any single row. */
  .bench { max-width: 820px; }
  .bench-row {
    display: grid; grid-template-columns: 172px 148px 1fr 44px;
    align-items: center; gap: 0 16px;
    padding: 9px 0; border-bottom: 1px solid var(--hh-divider);
  }
  .bench-row:first-child { border-top: 1px solid var(--hh-divider); }
  .bench-label { font-size: 14.5px; line-height: 1.3; color: var(--hh-text-muted); }
  .bench-row[data-subject="true"] .bench-label { color: var(--hh-text); font-weight: 500; }
  .bench-note {
    font-family: var(--font-mono); font-size: 11px; color: var(--hh-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .bench-track { height: 6px; background: var(--hh-bg-sunken); border-radius: 3px; overflow: hidden; }
  .bench-fill { height: 100%; border-radius: 3px; }
  .bench-value {
    font-family: var(--font-mono); font-size: 13px; text-align: right;
    color: var(--hh-text-muted); white-space: nowrap;
  }
  .bench-row[data-subject="true"] .bench-value { color: var(--hh-mint); }
  .bench-method {
    margin: 20px 0 0; max-width: 640px;
    font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
    color: var(--hh-text-muted);
  }
  /* Narrow: the bar drops to its own line rather than being squeezed to nothing. */
  @media (max-width: 760px) {
    .bench-row { grid-template-columns: 1fr auto; gap: 3px 12px; padding: 12px 0; }
    .bench-label { grid-column: 1; grid-row: 1; }
    .bench-value { grid-column: 2; grid-row: 1; }
    .bench-note  { grid-column: 1 / -1; grid-row: 2; }
    .bench-track { grid-column: 1 / -1; grid-row: 3; margin-top: 7px; }
  }

  /* ── Finding card ───────────────────────────────────────────────────── */
  /* Explanation and code sit side by side, divided by a rule. Below 900px the
     rule becomes horizontal and the prose stacks above the code. */
  .finding-split { display: grid; grid-template-columns: 0.85fr 1.15fr; }
  .finding-prose { padding: 20px 24px 24px; border-right: 1px solid var(--hh-border); min-width: 0; }
  .finding-code { padding: 20px 0 4px; min-width: 0; }
  .finding-meta { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
  .finding-meta dt {
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--hh-text-muted); white-space: nowrap;
  }
  .finding-meta dd { margin: 0; font-size: 13px; line-height: 1.5; color: var(--hh-text-muted); }
  @media (max-width: 900px) {
    .finding-split { grid-template-columns: 1fr; }
    .finding-prose { border-right: none; border-bottom: 1px solid var(--hh-border); }
  }

  /* ── Pipeline ───────────────────────────────────────────────────────── */
  /* Steps sit on one continuous rule with a node at each stop, so the three
     read as a sequence rather than three unrelated columns. */
  .pipeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .pipeline-step { position: relative; padding: 30px 32px 0 0; }
  .pipeline-step::before {
    content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px;
    background: var(--hh-border);
  }
  .pipeline-step:last-child::before { right: 32px; }
  .pipeline-node {
    position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%;
    background: var(--hh-bg-sunken); border: 1px solid var(--hh-border-strong);
  }
  /* The middle stop is ours — filled, so the eye lands on it. */
  .pipeline-step[data-active="true"] .pipeline-node {
    background: var(--hh-mint); border-color: var(--hh-mint);
  }
  .pipeline-step[data-active="true"]::before { background: var(--hh-mint-border); }

  @media (max-width: 860px) {
    /* Rotate the whole thing: the rule runs down the left, nodes along it. */
    .pipeline { grid-template-columns: 1fr; }
    .pipeline-step { padding: 0 0 28px 28px; }
    .pipeline-step:last-child { padding-bottom: 0; }
    .pipeline-step::before {
      top: 6px; bottom: -6px; left: 6px; right: auto; width: 1px; height: auto;
    }
    .pipeline-step:last-child::before { display: none; }
    .pipeline-node { top: 0; left: 0; }
  }

  /* ── Surfaces ───────────────────────────────────────────────────────── */
  /* Two radii only: 4px for controls and chips, 8px for cards. */
  .card { background: var(--hh-surface-1); border: 1px solid var(--hh-border); border-radius: 8px; padding: clamp(24px, 3vw, 32px); }
  .card-featured { border-color: var(--hh-mint-border); }

  /* ── Team ───────────────────────────────────────────────────────────── */
  /* Two profiles side by side over a shared hairline. The portrait is the
     element; name, alias and role sit under it in the site's mono metadata
     voice, and the bio reads as a caption. */
  .team-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 64px); max-width: 960px;
  }
  /* Portrait beside the text at a modest size; the bio runs under both. */
  .team-member {
    display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 20px; row-gap: 16px;
    align-items: end; align-content: start;
    padding-top: 22px; border-top: 1px solid var(--hh-border);
  }
  .team-portrait {
    aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px;
    border: 1px solid var(--hh-border); background: var(--hh-bg-sunken);
  }
  .team-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .team-bio { grid-column: 1 / -1; }
  .team-name { margin: 0; color: var(--hh-text); font: 500 22px/1.2 var(--font-sans); letter-spacing: -0.015em; }
  .team-tags {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin-top: 8px;
    color: var(--hh-text-muted); font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  }
  .team-alias { color: var(--hh-mint); text-transform: none; letter-spacing: 0.02em; font-size: 13px; }
  .team-handle { color: var(--hh-cyan); text-transform: none; letter-spacing: 0.02em; text-decoration: none; }
  .team-handle:hover { color: var(--hh-text); }
  .team-bio { margin: 0; color: var(--hh-text-muted); font-size: 15px; line-height: 1.65; }
  @media (max-width: 680px) {
    .team-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .team-member { grid-template-columns: 124px minmax(0, 1fr); column-gap: 18px; }
  }

  /* ── Pricing ────────────────────────────────────────────────────────── */
  /* Three packs of the same review, so a card carries only what differs:
     how many, what it costs, what that works out to per run. Everything the
     packs share sits in one list underneath instead of three times over. */
  .price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .card.price-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; }
  .price-tokens {
    font-family: var(--font-mono); font-weight: 500; font-size: 11px;
    letter-spacing: 0.10em; text-transform: uppercase; color: var(--hh-text-muted);
  }
  .price-card[data-featured="true"] .price-tokens { color: var(--hh-mint); }
  .price-total {
    font-weight: 300; font-size: clamp(30px, 3.4vw, 38px); letter-spacing: -0.02em;
    color: var(--hh-text); line-height: 1.1;
  }
  .price-unit { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--hh-text-muted); }
  .price-save {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--hh-mint); border: 1px solid var(--hh-mint-border); border-radius: 4px; padding: 1px 6px;
  }
  .price-blurb { font-size: 13.5px; line-height: 1.5; color: var(--hh-text-muted); margin: 0; }
  /* Shared across every pack, stated once. */
  .price-includes {
    margin: clamp(24px, 3vw, 32px) 0 0; padding: 22px 0 0;
    border-top: 1px solid var(--hh-divider); list-style: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px;
  }
  .price-includes li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; line-height: 1.45; color: var(--hh-text);
  }
  @media (max-width: 860px) {
    .price-grid { grid-template-columns: 1fr; }
    .price-includes { grid-template-columns: 1fr; }
  }

  /* ── Focus ──────────────────────────────────────────────────────────── */
  a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--hh-mint); outline-offset: 2px; border-radius: 2px;
  }

  #root { display: block; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* ── Autoresearch ───────────────────────────────────────────────────── */
  /* The index: one row per post, same log-like density as the findings feed
     so the two read as parts of the same publication rather than a marketing
     page with a blog bolted on. */
  /* The index: a card per article, led by its generated share image. Two up
     on wide screens, one below 820px. */
  .ar-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 2.6vw, 32px);
  }
  .ar-card {
    display: flex; flex-direction: column;
    background: var(--hh-surface-1); border: 1px solid var(--hh-border);
    border-radius: 8px; overflow: hidden; border-bottom: 1px solid var(--hh-border);
    transition: border-color 140ms ease, transform 140ms ease;
  }
  .ar-card:hover { border-color: var(--hh-mint-border); transform: translateY(-2px); }
  .ar-card:hover .ar-title { color: var(--hh-mint); }
  .ar-card-img { aspect-ratio: 1200 / 630; background: var(--hh-bg-sunken); overflow: hidden; }
  .ar-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ar-card-body { padding: clamp(18px, 2.2vw, 26px); }
  @media (max-width: 820px) { .ar-grid { grid-template-columns: 1fr; } }

  .ar-meta {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--hh-text-muted); margin-bottom: 12px;
  }
  /* The separator is drawn rather than typed, so it never gets copied with the
     text and never shows up when only one item is present. */
  .ar-meta > * + *::before {
    content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%;
    background: currentColor; opacity: 0.55; margin-right: 14px; vertical-align: middle;
  }
  .ar-title {
    font-size: clamp(19px, 2.1vw, 23px); font-weight: 500; line-height: 1.28;
    letter-spacing: -0.015em; color: var(--hh-text); margin: 0 0 10px;
    transition: color 120ms ease;
  }
  .ar-summary {
    font-size: 14.5px; line-height: 1.6; color: var(--hh-text-muted); margin: 0;
  }

  .ar-empty {
    border: 1px dashed var(--hh-border); border-radius: 8px;
    padding: clamp(28px, 4vw, 44px); text-align: center;
    color: var(--hh-text-muted); font-size: 15px; line-height: 1.65;
  }

  /* ── Article prose ──────────────────────────────────────────────────── */
  /* Measure is the whole job here. Body copy is capped near 68ch; code and
     tables are allowed to run wider and scroll rather than wrap. */
  .prose { max-width: 68ch; font-size: 16.5px; line-height: 1.75; color: var(--hh-text-muted); }
  .prose > :first-child { margin-top: 0; }
  .prose p { margin: 0 0 1.15em; }
  .prose h2 {
    font: 500 clamp(22px, 2.6vw, 28px)/1.25 var(--font-sans);
    letter-spacing: -0.02em; color: var(--hh-text);
    margin: 2.2em 0 0.7em; scroll-margin-top: 88px;
  }
  .prose h3 {
    font: 500 18px/1.35 var(--font-sans); letter-spacing: -0.01em;
    color: var(--hh-text); margin: 1.9em 0 0.6em; scroll-margin-top: 88px;
  }
  .prose strong { color: var(--hh-text); font-weight: 600; }
  .prose em { font-style: italic; }
  .prose a { color: var(--hh-cyan); border-bottom: 1px solid var(--hh-cyan-border); }
  .prose a:hover { border-bottom-color: var(--hh-cyan); }
  .prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
  .prose li { margin-bottom: 0.5em; }
  .prose li::marker { color: var(--hh-text-muted); }
  .prose hr { border: none; border-top: 1px solid var(--hh-divider); margin: 2.4em 0; }
  .prose blockquote {
    margin: 0 0 1.15em; padding: 2px 0 2px 18px;
    border-left: 2px solid var(--hh-mint-border); color: var(--hh-text-muted);
  }
  /* Inline code stays inline; fenced blocks get their own scrolling box. */
  .prose code {
    font-family: var(--font-mono); font-size: 0.88em;
    background: var(--hh-bg-sunken); border: 1px solid var(--hh-border);
    border-radius: 4px; padding: 1px 5px; color: var(--hh-text);
    overflow-wrap: break-word;
  }
  .prose pre {
    margin: 0 0 1.35em; padding: 16px 18px; overflow-x: auto;
    background: var(--hh-bg-sunken); border: 1px solid var(--hh-border);
    border-radius: 8px;
  }
  .prose pre code {
    background: none; border: none; padding: 0; border-radius: 0;
    font-size: 13px; line-height: 1.65; color: var(--hh-text);
    white-space: pre;
  }
  /* Wide content scrolls inside its own box; the page never scrolls sideways. */
  .prose .table-wrap { overflow-x: auto; margin: 0 0 1.35em; }
  .prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
  .prose th, .prose td {
    text-align: left; padding: 9px 14px 9px 0;
    border-bottom: 1px solid var(--hh-divider); vertical-align: top;
  }
  .prose th {
    font-family: var(--font-mono); font-weight: 500; font-size: 10.5px;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--hh-text-muted);
    border-bottom-color: var(--hh-border); white-space: nowrap;
  }
  .prose img { border-radius: 8px; border: 1px solid var(--hh-border); }

  /* Article header sits above the prose and may run wider than the measure. */
  .post-head { border-bottom: 1px solid var(--hh-divider); padding-bottom: clamp(28px, 3.5vw, 40px); margin-bottom: clamp(32px, 4vw, 48px); }
  .post-title {
    font-weight: 600; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12;
    letter-spacing: -0.03em; color: var(--hh-text); margin: 14px 0 0; max-width: 24ch;
  }
  .post-back {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--hh-text-muted); border-bottom: none;
  }
  .post-back:hover { color: var(--hh-mint); }

  /* Article meta row: author, date and topic on the left; sharing on the right. */
  .post-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px 24px; flex-wrap: wrap; margin-top: 20px;
  }
  .post-author {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px; border: 1px solid var(--hh-mint-border); border-radius: 4px;
    background: var(--hh-mint-soft); color: var(--hh-mint);
    font-size: 10px; letter-spacing: 0.10em; line-height: 1;
  }
  .post-author img { display: block; width: auto; height: 22px; }
  .post-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px 24px; flex-wrap: wrap;
    margin-top: clamp(40px, 5vw, 64px); padding-top: 24px;
    border-top: 1px solid var(--hh-divider);
  }
  .share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .share-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-mono); font-size: 11px; font-weight: 500;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--hh-text-muted); background: transparent;
    border: 1px solid var(--hh-border); border-radius: 4px;
    padding: 6px 11px; cursor: pointer; white-space: nowrap;
    transition: color 120ms ease, border-color 120ms ease;
  }
  .share-btn:hover { color: var(--hh-text); border-color: var(--hh-border-strong); }