@font-face {
  font-family:'Public Sans';
  src:url('/fonts/public-sans-latin.woff2') format('woff2');
  font-style:normal;
  font-weight:100 900;
  font-display:swap
}

:root {
  color-scheme:light;
  --paper:#f5f3ed;
  --ink:#292e2b;
  --muted:#62655d;
  --copper:#974726;
  --line:#d5d6ca;
  font-family:'Public Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif
}

* {
  box-sizing:border-box
}
body {
  margin:0;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  color:var(--ink);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-underline-offset:4px
}
button,input {
  font:inherit
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:3px solid var(--copper);
  outline-offset:5px
}
::selection {
  background:#e4c3ad
}
.wrap {
  width:min(1120px,calc(100% - 96px));
  margin-inline:auto
}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  background:var(--paper);
  padding:12px;
  z-index:2
}
.skip-link:focus {
  top:12px
}
.preview-notice {
  margin:0;
  padding:7px 20px;
  background:var(--ink);
  color:var(--paper);
  font-size:.75rem;
  text-align:center
}

.site-header {
  padding-block:38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px
}
.brand {
  text-decoration:none;
  font-size:1.5rem;
  font-weight:650;
  letter-spacing:-.06em
}
.brand span {
  color:var(--copper)
}
.hero {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:68px 96px
}
h1 {
  font-size:clamp(2.75rem,5.9vw,5rem);
  font-weight:450;
  letter-spacing:-.065em;
  line-height:1.09;
  margin:0 0 25px;
  overflow-wrap:anywhere
}
h1 span {
  color:var(--copper)
}
.lede {
  color:var(--muted);
  font-size:1.12rem;
  margin:0 0 54px
}

form {
  width:min(100%,510px);
  min-width:0
}
.email-label {
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin-bottom:11px
}
.signup-row {
  display:flex;
  gap:8px
}
.signup-row input {
  flex:1;
  min-width:0;
  width:100%;
  padding:14px 16px;
  border:1px solid #9c9e92;
  border-radius:2px;
  background:#fffefa;
  color:var(--ink);
  font-size:1rem
}
.signup-row input::placeholder {
  color:#6e7169
}
.button {
  background:var(--copper);
  border:1px solid var(--copper);
  color:#fffefa;
  border-radius:2px;
  min-height:54px;
  padding:13px 23px;
  font-size:.88rem;
  font-weight:600;
  cursor:pointer;
  flex-shrink:0
}
.button:hover:not(:disabled) {
  background:#79371d
}
.button:disabled {
  opacity:.6;
  cursor:not-allowed
}
.consent {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-top:17px;
  font-size:.74rem;
  color:var(--muted);
  cursor:pointer
}
.consent input {
  width:17px;
  height:17px;
  flex-shrink:0;
  margin:2px 0 0;
  accent-color:var(--copper)
}
.smallprint {
  font-size:.72rem;
  color:var(--muted);
  margin:10px 0 0
}
.form-status {
  font-size:.83rem;
  margin:12px 0 0;
  min-height:1.6em;
  overflow-wrap:anywhere
}
.form-status.error {
  color:#862c20
}
.honeypot {
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden
}
.site-footer {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  padding-block:22px 28px;
  border-top:1px solid var(--line);
  font-size:.7rem;
  color:var(--muted)
}

.prose {
  max-width:740px;
  padding-block:55px 90px
}
.prose h1 {
  font-size:2.8rem
}
.prose h2 {
  font-size:1.2rem;
  font-weight:600;
  margin-top:32px
}
.prose p {
  font-size:.94rem;
  color:var(--muted)
}
.prose a {
  color:var(--copper)
}

@media(max-width:650px) {
  .wrap {
  width:calc(100% - 44px)
}
.site-header {
  padding-block:25px
}
.brand {
  font-size:1.3rem
}
.hero {
  padding-block:48px 60px
}
h1 {
  font-size:clamp(2.5rem,8.2vw,3.3rem);
  letter-spacing:-.06em
}
h1 br {
  display:none
}
.lede {
  font-size:1rem;
  max-width:290px;
  margin-bottom:38px
}
.signup-row {
  flex-wrap:wrap
}
.signup-row input {
  flex-basis:220px
}
.signup-row .button {
  flex-grow:1
}
.site-footer {
  font-size:.65rem
}
.prose h1 {
  font-size:2.25rem
}

}