:root { --ink:#291f38; --mint:#6bdcb3; --sun:#ffd447; --cream:#fffaee; }
* { box-sizing: border-box; }
body { margin:0; font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--cream); line-height: 1.55; }
header { background: url(hero.jpg) center/cover; padding: 56px 20px 64px; text-align: center; }
header img { width: 128px; height: 128px; border-radius: 28px; box-shadow: 0 6px 0 var(--ink); border: 3px solid var(--ink); }
header h1 { font-size: 56px; margin: 16px 0 4px; color: var(--mint); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 4px 0 var(--ink); font-weight: 900; }
header p { font-weight: 800; font-size: 20px; margin: 0; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
nav { display:flex; gap:12px; justify-content:center; padding: 16px; flex-wrap: wrap; }
nav a { background: var(--sun); color: var(--ink); text-decoration: none; font-weight: 800; padding: 10px 18px; border-radius: 14px; border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink); }
main { max-width: 760px; margin: 0 auto; padding: 8px 20px 60px; }
h2 { font-size: 28px; margin-top: 36px; }
.card { background:#fff; border: 3px solid var(--ink); border-radius: 22px; padding: 20px 24px; box-shadow: 0 6px 0 var(--ink); margin: 18px 0; }
footer { text-align:center; font-size: 14px; opacity: .7; padding: 24px; }
a { color: #1d7f69; }