:root { color-scheme: light; --ink:#123b40; --muted:#49656a; --teal:#06666b; --line:#cbdfe0; --paper:#ffffff; --wash:#f1f9f9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:1rem; line-height:1.7; }
a { color:var(--teal); text-underline-offset:.22em; overflow-wrap:anywhere; }
a:hover { text-decoration-thickness:2px; }
a:focus-visible { outline:3px solid #b54c08; outline-offset:5px; border-radius:2px; }
.skip { position:absolute; top:-10rem; left:1rem; z-index:2; padding:.6rem 1rem; background:white; }
.skip:focus { top:1rem; }
.header { background:var(--wash); border-bottom:1px solid var(--line); }
.header-inner { max-width:72rem; margin:auto; padding:1.25rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:.9rem; color:var(--ink); text-decoration:none; font-weight:800; font-size:1.25rem; }
.brand img { width:3.5rem; height:3.5rem; border-radius:.8rem; }
nav { display:flex; gap:1.5rem; flex-wrap:wrap; }
nav a { color:var(--muted); padding:.5rem 0; font-weight:600; text-decoration:none; }
nav a[aria-current="page"] { color:var(--teal); border-bottom:3px solid var(--teal); }
main { max-width:48rem; margin:auto; padding:3rem 2rem 4rem; }
h1 { font-size:clamp(2.15rem,5vw,3.25rem); line-height:1.12; letter-spacing:-.035em; margin:0 0 1.5rem; }
h2 { font-size:1.3rem; line-height:1.3; margin:2.5rem 0 .85rem; letter-spacing:-.015em; }
p { margin:.75rem 0 1.15rem; }
li { margin:.75rem 0; }
ul { padding-left:1.4rem; }
.intro { margin:0 0 2rem; font-size:1.15rem; }
.contact { background:var(--wash); padding:1.2rem 1.4rem; border-left:4px solid var(--teal); margin:1.5rem 0 2rem; border-radius:0 .7rem .7rem 0; }
.contact-label { display:block; font-size:.9rem; color:var(--muted); font-weight:600; margin-bottom:.3rem; }
.contact a { font-weight:700; }
.draft { padding:1rem 1.25rem; background:#fff3dd; border:1px solid #b97b19; border-radius:.6rem; margin:0 0 2rem; }
.meta { color:var(--muted); }
footer { border-top:1px solid var(--line); padding:1.5rem 2rem 2.5rem; color:var(--muted); font-size:.9rem; }
.footer-inner { max-width:44rem; margin:auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.8rem 1.5rem; }
@media(max-width:480px) { .header-inner { padding:1rem 1.25rem; gap:.75rem; } nav { gap:1.4rem; } main { padding:2rem 1.25rem 3rem; } .contact { padding:1rem; } footer { padding:1.5rem 1.25rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }