/* THE LAST POOL PARTY — the web surfaces.
   OURS, not upstream: this is the design system's web components (TapedFlyer,
   MarqueeBar, Button, Field, Badge, Starburst, PhotoPlate) translated out of
   React into plain CSS for site/party*.html. The look bible governs every rule
   below — the web page is a phone pole: things are TAPED to it, not docked on it.

   Never sleek · never corporate-festival · never actually frightening ·
   never colour-dependent · never more than one of anything loud. */

/* ——— THE POLE: the dark dotted field the paper is taped to ——— */
.pole{position:relative;min-height:100vh;overflow:hidden;background:var(--ink);color:var(--paper)}
.pole::before{content:"";position:absolute;inset:0;background-image:radial-gradient(#3a3a38 34%,transparent 35%);background-size:7px 7px;opacity:.55;pointer-events:none}
.pole::after{content:"";position:absolute;inset:0;opacity:.28;background:radial-gradient(90% 60% at 50% 0,var(--spot),transparent 65%);pointer-events:none}
[data-mode="copy"] .pole::before,[data-mode="copy"] .pole::after{display:none}
[data-mode="night"] .pole{background:var(--pool-deep)}
[data-mode="night"] .pole::before{background-image:radial-gradient(#1b6f9e 34%,transparent 35%)}
[data-mode="night"] .pole::after{opacity:.30;background:radial-gradient(90% 60% at 50% 0,var(--sun-yellow),transparent 65%)}

/* ——— MARQUEE BAR: the only element allowed to pin, and the only VHS instance ——— */
.bar{position:sticky;top:0;z-index:var(--z-tape);overflow:hidden;height:46px;display:flex;align-items:center;
     background:var(--tape);color:var(--tape-ink);border-bottom:var(--stroke-hair) solid var(--ink)}
.bar span{white-space:nowrap;font-family:var(--font-poster);font-size:19px;letter-spacing:var(--ls-wide);text-transform:uppercase;padding-left:16px;
          animation:lpp-crawl 34s linear infinite}
@keyframes lpp-crawl{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bar span{animation:none}}

/* ——— THE SHEET: paper taped over the pole ——— */
.wrap{position:relative;z-index:var(--z-display);max-width:1100px;margin:0 auto;padding:40px 20px 64px}
.wrap--narrow{max-width:760px}
.sheet{position:relative;background:var(--paper);color:var(--ink);padding:34px 30px 30px;box-shadow:12px 14px 0 rgba(0,0,0,.45)}
.sheet--tilt{transform:rotate(var(--rot-nudge))}
.sheet::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.4;
  background-image:radial-gradient(circle at 20% 30%,var(--ink-20) .5px,transparent .6px),radial-gradient(circle at 70% 60%,var(--ink-20) .5px,transparent .6px);
  background-size:var(--grain-size) var(--grain-size),5px 5px}
[data-mode="night"] .sheet{background:var(--paper-cool)}
.sheet>*{position:relative;z-index:var(--z-block)}

/* Tape. Three pieces maximum on any one sheet. */
.tape{position:absolute;width:150px;height:36px;background:var(--tape);opacity:.8;
      border-left:1px dashed rgba(11,11,11,.4);border-right:1px dashed rgba(11,11,11,.4);mix-blend-mode:multiply;z-index:var(--z-tape)}
.tape.a{top:-14px;left:-32px;transform:rotate(var(--rot-slam))}
.tape.b{top:-14px;right:-32px;transform:rotate(var(--rot-slam-r))}
.tape.c{bottom:-16px;left:34%;transform:rotate(var(--rot-tilt-r))}

/* ——— EYEBROW CHIPS (Badge) ——— */
.eyebrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{background:var(--badge-bg);color:var(--badge-fg);font-family:var(--font-poster);font-size:12px;
      letter-spacing:var(--ls-label);text-transform:uppercase;padding:4px 9px}
.chip--spot{background:var(--spot);color:var(--paper)}
.chip--open{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 var(--stroke-hair) var(--ink)}

/* ——— DISPLAY TYPE ——— */
.scream{font-family:var(--font-scream);font-size:clamp(52px,7.4vw,104px);line-height:var(--lh-scream);
        text-transform:uppercase;letter-spacing:var(--ls-scream);margin:0;color:var(--display-ink)}
.scream--sm{font-size:clamp(38px,5.2vw,72px)}
.slab{font-family:var(--font-poster);font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;
      background:var(--ink);color:var(--paper);display:inline-block;padding:4px 11px;margin-top:12px;transform:rotate(-1deg)}
[data-mode="night"] .slab{background:var(--spot);color:var(--ink)}
.stack{font-family:var(--font-poster);text-transform:uppercase;line-height:var(--lh-tight);letter-spacing:var(--ls-poster);
       font-size:clamp(15px,1.8vw,20px);margin:0 0 6px}
.stack b{display:block;font-weight:400}
.lede{font-size:var(--fs-body);line-height:var(--lh-body);max-width:52ch;margin-top:16px}

/* ——— SECTION HEADS: a rule and a caps label, nothing more ——— */
.band{border-top:var(--stroke-poster) solid var(--rule);margin-top:var(--s-6);padding-top:var(--s-3)}
.band>h2,.label{font-family:var(--font-cond);font-size:var(--fs-label);letter-spacing:var(--ls-label);
                text-transform:uppercase;color:var(--ink);margin:0 0 var(--s-3);line-height:var(--lh-tight)}
.label--quiet{color:var(--text-quiet)}

/* ——— FACTS: the middot line and the underlined meta rows ——— */
.meta{display:grid;gap:5px;margin-top:var(--s-4);border-top:var(--stroke-poster) solid var(--rule);padding-top:10px}
.meta span{font-family:var(--font-cond);font-size:16px;letter-spacing:.05em;text-transform:uppercase;
           border-bottom:var(--stroke-hair) solid var(--ink);padding-bottom:3px}

/* ——— BUTTON: the ink stamp. Hover INVERTS. Press slides into its own shadow. ——— */
.btn{font-family:var(--font-poster);font-size:18px;letter-spacing:var(--ls-label);text-transform:uppercase;
     padding:12px 20px;min-height:48px;border:var(--stroke-poster) solid var(--ink);background:var(--spot);color:var(--paper);
     box-shadow:var(--shadow-hard);cursor:pointer;transition:none;border-radius:var(--radius-0);display:inline-block}
.btn--alt{background:var(--paper);color:var(--ink)}
.btn:hover{filter:invert(1)}
.btn:active{transform:translate(3px,3px);box-shadow:var(--shadow-hard-sm)}
.btn:focus-visible{outline:3px solid var(--spot-2);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:default;filter:none;box-shadow:var(--shadow-hard-sm)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ——— FIELD: fill-in-the-blank. A caps label over an ink underline. ——— */
.field{margin-top:var(--s-4)}
.field>label{display:block;font-family:var(--font-cond);font-size:13px;letter-spacing:var(--ls-label);
             text-transform:uppercase;color:var(--ink);margin-bottom:4px}
.field input,.field select{width:100%;min-height:44px;background:transparent;color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-body);padding:8px 4px;border:0;
  border-bottom:var(--stroke-poster) solid var(--ink);border-radius:var(--radius-0);outline:none}
.field input::placeholder{color:var(--ink-50)}
.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--spot);outline-offset:2px}
.check{display:flex;gap:10px;align-items:center;margin-top:var(--s-4);min-height:44px} /* touch target floor */
.check input{width:22px;height:22px;min-height:0;accent-color:var(--spot);flex:0 0 auto}
.check label{font-family:var(--font-body);font-size:var(--fs-body);text-transform:none;letter-spacing:0;padding:10px 0;cursor:pointer}

/* ——— STARBURST: one per surface. It is the loudest object. ——— */
.burst{width:172px;height:172px;background:var(--spot-2);color:var(--ink);display:grid;place-content:center;
       text-align:center;transform:rotate(var(--rot-slam));padding:30px}
.burst b{display:block;font-family:var(--font-poster);text-transform:uppercase;line-height:.92}
.burst b:first-child{font-size:31px}
.burst b+b{font-size:14px;letter-spacing:.02em}

/* ——— LISTS: the roll of backyards, the setlist ——— */
.roll{list-style:none;margin:0;padding:0}
.roll li{font-family:var(--font-cond);font-size:16px;letter-spacing:.04em;text-transform:uppercase;
         border-bottom:var(--stroke-hair) solid var(--ink);padding:6px 0}
.setlist{list-style:none;counter-reset:t;margin:0;padding:0}
.setlist li{counter-increment:t;position:relative;padding:8px 0 8px 44px;border-bottom:var(--stroke-hair) solid var(--ink)}
.setlist li::before{content:counter(t,decimal-leading-zero);position:absolute;left:0;top:8px;
  font-family:var(--font-poster);font-size:20px;color:var(--spot);line-height:1}
.setlist b{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.04em;font-weight:400}
.setlist .seed b{color:var(--text-quiet)}

/* ——— THE NUMBER: the party count, big and dumb and honest ——— */
.tally{text-align:center;padding:var(--s-4) 0}
.tally b{display:block;font-family:var(--font-poster);font-size:clamp(64px,12vw,140px);line-height:.86;color:var(--spot)}
.tally span{display:block;font-family:var(--font-cond);font-size:var(--fs-label);letter-spacing:var(--ls-label);text-transform:uppercase}

/* ——— THE CLOCK: countdown digits ——— */
.clock{display:flex;gap:var(--s-6);justify-content:center;flex-wrap:wrap;padding:var(--s-3) 0}
.clock div{text-align:center}
.clock b{display:block;font-family:var(--font-poster);font-size:clamp(40px,8vw,76px);line-height:1;color:var(--ink)}
.clock span{font-family:var(--font-cond);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-quiet)}
.clock--single b{font-size:clamp(34px,7vw,58px);color:var(--spot);font-variant-numeric:tabular-nums}

/* ——— BULLETIN: the DJ talking, in a hard box ——— */
.bulletin{border-left:var(--stroke-slab) solid var(--spot);padding:2px 0 2px var(--s-4);margin:var(--s-4) 0}
.bulletin .beat{display:block;font-family:var(--font-cond);font-size:12px;letter-spacing:var(--ls-label);
                text-transform:uppercase;color:var(--text-quiet);margin-bottom:4px}

/* ——— THE TOAST: read aloud, so it is set big and in SENTENCE CASE.
       The look bible is explicit: never all-caps for a full paragraph. ——— */
.toast{font-family:var(--font-cond);font-size:clamp(19px,2.3vw,25px);line-height:1.32;max-width:46ch;
       border-top:var(--stroke-slab) solid var(--ink);border-bottom:var(--stroke-slab) solid var(--ink);
       padding:var(--s-5) 0;margin:0}

/* ——— MESSAGES: a stamped box, never a coloured pill ——— */
.msg{margin-top:var(--s-4);padding:var(--s-4);border:var(--stroke-poster) solid var(--ink);display:none}
.msg.ok,.msg.no{display:block}
.msg.ok{background:var(--spot-2);color:var(--ink)}
.msg.no{background:var(--paper-2);color:var(--ink);box-shadow:var(--shadow-hard-sm)}
.msg a{color:var(--ink)}

/* ——— DRAFT STAMP: this is not public yet, and it should look stamped on ——— */
.stamp{display:inline-block;font-family:var(--font-poster);font-size:13px;letter-spacing:var(--ls-label);
       text-transform:uppercase;color:var(--spot);border:var(--stroke-poster) solid var(--spot);
       padding:6px 10px;transform:rotate(var(--rot-tilt));margin-bottom:var(--s-5)}

/* ——— CREDITS: the 11px foot of the poster ——— */
.credits{position:relative;z-index:var(--z-display);border-top:var(--stroke-hair) solid var(--paper);
         padding:14px 20px 30px;text-align:center;font-family:var(--font-fine);font-size:var(--fs-fine);
         letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.credits a{color:var(--spot-2)}
[data-mode="night"] .credits a{color:var(--sun-yellow)}

/* ——— GATE: the doorway sheet, centred ——— */
.gate{max-width:520px;margin:0 auto}

/* ——— RESPONSIVE ——— */
@media (max-width:820px){
  .wrap{padding:26px 14px 44px}
  .sheet{padding:24px 18px 22px}
  .sheet--tilt{transform:rotate(-1deg)}
  .tape.a,.tape.b{width:112px}
}
@media (max-width:380px){.scream{font-size:44px}.slab{font-size:18px}}

/* ——— PRINT: black on white, no pole, no tape, no chrome ——— */
@media print{
  .pole{background:#fff!important;color:#000;min-height:0;overflow:visible}
  .pole::before,.pole::after,.sheet::after,.tape,.bar,.no-print,.screen-only{display:none!important}
  .wrap{max-width:100%;padding:0}
  .sheet{background:#fff;box-shadow:none;transform:none;padding:0;color:#000}
  .credits{color:#000;border-top:1.5px solid #000}
  .btn{display:none!important}
  body{font-size:var(--fs-body-print)}
}