/* TOKYO PLATE — contained bordered card, paper background (muted treatment) */
  .tokyo-wrap { padding: 0 56px 56px; background: var(--bg); border-bottom: 1px solid var(--rule); }
  .tokyo-plate { border: 1px solid var(--ink); background: #ECE6E1; padding: 28px 32px 32px; display: grid; grid-template-columns: 160px 1fr; gap: 36px; align-items: start; position: relative; }
  .tokyo-plate::before { content: ''; position: absolute; top: -1px; right: 28px; width: 56px; height: 6px; background: var(--magic); border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
  .tokyo-seal { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; line-height: 1.6; border-right: 1px solid var(--rule); padding-right: 24px; }
  .tokyo-seal .stamp { display: inline-block; background: var(--magic); color: var(--ink); padding: 3px 7px; border: 1px solid var(--ink); font-size: 9px; letter-spacing: 0.16em; margin-bottom: 14px; line-height: 1.0; }
  .tokyo-seal b { display: block; color: var(--ink); font-weight: 500; font-size: 11px; margin-top: 4px; letter-spacing: 0.12em; }
  .tokyo-seal .ji { font-family: 'Aeonik Pro', 'Aeonik Fallback', Arial, sans-serif; font-size: 30px; letter-spacing: -0.01em; text-transform: none; color: var(--ink); margin-top: 14px; line-height: 1.0; font-weight: 400; }
  .tokyo-seal .ji small { display: block; font-size: 10px; letter-spacing: 0.14em; color: var(--subtle); margin-top: 8px; text-transform: uppercase; }
  .tokyo-prose p { font-size: 18px; line-height: 1.55; letter-spacing: -0.008em; max-width: 60ch; color: var(--ink); margin-bottom: 12px; text-wrap: pretty; }
  .tokyo-prose .closing-line { font-size: 20px; letter-spacing: -0.012em; line-height: 1.4; margin-top: 6px; font-weight: 500; margin-bottom: 0; }
  .tokyo-prose .closing-line .underbar { background: linear-gradient(transparent 60%, var(--magic) 60%); padding: 0 3px; }

  /* TEAM PLATE — paper white */
  .section.paper { background: #FAF7F4; }

  /* CONTACT — dark plate with magic accents */
  .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 .contact h2 { color: var(--bg); }
  .section.dark .contact h2 .accent { color: var(--magic); }
  .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 .contact-list { border-top: 1px solid rgba(243,239,237,0.30); }
  .section.dark .contact-row { border-bottom: 1px solid rgba(243,239,237,0.18); }
  .section.dark .contact-row .ck { color: rgba(243,239,237,0.55); }
  /* Resting underline, not hover-only: these three rows hold the site's general
     contact address, the LinkedIn page and the office location, and at rest
     they were indistinguishable from the plain text beside them. Inset
     box-shadow so the hover thicken doesn't move the box. */
  .section.dark .contact-row .cv a { box-shadow: inset 0 -1px 0 rgba(243,239,237,0.45); padding-bottom: 2px; padding-top: 3px; transition: box-shadow 0.15s, color 0.15s; }
  /* 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 .contact-row .cv a:hover { color: var(--magic); box-shadow: inset 0 -2px 0 var(--magic); }
  }
  .section.dark .contact-row .cv small { color: rgba(243,239,237,0.55); }
  .section.dark .contact-row .cn { color: rgba(243,239,237,0.55); }
  .section.dark .routing { color: rgba(243,239,237,0.65); border-top: 1px dashed rgba(243,239,237,0.35); }
  .section.dark .routing a { border-bottom: 1px solid rgba(243,239,237,0.25); color: rgba(243,239,237,0.65); }
  @media (hover: hover) {
    .section.dark .routing a:hover { color: var(--magic); border-bottom-color: var(--magic); }
  }
  .section.dark .prose { color: rgba(243,239,237,0.85); }

  /* INTRO */
  .intro 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, 56ch); 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: 18px; line-height: 1.7; display: block; max-width: 26ch; }
  .prose p { font-size: 19px; line-height: 1.6; letter-spacing: -0.005em; margin-bottom: 22px; text-wrap: pretty; }
  .prose p.lead { font-size: 22px; line-height: 1.45; letter-spacing: -0.012em; margin-bottom: 28px; }

  /* FOUNDERS */
  .founders h2, .team h2, .advisors h2, .contact 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; }
  .founders-list { margin-top: 40px; border-top: 1px solid var(--ink); }
  .founder { display: grid; grid-template-columns: 200px 1fr 56px; gap: 40px; padding: 36px 0; border-bottom: 1px solid var(--rule); align-items: start; position: relative; }
  .founder .corner-tag { position: absolute; right: 0; top: 36px; font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--ink); text-transform: uppercase; background: var(--magic); padding: 6px 10px; border: 1px solid var(--ink); line-height: 1.0; }
  .portrait { aspect-ratio: 1 / 1; background: var(--beige); border: 1px solid var(--rule); position: relative; overflow: hidden; filter: grayscale(1); }
  .portrait img, .portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .founder .body h3 { font-size: 24px; letter-spacing: -0.020em; font-weight: 500; margin-bottom: 4px; }
  .founder .body .role { 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; margin-bottom: 14px; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; }
  .founder .body p { font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; margin-bottom: 12px; max-width: 64ch; }

  /* TEAM */
  .team .lead-row { margin-bottom: 24px; }
  .team-link { display: inline-flex; align-items: baseline; gap: 12px; margin-top: 8px; border-bottom: 1px solid var(--ink); padding-bottom: 3px; font-size: 17px; letter-spacing: -0.008em; }
  @media (hover: hover) {
    .team-link:hover { border-bottom: 2px solid var(--magic); padding-bottom: 2px; }
  }
  .team-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; margin-left: 6px; }

  /* ADVISORS */
  .advisors-grid { margin-top: 40px; border-top: 1px solid var(--ink); }
  .advisor-group 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; padding: 18px 0 10px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--rule); }
  .advisor-group h3 .ja { color: var(--subtle); font-family: 'Aeonik Pro', 'Aeonik Fallback', Arial, sans-serif; text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 400; }
  .advisor { display: grid; grid-template-columns: 80px 1fr; gap: 28px; padding: 22px 0; border-bottom: 1px solid var(--rule); align-items: start; }
  /* Directors get larger 120px portraits (the first advisor-group); the advisor
     group below keeps the standard 80px. Mobile collapses to a single column
     via the shared .advisor override at ≤960px, so this only applies on desktop. */
  .advisor-group:first-of-type .advisor { grid-template-columns: 120px 1fr; }
  .advisor .av-portrait { aspect-ratio: 1 / 1; background: var(--beige); border: 1px solid var(--rule); filter: grayscale(1); position: relative; overflow: hidden; }
  .advisor .av-portrait img, .advisor .av-portrait svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .advisor .av-body h4 { font-size: 17px; letter-spacing: -0.012em; font-weight: 500; margin-bottom: 2px; }
  .advisor .av-body .av-role { 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: 6px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
  /* Was `margin: 0`, a no-op back when .social had no margins — but .social now
     carries margin-top:-7px to compensate its hit-area padding, and this rule's
     four classes outrank it. Zeroing it here let the padding through uncancelled
     and grew the About page by 7px per advisor (49px in total). Only the sides
     and bottom are zeroed now; the top compensation is inherited. */
  .advisor .av-body .av-role .social { margin-right: 0; margin-bottom: 0; margin-left: 0; }
  .advisor .av-body p { font-size: 14px; line-height: 1.55; color: var(--ink); max-width: 64ch; }
  .advisor .av-body p.av-quote { font-size: 16px; line-height: 1.5; letter-spacing: -0.008em; font-weight: 500; color: var(--ink); margin-top: 12px; padding-left: 16px; border-left: 2px solid var(--magic); text-wrap: pretty; }

  /* Inline "Read more" disclosure on director/advisor bios. Native <details>
     gives us a zero-JS, keyboard-accessible reveal that matches the editorial
     document feel. The default browser triangle is hidden; the summary reads
     as a small mono link, with the marker flipping ' → ' / ' ↓ '. */
  .advisor .av-body .av-more { margin-top: 8px; }
  .advisor .av-body .av-more summary {
    display: inline-block;
    cursor: pointer;
    list-style: none;
    font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--ink);
    /* Use an inset box-shadow as the underline so a 1→2px thicken-on-hover
       doesn't perturb the box height (border-thickness changes affect layout). */
    box-shadow: inset 0 -1px 0 var(--ink);
    padding-bottom: 3px;
    transition: box-shadow 0.15s;
  }
  .advisor .av-body .av-more summary::-webkit-details-marker { display: none; }
  .advisor .av-body .av-more summary::after { content: ' →'; margin-left: 2px; }
  .advisor .av-body .av-more[open] summary::after { content: ' ↓'; }
  @media (hover: hover) {
    .advisor .av-body .av-more summary:hover { box-shadow: inset 0 -2px 0 var(--magic); }
  }

  /* Social links — small mono micro-type with the same stable underline
     idiom. Applies to founder bodies and advisor av-bodies. Currently:
     LinkedIn; structured as a flex row so more platforms can be added. */
  .socials { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; }
  .social {
    display: inline-block;
    font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace;
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
    box-shadow: inset 0 -1px 0 var(--rule);
    padding-bottom: 3px;
    /* WCAG 2.2 AA 2.5.8 needs 24x24. Grown with top padding and pulled back
       by an equal negative margin, so the hit area gains height upward while
       the box, the text baseline and the underline stay exactly where they
       were — measured 18px before, 25px after. */
    padding-top: 7px; margin-top: -7px;
    transition: box-shadow 0.15s, color 0.15s;
  }
  @media (hover: hover) {
    .social:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--magic); }
  }
  .social::after { content: ' →'; margin-left: 2px; }
  .advisor .av-body .av-more > p:first-of-type { margin-top: 14px; }
  /* Adjacent paragraphs inside a director/advisor bio get a 12px gap — same
     spacing the founders' bio uses between paragraphs. */
  .advisor .av-body .av-more p + p { margin-top: 12px; }

  /* CONTACT */
  .contact .lead-row { margin-bottom: 24px; }
  .contact-list { border-top: 1px solid var(--rule); margin-top: 16px; }
  .contact-row { display: grid; grid-template-columns: 180px 1fr 100px; gap: 32px; padding: 18px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
  .contact-row .ck { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
  .contact-row .cv { font-size: 17px; letter-spacing: -0.008em; }
  .contact-row .cv small { display: block; color: var(--muted); font-size: 13px; letter-spacing: 0; margin-top: 2px; }
  .contact-row .cn { font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 10px; letter-spacing: 0.14em; color: var(--subtle); text-transform: uppercase; text-align: right; }
  .routing { margin-top: 24px; padding-top: 18px; border-top: 1px dashed var(--rule); font-family: 'Aeonik Fono', 'Aeonik Fono Fallback', 'SF Mono', Menlo, monospace; font-size: 11px; letter-spacing: 0.10em; color: var(--muted); text-transform: uppercase; line-height: 1.9; }
  .routing a { border-bottom: 1px solid var(--rule); }
  @media (hover: hover) {
    .routing a:hover { border-bottom-color: var(--ink); color: var(--ink); }
  }

  @media (max-width: 960px) {
    .tokyo-wrap { padding: 0 24px 40px; }
    .lead-row, .founder, .advisor, .contact-row { grid-template-columns: 1fr !important; gap: 16px; }
    /* Collapse the Tokyo plate to a single column so the prose uses the full
       plate width instead of being squeezed beside the 160px seal. */
    .tokyo-plate { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
    .tokyo-seal { border-right: none; padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
  }