/* Careers tightens the section-header bottom margin. */
  .sec-head { margin-bottom: 32px; }

  /* DARK plates */
  .section.dark { background: var(--ink); color: var(--bg); border-bottom: none; }
  .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 .lead-aside { color: rgba(243,239,237,0.55); }
  .section.dark .lead-aside .ja { color: rgba(243,239,237,0.65); }
  .section.dark .prose { color: rgba(243,239,237,0.92); }
  .section.dark .prose .key-line { background: var(--magic); color: var(--ink); padding: 0 4px; }
  .section.dark a { color: var(--bg); }
  .section.dark .prose a { border-bottom: 1px solid rgba(253,242,2,0.45); padding-bottom: 1px; transition: border-color 0.18s ease, background 0.18s ease; }
  /* 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) {
    .section.dark .prose a:hover { border-bottom-color: var(--magic); background: rgba(253,242,2,0.12); }
  }
  /* Was underline-free at rest, which left the page's single most important
     action — the apply address — visually identical to body copy until the
     pointer found it (and gave keyboard/touch users no affordance at all).
     It now carries the same resting underline idiom .more-link uses on this
     plate: an inset box-shadow, so thickening it on hover doesn't perturb the
     box. 2px rather than .more-link's 1px because this renders at 24px.
     Hover still turns it yellow. */
  .section.dark .prose .apply-mail { color: var(--bg); border-bottom: none; background: none; box-shadow: inset 0 -2px 0 rgba(243,239,237,0.6); padding-bottom: 4px; transition: box-shadow 0.15s, color 0.15s; }
  @media (hover: hover) {
    .section.dark .prose .apply-mail:hover { color: var(--magic); border-bottom: none; background: none; box-shadow: inset 0 -3px 0 var(--magic); }
  }
  .section.dark .more-list { border-top-color: rgba(243,239,237,0.55); }
  .section.dark .more-row { border-bottom-color: rgba(243,239,237,0.18); }
  /* 0.72 rather than the 0.5 the mono counters used — an icon reads as a lighter mark
     than letterforms at the same alpha, so this lifts it back to the same presence. */
  .section.dark .more-row .ix { color: rgba(243,239,237,0.72); }
  /* Higher specificity than the dark prose `a` rule so .more-link keeps its own
     box-shadow underline (no yellow border / yellow bg wash inherited). */
  .section.dark .prose .more-link { box-shadow: inset 0 -1px 0 rgba(243,239,237,0.6); border-bottom: none; padding-bottom: 3px; background: none; }
  @media (hover: hover) {
    .section.dark .prose .more-link:hover { box-shadow: inset 0 -2px 0 var(--magic); border-bottom: none; background: none; }
  }
  .section.dark .more-link .opens { color: rgba(243,239,237,0.55); }
  .section.dark .roles-list { border-top-color: rgba(243,239,237,0.55); }
  .section.dark .role-row { border-bottom-color: rgba(243,239,237,0.18); }
  @media (hover: hover) {
    .section.dark .role-row:hover { background: rgba(253,242,2,0.10); }
  }
  .section.dark .role-row .cat { color: var(--magic); }
  .section.dark .role-row .ix, .section.dark .role-row .arrow { color: rgba(243,239,237,0.55); }
  .section.dark .role-row .desc .opens { color: rgba(243,239,237,0.55); }

  /* TOKYO PLATE — full-bleed yellow band (the one place yellow floods) */
  .tokyo-plate { background: var(--magic); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 40px 56px; display: grid; grid-template-columns: 220px 1fr auto; gap: 48px; align-items: center; }
  .tokyo-seal { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--ink); text-transform: uppercase; line-height: 1.5; border-right: 1px solid var(--ink); padding-right: 24px; }
  .tokyo-seal b { display: block; font-weight: 500; font-size: 11px; margin-top: 4px; }
  .tokyo-seal .ji { font-family: 'Aeonik Pro', 'Aeonik Fallback', Arial, sans-serif; font-size: 44px; letter-spacing: -0.02em; text-transform: none; color: var(--ink); margin-top: 12px; line-height: 0.95; font-weight: 400; }
  .tokyo-prose p { font-size: 22px; line-height: 1.4; letter-spacing: -0.014em; max-width: 50ch; color: var(--ink); margin: 0; font-weight: 500; }
  .tokyo-meta { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.16em; color: var(--ink); text-transform: uppercase; line-height: 1.6; text-align: right; opacity: 0.65; }

  /* H1 — sober */
  .frame h1 { font-weight: 500; font-size: clamp(56px, 8vw, 120px); line-height: 0.92; letter-spacing: -0.050em; margin-bottom: 32px; }
  .lead-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 60ch); gap: 56px; }
  .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: 14px; line-height: 1.7; display: block; max-width: 28ch; }

  .frame .frame-prose p { font-size: 24px; line-height: 1.42; letter-spacing: -0.014em; max-width: 56ch; text-wrap: pretty; }
  .frame .frame-prose a { border-bottom: 2px solid var(--magic); padding-bottom: 1px; }
  @media (hover: hover) {
    .frame .frame-prose a:hover { background: var(--magic); }
  }

  /* Section heads */
  h2.bighead { font-weight: 500; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.0; letter-spacing: -0.034em; margin-bottom: 32px; max-width: 22ch; }
  .prose p { font-size: 18px; line-height: 1.65; letter-spacing: -0.005em; margin-bottom: 18px; max-width: 64ch; text-wrap: pretty; }
  .prose p.lead { font-size: 22px; line-height: 1.45; letter-spacing: -0.012em; margin-bottom: 24px; max-width: 56ch; }
  .prose .key-line { background: linear-gradient(transparent 60%, var(--magic) 60%); padding: 0 2px; font-weight: 500; }

  /* What we look for — qualities list */
  .qualities { margin-top: 8px; border-top: 1px solid var(--ink); }
  .quality { display: grid; grid-template-columns: 60px 1fr; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: start; }
  /* The gutter holds a 30px mark per quality instead of a Q · NN counter. `color` is
     the single recolour point: the Phosphor marks fill with currentColor, the bespoke
     turnstile strokes with it. Deliberate, approved deviation from
     BRAID-design-system.md §9 ("no fills, no rounded ends") — Phosphor's outlines are
     filled geometry with rounded terminals, and a little roundness was accepted. */
  .quality .ix { display: block; width: 30px; height: 30px; color: var(--subtle); margin-top: 8px; }
  .quality h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.012em; margin-bottom: 8px; }
  .quality p { font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; max-width: 64ch; }

  .less-list { margin-top: 32px; padding: 24px 0; border-top: 1px dashed var(--rule); }
  .less-list .less-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; margin-bottom: 14px; }
  .less-list ul { list-style: none; }
  .less-list li { font-size: 16px; line-height: 1.6; padding: 8px 0 8px 28px; position: relative; max-width: 64ch; }
  .less-list li::before { content: '×'; position: absolute; left: 6px; top: 7px; color: var(--muted); font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 14px; }

  /* Section 5 (Where we are hiring) — give the prose column a bit more width
     so the role rows breathe horizontally without changing line-length elsewhere. */
  #sec-5 .lead-row { grid-template-columns: minmax(0, 1fr) minmax(0, 76ch); }
  #sec-5 .role-row .desc { max-width: 64ch; }

  /* Roles — 3 cards stacked */
  .roles-list { margin-top: 16px; border-top: 1px solid var(--ink); }
  .role-row { display: grid; grid-template-columns: 60px 200px 1fr 24px; gap: 28px; align-items: baseline; padding: 26px 0; border-bottom: 1px solid var(--rule); transition: background 0.15s; }
  /* No padding-shift on hover — keeps the role text from re-aligning when the
     row's box changes size. The yellow wash provides the affordance. */
  @media (hover: hover) {
    .role-row:hover { background: rgba(253,242,2,0.06); }
  }
  /* Icon gutter. `align-self: start` because the row is align-items:baseline and an
     SVG's baseline is its bottom edge, which at 30px would drop the mark well below the
     text. margin-top seats the artwork on the .desc strong cap line. */
  .role-row .ix { display: block; width: 30px; height: 30px; color: var(--subtle); align-self: start; margin-top: 8px; }
  .role-row .cat { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: 0.14em; color: var(--ink); text-transform: uppercase; font-weight: 500; }
  .role-row .desc { font-size: 16px; line-height: 1.55; letter-spacing: -0.005em; max-width: 60ch; }
  .role-row .desc strong { display: block; font-size: 19px; font-weight: 500; margin-bottom: 6px; letter-spacing: -0.012em; }
  .role-row .arrow { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; color: var(--subtle); font-size: 13px; align-self: center; }
  .role-row .desc .opens { display: inline-block; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 10px; border-bottom: 1px solid var(--ink); color: var(--ink); padding-bottom: 2px; }
  @media (hover: hover) {
    .role-row .desc .opens:hover { border-bottom: 2px solid var(--magic); padding-bottom: 1px; }
  }

  /* More — three signals */
  .more-list { margin-top: 16px; border-top: 1px solid var(--ink); }
  .more-row { display: grid; grid-template-columns: 60px 1fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
  .more-row:last-child { border-bottom: none; }
  .more-row .ix { display: block; width: 30px; height: 30px; color: var(--subtle); margin-top: 5px; }
  .more-row h3 { font-size: 21px; font-weight: 500; letter-spacing: -0.012em; margin-bottom: 8px; }
  .more-row p { font-size: 16px; line-height: 1.6; max-width: 62ch; }
  .more-link { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 12px; box-shadow: inset 0 -1px 0 var(--ink); padding-bottom: 3px; font-size: 16px; background: none; transition: box-shadow 0.15s; }
  @media (hover: hover) {
    .more-link:hover { box-shadow: inset 0 -2px 0 var(--magic); background: none; }
  }
  .more-link .opens { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--subtle); text-transform: uppercase; }
  /* Bottom padding trimmed 8px → 4px so the resting underline sits under the
     word rather than floating below it; the 8px top padding stays, keeping the
     tap target comfortably past 44px at this size. */
  .apply-mail { font-size: 24px; letter-spacing: -0.014em; padding: 8px 0 4px; display: inline-block; margin-top: 12px; }

  @media (max-width: 960px) {
    .tokyo-plate { grid-template-columns: 1fr; gap: 24px; padding: 40px 24px; }
    .tokyo-seal { border-right: none; padding-right: 0; }
    .tokyo-meta { text-align: left; }
    .lead-row, .quality, .role-row, .more-row { grid-template-columns: 1fr !important; gap: 12px; }
  }