:root{
  --paper:#EFE7D4;
  --paper-deep:#E3D8BF;
  --ink:#851E1F;
  --ink-dark:#241A16;
  --ink-soft:#5B4B42;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.5rem,4.5vw,2.25rem);
  padding:clamp(1.25rem,5vw,2.5rem) 1.25rem;
  background:var(--paper);
  background-image:radial-gradient(120% 90% at 50% 30%, #F5EEDE 0%, var(--paper) 45%, var(--paper-deep) 100%);
  color:var(--ink-soft);
  font-family:"Archivo",system-ui,sans-serif;
  font-size:1rem;
  line-height:1.6;
  text-align:center;
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed; inset:0; z-index:20;
  pointer-events:none;
  mix-blend-mode:multiply;
  opacity:.42;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)' opacity='0.55'/></svg>");
}

.kicker{
  font-family:"Space Mono",ui-monospace,monospace;
  font-weight:700;
  font-size:.7rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink);
  opacity:.75;
  margin:0;
  padding-left:.34em;
}

.logo{
  width:clamp(130px,26vw,220px);
  aspect-ratio:546/685;
  margin:0 auto;
}
.logo img{ width:100%; height:100%; display:block }

h1{
  font-family:"Archivo Black",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem,7vw,3.4rem);
  line-height:.96;
  letter-spacing:-.022em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 auto;
  max-width:14ch;
}
h1 em{ font-style:normal; color:var(--ink-dark) }

p.lede{
  max-width:44ch;
  margin:0 auto;
  font-size:clamp(.95rem,2.2vw,1.075rem);
}

footer{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.6;
  margin:0;
  line-height:1.9;
}
footer a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.2em;
}
footer a:hover, footer a:focus-visible{ color:var(--ink) }

.stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(1rem,3vw,1.5rem);
}

.actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.85rem;
}
.btn{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.85rem 1.5rem .85rem 1.25rem;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  border:none;
  cursor:pointer;
  border-radius:999px;
  font-family:"Space Mono",ui-monospace,monospace;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.01em;
  transition:background-color .16s ease, opacity .16s ease;
}
.btn svg{ width:1.25em; height:1.25em; flex:none }
.btn:hover, .btn:focus-visible{ background:#6E1819 }
.btn:focus-visible{ outline:2px solid var(--ink-dark); outline-offset:4px }
.btn:disabled{ opacity:.55; cursor:wait }

.btn.ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--ink);
}
.btn.ghost:hover, .btn.ghost:focus-visible{ background:var(--paper-deep) }

.back-link{
  position:fixed;
  top:1.5rem;
  left:1.5rem;
  z-index:21;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.8rem;
  letter-spacing:.05em;
  color:var(--ink-soft);
  text-decoration:none;
  opacity:.75;
}
.back-link:hover, .back-link:focus-visible{ opacity:1 }

.form{
  width:100%;
  max-width:28rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  text-align:left;
}
.field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.field label{
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.85;
}
.field input, .field textarea{
  font-family:"Archivo",system-ui,sans-serif;
  font-size:1.05rem;
  color:var(--ink-dark);
  background:#F5EEDE;
  border:1.5px solid var(--ink-soft);
  border-radius:.6rem;
  padding:.7rem .9rem;
  resize:vertical;
}
.field textarea{ min-height:5rem }
.field input:focus, .field textarea:focus{
  outline:2px solid var(--ink);
  outline-offset:1px;
}
.hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form .btn{ align-self:center }
.form-status{
  min-height:1.2em;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.8rem;
  text-align:center;
}
.form-status[data-state="ok"]{ color:#2F6F4E }
.form-status[data-state="error"]{ color:var(--ink) }
.cf-turnstile{ align-self:center }

.direct-mail{
  margin:0;
  font-family:"Space Mono",ui-monospace,monospace;
  font-size:.8rem;
  letter-spacing:.04em;
  color:var(--ink-soft);
  opacity:.8;
}
.direct-mail a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.2em;
}
.direct-mail a:hover, .direct-mail a:focus-visible{ text-decoration-thickness:2px }

@media (prefers-reduced-motion:no-preference){
  .reveal{ animation:rise .6s .15s cubic-bezier(.2,.8,.25,1) both }
  .reveal-2{ animation:rise .6s .3s cubic-bezier(.2,.8,.25,1) both }
  .reveal-3{ animation:rise .6s .45s cubic-bezier(.2,.8,.25,1) both }
  @keyframes rise{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
}

@media (max-height:640px){
  .logo{ width:clamp(100px,20vw,160px) }
}

@media (min-width:900px){
  .form{
    max-width:34rem;
    gap:1.15rem;
  }
  .field label{ font-size:.8rem }
  .field input, .field textarea{
    font-size:1.15rem;
    padding:.9rem 1.1rem;
  }
  .field textarea{ min-height:7rem }
  .form .btn{
    font-size:1.05rem;
    padding:1rem 2rem 1rem 1.75rem;
  }
}