/* ==========================================================================
   Home — exploded axonometric hero, practice (lens + particles), evidence,
   selected references, method, statement, about
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding-top: 26px; }
.hero-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.hero-meta [data-clock] { color: var(--ink); font-variant-numeric: tabular-nums; }
.status-dot { position: relative; display: inline-block; vertical-align: middle; width: 6px; height: 6px; margin-right: 8px; background: var(--coral); border-radius: 50%; }
.status-dot::after { content: ""; position: absolute; inset: -5px; border: 1px solid var(--coral); border-radius: 50%; animation: pulse 2.4s var(--ease-out) infinite; }
@keyframes pulse { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 3vw, 50px); align-items: stretch; margin-top: 40px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding-top: clamp(18px, 2.3vw, 42px); }
.hero-title { margin: clamp(31px, 3.15vw, 55px) 0 0 -6px; font-size: clamp(74px, 8.1vw, 146px); font-weight: 500; line-height: .89; letter-spacing: -.096em; }
.hero-title .line-inner { white-space: nowrap; }
.hero-title em { color: var(--accent); font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; }
.hero-statement { display: grid; grid-template-columns: 23px minmax(0, 1fr); gap: 20px; align-items: start; max-width: 480px; margin-top: clamp(40px, 5vw, 80px); }
.statement-mark { display: inline-grid; place-items: center; width: 23px; height: 27px; color: var(--coral); font-size: 30px; line-height: 1; }
.statement-mark .cg { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-statement p { max-width: 420px; margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; letter-spacing: -.02em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin-top: 44px; }

/* ---------- Exploded axonometric ---------- */
.hero-figure { min-width: 0; margin: 0; display: flex; flex-direction: column; }
.figure-top, .figure-bottom { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); }
.figure-top { padding-bottom: 14px; }
.figure-bottom { padding-top: 14px; }
.stack-stage {
  --gap: 34px; --rx: 57deg; --rz: -40deg;
  touch-action: pan-y; /* vertical scroll stays native; horizontal drags turn the stack */
  position: relative; isolation: isolate; overflow: hidden;
  flex: 1; min-height: 620px;
  border: 1px solid var(--card-border);
  background:
    radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--paper-light) 90%, transparent) 0 18%, transparent 62%),
    linear-gradient(color-mix(in srgb, var(--nonphoto) 22%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, color-mix(in srgb, var(--nonphoto) 22%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--paper-deep);
}
.stack-gl { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease-out); }
.stack-stage.is-webgl .stack-gl { opacity: 1; }
.stack-scene { transition: opacity .6s ease; }
.stack-stage.is-webgl .stack-scene { opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.stack-scene { position: absolute; inset: 0; display: grid; place-items: center; perspective: 1700px; perspective-origin: 50% 35%; }
.stack { position: relative; width: min(46%, 300px); aspect-ratio: 1; transform-style: preserve-3d; transform: translateY(24%) rotateX(var(--rx)) rotateZ(var(--rz)); }
.stack::before { content: ""; position: absolute; inset: 6%; border-radius: 8%; background: var(--shadow); filter: blur(26px); transform: translateZ(-30px); opacity: .55; }
.layer {
  --t: 8px;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--i) * var(--gap) + var(--lift, 0px)));
  transition: transform .7s var(--ease-out), opacity .5s ease, filter .5s ease;
}
.layer-face { position: absolute; inset: 0; overflow: hidden; }
.layer svg { position: absolute; inset: 7%; width: 86%; height: 86%; overflow: visible; }
.layer::before, .layer::after { content: ""; position: absolute; background: var(--edge); }
.layer::before { left: 0; right: 0; bottom: 0; height: var(--t); transform-origin: bottom; transform: rotateX(-90deg); }
.layer::after { top: 0; bottom: 0; right: 0; width: var(--t); transform-origin: right; transform: rotateY(90deg); filter: brightness(.86); }
.layer-plan { --i: 0; --edge: color-mix(in srgb, #ffffff 70%, var(--nonphoto)); color: #2a3230; }
.layer-plan .layer-face { background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .34) 60%, rgba(214, 236, 244, .55)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .95), inset 0 0 50px rgba(255, 255, 255, .7); }
.layer-signal { --i: 1; --edge: #9ea3a7; color: #22272b; }
.layer-signal .layer-face {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .55) 0 22%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, .35) 62%, rgba(255, 255, 255, 0) 80%),
    repeating-linear-gradient(90deg, #c8ccce 0 1px, #d8dbdd 1px 3px, #bec2c5 3px 4px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.layer-ui { --i: 2; --edge: var(--coral); color: #f8f6f0; }
.layer-ui .layer-face { background: linear-gradient(140deg, #3f63f0, #2b50df 45%, #1b37a8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 30px 60px rgba(255, 255, 255, .12); }
.layer-code { position: absolute; left: 7%; bottom: 3%; font-family: var(--mono); font-size: 8px; letter-spacing: .08em; opacity: .75; }
.layer-anchor { position: absolute; right: 9%; top: 12%; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px rgba(229, 120, 93, .25); }
.layer-ui .layer-anchor { background: #fff; }
.stack.has-focus .layer { opacity: .38; filter: saturate(.4); }
.stack.has-focus .layer.is-focus { --lift: 26px; opacity: 1; filter: none; }

.riser { position: absolute; left: var(--px); top: var(--py); width: 0; height: calc(var(--gap) * 2); border-left: 1px dashed color-mix(in srgb, var(--ink) 55%, transparent); transform-origin: 0 0; transform: rotateX(90deg); pointer-events: none; }
.signal-dot { position: absolute; left: var(--px); top: var(--py); width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 12px var(--coral); animation: rise 2.6s var(--ease-in-out) infinite; animation-delay: var(--delay, 0s); }
@keyframes rise {
  0% { transform: translateZ(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateZ(calc(var(--gap) * 2)); opacity: 0; }
}

.leaders { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* Keynote tags: one per plate, paired with its callout by label (L1-L3). */
.leaders .tag circle { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; transition: fill .25s ease, stroke .25s ease; }
.leaders .tag text { fill: var(--ink); font-family: var(--mono); font-size: 10px; font-weight: 600; text-anchor: middle; dominant-baseline: central; transition: fill .25s ease; }
.leaders .tag.is-focus circle { fill: var(--coral); stroke: var(--coral); }
.leaders .tag.is-focus text { fill: var(--paper); }
.callouts { position: absolute; right: 18px; top: 18px; z-index: 3; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.callout {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: baseline; gap: 6px;
  min-width: 190px; min-height: 44px; padding: 9px 12px;
  border: 1px solid var(--line-strong); background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: 15px; font-weight: 600; letter-spacing: -.03em; text-align: left; cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, transform .4s var(--ease-out);
}
.callout em { grid-column: 2; font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.callout:hover, .callout:focus-visible { border-color: var(--ink); transform: translateX(-6px); }
.callout .mono { color: var(--coral-ink); }
.stack-hint { position: absolute; left: 18px; bottom: 16px; z-index: 3; color: var(--muted); }
.figure-corner { position: absolute; z-index: 3; width: 30px; height: 30px; border-color: var(--accent); border-style: solid; pointer-events: none; }
.figure-corner-tl { top: 14px; left: 14px; border-width: 2px 0 0 2px; }
.figure-corner-br { right: 14px; bottom: 14px; border-width: 0 2px 2px 0; }

.hero-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); margin-top: 42px; padding-block: 19px 26px; }
.hero-footer p { margin: 0; font-family: var(--serif); font-size: 23px; font-style: italic; }
.scroll-cue { display: inline-flex; align-items: center; gap: 24px; }
.scroll-cue span { color: var(--accent); font-family: var(--sans); font-size: 24px; animation: nudge 2s var(--ease-in-out) infinite; }
@keyframes nudge { 50% { transform: translateY(6px); } }

/* ---------- Section heads ---------- */
.section-intro, .evidence-head { display: grid; grid-template-columns: 28% minmax(0, 1fr); gap: 30px; align-items: start; }
.section-intro > .eyebrow, .evidence-head > .eyebrow { margin-top: 17px; }
.section-intro h2, .method h2, .about h2, .evidence h2, .selected h2 { margin: 0; font-weight: 500; letter-spacing: -.075em; line-height: .96; }
.section-intro h2 em, .method h2 em, .about h2 em, .evidence h2 em, .selected h2 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.025em; color: var(--accent); }
.section-intro h2 { font-size: clamp(68px, 8.15vw, 142px); }

/* ---------- Practice: lens tabs drive the particle drawing ---------- */
.practice { padding-block: clamp(96px, 10vw, 160px); }
.practice-exhibit { display: grid; grid-template-columns: 34% minmax(0, 66%); margin-top: 70px; border-block: 1px solid var(--ink); }
.lens-list { display: flex; flex-direction: column; min-width: 0; padding-right: clamp(20px, 3.5vw, 60px); }
.lens-tabs { display: flex; flex-direction: column; }
.lens-tab { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; gap: 10px; align-items: center; width: 100%; padding: 29px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: color .25s ease, padding-left .35s var(--ease-out); }
.lens-tab:hover { color: var(--accent); padding-left: 9px; }
.lens-tab.is-active { color: var(--accent); }
.lens-number { align-self: start; margin-top: 5px; color: var(--muted); }
.lens-name { font-size: clamp(22px, 2.2vw, 37px); font-weight: 500; line-height: 1.1; letter-spacing: -.065em; }
.lens-arrow { align-self: start; font-size: 23px; line-height: 1; opacity: .5; transition: transform .4s var(--ease-out), opacity .3s ease; }
.lens-tab.is-active .lens-arrow { opacity: 1; transform: rotate(45deg); }
.lens-footnote { margin: auto 0 26px; color: var(--muted); }
.lens-stage { --stage-fg: var(--block-ink); position: relative; isolation: isolate; min-height: 820px; overflow: hidden; background: var(--block); color: var(--stage-fg); transition: background-color .6s ease, color .6s ease; }
.lens-stage[data-mode="software"] { --stage-fg: var(--lens-software-ink); background: var(--lens-software-bg); }
.lens-stage[data-mode="clarity"] { --stage-fg: var(--night-ink); background: var(--night); }
.lens-stage .particle-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.stage-word { position: absolute; z-index: 0; top: 8%; left: 6%; opacity: .08; font-size: clamp(140px, 20vw, 330px); font-weight: 700; line-height: .8; letter-spacing: -.13em; white-space: nowrap; transition: transform .8s var(--ease-out); }
.lens-stage[data-mode="software"] .stage-word { transform: translateX(-6%) rotate(-5deg); }
.lens-stage[data-mode="clarity"] .stage-word { transform: translateX(-12%) scale(.92); }
.stage-top, .stage-bottom { position: absolute; z-index: 2; left: clamp(26px, 3vw, 48px); right: clamp(26px, 3vw, 48px); display: flex; justify-content: space-between; gap: 10px; opacity: .85; }
.stage-top { top: 28px; }
.stage-bottom { bottom: 28px; border-top: 1px solid currentColor; padding-top: 15px; }
.stage-content { position: relative; z-index: 2; display: flex; align-items: flex-end; min-height: 820px; padding: 0 clamp(26px, 3vw, 48px) 86px; pointer-events: none; }
.stage-panel { max-width: 560px; pointer-events: auto; }
/* The particle drawing gets its own space (see shapeBox in particle-field.js):
   a right-hand column on a wide stage, reserved room above the text otherwise. */
.lens-stage { container-type: inline-size; }
@container (min-width: 760px) {
  .stage-panel { max-width: min(560px, 54%); }
  .stage-panel h3 { font-size: clamp(40px, 7cqw, 84px); }
}
@container (max-width: 759.98px) {
  .stage-content { padding-top: min(96cqw, 440px); }
}
.stage-panel[hidden] { display: none; }
.stage-panel:not([hidden]) > * { animation: panel-in .8s var(--ease-out) both; }
.stage-panel:not([hidden]) > *:nth-child(2) { animation-delay: .06s; }
.stage-panel:not([hidden]) > *:nth-child(3) { animation-delay: .12s; }
.stage-panel:not([hidden]) > *:nth-child(4) { animation-delay: .18s; }
@keyframes panel-in { from { opacity: 0; transform: translateY(26px); } }
.stage-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 22px; opacity: .85; }
/* The same keynote as the hero plates: this lens draws that layer. */
.keynote { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.2px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: 600; letter-spacing: 0; }
.stage-panel h3 { margin: 0; font-size: clamp(46px, 4.8vw, 84px); font-weight: 500; line-height: .98; letter-spacing: -.075em; }
.stage-panel h3 em { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.stage-panel > p:not(.stage-kicker) { max-width: 500px; margin: 25px 0 30px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; }
.stage-tags { display: flex; flex-wrap: wrap; gap: 7px; max-width: 560px; }
.stage-tags span { border: 1px solid currentColor; padding: 8px 10px; font-size: 9px; }
html:not(.has-js) .stage-content { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 56px; padding-top: 110px; }

/* ---------- Evidence ---------- */
.evidence { padding-block: clamp(90px, 9vw, 140px); background: var(--paper-deep); transition: background-color .4s ease; }
.evidence h2 { font-size: clamp(56px, 6.4vw, 112px); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 70px; border-top: 1px solid var(--ink); }
.fact { position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 280px; padding: 26px 26px 30px 0; border-right: 1px solid var(--line-strong); }
.fact + .fact { padding-left: 26px; }
.fact:last-child { border-right: 0; }
.fact .fact-label { margin: 0; color: var(--muted); line-height: 1.3; }
.fact-value { font-size: clamp(64px, 6.6vw, 118px); font-weight: 500; line-height: .9; letter-spacing: -.07em; font-variant-numeric: tabular-nums; }
.fact-value sup { font-family: var(--serif); font-size: .38em; font-weight: 400; letter-spacing: 0; color: var(--coral); vertical-align: top; margin-left: 4px; }
.fact p { max-width: 260px; margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.5; }
.fact::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.fact:hover::after { transform: scaleX(1); }

/* ---------- Selected references ---------- */
.selected { padding-block: clamp(100px, 10vw, 160px); }
.selected-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; }
.selected h2 { margin-top: 30px; font-size: clamp(60px, 7vw, 124px); }
.selected-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 56px); margin-top: 70px; }
.selected-col h3 { display: flex; justify-content: space-between; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.ref-rows { margin: 0; padding: 0; list-style: none; }
.ref-row { position: relative; border-bottom: 1px solid var(--line); isolation: isolate; overflow: hidden; }
.ref-row a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 24px 6px 22px; transition: color .35s ease, padding-left .45s var(--ease-out); }
.ref-row::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--block); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease-out); }
.ref-row:hover::before, .ref-row:focus-within::before { transform: scaleY(1); }
.ref-row:hover a, .ref-row:focus-within a { color: var(--block-ink); padding-left: 16px; }
.ref-row:hover .ref-meta, .ref-row:focus-within .ref-meta { color: var(--block-muted); }
.ref-index { color: var(--muted); }
.ref-name { font-size: clamp(24px, 2.3vw, 38px); font-weight: 500; line-height: 1.05; letter-spacing: -.055em; }
.ref-name em { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
.ref-meta { display: block; margin-top: 8px; color: var(--muted); font-size: 13px; transition: color .35s ease; }
.ref-year { white-space: nowrap; }
.ref-row a[target] .ref-year { font-size: 20px; font-weight: 400; transition: transform .45s var(--ease-out); }
.ref-row a[target]:hover .ref-year { transform: rotate(45deg); }
.selected-more { display: flex; justify-content: flex-end; margin-top: 46px; }

/* ---------- Method ---------- */
.method { display: grid; grid-template-columns: 45% minmax(0, 55%); padding-block: 130px 140px; background: var(--paper-deep); transition: background-color .4s ease; }
.method-heading { padding-right: 40px; }
.method h2 { margin-top: 42px; font-size: clamp(62px, 6.1vw, 106px); }
.method-list { padding-top: 9px; }
.method-item { display: grid; grid-template-columns: 80px minmax(0, 1fr) 90px; gap: 12px; align-items: start; min-height: 180px; padding: 23px 0 32px; border-top: 1px solid var(--line-strong); }
.method-item:last-of-type { border-bottom: 1px solid var(--line-strong); }
.method-index { color: var(--muted); padding-top: 7px; }
.method-main h3 { margin: 0; font-size: clamp(37px, 3.6vw, 58px); font-weight: 500; letter-spacing: -.07em; line-height: 1; }
.method-main p { max-width: 380px; margin: 18px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.method-symbol { display: block; width: 68px; color: var(--accent); justify-self: end; }
.method-symbol svg { width: 100%; stroke: currentColor; stroke-width: 1.2; }
.method-note { margin: 35px 0 0; color: var(--muted); }

/* ---------- Scroll-lit statement ---------- */
.statement { padding-block: clamp(110px, 12vw, 190px); }
.statement-kicker { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 40px; color: var(--muted); }
.statement-text { max-width: 1320px; margin: 0; font-family: var(--serif); font-size: clamp(36px, 4.6vw, 82px); line-height: 1.08; letter-spacing: -.02em; }
.has-js .statement-text .w { color: var(--ink-unlit); transition: color .35s ease; }
.has-js .statement-text .w.is-lit { color: var(--ink); }
.has-js .statement-text .w.is-accent.is-lit { color: var(--accent); }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: 34% minmax(0, 66%); padding-block: 40px 170px; }
.about-left { display: flex; flex-direction: column; align-items: flex-start; }
/* Section/detail marker: section number over sheet number, arrow gives the view direction. */
/* Portrait: the person in grains of sand (portrait-field.js) */
.portrait { width: min(100%, 360px); margin: 44px 0 0; }
html:not(.has-js) .portrait { display: none; }
.portrait-stage {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden; cursor: pointer;
  border: 1px solid var(--line-strong);
  color: var(--night-ink);
  background:
    linear-gradient(color-mix(in srgb, var(--night-ink) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--night-ink) 6%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--night);
  transition: background-color .4s ease;
}
.portrait-stage::before, .portrait-stage::after { content: ""; position: absolute; z-index: 1; width: 22px; height: 22px; pointer-events: none; }
.portrait-stage::before { left: 10px; top: 10px; border-left: 1px solid var(--coral); border-top: 1px solid var(--coral); }
.portrait-stage::after { right: 10px; bottom: 10px; border-right: 1px solid var(--coral); border-bottom: 1px solid var(--coral); }
.portrait-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.portrait-hint { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: var(--night-muted); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; opacity: 0; transition: opacity .3s ease; }
.portrait-stage:hover .portrait-hint { opacity: 1; }
.portrait-hint .hint-touch { display: none; }
@media (hover: none) { .portrait-hint { opacity: 1; } .portrait-hint .hint-fine { display: none; } .portrait-hint .hint-touch { display: inline; } }
.portrait-caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; color: var(--muted); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.portrait-caption [data-portrait-count] { color: var(--ink); font-variant-numeric: tabular-nums; }
.portrait-caption > span { white-space: nowrap; }
.about-index { margin: 15px 0 0; color: var(--muted); }
.about-content { max-width: 860px; }
.about h2 { font-size: clamp(66px, 7.4vw, 128px); }
.about-content > p { max-width: 640px; margin: 49px 0 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.47; letter-spacing: -.02em; }
.about-content > p + p { margin-top: 24px; color: var(--ink-soft); }
.path-mini { margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.path-mini li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 18px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; line-height: 1.45; }
.path-mini time { color: var(--accent); font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.about-content .text-link { margin-top: 43px; }

/* ---------- Responsive ---------- */
@media (max-width: 1250px) {
  .hero-title { font-size: clamp(66px, 7.6vw, 104px); }
  .practice-exhibit { grid-template-columns: 36% minmax(0, 64%); }
}
@media (max-width: 1050px) {
  .hero-grid { grid-template-columns: 1fr; gap: 50px; }
  .hero-title { font-size: clamp(72px, 10vw, 118px); }
  .stack-stage { min-height: 580px; }
  .practice-exhibit { grid-template-columns: 37% minmax(0, 63%); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(2) { border-right: 0; }
  .fact:nth-child(3) { padding-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line-strong); }
  .method { grid-template-columns: 42% minmax(0, 58%); }
}
@media (max-width: 850px) {
  .section-intro, .evidence-head { grid-template-columns: 1fr; gap: 30px; }
  .intro-aside { margin-left: 0; }
  .practice-exhibit { grid-template-columns: 1fr; }
  .lens-list { padding-right: 0; }
  .lens-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lens-tab { grid-template-columns: 1fr 22px; gap: 12px; align-content: start; padding: 18px 12px 22px; border-right: 1px solid var(--line); }
  .lens-tab:first-child { padding-left: 0; }
  .lens-tab:last-of-type { border-right: 0; }
  .lens-number { grid-column: 1 / -1; margin: 0; }
  .lens-name { font-size: 22px; }
  .lens-footnote { display: none; }
  .lens-stage, .stage-content { min-height: 700px; }
  .selected-head { flex-direction: column; align-items: flex-start; }
  .selected-cols { grid-template-columns: 1fr; gap: 60px; }
  .method { grid-template-columns: 1fr; gap: 65px; }
  .about { grid-template-columns: 1fr; gap: 36px; }
  .about-index { display: none; }
  .portrait { width: min(100%, 340px); margin-top: 28px; }
}
@media (max-width: 600px) {
  .hero { padding-top: 18px; }
  .hero-meta { font-size: 9px; }
  .hero-meta span:last-child { display: none; }
  .hero-title { margin-top: 28px; margin-left: -4px; font-size: clamp(54px, 13.4vw, 85px); }
  .hero-title .line-inner { white-space: normal; }
  .stack-stage { min-height: 470px; }
  .stack { width: 62%; }
  .callouts { left: 12px; right: 12px; top: auto; bottom: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .callout { width: 100%; min-width: 0; grid-template-columns: 1fr; padding: 8px; font-size: 13px; }
  .callout em { display: none; }
  .stack-hint { display: none; }
  .hero-footer { align-items: flex-start; }
  .hero-footer p { font-size: 18px; }
  .scroll-cue { gap: 7px; white-space: nowrap; }
  .section-intro h2 { font-size: clamp(56px, 13vw, 88px); }
  .lens-tab { grid-template-columns: 1fr; padding: 16px 8px 17px; }
  .lens-name { font-size: 18px; }
  .lens-arrow { display: none; }
  .stage-panel h3 { font-size: clamp(40px, 9.6vw, 60px); }
  .evidence h2, .selected h2 { font-size: clamp(50px, 12vw, 80px); }
  .facts { grid-template-columns: 1fr; margin-top: 44px; }
  .fact, .fact + .fact { min-height: 0; padding: 24px 0 28px; border-right: 0; border-top: 1px solid var(--line-strong); }
  .fact:first-child { border-top: 0; }
  .ref-row a { grid-template-columns: 30px minmax(0, 1fr); }
  .ref-year { grid-column: 2; }
  .method { padding-block: 95px 100px; gap: 55px; }
  .method h2 { font-size: clamp(50px, 11vw, 78px); }
  .method-item { grid-template-columns: 56px minmax(0, 1fr) 44px; min-height: 160px; gap: 7px; }
  .method-symbol { width: 42px; }
  .statement-kicker { flex-direction: column; gap: 8px; }
  .about h2 { font-size: clamp(52px, 11.5vw, 79px); }
  .path-mini li { grid-template-columns: 64px minmax(0, 1fr); font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .statement-mark .cg, .scroll-cue span, .status-dot::after, .signal-dot { animation: none; }
  .has-js .statement-text .w { color: var(--ink); }
}

.layer svg * { vector-effect: non-scaling-stroke; }