/* ==========================================================
   2ND STRING GAMING — SIGNAL INTRO
   ----------------------------------------------------------
   The approved intro package, scoped under .intro so it cannot
   reach the rest of the site.

   The package shipped five global rules — html, body, *, a and
   button. site.css owns those, and `button, a { font: inherit }`
   in particular would have flattened the typography of every
   link and button on all fourteen pages. So:

     :root  -> .intro          (tokens and type stay local)
     body   -> .intro
     *      -> .intro, .intro *
     a      -> .intro a
     button -> .intro button
     html   -> dropped         (scroll-behavior:smooth is not
                                ours to set for the whole site)

   Everything below the ADAPTATION banner is mine: it converts
   the package's 560vh scroll section into a fixed overlay, per
   the deliberate adaptation CLAUDE.md allows. Nothing above it
   was rewritten, so a new drop from the designer can be
   re-scoped the same way and pasted back in.

   The numeral face is NOT redeclared here. site.css already
   embeds a Hypermonosaturation digit subset under the same
   family name, and the chapter indices only ever show 01-05.
   ========================================================== */

@font-face {
  font-family: "HVD Rowdy";
  src: url("intro/rowdy-display.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  /* block, not swap.
     The fallback is Impact, which has completely different metrics, and
     the opening title is set at clamp(8rem, 15vw, 17rem). With swap the
     title painted in Impact at 17rem first and then jumped to HVD Rowdy —
     the "text not loading correctly" people actually saw. block holds the
     glyphs invisible for a short period instead, so the title appears once
     and appears right. The gate below covers the rest. */
  font-display: block;
}

/* ----------------------------------------------------------------
   Hold the display type until the face has arrived.

   font-display: block alone still has a swap period after its block
   period, so a slow network can still flash Impact. This gates the two
   places HVD Rowdy is used at display size on an attribute that intro.js
   sets from document.fonts.ready.

   It fails OPEN: intro.js sets the attribute on a timeout as well, so a
   font that never loads shows Impact rather than nothing. Invisible text
   is a worse failure than the wrong typeface.
   ---------------------------------------------------------------- */
/* visibility, NOT opacity.
   updateInterface() writes masthead.style.opacity on every frame, and an
   inline style beats a class rule — an opacity gate here would be undone
   by the first frame. The render loop never touches visibility, so the
   two do not fight. */
.intro[data-fonts="pending"] .masthead,
.intro[data-fonts="pending"] .chapter h2 {
  visibility: hidden;
}
.intro[data-fonts="ready"] .masthead,
.intro[data-fonts="ready"] .chapter h2 {
  visibility: visible;
}

.intro {--black: #0a0a0a;
  --deep: #171717;
  --paper: #f4f2ed;
  --orange: #ff4f12;
  --mint: #98f5c5;
  --gray: #b8b8b3;
  --progress: 0;
  --pointer-x: 0;
  --pointer-y: 0;
  --velocity: 0;
  --transition-energy: 0;
  --alive-time: 0;
  --exit-progress: 0;
  --exit-shade: 1;
  --exit-copy-opacity: 1;
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--black);
  color: var(--paper);}
.intro, .intro * {box-sizing: border-box;}
.intro {margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--paper);}
.intro button,
.intro a {font: inherit;}
.intro a {color: inherit;}
.intro .hero-scroll {position: relative;
  height: 560vh;
  background: var(--black);}
.intro .hero-stage {position: sticky;
  top: 0;
  width: 100%;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background:
    repeating-linear-gradient(90deg, rgba(244, 242, 237, .035) 0 1px, transparent 1px 8.333vw),
    repeating-linear-gradient(0deg, rgba(244, 242, 237, .027) 0 1px, transparent 1px 12.5vh),
    radial-gradient(circle at 50% 47%, rgba(255, 79, 18, .065), transparent 32%),
    var(--black);}
.intro .hero-stage::before {display: none;}
.intro .hero-stage.is-exiting {position: fixed;
  inset: 0;
  top: 0;
  z-index: 100;
  height: 100svh;
  min-height: 0;
  pointer-events: none;
  background: rgba(10, 10, 10, var(--exit-shade));}
.intro .hero-stage.is-exiting::after {opacity: calc(.5 * var(--exit-shade));}
.intro .hero-stage.is-exiting .utility-bar,
.intro .hero-stage.is-exiting .chapter-stack,
.intro .hero-stage.is-exiting .progress-rail,
.intro .hero-stage.is-exiting .scroll-prompt,
.intro .hero-stage.is-exiting .brand-line {opacity: var(--exit-copy-opacity);
  transition: none;}
.intro .hero-stage.is-exiting .media-viewport {filter: drop-shadow(0 0 52px rgba(255, 79, 18, .42));}
.intro .hero-stage.is-exiting .signal-canvas {mix-blend-mode: normal;}
.intro .hero-stage::after {content: "";
  position: absolute;
  inset: -20%;
  z-index: 7;
  pointer-events: none;
  opacity: .5;
  background:
    linear-gradient(90deg, transparent 0 49.95%, rgba(244, 242, 237, .045) 49.95% 50.05%, transparent 50.05%),
    linear-gradient(0deg, transparent 0 49.95%, rgba(244, 242, 237, .035) 49.95% 50.05%, transparent 50.05%);
  transform: translate3d(calc(var(--pointer-x) * -3px), calc(var(--pointer-y) * -3px), 0);}
.intro .signal-field,
.intro .signal-field > * {position: absolute;
  inset: 0;
  pointer-events: none;}
.intro .signal-field {display: none;}
.intro .signal-cloud {opacity: .24;
  background-image: radial-gradient(circle, var(--paper) 0 1.2px, transparent 1.3px);
  background-size: 7px 7px;
  filter: contrast(180%);
  will-change: transform;}
.intro .signal-cloud--one {clip-path: polygon(0 30%, 43% 42%, 19% 67%, 77% 81%, 100% 58%, 100% 100%, 0 100%);
  animation: cloudDrift 16s steps(32) infinite alternate;}
.intro .signal-cloud--two {opacity: .12;
  background-size: 11px 11px;
  clip-path: polygon(0 0, 100% 0, 100% 21%, 62% 37%, 77% 60%, 30% 51%, 0 73%);
  animation: cloudDrift 23s steps(40) infinite alternate-reverse;}
.intro .signal-sweep {opacity: .34;
  background: linear-gradient(90deg, transparent 0 42%, rgba(255, 79, 18, .14) 49%, rgba(244, 242, 237, .18) 50%, transparent 58%);
  transform: translateX(calc((var(--progress) * 170%) - 100%)) skewX(-12deg);}
.intro .utility-bar {position: absolute;
  inset: 22px 24px auto;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 20px;
  font-family: "Courier New", monospace;
  font-size: .72rem;
  letter-spacing: .08em;}
.intro .signal-label {margin: 8px 0 0;
  color: var(--orange);
  font-weight: 700;}
.intro .signal-label::before {content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; background: var(--orange);}
.intro .format-readout {justify-self: end;
  display: flex;
  gap: 10px;
  margin: 8px 0 0;}
.intro .format-readout b {color: var(--orange);}
.intro .format-readout em {color: var(--gray); font-style: normal;}
.intro .skip-control {position: relative;
  display: inline-flex;
  width: max-content;
  align-items: center;
  gap: 13px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(244, 242, 237, .09);
  border-radius: 2px;
  background: #0d0d0d;
  color: #6f6f6c;
  box-shadow: inset 1px 1px 0 #050505, inset -1px -1px 0 #242424, 0 0 0 1px #050505;
  text-shadow: 1px 1px #000;
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .2s;}
.intro .skip-control::before {content: "";
  width: 5px;
  height: 5px;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(255, 79, 18, .5);}
.intro .skip-control:hover,
.intro .skip-control:focus-visible {color: var(--paper);
  border-color: var(--orange);
  outline: none;
  transform: translateY(-1px);}
.intro .frame-corners {position: absolute; inset: 72px 68px 58px; z-index: 20; pointer-events: none;}
.intro .frame-corners i {position: absolute; width: 20px; height: 20px; opacity: .55;}
.intro .frame-corners i:nth-child(1) {top: 0; left: 0; border-top: 1px solid var(--paper); border-left: 1px solid var(--paper);}
.intro .frame-corners i:nth-child(2) {top: 0; right: 0; border-top: 1px solid var(--paper); border-right: 1px solid var(--paper);}
.intro .frame-corners i:nth-child(3) {bottom: 0; left: 0; border-bottom: 1px solid var(--paper); border-left: 1px solid var(--paper);}
.intro .frame-corners i:nth-child(4) {right: 0; bottom: 0; border-right: 1px solid var(--paper); border-bottom: 1px solid var(--paper);}
.intro .masthead {position: absolute;
  top: 50%;
  left: 50%;
  z-index: 21;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: min(96vw, 1500px);
  margin: 0;
  color: var(--orange);
  font-family: "HVD Rowdy", Impact, sans-serif;
  font-size: clamp(8rem, 15vw, 17rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.035em;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  mix-blend-mode: screen;
  text-shadow: 0 0 calc(8px * var(--transition-energy)) rgba(255, 79, 18, .7);
  transform: translate3d(calc(-50% + var(--pointer-x) * -7px), calc(-50% + var(--pointer-y) * -3px), 0);
  will-change: transform, opacity;}
.intro .masthead span {display: inline-block;}
.intro .masthead .masthead-wide {font-size: clamp(7rem, 12.2vw, 14rem);
  white-space: nowrap;}
.intro .media-viewport {position: absolute;
  z-index: 10;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  perspective: 1100px;
  filter: drop-shadow(0 0 30px rgba(255, 79, 18, calc(.04 + var(--transition-energy) * .14)));}
.intro .signal-canvas {position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  mix-blend-mode: screen;}
.intro .canvas-status {position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  padding: 8px 11px;
  border: 1px solid rgba(244, 242, 237, .16);
  color: var(--gray);
  background: var(--black);
  font: .68rem/1 "Courier New", monospace;
  letter-spacing: .13em;
  transform: translate(-50%, -50%);
  transition: opacity .3s;}
.intro .media-viewport.is-ready .canvas-status {opacity: 0;}
.intro .media-orbit {position: absolute;
  inset: 9%;
  border: 1px dashed rgba(244, 242, 237, .11);
  border-radius: 50%;
  opacity: calc(.12 + var(--transition-energy) * .46);
  transform: rotate(calc(var(--alive-time) * 1deg));}
.intro .media-orbit::before,
.intro .media-orbit::after {content: "";
  position: absolute;
  border-radius: 50%;}
.intro .media-orbit::before {inset: 10%; border: 1px dotted rgba(255, 79, 18, .24);}
.intro .media-orbit::after {inset: 38%; background: radial-gradient(circle, transparent 0 35%, rgba(255, 79, 18, .2) 36% 40%, transparent 41%);}
.intro .pixel-burst {position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;}
.intro .pixel-burst span {position: absolute;
  display: block;
  width: var(--pixel-size, 4px);
  height: var(--pixel-size, 4px);
  background: var(--pixel-color, var(--paper));
  image-rendering: pixelated;
  box-shadow: 0 0 8px color-mix(in srgb, var(--pixel-color, var(--paper)) 55%, transparent);
  will-change: transform, opacity;}
.intro .media-object {position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  opacity: 0;
  transform-origin: center;
  mix-blend-mode: screen;
  filter: contrast(1.18) saturate(.95);
  will-change: transform, opacity, filter;}
.intro .media-object--mini {padding: 10%;}
.intro .pixel-ghost {position: absolute;
  inset: 17%;
  opacity: calc(var(--transition-energy) * .45);
  background-image: radial-gradient(circle, var(--orange) 0 1.5px, transparent 1.7px);
  background-size: 8px 8px;
  mask-image: radial-gradient(circle, transparent 0 18%, black 20% 48%, transparent 70%);
  mix-blend-mode: screen;}
.intro .pixel-ghost--a {transform: translate3d(calc(var(--velocity) * 36px), 0, 0) rotate(calc(var(--alive-time) * -2deg));}
.intro .pixel-ghost--b {background-size: 13px 13px; transform: translate3d(calc(var(--velocity) * -24px), 0, 0) rotate(calc(var(--alive-time) * 1.5deg));}
.intro .glitch-slice {position: absolute;
  left: 5%;
  right: 5%;
  height: 2px;
  z-index: 8;
  opacity: calc(var(--transition-energy) * .9);
  background: var(--orange);
  box-shadow: 0 0 14px rgba(255, 79, 18, .75);
  transform: translateX(calc(var(--velocity) * 90px));}
.intro .glitch-slice--one {top: 32%;}
.intro .glitch-slice--two {top: 53%; left: 14%;}
.intro .glitch-slice--three {top: 71%; right: 20%;}
.intro .chapter-stack {position: absolute;
  z-index: 25;
  inset: 0;
  width: 100%;
  height: 100%;
  text-align: center;}
.intro .chapter {position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  pointer-events: none;
  transition: none;}
.intro .chapter.is-active {pointer-events: auto;}
.intro .chapter-index {position: absolute;
  top: calc(50% - clamp(128px, 17vh, 178px));
  left: 50%;
  display: block;
  margin: 0;
  padding: 7px 10px 6px;
  border: 1px solid rgba(255, 79, 18, .72);
  background: rgba(10, 10, 10, .82);
  font-family: "Hypermonosaturation", "Courier New", monospace;
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--orange);
  transform: translateX(-50%);}
.intro .chapter[data-chapter="4"] .chapter-index {color: var(--mint);}
.intro .chapter h2 {position: absolute;
  top: 50%;
  left: 50%;
  width: min(88vw, 1180px);
  margin: 0;
  color: var(--paper);
  font-family: "HVD Rowdy", Impact, sans-serif;
  font-size: clamp(4rem, 8vw, 9rem);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.035em;
  text-wrap: balance;
  -webkit-text-stroke: 1px rgba(10, 10, 10, .72);
  text-shadow:
    0 3px 0 var(--black),
    0 0 18px rgba(10, 10, 10, .88),
    8px 8px 0 rgba(10, 10, 10, .28);
  transform: translate(-50%, -50%);}
.intro .chapter--final {display: flex;
  align-items: center;
  justify-content: center;}
.intro .chapter--final h2 {color: var(--paper);
  font-size: clamp(4rem, 9vw, 10.5rem);}
.intro .entry-button {display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  min-width: 250px;
  width: min(100%, 380px);
  margin-top: clamp(26px, 5vh, 58px);
  padding: 19px 21px;
  background: var(--orange);
  border: 1px solid var(--orange);
  color: var(--black);
  font-family: "Courier New", monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-decoration: none;
  box-shadow: 7px 7px 0 var(--paper);
  transition: transform .18s, box-shadow .18s, color .18s, background .18s;}
.intro .entry-button:hover,
.intro .entry-button:focus-visible {outline: none;
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--paper);
  background: var(--paper);
  color: var(--black);}
.intro .progress-rail {position: absolute;
  z-index: 24;
  top: 22%;
  right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 8px;
  height: 56%;}
.intro .progress-rail::before,
.intro .progress-fill {content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 1px;}
.intro .progress-rail::before {bottom: 0; background: rgba(244, 242, 237, .18);}
.intro .progress-fill {height: calc(var(--progress) * 100%); background: var(--orange);}
.intro .progress-rail i {position: relative; z-index: 2; width: 7px; height: 7px; background: var(--black); border: 1px solid rgba(244, 242, 237, .45);}
.intro .progress-rail i.is-reached {border-color: var(--orange);}
.intro .progress-rail i.is-current {background: var(--orange); box-shadow: 0 0 10px rgba(255, 79, 18, .8); transform: scale(1.35);}
.intro .scroll-prompt {position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: .66rem;
  letter-spacing: .13em;
  opacity: calc(1 - min(var(--progress) * 10, 1));
  transform: translateX(-50%);}
.intro .scroll-prompt i {display: block; width: 1px; height: 25px; background: var(--orange); animation: scrollPulse 1.4s steps(5) infinite;}
.intro .brand-line {position: absolute;
  z-index: 25;
  right: 65px;
  bottom: 28px;
  margin: 0;
  font-family: "Courier New", monospace;
  font-size: .67rem;
  letter-spacing: .1em;
  color: var(--gray);}
.intro .utility-bar,
.intro .progress-rail,
.intro .scroll-prompt,
.intro .brand-line {transition: opacity .35s ease;}
.intro .hero-stage.is-opening-stage .signal-label,
.intro .hero-stage.is-opening-stage .progress-rail,
.intro .hero-stage.is-opening-stage .brand-line {opacity: 0;}
.intro .site-entry {height: 100svh;
  overflow: hidden;
  background: var(--paper);
  color: var(--black);
  outline: none;}
.intro .site-entry.is-pixel-revealing {transform-origin: center;
  will-change: filter, transform;}
.intro .entry-nav {display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 70px;
  border-bottom: 1px solid var(--black);
  font-family: "Courier New", monospace;
  font-size: .74rem;
  letter-spacing: .07em;}
.intro .entry-nav > * {margin: 0; padding: 0 25px;}
.intro .entry-nav > :last-child {justify-self: end;}
.intro .entry-logo {font-family: Arial, Helvetica, sans-serif; font-size: 1.2rem; font-weight: 800; text-decoration: none;}
.intro .entry-grid {display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .85fr);
  height: calc(100svh - 70px);
  min-height: 0;}
.intro .entry-heading {display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
  padding: clamp(26px, min(4.2vw, 6vh), 68px);
  border-right: 1px solid var(--black);
  background:
    repeating-linear-gradient(90deg, rgba(10, 10, 10, .055) 0 1px, transparent 1px 12.5%),
    repeating-linear-gradient(0deg, rgba(10, 10, 10, .045) 0 1px, transparent 1px 12.5%),
    var(--paper);}
.intro .entry-heading h2 {display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(3.8rem, min(8.5vw, 12vh), 8rem);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.08em;
  -webkit-text-stroke: .2px currentColor;
  paint-order: stroke fill;}
.intro .entry-heading h2 > span {display: block; white-space: nowrap;}
.intro .entry-heading h2 .entry-line--play {font-size: 1.71em;}
.intro .entry-heading h2 .entry-line--like {font-size: 2em;}
.intro .entry-heading h2 .entry-line--you {font-size: 2.1em;}
.intro .entry-heading h2 .entry-line--belong {font-size: 1.04em;
  transform: scaleX(1.035);
  transform-origin: left center;}
.intro .entry-heading h2 .entry-period {display: inline;
  color: var(--orange);
  -webkit-text-stroke-color: var(--orange);}
.intro .entry-heading .entry-button {width: 100%;
  max-width: none;
  min-width: 0;
  margin-top: clamp(16px, 2vh, 26px);}
.intro .entry-copy {display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  gap: clamp(16px, 2.5vh, 28px);
  padding: clamp(24px, min(3.6vw, 4.5vh), 52px);
  background: var(--mint);
  font-size: clamp(1.1rem, min(1.65vw, 3.1vh), 1.75rem);
  line-height: 1.06;
  letter-spacing: -.03em;}
.intro .entry-copy p {margin: 0;}
.intro .pledge-kicker {font-family: "Courier New", monospace;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;}
.intro .pledge-body {display: grid;
  gap: clamp(16px, 2.6vh, 30px);}
.intro .pledge-impact {padding-top: clamp(16px, 2.4vh, 26px);
  border-top: 1px solid var(--black);
  font-size: clamp(1.7rem, min(2.75vw, 4.8vh), 3.2rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.055em;}
.intro .pledge-footer {display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid rgba(10, 10, 10, .35);
  font-family: "Courier New", monospace;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;}
.intro .pledge-footer a {width: max-content;}
@keyframes cloudDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.03); }
  to { transform: translate3d(3%, 2%, 0) scale(1.09); }
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.2); transform-origin: top; opacity: .35; }
  50% { transform: scaleY(1); transform-origin: top; opacity: 1; }
}
@media (max-width: 800px){
.intro .hero-scroll {height: 540vh;}
.intro .hero-stage {min-height: 540px;}
.intro .utility-bar {inset: 14px 14px auto; grid-template-columns: 1fr auto 1fr; gap: 8px; font-size: .58rem;}
.intro .signal-label {display: block; white-space: nowrap;}
.intro .signal-label::before {width: 4px; height: 4px; margin-right: 6px;}
.intro .format-readout {grid-column: 3; gap: 7px;}
.intro .frame-corners {inset: 62px 24px 50px;}
.intro .masthead {top: 50%;
    left: 50%;
    z-index: 21;
    flex-direction: column;
    gap: 0;
    width: calc(100vw - 24px);
    max-width: none;
    font-size: clamp(4.75rem, 25vw, 8rem);
    line-height: .82;
    letter-spacing: -.025em;
    text-align: center;
    white-space: normal;}
.intro .masthead .masthead-wide {font-size: clamp(2.65rem, 12vw, 5rem);}
.intro .media-viewport {inset: 0; width: 100%; height: 100%;}
.intro .chapter h2 {width: calc(100vw - 46px);
    font-size: clamp(2.8rem, 13vw, 5rem);
    line-height: .84;}
.intro .chapter--final h2 {font-size: clamp(3.2rem, 15vw, 5.2rem);}
.intro .chapter-index {top: calc(50% - clamp(105px, 15vh, 140px)); font-size: .86rem;}
.intro .entry-button {min-width: 220px; padding: 15px 17px;}
.intro .progress-rail {right: 13px;}
.intro .brand-line {display: none;}
.intro .scroll-prompt {bottom: 12px;}
.intro .site-entry {height: 100svh;}
.intro .entry-nav {height: 60px; grid-template-columns: 1fr 1fr;}
.intro .entry-nav p {display: none;}
.intro .entry-grid {height: calc(100svh - 60px);
    grid-template-columns: 1fr;
    grid-template-rows: 47% 53%;}
.intro .entry-heading {min-height: 0;
    justify-content: center;
    padding: clamp(18px, 5vw, 28px);
    border-right: 0;
    border-bottom: 1px solid var(--black);}
.intro .entry-heading h2 {font-size: clamp(2.4rem, min(11vw, 7.5vh), 2.6rem); line-height: .8; -webkit-text-stroke-width: .15px;}
.intro .entry-heading .entry-button {width: 100%;
    margin-top: clamp(12px, 2.5vh, 20px);
    padding: 12px 15px;}
.intro .entry-copy {min-height: 0;
    gap: clamp(9px, 1.5vh, 14px);
    padding: clamp(15px, 4vw, 22px);
    font-size: clamp(.96rem, 4vw, 1.12rem);
    line-height: 1;}
.intro .pledge-body {gap: clamp(9px, 1.5vh, 14px);}
.intro .pledge-impact {padding-top: clamp(9px, 1.5vh, 14px);
    font-size: clamp(1.45rem, 7.3vw, 2.2rem);
    line-height: .84;}
.intro .pledge-footer {align-items: center;
    flex-direction: row;
    gap: 12px;
    padding-top: 8px;
    font-size: .62rem;}
}
@media (max-width: 800px) and (max-height: 700px){
.intro .entry-grid {grid-template-rows: 45% 55%;}
.intro .entry-heading h2 {font-size: clamp(2.15rem, min(8vw, 6.8vh), 2.4rem); line-height: .76;}
.intro .entry-heading .entry-button {min-height: 40px; margin-top: 9px; padding-block: 9px;}
.intro .entry-copy {font-size: .9rem; padding-block: 12px;}
.intro .pledge-kicker {font-size: .64rem;}
.intro .pledge-impact {font-size: clamp(1.25rem, 6.2vw, 1.75rem);}
.intro .pledge-footer {font-size: .55rem;}
}
@media (max-width: 500px){
.intro .signal-label {display: none;}
.intro .utility-bar {grid-template-columns: 1fr 1fr;}
.intro .format-readout {grid-column: 2;}
}
@media (prefers-reduced-motion: reduce){
.intro .hero-scroll {height: 100svh;}
.intro .signal-cloud,
.intro .scroll-prompt i {animation: none;}
.intro .media-object {display: none;}
.intro .media-object[data-stage="5"] {display: block; opacity: 1 !important; transform: none !important;}
.intro .chapter {display: none;}
.intro .chapter[data-chapter="5"] {display: block; opacity: 1 !important; transform: none !important;}
.intro .scroll-prompt {display: none;}
}
/* ---- utility bar: two controls where the package had one ---- */
.intro .skip-group{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.intro .skip-control[data-auto][aria-pressed="true"]{
  color:var(--black);
  background:var(--orange);
  border-color:var(--orange);
  text-shadow:none;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.35), 0 0 0 1px #050505;
}
.intro .skip-control[data-auto][aria-pressed="true"]::before{
  background:var(--black);
  box-shadow:none;
}
@media (max-width:800px){
  .intro .skip-group{gap:6px}
  .intro .skip-control{min-height:32px;padding:0 9px;gap:8px}
}
@media (max-width:420px){
  .intro .skip-control[data-auto] span[aria-hidden]{display:none}
}

/* ==========================================================
   ADAPTATION — scroll section to fixed overlay
   ========================================================== */

/* The overlay sits above the page but below the steered cursor
   (site.css puts that at 2147483646), so the arrow still draws
   over the intro and recolours against it. */
.intro{
  position:fixed;
  inset:0;
  z-index:9000;
  overflow:hidden;
  background:var(--black);
}
.intro[hidden]{display:none}

/* The page behind is frozen while the intro owns the screen. */
html.intro-open,
html.intro-open body{overflow:hidden}

/* 560vh of document became the overlay itself. The stage was
   sticky inside that scroll; now it simply fills the overlay.

   background:transparent is load-bearing. The package gave
   .hero-scroll a solid black fill, which was harmless there
   because the page had scrolled past it by the time the
   explosion ran. Here it never moves, so that fill sat between
   the dissolving pixels and the entry page and the reveal came
   out as black-then-pop. The overlay itself carries the black
   ground instead, and .hero-stage is opaque until it starts
   fading, so nothing shows through early. */
.intro .hero-scroll{
  position:absolute;
  inset:0;
  height:100%;
  z-index:2;
  background:transparent;
}
.intro .hero-stage{
  position:absolute;
  inset:0;
  height:100%;
  min-height:0;
}

/* The entry page used to be the next section down, revealed by
   scrolling behind the explosion. Now it lies underneath the
   stage and is uncovered in place.

   It is painted at full opacity the whole time, never faded in.
   The explosion works by drawing tiles that lerp from black to
   the colour of whatever part of this page sits behind them —
   mint panel, orange button, paper ground — so the page has to
   already be there for the pixels to be revealing something.
   Fading it in behind them is what produced a black dissolve
   followed by the page appearing. .hero-stage hides it until the
   exit begins, which is the only concealment needed. */
.intro .site-entry{
  position:absolute;
  inset:0;
  z-index:1;
  height:100%;
  pointer-events:none;
}
.intro .site-entry.is-pixel-revealing{pointer-events:auto}

/* Once the explosion has finished, the stage stops intercepting
   anything and the entry page is the only live layer. */
.intro.is-entered .hero-scroll{display:none}

/* Dismissing the overlay onto the real home page. */
.intro.is-dismissing{
  opacity:0;
  transition:opacity .42s var(--ease-cut, cubic-bezier(.2,.8,.2,1));
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .intro .hero-scroll{height:100%}
  .intro.is-dismissing{transition:none}
}