/* ── HERO ─────────────────── */
  .hero h1 { font-weight: 500; font-size: clamp(72px, 11vw, 168px); line-height: 0.92; letter-spacing: -0.055em; margin-bottom: 28px; }
  .hero .sub { font-size: 22px; line-height: 1.42; letter-spacing: -0.012em; color: var(--muted); max-width: 48ch; }
  /* The plate takes the native ratio of aura_hero.png (2532×1432) rather than the
     handoff's 16/9, matching how index.css frames the Home hero. It matters more
     here: the composition bleeds to both edges (content spans x 0..2530 of 2532),
     so any horizontal crop would cut the outer arcs. The image's own ground is
     exactly --beige, so the fill below is seamless before and after decode. */
  .hero-figure { margin-top: 56px; aspect-ratio: 2532 / 1432; border: 1px solid var(--rule); background: var(--beige); position: relative; overflow: hidden; }
  .hero-figure img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .hero-cap { display: flex; justify-content: space-between; margin-top: 12px; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--subtle); text-transform: uppercase; }

  /* ── PRODUCES ─────────────── */
  .produces h2, .workflow h2, .arch h2 { font-weight: 500; font-size: clamp(28px, 3.6vw, 48px); line-height: 1.0; letter-spacing: -0.030em; margin-bottom: 16px; max-width: 22ch; }
  .lead-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 56ch); gap: 56px; margin-bottom: 48px; }
  .lead-aside { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.10em; color: var(--subtle); text-transform: uppercase; line-height: 1.7; }
  .lead-aside .ja { font-family: 'Aeonik Pro', 'Aeonik Fallback', Arial, sans-serif; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); margin-top: 18px; line-height: 1.7; display: block; max-width: 26ch; }
  .lead-prose p { font-size: 22px; line-height: 1.45; letter-spacing: -0.012em; text-wrap: pretty; }

  .triplet { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; margin-top: 16px; }
  .triplet h3 { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 16px; display: flex; justify-content: space-between; }
  .triplet p { font-size: 16px; line-height: 1.55; letter-spacing: -0.005em; color: var(--ink); }

  .artifacts { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }

  /* Fig. 1a and 1b sit side by side and must be exactly the same height, so the
     plate fixes the shape rather than inheriting it from whatever the exports
     happen to be. They are close but not identical — 1a is 1500x1350 (1.11111),
     1b is 1501x1359 (1.10449) — and that 0.6% is 2.7px of height at a 507px
     column, enough to misalign the two captions.

     aspect-ratio makes both plates 10:9 by construction, and object-fit:contain
     means a mismatched export letterboxes on the beige rather than losing
     content — the report is dense text, so cover is not an option. At the
     current 0.6% drift the band is ~1.5px against 1b's own near-beige ground,
     invisible. A grossly different export would show obvious bands, which is
     the right failure: visible, not silent. */
  .alts-photo { border: 1px solid var(--ink); background: var(--beige); aspect-ratio: 10 / 9; }
  .alts-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .artifact-cap { margin-top: 12px; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--subtle); text-transform: uppercase; display: flex; justify-content: space-between; }

  /* ── WORKFLOW ─────────────── */
  .workflow .lead-prose p { max-width: 56ch; }
  .steps { margin-top: 16px; border-top: 1px solid var(--rule); }
  .step { display: grid; grid-template-columns: 80px 200px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .step .num { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--subtle); }
  .step .title { font-size: 22px; letter-spacing: -0.015em; font-weight: 500; }
  .step .title small { display: block; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; margin-top: 6px; font-weight: 400; }
  .step.machine .title small { color: var(--ink); }
  .step.machine .title small::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--magic); margin-right: 6px; transform: translateY(-1px); }
  .step .body { font-size: 17px; line-height: 1.55; letter-spacing: -0.005em; color: var(--ink); max-width: 60ch; }

  /* 21/5, was 21/7. The drawing that replaced the wireframe is a single row of
     four stages with one line of furniture above and below — 6.75:1 of actual
     ink. In the old 3:1 frame it sat in ~80px of dead air top and bottom while
     having only 46px at the sides. 21/5 puts the margins within a few px of
     each other at desktop widths. */
  /* Beige plate, matching Home's .diagram. The four stage boxes are filled
     --beige too, so on the plate they stop reading as tinted chips and become
     outline-only shapes — their fill now only stops the arrows showing through.
     Same treatment as Home's 02a/02b, so the site has one figure ground. */
  .workflow-figure { margin-top: 56px; border: 1px solid var(--ink); aspect-ratio: 21 / 5; padding: 24px; background: var(--beige); }
  .workflow-figure svg { width: 100%; height: 100%; display: block; }

  /* ── ARCH ─────────────────── */
  .arch .lead-prose p { max-width: 56ch; }
  .arch-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; margin-top: 16px; }
  .arch-prose h3 { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--ink); text-transform: uppercase; margin-top: 28px; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
  .arch-prose h3:first-child { margin-top: 0; }
  .arch-prose p { font-size: 17px; line-height: 1.6; letter-spacing: -0.005em; margin-bottom: 14px; max-width: 60ch; text-wrap: pretty; }
  /* .arch-figure is now only the sticky wrapper — it carries no border, no
     padding and no ground. The frame moved onto the image itself, which is what
     puts the caption outside the rule (it used to sit inside, the only figure on
     the site that did) and lets the drawing fill the frame edge to edge.
     Border on the image rather than on a wrapper avoids adding a div: the sticky
     element needs to stay shorter than its grid cell or it has no travel. */
  .arch-figure { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
  /* img as well as svg: Fig. 03 is referenced from disk rather than inlined, so
     the svg-only selector stopped matching it and the figure rendered at its
     1500px attribute width, dragging the page 612px wide. --beige shows only
     until the file decodes; after that the export's own ground rect covers it. */
  .arch-figure svg, .arch-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--ink); background: var(--beige); }
  .arch-figure .cap { margin-top: 12px; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--subtle); text-transform: uppercase; display: flex; justify-content: space-between; }

  /* The one route onward from the architecture argument, replacing the removed
     "Go deeper" section. Same idiom as Home's .deeper link. */
  .deeper {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 32px;
    font-size: 15px; font-weight: 500;
  /* The underline is a box-shadow, not a border. It used to swap
     border-bottom 1px→2px against padding-bottom 3px→2px on hover: the two sum
     to 4px either way, so Chromium measures no shift at any width or DPR — but
     it asks the engine to round two layout values independently every hover, and
     that is a jitter waiting for a browser or a fractional scale factor that
     rounds them differently. box-shadow is painted, never laid out, so the
     thickness can change with no geometry to round. Same pattern as about.css's
     .social and careers.css's .more-link, which already do it this way.
     padding-bottom is 4px — the old 3px padding plus the 1px border it replaces
     — so the resting appearance is unchanged. */
    box-shadow: inset 0 -1px 0 var(--ink);
    padding-bottom: 4px;
  }
  /* Hover is an enhancement, not a state. On touch, tapping a link applies
     :hover and leaves it applied until the next tap elsewhere: measured on a
     390px touch context, .band-row stayed padded 16px, .entry 12px, .deeper's
     rule 2px and .social's underline ink — so a row you merely visited kept
     reading as selected. Guarding on (hover: hover) means pointers keep every
     effect and touch gets none of the residue. Each rule is wrapped where it
     stands rather than collected into one block, so cascade order is
     untouched. */
  @media (hover: hover) {
    .deeper:hover { box-shadow: inset 0 -2px 0 var(--magic); }
  }


  /* ── §03 WHITE PAPERS ─────── */
  /* The two papers this section's argument is drawn from. Full width, below
     .arch-grid rather than inside .arch-prose: that column is 1.1fr of a 2-col
     grid, so three columns would have had ~55% of the measure to share.

     Row idiom is Home's .band-row — hairline list, yellow tab sliding in on
     hover — and the chip is the .type-tag.wp from the Notebooks index, so the
     row reads as the same object as the entry it links to.

     Track sizes are set for the real copy, not for the shape: these are the
     published standfirsts, ~170 and ~140 characters, so the summary column is
     the widest of the three. baseline alignment (not center) lines up the first
     line of each cell, which is what makes a multi-line row read as one row. */
  .papers { border-top: 1px solid var(--ink); margin-top: 56px; }
  .paper-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr) minmax(0, 1.25fr) 32px;
    gap: 32px; align-items: baseline;
    padding: 22px 0; border-bottom: 1px solid var(--rule);
  }
  .paper-row .p-kind {
    font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace;
    font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink); background: var(--magic); border: 1px solid var(--ink);
    padding: 3px 8px 4px; justify-self: start; white-space: nowrap;
  }
  .paper-row .p-title { font-size: 19px; letter-spacing: -0.015em; text-wrap: pretty; }
  /* Browsers treat the hyphen in a compound as a break opportunity and prefer
     it to the space before, so the title broke as "...approach to AI-" /
     "powered discovery." at every width tested — widening the column did not
     move it. Holding the compound together forces the break back to the space. */
  .paper-row .p-title .nb { white-space: nowrap; }
  .paper-row .p-sum {
    font-size: 15px; line-height: 1.5; letter-spacing: -0.004em;
    color: var(--muted); text-wrap: pretty;
  }
  /* No letter-spacing: on a single glyph the mono tracking is pure trailing
     space and pushes the arrow off its own column edge (same fix as Home's
     .band-row .arrow). */
  .paper-row .p-arrow {
    font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace;
    font-size: 18px; line-height: 1; letter-spacing: 0;
    color: var(--subtle); justify-self: end;
    transition: transform 0.2s ease, color 0.2s ease;
  }
  /* No sliding yellow tab here, unlike Home's .band-row: the chip already puts
     brand yellow in the row and a second yellow event on hover made the section
     busy against the accents in the architecture figure. The arrow carries the
     feedback instead — it is the element that already means "this is a link",
     and moving it costs no colour and no layout (transform, not padding, so it
     also stays off the compositor's critical path). */
  @media (hover: hover) {
    .paper-row:hover .p-arrow { transform: translateX(5px); color: var(--ink); }
  }

  /* ── CTA ─────────────────── */
  .cta-sec { padding: 80px 56px 96px; background: var(--ink); color: var(--bg); }
  .cta-sec h2 { font-weight: 500; font-size: clamp(40px, 6vw, 80px); line-height: 0.95; letter-spacing: -0.038em; max-width: 18ch; margin-bottom: 32px; }
  /* Solid yellow chip on the dark CTA — a gradient that's only yellow at the
     bottom 40% leaves ink-on-ink text up top (invisible on the dark plate). */
  .cta-sec h2 em { font-style: normal; background: var(--magic); color: var(--ink); padding: 0 8px; }
  .cta-sec a { display: inline-flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--bg); padding-bottom: 4px; font-size: 17px; }
  @media (hover: hover) {
    .cta-sec a:hover { border-bottom-color: var(--magic); }
  }
  .cta-meta { display: flex; justify-content: space-between; margin-top: 48px; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: rgba(243,239,237,0.5); text-transform: uppercase; border-top: 1px solid rgba(243,239,237,0.2); padding-top: 24px; }

  @media (max-width: 960px) {
    .lead-row, .triplet, .artifacts, .arch-grid, .step { grid-template-columns: 1fr !important; gap: 24px; }

    /* Four tracks become two: the chip and the arrow share the top line, then
       title and summary each span the full width. The arrow rides up with the
       chip rather than sitting alone under the summary — on touch there is no
       hover tab, so it is the only thing marking these rows as links, and it
       should read as part of the row's header, not as an orphan. */
    .paper-row {
      grid-template-columns: 1fr auto;
      gap: 10px 16px; padding: 20px 0 22px; align-items: center;
    }
    .paper-row .p-title, .paper-row .p-sum { grid-column: 1 / -1; }
    .paper-row .p-sum { font-size: 14px; }

    /* Fig. 02 is four stages in a row — 6.75:1 of ink. There is no width at
       which that fits a phone: held to the frame it renders 148px wide with
       1.4px labels, which is not a small diagram, it is a smudge. (The wireframe
       it replaced had the same problem at 3.4px, so this is old, not new.)
       So it scrolls instead, the house pattern for content wider than its
       column. 900px keeps the microtype at ~8.4px, near the 9.2px it gets on
       desktop, and costs ~3 swipes.
       tabindex makes the region keyboard-scrollable — only Chrome 127+ focuses
       scrollers on its own, and without it arrow-key users cannot reach the
       right-hand stages at all. The svg stays aria-hidden: the caption and the
       .steps list below carry this content for assistive tech. */
    .workflow-figure { aspect-ratio: auto; overflow-x: auto; padding: 20px; }
    .workflow-figure svg { min-width: 900px; height: auto; }
  }

  /* Ink plate without the .section.dark class, so it needs the focus-ring flip
     that styles.css gives the dark sections. */
  .cta-sec :focus-visible { outline-color: var(--bg); }