/* Khal Ohr Levana: moonlight, night and the gold of their emblem.
   Their emblem, in polished gold on dark stone: the dome of an ark under a crown, two Torah finials beside it, a bar,
   and below it a square frame holding the crescent moon (Levana), drawn as two arcs; under it "קהל אור לבנה".
   They have no photographs of their building yet, so the look is built from the emblem and the night it stands for:
   moon-pearl pages, night blue-black for type, buttons, the deep bands and the footer, the emblem's gold for hairlines,
   figures and links. Spectral (light) for headings, Commissioner for text, Suez One for the Hebrew name (heavy and
   square, like the letters under their emblem), Noto Serif Hebrew for verses. The motif is the crescent: the
   emblem's two arcs, small, before section titles and at the start of the hairline under page titles.
   Square corners like the emblem's frame, hairlines rather than boxes. No eyebrows, sentence case, lining figures. */

:root {
  --page: #f2f1ec; --paper: #fbfaf7; --stone: #e6e5df; --honey: #d9d7ce;
  --ink: #141a26; --ink-2: #3a4150; --muted: #6b6f78;
  --sodalite: #7d5f2d; --sodalite-lt: #e4d6bb;
  --navy: #141a26; --navy-dk: #000; --gold: #b08d57; --gold-lt: #dcc496; --gold-text: #7d5f2d;
  --bronze: #b08d57; --bronze-dk: #7d5f2d; --bronze-lt: #e1d2b3;
  --night: #141a26; --night-text: #dfe1e6; --night-muted: #9da3b0;
  --velvet: #7d5f2d; --velvet-dk: #5f4720; --walnut: #7d5f2d;
  --line: rgba(20, 26, 38, .12); --line-2: rgba(20, 26, 38, .26); --rule: rgba(176, 141, 87, .8);
  /* Names the shared scripts and the giving form use. */
  --ivory: var(--page); --stone-2: var(--honey); --accent: var(--velvet); --accent-dk: var(--velvet-dk); --accent-lt: var(--bronze-lt);
  --serif: "Spectral", Georgia, serif;
  --text-serif: "Spectral", Georgia, serif;
  --sans: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hebrew: "Noto Serif Hebrew", "Times New Roman", serif;
  --hebrew-name: "Suez One", "Noto Serif Hebrew", serif;
  --max: 1240px; --gutter: clamp(20px, 5vw, 72px);
  --header-h: 84px; --radius: 0;
  --section: clamp(56px, 6.4vw, 100px);
  --ease: cubic-bezier(.22, .68, .2, 1);
  /* The crescent: the emblem's two arcs, as a small mark. */
  --crescent: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23b08d57' stroke-width='1.6'%3E%3Cpath d='M21 3 A17 17 0 0 0 21 37'/%3E%3Cpath d='M29 3 A16.5 16.5 0 0 0 29 37'/%3E%3C/svg%3E");
  --crescent-lt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23dcc496' stroke-width='1.6'%3E%3Cpath d='M21 3 A17 17 0 0 0 21 37'/%3E%3Cpath d='M29 3 A16.5 16.5 0 0 0 29 37'/%3E%3C/svg%3E");
}
@media (max-width: 760px) { :root { --header-h: 66px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--page); color: var(--ink-2);
  font: 400 1.0625rem/1.68 var(--sans); font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--bronze-dk); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; font-optical-sizing: auto; color: var(--ink); margin: 0 0 .5em; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.2vw, 3.9rem); line-height: 1.05; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.25; }
h4 { font-size: 1.08rem; line-height: 1.3; }
[lang="he"] { font-family: var(--hebrew); }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.lead { font-size: clamp(1.05rem, 1.25vw, 1.15rem); line-height: 1.6; color: var(--ink); }
/* "font" shorthands reset numeric variants, so force lining figures everywhere at the end. */
body * { font-variant-numeric: lining-nums; }

.container { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.band-stone { background: var(--stone); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: 0 1.7em;
  font: 500 .98rem/1.1 var(--sans); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--page); border: 1px solid var(--ink); border-radius: 0;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { background: var(--bronze-dk); border-color: var(--bronze-dk); color: #fff; }
.btn-accent { background: var(--bronze-dk); border-color: var(--bronze-dk); color: #fff; }
.btn-accent:hover { background: var(--ink); border-color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--page); border-color: var(--ink); }
.btn-small { min-height: 42px; padding: 0 1.25em; font-size: .92rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.link-arrow {
  display: inline-flex; align-items: baseline; gap: .5em; padding-bottom: 4px; color: var(--ink); text-decoration: none;
  font: 500 .98rem/1.3 var(--sans); border-bottom: 1px solid var(--bronze-lt); transition: border-color .25s, color .25s;
}
.link-arrow::after { content: "→"; color: var(--bronze); transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--bronze-dk); border-color: var(--bronze-dk); }
.link-arrow:hover::after { transform: translateX(4px); }
.links { display: flex; flex-wrap: wrap; gap: 14px 34px; align-items: baseline; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--bronze-dk); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* The one ornament: a hairline with a small ring at its centre, like the sanctuary seen from above. */
.ring-rule { display: flex; align-items: center; gap: 18px; color: var(--bronze); margin: 0; }
.ring-rule::before, .ring-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.ring-rule i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; background: radial-gradient(circle, currentColor 0 1.6px, transparent 2.2px); flex: none; }
.ring-rule.short { width: 180px; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Header ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; }
.skip:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251, 248, 242, .94); -webkit-backdrop-filter: saturate(1.1) blur(14px); backdrop-filter: saturate(1.1) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); flex: none; }
.brand img { height: 46px; width: auto; }
.brand-text { display: flex; flex-direction: column; }
.brand-1 { font: 400 1.32rem/1.05 var(--serif); color: var(--ink); white-space: nowrap; }
.brand-2 { font: 400 .8rem/1.2 var(--sans); color: var(--muted); letter-spacing: .02em; margin-top: 3px; }
.nav { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav a:not(.btn) { position: relative; padding: 8px 0; font: 500 .95rem/1 var(--sans); color: var(--ink-2); text-decoration: none; transition: color .2s; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--bronze); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--ink); }
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { margin-left: 6px; }
.nav-toggle { display: none; width: 46px; height: 46px; margin-right: -10px; border: 0; background: none; cursor: pointer; position: relative; color: var(--ink); }
.nav-toggle span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle span:first-child { top: 18px; }
.nav-toggle span:last-child { top: 27px; }
.nav-open .nav-toggle span:first-child { top: 22px; transform: rotate(45deg); }
.nav-open .nav-toggle span:last-child { top: 22px; transform: rotate(-45deg); }

@media (max-width: 1120px) {
  /* A backdrop filter would make the header the containing block for the fixed menu, so phones get a solid header. */
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--page); }
  .nav-toggle { display: block; }
  .nav {
    position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--gutter) 40px;
    background: var(--page); overflow-y: auto; border-top: 1px solid var(--line);
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .nav-open .nav { opacity: 1; visibility: visible; transform: none; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .nav a:not(.btn) { padding: 18px 0; font: 400 1.75rem/1.1 var(--serif); color: var(--ink); border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)::after { display: none; }
  .nav a:not(.btn)[aria-current="page"] { color: var(--bronze-dk); }
  .nav .btn { margin: 28px 0 0; min-height: 54px; font-size: 1rem; }
  .nav-open { overflow: hidden; }
}
@media (max-width: 420px) {
  .brand img { height: 40px; }
  .brand-1 { font-size: 1.14rem; }
  .brand-2 { font-size: .74rem; }
}

/* ---------- Page heads (sub-pages) ---------- */
.page-hero { padding-top: clamp(44px, 7vw, 104px); }
.page-hero-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 88px); align-items: end; padding-bottom: clamp(36px, 5vw, 68px); }
.page-hero h1 { margin: 0; }
.page-hero-lede { margin: 0 0 .35em; font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; color: var(--ink-2); max-width: 32em; }
.page-hero-photo { margin: 0; overflow: hidden; background: var(--honey); }
.page-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Inner pages: the heading and introduction beside the photo, shown whole at its own 3:2 shape, so the page's
   content starts on the first screen without cropping the picture into a strip. */
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 88px); align-items: end; padding-bottom: clamp(36px, 4.5vw, 64px); }
.page-hero-text h1 { margin: 0 0 .45em; }
.page-hero-grid .page-hero-photo { aspect-ratio: 3 / 2; }
.page-hero:has(.page-hero-grid) { padding-top: clamp(24px, 3.5vw, 56px); }
.page-hero-grid { padding-bottom: clamp(28px, 3vw, 44px); }
/* The page's own content follows straight on, not after a full section gap. */
.page-hero:has(.page-hero-grid) + * { padding-top: clamp(20px, 2.5vw, 40px) !important; }
/* Text-only headers (Events, Contact, Gallery, Privacy): heading, a hairline, and the content straight after. */
.page-hero.plain { padding-top: clamp(24px, 3.5vw, 56px); }
.page-hero.plain .page-hero-head { padding-bottom: clamp(24px, 3vw, 40px); }
.page-hero.plain + * { padding-top: clamp(28px, 3vw, 48px) !important; }
@media (max-width: 760px) { .page-hero-grid { grid-template-columns: 1fr; gap: 28px; } }
.page-hero.plain { padding-bottom: 0; }
.page-hero.plain .page-hero-head { background: linear-gradient(var(--line), var(--line)) center bottom / calc(100% - 2 * var(--gutter)) 1px no-repeat; }
.jump { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.jump a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--bronze-lt); padding-bottom: 3px; font-weight: 500; font-size: .95rem; }
.jump a:hover { border-color: var(--bronze-dk); color: var(--bronze-dk); }
@media (max-width: 860px) {
  .page-hero-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 16px; }
}

/* ---------- Home: the name, then the sanctuary ---------- */
.hero { padding-top: clamp(32px, 4.5vw, 72px); }
.hero-head { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: end; padding-bottom: clamp(36px, 5vw, 72px); }
.hero h1 { margin: 0; font-size: clamp(2.5rem, 4.6vw, 4.5rem); line-height: 1.02; letter-spacing: -.012em; }
.hero h1 span { display: block; }
.hero-lede { margin: 0 0 .6em; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6; max-width: 26em; }
/* Sized from the screen's height so this week's times (the strip below) are always on the first screen. */
.hero-photo { margin: 0; position: relative; height: clamp(200px, calc(100svh - 500px), 560px); max-height: 38vw; min-height: 200px; overflow: hidden; background: var(--honey); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.hs { padding: 26px 24px 28px; border-left: 1px solid var(--line); min-width: 0; }
.hs:first-child { border-left: 0; padding-left: 0; }
.hs span { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.hs strong { display: block; font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1.15 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.hs a { color: inherit; text-decoration: none; }
.hs a:hover strong { color: var(--bronze-dk); }
@media (max-width: 860px) {
  .hero-head { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 18px; }
  .hero-photo { height: auto; aspect-ratio: 4 / 3; max-height: none; min-height: 0; }
  .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs { padding: 20px 0 22px 18px; }
  .hs:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hs:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- This week's times ---------- */
.week-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.week-head h2 { margin: 0; }
.week-sub { margin: .5em 0 0; color: var(--ink-2); }
.week-stale { display: block; margin-top: .4em; color: var(--bronze-dk); font-size: .95rem; }
.week-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.week-col { min-width: 0; }
.week-col h3 { margin: 0 0 .7em; padding-bottom: .55em; border-bottom: 1px solid var(--ink); }
.week-col h4 { margin: 1.6em 0 .35em; font-size: 1.05rem; color: var(--bronze-dk); font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.week-col h4:first-of-type { margin-top: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: .72em 0; border-bottom: 1px solid var(--line); }
.rows .what { color: var(--ink); min-width: 0; }
.rows .with { display: block; color: var(--muted); font-size: .9rem; }
.rows .time { font: 400 1.18rem/1.2 var(--serif); color: var(--ink); white-space: nowrap; text-align: right; }
.rows li.hl .time { color: var(--bronze-dk); }
.rows li.hl .what { font-weight: 500; }
.rows .time.long { white-space: normal; font-family: var(--sans); font-size: .95rem; line-height: 1.45; max-width: 60%; }
.week-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 40px; margin-top: clamp(32px, 4vw, 52px); align-items: baseline; }
.week-notes { list-style: none; margin: 0; padding: 0; color: var(--ink-2); max-width: 46em; }
.week-notes li + li { margin-top: .4em; }
.week-empty { padding: 28px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.week-empty p { margin: 0; }
.sponsor-lines { margin-top: clamp(28px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--rule); }
.sponsor-lines p { margin: 0 0 .3em; color: var(--ink); font-family: var(--serif); font-size: 1.2rem; }
.sponsor-lines small { display: block; color: var(--muted); font-family: var(--sans); font-size: .92rem; }
@media (max-width: 960px) { .week-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }
@media (max-width: 600px) { .week-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Editorial rows: text beside a photograph ---------- */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 120px); align-items: center; }
.split.flip > :first-child { order: 2; }
.split-photo { margin: 0; overflow: hidden; background: var(--honey); }
.split-photo img { width: 100%; height: 100%; object-fit: cover; }
.split-photo.tall { aspect-ratio: 4 / 5; }
.split-photo.wide { aspect-ratio: 3 / 2; }
.split-text { max-width: 36em; }
.split-text h2 { margin-bottom: .55em; }
.split-text .links { margin-top: 2rem; }
.caption { margin-top: 12px; font-size: .88rem; color: var(--muted); }
@media (max-width: 860px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split.flip > :first-child { order: 0; }
}

/* ---------- Full-width photograph ---------- */
.photo-band { position: relative; height: clamp(300px, 56vw, 820px); overflow: hidden; background: var(--honey); }
.photo-band .pb-media { position: absolute; inset: -8% 0; background: var(--band-img) center 50% / cover no-repeat; transform: translate3d(0, var(--py, 0), 0); will-change: transform; }

/* ---------- The rabbi ---------- */
.rabbi-home { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 120px); align-items: start; }
.rabbi-home .portrait { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--honey); }
.rabbi-home .portrait img { width: 100%; height: 100%; object-fit: cover; }
.role { margin: -.35em 0 1.4em; color: var(--muted); font-size: 1rem; }
.from-rabbi { margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--rule); }
.from-rabbi h3 { margin-bottom: .2em; }
.from-rabbi .date { color: var(--muted); font-size: .92rem; margin-bottom: 1em; }
@media (max-width: 860px) {
  .rabbi-home { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rabbi-home .portrait { max-width: 420px; }
}

/* ---------- Learning ---------- */
.class-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.class-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 2px 28px; padding: 1.05em 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.c-name { grid-column: 1; font: 400 1.3rem/1.25 var(--serif); color: var(--ink); }
.c-with { grid-column: 1; color: var(--muted); font-size: .95rem; }
.c-with:empty { display: none; }
.c-when { grid-column: 2; grid-row: 1; color: var(--ink); text-align: right; font-weight: 500; max-width: 15em; }
@media (max-width: 560px) {
  .class-list li { grid-template-columns: minmax(0, 1fr); }
  .c-when { grid-column: 1; grid-row: auto; text-align: left; color: var(--bronze-dk); max-width: none; }
}

/* ---------- Events (home and events page) ---------- */
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 48px); }
.section-head h2 { margin: 0; }
.event-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.event-list > li { border-bottom: 1px solid var(--line); }
.event-item { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 22px 0; color: inherit; text-decoration: none; }
.ei-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--rule); text-align: center; line-height: 1; }
.ei-date b { font: 400 1.9rem/1 var(--serif); color: var(--ink); }
.ei-date small { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.ei-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ei-title { font: 400 clamp(1.2rem, 1.6vw, 1.45rem)/1.2 var(--serif); color: var(--ink); transition: color .2s; }
.ei-meta { color: var(--muted); font-size: .95rem; }
.ei-img { width: 168px; aspect-ratio: 3 / 2; object-fit: cover; }
.event-item:hover .ei-title { color: var(--bronze-dk); }
.event-item.is-featured .ei-date { border-color: var(--bronze); background: var(--stone); }
@media (max-width: 680px) {
  .event-item { grid-template-columns: 64px minmax(0, 1fr); gap: 18px; }
  .ei-date { width: 60px; height: 60px; }
  .ei-date b { font-size: 1.45rem; }
  .ei-img { display: none; }
}

/* ---------- The one dark band: giving, beside the bronze Tree of Life doors ---------- */
.night { background: var(--night); color: var(--night-text); }
.night h2, .night h3 { color: #f6efe3; }
.night a { color: var(--honey); }
.night .lead { color: #f6efe3; }
.give-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 120px); align-items: center; }
.give-photo { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.give-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.give-text p { color: var(--night-text); }
.night .btn { background: var(--honey); border-color: var(--honey); color: var(--ink); }
.night .btn:hover { background: #fff; border-color: #fff; color: var(--ink); }
.night .btn-outline { background: transparent; color: var(--honey); border-color: rgba(231, 214, 184, .55); }
.night .btn-outline:hover { background: rgba(231, 214, 184, .12); color: #fff; border-color: var(--honey); }
.ways { list-style: none; margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; border-top: 1px solid rgba(231, 214, 184, .35); }
.ways li { border-bottom: 1px solid rgba(231, 214, 184, .18); }
.ways a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding: 18px 0; text-decoration: none; color: var(--night-text); }
.ways strong { font: 400 1.4rem/1.2 var(--serif); color: #f6efe3; font-weight: 400; transition: color .2s; }
.ways span { grid-column: 1; color: var(--night-muted); font-size: .95rem; }
.ways a::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--bronze-lt); transition: transform .3s var(--ease); }
.ways a:hover strong { color: var(--bronze-lt); }
.ways a:hover::after { transform: translateX(4px); }
@media (max-width: 560px) { .night .btn-row .btn { flex: 1 1 100%; } }
@media (max-width: 860px) {
  .give-grid { grid-template-columns: minmax(0, 1fr); }
  .give-photo { aspect-ratio: 3 / 2; }
}

/* ---------- Photo strip (community photos) ---------- */
.photo-strip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 6px; scrollbar-width: none; }
.photo-strip::-webkit-scrollbar { display: none; }
.photo-strip a { flex: none; height: clamp(220px, 26vw, 360px); aspect-ratio: var(--r, 1.4); scroll-snap-align: start; overflow: hidden; background: var(--honey); }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo-strip a:hover img { transform: scale(1.03); }
.strip-controls { display: flex; gap: 10px; align-items: center; }
.strip-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.strip-btn:hover:not(:disabled) { border-color: var(--ink); }
.strip-btn:disabled { opacity: .35; cursor: default; }
.strip-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.strip-controls.no-scroll .strip-btn { display: none; }
.strip-controls .link-arrow { margin-left: 14px; }

/* ---------- Visit ---------- */
.detail-rows { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.detail-rows li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 4px 24px; padding: .95em 0; border-bottom: 1px solid var(--line); }
.detail-rows li > span:first-child { color: var(--muted); }
.detail-rows .val { color: var(--ink); overflow-wrap: anywhere; }
.detail-rows .val a { color: var(--ink); text-decoration-color: var(--bronze-lt); }
.detail-rows .val a:hover { color: var(--bronze-dk); }
.detail-rows small { display: block; color: var(--muted); font-size: .9rem; }
@media (max-width: 560px) { .detail-rows li { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Empty and loading states ---------- */
.empty-state { padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.empty-title { font: 400 1.6rem/1.2 var(--serif); color: var(--ink); margin: 0 0 .3em; }
.loading { color: var(--muted); }

/* ---------- Chips and toggles (events, gallery) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 38px; padding: 0 16px; border: 1px solid var(--line-2); background: none; color: var(--ink); font: 500 .9rem var(--sans); cursor: pointer; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--page); border-color: var(--ink); }
.chip .count { font-size: .8rem; opacity: .65; }
.segmented { display: inline-flex; border: 1px solid var(--ink); }
.segmented button { min-height: 42px; padding: 0 18px; border: 0; background: none; color: var(--ink); font: 500 .92rem var(--sans); cursor: pointer; }
.segmented button + button { border-left: 1px solid var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.switch { display: inline-flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink); cursor: pointer; }
.switch input { width: 18px; height: 18px; accent-color: var(--bronze-dk); }

/* ---------- Footer ---------- */
.site-footer { background: var(--stone); color: var(--ink-2); padding: clamp(64px, 8vw, 112px) 0 0; }
.footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding-bottom: clamp(40px, 5vw, 64px); }
.footer-brand img { height: 74px; width: auto; }
.footer-name { margin: 0; font: 400 clamp(1.4rem, 2vw, 1.8rem)/1.15 var(--serif); color: var(--ink); }
.footer-place { margin: 0; color: var(--muted); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding: clamp(32px, 4vw, 48px) 0; border-top: 1px solid var(--rule); }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.footer-h { margin: 0 0 4px; font: 400 1.2rem/1.2 var(--serif); color: var(--ink); }
.footer-col a { color: var(--ink-2); text-decoration: none; overflow-wrap: anywhere; width: fit-content; }
.footer-col a:hover { color: var(--bronze-dk); text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 0 28px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }
.footer-base p { margin: 0; }
.footer-base a { color: inherit; }
@media (max-width: 860px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 340px) { .footer-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Prose (about, rabbi, privacy) ---------- */
.prose { max-width: 40em; }
.prose h2 { margin-top: 1.4em; font-size: clamp(1.7rem, 2.6vw, 2.2rem); }
.prose h2:first-child { margin-top: 0; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
details.more { margin-top: 1.4rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
details.more summary { list-style: none; cursor: pointer; padding: 16px 0; color: var(--ink); font-weight: 500; display: flex; justify-content: space-between; gap: 16px; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::after { content: "+"; font: 400 1.4rem/1 var(--serif); color: var(--bronze); }
details.more[open] summary::after { content: "–"; }
details.more .more-body { padding: 4px 0 18px; }
blockquote.pull { margin: 2rem 0; padding: 0 0 0 24px; border-left: 1px solid var(--bronze); font: 400 clamp(1.35rem, 2vw, 1.7rem)/1.4 var(--serif); color: var(--ink); }

/* =====================================================================
   Khal Ohr Levana: moonlight, night and the gold of their emblem
   ===================================================================== */
h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.012em; color: var(--ink); }
h1 { font-weight: 300; letter-spacing: -.02em; }
h3 { font-weight: 400; }
h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
body { font-family: var(--sans); font-size: 1.02rem; color: var(--ink-2); }
.lead { font-family: var(--sans); font-weight: 400; font-size: clamp(1.06rem, 1.25vw, 1.16rem); line-height: 1.64; color: var(--ink-2); }
a { color: var(--gold-text); text-decoration-color: var(--bronze-lt); }
a:hover { color: var(--ink); }
:focus-visible { outline-color: var(--gold-text); }
[lang="he"] { font-family: var(--hebrew); }
.he-name { font-family: var(--hebrew-name); font-weight: 400; }

/* Buttons: night, square like the emblem's frame; gold on hover. */
.btn { border-radius: 0; background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; letter-spacing: .01em; }
.btn:hover { background: var(--gold-text); border-color: var(--gold-text); color: #fff; }
.btn-accent { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: inset 0 -2px 0 var(--gold); }
.btn-accent:hover { background: var(--gold-text); border-color: var(--gold-text); box-shadow: none; }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn-light { background: var(--gold-lt); border-color: var(--gold-lt); color: var(--ink); }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
.btn-outline-light, .btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(220, 196, 150, .5); }
.btn-outline-light:hover, .btn-ghost-light:hover { background: rgba(255, 255, 255, .06); border-color: var(--gold-lt); color: #fff; }
.btn-danger { background: #a3262b; border-color: #a3262b; color: #fff; }
.link-arrow { border-bottom-color: var(--gold); }
.link-arrow::after { color: var(--gold); }
.link-arrow:hover { color: var(--gold-text); border-color: var(--gold-text); }
.jump a { border-bottom-color: var(--gold); }

/* The crescent rule: a gold hairline that begins with the emblem's crescent (under page titles, across bands). */
.halo-rule { position: relative; display: block; height: 22px; margin: 0; background: var(--crescent) left center / 22px 22px no-repeat; }
.halo-rule::after { content: ""; position: absolute; left: 34px; right: 0; top: 50%; height: 1px; background: var(--gold); }
.halo-rule i { display: none; }
.halo-rule.short { width: 224px; }
.deep .halo-rule, .hero .halo-rule { background-image: var(--crescent-lt); }
.deep .halo-rule::after, .hero .halo-rule::after { background: rgba(220, 196, 150, .45); }
.ring-rule { display: none; }
/* A line of Hebrew between two gold hairlines. */
.verse-band { display: grid; grid-template-columns: minmax(24px, 1fr) auto minmax(24px, 1fr); align-items: center; gap: clamp(14px, 2vw, 28px); margin: 0; }
.verse-band::before, .verse-band::after { content: ""; height: 1px; background: var(--gold); }
.verse-band span { font: 400 clamp(1.05rem, 1.5vw, 1.3rem)/1.3 var(--hebrew-name); color: var(--ink); white-space: nowrap; }
.deep .verse-band span, .hero .verse-band span { color: var(--gold-lt); }
.deep .verse-band::before, .deep .verse-band::after { background: rgba(220, 196, 150, .45); }
@media (max-width: 520px) { .verse-band span { white-space: normal; text-align: center; } }
/* Section titles: the crescent before them. */
.ring-title { display: flex; align-items: center; gap: 16px; }
.ring-title::before { content: ""; width: .8em; height: .8em; flex: none; background: var(--crescent) center / contain no-repeat; transform: translateY(.04em); }
.deep .ring-title::before { background-image: var(--crescent-lt); }

/* Photographs: plain and whole, a caption under them. */
.split-photo, .page-hero-photo, .give-photo, .tl-photo, .hero-photo { position: relative; }
.split-photo.square { aspect-ratio: 1 / 1; }
.split-photo .caption { position: absolute; left: 0; right: 0; top: 100%; }
.split-photo:has(.caption) { overflow: visible; margin-bottom: 2.4em; }
.caption { font-size: .86rem; color: var(--muted); padding-top: .7em; }

/* Header: moon pearl, the emblem in night beside the name and the Hebrew name */
.site-header, .site-header.scrolled { background: rgba(242, 241, 236, .96); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); gap: 14px; }
.brand img { height: 50px; width: auto; }
.brand-1 { font: 400 1.42rem/1 var(--serif); color: var(--ink); letter-spacing: -.005em; }
.brand-2 { font: 400 .95rem/1.1 var(--hebrew-name); color: var(--gold-text); margin-top: 5px; letter-spacing: 0; }
.nav a:not(.btn) { color: var(--ink-2); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--ink); }
.nav a:not(.btn)::after { background: var(--gold); }
.nav .btn { background: var(--ink); border-color: var(--ink); color: #fff; }
.nav .btn:hover { background: var(--gold-text); border-color: var(--gold-text); }
.nav-toggle { color: var(--ink); }
.skip { background: var(--ink); color: #fff; }
@media (max-width: 1120px) {
  .nav { background: var(--page); border-top-color: var(--line); }
  .nav a:not(.btn) { font: 300 1.8rem/1.1 var(--serif); color: var(--ink); border-bottom-color: var(--line); }
  .nav a:not(.btn)[aria-current="page"] { color: var(--gold-text); }
}
@media (max-width: 420px) { .brand img { height: 40px; } .brand-1 { font-size: 1.2rem; } .brand-2 { font-size: .85rem; } }

/* ---------- Home: the night, the name and this Shabbat beside their emblem in gold ---------- */
.hero { padding: 0; background: var(--night); color: var(--night-text); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 80px); align-items: center; min-height: clamp(440px, calc(100svh - var(--header-h) - 150px), 680px); padding-block: clamp(36px, 4.4vw, 64px); }
.hero-text { min-width: 0; }
.hero-he { margin: 0 0 .3em; font: 400 clamp(1.5rem, 2.4vw, 2.2rem)/1.2 var(--hebrew-name); color: var(--gold-lt); }
.hero h1 { margin: 0 0 .35em; font-size: clamp(2.9rem, 6vw, 5.8rem); line-height: .98; color: #fff; font-weight: 300; }
.hero-lede { margin: 0 0 clamp(22px, 2.6vw, 34px); color: var(--night-text); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.6; max-width: 31em; }
.hero .halo-rule { margin-bottom: clamp(16px, 1.8vw, 24px); max-width: 560px; }
.hero-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.hero-strip .hs { padding: 4px 16px 4px 0; margin: 0; border: 0; }
.hero-strip .hs + .hs { padding-left: 16px; border-left: 1px solid rgba(220, 196, 150, .22); }
.hero-strip dt { color: var(--night-muted); font-size: .84rem; margin-bottom: 4px; }
.hero-strip dd { margin: 0; font: 300 clamp(1.15rem, 1.5vw, 1.45rem)/1.15 var(--serif); color: #fff; }
.hero-links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: clamp(20px, 2.2vw, 30px); }
.hero-links .link-arrow { color: #fff; border-bottom-color: rgba(220, 196, 150, .5); }
.hero-links .link-arrow::after { color: var(--gold-lt); }
.hero-links .link-arrow:hover { color: var(--gold-lt); border-color: var(--gold-lt); }
/* Their emblem, in gold on dark stone, shown whole as a square; its edges fade into the night. */
.hero-photo { margin: 0; justify-self: end; width: min(100%, calc(100svh - var(--header-h) - 150px), 600px); min-width: 280px; aspect-ratio: 1 / 1; height: auto; max-height: none; background: transparent; overflow: visible; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 8px; padding-top: 28px; }
  .hero-photo { order: -1; justify-self: center; width: min(78vw, 380px); min-width: 0; margin: -10px 0 -18px; }
}
@media (max-width: 640px) {
  .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .hero-strip .hs:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-photo { width: min(66vw, 300px); }
}
.hero + .section { padding-top: clamp(40px, 4.4vw, 64px); }

/* A day at the shul: the hours down a gold line, on night */
.day-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.day-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(220, 196, 150, .45); }
.day-list li { display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 4px 24px; padding: 1.05em 0; border-bottom: 1px solid rgba(220, 196, 150, .16); align-items: baseline; }
.day-list b { font: 300 clamp(1.35rem, 1.9vw, 1.7rem)/1.15 var(--serif); color: var(--gold-lt); }
.day-list strong { display: block; font: 400 1.22rem/1.25 var(--serif); color: #fff; }
.day-list span { color: var(--night-muted); font-size: .95rem; }
@media (max-width: 860px) { .day-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 420px) { .day-list li { grid-template-columns: minmax(0, 1fr); } }

/* The emblem, explained: the drawing large in gold beside the words */
.emblem-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.emblem-figure { margin: 0; display: grid; place-items: center; padding: clamp(12px, 2vw, 28px); }
.emblem-figure img { width: min(100%, 230px); height: auto; }
.emblem-parts { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.emblem-parts li { display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 4px 24px; padding: .9em 0; border-bottom: 1px solid var(--line); }
.emblem-parts b { font: 400 1.18rem/1.3 var(--serif); color: var(--ink); }
.deep .emblem-parts { border-top-color: rgba(220, 196, 150, .45); }
.deep .emblem-parts li { border-bottom-color: rgba(220, 196, 150, .16); }
.deep .emblem-parts b { color: var(--gold-lt); }
@media (max-width: 860px) { .emblem-grid { grid-template-columns: minmax(0, 1fr); } .emblem-figure img { width: 200px; } }
@media (max-width: 520px) { .emblem-parts li { grid-template-columns: minmax(0, 1fr); } }

/* Rows of times, events and classes: Spectral figures */
.rows .time, .c-name, .ei-title, .ways strong, .empty-title, .footer-h, .footer-name, .sponsor-lines p { font-family: var(--serif); }
.rows .time { font-weight: 400; color: var(--ink); }
.rows li.hl .time { color: var(--gold-text); }
.week-col h3 { border-bottom: 1px solid var(--gold); padding-bottom: .6em; }
.week-col h4 { color: var(--gold-text); font-family: var(--sans); }
.week-empty, .class-list, .event-list, .detail-rows { border-top-color: var(--ink); }
.rows .time.long { font-family: var(--sans); font-size: .92rem; color: var(--muted); }

/* Bands */
.band-plaster, .band-stone { background: var(--stone); }
.deep { position: relative; background: var(--night); color: var(--night-text); }
.deep h2, .deep h3 { color: #fff; }
.deep .lead { color: var(--night-text); }
.deep p { color: var(--night-text); }
.deep a:not(.btn) { color: var(--gold-lt); }

.milestones { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--ink); }
.milestones li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 20px; padding: 1em 0; border-bottom: 1px solid var(--line); }
.milestones b { font: 400 1.25rem/1.3 var(--serif); color: var(--gold-text); }
.milestones span { color: var(--ink-2); }
@media (max-width: 520px) { .milestones li { grid-template-columns: minmax(0, 1fr); } }

.ark-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ark-grid figure { margin: 0; aspect-ratio: 1 / 1; max-width: 560px; }
.ark-grid figure img { width: 100%; height: 100%; object-fit: cover; }
.ark-he { font: 400 clamp(1.25rem, 1.8vw, 1.6rem)/1.6 var(--hebrew); color: var(--gold-lt); margin: 1em 0 .4em; }
@media (max-width: 960px) { .ark-grid { grid-template-columns: minmax(0, 1fr); } }

/* Prices in rows */
.price-rows { list-style: none; margin: 1.4rem 0 .6rem; padding: 0; border-top: 1px solid var(--ink); }
.price-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: .8em 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.price-rows li span:last-child { font: 400 1.05rem/1.2 var(--serif); color: var(--gold-text); white-space: nowrap; }
.small { font-size: .9rem; }

/* Giving */
.give-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ways { border-top-color: var(--ink); }
.ways li { border-bottom-color: var(--line); }
.ways a::after { color: var(--gold); }
.ways a:hover strong { color: var(--gold-text); }
@media (max-width: 860px) { .give-grid { grid-template-columns: minmax(0, 1fr); } }

/* People */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: clamp(24px, 3vw, 40px) clamp(18px, 2.4vw, 32px); list-style: none; margin: 0; padding: 0; }
.people figure { margin: 0 0 14px; aspect-ratio: 1 / 1; background: var(--honey); overflow: hidden; }
.people img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.people h3 { margin: 0; font-size: 1.3rem; }
.people p { margin: .2em 0 0; color: var(--muted); font-size: .95rem; }
.rabbis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 80px); }
.rabbi-card { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; }
.rabbi-card figure { margin: 0; aspect-ratio: 4 / 5; background: var(--honey); overflow: hidden; }
.rabbi-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.rabbi-card h3 { margin: 0 0 .3em; font-size: clamp(1.45rem, 2vw, 1.8rem); }
.rabbi-card p { font-size: .98rem; }
@media (max-width: 960px) { .rabbis { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .rabbi-card { grid-template-columns: minmax(0, 1fr); } .rabbi-card figure { max-width: 300px; } }

.timeline { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.tl-item { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4.6fr) minmax(0, 4.4fr); gap: clamp(20px, 3.5vw, 56px); padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--line); align-items: start; }
.tl-year { margin: 0; font: 300 clamp(1.6rem, 2.4vw, 2.2rem)/1.1 var(--serif); color: var(--gold-text); }
.tl-body p { margin: 0 0 .8em; color: var(--ink-2); font-size: 1.03rem; }
.tl-photo { margin: 0; background: var(--honey); }
@media (max-width: 860px) { .tl-item { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* Events: the date in a square framed like the emblem, a gold hairline inside */
.ei-date { border-radius: 0; border: 1px solid var(--ink); outline: 1px solid var(--gold); outline-offset: -5px; background: var(--paper); width: 76px; height: 76px; box-shadow: none; }
.ei-date b { color: var(--ink); font-family: var(--serif); font-weight: 300; }
.ei-date small { color: var(--gold-text); }
.event-item.is-featured .ei-date { background: var(--ink); outline-color: var(--gold-lt); }
.event-item.is-featured .ei-date b, .event-item.is-featured .ei-date small { color: #fff; }
@media (max-width: 680px) { .ei-date { width: 58px; height: 58px; } }

/* Doors: plain columns of words */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.door { padding: 26px clamp(18px, 2.4vw, 36px) 30px 0; display: flex; flex-direction: column; gap: 8px; }
.door + .door { padding-left: clamp(18px, 2.4vw, 36px); border-left: 1px solid var(--line); }
.door h3 { margin: 0; }
.door p { margin: 0; color: var(--ink-2); }
.door .link-arrow { margin-top: auto; padding-top: 10px; align-self: flex-start; }
.doors.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .doors.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .doors.four .door:nth-child(3) { padding-left: 0; border-left: 0; } .doors.four .door:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 860px) { .doors:not(.four) { grid-template-columns: minmax(0, 1fr); } .doors:not(.four) .door, .doors:not(.four) .door + .door { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); } .doors:not(.four) .door:first-child { border-top: 0; } }
@media (max-width: 560px) { .doors.four { grid-template-columns: minmax(0, 1fr); } .doors.four .door, .doors.four .door + .door { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); } .doors.four .door:first-child { border-top: 0; } }

/* Visit: details beside the map */
.visit-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: stretch; }
.map-frame { width: 100%; height: 100%; min-height: 360px; border: 0; filter: grayscale(.55) contrast(1.02); }
@media (max-width: 860px) { .visit-grid { grid-template-columns: minmax(0, 1fr); } .map-frame { min-height: 300px; } }

/* Page heads: the title, the crescent rule under it, then the content */
.page-hero.plain .page-hero-head { background: none; padding-bottom: clamp(18px, 2.4vw, 30px); }
.page-hero.plain .halo-rule { margin-bottom: 0; }
.page-hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.2rem); letter-spacing: -.02em; line-height: 1.02; }
.page-hero-grid .page-hero-text .halo-rule { margin-top: 1.4rem; width: min(260px, 60%); }

/* Footer: night, the emblem in gold, the name in Hebrew */
.site-footer { position: relative; background: var(--night); color: var(--night-text); }
.footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px 28px; text-align: left; }
.footer-emblem { width: 70px; height: auto; }
.footer-name { font-weight: 300; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); margin: 0; }
.footer-place { color: var(--night-muted); margin: .2em 0 0; }
.footer-verse { margin: 0; font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.3 var(--hebrew-name); color: var(--gold-lt); }
@media (max-width: 760px) { .footer-brand { grid-template-columns: auto minmax(0, 1fr); } .footer-verse { grid-column: 1 / -1; text-align: left; } .footer-emblem { width: 56px; } }
.footer-cols { border-top: 1px solid rgba(220, 196, 150, .35); padding-top: clamp(40px, 4.4vw, 56px); }
.footer-h { color: var(--gold-lt); }
.footer-col a { color: var(--night-text); }
.footer-col a:hover { color: #fff; }
.footer-base { border-top-color: rgba(255, 255, 255, .12); color: var(--night-muted); }
.footer-base p { max-width: 62em; }

/* Helpers the mikveh, sponsor and member pages use */
.section-sub { font-size: 1.05rem; color: var(--muted); margin: 0; }
.detail-list { list-style: none; margin: 1.4rem 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.detail-list li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 20px; padding: .8em 0; border-bottom: 1px solid var(--line); }
.detail-list li > span { color: var(--muted); }
.detail-list a, .detail-list p { color: var(--ink); margin: 0; }
@media (max-width: 560px) { .detail-list li { grid-template-columns: minmax(0, 1fr); } }
.mk-head .page-hero-head, .page-hero-head.pb-hero { align-items: start; }
.footer-col a[href^="mailto"] { overflow-wrap: normal; word-break: keep-all; }
.give-text p { color: var(--ink-2); }
.ways a { color: var(--ink-2); }
.ways strong { color: var(--ink); }
.ways span { color: var(--muted); }
.ways.ways-dark { border-top-color: rgba(220, 196, 150, .45); margin-top: 0; }
.ways.ways-dark li { border-bottom-color: rgba(220, 196, 150, .16); }
.ways.ways-dark a { color: var(--night-text); }
.ways.ways-dark strong { color: #fff; }
.ways.ways-dark span { color: var(--night-muted); }
.ways.ways-dark a::after { color: var(--gold-lt); }
.ways.ways-dark a:hover strong { color: var(--gold-lt); }
/* Hebrew under or over an English name starts at the same left edge. */
.brand-2, .hero-he { text-align: left; }
.page-hero-grid .page-hero-photo.square { aspect-ratio: 1 / 1; max-width: 460px; justify-self: end; width: 100%; }