:root{
  --paper:#F3F4F1; --surface:#FBFBF9;
  --ink:#1B221E; --ink-2:#4E5A53; --ink-3:#7C8880;
  --line:#D8DDD6;
  --accent:#4A7265; --accent-ink:#FBFBF9;
  --signal:#7E6026;
  --serif:"Newsreader", Georgia, serif;
  --sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#121715; --surface:#1A211E;
    --ink:#E9ECE7; --ink-2:#AEB9B3; --ink-3:#818D86;
    --line:#2C3531;
    --accent:#8FC0AD; --accent-ink:#121715;
  }
}
:root[data-theme="dark"]{
  --paper:#121715; --surface:#1A211E;
  --ink:#E9ECE7; --ink-2:#AEB9B3; --ink-3:#818D86;
  --line:#2C3531;
  --accent:#8FC0AD; --accent-ink:#121715;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1.0rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:640px; margin:0 auto; padding:0 16px}
header{padding-block:56px 0}
main{padding-block:28px 64px}
.eyebrow{
  display:block; font-family:var(--sans); font-size:.76rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:14px;
}
h1{font-family:var(--serif); font-weight:400; font-size:clamp(1.9rem,4.4vw,2.6rem); line-height:1.15; margin:0 0 20px}
h2{font-family:var(--serif); font-weight:400; font-size:1.3rem; margin:34px 0 10px}
p{margin:0 0 16px; color:var(--ink-2)}
p.lead{color:var(--ink); font-size:1.08rem}
a{color:var(--accent)}
.card{
  background:var(--surface); border:1px solid var(--line);
  padding:24px; margin:28px 0;
}
.cta{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  border:1px solid var(--accent); padding:14px 24px; text-decoration:none;
  font-weight:500; letter-spacing:.01em;
  transition:background-color .22s ease, border-color .22s ease, color .22s ease;
}
.cta:hover{background:var(--signal); border-color:var(--signal); color:var(--accent-ink)}
.note{font-size:.9rem; color:var(--ink-3)}
.todo{
  background:var(--surface); border:1px dashed var(--line);
  padding:20px; color:var(--ink-3); font-size:.92rem;
}
footer{
  border-top:1px solid var(--line); padding-block:28px 40px;
  color:var(--ink-3); font-size:.8rem;
}
footer a{color:var(--ink-3)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}