:root {
  --ink: #102b4e;
  --blue: #005ea8;
  --pale: #edf4fa;
  --line: #bfd1e1;
  --paper: #ffffff;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--pale); font: 18px/1.6 Georgia, serif; }
a { color: var(--blue); }
a:focus { outline: 3px solid #f7c948; outline-offset: 2px; }
header { background: var(--ink); color: white; padding: 1.5rem max(1.25rem, calc((100% - 68rem) / 2)); }
header a { color: white; text-decoration: none; }
header p { margin: .25rem 0 0; font: 16px/1.4 system-ui, sans-serif; }
main { max-width: 68rem; margin: 2rem auto; padding: 2.5rem; background: var(--paper); box-shadow: 0 4px 20px #102b4e1c; }
h1, h2, h3 { line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin: 0 0 1rem; }
h2 { margin-top: 2.5rem; }
.eyebrow { color: #476887; font: 700 14px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.summary { font-size: 1.25rem; max-width: 48rem; }
.meta { border-block: 1px solid var(--line); margin: 2rem 0; padding: .8rem 0; font: 14px/1.4 system-ui, sans-serif; }
.meta span { display: inline-block; margin-right: 1.5rem; }
.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); padding: 0; list-style: none; }
.cards a { display: block; min-height: 100%; padding: 1.1rem; border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.cards a:hover { background: var(--pale); }
.cards strong { display: block; color: var(--blue); }
.notice { padding: 1rem 1.25rem; border-left: .4rem solid var(--blue); background: var(--pale); }
footer { max-width: 68rem; margin: 0 auto 2rem; color: #476887; font: 14px/1.4 system-ui, sans-serif; }
@media (max-width: 42rem) { main { margin: 0; padding: 1.5rem; } }