/* ==========================================================================
   Families In Crisis — page styles
   Built on the Modernist design tokens in styles.css. Every color, font and
   space here reads from a var(--*) token; don't hard-code hexes.
   ========================================================================== */

body { margin: 0; font-size: 18px; -webkit-text-size-adjust: 100%; }
a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent); }
h1, h2, h3 { text-wrap: pretty; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-text); color: var(--color-bg);
  padding: 12px 20px; font-weight: 800; text-decoration: none;
}
.skip:focus { left: 0; }

.wrap { max-width: 1320px; margin: 0 auto; }
.page {
  max-width: 1320px; margin: 0 auto;
  border-left: 2px solid var(--color-divider);
  border-right: 2px solid var(--color-divider);
}
.rule-b { border-bottom: 2px solid var(--color-divider); }
.rule-t { border-top: 2px solid var(--color-divider); }

/* — the label style used above every section — */
.label {
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-neutral-700); margin: 0 0 10px;
}
.section-lead {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(23px, 2.8vw, 30px); line-height: 1.15;
  letter-spacing: -.02em; margin: 0; max-width: 34ch;
}
.section-head { padding: 40px 24px 28px; }

/* — grids: rules are drawn by the 2px gap, so they survive any wrap — */
.g-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.g-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 48px 24px 40px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--color-divider); }
.g4 > * { background: var(--color-bg); }
.g4-light { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: rgba(255,255,255,.4); }
.g4-light > * { background: var(--color-accent-2-700); }
.col-rule { border-right: 2px solid var(--color-divider); }

/* ── the hotline bar ─────────────────────────────────────────────────── */
.bar { position: sticky; top: 0; z-index: 40; background: var(--color-accent); color: #fff; }
.bar-inner {
  max-width: 1320px; margin: 0 auto; display: flex; align-items: center;
  flex-wrap: wrap; gap: 4px 20px; padding: 10px 24px;
}
.bar-kicker {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; opacity: .9;
}
.bar-phone {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(20px, 2.6vw, 26px); color: #fff;
  padding: 2px 8px; margin-left: -8px; letter-spacing: -.01em;
}
.bar-phone:hover, .bar-phone:focus-visible { color: #fff; background: rgba(255,255,255,.16); }
.bar-spacer { flex: 1 1 auto; }
.bar-actions { display: flex; align-items: center; gap: 2px; }
.bar-btn {
  background: transparent; border: 1px solid rgba(255,255,255,.45);
  color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  padding: 8px 12px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.bar-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.bar-btn--exit {
  background: #fff; border-color: #fff; color: var(--color-accent-700);
  font-family: var(--font-heading); font-weight: 800; margin-left: 10px;
}
.bar-btn--exit:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.bar .bar-btn:focus-visible, .bar-phone:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── header ──────────────────────────────────────────────────────────── */
.header {
  display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
  padding: 22px 24px; border-bottom: 2px solid var(--color-divider);
}
.brand { text-decoration: none; color: inherit; margin-right: auto; display: flex; align-items: center; gap: 14px; }
/* the logo file has a pure white ground; multiply drops it into the page ground */
.brand-mark { height: 46px; width: auto; flex: none; mix-blend-mode: multiply; }
.brand:hover { color: inherit; }
.brand-name { font-family: var(--font-heading); font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: -.02em; }
.brand-sub { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin-top: 5px; color: var(--color-neutral-700); }
/* The design system's .nav is its own header-bar component (it carries padding
   and a 2px bottom rule). This site's .nav is just the link list inside
   .header, so both of those are cleared here. */
.nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 0; border-bottom: 0; }
.nav a {
  color: inherit; text-decoration: none;
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--color-accent); }
/* .nav a { color: inherit } outranks a bare .btn-donate — keep the class
   qualified by .nav a so the white label wins the cascade. */
.nav a.btn-donate, .btn-donate {
  background: var(--color-accent); color: #fff; text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; padding: 12px 22px;
}
.nav a.btn-donate:hover, .btn-donate:hover { background: var(--color-accent-600); color: #fff; }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero-copy { padding: 56px 48px 48px 24px; }
.eyebrow {
  font-family: var(--font-heading); font-size: 13px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 22px;
}
.h-display {
  font-size: clamp(36px, 6.2vw, 76px); line-height: .96;
  letter-spacing: -.03em; margin: 0 0 24px; max-width: 15ch;
}
.lede { font-size: 20px; line-height: 1.5; max-width: 62ch; margin: 0 0 34px; }
.cta-stack { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.cta {
  display: flex; align-items: center; gap: 16px; text-align: left;
  text-decoration: none; padding: 18px 24px; min-height: 60px;
  font-family: var(--font-body); cursor: pointer; width: 100%;
  border: 2px solid transparent; background: transparent; color: var(--color-text);
}
.cta svg { flex: none; }
.cta-title { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 19px; line-height: 1.1; }
.cta-sub { display: block; font-size: 14px; color: var(--color-neutral-700); margin-top: 3px; }
.cta--primary { background: var(--color-accent); color: #fff; padding: 20px 24px; min-height: 64px; }
.cta--primary:hover { background: var(--color-accent-600); color: #fff; }
.cta--primary:active { background: var(--color-accent-700); }
.cta--primary .cta-title { font-weight: 900; font-size: 24px; }
.cta--primary .cta-sub { color: #fff; opacity: .9; }
.cta--outline { border-color: var(--color-text); }
.cta--outline:hover { background: var(--color-neutral-200); color: var(--color-text); }
.cta--ghost { border-color: var(--color-divider); }
.cta--ghost:hover { background: var(--color-neutral-200); }
.safety-note { font-size: 15px; color: var(--color-neutral-700); margin: 26px 0 0; max-width: 52ch; }
.linkbtn {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--color-accent-700); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.linkbtn:hover { color: var(--color-accent); }

/* ── photographs ─────────────────────────────────────────────────────── */
/* Photographs run at their native scale — the column width sets the size, the
   image keeps its own aspect ratio, so nothing is upscaled or cropped. */
.media, .media-sm { align-self: start; }
/* hero facts, under the photograph — fills the column beside the CTA stack */
.hero-facts { padding: 30px 24px 0; }
.hf-row { padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.hf-row:first-child { border-top: 2px solid var(--color-divider); }
.hf-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral-700); margin-bottom: 6px;
}
.hf-val { font-size: 16px; line-height: 1.5; }
.hf-val strong { font-family: var(--font-heading); font-weight: 800; }
.hf-val a { color: var(--color-accent-700); }
.media img, .media-sm img {
  display: block; width: 100%; height: auto;
  filter: grayscale(1) contrast(1.08);
}
.media { position: relative; }
.media-sm { position: relative; }
/* Placeholder shown until a real photograph is dropped in. Delete the
   <div class="photo-ph"> and uncomment the <img> next to it. */
.photo-ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(135deg,
      var(--color-neutral-200) 0 10px,
      var(--color-neutral-300) 10px 20px);
  color: var(--color-neutral-700);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px; line-height: 1.6; letter-spacing: .04em;
}

/* ── program cells ───────────────────────────────────────────────────── */
.cell { display: block; text-decoration: none; color: inherit; padding: 32px 24px 28px; }
.cell:hover { background: var(--color-neutral-100); color: inherit; }
.cell:hover .cell-arrow { color: var(--color-accent); transform: translateX(4px); }
.cell-num {
  font-family: var(--font-heading); font-weight: 900; font-size: 13px;
  letter-spacing: .1em; color: var(--color-accent-2-700); margin-bottom: 20px;
}
.cell h3 { font-size: clamp(21px, 2.3vw, 26px); line-height: 1.05; margin: 0 0 12px; }
.cell p:not([class]) { font-size: 16px; line-height: 1.5; color: var(--color-neutral-800); margin: 0 0 20px; }
.cell-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px;
}
.cell-arrow { transition: transform .15s ease, color .15s ease; }
.cell--donate { background: var(--color-neutral-200); }
.cell--donate:hover { background: var(--color-neutral-300); }
.cell--sm { padding: 30px 24px 28px; }
.cell--sm h3 { font-size: 23px; }
.cell--sm p:not([class]) { font-size: 15px; margin-bottom: 18px; }
.cta-inline {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 15px; padding: 12px 18px;
}
.cell:hover .cta-inline { background: var(--color-accent-600); }

/* ── impact band — the teal field, opposite the purple poster close ──── */
.impact { background: var(--color-accent-2-700); color: #fff; }
.impact-head { padding: 44px 24px 20px; }
.impact-kicker {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .16em; text-transform: uppercase; opacity: .85;
}
.impact-display {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(27px, 3.7vw, 44px); line-height: 1.04;
  letter-spacing: -.03em; margin: 14px 0 0; max-width: 26ch;
}
.stat { padding: 28px 24px; }
.stat-num {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1; letter-spacing: -.03em;
}
.stat-label { font-size: 15px; margin-top: 8px; opacity: .95; }
.impact-foot { padding: 14px 24px 20px; font-size: 13px; opacity: .8; }
.impact-foot a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ── about ───────────────────────────────────────────────────────────── */
.about-copy { padding: 48px 40px 44px 24px; }
.about-lead {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(21px, 2.4vw, 27px); line-height: 1.2;
  letter-spacing: -.02em; margin: 0 0 22px;
}
.about-copy p:not(.about-lead) { font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); margin: 0 0 16px; }
.btn-outline {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 12px;
  border: 2px solid var(--color-text); color: var(--color-text);
  text-decoration: none; font-family: var(--font-heading);
  font-weight: 800; font-size: 16px; padding: 15px 22px;
}
.btn-outline:hover { background: var(--color-neutral-200); color: var(--color-text); }

/* ── footer ──────────────────────────────────────────────────────────── */
.footer { background: var(--color-neutral-900); color: var(--color-neutral-100); }
.f-brand { font-family: var(--font-heading); font-weight: 900; font-size: 22px; letter-spacing: -.02em; }
.f-sub { font-size: 14px; color: var(--color-neutral-400); margin-top: 6px; }
.f-hot { margin-top: 26px; font-size: 17px; line-height: 1.7; }
.f-hot-label {
  font-family: var(--font-heading); font-weight: 900; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent-400); margin-bottom: 8px;
}
.f-hot-num {
  color: #fff; text-decoration: none; font-family: var(--font-heading);
  font-weight: 900; font-size: clamp(24px, 3vw, 30px); letter-spacing: -.01em;
}
.f-hot-num:hover { color: var(--color-accent-400); }
.f-col { font-size: 16px; line-height: 1.9; }
.f-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-neutral-400); margin-bottom: 12px;
}
.f-list { display: grid; gap: 2px; }
.footlink { color: var(--color-neutral-100); text-decoration: none; }
.footlink:hover { color: var(--color-accent-400); text-decoration: underline; }
.f-muted { color: var(--color-neutral-400); }
.f-address { margin-top: 12px; color: var(--color-neutral-300); }
.funders {
  display: flex; align-items: center; gap: 40px; flex-wrap: wrap;
  padding: 26px 24px; border-top: 2px solid var(--color-neutral-700);
}
.funders-label {
  font-size: 13px; color: var(--color-neutral-400);
  letter-spacing: .08em; text-transform: uppercase; font-weight: 700;
}
.funder-row { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.funder { box-sizing: content-box; height: 40px; width: auto; background: #fff; padding: 7px 11px; display: block; }
.funder-ph {
  height: 46px; display: grid; place-items: center; padding: 0 14px;
  border: 1px dashed var(--color-neutral-600); color: var(--color-neutral-400);
  font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: .04em;
}
.legal {
  padding: 20px 24px 30px; font-size: 13px;
  color: var(--color-neutral-500); border-top: 1px solid var(--color-neutral-800);
}
.legal a, .legal .linkbtn { color: var(--color-neutral-500); }
.legal a:hover, .legal .linkbtn:hover { color: var(--color-accent-400); }

/* ── internet-safety modal ───────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 24px; background: rgba(45,43,43,.6);
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(620px, 100%); max-height: 88vh; overflow: auto;
  background: var(--color-bg); border: 2px solid var(--color-text); padding: 36px;
}
.modal-card h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.1; margin: 0 0 6px; }
.modal-card > p { font-size: 16px; color: var(--color-neutral-700); margin: 0 0 22px; }
.modal-card ol { font-size: 17px; line-height: 1.65; padding-left: 22px; margin: 0 0 24px; }
.modal-card li + li { margin-top: 12px; }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-solid {
  background: var(--color-accent); color: #fff; border: 0;
  font-family: var(--font-heading); font-weight: 800; font-size: 16px;
  padding: 15px 24px; cursor: pointer;
}
.btn-solid:hover { background: var(--color-accent-600); }
.btn-solid:active { background: var(--color-accent-700); }
.btn-line {
  background: transparent; border: 2px solid var(--color-text);
  color: var(--color-text); font-family: var(--font-heading);
  font-weight: 800; font-size: 16px; padding: 13px 24px; cursor: pointer;
}
.btn-line:hover { background: var(--color-neutral-200); }

/* ── chat drawer ─────────────────────────────────────────────────────── */
.chat {
  position: fixed; right: 24px; bottom: 24px; z-index: 80;
  width: min(370px, calc(100vw - 48px));
  background: var(--color-bg); border: 2px solid var(--color-text);
  box-shadow: var(--shadow-lg);
}
.chat[hidden] { display: none; }
.chat-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--color-text); color: var(--color-bg);
}
.chat-dot { width: 9px; height: 9px; background: #4ade80; border-radius: 50%; flex: none; }
.chat-head strong { font-family: var(--font-heading); font-size: 16px; }
.chat-x { background: none; border: 0; color: var(--color-bg); cursor: pointer; padding: 4px; display: flex; margin-left: auto; }
.chat-body { padding: 18px 16px; font-size: 15px; line-height: 1.55; }
.chat-body p { margin: 0 0 12px; }
.chat-body p:last-child { margin: 0; color: var(--color-neutral-700); font-size: 14px; }

/* ── breakpoints ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .g4, .g4-light { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .g-hero, .g2, .g-foot { grid-template-columns: minmax(0, 1fr); }
  .col-rule { border-right: 0; border-bottom: 2px solid var(--color-divider); }
  .media { min-height: 0; }
  .media-sm { min-height: 300px; }
  .hero-copy { padding: 40px 24px; }
  .about-copy { padding: 40px 24px; }
  .g-foot { gap: 32px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .g4, .g4-light { grid-template-columns: minmax(0, 1fr); }
  .page { border-left: 0; border-right: 0; }
  .bar-inner { padding: 8px 16px; }
  .bar-kicker { width: 100%; }
  .bar-actions { width: 100%; margin-top: 6px; }
  .bar-btn--exit { margin-left: auto; }
  .header { padding: 18px 16px; gap: 16px; }
  .nav { gap: 16px; width: 100%; }
  .hero-copy, .about-copy, .section-head, .impact-head, .stat, .funders, .legal { padding-left: 16px; padding-right: 16px; }
  .cell { padding: 26px 16px 24px; }
  .lede { font-size: 18px; }
  .chat { right: 8px; bottom: 8px; }
  .modal-card { padding: 24px; }
}
@media print {
  .bar, .nav, .chat, .modal, .skip { display: none; }
}


/* ==========================================================================
   Interior pages
   ========================================================================== */

.crumb { padding: 14px 24px; font-size: 13px; color: var(--color-neutral-700); border-bottom: 2px solid var(--color-divider); }
.crumb a { color: var(--color-neutral-700); text-decoration: none; }
.crumb a:hover { color: var(--color-accent); text-decoration: underline; }
.crumb span { color: var(--color-neutral-500); margin: 0 8px; }

.phero { padding: 48px 24px 40px; border-bottom: 2px solid var(--color-divider); max-width: 1000px; }
.phero h1 { font-size: clamp(34px, 5vw, 60px); line-height: 1; letter-spacing: -.03em; margin: 0 0 20px; }
.phero .lede { margin: 0; }

/* two-column body: main column + narrow aside, divided by the 2px rule */
.body-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.body-main { padding: 44px 40px 48px 24px; border-right: 2px solid var(--color-divider); }
.body-aside { padding: 44px 24px 48px; }
.body-full { padding: 44px 24px 48px; }

.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.02em;
  margin: 40px 0 14px; padding-top: 24px; border-top: 2px solid var(--color-divider);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: 19px; margin: 28px 0 8px; }
.prose p:not([class]) { font-size: 17px; line-height: 1.65; color: var(--color-neutral-800); margin: 0 0 16px; }
.prose p strong { color: var(--color-text); }
.prose ul, .prose ol { font-size: 17px; line-height: 1.6; color: var(--color-neutral-800); padding-left: 22px; margin: 0 0 20px; }
.prose li + li { margin-top: 8px; }

/* ruled service rows — the workhorse of the program pages */
.rows { border-top: 2px solid var(--color-divider); margin: 0 0 28px; }
.row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: 8px 32px; padding: 20px 0;
  border-bottom: 1px solid var(--color-divider);
}
.row dt, .row-term {
  font-family: var(--font-heading); font-weight: 800; font-size: 17px;
  line-height: 1.25; margin: 0;
}
.row dd, .row-def { margin: 0; font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); }
.row-note { display: block; margin-top: 6px; font-size: 14px; color: var(--color-neutral-600); }

/* bordered emphasis box */
.box { border: 2px solid var(--color-text); padding: 24px; margin: 0 0 24px; }
.box h3 { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin: 0 0 10px; }
.box p:not([class]), .box li { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.box ul { padding-left: 20px; margin: 0; }
.box--accent { border-color: var(--color-accent); }
.box--accent h3 { color: var(--color-accent-700); }
.box--fill { border: 0; background: var(--color-neutral-200); }
.box--urgent { border: 0; background: var(--color-accent); color: #fff; }
/* Beat .prose p / .box p on specificity — this is the emergency callout and
   must stay white on the purple field (4.5:1+), never inherit the grey body colour. */
.box--urgent h3, .box--urgent a, .box--urgent p, .box--urgent li,
.box--urgent strong, .box--urgent em { color: #fff; }
.box-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-neutral-600); margin-bottom: 12px;
}
.box--urgent .box-label { color: rgba(255,255,255,.8); }

.aside-block { margin-bottom: 32px; }
.aside-block h3 {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700);
  margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--color-divider);
}
.aside-block p:not([class]), .aside-block li { font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); margin: 0 0 10px; }
.aside-block ul { padding-left: 20px; margin: 0; }
.addr { font-size: 16px; line-height: 1.7; }
.addr strong { display: block; font-family: var(--font-heading); font-size: 17px; }

/* column lists — wish list, links */
.cols { columns: 2; column-gap: 40px; }
.cols li { break-inside: avoid; }
.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain li {
  padding: 10px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 16px; line-height: 1.45;
}
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; background: var(--color-divider); }
.g3 > * { background: var(--color-bg); padding: 26px 22px; }
.g2-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--color-divider); }
.g2-cells > * { background: var(--color-bg); padding: 26px 22px; }

/* timeline */
.timeline { border-top: 2px solid var(--color-divider); }
.tl-row {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--color-divider);
}
.tl-year {
  font-family: var(--font-heading); font-weight: 900; font-size: 24px;
  line-height: 1; letter-spacing: -.02em; color: var(--color-accent-700);
}
.tl-body { font-size: 16px; line-height: 1.55; color: var(--color-neutral-800); }

/* link directory */
.dir-item { padding: 18px 0; border-bottom: 1px solid var(--color-divider); }
.dir-name { font-family: var(--font-heading); font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.dir-name a { color: var(--color-text); text-decoration: none; }
.dir-name a:hover { color: var(--color-accent); text-decoration: underline; }
.dir-phone { font-family: var(--font-heading); font-weight: 800; font-size: 16px; color: var(--color-accent-700); }
.dir-desc { font-size: 15px; color: var(--color-neutral-700); margin-top: 4px; }

/* the purple poster close — one per page, maximum */
.close-band { background: var(--color-accent); color: #fff; padding: 48px 24px; border-bottom: 2px solid var(--color-divider); }
.close-band h2 {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.02;
  letter-spacing: -.03em; margin: 0 0 20px; max-width: 24ch;
}
.close-band p:not([class]) { font-size: 18px; line-height: 1.5; max-width: 56ch; margin: 0 0 28px; opacity: .95; }
.close-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-white {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--color-accent-700); text-decoration: none;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px; padding: 16px 24px;
}
.btn-white:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.btn-onred {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: #fff; text-decoration: none; border: 2px solid #fff;
  font-family: var(--font-heading); font-weight: 800; font-size: 17px; padding: 14px 24px;
}
.btn-onred:hover { background: rgba(255,255,255,.16); color: #fff; }

/* editorial placeholder — content the agency still has to supply */
.todo {
  border: 2px dashed var(--color-neutral-500); padding: 20px; margin: 0 0 20px;
  font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.6;
  color: var(--color-neutral-700); background: var(--color-neutral-100);
}
.todo strong { color: var(--color-accent-700); }

.table-plain { width: 100%; border-collapse: collapse; font-size: 16px; }
.table-plain th {
  text-align: left; font-family: var(--font-heading); font-weight: 800;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-700); padding: 10px 12px 10px 0;
  border-bottom: 2px solid var(--color-divider);
}
.table-plain td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--color-divider); }
.table-plain td:last-child { text-align: right; font-family: var(--font-heading); font-weight: 800; }

@media (max-width: 900px) {
  .body-grid { grid-template-columns: minmax(0, 1fr); }
  .body-main { border-right: 0; border-bottom: 2px solid var(--color-divider); padding: 36px 24px 40px; }
  .g3 { grid-template-columns: minmax(0, 1fr); }
  .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cols { columns: 1; }
}
@media (max-width: 640px) {
  .phero, .body-main, .body-aside, .body-full, .close-band, .crumb { padding-left: 16px; padding-right: 16px; }
  .g2-cells { grid-template-columns: minmax(0, 1fr); }
  .tl-row { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
  .tl-year { font-size: 19px; }
}

/* ── aside photograph ────────────────────────────────────────────────── */
.aside-photo { margin: 0 0 32px; }
.aside-photo img {
  display: block; width: 100%; height: 220px; object-fit: cover; object-position: 50% 40%;
  filter: grayscale(1) contrast(1.08);
}
.aside-photo figcaption {
  font-size: 13px; line-height: 1.5; color: var(--color-neutral-700);
  padding-top: 10px; border-top: 2px solid var(--color-divider); margin-top: 10px;
}

/* The hotline bar is sticky, so anchored sections must clear it or the jump
   lands with the heading hidden underneath. */
section[id], div[id] { scroll-margin-top: 76px; }

/* ── event strip (homepage, under the header) ─────────────────────────── */
.event-strip {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 13px 24px; background: var(--color-accent-2-700); color: #fff;
  border-bottom: 2px solid var(--color-divider);
}
.es-date {
  font-family: var(--font-heading); font-weight: 900; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; flex: none;
}
.es-text { font-size: 16px; line-height: 1.35; flex: 1 1 260px; }
.es-link {
  color: #fff; text-decoration: underline;
  text-underline-offset: 3px; font-family: var(--font-heading);
  font-weight: 800; font-size: 15px; white-space: nowrap;
}
.es-link:hover { color: #fff; }
.es-close {
  flex: none; background: transparent; border: 1px solid rgba(255,255,255,.5);
  color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  padding: 6px 10px; cursor: pointer; line-height: 1;
}
.es-close:hover { background: rgba(255,255,255,.16); }
.event-strip .es-link:focus-visible, .es-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── news & events listing ───────────────────────────────────────────── */
.news-list { border-top: 2px solid var(--color-divider); max-width: 76ch; }
.news-kicker {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 6px;
}
.news-meta {
  font-size: 14px; line-height: 1.5; color: var(--color-neutral-700); margin-top: 8px;
}
.news-list--past .dir-name { font-size: 20px; }
.news-list--past .news-kicker { color: var(--color-neutral-700); }

/* ── event band ──────────────────────────────────────────────────────── */
.g-event { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.g-event--nofigure { grid-template-columns: minmax(0, 1fr); }
.g-event--nofigure .event-copy { border-right: 0; max-width: 90ch; }
.event-copy { padding: 34px 40px 40px 24px; border-right: 2px solid var(--color-divider); }
.event-kicker {
  font-family: var(--font-heading); font-weight: 800; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-accent-2-700); margin-bottom: 16px;
}
.event-title {
  font-size: clamp(28px, 3.4vw, 44px); line-height: 1.02;
  letter-spacing: -.02em; margin: 0 0 18px;
}
.event-lede { font-size: 18px; line-height: 1.5; max-width: 56ch; margin: 0 0 28px; }
.event-facts { border-top: 2px solid var(--color-divider); margin: 0; }
.ef-row {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 6px 24px;
  padding: 15px 0; border-bottom: 1px solid var(--color-divider);
}
.ef-label {
  font-family: var(--font-heading); font-weight: 800; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-neutral-700);
}
.ef-val { font-size: 16px; line-height: 1.5; }
.event-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.event-flier { padding: 34px 24px 40px; }
.event-flier img { width: 100%; height: auto; max-width: 420px; border: 2px solid var(--color-divider); }
.event-flier figcaption {
  font-size: 13px; line-height: 1.5; color: var(--color-neutral-700);
  max-width: 420px; padding-top: 10px;
}
@media (max-width: 900px) {
  .g-event { grid-template-columns: minmax(0, 1fr); }
  .event-copy { border-right: 0; border-bottom: 2px solid var(--color-divider); padding: 30px 24px 34px; }
  .ef-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 640px) {
  .event-strip { padding: 12px 16px; gap: 12px; }
  .es-link { margin-left: 0; }
  .event-copy, .event-flier { padding-left: 16px; padding-right: 16px; }
}