/* ==========================================================================
   COVET — shared design system
   One deep red, coral highlights, near-black accents.
   Colors sampled from the approved mocks (1440x1000).
   ========================================================================== */

/* ---------- Fonts (self-hosted, Vercel's Geist family) ---------- */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/GeistVF.woff2") format("woff2-variations"),
       url("/assets/fonts/GeistVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/GeistMonoVF.woff2") format("woff2-variations"),
       url("/assets/fonts/GeistMonoVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  --red-900: #3A0A08;   /* deepest shadow (inputs, card edge) */
  --red-800: #5E1410;   /* doors */
  --red-700: #7E1C17;
  --red-600: #8A2620;   /* base background */
  --red-500: #9A322A;
  --coral-500: #FF5A45;
  --coral-300: #FCA490; /* primary button fill — and, per the mocks, all text */
  --peach-200: #FCA490; /* body text (mocks use one text color) */
  --peach-100: #FCA490; /* mono labels */
  --ink: #2C1616;       /* button text */
  --white: #FFFFFF;

  --text: var(--peach-200);
  --glow: 0 0 18px rgba(255, 255, 255, .55), 0 0 42px rgba(255, 190, 170, .35);
  --text-shadow: 0 1px 12px rgba(58, 10, 8, .35);

  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --control-w: min(300px, 100vw - 48px);
  --control-h: 52px;   /* full-width form buttons */
  --input-h: 54px;
  --btn-h: 54px;

  --ease-door-close: cubic-bezier(.76, 0, .24, 1);
  --ease-door-open: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- 1. Layout: exactly one viewport, never scrolls ---------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

html {
  background: var(--red-600);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* body has no background of its own, so the fixed background layers
   (negative z-index) sit on the html background and the wordmark can
   blend with them. Don't add transform/filter/opacity to body. */
body {
  font-family: var(--font-sans);
  color: var(--text);
  text-shadow: var(--text-shadow);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* .stage deliberately does NOT create a stacking context (no z-index,
   transform, filter or opacity) so the wordmark's blend mode reaches
   the background canvas. */
.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Background layers ---------- */
/* Paint order: fallback image → WebGL canvas → grain → content. */
.bg-fallback {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(rgba(70, 12, 10, .3), rgba(70, 12, 10, .3)),
    url("/assets/bg.jpg") 49% 55% / cover no-repeat;
  background:
    linear-gradient(rgba(70, 12, 10, .3), rgba(70, 12, 10, .3)),
    image-set(url("/assets/bg.webp") type("image/webp"), url("/assets/bg.jpg") type("image/jpeg")) 49% 55% / cover no-repeat;
}

/* No WebGL (or no GPU): the photo still breathes, just with CSS. A warm
   tint fades in and out; opacity is cheap to animate even without a GPU. */
.bg-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(150, 40, 20, .16), rgba(90, 8, 14, .14));
  opacity: 0;
}
html.no-webgl .bg-fallback::after {
  animation: bg-breathe 12s ease-in-out infinite alternate;
}
html.no-webgl #bg { display: none; }

@keyframes bg-breathe {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
html.bg-ready #bg { opacity: 1; }

.grain {
  position: fixed;
  inset: -120px;
  z-index: -1;
  pointer-events: none;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .96s steps(1) infinite;
}

@keyframes grain {
  0%     { transform: translate(0, 0); }
  12.5%  { transform: translate(-48px, 22px); }
  25%    { transform: translate(30px, -60px); }
  37.5%  { transform: translate(-74px, -18px); }
  50%    { transform: translate(56px, 44px); }
  62.5%  { transform: translate(-16px, 70px); }
  75%    { transform: translate(82px, -36px); }
  87.5%  { transform: translate(-60px, -78px); }
}

/* ---------- 3. Typography ---------- */
/* Wordmark: inline SVG with fill="currentColor".
   The mocks render it white with an overlay blend, which is what makes it
   read coral over the red and turn dark where the streak passes behind it. */
.wordmark {
  display: block;
  width: var(--wordmark-w, min(clamp(220px, 22vw, 325px), 34vh));
  height: auto;
  aspect-ratio: 675 / 90;
  color: var(--white);
  opacity: .93;
  --enter-opacity: .93;
  mix-blend-mode: overlay;
  overflow: visible;
}

.wordmark--hero {
  /* 481px in the 1440x1000 mock; 78vw on phones; shrinks on short screens */
  --wordmark-w: min(clamp(min(260px, 78vw), 33.4vw, 500px), 48.1vh, 78vw);
}

.label {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--peach-100);
}

.lede {
  margin: 0;
  max-width: 500px;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: var(--peach-200);
}

.copy {
  margin: 0;
  max-width: 500px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--peach-200);
}

.fineprint {
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--peach-100);
}

/* ---------- 4. Components ---------- */

/* Text link — "JOIN THE WAITLIST", "SKIP THE LINE" */
.text-link {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 6px 4px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--peach-100);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: rgba(252, 164, 144, .75);
  transition: color .22s ease, text-shadow .22s ease, text-decoration-color .22s ease;
}

.text-link::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 300%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 210, 195, .35), transparent);
  filter: blur(8px);
  opacity: 0;
  transition: opacity .3s ease;
}

.text-link:focus-visible {
  color: var(--white);
  text-decoration-color: var(--white);
  text-shadow: var(--glow);
  outline: 1px solid rgba(255, 255, 255, .6);
  outline-offset: 4px;
}
.text-link:focus-visible::before { opacity: 1; }

@media (hover: hover) {
  .text-link:hover {
    color: var(--white);
    text-decoration-color: var(--white);
    text-shadow: var(--glow);
  }
  .text-link:hover::before { opacity: 1; }
}

/* Primary button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 32px;
  border: 0;
  border-radius: 2px;
  background: var(--coral-300);
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .22s ease, box-shadow .32s ease, transform .12s ease, opacity .2s ease;
}

.btn:focus-visible {
  background: var(--white);
  box-shadow: 0 0 24px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 180, 160, .35);
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

@media (hover: hover) {
  .btn:hover {
    background: var(--white);
    box-shadow: 0 0 24px rgba(255, 255, 255, .45), 0 0 60px rgba(255, 180, 160, .35);
  }
}

.btn:active { transform: scale(.985); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .8; cursor: default; }

.btn--block { width: var(--control-w); height: var(--control-h); padding: 0 16px; }

/* Input */
.field-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.input {
  display: block;
  width: var(--control-w);
  height: var(--input-h);
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(252, 164, 144, .6);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(30, 3, 3, .82), rgba(52, 8, 6, .72));
  color: var(--peach-100);
  caret-color: var(--white);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .05em;
  text-align: center;
  text-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.input::placeholder {
  color: rgba(252, 164, 144, .82);
  opacity: 1;
}

.input:focus {
  outline: none;
  border-color: #FFD0C2;
  box-shadow: 0 0 0 3px rgba(252, 164, 144, .18);
}

.input[aria-invalid="true"] {
  border-color: #FFE3DA;
  box-shadow: 0 0 0 3px rgba(255, 227, 218, .14);
}

/* Keep browser autofill from painting inputs yellow/white */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--peach-100);
  -webkit-box-shadow: 0 0 0 100px #2A0505 inset;
  transition: background-color 9999s ease-out;
}

/* iOS zooms the page when a focused input is under 16px, which would
   break the no-scroll layout. Touch devices get 16px. */
@media (pointer: coarse) {
  .input { font-size: 16px; }
}

/* Divider — homepage only */
.divider {
  position: relative;
  width: min(340px, 80vw);
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(252, 164, 144, .35) 20%,
    rgba(252, 164, 144, .35) 80%,
    transparent);
}

.divider::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  height: 1px;
  margin-left: -70px;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 200, .95), transparent);
  animation: glint 6s ease-in-out infinite alternate;
}

@keyframes glint {
  from { transform: translateX(-40px); }
  to   { transform: translateX(40px); }
}

/* ---------- 6. Door page transition ---------- */
.doors {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
}
.doors.is-active,
html.doors-closed .doors { pointer-events: auto; }

.door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50vw + 1px);
  background-color: var(--red-800);
  background-image: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, .03) 0 1px,
    transparent 1px 3.5px,
    rgba(0, 0, 0, .07) 3.5px 7px);
  transition: transform var(--door-dur, 520ms) var(--door-ease, var(--ease-door-close));
  will-change: transform;
}

.door--left {
  left: 0;
  transform: translateX(-101%);
  border-right: 1px solid rgba(255, 190, 170, .5);
  box-shadow: inset -28px 0 40px -24px rgba(0, 0, 0, .5), 10px 0 40px rgba(20, 0, 0, .35);
}

.door--right {
  right: 0;
  transform: translateX(101%);
  border-left: 1px solid rgba(255, 190, 170, .5);
  box-shadow: inset 28px 0 40px -24px rgba(0, 0, 0, .5), -10px 0 40px rgba(20, 0, 0, .35);
}

.doors.is-closed .door,
html.doors-closed .door { transform: translateX(0); }

/* Arriving on a new page with the doors already shut: no animation. */
html.doors-closed .door { transition: none; }

/* Center seam glow */
.doors::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--coral-300);
  box-shadow: 0 0 14px 2px rgba(255, 255, 255, .55), 0 0 44px 10px rgba(255, 110, 90, .4);
  opacity: 0;
  transition: opacity .2s ease;
}

html.doors-closed .doors::after { opacity: .55; transition: none; }

.doors.seam-flash::after {
  animation: seam 180ms ease-out forwards;
}

@keyframes seam {
  from { opacity: 1;   background: var(--white); }
  to   { opacity: .55; background: var(--coral-300); }
}

/* ---------- 7. Entrance motion ---------- */
/* Mark leaf elements with [data-enter]. Never put [data-enter] on a
   wrapper around the wordmark: an animating parent would isolate the
   wordmark's blend mode. */
html.enter-pending [data-enter] { opacity: 0; }

html.entering [data-enter] {
  animation: enter 600ms var(--ease-out) both;
  animation-delay: calc(var(--enter-i, 0) * 70ms);
}
html.entering .wordmark[data-enter] { animation-duration: 700ms; }

@keyframes enter {
  from { opacity: 0; transform: translateY(8px); filter: blur(6px); }
  to   { opacity: var(--enter-opacity, 1); transform: none; filter: none; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain, .divider::after, html.no-webgl .bg-fallback::after { animation: none; }

  .door, .doors::after { display: none; }
  .doors {
    background: var(--red-800);
    opacity: 0;
    transition: opacity 200ms ease;
  }
  .doors.is-closed,
  html.doors-closed .doors { opacity: 1; }
  html.doors-closed .doors { transition: none; }

  html.entering [data-enter] { animation: enter-fade 300ms ease both; animation-delay: 0ms; }
  @keyframes enter-fade { from { opacity: 0; } to { opacity: var(--enter-opacity, 1); } }
}

/* ---------- Legibility scrims ----------
   A soft, local darkening behind text that sits over the brighter parts of
   the photo, so body copy holds WCAG 4.5:1 everywhere. The pseudo-elements
   sit at z-index -1 in the root layer: above the canvas, below all content. */
.lede, .label, .fineprint, .wl-intro { position: relative; }
.lede::before, .label::before, .fineprint::before, .wl-intro::before,
.back-link::after {
  content: "";
  position: absolute;
  inset: -36px -80px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(45, 6, 5, .42) 0%, rgba(45, 6, 5, .38) 30%, rgba(45, 6, 5, .28) 50%,
    rgba(45, 6, 5, .15) 68%, rgba(45, 6, 5, .06) 84%, transparent 100%);
}
.label::before, .fineprint::before { inset: -16px -48px; }
.lede::before {
  inset: -64px -130px;
  background: radial-gradient(closest-side,
    rgba(45, 6, 5, .5) 0%, rgba(45, 6, 5, .46) 30%, rgba(45, 6, 5, .36) 48%,
    rgba(45, 6, 5, .2) 66%, rgba(45, 6, 5, .08) 82%, transparent 100%);
}
.back-link::after { inset: -10px -18px; }

/* ==========================================================================
   Page: Home ( / )
   Measured from the 1440x1000 mock. Every vertical gap is min(px, vh) so it
   is exact at 1000px tall and shrinks proportionally on shorter screens.
   The big gap above "Join the waitlist" shrinks fastest.
   ========================================================================== */
.stage--home {
  justify-content: flex-start;
  /* mock sits ~40px below true center */
  padding-top: calc(max(24px, env(safe-area-inset-top)) + 8.2vh);
}
/* safe centering: centers when there's room, never overflows the top */
.stage--home > .hero { margin-top: auto; }
.stage--home > .join { margin-bottom: auto; }

.hero,
.join {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero .wordmark { margin-top: min(41px, 4.1vh); }
.hero .lede     { margin-top: min(40px, 4vh); }

.join           { margin-top: clamp(40px, calc(30.2vh - 110px), 192px); }
.join .divider  { margin-top: min(31px, 3.1vh); }
.join .copy     { margin-top: min(41px, 4.1vh); }
.join .btn      { margin-top: min(23px, 2.3vh); }
.join .fineprint { margin-top: min(22px, 2.2vh); }

/* ==========================================================================
   Shared: back link ("← BACK"), shake, field error
   ========================================================================== */
.back-link {
  position: absolute;
  top: max(33px, env(safe-area-inset-top));
  left: max(35px, env(safe-area-inset-left));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  isolation: isolate;
  padding: 4px 2px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--peach-100);
  transition: color .22s ease, text-shadow .22s ease;
}
.back-link svg { width: 16px; height: 16px; flex: none; transition: transform .22s ease; }
.back-link::before {
  content: "";
  position: absolute;
  inset: -60% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 210, 195, .3), transparent);
  filter: blur(8px);
  opacity: 0;
  transition: opacity .3s ease;
}
.back-link:focus-visible { color: var(--white); text-shadow: var(--glow); outline: 1px solid rgba(255, 255, 255, .6); outline-offset: 4px; }
.back-link:focus-visible::before { opacity: 1; }
@media (hover: hover) {
  .back-link:hover { color: var(--white); text-shadow: var(--glow); }
  .back-link:hover::before { opacity: 1; }
  .back-link:hover svg { transform: translateX(-3px); }
}
.back-link.is-off { display: none; }

.is-shaking { animation: shake 300ms ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  16%, 50%, 83% { transform: translateX(-4px); }
  33%, 66% { transform: translateX(4px); }
}

.field-error {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .04em;
  color: #FFE3DA;
}

/* ==========================================================================
   Page: Membership ( /membership )
   Measured from the 1440x1000 mock; gaps are min(px, vh).
   ========================================================================== */
.stage--membership {
  justify-content: flex-start;
  padding-top: calc(max(24px, env(safe-area-inset-top)) + 3vh);
}
.stage--membership > .wordmark { margin-top: auto; }
.stage--membership > .fineprint { margin-bottom: auto; }

.stage--membership > .wordmark { --wordmark-w: min(clamp(220px, 22.15vw, 325px), 32vh, 78vw); }
.stage--membership > .label      { margin-top: min(24px, 2.4vh); }
.card-stage                       { margin-top: min(80px, 8vh); }
.card-label                       { margin-top: min(21px, 2.1vh); }
.engrave                          { margin-top: min(12px, 1.2vh); }
.price                            { margin-top: min(79px, 7.9vh); }
.stage--membership > .btn         { margin-top: min(21px, 2.1vh); }
.stage--membership > .fineprint   { margin-top: min(21px, 2.1vh); }

.card-label {
  display: block;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--peach-100);
}

.engrave { position: relative; }
.engrave .field-error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  text-align: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.engrave .field-error.is-on { opacity: 1; transform: none; }

.price {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  color: var(--peach-200);
}

.fineprint--sm { font-size: 10px; font-weight: 500; letter-spacing: .04em; }

.checkout-note {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(28px, env(safe-area-inset-bottom));
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: #FFE3DA;
  opacity: 0;
  transition: opacity .3s ease;
}
.checkout-note.is-on { opacity: 1; }

/* ---------- The card ---------- */
/* .card-stage  — entrance + perspective
   .card-float  — idle float, and the size container for card units
   .member-card — tilt (set by membership.js) */
.card-stage {
  perspective: 1000px;
}

.card-float {
  width: min(clamp(280px, 26.45vw, 400px), 38vh, 82vw);
  min-width: min(240px, 82vw);
  container-type: inline-size;
  animation: card-float 6s ease-in-out infinite alternate;
}

@keyframes card-float {
  from { transform: translateY(-3px); }
  to   { transform: translateY(3px); }
}

.member-card {
  /* 1u = 1px at the 380px reference size; everything inside scales with the card */
  --u: calc(100cqw / 380);
  --sheen-x: 50%;
  position: relative;
  width: 100%;
  aspect-ratio: 380 / 240;
  border: 1px solid #000;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  text-align: left;
  text-shadow: none;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow: 0 30px 60px rgba(30, 0, 0, .55), 0 8px 18px rgba(0, 0, 0, .5);
  background:
    /* soft diagonal sheen — slides with the tilt */
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .06) 50%, transparent 70%) var(--sheen-x) 0 / 220% 100% no-repeat,
    /* brushed hairlines */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='240'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.002 .9' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3C/svg%3E") 0 0 / 100% 100%,
    /* lit from the center, falling off to the sides */
    radial-gradient(65% 130% at 50% 45%, #1A1A1A 0%, #141414 40%, #0B0B0B 78%, #080808 100%);
}

/* inner frame */
.member-card::after {
  content: "";
  position: absolute;
  inset: calc(8 * var(--u));
  border: 1px solid rgba(255, 255, 255, .1);
  border-top-color: rgba(255, 255, 255, .4);
  border-radius: calc(7 * var(--u));
  pointer-events: none;
}

.member-card__no,
.member-card__name,
.member-card__est {
  position: absolute;
  font-family: var(--font-sans);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .12);
}

.member-card__no {
  top: calc(19 * var(--u));
  left: calc(27 * var(--u));
  font-size: calc(9.5 * var(--u));
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #E6C6B9;
}

.member-card__center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
}

.card-mark {
  display: block;
  width: calc(121 * var(--u));
  height: auto;
  aspect-ratio: 675 / 90;
}

.member-card__tier {
  margin-top: calc(14 * var(--u));
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: calc(9 * var(--u));
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #C99F8B;
}

.member-card__name {
  left: calc(28 * var(--u));
  bottom: calc(22 * var(--u));
  max-width: calc(250 * var(--u));
  overflow: hidden;
  font-size: calc(var(--name-size, 14) * var(--u));
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #ECD3C4;
}
.member-card__name.is-placeholder { opacity: .75; }

.member-card__name .flash {
  animation: engrave-flash 260ms ease-out;
}
@keyframes engrave-flash {
  from { color: #FFF; text-shadow: 0 0 8px rgba(255, 255, 255, .9), 0 0 2px #fff; }
  to   { color: inherit; }
}

.member-card__est {
  right: calc(34 * var(--u));
  bottom: calc(23 * var(--u));
  font-size: calc(9 * var(--u));
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #C3AFA3;
}

@media (prefers-reduced-motion: reduce) {
  .card-float { animation: none; }
  .is-shaking { animation: none; }
}

/* ==========================================================================
   Page: Waitlist ( /waitlist )
   Measured from the 1440x1000 mock. Top-anchored: the form sits mid-screen
   over the basket.
   ========================================================================== */
.stage--waitlist {
  justify-content: flex-start;
  padding-top: max(24px, env(safe-area-inset-top), 16vh);
}
.stage--waitlist > .wordmark { --wordmark-w: min(clamp(220px, 22.15vw, 325px), 32vh, 78vw); }
.stage--waitlist > .label    { margin-top: min(22px, 2.2vh); }
.wl-intro                    { margin-top: clamp(48px, 12.9vh, 129px); }
.wl-slot                     { margin-top: min(19px, 1.9vh); }
.wl-skip                     { margin-top: min(17px, 1.7vh); }

.wl-slot {
  position: relative;
  width: var(--control-w);
}

.wl-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
  transition: opacity 240ms ease;
}
.wl-form .btn--block { width: 100%; }
.wl-form .input { width: 100%; }

.wl-form .btn.is-sending { opacity: .8; cursor: default; }

.wl-error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  text-align: center;
  opacity: 0;
  transition: opacity .2s ease;
}
.wl-error.is-on { opacity: 1; }
/* make room for the error so it never crowds "Skip the line" */
.wl-skip { transition: color .22s ease, text-shadow .22s ease, text-decoration-color .22s ease, translate .25s var(--ease-out); }
.wl-slot.has-error + .wl-skip { translate: 0 14px; }

.wl-done {
  position: absolute;
  inset: 0 -40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 320ms ease, visibility 0s linear 320ms;
}
.wl-done .copy { max-width: 380px; text-wrap: balance; }

.wl-slot.is-done .wl-form { opacity: 0; visibility: hidden; transition: opacity 240ms ease, visibility 0s linear 240ms; }
.wl-slot.is-done .wl-done { opacity: 1; visibility: visible; transition: opacity 320ms ease 240ms, visibility 0s; }
/* Already on the list when the page loads: no fade. */
.wl-slot.is-done.is-instant .wl-form,
.wl-slot.is-done.is-instant .wl-done { transition: none; }

/* ---------- Small screens ---------- */
@media (max-width: 600px) {
  .back-link { top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); }
  .wl-intro { margin-top: 48px; }
  .br-lg { display: none; }
}

@media (max-width: 480px) {
  .lede { font-size: 16px; }
  .copy { font-size: 15px; }
  .price { font-size: 15px; }
}

/* Shared top navigation */
:root { --nav-height: 80px; }
html, body { overflow-y: auto; }
.site-nav {
  position: relative;
  z-index: 2;
  min-height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 64px);
  padding: max(16px, env(safe-area-inset-top)) 24px 16px;
  background: linear-gradient(rgba(58, 10, 8, .45), transparent);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  color: #E0907E;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-decoration: none;
  transition: color .22s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--peach-100); text-decoration: none; }
.site-nav a:focus-visible { outline: 1px solid var(--white); outline-offset: 4px; color: var(--white); }
.site-nav + .stage {
  height: auto;
  min-height: calc(100vh - var(--nav-height));
  min-height: calc(100dvh - var(--nav-height));
}
.site-nav + .stage .sg-title { position: static; margin-bottom: 32px; text-align: center; }
@media (max-width: 600px) {
  :root { --nav-height: 116px; }
  .site-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 12px;
    padding: max(12px, env(safe-area-inset-top)) 20px 12px;
  }
  .site-nav a { font-size: 11px; text-align: center; }
}