/* Odyssey — base design system. Owned by the coordinator. Slide CSS lives in slides/sNN.css, scoped under #sNN.
   paper.css (aesthetics agent) loads AFTER this file and may override the fallback masks/textures below. */
:root{
  --paper:#f2e8d5; --paper-deep:#e7d8ba; --paper-shade:#d9c6a0; --paper-light:#f8f2e4;
  --ink:#221c16; --ink-soft:#4b4036; --ink-faint:#8a7a66;
  --rust:#a2412a;   /* red-figure terracotta — primary accent */
  --cobalt:#2a44a0; /* glyph-animation accent (echo of the reference video) */
  --gold:#a8833a;
  --f-display:"IM Fell English", "EB Garamond", Georgia, serif;
  --f-body:"EB Garamond", Georgia, serif;
  --f-greek:"GFS Didot", "Gentium Book Plus", "EB Garamond", serif;
  --f-hand:"Caveat", "Segoe Print", cursive;
  --f-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --maxw:1320px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-snap-type:y proximity}
body{margin:0; background:var(--paper); color:var(--ink); font:400 clamp(17px,1.25vw,21px)/1.5 var(--f-body);
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:var(--rust); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
a:hover{color:var(--ink)}
img{max-width:100%; display:block}

/* ---------- slide skeleton ---------- */
.slide{position:relative; min-height:100vh; padding:clamp(56px,9vh,110px) var(--gutter) clamp(56px,9vh,110px); scroll-snap-align:start; isolation:isolate}
.slide-inner{position:relative; max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:clamp(16px,2vw,32px); align-items:start}
.slide-num{grid-column:1/-1; font:500 .78rem/1 var(--f-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}
.slide-num b{font:400 1.25rem/1 var(--f-greek); color:var(--rust); letter-spacing:0; margin-right:.6em; text-transform:none}
.slide-title{grid-column:1/-1; margin:.1em 0 .35em; font:400 clamp(2.4rem,5.6vw,5.4rem)/.98 var(--f-display); letter-spacing:-.01em}
.slide-title em{font-style:italic; color:var(--rust)}
.kicker{font:italic 400 clamp(1.1rem,1.6vw,1.45rem)/1.35 var(--f-body); color:var(--ink-soft)}

/* note-form bullet lists: the owner's words */
.notes{list-style:none; margin:0; padding:0}
.notes > li{position:relative; padding:.38em 0 .38em 1.5em; border-bottom:1px dashed color-mix(in srgb,var(--ink) 18%,transparent)}
.notes > li::before{content:"—"; position:absolute; left:0; color:var(--rust)}
.notes li ul{list-style:none; padding-left:1.1em; margin:.25em 0 0; font-size:.93em; color:var(--ink-soft)}
.notes li ul li::before{content:"· "; color:var(--rust)}
.notes strong{font-weight:600}
.term{font-family:var(--f-greek); font-style:normal; color:var(--rust)} /* transliterated or Greek terms inline */
.cf{font-variant:small-caps; letter-spacing:.04em; color:var(--ink-faint)}

/* marginalia: comment-derived expansions, pinned scraps */
.margin{font-size:.86em; line-height:1.45; color:var(--ink-soft)}
.margin h4{margin:0 0 .3em; font:600 .72rem/1.2 var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--rust)}
.hand{font-family:var(--f-hand); font-size:1.35em; line-height:1.15; color:var(--cobalt)}

/* Greek + English quotation */
.quote{margin:0; padding:.2em 0 .2em 1em; border-left:2px solid var(--rust)}
.quote .gr{font:400 1.18em/1.45 var(--f-greek); color:var(--ink); margin:0 0 .35em}
.quote .en{font-style:italic; color:var(--ink-soft); margin:0}
.quote cite{display:block; margin-top:.4em; font:500 .7rem/1.3 var(--f-mono); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.quote cite a{color:inherit}
.flow-src{} /* exactly one per slide; the next slide's hero glyph pours these characters down */

/* figures */
figure{margin:0}
figcaption, .credit{margin-top:.45em; font:400 .68rem/1.35 var(--f-mono); letter-spacing:.04em; color:var(--ink-faint)}
figcaption a, .credit a{color:inherit}
.scrap{position:relative; background:var(--paper-light); padding:10px; box-shadow:0 1px 0 rgba(0,0,0,.04), 0 10px 26px -14px rgba(60,40,10,.45)}
.scrap > img, .scrap > video{width:100%; height:auto}
.cutout{filter:drop-shadow(0 14px 18px rgba(50,30,10,.28)) sepia(.12)}
.rot-l{transform:rotate(-2.2deg)} .rot-r{transform:rotate(1.8deg)} .rot-l2{transform:rotate(-4.5deg)} .rot-r2{transform:rotate(4deg)}
.tape{position:relative}
.tape::after{content:""; position:absolute; top:-12px; left:50%; width:96px; height:26px; transform:translateX(-50%) rotate(-3deg);
  background:color-mix(in srgb,var(--paper-shade) 70%,transparent); box-shadow:0 1px 2px rgba(0,0,0,.08); opacity:.85}

/* fallback torn / blot masks (paper.css replaces these with hand-made SVG masks) */
[class*="torn-"]{clip-path:polygon(0 3%,7% 0,15% 2%,24% .5%,33% 2.5%,45% 0,57% 2%,68% .4%,79% 2.6%,90% .5%,100% 2%,99% 14%,100% 29%,98.6% 44%,100% 58%,99% 73%,100% 88%,98.5% 100%,86% 98%,74% 100%,61% 98.4%,49% 100%,37% 98%,25% 99.6%,13% 97.8%,2% 100%,0 86%,1.2% 71%,0 57%,1.4% 42%,0 28%,1% 14%)}
[class*="blot-"]{border-radius:46% 54% 41% 59% / 52% 44% 56% 48%}

/* lazy video facade (YouTube) — core.js swaps in the iframe on click */
.clip{position:relative; aspect-ratio:16/9; background:#1b1611 center/cover no-repeat; cursor:pointer; overflow:hidden}
.clip.short{aspect-ratio:9/16; max-width:340px}
.clip::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(20,14,8,.7))}
.clip .play{position:absolute; left:50%; top:50%; width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%; border:1.5px solid var(--paper); display:grid; place-items:center; color:var(--paper); font-size:22px; transition:transform .3s}
.clip:hover .play{transform:scale(1.08)}
.clip .clip-title{position:absolute; left:14px; bottom:10px; right:14px; color:var(--paper); font:italic 400 1rem/1.25 var(--f-body)}
.clip iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* reveal */
[data-reveal]{opacity:0; transform:translateY(14px); filter:blur(3px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1), filter .9s ease}
[data-reveal].in{opacity:1; transform:none; filter:none}
@media (prefers-reduced-motion:reduce){ [data-reveal]{opacity:1; transform:none; filter:none; transition:none} html{scroll-behavior:auto} }

/* side rail */
.rail{position:fixed; right:14px; top:50%; transform:translateY(-50%); z-index:50; display:flex; flex-direction:column; gap:6px}
.rail a{font:400 .9rem/1 var(--f-greek); color:var(--ink-faint); text-decoration:none; text-align:center; width:26px; padding:3px 0}
.rail a.on{color:var(--rust)}
@media (max-width:820px){
  .rail{display:none}
  .slide-inner > *{grid-column:1/-1 !important}
  .slide-inner .stack-mobile{transform:none}
}