@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&display=swap");

:root { --black:#020202; --ivory:#eee8db; --muted:#92897b; --copper:#a35e37; --light:#d18e61; }
* { box-sizing:border-box; }
html { background:var(--black); color-scheme:dark; }
body { margin:0; background:var(--black); color:var(--ivory); font-family:"Playfair Display"; }
button,input { font:inherit; }
.landing,.welcome { position:relative; display:grid; min-height:100vh; min-height:100svh; overflow:hidden; place-items:center; isolation:isolate; background:radial-gradient(circle at 50% 44%,#3f241415,transparent 32rem),linear-gradient(135deg,#000,#080706 50%,#000); }
.landing::before,.landing::after,.welcome::before,.welcome::after { position:absolute; z-index:-1; width:min(24vw,18rem); height:1px; content:""; background:linear-gradient(90deg,transparent,#ce8b5e52); }
.landing::before,.welcome::before { top:2rem; left:2rem; }
.landing::after,.welcome::after { right:2rem; bottom:2rem; transform:rotate(180deg); }
.texture { position:fixed; z-index:-1; inset:0; opacity:.12; 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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); }
.sanctum { display:flex; width:min(100%,58rem); min-height:100vh; min-height:100svh; padding:clamp(2rem,5vh,4.5rem) 1.5rem; flex-direction:column; align-items:center; justify-content:center; }
header { display:grid; text-align:center; justify-items:center; animation:reveal 1.2s cubic-bezier(.16,1,.3,1) both; }
header p,.welcome p { margin:0; color:var(--light); font-size:.65rem; letter-spacing:.34em; text-transform:uppercase; }
h1 { max-width:none; margin:.8rem 0 0; font-size:clamp(.75rem,3.2vw,3.35rem); font-weight:400; letter-spacing:.04em; line-height:1.15; white-space:nowrap; text-shadow:0 1px 2rem #e0ba9424; }
.ornament { display:flex; width:8rem; margin-top:1.2rem; align-items:center; gap:.6rem; color:var(--copper); font-size:.45rem; }
.ornament i { width:100%; height:1px; background:linear-gradient(90deg,transparent,currentColor); }
.ornament i:last-child { transform:rotate(180deg); }
.emblem { position:relative; display:grid; width:min(64vw,25rem); margin:clamp(1.2rem,3vh,2rem) 0; aspect-ratio:750/726; place-items:center; filter:drop-shadow(0 1.5rem 2rem #000b); animation:emblem 1.5s .15s cubic-bezier(.16,1,.3,1) both; }
.emblem img { display:block; width:100%; height:auto; border-radius:50%; mix-blend-mode:screen; }
.emblem span { position:absolute; inset:8%; border:1px solid #ce8b5e26; border-radius:50%; box-shadow:0 0 2.2rem #ce8b5e14; animation:pulse 5s ease-in-out infinite; }
.access { display:grid; width:min(100%,23rem); grid-template-rows:auto 0fr; animation:reveal 1.2s .45s cubic-bezier(.16,1,.3,1) both; transition:grid-template-rows .65s cubic-bezier(.16,1,.3,1); }
.access.open { grid-template-rows:auto 1fr; }
.member,.enter { position:relative; overflow:hidden; min-height:3.35rem; border:1px solid #ce8b5e8c; color:var(--ivory); cursor:pointer; letter-spacing:.17em; text-transform:uppercase; }
.member { padding:.8rem 1.4rem; background:#040302b8; font-size:.72rem; transition:.35s ease; }
.member:hover,.member:focus-visible { border-color:var(--light); box-shadow:0 0 2rem #9b5a3521; }
.access.open .member { border-color:#ce8b5e2e; color:var(--muted); cursor:default; }
.panel { overflow:hidden; }
form { display:grid; padding-top:1.4rem; gap:.8rem; opacity:0; transform:translateY(-.6rem); transition:opacity .45s .16s,transform .5s .12s; }
.open form { opacity:1; transform:none; }
label { color:var(--muted); font-size:.63rem; letter-spacing:.22em; text-transform:uppercase; }
input { width:100%; height:3.25rem; border:0; border-bottom:1px solid #ce8b5e73; border-radius:0; background:#ffffff07; color:var(--ivory); caret-color:var(--light); letter-spacing:.14em; text-align:center; }
.enter { margin-top:.25rem; padding:.75rem 1rem; border-color:#fff; background:#fff; color:#020202; font-size:.66rem; transition:background-color .4s ease,color .4s ease; }
.enter:hover,.enter:focus-visible { background:#020202; color:#fff; }
.member:focus-visible,.enter:focus-visible,input:focus-visible { outline:1px solid var(--ivory); outline-offset:4px; }
.error { min-height:1rem; margin:.1rem 0 0; color:#c69378; font-size:.72rem; text-align:center; }
.welcome section { display:grid; padding:2rem; text-align:center; justify-items:center; animation:reveal 1.5s both; }
.welcome h1 { margin:1rem 0 0; font-size:clamp(1rem,5vw,5rem); letter-spacing:.04em; white-space:nowrap; }
@keyframes reveal { from { opacity:0; transform:translateY(1rem); } }
@keyframes emblem { from { opacity:0; transform:scale(.94); filter:blur(4px) drop-shadow(0 1.5rem 2rem #000b); } }
@keyframes pulse { 50% { opacity:.4; transform:scale(1.025); } }
@media (max-height:760px) and (min-width:600px) { .sanctum{padding-block:1.25rem}.emblem{width:min(42vh,20rem);margin-block:.8rem} }
@media (max-width:480px) { .sanctum{padding-inline:1.2rem}.emblem{width:min(84vw,22rem)}h1{letter-spacing:.04em} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }