/* assets/rn/pages/alchemy.css — AI Alchemy (/alchemy.html), 3-alchemy. Linked LAST, after components.css.
   The AI family: --rn-signal is blue (tokens.css). Red appears nowhere on this page; the footer's spectrum rule
   belongs to the footer. The page is built from the rn tokens and components; its own classes are alc-*, so none
   of the legacy .studio-alchemy-* / .studio-rune-* rules (studio.css, lux.css, base.css sections 9-10, hotfix.css
   section 9) reach it any more.

   Signature motion: the H1's words rise into their masks with a blue block landing behind "I make the call."
   (data-rn-kinetic="highlight"), then the formula lands term by term; further down, the four method steps land
   in sequence. Everything else is a plain reveal. The rune turns slowly (site.js initAlchemyRune) and stops with
   the site pause, offscreen and under reduced motion, where the static outline stands in for it.

    1. Page rhythm   2. Hero   3. Rune stage   4. Formula   5. Who does what   6. The symbol   7. Method
    8. The reel   9. Reduced motion, pause, no JavaScript                                                       */

/* 1. Page rhythm ──────────────────────────────────────────────────────────────────────────────────────────────
   One section padding, equal top and bottom; ink and paper alternate. Every H2 is the section role (base.css). */
.alc-section {
  padding-block: var(--rn-section);
}

.alc-section[data-tone=light] {
  background: var(--rn-paper);
  color: var(--rn-text-on-paper);
}

.alc-section[data-tone=dark] {
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

.alc-section h2 {
  margin: var(--rn-space-4) 0 0;
}

/* A blue dot on paper needs an ink edge (tokens.css, SIGNAL RULES). */
.alc-section[data-tone=light] .rn-eyebrow::before {
  box-shadow: var(--rn-signal-edge);
}

/* 2. Hero ─────────────────────────────────────────────────────────────────────────────────────────────────────
   Copy beside a rune stage of 560-620px from 1200px up (the split the stage needs to read as the mark); stacked
   below that, the stage full width. The H1 sets in three lines beside the stage ("AI does / the legwork. / I make
   the call."), two when stacked on tablets, three on phones, and scales with its column so the highlighted line
   always fits. "the legwork." never splits (.alc-keep), so a wrapping first line always breaks before "the", never
   after it. A no-break space would not hold: the kinetic splitter treats any space as a word gap. */
.alc-hero {
  position: relative;
  padding: calc(var(--rn-header-top) + var(--rn-header-h) + clamp(28px, 4vw, 56px)) 0 clamp(40px, 5vw, 64px);
  background: var(--rn-ink);
  color: var(--rn-text-on-ink);
}

.alc-hero-grid {
  display: grid;
  container-type: inline-size;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 56px);
}

.alc-hero-copy {
  container-type: inline-size;
  min-width: 0;
}

.alc-hero h1 {
  max-width: none;
  margin: var(--rn-space-5) 0;
  color: var(--rn-text-on-ink);
  font: var(--rn-weight-display) var(--rn-fs-display) / var(--rn-lh-display) var(--rn-font-display);
  letter-spacing: var(--rn-track-display);
}

/* The widest line is "I make the call." (6.2-6.5em): 15.4cqi keeps it inside the column; its highlight hangs 0.1em
   either side, into the gutter. "the legwork." is 5.2-5.5em, so it always fits unbroken. The cap is an enhancement
   inside @supports: with var() in it, every browser accepts the declaration when parsing, and one without container
   units (Safari 15 and older) then threw the whole font away and set the H1 at body size. */
@supports (width: 1cqi) {
  .alc-hero h1 {
    font-size: min(var(--rn-fs-display), 15.4cqi);
  }
}

.alc-hero h1 .alc-keep {
  white-space: nowrap;
}

/* Without the toolkit (no JavaScript) the phrase is blue text; with it, the words rise onto a blue block. */
.alc-hero h1 em {
  /* Its own line, set a little lower, so the blue block clears the descender of "legwork." above it (at the display
     line-height the block's top edge ran through the g). The <br> before it is then redundant but harmless. */
  display: block;
  margin-top: 0.1em;
  color: var(--rn-signal);
  font-style: normal;
}

.alc-lede {
  max-width: 36em;
  margin: 0 0 var(--rn-space-6);
  color: var(--rn-muted-on-ink);
  font: 400 min(var(--rn-fs-lead), 1.25rem) / var(--rn-lh-lead) var(--rn-font-body);
}

@media (min-width: 1200px) {
  .alc-hero-grid {
    grid-template-columns: minmax(0, 1fr) clamp(560px, 47%, 620px);
    gap: clamp(48px, 5vw, 72px);
  }
}

/* 3. Rune stage ───────────────────────────────────────────────────────────────────────────────────────────────
   The hero's stage language: ink-soft, a 1px ring, radius 20 and the faint 88px grid. The art is aria-hidden; the
   pause toggle sits outside it (top right; a 44px circle on phones). Until the WebGL rune has drawn its first
   frame, and whenever it cannot (reduced motion, no WebGL, a lost context, no JavaScript), the static outline
   stands in its place at the same size, so the stage is never empty and the canvas fades in over the outline.
   The outline and the orbit are sized from the camera: the rune's 6 units of height fill 88.8% of the mark box
   (.alc-stage-mark). On phones the mark box sits between a top label row and a bottom label band, so no label
   crosses the ring, the apex, the stem or the bars (in the corners of a square stage they would, from 414px down). */
.alc-stage {
  position: relative;
  min-width: 0;
  /* Stacked: full width, square on phones, at most 62% of the viewport or 560px tall. The first line is for a
     browser without container units or svh, which drops the second. */
  height: max(320px, min(92vw, 62vh, 560px));
  height: max(320px, min(100cqi, 62svh, 560px));
  overflow: hidden;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-ink-soft);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-position: center;
  background-size: var(--rn-grid) var(--rn-grid);
}

@media (min-width: 1200px) {
  .alc-stage {
    height: auto;
    aspect-ratio: 1 / 1.02;
  }
}

.alc-stage-art,
.alc-stage-mark {
  position: absolute;
  z-index: 0;
  inset: 0;
}

.alc-stage-mark {
  container-type: size;
}

/* The quiet ring: static, a dashed hairline in the AI blue at 24%, circling the whole mark (base.css section 9
   made the legacy orbit opaque; this page's ring is its own). */
.alc-orbit {
  position: absolute;
  top: calc(50% + 1.04%);
  left: 50%;
  height: 88%; /* without container units */
  height: min(88%, 92cqw);
  aspect-ratio: 1;
  border: 1px dashed rgb(121 169 255 / 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.alc-stage .alchemy-rune-canvas {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rn-dur-cam) var(--rn-ease-critical);
}

.alc-stage .alchemy-rune-canvas.is-ready {
  opacity: 1;
}

/* The outline stands in for the canvas under html.rune-fallback (reduced motion, no WebGL, a lost context; site.js)
   and without JavaScript, when the canvas would stay blank. (From hotfix.css, 4-consolidation.) */
html.rune-fallback .alchemy-rune-canvas {
  visibility: hidden;
}

html:not(.js) .alchemy-rune-canvas {
  display: none;
}

.alc-stage .rune-fallback-mark {
  position: absolute;
  z-index: 1;
  inset: auto;
  top: calc(50% + 1.18%);
  left: 50%;
  display: block;
  width: auto;
  height: 88.8%;
  aspect-ratio: 5 / 6;
  opacity: 1;
  overflow: visible;
  color: var(--rn-paper);
  transform: translate(-50%, -50%);
  transition: opacity var(--rn-dur-cam) var(--rn-ease-critical);
}

.alc-stage .rune-fallback-mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html:not(.rune-fallback) .alc-stage:has(.alchemy-rune-canvas.is-ready) .rune-fallback-mark {
  opacity: 0;
}

/* While three.js loads, the outline is a dim graphite trace (the metal's own colour at 28%), so the canvas fading
   in over it reads as the metal arriving, not as a white glyph turning into dark metal. The paper-white outline is
   the stand-in only where it stays: reduced motion, a WebGL failure (html.rune-fallback) and no JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  html.js:not(.rune-fallback) .alc-stage .rune-fallback-mark {
    color: rgb(211 214 217 / 0.28);
  }
}

.alc-stage-label {
  position: absolute;
  z-index: 2;
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.alc-stage-label.is-air {
  top: 22px;
  left: 22px;
}

.alc-stage-label.is-direction {
  bottom: 22px;
  left: 22px;
}

.alc-stage-label.is-weight {
  right: 22px;
  bottom: 22px;
}

.alc-stage > .rn-motion-toggle {
  z-index: 3;
}

@media (max-width: 640px) {
  /* A square mark box between a label row on top and the label band below. In a square stage the top label would
     graze the ring and come within a few pixels of the apex, from 414px down. */
  .alc-stage {
    --alc-head: 28px;
    --alc-band: 44px;
    height: calc(max(256px, min(92vw, 58vh, 480px)) + var(--alc-head) + var(--alc-band));
  }

  @supports (width: 1cqi) and (height: 1svh) {
    .alc-stage {
      height: calc(max(256px, min(100cqi, 58svh, 480px)) + var(--alc-head) + var(--alc-band));
    }
  }

  .alc-stage-mark {
    top: var(--alc-head);
    bottom: var(--alc-band);
  }

  .alc-stage-label.is-air {
    top: 16px;
    left: 16px;
  }

  .alc-stage-label.is-direction {
    bottom: 16px;
    left: 16px;
  }

  .alc-stage-label.is-weight {
    right: 16px;
    bottom: 16px;
  }

  .alc-stage > .rn-motion-toggle {
    top: 8px;
    right: 8px;
    padding: 0;
  }

  .alc-stage > .rn-motion-toggle > span:not(.rn-motion-toggle-icon) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* The smallest phones: the two bottom labels would meet side by side, so they stack on the left. */
@media (max-width: 359px) {
  .alc-stage {
    --alc-band: 64px;
  }

  .alc-stage-label.is-direction {
    bottom: 38px;
  }

  .alc-stage-label.is-weight {
    right: auto;
    left: 16px;
  }
}

/* 4. Formula ──────────────────────────────────────────────────────────────────────────────────────────────────
   One line in the stage's vocabulary, read once by screen readers (the visual terms are aria-hidden). The terms
   land one after another after the headline (data-rn-stagger-rows, beat 2 of the hero's timeline). */
.alc-formula {
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding-top: var(--rn-space-5);
  border-top: 1px solid var(--rn-ring);
}

.alc-formula-terms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: var(--rn-muted-on-ink);
  font: 500 0.75rem/1.2 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.alc-formula-terms > b {
  color: var(--rn-signal);
  font: 400 1.25rem/1 var(--rn-font-mono);
}

.alc-formula-terms > strong {
  color: var(--rn-text-on-ink);
  font-weight: 500;
}

/* Wide screens: one equation read left to right, held together with even gaps (spread across the row, the terms
   read as a sparse nav), a step larger so the strip carries the hero's close. */
@media (min-width: 901px) {
  .alc-formula-terms {
    column-gap: clamp(16px, 2vw, 28px);
    font-size: 0.875rem;
  }
}

/* Phones: the three terms on one line, the result on the next. */
@media (max-width: 640px) {
  .alc-formula-terms::after {
    flex-basis: 100%;
    order: 1;
    content: "";
  }

  .alc-formula-terms > :is(b:last-of-type, strong) {
    order: 2;
  }
}

/* The smallest phones: the three terms no longer fit one line, so the sum is set as a column, each operator on the
   line of the term it joins and the terms aligned. */
@media (max-width: 359px) {
  .alc-formula-terms {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    align-items: center;
    gap: 6px 10px;
  }

  .alc-formula-terms > :first-child {
    grid-column: 2;
  }

  .alc-formula-terms > b {
    text-align: center;
  }

  .alc-formula-terms::after {
    content: none;
  }

  .alc-formula-terms > :is(b:last-of-type, strong) {
    order: 0;
  }
}

/* 5. Who does what ─────────────────────────────────────────────────────────────────────────────────────────────
   Paper, with the Example card in ink (rn-example on a light section). The two lists pair up row by row on wider
   screens (subgrid), and stack on phones. */
.alc-split-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--rn-space-7) clamp(40px, 6vw, 96px);
}

.alc-split-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.alc-split-copy h2 {
  max-width: 11ch;
}

.alc-split-copy > p:not(.rn-eyebrow),
.alc-symbol-copy > p:not(.rn-eyebrow),
.alc-output-copy > p:not(.rn-eyebrow),
.alc-method-head > p {
  max-width: 40ch;
  margin: var(--rn-space-5) 0 var(--rn-space-4);
  color: var(--rn-muted);
  font: 400 var(--rn-fs-body-lg) / var(--rn-lh-body) var(--rn-font-body);
}

.alc-split-card > figcaption {
  margin-bottom: var(--rn-space-5);
}

.alc-split-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, auto);
  column-gap: clamp(20px, 3vw, 40px);
}

.alc-split-col {
  display: grid;
  grid-row: 1 / span 4;
  grid-template-rows: subgrid;
  min-width: 0;
}

.alc-split-col h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: var(--rn-space-4);
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title) / var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.alc-split-col h3::before {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rn-text);
  content: "";
}

.alc-split-col.is-ai h3::before {
  background: var(--rn-signal);
}

.alc-split-col ul {
  display: grid;
  grid-row: 2 / span 3;
  grid-template-rows: subgrid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.alc-split-col li {
  padding: var(--rn-space-4) 0;
  border-top: 1px solid var(--rn-line);
  color: var(--rn-text);
  font: 500 var(--rn-fs-body) / 1.45 var(--rn-font-body);
}

.alc-split-col.is-ai li {
  color: var(--rn-muted);
}

.alc-split-note {
  margin: var(--rn-space-5) 0 0;
  padding: var(--rn-space-4) 0 0;
  border-top: 1px solid var(--rn-line);
  color: var(--rn-text);
  font: 600 var(--rn-fs-small) / 1.55 var(--rn-font-body);
}

@media (max-width: 900px) {
  .alc-split-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .alc-split-cols {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    row-gap: var(--rn-space-6);
  }

  .alc-split-col,
  .alc-split-col ul {
    display: block;
    grid-row: auto;
  }
}

/* 6. The symbol ───────────────────────────────────────────────────────────────────────────────────────────────
   An exploded plate of the mark in the stage's language: paper geometry on ink-soft, the triangle lifted clear of
   the stem and bars (possibility above, responsibility below), each part tagged by a ringed chip with a blue dot.
   Wide plates draw hairline leaders from a blue node on each part to its chip; narrow plates centre the mark and
   set the chips in a row beneath it, clear of the glyph. The H2 runs across the section above them, one sentence
   per line where the width allows, so it never breaks into four ragged lines beside the plate. */
.alc-symbol-head {
  margin-bottom: clamp(40px, 5vw, 72px);
}

.alc-symbol-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--rn-space-7) clamp(40px, 6vw, 96px);
}

.alc-diagram {
  position: relative;
  container-type: inline-size;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background-color: var(--rn-ink-soft);
  background-image: linear-gradient(var(--rn-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--rn-grid-line) 1px, transparent 1px);
  background-position: center;
  background-size: var(--rn-grid) var(--rn-grid);
}

/* The drawing and its chips; the chips are placed against it, not against the card. */
.alc-diagram-plate {
  position: relative;
}

.alc-diagram-art {
  display: block;
  width: 100%;
  height: auto;
}

.alc-glyph path {
  fill: none;
  stroke: var(--rn-paper);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alc-leaders path {
  fill: none;
  stroke: var(--rn-muted-on-ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}

.alc-leaders circle {
  fill: var(--rn-signal);
}

.alc-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rn-space-2);
  margin: 0;
  padding: 0 var(--rn-space-4) var(--rn-space-5);
  list-style: none;
}

.alc-legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-pill);
  background: var(--rn-ink);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}

.alc-legend li::before {
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rn-signal);
  content: "";
}

/* Narrow plate: the glyph moves to the centre of the drawing and the leaders go. */
.alc-glyph {
  transform: translateX(100px);
}

.alc-leaders {
  display: none;
}

@container (min-width: 520px) {
  .alc-glyph {
    transform: none;
  }

  .alc-leaders {
    display: inline;
  }

  .alc-legend {
    position: absolute;
    inset: 0;
    display: block;
    padding: 0;
    pointer-events: none;
  }

  .alc-legend li {
    position: absolute;
    left: 65.4%;
    translate: 0 -50%;
  }

  .alc-legend li.is-air {
    top: 30.9%;
  }

  .alc-legend li.is-weight {
    top: 73.2%;
  }

  .alc-legend li.is-direction {
    top: 91.8%;
  }
}

.alc-symbol-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.alc-symbol-copy blockquote {
  margin: var(--rn-space-4) 0 var(--rn-space-5);
  padding: var(--rn-space-1) 0 var(--rn-space-1) var(--rn-space-5);
  border-left: 2px solid var(--rn-signal);
  color: var(--rn-text);
  font: var(--rn-weight-title) var(--rn-fs-title) / var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.alc-symbol-copy > p:first-child {
  margin-top: 0;
}

/* One column: the H2, then the plate, then the copy, which ends on its link. The card spans the column like the
   hero's stage; the drawing inside keeps a drawing's size (at most 560px) and sits in the middle of it. */
@media (max-width: 900px) {
  .alc-symbol-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .alc-diagram-plate {
    max-width: 560px;
    margin-inline: auto;
  }
}

/* 7. Method ───────────────────────────────────────────────────────────────────────────────────────────────────
   Four steps on one rule, titles aligned across the row; they land one after another (data-rn-stagger-rows, a
   quarter beat apart). The route to the audit follows straight after. */
.alc-method-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: end;
  gap: var(--rn-space-5) var(--rn-space-8);
  margin-bottom: clamp(40px, 5vw, 72px);
}

.alc-method-head > p {
  margin: 0;
}

.alc-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rn-space-6) clamp(20px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.alc-steps > li {
  display: flex;
  flex-direction: column;
  gap: var(--rn-space-3);
  min-width: 0;
  padding-top: var(--rn-space-5);
  border-top: 1px solid var(--rn-line-strong-on-paper);
}

.alc-step-n {
  color: var(--rn-muted);
  font: 500 var(--rn-fs-label)/1 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
}

.alc-steps h3 {
  margin: var(--rn-space-4) 0 0;
  font: var(--rn-weight-title) var(--rn-fs-title) / var(--rn-lh-title) var(--rn-font-body);
  letter-spacing: var(--rn-track-title);
}

.alc-steps p {
  max-width: 34ch;
  margin: 0;
  color: var(--rn-muted);
  font: 400 var(--rn-fs-body) / var(--rn-lh-body) var(--rn-font-body);
}

.alc-method-actions {
  margin-top: clamp(40px, 5vw, 64px);
}

@media (max-width: 1180px) {
  .alc-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .alc-method-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .alc-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--rn-space-5);
  }

  .alc-steps > li {
    display: grid;
    grid-template-columns: 3em minmax(0, 1fr);
    gap: var(--rn-space-2) 0;
    padding-top: var(--rn-space-4);
  }

  .alc-step-n {
    grid-row: span 2;
    padding-top: 0.45em;
  }

  .alc-steps h3 {
    margin: 0;
  }
}

/* 8. The reel ─────────────────────────────────────────────────────────────────────────────────────────────────
   One card: the 16:10 reel with its own pause toggle, then a caption bar holding the link. The link covers the
   whole card; the toggle sits above it. No words over the footage, no scrim. */
.alc-output-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: var(--rn-space-7) clamp(40px, 6vw, 96px);
}

.alc-output-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.alc-reel {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rn-ring);
  border-radius: var(--rn-radius-card);
  background: var(--rn-ink-soft);
  transition: border-color var(--rn-dur-ui) var(--rn-ease-ui), translate var(--rn-dur-ui) var(--rn-ease-ui);
}

.alc-reel-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--rn-stage);
}

.alc-reel-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--rn-dur-ui) var(--rn-ease-ui);
}

.alc-reel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rn-space-4);
  min-height: 56px;
  padding: 0 var(--rn-space-5);
  border-top: 1px solid var(--rn-ring);
  color: var(--rn-muted-on-ink);
  font: 500 var(--rn-fs-label)/1.2 var(--rn-font-mono);
  letter-spacing: var(--rn-track-label);
  text-transform: uppercase;
}

.alc-reel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--rn-target);
  color: var(--rn-text-on-ink);
  text-decoration: none;
}

.alc-reel-link::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
}

.alc-reel-link > span {
  transition: translate var(--rn-dur-snap) var(--rn-ease-snap);
}

.alc-reel-media > .rn-motion-toggle {
  z-index: 2;
}

.alc-reel:has(.alc-reel-link:focus-visible) {
  outline: var(--rn-focus-outline);
  outline-offset: var(--rn-focus-offset);
  box-shadow: var(--rn-focus-band);
}

.alc-reel-link:focus-visible {
  outline: 0;
  box-shadow: none;
}

@media (hover: hover) {
  .alc-reel:has(.alc-reel-link:hover) {
    border-color: var(--rn-muted-on-ink);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .alc-reel:has(.alc-reel-link:hover) {
    translate: 0 -2px;
  }

  .alc-reel:has(.alc-reel-link:hover) video {
    scale: 1.02;
  }

  .alc-reel-link:hover > span {
    translate: 3px 0;
  }
}

@media (max-width: 900px) {
  .alc-output-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 9. Reduced motion, pause, no JavaScript ─────────────────────────────────────────────────────────────────────
   Final states at once: the rune shows at once when it is ready (no fade), and under reduced motion only the
   static outline is ever drawn (site.js never loads WebGL). Without JavaScript the outline shows (hotfix.css
   hides the canvas) and nothing is held. */
html[data-motion="paused"] .alc-stage :is(.alchemy-rune-canvas, .rune-fallback-mark) {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .alc-stage :is(.alchemy-rune-canvas, .rune-fallback-mark),
  .alc-reel,
  .alc-reel-media > video,
  .alc-reel-link > span {
    transition: none;
  }
}