@charset "UTF-8";
/* ==========================================================================
   ROMEOW — The Ballet Cat on Solana
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Layout primitives
   4.  Typography
   5.  Atmosphere (grain, spotlight, dividers, Solana glyph)
   6.  Components (buttons, chips, stickers, tape, pins, paper)
   7.  Navigation (marquee)
   8.  Hero & curtains
   9.  Story & playbill
   10. Video
   11. Polaroid board
   12. Gallery & lightbox
   13. Five acts
   14. Solana
   15. How to buy & contract address
   16. Chip wall & community
   17. Footer
   18. Reveal choreography & reduced motion
   ========================================================================== */

/* ============================================================ 1. TOKENS == */
:root {
  /* Palette */
  --black:      #0B0909;
  --burgundy:   #5C101B;
  --stage-red:  #8E1E2D;
  --ginger:     #D87828;
  --ivory:      #F1E5CE;
  --gold:       #C49A55;
  --midnight:   #111827;
  --sol-purple: #9945FF;
  --sol-green:  #14F195;
  --sol-cyan:   #00D1FF;

  /* Derived surfaces */
  --ink:        #070606;
  --wood:       #1A1210;
  --wood-2:     #241814;
  --ivory-soft: rgba(241, 229, 206, 0.80);
  --ivory-mute: rgba(241, 229, 206, 0.62);
  --hair:       rgba(196, 154, 85, 0.26);
  --hair-soft:  rgba(196, 154, 85, 0.14);

  --sol-gradient: linear-gradient(135deg, #9945FF 0%, #00D1FF 48%, #14F195 100%);
  --ginger-gradient: linear-gradient(135deg, #E8993F 0%, #D87828 52%, #B85C1C 100%);

  /* Type */
  --font-display: "Cormorant Garamond", "Playfair Display", "Iowan Old Style",
                  "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-hand:    "Caveat", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;

  /* Rhythm */
  --wrap:        1240px;
  --wrap-narrow: 820px;
  --gutter:      clamp(1.15rem, 4vw, 3rem);
  --section-y:   clamp(4.5rem, 9vw, 8.5rem);
  --radius:      14px;
  --radius-sm:   8px;

  /* --bar-h is the authored height of the marquee row and is never computed
     from the DOM. --header-h is the *measured* header height, used only for
     scroll offsets and the mobile panel. Keeping them separate is what stops
     the measure -> min-height -> measure feedback loop. */
  --bar-h: 68px;
  --header-h: 68px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-curtain: cubic-bezier(0.62, 0.02, 0.24, 1);
  --reveal-shift: 22px;

  /* Torn-paper edge used on several "printed" elements */
  --deckle: polygon(
    0 3px, 4% 0, 12% 4px, 22% 1px, 33% 5px, 45% 0, 57% 4px, 68% 1px, 79% 5px,
    89% 0, 97% 4px, 100% 2px, 100% calc(100% - 4px), 95% 100%, 85% calc(100% - 4px),
    74% calc(100% - 1px), 63% calc(100% - 5px), 51% 100%, 39% calc(100% - 3px),
    27% calc(100% - 1px), 16% calc(100% - 5px), 6% 100%, 0 calc(100% - 3px)
  );
}

/* ==================================================== 2. RESET & BASE == */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
  margin: 0;
  background-color: var(--black);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.68;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* Worn dark wooden floor: warm boards + a low amber house light. */
  background-image:
    radial-gradient(120% 70% at 50% -8%, rgba(216, 120, 40, 0.10), transparent 62%),
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.014) 0 2px,
      transparent 2px 7px,
      rgba(0, 0, 0, 0.16) 7px 9px,
      transparent 9px 128px),
    linear-gradient(180deg, #0B0909 0%, #120C0B 38%, #0A0807 100%);
  background-attachment: scroll, scroll, fixed;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; border-style: none; }

button, input, code { font: inherit; color: inherit; }
button { background: none; border: 0; margin: 0; cursor: pointer; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ginger); }

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
figure, blockquote { margin: 0; }

hr { border: 0; border-top: 1px solid var(--hair); }

:focus-visible {
  outline: 2px solid var(--sol-cyan);
  outline-offset: 3px;
  border-radius: 3px;
}

::selection { background: var(--ginger); color: #140D08; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  z-index: 200;
  transform: translate(-50%, -140%);
  padding: 0.7rem 1.4rem;
  background: var(--ivory);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* Anchor targets clear the sticky marquee via html { scroll-padding-top }. */
.anchor { position: absolute; top: 0; width: 1px; height: 1px; }

/* ============================================== 3. LAYOUT PRIMITIVES == */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}
.wrap--narrow { max-width: var(--wrap-narrow); }

section { position: relative; }
.story, .moment, .board, .gallery, .acts, .solana, .buy, .community {
  padding-block: var(--section-y);
}
.chipwall { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* =========================================================== 4. TYPE == */
.kicker {
  margin: 0 0 0.85rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}
.kicker::before {
  content: "";
  display: inline-block;
  width: 1.9rem; height: 1px;
  margin-right: 0.85rem;
  vertical-align: 0.28em;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.section-title {
  margin: 0 0 1.4rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.35rem + 3.6vw, 4.35rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-wrap: balance;
  color: var(--ivory);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.section-title--center { text-align: center; }
.section-title--center + .section-lede { margin-inline: auto; text-align: center; }

.section-lede {
  max-width: 62ch;
  margin: 0 0 clamp(2rem, 4vw, 3.25rem);
  color: var(--ivory-soft);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.19rem);
}

.eyebrow {
  margin: 0 0 1rem;
  font-size: clamp(0.66rem, 0.6rem + 0.3vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.prose p { margin: 0 0 1.15em; color: var(--ivory-soft); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ivory); font-weight: 600; }
.prose__close {
  padding-top: 0.4rem;
  border-top: 1px solid var(--hair-soft);
  font-family: var(--font-display);
  font-size: 1.32em;
  line-height: 1.42;
}
.prose__close strong { color: var(--ginger); font-weight: 600; }

/* ===================================================== 5. ATMOSPHERE == */

/* Photographic grain — one tiny SVG turbulence tile, no image request. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Amber house light that drifts with the pointer (desktop only, JS-driven). */
.pointer-spot {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s linear;
  background: radial-gradient(
    38rem 38rem at var(--spot-x, 50%) var(--spot-y, 30%),
    rgba(216, 120, 40, 0.085) 0%,
    rgba(196, 154, 85, 0.04) 38%,
    transparent 68%);
}
body.has-pointer .pointer-spot { opacity: 1; }

/* Solana glyph */
.sol-mark { width: 1.15em; height: 0.92em; flex: none; }

.divider {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.8rem);
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}
.divider__rule {
  flex: 1;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, var(--hair) 18%, var(--hair) 82%, transparent);
  position: relative;
}
/* A faint run of Solana marks along the rule. */
.divider__rule::after {
  content: "";
  position: absolute;
  inset: -3px 0 auto;
  height: 7px;
  opacity: 0.4;
  background-image: repeating-linear-gradient(
    62deg,
    rgba(153, 69, 255, 0.55) 0 2px,
    transparent 2px 5px,
    rgba(0, 209, 255, 0.5) 5px 7px,
    transparent 7px 10px,
    rgba(20, 241, 149, 0.45) 10px 12px,
    transparent 12px 30px);
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent);
}
.divider .sol-mark { width: 2.1rem; height: 1.7rem; opacity: 0.85; }
.divider--foot { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* ===================================================== 6. COMPONENTS == */

/* --- Buttons --- */
.btn {
  --btn-bg: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 46px;
  padding: 0.78em 1.5em;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease),
              background-color 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease);
}
.btn--lg { min-height: 54px; padding: 0.95em 1.9em; font-size: 0.9rem; }
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

/* Primary: ginger stage light, with a Solana gradient underglow on hover. */
.btn--buy {
  background: var(--ginger-gradient);
  color: #16100C;
  border: 1px solid rgba(255, 226, 190, 0.42);
  box-shadow: 0 4px 0 rgba(120, 55, 12, 0.65), 0 12px 28px -12px rgba(216, 120, 40, 0.75);
}
/* Hover picks up a Solana-tinted halo, layered as shadows so it can never be
   trapped behind an ancestor's background the way a z-index:-1 pseudo can. */
.btn--buy:hover,
.btn--buy:focus-visible {
  color: #16100C;
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 rgba(120, 55, 12, 0.6),
    0 18px 36px -14px rgba(216, 120, 40, 0.9),
    0 0 20px -2px rgba(153, 69, 255, 0.5),
    0 0 30px -4px rgba(0, 209, 255, 0.34),
    0 0 44px -6px rgba(20, 241, 149, 0.24);
}
.btn--buy:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(120, 55, 12, 0.7); }

/* Secondary: ivory outline on velvet. */
.btn--ghost {
  color: var(--ivory);
  background: rgba(241, 229, 206, 0.05);
  border: 1px solid rgba(241, 229, 206, 0.42);
  backdrop-filter: blur(2px);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  color: var(--ivory);
  background: rgba(241, 229, 206, 0.12);
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* Social: brushed brass plate. */
.btn--social {
  width: 100%;
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(36, 24, 20, 0.9), rgba(18, 12, 11, 0.9));
  border: 1px solid var(--hair);
}
.btn--social:hover, .btn--social:focus-visible {
  color: var(--ink);
  background: var(--ivory);
  border-color: var(--ivory);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(241, 229, 206, 0.6);
}
.btn--social:hover .icon { color: var(--ink); }

/* Copy button */
.btn--copy {
  color: var(--ivory);
  background: rgba(241, 229, 206, 0.07);
  border: 1px solid var(--hair);
}
.btn--copy:hover, .btn--copy:focus-visible {
  border-color: var(--sol-green);
  background: rgba(20, 241, 149, 0.1);
}
.btn--copy .icon--check { display: none; }
.btn--copy.is-copied {
  color: #06251A;
  background: var(--sol-green);
  border-color: var(--sol-green);
  animation: copy-pop 0.45s var(--ease);
}
.btn--copy.is-copied .icon--copy { display: none; }
.btn--copy.is-copied .icon--check { display: block; }
@keyframes copy-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* --- Value chips: part ticket, part luggage label --- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.7rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem 0.5rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  background:
    linear-gradient(180deg, rgba(241, 229, 206, 0.11), rgba(241, 229, 206, 0.045));
  border: 1px solid rgba(241, 229, 206, 0.3);
  border-radius: 4px;
  /* Notched like a torn ticket stub. */
  clip-path: polygon(
    0 0, 100% 0, 100% calc(50% - 5px), calc(100% - 4px) 50%,
    100% calc(50% + 5px), 100% 100%, 0 100%,
    0 calc(50% + 5px), 4px 50%, 0 calc(50% - 5px));
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.chip__punch {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--gold);
}
.chip:hover {
  transform: translateY(-3px) rotate(-0.5deg);
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(241, 229, 206, 0.18), rgba(241, 229, 206, 0.07));
}

.chips--hero { margin-top: clamp(1.5rem, 3vw, 2.1rem); }

/* Bottom wall: bigger, warmer, with a punched hole like a backstage pass. */
.chips--wall {
  justify-content: center;
  gap: 0.85rem 1rem;
}
.chip--tag {
  padding: 0.72rem 1.15rem 0.72rem 0.95rem;
  font-size: 0.74rem;
  letter-spacing: 0.15em;
  background:
    linear-gradient(180deg, rgba(241, 229, 206, 0.95), rgba(226, 210, 180, 0.86));
  color: #241813;
  border-color: rgba(120, 90, 50, 0.5);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, 0.9), inset 0 -2px 0 rgba(120, 90, 50, 0.18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.chip--tag .chip__punch { box-shadow: inset 0 0 0 1.5px rgba(90, 60, 30, 0.55); }
.chip--tag:hover {
  transform: translateY(-4px) rotate(0.8deg);
  background: linear-gradient(180deg, #FBF3E2, #EADCC0);
  border-color: rgba(120, 90, 50, 0.75);
}
.chip--tag:nth-child(even):hover { transform: translateY(-4px) rotate(-0.8deg); }
.chip--hero {
  background: var(--ginger-gradient);
  color: #1B0F06;
  border-color: rgba(255, 226, 190, 0.6);
  letter-spacing: 0.2em;
}
.chip--hero .chip__punch { box-shadow: inset 0 0 0 1.5px rgba(40, 20, 5, 0.6); }
.chip--hero:hover { background: var(--ginger-gradient); }

/* --- Sticker badges --- */
.sticker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.62rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
  color: #1B0F06;
  background: var(--ginger);
  border: 2px solid #2A1608;
  border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.95);
}
.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.sticker--r1 { transform: rotate(-4deg); background: var(--ginger); }
.sticker--r2 { transform: rotate(3deg);  background: var(--ivory); }
.sticker--r3 { transform: rotate(-2deg); background: var(--gold); }
.sticker--r4 { transform: rotate(4deg);  background: var(--stage-red); color: var(--ivory); border-color: #2A0B10; }
.sticker--r5 {
  transform: rotate(-3deg);
  background: var(--sol-gradient);
  color: #06131A;
  border-color: #071018;
}
/* Tiny bounce the first time each badge appears. */
.badges .sticker.is-visible { animation: badge-pop 0.62s var(--ease) both; }
.badges .sticker:nth-child(2).is-visible { animation-delay: 0.08s; }
.badges .sticker:nth-child(3).is-visible { animation-delay: 0.16s; }
.badges .sticker:nth-child(4).is-visible { animation-delay: 0.24s; }
.badges .sticker:nth-child(5).is-visible { animation-delay: 0.32s; }
@keyframes badge-pop {
  0%   { opacity: 0; scale: 0.72; }
  55%  { opacity: 1; scale: 1.09; }
  78%  { scale: 0.97; }
  100% { opacity: 1; scale: 1; }
}

/* --- Paper ephemera: tape, pushpins, ticket stubs, scrawl, paws --- */
.tape {
  --tape-out: -18px;
  position: absolute;
  z-index: 3;
  width: 88px; height: 26px;
  background:
    linear-gradient(180deg, rgba(241, 229, 206, 0.42), rgba(214, 198, 166, 0.3));
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  border-right: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(1px);
}
.tape--tl { top: -13px; left: var(--tape-out); transform: rotate(-34deg); }
.tape--tr { top: -13px; right: var(--tape-out); transform: rotate(32deg); }

/* On narrow screens a tape strip hanging off a near-full-width card is enough
   to push the document a few pixels wide. Tuck it in instead. */
@media (max-width: 700px) {
  .tape { width: 62px; height: 22px; }
  .tape--tl, .tape--tr { --tape-out: -6px; }
}

.pin {
  position: absolute;
  z-index: 4;
  top: -9px; left: 50%;
  width: 17px; height: 17px;
  margin-left: -8.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #F0A05A, #B4441C 62%, #6B2208);
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.85), inset 0 -1px 2px rgba(0, 0, 0, 0.4);
}
.pin::after {
  content: "";
  position: absolute;
  top: 13px; left: 50%;
  width: 2px; height: 8px;
  margin-left: -1px;
  background: linear-gradient(180deg, #9A9187, rgba(154, 145, 135, 0));
}

.stub {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 3px;
  width: 152px;
  padding: 0.55rem 0.7rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #2C1D14;
  background: linear-gradient(175deg, #EFE2C6, #D9C9A4);
  border: 1px dashed rgba(90, 62, 34, 0.55);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 1);
}
.stub__row { display: flex; justify-content: space-between; gap: 0.5rem; }
.stub__row i { font-style: normal; opacity: 0.7; }
.stub--a { transform: rotate(-8deg); }
.stub--b { transform: rotate(6deg); }

.scrawl {
  position: absolute;
  z-index: 5;
  margin: 0;
  font-family: var(--font-hand);
  font-size: 1.4rem;
  line-height: 1.1;
  color: rgba(241, 229, 206, 0.72);
  transform: rotate(-7deg);
}
.scrawl::after {
  content: "";
  display: block;
  width: 62%;
  height: 6px;
  margin-top: 2px;
  border-bottom: 2px solid rgba(216, 120, 40, 0.5);
  border-radius: 0 0 40% 60%;
}

/* ================================================= 7. NAV / MARQUEE == */
.marquee {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(11, 9, 9, 0.94), rgba(11, 9, 9, 0.82));
  border-bottom: 1px solid var(--hair);
  backdrop-filter: saturate(1.2) blur(12px);
  padding-top: env(safe-area-inset-top);
  transition: box-shadow 0.3s var(--ease), background-color 0.3s var(--ease);
}
.marquee.is-stuck {
  background: linear-gradient(180deg, rgba(9, 7, 7, 0.98), rgba(9, 7, 7, 0.92));
  box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 1);
}
/* Row of marquee bulbs along the bottom lip. */
.marquee__bulbs {
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background-image:
    radial-gradient(circle, rgba(255, 205, 130, 0.95) 0 1.1px, transparent 1.6px);
  background-size: 22px 3px;
  background-position: 6px center;
  opacity: 0.55;
}

.marquee__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: var(--wrap);
  min-height: var(--bar-h);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right));
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  flex: none;
  color: var(--ivory);
  text-decoration: none;
}
.brand__frame {
  display: block;
  width: 40px; height: 40px;
  flex: none;
  overflow: hidden;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 4px 12px -6px rgba(216, 120, 40, 0.8);
}
.brand__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.brand__text { display: grid; line-height: 1; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ivory);
}
.brand__sub {
  margin-top: 3px;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  color: var(--gold);
}
.brand:hover .brand__word { color: var(--ginger); }

/* Nav links + status + buy */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.6rem);
  margin-left: auto;
}
.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.5vw, 1.5rem);
}
.nav__list a {
  position: relative;
  display: block;
  padding: 0.45rem 0.15rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ivory-soft);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.nav__list a::after {
  content: "";
  position: absolute;
  inset: auto 0.15rem 0.15rem;
  height: 1px;
  background: var(--ginger);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.26s var(--ease);
}
.nav__list a:hover,
.nav__list a[aria-current="true"] { color: var(--ivory); }
.nav__list a:hover::after,
.nav__list a[aria-current="true"]::after { transform: scaleX(1); }
.nav__list a[aria-current="true"] { color: var(--ginger); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.32rem 0.6rem 0.32rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  white-space: nowrap;
  color: var(--ivory);
  border: 1px solid rgba(20, 241, 149, 0.34);
  border-radius: 999px;
  background: rgba(20, 241, 149, 0.07);
}
.status__dot {
  width: 6px; height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--sol-green);
  box-shadow: 0 0 0 0 rgba(20, 241, 149, 0.6);
  animation: pulse-dot 2.4s ease-out infinite;
}
@keyframes pulse-dot {
  0%        { box-shadow: 0 0 0 0 rgba(20, 241, 149, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(20, 241, 149, 0); }
}
.status__sol { width: 0.95rem; height: 0.78rem; }

.nav__buy { flex: none; }

/* Burger */
.burger {
  display: none;
  place-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-left: auto;
  flex: none;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: rgba(241, 229, 206, 0.05);
}
.burger__bar {
  display: block;
  width: 19px; height: 1.6px;
  margin-inline: auto;
  border-radius: 2px;
  background: var(--ivory);
  transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.burger[aria-expanded="true"] .burger__bar:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(5, 4, 4, 0.72);
  backdrop-filter: blur(3px);
  animation: fade-in 0.25s var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Mobile menu */
@media (max-width: 1000px) {
  .burger { display: grid; }
  .brand__sub { display: none; }

  .nav {
    /* --header-h is measured from the rendered header, so it already includes
       the safe-area padding — don't add the inset a second time. */
    position: fixed;
    top: var(--header-h);
    right: 0;
    left: 0;
    z-index: 99;
    display: grid;
    align-content: start;
    gap: 0;
    max-height: calc(100dvh - var(--header-h));
    margin: 0;
    padding: 0.5rem max(var(--gutter), env(safe-area-inset-right))
             calc(1.6rem + env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: linear-gradient(180deg, #14100F, #0A0807);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 26px 44px -26px rgba(0, 0, 0, 1);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s var(--ease), opacity 0.24s var(--ease),
                visibility 0.24s step-end;
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.3s var(--ease), opacity 0.24s var(--ease),
                visibility 0s step-start;
  }
  .nav__list { display: grid; gap: 0; }
  .nav__list a {
    padding: 1rem 0.25rem;
    font-size: 0.94rem;
    letter-spacing: 0.13em;
    border-bottom: 1px solid var(--hair-soft);
  }
  .nav__list a::after { display: none; }
  .status { margin: 1.15rem 0.25rem 0.35rem; justify-self: start; }
  .nav__buy { margin: 0.9rem 0.25rem 0; }
}

@media (max-width: 1000px) {
  body.nav-open { overflow: hidden; }
}

/* ================================================ 8. HERO & CURTAINS == */
.hero {
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.hero__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink);
}
.hero__banner, .hero__banner img {
  width: 100%; height: 100%;
}
.hero__banner img {
  object-fit: cover;
  /* Left-anchored: the hero derivative already starts just past the banner's
     wordmark, so anchoring left keeps Romeow and the stool to the right of the
     copy at every aspect ratio instead of drifting under the H1. */
  object-position: 0% 50%;
}

/* Amber wash + vignette so overlaid copy stays readable. */
.hero__wash {
  position: absolute;
  inset: 0;
  background:
    /* Reading scrim under the copy. It stops before Romeow so his face is
       never dimmed by branding or gradients. */
    linear-gradient(96deg, rgba(11, 9, 9, 0.9) 0%, rgba(11, 9, 9, 0.66) 34%, rgba(11, 9, 9, 0.2) 54%, transparent 66%),
    radial-gradient(86% 120% at 18% 48%, rgba(11, 9, 9, 0.7) 0%, rgba(11, 9, 9, 0.34) 46%, transparent 74%),
    linear-gradient(180deg, rgba(11, 9, 9, 0.7) 0%, transparent 26%, transparent 52%, rgba(11, 9, 9, 0.96) 100%),
    radial-gradient(52% 70% at 62% 8%, rgba(255, 190, 110, 0.14), transparent 70%);
}

/* Curtains: velvet folds that part once. */
.curtain {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 3;
  width: 54%;
  background-color: var(--burgundy);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.5), transparent 22%, rgba(0, 0, 0, 0.42)),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.62) 0 3px,
      rgba(92, 16, 27, 0.15) 3px 22px,
      rgba(158, 42, 56, 0.42) 30px 42px,
      rgba(92, 16, 27, 0.15) 50px 66px,
      rgba(0, 0, 0, 0.62) 68px 71px);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.curtain--left  { left: 0;  transform-origin: left center;
  animation: part-left 1.5s var(--ease-curtain) 0.18s both; }
.curtain--right { right: 0; transform-origin: right center;
  animation: part-right 1.5s var(--ease-curtain) 0.18s both; }
@keyframes part-left  { from { transform: translateX(0);     } to { transform: translateX(-101%); } }
@keyframes part-right { from { transform: translateX(0);     } to { transform: translateX(101%);  } }

/* Fixed pelmet across the top of the stage. */
.curtain__valance {
  position: absolute;
  inset: 0 0 auto;
  z-index: 4;
  height: clamp(18px, 3.4vw, 42px);
  background-color: var(--burgundy);
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(158, 42, 56, 0.32) 60%, rgba(0, 0, 0, 0.7)),
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.5) 0 2px, transparent 2px 26px);
  border-bottom: 1px solid rgba(196, 154, 85, 0.4);
  mask-image: radial-gradient(14px 12px at 14px 100%, transparent 98%, #000 100%);
  mask-size: 28px 100%;
  mask-repeat: repeat-x;
}

.hero__body {
  position: relative;
  z-index: 5;
  margin-top: clamp(-2rem, -1vw, 0rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
}
.hero__title {
  /* Capped so "ROMEOW ROSE." always ends left of Romeow on the banner rather
     than running under him. */
  max-width: 16ch;
  margin: 0 0 1.15rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.55rem, 1.2rem + 7.4vw, 6.1rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  text-wrap: balance;
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(0, 0, 0, 0.7);
}
.hero__title span { display: block; }
.hero__title-accent {
  background: linear-gradient(96deg, var(--ginger) 6%, #F0B268 46%, var(--gold) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Fallback for the no-background-clip case is the ivory below. */
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title-accent { color: var(--ginger); }
}
.hero__lede {
  max-width: 46ch;
  margin: 0;
  color: var(--ivory-soft);
  font-size: clamp(1.03rem, 0.97rem + 0.42vw, 1.27rem);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1rem;
  margin-top: clamp(1.6rem, 3.2vw, 2.4rem);
}

.hero__scroll {
  position: relative;
  z-index: 5;
  margin: clamp(2rem, 4vw, 3.2rem) 0 0;
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--ivory-mute);
}
.hero__scroll span { display: inline-block; animation: nudge 3.2s ease-in-out infinite; }
.hero__scroll::after {
  content: "";
  display: block;
  width: 1px; height: 34px;
  margin: 0.7rem auto 0;
  background: linear-gradient(180deg, var(--gold), transparent);
}
@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* Desktop: the banner becomes the full hero backdrop and copy overlays it. */
@media (min-width: 900px) {
  .hero {
    display: grid;
    grid-template-rows: 1fr auto;
    align-content: end;
    min-height: min(94svh, 900px);
    padding-bottom: clamp(3rem, 5vw, 5rem);
  }
  .hero__stage {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    z-index: -1;
  }
  .hero__body {
    grid-row: 1;
    align-self: end;
    margin-top: 0;
    padding-top: calc(var(--header-h) + 3rem);
  }
  .hero__scroll { grid-row: 2; }
  .curtain { width: 53%; }
}


/* Very short landscape phones: don't let the stage eat the whole viewport. */
@media (max-width: 899px) and (min-aspect-ratio: 3/2) {
  .hero__stage { aspect-ratio: 21 / 9; }
}

/* ============================================== 9. STORY & PLAYBILL == */
.story::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-soft), transparent);
}

.story__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 880px) {
  .story__grid { grid-template-columns: minmax(0, 1.55fr) minmax(240px, 0.95fr); }
  .playbill { position: sticky; top: calc(var(--header-h) + 2rem); }
}

/* Vintage theatre programme, printed on aged ivory stock. */
.playbill__paper {
  position: relative;
  padding: 1.9rem 1.5rem 2.3rem;
  color: #2E2013;
  text-align: center;
  background-color: #EFE3C7;
  background-image:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, 0.65), transparent 70%),
    radial-gradient(120% 90% at 110% 110%, rgba(140, 100, 50, 0.22), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23p)' opacity='0.09'/%3E%3C/svg%3E");
  border: 1px solid rgba(120, 90, 50, 0.4);
  box-shadow: 0 26px 44px -26px rgba(0, 0, 0, 1), inset 0 0 0 6px rgba(120, 90, 50, 0.09);
  clip-path: var(--deckle);
  transform: rotate(-1.1deg);
}
.playbill__house {
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #6E4B24;
}
.playbill__rule {
  display: block;
  width: 66%;
  height: 3px;
  margin: 0.9rem auto;
  border-top: 1px solid rgba(90, 62, 34, 0.6);
  border-bottom: 1px solid rgba(90, 62, 34, 0.35);
}
.playbill__work {
  margin: 0.2rem 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: #23180E;
}
.playbill__work em {
  display: block;
  margin: 0.16em 0;
  font-size: 0.4em;
  letter-spacing: 0.2em;
  color: #6E4B24;
}
.playbill__meta {
  margin: 0.6rem 0 0;
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.8;
  color: #6E4B24;
}
.playbill__cast {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 0.9rem;
  text-align: left;
  font-size: 0.66rem;
}
.playbill__cast dt {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6E4B24;
}
.playbill__cast dd {
  font-family: var(--font-display);
  font-size: 1.25em;
  line-height: 1.15;
  color: #23180E;
}
.playbill__star {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #A8471A !important;
}
.playbill__note {
  margin: 1.4rem 0 0;
  font-family: var(--font-hand);
  font-size: 1.02rem;
  line-height: 1.3;
  text-wrap: balance;
  color: #7A4A1E;
  transform: rotate(-1.6deg);
}
.playbill__paw {
  position: absolute;
  right: 0.8rem;
  bottom: 0.5rem;
  width: 42px; height: 42px;
  color: rgba(168, 71, 26, 0.3);
  transform: rotate(16deg);
}

.pullquote {
  margin: clamp(3rem, 6vw, 5rem) auto 0;
  max-width: 26ch;
  text-align: center;
}
.pullquote blockquote { position: relative; }
.pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 1.1rem + 3.4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  text-wrap: balance;
  color: var(--ivory);
}
.pullquote em {
  display: block;
  margin-top: 0.28em;
  font-style: italic;
  color: var(--ginger);
}
.pullquote blockquote::before,
.pullquote blockquote::after {
  content: "";
  display: block;
  width: 54px; height: 1px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.pullquote blockquote::before { margin-bottom: clamp(1.2rem, 2.5vw, 2rem); }
.pullquote blockquote::after  { margin-top: clamp(1.2rem, 2.5vw, 2rem); }

/* ========================================================= 10. VIDEO == */
.moment {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(92, 16, 27, 0.32), transparent 62%),
    linear-gradient(180deg, transparent, rgba(26, 18, 16, 0.5), transparent);
}
.theatre {
  position: relative;
  max-width: 1020px;
  margin-inline: auto;
}
/* Distressed proscenium frame. */
.theatre__frame {
  position: relative;
  padding: clamp(8px, 1.4vw, 16px);
  border-radius: var(--radius);
  background:
    linear-gradient(150deg, #3A2417, #211511 40%, #3A2417 75%, #1A100D);
  box-shadow:
    0 0 0 1px rgba(196, 154, 85, 0.42),
    0 30px 60px -30px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 210, 150, 0.16);
}
.theatre__frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(196, 154, 85, 0.28);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}
.theatre__ratio {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius) - 6px);
  background: #000;
}
.theatre__ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.theatre__caption {
  margin: 1.3rem 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 0.96rem + 0.44vw, 1.3rem);
  font-style: italic;
  color: var(--ivory-soft);
}
/* Shown only in a file:// preview, where YouTube refuses to embed at all. */
.theatre__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-decoration: none;
}
.theatre__poster img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.theatre__play {
  position: relative;
  display: grid;
  place-content: center;
  width: 68px; height: 68px;
  border-radius: 50%;
  color: #16100C;
  background: var(--ginger-gradient);
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 1);
}
.theatre__play svg { width: 30px; height: 30px; margin-left: 3px; }
.theatre__poster-note {
  position: absolute;
  inset: auto 0 0;
  padding: 0.8rem 1rem;
  font-size: 0.74rem;
  line-height: 1.55;
  text-align: center;
  color: var(--ivory);
  background: rgba(6, 5, 5, 0.9);
  border-top: 1px solid var(--hair);
}
.theatre__poster-note code {
  padding: 0.05em 0.35em;
  font-size: 0.94em;
  color: var(--ginger);
  background: rgba(216, 120, 40, 0.14);
  border-radius: 4px;
}
.theatre__poster:hover .theatre__play { transform: scale(1.06); }

.theatre__note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--ivory-mute);
}
.theatre__note-badge { display: grid; place-content: center; flex: none; }
.theatre__note-badge svg { width: 15px; height: 15px; color: var(--gold); }

/* Corner badge — sits outside the player so it never covers the video. */
.sticker--debut {
  position: absolute;
  z-index: 6;
  top: clamp(-14px, -1.2vw, -8px);
  right: clamp(-6px, 0.5vw, 10px);
  width: 88px; height: 88px;
  padding: 0;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  background: var(--sol-gradient);
  color: #06131A;
  border-color: #06131A;
  transform: rotate(11deg);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 1);
}
.sticker--debut.is-visible { animation: badge-pop 0.62s var(--ease) 0.15s both; }
@media (min-width: 700px) {
  .sticker--debut { width: 104px; height: 104px; font-size: 0.68rem; top: -20px; right: -18px; }
}

/* ============================================== 11. POLAROID BOARD == */
.board {
  background:
    linear-gradient(180deg, transparent, rgba(26, 18, 16, 0.62) 30%, transparent);
}
.board__pin {
  position: relative;
  display: grid;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  justify-items: center;
  padding: clamp(1rem, 2vw, 2rem) 0;
}

.polaroid {
  position: relative;
  width: min(340px, 88vw);
  padding: 12px 12px 0;
  background: linear-gradient(178deg, #F6EEDD, #E2D5BB 82%, #D2C4A6);
  border-radius: 3px;
  box-shadow:
    0 22px 40px -22px rgba(0, 0, 0, 1),
    0 2px 0 rgba(255, 255, 255, 0.22) inset;
  transition: transform 0.34s var(--ease), box-shadow 0.34s var(--ease);
}
.polaroid__window {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #16100E;
  box-shadow: inset 0 0 0 1px rgba(60, 40, 20, 0.28);
}
.polaroid__window img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(1.04) contrast(1.03);
}
/* Faint emulsion sheen. */
.polaroid__window::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.1) 0 22%, transparent 46%);
  pointer-events: none;
}
.polaroid__cap {
  display: grid;
  gap: 2px;
  padding: 0.85rem 0.35rem 1.15rem;
  color: #2E2013;
  text-align: center;
}
.polaroid__no {
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  color: #A8471A;
}
.polaroid__title {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.16;
  color: #23180E;
}
.polaroid__text {
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.24;
  color: #6B4520;
}

/* Restrained tilts; hover lifts and straightens. Rotation is applied to the
   whole card (frame included) so nothing in the photograph is ever cropped. */
.polaroid--1 { --tilt: -2.4deg; }
.polaroid--2 { --tilt:  1.9deg; }
.polaroid--3 { --tilt: -1.2deg; }
.polaroid--4 { --tilt:  2.6deg; }
.polaroid--5 { --tilt: -1.8deg; }
.polaroid { transform: rotate(var(--tilt)); }
.polaroid:hover, .polaroid:focus-within {
  transform: rotate(0deg) translateY(-9px) scale(1.017);
  box-shadow: 0 34px 56px -26px rgba(0, 0, 0, 1),
              0 0 0 1px rgba(216, 120, 40, 0.35);
  z-index: 8;
}

/* Ephemera and scrawl only make sense once there is space around the board. */
.stub, .scrawl, .board__paw { display: none; }

.board__paw { color: rgba(216, 120, 40, 0.2); }

@media (min-width: 700px) {
  .board__pin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .polaroid { width: 100%; max-width: 360px; }
}

@media (min-width: 1040px) {
  .board__pin {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(2rem, 3vw, 3rem) clamp(1rem, 2vw, 1.8rem);
    padding-block: 2.5rem 1rem;
  }
  .polaroid { max-width: none; }
  /* Row 1: three across. Row 2: two, offset by one column. */
  .polaroid--1 { grid-area: 1 / 1 / 2 / 3; margin-top: 0.5rem; }
  .polaroid--2 { grid-area: 1 / 3 / 2 / 5; margin-top: 3.4rem; }
  .polaroid--3 { grid-area: 1 / 5 / 2 / 7; margin-top: 0; }
  .polaroid--4 { grid-area: 2 / 2 / 3 / 4; margin-top: -0.5rem; }
  .polaroid--5 { grid-area: 2 / 4 / 3 / 6; margin-top: 2.6rem; }

  .stub, .scrawl, .board__paw { display: block; }
  /* Column 1 of row 2 and column 6 are the only cells no photograph occupies,
     so all the loose paper lives there — stacked start / centre / end. Keeping
     the scrawl off the ivory cards is what keeps it legible. */
  .stub--a  { grid-area: 2 / 1; align-self: start; justify-self: center; position: static; margin-top: 2.5rem; }
  .stub--b  { grid-area: 2 / 6; align-self: start; justify-self: center; position: static; margin-top: 5.5rem; }
  .scrawl--a { grid-area: 2 / 1; position: static; justify-self: center; align-self: center; margin: 0; }
  .scrawl--b { grid-area: 2 / 6; position: static; justify-self: center; align-self: end; margin-bottom: 3rem; transform: rotate(6deg); }
  .board__paw--a { grid-area: 2 / 1; justify-self: center; align-self: end; width: 46px; height: 46px; transform: rotate(-22deg); }
  .board__paw--b { grid-area: 1 / 6; justify-self: end; align-self: start; width: 38px; height: 38px; transform: rotate(28deg); margin-top: -1rem; }
}

/* ========================================= 12. GALLERY & LIGHTBOX == */
.grid {
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.35rem);
  grid-template-columns: 1fr;
}
@media (min-width: 480px)  { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Panoramic assets (the 1:3 banner) get a wider cell so they aren't letterboxed. */
.grid__item--wide { grid-column: span 1; }
@media (min-width: 480px) { .grid__item--wide { grid-column: span 2; } }

.tile {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hair);
  border-radius: var(--radius-sm);
  background: #120C0B;
  cursor: zoom-in;
  transition: transform 0.32s var(--ease), box-shadow 0.32s var(--ease),
              border-color 0.32s var(--ease);
  /* Set from the manifest so the cell matches the real image ratio — no
     stretching, no cropping, no layout shift. */
  aspect-ratio: var(--ratio, 1);
  transform: rotate(var(--nudge, 0deg));
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease), filter 0.32s var(--ease);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 9, 9, 0.72));
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.tile__cap {
  position: absolute;
  inset: auto 0 0;
  z-index: 2;
  margin: 0;
  padding: 0.9rem 0.85rem 0.8rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.tile:hover, .tile:focus-visible {
  /* "Rotation correction": whatever the resting nudge, hover straightens it. */
  transform: rotate(0deg) translateY(-5px);
  border-color: rgba(216, 120, 40, 0.55);
  box-shadow: 0 24px 44px -24px rgba(0, 0, 0, 1), 0 0 26px -14px rgba(216, 120, 40, 0.7);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.035); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
.tile:hover .tile__cap, .tile:focus-visible .tile__cap { opacity: 1; transform: translateY(0); }

.tile__zoom {
  position: absolute;
  z-index: 2;
  top: 0.6rem; right: 0.6rem;
  display: grid;
  place-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(11, 9, 9, 0.72);
  border: 1px solid var(--hair);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.tile__zoom svg { width: 15px; height: 15px; color: var(--ivory); }
.tile:hover .tile__zoom, .tile:focus-visible .tile__zoom { opacity: 1; }

/* Fade-in as tiles enter the viewport. */
html.js .grid__item { opacity: 0; transform: translateY(14px); }
html.js .grid__item.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* --- Lightbox --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: max(0.75rem, env(safe-area-inset-top))
           max(0.75rem, env(safe-area-inset-right))
           max(0.75rem, env(safe-area-inset-bottom))
           max(0.75rem, env(safe-area-inset-left));
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 4, 4, 0.94);
  backdrop-filter: blur(6px);
  animation: fade-in 0.22s var(--ease) both;
}
.lightbox__panel {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 1180px;
  animation: lb-in 0.28s var(--ease) both;
}
@keyframes lb-in {
  from { opacity: 0; transform: scale(0.975) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.lightbox__figure {
  display: grid;
  gap: 0.9rem;
  justify-items: center;
  max-width: 100%;
}
.lightbox__img {
  max-width: 100%;
  max-height: min(74svh, 860px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  background: #120C0B;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 1), 0 0 0 1px var(--hair);
}
.lightbox__cap { text-align: center; max-width: 62ch; }
.lightbox__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ivory);
}
.lightbox__text { margin: 0.2rem 0 0; font-size: 0.92rem; color: var(--ivory-soft); }
.lightbox__count {
  margin: 0.45rem 0 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.lightbox__btn {
  position: absolute;
  z-index: 3;
  display: grid;
  place-content: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  color: var(--ivory);
  background: rgba(22, 16, 14, 0.85);
  border: 1px solid var(--hair);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease),
              transform 0.2s var(--ease);
}
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__btn:hover { background: var(--ivory); color: var(--ink); border-color: var(--ivory); }
.lightbox__btn--prev  { left: 0;  top: 50%; transform: translateY(-50%); }
.lightbox__btn--next  { right: 0; top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev:hover, .lightbox__btn--next:hover { transform: translateY(-50%) scale(1.06); }
.lightbox__btn--close { top: 0; right: 0; }
@media (min-width: 900px) {
  .lightbox__btn--prev { left: -8px; }
  .lightbox__btn--next { right: -8px; }
  .lightbox__btn--close { top: -10px; right: -10px; }
}
@media (max-width: 560px) {
  .lightbox__btn--prev { left: 0; top: auto; bottom: 0; transform: none; }
  .lightbox__btn--next { right: 0; top: auto; bottom: 0; transform: none; }
  .lightbox__btn--prev:hover, .lightbox__btn--next:hover { transform: scale(1.06); }
  .lightbox__cap { padding-inline: 3.4rem; }
}

/* ====================================================== 13. FIVE ACTS == */
.acts__list { display: grid; }

.act {
  --tint-a: rgba(196, 154, 85, 0.14);
  --tint-b: rgba(11, 9, 9, 0);
  --act-accent: var(--gold);
  --act-frame: rgba(196, 154, 85, 0.4);
  position: relative;
  padding-block: clamp(2.75rem, 6vw, 5.5rem);
  background-image: radial-gradient(105% 85% at 22% 30%, var(--tint-a), var(--tint-b) 68%);
}
.act + .act::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hair-soft) 30%, var(--hair-soft) 70%, transparent);
}

.act__inner {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 900px) {
  .act__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .act--flip .act__media { order: 2; }
}

.act__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--act-frame);
  box-shadow: 0 30px 56px -32px rgba(0, 0, 0, 1);
  transform: rotate(var(--frame-tilt, 0deg));
}
.act__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--frame-wash, none);
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.act__frame img { width: 100%; height: auto; }

.act__no {
  margin: 0 0 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--act-accent);
}
.act__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 1.2rem + 2.9vw, 3.5rem);
  font-weight: 600;
  line-height: 1.03;
  text-wrap: balance;
  color: var(--ivory);
}
.act__text {
  max-width: 46ch;
  margin: 0;
  color: var(--ivory-soft);
  font-size: clamp(1.02rem, 0.98rem + 0.32vw, 1.19rem);
}

/* Paw prints tracking the scroll path between acts. */
.act__paw {
  position: absolute;
  z-index: 2;
  bottom: -19px;
  left: 50%;
  width: 34px; height: 34px;
  margin-left: -17px;
  color: rgba(216, 120, 40, 0.34);
  transform: rotate(-14deg) scale(0.6);
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.act:nth-child(even) .act__paw { transform: rotate(16deg) scale(0.6); margin-left: 12px; }
.act__paw.is-visible { opacity: 1; transform: rotate(-14deg) scale(1); }
.act:nth-child(even) .act__paw.is-visible { transform: rotate(16deg) scale(1); }

/* Per-act colour treatments — restrained, all inside the same identity. */
.act--i {
  --tint-a: rgba(203, 148, 62, 0.20);
  --tint-b: rgba(30, 74, 78, 0.14);
  --act-accent: #E3B268;
  --act-frame: rgba(203, 148, 62, 0.45);
  --frame-wash: linear-gradient(160deg, rgba(255, 206, 128, 0.14), rgba(52, 116, 118, 0.12));
  --frame-tilt: -0.7deg;
}
.act--ii {
  --tint-a: rgba(17, 24, 39, 0.85);
  --tint-b: rgba(216, 120, 40, 0.10);
  --act-accent: #F0B268;
  --act-frame: rgba(216, 120, 40, 0.34);
  --frame-wash: linear-gradient(200deg, rgba(17, 24, 39, 0.3), rgba(255, 176, 92, 0.12));
  --frame-tilt: 0.6deg;
}
.act--iii {
  --tint-a: rgba(92, 16, 27, 0.55);
  --tint-b: rgba(196, 154, 85, 0.12);
  --act-accent: #E8C070;
  --act-frame: rgba(196, 154, 85, 0.62);
  --frame-wash: linear-gradient(150deg, rgba(196, 154, 85, 0.16), rgba(142, 30, 45, 0.16));
  --frame-tilt: -0.5deg;
}
.act--iii .act__title { color: #FBF1DC; }
.act--iv {
  --tint-a: rgba(96, 58, 92, 0.36);
  --tint-b: rgba(226, 200, 150, 0.10);
  --act-accent: #DCC59A;
  --act-frame: rgba(196, 168, 200, 0.4);
  --frame-wash: linear-gradient(170deg, rgba(150, 100, 145, 0.16), rgba(240, 224, 186, 0.1));
  --frame-tilt: 0.7deg;
}
.act--v {
  --tint-a: rgba(142, 30, 45, 0.4);
  --tint-b: rgba(20, 241, 149, 0.07);
  --act-accent: #FFD9A0;
  --act-frame: rgba(240, 224, 190, 0.5);
  --frame-wash: linear-gradient(160deg, rgba(255, 236, 200, 0.14), rgba(153, 69, 255, 0.08));
  --frame-tilt: -0.4deg;
}
/* Act V closes on a thin Solana ribbon. */
.act--v::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--sol-gradient);
  opacity: 0.62;
}

/* ========================================================= 14. SOLANA == */
.solana {
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(17, 24, 39, 0.62), rgba(11, 9, 9, 0.9));
}
/* Solana-coloured spotlight beam raking down the section. */
.solana__beam {
  position: absolute;
  top: -18%;
  left: 50%;
  z-index: -1;
  width: min(120%, 1000px);
  height: 150%;
  margin-left: min(-60%, -500px);
  background:
    conic-gradient(from 168deg at 50% 0%,
      transparent 0deg,
      rgba(153, 69, 255, 0.15) 6deg,
      rgba(0, 209, 255, 0.11) 12deg,
      rgba(20, 241, 149, 0.09) 18deg,
      transparent 25deg);
  filter: blur(22px);
  opacity: 0.9;
}
/* Watermark behind the section title. Masked to a soft round fade — at this
   scale the glyph's hard bar edges would otherwise band visibly through the
   paragraph underneath. */
.solana__ghost {
  position: absolute;
  top: clamp(1.5rem, 6vw, 4.5rem);
  left: 50%;
  z-index: -1;
  width: min(40vw, 340px);
  height: auto;
  margin-left: min(-20vw, -170px);
  opacity: 0.06;
  filter: blur(1.5px);
  mask-image: radial-gradient(closest-side, #000 25%, rgba(0, 0, 0, 0.35) 62%, transparent 100%);
}

.ticker-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.8rem;
  margin: 0 0 clamp(2.4rem, 5vw, 3.5rem);
}
.ticker-line__sym {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ivory);
}
.chain-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.7rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ivory);
  border: 1px solid rgba(153, 69, 255, 0.5);
  border-radius: 999px;
  background: rgba(153, 69, 255, 0.1);
}
.chain-badge--spl {
  border-color: rgba(20, 241, 149, 0.45);
  background: rgba(20, 241, 149, 0.08);
}

.cards {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
  border-radius: var(--radius);
  background:
    linear-gradient(170deg, rgba(36, 24, 20, 0.92), rgba(14, 10, 10, 0.92));
  border: 1px solid var(--hair);
  box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 1);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--sol-gradient);
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}
.card:hover { transform: translateY(-5px); border-color: rgba(0, 209, 255, 0.42); }
.card:hover::before { opacity: 1; }
.card__mark { display: block; margin-bottom: 1rem; }
.card__mark .sol-mark { width: 30px; height: 24px; }
.card__title {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ivory);
}
.card__text { margin: 0; color: var(--ivory-soft); }

/* ============================== 15. HOW TO BUY & CONTRACT ADDRESS == */
.buy {
  background:
    radial-gradient(110% 70% at 50% 0%, rgba(92, 16, 27, 0.26), transparent 60%);
}
.steps {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  counter-reset: step;
}
@media (min-width: 640px)  { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.step {
  position: relative;
  padding: clamp(1.4rem, 2.4vw, 1.9rem) clamp(1.2rem, 2vw, 1.6rem);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(36, 24, 20, 0.78), rgba(14, 10, 10, 0.85));
  border: 1px solid var(--hair);
  border-top: 2px solid rgba(216, 120, 40, 0.55);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.step:hover { transform: translateY(-4px); border-color: rgba(216, 120, 40, 0.5); }
.step__no {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: rgba(216, 120, 40, 0.85);
}
.step__title {
  margin: 0 0 0.45rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ivory);
}
.step__text { margin: 0; font-size: 0.96rem; color: var(--ivory-soft); }

.buy__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

/* Contract address slab */
.ca {
  max-width: 760px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.3rem, 2.6vw, 2rem);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(17, 24, 39, 0.8), rgba(11, 9, 9, 0.9));
  border: 1px solid var(--hair);
  box-shadow: 0 26px 50px -32px rgba(0, 0, 0, 1);
}
.ca__label {
  margin: 0 0 0.85rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold);
}
.ca__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.ca__value {
  flex: 1 1 min(100%, 26ch);
  min-width: 0;
  padding: 0.8rem 1rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: clamp(0.72rem, 0.62rem + 0.5vw, 0.94rem);
  letter-spacing: 0.02em;
  text-align: center;
  color: var(--ivory);
  background: rgba(0, 0, 0, 0.55);
  border: 1px dashed var(--hair);
  border-radius: var(--radius-sm);
  /* Long base58 mints must never blow out the layout. */
  overflow-wrap: anywhere;
  word-break: break-all;
}
.ca__warn {
  margin: 1.1rem 0 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #FFE3BE;
  background: rgba(216, 120, 40, 0.12);
  border-left: 3px solid var(--ginger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.ca__warn strong { color: var(--ginger); }
.ca__warn code {
  font-size: 0.92em;
  overflow-wrap: anywhere;
  color: #FFF0DC;
}
.ca__hint {
  margin: 0.85rem 0 0;
  font-size: 0.8rem;
  text-align: center;
  color: var(--ivory-mute);
}

/* ========================== 16. CHIP WALL & COMMUNITY == */
.chipwall {
  background:
    linear-gradient(180deg, transparent, rgba(92, 16, 27, 0.22), transparent);
  border-block: 1px solid var(--hair-soft);
}

.community {
  background:
    radial-gradient(90% 70% at 50% 100%, rgba(216, 120, 40, 0.13), transparent 66%);
  text-align: center;
}
.social {
  display: grid;
  gap: 0.8rem;
  max-width: 640px;
  margin-inline: auto;
}
@media (min-width: 560px) { .social { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.social .btn { width: 100%; min-height: 52px; }

/* ========================================================= 17. FOOTER == */
.foot {
  /* Positioned so it paints above the fixed pointer-spotlight layer. */
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem) calc(clamp(1.6rem, 3vw, 2.5rem) + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(7, 6, 6, 0.4), #070606);
  border-top: 1px solid var(--hair-soft);
}
.foot__quote {
  /* Wide enough that each authored <br> line fits without re-wrapping. */
  max-width: 42ch;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  text-align: center;
}
.foot__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2.15rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.24;
  text-wrap: balance;
  color: var(--ivory-soft);
}

.foot__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--hair-soft);
}
@media (min-width: 720px)  { .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; } }

.brand__frame--foot {
  width: 64px; height: 64px;
  margin-bottom: 1rem;
}
.foot__word {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--ivory);
}
.foot__sub {
  margin: 0.4rem 0 1.2rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  color: var(--gold);
}
.foot__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.9rem;
  font-size: 0.86rem;
}
.foot__facts dt {
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-mute);
  align-self: center;
}
.foot__facts dd { color: var(--ivory); font-weight: 600; }

.foot__h {
  margin: 0 0 0.95rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.foot__nav ul { display: grid; gap: 0.55rem; }
.foot__nav a {
  font-size: 0.92rem;
  color: var(--ivory-soft);
  text-decoration: none;
}
.foot__nav a:hover { color: var(--ginger); text-decoration: underline; }

.ca__value--foot {
  display: block;
  flex: none;
  padding: 0.65rem 0.75rem;
  font-size: 0.68rem;
  text-align: left;
}
.foot__canote {
  margin: 0.6rem 0 0;
  font-size: 0.72rem;
  color: var(--ivory-mute);
}

.foot__disclaimer {
  max-width: 78ch;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-size: 0.82rem;
  line-height: 1.72;
  text-align: center;
  color: var(--ivory-mute);
}
.foot__copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 0.6rem;
  margin: 1.6rem 0 0;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-align: center;
  color: rgba(241, 229, 206, 0.45);
}

/* ============================ 18. REVEAL & REDUCED MOTION == */
html.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
}
html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
/* Stagger siblings inside a group. */
html.js .cards .reveal.is-visible:nth-child(2),
html.js .steps .reveal.is-visible:nth-child(2) { transition-delay: 0.08s; }
html.js .cards .reveal.is-visible:nth-child(3),
html.js .steps .reveal.is-visible:nth-child(3) { transition-delay: 0.16s; }
html.js .steps .reveal.is-visible:nth-child(4) { transition-delay: 0.24s; }
html.js .hero .reveal.is-visible:nth-child(2) { transition-delay: 0.08s; }
html.js .hero .reveal.is-visible:nth-child(3) { transition-delay: 0.16s; }
html.js .hero .reveal.is-visible:nth-child(4) { transition-delay: 0.24s; }
html.js .hero .reveal.is-visible:nth-child(5) { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }

  /* Curtains start open; nothing to wait for. */
  .curtain--left  { transform: translateX(-101%); animation: none; }
  .curtain--right { transform: translateX(101%);  animation: none; }

  html.js .reveal,
  html.js .grid__item { opacity: 1; transform: none; }
  .act__paw { opacity: 1; transform: rotate(-14deg) scale(1); }
  .badges .sticker.is-visible,
  .sticker--debut.is-visible { animation: none; }
  .pointer-spot { display: none; }
  .hero__scroll span { animation: none; }
  .status__dot { animation: none; box-shadow: 0 0 0 3px rgba(20, 241, 149, 0.22); }

  .polaroid:hover, .polaroid:focus-within { transform: rotate(0deg); }
  .btn:hover, .chip:hover, .card:hover, .step:hover, .tile:hover { transform: none; }
}

/* Tiny screens: keep everything usable at 320px. */
@media (max-width: 360px) {
  :root { --gutter: 0.9rem; }
  .btn { font-size: 0.74rem; letter-spacing: 0.1em; padding-inline: 1.1em; }
  .btn--lg { font-size: 0.8rem; }
  .hero__actions .btn { width: 100%; }
  .brand__word { font-size: 1.2rem; }
  .chips--hero { gap: 0.45rem; }
  .chip { font-size: 0.64rem; letter-spacing: 0.1em; }
}

@media print {
  .marquee, .lightbox, .grain, .pointer-spot, .curtain, .curtain__valance,
  .hero__scroll, .burger, .nav-scrim { display: none !important; }
  body { background: #fff; color: #000; }
}