/* Editorial tokens and typography adapted from Manda blog post 1.
   Standalone subset: no policy data, media credentials or production routing. */
:root { --paper:#f8eee8; --paper-raised:#fdfaf8; --ink:#211c1a; --muted:#75655e; --line:#dcc7bc; --accent:#3d4635; --olive:#55604a; --display:"Fraunces",Georgia,serif; --body:"Karla",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:90px; }
body { margin:0; position:relative; isolation:isolate; color:var(--ink); background:var(--paper); font:18px/1.7 var(--body); -webkit-font-smoothing:antialiased; }
body::before { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; filter:url(#plaster-fine); opacity:.04; mix-blend-mode:overlay; }
body::after { content:""; position:fixed; z-index:-1; inset:0; pointer-events:none; filter:url(#plaster-mottle); opacity:.10; mix-blend-mode:soft-light; }
.texture-filters { position:absolute; }
a { color:var(--accent); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--olive); outline-offset:4px; }
.skip-link { position:absolute; top:8px; left:8px; transform:translateY(-180%); z-index:30; background:var(--paper-raised); padding:8px; }
.skip-link:focus { transform:none; }
.site-header { position:sticky; top:0; z-index:20; min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:12px clamp(1rem,4vw,4rem); border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 94%,transparent); backdrop-filter:blur(10px); font-size:.75rem; color:var(--muted); }
.site-name { font-family:var(--display); font-weight:500; font-size:.84rem; }
.hero { width:min(840px,calc(100% - 2rem)); margin:auto; padding:clamp(4rem,10vw,7rem) 0 4rem; }
h1,h2,h3,.dek { font-family:var(--display); font-variation-settings:"SOFT" 0,"WONK" 1; font-weight:400; letter-spacing:-.025em; }
h1 { font-size:clamp(2.8rem,6vw,4.6rem); line-height:1.08; margin:0 0 1.5rem; }
h2 { font-size:clamp(2rem,4.5vw,3.15rem); line-height:1.13; margin:0 0 1.5rem; }
h3 { font-size:clamp(1.35rem,3vw,1.75rem); line-height:1.25; margin:2rem 0 .65rem; }
h4 { font-size:1rem; font-weight:600; line-height:1.7; margin:0 0 .6rem; }
p { margin:.65rem 0 1.3rem; }
.dek { max-width:690px; font-size:clamp(1.15rem,2.5vw,1.45rem); line-height:1.5; color:var(--muted); }
.eyebrow,.section-number { font-size:.9rem; font-weight:600; letter-spacing:.01em; color:var(--ink); margin:0 0 1rem; }
.byline { font-size:.78rem; color:var(--muted); margin-top:1.5rem; }
.prose { width:min(790px,calc(100% - 2rem)); margin-left:auto; margin-right:auto; }
.wide { width:min(1180px,calc(100% - 2rem)); margin-left:auto; margin-right:auto; }
.inset { width:min(790px,100%); }
.chapter { padding:4.5rem 0; border-top:1px solid var(--line); }
.contents { position:relative; padding:2.5rem 0 3.5rem; display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:.7rem 1.7rem; font-size:1.05rem; }
.contents>span { flex-basis:100%; text-align:center; margin:0 0 .3rem; }
.contents-title { font-size:1.15rem; color:var(--ink); }
@media (max-width:640px) {
  .contents { gap:.6rem 1.1rem; }
}
.teaser { width:min(var(--figure-width),calc(100vw - 2rem)); position:relative; left:50%; transform:translateX(-50%); margin:2rem 0; }
.teaser figcaption { margin-top:.3rem; }
figure { margin:1.5rem 0; }
.wide-figure > img { display:block; width:100%; max-width:100%; height:auto; }
.comparison-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.engine-slot { min-width:0; background:var(--paper-raised); }
.engine-label { display:flex; align-items:center; gap:.6rem; padding:.8rem; font-size:.78rem; min-height:55px; }
.engine-index { font-size:.65rem; color:var(--muted); }
.media-placeholder { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:.5rem; padding:1rem; text-align:center; background:linear-gradient(140deg,#eff0ea,#e9e4dc); color:var(--muted); font-size:.78rem; }
.media-placeholder small { font-size:.65rem; }
figcaption { font-size:.77rem; color:var(--muted); line-height:1.55; margin-top:.85rem; max-width:900px; }
.writing-prompt,.placeholder-copy { color:var(--muted); }
.draft-label { display:block; font-size:.67rem; text-transform:uppercase; letter-spacing:.09em; color:var(--olive); margin-bottom:.4rem; }
.takeaway { margin:1.75rem 0 0; border-left:3px solid var(--olive); padding:.7rem 0 .7rem 1.25rem; font-size:1rem; color:var(--ink); }
.editor-note { font-size:.8rem; color:var(--muted); border-left:2px solid var(--line); padding-left:1rem; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.82rem; line-height:1.5; }
th,td { text-align:left; padding:.8rem; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--ink); background:color-mix(in srgb,var(--paper-raised) 68%,var(--line)); font-size:.92rem; font-weight:600; }
.series-intro { margin-top:2.35rem; }
.series-links { margin-top:1.25rem; padding-left:1.35rem; }
.series-links li { margin:.45rem 0; }
.series-links a { font-family:var(--display); font-size:1.18rem; line-height:1.35; }
.body-subheading { font-family:var(--body); font-size:1rem; line-height:1.7; }
#step-robot { padding-top:2rem; }
.scenario { padding:3rem 0; border-bottom:1px solid var(--line); }
/* All result headings, disclosure rows and prose share one centered column.
   Figures retain their independent, wider editorial width below. */
#results > .scenario { width:min(790px,100%); margin-left:auto; margin-right:auto; }
.control-experiment { padding:1.25rem 0; }
.control-experiment>summary { cursor:pointer; font-family:var(--display); font-size:1.15rem; line-height:1.5; }
.control-experiment>summary::marker { color:var(--olive); }
.control-description { display:block; padding-left:1.2rem; font-family:var(--body); font-size:.78rem; color:var(--muted); }
.control-content { padding-top:1.25rem; }
.control-content>.placeholder-copy { max-width:790px; font-size:.9rem; }
.scenario-heading h3 { margin:.2rem 0 1rem; font-size:clamp(1.7rem,3.5vw,2.3rem); }
.scenario>.placeholder-copy { max-width:790px; font-size:.9rem; }
.visualization-slot,.summary-placeholder { border:1px dashed var(--line); padding:1.5rem; color:var(--muted); font-size:.86rem; }
.visualization-slot p { margin:.2rem 0; }
.visualization-slot small { font-size:.73rem; }
.notes-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:1.5rem; font-size:.85rem; }
.notes-grid p { margin:.4rem 0; }
.cross-scenario { padding-top:2rem; }
.endmatter { border-top:1px solid var(--line); padding:2rem 0; }
.article-footer { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding:2rem 0 4rem; font-size:.8rem; }
@media(max-width:900px) { .comparison-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { body { font-size:17px; } .site-header>span { max-width:120px; text-align:right; font-size:.65rem; } .notes-grid { grid-template-columns:1fr; gap:1.25rem; } .engine-label { font-size:.7rem; padding:.5rem; } .engine-index { display:none; } .media-placeholder { padding:.7rem; font-size:.7rem; } .media-placeholder small { font-size:.6rem; } .chapter { padding:3rem 0; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
@media print { .site-header,.contents { position:static; } body::before,body::after { display:none; } .comparison-grid { break-inside:avoid; } }
.compact-replay { margin-bottom:2rem; }
.compact-replay-frame { display:block; width:100%; height:450px; border:0; }
@media(max-width:760px) { .compact-replay-frame { height:590px !important; } }
@media(max-width:760px) { .compact-replay-frame.teaser-force-frame { height:740px !important; } }
.deform-replay-frame { display:block; width:100%; height:760px; border:0; }
.replay-launcher { position:relative; display:block; width:100%; min-height:340px; padding:0; overflow:hidden; border:1px solid var(--line); border-radius:6px; background:var(--paper-raised); color:var(--ink); cursor:pointer; text-align:center; }
.replay-launcher img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.78; filter:saturate(.75); }
.replay-launcher-teaser,.replay-launcher-scene { min-height:0; }
.replay-launcher-teaser picture,.replay-launcher-scene picture { display:block; width:100%; }
.replay-launcher-teaser img,.replay-launcher-scene img { position:static; display:block; width:100%; height:auto; opacity:1; filter:none; }
.replay-launcher-teaser .replay-launcher-label,.replay-launcher-scene .replay-launcher-label { position:absolute; inset:0; min-height:0; background:color-mix(in srgb,var(--paper) 15%,transparent); }
.replay-launcher-teaser::after,.replay-launcher-scene::after { display:none; }
.replay-launcher::after { content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--paper) 30%,transparent); }
.replay-launcher-label { position:relative; z-index:1; min-height:340px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; font:600 .9rem/1.3 var(--body); }
.replay-play { display:grid; place-items:center; width:48px; height:48px; padding-left:3px; border-radius:50%; background:var(--accent); color:var(--paper-raised); box-shadow:0 2px 14px color-mix(in srgb,var(--ink) 18%,transparent); }
.replay-launcher:hover .replay-play { background:var(--olive); }
.replay-launcher:focus-visible { outline:2px solid var(--olive); outline-offset:4px; }
@media(max-width:760px) { .deform-replay-frame { height:900px; } .replay-launcher,.replay-launcher-label { min-height:300px; } }
/* Keep wide images and long select labels inside the viewport on phones. */
img { max-width:100%; height:auto; }
select { max-width:100%; }

/* Shared editorial figure width, independent of the narrower text column. */
:root { --figure-width:1000px; }
figure:is(.compact-replay,.comparison-figure,.measured-figure,.result-figure,.wide-figure,.method-progression,.controls-overview) {
  width:min(var(--figure-width),calc(100vw - 2rem));
  max-width:none;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin-left:0;
  margin-right:0;
}
/* Static methodology overview: six lightweight recorded-scene renders. */
.method-progression { margin:2rem 0 2.5rem; }
.controls-overview { margin:2rem 0; }
.controls-engine-legend { display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; margin-bottom:1rem; font-size:.78rem; }
.controls-engine-legend span::before { content:""; display:inline-block; width:.7rem; height:.7rem; background:var(--engine); margin-right:.4rem; }
.controls-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line); background:#e9ddd3; }
.controls-overview-grid>div+div { border-left:1px solid var(--line); }
.controls-overview-grid h4 { margin:0; padding:.5rem .7rem; font-size:.85rem; }
.controls-overview-grid iframe { display:block; width:100%; height:260px; border:0; }
.controls-playback { display:flex; align-items:center; gap:1rem; margin:.5rem 0; font-size:.78rem; }
.controls-playback button { font:400 13px var(--body); padding:8px 12px; background:var(--accent); color:var(--paper-raised); border:1px solid var(--accent); border-radius:5px; cursor:pointer; }
.controls-playback button:hover { background:var(--olive); }
.controls-playback button:disabled { opacity:.4; cursor:wait; }
.controls-playback input { flex:1; min-width:0; accent-color:var(--olive); }
.controls-playback output { font-variant-numeric:tabular-nums; }
.controls-force-legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.75rem; margin-bottom:.5rem; }
.controls-force-legend i { display:inline-block; width:1.2rem; height:4px; background:var(--force); margin-right:.35rem; vertical-align:middle; }
@media(max-width:760px) { .controls-overview-grid { grid-template-columns:1fr; } }
.method-progression-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem .8rem; }
.method-scene { display:block; min-width:0; background:#f6eee8; border:1px solid var(--line); overflow:hidden; color:inherit; text-decoration:none; }
.method-scene:hover { border-color:var(--olive); }
.method-scene img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.method-scene p { margin:0; padding:.55rem .7rem .8rem; font-size:.78rem; line-height:1.35; font-weight:600; }
.method-scene p span { color:#b65335; font-variant-numeric:tabular-nums; margin-right:.3rem; }
.method-scene small { display:block; margin-top:.2rem; font-size:.7rem; font-weight:400; color:var(--muted); }
.method-progression figcaption { margin-top:.9rem; font-size:.8rem; line-height:1.55; }
@media(max-width:600px) { .method-progression-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Introduction primer: simulator layers, core terms and collapsible glossary. */
.primer-stack { margin:1.75rem 0 2rem; }
.stack-frame { border:1px solid var(--line); background:var(--paper-raised); padding:.9rem; }
.stack-title { margin:0 0 .8rem; font-family:var(--display); font-size:1.1rem; line-height:1.3; }
.stack-frame small { display:block; font-family:var(--body); font-size:.72rem; line-height:1.45; color:var(--muted); margin-top:.15rem; }
.stack-row { display:grid; grid-template-columns:1fr 1.5fr 1fr; gap:.7rem; }
.stack-box { border:1px solid var(--line); background:var(--paper); padding:.7rem .8rem; font-size:.85rem; line-height:1.4; }
.stack-engine { border-color:var(--olive); box-shadow:inset 3px 0 0 var(--olive); }
.stack-loop { margin:.6rem 0 .1rem; padding:0; list-style:none; counter-reset:loop; display:flex; flex-wrap:wrap; gap:.3rem; font-size:.74rem; }
.stack-loop li { counter-increment:loop; padding:.15rem .5rem; border:1px solid var(--line); border-radius:999px; background:var(--paper-raised); }
.stack-loop li::before { content:counter(loop) " "; color:var(--olive); font-weight:600; }
.primer-terms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem 2rem; margin:1rem 0 1.5rem; }
.primer-terms>div { border-top:1px solid var(--line); padding-top:.55rem; }
.primer-terms dt,.primer-details dt { font-weight:600; font-size:.92rem; }
.primer-terms dd { margin:.1rem 0 .6rem; font-size:.86rem; line-height:1.55; color:var(--muted); }
.primer-details { margin:0 0 1.5rem; border-top:1px solid var(--line); }
.primer-details>details { padding:.7rem 0; border-bottom:1px solid var(--line); }
.primer-details>details>summary { font-size:1.02rem; }
.primer-details dl { margin:.8rem 0 .4rem; }
.primer-details dd { margin:.1rem 0 .9rem; font-size:.88rem; line-height:1.6; }
@media(max-width:640px) { .stack-row,.primer-terms { grid-template-columns:1fr; } }
/* Method: how the four setups differ. */
.routes-table { min-width:720px; }
.routes-table caption { caption-side:bottom; text-align:left; font-size:.75rem; color:var(--muted); padding-top:.6rem; }
.routes-table th[scope="row"] { font-size:.85rem; background:none; }
/* Hero key findings and primer page. */
.key-findings-title { margin-top:2.2rem; }
.key-findings { padding-left:1.2rem; margin:.4rem 0 1.5rem; }
.key-findings li { margin:.45rem 0; }
.primer-details>h3 { font-size:1.25rem; margin:2rem 0 .3rem; }
/* Deformable replays: five routes in a 3 × 2 grid need a taller frame than the rigid replays. */
.compact-replay-frame.deform-frame { height:640px; }
@media(max-width:760px) { .compact-replay-frame.deform-frame { height:840px !important; } }

/* Results remain plain prose; spacing and rules distinguish the opening summary. */
.results-summary { margin:1.75rem 0 2rem; padding:1.25rem 0 1.25rem 1.25rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); font-size:1em; font-weight:400; line-height:1.65; }
.results-summary li { padding-left:.2rem; margin:0 0 .85rem; }
.results-summary li:last-child { margin-bottom:0; }
/* Subtle list markers: small muted dashes instead of solid discs. */
article ul > li::marker { content:"–"; color:var(--n-600); font-size:.9em; }