/* s03 · Who is Homer? — scoped to #s03 */
#s03 .s03-notes{grid-column:1/8; grid-row:3; margin-top:.4em}
#s03 .s03-notes a{color:inherit; text-decoration-color:color-mix(in srgb,var(--rust) 55%,transparent)}
#s03 .s03-notes a:hover{color:var(--rust)}

/* hero: guslar glyph + the formula that flows on to δ΄ */
#s03 .s03-hero{grid-column:8/13; grid-row:3; position:relative; display:grid; grid-template-columns:1fr; justify-items:center}
#s03 .s03-glyph{--glyph-ar:749/910; aspect-ratio:749/910; width:100%; max-width:380px}
#s03 .s03-glyph:not(:has(canvas)){background:url("../assets/img/s03/guslar-cutout.png") center/contain no-repeat}
#s03 .s03-splat{position:absolute; top:44%; left:2%; width:30%; z-index:-1; opacity:.12}
#s03 .s03-formula{justify-self:start; margin:-2.2em 0 0; background:color-mix(in srgb,var(--paper) 86%,transparent); padding:.35em .6em .35em 1em; transform:rotate(-1.6deg); max-width:92%}
#s03 .s03-formula .gr{font-size:clamp(1.45rem,2.2vw,2rem); margin:0 0 .1em; line-height:1.2}
#s03 .s03-tag{justify-self:end; margin:.35em .2em 0 0; transform:rotate(-3deg); font-size:1.2em}
#s03 .s03-credit{justify-self:stretch; margin:.5em 0 0}

/* Parry–Lord strip */
#s03 .s03-photo{grid-column:1/4; grid-row:4; margin-top:clamp(18px,3vw,44px); max-width:300px}
#s03 .s03-voices{grid-column:4/8; grid-row:4; display:grid; gap:1.05em; align-content:center; align-self:center; padding:0 .4em}
#s03 .s03-q .en{font-size:1.06em; color:var(--ink)}
#s03 .s03-q:nth-child(2) .en{font:400 clamp(1.3rem,1.9vw,1.7rem)/1.25 var(--f-display); font-style:normal}
#s03 .s03-q:nth-child(2) .en em{color:var(--rust)}
#s03 .s03-q abbr{text-decoration:none}
#s03 .s03-video{grid-column:8/13; grid-row:4; align-self:center; margin-top:clamp(10px,2vw,30px)}

/* Nagy: five ages, hand-inked */
#s03 .s03-nagy{grid-column:1/-1; grid-row:5; margin-top:clamp(22px,4vw,56px)}
#s03 .s03-h{margin:0 0 .2em; font:400 clamp(1.4rem,2.2vw,2rem)/1.1 var(--f-display)}
#s03 .s03-h span{margin-left:.6em; font:500 .7rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rust); vertical-align:middle}
#s03 .s03-hq{margin:0 0 .4em; max-width:52em; font-style:italic; color:var(--ink-soft)}
#s03 .s03-strands{display:block; width:100%; height:auto; overflow:visible;
  clip-path:inset(0 100% 0 0); transition:clip-path 3.2s cubic-bezier(.45,.1,.3,1) .2s}
#s03 .s03-nagy.in .s03-strands{clip-path:inset(-20% -2% -20% 0)}
#s03 .s03-strands .ink *{fill:none; stroke:var(--ink); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
#s03 .s03-strands .ink .thin{stroke-width:1.2; stroke:var(--ink-soft)}
#s03 .s03-strands .ink .fill{fill:var(--ink); stroke:none}
#s03 .s03-strands .ink .rule{stroke-width:3.2; stroke-linecap:butt}
#s03 .s03-strands .ink .rule.thin{stroke-width:1.1; stroke:var(--ink)}
#s03 .s03-strands .late{fill:none; stroke:var(--cobalt); stroke-width:2.2; stroke-dasharray:7 5; stroke-linecap:round}
#s03 .s03-strands .dividers path{stroke:var(--ink-faint); stroke-width:1; stroke-dasharray:2 6; opacity:.7}
#s03 .s03-strands .lbl text{stroke:none}
#s03 .s03-strands .lbl path{stroke:var(--rust); stroke-width:1.2; fill:none}
#s03 .s03-strands .handt{font:500 25px var(--f-hand); fill:var(--rust)}
#s03 .s03-strands .handt.soft{fill:var(--ink-faint); font-size:22px}
#s03 .s03-strands .handt.cob{fill:var(--cobalt); font-size:23px}
#s03 .s03-ages{list-style:none; margin:.2em 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0}
#s03 .s03-ages li{padding:.3em .8em 0 0; font:400 .7rem/1.4 var(--f-mono); letter-spacing:.02em; color:var(--ink-faint)}
#s03 .s03-ages b{display:block; font:400 1.5rem/1 var(--f-display); color:var(--rust)}
#s03 .s03-ages span{display:block; margin:.15em 0 .2em; font:italic 500 1.05rem/1.2 var(--f-body); letter-spacing:0; color:var(--ink)}
#s03 .s03-nagy figcaption{margin-top:.9em}
#s03 .s03-swipe{display:none}

/* marginalia */
#s03 .s03-m1{grid-column:1/7; grid-row:6; margin-top:clamp(18px,3vw,40px)}
#s03 .s03-m2{grid-column:7/13; grid-row:6; margin-top:clamp(30px,4.5vw,64px)}
#s03 .paper-scrap ul{list-style:none; margin:0; padding:0}
#s03 .paper-scrap li{position:relative; padding:.16em 0 .16em 1.1em}
#s03 .paper-scrap li::before{content:"–"; position:absolute; left:0; color:var(--rust)}
#s03 .paper-scrap li ul li::before{content:"·"}
#s03 .paper-scrap .hand{margin:.55em 0 0; font-size:1.42em}

@media (max-width:820px){
  #s03 .slide-inner > *{grid-row:auto !important}
  #s03 .s03-hero{margin-top:1em}
  #s03 .s03-glyph{max-width:300px}
  #s03 .s03-photo{max-width:320px; justify-self:center}
  #s03 .s03-ages{grid-template-columns:1fr; gap:.5em}
  #s03 .s03-ages li{display:grid; grid-template-columns:2.9em 1fr; padding:0}
  #s03 .s03-ages b{grid-row:1/3; font-size:1.2rem; padding-top:.15em}
  #s03 .s03-swipe{display:block; font:500 .66rem/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin:.2em 0 .3em}
  #s03 .s03-scroll{overflow-x:auto; overflow-y:hidden; margin:0 calc(-1 * var(--gutter)); padding:0 var(--gutter); -webkit-overflow-scrolling:touch}
  #s03 .s03-strands{width:760px; max-width:none}
  #s03 .s03-m2{margin-top:.6em}
}
@media (prefers-reduced-motion:reduce){ #s03 .s03-strands{clip-path:none; transition:none} }