:root{
  --bg:#111;--paper:#f0e8d8;--dark:#1a1a1a;
  --red:#ff3333;--blue:#3366ff;--yellow:#ffcc00;--green:#33cc66;
  --mono:'Space Mono',monospace;--display:'Syne',sans-serif;
  --body:'Inter',sans-serif;--serif:'Playfair Display',serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;-webkit-font-smoothing:antialiased}
body{font-family:var(--body);background:var(--bg);color:var(--paper);cursor:none}
@media(pointer:coarse){body{cursor:auto}}
::selection{background:var(--red);color:var(--bg)}

.grain{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.04;filter:url(#noise)}
.halftone{position:fixed;inset:0;z-index:8999;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.07) .5px,transparent .5px);
  background-size:3px 3px;mix-blend-mode:overlay;opacity:.5}
.cursor{position:fixed;z-index:10000;pointer-events:none;mix-blend-mode:difference}
.cursor-dot{width:12px;height:12px;border-radius:50%;background:var(--paper);transform:translate(-50%,-50%)}
@media(pointer:coarse){.cursor{display:none}}

/* === STAGE === */
.stage{position:relative;width:100vw;height:100vh;overflow:hidden;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,51,51,.04),transparent 70%),var(--bg)}

/* TITLE */
.title{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,7.5vw,6.5rem);
  line-height:.88;letter-spacing:-.03em;white-space:nowrap;z-index:10;
  display:flex;flex-wrap:nowrap;pointer-events:none}
.ch{display:inline-block;color:var(--c);transform:rotate(var(--r));pointer-events:auto;transition:transform .15s}
.ch--o{-webkit-text-stroke:2px var(--c);-webkit-text-fill-color:transparent}
.ch:hover{transform:rotate(var(--r)) scale(1.2) translateY(-8px)}
.subtitle{position:absolute;top:calc(46% + clamp(30px,4.5vw,50px));left:50%;transform:translateX(-50%);
  font-family:var(--serif);font-size:clamp(.7rem,1.3vw,1rem);color:var(--paper);opacity:.5;
  white-space:nowrap;z-index:10;pointer-events:none}

/* DECO */
.deco{position:absolute;pointer-events:none;z-index:5}
.d-stamp{font-family:var(--mono);font-size:clamp(.45rem,.8vw,.65rem);font-weight:700;color:var(--red);
  border:2px solid var(--red);padding:4px 10px;letter-spacing:.15em;
  top:16%;right:12%;transform:rotate(14deg);opacity:.45}
.d-star1{top:28%;left:8%;font-size:clamp(1.2rem,2vw,1.8rem);color:var(--red);transform:rotate(15deg);opacity:.18}
.d-star2{bottom:22%;right:16%;font-size:clamp(.8rem,1.2vw,1rem);color:var(--yellow);opacity:.15}
.d-star3{top:20%;right:34%;font-size:clamp(1.2rem,2.5vw,2rem);color:var(--blue);transform:rotate(-12deg);opacity:.08}
.d-squig{position:absolute;width:clamp(60px,12vw,150px);top:32%;left:6%;transform:rotate(-10deg);opacity:.2}
.d-squig2{position:absolute;width:clamp(50px,9vw,120px);bottom:28%;right:6%;transform:rotate(8deg);opacity:.18}
.d-stepup{font-family:var(--mono);font-size:clamp(.35rem,.6vw,.5rem);letter-spacing:.35em;
  text-transform:uppercase;writing-mode:vertical-rl;color:var(--yellow);opacity:.1;bottom:20%;left:2%}

/* === BOXES WRAPPER — desktop: invisible === */
.boxes-scroll{position:absolute;inset:0;pointer-events:none}
.boxes-scroll .box{pointer-events:auto}

/* === BOXES === */
.box{position:absolute;padding:12px 14px;border-radius:3px;cursor:pointer;z-index:20;
  transform:rotate(var(--rot,0deg));transition:box-shadow .3s;perspective:600px}
.b-n{font-family:var(--mono);font-size:.5rem;font-weight:700;opacity:.4;display:block;margin-bottom:2px;letter-spacing:.1em}
.b-t{font-family:var(--display);font-weight:800;font-size:clamp(.6rem,1.1vw,.85rem);letter-spacing:-.01em;display:block;line-height:1.1}
.b-data{display:none}

/* TOP ROW */
.b-about{top:6%;left:3%;width:clamp(100px,11vw,140px);
  background:var(--red);color:var(--bg);box-shadow:4px 4px 0 rgba(255,51,51,.3)}
.b-about .b-n{color:rgba(0,0,0,.3)}.b-about .b-t{color:var(--bg)}

.b-date{top:4%;left:20%;width:clamp(95px,10vw,135px);
  background:var(--paper);color:var(--dark);box-shadow:4px 4px 0 rgba(240,232,216,.15);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 16px,rgba(0,0,0,.04) 16px,rgba(0,0,0,.04) 17px)}
.b-date .b-n{color:rgba(0,0,0,.25)}.b-date .b-t{color:var(--dark)}

.b-contact{top:5%;right:20%;width:clamp(85px,9vw,120px);
  background:var(--green);color:var(--bg);box-shadow:3px 3px 0 rgba(51,204,102,.25)}
.b-contact .b-n{color:rgba(0,0,0,.25)}.b-contact .b-t{color:var(--bg)}

.b-loc{top:7%;right:4%;width:clamp(100px,10vw,135px);
  background:transparent;border:2px solid var(--blue);color:var(--paper);
  box-shadow:4px 4px 0 rgba(51,102,255,.2)}

/* SIDES */
.b-faq{top:55%;left:2%;width:clamp(90px,9vw,125px);
  background:var(--dark);border:1.5px solid rgba(240,232,216,.12);color:var(--paper);
  box-shadow:3px 3px 0 rgba(240,232,216,.05)}

.b-tix{top:55%;right:2%;width:clamp(95px,9vw,125px);
  background:var(--red);color:var(--paper);
  clip-path:polygon(0 0,100% 0,100% 100%,93% 90%,86% 100%,79% 90%,72% 100%,65% 90%,58% 100%,51% 90%,44% 100%,37% 90%,30% 100%,23% 90%,16% 100%,9% 90%,2% 100%,0 90%);
  padding-bottom:20px;box-shadow:none}
.b-tix .b-n{color:rgba(255,255,255,.35)}

/* BOTTOM ROW */
.b-lineup{bottom:5%;left:50%;transform:translateX(-50%) rotate(var(--rot));width:clamp(200px,25vw,340px);
  background:var(--yellow);color:var(--bg);box-shadow:5px 5px 0 rgba(255,204,0,.25)}
.b-lineup .b-n{color:rgba(0,0,0,.25)}.b-lineup .b-t{color:var(--bg)}

.b-rules{bottom:6%;left:4%;width:clamp(90px,9vw,125px);
  background:var(--paper);color:var(--dark);box-shadow:3px 3px 0 rgba(240,232,216,.12);
  background-image:repeating-linear-gradient(0deg,transparent,transparent 16px,rgba(0,0,0,.04) 16px,rgba(0,0,0,.04) 17px)}
.b-rules .b-n{color:rgba(0,0,0,.25)}.b-rules .b-t{color:var(--dark)}

.b-surprise{bottom:7%;right:4%;width:clamp(90px,9vw,120px);
  background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 5px,#1a1a2a 5px,#1a1a2a 10px);
  border:2px dashed var(--yellow);color:var(--yellow);box-shadow:0 0 15px rgba(255,204,0,.06)}

.box:hover{z-index:30}

/* === OVERLAY === */
.ov{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:0}
.ov.active{pointer-events:auto;opacity:1}
.ov::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.88);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s}
.ov.active::before{opacity:1}
.ov-card{position:relative;z-index:2;max-width:520px;width:88%;padding:36px 32px;
  background:var(--dark);border:1px solid rgba(240,232,216,.08);border-radius:4px;
  transform:scale(.85) translateY(30px);opacity:0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .4s}
.ov.active .ov-card{transform:scale(1) translateY(0);opacity:1;transition-delay:.1s}
.ov-card h2{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3vw,2rem);color:var(--paper);margin-bottom:14px}
.ov-card p,.ov-card ol{font-size:.9rem;line-height:1.75;color:var(--paper);opacity:.8}
.ov-card ol{padding-left:18px}.ov-card ol li::marker{color:var(--yellow)}
.ov-card .big-date{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3vw,1.8rem);color:var(--red);margin-bottom:8px}
.ov-card .lineup{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ov-card .lineup span{font-family:var(--mono);font-size:.7rem;padding:4px 10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:2px}
.ov-x{position:fixed;top:24px;right:28px;z-index:5001;background:none;border:none;
  color:var(--paper);font-size:1.8rem;cursor:pointer;font-family:var(--mono);
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none}
.ov.active .ov-x{opacity:1;pointer-events:auto}
.ov-x:hover{transform:rotate(90deg);color:var(--red)}

.foot{position:fixed;bottom:6px;left:50%;transform:translateX(-50%);z-index:15;
  font-family:var(--mono);font-size:.45rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper);opacity:.12;white-space:nowrap;pointer-events:none}

/* ============================================
   MOBILE — horizontal swipe card strip
   ============================================ */
@media(max-width:700px){
  html,body{height:100%;overflow:hidden}
  .stage{display:flex;flex-direction:column;height:100vh;height:100dvh;padding:0;overflow:hidden}

  .title{position:relative;top:auto;left:auto;transform:none;
    font-size:clamp(2rem,13vw,3.4rem);flex-wrap:wrap;justify-content:center;
    white-space:normal;margin:16px auto 0;padding:0 12px}
  .subtitle{position:relative;top:auto;left:auto;transform:none;
    margin:4px auto 8px;font-size:.72rem}

  .deco{display:none}

  /* The scroll strip */
  .boxes-scroll{position:relative!important;inset:auto!important;
    display:flex!important;flex:1;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:8px 18vw;align-items:center;gap:0;
    pointer-events:auto!important}
  .boxes-scroll::-webkit-scrollbar{display:none}

  .box{position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    bottom:auto!important;flex:0 0 68vw;min-height:42vh;max-height:340px;
    scroll-snap-align:center;
    display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;
    margin:0 -8px;padding:28px 24px;
    clip-path:none!important;pointer-events:auto!important}

  .b-n{font-size:.7rem;margin-bottom:6px}
  .b-t{font-size:clamp(1.2rem,5vw,1.8rem)}
  .b-lineup{flex:0 0 70vw;max-width:70vw}
  .b-contact{transform:rotate(var(--rot))!important}

  .ov-card{width:92%;padding:28px 20px}
  .ov-x{top:14px;right:14px}
  .foot{position:fixed;bottom:6px}
}