body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font-main);
  overflow-x: hidden;
}

.page-home { overflow: hidden; }
.page-home .site-footer { display: none; }

.hero {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-guestlist-link[hidden] { display: none; }

.hero-guestlist-link {
  position: absolute;
  left: 50%;
  top: clamp(72px, 18vh, 180px);
  z-index: 3;
  min-height: 52px;
  max-width: calc(100vw - (var(--gutter) * 2));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 22px 6px 6px;
  border: 2px solid var(--black);
  background: var(--green);
  color: var(--black);
  font-size: 11px;
  font-weight: var(--fw-semi);
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 3px 3px 0 var(--black);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero-guestlist-link:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 5px 5px 0 var(--black);
  }
}
/* Press collapses the offset block into the slab — the same gesture the
   hard shadow implies. */
.hero-guestlist-link:active {
  transform: translateX(-50%) translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--black);
}
.hero-guestlist-link-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--green);
}
.hero-guestlist-link-label {
  position: static;
}
.hero-guestlist-link:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 5px;
}
.hero-instruction { position:absolute; z-index:2; top:50%; left:50%; transform:translate(-50%,-50%); color:var(--black); font-size:11px; font-weight:var(--fw-semi); text-transform:uppercase; letter-spacing:.22em; pointer-events:none; transition:opacity .3s; }
.hero-instruction.is-dismissed { opacity:0; }

#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* Static stand-in when WebGL is unavailable — same badge language as nav/footer */
.hero-fallback {
  display: flex;
  gap: 18px;
  text-decoration: none;
  z-index: 1;
}
.hero-fallback span {
  width: clamp(72px, 14vw, 140px);
  height: clamp(72px, 14vw, 140px);
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-main);
  font-weight: var(--fw-semi);
  font-size: clamp(24px, 4.6vw, 46px);
  color: var(--white);
}

/* Visually hidden, keyboard reachable */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.calm-mode-toggle {
  position: absolute;
  top: 20px;
  right: var(--gutter);
  z-index: 3;
  background: transparent;
  border: 1px solid rgba(0,0,0,0.55);
  border-radius: 999px;
  color: var(--black);
  font-family: var(--font-main);
  font-weight: var(--fw-semi);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.calm-mode-toggle:hover {
  border-color: var(--black);
  color: var(--black);
}
.calm-mode-toggle[aria-pressed="true"] {
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}

.is-99-mode .calm-mode-toggle { color: var(--white); border-color: rgba(255,255,255,.72); }

.experience-gate[hidden] { display:none; }
.experience-gate { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:var(--black); padding:max(24px, env(safe-area-inset-top)) var(--gutter); }
.experience-gate__panel { width:min(650px,100%); border:1px solid rgba(255,255,255,.35); padding:clamp(24px,6vw,64px); background:var(--black); }
.experience-gate__eyebrow { margin:0 0 28px; color:var(--orange); font-size:10px; font-weight:var(--fw-semi); letter-spacing:.2em; text-transform:uppercase; }
.experience-gate h1 { max-width:9ch; margin:0; font-size:clamp(44px,9vw,100px); line-height:.84; letter-spacing:-.06em; text-transform:uppercase; }
.experience-gate__panel > p:not(.experience-gate__eyebrow) { max-width:32ch; margin:28px 0 0; color:rgba(255,255,255,.68); }
.experience-gate__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:42px; }
.experience-gate button { min-height:48px; padding:12px 20px; border:1px solid var(--white); color:var(--black); background:var(--white); font:inherit; font-size:10px; font-weight:var(--fw-semi); letter-spacing:.14em; text-transform:uppercase; transition:opacity .15s var(--ease-out); }
.experience-gate button + button { color:var(--white); background:var(--black); }
.experience-gate button:active { opacity:.7; }

/* Stacked, the two choices sat at different intrinsic widths with mismatched
   borders — a ragged right edge on the first thing anyone sees. */
@media (max-width: 640px) {
  .experience-gate__actions { flex-wrap:nowrap; flex-direction:column; align-items:stretch; }
  .experience-gate button { width:100%; }
}

/* Landscape phones have no room for a 100dvh-tall gate panel. */
@media (max-height: 520px) {
  .experience-gate { place-items:start center; overflow-y:auto; }
  .experience-gate__panel { padding:24px; }
  .experience-gate h1 { font-size:clamp(32px,7vw,52px); }
  .experience-gate__panel > p:not(.experience-gate__eyebrow) { margin-top:16px; }
  .experience-gate__actions { margin-top:24px; }
  .experience-gate__eyebrow { margin-bottom:16px; }
}