/* Slide 1 — cover. Scoped to #s01. */
#s01{display:flex; align-items:center; overflow:hidden}
#s01 .slide-inner{width:100%; grid-template-areas:
  "num  num  num  num  num  num  num  num  num  num  num  num"
  "head head head head head head head hero hero hero hero hero"
  "quot quot quot quot quot quot quot hero hero hero hero hero"
  "cont cont cont cont cont cont cont hero hero hero hero hero";
  grid-template-rows:auto auto auto 1fr; row-gap:clamp(8px,1.6vh,20px)}
#s01 .slide-num{grid-area:num; position:relative; z-index:2}
#s01 .slide-num b{text-transform:none}
#s01 .slide-num a{color:inherit; text-decoration:none; border-bottom:1px dotted var(--ink-faint)}
#s01 .slide-num a:hover{color:var(--rust)}

/* title block */
#s01 .cover-head{grid-area:head; position:relative; z-index:2}
#s01 .cover-gr{margin:0 0 .12em .08em; font:400 clamp(1.1rem,1.7vw,1.6rem)/1 var(--f-greek); letter-spacing:.12em}
#s01 .cover-gr a{color:var(--rust); text-decoration:none}
#s01 .cover-title{margin:0; font-size:clamp(5.2rem,14.4vw,13.4rem); line-height:.86; letter-spacing:-.03em}
#s01 .cover-q{margin:.26em 0 0 .06em; font:italic 400 clamp(1.7rem,3.4vw,3.2rem)/1.05 var(--f-display); color:var(--ink-soft)}
#s01 .cover-q em{color:var(--rust)}

/* proem — the .flow-src (Greek line only) */
#s01 .cover-proem{grid-area:quot; position:relative; z-index:2; max-width:40em; margin-top:clamp(6px,1.6vh,20px)}
#s01 .cover-proem .gr{font-size:clamp(1.05rem,1.45vw,1.4rem); line-height:1.5}
#s01 .cover-proem .en{font-size:.95em}
#s01 .cover-proem .gr > span, #s01 .cover-proem .en > span{display:block; padding-left:1.4em; text-indent:-1.4em}
#s01 .nw{white-space:nowrap}
#s01 .cover-aside{position:absolute; right:-1.2em; bottom:-1.9em; margin:0; font-size:1.12rem; transform:rotate(-2.5deg); white-space:nowrap}
#s01 .cover-aside a{color:inherit; text-decoration-color:color-mix(in srgb,var(--cobalt) 45%,transparent)}

/* hero: blind Homer in an ink-blot mask */
#s01 .cover-hero{grid-area:hero; align-self:center; justify-self:center; position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center}
#s01 .hero{width:min(100%, calc(70vh * 617 / 768)); aspect-ratio:617/768;
  background-color:var(--paper-deep); box-shadow:inset 0 0 60px -10px color-mix(in srgb,var(--ink) 22%,transparent)}
#s01 .hero:not(:has(canvas, svg, img)){background:url(../assets/cutouts/homer.png) center 58%/86% auto no-repeat, var(--paper-deep)}
#s01 .cover-hero .credit{margin-top:.6em; text-align:center; max-width:30em}

/* contents scrap */
#s01 .cover-contents{grid-area:cont; align-self:end; position:relative; top:clamp(10px,1.5vh,16px); z-index:2; max-width:40em; padding:16px 22px 18px;
  background:var(--paper-light); box-shadow:0 10px 26px -16px rgba(60,40,10,.5)}
#s01 .cover-contents h4{margin:0 0 .45em; font:600 .66rem/1.2 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--rust)}
#s01 .cover-contents ol{list-style:none; margin:0; padding:0; columns:2; column-gap:1.6em}
#s01 .cover-contents li{break-inside:avoid; font-size:.82rem; line-height:1.55}
#s01 .cover-contents a{color:var(--ink-soft); text-decoration:none}
#s01 .cover-contents a:hover{color:var(--rust)}
#s01 .cover-contents b{display:inline-block; min-width:2em; font:400 .95em/1 var(--f-greek); color:var(--rust)}

/* scroll cue */
#s01 .scroll-cue{position:absolute; left:50%; bottom:calc(-1 * clamp(40px,7vh,86px)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:6px;
  font:500 .62rem/1 var(--f-mono); letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint); text-decoration:none; z-index:2}
#s01 .scroll-cue i{display:block; width:1px; height:34px; background:linear-gradient(var(--ink-faint),transparent); transform-origin:top; animation:s01-drip 2.6s ease-in-out infinite}
@keyframes s01-drip{0%{transform:scaleY(0); opacity:1} 60%{transform:scaleY(1); opacity:1} 100%{transform:scaleY(1); opacity:0}}
@media (prefers-reduced-motion:reduce){ #s01 .scroll-cue i{animation:none} }

@media (max-width:820px){
  #s01{display:block}
  #s01 .slide-inner{grid-template-areas:none; grid-template-rows:none}
  #s01 .slide-inner > *{grid-area:auto}
  #s01 .cover-head{order:1} #s01 .cover-hero{order:2} #s01 .cover-proem{order:3} #s01 .cover-contents{order:4}
  #s01 .slide-num{order:0}
  #s01 .hero{width:min(84vw, 360px)}
  #s01 .cover-title{font-size:clamp(4.4rem,23vw,7rem)}
  #s01 .cover-aside{position:static; display:block; margin-top:.5em; white-space:normal; transform:rotate(-1.5deg)}
  #s01 .cover-contents ol{columns:1}
  #s01 .scroll-cue{display:none}
}