:root { --ink: #22262b; --accent: #1f3864; --muted: #5c6670; --line: #d9dde2; --bg: #ffffff; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 Georgia, "Times New Roman", serif; }
header, main, footer { max-width: 760px; margin: 0 auto; padding: 0 1.25rem; }
header { padding-top: 2.5rem; }
header a.brand { display: inline-block; line-height: 0; }
/* Served at twice the height it is shown at, so the ring of words stays sharp on a dense screen.
   One image, so it cannot break across two lines; on a narrow phone it simply scales down. */
header a.brand img { width: 486px; max-width: 100%; height: auto; }
nav { margin-top: 0.6rem; font: 0.95rem Arial, Helvetica, sans-serif; }
nav a { color: var(--muted); text-decoration: none; margin-right: 1.1rem; }
nav a:hover, nav a[aria-current] { color: var(--accent); }
main { padding: 2.5rem 1.25rem 3rem; }
h1 { font: 700 2rem/1.15 Arial, Helvetica, sans-serif; color: var(--accent); margin: 0 0 1rem; }
h2 { font: 700 1.2rem/1.3 Arial, Helvetica, sans-serif; color: var(--accent); margin: 2rem 0 0.5rem; border-bottom: 1px solid var(--line); padding-bottom: 0.25rem; }
p, li { max-width: 68ch; }
a { color: var(--accent); }
.cta { display: inline-block; margin-top: 1rem; padding: 0.7rem 1.2rem; background: var(--accent); color: #fff; text-decoration: none; font: 700 1rem Arial, Helvetica, sans-serif; border-radius: 4px; }
.cta:hover { background: #172b4d; }
ul.kits { padding-left: 1.2rem; }
footer { border-top: 1px solid var(--line); padding: 1.5rem 1.25rem 2.5rem; color: var(--muted); font: 0.9rem/1.5 Arial, Helvetica, sans-serif; }
footer a { color: var(--muted); }
small.updated { display: block; color: var(--muted); font: 0.9rem Arial, Helvetica, sans-serif; margin-bottom: 1.5rem; }
.notice { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; padding: 0.8rem 1.25rem; font: 0.95rem/1.45 Arial, Helvetica, sans-serif; box-shadow: 0 -2px 8px rgba(0,0,0,0.15); }
.notice p { margin: 0; max-width: none; }
.notice a { color: #fff; text-decoration: underline; }
.notice button { background: #fff; color: var(--accent); border: 0; border-radius: 4px; padding: 0.5rem 1rem; font: 700 0.95rem Arial, Helvetica, sans-serif; cursor: pointer; }
.notice button:hover { background: #e9edf3; }
.notice[hidden] { display: none; }
body { padding-bottom: 5rem; }