.chapter-hero {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);
  gap:clamp(36px,6vw,84px);
  align-items:end;
  padding:clamp(66px,8vw,108px) 0 72px;
}
.chapter-hero h1 {
  margin:14px 0 22px;
  max-width:960px;
  font-size:clamp(3.1rem,7vw,6.6rem);
  line-height:.9;
  letter-spacing:-.062em;
}
.chapter-hero h1 em { color:var(--accent); font-style:normal; font-weight:650; }
.chapter-hero .lead { max-width:840px; margin:0; color:var(--muted); font-size:clamp(1rem,1.6vw,1.18rem); }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.hero-tags span { padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--muted); font-size:.75rem; font-weight:720; letter-spacing:.035em; }
.chapter-index { position:relative; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel)); box-shadow:var(--shadow); overflow:hidden; }
.chapter-index::after { content:""; position:absolute; width:150px; height:150px; right:-58px; bottom:-72px; border:1px solid color-mix(in srgb,var(--accent) 25%,transparent); border-radius:50%; }
.index-code { display:block; margin-bottom:28px; color:var(--accent); font-size:.72rem; font-weight:850; letter-spacing:.12em; }
.chapter-index strong { display:block; font-size:1.25rem; letter-spacing:-.025em; }
.chapter-index p { margin:10px 0 0; color:var(--muted); font-size:.88rem; }

.content-section, .coupling-section { padding:60px 0; }
.section-heading.compact { max-width:880px; margin-bottom:30px; }
.section-heading.compact h2 { font-size:clamp(2rem,4.4vw,3.75rem); overflow-wrap:break-word; }
.concept-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.concept-card, .coupling-card, .model-card { position:relative; min-width:0; padding:26px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); }
.concept-card.key-card, .model-card.key-card { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,var(--panel)),var(--panel)); }
.concept-no, .model-label { color:var(--accent); font-size:.72rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.concept-card h3 { margin:16px 0 8px; font-size:1.22rem; }
.concept-card p, .coupling-card p, .model-card p { margin:0; color:var(--muted); font-size:.91rem; }
.equation { display:flex; align-items:center; justify-content:center; min-height:76px; margin-top:20px; padding:15px 18px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--bg-elevated) 72%,transparent); font-family:"Cambria Math","STIX Two Math",Georgia,serif; font-size:1.19rem; font-variant-numeric:lining-nums tabular-nums; max-width:100%; overflow-x:auto; overflow-y:hidden; }
.eq-stack { display:grid; gap:6px; justify-items:center; text-align:center; }
.equation.large { min-height:142px; font-size:1.48rem; }

.coupling-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:12px; }
.bridge-card { background:linear-gradient(145deg,color-mix(in srgb,var(--accent-2) 8%,var(--panel)),var(--panel)); }
.stencil-visual { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:end; margin:26px 0 4px; padding:22px 16px; border:1px solid var(--line); border-radius:12px; background:color-mix(in srgb,var(--bg-elevated) 62%,transparent); }
.stencil-visual > div { display:grid; justify-items:center; gap:9px; color:var(--muted); }
.stencil-visual > div i { width:15px; height:15px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-2) 12%,transparent); }
.stencil-visual > div.focus i { width:19px; height:19px; background:var(--accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 12%,transparent); }
.stencil-visual > b { align-self:center; color:var(--muted); font-size:1.35rem; }

.lab-section { padding:78px 0 84px; border-block:1px solid var(--line); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 3%,transparent),transparent 24%,transparent 76%,color-mix(in srgb,var(--accent-2) 3%,transparent)); }
.lab-heading { margin-bottom:34px!important; }
.wave-lab-shell { display:grid; grid-template-columns:278px minmax(0,1fr); gap:12px; align-items:start; }
.wave-controls { position:sticky; top:calc(var(--header-h) + 16px); display:grid; gap:19px; padding:22px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel-solid); }
.control-group { min-width:0; }
.control-label { display:flex; justify-content:space-between; gap:12px; align-items:baseline; margin-bottom:9px; }
.control-label label { font-size:.78rem; font-weight:750; }
.control-label output { color:var(--accent); font-size:.75rem; font-weight:800; font-variant-numeric:tabular-nums; }
.control-group input[type="range"] { width:100%; margin:0; accent-color:var(--accent); }
.range-scale { display:flex; justify-content:space-between; margin-top:3px; color:var(--muted); font-size:.63rem; }
.preset-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.preset-button, .lab-button { min-height:40px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); font-size:.75rem; font-weight:760; cursor:pointer; }
.preset-button:hover, .lab-button:hover { border-color:var(--line-strong); }
.lab-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lab-button.primary { background:var(--accent); color:#07131c; border-color:transparent; }
.wave-main { display:grid; gap:12px; min-width:0; }
.panel { min-width:0; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--panel); overflow:hidden; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 20px; border-bottom:1px solid var(--line); }
.panel-head > div { min-width:0; }
.panel-head span { display:block; color:var(--muted); font-size:.68rem; font-weight:750; letter-spacing:.06em; text-transform:uppercase; }
.panel-head strong { display:block; margin-top:3px; font-size:.92rem; }
.status-dot { display:flex!important; align-items:center; gap:7px; white-space:nowrap; }
.status-dot i { width:7px; height:7px; border-radius:50%; background:var(--accent-3); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-3) 12%,transparent); }
.status-dot b { color:var(--muted); font-size:.68rem; font-weight:750; }
.field-svg { width:100%; min-height:310px; background:linear-gradient(180deg,color-mix(in srgb,var(--bg-elevated) 44%,transparent),transparent); }
.axis { stroke:var(--line-strong); stroke-width:1; }
.grid-line { stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.axis-label { fill:var(--muted); font:600 13px system-ui,sans-serif; }
.initial-trace { fill:none; stroke:var(--muted); stroke-width:1.7; stroke-dasharray:6 7; opacity:.72; vector-effect:non-scaling-stroke; }
.field-trace { fill:none; stroke:var(--accent); stroke-width:2.7; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.field-point { fill:var(--accent-2); opacity:.68; }
.probe-marker { fill:var(--warm); stroke:var(--bg); stroke-width:2; }
.probe-guide { stroke:var(--warm); stroke-width:1; stroke-dasharray:4 5; opacity:.62; }
.field-legend { display:flex; flex-wrap:wrap; gap:18px; padding:0 20px 16px; color:var(--muted); font-size:.7rem; }
.field-legend span { display:flex; align-items:center; gap:7px; }
.field-legend i { width:18px; height:2px; display:inline-block; }
.field-legend i.current { background:var(--accent); }
.field-legend i.initial { background:var(--muted); }
.field-legend i.probe { background:var(--warm); }
.wave-telemetry { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); }
.wave-telemetry > div { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:7px; padding:14px 16px; border-right:1px solid var(--line); }
.wave-telemetry > div:last-child { border-right:0; }
.wave-telemetry span { color:var(--accent); font-size:.72rem; font-weight:850; }
.wave-telemetry strong { justify-self:end; font-size:1rem; font-variant-numeric:tabular-nums; }
.wave-telemetry small { color:var(--muted); font-size:.64rem; }
.wave-detail-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr); gap:12px; }
.stencil-svg { width:100%; min-height:240px; }
.stencil-base { stroke:var(--line); stroke-width:1; stroke-dasharray:5 6; }
.stencil-link { fill:none; stroke:var(--accent-2); stroke-width:2.4; vector-effect:non-scaling-stroke; }
.stencil-node { fill:var(--accent-2); stroke:var(--bg); stroke-width:2; }
.stencil-node.focus { fill:var(--accent); }
.stencil-caption { fill:var(--muted); font:650 14px system-ui,sans-serif; }
.stencil-caption.focus { fill:var(--text); }
.accel-arrow { stroke:var(--warm); stroke-width:4; stroke-linecap:round; }
.accel-head { fill:var(--warm); }
.stencil-metrics { display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:10px; padding:14px 20px; border-top:1px solid var(--line); }
.stencil-metrics span { color:var(--accent); font-size:.74rem; font-weight:850; }
.stencil-metrics strong { justify-self:end; font-variant-numeric:tabular-nums; }
.stencil-metrics small { color:var(--muted); font-size:.66rem; }
.interpretation-panel { padding:24px; display:flex; flex-direction:column; justify-content:center; }
.interpretation-panel > strong { display:block; margin:12px 0 8px; font-size:1.05rem; }
.interpretation-panel > p { margin:0; color:var(--muted); font-size:.88rem; }
.interpretation-panel > small { margin-top:14px; color:var(--muted); font-size:.7rem; }
.regime-meter { margin-top:22px; }
.regime-meter > div { display:flex; justify-content:space-between; color:var(--muted); font-size:.62rem; }
.regime-meter > i { position:relative; display:block; height:8px; margin-top:7px; border-radius:999px; background:linear-gradient(90deg,var(--warm),var(--accent-3)); }
.regime-meter b { position:absolute; top:50%; width:15px; height:15px; border:2px solid var(--bg); border-radius:50%; background:var(--text); transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--line-strong); }

.model-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:12px; }
.model-card { min-height:270px; }
.model-card .equation { margin-bottom:18px; }
.assumption-list { display:grid; gap:8px; margin:22px 0; padding:0; list-style:none; }
.assumption-list li { position:relative; padding-left:17px; font-size:.86rem; }
.assumption-list li::before { content:""; position:absolute; left:0; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.takeaway-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.takeaway-grid article { padding:22px; border-top:1px solid var(--line-strong); }
.takeaway-grid span { color:var(--accent); font-size:.68rem; font-weight:850; }
.takeaway-grid strong { display:block; margin:14px 0 7px; font-size:.95rem; }
.takeaway-grid p { margin:0; color:var(--muted); font-size:.82rem; }
.cross-reference { max-width:880px; margin:26px 0 0; color:var(--muted); }
.cross-reference a { color:var(--text); text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent); text-underline-offset:3px; }
.next-section { margin-top:38px; margin-bottom:54px; padding:30px; display:flex; justify-content:space-between; align-items:center; gap:24px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(110deg,color-mix(in srgb,var(--accent-2) 8%,var(--panel)),var(--panel)); }
.next-section h2 { margin:8px 0 5px; font-size:clamp(1.8rem,4vw,3rem); letter-spacing:-.045em; }
.next-section p { margin:0; max-width:720px; color:var(--muted); }
.next-arrow { color:var(--accent); font-size:3rem; font-weight:200; }
.remaining-chapters { padding-top:18px; }
.chapter-menu-link.is-active { border-color:color-mix(in srgb,var(--accent) 44%,var(--line)); background:color-mix(in srgb,var(--accent) 7%,var(--panel)); }
.chapter-menu-link.is-active span { color:var(--text); }

@media (max-width:980px) {
  .chapter-hero { grid-template-columns:1fr; gap:28px; }
  .chapter-index { max-width:620px; }
  .concept-grid, .model-grid { grid-template-columns:1fr 1fr; }
  .concept-grid > :last-child, .model-grid > :last-child { grid-column:1/-1; }
  .wave-lab-shell { grid-template-columns:1fr; }
  .wave-controls { position:static; grid-template-columns:1fr 1fr; }
  .preset-row, .lab-actions { align-self:end; }
  .wave-detail-grid { grid-template-columns:1fr; }
  .takeaway-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:760px) {
  .coupling-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .chapter-hero { padding-top:50px; padding-bottom:48px; }
  .chapter-hero h1 { font-size:clamp(2.55rem,13.6vw,4.7rem); }
  .content-section, .coupling-section { padding:46px 0; }
  .concept-grid, .model-grid, .takeaway-grid { grid-template-columns:1fr; }
  .concept-grid > :last-child, .model-grid > :last-child { grid-column:auto; }
  .lab-section { padding:52px 0 58px; }
  .wave-controls { grid-template-columns:1fr; }
  .field-svg { min-height:250px; }
  .wave-telemetry { grid-template-columns:1fr 1fr; }
  .wave-telemetry > div:nth-child(2) { border-right:0; }
  .wave-telemetry > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .stencil-svg { min-height:215px; }
  .next-section { align-items:flex-end; padding:22px; }
}
@media (max-width:420px) {
  .equation { padding-inline:12px; font-size:1.01rem; }
  .equation.large { font-size:1.22rem; }
  .panel-head { align-items:flex-start; }
  .status-dot { margin-top:2px; }
  .stencil-visual { gap:7px; padding-inline:10px; }
}
@media (max-width:360px) {
  .section-heading.compact h2 { font-size:1.72rem; }
  .chapter-hero h1 { font-size:2.42rem; overflow-wrap:anywhere; }
  .preset-row { grid-template-columns:1fr; }
}

/* C021 mobile SVG legibility normalization */
@media (max-width:680px) {
  .field-svg .axis-label, .travel-field-svg .axis-label, .harmonic-space-svg .axis-label,
  .phase-field-svg .axis-label, .rate-wave-svg .axis-label { font-size:28px; }
  .stencil-svg .stencil-caption { font-size:19px; }
  .probe-trace-svg .axis-label, .harmonic-time-svg .axis-label,
  .phase-spacetime-svg .axis-label, .rate-gradient-svg .axis-label { font-size:21px; }
  .harmonic-space-svg .measure-text, .harmonic-time-svg .measure-text { font-size:25px; }
  .rate-gradient-svg .rate-tick { font-size:17px; }
  .travel-field-svg .travel-direction-text, .rate-wave-svg .rate-svg-label { font-size:28px; }
}