:root { /* brand palette: docs/BRAND.md */ --orange:#DD6A2E; --mustard:#E3A93A; --teal:#2E8B8B; --red:#E8432D; --cream:#F5EEDF; --navy:#0F2A5C; --blue:#C2551F; /* accent (text-safe orange) */ --ink:#101828; --sub:#475569; --bg:#f8fafc; --yellow:#facc15; }
* { box-sizing: border-box; }
body { margin:0; font: 17px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; color:var(--ink); background:var(--bg); }
header { background:#fff; color:var(--ink); border-bottom:4px solid var(--orange); padding:14px 20px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 16px; }
header a { color:var(--ink); text-decoration:none; font-weight:800; font-size:20px; }
header nav { display:flex; flex-wrap:wrap; gap:4px 16px; } header nav a { font-weight:600; font-size:15px; }
header nav a:hover { color:var(--blue); }
/* the page you're on: accent colour + underline, not a link (aria-current="page") */
header nav a[aria-current="page"] { color:var(--orange); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:5px; cursor:default; pointer-events:none; }
header .brand { display:flex; align-items:center; gap:8px; } header .brand img { height:84px; width:auto; display:block; } @media (max-width:600px){ header .brand img { height:60px; } }
main { max-width:820px; margin:0 auto; padding:24px 20px 60px; }
h1 { font-size:34px; line-height:1.15; margin:.4em 0 .3em; } h2 { margin-top:1.8em; font-size:22px; } h3 { margin-top:1.4em; font-size:18px; }
.hero { display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.hero img { width:320px; max-width:100%; border-radius:14px; box-shadow:0 8px 30px rgba(16,24,40,.25); background:#101828; }
.lead { font-size:20px; color:var(--sub); }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; margin-top:24px; }
.card { background:#fff; border:1px solid #e2e8f0; border-radius:12px; padding:16px; }
.card b { display:block; margin-bottom:4px; }
.note { background:#fef9c3; border:1px solid #fde047; border-radius:10px; padding:12px 14px; }
.todo { background:#fee2e2; border:1px solid #fca5a5; border-radius:6px; padding:1px 6px; font-weight:700; }
table { border-collapse:collapse; width:100%; font-size:15px; } th,td { text-align:left; border-bottom:1px solid #e2e8f0; padding:8px 6px; vertical-align:top; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:14px; } pre { background:#fff; border:1px solid #e2e8f0; border-radius:8px; padding:10px; overflow-x:auto; }
footer { color:var(--sub); font-size:14px; text-align:center; padding:30px 20px; border-top:1px solid #e2e8f0; }
footer a { color:var(--sub); margin:0 8px; }
ol li { margin:.35em 0; }