/* GENERATED by _source/build.py — edit _source/site/ */
  /* base.css = index.html's <style> (Hercules final, 2026-10-31), verbatim except 5 marked edits (Juan, split):
     .sec-head h1 joins h2; small red TEXT (.eyebrow, .lead em, .vcard .sub b, .foot) reads --pr-red-text (Scar 11). */
  /* RED / BLACK / PR-FLAG artist site — nav, hero, lineage, about, music, battles, media, merch, book */
  :root{
    --pr-red:#EF1C25; --pr-red-2:#B00E15; --pr-blue:#0A3A8B; --pr-blue-2:#06256b;
    --ink:#060507; --ink-2:#0c0a0f; --panel:#121016; --panel-2:#17141c;
    --bone:#F6F1E7; --bone-dim:#cfc8bd; --gold:#F5C542; --muted:#938c9e;
    --display:"Anton","Arial Narrow",system-ui,sans-serif;
    --body:"Archivo","Helvetica Neue",Arial,sans-serif;
    --maxw:1040px; --nav-h:58px;
    /* elevation — lit surfaces, edges, flag-born glows, depth */
    --surface:linear-gradient(180deg,var(--panel-2),var(--panel));
    --edge:rgba(246,241,231,.12); --edge-hi:rgba(246,241,231,.18);
    --glow-red:rgba(239,28,37,.12); --glow-blue:rgba(10,58,139,.16); --glow-gold:rgba(245,197,66,.10);
    --shadow-card:0 16px 36px -14px rgba(0,0,0,.72),0 3px 10px rgba(0,0,0,.45);
    --shadow-lift:0 26px 52px -18px rgba(0,0,0,.82),0 8px 18px rgba(0,0,0,.5);
    --ring-red:0 0 0 1px rgba(239,28,37,.22);
    /* FIRE BUTTONS — lacquered faces on an extruded ember base. The base stays planted; only the face moves:
       hover edge = depth + lift, press edge = depth - sink. */
    --fire-hi:color-mix(in oklab,var(--pr-red),var(--bone) 10%);        /* top sheen — never under the label */
    --fire-mid:color-mix(in oklab,var(--pr-red),var(--pr-red-2) 45%);   /* label plateau: bone 4.81:1 AA (flat pr-red was 3.84) */
    --fire-lo:color-mix(in oklab,var(--pr-red-2),var(--ink) 15%);
    --fire-edge:color-mix(in oklab,var(--pr-red-2),var(--ink) 50%);     /* extruded base */
    --fire-face:linear-gradient(180deg,var(--fire-hi) 0%,var(--fire-mid) 30%,var(--fire-mid) 68%,var(--fire-lo) 100%);
    --smoke-hi:color-mix(in oklab,var(--panel-2),var(--bone) 9%);
    --smoke-face:linear-gradient(180deg,var(--smoke-hi) 0%,var(--panel-2) 46%,var(--panel) 100%);
    --smoke-edge:color-mix(in oklab,var(--pr-red-2),var(--ink) 72%);     /* ember-dark base ... */
    --smoke-edge-hot:color-mix(in oklab,var(--pr-red-2),var(--ink) 40%); /* ... that heats up */
    --smoke-rim:rgba(246,241,231,.40);                                   /* operable edge >=3:1 on every plane */
    --heat-rim:rgba(239,28,37,.75); --heat-red:rgba(239,28,37,.55); --heat-gold:rgba(245,197,66,.30); --ember-seam:rgba(239,28,37,.5);
    --lacquer:rgba(255,255,255,.36); --lacquer-hot:rgba(255,255,255,.46); --smoke-lite:rgba(246,241,231,.14); --smoke-lite-hot:rgba(246,241,231,.24);
    --shade:rgba(0,0,0,.18); --smoke-shade:rgba(0,0,0,.3); --press-shade:rgba(0,0,0,.38); --contact:rgba(0,0,0,.6); --engrave:0 1px 0 rgba(0,0,0,.28);
    --btn-depth:4px; --btn-lift:2px; --btn-sink:3px;
    --focus:var(--gold);
    /* motion — names per 05; reduced motion collapses them once, in the reduce block */
    --dur-1:180ms; --dur-press:90ms; --ease-swoop:cubic-bezier(.22,1,.36,1);
    color-scheme:dark;
  }
  /* pre-2023 engines (no color-mix, e.g. iOS 15): same lacquer, precomputed — else the fire faces compute to nothing */
  @supports not (color:color-mix(in oklab,red,blue)){:root{
    --fire-hi:#f3433d;--fire-mid:#d2161e;--fire-lo:#931316;--fire-edge:#541313;
    --smoke-hi:#27242b;--smoke-edge:#2f0e0f;--smoke-edge-hot:#651414}}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 10px)}
  html,body{margin:0}
  body{background:var(--ink);color:var(--bone);font-family:var(--body);overflow-x:hidden;position:relative;line-height:1.5}
  body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
  a{color:inherit}
  .eyebrow{font-weight:800;letter-spacing:.34em;text-transform:uppercase;font-size:clamp(11px,2.5vw,13px);color:var(--pr-red-text)}
  .reveal{opacity:0;transform:translateY(18px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes rise{to{opacity:1;transform:none}}

  /* ---------- NAV ---------- */
  .nav{position:sticky;top:env(safe-area-inset-top,0);z-index:40;height:var(--nav-h);display:flex;align-items:center;
    background:rgba(6,5,7,.82);backdrop-filter:blur(10px);border-bottom:1px solid rgba(239,28,37,.16);box-shadow:0 10px 30px -12px rgba(0,0,0,.7)}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0);z-index:41;background:rgba(6,5,7,.92)}
  .nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
  /* ===== BEGIN HERCULES · NAV BRAND (2026-10-31): his red logo, not set type. Markup: a.brand > picture (AVIF/WebP/PNG, alt "Philly Haze") ===== */
  .brand{display:flex;align-items:center;flex:none;line-height:0;border-radius:6px;min-height:44px}
  .brand img{display:block;height:38px;width:auto;aspect-ratio:2085/716}
  .brand:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
  /* ===== END HERCULES · NAV BRAND ===== */
  .navlinks{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;
    padding-block:9px;margin-block:-9px} /* overflow-x:auto clips Y too: 9px of room for BOOK's edge/lift/heat, net-zero layout */
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks a{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--bone-dim);
    text-decoration:none;padding:.5em .7em;border-radius:8px;white-space:nowrap}
  .navlinks a:not(.book):hover{color:var(--bone);background:rgba(239,28,37,.14)}
  .navlinks a.book{display:inline-flex;align-items:center;min-height:40px;padding:0 1.05em;margin-left:6px;border-radius:999px}
  .navlinks a.book::before{content:"";position:absolute;inset:-5px 0;border-radius:inherit} /* 40px face, 48px tap target (inset resolves vs the padding box: -5 = 4 + the 1px border) */

  /* ---------- HERO ---------- */
  .stage{position:relative;min-height:calc(100vh - var(--nav-h));min-height:calc(100svh - var(--nav-h)); /* svh, not dvh: iOS toolbar collapse must not resize (re-crop) the hero video */display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:clamp(10px,2.4vw,18px);padding-block:clamp(26px,5vh,48px);text-align:center;isolation:isolate}
  .stage::before{content:"";position:absolute;inset:0;z-index:-2;
    background:radial-gradient(120% 95% at 50% 46%, transparent 50%, rgba(0,0,0,.55) 100%),
      radial-gradient(58% 42% at 50% 12%, rgba(239,28,37,.40), transparent 68%),
      radial-gradient(74% 58% at 50% 104%, rgba(10,58,139,.36), transparent 72%),
      linear-gradient(180deg,#0b080c 0%, #060507 58%, #040405 100%);}
  .stage::after{display:none} /* scanline texture retired: over real footage it reads as an interlacing defect (Juan, 2026-10-31) */
  .hero-eye{display:flex;align-items:center;gap:.7em;font-weight:700;letter-spacing:.4em;text-transform:uppercase;font-size:clamp(11px,2.6vw,14px);color:var(--bone);opacity:.92}
  .hero-eye b{color:var(--gold);font-weight:800}
  .flagchip{width:30px;height:20px;border-radius:3px;flex:0 0 auto;
    background:linear-gradient(90deg,var(--pr-blue) 0 38%,transparent 38%),repeating-linear-gradient(180deg,var(--pr-red) 0 20%,var(--bone) 20% 40%);
    box-shadow:0 0 0 1px rgba(246,241,231,.25);position:relative;overflow:hidden}
  .flagchip::after{content:"★";position:absolute;left:3px;top:50%;transform:translateY(-50%);color:var(--bone);font-size:9px;line-height:1}
  .glow{animation:glow 3.4s ease-in-out infinite}
  @keyframes glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}
  .cta-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:8px;
    --btn-depth:5px;--btn-lift:3px;--btn-sink:4px} /* hero = the heroes of the system: deeper base, bigger travel */
  .pill{display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:54px;padding:0 1.4em;border-radius:999px;
    font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(12px,3vw,14px);text-decoration:none}
  .dot{width:9px;height:9px;border-radius:50%;background:var(--bone);animation:pulse 1.8s infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(246,241,231,.6)}70%{box-shadow:0 0 0 11px rgba(246,241,231,0)}100%{box-shadow:0 0 0 0 rgba(246,241,231,0)}}

  /* ---------- HERO VIDEO WALL (Hercules, inside Juan's direction) ----------
     Media goes absolute, the type stays in flow and keeps defining the stage height.
     Floor = a real poster <img> (frame 0 of the loop, so the swap never flashes): works with JS off, under
     reduced motion, Save-Data and iOS Low Power Mode. The <video> is attached by JS after first paint.
     Both loops are reframed so Haze's FACE sits beside the wordmark (desktop) / above the eyebrow (portrait). */
  .hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none} /* paints over .stage::before (same z, later in order) */
  .hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;border:0}
  .hero-media video{opacity:0;transition:opacity .6s var(--ease-swoop)}
  .hero-media.is-live video{opacity:1}
  /* brand grade over the footage: the scrim floor under the type, then the stage's own flag glows + vignette */
  .hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:
      linear-gradient(0deg, rgba(6,5,7,.88) 0, rgba(6,5,7,.84) 300px, rgba(6,5,7,.34) 410px, rgba(6,5,7,.06) 500px), /* lower-third floor under the lockup (2026-10-31: the centre scrim is gone, the top of the frame reads clean) */
      radial-gradient(58% 42% at 50% 12%, rgba(239,28,37,.24), transparent 68%),
      radial-gradient(74% 58% at 50% 104%, rgba(10,58,139,.36), transparent 72%),
      radial-gradient(120% 95% at 50% 46%, transparent 50%, rgba(0,0,0,.58) 100%),
      linear-gradient(180deg, rgba(6,5,7,.30), rgba(6,5,7,.10) 45%, rgba(6,5,7,.34))}
  @media (orientation:portrait){
    .hero-media img,.hero-media video{object-position:50% 12%} /* tall-but-wide boxes (tablets) keep the face, never the floor */
    .hero-media::after{background:
      linear-gradient(0deg, rgba(6,5,7,.90) 0, rgba(6,5,7,.86) 330px, rgba(6,5,7,.40) 410px, rgba(6,5,7,.06) 480px), /* floor under the bottom-anchored lockup; face + upper body read clean above it */
      radial-gradient(90% 30% at 50% 6%, rgba(239,28,37,.16), transparent 70%),
      radial-gradient(90% 40% at 50% 106%, rgba(10,58,139,.38), transparent 72%),
      radial-gradient(150% 95% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%)}
  }
  /* Pause control REMOVED 2026-10-31 at the client's explicit request (Jack: "make the video just play"). WCAG 2.2.2 is knowingly
     waived; the remaining safeguards: reduced motion / Save-Data / 2G / no-JS get the still poster, and it pauses off-screen + in hidden tabs. */
  @media (prefers-reduced-motion:reduce){.hero-media video{display:none!important}} /* belt + braces: JS never attaches it */

  /* ===== BEGIN HERCULES · HERO LOCKUP (2026-10-31, inside Juan's direction) — port as one block =====
     One move: his own marks sign the frame under his face. The red "Philly Haze" logo IS the h1; the GOYAAAA flag sticker is the
     shout line (measured: the name carries 2.5-3x its visual weight); then the CTAs. A LOWER THIRD (Jack: "move the logos down
     so we can see more"): the stack is bottom-anchored everywhere, so the footage owns the top of the frame.
     - landscape: name = min(540px, .64 x stage height); sticker + CTAs share one row under it (top ~57% of the stage is clean at 1440x900).
     - portrait: same stack, bottom-anchored; padding-top is a FACE FLOOR computed from the loop's crop geometry
       (face bottom = 12% of the crop overflow + 336/1280 of the scaled frame) so short Safari viewports can't push type onto him.
     Needs: .stage/.hero-media/.wrap from the hero video wall, --nav-h. Image files are never recoloured. */
  .hero-name{position:relative;margin:0;line-height:0}
  .hero-name img,.hero-goya img{display:block;height:auto;max-width:none}
  .hero-name img{aspect-ratio:2085/716;width:min(88vw,760px)}
  .hero-row{display:flex;flex-direction:column;align-items:center;gap:inherit}
  .hero-goya{margin:-4px 0 0;line-height:0}
  .hero-goya img{aspect-ratio:1669/718;width:calc(min(88vw,760px)*.44)}
  .hero-name::before{content:"";position:absolute;z-index:-1;inset:-16% max(-8%,calc((100% - 100vw)/2));pointer-events:none; /* local scrim behind the red name only (red on red-graded footage); never wider than the viewport (bleed scar: it spilled 4px at 375). Measured: halves its sub-3:1 pixels */
    background:radial-gradient(closest-side,rgba(6,5,7,.74),rgba(6,5,7,.58) 52%,rgba(6,5,7,0) 100%)}
  /* Lower third (Jack, 2026-10-31: "move the logos down so we can see more"): bottom-anchored on every screen; on landscape the
     sticker and the CTAs share one row under a smaller name, so the top ~57% of the frame is clean footage. */
  .stage{justify-content:flex-end}
  @media (orientation:landscape){
    .stage{padding-bottom:clamp(20px,4vh,36px)}
    .hero-name img{width:min(88vw,540px,calc((100vh - var(--nav-h))*.64));width:min(88vw,540px,calc((100svh - var(--nav-h))*.64))}
    .hero-row{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:14px 22px;margin-top:-6px}
    .hero-row .hero-goya{margin:0}
    .hero-row .cta-row{margin-top:0}
    .hero-goya img{width:calc(min(88vw,540px,calc((100vh - var(--nav-h))*.64))*.4);width:calc(min(88vw,540px,calc((100svh - var(--nav-h))*.64))*.4)}
  }
  @media (orientation:portrait){
    .stage{padding-bottom:max(20px,calc(env(safe-area-inset-bottom,0px) + 12px)); /* padding-top below = the face floor: a minimum, the stack sits on the bottom */
      padding-top:calc(16px + max(.12*(100vh - var(--nav-h)) + 25.33%, .2625*(100vh - var(--nav-h))));
      padding-top:calc(16px + max(.12*(100svh - var(--nav-h)) + 25.33%, .2625*(100svh - var(--nav-h))))}
  }
  /* ===== END HERCULES · HERO LOCKUP ===== */

  /* ===== BEGIN HERCULES · RED TAPE DOCK — a quiet SMOKE chip (Juan's .pill.ghost): last in the stack; bottom-left corner on landscape >=1180px ===== */
  .pill.drop-dock{gap:10px;min-height:0;max-width:min(100%,250px);margin-top:4px;padding:5px 15px 5px 5px;border-radius:14px; /* a two-line chip that hugs its text (the 11/18/26 date no longer fits one line at 375) */
    justify-content:flex-start;text-align:left;font-size:11.5px;letter-spacing:.1em;line-height:1.3}
  .drop-dock picture{flex:none;line-height:0}
  .drop-cover{display:block;width:42px;height:42px;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px rgba(239,28,37,.45),0 4px 10px rgba(0,0,0,.5)}
  .drop-line{text-wrap:balance}
  .drop-dock.is-covered{visibility:hidden} /* only while the drop-alert card sits on top of it (same message) */
  @media (orientation:landscape) and (min-width:1180px){ /* wide screens: the dock docks bottom-left (where the drop-alert card rises), out of the lockup */
    .pill.drop-dock{position:absolute;left:max(18px,env(safe-area-inset-left,0px));bottom:clamp(20px,4vh,36px);max-width:250px;margin:0}}
  /* ===== END HERCULES · RED TAPE DOCK ===== */

  /* ===== BEGIN HERCULES · DROP ALERT trap — non-modal card in Juan's FIRE/SMOKE system; JS-only (hidden in markup) =====
     Bottom-left card; a bottom sheet on phones. Its script keeps it off the hero lockup (eyebrow, both logos, CTAs) at every
     scroll position. Needs Juan's .pill (FIRE) + tokens; nothing else. */
  .drop-trap{position:fixed;z-index:45;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,calc(env(safe-area-inset-bottom,0px) + 12px));
    width:min(330px,calc(100vw - 32px));padding:14px 16px;border-radius:18px;color:var(--bone);
    background:radial-gradient(90% 80% at 100% 0%,var(--glow-red),transparent 62%),var(--surface);border:1px solid var(--edge);
    box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-lift),var(--ring-red);
    transition:transform .42s var(--ease-swoop),opacity .28s var(--ease-swoop),visibility 0s}
  .drop-trap[hidden]{display:none}
  .drop-trap:not(.is-in),.drop-trap.is-tucked{transform:translateY(calc(100% + 32px));opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .3s var(--ease-swoop),opacity .2s var(--ease-swoop),visibility 0s .3s}
  .drop-trap.is-measure{transform:none!important;transition:none!important}
  .drop-h{margin:0 46px 2px 0;font-family:var(--display);font-weight:400;font-size:22px;line-height:1.05;letter-spacing:.05em;text-transform:uppercase}
  .drop-sub{margin:0 0 10px;font-size:13.5px;line-height:1.35;color:var(--bone-dim)}
  .drop-row{display:flex;flex-wrap:wrap;gap:8px}
  .drop-f{display:flex;flex-direction:column;gap:4px;flex:1 1 130px;min-width:0}
  .drop-f.is-email{flex:1.2 1 150px}
  .drop-f>span{font-size:11.5px;font-weight:700;letter-spacing:.02em;line-height:1.2;color:var(--bone-dim)}
  .drop-f input{font:inherit;font-size:16px;color:var(--bone);background:rgba(0,0,0,.35);border:1px solid var(--edge-hi);border-radius:12px;
    padding:0 .8em;min-height:48px;width:100%;box-sizing:border-box}
  .drop-f input:focus-visible{outline:2px solid var(--pr-red);outline-offset:2px}
  .drop-actions{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
  .pill.drop-submit{min-height:48px;padding:0 1.15em;font-family:inherit;font-size:12px;letter-spacing:.14em;cursor:pointer}
  .pill.drop-submit[aria-disabled="true"]{opacity:.7;cursor:progress}
  .drop-nothanks{min-height:44px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--bone-dim);font:inherit;font-size:13px;font-weight:700;cursor:pointer;
    text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(246,241,231,.35);-webkit-tap-highlight-color:transparent}
  .drop-nothanks:hover{color:var(--bone);text-decoration-color:currentColor}
  .drop-nothanks:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
  .drop-consent{margin:6px 0 0;font-size:11px;line-height:1.35;color:var(--muted)}
  .drop-status{margin:6px 0 0;font-size:13px;line-height:1.35;color:var(--bone)}
  .drop-status:empty{margin:0}
  .drop-status a{color:var(--bone);text-underline-offset:3px}
  .drop-trap.is-joined .drop-row,.drop-trap.is-joined .drop-actions,.drop-trap.is-joined .drop-consent{display:none}
  .drop-trap.is-joined .drop-status{font-size:14px}
  .drop-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0} /* honeypot (own copy, so the block ports without the booking form) */
  .drop-close{position:absolute;top:9px;right:9px;width:36px;height:36px;padding:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;
    -webkit-appearance:none;appearance:none;color:var(--bone);background:rgba(6,5,7,.62);border:1px solid var(--smoke-rim);
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:background-color var(--dur-1) var(--ease-swoop),transform var(--dur-1) var(--ease-swoop),box-shadow var(--dur-1) var(--ease-swoop)}
  .drop-close::before{content:"";position:absolute;inset:-5px;border-radius:50%} /* 36px face, 44px tap target: inset = 4 + the 1px border (Scar P2) */
  .drop-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  @media (hover:hover){.drop-close:hover{background:rgba(6,5,7,.85);box-shadow:0 0 0 1px var(--heat-rim)}}
  .drop-close:active{transform:scale(.92)}
  .drop-close:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
  html.drop-open{scroll-padding-bottom:calc(var(--drop-h,0px) + 24px)}
  html.drop-open .foot{padding-bottom:calc(40px + var(--drop-h,0px) + 8px)} /* the open card never covers the end of a page (wave 2 #5) */ /* a focused control never lands under the card (WCAG 2.4.11) */
  @media (max-width:560px){.drop-trap{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));width:auto;
    bottom:max(8px,env(safe-area-inset-bottom,0px));padding:12px;border-radius:16px}}
  @media (prefers-reduced-motion:reduce){.drop-trap,.drop-trap:not(.is-in),.drop-trap.is-tucked{transition:none}} /* it appears; it doesn't slide */
  /* ===== END HERCULES · DROP ALERT ===== */

  /* ---------- MARQUEE / LINEAGE ---------- */
  .marquee{overflow:hidden;border-block:1px solid rgba(239,28,37,.35);background:linear-gradient(90deg,var(--pr-red-2),var(--pr-red));padding-block:9px}
  .marquee.dark{background:var(--ink-2);border-color:rgba(246,241,231,.1)}
  .marquee .track{display:inline-flex;white-space:nowrap;font-family:var(--display);text-transform:uppercase;letter-spacing:.1em;
    font-size:clamp(15px,3.2vw,20px);color:var(--bone);animation:scroll 46s linear infinite}
  .marquee.dark .track{color:var(--bone-dim)}
  .marquee .track span{display:inline-flex;align-items:center;gap:26px;padding-right:26px}
  .marquee .track i{color:var(--gold);font-style:normal}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- SECTIONS ---------- */
  section.band{padding-block:clamp(48px,9vh,96px);position:relative}
  section.band>.wrap{position:relative;z-index:1}
  section.band::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(55% 42% at 4% -6%,var(--glow-red),transparent 60%),radial-gradient(58% 48% at 100% 106%,var(--glow-blue),transparent 62%)}
  .band.alt{background:linear-gradient(180deg,var(--ink-2),var(--ink));box-shadow:inset 0 1px 0 rgba(246,241,231,.04)}
  .band.alt::before{background:radial-gradient(55% 42% at 100% -6%,var(--glow-blue),transparent 60%),radial-gradient(58% 48% at 0% 106%,var(--glow-red),transparent 62%)}
  .sec-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(22px,4vh,38px);text-align:center;align-items:center}
  .sec-head h1,.sec-head h2{font-family:var(--display);text-transform:uppercase;font-size:clamp(32px,8.5vw,70px);letter-spacing:.04em;margin:0;line-height:.92}
  .sec-head p.k2{color:var(--muted);max-width:52ch;margin:0;font-size:clamp(14px,3.2vw,16px)}
  .rule{height:3px;width:72px;border-radius:2px;background:linear-gradient(90deg,var(--pr-blue) 0 34%,var(--bone) 34% 50%,var(--pr-red) 50% 100%)}

  /* ABOUT */
  .bio{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(22px,5vw,50px);align-items:start}
  .bio .copy{min-width:0}
  .bio .copy .lead{font-family:var(--body);font-weight:600;font-size:clamp(17px,3.9vw,21px);line-height:1.5;color:var(--bone);margin:0 0 18px;max-width:60ch}
  .bio .copy .lead em{color:var(--pr-red-text);font-style:normal;font-weight:800}
  .bio-body p{font-size:clamp(15.5px,3.4vw,17px);line-height:1.66;color:var(--bone-dim);margin:0 0 14px;max-width:62ch;text-wrap:pretty}
  .bio-body p:last-child{margin-bottom:0}
  .bio-body p strong{color:var(--bone)}
  .bio-body[hidden],.bio-toggle[hidden]{display:none}
  .bio-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:18px;padding:0 1.3em;border-radius:999px;
    -webkit-appearance:none;appearance:none;font:inherit;font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:12px;cursor:pointer}
  .pullquote cite{display:block;margin-top:14px;font-style:normal;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--gold)}
  .pullquote{position:relative;isolation:isolate;max-width:28ch;margin:clamp(28px,5.5vw,48px) auto 0;padding:0 8px;text-align:center}
  .pullquote p{font-family:var(--body);font-weight:800;font-size:clamp(23px,5.3vw,40px);line-height:1.14;letter-spacing:-.01em;color:var(--bone);margin:0}
  .pullquote::before{content:"\201C";position:absolute;z-index:-1;top:-.34em;left:50%;transform:translateX(-50%);font-family:var(--body);font-weight:900;font-size:clamp(66px,15vw,120px);line-height:1;color:var(--pr-red);opacity:.2}
  .pullquote::after{content:"";display:block;width:84px;height:3px;margin:18px auto 0;border-radius:2px;background:linear-gradient(90deg,var(--pr-blue) 0 34%,var(--bone) 34% 50%,var(--pr-red) 50% 100%)}
  .facts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:clamp(26px,5vw,40px) auto 0;max-width:720px}
  .facts .chip{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:var(--bone);border:1px solid var(--edge);border-radius:999px;padding:.55em .95em;background:var(--surface);box-shadow:inset 0 1px 0 var(--edge-hi)}
  .facts .chip b{color:var(--gold)}
  .emblem{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(18px,4vw,30px);border:1px solid rgba(239,28,37,.25);border-radius:18px;box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-card);
    background:radial-gradient(85% 60% at 50% 6%,var(--glow-blue),transparent 66%),radial-gradient(80% 60% at 50% 112%,var(--glow-red),transparent 62%),var(--surface)}
  .emblem .cap{font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--muted);text-align:center}
  .emblem .cap b{color:var(--gold)}
  .emblem svg{width:clamp(120px,30vw,170px);height:auto}

  /* VIDEO GRIDS */
  .grid{display:grid;gap:18px}
  .grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
  .vcard{display:flex;flex-direction:column;gap:10px}
  .vcard .meta{display:flex;flex-direction:column;gap:3px}
  .vcard h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(18px,4.6vw,26px);margin:0;line-height:1}
  .vcard .sub{color:var(--muted);font-size:13px;font-weight:600}
  .vcard .sub b{color:var(--pr-red-text);display:inline-block}
  .tag{align-self:flex-start;font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--bone);background:var(--fire-mid);padding:.4em .7em;border-radius:999px} /* fire-mid: bone 4.82:1 (flat pr-red was 3.84) */
  .tag.soon{background:transparent;color:var(--gold);border:1px solid rgba(245,197,66,.5)}
  .frame{position:relative;border-radius:14px;overflow:hidden;background:#000;box-shadow:var(--shadow-card),var(--ring-red)}
  .frame.wide{aspect-ratio:16/9}
  .frame.tall{aspect-ratio:9/16;max-width:360px;width:100%;margin:0 auto}
  .frame video,.frame iframe{width:100%;height:100%;display:block;border:0;background:#000;object-fit:contain}
  /* YT facade */
  .yt{position:relative;width:100%;height:100%;cursor:pointer;background-size:cover;background-position:center;background-color:#000}
  .yt::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.45))}
  .yt .play{position:absolute;inset:0;margin:auto;width:66px;height:66px;border-radius:50%;border:1px solid transparent;
    display:flex;align-items:center;justify-content:center;
    transition:transform var(--dur-1) var(--ease-swoop),box-shadow var(--dur-1) var(--ease-swoop)}
  .yt .play::after{content:"";border-left:20px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}

  /* MEDIA / MERCH / BOOK shared card */
  .softcard{border:1px solid var(--edge);border-radius:16px;background:radial-gradient(90% 60% at 100% 0%,var(--glow-red),transparent 60%),var(--surface);padding:clamp(18px,4vw,28px);box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-card)}
  .slotgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px}
  .slot{position:relative;isolation:isolate;overflow:hidden;border:1px dashed rgba(246,241,231,.22);border-radius:14px;min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:20px;box-shadow:var(--shadow-card);
    background:radial-gradient(85% 60% at 15% 0%,var(--glow-red),transparent 60%),radial-gradient(85% 70% at 85% 112%,var(--glow-blue),transparent 62%),var(--surface)}
  .slot .big{font-family:var(--display);text-transform:uppercase;font-size:clamp(18px,4.6vw,26px);letter-spacing:.03em;line-height:1}
  .slot .small{color:var(--muted);font-size:13px;max-width:28ch}
  .slot::after,.scaffold::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
    background:radial-gradient(62% 55% at 50% 18%,var(--glow-gold),transparent 72%);animation:breathe 7s ease-in-out infinite}
  .scaffold{position:relative;isolation:isolate;overflow:hidden;
    background:radial-gradient(85% 60% at 15% 0%,var(--glow-red),transparent 60%),radial-gradient(85% 70% at 85% 112%,var(--glow-blue),transparent 62%),var(--surface)}
  @keyframes breathe{0%,100%{opacity:.25}50%{opacity:.6}}

  /* streaming + socials buttons */
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .btnrow a,.btnrow .pending{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 1.15em;border-radius:999px;
    font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:12px;text-decoration:none}
  .btnrow .pending{color:var(--muted);background:none;border:1px dashed rgba(246,241,231,.26);cursor:default} /* NOT LIVE: flat, dashed, no depth, no heat, no press */

  /* discography / album cards */
  .disco{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:16px}
  .album{display:block;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:var(--surface);text-decoration:none;color:var(--bone);box-shadow:var(--shadow-card);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
  .album:hover,.album:focus-visible{transform:translateY(-4px);border-color:var(--pr-red);box-shadow:var(--shadow-lift),var(--ring-red);outline:none}
  .album img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--panel-2)}
  .album .al-meta{padding:12px 14px}
  .album .al-meta h3,.album .al-meta h4{margin:0 0 4px;font-size:14px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
  .album .al-meta span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
  .album .al-meta .plat{color:var(--gold);font-weight:700;margin-top:6px;text-transform:uppercase;letter-spacing:.08em;font-size:10px}

  /* BOOK steps */
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:14px;margin-bottom:26px}
  .step{position:relative;overflow:hidden;border:1px solid var(--edge);border-radius:14px;padding:18px;background:radial-gradient(90% 70% at 0% 0%,var(--glow-red),transparent 62%),var(--surface);box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-card)}
  .step .n{font-family:var(--display);color:var(--pr-red);font-size:26px;line-height:1}
  .step h3,.step h4{margin:.3em 0 .25em;text-transform:uppercase;letter-spacing:.06em;font-size:15px}
  .step p{margin:0;color:var(--muted);font-size:13px}
  .mail{display:inline-flex;align-items:center;gap:.55em;min-height:56px;padding:0 1.5em;border-radius:999px;
    font-weight:800;font-size:clamp(15px,4vw,20px);text-decoration:none}
  .mail svg{width:20px;height:20px;fill:currentColor}

  .foot{position:relative;text-align:center;padding-block:40px;font-family:var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--pr-red-text);font-size:clamp(16px,4vw,22px);border-top:1px solid rgba(246,241,231,.08);background:radial-gradient(60% 140% at 50% 120%,var(--glow-red),transparent 70%)}
  .foot::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:120px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--pr-blue) 0 34%,var(--bone) 34% 50%,var(--pr-red) 50% 100%)}
  .foot small{display:block;font-family:var(--body);letter-spacing:.04em;color:var(--muted);font-size:12px;margin-top:8px;text-transform:none}

  /* ---------- FIRE BUTTONS — one tactile system ----------
     FIRE  (primary)   lacquered flag-red on an extruded ember base: hero NEW MUSIC, nav BOOK, booking mail, video play discs
     SMOKE (secondary) dark lacquer on an ember base that heats up: hero WATCH BATTLES, every live .btnrow link, bio toggle
     NOT LIVE (.pending) stays flat + dashed (above) — no depth, no heat, no press.
     Hover is gated to real hover pointers (no sticky lift on phones); :active presses everywhere; focus-visible = hover + gold ring. */
  .pill,.navlinks a.book,.mail,.btnrow a,.bio-toggle{position:relative;border:1px solid transparent; /* transparent border = visible edge in forced-colors */
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:transform var(--dur-1) var(--ease-swoop),box-shadow var(--dur-1) var(--ease-swoop)}
  .pill:not(.ghost),.navlinks a.book,.mail,.yt .play{color:var(--bone);text-shadow:var(--engrave);
    background-color:var(--fire-mid);background-image:var(--fire-face);
    --rest:inset 0 1px 0 var(--lacquer),inset 0 -3px 0 var(--shade),
      0 var(--btn-depth) 0 var(--fire-edge),0 calc(var(--btn-depth) + 6px) 14px -4px var(--contact),
      0 8px 26px -10px var(--heat-red),0 0 0 0 transparent;
    --hot:inset 0 1px 0 var(--lacquer-hot),inset 0 -2px 0 var(--heat-gold),
      0 calc(var(--btn-depth) + var(--btn-lift)) 0 var(--fire-edge),0 calc(var(--btn-depth) + var(--btn-lift) + 10px) 20px -6px var(--contact),
      0 12px 34px -8px var(--heat-red),0 18px 46px -14px var(--heat-gold);
    --pressed:inset 0 2px 6px var(--press-shade),inset 0 -1px 0 var(--shade),
      0 calc(var(--btn-depth) - var(--btn-sink)) 0 var(--fire-edge),0 calc(var(--btn-depth) - var(--btn-sink) + 2px) 4px -1px var(--contact),
      0 4px 14px -8px var(--heat-red),0 0 0 0 transparent;
    box-shadow:var(--rest)}
  .pill.ghost,.btnrow a,.bio-toggle,#book a.mail[href^="mailto:"]{color:var(--bone);background-color:var(--panel-2);background-image:var(--smoke-face);
    --rest:inset 0 1px 0 var(--smoke-lite),inset 0 -3px 0 var(--smoke-shade),0 0 0 1px var(--smoke-rim),
      0 var(--btn-depth) 0 var(--smoke-edge),0 calc(var(--btn-depth) + 6px) 14px -4px var(--contact),0 8px 24px -12px transparent;
    --hot:inset 0 1px 0 var(--smoke-lite-hot),inset 0 -2px 0 var(--ember-seam),0 0 0 1px var(--heat-rim),
      0 calc(var(--btn-depth) + var(--btn-lift)) 0 var(--smoke-edge-hot),0 calc(var(--btn-depth) + var(--btn-lift) + 10px) 20px -6px var(--contact),
      0 12px 30px -10px var(--heat-red);
    --pressed:inset 0 2px 7px var(--press-shade),inset 0 -1px 0 var(--smoke-shade),0 0 0 1px var(--heat-rim),
      0 calc(var(--btn-depth) - var(--btn-sink)) 0 var(--smoke-edge-hot),0 calc(var(--btn-depth) - var(--btn-sink) + 2px) 4px -1px var(--contact),
      0 4px 12px -8px var(--heat-red);
    box-shadow:var(--rest)}
  .navlinks a.book{--btn-depth:3px;--btn-lift:1px;--btn-sink:2px; /* nav is chrome: compact heat that fits the scroller's 9px clip room */
    --rest:inset 0 1px 0 var(--lacquer),inset 0 -2px 0 var(--shade),0 var(--btn-depth) 0 var(--fire-edge),
      0 calc(var(--btn-depth) + 2px) 5px -2px var(--contact),0 0 0 0 transparent,0 0 0 0 transparent;
    --hot:inset 0 1px 0 var(--lacquer-hot),inset 0 -2px 0 var(--heat-gold),0 calc(var(--btn-depth) + var(--btn-lift)) 0 var(--fire-edge),
      0 calc(var(--btn-depth) + var(--btn-lift) + 2px) 6px -2px var(--contact),0 0 10px -2px var(--heat-red),0 0 0 0 transparent;
    --pressed:inset 0 2px 5px var(--press-shade),inset 0 -1px 0 var(--shade),0 calc(var(--btn-depth) - var(--btn-sink)) 0 var(--fire-edge),
      0 calc(var(--btn-depth) - var(--btn-sink) + 1px) 3px -1px var(--contact),0 0 6px -2px var(--heat-red),0 0 0 0 transparent}
  @media (hover:hover){
    .pill:hover,.navlinks a.book:hover,.mail:hover,.btnrow a:hover,.bio-toggle:hover,.yt:hover .play{
      transform:translateY(calc(var(--btn-lift) * -1));box-shadow:var(--hot)}
  }
  .pill:focus-visible,.navlinks a.book:focus-visible,.mail:focus-visible,.btnrow a:focus-visible,.bio-toggle:focus-visible,.yt:focus-visible .play{
    transform:translateY(calc(var(--btn-lift) * -1));box-shadow:var(--hot);outline:2px solid var(--focus);outline-offset:3px}
  .yt:focus-visible{outline:none} /* its own ring is clipped by .frame — the play disc carries the focus instead */
  .pill:active,.navlinks a.book:active,.mail:active,.btnrow a:active,.bio-toggle:active,.yt:active .play{
    transform:translateY(var(--btn-sink));box-shadow:var(--pressed);transition-duration:var(--dur-press)}

  @media (max-width:760px){.bio{grid-template-columns:1fr}.emblem{max-width:420px;margin-inline:auto}}
  @media (prefers-reduced-motion:reduce){:root{--dur-1:1ms;--dur-press:1ms}
    .glow,.dot,.marquee .track,.reveal,.slot::after,.scaffold::after{animation:none;opacity:1;transform:none}}
  /* MERCH shop: real pieces on product cards (white product shots sit on lit surface cards) */
  .merchgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px}
  .merch{display:flex;flex-direction:column;min-width:0;border-radius:16px;overflow:hidden;background:var(--surface);border:1px solid var(--edge);box-shadow:var(--shadow-card)}
  .merch img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#fff}
  .merch-meta{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px 2px}
  .merch-meta h3{margin:0 0 4px;font-size:16px;line-height:1.15;text-transform:uppercase;letter-spacing:.04em;color:var(--bone)}
  .merch-meta span{display:block;font-size:12.5px;line-height:1.35;color:var(--muted)}
  .merch .price{font-family:var(--display);font-weight:400;font-size:26px;line-height:1;color:var(--gold);letter-spacing:.02em;white-space:nowrap}
  .merch .btnrow{justify-content:flex-start;padding:12px 16px 16px;margin-top:auto}
  .merch-note{text-align:center;margin:22px auto 0;color:var(--muted);font-size:14px}
  .merch-note a{color:var(--bone);text-underline-offset:3px}

  /* LEAD FORM (CRM v0): dark fields on a lit card; the submit reuses Juan's FIRE .mail system */
  .lead-form{color-scheme:dark;max-width:760px;margin:6px auto 28px;padding:clamp(18px,4vw,28px);border-radius:18px;background:var(--surface);border:1px solid var(--edge);box-shadow:var(--shadow-card)}
  .lf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .lf{display:flex;flex-direction:column;gap:6px;min-width:0}
  .lf-wide{grid-column:1/-1}
  .lf span{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--muted)}
  .lf input,.lf select,.lf textarea{font:inherit;font-size:16px;color:var(--bone);background:rgba(0,0,0,.35);border:1px solid var(--edge);border-radius:12px;padding:.75em .9em;min-height:48px;width:100%;box-sizing:border-box}
  .lf textarea{resize:vertical;min-height:112px}
  .lf ::placeholder{color:var(--muted);opacity:1}
  .lf input:focus-visible,.lf select:focus-visible,.lf textarea:focus-visible{outline:2px solid var(--pr-red);outline-offset:2px}
  .lf-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
  .lf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
  .lead-form button.mail{font-family:inherit;cursor:pointer}
  .lead-form button.mail[disabled]{opacity:.7;cursor:progress}
  .lf-status{margin:0;font-size:14px;color:var(--bone-dim)}
  .lf-status a{color:var(--bone)}
  .lf-note{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
  @media (max-width:560px){.lf-grid{grid-template-columns:1fr}}

/* ==================== MULTI-PAGE LAYER (Juan, 2026-10-31) ====================
   Appended after base.css (the one-pager's stylesheet, kept near-verbatim so Hercules' diff patches into it).
   Navigation model: DISCRETE PAGES. Real page loads: a forward click lands at the top of the new page, Back restores
   the browser's own scroll, and #anchors win (scroll-padding-top clears the sticky nav). No SPA, no view transitions. */
:root{
  /* small red TEXT on panels: flag red is 4.22:1 on --panel-2 and 3.87:1 inside the red glow (Scar 11).
     16% bone in OKLab = 5.39:1 on --panel-2, 4.55:1 on a 20% red glow, 6.02:1 on ink. Flag red stays for fills. */
  --pr-red-text:color-mix(in oklab,var(--pr-red),var(--bone) 16%);
  --z-card-link:5;              /* stretched door links: above image wrappers, below every chrome layer */
  --z-skip:70;                  /* skip link: above the nav (40/41), the trap (45) and the grain (60) */
  --page-top-pad:clamp(22px,4.5vh,48px);
  --door-gap:18px;
  --row-h:232px;                /* gallery: target row height; rows justify to the full width at native aspect */
}
@supports not (color:color-mix(in oklab,red,blue)){:root{--pr-red-text:#F55349}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* the one-pager smooth-scrolled even under reduce */

/* visually hidden (owned here: Hercules' final CSS has none) */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* skip link: hidden by transform, never left:-9999px (RTL overflow, Scar 25) */
.skip{position:fixed;z-index:var(--z-skip);left:max(12px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 8px);
  transform:translateY(-200%);padding:.75em 1.1em;border-radius:12px;background:var(--bone);color:var(--ink);
  font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:12px;text-decoration:none}
.skip:focus{transform:none;outline:2px solid var(--focus);outline-offset:3px}

/* NAV: you-are-here. Shape (bar) + value (bone), never colour alone. BOOK on /book/ rests pressed in. */
.navlinks a[aria-current="page"]:not(.book){color:var(--bone);background:rgba(239,28,37,.10);box-shadow:inset 0 -2px 0 var(--pr-red)}
.navlinks a.book[aria-current="page"]{transform:translateY(var(--btn-sink));box-shadow:var(--pressed)}

/* PAGE HEAD: the first box on every page is static (no .reveal): animating the anchor kills orientation (Scar 17) */
.band.page-top{padding-top:var(--page-top-pad)}
.crumbs{margin:0 0 10px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.15em .55em;
  font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:11px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:.55em;color:var(--edge-hi)}
.crumbs a{display:inline-block;padding:6px 2px;color:var(--bone-dim);text-decoration:none;text-underline-offset:3px}
.crumbs a:hover{color:var(--bone);text-decoration:underline}
.crumbs a:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}

/* ---------- DOORS: one whole-card door per page (Home), and "Up next" at the foot of each page ----------
   The title link stretches over the card (::after on --z-card-link); everything else in the card is pointer-transparent. */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--door-gap)}
.door{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--edge);border-radius:16px;
  overflow:hidden;overflow:clip; /* clip, not a scroll container (text-fragment links) */
  background:radial-gradient(90% 60% at 100% 0%,var(--glow-red),transparent 60%),var(--surface);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-card);
  transition:transform .3s var(--ease-swoop),border-color .3s var(--ease-swoop),box-shadow .3s var(--ease-swoop)}
.door-media{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
/* video thumbnails are 4:3 with letterbox bars; a centred 16:9 cover trims exactly the bars and nothing of the frame */
.door-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.door-media--sq{aspect-ratio:1/1}
.door-media--product{background:#fff}
.door-media--product img{object-fit:contain;padding:6px 0}
.door-media--quote{display:grid;place-items:center;padding:0 8%;
  background:radial-gradient(70% 90% at 50% 120%,rgba(239,28,37,.34),transparent 70%),radial-gradient(60% 70% at 0% 0%,var(--glow-blue),transparent 70%),var(--ink-2)}
.door-quote{margin:0;font-family:var(--body);font-weight:800;font-size:clamp(14px,2.6vw,30px);line-height:1.12;letter-spacing:-.01em;color:var(--bone);text-align:center}
.door-body{display:flex;flex-direction:column;gap:6px;padding:16px 46px 20px 18px;min-width:0}
.door-h{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(24px,3.1vw,32px);line-height:1;margin:2px 0 0}
.door-link{color:inherit;text-decoration:none}
.door-link::after{content:"";position:absolute;inset:0;z-index:var(--z-card-link);border-radius:inherit}
.door-line{margin:0;color:var(--muted);font-size:14px;line-height:1.45}
.door-go{position:absolute;right:16px;bottom:14px;font-weight:800;font-size:20px;line-height:1;color:var(--pr-red-text);transition:transform .3s var(--ease-swoop)}
@supports selector(:has(a)){
  .door-link:focus-visible{outline:none}
  .door:has(.door-link:focus-visible){outline:2px solid var(--focus);outline-offset:3px;border-color:var(--pr-red)}
}
@media (hover:hover){
  .door:hover{transform:translateY(-4px);border-color:rgba(239,28,37,.55);box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-lift),var(--ring-red)}
  .door:hover .door-go{transform:translateX(4px)}
}
.door:active{transform:translateY(1px);transition-duration:var(--dur-press)}
@media (prefers-reduced-motion:reduce){.door,.door-go{transition:none}.door:hover,.door:active,.door:hover .door-go{transform:none}}

.door--feature{grid-column:1/-1;flex-direction:row;align-items:center}
.door--feature .door-media{flex:0 0 min(300px,38%);align-self:center}
.door--feature .door-body{padding:clamp(18px,3vw,34px) 56px clamp(18px,3vw,34px) clamp(18px,3vw,34px)}
.door--feature .door-h{font-size:clamp(30px,5vw,54px)}
.door--feature .door-line{font-size:15px;max-width:46ch}
.door--cta,.door--next{grid-column:1/-1}
.door--cta{border-color:rgba(239,28,37,.34);
  background:radial-gradient(80% 140% at 0% 0%,rgba(239,28,37,.24),transparent 60%),radial-gradient(70% 120% at 100% 100%,var(--glow-blue),transparent 62%),var(--surface)}
.door--cta .door-h{font-size:clamp(30px,5vw,48px)}
.door--cta .door-body,.door--next .door-body{padding:clamp(18px,3vw,28px) 60px clamp(18px,3vw,28px) clamp(18px,3vw,28px)}
.door--cta .door-go,.door--next .door-go{top:50%;bottom:auto;margin-top:-12px;font-size:24px}
.next{margin-top:clamp(36px,7vh,64px)}
.door--next .door-h{font-size:clamp(26px,4.4vw,40px)}

@media (max-width:640px){
  .doors{grid-template-columns:1fr;gap:12px}
  /* phones: compact rows, media left at its own aspect (never stretched: that would re-crop faces) */
  .door{flex-direction:row;align-items:center}
  .door-media{flex:0 0 40%;align-self:center}
  .door--feature .door-media{flex-basis:36%;align-self:center}
  .door-body,.door--feature .door-body{padding:12px 38px 12px 14px;gap:3px}
  .door-h,.door--feature .door-h{font-size:22px}
  .door-line,.door--feature .door-line{font-size:13px;line-height:1.4}
  .door .eyebrow{font-size:10.5px;letter-spacing:.24em}
  .door-go{right:12px;bottom:auto;top:50%;margin-top:-10px}
  .door-quote{font-size:13.5px}
}

/* ---------- THE RED TAPE (music page lead) ---------- */
.rt-card{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:clamp(18px,4vw,44px);align-items:center;
  margin:0 0 clamp(34px,7vh,64px);padding:clamp(14px,3vw,28px);border:1px solid rgba(239,28,37,.32);border-radius:22px;
  background:radial-gradient(70% 90% at 0% 0%,rgba(239,28,37,.18),transparent 62%),radial-gradient(60% 70% at 100% 100%,var(--glow-blue),transparent 66%),var(--surface);
  box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-lift),var(--ring-red);scroll-margin-top:calc(var(--nav-h) + 14px)}
.rt-art img{display:block;width:100%;height:auto;aspect-ratio:1/1;border-radius:12px;background:var(--ink-2);
  box-shadow:0 26px 48px -20px rgba(0,0,0,.9),0 0 0 1px rgba(239,28,37,.38)}
.rt-body{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.rt-title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:.9;margin:0;
  font-size:clamp(44px,7.4vw,84px);color:var(--pr-red);text-shadow:0 3px 0 rgba(0,0,0,.45)} /* large display: 4.3:1 on the card, floor 3:1 */
.rt-date{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5em;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--gold)}
.rt-sep{color:var(--muted)}
.rt-x{color:var(--bone);border:1px solid var(--smoke-rim);border-radius:4px;padding:.2em .45em;font-size:10.5px;letter-spacing:.16em}
.rt-form{width:100%;max-width:560px}
.rt-line{margin:2px 0 0;color:var(--bone-dim);font-size:15px;line-height:1.5;max-width:52ch}
.rt-listen{justify-content:flex-start}
@media (max-width:760px){
  .rt-card{grid-template-columns:1fr}
  .rt-art{width:100%;max-width:420px;justify-self:center}
}

/* ---------- PHOTOS (/media/): justified rows, every photo at its native aspect: nothing is cropped ----------
   flex-grow = aspect ratio, so every item in a row lands at the same height. The ::after filler keeps the
   last row from blowing up. Captions sit under the photo (Maya): the img alt is empty, never read twice. */
.photos-head{margin:clamp(40px,8vh,72px) 0 0;text-align:center}
.photos-head h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(28px,6vw,46px);margin:0;line-height:1}
.gallery{list-style:none;margin:clamp(18px,3.5vh,30px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:16px}
.gallery::after{content:"";flex:999 1 0}
.gallery li{flex:var(--ar) 1 calc(var(--ar) * var(--row-h));min-width:0}
.gallery figure{margin:0;height:100%;display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:14px;
  overflow:hidden;overflow:clip;background:var(--surface);box-shadow:var(--shadow-card)}
.gallery img{display:block;width:100%;height:auto;object-fit:cover;object-position:var(--pos,50% 30%);background:var(--panel-2)}
.gallery figcaption{flex:1 0 auto;padding:10px 14px 12px;font-weight:700;font-size:13px;line-height:1.35;color:var(--bone-dim)}
.gallery figcaption b{color:var(--bone);font-weight:800}
@media (max-width:559px){.gallery{display:block}.gallery li{margin:0 0 14px}}

/* ---------- PHONE NAV: BOOK always on the bar; the rest in a no-JS <details> menu ----------
   Above 760px the one-pager's inline row is unchanged (and the menu is gone). */
.navmenu{display:none;position:relative;flex:none}
.navmenu summary{position:relative;list-style:none;display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 13px;border-radius:12px;cursor:pointer;
  font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--bone);background:rgba(6,5,7,.55);
  box-shadow:0 0 0 1px var(--smoke-rim);-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary::before{content:"";position:absolute;inset:-3px -2px} /* 42px face, 48px tap target */
.navmenu summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.navmenu[open] summary{box-shadow:0 0 0 1px var(--heat-rim);background:rgba(239,28,37,.14)}
.navmenu-bars{position:relative;width:16px;height:12px;border-block:2px solid currentColor}
.navmenu-bars::after{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:currentColor}
.navmenu-panel{position:absolute;right:0;top:calc(100% + 12px);width:min(268px,calc(100vw - 24px));padding:8px;border-radius:16px;
  display:flex;flex-direction:column;gap:2px;background:var(--panel);border:1px solid var(--edge);box-shadow:var(--shadow-lift),var(--ring-red)}
.navmenu-panel a{display:flex;align-items:center;min-height:48px;padding:0 14px;border-radius:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;font-size:13px;color:var(--bone-dim);text-decoration:none}
.navmenu-panel a:hover{color:var(--bone);background:rgba(239,28,37,.12)}
.navmenu-panel a[aria-current="page"]{color:var(--bone);background:rgba(239,28,37,.12);box-shadow:inset 3px 0 0 var(--pr-red)}
.navmenu-panel a:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
@media (max-width:760px){
  .navmenu{display:block}
  .nav .wrap{gap:10px}
  .brand{margin-right:auto}
  .navlinks{overflow:visible;padding:0;margin:0}
  .navlinks a:not(.book){display:none}
  .navlinks a.book{margin-left:0}
}

/* ---------- THE RED TAPE BUNDLES (under the album card; no checkout yet: order by DM / form). Flyer at a modest size,
   never a hero, never captioned. Cards are not links: one CTA row for the whole section (Maya). ---------- */
.rt-bundles{margin:0 0 clamp(36px,7vh,64px);scroll-margin-top:calc(var(--nav-h) + 14px)}
.rt-bundles-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;margin-bottom:clamp(16px,3vh,24px)}
.rt-bundles-head h2{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;font-size:clamp(28px,6vw,46px);margin:0;line-height:1}
.rt-intro{margin:2px 0 0;color:var(--bone-dim);font-size:15px;max-width:52ch}
.rt-bundles-body{display:grid;gap:clamp(16px,3vw,32px);align-items:start}
.rt-bundles-body.has-flyer{grid-template-columns:minmax(0,360px) minmax(0,1fr)}
.rt-flyer{margin:0}
.rt-flyer img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow-lift),0 0 0 1px rgba(239,28,37,.35)}
.rt-bundle-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rt-bundle{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--edge);border-radius:14px;
  background:radial-gradient(90% 120% at 0% 0%,var(--glow-red),transparent 62%),var(--surface);box-shadow:inset 0 1px 0 var(--edge-hi),var(--shadow-card)}
.rt-bundle-n{display:block;font-weight:800;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--pr-red-text);margin-bottom:3px}
.rt-bundle h3{margin:0;font-size:16px;line-height:1.2;text-transform:uppercase;letter-spacing:.05em;color:var(--bone)}
.rt-bundle p{margin:4px 0 0;font-size:13.5px;line-height:1.4;color:var(--muted)}
.rt-bundle .price{font-family:var(--display);font-weight:400;font-size:32px;line-height:1;color:var(--gold);white-space:nowrap}
.rt-avail{margin:14px 0 0;font-weight:800;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:var(--gold)}
.rt-order{margin:14px 0 10px;color:var(--bone-dim);font-size:14.5px}
.rt-order-row{justify-content:flex-start}
.rt-email{margin:12px 0 0;color:var(--muted);font-size:14px}
.rt-email a{color:var(--bone);text-underline-offset:3px}
@media (max-width:820px){.rt-bundles-body.has-flyer{grid-template-columns:1fr}.rt-flyer{order:2;max-width:240px;justify-self:center;width:100%}} /* phones: the offer first, the flyer supports it */

/* Home promo strip: one whole-card link to /music/#bundles, slimmer than a door */
.promo{margin:0 0 var(--door-gap)}
.door--promo{flex-direction:row;align-items:center;border-color:rgba(239,28,37,.34);
  background:radial-gradient(70% 160% at 0% 50%,rgba(239,28,37,.22),transparent 62%),var(--surface)}
.door--promo .door-media{flex:0 0 auto;width:clamp(64px,9vw,88px);aspect-ratio:auto;margin:12px 0 12px 12px;border-radius:8px;align-self:center;background:none}
.door--promo .door-media img{position:static;width:100%;height:auto;object-fit:contain}
.door--promo .door-body{padding:12px 56px 12px 16px;gap:2px}
.door--promo .door-h{font-size:clamp(22px,3vw,30px)}
.door--promo .door-go{top:50%;bottom:auto;margin-top:-11px}
@media (max-width:640px){.door--promo .door-media{flex-basis:auto;width:64px}}
/* Square checkouts: real per-card actions (different products), FIRE, money-key height (Scar 26: >=56px), no motion beyond the press */
.rt-bundle{grid-template-areas:"t p" "b b"}
.rt-bundle-t{grid-area:t}.rt-bundle .price{grid-area:p}
.rt-buys{grid-area:b;display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.pill.rt-buy{flex:1 1 200px;min-height:56px;font-size:12.5px;letter-spacing:.12em;padding:0 1.1em}
.rt-questions{margin:10px 0 0;font-size:14px}
.rt-questions a{color:var(--bone-dim);font-weight:700;text-underline-offset:3px;display:inline-block;padding:12px 0}
.rt-questions a:hover{color:var(--bone)}
.kp{white-space:nowrap}
.rt-avail{text-transform:none;letter-spacing:0;font-weight:700;font-size:14.5px;line-height:1.5;color:var(--bone-dim)}
.rt-avail time{color:var(--gold)}


/* ==================== WAVE 2 (review swarm, 2026-11-01) ==================== */
.crumbs a{position:relative}
.crumbs a::after{content:"";position:absolute;inset:-8px -6px} /* #10: 44px+ target, layout unmoved */
.yt.yt--43{background-size:contain;background-repeat:no-repeat} /* #16: Koga's title card is 4:3 art */
.yt.yt--scope{background-size:119% auto;background-position:center} /* #27: Ty Law's thumb is scope inside the letterbox */
.pullquote{max-width:none}
.pullquote p{max-width:20ch;margin-inline:auto;text-wrap:balance} /* #17 */
@media (min-width:761px){#about .bio .emblem{position:sticky;top:calc(var(--nav-h) + 24px)}} /* #17: no empty right column */
@media (max-width:560px){#book .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:18px}#book .step{padding:14px}#book .step .n{font-size:22px}} /* #18 */
.gallery figcaption{overflow-wrap:break-word}
.gallery figcaption b{display:inline-block} /* #19: names never split; no nowrap (320px overflow) */
.rt-intro,.door-line{text-wrap:balance} /* #26 */
.marquee:hover .track,.marquee:focus-within .track{animation-play-state:paused} /* #21: reduce already stops it (base) */
.photos-head .rule{margin:12px auto 0;display:block} /* #31: was an inline style */
.disco .album:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* #31: gold ring, like every other control */
.lf input,.lf select{height:48px}
.lf select:invalid{color:var(--muted)} /* #31: one control height; the unpicked select reads as a placeholder */
.rt-note{display:none;margin:4px 0 0;font-weight:700;font-size:14.5px;color:var(--bone);scroll-margin-top:calc(var(--nav-h) + 24px)}
.rt-note:target{display:block}
.rt-note a{color:var(--bone);text-underline-offset:3px}

/* MERCH: Square checkouts. The BUY link stretches over the whole card (#14), the small DM link sits above it. */
.merch{position:relative}
.merch picture{display:block}
.merch-buy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:12px 16px 16px;margin-top:auto}
.merch .merch-buy-link{position:static;flex:1 1 140px;min-height:56px;font-size:13px;letter-spacing:.14em}
.merch .merch-buy-link::after{content:"";position:absolute;inset:0;z-index:var(--z-card-link);border-radius:0}
.merch .merch-buy-link:hover,.merch .merch-buy-link:focus-visible,.merch .merch-buy-link:active{transform:none}
.merch-q{position:relative;z-index:calc(var(--z-card-link) + 1);display:inline-block;padding:12px 2px;font-weight:700;font-size:13px;color:var(--bone-dim);text-underline-offset:3px}
.merch-q:hover{color:var(--bone)}
@supports selector(:has(a)){.merch:has(.merch-buy-link:focus-visible){outline:2px solid var(--focus);outline-offset:3px}}
.sec-head p.k2{text-wrap:balance} /* intro lines never orphan a word ("shipping.") */