:root {
  --ink: #17202a;
  --muted: #607080;
  --accent: #2d5f73;
  --paper: #fbfaf7;
  --line: #d9e1e4;
}

body { color: var(--ink); background: var(--paper); }
.navbar { border-bottom: 1px solid var(--line); }
.navbar-brand { font-weight: 700; letter-spacing: .02em; }
.hero { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 4rem; padding: 7rem 0 5rem; border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); line-height: .95; letter-spacing: -.06em; margin-bottom: 1.25rem; }
.hero-copy > p { max-width: 42rem; font-size: 1.3rem; line-height: 1.65; color: var(--muted); }
.hero-note { align-self: end; border-left: 3px solid var(--accent); padding: .5rem 0 .5rem 1.5rem; color: var(--muted); }
.profile-photo { width: 60px; height: 60px; object-fit: cover; border-radius: 50%; margin: 0 0 1.5rem; border: 3px solid white; box-shadow: 0 5px 15px rgba(23, 32, 42, .12); }
.hero-note h3 { color: var(--ink); font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.hero-links { display: flex; gap: .75rem; margin-top: 2rem; }
.btn { border-radius: 999px; padding: .65rem 1.2rem; }
main { max-width: 980px; }
main h2 { margin-top: 3.5rem; border-bottom: 1px solid var(--line); padding-bottom: .6rem; }
main h3 { margin-top: 2rem; }
.callout { border-radius: 0; }
@media (max-width: 700px) { .hero { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 0 3rem; } .hero h1 { font-size: 4rem; } }