:root{
  --red:#a62323; --red-dark:#821919; --red-soft:#c94040;
  --text:#222; --muted:#60636f; --bg:#f6f7fb; --panel:#fff; --border:#e8e9ef;
  --link:#0b57d0;
  --radius:12px; --radius-lg:14px; --radius-sm:10px;
  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.25rem; --space-5:1.75rem;
  --shadow:0 10px 24px rgba(15,23,42,.07);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Helvetica,Arial,sans-serif;line-height:1.7}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:none;margin:0 auto;padding:var(--space-3) clamp(12px,2.5vw,28px)}
.container--tight{max-width:1180px;margin:0 auto}

/* Header */
.site-header{background:var(--panel);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.brand{display:flex;align-items:center;gap:.8rem}
.logo{width:60px;height:60px}
.brand-name{font-weight:800;color:#222;font-size:1.2rem;letter-spacing:.2px}
.brand-sub{color:var(--muted);font-size:.85rem;margin-top:-.25rem}

.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:.15rem;flex-wrap:wrap}
.main-nav a{display:block;padding:.70rem .85rem;border-radius:var(--radius-sm);color:#222}
.main-nav a:hover{background:#f1f3f8}
.nav-toggle{display:none}
@media (max-width:880px){
  .nav-toggle{display:inline-block;background:#fff;border:1px solid var(--border);padding:.55rem .7rem;border-radius:var(--radius-sm)}
  .main-nav ul{display:none;flex-direction:column;background:#fff;border:1px solid var(--border);padding:.6rem;margin-top:.6rem;border-radius:var(--radius);box-shadow:var(--shadow)}
  .main-nav ul.open{display:flex}
}
.thin-red-line{height:4px;background:linear-gradient(90deg,var(--red),var(--red-dark))}

/* HERO (image + overlay; actions on right) */
.hero{
  position: relative;
  background: url('/assets/img/herobanner.png') center/cover no-repeat;
  border-bottom:4px solid var(--red);
}
.hero-overlay{
  position:absolute; inset:0;
  background: rgba(255,255,255,.65);
  pointer-events:none; z-index:1;
}
/* keep hero content above overlay even without .hero-inner wrapper */
.hero > .container{ position:relative; z-index:2; }
.hero-inner{ position:relative; z-index:2; padding:2.5rem 0; }

/* Two-column grid for hero content */
.hero-row{
  display:grid; grid-template-columns:1fr max-content; align-items:center;
  column-gap: var(--space-5); row-gap:.75rem;
}
.hero-copy{ min-width:0; }
.hero-text{ margin:.6rem 0 0 0; }
.hero-actions{ display:flex; flex-direction:column; gap:.6rem; justify-self:end; }
@media (max-width:900px){
  .hero-row{ grid-template-columns:1fr; justify-items:start; }
  .hero-actions{ flex-direction:row; justify-self:start; }
}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;background:var(--red);color:#fff;padding:.6rem .95rem;border-radius:999px;border:1px solid var(--red-dark);font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow)}
.button.secondary{background:#fff;color:var(--red);border-color:var(--red)}
.button:hover{filter:brightness(.98);text-decoration:none}
/* Microsoft Teams special button */
.button-teams{ background:#464EB8; border-color:#2F347C; color:#fff; text-align:center; justify-content:center; }
.button-teams:hover{ filter:brightness(.95); }

/* Cards & grids */
.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow)}
.grid{display:grid;gap:var(--space-3)}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Families page layout: enable multi‑column grids via utility classes
   The markup uses class="grid grid-2" and class="grid grid-3".
   `.grid` already sets display:grid; these utilities only define columns. */
.grid-2{ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.section-title{display:flex;align-items:center;gap:.6rem;margin:0 0 .6rem 0}
.section-title .dot{width:10px;height:10px;background:var(--red);border-radius:50%}

table{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
th,td{padding:.9rem;border-bottom:1px solid var(--border);vertical-align:top}
th{background:#fafbfe;text-align:left}
.badge{display:inline-block;padding:.25rem .6rem;border-radius:999px;background:#f4f6fb;border:1px solid var(--border);color:#333;font-size:.8rem}

/* Footer (slim) */
footer.site-footer{background:#fff;color:#333;border-top:1px solid var(--border);margin-top:1.5rem;padding:0}
.footer-grid{
  display:grid;
  align-items:start;
  justify-items:start;
  grid-template-columns: 1.35fr 1fr 1fr; /* brand column slightly wider */
  column-gap: 2rem;
  row-gap: .75rem;
  padding: 0.5rem 0;           /* horizontal padding comes from .container */
  padding-left: .35rem;      /* nudge right to align with main content */
}
/* Footer column normalization */
.site-footer .container{ padding-inline: clamp(12px,2.5vw,28px); }
.footer-grid > *{ min-width:0; justify-self:start; }
.footer-grid h4,
.footer-grid .footer-heading{ margin:0 0 .3rem 0; line-height:1.2; }
.footer-grid p{ margin:2px 0; line-height:1.35; }
.footer-grid p a{ display:inline-block; text-decoration:none; }
.footer-grid p a:hover{ text-decoration:underline; }

.footer-grid > *{ min-width:0; justify-self:start; }
.footer-bar{background:var(--red-dark);color:#fff;font-size:.9rem;line-height:1.4;padding:.5rem clamp(12px,2.5vw,28px);margin:0;text-align:center}
.footer-bar a{color:#fff;text-decoration:underline}

/* Footer list spacing (non-bulleted) */
.footer-grid h4, .footer-grid .footer-heading { /* in case headings are plain h4s */
  margin: 0 0 .35rem 0;
}
.footer-grid p {
  margin: 2px 0;          /* single-line, tight rhythm */
  line-height: 1.35;      /* compact but readable */
}
.footer-grid p a {
  display: inline-block;  /* avoid descender clipping on tight lines */
  text-decoration: none;
}

.footer-grid p a:hover { text-decoration: underline; }

/* Footer grid responsiveness (3 → 2 → 1 columns) */
@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr 1fr; padding-left: 4px; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; padding-left: 0; }
}

/* Facebook embeds */
.social-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.social-card p{margin:0}
.skip-link{position:absolute;left:-5000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#000;color:#fff;padding:.5rem;border-radius:.5rem}
input,select,textarea,button{background:#fff;color:#111;border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .65rem}

.social-flex{display:grid;gap:var(--space-3);grid-template-columns:1fr minmax(0,560px);align-items:start}
.social-embed{display:flex;justify-content:center;align-items:flex-start;padding:var(--space-3)}
.social-copy p{margin:.4rem 0}
@media (max-width:900px){ .social-flex{grid-template-columns:1fr} .social-embed{padding:var(--space-2)} }

.fb-embeds{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(520px,1fr));align-items:start}
.fb-embed{display:flex;justify-content:center;align-items:flex-start;padding:var(--space-2)}
.fb-embed-inner{width:500px}
.fb-embed-inner iframe{width:100%;border:none;overflow:hidden;display:block;background:#fff;border-radius:10px;box-shadow:var(--shadow)}
@media (max-width:560px){ .fb-embeds{grid-template-columns:1fr} .fb-embed-inner{width:100%} }


/* Section header alignment */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.section-header-left {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.section-header-right {
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Normalize ribbon internals so all pills match height and align */
.ribbon, .ribbon * { line-height: 1; }
.ribbon a.ribbon-link{
  display:inline-flex;
  align-items:center;
  font: inherit;
  line-height:1;
  color:#fff !important;
  text-decoration:none;
}
/* When ribbons are used inside a header row, remove auto top margins between them */
.section-header .ribbon + *{ margin-top: 0; }
.section-header .ribbon + .ribbon{ margin-top: 0; }

/* Ribbons */
.ribbon{background:var(--red);color:#fff;border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:.55rem;padding:.50rem .75rem;font-weight:800;box-shadow:var(--shadow);letter-spacing:.2px;line-height:1}
.ribbon .icon{
  background:rgba(255,255,255,.18);
  border-radius:.4rem;
  padding:.2rem .4rem;
  width:1.25rem;
  height:1.25rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ribbon + *{margin-top:.8rem}
.ribbon-link{color:#fff!important;text-decoration:none}
.ribbon-link:hover{text-decoration:underline}
.quick-actions a{color:var(--link);font-weight:600}
.quick-actions a:hover{text-decoration:underline}

/* ---------- About page helpers ---------- */
.about-intro{margin:1rem 0 1.25rem}
.about-title{margin:0 0 .25rem 0;font-size:clamp(1.6rem,1.2rem + 1.2vw,2rem);line-height:1.25}
.about-tagline{margin:.25rem 0 0 0;color:var(--muted)}
/* Make About cards uniform width by removing the text width cap */
.about-page .prose{ max-width: none; }
.about-page .card .prose{ max-width: none; }
/* Ensure all card interiors use the full card width */
.about-page .card{ width: 100%; }

.img-row{
  display:grid; gap:var(--space-3);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin: .75rem 0 1.25rem 0;
}
.img-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.img-card img{width:100%;height:200px;object-fit:cover;display:block}
.img-card figcaption{padding:.6rem .8rem;color:#444;font-size:.95rem}

.prose{max-width:70ch}
.prose p{margin:.6rem 0}
.prose ul{margin:.5rem 0 .25rem 1.1rem}
.prose li{margin:.25rem 0}

.two-col{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));margin:1rem 0}
@media (max-width:900px){ .two-col{grid-template-columns:1fr} }

.list-check{list-style:none;padding:0;margin:.25rem 0}
.list-check li{position:relative;padding-left:1.6rem;margin:.45rem 0}
.list-check li::before{
  content:"✔"; position:absolute; left:0; top:.15rem;
  background:#eef6ee; color:#147a2e; border-radius:.4rem; width:1.1rem; height:1.1rem; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem;
}
.list-bullets{margin:.25rem 0 .25rem 1.1rem}
.list-bullets li{margin:.25rem 0}

.stat-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.6rem; margin:0 0 .6rem 0; list-style:none; padding:0;
}
.stat{
  background:#fafbfe; border:1px solid var(--border); border-radius:var(--radius);
  padding:.8rem; text-align:center;
}
.stat .num{display:block;font-weight:800}
.stat .label{display:block;color:var(--muted);font-size:.9rem;margin-top:.15rem}

.cta-panel{
  display:flex; flex-wrap:wrap; gap:1rem;
  align-items:center; justify-content:space-between;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
  padding: var(--space-3); box-shadow:var(--shadow); margin:1.25rem 0 0 0;
}
.cta-copy h2{margin:.1rem 0 .25rem 0}
.cta-copy p{margin:.25rem 0 0 0;color:var(--muted)}
.cta-actions{display:flex;gap:.6rem;flex-wrap:wrap}

/* ---------- Accessibility page ---------- */
.a11y .page-header { margin-bottom: 1.5rem; }
.a11y .page-header .ribbon { margin-bottom: .35rem; background: var(--red-dark); }
.a11y .page-header .lead { font-size: 1.1rem; color: var(--muted); margin-top: .35rem; }

/* Cards & layout to mirror About page */
.a11y .card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

.a11y .two-col {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--space-3);
  margin: 1rem 0;
}
.a11y .two-col > .card { display:flex; flex-direction:column; }
.a11y .two-col > .card .prose { flex: 1 1 auto; }

@media (max-width: 880px){
  .a11y .two-col { grid-template-columns: 1fr; }
}

/* Lists, callouts, contact panel */
.a11y .list-check li::before { background:#eef6ee; color:#147a2e; }

.a11y .callout { border-left: 5px solid var(--red); background: #fff8f8; }
.a11y .callout-title { margin: 0 0 .5rem 0; font-weight: 700; color: var(--red-dark); }

.a11y .contact-card { background:#f9fbff; border-left:5px solid var(--link); }

.a11y .contact-list { list-style:none; padding:0; margin:0 0 .5rem 0; }
.a11y .contact-list li {
  display:flex; justify-content:space-between;
  padding:.25rem 0; border-bottom:1px dashed var(--border);
}
.a11y .contact-list li:last-child { border-bottom:none; }
.a11y .contact-list .key { font-weight:600; color:var(--muted); }
.a11y .contact-list .val { text-align:right; }

/* Small helpers */
.a11y .muted { color: var(--muted); }
.a11y .small { font-size: .85rem; }

/* =============================
   BOARD PAGE LAYOUT & WIDGETS
   ============================= */

/* Section pill (matches ribbons but slimmer for section labels) */
.section-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .7rem;border-radius:999px;background:var(--red);color:#fff;font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow)}
.section-pill .icon{width:1.1rem;height:1.1rem;border-radius:.35rem;background:rgba(255,255,255,.18);display:inline-grid;place-items:center}

/* Small chip for inline labels like “Open Meeting”, “Adopted” */
.chip{display:inline-block;border:1px solid var(--border);background:#f7f9ff;color:#2b3a67;border-radius:999px;padding:.2rem .55rem;font-size:.8rem;font-weight:600;line-height:1}
.chip.success{background:#eef6ee;color:#0f6a2a;border-color:#cde7cf}
.chip.warn{background:#fff7e6;color:#7a5200;border-color:#f2dfb1}

/* --- Calendar grid (board-cal) --- */
.board-cal{margin:1rem 0}
.board-cal .cal-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.board-cal .cal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.board-cal .cal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.board-cal .cal-grid{grid-template-columns:1fr}}

.board-cal .cal-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;min-height:170px}
.board-cal .cal-head{display:flex;align-items:center;justify-content:space-between;padding:.75rem .9rem;border-bottom:1px solid var(--border);background:#fafbfe;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.board-cal .cal-head .month{font-weight:800;letter-spacing:.2px}
.board-cal .cal-head .badge{background:#f7f9ff}
.board-cal .cal-body{padding:.85rem .9rem;display:grid;gap:.4rem}
.board-cal .cal-body .row{display:flex;align-items:center;gap:.5rem}
.board-cal .when{font-weight:700}
.board-cal .time{color:var(--muted)}
.board-cal .where{color:var(--muted)}
.board-cal .cal-actions{margin-top:auto;padding:.75rem .9rem;border-top:1px dashed var(--border);display:flex;gap:.5rem;flex-wrap:wrap}

/* Reuse existing .button styles; add compact size */
.button.sm{padding:.45rem .75rem;font-weight:700}
/* Teams variant already present as .button-teams; keep for Join button */

/* --- People (Board Members) --- */
.people-grid{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:start}
.person-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--space-3);display:grid;grid-template-columns:72px 1fr;gap:.9rem}
.person-card .avatar{width:72px;height:72px;border-radius:10px;object-fit:cover;border:1px solid var(--border)}
.person-card .name{margin:.1rem 0 0 0;font-weight:800}
.person-card .role{margin:.1rem 0;color:var(--muted);font-size:.95rem}
.person-card .meta{margin:.25rem 0 0 0;color:var(--muted);font-size:.85rem}
.person-card .links{margin-top:.4rem;display:flex;gap:.6rem;flex-wrap:wrap}
.person-card .links a{font-weight:700}

/* --- Archive columns (Agendas, Minutes, Packets, Budgets) --- */
.archive-links{display:grid;gap:var(--space-3);grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.archive-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.archive-links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.archive-links{grid-template-columns:1fr}}
.archive-links .col{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.archive-links .col-header{display:flex;align-items:center;justify-content:space-between;padding:.8rem .95rem;border-bottom:1px solid var(--border);background:#fafbfe;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}
.archive-links .col-header .title{font-weight:800;letter-spacing:.2px}
.archive-links .col-body{padding:.75rem .95rem}
.archive-links .years{display:grid;gap:.35rem;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.archive-links .years a{display:block;padding:.4rem .55rem;border:1px solid var(--border);border-radius:8px;background:#fff;text-decoration:none}
.archive-links .years a:hover{background:#f8fafc}

/* --- Tiny helpers for Board page --- */
.overline{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--muted)}
.kicker{color:var(--muted);font-weight:700}
.rule{height:1px;background:var(--border);margin:.6rem 0}

/* =============================
   BOARD ARCHIVE MODAL & TAGS
   ============================= */
/* Lock page scroll when modal is open */
html.no-scroll { overflow: hidden; }

/* Modal shell */
.archive-modal[aria-hidden="true"]{ display:none; }
.archive-modal[aria-hidden="false"]{ display:block; }
.archive-modal{ position:fixed; inset:0; z-index:100; }
.archive-modal__backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:saturate(1.1) blur(2px); }
.archive-modal__dialog{
  position:relative; z-index:1; margin:6vh auto; max-width:720px; width:clamp(300px, 92vw, 720px);
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:0 30px 60px rgba(15,23,42,.25);
}
.archive-modal__close{ position:absolute; top:.5rem; right:.5rem; border:0; background:#fff; border:1px solid var(--border); width:34px; height:34px; border-radius:999px; font-size:1.1rem; cursor:pointer; }
.archive-modal__close:hover{ background:#f7f7fb; }
.archive-modal__header{ padding:1rem 1.1rem .5rem 1.1rem; border-bottom:1px solid var(--border); }
.archive-modal__title{ margin:.25rem 0 0 0; line-height:1.25; }
.archive-modal__body{ padding:1rem 1.1rem 1.2rem; max-height:65vh; overflow:auto; }

/* Archive list */
.archive-list{ list-style:none; margin:0; padding:0; }
.archive-list .row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.55rem 0; border-bottom:1px dashed var(--border); }
.archive-list .row:last-child{ border-bottom:none; }
.archive-list a{ font-weight:700; text-decoration:none; }
.archive-list a:hover{ text-decoration:underline; }

/* Tags for Work / Executive sessions */
.tag{ display:inline-block; padding:.18rem .5rem; border-radius:999px; font-size:.78rem; font-weight:700; line-height:1; border:1px solid var(--border); }
.tag--work{ color:#0b57d0; background:#eef4ff; border-color:#cfe0ff; }

.tag--exec{ color:var(--red-dark); background:#fff1f1; border-color:#f6c8c8; }

/* Budget Committee (green) */
.tag--budg{
  color:#0f6a2a;              /* deep green text */
  background:#e9f7ee;         /* light green background */
  border-color:#cbead5;       /* soft green border */
}

/* =============================
   BOARD RULES / CONTENT CARDS
   ============================= */

/* Rules section layout (mirrors two-col helper but namespaced) */
.board-rules .two-col{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap: var(--space-3);
  margin: 1rem 0;
}
@media (max-width: 880px){
  .board-rules .two-col{ grid-template-columns:1fr; }
}

/* Content cards used inside the rules section */
.board-rules .card{
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}

/* Headings inside rules cards */
.board-rules .card h3{ margin:.25rem 0 .4rem; }
.board-rules .muted{ color: var(--muted); }

/* Checklist with green checks */
.check-list{ list-style:none; margin:.25rem 0 .25rem 0; padding:0; }
.check-list li{
  position:relative;
  padding-left:1.55rem;
  margin:.35rem 0;
}
.check-list li::before{
  content:"✔";
  position:absolute; left:0; top:.1rem;
  width:1.1rem; height:1.1rem;
  background:#eef6ee; color:#147a2e;
  border:1px solid #cde7cf;
  border-radius:.35rem;
  display:inline-grid; place-items:center;
  font-size:.78rem; line-height:1;
}

/* Dashed list (em‑dash bullets) */
.dash-list{ list-style:none; margin:.25rem 0; padding:0; }
.dash-list li{
  position:relative;
  padding-left:1.15rem;
  margin:.3rem 0;
}
.dash-list li::before{
  content:"—";
  position:absolute; left:0; top:0;
  color: var(--muted);
}

/* Contact block for addresses/email/phone */
.contact-block{
  background:#f9fbff;
  border:1px solid var(--border);
  border-left: 5px solid var(--link);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}
.contact-block .row{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:.75rem; padding:.35rem 0; border-bottom:1px dashed var(--border);
}
.contact-block .row:last-child{ border-bottom:none; }
.contact-block .key{ font-weight:700; color:var(--muted); }
.contact-block .val{ text-align:right; }

/* Tiny utility to space stacked sections consistently */
.stack-sm > * + *{ margin-top:.5rem; }

/* =============================
   ACADEMIC CALENDAR (2025–26)
   ============================= */

/* Layout */
.cal-grid{ display:grid; gap: var(--space-3); grid-template-columns: repeat(3,minmax(0,1fr)); }
@media (max-width: 1100px){ .cal-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 700px){ .cal-grid{ grid-template-columns: 1fr; } }

.cal-month.card{ padding: 0; overflow:hidden; }
.month-header{ padding:.85rem .95rem; background:#fafbfe; border-bottom:1px solid var(--border); }
.month-header h3{ margin:0; font-weight:800; letter-spacing:.2px; }
.month-events{ list-style:none; margin:0; padding:.85rem .95rem; display:grid; gap:.45rem; }
.month-events li{ line-height:1.5; }

/* Legend & actions */
.cal-legend{ display:flex; flex-wrap:wrap; gap:.4rem .5rem; align-items:center; }
.inline-actions{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* Button aliases (calendar page used .btn naming) */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; background:var(--red); color:#fff; padding:.6rem .95rem; border-radius:999px; border:1px solid var(--red-dark); font-weight:800; letter-spacing:.2px; box-shadow:var(--shadow); }
.btn:hover{ filter:brightness(.98); text-decoration:none; }
.btn-outline{ background:#fff; color:var(--red); border-color:var(--red); }

/* Chips & variants for legend/events */
.chip{ display:inline-block; border:1px solid var(--border); background:#fff; color:#222; border-radius:999px; padding:.18rem .55rem; font-size:.82rem; font-weight:700; line-height:1; }
.chip-first{ background:#e6f7ff; border-color:#c9eaff; color:#0b57d0; }
.chip-last{ background:#ffeaea; border-color:#ffd2d2; color:#b70f0f; }
.chip-holiday{ background:#fff4e5; border-color:#ffe0b3; color:#7a5200; }
.chip-break{ background:#f1f5ff; border-color:#dbe7ff; color:#274690; }
.chip-conf{ background:#f2fff4; border-color:#cfe7cf; color:#0f6a2a; }
.chip-grade{ background:#fff8f0; border-color:#f7e0c2; color:#7a3c00; }
.chip-lc{ background:#eef6ff; border-color:#cfe0ff; color:#0b57d0; }
.chip-grad{ background:#f9f0ff; border-color:#ead6ff; color:#6b21a8; }
.chip-resume{ background:#eefbf1; border-color:#cde7cf; color:#156c2f; }
.chip-note{ background:#f7f7fb; border-color:#e6e7ef; color:#444; }

/* Utilities */
.stack{ display:grid; }
.stack > * + *{ margin-top: .5rem; }
.gap-12{ row-gap: .75rem; }
.lede{ color: var(--muted); }
.map-frame { position: relative; padding-top: 56%; border-radius: 12px; overflow: hidden; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==== Families page: fix first row overshoot / responsive embeds ==== */

/* Let grid items shrink inside the container so wide content doesn't force overflow */
.grid > * { min-width: 0; }
.card { min-width: 0; }

/* Make media embeds responsive (prevents grid from growing wider than container) */
.media-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;   /* keeps a 16:9 box */
  overflow: hidden;
}
.media-embed iframe,
.media-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* Safety: images inside flex/inline blocks should never blow out a column */

.card img,
.flex img {
  max-width: 100%;
  height: auto;
}
/* HES Supply List: PDF frame */
.pdf-frame{ position:relative; width:100%; aspect-ratio: 4 / 3; border:1px solid var(--border); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); }
.pdf-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* Staff cards */
.people-grid .person {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}
.person__photo {
  width: 84px;
  height: 84px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 84px;
}
@media (max-width: 720px) {
  .people-grid .person { flex-direction: row; }
  .grid.grid-3.people-grid { grid-template-columns: 1fr; }
}
/* =============================
   STAFF DIRECTORY (Contact page)
   ============================= */
.staff-section{ margin: 1rem 0; }

/* Fluid 4→1 column grid (desktop→mobile) */
.staff-grid{
  display:grid;
  gap: var(--space-3);
  align-items:start;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1200px){ .staff-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px){  .staff-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px){  .staff-grid{ grid-template-columns: 1fr; } }

/* Individual staff card */
.staff-card{
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: calc(var(--space-3) + 2px);
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 1rem;
  align-items: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.staff-card:hover{
  transform: translateY(-2px);
  border-color: #d8daee;
  box-shadow: 0 14px 28px rgba(15,23,42,.12);
}

/* Photo */
.staff-photo{
  width: 96px;
  height: 96px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid var(--border);
  box-shadow: 0 4px 10px rgba(15,23,42,.08);
}

/* Text + email */
.staff-meta .role{
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
  margin: 0;
}
.staff-meta .name{ margin: .15rem 0 .1rem 0; font-weight: 800; }
.staff-meta .dept{ margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.staff-meta .email{ margin-top: .35rem; }

/* Email pill — ensure it wraps and never overflows */
.staff-email,
.staff-meta .email{
  display: inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.38rem .65rem;
  border-radius:999px;
  background:#f7f9ff;
  border:1px solid var(--border);
  font-weight:700;
  text-decoration:none;
  max-width:100%;
  white-space:normal;
  flex-wrap:wrap;
  line-height:1.2;
}
.staff-email:hover,
.staff-meta .email:hover{ background:#eef3ff; text-decoration:none; }

/* Compact card on very small screens */
@media (max-width: 560px){
  .staff-card{ grid-template-columns: 64px 1fr; padding: var(--space-3); }
  .staff-photo{ width:64px; height:64px; border-radius:10px; }
}

/* Optional: two‑column variant when a school wants a tighter grid inside a card */
.staff-grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 700px){ .staff-grid.cols-2{ grid-template-columns: 1fr; } }

/* Nice spacing when a ribbon/heading sits inside a card above the grid */
.card .ribbon{ margin-top: 0; }
.card .ribbon + *{ margin-top: .6rem; }

/* Gentle vertical rhythm between stacked staff sections */
.staff-section + .staff-section{ margin-top: 1.25rem; }

/* Maps / School cards grid */
.people-grid{ display:grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 900px){ .people-grid{ grid-template-columns: 1fr 1fr; } }

.map-frame{ position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; }
.map-frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* School staff sections: 2-up by default, 1-up on small screens */
.schools-staff .staff-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}
@media (max-width: 900px) {
  .schools-staff .staff-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Board page: compact 5-across member grid (scoped) ===== */
.board .board-people .people-grid{
  display:grid;
  gap: var(--space-3);
  grid-template-columns: repeat(5, minmax(160px, 1fr));
  align-items: stretch;
}

/* Step down gracefully on smaller widths */
@media (max-width: 1200px){ .board .board-people .people-grid{ grid-template-columns: repeat(4, minmax(160px,1fr)); } }
@media (max-width: 980px){  .board .board-people .people-grid{ grid-template-columns: repeat(3, minmax(160px,1fr)); } }
@media (max-width: 700px){  .board .board-people .people-grid{ grid-template-columns: repeat(2, minmax(160px,1fr)); } }
@media (max-width: 480px){  .board .board-people .people-grid{ grid-template-columns: 1fr; } }

/* Compact card styling only on the Board page */
.board .person-card{
  padding: .75rem;
  grid-template-columns: 56px 1fr;
}
.board .person-card .avatar{ width:56px; height:56px; border-radius:8px; }
.board .person-card .name{ margin:0; font-size:1rem; }
.board .person-card .role{ margin:.15rem 0 0; font-size:.85rem; }
.board .person-card .meta{ margin:.15rem 0 0; font-size:.78rem; }
.board .person-card .links{ margin-top:.35rem; }
.page-intro { margin-bottom: 1rem; }
.hr-grid { display:grid; grid-template-columns: 1fr 2fr; gap:1rem; align-items:start; }
.hr-col .card { background:#fff; border-radius:14px; padding:1rem; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 12px 20px -12px rgba(0,0,0,.18); margin-bottom:.8rem; }
.linklist { margin:0; padding-left:1rem; }
.callout { background:#fff7e6; border:1px solid #f0d49a; border-radius:12px; padding:.9rem 1rem; }
.jobs-header { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.4rem; }
.controls { display:flex; gap:.5rem; align-items:center; }
.controls .input { width: min(420px, 100%); }
.jobs-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap:.8rem; }
.job-card { background:#fff; border-radius:14px; padding:.9rem 1rem; box-shadow:0 1px 0 rgba(0,0,0,.05), 0 12px 20px -12px rgba(0,0,0,.18); transition:transform .08s ease, box-shadow .2s ease; }
.job-card:hover { transform: translateY(-2px); box-shadow:0 2px 0 rgba(0,0,0,.06), 0 18px 28px -12px rgba(0,0,0,.22); }
.job-title { margin:0 0 .25rem; font-size:1.05rem; }
.meta { list-style:none; display:flex; flex-wrap:wrap; gap:.35rem .6rem; padding:0; margin:0 0 .6rem; color:#555; font-size:.92rem; }
.meta li::before { content:"• "; color:#aaa; margin-right:.25rem; }
.btn--pill { border:1px solid #ddd; border-radius:999px; padding:.4rem .7rem; text-decoration:none; display:inline-block; }
@media (max-width: 960px){
  .hr-grid { grid-template-columns: 1fr; }
  .jobs-header { flex-direction:column; align-items:flex-start; gap:.5rem; }
}