/* Slide 11 — Odysseus and James Bond. Scoped to #s11. */
#s11 .s11-notes{grid-column:1/8; grid-row:3/5}
#s11 .s11-hero{grid-column:8/13; grid-row:3; position:relative; margin-top:-1.5rem}
#s11 .s11-hero .glyph{--glyph-ar:1400/1086; aspect-ratio:1400/1086}
#s11 .s11-leaf{margin:.6rem 0 0 1.2rem; transform:rotate(-2deg); max-width:22em}

#s11 .s11-h{grid-column:1/-1; margin:2.4rem 0 0; font:400 clamp(1.7rem,3vw,2.6rem)/1.05 var(--f-display); border-top:1px solid color-mix(in srgb,var(--ink) 20%,transparent); padding-top:1.1rem}
#s11 .s11-h em{color:var(--rust)}

/* the scene: clip left, Homer right */
#s11 .s11-bond{grid-column:1/5; position:relative}
#s11 .s11-bond .torn-mat{max-width:320px}
#s11 .s11-beats{list-style:none; margin:1.2rem 0 0; padding:0; font:400 .78rem/1.45 var(--f-mono); color:var(--ink-soft); counter-reset:b}
#s11 .s11-beats li{padding:.18em 0 .18em 1.6em; position:relative; counter-increment:b}
#s11 .s11-beats li::before{content:counter(b,decimal-leading-zero); position:absolute; left:0; color:var(--rust)}
#s11 .s11-beats li:last-child{font:italic 400 1.05rem/1.3 var(--f-body); color:var(--ink)}
#s11 .s11-martini{position:absolute; right:-.5rem; top:30%; width:72px; transform:rotate(9deg); fill:none; stroke:var(--ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
#s11 .s11-martini .liq{fill:color-mix(in srgb,var(--cobalt) 16%,transparent); stroke:none}
#s11 .s11-martini .olive{fill:var(--rust); stroke:none}
#s11 .s11-shaken{margin:.9rem 0 0; transform:rotate(-1.5deg); color:var(--cobalt)}
#s11 .s11-shaken .term{font-size:.8em; color:var(--rust)}

#s11 .s11-od{grid-column:5/13; display:grid; gap:.55rem}
#s11 .s11-step{margin:.4rem 0 0; font:500 .72rem/1 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rust)}
#s11 .s11-step span{display:inline-grid; place-items:center; width:1.7em; height:1.7em; margin-right:.5em; border:1px solid var(--rust); border-radius:50%; letter-spacing:0}
#s11 .s11-od .quote .gr{font-size:1.08em}
#s11 .s11-od .quote .en{font-size:.95em}
#s11 .s11-od .quote .en b{font-weight:600; color:var(--ink)}
#s11 .s11-od mark{background:linear-gradient(transparent 58%, color-mix(in srgb,var(--rust) 26%,transparent) 58%, color-mix(in srgb,var(--rust) 26%,transparent) 92%, transparent 92%); color:inherit; padding:0 .08em}
#s11 .s11-od mark.flow-src{background:linear-gradient(transparent 58%, color-mix(in srgb,var(--cobalt) 22%,transparent) 58%, color-mix(in srgb,var(--cobalt) 22%,transparent) 92%, transparent 92%)}
#s11 .s11-aside{margin:0 0 0 1.1rem; font-size:.86em; color:var(--ink-soft)}
#s11 .s11-alc{margin-left:2.2rem; border-left-style:dashed}

/* real Bonds */
#s11 .s11-lede{grid-column:1/-1; margin:0; font:italic 400 1.05em/1.45 var(--f-body); color:var(--ink-soft); max-width:62em}
#s11 .s11-gus{grid-column:1/4; max-width:270px; justify-self:start; margin-top:.6rem}
#s11 .s11-fleming{grid-column:10/13; max-width:270px; justify-self:end; margin-top:3.2rem}
#s11 .s11-ledger{grid-column:4/10; list-style:none; margin:0; padding:0; font-size:.9em; line-height:1.45}
#s11 .s11-ledger li{position:relative; padding:.7em 0 .7em 7.6em; border-bottom:1px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
#s11 .s11-ledger .v{position:absolute; left:0; top:.85em; width:auto; min-width:6.6em; text-align:center; font:500 .6rem/1 var(--f-mono); letter-spacing:.1em; padding-inline:.5em; text-transform:uppercase; padding-block:.42em; border:1.5px solid currentColor; border-radius:2px; transform:rotate(-4deg)}
#s11 .s11-ledger .v.ok{color:var(--ink)}
#s11 .s11-ledger .v.arg{color:var(--rust)}
#s11 .s11-ledger .v.sp{color:var(--ink-faint); border-style:dashed}
#s11 .s11-ledger .fc{display:block; margin-top:.3em; font-size:.92em; color:var(--ink-faint)}

@media (max-width:820px){
  #s11 .s11-notes, #s11 .s11-hero{grid-row:auto}
  #s11 .s11-hero{margin-top:0}
  #s11 .s11-bond .torn-mat{margin:0 auto}
  #s11 .s11-martini{right:.4rem; top:auto; bottom:-.4rem; width:46px}
  #s11 .s11-alc{margin-left:1rem}
  #s11 .s11-gus, #s11 .s11-fleming{justify-self:center; margin-top:.5rem; max-width:240px}
  #s11 .s11-ledger li{padding-left:0; padding-top:2.2em}
  #s11 .s11-ledger .v{top:.6em}
}