/* =========================
   Tokens
   ========================= */
:root{
  --bg:#ffffff;
  --fg:#222;
  --muted:#666;
  --accent:#0a84ff;
  --border:#e6e6e6;
}
.dark{
  --bg:#111;
  --fg:#eee;
  --muted:#aaa;
  --accent:#66aaff;
  --border:#2a2a2a;
}

/* =========================
   Base
   ========================= */
*{ box-sizing:border-box }
html,body{ margin:0; padding:0 }
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
html{ scroll-behavior:smooth; }

.container{ max-width:920px; margin:0 auto; padding:1.25rem }

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding:.5rem 1rem;
  position:sticky; top:0; background:var(--bg);
}
.brand{ display:flex; align-items:center; gap:.5rem; text-decoration:none; color:inherit }
.logo{ height:36px; width:auto }
.title{ font-weight:600 }
.nav a{ margin-right:1rem; text-decoration:none; color:var(--fg) }
.nav a:hover{ color:var(--accent) }
.nav button{
  border:1px solid var(--border); background:transparent;
  padding:.25rem .5rem; border-radius:6px; cursor:pointer; color:var(--fg);
}

/* Sections / headings */
.section{ padding:2.25rem 0; border-top:1px solid var(--border) }
.section:first-of-type{ border-top:0; padding-top:1.5rem }
h1,h2,h3{ line-height:1.25; margin:0 0 .75rem }
h1{ font-size:2rem }  h2{ font-size:1.5rem }  h3{ font-size:1.25rem }
.content p{ margin:.5rem 0 }
.btn{ display:inline-block; background:var(--accent); color:#fff; padding:.6rem 1rem; border-radius:.5rem; text-decoration:none }
.btn:hover{ opacity:.9 }

/* =========================
   Meetings two-col grid
   ========================= */
.grid-cal{
  display:grid; grid-template-columns:1fr; gap:1.25rem; margin:1.25rem 0;
}
@media (min-width:900px){
  .grid-cal{ grid-template-columns:1fr 1fr; align-items:start; }
}
.panel{
  border:1px solid var(--border); border-radius:10px; padding:1rem; background:var(--bg);
}
.panel__title{ margin:0 0 .5rem; font-size:1.15rem }
.panel__body > p:first-child{ margin-top:0 }

/* =========================
   Details / accordion
   ========================= */
details{
  border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; margin:1rem 0; background:var(--bg);
}
details[open]{ background:rgba(0,0,0,.02) }
.dark details[open]{ background:rgba(255,255,255,.04) }
summary{ list-style:none; cursor:pointer; font-weight:600 }
summary::-webkit-details-marker{ display:none }
summary::before{ content:"▸"; display:inline-block; margin-right:.5rem; transition:transform .15s ease }
details[open] summary::before{ transform:rotate(90deg) }

/* =========================
   Hero
   ========================= */
.hero{ border-bottom:0; margin-bottom:.75rem }
.hero--slim{ padding:1rem 0 }
.hero--medium{ padding:1.25rem 0 }
.hero--large{ padding:2rem 0 }
.hero h1{ font-size:1.9rem; margin:0 0 .5rem; line-height:1.2 }
.hero .content p{ margin:.35rem 0 }

/* spacing: first section + hero */
.container{ padding-top:.5rem }
.hero .content > :last-child{ margin-bottom:0 }
.section{ margin-top:.75rem; padding-top:0; border-top:0 }
.section h2{ margin-top:0 }

/* Hero grid */
.hero-grid{
  display:grid; grid-template-columns:1fr; gap:.9rem; align-items:start;
}
@media (min-width:980px){
  .hero-grid{ grid-template-columns:1.6fr 1fr }
}
.hero-title{ grid-column:1/-1; margin:0; line-height:1.15 }
.hero-tagline{ grid-column:1/-1; margin:.25rem 0 .5rem; font-style:italic; color:var(--muted) }
.hero-copy .content > :first-child{ margin-top:0 }
.hero-copy .content > :last-child{ margin-bottom:0 }

/* Hero media */
.hero-media{ margin:0; overflow:hidden; border-radius:12px; box-shadow:0 6px 24px rgba(0,0,0,.12) }
.hero-media img{
  width:100%; height:360px; object-fit:cover; object-position:center; display:block;
  filter:contrast(1.05) saturate(1.06);
}
@media (min-width:980px){
  .hero-media img{ height:420px }
}

/* Circular logo mask */
.logo-circle{
  width:40px; aspect-ratio:1/1; border-radius:50%; overflow:hidden; display:inline-block;
  background:var(--bg); border:2px solid currentColor;
}
.logo-circle > img{ width:100%; height:100%; object-fit:cover; display:block }

/* === Mission blockquote — single style site-wide === */
blockquote.mission{
  margin: 1rem 0 1.25rem;
  padding: .9rem 1.1rem;
  border-left: 6px solid var(--accent);
  border-radius: 10px;

  /* fallback first, then modern tint that works in light & dark */
  background: #eaf3ff; /* fallback */
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));

  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}
blockquote.mission > strong{
  display:block; margin-bottom:.35rem; font-weight:700;
}
blockquote.mission > p{
  margin:0; line-height:1.5;
}

/* Neutralize any typography plugin styles that mute blockquotes */
.prose blockquote.mission{
  margin: 1rem 0 1.25rem;
  padding: .9rem 1.1rem;
  font-style: normal;
  quotes: none;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg)) !important;
  border-left-color: var(--accent) !important;
}

/* === Club Events: shared sizing & clean two-col grid === */

/* Global two-column utility (used by Resources+Speakers too) */
.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.twocol .col { min-width: 0; }
@media (max-width: 820px){
  .twocol { grid-template-columns: 1fr; }
}

/* One source of truth for events panel height */
:root { --eventsH: 520px; }
@media (max-width: 700px){ :root { --eventsH: 380px; } }
@media (max-width: 480px){ :root { --eventsH: 320px; } }

/* Calendar iframe */
.twocol .col iframe[src*="calendar.google.com"]{
  display: block;
  width: 100%;
  height: var(--eventsH) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-sizing: border-box;
}

/* Poster figure cleanup (if shortcode wraps in <figure>) */
.twocol .col figure { margin: 0; }

/* Poster image (matches calendar outline/height) */
.twocol .col img{
  display: block;
  width: 100%;
  height: var(--eventsH);
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: none !important; /* avoid “bigger” look */
  box-sizing: border-box;
}

/* -----------------------------------------
   Two-col grid (global, safe)
----------------------------------------- */
.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}
.twocol .col { min-width: 0; }
@media (max-width: 820px){ .twocol { grid-template-columns: 1fr; } }

/* -----------------------------------------
   Forms (base + dark mode)
----------------------------------------- */
.content form label {
  display: block;
  margin: .75rem 0 .25rem;
  font-weight: 600;
  color: var(--fg);
}

.content form input[type="text"],
.content form input[type="email"],
.content form input[type="tel"],
.content form input[type="url"],
.content form input[type="search"],
.content form input[type="password"],
.content form input[type="number"],
.content form input[type="date"],
.content form input[type="time"],
.content form input[type="datetime-local"],
.content form select,
.content form textarea {
  display: block;
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.content form input:focus,
.content form select:focus,
.content form textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Submit button */
.content form input[type="submit"],
.content form button[type="submit"]{
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  padding: .6rem 1rem;
  cursor: pointer;
}
.content form input[type="submit"]:hover,
.content form button[type="submit"]:hover{ opacity: .92; }

/* Dark mode overrides for controls */
.dark .content form input[type="text"],
.dark .content form input[type="email"],
.dark .content form input[type="tel"],
.dark .content form input[type="url"],
.dark .content form input[type="search"],
.dark .content form input[type="password"],
.dark .content form input[type="number"],
.dark .content form input[type="date"],
.dark .content form input[type="time"],
.dark .content form input[type="datetime-local"],
.dark .content form select,
.dark .content form textarea {
  background: rgba(255,255,255,.08);
  border-color: #2a2a2a;
  color: #eee;
}
.dark ::placeholder { color: #aaa; opacity: .95; }

/* -----------------------------------------
   Footer spacing/readability
----------------------------------------- */
.site-footer nav a { margin: 0 .5rem; }
.site-footer nav a:first-child { margin-left: 0; }
.site-footer nav a:last-child  { margin-right: 0; }

/* === REVERT: compact form vertical rhythm (as before) === */
.content form label{
  display:block;
  margin: .25rem 0 .15rem;       /* tighter than the .75rem I added */
  font-weight:600;
}
.content form input[type="text"],
.content form input[type="email"],
.content form input[type="tel"],
.content form input[type="url"],
.content form input[type="search"],
.content form input[type="password"],
.content form input[type="number"],
.content form input[type="date"],
.content form input[type="time"],
.content form input[type="datetime-local"],
.content form select,
.content form textarea{
  margin: 0 0 .55rem;            /* compact gap below each control */
  border-radius: 12px;           /* keep your rounded shape */
}
.content form textarea{ min-height: 180px; }

/* Keep the focus/DM colors you already liked (no change needed) */

/* === REVERT: footer nav spacing/appearance (as in your screenshot) === */
.site-footer nav a{
  margin: 0;                     /* remove the extra .5rem spacing I added */
  text-decoration: none;
}
.site-footer nav a + a::before{
  content: " · ";
  opacity: .7;
  padding: 0 .2rem;
}
.site-footer{
  text-align: center;
  padding: .75rem 1rem;          /* same as your original */
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .9rem;
}

/* =========================================================
   CONSOLIDATED FIXES — append at end of site.css
   ========================================================= */

/* ---------- Global two-column utility ---------- */
.twocol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  align-items:start;
}
.twocol .col{ min-width:0; }
@media (max-width:820px){
  .twocol{ grid-template-columns:1fr; }
}

/* ---------- Club Events (single source of truth) ---------- */
:root{ --eventsH:520px; }
@media (max-width:700px){ :root{ --eventsH:380px; } }
@media (max-width:480px){ :root{ --eventsH:320px; } }

.twocol .col iframe[src*="calendar.google.com"],
.twocol .col img{
  display:block;
  width:100%;
  height:var(--eventsH) !important;
  border:1px solid var(--border);
  border-radius:12px;
  box-sizing:border-box;
  box-shadow:none !important;
  object-fit:cover;
}
.twocol .col figure{ margin:0; } /* poster shortcode wrapper cleanup */

/* ---------- Forms: compact vertical rhythm + focus ---------- */
.content form label{
  display:block;
  margin:.25rem 0 .15rem;
  font-weight:600;
  color:var(--fg);
}

/* paragraph-wrapped fields (contact form generators often do this) */
.content form p{ margin:.15rem 0 .4rem; }
.content form textarea{ margin-bottom:.55rem; min-height:180px; }

.content form input[type="text"],
.content form input[type="email"],
.content form input[type="tel"],
.content form input[type="url"],
.content form input[type="search"],
.content form input[type="password"],
.content form input[type="number"],
.content form input[type="date"],
.content form input[type="time"],
.content form input[type="datetime-local"],
.content form select,
.content form textarea{
  display:block;
  width:100%;
  padding:.65rem .75rem;
  margin:0 0 .55rem;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--bg);
  color:var(--fg);
  transition:border-color .15s ease, box-shadow .15s ease;
}

.content form input:focus,
.content form select:focus,
.content form textarea:focus{
  outline:0;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Submit button */
.content form input[type="submit"],
.content form button[type="submit"]{
  appearance:none;
  border:0;
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  padding:.6rem 1rem;
  cursor:pointer;
}
.content form input[type="submit"]:hover,
.content form button[type="submit"]:hover{ opacity:.92; }

/* Dark mode control surfaces (color-only) */
.dark .content form input[type="text"],
.dark .content form input[type="email"],
.dark .content form input[type="tel"],
.dark .content form input[type="url"],
.dark .content form input[type="search"],
.dark .content form input[type="password"],
.dark .content form input[type="number"],
.dark .content form input[type="date"],
.dark .content form input[type="time"],
.dark .content form input[type="datetime-local"],
.dark .content form select,
.dark .content form textarea{
  background:rgba(255,255,255,.08);
  border-color:#2a2a2a;
  color:#eee;
}
.dark ::placeholder{ color:#aaa; opacity:.95; }

/* ---------- Footer: centered links with dot separators ---------- */
.site-footer nav a{ margin:0; text-decoration:none; }
.site-footer nav a + a::before{
  content:" · ";
  opacity:.7;
  padding:0 .2rem;
}

/* =========================
   Site-wide accessible links
   ========================= */

/* sensible defaults */
:root{
  --link: #0a5bd3;          /* light theme link */
  --link-hover: #0a84ff;
  --link-visited: #5a38c8;
}

/* brighter, higher-contrast links on dark */
.dark{
  --link: #9bc1ff;          /* readable on #111 bg */
  --link-hover: #c8ddff;
  --link-visited: #89b4ff;
}

/* content links only (don’t touch header/nav/buttons) */
.content a,
.panel .content a,
.prose a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: .085em;
  text-decoration-color: color-mix(in srgb, currentColor 80%, transparent);
}

.content a:hover,
.panel .content a:hover,
.prose a:hover{
  color: var(--link-hover);
  text-decoration-thickness: .11em;
}

.content a:visited,
.panel .content a:visited,
.prose a:visited{
  color: var(--link-visited);
}

/* keep buttons and header nav clean (no underline) */
a.btn,
.site-header .nav a{
  text-decoration: none !important;
}

/* visible keyboard focus */
.content a:focus-visible,
.panel .content a:focus-visible,
.prose a:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ===== Accessible link colors — extend to HERO + FOOTER ===== */

/* palette */
:root{
  --link: #0a5bd3;          /* light */
  --link-hover: #0a84ff;
  --link-visited: #5a38c8;
}
.dark{
  --link: #9bc1ff;          /* dark */
  --link-hover: #c8ddff;
  --link-visited: #89b4ff;
}

/* hero copy + hotline notice */
.hero .content a,
.hero-notice a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: .085em;
}
.hero .content a:hover,
.hero-notice a:hover{ color: var(--link-hover); text-decoration-thickness: .11em; }
.hero .content a:visited,
.hero-notice a:visited{ color: var(--link-visited); }
.hero .content a:focus-visible,
.hero-notice a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* footer links (including the nav) */
.site-footer a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: .15em;
  text-decoration-thickness: .085em;
}
.site-footer a:hover{ color: var(--link-hover); text-decoration-thickness: .11em; }
.site-footer a:visited{ color: var(--link-visited); }
.site-footer a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* keep header/top navigation unchanged */
.site-header .nav a{ text-decoration: none; color: inherit; }

/* Footer: tighter vertical rhythm */
.site-footer{
  padding: .5rem 1rem;              /* was .75rem */
  line-height: 1.3;                  /* compact but readable */
}

.site-footer p{
  margin: .25rem 0;                  /* tighten all <p> */
}

.site-footer .fine{                  /* address + note lines */
  margin: .15rem 0;
  line-height: 1.25;
}

.site-footer .fine.dim{              /* copyright line */
  margin-top: .1rem;
  opacity: .9;
}

/* optional: slightly tighter on wide screens */
@media (min-width: 900px){
  .site-footer{ padding: .45rem 1rem; }
  .site-footer p{ margin: .2rem 0; }
}

/* === Unified surfaces for accordions + form fields (light & dark) === */

/* 1) Surface tokens */
:root{
  /* light mode: subtle cards */
  --surface: #f7f7f9;
  --surface-strong: #f1f2f5;
  --surface-border: #e2e3e8;
}
.dark{
  /* dark mode: soft lift above #111 */
  --surface: rgba(255,255,255,.06);
  --surface-strong: rgba(255,255,255,.10);
  --surface-border: #2a2a2a;
}

/* 2) Details / accordions (all variants, including contact-details) */
details,
.contact-details{
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: .75rem 1rem;
  margin: 1rem 0;
}
details[open],
.contact-details[open]{ background: var(--surface-strong); }

details > summary,
.contact-details > summary{
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  margin: 0;
}
details > summary::-webkit-details-marker{ display:none; }
details > summary::before,
.contact-details > summary::before{
  content:"▸";
  display:inline-block;
  margin-right:.5rem;
  transition: transform .15s ease;
  opacity:.9;
}
details[open] > summary::before,
.contact-details[open] > summary::before{ transform: rotate(90deg); }

.contact-details .details-body{ padding-top: 8px; }

/* 3) Form fields (site-wide + contact shortcode) use surface instead of page bg */
.content form input[type="text"],
.content form input[type="email"],
.content form input[type="tel"],
.content form input[type="url"],
.content form input[type="search"],
.content form input[type="password"],
.content form input[type="number"],
.content form input[type="date"],
.content form input[type="time"],
.content form input[type="datetime-local"],
.content form select,
.content form textarea,
#contact-form-container input[type="text"],
#contact-form-container input[type="email"],
#contact-form-container input[type="tel"],
#contact-form-container input[type="url"],
#contact-form-container input[type="search"],
#contact-form-container input[type="password"],
#contact-form-container input[type="number"],
#contact-form-container input[type="date"],
#contact-form-container input[type="time"],
#contact-form-container input[type="datetime-local"],
#contact-form-container select,
#contact-form-container textarea{
  background: var(--surface);
  border-color: var(--surface-border);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}

/* Focus stays visible on both themes */
.content form input:focus,
.content form select:focus,
.content form textarea:focus,
#contact-form-container input:focus,
#contact-form-container select:focus,
#contact-form-container textarea:focus{
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* Placeholders readable in dark */
.dark ::placeholder{ color:#b9c0cc; opacity:.95; }

/* Keep rows compact (works with your current spacing) */
#contact-form-container .field{ margin:.15rem 0 .4rem; }

/* ========== SURFACE TOKENS (light/dark) ========== */
:root{
  --surface: #f6f7fb;              /* light card */
  --surface-strong: #eef1f7;       /* light, open state */
  --surface-border: #e2e5ec;
}
.dark{
  --surface: rgba(255,255,255,.08); /* dark card lift */
  --surface-strong: rgba(255,255,255,.12);
  --surface-border: #2a2a2a;
}

/* ========== ACCORDIONS (site-wide) ========== */
/* beat any earlier 'details{background:var(--bg)}' */
details,
.section details,
.panel details,
.content details {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  padding: .75rem 1rem;
  margin: 1rem 0;
}

details[open],
.section details[open],
.panel details[open],
.content details[open] {
  background: var(--surface-strong);
}

details > summary,
.section details > summary,
.panel details > summary,
.content details > summary {
  list-style:none;
  cursor:pointer;
  font-weight:600;
  margin:0;
}
details > summary::-webkit-details-marker{ display:none; }
details > summary::before{
  content:"▸"; display:inline-block; margin-right:.5rem;
  transition: transform .15s ease; opacity:.9;
}
details[open] > summary::before{ transform: rotate(90deg); }

/* ========== FORMS (site-wide) ========== */
/* apply in all common containers so every page gets it */
.section form input,
.section form select,
.section form textarea,
.panel form input,
.panel form select,
.panel form textarea,
.content form input,
.content form select,
.content form textarea,
#contact-form-container input,
#contact-form-container select,
#contact-form-container textarea {
  background: var(--surface);
  border-color: var(--surface-border);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}

/* keep your strong, visible focus */
.section form input:focus,
.section form select:focus,
.section form textarea:focus,
.panel form input:focus,
.panel form select:focus,
.panel form textarea:focus,
.content form input:focus,
.content form select:focus,
.content form textarea:focus,
#contact-form-container input:focus,
#contact-form-container select:focus,
#contact-form-container textarea:focus{
  outline:0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}

/* readable placeholders on dark */
.dark ::placeholder{ color:#b9c0cc; opacity:.95; }

/* ==== FORCE SURFACE ON FORM CONTROLS IN DARK MODE (wins specificity) ==== */
.dark .section form input,
.dark .section form select,
.dark .section form textarea,
.dark .panel form input,
.dark .panel form select,
.dark .panel form textarea,
.dark .content form input,
.dark .content form select,
.dark .content form textarea,
.dark #contact-form-container input,
.dark #contact-form-container select,
.dark #contact-form-container textarea{
  background: var(--surface);
  border-color: var(--surface-border);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02);
}

/* === Force SURFACE on every text-like control in dark mode === */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="search"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="time"],
.dark input[type="datetime-local"],
.dark textarea,
.dark select,
.dark #contact-form-container input[type="text"],
.dark #contact-form-container input[type="email"],
.dark #contact-form-container input[type="tel"],
.dark #contact-form-container input[type="url"],
.dark #contact-form-container input[type="search"],
.dark #contact-form-container input[type="password"],
.dark #contact-form-container input[type="number"],
.dark #contact-form-container input[type="date"],
.dark #contact-form-container input[type="time"],
.dark #contact-form-container input[type="datetime-local"],
.dark #contact-form-container textarea,
.dark #contact-form-container select{
  background: var(--surface) !important;
  border-color: var(--surface-border) !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.02) !important;
  color: var(--fg) !important;
}

/* Chrome/Safari autofill can override backgrounds — pin it to surface */
.dark input:-webkit-autofill,
.dark textarea:-webkit-autofill,
.dark select:-webkit-autofill{
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
  -webkit-text-fill-color: var(--fg) !important;
  border: 1px solid var(--surface-border) !important;
}

/* Keep focus ring visible on all of the above */
.dark input:focus,
.dark textarea:focus,
.dark select:focus{
  outline: 0 !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent) !important;
}

/* Add once in your global CSS */
[id] { scroll-margin-top: 84px; } /* adjust to your header height */

/* Lighter hotline text (works in light + dark) */
.hero-notice small{
  color: color-mix(in srgb, var(--fg) 60%, var(--bg));
  opacity: .9;
}
.hero-notice small a{
  color: inherit;                  /* keep link subtle */
  text-decoration: underline dotted;
}
.hero-notice small a:hover{
  text-decoration: underline;
  opacity: 1;
}

/* Dark mode: make it even lighter against the dark bg */
.dark .hero-notice small{
  color: color-mix(in srgb, #fff 72%, #000);
  opacity: .92;
}
/* Optional: tame the phone link in dark too */
.dark .hero-notice small a{ color: inherit; }

/* Mission-style accordions (site-wide) */
.section .content details{
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--surface-border);
  border-left: 6px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.section .content details:hover{
  background: color-mix(in srgb, var(--accent) 22%, var(--bg));
}
.section .content details[open]{
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
}

/* Summary = bold row with caret */
.section .content details > summary{
  cursor: pointer;
  margin: 0;
  list-style: none;
  font-weight: 700;
}
.section .content details > summary::-webkit-details-marker{ display:none; }
.section .content details > summary::before{
  content:"▸";
  display:inline-block;
  margin-right:.5rem;
  opacity:.9;
  transition: transform .15s ease;
}
.section .content details[open] > summary::before{ transform: rotate(90deg); }

/* Content spacing inside the accordion */
.section .content details > *:not(summary){
  margin-top: .6rem;
}

/* Dark mode tune-up */
.dark .section .content details{
  background: color-mix(in srgb, var(--accent) 24%, #000);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: #fff;
}
.dark .section .content details:hover{
  background: color-mix(in srgb, var(--accent) 30%, #000);
}
.dark .section .content details[open]{
  background: color-mix(in srgb, var(--accent) 28%, #000);
}

/* Optional: opt-out on a specific accordion */
.section .content details.no-mission{
  background: var(--surface);
  border-left-color: var(--surface-border);
}

/* visually hide screen-reader note */
.sr-only-ext {
  position:absolute!important;
  width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 1px 1px);white-space:nowrap;
}

/* icon spacing + alignment */
a .ext-icon {
  margin-left:.3em; vertical-align:baseline;
}

/* optional: tone down in buttons */
a.btn-mission .ext-icon,
a.btn .ext-icon { width:12px; height:12px; opacity:.9; }

/* optional hover nudge */
a:hover .ext-icon { transform: translateY(-1px); transition: transform .15s ease; }

/* Default: CTA hidden on desktop; theme toggle always visible */
.primary-cta { display: none; }

/* Desktop keeps your original nav visible */
@media (min-width: 901px){
  .menu-toggle { display: none; }
  .nav { display: block; }
}

/* Mobile behavior */
@media (max-width: 900px){
  /* mobile-only plain link for Meetings (no big blue background) */
  .primary-cta {
    display: inline-block;
    text-decoration: none;
    font-weight: 600;
    /* inherit colors; no background */
  }

  .menu-toggle {
    display: inline-flex;
    background: transparent;
    border: 0;
    padding: .5rem;
    border-radius: .75rem;
  }

  /* collapse nav into overlay/panel */
  .nav {
    display: none;
    position: absolute;
    top: 64px; /* adjust to your header height */
    left: 0; right: 0;
    padding: .75rem 1rem;
    background: var(--bg, #111);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }
  .nav[data-state="open"] { display: block; }

  /* hide the duplicate 'AA Meetings' inside the hamburger on mobile */
  .nav .is-meetings { display: none; }
}

/* Optional dark-surface tweak */
.dark .nav { --bg: oklch(0.21 0 0); }
/* Reset visual chrome on both toggles */
#theme-toggle,
.theme-toggle--mobile {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: .25rem;
  border-radius: .5rem;
  line-height: 1;
}

/* Accessible focus without a permanent border */
#theme-toggle:focus-visible,
.theme-toggle--mobile:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Desktop: show the original toggle in the nav, push it to the far right */
@media (min-width: 901px){
  .theme-toggle--mobile { display: none; }
  /* Make nav a flex row if it isn't already */
  .nav { display: flex; align-items: center; gap: .9rem; }
  /* Push the toggle to the far right inside the nav row */
  #theme-toggle { margin-left: auto; }
}

/* Mobile: show the duplicate, hide the one inside the hamburger */
@media (max-width: 900px){
  #theme-toggle { display: none; }          /* hide the nav one */
  .theme-toggle--mobile { display: inline-flex; }

  /* (Your existing mobile hamburger styles remain as-is) */
}

/* ===== 1) Make AA Meetings look like the rest (no purple visited) ===== */
.primary-cta {
  /* mobile-only element; keep it subtle but "pops" like other links */
  color: inherit;                /* match nav link color (dark mode = white) */
  text-decoration: none;
  font-weight: 700;
}
.primary-cta:visited { color: inherit; }  /* kill purple visited */
.primary-cta:hover,
.primary-cta:focus-visible {
  text-decoration: underline;    /* same hover affordance as other links */
  outline: none;
}

/* ===== 2) Hamburger menu items flow vertically on mobile ===== */
@media (max-width: 900px){
  /* Your overlay/panel rules can stay; these enforce vertical stack */
  .nav {
    display: none;
    position: absolute;
    top: 64px;            /* header height; adjust if yours differs */
    left: 0; right: 0;
    padding: .5rem 1rem;
    background: var(--bg, #111);
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
  }
  .nav[data-state="open"] { display: block; }

  /* Stack links vertically with comfy spacing */
  .nav a {
    display: block;
    padding: .65rem 0;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav a:last-child { border-bottom: 0; }

  /* We already hide the duplicate meetings link inside hamburger elsewhere: */
  /* .nav .is-meetings { display: none; } */
}
.dark .nav { --bg: oklch(0.21 0 0); }

/* ===== 3) Fix logo on mobile (too big / fuzzy) ===== */
.logo-circle {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 999px;
  overflow: hidden;        /* clean circle crop */
}
.logo-circle img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;     /* avoid stretch; preserve the round logo */
}

@media (min-width: 901px){
  .logo-circle { width: 48px; height: 48px; }  /* keep desktop size nice */
}

/* (If your header isn't flex already) keep items aligned nicely */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
/* Mobile slideout aligned to the right */
@media (max-width: 900px){
  .nav {
    display: none;
    position: fixed;              /* keep it pinned while scrolling */
    top: 64px;                    /* header height; adjust if needed */
    right: 0;                     /* 👈 anchor to right */
    left: auto;                   /* don't stretch full width */
    width: clamp(240px, 80vw, 360px);
    max-height: calc(100dvh - 64px);
    overflow:auto;
    padding: .5rem 1rem;
    background: var(--bg, #111);
    box-shadow: -10px 10px 30px rgba(0,0,0,.25);
    border-left: 1px solid rgba(255,255,255,.08);
    z-index: 1000;
  }
  .nav[data-state="open"] { display: block; }

  /* vertical list */
  .nav a {
    display: block;
    padding: .75rem 0;
    line-height: 1.2;
    border-bottom: 1px solid rgba(255,255,255,.08);
    text-align: left;             /* keep text left-aligned */
  }
  .nav a:last-child { border-bottom: 0; }

  /* hide duplicate Meetings inside the slideout (CTA is outside) */
  .nav .is-meetings { display: none; }
}
.dark .nav { --bg: oklch(0.21 0 0); }

/* Ensure header/nav sit above hero/content */
.site-header { position: relative; z-index: 10001; }

/* Right-docked mobile panel with strong stacking context */
@media (max-width: 900px){
  .nav{
    position: fixed;
    top: 64px;                 /* match your header height */
    right: 0;
    left: auto;
    width: clamp(240px, 80vw, 360px);
    max-height: calc(100dvh - 64px);
    overflow: auto;

    display: none;
    background-color: #111;    /* opaque so nothing shows through */
    z-index: 10002;            /* above everything behind it */
    box-shadow: -10px 10px 30px rgba(0,0,0,.25);
    border-left: 1px solid rgba(255,255,255,.08);
  }
  .dark .nav { background-color: oklch(0.21 0 0); }

  .nav[data-state="open"] { display: block; }

  /* vertical menu list */
  .nav a {
    display: block;
    padding: .75rem 1rem .75rem 0;  /* right align space */
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav a:last-child { border-bottom: 0; }
}

/* Optional: dimming backdrop when menu is open (no extra JS needed) */
header.site-header:has(#primary-nav[data-state="open"])::after{
  content: "";
  position: fixed;
  inset: 64px 0 0 0;          /* from bottom of header to bottom of screen */
  background: rgba(0,0,0,.35);
  z-index: 10000;             /* below the panel (10002) but above page */
}
/* Right-justify items & text in the hamburger panel */
@media (max-width: 900px){
  /* make the panel content right-aligned */
  .nav { 
    text-align: right;
    padding: .5rem 1rem;        /* keep some right padding */
  }

  /* stack links vertically and align their text to the right edge */
  .nav a {
    display: block;
    text-align: right;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav a:last-child { border-bottom: 0; }

  /* (still hide duplicated 'AA Meetings' inside the hamburger) */
  .nav .is-meetings { display: none; }
}
/* Tighter right-docked hamburger panel */
@media (max-width: 900px){
  /* tweakable width token */
  :root { --menu-width: clamp(120px, 12vw, 300px); }

  .nav{
    width: var(--menu-width);
    right: 0;                /* keep docked to the right edge */
    left: auto;              /* don't span full width */
    padding: .5rem 1rem;
    border-left: 1px solid rgba(255,255,255,.08);
    border-top-left-radius: 10px;   /* small polish */
    border-bottom-left-radius: 10px;
    box-shadow: -12px 10px 30px rgba(0,0,0,.28);
  }

  /* right-aligned, vertical list stays the same */
  .nav a{
    display: block;
    text-align: right;
    padding: .75rem 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav a:last-child{ border-bottom: 0; }
}
/* Theme tokens for the slide-out */
:root{
  --panel-bg-light: #fff;
  --panel-text-light: #111;
  --panel-border-light: rgba(0,0,0,.08);
  --backdrop-light: rgba(0,0,0,.18);
}
.dark{
  --panel-bg-dark: oklch(0.21 0 0);
  --panel-text-dark: #f5f5f5;
  --panel-border-dark: rgba(255,255,255,.12);
  --backdrop-dark: rgba(0,0,0,.35);
}

/* Right-docked hamburger panel — light vs dark surfaces */
@media (max-width: 900px){
  .nav{
    background: var(--panel-bg-light);
    color: var(--panel-text-light);
    border-left: 1px solid var(--panel-border-light);
  }
  .dark .nav{
    background: var(--panel-bg-dark);
    color: var(--panel-text-dark);
    border-left: 1px solid var(--panel-border-dark);
  }

  /* link dividers + right-aligned items (keeps your current layout) */
  .nav a{
    display:block;
    text-align:right;
    padding:.75rem 0;
    border-bottom:1px solid var(--panel-border-light);
    color: inherit;
    text-decoration: none;
  }
  .dark .nav a{ border-bottom:1px solid var(--panel-border-dark); }
  .nav a:last-child{ border-bottom:0; }
}

/* Softer backdrop in light mode, stronger in dark */
header.site-header:has(#primary-nav[data-state="open"])::after{
  content:"";
  position:fixed;
  inset:64px 0 0 0;                 /* adjust 64px if your header height differs */
  background: var(--backdrop-light);
  z-index:10000;
}
.dark header.site-header:has(#primary-nav[data-state="open"])::after{
  background: var(--backdrop-dark);
}
/* === RESET LOGO STYLES (desktop + mobile) === */
.logo-circle {
  /* force a true square container */
  width: 48px;
  height: 48px;
  flex: 0 0 48px;

  /* perfect circle, no padding/border */
  border: 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;

  display: inline-block;
  line-height: 0; /* remove inline-gap */
}

/* Mobile size */
@media (max-width: 900px){
  .logo-circle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
}

.logo-circle img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;   /* do NOT crop; keep proportions */
  object-position: center;
  transform: none;       /* undo any previous scale */
  image-rendering: auto;
}

/* ===== Calendars: sprites, mission frame, full-bleed, responsive ===== */

/* Title sprites inherit currentColor so they auto-match light/dark */
.sprite{
  display:inline-block; width:1.25em; height:1.25em;
  vertical-align:-0.2em; margin-right:.4em; background: currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.sprite-inperson{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.89 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5s-3 1.34-3 3 1.34 3 3 3zM8 11c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5C15 14.17 10.33 13 8 13zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.89 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/></svg>");
}
.sprite-zoom{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M17 10.5V7c0-1.1-.9-2-2-2H3C1.9 5 1 5.9 1 7v6c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3.5l4 4v-9l-4 4z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M17 10.5V7c0-1.1-.9-2-2-2H3C1.9 5 1 5.9 1 7v6c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3.5l4 4v-9l-4 4z'/></svg>");
}

/* Mission-style frame that matches your blockquote.mission */
.calendar-wrap{
  border: 1px solid var(--border);
  border-left: 6px solid var(--accent);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg));
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

/* Pull the calendar to the container edge (your container pad is 1.25rem) */
.fullbleed{
  margin-left: -1.25rem;
  margin-right: -1.25rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Make embedded Google Calendars responsive and tidy */
.calendar-wrap iframe{
  width: 100% !important;
  height: 700px;              /* desktop baseline */
  border: 0;
  display: block;
  background: #fff;
  border-radius: 8px;
}
@media (max-width: 900px){
  .calendar-wrap iframe{ height: min(72vh, 640px); }
}

/* Link just below each calendar */
.cal-link{
  margin: .6rem 0 0; font-weight: 600;
}

/* === Unify all accordions to look exactly like blockquote.mission === */
/* Put this at the END of site.css */

:root{ --mission-bg: color-mix(in srgb, var(--accent) 14%, var(--bg)); }
.dark{ --mission-bg: color-mix(in srgb, var(--accent) 14%, var(--bg)); } /* same formula; dark uses #111 bg */

.section .content details,
details.accordion,
details.hero-acc,
details.mission,
details.mission-acc,
details:not([class]) {
  /* clone of blockquote.mission */
  background: var(--mission-bg) !important;
  border: 0 !important;
  border-left: 6px solid var(--accent) !important;
  border-radius: 10px !important;
  padding: .9rem 1.1rem !important;
  margin: 1rem 0 1.25rem !important;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04) !important;
  color: inherit;
}

/* same hover/open subtle brightening as your mission style */
.section .content details:hover,
details.accordion:hover,
details.hero-acc:hover,
details.mission:hover,
details.mission-acc:hover,
details:not([class]):hover{
  background: color-mix(in srgb, var(--accent) 22%, var(--bg)) !important;
}
.section .content details[open],
details.accordion[open],
details.hero-acc[open],
details.mission[open],
details.mission-acc[open],
details:not([class])[open]{
  background: color-mix(in srgb, var(--accent) 18%, var(--bg)) !important;
}

/* caret + summary row (kept from your existing rules) */
.section .content details > summary,
details > summary{
  list-style:none; cursor:pointer; font-weight:700; margin:0;
}
details > summary::-webkit-details-marker{ display:none; }
details > summary::before{
  content:"▸"; display:inline-block; margin-right:.5rem;
  opacity:.9; transition: transform .15s ease;
}
details[open] > summary::before{ transform: rotate(90deg); }