:root{
  --paper:#f5f2ea;
  --ink:#111318;
  --muted:#6f6b64;
  --line:rgba(17,19,24,.17);
  --overlay:rgba(17,19,24,.34);
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,textarea{font:inherit}
.page{min-height:100svh;display:grid}
.hero{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:max(28px,env(safe-area-inset-top)) clamp(20px,5vw,80px) max(28px,env(safe-area-inset-bottom));
}
.hero-inner{
  width:min(1040px,100%);
  min-height:min(860px,calc(100svh - 56px));
  display:grid;
  grid-template-rows:auto 1fr auto;
  align-items:center;
  text-align:center;
}
.logo{
  display:block;
  width:clamp(260px,44vw,560px);
  height:auto;
  margin:0 auto;
}
.statement-wrap{
  align-self:center;
  margin-top:clamp(12px,2vh,30px);
}
h1{
  width:min(780px,100%);
  margin:0 auto;
  font-size:clamp(2.35rem,5.2vw,4.85rem);
  line-height:.99;
  letter-spacing:-.047em;
  font-weight:400;
  text-wrap:balance;
}
.intro{
  width:min(590px,86%);
  margin:clamp(26px,3.2vw,42px) auto 0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(.84rem,1.15vw,1rem);
  line-height:1.72;
  letter-spacing:.002em;
  color:var(--muted);
  text-wrap:pretty;
}
.lower{
  display:grid;
  justify-items:center;
  gap:18px;
  padding-top:clamp(28px,5vh,58px);
}
.whisper{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(.61rem,.75vw,.72rem);
  line-height:1.4;
  letter-spacing:.19em;
  text-transform:lowercase;
  color:var(--muted);
}
.contact-link{
  appearance:none;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  padding:0 0 5px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:clamp(.72rem,.85vw,.82rem);
  letter-spacing:.08em;
  text-transform:lowercase;
  cursor:pointer;
  transition:opacity .18s ease;
}
.contact-link:hover{opacity:.55}
.contact-modal{
  width:min(520px,calc(100vw - 32px));
  max-width:520px;
  border:0;
  padding:0;
  background:transparent;
  color:var(--ink);
}
.contact-modal::backdrop{
  background:var(--overlay);
  backdrop-filter:blur(8px);
}
.modal-shell{
  position:relative;
  background:var(--paper);
  padding:clamp(30px,5vw,52px);
  box-shadow:0 30px 90px rgba(17,19,24,.16);
}
.close-button{
  position:absolute;
  top:16px;
  right:18px;
  border:0;
  background:transparent;
  padding:2px 7px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.55rem;
  line-height:1;
  cursor:pointer;
}
.modal-kicker{
  margin:0 0 16px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.63rem;
  letter-spacing:.19em;
  text-transform:lowercase;
  color:var(--muted);
}
.contact-modal h2{
  margin:0;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1;
  letter-spacing:-.035em;
  font-weight:400;
  text-transform:lowercase;
}
.modal-copy{
  margin:16px 0 30px;
  max-width:390px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.82rem;
  line-height:1.65;
  color:var(--muted);
  text-transform:lowercase;
}
form{display:grid;gap:15px}
.field{display:grid;gap:7px}
label{
  font-family:Arial,Helvetica,sans-serif;
  font-size:.64rem;
  letter-spacing:.13em;
  text-transform:lowercase;
  color:var(--muted);
}
input,textarea{
  width:100%;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  background:transparent;
  padding:11px 0 12px;
  outline:none;
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  font-size:.95rem;
}
input:focus,textarea:focus{border-bottom-color:var(--ink)}
textarea{min-height:96px;resize:vertical}
.submit-button{
  justify-self:start;
  margin-top:9px;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  padding:0 0 5px;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:lowercase;
  cursor:pointer;
}
.submit-button:disabled{cursor:wait;opacity:.5}
.form-status{
  min-height:17px;
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  font-size:.71rem;
  color:var(--muted);
  text-transform:lowercase;
}
.trap{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(1px,1px,1px,1px)!important;
  white-space:nowrap!important;
}
@media(max-width:720px){
  .hero{
    place-items:start center;
    padding-top:max(34px,env(safe-area-inset-top));
  }
  .hero-inner{
    min-height:calc(100svh - 68px);
    grid-template-rows:auto 1fr auto;
  }
  .logo{width:clamp(245px,76vw,390px)}
  h1{
    width:min(92vw,600px);
    font-size:clamp(2.4rem,12vw,4.2rem);
    line-height:.98;
  }
  .intro{
    width:min(88vw,500px);
    margin-top:24px;
    font-size:.84rem;
    line-height:1.65;
  }
  .lower{padding-top:36px;gap:16px}
}
@media(max-width:420px){
  .hero{padding-left:18px;padding-right:18px}
  .logo{width:min(88vw,340px)}
  h1{width:100%;font-size:clamp(2.25rem,13vw,3.35rem)}
  .intro{width:100%;font-size:.8rem}
  .modal-shell{padding:34px 24px 30px}
}