@font-face{ font-family:"Oswald"; src:url("oswald-600.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"Work Sans"; src:url("worksans-400.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"Work Sans"; src:url("worksans-500.woff2") format("woff2"); font-weight:500; font-display:swap; }

:root{
  --walnut:#2B2018; --kraft:#EFE3CB; --paper:#FBF7EF; --amber:#B5730C; --gold:#E9A227;
  --ink-soft:#5A4A3C;  /* walnut at reading weight: 6.7:1 on kraft */
}
*{ box-sizing:border-box; }
html{ background:var(--kraft); }
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  color:var(--walnut); font:400 18px/1.6 "Work Sans", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  /* paper grain, a nod to the printed crest */
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='4'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .07'/></feComponentTransfer></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.wrap{ flex:1; width:100%; max-width:620px; margin:0 auto; padding:clamp(28px,6vh,64px) 22px 32px; text-align:center; }
.crest img{ display:block; width:min(500px, 88vw); height:auto; margin:0 auto clamp(18px,4vh,34px); }

.kicker{
  /* Amber Deep is only 3.1:1 on kraft, too low for 13px text, so this is a deepened amber (4.7:1) */
  margin:0 0 10px; font:600 13px/1.2 "Oswald", sans-serif; letter-spacing:.22em; text-transform:uppercase; color:#8C5807;
}
h1{
  margin:0 0 14px; font:600 clamp(30px, 6.4vw, 46px)/1.08 "Oswald", sans-serif; letter-spacing:.005em; text-wrap:balance;
}
.lede{ margin:0 auto 28px; max-width:34em; color:var(--ink-soft); text-wrap:pretty; }

.join{ max-width:500px; margin:0 auto; }
.row{ display:flex; gap:8px; }
input[type=email]{
  flex:1; min-width:0; height:52px; padding:0 16px; border:2px solid var(--walnut); border-radius:4px;
  background:var(--paper); color:var(--walnut); font:500 17px "Work Sans", sans-serif;
}
input[type=email]::placeholder{ color:#7A6A58; }  /* 4.9:1 on paper */
input[type=email]:focus{ outline:3px solid var(--gold); outline-offset:2px; }
button{
  height:52px; padding:0 20px; border:0; border-radius:4px; cursor:pointer;
  background:var(--walnut); color:var(--paper);
  font:600 15px/1 "Oswald", sans-serif; letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
button:hover{ background:#4A3828; }
button:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
button[disabled]{ opacity:.6; cursor:wait; }
.fine{ margin:12px 0 0; font-size:14px; color:var(--ink-soft); }
.msg{ min-height:1.4em; margin:8px 0 0; font-size:15px; font-weight:500; color:#9A2A12; }

.done{ max-width:500px; margin:0 auto; padding:22px 20px; border:2px solid var(--walnut); border-radius:6px; background:var(--paper); }
.done p{ margin:0; }
.done-h{ font:600 24px/1.2 "Oswald", sans-serif; margin-bottom:6px !important; }

footer{ padding:22px; text-align:center; font:600 12px/1.8 "Oswald", sans-serif; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }

.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

@media (max-width:520px){
  .row{ flex-direction:column; }
  input[type=email]{ flex:none; width:100%; }   /* flex:1 in a column overrides the height */
  button{ width:100%; }
  .crest img{ width:min(500px, 82vw); }
  body{ font-size:17px; }
}