@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ink:#1B2A3D;
  --paper:#F7F4EE;
  --brass:#B8813A;
  --brass-dark:#8F6329;
  --moss:#4A6741;
  --charcoal:#2A2622;
  --warm-gray:#6B6660;
  --line:#DCD4C4;
  --white:#FFFDF9;
}
*{box-sizing:border-box; margin:0; padding:0;}
[hidden]{display:none !important;}
body{
  font-family:'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--paper);
  color:var(--charcoal);
  line-height:1.65;
}
a{color:var(--brass); text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:760px; margin:0 auto; padding:0 24px;}

/* ---------- header ---------- */
header{
  background:var(--white);
  border-bottom:1px solid var(--line);
}
header .wrap{
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px; gap:16px; flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:10px;}
.brand .name{font-family:'Fraunces', Georgia, serif; font-size:20px; color:var(--ink);}
.brand .dot{color:var(--brass);}
.back{font-size:14px; font-weight:600; color:var(--ink);}
.back:hover{color:var(--brass);}

/* ---------- document ---------- */
main{padding:52px 0 72px;}
.kicker{
  font-family:'IBM Plex Mono', Consolas, monospace;
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--brass); margin-bottom:8px;
}
h1{
  font-family:'Fraunces', Georgia, serif;
  font-size:38px; line-height:1.12; color:var(--ink);
  letter-spacing:-0.01em; margin-bottom:10px;
}
.updated{
  font-family:'IBM Plex Mono', Consolas, monospace;
  font-size:12.5px; color:var(--warm-gray); margin-bottom:34px;
}
h2{
  font-family:'Fraunces', Georgia, serif;
  font-size:22px; color:var(--ink);
  margin:38px 0 12px; padding-top:22px;
  border-top:1px solid var(--line);
}
h2:first-of-type{border-top:none; padding-top:0;}
h3{
  font-size:15px; font-weight:700; color:var(--ink);
  margin:22px 0 6px; text-transform:none;
}
p{margin-bottom:14px;}
ul, ol{margin:0 0 14px 22px;}
li{margin-bottom:7px;}
strong{color:var(--ink); font-weight:700;}

/* Marks a value that must be filled in before this page is relied upon. */
.ph{
  background:rgba(184,129,58,.13);
  border-bottom:1px dotted var(--brass-dark);
  padding:0 3px; color:var(--brass-dark); font-weight:600;
  white-space:nowrap;
}
.callout{
  background:var(--white);
  border:1px solid var(--line);
  border-left:3px solid var(--brass);
  border-radius:6px;
  padding:16px 18px;
  margin:0 0 30px;
  font-size:14.5px;
  color:var(--warm-gray);
}
.callout strong{display:block; margin-bottom:5px; color:var(--ink);}
.contact-block{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 20px;
  margin:18px 0;
  font-size:15px;
}
.contact-block div{margin-bottom:4px;}

/* ---------- footer ---------- */
footer{
  background:var(--ink); color:var(--paper);
  padding:26px 0; font-size:13.5px;
}
footer .wrap{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
}
footer a{color:var(--paper); opacity:.85;}
footer a:hover{opacity:1; color:var(--brass);}
.footer-right{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}
.social{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  color:var(--paper); opacity:.8;
  border:1px solid rgba(247,244,238,.22);
  transition:color .15s ease, border-color .15s ease, opacity .15s ease;
}
.social:hover{opacity:1; color:var(--brass); border-color:var(--brass); text-decoration:none;}

@media (max-width:640px){
  h1{font-size:30px;}
  main{padding:36px 0 52px;}
}