@font-face{font-family:"Brygada 1918";src:url(fonts/Brygada1918-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Brygada 1918";src:url(fonts/Brygada1918-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/HankenGrotesk-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/HankenGrotesk-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --cream:#FAF8F3; --oat:#EEEBE3; --forest:#2E4636; --ink:#22302A;
  --muted:#5E6A63; --line:#DEDAD0; --wheat:#E2CD9C; --wheat-text:#7E6127; --moss:#93A58F;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 "Hanken Grotesk",system-ui,sans-serif;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--forest);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
h1,h2{font-family:"Brygada 1918",Georgia,serif;font-weight:500;color:var(--forest);letter-spacing:-.01em}

.wrap{width:100%;max-width:1040px;margin:0 auto;padding:0 24px}
header.site{padding:32px 0 0}
header.site img{height:44px;width:auto;display:block}

main{flex:1;display:flex;align-items:center;padding:48px 0 64px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.eyebrow{display:block;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--wheat-text);margin:0 0 18px}
.hero h1{font-size:clamp(36px,5.2vw,58px);line-height:1.08;margin:0 0 22px}
.lede{font-size:19px;color:var(--ink);margin:0 0 14px;max-width:34em}
.first{color:var(--muted);margin:0;max-width:34em}
.first strong{color:var(--forest);font-weight:500}

.card{background:#fff;border:1px solid var(--line);padding:30px 28px 26px;position:relative}
.card h2{font-size:24px;line-height:1.2;margin:0 0 8px}
.card p{margin:0 0 18px;color:var(--muted);font-size:15.5px}
.card label{display:block;font-size:14px;font-weight:500;margin:0 0 6px;color:var(--ink)}
.card input[type=email]{width:100%;font:inherit;font-size:16px;padding:12px 14px;border:1px solid #C9C4B8;background:var(--cream);color:var(--ink);border-radius:0}
.card input[type=email]::placeholder,.card textarea::placeholder{color:#8A928D}
.card input[type=email]:focus{outline:2px solid var(--forest);outline-offset:1px;background:#fff}
.card label.opt{margin-top:16px;display:flex;justify-content:space-between;gap:8px}
.card label.opt span{font-weight:400;color:var(--muted);font-size:13px}
.card textarea{width:100%;font:inherit;font-size:15px;line-height:1.5;padding:10px 14px;border:1px solid #C9C4B8;background:var(--cream);color:var(--ink);border-radius:0;resize:vertical;min-height:84px}
.card textarea:focus{outline:2px solid var(--forest);outline-offset:1px;background:#fff}
.card button{margin-top:12px;width:100%;font:inherit;font-weight:500;font-size:16px;padding:13px 16px;background:var(--forest);color:var(--cream);border:0;cursor:pointer;border-radius:0}
.card button:hover{background:#243A2C}
.card .fine{font-size:13px;margin:12px 0 0;color:var(--muted)}
.hp{position:absolute;left:-9999px}

.contact{margin-top:22px;font-size:15px;color:var(--muted)}

footer.site{border-top:1px solid var(--line);padding:20px 0 28px;font-size:14px;color:var(--muted)}
footer.site .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
footer.site a{color:var(--muted)}

/* decorative grid, echoing the logo's cells */
.grid-motif{position:fixed;right:-40px;bottom:-40px;width:360px;height:280px;pointer-events:none;opacity:.55;z-index:-1;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:40px 30px}

/* text pages */
.doc{max-width:720px;padding:40px 0 64px}
.doc h1{font-size:40px;line-height:1.15;margin:0 0 6px}
.doc h2{font-size:22px;margin:32px 0 6px}
.doc .meta{color:var(--muted);margin:0 0 24px;font-size:15px}
.doc p,.doc li{max-width:40em}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:36px}
  main{align-items:flex-start;padding:36px 0 48px}
  header.site img{height:36px}
  .grid-motif{display:none}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  .lede{font-size:18px}
  .card{padding:26px 20px 22px}
}