/* Slide 7 — The Greek Archaic Age. Scoped under #s07. */
#s07 .s07-notes{grid-column:1/8; grid-row:3}
#s07 .s07-notes s{text-decoration-color:var(--rust); text-decoration-thickness:1.5px; color:var(--ink-faint)}

/* hero kouros */
#s07 .s07-hero{grid-column:9/13; grid-row:3; display:grid; grid-template-columns:auto 1fr; gap:4px 18px; align-items:end; justify-self:center}
#s07 .s07-hero .glyph{width:clamp(130px,13vw,190px); aspect-ratio:352/1200; grid-row:1/3}
#s07 .s07-hero .glyph:not(:has(canvas,img,svg)){background:url(../assets/cutouts/kouros.png) center/contain no-repeat; filter:sepia(.25) drop-shadow(0 12px 16px rgba(50,30,10,.25))}
#s07 .s07-hero .credit{grid-column:2; max-width:16em}
#s07 .s07-epitaph{grid-column:2; grid-row:1; margin:0; font-size:1.18em; max-width:11em; transform:rotate(-3deg); align-self:center}
#s07 .s07-epitaph .credit{display:block; font-size:.48em; transform:none}

/* section heads */
#s07 .s07-h{margin:0 0 .25em; font:400 clamp(1.5rem,2.3vw,2.1rem)/1.1 var(--f-display)}
#s07 .s07-h .arrow{color:var(--rust)}

/* ---------- timeline strip ---------- */
#s07 .s07-strip{grid-column:1/-1; position:relative; margin-top:clamp(12px,3vh,36px); padding:clamp(18px,2.4vw,30px) clamp(14px,2vw,28px) 18px;
  background:var(--paper-deep);
  clip-path:polygon(0 1.6%,6% 0,13% 1.2%,21% .2%,30% 1.5%,41% .3%,52% 1.4%,63% 0,74% 1.3%,86% .2%,94% 1.1%,100% 0,100% 98.6%,92% 100%,83% 98.8%,71% 99.8%,60% 98.5%,48% 99.9%,37% 98.7%,25% 100%,14% 98.6%,5% 99.8%,0 98.8%)}
#s07 .s07-strip-note{margin:0 0 .6em; max-width:46em; font-size:1.12em}
#s07 .lane{position:relative; display:flex; align-items:flex-start; gap:10px; margin:6px 0 4px}
#s07 .lane-tag{flex:0 0 auto; writing-mode:vertical-rl; transform:rotate(180deg); font:500 .62rem/1 var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--rust); padding:6px 0; border-right:1px solid var(--rust)}
#s07 .lane ol{list-style:none; margin:0; padding:4px 4px 10px; display:flex; align-items:flex-start; gap:clamp(14px,1.6vw,26px); flex:1 1 auto; justify-content:space-between}
#s07 .lane li{position:relative; flex:0 0 auto}
#s07 .lane li + li::before{content:"→"; position:absolute; left:calc(-1 * clamp(14px,1.6vw,26px)); width:clamp(14px,1.6vw,26px); top:70px; text-align:center; font:400 1.1rem/1 var(--f-body); color:var(--ink-faint)}
#s07 .lane figure{width:fit-content; min-width:132px; padding:7px 7px 6px}
#s07 .lane img{height:clamp(150px,15vw,200px); width:auto; margin:0 auto}
#s07 .lane-clay img{height:clamp(120px,12vw,160px)}
#s07 .lane figcaption{width:0; min-width:100%; font-size:.6rem; line-height:1.3}
#s07 .lane figcaption b{font-weight:500; color:var(--ink)}
#s07 .lane figcaption i{font-family:var(--f-body); font-size:1.18em; color:var(--cobalt)}
#s07 .lane li::after{content:""; position:absolute; left:8px; right:8px; top:-6px; height:3px; border-radius:2px; background:var(--ink-faint); opacity:.55}
#s07 .lane li.era-eg::after{background:var(--gold)}
#s07 .lane li.era-ge::after{background:var(--ink)}
#s07 .lane li.era-ar::after{background:var(--rust)}
#s07 .lane li.era-cl::after{background:var(--cobalt)}
#s07 .lane li.era-he::after{background:var(--ink-soft)}
#s07 .s07-strip.in .lane li{animation:s07-in .8s cubic-bezier(.2,.7,.2,1) both}
#s07 .s07-strip.in .lane li:nth-child(2){animation-delay:.12s} #s07 .s07-strip.in .lane li:nth-child(3){animation-delay:.24s}
#s07 .s07-strip.in .lane li:nth-child(4){animation-delay:.36s} #s07 .s07-strip.in .lane li:nth-child(5){animation-delay:.48s}
#s07 .s07-strip.in .lane li:nth-child(6){animation-delay:.6s}
@keyframes s07-in{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
#s07 .s07-swipe{display:none; margin:0; text-align:right; font-size:1.05em}

/* ---------- philosophers map ---------- */
#s07 .s07-mapwrap{grid-column:1/9; margin-top:clamp(8px,2vh,24px)}
#s07 .s07-map{position:relative; aspect-ratio:860/330;
  /* shared base map (viewBox 0 0 1120 500) cropped to x 160–1020, y 40–370 to match the overlay */
  background:url(../assets/maps/greater-greece.svg) 61.54% 23.53%/130.233% auto no-repeat}
#s07 .s07-map svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
#s07 .s07-map .city{font:500 10.5px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; fill:var(--ink-soft)}
#s07 .s07-map .nm{font:500 16px/1 var(--f-hand); fill:var(--ink); letter-spacing:0; text-transform:none}
#s07 .s07-map .nm.warn{fill:var(--rust); font-size:14px}
#s07 .s07-map .lead{fill:none; stroke:var(--ink-faint); stroke-width:.8}
#s07 .s07-map .io circle{fill:var(--rust)}
#s07 .s07-map .mg circle{fill:var(--cobalt)}
#s07 .s07-map .io .city{fill:var(--rust)}
#s07 .s07-map .mg .city{fill:var(--cobalt)}
#s07 .s07-map .pt-syr circle{fill:var(--paper); stroke:var(--cobalt); stroke-width:2; stroke-dasharray:3 2}
#s07 .s07-map .pt-ath circle{fill:var(--paper); stroke:var(--ink); stroke-width:1.6}
#s07 .s07-map .pt-ath .city{fill:var(--ink)}
#s07 .s07-map .mig path{fill:none; stroke:var(--rust); stroke-width:1.2; color:var(--rust); opacity:.75; stroke-dasharray:var(--len,900); stroke-dashoffset:var(--len,900)}
#s07 .s07-map .mig path.dashed{opacity:.5}
#s07 .s07-map .mig-l{font:500 13px/1 var(--f-hand); fill:var(--rust); opacity:0}
/* gentle staggered ink-in, triggered by s07.js adding .go */
#s07 .s07-map .pt{opacity:0; transform:translateY(-6px); transform-box:fill-box; transition:opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i) * .16s)}
#s07 .s07-map .mg .pt{transition-delay:calc(var(--i) * .16s + .5s)}
#s07 .s07-map.go .pt{opacity:1; transform:none}
#s07 .s07-map.go .mig path{transition:stroke-dashoffset 2.4s ease-in-out; transition-delay:calc(var(--i) * .2s); stroke-dashoffset:0}
#s07 .s07-map.go .mig path.dashed{stroke-dasharray:5 5; stroke-dashoffset:0}
#s07 .s07-map.go .mig-l{opacity:.9; transition:opacity 1s ease 2.6s}
#s07 .s07-legend{margin:.5em 0 0; font:400 .66rem/1.5 var(--f-mono); letter-spacing:.04em; color:var(--ink-faint)}
#s07 .s07-legend a{color:inherit}
#s07 .dot{display:inline-block; width:9px; height:9px; border-radius:50%; margin:0 4px 0 10px; vertical-align:-1px}
#s07 .dot:first-child{margin-left:0}
#s07 .dot.io{background:var(--rust)} #s07 .dot.mg{background:var(--cobalt)} #s07 .dot.ath{border:1.5px solid var(--ink)}

#s07 .s07-syr{grid-column:9/13; align-self:center; margin-top:clamp(24px,6vh,70px)}
#s07 .margin ul{margin:0; padding-left:1em}
#s07 .margin li{margin:.25em 0}
#s07 .margin p{margin:.45em 0}
#s07 .paper-scrap{padding:16px 18px; background:var(--paper-light)}

/* ---------- three verified scraps ---------- */
#s07 .s07-scrap{margin-top:clamp(10px,3vh,30px)}
#s07 .s07-letters{grid-column:1/5}
#s07 .s07-goat{grid-column:5/9}
#s07 .s07-ajax{grid-column:9/13}
#s07 .s07-scrap .quote .gr{font-size:1.05em}
#s07 .s07-scrap .hand{font-size:1.2em}
#s07 .s07-ajax .flow-src{font-size:1.25em}
#s07 .s07-thiel{border-top:1px dashed var(--ink-faint); padding-top:.45em}
#s07 .s07-thiel-2{font-size:.92em; color:var(--ink-faint)}

@media (max-width:1100px){
  #s07 .s07-hero{grid-template-columns:auto; justify-items:center}
  #s07 .s07-hero .glyph{grid-row:auto}
  #s07 .s07-hero .credit, #s07 .s07-epitaph{grid-column:1; grid-row:auto; text-align:center}
}
@media (max-width:820px){
  #s07 .s07-notes, #s07 .s07-hero{grid-row:auto}
  #s07 .s07-hero{grid-template-columns:auto 1fr; justify-items:start}
  #s07 .s07-hero .glyph{grid-row:1/3; width:110px}
  #s07 .s07-hero .credit, #s07 .s07-epitaph{grid-column:2; text-align:left}
  #s07 .s07-epitaph{grid-row:1}
  #s07 .s07-strip{margin-left:calc(-1 * var(--gutter)); margin-right:calc(-1 * var(--gutter)); padding-left:var(--gutter); padding-right:var(--gutter)}
  #s07 .lane ol{overflow-x:auto; scroll-snap-type:x mandatory; justify-content:flex-start; padding-top:10px; scrollbar-width:thin}
  #s07 .lane li{scroll-snap-align:start}
  #s07 .lane img{height:160px} #s07 .lane-clay img{height:130px}
  #s07 .s07-swipe{display:block}
  #s07 .s07-mapscroll{overflow-x:auto; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter); scrollbar-width:thin}
  #s07 .s07-map{min-width:700px}
  #s07 .s07-syr, #s07 .s07-scrap{transform:none}
}
@media (prefers-reduced-motion:reduce){
  #s07 .s07-map .pt, #s07 .s07-map .mig-l{opacity:1; transform:none; transition:none}
  #s07 .s07-map .mig path{stroke-dashoffset:0; transition:none}
  #s07 .s07-strip.in .lane li{animation:none}
}