:root { --green: #0b4a3c; --on-green: #f2fbf7; --pink: #ffb3d1; --bg: #08201b; --surface: #0f2e27; --fg: #e9f5f1; --muted: #a5c0b9; --line: #24483f; --accent: #ffb3d1; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.7 "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; }
a { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.wrap { max-width: 720px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
header { background: var(--green); color: var(--on-green); padding-block: 22px; }
.bar { max-width: 1160px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px; }
header a { color: inherit; text-decoration: none; }
.logo { font: 900 1.6rem/1 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; }
header nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 600; font-size: .95rem; }
main { padding-block: 48px 72px; }
h1, h2 { font-family: "Big Shoulders Display", Impact, sans-serif; font-weight: 900; text-transform: uppercase; line-height: 1; text-wrap: balance; }
h1 { font-size: clamp(2.8rem, 9vw, 4.75rem); margin: 0 0 14px; }
h2 { font-size: clamp(1.8rem, 5vw, 2.4rem); margin: 40px 0 12px; padding-top: 26px; border-top: 1px solid var(--line); }
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin-bottom: 6px; }
.meta { color: var(--muted); font-size: .95rem; }
.answer { padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); font-size: 1.15rem; }
.card { display: block; padding-block: 22px; border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.card strong { display: block; font: 900 1.9rem/1.05 "Big Shoulders Display", Impact, sans-serif; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.card:hover strong { text-decoration: underline; }
.next { margin-top: 40px; padding: 24px; background: var(--pink); color: #0d2620; }
.next a { color: #0d2620; font-weight: 600; }
footer { padding-block: 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }