/* Larry the Zombie fan club: a standalone Larry identity. A fan page, not a sales page. */

:root {
  /* Larry palette */
  --crypt: #0A0F09;      /* page */
  --slab: #121A10;       /* cards */
  --peat: #1D2A1A;       /* raised, borders */
  --moss: #35462F;       /* his skin, true */
  --green: #86C16A;      /* Larry Green: logo, links, focus */
  --pink: #F08C7C;       /* Brain Pink: CTAs, scrawl */
  --pink-deep: #B4544A;  /* brain grooves */
  --hi: #FFE14D;         /* Highlighter: marker only, rare */
  --blue: #4C8DFF;       /* Verified Blue: the badge, his irises */
  --bone: #F1ECDD;       /* text */
  --mist: #B4B8A3;       /* secondary text */
  --dust: #7C836E;       /* muted text, 4.9:1 on Crypt */
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --marker: "Permanent Marker", "Comic Sans MS", cursive;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(18px, 4vw, 56px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; background: var(--crypt); color: var(--bone);
  font-family: var(--display); font-weight: 400; font-size: clamp(17px, 1.25vw, 19px); line-height: 1.55;
  font-variation-settings: "opsz" 18, "wdth" 100;
  overflow-x: hidden;
}
/* faint vignette over the page; the CRT scanlines live on the stage only, so text stays clean */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(0,0,0,.38) 100%);
}
img, svg { max-width: 100%; display: block; }
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--bone); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--pink); color: var(--crypt); padding: 10px 16px; border-radius: 999px; font-weight: 700; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- backdrop: the clubhouse behind him (js/backdrop.js) ---------- */
@property --hx { syntax: "<percentage>"; inherits: true; initial-value: 72%; }
@property --hy { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
#backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --bx: 0; --by: 0; transition: --hx 1.3s var(--ease), --hy 1.3s var(--ease); }
.bd-wall { position: absolute; inset: 0; background:
  radial-gradient(ellipse 75% 70% at var(--hx) var(--hy), #223320 0%, #131d11 50%, #0a0f09 100%); }
.bd-field { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(ellipse 15% 50% at var(--hx) var(--hy), rgba(0, 0, 0, .15), #000 78%); mask-image: radial-gradient(ellipse 15% 50% at var(--hx) var(--hy), rgba(0, 0, 0, .15), #000 78%); }
.bd-s { position: absolute; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .55)); will-change: transform; }
/* depth layers: js/backdrop.js driveBackdrop sets --px/--py from the real camera, so the room slides like it is behind him */
.bd-far { position: absolute; inset: -120px; translate: var(--px, 0px) var(--py, 0px); will-change: translate; }
.bd-cloth { position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 54px, rgba(0, 0, 0, .05) 54px 118px, rgba(255, 255, 255, .01) 118px 176px),
  linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, 0) 16%); }          /* a drop cloth hung on the wall: soft vertical folds, darker at the rod */
.bd-floor { position: absolute; left: 0; right: 0; top: 0; height: 100%; display: none; translate: 0 var(--fy, 100%);
  background: linear-gradient(180deg, #3d5638 0, #243420 7%, #131c11 28%, #0c120b 100%); border-top: 4px solid #0a0f09;
  box-shadow: 0 -2px 0 rgba(240, 140, 124, .45), 0 -26px 50px rgba(0, 0, 0, .55); }   /* where the wall meets the floor: a baseboard line and a lit floor */
.bd-neon, .bd-lights { translate: var(--px, 0px) var(--py, 0px); }
.bd-lights { position: absolute; left: -130px; top: 0; pointer-events: none; }
.bd-lights .bulb { animation: twinkle 3.4s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .5; } }
.bd-dim { position: absolute; inset: 0; background:
  radial-gradient(ellipse 42% 70% at var(--hx) var(--hy), rgba(10, 15, 9, 0) 0%, rgba(10, 15, 9, .42) 64%, rgba(10, 15, 9, .72) 100%),
  linear-gradient(to right, rgba(10, 15, 9, .5) 0%, rgba(10, 15, 9, 0) 56%); }
body.calm .bd-lights .bulb { animation: none; }
body.calm .bd-field { transition: none; }
@media (prefers-reduced-motion: reduce) { .bd-lights .bulb { animation: none; } .bd-field, #backdrop { transition: none; } }


/* neon sign behind him: the show's question */
.bd-neon { position: absolute; right: 3.5%; top: 15%; display: flex; flex-direction: column; align-items: center; transform: rotate(-7deg);
  font-weight: 800; line-height: .86; letter-spacing: .02em; font-size: clamp(34px, 4.6vw, 78px); font-variation-settings: "wdth" 78, "opsz" 96;
  color: rgba(255, 214, 205, .92); -webkit-text-stroke: 1px #F08C7C;
  text-shadow: 0 0 6px #F08C7C, 0 0 16px rgba(240, 140, 124, .95), 0 0 38px rgba(240, 140, 124, .75), 0 0 80px rgba(240, 140, 124, .5); animation: neon 6s infinite; }
.bd-neon span:last-child { color: rgba(255, 245, 220, .95); -webkit-text-stroke-color: #FFE14D; text-shadow: 0 0 6px #FFE14D, 0 0 16px rgba(255, 225, 77, .85), 0 0 40px rgba(255, 225, 77, .55); }
@keyframes neon { 0%, 18%, 22%, 62%, 100% { opacity: 1; } 20% { opacity: .55; } 64% { opacity: .75; } 66% { opacity: 1; } }
body.calm .bd-neon { animation: none; }
@media (max-width: 899px) { .bd-neon { display: none; } }
@media (prefers-reduced-motion: reduce) { .bd-neon { animation: none; } }

/* lower-third nameplate in the hero, like a show */
.lower3 { position: absolute; left: var(--pad); bottom: 34px; display: flex; align-items: stretch; pointer-events: none; }
.lower3 b { background: var(--pink); color: var(--crypt); font-weight: 800; letter-spacing: .02em; padding: 8px 16px; font-size: 20px; text-transform: uppercase; font-variation-settings: "wdth" 84, "opsz" 48; }
.lower3 span { background: rgba(10, 15, 9, .88); color: var(--bone); font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 0 16px; display: flex; align-items: center; border: 2px solid var(--peat); border-left: 0; }
@media (max-width: 899px) { .lower3 { display: none; } }

/* ---------- stage (the live 3D Larry) ---------- */
#stage-wrap { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#stage-wrap canvas { position: absolute; inset: 0; }
#stage-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.halo {
  position: absolute; left: var(--hx, 72%); top: var(--hy, 50%); width: min(62vh, 560px); aspect-ratio: 1.38;
  transform: translate(-50%, -50%) rotate(22deg); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,140,124,.16), rgba(240,140,124,0) 72%);
  transition: left 1.3s var(--ease), top 1.3s var(--ease), opacity .6s; pointer-events: none;
}
.halo::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 2px dashed rgba(240,140,124,.35); }
body.no-3d .halo, body.no-3d #stage-wrap canvas { display: none; }

/* boot screen */
#boot {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--crypt);
  transition: opacity .7s var(--ease), visibility .7s; text-align: center;
}
#boot.done { opacity: 0; visibility: hidden; }
#boot .ring { width: 132px; height: 132px; margin: 0 auto 18px; position: relative; }
#boot .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#boot .ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
#boot .ring .bg { stroke: var(--peat); }
#boot .ring .fg { stroke: var(--pink); stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transition: stroke-dashoffset .25s linear; }
#boot .ring img { position: absolute; inset: 22px; width: calc(100% - 44px); height: calc(100% - 44px); }
#boot p { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--mist); text-transform: uppercase; }
#boot p b { color: var(--pink); font-weight: 600; }
#boot .joke { margin-top: 8px; color: var(--dust); text-transform: none; letter-spacing: 0; font-size: 13px; }
#boot .gate[hidden] { display: none; }
#boot .gate .btns { justify-content: center; margin: 16px 0 12px; }

/* ---------- header ---------- */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 76px; padding-bottom: 8px; display: flex; align-items: center; gap: 24px;
  padding: 0 var(--pad); background: linear-gradient(to bottom, rgba(10,15,9,.97) 0%, rgba(10,15,9,.97) 60%, rgba(10,15,9,0) 100%);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bone); }
.brand img { width: 40px; height: 40px; }
.brand .wm { font-weight: 800; font-size: 22px; letter-spacing: -.01em; font-variation-settings: "wdth" 85, "opsz" 48; line-height: 1; }
.brand .wm i { font-family: var(--marker); font-style: normal; color: var(--pink); font-size: 17px; margin-left: 6px; transform: rotate(-4deg); display: inline-block; }
.top nav { margin-left: auto; display: flex; gap: 6px; }
.top nav a { color: var(--mist); text-decoration: none; font-weight: 600; font-size: 15px; padding: 8px 12px; border-radius: 999px; }
.top nav a:hover, .top nav a[aria-current="true"] { color: var(--crypt); background: var(--bone); }
.pill-out { display: inline-flex; align-items: center; gap: 6px; background: var(--slab); color: var(--bone); border: 2px solid var(--peat); border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap; }
.pill-out:hover { border-color: var(--pink); color: var(--bone); }

/* ---------- layout ---------- */
main { position: relative; z-index: 10; }
.sec { position: relative; padding: clamp(96px, 14vh, 150px) var(--pad); min-height: 100svh; display: flex; align-items: center; }
.sec > .in { width: 100%; max-width: 1280px; margin: 0 auto; }
.col { width: min(600px, 100%); }
.sec.at-left .col { margin-left: auto; }           /* Larry on the left, text on the right */
.eyebrow { font-family: var(--mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--green); margin: 0 0 18px; }
h1, h2, h3 { font-weight: 800; margin: 0; letter-spacing: -.025em; line-height: .96; font-variation-settings: "wdth" 84, "opsz" 96; }
h1 { font-size: clamp(50px, 7.4vw, 118px); }
h2 { font-size: clamp(40px, 5.2vw, 84px); margin-bottom: 22px; }
h3 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -.015em; }
.lede { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.4; color: var(--bone); margin: 26px 0 0; font-variation-settings: "opsz" 24; }
.lede b { color: var(--pink); font-weight: 700; }
p { margin: 0 0 1em; color: var(--mist); }
.hl { position: relative; display: inline-block; white-space: nowrap; }
.scrawl { position: absolute; left: -6%; top: -14%; width: 112%; height: 128%; pointer-events: none; overflow: visible; }
.scrawl path { fill: none; stroke: var(--hi); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.in-view .scrawl path, .scrawl.go path { animation: draw 1.1s .5s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.note { font-family: var(--marker); color: var(--hi); font-size: clamp(17px, 1.5vw, 22px); line-height: 1.15; transform: rotate(-3deg); display: inline-block; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 34px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 999px;
  font: 700 18px/1 var(--display); text-decoration: none; cursor: pointer; border: 3px solid var(--crypt);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease), background .15s;
}
.btn.primary { background: var(--pink); color: var(--crypt); box-shadow: 5px 5px 0 var(--bone); }
.btn.primary:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--bone); color: var(--crypt); }
.btn.primary:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--bone); }
.btn.ghost { background: transparent; color: var(--bone); border-color: var(--bone); }
.btn.ghost:hover { background: var(--bone); color: var(--crypt); }
.btn .ext { font-size: 15px; opacity: .8; }

/* verified-undead badge */
.verified { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bone); border: 2px solid var(--peat); border-radius: 999px; padding: 6px 14px 6px 8px; background: var(--slab); margin-bottom: 26px; }
.verified svg { width: 22px; height: 22px; }

/* ---------- stream ui (live chip + captions) ---------- */
.stream { position: fixed; z-index: 40; right: var(--pad); bottom: calc(30px + var(--dock-h, 0px)); width: min(520px, 42vw); pointer-events: none; transition: right .5s var(--ease), left .5s var(--ease); }
.stream.left { right: auto; left: var(--pad); }
.chips { display: flex; gap: 8px; margin-bottom: 10px; }
.chip { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; background: rgba(10,15,9,.82); color: var(--bone); border: 1px solid var(--peat); display: inline-flex; align-items: center; gap: 7px; }
.chip.live { background: #D4361F; border-color: #D4361F; color: #fff; font-weight: 600; }
.chip.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
#cap { min-height: 2.6em; background: rgba(10,15,9,.86); border: 2px solid var(--peat); border-radius: 16px; padding: 12px 18px; font-weight: 600; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.3; color: var(--bone); }
#cap em { font-style: normal; color: var(--hi); }
/* the dock: Play the show, Wait Larry, ask him anything (js/main.js). Sits under the caption box and follows it left or right. */
.dock { position: fixed; z-index: 41; right: var(--pad); bottom: 18px; width: min(560px, 48vw); display: grid; gap: 8px; padding: 10px; background: rgba(10, 15, 9, .82); border: 2px solid var(--peat); border-radius: 22px; transition: right .5s var(--ease), left .5s var(--ease); }
.dock.left { right: auto; left: var(--pad); }
.dock[hidden] { display: none; }
body.pitching .dock { display: none; }
.drow { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dock .btn { min-height: 44px; font-size: 15px; padding: 0 14px; }
/* Larry's voice as one compact pill on the same row: speaker on/off, which voice (only when the voice server offers several), hear it */
.vgroup { margin-left: auto; display: inline-flex; align-items: stretch; border: 2px solid var(--peat); border-radius: 999px; background: var(--slab); overflow: hidden; }
.vgroup[hidden] { display: none; }
.vgroup button, .vgroup select { min-height: 40px; margin: 0; background: transparent; color: var(--bone); border: 0; font: 700 14px var(--display); cursor: pointer; }
.vgroup button { width: 44px; padding: 0; display: grid; place-items: center; }
.vgroup button[hidden], .vgroup select[hidden] { display: none; }
.vgroup button:hover, .vgroup select:hover { background: var(--peat); }
.vgroup select { max-width: 108px; padding: 0 4px 0 10px; border-left: 2px solid var(--peat); border-right: 2px solid var(--peat); }
.vgroup option { background: var(--slab); color: var(--bone); }
.vgroup svg { width: 20px; height: 20px; }
#dVoice .ic-on { display: none; } #dVoice[aria-pressed="true"] .ic-on { display: block; } #dVoice[aria-pressed="true"] .ic-off { display: none; }
#dVoice[aria-pressed="true"] { background: var(--green); color: var(--crypt); }
.vgroup :focus-visible { outline: 2px solid var(--green); outline-offset: -4px; }
.dock .btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; }
#dShow[aria-pressed="true"], #dLive[aria-pressed="true"] { background: var(--green); color: var(--crypt); border-color: var(--green); }          /* the show is running: the button is lit */
.dask { display: flex; gap: 8px; }
.dask input { flex: 1; min-width: 0; min-height: 44px; border-radius: 999px; border: 2px solid var(--peat); background: rgba(10, 15, 9, .86); color: var(--bone); font: 600 16px var(--display); padding: 0 18px; }
.dask input::placeholder { color: var(--dust); }
.dock.busy .dask input { border-color: var(--green); }
/* the guest booth (js/booth.js): an overlay like the orientation, with a booking form, the interview, and the episode canvas */
#booth { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; pointer-events: none; }
#booth[hidden] { display: none; }
#booth .pbar, #booth .bpanel, #booth .bcut { pointer-events: auto; }
.bpanel { width: min(600px, 52%); max-height: 100%; overflow-y: auto; padding: 8px 8px 8px 0; scrollbar-width: none; }
.bpanel::-webkit-scrollbar { display: none; }
.bpanel h2 { font-size: clamp(28px, 3vw, 46px); margin: 0 0 12px; }
.blead { margin: 0 0 14px; font-size: 17px; color: var(--mist); }
.bl { display: block; margin: 12px 0 6px; font: 600 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
#bform input, #banswer textarea { width: 100%; min-height: 46px; border-radius: 14px; border: 2px solid var(--peat); background: rgba(10, 15, 9, .88); color: var(--bone); font: 600 17px var(--display); padding: 10px 16px; margin-bottom: 8px; }
#banswer textarea { resize: vertical; min-height: 110px; }
#bform input:focus, #banswer textarea:focus { border-color: var(--green); }
#bform .pchips { margin: 4px 0 6px; }
#bform .prow, #banswer .prow { margin-top: 10px; }
.bcheck { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 6px; font-size: 14px; color: var(--mist); line-height: 1.35; }
#bform .bcheck input { width: 20px; min-height: 0; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--green); }
.bpreview { width: 168px; height: 126px; object-fit: cover; border-radius: 14px; border: 2px solid var(--green); transform: scaleX(-1); background: #000; margin: 0 0 10px; display: block; }
.brectime { font: 700 14px var(--mono); color: #D6453D; letter-spacing: .08em; align-self: center; }
#bresultbox { margin-top: 14px; } #bresult { width: 100%; border-radius: 12px; border: 3px solid var(--green); background: #000; }
.bcut { margin: 0 auto; width: min(960px, 94vw); max-height: 100%; overflow-y: auto; padding: 0 0 12px; text-align: center; }
.bcut canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 3px solid var(--bone); border-radius: 16px; background: #0a0f09; display: block; }
.bcut .prow { justify-content: center; margin-top: 12px; }
@media (max-width: 899px) { .bpanel { width: 100%; } }
@media (max-width: 899px) { #booth .pbody { align-items: flex-start; } }
@media (max-width: 899px) { body.booth-open #stream { opacity: 0 !important; } }      /* on a phone the question is the heading, so the floating caption would sit on the form */

/* merch: three tiles, kept to the left two thirds so Larry stands clear on the right */
.merch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: min(880px, 64vw); margin-top: 28px; }
.merch .item { background: var(--slab); border: 2px solid var(--peat); border-radius: 18px; padding: 14px; display: grid; gap: 8px; align-content: start; }
.merch .pic { aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #0c120b; }
.merch .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.merch .pic.ph { display: grid; place-items: center; border: 2px dashed var(--peat); background: transparent; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dust); }
.merch h3 { margin: 4px 0 0; font-size: 20px; }
.merch p { margin: 0; font-size: 15px; color: var(--mist); }
.merch .btn { min-height: 44px; font-size: 15px; }
.merch .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; pointer-events: none; }
@media (max-width: 899px) { .merch { grid-template-columns: 1fr; max-width: none; } }
.deadline { font-family: var(--mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--hi); margin: 0 0 12px; }
.dfine { margin: 0; font-size: 12px; color: var(--dust); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
/* Deadkle Fish: his speech bubble (placed on the bowl by js/main.js) and the click area over the bowl */
.fishsay { position: fixed; z-index: 43; max-width: min(260px, 70vw); padding: 8px 14px 10px; background: rgba(10, 15, 9, .92); border: 2px solid var(--green); border-radius: 16px 16px 16px 4px; color: var(--bone); font: 600 16px/1.3 var(--display); pointer-events: none; }
.fishsay[hidden] { display: none; }
.fishsay b { display: block; font: 500 11px var(--mono); letter-spacing: .12em; color: var(--green); margin-bottom: 2px; }
.fishsay em { font-style: normal; color: var(--hi); }
.fishbtn { position: fixed; z-index: 39; background: transparent; border: 0; border-radius: 50%; cursor: pointer; padding: 0; }
.fishbtn[hidden] { display: none; }
.fishbtn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
@media (max-width: 1199px) { #dShow .t { display: none; } #dShow { padding: 0; width: 44px; } }      /* narrower windows and phones: the show button is just its icon, so the row stays one line */
body.calm .dock { transition: none; }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }
@media (max-width: 899px) {
  .dock { left: 12px; right: 12px; width: auto; bottom: 10px; padding: 8px; }
  .dock.left { left: 12px; }
  .dask, .dfine { display: none; }
  .dock.open .dask { display: flex; } .dock.open .dfine { display: block; }
}
#cap .who { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--green); text-transform: uppercase; display: block; margin-bottom: 2px; }

/* ---------- ticker ---------- */
.ticker-wrap { position: relative; z-index: 12; overflow: hidden; margin: -30px 0; padding: 30px 0; pointer-events: none; }
.ticker { background: var(--pink); color: var(--crypt); transform: rotate(-1.4deg); margin: 0 -40px; padding: 14px 0; overflow: hidden; border-block: 3px solid var(--crypt); }
.ticker .track { display: flex; width: max-content; animation: tick 46s linear infinite; }
.ticker span { font-weight: 800; font-size: clamp(18px, 2vw, 26px); letter-spacing: .01em; font-variation-settings: "wdth" 80, "opsz" 48; text-transform: uppercase; padding: 0 22px; display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; }
.ticker span::after { content: ""; width: 26px; height: 26px; background: url(/img/larry-mark.png) center/contain no-repeat; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- story ---------- */
.era-list { display: grid; gap: 18px; width: min(640px, 100%); position: relative; }
.era { position: relative; background: var(--slab); border: 2px solid var(--peat); border-radius: 22px; padding: 22px 26px 20px 26px; transition: transform .25s var(--ease), border-color .25s; }
.era:hover { transform: translateX(6px) rotate(-.4deg); border-color: var(--moss); }
.era .yr { font-family: var(--mono); font-size: 13px; color: var(--green); letter-spacing: .12em; }
.era h3 { margin: 6px 0 8px; }
.era p { margin: 0; font-size: 17px; line-height: 1.5; }
.era .stamp { position: absolute; right: 18px; top: -14px; font-family: var(--marker); font-size: 14px; color: var(--pink); border: 2px solid var(--pink); border-radius: 8px; padding: 2px 10px; transform: rotate(4deg); background: var(--crypt); letter-spacing: .04em; }
.era .note { margin-top: 10px; font-size: 17px; }
.era.now { border-color: var(--pink); background: linear-gradient(135deg, var(--slab), #1d1613); }

/* ---------- programming ---------- */
.shows { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 34px; }
.tile { position: relative; border-radius: 22px; display: flex; flex-direction: column; overflow: hidden; color: var(--bone); background: var(--slab); text-decoration: none; border: 3px solid var(--peat); box-shadow: 6px 6px 0 var(--peat); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }   /* a title card on top, the words under it (2026-10-14) */
.tile .card { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 2px solid var(--peat); }   /* height:auto, or the img's height attribute wins and the card stretches */
.tile > div { padding: 12px 16px 18px; }
.tile:hover { transform: translate(-3px, -4px) rotate(-1deg); box-shadow: 10px 10px 0 var(--peat); }
.tile h3 { font-size: clamp(22px, 1.9vw, 30px); line-height: .95; margin: 0; text-transform: uppercase; font-variation-settings: "wdth" 78, "opsz" 96; }
.tile p { color: var(--mist); font-size: 14.5px; line-height: 1.4; margin: 8px 0 0; }
.tile .tag { display: inline-block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--bone); border: 2px solid var(--bone); border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.tapes { margin-top: 56px; }
.tapes h3 { margin-bottom: 6px; }
.tape-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.tape { display: grid; grid-template-columns: 46% 1fr; gap: 18px; align-items: center; background: var(--slab); border: 2px solid var(--peat); border-radius: 22px; padding: 14px; text-decoration: none; color: var(--bone); transition: border-color .2s, transform .2s; width: 100%; text-align: left; font: inherit; cursor: pointer; }   /* a button now: the tape plays in a window on this page */
.tapedlg { border: 3px solid var(--bone); border-radius: 22px; background: var(--crypt); color: var(--bone); padding: 14px; width: min(960px, 94vw); box-shadow: 10px 10px 0 var(--peat); }
.tapedlg::backdrop { background: rgba(5, 8, 5, .88); }
.tapedlg .frame { aspect-ratio: 16 / 9; width: 100%; background: #000; border-radius: 14px; overflow: hidden; }
.tapedlg iframe { width: 100%; height: 100%; border: 0; display: block; }
.tapedlg .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; }
.tapedlg .row b { font-size: 18px; }
.tapedlg .dfine { margin: 8px 0 0; font-size: 12.5px; color: var(--dust); }
.tape:hover { border-color: var(--pink); transform: translateY(-3px); color: var(--bone); }
.tape .th { position: relative; aspect-ratio: 16/9; border-radius: 16px; overflow: hidden; background: var(--peat) center/cover; }
.tape .th::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; color: var(--bone); background: rgba(10,15,9,.35); transition: background .2s; }
.tape:hover .th::after { background: rgba(240,140,124,.35); }
.tape b { display: block; font-size: 19px; line-height: 1.15; margin-bottom: 4px; }
.tape span { color: var(--mist); font-size: 15px; line-height: 1.35; display: block; }

/* ---------- face lab ---------- */
.faces { display: grid; gap: 18px; margin-top: 26px; }
.faces h3 { font-size: 13px; font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dust); font-weight: 600; margin-bottom: 8px; font-variation-settings: normal; }
.fgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.fbtn { font: 700 16px/1 var(--display); color: var(--bone); background: var(--slab); border: 2px solid var(--peat); border-radius: 999px; padding: 11px 16px; cursor: pointer; transition: transform .12s, background .12s, border-color .12s; }
.fbtn:hover { border-color: var(--green); transform: translateY(-2px); }
/* the face pad: two axes and two sliders, all spring back (2026-10-15) */
.padrow { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.facepad { position: relative; width: min(240px, 100%); aspect-ratio: 1; border: 2px solid var(--peat); border-radius: 18px; background: var(--slab); touch-action: none; user-select: none; cursor: grab; }
.facepad.drag { cursor: grabbing; border-color: var(--green); }
.facepad .knob { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; border-radius: 50%; background: var(--pink); border: 3px solid var(--crypt); transform: translate(-50%, -50%); transition: left .3s var(--ease), top .3s var(--ease); pointer-events: none; }
.facepad.drag .knob { transition: none; }
.facepad .ax { position: absolute; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dust); pointer-events: none; }
.facepad .ax.l { left: 10px; top: 50%; transform: translateY(-50%); } .facepad .ax.r { right: 10px; top: 50%; transform: translateY(-50%); }
.facepad .ax.t { top: 8px; left: 50%; transform: translateX(-50%); } .facepad .ax.b { bottom: 8px; left: 50%; transform: translateX(-50%); }
.fsliders { display: grid; gap: 14px; }
.fsliders label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); display: grid; gap: 6px; }
.fsliders input { width: 200px; accent-color: var(--pink); }
.fbtn[aria-pressed="true"] { background: var(--pink); color: var(--crypt); border-color: var(--crypt); box-shadow: 3px 3px 0 var(--bone); }
.brainsw { margin-top: 8px; display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--bone); cursor: pointer; background: none; border: 0; font-family: var(--display); font-size: 17px; padding: 6px 0; }
.brainsw .sw { width: 52px; height: 30px; border-radius: 999px; background: var(--peat); position: relative; transition: background .2s; border: 2px solid var(--moss); }
.brainsw .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--bone); transition: transform .2s var(--ease); }
.brainsw[aria-checked="true"] .sw { background: var(--pink); }
.brainsw[aria-checked="true"] .sw::after { transform: translateX(22px); }

/* ---------- member card ---------- */
.cardform { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 22px; }
.cardform input { flex: 1 1 220px; min-height: 54px; border-radius: 999px; border: 3px solid var(--peat); background: var(--slab); color: var(--bone); font: 600 18px var(--display); padding: 0 22px; }
.cardform input:focus-visible { border-color: var(--green); outline-offset: 2px; }
.cardform input::placeholder { color: var(--dust); }
#cardcv { width: min(560px, 100%); height: auto; border-radius: 26px; box-shadow: 8px 8px 0 var(--peat); display: block; margin: 8px 0 20px; }

/* ---------- the orientation (interruptible presentation) ---------- */
body.pitching main, body.pitching footer, body.pitching .top { visibility: hidden; }
body.pitching { overflow: hidden; }
#pitch { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; pointer-events: none; }
#pitch[hidden] { display: none; }
#pitch .pbar, #pitch .pleft { pointer-events: auto; }
.pbar { display: flex; align-items: center; gap: 18px; padding: 16px var(--pad) 10px; }
.pstat { white-space: nowrap; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); display: inline-flex; align-items: center; gap: 8px; }
.pstat .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: pulse 1.6s infinite; }
.pstat b { color: var(--bone); font-weight: 600; } .pstat small { color: var(--dust); text-transform: none; letter-spacing: 0; font-size: 12px; }
.pcount { white-space: nowrap; margin-left: auto; font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em; color: var(--dust); text-transform: uppercase; }
.pbody { flex: 1; display: flex; align-items: center; padding: 0 var(--pad) 28px; min-height: 0; }
.pleft { width: min(640px, 52%); max-height: 100%; overflow-y: auto; padding: 8px 8px 8px 0; scrollbar-width: none; }
.pleft::-webkit-scrollbar { display: none; }
.pslide h2 { font-size: clamp(30px, 3.4vw, 52px); margin: 0 0 14px; }
.pslide .note { margin-top: 16px; display: block; }
.pv { display: grid; place-items: center; min-height: 110px; background: var(--slab); border: 2px solid var(--peat); border-radius: 22px; padding: 20px; }
.seal-lg { font-family: var(--marker); font-size: clamp(26px, 3vw, 40px); color: var(--pink); border: 4px solid var(--pink); border-radius: 14px; padding: 8px 24px; transform: rotate(-4deg); letter-spacing: .05em; }
.bigq { font-weight: 800; font-size: 88px; line-height: 1; color: var(--hi); font-variation-settings: "wdth" 80; }
.pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pl li { background: var(--slab); border: 2px solid var(--peat); border-radius: 16px; padding: 14px 18px; font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); color: var(--bone); }
.pl.check li::before { content: "✓"; color: var(--green); margin-right: 12px; font-weight: 800; }
.tl { list-style: none; margin: 0; padding: 0 0 0 26px; border-left: 3px solid var(--moss); display: grid; gap: 10px; }
.tl li { color: var(--mist); font-size: clamp(16px, 1.5vw, 20px); position: relative; }
.tl li b { color: var(--green); font-family: var(--mono); font-size: .8em; margin-right: 12px; letter-spacing: .08em; }
.tl li::before { content: ""; position: absolute; left: -34px; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: var(--pink); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.stats div { background: var(--slab); border: 2px solid var(--peat); border-radius: 18px; padding: 16px 10px; text-align: center; }
.stats b { display: block; font-size: clamp(40px, 5vw, 72px); line-height: 1; color: var(--pink); font-weight: 800; font-variation-settings: "wdth" 80; }
.stats span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mist); }
.pctl { margin-top: 16px; }
.prow { display: flex; flex-wrap: wrap; gap: 12px; }
.pask { display: grid; gap: 10px; } .pask[hidden], .prow[hidden] { display: none; }
.pinput { display: flex; gap: 10px; }
.pinput input { flex: 1; min-width: 0; min-height: 54px; border-radius: 999px; border: 3px solid var(--green); background: var(--slab); color: var(--bone); font: 600 18px var(--display); padding: 0 22px; }
.pinput input::placeholder { color: var(--dust); }
.pchips { display: flex; flex-wrap: wrap; gap: 8px; }
.plinks { display: flex; gap: 10px; margin-top: 12px; }
.pfine { margin: 16px 0 0; font-size: 13px; color: var(--dust); max-width: 56ch; }
.youq { background: var(--pink); color: var(--crypt); border-radius: 14px; padding: 8px 14px; font-weight: 700; font-size: 16px; margin-bottom: 8px; max-width: 100%; overflow-wrap: anywhere; }
.youq[hidden] { display: none; }
.dots { display: inline-flex; gap: 6px; padding: 8px 0 2px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); animation: bounce 1s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 50% { transform: translateY(-6px); opacity: .5; } }
#pint { box-shadow: 5px 5px 0 var(--bone); }


/* ---------- membership tiers ---------- */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 30px; max-width: 800px; }
.tier { background: var(--slab); border: 2px solid var(--peat); border-radius: 26px; padding: 28px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.tier.hot { border-color: var(--pink); background: linear-gradient(145deg, var(--slab), #1d1613); box-shadow: 8px 8px 0 var(--peat); }
.tier h3 { font-size: clamp(26px, 2.4vw, 36px); margin: 0; }
.tier .price { font-weight: 800; font-size: clamp(30px, 3vw, 44px); color: var(--pink); margin: 0; font-variation-settings: "wdth" 84, "opsz" 72; }
.tier ul { margin: 0; padding: 0 0 0 20px; color: var(--mist); display: grid; gap: 8px; flex: 1; align-content: start; }
.tier .tag { position: absolute; right: 22px; top: -14px; font-family: var(--marker); color: var(--pink); border: 2px solid var(--pink); background: var(--crypt); border-radius: 8px; padding: 2px 10px; transform: rotate(4deg); font-size: 14px; }
.tier .btn[aria-disabled="true"] { opacity: .6; cursor: not-allowed; box-shadow: none; pointer-events: none; }
.fine-note { font-size: 13.5px; color: var(--dust); margin: 0; }
@media (max-width: 899px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- faq + footer ---------- */
.faq { width: min(780px, 100%); }
.faq details { border-bottom: 2px solid var(--peat); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 800; font-size: clamp(21px, 2vw, 28px); letter-spacing: -.01em; display: flex; justify-content: space-between; gap: 20px; color: var(--bone); font-variation-settings: "wdth" 88, "opsz" 40; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--pink); font-size: 28px; line-height: 1; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; font-size: 18px; max-width: 62ch; }
footer { position: relative; z-index: 12; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: 80px var(--pad) 130px; border-top: 2px solid var(--peat); background: transparent; }
footer .giant { font-weight: 800; font-size: clamp(60px, 15vw, 240px); line-height: .84; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 2px var(--peat); font-variation-settings: "wdth" 76, "opsz" 96; margin: 0 0 40px; user-select: none; }
footer .fine { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between; font-size: 15px; color: var(--dust); }
footer .fine strong { color: var(--mist); font-weight: 600; }
footer .fine a { color: var(--mist); }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.in-view .rv, .rv.in-view { opacity: 1; transform: none; }
.in-view .rv:nth-child(2) { transition-delay: .08s; } .in-view .rv:nth-child(3) { transition-delay: .16s; } .in-view .rv:nth-child(4) { transition-delay: .24s; }

/* ---------- tablet / phone: Larry becomes the live "stream tile" on top ---------- */
@media (max-width: 899px) {
  #stage-wrap { position: fixed; inset: 0 0 auto 0; height: 46svh; background: var(--crypt); border-bottom: 2px solid var(--peat); z-index: 55; }
  .top { z-index: 65; height: 58px; padding-bottom: 0; background: linear-gradient(to bottom, rgba(10,15,9,.95), rgba(10,15,9,0)); }
  .top nav { display: none; }
  .top .pill-out { margin-left: auto; padding: 6px 12px; font-size: 13px; }
  .brand .wm { font-size: 19px; } .brand img { width: 34px; height: 34px; }
  main { padding-top: 46svh; }
  .sec { min-height: 0; padding: 56px var(--pad); display: block; }
  .col, .sec.at-left .col { margin-left: 0; width: 100%; }
  .stream { position: fixed; z-index: 66; top: calc(46svh - 108px); left: 12px; right: 12px; bottom: auto; width: auto; }
  .stream.left { left: 12px; right: 12px; }
  #cap { font-size: 15px; padding: 8px 12px; min-height: 2.4em; border-radius: 12px; }
  .chips { margin-bottom: 6px; flex-wrap: nowrap; overflow: hidden; }
  .chip { font-size: 11px; padding: 4px 9px; white-space: nowrap; }
  #clipChip { display: none; }
  .shows { grid-template-columns: repeat(2, 1fr); }
  .tape-row { grid-template-columns: 1fr; }
  .ticker-wrap { margin: -10px 0; }
  .halo { width: 80vw; }
}
@media (max-width: 899px) {
  #pitch { top: 46svh; }
  .pbody { padding-bottom: 12px; align-items: flex-start; }
  .pleft { width: 100%; padding-top: 0; }
  .pbar { padding-top: 10px; gap: 10px; } .pstat small { display: none; } .pstat, .pcount { font-size: 11px; letter-spacing: .08em; }
  .pv { min-height: 84px; padding: 14px; } .bigq { font-size: 64px; }
  .pslide h2 { font-size: 28px; margin-bottom: 12px; } .pl li { padding: 10px 14px; font-size: 17px; }
  .pctl { margin-top: 16px; } .pinput input { min-height: 48px; font-size: 16px; } .btn { min-height: 48px; font-size: 16px; padding: 0 18px; }
  .stats b { font-size: 40px; }
}
@media (max-width: 520px) {
  .shows { grid-template-columns: 1fr 1fr; gap: 12px; } .tile { border-radius: 18px; } .tile p { display: none; }
  .tape { grid-template-columns: 1fr; }
  h1 { font-size: clamp(44px, 13vw, 64px); }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker { transform: none; margin: 0; } .ticker .track { animation: none; flex-wrap: wrap; width: auto; }
  .js .rv { opacity: 1; transform: none; transition: none; }
  .scrawl path { stroke-dashoffset: 0; animation: none !important; }
  .halo, .stream, .btn, .tile, .era { transition: none; }
  .chip.live::before { animation: none; } .pstat .dot, .dots i { animation: none; }
}

/* calm mode: the same as reduced motion, chosen by the visitor (WCAG 2.2.2) */
body.calm .ticker { transform: none; margin: 0; } body.calm .ticker .track { animation: none; flex-wrap: wrap; width: auto; }
body.calm .js .rv, .js body.calm .rv { opacity: 1; transform: none; transition: none; }
body.calm .scrawl path { stroke-dashoffset: 0; animation: none !important; }
body.calm .halo, body.calm .stream, body.calm .btn, body.calm .tile, body.calm .era { transition: none; }
body.calm .chip.live::before { animation: none; }