/* Pista public pages (joinpista.com): the front page, the invitation and the privacy note.
   Brand from the invitation card: near-black stage, Circus red, Inter. */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("caveat-latin.woff2") format("woff2"); }

:root {
  --bg: #0B0D12;
  --bg-2: #141519;
  --ink: #fff;
  --muted: #A8B3D2;
  --dim: #6F7896;
  --red: #FE3A24;
  --red-hover: #E7341F;
  --red-soft: #FF816E;
  --line: rgba(255, 255, 255, .14);
  --field: rgba(255, 255, 255, .06);
  --ease: cubic-bezier(.2, .7, .1, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* ---- logo ---- */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.logo .mark { width: 26px; height: 31px; color: var(--red); flex: none; }
.logo span { font-size: 30px; font-weight: 700; letter-spacing: -.05em; line-height: 1; margin-top: -3px; }

/* ---- stage: the spotlight every page stands in ---- */
.stage { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.beam {
  position: absolute; left: 50%; top: -10vh; width: min(140vw, 1100px); height: 130vh; transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 0deg 162deg, rgba(255, 244, 225, .16) 171deg, rgba(255, 248, 235, .3) 180deg, rgba(255, 244, 225, .16) 189deg, transparent 198deg 360deg);
  -webkit-mask: linear-gradient(#000 20%, transparent 92%); mask: linear-gradient(#000 20%, transparent 92%);
  filter: blur(6px);
}
.floor {
  position: absolute; left: 50%; bottom: -14vh; width: min(120vw, 900px); height: 42vh; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 240, 220, .18), transparent 70%);
}
.stage::after { /* the red glow from the card's own artwork */
  content: ""; position: absolute; width: 60vmax; height: 60vmax; right: -30vmax; top: -34vmax;
  background: radial-gradient(closest-side, rgba(254, 58, 36, .22), transparent); filter: blur(20px);
}
.dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- buttons, fields ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 54px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--red); color: #fff; font: inherit; font-weight: 600; font-size: 16px; text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(254, 58, 36, .7); transition: background .15s, transform .15s;
}
.btn:hover { background: var(--red-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { background: rgba(255, 255, 255, .06); }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.eyebrow { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--red-soft); }

/* ---- footer ---- */
.foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px calc(28px + env(safe-area-inset-bottom)); color: var(--dim); font-size: 13px; }
.foot img { width: 128px; opacity: .7; }
.foot a { color: var(--dim); text-decoration: none; }
.foot a:hover { color: var(--muted); }
.foot .sep { opacity: .5; }

/* ---- front page ---- */
.home { display: flex; flex-direction: column; }
.home .top { position: relative; z-index: 1; padding: 28px 24px 0; display: flex; justify-content: center; }
.home main { position: relative; z-index: 1; flex: 1; display: grid; align-content: center; justify-items: center; text-align: center; padding: 48px 20px 24px; gap: 26px; }
.home h1 { margin: 0; text-wrap: balance; font-size: clamp(42px, 10vw, 84px); line-height: .98; letter-spacing: -.05em; font-weight: 800; max-width: 11ch; }
.home h1 em { font-style: normal; color: var(--red); }
.home .lede { margin: 0; max-width: 30em; color: var(--muted); font-size: 17px; }
.home .badge { display: inline-block; padding: 10px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.home .home-card { width: min(84vw, 420px); margin-top: 10px; border-radius: 16px; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); transform: perspective(1000px) rotateX(8deg) rotateY(-10deg) rotateZ(2deg); }

/* ---- privacy note ---- */
.doc { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 32px 20px 20px; }
.doc .top { padding: 0 0 40px; }
.doc h1 { font-size: 38px; letter-spacing: -.04em; line-height: 1.05; margin: 10px 0 24px; }
.doc h2 { font-size: 18px; margin: 32px 0 8px; }
.doc p, .doc li { color: var(--muted); }
.doc a { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}