/* 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; }

/* ---------- 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;
}

/* ---------- 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 ---------- */
.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 one line, used by cards that lead with an image */
.card-title-row {
  display: flex; align-items: center; justify-content: center;
  gap: .6rem; 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);
}

/* ---------- 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);
}
.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); }
.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 .icn { width: 15px; height: 15px; }
.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); }

/* ---------- 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%; }