/* =====================================================================
   YO MAMA'S FAVORITE PAINTER  —  YMFP
   Palette + cinematic split-screen landing
   ===================================================================== */

:root{
  /* ---- brand palette (from YMFP color sheet) ---- */
  --rich-black:#050505;
  --soft-black:#0B0B0D;
  --charcoal:#1A1A1D;
  --gunmetal:#2C2F33;
  --deep-burgundy:#2B0A14;
  --wine:#4B0D1A;
  --crimson:#7B0F1E;
  --bright-red:#E31B23;
  --neon:#FF2A3A;
  --muted-red:#B31F2D;
  --off-white:#F2F2F2;
  --light-gray:#B5B7BA;
  --silver:#D1D3D6;
  --gold:#D4AF37;
  --champagne:#BFA76A;

  --ease: cubic-bezier(.7,.02,.2,1);
  --split-dur: 1.05s;

  /* ---- Baked-in layout tweak values (adjustable live via the Tweaks panel) ---- */
  --bg-zoom-stroke: 1.04;
  --bg-zoom-spray: 1.13;
  --bg-pos-x-stroke: 0px;  --bg-pos-y-stroke: 0px;
  --bg-pos-x-spray: 0px;   --bg-pos-y-spray: 0px;
  /* The v4 portraits share the same 1122×1402 canvas and alignment master. */
  --portrait-scale: 1; --portrait-x: 0px; --portrait-y: 0px;
  --logo-scale: 2.36;  --logo-x: 4px;     --logo-y: 61px;
  --sign-scale: 1.16;  --sign-x: -306px;  --sign-y: -56px;
  --hero-scale: 1.52;  --hero-x: -21px;   --hero-y: 0px;   --tag-width: 208px;
  --explore-scale: 1.28; --explore-x: 379px; --explore-y: 43px;
  --lead-stroke-scale: 1.24; --lead-stroke-x: 0px; --lead-stroke-y: -115px;
  --lead-spray-scale: 1.24;  --lead-spray-x: -8px;  --lead-spray-y: -151px;
  /* landing STROKE / SPRAY buttons (independent) */
  --landing-btn-scale: 1.34;
  --stroke-btn-scale: 1; --stroke-btn-x: 0px; --stroke-btn-y: 0px;
  --spray-btn-scale: 1;  --spray-btn-x: 0px;  --spray-btn-y: 0px;
  /* paint splatter marks on the landing buttons */
  --paint-scale: 1.04; --paint-x: 0px; --paint-y: 0px;
  /* world-page menu button rows (per side) */
  --menu-stroke-scale: 1; --menu-stroke-x: 0px; --menu-stroke-y: 39px;
  --menu-spray-scale: 1;  --menu-spray-x: 0px;  --menu-spray-y: 39px;
  /* ==================================================================
     THREE INDEPENDENT LAYOUT PROFILES
     ------------------------------------------------------------------
     The site is tuned three separate times. Each viewport profile reads
     ONLY its own namespace, so a number dialled in for one view can never
     leak into another:

       (no prefix)  DESKTOP / LANDSCAPE  — the wide side-by-side split
       --ls-*       MOBILE LANDSCAPE     — phone held sideways (short view)
       --mp-*       MOBILE PORTRAIT      — phone upright (stacked halves)

     The Tweaks panel (0574) edits one profile at a time and stores each
     profile separately in the browser.
     ================================================================== */

  /* ---- MOBILE LANDSCAPE (--ls-*) : phone sideways, ≤560px tall ---- */
  --ls-bg-zoom-stroke: 1.05; --ls-bg-pos-x-stroke: 0px; --ls-bg-pos-y-stroke: 0px;
  --ls-bg-zoom-spray: 1.05;  --ls-bg-pos-x-spray: 0px;  --ls-bg-pos-y-spray: 0px;
  --ls-portrait-scale: 1;--ls-portrait-x: 0px;--ls-portrait-y: 0px;
  --ls-logo-scale: 1.56;    --ls-logo-x: 0px;    --ls-logo-y: 27px;
  --ls-sign-scale: 1;    --ls-sign-x: -230px;    --ls-sign-y: -10px;
  --ls-explore-scale: 1.48; --ls-explore-x: -537px; --ls-explore-y: 6px;
  --ls-landing-btn-scale: 1;
  --ls-choice-scale: 0.84;  --ls-choice-x: -42px;  --ls-choice-y: 0px;
  /* world titles + menu rows are tuned per page, never shared */
  --ls-lead-stroke-scale: 1.8; --ls-lead-stroke-x: -65px; --ls-lead-stroke-y: -152px;
  --ls-lead-spray-scale: 1.8;  --ls-lead-spray-x: 65px;  --ls-lead-spray-y: -152px;
  --ls-menu-stroke-scale: 1; --ls-menu-stroke-x: 0px; --ls-menu-stroke-y: 0px;
  --ls-menu-stroke-w: 100%;  --ls-menu-stroke-h: 110px;
  --ls-menu-spray-scale: 1;  --ls-menu-spray-x: 0px;  --ls-menu-spray-y: 0px;
  --ls-menu-spray-w: 100%;   --ls-menu-spray-h: 110px;
  --ls-nav-scale: 0.98;     --ls-hint-y: 6px;
  --ls-split: 50%;

  /* ---- MOBILE PORTRAIT (--mp-*) : phone upright, ≤768px wide ----
     The portrait layout stacks the two worlds (Stroke on top, Spray
     underneath), so "Up / Down" here moves things across that stack. */
  --mp-bg-zoom-stroke: 1;  --mp-bg-pos-x-stroke: 0px; --mp-bg-pos-y-stroke: 0px;
  --mp-bg-zoom-spray: 1;   --mp-bg-pos-x-spray: 0px;  --mp-bg-pos-y-spray: 0px;
  --mp-logo-scale: 1.9;      --mp-logo-x: 0px;          --mp-logo-y: 24px;
  --mp-landing-btn-scale: 1.04;
  --mp-stroke-btn-x: 0px;  --mp-stroke-btn-y: 0px;
  --mp-spray-btn-x: 0px;   --mp-spray-btn-y: 0px;
  --mp-choice-gap: 200px;
  --mp-explore-scale: 0.8;   --mp-explore-x: 0px;       --mp-explore-y: -179px;
  --mp-hint-y: 137px;        --mp-nav-scale: 1;
  /* world titles + menu grids are tuned per page, never shared */
  --mp-lead-stroke-scale: 1.08; --mp-lead-stroke-x: 103px; --mp-lead-stroke-y: 0px;
  --mp-lead-spray-scale: 1.08;  --mp-lead-spray-x: 87px;  --mp-lead-spray-y: 0px;
  --mp-menu-stroke-scale: 0.98; --mp-menu-stroke-x: 0px; --mp-menu-stroke-y: 0px;
  --mp-menu-stroke-w: 100%;  --mp-menu-stroke-h: 70px;
  --mp-menu-spray-scale: 0.98;  --mp-menu-spray-x: 0px;  --mp-menu-spray-y: 0px;
  --mp-menu-spray-w: 100%;   --mp-menu-spray-h: 70px;
  --mp-split: 50%;
}

/* animatable split position (registered so clip-path/line can tween) */
@property --split{ syntax:'<percentage>'; inherits:true; initial-value:50%; }

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--rich-black);
  color:var(--off-white);
  font-family:'Oswald',sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* =====================================================================
   STAGE + PANELS
   ===================================================================== */
.stage{
  position:fixed; inset:0;
  --split:50%;
  background:var(--rich-black);
  isolation:isolate;
}
.stage.no-anim{ --split:50%; }

.panel{
  position:absolute; inset:0;
  overflow:hidden;
  will-change:clip-path;
  transition:clip-path var(--split-dur) var(--ease);
}
/* left panel shows from 0 → split ; right panel from split → 100 */
.panel--stroke{ clip-path:inset(0 calc(100% - var(--split)) 0 0); transition:clip-path var(--split-dur) var(--ease), --split var(--split-dur) var(--ease); }
.panel--spray { clip-path:inset(0 0 0 var(--split)); }

.scene{ position:absolute; inset:0; }
.scene__bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:saturate(1.05) contrast(1.05) brightness(1);
  transform:scale(var(--bg-zoom, 1.04));
}
/* Tweaks: per-side Background Zoom (below 1 = zoom out) + pan (position) */
.panel--stroke .scene__bg{
  transform:scale(var(--bg-zoom-stroke, 1.04));
  background-position:calc(50% + var(--bg-pos-x-stroke, 0px)) calc(50% + var(--bg-pos-y-stroke, 0px));
}
.panel--spray  .scene__bg{
  transform:scale(var(--bg-zoom-spray, 1.04));
  background-position:calc(50% + var(--bg-pos-x-spray, 0px)) calc(50% + var(--bg-pos-y-spray, 0px));
}
/* tints removed — backgrounds show clean */
.scene__tint{
  position:absolute; inset:0;
  background: none;
}
.panel--stroke .scene__tint{
  background: none;
}
.scene__portrait{
  position:absolute; left:50%; bottom:0;
  height:97vh; width:auto; max-width:none;
  transform-origin:50% 100%;
  transform:
    translateX(calc(-50% + var(--portrait-x, 0px)))
    translateY(var(--portrait-y, 0px))
    scale(var(--portrait-scale, 1));
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.6));
  /* fade shoulders into the panel + soften the left/right/top crop edges
     so the rectangular image frame can't be seen */
  -webkit-mask-image:
    linear-gradient(to bottom, #000 50%, transparent 82%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, #000 50%, transparent 82%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 3%);
  mask-composite: intersect;
  user-select:none; -webkit-user-drag:none;
}
/* portrait shadow only (glow removed) */
.panel--spray .scene__portrait{ filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.panel--stroke .scene__portrait{ filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.scene__floor{
  position:absolute; left:0; right:0; bottom:0; height:36%;
  background:linear-gradient(180deg, transparent, var(--rich-black) 92%);
  pointer-events:none;
}

/* background overlays removed — backgrounds show at full brightness */
.stage.is-stroke .panel--stroke .scene__portrait{ filter:drop-shadow(0 30px 60px rgba(0,0,0,.7)); }
.stage.is-spray  .panel--spray  .scene__portrait{ filter:drop-shadow(0 30px 60px rgba(0,0,0,.7)); }

/* drive the split open */
.stage.is-stroke{ --split:100%; }
.stage.is-spray { --split:0%; }

/* =====================================================================
   SPLIT LINE
   ===================================================================== */
.splitline{
  position:absolute; top:0; bottom:0;
  left:var(--split);
  width:2px; margin-left:-1px;
  background:linear-gradient(180deg, transparent, var(--neon) 14%, #fff 50%, var(--neon) 86%, transparent);
  box-shadow:0 0 14px 2px rgba(255,42,58,.75), 0 0 42px 8px rgba(227,27,35,.45);
  z-index:30;
  transition:left var(--split-dur) var(--ease), opacity .5s ease;
  pointer-events:none;
}
.splitline::after{
  content:""; position:absolute; top:0; bottom:0; left:50%;
  width:60px; transform:translateX(-50%);
  background:radial-gradient(50% 60% at 50% 50%, rgba(255,42,58,.16), transparent 70%);
}
.stage.is-stroke .splitline,
.stage.is-spray  .splitline{ opacity:0; }

/* =====================================================================
   BRAND / LOGO
   ===================================================================== */
.brand{ position:absolute; top:26px; left:34px; z-index:40; transition:opacity .4s ease; }
/* hide the floating brand lockup in a revealed world (worldbar takes over the top) */
.stage.is-stroke .brand,
.stage.is-spray  .brand{ opacity:0; pointer-events:none; }
.brand__lock{ display:flex; align-items:center; gap:14px; text-decoration:none; color:var(--off-white); }
.brand__name{ font-size:24px; font-weight:700; letter-spacing:.2px; line-height:1; }
.brand__name em{ font-family:'Satisfy',cursive; font-style:normal; color:var(--neon); font-size:30px; padding:0 2px; }
.brand__dot{ font-family:'Satisfy',cursive; color:var(--neon); font-size:24px; }
.brand__badge{
  font-family:'Permanent Marker',cursive; font-size:15px; letter-spacing:1px;
  color:var(--neon); border:1.5px solid var(--neon); border-radius:8px;
  padding:4px 9px 2px; line-height:1; box-shadow:0 0 14px rgba(255,42,58,.3) inset;
}

/* =====================================================================
   CENTER HERO COPY
   ===================================================================== */
.hero{
  position:absolute; left:5vw; top:11%;
  z-index:35; text-align:left; width:min(440px,40vw);
  pointer-events:none;
  transform-origin:left top;
  /* Tweaks: Left Text size + position */
  transform:translate(var(--hero-x,0px), var(--hero-y,0px)) scale(var(--hero-scale,1));
  transition:opacity .5s ease, transform .5s ease;
}
.hero__kicker{
  font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(24px,3.4vw,48px); line-height:.96; letter-spacing:.5px;
  color:var(--off-white); text-shadow:0 4px 26px rgba(0,0,0,.85);
}
.hero__limits{
  font-family:'Permanent Marker',cursive; font-weight:400;
  font-size:clamp(20px,2.7vw,38px); color:var(--neon);
  transform:rotate(-3deg); margin-top:2px;
  text-shadow:0 0 24px rgba(255,42,58,.55), 0 3px 10px rgba(0,0,0,.8);
}
.hero__tag{
  margin:12px 0 0; max-width:var(--tag-width, 360px);   /* Tweaks: tagline wrap width */
  font-size:clamp(13px,1.05vw,15px); font-weight:300; line-height:1.5;
  color:var(--light-gray); text-shadow:0 2px 12px rgba(0,0,0,.9); text-wrap:pretty;
}
/* Choose-your-side hint — centered, held above the YMFP logo emblem */
#choose-hint{
  position:absolute; left:50%; bottom:40vh; transform:translateX(-50%);
  z-index:36; margin:0; text-align:center; pointer-events:none;
}
.stage.is-stroke #choose-hint,
.stage.is-spray  #choose-hint{ opacity:0; }
.hero__hint span{
  font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--silver);
  opacity:.0; animation:hintIn 1s ease 1.1s forwards, pulse 2.4s ease 2s infinite;
}
@keyframes hintIn{ to{ opacity:.8; } }
@keyframes pulse{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }

.stage.is-stroke .hero,
.stage.is-spray  .hero{ opacity:0; transform:translateY(-20px); pointer-events:none; }

/* =====================================================================
   THE TWO CHOICES  (each = a full half, clickable)
   ===================================================================== */
.choice{
  position:absolute; top:0; bottom:0; width:50%;
  border:0; background:transparent; cursor:pointer; z-index:25;
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:11vh; color:var(--off-white);
  font-family:'Oswald',sans-serif;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .5s ease;
}
/* Tweaks: move/resize each landing button independently */
.choice--left{ left:0; transform-origin:center bottom;
  transform:translate(var(--stroke-btn-x,0px),var(--stroke-btn-y,0px)) scale(var(--stroke-btn-scale,1)); }
.choice--right{ right:0; transform-origin:center bottom;
  transform:translate(var(--spray-btn-x,0px),var(--spray-btn-y,0px)) scale(var(--spray-btn-scale,1)); }
/* tinted-glass card */
.choice__inner{
  position:relative; overflow:hidden; isolation:isolate;
  width:min(430px,40vw);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  padding:30px 30px 26px;
  background:linear-gradient(180deg, rgba(22,22,26,.34), rgba(8,8,10,.52));
  -webkit-backdrop-filter:blur(13px) saturate(120%); backdrop-filter:blur(13px) saturate(120%);
  border:1px solid rgba(255,255,255,.16); border-top:2px solid rgba(255,42,58,.6);
  border-radius:16px;
  box-shadow:0 20px 54px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
  pointer-events:none; /* clicks land on the half */
}
/* paint stains laid ON TOP of the glass, clipped to the card, kept in the
   corners so they never cover the text (text sits at z-index 2) */
.choice__paint{
  position:absolute; z-index:1; pointer-events:none;
  background-repeat:no-repeat; background-size:contain; background-position:center;
  opacity:.45; filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
/* Tweaks: paint splatter move (--paint-x/y) + resize (--paint-scale) */
.choice__paint--a{ width:74%; height:88%; top:-24%; right:-20%;
  transform:translate(var(--paint-x,0px),var(--paint-y,0px)) rotate(9deg) scale(var(--paint-scale,1)); }
.choice__paint--b{ width:56%; height:66%; bottom:-24%; left:-20%; opacity:.3;
  transform:translate(var(--paint-x,0px),var(--paint-y,0px)) rotate(-14deg) scale(var(--paint-scale,1)); }
.choice--left  .choice__paint--a{ background-image:url('assets/img/paint-stroke.svg'); }
.choice--left  .choice__paint--b{ background-image:url('assets/img/paint-spray.svg'); }
.choice--right .choice__paint--a{ background-image:url('assets/img/paint-spray.svg'); }
.choice--right .choice__paint--b{ background-image:url('assets/img/paint-stroke.svg'); }
.choice__ico,
.choice__eyebrow,
.choice__word,
.choice__sub{ position:relative; z-index:2; }
.choice__ico{
  width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,42,58,.55); color:var(--neon);
  box-shadow:0 0 20px rgba(255,42,58,.22) inset; margin-bottom:2px;
}
.choice__ico svg{ width:26px; height:26px; }
.choice__eyebrow{
  font-family:'Oswald',sans-serif; font-weight:500;
  letter-spacing:8px; text-indent:8px; font-size:12px;
  color:var(--neon); text-transform:uppercase;
}
.choice__word{
  font-family:'Anton',sans-serif; text-transform:uppercase;
  font-size:clamp(34px,3.6vw,58px); line-height:.9; letter-spacing:1px;
  background:linear-gradient(180deg,#ffffff 0%, var(--silver) 46%, #7d7f82 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.7));
}
.choice__sub{
  font-size:clamp(10px,.95vw,13px); letter-spacing:2px; text-transform:uppercase;
  color:var(--light-gray); font-weight:400; margin-top:2px; text-align:center;
}
/* hover affordance */
.choice:hover .choice__inner{
  transform:translateY(-8px);
  border-color:rgba(255,42,58,.55);
  box-shadow:0 28px 64px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.16);
}
.choice:hover ~ .splitline{ box-shadow:0 0 22px 4px rgba(255,42,58,.95), 0 0 60px 14px rgba(227,27,35,.6); }

/* push the unpicked side's button away as we open */
.stage.is-stroke .choice,
.stage.is-spray  .choice{ opacity:0; pointer-events:none; }

/* ---- image landing buttons: swapped-in PNG art (rounded corners) ----
   The .choice--img variant replaces the tinted-glass card with Ced's button
   graphics. High specificity (.choice.choice--img) so these win over the
   responsive .choice__inner pill rules further down. */
.choice.choice--img .choice__inner{
  width:min(430px,40vw); max-width:92vw;
  padding:0; gap:0; overflow:hidden;
  background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  border:0; box-shadow:none;
  /* The dead black outside each card's drawn outline is now baked out of the
     PNGs as real transparency, so the corners are clean at any size. This
     radius simply traces the same outline (4.3% × 7.6% ≈ the artwork's 72px
     corner on its 1672×941 canvas) as a belt-and-braces clip. */
  border-radius:4.3% / 7.6%;
  transform:scale(var(--landing-btn-scale,1));
  transform-origin:center bottom;
}
.choice__img{
  display:block; width:100%; height:auto;
  border-radius:inherit; box-shadow:none; filter:none;
  opacity:1; mix-blend-mode:normal;
  transition:none;
  -webkit-user-select:none; user-select:none;
}
.choice.choice--img:hover .choice__inner{
  transform:scale(var(--landing-btn-scale,1));
  border:0; box-shadow:none;
}
.choice.choice--img:hover .choice__img{
  box-shadow:none; filter:none;
}

/* Render supplied button artwork without overlays or color treatment. */
.choice.choice--img .choice__inner::before,
.choice.choice--img .choice__inner::after{ content:none; display:none; }

/* =====================================================================
   CENTER CROWN EMBLEM
   ===================================================================== */
.emblem{
  position:absolute; left:50%; bottom:9vh;
  /* Tweaks: Center Logo position */
  transform:translateX(calc(-50% + var(--logo-x,0px))) translateY(var(--logo-y,0px));
  z-index:38; display:flex; flex-direction:column; align-items:center;
  pointer-events:none; transition:opacity .45s ease;
}
.emblem__img{
  width:calc(96px * var(--logo-scale,1)); height:auto; display:block;   /* Tweaks: Center Logo size */
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.65)) drop-shadow(0 0 16px rgba(255,42,58,.25));
}
.stage.is-stroke .emblem,
.stage.is-spray  .emblem{ opacity:0; }

/* =====================================================================
   TRANSITION FX OVERLAYS
   ===================================================================== */
.fx{ position:absolute; inset:0; z-index:60; pointer-events:none; opacity:0; }

/* --- paint splatter (The Stroke) --- */
.fx--paint{
  background:
    radial-gradient(circle at 30% 40%, var(--crimson) 0 6%, transparent 6.5%),
    radial-gradient(circle at 70% 30%, var(--bright-red) 0 4%, transparent 4.5%),
    radial-gradient(circle at 50% 60%, var(--wine) 0 9%, transparent 9.5%),
    radial-gradient(circle at 22% 70%, var(--neon) 0 3%, transparent 3.5%),
    radial-gradient(circle at 82% 72%, var(--crimson) 0 5%, transparent 5.5%),
    radial-gradient(circle at 50% 50%, var(--crimson), var(--wine) 55%, var(--deep-burgundy));
  clip-path:circle(0% at 30% 50%);
}
.fx--paint.run{ animation:paintWipe var(--split-dur) var(--ease) forwards; }
@keyframes paintWipe{
  0%{ opacity:1; clip-path:circle(0% at 28% 50%); }
  45%{ opacity:1; clip-path:circle(120% at 50% 50%); }
  70%{ opacity:1; clip-path:circle(120% at 50% 50%); }
  100%{ opacity:0; clip-path:circle(120% at 78% 50%); }
}

/* --- spray mist (The Spray) --- */
.fx--spray{ background:transparent; }
.fx--spray #spray-canvas{ position:absolute; inset:0; width:100%; height:100%; }
.fx--spray.run{ animation:fxFade var(--split-dur) ease forwards; }
@keyframes fxFade{ 0%{opacity:1;} 80%{opacity:1;} 100%{opacity:0;} }

/* =====================================================================
   REVEALED WORLD  —  top bar
   ===================================================================== */
.worldbar{
  position:absolute; top:0; left:0; right:0; height:74px; z-index:45;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 34px; opacity:0; transform:translateY(-12px); pointer-events:none;
  transition:opacity .5s ease .15s, transform .5s ease .15s;
  background:linear-gradient(180deg, rgba(5,5,5,.85), transparent);
}
.stage.is-stroke .worldbar,
.stage.is-spray  .worldbar{ opacity:1; transform:none; pointer-events:auto; }
.worldbar__back{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.25); color:#fff;
  font-family:'Oswald'; font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:9px 18px; border-radius:2px; transition:border-color .3s, background .3s;
}
.worldbar__back:hover{ border-color:var(--neon); background:rgba(255,42,58,.12); }
.worldbar__arrow{ font-size:20px; line-height:0; }
.worldbar__title{ position:absolute; left:50%; transform:translateX(-50%);
  font-family:'Permanent Marker'; color:var(--neon); font-size:18px; letter-spacing:1px; }
.worldbar__brand{ font-family:'Permanent Marker'; color:#fff; font-size:20px; opacity:.85; }

/* =====================================================================
   REVEALED WORLD  —  bottom action bar (horizontal, hides portrait cutoff)
   ===================================================================== */
.menu{
  position:absolute; left:50%; bottom:0; z-index:42;
  transform:translateX(-50%) translateY(24px);
  width:min(1480px,97vw); padding:0 0 30px;
  display:flex; flex-direction:row; align-items:stretch; justify-content:center; gap:14px;
  opacity:0; pointer-events:none; transform-origin:bottom center;
  transition:opacity .6s ease .25s, transform .6s var(--ease) .25s;
}
/* solid fade behind the bar so the portrait shoulder cutoff is hidden */
.menu::before{
  content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:100vw; height:240%; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(5,5,5,.72) 42%, var(--rich-black) 88%);
}
/* Tweaks: move/resize each world's menu button row independently */
.stage.is-stroke #menu-stroke{ opacity:1; pointer-events:auto;
  transform:translateX(calc(-50% + var(--menu-stroke-x,0px))) translateY(var(--menu-stroke-y,0px)) scale(var(--menu-stroke-scale,1)); }
.stage.is-spray  #menu-spray { opacity:1; pointer-events:auto;
  transform:translateX(calc(-50% + var(--menu-spray-x,0px))) translateY(var(--menu-spray-y,0px)) scale(var(--menu-spray-scale,1)); }

/* big world title parked over the shoulder, in the empty side area */
.menu__lead{
  position:absolute; bottom:46vh; margin:0; z-index:1;
  font-family:'Anton'; text-transform:uppercase; line-height:.82;
  font-size:clamp(56px,8.5vw,150px); letter-spacing:1px;
  background:linear-gradient(180deg,#fff,var(--silver) 52%,#6f7174);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 8px 30px rgba(0,0,0,.85));
  pointer-events:none;
}
/* Tweaks: per-page world titles (size + position) */
#menu-stroke .menu__lead{ right:1.5vw; text-align:right; transform-origin:right bottom;
  transform:translate(var(--lead-stroke-x,0px), var(--lead-stroke-y,0px)) scale(var(--lead-stroke-scale,1)); }
#menu-spray  .menu__lead{ left:1.5vw; text-align:left; transform-origin:left bottom;
  transform:translate(var(--lead-spray-x,0px), var(--lead-spray-y,0px)) scale(var(--lead-spray-scale,1)); }
.menu__lead span{
  display:block; font-family:'Oswald'; -webkit-text-fill-color:var(--neon); color:var(--neon);
  font-size:clamp(16px,1.4vw,22px); letter-spacing:10px; margin-bottom:6px;
  -webkit-background-clip:initial; background:none; filter:none;
}

/* the two wrappers vanish from layout so all 5 buttons share one flex row */
.menu__list, .menu__list li, .menu__actions{ display:contents; }
.menu__list{ list-style:none; }

.menu__item{
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:11px;
  min-height:230px; text-align:center; cursor:pointer;
  background:linear-gradient(180deg, rgba(26,26,29,.94), rgba(18,18,20,.66));
  border:1px solid rgba(255,255,255,.1); border-top:3px solid var(--neon);
  padding:26px 18px; color:#fff; font-family:'Oswald';
  border-radius:8px;
  transition:transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.menu__item:hover{
  transform:translateY(-9px);
  background:linear-gradient(180deg, rgba(123,15,30,.72), rgba(26,26,29,.55));
  box-shadow:0 18px 44px rgba(0,0,0,.6);
}
.menu__ico{ color:var(--neon); display:block; }
.menu__ico svg{ width:40px; height:40px; display:block; }
.menu__label{ font-size:clamp(18px,1.6vw,25px); font-weight:600; text-transform:uppercase; letter-spacing:1px; line-height:1; }
.menu__desc{ font-size:12px; color:var(--light-gray); font-weight:300; letter-spacing:.5px; }

/* accent variants — cross-nav (red) + Tap In (gold) keep the same card shape */
.menu__item--swap{ border-top-color:var(--bright-red); }
.menu__item--swap .menu__ico{ color:var(--bright-red); }
.menu__item--swap:hover{ background:linear-gradient(180deg, rgba(227,27,35,.55), rgba(26,26,29,.5)); }
.menu__item--tapin{ border-top-color:var(--gold); }
.menu__item--tapin .menu__ico{ color:var(--gold); }
.menu__item--tapin:hover{ background:linear-gradient(180deg, rgba(212,175,55,.4), rgba(26,26,29,.5)); }
.menu__item--motion{ border-top-color:#8b5cf6; }
.menu__item--motion .menu__ico{ color:#a78bfa; }
.menu__item--motion:hover{ background:linear-gradient(180deg, rgba(139,92,246,.42), rgba(26,26,29,.5)); }

/* =====================================================================
   CONTENT DRAWER
   ===================================================================== */
.drawer{
  position:absolute; inset:0; z-index:80;
  background:rgba(5,5,5,.72); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .4s ease;
  display:flex; align-items:stretch; justify-content:center;
}
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer__sheet{
  margin-top:auto; width:100%; max-height:88vh; height:88vh;
  background:linear-gradient(180deg,var(--charcoal),var(--soft-black));
  border-top:3px solid var(--neon);
  box-shadow:0 -20px 60px rgba(0,0,0,.7);
  transform:translateY(40px); transition:transform .45s var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open .drawer__sheet{ transform:none; }
.drawer__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px; border-bottom:1px solid rgba(255,255,255,.08);
  flex:0 0 auto;
}
.drawer__title{ font-family:'Anton'; text-transform:uppercase; font-size:clamp(24px,3vw,40px); letter-spacing:1px; }
.drawer__title small{ display:block; font-family:'Oswald'; font-weight:300; font-size:13px; letter-spacing:3px; color:var(--neon); text-transform:uppercase; }
.drawer__close{
  width:46px; height:46px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-size:26px; line-height:1; transition:background .3s, transform .3s;
}
.drawer__close:hover{ background:var(--neon); transform:rotate(90deg); }
.drawer__body{ overflow-y:auto; padding:34px 40px 60px; flex:1 1 auto; }

/* ---- gallery grid ---- */
.gallery{ columns:4 240px; column-gap:18px; }
.gallery figure{
  break-inside:avoid; margin:0 0 18px; position:relative; overflow:hidden;
  border-radius:4px; background:var(--charcoal); border:1px solid rgba(255,255,255,.06);
}
.gallery img{ display:block; width:100%; height:auto; transition:transform .5s var(--ease); }
.gallery figure:hover img{ transform:scale(1.05); }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 14px 12px;
  font-size:14px; font-weight:500; letter-spacing:.5px;
  background:linear-gradient(0deg, rgba(5,5,5,.92), transparent);
  transform:translateY(8px); opacity:0; transition:.4s var(--ease);
}
.gallery figure:hover figcaption{ transform:none; opacity:1; }
.gallery figcaption .price{ display:block; color:var(--gold); font-family:'Anton'; font-size:16px; margin-top:2px; }

/* ---- car / completed-work grid ---- */
.cars{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.cars figure{ margin:0; position:relative; border-radius:6px; overflow:hidden; aspect-ratio:4/3; background:var(--charcoal); border:1px solid rgba(255,255,255,.08); }
.cars img{ width:100%; height:100%; object-fit:cover; }
.cars figcaption{ position:absolute; left:14px; bottom:12px; font-weight:600; letter-spacing:1px; text-shadow:0 2px 8px #000; }
.car-slot{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  color:var(--light-gray); border:2px dashed rgba(255,255,255,.18); background:rgba(255,255,255,.02);
}
.car-slot b{ color:var(--neon); font-family:'Permanent Marker'; font-size:30px; }
.car-slot span{ font-size:12px; letter-spacing:1px; max-width:80%; text-align:center; }

/* ---- forms / panels ---- */
.lead-copy{ max-width:620px; font-weight:300; font-size:16px; line-height:1.7; color:var(--light-gray); margin-bottom:30px; text-wrap:pretty; }
.lead-copy strong{ color:var(--off-white); font-weight:600; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:720px; }
.form-grid .full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field label{ font-size:12px; letter-spacing:2px; text-transform:uppercase; color:var(--silver); }
.field input,.field select,.field textarea{
  background:var(--rich-black); border:1px solid rgba(255,255,255,.16); color:#fff;
  padding:13px 15px; font-family:'Oswald'; font-size:15px; border-radius:3px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(255,42,58,.18); }
.btn-primary{
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:linear-gradient(180deg,var(--bright-red),var(--crimson)); color:#fff; border:0;
  font-family:'Oswald'; font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:14px;
  padding:15px 34px; border-radius:3px; box-shadow:0 10px 30px rgba(227,27,35,.35);
  transition:transform .25s var(--ease), box-shadow .25s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(255,42,58,.5); }

/* payment cards */
.pay-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; max-width:780px; }
.pay-card{
  border:1px solid rgba(255,255,255,.12); border-radius:8px; padding:26px 22px;
  background:linear-gradient(180deg,var(--charcoal),var(--soft-black));
  display:flex; flex-direction:column; gap:10px; transition:transform .3s var(--ease), border-color .3s;
}
.pay-card:hover{ transform:translateY(-4px); border-color:var(--neon); }
.pay-card h4{ font-family:'Anton'; font-size:22px; letter-spacing:1px; }
.pay-card p{ font-size:13px; color:var(--light-gray); font-weight:300; line-height:1.5; }
.pay-card a{ margin-top:auto; color:var(--gold); font-weight:600; letter-spacing:1px; text-decoration:none; font-size:14px; }
.pay-card a:hover{ color:var(--neon); }

.note{
  margin-top:30px; padding:16px 20px; border-left:3px solid var(--gold);
  background:rgba(212,175,55,.07); font-size:13px; color:var(--champagne); line-height:1.6; max-width:680px; border-radius:0 4px 4px 0;
}
.note b{ color:var(--gold); }

/* ---- designer / builder credit (bottom of Contact) ---- */
.site-credit{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin:40px auto 8px; padding-top:24px; max-width:680px;
  border-top:1px solid rgba(255,255,255,.08);
}
.site-credit__by{
  font-family:'Oswald',sans-serif; font-size:10px; letter-spacing:4px;
  text-transform:uppercase; color:var(--light-gray); opacity:.7;
}
.site-credit__link{ display:inline-block; line-height:0; text-decoration:none; }
.site-credit__logo{
  width:auto; height:96px; max-width:70%; display:block;
  opacity:.9; transition:opacity .3s ease, transform .3s ease;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6));
}
.site-credit__link:hover .site-credit__logo{ opacity:1; transform:translateY(-2px); }

/* ---- social / Tap In grid ---- */
.social-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; max-width:680px; }
.social-card{
  display:flex; align-items:center; gap:16px; padding:20px 22px; text-decoration:none;
  background:linear-gradient(90deg, rgba(26,26,29,.9), rgba(26,26,29,.5));
  border:1px solid rgba(255,255,255,.1); border-radius:8px; color:#fff;
  transition:transform .3s var(--ease), background .3s, border-color .3s, box-shadow .3s;
}
.social-card:hover{ transform:translateY(-4px); border-color:var(--neon); box-shadow:0 14px 36px rgba(0,0,0,.5); }
.social-card__ico{ flex:0 0 auto; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:10px; }
.social-card__ico svg{ width:26px; height:26px; }
.social-card--fb .social-card__ico{ color:#fff; background:#1877f2; }
.social-card--ig .social-card__ico{ color:#fff; background:linear-gradient(45deg,#f09433,#e6683c 30%,#dc2743 55%,#cc2366 75%,#bc1888); }
.social-card__txt{ display:flex; flex-direction:column; line-height:1.3; }
.social-card__txt b{ font-family:'Oswald'; font-size:18px; font-weight:600; letter-spacing:.5px; }
.social-card__txt span{ font-size:13px; color:var(--light-gray); }
.social-card__go{ margin-left:auto; font-size:26px; color:var(--neon); }

/* events list (paint & sip) */
.events{ display:flex; flex-direction:column; gap:14px; max-width:720px; margin-bottom:34px; }
.event{
  display:flex; align-items:center; gap:20px; padding:16px 20px;
  background:linear-gradient(90deg, rgba(123,15,30,.25), rgba(26,26,29,.5));
  border:1px solid rgba(255,255,255,.08); border-radius:6px;
}
.event__date{ text-align:center; flex:0 0 auto; }
.event__date b{ display:block; font-family:'Anton'; font-size:30px; color:var(--neon); line-height:.9; }
.event__date span{ font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--silver); }
.event__info h4{ font-size:18px; font-weight:600; letter-spacing:.5px; }
.event__info p{ font-size:13px; color:var(--light-gray); font-weight:300; }
.event__cta{ margin-left:auto; }

/* =====================================================================
   ENTRANCE
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  .brand{ animation:riseUp .9s var(--ease); }
  .choice--left{ animation:riseUp .9s var(--ease) .15s backwards; }
  .choice--right{ animation:riseUp .9s var(--ease) .28s backwards; }
  .hero{ animation:riseUp .9s var(--ease); }
  .emblem{ animation:riseEm .9s var(--ease) .4s backwards; }
}
/* transform-only entrances — opacity is never animated, so content is always
   visible (computed opacity:1) regardless of animation timing/throttling */
@keyframes riseUp{ from{ transform:translateY(22px); } to{ transform:none; } }
@keyframes riseHero{ from{ transform:translateX(-50%) translateY(22px); } to{ transform:translateX(-50%); } }
@keyframes riseEm{ from{ transform:translateX(-50%) translateY(22px); } to{ transform:translateX(-50%); } }

/* =====================================================================
   TOP NAV  (HOME / ART / AUTOMOTIVE / SHOP / CONTACT)
   ===================================================================== */
.topnav{
  position:absolute; top:30px; right:34px; z-index:42;
  display:flex; align-items:center; gap:4px;
  transition:opacity .4s ease;
}
.topnav__link{
  position:relative; background:transparent; border:0; cursor:pointer;
  color:var(--light-gray); font-family:'Oswald',sans-serif; font-weight:500;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  padding:8px 14px; border-radius:3px; transition:color .25s ease;
}
.topnav__link::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px;
  background:var(--neon); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.topnav__link:hover{ color:#fff; }
.topnav__link.is-active{ color:#fff; }
.topnav__link:hover::after,
.topnav__link.is-active::after{ transform:scaleX(1); }
/* nav stays visible inside a revealed world, top-right in the same spot;
   it sits above the worldbar, whose small wordmark is dropped to make room */
.stage.is-stroke .topnav,
.stage.is-spray  .topnav{ opacity:1; pointer-events:auto; z-index:46; }
.stage.is-stroke .worldbar__brand,
.stage.is-spray  .worldbar__brand{ display:none; }

/* =====================================================================
   SOLD price badge (Shop + Art for Sale)
   ===================================================================== */
.gallery .price--sold{
  color:var(--neon); font-family:'Anton',sans-serif; letter-spacing:2px;
}
.gallery figure.is-sold img{ filter:grayscale(.12) brightness(.94); }

/* =====================================================================
   SHOP + CONTACT helpers
   ===================================================================== */
.shop-h{
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:1px;
  font-size:clamp(20px,2.4vw,26px); margin:6px 0 16px;
}
.shop-h + .cars{ margin-bottom:30px; }

/* ---- Product listing (merch for sale) ---- */
.product{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:26px;
  align-items:center; margin-bottom:34px;
  background:linear-gradient(180deg, rgba(22,22,26,.6), rgba(8,8,10,.7));
  border:1px solid rgba(255,255,255,.1); border-top:2px solid rgba(255,42,58,.55);
  border-radius:16px; padding:22px;
}
.product__gallery{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.product__gallery figure{ margin:0; }
.product__gallery img{
  width:100%; aspect-ratio:1/1; object-fit:cover; display:block;
  background:#fff; border-radius:10px; border:1px solid rgba(255,255,255,.12);
}
.product__gallery figcaption{
  margin-top:6px; text-align:center; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; color:var(--light-gray); font-weight:500;
}
.product__name{ font-family:'Anton',sans-serif; letter-spacing:1px; font-size:clamp(24px,3vw,32px); line-height:1.05; }
.product__price{ font-family:'Anton',sans-serif; color:var(--gold); font-size:26px; letter-spacing:1px; margin:8px 0 12px; }
.product__desc{ font-size:14px; color:var(--light-gray); font-weight:300; line-height:1.6; margin-bottom:16px; }
.product__buy{ display:inline-block; text-decoration:none; margin-bottom:14px; }
.product__note{ font-size:13px; color:var(--light-gray); font-weight:300; line-height:1.6; }
.product__note b{ color:var(--off-white); font-weight:600; }
.pay-card--cashapp{ border-color:rgba(0,214,111,.55); }
@media (max-width:640px){
  .product{ grid-template-columns:1fr; gap:18px; }
}
.contact-direct{
  margin:20px 0 24px; font-size:15px; color:var(--light-gray); font-weight:300;
}
.contact-direct a{ color:var(--gold); text-decoration:none; font-weight:600; letter-spacing:.5px; }
.contact-direct a:hover{ color:var(--neon); }
.contact-sep{ margin:0 10px; opacity:.45; }

/* =====================================================================
   VIDEO WALL — drag-anywhere floating gallery (STROKE / SPRAY)
   ===================================================================== */
.drawer__body--flush{ padding:0 !important; overflow:hidden !important; }
/* videos = true full page */
.drawer--full .drawer__sheet{ height:100vh; max-height:100vh; height:100dvh; max-height:100dvh; }
.drawer--full .drawer__head{ padding:14px 40px; }
.wall{
  position:relative; width:100%; height:100%; overflow:hidden;
  background:var(--rich-black);
  cursor:grab; touch-action:none; user-select:none;
  perspective:820px; perspective-origin:50% 50%;
}
.wall.is-grabbing{ cursor:grabbing; }
/* concave "inside of a domed room" backdrop */
.wall__dome{
  position:absolute; inset:-10%; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(123,15,30,.30), rgba(43,10,20,.18) 42%, transparent 74%),
    radial-gradient(120% 120% at 50% 50%, transparent 46%, rgba(0,0,0,.82) 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.028) 0 1px, transparent 1px 46px),
    var(--rich-black);
}
.wall__plane{
  position:absolute; top:0; left:0; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:opacity .24s ease;
}
.wall__plane.is-switching{ opacity:0; }
/* edge fog so tiles melt into darkness instead of hard-stopping */
.wall__fog{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:
    linear-gradient(90deg, var(--rich-black), transparent 12%, transparent 88%, var(--rich-black)),
    linear-gradient(180deg, var(--rich-black), transparent 14%, transparent 82%, var(--rich-black));
}
.wall__hint{
  position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:5;
  display:flex; align-items:center; gap:10px; margin:0; pointer-events:none;
  font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--silver);
  background:rgba(10,10,12,.66); border:1px solid rgba(255,255,255,.12);
  padding:10px 20px; border-radius:999px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:opacity .6s ease;
  animation:pulse 2.6s ease 1.2s infinite;
}
.wall__hint span{ color:var(--neon); font-size:14px; }
.wall__hint.is-gone{ opacity:0; animation:none; }

/* ---- tiles (positioned entirely via JS transform for the curved wall) ---- */
.wtile{
  position:absolute; top:0; left:0; width:232px; height:330px; margin:0;
  transform-origin:center center; backface-visibility:hidden;
  border-radius:12px; overflow:hidden;
  background:linear-gradient(165deg,#131316,#0a0a0c 70%);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 22px 48px rgba(0,0,0,.55);
  transition:border-color .3s ease, box-shadow .3s ease;
}
.wtile:hover{ border-color:rgba(255,42,58,.55); box-shadow:0 26px 60px rgba(0,0,0,.7), 0 0 34px rgba(255,42,58,.12); }
.wtile img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(1.04) contrast(1.03);
}
.wtile[data-tap]{ cursor:pointer; }
.wtile__go{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:18px; padding-left:4px;
  background:rgba(5,5,5,.55); border:1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .3s ease, transform .3s var(--ease);
}
.wtile:hover .wtile__go{ background:var(--bright-red); transform:translate(-50%,-50%) scale(1.08); }
/* placeholder tile */
.wtile--ph{ border-style:dashed; border-color:rgba(255,255,255,.13); background:linear-gradient(165deg,rgba(26,26,29,.65),rgba(10,10,12,.85)); }
/* link-only tile (no thumbnail yet, but tappable) — solid border, live accent */
.wtile--ph[data-tap]{
  border-style:solid; border-color:rgba(255,42,58,.28);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(123,15,30,.28), transparent 60%),
    linear-gradient(165deg,rgba(26,26,29,.8),rgba(10,10,12,.9));
}
.wtile--ph[data-tap] .wtile__ph i{ border-color:rgba(255,42,58,.7); box-shadow:0 0 26px rgba(255,42,58,.25) inset; }
.wtile--ph[data-tap]:hover{ border-color:rgba(255,42,58,.65); }
.wtile__ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px; color:var(--light-gray);
}
.wtile__ph i{
  font-style:normal; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding-left:3px;
  color:var(--neon); font-size:15px;
  border:1px solid rgba(255,42,58,.4); box-shadow:0 0 22px rgba(255,42,58,.14) inset;
}
.wtile__ph b{ font-family:'Oswald'; font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:13px; color:var(--off-white); }
.wtile__ph small{ font-size:10px; letter-spacing:3px; text-transform:uppercase; opacity:.6; }

/* ---- STROKE / SPRAY toggle, floating at the bottom center ---- */
.vid-toggle{
  position:relative;
  width:max-content;
  display:flex; align-items:center; padding:4px; border-radius:999px;
  background:rgba(12,12,14,.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
.wall__toggle{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:6;
}
.vid-toggle__slider{
  position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:999px; background:linear-gradient(180deg,var(--bright-red),var(--crimson));
  box-shadow:0 6px 18px rgba(227,27,35,.45);
  transition:transform .35s var(--ease);
}
.wall[data-cat="spray"] .vid-toggle__slider,
.wall[data-cat="auto"]  .vid-toggle__slider{ transform:translateX(100%); }
.vid-toggle__btn{
  position:relative; z-index:1; flex:1 0 auto; min-width:120px; cursor:pointer;
  background:transparent; border:0; color:var(--light-gray);
  font-family:'Oswald'; font-weight:600; letter-spacing:2px; text-transform:uppercase; font-size:13px;
  padding:11px 26px; border-radius:999px; transition:color .3s ease;
}
.vid-toggle__btn.is-active{ color:#fff; }

/* ---- in-page video player (plays the reel without leaving the site) ---- */
.wall-player{
  position:absolute; inset:0; z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(4,4,6,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.wall-player.open{ opacity:1; pointer-events:auto; }
.wall-player__box{
  width:min(420px,92vw); height:min(74vh,720px);
  background:#000; border-radius:14px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14); box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.wall-player__box iframe{ width:100%; height:100%; border:0; display:block; }
.wall-player__box video{ width:100%; height:100%; border:0; display:block; object-fit:contain; background:#000; }
.wall-player__x{
  position:absolute; top:18px; right:20px; width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff;
  font-size:26px; line-height:1; cursor:pointer; transition:background .3s, transform .3s;
}
.wall-player__x:hover{ background:var(--neon); transform:rotate(90deg); }
.wall-player__fb{ text-decoration:none; }
.wall-player__note{ margin:0; font-size:12px; letter-spacing:.5px; color:var(--light-gray); font-weight:300; }

/* ---- image lightbox (Art / Auto gallery) ---- */
.wall-player--img .wall-player__box{
  width:auto; height:auto; max-width:92vw; max-height:82vh;
  background:transparent; border:0; box-shadow:none; display:flex;
  flex-direction:column; align-items:center; gap:12px;
}
.wall-player--img img{
  max-width:92vw; max-height:74vh; object-fit:contain; display:block;
  border-radius:14px; border:1px solid rgba(255,255,255,.16);
  box-shadow:0 30px 80px rgba(0,0,0,.72);
}
.wall-player__cap{
  margin:0; font-family:'Oswald'; letter-spacing:2px; text-transform:uppercase;
  font-size:13px; color:var(--off-white);
}
/* gallery tile: zoom badge + caption strip */
.wtile__go--zoom{ font-size:22px; padding-left:0; }
.wtile__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:16px 10px 8px; font-family:'Oswald'; font-weight:500;
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:#fff;
  text-align:center; opacity:0; transform:translateY(6px);
  background:linear-gradient(0deg, rgba(4,4,6,.82), transparent);
  transition:opacity .3s ease, transform .3s ease; pointer-events:none;
}
.wtile:hover .wtile__cap{ opacity:1; transform:none; }

/* =====================================================================
   EXPLORE MY WORLD button  +  BUILT DIFFERENT sign
   ===================================================================== */
.explore-btn{
  position:absolute; left:5vw; top:38%; z-index:36; pointer-events:auto;
  transform-origin:left top;
  /* Tweaks: Explore button — moves/scales independently of the left text */
  transform:translate(var(--explore-x,0px), var(--explore-y,0px)) scale(var(--explore-scale,1));
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  background:linear-gradient(180deg, rgba(227,27,35,.14), rgba(123,15,30,.12));
  color:#fff; border:1.5px solid var(--neon); border-radius:4px;
  font-family:'Oswald'; font-weight:600; letter-spacing:3px; text-transform:uppercase; font-size:13px;
  padding:13px 26px; box-shadow:0 0 22px rgba(255,42,58,.25);
  transition:background .3s, box-shadow .3s;
}
.explore-btn:hover{ background:linear-gradient(180deg,var(--bright-red),var(--crimson)); box-shadow:0 12px 34px rgba(227,27,35,.5); filter:brightness(1.05); }
.explore-btn__arrow{ font-size:20px; line-height:0; }
.stage.is-stroke .explore-btn,
.stage.is-spray  .explore-btn{ opacity:0; pointer-events:none; }

.bd-sign{
  position:absolute; top:11%; right:13vw; z-index:34;
  width:calc(min(220px,16vw) * var(--sign-scale,1));   /* Tweaks: Sign size */
  height:auto; pointer-events:none;
  filter:drop-shadow(0 6px 20px rgba(227,27,35,.35));
  /* Tweaks: Sign position */
  transform:translate(var(--sign-x,0px), var(--sign-y,0px)) rotate(-3deg);
}
/* sign shows on the landing AND on the revealed Spray page; hidden on Stroke */
.stage.is-stroke .bd-sign{ opacity:0; }
.stage.is-spray  .bd-sign{ opacity:1; z-index:46; }

/* =====================================================================
   RESPONSIVE — TABLET  (≤ 1024px)
   ===================================================================== */
@media (max-width:1024px){
  .menu{ width:96vw; }
  .gallery{ columns:3 200px; }

  /* The brand lockup (left) and the nav (right) share the top strip. Between
     ~769px and ~990px they ran into each other — the full-size lockup is
     wider than the room left over. Scale both down so they always clear. */
  .brand{ top:18px; left:20px; }
  .brand__name{ font-size:17px; }
  .brand__name em{ font-size:21px; }
  .brand__dot{ font-size:17px; }
  .brand__lock{ gap:9px; }
  .brand__badge{ font-size:12px; padding:3px 7px 2px; }
  .topnav{ gap:0; }
  .topnav__link{ font-size:11px; letter-spacing:1px; padding:8px 9px; }
}

/* =====================================================================
   MOBILE PORTRAIT  (≤ 768px)
   Complete layout redesign: horizontal split → vertical stack.
   Stroke panel occupies the top half; Spray panel occupies the bottom.
   The same JS/CSS --split custom property drives both.

   PROFILE: every position/size below reads the --mp-* namespace ONLY.
   Desktop-tuned numbers (--logo-scale, --stroke-btn-y, --bg-pos-*, …) are
   deliberately re-declared here so they can never bleed into this view.
   ===================================================================== */
@media (max-width:768px){

  /* ---- where the two stacked halves meet (Tweaks: Split Position) ---- */
  .stage{ --split:var(--mp-split,50%); }

  /* ---- panels: clip horizontally (top/bottom) instead of left/right ---- */
  .panel--stroke{
    clip-path:inset(0 0 calc(100% - var(--split)) 0);
    transition:clip-path var(--split-dur) var(--ease);
  }
  .panel--spray{
    clip-path:inset(var(--split) 0 0 0);
    transition:clip-path var(--split-dur) var(--ease);
  }

  /* ---- split line: horizontal bar at var(--split) from top ---- */
  .splitline{
    top:var(--split); left:0; right:0; bottom:auto;
    width:100%; height:2px; margin:-1px 0 0;
    background:linear-gradient(90deg, transparent, var(--neon) 14%, #fff 50%, var(--neon) 86%, transparent);
    transition:top var(--split-dur) var(--ease), opacity .5s ease;
  }
  .splitline::after{
    top:50%; left:0; right:0; bottom:auto;
    width:100%; height:60px;
    transform:translateY(-50%);
    background:radial-gradient(100% 50% at 50% 50%, rgba(255,42,58,.16), transparent 70%);
  }

  /* Both v4 portraits use the same canvas, crop, anchor, and transform. */
  .panel--stroke .scene__portrait,
  .panel--spray .scene__portrait{
    height:92vh; width:auto; max-width:none;
    top:auto; bottom:0; left:50%;
    transform:
      translateX(calc(-50% + var(--portrait-x,0px)))
      translateY(var(--portrait-y,0px))
      scale(var(--portrait-scale,1));
    /* fade out at the midpoint so shoulders don't show above the card bar */
    -webkit-mask-image:
      linear-gradient(to bottom, #000 28%, transparent 50%),
      linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%);
    mask-image:
      linear-gradient(to bottom, #000 28%, transparent 50%),
      linear-gradient(to right,  transparent 0, #000 5%, #000 95%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }

  /* Revealed states also remain geometrically identical. */
  .stage.is-stroke .panel--stroke .scene__portrait,
  .stage.is-spray .panel--spray .scene__portrait{
    height:80vh; width:auto; top:auto; bottom:0; left:50%; opacity:.85;
    transform:
      translateX(calc(-50% + var(--portrait-x,0px)))
      translateY(var(--portrait-y,0px))
      scale(var(--portrait-scale,1));
    -webkit-mask-image:
      linear-gradient(to bottom, #000 50%, transparent 82%),
      linear-gradient(to right,  transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%);
    mask-image:
      linear-gradient(to bottom, #000 50%, transparent 82%),
      linear-gradient(to right,  transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%);
    -webkit-mask-composite:source-in; mask-composite:intersect;
  }

  /* ---- scene floor: taller gradient to fill the lower card zone ---- */
  .scene__floor{ height:50%; }

  /* ---- The avatar now lives inside the background scenes, so hide the
     floating headshot portrait entirely on mobile (landing AND both worlds). ---- */
  .scene__portrait{ display:none !important; }
  /* de-zoom the backgrounds so more of each scene shows in its half.
     Portrait uses the --mp-* zoom/pan pair; the desktop --bg-* values that
     would otherwise still be in force are overridden here. */
  .scene__bg{ background-position:center; }
  /* mobile-only background scenes (desktop keeps its inline backgrounds) */
  .panel--stroke .scene__bg{
    background-image:url('assets/img/bg-stroke-mobile.jpg') !important;
    transform:scale(var(--mp-bg-zoom-stroke,1));
    background-position:calc(50% + var(--mp-bg-pos-x-stroke,0px)) calc(50% + var(--mp-bg-pos-y-stroke,0px));
  }
  .panel--spray  .scene__bg{
    background-image:url('assets/img/bg-spray-mobile.jpg') !important;
    transform:scale(var(--mp-bg-zoom-spray,1));
    background-position:calc(50% + var(--mp-bg-pos-x-spray,0px)) calc(50% + var(--mp-bg-pos-y-spray,0px));
  }
  /* LANDING ONLY: push the Spray scene down so the painter's back + car sit in
     the bottom split half (not the floor). Zoom gives vertical room to shift. */
  .stage:not(.is-stroke):not(.is-spray) .panel--spray .scene__bg{
    background-size:auto 150%;
    background-position:calc(50% + var(--mp-bg-pos-x-spray,0px)) calc(-2% + var(--mp-bg-pos-y-spray,0px));
  }
  /* SPRAY WORLD PAGE (revealed): raise the scene 35% so more of the car /
     lower composition shows. Higher % = scene moves up. */
  .stage.is-spray .panel--spray .scene__bg{
    background-size:auto 150%;
    background-position:calc(50% + var(--mp-bg-pos-x-spray,0px)) calc(85% + var(--mp-bg-pos-y-spray,0px));
  }

  /* ---- choice buttons: each lives in its own half ----
     Positions read --mp-* so the desktop --stroke-btn-* / --spray-btn-*
     offsets (which are still declared on .choice--left/right) are replaced
     rather than inherited. */
  /* flex-direction:column is what makes align-items:center mean "centred
     across the screen" and justify-content mean "against the split line".
     On the inherited row direction the two buttons were being thrown to
     opposite edges of the phone instead. */
  .choice{ width:100%; padding-bottom:0; flex-direction:column; }
  .choice--left{
    left:0; right:0; top:0; bottom:calc(100% - var(--mp-split,50%));
    align-items:center; justify-content:flex-end;
    padding-bottom:var(--mp-choice-gap,54px);
    transform-origin:center bottom;
    transform:translate(var(--mp-stroke-btn-x,0px), var(--mp-stroke-btn-y,0px));
  }
  .choice--right{
    left:0; right:0; top:var(--mp-split,50%); bottom:0;
    align-items:center; justify-content:flex-start;
    padding-top:var(--mp-choice-gap,54px);
    transform-origin:center top;
    transform:translate(var(--mp-spray-btn-x,0px), var(--mp-spray-btn-y,0px));
  }
  /* glassmorphic pill so text is readable over the portrait */
  .choice__inner{
    width:auto; overflow:visible;
    flex-direction:row; align-items:center; gap:10px;
    background:rgba(5,5,5,.62);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,42,58,.3); border-top:1px solid rgba(255,42,58,.3);
    border-radius:4px; padding:10px 16px 10px 12px;
    box-shadow:none;
  }
  .choice:hover .choice__inner{ transform:none; box-shadow:none; }
  /* image buttons stack full-width on phones — size them to the half, not 40vw.
     Portrait has its own scale so the desktop button size never applies here. */
  .choice.choice--img .choice__inner,
  .choice.choice--img:hover .choice__inner{
    width:min(340px,72vw);
    transform:scale(var(--mp-landing-btn-scale,1));
    transform-origin:center center;
  }
  /* the icon + paint stains are a desktop-card treatment; keep the mobile pill clean */
  .choice__ico, .choice__paint{ display:none; }
  .choice__eyebrow{ display:none; }
  .choice__sub{ display:none; }
  .choice__word{ font-size:clamp(30px,9vw,50px); }
  .choice__cta{ margin-top:0; font-size:11px; padding:9px 14px; clip-path:none; border-radius:2px; }

  /* ---- emblem logo: centered on the split; pills pushed clear of it ---- */
  .emblem{
    display:flex; bottom:auto; top:var(--mp-split,50%);
    transform:translate(calc(-50% + var(--mp-logo-x,0px)), calc(-50% + var(--mp-logo-y,0px)));
    z-index:39;
  }
  .emblem__img{ width:calc(76px * var(--mp-logo-scale,1)); }
  .bd-sign{ display:none; }
  /* Explore My World — fixed + centered near the bottom on mobile */
  .explore-btn{
    position:fixed; z-index:37;
    left:50%; right:auto; top:auto; bottom:4%;
    margin:0; transform-origin:center bottom;
    transform:translateX(-50%)
              translate(var(--mp-explore-x,0px), var(--mp-explore-y,0px))
              scale(var(--mp-explore-scale,1));
    font-size:11px; letter-spacing:2px; padding:12px 22px;
    background:rgba(5,5,5,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }
  .stage.is-stroke .explore-btn,
  .stage.is-spray  .explore-btn{ opacity:0; pointer-events:none; }

  /* ---- hero copy stays hidden on mobile; Choose-your-side sits up top ----
     transform:none so the Explore button (position:fixed) escapes to the
     viewport instead of being trapped by a transformed ancestor. ---- */
  .hero{
    top:auto; bottom:54%; left:6vw;
    transform:none;
    width:88vw;
  }
  /* hide verbose copy — the choice labels carry the message on mobile */
  .hero__kicker{ display:none; }
  .hero__limits{ display:none; }
  .hero__tag{ display:none; }
  #choose-hint{ top:13%; bottom:auto;
    transform:translateX(-50%) translateY(var(--mp-hint-y,0px)); }
  .hero__hint span{ font-size:10px; letter-spacing:3px; animation:none; opacity:.75; }

  /* ---- top nav: compact single strip across the top ---- */
  .topnav{
    top:0; left:0; right:0; gap:0; flex-wrap:nowrap; justify-content:center;
    padding:7px 4px; background:linear-gradient(180deg, rgba(5,5,5,.9), transparent);
    transform-origin:center top; transform:scale(var(--mp-nav-scale,1));
  }
  .topnav__link{ font-size:9px; letter-spacing:.3px; padding:5px 5px; }
  .topnav__link::after{ left:5px; right:5px; bottom:2px; }

  /* ---- brand hidden on mobile (centered YMFP logo carries identity;
     avoids colliding with the compact nav) ---- */
  .brand{ display:none; }

  /* ---- worldbar: on mobile the nav strip owns the very top, so the
     worldbar (Back + title) drops just beneath it inside a world ---- */
  .worldbar{ height:52px; padding:0 14px; }
  .worldbar__back{ font-size:11px; padding:7px 12px; }
  .worldbar__title{ font-size:14px; }
  .worldbar__brand{ font-size:14px; }
  .stage.is-stroke .topnav,
  .stage.is-spray  .topnav{ z-index:47; }
  .stage.is-stroke .worldbar,
  .stage.is-spray  .worldbar{ top:34px; background:linear-gradient(180deg, rgba(5,5,5,.7), transparent); }

  /* ---- menu: full-width wrapping card grid ---- */
  .menu{
    left:0; right:0; width:100%;
    transform:translateX(0) translateY(24px);
    padding:0 10px 18px;
    gap:8px;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:stretch;
    justify-content:flex-start;
    /* safety net: if the card stack is taller than the screen (short or very
       small phones), scroll it instead of clipping under the worldbar */
    max-height:calc(100vh - 60px);
    max-height:calc(100dvh - 60px);
    overflow-y:auto; overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .menu::-webkit-scrollbar{ display:none; }
  /* revealed: no horizontal centring translate needed — portrait has its own
     move/resize pair, so the desktop menu-row offsets never reach this
     layout */
  .stage.is-stroke #menu-stroke{
    transform:translate(var(--mp-menu-stroke-x,0px), var(--mp-menu-stroke-y,0px)) scale(var(--mp-menu-stroke-scale,1));
    transform-origin:bottom center;
  }
  .stage.is-spray #menu-spray{
    transform:translate(var(--mp-menu-spray-x,0px), var(--mp-menu-spray-y,0px)) scale(var(--mp-menu-spray-scale,1));
    transform-origin:bottom center;
  }
  /* row width — narrowing it shortens every card in that page's grid.
     left:0 + right:0 + an explicit width is over-constrained, so the auto
     margins are what keep the shortened row centred. */
  #menu-stroke{ width:var(--mp-menu-stroke-w,100%); margin-left:auto; margin-right:auto; }
  #menu-spray { width:var(--mp-menu-spray-w,100%);  margin-left:auto; margin-right:auto; }

  /* lead text: leave absolute position but pull it into visible area above cards */
  .menu__lead{
    position:relative !important;
    bottom:auto !important; left:auto !important;
    right:auto !important; top:auto !important;
    flex:0 0 100%;
    font-size:clamp(32px,10vw,52px);
    text-align:center;
    pointer-events:none;
    margin:0; padding:6px 0 0;
    filter:none;
    /* ignore the desktop title tweaks entirely; portrait has its own pair */
    transform-origin:center top;
  }
  /* STROKE and SPRAY titles move and scale independently of each other */
  #menu-stroke .menu__lead{
    right:auto !important; text-align:center;
    transform:translate(var(--mp-lead-stroke-x,0px), var(--mp-lead-stroke-y,0px)) scale(var(--mp-lead-stroke-scale,1)) !important;
  }
  #menu-spray  .menu__lead{
    left:auto !important;  text-align:center;
    transform:translate(var(--mp-lead-spray-x,0px), var(--mp-lead-spray-y,0px)) scale(var(--mp-lead-spray-scale,1)) !important;
  }
  .menu__lead span{
    display:inline; font-size:clamp(11px,3vw,15px);
    letter-spacing:6px; margin-right:8px; margin-bottom:0;
  }

  /* cards: two per row — card height is per page */
  .menu__item{
    flex:1 1 calc(50% - 4px);
    min-width:0; padding:16px 10px; gap:8px;
  }
  #menu-stroke .menu__item{ min-height:var(--mp-menu-stroke-h,120px); }
  #menu-spray  .menu__item{ min-height:var(--mp-menu-spray-h,120px); }
  .menu__ico svg{ width:28px; height:28px; }
  .menu__label{ font-size:clamp(12px,3.5vw,16px); }
  .menu__desc{ font-size:10px; }

  /* ---- drawer ---- */
  .drawer__sheet{ height:94vh; max-height:94vh; }
  .drawer__head{ padding:15px 18px; }
  .drawer__title{ font-size:clamp(18px,5vw,28px); }
  .drawer__body{ padding:18px 14px 60px; }
  .gallery{ columns:2 120px; column-gap:10px; }
  .gallery figure{ margin-bottom:10px; }
  .cars{ grid-template-columns:1fr; }
  .wtile{ width:172px; height:244px; }
  .wall__hint{ top:14px; font-size:10px; letter-spacing:2px; padding:8px 14px; white-space:nowrap; }
  .wall__toggle{ bottom:16px; }
  .vid-toggle__btn{ min-width:0; flex:1; padding:10px 16px; font-size:12px; letter-spacing:1px; }
  .form-grid{ grid-template-columns:1fr; }
  .form-grid .full{ grid-column:1; }
  .pay-grid{ grid-template-columns:1fr 1fr; }
  .social-grid{ grid-template-columns:1fr; }
  .events{ gap:10px; }
  .event{ flex-direction:column; align-items:flex-start; gap:8px; padding:14px 16px; }
  .event__cta{ width:100%; }
  .event__cta .btn-primary{ width:100%; justify-content:center; }
}

/* =====================================================================
   SMALL PHONES  (≤ 480px)  — tighter sizing, drop desc text
   ===================================================================== */
@media (max-width:480px){
  .menu__item{
    flex:1 1 calc(50% - 4px);
    padding:12px 8px; gap:6px;
  }
  /* small phones give back 16px of card height, still per page */
  #menu-stroke .menu__item{ min-height:calc(var(--mp-menu-stroke-h,120px) - 16px); }
  #menu-spray  .menu__item{ min-height:calc(var(--mp-menu-spray-h,120px) - 16px); }
  .menu__ico svg{ width:22px; height:22px; }
  .menu__label{ font-size:clamp(10px,3.2vw,13px); }
  .menu__desc{ display:none; }

  .brand__name{ font-size:11px; }
  .brand__name em{ font-size:14px; }
  .brand__dot{ font-size:14px; }
  .brand__badge{ display:none; }

  .choice__word{ font-size:clamp(26px,8.5vw,38px); }
  .choice__cta{ font-size:10px; padding:8px 12px; }
  .choice__inner{ gap:8px; padding:8px 12px 8px 10px; }

  .menu__lead{ font-size:clamp(28px,9.5vw,44px); }

  .gallery{ columns:2 90px; }
  .pay-grid{ grid-template-columns:1fr; }
  .scene__floor{ height:54%; }
}

/* =====================================================================
   VERY SMALL PHONES  (≤ 360px)  — single-column cards
   ===================================================================== */
@media (max-width:360px){
  .menu{ gap:6px; padding:0 8px 12px; }
  .menu__item{
    flex:1 1 100%;
    min-height:52px;
    flex-direction:row;
    text-align:left;
    justify-content:flex-start;
    align-items:center;
    gap:12px;
    padding:11px 14px;
  }
  .menu__ico{ flex:0 0 auto; }
  .menu__ico svg{ width:24px; height:24px; }
  .menu__label{ font-size:14px; }
  .menu__desc{ display:none; }
  /* compact title so all 5 cards + lead fit a 360×640 screen without scrolling */
  .menu__lead{ font-size:clamp(24px,8vw,34px); padding-top:4px; }
  .menu__lead span{ font-size:11px; letter-spacing:4px; }
  .gallery{ columns:1; }
}

/* =====================================================================
   RESPONSIVE — MOBILE LANDSCAPE  (phone held sideways: short viewport)
   Applies whenever the viewport is landscape AND ≤560px tall. Sits LAST
   in the file so it outranks both the desktop rules and the ≤768px
   portrait block (a 667×375 phone matches both queries). Every position
   here reads the --ls-* tweak variables only — the desktop-tuned values
   (logo 2.38×, hero offsets, etc.) are ignored in this mode.
   ===================================================================== */
@media (orientation: landscape) and (max-height: 560px){

  /* ---- where the two halves meet (Tweaks: Split Position) ---- */
  .stage{ --split:var(--ls-split,50%); }

  /* ---- chrome: brand off, nav becomes a slim centered strip ---- */
  .brand{ display:none; }
  .topnav{
    top:0; left:0; right:0; gap:0; flex-wrap:nowrap; justify-content:center;
    padding:5px 4px; background:linear-gradient(180deg, rgba(5,5,5,.92), transparent);
    transform-origin:center top; transform:scale(var(--ls-nav-scale,1));
  }
  .topnav__link{ font-size:10px; letter-spacing:1px; padding:5px 9px; }
  .topnav__link::after{ left:6px; right:6px; bottom:2px; }
  .stage.is-stroke .topnav,
  .stage.is-spray  .topnav{ opacity:1; pointer-events:auto; z-index:47; }

  /* ---- landing: hero copy off; the choice cards carry the message ---- */
  .hero{ display:none; }
  #choose-hint{ top:34px; bottom:auto;
    transform:translateX(-50%) translateY(var(--ls-hint-y,0px)); }
  .hero__hint span{ font-size:9px; letter-spacing:3px; }

  /* ---- restore the LEFT/RIGHT split (the ≤768 portrait block stacks the
     panels top/bottom; sideways phones go back to side-by-side halves) ---- */
  .panel--stroke{
    clip-path:inset(0 calc(100% - var(--split)) 0 0);
    transition:clip-path var(--split-dur) var(--ease), --split var(--split-dur) var(--ease);
  }
  .panel--spray{
    clip-path:inset(0 0 0 var(--split));
    transition:clip-path var(--split-dur) var(--ease);
  }
  .splitline{
    top:0; bottom:0; left:var(--split); right:auto;
    width:2px; height:auto; margin:0 0 0 -1px;
    background:linear-gradient(180deg, transparent, var(--neon) 14%, #fff 50%, var(--neon) 86%, transparent);
    transition:left var(--split-dur) var(--ease), opacity .5s ease;
  }
  .splitline::after{
    top:0; bottom:0; left:50%; right:auto;
    width:60px; height:auto;
    transform:translateX(-50%);
    background:radial-gradient(50% 60% at 50% 50%, rgba(255,42,58,.16), transparent 70%);
  }

  /* ---- scenes: desktop backgrounds + visible portraits, side by side.
     Zoom/pan read --ls-* so the desktop --bg-* numbers stay out of this view. */
  .panel--stroke .scene__bg{
    background-image:url('assets/img/bg-stroke.jpg') !important;
    background-size:cover; transform:scale(var(--ls-bg-zoom-stroke,1.05));
    background-position:calc(50% + var(--ls-bg-pos-x-stroke,0px)) calc(50% + var(--ls-bg-pos-y-stroke,0px));
  }
  .panel--spray .scene__bg{
    background-image:url('assets/img/bg-spray.jpg') !important;
    background-size:cover; transform:scale(var(--ls-bg-zoom-spray,1.05));
    background-position:calc(50% + var(--ls-bg-pos-x-spray,0px)) calc(50% + var(--ls-bg-pos-y-spray,0px));
  }
  .stage:not(.is-stroke):not(.is-spray) .panel--spray .scene__bg,
  .stage.is-spray .panel--spray .scene__bg{
    background-size:cover;
    background-position:calc(50% + var(--ls-bg-pos-x-spray,0px)) calc(50% + var(--ls-bg-pos-y-spray,0px));
  }
  .scene__portrait{ display:block !important; height:92vh; }
  /* Force the same v4 portrait geometry in short landscape viewports too. */
  .panel--stroke .scene__portrait,
  .panel--spray  .scene__portrait,
  .stage.is-stroke .panel--stroke .scene__portrait,
  .stage.is-spray  .panel--spray  .scene__portrait{
    height:calc(92vh * var(--ls-portrait-scale, 1)); width:auto; max-width:none;
    top:auto; bottom:0; left:50%; opacity:1;
    transform:
      translateX(calc(-50% + var(--ls-portrait-x, 0px)))
      translateY(var(--ls-portrait-y, 0px));
    -webkit-mask-image:
      linear-gradient(to bottom, #000 50%, transparent 82%),
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to bottom, #000 50%, transparent 82%),
      linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%),
      linear-gradient(to bottom, transparent 0, #000 3%);
    mask-composite: intersect;
  }
  .scene__floor{ height:36%; }

  /* ---- choice cards: compact glass cards at the foot of each half ---- */
  .choice{ width:50%; padding:0 0 3vh; align-items:flex-end; justify-content:center; }
  .choice--left{ left:0; right:auto; top:0; bottom:0;
    transform:translate(var(--ls-choice-x,0px), var(--ls-choice-y,0px)) scale(var(--ls-choice-scale,1)); }
  .choice--right{ right:0; left:auto; top:0; bottom:0; padding-top:0;
    transform:translate(calc(-1 * var(--ls-choice-x,0px)), var(--ls-choice-y,0px)) scale(var(--ls-choice-scale,1)); }
  /* Landscape has its own button size, so the desktop value can never push
     the two image buttons into each other on a short screen. */
  .choice.choice--img .choice__inner,
  .choice.choice--img:hover .choice__inner{
    transform:scale(var(--ls-landing-btn-scale,1));
    transform-origin:center bottom;
  }
  .choice__inner{
    width:min(280px,36vw); overflow:hidden;
    flex-direction:column; align-items:center; gap:3px;
    padding:10px 14px 9px;
    background:linear-gradient(180deg, rgba(22,22,26,.44), rgba(8,8,10,.62));
    border:1px solid rgba(255,255,255,.16); border-top:2px solid rgba(255,42,58,.6);
    border-radius:10px;
  }
  .choice:hover .choice__inner{ transform:none; }
  .choice__ico{ display:none; }
  .choice__paint{ display:block; opacity:.32; }
  .choice__paint--b{ display:none; }
  .choice__eyebrow{ display:block; font-size:9px; letter-spacing:5px; text-indent:5px; }
  .choice__word{ font-size:clamp(20px,5.6vh,30px); }
  .choice__sub{ display:block; font-size:8.5px; letter-spacing:.4px; }
  .choice__cta{ display:none; }

  /* ---- center logo: small, parked low on the split line ---- */
  .emblem{
    display:flex; top:auto; bottom:5vh; z-index:39;
    transform:translateX(calc(-50% + var(--ls-logo-x,0px))) translateY(var(--ls-logo-y,0px));
  }
  .emblem__img{ width:calc(70px * var(--ls-logo-scale,1)); }

  /* ---- Built Different sign: small, in the dark strip top-right ---- */
  .bd-sign{
    display:block; top:36px; right:2.5vw; left:auto;
    width:calc(96px * var(--ls-sign-scale,1));
    transform:translate(var(--ls-sign-x,0px), var(--ls-sign-y,0px)) rotate(-3deg);
  }

  /* ---- Explore My World: compact pill, top-right beneath the sign
     (the bottom edge belongs to the choice cards) ---- */
  /* sits directly under the Built Different sign, which ends at ~103px on a
     390px-tall screen — 96px used to clip its bottom edge */
  .explore-btn{
    position:fixed; left:auto; right:10px; top:114px; bottom:auto; margin:0;
    transform-origin:right top;
    transform:translate(var(--ls-explore-x,0px), var(--ls-explore-y,0px)) scale(var(--ls-explore-scale,1));
    font-size:10px; letter-spacing:2px; padding:8px 14px;
    background:rgba(5,5,5,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  }

  /* ---- revealed world: nav strip on top, slim worldbar beneath it ---- */
  .worldbar{ height:38px; padding:0 10px; }
  .stage.is-stroke .worldbar,
  .stage.is-spray  .worldbar{ top:27px; background:linear-gradient(180deg, rgba(5,5,5,.6), transparent); }
  .worldbar__back{ font-size:10px; padding:4px 10px; gap:5px; }
  .worldbar__arrow{ font-size:15px; }
  .worldbar__title{ font-size:12px; }

  /* ---- world menu: one slim row of six cards along the bottom ---- */
  .menu{
    left:0; right:0; width:100%;
    flex-direction:row; flex-wrap:nowrap; gap:6px;
    padding:0 8px 8px; transform:translateY(24px); transform-origin:bottom center;
    /* the ≤768 block scroll-clips the menu; that would cut off the absolute
       world title floating above the row */
    overflow:visible; max-height:none;
  }
  /* each page's row moves and scales on its own */
  .stage.is-stroke #menu-stroke{
    transform:translate(var(--ls-menu-stroke-x,0px), var(--ls-menu-stroke-y,0px)) scale(var(--ls-menu-stroke-scale,1));
  }
  .stage.is-spray #menu-spray{
    transform:translate(var(--ls-menu-spray-x,0px), var(--ls-menu-spray-y,0px)) scale(var(--ls-menu-spray-scale,1));
  }
  /* Row Length — the six cards share the row, so narrowing it makes every
     button in that page shorter. left:0 + right:0 + an explicit width is
     over-constrained, so the auto margins keep the shortened row centred. */
  #menu-stroke{ width:var(--ls-menu-stroke-w,100%); margin-left:auto; margin-right:auto; }
  #menu-spray { width:var(--ls-menu-spray-w,100%);  margin-left:auto; margin-right:auto; }
  .menu::before{ height:200%; }
  .menu__item{
    flex:1 1 0; min-width:0;
    flex-direction:column; gap:3px; padding:8px 4px;
    border-radius:6px; border-top-width:2px;
  }
  /* Button Height — also per page */
  #menu-stroke .menu__item{ min-height:var(--ls-menu-stroke-h,58px); }
  #menu-spray  .menu__item{ min-height:var(--ls-menu-spray-h,58px); }
  .menu__item:hover{ transform:translateY(-3px); }
  .menu__ico svg{ width:16px; height:16px; }
  .menu__label{
    font-size:clamp(8px,1.75vw,10px); letter-spacing:.25px; line-height:1.12;
    white-space:normal; overflow-wrap:anywhere;
  }
  .menu__desc{ display:none; }

  /* ---- world title: small, above the menu on the empty side.
     !important throughout: the ≤768 portrait block turns the lead into a
     100%-wide flex child (flex:0 0 100%; transform:none !important), which
     would otherwise consume the whole nowrap row and crush the six cards. ---- */
  .menu__lead{
    position:absolute !important; flex:none !important;
    bottom:76px !important; top:auto !important;
    margin:0; padding:0; font-size:clamp(24px,10vh,40px);
    filter:drop-shadow(0 8px 30px rgba(0,0,0,.85));
  }
  /* STROKE and SPRAY titles are fully independent — each anchors to its own
     side of the screen and carries its own size/position trio */
  #menu-stroke .menu__lead{
    right:2vw !important; left:auto !important; text-align:right;
    transform-origin:right bottom;
    transform:translate(var(--ls-lead-stroke-x,0px), var(--ls-lead-stroke-y,0px)) scale(var(--ls-lead-stroke-scale,1)) !important;
  }
  #menu-spray  .menu__lead{
    left:2vw !important; right:auto !important; text-align:left;
    transform-origin:left bottom;
    transform:translate(var(--ls-lead-spray-x,0px), var(--ls-lead-spray-y,0px)) scale(var(--ls-lead-spray-scale,1)) !important;
  }
  .menu__lead span{ display:block; font-size:10px; letter-spacing:5px; margin:0 0 2px; }

  /* ---- drawer + walls: reclaim vertical space ---- */
  .drawer__head{ padding:8px 16px; }
  .drawer__title{ font-size:17px; }
  .drawer__title small{ font-size:10px; }
  .drawer__body{ padding:14px 18px; }
  .contact-direct{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
  .contact-direct .contact-sep{ display:none; }
  .drawer--full .drawer__head{ padding:6px 16px; }
  .wall__hint{ top:8px; font-size:9px; letter-spacing:2px; padding:6px 12px; white-space:nowrap; }
  .wall__toggle{ bottom:8px; }
  .vid-toggle__btn{ min-width:82px; padding:8px 16px; font-size:11px; letter-spacing:1px; }
  .wall-player__box{ width:min(300px,42vw); height:min(80vh,540px); }
  .wall-player__note{ display:none; }
  .wall-player--img img{ max-height:70vh; }
}

@media (orientation: landscape) and (max-height:560px) and (max-width:600px){
  .topnav__link{
    font-size:clamp(8px,1.7vw,9px);
    letter-spacing:.6px;
    padding-inline:clamp(5px,1.35vw,8px);
    white-space:nowrap;
  }
  .menu{ gap:4px; padding-inline:6px; }
  .menu__item{ padding-inline:3px; }
}

/* =====================================================================
   NO-JAVASCRIPT FALLBACK
   Shown only when scripts are off. The stage never renders in that case,
   so this is the whole page — keep it plain, readable, and on-brand.
   ===================================================================== */
.nojs{
  position:fixed; inset:0; z-index:100; overflow-y:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:40px 24px; text-align:center;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(75,13,26,.55), transparent 70%),
    var(--rich-black);
  color:var(--off-white); font-family:'Oswald',sans-serif;
}
.nojs__logo{ width:150px; height:auto; }
.nojs h1{
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:1px;
  font-size:clamp(26px,6vw,52px); line-height:.95; margin:0;
}
.nojs__tag{
  font-family:'Permanent Marker',cursive; color:var(--neon);
  font-size:clamp(14px,3vw,22px); margin:0;
  text-shadow:0 0 24px rgba(255,42,58,.45);
}
.nojs p{ max-width:60ch; font-weight:300; line-height:1.6; color:var(--silver); margin:0; }
.nojs__links{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; padding:0; margin:6px 0 0; }
.nojs__links a{
  display:inline-block; text-decoration:none; color:#fff;
  border:1.5px solid var(--neon); border-radius:4px; padding:11px 20px;
  font-size:13px; letter-spacing:2px; text-transform:uppercase;
  background:linear-gradient(180deg, rgba(227,27,35,.14), rgba(123,15,30,.12));
}
.nojs__links a:hover{ background:linear-gradient(180deg,var(--bright-red),var(--crimson)); }