:root {
    --bg-deep: #0a0420;
    --bg-mid: #1a0a40;
    --accent-purple: #9d5cff;
    --accent-magenta: #e85ee8;
    --accent-cyan: #5edcff;
    --accent-blue: #5e7fff;
    --text-primary: #f0e8ff;
    --text-muted: #b8a8d8;
    --glow-purple: rgba(157, 92, 255, 0.6);
    --glow-magenta: rgba(232, 94, 232, 0.5);
    --glow-cyan: rgba(94, 220, 255, 0.4);
    --rainbow-gradient: linear-gradient(90deg, #ff8eaa 0%, #ffa86e 12%, #ffe87a 25%, #92ffb3 38%, #6ee7ff 51%, #8e9bff 64%, #c98eff 77%, #ff8ee0 90%, #ff8eaa 100%);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }

  html, body { width: 100%; overflow-x: hidden; }

  body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg-deep);
    color: var(--text-primary);
    min-height: 100vh;
    position: relative;
    background-image: url('assets/file_00000000f12871f6a0b5cd35dc79fafd.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  /* darkening vignette over background for readability */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse at center, transparent 0%, rgba(10, 4, 32, 0.12) 60%, rgba(10, 4, 32, 0.45) 100%);
    z-index: 1;
    pointer-events: none;
  }

  /* canvas layers */
  #stars-canvas, #ripples-canvas {
    position: fixed; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  #stars-canvas { z-index: 2; }
  #ripples-canvas { z-index: 11; mix-blend-mode: screen; }

  /* dragon cursor */
  .dragon-cursor {
    position: fixed;
    top: 50%; left: 50%;
    width: 54px; height: 54px;
    margin: -27px 0 0 -27px;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
  }
  .dragon-cursor-inner {
    width: 100%; height: 100%;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .dragon-cursor.clicking .dragon-cursor-inner {
    transform: scale(0.78) rotate(-14deg);
  }
  .dragon-cursor img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
    user-select: none;
    -webkit-user-drag: none;
    filter: drop-shadow(0 0 10px var(--glow-purple)) drop-shadow(0 0 18px rgba(232, 94, 232, 0.35));
    box-shadow: 0 0 0 1.5px rgba(232, 94, 232, 0.5), inset 0 0 12px rgba(0, 0, 0, 0.3);
  }
  /* gentle hover-bob */
  .dragon-cursor img {
    animation: dragonBob 3s ease-in-out infinite;
  }
  @keyframes dragonBob {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-2px) rotate(3deg); }
  }

  /* touch-device fallback handled in JS via (pointer: coarse) instead, so
     hybrid laptops with touchscreens still get the dragon. */
  body.touch-device, body.touch-device * { cursor: auto !important; }
  body.touch-device .dragon-cursor { display: none; }

  /* Until the dragon cursor is confirmed visible (image loaded OR orb fallback
     in place), keep the OS cursor so the page is always usable. JS adds the
     `dragon-ready` class once the cursor is actually showing something. */
  body:not(.dragon-ready):not(.touch-device),
  body:not(.dragon-ready):not(.touch-device) * { cursor: auto !important; }
  body:not(.dragon-ready) .dragon-cursor { display: none; }

  /* ============================================================
     PERFORMANCE OPTIMIZATIONS — keep this site smooth on mobile.
     Three small rules, big impact:
     1. Pause every animation inside a character page when the page
        is hidden (aria-hidden=true). Browsers still run CSS animation
        cycles on offscreen elements; this stops that work.
     2. content-visibility: auto on the overlay pages lets the browser
        skip layout/paint for offscreen sections until they're scrolled
        or shown. Huge win when the page tree is large.
     3. prefers-reduced-motion: kill purely decorative animations for
        users who've set that OS preference (accessibility + perf).
     ============================================================ */
  .character-page[aria-hidden="true"] { content-visibility: auto; }
  .character-page[aria-hidden="true"] *,
  .character-page[aria-hidden="true"] *::before,
  .character-page[aria-hidden="true"] *::after {
    animation-play-state: paused !important;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  /* main site z-index */
  .site { position: relative; z-index: 10; }

  /* ---------- HEADER ---------- */
  header {
    padding: 4.5rem 2rem 2rem;
    text-align: center;
    position: relative;
  }

  .brand {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(2.6rem, 7.5vw, 6rem);
    letter-spacing: 0.03em;
    background: var(--rainbow-gradient);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowFlow 14s linear infinite, fadeUp 1.2s ease both;
    margin-bottom: 0.5rem;
    line-height: 1;
    /* halo glow behind the gradient text */
    text-shadow:
      0 0 18px rgba(255, 220, 255, 0.55),
      0 0 36px rgba(180, 220, 255, 0.35),
      0 0 72px rgba(232, 94, 232, 0.25);
  }

  /* seamless left-to-right rainbow loop */
  @keyframes rainbowFlow {
    from { background-position: 0% 50%; }
    to   { background-position: 200% 50%; }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .tagline {
    font-family: 'Cinzel', serif;
    font-weight: 400;
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    color: #e6d4ff;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    animation: fadeUp 1.4s 0.15s ease both;
    text-shadow:
      0 0 10px rgba(232, 94, 232, 0.6),
      0 0 22px rgba(94, 220, 255, 0.35);
  }
  .creator {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    color: #b8f2ff;
    letter-spacing: 0.2em;
    font-style: italic;
    animation: fadeUp 1.4s 0.3s ease both;
    text-shadow:
      0 0 10px rgba(94, 220, 255, 0.7),
      0 0 22px rgba(157, 92, 255, 0.4);
  }
  .creator::before, .creator::after {
    content: '✦';
    margin: 0 0.6em;
    color: var(--accent-magenta);
    font-size: 0.8em;
  }

  /* ---------- CLICKABLE SECTION TITLE ---------- */
  .section-title-link {
    display: block;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(135deg, rgba(157, 92, 255, 0.08), rgba(94, 220, 255, 0.04));
    border: 1px solid rgba(157, 92, 255, 0.25);
    padding: 2rem 1.5rem;
    cursor: pointer;
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.4s ease,
                box-shadow 0.4s ease,
                background 0.4s ease;
    animation: meetPulse 3.2s ease-in-out infinite;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  /* Soft pulsing glow to draw the eye */
  @keyframes meetPulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(232, 94, 232, 0.0),
                  0 0 28px rgba(157, 92, 255, 0.18);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(232, 94, 232, 0.0),
                  0 0 50px rgba(232, 94, 232, 0.35),
                  0 0 80px rgba(94, 220, 255, 0.2);
    }
  }
  /* Animated sheen sweep across the button */
  .section-title-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
      105deg,
      transparent 0%,
      transparent 35%,
      rgba(255, 255, 255, 0.08) 45%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0.08) 55%,
      transparent 65%,
      transparent 100%
    );
    animation: sheenSweep 4.5s ease-in-out infinite;
    pointer-events: none;
  }
  @keyframes sheenSweep {
    0%, 60% { left: -100%; }
    100% { left: 200%; }
  }
  .section-title-link .section-title {
    margin: 0 0 0.8rem 0;
    transition: text-shadow 0.3s ease, letter-spacing 0.4s ease;
    position: relative;
    z-index: 1;
  }
  /* The wiggling arrow indicator after the title */
  .section-title-link .section-title::after {
    content: '✦';
    display: inline-block;
    margin-left: 0.5em;
    font-size: 0.7em;
    color: var(--accent-magenta);
    text-shadow: 0 0 12px var(--glow-magenta);
    animation: arrowWiggle 1.8s ease-in-out infinite;
    -webkit-text-fill-color: var(--accent-magenta);
  }
  @keyframes arrowWiggle {
    0%, 100% { transform: translateX(0) rotate(0deg); opacity: 0.7; }
    50%      { transform: translateX(6px) rotate(12deg); opacity: 1; }
  }
  /* "click here" hint that drifts in under the button */
  .section-title-link::after {
    content: '↓ click to open ↓';
    display: block;
    margin-top: 0.6rem;
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--text-muted);
    opacity: 0.55;
    transition: opacity 0.3s ease, transform 0.3s ease, letter-spacing 0.4s ease;
    position: relative;
    z-index: 1;
  }
  .section-title-link:hover {
    transform: translateY(-6px) scale(1.015);
    border-color: var(--accent-magenta);
    background: linear-gradient(135deg, rgba(232, 94, 232, 0.15), rgba(94, 220, 255, 0.08));
    animation-play-state: paused;
    box-shadow:
      0 0 60px rgba(232, 94, 232, 0.55),
      0 0 100px rgba(157, 92, 255, 0.35),
      0 20px 60px rgba(0, 0, 0, 0.4);
  }
  .section-title-link:hover .section-title {
    letter-spacing: 0.04em;
    text-shadow:
      0 0 28px rgba(255, 200, 255, 0.8),
      0 0 56px rgba(180, 220, 255, 0.6);
  }
  .section-title-link:hover::after {
    opacity: 1;
    transform: translateY(2px);
    letter-spacing: 0.55em;
    color: var(--accent-magenta);
  }
  .section-title-link:active {
    transform: translateY(-2px) scale(0.99);
  }
  .section-title-link:focus-visible {
    outline: 2px solid var(--accent-magenta);
    outline-offset: 6px;
  }

  /* ---------- SEARCH ---------- */
  .search-wrap { position: relative; }

  .search-input {
    width: 100%;
    padding: 1.1rem 1.5rem 1.1rem 3.5rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    background: rgba(26, 10, 64, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(157, 92, 255, 0.4);
    border-radius: 100px;
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 0 30px rgba(157, 92, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .search-input::placeholder { color: var(--text-muted); opacity: 0.7; }
  .search-input:focus {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 45px rgba(94, 220, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    background: rgba(26, 10, 64, 0.7);
  }
  .search-icon {
    position: absolute;
    left: 1.3rem; top: 50%;
    transform: translateY(-50%);
    width: 20px; height: 20px;
    color: var(--accent-purple);
  }

  /* ---------- SECTIONS ---------- */
  .section {
    max-width: 1200px;
    margin: 5rem auto;
    padding: 0 2rem;
  }
  .section-title {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: clamp(1.7rem, 3.2vw, 2.4rem);
    text-align: center;
    margin-bottom: 0.5rem;
    letter-spacing: 0.1em;
    text-shadow:
      0 0 16px rgba(255, 200, 255, 0.4),
      0 0 32px rgba(180, 220, 255, 0.25);
  }
  .section-title-accent {
    background: var(--rainbow-gradient);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowFlow 18s linear infinite;
  }
  .section-sub {
    text-align: center;
    color: #d8c8f5;
    font-size: 0.95rem;
    margin-bottom: 3rem;
    letter-spacing: 0.05em;
    font-style: italic;
    text-shadow: 0 0 12px rgba(157, 92, 255, 0.5);
  }
  .divider {
    width: 220px; height: 1px;
    margin: 0 auto 1.6rem;
    background: linear-gradient(90deg, transparent, var(--accent-magenta), transparent);
    opacity: 0.7;
  }

  /* ---------- CHARACTER GRID ---------- */
  .character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.6rem;
  }

  /* ---------- "SEE MORE CHARACTERS" CALL-TO-ACTION ---------- */
  /* ---------- ALL CHARACTERS OVERLAY ---------- */
  /* Background is built to exactly match the body's visual stack so the
     overlay feels like a continuation of the homepage:
       layer 1 (top):   vignette gradient — same as body::before
       layer 2 (mid):   the background image — same as body
       layer 3 (base):  --bg-deep solid color — same as body fallback        */
  .all-characters-page {
    background:
      radial-gradient(ellipse at center,
        transparent 0%,
        rgba(10, 4, 32, 0.12) 60%,
        rgba(10, 4, 32, 0.45) 100%),
      url('assets/background.jpg') center / cover no-repeat fixed,
      var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Outfit', sans-serif;
  }
  /* Suppress the film-grain and scanlines that the base .character-page adds
     (those are for Scorch's heavy-metal aesthetic, not this one). */
  .all-characters-page::before,
  .all-characters-page::after {
    content: none;
    display: none;
  }
  /* Search bar lives inside the overlay now, between title and grid */
  .overlay-search {
    max-width: 720px;
    margin: 0 auto 2.5rem;
    animation: fadeUp 0.6s 0.1s ease both;
  }
  .all-characters-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 5rem 2rem 4rem;
  }
  .all-characters-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    text-align: center;
    background: var(--rainbow-gradient);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: rainbowFlow 14s linear infinite;
    margin-bottom: 0.5rem;
  }
  .all-characters-sub {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 3rem;
    letter-spacing: 0.08em;
  }
  .character-card {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: 20px;
    background: linear-gradient(160deg, rgba(157, 92, 255, 0.16), rgba(94, 220, 255, 0.06));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(157, 92, 255, 0.3);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  }
  .character-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(232, 94, 232, 0.28), transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .character-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 20px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(232, 94, 232, 0), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    transition: background 0.4s ease;
    pointer-events: none;
  }
  .character-card:hover {
    transform: translateY(-8px);
    border-color: rgba(232, 94, 232, 0.5);
    box-shadow: 0 16px 50px rgba(232, 94, 232, 0.3), 0 0 0 1px rgba(232, 94, 232, 0.2);
  }
  .character-card:hover::before { opacity: 1; }
  .character-card:hover::after {
    background: linear-gradient(135deg, var(--accent-magenta), var(--accent-cyan), var(--accent-purple));
  }

  .character-portrait {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
    display: flex; align-items: center; justify-content: center;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 3rem;
    color: white;
    margin-bottom: 1.2rem;
    box-shadow: 0 0 32px var(--glow-purple);
    z-index: 1; position: relative;
    overflow: hidden;
  }
  .character-portrait img {
    width: 100%; height: 100%; object-fit: cover;
  }

  .character-name {
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    letter-spacing: 0.05em;
    z-index: 1; position: relative;
    color: #f5e8ff;
    text-shadow:
      0 0 12px rgba(232, 94, 232, 0.55),
      0 0 24px rgba(94, 220, 255, 0.25);
  }
  .character-desc {
    font-size: 0.85rem;
    color: #d8c8f5;
    line-height: 1.4;
    z-index: 1; position: relative;
    text-shadow: 0 0 8px rgba(157, 92, 255, 0.4);
  }

  /* Fire-style name effect (Scorch). Yellow→orange→red gradient
     with a pulsing glow. */
  .character-name.fire {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: transparent;
    background-image: linear-gradient(
      180deg,
      #fff3a0 0%,
      #ffd24a 18%,
      #ff8a2a 45%,
      #ff3b1f 72%,
      #8b1100 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
      0 0 8px rgba(255, 152, 0, 0.65),
      0 0 18px rgba(255, 87, 34, 0.55),
      0 0 32px rgba(244, 67, 54, 0.45);
    animation: fire-flicker 2.4s ease-in-out infinite;
  }
  @keyframes fire-flicker {
    0%, 100% {
      text-shadow:
        0 0 8px rgba(255, 152, 0, 0.65),
        0 0 18px rgba(255, 87, 34, 0.55),
        0 0 32px rgba(244, 67, 54, 0.45);
      filter: brightness(1);
    }
    45% {
      text-shadow:
        0 0 12px rgba(255, 200, 60, 0.85),
        0 0 26px rgba(255, 87, 34, 0.7),
        0 0 44px rgba(244, 67, 54, 0.55);
      filter: brightness(1.15);
    }
    70% {
      text-shadow:
        0 0 6px rgba(255, 152, 0, 0.55),
        0 0 16px rgba(255, 87, 34, 0.5),
        0 0 28px rgba(244, 67, 54, 0.4);
      filter: brightness(0.95);
    }
  }

  /* Peaky-style name effect (Rory). Worn gold foil on dark — 1920s
     Birmingham, betting-shop brass. Subtle sheen, no flicker. */
  .character-name.peaky {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: transparent;
    background-image: linear-gradient(180deg, #f3e3b0 0%, #e7c879 35%, #c8a24a 70%, #8a6a24 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(200,162,74,0.45), 0 0 22px rgba(122,31,23,0.3);
  }

  /* Chrome-style name effect (Shane). Steel-blue gradient
     with a slow shimmer — bass / knucklehead bike vibe. */
  .character-name.chrome {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: transparent;
    background-image: linear-gradient(
      180deg,
      #e8eef4 0%,
      #c0d0e0 25%,
      #88a8c0 55%,
      #3a5a78 85%,
      #0a1828 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
      0 0 8px rgba(95, 176, 212, 0.5),
      0 0 18px rgba(120, 190, 220, 0.4),
      0 0 32px rgba(40, 80, 120, 0.3);
    animation: chrome-shimmer 4s ease-in-out infinite;
  }
  @keyframes chrome-shimmer {
    0%, 100% {
      text-shadow:
        0 0 8px rgba(95, 176, 212, 0.5),
        0 0 18px rgba(120, 190, 220, 0.4),
        0 0 32px rgba(40, 80, 120, 0.3);
      filter: brightness(1);
    }
    50% {
      text-shadow:
        0 0 12px rgba(160, 220, 240, 0.7),
        0 0 26px rgba(120, 190, 220, 0.55),
        0 0 44px rgba(95, 176, 212, 0.45);
      filter: brightness(1.1);
    }
  }

  /* Bayou-style name effect (Cody). Warm honey/gold gradient with a
     slow firefly pulse — Louisiana / drummer / front-porch vibe. */
  .character-name.bayou {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: transparent;
    background-image: linear-gradient(
      180deg,
      #fff4cc 0%,
      #f4d27a 25%,
      #d49a3a 55%,
      #8a5a1a 85%,
      #3a2410 100%
    );
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow:
      0 0 8px rgba(212, 154, 58, 0.5),
      0 0 18px rgba(244, 210, 122, 0.4),
      0 0 32px rgba(120, 80, 25, 0.3);
    animation: bayou-firefly 3.6s ease-in-out infinite;
  }
  @keyframes bayou-firefly {
    0%, 100% {
      text-shadow:
        0 0 8px rgba(212, 154, 58, 0.5),
        0 0 18px rgba(244, 210, 122, 0.4),
        0 0 32px rgba(120, 80, 25, 0.3);
      filter: brightness(1);
    }
    50% {
      text-shadow:
        0 0 14px rgba(255, 220, 130, 0.75),
        0 0 28px rgba(244, 200, 100, 0.6),
        0 0 48px rgba(212, 154, 58, 0.45);
      filter: brightness(1.12);
    }
  }

  .character-card.placeholder {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
    border-style: dashed;
    border-color: rgba(184, 168, 216, 0.25);
  }
  .character-card.placeholder .character-portrait {
    background: rgba(184, 168, 216, 0.1);
    box-shadow: none;
    color: var(--text-muted);
    font-size: 4.5rem;
  }
  .character-card.placeholder .character-name { color: var(--text-muted); }

  /* ---------- REQUEST FORM ---------- */
  .request-form {
    max-width: 720px;
    margin: 0 auto;
    background: rgba(20, 8, 48, 0.55);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(157, 92, 255, 0.4);
    border-radius: 26px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
  }
  .request-form::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(232, 94, 232, 0.06), transparent 50%);
    animation: drift 20s linear infinite;
    pointer-events: none;
  }
  @keyframes drift {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  .form-row { margin-bottom: 1.5rem; position: relative; z-index: 1; }

  .form-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #b8f2ff;
    margin-bottom: 0.55rem;
    text-shadow: 0 0 10px rgba(94, 220, 255, 0.55);
  }
  .form-input, .form-textarea {
    width: 100%;
    padding: 0.9rem 1.2rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    background: rgba(10, 4, 32, 0.55);
    border: 1px solid rgba(157, 92, 255, 0.3);
    border-radius: 12px;
    color: var(--text-primary);
    outline: none;
    transition: all 0.3s ease;
  }
  .form-textarea { resize: vertical; min-height: 130px; font-family: 'Outfit', sans-serif; line-height: 1.5; }
  .form-input:focus, .form-textarea:focus {
    border-color: var(--accent-magenta);
    background: rgba(10, 4, 32, 0.75);
    box-shadow: 0 0 22px rgba(232, 94, 232, 0.25);
  }
  .form-input::placeholder, .form-textarea::placeholder {
    color: var(--text-muted); opacity: 0.55;
  }

  .submit-btn {
    width: 100%;
    padding: 1.1rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-magenta));
    background-size: 200% 200%;
    border: none;
    border-radius: 12px;
    color: white;
    outline: none;
    transition: all 0.35s ease;
    margin-top: 0.5rem;
    box-shadow: 0 8px 28px rgba(157, 92, 255, 0.45);
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .submit-btn:hover {
    transform: translateY(-2px);
    background-position: 100% 0%;
    box-shadow: 0 14px 36px rgba(232, 94, 232, 0.55);
  }
  .submit-btn:active { transform: translateY(0); }
  .submit-btn:disabled { opacity: 0.6; }

  .form-status {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.9rem;
    min-height: 1.5em;
    letter-spacing: 0.05em;
    position: relative; z-index: 1;
  }
  .form-status.success { color: var(--accent-cyan); }
  .form-status.error   { color: #ff8585; }

  /* ---------- FOOTER ---------- */
  footer {
    text-align: center;
    padding: 3.5rem 2rem 2rem;
    color: #d8c8f5;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    text-shadow: 0 0 12px rgba(157, 92, 255, 0.5);
  }
  footer .heart {
    color: #ff8ee0;
    text-shadow: 0 0 10px rgba(232, 94, 232, 0.7);
  }

  /* ---------- scrollbar ---------- */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--bg-deep); }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--accent-purple), var(--accent-magenta));
    border-radius: 10px;
  }

  @media (max-width: 600px) {
    .request-form { padding: 1.6rem; }
    .section { margin: 3rem auto; }
    header { padding: 3rem 1.5rem 1.5rem; }
  }

  /* ============================================================
     CHARACTER PAGE — heavy metal full-screen overlay (Scorch etc)
     ============================================================ */
  .character-page {
    position: fixed; inset: 0;
    z-index: 1000;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(80, 10, 0, 0.7) 0%, transparent 70%),
      radial-gradient(ellipse at 50% 100%, rgba(120, 30, 0, 0.5) 0%, transparent 60%),
      linear-gradient(180deg, #0a0200 0%, #150404 50%, #0a0200 100%);
    color: #f0e6d4;
    overflow-y: auto;
    overflow-x: hidden;
    font-family: 'Oswald', sans-serif;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.55s;
  }
  .character-page.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
  }

  /* film grain overlay */
  .character-page::before {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>");
    opacity: 0.08;
    mix-blend-mode: overlay;
    z-index: 1;
  }
  /* faint scanlines/scratches for grit */
  .character-page::after {
    content: '';
    position: fixed; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 3px,
      rgba(0, 0, 0, 0.06) 3px, rgba(0, 0, 0, 0.06) 4px);
    z-index: 1;
  }

  /* close button — top-right always visible */
  .char-close {
    position: fixed;
    top: 1.2rem; right: 1.2rem;
    z-index: 50;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #ff5a1f;
    color: #ffaa00;
    font-size: 1.4rem;
    font-weight: 900;
    font-family: 'Oswald', sans-serif;
    box-shadow: 0 0 20px rgba(255, 90, 30, 0.4), 0 4px 16px rgba(0,0,0,0.6);
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .char-close:hover {
    background: #ff5a1f;
    color: #fff;
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 0 30px rgba(255, 90, 30, 0.7);
  }

  /* HERO */
  .char-hero {
    position: relative;
    height: min(85vh, 800px);
    min-height: 520px;
    overflow: hidden;
    z-index: 2;
  }
  .char-hero-bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center 20%;
    filter: contrast(1.15) saturate(1.1) brightness(0.95);
  }
  .char-hero-bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg,
        rgba(10, 2, 0, 0.55) 0%,
        rgba(10, 2, 0, 0.0) 30%,
        rgba(10, 2, 0, 0.0) 50%,
        rgba(10, 2, 0, 0.85) 95%,
        #0a0200 100%),
      linear-gradient(90deg, rgba(10, 2, 0, 0.8) 0%, transparent 45%);
  }
  /* fire glow at bottom */
  .char-hero-bg::before {
    content: '';
    position: absolute;
    bottom: -10%; left: -10%; right: -10%;
    height: 40%;
    background: radial-gradient(ellipse at center bottom,
      rgba(255, 90, 0, 0.35) 0%,
      rgba(255, 60, 0, 0.15) 30%,
      transparent 60%);
    pointer-events: none;
    filter: blur(20px);
  }

  .char-hero-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: clamp(1.5rem, 4vw, 3.5rem);
    z-index: 3;
  }
  .char-band-tag {
    font-family: 'Special Elite', cursive;
    font-size: clamp(0.85rem, 1.5vw, 1rem);
    color: #ffaa00;
    letter-spacing: 0.4em;
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(255, 90, 30, 0.7);
  }
  .char-band-tag::before { content: '✦ '; color: #ff5a1f; }
  .char-band-tag::after  { content: ' ✦'; color: #ff5a1f; }

  .char-title {
    font-family: 'Metal Mania', cursive;
    font-size: clamp(4rem, 14vw, 10rem);
    line-height: 0.85;
    margin: 0;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg,
      #ffe066 0%,
      #ffaa00 35%,
      #ff5a00 70%,
      #aa1500 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
      0 0 30px rgba(255, 90, 30, 0.6),
      0 0 60px rgba(200, 30, 0, 0.4);
    filter: drop-shadow(0 6px 0 #5a0500) drop-shadow(0 12px 20px rgba(0,0,0,0.9));
    transform: rotate(-1.5deg);
    display: inline-block;
  }
  .char-role {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(0.95rem, 1.6vw, 1.15rem);
    color: #f0e6d4;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-top: 1rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  }
  .char-role span { color: #ff8833; }

  /* big metal CTA button */
  .char-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: 1.8rem;
    padding: 1rem 2.2rem;
    background: linear-gradient(180deg, #ff7722 0%, #cc2200 100%);
    color: #fff;
    font-family: 'Metal Mania', cursive;
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    letter-spacing: 0.06em;
    text-decoration: none;
    border: 2px solid #ffaa44;
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.55),
      0 0 30px rgba(255, 90, 30, 0.45),
      0 7px 0 #5a0500,
      0 9px 18px rgba(0,0,0,0.6);
    transition: transform 0.15s, box-shadow 0.15s;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  }
  .char-chat-btn:hover {
    transform: translateY(-3px);
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.55),
      0 0 40px rgba(255, 120, 40, 0.65),
      0 10px 0 #5a0500,
      0 14px 24px rgba(0,0,0,0.7);
  }
  .char-chat-btn:active { transform: translateY(2px); box-shadow: 0 0 0 4px rgba(0,0,0,0.55), 0 0 20px rgba(255, 90, 30, 0.4), 0 4px 0 #5a0500; }

  /* SECTIONS */
  .char-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4rem clamp(1.2rem, 4vw, 2.5rem);
    position: relative;
    z-index: 2;
  }
  .char-h2 {
    font-family: 'Metal Mania', cursive;
    font-size: clamp(2.2rem, 5.5vw, 3.6rem);
    color: #ff8833;
    text-shadow:
      0 0 24px rgba(255, 90, 30, 0.55),
      0 3px 0 #4a0500,
      0 6px 12px rgba(0,0,0,0.7);
    margin-bottom: 1.8rem;
    letter-spacing: 0.04em;
    line-height: 1;
    transform: rotate(-0.8deg);
    display: inline-block;
  }
  .char-h2::before { content: '// '; color: #aa3300; }

  /* ABOUT + tags */
  .char-about p {
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    line-height: 1.7;
    color: #e6d4b8;
    max-width: 70ch;
  }
  .char-about p + p { margin-top: 1rem; }
  .char-tags {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .char-tag {
    padding: 0.4rem 0.9rem;
    background: rgba(255, 90, 30, 0.12);
    border: 1px solid rgba(255, 130, 50, 0.45);
    color: #ffaa66;
    font-family: 'Special Elite', cursive;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    text-transform: lowercase;
  }

  /* QUOTES — like ripped flyers / sticky notes */
  .quote-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
  }
  .quote-card {
    background:
      linear-gradient(180deg, #f4e6c8 0%, #e8d0a0 100%);
    color: #1a0500;
    padding: 1.5rem 1.6rem;
    font-family: 'Special Elite', cursive;
    font-size: 1.08rem;
    line-height: 1.55;
    position: relative;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.3) inset,
      0 0 20px rgba(0, 0, 0, 0.4),
      0 12px 28px rgba(0, 0, 0, 0.7);
    transform: rotate(-1.2deg);
    transition: transform 0.3s ease;
  }
  .quote-card:nth-child(2) { transform: rotate(1.5deg); }
  .quote-card:nth-child(3) { transform: rotate(-0.5deg); }
  .quote-card:nth-child(4) { transform: rotate(0.8deg); }
  .quote-card:hover { transform: rotate(0) scale(1.03); }
  /* tape effect */
  .quote-card::before {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    width: 70px; height: 18px;
    transform: translateX(-50%) rotate(-3deg);
    background: rgba(255, 255, 255, 0.25);
    border-left: 1px dashed rgba(0,0,0,0.1);
    border-right: 1px dashed rgba(0,0,0,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  /* BAND POSTER */
  .band-poster-wrap {
    margin: 0 auto 2.5rem;
    max-width: 720px;
    position: relative;
    transform: rotate(-1deg);
  }
  .band-poster-wrap img {
    width: 100%;
    display: block;
    filter: contrast(1.08) saturate(1.05);
    box-shadow:
      0 0 60px rgba(255, 60, 0, 0.35),
      0 16px 40px rgba(0,0,0,0.8);
    border: 1px solid rgba(255, 130, 50, 0.3);
  }

  /* member cards */
  .member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
  }
  .member-card {
    background:
      linear-gradient(165deg, rgba(40, 8, 4, 0.85), rgba(15, 2, 0, 0.95));
    border: 1px solid rgba(255, 130, 50, 0.25);
    border-left: 4px solid #ff5a1f;
    padding: 1.3rem 1.4rem;
    transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  }
  .member-card:hover {
    transform: translateY(-3px);
    border-left-color: #ffaa00;
    box-shadow: 0 8px 24px rgba(255, 90, 30, 0.2);
  }
  .member-card.traitor {
    border-left-color: #cc0000;
    background:
      repeating-linear-gradient(45deg,
        rgba(80, 0, 0, 0.6), rgba(80, 0, 0, 0.6) 8px,
        rgba(40, 0, 0, 0.7) 8px, rgba(40, 0, 0, 0.7) 16px);
  }
  .member-name {
    font-family: 'Metal Mania', cursive;
    font-size: 1.7rem;
    color: #ffaa00;
    line-height: 1;
    margin-bottom: 0.3rem;
    text-shadow: 0 2px 0 #4a0500;
  }
  .member-role {
    font-family: 'Special Elite', cursive;
    font-size: 0.78rem;
    color: #ff8833;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 0.7rem;
  }
  .member-desc {
    color: #d8c4a0;
    font-size: 0.96rem;
    line-height: 1.5;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
  }
  .member-tag {
    display: inline-block;
    margin-top: 0.7rem;
    padding: 0.2rem 0.6rem;
    background: rgba(204, 0, 0, 0.25);
    border: 1px solid #cc0000;
    color: #ff6666;
    font-family: 'Special Elite', cursive;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .rivals-intro {
    font-family: 'Special Elite', cursive;
    color: #ff6633;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 1.8rem;
    font-size: 0.95rem;
  }
  .rivals-intro::before { content: '— '; }
  .rivals-intro::after  { content: ' —'; }

  /* SPOILER */
  .spoiler-details {
    background: linear-gradient(165deg, rgba(30, 6, 2, 0.7), rgba(8, 0, 0, 0.85));
    border: 2px solid #aa1500;
    overflow: hidden;
  }
  .spoiler-details summary {
    list-style: none;
    padding: 2.2rem 1.5rem;
    text-align: center;
    background: repeating-linear-gradient(45deg,
      rgba(255, 70, 0, 0.08), rgba(255, 70, 0, 0.08) 10px,
      rgba(170, 20, 0, 0.12) 10px, rgba(170, 20, 0, 0.12) 20px);
    transition: background 0.2s;
  }
  .spoiler-details summary::-webkit-details-marker { display: none; }
  .spoiler-details summary:hover {
    background: repeating-linear-gradient(45deg,
      rgba(255, 70, 0, 0.16), rgba(255, 70, 0, 0.16) 10px,
      rgba(170, 20, 0, 0.20) 10px, rgba(170, 20, 0, 0.20) 20px);
  }
  .spoiler-warn {
    display: block;
    font-family: 'Metal Mania', cursive;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: #ff4400;
    text-shadow: 0 0 18px rgba(255, 70, 0, 0.6), 0 2px 0 #4a0500;
    letter-spacing: 0.1em;
  }
  .spoiler-cta {
    display: block;
    font-family: 'Special Elite', cursive;
    color: #ffaa66;
    margin-top: 0.6rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    font-size: 0.85rem;
  }
  .spoiler-details[open] .spoiler-cta { color: #888; }
  .spoiler-details[open] .spoiler-cta::before { content: '— '; }
  .spoiler-details[open] .spoiler-cta::after { content: ' —'; }
  .spoiler-content {
    padding: 2rem 1.8rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #d8c4a0;
    border-top: 2px solid rgba(255, 70, 0, 0.3);
    background: rgba(0, 0, 0, 0.5);
  }
  .spoiler-content p + p { margin-top: 1rem; }
  .spoiler-content strong { color: #ffaa00; font-weight: 700; }

  /* GALLERY */

  .gallery-sub {
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    margin: -0.5rem 0 1.4rem;
    font-size: 0.95rem;
  }
  .scorch-quote {
    margin: 0 auto;
    max-width: 720px;
    padding: 1.8rem 2.2rem;
    border-left: 3px solid #ff6a1f;
    background: linear-gradient(135deg, rgba(255,106,31,0.08), rgba(139,17,0,0.04));
    font-family: 'Cinzel', serif;
    font-style: italic;
    font-size: 1.35rem;
    line-height: 1.5;
    color: #ffd8b0;
    text-shadow: 0 0 12px rgba(255,106,31,0.35);
    border-radius: 4px;
    position: relative;
  }
  .scorch-quote cite {
    display: block;
    margin-top: 1rem;
    font-style: normal;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-image: linear-gradient(180deg, #ffd24a 0%, #ff8a2a 60%, #b71c1c 100%);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 10px rgba(255,87,34,0.4);
  }

  /* ---------- GALLERY ENTRY CARD ---------- */
  .gallery-entry {
    display: block; width: 100%; max-width: 520px;
    margin: 0 auto; position: relative;
    aspect-ratio: 3 / 4;
    border: 0; padding: 0; cursor: pointer;
    overflow: hidden; border-radius: 16px;
    background: #0a0306;
    box-shadow: 0 0 60px rgba(255,60,0,0.25), 0 20px 50px rgba(0,0,0,0.7);
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease;
  }
  .gallery-entry:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 0 80px rgba(255,106,31,0.45), 0 24px 60px rgba(0,0,0,0.8);
  }
  .gallery-entry-cover {
    width: 100%; height: 100%; object-fit: cover;
    filter: brightness(0.62) contrast(1.05) saturate(1.1);
    transition: filter 0.4s ease, transform 0.6s ease;
  }
  .gallery-entry:hover .gallery-entry-cover {
    filter: brightness(0.78) contrast(1.08) saturate(1.15);
    transform: scale(1.05);
  }
  .gallery-entry-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 0.6rem; text-align: center;
    background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.45) 60%, rgba(15,2,0,0.85) 100%);
    pointer-events: none;
  }
  .gallery-entry-eyebrow {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    letter-spacing: 0.12em; text-transform: uppercase;
    background-image: linear-gradient(180deg, #fff3a0 0%, #ffd24a 18%, #ff8a2a 45%, #ff3b1f 75%, #8b1100 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(255,152,0,0.7), 0 0 24px rgba(244,67,54,0.5);
  }
  .gallery-entry-count {
    font-family: 'Cinzel', serif; font-size: 1rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: #ffd8b0; text-shadow: 0 0 10px rgba(255,106,31,0.4);
  }
  .gallery-entry-cta {
    margin-top: 0.4rem; padding: 0.55rem 1.4rem;
    border: 1px solid rgba(255,138,42,0.6);
    border-radius: 999px;
    font-family: 'Cinzel', serif; font-size: 0.85rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: #ffd8b0;
    background: rgba(20,5,0,0.5);
    backdrop-filter: blur(4px);
  }
  /* ---------- CAROUSEL OVERLAY ---------- */
  .carousel {
    position: fixed; inset: 0;
    background: rgba(5,1,0,0.96);
    z-index: 9999;
    display: flex; flex-direction: column;
    animation: carousel-in 0.3s ease;
  }
  @keyframes carousel-in { from { opacity: 0; } to { opacity: 1; } }
  .carousel-close {
    position: absolute; top: 1rem; right: 1rem; z-index: 2;
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,138,42,0.5);
    color: #ffd8b0;
    width: 44px; height: 44px; border-radius: 50%;
    font-size: 1.4rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease;
  }
  .carousel-close:hover { background: rgba(255,106,31,0.2); border-color: rgba(255,138,42,1); }
  .carousel-stage {
    flex: 1;
    display: flex; align-items: center; justify-content: center;
    padding: 4rem 1rem 1rem;
    position: relative; overflow: hidden;
  }
  .carousel-stage img {
    max-width: 92%; max-height: 100%;
    object-fit: contain;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7), 0 0 80px rgba(255,60,0,0.15);
    border-radius: 8px;
    animation: carousel-img-in 0.35s ease;
  }
  @keyframes carousel-img-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
  .carousel-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(255,138,42,0.4);
    color: #ffd8b0;
    width: 52px; height: 52px; border-radius: 50%;
    font-size: 1.6rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s ease; z-index: 2;
  }
  .carousel-nav:hover { background: rgba(255,106,31,0.25); border-color: rgba(255,138,42,1); }
  .carousel-nav.prev { left: 1rem; }
  .carousel-nav.next { right: 1rem; }
  .carousel-caption {
    text-align: center; padding: 1rem 1.5rem;
    color: #ffd8b0;
    font-family: 'Cinzel', serif; font-style: italic;
    font-size: 1.05rem;
    text-shadow: 0 0 12px rgba(255,106,31,0.35);
    min-height: 2.5rem;
  }
  .carousel-dots {
    display: flex; justify-content: center; gap: 0.5rem;
    padding: 0.5rem 1rem 1.5rem;
    flex-wrap: wrap;
  }
  .carousel-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,216,176,0.25);
    border: 0; padding: 0; cursor: pointer;
    transition: all 0.2s ease;
  }
  .carousel-dot:hover { background: rgba(255,216,176,0.5); }
  .carousel-dot.active {
    background: linear-gradient(180deg, #ffd24a, #ff3b1f);
    box-shadow: 0 0 10px rgba(255,106,31,0.7);
    width: 28px; border-radius: 5px;
  }
  @media (max-width: 600px) {
    .carousel-nav { width: 42px; height: 42px; font-size: 1.3rem; }
    .carousel-stage { padding: 3.5rem 0.5rem 0.5rem; }
  }

  /* FINAL CTA */
  .char-final-cta {
    text-align: center;
    padding: 4rem 1.5rem 5rem;
  }
  .char-final-cta .char-chat-btn { display: inline-flex; }
  .char-back-link {
    display: block;
    margin-top: 2rem;
    font-family: 'Special Elite', cursive;
    color: #aa6644;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: 0.85rem;
    text-decoration: none;
  }
  .char-back-link:hover { color: #ffaa66; }

  @media (max-width: 600px) {
    .char-section { padding: 3rem 1.2rem; }
    .quote-grid { gap: 1.4rem; }
    .quote-card::before { width: 50px; }
  }

  /* ============================================================
     SETLIST / MUSIC PLAYER — The Snake Skins live stage console
     ============================================================ */
  .setlist-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1.8rem;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(255, 90, 30, 0.18) 0%, transparent 60%),
      linear-gradient(165deg, rgba(30, 8, 4, 0.94), rgba(10, 2, 0, 0.98));
    border: 1px solid rgba(255, 130, 50, 0.3);
    border-top: 3px solid #ff5a1f;
    border-bottom: 3px solid #5a0500;
    padding: clamp(1.2rem, 2.4vw, 2rem);
    position: relative;
    box-shadow:
      inset 0 0 60px rgba(255, 60, 0, 0.08),
      0 18px 50px rgba(0, 0, 0, 0.75),
      0 0 80px rgba(255, 60, 0, 0.18);
  }
  /* rivets in top corners */
  .setlist-stage::before,
  .setlist-stage::after {
    content: '';
    position: absolute;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffaa66, #4a1500 70%, #1a0500);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  }
  .setlist-stage::before { top: 10px; left: 10px; }
  .setlist-stage::after  { top: 10px; right: 10px; }

  @media (max-width: 760px) {
    .setlist-stage { grid-template-columns: 1fr; gap: 1.4rem; }
  }

  /* === LEFT: NOW PLAYING CONSOLE === */
  .np-console {
    display: flex; flex-direction: column;
    min-width: 0;
  }
  .np-display {
    position: relative;
    background: linear-gradient(180deg, #1a0a04 0%, #0a0200 100%);
    border: 1px solid rgba(255, 130, 50, 0.35);
    padding: 1rem 1.1rem 0.9rem;
    overflow: hidden;
    box-shadow: inset 0 0 24px rgba(255, 60, 0, 0.12);
  }
  /* scanline overlay on the LCD-style display */
  .np-display::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 2px,
      rgba(255, 90, 30, 0.05) 2px, rgba(255, 90, 30, 0.05) 3px);
    pointer-events: none;
  }
  .np-eyebrow {
    font-family: 'Special Elite', cursive;
    font-size: 0.72rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: #ff8833;
    text-shadow: 0 0 8px rgba(255, 90, 30, 0.6);
    display: flex; align-items: center; gap: 0.5rem;
  }
  .np-eyebrow .live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #ff2a00;
    box-shadow: 0 0 8px #ff5a1f, 0 0 14px rgba(255, 90, 30, 0.6);
    animation: liveBlink 1.4s ease-in-out infinite;
  }
  @keyframes liveBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.85); }
  }
  .np-title {
    font-family: 'Metal Mania', cursive;
    font-size: clamp(1.7rem, 3.6vw, 2.4rem);
    color: #ffd070;
    line-height: 1;
    margin: 0.55rem 0 0.25rem;
    letter-spacing: 0.02em;
    text-shadow:
      0 0 18px rgba(255, 90, 30, 0.6),
      0 2px 0 #4a0500;
    word-break: break-word;
  }
  .np-sub {
    font-family: 'Special Elite', cursive;
    font-size: 0.9rem;
    color: #d0a866;
    letter-spacing: 0.08em;
  }

  /* === LIVE AUDIO VISUALIZER === */
  .np-viz {
    height: 70px;
    margin: 0.9rem 0 0.3rem;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding: 0 2px;
    position: relative;
    z-index: 1;
  }
  .np-viz-bar {
    flex: 1 1 0;
    min-width: 3px;
    height: 12%;
    background: linear-gradient(180deg, #ffe066 0%, #ffaa00 30%, #ff5a00 65%, #aa1500 100%);
    border-radius: 1px 1px 0 0;
    transform-origin: bottom;
    transition: height 90ms ease-out, opacity 200ms ease;
    opacity: 0.55;
    box-shadow: 0 0 4px rgba(255, 90, 30, 0.4);
  }
  .np-console.is-playing .np-viz-bar { opacity: 1; }

  /* === PROGRESS BAR — looks like a heated filament === */
  .np-progress {
    margin-top: 0.6rem;
    position: relative;
    height: 8px;
    background: rgba(255, 90, 30, 0.12);
    border: 1px solid rgba(255, 130, 50, 0.3);
  }
  .np-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    background: linear-gradient(90deg, #ffe066, #ff5a1f);
    box-shadow: 0 0 12px rgba(255, 90, 30, 0.7);
    transition: width 0.1s linear;
  }
  .np-progress-head {
    position: absolute;
    top: 50%; left: 0%;
    width: 14px; height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff5cc, #ff8833 60%, #aa1500);
    box-shadow: 0 0 10px #ff5a1f, 0 0 18px rgba(255, 90, 30, 0.7);
    pointer-events: none;
    transition: left 0.1s linear;
  }
  .np-times {
    display: flex; justify-content: space-between;
    font-family: 'Special Elite', cursive;
    font-size: 0.8rem;
    color: #ffaa66;
    margin-top: 0.45rem;
    letter-spacing: 0.06em;
    position: relative;
    z-index: 1;
  }

  /* === TRANSPORT CONTROLS === */
  .np-transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin-top: 1.1rem;
  }
  .np-btn {
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 130, 50, 0.55);
    color: #ffaa66;
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.18s, box-shadow 0.18s, background 0.18s, color 0.18s, border-color 0.18s;
    font-family: 'Oswald', sans-serif;
    padding: 0;
  }
  .np-btn:hover {
    transform: translateY(-2px);
    border-color: #ffaa00;
    color: #ffd070;
    box-shadow: 0 0 18px rgba(255, 90, 30, 0.45);
  }
  .np-btn:active { transform: translateY(0) scale(0.95); }
  .np-btn svg { width: 18px; height: 18px; fill: currentColor; }

  .np-btn.np-play {
    width: 72px; height: 72px;
    border-width: 3px;
    border-color: #ff5a1f;
    color: #ffe066;
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.45),
      0 0 22px rgba(255, 90, 30, 0.55),
      inset 0 0 18px rgba(255, 90, 30, 0.2);
  }
  .np-btn.np-play svg { width: 26px; height: 26px; }
  .np-btn.np-play:hover {
    background: rgba(255, 90, 30, 0.15);
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.45),
      0 0 35px rgba(255, 90, 30, 0.75),
      inset 0 0 22px rgba(255, 90, 30, 0.3);
  }
  .np-console.is-playing .np-btn.np-play {
    animation: playPulse 1.6s ease-in-out infinite;
  }
  @keyframes playPulse {
    0%, 100% {
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.45),
        0 0 22px rgba(255, 90, 30, 0.55),
        inset 0 0 18px rgba(255, 90, 30, 0.2);
    }
    50% {
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.45),
        0 0 40px rgba(255, 90, 30, 0.9),
        0 0 60px rgba(255, 130, 50, 0.4),
        inset 0 0 28px rgba(255, 90, 30, 0.4);
    }
  }

  /* === RIGHT: HANDWRITTEN SETLIST PAPER === */
  .np-setlist {
    position: relative;
    background:
      repeating-linear-gradient(180deg,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 32px,
        rgba(255, 90, 30, 0.06) 32px, rgba(255, 90, 30, 0.06) 33px),
      linear-gradient(180deg, #f4e6c8 0%, #e8d0a0 100%);
    color: #1a0500;
    padding: 1.4rem 1.4rem 1.2rem;
    font-family: 'Special Elite', cursive;
    box-shadow:
      inset 0 0 20px rgba(120, 60, 0, 0.25),
      0 12px 28px rgba(0, 0, 0, 0.6);
    transform: rotate(0.6deg);
  }
  /* tape strips on the top corners */
  .np-setlist::before,
  .np-setlist::after {
    content: '';
    position: absolute; top: -10px;
    width: 70px; height: 18px;
    background: rgba(255, 230, 180, 0.55);
    border-left: 1px dashed rgba(0,0,0,0.15);
    border-right: 1px dashed rgba(0,0,0,0.15);
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  }
  .np-setlist::before { left: 10%; transform: rotate(-4deg); }
  .np-setlist::after  { right: 10%; transform: rotate(5deg); }

  .np-setlist-head {
    font-family: 'Metal Mania', cursive;
    font-size: 1.6rem;
    color: #aa2200;
    letter-spacing: 0.04em;
    margin-bottom: 0.4rem;
    text-shadow: 0 1px 0 rgba(255, 200, 120, 0.6);
  }
  .np-setlist-sub {
    font-size: 0.78rem;
    color: #6a3010;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.9rem;
    opacity: 0.85;
  }
  .np-track {
    display: grid;
    grid-template-columns: 2.2em 1fr auto;
    align-items: baseline;
    gap: 0.7rem;
    padding: 0.55rem 0.4rem;
    border: none;
    border-bottom: 1px dashed rgba(80, 30, 0, 0.35);
    text-align: left;
    width: 100%;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    transition: background 0.18s, transform 0.18s, color 0.18s;
  }
  .np-track:last-child { border-bottom: none; }
  .np-track:hover {
    background: rgba(255, 90, 30, 0.12);
    transform: translateX(2px);
  }
  .np-track-num {
    font-weight: 700;
    color: #aa2200;
    text-align: left;
  }
  .np-track-name {
    font-size: 1.05rem;
    line-height: 1.15;
    color: #1a0500;
  }
  .np-track-len {
    color: #5a2000;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
  }
  .np-track.is-active { background: rgba(255, 90, 30, 0.18); }
  .np-track.is-active .np-track-name {
    color: #aa2200;
    font-weight: 700;
  }
  .np-track.is-active .np-track-num {
    color: #ff2a00;
    text-shadow: 0 0 6px rgba(255, 60, 0, 0.5);
  }

  .np-scribble {
    margin-top: 0.9rem;
    font-size: 0.8rem;
    color: #6a3010;
    text-align: right;
    transform: rotate(-1.5deg);
    letter-spacing: 0.04em;
  }
  .np-scribble strong { color: #aa2200; }

  @media (max-width: 480px) {
    .np-transport { gap: 1rem; }
    .np-btn { width: 44px; height: 44px; }
    .np-btn.np-play { width: 64px; height: 64px; }
  }

  /* ============================================================
     SHANE PAGE — chill bassist, chrome / steel / leather aesthetic
     ============================================================ */
  .shane-page {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(20, 50, 80, 0.55) 0%, transparent 70%),
      radial-gradient(ellipse at 50% 100%, rgba(30, 60, 95, 0.4) 0%, transparent 60%),
      linear-gradient(180deg, #050a14 0%, #0d1929 50%, #050a14 100%);
    color: #c8d0dc;
  }
  /* keep the grain, lose the fire-glow */
  .shane-page::after {
    background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 3px,
      rgba(0, 0, 0, 0.08) 3px, rgba(0, 0, 0, 0.08) 4px);
  }

  /* close button — chrome blue */
  .shane-page .char-close {
    border-color: #5fb0d4;
    color: #a8c8e0;
    box-shadow: 0 0 20px rgba(95, 176, 212, 0.35), 0 4px 16px rgba(0,0,0,0.6);
  }
  .shane-page .char-close:hover {
    background: #2a5a78;
    color: #fff;
    box-shadow: 0 0 30px rgba(95, 176, 212, 0.6);
  }

  /* hero: cool blue tint instead of fire wash */
  .shane-page .char-hero-bg {
    filter: contrast(1.08) saturate(0.85) brightness(0.85);
  }
  .shane-page .char-hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(5, 10, 20, 0.6) 0%,
        rgba(5, 10, 20, 0.0) 30%,
        rgba(5, 10, 20, 0.0) 50%,
        rgba(5, 10, 20, 0.88) 95%,
        #050a14 100%),
      linear-gradient(90deg, rgba(5, 10, 20, 0.75) 0%, transparent 45%);
  }
  /* swap fire glow at bottom for cool chrome haze */
  .shane-page .char-hero-bg::before {
    background: radial-gradient(ellipse at center bottom,
      rgba(95, 176, 212, 0.22) 0%,
      rgba(95, 176, 212, 0.10) 30%,
      transparent 60%);
  }

  .shane-page .char-band-tag {
    color: #88b8d4;
    text-shadow: 0 0 12px rgba(95, 176, 212, 0.5);
  }
  .shane-page .char-band-tag::before,
  .shane-page .char-band-tag::after { color: #5fb0d4; }

  .shane-page .char-title {
    background: linear-gradient(180deg,
      #e8eef4 0%,
      #c0d0e0 30%,
      #6a8aa8 65%,
      #2a4a68 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
      0 0 30px rgba(95, 176, 212, 0.45),
      0 0 60px rgba(40, 80, 120, 0.35);
    filter: drop-shadow(0 6px 0 #0a1828) drop-shadow(0 12px 20px rgba(0,0,0,0.9));
    transform: rotate(-1deg);
  }
  .shane-page .char-role { color: #c8d0dc; }
  .shane-page .char-role span { color: #88b8d4; }

  /* CTA button: chrome steel with deep navy depth */
  .shane-page .char-chat-btn {
    background: linear-gradient(180deg, #4a6a88 0%, #1e3a55 100%);
    border-color: #88b8d4;
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.55),
      0 0 30px rgba(95, 176, 212, 0.35),
      0 7px 0 #0a1828,
      0 9px 18px rgba(0,0,0,0.6);
  }
  .shane-page .char-chat-btn:hover {
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.55),
      0 0 40px rgba(120, 190, 220, 0.6),
      0 10px 0 #0a1828,
      0 14px 24px rgba(0,0,0,0.7);
  }
  .shane-page .char-chat-btn:active {
    box-shadow: 0 0 0 4px rgba(0,0,0,0.55), 0 0 20px rgba(95, 176, 212, 0.4), 0 4px 0 #0a1828;
  }

  /* section h2: chrome instead of orange */
  .shane-page .char-h2 {
    color: #a8c8e0;
    text-shadow:
      0 0 24px rgba(95, 176, 212, 0.45),
      0 3px 0 #0a1828,
      0 6px 12px rgba(0,0,0,0.7);
  }
  .shane-page .char-h2::before { color: #5a7a98; }

  /* tags: cool blue */
  .shane-page .char-tag {
    background: rgba(95, 176, 212, 0.10);
    border-color: rgba(120, 180, 210, 0.4);
    color: #a8c8e0;
  }

  .shane-page .char-about p { color: #c8d0dc; }
  .shane-page .char-about p strong { color: #d0e0f0; }
  .shane-page .char-about p em { color: #88b8d4; }

  /* member cards — steel left-border instead of fire */
  .shane-page .member-card {
    background: linear-gradient(165deg, rgba(15, 30, 50, 0.85), rgba(5, 10, 20, 0.95));
    border-color: rgba(95, 176, 212, 0.25);
    border-left: 4px solid #5fb0d4;
  }
  .shane-page .member-card:hover {
    border-left-color: #a8d4ee;
    box-shadow: 0 8px 24px rgba(95, 176, 212, 0.18);
  }
  .shane-page .member-name { color: #a8c8e0; text-shadow: 0 2px 0 #0a1828; }
  .shane-page .member-role { color: #88b8d4; }
  .shane-page .member-desc { color: #c0c8d4; }

  .shane-page .rivals-intro { color: #88b8d4; }

  /* backstory spoiler — cool case-file feel */
  .shane-page .spoiler-details {
    background: linear-gradient(165deg, rgba(15, 25, 40, 0.7), rgba(2, 5, 12, 0.85));
    border: 2px solid #2a5a78;
  }
  .shane-page .spoiler-details summary {
    background: repeating-linear-gradient(45deg,
      rgba(95, 176, 212, 0.05), rgba(95, 176, 212, 0.05) 10px,
      rgba(40, 80, 120, 0.10) 10px, rgba(40, 80, 120, 0.10) 20px);
  }
  .shane-page .spoiler-details summary:hover {
    background: repeating-linear-gradient(45deg,
      rgba(95, 176, 212, 0.10), rgba(95, 176, 212, 0.10) 10px,
      rgba(40, 80, 120, 0.18) 10px, rgba(40, 80, 120, 0.18) 20px);
  }
  .shane-page .spoiler-warn {
    color: #88c8e8;
    text-shadow: 0 0 18px rgba(95, 176, 212, 0.55), 0 2px 0 #0a1828;
  }
  .shane-page .spoiler-cta { color: #a8c8e0; }
  .shane-page .spoiler-content { color: #c8d0dc; border-top: 2px solid rgba(95, 176, 212, 0.3); }
  .shane-page .spoiler-content strong { color: #a8d4ee; }

  /* JOURNAL — actual journal page, leather cover, lined paper inside */
  .journal-details {
    max-width: 700px;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(165deg, #3a2010 0%, #1e1006 100%);
    border: 1px solid rgba(120, 80, 40, 0.45);
    box-shadow:
      0 0 0 1px rgba(180, 130, 60, 0.15) inset,
      0 0 40px rgba(0, 0, 0, 0.7),
      0 18px 50px rgba(0, 0, 0, 0.75);
    transform: rotate(-0.6deg);
  }
  /* stitching detail around the leather cover */
  .journal-details::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(180, 130, 60, 0.35);
    pointer-events: none;
  }
  .journal-details summary {
    list-style: none;
    padding: 2rem 1.5rem;
    text-align: center;
    font-family: 'Special Elite', cursive;
    position: relative;
    transition: background 0.2s;
  }
  .journal-details summary::-webkit-details-marker { display: none; }
  .journal-details summary:hover { background: rgba(180, 130, 60, 0.08); }
  .journal-warn {
    display: block;
    font-family: 'Metal Mania', cursive;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
    color: #d4a868;
    letter-spacing: 0.06em;
    text-shadow: 0 0 14px rgba(180, 130, 60, 0.5), 0 2px 0 #1a0a00;
  }
  .journal-cta {
    display: block;
    font-family: 'Special Elite', cursive;
    color: #c8a878;
    margin-top: 0.5rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.78rem;
    opacity: 0.85;
  }
  .journal-details[open] .journal-cta::before { content: '— '; }
  .journal-details[open] .journal-cta::after  { content: ' —'; }
  /* inside the journal: looks like aged lined paper */
  .journal-content {
    padding: 2rem 2.2rem 2.4rem;
    background:
      repeating-linear-gradient(180deg,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 30px,
        rgba(80, 40, 10, 0.18) 30px, rgba(80, 40, 10, 0.18) 31px),
      linear-gradient(180deg, #e8d4a8 0%, #d8c090 100%);
    color: #2a1505;
    border-top: 2px solid rgba(120, 80, 40, 0.45);
    font-family: 'Special Elite', cursive;
    font-size: 1.02rem;
    line-height: 1.85;
  }
  .journal-content p { margin: 0 0 0.9rem; }
  .journal-content p:last-child { margin-bottom: 0; }
  .journal-entry-date {
    display: inline-block;
    font-weight: 700;
    color: #6a3010;
    margin-right: 0.5em;
    letter-spacing: 0.04em;
  }
  .journal-redacted {
    display: inline-block;
    background: #2a1505;
    color: transparent;
    padding: 0 0.4em;
    border-radius: 1px;
    user-select: none;
  }
  .journal-torn {
    display: block;
    color: #6a3010;
    font-style: italic;
    opacity: 0.6;
    text-align: center;
    margin: 0.4rem 0;
  }

  /* === SHANE PLAYER (bass-themed, chrome / leather notebook) === */
  .shane-page .setlist-stage {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(95, 176, 212, 0.14) 0%, transparent 60%),
      linear-gradient(165deg, rgba(15, 30, 50, 0.95), rgba(5, 10, 20, 0.98));
    border-color: rgba(95, 176, 212, 0.25);
    border-top: 3px solid #5fb0d4;
    border-bottom: 3px solid #0a1828;
    box-shadow:
      inset 0 0 60px rgba(95, 176, 212, 0.06),
      0 18px 50px rgba(0, 0, 0, 0.75),
      0 0 80px rgba(40, 80, 120, 0.18);
  }
  .shane-page .setlist-stage::before,
  .shane-page .setlist-stage::after {
    background: radial-gradient(circle at 30% 30%, #a8c8e0, #1e3a55 70%, #050a14);
  }
  .shane-page .np-display {
    background: linear-gradient(180deg, #0a1828 0%, #050a14 100%);
    border-color: rgba(95, 176, 212, 0.3);
    box-shadow: inset 0 0 24px rgba(95, 176, 212, 0.08);
  }
  .shane-page .np-display::after {
    background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 2px,
      rgba(95, 176, 212, 0.05) 2px, rgba(95, 176, 212, 0.05) 3px);
  }
  .shane-page .np-eyebrow {
    color: #88b8d4;
    text-shadow: 0 0 8px rgba(95, 176, 212, 0.55);
  }
  .shane-page .np-eyebrow .live-dot {
    background: #5fb0d4;
    box-shadow: 0 0 8px #5fb0d4, 0 0 14px rgba(95, 176, 212, 0.55);
  }
  .shane-page .np-title {
    color: #c8d8e8;
    text-shadow: 0 0 18px rgba(95, 176, 212, 0.55), 0 2px 0 #0a1828;
  }
  .shane-page .np-sub { color: #88a8c0; }

  /* Bass visualizer: chunkier, slower, steel→deep gradient */
  .shane-page .np-viz { gap: 5px; }
  .shane-page .np-viz-bar {
    background: linear-gradient(180deg, #d8e8f4 0%, #88b8d4 30%, #4a7a98 65%, #1a3a58 100%);
    box-shadow: 0 0 4px rgba(95, 176, 212, 0.4);
    transition: height 140ms ease-out, opacity 200ms ease;
  }

  .shane-page .np-progress {
    background: rgba(95, 176, 212, 0.10);
    border-color: rgba(95, 176, 212, 0.3);
  }
  .shane-page .np-progress-fill {
    background: linear-gradient(90deg, #c8d8e8, #5fb0d4);
    box-shadow: 0 0 12px rgba(95, 176, 212, 0.6);
  }
  .shane-page .np-progress-head {
    background: radial-gradient(circle at 30% 30%, #fff, #88b8d4 60%, #1e3a55);
    box-shadow: 0 0 10px #5fb0d4, 0 0 18px rgba(95, 176, 212, 0.65);
  }
  .shane-page .np-times { color: #88b8d4; }

  .shane-page .np-btn {
    border-color: rgba(95, 176, 212, 0.55);
    color: #a8c8e0;
  }
  .shane-page .np-btn:hover {
    border-color: #88b8d4;
    color: #d8e8f4;
    box-shadow: 0 0 18px rgba(95, 176, 212, 0.45);
  }
  .shane-page .np-btn.np-play {
    border-color: #5fb0d4;
    color: #c8e0f0;
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.45),
      0 0 22px rgba(95, 176, 212, 0.5),
      inset 0 0 18px rgba(95, 176, 212, 0.18);
  }
  .shane-page .np-btn.np-play:hover {
    background: rgba(95, 176, 212, 0.12);
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.45),
      0 0 35px rgba(120, 190, 220, 0.7),
      inset 0 0 22px rgba(95, 176, 212, 0.28);
  }
  .shane-page .np-console.is-playing .np-btn.np-play {
    animation: shanePlayPulse 2.4s ease-in-out infinite;
  }
  @keyframes shanePlayPulse {
    0%, 100% {
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.45),
        0 0 22px rgba(95, 176, 212, 0.5),
        inset 0 0 18px rgba(95, 176, 212, 0.18);
    }
    50% {
      box-shadow:
        0 0 0 4px rgba(0,0,0,0.45),
        0 0 40px rgba(95, 176, 212, 0.85),
        0 0 60px rgba(120, 190, 220, 0.4),
        inset 0 0 28px rgba(95, 176, 212, 0.4);
    }
  }

  /* Setlist: leather notebook instead of yellowed paper */
  .shane-page .np-setlist {
    background:
      repeating-linear-gradient(180deg,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 32px,
        rgba(60, 30, 10, 0.20) 32px, rgba(60, 30, 10, 0.20) 33px),
      linear-gradient(180deg, #3a2a1a 0%, #1e1408 100%);
    color: #d4c098;
    box-shadow:
      inset 0 0 24px rgba(0, 0, 0, 0.5),
      0 12px 28px rgba(0, 0, 0, 0.7);
    transform: rotate(-0.4deg);
    border: 1px solid rgba(120, 80, 40, 0.35);
  }
  .shane-page .np-setlist::before,
  .shane-page .np-setlist::after {
    background: rgba(180, 140, 80, 0.4);
  }
  .shane-page .np-setlist-head { color: #d4a868; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
  .shane-page .np-setlist-sub { color: #a88040; }
  .shane-page .np-track { border-bottom: 1px dashed rgba(180, 130, 60, 0.3); }
  .shane-page .np-track:hover { background: rgba(95, 176, 212, 0.10); }
  .shane-page .np-track-num { color: #d4a868; }
  .shane-page .np-track-name { color: #e8d4a8; }
  .shane-page .np-track-len { color: #a8845a; }
  .shane-page .np-track.is-active { background: rgba(95, 176, 212, 0.15); }
  .shane-page .np-track.is-active .np-track-name { color: #fff; font-weight: 700; }
  .shane-page .np-track.is-active .np-track-num {
    color: #88c8e8;
    text-shadow: 0 0 6px rgba(95, 176, 212, 0.55);
  }
  .shane-page .np-scribble { color: #a8845a; }
  .shane-page .np-scribble strong { color: #d4a868; }

  /* gallery — chrome glow */
  .shane-page .gallery-entry {
    box-shadow: 0 0 60px rgba(95, 176, 212, 0.18), 0 20px 50px rgba(0,0,0,0.7);
  }
  .shane-page .gallery-entry:hover {
    box-shadow: 0 0 80px rgba(120, 190, 220, 0.4), 0 24px 60px rgba(0,0,0,0.8);
  }
  .shane-page .gallery-entry-eyebrow {
    background-image: linear-gradient(180deg, #e8eef4 0%, #c0d0e0 30%, #6a8aa8 65%, #2a4a68 100%);
    text-shadow: 0 0 12px rgba(95, 176, 212, 0.55), 0 0 24px rgba(40, 80, 120, 0.4);
  }
  .shane-page .gallery-entry-count { color: #c8d8e8; }
  .shane-page .gallery-entry-cta {
    border-color: rgba(95, 176, 212, 0.55);
    color: #c8d8e8;
  }

  /* signature pull-quote (reusing .scorch-quote markup but restyled) */
  .shane-page .scorch-quote {
    border-left: 3px solid #5fb0d4;
    background: linear-gradient(135deg, rgba(95,176,212,0.08), rgba(40,80,120,0.04));
    color: #c8d8e8;
    text-shadow: 0 0 12px rgba(95,176,212,0.3);
  }
  .shane-page .scorch-quote cite {
    background-image: linear-gradient(180deg, #e8eef4 0%, #88b8d4 60%, #2a4a68 100%);
    text-shadow: 0 0 10px rgba(95, 176, 212, 0.4);
  }

  /* back link */
  .shane-page .char-back-link { color: #5a7a98; }
  .shane-page .char-back-link:hover { color: #88b8d4; }

  /* ============================================================
     CODY PAGE — Cajun drummer, bayou twilight / brass / cypress
     palette: deep moss + warm bayou amber + porch-lamp gold
     ============================================================ */
  .cody-page {
    background:
      radial-gradient(ellipse at 50% 0%, rgba(60, 50, 20, 0.50) 0%, transparent 70%),
      radial-gradient(ellipse at 50% 100%, rgba(45, 70, 35, 0.45) 0%, transparent 60%),
      linear-gradient(180deg, #0c0a06 0%, #14180c 45%, #0a0b06 100%);
    color: #e8d8b0;
  }
  .cody-page::after {
    background: repeating-linear-gradient(0deg,
      transparent 0px, transparent 3px,
      rgba(0, 0, 0, 0.08) 3px, rgba(0, 0, 0, 0.08) 4px);
  }

  /* close button — warm brass */
  .cody-page .char-close {
    border-color: #d49a3a;
    color: #f4d27a;
    box-shadow: 0 0 20px rgba(212, 154, 58, 0.35), 0 4px 16px rgba(0,0,0,0.6);
  }
  .cody-page .char-close:hover {
    background: #6a4a14;
    color: #fff8d8;
    box-shadow: 0 0 30px rgba(244, 200, 100, 0.65);
  }

  /* hero: warm bayou tint */
  .cody-page .char-hero-bg {
    filter: contrast(1.08) saturate(1.05) brightness(0.88) sepia(0.18);
  }
  .cody-page .char-hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(10, 8, 4, 0.55) 0%,
        rgba(10, 8, 4, 0.0) 30%,
        rgba(10, 8, 4, 0.0) 50%,
        rgba(10, 8, 4, 0.88) 95%,
        #0a0806 100%),
      linear-gradient(90deg, rgba(10, 8, 4, 0.75) 0%, transparent 45%);
  }
  /* porch-lamp glow at bottom */
  .cody-page .char-hero-bg::before {
    background: radial-gradient(ellipse at center bottom,
      rgba(244, 200, 100, 0.28) 0%,
      rgba(212, 154, 58, 0.12) 30%,
      transparent 60%);
  }

  .cody-page .char-band-tag {
    color: #d4b86a;
    text-shadow: 0 0 12px rgba(212, 154, 58, 0.5);
  }
  .cody-page .char-band-tag::before,
  .cody-page .char-band-tag::after { color: #d49a3a; }

  .cody-page .char-title {
    background: linear-gradient(180deg,
      #fff4cc 0%,
      #f4d27a 25%,
      #d49a3a 55%,
      #8a5a1a 85%,
      #3a2410 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow:
      0 0 30px rgba(212, 154, 58, 0.5),
      0 0 60px rgba(120, 80, 25, 0.35);
    filter: drop-shadow(0 6px 0 #2a1808) drop-shadow(0 12px 20px rgba(0,0,0,0.9));
    transform: rotate(-1deg);
  }
  .cody-page .char-role { color: #e8d8b0; }
  .cody-page .char-role span { color: #d4b86a; }

  /* CTA button: brass + cypress depth */
  .cody-page .char-chat-btn {
    background: linear-gradient(180deg, #8a5a1a 0%, #3a2410 100%);
    border-color: #f4d27a;
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.55),
      0 0 30px rgba(212, 154, 58, 0.4),
      0 7px 0 #1a1008,
      0 9px 18px rgba(0,0,0,0.6);
  }
  .cody-page .char-chat-btn:hover {
    box-shadow:
      0 0 0 4px rgba(0,0,0,0.55),
      0 0 42px rgba(255, 220, 120, 0.65),
      0 10px 0 #1a1008,
      0 14px 24px rgba(0,0,0,0.7);
  }
  .cody-page .char-chat-btn:active {
    box-shadow: 0 0 0 4px rgba(0,0,0,0.55), 0 0 22px rgba(212, 154, 58, 0.45), 0 4px 0 #1a1008;
  }

  /* section h2: warm honey instead of orange/chrome */
  .cody-page .char-h2 {
    color: #f4d27a;
    text-shadow:
      0 0 24px rgba(212, 154, 58, 0.5),
      0 3px 0 #2a1808,
      0 6px 12px rgba(0,0,0,0.7);
  }
  .cody-page .char-h2::before { color: #8a6a2a; }

  /* tags: moss + brass */
  .cody-page .char-tag {
    background: rgba(212, 154, 58, 0.10);
    border-color: rgba(244, 210, 122, 0.4);
    color: #e8d8a8;
  }

  .cody-page .char-about p { color: #e8d8b0; }
  .cody-page .char-about p strong { color: #fff4cc; }
  .cody-page .char-about p em { color: #d4b86a; }

  /* member cards — brass left-border, cypress fill */
  .cody-page .member-card {
    background: linear-gradient(165deg, rgba(30, 35, 18, 0.85), rgba(12, 10, 6, 0.95));
    border-color: rgba(212, 154, 58, 0.25);
    border-left: 4px solid #d49a3a;
  }
  .cody-page .member-card:hover {
    border-left-color: #f4d27a;
    box-shadow: 0 8px 24px rgba(212, 154, 58, 0.18);
  }
  .cody-page .member-name { color: #f4d27a; text-shadow: 0 2px 0 #2a1808; }
  .cody-page .member-role { color: #b8a060; }
  .cody-page .member-desc { color: #d8c898; }

  /* backstory + depression + ex spoilers — burlap / case-file feel */
  .cody-page .spoiler-details {
    background: linear-gradient(165deg, rgba(35, 28, 14, 0.75), rgba(12, 10, 5, 0.9));
    border: 2px solid #6a4a1a;
  }
  .cody-page .spoiler-details summary {
    background: repeating-linear-gradient(45deg,
      rgba(212, 154, 58, 0.05), rgba(212, 154, 58, 0.05) 10px,
      rgba(90, 60, 20, 0.10) 10px, rgba(90, 60, 20, 0.10) 20px);
  }
  .cody-page .spoiler-details summary:hover {
    background: repeating-linear-gradient(45deg,
      rgba(212, 154, 58, 0.12), rgba(212, 154, 58, 0.12) 10px,
      rgba(120, 80, 25, 0.18) 10px, rgba(120, 80, 25, 0.18) 20px);
  }
  .cody-page .spoiler-warn {
    color: #f4d27a;
    text-shadow: 0 0 18px rgba(212, 154, 58, 0.55), 0 2px 0 #2a1808;
  }
  .cody-page .spoiler-cta { color: #d4b86a; }
  .cody-page .spoiler-content { color: #e8d8b0; border-top: 2px solid rgba(212, 154, 58, 0.3); }
  .cody-page .spoiler-content strong { color: #fff4cc; }
  .cody-page .spoiler-content em { color: #d4b86a; }

  /* ============================================================
     CODY PLAYER — vintage console record player
     Walnut cabinet, brass hardware, spinning vinyl, analog VU
     meter, and a tonearm that drops onto the record when playing.
     ============================================================ */

  /* outer grid */
  .cody-page .rp-stage {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem;
    position: relative;
    background:
      radial-gradient(ellipse at 30% 0%, rgba(212, 154, 58, 0.20) 0%, transparent 60%),
      linear-gradient(180deg, #1c1408 0%, #100a04 100%);
    border: 1px solid rgba(212, 154, 58, 0.35);
    border-radius: 14px;
    box-shadow:
      0 0 0 1px rgba(212, 154, 58, 0.20),
      0 0 50px rgba(120, 80, 25, 0.3),
      0 20px 50px rgba(0, 0, 0, 0.7),
      inset 0 0 60px rgba(0, 0, 0, 0.6);
  }
  @media (max-width: 760px) {
    .cody-page .rp-stage { grid-template-columns: 1fr; padding: 1.2rem; gap: 1.6rem; }
  }

  /* ===== THE CABINET ===== */
  .cody-page .rp-cabinet {
    background:
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0) 0px, rgba(0,0,0,0) 3px,
        rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px,
        rgba(255, 220, 160, 0.02) 4px, rgba(255, 220, 160, 0.02) 7px),
      linear-gradient(180deg, #4a2e16 0%, #3a2210 45%, #2a1808 100%);
    border: 1px solid rgba(212, 154, 58, 0.35);
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow:
      inset 0 2px 0 rgba(255, 200, 130, 0.15),
      inset 0 -8px 18px rgba(0, 0, 0, 0.6),
      0 16px 28px rgba(0, 0, 0, 0.6);
    position: relative;
  }
  .cody-page .rp-cabinet::before,
  .cody-page .rp-cabinet::after {
    content: '';
    position: absolute;
    width: 12px; height: 12px;
    background: radial-gradient(circle at 35% 35%, #fff4cc 5%, #d49a3a 40%, #6a4014 90%);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5), inset 0 -1px 2px rgba(0,0,0,0.4);
    top: 10px;
  }
  .cody-page .rp-cabinet::before { left: 10px; }
  .cody-page .rp-cabinet::after  { right: 10px; }

  /* ===== TOP DECK ===== */
  .cody-page .rp-deck {
    position: relative;
    background: radial-gradient(ellipse at center, #2a1810 0%, #150a04 70%, #0a0502 100%);
    border: 1px solid rgba(0,0,0,0.6);
    border-radius: 8px;
    padding: 2rem 1.5rem;
    min-height: 320px;
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7), inset 0 4px 8px rgba(0, 0, 0, 0.5);
  }

  /* ===== PLATTER ===== */
  .cody-page .rp-platter {
    width: 260px; height: 260px;
    border-radius: 50%;
    margin-left: 10px;
    background:
      radial-gradient(circle at center, #2a2018 0%, #1a1208 70%, #0a0502 100%),
      conic-gradient(from 0deg, #3a2a18, #2a1c0c, #3a2a18, #2a1c0c, #3a2a18, #2a1c0c, #3a2a18, #2a1c0c);
    background-blend-mode: multiply;
    box-shadow: 0 6px 14px rgba(0,0,0,0.7), inset 0 0 30px rgba(0,0,0,0.8);
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  @media (max-width: 760px) {
    .cody-page .rp-platter { width: 200px; height: 200px; margin: 0 auto; }
  }

  /* ===== RECORD ===== */
  .cody-page .rp-record {
    width: 240px; height: 240px;
    border-radius: 50%;
    background:
      repeating-radial-gradient(circle at center,
        #0a0a0a 0px, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 2px, #0a0a0a 2px, #0a0a0a 3px),
      radial-gradient(circle at center, #1a1a1a 0%, #050505 100%);
    box-shadow: 0 0 0 1px #000, inset 0 0 30px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.6);
    position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: rpSpin 1.8s linear infinite;
    animation-play-state: paused;
  }
  @media (max-width: 760px) {
    .cody-page .rp-record { width: 184px; height: 184px; }
  }
  .cody-page .rp-cabinet.is-playing .rp-record { animation-play-state: running; }
  @keyframes rpSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  .cody-page .rp-record-shine {
    position: absolute; inset: 0; border-radius: 50%;
    background: linear-gradient(135deg,
      rgba(255, 240, 200, 0) 0%, rgba(255, 240, 200, 0.10) 30%, rgba(255, 240, 200, 0) 45%,
      rgba(255, 240, 200, 0) 60%, rgba(120, 80, 30, 0.08) 80%, rgba(120, 80, 30, 0) 100%);
    pointer-events: none;
  }
  .cody-page .rp-record-grooves {
    position: absolute; inset: 8px; border-radius: 50%;
    background: radial-gradient(circle at center, transparent 0%, transparent 18%, rgba(80,80,80,0.18) 18%, rgba(80,80,80,0.18) 19%, transparent 19%, transparent 34%, rgba(80,80,80,0.18) 34%, rgba(80,80,80,0.18) 35%, transparent 35%, transparent 50%, rgba(80,80,80,0.18) 50%, rgba(80,80,80,0.18) 51%, transparent 51%, transparent 66%, rgba(80,80,80,0.18) 66%, rgba(80,80,80,0.18) 67%, transparent 67%, transparent 82%, rgba(80,80,80,0.18) 82%, rgba(80,80,80,0.18) 83%, transparent 83%);
    pointer-events: none;
  }

  /* ===== RECORD LABEL ===== */
  .cody-page .rp-record-label {
    width: 92px; height: 92px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #f4d27a 0%, #d49a3a 60%, #8a5a1a 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4), inset 0 0 8px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.5);
    color: #2a1808; padding: 6px; position: relative; z-index: 2;
  }
  .cody-page .rp-label-band {
    font-family: 'Cinzel Decorative', serif; font-weight: 900;
    font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
    line-height: 1; color: #2a1808; text-shadow: 0 1px 0 rgba(255, 230, 180, 0.4);
  }
  .cody-page .rp-label-title {
    font-family: 'Special Elite', monospace; font-size: 0.62rem; line-height: 1.05;
    margin-top: 3px; color: #1a0c04; max-width: 76px; overflow: hidden;
    text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; font-weight: bold;
  }
  .cody-page .rp-label-sub {
    font-size: 0.45rem; color: #4a2a10; margin-top: 2px; font-style: italic; letter-spacing: 0.02em;
  }
  .cody-page .rp-label-spindle {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle, #1a1208 30%, #000 100%);
    box-shadow: 0 0 0 1px rgba(255, 220, 160, 0.3);
  }

  /* ===== TONE ARM ===== */
  .cody-page .rp-tonearm {
    position: absolute; top: 30px; right: 26px;
    width: 130px; height: 160px;
    transform-origin: 100% 8px;
    transform: rotate(-22deg);
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.55, 0.95);
    z-index: 5; pointer-events: none;
  }
  .cody-page .rp-cabinet.is-playing .rp-tonearm { transform: rotate(18deg); }
  .cody-page .rp-tonearm-pivot {
    position: absolute; top: 0; right: 0; width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff4cc 5%, #d49a3a 35%, #6a4014 80%, #2a1808 100%);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.5);
  }
  .cody-page .rp-tonearm-shaft {
    position: absolute; top: 8px; right: 11px; width: 6px; height: 130px;
    background: linear-gradient(90deg, #6a5a40 0%, #d4c8a0 30%, #e8dcb4 50%, #d4c8a0 70%, #6a5a40 100%);
    border-radius: 3px; transform-origin: top center; box-shadow: 0 1px 2px rgba(0,0,0,0.6);
  }
  .cody-page .rp-tonearm-head {
    position: absolute; bottom: 0; right: 3px; width: 22px; height: 30px;
    background: linear-gradient(180deg, #3a2a18 0%, #1a1208 100%);
    border: 1px solid rgba(212, 154, 58, 0.4); border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.15), 0 2px 4px rgba(0,0,0,0.6);
  }
  .cody-page .rp-tonearm-head::after {
    content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
    width: 2px; height: 6px; background: #d4c8a0; border-radius: 1px;
  }

  /* ===== RPM BADGE ===== */
  .cody-page .rp-rpm {
    position: absolute; bottom: 14px; right: 18px;
    width: 64px; height: 64px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4cc 0%, #f4d27a 30%, #8a5a1a 90%), #6a4014;
    color: #2a1808; display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'Cinzel Decorative', serif; font-weight: 900; font-size: 1.05rem; letter-spacing: 0.02em;
    box-shadow: 0 0 0 2px #2a1808, 0 0 0 3px #d49a3a, 0 4px 10px rgba(0,0,0,0.7), inset 0 -2px 4px rgba(0,0,0,0.4);
    text-shadow: 0 1px 0 rgba(255, 230, 180, 0.5);
  }
  .cody-page .rp-rpm span {
    font-family: 'Special Elite', monospace; font-size: 0.5rem; letter-spacing: 0.15em; color: #4a2a10; margin-top: 1px;
  }

  /* ===== "NOW SPINNING" TAG ===== */
  .cody-page .rp-live {
    position: absolute; top: 18px; left: 18px;
    font-family: 'Special Elite', monospace; font-size: 0.7rem; letter-spacing: 0.18em;
    text-transform: uppercase; color: #f4d27a;
    text-shadow: 0 0 14px rgba(244, 200, 100, 0.6), 0 2px 0 #2a1808;
    display: flex; align-items: center; gap: 0.5rem; z-index: 4;
  }

  /* ===== FRONT PANEL ===== */
  .cody-page .rp-panel {
    margin-top: 1.2rem; padding: 1.1rem 1rem;
    background: linear-gradient(180deg, #2a1808 0%, #1a1004 100%);
    border: 1px solid rgba(212, 154, 58, 0.35); border-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.12), inset 0 -2px 8px rgba(0,0,0,0.6);
    display: grid; grid-template-columns: 220px 1fr; gap: 1.2rem; align-items: center;
  }
  @media (max-width: 760px) {
    .cody-page .rp-panel { grid-template-columns: 1fr; gap: 1rem; }
  }

  /* ===== VU METER ===== */
  .cody-page .rp-vu svg { width: 100%; height: auto; max-height: 120px; display: block; }
  .cody-page .rp-vu-bg { fill: #e8dcc0; stroke: #6a4014; stroke-width: 1; }
  .cody-page .rp-vu-arc-green { fill: none; stroke: #4a3010; stroke-width: 2; opacity: 0.6; }
  .cody-page .rp-vu-arc-red { fill: none; stroke: #c84a2a; stroke-width: 2.5; }
  .cody-page .rp-vu-tick { font-family: 'Special Elite', monospace; font-size: 9px; fill: #4a3010; }
  .cody-page .rp-vu-tick-red { fill: #c84a2a; }
  .cody-page .rp-vu-label {
    font-family: 'Cinzel Decorative', serif; font-size: 11px; font-weight: 900; fill: #4a3010; letter-spacing: 0.1em;
  }
  .cody-page .rp-vu-needle {
    stroke: #2a1808; stroke-width: 2; stroke-linecap: round;
    transform-origin: 100px 95px; transform: rotate(-70deg);
    transition: transform 110ms cubic-bezier(0.34, 1.4, 0.64, 1);
  }
  .cody-page .rp-vu-pivot { fill: #2a1808; }
  .cody-page .rp-vu-pivot-inner { fill: #d4b86a; }

  /* ===== CONTROLS ===== */
  .cody-page .rp-controls { display: flex; flex-direction: column; gap: 1rem; }
  .cody-page .rp-progress-row { display: flex; align-items: center; gap: 0.7rem; }
  .cody-page .rp-time {
    font-family: 'Special Elite', monospace; font-size: 0.85rem; color: #d4b86a;
    min-width: 38px; text-shadow: 0 0 6px rgba(212, 154, 58, 0.4);
  }
  .cody-page .rp-progress {
    flex: 1; height: 12px; background: rgba(0,0,0,0.5);
    border: 1px solid rgba(212, 154, 58, 0.4); border-radius: 2px;
    position: relative; cursor: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
  }
  .cody-page .rp-progress-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: linear-gradient(90deg, #d49a3a, #fff4cc);
    box-shadow: 0 0 10px rgba(244, 200, 100, 0.7); width: 0%; border-radius: 2px;
  }
  .cody-page .rp-progress-head {
    position: absolute; top: 50%; left: 0%; width: 14px; height: 14px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #f4d27a 50%, #6a4014);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 1px #2a1808, 0 0 8px rgba(244, 200, 100, 0.7), 0 2px 3px rgba(0,0,0,0.5);
  }
  .cody-page .rp-transport { display: flex; gap: 0.8rem; justify-content: center; }
  .cody-page .rp-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #4a2e16 0%, #2a1808 60%, #1a1004 100%);
    border: 2px solid rgba(212, 154, 58, 0.55); color: #f4d27a;
    display: flex; align-items: center; justify-content: center; padding: 0;
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.2), inset 0 -2px 4px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.5);
    transition: transform 0.08s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .cody-page .rp-btn svg { width: 22px; height: 22px; fill: currentColor; }
  .cody-page .rp-btn:hover {
    border-color: #f4d27a; color: #fff4cc;
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.25), inset 0 -2px 4px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.5), 0 0 16px rgba(244, 200, 100, 0.5);
  }
  .cody-page .rp-btn:active { transform: translateY(1px); }
  .cody-page .rp-btn.rp-play {
    width: 58px; height: 58px; border-color: #f4d27a; color: #fff4cc;
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.3), inset 0 -3px 6px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.6), 0 0 22px rgba(244, 200, 100, 0.55);
  }
  .cody-page .rp-cabinet.is-playing .rp-btn.rp-play { animation: rpPlayPulse 1.6s ease-in-out infinite; }
  @keyframes rpPlayPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.3), inset 0 -3px 6px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.6), 0 0 22px rgba(244, 200, 100, 0.55); }
    50% { box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.3), inset 0 -3px 6px rgba(0,0,0,0.6), 0 6px 12px rgba(0,0,0,0.6), 0 0 38px rgba(255, 220, 130, 0.85), 0 0 56px rgba(212, 154, 58, 0.4); }
  }

  /* ===== RECORD CRATE (setlist) ===== */
  .cody-page .rp-crate {
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0px, rgba(0,0,0,0.10) 1px, transparent 1px, transparent 80px),
      linear-gradient(180deg, #3a2818 0%, #1a1004 100%);
    border: 1px solid rgba(212, 154, 58, 0.4); border-radius: 6px;
    padding: 1.5rem 1.2rem; color: #f4e8c0;
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.12), inset 0 0 24px rgba(0,0,0,0.5), 0 8px 16px rgba(0,0,0,0.5);
    position: relative; transform: rotate(-0.3deg);
  }
  .cody-page .rp-crate-head {
    font-family: 'Cinzel Decorative', serif; font-size: 1rem; font-weight: 900; color: #f4d27a;
    text-shadow: 0 0 14px rgba(212, 154, 58, 0.5); letter-spacing: 0.08em; margin-bottom: 0.2rem;
  }
  .cody-page .rp-crate-sub {
    font-family: 'Special Elite', monospace; font-size: 0.75rem; color: #b8a060;
    letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.2rem;
    padding-bottom: 0.8rem; border-bottom: 1px dashed rgba(212, 154, 58, 0.3);
  }
  .cody-page .rp-track {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.6rem; background: transparent; border: none;
    border-bottom: 1px dashed rgba(212, 154, 58, 0.25); color: inherit; cursor: none;
    text-align: left; width: 100%; font-family: inherit;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .cody-page .rp-track:hover { background: rgba(212, 154, 58, 0.08); }
  .cody-page .rp-track.is-active { background: rgba(212, 154, 58, 0.15); box-shadow: inset 4px 0 0 #f4d27a; }
  .cody-page .rp-track-vinyl {
    width: 22px; height: 22px; border-radius: 50%;
    background: repeating-radial-gradient(circle at center, #0a0a0a 0px, #0a0a0a 1px, #1a1a1a 1px, #1a1a1a 2px), #0a0a0a;
    box-shadow: 0 0 0 1px #000, 0 1px 2px rgba(0,0,0,0.5); position: relative; flex-shrink: 0;
  }
  .cody-page .rp-track-vinyl::after {
    content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #d49a3a, #8a5a1a);
  }
  .cody-page .rp-track.is-active .rp-track-vinyl { animation: rpSpin 1.8s linear infinite; }
  .cody-page .rp-track-name {
    font-family: 'Special Elite', monospace; font-size: 0.95rem; color: #f4e8c0; letter-spacing: 0.02em;
  }
  .cody-page .rp-track.is-active .rp-track-name { color: #fff4cc; }
  .cody-page .rp-track-len {
    font-family: 'Special Elite', monospace; font-size: 0.75rem; color: #8a6a2a; letter-spacing: 0.05em;
  }
  .cody-page .rp-crate-scribble {
    margin-top: 1.2rem; padding-top: 0.8rem; border-top: 1px dashed rgba(212, 154, 58, 0.25);
    font-family: 'Special Elite', monospace; font-size: 0.72rem; color: #8a6a2a; font-style: italic; text-align: center;
  }
  .cody-page .rp-crate-scribble strong { color: #d4b86a; font-style: normal; }

  /* Quote cards — porch wood */
  .cody-page .quote-card {
    background: linear-gradient(165deg, rgba(40, 30, 15, 0.85), rgba(15, 12, 6, 0.95));
    border-color: rgba(212, 154, 58, 0.25);
    color: #e8d8b0;
  }
  .cody-page .quote-card::before { color: rgba(244, 210, 122, 0.35); }

  /* Hero blockquote */
  .cody-page .scorch-quote {
    background: linear-gradient(165deg, rgba(40, 30, 15, 0.65), rgba(12, 10, 6, 0.85));
    border-color: rgba(212, 154, 58, 0.4);
    color: #e8d8b0;
    text-shadow: 0 0 12px rgba(212, 154, 58, 0.3);
  }
  .cody-page .scorch-quote cite {
    background-image: linear-gradient(180deg, #fff4cc 0%, #f4d27a 60%, #6a4014 100%);
    text-shadow: 0 0 10px rgba(212, 154, 58, 0.4);
  }

  /* gallery */
  .cody-page .gallery-entry {
    border-color: rgba(212, 154, 58, 0.35);
  }
  .cody-page .gallery-entry:hover {
    border-color: #f4d27a;
    box-shadow: 0 0 30px rgba(244, 200, 100, 0.45);
  }
  .cody-page .gallery-entry-eyebrow { color: #d4b86a; }
  .cody-page .gallery-entry-count { color: #fff4cc; }
  .cody-page .gallery-entry-cta {
    color: #fff8d8;
    background: linear-gradient(180deg, #8a5a1a, #3a2410);
    border-color: #f4d27a;
  }

  /* back link */
  .cody-page .char-back-link { color: #8a6a2a; }
  .cody-page .char-back-link:hover { color: #f4d27a; }

  /* ================================================================
     SCORCH — DEATH METAL TOUR POSTER
     Stapled-to-a-pole transformation. Full overhaul scoped to
     .scorch-page so other characters stay clean. Uses fonts already
     loaded (Metal Mania, Cinzel Decorative, Special Elite, Oswald).
     ================================================================ */

  /* ----- OUTER PAGE: the wall/pole the poster is stapled to ----- */
  .scorch-page {
    background:
      /* dim wood-grain plank texture */
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.4) 0px, rgba(0,0,0,0.4) 1px,
        transparent 1px, transparent 200px),
      repeating-linear-gradient(0deg,
        rgba(255, 200, 120, 0.012) 0px, rgba(255, 200, 120, 0.012) 2px,
        transparent 2px, transparent 5px),
      radial-gradient(ellipse at 50% 20%, #2a1a0a 0%, #1a0a02 50%, #0a0402 100%);
    color: #2a1408;
  }
  /* Drop the diagonal scanlines from .character-page::after; not poster-y */
  .scorch-page::after { display: none; }

  /* ----- THE POSTER PAPER (each section becomes a stapled sheet) ----- */
  .scorch-page .char-section {
    position: relative;
    max-width: 900px;
    margin: 2.5rem auto;
    padding: 2.5rem 2.2rem 3rem;
    background:
      /* halftone dot grain */
      radial-gradient(circle, rgba(60, 30, 10, 0.07) 0.5px, transparent 0.8px) 0 0 / 4px 4px,
      /* yellowed splotches */
      radial-gradient(ellipse at 25% 18%, rgba(170, 60, 20, 0.06) 0%, transparent 35%),
      radial-gradient(ellipse at 80% 70%, rgba(60, 30, 10, 0.10) 0%, transparent 40%),
      /* aged cream paper base */
      linear-gradient(165deg, #e8d8b0 0%, #d4be88 60%, #b8a06a 100%);
    border: 1px solid rgba(80, 40, 10, 0.4);
    box-shadow:
      0 10px 22px rgba(0, 0, 0, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.5),
      inset 0 0 80px rgba(80, 30, 10, 0.10);
    transform: rotate(-0.4deg);
  }
  .scorch-page .char-section:nth-of-type(even) { transform: rotate(0.5deg); }
  .scorch-page .char-section:nth-of-type(3n)   { transform: rotate(-0.8deg); }
  /* staple marks at the top of every section */
  .scorch-page .char-section::before,
  .scorch-page .char-section::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 14px; height: 6px;
    background:
      linear-gradient(90deg,
        transparent 0%, transparent 15%,
        #888 15%, #c8c8c8 40%, #888 60%,
        transparent 60%, transparent 85%,
        #888 85%, #888 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.7);
    z-index: 3;
  }
  .scorch-page .char-section::before { left: 18%; transform: rotate(-3deg); }
  .scorch-page .char-section::after  { right: 18%; transform: rotate(2deg); }

  /* ----- HERO: top of the tour poster ----- */
  .scorch-page .char-hero {
    position: relative;
    max-width: 900px;
    margin: 1.5rem auto 0;
    min-height: 540px;
    padding: 0;
    background:
      /* halftone */
      radial-gradient(circle, rgba(40, 10, 5, 0.10) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      /* deep crimson + black ink */
      radial-gradient(ellipse at 50% 70%, #5a0808 0%, #2a0404 60%, #100202 100%);
    border: 2px solid #6a1010;
    box-shadow:
      0 0 0 4px #1a0404,
      0 0 0 5px #4a0808,
      0 18px 36px rgba(0, 0, 0, 0.85),
      inset 0 0 90px rgba(0, 0, 0, 0.6);
    transform: rotate(-0.6deg);
    overflow: hidden;
  }
  /* Charred / torn edges of the hero poster */
  .scorch-page .char-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.85) 0%, transparent 18%),
      radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.85) 0%, transparent 18%),
      radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.8) 0%, transparent 25%),
      radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.6) 0%, transparent 18%);
    z-index: 2;
  }
  /* staples on the hero too */
  .scorch-page .char-hero::after {
    content: '';
    position: absolute;
    top: 18px; left: 50%;
    transform: translateX(-50%);
    width: 80px; height: 0;
    border-top: 6px dashed rgba(200, 200, 200, 0.65);
    box-shadow: 0 1px 3px rgba(0,0,0,0.7);
    z-index: 4;
  }
  /* The hero background image becomes a halftone duotone photograph */
  .scorch-page .char-hero-bg {
    filter: contrast(1.4) saturate(0.4) sepia(0.7) hue-rotate(-15deg) brightness(0.55);
    opacity: 0.55;
    mix-blend-mode: screen;
  }
  .scorch-page .char-hero-bg::after { display: none; }

  .scorch-page .char-hero-content {
    position: relative;
    z-index: 3;
    padding: 3.5rem 2rem 2.5rem;
    text-align: center;
  }
  /* "THE SNAKE SKINS" tag becomes a black bar across the top */
  .scorch-page .char-band-tag {
    display: inline-block;
    padding: 0.6rem 2.5rem;
    background: #0a0202;
    color: #f4e8c0;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.4em;
    border: 2px solid #f4e8c0;
    box-shadow: 0 3px 0 #4a0808, 0 5px 10px rgba(0,0,0,0.6);
    transform: rotate(-1deg);
    text-shadow: none;
  }
  .scorch-page .char-band-tag::before,
  .scorch-page .char-band-tag::after { display: none; }

  /* The big SCORCH title — gothic metal logo */
  .scorch-page .char-title {
    font-family: 'Metal Mania', 'Cinzel Decorative', serif;
    font-size: clamp(5rem, 16vw, 11rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    line-height: 0.85;
    margin: 1.8rem 0 1rem;
    color: #f4e8c0;
    background: none;
    -webkit-text-fill-color: #f4e8c0;
    text-shadow:
      0 0 4px #f4e8c0,
      0 0 14px rgba(255, 110, 30, 0.6),
      4px 4px 0 #1a0202,
      8px 8px 0 #4a0808,
      0 0 50px rgba(255, 90, 20, 0.8);
    filter:
      drop-shadow(0 0 20px rgba(255, 80, 20, 0.7))
      drop-shadow(0 6px 12px rgba(0,0,0,0.8));
    transform: rotate(-1.2deg);
    /* ink-bleed feel via slight horizontal stretch */
    font-stretch: ultra-condensed;
  }

  .scorch-page .char-role {
    font-family: 'Special Elite', monospace;
    font-size: 1rem;
    letter-spacing: 0.18em;
    color: #f4e8c0;
    text-transform: uppercase;
    margin: 0.5rem 0 2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  }
  .scorch-page .char-role span { color: #ff7a2a; }

  /* CHAT button becomes a TICKET STUB */
  .scorch-page .char-hero .char-chat-btn,
  .scorch-page .char-final-cta .char-chat-btn {
    display: inline-block;
    padding: 1.3rem 2.5rem 1.3rem 4.5rem;
    background:
      radial-gradient(circle at 8% 50%, transparent 9px, #f4e8c0 10px) left center / 100% 100% no-repeat,
      linear-gradient(180deg, #f4e8c0 0%, #d4be88 100%);
    color: #1a0404;
    border: none;
    border-radius: 4px;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    box-shadow:
      0 0 0 2px #1a0404,
      0 5px 0 #4a0808,
      0 10px 18px rgba(0, 0, 0, 0.7);
    text-shadow: none;
    transform: rotate(-2deg);
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .scorch-page .char-hero .char-chat-btn::before {
    /* perforated edge */
    content: '';
    position: absolute;
    top: 8%; bottom: 8%;
    left: 30px;
    border-left: 2px dashed #1a0404;
  }
  .scorch-page .char-hero .char-chat-btn::after {
    content: 'ADMIT ONE';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: #4a0808;
    white-space: nowrap;
  }
  .scorch-page .char-hero .char-chat-btn:hover,
  .scorch-page .char-final-cta .char-chat-btn:hover {
    transform: rotate(-1deg) translateY(-3px);
    box-shadow:
      0 0 0 2px #1a0404,
      0 7px 0 #4a0808,
      0 14px 24px rgba(0, 0, 0, 0.8),
      0 0 28px rgba(255, 80, 20, 0.55);
  }

  /* SOLD OUT diagonal stamp on the hero */
  .scorch-page .char-hero-content::after {
    content: 'SOLD OUT';
    position: absolute;
    top: 18%;
    right: -10%;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    letter-spacing: 0.1em;
    color: rgba(255, 60, 40, 0.85);
    border: 6px solid rgba(255, 60, 40, 0.85);
    padding: 0.6rem 1.5rem;
    transform: rotate(18deg);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
    box-shadow: inset 0 0 0 3px rgba(255, 60, 40, 0.85);
    background: transparent;
    pointer-events: none;
    z-index: 5;
    opacity: 0.85;
  }
  /* BITE BACK TOUR ribbon under the title */
  .scorch-page .char-hero-content::before {
    content: '★ BITE BACK TOUR · 2025 · ONE NIGHT ONLY ★';
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    background: #ff5a20;
    color: #1a0404;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.25em;
    padding: 0.5rem 2rem;
    border: 2px solid #1a0404;
    box-shadow: 0 4px 0 #1a0404;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
  }

  /* ----- SECTION HEADERS: poster banners ----- */
  .scorch-page .char-h2 {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #1a0404;
    color: #f4e8c0;
    padding: 0.6rem 1.5rem;
    margin: 0 0 2rem;
    border: 3px solid #4a0808;
    box-shadow: 6px 6px 0 #4a0808, 0 6px 12px rgba(0,0,0,0.4);
    transform: rotate(-1deg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  }
  .scorch-page .char-h2::before { content: '★ '; color: #ff7a2a; }
  .scorch-page .char-h2::after  { content: ' ★'; color: #ff7a2a; }

  /* ----- ABOUT section: newsprint feature ----- */
  .scorch-page .char-about p {
    font-family: 'Special Elite', 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2a1408;
    margin-bottom: 1.2rem;
    text-shadow: none;
  }
  .scorch-page .char-about p strong { color: #8a1010; }
  .scorch-page .char-about p em { color: #6a3010; font-style: italic; }
  /* Drop-cap on the first paragraph */
  .scorch-page .char-about p:first-of-type::first-letter {
    font-family: 'Metal Mania', serif;
    float: left;
    font-size: 5.5rem;
    line-height: 0.85;
    margin: 0.2rem 0.6rem 0 0;
    color: #8a1010;
    text-shadow: 3px 3px 0 #1a0404;
  }
  /* Tags become punk show pin badges / patches */
  .scorch-page .char-tag {
    background: #1a0404;
    color: #f4e8c0;
    border: 2px dashed #ff5a20;
    border-radius: 0;
    font-family: 'Special Elite', monospace;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.9rem;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 #4a0808;
    transform: rotate(-1deg);
  }
  .scorch-page .char-tags > .char-tag:nth-child(even) { transform: rotate(1.5deg); }
  .scorch-page .char-tags > .char-tag:nth-child(3n) { transform: rotate(-2deg); }

  /* ----- QUOTES: torn newsprint clippings ----- */
  .scorch-page .quote-card {
    background:
      radial-gradient(circle, rgba(40, 10, 5, 0.10) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      linear-gradient(180deg, #f4e8c0 0%, #d4be88 100%);
    border: 1px solid rgba(80, 40, 10, 0.5);
    color: #1a0404;
    font-family: 'Special Elite', serif;
    font-style: italic;
    font-size: 1.1rem;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.4);
    padding: 1.6rem 1.4rem;
    position: relative;
    transform: rotate(-1.5deg);
  }
  .scorch-page .quote-grid > .quote-card:nth-child(2) { transform: rotate(1.2deg); }
  .scorch-page .quote-grid > .quote-card:nth-child(3) { transform: rotate(-0.7deg); }
  /* Big newspaper quote mark */
  .scorch-page .quote-card::before {
    content: '“';
    position: absolute;
    top: -1.2rem;
    left: 0.6rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 5rem;
    font-weight: 900;
    color: #8a1010;
    line-height: 1;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.2);
  }
  /* tape strip at top */
  .scorch-page .quote-card::after {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 60px; height: 18px;
    background: rgba(244, 232, 192, 0.55);
    border: 1px solid rgba(120, 80, 30, 0.25);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  }

  /* ----- THE BAND: tour billing card ----- */
  .scorch-page .band-poster-wrap {
    border: 2px solid #1a0404;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6), 0 0 0 4px #f4e8c0;
    filter: contrast(1.15) saturate(0.7);
    transform: rotate(-1deg);
    max-width: 580px;
    margin: 0 auto 2.5rem;
  }
  .scorch-page .member-grid {
    background: #1a0404;
    border: 3px solid #4a0808;
    padding: 1.8rem 1.5rem;
    box-shadow: 6px 6px 0 #4a0808, 0 8px 18px rgba(0, 0, 0, 0.5);
    transform: rotate(0.4deg);
    position: relative;
  }
  /* "FEATURING" banner above the lineup */
  .scorch-page .member-grid::before {
    content: '★ FEATURING ★';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    background: #ff5a20;
    color: #1a0404;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    padding: 0.4rem 1.6rem;
    border: 2px solid #1a0404;
    box-shadow: 0 3px 0 #1a0404;
  }
  .scorch-page .member-card {
    background: transparent;
    border: none;
    border-bottom: 2px dashed rgba(255, 122, 42, 0.4);
    border-radius: 0;
    padding: 1rem 0;
    box-shadow: none;
  }
  .scorch-page .member-card:last-child { border-bottom: none; }
  .scorch-page .member-name {
    color: #f4e8c0;
    font-family: 'Metal Mania', serif;
    font-size: 1.8rem;
    text-shadow: 2px 2px 0 #4a0808;
  }
  .scorch-page .member-role {
    color: #ff7a2a;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    text-transform: uppercase;
  }
  .scorch-page .member-desc {
    color: #d4be88;
    font-family: 'Special Elite', serif;
    font-size: 0.95rem;
    margin-top: 0.4rem;
  }

  /* ============================================================
     MUSIC PLAYER — paper setlist taped to the poster
     ============================================================ */
  .scorch-page .setlist-stage {
    background:
      radial-gradient(circle, rgba(40, 10, 5, 0.08) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      linear-gradient(165deg, #f4e8c0 0%, #d4be88 60%, #b8a06a 100%);
    border: 1px solid rgba(80, 40, 10, 0.5);
    box-shadow: 0 12px 22px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
    transform: rotate(-1deg);
    padding: 2rem;
  }
  .scorch-page .setlist-stage::before,
  .scorch-page .setlist-stage::after {
    background: none;
    box-shadow: none;
  }
  /* tape strips at corners of the setlist paper */
  .scorch-page .setlist-stage::before {
    content: '';
    position: absolute;
    top: -10px; left: 12%;
    width: 70px; height: 22px;
    background: rgba(244, 232, 192, 0.55);
    border: 1px solid rgba(120, 80, 30, 0.25);
    transform: rotate(-4deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }
  .scorch-page .setlist-stage::after {
    content: '';
    position: absolute;
    top: -10px; right: 12%;
    width: 70px; height: 22px;
    background: rgba(244, 232, 192, 0.55);
    border: 1px solid rgba(120, 80, 30, 0.25);
    transform: rotate(3deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }

  /* Now-playing display becomes a "TONIGHT'S SHOW" notice */
  .scorch-page .np-display {
    background: transparent;
    border: 2px dashed #8a1010;
    border-radius: 0;
    padding: 1.2rem;
  }
  .scorch-page .np-display::after { display: none; }
  .scorch-page .np-eyebrow {
    color: #8a1010;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    text-shadow: none;
    letter-spacing: 0.3em;
  }
  .scorch-page .np-eyebrow .live-dot { background: #ff3a10; box-shadow: 0 0 8px #ff3a10; }
  .scorch-page .np-title {
    color: #1a0404;
    font-family: 'Metal Mania', serif;
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    line-height: 1;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  }
  .scorch-page .np-sub {
    color: #6a3010;
    font-family: 'Special Elite', monospace;
    text-shadow: none;
  }
  /* visualizer bars become a "signal level" graphic on the poster */
  .scorch-page .np-viz-bar {
    background: linear-gradient(180deg, #1a0404 0%, #4a0808 40%, #8a1010 70%, #ff5a20 100%);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.2);
    border-radius: 0;
  }
  /* progress bar = a strip of masking tape with red marker progress */
  .scorch-page .np-progress {
    background: rgba(244, 232, 192, 0.5);
    border: 1px solid rgba(80, 40, 10, 0.4);
    border-radius: 0;
    height: 14px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
  }
  .scorch-page .np-progress-fill {
    background: repeating-linear-gradient(45deg,
      #c8281a 0px, #c8281a 6px,
      #8a1010 6px, #8a1010 12px);
    box-shadow: none;
    border-radius: 0;
  }
  .scorch-page .np-progress-head {
    background: radial-gradient(circle at 30% 30%, #ff5a20, #8a1010 80%);
    box-shadow: 0 0 0 2px #1a0404, 0 2px 4px rgba(0,0,0,0.5);
  }
  .scorch-page .np-times {
    color: #6a3010;
    font-family: 'Special Elite', monospace;
  }
  /* Transport buttons — stamped paper feel */
  .scorch-page .np-btn {
    background: #f4e8c0;
    border: 2px solid #1a0404;
    color: #1a0404;
    border-radius: 50%;
    box-shadow: 3px 3px 0 #4a0808;
    transition: transform 0.1s, box-shadow 0.15s;
  }
  .scorch-page .np-btn:hover {
    background: #ff5a20;
    color: #f4e8c0;
    border-color: #1a0404;
    box-shadow: 4px 4px 0 #1a0404;
  }
  .scorch-page .np-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #4a0808;
  }
  .scorch-page .np-btn.np-play {
    background: #ff5a20;
    color: #f4e8c0;
    border-color: #1a0404;
    box-shadow: 4px 4px 0 #1a0404;
  }
  .scorch-page .np-btn.np-play:hover {
    background: #ff7a2a;
    box-shadow: 5px 5px 0 #1a0404;
  }

  /* The setlist paper on the right */
  .scorch-page .np-setlist {
    background:
      /* notebook ruled lines */
      repeating-linear-gradient(180deg,
        transparent 0px, transparent 31px,
        rgba(80, 40, 10, 0.25) 31px, rgba(80, 40, 10, 0.25) 32px),
      /* red margin line */
      linear-gradient(90deg,
        transparent 0%, transparent 12%,
        rgba(170, 30, 20, 0.4) 12%, rgba(170, 30, 20, 0.4) 12.4%,
        transparent 12.4%, transparent 100%),
      /* paper */
      linear-gradient(180deg, #fef4d0 0%, #e8d8a8 100%);
    color: #1a0404;
    box-shadow:
      inset 0 0 0 1px rgba(80, 40, 10, 0.3),
      0 6px 14px rgba(0, 0, 0, 0.5);
    transform: rotate(-1.5deg);
    border: none;
    padding: 1.4rem 1rem 1.4rem 3rem;
    font-family: 'Special Elite', 'Cinzel Decorative', serif;
  }
  .scorch-page .np-setlist::before,
  .scorch-page .np-setlist::after { background: none; box-shadow: none; }
  .scorch-page .np-setlist-head {
    color: #8a1010;
    font-family: 'Metal Mania', serif;
    font-size: 1.6rem;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
    margin-bottom: 0.3rem;
    text-decoration: underline;
    text-decoration-color: #8a1010;
    text-decoration-thickness: 2px;
  }
  .scorch-page .np-setlist-sub {
    color: #6a3010;
    font-family: 'Special Elite', monospace;
    border-bottom: 1px solid rgba(80, 40, 10, 0.3);
    padding-bottom: 0.6rem;
  }
  .scorch-page .np-track {
    border-bottom: 1px dashed rgba(80, 40, 10, 0.25);
    color: #1a0404;
    font-family: 'Special Elite', monospace;
    padding: 0.7rem 0.4rem;
  }
  .scorch-page .np-track:hover {
    background: rgba(255, 122, 42, 0.12);
  }
  .scorch-page .np-track.active {
    background: rgba(170, 30, 20, 0.12);
    box-shadow: inset 4px 0 0 #8a1010;
  }
  .scorch-page .np-track-num {
    color: #8a1010;
    font-weight: bold;
    font-family: 'Metal Mania', serif;
    font-size: 1.2rem;
  }
  .scorch-page .np-track-name { color: #1a0404; }
  .scorch-page .np-track.active .np-track-name {
    color: #8a1010;
    text-decoration: line-through;
    text-decoration-color: rgba(138, 16, 16, 0.4);
  }
  .scorch-page .np-track-len {
    color: #6a3010;
    font-family: 'Special Elite', monospace;
  }
  /* The "signed by" scribble */
  .scorch-page .np-scribble {
    color: #1a0404;
    font-family: 'Metal Mania', cursive;
    font-style: normal;
    font-size: 1rem;
  }
  .scorch-page .np-scribble strong {
    color: #8a1010;
    font-family: 'Metal Mania', cursive;
  }

  /* ----- SPOILER: classified dossier ----- */
  .scorch-page .spoiler-details {
    background:
      radial-gradient(circle, rgba(40, 10, 5, 0.10) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      linear-gradient(180deg, #d4be88 0%, #b8a06a 100%);
    border: 2px solid #4a0808;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.6);
    transform: rotate(0.3deg);
  }
  .scorch-page .spoiler-details summary {
    background:
      repeating-linear-gradient(45deg,
        #ff5a20 0px, #ff5a20 22px,
        #1a0404 22px, #1a0404 44px);
    padding: 1.2rem;
    border-bottom: 3px solid #1a0404;
  }
  .scorch-page .spoiler-warn {
    color: #f4e8c0;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-shadow: 2px 2px 0 #1a0404;
  }
  .scorch-page .spoiler-cta {
    color: #f4e8c0;
    font-family: 'Special Elite', monospace;
    text-shadow: 1px 1px 0 #1a0404;
  }
  .scorch-page .spoiler-content {
    color: #1a0404;
    font-family: 'Special Elite', serif;
    line-height: 1.7;
    padding: 2rem;
  }
  .scorch-page .spoiler-content p { color: #1a0404; }
  .scorch-page .spoiler-content strong { color: #8a1010; }
  .scorch-page .spoiler-content em { color: #6a3010; }

  /* ----- BIG QUOTE — newspaper pull-quote ----- */
  .scorch-page .scorch-quote {
    background:
      radial-gradient(circle, rgba(40, 10, 5, 0.10) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      linear-gradient(180deg, #f4e8c0 0%, #d4be88 100%);
    border-top: 4px solid #8a1010;
    border-bottom: 4px solid #8a1010;
    border-left: none;
    border-right: none;
    color: #1a0404;
    font-family: 'Cinzel Decorative', serif;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    text-shadow: none;
    transform: rotate(-0.6deg);
    padding: 2rem;
    position: relative;
  }
  .scorch-page .scorch-quote::before {
    content: '“';
    position: absolute;
    top: -2rem;
    left: 1rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 8rem;
    font-weight: 900;
    color: #8a1010;
    line-height: 1;
    opacity: 0.3;
  }
  .scorch-page .scorch-quote cite {
    background: none;
    -webkit-text-fill-color: #8a1010;
    color: #8a1010;
    font-family: 'Metal Mania', serif;
    font-style: normal;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
  }

  /* ----- GALLERY — polaroid taped to the poster ----- */
  .scorch-page .gallery-entry {
    background: #f4e8c0;
    border: none;
    padding: 0.8rem 0.8rem 3rem;
    transform: rotate(-2deg);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
    position: relative;
    max-width: 360px;
    margin: 0 auto;
  }
  .scorch-page .gallery-entry::before {
    /* tape strip at top */
    content: '';
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 80px; height: 22px;
    background: rgba(244, 232, 192, 0.5);
    border: 1px solid rgba(120, 80, 30, 0.25);
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
    z-index: 3;
  }
  .scorch-page .gallery-entry:hover {
    transform: rotate(-1deg) translateY(-4px);
    box-shadow: 0 18px 32px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.5);
  }
  .scorch-page .gallery-entry-cover {
    filter: contrast(1.1) saturate(0.85);
  }
  .scorch-page .gallery-entry-overlay {
    background: transparent;
    color: #1a0404;
    bottom: 0;
    padding: 0.6rem 0.8rem;
  }
  .scorch-page .gallery-entry-eyebrow {
    color: #8a1010;
    font-family: 'Special Elite', monospace;
  }
  .scorch-page .gallery-entry-count {
    color: #1a0404;
    font-family: 'Metal Mania', serif;
    font-size: 1.3rem;
  }
  .scorch-page .gallery-entry-cta {
    background: #1a0404;
    color: #f4e8c0;
    border: 1px solid #8a1010;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    letter-spacing: 0.2em;
    border-radius: 0;
    box-shadow: 2px 2px 0 #8a1010;
  }
  .scorch-page .gallery-sub {
    color: #d4be88;
    font-family: 'Special Elite', monospace;
  }

  /* ----- FINAL CTA — oversized ticket stub ----- */
  .scorch-page .char-final-cta {
    max-width: 900px;
    margin: 3rem auto 4rem;
    padding: 2.5rem 2rem;
    background: transparent;
    border: none;
  }
  .scorch-page .char-final-cta .char-chat-btn {
    font-size: 1.35rem;
    padding: 1.6rem 3rem 1.6rem 5.5rem;
    transform: rotate(-1.5deg);
  }
  .scorch-page .char-back-link {
    color: #d4be88;
    font-family: 'Special Elite', monospace;
    letter-spacing: 0.15em;
  }
  .scorch-page .char-back-link:hover { color: #ff7a2a; }

  /* close button on the poster */
  .scorch-page .char-close {
    background: #1a0404;
    color: #ff5a20;
    border: 2px solid #ff5a20;
    border-radius: 0;
    box-shadow: 0 4px 0 #8a1010;
  }
  .scorch-page .char-close:hover {
    background: #ff5a20;
    color: #1a0404;
    box-shadow: 0 4px 0 #1a0404;
  }

  /* Mobile tweaks for the poster */
  @media (max-width: 760px) {
    .scorch-page .char-section { padding: 2rem 1.2rem 2.4rem; margin: 1.6rem 0.6rem; }
    .scorch-page .char-section::before,
    .scorch-page .char-section::after { display: none; }
    .scorch-page .char-hero-content::after { font-size: 2rem; right: -5%; padding: 0.4rem 1rem; }
    .scorch-page .char-hero-content::before { font-size: 0.7rem; padding: 0.4rem 1rem; }
    .scorch-page .np-setlist { padding: 1.2rem 0.8rem 1.2rem 2rem; }
  }


  /* ================================================================
     SHANE — LEATHER BIKER ZINE / BLACK-AND-WHITE PHOTOCOPY FANZINE
     Cold, low-key, photocopied, stenciled. Keeps his chrome palette
     but transforms the page into a stapled-together punk fanzine.
     ================================================================ */
  .shane-page {
    background:
      /* asphalt grain */
      radial-gradient(circle, rgba(255,255,255,0.015) 0.4px, transparent 0.8px) 0 0 / 3px 3px,
      /* tar mottling */
      radial-gradient(ellipse at 20% 30%, rgba(255,255,255,0.02) 0%, transparent 40%),
      radial-gradient(ellipse at 80% 70%, rgba(60,80,100,0.04) 0%, transparent 35%),
      linear-gradient(180deg, #0a0d12 0%, #050709 100%);
    color: #1a1a1a;
  }
  .shane-page::after { display: none; }

  /* sections = sheets of off-white photocopied zine paper */
  .shane-page .char-section {
    position: relative;
    max-width: 900px;
    margin: 2.5rem auto;
    padding: 2.5rem 2.2rem 3rem;
    background:
      radial-gradient(circle, rgba(0,0,0,0.06) 0.5px, transparent 0.7px) 0 0 / 3.5px 3.5px,
      radial-gradient(ellipse at 80% 10%, rgba(0,0,0,0.05) 0%, transparent 30%),
      linear-gradient(165deg, #e8e4d8 0%, #d4d0c0 60%, #b8b4a4 100%);
    border: 1px solid #1a1a1a;
    box-shadow:
      0 10px 22px rgba(0,0,0,0.7),
      0 2px 4px rgba(0,0,0,0.6),
      inset 0 0 80px rgba(0,0,0,0.08);
    transform: rotate(-0.3deg);
    transition: transform 0.3s ease;
  }
  .shane-page .char-section:nth-of-type(even) { transform: rotate(0.4deg); }
  .shane-page .char-section:nth-of-type(3n) { transform: rotate(-0.6deg); }
  .shane-page .char-section:hover { transform: rotate(0deg); }
  /* electrical tape strips at top (not staples — biker vibe) */
  .shane-page .char-section::before,
  .shane-page .char-section::after {
    content: '';
    position: absolute;
    top: -8px;
    width: 56px; height: 20px;
    background: #0a0a0a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    z-index: 3;
  }
  .shane-page .char-section::before { left: 15%; transform: rotate(-4deg); }
  .shane-page .char-section::after  { right: 15%; transform: rotate(3deg); }

  /* HERO = top of the zine — moody asphalt + chrome */
  .shane-page .char-hero {
    position: relative;
    max-width: 900px;
    margin: 1.5rem auto 0;
    min-height: 540px;
    padding: 0;
    background:
      radial-gradient(circle, rgba(255,255,255,0.04) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      radial-gradient(ellipse at 50% 50%, #1a2030 0%, #0a0e16 70%, #050709 100%);
    border: 2px solid #2a3548;
    box-shadow:
      0 0 0 4px #0a0e16,
      0 0 0 5px #4a5a78,
      0 18px 36px rgba(0,0,0,0.9),
      inset 0 0 90px rgba(0,0,0,0.5);
    transform: rotate(-0.5deg);
    overflow: hidden;
  }
  .shane-page .char-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.85) 0%, transparent 20%),
      radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.85) 0%, transparent 20%),
      radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.5) 0%, transparent 20%);
    z-index: 2;
  }
  /* black electrical tape across the top of the hero */
  .shane-page .char-hero::after {
    content: '';
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 120px; height: 18px;
    background: #0a0a0a;
    box-shadow: 0 3px 6px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
    z-index: 4;
  }
  /* hero bg image goes hard B&W with halftone */
  .shane-page .char-hero-bg {
    filter: grayscale(1) contrast(1.6) brightness(0.6);
    opacity: 0.6;
    mix-blend-mode: lighten;
  }
  .shane-page .char-hero-bg::after { display: none; }

  .shane-page .char-hero-content {
    position: relative;
    z-index: 3;
    padding: 3.5rem 2rem 2.5rem;
    text-align: center;
  }
  /* "THE SNAKE SKINS" white-on-black industrial tag */
  .shane-page .char-band-tag {
    display: inline-block;
    padding: 0.6rem 2.5rem;
    background: #0a0a0a;
    color: #e8e4d8;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.4em;
    border: 2px solid #88b8d4;
    box-shadow: 0 3px 0 #2a3548, 0 5px 10px rgba(0,0,0,0.6);
    transform: rotate(-0.8deg);
    text-shadow: none;
  }
  .shane-page .char-band-tag::before,
  .shane-page .char-band-tag::after { display: none; }

  /* "SHANE" title — military stencil look, brushed chrome */
  .shane-page .char-title {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: clamp(5rem, 16vw, 11rem);
    letter-spacing: 0.12em;
    line-height: 0.9;
    margin: 1.8rem 0 1rem;
    text-transform: uppercase;
    color: transparent;
    background-image:
      linear-gradient(180deg,
        #ffffff 0%,
        #d4dce4 25%,
        #88b8d4 55%,
        #4a5a78 85%,
        #1a2030 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter:
      drop-shadow(2px 2px 0 #0a0e16)
      drop-shadow(4px 4px 0 #2a3548)
      drop-shadow(0 0 30px rgba(136, 184, 212, 0.5))
      drop-shadow(0 6px 12px rgba(0,0,0,0.8));
    transform: rotate(-0.8deg);
  }

  .shane-page .char-role {
    font-family: 'Special Elite', monospace;
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: #e8e4d8;
    text-transform: uppercase;
    margin: 0.5rem 0 2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  }
  .shane-page .char-role span { color: #88b8d4; }

  /* Shane's chat button = brushed chrome VIP laminated card */
  .shane-page .char-hero .char-chat-btn,
  .shane-page .char-final-cta .char-chat-btn {
    display: inline-block;
    padding: 1.3rem 2.5rem 1.3rem 3rem;
    background:
      linear-gradient(180deg, #d4dce4 0%, #88b8d4 50%, #5a7898 100%);
    color: #0a0e16;
    border: 2px solid #0a0e16;
    border-radius: 0;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    box-shadow:
      0 0 0 2px #d4dce4,
      0 5px 0 #2a3548,
      0 10px 18px rgba(0,0,0,0.7);
    text-shadow: none;
    transform: rotate(-1.5deg);
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .shane-page .char-hero .char-chat-btn::before {
    /* lanyard hole at top */
    content: '';
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    width: 28px; height: 6px;
    background: #0a0e16;
    border-radius: 0 0 4px 4px;
  }
  .shane-page .char-hero .char-chat-btn::after {
    content: 'VIP';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: #2a3548;
    font-weight: 900;
  }
  .shane-page .char-hero .char-chat-btn:hover,
  .shane-page .char-final-cta .char-chat-btn:hover {
    transform: rotate(-0.5deg) translateY(-3px);
    box-shadow:
      0 0 0 2px #ffffff,
      0 8px 0 #2a3548,
      0 14px 24px rgba(0,0,0,0.8),
      0 0 28px rgba(136, 184, 212, 0.55);
  }

  /* "MEMBERS ONLY" diagonal stamp */
  .shane-page .char-hero-content::after {
    content: 'MEMBERS ONLY';
    position: absolute;
    top: 18%;
    right: -8%;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 3.8vw, 2.5rem);
    letter-spacing: 0.15em;
    color: rgba(136, 184, 212, 0.95);
    border: 5px solid rgba(136, 184, 212, 0.95);
    padding: 0.5rem 1.2rem;
    transform: rotate(15deg);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
    box-shadow: inset 0 0 0 2px rgba(136, 184, 212, 0.95);
    background: transparent;
    pointer-events: none;
    z-index: 5;
    opacity: 0.9;
  }
  /* TONIGHT banner under title */
  .shane-page .char-hero-content::before {
    content: '◆  TONIGHT ONLY · BLACKOUT TOUR · 1% MC PRESENTS  ◆';
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    background: #e8e4d8;
    color: #0a0e16;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    padding: 0.5rem 1.6rem;
    border: 2px solid #0a0e16;
    box-shadow: 0 4px 0 #2a3548;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
  }

  /* section headers — black industrial bar */
  .shane-page .char-h2 {
    display: inline-block;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: #0a0a0a;
    color: #d4dce4;
    padding: 0.6rem 1.5rem;
    margin: 0 0 2rem;
    border: 3px solid #88b8d4;
    box-shadow: 6px 6px 0 #2a3548, 0 6px 12px rgba(0,0,0,0.4);
    transform: rotate(-0.8deg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  }
  .shane-page .char-h2::before { content: '◆ '; color: #88b8d4; }
  .shane-page .char-h2::after  { content: ' ◆'; color: #88b8d4; }

  /* about body — fanzine typewriter */
  .shane-page .char-about p {
    font-family: 'Special Elite', 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #1a1a1a;
    margin-bottom: 1.2rem;
    text-shadow: none;
  }
  .shane-page .char-about p strong { color: #0a0e16; }
  .shane-page .char-about p em { color: #4a5a78; font-style: italic; }
  .shane-page .char-about p:first-of-type::first-letter {
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    float: left;
    font-size: 5rem;
    line-height: 0.85;
    margin: 0.2rem 0.6rem 0 0;
    color: #0a0e16;
    text-shadow: 3px 3px 0 #88b8d4;
  }
  /* tags = black canvas patches */
  .shane-page .char-tag {
    background: #0a0a0a;
    color: #d4dce4;
    border: 2px dashed #88b8d4;
    border-radius: 0;
    font-family: 'Special Elite', monospace;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.9rem;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 #2a3548;
    transform: rotate(-1deg);
    transition: transform 0.2s ease;
  }
  .shane-page .char-tags > .char-tag:nth-child(even) { transform: rotate(1.5deg); }
  .shane-page .char-tags > .char-tag:nth-child(3n) { transform: rotate(-2deg); }
  .shane-page .char-tag:hover { transform: rotate(0deg) translateY(-2px); }

  /* quotes = B&W polaroids with handwritten captions */
  .shane-page .quote-card {
    background: #f4f0e4;
    border: 1px solid #1a1a1a;
    color: #0a0e16;
    font-family: 'Special Elite', monospace;
    font-style: normal;
    font-size: 1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
    padding: 1.6rem 1.4rem 2rem;
    position: relative;
    transform: rotate(-1.5deg);
    transition: transform 0.25s ease;
  }
  .shane-page .quote-grid > .quote-card:nth-child(2) { transform: rotate(1.2deg); }
  .shane-page .quote-grid > .quote-card:nth-child(3) { transform: rotate(-0.7deg); }
  .shane-page .quote-card:hover { transform: rotate(0deg) scale(1.03); }
  /* "—" mark and sharpie quote feel */
  .shane-page .quote-card::before {
    content: '—';
    position: absolute;
    top: 0.5rem;
    left: 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    color: #4a5a78;
  }
  /* electrical tape at top */
  .shane-page .quote-card::after {
    content: '';
    position: absolute;
    top: -8px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 50px; height: 16px;
    background: #0a0a0a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }

  /* THE BAND — black tour lineup card */
  .shane-page .band-poster-wrap {
    border: 2px solid #0a0e16;
    box-shadow: 0 8px 18px rgba(0,0,0,0.7), 0 0 0 4px #d4dce4;
    filter: grayscale(0.85) contrast(1.2);
    transform: rotate(-0.8deg);
    max-width: 580px;
    margin: 0 auto 2.5rem;
  }
  .shane-page .member-grid {
    background: #0a0a0a;
    border: 3px solid #88b8d4;
    padding: 1.8rem 1.5rem;
    box-shadow: 6px 6px 0 #2a3548, 0 8px 18px rgba(0,0,0,0.6);
    transform: rotate(0.3deg);
    position: relative;
  }
  .shane-page .member-grid::before {
    content: '◆ FEATURING ◆';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(-0.8deg);
    background: #d4dce4;
    color: #0a0e16;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    padding: 0.4rem 1.6rem;
    border: 2px solid #0a0e16;
    box-shadow: 0 3px 0 #0a0e16;
  }
  .shane-page .member-card {
    background: transparent;
    border: none;
    border-bottom: 2px dashed rgba(136, 184, 212, 0.4);
    border-left: none;
    border-radius: 0;
    padding: 1rem 0;
    box-shadow: none;
    transition: padding-left 0.2s ease;
  }
  .shane-page .member-card:hover { padding-left: 0.8rem; }
  .shane-page .member-card:last-child { border-bottom: none; }
  .shane-page .member-name {
    color: #d4dce4;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-size: 1.6rem;
    text-shadow: 2px 2px 0 #2a3548;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .shane-page .member-role {
    color: #88b8d4;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    text-transform: uppercase;
  }
  .shane-page .member-desc {
    color: #b8b4a4;
    font-family: 'Special Elite', serif;
    font-size: 0.95rem;
    margin-top: 0.4rem;
  }

  /* SHANE'S MUSIC PLAYER — folded zine setlist + chrome accents */
  .shane-page .setlist-stage {
    background:
      radial-gradient(circle, rgba(0,0,0,0.06) 0.5px, transparent 0.7px) 0 0 / 3.5px 3.5px,
      linear-gradient(165deg, #e8e4d8 0%, #c8c4b4 60%, #a8a494 100%);
    border: 1px solid #0a0e16;
    box-shadow: 0 12px 22px rgba(0,0,0,0.65), 0 2px 4px rgba(0,0,0,0.5);
    transform: rotate(-0.8deg);
    padding: 2rem;
  }
  .shane-page .setlist-stage::before {
    content: '';
    position: absolute;
    top: -8px; left: 14%;
    width: 60px; height: 18px;
    background: #0a0a0a;
    transform: rotate(-4deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .shane-page .setlist-stage::after {
    content: '';
    position: absolute;
    top: -8px; right: 14%;
    width: 60px; height: 18px;
    background: #0a0a0a;
    transform: rotate(3deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .shane-page .np-display {
    background: transparent;
    border: 2px solid #0a0e16;
    border-radius: 0;
    padding: 1.2rem;
  }
  .shane-page .np-display::after { display: none; }
  .shane-page .np-eyebrow {
    color: #0a0e16;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    text-shadow: none;
    letter-spacing: 0.3em;
  }
  .shane-page .np-eyebrow .live-dot { background: #4a5a78; box-shadow: 0 0 6px #4a5a78; }
  .shane-page .np-title {
    color: #0a0e16;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(1.4rem, 3.5vw, 2.1rem);
    letter-spacing: 0.1em;
    text-shadow: 2px 2px 0 #88b8d4;
  }
  .shane-page .np-sub {
    color: #4a5a78;
    font-family: 'Special Elite', monospace;
    text-shadow: none;
  }
  .shane-page .np-viz-bar {
    background: linear-gradient(180deg, #d4dce4 0%, #88b8d4 40%, #4a5a78 80%, #0a0e16 100%);
    box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    border-radius: 0;
  }
  .shane-page .np-progress {
    background: rgba(244, 240, 228, 0.5);
    border: 1px solid #0a0e16;
    border-radius: 0;
    height: 14px;
  }
  .shane-page .np-progress-fill {
    background: linear-gradient(90deg, #4a5a78, #88b8d4);
    box-shadow: none;
    border-radius: 0;
  }
  .shane-page .np-progress-head {
    background: radial-gradient(circle at 30% 30%, #ffffff, #88b8d4 60%, #4a5a78);
    box-shadow: 0 0 0 2px #0a0e16, 0 2px 4px rgba(0,0,0,0.5);
  }
  .shane-page .np-times {
    color: #4a5a78;
    font-family: 'Special Elite', monospace;
  }
  /* Transport buttons — brushed steel stamps */
  .shane-page .np-btn {
    background: linear-gradient(180deg, #d4dce4, #88b8d4 60%, #5a7898);
    border: 2px solid #0a0e16;
    color: #0a0e16;
    border-radius: 50%;
    box-shadow: 3px 3px 0 #2a3548;
  }
  .shane-page .np-btn:hover {
    background: #0a0a0a;
    color: #88b8d4;
    box-shadow: 4px 4px 0 #88b8d4;
  }
  .shane-page .np-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #2a3548;
  }
  .shane-page .np-btn.np-play {
    background: linear-gradient(180deg, #88b8d4, #4a5a78);
    color: #ffffff;
    border-color: #0a0e16;
    box-shadow: 4px 4px 0 #0a0e16;
  }
  .shane-page .np-btn.np-play:hover {
    background: #0a0a0a;
    color: #88b8d4;
    box-shadow: 5px 5px 0 #88b8d4;
  }

  /* setlist on right = folded zine paper, lined */
  .shane-page .np-setlist {
    background:
      repeating-linear-gradient(180deg,
        transparent 0px, transparent 31px,
        rgba(0,0,0,0.18) 31px, rgba(0,0,0,0.18) 32px),
      linear-gradient(180deg, #f4f0e4 0%, #d8d4c4 100%);
    color: #0a0e16;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.3), 0 6px 14px rgba(0,0,0,0.55);
    transform: rotate(-1.2deg);
    border: none;
    padding: 1.4rem 1rem;
    font-family: 'Special Elite', serif;
  }
  .shane-page .np-setlist::before,
  .shane-page .np-setlist::after { background: none; box-shadow: none; }
  .shane-page .np-setlist-head {
    color: #0a0e16;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: 1.4rem;
    letter-spacing: 0.15em;
    margin-bottom: 0.3rem;
    text-decoration: underline;
    text-decoration-color: #4a5a78;
    text-decoration-thickness: 2px;
  }
  .shane-page .np-setlist-sub {
    color: #4a5a78;
    font-family: 'Special Elite', monospace;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    padding-bottom: 0.6rem;
  }
  .shane-page .np-track {
    border-bottom: 1px dashed rgba(0,0,0,0.2);
    color: #0a0e16;
    font-family: 'Special Elite', monospace;
    padding: 0.7rem 0.4rem;
    transition: padding-left 0.15s ease;
  }
  .shane-page .np-track:hover {
    background: rgba(136, 184, 212, 0.12);
    padding-left: 0.8rem;
  }
  .shane-page .np-track.active {
    background: rgba(74, 90, 120, 0.15);
    box-shadow: inset 4px 0 0 #4a5a78;
  }
  .shane-page .np-track-num {
    color: #4a5a78;
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
  }
  .shane-page .np-track-name { color: #0a0e16; }
  .shane-page .np-track.active .np-track-name {
    color: #4a5a78;
    text-decoration: line-through;
    text-decoration-color: rgba(74, 90, 120, 0.5);
  }
  .shane-page .np-track-len { color: #4a5a78; font-family: 'Special Elite', monospace; }
  .shane-page .np-scribble { color: #0a0e16; font-family: 'Special Elite', serif; }
  .shane-page .np-scribble strong { color: #4a5a78; }

  /* SHANE spoiler — wax-sealed envelope feel */
  .shane-page .spoiler-details {
    background:
      radial-gradient(circle, rgba(0,0,0,0.06) 0.5px, transparent 0.7px) 0 0 / 3.5px 3.5px,
      linear-gradient(180deg, #c8c4b4 0%, #a8a494 100%);
    border: 2px solid #2a3548;
    box-shadow: 0 8px 18px rgba(0,0,0,0.7);
    transform: rotate(0.4deg);
  }
  .shane-page .spoiler-details summary {
    background:
      repeating-linear-gradient(45deg,
        #88b8d4 0px, #88b8d4 20px,
        #0a0a0a 20px, #0a0a0a 40px);
    padding: 1.2rem;
    border-bottom: 3px solid #0a0a0a;
  }
  .shane-page .spoiler-warn {
    color: #f4f0e4;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-shadow: 2px 2px 0 #0a0a0a;
  }
  .shane-page .spoiler-cta {
    color: #f4f0e4;
    font-family: 'Special Elite', monospace;
    text-shadow: 1px 1px 0 #0a0a0a;
  }
  .shane-page .spoiler-content { color: #0a0e16; font-family: 'Special Elite', serif; padding: 2rem; }
  .shane-page .spoiler-content p { color: #0a0e16; }
  .shane-page .spoiler-content strong { color: #2a3548; }
  .shane-page .spoiler-content em { color: #4a5a78; }

  /* Shane's big pull-quote = newspaper feature */
  .shane-page .scorch-quote {
    background:
      radial-gradient(circle, rgba(0,0,0,0.06) 0.5px, transparent 0.7px) 0 0 / 3.5px 3.5px,
      linear-gradient(180deg, #e8e4d8 0%, #c8c4b4 100%);
    border-top: 4px solid #4a5a78;
    border-bottom: 4px solid #4a5a78;
    border-left: none;
    border-right: none;
    color: #0a0e16;
    font-family: 'Special Elite', serif;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2rem);
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    text-shadow: none;
    transform: rotate(-0.5deg);
    padding: 2rem;
    position: relative;
  }
  .shane-page .scorch-quote::before {
    content: '“';
    position: absolute;
    top: -1.8rem;
    left: 1rem;
    font-family: 'Oswald', sans-serif;
    font-size: 7rem;
    font-weight: 900;
    color: #4a5a78;
    line-height: 1;
    opacity: 0.3;
  }
  .shane-page .scorch-quote cite {
    background: none;
    -webkit-text-fill-color: #4a5a78;
    color: #4a5a78;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    font-style: normal;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
  }

  /* gallery = polaroid corkboard */
  .shane-page .gallery-entry {
    background: #f4f0e4;
    border: none;
    padding: 0.8rem 0.8rem 3rem;
    transform: rotate(-2deg);
    box-shadow: 0 12px 24px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    transition: transform 0.25s ease;
  }
  .shane-page .gallery-entry::before {
    content: '';
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 60px; height: 16px;
    background: #0a0a0a;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 3;
  }
  .shane-page .gallery-entry:hover {
    transform: rotate(-0.5deg) translateY(-6px);
  }
  .shane-page .gallery-entry-cover { filter: grayscale(0.7) contrast(1.15); }
  .shane-page .gallery-entry-overlay { background: transparent; color: #0a0e16; bottom: 0; padding: 0.6rem 0.8rem; }
  .shane-page .gallery-entry-eyebrow { color: #4a5a78; font-family: 'Special Elite', monospace; }
  .shane-page .gallery-entry-count { color: #0a0e16; font-family: 'Oswald', sans-serif; font-weight: 900; font-size: 1.3rem; letter-spacing: 0.1em; }
  .shane-page .gallery-entry-cta {
    background: #0a0a0a;
    color: #d4dce4;
    border: 1px solid #88b8d4;
    font-family: 'Oswald', sans-serif;
    font-weight: 900;
    letter-spacing: 0.2em;
    border-radius: 0;
    box-shadow: 2px 2px 0 #4a5a78;
  }
  .shane-page .gallery-sub { color: #d4dce4; font-family: 'Special Elite', monospace; }

  /* JOURNAL section (unique to Shane) keeps existing styling — minimal override */
  .shane-page .journal-card,
  .shane-page .journal-cover { transition: transform 0.3s ease; }
  .shane-page .journal-card:hover, .shane-page .journal-cover:hover { transform: rotate(0deg); }

  /* Final CTA + back link */
  .shane-page .char-final-cta {
    max-width: 900px;
    margin: 3rem auto 4rem;
    padding: 2.5rem 2rem;
    background: transparent;
    border: none;
  }
  .shane-page .char-final-cta .char-chat-btn {
    font-size: 1.35rem;
    padding: 1.6rem 3rem 1.6rem 4rem;
    transform: rotate(-1.2deg);
  }
  .shane-page .char-back-link {
    color: #b8b4a4;
    font-family: 'Special Elite', monospace;
    letter-spacing: 0.15em;
  }
  .shane-page .char-back-link:hover { color: #88b8d4; }

  /* close button */
  .shane-page .char-close {
    background: #0a0a0a;
    color: #88b8d4;
    border: 2px solid #88b8d4;
    border-radius: 0;
    box-shadow: 0 4px 0 #4a5a78;
  }
  .shane-page .char-close:hover {
    background: #88b8d4;
    color: #0a0e16;
    box-shadow: 0 4px 0 #0a0e16;
  }

  @media (max-width: 760px) {
    .shane-page .char-section { padding: 2rem 1.2rem 2.4rem; margin: 1.6rem 0.6rem; }
    .shane-page .char-section::before, .shane-page .char-section::after { display: none; }
    .shane-page .char-hero-content::after { font-size: 1.4rem; right: -3%; padding: 0.4rem 0.8rem; }
    .shane-page .char-hero-content::before { font-size: 0.65rem; padding: 0.4rem 0.8rem; }
    .shane-page .np-setlist { padding: 1.2rem 0.6rem; }
  }


  /* ================================================================
     CODY — BAYOU JUKE JOINT HANDBILL
     Tea-stained paper tacked to weathered cypress wood with brass
     tacks. Hand-painted festival flyer warmth. Mardi Gras gold/green
     accents. The record player stays intact — handbill paper wraps
     around it like the turntable is sitting on the bar at a juke.
     ================================================================ */
  .cody-page {
    background:
      /* cypress wood grain — vertical planks */
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.45) 0px, rgba(0,0,0,0.45) 1px,
        transparent 1px, transparent 140px),
      repeating-linear-gradient(0deg,
        rgba(255, 200, 100, 0.015) 0px, rgba(255, 200, 100, 0.015) 2px,
        transparent 2px, transparent 4px),
      radial-gradient(ellipse at 50% 30%, #2a1a08 0%, #1a1004 60%, #0a0502 100%);
    color: #2a1808;
  }
  .cody-page::after { display: none; }

  /* sections = tea-stained handbills tacked to the wood */
  .cody-page .char-section {
    position: relative;
    max-width: 900px;
    margin: 2.5rem auto;
    padding: 2.5rem 2.2rem 3rem;
    background:
      radial-gradient(circle, rgba(120, 70, 20, 0.07) 0.5px, transparent 0.8px) 0 0 / 4px 4px,
      radial-gradient(ellipse at 18% 22%, rgba(180, 110, 30, 0.12) 0%, transparent 30%),
      radial-gradient(ellipse at 82% 78%, rgba(120, 70, 20, 0.10) 0%, transparent 35%),
      linear-gradient(165deg, #f4e0a8 0%, #e8c878 60%, #c8a85a 100%);
    border: 1px solid rgba(80, 40, 10, 0.5);
    box-shadow:
      0 12px 24px rgba(0,0,0,0.6),
      0 2px 4px rgba(0,0,0,0.5),
      inset 0 0 80px rgba(120, 70, 20, 0.12);
    transform: rotate(-0.5deg);
    transition: transform 0.3s ease;
  }
  .cody-page .char-section:nth-of-type(even) { transform: rotate(0.6deg); }
  .cody-page .char-section:nth-of-type(3n) { transform: rotate(-0.9deg); }
  .cody-page .char-section:hover { transform: rotate(0deg); }
  /* BRASS TACKS in corners (not staples — bayou vibe) */
  .cody-page .char-section::before,
  .cody-page .char-section::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4cc 0%, #f4d27a 30%, #8a5a1a 90%);
    box-shadow:
      0 0 0 1px #2a1808,
      0 2px 4px rgba(0,0,0,0.6),
      inset 0 -2px 3px rgba(60, 30, 8, 0.5);
    z-index: 3;
  }
  .cody-page .char-section::before { left: 16px; }
  .cody-page .char-section::after  { right: 16px; }

  /* HERO — top of the handbill */
  .cody-page .char-hero {
    position: relative;
    max-width: 900px;
    margin: 1.5rem auto 0;
    min-height: 540px;
    padding: 0;
    background:
      radial-gradient(circle, rgba(80, 40, 10, 0.10) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      radial-gradient(ellipse at 50% 70%, #5a3a14 0%, #2a1808 70%, #100a04 100%);
    border: 2px solid #6a4014;
    box-shadow:
      0 0 0 4px #2a1808,
      0 0 0 5px #d49a3a,
      0 18px 36px rgba(0,0,0,0.85),
      inset 0 0 90px rgba(0,0,0,0.5);
    transform: rotate(-0.7deg);
    overflow: hidden;
  }
  .cody-page .char-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.85) 0%, transparent 18%),
      radial-gradient(ellipse at 100% 100%, rgba(0,0,0,0.85) 0%, transparent 18%),
      radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.7) 0%, transparent 22%);
    z-index: 2;
  }
  /* brass tacks holding hero down */
  .cody-page .char-hero::after {
    content: '';
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4cc 0%, #f4d27a 30%, #8a5a1a 90%);
    box-shadow: 0 0 0 1px #2a1808, 0 2px 4px rgba(0,0,0,0.7);
    z-index: 4;
  }
  .cody-page .char-hero-bg {
    filter: contrast(1.1) saturate(0.85) sepia(0.35) brightness(0.7);
    opacity: 0.6;
    mix-blend-mode: screen;
  }
  .cody-page .char-hero-bg::after { display: none; }

  .cody-page .char-hero-content {
    position: relative;
    z-index: 3;
    padding: 3.5rem 2rem 2.5rem;
    text-align: center;
  }
  /* band tag = warm cream bar */
  .cody-page .char-band-tag {
    display: inline-block;
    padding: 0.6rem 2.5rem;
    background: #2a1808;
    color: #fff4cc;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 0.95rem;
    letter-spacing: 0.3em;
    border: 2px solid #f4d27a;
    box-shadow: 0 3px 0 #6a4014, 0 5px 10px rgba(0,0,0,0.6);
    transform: rotate(-0.8deg);
    text-shadow: none;
  }
  .cody-page .char-band-tag::before,
  .cody-page .char-band-tag::after { display: none; }

  /* "CODY" title = hand-painted juke joint sign */
  .cody-page .char-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(5rem, 16vw, 11rem);
    letter-spacing: 0.04em;
    line-height: 0.85;
    margin: 1.8rem 0 1rem;
    color: transparent;
    background-image:
      linear-gradient(180deg,
        #fff8d8 0%,
        #f4d27a 25%,
        #d49a3a 55%,
        #8a5a1a 85%,
        #3a2410 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter:
      drop-shadow(3px 3px 0 #2a1808)
      drop-shadow(6px 6px 0 #6a4014)
      drop-shadow(0 0 30px rgba(244, 200, 100, 0.6))
      drop-shadow(0 6px 12px rgba(0,0,0,0.8));
    transform: rotate(-1deg);
  }

  .cody-page .char-role {
    font-family: 'Special Elite', monospace;
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: #fff4cc;
    text-transform: uppercase;
    margin: 0.5rem 0 2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  }
  .cody-page .char-role span { color: #d49a3a; }

  /* CHAT button = paper RAFFLE TICKET with brass border */
  .cody-page .char-hero .char-chat-btn,
  .cody-page .char-final-cta .char-chat-btn {
    display: inline-block;
    padding: 1.3rem 2.5rem 1.3rem 4.5rem;
    background:
      radial-gradient(circle at 8% 50%, transparent 9px, #fff4cc 10px) left center / 100% 100% no-repeat,
      linear-gradient(180deg, #fff4cc 0%, #e8c878 100%);
    color: #2a1808;
    border: 3px solid #8a5a1a;
    border-radius: 4px;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow:
      0 0 0 2px #2a1808,
      0 5px 0 #6a4014,
      0 10px 18px rgba(0,0,0,0.6);
    text-shadow: none;
    transform: rotate(-2deg);
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .cody-page .char-hero .char-chat-btn::before {
    content: '';
    position: absolute;
    top: 8%; bottom: 8%;
    left: 30px;
    border-left: 2px dashed #2a1808;
  }
  .cody-page .char-hero .char-chat-btn::after {
    content: 'ADMIT ONE';
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 0.55rem;
    letter-spacing: 0.3em;
    color: #6a4014;
    font-weight: 900;
  }
  .cody-page .char-hero .char-chat-btn:hover,
  .cody-page .char-final-cta .char-chat-btn:hover {
    transform: rotate(-1deg) translateY(-3px);
    box-shadow:
      0 0 0 2px #2a1808,
      0 8px 0 #6a4014,
      0 14px 24px rgba(0,0,0,0.7),
      0 0 28px rgba(244, 200, 100, 0.6);
  }

  /* BAYOU NIGHT diagonal stamp */
  .cody-page .char-hero-content::after {
    content: '⚜ BAYOU NIGHT ⚜';
    position: absolute;
    top: 18%;
    right: -10%;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 3.6vw, 2.4rem);
    letter-spacing: 0.1em;
    color: rgba(244, 200, 100, 0.95);
    border: 5px solid rgba(244, 200, 100, 0.95);
    padding: 0.5rem 1.4rem;
    transform: rotate(16deg);
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
    box-shadow: inset 0 0 0 2px rgba(244, 200, 100, 0.95);
    background: transparent;
    pointer-events: none;
    z-index: 5;
    opacity: 0.9;
  }
  /* ZYDECO LIVE banner */
  .cody-page .char-hero-content::before {
    content: '⚜ ZYDECO LIVE · BAYOU BEATS · ALL NIGHT LONG ⚜';
    position: absolute;
    bottom: 22%;
    left: 50%;
    transform: translateX(-50%) rotate(-1.5deg);
    background: #d49a3a;
    color: #2a1808;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    padding: 0.5rem 1.6rem;
    border: 2px solid #2a1808;
    box-shadow: 0 4px 0 #6a4014;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 4;
    pointer-events: none;
  }

  /* section headers = hand-painted sign on weathered wood */
  .cody-page .char-h2 {
    display: inline-block;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: #2a1808;
    color: #fff4cc;
    padding: 0.6rem 1.6rem;
    margin: 0 0 2rem;
    border: 3px solid #f4d27a;
    box-shadow: 6px 6px 0 #6a4014, 0 6px 12px rgba(0,0,0,0.4);
    transform: rotate(-1deg);
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  }
  .cody-page .char-h2::before { content: '⚜ '; color: #f4d27a; }
  .cody-page .char-h2::after  { content: ' ⚜'; color: #f4d27a; }

  /* about — newsprint feature in sepia */
  .cody-page .char-about p {
    font-family: 'Special Elite', 'Times New Roman', serif;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #2a1808;
    margin-bottom: 1.2rem;
    text-shadow: none;
  }
  .cody-page .char-about p strong { color: #6a4014; }
  .cody-page .char-about p em { color: #8a5a1a; font-style: italic; }
  .cody-page .char-about p:first-of-type::first-letter {
    font-family: 'Cinzel Decorative', serif;
    float: left;
    font-size: 5.5rem;
    line-height: 0.85;
    margin: 0.2rem 0.6rem 0 0;
    color: #8a5a1a;
    text-shadow: 3px 3px 0 #2a1808;
  }
  /* tags = embroidered patches with brass thread */
  .cody-page .char-tag {
    background: #2a1808;
    color: #fff4cc;
    border: 2px dashed #d49a3a;
    border-radius: 0;
    font-family: 'Special Elite', monospace;
    font-weight: bold;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    padding: 0.4rem 0.9rem;
    text-transform: uppercase;
    box-shadow: 3px 3px 0 #6a4014;
    transform: rotate(-1deg);
    transition: transform 0.2s ease;
  }
  .cody-page .char-tags > .char-tag:nth-child(even) { transform: rotate(1.5deg); }
  .cody-page .char-tags > .char-tag:nth-child(3n) { transform: rotate(-2deg); }
  .cody-page .char-tag:hover { transform: rotate(0deg) translateY(-2px); }

  /* quotes = torn handbills with marker writing */
  .cody-page .quote-card {
    background:
      radial-gradient(circle, rgba(80, 40, 10, 0.08) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      linear-gradient(180deg, #fff4cc 0%, #e8c878 100%);
    border: 1px solid rgba(80, 40, 10, 0.5);
    color: #2a1808;
    font-family: 'Special Elite', serif;
    font-style: italic;
    font-size: 1.1rem;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4);
    padding: 1.6rem 1.4rem;
    position: relative;
    transform: rotate(-1.5deg);
    transition: transform 0.25s ease;
  }
  .cody-page .quote-grid > .quote-card:nth-child(2) { transform: rotate(1.2deg); }
  .cody-page .quote-grid > .quote-card:nth-child(3) { transform: rotate(-0.7deg); }
  .cody-page .quote-grid > .quote-card:nth-child(4) { transform: rotate(1.8deg); }
  .cody-page .quote-card:hover { transform: rotate(0deg) scale(1.03); }
  .cody-page .quote-card::before {
    content: '“';
    position: absolute;
    top: -1.2rem;
    left: 0.6rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 5rem;
    font-weight: 900;
    color: #8a5a1a;
    line-height: 1;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  }
  /* brass tack instead of tape */
  .cody-page .quote-card::after {
    content: '';
    position: absolute;
    top: 8px; right: 8px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4cc, #d49a3a 50%, #6a4014);
    box-shadow: 0 0 0 1px #2a1808, 0 1px 2px rgba(0,0,0,0.6);
  }

  /* THE BAND — warm wood tour billing */
  .cody-page .band-poster-wrap {
    border: 2px solid #2a1808;
    box-shadow: 0 8px 18px rgba(0,0,0,0.6), 0 0 0 4px #f4d27a;
    filter: contrast(1.08) saturate(0.85) sepia(0.18);
    transform: rotate(-0.8deg);
    max-width: 580px;
    margin: 0 auto 2.5rem;
  }
  .cody-page .member-grid {
    background: #2a1808;
    border: 3px solid #d49a3a;
    padding: 1.8rem 1.5rem;
    box-shadow: 6px 6px 0 #6a4014, 0 8px 18px rgba(0,0,0,0.5);
    transform: rotate(0.4deg);
    position: relative;
  }
  .cody-page .member-grid::before {
    content: '⚜ PRESENTING ⚜';
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%) rotate(-1deg);
    background: #d49a3a;
    color: #2a1808;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 0.9rem;
    letter-spacing: 0.25em;
    padding: 0.4rem 1.6rem;
    border: 2px solid #2a1808;
    box-shadow: 0 3px 0 #2a1808;
  }
  .cody-page .member-card {
    background: transparent;
    border: none;
    border-bottom: 2px dashed rgba(212, 154, 58, 0.4);
    border-left: none;
    border-radius: 0;
    padding: 1rem 0;
    box-shadow: none;
    transition: padding-left 0.2s ease;
  }
  .cody-page .member-card:hover { padding-left: 0.8rem; }
  .cody-page .member-card:last-child { border-bottom: none; }
  .cody-page .member-name {
    color: #f4d27a;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.7rem;
    text-shadow: 2px 2px 0 #6a4014;
  }
  .cody-page .member-role {
    color: #d4b86a;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    text-transform: uppercase;
  }
  .cody-page .member-desc {
    color: #f4e8c0;
    font-family: 'Special Elite', serif;
    font-size: 0.95rem;
    margin-top: 0.4rem;
  }

  /* RECORD PLAYER — wrapped in handbill paper, brass tacks corner it.
     The platter / record / VU / tonearm core stays as-is (works great).
     Only the cabinet/crate get the handbill treatment. */
  .cody-page .rp-stage {
    background:
      radial-gradient(circle, rgba(120, 70, 20, 0.07) 0.5px, transparent 0.8px) 0 0 / 4px 4px,
      radial-gradient(ellipse at 25% 18%, rgba(180, 110, 30, 0.10) 0%, transparent 35%),
      linear-gradient(165deg, #f4e0a8 0%, #e8c878 60%, #c8a85a 100%);
    border: 1px solid rgba(80, 40, 10, 0.5);
    border-radius: 10px;
    box-shadow:
      0 12px 22px rgba(0, 0, 0, 0.55),
      0 2px 4px rgba(0, 0, 0, 0.4),
      inset 0 0 60px rgba(120, 70, 20, 0.10);
    transform: rotate(-0.8deg);
    position: relative;
  }
  /* brass tacks at corners of the rp-stage */
  .cody-page .rp-stage::before,
  .cody-page .rp-stage::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4cc 0%, #f4d27a 30%, #8a5a1a 90%);
    box-shadow: 0 0 0 1px #2a1808, 0 2px 4px rgba(0,0,0,0.6);
    z-index: 5;
  }
  .cody-page .rp-stage::before { left: 12px; }
  .cody-page .rp-stage::after  { right: 12px; }

  /* The crate gets the handbill setlist treatment */
  .cody-page .rp-crate {
    background:
      repeating-linear-gradient(180deg,
        transparent 0px, transparent 31px,
        rgba(80, 40, 10, 0.18) 31px, rgba(80, 40, 10, 0.18) 32px),
      linear-gradient(180deg, #fff4cc 0%, #e8c878 100%);
    color: #2a1808;
    border: 1px solid rgba(80, 40, 10, 0.5);
    box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.3), 0 8px 16px rgba(0,0,0,0.5);
    transform: rotate(-1.2deg);
  }
  .cody-page .rp-crate-head {
    color: #2a1808;
    font-family: 'Cinzel Decorative', serif;
    text-decoration: underline;
    text-decoration-color: #8a5a1a;
    text-decoration-thickness: 2px;
  }
  .cody-page .rp-crate-sub {
    color: #6a4014;
    border-bottom: 1px dashed rgba(80, 40, 10, 0.4);
  }
  .cody-page .rp-track { border-bottom: 1px dashed rgba(80, 40, 10, 0.25); transition: padding-left 0.15s ease; }
  .cody-page .rp-track:hover { background: rgba(212, 154, 58, 0.15); padding-left: 0.8rem; }
  .cody-page .rp-track.is-active {
    background: rgba(138, 90, 26, 0.18);
    box-shadow: inset 4px 0 0 #8a5a1a;
  }
  .cody-page .rp-track-name { color: #2a1808; font-family: 'Special Elite', monospace; }
  .cody-page .rp-track-len { color: #6a4014; }
  .cody-page .rp-crate-scribble {
    color: #6a4014;
    border-top: 1px dashed rgba(80, 40, 10, 0.4);
    font-family: 'Special Elite', serif;
  }
  .cody-page .rp-crate-scribble strong { color: #2a1808; font-family: 'Cinzel Decorative', serif; }

  /* spoiler = bayou journal page */
  .cody-page .spoiler-details {
    background:
      radial-gradient(circle, rgba(80, 40, 10, 0.10) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      linear-gradient(180deg, #e8c878 0%, #c8a85a 100%);
    border: 2px solid #6a4014;
    box-shadow: 0 8px 18px rgba(0,0,0,0.6);
    transform: rotate(0.4deg);
  }
  .cody-page .spoiler-details summary {
    background:
      repeating-linear-gradient(45deg,
        #d49a3a 0px, #d49a3a 20px,
        #2a1808 20px, #2a1808 40px);
    padding: 1.2rem;
    border-bottom: 3px solid #2a1808;
  }
  .cody-page .spoiler-warn {
    color: #fff4cc;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-shadow: 2px 2px 0 #2a1808;
  }
  .cody-page .spoiler-cta {
    color: #fff4cc;
    font-family: 'Special Elite', monospace;
    text-shadow: 1px 1px 0 #2a1808;
  }
  .cody-page .spoiler-content { color: #2a1808; font-family: 'Special Elite', serif; padding: 2rem; line-height: 1.7; }
  .cody-page .spoiler-content p { color: #2a1808; }
  .cody-page .spoiler-content strong { color: #6a4014; }
  .cody-page .spoiler-content em { color: #8a5a1a; }

  /* big quote = newspaper pull-quote with brass borders */
  .cody-page .scorch-quote {
    background:
      radial-gradient(circle, rgba(80, 40, 10, 0.08) 0.6px, transparent 0.9px) 0 0 / 3px 3px,
      linear-gradient(180deg, #fff4cc 0%, #e8c878 100%);
    border-top: 4px solid #8a5a1a;
    border-bottom: 4px solid #8a5a1a;
    border-left: none;
    border-right: none;
    color: #2a1808;
    font-family: 'Cinzel Decorative', serif;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.1rem);
    box-shadow: 0 10px 20px rgba(0,0,0,0.55);
    text-shadow: none;
    transform: rotate(-0.6deg);
    padding: 2rem;
    position: relative;
  }
  .cody-page .scorch-quote::before {
    content: '“';
    position: absolute;
    top: -2rem;
    left: 1rem;
    font-family: 'Cinzel Decorative', serif;
    font-size: 8rem;
    font-weight: 900;
    color: #8a5a1a;
    line-height: 1;
    opacity: 0.3;
  }
  .cody-page .scorch-quote cite {
    background: none;
    -webkit-text-fill-color: #8a5a1a;
    color: #8a5a1a;
    font-family: 'Cinzel Decorative', serif;
    font-style: normal;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
  }

  /* gallery — photo with tea stains and brass tack corners */
  .cody-page .gallery-entry {
    background: #fff4cc;
    border: none;
    padding: 0.8rem 0.8rem 3rem;
    transform: rotate(-2deg);
    box-shadow: 0 12px 24px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
    position: relative;
    max-width: 360px;
    margin: 0 auto;
    transition: transform 0.25s ease;
  }
  /* 2 brass tacks at top corners */
  .cody-page .gallery-entry::before,
  .cody-page .gallery-entry::after {
    content: '';
    position: absolute;
    top: 6px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff4cc, #d49a3a 50%, #6a4014);
    box-shadow: 0 0 0 1px #2a1808, 0 1px 2px rgba(0,0,0,0.6);
    z-index: 3;
  }
  .cody-page .gallery-entry::before { left: 8px; }
  .cody-page .gallery-entry::after  { right: 8px; }
  .cody-page .gallery-entry:hover { transform: rotate(-0.5deg) translateY(-5px); }
  .cody-page .gallery-entry-cover { filter: contrast(1.05) saturate(0.9) sepia(0.15); }
  .cody-page .gallery-entry-overlay { background: transparent; color: #2a1808; bottom: 0; padding: 0.6rem 0.8rem; }
  .cody-page .gallery-entry-eyebrow { color: #8a5a1a; font-family: 'Special Elite', monospace; }
  .cody-page .gallery-entry-count { color: #2a1808; font-family: 'Cinzel Decorative', serif; font-size: 1.4rem; font-weight: 900; }
  .cody-page .gallery-entry-cta {
    background: #2a1808;
    color: #fff4cc;
    border: 1px solid #d49a3a;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    letter-spacing: 0.15em;
    border-radius: 0;
    box-shadow: 2px 2px 0 #6a4014;
  }
  .cody-page .gallery-sub { color: #f4d27a; font-family: 'Special Elite', monospace; }

  /* final CTA */
  .cody-page .char-final-cta {
    max-width: 900px;
    margin: 3rem auto 4rem;
    padding: 2.5rem 2rem;
    background: transparent;
    border: none;
  }
  .cody-page .char-final-cta .char-chat-btn {
    font-size: 1.35rem;
    padding: 1.6rem 3rem 1.6rem 5.5rem;
    transform: rotate(-1.5deg);
  }
  .cody-page .char-back-link {
    color: #b8a060;
    font-family: 'Special Elite', monospace;
    letter-spacing: 0.15em;
  }
  .cody-page .char-back-link:hover { color: #f4d27a; }

  /* close button */
  .cody-page .char-close {
    background: #2a1808;
    color: #d49a3a;
    border: 2px solid #d49a3a;
    border-radius: 0;
    box-shadow: 0 4px 0 #6a4014;
  }
  .cody-page .char-close:hover {
    background: #d49a3a;
    color: #2a1808;
    box-shadow: 0 4px 0 #2a1808;
  }

  @media (max-width: 760px) {
    .cody-page .char-section { padding: 2rem 1.2rem 2.4rem; margin: 1.6rem 0.6rem; }
    .cody-page .char-hero-content::after { font-size: 1.3rem; right: -3%; padding: 0.4rem 0.8rem; }
    .cody-page .char-hero-content::before { font-size: 0.6rem; padding: 0.4rem 0.8rem; }
  }


  /* ================================================================
     MOBILE FIX — poster transformations were designed desktop-first.
     This block forces all three character pages (.scorch-page,
     .shane-page, .cody-page) to behave well on phones:
       - kill the crooked rotations (they overflow viewports + look
         worse on small screens because there's less canvas around them)
       - shrink and reposition diagonal stamps that hung off the edge
       - cap title/font sizes
       - collapse multi-column layouts to single column
       - reduce expensive shadow stacks
       - hide/disable hover-only effects on touch
     One :is() block keeps selector count down.
     ================================================================ */
  @media (max-width: 760px) {
    /* hard stop on any sideways scrolling caused by rotated boxes */
    html, body { overflow-x: hidden; max-width: 100%; }
    .character-page { overflow-x: hidden; }

    /* ---- ALL THREE POSTER PAGES: section straightening + sizing ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-section,
    :is(.scorch-page, .shane-page, .cody-page) .char-section:nth-of-type(even),
    :is(.scorch-page, .shane-page, .cody-page) .char-section:nth-of-type(3n),
    :is(.scorch-page, .shane-page, .cody-page) .char-section:hover {
      transform: none;
      margin: 1.2rem 0.5rem;
      padding: 1.8rem 1.1rem 2.2rem;
      max-width: calc(100% - 1rem);
    }
    /* hide decorative staples / tape / brass tacks on tiny screens
       (they hung off the edge and were noisy at this scale) */
    :is(.scorch-page, .shane-page, .cody-page) .char-section::before,
    :is(.scorch-page, .shane-page, .cody-page) .char-section::after {
      display: none;
    }

    /* ---- HERO: smaller, no rotation, stamps brought in-frame ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-hero {
      min-height: 380px;
      transform: none;
      margin: 0.5rem;
    }
    :is(.scorch-page, .shane-page, .cody-page) .char-hero-content {
      padding: 2.5rem 1rem 1.8rem;
    }
    /* diagonal "SOLD OUT" / "MEMBERS ONLY" / "BAYOU NIGHT" stamps */
    :is(.scorch-page, .shane-page, .cody-page) .char-hero-content::after {
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      right: 6%;
      top: 6%;
      padding: 0.3rem 0.7rem;
      border-width: 3px;
      box-shadow: inset 0 0 0 1.5px currentColor;
    }
    /* tour ribbon banners */
    :is(.scorch-page, .shane-page, .cody-page) .char-hero-content::before {
      font-size: 0.55rem;
      letter-spacing: 0.12em;
      padding: 0.35rem 0.7rem;
      bottom: 16%;
      max-width: 90%;
      white-space: normal;
      text-align: center;
    }

    /* ---- TITLES: cap smaller, kill rotation ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-title {
      font-size: clamp(3rem, 14vw, 5rem);
      transform: none;
      margin: 1rem 0 0.6rem;
      letter-spacing: 0.03em;
    }
    /* Shane's stencil + Cody's gradient have extra drop-shadows we don't
       need stacked on a small screen — simplify them */
    .shane-page .char-title,
    .cody-page .char-title {
      filter:
        drop-shadow(2px 2px 0 #0a0e16)
        drop-shadow(0 4px 8px rgba(0,0,0,0.7));
    }
    .scorch-page .char-title {
      text-shadow:
        0 0 4px #f4e8c0,
        3px 3px 0 #1a0202,
        0 0 30px rgba(255, 90, 20, 0.7);
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
    }

    /* ---- SECTION HEADERS: smaller, no offset shadow ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-h2 {
      font-size: clamp(1.2rem, 5vw, 1.7rem);
      transform: none;
      padding: 0.5rem 1rem;
      box-shadow: 3px 3px 0 #2a3548, 0 4px 8px rgba(0,0,0,0.3);
      letter-spacing: 0.06em;
    }

    /* ---- ABOUT: drop cap shrunk so it doesn't eat the paragraph ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-about p:first-of-type::first-letter {
      font-size: 3.2rem;
    }

    /* ---- TAGS: unrotate so they wrap cleanly ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-tag,
    :is(.scorch-page, .shane-page, .cody-page) .char-tags > .char-tag:nth-child(n) {
      transform: none;
      font-size: 0.7rem;
      padding: 0.35rem 0.7rem;
    }

    /* ---- QUOTES: unrotate ---- */
    :is(.scorch-page, .shane-page, .cody-page) .quote-card,
    :is(.scorch-page, .shane-page, .cody-page) .quote-grid > .quote-card:nth-child(n) {
      transform: none;
      font-size: 1rem;
      padding: 1.2rem 1rem 1.4rem;
    }
    :is(.scorch-page, .shane-page, .cody-page) .quote-card:hover {
      transform: none;
    }
    :is(.scorch-page, .shane-page, .cody-page) .quote-card::before {
      font-size: 3rem;
      top: -0.6rem;
    }

    /* ---- BAND lineup: unrotate, tighter ---- */
    :is(.scorch-page, .shane-page, .cody-page) .member-grid {
      transform: none;
      padding: 1.4rem 1rem;
      box-shadow: 4px 4px 0 #2a3548, 0 6px 12px rgba(0,0,0,0.4);
    }
    :is(.scorch-page, .shane-page, .cody-page) .member-grid::before {
      font-size: 0.75rem;
      padding: 0.3rem 1rem;
      letter-spacing: 0.2em;
    }
    :is(.scorch-page, .shane-page, .cody-page) .member-name { font-size: 1.4rem; }
    :is(.scorch-page, .shane-page, .cody-page) .band-poster-wrap {
      transform: none;
      max-width: 100%;
      margin-bottom: 1.6rem;
    }

    /* ---- MUSIC PLAYERS: single column, no rotation ---- */
    :is(.scorch-page, .shane-page) .setlist-stage {
      grid-template-columns: 1fr;
      gap: 1rem;
      padding: 1.4rem 1rem;
      transform: none;
    }
    :is(.scorch-page, .shane-page) .np-setlist {
      transform: none;
      padding: 1.2rem 1rem;
    }
    .scorch-page .np-setlist { padding-left: 2.2rem; } /* keep room for red margin line */
    .cody-page .rp-stage {
      grid-template-columns: 1fr;
      gap: 1.2rem;
      padding: 1.2rem 0.8rem;
      transform: none;
    }
    .cody-page .rp-crate { transform: none; }
    /* Cody's record player platter is fine — it's already responsive */

    /* ---- CHAT BUTTONS: bigger touch target, less rotation, less padding ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-chat-btn {
      transform: none;
      font-size: 0.9rem;
      letter-spacing: 0.15em;
      padding: 1rem 1.4rem 1rem 2.6rem;
      min-height: 48px;
    }
    :is(.scorch-page, .shane-page, .cody-page) .char-chat-btn:hover {
      transform: translateY(-2px);
    }
    /* shrink the ADMIT ONE / VIP sideways text */
    :is(.scorch-page, .shane-page, .cody-page) .char-chat-btn::after {
      font-size: 0.45rem;
    }

    /* ---- BIG PULL-QUOTE ---- */
    :is(.scorch-page, .shane-page, .cody-page) .scorch-quote {
      transform: none;
      padding: 1.5rem 1.1rem;
      font-size: 1.1rem;
    }
    :is(.scorch-page, .shane-page, .cody-page) .scorch-quote::before {
      font-size: 5rem;
      top: -1.2rem;
    }

    /* ---- SPOILER block ---- */
    :is(.scorch-page, .shane-page, .cody-page) .spoiler-details {
      transform: none;
    }
    :is(.scorch-page, .shane-page, .cody-page) .spoiler-content {
      padding: 1.2rem 1rem;
      font-size: 0.95rem;
    }

    /* ---- GALLERY ---- */
    :is(.scorch-page, .shane-page, .cody-page) .gallery-entry {
      transform: none;
      max-width: 280px;
    }
    :is(.scorch-page, .shane-page, .cody-page) .gallery-entry:hover {
      transform: translateY(-3px);
    }

    /* ---- FINAL CTA + close button ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-final-cta {
      padding: 1.5rem 1rem;
      margin: 1.5rem auto 2.5rem;
    }
    :is(.scorch-page, .shane-page, .cody-page) .char-final-cta .char-chat-btn {
      font-size: 1rem;
      padding: 1.1rem 1.4rem 1.1rem 2.6rem;
      transform: none;
    }

    /* ---- CLOSE BUTTON: bigger, easier to tap ---- */
    :is(.scorch-page, .shane-page, .cody-page) .char-close {
      width: 44px; height: 44px;
      font-size: 1.4rem;
    }

    /* ---- "is-playing" pulses can chug on weak GPUs — keep static ---- */
    :is(.scorch-page, .shane-page, .cody-page) .np-console.is-playing .np-btn.np-play,
    .cody-page .rp-cabinet.is-playing .rp-btn.rp-play {
      animation: none;
    }
  }

  /* ---- EXTRA-TINY screens (≤ 380px): shave more ---- */
  @media (max-width: 380px) {
    :is(.scorch-page, .shane-page, .cody-page) .char-hero {
      min-height: 320px;
    }
    :is(.scorch-page, .shane-page, .cody-page) .char-title {
      font-size: clamp(2.6rem, 14vw, 4rem);
    }
    :is(.scorch-page, .shane-page, .cody-page) .char-hero-content::before {
      display: none; /* tour banner gets in the way at this size */
    }
    :is(.scorch-page, .shane-page, .cody-page) .char-band-tag {
      font-size: 0.75rem;
      letter-spacing: 0.25em;
      padding: 0.4rem 1.4rem;
    }
  }



  /* ============================================================
     POSTER SYSTEM (shared across all character pages)
     Heavy-metal concert poster aesthetic — torn paper, stamps,
     tape, blood splatter, ticket stubs, polaroids. All CSS, no
     new RAF loops. Each character page sets its own palette via
     CSS custom properties below, and the rest of the system
     inherits those colors automatically.
     ============================================================ */

  /* ===== THEME PALETTES ===== */
  .scorch-page {
    --pp-bg-deep: #0a0606;
    --pp-bg-mid:  #18080a;
    --pp-glow-1:  rgba(255, 90, 31, 0.18);
    --pp-glow-2:  rgba(120, 20, 10, 0.40);
    --pp-grit-1:  rgba(255, 90, 31, 0.08);
    --pp-grit-2:  rgba(232, 50, 50, 0.06);
    --pp-paper:   #f4e8c0;
    --pp-paper-2: #d4c098;
    --pp-paper-shadow: #4a0808;
    --pp-paper-mark: rgba(74, 8, 8, 0.05);
    --pp-ink:      #1a0606;
    --pp-ink-soft: #6a3408;
    --pp-accent:   #ff5a1f;
    --pp-accent-2: #c8281a;
    --pp-accent-3: #ffaa00;
    --pp-accent-soft: #d4b860;
    --pp-stamp:      #ff3a1a;
    --pp-stamp-glow: rgba(255, 90, 31, 0.55);
    --pp-title-1: #fff4cc;
    --pp-title-2: #ffaa00;
    --pp-title-3: #ff5a1f;
    --pp-title-4: #c8281a;
    --pp-title-5: #4a0808;
    --pp-tape-1: #ffd86a;
    --pp-tape-2: #d49a3a;
    --pp-splat-filter: none;
  }
  .shane-page {
    --pp-bg-deep: #050810;
    --pp-bg-mid:  #0a0e1a;
    --pp-glow-1:  rgba(136, 184, 212, 0.15);
    --pp-glow-2:  rgba(40, 60, 80, 0.45);
    --pp-grit-1:  rgba(136, 184, 212, 0.06);
    --pp-grit-2:  rgba(80, 110, 140, 0.05);
    --pp-paper:   #d4c8b4;
    --pp-paper-2: #b8a890;
    --pp-paper-shadow: #1a2434;
    --pp-paper-mark: rgba(26, 36, 52, 0.06);
    --pp-ink:      #0a0e14;
    --pp-ink-soft: #3a4a5a;
    --pp-accent:   #88b8d4;
    --pp-accent-2: #5a7a98;
    --pp-accent-3: #c8884a;
    --pp-accent-soft: #88a0b8;
    --pp-stamp:      #5a7a98;
    --pp-stamp-glow: rgba(136, 184, 212, 0.55);
    --pp-title-1: #f4f0e8;
    --pp-title-2: #c8d4e0;
    --pp-title-3: #88b8d4;
    --pp-title-4: #4a6478;
    --pp-title-5: #1a2434;
    --pp-tape-1: #c8b078;
    --pp-tape-2: #886a3a;
    --pp-splat-filter: hue-rotate(175deg) saturate(0.55) brightness(0.85);
  }
  .cody-page {
    --pp-bg-deep: #0c0a06;
    --pp-bg-mid:  #14180c;
    --pp-glow-1:  rgba(212, 154, 58, 0.18);
    --pp-glow-2:  rgba(60, 50, 20, 0.45);
    --pp-grit-1:  rgba(212, 154, 58, 0.08);
    --pp-grit-2:  rgba(120, 80, 25, 0.06);
    --pp-paper:   #f4e8c0;
    --pp-paper-2: #d4c098;
    --pp-paper-shadow: #6a4014;
    --pp-paper-mark: rgba(106, 64, 20, 0.06);
    --pp-ink:      #1a1004;
    --pp-ink-soft: #6a4014;
    --pp-accent:   #d49a3a;
    --pp-accent-2: #8a5a1a;
    --pp-accent-3: #f4d27a;
    --pp-accent-soft: #b8a060;
    --pp-stamp:      #d49a3a;
    --pp-stamp-glow: rgba(244, 200, 100, 0.6);
    --pp-title-1: #fff4cc;
    --pp-title-2: #f4d27a;
    --pp-title-3: #d49a3a;
    --pp-title-4: #8a5a1a;
    --pp-title-5: #3a2410;
    --pp-tape-1: #ffd86a;
    --pp-tape-2: #c89c44;
    --pp-splat-filter: hue-rotate(-12deg) saturate(0.8);
  }

  /* ===== POSTER HERO ===== */
  .poster-hero {
    position: relative;
    min-height: 100vh;
    padding: clamp(2rem, 6vw, 4rem) clamp(1rem, 5vw, 3rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(ellipse at 50% 30%, var(--pp-glow-1) 0%, transparent 60%),
      radial-gradient(ellipse at 50% 100%, var(--pp-glow-2) 0%, transparent 60%),
      linear-gradient(180deg, var(--pp-bg-deep) 0%, var(--pp-bg-mid) 50%, var(--pp-bg-deep) 100%);
  }
  .poster-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px),
      radial-gradient(circle at 20% 30%, var(--pp-grit-1), transparent 25%),
      radial-gradient(circle at 80% 70%, var(--pp-grit-2), transparent 25%);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
  }
  .poster-hero-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: contrast(1.25) saturate(0.6) brightness(0.42) grayscale(0.4);
    mix-blend-mode: luminosity;
    z-index: 0;
  }
  .poster-hero-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(10,6,6,0.85) 70%, var(--pp-bg-deep) 100%);
  }

  .poster-tag {
    position: relative;
    z-index: 2;
    font-family: 'Special Elite', monospace;
    font-size: clamp(0.7rem, 1.6vw, 0.95rem);
    letter-spacing: 0.6em;
    text-transform: uppercase;
    color: var(--pp-accent-3);
    text-shadow: 0 0 18px var(--pp-stamp-glow), 0 2px 0 var(--pp-ink);
    padding-bottom: 0.8rem;
    border-bottom: 1px dashed var(--pp-accent-soft);
    margin-bottom: 1.5rem;
  }

  .poster-title {
    position: relative;
    z-index: 2;
    font-family: 'Metal Mania', 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(4.5rem, 18vw, 14rem);
    letter-spacing: 0.02em;
    line-height: 0.9;
    color: transparent;
    background-image: linear-gradient(180deg,
      var(--pp-title-1) 0%,
      var(--pp-title-2) 25%,
      var(--pp-title-3) 55%,
      var(--pp-title-4) 80%,
      var(--pp-title-5) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    filter:
      drop-shadow(0 6px 0 var(--pp-ink))
      drop-shadow(0 0 30px var(--pp-stamp-glow))
      drop-shadow(0 0 60px var(--pp-paper-shadow));
    transform: rotate(-1deg) skewX(-1deg);
    margin: 0;
  }

  .poster-subtitle {
    position: relative;
    z-index: 2;
    margin-top: 1rem;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(1.1rem, 3.5vw, 2rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pp-title-1);
    text-shadow:
      0 0 18px var(--pp-stamp-glow),
      2px 2px 0 var(--pp-ink);
    transform: rotate(0.5deg);
  }
  .poster-role {
    position: relative;
    z-index: 2;
    margin-top: 0.8rem;
    font-family: 'Special Elite', monospace;
    font-size: clamp(0.85rem, 2vw, 1.1rem);
    color: var(--pp-accent-soft);
    letter-spacing: 0.15em;
  }
  .poster-role span { color: var(--pp-accent); }

  /* ===== TICKET-STUB CTA ===== */
  .ticket-cta {
    position: relative;
    z-index: 2;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    display: inline-block;
    padding: 1.2rem 2rem 1.2rem 3.2rem;
    background: linear-gradient(95deg, var(--pp-paper) 0%, var(--pp-accent-soft) 100%);
    color: var(--pp-ink);
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(0.95rem, 2.3vw, 1.25rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-mask: radial-gradient(circle at 2.2rem 50%, transparent 7px, #000 7.5px) padding-box;
            mask: radial-gradient(circle at 2.2rem 50%, transparent 7px, #000 7.5px) padding-box;
    box-shadow:
      0 4px 0 var(--pp-paper-shadow),
      0 8px 20px rgba(0,0,0,0.6),
      inset 0 0 14px rgba(120, 70, 20, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    transform: rotate(-2deg);
  }
  .ticket-cta::before {
    content: 'ADMIT ONE';
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    transform-origin: center;
    font-family: 'Special Elite', monospace;
    font-size: 0.55rem;
    letter-spacing: 0.25em;
    color: var(--pp-paper-shadow);
  }
  .ticket-cta:hover {
    transform: rotate(0deg) translateY(-3px) scale(1.02);
    box-shadow:
      0 7px 0 var(--pp-paper-shadow),
      0 12px 28px rgba(0,0,0,0.7),
      inset 0 0 14px rgba(120, 70, 20, 0.3);
  }

  /* ===== STAMPS ===== */
  .stamp {
    position: absolute;
    z-index: 3;
    padding: 0.6rem 1.2rem;
    border: 4px double var(--pp-stamp);
    background: rgba(10, 6, 6, 0.4);
    color: var(--pp-accent);
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(0.7rem, 1.8vw, 1.1rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-shadow: 0 0 14px var(--pp-stamp-glow);
    box-shadow:
      0 0 0 1px var(--pp-stamp),
      0 0 30px var(--pp-stamp-glow),
      inset 0 0 12px rgba(0,0,0,0.4);
    transform: rotate(-12deg);
  }
  .stamp--tonight { top: 8%; right: 6%; transform: rotate(-12deg); }
  .stamp--age {
    bottom: 9%; left: 7%; transform: rotate(8deg);
    color: var(--pp-accent-3);
    border-color: var(--pp-accent-3);
    box-shadow: 0 0 0 1px var(--pp-accent-3), 0 0 30px var(--pp-stamp-glow), inset 0 0 12px rgba(0,0,0,0.4);
  }
  @media (max-width: 700px) {
    .stamp--tonight { top: 4%; right: 4%; padding: 0.4rem 0.8rem; }
    .stamp--age     { bottom: 4%; left: 4%; padding: 0.4rem 0.8rem; }
  }

  /* ===== TAPE ===== */
  .tape {
    position: absolute;
    width: 90px;
    height: 22px;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 8px, transparent 8px, transparent 16px),
      linear-gradient(180deg, var(--pp-tape-1) 0%, var(--pp-tape-2) 100%);
    opacity: 0.85;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    z-index: 3;
    pointer-events: none;
  }

  /* ===== SPLATTER ===== */
  .splat {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    opacity: 0.55;
    background-repeat: no-repeat;
    background-size: contain;
    filter: var(--pp-splat-filter);
  }
  .splat--tl {
    top: -2%; left: -2%;
    width: 280px; height: 280px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%23c8281a' opacity='0.85'><circle cx='40' cy='40' r='32'/><circle cx='95' cy='25' r='10'/><circle cx='25' cy='100' r='8'/><circle cx='110' cy='70' r='14'/><circle cx='70' cy='85' r='6'/><circle cx='50' cy='130' r='4'/><circle cx='130' cy='110' r='5'/><ellipse cx='150' cy='40' rx='15' ry='8' transform='rotate(20 150 40)'/></g></svg>");
  }
  .splat--br {
    bottom: -2%; right: -2%;
    width: 240px; height: 240px;
    transform: scaleX(-1) rotate(15deg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%23ff5a1f' opacity='0.7'><circle cx='50' cy='50' r='26'/><circle cx='100' cy='35' r='12'/><circle cx='130' cy='95' r='15'/><circle cx='75' cy='110' r='8'/><circle cx='40' cy='140' r='10'/><circle cx='110' cy='150' r='6'/></g></svg>");
  }

  /* ===== SCROLL HINT ===== */
  .poster-scroll {
    position: absolute;
    z-index: 2;
    bottom: 1.6rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Special Elite', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: rgba(244, 232, 192, 0.55);
    text-transform: uppercase;
    animation: posterScrollPulse 2s ease-in-out infinite;
  }
  @keyframes posterScrollPulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
    50%      { opacity: 0.9; transform: translate(-50%, 4px); }
  }

  /* ===== POSTER SECTIONS ===== */
  .poster-section {
    position: relative;
    padding: clamp(3rem, 8vw, 5rem) clamp(1rem, 5vw, 3rem);
  }
  .poster-h2 {
    display: inline-block;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 5vw, 3rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--pp-accent);
    text-shadow:
      0 0 24px var(--pp-stamp-glow),
      3px 3px 0 var(--pp-ink),
      0 6px 12px rgba(0,0,0,0.7);
    transform: rotate(-1deg);
    margin-bottom: 1.5rem;
    border: 4px double var(--pp-accent);
    padding: 0.4rem 1.5rem;
    background: rgba(10, 6, 6, 0.4);
    box-shadow: 0 0 0 1px var(--pp-accent), 0 0 24px var(--pp-stamp-glow), inset 0 0 12px rgba(0,0,0,0.5);
  }
  .poster-eyebrow {
    display: block;
    font-family: 'Special Elite', monospace;
    font-size: 0.85rem;
    color: var(--pp-accent-soft);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
  }

  /* ===== TOUR DATES ===== */
  .tour-dates {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--pp-paper) 0%, var(--pp-paper-2) 100%);
    color: var(--pp-ink);
    border: 2px solid var(--pp-ink);
    box-shadow: 0 10px 0 var(--pp-paper-shadow), 0 14px 30px rgba(0,0,0,0.6);
    transform: rotate(-0.4deg);
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
  }
  .tour-dates-head {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--pp-paper-shadow);
    text-align: center;
    border-bottom: 2px dashed var(--pp-paper-shadow);
    padding-bottom: 0.6rem;
    margin-bottom: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  .tour-dates-sub {
    text-align: center;
    font-family: 'Special Elite', monospace;
    font-size: 0.8rem;
    color: var(--pp-ink-soft);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
  }
  .tour-row {
    display: grid;
    grid-template-columns: 130px 1fr 130px;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0.4rem;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
    font-family: 'Special Elite', monospace;
    transition: background 0.15s ease, transform 0.15s ease;
    cursor: none;
  }
  @media (max-width: 640px) {
    .tour-row { grid-template-columns: 1fr 100px; gap: 0.5rem 0.8rem; }
    .tour-date { grid-column: 1; }
    .tour-status { grid-column: 2; grid-row: 1; text-align: right; }
    .tour-where { grid-column: 1 / -1; font-size: 0.85rem; }
  }
  .tour-row:last-child { border-bottom: none; }
  .tour-row:hover { background: rgba(0,0,0,0.06); transform: translateX(4px); }
  .tour-date {
    font-weight: bold;
    color: var(--pp-paper-shadow);
    font-size: clamp(0.9rem, 2.2vw, 1.05rem);
    letter-spacing: 0.1em;
  }
  .tour-where { color: var(--pp-ink); font-size: clamp(0.85rem, 2vw, 1rem); }
  .tour-where strong { color: var(--pp-paper-shadow); }
  .tour-status {
    text-align: right;
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }
  .tour-status--sold  { color: #c8281a; }
  .tour-status--few   { color: #c87a1a; }
  .tour-status--avail { color: #2a5a1a; }
  .tour-status--tba   { color: var(--pp-ink-soft); opacity: 0.65; }

  /* ===== BIO PANEL ===== */
  .bio-panel {
    max-width: 800px;
    margin: 0 auto;
    background:
      repeating-linear-gradient(90deg, transparent 0, transparent 28px, var(--pp-paper-mark) 28px, var(--pp-paper-mark) 29px),
      linear-gradient(180deg, var(--pp-paper) 0%, var(--pp-paper-2) 100%);
    color: var(--pp-ink);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 2px solid var(--pp-ink);
    box-shadow: 0 12px 28px rgba(0,0,0,0.6);
    transform: rotate(0.4deg);
    position: relative;
    font-family: 'Special Elite', monospace;
  }
  .bio-panel p {
    font-size: clamp(0.95rem, 2.1vw, 1.1rem);
    line-height: 1.7;
    color: var(--pp-ink);
    margin-bottom: 1rem;
  }
  .bio-panel p strong { color: var(--pp-accent-2); }
  .bio-panel p em { color: var(--pp-paper-shadow); font-style: italic; }
  .bio-panel::before,
  .bio-panel::after {
    content: '';
    position: absolute;
    width: 100px; height: 24px;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 8px, transparent 8px, transparent 16px),
      linear-gradient(180deg, var(--pp-tape-1), var(--pp-tape-2));
    opacity: 0.85;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  }
  .bio-panel::before { top: -10px; left: 16%; transform: rotate(-6deg); }
  .bio-panel::after  { bottom: -10px; right: 18%; transform: rotate(4deg); }

  /* ===== STICKER TAGS ===== */
  .sticker-tags {
    margin-top: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
  }
  .sticker-patch {
    display: inline-block;
    padding: 0.4rem 1rem;
    font-family: 'Special Elite', monospace;
    font-size: 0.85rem;
    font-weight: bold;
    color: var(--pp-paper);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--pp-paper-shadow);
    border: 1px dashed var(--pp-paper);
    box-shadow: 0 2px 0 var(--pp-ink), 0 4px 8px rgba(0,0,0,0.5);
    transform: rotate(var(--rot, -2deg));
    transition: transform 0.15s ease;
  }
  .sticker-patch:nth-child(3n) { --rot: 3deg; background: var(--pp-accent-2); }
  .sticker-patch:nth-child(3n+1) { --rot: -3deg; }
  .sticker-patch:nth-child(5n) { background: var(--pp-ink-soft); }
  .sticker-patch:hover { transform: rotate(0deg) scale(1.08); }

  /* ===== QUOTE STUBS ===== */
  .stub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.6rem;
    max-width: 1000px;
    margin: 0 auto;
  }
  .stub {
    background:
      repeating-linear-gradient(90deg, transparent 0, transparent 18px, var(--pp-paper-mark) 18px, var(--pp-paper-mark) 19px),
      linear-gradient(180deg, var(--pp-paper) 0%, var(--pp-paper-2) 100%);
    color: var(--pp-ink);
    padding: 1.2rem 1.4rem;
    font-family: 'Special Elite', monospace;
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.5;
    border: 1px solid var(--pp-ink);
    box-shadow: 0 6px 14px rgba(0,0,0,0.5);
    position: relative;
    transition: transform 0.15s ease;
  }
  .stub:nth-child(1) { transform: rotate(-2deg); }
  .stub:nth-child(2) { transform: rotate(1.5deg); }
  .stub:nth-child(3) { transform: rotate(-0.8deg); }
  .stub:nth-child(4) { transform: rotate(1.2deg); }
  .stub:hover { transform: rotate(0) scale(1.03); z-index: 2; }
  .stub::before {
    content: attr(data-label);
    position: absolute;
    top: -8px; left: 12px;
    background: var(--pp-accent-2);
    color: var(--pp-paper);
    padding: 2px 8px;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    border: 1px solid var(--pp-ink);
  }

  /* ===== LINEUP POLAROIDS ===== */
  .lineup-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1rem, 3vw, 2rem);
    justify-content: center;
    max-width: 1100px;
    margin: 0 auto;
  }
  .polaroid {
    background: var(--pp-paper);
    padding: 0.7rem 0.7rem 2rem;
    width: clamp(140px, 22vw, 200px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.4);
    transform: rotate(var(--rot, -3deg));
    transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s linear 0.2s;
    position: relative;
    color: var(--pp-ink);
  }
  .polaroid:nth-child(2n) { --rot: 2deg; }
  .polaroid:nth-child(3n) { --rot: -2deg; }
  .polaroid:nth-child(5n) { --rot: 4deg; }
  .polaroid:hover {
    transform: rotate(0deg) scale(1.05);
    box-shadow: 0 14px 28px rgba(0,0,0,0.7), 0 0 30px var(--pp-stamp-glow), 0 0 0 1px rgba(0,0,0,0.5);
    z-index: 10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .polaroid-photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #2a1810 0%, #0a0606 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(244, 232, 192, 0.4);
    font-family: 'Cinzel Decorative', serif;
    font-size: 3rem;
    overflow: hidden;
    position: relative;
  }
  .polaroid-photo::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, transparent 0px, transparent 2px, rgba(255,255,255,0.04) 2px, rgba(255,255,255,0.04) 3px);
    mix-blend-mode: overlay;
  }
  .polaroid-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }
  .polaroid-caption {
    margin-top: 0.6rem;
    text-align: center;
    font-family: 'Special Elite', monospace;
    font-size: 0.95rem;
    color: var(--pp-ink);
    line-height: 1.15;
  }
  .polaroid-caption small {
    display: block;
    font-size: 0.7rem;
    color: var(--pp-ink-soft);
    letter-spacing: 0.12em;
    margin-top: 2px;
    text-transform: uppercase;
  }
  .polaroid::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
    width: 70px;
    height: 18px;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 6px, transparent 6px, transparent 12px),
      linear-gradient(180deg, var(--pp-tape-1), var(--pp-tape-2));
    opacity: 0.85;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
  }

  /* ===== STAGE FRAME (wraps the existing music player) ===== */
  .stage-frame {
    max-width: 1200px;
    margin: 0 auto;
    border: 3px solid var(--pp-ink);
    background: var(--pp-ink);
    box-shadow: 0 0 0 1px var(--pp-accent), 0 0 40px var(--pp-stamp-glow), 0 20px 40px rgba(0,0,0,0.7);
  }
  .stage-frame-head {
    background: linear-gradient(180deg, var(--pp-accent-2) 0%, var(--pp-paper-shadow) 100%);
    color: var(--pp-paper);
    padding: 0.7rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-size: clamp(0.8rem, 2vw, 1.05rem);
    text-shadow: 0 2px 0 var(--pp-ink);
  }
  .stage-frame-head .live-dot { background: var(--pp-accent-3); box-shadow: 0 0 14px var(--pp-accent-3); }
  .stage-frame-head small {
    font-family: 'Special Elite', monospace;
    font-weight: normal;
    font-size: 0.7em;
    opacity: 0.85;
    letter-spacing: 0.3em;
  }

  /* ===== MERCH PRICE TAGS (gallery wrapper) ===== */
  .merch-board { position: relative; overflow: visible; }
  .price-tag {
    position: absolute;
    z-index: 5;
    padding: 0.5rem 0.9rem 0.5rem 1.2rem;
    background: linear-gradient(180deg, var(--pp-paper) 0%, var(--pp-paper-2) 100%);
    color: var(--pp-ink);
    font-family: 'Special Elite', monospace;
    font-weight: bold;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 2px solid var(--pp-ink);
    box-shadow: 0 4px 0 var(--pp-paper-shadow), 0 6px 14px rgba(0,0,0,0.5);
    clip-path: polygon(0.7rem 0, 100% 0, 100% 100%, 0.7rem 100%, 0 50%);
    transition: transform 0.15s ease;
    pointer-events: none;
  }
  .price-tag::before {
    content: '';
    position: absolute;
    left: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pp-ink);
  }
  .tag-1of1 {
    top: 12%; left: 8%;
    transform: rotate(-14deg);
    background: linear-gradient(180deg, var(--pp-tape-1) 0%, var(--pp-tape-2) 100%);
    font-size: 1rem;
  }
  .tag-priceless {
    top: 48%; right: 6%;
    transform: rotate(10deg);
    font-size: 1.6rem;
    padding: 0.5rem 1.1rem 0.5rem 1.4rem;
    background: linear-gradient(180deg, var(--pp-accent-2) 0%, var(--pp-paper-shadow) 100%);
    color: var(--pp-paper);
    border-color: var(--pp-paper);
    box-shadow: 0 4px 0 var(--pp-ink), 0 6px 14px rgba(0,0,0,0.6);
    letter-spacing: 0.05em;
  }
  .tag-noresale {
    bottom: 10%; left: 5%;
    transform: rotate(-7deg);
    background: linear-gradient(180deg, var(--pp-ink) 0%, var(--pp-paper-shadow) 100%);
    color: var(--pp-paper);
    border-color: var(--pp-paper);
    box-shadow: 0 4px 0 var(--pp-accent-2), 0 6px 14px rgba(0,0,0,0.6);
  }
  @media (max-width: 640px) {
    .tag-1of1     { top: 4%; left: 2%; font-size: 0.85rem; }
    .tag-priceless { top: auto; bottom: 4%; right: 2%; font-size: 1.2rem; }
    .tag-noresale { display: none; }
  }

  /* ===== WANTED CARDS ===== */
  .wanted-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  .wanted {
    background:
      repeating-linear-gradient(45deg, transparent 0, transparent 4px, var(--pp-paper-mark) 4px, var(--pp-paper-mark) 5px),
      linear-gradient(180deg, var(--pp-paper) 0%, var(--pp-paper-2) 100%);
    color: var(--pp-ink);
    padding: 1rem;
    border: 3px solid var(--pp-ink);
    box-shadow: 0 8px 18px rgba(0,0,0,0.6);
    text-align: center;
    transform: rotate(var(--rot, -1deg));
    font-family: 'Special Elite', monospace;
    transition: transform 0.15s ease;
  }
  .wanted:nth-child(2n) { --rot: 1deg; }
  .wanted:nth-child(3n) { --rot: -1.5deg; }
  .wanted:hover { transform: rotate(0deg) scale(1.04); z-index: 2; }
  .wanted-head {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.1rem;
    color: var(--pp-accent-2);
    letter-spacing: 0.25em;
    border-bottom: 2px dashed var(--pp-paper-shadow);
    padding-bottom: 0.4rem;
    margin-bottom: 0.6rem;
    text-transform: uppercase;
  }
  .wanted-name {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.4rem;
    color: var(--pp-ink);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .wanted-role {
    font-size: 0.85rem;
    color: var(--pp-ink-soft);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
  }
  .wanted-desc { font-size: 0.95rem; line-height: 1.4; color: var(--pp-ink); }
  .wanted.traitor {
    border-color: var(--pp-accent-2);
    box-shadow: 0 8px 18px var(--pp-stamp-glow);
  }
  .wanted-stamp {
    display: inline-block;
    margin-top: 0.6rem;
    padding: 0.2rem 0.7rem;
    border: 2px solid var(--pp-accent-2);
    color: var(--pp-accent-2);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: rotate(-4deg);
  }

  /* ===== CASE FILE ===== */
  .case-file {
    max-width: 900px;
    margin: 0 auto;
    background: linear-gradient(180deg, #c8a868 0%, #a08440 100%);
    border: 2px solid #4a3010;
    box-shadow:
      0 12px 28px rgba(0,0,0,0.6),
      inset 0 0 0 8px #b89858,
      inset 0 0 0 10px #4a3010;
    padding: 0;
    overflow: hidden;
  }
  .case-file summary {
    list-style: none;
    padding: 1.5rem 1.5rem;
    cursor: none;
    background: rgba(74, 48, 16, 0.1);
    border-bottom: 2px dashed #4a3010;
    text-align: center;
    transition: background 0.15s ease;
  }
  .case-file summary::-webkit-details-marker { display: none; }
  .case-file summary:hover { background: rgba(74, 48, 16, 0.2); }
  .case-file-label {
    display: inline-block;
    padding: 0.4rem 1rem;
    border: 3px double var(--pp-accent-2);
    color: var(--pp-accent-2);
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1.2rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transform: rotate(-3deg);
    background: rgba(74, 8, 8, 0.05);
    text-shadow: 0 0 8px var(--pp-stamp-glow);
  }
  .case-file-sub {
    display: block;
    margin-top: 0.6rem;
    font-family: 'Special Elite', monospace;
    color: #4a3010;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .case-file[open] summary .case-file-sub::after { content: ' — open'; }
  .case-file-body {
    padding: 2rem clamp(1rem, 4vw, 2rem);
    background: var(--pp-paper);
    color: var(--pp-ink);
    font-family: 'Special Elite', monospace;
  }
  .case-file-body p {
    font-size: clamp(0.95rem, 2vw, 1.1rem);
    line-height: 1.7;
    margin-bottom: 1rem;
  }
  .case-file-body p strong { color: var(--pp-accent-2); }
  .case-file-body p em { color: var(--pp-paper-shadow); font-style: italic; }

  /* ===== SPRAY-PAINT QUOTE ===== */
  .spray-quote {
    max-width: 900px;
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
    background:
      repeating-linear-gradient(0deg, transparent 0, transparent 28px, rgba(255, 255, 255, 0.02) 28px, rgba(255, 255, 255, 0.02) 29px),
      linear-gradient(180deg, var(--pp-bg-mid) 0%, var(--pp-bg-deep) 100%);
    border: 1px solid var(--pp-paper-shadow);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  .spray-quote::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at 20% 30%, var(--pp-grit-1), transparent 25%),
      radial-gradient(ellipse at 80% 70%, var(--pp-grit-2), transparent 25%);
    pointer-events: none;
  }
  .spray-quote q {
    display: block;
    font-family: 'Cinzel Decorative', serif;
    font-style: italic;
    font-weight: 900;
    font-size: clamp(1.3rem, 4vw, 2.4rem);
    line-height: 1.3;
    color: var(--pp-accent);
    text-shadow:
      0 0 18px var(--pp-stamp-glow),
      2px 2px 0 var(--pp-ink),
      0 0 60px var(--pp-paper-shadow);
    transform: rotate(-1.2deg);
    quotes: none;
  }
  .spray-quote q::before,
  .spray-quote q::after { content: '"'; opacity: 0.6; }
  .spray-quote cite {
    display: block;
    margin-top: 1rem;
    font-family: 'Metal Mania', serif;
    font-style: normal;
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    color: var(--pp-accent-3);
    letter-spacing: 0.1em;
    text-shadow: 0 0 18px var(--pp-stamp-glow);
  }

  /* ===== PHOTO BOARD ===== */
  .pit-board {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
    background:
      repeating-linear-gradient(90deg, transparent 0, transparent 14px, rgba(0,0,0,0.04) 14px, rgba(0,0,0,0.04) 15px),
      linear-gradient(180deg, #3a2818 0%, #1a1004 100%);
    border: 4px solid var(--pp-ink);
    box-shadow: inset 0 0 60px rgba(0,0,0,0.8), 0 10px 24px rgba(0,0,0,0.6);
    position: relative;
  }
  .pit-cta {
    display: block;
    max-width: 320px;
    margin: 0 auto;
    background: transparent;
    border: none;
    padding: 0;
    cursor: none;
    transform: rotate(-2deg);
    transition: transform 0.2s ease;
  }
  .pit-cta:hover { transform: rotate(0deg) scale(1.04); }
  .pit-cta .polaroid { width: 100%; transform: none; }
  .pit-cta .polaroid:hover { transform: none; }

  /* ===== BACKSTAGE PASS ===== */
  .backstage-pass {
    max-width: 520px;
    margin: 0 auto;
    background: linear-gradient(180deg, var(--pp-ink) 0%, var(--pp-paper-shadow) 100%);
    border: 3px solid var(--pp-accent-3);
    padding: 0;
    box-shadow:
      0 0 0 1px var(--pp-ink),
      0 0 40px var(--pp-stamp-glow),
      0 18px 36px rgba(0,0,0,0.7);
    position: relative;
    transform: rotate(-1.5deg);
  }
  .backstage-pass::before {
    content: '';
    position: absolute;
    top: 12px; left: 50%;
    transform: translateX(-50%);
    width: 48px; height: 12px;
    background: var(--pp-bg-deep);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px var(--pp-stamp-glow);
  }
  .pass-head {
    background: linear-gradient(90deg, var(--pp-accent-3) 0%, var(--pp-accent) 100%);
    color: var(--pp-ink);
    padding: 2rem 1rem 0.8rem;
    text-align: center;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    text-shadow: 1px 1px 0 var(--pp-tape-1);
  }
  .pass-body {
    padding: 1.5rem 1.5rem 0.5rem;
    text-align: center;
    color: var(--pp-paper);
  }
  .pass-name {
    font-family: 'Metal Mania', serif;
    font-size: clamp(2.4rem, 7vw, 4rem);
    color: var(--pp-accent);
    text-shadow: 0 0 24px var(--pp-stamp-glow), 2px 2px 0 var(--pp-ink);
    line-height: 1;
    margin-bottom: 0.4rem;
    letter-spacing: 0.02em;
  }
  .pass-role {
    font-family: 'Special Elite', monospace;
    font-size: 0.95rem;
    color: var(--pp-accent-soft);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .pass-cta {
    display: inline-block;
    padding: 0.9rem 2.2rem;
    background: linear-gradient(180deg, var(--pp-accent-3) 0%, var(--pp-accent) 100%);
    color: var(--pp-ink);
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid var(--pp-ink);
    box-shadow: 0 4px 0 var(--pp-paper-shadow), 0 8px 16px rgba(0,0,0,0.6);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }
  .pass-cta:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 0 var(--pp-paper-shadow), 0 12px 22px rgba(0,0,0,0.7);
  }
  .pass-cta:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 var(--pp-paper-shadow), 0 4px 8px rgba(0,0,0,0.5);
  }
  .pass-barcode {
    margin: 1.5rem auto 1rem;
    display: block;
    width: 80%;
    height: 36px;
    background: repeating-linear-gradient(90deg, var(--pp-paper) 0 2px, transparent 2px 3px, var(--pp-paper) 3px 7px, transparent 7px 9px, var(--pp-paper) 9px 10px, transparent 10px 14px);
  }
  .pass-barcode-num {
    display: block;
    text-align: center;
    font-family: 'Special Elite', monospace;
    font-size: 0.7rem;
    color: var(--pp-accent-soft);
    letter-spacing: 0.35em;
    padding-bottom: 1rem;
  }

  /* ===== SCROLL-IN ANIMATIONS ===== */
  .reveal-stamp {
    opacity: 0;
    transform: scale(1.5) rotate(-15deg);
    transition: opacity 0.3s ease;
  }
  .reveal-stamp.is-visible {
    animation: stampDown 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
  @keyframes stampDown {
    0%   { opacity: 0; transform: scale(2.4) rotate(-25deg); }
    60%  { opacity: 1; transform: scale(0.92) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(-1deg); }
  }
  .reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .reveal-up.is-visible { opacity: 1; transform: translateY(0); }
  .reveal-tilt {
    opacity: 0;
    transform: translateY(40px) rotate(-6deg);
    transition: opacity 0.65s ease, transform 0.65s ease;
  }
  .reveal-tilt.is-visible {
    opacity: 1;
    transform: translateY(0) rotate(var(--rot, -1deg));
  }

  /* mobile pass tweaks */
  @media (max-width: 540px) {
    .pass-head { padding-top: 1.6rem; }
    .backstage-pass { transform: rotate(-1deg); }
  }


  /* ============================================================
     SCENE REQUEST — side tab on each character page + shared modal
     The tab lives INSIDE each character page so it inherits the
     character's --pp-* palette automatically. The modal sits in
     the body and is shared across all characters; JS just swaps
     the character name label when opening.
     ============================================================ */
  .scene-tab {
    position: fixed;
    right: 0;
    top: 38%;
    transform: translateY(-50%);
    z-index: 50;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 1.3rem 0.55rem 1.3rem 0.7rem;
    background: linear-gradient(180deg, var(--pp-accent) 0%, var(--pp-accent-2) 100%);
    color: var(--pp-paper);
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    border: 2px solid var(--pp-ink);
    border-right: none;
    box-shadow: -4px 0 14px rgba(0,0,0,0.55), inset 0 0 12px rgba(0,0,0,0.35);
    text-shadow: 0 1px 0 var(--pp-ink);
    cursor: none;
    transition: transform 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease;
  }
  .scene-tab:hover {
    transform: translateY(-50%) translateX(-5px);
    padding-left: 0.95rem;
    box-shadow: -7px 0 18px rgba(0,0,0,0.65), inset 0 0 14px rgba(0,0,0,0.4);
  }
  /* on mobile, anchor to bottom-right corner so it doesn't crowd content */
  @media (max-width: 640px) {
    .scene-tab {
      top: auto;
      bottom: 5rem;
      transform: none;
      padding: 0.9rem 0.45rem;
      font-size: 0.7rem;
      letter-spacing: 0.18em;
    }
    .scene-tab:hover { transform: translateX(-4px); }
  }

  /* ===== SHARED MODAL ===== */
  .scene-modal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    background: rgba(0,0,0,0.85);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
  }
  .scene-modal.is-open {
    display: flex;
    animation: sceneModalFade 0.2s ease;
  }
  @keyframes sceneModalFade { from { opacity: 0; } to { opacity: 1; } }

  .scene-modal-panel {
    background:
      repeating-linear-gradient(90deg, transparent 0, transparent 26px, rgba(74,8,8,0.05) 26px, rgba(74,8,8,0.05) 27px),
      linear-gradient(180deg, #f4e8c0 0%, #d4c098 100%);
    color: #1a0606;
    border: 3px solid #1a0606;
    box-shadow:
      0 0 0 1px #ff5a1f,
      0 10px 0 #4a0808,
      0 0 50px rgba(255,90,31,0.35),
      0 18px 40px rgba(0,0,0,0.7);
    padding: clamp(1.5rem, 4vw, 2.2rem);
    max-width: 540px;
    width: 100%;
    position: relative;
    transform: rotate(-0.4deg);
    font-family: 'Special Elite', monospace;
    max-height: 90vh;
    overflow-y: auto;
    animation: sceneModalSlide 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes sceneModalSlide {
    from { transform: rotate(-0.4deg) translateY(40px); opacity: 0; }
    to   { transform: rotate(-0.4deg) translateY(0); opacity: 1; }
  }
  /* tape strip at the top of the modal */
  .scene-modal-panel::before {
    content: '';
    position: absolute;
    top: -10px; left: 22%;
    width: 110px; height: 22px;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,0.18) 0, rgba(255,255,255,0.18) 8px, transparent 8px, transparent 16px),
      linear-gradient(180deg, #ffd86a, #d49a3a);
    opacity: 0.85;
    transform: rotate(-5deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    pointer-events: none;
  }

  .scene-modal-close {
    position: absolute;
    top: 0.6rem; right: 0.6rem;
    width: 36px; height: 36px;
    background: transparent;
    border: 2px solid #1a0606;
    color: #1a0606;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1rem;
    cursor: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
    z-index: 2;
  }
  .scene-modal-close:hover { background: #1a0606; color: #f4e8c0; }

  .scene-modal-h {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    color: #c8281a;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 0.4rem;
    text-shadow: 2px 2px 0 #4a0808;
  }
  .scene-modal-sub {
    font-family: 'Special Elite', monospace;
    font-size: 0.85rem;
    color: #6a3408;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px dashed #4a0808;
  }
  .scene-modal-sub strong {
    color: #1a0606;
    font-size: 1.1em;
    letter-spacing: 0.1em;
  }

  .scene-row { margin-bottom: 1rem; }
  .scene-row label {
    display: block;
    font-family: 'Special Elite', monospace;
    font-size: 0.8rem;
    color: #4a0808;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
    font-weight: bold;
  }
  .scene-row label span { font-weight: normal; text-transform: none; letter-spacing: normal; }
  .scene-row input,
  .scene-row textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-family: 'Special Elite', monospace;
    font-size: 1rem;
    background: rgba(255,255,255,0.45);
    border: 2px solid #1a0606;
    color: #1a0606;
    border-radius: 0;
    box-sizing: border-box;
  }
  .scene-row textarea { min-height: 110px; resize: vertical; }
  .scene-row input:focus,
  .scene-row textarea:focus {
    outline: none;
    background: rgba(255,255,255,0.7);
    box-shadow: 0 0 0 3px rgba(200, 40, 26, 0.3);
  }
  .scene-row input::placeholder,
  .scene-row textarea::placeholder { color: rgba(74, 8, 8, 0.45); }

  .scene-submit {
    width: 100%;
    padding: 0.95rem;
    background: linear-gradient(180deg, #ff5a1f 0%, #c8281a 100%);
    color: #f4e8c0;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    border: 2px solid #1a0606;
    box-shadow: 0 4px 0 #4a0808, 0 8px 16px rgba(0,0,0,0.5);
    cursor: none;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    margin-top: 0.5rem;
    text-shadow: 1px 1px 0 #4a0808;
  }
  .scene-submit:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #4a0808, 0 10px 22px rgba(0,0,0,0.6);
  }
  .scene-submit:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 2px 0 #4a0808, 0 4px 8px rgba(0,0,0,0.5);
  }
  .scene-submit:disabled { opacity: 0.6; cursor: wait; }

  .scene-status {
    margin-top: 1rem;
    text-align: center;
    font-family: 'Special Elite', monospace;
    font-size: 0.9rem;
    min-height: 1.2em;
    letter-spacing: 0.05em;
  }
  .scene-status.success { color: #2a5a1a; font-weight: bold; }
  .scene-status.error { color: #c8281a; }

  /* ============================================================
     DATING PROFILES
     A clean mobile-app dating-profile aesthetic — soft cream
     background, rounded cards, Hinge-style prompt/answer layout,
     photo grid. Each profile uses the character's --pp-accent for
     pops of color so it still feels themed but distinctly cleaner
     than the heavy-metal poster overlay system.
     ============================================================ */
  .dating-page {
    position: fixed; inset: 0;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    /* Dark, moody dating-app base tinted by each profile's accent colors.
       The big radial washes give depth; the animated .dating-fx blobs on top
       make it feel alive. Each profile sets --dp-accent / --dp-accent-2. */
    --dp-accent: #ff5a1f;
    --dp-accent-2: #c8281a;
    --dp-ink: #f4ecff;
    --dp-ink-dim: #b9a9d6;
    background:
      radial-gradient(135% 100% at 12% -10%, color-mix(in srgb, var(--dp-accent) 42%, transparent) 0%, transparent 48%),
      radial-gradient(135% 110% at 105% 108%, color-mix(in srgb, var(--dp-accent-2) 44%, transparent) 0%, transparent 52%),
      linear-gradient(165deg, #160a22 0%, #0c0716 55%, #07040f 100%);
    background-attachment: scroll;
    color: var(--dp-ink);
    font-family: 'Outfit', sans-serif;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0.55s;
  }
  .dating-page.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 0s;
  }
  /* Once the slide-up finishes we drop the transform entirely. A lingering
     transform (even translateY(0)) makes this element the containing block
     for position:fixed children, which would pin .dating-fx to the page
     instead of the viewport and make the animated background scroll away.
     With no transform, .dating-fx pins to the screen and stays visible. */
  .dating-page.active.settled {
    transform: none;
  }
  .dating-page[aria-hidden="true"] { content-visibility: auto; }
  .dating-page[aria-hidden="true"] *,
  .dating-page[aria-hidden="true"] *::before,
  .dating-page[aria-hidden="true"] *::after { animation-play-state: paused !important; }

  /* ---- Animated ambient background layer (sits behind the content) ----
     Pure transform/opacity animations = GPU-friendly. pointer-events:none so
     it never blocks taps. Lives inside each .dating-page, behind .dating-wrap. */
  .dating-fx {
    position: fixed; inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .dating-fx .blob {
    position: absolute;
    width: 50vmax; height: 50vmax;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    mix-blend-mode: screen;
    will-change: transform;
  }
  .dating-fx .blob-1 {
    top: -16vmax; left: -12vmax;
    background: radial-gradient(circle at 30% 30%, var(--dp-accent), transparent 70%);
    animation: blobDrift1 26s ease-in-out infinite;
  }
  .dating-fx .blob-2 {
    bottom: -18vmax; right: -14vmax;
    background: radial-gradient(circle at 70% 70%, var(--dp-accent-2), transparent 70%);
    animation: blobDrift2 32s ease-in-out infinite;
  }
  .dating-fx .blob-3 {
    top: 35%; left: 40%;
    width: 36vmax; height: 36vmax;
    background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--dp-accent) 55%, #fff), transparent 70%);
    opacity: 0.4;
    animation: blobDrift3 38s ease-in-out infinite;
  }
  @keyframes blobDrift1 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    33%     { transform: translate3d(8vmax,6vmax,0) scale(1.12); }
    66%     { transform: translate3d(3vmax,12vmax,0) scale(0.95); }
  }
  @keyframes blobDrift2 {
    0%,100% { transform: translate3d(0,0,0) scale(1); }
    33%     { transform: translate3d(-9vmax,-5vmax,0) scale(1.1); }
    66%     { transform: translate3d(-4vmax,-11vmax,0) scale(0.92); }
  }
  @keyframes blobDrift3 {
    0%,100% { transform: translate3d(-50%,-50%,0) scale(1); }
    50%     { transform: translate3d(-42%,-58%,0) scale(1.18); }
  }

  /* subtle starfield grain over the FX so dark areas aren't flat */
  .dating-fx::after {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px);
    background-size: 64px 64px;
    opacity: 0.06;
  }

  /* Floating sparkles/hearts drifting up the page */
  .dating-fx .spark {
    position: absolute;
    bottom: -40px;
    font-size: 18px;
    opacity: 0;
    color: color-mix(in srgb, var(--dp-accent) 60%, #fff);
    text-shadow: 0 0 8px color-mix(in srgb, var(--dp-accent) 70%, transparent);
    will-change: transform, opacity;
    animation: sparkRise linear infinite;
  }
  @keyframes sparkRise {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.8; }
    90%  { opacity: 0.8; }
    100% { transform: translateY(-112vh) translateX(var(--spark-drift, 20px)) rotate(220deg); opacity: 0; }
  }

  /* Reactive parallax: JS sets --px / --py from pointer position. */
  .dating-fx { transform: translate3d(calc(var(--px,0) * 1px), calc(var(--py,0) * 1px), 0); transition: transform 0.4s ease-out; }

  /* Make sure the actual content sits above the FX layer */
  .dating-wrap { position: relative; z-index: 1; }

  /* Cards rise + fade in as they scroll into view (JS adds .in-view).
     IMPORTANT: the hidden start-state only applies when JS has explicitly
     "armed" the element (.reveal-armed). That way, if the IntersectionObserver
     never fires (layout race, content-visibility, old browser), content stays
     visible by default instead of getting stuck at opacity:0. */
  .dating-reveal.reveal-armed {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
  }
  .dating-reveal.reveal-armed.in-view { opacity: 1; transform: translateY(0); }

  @media (prefers-reduced-motion: reduce) {
    .dating-fx .blob, .dating-fx .spark { animation: none !important; }
    .dating-fx .spark { display: none; }
    .dating-fx { transition: none; }
    .dating-reveal.reveal-armed { opacity: 1; transform: none; transition: none; }
  }

  .dating-close {
    position: fixed;
    top: 1rem; right: 1rem;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 2px solid #2a1a14;
    color: #2a1a14;
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .dating-close:hover { transform: scale(1.08); background: #fff; }

  .dating-wrap {
    max-width: 540px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.5rem);
    padding-bottom: 4rem;
  }

  /* ===== HERO CARD ===== */
  .dating-hero {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-top: 1rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #2a1810 0%, #0a0606 100%);
  }
  .dating-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .dating-hero-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 2rem 1.4rem 1.4rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%);
    color: #fff;
  }
  .dating-hero-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: clamp(2rem, 7vw, 3rem);
    line-height: 1;
    margin: 0;
    letter-spacing: -0.01em;
  }
  .dating-hero-name span {
    font-weight: 300;
    opacity: 0.85;
  }
  .dating-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.6rem;
    font-size: 0.95rem;
    opacity: 0.92;
  }
  .dating-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .dating-verified {
    position: absolute;
    top: 1rem; left: 1rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255,255,255,0.95);
    color: var(--dp-accent, #ff5a1f);
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }
  .dating-verified::before { content: '✓ '; }

  /* ===== TAGLINE ===== */
  .dating-tagline {
    background: linear-gradient(135deg, rgba(255,255,255,0.09), rgba(255,255,255,0.03));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 20px;
    padding: 1.2rem 1.4rem;
    margin-top: 1rem;
    font-size: clamp(1.05rem, 2.5vw, 1.2rem);
    line-height: 1.4;
    font-style: italic;
    color: var(--dp-ink);
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
    border-left: 4px solid var(--dp-accent, #ff5a1f);
  }

  /* ===== ROMANCE TYPE TAGS ===== */
  .dating-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 20px;
    padding: 1.4rem;
    margin-top: 1rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
    overflow: hidden;
  }
  /* faint accent glow bleeding in from the top edge of each card */
  .dating-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--dp-accent, #ff5a1f), transparent);
    opacity: 0.7;
  }
  .dating-card-head {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--dp-ink-dim);
    margin: 0 0 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .dating-card-head::before {
    content: '';
    display: inline-block;
    width: 18px; height: 2px;
    background: var(--dp-accent, #ff5a1f);
    box-shadow: 0 0 8px var(--dp-accent, #ff5a1f);
  }

  .romance-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
  }
  .romance-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1.5px solid;
    background: rgba(255,255,255,0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .romance-tag:hover { transform: translateY(-2px); }
  /* tag color variants — brightened for dark glass */
  .rt-toxic    { border-color: #ff6a52; color: #ffb5a8; background: rgba(255,90,40,0.14); }
  .rt-angst    { border-color: #a886e0; color: #d7c4ff; background: rgba(140,100,220,0.16); }
  .rt-baggage  { border-color: #d8924a; color: #f0c79a; background: rgba(216,146,74,0.14); }
  .rt-complicated { border-color: #f0aa4a; color: #ffd79a; background: rgba(240,170,74,0.14); }
  .rt-soft     { border-color: #4ad0aa; color: #a8f0dd; background: rgba(74,208,170,0.14); }
  .rt-worth    { border-color: #f0c84a; color: #ffe79a; background: rgba(240,200,74,0.16); }
  .rt-himbo    { border-color: #5a9aff; color: #aac8ff; background: rgba(90,154,255,0.14); }
  .rt-goodboy  { border-color: #6ad06a; color: #b5f0b5; background: rgba(106,208,106,0.14); }

  /* ===== ABOUT ME — paragraph cards ===== */
  .dating-bio p {
    margin: 0 0 0.8rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #e6dcf5;
  }
  .dating-bio p:last-child { margin-bottom: 0; }
  .dating-bio p strong { color: var(--dp-accent, #ff5a1f); }

  /* ===== PROMPT CARDS (Hinge style) ===== */
  .dating-prompt {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 20px;
    padding: 1.4rem;
    margin-top: 1rem;
    box-shadow: 0 8px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.08);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .dating-prompt:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 38px rgba(0,0,0,0.4), inset 0 0 0 1px color-mix(in srgb, var(--dp-accent) 40%, rgba(255,255,255,0.08));
  }
  .dating-prompt-q {
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--dp-ink-dim);
    margin: 0 0 0.5rem;
    line-height: 1.4;
  }
  .dating-prompt-a {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: clamp(1.1rem, 3vw, 1.35rem);
    color: var(--dp-ink);
    line-height: 1.4;
    margin: 0;
  }
  .dating-prompt-a em {
    font-weight: 500;
    color: var(--dp-accent, #ff5a1f);
    font-style: italic;
  }

  /* ===== INLINE PROFILE PHOTO (mid-scroll) ===== */
  .dating-photo {
    margin-top: 1rem;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, #2a1810 0%, #0a0606 100%);
    position: relative;
  }
  .dating-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .dating-photo-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 1rem 1.2rem;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,0.75));
    color: #fff;
    font-size: 0.92rem;
    font-style: italic;
    line-height: 1.35;
  }

  /* ===== QUICK STATS ===== */
  .dating-stats { display: grid; gap: 0.6rem; }
  .dating-stat {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
    font-size: 0.95rem;
  }
  .dating-stat:last-child { border-bottom: none; }
  .dating-stat-key {
    font-weight: 600;
    color: var(--dp-ink-dim);
    letter-spacing: 0.04em;
  }
  .dating-stat-val { color: var(--dp-ink); }
  @media (max-width: 440px) {
    .dating-stat { grid-template-columns: 110px 1fr; gap: 0.5rem; font-size: 0.88rem; }
  }

  /* ===== PHOTO GRID (bottom) ===== */
  .dating-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem;
    margin-top: 1rem;
  }
  .dating-grid-item {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #2a1810 0%, #0a0606 100%);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .dating-grid-item:hover {
    transform: scale(1.04);
    box-shadow: 0 8px 22px rgba(0,0,0,0.45), 0 0 0 1px color-mix(in srgb, var(--dp-accent) 50%, transparent);
    z-index: 2;
  }
  .dating-grid-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ===== SWIPE RIGHT CTA ===== */
  .dating-cta {
    position: relative;
    display: block;
    margin: 1.5rem auto 0;
    max-width: 360px;
    padding: 1.1rem 1.5rem;
    background-image: linear-gradient(135deg, var(--dp-accent, #ff5a1f), var(--dp-accent-2, #c8281a));
    color: #fff;
    border-radius: 999px;
    text-decoration: none;
    text-align: center;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    overflow: hidden;
    box-shadow: 0 8px 28px color-mix(in srgb, var(--dp-accent) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    animation: ctaPulse 2.8s ease-in-out infinite;
  }
  /* moving sheen sweeping across the button */
  .dating-cta::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 50%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
    transform: skewX(-18deg);
    animation: ctaSheen 3.4s ease-in-out infinite;
  }
  @keyframes ctaSheen {
    0%, 100% { left: -60%; }
    55%, 80% { left: 120%; }
  }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 8px 28px color-mix(in srgb, var(--dp-accent) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,0.12); }
    50%      { box-shadow: 0 8px 38px color-mix(in srgb, var(--dp-accent) 70%, transparent), inset 0 0 0 1px rgba(255,255,255,0.12); }
  }
  .dating-cta:hover {
    transform: translateY(-2px) scale(1.015);
  }
  .dating-cta:active { transform: translateY(1px); }

  .dating-foot {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.82rem;
    color: var(--dp-ink-dim);
    letter-spacing: 0.05em;
  }

  /* ============================================================
     HOMEPAGE DATING PROFILE SECTION (the preview cards)
     ============================================================ */
  .dating-preview-section {
    max-width: 1100px;
    margin: 5rem auto 3rem;
    padding: 0 2rem;
    text-align: center;
  }
  .dating-preview-section .section-title {
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #fff;
    text-shadow: 0 0 24px rgba(255, 90, 220, 0.6), 0 0 60px rgba(255, 90, 220, 0.3);
    margin: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .dating-preview-section .section-sub {
    margin-top: 0.6rem;
    color: rgba(255,255,255,0.7);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
  .dating-preview-section .section-sub em { color: #ff9adc; font-style: normal; }

  .dating-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  .dating-preview-card {
    background: rgba(20, 14, 26, 0.6);
    border: 1px solid rgba(255, 90, 220, 0.3);
    border-radius: 22px;
    overflow: hidden;
    cursor: none;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
    text-align: left;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .dating-preview-card.locked { opacity: 0.6; }
  .dating-preview-card:not(.locked):hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(0,0,0,0.5), 0 0 40px rgba(255, 90, 220, 0.25);
    border-color: rgba(255, 90, 220, 0.7);
  }
  .dating-preview-photo {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, #2a1810 0%, #0a0606 100%);
    position: relative;
    overflow: hidden;
  }
  .dating-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .dating-preview-photo::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: linear-gradient(180deg, transparent, rgba(10,6,12,0.95));
    pointer-events: none;
  }
  .dating-preview-locked-stamp {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-12deg);
    padding: 0.5rem 1.2rem;
    background: rgba(20, 14, 26, 0.8);
    color: #ff9adc;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    border: 2px solid #ff9adc;
    font-size: 0.85rem;
    z-index: 2;
  }
  .dating-preview-body {
    padding: 0.6rem 1.2rem 1.2rem;
    position: relative;
    z-index: 1;
    margin-top: -3rem;
  }
  .dating-preview-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
  }
  .dating-preview-name span { font-weight: 300; opacity: 0.85; }
  .dating-preview-tag {
    color: rgba(255,255,255,0.78);
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.35;
    margin: 0.5rem 0 0.8rem;
  }
  .dating-preview-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1rem;
  }
  .dating-preview-types .romance-tag {
    font-size: 0.72rem;
    padding: 0.3rem 0.7rem;
    background: rgba(255,255,255,0.08);
  }
  .dating-preview-cta {
    display: block;
    padding: 0.7rem;
    text-align: center;
    background: linear-gradient(135deg, #ff5a8a, #c83a8c);
    color: #fff;
    text-decoration: none;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    transition: transform 0.12s ease;
  }
  .dating-preview-card:not(.locked):hover .dating-preview-cta { transform: scale(1.02); }
  .dating-preview-card.locked .dating-preview-cta {
    background: rgba(120, 100, 130, 0.5);
    cursor: not-allowed;
  }

  /* ============================================================
     DATING PROFILE SIDE TAB (mirror of scene-tab, on the left)
     ============================================================ */
  .dating-tab {
    position: fixed;
    left: 0;
    top: 38%;
    transform: translateY(-50%);
    z-index: 50;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 1.3rem 0.7rem 1.3rem 0.55rem;
    background: linear-gradient(180deg, #ff5a8a 0%, #c83a8c 100%);
    color: #fff;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: clamp(0.7rem, 1.5vw, 0.85rem);
    border: 2px solid #2a1a14;
    border-left: none;
    box-shadow: 4px 0 14px rgba(0,0,0,0.55), inset 0 0 12px rgba(0,0,0,0.35);
    text-shadow: 0 1px 0 rgba(0,0,0,0.3);
    cursor: none;
    transition: transform 0.2s ease, padding 0.2s ease, box-shadow 0.2s ease;
    transform-origin: left center;
  }
  .dating-tab:hover {
    transform: translateY(-50%) translateX(5px);
    padding-right: 0.95rem;
    box-shadow: 7px 0 18px rgba(0,0,0,0.65), inset 0 0 14px rgba(0,0,0,0.4);
  }
  @media (max-width: 640px) {
    .dating-tab {
      top: auto;
      bottom: 5rem;
      transform: none;
      padding: 0.9rem 0.45rem;
      font-size: 0.7rem;
      letter-spacing: 0.18em;
    }
    .dating-tab:hover { transform: translateX(4px); }
  }

  /* ============================================================
     FEATURED CARD ON HOMEPAGE + BROWSE-ALL BUTTON
     ============================================================ */
  .dating-featured-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }
  .dating-featured-card {
    max-width: 340px;
    width: 100%;
    position: relative;
  }
  .dating-featured-badge {
    position: absolute;
    top: 12px; right: 12px;
    z-index: 3;
    padding: 0.35rem 0.8rem;
    background: linear-gradient(135deg, #ff9adc, #c83a8c);
    color: #fff;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(200, 58, 140, 0.4);
  }
  .dating-browse-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem auto 0;
    padding: 0.85rem 1.8rem;
    background: transparent;
    color: #ff9adc;
    border: 2px solid #ff9adc;
    border-radius: 999px;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.08em;
    cursor: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
  }
  .dating-browse-all-btn:hover {
    background: linear-gradient(135deg, #ff5a8a, #c83a8c);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
  }

  /* ============================================================
     BROWSE-ALL OVERLAY PAGE (search + full grid)
     Inherits .dating-page base styling for the slide-up overlay.
     ============================================================ */
  .dating-browse-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 4rem) clamp(1rem, 3vw, 2rem) 4rem;
  }
  .dating-browse-title {
    text-align: center;
    font-family: 'Cinzel Decorative', serif;
    font-weight: 900;
    font-size: clamp(2rem, 6vw, 3.4rem);
    color: #ffd9f2;
    text-shadow: 0 0 28px color-mix(in srgb, var(--dp-accent) 70%, transparent), 0 0 48px color-mix(in srgb, var(--dp-accent-2) 50%, transparent);
    letter-spacing: 0.08em;
    margin: 0;
    text-transform: uppercase;
    animation: browseTitleGlow 4s ease-in-out infinite;
  }
  @keyframes browseTitleGlow {
    0%,100% { text-shadow: 0 0 22px color-mix(in srgb, var(--dp-accent) 60%, transparent), 0 0 40px color-mix(in srgb, var(--dp-accent-2) 40%, transparent); }
    50%     { text-shadow: 0 0 34px color-mix(in srgb, var(--dp-accent) 90%, transparent), 0 0 64px color-mix(in srgb, var(--dp-accent-2) 70%, transparent); }
  }
  .dating-browse-sub {
    text-align: center;
    margin: 0.6rem 0 2rem;
    color: rgba(244,236,255,0.7);
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    letter-spacing: 0.05em;
  }

  /* ===== SEARCH BAR ===== */
  .dating-search {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-radius: 999px;
    padding: 0.6rem 1rem 0.6rem 1.2rem;
    max-width: 540px;
    margin: 0 auto 2.5rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3), inset 0 0 0 1px rgba(255,255,255,0.12);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }
  .dating-search:focus-within {
    box-shadow: 0 8px 22px rgba(0,0,0,0.35), inset 0 0 0 2px color-mix(in srgb, var(--dp-accent) 60%, transparent);
    transform: translateY(-1px);
  }
  .dating-search-icon {
    width: 22px;
    height: 22px;
    color: color-mix(in srgb, var(--dp-accent) 70%, #fff);
    flex-shrink: 0;
  }
  .dating-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    color: #f4ecff;
    padding: 0.5rem 0;
    min-width: 0;
  }
  .dating-search input::placeholder {
    color: rgba(244,236,255,0.45);
    font-style: italic;
  }
  /* hide native search clear button (we have our own) */
  .dating-search input::-webkit-search-cancel-button { display: none; }
  .dating-search-clear {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.12);
    color: #f4ecff;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: bold;
    cursor: none;
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease;
  }
  .dating-search-clear:hover { background: rgba(255,255,255,0.22); }
  .dating-search.has-value .dating-search-clear { display: flex; }

  /* ===== BROWSE GRID ===== */
  .dating-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
  }
  /* Cards in browse overlay — dark frosted glass to match the new look. */
  .dating-browse-page .dating-preview-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.025));
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 26px rgba(0,0,0,0.4);
  }
  .dating-browse-page .dating-preview-card:not(.locked):hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 34px color-mix(in srgb, var(--dp-accent) 45%, transparent);
    border-color: color-mix(in srgb, var(--dp-accent) 55%, transparent);
  }
  .dating-browse-page .dating-preview-name {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  }
  .dating-browse-page .dating-preview-tag {
    color: rgba(255,255,255,0.78);
  }
  .dating-browse-page .dating-preview-types .romance-tag {
    background: rgba(255, 255, 255, 0.08);
  }
  /* search-hidden state */
  .dating-preview-card.search-hidden { display: none !important; }
  .dating-no-results {
    text-align: center;
    margin: 2rem auto 0;
    padding: 1.5rem;
    color: rgba(244,236,255,0.7);
    font-family: 'Outfit', sans-serif;
    font-style: italic;
    font-size: 1rem;
    display: none;
    border: 1.5px dashed color-mix(in srgb, var(--dp-accent) 60%, transparent);
    border-radius: 20px;
    max-width: 480px;
    background: rgba(255,255,255,0.04);
  }
  .dating-no-results.is-visible { display: block; }



/* ============================================================
   RORY O'MALLEY — PEAKY BLINDERS THEME
   1920s Birmingham. Smoke, oxblood, aged paper, gold foil.
   Fully namespaced under .rory-page so it can't touch any other
   character. Mirrors the standalone-page plumbing (char-page,
   char-close, char-back-link, reveal-* classes).
   ============================================================ */

.rory-page {
  --ro-ink:      #1a1613;   /* near-black brown-ink */
  --ro-soot:     #232019;   /* panel charcoal */
  --ro-soot-2:   #2c2820;
  --ro-paper:    #d9cdb2;   /* aged document paper */
  --ro-paper-2:  #c8b890;
  --ro-oxblood:  #7a1f17;   /* deep blood red */
  --ro-rust:     #a8472a;
  --ro-gold:     #c8a24a;   /* worn brass / gold foil */
  --ro-gold-2:   #e7c879;
  --ro-bottle:   #2f4334;   /* bottle green */
  --ro-smoke:    #b8ad97;
  --ro-fade:     #8a7f68;
  --ro-line:     rgba(200,162,74,0.28);
  font-family: 'Outfit', sans-serif;
  color: var(--ro-paper);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(200,162,74,0.10) 0%, transparent 55%),
    radial-gradient(100% 120% at 100% 100%, rgba(122,31,23,0.18) 0%, transparent 60%),
    linear-gradient(170deg, #14110d 0%, #1a1613 45%, #100d0a 100%);
}

/* Smoke / grain atmosphere over the whole page */
.rory-page::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 18% 30%, rgba(200,162,74,0.05), transparent 25%),
    radial-gradient(circle at 82% 60%, rgba(122,31,23,0.07), transparent 30%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix type='saturate' values='0'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* drifting smoke layer */
.rory-page .ro-smoke {
  position: fixed; inset: -20% -10% auto -10%;
  height: 80vh;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 40% at 20% 30%, rgba(184,173,151,0.06), transparent 70%),
    radial-gradient(50% 50% at 70% 50%, rgba(184,173,151,0.05), transparent 70%);
  filter: blur(8px);
  animation: roSmokeDrift 30s ease-in-out infinite alternate;
}
@keyframes roSmokeDrift {
  0%   { transform: translate3d(-3%, 0, 0) scale(1); opacity: 0.7; }
  100% { transform: translate3d(4%, -2%, 0) scale(1.1); opacity: 1; }
}

.rory-page > * { position: relative; z-index: 1; }

/* ---------- CONTROLS (close / tabs / back) ---------- */
.rory-page .char-close {
  position: fixed; top: 1rem; right: 1rem; z-index: 60;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ro-ink); color: var(--ro-gold);
  border: 2px solid var(--ro-gold);
  font-size: 1.2rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  cursor: none;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rory-page .char-close:hover { transform: rotate(90deg) scale(1.06); background: var(--ro-oxblood); color: var(--ro-gold-2); }

.rory-page .scene-tab,
.rory-page .dating-tab {
  position: fixed; z-index: 55;
  top: 42%; transform: translateY(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  padding: 1.2rem 0.6rem 1.2rem 0.5rem;
  font-family: 'Special Elite', monospace;
  font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  font-size: clamp(0.66rem, 1.4vw, 0.8rem);
  color: var(--ro-paper); cursor: none;
  border: 2px solid var(--ro-ink);
  transition: transform 0.2s ease, padding 0.2s ease;
}
/* Scene Request — RIGHT edge (matches every other character page) */
.rory-page .scene-tab {
  right: 0; left: auto;
  border-right: none;
  box-shadow: -4px 0 14px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, var(--ro-oxblood), #4d130e);
}
.rory-page .scene-tab:hover {
  padding-left: 0.95rem;
  transform: translateY(-50%) translateX(-4px);
}
/* Dating Profile — LEFT edge */
.rory-page .dating-tab {
  left: 0; right: auto;
  border-left: none;
  box-shadow: 4px 0 14px rgba(0,0,0,0.6);
  background: linear-gradient(180deg, var(--ro-gold), #9b7a2e); color: var(--ro-ink);
}
.rory-page .dating-tab:hover {
  padding-right: 0.95rem;
  transform: translateY(-50%) translateX(4px);
}
@media (max-width: 640px) {
  .rory-page .scene-tab  { top: auto; bottom: 5rem; right: 0; transform: none; }
  .rory-page .dating-tab { top: auto; bottom: 5rem; left: 0;  transform: none; }
  .rory-page .scene-tab:hover  { transform: translateX(-4px); }
  .rory-page .dating-tab:hover { transform: translateX(4px); }
}

/* ---------- HERO ---------- */
.rory-page .ro-hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 4rem 1.5rem 3rem;
  position: relative; overflow: hidden;
}
.rory-page .ro-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center top;
  filter: grayscale(0.45) sepia(0.35) contrast(1.05) brightness(0.62);
}
.rory-page .ro-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(16,13,10,0.55) 0%, rgba(16,13,10,0.25) 40%, rgba(16,13,10,0.95) 100%),
    radial-gradient(80% 60% at 50% 40%, transparent 30%, rgba(16,13,10,0.6) 100%);
}
.rory-page .ro-hero-inner { position: relative; z-index: 2; max-width: 760px; }

.rory-page .ro-crest {
  font-family: 'Special Elite', monospace;
  letter-spacing: 0.5em; text-transform: uppercase;
  font-size: clamp(0.6rem, 1.6vw, 0.8rem);
  color: var(--ro-gold); margin-bottom: 1.2rem;
  text-indent: 0.5em;
}
.rory-page .ro-crest::before, .rory-page .ro-crest::after { content: '✦'; margin: 0 0.8em; color: var(--ro-oxblood); }

.rory-page .ro-title {
  font-family: 'Cinzel Decorative', serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 13vw, 8rem);
  line-height: 0.92; margin: 0;
  color: var(--ro-paper);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 #000, 0 0 30px rgba(200,162,74,0.25);
}
.rory-page .ro-surname {
  display: block;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: clamp(1.1rem, 4vw, 2.2rem);
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--ro-gold-2);
  margin-top: 0.4rem;
}
.rory-page .ro-hero-tag {
  font-family: 'Special Elite', monospace;
  font-style: italic;
  font-size: clamp(0.95rem, 2.4vw, 1.25rem);
  color: var(--ro-smoke);
  margin-top: 1.4rem; line-height: 1.5;
}
.rory-page .ro-hero-meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; justify-content: center;
  margin-top: 1.6rem;
  font-family: 'Outfit', sans-serif; font-size: 0.86rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ro-fade);
}
.rory-page .ro-hero-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.rory-page .ro-hero-meta span::before { content: '◆'; color: var(--ro-gold); font-size: 0.6em; }

.rory-page .ro-scroll {
  margin-top: 2.4rem;
  font-family: 'Special Elite', monospace; letter-spacing: 0.3em;
  font-size: 0.7rem; color: var(--ro-gold);
  animation: roBob 2.4s ease-in-out infinite;
}
@keyframes roBob { 0%,100%{transform:translateY(0);opacity:0.7} 50%{transform:translateY(6px);opacity:1} }

/* razor divider */
.rory-page .ro-razor {
  width: min(680px, 88%); height: 22px; margin: 0 auto;
  display: block; opacity: 0.8;
}

/* ---------- SECTIONS ---------- */
.rory-page .ro-section {
  max-width: 880px; margin: 0 auto; padding: 3.5rem 1.5rem;
}
.rory-page .ro-eyebrow {
  font-family: 'Special Elite', monospace;
  letter-spacing: 0.32em; text-transform: uppercase;
  font-size: 0.7rem; color: var(--ro-gold);
  display: block; margin-bottom: 0.5rem;
}
.rory-page .ro-h2 {
  font-family: 'Cinzel Decorative', serif; font-weight: 700;
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  color: var(--ro-paper); margin: 0 0 1.5rem;
  line-height: 1.05;
  text-shadow: 0 2px 0 #000;
}
.rory-page .ro-h2 .accent { color: var(--ro-oxblood); }

/* ---------- AGED-PAPER DOCUMENT CARD ---------- */
.rory-page .ro-paper {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.10)),
    var(--ro-paper);
  color: #211c14;
  border-radius: 3px;
  padding: 1.8rem 1.7rem;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55), inset 0 0 60px rgba(122,31,23,0.07);
  position: relative;
  border: 1px solid rgba(33,28,20,0.25);
}
.rory-page .ro-paper::after {
  /* torn/burned edge vignette */
  content: ''; position: absolute; inset: 0; border-radius: 3px;
  box-shadow: inset 0 0 30px rgba(60,40,15,0.35);
  pointer-events: none;
}
.rory-page .ro-paper p { line-height: 1.7; margin: 0 0 1rem; font-size: 1.02rem; }
.rory-page .ro-paper p:last-child { margin-bottom: 0; }
.rory-page .ro-paper strong { color: var(--ro-oxblood); }
.rory-page .ro-paper em { color: #5a4a2a; font-style: italic; }
.rory-page .ro-paper .ro-dropcap::first-letter {
  font-family: 'Cinzel Decorative', serif; font-weight: 900;
  font-size: 3.4rem; float: left; line-height: 0.8;
  padding: 0.1em 0.12em 0 0; color: var(--ro-oxblood);
}

/* ---------- STAMPS / TAGS ---------- */
.rory-page .ro-stamp {
  display: inline-block;
  font-family: 'Special Elite', monospace;
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.78rem; font-weight: 700;
  padding: 0.45rem 0.85rem;
  color: var(--ro-oxblood);
  border: 2px solid var(--ro-oxblood);
  border-radius: 3px;
  transform: rotate(-4deg);
  background: rgba(122,31,23,0.05);
  box-shadow: 0 0 0 2px rgba(122,31,23,0.08) inset;
}
.rory-page .ro-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.rory-page .ro-tag {
  font-family: 'Outfit', sans-serif; font-weight: 600;
  font-size: 0.8rem; letter-spacing: 0.04em;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  color: var(--ro-paper);
  border: 1px solid var(--ro-line);
  background: rgba(200,162,74,0.06);
}
.rory-page .ro-tag.blood { color: #e6a99a; border-color: rgba(168,71,42,0.6); background: rgba(122,31,23,0.18); }
.rory-page .ro-tag.gold  { color: var(--ro-gold-2); border-color: rgba(200,162,74,0.6); background: rgba(200,162,74,0.12); }

/* ---------- QUOTE STUBS (Rory talkin') ---------- */
.rory-page .ro-quotes { display: grid; gap: 1rem; }
.rory-page .ro-quote {
  font-family: 'Special Elite', monospace;
  font-style: italic; font-size: 1.05rem; line-height: 1.5;
  color: var(--ro-paper);
  padding: 1.1rem 1.3rem;
  border-left: 3px solid var(--ro-gold);
  background: linear-gradient(135deg, rgba(200,162,74,0.06), rgba(0,0,0,0.18));
  border-radius: 0 6px 6px 0;
  transform: rotate(var(--rot, 0deg));
}
.rory-page .ro-quote::before { content: '“'; color: var(--ro-oxblood); font-size: 1.6em; line-height: 0; vertical-align: -0.35em; margin-right: 0.1em; }

/* ---------- FAMILY / PEOPLE LEDGER ---------- */
.rory-page .ro-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.rory-page .ro-card {
  background: linear-gradient(180deg, var(--ro-soot-2), var(--ro-soot));
  border: 1px solid var(--ro-line);
  border-radius: 4px;
  padding: 1.2rem 1.2rem 1.3rem;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rory-page .ro-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.5);
  border-color: rgba(200,162,74,0.55);
}
.rory-page .ro-card-role {
  font-family: 'Special Elite', monospace; font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ro-gold);
  margin-bottom: 0.3rem;
}
.rory-page .ro-card-name {
  font-family: 'Cinzel', serif; font-weight: 700; font-size: 1.25rem;
  color: var(--ro-paper); margin: 0 0 0.5rem; line-height: 1.1;
}
.rory-page .ro-card-name span { font-weight: 400; font-size: 0.8rem; color: var(--ro-fade); letter-spacing: 0.05em; }
.rory-page .ro-card-desc { font-size: 0.92rem; line-height: 1.55; color: var(--ro-smoke); }
.rory-page .ro-card.kin    { border-top: 3px solid var(--ro-gold); }
.rory-page .ro-card.crew   { border-top: 3px solid var(--ro-bottle); }
.rory-page .ro-card.women  { border-top: 3px solid var(--ro-oxblood); }
.rory-page .ro-card.kid    { border-top: 3px solid var(--ro-rust); }

/* ---------- BETTING SLIP (the vitals) ---------- */
.rory-page .ro-slip {
  background: var(--ro-paper-2); color: #241d12;
  border-radius: 3px; padding: 1.5rem 1.6rem;
  box-shadow: 0 14px 30px rgba(0,0,0,0.5);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 38px, rgba(33,28,20,0.05) 39px);
  border: 1px dashed rgba(33,28,20,0.4);
}
.rory-page .ro-slip-head {
  font-family: 'Special Elite', monospace; text-align: center;
  letter-spacing: 0.25em; text-transform: uppercase; font-size: 0.78rem;
  color: var(--ro-oxblood); padding-bottom: 0.8rem; margin-bottom: 1rem;
  border-bottom: 2px solid rgba(122,31,23,0.4);
}
.rory-page .ro-stat { display: grid; grid-template-columns: 130px 1fr; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px dotted rgba(33,28,20,0.3); font-size: 0.95rem; }
.rory-page .ro-stat:last-child { border-bottom: none; }
.rory-page .ro-stat-k { font-family: 'Special Elite', monospace; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #6a4a1a; align-self: center; }
.rory-page .ro-stat-v { color: #241d12; line-height: 1.45; }
@media (max-width: 440px) { .rory-page .ro-stat { grid-template-columns: 100px 1fr; gap: 0.5rem; font-size: 0.86rem; } }

/* ---------- CASE FILE (spoiler) ---------- */
.rory-page .ro-file {
  background: var(--ro-paper); color: #211c14;
  border-radius: 3px; overflow: hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.55);
  border: 1px solid rgba(33,28,20,0.3);
}
.rory-page .ro-file > summary {
  list-style: none; cursor: none;
  padding: 1.2rem 1.4rem;
  background: var(--ro-ink); color: var(--ro-gold);
  font-family: 'Special Elite', monospace;
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 0.84rem;
  display: flex; align-items: center; gap: 0.7rem;
  transition: background 0.2s ease;
}
.rory-page .ro-file > summary::-webkit-details-marker { display: none; }
.rory-page .ro-file > summary::before { content: '🔒'; font-size: 0.95em; }
.rory-page .ro-file[open] > summary::before { content: '🔓'; }
.rory-page .ro-file > summary:hover { background: #2a2018; }
.rory-page .ro-file-warn { display: block; font-size: 0.62rem; letter-spacing: 0.22em; color: var(--ro-rust); margin-top: 0.25rem; }
.rory-page .ro-file-body { padding: 1.5rem 1.5rem 1.7rem; }
.rory-page .ro-file-body p { line-height: 1.7; margin: 0 0 1rem; }
.rory-page .ro-file-body p:last-child { margin-bottom: 0; }
.rory-page .ro-file-body strong { color: var(--ro-oxblood); }
.rory-page .ro-redact {
  background: #211c14; color: #211c14;
  padding: 0 0.3em; border-radius: 2px; user-select: none;
  transition: color 0.25s ease, background 0.25s ease;
}
.rory-page .ro-file-body:hover .ro-redact { background: rgba(33,28,20,0.12); color: var(--ro-oxblood); }
.rory-page .ro-file-stamp {
  display: inline-block; margin-top: 0.4rem;
  font-family: 'Special Elite', monospace; font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ro-oxblood); border: 2px solid var(--ro-oxblood);
  padding: 0.3rem 0.7rem; transform: rotate(-3deg); border-radius: 2px;
}

/* ---------- INK / TATTOO PANEL ---------- */
.rory-page .ro-ink-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 1rem; }
.rory-page .ro-ink-item {
  border: 1px solid var(--ro-line); border-radius: 4px;
  padding: 1.1rem; text-align: center;
  background: rgba(0,0,0,0.2);
}
.rory-page .ro-ink-glyph { font-size: 2rem; color: var(--ro-gold); display: block; margin-bottom: 0.4rem; }
.rory-page .ro-ink-label { font-family: 'Special Elite', monospace; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ro-smoke); }

/* ---------- SPRAY / BIG QUOTE ---------- */
.rory-page .ro-spray {
  text-align: center; padding: 1rem;
  font-family: 'Cinzel Decorative', serif; font-weight: 700;
  font-size: clamp(1.4rem, 4.5vw, 2.4rem); line-height: 1.25;
  color: var(--ro-paper);
  text-shadow: 0 0 24px rgba(200,162,74,0.25);
}
.rory-page .ro-spray .accent { color: var(--ro-oxblood); display: block; font-size: 0.7em; margin-top: 0.5rem; font-family: 'Special Elite', monospace; letter-spacing: 0.1em; }

/* ---------- CHALKBOARD ODDS (places) ---------- */
.rory-page .ro-board {
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,0.04), transparent 50%),
    #1c241f;
  border: 10px solid #3a2a18;
  border-radius: 4px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.7), 0 14px 34px rgba(0,0,0,0.55);
  padding: 1.6rem 1.5rem;
  font-family: 'Special Elite', monospace;
}
.rory-page .ro-board-head { text-align: center; color: var(--ro-gold-2); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 1.2rem; }
.rory-page .ro-board-row {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: 0.7rem 0; border-bottom: 1px dashed rgba(255,255,255,0.12);
  color: #e8e2d2; align-items: baseline;
}
.rory-page .ro-board-row:last-child { border-bottom: none; }
.rory-page .ro-board-place { font-size: 1rem; }
.rory-page .ro-board-place small { display: block; font-family: 'Outfit', sans-serif; font-size: 0.78rem; color: var(--ro-smoke); letter-spacing: 0; margin-top: 0.2rem; line-height: 1.4; }
.rory-page .ro-board-odds { color: var(--ro-gold-2); font-size: 1.1rem; white-space: nowrap; }

/* ---------- FINAL CTA / BACK ---------- */
.rory-page .ro-cta-wrap { text-align: center; padding: 1rem 0 0; }
.rory-page .ro-cta {
  display: inline-block;
  font-family: 'Cinzel', serif; font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.06em;
  padding: 1rem 2.2rem; border-radius: 3px;
  color: var(--ro-ink); text-decoration: none;
  background: linear-gradient(135deg, var(--ro-gold-2), var(--ro-gold));
  box-shadow: 0 10px 28px rgba(200,162,74,0.3), inset 0 0 0 1px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rory-page .ro-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(200,162,74,0.4); }

.rory-page .char-final-cta { text-align: center; padding: 3rem 1.5rem 4.5rem; }
.rory-page .char-back-link {
  display: inline-block; margin-top: 1.5rem;
  font-family: 'Special Elite', monospace; letter-spacing: 0.12em;
  color: var(--ro-fade); text-decoration: none; font-size: 0.9rem;
  transition: color 0.2s ease;
}
.rory-page .char-back-link:hover { color: var(--ro-gold); }

/* reveal defaults already handled globally by .reveal-* classes */

/* ============================================================
   IRISH ATMOSPHERE LAYER — embers, shamrock motes, gaslamp
   flicker, tricolour shimmer. Pure CSS; particle elements are
   injected by JS (capped + reduced-motion aware).
   ============================================================ */
.rory-page .ro-atmos {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
/* gaslamp flicker — a warm vignette that breathes + stutters */
.rory-page .ro-atmos::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 50% 42%, rgba(200,162,74,0.10), transparent 70%);
  animation: roGaslamp 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes roGaslamp {
  0%,100% { opacity: 0.55; }
  43%     { opacity: 0.8; }
  46%     { opacity: 0.45; }   /* stutter */
  48%     { opacity: 0.72; }
  70%     { opacity: 0.6; }
}
/* rising embers */
.rory-page .ro-ember {
  position: absolute; bottom: -12px;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ro-gold-2);
  box-shadow: 0 0 6px 1px rgba(231,200,121,0.8);
  opacity: 0;
  animation: roEmberRise linear infinite;
}
@keyframes roEmberRise {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  12%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(-104vh) translateX(var(--drift, 20px)) scale(0.3); opacity: 0; }
}
/* drifting shamrock motes — sparse, muted bottle-green */
.rory-page .ro-clover {
  position: absolute; bottom: -24px;
  font-size: var(--sz, 14px);
  color: var(--ro-bottle);
  opacity: 0;
  text-shadow: 0 0 6px rgba(47,67,52,0.6);
  animation: roCloverRise linear infinite;
  will-change: transform, opacity;
}
@keyframes roCloverRise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.5; }
  85%  { opacity: 0.35; }
  100% { transform: translateY(-108vh) rotate(360deg) translateX(var(--drift, 30px)); opacity: 0; }
}

/* tricolour shimmer — green/white/orange sweep for the Irish feel */
.rory-page .ro-tricolour {
  position: relative;
  background: linear-gradient(90deg,
      #169b62 0%, #169b62 30%,
      #f4f4ee 47%, #f4f4ee 53%,
      #ff883e 70%, #ff883e 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: roTricolour 7s linear infinite;
}
@keyframes roTricolour { 0% { background-position: 140% 0; } 100% { background-position: -40% 0; } }

/* hero gold shimmer sweep */
.rory-page .ro-title { position: relative; overflow: hidden; }
.rory-page .ro-title::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(231,200,121,0.55) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: roSheenSweep 5.5s ease-in-out 1.2s infinite;
  pointer-events: none; mix-blend-mode: screen;
}
@keyframes roSheenSweep { 0% { background-position: 160% 0; } 55%,100% { background-position: -60% 0; } }

/* animated razor divider — line draws, blade pulses */
.rory-page .ro-razor line { stroke-dasharray: 680; stroke-dashoffset: 680; animation: roRazorDraw 2.4s ease forwards; }
.rory-page .ro-razor polygon { transform-origin: center; transform-box: fill-box; animation: roBladePulse 3.2s ease-in-out infinite; }
@keyframes roRazorDraw { to { stroke-dashoffset: 0; } }
@keyframes roBladePulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(200,162,74,0)); } 50% { transform: scale(1.12); filter: drop-shadow(0 0 5px rgba(200,162,74,0.6)); } }

/* ink-glyph deals like a card on hover */
.rory-page .ro-ink-glyph { display: inline-block; transition: transform 0.45s cubic-bezier(.2,.8,.2,1); }
.rory-page .ro-ink-item:hover .ro-ink-glyph { transform: rotateY(360deg) scale(1.18); color: var(--ro-gold-2); }

/* ============================================================
   FIND THE LADY  —  Rory's three-card monte
   ============================================================ */
.rory-page .ro-game {
  --lane-gap: 0px;            /* set by JS from measured layout */
  max-width: 760px; margin: 0 auto;
  border-radius: 8px;
  padding: 1.4rem 1.3rem 1.6rem;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,0,0,0.25), transparent 60%),
    repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #1f3a2c, #14271d 70%);
  border: 2px solid var(--ro-gold);
  box-shadow: 0 22px 50px rgba(0,0,0,0.6), inset 0 0 70px rgba(0,0,0,0.55), inset 0 0 0 6px rgba(122,31,23,0.35);
  position: relative;
}
.rory-page .ro-game::before {
  /* gold inner trim corners */
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(200,162,74,0.4);
  border-radius: 5px; pointer-events: none;
}

/* dealer strip — Rory's running mouth + the slate */
.rory-page .ro-dealer {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 1.1rem; flex-wrap: wrap;
}
.rory-page .ro-dealer-line {
  font-family: 'Special Elite', monospace; font-style: italic;
  color: var(--ro-paper); font-size: 0.98rem; line-height: 1.4;
  flex: 1 1 240px; min-height: 2.6em;
  text-shadow: 0 1px 0 #000;
}
.rory-page .ro-dealer-line b { color: var(--ro-gold-2); font-style: normal; }
.rory-page .ro-dealer-line.tell { color: #e6a99a; }
.rory-page .ro-slate {
  font-family: 'Special Elite', monospace; text-align: right;
  letter-spacing: 0.1em; font-size: 0.8rem; color: var(--ro-smoke);
  white-space: nowrap;
}
.rory-page .ro-slate b { display: inline-block; min-width: 1.4em; text-align: center; font-size: 1.15rem; }
.rory-page .ro-slate .won  { color: var(--ro-gold-2); }
.rory-page .ro-slate .lost { color: #e6705a; }
.rory-page .ro-slate-sep { opacity: 0.4; margin: 0 0.35em; }

/* the table where the cards live */
.rory-page .ro-table {
  position: relative; height: 168px; margin: 0.4rem auto 1.3rem;
  max-width: 480px;
}
.rory-page .ro-pcard {
  position: absolute; top: 0; left: 50%;
  width: 104px; height: 152px;
  margin-left: -52px;                 /* center the lane origin */
  transform: translateX(var(--x, 0));
  transition: transform 0.46s cubic-bezier(.34,.85,.3,1);
  transform-style: preserve-3d;
  cursor: none;
}
.rory-page .ro-pcard.lift { z-index: 30; }
.rory-page .ro-pcard-inner {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.5s cubic-bezier(.34,1.2,.4,1);
  transform-style: preserve-3d;
}
.rory-page .ro-pcard.faceup .ro-pcard-inner { transform: rotateY(180deg); }
.rory-page .ro-pcard-face {
  position: absolute; inset: 0; border-radius: 9px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
  overflow: hidden;
}
/* card back — ornate gold filigree on oxblood */
.rory-page .ro-pcard-back {
  background:
    radial-gradient(circle at 50% 50%, rgba(231,200,121,0.18), transparent 55%),
    repeating-linear-gradient(45deg, rgba(200,162,74,0.16) 0 4px, transparent 4px 9px),
    repeating-linear-gradient(-45deg, rgba(200,162,74,0.16) 0 4px, transparent 4px 9px),
    linear-gradient(160deg, #7a1f17, #4d130e);
  border: 2px solid var(--ro-gold);
}
.rory-page .ro-pcard-back::before {
  content: '♣'; font-size: 2.2rem; color: var(--ro-gold-2);
  text-shadow: 0 0 10px rgba(0,0,0,0.6);
  border: 2px solid var(--ro-gold); border-radius: 50%;
  width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.18);
}
.rory-page .ro-pcard-back::after {
  /* idle sheen sweep across the backs */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.22) 50%, transparent 60%);
  background-size: 300% 100%;
  animation: roCardSheen 4.5s ease-in-out infinite;
}
@keyframes roCardSheen { 0% { background-position: 170% 0; } 60%,100% { background-position: -70% 0; } }

/* card fronts */
.rory-page .ro-pcard-front {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #f4ecd8, #e4d7b6);
  border: 2px solid #b8a878;
  color: #2a2418; font-family: 'Cinzel', serif;
}
.rory-page .ro-pcard-front .pc-corner {
  position: absolute; top: 6px; left: 8px;
  font-size: 0.95rem; font-weight: 700; line-height: 1; text-align: center;
}
.rory-page .ro-pcard-front .pc-corner.br { top: auto; left: auto; bottom: 6px; right: 8px; transform: rotate(180deg); }
.rory-page .ro-pcard-front .pc-pip { font-size: 3.1rem; line-height: 1; }
.rory-page .ro-pcard-front .pc-label {
  font-family: 'Special Elite', monospace; font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; margin-top: 0.35rem; opacity: 0.7;
}
.rory-page .ro-pcard-front.lady   { color: #a01b1b; }
.rory-page .ro-pcard-front.lady .pc-label { color: #7a1f17; opacity: 0.85; }
.rory-page .ro-pcard-front.joker  { color: #2a2418; }
.rory-page .ro-pcard-front.three  { color: #2a2418; }

/* interactive states */
.rory-page .ro-game.is-pick .ro-pcard:hover { transform: translateX(var(--x,0)) translateY(-12px); }
.rory-page .ro-game.is-pick .ro-pcard-back  { box-shadow: 0 0 0 2px var(--ro-gold-2), 0 10px 22px rgba(0,0,0,0.55); }
.rory-page .ro-pcard.win-glow  .ro-pcard-front { box-shadow: 0 0 0 3px var(--ro-gold-2), 0 0 26px rgba(231,200,121,0.7); }
.rory-page .ro-pcard.lose-dim  { filter: grayscale(0.4) brightness(0.78); }

/* the "caught" tell — the Lady does a guilty little extra slide */
.rory-page .ro-pcard.caught-slide { transition: transform 0.55s cubic-bezier(.5,0,.3,1); z-index: 40; }
.rory-page .ro-pcard.caught-slide .ro-pcard-front { box-shadow: 0 0 0 3px #e6705a, 0 0 22px rgba(230,112,90,0.6); }

/* controls */
.rory-page .ro-game-controls { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.rory-page .ro-game-btn {
  font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.05em;
  font-size: 0.92rem; padding: 0.7rem 1.4rem; border-radius: 4px;
  color: var(--ro-ink); cursor: none;
  background: linear-gradient(135deg, var(--ro-gold-2), var(--ro-gold));
  border: 1px solid rgba(0,0,0,0.2);
  box-shadow: 0 8px 20px rgba(200,162,74,0.25);
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}
.rory-page .ro-game-btn:hover { transform: translateY(-2px); box-shadow: 0 13px 26px rgba(200,162,74,0.38); }
.rory-page .ro-game-btn[disabled] { opacity: 0.35; pointer-events: none; }
.rory-page .ro-game-btn.ghost {
  background: transparent; color: var(--ro-gold-2);
  border: 1px solid var(--ro-gold); box-shadow: none;
}
.rory-page .ro-game-btn.ghost.armed {
  background: rgba(200,162,74,0.15); color: var(--ro-gold-2);
  box-shadow: inset 0 0 0 1px var(--ro-gold-2), 0 0 14px rgba(200,162,74,0.4);
}
.rory-page .ro-game-hint {
  text-align: center; margin-top: 0.9rem;
  font-family: 'Special Elite', monospace; font-size: 0.72rem;
  letter-spacing: 0.1em; color: var(--ro-fade);
}

@media (max-width: 520px) {
  .rory-page .ro-table { height: 150px; max-width: 340px; }
  .rory-page .ro-pcard { width: 88px; height: 130px; margin-left: -44px; }
  .rory-page .ro-pcard-front .pc-pip { font-size: 2.5rem; }
}

/* ============================================================
   RORY DATING PROFILE — Irish touches (scoped)
   ============================================================ */
#roryDatingPage .dating-hero-name { position: relative; }
#roryDatingPage .dating-tricolour-bar {
  height: 4px; width: 120px; margin: 0.5rem 0 0; border-radius: 2px;
  background: linear-gradient(90deg, #169b62 0 33%, #f4f4ee 33% 66%, #ff883e 66% 100%);
  background-size: 200% 100%;
  animation: roTricolour 6s linear infinite;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}
#roryDatingPage .dating-hero-meta span::before { content: '☘ '; color: #169b62; }
#roryDatingPage .dating-verified {
  animation: roStampDrop 0.6s cubic-bezier(.2,1.4,.4,1) both, roStampWobble 5s ease-in-out 0.8s infinite;
}
@keyframes roStampDrop { 0% { transform: scale(2.4) rotate(-18deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes roStampWobble { 0%,100% { transform: scale(1) rotate(-8deg); } 50% { transform: scale(1.04) rotate(-5deg); } }
#roryDatingPage .dating-card { position: relative; overflow: hidden; }
#roryDatingPage .dating-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #169b62, #f4f4ee, #ff883e);
  background-size: 220% 100%; animation: roTricolour 8s linear infinite; opacity: 0.85;
}
#roryDatingPage .dating-bio::after {
  content: '☘'; position: absolute; right: 14px; bottom: 8px;
  font-size: 4.5rem; color: rgba(22,155,98,0.07); pointer-events: none; line-height: 1;
}

/* ============================================================
   REDUCED MOTION — kill decorative animation for these additions
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .rory-page .ro-atmos::after,
  .rory-page .ro-ember,
  .rory-page .ro-clover,
  .rory-page .ro-tricolour,
  .rory-page .ro-title::after,
  .rory-page .ro-razor line,
  .rory-page .ro-razor polygon,
  .rory-page .ro-pcard-back::after,
  #roryDatingPage .dating-tricolour-bar,
  #roryDatingPage .dating-verified,
  #roryDatingPage .dating-card::before { animation: none !important; }
  .rory-page .ro-razor line { stroke-dashoffset: 0; }
  .rory-page .ro-pcard,
  .rory-page .ro-pcard-inner { transition-duration: 0.001s; }
}


/* ============================================================
   SCORCH — RAT HUNT (mini-game)
   Stomp the Street Rats (Skye = double); spare the Snakes
   (his band). Scoped to .scorch-page, themed via --pp-* tokens.
   ============================================================ */
.scorch-page .sc-rat {
  max-width: 760px; margin: 0 auto;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,90,31,0.10), transparent 55%),
    repeating-linear-gradient(135deg, rgba(0,0,0,0.18) 0 10px, transparent 10px 20px),
    linear-gradient(180deg, #160808, #0a0505);
  border: 2px solid var(--pp-accent); border-radius: 6px;
  padding: 1.1rem 1.1rem 1.3rem;
  box-shadow: 0 20px 48px rgba(0,0,0,0.6), inset 0 0 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,170,0,0.2);
  position: relative;
}

/* HUD */
.scorch-page .sc-rat-hud { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.scorch-page .sc-rat-meter { flex: 1 1 220px; }
.scorch-page .sc-rat-meter-label,
.scorch-page .sc-rat-set-label {
  font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; font-size: 0.62rem; color: var(--pp-accent-3);
  display: block; margin-bottom: 0.25rem;
}
.scorch-page .sc-rat-bar {
  height: 16px; border-radius: 3px; overflow: hidden;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,170,0,0.3);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
.scorch-page .sc-rat-bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #ffaa00, #ff5a1f);
  transition: width 0.18s ease, background 0.3s ease;
}
.scorch-page .sc-rat-bar-fill.warn { background: linear-gradient(90deg, #ff5a1f, #c8281a); }
.scorch-page .sc-rat-bar-fill.crit { background: linear-gradient(90deg, #ff3a1a, #7a0c0c); animation: scRatCrit 0.5s ease-in-out infinite; }
@keyframes scRatCrit { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
.scorch-page .sc-rat-stats { display: flex; align-items: center; gap: 0.8rem; font-family: 'Oswald', sans-serif; }
.scorch-page .sc-rat-score { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--pp-paper-2); text-transform: uppercase; }
.scorch-page .sc-rat-score b { color: var(--pp-title-1); font-size: 1.15rem; }
.scorch-page .sc-rat-combo {
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: var(--pp-accent-3); padding: 0.15rem 0.6rem; border-radius: 3px;
  border: 1px solid rgba(255,170,0,0.4); background: rgba(255,90,31,0.12);
  transition: transform 0.12s ease;
}
.scorch-page .sc-rat-combo.bump { transform: scale(1.3) rotate(-3deg); }

/* hunt progress */
.scorch-page .sc-rat-set { margin: 0.4rem 0 0.8rem; }
.scorch-page .sc-rat-set-bar {
  height: 8px; border-radius: 2px; overflow: hidden; position: relative;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,170,0,0.22);
  background-image: repeating-linear-gradient(90deg, transparent 0 24%, rgba(255,170,0,0.25) 24% 25%);
}
.scorch-page .sc-rat-set-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--pp-accent-2), var(--pp-accent-3));
  transition: width 0.12s linear;
}

/* the alley */
.scorch-page .sc-rat-pit {
  position: relative; height: 340px; border-radius: 5px; overflow: hidden;
  background:
    radial-gradient(70% 50% at 50% -8%, rgba(255,170,0,0.12), transparent 60%),
    radial-gradient(60% 60% at 15% 115%, rgba(60,40,20,0.5), transparent 70%),
    radial-gradient(60% 60% at 85% 115%, rgba(40,30,18,0.5), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.25) 0 1px, transparent 1px 64px),
    #0c0908;
  border: 1px solid rgba(255,170,0,0.22);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.75);
  touch-action: manipulation;
}
.scorch-page .sc-rat-strip {
  position: absolute; top: 0; left: 0; right: 0; text-align: center;
  font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 0.4em;
  font-size: 0.62rem; color: var(--pp-accent-3); padding: 4px 0;
  background: linear-gradient(180deg, rgba(255,170,0,0.14), transparent);
  text-transform: uppercase; pointer-events: none; z-index: 2;
}
.scorch-page .sc-rat-pit.shake { animation: scRatShake 0.35s ease; }
@keyframes scRatShake {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-0.4deg); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
.scorch-page .sc-rat-pit.flash-bad::after {
  content: ''; position: absolute; inset: 0; background: rgba(200,40,26,0.4);
  animation: scRatFlash 0.3s ease forwards; pointer-events: none; z-index: 5;
}
@keyframes scRatFlash { from { opacity: 1; } to { opacity: 0; } }

/* targets */
.scorch-page .sc-rat-target {
  position: absolute; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; cursor: none; z-index: 3;
  background: radial-gradient(circle at 35% 30%, #2a1208, #160808);
  border: 2px solid var(--pp-accent);
  box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 14px rgba(255,90,31,0.4);
  animation: scRatPop 0.16s ease-out; user-select: none;
}
@keyframes scRatPop { from { transform: scale(0.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.scorch-page .sc-rat-target::after {
  content: ''; position: absolute; inset: -7px; border-radius: 50%;
  border: 3px solid rgba(255,170,0,0.85);
  animation: scRatRing var(--life, 1400ms) linear forwards; pointer-events: none;
}
@keyframes scRatRing { from { transform: scale(1.3); opacity: 0.9; } to { transform: scale(0.62); opacity: 0.15; } }
.scorch-page .sc-rat-target .sc-rat-tag {
  position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%);
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.55rem;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  color: var(--pp-accent-3);
}
/* Skye — the prize, worth double */
.scorch-page .sc-rat-target.skye { border-color: var(--pp-accent-3); box-shadow: 0 6px 18px rgba(0,0,0,0.6), 0 0 20px rgba(255,170,0,0.7); }
.scorch-page .sc-rat-target.skye::after { border-color: var(--pp-accent-3); }
.scorch-page .sc-rat-target.skye .sc-rat-tag { color: #fff4cc; }
.scorch-page .sc-rat-target .sc-rat-x2 {
  position: absolute; top: -10px; right: -10px;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 0.6rem;
  color: #160808; background: var(--pp-accent-3);
  border-radius: 999px; padding: 1px 5px; box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* Snakes — his band, DON'T hit */
.scorch-page .sc-rat-target.snake { border-color: #3ad17a; box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 16px rgba(58,209,122,0.5); }
.scorch-page .sc-rat-target.snake::after { border-color: #3ad17a; }
.scorch-page .sc-rat-target.snake .sc-rat-tag { color: #5fe39a; }
.scorch-page .sc-rat-target.hit { animation: scRatSquish 0.24s ease forwards; pointer-events: none; }
@keyframes scRatSquish { to { transform: scale(1.5) rotate(22deg); opacity: 0; } }

/* floating score popups */
.scorch-page .sc-rat-pop {
  position: absolute; z-index: 6; pointer-events: none;
  font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.1rem;
  text-shadow: 0 2px 4px #000; transform: translate(-50%, -50%);
  animation: scRatFloat 0.7s ease-out forwards;
}
.scorch-page .sc-rat-pop.good { color: var(--pp-accent-3); }
.scorch-page .sc-rat-pop.big  { color: #fff4cc; font-size: 1.4rem; }
.scorch-page .sc-rat-pop.bad  { color: #ff6a4a; }
@keyframes scRatFloat { from { opacity: 1; transform: translate(-50%,-50%); } to { opacity: 0; transform: translate(-50%,-180%); } }

/* overlay (start / end) */
.scorch-page .sc-rat-overlay {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.7rem; text-align: center; padding: 1.2rem;
  background: radial-gradient(circle at 50% 40%, rgba(20,8,8,0.78), rgba(8,4,4,0.94));
  backdrop-filter: blur(2px);
}
.scorch-page .sc-rat-overlay.hidden { display: none; }
.scorch-page .sc-rat-callout {
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; font-size: clamp(1.2rem, 4vw, 1.7rem);
  color: var(--pp-title-1); text-shadow: 0 2px 0 #000, 0 0 18px var(--pp-stamp-glow);
  line-height: 1.1; max-width: 26ch;
}
.scorch-page .sc-rat-rules { font-family: 'Outfit', sans-serif; font-size: 0.85rem; color: var(--pp-paper-2); max-width: 34ch; line-height: 1.5; }
.scorch-page .sc-rat-rules b.rat   { color: var(--pp-accent-3); }
.scorch-page .sc-rat-rules b.dbl   { color: #fff4cc; }
.scorch-page .sc-rat-rules b.snake { color: #5fe39a; }
.scorch-page .sc-rat-finalscore { font-family: 'Oswald', sans-serif; color: var(--pp-accent-3); letter-spacing: 0.1em; font-size: 0.9rem; }
.scorch-page .sc-rat-finalscore b { color: var(--pp-title-1); font-size: 1.6rem; display: block; }
.scorch-page .sc-rat-btn {
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.1em; font-size: 1rem; cursor: none;
  padding: 0.7rem 1.6rem; border-radius: 4px; color: #160808;
  background: linear-gradient(135deg, var(--pp-accent-3), var(--pp-accent));
  border: none; box-shadow: 0 8px 22px rgba(255,90,31,0.4);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.scorch-page .sc-rat-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 13px 28px rgba(255,90,31,0.55); }

.scorch-page .sc-rat-line {
  margin-top: 0.9rem; text-align: center; min-height: 1.4em;
  font-family: 'Special Elite', monospace; font-style: italic;
  font-size: 0.92rem; color: var(--pp-paper-2); text-shadow: 0 1px 0 #000;
}
.scorch-page .sc-rat-line.bad  { color: #ff8a6a; }
.scorch-page .sc-rat-line.good { color: var(--pp-accent-3); }
.scorch-page .sc-rat-line.big  { color: #fff4cc; }

@media (max-width: 520px) {
  .scorch-page .sc-rat-pit { height: 300px; }
  .scorch-page .sc-rat-target { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 1.55rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scorch-page .sc-rat-pit.shake,
  .scorch-page .sc-rat-bar-fill.crit,
  .scorch-page .sc-rat-target { animation: none; }
  .scorch-page .sc-rat-pit.flash-bad::after,
  .scorch-page .sc-rat-pop { animation-duration: 0.001s; }
}