/* ======================================================
   Sayonara_Alice.exe — v93_story_reading.css
   The five-chapter editorial reading of story.html.
   ------------------------------------------------------
   Depends on v92_pages_shell.css for tokens and on the v71
   reveal contract. Everything here is namespaced .story-*
   and touches no existing selector.

   The text is the protagonist: the ambient work is limited
   to hairlines, one thread per chapter that fills with the
   reading, and a handful of blue marks. Without JavaScript
   the page is complete and every thread is already full.
====================================================== */

/* ------------------------------------------------------
   1. Reading shell
------------------------------------------------------ */

.story-read {
  width: min(var(--page-max), 100%);
  margin: clamp(2.4rem, 6vw, 4.5rem) auto 0;
  padding-inline: clamp(1.1rem, 5vw, 4rem);
}

.story-chapters {
  display: block;
}

/* ------------------------------------------------------
   2. Chapter grid
   Left rail (numeral + thread + glyph) and a reading column
   with a controlled measure. The rail is sticky per chapter,
   so the marker follows the reading without a global HUD.
------------------------------------------------------ */

.story-chapter {
  --chapter-progress: 1;
  display: grid;
  grid-template-columns: clamp(3.4rem, 7vw, 7.5rem) minmax(0, 1fr);
  column-gap: clamp(1rem, 3vw, 2.8rem);
  padding-block: clamp(2.4rem, 5.5vw, 4.6rem);
}

.story-chapter + .story-chapter,
.story-interlude + .story-chapter {
  border-top: 1px solid rgba(0, 220, 255, .09);
}

.story-rail {
  position: sticky;
  top: clamp(84px, 13vh, 132px);
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding-top: .35rem;
  height: max-content;
}

.story-numeral {
  color: rgba(158, 244, 255, .5);
  font: 700 .74rem/1 var(--page-mono);
  letter-spacing: .22em;
  transition: color .5s ease, text-shadow .5s ease;
}

.story-chapter.is-active .story-numeral {
  color: rgba(205, 248, 255, .95);
  text-shadow: 0 0 14px rgba(0, 220, 255, .5);
}

/* The thread fills with the reading progress of its own chapter.
   Default is 1 (full): without JavaScript nothing looks unfinished. */
.story-thread {
  display: block;
  width: 1px;
  height: clamp(46px, 7vw, 92px);
  background: rgba(0, 220, 255, .10);
  overflow: hidden;
}

.story-thread i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--page-hair-strong), rgba(64, 114, 255, .14));
  transform: scaleY(var(--chapter-progress));
  transform-origin: top center;
  transition: transform .35s linear;
}

.story-glyph {
  color: rgba(158, 244, 255, .42);
  font-size: .82rem;
  line-height: 1;
  text-shadow: 0 0 12px rgba(0, 220, 255, .3);
  transition: color .5s ease, transform .6s var(--page-ease);
}

.story-chapter.is-active .story-glyph {
  color: rgba(190, 250, 255, .82);
  transform: translateY(2px);
}

.story-body {
  max-width: var(--page-measure);
}

/* ------------------------------------------------------
   3. Editorial typography
------------------------------------------------------ */

.story-title {
  margin: 0 0 clamp(1.3rem, 2.6vw, 2rem);
  color: var(--sa-text, #effcff);
  font-family: var(--page-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.story-body p {
  margin: 0 0 1.5em;
  color: var(--page-ink-soft);
  font-family: var(--page-serif);
  font-size: clamp(1.02rem, 1.05vw, 1.14rem);
  line-height: 1.86;
  letter-spacing: .003em;
}

.story-body p:last-child {
  margin-bottom: 0;
}

/* Opening line of a chapter: same weight, more air. Selectors stay
   one step more specific than `.story-body p`, so no !important. */
.story-body p.story-lead {
  margin-bottom: 1.9em;
  color: var(--page-ink);
  font-size: clamp(1.16rem, 1.6vw, 1.42rem);
  line-height: 1.6;
}

/* Short sentences that live alone in the text. They keep their own
   breath and are never absorbed into the paragraph above. */
.story-body p.story-standalone {
  margin-top: 2.4em;
  margin-bottom: 2.4em;
  color: var(--page-ink);
  font-size: clamp(1.1rem, 1.45vw, 1.3rem);
  line-height: 1.55;
}

/* Title of the unpublished novel: system glyphs, never an image. */
.story-novel {
  font-family: var(--page-mono);
  font-style: normal;
  font-size: .94em;
  color: rgba(180, 245, 255, .95);
  letter-spacing: .02em;
  text-shadow: 0 0 14px rgba(0, 220, 255, .3);
  white-space: nowrap;
}

/* ------------------------------------------------------
   4. Highlighted quotes — sober, never a social card
------------------------------------------------------ */

.story-quote {
  position: relative;
  margin: clamp(2.4rem, 5vw, 3.6rem) 0;
  padding-left: clamp(1rem, 2.2vw, 1.7rem);
}

.story-quote::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: linear-gradient(180deg, var(--page-hair-strong), rgba(64, 114, 255, .12));
  transform: scaleY(1);
  transform-origin: top center;
  transition: transform 1.1s var(--page-ease) .1s;
}

.story-quote.v71-reveal-pending::before {
  transform: scaleY(0);
}

.story-body .story-quote p {
  margin: 0 0 .85em;
  color: var(--page-ink);
  font-size: clamp(1.14rem, 1.7vw, 1.44rem);
  line-height: 1.62;
}

.story-body .story-quote p:last-child {
  margin-bottom: 0;
}

/* Closing of the whole reading. */
.story-closing {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 3.5vw, 2.6rem);
  border-top: 1px solid rgba(0, 220, 255, .14);
}

.story-body .story-closing p {
  color: var(--page-ink);
  font-size: clamp(1.1rem, 1.55vw, 1.34rem);
  line-height: 1.68;
}

.story-body .story-closing p.story-standalone {
  margin-top: 1.9em;
  margin-bottom: 0;
  font-size: clamp(1.14rem, 1.7vw, 1.44rem);
}

/* ------------------------------------------------------
   5. Chapter identities
   Five chapters, five rhythms — one language, no repeated
   boxes.
------------------------------------------------------ */

/* I. The novel. */
.story-chapter--01 .story-title {
  font-size: clamp(1.75rem, 3.3vw, 2.65rem);
}

/* II and IV breathe further into the page. */
.story-chapter--02 .story-body,
.story-chapter--04 .story-body {
  margin-left: clamp(0px, 3.4vw, 3rem);
}

/* II. Many forms: the thread splits into three. */
.story-chapter--02 .story-thread {
  width: 5px;
  background:
    linear-gradient(180deg, rgba(0, 220, 255, .10), transparent) 0 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(0, 220, 255, .10), transparent) 2px 0 / 1px 100% no-repeat,
    linear-gradient(180deg, rgba(0, 220, 255, .10), transparent) 4px 0 / 1px 100% no-repeat;
}

.story-chapter--02 .story-thread i {
  width: 1px;
  margin-left: 2px;
}

/* III. The author: a margin note, like a page annotated by hand. */
.story-chapter--03 .story-body {
  border-left: 1px solid rgba(0, 220, 255, .12);
  padding-left: clamp(1rem, 2.4vw, 2rem);
  max-width: calc(var(--page-measure) - 2ch);
}

.story-chapter--03 .story-title {
  font-style: italic;
}

/* IV. The open door: two thin uprights framing the rail. */
.story-chapter--04 .story-rail::before,
.story-chapter--04 .story-rail::after {
  content: "";
  position: absolute;
  top: 1.7rem;
  bottom: -.4rem;
  width: 1px;
  background: linear-gradient(180deg, rgba(0, 220, 255, .26), transparent);
  pointer-events: none;
}

.story-chapter--04 .story-rail::before { left: -.9rem; }
.story-chapter--04 .story-rail::after  { left: 1.5rem; }

/* V. The Codex: one quiet grid behind the reading column. */
.story-chapter--05 {
  position: relative;
  isolation: isolate;
}

/* The grid stays inside the chapter box: a horizontal bleed would widen
   the document past the viewport. The mask already softens the edges. */
.story-chapter--05::before {
  content: "";
  position: absolute;
  inset: clamp(1rem, 3vw, 2.4rem) 0 auto 0;
  height: min(560px, 74%);
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(0, 220, 255, .05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 220, 255, .035) 1px, transparent 1px);
  background-size: 74px 74px;
  mask-image: radial-gradient(ellipse at 30% 30%, black, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, black, transparent 70%);
  opacity: .5;
}

.story-chapter--05 .story-glyph {
  color: rgba(190, 250, 255, .66);
}

/* ------------------------------------------------------
   6. Interlude — the creative-process image, mid reading
   Sits between chapter II and chapter III: the passage from
   the many forms of Alice to the person behind them.
------------------------------------------------------ */

.story-interlude {
  margin: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(1rem, 2vw, 2rem);
}

.story-interlude .page-figure {
  --figure-ratio: 16 / 9;
}

/* Ambient depth: the halo drifts a little against the scroll.
   Driven by --page-parallax, which only exists when the pages
   module runs and motion is allowed. It bleeds vertically only:
   a horizontal bleed would push the document wider than the
   viewport on narrow screens. */
.story-interlude-glow {
  position: absolute;
  inset: -16% 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 170, 255, .16), transparent 66%);
  transform: translate3d(0, calc(var(--page-parallax, 0) * 26px), 0);
  opacity: .8;
}

.story-interlude-frame {
  position: relative;
  isolation: isolate;
}

.story-interlude-caption {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-top: .95rem;
  color: rgba(158, 244, 255, .58);
  font: 700 .66rem/1.3 var(--page-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.story-interlude-caption i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(0, 220, 255, .3), transparent);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform 1.2s var(--page-ease) .2s;
}

.story-interlude.v71-reveal-pending .story-interlude-caption i {
  transform: scaleX(0);
}

/* ------------------------------------------------------
   7. Tablet
------------------------------------------------------ */

@media (max-width: 1024px) {
  .story-read {
    --page-measure: 55ch;
  }

  .story-chapter--02 .story-body,
  .story-chapter--04 .story-body {
    margin-left: 0;
  }
}

/* ------------------------------------------------------
   8. Mobile — one linear column
   The rail stops being a column and becomes a small marker
   above the chapter title. Nothing sticky, nothing that
   steals reading space.
------------------------------------------------------ */

@media (max-width: 760px) {
  .story-read {
    --page-measure: 100%;
    padding-inline: 1.15rem;
  }

  .story-chapter {
    grid-template-columns: minmax(0, 1fr);
    row-gap: .9rem;
    padding-block: clamp(2.1rem, 8vw, 3.2rem);
  }

  .story-rail {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: .7rem;
    padding-top: 0;
  }

  .story-thread {
    width: clamp(38px, 22vw, 96px);
    height: 1px;
  }

  .story-thread i {
    transform: scaleX(var(--chapter-progress));
    transform-origin: left center;
  }

  .story-chapter--02 .story-thread {
    width: clamp(38px, 22vw, 96px);
    height: 3px;
    background:
      linear-gradient(90deg, rgba(0, 220, 255, .10), transparent) 0 0 / 100% 1px no-repeat,
      linear-gradient(90deg, rgba(0, 220, 255, .10), transparent) 0 2px / 100% 1px no-repeat;
  }

  .story-chapter--02 .story-thread i {
    width: 100%;
    height: 1px;
    margin-left: 0;
  }

  .story-chapter--03 .story-body {
    border-left: 0;
    padding-left: 0;
  }

  .story-chapter--04 .story-rail::before,
  .story-chapter--04 .story-rail::after {
    display: none;
  }

  .story-chapter--05::before {
    inset: 0;
    background-size: 54px 54px;
  }

  .story-body p {
    line-height: 1.8;
  }

  .story-quote {
    padding-left: .95rem;
  }

  /* The interlude goes edge to edge too — complete image, full width. */
  .story-interlude .page-figure {
    margin-inline: -1.15rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
}

/* ------------------------------------------------------
   9. Reduced motion
------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .story-thread i,
  .story-quote::before,
  .story-interlude-caption i,
  .story-glyph,
  .story-interlude-glow {
    transition: none !important;
    transform: none !important;
  }

  .story-thread i {
    transform: scaleY(1) !important;
  }
}

/* ===========================================================
   v96 — STORY · MEMORIA A STRATI
   Blocco additivo. Tutto e' agganciato a body[data-page="story"]
   o alle media query mobile: rimuovendo questo blocco, oppure
   l'attributo data-page, la pagina torna esattamente al
   comportamento precedente.
   Nessun contenuto, nessuna chiave i18n, nessun nodo spostato.
   =========================================================== */

/* -----------------------------------------------------------
   1. Misura di riga
   La colonna era 283px a 320px con corpo a 16.32px: 35 caratteri
   per riga, sotto la soglia di comfort (45-75). Il lead, piu'
   grande del corpo, scendeva a 30. Si recuperano caratteri da due
   parti: meno padding laterale e corpo leggermente piu' piccolo,
   con il lead riportato vicino al corpo invece che sopra.
   ----------------------------------------------------------- */
@media (max-width: 760px) {
  .story-read {
    padding-inline: clamp(.75rem, 3.6vw, 1.15rem);
  }

  .story-body p {
    font-size: clamp(.94rem, 4vw, 1.06rem);
    line-height: 1.78;
    margin-bottom: 1.62em;
  }

  .story-body p.story-lead {
    font-size: clamp(1rem, 4.3vw, 1.16rem);
    line-height: 1.7;
    margin-bottom: 1.5em;
  }

  /* Il testo non deve mai perdere nitidezza: nessun blur, nessuna
     ombra sul corpo, rendering ottimizzato per la lettura lunga. */
  .story-body p,
  .story-title {
    filter: none;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* -----------------------------------------------------------
   2. Capitolo come tappa
   La pausa nasce dallo spazio prima dell'apertura, non da una
   copertina a piena schermata: a 320px cinque schermate vuote
   avrebbero allungato la pagina senza dare ritmo.
   ----------------------------------------------------------- */
@media (max-width: 760px) {
  .story-chapter {
    padding-block-start: clamp(3.2rem, 16vh, 7rem);
    padding-block-end: clamp(2.2rem, 7vw, 3.4rem);
    row-gap: 1.15rem;
  }

  .story-chapter:first-of-type {
    padding-block-start: clamp(2rem, 8vh, 3.4rem);
  }

  /* Il rail diventa la riga d'intestazione della tappa. */
  .story-rail {
    gap: .85rem;
    padding-bottom: .35rem;
  }

  .story-numeral {
    font-size: clamp(1.5rem, 7.5vw, 2.3rem);
    line-height: 1;
    letter-spacing: .04em;
  }

  .story-title {
    margin-top: .15rem;
    font-size: clamp(1.5rem, 7vw, 2.05rem);
    line-height: 1.2;
    margin-bottom: 1.1rem;
  }

  /* Stacco fra l'apertura della tappa e il corpo della lettura. */
  .story-body p.story-lead + p {
    margin-top: 1.35rem;
  }
}

/* -----------------------------------------------------------
   3. Separatore memoria fra capitoli
   Decorativo e non invasivo: appare una sola volta, non cicla,
   e non tocca il testo.
   ----------------------------------------------------------- */
body[data-page="story"] .story-chapter + .story-chapter {
  position: relative;
}

body[data-page="story"] .story-chapter + .story-chapter::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(190px, 46%);
  height: 1px;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 220, 255, .42), transparent);
  opacity: .75;
}

body[data-page="story"] .story-glyph {
  opacity: .62;
}

/* -----------------------------------------------------------
   4. Indicatore di progresso
   Il nodo esiste solo su story.html ed e' aria-hidden. Resta
   invisibile finche' v96_story_progress.js non lo attiva: senza
   JS, o con reduced-motion, la pagina si legge come prima.
   ----------------------------------------------------------- */
.story-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
  background: rgba(0, 220, 255, .10);
}

.story-progress.is-live {
  opacity: 1;
}

.story-progress i {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(var(--story-progress, 0));
  transform-origin: left center;
  transition: transform .25s ease-out;
  background: linear-gradient(90deg, rgba(0, 220, 255, .55), rgba(158, 244, 255, .9));
}

.story-progress b {
  position: absolute;
  top: 6px;
  right: 10px;
  font: 700 .62rem/1 "Courier New", monospace;
  letter-spacing: .16em;
  color: rgba(158, 244, 255, .62);
}

@media (min-width: 761px) {
  .story-progress b { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .story-progress,
  .story-progress.is-live {
    opacity: 0 !important;
  }

  body[data-page="story"] .story-chapter + .story-chapter::before {
    opacity: .5;
  }
}