/* ===========================================================================
   COMPILE — the scroll-driven intro, prototype stylesheet.

   Two halves, kept apart on purpose:

   PART A  the intro act's own rules. Only this half would travel into
           index.html; it adds no selector that index.html already owns.
   PART B  a verbatim lift of the hero/facade rules out of index.html's inline
           <style>, because that <style> cannot be linked from here. Nothing in
           PART B is authored — it is copied so this standalone page renders the
           real hero. When the act lands in index.html, PART B is deleted.
   ========================================================================= */

/* ======================================================= PART A · the intro */

/* The stage. One sticky screen for the whole act, the canvas filling it.
   `.sc-stage` from scrollcraft.css already pins it (position: sticky, 100svh,
   overflow: clip) — this only paints it and parks the canvas. */
#intro .sc-stage,
#intro [data-sc-stage] {
  background: var(--sc-canvas);
}
#intro .icv {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  /* The glyph rain IS the picture: no blend mode, no filter. One opaque
     canvas on the ground token, which is what keeps the cost at one draw. */
}

/* The hero lives INSIDE the intro stage for the dissolve, and is handed back
   to the page when the act ends. Both states are the same markup; only this
   wrapper's opacity and mask move, both written by intro.js as inline style.
   Declared here so the resting state is correct before the first frame and
   under reduced motion, where intro.js writes nothing. */
#intro .ihero {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  padding: clamp(2.2rem, 5vh, 4rem) var(--sc-gutter) clamp(2rem, 4.5vh, 3.4rem);
  padding-right: max(var(--sc-gutter), calc(var(--strip-w) + var(--safe-r) + 0.5rem));
  z-index: 2;
  opacity: 0;                      /* intro.js raises it; see below for reduce */
  pointer-events: none;            /* the intro is scenery, not a control */
}
/* Reduced motion: the final state, immediately. No rain, no mask, no canvas. */
@media (prefers-reduced-motion: reduce) {
  #intro .ihero { opacity: 1; -webkit-mask-image: none; mask-image: none; }
  #intro .icv { display: none; }
}

/* The one line of instruction, and the only thing on screen at p = 0 besides
   the rain. It fades out on its own as the glyphs lock (intro.js). */
#intro .icue {
  position: absolute;
  left: 0; right: 0; bottom: clamp(1.4rem, 4vh, 2.6rem);
  margin: 0;
  text-align: center;
  font-family: var(--sc-font-display);
  font-size: 0.64rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  z-index: 3;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { #intro .icue { display: none; } }

/* ====================================== PART B · lifted from index.html ====
   Verbatim. Do not edit here; edit index.html. Trimmed to what this page's
   one hero needs: the act/sheet frame, the facade, the hero layout, the two
   prose roles. */

:root {
  --strip-w: 3.4rem;
  --safe-r: env(safe-area-inset-right, 0px);
  --vf-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --sheet-bone: #EFE9DD;
}
@media (max-width: 680px) { :root { --strip-w: 3rem; } }

body {
  font-family: var(--sc-font-text);
  overflow-x: clip;
}
a, button, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sc-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--sc-accent); color: var(--sc-accent-ink); }

.act { position: relative; display: block; isolation: isolate; background: var(--sc-canvas); }
.sheet { display: block; isolation: isolate; position: relative; background: var(--sc-canvas); }
.sheet__fold {
  position: relative;
  display: grid;
  align-content: center;
  gap: clamp(1.2rem, 3vh, 2.4rem);
  overflow: clip;
  padding: clamp(2.2rem, 5vh, 4rem) var(--sc-gutter) clamp(2rem, 4.5vh, 3.4rem);
  padding-right: max(var(--sc-gutter), calc(var(--strip-w) + var(--safe-r) + 0.5rem));
  background: var(--sc-canvas);
}
.sheet--solo { min-height: 100%; }
.sheet--solo > .sheet__fold { position: sticky; top: 0; height: 100svh; min-height: 0; max-height: 100svh; }
.act--short .sheet--solo > .sheet__fold { height: auto; min-height: 76svh; position: relative; }
.sheet, .sheet__fold, .act { background: var(--sheet-bone); }

/* --- the facade ------------------------------------------------------- */
.vframe { display: grid; grid-template-rows: auto auto; }
.vframe__pic {
  position: relative;
  aspect-ratio: var(--ar, 1.7778);
  background: #0d0c0b;
  box-shadow: 0 1px 0 color-mix(in oklab, var(--sc-ink) 24%, transparent),
              0 10px 28px -18px rgba(var(--fold-shade), 0.55);
  isolation: isolate;
}
.vframe__play {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  margin: 0; padding: 0;
  border: 1px solid color-mix(in oklab, var(--sc-ink) 22%, transparent);
  background: none; color: inherit; font: inherit;
  cursor: pointer; overflow: hidden;
  -webkit-appearance: none; appearance: none;
}
.vframe__play img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 420ms var(--vf-ease), filter 220ms var(--vf-ease);
}
.vframe__play::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top,
    rgba(6,5,4,0.94) 0, rgba(6,5,4,0.92) 34%,
    rgba(6,5,4,0.72) 62%, rgba(6,5,4,0.28) 84%, transparent 100%);
  pointer-events: none;
  transition: opacity 220ms var(--vf-ease);
}
.vframe__glyph {
  position: absolute; top: 50%; left: 50%;
  translate: -50% -50%;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.52);
  backdrop-filter: saturate(1.1);
  transition: transform 160ms var(--vf-ease), background-color 160ms var(--vf-ease);
  z-index: 2;
}
.vframe__glyph svg { width: 44px; height: 44px; display: block; }
.vframe__glyph circle { stroke: rgba(239,233,221,0.9); stroke-width: 1.5px; }
.vframe__glyph path { fill: #EFE9DD; transform-box: fill-box; transform-origin: center; translate: 1px 0; }
.vframe--lead .vframe__glyph { width: 84px; height: 84px; }
.vframe--lead .vframe__glyph svg { width: 56px; height: 56px; }
.vframe__meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: flex; align-items: baseline; gap: 0.75rem;
  background: rgba(6, 5, 4, 0.72);
  padding: 0.7rem 0.85rem;
  text-align: left;
  font-family: var(--sc-font-display);
  text-transform: uppercase;
}
.vframe__name {
  font-size: clamp(0.62rem, 0.9vw, 0.76rem);
  letter-spacing: 0.14em; line-height: 1.3;
  color: #F6F2E9; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vframe--lead .vframe__name { font-size: clamp(0.68rem, 1vw, 0.84rem); white-space: normal; }
.vframe__dur {
  margin-left: auto; flex: none;
  font-size: 0.6rem; letter-spacing: 0.1em;
  color: #EDE7DB; font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .vframe__play:hover img { transform: scale(1.025); }
  .vframe__play:hover .vframe__glyph { transform: scale(1.06); background: rgba(10,9,8,0.68); }
}
.vframe__play:focus-visible .vframe__glyph { transform: scale(1.06); }
.vframe__play:active .vframe__glyph { transform: scale(0.97); }
.vframe__out {
  display: flex; align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.1rem 0;
  font-family: var(--sc-font-display);
  font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in oklab, currentColor 45%, transparent);
  transition: color 150ms var(--vf-ease);
}
.vframe__out:hover { color: var(--sc-accent); }
@media (prefers-reduced-motion: reduce) {
  .vframe__play img, .vframe__glyph { transition: none; }
  .vframe__play:hover img { transform: none; }
}

/* --- the hero --------------------------------------------------------- */
.hero { width: 100%; max-width: 108rem; margin-inline: auto; min-width: 0;
        display: grid; gap: clamp(0.9rem, 2.2vh, 1.6rem); align-content: center; }
.hero > .vframe { width: 100%; justify-self: center; max-width: min(100%, calc(58svh * var(--ar, 1.7778))); }
.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: end;
}
.hero__name {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 0.86;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--sc-ink);
}
.hero__name span { display: block; }
.hero__name em { font-style: normal; color: var(--sc-ink-soft); }
.hero__side { min-width: 0; }
.hero__side .poster__claim { margin-top: 0; }
@media (max-width: 860px) {
  .hero__foot { grid-template-columns: 1fr; align-items: start; gap: clamp(0.8rem, 2vh, 1.2rem); }
  .hero__name { font-size: clamp(2.2rem, 13vw, 4rem); }
}

.poster__claim {
  font-family: var(--sc-font-text);
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.3; letter-spacing: -0.004em;
  max-width: 38ch;
  margin: clamp(0.5rem, 1.3vh, 0.9rem) 0 0;
  color: var(--sc-ink);
  text-wrap: pretty;
}
.poster__credit {
  font-family: var(--sc-font-display);
  font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; line-height: 1.6;
  color: var(--sc-ink-soft);
  max-width: 58ch;
  margin: clamp(0.5rem, 1.2vh, 0.9rem) 0 0;
}
.poster__title {
  font-family: var(--sc-font-display);
  font-weight: 400;
  font-size: var(--title, clamp(1.6rem, 2.8vw, 2.5rem));
  line-height: 0.94; letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0; color: var(--sc-ink);
}
.act--mid { --title: clamp(1.6rem, 2.8vw, 2.5rem); }

/* --- and the ink ground's own two rules this page depends on ----------- */
/* ground-ink.css already states both; restated at no higher specificity so
   the PART B copies above cannot win on source order. */
:root { --sheet-bone: #141210; }
.act, .sheet, .sheet__fold { background: transparent; }