:root{
  --black:#050505;
  --ivory:#F2ECDE;
  --soft:#FAF9F4;
  --charcoal:#2B2B2B;
  --limestone:#D9D2C6;
  --muted:#A8A39A;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",Arial,sans-serif;
  --edge:clamp(1.5rem,5vw,5.75rem);
  --ease:cubic-bezier(.22,.72,.28,1);
}

*{box-sizing:border-box}
html{background:var(--black);scroll-behavior:smooth}
body{margin:0;min-width:320px;background:var(--black);color:var(--ivory);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input{font:inherit}
button{border-radius:0}
::selection{background:var(--ivory);color:var(--black)}
.skip-link{position:fixed;z-index:1000;left:1rem;top:1rem;padding:.75rem 1rem;background:var(--ivory);color:var(--black);transform:translateY(-200%)}
.skip-link:focus{transform:none}

/* Arrival — composed as a cover, not a conventional hero. */
.cover{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  background:var(--black);
  padding:max(2rem,env(safe-area-inset-top)) var(--edge) max(2.25rem,env(safe-area-inset-bottom));
}
.cover__name{
  position:absolute;
  top:max(3.6rem,9vh);
  right:var(--edge);
  margin:0;
  font-size:.64rem;
  line-height:1;
  letter-spacing:.30em;
  text-transform:uppercase;
  font-weight:600;
  opacity:.82;
}
.cover__mark{
  position:absolute;
  top:clamp(5.2rem,10.5vh,8.5rem);
  left:var(--edge);
  width:min(33vw,29rem);
  min-width:19rem;
}
.cover__mark img{width:100%;height:auto}
.cover__statement{
  position:absolute;
  right:var(--edge);
  bottom:clamp(2.8rem,7.5vh,6.8rem);
  width:min(60vw,61rem);
  margin:0;
  font-family:var(--serif);
  font-size:clamp(4.15rem,7.8vw,8.7rem);
  line-height:.88;
  letter-spacing:-.063em;
  font-weight:350;
  text-wrap:balance;
}
.cover__statement span{display:block}
.cover__statement span:last-child{
  margin-top:.08em;
  padding-left:clamp(0rem,7vw,7.4rem);
  font-weight:300;
}

/* The ivory page begins inset, leaving the black field as part of the composition. */
.idea-shell{
  background:var(--black);
  padding:0;
}
.idea{
  min-height:100svh;
  margin-left:clamp(0rem,16vw,18rem);
  background:var(--ivory);
  color:var(--black);
  display:flex;
  align-items:center;
  padding:clamp(8rem,16vh,13rem) clamp(2.2rem,8vw,9rem);
}
.idea__copy{
  margin:0 0 0 auto;
  max-width:20ch;
  font-family:var(--serif);
  font-size:clamp(2.1rem,4.35vw,5.05rem);
  line-height:1.055;
  letter-spacing:-.042em;
  font-weight:350;
}
.idea__copy span{display:block}
.idea__standard{margin-top:.52em}

/* Entry — conversion mechanics recede behind typography. */
.entry{
  min-height:100svh;
  background:var(--black);
  color:var(--ivory);
  padding:clamp(5.5rem,11vh,10rem) var(--edge) max(1.8rem,env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
}
.entry__content{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(22rem,.95fr);
  column-gap:clamp(4rem,11vw,12rem);
  align-items:center;
}
.entry__intro{align-self:center;padding-top:0;max-width:46rem}
.entry__intro h2{
  margin:0;
  font-family:var(--serif);
  font-weight:350;
}
.entry__welcome{
  display:block;
  margin:0 0 clamp(.9rem,2vh,1.35rem);
  font-size:clamp(1.35rem,1.9vw,1.9rem);
  line-height:1.05;
  letter-spacing:-.025em;
  font-weight:300;
}
.entry__world{
  display:block;
  max-width:8ch;
  font-size:clamp(4rem,6.2vw,6.9rem);
  line-height:.91;
  letter-spacing:-.058em;
  font-weight:350;
}
.entry__form-wrap{align-self:center;width:100%;max-width:47rem;justify-self:end}
.entry-form{width:100%}
.field{margin:0 0 clamp(2rem,4.8vh,3.4rem)}
.field label{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1.2rem;
  margin:0 0 .72rem;
  color:rgba(242,236,222,.62);
  font-size:.58rem;
  line-height:1;
  letter-spacing:.19em;
  text-transform:uppercase;
  font-weight:600;
}
.field label span{opacity:.55;font-weight:500}
.field input{
  display:block;
  width:100%;
  margin:0;
  padding:.1rem 0 .8rem;
  border:0;
  border-bottom:1px solid rgba(242,236,222,.42);
  border-radius:0;
  outline:0;
  background:transparent;
  color:var(--ivory);
  font-family:var(--serif);
  font-size:clamp(1.7rem,2.8vw,2.85rem);
  line-height:1.15;
  font-weight:300;
  caret-color:var(--ivory);
  transition:border-color 180ms ease;
}
.field input:focus{border-color:var(--ivory)}
.email-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1.25rem;
  align-items:end;
  border-bottom:1px solid rgba(242,236,222,.42);
  transition:border-color 180ms ease;
}
.email-line:focus-within{border-color:var(--ivory)}
.email-line input{border-bottom:0;padding-bottom:.8rem}
.email-line button{
  align-self:stretch;
  min-width:5.6rem;
  margin:0;
  padding:.15rem 0 .82rem 1rem;
  border:0;
  outline-offset:4px;
  background:transparent;
  color:var(--ivory);
  font-family:var(--serif);
  font-size:clamp(1.2rem,1.8vw,1.65rem);
  line-height:1;
  font-weight:350;
  cursor:pointer;
  text-align:right;
  transition:opacity 160ms ease;
}
.email-line button:hover{opacity:.62}
.email-line button:disabled{opacity:.35;cursor:wait}
.consent{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:.8rem;
  align-items:start;
  max-width:34rem;
  color:rgba(242,236,222,.52);
  font-size:.64rem;
  line-height:1.6;
  cursor:pointer;
}
.consent input{
  appearance:none;
  width:.78rem;
  height:.78rem;
  margin:.16rem 0 0;
  border:1px solid rgba(242,236,222,.56);
  background:transparent;
  display:grid;
  place-items:center;
}
.consent input:checked::after{content:"";width:.32rem;height:.32rem;background:var(--ivory)}
.consent input:focus-visible{outline:1px solid var(--ivory);outline-offset:3px}
.consent a{text-underline-offset:.18em;text-decoration-thickness:1px}
.consent a:hover{color:var(--ivory)}
.form-status{min-height:1.1rem;margin:1.25rem 0 0;color:rgba(242,236,222,.62);font-size:.66rem;line-height:1.5}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.confirmation{
  max-width:34rem;
  padding:1rem 0 3rem;
}
.confirmation p:first-child{
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.2rem,5.5vw,5.6rem);
  line-height:.9;
  letter-spacing:-.05em;
  font-weight:350;
}
.confirmation p:last-child{
  margin:1.5rem 0 0;
  max-width:25rem;
  color:rgba(242,236,222,.62);
  font-size:.76rem;
  line-height:1.65;
}
.footer{
  margin-top:clamp(5rem,10vh,9rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  color:rgba(242,236,222,.38);
  font-size:.52rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.footer p{margin:0}
.footer__instagram{
  display:block;
  width:1.55rem;
  height:1.55rem;
  color:rgba(242,236,222,.58);
  transition:color 160ms ease,opacity 160ms ease;
}
.footer__instagram svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
.footer__instagram svg circle:last-child{fill:currentColor;stroke:none}
.footer__instagram:hover{color:var(--ivory)}

/* Privacy page */
.privacy-page{background:var(--black);min-height:100svh;padding:var(--edge)}
.privacy-shell{margin-left:clamp(0rem,12vw,12rem);background:var(--ivory);color:var(--black);min-height:calc(100svh - (2 * var(--edge)));padding:clamp(3rem,7vw,7.5rem)}
.privacy-top{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start}
.privacy-home{text-decoration:none;font-size:.59rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.privacy-mark{width:clamp(4rem,7vw,6.5rem);border-radius:50%;overflow:hidden}
.privacy-copy{max-width:48rem;margin:clamp(7rem,14vh,12rem) 0 4rem auto}
.privacy-copy h1{margin:0 0 3rem;font-family:var(--serif);font-size:clamp(3.5rem,7vw,7.2rem);line-height:.9;letter-spacing:-.055em;font-weight:350}
.privacy-copy h2{margin:3.2rem 0 1rem;font-family:var(--serif);font-size:clamp(1.45rem,2.4vw,2.1rem);font-weight:400;letter-spacing:-.025em}
.privacy-copy p,.privacy-copy li{font-size:.82rem;line-height:1.8;color:var(--charcoal)}
.privacy-copy ul{padding-left:1.15rem}.privacy-copy a{text-underline-offset:.2em}
.privacy-note{padding:1.1rem 1.25rem;background:rgba(5,5,5,.05)}

@media(max-width:900px){
  .cover__mark{min-width:0;width:min(44vw,23rem)}
  .cover__statement{width:min(68vw,46rem)}
  .idea{margin-left:10vw}
  .entry__content{grid-template-columns:1fr;gap:6rem;align-items:start}
  .entry__form-wrap{justify-self:start;max-width:none}
}

@media(max-width:640px){
  :root{--edge:clamp(1.35rem,6.2vw,1.9rem)}
  .cover{min-height:100svh}
  .cover__name{top:max(2rem,env(safe-area-inset-top));left:var(--edge);right:auto;font-size:.57rem;letter-spacing:.27em}
  .cover__mark{top:clamp(6.8rem,17vh,9rem);left:9vw;width:58vw;max-width:17.2rem}
  .cover__statement{left:var(--edge);right:auto;bottom:max(2.8rem,7.5vh);width:calc(100% - (2 * var(--edge)));font-size:clamp(3.25rem,15.2vw,5.2rem);line-height:.9;letter-spacing:-.058em}
  .cover__statement span:last-child{padding-left:0;margin-top:.12em}
  .idea{margin-left:0;min-height:96svh;padding:clamp(7rem,16vh,10rem) var(--edge)}
  .idea__copy{margin:auto 0 0;max-width:16.8ch;font-size:clamp(2rem,9.4vw,3.2rem);line-height:1.04;letter-spacing:-.043em}
  .entry{min-height:100svh;padding-top:clamp(5.5rem,12vh,7rem)}
  .entry__content{gap:clamp(5rem,13vh,8rem)}
  .entry__welcome{font-size:clamp(1.15rem,5vw,1.45rem);margin-bottom:.85rem}
  .entry__world{font-size:clamp(3.35rem,15vw,5rem);max-width:9ch;line-height:.92}
  .field{margin-bottom:2.35rem}
  .field input{font-size:clamp(1.65rem,7.4vw,2.25rem)}
  .email-line button{font-size:1.15rem;min-width:4.4rem}
  .footer{margin-top:6rem;font-size:.49rem}
  .footer__instagram{width:1.4rem;height:1.4rem}
  .privacy-page{padding:0}
  .privacy-shell{margin-left:0;min-height:100svh;padding:var(--edge)}
  .privacy-copy{margin-top:8rem}
}

@media(max-width:360px){
  .cover__statement{font-size:3.15rem}
  .idea__copy{font-size:2rem}
  .entry__world{font-size:3.45rem}
}

@media(prefers-reduced-motion:no-preference){
  .cover__name{animation:fade-in 900ms 140ms var(--ease) both}
  .cover__mark{animation:mark-in 1050ms 80ms var(--ease) both}
  .cover__statement{animation:statement-in 1000ms 260ms var(--ease) both}
  @keyframes fade-in{from{opacity:0;transform:translateY(5px)}to{opacity:.82;transform:none}}
  @keyframes mark-in{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
  @keyframes statement-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
