@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Linear+B&display=swap");
/* Slide 5 — Greece before Homer. Everything scoped under #s05. */
#s05 .s05-notes{grid-column:1/8; grid-row:3/5; align-self:start; margin-top:.3em}
#s05 .s05-notes > li > .cf{margin-left:.35em; font-size:.85em}
#s05 .s05-notes b{font-weight:600}

/* hero: Minoan bull glyph + the Linear B flow source */
#s05 .s05-hero{grid-column:8/13; grid-row:3; position:relative; display:grid; grid-template-columns:1fr auto; align-items:end; gap:0 clamp(8px,1.4vw,20px)}
#s05 .s05-glyph{grid-column:1; grid-row:1; width:100%; max-width:270px; aspect-ratio:758/1200; --glyph-ar:758/1200; justify-self:end; margin:0}
#s05 .s05-lb{grid-column:2; grid-row:1; align-self:center; max-width:12.5em; transform:rotate(-2deg)}
#s05 .lb{margin:0; font:400 clamp(2.1rem,3.4vw,3.2rem)/1.1 "Noto Sans Linear B", var(--f-greek); color:var(--ink); letter-spacing:.06em; white-space:nowrap}
#s05 .s05-lb-gloss{margin:.25em 0 0; font-size:1.05em}
#s05 .s05-lb-hand{margin:.35em 0 0; font-size:1.25em}
#s05 .s05-hero .splat{position:absolute; z-index:-1}

/* fact-check card */
#s05 .s05-check{grid-column:8/13; grid-row:4; margin-top:clamp(4px,1vw,14px)}
#s05 .s05-check p{margin:.45em 0}
#s05 .s05-check b{color:var(--ink); font-weight:600}
#s05 .s05-check i{color:var(--ink)}

/* the reel: a horizontally scrolling torn-paper strip */
#s05 .s05-reel{grid-column:1/-1; grid-row:5; margin-top:clamp(18px,3vw,40px); min-width:0}
#s05 .s05-reel-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 .2em}
#s05 .s05-reel-head .hand{margin:0}
#s05 .s05-reel-btns{display:flex; gap:6px; flex:none}
#s05 .s05-reel-btns button{font:400 1.1rem/1 var(--f-mono); color:var(--ink-soft); background:transparent; border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); border-radius:50%; width:36px; height:36px; cursor:pointer}
#s05 .s05-reel-btns button:hover:not(:disabled){color:var(--rust); border-color:var(--rust)}
#s05 .s05-reel-btns button:disabled{opacity:.3; cursor:default}
#s05 .s05-strip{--h:clamp(180px,27vh,250px); position:relative; display:flex; align-items:flex-start; gap:clamp(14px,1.6vw,26px);
  overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scroll-padding-inline:8px;
  padding:22px 8px 26px; margin:0 -8px; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--ink) 30%,transparent) transparent;
  background:linear-gradient(180deg,transparent calc(var(--h)*.5 + 20px),color-mix(in srgb,var(--ink) 16%,transparent) calc(var(--h)*.5 + 20px),color-mix(in srgb,var(--ink) 16%,transparent) calc(var(--h)*.5 + 21px),transparent calc(var(--h)*.5 + 21px))}
#s05 .s05-strip:focus-visible{outline:1px dashed var(--rust); outline-offset:2px}
#s05 .s05-strip > figure{flex:none; width:min-content; margin:0; scroll-snap-align:start}
#s05 .s05-strip > figure > img{height:var(--h); width:auto; max-width:none}
#s05 .s05-strip > figure:nth-child(odd){margin-top:12px}
#s05 .s05-strip figcaption{font-size:.66rem; line-height:1.4; min-width:15em}
#s05 .s05-strip figcaption b{color:var(--ink); font-weight:500}
#s05 .s05-strip figcaption i{color:var(--ink-soft)}
#s05 .s05-strip .term{font-size:1.12em}
#s05 .s05-own figcaption i{color:var(--cobalt); font-style:normal}

/* era tabs: a strip of tape with a date */
#s05 .s05-era{flex:none; align-self:center; display:flex; flex-direction:column; gap:.3em; width:7.5em; padding:1em .6em; scroll-snap-align:start;
  background:color-mix(in srgb,var(--paper-shade) 55%,transparent); transform:rotate(-3deg); box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 10%,transparent)}
#s05 .s05-era:nth-of-type(even){transform:rotate(2.5deg)}
#s05 .s05-era b{font:400 1.45rem/1 var(--f-display); color:var(--rust)}
#s05 .s05-era span{font:500 .62rem/1.3 var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft)}
#s05 .s05-era-end b{color:var(--cobalt)}

@media (max-width:900px){
  #s05 .s05-notes{grid-column:1/-1; grid-row:auto}
  #s05 .s05-hero{grid-column:1/-1; grid-row:auto; grid-template-columns:minmax(0,1fr) minmax(0,1fr); max-width:520px}
  #s05 .s05-glyph{max-width:240px}
  #s05 .s05-check{grid-column:1/-1; grid-row:auto}
  #s05 .s05-reel{grid-row:auto}
  #s05 .s05-strip{--h:210px}
  #s05 .s05-reel-head{flex-wrap:wrap}
}
@media (max-width:480px){
  #s05 .s05-lb{max-width:none}
  #s05 .lb{font-size:2rem}
  #s05 .s05-strip figcaption{min-width:13em}
}