:root{--paper:#F1F8FA;--card:#FFFFFF;--ink:#15313A;--primary:#12647A;--accent:#8A3E1C;--wash:#D4EDF2;--line:color-mix(in srgb,var(--ink) 20%,transparent)}*{box-sizing:border-box}html{color-scheme:light}body{margin:0;background:var(--paper);color:var(--ink);font:18px/1.72 Georgia, serif}a{color:var(--primary);text-decoration-thickness:.1em;text-underline-offset:.18em}a:focus-visible,input:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.sp-mast,main,footer{width:min(1120px,calc(100% - 2rem));margin:auto}.sp-mast{padding:1.25rem 0;border-bottom:4px solid var(--primary)}.sp-brand,h1,h2,h3{font-family:Gill Sans, 'Century Gothic', sans-serif;letter-spacing:-.02em}.sp-brand{font-weight:800;font-size:1.35rem;text-decoration:none;color:var(--ink)}.sp-mast p{margin:.15rem 0 .8rem}nav{display:flex;gap:.4rem 1rem;flex-wrap:wrap}nav a{font-size:.88rem}main{padding:2.5rem 0 4rem}article{display:grid;gap:1.4rem}.sp-hero{padding:clamp(1.5rem,5vw,4rem);background:linear-gradient(135deg,var(--card),var(--wash));border:1px solid var(--line);border-left:10px solid var(--primary);border-radius:1rem}.sp-eyebrow{text-transform:uppercase;letter-spacing:.14em;font:700 .78rem/1.2 Gill Sans, 'Century Gothic', sans-serif;color:var(--primary)}h1{font-size:clamp(2.35rem,7vw,5.7rem);line-height:.96;margin:.4rem 0 1rem;max-width:15ch}h2{font-size:clamp(1.45rem,3vw,2.2rem);line-height:1.15;margin:0 0 .8rem}p{max-width:76ch}.sp-lede{font-size:1.15rem;max-width:67ch}article>section,.sp-calculator,.sp-transparency{background:var(--card);border:1px solid var(--line);border-radius:.85rem;padding:clamp(1.2rem,3vw,2.25rem);box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 7%,transparent)}.sp-calculator{border-top:8px solid var(--accent)}form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:end}.sp-field{display:grid;gap:.4rem;font-family:Gill Sans, 'Century Gothic', sans-serif;font-weight:700}.sp-field small{font-family:Georgia, serif;font-weight:400;font-size:.78rem}input{width:100%;padding:.85rem;border:2px solid var(--primary);border-radius:.4rem;background:#fff;color:var(--ink);font:inherit}button{padding:.95rem 1.1rem;border:0;border-radius:.4rem;background:var(--primary);color:#fff;font:800 1rem Gill Sans, 'Century Gothic', sans-serif;cursor:pointer}.sp-result{margin-top:1.25rem;padding:1rem;background:var(--wash);border-left:6px solid var(--accent);display:grid;gap:.25rem}.sp-result strong{font:800 clamp(1.5rem,4vw,2.7rem)/1 Gill Sans, 'Century Gothic', sans-serif}details{margin-top:1rem}.sp-transparency{border-style:dashed;border-width:2px}li{margin:.45rem 0}footer{padding:2rem 0 4rem;border-top:4px solid var(--primary)}footer nav a{margin-right:.5rem}@media(max-width:760px){form{grid-template-columns:1fr}h1{font-size:clamp(2.25rem,14vw,4rem)}body{font-size:17px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}} /* pool.css — components tokens.css does not cover: data tables, notes, readouts. */ /* article is a grid (tokens.css), so every
is a grid item and inherits min-width:auto. A wide table inside then stretches its section past the viewport and the whole page scrolls sideways instead of the table scrolling inside its own box. min-width:0 down the chain is what actually lets overflow-x:auto engage. */ article,article>*,section,.sp-calc{min-width:0} /* A long unbreakable token (an email address, a URL) is the other way a page scrolls sideways. break-word only breaks when the word genuinely cannot fit. */ main{overflow-wrap:break-word} .sp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.1rem 0;min-width:0;max-width:100%;border:1px solid var(--line);border-radius:.5rem} table{border-collapse:collapse;width:100%;min-width:34rem;font:15px/1.5 Georgia,serif} caption{caption-side:top;text-align:left;padding:.7rem .9rem;font:600 .84rem/1.4 Gill Sans,'Century Gothic',sans-serif;color:var(--ink);background:var(--wash)} th,td{padding:.55rem .9rem;border-bottom:1px solid var(--line);text-align:right;vertical-align:top} thead th{background:var(--wash);font:700 .8rem/1.3 Gill Sans,'Century Gothic',sans-serif;text-align:right;position:sticky;top:0} thead th:first-child,tbody th{text-align:left} tbody th{font-weight:600;white-space:nowrap} tbody tr:nth-child(even){background:color-mix(in srgb,var(--wash) 35%,transparent)} code{font:600 .88em ui-monospace,Menlo,monospace;background:var(--wash);padding:.05em .35em;border-radius:.25rem} .sp-note{margin:1.2rem 0;padding:1rem 1.1rem;border-radius:.5rem;border-left:6px solid var(--accent);background:color-mix(in srgb,var(--wash) 55%,#fff)} .sp-note-h{font:700 .95rem/1.4 Gill Sans,'Century Gothic',sans-serif;margin:0 0 .4rem} .sp-note p{margin:.35rem 0} .sp-note-limit{border-left-color:#8A3E1C} .sp-note-assume{border-left-color:#12647A} .sp-note-ok{border-left-color:#2C6E49} /* A verbatim excerpt from a primary document. The quotation and the sentence saying what it settles are visually distinct on purpose — the reader has to be able to see where the agency stops speaking and this site starts. */ .sp-quote{margin:1.35rem 0} .sp-quote blockquote{margin:0;padding:1rem 1.2rem;background:var(--wash);border-left:6px solid var(--primary);border-radius:.4rem} .sp-quote blockquote p{margin:0;max-width:64ch;font-size:1.02rem} .sp-quote figcaption{margin:.5rem 0 0;font-size:.82rem;line-height:1.55;opacity:.9;max-width:76ch} .sp-quote-note{display:block;margin-top:.25rem} .sp-quote-means{margin:.6rem 0 0} .sp-quote-h{display:block;font:700 .78rem/1.3 Gill Sans,'Century Gothic',sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)} .sp-calc{background:var(--card);border:1px solid var(--line);border-top:8px solid var(--accent);border-radius:.85rem;padding:clamp(1.2rem,3vw,2.25rem);box-shadow:0 10px 30px color-mix(in srgb,var(--ink) 7%,transparent);margin:1.6rem 0} /* Grid items default to min-width:auto, so a long