:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  color: #173044;
  background: #f7faf9;
}

* { box-sizing: border-box; }
body { margin: 0; }
a { color: #086078; }
a:hover { color: #06465a; }
a:focus-visible { outline: 3px solid #d59c27; outline-offset: 3px; }

.container { width: min(100% - 2.5rem, 70rem); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -5rem; padding: .5rem .75rem; background: #fff; z-index: 10; }
.skip-link:focus { top: .5rem; }
.site-header { background: #fff; border-bottom: 1px solid #d8e5e6; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5rem; }
.site-name { color: #173044; font-weight: 750; font-size: 1.1rem; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .25rem; }
nav a { display: inline-block; padding: .45rem .7rem; border-radius: .4rem; text-decoration: none; }
nav a[aria-current="page"] { background: #e3f2f2; color: #06465a; font-weight: 650; }
main { min-height: 62vh; padding-block: 3.5rem 5rem; }
.hero, .page-content { max-width: 48rem; }
.eyebrow { color: #34656b; font-size: .85rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3 { line-height: 1.25; color: #102c3c; }
h1 { font-size: clamp(2.2rem, 6vw, 3.7rem); margin: .6rem 0 1.2rem; }
h2 { font-size: 1.55rem; margin-top: 2.8rem; }
h3 { font-size: 1.16rem; margin: 0 0 .5rem; }
p, li { max-width: 70ch; }
.lead { font-size: 1.2rem; font-weight: 550; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.card { display: block; padding: 1.35rem; border: 1px solid #d8e5e6; border-radius: .75rem; background: #fff; color: inherit; text-decoration: none; }
.card:hover { border-color: #73a7ad; }
.card p { margin: 0; }
.site-footer { padding-block: 1.5rem; border-top: 1px solid #d8e5e6; color: #4d6570; font-size: .9rem; }

@media (max-width: 640px) {
  .container { width: min(100% - 2rem, 70rem); }
  .header-inner { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 1rem; }
  nav a { padding-inline: .55rem; }
  main { padding-block: 2.5rem 4rem; }
  .card-grid { grid-template-columns: 1fr; }
}