:root {
  --bg-0: #000000;
  --bg-1: #040404;
  --bg-2: #090909;
  --panel: rgba(8, 8, 8, 0.7);
  --panel-strong: rgba(7, 7, 7, 0.92);
  --line: rgba(255,255,255,0.12);
  --line-strong: rgba(255,255,255,0.26);
  --text: #f5f1ed;
  --text-soft: rgba(245, 241, 237, 0.78);
  --text-faint: rgba(245, 241, 237, 0.48);
  --metal-1: #ffffff;
  --metal-2: #ddd5cf;
  --metal-3: #918983;
  --accent: rgba(255,255,255,0.75);
  --shadow-strong: 0 30px 90px rgba(0,0,0,.72);
}

* { box-sizing: border-box; }
html {
  min-height: 100%;
  max-width: 100%;
  overflow-x: clip;
  background: #000;
}
body {
  margin: 0;
  width: 100%;
  min-height: 100svh;
  overflow-x: clip;
  color: var(--text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: progress; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.page {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(90vw 70vh at 50% -12%, rgba(255,255,255,.065) 0%, rgba(255,255,255,.015) 28%, transparent 55%),
    radial-gradient(60vw 44vh at 90% 12%, rgba(255,255,255,.04) 0%, transparent 60%),
    radial-gradient(80vw 46vh at 0% 100%, rgba(255,255,255,.04) 0%, transparent 58%),
    linear-gradient(180deg, #050505 0%, #010101 46%, #000000 100%);
}

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.atmosphere::before,
.atmosphere::after {
  content: "";
  position: absolute;
  inset: -10%;
}
.atmosphere::before {
  background:
    linear-gradient(103deg, transparent 0 27%, rgba(255,255,255,.018) 31%, rgba(255,255,255,.09) 32.5%, rgba(255,255,255,.018) 34%, transparent 37%),
    linear-gradient(77deg, transparent 0 61%, rgba(255,255,255,.018) 66%, rgba(255,255,255,.085) 67.5%, rgba(255,255,255,.018) 69%, transparent 73%);
  opacity: .92;
  filter: blur(0.4px);
}
.atmosphere::after {
  background: radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0,0,0,.2) 74%, rgba(0,0,0,.62) 100%);
}
.atmosphere__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  opacity: .32;
}
.atmosphere__glow--one {
  width: 68vw;
  height: 28vh;
  top: -6%;
  left: 16%;
  background: radial-gradient(ellipse, rgba(255,255,255,.18) 0%, rgba(74,74,74,.06) 40%, transparent 72%);
}
.atmosphere__glow--two {
  width: 58vw;
  height: 28vh;
  bottom: -10%;
  right: -2%;
  background: radial-gradient(ellipse, rgba(255,255,255,.14) 0%, rgba(68,68,68,.06) 38%, transparent 70%);
}

.latex {
  position: absolute;
  pointer-events: none;
  filter: saturate(.55) contrast(1.18);
  opacity: .95;
}
.latex--left {
  left: -23vw;
  top: -10vh;
  width: clamp(340px, 40vw, 720px);
  height: 138vh;
  transform: rotate(-16deg);
  border-radius: 46% 53% 48% 57% / 52% 42% 56% 48%;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,0) 0%,
      rgba(7,7,7,1) 10%,
      rgba(18,18,18,1) 18%,
      rgba(108,108,108,.82) 22%,
      rgba(245,245,245,.30) 24%,
      rgba(70,70,70,.85) 26%,
      rgba(12,12,12,1) 29%,
      rgba(2,2,2,1) 34%,
      rgba(30,30,30,1) 50%,
      rgba(126,126,126,.65) 54%,
      rgba(18,18,18,1) 57%,
      rgba(1,1,1,1) 72%,
      rgba(0,0,0,.92) 100%);
  box-shadow:
    inset -24px 0 48px rgba(255,255,255,.06),
    inset 12px 0 12px rgba(255,255,255,.025),
    18px 0 80px rgba(0,0,0,.75);
}
.latex--right {
  right: -24vw;
  top: -8vh;
  width: clamp(380px, 44vw, 760px);
  height: 136vh;
  transform: rotate(19deg);
  border-radius: 42% 57% 52% 58% / 45% 58% 44% 61%;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.96) 0%,
      rgba(7,7,7,1) 13%,
      rgba(38,38,38,.98) 22%,
      rgba(209,209,209,.25) 26%,
      rgba(255,255,255,.54) 28%,
      rgba(68,68,68,.95) 30%,
      rgba(8,8,8,1) 34%,
      rgba(0,0,0,1) 48%,
      rgba(18,18,18,1) 62%,
      rgba(168,168,168,.32) 68%,
      rgba(24,24,24,1) 72%,
      rgba(0,0,0,1) 82%,
      rgba(6,6,6,.98) 100%);
  box-shadow:
    inset 26px 0 56px rgba(255,255,255,.055),
    inset -12px 0 12px rgba(255,255,255,.024),
    -25px 0 90px rgba(0,0,0,.75);
}
.latex--bottom {
  left: -12vw;
  bottom: -29vh;
  width: 124vw;
  height: 46vh;
  transform: rotate(5deg);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 12%, rgba(27,27,27,.10) 24%, transparent 66%);
  box-shadow: 0 -25px 140px rgba(0,0,0,.55);
}
.noise {
  position: absolute;
  inset: 0;
  opacity: .038;
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.65) 2.2px, transparent 3px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.25) 3.2px, transparent 4px);
}

.centerstage {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 58px 22px;
}
.member-gate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: min(100%, 620px);
  padding: clamp(28px, 4vw, 40px);
  animation: entrance 950ms cubic-bezier(.18,.7,.19,1) both;
}
.member-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: 36px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.085) 0%, rgba(255,255,255,.014) 18%, rgba(0,0,0,.16) 38%, rgba(255,255,255,.03) 64%, rgba(255,255,255,.09) 100%),
    radial-gradient(circle at 50% 8%, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(180deg, rgba(10,10,10,.62) 0%, rgba(3,3,3,.88) 50%, rgba(4,4,4,.72) 100%);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -18px 32px rgba(0,0,0,.48),
    0 50px 120px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.018);
  backdrop-filter: blur(12px);
}
.member-gate::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 9px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  z-index: -1;
}

.crest {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 0 30px;
  color: rgba(255,255,255,.82);
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,.06))
    drop-shadow(0 0 45px rgba(255,255,255,.03));
}
.crest svg { width: 100%; height: 100%; display: block; }

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  line-height: 1;
}
.wordmark__main {
  margin-left: .18em;
  font-family: "Didot", "Bodoni MT", "Times New Roman", Georgia, serif;
  font-size: clamp(72px, 10vw, 110px);
  font-weight: 400;
  letter-spacing: .20em;
  color: transparent;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7f4f0 16%, #cdc4bd 46%, #ffffff 58%, #8f8882 87%, #f0ebe6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 42px rgba(255,255,255,.085);
}
.wordmark__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
  margin-top: 18px;
  padding-left: .45em;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .6em;
  color: rgba(244,240,236,.86);
  text-transform: uppercase;
}
.wordmark__sub span {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.wordmark__sub span:last-child { transform: rotate(180deg); }

.access-line {
  margin: 36px 0 28px;
  max-width: 420px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: .35em;
  text-transform: uppercase;
}

.gate-form {
  width: 100%;
  max-width: 390px;
}
.pin-shell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  height: 68px;
  overflow: hidden;
  padding: 0 20px 0 23px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 10%, rgba(0,0,0,.22) 18%, rgba(12,12,12,.93) 46%, rgba(40,40,40,.72) 100%),
    linear-gradient(125deg, rgba(255,255,255,.10), rgba(255,255,255,.018) 22%, rgba(0,0,0,.04) 44%, rgba(255,255,255,.045) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -18px 22px rgba(0,0,0,.52),
    0 20px 45px rgba(0,0,0,.50),
    0 0 0 1px rgba(255,255,255,.025);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pin-shell::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 1px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.02), transparent);
  opacity: .95;
}
.pin-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255,255,255,.06) 48%, transparent 56%);
  opacity: .75;
  pointer-events: none;
}
.pin-shell:focus-within {
  border-color: rgba(255,255,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -18px 22px rgba(0,0,0,.48),
    0 0 0 4px rgba(255,255,255,.05),
    0 24px 50px rgba(0,0,0,.56);
}
.pin-shell__key {
  color: rgba(255,255,255,.58);
  flex: 0 0 18px;
  height: 18px;
}
.pin-shell__key svg { width: 100%; height: 100%; display: block; }
.pin-shell input {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  outline: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.96);
  font-size: 14px;
  letter-spacing: .28em;
  -webkit-text-security: disc;
}
.pin-shell input::placeholder {
  color: rgba(255,255,255,.33);
  font-size: 10px;
  letter-spacing: .28em;
  -webkit-text-security: none;
  opacity: 1;
}
.pin-shell input[aria-invalid="true"] { color: #e5c4c4; }
.pin-shell__flare {
  position: absolute;
  top: -10%;
  right: -12px;
  width: 95px;
  height: 120%;
  transform: skewX(-28deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  opacity: .75;
}

.enter-button {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 62px;
  margin-top: 14px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  color: #fbf8f5;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 11%, rgba(0,0,0,.12) 17%, rgba(13,13,13,.95) 48%, rgba(49,49,49,.80) 100%),
    linear-gradient(130deg, rgba(255,255,255,.12), rgba(255,255,255,.02) 24%, rgba(255,255,255,.08) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -18px 24px rgba(0,0,0,.58),
    0 20px 45px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.025);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.enter-button::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transition: transform .7s ease;
}
.enter-button:hover::before,
.enter-button:focus-visible::before {
  transform: translateX(120%) skewX(-24deg);
}
.enter-button:hover,
.enter-button:focus-visible {
  border-color: rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -18px 24px rgba(0,0,0,.54),
    0 22px 52px rgba(0,0,0,.56),
    0 0 18px rgba(255,255,255,.055);
}
.enter-button:active { transform: translateY(1px); }
.enter-button:focus-visible {
  outline: 2px solid rgba(255,255,255,.55);
  outline-offset: 4px;
}
.enter-button__label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .38em;
  padding-left: .38em;
  text-transform: uppercase;
}
.enter-button__arrow {
  position: absolute;
  right: 24px;
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.66);
}
.enter-button--loading .enter-button__label { opacity: .5; }
.enter-button--loading .enter-button__arrow { animation: loading 1s linear infinite; }

.access-status {
  min-height: 20px;
  margin: 18px 0 0;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .22em;
  color: #d1b6b6;
  opacity: 0;
  transition: opacity .2s ease;
  text-transform: uppercase;
}
.access-status--visible { opacity: 1; }

.member-gate--inside .access-line { margin-bottom: 20px; }
.enter-button--logout {
  max-width: 250px;
  margin-top: 18px;
}
.enter-button--logout .enter-button__arrow {
  left: 24px;
  right: auto;
}

@keyframes entrance {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.985);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}
@keyframes loading { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .centerstage { padding: 36px 18px 52px; }
  .member-gate { width: min(100%, 100%); padding: 28px 18px 24px; }
  .member-gate::before { border-radius: 28px; }
  .crest { width: 72px; height: 72px; margin-bottom: 28px; }
  .wordmark__main {
    font-size: clamp(58px, 16vw, 78px);
    letter-spacing: .16em;
    margin-left: .14em;
  }
  .wordmark__sub {
    margin-top: 14px;
    font-size: 10px;
    letter-spacing: .44em;
    gap: 12px;
    padding-left: .3em;
  }
  .wordmark__sub span { width: 36px; }
  .access-line {
    margin: 28px 0 24px;
    font-size: 10px;
    letter-spacing: .25em;
  }
  .pin-shell,
  .enter-button { height: 60px; }
  .latex--left { left: -58vw; opacity: .72; }
  .latex--right { right: -60vw; opacity: .72; }
}
@media (max-height: 680px) {
  .centerstage { padding-top: 22px; padding-bottom: 22px; }
  .crest { width: 60px; height: 60px; margin-bottom: 18px; }
  .access-line { margin: 22px 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}