:root { --ink: #15233a; --muted: #5d6d80; --line: #d6dde5; --accent: #e85a82; --sea: #0a6c8b; }
* { box-sizing: border-box; }
body { margin: 0; background: #f4f8fa; color: var(--ink); font: 16px/1.75 Inter, ui-sans-serif, system-ui, sans-serif; }
header, footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px max(6vw, 24px); background: #fff; border-bottom: 1px solid var(--line); }
header > a { color: var(--ink); font: 700 24px/1 Georgia, serif; text-decoration: none; letter-spacing: -.04em; }
header b { color: var(--accent); } nav { display: flex; flex-wrap: wrap; gap: 18px; }
nav a, footer a { color: var(--sea); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-decoration: none; } nav a:hover, footer a:hover { text-decoration: underline; }
main { width: min(760px, calc(100% - 48px)); margin: 0 auto; padding: 88px 0 110px; }.eyebrow { margin: 0 0 12px; color: #657286; font-size: 11px; font-weight: 700; letter-spacing: .14em; } h1 { margin: 0 0 28px; font: 700 clamp(38px, 6vw, 66px)/1.04 Georgia, serif; letter-spacing: -.055em; } h2 { margin: 45px 0 10px; font: 700 25px/1.25 Georgia, serif; letter-spacing: -.025em; } p { margin: 0 0 19px; color: var(--muted); }.contact a { color: var(--sea); font-size: clamp(20px, 3vw, 30px); font-weight: 700; overflow-wrap: anywhere; } footer { border-top: 1px solid var(--line); border-bottom: 0; font-size: 11px; color: #657286; }
@media (max-width: 600px) { header, footer { align-items: flex-start; flex-direction: column; gap: 15px; } main { padding: 56px 0 70px; } }