/* Slide 2 — The Odyssey is a story of change. Everything scoped under #s02. */
#s02 .s02-notes{grid-column:1/7; grid-row:3; align-self:start; margin-top:.4em}
#s02 .s02-notes > li{padding-top:.5em; padding-bottom:.5em}
#s02 .s02-notes li ul li{position:relative; padding-left:.85em; margin:.1em 0}
#s02 .s02-notes li ul li::before{content:"·"; position:absolute; left:.1em}
#s02 .s02-notes a.term{text-decoration-color:color-mix(in srgb,var(--rust) 45%,transparent)}

/* hero: Aristotle glyph + Raphael scrap + the zoon politikon line (flow source) */
#s02 .s02-hero{grid-column:7/13; grid-row:3; position:relative; display:grid; grid-template-columns:1.25fr 1fr; gap:0 clamp(12px,1.6vw,26px); align-items:start}
#s02 .s02-glyph{grid-column:1; grid-row:1/3; --glyph-ar:981/1200; aspect-ratio:981/1200; width:100%; max-width:400px; justify-self:end}
#s02 .s02-raphael{grid-column:2; grid-row:1; margin-top:clamp(18px,4vw,64px); max-width:230px}
#s02 .s02-raphael img{width:100%; height:auto; filter:sepia(.18) contrast(1.02)}
#s02 .s02-raph-note{margin:.35em 0 0; font-size:1.08em; line-height:1.12}
#s02 .s02-raph-note a{color:inherit}
#s02 .s02-tag{grid-column:2; grid-row:2; align-self:end; justify-self:start; margin:0 0 .2em; transform:rotate(-4deg); color:var(--rust)}
#s02 .s02-zoon{grid-column:1/-1; grid-row:3; margin-top:.6em}
#s02 .s02-zoon .gr{font-size:clamp(1.35em,2.2vw,1.75em); line-height:1.25}
#s02 .s02-credit{grid-column:1/-1; grid-row:4; margin:.3em 0 0}

/* ink diagrams */
#s02 .s02-diagram{grid-column:1/8; grid-row:4; display:grid; grid-template-columns:44fr 30fr; gap:clamp(8px,1.4vw,20px); align-items:end; margin-top:clamp(10px,2vw,28px);
  color:var(--ink)}
#s02 .s02-diagram svg{width:100%; height:auto; overflow:visible}
#s02 .s02-diagram figcaption{grid-column:1/-1}
#s02 .s02-diagram .ink *{fill:none; stroke:var(--ink); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
#s02 .s02-diagram .ink .thin, #s02 .s02-diagram .ink .thin *{stroke-width:1.3}
#s02 .s02-diagram .ink .fill{fill:var(--ink); stroke:none}
#s02 .s02-diagram .ink .brush{stroke:var(--rust); stroke-width:7; opacity:.88}
#s02 .s02-diagram .lbl text{fill:var(--ink-soft); stroke:none}
#s02 .s02-diagram .mono{font:500 10.5px var(--f-mono); letter-spacing:.16em}
#s02 .s02-diagram .r{fill:var(--rust)}
#s02 .s02-diagram .tiny{font:italic 400 12.5px var(--f-body)}
#s02 .s02-diagram .handt{font:500 21px var(--f-hand); fill:var(--cobalt)}
#s02 .drips circle{animation:s02-drip 4.2s ease-in infinite; transform-box:fill-box}
#s02 .drips circle:nth-child(2){animation-delay:.8s} #s02 .drips circle:nth-child(3){animation-delay:1.9s}
#s02 .drips circle:nth-child(4){animation-delay:2.6s} #s02 .drips circle:nth-child(5){animation-delay:3.3s}
@keyframes s02-drip{0%{transform:translateY(-14px); opacity:0} 20%{opacity:1} 100%{transform:translateY(16px); opacity:0}}
#s02 .frame-b{stroke:var(--rust) !important; stroke-dasharray:7 6; transform-box:fill-box; transform-origin:center; animation:s02-tilt 9s ease-in-out infinite alternate}
@keyframes s02-tilt{from{transform:rotate(0)} to{transform:rotate(7deg) translate(6px,-4px)}}
#s02 .gear{transform-box:view-box}
#s02 .gear .teeth{stroke-width:8 !important}
#s02 .g1 .teeth{stroke-dasharray:5.9 5.88}
#s02 .g2 .teeth{stroke-dasharray:5.7 5.72}
#s02 .g1{animation:s02-spin 48s linear infinite}
#s02 .g2{animation:s02-spin 32s linear infinite reverse}
@keyframes s02-spin{to{transform:rotate(360deg)}}

/* marginalia scrap: the owner's two comments */
#s02 .s02-margin{grid-column:8/13; grid-row:4; background-color:var(--paper-light); padding:clamp(16px,1.6vw,24px) clamp(16px,1.8vw,26px); margin-top:clamp(10px,2vw,28px);
  box-shadow:0 12px 28px -18px rgba(60,40,10,.5)}
#s02 .s02-margin p{margin:.2em 0 .25em}
#s02 .s02-margin ul{list-style:none; margin:0 0 .7em; padding:0}
#s02 .s02-margin li{position:relative; padding-left:1em; margin:.12em 0}
#s02 .s02-margin li::before{content:"·"; position:absolute; left:.2em; color:var(--rust)}
#s02 .s02-od{margin:.9em 0 .3em; font-size:1.06em}
#s02 .s02-aside{margin:.4em 0 0; transform:rotate(-1.5deg)}

@media (max-width:820px){
  #s02 .s02-notes, #s02 .s02-hero, #s02 .s02-diagram, #s02 .s02-margin{grid-row:auto}
  #s02 .s02-hero{grid-template-columns:1.45fr 1fr; margin-top:.6em}
  #s02 .s02-raphael{margin-top:10px}
  #s02 .s02-diagram{grid-template-columns:1fr}
  #s02 .s02-diagram .mono{font-size:11.5px}
  #s02 .s02-diagram .s02-frame{max-width:330px; justify-self:center}
}
@media (prefers-reduced-motion:reduce){ #s02 .drips circle, #s02 .frame-b, #s02 .gear{animation:none} }