/* ═══════════════════════════════════════════════════════════════════
   joule.css — JouleRoute-LM (research world: volt)
   A measurement, not a pitch. The transformer stack glows where
   sentences are still computing; the one plot sits on its own paper;
   every number is set like an instrument reading.
   ═════════════════════════════════════════════════════════════════ */


/* ── hero ─────────────────────────────────────────────────────────── */
/* LM: an outlined glyph behind the title, cut by the twelve bands */
.phero-glyph {
  font: 800 clamp(150px, 22vw, 400px)/1 var(--f-disp); letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0.55; right: var(--mx); top: 44%;
}
@media (max-width: 760px) { .phero-glyph { top: 30%; opacity: 0.6; } }

/* prose inside the chapter bodies keeps a reading measure */
.chapter-body > .body-text, .chapter-body > .body-quote { max-width: 66ch; }

/* ── chapter one: the stack ───────────────────────────────────────── */
.stack {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: clamp(16px, 2.4vw, 32px);
  padding: clamp(52px, 5vw, 64px) clamp(18px, 2.6vw, 36px) clamp(24px, 3vw, 36px);
  border: 1px solid var(--line-2); border-radius: 0;
  background:
    radial-gradient(60% 80% at 18% 100%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 32px),
    var(--bg-raise);
  box-shadow: var(--shadow);
}
.stack::before {
  content: 'TRANSFORMER STACK'; position: absolute; top: 20px; right: 22px;
  font: 500 11px/1 var(--f-mono); letter-spacing: 0.2em; color: var(--text-3);
}
.stack::after {   /* input enters at the foot of the stack */
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
 opacity: 0.7;
}
.stack-rows { display: flex; flex-direction: column-reverse; gap: 12px; }
.layer-row {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; column-gap: 18px;
}
.layer-lbl { font: 600 12.5px/1 var(--f-mono); letter-spacing: 0.04em; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
/* one glass slab per band; hairlines mark each layer inside it */
.layer-bar-wrap {
  position: relative; height: calc(var(--n, 1) * 14px);
  border-radius: 0; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line-2));
  background:
    repeating-linear-gradient(to top, transparent 0 13px, var(--line-2) 13px 14px),
    color-mix(in srgb, var(--accent) 5%, var(--bg-deep));
}
.layer-bar {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 85%, transparent), color-mix(in srgb, var(--accent) 22%, transparent));

  transform-origin: left; transition: transform 1.4s var(--ease);
  overflow: hidden;
}
.layer-bar::after {   /* compute moving through the band */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 45%, transparent), transparent);
  transform: translateX(-100%); animation: jr-sweep 3.6s var(--ease) 1.4s infinite;
}
@keyframes jr-sweep { 0% { transform: translateX(-100%); opacity: 0; } 20% { opacity: 1; } 70%, 100% { transform: translateX(100%); opacity: 0; } }
.layer-row:nth-child(1) .layer-bar { transition-delay: 0.15s; }
.layer-row:nth-child(2) .layer-bar { transition-delay: 0.3s; }
.layer-row:nth-child(3) .layer-bar { transition-delay: 0.45s; }
.layer-row:nth-child(4) .layer-bar { transition-delay: 0.6s; }
.can-reveal .stack:not(.is-in) .layer-bar { transform: scaleX(0); }
/* the residual stream between bands */
.layer-row + .layer-row .layer-bar-wrap::before {
  content: ''; position: absolute; left: 22px; top: 100%; width: 2px; height: 12px;
  background: linear-gradient(var(--accent), transparent); opacity: 0.8;
}
/* off-ramps: where sentences leave the stack */
.has-exit .layer-bar-wrap::after {
  content: ''; position: absolute; left: 100%; top: 50%; width: 18px; height: 1px;
  background: var(--accent);
}
.layer-exit { font: 500 12.5px/1.45 var(--f-mono); letter-spacing: 0.02em; color: var(--text-2); }
html[lang="zh-CN"] .layer-exit { letter-spacing: 0; }

/* ── chapter two: three setups ────────────────────────────────────── */
.setups .card { border-radius: 0; }
.policy-tag { align-self: flex-start; }
.policy-card.highlight {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%), var(--bg-raise);
  box-shadow: 0 34px 90px -46px color-mix(in srgb, var(--accent) 70%, transparent);
}
.policy-card.highlight::after {
  content: 'JouleRoute'; position: absolute; top: 18px; right: 18px;
  padding: 6px 10px; border-radius: var(--r-pill);
  font: 600 10.5px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em; 
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
}
/* a depth meter: twelve layer ticks, lit to the depth the setup runs */
.depth {
  position: relative; height: 10px; margin-bottom: 6px; max-width: 220px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 12 - 3px), transparent calc(100% / 12 - 3px) calc(100% / 12));
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 12 - 3px), transparent calc(100% / 12 - 3px) calc(100% / 12));
}
.depth::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--lit) / 12 * 100%);
  background: var(--accent);
}
.depth.fade::after { background: linear-gradient(90deg, var(--accent) 45%, color-mix(in srgb, var(--accent) 30%, transparent)); }
.depth.drain::after { animation: jr-drain 5.5s ease-in-out infinite alternate; }
@keyframes jr-drain { from { width: calc(7.55 / 12 * 100%); } to { width: calc(4.25 / 12 * 100%); } }

/* measurement design: text left, four method instruments right */
.measure {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(32px, 5vw, 96px); row-gap: 36px; align-items: start;
  margin-top: clamp(72px, 9vw, 136px); padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.measure-text { display: grid; gap: 1.25em; }
.methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.methods .card { border-radius: 0; gap: 10px; }
.m-ico {
  width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 6px;
  border-radius: 0; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent);
}
.m-ico svg { width: 19px; height: 19px; }

/* ── chapter three: the curve, on its own paper ───────────────────── */
.curve { margin-bottom: clamp(56px, 7vw, 104px); }
.curve-paper {
  /* Matplotlib drew this plot on white. The paper stays white in both
     themes so the figure is never inverted or tinted. */
  --plot-paper: #ffffff;
  position: relative; padding: clamp(14px, 2.4vw, 38px); border-radius: 0;
  background: var(--plot-paper);
  box-shadow: 0 0 0 1px var(--line-2), 0 60px 140px -60px rgba(var(--accent-rgb), 0.6), var(--shadow);
}
.curve-paper img { width: 100%; height: auto; }
.curve-paper::after {   /* registration marks in the instrument's light */
  --m: color-mix(in srgb, var(--accent) 85%, transparent);
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  background:
    linear-gradient(var(--m), var(--m)) left top / 18px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) left top / 1.5px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 18px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) right top / 1.5px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) left bottom / 1.5px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 18px 1.5px no-repeat,
    linear-gradient(var(--m), var(--m)) right bottom / 1.5px 18px no-repeat;
}
.curve .fig-cap { margin-top: 20px; max-width: 110ch; }
@media (max-width: 640px) {
  /* the plot keeps legible axes on a phone: pan it inside its paper */
  .curve-paper { overflow-x: auto; overscroll-behavior-x: contain; }
  .curve-paper img { min-width: 640px; }
  .curve-paper::after { display: none; }
}

/* results: the reading on the right stays put while the text scrolls */
.keyfind {
  gap: 16px; border-radius: 0; padding: clamp(26px, 2.8vw, 40px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%), var(--bg-raise);
  box-shadow: 0 40px 100px -50px color-mix(in srgb, var(--accent) 60%, transparent);
}
.kf-num {
  font: 700 clamp(72px, 2.4rem + 5vw, 148px)/0.86 var(--f-disp); letter-spacing: -0.055em;
  color: var(--accent); font-variant-numeric: tabular-nums;

}
.kf-sub { color: var(--text-2); font-size: 15.5px; line-height: 1.6; max-width: 36ch; }
.kf-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding-top: 20px; border-top: 1px solid var(--line); }
.kf-mini .ro-n { font-size: clamp(28px, 1rem + 1.6vw, 40px); }
.kf-mini .ro-l { margin-top: 8px; }
.kf-ns { font-family: var(--f-mono); letter-spacing: 0; }

.results-wrap { margin-top: 0.6em; }
.results-table th { white-space: nowrap; }
.results-table td { padding-block: 16px; transition: background-color 0.3s; }
.results-table td:first-child { font: 500 14.5px/1 var(--f-mono); color: var(--text); }
.results-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.td-gain { font: 700 17px/1 var(--f-disp); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.td-d { display: inline-block; min-width: 4.4ch; font: 500 14.5px/1 var(--f-mono); color: var(--text-2); }
.td-p { font: 600 14.5px/1 var(--f-mono); color: var(--accent); }
.depthbar { position: relative; display: inline-block; vertical-align: middle; width: 56px; height: 4px; margin-left: 10px; border-radius: 0; background: var(--line-2); overflow: hidden; }
.depthbar::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: inherit; background: var(--text-3); }
.results-table tr.highlight-row td { background: color-mix(in srgb, var(--accent) 11%, transparent); color: var(--text); }
.results-table tr.highlight-row td:first-child { color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.highlight-row .td-gain { color: var(--accent); }
.highlight-row .depthbar::after { background: var(--accent); }
.tbl-note { margin-top: 14px; font: 500 12px/1.6 var(--f-mono); letter-spacing: 0.02em; color: var(--text-3); }
@media (max-width: 560px) {
  .depthbar { display: none; }
  .results-table th, .results-table td { padding: 12px 10px; }
}

/* ── chapter four: six instruments ────────────────────────────────── */
.spec-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .spec-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .spec-3 { grid-template-columns: minmax(0, 1fr); } }
.tech-card { min-height: 236px; }
.tech-icon { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 0; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.tech-icon svg { width: 20px; height: 20px; }

/* ── interpretation + limits ──────────────────────────────────────── */
.insights .card { border-radius: 0; }
.metric-banner { margin-top: clamp(48px, 6vw, 88px); }
@media (min-width: 761px) { .metric-banner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metric-banner .metric-cell:first-child .ro-n { color: var(--accent); }
.gh-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(40px, 5vw, 64px); padding: clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--line-2); border-radius: 0;
  background: radial-gradient(80% 140% at 100% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--bg-raise);
}
.github-cta .gh-ico { width: 18px; height: 18px; }
.github-cta:hover .gh-ico { transform: none; }
.limits .frontier {
  grid-column: 1 / -1;
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%), var(--bg-raise);
}
.limits .frontier .insight-body { max-width: 92ch; font-size: 16.5px; }

/* ── route it yourself: the router on the bench ───────────────────── */
.route { background: radial-gradient(55% 45% at 85% 18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
.jr .bench-bar { justify-content: space-between; flex-wrap: wrap; row-gap: 10px; }
.jr-mode { display: inline-flex; align-items: center; gap: 12px; }
.sim-mode-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1px solid;
  font: 600 11px/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}
.sim-mode-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sim-mode-normal { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.sim-mode-thermal { color: var(--w-rowing); border-color: color-mix(in srgb, var(--w-rowing) 45%, transparent); background: color-mix(in srgb, var(--w-rowing) 10%, transparent); }

.jr-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.sim-controls { border-right: 1px solid var(--line); }
.sim-ctrl-grp { padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.6vw, 34px); }
.sim-ctrl-grp + .sim-ctrl-grp { border-top: 1px solid var(--line); }
.sim-ctrl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sim-ctrl-label { font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); }
html[lang="zh-CN"] .sim-ctrl-label { letter-spacing: 0.04em; }
.sim-ctrl-val { font: 700 20px/1 var(--f-disp); letter-spacing: -0.02em; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.sim-ctrl-sub { font: 500 12px/1.45 var(--f-mono); color: var(--text-3); }
/* sliders: a lit rail and a glowing thumb, 44px tall to the touch */
.jr .sim-slider { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 4px 0 2px; background: transparent; cursor: pointer; }
.jr .sim-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); }
.jr .sim-slider::-moz-range-track { height: 4px; border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)); }
.jr .sim-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-raise); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent); transition: transform 0.25s var(--ease); }
.jr .sim-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg-raise); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent); }
.jr .sim-slider:active::-webkit-slider-thumb { transform: scale(1.18); }
.jr .sim-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0; }

/* the two towers, layer 1 at the foot */
.sim-layer-wrap {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 44px); align-items: end;
  padding: clamp(20px, 2.8vw, 36px);
  background: radial-gradient(70% 60% at 75% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
}
.sim-col { min-width: 0; }
.sim-col-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 500 11.5px/1.3 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.sim-col-tag { padding: 5px 9px; border-radius: var(--r-pill); border: 1px solid var(--line-2); font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-3); }
.sim-col-tag-active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.sim-blocks { display: flex; flex-direction: column-reverse; gap: 5px; margin: 18px 0 16px; padding-right: 26px; }
.sim-block {
  position: relative; height: 17px; border-radius: 0;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--text) 3%, transparent);
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.sim-block.active { background: color-mix(in srgb, var(--text) 14%, transparent); border-color: var(--line-2); }
.sim-col-active .sim-block.active { background: color-mix(in srgb, var(--accent) 24%, transparent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.sim-col-active .sim-block.exit-point { background: var(--accent); border-color: var(--accent); }
.sim-block.exit-point::after { content: ''; position: absolute; left: calc(100% + 4px); top: 50%; width: 13px; height: 2px; margin-top: -1px; background: var(--accent); }
.sim-block.exit-point::before { content: ''; position: absolute; left: calc(100% + 16px); top: 50%; transform: translateY(-50%); border: 4px solid transparent; border-left: 6px solid var(--accent); }
.sim-col-metric { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.sim-metric-val { font: 700 clamp(22px, 1rem + 1vw, 30px)/1 var(--f-disp); letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.sim-col-active .sim-metric-val { color: var(--accent); }
.sim-metric-sub { font: 500 12px/1.4 var(--f-mono); color: var(--text-3); }

.sim-result-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.sim-result-cell { position: relative; padding: clamp(18px, 2.2vw, 28px) clamp(18px, 2.6vw, 34px); }
.sim-result-cell + .sim-result-cell { border-left: 1px solid var(--line); }
.sim-result-cell::before { content: ''; position: absolute; top: -1px; left: clamp(18px, 2.6vw, 34px); width: 28px; height: 2px; background: var(--accent); }
.sim-result-num { font: 700 clamp(30px, 1.2rem + 2vw, 48px)/1 var(--f-disp); letter-spacing: -0.04em; color: var(--text); font-variant-numeric: tabular-nums; }
.sim-result-cell:first-child .sim-result-num { color: var(--accent); }
.sim-result-lbl { margin-top: 10px; font: 500 12px/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--text-3); }
.sim-footnote { padding: 16px clamp(18px, 2.6vw, 34px) 20px; border-top: 1px solid var(--line); font: 500 12.5px/1.65 var(--f-mono); color: var(--text-3); }
.sim-footnote strong { color: var(--text); }

/* ── responsive ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .measure { grid-template-columns: minmax(0, 1fr); }
  .jr-grid { grid-template-columns: minmax(0, 1fr); }
  .sim-controls { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .layer-row { grid-template-columns: 46px minmax(0, 1fr); row-gap: 8px; column-gap: 12px; }
  .layer-exit { grid-column: 2; }
  .layer-exit:empty { display: none; }
  .has-exit .layer-bar-wrap::after, .layer-row + .layer-row .layer-bar-wrap::before { display: none; }
  .stack::before { right: auto; left: 20px; }
  .methods { grid-template-columns: minmax(0, 1fr); }
  .sim-result-strip { grid-template-columns: minmax(0, 1fr); }
  .sim-result-cell + .sim-result-cell { border-left: 0; border-top: 1px solid var(--line); }
  .sim-result-cell::before { display: none; }
}