:root{
  --paper:#f6f1e0; --paper-light:#fbf9ef; --pen:#2145b8; --rule:#739ed9;
  --graphite:#303038; --soft:#85858c; --margin:#d95954;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--graphite); background-color:var(--paper);
  background-image:
    linear-gradient(90deg, transparent 54px, rgba(217,89,84,.35) 54px, rgba(217,89,84,.35) 56px, transparent 56px),
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(115,158,217,.28) 31px 32px);
  font:17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.wrap{max-width:760px; margin:0 auto; padding:32px 20px 64px 72px}
@media (max-width:600px){ .wrap{padding:24px 16px 48px 64px} }
h1,h2,h3,.brand{font-family:"Caveat", "Noteworthy", "Comic Sans MS", cursive; color:var(--graphite); line-height:1.15}
h1{font-size:2.8rem; margin:.2em 0 .1em}
h2{font-size:1.9rem; margin:1.6em 0 .3em}
h3{font-size:1.45rem; margin:1.2em 0 .2em}
a{color:var(--pen)}
nav{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:24px}
nav .brand{display:flex; align-items:center; gap:10px; font-size:1.8rem; text-decoration:none; color:var(--graphite); margin-right:auto}
nav .brand img{width:40px; height:40px; border-radius:10px; border:2px solid var(--graphite)}
nav .links{display:flex; gap:18px}
nav a.link{font-weight:600; text-decoration:none}
@media (max-width:480px){ nav .brand{font-size:1.6rem} nav .links{gap:14px; font-size:.95rem} }
nav a.link[aria-current]{text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px}
.card{
  background:var(--paper-light); border:2.5px solid var(--graphite); border-radius:16px 22px 14px 20px;
  padding:20px 22px; margin:20px 0; box-shadow:4px 5px 0 rgba(48,48,56,.18);
}
.hero{text-align:center; padding:28px 22px 30px}
.hero img{width:128px; height:128px; border-radius:28px; border:3px solid var(--graphite); transform:rotate(-3deg)}
.tagline{font-family:"Caveat",cursive; font-size:1.7rem; color:var(--pen); margin:0 0 12px}
.btn{
  display:inline-block; padding:10px 22px; margin:6px; border:2.5px solid var(--pen); border-radius:14px 18px 12px 16px;
  color:var(--pen); background:#fff; font-weight:700; text-decoration:none
}
.btn.solid{background:var(--pen); color:#fff}
ul{padding-left:1.2em} li{margin:.25em 0}
.muted{color:var(--soft); font-size:.92rem}
.tag{display:inline-block; font-size:.85rem; font-weight:700; color:var(--margin); border:2px solid var(--margin); border-radius:10px; padding:1px 10px; transform:rotate(-2deg)}
details{border-top:1.5px dashed var(--rule); padding:10px 0}
details:last-child{border-bottom:1.5px dashed var(--rule)}
summary{cursor:pointer; font-weight:700}
footer{margin-top:40px; font-size:.9rem; color:var(--soft); text-align:center}
.card > h1:first-child, .card > h2:first-child{margin-top:0}