/* s08 Iliad vs Odyssey: all rules scoped under #s08 */
#s08 .s08-kicker{grid-column:1/-1; margin:-.4em 0 .2em}
#s08 .s08-kicker .hand{margin-left:.4em; white-space:nowrap}

/* ---------- proem diptych ---------- */
#s08 .s08-diptych{grid-column:1/-1; position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); gap:0 clamp(10px,1.6vw,24px); align-items:start; margin-top:clamp(60px,9vh,96px)}
#s08 .s08-proem{position:relative; padding:clamp(16px,1.6vw,26px) clamp(16px,1.8vw,30px) clamp(14px,1.4vw,22px)}
#s08 .s08-il{grid-column:1} #s08 .s08-od{grid-column:3}
#s08 .s08-proem header{display:flex; align-items:baseline; gap:.8em; margin:0 0 .5em; padding-right:150px}
#s08 .s08-od header{padding-right:0; padding-left:150px}
#s08 .s08-proem h3{margin:0; font:400 clamp(1.5rem,2.2vw,2.1rem)/1 var(--f-greek)}
#s08 .s08-proem h3 a{color:var(--ink); text-decoration:none}
#s08 .s08-il h3 a:hover, #s08 .s08-od h3 a:hover{color:var(--rust)}
#s08 .s08-proem header span{white-space:nowrap; font:500 .7rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
#s08 .s08-face{position:absolute; width:clamp(128px,11.5vw,168px); z-index:5; filter:drop-shadow(0 8px 10px rgba(50,30,10,.22))}
#s08 .s08-il .s08-face{right:14px; top:clamp(-112px,-7.6vw,-84px); --glyph-ar:310/380; transform:rotate(3deg)}
#s08 .s08-od .s08-face{left:12px; top:clamp(-126px,-8.6vw,-96px); --glyph-ar:1057/1193; transform:rotate(-3deg)}
#s08 .s08-gr, #s08 .s08-en{margin:0; padding:0 0 0 2.1em}
#s08 .s08-gr li{font:400 clamp(1.08rem,1.32vw,1.3rem)/1.5 var(--f-greek); color:var(--ink)}
#s08 .s08-en{margin-top:.7em; padding-top:.6em; border-top:1px dashed color-mix(in srgb,var(--ink) 20%,transparent)}
#s08 .s08-en li{font:italic 400 .9em/1.42 var(--f-body); color:var(--ink-soft)}
#s08 .s08-gr li::marker, #s08 .s08-en li::marker{font:400 .62rem var(--f-mono); color:var(--ink-faint)}
#s08 .s08-gap{margin-top:.55em; position:relative}
#s08 .s08-gap::before{content:"⋯"; position:absolute; left:-2.1em; top:-.95em; font-size:.8em; color:var(--ink-faint)}
#s08 .s08-vs{grid-column:2; align-self:center; font:italic 400 clamp(1.6rem,2.4vw,2.4rem)/1 var(--f-display); color:var(--rust); padding-top:2em}

/* linked words */
#s08 .w{cursor:pointer; border-radius:3px; padding:0 .08em; margin:0 -.08em; text-decoration:underline dotted color-mix(in srgb,var(--rust) 55%,transparent); text-underline-offset:4px; text-decoration-thickness:1.5px; transition:background-color .25s, color .25s, box-shadow .25s}
#s08 .w:focus-visible{outline:1.5px dashed var(--cobalt); outline-offset:2px}
#s08 .w.lit{background:color-mix(in srgb,var(--rust) 16%,transparent); color:var(--rust); text-decoration-color:var(--rust); box-shadow:0 0 0 2px color-mix(in srgb,var(--rust) 10%,transparent)}
#s08 .s08-en .w.lit{color:var(--rust)}
#s08 .s08-diptych.has-lit .s08-gr li, #s08 .s08-diptych.has-lit .s08-en li{color:color-mix(in srgb,currentColor 55%,var(--paper))}
#s08 .s08-diptych.has-lit .w.lit{color:var(--rust)}

/* ink thread between paired words (desktop) */
#s08 .s08-threads{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:3}
#s08 .s08-thread{fill:none; stroke:var(--cobalt); stroke-width:1.6; stroke-linecap:round; stroke-dasharray:5 4 1 4; opacity:0; transition:opacity .3s}
#s08 .s08-diptych.has-lit .s08-thread{opacity:.85}

/* gloss bar */
#s08 .s08-gloss{grid-column:1/-1; margin:1.1em auto 0; max-width:62em; min-height:3.2em; text-align:center; font-size:.92em; line-height:1.45; color:var(--ink-soft)}
#s08 .s08-gloss-k{display:inline-block; margin-right:.6em; padding:.15em .5em; font:500 .62rem/1.2 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--paper); background:var(--rust); border-radius:2px; vertical-align:.15em}
#s08 .s08-gloss b{font-family:var(--f-greek); font-weight:400; color:var(--rust)}

/* ---------- notes, Zeus, Wilson ---------- */
#s08 .s08-notes{grid-column:1/8; margin-top:clamp(20px,3vh,36px)}
#s08 .s08-wilson{grid-column:8/13; margin-top:clamp(20px,3vh,36px); padding:18px 20px 16px}
#s08 .s08-wilson p{margin:.3em 0 .55em}
#s08 .s08-wilson .s08-pair{padding-left:.7em; border-left:2px solid var(--cobalt)}
#s08 .s08-wilson .s08-pair i{color:var(--ink)}
#s08 .s08-wilson small{font:400 .62rem var(--f-mono); color:var(--ink-faint); margin-left:.3em}
#s08 .s08-h{margin:0 0 .5em; font:400 clamp(1.35rem,2vw,1.85rem)/1.1 var(--f-display)}
#s08 .s08-h small{font:500 .66rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-left:.5em}
#s08 .s08-zeus{grid-column:1/7; margin-top:clamp(28px,5vh,56px)}
#s08 .s08-zeus mark{background:color-mix(in srgb,var(--rust) 14%,transparent); color:var(--rust); padding:0 .1em; border-radius:2px}
#s08 .s08-zeus .quote b{font-weight:600; color:var(--rust)}
#s08 .s08-ledger{margin-top:.8em; font-size:.94em}
#s08 .s08-fate{grid-column:7/13; margin-top:clamp(28px,5vh,56px); font-size:.94em}

/* ---------- triangle vs circle ---------- */
#s08 .s08-shapes{grid-column:1/6; margin-top:clamp(18px,3vh,34px); align-self:center}
#s08 .s08-shapes svg{width:100%; height:auto; overflow:visible; color:var(--ink)}
#s08 .s08-ink path{fill:none; stroke:var(--ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
#s08 .s08-ink .s08-thin{stroke-width:1.2; stroke:var(--ink-soft)}
#s08 .s08-ink .s08-arr{stroke:var(--rust); color:var(--rust); stroke-width:1.6}
#s08 .s08-cyc > path:first-child{stroke:var(--rust)}
#s08 .s08-tri > path:first-child{stroke:var(--cobalt)}
#s08 .s08-ink text{fill:var(--ink)} #s08 .s08-ink text:not([text-anchor]){text-anchor:middle}
#s08 .s08-lb{font:400 15px var(--f-hand); fill:var(--ink-soft)}
#s08 .s08-ink .s08-lb{fill:var(--ink-soft)}
#s08 .s08-gk{font:400 26px var(--f-greek)}
#s08 .s08-sm{font:500 9.5px var(--f-mono); letter-spacing:.12em; text-transform:uppercase}
#s08 .s08-ink .s08-sm{fill:var(--ink-faint)}
#s08 .s08-ink .s08-hand{font:500 17px var(--f-hand); fill:var(--cobalt)}
#s08 .s08-dot{fill:var(--rust)} #s08 .s08-dot2{fill:var(--cobalt)}
#s08 .s08-draw{stroke-dasharray:1 1; stroke-dashoffset:1; transition:stroke-dashoffset 2.6s cubic-bezier(.5,.1,.2,1) .3s}
#s08 .s08-shapes.in .s08-draw{stroke-dashoffset:0}
#s08 .s08-shapes figcaption{text-align:center}
#s08 .s08-thesis{grid-column:6/13; margin-top:clamp(18px,3vh,34px); font-size:.94em}

/* ---------- videos ---------- */
#s08 .s08-vh{grid-column:1/-1; margin-top:clamp(30px,5vh,60px)}
#s08 .s08-v{grid-column:span 4}
#s08 .s08-more{grid-column:1/-1; margin:.2em 0 0; text-align:center; color:var(--ink-soft)}

@media (max-width:1100px){
  #s08 .s08-notes, #s08 .s08-zeus{grid-column:1/8} #s08 .s08-wilson, #s08 .s08-fate{grid-column:8/13}
  #s08 .s08-shapes{grid-column:1/7} #s08 .s08-thesis{grid-column:7/13}
}
@media (max-width:820px){
  #s08 .s08-diptych{grid-template-columns:1fr; gap:0; margin-top:70px}
  #s08 .s08-il, #s08 .s08-od, #s08 .s08-vs{grid-column:1}
  #s08 .s08-vs{text-align:center; padding:.5em 0 1.6em}
  #s08 .s08-od{margin-top:40px}
  #s08 .s08-face{width:92px} #s08 .s08-il .s08-face{top:-54px; right:12px} #s08 .s08-od .s08-face{top:-70px; left:12px}
  #s08 .s08-proem header{padding-right:96px} #s08 .s08-od header{padding-left:100px; padding-right:0}
  #s08 .s08-gr, #s08 .s08-en{padding-left:1.7em}
  #s08 .s08-gr li{font-size:15.5px; line-height:1.45; padding-left:1em; text-indent:-1em}
  #s08 .s08-en li{font-size:.84em}
  #s08 .s08-threads{display:none}
  #s08 .s08-diptych:not(.has-lit) .s08-gloss{position:static; box-shadow:none; background:none; text-align:center}
  #s08 .s08-gloss{position:sticky; bottom:8px; z-index:4; background:var(--paper-light); padding:.6em .8em; box-shadow:0 6px 18px -10px rgba(60,40,10,.5); text-align:left}
  #s08 .s08-shapes{max-width:440px; margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){
  #s08 .s08-dot{display:none}
  #s08 .s08-draw{stroke-dashoffset:0; transition:none}
}