/* ============================================================
   seemyevent — guest-facing pages (the door, the RSVP, the invitation)

   Dressed for this event: all black, white type, the Sinners District
   blackletter for the name and nothing else. The panels borrow the
   stitched edge of the SD patch. The one loud thing is the pass at the
   end — silver and reflective, like 3M under a camera flash.

   The admin pages load this file too, then assets/admin.css on top.
   ============================================================ */

:root{
  --night:    #000000;  /* page */
  --well:     #111111;  /* inputs, panels */
  --seam:     #2E2E2E;  /* borders */
  --stitch:   #5C5C5C;  /* the dashed patch stitching */
  --chrome:   #EDEDED;  /* body text, 17.7:1 on black */
  --concrete: #A3A3A3;  /* secondary text, 8.6:1 on black */
  --flash:    #FFFFFF;
  --error:    #FF8F80;  /* 8.4:1 on black */

  --disp: "Grenze Gotisch", "Old English Text MT", Georgia, serif;
  --body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --r: 10px;
  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100svh;
  background:var(--night); color:var(--chrome);
  font-family:var(--body); font-size:1rem; line-height:1.55;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
}
/* a little print grit, like the flyer — sits under everything */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{ color:var(--flash); text-underline-offset:.2em; }
:focus-visible{ outline:2px solid var(--flash); outline-offset:3px; }
img{ max-width:100%; display:block; }

/* the flyer's spaced capitals — used only where the flyer uses them */
.caps{
  font-stretch:125%; font-weight:600; text-transform:uppercase;
  letter-spacing:.32em; font-size:.74rem; line-height:1.5; margin:0;
}
.blackletter{ font-family:var(--disp); font-weight:700; letter-spacing:.005em; line-height:.95; }

/* ---------- the door (index.php) ---------- */
.door{
  position:relative; z-index:1;
  min-height:calc(100svh - 42px); width:100%; max-width:460px; margin:0 auto;
  padding:clamp(12px,3svh,40px) 16px 0;
  display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2.2svh,22px);
}
/* the logo shrinks with the screen height, so step 1 never needs a scroll */
.door-logo{ height:clamp(72px,15svh,164px); width:auto; }
.crest-sm{ width:76px; }
.door-intro{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.2svh,10px); }
.door-title{ font-size:clamp(2.8rem,14vw,4.2rem); margin:0; color:var(--flash); }
.door-when{ margin:2px 0 0; color:var(--concrete); }

/* the patch: solid edge, dashed stitching just inside it */
.panel{
  position:relative; width:100%;
  background:var(--well); border:1px solid var(--seam); border-radius:var(--r);
  padding:clamp(18px,3svh,28px) 20px clamp(18px,2.6svh,24px);
}
.panel::before{
  content:""; position:absolute; inset:6px; pointer-events:none;
  border:1px dashed var(--stitch); border-radius:calc(var(--r) - 4px);
}
.panel > *{ position:relative; }
.panel.swap-out{ animation:swapOut .24s ease forwards; }
.panel.swap-in { animation:swapIn .36s cubic-bezier(.2,.7,.3,1) both; }
@keyframes swapOut{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes swapIn{ from{ opacity:0; transform:translateY(8px); } }

.step{ margin:0 0 6px; color:var(--concrete); font-size:.86rem; font-weight:500; }
.panel-title{ margin:0 0 6px; font-size:clamp(1.35rem,3.6svh,1.6rem); line-height:1.15; font-weight:750; color:var(--flash); text-wrap:balance; }
.panel-sub{ margin:0 0 clamp(14px,2.4svh,22px); color:var(--concrete); }

/* ---------- forms ---------- */
.field{ display:flex; flex-direction:column; gap:7px; margin-bottom:18px; border:0; padding:0; min-width:0; }
.field-label{ font-weight:650; font-size:.95rem; color:var(--chrome); padding:0; }
.field-hint{ font-weight:400; color:var(--concrete); }
.input{
  width:100%; min-height:50px;
  background:var(--night); color:var(--flash);
  border:1px solid var(--stitch); border-radius:8px;
  font:inherit; font-size:1.05rem; padding:12px 14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder{ color:#8A8A8A; }
.input:focus{ outline:none; border-color:var(--flash); box-shadow:0 0 0 1px var(--flash); }
.input[aria-invalid="true"]{ border-color:var(--error); }
.input.tel{ font-size:1.25rem; letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.area{ min-height:96px; resize:vertical; line-height:1.5; }
.err{ margin:0; color:var(--error); font-size:.9rem; min-height:0; }
.err:empty{ display:none; }

.hp{ position:absolute !important; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }

.go{
  width:100%; min-height:54px; margin-top:6px;
  background:var(--flash); color:var(--night);
  border:0; border-radius:999px;
  font:inherit; font-weight:750; font-size:1.02rem;
  cursor:pointer; transition:transform .12s ease, opacity .15s ease;
}
.go:active:not(:disabled){ transform:translateY(1px); }
.go:disabled{ opacity:.4; cursor:not-allowed; }
.go:focus-visible{ outline-offset:4px; }
.linkish{
  background:none; border:0; padding:4px 0; color:var(--flash);
  font:inherit; font-size:.92rem; text-decoration:underline; text-underline-offset:.2em; cursor:pointer;
}

.carried{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--seam); border-radius:8px; padding:10px 14px; background:var(--night);
}
.carried-val{ font-size:1.1rem; letter-spacing:.04em; font-variant-numeric:tabular-nums; }

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  min-height:44px; padding:0 16px; border-radius:999px;
  background:var(--night); color:var(--chrome); border:1px solid var(--stitch);
  font:inherit; font-size:.95rem; cursor:pointer;
}
.chip[aria-pressed="true"]{ background:var(--flash); color:var(--night); border-color:var(--flash); font-weight:650; }

.counter{ display:flex; align-items:center; gap:14px; }
.counter button{
  width:50px; height:50px; border-radius:50%;
  background:var(--night); color:var(--flash); border:1px solid var(--stitch);
  font:inherit; font-size:1.5rem; line-height:1; cursor:pointer;
}
.counter button:disabled{ opacity:.35; cursor:not-allowed; }
.counter output{ min-width:2ch; text-align:center; font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; }
.counter-note{ margin:0; color:var(--concrete); }

.toggle{ display:flex; align-items:flex-start; gap:12px; cursor:pointer; margin-bottom:12px; }
.toggle input{ width:22px; height:22px; margin:1px 0 0; accent-color:var(--flash); flex:none; }


/* the progress rail under the panel: two real steps */
.rail{ display:flex; gap:8px; width:100%; }
.rail span{ flex:1; height:3px; border-radius:3px; background:var(--seam); transition:background .4s ease; }
.rail span.on{ background:var(--flash); }


/* success popup */
.scrim{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:16px;
  background:rgba(0,0,0,.82); backdrop-filter:blur(3px);
  animation:fadeIn .2s ease both;
}
.popup{
  width:100%; max-width:380px; text-align:center;
  background:var(--well); border:1px solid var(--seam); border-radius:var(--r);
  padding:30px 24px;
}
.popup h2{ margin:0 0 8px; font-size:1.5rem; color:var(--flash); }
.popup p{ margin:0; color:var(--concrete); }
@keyframes fadeIn{ from{ opacity:0; } }

/* ---------- the invitation (invite.php) ---------- */
.invite{ position:relative; z-index:1; }
.hero{
  position:relative; min-height:min(92svh,860px);
  display:flex; align-items:flex-end;
  overflow:hidden; isolation:isolate;
}
.hero picture, .hero img{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.hero img{ object-fit:cover; object-position:68% 28%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,.55) 62%, #000 96%);
}
.hero-copy{ width:100%; max-width:760px; margin:0 auto; padding:0 16px 34px; }
.hero-name{ font-size:clamp(3.2rem,16vw,8.5rem); margin:6px 0 10px; color:var(--flash); }
.hero-when{ margin:14px 0 0; font-size:1.1rem; font-weight:600; }

.wrap{ max-width:760px; margin:0 auto; padding:0 16px 40px; }
.welcome{ margin:6px 0 34px; font-size:1.25rem; font-weight:650; }
.welcome span{ display:block; font-weight:400; font-size:1rem; color:var(--concrete); margin-top:4px; }


.details{ margin:0 0 40px; border-top:1px solid var(--seam); }
.details div{ display:grid; grid-template-columns:8.5rem 1fr; gap:4px 18px; padding:16px 0; border-bottom:1px solid var(--seam); }
.details dt{ color:var(--concrete); font-weight:500; }
.details dd{ margin:0; font-size:1.05rem; }
.details dd small{ display:block; color:var(--concrete); font-size:.92rem; margin-top:2px; }
@media (max-width:520px){
  .details div{ grid-template-columns:1fr; }
}

/* the pass: the one loud thing on the page */
.pass{
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center;
  padding:22px; border-radius:14px; color:#0A0A0A;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 3px),
    linear-gradient(118deg, #BDBDBD 0%, #F4F4F4 32%, #CACACA 52%, #FAFAFA 70%, #B5B5B5 100%);
  box-shadow:0 0 0 1px #FFFFFF inset, 0 20px 50px -24px rgba(255,255,255,.35);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s cubic-bezier(.2,.7,.3,1);
  touch-action:pan-y;
}
/* holographic glare that follows the pointer */
.pass::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; mix-blend-mode:overlay;
  background:
    radial-gradient(circle at var(--gx,30%) var(--gy,20%), rgba(255,255,255,.95), transparent 42%),
    conic-gradient(from 200deg at var(--gx,30%) var(--gy,20%), #d9d9d9, #ffffff, #9c9c9c, #f0f0f0, #bdbdbd, #d9d9d9);
  opacity:.55;
}
/* the flash: a band of light that crosses the pass once when it appears */
.pass::after{
  content:""; position:absolute; inset:-40% -60%; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%);
  transform:translateX(-60%); animation:flash 1.4s .5s cubic-bezier(.3,.6,.2,1) both;
}
@keyframes flash{ to{ transform:translateX(60%); } }
.qr-box{ background:#FFFFFF; padding:10px; border-radius:8px; line-height:0; }
.qr-box img, .qr-box canvas{ width:168px; height:168px; image-rendering:pixelated; }
.pass h2{ margin:0 0 6px; font-size:1.3rem; line-height:1.2; }
.pass p{ margin:0 0 6px; font-size:.95rem; color:#262626; }
.pass .code{ font-weight:700; letter-spacing:.12em; font-variant-numeric:tabular-nums; color:#0A0A0A; margin-top:10px; }
.pass .in{ display:inline-block; background:#0A0A0A; color:#FFFFFF; border-radius:999px; padding:4px 12px; font-weight:650; font-size:.85rem; }
.pass-btn{
  margin-top:10px; min-height:44px; padding:0 18px; border-radius:999px;
  background:#0A0A0A; color:#FFFFFF; border:0; font:inherit; font-weight:650; font-size:.92rem; cursor:pointer;
}
.pass-btn:disabled{ opacity:.6; cursor:default; }
.pass-btn:focus-visible{ outline-color:#0A0A0A; }
@media (max-width:520px){
  .pass{ grid-template-columns:1fr; justify-items:center; text-align:center; }
}

.after-pass{ margin:22px 0 0; color:var(--concrete); }
.sign-off{ font-family:var(--disp); font-weight:700; font-size:2.4rem; line-height:1; margin:48px 0 0; color:var(--flash); }

.loading{ min-height:70svh; display:grid; place-items:center; color:var(--concrete); }

/* wrong door / 404 */
.lost{ position:relative; z-index:1; min-height:100svh; display:grid; place-items:center; text-align:center; padding:24px 16px; }
.lost h1{ font-size:clamp(3rem,14vw,5rem); margin:18px 0 8px; color:var(--flash); }
.lost p{ margin:0 0 6px; color:var(--concrete); }



/* ============================================================
   The moving parts (driven by assets/fx.js)
   ============================================================ */

/* night water: four Haikei-style wave layers drifting at different speeds */
.sea{ position:fixed; left:0; right:0; bottom:0; height:min(34vh,260px); z-index:0; pointer-events:none; overflow:hidden; }
.sea i{
  position:absolute; left:0; bottom:0; width:2880px; height:100%;
  background-repeat:repeat-x; background-size:1440px 100%;
  animation:tide var(--dur) linear infinite;
}
.sea i:nth-child(1){ background-image:url("/assets/wave-1.svg"); --dur:46s; }
.sea i:nth-child(2){ background-image:url("/assets/wave-2.svg"); --dur:34s; animation-direction:reverse; }
.sea i:nth-child(3){ background-image:url("/assets/wave-3.svg"); --dur:26s; }
.sea i:nth-child(4){ background-image:url("/assets/wave-4.svg"); --dur:19s; animation-direction:reverse; }
@keyframes tide{ to{ transform:translateX(-1440px); } }

/* the searchlight */
.spot{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle 300px at var(--sx,50%) var(--sy,30%), rgba(255,255,255,.10), rgba(255,255,255,.03) 45%, transparent 70%);
}

/* the marquee strip */
.marquee{
  position:relative; z-index:2; width:100%; overflow:hidden;
  border-block:1px solid var(--seam); background:var(--night);
  -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 32s linear infinite; }
.marquee-track span{ padding:11px 0; white-space:nowrap; }
.marquee-track b{ display:inline-block; margin:0 1.1em; font-weight:400; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* a light that runs around the stitched edge of the panel */
@property --trail{ syntax:"<angle>"; inherits:false; initial-value:0deg; }
.panel::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--trail), transparent 0 72%, rgba(255,255,255,.15) 80%, #fff 88%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:trail 5.5s linear infinite;
}
@keyframes trail{ to{ --trail:360deg; } }

/* the white button: a band of light sweeps across it every few seconds */
.go{ position:relative; overflow:hidden; transition:transform .2s cubic-bezier(.2,.7,.3,1), opacity .15s ease; }
.go:not(:disabled)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 35%, rgba(0,0,0,.14) 50%, transparent 65%);
  transform:translateX(-100%); animation:sweep 3.6s 1s ease-in-out infinite;
}
@keyframes sweep{ 0%,55%{ transform:translateX(-100%); } 85%,100%{ transform:translateX(100%); } }

/* per-letter reveal */
.word{ display:inline-block; white-space:nowrap; }
.ltr{ display:inline-block; animation:ltrIn .7s cubic-bezier(.2,.7,.3,1) both; }
@keyframes ltrIn{ from{ opacity:0; filter:blur(10px); transform:translateY(.25em) scale(1.08); } }

/* camera flash */
.camera-flash{ position:fixed; inset:0; z-index:50; background:#fff; pointer-events:none; animation:flashOut .7s cubic-bezier(.1,.6,.3,1) forwards; }
@keyframes flashOut{ 0%{ opacity:.95; } 100%{ opacity:0; } }

/* SD stars */
.star-bit{
  position:fixed; z-index:40; width:var(--sz); height:var(--sz); margin:calc(var(--sz) / -2) 0 0 calc(var(--sz) / -2);
  background:#fff; pointer-events:none;
  clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation:starFly 1.25s cubic-bezier(.15,.7,.35,1) forwards;
}
@keyframes starFly{
  70%{ opacity:1; }
  to{ transform:translate(var(--dx), calc(var(--dy) + 140px)) rotate(var(--rot)); opacity:0; }
}

/* rolling digits */
.roll{ display:inline-block; height:1em; overflow:hidden; line-height:1; vertical-align:top; }
.roll-col{ display:flex; flex-direction:column; transition:transform .6s cubic-bezier(.3,1.4,.5,1); }
.roll-col span{ height:1em; display:block; text-align:center; }

.countdown{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin:0 0 40px; }
.countdown div{ border:1px solid var(--seam); border-radius:var(--r); padding:14px 6px 10px; text-align:center; background:var(--well); }
.countdown .num{ display:block; font-size:clamp(1.9rem,8vw,2.8rem); font-weight:800; font-stretch:80%; font-variant-numeric:tabular-nums; line-height:1; color:var(--flash); }
.countdown small{ display:block; margin-top:8px; color:var(--concrete); font-size:.8rem; }
.countdown-label{ margin:0 0 12px; font-weight:650; }

/* the spinning stamp, like the circled price on the flyer */
.stamp{ position:absolute; top:clamp(14px,4vw,32px); left:clamp(12px,4vw,32px); width:clamp(108px,28vw,150px); aspect-ratio:1; z-index:2; }
.stamp svg{ width:100%; height:100%; animation:spin 16s linear infinite; }
.stamp text{ fill:#fff; font-family:var(--body); font-weight:700; font-stretch:125%; font-size:10.5px; letter-spacing:2.6px; text-transform:uppercase; }
.stamp b{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--disp); font-weight:700; font-size:clamp(2rem,7vw,2.7rem); color:#fff; line-height:1;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* hero: the photo pulls back and dims as you scroll; the name drifts up */
.hero img{ transform:scale(calc(1.06 + var(--p,0) * .14)); filter:brightness(calc(1 - var(--p,0) * .55)); transform-origin:50% 30%; }
.hero-copy{ transform:translateY(calc(var(--p,0) * -60px)); }
.hero-name{ mix-blend-mode:difference; }

/* things that appear as they scroll in */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* the logo leans with the pointer */
.crest-tilt{ transform:perspective(600px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .3s cubic-bezier(.2,.7,.3,1); }

/* the door sits above the water */
.door, .invite, .lost{ position:relative; z-index:1; }


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .marquee-track{ animation:none; }
}

/* the water at the end of the invitation sits in the page, not over it */
.sea.sea-end{ position:relative; height:180px; margin-top:-40px; }
.invite .credit{ position:relative; z-index:1; margin-top:-64px; padding-bottom:24px; }
.invite .marquee{ margin-bottom:34px; }
.invite .spot{ z-index:2; mix-blend-mode:screen; }

/* ============================================================
   "It's a surprise" — loud on purpose. A white brush-stroke banner,
   tilted, like the SURPRISE PARTY! strip on the flyer.
   ============================================================ */
.surprise{
  position:relative; z-index:1;
  margin:6px -4px 28px; padding:20px 22px 18px;
  background:#FFFFFF; color:#000000; text-align:center;
  transform:rotate(-2.2deg);
  clip-path:polygon(0.0% 2.3px, 3.6% 1.1px, 7.1% 4.6px, 10.7% 0.5px, 14.3% 3.8px, 17.9% 2.6px, 21.4% 0.4px, 25.0% 3.6px, 28.6% 0.3px, 32.1% 3.0px, 35.7% 0.5px, 39.3% 0.6px, 42.9% 3.0px, 46.4% 5.8px, 50.0% 0.9px, 53.6% 1.6px, 57.1% 4.4px, 60.7% 6.6px, 64.3% 4.0px, 67.9% 2.8px, 71.4% 6.8px, 75.0% 0.3px, 78.6% 6.0px, 82.1% 2.0px, 85.7% 1.0px, 89.3% 0.8px, 92.9% 2.2px, 96.4% 5.7px, 100.0% 1.3px, calc(100% - 3.5px) 30%, calc(100% - 3.8px) 60%, 100.0% calc(100% - 2.6px), 96.4% calc(100% - 3.8px), 92.9% calc(100% - 0.4px), 89.3% calc(100% - 0.4px), 85.7% calc(100% - 1.4px), 82.1% calc(100% - 4.8px), 78.6% calc(100% - 3.0px), 75.0% calc(100% - 2.2px), 71.4% calc(100% - 4.1px), 67.9% calc(100% - 3.2px), 64.3% calc(100% - 2.1px), 60.7% calc(100% - 5.6px), 57.1% calc(100% - 4.9px), 53.6% calc(100% - 1.7px), 50.0% calc(100% - 4.0px), 46.4% calc(100% - 3.7px), 42.9% calc(100% - 6.1px), 39.3% calc(100% - 5.1px), 35.7% calc(100% - 2.0px), 32.1% calc(100% - 6.9px), 28.6% calc(100% - 0.8px), 25.0% calc(100% - 2.9px), 21.4% calc(100% - 5.3px), 17.9% calc(100% - 1.1px), 14.3% calc(100% - 3.4px), 10.7% calc(100% - 0.3px), 7.1% calc(100% - 4.7px), 3.6% calc(100% - 5.4px), 0.0% calc(100% - 4.0px), 5.3px 60%, 1.9px 30%);
  animation:shush 4.5s 1.2s ease-in-out infinite;
}
.surprise-big{
  display:block; margin:0;
  font-weight:900; font-stretch:72%; text-transform:uppercase;
  font-size:clamp(2.1rem,10.5vw,3.4rem); line-height:.9; letter-spacing:-.01em;
}
.surprise-sub{
  display:block; margin:8px 0 0;
  font-weight:800; font-stretch:80%; text-transform:uppercase;
  font-size:clamp(1rem,4.6vw,1.3rem); letter-spacing:.03em; line-height:1.1;
}
.surprise-note{ display:block; margin:12px auto 0; max-width:40ch; font-size:.98rem; line-height:1.45; font-weight:550; }
.surprise::before, .surprise::after{
  /* the brush flecks around it */
  content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:#000; opacity:.85;
}
.surprise::before{ top:10px; right:18px; width:6px; height:6px; }
.surprise::after{ bottom:12px; left:16px; width:4px; height:4px; }
@keyframes shush{
  0%, 82%, 100%{ transform:rotate(-2.2deg); }
  86%{ transform:rotate(-4deg) scale(1.02); }
  90%{ transform:rotate(-.6deg); }
  94%{ transform:rotate(-3.2deg); }
}
.wrap > .surprise{ margin-top:4px; }
.popup .surprise{ margin:18px -8px 0; padding:12px 14px; }
.popup .surprise-big{ font-size:1.6rem; }

/* the pass before payment: the code is there but switched off */
.pass.locked .qr-box{ position:relative; }
.pass.locked .qr-box img, .pass.locked .qr-box canvas, .pass.locked #qrMount{ filter:blur(7px) grayscale(1); opacity:.55; }
.lock-tag{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  font-weight:800; font-size:.95rem; color:#000; line-height:1.15;
}
.lock-tag span{ background:#fff; border:2px solid #000; border-radius:999px; padding:6px 12px; }
.pass .active{ display:inline-block; background:#0A0A0A; color:#fff; border-radius:999px; padding:4px 12px; font-weight:650; font-size:.85rem; }
.pay-box{ margin:0 0 34px; padding:18px 18px 16px; border:1px solid var(--flash); border-radius:var(--r); }
.pay-box h2{ margin:0 0 6px; font-size:1.2rem; color:var(--flash); }
.pay-box p{ margin:0 0 4px; }
.pay-box .big{ font-size:1.5rem; font-weight:800; color:var(--flash); }
.pay-box small{ display:block; color:var(--concrete); margin-top:6px; font-size:.92rem; }

/* headings we move focus to (for screen readers) don't need a visible ring */
[tabindex="-1"]:focus{ outline:none; }

/* Powered by The Pew Estate Digital, with the monogram */
.credit{ text-align:center; margin:0; padding:10px 0 18px; position:relative; z-index:1; }
.credit a{
  display:inline-flex; align-items:center; gap:.6rem; min-height:44px; padding:0 6px;
  color:var(--credit-ink,#A3A3A3); text-decoration:none;
  font-family:"Archivo", "Helvetica Neue", Arial, sans-serif; font-stretch:125%;
  font-size:.68rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
}
.credit a:hover, .credit a:focus-visible{ color:#FFFFFF; }
.credit img{ width:18px; height:18px; flex:none; display:inline-block; }
.door .credit{ margin-top:auto; padding:4px 0 8px; }

/* names for everyone else in the group, under the counter */
.extra-names{ display:flex; flex-direction:column; gap:7px; margin-top:14px; }
.extra-names .field-label{ margin-top:6px; }
.extra-names[hidden]{ display:none; }
@media (max-width:420px){ .credit a{ letter-spacing:.1em; font-size:.62rem; white-space:nowrap; } }