/* The saga reader (specs/021): the story reads like film subtitles over a sticky stage of the village.
   Cream serif type straight on the scene; a fixed, feathered band (#storyScrim) between stage and text keeps
   it readable. Without the stage (reduced motion, no WebGL, a failed stage) the page is that band colour, still. */
html{background:#121e16}
body.saga-page{
  --band:18 30 22; /* the palette's text green (#354739) taken down to near black */
  --cream:#f4efe2;--quiet:#d3ccba;--warm:#d9bc96;--warm-hi:#efd9b6;
  --sub-shadow:0 1px 2px rgb(0 0 0/.6),0 0 18px rgb(0 0 0/.35);
  --col:min(34rem,calc(100vw - 40px));--col-left:auto;
  --bleed-l:calc((100% - 100vw) / 2);--bleed-r:calc((100% - 100vw) / 2); /* a full-width layer from the column */
  font:17px/1.65 'DM Sans',sans-serif;background:rgb(var(--band));color:var(--cream);overflow-x:hidden}
#storyStage{position:fixed;inset:0;z-index:0;background:#cbdcc3}
#storyStage:empty{display:none}
#storyStage>canvas{display:block;width:100%!important;height:100%!important}
#storyScrim{display:none}
#beats{position:relative;z-index:2;width:var(--col);margin:0 auto;padding:10vh 0 14vh}

/* type */
.beat-text,.saga-hook,.saga-title,.saga-previously p,.saga-loading,.saga-empty p{font-family:'DM Serif Display',Georgia,serif;color:var(--cream);text-shadow:var(--sub-shadow)}
.beat-text{font-size:1.15rem;line-height:1.7;margin:0}
.saga-loading,.saga-empty p{font-size:22px;line-height:1.5}
.saga-empty{min-height:70vh;display:grid;align-content:center;gap:18px}
.saga-kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--quiet)}
.saga-title{font-weight:400;font-size:clamp(34px,7vw,58px);line-height:1.1;margin:12px 0 8px}
.saga-date{color:var(--warm);font-size:14px;letter-spacing:.5px}
.saga-previously{margin-top:24px}
.saga-previously h2{font:italic 14px/1.4 'DM Sans',sans-serif;color:var(--quiet);margin-bottom:4px}
.saga-previously p{font-style:italic;font-size:1.1rem;line-height:1.6}
.saga-scroll-hint{margin-top:26px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--cream)}
.saga-scroll-hint:after{content:' ↓'}
.saga-head{position:relative;margin-bottom:12vh}
.beat{margin:0 0 2.2em}
.saga-end{position:relative;margin-top:12vh}
.saga-hook{font-style:italic;font-size:1.3rem;line-height:1.6}
.saga-next-note{margin-top:12px;color:var(--quiet);font-size:14px}
.saga-pager{display:flex;justify-content:space-between;gap:14px;margin:26px 0 4px}
.saga-pager a[rel=next]{margin-left:auto}
.saga-page a{color:var(--warm);text-underline-offset:3px}
.saga-page a:hover{color:var(--warm-hi)}
.saga-page a:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:3px}
.saga-archive{margin-top:30px;padding-top:20px;border-top:1px solid rgb(244 239 226/.18)}
.saga-archive h2{font-size:22px;color:var(--cream);margin-bottom:12px}
.saga-archive ol{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.saga-archive a{text-decoration:none}
.saga-archive a:hover strong,.saga-archive a:focus-visible strong{text-decoration:underline}
.saga-archive a[aria-current=page] strong{color:var(--cream)}
.saga-archive-date{font-size:12px;color:var(--quiet);font-variant-numeric:tabular-nums;margin-right:6px}
.saga-archive strong{font:400 18px 'DM Serif Display',Georgia,serif}
.saga-archive li p{font-size:14px;color:var(--quiet);margin-top:2px}
.saga-home{display:inline-block;margin-top:24px;font-size:14px}

/* Story mode (has-stage, set before the episode renders): the band, subtitles stuck low on the screen, sentences
   fading in (story-reader.js sets --o per sentence, --fade per beat (opacity only), --on and --solid on the band;
   all scroll-linked). Until the stage has loaded the page is the calm band colour; then it fades in (stage-ready). */
.has-stage #beats{padding:0}
.has-stage #storyStage{opacity:0;transition:opacity .6s ease}
.stage-ready #storyStage{opacity:1}
.has-stage #storyScrim{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--on,0);
  background:linear-gradient(to top,rgb(var(--band)/.8) 0,rgb(var(--band)/.72) calc(var(--solid,45%) * .55),rgb(var(--band)/.66) var(--solid,45%),rgb(var(--band)/0) calc(var(--solid,45%) + 15%))}
/* One screen: as the title leaves, the first beat's first sentence rises in. */
.has-stage .saga-head{min-height:100vh;margin:0;padding-top:10vh}
.has-stage .saga-head-inner{position:relative}
.has-stage .saga-head-inner:before{content:'';position:absolute;z-index:-1;left:var(--bleed-l);right:var(--bleed-r);top:-10vh;bottom:-30vh;pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--band)/.8),rgb(var(--band)/.72) calc(100% - 30vh),rgb(var(--band)/0))}
/* A beat is as long as its sentences (--n, set per beat): about a quarter of a screen of scroll a sentence, and the
   whole subtitle then holds HOLD (.4) of a screen before it rises (story-reader.js revealEndFor). */
.has-stage .beat{min-height:calc(var(--n,6) * 18vh + 72vh);display:flex;flex-direction:column;justify-content:flex-end;margin:0 0 10vh}
/* top: a text taller than the window keeps its first lines in view (top wins over bottom) and scrolls on. */
.has-stage .beat-text{position:sticky;top:8px;bottom:calc(max(6vh,28px) + env(safe-area-inset-bottom,0px));opacity:var(--fade,1)}
/* Before the first scroll frame sets --o, only a beat's first sentence shows, as the reveal would. */
.has-stage .beat-sentence{opacity:var(--o,0)}
.has-stage .beat-sentence:first-child{opacity:var(--o,1)}
.has-stage .saga-end{margin:0;padding:30vh 0 12vh}
.has-stage .saga-end:before{content:'';position:absolute;z-index:-1;left:var(--bleed-l);right:var(--bleed-r);top:0;bottom:0;pointer-events:none;
  background:linear-gradient(to bottom,rgb(var(--band)/0),rgb(var(--band)/.9) 26vh)}

/* Wide screens: the text keeps to a left column and the band comes from the left, so the subject that
   story-stage.js frames at 70 % of the width (same 1000px) stays in the clear. */
@media(min-width:1000px){
  body.saga-page{--col-left:max(4vw,32px)}
  .has-stage .saga-head,.has-stage .saga-end{--bleed-l:calc(-1 * var(--col-left));--bleed-r:calc(100% + var(--col-left) - 100vw)}
  .beat-text{font-size:1.3rem}
  .saga-hook{font-size:1.45rem}
  .has-stage #beats{--col:min(34rem,44vw);margin-left:var(--col-left)}
  .has-stage #storyScrim{--edge:calc(var(--col-left) + min(34rem,44vw) + 1rem);
    background:linear-gradient(to right,rgb(var(--band)/.78) 0,rgb(var(--band)/.7) calc(var(--edge) * .6),rgb(var(--band)/.66) var(--edge),rgb(var(--band)/0) calc(var(--edge) + 12vw))}
  .has-stage .beat-text{bottom:14vh}
}
@media(min-width:1000px) and (max-height:540px){.has-stage .beat-text{bottom:4vh}}
@media(prefers-reduced-motion:reduce){#storyStage,#storyScrim{display:none}}