/* ==========================================================================
   components.css — Reusable UI components
   Header/nav, footer, buttons, cards, tables, forms, badges, filters,
   metrics, and the CSS-only bar visualisations used on the finances page.
   ========================================================================== */

/* ---- Site header / navigation ------------------------------------------- */
.site-header {
  border-bottom: var(--border-w) solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Frosted-glass bar: translucent white over a backdrop blur, so content
   scrolling underneath shows through without hurting label legibility.
   Browsers without backdrop-filter keep the solid background above. */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(12px) saturate(1.5);
    backdrop-filter: blur(12px) saturate(1.5);
  }
}
/* Three-zone institutional layout: brand at the SCREEN's far left, menus
   centred on the viewport, action at the far right. The bar is full-bleed
   with a small gutter — not constrained to the content container. */
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--header-h);
  padding-block: var(--space-2);
  padding-inline: clamp(1rem, 2.5vw, 2rem);
}
.nav__brand { justify-self: start; }
.nav__links { justify-self: center; }
/* Desktop-only CTA pill; on mobile the destination lives inside the menu. */
.nav__cta { justify-self: end; }
.nav__toggle { justify-self: end; }
.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--text);
}
.nav__brand-mark { display: inline-flex; }
.nav__logo {
  width: 2.5rem; height: 2.5rem;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}
.nav__mark {
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;   /* round, like the badge */
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
}
/* Fallback mark is hidden unless the logo image fails to load (see main.js). */
.nav__mark--fallback { display: none; }
.nav__title { font-family: var(--font-brand); font-weight: 400; line-height: 1.15; }
.nav__title small { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-soft); }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);   /* airier spacing between top-level menus */
  list-style: none;
  margin: 0; padding: 0;
}
.nav__item { position: relative; }

/* Top-level menu trigger — same text style as the rest of the interface
   (regular weight, normal tracking), like the reference's nav links. */
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  letter-spacing: normal;
  color: var(--text);
}
.nav__trigger:hover { color: var(--text); background: var(--gray-100); }
/* Underline the group whose page is currently open — colour + underline, not colour alone */
.nav__item.is-current > .nav__trigger { color: var(--brand-text); box-shadow: inset 0 -2px 0 var(--brand); }
.nav__caret { display: inline-block; transition: transform var(--transition); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

/* Dropdown panel */
.nav__submenu {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 230px;
  margin-top: var(--space-1);
  padding: var(--space-2);
  list-style: none;
  background: var(--bg);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  z-index: 60;
}
/* Invisible hover bridge across the visual gap between trigger and panel —
   without it, crossing the gap fires mouseleave and the menu snaps shut. */
.nav__submenu::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-1) - 2px);
  left: 0; right: 0;
  height: calc(var(--space-1) + 2px);
}
.nav__item.is-open .nav__submenu { display: block; }
.nav__submenu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
.nav__submenu a:hover { color: var(--text); background: var(--gray-100); }
.nav__submenu a[aria-current="page"] {
  color: var(--brand-text);
  font-weight: 600;
  background: var(--brand-tint);
}

/* Mobile menu toggle — hidden on desktop. Min 44px tall for touch targets. */
.nav__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  background: var(--bg);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-4);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

@media (max-width: 860px) {
  /* Two-zone mobile bar: brand left, toggle right (links overlay below) */
  .nav { grid-template-columns: 1fr auto; }
  .nav__toggle { display: inline-flex; }
  /* .nav prefix outranks the later .btn display rule in the cascade */
  .nav .nav__cta { display: none; }
  .nav__links {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2);
    background: var(--bg);
    border-bottom: var(--border-w) solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  .nav__links.is-open { display: flex; }
  .nav { position: relative; }

  /* Menus become inline accordions on mobile */
  .nav__item { position: static; }
  .nav__trigger { width: 100%; justify-content: space-between; padding: var(--space-3); }
  .nav__submenu {
    position: static;
    display: none;
    min-width: 0;
    margin: 0;
    padding: 0 0 var(--space-2) var(--space-4);
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav__item.is-open .nav__submenu { display: block; }
  .nav__submenu a { padding: var(--space-3); }
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: var(--border-w) solid transparent;
  /* Reference control language: outline pills with tinted fills */
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.btn--primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn--secondary { background: var(--brand-tint); color: var(--brand-text); border-color: var(--brand); }
.btn--secondary:hover { background: #f0dde3; color: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--brand-text); padding-inline: var(--space-3); }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-dark); }
.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--fs-xs); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ---- Full-width video hero (homepage) -----------------------------------
   The section spans the full viewport width because it sits outside .container.
   A background <video> covers the area; a dark scrim keeps text legible. If no
   video file is present, the solid dark background is shown instead. */
.hero {
  position: relative;
  display: grid;
  align-items: end;          /* content anchors low-left */
  overflow: hidden;
  background: #16090d;
  color: #fff;
  /* The hero slides UP underneath the frosted nav bar (negative margin), so
     the video shows through the glass before any scrolling; matching top
     padding keeps hero content clear of the bar. Height fills the whole
     first screen; the 560px floor protects tiny landscape windows. */
  margin-top: calc(-1 * (var(--header-h) + var(--border-w)));
  padding-top: calc(var(--header-h) + var(--border-w));
  min-height: max(560px, 100vh);
  min-height: max(560px, 100svh);
}

/* Temporary media field until real council photography/video exists:
   a solid ink field. Replaced automatically when a hero video is added. */
.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #16090d;
}
.hero:has(.hero__video) .hero__field { display: none; }
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Loop dissolve: home.js stacks two copies and fades the standby copy in
     over the ending one. Duration must match FADE in home.js (1.2s). */
  transition: opacity 1.2s ease;
}
/* Video mount is a positioning shell only — absolute so it never occupies a
   grid row (an empty flow child here silently pushed the content off-centre). */
.hero__video-mount {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Dark scrim for contrast over VIDEO only — the plain maroon field needs no
   darkening, so the scrim stays transparent until a video is injected. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 1;
}
.hero:has(.hero__video) .hero__scrim {
  background: linear-gradient(90deg, rgba(20, 8, 11, 0.78), rgba(20, 8, 11, 0.5));
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: var(--space-6) var(--space-8);
  text-align: left;
}
/* Small institutional label above the statement */
.hero__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: var(--space-4);
}
/* Hero keeps its own uppercase eyebrow lockup with symmetric rules
   (the base eyebrow is now a quiet serif kicker). */
.hero .eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.hero .eyebrow::before,
.hero .eyebrow::after {
  content: "";
  width: 1.5rem; height: 2px;
  background: #fff;
  flex: 0 0 auto;
}
.hero h1 {
  /* Hero statement at display scale: bold, tight, two to three lines. */
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  text-transform: none;
  font-size: var(--fs-hero);
  letter-spacing: -0.03em;
  line-height: 1.02;
  max-width: 18ch;
  margin: 0;
}
/* Narrow phones: keep the statement to ~4 lines (after the base rule so the
   cascade resolves in the media query's favor). */
@media (max-width: 620px) {
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.5rem); line-height: 1.08; }
}
.hero__actions {
  margin-top: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--space-3);
}
/* Hero CTAs: crisp on the flat field (the glassy translucent fill only
   works over video). Solid white primary, clean white-line secondary. */
.btn--hero {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff;
  font-size: 1rem;
  padding: 12px 22px;
}
.btn--hero:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn--hero--solid { background: #fff; border-color: #fff; color: var(--brand-text); }
.btn--hero--solid:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--brand-dark); }

/* On the maroon field, buttons invert like the badge's white-on-maroon letters */
.hero .btn--primary { background: #fff; color: var(--brand-text); }
.hero .btn--primary:hover { background: var(--brand-tint); color: var(--brand-dark); }
.hero .btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.6); }
.hero .btn--secondary:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* ---- Page header (title block below nav) — white, compact (~200–280px) */
.page-header {
  border-bottom: var(--border-w) solid var(--border);
  background: var(--bg);
  padding-block: var(--space-6) var(--space-7);
}
.page-header h1 { font-size: clamp(2rem, 4vw, var(--fs-3xl)); }
.page-header p:not(.eyebrow) { color: var(--text-soft); margin-top: var(--space-2); max-width: 60ch; }

/* ---- Cards --------------------------------------------------------------- */
.card {
  /* Utility panel: tinted, quiet corners. The signature asymmetric radius
     (--radius-card) is reserved for rare signature panels only. */
  background: var(--gray-50);
  border: 0;
  border-radius: var(--radius);
  padding: var(--space-5);
}
.card h3 { font-size: var(--fs-md); }
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--fs-xs);
  color: var(--text-soft);
  margin-bottom: var(--space-2);
}
.card__body { margin-top: var(--space-2); color: var(--text-soft); }
.card__actions { margin-top: var(--space-4); }

/* ---- Council member entries ---------------------------------------------- */
/* Editorial team listing (reference: magazine masthead pages): a plain
   entry with no card box — square portrait, name, quiet gray role line. */
.member { max-width: 210px; }
/* Tighter columns for the council listings so entries stay compact
   (five across on desktop). */
#officers-list.grid, #members-list.grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.member-photo {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--gray-100);
}
.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Placeholder until a portrait is uploaded: soft field, small tracked label. */
.member-photo--empty { display: grid; place-items: center; }
.member-photo--empty span {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-soft);
}
.member h3 { font-size: var(--fs-md); margin: 0 0 var(--space-1); }
.member-role { color: var(--text-soft); margin: 0 0 var(--space-2); }
.member-desc { color: var(--text-soft); margin: 0 0 var(--space-2); }
.member-resp {
  margin: 0 0 var(--space-2);
  padding-left: 1.1em;
  color: var(--text-soft);
}
.member-contact { font-weight: 500; }

/* ---- Badges (status / category) ----------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  border: var(--border-w) solid var(--border);
  background: var(--gray-100);
  color: var(--gray-700);
  white-space: nowrap;
}
.badge--pinned  { background: var(--brand-tint); color: var(--brand-text); border-color: var(--brand-tint); }
.badge--success { background: var(--success-tint); color: var(--success); border-color: var(--success-tint); }
.badge--warning { background: var(--warning-tint); color: var(--warning); border-color: var(--warning-tint); }
.badge--danger  { background: var(--danger-tint);  color: var(--danger);  border-color: var(--danger-tint); }
.badge--info    { background: var(--info-tint);    color: var(--info);    border-color: var(--info-tint); }

/* ---- Tables (accessible, responsive) ------------------------------------ */
.table-wrap { overflow-x: auto; border: var(--border-w) solid var(--border); border-radius: var(--radius); }
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table caption { text-align: left; padding: var(--space-3) var(--space-4); font-weight: 600; }
.table th, .table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-w) solid var(--border);
  vertical-align: top;
}
.table thead th { background: var(--bg-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.amount--in  { color: var(--success); }
.amount--out { color: var(--danger); }

/* ---- Filter bar / pills -------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-5);
}
.filter-bar input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
}
.pill-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pill {
  padding: var(--space-2) var(--space-4);
  border: var(--border-w) solid var(--border-strong);
  background: var(--bg);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-soft);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pill:hover { background: var(--gray-100); color: var(--text); }
.pill[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- Forms --------------------------------------------------------------- */
.field { margin-bottom: var(--space-5); }
.field > label { display: block; font-weight: 600; margin-bottom: var(--space-2); }
.field .hint { display: block; font-weight: 400; font-size: var(--fs-xs); color: var(--text-soft); margin-top: 2px; }
.field .req { color: var(--brand-text); }

input[type="text"], input[type="email"], input[type="search"],
input[type="date"], input[type="number"], input[type="file"],
select, textarea {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
textarea { min-height: 8rem; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); }

/* Accessible inline error — text + colour, tied to input via aria-describedby */
.field__error {
  display: none;
  margin-top: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--danger);
  font-weight: 600;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--danger); }
.field.has-error .field__error { display: block; }

.checkbox {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}
.checkbox input { width: auto; margin-top: 0.3rem; }

.notice {
  padding: var(--space-4);
  border: var(--border-w) solid var(--border);
  border-left: 4px solid var(--info);
  background: var(--info-tint);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
}

/* Form confirmation message (state change — animated in) */
.form-confirm {
  padding: var(--space-5);
  border: var(--border-w) solid var(--success);
  background: var(--success-tint);
  border-radius: var(--radius);
  animation: fade-in 200ms ease;
}
@keyframes fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- Metrics (finances overview) ---------------------------------------- */
.metric-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.metric {
  border: 0;
  border-radius: var(--radius);
  background: var(--gray-50);
  padding: var(--space-4) var(--space-5);
}
.metric__label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); }
.metric__value {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--brand-text);
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

/* ---- CSS-only bar visualisations (no chart library) --------------------- */
/* Horizontal category bars */
.barlist { list-style: none; margin: 0; padding: 0; }
.barlist li { margin-bottom: var(--space-3); }
.barlist__row { display: flex; justify-content: space-between; font-size: var(--fs-sm); margin-bottom: var(--space-1); }
.barlist__track { height: 0.6rem; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.barlist__fill { height: 100%; background: var(--brand); border-radius: 999px; }

/* Vertical monthly-trend columns */
.column-chart {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  height: 200px;
  padding-top: var(--space-4);
  border-bottom: var(--border-w) solid var(--border-strong);
}
.column-chart li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); height: 100%; justify-content: flex-end; list-style: none; }
.column-chart__bar { width: 60%; background: var(--brand); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 2px; }
.column-chart__label { font-size: var(--fs-xs); color: var(--text-soft); }

/* Budget usage progress bar */
.progress { height: 0.9rem; background: var(--gray-100); border-radius: 999px; overflow: hidden; border: var(--border-w) solid var(--border); }
.progress__fill { height: 100%; background: var(--brand); transition: width var(--transition); }
.progress__fill.is-over { background: var(--danger); }

/* ---- Expandable records (announcements / meetings) ---------------------- */
details.record {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
  background: var(--bg);
}
details.record + details.record { margin-top: var(--space-4); }
details.record > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
details.record > summary::-webkit-details-marker { display: none; }
details.record > summary h3 { font-size: var(--fs-md); }
details.record[open] > summary { margin-bottom: var(--space-4); }
.record__section { margin-top: var(--space-4); }
.record__section h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-soft); margin-bottom: var(--space-2); }

/* ---- Empty state ---------------------------------------------------------
   Guiding, not a bare dashed box: a title, one line of context, and (optionally)
   an action. Used across public pages and admin onboarding. */
/* Open editorial empty state: a hairline rule and quiet prose — not another
   tinted box (identical pastel panels everywhere are the fastest way to look
   machine-generated). */
.empty-state {
  padding: var(--space-5) 0 0;
  color: var(--text-soft);
  border: 0;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
}
.empty-state__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--space-1);
}
.empty-state p { max-width: 52ch; }
.empty-state .btn { margin-top: var(--space-4); }

/* ---- Ruled link list (sidebar actions, related links) -------------------- */
.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li { border-top: 1px solid var(--border-strong); }
.link-list li:last-child { border-bottom: 1px solid var(--border-strong); }
.link-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-base);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  transition: color var(--transition);
}
.link-list a::after { content: "→"; color: var(--brand-text); transition: transform var(--transition); }
.link-list a:hover { color: var(--brand-text); }
.link-list a:hover::after { transform: translateX(3px); }

/* ---- Record list — scannable rows (replaces cards for announcements/records)
   Date | body | status, separated by rules. Faster to scan than a card grid
   and reads like an institutional register rather than a marketing page. */
.record-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.record-row {
  display: grid;
  grid-template-columns: 8.5rem 1fr auto;
  gap: var(--space-2) var(--space-5);
  align-items: baseline;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}
.record-row__date { font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.record-row__title { font-weight: 700; color: var(--text); font-size: var(--fs-md); text-decoration: none; }
a.record-row__title:hover { color: var(--brand-text); text-decoration: underline; }
.record-row__preview { color: var(--text-soft); font-size: var(--fs-sm); margin-top: var(--space-1); }
.record-row__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
@media (max-width: 620px) {
  .record-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .record-row__tags { margin-top: var(--space-2); }
}

/* ---- Data freshness line (finance / records) ----------------------------- */
.data-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-soft);
}
.data-meta strong { color: var(--text); font-weight: 600; }

/* ---- Two-column content layout ------------------------------------------ */
.split {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 2fr 1fr;
  align-items: start;
}
@media (max-width: 760px) { .split { grid-template-columns: 1fr; } }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-8);
  border-top: 0;
  /* Maroon-ink, book-ending the page with the same field as the hero. */
  background: #2b141b;
  color: #d9c8cd;
}
.site-footer a { color: var(--gray-100); }
.site-footer a:hover { color: #fff; }
.site-footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-block: var(--space-7);
}
.site-footer h4 { color: #fff; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--space-3); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer__bottom {
  border-top: var(--border-w) solid var(--gray-700);
  padding-block: var(--space-4);
  font-size: var(--fs-xs);
  color: var(--gray-400);
}

/* ==========================================================================
   Editorial homepage compositions (HAI-inspired page-level design)
   ========================================================================== */

/* ---- Featured editorial: one dominant story + supporting list (8/4) ----- */
.featured {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-6) var(--space-7);
  align-items: start;
}
@media (max-width: 860px) { .featured { grid-template-columns: 1fr; } }
.featured__main .record-row__title { font-size: var(--fs-lg); }
.featured__main h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: var(--space-2) 0;
}
.featured__main h3 a { color: var(--text); text-decoration: none; }
.featured__main h3 a:hover { color: var(--brand-text); }
.featured__main .prose-excerpt {
  color: var(--text-soft);
  max-width: 55ch;
}

/* ---- Council pillars: numbered institutional sections -------------------- */
.pillar {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 3fr;
  gap: var(--space-4) var(--space-7);
  align-items: start;
  padding-block: var(--space-7);
  border-top: 1px solid var(--gray-800);
}
.pillar__num {
  font-size: var(--fs-numeral);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: #ecd9df;          /* structural graphic, not content */
  font-variant-numeric: tabular-nums;
}
.pillar h3 { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.03em; color: var(--brand-text); }
.pillar p { max-width: 52ch; color: var(--text-soft); margin-top: var(--space-3); }
.pillar__link { display: inline-block; margin-top: var(--space-4); font-weight: 500; text-decoration: none; }
.pillar__link::after { content: " →"; display: inline-block; transition: transform var(--transition); }
.pillar__link:hover::after { transform: translateX(3px); }
@media (max-width: 620px) {
  .pillar { grid-template-columns: 1fr; gap: var(--space-2); }
  .pillar__num { font-size: clamp(3rem, 14vw, 4.5rem); }
}

/* ---- Services directory: large ruled text links, two columns ------------- */
.dir {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-8);
}
@media (max-width: 760px) { .dir { grid-template-columns: 1fr; } }
.dir a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--gray-800);
  font-size: var(--fs-md);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}
.dir a span { font-size: var(--fs-sm); font-weight: 400; color: var(--text-soft); }
.dir a::after { content: "→"; color: var(--brand-text); transition: transform var(--transition); }
.dir a:hover { color: var(--brand-text); }
.dir a:hover::after { transform: translateX(3px); }

/* ---- Dark editorial field (transparency) --------------------------------- */
.section--dark {
  background: var(--gray-900);
  color: #efe7e9;
}
.section--dark .eyebrow { color: #e3aebc; }
.section--dark h2 {
  color: #fff;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  max-width: 16ch;
}
.section--dark .lead { color: rgba(239, 231, 233, 0.75); }
.t-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--space-6) var(--space-7);
  margin-block: var(--space-7);
}
.t-metric__value {
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.t-metric__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b39aa2;
  margin-top: var(--space-2);
}
.section--dark .dir a { border-top-color: rgba(255, 255, 255, 0.2); color: #fff; }
.section--dark .dir a span { color: #b39aa2; }
.section--dark .dir a::after { color: #e3aebc; }
.section--dark .dir a:hover { color: #e3aebc; }

/* ---- Events: date-led rows ------------------------------------------------ */
.event-row {
  display: grid;
  grid-template-columns: 6rem 1fr auto;
  gap: var(--space-2) var(--space-5);
  align-items: start;
  padding-block: var(--space-4);
  border-top: 1px solid var(--border-strong);
}
.event-row__month {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-text);
}
.event-row__day {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--brand-text);
  font-variant-numeric: tabular-nums;
}
.event-row__title { font-weight: 500; font-size: var(--fs-md); }
.event-row__meta { color: var(--text-soft); font-size: var(--fs-sm); margin-top: 2px; }
@media (max-width: 620px) {
  .event-row { grid-template-columns: 4.5rem 1fr; }
  .event-row > :last-child { grid-column: 2; }
}

/* ---- Section heading helper --------------------------------------------- */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.section-head a {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.section-head a:hover { text-decoration: underline; }