:root { color-scheme: light dark; --brand: #2d6a7b; --paper: #fff; --ink: #172124; --muted: #526166; --line: #d9e2e4; --soft: #edf5f6; }
* { box-sizing: border-box; }
html { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.75; }
body { margin: 0; color: var(--ink); background: var(--paper); }
a { color: #17677b; text-underline-offset: .15em; }
header, footer { background: var(--soft); }
header { border-bottom: 1px solid var(--line); }
footer { border-top: 1px solid var(--line); color: var(--muted); }
.wrap { width: min(100% - 2rem, 52rem); margin-inline: auto; padding: 1.25rem 0; }
main.wrap { padding-block: 2.5rem 4rem; }
nav { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; align-items: center; }
.brand { font-weight: 750; color: var(--brand); margin-right: auto; text-decoration: none; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.25; margin: 0 0 .5rem; }
h2 { font-size: 1.3rem; margin-top: 2.25rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line); }
.meta, .note { color: var(--muted); }
.notice { padding: 1rem 1.2rem; background: var(--soft); border-left: .3rem solid var(--brand); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 2rem; }
.card { padding: 1.2rem; border: 1px solid var(--line); border-radius: .6rem; }
.card h2 { margin-top: 0; border: 0; }
address { font-style: normal; }
@media (prefers-color-scheme: dark) { :root { --paper: #111719; --ink: #edf4f5; --muted: #b3c1c4; --line: #344348; --soft: #192326; } a { color: #73c6d8; } }