/* Small pages (accessibility, not found). Same type, palette and controls as the main page. Root paths: the 404 can be served at any depth. */
@font-face { font-family: 'Fraunces'; src: url(/fonts/fraunces.woff2) format('woff2-variations'), url(/fonts/fraunces.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/fonts/inter.woff2) format('woff2-variations'), url(/fonts/inter.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --paper: #f4eee6; --paper-2: #ebe3d6; --ink: #27261f; --olive: #4b5537; --muted: #5f594f; --juniper: #3b4632; --clay: #7a3d24; --cream: #f7f2ea;
  --line: rgba(39, 38, 31, .2); --side: clamp(16px, 3.4vw, 56px);
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.76, 0, .24, 1);
  --ring: var(--ink); --ring-gap: var(--cream);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--sans); letter-spacing: -.005em; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--ring-gap); border-radius: 1px; }
.dark { --ring: var(--cream); --ring-gap: var(--ink); }
.skip { position: fixed; left: 12px; top: 12px; z-index: 30; background: var(--ink); color: var(--cream); padding: 12px 18px; font-weight: 500; transform: translateY(-160%); transition: transform .25s var(--ease); text-decoration: none; --ring: var(--cream); --ring-gap: var(--ink); }
.skip:focus { transform: none; }
main:focus { outline: none; }

/* header: the wordmark goes home */
.top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 76px; padding: 0 var(--side); background: var(--juniper); color: var(--cream); --ring: var(--cream); --ring-gap: var(--ink); }
.top-a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font: 500 0.8125rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.top-a:last-child { justify-self: end; }
.mark { display: grid; justify-items: center; text-decoration: none; font: 400 14px/1.08 var(--serif); font-variation-settings: 'opsz' 14; letter-spacing: .2em; text-transform: uppercase; padding: 8px 0; min-height: 44px; }
.mark span:last-child { font-size: 11px; letter-spacing: .3em; margin-top: 4px; font-family: var(--sans); font-weight: 500; }

/* type */
.eyebrow { font: 500 0.8125rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.big { font: 220 clamp(46px, 10.4vw, 160px)/.9 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: 0; word-spacing: .12em; text-transform: uppercase; }
.big span { display: block; } .big span + span { padding-left: 1.05em; }
.lede { font: 300 clamp(24px, 2.6vw, 40px)/1.16 var(--serif); font-variation-settings: 'opsz' 72; letter-spacing: -.012em; color: var(--olive); text-wrap: pretty; }

/* controls, as on the main page */
.cta-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.pill { display: inline-flex; align-items: stretch; gap: 3px; text-decoration: none; font: 500 0.875rem/1 var(--sans); }
.pill > span:first-child, .pill i { background: var(--cream); color: var(--ink); display: inline-flex; align-items: center; min-height: 46px; transition: background-color .3s, color .3s; }
.pill > span:first-child { padding: 0 18px; }
.pill i { font-style: normal; width: 46px; justify-content: center; overflow: hidden; position: relative; }
.pill i b { display: block; font-weight: 400; transition: transform .7s var(--ease); }
.pill i b + b { position: absolute; left: 0; right: 0; text-align: center; transform: translateX(-160%); }
.pill-ghost > span:first-child { background: rgba(24, 22, 15, .82); color: var(--cream); box-shadow: inset 0 0 0 1px rgba(247, 242, 234, .7); }
.pill-dark > span:first-child, .pill-dark i { background: var(--ink); color: var(--cream); }
.u { display: inline-block; padding: 12px 0; margin: -12px 0; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 14px) / 100% 1px no-repeat; }
@keyframes uwipe { 0% { background-size: 100% 1px; background-position-x: 100%; } 48% { background-size: 0% 1px; background-position-x: 100%; } 52% { background-size: 0% 1px; background-position-x: 0%; } 100% { background-size: 100% 1px; background-position-x: 0%; } }
.top-a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease); }
@media (hover: hover) {
  .top-a:hover::after { transform: scaleX(1); transform-origin: left; }
  .u:hover { animation: uwipe .9s var(--ease-io); }
  .pill:hover > span:first-child, .pill:hover i { background: var(--ink); color: var(--cream); }
  .pill-ghost:hover > span:first-child { background: var(--cream); color: var(--ink); }
  .pill-dark:hover > span:first-child, .pill-dark:hover i { background: var(--olive); }
  .pill:hover i b:first-child { transform: translateX(160%); }
  .pill:hover i b + b { transform: none; }
}
.top-a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.pill:active > span:first-child, .pill:active i { background: var(--ink); color: var(--cream); }

/* accessibility statement */
.doc { padding: clamp(56px, 9vw, 128px) var(--side) clamp(72px, 10vw, 140px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.6vw, 28px); }
.doc > * { grid-column: 4 / 11; }
.doc h1 { font: 300 clamp(40px, 5.6vw, 88px)/1 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.02em; color: var(--olive); margin: 14px 0 28px; }
.doc .lede { margin-bottom: clamp(40px, 6vw, 72px); }
.doc h2 { font: 500 0.8125rem/1.3 var(--sans); letter-spacing: .09em; text-transform: uppercase; margin: 44px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.doc p, .doc li { max-width: 62ch; }
.doc p + p { margin-top: 12px; }
.doc ul { display: grid; gap: 12px; }
.doc li { position: relative; padding-left: 22px; }
.doc li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: currentColor; }
.doc .reach { font: 300 clamp(24px, 2.4vw, 34px)/1.2 var(--serif); font-variation-settings: 'opsz' 48; color: var(--ink); }
.doc .small { font-size: 0.875rem; color: var(--muted); }
.foot { background: var(--juniper); color: var(--cream); padding: 28px var(--side); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 0.875rem; --ring: var(--cream); --ring-gap: var(--ink); }
@media (max-width: 959px) { .doc > * { grid-column: 1 / 13; } }
@media (max-width: 639px) { .top { min-height: 64px; } .top-a .long { display: none; } }

/* not found: the hero's opening still behind a calm note */
.nf { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; color: var(--cream); background: #2b2a22; overflow: hidden; --ring: var(--cream); --ring-gap: var(--ink); }
.nf-media, .nf-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nf-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 12, .62) 0%, rgba(20, 18, 12, .44) 30%, rgba(20, 18, 12, .5) 60%, rgba(20, 18, 12, .82) 100%), radial-gradient(80% 60% at 30% 50%, rgba(20, 18, 12, .5), rgba(20, 18, 12, 0) 76%); }
.nf .top { position: relative; background: none; }
.nf-in { position: relative; align-self: end; display: grid; gap: 26px; padding: 48px var(--side) clamp(40px, 8vh, 88px); max-width: 1180px; }
.nf-in p:not(.eyebrow) { max-width: 40ch; font: 400 clamp(1.125rem, calc(1.5vw * var(--ts, 1)), 1.375rem)/1.4 var(--serif); font-variation-settings: 'opsz' 24; text-shadow: 0 1px 18px rgba(10, 9, 6, .35); }
.nf-in p.crisis { font: 400 0.9375rem/1.5 var(--sans); max-width: none; }
.nf-in .crisis a { font-weight: 500; }
.nf .big { text-shadow: 0 1px 30px rgba(10, 9, 6, .25); }
@media (max-width: 759px) { .pill-ghost { display: inline-flex; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; }
  .pill > span:first-child, .pill i, .skip { border: 1px solid ButtonText; }
  .u { text-decoration: underline; }
}

/* Visual QA (2026-10-25): no lone full stop, a comfortable reading size and measure on wide screens */
.nw { white-space: nowrap; }
.doc p, .doc li { font-size: 1.0625rem; line-height: 1.6; max-width: 64ch; text-wrap: pretty; }
.doc .small { font-size: 0.9375rem; }
@media (min-width: 960px) { .doc > * { grid-column: 3 / 11; } }
.doc .lede { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.16; max-width: 32ch; }
.doc .reach { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.2; max-width: none; }

/* display settings chosen on the main page apply here too (saved on this device) */
:root { --ts: 1; }
html.a-lg { font-size: 112.5%; --ts: 1.125; }
html.a-hc { --muted: #433f37; --olive: #3d4a2e; --clay: #6b3420; --line: rgba(39, 38, 31, .45); }
html.a-hc :focus-visible { outline-width: 3px; outline-offset: 3px; box-shadow: 0 0 0 3px var(--ring-gap); }
html.rm *, html.rm *::before, html.rm *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
.doc p + ul, .doc ul + p { margin-top: 16px; }
.doc li b { font-weight: 600; }

/* not found, 2026-11-02: one plate from the places field with its real caption, one plain line, and Book, Call and 988.
   The plate arrives with the field's own curve (out of the paper, from small and soft to sharp: 1 - 2^-6t) */
.nf2 { min-height: calc(100svh - 76px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 1.6vw, 28px); align-items: center; padding: clamp(40px, 7vw, 96px) var(--side); }
.nf2-plate { grid-column: 1 / 6; margin: 0; }
.nf2-plate picture { display: block; aspect-ratio: 1600 / 1064; overflow: hidden; border-radius: 18px; background: #8e8a80; }
.nf2-plate img { width: 100%; height: 100%; object-fit: cover; }
.nf2-plate figcaption { margin-top: 12px; font: italic 400 1rem/1.3 var(--serif); color: var(--muted); }
.nf2-in { grid-column: 7 / 13; display: grid; gap: 22px; justify-items: start; }
.nf2-h { font: 300 clamp(40px, 5.4vw, 84px)/1 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.02em; color: var(--olive); }
.nf2-in > p:not(.eyebrow):not(.crisis) { max-width: 40ch; font: 400 clamp(1.125rem, calc(1.4vw * var(--ts, 1)), 1.3125rem)/1.45 var(--serif); font-variation-settings: 'opsz' 24; }
.nf2 .crisis { font-size: 0.9375rem; padding-top: 14px; border-top: 1px solid var(--line); }
.nf2 .crisis a { font-weight: 500; }
.pill-line > span:first-child { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
@media (hover: hover) { .pill-line:hover > span:first-child { background: var(--ink); color: var(--cream); } }
@keyframes plate-in { from { opacity: 0; transform: scale(.62); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nf2-plate { animation: plate-in 1.6s cubic-bezier(.16, 1, .3, 1) both; transform-origin: 70% 50%; }
.nf2-in > * { animation: rise-in .9s cubic-bezier(.16, 1, .3, 1) both; }
.nf2-in > :nth-child(2) { animation-delay: .35s; } .nf2-in > :nth-child(3) { animation-delay: .43s; } .nf2-in > :nth-child(4) { animation-delay: .51s; } .nf2-in > :nth-child(5) { animation-delay: .59s; } .nf2-in > :nth-child(1) { animation-delay: .27s; }
@media (max-width: 959px) { .nf2 { align-content: start; row-gap: 36px; } .nf2-plate { grid-column: 1 / 11; } .nf2-in { grid-column: 1 / 13; } }
@media (max-width: 639px) { .nf2-plate { grid-column: 1 / 13; } }
@media (prefers-reduced-motion: reduce) { .nf2-plate, .nf2-in > * { animation: none; } }
html.rm .nf2-plate, html.rm .nf2-in > * { animation: none; }
html.a-hc .pill-line > span:first-child { box-shadow: inset 0 0 0 2px var(--ink); }

/* accessibility statement: the Display panel, printed open, so the switches it describes work right here */
.dp { margin: 22px 0 6px; padding: 8px 22px 18px; background: var(--paper-2); border-radius: 18px; max-width: 560px; }
.dp-l { display: grid; }
.dp-l li { padding: 0 !important; }
.dp-l li::before { content: none !important; }
.dp-s { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dp-l li:last-child .dp-s { border-bottom: 0; }
.dp-t { display: grid; gap: 2px; } .dp-n { font-weight: 500; } .dp-d { font-size: 0.9375rem; color: var(--muted); }
.dp-s i { width: 44px; height: 26px; border-radius: 13px; border: 1px solid var(--ink); position: relative; transition: background-color .3s; }
.dp-s i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease), background-color .3s; }
.dp-s[aria-checked="true"] i { background: var(--juniper); border-color: var(--juniper); }
.dp-s[aria-checked="true"] i::after { transform: translateX(18px); background: var(--cream); }
.dp-s[aria-disabled="true"] { cursor: default; }
.dp-s:focus-visible { outline-offset: 4px; }
.dp-f { margin-top: 6px; font-size: 0.875rem !important; color: var(--muted); }
@media (forced-colors: active) { .dp-s i, .dp-s i::after { border: 1px solid ButtonText; } }

/* ---- the main page's revamped system, shared by the 404 and accessibility pages ---- */
@font-face { font-family: 'Fraunces Fallback'; src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Times'); size-adjust: 112.3%; ascent-override: 87.1%; descent-override: 22.7%; line-gap-override: 0%; }
:root { --serif: 'Fraunces', 'Fraunces Fallback', 'Iowan Old Style', Georgia, serif; }
/* labels: sentence case, no tracking, 14 px, muted ink */
.eyebrow, .doc h2, .top-a { font: 500 0.875rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; }
.eyebrow, .doc h2 { color: var(--muted); }
.doc h2 { border-top: 0; padding-top: 0; margin-top: 48px; }
/* no text under 12 px */
.mark span:last-child { font-size: 12px; }
/* statements: the main page's display sizes, regular weight below 28 px */
.nf2-h, .doc h1 { font-weight: 400; letter-spacing: -.02em; }
.nf2-plate figcaption { font-style: normal; }

/* topic pages (src/topics.py): the accessibility page's column, with Book and Call under the opening line */
.topic .lede { margin-bottom: 28px; }
.topic .cta-row { margin-bottom: 10px; }
.topic .cta-row + .small { margin-bottom: clamp(16px, 3vw, 32px); }
.tq { margin: 6px 0 0; }
.tq blockquote { margin: 0; }
.tq blockquote p { font: 300 clamp(22px, 2.2vw, 30px)/1.25 var(--serif); font-variation-settings: 'opsz' 48; color: var(--olive); max-width: 36ch; }
.tq figcaption { margin-top: 10px; font-size: 0.9375rem; color: var(--muted); }
.doc ul.tl { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px 28px; }
.foot p { max-width: 100%; }