/* Slide 4: concept evolution: diffusion map + two fact-check scraps. Scoped to #s04. */
#s04 .s04-left{grid-column:1/5; align-self:start; margin-top:.4em}
#s04 .s04-notes q{font-style:italic}
#s04 .s04-arrow{font:500 .66rem/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--rust); margin-left:.3em; white-space:nowrap}
#s04 .s04-map{grid-column:5/13; padding:10px 10px 12px; transform:rotate(.35deg)}

/* stage: base map image + canvas + labels share one viewBox (set by JS: wide / narrow crop) */
#s04 .s04-stage{position:relative; aspect-ratio:870/380; background:var(--paper); overflow:hidden}
#s04 .s04-svg, #s04 .s04-cv{position:absolute; inset:0; width:100%; height:100%; display:block}
#s04 .s04-cv{pointer-events:none}
#s04 .s04-argo{fill:none; stroke:var(--ink-faint); stroke-width:1.1; stroke-dasharray:4 4; opacity:.75}
#s04 .s04-argo-lbl{font:500 13px var(--f-hand); fill:var(--ink-faint)}
#s04 .lbl .nm{font:500 17px var(--f-hand); fill:var(--ink-soft); paint-order:stroke; stroke:var(--paper); stroke-width:3px; stroke-linejoin:round}
#s04 .lbl .tg{font:400 8.6px var(--f-mono); letter-spacing:.06em; fill:var(--ink-faint); paint-order:stroke; stroke:var(--paper); stroke-width:2.4px}
#s04 .lbl.hub .nm{fill:var(--cobalt); font-size:18px}
#s04 .lbl.ath .nm{font-size:21px}
#s04 .s04-alex-lbl{font:500 15px var(--f-hand); fill:var(--ink); paint-order:stroke; stroke:var(--paper); stroke-width:3px; opacity:0}
#s04 .lbl.ath.fixed .tg{fill:var(--cobalt); font-weight:500}
#s04 .narrow .lbl.loc .tg{display:none}

/* legend: a pinned paper note under the owner's notes, beside the map */
#s04 .s04-legend{margin:1.6em .4em 0 0; padding:.7em .85em .6em; background:var(--paper-light);
  box-shadow:0 8px 20px -12px rgba(60,40,10,.5); transform:rotate(-1.2deg); font:400 .68rem/1.4 var(--f-mono); color:var(--ink-soft)}
#s04 .s04-legend h4{margin:0 0 .35em; font:600 .6rem/1.2 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rust)}
#s04 .s04-legend p{display:flex; align-items:center; gap:.55em; margin:.18em 0}
#s04 .s04-legend b{font-weight:500; color:var(--ink)}
#s04 .s04-legend-note{margin-top:.35em !important; font-size:.56rem; line-height:1.3; color:var(--ink-faint)}
#s04 .s04-legend svg{flex:none; width:22px; height:14px; overflow:visible}
#s04 .i-loc{fill:none; stroke:var(--rust); stroke-width:1.3}
#s04 .i-in{fill:none; stroke:var(--cobalt); stroke-width:1.2; stroke-dasharray:2.6 1.8}
#s04 .i-dot{fill:var(--cobalt)}
#s04 .i-cry{fill:color-mix(in srgb,var(--cobalt) 28%,transparent); stroke:var(--cobalt); stroke-width:1}
#s04 .i-cry2{fill:none; stroke:var(--cobalt); stroke-width:.6; opacity:.7}
#s04 .i-out{fill:none; stroke:var(--cobalt); stroke-width:.9}

/* five ages timeline (click to jump) */
#s04 .s04-time{position:relative; display:grid; grid-template-columns:repeat(5,1fr); margin-top:12px; padding-top:9px}
#s04 .s04-track{position:absolute; left:0; right:0; top:0; height:1px; background:var(--ink-faint); opacity:.6}
#s04 .s04-cursor{position:absolute; top:-4px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:var(--rust); box-shadow:0 0 0 3px color-mix(in srgb,var(--rust) 18%,transparent)}
#s04 .seg{appearance:none; border:0; background:none; padding:.1em .4em 0 0; text-align:left; cursor:pointer; color:var(--ink-faint); border-left:1px solid color-mix(in srgb,var(--ink) 15%,transparent); padding-left:.45em}
#s04 .seg:first-child{border-left:0; padding-left:0}
#s04 .seg b{display:block; font:500 .62rem/1.25 var(--f-mono); letter-spacing:.08em; text-transform:uppercase}
#s04 .seg i{display:block; font:italic 400 .78rem/1.25 var(--f-body)}
#s04 .seg.on{color:var(--rust)}
#s04 .seg:hover b{color:var(--ink)}
#s04 .seg:focus-visible{outline:1px dashed var(--cobalt); outline-offset:2px}
#s04 .s04-cap{margin-top:.55em; min-height:3.6em; font:400 .95rem/1.35 var(--f-body); letter-spacing:0; color:var(--ink)}
#s04 .s04-cap q{quotes:none; font-style:italic; color:var(--ink-soft)}
#s04 .s04-cap span::before{content:" → "; color:var(--rust)}
#s04 .s04-cap cite{display:block; margin-top:.35em; font:400 .62rem/1.35 var(--f-mono); font-style:normal; letter-spacing:.04em; color:var(--ink-faint)}
#s04 .s04-cap cite a{color:inherit}

/* fact-check scraps */
#s04 .s04-check{position:relative; margin-top:clamp(18px,3vh,40px); padding:1.1em 1.25em 1em; background:var(--paper-light);
  box-shadow:0 1px 0 rgba(0,0,0,.04), 0 12px 28px -16px rgba(60,40,10,.5); font-size:.9em}
#s04 .s04-horse{grid-column:1/7; transform:rotate(-.6deg)}
#s04 .s04-fleece{grid-column:7/13; transform:rotate(.5deg)}
#s04 .s04-check h3{margin:0 0 .35em; font:400 clamp(1.35rem,2vw,1.75rem)/1.1 var(--f-display)}
#s04 .s04-check h3 em{color:var(--rust)}
#s04 .s04-verdict{margin:0 0 .5em; font-size:1.02em}
#s04 .s04-verdict span{display:inline-block; margin-right:.5em; padding:.12em .45em; border:1px solid var(--rust); font:500 .6rem/1.3 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--rust); transform:rotate(-2deg)}
#s04 .s04-verdict b{font-weight:600}
#s04 .s04-check .notes{font-size:.95em}
#s04 .s04-check .notes > li{padding:.3em 0 .3em 1.4em}
#s04 .ok, #s04 .no{font:500 .62rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap}
#s04 .ok{color:var(--cobalt)} #s04 .no{color:var(--rust)}
#s04 .s04-check .credit{margin:.7em 0 0}
#s04 .s04-glyph{float:right; width:clamp(96px,10vw,140px); aspect-ratio:690/1200; margin:-.4em -.3em .4em 1em; shape-outside:margin-box}
#s04 .s04-jason{float:right; width:clamp(92px,9.5vw,132px); margin:-1.6em -.6em .3em .9em; transform:rotate(2deg)}
#s04 .s04-fleece .quote{margin:.2em 0 .7em}
#s04 .s04-fleece .quote .gr{font-size:1.12em}

@media (max-width:1100px){
  #s04 .s04-left{display:contents}
  #s04 .s04-notes, #s04 .s04-map, #s04 .s04-legend{grid-column:1/-1}
  #s04 .s04-map{order:1} #s04 .s04-legend{order:2; margin:0} #s04 .s04-check{order:3}
  #s04 .s04-horse, #s04 .s04-fleece{grid-column:1/-1}
}
@media (max-width:820px){
  #s04 .s04-map{padding:6px 6px 8px; transform:none}
  #s04 .s04-legend{margin:0; transform:none}
  #s04 .seg b{font-size:.54rem; letter-spacing:.04em}
  #s04 .seg i{font-size:.68rem}
  #s04 .s04-check{transform:none; padding:1em 1em .9em}
  #s04 .s04-glyph{width:96px}
  #s04 .s04-jason{width:88px; margin-top:-.6em}
}