:root{
  --paper:#F7F3EE;
  --ink:#16130F;
  --muted:#5C544B;
  --rule:#E4DCD2;
  --accent:#2563EB;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16.5px;line-height:1.72;
  padding:0 2rem;
}
.sheet{max-width:42rem;margin:0 auto}

.mono{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}

/* ---------- header ---------- */
.top{padding:3.5rem 0 0}
.wordmark{
  font-family:'Fraunces',Georgia,serif;
  font-size:15px;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;
}
.wordmark:hover{color:var(--accent)}

.hero{padding:3.5rem 0 2.6rem;border-bottom:1px solid var(--rule)}
.hero .eyebrow{display:block;margin-bottom:1.25rem}
.hero h1{
  font-family:'Fraunces',Georgia,serif;
  font-weight:300;
  font-size:clamp(1.85rem,4.5vw,2.65rem);
  line-height:1.16;letter-spacing:-.025em;
}
.hero .meta{margin-top:1.1rem}

/* ---------- body ---------- */
.doc{padding:2.6rem 0 0}
.doc section{padding:0 0 2.4rem}
.doc h2{
  font-family:'Fraunces',Georgia,serif;
  font-weight:400;font-size:1.32rem;line-height:1.3;letter-spacing:-.015em;
  margin-bottom:1rem;
}
.doc h3{
  font-size:.95rem;font-weight:400;color:var(--muted);
  letter-spacing:.01em;
  margin:1.5rem 0 .6rem;
}
.doc p + p{margin-top:1.05rem}
.doc ul,.doc ol{margin:1.05rem 0 0 1.15rem}
.doc li{margin-bottom:.5rem}
.doc li::marker{color:var(--muted)}
.doc strong{font-weight:600}

.note{
  border-left:2px solid var(--rule);
  padding:.15rem 0 .15rem 1.15rem;
  margin-top:1.3rem;
  color:var(--muted);
}
.contact-box{
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  padding:1.5rem 0;margin-top:1.2rem;
  line-height:1.9;
}
.contact-box p + p{margin-top:0}

a.inline{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(37,99,235,.3)}
a.inline:hover{border-bottom-color:var(--accent)}

footer{
  border-top:1px solid var(--rule);
  margin-top:1rem;
  padding:2.6rem 0 4rem;
  line-height:1.95;
}
footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--rule)}
footer a:hover{color:var(--accent);border-bottom-color:var(--accent)}

@media(max-width:640px){
  body{padding:0 1.4rem;font-size:16px}
  .top{padding-top:2.5rem}
  .hero{padding:2.5rem 0 2rem}
  .doc{padding-top:2rem}
}