/* ============================================================
   Budd Baer Cares — one stylesheet, light + dark, no build step.
   Every color is a token defined on :root (light) and overridden
   for dark. Never hard-code a color outside this token block.
   ============================================================ */

:root {
  color-scheme: light;

  --brand-900: #0b2540;
  --brand-800: #123a63;
  --brand-700: #1a4e82;
  --brand-600: #2467a8;
  --brand-300: #8fb8dd;

  --accent-600: #c8102e;
  --accent-500: #e01b39;
  --accent-100: #fde7ea;

  /* Paper, not screen. The old greys were cool enough to read as a spreadsheet;
     these carry a little yellow so the page feels like something printed. */
  --bg:            #f8f5ef;
  --bg-alt:        #f0eae0;
  --surface:       #fffdfa;
  --surface-2:     #f9f6f0;
  --surface-sunk:  #f2ede4;
  --border:        #e0d8c9;
  --border-strong: #c3b8a4;

  /* Harvest amber — the third color. Navy states the fact, red asks for the
     click, amber is the one that smiles: rules, eyebrows, captions, marks. */
  --warm-700: #8a5a18;
  --warm-600: #b4762a;
  --warm-500: #d29a4a;
  --warm-200: #f0dcbc;
  --warm-100: #f7ecd9;

  --text:      #1d1a15;
  --text-soft: #574f43;
  --text-mute: #837a6c;
  --on-brand:  #ffffff;

  --link:       var(--brand-700);
  --link-hover: var(--accent-600);

  --ok-bg: #e3f3e7; --ok-fg: #1c6b34; --ok-br: #a9d9b7;
  --warn-bg: #fdf0d8; --warn-fg: #8a5a00; --warn-br: #edcf95;
  --err-bg: #fdeaec; --err-fg: #a3132a; --err-br: #f0bcc4;
  --info-bg: #e6eef7; --info-fg: #1a4e82; --info-br: #b6cde6;
  --neutral-bg: #efeade; --neutral-fg: #574f43; --neutral-br: #ddd4c4;

  /* Warm-tinted shadows. A neutral grey shadow on warm paper reads as dirt. */
  --shadow-sm: 0 1px 2px rgba(60, 42, 20, .06), 0 1px 3px rgba(60, 42, 20, .08);
  --shadow-md: 0 4px 10px rgba(60, 42, 20, .06), 0 12px 28px rgba(60, 42, 20, .09);
  --shadow-lg: 0 18px 48px rgba(40, 28, 14, .20);
  --shadow-photo: 0 2px 6px rgba(40, 28, 14, .10), 0 18px 40px rgba(40, 28, 14, .16);

  /* Ink wash used behind photographs so white text always has something to sit on. */
  --scrim: linear-gradient(to top, rgba(20, 14, 6, .82) 0%, rgba(20, 14, 6, .45) 42%, rgba(20, 14, 6, .05) 100%);
  --grain-a: rgba(120, 92, 48, .045);
  --grain-b: rgba(120, 92, 48, .028);

  /* Type laid over a photograph. White in both modes — a photo is dark where
     the scrim is, whatever the page around it is doing. */
  /* Environment banner. Amber ground with near-black type in both modes —
     this must stay legible whichever theme is on, because it is a warning. */
  --banner-bg: #d29a4a;
  --banner-fg: #1d1a15;
  --banner-badge-bg: #1d1a15;
  --banner-badge-fg: #f0dcbc;

  --on-photo:      #ffffff;
  --on-photo-soft: rgba(255, 255, 255, .9);
  --on-photo-mute: rgba(255, 255, 255, .78);
  --on-photo-rule: rgba(255, 255, 255, .5);

  --gap:       1rem;
  --radius:    10px;
  --radius-lg: 16px;
  --maxw:      1120px;
  --maxw-text: 68ch;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  /* Captions and pull quotes. An italic serif reads like someone's handwriting
     in the margin without resorting to a novelty script face. */
  --font-hand: "Iowan Old Style", Georgia, "Times New Roman", serif;
}

:root[data-theme="dark"],
html.dark {
  color-scheme: dark;

  --brand-300: #7fa9d0;

  /* Warm near-black. The old values were blue-grey, which at night reads as
     a dashboard; this reads as a lamp on. */
  --bg:            #16130f;
  --bg-alt:        #1c1813;
  --surface:       #211c16;
  --surface-2:     #29231b;
  --surface-sunk:  #1a1611;
  --border:        #3a3126;
  --border-strong: #55493a;

  --warm-700: #f0c48a;
  --warm-600: #e3ab63;
  --warm-500: #c98f45;
  --warm-200: #4a3a22;
  --warm-100: #34281682;

  --text:      #f2ede4;
  --text-soft: #c6bbaa;
  --text-mute: #97897a;

  --link:       #8fb8dd;
  --link-hover: #ff8b9c;

  --accent-100: #3a1620;

  --ok-bg: #14301d; --ok-fg: #8fd8a5; --ok-br: #27562f;
  --warn-bg: #33260c; --warn-fg: #e9c47c; --warn-br: #5c4718;
  --err-bg: #3a1418; --err-fg: #f4a1ac; --err-br: #6a2028;
  --info-bg: #14283c; --info-fg: #a5c8ea; --info-br: #27476b;
  --neutral-bg: #2b2419; --neutral-fg: #c6bbaa; --neutral-br: #423728;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, .5);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);
  --shadow-photo: 0 2px 8px rgba(0, 0, 0, .5), 0 20px 44px rgba(0, 0, 0, .55);

  --scrim: linear-gradient(to top, rgba(8, 6, 4, .88) 0%, rgba(8, 6, 4, .5) 42%, rgba(8, 6, 4, .06) 100%);
  --grain-a: rgba(240, 214, 170, .035);
  --grain-b: rgba(240, 214, 170, .022);

  --banner-bg: #c98f45;
  --banner-fg: #16130f;
  --banner-badge-bg: #16130f;
  --banner-badge-fg: #e3ab63;

  --on-photo:      #ffffff;
  --on-photo-soft: rgba(255, 255, 255, .9);
  --on-photo-mute: rgba(255, 255, 255, .78);
  --on-photo-rule: rgba(255, 255, 255, .5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand-300: #7fa9d0;
    --bg: #16130f; --bg-alt: #1c1813; --surface: #211c16;
    --surface-2: #29231b; --surface-sunk: #1a1611;
    --border: #3a3126; --border-strong: #55493a;
    --warm-700: #f0c48a; --warm-600: #e3ab63; --warm-500: #c98f45;
    --warm-200: #4a3a22; --warm-100: #34281682;
    --text: #f2ede4; --text-soft: #c6bbaa; --text-mute: #97897a;
    --link: #8fb8dd; --link-hover: #ff8b9c; --accent-100: #3a1620;
    --ok-bg: #14301d; --ok-fg: #8fd8a5; --ok-br: #27562f;
    --warn-bg: #33260c; --warn-fg: #e9c47c; --warn-br: #5c4718;
    --err-bg: #3a1418; --err-fg: #f4a1ac; --err-br: #6a2028;
    --info-bg: #14283c; --info-fg: #a5c8ea; --info-br: #27476b;
    --neutral-bg: #2b2419; --neutral-fg: #c6bbaa; --neutral-br: #423728;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.45);
    --shadow-md: 0 6px 16px rgba(0,0,0,.5);
    --shadow-lg: 0 18px 48px rgba(0,0,0,.6);
    --shadow-photo: 0 2px 8px rgba(0,0,0,.5), 0 20px 44px rgba(0,0,0,.55);
    --scrim: linear-gradient(to top, rgba(8,6,4,.88) 0%, rgba(8,6,4,.5) 42%, rgba(8,6,4,.06) 100%);
    --grain-a: rgba(240, 214, 170, .035);
    --grain-b: rgba(240, 214, 170, .022);
    --banner-bg: #c98f45; --banner-fg: #16130f;
    --banner-badge-bg: #16130f; --banner-badge-fg: #e3ab63;
    --on-photo: #ffffff;
    --on-photo-soft: rgba(255,255,255,.9);
    --on-photo-mute: rgba(255,255,255,.78);
    --on-photo-rule: rgba(255,255,255,.5);
  }
}

/* ---------------- base ---------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.012em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
h3 { font-size: 1.15rem; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }

img { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

:focus-visible {
  outline: 3px solid var(--brand-600);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.prose { max-width: var(--maxw-text); }
.muted { color: var(--text-mute); }
.soft  { color: var(--text-soft); }
.small { font-size: .875rem; }
.tiny  { font-size: .8rem; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.stack > * + * { margin-top: var(--gap, 1rem); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--text); padding: .7rem 1rem;
  border: 2px solid var(--brand-600); border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------------- header / nav ---------------- */

.site-header {
  background: var(--brand-900);
  color: var(--on-brand);
  position: sticky; top: 0; z-index: 30;
  box-shadow: var(--shadow-sm);
}
.site-header a { color: var(--on-brand); text-decoration: none; }
.header-inner {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: .7rem; font-weight: 700; letter-spacing: -.02em; }
.brand-mark {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-size: 1.05rem; }
.brand-text span { font-size: .72rem; color: var(--brand-300); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; flex-wrap: wrap; }
.nav a {
  padding: .5rem .75rem; border-radius: var(--radius);
  font-size: .93rem; font-weight: 500; opacity: .88;
}
.nav a:hover { background: rgba(255,255,255,.12); opacity: 1; }
.nav a[aria-current="page"] { background: rgba(255,255,255,.16); opacity: 1; font-weight: 600; }
.nav .nav-cta {
  background: var(--accent-600); font-weight: 600; opacity: 1;
  padding-inline: 1rem;
}
.nav .nav-cta:hover { background: var(--accent-500); }

.theme-toggle {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  color: inherit; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; font-size: 1rem;
  margin-left: .25rem;
}
.theme-toggle:hover { background: rgba(255,255,255,.2); }

/* ---------------- hero ---------------- */

.hero {
  background:
    radial-gradient(1200px 420px at 12% -30%, rgba(200,16,46,.35), transparent 60%),
    linear-gradient(155deg, var(--brand-900), var(--brand-700) 62%, var(--brand-600));
  color: #fff;
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.hero h1 { color: #fff; margin-bottom: .4em; font-family: var(--font-display); }
.hero-lede { font-size: clamp(1.02rem, .95rem + .45vw, 1.2rem); color: rgba(255,255,255,.9); max-width: 60ch; }
.hero-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-size: .76rem;
  font-weight: 700; color: var(--brand-300); margin-bottom: 1rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.25rem; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: .95rem;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: background .14s ease, border-color .14s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent-600); color: #fff; }
.btn-primary:hover { background: var(--accent-500); color: #fff; }
.btn-brand { background: var(--brand-700); color: #fff; }
.btn-brand:hover { background: var(--brand-600); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
.btn-outline { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-outline:hover { background: var(--surface-2); color: var(--text); border-color: var(--brand-600); }
.btn-danger { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-br); }
.btn-danger:hover { background: var(--err-br); color: var(--err-fg); }
.btn-sm { padding: .4rem .75rem; font-size: .85rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------- cards / sections ---------------- */

.section { padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: var(--maxw-text); margin-bottom: 2rem; }
.section-head p { color: var(--text-soft); font-size: 1.05rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.card-tight { padding: 1.1rem; }
.card h3 { margin-bottom: .35em; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* stat tiles */
.stats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.4rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.stat-num {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 800; line-height: 1; color: var(--brand-700);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .stat-num { color: var(--brand-300); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stat-num { color: var(--brand-300); }
}
.stat-label { margin-top: .45rem; font-size: .85rem; color: var(--text-soft); font-weight: 500; }

.value-item { display: flex; gap: 1rem; align-items: flex-start; }
.value-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-100); color: var(--accent-600);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
:root[data-theme="dark"] .value-num { color: #f4a1ac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .value-num { color: #f4a1ac; }
}

/* story cards */
.story-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.story-photo { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; background: var(--surface-sunk); }
.story-photo-empty {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand-800), var(--brand-600));
  color: #fff; font-family: var(--font-display); font-size: 1.6rem; padding: 1rem; text-align: center;
}
.story-body { padding: 1.35rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.story-body h3 { margin: 0; }
.story-org { font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-mute); font-weight: 600; }
.story-text { color: var(--text-soft); }
.story-text.clamp {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------------- badges ---------------- */

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; line-height: 1.5;
  border: 1px solid var(--neutral-br); background: var(--neutral-bg); color: var(--neutral-fg);
  white-space: nowrap;
}
.badge-new       { background: var(--info-bg); color: var(--info-fg); border-color: var(--info-br); }
.badge-in_review { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-br); }
.badge-need_info { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-br); }
.badge-approved  { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-br); }
.badge-fulfilled { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-br); }
.badge-declined  { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-br); }

/* ---------------- forms ---------------- */

.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.5rem; }
.field > label, .field-label {
  display: block; font-weight: 600; margin-bottom: .35rem; color: var(--text);
}
.field-help { font-size: .86rem; color: var(--text-mute); margin: -.1rem 0 .45rem; }
.req { color: var(--accent-600); font-weight: 700; margin-left: .15rem; }
:root[data-theme="dark"] .req { color: #f4a1ac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .req { color: #f4a1ac; }
}

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], input[type="password"], input[type="search"], input[type="url"],
textarea, select {
  width: 100%; padding: .62rem .75rem;
  font: inherit; font-size: .97rem; color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { resize: vertical; min-height: 5rem; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 22%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--text-mute); }
input[type="file"] {
  width: 100%; padding: .55rem; font-size: .9rem;
  background: var(--surface-2); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); color: var(--text-soft);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%),
                    linear-gradient(135deg, var(--text-mute) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}
.choice-list { display: grid; gap: .5rem; }
.choice {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem .8rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: var(--surface-2); cursor: pointer;
}
.choice:hover { border-color: var(--brand-600); }
.choice input { margin-top: .25rem; flex: none; accent-color: var(--brand-700); }
.choice-other-input { margin-top: .5rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.form-actions {
  display: flex; gap: .75rem; flex-wrap: wrap; align-items: center;
  margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
fieldset legend {
  font-weight: 700; font-size: 1.05rem; padding: 0 0 .35rem;
  margin-bottom: 1rem; width: 100%; border-bottom: 2px solid var(--border);
}

/* ---------------- alerts ---------------- */

.alert {
  padding: .85rem 1.1rem; border-radius: var(--radius);
  border: 1px solid var(--info-br); background: var(--info-bg); color: var(--info-fg);
  margin-bottom: 1.5rem; font-size: .95rem;
}
.alert-ok   { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-br); }
.alert-err  { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-br); }
.alert-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-br); }
.alert ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.alert a { color: inherit; }

/* ---------------- tables ---------------- */

.table-wrap {
  overflow-x: auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
thead th {
  text-align: left; padding: .75rem 1rem; white-space: nowrap;
  background: var(--surface-sunk); color: var(--text-soft);
  font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
tbody td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-empty { padding: 3rem 1rem; text-align: center; color: var(--text-mute); }

/* ---------------- footer ---------------- */

.site-footer {
  background: var(--brand-900); color: rgba(255,255,255,.75);
  padding: 3rem 0 2rem; margin-top: 4rem; font-size: .92rem;
}
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h4 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .4rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.15);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: .85rem; color: rgba(255,255,255,.6);
}

@media print {
  .site-header, .site-footer, .no-print, .theme-toggle { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .table-wrap { box-shadow: none; border-color: #999; }
}

/* Social links in the footer. Rendered only for profiles that are configured,
   so an unused network never shows a dead icon. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.social-row { display: flex; gap: .5rem; margin-top: 1rem; list-style: none; padding: 0; }
.social-row li { margin: 0; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem; font-weight: 700;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  text-decoration: none; transition: background .14s ease;
}
.social-row a:hover { background: var(--accent-600); border-color: var(--accent-600); }

/* Rewards call-out */
.rewards-band {
  background: linear-gradient(150deg, var(--brand-800), var(--brand-600));
  color: #fff; border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  display: flex; gap: 1.75rem; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
}
.rewards-band h2, .rewards-band h3 { color: #fff; margin-top: 0; }
.rewards-band p { color: rgba(255, 255, 255, .9); }
.rewards-band .rewards-copy { flex: 1 1 min(100%, 34rem); }


/* ------------------------------------------------------------------
   Public filter chips (program filter on Our Impact).
   These previously reused the console's .tabs class, which is defined in
   admin.css and never loaded on the public site — so they rendered as a
   run-together line of bare links.
   ------------------------------------------------------------------ */

.filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 2rem; padding: 0; list-style: none;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border-strong);
  color: var(--text); text-decoration: none;
  font-size: .9rem; font-weight: 600; line-height: 1.4;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.filter-chip:hover { border-color: var(--brand-600); color: var(--text); background: var(--surface-2); }
.filter-chip[aria-current="page"] {
  background: var(--brand-700); border-color: var(--brand-700); color: #fff;
}
.filter-chip[aria-current="page"]:hover { background: var(--brand-800); color: #fff; }
.filter-chip .chip-count {
  font-size: .78rem; font-weight: 700; opacity: .75;
  padding: 0 .35rem; border-radius: 999px; background: rgba(0, 0, 0, .08);
}
.filter-chip[aria-current="page"] .chip-count { background: rgba(255, 255, 255, .22); opacity: 1; }
:root[data-theme="dark"] .filter-chip .chip-count { background: rgba(255, 255, 255, .12); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .filter-chip .chip-count { background: rgba(255, 255, 255, .12); }
}
.filter-bar-label {
  width: 100%; margin: 0 0 .1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-mute);
}

/* ------------------------------------------------------------------
   Share the Love hometown partner feature.
   ------------------------------------------------------------------ */

.partner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-600);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
}
.partner-head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.partner-logo {
  /* Partner marks are often wide wordmarks, so constrain the height and let
     the width follow rather than forcing them into a square. */
  height: 56px; width: auto; max-width: min(100%, 280px);
  object-fit: contain; flex: none;
}
.partner-eyebrow {
  margin: 0; font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-600);
}
:root[data-theme="dark"] .partner-eyebrow { color: #f4a1ac; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner-eyebrow { color: #f4a1ac; }
}
.partner-quote {
  margin: 0 0 1.25rem; padding: .85rem 0 .85rem 1.25rem;
  border-left: 3px solid var(--accent-600);
  font-family: var(--font-display); font-size: 1.12rem;
  line-height: 1.5; color: var(--text);
}
.partner-body { color: var(--text-soft); max-width: var(--maxw-text); }
.partner-prog {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.partner-prog h3 { font-size: 1rem; margin: 0 0 .25em; }
.partner-involve {
  margin: 1.5rem 0 0; padding: .9rem 1.1rem;
  background: var(--surface-sunk); border-radius: var(--radius);
  color: var(--text-soft); font-size: .95rem;
}

/* The sign-in card sits on --surface, which flips with the theme, so it shows
   whichever logo variant reads against the current background. The header does
   not need this: it is navy in both themes and always uses the white art. */
.brand-mark-adaptive { position: relative; }
.brand-mark-adaptive img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark-adaptive .logo-on-dark { display: none; }
:root[data-theme="dark"] .brand-mark-adaptive .logo-on-light { display: none; }
:root[data-theme="dark"] .brand-mark-adaptive .logo-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark-adaptive .logo-on-light { display: none; }
  :root:not([data-theme="light"]) .brand-mark-adaptive .logo-on-dark { display: block; }
}

/* Ways the dealership shows up for the partner charity. */
.partner-involve-block {
  margin-top: 1.75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.partner-involve-block h3 { font-size: 1.05rem; margin: 0 0 1rem; }
.partner-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.partner-ways li {
  padding: 1rem 1.15rem; border-radius: var(--radius);
  background: var(--surface-sunk); border-left: 3px solid var(--accent-600);
}
.partner-ways b { display: block; margin-bottom: .25rem; color: var(--text); }
.partner-ways span { display: block; font-size: .95rem; }

/* ==================================================================
   Mobile navigation.

   The nav previously wrapped into three or four ragged rows on a phone,
   consuming a fifth of the screen — and because the header is sticky, it
   followed you down the whole page. Below the breakpoint it now collapses
   behind a menu button.

   Progressive enhancement: the button ships with the `hidden` attribute and
   only JavaScript removes it, so with JS off nobody sees a control that does
   nothing — the nav simply stays open and wraps, as it did before.
   ================================================================== */

.header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }

.nav-toggle {
  /* 44px is the minimum comfortable touch target. */
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius);
  color: inherit; cursor: pointer; padding: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .2); }
.nav-toggle-bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle-bars span {
  display: block; height: 2px; width: 100%; border-radius: 2px;
  background: currentColor; transition: transform .16s ease, opacity .16s ease;
}
[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* The compact call to action only exists in the collapsed bar. */
.nav-cta-compact { display: none; }

@media (max-width: 900px) {
  .header-inner { min-height: 60px; flex-wrap: nowrap; gap: .5rem; }
  /* Nothing in the bar may wrap — a two-line brand or button doubles the
     height of a header that is stuck to the top of every page. */
  .brand { min-width: 0; }
  .brand-text { min-width: 0; }
  .brand-text b { font-size: 1rem; white-space: nowrap; }
  .brand-text span { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .nav-cta-compact { white-space: nowrap; }
  .site-header .header-actions { flex: none; }

  /* Only once JS has taken over does the bar become a collapsed one. */
  .js .nav-cta-compact { display: inline-flex; padding: .6rem .85rem; font-size: .88rem; }
  .js .nav-cta-inline { display: none; }

  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: .5rem .75rem 1rem;
    flex-direction: column; align-items: stretch; gap: .15rem;
    background: var(--brand-900);
    border-top: 1px solid rgba(255, 255, 255, .14);
    box-shadow: var(--shadow-lg);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .js .nav[hidden] { display: none; }

  .js .nav a {
    padding: .85rem 1rem;          /* ~48px tall */
    border-radius: var(--radius);
    font-size: 1rem; opacity: 1;
  }
  .js .nav a + a { border-top: 1px solid rgba(255, 255, 255, .08); }
  .js .nav a[aria-current="page"] { background: rgba(255, 255, 255, .16); }
  .js .nav .theme-toggle {
    width: 100%; height: 48px; border-radius: var(--radius);
    margin: .5rem 0 0; justify-content: center;
  }
  .site-header { position: sticky; }
}

@media (min-width: 901px) {
  /* Desktop keeps the single-row nav; the toggle is irrelevant there. */
  .nav-toggle { display: none; }
  .header-actions { margin-left: 0; }
}

/* On the narrowest phones the bar cannot hold the wordmark and the full call
   to action. The logo already identifies the site, and getting someone to the
   form matters more than repeating the name, so the text goes and the button
   keeps its full label. */
@media (max-width: 430px) {
  .site-header .brand-text { display: none; }
}

/* ------------------------------------------------------------------
   iOS Safari zooms the whole page in when you focus a form control whose
   font-size is below 16px, and it does not zoom back out. On a seventeen
   field application filled from a phone that is punishing, so every control
   goes to 16px at phone widths. Desktop keeps the tighter sizing.
   ------------------------------------------------------------------ */

@media (max-width: 900px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], input[type="password"], input[type="search"], input[type="url"],
  textarea, select {
    font-size: 16px;
    padding: .7rem .8rem;
  }
  input[type="file"] { font-size: 16px; padding: .7rem; }

  /* Roomier tap targets and a little more air between questions. */
  .field { margin-bottom: 1.75rem; }
  .choice { padding: .8rem .9rem; }
  .choice input { width: 20px; height: 20px; }
  .form-actions .btn { width: 100%; justify-content: center; }
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-card { padding: 1.15rem; }
  fieldset legend { font-size: 1rem; }
}

/* ==================================================================
   Drawers and sheets.

   A dropdown panel is fine for a handful of links, but it is the wrong
   shape for anything long or task-shaped: on a phone the console's
   review form sat almost four screens below the fold. These give the
   nav a side drawer and put long forms in a bottom sheet that opens
   over the page instead of pushing it down.

   Everything degrades: the sheets are <details>, so with JavaScript off
   they are plain inline disclosures, and the drawer falls back to the
   dropdown panel.
   ================================================================== */

.scrim {
  position: fixed; inset: 0;
  /* MUST stay below every sticky/positioned ancestor that a drawer or sheet
     lives inside. .site-header (30), .admin-header (40) and .review-sheet (30)
     each create a stacking context, so a panel nested in one cannot escape it
     however high its own z-index is — at z-index 60 this scrim rendered over
     the drawer and swallowed every tap, closing the menu instead of following
     the link. Keep this the lowest of the numbers above. */
  z-index: 20;
  background: rgba(6, 14, 24, .55);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.scrim[data-open] { opacity: 1; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .scrim, .js .nav, .js .admin-nav, .sheet-panel { transition: none !important; }
}

/* ---- side drawer (navigation) ---- */

@media (max-width: 900px) {
  .js .nav {
    position: fixed; top: 0; right: 0; left: auto; bottom: 0;
    z-index: 70;
    width: min(86vw, 340px);
    max-height: none; height: 100dvh;
    padding: 1rem .9rem calc(1rem + env(safe-area-inset-bottom));
    border-top: 0; border-left: 1px solid rgba(255, 255, 255, .12);
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.2, .7, .3, 1);
    overscroll-behavior: contain;
  }
  /* Kept in the layout (not display:none) so the transition can run and so
     focus can be moved into it before it finishes opening. */
  .js .nav[hidden] { display: flex; visibility: hidden; }
  .js .nav[data-open] { transform: translateX(0); visibility: visible; }

  .js .nav::before {
    content: "Menu";
    display: block; padding: .4rem .75rem 1rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand-300);
  }
}

/* ---- bottom sheet (long forms) ---- */

.sheet-trigger { display: none; }
.sheet > .sheet-panel { display: block; }

@media (max-width: 1080px) {
  .js .sheet-trigger {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; min-height: 48px; padding: .7rem 1rem;
    background: var(--accent-600); color: #fff;
    border-radius: var(--radius); cursor: pointer; list-style: none;
    font-weight: 600; font-size: .95rem;
  }
  .js .sheet-trigger::-webkit-details-marker { display: none; }
  .js .sheet-trigger.is-quiet {
    background: var(--surface); color: var(--text);
    border: 1px solid var(--border);
    justify-content: space-between;
  }

  .js .sheet > .sheet-panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    max-height: 85dvh; overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow-lg);
    padding: .5rem 1rem calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateY(100%);
    transition: transform .24s cubic-bezier(.2, .7, .3, 1);
  }
  .js .sheet[open] > .sheet-panel { transform: translateY(0); }

  /* Grab handle, so it reads as a sheet rather than a stuck panel. */
  .js .sheet > .sheet-panel::before {
    content: ""; display: block; width: 40px; height: 4px; margin: .35rem auto 1rem;
    border-radius: 999px; background: var(--border-strong);
  }
  .js .sheet > .sheet-panel .card {
    border: 0; box-shadow: none; padding: 0; background: transparent;
  }
}

/* An off-canvas drawer sits outside the viewport when closed. Chromium does
   not extend the scrollable area to reach it, but iOS Safari can, which shows
   up as a page that scrolls sideways into empty space. So clip the horizontal
   axis — but carefully, because the obvious spelling of this is a trap.

   `overflow-x: hidden` forces the other axis to compute to `auto`, which turns
   the element into a scroll container. Putting it on `html` AND `body`, as this
   rule used to, creates two nested scrollports: WebKit then measures sticky
   offsets and scroll extent against the inner one, which reads as a page that
   stops short, repaints the bottom oddly, or refuses to scroll its full depth.

   `overflow-x: clip` clips without ever creating a scroll container, so the
   sticky header keeps working and the nesting problem cannot recur no matter
   which elements carry it — which is why both are named here, rather than
   relying on the root's overflow propagating to the viewport, which engines
   have been inconsistent about for `clip`. The `hidden` fallback below is on
   `html` alone, so on engines predating clip (Safari < 16) there is still only
   one scrollport. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
  body { overflow-x: clip; }
}

/* The drawer covers the toggle that opened it, so it carries its own close
   control rather than relying on the scrim strip or the Escape key. */
.drawer-close { display: none; }

@media (max-width: 900px) {
  .js .nav .drawer-close {
    display: grid; place-items: center;
    position: absolute; top: .55rem; right: .75rem;
    width: 44px; height: 44px; padding: 0;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: var(--radius);
    color: #fff; font-size: 1.05rem; cursor: pointer;
  }
  .js .nav .drawer-close:hover { background: rgba(255, 255, 255, .2); }
  .js .nav { position: fixed; }
}

/* ==================================================================
   EDITORIAL ART DIRECTION
   ------------------------------------------------------------------
   The public pages were an even grid of identical cards at identical
   spacing. Correct, and about as warm as a parts catalogue. What follows
   breaks that rhythm on purpose: photographs at full bleed, rows that
   alternate side to side, figures set as a line of type instead of three
   boxes, and captions in an italic serif so a real voice shows up in the
   margins. Tokens only — light and dark both, or check-theme fails.
   ================================================================== */

/* ---- paper ---------------------------------------------------------
   A very slight tooth so the background is not a flat fill. Two offset
   gradients, no image: costs nothing and survives dark mode because the
   grain tokens flip with it. */
.paper {
  background-image:
    radial-gradient(circle at 12% 18%, var(--grain-a) 0 1px, transparent 1px),
    radial-gradient(circle at 62% 74%, var(--grain-b) 0 1px, transparent 1px);
  background-size: 13px 13px, 21px 21px;
}

/* ---- eyebrow -------------------------------------------------------
   Small caps in amber, with a short rule. Used to label a section the way
   a magazine labels a department. */
.eyebrow {
  display: flex; align-items: center; gap: .6rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--warm-700); margin-bottom: .8rem;
}
.eyebrow::before {
  content: ""; width: 1.8rem; height: 2px; flex: none;
  background: var(--warm-600); border-radius: 2px;
}
.eyebrow-center { justify-content: center; }

/* ---- display type --------------------------------------------------
   Bigger, tighter, and set in the serif. The old headings were sized off
   the body scale, which is why every section read at the same volume. */
.display {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 3.2vw, 3.4rem);
  line-height: 1.04; letter-spacing: -.015em; margin: 0 0 .5em;
}
.display-sm {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .4em;
}
.lede {
  font-size: clamp(1.05rem, 1rem + .4vw, 1.22rem);
  line-height: 1.6; color: var(--text-soft); max-width: 54ch;
}

/* ---- figure + caption ----------------------------------------------
   Every photograph on the site says what it is. A caption is the cheapest
   way to prove a picture is ours and not stock. */
.figure { margin: 0; }
.figure img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-photo);
}
.caption {
  font-family: var(--font-hand); font-style: italic;
  font-size: .94rem; line-height: 1.45; color: var(--text-soft);
  margin-top: .7rem; padding-left: .8rem; border-left: 2px solid var(--warm-500);
}

/* ---- editorial row --------------------------------------------------
   Photo one side, words the other, and it alternates down the page. The
   columns are deliberately unequal — a 1fr/1fr split is what made the old
   layout feel like a form. */
.ed-row {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center; margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.ed-row:last-child { margin-bottom: 0; }
@media (min-width: 860px) {
  .ed-row { grid-template-columns: 1.05fr 1fr; }
  .ed-row.flip > .ed-media { order: 2; }
  .ed-row.flip > .ed-body  { order: 1; }
  /* Nudge alternate rows off the baseline so the page does not march. */
  .ed-row.flip .ed-media { transform: translateY(1.25rem); }  /* whole column, caption included */
}
.ed-media { position: relative; }
.ed-media img { aspect-ratio: 4 / 3; }
.ed-body h3 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 .5rem; }
.ed-body p { color: var(--text-soft); margin: 0 0 .8rem; }

/* A thin amber card tucked behind the photo, offset. Pure decoration, and
   the reason the rows stop looking like a table. */
.ed-media::after {
  content: ""; position: absolute; inset: 1.1rem -1.1rem -1.1rem 1.1rem;
  border: 2px solid var(--warm-500); border-radius: var(--radius-lg);
  z-index: -1; opacity: .55;
}
.ed-row.flip .ed-media::after { inset: 1.1rem 1.1rem -1.1rem -1.1rem; }

/* ---- full-bleed band ------------------------------------------------
   One photograph, edge to edge, with the words sitting on an ink wash.
   Used once or twice a page to change the pace. */
.band {
  position: relative; margin: clamp(2.5rem, 6vw, 4.5rem) 0;
  min-height: clamp(320px, 42vw, 520px);
  display: grid; align-items: end;
  border-radius: 0; overflow: hidden; isolation: isolate;
}
.band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.band::before {
  content: ""; position: absolute; inset: 0; background: var(--scrim); z-index: -1;
}
.band-inner {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 4vw, 2rem);
  color: var(--on-photo);
}
.band-inner .display, .band-inner .display-sm { color: var(--on-photo); }
.band-inner p { color: var(--on-photo-soft); max-width: 46ch; }
.band-inner .eyebrow { color: var(--warm-500); }
.band-inner .eyebrow::before { background: var(--warm-500); }
.band .caption {
  color: var(--on-photo-mute); border-left-color: var(--on-photo-rule);
}

/* ---- the ledger -----------------------------------------------------
   The three stat boxes were identical rectangles, which made three
   different facts look like one control panel. Set as a line instead,
   separated by rules, the way a masthead prints its figures. */
.ledger {
  display: grid; gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
  border-top: 2px solid var(--warm-500);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 720px) { .ledger { grid-auto-flow: column; grid-auto-columns: 1fr; } }
.ledger-item { text-align: center; }
@media (min-width: 720px) {
  .ledger-item + .ledger-item { border-left: 1px solid var(--border); }
}
.ledger-num {
  font-family: var(--font-display); font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem);
  line-height: 1; color: var(--brand-700); letter-spacing: -.02em;
}
.ledger-label {
  margin-top: .5rem; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 600;
}
:root[data-theme="dark"] .ledger-num { color: var(--warm-600); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ledger-num { color: var(--warm-600); }
}

/* ---- pull quote -----------------------------------------------------
   Their words, at size, in the serif. */
.pull {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.9rem);
  line-height: 1.35; color: var(--text); margin: 0;
  padding-left: clamp(1rem, 3vw, 2rem); border-left: 3px solid var(--warm-500);
  max-width: 34ch;
}
.pull cite {
  display: block; margin-top: .9rem; font-family: var(--font);
  font-style: normal; font-size: .82rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-mute); font-weight: 600;
}

/* ---- photo strip ----------------------------------------------------
   Three or four frames at uneven heights. Reads as a contact sheet
   pinned up, not as a gallery widget. */
.strip { display: grid; gap: clamp(.6rem, 2vw, 1.1rem); }
@media (min-width: 700px) { .strip { grid-template-columns: repeat(3, 1fr); } }
.strip img { border-radius: var(--radius); aspect-ratio: 3 / 4; }
@media (min-width: 700px) {
  /* Offset the whole figure, not the image inside it — moving the image alone
     leaves its caption behind and the photo lands on top of the words. */
  .strip > :nth-child(2) { transform: translateY(1.6rem); }
}

/* Reduced motion and print: nothing here animates, but the offsets are
   decorative and should not survive onto paper. */
@media print {
  .ed-media::after, .band::before { display: none; }
  .ed-row.flip .ed-media, .strip > :nth-child(2) img { transform: none; }
}

/* ---- the creed ------------------------------------------------------
   The five things they get behind. Previously five identical cards in a
   two-column grid, which made a statement of values look like a settings
   screen. Now a numbered editorial list: hairline rules, an amber numeral
   hanging in the margin, and enough air to read one at a time. Uniform on
   purpose — it is a list, and a list that varies is just untidy. */
.creed { list-style: none; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; }
.creed-item {
  display: grid; gap: .5rem 1.4rem;
  grid-template-columns: auto 1fr;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
  border-top: 1px solid var(--border);
}
.creed-item:last-child { border-bottom: 1px solid var(--border); }
.creed-num {
  font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1; color: var(--warm-600); letter-spacing: -.02em;
}
.creed-item h3 {
  font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem);
  margin: 0 0 .35rem; line-height: 1.2;
}
.creed-item p { margin: 0; color: var(--text-soft); max-width: 62ch; }
@media (min-width: 860px) {
  /* Alternate the indent so the column edge is not a ruler. */
  .creed-item:nth-child(even) { padding-left: clamp(2rem, 6vw, 5rem); }
}

/* ---- featured stories -----------------------------------------------
   The four stories we actually have a photograph of. Large, alternating
   side to side, photo doing the work. Deliberately a different component
   from the list below rather than a bigger version of the same card —
   mixing photographed and unphotographed cards in one grid is what made
   the odd one out look broken. */
.features { display: grid; gap: clamp(2rem, 5vw, 3.5rem); margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.feature { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
@media (min-width: 820px) {
  .feature { grid-template-columns: 1.15fr 1fr; }
  .feature.flip .feature-media { order: 2; }
  .feature.flip .feature-body  { order: 1; }
}
.feature-media { position: relative; }
.feature-media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-photo);
}
/* The same offset rule as the editorial rows, so the two feel related. */
.feature-media::after {
  content: ""; position: absolute; inset: 1rem -1rem -1rem 1rem;
  border: 2px solid var(--warm-500); border-radius: var(--radius-lg);
  z-index: -1; opacity: .5;
}
.feature.flip .feature-media::after { inset: 1rem 1rem -1rem -1rem; }
.feature-body h3 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.15; margin: 0 0 .6rem;
}
.feature-text { color: var(--text-soft); margin: 0 0 .9rem; max-width: 46ch; }
.feature-meta {
  margin: 0; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-mute); font-weight: 600;
}

/* ---- the rest, as a list --------------------------------------------
   No image slot at all. A card with an empty picture frame reads as a
   broken card; a list row reads as a list row. */
.story-list-head { margin-bottom: .5rem; }
.story-list { list-style: none; margin: 0; padding: 0; }
.story-row {
  display: grid; gap: .3rem .5rem; align-items: baseline;
  grid-template-columns: 1fr auto;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0;
  border-top: 1px solid var(--border);
}
.story-row:last-child { border-bottom: 1px solid var(--border); }
.story-row-head { grid-column: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .75rem; }
.story-row-head h3 {
  font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  margin: 0; line-height: 1.25;
}
.story-row-org {
  font-size: .76rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--warm-700); font-weight: 700;
}
.story-row-text { grid-column: 1; margin: .15rem 0 0; color: var(--text-soft); max-width: 68ch; }
.story-row-date {
  grid-column: 2; grid-row: 1; font-size: .76rem; color: var(--text-mute);
  white-space: nowrap; font-weight: 600;
}
@media (max-width: 620px) {
  .story-row { grid-template-columns: 1fr; }
  .story-row-date { grid-column: 1; grid-row: auto; margin-top: .35rem; }
}

/* ---- read on -------------------------------------------------------
   Every trimmed excerpt gets one of these. An ellipsis with nothing behind
   it tells the reader there is more and then refuses to show it. */
.read-on {
  display: inline-block; font-size: .82rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--warm-700); text-decoration: none;
  border-bottom: 2px solid var(--warm-500); padding-bottom: 1px;
}
.read-on:hover, .read-on:focus-visible { color: var(--link-hover); border-bottom-color: currentColor; }
.feature-text + .read-on { margin-top: -.4rem; margin-bottom: .9rem; }

/* Story titles are links now; they should not look like body copy. */
.feature-body h3 a, .story-row-head h3 a { color: inherit; text-decoration: none; }
.feature-body h3 a:hover, .feature-body h3 a:focus-visible,
.story-row-head h3 a:hover, .story-row-head h3 a:focus-visible {
  color: var(--link-hover); text-decoration: underline; text-underline-offset: 3px;
}

/* ---- a story in full ------------------------------------------------ */
.story-full { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.story-full p {
  font-size: clamp(1.02rem, 1rem + .25vw, 1.14rem);
  line-height: 1.7; color: var(--text); margin: 0 0 1.1em;
}
.story-full p:first-of-type::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.1em;
  line-height: .84; padding: .06em .09em 0 0; color: var(--warm-600);
}

/* ---- environment banner ---------------------------------------------
   Only rendered on a non-production copy. Deliberately not dismissible:
   its whole job is to stop somebody acting on preview believing they are
   on the live site. Sticky so it survives scrolling. */
.env-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .55rem clamp(.75rem, 3vw, 1.25rem);
  background: var(--banner-bg); color: var(--banner-fg);
  font-size: .85rem; font-weight: 600; line-height: 1.35;
}
.env-badge {
  flex: none; background: var(--banner-badge-bg); color: var(--banner-badge-fg);
  border-radius: 999px; padding: .12rem .6rem;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
}
@media print { .env-banner { display: none; } }