/* 4ᵗʰ Place — document pages (standard, license, placard kit) */
:root {
  --cobalt: #0C3F7C; --navy: #08305F; --cobalt-tint: #1E5499;
  --bone: #F4F0E8; --vellum: #ECE5D6; --stone: #675F54;
  --ink: #1A1B1F; --mist: #C4C9D2; --hair: #DDD5C2;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bone); color: var(--ink); }
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; }
a { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(12,63,124,0.35); transition: text-decoration-color 0.2s; }
a:hover { text-decoration-color: var(--cobalt); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; background: var(--cobalt); color: var(--bone); padding: 10px 18px; border-radius: 2px; text-decoration: none; z-index: 100; transition: top 0.15s; }
.skip-link:focus { top: 12px; }

/* Nav */
nav.site { padding: 24px 0; border-bottom: 1px solid var(--hair); position: sticky; top: 0; background: var(--bone); z-index: 10; }
nav.site .row { max-width: 1000px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.nav-mark { font-family: 'Source Serif 4', Georgia, serif; font-variation-settings: 'opsz' 60,'wght' 600; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--cobalt); text-decoration: none; }
.nav-mark sup { font-size: 0.45em; }
.nav-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.nav-links a { font-size: 14px; text-decoration: none; color: var(--ink); }
.nav-links a:hover { color: var(--cobalt); }

/* Layout */
main.doc { max-width: 1000px; margin: 0 auto; padding: 0 40px; }
.doc-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; padding: 64px 0 96px; }
article { max-width: 720px; }

/* Table of contents */
.toc { position: sticky; top: 96px; font-size: 13.5px; line-height: 1.5; border-left: 2px solid var(--hair); padding-left: 18px; }
.toc::before { content: "Contents"; display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cobalt); font-weight: 600; margin-bottom: 12px; }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc ul ul { display: none; }
.toc li { margin: 0 0 8px; }
.toc a { text-decoration: none; color: var(--stone); }
.toc a:hover { color: var(--cobalt); }

/* Title block */
header.title-block { padding: 64px 0 8px; border-bottom: 1px solid var(--hair); }
header.title-block .inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; }
h1.title { font-family: 'Source Serif 4', Georgia, serif; font-variation-settings: 'opsz' 60,'wght' 600; font-size: 46px; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 14px; color: var(--ink); }
.subtitle { font-size: 14px; color: var(--stone); font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.01em; }

/* Article typography */
article h1 { font-family: 'Source Serif 4', Georgia, serif; font-variation-settings: 'opsz' 60,'wght' 600; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; margin: 8px 0 20px; }
article h2 { font-family: 'Source Serif 4', Georgia, serif; font-variation-settings: 'opsz' 60,'wght' 600; font-size: 26px; line-height: 1.2; letter-spacing: -0.02em; margin: 56px 0 16px; padding-top: 24px; border-top: 1px solid var(--cobalt); color: var(--ink); }
article h3 { font-family: 'Source Serif 4', Georgia, serif; font-variation-settings: 'opsz' 32,'wght' 600; font-size: 19px; margin: 32px 0 10px; }
article p, article li { font-size: 16px; line-height: 1.65; }
article strong { font-weight: 600; }
article ul, article ol { padding-left: 22px; }
article li { margin-bottom: 8px; }
article hr { border: 0; border-top: 1px solid var(--hair); margin: 40px 0; }
article a { word-break: break-word; }
article code { font-family: 'IBM Plex Mono', monospace; font-size: 0.88em; background: var(--vellum); padding: 1px 6px; border-radius: 3px; }
blockquote { margin: 24px 0; padding: 24px 28px; background: var(--vellum); border-left: 4px solid var(--cobalt); border-radius: 4px; }
blockquote p { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; font-variation-settings: 'opsz' 32,'wght' 500; font-size: 20px; line-height: 1.4; margin: 0; color: var(--ink); }
em { font-style: italic; }

/* Footer */
footer.site { padding: 48px 0; background: var(--vellum); border-top: 1px solid var(--hair); }
footer.site .inner { max-width: 1000px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 12px; color: var(--stone); flex-wrap: wrap; }
footer.site a { color: var(--stone); }
.meta-mark { font-family: 'Source Serif 4', Georgia, serif; font-variation-settings: 'opsz' 60,'wght' 600; font-size: 30px; color: var(--cobalt); }
.meta-mark sup { font-size: 0.42em; }

@media (max-width: 820px) {
  .doc-wrap { grid-template-columns: 1fr; gap: 0; padding: 40px 0 72px; }
  .toc { position: static; border-left: 0; border-top: 1px solid var(--hair); padding: 20px 0 0; margin-bottom: 32px; }
  h1.title { font-size: 34px; }
  main.doc, nav.site .row, header.title-block .inner, footer.site .inner { padding-left: 24px; padding-right: 24px; }
}