:root{
  --bg:#e4e0d6; --panel:#dbd6c8; --text:#24261f; --muted:#5c5c50;
  --accent:#3d5a4c; --line:#c9c3b4;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"IBM Plex Sans",system-ui,sans-serif;
  line-height:1.55;
}
h1,h2,.wordmark{font-family:"Fraunces",Georgia,serif}
a{color:var(--accent)}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px}
header{display:flex;align-items:center;justify-content:space-between;padding:28px 0}
.wordmark{font-size:22px;font-weight:600;letter-spacing:.01em;text-decoration:none;color:var(--text)}
nav a{margin-left:28px;font-size:15px;text-decoration:none;color:var(--muted)}
nav a:hover,nav a:focus-visible{color:var(--text)}
main{padding:40px 0 80px}
.hero{display:grid;grid-template-columns:1.1fr 1px 1fr;gap:48px;align-items:center;min-height:44vh}
.hero .rule{background:var(--line);height:100%}
.hero h1{font-size:clamp(34px,5vw,58px);line-height:1.05;margin:0;font-weight:500}
.hero p{color:var(--muted);font-size:17px;max-width:34ch}
.notify{display:flex;gap:10px;margin-top:24px;max-width:380px}
.notify input{
  flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:3px;
  background:#fff;font-size:15px;font-family:inherit;color:var(--text);
}
.notify button{
  padding:12px 18px;border:none;border-radius:3px;background:var(--accent);
  color:#fff;font-size:15px;font-family:inherit;cursor:pointer;
}
.notify button:hover{background:#324c40}
.notify input:focus-visible,.notify button:focus-visible,nav a:focus-visible,.wordmark:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.note{font-size:13px;color:var(--muted);margin-top:10px}
.page h1{font-size:clamp(28px,4vw,40px);font-weight:500;margin-bottom:8px}
.page .lede{color:var(--muted);font-size:17px;max-width:56ch}
.page section{margin-top:36px;max-width:64ch}
.page h2{font-size:20px;font-weight:600;margin-bottom:8px}
footer{border-top:1px solid var(--line);padding:24px 0;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between}
@media (max-width:720px){
  .hero{grid-template-columns:1fr;gap:20px}
  .hero .rule{display:none}
  footer .wrap{flex-direction:column;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}