/* OPCC / D2 "Peninsula": the shared system (design/d2/PAGES.md section 1). Mobile-first.

   CLASS API for page builders (lanes B/C/D). Markup patterns are in the sections below.
   Layout      .box (1312 centred, gutters)  .grid + .c-A-B (12-col at 1024+, stacked below)  .section (paper)
               .section--forest  .section--home (96/64)  .section--rule (1px rule across the box, above)
   Type        .h1 .h2 .h2--home .h3 .h3-person .eyebrow .lead .prose .meta .lead-ui
   Page head   .page-head > .box.page-head__grid > .page-head__text (.eyebrow .h1 .lead .in-section) + .page-head__photo
   Nav         .breadcrumb  .in-section > .in-section__label + ul.pill-list > li > a.pill
   Callouts    .panel  .panel--soft  .panel--warn  (forest sections: panels flip automatically)  blockquote.pull
   Lists       ul.trail (fir rows; .trail--lg for 20px rows)  ul.people (.people--2col)  dl.closure-dl  ul.pdf-rows
   Cards       article.staff (.staff__photo .staff__head .staff__title .staff__bio)  div.place (+ .places grid)
   Links       a.pdf-link  a.text-link  .ext (external marker svg)  .pill  .btn .btn-primary .btn-outline .btn-lg
   Media       figure.photo (framed plain photo; .photo--ink for forest bands)  figure.plate (halftone, no frame)
   Tables      .table-scroll > table.data  (th scope=row first column; tr.is-total for the Patient Pay row)
   Misc        .sr-only  .stub-note  .nf-call  .nf-links  .rule-top
*/

/* Self-hosted fonts (SIL OFL 1.1, licence text in /assets/fonts/OFL.txt). Latin subset; Figtree is a variable file. */
@font-face { font-family: "Young Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/young-serif-latin.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); }

:root {
  --paper: #F4EFE6;
  --paper-2: #EDE6D8;
  --forest: #10352B;
  --forest-2: #0B2820;
  --ink: #1B2A24;
  --ink-2: #4A5A52;
  --mint: #BFE8C6;
  --pale-mint: #DDF3E0;
  --pale-ember: #F8E4DA;
  --green: #1FB53A;
  --green-ink: #157A2E;
  --blue: #0052BA;
  --ember: #B4471B;
  --ember-dark: #8E3614;
  --error: #9B2416;
  --rule: #CFC6B4;
  --white: #FFFFFF;

  --display: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: 20px;
  --box: 1312px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-bottom: 72px; /* nothing focused hides under the 56px call bar (WCAG 2.2 2.4.11) */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
}
body.has-callbar { padding-bottom: 56px; } /* room for the sticky call bar (phone) */

img, svg { display: block; max-width: 100%; }
svg { flex: none; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
main [id] { scroll-margin-top: 24px; }
address { font-style: normal; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Focus ---------- */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.facts :focus-visible,
.menu :focus-visible,
.clinics :focus-visible,
.section--forest :focus-visible,
.site-footer :focus-visible,
.form-footer :focus-visible {
  outline-color: var(--mint);
}
.btn-primary:focus-visible, .callbar:focus-visible { outline-color: var(--blue); }
.section--forest .btn-primary:focus-visible,
.site-footer .btn-primary:focus-visible { outline-color: var(--mint); }

.skip-link {
  position: absolute;
  left: 12px; top: -80px;
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  padding: 12px 18px;
  border: 1.5px solid var(--forest);
  border-radius: 999px;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Buttons, links, external marker ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms, color 150ms, border-color 150ms;
}
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 18px; }
.btn-primary, .btn-donate { background: var(--ember); color: #fff; border-color: var(--ember); }
.btn-primary:hover, .btn-donate:hover { background: var(--ember-dark); border-color: var(--ember-dark); }
.btn-outline { border-color: var(--forest); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--forest); color: var(--paper); }
.btn-paper { background: var(--paper); color: var(--forest); border-color: var(--paper); min-height: 56px; font-size: 18px; }
.btn-forest { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.btn-forest:hover { background: #0A241D; border-color: #0A241D; color: var(--paper); }
.btn-paper:hover { background: var(--mint); border-color: var(--mint); }
.btn .ext { margin-left: -2px; vertical-align: 0; }
/* long labels (PDF facts inside a button) may wrap to two lines */
.btn--wrap { height: auto; min-height: 48px; padding: 10px 22px; gap: 10px; border-radius: 28px; text-align: left; line-height: 1.25; }
.btn--wrap.btn-lg { min-height: 56px; padding: 12px 28px; }
.btn--wrap svg { flex: none; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.pdf-rows .pdf-rows__actions { display: flex; flex-wrap: wrap; gap: 12px 16px; }
.pdf-rows .pdf-rows__actions .btn { margin: 0; }
.section--forest .btn-outline { color: var(--paper); border-color: var(--paper); }
.section--forest .btn-outline:hover { background: var(--paper); color: var(--forest); }

.text-link {
  display: inline-block;      /* inline flow: a wrapped address keeps its arrow beside the last word */
  padding: 9px 0;
  min-height: 44px;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.text-link svg { display: inline-block; vertical-align: -4px; margin-left: 8px; }
.text-link:hover { text-decoration-color: var(--forest); }
.text-link--on-forest, .section--forest .text-link { color: var(--paper); }
.section--forest .text-link:hover { text-decoration-color: var(--paper); }

/* plain links inside running text */
main :where(p, li, dd, td, blockquote) a:where(:not([class])) {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
main :where(p, li, dd, td, blockquote) a:where(:not([class])):hover { text-decoration-thickness: 2px; }
.section--forest :where(p, li, dd, td, blockquote) a:where(:not([class])),
.clinics :where(p, li) a:where(:not([class])) { color: var(--mint); }
.section--forest :where(p, li, dd) a:where(:not([class])):hover { color: #fff; }

/* external-link marker: svg + <span class="sr-only"> (external site)</span> after the text */
.ext {
  display: inline-block;
  width: 16px; height: 16px;
  margin-left: 6px;
  vertical-align: -2px;
}

/* PDF link: the file facts are inside the link text */
.pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--blue);
  text-decoration: none;
}
.pdf-link span { text-decoration: underline; text-underline-offset: 3px; }
.pdf-link:hover span { text-decoration-thickness: 2px; }
.pdf-link svg { width: 16px; height: 16px; }
.section--forest .pdf-link, .clinics .pdf-link { color: var(--mint); }
.pdf-rows li { min-height: 44px; display: flex; align-items: center; }
.pdf-rows { display: grid; gap: 4px; }
.pdf-rows .btn { margin: 8px 0; }

/* ---------- Layout primitives ---------- */
.box {
  max-width: calc(var(--box) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.grid { display: grid; gap: 32px; }
figure.photo, figure.plate { margin: 0; }

.section { padding: 48px 0; }
.section--home { padding: 64px 0; }
.section--forest { background: var(--forest); color: var(--paper); }
.section--rule { padding-top: 0; }
.section--rule::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--rule);
  width: min(var(--box), 100% - 2 * var(--gutter));
  margin: 0 auto 48px;
}
.rule-top { border-top: 1px solid var(--rule); }

/* ---------- Type ---------- */
.eyebrow {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  color: var(--forest);
}
.section--forest .eyebrow { color: var(--mint); }
.eyebrow--brand { text-transform: none; letter-spacing: .02em; } /* keeps OPCC's own "REdisCOVERY" casing */
.h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
}
.h2--home { font-size: 36px; line-height: 1.1; }
.h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
}
.h3-person {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: var(--ink);
}
.section--forest :is(.h2, .h3) { color: var(--paper); }
.h2 + :is(p, ul, ol, dl, div, table, .prose) { margin-top: 20px; }
.h3 + :is(p, ul, ol, dl, div, table) { margin-top: 12px; }
.lead { font-size: 18px; line-height: 1.5; color: var(--ink-2); }
.lead-ui { font-size: 20px; line-height: 1.5; }
.meta { font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.section--forest .meta { color: var(--mint); }
.prose { max-width: 65ch; }
.prose > * + *, .section p + p { margin-top: 16px; }
.prose p + :is(ul, ol), .prose :is(ul, ol) + p { margin-top: 16px; }
.stub-note {
  display: inline-block;
  font-weight: 600;
  color: var(--ink-2);
  padding: 8px 14px;
  border: 1.5px dashed var(--ink-2);
}

/* ---------- Header (phone first) ---------- */
.site-header {
  height: 64px;
  background: var(--paper);
  border-bottom: 1px solid var(--forest);
}
.header-inner {
  height: 100%;
  max-width: calc(var(--box) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  min-height: 44px;
}
.badge {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  background: #fff;
  border: 1px solid var(--forest);
  border-radius: 8px;
  flex: none;
}
.badge img { width: 32px; height: auto; }
.ridge-mark { color: var(--forest); flex: none; }
.wordmark {
  font-family: var(--display);
  font-size: 20px;
  line-height: 1.1;
  white-space: nowrap;
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); /* hidden on phone */
}

.site-nav, .header-phone, .btn-donate { display: none; }

.menu-toggle {
  width: 44px; height: 44px;
  margin-right: -10px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  color: var(--forest);
}

/* ---------- Phone menu panel ---------- */
.menu {
  position: fixed; inset: 0;
  z-index: 60;
  background: var(--forest);
  color: var(--paper);
  padding: 0 var(--gutter) 32px;
  overflow-y: auto;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 240ms var(--ease), visibility 0s linear 240ms;
}
.menu.is-open {
  transform: none;
  visibility: visible;
  transition: transform 240ms var(--ease), visibility 0s;
}
.menu-top {
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.menu .brand { color: var(--paper); }
.menu .ridge-mark { color: var(--paper); }
.menu-close {
  width: 44px; height: 44px;
  margin-right: -10px;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0;
  color: var(--paper);
  cursor: pointer;
}
.menu-close svg { width: 24px; height: 24px; }
.menu-links { margin-top: 8px; }
.menu-links li + li { border-top: 1px solid var(--mint); }
.menu-links a {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  min-height: 60px;
  font-family: var(--display);
  font-size: 36px;
  line-height: 1.1;
  color: var(--paper);
  text-decoration: none;
}
.menu-links a[aria-current] { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-links a:hover { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-links li:last-child { border-bottom: 1px solid var(--mint); }
.menu-desc {
  display: block;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.3;
  color: var(--mint);
  text-decoration: none;
  margin-top: 2px;
  padding-bottom: 6px;
}
.menu-hours {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px;
  font-weight: 600;
  font-size: 17px;
  color: var(--paper);
}
.menu-hours .fir { color: var(--green); }
.menu-actions { margin-top: 20px; display: grid; gap: 12px; }
.menu-actions .btn { width: 100%; min-height: 56px; font-size: 18px; }
@media (max-height: 700px) {
  .menu-links a { min-height: 56px; font-size: 32px; }
}

html.menu-lock, html.menu-lock body { overflow: hidden; }

/* ---------- Closure notice (off by default; remove `hidden` to show) ---------- */
.notice {
  background: var(--pale-ember);
  border-top: 1px solid var(--ember);
  border-bottom: 1px solid var(--ember);
  color: var(--ink);
  min-height: 48px;
  padding: 12px var(--gutter);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.notice[hidden] { display: none; }
.notice p { max-width: 1312px; }
.notice svg { display: inline-block; vertical-align: -2px; color: var(--ember-dark); }
.notice strong { font-weight: 600; }
.notice a { color: var(--blue); text-underline-offset: 3px; margin-left: 8px; font-weight: 600; }

/* ---------- Patient strip ---------- */
.strip {
  background: var(--paper-2);
  border-bottom: 1px solid var(--forest);
}
.strip-inner {
  max-width: calc(var(--box) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
}
.strip a {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px;
  font-weight: 600; font-size: 16px; line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
.strip a + a { border-top: 1px solid var(--rule); }
.nowrap { white-space: nowrap; }
.strip .fir { color: var(--green-ink); }
.strip svg:not(.fir) { color: var(--forest); }
.strip a:hover span, .strip a:focus-visible span {
  text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 5px;
}

/* ---------- Page head (inner pages) ---------- */
.page-head {
  background: var(--paper);
  border-bottom: 1px solid var(--forest);
  padding: 28px 0;
}
.page-head__grid { display: grid; gap: 24px; }
.page-head__text .breadcrumb { margin-bottom: 16px; }
.page-head__text .h1 { margin-top: 8px; max-width: 16ch; }
.page-head__text .eyebrow + .h1 { margin-top: 8px; }
.page-head__text .lead { margin-top: 16px; max-width: 60ch; }
.page-head__text .in-section { margin-top: 24px; }
.page-head__photo {
  margin: 0 calc(-1 * var(--gutter));
}
.page-head__photo img {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 240px;
  object-fit: cover;
  object-position: 50% 40%;
}

/* breadcrumb */
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; }
.breadcrumb li { display: flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 16px; }
.breadcrumb li + li::before {
  content: "";
  width: 16px; height: 16px;
  margin: 0 8px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6' fill='none' stroke='%2310352B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.breadcrumb a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb [aria-current] { color: var(--ink-2); }
.breadcrumb ~ .eyebrow { display: none; } /* phone: the breadcrumb replaces the eyebrow */

/* "In this section" / "On this page" */
.in-section__label {
  font-weight: 600; font-size: 16px; line-height: 1.2;
  color: var(--forest);
  margin-bottom: 10px;
}
.pill-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border: 1.5px solid var(--forest);
  border-radius: 999px;
  font-weight: 600; font-size: 16px; line-height: 1.2;
  color: var(--ink);
  text-align: center;
  text-decoration: none;
  background: transparent;
  transition: background-color 150ms, color 150ms;
}
.pill:hover { background: var(--forest); color: var(--paper); }

/* ---------- Panels, pull quotes ---------- */
.panel {
  border: 1.5px solid var(--forest);
  padding: 20px;
  max-width: 65ch;
}
.panel--soft { background: var(--pale-mint); border: 0; }
.panel--warn { background: var(--pale-ember); border: 1.5px solid var(--error); color: var(--ink); }
.section--forest .panel { border-color: var(--paper); }
.section--forest .panel--soft { background: var(--pale-mint); color: var(--ink); border: 0; }

blockquote.pull {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  max-width: 30em;
}
blockquote.pull footer, blockquote.pull cite {
  display: block; margin-top: 12px;
  font-family: var(--sans); font-style: normal; font-size: 17px; color: var(--ink-2);
}

/* ---------- Photos ---------- */
.photo img { width: 100%; height: auto; border: 1px solid var(--rule); }
.photo--frame img { border-color: var(--forest); }
.section--forest .photo img { border: 0; }
.photo figcaption, .plate figcaption { margin-top: 8px; font-size: 16px; color: var(--ink-2); }

/* ---------- Lists: trail (fir rows), people ---------- */
.trail li {
  display: flex; align-items: flex-start; gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 17px; line-height: 1.5;
}
.trail li + li { border-top: 1px solid var(--rule); }
.trail .fir { color: var(--forest); margin-top: 4px; width: 20px; height: 20px; }
.trail a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--ink); font-weight: 600; text-underline-offset: 5px; text-decoration-color: var(--green); text-decoration-thickness: 2px; }
.trail p { font-weight: 400; font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.trail--lg li { font-weight: 600; font-size: 18px; padding: 14px 0; }
.trail--lg a { font-size: 18px; padding: 9px 0; margin: -9px 0; }
.section--forest .trail li + li { border-top-color: var(--mint); }
.section--forest .trail .fir { color: var(--green); }
.section--forest .trail, .section--forest .trail a { color: var(--paper); }
.section--forest .trail p { color: var(--mint); }
.section--forest .trail a { text-decoration-color: var(--green); }

.people li {
  padding: 10px 0;
  min-height: 44px;
  display: flex; align-items: center;
  border-top: 1px solid var(--rule);
  font-size: 17px; line-height: 1.4;
}
.people { border-bottom: 1px solid var(--rule); }
.people strong, .people b { font-weight: 600; }
.section--forest .people li { border-top-color: var(--mint); color: var(--paper); }
.section--forest .people { border-bottom-color: var(--mint); }

/* ---------- Staff card ---------- */
.staff { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 16px; align-items: center; }
.staff + .staff { border-top: 1px solid var(--rule); margin-top: 32px; padding-top: 32px; }
.staff__photo {
  width: 96px; height: 96px;
  object-fit: cover; object-position: 50% 20%;
  border: 1px solid var(--forest);
}
.staff__title { font-size: 17px; line-height: 1.4; color: var(--ink-2); }
.staff__bio { grid-column: 1 / -1; margin-top: 16px; max-width: 65ch; }
.staff__bio > * + * { margin-top: 16px; }
.staff:not(:has(.staff__photo)) { display: block; }

/* ---------- Location card ---------- */
.places { display: grid; gap: 24px; }
.place {
  border: 1.5px solid var(--forest);
  padding: 20px;
}
.place__name { font-weight: 600; font-size: 20px; line-height: 1.3; color: var(--ink); }
.place__line { font-size: 17px; }
.place__when { font-size: 17px; font-weight: 600; margin-top: 8px; }
.place__actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.place__actions a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--blue); text-underline-offset: 3px; }
.section--forest .place { border-color: var(--paper); }
.section--forest .place__name { color: var(--paper); }
.section--forest .place__actions a { color: var(--mint); }

/* ---------- Tables (sliding scale) ---------- */
.table-scroll { overflow-x: auto; }
.table-scroll:focus-visible { outline-offset: -3px; }
table.data { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.3; font-variant-numeric: tabular-nums; }
table.data caption { font-weight: 600; font-size: 17px; text-align: left; margin-bottom: 12px; color: var(--ink); }
table.data th, table.data td { padding: 10px 12px; border: 1px solid var(--rule); text-align: right; min-width: 92px; }
table.data thead th { background: var(--forest); color: var(--paper); font-weight: 600; border-color: var(--forest); }
table.data tbody tr:nth-child(even) { background: var(--paper-2); }
table.data tbody th { text-align: left; font-weight: 600; }
table.data tbody tr:nth-child(odd) th { background: var(--paper); }
table.data tbody tr:nth-child(even) th { background: var(--paper-2); }
table.data tbody th:first-child { position: sticky; left: 0; border-right: 1px solid var(--forest); }
table.data tr.is-total th, table.data tr.is-total td { font-weight: 600; border-top: 2px solid var(--forest); }
.table-hint { font-size: 16px; color: var(--ink-2); margin-bottom: 8px; }

/* ---------- Holiday closures (shared include) ---------- */
.closures .h2 { margin-bottom: 20px; }
.closures-intro p + p { margin-top: 16px; }
.closure-dl { margin-top: 20px; }
.closure-row { padding: 10px 0; border-top: 1px solid var(--rule); min-height: 44px; break-inside: avoid; }
.closure-row dt { font-weight: 600; }
.closure-row dd { color: var(--ink); }
.closure-note { color: var(--ink-2); font-size: 16px; }
.closure-dl .closure-row:last-child { border-bottom: 1px solid var(--rule); }
.closures-list .h3 { margin-top: 8px; }

/* ---------- 404 / privacy ---------- */
.nf-call { margin-bottom: 24px; }
.nf-links { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }
.prose .nf-call + p { margin-top: 0; }

/* ---------- Pre-footer ridge strip ---------- */
.ridge-strip { height: 56px; overflow: hidden; background: var(--paper); margin-top: 0; }
.ridge-strip img {
  width: 100%; height: 100%;
  max-width: none;
  object-fit: none;          /* deliberate: keeps the dots at 6px; cover would scale them to mush */
  object-position: 50% 0;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--forest); color: var(--paper); }
.footer-main { display: grid; gap: 32px; padding-top: 48px; padding-bottom: 32px; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.footer-brand .badge { width: 40px; height: 40px; }
.footer-brand .badge img { width: 32px; }
.footer-brand .ridge-mark { color: var(--paper); }
.footer-name { font-family: var(--display); font-size: 20px; line-height: 1.15; color: var(--paper); }
.footer-line { font-size: 17px; line-height: 1.5; }
.footer-line + .footer-line { margin-top: 8px; }
.site-footer a { color: var(--mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer a:hover { color: #fff; }
.site-footer .btn-primary { color: #fff; text-decoration: none; }
.footer-contact .footer-line a { display: inline-block; padding: 10px 0; margin: -6px 0; }
.footer-donate .btn { margin-top: 16px; min-height: 48px; }
.footer-thanks { margin-top: 12px; font-size: 16px; color: var(--mint); }
.footer-pages ul { display: grid; }
.footer-pages li { min-height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 4px 0; }
.footer-pages a { font-weight: 600; font-size: 17px; display: block; padding: 9px 0; margin: -9px 0; text-decoration: none; }
.footer-pages a:hover { text-decoration: underline; }
.footer-desc { font-size: 16px; color: var(--mint); line-height: 1.3; }
.footer-nondisc { border-top: 1px solid var(--mint); padding-top: 24px; padding-bottom: 24px; }
.footer-nondisc { box-sizing: content-box; }
.footer-nondisc p { font-size: 16px; line-height: 1.5; max-width: 90ch; }
.footer-nondisc a { display: inline-block; margin-left: 4px; font-weight: 600; }
.footer-util { background: var(--forest-2); color: var(--mint); }
.footer-util-inner { display: grid; padding-top: 4px; padding-bottom: 4px; font-size: 16px; }
.footer-util-inner li { min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; column-gap: .3em; }
.footer-util-inner a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Hero (phone) ---------- */
.hero { text-align: center; }
.hero-copy { padding: 24px var(--gutter) 24px; }

.headline {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 1120px;
  margin: 0 auto;
  text-wrap: balance;
}
.headline .hl { display: inline; }

.hero .lead {
  margin: 20px auto 0;
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
}

.hero-actions {
  margin: 20px auto 0;
  max-width: 480px;
  display: grid;
  gap: 16px;
  justify-items: center;
}
.hero-actions .btn-primary { width: 100%; }
.hero-actions .btn-outline { display: none; }

/* Fact band (phone: stacked rows) */
.facts {
  background: var(--forest);
  color: var(--paper);
  padding: 20px var(--gutter);
  text-align: left;
}
.facts ul { max-width: 480px; margin: 0 auto; }
.facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
}
.facts li + li { border-top: 1px solid var(--mint); }
.facts .fir { color: var(--green); flex: none; }
.facts a { display: inline-block; padding: 11px 0; color: var(--mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.facts a:hover { color: #fff; }

/* Halftone landscape */
.ridge {
  height: 260px;
  overflow: hidden;
  background: var(--paper);
}
.ridge img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* The one motion moment: reveal from the bottom up */
@media (prefers-reduced-motion: no-preference) {
  .js .ridge img {
    clip-path: inset(100% 0 0 0);
  }
  .js .ridge.is-in img {
    clip-path: inset(0);
    transition: clip-path 900ms var(--ease) 150ms;
  }
  /* safety net: if the script never runs, show the plate anyway */
  .js .ridge:not(.is-in) img {
    animation: ridge-safety 1ms linear 3s forwards;
  }
  @keyframes ridge-safety { to { clip-path: inset(0); } }
}

/* Short phones: the headline carries the lead's words, so the number stays above the fold */
@media (max-width: 1023.98px) and (max-height: 800px) {
  .hero .lead { display: none; }
}

/* ---------- Sticky call bar (phone only) ---------- */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  height: 56px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--ember);
  color: #fff;
  border-top: 1px solid var(--ember-dark);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 240ms var(--ease), visibility 0s linear 240ms;
}
.callbar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 240ms var(--ease), visibility 0s;
}
.callbar:hover { background: var(--ember-dark); }

/* ---------- Home: section 2 (forest, the clinics) ---------- */
.clinics {
  background: var(--forest);
  color: var(--paper);
  padding: 64px var(--gutter) 64px;
}
.clinics-inner {
  max-width: var(--box);
  margin: 0 auto;
  display: grid;
  gap: 40px;
}
.section-heading {
  font-family: var(--display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  color: var(--paper);
  max-width: 20ch;
}
.section-sub {
  margin-top: 16px;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  color: var(--mint);
}
.section-body {
  margin-top: 20px;
  max-width: 58ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--paper);
}
.section-sub + .section-body { margin-top: 24px; }
.section-body + .section-body { margin-top: 12px; }
.clinics-photo { margin: 0; }
.clinics-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 45% 50%;
}
.clinic-rows li {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 0;
}
.clinic-rows li + li { border-top: 1px solid var(--mint); }
.clinic-rows .fir { color: var(--green); margin-top: 14px; }
.clinic-link {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.15;
  color: var(--paper);
  text-decoration: none;
}
.clinic-link:hover, .clinic-link:focus-visible { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.clinic-rows p { font-size: 17px; line-height: 1.5; color: var(--paper); max-width: 60ch; }

/* ---------- Home: REdisCOVERY, volunteers, history ---------- */
.rd-lead { margin-top: 20px; font-size: 17px; max-width: 58ch; color: var(--paper); }
.rd-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.rd-jump .text-link { margin-top: 16px; }
.vol-p { margin-top: 20px; max-width: 58ch; }
.vol-text .pdf-rows { margin-top: 16px; }
.vol-text .text-link { margin-top: 8px; }
.vol-photo img { width: 240px; max-width: 100%; height: auto; }
.hist-text p { max-width: 62ch; }
.hist-text .h2 + p { margin-top: 20px; }
.hist-text .text-link { margin-top: 12px; }
.hist-photo img { width: 100%; height: auto; }

/* ---------- Form pages: chrome only (forms.css owns everything else) ---------- */
.form-header { height: 64px; background: var(--paper); border-bottom: 1px solid var(--forest); }
.form-header-inner {
  height: 100%;
  max-width: calc(var(--box) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.form-header .brand { gap: 10px; }
.form-header .ridge-mark { display: none; }
.form-header .wordmark {
  position: static; width: auto; height: auto; overflow: visible; clip: auto;
  white-space: normal; font-size: 16px; line-height: 1.1; max-width: 13ch;
}
.header-phone-form {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;
  font-weight: 600; font-size: 16px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.header-phone-form svg { color: var(--forest); }
.form-main { max-width: calc(720px + 2 * var(--gutter)); margin: 0 auto; padding: 32px var(--gutter) 64px; }
.form-h1 { margin-bottom: 20px; }
.form-footer { background: var(--forest); color: var(--paper); padding: 32px var(--gutter); }
.form-footer-inner { max-width: 720px; margin: 0 auto; display: grid; gap: 6px; }
.form-footer .footer-brand { margin-bottom: 4px; }
.form-footer a { color: var(--mint); text-underline-offset: 3px; }
.form-footer-links { display: flex; gap: 24px; margin-top: 8px; }
.form-footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Tablet: 768+ ---------- */
@media (min-width: 768px) {
  :root { --gutter: 32px; }

  .facts { padding: 24px var(--gutter); }
  .facts ul {
    max-width: none;
    display: flex; flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 0;
  }
  .facts li, .facts li + li { border: 0; padding: 0; min-height: 44px; white-space: nowrap; }
  .facts li:nth-child(-n+3) { order: 1; }
  .facts ul::after { content: ""; flex-basis: 100%; height: 0; order: 2; }
  .facts li:nth-child(n+4) { order: 3; }
  .facts li:first-child .fir, .facts li:nth-child(4) .fir { display: none; }
  .facts li + li:not(:nth-child(4)) { margin-left: 16px; }
  .facts li .fir { margin-right: 4px; }
  .facts li { font-size: 16px; }

  .hero-actions { max-width: none; display: flex; justify-content: center; }
  .hero-actions .btn-primary { width: auto; }
  .hero-actions .btn-outline { display: inline-flex; }
  .hero-actions .btn-outline { min-width: 266px; } /* keeps the Call button where it was with the shorter OPCC label */
  .hero-actions .text-link { display: none; }

  .hero .lead { font-size: 20px; }

  .clinics { padding: 80px var(--gutter); }
  .section-heading { font-size: 44px; }
  .clinics-photo img { aspect-ratio: 4 / 3; max-width: 480px; }
  .clinic-link { font-size: 28px; }

  .section { padding: 64px 0; }
  .section--rule::before { margin-bottom: 64px; }
  .h1 { font-size: 48px; line-height: 1.05; }
  .h2 { font-size: 36px; line-height: 1.1; }
  .h2--home { font-size: 44px; }
  .h3 { font-size: 24px; line-height: 1.2; }
  .h3-person { font-size: 22px; line-height: 1.2; }
  .lead { font-size: 20px; }
  .eyebrow + .h1 { margin-top: 8px; }
  .breadcrumb ~ .eyebrow { display: block; }
  .breadcrumb + .eyebrow { margin-top: 0; }

  .panel { padding: 24px; }
  blockquote.pull { font-size: 28px; padding: 32px 0; }
  .trail--lg li, .trail--lg a { font-size: 20px; }

  .pill-list { display: flex; flex-wrap: wrap; gap: 12px; }
  .pill { padding: 0 18px; min-height: 44px; }

  .page-head { padding: 40px 0; }
  .page-head__photo { margin: 0; }
  .page-head__photo img { max-height: none; }

  .strip-inner { grid-template-columns: 1fr auto; align-items: center; }
  @media (min-width: 1024px) { .strip .strip-phone { display: none; } .strip-inner { grid-template-columns: 1fr; } }
  .strip a { min-height: 48px; }
  .strip a + a { border-top: 0; }

  .ridge-strip { height: 72px; }
  .staff { grid-template-columns: 120px minmax(0, 1fr); gap: 0 24px; }
  .staff__photo { width: 120px; height: 120px; }
  .staff__bio { grid-column: 2; margin-top: 0; }
  .staff__head { grid-column: 2; align-self: end; }
  .staff__photo { grid-row: 1 / span 2; align-self: start; }
  .staff:not(:has(.staff__bio)) .staff__photo { grid-row: 1; align-self: center; }
  .staff:not(:has(.staff__bio)) .staff__head { align-self: center; }
  .staff__head + .staff__bio { margin-top: 12px; }

  .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .place { padding: 24px; }
  .closure-dl { column-count: 2; column-gap: 40px; }

  .footer-main { padding-top: 64px; }
  .footer-util-inner { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; }
  .footer-util-inner li + li::before {
    content: "";
    width: 16px; height: 16px; margin: 0 12px 0 12px;
    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6 3.6 7h2.6L2.2 12h11.6L9.8 7h2.6zM8 12v2.6' fill='none' stroke='%231FB53A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    flex: none;
  }
  .footer-util-inner li { min-height: 56px; }
  .footer-pages ul { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 24px; }
  .form-header { height: 76px; }
  .form-header .wordmark { max-width: none; font-size: 20px; white-space: nowrap; }
  .form-header .ridge-mark { display: block; }
}

/* ---------- Desktop: 1024+ ---------- */
@media (min-width: 1024px) {
  :root { --gutter: 40px; }

  body, body.has-callbar { padding-bottom: 0; }
  .callbar { display: none; }
  .menu, .menu-toggle { display: none; }

  .site-header { height: 76px; }
  .header-inner { gap: 16px; justify-content: flex-start; }
  .badge { width: 48px; height: 48px; }
  .badge img { width: 40px; }
  .brand { gap: 12px; }

  .site-nav { display: block; flex: 1 1 auto; }
  .site-nav ul { display: flex; justify-content: center; gap: 20px; }
  .site-nav a {
    display: inline-flex; align-items: center;
    min-height: 44px;
    font-weight: 600; font-size: 16px;
    color: var(--ink);
    text-decoration: none;
  }
  .site-nav a:hover, .site-nav a[aria-current] {
    text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .header-phone {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px;
    font-weight: 600; font-size: 16px;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .header-phone svg { color: var(--forest); }
  .header-phone:hover span { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 2px; text-underline-offset: 6px; }
  .btn-donate { display: inline-flex; height: 44px; padding: 0 22px; }

  .hero-copy { padding: 64px var(--gutter) 0; }
  .headline { font-size: clamp(40px, 5vw, 72px); line-height: 1; text-wrap: initial; }
  .headline .hl { display: block; }
  .hero .lead { margin-top: 24px; }
  .hero-actions { margin-top: 24px; }

  .facts { margin-top: 40px; padding: 0 24px; min-height: 72px; display: flex; align-items: center; justify-content: center; }
  .facts ul { padding: 16px 0; }

  .ridge { height: 480px; }

  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; align-items: start; }
  .c-1-4 { grid-column: 1 / span 4; }
  .c-1-5 { grid-column: 1 / span 5; }
  .c-1-6 { grid-column: 1 / span 6; }
  .c-1-7 { grid-column: 1 / span 7; }
  .c-1-8 { grid-column: 1 / span 8; }
  .c-1-9 { grid-column: 1 / span 9; }
  .c-1-12 { grid-column: 1 / -1; }
  .c-3-9 { grid-column: 3 / span 7; }
  .c-5-8 { grid-column: 5 / span 4; }
  .c-6-12 { grid-column: 6 / span 7; }
  .c-7-12 { grid-column: 7 / span 6; }
  .c-8-12 { grid-column: 8 / span 5; }
  .c-9-12 { grid-column: 9 / span 4; }
  .c-10-12 { grid-column: 10 / span 3; }

  .section { padding: 64px 0; }
  .section--home { padding: 96px 0; }
  .section--rule { padding-top: 0; }

  .page-head__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .page-head__text { grid-column: 1 / span 8; }
  .page-head__grid:has(.page-head__photo) .page-head__text { grid-column: 1 / span 7; }
  .page-head__photo { grid-column: 8 / span 5; align-self: start; margin-top: 4px; }
  .page-head__photo img { max-height: none; object-position: 50% 50%; }

  .clinics { padding: 96px var(--gutter); }
  .clinics-inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .clinics-text { grid-column: 1 / span 7; grid-row: 1; }
  .clinics-photo { grid-column: 8 / span 5; grid-row: 1 / span 2; justify-self: end; width: 100%; max-width: 480px; }
  .clinics-photo img { aspect-ratio: 4 / 3; max-width: none; }
  .clinic-rows { grid-column: 1 / span 7; grid-row: 2; margin-top: 0; }
  .section-heading { font-size: clamp(40px, 3.9vw, 56px); line-height: 1.05; }
  .clinic-rows { margin-top: -8px; }

  .h2--home { font-size: clamp(40px, 3.9vw, 56px); line-height: 1.05; }
  .rd-text { grid-row: 1; }
  .rd-photo { grid-row: 1 / span 2; }
  .rd-jump { grid-row: 2; }
  .vol-photo { justify-self: end; }
  .vol-photo img { width: 360px; }

  .footer-main { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .footer-contact { grid-column: 1 / span 4; }
  .footer-donate { grid-column: 5 / span 3; }
  .footer-pages { grid-column: 8 / span 5; }
  .ridge-strip { height: 72px; }
}

@media (min-width: 1260px) {
  .site-nav ul { gap: 28px; }
}
@media (min-width: 1400px) {
  .wordmark {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
    margin-left: -4px;
    color: var(--ink);
  }
}

/* 768-1023: six facts as a balanced 2 x 3 grid (the flex rows orphaned the phone number) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .facts ul { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 0 48px; }
  .facts ul::after { display: none; }
  .facts li, .facts li:nth-child(-n+3), .facts li:nth-child(n+4) { order: 0; }
  .facts li + li, .facts li + li:not(:nth-child(4)) { margin-left: 0; }
  .facts li:first-child .fir, .facts li:nth-child(4) .fir { display: block; }
  .facts li .fir { margin-right: 12px; }
}

/* One line only when the band can hold all six facts at 16px (below that: two centred rows) */
@media (min-width: 1440px) {
  .facts ul { flex-wrap: nowrap; }
  .facts ul::after { display: none; }
  .facts li, .facts li:nth-child(-n+3), .facts li:nth-child(n+4) { order: 0; }
  .facts li:nth-child(4) .fir { display: block; }
  .facts li + li, .facts li + li:not(:nth-child(4)) { margin-left: 16px; }
  .facts li .fir { margin-right: 16px; }
  .facts li { min-height: 0; gap: 0; }
}

@media (min-width: 1440px) {
  :root { --gutter: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open, .callbar, .callbar.is-shown { transition: none; }
  .btn, .pill { transition: none; }
}

/* ordinal suffixes keep OPCC's own <sup> markup but stay body size (nothing visible under 16px) */
.closures sup, .notice sup { font-size: inherit; vertical-align: baseline; line-height: inherit; }