/* Shared public reading layout: the same Warm editorial identity as the site. */
:root { --ink: #172019; --ink-soft: #48524c; --muted: #48524c; --line: #dfe4dd; --cream: #fbf9f6; --paper: #fff; --cobalt: #0052cc; --cobalt-ink: #0046b3; }
* { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 100px; }
html, body { margin: 0; padding: 0; }
body { font-family: "Inter Variable", Inter, Arial, sans-serif; background: var(--cream); color: var(--ink); font-size: 16px; line-height: 1.7; accent-color: var(--cobalt); caret-color: var(--cobalt); }
::selection { color: #142a49; background: #c9defe; }
body > header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; padding: 20px max(40px,calc((100% - 1176px) / 2)); border-bottom: 1px solid var(--line); background: var(--cream); }
body header .brand.gid-brand { min-height: 44px; color: var(--ink); font-size: 24px; font-weight: 800; letter-spacing: -.04em; }
body header .brand.gid-brand img { width: 30px; height: 30px; }
body header nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
body header nav a { display: inline-flex; align-items: center; min-height: 44px; font-family: inherit; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
body header nav a:hover, body header nav a[aria-current="page"] { color: var(--cobalt); text-decoration: underline; text-underline-offset: 7px; }
body main { max-width: 880px; margin: 0 auto; padding: 56px 40px 72px; overflow-wrap: anywhere; }
body .kicker { display: none; }
body h1, body h2 { font-family: inherit; font-weight: 730; letter-spacing: -.03em; text-wrap: balance; color: var(--ink); }
body h1 { max-width: 22ch; font-size: clamp(36px,4.5vw,54px); line-height: 1.1; margin: 0 0 20px; }
body .updated { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
body main section { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 28px 0; margin: 0; background: transparent; }
body h2 { font-size: 24px; line-height: 1.3; margin: 0 0 14px; }
body p { color: var(--ink-soft); margin: 0; }
body p + p { margin-top: 12px; }
body ul, body ol { padding-left: 24px; margin: 12px 0 0; color: var(--ink-soft); }
body li { padding-left: 4px; margin: 8px 0; }
body strong { color: var(--ink); font-weight: 650; }
body a { color: var(--cobalt-ink); text-underline-offset: 3px; }
body a:hover { text-decoration-thickness: 2px; }
body a:focus-visible, body main:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 4px; }
body > footer { max-width: 1176px; margin: 0 auto; border-top: 1px solid var(--line); padding: 28px 40px 48px; font-size: 14px; color: var(--ink-soft); }
.document-footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 20px; }
.document-footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.document-skip { position: absolute; z-index: 10; top: 12px; left: 20px; padding: 12px 18px; transform: translateY(-180%); border-radius: 12px; background: #fff; color: var(--cobalt); }
.document-skip:focus { transform: translateY(0); }
@media (max-width: 640px) {
  body > header { padding: 16px 20px; gap: 8px; }
  body header .brand.gid-brand { font-size: 22px; }
  body header nav { width: 100%; gap: 4px 22px; }
  body main { padding: 32px 20px 48px; }
  body h1 { font-size: 36px; }
  body h2 { font-size: 23px; }
  body > footer { padding: 24px 20px 36px; }
  .document-footer-links { gap: 4px 20px; }
}