:root { color-scheme: dark; --white: #f2f0ed; --dim: rgba(242,240,237,.46); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow: hidden; overscroll-behavior: none; background: #030306; }
body { color: var(--white); font-family: Inter, sans-serif; }
.landing { position: relative; width: 100%; height: 100vh; height: 100svh; min-height: 520px; isolation: isolate; background: radial-gradient(circle at 66% 38%, #101018 0, #06060a 35%, #030306 72%); }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
body:not(.fx) .field { display: none; }
.noise { position: absolute; inset: 0; z-index: 2; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); }
.topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; padding: max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 24px max(24px,env(safe-area-inset-left)); }
.monogram { display: block; opacity: .85; transition: opacity .3s, transform .3s; }
.monogram img { display: block; width: 40px; height: auto; }
.monogram:hover { opacity: 1; transform: translateY(-1px); }
.identity { position: absolute; z-index: 3; inset: 16% 5% 17%; display: grid; place-items: center; pointer-events: none; }
.wordmark { width: min(82vw, 1340px); aspect-ratio: 749/74; filter: drop-shadow(0 0 34px rgba(255,255,255,.05)); opacity: 0; animation: markIn .9s ease .9s forwards; }
.wordmark img { width: 100%; height: 100%; display: block; filter: invert(1) brightness(.94); }
body.fx .wordmark { visibility: hidden; }
body:not(.fx) .hint { display: none; }
@keyframes markIn { to { opacity: .92; } }
.footer { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 24px max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); display: flex; align-items: flex-end; justify-content: space-between; }
.descriptor p { margin: 0; font: 300 clamp(21px,2.2vw,37px)/1.05 Manrope,sans-serif; letter-spacing: -.045em; }
.invitation { min-width: clamp(170px,17vw,260px); color: var(--white); text-decoration: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid rgba(255,255,255,.2); background: rgba(9,9,18,.4); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); font-size: 10px; letter-spacing: .25em; text-transform: uppercase; transition: border-color .3s, background .3s, box-shadow .3s; }
.invitation i { font: normal 15px serif; transition: transform .3s; }
.invitation:hover { border-color: rgba(155,141,255,.65); background: rgba(124,108,255,.12); box-shadow: 0 0 28px rgba(124,108,255,.2); }
.invitation:hover i { transform: translate(3px,-3px); }
.hint { position: absolute; z-index: 4; right: clamp(24px,3.4vw,54px); top: 50%; margin: 0; transform: rotate(90deg) translateX(50%); transform-origin: right top; color: rgba(255,255,255,.18); font-size: 7px; letter-spacing: .28em; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Access — introduction-only membership statement */
html.page, html.page body { overflow: auto; }
.landing--page { height: auto; min-height: 100svh; }
.access { position: relative; z-index: 3; min-height: 100svh; display: grid; place-items: center; padding: clamp(96px, 14vh, 150px) max(24px, 6vw); }
.access__panel { max-width: 34em; }
.access__kicker { display: block; color: #9b8dff; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 30px; }
.access h1 { margin: 0 0 22px; font: 300 clamp(28px, 3.4vw, 44px)/1.12 Manrope, sans-serif; letter-spacing: -.03em; }
.access p { margin: 0 0 16px; color: rgba(242,240,237,.78); font-size: 15px; line-height: 1.65; }
.access p:last-of-type { color: rgba(242,240,237,.56); }
.access__return { display: inline-block; margin-top: 36px; color: var(--white); text-decoration: none; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.26); padding-bottom: 10px; transition: border-color .3s; }
.access__return:hover { border-color: #9b8dff; }
@media (min-width: 900px) { .topbar,.footer { padding-left: clamp(32px,3.4vw,54px); padding-right: clamp(32px,3.4vw,54px); }.topbar { padding-top: clamp(32px,3.4vw,54px); }.footer { padding-bottom: clamp(32px,3.4vw,54px); } }
@media (max-width: 650px) {
  .landing { min-height: 440px; background: radial-gradient(circle at 65% 40%,#11111a 0,#06060a 38%,#030306 76%); }
  .identity { inset: 8% 0 27%; }
  .wordmark { width: 94vw; }
  .hint { display:none; }
  .footer { align-items: flex-end; gap: 22px; }
  .descriptor p { font-size: clamp(18px,5.4vw,22px); line-height: 1.08; }
  .invitation { min-width: 128px; width: 42vw; max-width: 170px; font-size: 8px; letter-spacing: .2em; padding: 12px 14px; }
  .monogram img { width: 34px; }
}
@media (max-width: 360px) { .topbar,.footer { padding-left: 18px; padding-right: 18px; }.footer { gap: 14px; }.descriptor p { font-size: 17px; }.invitation { min-width: 108px; } }
@media (max-height: 520px) and (orientation: landscape) { .landing { min-height: 320px; }.identity { inset: 8% 8% 18%; }.wordmark { width: min(68vw,900px); }.descriptor p { font-size: 17px; }.topbar { padding-top: 18px; }.footer { padding-bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .wordmark { opacity: .92; animation: none; } }
