:root{
  --ink:#17283c; --muted:rgba(23,40,60,.64); --faint:rgba(23,40,60,.42); --line:rgba(23,40,60,.14);
  --paper:#f4ecd9; --accent:#2f727a; --sunset:#e86a2c;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;background:var(--paper)}
a{color:inherit}
img{max-width:100%;display:block}

header.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  height:72px;padding:0 clamp(20px,5vw,48px);background:rgba(244,236,217,.86);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid var(--line)}
header.top .wm img{height:20px;width:auto}
header.top nav{display:flex;align-items:center;gap:clamp(14px,2.6vw,28px)}
header.top nav a{font-size:13px;color:var(--ink);text-decoration:none;opacity:.8}
header.top nav a:hover{opacity:1}

.wrap{max-width:720px;margin:0 auto;padding-inline:clamp(20px,5vw,48px)}
.doc{padding:clamp(40px,8vh,80px) 0 60px}
.doc-h1{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(2rem,5vw,3rem);margin:0 0 6px;color:var(--ink)}
.doc-date{font-size:13px;color:var(--faint);margin:0 0 32px}
.doc h2{font-size:17px;font-weight:700;margin:32px 0 8px;color:var(--ink)}
.doc p,.doc li{font-size:15px;line-height:1.65;color:var(--muted);margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:20px}
.doc a.link{color:var(--accent);text-decoration:underline}

footer.wrap{border-top:1px solid var(--line);padding:28px clamp(20px,5vw,48px) 40px;text-align:center;max-width:720px;margin:0 auto}
footer.wrap p{margin:0 0 10px;font-size:13px;color:var(--muted)}
footer.wrap .foot-links{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
footer.wrap .foot-links a{font-size:13px;color:var(--muted);text-decoration:none}
footer.wrap .foot-links a:hover{color:var(--ink)}