/* ── Design tokens ────────────────────────────────────────────────── */
:root {
  /* Spacing — 4px base, 8px rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s12: 48px;
  /* Type scale — 11 / 12 / 14 / 18 / 22, that's it */
  --t-stat: 22px; --t-title: 18px; --t-body: 14px; --t-sub: 12px; --t-eyebrow: 11px;
  /* Surfaces — true-neutral, faintly cool. Reads as a control-room instrument, not warm paper.
     Saturated colour stays reserved for the 震度 ramp; the chrome is a quiet grey scaffold. */
  --surface-0: #f2f4f6; --surface-1: #ffffff; --surface-2: #eceff2; --surface-3: #e1e5ea;
  --hairline: #e3e6ea; --hairline-2: #ccd2d9;
  /* Ink ramp — every step verified on white AND on --surface-2 (4.5:1+). --text-low carries the
     source citations, which the brand says must always read; it is no longer a decorative grey. */
  --text-hi: #14171b; --text-mid: #4d545d; --text-low: #646b75;
  --accent: #16191e; --accent-ink: #ffffff;   /* off-black UI accent (magenta kept only for 震度7 data) */
  --sans: "IBM Plex Sans JP", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --nav-h: 56px; --panel-w: 400px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Keyboard-only focus ring, on-brand (kills the default browser blue) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
body { background: var(--surface-0); color: var(--text-hi); font-family: var(--sans); font-size: var(--t-body); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow: hidden; }
.jp { font-feature-settings: "palt" 1; }
/* MONO is rationed: numbers + source citations only */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }
.src { font-family: var(--mono); font-size: var(--t-eyebrow); line-height: 1.5; color: var(--text-low); letter-spacing: 0.01em; }
.muted { color: var(--text-low); font-weight: 400; }

/* ── App shell grid ───────────────────────────────────────────────── */
#app { position: fixed; inset: 0; display: grid; grid-template-rows: var(--nav-h) 1fr; grid-template-columns: 1fr var(--panel-w); }

/* ── Top nav ──────────────────────────────────────────────────────── */
#nav { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--s6); background: var(--surface-1); border-bottom: 1px solid var(--hairline); z-index: 20; }
.brand { display: flex; align-items: baseline; gap: var(--s3); }
.brand .mark { font-size: var(--t-title); font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; }
.brand .sub { font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--text-low); }
.nav-right { display: flex; align-items: center; gap: var(--s4); }
.nav-link { font-size: var(--t-sub); font-weight: 500; color: var(--text-mid); text-decoration: none; }
.nav-link:hover { color: var(--text-hi); }

/* Connect-to-AI popover */
.connect { position: relative; }
.connect-btn { display: inline-flex; align-items: center; gap: var(--s2); background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: 7px; color: var(--text-hi); font-family: var(--sans); font-size: var(--t-sub); font-weight: 500; padding: 6px 11px; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.connect-btn:hover { background: var(--surface-3); border-color: var(--text-low); }
.cb-short { display: none; }   /* compact label, mobile only */
.connect-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.connect-btn .caret { transition: transform 0.15s; opacity: 0.7; }
.connect-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }
.connect-pop { position: absolute; right: 0; top: calc(100% + var(--s2)); width: 340px; max-width: calc(100vw - var(--s8)); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); padding: var(--s5); z-index: 40; }
.cp-h { font-size: var(--t-body); font-weight: 600; color: var(--text-hi); margin-bottom: var(--s2); }
.cp-body { font-size: var(--t-sub); color: var(--text-mid); line-height: 1.55; margin-bottom: var(--s4); }
.cp-body strong { color: var(--text-hi); font-weight: 600; }
.cp-label { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-low); margin-bottom: var(--s2); }
.cp-cmd { display: flex; align-items: stretch; gap: var(--s2); background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: 8px; padding: var(--s2) var(--s2) var(--s2) var(--s3); margin-bottom: var(--s4); }
.cp-cmd code { flex: 1; font-family: var(--mono); font-size: var(--t-sub); color: var(--text-hi); line-height: 1.4; word-break: break-all; align-self: center; }
.cp-copy { flex: none; align-self: center; background: var(--accent); border: 0; border-radius: 6px; color: var(--accent-ink); font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; padding: 6px 10px; cursor: pointer; transition: opacity 0.15s; }
.cp-copy:hover { opacity: 0.85; }
.cp-copy.done { background: #1f7a4d; }
.cp-eg { font-size: var(--t-sub); color: var(--text-mid); line-height: 1.5; margin-bottom: var(--s4); }
.cp-links { display: flex; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--hairline); }
.cp-links a { flex: 1; display: inline-flex; align-items: center; gap: 6px; justify-content: center; font-size: var(--t-sub); font-weight: 500; color: var(--text-hi); text-decoration: none; border: 1px solid var(--hairline-2); border-radius: 7px; padding: 8px 10px; transition: background 0.15s, border-color 0.15s; }
.cp-links a:hover { background: var(--surface-2); border-color: var(--text-low); }
.cp-links .ar { color: var(--text-low); }
.cp-pkg { text-align: center; margin-top: var(--s3); }
.cp-pkg code { font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--text-low); }
/* Globe menu — holds language + secondary links. Primary CTA (Connect to your AI) stays visible
   in the nav; only secondary items live here. Globe icon (not a hamburger) keeps the language
   switch discoverable for a visitor who lands in the wrong language. */
.menu { position: relative; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 32px; background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: 7px; color: var(--text-hi); cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.menu-btn:hover { background: var(--surface-3); border-color: var(--text-low); }
.menu-btn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.menu-pop { position: absolute; right: 0; top: calc(100% + var(--s2)); min-width: 208px; max-width: calc(100vw - var(--s8)); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.14); padding: var(--s3); z-index: 40; transform-origin: top right; animation: menu-in 0.16s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-5px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-pop { animation: none; } }
.mp-label { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-low); padding: var(--s1) var(--s2); margin-bottom: var(--s2); }
.menu-pop .lang { display: flex; }
.menu-pop .lang button { flex: 1; }
.mp-item { display: flex; align-items: center; gap: var(--s2); padding: 10px var(--s2); border-radius: 7px; font-size: var(--t-sub); font-weight: 500; color: var(--text-hi); text-decoration: none; }
.mp-item:hover { background: var(--surface-2); }
.mp-item .ar { margin-left: auto; color: var(--text-low); }
.menu-pop .mp-item { margin-top: var(--s1); }
.menu-pop .lang + .mp-item { margin-top: var(--s3); padding-top: 13px; border-top: 1px solid var(--hairline); border-radius: 0 0 7px 7px; }

.lang { display: flex; background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: 7px; overflow: hidden; }
.lang button { background: none; border: 0; color: var(--text-mid); font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 500; padding: 6px 11px; cursor: pointer; transition: background 0.15s, color 0.15s; }
.lang button + button { border-left: 1px solid var(--hairline-2); }
.lang button.on { background: var(--accent); color: var(--accent-ink); }
.lang button:not(.on):hover { color: var(--text-hi); }

/* ── Map ──────────────────────────────────────────────────────────── */
#map { grid-row: 2; grid-column: 1; position: relative; height: 100%; background: var(--surface-0); }
.maplibregl-ctrl-group { background: #fff !important; border: 1px solid var(--hairline) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--hairline) !important; }
.maplibregl-ctrl-attrib { background: rgba(255,255,255,0.82) !important; }
.maplibregl-ctrl-attrib a { color: var(--text-mid) !important; }
/* Map cold-start indicator — overlaps the map grid cell, fades out once the data paints. */
#map-loading { grid-row: 2; grid-column: 1; align-self: center; justify-self: center; z-index: 5; display: inline-flex; align-items: center; gap: var(--s2); pointer-events: none; background: rgba(255,255,255,0.94); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 15px; font-size: var(--t-sub); color: var(--text-mid); box-shadow: 0 2px 12px rgba(0,0,0,0.07); transition: opacity 0.35s ease; }
#map-loading.hidden { opacity: 0; visibility: hidden; }
.ml-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ml-pulse 1.1s ease-in-out infinite; }
@keyframes ml-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.78); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ml-dot { animation: none; opacity: 0.7; } #map-loading { transition: none; } }

/* ── Panel ────────────────────────────────────────────────────────── */
#panel { grid-row: 2; grid-column: 2; background: var(--surface-1); border-left: 1px solid var(--hairline); overflow-y: auto; }
#panel::-webkit-scrollbar { width: 8px; }
#panel::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 4px; }
.panel-inner { padding: var(--s6); }
.intro { font-size: var(--t-body); color: var(--text-mid); line-height: 1.55; margin-bottom: var(--s6); }

.section { padding-top: var(--s6); margin-top: var(--s6); border-top: 1px solid var(--hairline); }
.section:first-of-type { padding-top: 0; margin-top: 0; border-top: 0; }
/* Section labels read as plain instrument labels, not the all-caps tracked eyebrow that lands on
   every AI section. Small, bold, sentence-case, full-ink; the qualifier trails in muted ink. */
.section-h { font-size: var(--t-sub); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-hi); margin-bottom: var(--s4); }
.section-h .muted { font-weight: 400; color: var(--text-low); opacity: 1; }

/* Search — the primary action: find your own area in the projected reach. */
.field-label { display: block; font-size: var(--t-body); font-weight: 500; color: var(--text-hi); margin-bottom: var(--s3); line-height: 1.4; }
.field { position: relative; }
#search { width: 100%; background: var(--surface-2); border: 1px solid var(--hairline-2); border-radius: 8px; color: var(--text-hi); font-family: var(--sans); font-size: var(--t-body); padding: 11px 13px; outline: none; }
#search:focus { border-color: var(--accent); background: #fff; }
#search::placeholder { color: var(--text-low); }
.results { position: absolute; left: 0; right: 0; top: 100%; margin-top: var(--s1); background: #fff; border: 1px solid var(--hairline-2); border-radius: 8px; overflow: hidden; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,0.1); }
.results button { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text-hi); font-family: var(--sans); font-size: var(--t-body); padding: 10px 13px; cursor: pointer; }
.results button:hover { background: var(--surface-2); }
.results-msg { padding: 11px 13px; font-size: var(--t-sub); color: var(--text-mid); line-height: 1.45; }

/* Layer toggle buttons */
/* Layer toggles: a grouped list of switches. A switch reads as state, not as an action
   button (which is a solid fill) or a selector. Solid fill stays reserved for actions. */
.layers { border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden; background: #fff; }
.layer-btn { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 52px; text-align: left; padding: 10px var(--s4); background: none; border: 0; cursor: pointer; transition: background 0.15s; color: var(--text-hi); font-family: var(--sans); }
.layer-btn + .layer-btn { border-top: 1px solid var(--hairline); }
.layer-btn:hover { background: var(--surface-2); }
.layer-btn .lmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; margin-right: auto; }
.layer-btn .lt { font-size: var(--t-body); font-weight: 500; line-height: 1.2; transition: color 0.15s; }
.layer-btn .ls { font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--text-low); line-height: 1.2; }
.layer-btn[aria-checked="false"] .lt { color: var(--text-mid); }
/* the switch */
.layer-btn .sw { position: relative; flex-shrink: 0; width: 32px; height: 18px; border-radius: 999px; background: #c2c7ce; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.12); transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s; }
.layer-btn .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3); transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.layer-btn[aria-checked="true"] .sw { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.layer-btn[aria-checked="true"] .sw::after { transform: translateX(14px); }
@media (prefers-reduced-motion: reduce) { .layer-btn .sw, .layer-btn .sw::after { transition: none; } }

/* Legend */
.legend-note { font-size: var(--t-sub); color: var(--text-mid); line-height: 1.55; margin-bottom: var(--s5); }
.chips { display: flex; flex-direction: column; gap: var(--s3); }
.chip { display: flex; align-items: flex-start; gap: var(--s3); }
.chip .ckey { display: flex; align-items: center; gap: var(--s2); width: 82px; flex-shrink: 0; }
.chip .swatch { width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.14); flex-shrink: 0; }
.chip .num { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-hi); font-weight: 600; font-size: var(--t-body); line-height: 1.3; }
.chip .qual { font-size: var(--t-sub); color: var(--text-mid); font-weight: 500; }
.chip .desc { flex: 1; min-width: 0; font-size: var(--t-sub); color: var(--text-mid); line-height: 1.4; padding-top: 1px; }

/* Reach + stats */
.reach { font-size: var(--t-body); color: var(--text-mid); line-height: 1.55; }
.reach strong { color: var(--text-hi); font-weight: 600; }
/* Headline figures as a ruled readout, not stat cards. The numbers carry the weight; the
   styling stays out of the way (control-room readout, per the brand). */
.readout { margin-top: var(--s5); border-top: 1px solid var(--hairline); }
.ro-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline); }
.ro-label { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-sub); color: var(--text-mid); line-height: 1.35; }
.ro-val { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-stat); font-weight: 500; color: var(--text-hi); white-space: nowrap; flex-shrink: 0; letter-spacing: -0.01em; }

/* Bridge */
.bridge .section-h { color: var(--text-hi); font-size: var(--t-body); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.45; }
.bridge p { font-size: var(--t-body); color: var(--text-mid); line-height: 1.55; margin-bottom: var(--s4); }
.cta { display: block; font-size: var(--t-body); font-weight: 500; text-decoration: none; color: var(--text-hi); border: 1px solid var(--hairline-2); border-radius: 7px; padding: 11px var(--s4); margin-bottom: var(--s2); transition: background 0.15s, border-color 0.15s; }
.cta:hover { background: var(--surface-2); border-color: var(--text-low); }
.cta.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.cta.primary:hover { background: #2e333b; border-color: #2e333b; }

/* Method disclosure — makes the derived-data + no-verdict ethic legible without shouting it. */
.method { }
.method-h { font-size: var(--t-sub); font-weight: 600; color: var(--text-hi); cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s2); }
.method-h::-webkit-details-marker { display: none; }
.method-h::after { content: "+"; margin-left: auto; color: var(--text-low); font-family: var(--mono); font-size: var(--t-body); line-height: 1; }
.method[open] .method-h::after { content: "\2212"; }
.method-body { font-size: var(--t-sub); color: var(--text-mid); line-height: 1.6; margin-top: var(--s3); }
.method-more { display: inline-block; margin-top: var(--s3); font-size: var(--t-sub); font-weight: 500; color: var(--text-hi); text-decoration: underline; text-underline-offset: 2px; }
.method-more:hover { color: var(--text-mid); }

.panel-foot p { line-height: 1.6; margin-top: var(--s2); }
.panel-foot a { color: var(--text-mid); text-decoration: underline; text-underline-offset: 2px; }

/* Readout popover */
#readout { position: absolute; z-index: 6; background: rgba(255,255,255,0.97); border: 1px solid var(--hairline-2); border-radius: 8px; padding: 11px 14px; pointer-events: none; min-width: 170px; box-shadow: 0 6px 20px rgba(0,0,0,0.13); }
#readout .rk { font-family: var(--mono); font-size: var(--t-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mid); }
#readout .rv { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-stat); font-weight: 500; margin-top: 3px; }
#readout .rs { font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--text-low); margin-top: var(--s1); }

.sheet-handle { display: none; }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 800px) {
  #app { grid-template-columns: 1fr; grid-template-rows: var(--nav-h) 1fr; }
  #map { grid-column: 1; }
  /* Bottom sheet. The sheet itself doesn't scroll (overflow hidden); .panel-inner does. The grabber
     lives in a fixed header zone, separate from the scroll area, so dragging the sheet never fights
     content scroll (the gesture-conflict trap in bottom-sheet design). */
  #panel { grid-column: 1; grid-row: 2; position: absolute; left: 0; right: 0; bottom: 0; top: auto;
    max-height: 86vh; border-left: 0; border-top: 1px solid var(--hairline);
    border-radius: 18px 18px 0 0; box-shadow: 0 -6px 28px rgba(0,0,0,0.13);
    transform: translateY(calc(100% - 168px)); transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
    z-index: 15; overflow: hidden; display: flex; flex-direction: column; }
  #panel.open { transform: translateY(0); }
  @media (prefers-reduced-motion: reduce) { #panel { transition: none; } }
  .sheet-handle { display: flex; align-items: center; justify-content: center; flex: none; width: 100%;
    height: 34px; padding: 12px 0 8px; background: none; border: 0; cursor: grab; touch-action: none; }
  .sheet-handle:active { cursor: grabbing; }
  .grabber { width: 40px; height: 5px; border-radius: 999px; background: var(--hairline-2); transition: background 0.15s; }
  .sheet-handle:hover .grabber { background: var(--text-low); }
  .panel-inner { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--s2) var(--s5) var(--s6); }
  #nav { padding: 0 var(--s4); }
  .brand .sub { display: none; }
  .brand .mark { font-size: 16px; white-space: nowrap; }
  .nav-right { gap: 10px; }
  .connect-btn { padding: 6px 10px; font-size: var(--t-sub); }
  .cb-label { display: none; }
  .cb-short { display: inline; }
  /* Anchor the popover to the viewport on small screens so it can't run off the left edge. */
  .connect-pop { position: fixed; left: var(--s4); right: var(--s4); top: calc(var(--nav-h) + var(--s2)); width: auto; max-width: none; }
  .lang button { white-space: nowrap; padding: 5px 9px; }
}

/* ── About page (a reading surface, separate from the map shell) ──────── */
body.about { overflow: auto; background: var(--surface-0); }
body.about #nav { position: sticky; top: 0; min-height: var(--nav-h); }
.brand[href] { text-decoration: none; color: inherit; }
.back-link { font-size: var(--t-sub); font-weight: 500; color: var(--text-mid); text-decoration: none; }
.back-link:hover { color: var(--text-hi); }
.about-main { max-width: 680px; margin: 0 auto; padding: var(--s12) var(--s5); }
.about-h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-hi); line-height: 1.2; }
.about-intro { font-size: var(--t-title); color: var(--text-mid); line-height: 1.6; margin-top: var(--s4); max-width: 60ch; }
.about-section { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--hairline); }
.about-section[id] { scroll-margin-top: calc(var(--nav-h) + var(--s4)); }
.about-section h2 { font-size: var(--t-title); font-weight: 600; color: var(--text-hi); margin-bottom: var(--s4); }
.about-body { max-width: 65ch; }
.about-body p { color: var(--text-mid); line-height: 1.7; margin-bottom: var(--s4); }
.about-body p:last-child { margin-bottom: 0; }
.about-body strong { color: var(--text-hi); font-weight: 600; }
.about-body ul { list-style: none; margin-bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.about-body li { position: relative; padding-left: var(--s4); color: var(--text-mid); line-height: 1.6; }
.about-body li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--hairline-2); }
.about-body a { color: var(--text-hi); text-decoration: underline; text-underline-offset: 2px; }
/* Emergency numbers — the figure carries the weight; mono, tabular, no bullet. */
.emerg-nums { list-style: none; margin-bottom: var(--s4); display: flex; flex-direction: column; gap: var(--s4); }
.emerg-nums li { display: flex; align-items: baseline; gap: var(--s4); padding-left: 0; }
.emerg-nums li::before { display: none; }
.en-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: var(--t-title); font-weight: 600; color: var(--text-hi); min-width: 3ch; flex-shrink: 0; letter-spacing: 0.02em; }
.en-desc { color: var(--text-mid); line-height: 1.6; }
.about-updated { margin-top: var(--s8); font-family: var(--mono); font-size: var(--t-eyebrow); color: var(--text-low); }
.about-foot { margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--hairline); }