/* ============ HERO ============ */
  .hero{ overflow:visible; }
  .hero{ position:relative; }
  .hero h1{ max-width:12em; }
  /* Lee, 2026-09-11: "Maybe unitalicize the first sentence". */
  .hero-sub-plain{ font-style:normal; }
  .hero-sub{ margin-top:var(--space-m); }
  .hero-actions{ margin-top:var(--space-l); display:flex; align-items:center; gap:var(--space-m); flex-wrap:wrap; }

  /* Round 8, Lee: "Center labels in buttons." Label and arrow sit centred
     in every button; the arrow keeps its xs gap after the label. */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs);
    background:var(--ink); border:1px solid var(--ink);
    padding:var(--space-s) var(--space-m);
    cursor:pointer;
    white-space:nowrap;
  }
  .btn{ transition:box-shadow .15s ease-out; }
  .btn:hover{ box-shadow: inset 0 -6px 0 var(--red); }
  /* On the red flood a red base merges with the ground and the button just
     looks shorter, so there the base is oaktag, as the CTA rule turns. */
  .close .btn:hover{ box-shadow: inset 0 -6px 0 var(--oaktag); }

  /* ============ THE COVER PLATE ============
     The hero used to be a headline, a button, and three shapes loose on the
     oaktag to the right of them. Measured at 1440 that produced two faults, both
     visible in the render rather than inferred: the red plane landed behind the
     word "people" so the collision read as an accident, and the ink disc was
     cropped by the red band underneath it, which turned the band into a horizon
     and the disc into a sun going down behind it. That is exactly the resolving
     the mark rules forbid.

     A manual opens on a cover, so the first screen is one now: a ruled plate
     carrying a running head, the title, and the mark in its own keyed column.
     Every crop is now made by the plate's own border, so nothing is cut by a
     neighbouring section and no edge below the mark can act as a ground. */
  .cover{ border:1px solid var(--ink); padding:0; }
  .cover-body{
    display:grid; grid-template-columns:minmax(0,1fr) minmax(0,38%);
    align-items:stretch;
  }
  /* Even padding, the same token the other plates use at each width: m up
     to 1180, l from 1181 (doctrine #62). */
  .cover-title{
    padding:var(--space-m);
    display:flex; flex-direction:column; justify-content:center;
  }
  @media (min-width:1181px){ .cover-title{ padding:var(--space-l); } }
  .cover-stage{
    border-left:1px solid var(--ink);
    position:relative; overflow:hidden; min-height:clamp(300px, 28vw, 440px);
  }
  .cover .hero-actions{ margin-top:var(--space-l); }
  .cover h1{ max-width:11em; }
  .cover .hero-sub{ margin-top:var(--space-m); }
  @media (max-width:1000px){
    .cover-body{ grid-template-columns:minmax(0,1fr); }
    .cover-stage{ border-left:0; border-top:1px solid var(--ink); min-height:300px; }
  }

  .figmark{ display:block; width:100%; height:100%; }

  @media (prefers-reduced-motion:no-preference){
    /* Second pass, step B: both shapes settle from their own centers. */
    .figmark .settle{
      transform-box:fill-box; transform-origin:center;
      animation: settle-in 1.1s cubic-bezier(.2,.7,.3,1) both;
    }
    .figmark .settle-b{ animation-delay:.12s; }
    @keyframes settle-in{
      0%{ transform: translate(16px,-12px) scale(.95); opacity:0; }
      70%{ opacity:1; }
      100%{ transform: translate(0,0) scale(1); opacity:1; }
    }
    /* Animate pass: the hover uses the separate `scale` property, because
       the settle animation holds `transform` (fill-mode both). */
    .figpart{ transition: scale .18s ease-out; }
    .figpart:hover{ scale:1.03; }

    /* The tab-away line fades in and out in place; nothing moves. */
    .hero-note{ transition:opacity .4s ease-out; }
  }

  /* Landing on a size from the "Which is truest" answers. Second pass, step
     B: the red rule under the name is the focus marker for a row that takes
     focus without a ring (WCAG 2.4.7), so it stays for as long as the row is
     the target or has keyboard focus, with or without motion. The script
     only holds it at zero until the scroll has ended, then draws it in; a
     second pick of the same answer draws it again. */
  .size-name{
    align-self:flex-start;
    background-image:linear-gradient(var(--red),var(--red));
    background-repeat:no-repeat; background-position:0 100%;
    background-size:0 4px;
  }
  .size:target .size-name, .size:focus-visible .size-name{ background-size:100% 4px; }
  @media (prefers-reduced-motion:no-preference){
    .size.is-landing .size-name{ background-size:0 4px; }
    .size.is-drawing .size-name{ animation:draw-rule .7s cubic-bezier(.16,1,.3,1) both; }
    @keyframes draw-rule{
      from{ background-size:0 4px; }
      to  { background-size:100% 4px; }
    }
  }

  /* Arrival pulse, live 2026-09-21: one quiet flash on the whole plan's own
     border when an in-page link (an H.1/H.2/H.3 answer or an inline "That's
     Complete" footnote) lands on it, fired on arrival, never on click. An
     inset ring in the page's own red, fading out over a second -- the same
     red the drawn rule under the name already uses, so the two read as one
     idea rather than two competing signals. Complete carries an ink ground,
     so its ring reads the same against either. */
  @media (prefers-reduced-motion:no-preference){
    .size.is-pulsing{ animation:size-pulse 1s ease-out both; }
    @keyframes size-pulse{
      from{ box-shadow: inset 0 0 0 3px var(--red); }
      to  { box-shadow: inset 0 0 0 0 transparent; }
    }
  }
  /* Reduced motion: no animation, a static outline held for the same one
     second and then removed by the script, never a permanent mark. */
  .size.size.is-pulse-static{ outline:2px solid var(--red); outline-offset:-2px; }

  /* The tab-away line: set in the cover's own padding, above the h1, so
     showing it moves nothing. Empty and transparent until the script fills
     it; the script skips it entirely under reduced motion. */
  .cover-title{ position:relative; }
  .hero-note{
    position:absolute; top:var(--space-s); left:0; right:0; margin:0;
    padding-left:inherit; padding-right:inherit; max-width:none;
    opacity:0; pointer-events:none;
  }
  .hero-note.is-shown{ opacity:1; }
  /* Where the cover pads l, the line sits a full m down from the border. */
  @media (min-width:1181px){ .hero-note{ top:var(--space-m); } }
  /* Print on white paper; toggled by beforeprint/afterprint. */
  html.is-printing{ --oaktag:#ffffff; }

  /* ============ THE TURN ============ */
  .flood{ background:var(--red); border-color:var(--ink); }
  .flood-line{
    font-family:'Big Shoulders Display', 'Big Shoulders fallback', Impact, sans-serif;
    font-weight:800; font-size:var(--t-h2); line-height:0.95;
    color:var(--ink); max-width:none; margin:0;
    text-wrap:balance;
  }
  /* Lee, live 2026-09-18 1:02pm: "kinda want a more dramatic presentation for
     this." price breaks onto its own line at a poster size above the hero's
     own display size (hero * 1.15, so the relationship holds at every
     viewport without a second clamp() token) and bleeds right to the flood
     plate's own edge, the same way the page's marks bleed to a plate border
     -- the flood has none, so the negative margin closes the gap the
     padding would otherwise leave. Still oaktag on red, still one sentence. */
  .flood-line .loud{
    display:block;
    color:var(--oaktag);
    /* Poster scale: the word, not the sentence, is the flood. Fluid from
       112px at a 400px viewport to 288px at 1920px, never smaller than the
       hero. Lee, live 2026-09-21 round 2, correcting the round-1 bleed
       below (kept for the record): the word's right INK edge should sit
       inset from the box's right edge by the same plate padding the
       sentence keeps on the left, at every width -- not bled to the plate
       border. Right-aligned in its own full-width line; no right margin, so
       the box edge lands at the plate's own padding inset like every other
       line in the section, then a small negative nudge cancels Big
       Shoulders' own right side-bearing so the visible ink, not the glyph
       box, is what lines up with that inset. Measured (render, not
       assumption): with no right margin at all, this font's own ink-right
       edge under text-align:right lands exactly on the paragraph's own
       right edge -- no side-bearing correction was actually needed once
       the bleed was removed, checked at 1655/1440/1280/400 (0px gap at
       every width, right margin equals the left 80/40/16px plate padding
       exactly). Descender treatment is unchanged: the negative bottom
       margin cancels the block's own bottom padding so the box ends
       exactly where the descender does, with the same small downward
       nudge closing the leading the 0.8 line-height still reserves below
       the glyph. */
    font-size:max(var(--t-hero), clamp(7rem, 16vw + 2.5rem, 18rem));
    line-height:0.8;
    letter-spacing:-0.01em;
    margin-top:var(--space-m);
    margin-bottom:calc(-1 * var(--plate-pad) + 0.115em);
    text-align:right;
  }