:root {
  --cream: #F7F2E8; --cream-2: #ECE3D2; --cell: #F2EBDC; --edge: #D8C9AE;
  --ink: #2A2722; --ink-soft: #696257; --gold: #FFC632;
  --coral: #FF5D5D; --sky: #2BB3E0; --lime: #57C84D; --amber: #FFB400; --violet: #8B5CF6; --blush: #FF6FB5;
}
* { box-sizing: border-box; }
html { background: var(--cream); }
body {
  margin: 0; color: var(--ink); background: linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%) fixed;
  font: 400 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
h1, h2, h3, .wordmark { font-family: ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; }
a { color: #1E7FA6; }
a:hover { color: var(--ink); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 3px 10px rgba(42,39,34,.15); }
.wordmark { font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
nav.links { display: flex; gap: 18px; font-weight: 600; font-size: 15px; }
nav.links a { color: var(--ink-soft); text-decoration: none; }
nav.links a:hover, nav.links a[aria-current="page"] { color: var(--ink); }
main { padding: 12px 0 64px; }
.page h1 { font-size: clamp(34px, 6vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 10px; }
.page h2 { font-size: 22px; font-weight: 800; margin: 38px 0 8px; }
.meta { color: var(--ink-soft); margin: 0 0 24px; }
.card { background: var(--cell); border: 1.5px solid var(--edge); border-radius: 18px; padding: 18px 20px; }
.card ul { margin: 6px 0 0; padding-left: 20px; }
li { margin: 4px 0; }
.pips { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.pip { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12), 0 4px 10px rgba(42,39,34,.12); }
.pip svg { width: 22px; height: 22px; fill: rgba(255,255,255,.95); }
.coral { background: var(--coral); } .sky { background: var(--sky); } .lime { background: var(--lime); }
.amber { background: var(--amber); } .violet { background: var(--violet); } .blush { background: var(--blush); }
details { background: var(--cell); border: 1.5px solid var(--edge); border-radius: 14px; padding: 12px 16px; margin: 10px 0; }
summary { font-weight: 700; cursor: pointer; }
details p { margin: 10px 0 2px; }
footer.bottom { border-top: 1.5px solid var(--edge); padding: 20px 0 40px; color: var(--ink-soft); font-size: 15px; }
footer.bottom a { color: var(--ink-soft); }
@media (max-width: 520px) { nav.links { gap: 12px; font-size: 14px; } .wordmark { font-size: 19px; } }