@font-face{font-family:"Chelion";src:url(assets/chelion.otf) format("opentype");font-display:block}
:root{
  --wine:#300513; --clay:#792A26; --velvet:#8E1A22; --ink:#120206;
  --bone:#EDEAE4; --honey:#D1983B;
  --serif:"Chelion","Didot","Bodoni 72","Playfair Display",Georgia,serif;
  --sans:"Urbanist","Helvetica Neue",Arial,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html,body{margin:0}
html{height:100%;overflow-x:hidden}
body{min-height:100%;position:relative}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- background: lamps behind fluted glass ---------- */
.velvet{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--wine)}
.velvet .photo{position:absolute;inset:0;background:url(assets/background.jpg) center 40%/cover no-repeat}
.velvet .tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,4,15,.72) 0%,rgba(48,5,19,.5) 45%,rgba(26,2,9,.86) 100%)}
.velvet .wine{position:absolute;inset:0;background:var(--velvet);mix-blend-mode:color;opacity:.12}
.velvet .grain{position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.velvet .vignette{position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 45%,transparent 50%,rgba(12,0,4,.8) 100%)}

/* the pendant: cable, bulb and its cone of light */
.lamp{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.lamp .cable{position:absolute;left:calc(50% - .5px);top:0;width:1px;height:clamp(40px,7vh,72px);background:rgba(237,234,228,.35)}
.lamp .shade{position:absolute;left:calc(50% - 17px);top:clamp(40px,7vh,72px);width:34px;height:14px;border-radius:17px 17px 3px 3px;background:#1a0408;box-shadow:0 1px 0 rgba(237,234,228,.15) inset}
.lamp .bulb{position:absolute;left:calc(50% - 7px);top:calc(clamp(40px,7vh,72px) + 9px);width:14px;height:14px;border-radius:50%;background:#fff3df;box-shadow:0 0 18px 6px rgba(255,214,160,.7),0 0 60px 20px rgba(255,170,120,.25);opacity:0}
.lamp .cone{position:absolute;left:50%;top:calc(clamp(40px,7vh,72px) + 14px);transform:translateX(-50%);
  width:min(1100px,150vw);height:calc(100% - 100px);
  clip-path:polygon(48.6% 0,51.4% 0,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,222,186,.26) 0%,rgba(255,200,170,.12) 35%,rgba(255,170,150,.05) 70%,transparent 100%);
  filter:blur(26px);mix-blend-mode:screen;opacity:0}
.lamp .pool{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:min(900px,120vw);height:120px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,190,160,.16),transparent 70%);opacity:0}
.on .lamp .bulb,.on .lamp .cone,.on .lamp .pool{animation:switch 1.6s steps(1,end) .3s forwards}
@keyframes switch{0%{opacity:0}12%{opacity:1}18%{opacity:.25}26%{opacity:1}100%{opacity:1}}

/* the room starts in the dark and warms up after the bulb flickers on */
.on .velvet{animation:warm 4.2s ease-out .3s both}
.on .page{animation:reveal 2.6s ease-out 1.8s both}
@keyframes warm{0%{opacity:0}12%{opacity:.18}18%{opacity:.04}26%{opacity:.22}100%{opacity:1}}
@keyframes reveal{from{opacity:0}to{opacity:1}}

/* ---------- layout ---------- */
.page{
  position:relative;z-index:2;
  min-height:100vh;min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(20px,4vh,56px) 24px clamp(18px,3vh,40px);
}
header{display:flex;justify-content:center;padding-top:clamp(56px,7.5vh,100px)}
.wordmark{width:clamp(150px,16vw,220px);height:auto;display:block}

main{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:clamp(14px,2.5vh,48px) 0;
}
h1{margin:0;font-weight:400;line-height:.86;display:flex;flex-direction:column;align-items:center}
h1 .coming{
  font-family:var(--sans);font-weight:400;
  font-size:clamp(20px,2.6vw,38px);letter-spacing:.06em;
  margin-bottom:.45em;
}
h1 .soon{
  font-family:var(--serif);
  font-size:clamp(100px,min(18vw,23vh),240px);
  letter-spacing:-.01em;
  margin-top:-.04em;
}

.tuned{margin:14px 0 0;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--honey)}

.join{margin:clamp(22px,3.5vh,56px) 0 0;width:min(440px,100%)}
.join p{margin:0 0 16px;font-size:15px;line-height:1.5;opacity:.85}
.field{display:flex;border-bottom:1px solid rgba(237,234,228,.55)}
.field input{
  flex:1;min-width:0;background:transparent;border:0;color:var(--bone);
  font:400 16px/1 var(--sans);padding:14px 2px;
}
.field input::placeholder{color:rgba(237,234,228,.55)}
.field input:focus{outline:none}
.field:focus-within{border-bottom-color:var(--bone)}
.field button{
  background:transparent;border:0;color:var(--bone);cursor:pointer;
  font:500 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  padding:14px 2px 14px 18px;
}
.field button:hover{color:var(--honey)}
.field button:focus-visible,.field input:focus-visible{outline:1px solid var(--honey);outline-offset:4px}
.msg{min-height:1.5em;margin:12px 0 0;font-size:14px;opacity:.85}

footer{display:flex;flex-direction:column;align-items:center;gap:10px}
.iso{width:34px;height:auto;display:block}
footer small{font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--honey)}

@media (max-width:640px){
  .velvet .photo{background-size:auto 62%;background-position:center 46%;
    -webkit-mask-image:linear-gradient(180deg,transparent 17.5%,#000 30%,#000 67%,transparent 79.5%);mask-image:linear-gradient(180deg,transparent 17.5%,#000 30%,#000 67%,transparent 79.5%)}
  .tuned{margin:14px 0 0;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--honey)}
  }
@media (prefers-reduced-motion:reduce){.on .lamp .bulb,.on .lamp .cone,.on .lamp .pool,.on .velvet,.on .page{animation:none;opacity:1}}