:root{
  --primary:#C24E30; --primary-dark:#A63F26; --secondary:#BFD8C7; --accent:#F2A93B;
  --n100:#FFFCF7; --n500:#6E6259; --n900:#2A211C;
  --radius-card:20px; --shadow-warm:0 2px 8px rgba(42,33,28,.08); --container:820px;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--n100); color:var(--n900);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  line-height:1.65; font-size:17px;}
.wrap{max-width:var(--container); margin:0 auto; padding:48px 24px 80px;}
header.top{border-bottom:1px solid rgba(42,33,28,.08); background:#fff;}
header.top .inner{max-width:var(--container); margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.logo{font-family:'Caveat',cursive; font-size:1.7rem; font-weight:700;
  color:var(--primary); text-decoration:none;}
.nav a{color:var(--n500); text-decoration:none; font-size:.92rem; margin-left:18px;}
.nav a:hover{color:var(--primary);}
h1{font-size:clamp(1.9rem,5vw,2.6rem); line-height:1.2; margin:0 0 10px;}
h2{font-size:1.2rem; margin:38px 0 10px;}
.updated{color:var(--n500); font-size:.9rem; margin:0 0 32px;}
p,li{color:var(--n900);}
ul{padding-left:22px;}
a{color:var(--primary-dark);}
.note{background:var(--secondary); border-radius:var(--radius-card); padding:20px 22px; margin:28px 0;}
.todo{background:#FFF3D6; border:1px solid var(--accent); border-radius:var(--radius-card);
  padding:20px 22px; margin:28px 0; font-size:.95rem;}
footer.bot{border-top:1px solid rgba(42,33,28,.08); margin-top:56px; padding-top:22px;
  color:var(--n500); font-size:.88rem;}
@media (max-width:600px){ .wrap{padding:32px 18px 60px;} body{font-size:16px;} }