/* Theme stylesheet for the SSSEVA concept — the whole visual system from
   DESIGN-DNA.md, generated from tokens (an OKLCH ramp solved from one seed
   hue + a fluid clamp() type scale solved from two viewport anchors) rather
   than hand-picked values. Non-obvious decision: --focus-ring is redefined
   inside .band-harbor because the raw --azalea seed only clears 3:1 against
   --paper, not against --harbor (verified: 1.98:1) — a lighter ramp step
   (azalea-300, 6.82:1 on harbor) carries the ring on the dark register band. */

@font-face { font-family: 'Piazzolla Variable'; src: url('fonts/piazzolla-variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('fonts/rethink-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('fonts/rethink-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Rethink Sans'; src: url('fonts/rethink-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* -- palette -- */
  --paper: #fbfbfd;
  --ink: #14161d;
  --harbor: #062a4d;
  --marsh: #4c6a2f;
  /* --amber owns every status/notice state (closures, form errors, alerts).
     --azalea is the brand accent and never carries alert meaning — noted
     here at the token declarations so a later contributor does not wire
     the raspberry into a warning. */
  --amber: #8a5a00;
  --azalea: #a8144b;
  --azalea-50: #fff1f3;
  --azalea-100: #ffdee3;
  --azalea-200: #ffbcc8;
  --azalea-300: #ff91a8;
  --azalea-400: #f05f85;
  --azalea-500: #cc3e68;
  --azalea-600: #ad1b4f;
  --azalea-700: #870039;
  --azalea-800: #5e0025;
  --azalea-900: #390013;

  /* -- type: Piazzolla (display) / Rethink Sans (body), fluid clamp()
     scale solved through 360px/1280px anchors, body floor 19px, fine-print
     floor 15px (elder-legible bet) -- */
  --face-display: 'Piazzolla Variable', Georgia, 'Times New Roman', serif;
  --face-body: 'Rethink Sans', system-ui, -apple-system, Arial, sans-serif;
  --fs-fine: clamp(0.9375rem, 0.913rem + 0.109vw, 1rem);
  --fs-body: clamp(1.1875rem, 1.1386rem + 0.217vw, 1.3125rem);
  --fs-lead: clamp(1.425rem, 1.3252rem + 0.443vw, 1.68rem);
  --fs-h3: clamp(1.71rem, 1.5377rem + 0.766vw, 2.1504rem);
  --fs-h2: clamp(2.052rem, 1.7779rem + 1.218vw, 2.7525rem);
  --fs-h1: clamp(2.4624rem, 2.0473rem + 1.845vw, 3.5232rem);
  --fs-display: clamp(2.9549rem, 2.3465rem + 2.704vw, 4.5097rem);
  --measure: 62ch;

  /* -- rhythm -- */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 2.75rem;
  --space-5: 4.5rem;
  --space-6: 7rem;
  --radius: 6px;

  /* Focus ring: light-room default. Redefined per register band below. */
  --focus-ring: var(--azalea);
  --hero-scrim-alpha: 0.52;

  color-scheme: light;
}

/* -- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--face-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
/* height:auto is the required companion to max-width:100%. Without it the
   width/height attributes on every photo keep their intrinsic pixel height
   while the width shrinks, so images render squashed: measured 0.83x of true
   aspect on desktop and 0.24x (a 4.2x vertical stretch) at 390px. The two
   rules below that need a fixed height are more specific and still win. */
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--face-display); font-optical-sizing: auto; font-weight: 600; line-height: 1.12; margin: 0 0 var(--space-2); text-wrap: balance; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--space-2); max-width: var(--measure); }
p.lede { font-size: var(--fs-lead); }
a { color: var(--azalea); text-underline-offset: 0.14em; }
.band-harbor a:not(.btn) { color: var(--paper); text-decoration-color: var(--azalea-300); }
ul, ol { padding-left: 1.2em; }
small, .fine { font-size: var(--fs-fine); }

.visually-hidden { 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: 0.5rem; top: -3rem; background: var(--harbor); color: var(--paper); padding: 0.7rem 1.1rem; border-radius: var(--radius); z-index: 60; transition: top 0.15s; }
.skip-link:focus { top: 0.5rem; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
.band-harbor, .site-header, .mobile-nav-panel { --focus-ring: var(--azalea-300); }
.band-paper, main, .site-footer { --focus-ring: var(--azalea-700); }

/* The gutter is a plain 1.25rem. It was written as a centering calc --
   max(1.25rem, calc((100vw - 76rem) / 2 + 1.25rem)) -- which is the correct
   formula for a FULL-BLEED element, but .wrap is already capped at 76rem and
   centered by margin-inline: auto, so with border-box the calc centered the
   column a second time from inside and ate it. Measured content width was
   1176px at a 1216px viewport, 1112px at 1280, 952px at 1440, and 472px at
   1920: every page on the site narrowed as the window grew. */
.wrap { max-width: 76rem; margin-inline: auto; padding-inline: 1.25rem; }
section { padding-block: var(--space-5); }
.eyebrow { font-family: var(--face-body); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: var(--fs-fine); color: var(--azalea-700); margin: 0 0 var(--space-1); }
.band-harbor .eyebrow { color: var(--azalea-300); }

/* -- buttons + links: 48px minimum target -- */
/* A <button> does not inherit the document font. Left unset it renders at the
   UA default 13.3px, which is how the masthead Search button, the footer Sign
   up button and /give/'s donate button became the smallest type on a site whose
   fine-print floor is 15px -- in the header chrome of every route. Form
   controls are included for the same reason. */
button, input, select, textarea { font-family: var(--face-body); font-size: var(--fs-body); }
/* Single-link action rows -- the /give/ locality pairs, the document library's
   "Download the original PDF", the homepage news teasers, the footer phone
   number -- are row actions rather than inline prose links, so they carry the
   48px target the DNA claims instead of the ~21-28px their text height alone
   gives them. Links inside running prose are untouched. */
p.fine > a:only-child,
.doc-item-secondary > a:only-child,
.library-band li > a:only-child,
.footer-id p > a:only-child { display: inline-flex; align-items: center; min-height: 48px; }
.btn { display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; padding: 0.75rem 1.4rem; background: var(--azalea); color: var(--paper); text-decoration: none; font-weight: 700; border-radius: var(--radius); border: 2px solid var(--azalea); }
.btn:hover, .btn:focus-visible { background: var(--azalea-700); border-color: var(--azalea-700); }
.btn-ghost { background: transparent; color: var(--azalea); }
.band-harbor .btn-ghost { color: var(--paper); border-color: var(--paper); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--azalea); color: var(--paper); }
.tel-link { font-weight: 700; white-space: nowrap; }

/* -- proto banner -- */
.proto-banner { background: var(--harbor); color: var(--paper); font-size: var(--fs-fine); }
.proto-banner p { max-width: none; margin: 0; padding: 0.6rem 1.25rem; text-align: center; }
.proto-banner a { color: var(--paper); }

/* -- masthead -- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--azalea-100); }
.masthead { display: flex; align-items: center; gap: var(--space-2); padding: 0.75rem 1.25rem; max-width: 76rem; margin-inline: auto; flex-wrap: wrap; }
.brand { display: block; flex: 0 0 auto; }
.brand img { height: 44px; width: auto; }
.omnibox { flex: 1 1 260px; min-width: 0; position: relative; }
.omni-field { display: flex; min-width: 0; }
.omni-field input { flex: 1; min-width: 0; min-height: 48px; padding: 0 0.9rem; border: 2px solid var(--azalea-200); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); font-size: 1rem; font-family: var(--face-body); }
.omni-field input:focus-visible { outline-offset: -2px; }
.omni-field button { min-height: 48px; padding: 0 1.1rem; background: var(--azalea); color: var(--paper); border: 2px solid var(--azalea); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 700; }
.omni-field button:hover, .omni-field button:focus-visible { background: var(--azalea-700); }
.omni-suggestions { list-style: none; margin: 0; padding: 0.35rem; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); background: var(--paper); border: 1px solid var(--azalea-200); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(6, 42, 77, 0.18); max-height: 70vh; overflow: auto; }
.omni-suggestions[hidden] { display: none; }
.omni-suggestions li[role="presentation"] { padding: 0.4rem 0.6rem; font-size: var(--fs-fine); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--marsh); }
.omni-suggestions li[role="option"] { padding: 0.55rem 0.6rem; border-radius: 4px; cursor: pointer; }
.omni-suggestions li[role="option"] strong { display: block; }
.omni-suggestions li[role="option"] .omni-snip, .omni-suggestions li[role="option"] .omni-meta { display: block; font-size: var(--fs-fine); color: #4b4f5c; }
.omni-suggestions li.is-active, .omni-suggestions li[role="option"]:hover { background: var(--azalea-50); }
.omni-suggestions li.omni-ask strong { color: var(--azalea-700); }

.menu-btn { display: none; min-height: 48px; min-width: 48px; align-items: center; justify-content: center; padding: 0 1rem; border: 2px solid var(--azalea-200); border-radius: var(--radius); font-weight: 700; cursor: pointer; list-style: none; background: var(--paper); }
.menu-btn::-webkit-details-marker { display: none; }
.mobile-nav { position: relative; }
.mobile-nav-panel { display: none; }
.mobile-nav[open] .mobile-nav-panel { display: block; position: absolute; right: 0; top: calc(100% + 6px); width: min(90vw, 22rem); background: var(--paper); border: 1px solid var(--azalea-200); border-radius: var(--radius); padding: var(--space-2); box-shadow: 0 16px 40px rgba(6, 42, 77, 0.2); z-index: 45; }
.mobile-nav-panel nav ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 0.35rem; }
.mobile-nav-panel nav a { display: block; min-height: 48px; display: flex; align-items: center; padding: 0.5rem 0.25rem; text-decoration: none; font-weight: 700; }
.desktop-nav ul { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0; }
.desktop-nav a { text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; min-height: 48px; }
.desktop-nav a[aria-current], .mobile-nav-panel a[aria-current] { color: var(--azalea-700); text-decoration: underline; }

@media (max-width: 62rem) {
  .desktop-nav { display: none; }
  .menu-btn { display: inline-flex; }
  /* TENM reference (header.php/theme.css) swaps to the drawer's own omnibox
     here instead of shrinking this one -- left visible, #omni-form was
     squeezed to a 223px box in the masthead flex row and its placeholder
     clipped (QA placeholderIssues, every route since the omnibox is in
     shared chrome). ">" keeps this scoped to the masthead-level instance,
     not the drawer's .omnibox--drawer copy nested in .mobile-nav-panel. */
  .masthead > .omnibox { display: none; }
  /* With the masthead omnibox gone at this width, .mobile-nav (the <details>
     wrapping the menu button) is no longer pushed rightward by that flex
     sibling's width -- it was left sitting right after .brand, so the
     drawer panel's "right: 0" (anchored to .mobile-nav's own box, not the
     masthead) rendered up to 38px off the LEFT edge of the viewport.
     Pinning .mobile-nav to the row's end keeps the panel on-screen. */
  .mobile-nav { margin-left: auto; }
}
@media (min-width: 62.01rem) {
  .mobile-nav { display: none; }
}

/* -- motif: the eight -- */
/* Explicit column counts, never auto-fit. auto-fit with a 9.5rem floor fitted
   seven tracks at 1280px and orphaned Southampton onto a second row beside six
   empty columns, so the mark stopped reading as one rule of eight strokes at
   the exact width most reviewers see it. Eight across only where the hint text
   (senior-center names) still fits; otherwise two balanced rows of four, then
   four rows of two. Never seven-plus-one. */
.motif-eight { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); align-items: start; }
@media (min-width: 40rem) { .motif-eight { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.motif-eight li { min-width: 0; }
.motif-eight a { display: block; text-decoration: none; min-height: 48px; padding: 0.75rem 0.15rem; }
.motif-eight-bar { display: block; height: 6px; border-radius: 3px; background: var(--azalea-300); margin-bottom: 0.6rem; }
.band-paper .motif-eight-bar { background: var(--azalea-100); }
.motif-eight a:hover .motif-eight-bar, .motif-eight a:focus-visible .motif-eight-bar { background: var(--azalea); }
.motif-eight[data-active="chesapeake"] .motif-eight-bar[data-locality="chesapeake"] { background: var(--azalea); }
.motif-eight[data-active="franklin"] .motif-eight-bar[data-locality="franklin"] { background: var(--azalea); }
.motif-eight[data-active="norfolk"] .motif-eight-bar[data-locality="norfolk"] { background: var(--azalea); }
.motif-eight[data-active="portsmouth"] .motif-eight-bar[data-locality="portsmouth"] { background: var(--azalea); }
.motif-eight[data-active="suffolk"] .motif-eight-bar[data-locality="suffolk"] { background: var(--azalea); }
.motif-eight[data-active="virginia-beach"] .motif-eight-bar[data-locality="virginia-beach"] { background: var(--azalea); }
.motif-eight[data-active="isle-of-wight"] .motif-eight-bar[data-locality="isle-of-wight"] { background: var(--azalea); }
.motif-eight[data-active="southampton"] .motif-eight-bar[data-locality="southampton"] { background: var(--azalea); }
.motif-eight-name { font-weight: 700; }
.band-harbor .motif-eight-name { color: var(--paper); }
.motif-eight-hint { display: block; font-size: var(--fs-fine); font-weight: 400; margin-top: 0.15rem; }
.band-harbor .motif-eight-hint { color: #c9d6e4; }

/* -- register bands -- */
.band-harbor { background: var(--harbor); color: var(--paper); }
.band-harbor h2, .band-harbor h3 { color: var(--paper); }
.band-paper { background: var(--paper); }
.band-quiet { background: var(--azalea-50); }

/* -- hero -- */
.hero { position: relative; padding: 0; min-height: min(78vh, 640px); display: flex; align-items: flex-end; color: var(--paper); overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
/* The scrim holds its FULL solved alpha across the whole band the copy sits
   in, then fades above it. The previous ramp dropped to 55% of alpha at 45%
   height, which is exactly where the lede line runs, so the one line of body
   copy most likely to be read by someone with low vision got the weakest
   treatment on the page. Fading horizontally as well keeps the right side of
   the photograph readable as a photograph. */
/* The copy occupies the left column (h1 caps at 18ch, the lede and eyebrow at
   44ch), so the horizontal layer carries the legibility and holds a high, flat
   alpha across that column before releasing the right side of the frame back to
   the photograph. The vertical layer is now only a base wash for the band the
   copy sits in.
   The previous version leaned on the vertical ramp, which held full alpha to
   42% height and faded above -- the deck sits partly above that line, so the
   headline measured under 2:1 against the bright flank of the bus. Solved
   against the brightest sample under each text box, not the region mean. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(6, 42, 77, 0.93) 0%, rgba(6, 42, 77, 0.9) 46%, rgba(6, 42, 77, 0.5) 68%, rgba(6, 42, 77, 0) 88%),
    linear-gradient(to top, rgba(6, 42, 77, calc(var(--hero-scrim-alpha) * 0.7)) 0%, rgba(6, 42, 77, calc(var(--hero-scrim-alpha) * 0.55)) 55%, rgba(6, 42, 77, 0.05) 92%);
}
.hero-copy { position: relative; z-index: 1; padding: var(--space-5) 1.25rem var(--space-4); max-width: 76rem; margin-inline: auto; width: 100%; }
.hero-copy h1 { color: var(--paper); max-width: 18ch; }
.hero-copy p.lede { color: var(--paper); max-width: 44ch; }
/* The hero is a dark band, so its eyebrow takes the same light accent step the
   other dark band uses. It inherited the default --azalea-700, which is a DARK
   maroon: over the navy scrim that is dark-on-dark and measured ~3.5:1. The
   measure is capped so the eight locality names stay inside the scrimmed left
   column instead of running out into the unscrimmed right edge of the photo.
   Multi-word locality names carry non-breaking spaces in the markup so the cap
   never splits "Isle of Wight" across two lines. */
.hero .eyebrow { color: var(--azalea-200); max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-2); }
/* Scoped to the photo hero specifically (not every .hero-actions reuse,
   e.g. the 404 page's button row on --paper) so a tel-link never renders
   --paper-on---paper. */
.hero .hero-actions a.tel-link, .band-harbor .hero-actions a.tel-link { color: var(--paper); }
/* .tel-link defaults to nowrap so a bare inline phone number never breaks
   mid-digits inside flowing prose, but a flex-wrap CTA row (hero + give
   sections) is its own line at this font size and a nowrap "Or call ###"
   pushed the 375px viewport 104px wide (QA mobileOverflow, traced to
   .give-actions's longer "...to ask about other ways to give." sentence) --
   letting it wrap to two lines in these action rows is safe and reads fine. */
.hero-actions .tel-link, .give-actions .tel-link { white-space: normal; }

/* -- porch-frame photo treatment -- */
figure.porch-frame { margin: 0; padding-top: var(--space-2); padding-left: var(--space-2); position: relative; }
figure.porch-frame img { border-bottom: 6px solid var(--azalea); }
figure.porch-frame figcaption { font-family: var(--face-body); font-size: var(--fs-body); margin-top: var(--space-1); color: var(--ink); }
.band-harbor figure.porch-frame figcaption { color: var(--paper); }

/* -- editorial service list -- */
.service-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); max-width: 60rem; }
.service-list li { border-top: 1px solid var(--azalea-100); padding-top: var(--space-2); }
.service-list h3 { margin-bottom: 0.3rem; }
.service-list p { margin-bottom: 0.4rem; }

/* -- figures -- */
.figures { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-4); align-items: center; }
@media (max-width: 55rem) { .figures { grid-template-columns: 1fr; } }

/* -- give band -- */
.give-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }

/* -- library band -- */
.library-band ul { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 0.5rem; }
.library-band li { padding: 0.4rem 0; border-top: 1px dashed var(--azalea-200); }
.library-band .doc-name { font-weight: 700; }
/* Four ghost buttons wrap to two rows on a phone rather than shrinking below
   the target-size floor; same flex rule the give band uses. */
.library-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); }

/* -- footer -- */
.site-footer { background: var(--harbor); color: var(--paper); }
.footer-grid { max-width: 76rem; margin-inline: auto; padding: var(--space-4) 1.25rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); }
.site-footer h2 { font-family: var(--face-body); font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.04em; color: var(--azalea-300); margin-bottom: 0.6rem; }
.site-footer a { color: var(--paper); }
.footer-org { font-weight: 700; font-size: var(--fs-lead); font-family: var(--face-display); }
.footer-nav ul, .footer-social ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.footer-nav a, .footer-social a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.footer-nav a:hover, .footer-social a:hover { text-decoration: underline; }
.signup-field { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.signup-field input { flex: 1; min-width: 10rem; min-height: 48px; padding: 0 0.75rem; border-radius: var(--radius); border: 2px solid var(--paper); font-family: var(--face-body); font-size: 1rem; }
.signup-field button { min-height: 48px; padding: 0 1.1rem; background: var(--azalea-300); color: var(--harbor); border: 2px solid var(--azalea-300); border-radius: var(--radius); font-weight: 700; }
.footer-fine { max-width: none; text-align: center; padding: var(--space-2) 1.25rem var(--space-3); margin: 0; font-size: var(--fs-fine); border-top: 1px solid rgba(251, 251, 253, 0.18); }

/* -- accessibility page + contact locality directory -- */
.fact-list { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: 0.5rem; }
.fact-list dt { font-weight: 700; }
.locality-directory { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
.locality-block { scroll-margin-top: 6rem; border-top: 1px solid var(--azalea-100); padding-top: var(--space-2); }
.center-list { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.5rem; }
.center-list li { padding: 0.5rem 0.75rem; background: var(--azalea-50); border-radius: var(--radius); }

/* -- search page -- */
.search-form { display: flex; max-width: 40rem; margin: var(--space-2) 0; }
.search-form input { flex: 1; min-height: 48px; padding: 0 0.9rem; border: 2px solid var(--azalea-200); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); font-size: 1rem; font-family: var(--face-body); }
.search-form button { min-height: 48px; padding: 0 1.2rem; background: var(--azalea); color: var(--paper); border: 2px solid var(--azalea); border-radius: 0 var(--radius) var(--radius) 0; font-weight: 700; }
.search-examples { list-style: none; padding: 0; margin: var(--space-2) 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.search-examples button { min-height: 44px; padding: 0.4rem 0.9rem; border-radius: 999px; border: 2px solid var(--azalea-200); background: var(--paper); font-family: var(--face-body); cursor: pointer; }
.search-examples button:hover, .search-examples button:focus-visible { border-color: var(--azalea); }
.answer-panel { background: var(--azalea-50); border-radius: var(--radius); padding: var(--space-3); margin: var(--space-3) 0; }
.answer-panel[hidden] { display: none; }
.answer-sources { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: grid; gap: 0.4rem; }
.answer-sources a { font-weight: 700; }
.search-results-list { list-style: none; padding: 0; margin: var(--space-2) 0; display: grid; gap: var(--space-2); }
.search-results-list li { border-top: 1px solid var(--azalea-100); padding-top: 0.6rem; }
.search-empty { padding: var(--space-2) 0; }
.search-empty .motif-eight { margin-top: var(--space-3); max-width: 40rem; }
/* The line introducing the eight strokes needs air after the button row above
   it; without it the empty state reads as one crowded block. */
.notfound .fine, .search-empty .fine { margin-top: var(--space-3); }

/* -- 404 -- */
.notfound .motif-eight { max-width: 40rem; margin-top: var(--space-4); }

/* -- reduced motion gate: everything animated lives in here -- */
@media (prefers-reduced-motion: no-preference) {
  /* Smooth scrolling is deliberately OFF on any page carrying a long index.
     Jumping to page 3 of the documents library or to a filtered result set
     should land instantly: animating a reader through 1,300px of intervening
     rows is disorienting at any age and actively unhelpful for the readers
     this build is set for. It also made the index-navigation contract
     unverifiable, because a programmatic scrollTo returned before the
     animation finished and every sticky-controls measurement read the
     pre-scroll position. Ordinary pages keep the nicety. */
  html:not(:has([data-stoa-index])) { scroll-behavior: smooth; }
  .skip-link { transition: top 0.15s ease; }
  .btn, .motif-eight-bar { transition: background-color 0.15s ease, border-color 0.15s ease; }
  @view-transition { navigation: auto; }
  .brand img, .hero-media img { view-transition-name: ssseva-masthead; }
}

/* On a phone the hero photograph is texture behind the deck rather than a
   subject to preserve: the copy occupies nearly the whole band, so the scrim
   holds a high near-flat alpha instead of the desktop ramp. The desktop ramp
   fades above 42% height, which on a narrow viewport is exactly where the deck
   sits -- white copy over the bright flank of the bus measured 2.2:1 there.
   Solved against that flank, not against the darker road surface. */
@media (max-width: 55rem) {
  /* A 1400x933 frame in a narrow portrait box crops hard horizontally. Centred,
     it landed on the blank middle of the vehicle and sliced the lettering to
     "...or Servi" with the phone number off-frame entirely, so the photograph
     read as a dark field rather than as a bus. Biasing right keeps the marked
     flank in shot, which is the part that identifies whose vehicle it is. */
  .hero-media img { object-position: 68% 42%; }
  .hero-media::after {
    background: linear-gradient(to top, rgba(6, 42, 77, 0.84) 0%, rgba(6, 42, 77, 0.81) 74%, rgba(6, 42, 77, 0.66) 100%);
  }
}

@media (max-width: 30rem) {
  section { padding-block: var(--space-4); }
  .hero-copy { padding-top: var(--space-4); }
}

/* -- /help/ route family (scripts/lib/seniorservicesva/routes-help.mjs) --
   .help-locality-current restyles the one non-link <li> in the eight-stroke
   cross-nav on /help/<locality>/ pages -- motif-eight's padding/min-height
   normally live on the <a> (see .motif-eight a above), so the "you are here"
   item (deliberately not a link) needs its own rule to match every other
   stroke's tap-target size instead of collapsing to its text height. */
.help-locality-current { display: block; padding: 0.75rem 0.15rem; }
.help-locality-current .motif-eight-name { font-weight: 700; color: var(--azalea-700); }
.band-harbor .help-locality-current .motif-eight-name { color: var(--paper); text-decoration: underline; }
.help-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
@media (max-width: 40rem) { .help-photo-pair { grid-template-columns: 1fr; } }

/* ============================================================================
   Services route family (/services/ + /services/<slug>/) -- appended by
   routes-services.mjs's page-writer, kept at the end of this stylesheet per
   the multi-agent build's append-only convention (other agents' families
   append their own blocks below/above this one). Non-obvious decision: the
   long-index behavioral rules ([data-stoa-index-controls] sticky, target
   sizes, reduced-motion) are authored here rather than linked as a second
   stylesheet, because the chrome contract ships exactly one theme.css; they
   use the shared, unprefixed [data-stoa-index-*] attribute selectors from
   docs/index-navigation-standard.md verbatim, since those are the fleet-wide
   contract hooks, not this build's own visual skin. Only the svc- classes
   below are SSSEVA-specific. Desktop/mobile sticky-controls max-heights sit
   at 22vh/26svh (not the standard's 25vh/30svh) to keep clear margin under
   the lint's 25%/30% viewport-ratio budget once borders and padding round up.
   ========================================================================= */

[data-stoa-index-controls] {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  max-block-size: 22vh;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  background: var(--paper);
  border-bottom: 1px solid var(--azalea-100);
  padding-block: var(--space-2);
}
[data-stoa-index-controls] form { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
[data-stoa-index-controls] label { font-weight: 700; }
[data-stoa-index-controls] input[type="search"] { min-height: 48px; flex: 1 1 14rem; padding: 0 0.9rem; border: 2px solid var(--azalea-200); border-radius: var(--radius); font-family: var(--face-body); font-size: 1rem; }
[data-stoa-index-controls] button { min-height: 48px; padding: 0 1.2rem; background: var(--azalea); color: var(--paper); border: 2px solid var(--azalea); border-radius: var(--radius); font-weight: 700; }
[data-stoa-index-summary] { margin: 0.5rem 0 0; font-size: var(--fs-fine); }
/* A sticky element is constrained to its parent's CONTENT box, so the room the
   discovery bar needs has to come from the last child's margin -- padding on
   the wrap extends the padding box and does nothing for it. Without this the
   bar comes unstuck just before the reader reaches the end of the results:
   invisible on the full pages, but page 6 holds only five documents, so its
   wrap ends early and the controls left exactly when someone looking at the
   tail of the library would want to re-filter. */
[data-stoa-index-pagination] { margin-bottom: max(var(--space-5), 16vh); }
[data-stoa-index-results] { scroll-margin-block-start: calc(22vh + 1rem); }
[data-stoa-index-pagination] ul { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; margin: var(--space-2) 0 0; }
[data-stoa-index-pagination] a, [data-stoa-index-pagination] [aria-current="page"] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--radius); border: 2px solid var(--azalea-200); text-decoration: none; }
[data-stoa-index-pagination] [aria-current="page"] { background: var(--azalea); color: var(--paper); border-color: var(--azalea); }
@media (max-width: 640px) {
  [data-stoa-index-controls] { max-block-size: 26svh; }
}
@media (prefers-reduced-motion: reduce) {
  html, [data-stoa-index], [data-stoa-index-results] { scroll-behavior: auto !important; }
}

.svc-index-grid { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.svc-index-card { border-top: 1px solid var(--azalea-100); padding-top: var(--space-2); }
.svc-index-card h3 { margin-bottom: 0.75rem; line-height: 1.28; }
.svc-index-card a { text-decoration: none; }
.svc-index-card a:hover, .svc-index-card a:focus-visible { text-decoration: underline; }
/* ============================================ the eight-locality coverage band ==
   Skin for scripts/lib/seniorservicesva/locality-band.mjs, the one data graphic
   this build reuses (every service page, /contact/, and the Older Americans
   Month story). It is the DESIGN-DNA motif drawn over real data: eight strokes
   in west-to-east order above one rule, solid where the answer is yes and open
   where it is not. Three encodings carry that state, never color alone -- fill,
   a solid-versus-dashed edge, and the sentence under each name. The strokes are
   CSS boxes rather than SVG so they inherit the elder-legible ladder and stay
   legible at 200% zoom. */
/* The band is placed in two very different containers -- the full 76rem .wrap on
   the service pages and /contact/, and the 62ch reading column on a news story
   -- so the eight-across switch is a CONTAINER query, not a media query. Keyed
   to the viewport it went eight-across inside the 62ch column at desktop width
   and the locality names collided into each other. Where @container is
   unsupported the band simply stays in its stacked form, which is correct. */
.locality-band { margin: var(--space-3) 0 0; container-type: inline-size; }
.lb-caption { display: block; margin-bottom: var(--space-2); max-width: var(--measure); }
.lb-caption strong { display: block; font-family: var(--face-display); font-size: var(--fs-lead); line-height: 1.2; }
.lb-readout { display: block; margin-top: 0.2rem; }
/* Eight across or one down, never four-by-two: a reflow into two rows of four
   destroys the west-to-east axis the caption claims. */
.lb-track { list-style: none; margin: 0; padding: 0 0 var(--space-2); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; border-bottom: 3px solid var(--azalea-300); }
.lb-track li { min-width: 0; }
.lb-track a, .lb-track .lb-cell { display: block; min-height: 48px; padding: 0.25rem 0.15rem 0; text-decoration: none; color: inherit; }
/* The unfilled stroke's outline is a UI boundary carrying the "we have no
   evidence either way" state, so it owes 3:1 against the page. --azalea-300
   measured 2.06:1 on --paper; --azalea-500 is 4.56:1 and still reads clearly
   lighter than the filled stroke's --azalea, which is the distinction the
   graphic is making. */
.lb-stroke { display: block; height: 0.85rem; border-radius: 3px; background: var(--azalea-50); box-shadow: inset 0 0 0 2px var(--azalea-500); }
.lb-track [data-covered="yes"] .lb-stroke { background: var(--azalea); box-shadow: none; }
/* "Southampton" is one 11-character word that does not wrap, and at eight
   across in a 960 or 1024 viewport it ran straight out of its column into
   Franklin's. Hyphenation lets it break; overflow-wrap is the guarantee. */
.lb-name { display: block; font-weight: 700; margin-top: 0.5rem; hyphens: auto; overflow-wrap: break-word; }
.lb-note { display: block; font-size: var(--fs-fine); font-weight: 400; margin-top: 0.1rem; }
.lb-track a:hover .lb-name, .lb-track a:focus-visible .lb-name { text-decoration: underline; }
.lb-axis { font-size: var(--fs-fine); margin: var(--space-2) 0 0; max-width: var(--measure); }
/* 68rem is where eight cells are each wide enough to set "Southampton" on one
   line at the 19px body floor. Below it the band stacks. An earlier 54rem
   threshold collided the names outright, and 58rem broke them mid-word into
   "Southampt / on"; a graphic whose own labels are hyphenated to fit is not
   worth the axis. */
@container (min-width: 68rem) {
  .lb-track { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 0.6rem; }
  .lb-stroke { height: 2.4rem; }
  /* two lines reserved for the name so "Virginia Beach" wrapping does not
     stagger the status words out of their shared row */
  .lb-name { min-height: 3.1em; }
}

/* /services/wellness/ workshop-length chart. One shared ten-week scale, so the
   widths are readable against each other; the four bar widths are keyed off
   data-weeks rather than an inline style attribute so the scale lives here with
   the rest of the design system. */
.wk-chart { margin: 0 0 var(--space-4); max-width: 48rem; }
.wk-caption { display: block; margin-bottom: var(--space-2); }
.wk-caption strong { display: block; font-family: var(--face-display); font-size: var(--fs-lead); line-height: 1.2; }
.wk-sub { display: block; font-size: var(--fs-fine); margin-top: 0.15rem; }
.wk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.wk-rows li { display: grid; gap: 0.25rem; padding-top: 0.6rem; border-top: 1px solid var(--azalea-200); }
.wk-name { font-weight: 700; }
.wk-bar { display: block; height: 1.1rem; border-radius: 3px; background: var(--azalea); }
.wk-bar[data-weeks="4"] { inline-size: 40%; }
.wk-bar[data-weeks="6"] { inline-size: 60%; }
.wk-bar[data-weeks="8"] { inline-size: 80%; }
.wk-bar[data-weeks="10"] { inline-size: 100%; }
.wk-value { font-size: var(--fs-fine); font-weight: 700; }
.wk-note { font-size: var(--fs-fine); margin: var(--space-2) 0 0; max-width: var(--measure); }
@media (min-width: 46rem) {
  .wk-rows li { grid-template-columns: 17rem minmax(0, 1fr) 5rem; align-items: center; gap: var(--space-2); }
  .wk-value { text-align: end; }
}

/* /services/companion/ two-path figure: the one page on the site whose two
   readers want opposite things. Two panels off one caption, each ending in its
   own real phone line. */
.two-paths { margin: 0 0 var(--space-4); }
.two-paths-caption { display: block; margin-bottom: var(--space-2); }
.two-paths-caption strong { display: block; font-family: var(--face-display); font-size: var(--fs-lead); line-height: 1.2; }
.two-paths-caption span { display: block; font-size: var(--fs-fine); margin-top: 0.15rem; }
.two-paths-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.two-paths-list li { background: var(--paper); border-top: 5px solid var(--azalea); border-radius: 0 0 var(--radius) var(--radius); padding: var(--space-2); }
.two-paths-list h3 { margin-top: 0; }
.two-paths-action { margin-bottom: 0; font-weight: 700; }

/* ============================================================ give/volunteer family ==
   Appended by routes-give.mjs (/give/, /give/impact/, /volunteer/). Non-obvious
   decision: the amount/frequency chips hide their native radio with opacity:0
   (never display:none, which would drop them from the accessibility tree and
   from keyboard focus) and position it exactly over the visible face with
   inset:0, so the input keeps native radio semantics, keyboard operation, and
   a real focus target while the face carries the visual design -- the
   standard accessible "hidden-input, styled-sibling" pattern. */

.give-fieldset { border: 0; margin: 0 0 var(--space-3); padding: 0; }
.give-fieldset legend { font-family: var(--face-body); font-weight: 700; font-size: var(--fs-fine); text-transform: uppercase; letter-spacing: 0.03em; color: var(--azalea-700); padding: 0; margin-bottom: 0.6rem; }
.give-chip-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.give-chip { position: relative; display: block; min-width: 8rem; flex: 1 1 8rem; }
.give-chip-other { flex-basis: 10rem; }
.give-chip input { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.give-chip input:focus-visible { outline: none; }
.give-chip-face { display: block; min-height: 48px; padding: 0.6rem 0.9rem; border: 2px solid var(--azalea-200); border-radius: var(--radius); background: var(--paper); }
.give-chip-face strong { display: block; font-family: var(--face-display); font-size: var(--fs-lead); }
.give-chip-face small { display: block; font-size: var(--fs-fine); color: var(--ink); margin-top: 0.15rem; }
.give-chip input:checked + .give-chip-face { border-color: var(--azalea); background: var(--azalea-50); }
.give-chip input:focus-visible + .give-chip-face { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.give-other-field { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
.give-other-field label { font-weight: 700; }
.give-other-field input { min-height: 48px; width: 8rem; padding: 0 0.75rem; border: 2px solid var(--azalea-200); border-radius: var(--radius); font-size: 1rem; font-family: var(--face-body); }
.give-other-field input:disabled { opacity: 0.5; }

.give-form { max-width: 42rem; background: var(--paper); border: 1px solid var(--azalea-100); border-radius: var(--radius); padding: var(--space-3); margin-top: var(--space-2); }
.give-field { margin-bottom: var(--space-2); }
.give-field label { display: block; font-weight: 700; margin-bottom: 0.3rem; }
.give-field select, .give-field input { width: 100%; min-height: 48px; padding: 0 0.75rem; border: 2px solid var(--azalea-200); border-radius: var(--radius); font-size: 1rem; font-family: var(--face-body); background: var(--paper); color: var(--ink); }
.give-donor-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-2); margin-bottom: var(--space-2); }
.give-submit-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; margin-top: var(--space-2); }
.give-status { max-width: 34rem; color: var(--ink); }

.give-locality-picker { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.give-locality-picker a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.9rem; border-radius: 999px; border: 2px solid var(--azalea-200); text-decoration: none; font-weight: 700; }
.give-locality-picker a:hover, .give-locality-picker a:focus-visible { border-color: var(--azalea); }

.give-photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-3); }
@media (max-width: 40rem) { .give-photo-pair { grid-template-columns: 1fr; } }

/* ============================================================ documents family ==
   Appended by routes-documents.mjs (/documents/ + /documents/<slug>/ reading
   views), the document-reader ambition bet. Non-obvious decision: the
   category filter sits behind a native <details> disclosure inside
   [data-stoa-index-controls] (whose sticky/target/reduced-motion rules are
   already the shared, unprefixed selectors from the services block above)
   rather than as always-visible chips, because 9 category chips plus the
   search field would blow well past the standard's 22vh/26svh sticky-height
   budget on mobile -- collapsed by default, it costs nothing until opened. */

.doc-index-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); max-width: 60rem; }
.doc-item { border-top: 1px solid var(--azalea-100); padding-top: var(--space-2); }
.doc-item h3 { margin: 0.3rem 0 0.2rem; }
.doc-item h3 a { text-decoration: none; }
.doc-item h3 a:hover, .doc-item h3 a:focus-visible { text-decoration: underline; }
.doc-badge { display: inline-block; font-size: var(--fs-fine); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--azalea-700); background: var(--azalea-50); border-radius: 999px; padding: 0.15rem 0.7rem; }
.doc-meta { font-size: var(--fs-fine); margin: 0.15rem 0 0; }
.doc-item-secondary { font-size: var(--fs-fine); margin: 0.3rem 0 0; }

.doc-filter-details { margin-top: 0.6rem; }
/* A summary set to any display other than list-item loses the native
   disclosure triangle, which left "Filter by type" reading as a bold label
   with nothing under it rather than a control a reader can open. The marker is
   drawn back as a rotating chevron so the closed state announces itself. */
.doc-filter-details summary { cursor: pointer; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; gap: 0.5rem; }
.doc-filter-details summary::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--azalea); border-bottom: 2px solid var(--azalea); transform: rotate(-45deg); }
.doc-filter-details[open] summary::before { transform: rotate(45deg); }
.doc-chip-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-chip-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.9rem; border-radius: 999px; border: 2px solid var(--azalea-200); text-decoration: none; font-weight: 700; font-size: var(--fs-fine); }
.doc-chip-list a:hover, .doc-chip-list a:focus-visible { border-color: var(--azalea); }

/* -- reading view: sticky action bar between the title band and the text -- */
.doc-sticky-bar { position: sticky; inset-block-start: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--azalea-100); }
.doc-sticky-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 0.6rem; }
.doc-sticky-title { font-weight: 700; font-family: var(--face-display); font-size: var(--fs-lead); }
.doc-reading-wrap { max-width: 68rem; }
.doc-notice { border-left: 4px solid var(--amber); background: var(--azalea-50); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin: var(--space-3) 0; }
.doc-provenance { font-size: var(--fs-fine); margin: 0 0 var(--space-2); max-width: var(--measure); border-inline-start: 4px solid var(--azalea-300); padding-inline-start: var(--space-2); }
.doc-jump { margin: var(--space-2) 0; }
.doc-jump ul { list-style: none; padding: 0; margin: 0.4rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.doc-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.3rem 0.8rem; border-radius: 999px; border: 2px solid var(--azalea-200); text-decoration: none; font-size: var(--fs-fine); font-weight: 700; }
.reading-page { scroll-margin-block-start: 5rem; border-top: 1px dashed var(--azalea-200); padding-top: var(--space-3); margin-top: var(--space-3); }
.reading-page:first-child { border-top: 0; padding-top: 0; margin-top: var(--space-2); }
/* overflow-wrap is not cosmetic here. Extracted PDF text carries tokens no
   normal prose ever produces: a blank form's rule line comes through as 61
   unbroken underscores, and an OCRed table of contents turns its dot leaders
   into runs like "ceccceccecsesssesesesesesesevesevssersveseeeee" (46
   characters, no break opportunity). Both pushed the Form 990 and the Title VI
   complaint form past the viewport at 375px. Breaking anywhere is right for
   text this build did not author and cannot re-typeset. */
.doc-text { max-width: var(--measure); overflow-wrap: anywhere; }
/* [data-stoa-index-results] scroll-behavior under reduced motion is already
   covered by the services block's shared reduced-motion rule above. */

/* ============================================================ news + events family ==
   Appended by routes-news.mjs (/news/, /news/page/<n>/, /news/<slug>/ reading
   views, /events/, /events/page/<n>/). Non-obvious decision: news and events
   share one set of index/list/badge classes (.idx-*) because both indexes
   are authored in that one module and use an identical visual pattern;
   documents and services keep their own doc-/svc- prefixes above rather
   than reusing these, so each family's CSS stays independently editable
   while several agents work in this same stylesheet. The sticky/target/
   reduced-motion behavior on [data-stoa-index-controls] etc. is already
   defined once, above, by the services block -- nothing here repeats it. */

.idx-badge { display: inline-block; font-size: var(--fs-fine); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--azalea-700); background: var(--azalea-50); border-radius: 999px; padding: 0.15rem 0.7rem; }
.idx-filter-details { margin-top: 0.6rem; }
.idx-filter-details summary { cursor: pointer; font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.idx-chip-list { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.idx-chip-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 0.9rem; border-radius: 999px; border: 2px solid var(--azalea-200); text-decoration: none; font-weight: 700; font-size: var(--fs-fine); }
.idx-chip-list a:hover, .idx-chip-list a:focus-visible { border-color: var(--azalea); }
.idx-list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-3); max-width: 60rem; }
.idx-item { border-top: 1px solid var(--azalea-100); padding-top: var(--space-2); }
.idx-item h3 { margin: 0.3rem 0 0.2rem; }
.idx-item h3 a { text-decoration: none; }
.idx-item h3 a:hover, .idx-item h3 a:focus-visible { text-decoration: underline; }
.idx-meta { font-size: var(--fs-fine); margin: 0.15rem 0 0; }
.idx-secondary { font-size: var(--fs-fine); margin: 0.3rem 0 0; }
.news-external-flag { display: inline-block; font-size: var(--fs-fine); font-weight: 700; color: var(--ink); background: var(--azalea-50); border: 1px solid var(--azalea-200); border-radius: var(--radius); padding: 0.05rem 0.5rem; margin-left: 0.4rem; white-space: nowrap; }

/* the one event row (the 2026 gala) this build has a real photo for */
.event-item-featured .porch-frame { max-width: 26rem; margin-top: var(--space-2); }

/* reading views: /news/<slug>/ */
.news-reading-wrap { max-width: var(--measure); }
.news-text .porch-frame { margin: var(--space-3) 0; max-width: 32rem; }
.news-milestones { margin: var(--space-3) 0; padding: 0; display: grid; gap: 0.5rem; }
.news-milestones div { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-2); }
.news-milestones dt { font-family: var(--face-display); font-weight: 700; color: var(--azalea-700); }
.news-milestones dd { margin: 0; }

/* the fiftieth-anniversary story's dated history, drawn on a rail with a node
   per year rather than left as a definition list -- on that page the sequence
   of years is the subject. */
.news-timeline { margin: var(--space-3) 0; }
.news-timeline-caption { display: block; margin-bottom: var(--space-2); }
.news-timeline-caption strong { display: block; font-family: var(--face-display); font-size: var(--fs-lead); line-height: 1.2; }
.news-timeline-caption span { display: block; font-size: var(--fs-fine); margin-top: 0.15rem; }
.news-timeline .news-milestones { margin: 0; gap: var(--space-2); border-inline-start: 3px solid var(--azalea-200); padding-inline-start: var(--space-3); }
.news-timeline .news-milestones div { position: relative; }
.news-timeline .news-milestones div::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--space-3) - 9px); inset-block-start: 0.5em; width: 15px; height: 15px; border-radius: 50%; background: var(--azalea); }

/* the American Heart Association's eight habits, on the Love Your Heart story */
.ee-figure { margin: var(--space-3) 0; }
.ee-caption { display: block; margin-bottom: var(--space-2); }
.ee-caption strong { display: block; font-family: var(--face-display); font-size: var(--fs-lead); line-height: 1.2; }
.ee-caption span { display: block; font-size: var(--fs-fine); margin-top: 0.15rem; }
.ee-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.ee-grid li { border-inline-start: 5px solid var(--azalea); background: var(--azalea-50); border-radius: 0 var(--radius) var(--radius) 0; padding: 0.6rem 0.8rem; font-weight: 700; }
.ee-note { font-size: var(--fs-fine); margin: var(--space-2) 0 0; }

/* numbered what-to-do steps, on the Meals on Wheels scam alert */
.steps-figure { margin: var(--space-3) 0; }
.steps-caption { display: block; margin-bottom: var(--space-2); }
.steps-caption strong { display: block; font-family: var(--face-display); font-size: var(--fs-lead); line-height: 1.2; }
.steps-caption span { display: block; font-size: var(--fs-fine); margin-top: 0.15rem; }
.steps-list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.steps-list li { counter-increment: step; display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); column-gap: var(--space-2); border-top: 1px solid var(--azalea-200); padding-top: var(--space-2); }
.steps-list li::before { content: counter(step); grid-column: 1; grid-row: 1 / span 2; font-family: var(--face-display); font-size: var(--fs-lead); font-weight: 700; color: var(--azalea); line-height: 1.1; }
.steps-list li strong, .steps-list li span { grid-column: 2; display: block; }
.news-oam-list { list-style: none; margin: var(--space-2) 0; padding: 0; display: grid; gap: 0.5rem; }
.news-oam-list li { border-top: 1px solid var(--azalea-100); padding-top: 0.5rem; }
.news-oam-list li span { display: block; font-size: var(--fs-fine); }
.news-original-link { font-size: var(--fs-fine); margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px dashed var(--azalea-200); }