/* Plates: a full-bleed exposure with an editorial overlay, an instrument strip,
   and a reading layer beneath. */
.plate-hero { position:relative; height:100svh; min-height:680px; max-height:1200px; }
.plate-stage { position:absolute; inset:0; }
.plate-stage .stage-frame { left:35%; right:2.5%; top:calc(var(--header) + 22px); bottom:calc(var(--inst, 150px) + clamp(30px,5vh,52px)); }
.plate-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:42%; z-index:1; pointer-events:none; background:linear-gradient(90deg, rgba(7,8,12,.88), rgba(7,8,12,.6) 55%, rgba(7,8,12,0)); }
.plate-hero::after { content:""; position:absolute; inset:auto 0 0 0; height:calc(var(--inst, 150px) + 70px); z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(7,8,12,.95) 45%, rgba(7,8,12,0)); }

.plate-head { position:absolute; z-index:3; left:var(--gutter); top:calc(var(--header) + clamp(18px,4vh,46px)); width:min(30vw,440px); pointer-events:none; }
.plate-kicker { margin:0; display:flex; flex-wrap:wrap; gap:4px 14px; font:500 10.5px/1.5 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.plate-numeral { color:var(--gold); }
.plate-title { margin:10px 0 0; font:400 clamp(64px,7.4vw,124px)/.88 var(--display); letter-spacing:-.014em; }
.plate-question { margin:clamp(14px,2.4vh,24px) 0 0; max-width:15em; font:italic 400 clamp(19px,1.65vw,25px)/1.32 var(--serif); color:var(--ink); text-wrap:balance; }

.plate-moves { position:absolute; z-index:4; left:var(--gutter); width:min(30vw,420px); top:calc(var(--header) + clamp(236px,35vh,330px)); bottom:calc(var(--inst, 150px) + clamp(26px,4vh,44px)); overflow:auto; scrollbar-width:thin; display:flex; flex-direction:column; gap:10px; }
.moves-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--rule); }
.moves-count { font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.moves-dots { display:flex; gap:4px; }
.move-dot { width:24px; height:24px; border-radius:50%; border:1px solid var(--rule-2); background:transparent; color:var(--ink-3); font:500 10px/1 var(--mono); padding:0; }
.move-dot:hover { color:var(--ink); border-color:var(--ink-3); }
.move-dot.current { background:var(--ink); border-color:var(--ink); color:var(--night); }
.move-title { margin:4px 0 0; font:400 clamp(25px,2.2vw,33px)/1.08 var(--display); letter-spacing:-.004em; }
.move-prompt { margin:0; font:16.5px/1.55 var(--serif); color:var(--ink-2); }
.move-prompt strong { color:var(--ink); font-weight:500; }
.move-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.move-result { margin:4px 0 0; padding:12px 0 0 14px; border-left:1px solid var(--gold); font:16px/1.55 var(--serif); color:var(--ink); }
.move-result strong { color:var(--gold); font-weight:500; }
.move-again { display:none; align-self:flex-start; padding-left:0; font-size:11px; color:var(--ink-3); }
.plate-moves.acted .move-again { display:inline-flex; }

.plate-instrument { position:absolute; z-index:4; left:var(--gutter); right:var(--gutter); bottom:clamp(16px,2.6vh,28px); display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:clamp(12px,1.8vh,18px) clamp(18px,3vw,48px); align-items:end; border-top:1px solid var(--rule); padding-top:clamp(12px,1.8vh,18px); }
.plate-timeline { grid-column:1 / -1; display:flex; align-items:center; gap:18px; }
.plate-timeline .ctl-timeline { flex:1; width:auto; display:flex; align-items:center; gap:18px; }
.plate-timeline .ctl-timeline .ctl-head { flex-direction:column; align-items:flex-start; gap:4px; min-width:92px; }
.plate-timeline .ctl-timeline .ctl-value { font-size:15px; }
.plate-timeline .ctl-timeline .ctl-track { flex:1; padding-bottom:0; }
.plate-timeline .ctl-timeline .ctl-ticks { top:20px; }
.plate-timeline .ctl-timeline input[type=range] { height:26px; }
.plate-timeline .ctl-timeline input[type=range]::-webkit-slider-runnable-track { height:2px; background:linear-gradient(90deg, var(--violet), #ff5d7a 45%, var(--ember) 70%, var(--gold)); opacity:.75; }
.plate-timeline .ctl-timeline input[type=range]::-moz-range-track { height:2px; background:linear-gradient(90deg, var(--violet), #ff5d7a 45%, var(--ember) 70%, var(--gold)); opacity:.75; }
.timeline-play { min-width:96px; justify-content:center; }
.timeline-label { font:500 10px/1.2 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; min-width:110px; }
.timeline-label output { display:block; margin-top:3px; font:500 15px/1 var(--mono); letter-spacing:0; color:var(--ink); text-transform:none; }
.plate-controls { display:flex; flex-wrap:wrap; align-items:flex-end; gap:clamp(12px,1.6vw,26px) clamp(16px,2.2vw,34px); min-width:0; }
.plate-readouts { min-width:0; }
.readouts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px clamp(16px,2.4vw,36px); margin:0; }
.readout { min-width:0; }
.readout dt { font:500 9.5px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap; }
.readout dd { margin:4px 0 0; font:400 clamp(19px,1.75vw,27px)/1 var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--ink); white-space:nowrap; }
.readout-wide dd { font-size:clamp(15px,1.2vw,18px); letter-spacing:0; padding-top:6px; white-space:normal; }
.readout dd.tone-ember { color:var(--ember); }
.readout dd.tone-ice { color:var(--ice); }
.readout dd.tone-gold { color:var(--gold); }
.readout dd.tone-rose { color:var(--rose); }
.readout dd.tone-dim { color:var(--ink-3); }

.ctl { margin:0; padding:0; border:0; min-width:0; }
.ctl-name { font:500 9.5px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); padding:0; }
.ctl-range { width:clamp(170px,15vw,250px); }
.ctl-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.ctl-value { font:500 13px/1 var(--mono); font-variant-numeric:tabular-nums; color:var(--ink); }
.ctl-track { position:relative; padding-bottom:16px; }
.ctl-hint { margin:2px 0 0; font:italic 13px/1.4 var(--serif); color:var(--ink-3); }
.ctl input[type=range] { -webkit-appearance:none; appearance:none; display:block; width:100%; height:30px; margin:2px 0 0; background:transparent; cursor:pointer; touch-action:pan-y; }
.ctl input[type=range]::-webkit-slider-runnable-track { height:1px; background:linear-gradient(90deg, var(--ink-3), var(--ink-2)); }
.ctl input[type=range]::-moz-range-track { height:1px; background:var(--ink-3); }
.ctl input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:14px; height:14px; margin-top:-6.5px; border-radius:50%; background:var(--ink); border:0; box-shadow:0 0 0 5px rgba(236,230,218,.08), 0 0 16px rgba(255,214,128,.55); transition:box-shadow .2s; }
.ctl input[type=range]::-moz-range-thumb { width:14px; height:14px; border-radius:50%; background:var(--ink); border:0; box-shadow:0 0 0 5px rgba(236,230,218,.08), 0 0 16px rgba(255,214,128,.55); }
.ctl input[type=range]:hover::-webkit-slider-thumb, .ctl input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow:0 0 0 7px rgba(255,214,128,.16), 0 0 20px rgba(255,214,128,.8); }
.ctl input[type=range]:focus-visible { outline:none; }
.ctl input[type=range]:focus-visible + .ctl-ticks { outline:1.5px solid var(--gold); outline-offset:3px; border-radius:2px; }
.ctl-ticks { position:absolute; left:0; right:0; top:14px; height:16px; pointer-events:none; }
.ctl-tick { position:absolute; top:0; translate:-50% 0; display:flex; flex-direction:column; align-items:center; }
.ctl-tick i { width:1px; height:7px; background:var(--ink-3); }
.ctl-tick b { margin-top:2px; font:500 8.5px/1 var(--mono); letter-spacing:.06em; color:var(--ink-3); white-space:nowrap; }
.ctl-tick-warn i { background:var(--rose); }
.ctl-tick-warn b { color:var(--rose); }
.ctl-tick-good i { background:var(--ice); }
.ctl-tick-good b { color:var(--ice); }
.ctl-tick-gold i { background:var(--gold); }
.ctl-tick-gold b { color:var(--gold); }
.ctl-seg legend { margin-bottom:7px; }
.seg-row { display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--rule-2); border-radius:20px; padding:2px; }
.seg { position:relative; display:block; }
.seg input { position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.seg span { display:block; padding:7px 12px; border-radius:999px; font:500 11px/1.1 var(--mono); letter-spacing:.03em; color:var(--ink-2); white-space:nowrap; transition:background .2s, color .2s; }
.seg input:checked + span { background:var(--ink); color:var(--night); }
.seg input:focus-visible + span { outline:1.5px solid var(--gold); outline-offset:2px; }
.seg input:disabled + span { opacity:.35; }
.seg:hover input:not(:checked):not(:disabled) + span { color:var(--ink); }
.ctl-buttons { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }

/* Reading layer */
.plate-body { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.55fr); gap:clamp(30px,5vw,90px) clamp(30px,6vw,110px); max-width:1320px; margin:0 auto; padding:clamp(70px,11vh,130px) var(--gutter) clamp(60px,9vh,110px); }
.plate-lede { grid-column:1 / -1; margin:0 0 clamp(10px,2vh,30px); max-width:24em; font:400 clamp(30px,3.3vw,50px)/1.12 var(--display); letter-spacing:-.004em; text-wrap:balance; }
.plate-lede em { color:var(--gold); }
.section-kicker { margin:0 0 18px; font:500 10.5px/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.plate-reading { grid-column:1; align-self:start; }
.plate-reading ul { margin:0; padding:0; list-style:none; display:grid; gap:14px; }
.plate-reading li { display:grid; grid-template-columns:14px 1fr; gap:12px; align-items:baseline; font:15.5px/1.55 var(--serif); color:var(--ink-2); }
.plate-reading li .swatch { translate:0 -1px; }
.plate-essay { grid-column:2; grid-row:span 3; max-width:40em; }
.plate-essay h3 { margin:2.1em 0 .5em; font:400 clamp(28px,2.4vw,36px)/1.1 var(--display); letter-spacing:-.003em; }
.plate-essay h3:first-of-type { margin-top:.2em; }
.plate-essay p { margin:0 0 1.05em; font:400 18.5px/1.7 var(--serif); color:var(--ink); }
.plate-essay p em { color:var(--ink); }
.plate-essay .essay-note { font:14.5px/1.65 var(--serif); color:var(--ink-2); border-left:1px solid var(--rule-2); padding-left:16px; }
.essay-math { margin:.6em 0 1.4em; padding:14px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); font-size:18px; }
.plate-label { grid-column:1; align-self:start; border-top:1px solid var(--rule); padding-top:18px; }
.plate-label .label-title { margin:0 0 14px; font:400 26px/1.1 var(--display); }
.plate-label .label-title span { font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--gold); vertical-align:middle; margin-right:6px; }
.plate-label dl { margin:0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; }
.plate-label dt { font:500 9.5px/1.9 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.plate-label dd { margin:0; font:15px/1.55 var(--serif); color:var(--ink-2); }
.plate-label h3 { margin:22px 0 8px; font:500 9.5px/1.4 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }
.sources { margin:0; padding-left:1.2em; font:14px/1.55 var(--serif); color:var(--ink-2); display:grid; gap:7px; }
.sources a { color:var(--ink-2); }
.plate-connections { grid-column:1; align-self:start; }
.plate-connections ul { margin:0; padding:0; list-style:none; }
.plate-connections li { display:grid; gap:4px; padding:12px 0; border-top:1px solid var(--rule); }
.plate-connections a { font:400 22px/1.15 var(--display); text-decoration:none; }
.plate-connections span { font:15px/1.55 var(--serif); color:var(--ink-2); }
.plate-nav { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:clamp(20px,4vh,50px); border-top:1px solid var(--rule); padding-top:22px; }
.plate-nav a { display:grid; gap:6px; text-decoration:none; }
.plate-nav .nav-next { text-align:right; }
.plate-nav span { font:500 10.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.plate-nav strong { font:400 clamp(34px,3.6vw,56px)/1 var(--display); font-weight:400; }

/* Inline mini charts drawn into the stage (risk curves, learning curves). */
.stage-chart-title { font:500 9.5px/1.2 var(--mono); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); }

@media (max-width:1180px) {
  .plate-stage .stage-frame { left:37%; }
  .plate-head, .plate-moves { width:min(33vw,400px); }
  .plate-instrument { grid-template-columns:1fr; }
  .readouts { justify-content:flex-start; }
}
@media (max-width:1023px) {
  .plate-hero { height:auto; min-height:0; max-height:none; display:flex; flex-direction:column; padding-top:calc(var(--header) + 10px); }
  .plate-hero::before, .plate-hero::after { display:none; }
  .plate-head { position:relative; left:auto; top:auto; width:auto; padding:0 var(--gutter); order:1; }
  .plate-title { font-size:clamp(56px,13vw,96px); }
  .plate-question { max-width:22em; }
  .plate-stage { position:relative; inset:auto; order:2; width:100%; aspect-ratio:1 / .86; max-height:72svh; min-height:300px; margin-top:12px; }
  .plate-stage .stage-frame { left:10px; right:10px; top:10px; bottom:10px; }
  .plate-instrument { position:relative; left:auto; right:auto; bottom:auto; order:3; margin:0 var(--gutter); grid-template-columns:1fr; gap:18px; padding-top:16px; }
  .plate-moves { position:relative; left:auto; top:auto; bottom:auto; width:auto; order:4; margin:26px var(--gutter) 0; overflow:visible; }
  .ctl-range { width:min(100%,320px); flex:1 1 220px; }
  .plate-body { grid-template-columns:1fr; padding-top:56px; }
  .plate-reading, .plate-label, .plate-connections { position:relative; top:auto; grid-column:1; }
  .plate-essay { grid-column:1; grid-row:auto; }
  .plate-reading { order:1; } .plate-essay { order:2; } .plate-label { order:3; } .plate-connections { order:4; } .plate-nav { order:5; }
  .plate-lede { order:0; }
}
@media (max-width:719px) {
  .plate-stage { aspect-ratio:1 / 1.02; }
  .readouts { gap:10px 22px; }
  .readout dd { font-size:20px; }
  .plate-essay p { font-size:17.5px; }
  .plate-nav strong { font-size:30px; }
}
.is-muted { opacity:.42; }
.loss-chart-wrap { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; align-items:flex-end; }
.loss-chart { width:240px; height:46px; overflow:visible; }
.loss-chart path { fill:none; stroke-width:1.4; }
.loss-chart .la { stroke:var(--ember); }
.loss-chart .lb { stroke:var(--ice); }
.loss-chart .cursor { stroke:var(--ink); stroke-width:1; }
.loss-chart .switch { stroke:var(--ink-3); stroke-dasharray:2 3; }
@media (max-width:1023px) { .loss-chart-wrap { align-items:flex-start; } }
@media (min-width:1024px) and (max-height:960px) {
  .move-prompt, .move-result { font-size:15px; line-height:1.5; }
  .move-title { font-size:26px; }
  .plate-question { font-size:20px; }
  .plate-title { font-size:clamp(56px,6.2vw,104px); }
  .plate-moves { top:calc(var(--header) + 236px); }
}