/* SELAS FEATURED — hub landing, shared shell.
   One screen, never scrolls. Tokens are the brand booklet's, unchanged.
   Ratio held: black 85, gold 8, cream 7. */

:root{
  --black:#0b0b0e;--black-2:#111116;--black-3:#17171d;
  --gold:#c2a05f;--gold-bright:#e8c987;--gold-dim:#8d7548;
  --cream:#ece7dc;--gray:#8f8a7e;--gray-dim:#5b5850;
  --line:rgba(194,160,95,.22);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--black);color:var(--cream);
  font-family:var(--sans);font-weight:300;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;               /* the page itself never scrolls */
}
::selection{background:var(--gold);color:var(--black);}
a{color:inherit;}

/* The Beam: the one motif that ties every surface together. */
.beam{
  position:fixed;top:-20vh;left:50%;transform:translateX(-50%);
  width:min(92vw,760px);height:120vh;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 50% 45% at 50% 20%,rgba(194,160,95,.13),transparent 70%);
  animation:beamBreathe 7s ease-in-out infinite;
}
@keyframes beamBreathe{0%,100%{opacity:.7;}50%{opacity:1;}}

/* ---- one-screen shell ---- */
.shell{
  position:relative;z-index:1;
  height:100dvh;display:flex;flex-direction:column;
  padding:max(22px,3.2vh) 22px max(16px,2.2vh);
  gap:2vh;
}
.shell > main{
  flex:1;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}

/* ---- wordmark ---- */
nav{display:flex;justify-content:center;flex:0 0 auto;}
.wordmark{display:inline-flex;align-items:baseline;gap:.5em;white-space:nowrap;max-width:100%;}
.wm-main{font-weight:500;font-size:13px;letter-spacing:.45em;text-indent:.45em;color:var(--gold);text-transform:uppercase;}
.wm-sub{font-weight:400;font-size:10px;letter-spacing:.2em;text-indent:.2em;color:var(--gray);text-transform:uppercase;}
@media (max-width:400px){
  .wm-main{letter-spacing:.3em;text-indent:.3em;}
  .wm-sub{letter-spacing:.15em;text-indent:.15em;}
}

/* ---- type ---- */
.eyebrow{
  font-size:clamp(9.5px,2.6vw,11px);letter-spacing:.4em;text-indent:.4em;
  text-transform:uppercase;color:var(--gray);
}
h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(34px,min(8.4vw,7.4vh),68px);
  line-height:1.08;letter-spacing:.01em;
}
h1 .lit{
  font-style:italic;font-weight:400;
  background:linear-gradient(100deg,var(--gold) 38%,var(--gold-bright) 50%,var(--gold) 62%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold);
  animation:shimmer 6s ease-in-out infinite 1.4s;
}
@keyframes shimmer{0%{background-position:120% 0;}55%,100%{background-position:-60% 0;}}
.sub{
  max-width:46ch;color:var(--gray);
  font-size:clamp(13px,min(3.6vw,2.1vh),15.5px);line-height:1.7;
}

/* ---- buttons ---- */
.btn{
  display:inline-block;cursor:pointer;border:1px solid var(--gold);background:transparent;
  color:var(--gold);font-family:var(--sans);font-size:clamp(10.5px,2.7vw,12px);font-weight:500;
  letter-spacing:.3em;text-indent:.3em;text-transform:uppercase;
  padding:clamp(14px,1.9vh,19px) clamp(24px,6vw,42px);
  transition:background .35s ease,color .35s ease,border-color .35s ease;
  text-decoration:none;text-align:center;
}
.btn:hover,.btn:focus-visible{background:var(--gold);color:var(--black);outline:none;}
.btn.solid{background:var(--gold);color:var(--black);}
.btn.solid:hover,.btn.solid:focus-visible{background:var(--cream);border-color:var(--cream);}
.btn.ghost{border-color:rgba(236,231,220,.22);color:var(--gray);}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--cream);background:transparent;color:var(--cream);}

/* ---- footer ---- */
footer{
  flex:0 0 auto;text-align:center;color:var(--gray-dim);
  font-size:clamp(9.5px,2.4vw,11px);letter-spacing:.16em;
}
footer a{color:var(--gray-dim);text-decoration:none;}
footer a:hover{color:var(--gold);}

/* ---- live dot ---- */
.dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gold);margin-right:9px;vertical-align:middle;
  box-shadow:0 0 0 0 rgba(194,160,95,.55);animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(194,160,95,.5);}
  70%{box-shadow:0 0 0 7px rgba(194,160,95,0);}
  100%{box-shadow:0 0 0 0 rgba(194,160,95,0);}
}

/* ---- entrance ---- */
.rise{opacity:0;animation:riseIn .9s cubic-bezier(.2,.6,.2,1) forwards;}
.rise.d1{animation-delay:.12s;}
.rise.d2{animation-delay:.28s;}
.rise.d3{animation-delay:.44s;}
.rise.d4{animation-delay:.6s;}
@keyframes riseIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

/* =========================================================
   WAITING LIST OVERLAY (shared by all three layouts)
   ========================================================= */
.ov{
  position:fixed;inset:0;z-index:60;background:var(--black);
  display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s;
}
.ov.open{opacity:1;visibility:visible;}
.ov-top{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:22px 22px 0;
}
.ov-close{
  background:none;border:none;color:var(--gray);font-size:26px;line-height:1;
  cursor:pointer;padding:4px 8px;
}
.ov-close:hover{color:var(--cream);}
.ov-body{
  flex:1;min-height:0;overflow-y:auto;   /* only the form may scroll, never the page */
  display:flex;flex-direction:column;justify-content:center;
  padding:4vh 22px;
}
.ov-inner{width:100%;max-width:440px;margin:0 auto;}
.ov h2{
  font-family:var(--serif);font-weight:300;font-size:clamp(26px,7vw,36px);
  line-height:1.15;margin-bottom:12px;
}
.ov .lede{color:var(--gray);font-size:14px;margin-bottom:30px;max-width:40ch;}
.field{margin-bottom:16px;}
.field label{
  display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gray);margin-bottom:9px;
}
.field input,.field select{
  width:100%;background:var(--black-2);border:1px solid rgba(236,231,220,.13);
  color:var(--cream);font-family:var(--sans);font-weight:300;font-size:16px;
  padding:15px 16px;transition:border-color .3s ease;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--gold);}
.field input::placeholder{color:var(--gray-dim);}
.field select{appearance:none;background-image:none;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.handle-wrap{display:flex;align-items:center;background:var(--black-2);border:1px solid rgba(236,231,220,.13);}
.handle-wrap:focus-within{border-color:var(--gold);}
.handle-wrap span{padding-left:16px;color:var(--gray);font-size:16px;}
.handle-wrap input{border:none;background:transparent;padding-left:4px;}
.handle-wrap input:focus{border:none;}
.consent{
  display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  margin:22px 0 26px;color:var(--gray);font-size:12.5px;line-height:1.6;
}
.consent .box{
  flex:0 0 auto;width:17px;height:17px;border:1px solid var(--gray-dim);margin-top:2px;
  position:relative;transition:border-color .25s ease;
}
.consent.on .box{border-color:var(--gold);}
.consent.on .box::after{
  content:"";position:absolute;inset:3px;background:var(--gold);
}
.consent b{color:var(--cream);font-weight:400;}
.err{color:#d98b7a;font-size:12.5px;min-height:1.2em;margin-bottom:10px;}
.ov .btn{width:100%;}
.cf-turnstile{margin-bottom:18px;}

/* confirmation */
.done{text-align:center;}
.done .mark{
  font-family:var(--serif);font-style:italic;font-size:40px;color:var(--gold);
  margin-bottom:20px;
}
.done p{color:var(--gray);font-size:14.5px;max-width:38ch;margin:0 auto;}
.done .foot{margin-top:26px;color:var(--gray-dim);font-size:12px;}

/* Safety valve: on genuinely tiny viewports (landscape phones) let the shell
   scroll rather than clip content. Everywhere normal it stays one screen. */
@media (max-height:430px){
  body{overflow:auto;}
  .shell{height:auto;min-height:100dvh;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  .rise{opacity:1;}
}