/* ===========================================================================
   SPRIZZINI × ROUGH WORKS — Sept 25 party RSVP
   Palette + type lifted from the printed poster. Motion lives in main.js.

   ONE RULE THAT IS LOAD-BEARING: Teddy, the wordmarks and the music notes are
   two-tone cutouts taken off the poster — they are CREAM SHAPES ON TRANSPARENT
   with the linework knocked out. They only read correctly on a flat dark
   ground (--olive / --ink / --night). The -ink variants are the inverse and
   only read on cream. Never put a cream cutout on a light panel or a photo;
   it disappears.
   =========================================================================== */

:root{
  --cream:#FAECE4;
  --cream-2:#F6ECD9;
  --olive:#3A3D31;
  --ink:#2E3127;
  --night:#14160F;
  --terracotta:#C97A4B;
  --lemon:#E6C33A;
  --sea:#6FA893;
  --sky:#5AA3C8;

  --display:'Anton', Impact, 'Haettenschweiler', sans-serif;
  --ui:'Archivo', Helvetica, Arial, sans-serif;

  --pad: clamp(20px, 4vw, 64px);
  /* Drives BOTH the sprite height and the gap the headline leaves for him.
     Change it in one place or they drift apart. */
  --teddyH: clamp(180px, 32vh, 380px);
  --frame-inset: clamp(10px, 1.8vw, 22px);
  --frame-gap: clamp(9px, 1.1vw, 15px);
  --rule: 3px;
}

*,*::before,*::after{box-sizing:border-box}
/* .form and .ticket are display:grid, which OUTRANKS the UA [hidden] rule.
   Without this the success ticket renders stacked on the live form. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--olive);
  color:var(--cream);
  font-family:var(--ui);
  font-weight:600;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
h1,h2,p,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}

/* ---- print grain + halftone, sits over everything ---------------------- */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:
    radial-gradient(rgba(0,0,0,.18) 0.7px, transparent 0.75px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  background-size:3px 3px, 140px 140px;
}

/* ---- custom cursor (pointer:fine only) --------------------------------- */
.cursor{position:fixed;top:0;left:0;z-index:9998;pointer-events:none;opacity:0;
  width:0;height:0;display:none}
.cursor-ring{position:absolute;left:-19px;top:-19px;width:38px;height:38px;border-radius:50%;
  border:2px solid var(--cream);display:block}
.cursor-dog{position:absolute;left:-30px;top:-30px;width:60px;height:60px;opacity:0;transform:scale(.4)}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  body.has-cursor,body.has-cursor a,body.has-cursor button{cursor:none}
}

/* ---- preloader --------------------------------------------------------- */
.loader{position:fixed;inset:0;z-index:9990;background:var(--ink);
  display:grid;place-items:center;overflow:hidden}
.loader-inner{display:grid;justify-items:center;gap:clamp(10px,2vw,22px);padding:var(--pad);width:min(560px,80vw)}
.loader-wm{width:100%}
.loader-x{font-family:var(--display);font-size:clamp(1.4rem,3vw,2.2rem);opacity:.6;margin:-4px 0}
.loader-rw{width:52%}
.loader-status{font-family:var(--ui);font-weight:900;letter-spacing:.34em;
  font-size:clamp(.58rem,1.1vw,.72rem);opacity:.7;margin-top:clamp(8px,2vw,18px)}
.loader-wipe{position:absolute;inset:0;background:var(--cream);transform:scaleY(0);transform-origin:bottom}
body.is-loaded .loader{display:none}

.skip{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--cream);color:var(--ink);
  padding:12px 18px;font-weight:900}
.skip:focus{left:8px;top:8px}

/* ===========================================================================
   1. HERO
   =========================================================================== */
.hero{
  position:relative;min-height:100svh;background:var(--olive);
  display:grid;grid-template-rows:auto 1fr auto;
  padding:calc(var(--frame-inset) + var(--frame-gap) + clamp(12px,1.6vw,22px));
  gap:clamp(8px,1.6vw,20px);overflow:hidden;
}
.frame{position:absolute;display:block;overflow:visible;pointer-events:none}
.frame rect{fill:none;stroke:var(--cream);vector-effect:non-scaling-stroke}
.frame--a{top:var(--frame-inset);left:var(--frame-inset);
  width:calc(100% - 2 * var(--frame-inset));height:calc(100% - 2 * var(--frame-inset))}
.frame--a rect{stroke-width:5}
.frame--b{top:calc(var(--frame-inset) + var(--frame-gap));left:calc(var(--frame-inset) + var(--frame-gap));
  width:calc(100% - 2 * (var(--frame-inset) + var(--frame-gap)));
  height:calc(100% - 2 * (var(--frame-inset) + var(--frame-gap)))}
.frame--b rect{stroke-width:2}

.hero-top{display:flex;align-items:center;justify-content:center;gap:clamp(12px,2.4vw,30px);
  padding-top:clamp(6px,1.4vw,14px);position:relative;z-index:3}
.hero-wm{width:clamp(150px,22vw,330px)}
.hero-rw{width:clamp(80px,11vw,170px)}
.hero-x{font-family:var(--display);font-size:clamp(.9rem,1.8vw,1.4rem);opacity:.55}

.hero-stage{position:relative;display:grid;place-items:center;min-height:0;z-index:2}

/* Headline is TWO STACKED ROWS with Teddy living in the gap between them.
   Earlier build had .mega absolutely centred with Teddy on top of it and the
   two cream artworks turned to mush — never put him back over the type.
   Type is capped by BOTH vw and vh (min()) so the stacked block always fits
   a short laptop viewport without pushing the countdown off screen. */
.mega{
  font-family:var(--display);line-height:.8;text-align:center;
  font-size:clamp(2.2rem, min(20vw, 13vh), 11rem);letter-spacing:-.01em;
  position:relative;width:100%;pointer-events:none;z-index:1;
  display:grid;row-gap:calc(var(--teddyH) * 1.02);
}
.mega-line{display:block;overflow:hidden}
.mega-line--out{text-shadow:clamp(3px,.55vw,9px) clamp(3px,.55vw,9px) 0 var(--terracotta)}

.teddy-slot{position:absolute;inset:0;display:grid;place-items:center;z-index:2;pointer-events:none}
.teddy{
  width:auto;height:var(--teddyH);
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.35));
  touch-action:none;user-select:none;-webkit-user-drag:none;
  pointer-events:auto;will-change:transform;
  margin-bottom:calc(var(--teddyH) * .04);
}
@media (hover:hover){ .teddy{cursor:grab} .teddy:active{cursor:grabbing} }

/* Sits in the empty band under the headline on narrow screens; on desktop
   that band is gone, so it runs vertically up the free right-hand edge. */
.teddy-hint{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
  font-size:clamp(.55rem,1.05vw,.7rem);font-weight:900;letter-spacing:.28em;opacity:.55;z-index:3;
  white-space:nowrap}
@media (min-width:901px){
  .teddy-hint{bottom:auto;left:auto;right:0;top:50%;transform:translateY(-50%) rotate(90deg)}
}

.orbit{position:absolute;top:50%;left:50%;z-index:3;pointer-events:none;
  width:clamp(22px,3vw,46px);height:auto;opacity:.9}

.hero-foot{position:relative;z-index:3;display:grid;justify-items:center;gap:clamp(8px,1.4vw,14px);
  padding-bottom:clamp(6px,1.4vw,16px);text-align:center}
.hero-when{font-family:var(--display);font-size:clamp(1.15rem,3.4vw,2.6rem);letter-spacing:.01em;
  display:flex;gap:.5em;align-items:baseline}
.hero-when span{opacity:.5;font-size:.7em}
.hero-where{font-size:clamp(.6rem,1.15vw,.8rem);font-weight:900;letter-spacing:.24em;opacity:.72}

.countdown{display:flex;gap:clamp(8px,1.6vw,20px);margin-top:2px}
.cd-unit{display:grid;justify-items:center;min-width:clamp(42px,5.4vw,64px);
  border:2px solid rgba(250,236,228,.28);padding:6px 4px 4px}
.cd-unit b{font-family:var(--display);font-size:clamp(1rem,2.2vw,1.7rem);line-height:1;
  font-variant-numeric:tabular-nums}
.cd-unit i{font-style:normal;font-size:.5rem;font-weight:900;letter-spacing:.2em;opacity:.6;margin-top:3px}

/* ---- buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--ui);font-weight:900;letter-spacing:.18em;font-size:clamp(.68rem,1.1vw,.8rem);
  padding:clamp(13px,1.5vw,17px) clamp(22px,2.8vw,34px);
  background:var(--cream);color:var(--ink);border:var(--rule) solid var(--cream);
  text-decoration:none;cursor:pointer;position:relative;will-change:transform;
  transition:background-color .25s ease,color .25s ease;
}
.btn:hover{background:var(--lemon);border-color:var(--lemon);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--cream)}
.btn--ghost:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--big{font-size:clamp(.82rem,1.5vw,1rem);padding:clamp(17px,2.1vw,23px) clamp(30px,4vw,52px);width:100%}
.btn-arrow{display:inline-block}
.btn:focus-visible{outline:3px solid var(--lemon);outline-offset:4px}

/* ===========================================================================
   2. MARQUEE
   =========================================================================== */
.marquee{background:var(--cream);color:var(--ink);overflow:hidden;
  border-block:var(--rule) solid var(--ink);padding:clamp(9px,1.2vw,15px) 0}
.marquee-track{display:flex;align-items:center;white-space:nowrap;will-change:transform}
.mq{font-family:var(--display);font-size:clamp(1.3rem,3.6vw,3rem);padding-inline:.35em;line-height:1}
.mq-dot{font-size:clamp(.5rem,1vw,.8rem);opacity:.5;transform:translateY(-.35em)}

/* ===========================================================================
   3. THE PARTY CLOCK
   =========================================================================== */
.clock{background:var(--olive)}
.clock-pin{
  height:100svh;display:grid;place-content:center;justify-items:center;
  gap:clamp(6px,1.2vw,14px);text-align:center;position:relative;overflow:hidden;
  padding:var(--pad);
}
.notefield{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.notefield img{position:absolute;width:clamp(16px,2.4vw,38px);height:auto;opacity:0;will-change:transform}

.clock-kicker{font-size:clamp(.55rem,1vw,.68rem);font-weight:900;letter-spacing:.32em;opacity:.55}
.clock-read{display:flex;align-items:baseline;gap:.12em;line-height:.85}
.clock-time{font-family:var(--display);font-size:clamp(4.5rem,20vw,17rem);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock-mer{font-family:var(--display);font-size:clamp(1.4rem,5vw,4.4rem);opacity:.6}
.clock-vibe{font-family:var(--display);font-size:clamp(1.4rem,5.2vw,4.2rem);line-height:1;
  min-height:1.1em}
.clock-sub{font-size:clamp(.78rem,1.5vw,1.05rem);font-weight:600;opacity:.8;max-width:26ch;
  line-height:1.45;min-height:3em}

.meter{display:flex;align-items:flex-end;gap:clamp(3px,.55vw,7px);height:clamp(34px,6vh,62px);
  margin-top:clamp(6px,1.4vw,16px)}
/* currentColor so the bars survive the 4PM cream ground → 10PM night ground
   palette morph the scrub applies to .clock-pin. Never hard-code them cream. */
.meter i{display:block;width:clamp(6px,1vw,13px);height:8%;background:currentColor;
  transform-origin:bottom;will-change:transform}
.meter-label{font-size:clamp(.52rem,.95vw,.64rem);font-weight:900;letter-spacing:.3em;opacity:.6}

/* ===========================================================================
   4. RUN OF SHOW
   =========================================================================== */
.show{background:var(--night);position:relative}
.show-viewport{overflow:hidden}
.show-track{display:flex;gap:clamp(16px,2.4vw,34px);padding:clamp(40px,8vh,110px) var(--pad);
  width:max-content;will-change:transform}
.card{
  width:clamp(250px,74vw,420px);flex:0 0 auto;
  background:var(--cream);color:var(--ink);
  border:var(--rule) solid var(--ink);
  padding:clamp(22px,3vw,38px);
  display:grid;align-content:start;gap:clamp(8px,1.2vw,14px);
  min-height:clamp(340px,52vh,480px);position:relative;overflow:hidden;
}
/* Poster palette only — the Sprizzini brand colours and fruit marks were
   pulled from these cards on purpose. Brand colour lives in #pour now, on the
   drinks themselves, where it means something. Don't reintroduce tints here. */
.card-time{font-family:var(--display);font-size:clamp(1rem,2vw,1.5rem);letter-spacing:.02em;opacity:.85}
.card-title{font-family:var(--display);font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:.86}
.card-body{font-weight:600;font-size:clamp(.85rem,1.3vw,1rem);line-height:1.5;max-width:32ch;opacity:.92}
.card-no{position:absolute;right:clamp(14px,2vw,26px);bottom:clamp(6px,1.2vw,14px);
  font-family:var(--display);font-size:clamp(3.4rem,7vw,5.6rem);line-height:1;
  color:var(--ink);opacity:.13;pointer-events:none}
.show-hint{position:absolute;right:var(--pad);bottom:clamp(14px,2.4vw,26px);
  font-size:clamp(.55rem,1vw,.66rem);font-weight:900;letter-spacing:.3em;opacity:.5}


/* ===========================================================================
   5. WHAT'S POURING — line-art reels, screen-blended over brand colour
   ===========================================================================
   BLEND ISOLATION (load-bearing, cost us a black box on sprizzini.com):
   the colour sits on .pour-media and the <video> is its direct child, so both
   live in the same stacking context and mix-blend-mode:screen resolves against
   the colour. Adding opacity / transform / filter / clip-path to .pour-media
   or to .pour-video isolates the group and the tile renders SOLID BLACK.
   Reveal animations target .pour-tile, which wraps both. */
.pour{background:var(--ink);padding:clamp(60px,11vh,140px) var(--pad)}
.pour-head{max-width:1180px;margin:0 auto clamp(30px,5vw,60px)}
.pour-h{font-family:var(--display);font-size:clamp(2.2rem,6.5vw,4.6rem);line-height:.88;
  letter-spacing:-.01em}
.pour-sub{font-weight:600;font-size:clamp(.86rem,1.35vw,1.05rem);line-height:1.55;
  max-width:46ch;margin-top:clamp(12px,1.8vw,20px);opacity:.78}

.pour-grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:repeat(4,1fr);gap:clamp(14px,2.2vw,30px)}
.pour-tile{display:grid;gap:clamp(8px,1.2vw,14px);align-content:start}
.pour-media{
  position:relative;aspect-ratio:1/1;overflow:hidden;
  border:var(--rule) solid var(--cream);
}
.pour-media[data-tint="terracotta"]{background:var(--terracotta)}
.pour-media[data-tint="lemon"]{background:var(--lemon)}
.pour-media[data-tint="sea"]{background:var(--sea)}
.pour-media[data-tint="sky"]{background:var(--sky)}
.pour-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  mix-blend-mode:screen;
}
.pour-name{font-family:var(--display);font-size:clamp(1.15rem,2vw,1.6rem);line-height:.94;
  margin-top:2px}
.pour-note{font-weight:600;font-size:clamp(.76rem,1.05vw,.88rem);line-height:1.45;opacity:.68}
.pour-abv{display:inline-block;font-family:var(--display);font-size:.55em;vertical-align:.35em;
  margin-left:.25em;opacity:.55;letter-spacing:.02em}

/* Teddy's tasting notes — three cream-matted 3D loops on the pour section's
   dark ground. Same grid rhythm as the tiles above, one column narrower. */
.taste{max-width:1180px;margin:clamp(48px,7vw,96px) auto 0}
.taste-eyebrow{margin-bottom:clamp(16px,2.4vw,28px)}
.taste-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.2vw,30px)}
.taste-card{margin:0;display:grid;gap:10px;align-content:start}
.taste-loop{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:#EDE8D8;border:var(--rule) solid var(--cream)}
.taste-card figcaption{display:grid;gap:3px}
.taste-card figcaption b{font-family:var(--display);font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:.96}
.taste-card figcaption span{font-weight:600;font-size:clamp(.76rem,1.05vw,.88rem);line-height:1.45;opacity:.68}
@media (max-width:640px){
  .taste-grid{grid-template-columns:1fr;gap:clamp(18px,4vw,28px)}
  .taste-card{grid-template-columns:120px 1fr;align-items:center;column-gap:16px}
}

@media (max-width:900px){ .pour-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){
  .pour-grid{grid-template-columns:1fr;gap:clamp(20px,5vw,30px)}
  .pour-tile{grid-template-columns:96px 1fr;grid-template-areas:"media name" "media note";
    align-items:center;column-gap:16px;row-gap:4px}
  .pour-media{grid-area:media}
  .pour-name{grid-area:name;font-size:1.15rem}
  .pour-note{grid-area:note}
}

/* ===========================================================================
   6. THE PLACE
   =========================================================================== */
.place{background:var(--cream);color:var(--ink);padding:clamp(60px,11vh,140px) var(--pad)}
.place-grid{max-width:1180px;margin:0 auto;display:grid;
  grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,80px);align-items:center}
.eyebrow{font-size:clamp(.55rem,1vw,.68rem);font-weight:900;letter-spacing:.34em;opacity:.6;
  margin-bottom:clamp(10px,1.6vw,18px)}
.place-h{font-family:var(--display);font-size:clamp(2.3rem,7vw,5.4rem);line-height:.88;letter-spacing:-.01em}
.place-addr{font-family:var(--display);font-size:clamp(1.1rem,2.4vw,1.9rem);margin-top:.35em;opacity:.75}
.place-note{font-weight:600;font-size:clamp(.86rem,1.3vw,1rem);line-height:1.55;max-width:38ch;
  margin-top:clamp(14px,2vw,22px);opacity:.82}
.place-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,3vw,32px)}
.place .btn{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.place .btn:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--cream)}
.place .btn--ghost{background:transparent;color:var(--ink)}
.place .btn--ghost:hover{background:var(--ink);color:var(--cream)}

/* Hand-drawn block map. The card is OLIVE because the Teddy cutout on it is
   the cream artwork — see the header rule. Moving him onto the section's cream
   ground needs the ink variant, which is not shipped. */
.mapcard{margin:0;background:var(--olive);color:var(--cream);
  border:var(--rule) solid var(--ink);padding:clamp(16px,2.2vw,26px);
  display:grid;gap:clamp(10px,1.6vw,18px)}
.mapdraw{width:100%;height:auto;display:block;overflow:visible}
.map-roads .road{fill:none;stroke:var(--cream);stroke-linecap:round;opacity:.8}
.map-roads .road--minor{stroke-width:3}
.map-roads .road--major{stroke-width:9}
/* paint-order knockout: an olive halo behind each label so it survives
   crossing a road. Without it the street names are unreadable. */
.map-labels text,.map-station text{
  font-family:var(--ui);font-weight:900;letter-spacing:.15em;fill:var(--cream);
  paint-order:stroke fill;stroke:var(--olive);stroke-width:5px;stroke-linejoin:round;
}
.map-labels text{font-size:11px;opacity:.68}
.map-labels .v{font-size:10px}
.map-station text{font-size:9px;opacity:.6}
.map-station circle{fill:var(--olive);stroke:var(--cream);stroke-width:3;opacity:.85}
.map-here .x{stroke:var(--terracotta);stroke-width:8;stroke-linecap:round;fill:none}
.map-here .lead{stroke:var(--cream);stroke-width:2;fill:none;opacity:.45;stroke-dasharray:4 5}
.map-here text{font-family:var(--display);font-size:19px;fill:var(--cream);letter-spacing:.01em;
  paint-order:stroke fill;stroke:var(--olive);stroke-width:5px;stroke-linejoin:round}
.map-n path{stroke:var(--cream);stroke-width:2.5;fill:none;stroke-linecap:round;opacity:.55}
.map-n text{font-family:var(--display);font-size:16px;fill:var(--cream);opacity:.55}

/* Teddy sits BESIDE the map, in its own row — he used to overlap the caption
   and the MAIN ST label. */
.map-foot{display:flex;align-items:center;gap:clamp(12px,1.8vw,20px);
  border-top:2px solid rgba(250,236,228,.22);padding-top:clamp(10px,1.6vw,16px)}
.map-teddy{width:clamp(64px,8vw,96px);height:auto;flex:0 0 auto}
.map-foot span{font-size:clamp(.68rem,1vw,.78rem);font-weight:700;line-height:1.45;opacity:.72}

/* ===========================================================================
   6. RSVP
   =========================================================================== */
.rsvp{background:var(--night);padding:clamp(60px,12vh,150px) var(--pad);position:relative;overflow:hidden}
.rsvp-card{max-width:640px;margin:0 auto;background:var(--cream);color:var(--ink);
  border:var(--rule) solid var(--ink);padding:clamp(26px,4.4vw,56px);position:relative;z-index:2}
.rsvp-head{margin-bottom:clamp(20px,3vw,32px)}
.rsvp-h{font-family:var(--display);font-size:clamp(2.4rem,7.5vw,4.6rem);line-height:.88}
.rsvp-sub{font-weight:600;font-size:clamp(.84rem,1.3vw,.98rem);opacity:.7;margin-top:.6em}

.form{display:grid;gap:clamp(16px,2.4vw,24px)}
.hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.field{display:grid;gap:8px;position:relative}
.field label{font-size:clamp(.56rem,1vw,.68rem);font-weight:900;letter-spacing:.26em}
.field label i{font-style:normal;opacity:.45;letter-spacing:.14em}
.field input,.field textarea{
  font-family:var(--ui);font-weight:700;font-size:clamp(.95rem,1.5vw,1.1rem);color:var(--ink);
  background:transparent;border:0;border-bottom:var(--rule) solid rgba(46,49,39,.25);
  padding:10px 2px;outline:none;width:100%;border-radius:0;
}
.field textarea{resize:vertical;line-height:1.5;min-height:6.5em;font-weight:600}
.field input::placeholder,.field textarea::placeholder{color:rgba(46,49,39,.42);font-weight:600}
.field-rule{position:absolute;left:0;bottom:0;height:var(--rule);width:100%;background:var(--terracotta);
  transform:scaleX(0);transform-origin:left}
.field--area .field-rule{bottom:4px}
.field.is-bad input,.field.is-bad textarea{border-bottom-color:#B4472F}
.field.is-bad label{color:#B4472F}

.form-error{background:#B4472F;color:var(--cream);font-weight:800;font-size:.86rem;
  padding:12px 14px;line-height:1.4}
.form-fine{font-size:.7rem;font-weight:700;opacity:.5;text-align:center;letter-spacing:.06em}
.rsvp .btn{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.rsvp .btn:hover{background:var(--terracotta);border-color:var(--terracotta)}
.rsvp .btn--ghost{background:transparent;color:var(--cream);border-color:var(--cream)}
.rsvp .btn--ghost:hover{background:var(--cream);color:var(--ink)}
#submitBtn[disabled]{opacity:.55;cursor:wait}

/* success ticket — Flip target */
.ticket{display:grid;justify-items:center;text-align:center;gap:clamp(8px,1.4vw,14px);
  position:relative;padding:clamp(6px,1.6vw,18px) 0}
.ticket-dog{width:clamp(120px,20vw,190px);height:auto;filter:none}
.ticket-eyebrow{font-size:clamp(.55rem,1vw,.68rem);font-weight:900;letter-spacing:.34em;opacity:.6}
.ticket-h{font-family:var(--display);font-size:clamp(2.2rem,6.6vw,4rem);line-height:.88}
.ticket-body{font-weight:700;font-size:clamp(.86rem,1.4vw,1.02rem);line-height:1.6;opacity:.8}
.rsvp-card.is-done{background:var(--lemon)}
/* "ARE YOU IN?" above "ADA, YOU'RE IN" is a redundant double headline once
   the RSVP has landed — the ticket carries its own. */
.rsvp-card.is-done .rsvp-head{display:none}
.rsvp-card.is-done .ticket-dog{filter:brightness(0) saturate(100%)}
/* cream-on-lemon is unreadable; the confirmed card is a light ground */
.rsvp-card.is-done .btn--ghost{color:var(--ink);border-color:var(--ink)}
.rsvp-card.is-done .btn--ghost:hover{background:var(--ink);color:var(--lemon)}

.burst{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.burst img{position:absolute;width:clamp(16px,2.2vw,34px);height:auto;will-change:transform}

/* ===========================================================================
   7. FOOTER
   =========================================================================== */
.foot{background:var(--cream);color:var(--ink);padding:clamp(50px,9vh,110px) 0 0;
  display:block}
.foot-copy{max-width:1180px;margin:0 auto clamp(40px,7vh,90px);padding-inline:var(--pad);
  display:grid;justify-items:center;text-align:center}
.foot-after{font-family:var(--display);font-size:clamp(1.6rem,5vw,3.6rem);line-height:1}
.foot-after b{color:var(--terracotta)}
.foot-marks{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,32px);
  margin-top:clamp(20px,3vw,34px);flex-wrap:wrap}
.foot-marks img:first-child{width:clamp(120px,17vw,220px)}
.foot-marks img:last-child{width:clamp(70px,9vw,120px)}
.foot-fine{margin-top:clamp(16px,2.4vw,26px);font-size:.8rem;font-weight:700;opacity:.55}

/* Full-bleed finale — edge to edge, no max-width, no side padding. Portrait,
   so it runs taller than the fold by design. */
.foot-poster{width:100%;border-top:var(--rule) solid var(--ink)}
.foot-poster img{width:100%;height:auto;display:block}

/* ===========================================================================
   REVEAL BASE — paired with fromTo() in main.js. Never use from() on these.
   =========================================================================== */
.reveal{opacity:0}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:900px){
  .place-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-top{gap:12px}
  .hero-when{font-size:clamp(1.05rem,5.4vw,1.7rem);flex-wrap:wrap;justify-content:center}
  .countdown{gap:6px}
  .cd-unit{min-width:52px}
  .card{min-height:300px}
  .clock-sub{min-height:4.4em}
}

/* ===========================================================================
   REDUCED MOTION — content must still be fully visible and readable.
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1}
  .cursor{display:none!important}
  .loader{display:none}
  .grain{opacity:.32}
  html{scroll-behavior:auto}
}