/* =========================================================
   TRUMPCHUA — "Comic Salon" art direction
   Oil-painting provenance × ben-day halftone × 3D perspective
   ========================================================= */

:root{
  --ink:#0b0907;
  --ink-2:#1a1410;
  --cream:#f4e7cd;
  --cream-2:#e8d5ae;
  --paper:#efe0c2;
  --gold:#d9a441;
  --gold-hi:#ffe6a6;
  --gold-dp:#8c6316;
  --ox:#8e1f1f;
  --ox-hi:#c62d2d;
  --navy:#1c2b4a;
  --frame:6px;
  --pop:14px;
  --nav-h:74px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 18px)}
body{
  margin:0;
  background:#0b0907;
  color:var(--cream);
  font-family:'Barlow Condensed',system-ui,sans-serif;
  font-size:19px;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------------------------------------------------------
   BACKGROUND STACK (fixed, image + halftone + shine)
   --------------------------------------------------------- */
.bg{position:fixed;inset:0;z-index:-3;overflow:hidden;pointer-events:none}

.bg__art{
  position:absolute;inset:-6%;
  background:url('../assets/provenance.webp') center/cover no-repeat;
  filter:blur(7px) saturate(.78) brightness(.42) contrast(1.12);
  transform:scale(1.12);
  animation:bgDrift 46s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{transform:scale(1.12) translate3d(-1.4%,-1%,0)}
  to  {transform:scale(1.2) translate3d(1.6%,1.4%,0)}
}

/* warm vignette + colour grade */
.bg__grade{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 50% 8%, rgba(217,164,65,.20), transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(142,31,31,.22), transparent 62%),
    radial-gradient(100% 100% at 50% 50%, transparent 32%, rgba(6,4,3,.86) 100%),
    linear-gradient(180deg, rgba(9,7,5,.72), rgba(9,7,5,.9));
}

/* ben-day halftone dots — the comic layer */
.bg__dots{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(244,231,205,.16) 1.1px, transparent 1.2px);
  background-size:7px 7px;
  mix-blend-mode:overlay;
  opacity:.55;
}

/* comic speed / sunburst rays */
.bg__rays{
  position:absolute;left:50%;top:-28vh;width:180vmax;height:180vmax;
  transform:translateX(-50%);
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,226,160,.055) 0deg 3.2deg, transparent 3.2deg 9deg);
  animation:raySpin 120s linear infinite;
  opacity:.7;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0%, transparent 62%);
}
@keyframes raySpin{to{transform:translateX(-50%) rotate(360deg)}}

/* THE SHINE — diagonal gloss sweeping the whole page background */
.bg__shine{position:absolute;inset:-40% -60%;pointer-events:none}
.bg__shine::before,
.bg__shine::after{
  content:"";position:absolute;top:0;bottom:0;width:60%;
  background:linear-gradient(105deg,
    transparent 0%,
    rgba(255,232,176,.045) 34%,
    rgba(255,244,214,.16) 48%,
    rgba(255,255,255,.20) 50%,
    rgba(255,244,214,.16) 52%,
    rgba(255,232,176,.045) 66%,
    transparent 100%);
  filter:blur(2px);
  animation:shineSweep 11s cubic-bezier(.6,0,.4,1) infinite;
}
.bg__shine::after{animation-delay:5.5s;opacity:.6}
@keyframes shineSweep{
  0%{transform:translateX(-90%) skewX(-14deg)}
  100%{transform:translateX(240%) skewX(-14deg)}
}

/* film grain */
.bg__grain{
  position:absolute;inset:-15%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.42'/></svg>");
  opacity:.16;mix-blend-mode:overlay;
  animation:grainShift 1.1s steps(4) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}
  100%{transform:translate(0,0)}
}

/* infinite perspective floor grid at the very bottom of the viewport */
.bg__floor{
  position:fixed;left:-20%;right:-20%;bottom:-2vh;height:44vh;
  z-index:-2;perspective:260px;perspective-origin:50% 0%;
  pointer-events:none;opacity:.30;
  -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 92%);
          mask-image:linear-gradient(to top,#000 8%,transparent 92%);
}
.bg__floor i{
  position:absolute;inset:-100% 0 0 0;
  transform:rotateX(70deg);
  transform-origin:50% 100%;
  background-image:
    linear-gradient(rgba(217,164,65,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217,164,65,.40) 1px, transparent 1px);
  background-size:120px 120px;
  animation:floorRun 5.5s linear infinite;
}
@keyframes floorRun{from{background-position:0 0,0 0}to{background-position:0 120px,0 0}}

/* ---------------------------------------------------------
   TYPE
   --------------------------------------------------------- */
.display{
  font-family:'Bangers',cursive;
  letter-spacing:.035em;
  line-height:.92;
  text-transform:uppercase;
}
.slab{font-family:'Archivo Black',system-ui,sans-serif;letter-spacing:-.01em}
.mono{font-family:'Space Mono',ui-monospace,monospace}

/* gold foil text with a travelling shine */
.foil{
  background:linear-gradient(100deg,
    #8c6316 0%, #d9a441 18%, #ffeebb 32%, #fffdf2 38%,
    #ffe6a6 46%, #d9a441 60%, #a8792a 78%, #f0cf86 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:foilRun 7s linear infinite;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.55));
}
@keyframes foilRun{to{background-position:280% 0}}

/* thick comic outline on display text */
.outline-ink{
  -webkit-text-stroke:3px var(--ink);
  paint-order:stroke fill;
}
.ink-shadow{text-shadow:5px 5px 0 var(--ink), 9px 9px 0 rgba(0,0,0,.42)}

/* ---------------------------------------------------------
   COMIC PANEL PRIMITIVE
   --------------------------------------------------------- */
.panel{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:var(--frame) solid var(--ink);
  box-shadow:var(--pop) var(--pop) 0 var(--ink), calc(var(--pop) + 6px) calc(var(--pop) + 6px) 0 rgba(217,164,65,.28);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  will-change:transform;
}
.panel--dark{background:linear-gradient(150deg,#17110c,#0c0906 60%,#1b130b);color:var(--cream)}
.panel--gold{border-color:var(--gold-dp);box-shadow:var(--pop) var(--pop) 0 var(--gold-dp)}
.panel__tape{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-2.2deg);
  background:rgba(244,231,205,.72);border:2px solid rgba(11,9,7,.55);
  padding:1px 22px;font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.28em;color:#241a10;text-transform:uppercase;
  box-shadow:0 3px 10px rgba(0,0,0,.5);
}
/* narration caption box, top-left, like a comic */
.caption-box{
  display:inline-block;
  background:var(--cream);
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  padding:.3rem .9rem;
  font-family:'Space Mono',monospace;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
}
.caption-box--gold{background:var(--gold);}

/* speech bubble */
.bubble{
  position:relative;background:var(--cream);color:var(--ink);
  border:4px solid var(--ink);border-radius:26px;
  padding:1rem 1.35rem;box-shadow:8px 8px 0 var(--ink);
  font-family:'Bangers',cursive;font-size:1.5rem;letter-spacing:.03em;line-height:1.15;
}
.bubble::after,.bubble::before{content:"";position:absolute;bottom:-26px;left:34px;
  border:14px solid transparent;border-top-color:var(--ink)}
.bubble::before{bottom:-32px}
.bubble::after{bottom:-19px;border-top-color:var(--cream);left:36px;border-width:12px}

/* halftone-tinted image inside panels */
.plate{position:relative;overflow:hidden;background:#0b0907}
.plate img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) saturate(.95)}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(11,9,7,.45) 1px, transparent 1.15px);
  background-size:5px 5px;mix-blend-mode:multiply;opacity:.5;
}
.plate--glow::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,247,222,.34) 48%,transparent 58%);
  transform:translateX(-120%);
  transition:transform .01s .9s;
}
.plate--glow:hover::before{transform:translateX(120%);transition:transform 1.05s ease}

/* ---------------------------------------------------------
   PERSPECTIVE STAGE
   --------------------------------------------------------- */
.stage{perspective:1500px;perspective-origin:50% 42%}
.stage-deep{perspective:900px}

/* Scroll reveal.
   Every element's RESTING transform is stored in --rest, and the reveal
   composes it, so revealing a panel never wipes out its 3D tilt.
   .reveal:not(.in) is (0,2,0) so it outranks the plain tilt classes. */
.reveal{--rest:initial;transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1)}
.reveal:not(.in){opacity:0;transform:perspective(900px) translateY(46px) rotateX(-16deg) scale(.965)}
.reveal.in{opacity:1;transform:var(--rest,translateZ(0))}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}
.reveal.d5{transition-delay:.45s}

/* resting tilts — declared after .reveal so they own --rest */
.tilt-l{--rest:rotateY(13deg) rotateX(3deg) translateZ(-40px);transform:var(--rest)}
.tilt-r{--rest:rotateY(-13deg) rotateX(3deg) translateZ(-40px);transform:var(--rest)}
.tilt-up{--rest:rotateX(9deg);transform:var(--rest)}
.flat-on-hover:hover{--rest:translateZ(34px) scale(1.02);transform:var(--rest)}

/* ---------------------------------------------------------
   NAV
   --------------------------------------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:80;
  display:flex;align-items:center;gap:1rem;
  padding:0 clamp(.9rem,3vw,2.2rem);
  background:linear-gradient(180deg, rgba(9,7,5,.94), rgba(9,7,5,.62));
  border-bottom:3px solid var(--ink);
  backdrop-filter:blur(10px);
}
.nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-hi),var(--gold),transparent);
  background-size:220% 100%;animation:foilRun 6s linear infinite;opacity:.85;
}
.nav__logo{
  width:46px;height:46px;border-radius:50%;
  border:3px solid var(--gold);
  box-shadow:0 0 0 3px var(--ink), 0 0 26px rgba(217,164,65,.5);
  object-fit:cover;flex:none;
}
.nav__link{
  font-family:'Bangers',cursive;font-size:1.06rem;letter-spacing:.09em;
  color:var(--cream-2);padding:.25rem .1rem;position:relative;white-space:nowrap;
  transition:color .25s, transform .25s;
}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:3px;
  background:var(--gold);transition:right .3s}
.nav__link:hover{color:var(--gold-hi);transform:translateY(-1px)}
.nav__link:hover::after{right:0}

/* mobile menu */
.burger{
  display:none;width:48px;height:48px;flex:none;place-items:center;
  border:3px solid var(--ink);background:var(--cream);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);font-size:1.4rem;cursor:pointer;
}
.menu{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:79;
  background:linear-gradient(180deg,#120c07,#0b0907);
  border-bottom:4px solid var(--ink);
  padding:.6rem clamp(.9rem,3vw,2.2rem) 1.1rem;
  display:none;flex-direction:column;
  box-shadow:0 18px 40px rgba(0,0,0,.7);
}
.menu.open{display:flex}
.menu a{
  font-family:'Bangers',cursive;font-size:1.35rem;letter-spacing:.08em;
  padding:.55rem 0;border-bottom:2px dashed rgba(217,164,65,.28);color:var(--cream-2);
}
.menu a:last-child{border-bottom:0}
.menu a:hover{color:var(--gold-hi);padding-left:.5rem;transition:.2s}
@media (max-width:1279.98px){.burger{display:grid}}
@media (min-width:1280px){.menu{display:none !important}}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:'Bangers',cursive;font-size:1.22rem;letter-spacing:.07em;
  padding:.72rem 1.5rem;
  border:4px solid var(--ink);
  background:var(--gold);color:var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  overflow:hidden;cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.3), box-shadow .16s, filter .3s;
  text-transform:uppercase;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 var(--ink);filter:brightness(1.08)}
.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--ink)}
.btn::after{ /* shine sweep */
  content:"";position:absolute;top:-60%;bottom:-60%;width:46%;left:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-18deg);
  animation:btnShine 3.6s ease-in-out infinite;
}
@keyframes btnShine{0%,72%{left:-70%}100%{left:150%}}
.btn--ox{background:var(--ox-hi);color:var(--cream)}
.btn--ghost{background:transparent;color:var(--gold-hi);border-color:var(--gold);box-shadow:7px 7px 0 rgba(217,164,65,.35)}
.btn--sm{font-size:1rem;padding:.5rem 1rem;border-width:3px;box-shadow:5px 5px 0 var(--ink)}

/* social icon chip */
.chip{
  width:58px;height:58px;display:grid;place-items:center;
  border:4px solid var(--ink);background:var(--cream);color:var(--ink);
  box-shadow:6px 6px 0 var(--ink);font-size:1.5rem;
  transition:transform .2s cubic-bezier(.2,.9,.3,1.3), background .25s, color .25s;
}
.chip:hover{transform:translate(-3px,-3px) rotate(-4deg);background:var(--gold);}
.chip svg{width:26px;height:26px;fill:currentColor}

/* ---------------------------------------------------------
   SECTION FRAME / DIVIDERS
   --------------------------------------------------------- */
.section{position:relative;padding:clamp(4.5rem,10vw,8.5rem) clamp(1rem,4vw,3rem)}
.wrap{max-width:1240px;margin:0 auto}
.eyebrow{
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);opacity:.9;
}
.h2{
  font-size:clamp(2.6rem,7.2vw,5.6rem);
  margin:.28em 0 .18em;
}
.rule{
  height:5px;background:linear-gradient(90deg,var(--gold-dp),var(--gold),var(--gold-hi),var(--gold),transparent);
  background-size:220% 100%;animation:foilRun 5s linear infinite;
  border-bottom:2px solid var(--ink);
}

/* torn-paper section edge */
.torn{
  position:absolute;left:0;right:0;height:34px;
  background:var(--ink);
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='34' preserveAspectRatio='none'><path d='M0 0 L12 18 L24 4 L36 22 L48 6 L60 20 L72 3 L84 19 L96 5 L108 21 L120 6 L120 34 L0 34 Z' fill='black'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='34' preserveAspectRatio='none'><path d='M0 0 L12 18 L24 4 L36 22 L48 6 L60 20 L72 3 L84 19 L96 5 L108 21 L120 6 L120 34 L0 34 Z' fill='black'/></svg>");
  -webkit-mask-size:120px 34px;mask-size:120px 34px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  opacity:.85;pointer-events:none;
}
.torn--top{top:0}
.torn--bottom{bottom:0;transform:scaleY(-1)}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
#home{
  min-height:100vh;padding-top:calc(var(--nav-h) + 3rem);
  display:flex;flex-direction:column;justify-content:center;align-items:stretch;
}
#home > .wrap{width:100%}

.hero-grid{
  display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,4vw,3.4rem);
  align-items:center;perspective:1500px;
}
.hero-burst{
  position:absolute;inset:-14% -10%;z-index:-1;pointer-events:none;
  background:repeating-conic-gradient(from 12deg at 46% 48%,
    rgba(217,164,65,.16) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask-image:radial-gradient(circle at 46% 48%, #000 0%, transparent 66%);
          mask-image:radial-gradient(circle at 46% 48%, #000 0%, transparent 66%);
  animation:raySpin 70s linear infinite reverse;
}
.hero-title{font-size:clamp(3.4rem,11.5vw,9.6rem)}
.hero-sub{
  font-family:'Bangers',cursive;font-size:clamp(1.15rem,2.4vw,1.85rem);
  color:var(--cream);letter-spacing:.05em;
}
.hero-plate{
  border:var(--frame) solid var(--ink);
  box-shadow:18px 18px 0 var(--ink), 26px 26px 0 rgba(217,164,65,.30);
  transform-style:preserve-3d;
}
.hero-badge{
  position:absolute;right:-28px;bottom:-30px;
  width:132px;height:132px;border-radius:50%;
  border:5px solid var(--ink);
  box-shadow:0 0 0 5px var(--gold), 10px 10px 0 var(--ink);
  object-fit:cover;background:#0b0907;
  animation:bob 5.5s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-12px) rotate(3deg)}}

.pow{
  position:absolute;
  display:grid;place-items:center;
  font-family:'Bangers',cursive;color:var(--ink);
  padding:1.1rem 1.4rem;
  background:var(--gold);
  border:4px solid var(--ink);
  clip-path:polygon(50% 0%,61% 17%,79% 9%,79% 30%,98% 33%,84% 48%,100% 63%,80% 68%,86% 90%,64% 82%,55% 100%,44% 82%,24% 92%,26% 69%,4% 65%,18% 49%,2% 33%,22% 30%,20% 9%,39% 17%);
  animation:powPulse 2.6s ease-in-out infinite;
}
@keyframes powPulse{50%{transform:scale(1.07) rotate(-4deg)}}

/* marquee ticker */
.ticker{
  position:relative;overflow:hidden;
  border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);
  background:linear-gradient(90deg,var(--ox),#a52626,var(--ox));
  transform:rotate(-1.1deg) scale(1.04);
  box-shadow:0 10px 0 rgba(0,0,0,.5);
}
.ticker__row{display:flex;width:max-content;animation:tick 26s linear infinite}
.ticker span{
  font-family:'Bangers',cursive;font-size:1.32rem;letter-spacing:.14em;
  padding:.5rem 1.4rem;color:var(--cream);white-space:nowrap;
}
.ticker span i{color:var(--gold-hi);font-style:normal}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------------------------------------------------------
   CA BAR
   --------------------------------------------------------- */
.ca-bar{
  display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  background:#100b07;border:4px solid var(--gold-dp);
  box-shadow:8px 8px 0 var(--ink);
  padding:.6rem .6rem .6rem 1rem;
}
.ca-bar code{
  font-family:'Space Mono',monospace;font-size:.86rem;color:var(--gold-hi);
  word-break:break-all;flex:1 1 240px;letter-spacing:.02em;
}
.ca-label{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.3em;
  color:var(--cream-2);opacity:.7;text-transform:uppercase;
}

/* ---------------------------------------------------------
   ABOUT — comic strip of three receding panels
   --------------------------------------------------------- */
.strip{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.6vw,2.2rem);
  perspective:1500px;perspective-origin:50% 45%;
  transform-style:preserve-3d;
}
.strip .panel{transform-style:preserve-3d}

.lore-card{
  border-left:6px solid var(--gold);
  background:linear-gradient(120deg, rgba(244,231,205,.06), rgba(244,231,205,.02));
  padding:1.1rem 1.3rem;
}
.lore-card h4{
  font-family:'Bangers',cursive;font-size:1.55rem;letter-spacing:.05em;
  margin:0 0 .25rem;color:var(--gold-hi);
}
.lore-card p{margin:0;color:var(--cream-2);font-size:1.02rem}

/* the art-world glossary table */
.glossary{display:grid;gap:.55rem}
.gloss-row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;
  border:3px solid var(--ink);background:rgba(244,231,205,.94);color:var(--ink);
  padding:.45rem .9rem;box-shadow:5px 5px 0 rgba(0,0,0,.55);
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3), background .3s;
}
.gloss-row:hover{transform:translateX(8px) rotate(-.5deg);background:var(--gold)}
.gloss-row b{font-family:'Bangers',cursive;font-size:1.18rem;letter-spacing:.05em}
.gloss-row span:last-child{text-align:right;font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase}

/* ---------------------------------------------------------
   HOW TO BUY — receding perspective road of steps
   --------------------------------------------------------- */
.road{position:relative;perspective:1100px;perspective-origin:50% 50%;transform-style:preserve-3d}
.road::before{ /* vanishing centre line */
  content:"";position:absolute;left:50%;top:0;bottom:0;width:4px;
  background:repeating-linear-gradient(180deg,var(--gold) 0 22px,transparent 22px 46px);
  transform:translateX(-50%);opacity:.35;
}
.step{
  display:grid;grid-template-columns:110px 1fr;gap:1.3rem;align-items:start;
  padding:1.5rem 1.6rem;margin-bottom:clamp(1.4rem,3vw,2.4rem);
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.step:nth-child(odd){margin-right:auto;width:min(100%,660px);--rest:rotateY(9deg) rotateX(4deg)}
.step:nth-child(even){margin-left:auto;width:min(100%,660px);--rest:rotateY(-9deg) rotateX(4deg)}
.step:hover{--rest:translateZ(40px);transform:var(--rest)}
.step__num{
  font-family:'Bangers',cursive;font-size:clamp(3.6rem,8vw,5.4rem);line-height:.8;
  color:var(--gold);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;
  text-shadow:6px 6px 0 rgba(0,0,0,.55);
}
.step h3{font-family:'Bangers',cursive;font-size:1.9rem;letter-spacing:.05em;margin:.1rem 0 .35rem;color:var(--cream)}
.step p{margin:0;color:var(--cream-2);font-size:1.03rem}

/* ---------------------------------------------------------
   CHART — comic monitor
   --------------------------------------------------------- */
.monitor{
  position:relative;
  border:var(--frame) solid var(--ink);
  background:#07080c;
  box-shadow:20px 20px 0 var(--ink), 30px 30px 0 rgba(217,164,65,.24);
  --rest:perspective(1600px) rotateX(6deg) rotateY(-4deg);
  transform:var(--rest);
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
}
.monitor:hover{--rest:translateZ(0);transform:var(--rest)}
.monitor__bar{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(90deg,#1b130b,#2a1d10);
  border-bottom:4px solid var(--ink);padding:.5rem .85rem;
}
.dot{display:inline-block;width:13px;height:13px;flex:none;border-radius:50%;border:2px solid rgba(0,0,0,.6)}
.monitor__frame{position:relative;height:min(72vh,640px);background:#0b0e14}
.monitor__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.monitor__glare{
  position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(110deg,transparent 40%,rgba(255,247,222,.10) 47%,transparent 56%);
  animation:glare 7s ease-in-out infinite;
}
@keyframes glare{0%,100%{transform:translateX(-25%)}50%{transform:translateX(25%)}}

.stat{
  border:4px solid var(--ink);background:rgba(244,231,205,.95);color:var(--ink);
  box-shadow:7px 7px 0 var(--ink);padding:.85rem 1rem;text-align:center;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.3)}
.stat:hover{--rest:translateY(-6px) rotate(-1.4deg);transform:var(--rest)}
.stat b{display:block;font-family:'Bangers',cursive;font-size:1.55rem;letter-spacing:.05em}
.stat small{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;opacity:.68}

/* ---------------------------------------------------------
   THE WALL — salon hang grid
   --------------------------------------------------------- */
.wall{
  perspective:1400px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(126px,1fr));
  gap:clamp(.7rem,1.5vw,1.15rem);
  transform-style:preserve-3d;
}
.hang{
  position:relative;display:block;aspect-ratio:1/1;
  transform:rotate(var(--rot,0deg));
  border:4px solid var(--ink);
  background:#120d09;
  box-shadow:0 0 0 3px var(--gold-dp), 7px 7px 0 rgba(0,0,0,.7);
  overflow:hidden;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3), box-shadow .35s, filter .35s;
}
.hang img{width:100%;height:100%;object-fit:cover;filter:sepia(.42) saturate(.8) contrast(1.05) brightness(.9);transition:filter .4s, transform .8s}
.hang::after{ /* halftone + glass shine */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(120deg,transparent 42%,rgba(255,247,222,.24) 50%,transparent 58%),
    radial-gradient(rgba(11,9,7,.5) 1px, transparent 1.1px);
  background-size:auto, 4px 4px;
  opacity:.55;transition:opacity .4s;
}
.hang:hover{transform:rotate(var(--rot,0deg)) translateZ(46px) scale(1.07);box-shadow:0 0 0 3px var(--gold-hi), 14px 16px 26px rgba(0,0,0,.75);z-index:5}
.hang:hover img{filter:none;transform:scale(1.06)}
.hang:hover::after{opacity:.25}
.hang__tag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  background:linear-gradient(0deg,rgba(7,5,4,.95),rgba(7,5,4,.0));
  padding:1.4rem .4rem .3rem;
  font-family:'Space Mono',monospace;font-size:9.5px;letter-spacing:.06em;
  color:var(--gold-hi);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(6px);transition:.3s;
}
.hang:hover .hang__tag{opacity:1;transform:none}
.hang--king{box-shadow:0 0 0 4px var(--gold), 0 0 28px rgba(217,164,65,.55), 8px 8px 0 rgba(0,0,0,.7)}

/* ---------------------------------------------------------
   JOIN US
   --------------------------------------------------------- */
.banner-frame{
  position:relative;
  border:8px solid var(--ink);
  box-shadow:0 0 0 6px var(--gold-dp), 22px 22px 0 var(--ink), 0 0 70px rgba(217,164,65,.28);
  --rest:perspective(1700px) rotateX(5deg);
  transform:var(--rest);
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.banner-frame:hover{--rest:scale(1.012);transform:var(--rest)}
.banner-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,248,225,.30) 46%,rgba(255,255,255,.16) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:bannerShine 6.5s cubic-bezier(.55,0,.45,1) infinite;
}
@keyframes bannerShine{0%{transform:translateX(-120%)}55%,100%{transform:translateX(130%)}}

.join-cta{
  perspective:1300px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1rem,2.2vw,1.6rem);
}
.cta-card{
  display:block;padding:1.5rem 1.4rem;text-align:left;
  transition:transform .35s cubic-bezier(.2,.9,.3,1.3);
}
.cta-card:hover{--rest:translateY(-9px) rotate(-1deg);transform:var(--rest)}
.cta-card h4{font-family:'Bangers',cursive;font-size:1.65rem;letter-spacing:.05em;margin:.55rem 0 .3rem}
.cta-card p{margin:0 0 1rem;font-size:.99rem;opacity:.86}
.cta-icon{font-size:2rem;line-height:1;color:var(--gold)}
.cta-icon svg{width:34px;height:34px;fill:currentColor}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */
.footer{
  border-top:5px solid var(--ink);
  background:linear-gradient(180deg,rgba(9,7,5,.6),rgba(9,7,5,.96));
  padding:3rem clamp(1rem,4vw,3rem) 2.4rem;
}
.disclaimer{
  font-size:.85rem;color:rgba(244,231,205,.52);max-width:900px;margin:1.4rem auto 0;
  text-align:center;line-height:1.6;
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:32px;transform:translate(-50%,140%);
  background:var(--gold);color:var(--ink);border:4px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);padding:.6rem 1.3rem;z-index:120;
  font-family:'Bangers',cursive;font-size:1.2rem;letter-spacing:.06em;
  transition:transform .45s cubic-bezier(.2,.9,.3,1.3);
}
.toast.show{transform:translate(-50%,0)}

/* scrollbar */
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:#0b0907}
::-webkit-scrollbar-thumb{background:var(--gold-dp);border:3px solid #0b0907}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::selection{background:var(--gold);color:var(--ink)}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
/* the POW burst collides with the "Oil on Ledger" caption once the
   hero plate gets narrow — retire it before it overlaps */
@media (max-width:900px){
  .pow{display:none}
}

/* matches Tailwind's lg: breakpoint (min-width:1024px) exactly */
@media (max-width:1023.98px){
  .hero-grid{grid-template-columns:1fr;gap:2.4rem}
  .strip{grid-template-columns:1fr}
  .tilt-l,.tilt-r,.tilt-up{--rest:translateZ(0);transform:none}
  .step:nth-child(odd),.step:nth-child(even){--rest:translateZ(0);width:100%;margin:0 0 1.6rem}
  .step:hover{--rest:translateY(-4px)}
  .road::before{display:none}
  .monitor{--rest:translateZ(0);transform:none}
  .banner-frame{--rest:translateZ(0);transform:none}
  .ticker{margin-left:-8vw !important;margin-right:-8vw !important}
}
@media (max-width:640px){
  body{font-size:17px}
  :root{--frame:4px;--pop:9px}
  /* a 3px ink stroke eats most of a small glyph — scale it down */
  .outline-ink{-webkit-text-stroke-width:2px}
  .step__num{-webkit-text-stroke-width:2px}
  .hero-badge{width:92px;height:92px;right:-10px;bottom:-18px}
  /* the 110px number column leaves ~200px for copy on a phone */
  .step{grid-template-columns:1fr;gap:.35rem;padding:1.2rem 1.1rem}
  .step__num{font-size:3.2rem}
  .bubble{font-size:1.25rem;padding:.85rem 1.1rem}
  .wall{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}
  .gloss-row{grid-template-columns:1fr;gap:.15rem}
  .gloss-row span:last-child{text-align:left}
  .monitor__frame{height:min(68vh,520px)}
  .ca-bar code{font-size:.78rem}
  .bg__floor{display:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .reveal,.reveal:not(.in){opacity:1 !important;transform:var(--rest,translateZ(0)) !important}
}