/* ==========================================================================
   STORYBOOK — exhibition room. Loaded on a/storybook.html only.

   TIER 2. The room is a sequence of OPENINGS: full-viewport spreads, the
   painting on the verso, the passage on the recto, an ornamental initial
   opening every passage. Scroll is the page turn — the one evidenced motion
   in Batch D — done as sticky stacking plus CSS scroll-driven animation
   where supported, an IntersectionObserver class where not (st-io), and a
   plain, complete sequence of spreads under no-JS or reduced motion. The
   content is never gated: every opening is visible by default.

   Colour: the record says only "warm soft palette". Contrast for text/ground pairs introduced:
   - ink        #443228 on leaf #F6ECDC     10.4:1
   - ink        #443228 on slip #FBF4E7     11.1:1
   - ink-2      #6B5138 on leaf #F6ECDC      6.3:1  (folio, captions)
   - sienna     #8C4A26 on leaf #F6ECDC      5.8:1  (headings, frozen line)
   - ink        #443228 on initial wash #EDD6A8  8.5:1
   - cream      #FBF4E7 on dusk leaf #5C4434     8.2:1
   - cream-2    #F0DFC6 on dusk leaf #5C4434     6.9:1  (dusk folio/heading)
   - ink-2      #6B5138 on demo mat #E9DECB      5.5:1
   ========================================================================== */

@font-face {
  font-family: "Brygada X";
  src: url("fonts/brygada.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Brygada X";
  src: url("fonts/brygada-italic.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

.st-page {
  --st-leaf: #F6ECDC;
  --st-slip: #FBF4E7;
  --st-mat: #E3CCA6;
  --st-mat-2: #E9DECB;
  --st-ink: #443228;
  --st-ink-2: #6B5138;
  --st-sienna: #8C4A26;
  --st-wash: #EDD6A8;
  --st-frame: #B98354;
  --st-dusk: #5C4434;
  --st-cream: #FBF4E7;
  --st-cream-2: #F0DFC6;
  --st-serif: "Brygada X", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  background: var(--paper); /* shell mat; the room ground lives on main */
}
.st-page main {
  background: var(--st-mat);
  color: var(--st-ink);
  font-family: var(--st-serif);
}

/* Visually hidden text (the initial letter, spoken with its word). */
.st-sr {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---- the openings ------------------------------------------------------- */
.st-tale { position: relative; }

.st-opening {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 2.5vw, 2.25rem);
  background: var(--st-mat); /* opaque, so an incoming spread covers cleanly */
}

.st-leaf {
  position: relative;
  width: 100%;
  max-width: 74rem;
  min-height: calc(100svh - clamp(1.5rem, 5vw, 4.5rem));
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  background: var(--st-leaf);
  border-radius: 4px 10px 10px 4px;
  /* The closed pages beneath: stacked warm edges, our page-block device. */
  box-shadow:
    3px 3px 0 #E9DECB,
    6px 7px 0 #DBC49C,
    9px 11px 0 #C9AE82,
    12px 18px 34px -12px rgba(68, 50, 40, 0.45);
}

/* The painting takes the verso — the picture leads, always. */
.st-art {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 4px 0 0 4px;
  min-height: 100%;
}
.st-art svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

/* The recto: folio, small heading, one passage. */
.st-recto {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3.5vw, 3.25rem) clamp(1.25rem, 3vw, 3rem);
  min-width: 0;
}
/* The spine: a soft fold shadow where recto meets verso. */
.st-recto::before {
  content: "";
  position: absolute;
  inset-block: 0; left: 0;
  width: 2.75rem;
  background: linear-gradient(90deg, rgba(90, 64, 45, 0.22), rgba(90, 64, 45, 0) 85%);
  pointer-events: none;
}

.st-folio {
  margin: 0 0 0.5rem;
  font: 400 0.68rem/1.4 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--st-ink-2);
}
.st-h2 {
  margin: 0 0 1.4rem;
  font: italic 400 1.1rem/1.35 var(--st-serif);
  color: var(--st-sienna);
  letter-spacing: 0.01em;
}
.st-h1 {
  margin: 0 0 1rem;
  font: 400 clamp(2.4rem, 4.2vw, 3.5rem)/1.05 var(--st-serif);
  overflow-wrap: normal;
  word-break: normal;
  color: var(--st-ink);
}
.st-defining {
  margin: 0 0 0.75rem;
  font: italic 400 1.25rem/1.55 var(--st-serif);
  color: var(--st-ink);
  max-width: 30ch;
}
.st-aliases {
  margin: 0 0 1.5rem;
  font: 400 0.95rem/1.6 var(--st-serif);
  color: var(--st-ink-2);
}

.st-passage {
  margin: 0 0 1.1rem;
  font: 400 1.16rem/1.7 var(--st-serif);
  color: var(--st-ink);
  max-width: 38ch;
}
.st-passage--more { max-width: 36ch; }

/* THE INITIAL — ornamental letter opening the passage. Drawn as type in a
   painted frame: wash, double hairline, corner buds. */
.st-initial {
  float: left;
  font: 700 3.6rem/0.9 var(--st-serif);
  color: var(--st-ink);
  padding: 0.85rem 0.85rem 0.6rem;
  margin: 0.3rem 0.9rem 0.1rem 0;
  background:
    radial-gradient(circle at 12% 12%, var(--st-sienna) 2px, transparent 2.8px),
    radial-gradient(circle at 88% 12%, var(--st-sienna) 2px, transparent 2.8px),
    radial-gradient(circle at 12% 88%, var(--st-sienna) 2px, transparent 2.8px),
    radial-gradient(circle at 88% 88%, var(--st-sienna) 2px, transparent 2.8px),
    radial-gradient(ellipse at 30% 25%, #F3E3BC, var(--st-wash));
  border: 1px solid var(--st-frame);
  box-shadow: inset 0 0 0 3px var(--st-leaf), inset 0 0 0 4px #C4A171;
  border-radius: 3px;
}
.st-initial--cover {
  font-size: 4.6rem;
  padding: 1rem 1rem 0.7rem;
}

.st-turnhint {
  margin: 1.25rem 0 0;
  font: 400 0.68rem/1.4 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st-ink-2);
}
.st-turnhint__arrow { display: inline-block; margin-left: 0.4em; }

/* ---- the dusk opening (the refusal) ------------------------------------- */
.st-opening--dusk .st-leaf { background: var(--st-dusk); }
.st-opening--dusk .st-passage { color: var(--st-cream); }
.st-opening--dusk .st-h2 { color: var(--st-cream-2); }
.st-opening--dusk .st-folio { color: var(--st-cream-2); }
.st-opening--dusk .st-initial {
  color: var(--st-cream);
  background:
    radial-gradient(circle at 12% 12%, #C4A171 2px, transparent 2.8px),
    radial-gradient(circle at 88% 12%, #C4A171 2px, transparent 2.8px),
    radial-gradient(circle at 12% 88%, #C4A171 2px, transparent 2.8px),
    radial-gradient(circle at 88% 88%, #C4A171 2px, transparent 2.8px),
    radial-gradient(ellipse at 30% 25%, #6E5137, #4A3527);
  border-color: #C4A171;
  box-shadow: inset 0 0 0 3px var(--st-dusk), inset 0 0 0 4px #C4A171;
}
.st-opening--dusk .st-recto::before {
  background: linear-gradient(90deg, rgba(20, 12, 8, 0.4), rgba(20, 12, 8, 0) 85%);
}
.st-frozen {
  margin: 0 0 1rem;
  font: italic 400 1.05rem/1.55 var(--st-serif);
  color: var(--st-sienna);
  max-width: 36ch;
}

/* ---- the pacing pair (demonstration) ------------------------------------ */
.st-demo {
  position: relative; /* paints above the tale's sticky spreads */
  background: var(--st-mat-2);
  border-block-start: 1px solid #C9AE82;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem);
}
.st-demo__inner { max-width: 64rem; margin-inline: auto; }
.st-demo__h { margin-bottom: 0.75rem; }
.st-demo__intro {
  margin: 0 0 2rem;
  font: 400 1.05rem/1.65 var(--st-serif);
  color: var(--st-ink);
  max-width: 58ch;
}
.st-demo__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
.st-panel {
  margin: 0;
  background: var(--st-leaf);
  border: 1px solid #C9AE82;
  border-radius: 4px;
  box-shadow: 3px 4px 0 #DBC49C;
}
.st-panel__cap {
  padding: 0.8rem 0.9rem 0.9rem;
  font: 400 0.72rem/1.65 var(--mono);
  color: var(--st-ink-2);
  border-top: 1px solid #DFCEAC;
}
.st-panel__cap b { color: var(--st-ink); font-weight: 400; }

/* The paced panel: a viewport of its own. One beat visible; scrolling it is
   the turn. CSS only — it stays a plain scrolling list everywhere. */
.st-pacedbox {
  height: 19rem;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--st-frame) var(--st-leaf);
}
.st-pacedbox:focus-visible {
  outline: 3px solid var(--st-sienna);
  outline-offset: 2px;
}
.st-beat {
  height: 100%;
  scroll-snap-align: start;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.6rem;
  padding: 1rem;
}
.st-beat__art { width: min(11rem, 70%); }
.st-beat__art svg { width: 100%; height: auto; display: block; }
.st-beat__word {
  margin: 0;
  font: italic 400 1.1rem/1.4 var(--st-serif);
  color: var(--st-ink);
}
.st-beat__n {
  margin: 0;
  font: 400 0.62rem/1.4 var(--mono);
  letter-spacing: 0.18em;
  color: var(--st-ink-2);
}

/* The simultaneous panel: everything at once, deliberately. */
.st-flatrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 19rem;
}
.st-beat--flat { padding: 0.75rem 0.5rem; }
.st-beat--flat .st-beat__art { width: min(8rem, 90%); }
.st-beat--flat .st-beat__word { font-size: 0.9rem; text-align: center; }

/* ---- the page turn -------------------------------------------------------
   Layer 1 (all motion behind no-preference): sticky stacking — the incoming
   spread slides over the pinned outgoing one, which is the turn's covering
   half. Layer 2: scroll-driven entry animations where the engine has them.
   Layer 3: st-io + st-seen classes from the observer fallback where it does
   not. Remove every layer and the document is a plain readable sequence. */
@media (prefers-reduced-motion: no-preference) {
  .st-tale .st-opening {
    position: sticky;
    top: 0;
  }
  .st-turnhint__arrow { animation: st-nudge 6s ease-in-out infinite; }

  @supports (animation-timeline: view()) {
    .st-tale .st-opening + .st-opening .st-leaf {
      animation: st-turn-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 95%;
      transform-origin: 50% 100%;
    }
    .st-tale .st-opening + .st-opening .st-initial {
      animation: st-settle linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 100%;
    }
    .st-tale .st-opening + .st-opening .st-art svg {
      animation: st-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
  }

  /* Observer fallback (script adds st-io only where view() is missing). */
  .st-io .st-opening .st-leaf {
    transition: opacity 0.7s ease, transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .st-io .st-opening .st-initial {
    transition: transform 0.8s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s 0.3s ease;
  }
  .st-io .st-opening:not(.st-seen):not(:first-child) .st-leaf {
    opacity: 0;
    transform: perspective(1400px) rotateX(7deg) translateY(3.5rem);
  }
  .st-io .st-opening:not(.st-seen):not(:first-child) .st-initial {
    opacity: 0;
    transform: scale(1.3) rotate(-4deg);
  }
}

@keyframes st-turn-in {
  from {
    transform: perspective(1400px) rotateX(9deg) translateY(7svh);
    box-shadow:
      3px 3px 0 #E9DECB,
      6px 7px 0 #DBC49C,
      9px 11px 0 #C9AE82,
      0 44px 70px -18px rgba(68, 50, 40, 0.6);
  }
}
@keyframes st-settle {
  from { transform: scale(1.35) rotate(-5deg); opacity: 0.15; }
}
@keyframes st-drift {
  from { transform: scale(1.06); }
}
@keyframes st-nudge {
  0%, 78%, 100% { transform: translateY(0); }
  86% { transform: translateY(0.3em); }
  93% { transform: translateY(0.05em); }
}

/* ---- narrow screens: the single-page picture book ----------------------- */
@media (max-width: 56rem) {
  .st-leaf {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(40svh, 42svh) auto;
    min-height: calc(100svh - 1.5rem);
  }
  .st-art { border-radius: 4px 4px 0 0; min-height: 40svh; }
  .st-recto::before {
    inset-inline: 0; top: 0; left: auto;
    width: auto; height: 2rem;
    background: linear-gradient(180deg, rgba(90, 64, 45, 0.18), rgba(90, 64, 45, 0) 85%);
  }
  .st-opening--dusk .st-recto::before {
    background: linear-gradient(180deg, rgba(20, 12, 8, 0.35), rgba(20, 12, 8, 0) 85%);
  }
  .st-initial { font-size: 2.9rem; padding: 0.65rem 0.65rem 0.45rem; }
  .st-initial--cover { font-size: 3.5rem; }
  .st-demo__pair { grid-template-columns: 1fr; }
  .st-pacedbox, .st-flatrow { height: 17rem; }
}

/* ==========================================================================
   THE RECORD — the rest of the book. The same leaf, the same verso painting,
   the same folio, heading and initial; one part of the record per opening.
   Record openings never stick (a long passage would be covered by the next
   spread): on wide screens the painting stays in view beside the passage
   instead, so the picture still leads the whole time it is read.
   Contrast for pairs introduced here:
   - sienna  #8C4A26 on leaf #F6ECDC   5.8:1  (links, kind labels)
   - ink-2   #6B5138 on leaf #F6ECDC   6.3:1  (dt, small labels)
   - cream-2 #F0DFC6 on dusk #5C4434   6.9:1  (dusk dt)
   ========================================================================== */

/* The shell's scroll reveal must never leave the record at opacity 0.
   (Outranks site.css's .js-reveal rule.) */
.st-page main > section.st-rec { opacity: 1; transform: none; transition: none; will-change: auto; }

.st-rec {
  position: relative; /* paints above the tale's sticky spreads */
  background: var(--st-mat);
  padding-block: clamp(0.75rem, 2.5vw, 2.25rem);
}
.st-rec .st-opening { min-height: 0; padding-block: clamp(0.75rem, 2.5vw, 2.25rem); }
.st-rec .st-leaf { min-height: calc(100svh - clamp(1.5rem, 5vw, 4.5rem)); }
.st-rec .st-art {
  position: sticky;
  top: 0;
  align-self: start;
  height: calc(100svh - clamp(1.5rem, 5vw, 4.5rem));
  min-height: 0;
}
.st-rec .st-recto { padding-block: clamp(1.75rem, 4vw, 3.5rem); }

.st-count {
  font: 400 0.8rem/1 var(--mono);
  letter-spacing: 0.12em;
  margin-left: 0.4em;
  color: var(--st-ink-2);
}
.st-opening--dusk .st-count { color: var(--st-cream-2); }

.st-lede {
  margin: 0 0 1.25rem;
  font: italic 400 1.02rem/1.6 var(--st-serif);
  color: var(--st-ink-2);
  max-width: 40ch;
}
.st-kind {
  display: block;
  font: 400 0.68rem/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-sienna);
  margin: 0 0 0.2rem;
}

/* Facts and short definition lists: label over value, a hairline between. */
.st-facts, .st-dl { margin: 0; max-width: 40ch; }
.st-dl { margin-top: 0.75rem; }
.st-facts > div, .st-dl > div {
  padding: 0.7rem 0;
  border-top: 1px solid #DFCEAC;
}
.st-facts > div:last-child, .st-dl > div:last-child { border-bottom: 1px solid #DFCEAC; }
.st-facts dt, .st-dl dt {
  font: 400 0.68rem/1.5 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-ink-2);
  margin: 0 0 0.2rem;
}
.st-facts dd, .st-dl dd {
  margin: 0;
  font: 400 1.05rem/1.6 var(--st-serif);
  color: var(--st-ink);
}
.st-opening--dusk .st-dl > div { border-color: #7A5E4A; }
.st-opening--dusk .st-dl dt { color: var(--st-cream-2); }
.st-opening--dusk .st-dl dd { color: var(--st-cream); }

/* The diagnostic, lifted out of the signature: a line under a rule. */
.st-diag {
  margin: 0.4rem 0 1.2rem;
  padding: 0.9rem 0 0.9rem 1rem;
  border-left: 3px solid var(--st-frame);
  font: italic 400 1.14rem/1.6 var(--st-serif);
  color: var(--st-sienna);
  max-width: 38ch;
}

/* What carries the look: a list of plates. */
.st-plates { list-style: none; margin: 0; padding: 0; max-width: 40ch; }
.st-plates > li { border-top: 1px solid #DFCEAC; padding: 0.15rem 0 0.5rem; }
.st-plates > li:last-child { border-bottom: 1px solid #DFCEAC; }
.st-plates__dim { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.75rem; }
.st-plates__dim a, .st-plates__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 400 1.08rem/1.3 var(--st-serif);
  color: var(--st-sienna);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.st-plates__links a { margin-right: 0.9rem; }
.st-plates__carries {
  font: 400 0.66rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--st-ink);
  background: var(--st-wash);
  padding: 0.2rem 0.45rem;
  border-radius: 2px;
}
.st-plates__v p { margin: 0 0 0.35rem; font: 400 1rem/1.6 var(--st-serif); color: var(--st-ink); }
.st-plates__v .st-plates__none { font-style: italic; color: var(--st-ink-2); }
.st-plates__v .st-plates__small { font: 400 0.78rem/1.5 var(--mono); color: var(--st-ink-2); }
.st-pans {
  list-style: none;
  margin: 0.3rem 0 0.4rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.5rem 0.75rem;
}
.st-pans li { display: flex; align-items: center; gap: 0.5rem; font: 400 0.78rem/1.3 var(--mono); color: var(--st-ink); }
.st-pans i {
  flex: none;
  width: 1.6rem; height: 1.45rem;
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--st-slip), 0 0 0 4px #C9AE82;
}

/* Rules, by area. */
.st-rules { max-width: 42ch; }
.st-rules__area { border-top: 1px solid #DFCEAC; padding: 0.8rem 0 0.4rem; }
.st-rules__area:last-child { border-bottom: 1px solid #DFCEAC; }
.st-rules__area h3 {
  margin: 0 0 0.4rem;
  font: italic 700 1.02rem/1.35 var(--st-serif);
  color: var(--st-ink);
}
.st-rules ul { list-style: none; margin: 0; padding: 0; }
.st-rules li { margin: 0 0 0.6rem; font: 400 1.05rem/1.6 var(--st-serif); color: var(--st-ink); }

/* The ledger: a small table, set like a book's list of contents. */
.st-tblw { max-width: 100%; overflow-x: auto; margin: 0.5rem 0 1.2rem; }
.st-tblw:focus-visible { outline: 3px solid var(--st-sienna); outline-offset: 2px; }
.st-tbl { border-collapse: collapse; width: 100%; max-width: 30rem; font: 400 0.95rem/1.45 var(--st-serif); color: var(--st-ink); }
.st-tbl th, .st-tbl td { text-align: left; padding: 0.45rem 0.75rem 0.45rem 0; border-bottom: 1px solid #DFCEAC; vertical-align: top; }
.st-tbl thead th { font: 400 0.64rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-ink-2); }
.st-tbl tbody th { font-weight: 400; font-style: italic; }
.st-tbl b { font-weight: 700; color: var(--st-sienna); }
.st-warn {
  margin: 0;
  font: italic 400 1.05rem/1.6 var(--st-serif);
  color: var(--st-sienna);
  max-width: 38ch;
}

/* The fork: one road per neighbour. */
.st-roads { list-style: none; margin: 0; padding: 0; max-width: 40ch; }
.st-roads li { border-top: 1px solid #DFCEAC; }
.st-roads li:last-child { border-bottom: 1px solid #DFCEAC; }
.st-roads a, .st-roads li > div {
  display: block;
  min-height: 44px;
  padding: 0.75rem 0;
  color: var(--st-ink);
  text-decoration: none;
}
.st-roads__n {
  display: block;
  font: 700 1.1rem/1.35 var(--st-serif);
  color: var(--st-sienna);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.st-roads .st-kind { color: var(--st-ink-2); margin: 0.2rem 0 0.25rem; }
.st-roads__t { display: block; font: italic 400 1.02rem/1.55 var(--st-serif); color: var(--st-ink); }

/* The last opening: the exits, then the end. */
.st-exits { list-style: none; margin: 0; padding: 0; max-width: 40ch; }
.st-exits li { border-top: 1px solid #DFCEAC; }
.st-exits li:last-child { border-bottom: 1px solid #DFCEAC; }
.st-exits a {
  display: block;
  min-height: 44px;
  padding: 0.65rem 0;
  color: var(--st-ink);
  text-decoration: none;
}
.st-exits b {
  display: block;
  font: 700 1.1rem/1.35 var(--st-serif);
  color: var(--st-sienna);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}
.st-exits span { display: block; font: 400 0.98rem/1.5 var(--st-serif); color: var(--st-ink-2); }
.st-roads a:hover .st-roads__n, .st-exits a:hover b, .st-plates a:hover { text-decoration-thickness: 2px; }
.st-rec a:focus-visible { outline: 3px solid var(--st-sienna); outline-offset: 3px; border-radius: 2px; }
.st-end {
  margin: auto 0 0;
  padding-top: 2rem;
  font: italic 400 1.6rem/1.2 var(--st-serif);
  color: var(--st-sienna);
  text-align: center;
  max-width: 40ch;
}

/* The room's existing motion, on the record: the painting drifts and the
   initial settles as each opening arrives. The leaf itself never tilts, so
   record sentences stay upright. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .st-rec .st-art svg {
      animation: st-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }
    .st-rec .st-initial {
      animation: st-settle linear both;
      animation-timeline: view();
      animation-range: entry 30% entry 100%;
    }
  }
}

@media (max-width: 56rem) {
  .st-rec .st-leaf { min-height: 0; grid-template-rows: auto auto; }
  .st-rec .st-art { position: relative; height: 38svh; min-height: 15rem; }
  .st-rec .st-recto { padding: 1.75rem 1.25rem 2rem; }
  .st-end { text-align: left; }
}

/* ---- Design Completion Campaign (2026-09-29): the documented opening and
   the colour blocks, set in the demonstration's own panel and caption. ---- */
.st-demo__doc {
  margin: -1.25rem 0 2rem;
  font: 400 0.95rem/1.6 var(--st-serif);
  color: var(--st-ink-2);
  max-width: 58ch;
}
.st-demo__doc b { color: var(--st-ink); font-weight: 600; }
.st-demo__h--2 { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.st-print { max-width: 44rem; }
/* The sheet is the yellow paper; each block prints once, in turn. */
.st-print__sheet { padding: clamp(1rem, 3vw, 1.5rem); background: #EFD9A0; }
.st-print__blocks {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem;
  counter-reset: st-block;
}
.st-print__blocks li { display: grid; gap: 0.4rem; counter-increment: st-block; }
.st-print__blocks i { display: block; aspect-ratio: 1; border-radius: 3px; }
.st-print__blocks span { font: italic 400 0.85rem/1.3 var(--st-serif); color: var(--st-ink); }
.st-print__blocks span::before { content: counter(st-block) ". "; font-style: normal; color: var(--st-ink-2); }
@media (max-width: 40rem) {
  .st-print__blocks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* QA (2026-09-29): the research-dimension table fits a phone instead of
   scrolling sideways with no cue. */
@media (max-width: 30rem) {
  .st-tbl th, .st-tbl td { padding-right: 0.5rem; hyphens: auto; }
  .st-tbl thead th { letter-spacing: 0.04em; }
}