:root{
  --bone:#efe9db; --paper:#f7f2e6; --ink:#16130f; --accent:#ff4d2e; --accent2:#ff7a54;
  --chrome:#c3c8ce; --chrome-d:#6b7178; --line:rgba(22,19,15,.16);
  --fd:"Anton",Impact,sans-serif; --fh:"Permanent Marker",cursive; --fm:"Space Mono",monospace;
  --e:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--fm);overflow-x:hidden;
  background-image:radial-gradient(120% 80% at 12% -5%,rgba(255,77,46,.10),transparent 55%)}
#wave{position:fixed;inset:0;z-index:0;pointer-events:none}
.deck2d{position:fixed;right:0;top:0;width:52vw;height:100vh;z-index:1;display:grid;place-items:center;pointer-events:none;perspective:1500px}
.tilt{transform-style:preserve-3d;transition:transform .16s ease-out;will-change:transform;filter:drop-shadow(0 34px 46px rgba(20,12,6,.32))}
#cass2d{width:min(48vw,88vh);aspect-ratio:1.6/1;display:block}
/* SOUL section — user artwork, graded + feathered on canvas */
.soul{position:relative;z-index:2;min-height:96vh;display:flex;align-items:center;overflow:hidden}
.soulimg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.soul::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(239,233,219,.94),rgba(239,233,219,.35) 44%,transparent 72%)}
.soul-in{position:relative;z-index:2}
.soul-in .side{color:var(--accent)}
.soul-in h2{font-family:var(--fd);font-size:clamp(2.6rem,7.5vw,6.2rem);line-height:.88;text-transform:uppercase;margin:.4rem 0 0}
.soul-in h2 .hi{color:var(--accent)}
.soul-in p{max-width:30ch;margin-top:1rem;opacity:.85}
.mono{font-family:var(--fm);letter-spacing:.02em}
.marker{font-family:var(--fh)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,4vw,52px);mix-blend-mode:multiply}
.brand{font-family:var(--fd);font-size:1.7rem;letter-spacing:.06em;color:var(--ink);text-decoration:none}
.nav .links{display:flex;gap:24px}
.nav .links a{font-family:var(--fm);font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:none;opacity:.7;transition:.3s}
.nav .links a:hover{opacity:1;color:var(--accent)}
.counter{font-weight:700;font-size:.9rem;background:var(--ink);color:var(--bone);padding:5px 10px;border-radius:3px;letter-spacing:.2em}

.btn{font-family:var(--fm);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  cursor:pointer;border:none;text-decoration:none;padding:14px 24px;border-radius:3px;transition:.35s var(--e);display:inline-flex;align-items:center;gap:9px}
.btn.play{background:var(--accent);color:var(--bone)}
.btn.play:hover{background:var(--ink)}
.btn.ghost{background:transparent;border:2px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.tri{font-size:.7rem}

/* hero */
.hero{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:0 clamp(24px,7vw,110px)}
.hero-in{max-width:44rem}
.side{display:inline-block;color:var(--accent);font-size:.8rem;letter-spacing:.28em;font-weight:700}
.hero h1{font-family:var(--fd);font-size:clamp(3.6rem,12vw,11rem);line-height:.86;letter-spacing:.005em;text-transform:uppercase;margin:.4rem 0}
.hero h1 .hi{color:var(--accent);-webkit-text-stroke:0;position:relative}
.hero .marker{font-size:1.9rem;color:var(--ink);transform:rotate(-3deg);display:inline-block;margin:.2rem 0 1rem}
.hero .sub{max-width:38ch;font-size:1rem;line-height:1.65;opacity:.8}
.hero .cta{margin-top:2rem;display:flex;gap:14px;flex-wrap:wrap}

/* acts */
.act{position:relative;z-index:2;min-height:100vh;display:flex;align-items:center;padding:14vh 0}
.wrap{max-width:1080px;margin:0 auto;padding:0 clamp(24px,5vw,60px);width:100%}
.act.find,.act#gear{--x:1}
.act .k{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);font-weight:700}
.act h2{font-family:var(--fd);font-size:clamp(2.6rem,7vw,5.6rem);line-height:.92;text-transform:uppercase;letter-spacing:.01em;margin:.6rem 0 1.2rem}
.act p{max-width:46ch;font-size:1.05rem;line-height:1.7;opacity:.82}
/* content lives on the LEFT; the 3D cassette owns the right half (never overlap) */
.act .wrap{max-width:40rem;margin-left:0;margin-right:auto;text-align:left}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:1.8rem;max-width:34rem}
.chips span{font-family:var(--fm);font-size:.76rem;padding:8px 14px;border:2px solid var(--ink);border-radius:40px;transition:.3s var(--e)}
.chips span:hover{background:var(--accent);border-color:var(--accent);color:var(--bone);transform:translateY(-3px) rotate(-2deg)}

/* J-card */
.jcard{margin-top:2rem;max-width:24rem;background:var(--paper);border:1px solid var(--line);
  box-shadow:6px 8px 0 rgba(22,19,15,.14);padding:0 0 18px;text-align:left;transform:rotate(1.2deg)}
.jhead{background:var(--accent);color:var(--bone);font-family:var(--fm);font-weight:700;font-size:.72rem;letter-spacing:.14em;padding:10px 16px;display:flex;justify-content:space-between;align-items:baseline}
.jhead b{font-size:1.1rem;color:#ffe9e2}
.jcard ol{list-style:none;counter-reset:t;padding:14px 20px 0}
.jcard li{counter-increment:t;font-size:1.35rem;line-height:1.7;border-bottom:1.5px solid var(--line);padding:2px 0;color:var(--ink)}
.jcard li::before{content:counter(t) ". ";font-family:var(--fm);font-size:.8rem;color:var(--accent);font-weight:700}

.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:2rem;max-width:40rem}
.specs div{border-top:3px solid var(--ink);padding-top:10px}
.specs b{display:block;font-size:1.3rem;color:var(--accent)}
.specs span{font-size:.8rem;opacity:.7}
.hours{margin-top:1.8rem;max-width:22rem}
.hours div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1.5px dashed var(--line);font-size:.86rem}
.hours span{opacity:.7}
.find .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2rem}
footer{margin-top:9vh;padding-top:20px;border-top:2px solid var(--ink);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.72rem;opacity:.7;text-align:left}

.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--e),transform .9s var(--e)}
.rv.in{opacity:1;transform:none}

@media(max-width:820px){
  .deck2d{position:relative;width:100%;height:56vh}
  #cass2d{width:92vw}
  .nav .links{display:none}
  .hero{padding-top:16vh;align-items:flex-start}
  .act{min-height:auto;padding:12vh 0}
  .act .wrap,.act.flip .wrap,.act.find .wrap{text-align:left;margin:0}
  .act.flip .chips,.act.flip .jcard,.find .specs,.find .hours,.find .cta,.jcard{margin-left:0;justify-content:flex-start}
  .specs{grid-template-columns:1fr}
}