/* ── 1 · HERO ────────────────────────────── */
  .hero h1 {
    font-weight: 500;
    font-size: clamp(40px, 5.4vw, 76px);
    line-height: 1.0;
    letter-spacing: -0.040em;
    margin-bottom: 28px;
    text-wrap: balance;
    max-width: 16ch;
  }
  .hero .sub {
    font-size: 21px;
    line-height: 1.4;
    letter-spacing: -0.012em;
    color: var(--muted);
    max-width: 38ch;
  }
  /* The plate takes the art's own ratio so it fills exactly — nothing cropped,
     no letterbox band. home_hero.svg is 675x380 (1.776); the PNG it replaced was
     2262x1180 (1.917), so leaving the old value would have banded the sides by
     8%. Update this whenever the image is replaced; `contain` below means a
     mismatch letterboxes over --beige rather than cutting art. */
  .hero-figure {
    margin-top: 56px;
    aspect-ratio: 675 / 380;
    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;
  }

  /* ── 2 · BELIEFS ─────────────────────────── */
  .beliefs h2 {
    font-weight: 500;
    font-size: clamp(28px, 3.6vw, 48px);
    line-height: 1.0;
    letter-spacing: -0.030em;
    margin-bottom: 40px;
  }
  /* The aside is a 3-line mono label, so it gets a label-sized track (220px —
     the same width the site's other meta gutters use, e.g. .tokyo-plate)
     rather than 1fr. At 1fr the label floated in a ~485px void and pushed the
     statement's first line 486px clear of the heading it belongs to; now the
     interval between them is filled by the label instead of being empty, and
     the prose column widens 56ch → 60ch. Trailing slack sits on the right,
     which is a margin, not a hole.

     DELIBERATELY HOME-ONLY. The same change was tried on About, AURA and the
     two Careers ink plates and reverted on 2026-08-13: at their shorter lead
     lengths the wide 1fr aside reads as intentional margin, and only this
     section — ~520 words under a heading half a screen away — was hurt by it.
     Don't harmonise .lead-row on the other pages to match this. */
  .beliefs-body { display: grid; grid-template-columns: 220px minmax(0, 60ch); gap: 64px; }
  .beliefs-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;
  }
  .beliefs-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;
  }
  /* Two-step rhythm rather than one repeated interval: 26px between the body
     paragraphs, 36px after the thesis sentence. The statement runs ~520 words
     in eight paragraphs, and at a flat 22px the whole block read as one wall
     with no resting points. */
  .prose p {
    font-size: 18px; line-height: 1.6; letter-spacing: -0.005em;
    margin-bottom: 26px; text-wrap: pretty;
  }
  .prose p.lead { font-size: 22px; line-height: 1.45; letter-spacing: -0.012em; margin-bottom: 36px; }
  .prose p.closing { font-size: 22px; line-height: 1.45; letter-spacing: -0.012em; margin-top: 36px; }
  .prose .braid-emph { background: none; border-bottom: 2px solid var(--magic); padding: 0 0 1px; }
  /* Same declaration as careers.css's .prose .key-line — the site's established
     treatment for a key phrase (as opposed to .braid-emph, which underlines a
     single word). Gives the statement one visual anchor for the sentence that
     carries its argument. */
  .prose .key-line { background: linear-gradient(transparent 60%, var(--magic) 60%); padding: 0 2px; font-weight: 500; }
  .signoff { margin-top: 48px; font-style: italic; color: var(--muted); font-size: 16px; }
  .deeper {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 36px;
    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); }
  }

  /* ── 3 · SHIFT ───────────────────────────── */
  .shift h2 {
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.028em;
    margin-bottom: 40px;
    max-width: 22ch;
  }
  .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; border-top: 1px solid var(--rule); padding-top: 16px; }
  .pane h3 {
    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-bottom: 12px; display: flex; justify-content: space-between;
  }
  /* Beige plate, not paper. The 02a export is drawn on a full-bleed #e8e4e0
     ground and its four stage boxes are filled that same value — they read as
     outlined boxes on a tinted field, and their fill exists only to stop the
     loop lines showing through. On paper that ground was missing and the boxes
     read as tinted chips instead. --beige is the site's figure-plate value
     (.hero-figure, .video-still, 404's .diagram) and is within 2 levels of the
     export's fill, so the token wins over the literal hex.
     Applied to both panes: they're a matched pair, and a beige 02a beside a
     paper 02b reads as a mistake. */
  .diagram { aspect-ratio: 4 / 3; border: 1px solid var(--ink); padding: 18px; background: var(--beige); }
  .diagram svg { width: 100%; height: 100%; display: block; }

  /* §03 · 02a — the loop that never terminates.
     One dash crawls the closed circuit at constant speed and never reaches a
     terminal. It is the section's claim ("Design stops being a loop") made by
     the figure instead of the caption, and the pair's argument only lands if
     02a is the one that never arrives.

     Why the numbers are what they are:
     · 3073.6 is the exact path perimeter, 2 × (1019.2 + 517.6). dasharray sums
       to it (110 + 2963.6), so exactly one dash exists on the track and
       offset 0 is congruent to offset -3073.6 — the loop restarts invisibly.
       If the path in index.html ever moves, all three numbers change together.
     · 11s puts the dash at ~90px/s on desktop. The caption says "at human
       speed"; a faster dash would contradict it and pull focus from the prose.
     · The dash is hidden ~47% of the cycle behind the stage boxes, but in four
       separate ~0.9s beats, not one dead pause — that reading of "work goes
       into a stage and comes out" is the effect, not a gap to design around.

     Reduced motion needs no rule here. The global block in styles.css forces
     animation-duration 0.01ms and iteration-count 1, which lands the dash at
     offset -3073.6 — congruent to 0, which parks it inside the CAD box, where
     the box fill occludes it. The static fallback is the diagram exactly as it
     was drawn, with no frozen artifact stranded mid-edge. */
  @keyframes loop-travel { to { stroke-dashoffset: -3073.6; } }
  .diagram .flow {
    fill: none;
    stroke: var(--pop);
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 110 2963.6;
    animation: loop-travel 11s linear infinite;
  }
  .pane-cap { margin-top: 16px; font-size: 16px; line-height: 1.4; letter-spacing: -0.012em; }
  .pane-cap span { color: var(--muted); font-size: 13px; display: block; margin-top: 4px; }

  /* ── 4 · GLIMPSE ─────────────────────────── */
  .glimpse h2 {
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.028em;
    margin-bottom: 32px;
    max-width: 22ch;
  }
  /* Was a dark 21/9 "video" plate behind a wireframe SVG. It now holds the real
     still (1102×657) that stands in for the looping animation, so the plate
     takes that image's native ratio — 21/9 would have cropped ~20% off the top
     and bottom, and the art only carries a ~6% margin. The fill is light for
     the same reason: the still is light-ground, and --ink showed as a dark
     flash before decode. Revisit ratio + fill when the animation arrives. */
  /* 16/9, was 1102/657 (1.677) — the ratio of the still that used to stand here.
     braid-animation-loop is 1920x1080, so the old frame would have letterboxed
     the video by 6%. contain rather than cover: the ratios now match exactly, so
     any sub-pixel drift shows a hair of --beige instead of cropping the art. */
  /* ── 4 · INTERLUDE ───────────────────────────
     A caesura, not a section. The plate runs the full width of the document
     sheet and its bottom edge meets §04's ink with no rule and no padding
     between them, so the light half of the page ends by running into the dark
     one. That is the whole idea: the block was not detached because it looked
     wrong, it was detached because it sat inside the section system's margins
     without any of the system's apparatus. Bleeding it out of those margins
     makes the omission read as intent. */
  .glimpse {
    padding-left: 0; padding-right: 0; padding-bottom: 0;
    border-bottom: none;              /* no hairline — §04's ink is the edge */
  }
  /* The text stays on the section measure; only the plate bleeds. */
  /* Left, on the same axis as the tag in the row below it, so the two rows share
     one left edge and PAUSE is the only thing on the right. */
  .glimpse-lead { padding: 0 56px; display: flex; justify-content: flex-start; }
  .glimpse .deeper { margin-top: 0; }

  /* No border and no aspect-ratio fill colour: a frame contradicts a bleed, and
     the plate is the video rather than a figure containing one. --beige stays as
     the pre-decode ground only. */
  .video-still { aspect-ratio: 16 / 9; background: var(--beige); overflow: hidden; position: relative; }
  .video-still video { display: block; width: 100%; height: 100%; object-fit: cover; }
  /* The tag was an overlay inside the dark plate. On the light still it lost its
     contrast, and because this art reaches the lower-left corner it covered
     geometry once the plate shrank on mobile — so it now sits in a caption row
     below the plate, the same place §01 puts .hero-cap. */
  /* Tag left, control right — the same split .hero-cap uses for its meta row.
     Sits above the plate now, so the margin is below it rather than above. */
  .video-cap { margin: 28px 56px 12px; display: flex; align-items: center; gap: 16px; }
  /* On the plate, lower right, close to the corner. It used to sit at the 56px
     page measure so it lined up with the tag and link above, but that put it on
     top of the drawing's bottom dimension rule and the last candidate rail —
     alignment is not worth landing a control in the middle of the artwork.
     Quiet by default: --rule hairline rather than ink, --muted glyph, and a
     partly transparent paper ground so the frame behind it still reads. The
     ground is not decoration — the video moves, and a bare glyph disappears
     whenever something dark passes under it. Sharpens to ink on hover. */
  .video-toggle {
    position: absolute; right: 20px; bottom: 18px;
    width: 34px; height: 34px;
    display: grid; place-items: center;
    color: var(--muted);
    background: rgba(243, 239, 237, 0.86);
    border: 1px solid var(--rule);
    cursor: pointer; padding: 0;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
  }
  .video-toggle svg { width: 13px; height: 13px; display: block; }
  /* 44px under a thumb; the plate corner has room for it. */
  @media (pointer: coarse) {
    .video-toggle { width: 44px; height: 44px; right: 16px; bottom: 14px; }
    .video-toggle svg { width: 15px; height: 15px; }
  }
  @media (hover: hover) {
    .video-toggle:hover { color: var(--ink); border-color: var(--ink); background: var(--bg); }
  } .video-tag {
    display: inline-block;
    font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace;
    font-size: 10px; letter-spacing: 0.14em; color: var(--subtle);
    text-transform: uppercase;
    border: 1px solid var(--rule);
    padding: 4px 8px;
  }
  .video-tag::before {
    content: ''; display: inline-block;
    width: 6px; height: 6px; background: var(--magic);
    margin-right: 8px; transform: translateY(-1px);
  }

  /* ── 5 · BAND ────────────────────────────── */
  .band h2 {
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1.05;
    letter-spacing: -0.028em;
    margin-bottom: 32px;
    max-width: 22ch;
  }
  .band-list { border-top: 1px solid var(--rule); }
  .band-row {
    /* label · value · arrow — the leading 56px number track was dropped. */
    display: grid; grid-template-columns: 100px 1fr 32px;
    align-items: baseline; padding: 22px 0;
    border-bottom: 1px solid var(--rule);
    position: relative;
    transition: padding-left 0.2s;
  }
  .band-row::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0;
    width: 0; background: var(--magic);
    transition: width 0.2s ease;
  }
  @media (hover: hover) {
    .band-row:hover { padding-left: 16px; }   /* 6px bar + 10px gap to content */
    .band-row:hover::before { width: 6px; }
  }
  .band-row .label {
    font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace;
    font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase;
  }
  /* The arrow used to share the label's 11px mono microtype, which made it 58% the
     size of the 19px value it terminates — and it sits ~920px away at the far end
     of the row, so it needed presence rather than less of it. 18px is optically
     matched to the value. No letter-spacing: on a single glyph the 0.14em tracking
     was pure trailing space, pushing the arrow off its own column edge. */
  .band-row .arrow {
    font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace;
    font-size: 18px; line-height: 1; letter-spacing: 0; color: var(--subtle);
  }
  .band-row .value { font-size: 19px; letter-spacing: -0.015em; }
  .band-cta {
    display: inline-flex; align-items: center; gap: 12px;
    margin-top: 40px;
    background: var(--ink); color: var(--bg);
    padding: 14px 22px;
    font-size: 14px; font-weight: 500;
  }

  /* DARK PLATE — §4 closes the page on ink, the way About closes on its contact
     plate. Every value here is lifted verbatim from the shared ladder in
     careers.css / about.css (0.18 row rules, 0.22 sec-head rule, 0.30 list top,
     0.40 / 0.45 / 0.55 meta) so the site's three dark plates stay identical. */
  .section.dark { background: var(--ink); color: var(--bg); border-bottom: none; padding-bottom: 96px; }
  .section.dark .sec-head { color: rgba(243,239,237,0.55); border-bottom: 1px solid rgba(243,239,237,0.22); }
  .section.dark .sec-head .ja { color: rgba(243,239,237,0.55); }
  .section.dark a { color: var(--bg); }
  .section.dark .band-list { border-top-color: rgba(243,239,237,0.30); }
  .section.dark .band-row { border-bottom-color: rgba(243,239,237,0.18); }
  .section.dark .band-row .label { color: rgba(243,239,237,0.55); }
  /* 0.55 matches careers.css's .role-row .arrow — the ladder's step for arrows
     on dark. About's 0.40 right-meta step would drop this to 3.5:1. */
  .section.dark .band-row .arrow { color: rgba(243,239,237,0.72); }
  /* Inverted against the plate — an ink button on ink would vanish. */
  .section.dark .band-cta { background: var(--bg); color: var(--ink); }

  @media (max-width: 960px) {
    .beliefs-body { grid-template-columns: 1fr; gap: 24px; }
    .glimpse-lead { padding: 0 24px; }
    .video-cap { margin: 22px 24px 10px; }
    .pair { grid-template-columns: 1fr; }
  }