/* Jewish Discovery Center — Site Stylesheet
   Palette derived from the JDC logo:
   --blue: #204561 (logo blue) | --gold: #C9A84C | --cream: #F8F4EC */

:root {
  --blue: #204561;
  --blue-deep: #16324a;
  --blue-darkest: #0e2233;
  --gold: #C9A84C;
  --gold-light: #e0bf6a;
  --cream: #F8F4EC;
  --cream-border: #e8e0cc;
  --ink: #2b2b2b;
  --muted: #666;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: var(--blue); }

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- TOP INFO BAR ----------
   Carries the street address and phone on every page. This exists so the
   address is never stranded floating above the homepage headline, and so the
   Donate button can come out of the navigation, which was crowding it. */
.topbar {
  background: var(--blue-darkest);
  color: rgba(248,244,236,0.8);
  font-size: 13.5px;
}
.topbar .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px; flex-wrap: wrap;
}
.topbar-right { display: flex; align-items: center; gap: 1.5rem; }
.topbar-item {
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(248,244,236,0.8); text-decoration: none;
  transition: color .15s;
}
.topbar-item .icn { width: 15px; height: 15px; color: var(--gold); flex: none; }
.topbar-item:hover { color: #fff; }
.topbar-addr { font-weight: 500; letter-spacing: .01em; }
.topbar-donate {
  background: var(--gold); color: var(--blue-darkest);
  text-decoration: none; font-weight: 700; font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 6px 18px; border-radius: 3px;
  transition: background .15s;
}
.topbar-donate:hover { background: var(--gold-light); }
@media (max-width: 720px) {
  .topbar .container { justify-content: center; min-height: 0; padding-top: 8px; padding-bottom: 8px; }
  .topbar-addr { font-size: 12.5px; text-align: center; }
  .topbar-right { gap: 1rem; }
}

/* ---------- HEADER ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--cream-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.5rem;
  height: 88px;
}
/* flex: none is load-bearing. The logo is a flex item next to a wide nav, so
   with the default flex-shrink:1 it gets squeezed narrower than its natural
   width while height stays fixed — the image renders horizontally contracted.
   Do not remove this, and do not let `img { max-width:100% }` apply here. */
.site-logo { flex: none; display: flex; align-items: center; }
.site-logo img { height: 56px; width: auto; max-width: none; }
/* Gap and tracking are tuned so the six nav items + two social icons fit the
   1032px inner container alongside the 165px logo. Widen either and the header
   overflows — which is what used to squash the logo. Re-measure if you add a
   nav item; there is roughly 45px of slack. */
.site-nav { display: flex; align-items: center; gap: 1.5rem; }
/* The nav links: larger and better spaced than before, with a gold underline
   that grows from the centre rather than a flat border swap. */
.site-nav a {
  position: relative;
  color: var(--blue);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  padding: 6px 0;
  white-space: nowrap;
  transition: color .2s;
}
.site-nav a::after {
  content: '';
  position: absolute; left: 50%; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .22s ease;
}
.site-nav a:hover { color: var(--blue-deep); }
.site-nav a:hover::after, .site-nav a.active::after { width: 100%; }
.site-nav a.active { color: var(--blue-deep); font-weight: 600; }
.btn, button.btn {
  display: inline-block;
  background: var(--gold);
  color: var(--blue-darkest);
  border: none;
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background .2s;
}
.btn:hover { background: var(--gold-light); }
.btn-outline {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(248,244,236,0.4);
}
.btn-outline:hover { background: rgba(248,244,236,0.08); }
.btn-blue { background: var(--blue); color: var(--cream); }
.btn-blue:hover { background: var(--blue-deep); }
.site-nav .btn { padding: 8px 18px; font-size: 13px; }

/* Mobile nav */
.nav-toggle { display: none; background: none; border: none; color: var(--blue); font-size: 26px; cursor: pointer; }
/* Breakpoint is 1060px, not the usual tablet 820px: below this the horizontal
   nav no longer fits beside the logo, so it must collapse to the hamburger. */
@media (max-width: 1060px) {
  .nav-toggle { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 88px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 24px 1.5rem;
    gap: 1.1rem;
    border-bottom: 1px solid var(--cream-border);
    box-shadow: 0 12px 24px rgba(32,69,97,0.08);
  }
  .site-nav.open { display: flex; }
  .site-nav a::after { left: 0; transform: none; }
}

/* ---------- HERO ---------- */
.hero {
  background: var(--blue);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 5.5rem 24px 6rem;
}
/* Hero background photograph. Replaces the old Star of David line art with the
   building itself — the overlay below is what keeps the headline legible, so
   don't lighten it without re-checking contrast. */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(14,34,51,0.78) 0%, rgba(22,50,74,0.82) 45%, rgba(14,34,51,0.93) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 680px; margin: 0 auto; }
.eyebrow {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 1rem;
}
.hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 1.1rem;
}
.hero h1 em { color: var(--gold); font-style: italic; }
.hero p.sub {
  color: rgba(248,244,236,0.75);
  font-size: 17px;
  line-height: 1.75;
  margin-bottom: 2.25rem;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Page hero (interior pages) */
.page-hero {
  background: var(--blue);
  color: var(--cream);
  text-align: center;
  padding: 3.5rem 24px;
}
.page-hero h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(30px, 5vw, 42px);
  font-weight: 700;
}
.page-hero p { color: rgba(248,244,236,0.7); margin-top: .6rem; font-size: 16px; }

/* ---------- SECTION JUMP NAV ----------
   A table of contents for a long page, sitting directly under the page hero.
   Deliberately NOT sticky: .site-header is already sticky at 88px, and on a
   laptop a second sticky bar under the campaign banner eats most of the fold.
   Used on programs.html, which runs six sections deep because classes and
   programmes share one page — see jumpnav() in generate_site.py. */
.jumpnav {
  background: #fff;
  border-bottom: 1px solid var(--cream-border);
}
.jumpnav .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.jumpnav a {
  border: 1px solid var(--cream-border);
  border-radius: 20px;
  padding: 7px 15px;
  font-size: 13.5px; font-weight: 500;
  color: var(--blue); text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.jumpnav a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--cream);
}
/* Six pills wrap to three rows on a phone. Kept wrapping rather than made into
   a horizontally scrolling strip so every section stays visible, but tightened
   so the list does not push the page content too far down. */
@media (max-width: 560px) {
  .jumpnav .container { gap: .4rem; padding-top: .85rem; padding-bottom: .85rem; }
  .jumpnav a { padding: 6px 12px; font-size: 12.5px; }
}
/* Clear the 88px sticky header when an anchor is jumped to, so the section
   heading is not hidden behind it. */
.section[id] { scroll-margin-top: 108px; }

/* ---------- CAMPAIGN BANNER ---------- */
.campaign-banner {
  background: linear-gradient(90deg, var(--gold) 0%, #d9b95e 100%);
  color: var(--blue-darkest);
  padding: 1rem 24px;
  text-align: center;
  font-size: 15px;
}
.campaign-banner strong { font-family: 'Playfair Display', serif; font-size: 16px; }
.campaign-banner a {
  color: var(--blue-darkest);
  font-weight: 700;
  margin-left: 8px;
  text-underline-offset: 3px;
}

/* ---------- SECTIONS ---------- */
.section { padding: 4.5rem 0; }
.section-cream { background: var(--cream); }
.section-blue { background: var(--blue); color: var(--cream); }
.section-head { text-align: center; margin-bottom: 3rem; }
.section-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  color: var(--blue);
  margin-bottom: .4rem;
}
.section-blue .section-head h2 { color: var(--cream); }
.section-head p { color: var(--muted); font-size: 15px; }
.section-blue .section-head p { color: rgba(248,244,236,0.65); }
.gold-line {
  display: block;
  width: 52px; height: 3px;
  background: var(--gold);
  margin: .9rem auto 0;
  border-radius: 3px;
}
/* An eyebrow may carry a small icon. .icn is display:block, so without this
   the icon drops onto its own line and strands itself at the far left of the
   centred heading block. */
.section-head .eyebrow {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.section-head .eyebrow .icn { width: 15px; height: 15px; flex: none; }

/* ---------- MISSION ---------- */
.mission { text-align: center; padding: 3rem 24px; background: var(--cream); border-bottom: 1px solid var(--cream-border); }
.mission blockquote {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.85;
  color: #3a3a30;
}

/* ---------- CARD GRIDS ---------- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card {
  background: #fff;
  border: 1px solid var(--cream-border);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(32,69,97,0.08); }
.card-icon {
  width: 52px; height: 52px;
  background: var(--cream);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.1rem;
  color: var(--gold);
  font-size: 24px;
}
.card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: .5rem;
}
.card p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.card .when {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .8rem;
}
.card-link {
  display: inline-block;
  margin-top: .9rem;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 2px;
}
.card-link:hover { color: var(--gold); }

/* Event cards (on blue) */
.event-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  text-align: left;
}
.event-card .date {
  font-size: 12px; font-weight: 600;
  color: var(--gold);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: .6rem;
}
.event-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px; color: var(--cream);
  line-height: 1.35; margin-bottom: .5rem;
}
.event-card p { font-size: 14px; color: rgba(248,244,236,0.65); line-height: 1.6; }
.event-card a {
  display: inline-block; margin-top: 1rem;
  font-size: 13px; font-weight: 600;
  color: var(--gold); text-decoration: none;
  letter-spacing: .07em; text-transform: uppercase;
}
.event-card a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Media cards */
.media-card { border-radius: 12px; padding: 2.25rem 1.5rem; text-align: center; }
.media-card.audio { background: #e8f0fb; }
.media-card.video { background: #faeede; }
.media-card.books { background: #e6f4ec; }
.media-card > .icn { width: 34px; height: 34px; margin: 0 auto; color: var(--blue); }
.media-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 19px; font-weight: 700;
  color: var(--blue); margin: .8rem 0 .4rem;
}
.media-card p { font-size: 14px; color: #555; }
.media-card a {
  display: inline-block; margin-top: 1rem;
  font-size: 13px; font-weight: 600;
  color: var(--blue); text-decoration: none;
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 2px solid var(--blue);
  padding-bottom: 2px;
}

/* ---------- TIME TO BUILD (home section) ---------- */
.build-strip {
  background: var(--blue-deep);
  color: var(--cream);
  padding: 3.5rem 0;
}
.build-strip .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.build-strip h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(24px, 4vw, 34px);
}
.build-strip h2 em { color: var(--gold); font-style: italic; }
.build-strip p { color: rgba(248,244,236,0.7); margin-top: .5rem; max-width: 480px; }

/* ---------- PROSE (interior pages) ---------- */
.prose { max-width: 760px; margin: 0 auto; font-size: 16px; line-height: 1.85; }
.prose h2 {
  font-family: 'Playfair Display', serif;
  color: var(--blue);
  font-size: 26px;
  margin: 2.5rem 0 .8rem;
}
.prose h2:first-child { margin-top: 0; }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 1rem 1.4rem; }
.prose li { margin: .4rem 0; }

/* ---------- SCHEDULE TABLE ---------- */
.schedule { width: 100%; border-collapse: collapse; max-width: 760px; margin: 0 auto; }
.schedule th {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); text-align: left;
  padding: 10px 14px; border-bottom: 2px solid var(--gold);
}
.schedule td { padding: 14px; border-bottom: 1px solid var(--cream-border); font-size: 15px; }
.schedule td:first-child { font-weight: 600; color: var(--blue); }

/* ---------- SUMMER MINYAN SCHEDULE (shul.html) ----------
   Only two times change in summer, so rather than duplicate the whole table
   this panel states the differences and the table below carries matching tags. */
.summer-schedule {
  max-width: 760px; margin: 0 auto 2.5rem;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-left: 4px solid var(--gold);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
}
.summer-schedule .eyebrow {
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.summer-schedule .eyebrow .icn { width: 16px; height: 16px; flex: none; }
.summer-schedule dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem 2rem;
}
.summer-schedule dt {
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; color: var(--muted);
  margin-bottom: .15rem;
}
.summer-schedule dd {
  font-family: 'Playfair Display', serif;
  font-size: 25px; color: var(--blue); line-height: 1.15;
}
.summer-schedule dd span {
  font-family: 'Inter', sans-serif;
  font-size: 12px; color: var(--muted);
  margin-left: .45rem; letter-spacing: .02em;
}
.summer-schedule > p {
  margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--cream-border);
  font-size: 13.5px; color: var(--muted);
}

/* ---------- CONTACT: the three big ways to reach us ---------- */
.contact-primary {
  display: grid;
  /* 270px min, so the narrowest three-column layout still leaves ~222px of
     text width — enough for info@jewishdiscovery.org at 18px bold Playfair,
     which is the longest string these cards carry. Measured, not guessed. */
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 20px; max-width: 940px; margin: 0 auto;
}
.contact-big {
  display: block; text-align: center; text-decoration: none;
  background: #fff;
  border: 1px solid var(--cream-border);
  border-top: 3px solid var(--gold);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.contact-big:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(32,69,97,0.10);
  border-color: var(--gold);
}
.contact-big-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--cream); color: var(--gold);
}
.contact-big-icon .icn { width: 24px; height: 24px; }
.contact-big-label {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: .35rem;
}
.contact-big strong {
  display: block;
  font-family: 'Playfair Display', serif;
  /* Capped at 18px: at bold Playfair that is the largest size where
     info@jewishdiscovery.org still fits on one line in the narrowest card.
     Raising it makes the email wrap. */
  font-size: clamp(16px, 1vw + 8px, 18px);
  line-height: 1.35; color: var(--blue);
  overflow-wrap: break-word;
}
.contact-big-note {
  display: block; margin-top: .5rem;
  font-size: 13px; color: var(--muted);
}
/* the cream sections put these on cream, so lift them with a white face */
.section-cream .contact-big { background: #fff; }

/* Contact link in the top bar — hidden on narrow screens, where the bar
   already wraps and the footer link is close enough. */
@media (max-width: 720px) { .topbar-contact { display: none; } }

/* ---------- STAFF DIRECTORY (contact.html) ---------- */
.staff-contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(288px, 1fr));
  gap: 18px; max-width: 980px; margin: 0 auto;
}
.staff-contact {
  background: #fff;
  border: 1px solid var(--cream-border);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  padding: 1.4rem 1.5rem;
}
.staff-contact h3 {
  font-family: 'Playfair Display', serif;
  font-size: 18px; color: var(--blue); margin-bottom: .1rem;
}
.staff-contact-role {
  display: block; margin-bottom: .9rem;
  font-size: 12px; color: var(--muted); letter-spacing: .02em;
}
.staff-contact-line {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem 0;
  color: var(--ink); text-decoration: none;
  font-size: 14px;
  /* long personal addresses must wrap inside the card, never overflow it */
  overflow-wrap: anywhere;
}
.staff-contact-line .icn { width: 15px; height: 15px; flex: none; color: var(--gold); }
.staff-contact-line:hover { color: var(--blue); }
.staff-contact-line:hover .icn { color: var(--blue); }
.staff-contacts-note {
  max-width: 720px; margin: 2rem auto 0;
  text-align: center; font-size: 13.5px; line-height: 1.8; color: var(--muted);
}

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.contact-card {
  background: #fff; border: 1px solid var(--cream-border);
  border-radius: 12px; padding: 1.75rem;
}
.contact-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--blue); font-size: 18px; margin-bottom: .8rem;
}
.contact-card p { font-size: 15px; color: var(--muted); line-height: 1.9; }
.contact-card a { color: var(--blue); font-weight: 500; }

/* ---------- DONATE CTA ---------- */
.donate-cta { text-align: center; max-width: 640px; margin: 0 auto; }
.donate-cta h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(28px, 5vw, 38px);
  color: var(--cream);
  margin-bottom: .9rem;
}
.donate-cta h2 em { color: var(--gold); font-style: italic; }
.donate-cta p { color: rgba(248,244,236,0.7); font-size: 16px; margin-bottom: 2rem; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--blue-darkest);
  color: rgba(255,255,255,0.55);
  padding: 3rem 0 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  align-items: start;
}
.site-footer img { height: 44px; width: auto; margin-bottom: 1rem; }
.site-footer h4 {
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.site-footer a { color: rgba(255,255,255,0.65); text-decoration: none; font-size: 14px; }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; }
.site-footer li { margin: .45rem 0; }
.site-footer p { font-size: 14px; line-height: 1.9; }
.footer-social { display: flex; gap: 12px; margin-top: .5rem; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 2.5rem; padding-top: 1.5rem;
  text-align: center; font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .card:hover { transition: none; transform: none; }
}

/* ---------- Photos ---------- */
.photo { margin: 0; border-radius: 12px; overflow: hidden; background: var(--cream); }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-wide { max-width: 860px; margin: 2.5rem auto 0; aspect-ratio: 21/9; }
.rc-title { font-family: 'Playfair Display', serif; color: var(--blue); font-size: 18px; margin: 1rem 0 .3rem; }
.rc-text { font-size: 14px; color: var(--muted); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* Cards with photographs. Cover-cropping is fine here because a photo loses
   nothing important at the edges — see .card-poster for why flyers differ. */
.card-photo { padding-top: 0; overflow: hidden; }
.card-photo .photo { border-radius: 0; margin: 0 -1.5rem 1.1rem; aspect-ratio: 16/10; }
.card-photo h3 { margin-top: .2rem; }

/* Campaign stats */
.build-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto; }
.stat { background: var(--cream); border-radius: 12px; padding: 1.5rem 1rem; text-align: center; }
.stat strong { display: block; font-family: 'Playfair Display', serif; font-size: 34px; color: var(--blue); }
.stat span { font-size: 13px; color: var(--muted); }
.build-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Naming tables on blue */
.naming-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2.5rem; max-width: 980px; margin: 0 auto; align-items: start; }
.schedule-dark td { border-bottom-color: rgba(248,244,236,0.15); color: var(--cream); }
.schedule-dark td:first-child { color: var(--cream); }
.schedule-dark td:last-child { color: var(--gold); font-weight: 600; text-align: right; }

/* Donor wall note + the Rebbe's quotation on timetobuild.html */
.donor-wall-note {
  max-width: 700px; margin: 2rem auto 0;
  text-align: center; font-size: 14.5px; line-height: 1.85;
  color: rgba(248,244,236,0.75);
}
.donor-wall-note strong { color: var(--gold); }
.rebbe-quote {
  max-width: 640px; margin: 2.75rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(201,168,76,0.3);
  text-align: center;
}
.rebbe-quote blockquote {
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 18px; line-height: 1.8;
  color: var(--cream);
}
.rebbe-quote figcaption {
  margin-top: 1rem;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
}

/* Wall of honor pills */
.wall-levels { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 760px; margin: 0 auto; }
.wall-levels span {
  border: 1px solid rgba(201,168,76,0.5); color: var(--cream);
  border-radius: 20px; padding: 8px 18px; font-size: 14px;
}

/* ---------- ICONS ----------
   Every icon is an inline SVG carrying class="icn" (see the ICONS dict in
   scripts/generate_site.py). SVGs have no intrinsic size, so without these
   rules they render at the browser default of 300x150 and blow the layout
   apart. Never replace these with an icon webfont — one was tried and it
   silently failed to load. */
.icn { width: 24px; height: 24px; flex: none; display: block; }
.card-icon .icn { width: 26px; height: 26px; }
.card-icon.sm {
  width: 34px; height: 34px;
  margin: 0; flex: none;
}
.card-icon.sm .icn { width: 18px; height: 18px; }
.footer-social .icn { width: 17px; height: 17px; }
.contact-card h3 .icn {
  width: 20px; height: 20px;
  display: inline-block; vertical-align: -3px;
  margin-right: 6px; color: var(--gold);
}

/* Facebook icon in the main nav */
.nav-social {
  display: inline-flex; align-items: center;
  color: var(--blue); border-bottom-color: transparent !important;
}
.nav-social:hover { color: var(--gold); }

/* Icon + heading on cards that lead with an image.
   The icon sits ABOVE the title, not beside it. Beside it, the icon and its
   gap ate ~44px of the row, pushing the title 22px right of the card's centre
   — barely visible on one line, obviously lopsided once the title wrapped to
   two. Stacking also matches the icon-only cards elsewhere on the site. */
.card-title-row {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .55rem; margin-bottom: .5rem;
}
.card-title-row h3 { margin-bottom: 0; }

/* ---------- POSTERS ----------
   Flyers and promotional graphics, as opposed to photographs. object-fit is
   *contain*, not cover, and that is the entire point: these images are mostly
   text — dates, times, phone numbers — so cropping them destroys the content.
   They sit on a cream mat and link to the full-size file. */
.poster { margin: 0; background: var(--cream); border-radius: 12px; overflow: hidden; }
.poster a { display: block; width: 100%; height: 100%; }
.poster img { width: 100%; height: 100%; object-fit: contain; display: block; }

.card-poster { padding-top: 0; overflow: hidden; }
.card-poster .poster {
  border-radius: 0;
  margin: 0 -1.5rem 1.1rem;
  height: 230px;
  border-bottom: 1px solid var(--cream-border);
}
.card-poster h3 { margin-top: .2rem; }

/* A single poster given room to breathe, e.g. the current course on institute.html */
.poster-feature {
  max-width: 540px; margin: 0 auto;
  padding: 1.25rem; border: 1px solid var(--cream-border);
}
.poster-feature img { height: auto; max-height: 640px; }

/* Poster inside an event card on a blue background */
.event-img {
  height: 190px;
  background: rgba(248,244,236,0.94);
  border-radius: 10px;
  margin-bottom: 1.1rem;
}

/* ---------- BOOK LIBRARY (books.html) ---------- */
.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 1.75rem;
}
.book-chip {
  display: flex; align-items: center; gap: .6rem;
  background: #fff;
  border: 1px solid var(--cream-border);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  color: var(--blue); text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.book-chip::after {
  content: 'PDF';
  margin-left: auto; flex: none;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.45);
  border-radius: 3px;
  padding: 2px 5px;
}
.book-chip:hover {
  background: var(--cream);
  border-left-color: var(--blue);
  transform: translateX(2px);
}
/* Hebrew section reads right-to-left, so the gold spine swaps sides */
.book-grid[dir="rtl"] .book-chip {
  border-left: 1px solid var(--cream-border);
  border-right: 3px solid var(--gold);
}
.book-grid[dir="rtl"] .book-chip::after { margin-left: 0; margin-right: auto; }
.book-grid[dir="rtl"] .book-chip:hover {
  border-right-color: var(--blue);
  transform: translateX(-2px);
}

/* ---------- VIDEO EMBED (video.html) ---------- */
.video-embed {
  position: relative;
  max-width: 760px; margin: 0 auto;
  padding-top: min(42.85%, 428px);   /* 16:9, capped so it can't dominate */
  border-radius: 12px; overflow: hidden;
  background: var(--blue);
}
.video-embed-note {
  max-width: 760px; margin: .9rem auto 0;
  text-align: center; font-size: 13.5px; color: var(--muted);
}
.video-embed-note strong { color: var(--blue); }
.live-flag {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-right: .5rem;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #b3452f;
}
.live-flag .icn { width: 13px; height: 13px; }

/* Letters inside a description that spell out an acronym in the title —
   CHILdren Learn HEbrew REading -> CHILL HERE. Weight alone is too quiet at
   14px, so they also take the blue. */
.acr {
  color: var(--blue);
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---------- INSTITUTE COURSE ARCHIVE (institute.html) ---------- */
.institute-lead {
  max-width: 760px; margin: 0 auto 2.5rem;
  text-align: center;
  font-family: 'Playfair Display', serif;
  font-size: clamp(20px, 2.4vw, 26px);
  font-style: italic; color: var(--blue);
}
.institute-intro {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 2.75rem; align-items: start;
  max-width: 960px; margin: 0 auto;
}
.institute-intro p { color: var(--muted); line-height: 1.85; font-size: 15.5px; }
.institute-intro p + p { margin-top: 1rem; }
.institute-intro strong { color: var(--blue); }
.institute-art {
  margin: 0; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--cream-border); background: var(--cream);
}
.institute-art img { width: 100%; height: auto; display: block; }
.institute-urge {
  margin-top: 1.4rem !important;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cream-border);
  font-family: 'Playfair Display', serif;
  font-style: italic; font-size: 17px;
  color: var(--blue) !important;
}
.institute-stats { margin-top: 3rem; }
@media (max-width: 760px) {
  .institute-intro { grid-template-columns: 1fr; gap: 2rem; }
  .institute-art { max-width: 320px; margin: 0 auto; }
}
.institute-note {
  max-width: 680px; margin: 2rem auto 0;
  text-align: center; font-size: 14px; color: var(--muted);
}
.course-archive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px; align-items: start;
}
.course-field {
  background: #fff;
  border: 1px solid var(--cream-border);
  border-radius: 12px;
  padding: 1.5rem 1.6rem;
}
.course-field-head {
  display: flex; align-items: center; gap: .7rem;
  padding-bottom: .8rem; margin-bottom: .8rem;
  border-bottom: 2px solid var(--gold);
}
.course-field-head h3 {
  flex: 1;
  font-family: 'Playfair Display', serif;
  font-size: 19px; color: var(--blue);
}
.course-field-count {
  font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}
.course-list { list-style: none; }
.course-list li {
  display: flex; align-items: baseline; gap: .8rem;
  padding: 7px 0;
  font-size: 14.5px; line-height: 1.45;
  border-bottom: 1px solid var(--cream);
}
.course-list li:last-child { border-bottom: none; }
.course-list li span {
  margin-left: auto; flex: none;
  font-size: 11.5px; font-weight: 600;
  color: var(--gold);
}
/* "9" alone reads oddly; label it without repeating the word 69 times in HTML */
.course-list li span::after { content: ' classes'; color: var(--muted); font-weight: 400; }

/* ---------- AUDIO LIBRARY (audio.html) ---------- */
.series-index {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  max-width: 860px; margin: 2.5rem auto 0;
}
.series-index a {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 20px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--blue); text-decoration: none;
  transition: background .15s, border-color .15s;
}
.series-index a:hover { background: #fff; border-color: var(--gold); }
.series-index a span {
  font-size: 11px; font-weight: 700;
  color: var(--gold);
}

.audio-library { margin-top: 3.5rem; }
.series { margin-bottom: 3rem; scroll-margin-top: 140px; }
.series-head {
  display: flex; align-items: baseline; gap: .9rem;
  padding-bottom: .7rem; margin-bottom: 1rem;
  border-bottom: 2px solid var(--gold);
}
.series-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; color: var(--blue);
}
.series-count {
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.series-source {
  margin-left: auto;
  font-size: 11.5px; font-weight: 500;
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--cream-border);
  white-space: nowrap;
}
.series-source:hover { color: var(--blue); border-bottom-color: var(--gold); }
@media (max-width: 520px) { .series-source { display: none; } }
.track-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 4px 20px;
}
.track {
  display: flex; align-items: center; gap: .7rem;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14.5px; line-height: 1.4;
  color: var(--ink); text-decoration: none;
  transition: background .13s, color .13s;
}
.track:hover { background: var(--cream); color: var(--blue); }
/* The play marker is a pure-CSS triangle. With 325 tracks on the page an
   inline SVG per row cost ~1,000 DOM nodes and 65KB for no visual gain. */
.track-play {
  display: flex; align-items: center; justify-content: center;
  flex: none; width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cream);
  color: var(--gold);
  transition: background .13s, color .13s;
}
.track-play::before {
  content: '';
  width: 0; height: 0;
  margin-left: 2px;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.track-name { min-width: 0; }
.track:hover .track-play { background: var(--gold); color: #fff; }
.track.playing { background: var(--cream); color: var(--blue); font-weight: 600; }
.track.playing .track-play { background: var(--blue); color: var(--gold); }

/* Sticky player */
.player {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--blue-darkest);
  border-top: 2px solid var(--gold);
  box-shadow: 0 -6px 24px rgba(14,34,51,0.25);
}
.player .container {
  display: flex; align-items: center; gap: 1.25rem;
  padding-top: 12px; padding-bottom: 12px;
}
.player-now { min-width: 0; flex: 1; }
.player-label {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.player-now strong {
  display: block;
  color: var(--cream); font-size: 14.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.player audio { height: 38px; flex: 0 1 340px; }
.player-close {
  flex: none;
  background: none; border: none; cursor: pointer;
  color: rgba(248,244,236,0.6);
  font-size: 26px; line-height: 1; padding: 0 4px;
}
.player-close:hover { color: var(--gold); }
/* keep the last section clear of the player bar */
body.has-player .site-footer { padding-bottom: 6rem; }
@media (max-width: 680px) {
  .player .container { flex-wrap: wrap; gap: .6rem 1rem; }
  .player audio { flex: 1 1 100%; }
  .track-list { grid-template-columns: 1fr; }
}

/* ---------- STAFF (about.html) ----------
   staff_portrait() in the generator emits .staff-photo when a headshot file
   exists in src/assets/staff/, and falls back to .avatar initials when it
   doesn't. Both are sized identically so the grid never shifts. */
.staff-grid { gap: 24px; }
.staff-card { text-align: left; padding-top: 1.5rem; }
.staff-card h3 { margin-bottom: .15rem; }
.staff-card .when {
  margin-top: 0; margin-bottom: .7rem;
  text-transform: none; letter-spacing: .02em; font-size: 12.5px;
}
.avatar, .staff-photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin-bottom: .9rem;
}
.avatar {
  display: flex; align-items: center; justify-content: center;
  background: var(--blue); color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-size: 23px; letter-spacing: .03em;
}
.staff-photo { object-fit: cover; border: 2px solid var(--cream-border); }

/* Phone and email on each About-page bio card */
.staff-card-contact {
  margin-top: 1rem; padding-top: .85rem;
  border-top: 1px solid var(--cream-border);
  display: flex; flex-direction: column; gap: .35rem;
}
.staff-card-contact a {
  display: flex; align-items: center; gap: .5rem;
  font-size: 13.5px; color: var(--ink); text-decoration: none;
  /* personal addresses are long; wrap inside the card rather than overflow it */
  overflow-wrap: anywhere;
}
.staff-card-contact .icn { width: 14px; height: 14px; flex: none; color: var(--gold); }
.staff-card-contact a:hover { color: var(--blue); }
.staff-card-contact a:hover .icn { color: var(--blue); }

/* ---------- OUR STORY / PILLARS / TESTIMONIALS (about.html) ---------- */
.story-sign {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cream-border);
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--blue);
}
.pillar { text-align: left; }
.pillar .card-title-row { justify-content: flex-start; }
.pillar p { font-size: 14.5px; }
.reach {
  display: flex; align-items: baseline; gap: .6rem;
  margin-top: .9rem; padding-top: .8rem;
  border-top: 1px solid var(--cream-border);
}
.reach strong {
  font-family: 'Playfair Display', serif;
  font-size: 27px; line-height: 1; color: var(--gold);
}
.reach span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.reach-total {
  text-align: center; margin-top: 2.25rem;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--muted);
}
.reach-total strong {
  font-family: 'Playfair Display', serif;
  font-size: 21px; letter-spacing: 0; color: var(--blue);
  margin-left: .3rem; vertical-align: -2px;
}

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 24px;
}
.quote {
  margin: 0; padding: 2rem 1.75rem;
  background: var(--cream);
  border-radius: 12px;
  border-top: 3px solid var(--gold);
  display: flex; flex-direction: column;
}
.quote blockquote {
  font-family: 'Playfair Display', serif;
  font-size: 16.5px; line-height: 1.75; font-style: italic;
  color: #3a3a30; flex: 1;
}
.quote blockquote::before { content: '\201C'; color: var(--gold); font-size: 30px; line-height: 0; vertical-align: -8px; margin-right: 2px; }
.quote figcaption {
  margin-top: 1.1rem;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold);
}

/* ---------- HOMEPAGE WELCOME ---------- */
.welcome { max-width: 640px; text-align: center; }
.welcome h2 {
  font-family: 'Playfair Display', serif;
  color: var(--blue);
  font-size: clamp(24px, 4vw, 32px);
  margin: .4rem 0 1rem;
}
.welcome p { color: var(--muted); line-height: 1.85; }
.welcome .card-link { margin-top: 1.4rem; }

/* ---------- FACILITY + MAP (about.html) ---------- */
.facility-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem; align-items: start;
  max-width: 900px; margin: 2.5rem auto 0;
}
.facility-split p { color: var(--muted); line-height: 1.85; }
.facility-split p + p { margin-top: 1rem; }
.facility-split .btn { margin-top: 1.4rem; }
.map-embed {
  margin: 0; aspect-ratio: 4/3;
  border: 1px solid var(--cream-border);
  border-radius: 12px; overflow: hidden;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- CAMPAIGN RENDERINGS (timetobuild.html) ----------
   Shown uncropped for the same reason as posters: the architect's boards carry
   labels burned into the image. */
.rendering-photo {
  margin: 0;
  background: var(--cream);
  border: 1px solid var(--cream-border);
  border-radius: 12px; overflow: hidden;
}
.rendering-photo img { width: 100%; height: auto; display: block; }

/* ---------- CURRENT COURSE BAND ----------
   The one place a flyer still belongs: it is the course's own artwork, shown
   whole and at size rather than cropped into a card banner. */
.course-split {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 3rem; align-items: center;
}
.course-poster {
  border: 1px solid var(--cream-border);
  background: #fff; padding: 14px;
}
.course-poster img { height: auto; }
.course-copy h2 {
  font-family: 'Playfair Display', serif;
  color: var(--blue);
  font-size: clamp(26px, 3.6vw, 36px);
  line-height: 1.2;
  margin: .3rem 0 .2rem;
}
.course-kicker {
  font-family: 'Playfair Display', serif;
  font-style: italic; color: var(--gold);
  font-size: 18px; margin-bottom: 1rem;
}
.course-copy p { color: var(--muted); line-height: 1.8; }
.course-when {
  display: flex; align-items: center; gap: .55rem;
  margin-top: 1.1rem;
  font-size: 13px; font-weight: 600; color: var(--blue);
  letter-spacing: .04em;
}
.course-when .icn { width: 18px; height: 18px; color: var(--gold); flex: none; }
.course-ctas {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap; margin-top: 1.75rem;
}
.course-ctas .card-link { margin-top: 0; }
@media (max-width: 760px) {
  .course-split { grid-template-columns: 1fr; gap: 2rem; }
  .course-poster { max-width: 300px; margin: 0 auto; }
}

/* ---------- LOCATION BAND ---------- */
.location-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2.5rem; flex-wrap: wrap;
}
.location-band .eyebrow { display: flex; align-items: center; gap: .5rem; }
.location-band .eyebrow .icn { width: 16px; height: 16px; flex: none; }
.location-band h2 {
  font-family: 'Playfair Display', serif;
  color: var(--blue);
  font-size: clamp(24px, 3.4vw, 33px);
  margin: .1rem 0 .6rem;
}
.location-band p { color: var(--muted); max-width: 520px; line-height: 1.75; }
.location-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-quiet {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--cream-border);
}
.btn-quiet:hover { background: #fff; border-color: var(--gold); }

/* ---------- YOUTUBE BAND ---------- */
.youtube-band .section-head { margin-bottom: 2.5rem; }
.yt-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.yt-card {
  display: block; text-decoration: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 12px;
  padding: 2rem 1.75rem;
  transition: background .2s, border-color .2s;
}
.yt-card:hover { background: rgba(255,255,255,0.11); border-color: var(--gold); }
.yt-icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; margin-bottom: 1.1rem;
  border-radius: 50%;
  background: rgba(201,168,76,0.16);
  color: var(--gold);
}
.yt-icon .icn { width: 25px; height: 25px; }
/* The live card reads slightly hotter than the channel card */
.yt-live .yt-icon { background: rgba(201,168,76,0.24); color: var(--gold-light); }
.yt-live { border-color: rgba(201,168,76,0.45); }
.yt-card h3 {
  font-family: 'Playfair Display', serif;
  color: var(--cream); font-size: 21px; margin-bottom: .5rem;
}
.yt-card p { color: rgba(248,244,236,0.68); font-size: 14.5px; line-height: 1.7; }
.yt-go {
  display: inline-block; margin-top: 1.1rem;
  color: var(--gold); font-size: 13px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}

/* ---------- SHABBAT / MIKVAH / CALENDAR ---------- */
.notice {
  display: flex; align-items: center; justify-content: center;
  gap: .7rem; flex-wrap: wrap;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-border);
  padding: 1rem 24px;
  font-size: 14.5px; color: #55503f; text-align: center;
}
.notice .icn { width: 18px; height: 18px; color: var(--gold); flex: none; }
.mikvah-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px; max-width: 780px; margin: 2.5rem auto 0;
}
.mikvah-grid .contact-card p + p { margin-top: 1rem; }
.tag {
  display: inline-block; margin-left: .5rem;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 3px; padding: 1px 6px;
  vertical-align: 1px;
}
.schedule th:last-child, .schedule td:last-child { width: 55%; }

/* The week-at-a-glance table at the top of programs.html */
.schedule-week td:nth-child(2) {
  font-weight: 600; color: var(--blue); white-space: nowrap;
}
.schedule-week td:first-child { color: var(--muted); font-weight: 500; }
.schedule-week td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--cream-border); }
.schedule-week td a:hover { color: var(--blue); border-bottom-color: var(--gold); }
/* "Currently studying …" line on a class card */
.now-studying {
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--cream-border);
  font-size: 13.5px; color: var(--blue); font-weight: 600;
}
.now-studying span {
  display: block;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: .15rem;
}

.schedule-note {
  max-width: 760px; margin: 1.25rem auto 0;
  text-align: center; font-size: 13.5px; color: var(--muted);
}
@media (max-width: 560px) {
  .schedule-week td, .schedule-week th { padding: 10px 6px; font-size: 13.5px; }
  .schedule-week td:nth-child(2) { white-space: normal; }
}