/* Congregation Magen David of Manhattan, 177 Sullivan Street (the Sonny and Al Gindi Community Center): Sullivan Street.
   A Syrian Sephardic shul downtown, in a dark-brick building with a steel awning, a walnut-panelled sanctuary with a
   brass ring of light and bright stained glass, and a logo of a star drawn in broken strokes, one of them slate blue.
   Pale plaster pages, charcoal ink, the logo's slate blue for buttons and lines, walnut from the ark wall for times
   and prices, a charcoal band like the awning. Hedvig Letters Serif for headings, Hanken Grotesk for text, Frank Ruhl
   Libre for Hebrew. The motif is the broken line: a hairline that breaks and steps, as the strokes of their star do,
   under page titles; the star itself, small, before section titles. Rounded buttons, square photos shown whole,
   hairlines rather than boxes. No eyebrows above headings, sentence case, lining figures. */

:root {
  --page: #f3f2ef; --paper: #fbfaf8; --stone: #e7e5e0; --honey: #dcd9d2;
  --ink: #1f2326; --ink-2: #3b4044; --muted: #6a6f74;
  --slate: #2f4a5e; --slate-dk: #22384a; --slate-lt: #c9d6df; --steel: #5f7f97; --steel-lt: #9fb6c7;
  --walnut: #6e4630; --walnut-lt: #b88f72; --brass: #b4925a;
  --sodalite: var(--slate); --sodalite-lt: var(--slate-lt);
  --navy: var(--ink); --navy-dk: #15181a; --gold: var(--steel); --gold-lt: var(--steel-lt); --gold-text: var(--slate);
  --bronze: var(--slate); --bronze-dk: var(--slate-dk); --bronze-lt: var(--slate-lt);
  --night: #1d2124; --night-text: #e4e6e7; --night-muted: #a5abaf;
  --velvet: var(--slate); --velvet-dk: var(--slate-dk); --brick: var(--slate); --brick-dk: var(--slate-dk); --glass: var(--steel);
  --line: rgba(31, 35, 38, .12); --line-2: rgba(31, 35, 38, .26); --rule: var(--steel);
  /* Names the shared scripts and the giving form use. */
  --ivory: var(--page); --stone-2: var(--honey); --accent: var(--slate); --accent-dk: var(--slate-dk); --accent-lt: var(--slate-lt);
  --serif: "Hedvig Letters Serif", Georgia, serif;
  --text-serif: "Hedvig Letters Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hebrew: "Frank Ruhl Libre", "Times New Roman", serif;
  --max: 1240px; --gutter: clamp(20px, 5vw, 72px);
  --header-h: 80px; --radius: 0;
  --section: clamp(56px, 6.4vw, 100px);
  --ease: cubic-bezier(.22, .68, .2, 1);
  --star: url("/images/star-slate.svg");
}
@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 ornaments (the crown on the line, the brick course) are set in the look below. */
.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); }


/* =====================================================================
   Magen David of Manhattan: Sullivan Street
   ===================================================================== */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.015em; color: var(--ink); }
h1 { letter-spacing: -.025em; }
h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
body { font-family: var(--sans); font-size: 1.04rem; color: var(--ink-2); }
.lead { font-family: var(--sans); font-weight: 400; font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.62; color: var(--ink-2); }
a { color: var(--slate); text-decoration-color: var(--steel-lt); }
a:hover { color: var(--ink); }
:focus-visible { outline-color: var(--steel); }
[lang="he"] { font-family: var(--hebrew); }

/* Buttons: slate for the main action, charcoal otherwise; rounded. */
.btn { border-radius: 999px; background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; letter-spacing: .005em; padding-inline: 1.5em; }
.btn:hover { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn-accent { background: var(--slate); border-color: var(--slate); color: #fff; }
.btn-accent:hover { background: var(--ink); border-color: var(--ink); }
.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(--page); border-color: var(--page); color: var(--ink); }
.btn-light:hover { background: #fff; border-color: #fff; color: var(--slate); }
.btn-outline-light, .btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(159, 182, 199, .6); }
.btn-outline-light:hover, .btn-ghost-light:hover { background: rgba(255, 255, 255, .07); border-color: var(--steel-lt); color: #fff; }
.btn-danger { background: #a3262b; border-color: #a3262b; color: #fff; }
.link-arrow { border-bottom-color: var(--steel); }
.link-arrow::after { color: var(--slate); }
.link-arrow:hover { color: var(--slate); border-color: var(--slate); }
.jump a { border-bottom-color: var(--steel); }

/* The broken line: a hairline that breaks a third of the way along and steps down, as the strokes of their star do.
   (.halo-rule is the name the shared pages use for the line under a page title.) */
.halo-rule, .dim { position: relative; display: block; height: 10px; margin: 0; }
.halo-rule::before, .dim::before { content: ""; position: absolute; left: 0; width: 34%; top: 2px; height: 2px; background: var(--ink); }
.halo-rule::after, .dim::after { content: ""; position: absolute; left: calc(34% - 10px); right: 0; top: 7px; height: 1px; background: var(--steel); }
.halo-rule i, .dim i { display: none; }
.halo-rule.short { width: 240px; }
.ring-rule, .verse-band { display: none; }
/* Section titles: the star, small, before them. */
.ring-title { display: flex; align-items: center; gap: 14px; }
.ring-title::before { content: ""; width: 24px; height: 24px; flex: none; background: var(--star) center / contain no-repeat; }
.deep .ring-title::before { background-image: url("/images/star-light.svg"); }

/* Pictures: whole and square-cornered, with a small 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.portrait { aspect-ratio: 2 / 3; }
.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: plaster, the star beside the name and the place under it */
.site-header, .site-header.scrolled { background: rgba(243, 242, 239, .96); border-bottom: 1px solid var(--line); }
.brand { color: var(--ink); gap: 14px; }
.brand img { height: 42px; width: auto; }
.brand-1 { font: 400 1.38rem/1 var(--serif); color: var(--ink); letter-spacing: -.015em; }
.brand-2 { font: 500 .78rem/1 var(--sans); color: var(--muted); margin-top: 6px; letter-spacing: .01em; }
.nav a:not(.btn) { color: var(--ink-2); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--slate); }
.nav a:not(.btn)::after { background: var(--slate); }
.nav .btn { background: var(--slate); border-color: var(--slate); color: #fff; }
.nav .btn:hover { background: var(--ink); border-color: var(--ink); }
.skip { background: var(--ink); color: #fff; }
@media (max-width: 1140px) {
  .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.7rem/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(--slate); }
  .nav .btn { margin: 28px 0 0; min-height: 54px; font-size: 1rem; }
}
@media (max-width: 420px) { .brand img { height: 34px; } .brand-1 { font-size: 1.12rem; } .brand-2 { font-size: .72rem; } }

/* ---------- Home: the sanctuary whole at 3:2, the name beside it, then this Shabbat ---------- */
.hero { padding: clamp(24px, 3vw, 44px) 0 0; background: var(--page); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 4.5vw, 80px); align-items: center; }
.hero-text { order: 2; }
.hero-place { margin: 0 0 1em; font: 500 .95rem/1.4 var(--sans); color: var(--muted); }
.hero h1 { margin: 0; font-size: clamp(2.4rem, 4.2vw, 4.2rem); line-height: 1.02; letter-spacing: -.03em; color: var(--ink); }
.hero h1 .of { display: block; color: var(--slate); }
.hero .halo-rule { margin-top: 1.3rem; width: min(300px, 70%); }
.hero-lede { margin: 1.2em 0 0; font-size: clamp(1rem, 1.15vw, 1.1rem); line-height: 1.6; max-width: 28em; color: var(--ink-2); }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 1.6em; align-items: center; }
/* The photograph at its own 3:2, sized from the screen's height so this Shabbat (below) is on the first screen. */
.hero-photo { order: 1; margin: 0; justify-self: start; height: auto; max-height: none; min-height: 0; width: min(100%, calc((100svh - var(--header-h) - 250px) * 1.5)); min-width: min(100%, 420px); aspect-ratio: 3 / 2; overflow: visible; background: var(--honey); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-photo figcaption { position: absolute; left: 0; top: 100%; padding-top: .7em; font-size: .82rem; color: var(--muted); }
.hero-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.hero .hero-strip { margin-top: clamp(38px, 3.8vw, 56px); }
.hero-strip .hs { padding: 16px 22px 18px; margin: 0; border: 0; }
.hero-strip .hs + .hs { border-left: 1px solid var(--line); }
.hero-strip dt { color: var(--muted); font-size: .86rem; margin-bottom: 4px; }
.hero-strip dd { margin: 0; font: 400 clamp(1.15rem, 1.55vw, 1.45rem)/1.15 var(--serif); color: var(--ink); }
.hero-strip .hs:first-child dd { color: var(--slate); }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-text { order: 1; } .hero-photo { order: 2; }
  .hero-photo { justify-self: stretch; width: 100%; min-width: 0; aspect-ratio: auto; background: none; }
  .hero-photo img { height: auto; aspect-ratio: 3 / 2; background: var(--honey); }
  .hero-photo figcaption { position: static; }
}
@media (max-width: 640px) {
  .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-strip .hs:nth-child(3) { border-left: 0; }
  .hero-strip .hs:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .hero-strip .hs { padding: 14px 16px; }
}
.hero + .section { padding-top: clamp(44px, 4.6vw, 68px); }

/* Rows of times, events and classes: walnut figures in the serif */
.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(--walnut); }
.rows li.hl .time { color: var(--slate); }
.week-col h3 { border-bottom: 2px solid var(--ink); }
.week-col h4 { color: var(--slate); 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: stone, and the charcoal band like the awning over the door */
.band-plaster, .band-stone { background: var(--stone); }
.deep { position: relative; color: var(--night-text); background: var(--night); }
.deep h2, .deep h3 { color: #fff; }
.deep .lead, .deep p { color: var(--night-text); }
.deep a:not(.btn) { color: var(--steel-lt); }
.deep .btn-light { color: var(--ink); }

/* The band photo whole beside the words */
.ark-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.ark-grid figure { margin: 0; aspect-ratio: 3 / 2; }
.ark-grid figure img { width: 100%; height: 100%; object-fit: cover; }
.ark-grid figcaption { font-size: .82rem; color: var(--night-muted); padding-top: .7em; }
@media (max-width: 860px) { .ark-grid { grid-template-columns: minmax(0, 1fr); } }

/* Prices and times in rows */
.price-rows { list-style: none; margin: 1.4rem 0 .6rem; padding: 0; border-top: 2px 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.15rem/1.2 var(--serif); color: var(--walnut); white-space: nowrap; text-align: right; }
.deep .price-rows { border-top-color: var(--steel-lt); }
.deep .price-rows li { color: var(--night-text); border-bottom-color: rgba(159, 182, 199, .22); }
.deep .price-rows li span:last-child { color: var(--steel-lt); }
.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(--slate); }
.ways a:hover strong { color: var(--slate); }
@media (max-width: 860px) { .give-grid { grid-template-columns: minmax(0, 1fr); } }
.give-text p { color: var(--ink-2); }
.ways a { color: var(--ink-2); }
.ways strong { color: var(--ink); }
.ways span { color: var(--muted); }

/* Dedications (if the office lists any) */
.dd-summary { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--muted); margin: 0 0 clamp(24px, 3vw, 36px); }
.dd-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(32px, 5vw, 80px); align-items: start; }
.dd-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.dd-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 20px; padding: .8em 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dd-price { font: 400 1.15rem/1.2 var(--serif); color: var(--walnut); white-space: nowrap; text-align: right; }
@media (max-width: 860px) { .dd-areas { 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% 15%; }
.people h3 { margin: 0; font-size: 1.3rem; }
.people p { margin: .2em 0 0; color: var(--muted); font-size: .95rem; }

/* Events: the date in a slate circle */
.ei-date { border-radius: 50%; border: 1px solid var(--line-2); background: var(--paper); width: 76px; height: 76px; }
.ei-date b { color: var(--slate); font-family: var(--serif); font-weight: 400; }
.ei-date small { color: var(--muted); }
.event-item.is-featured .ei-date { background: var(--slate); border-color: var(--slate); }
.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, with the times in walnut */
.doors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px 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 .times { font: 400 1.3rem/1.35 var(--serif); color: var(--walnut); margin: .1em 0 .2em; }
.door .link-arrow { margin-top: auto; padding-top: 10px; align-self: flex-start; }
@media (max-width: 860px) { .doors { grid-template-columns: minmax(0, 1fr); } .door, .door + .door { padding: 22px 0; border-left: 0; border-top: 1px solid var(--line); } .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(.6) 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 broken line 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.4rem, 4.4vw, 4rem); letter-spacing: -.025em; line-height: 1.04; }
.page-hero-grid .page-hero-text .halo-rule { margin-top: 1.4rem; width: min(280px, 64%); }

/* Footer: charcoal, the star in light lines, their verse over the ark 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 32px; text-align: left; }
.footer-emblem { width: 72px; height: auto; }
.footer-name { color: #fff; font-size: clamp(1.5rem, 2.2vw, 2rem); margin: 0; }
.footer-place { color: var(--night-muted); margin: .2em 0 0; }
.footer-he { margin: 0; font: 400 1.25rem/1.5 var(--hebrew); color: var(--steel-lt); max-width: 22em; text-align: right; }
@media (max-width: 760px) { .footer-brand { grid-template-columns: minmax(0, 1fr); } .footer-emblem { width: 60px; } .footer-he { text-align: left; } }
.footer-cols { border-top: 1px solid rgba(159, 182, 199, .3); }
.footer-h { color: var(--steel-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 a { color: var(--night-text); }
.footer-col a[href^="mailto"] { overflow-wrap: anywhere; }

/* 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; }
.ways.ways-dark { border-top-color: rgba(159, 182, 199, .45); margin-top: 0; }
.ways.ways-dark li { border-bottom-color: rgba(159, 182, 199, .2); }
.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(--steel-lt); }

/* The homepage's funds: each row goes straight to Donate with that fund chosen. */
.fund-rows li { padding: 0; }
.fund-rows a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; width: 100%; padding: .8em 0; color: var(--ink); text-decoration: none; }
.fund-rows a span:last-child { font: 500 .95rem/1.2 var(--sans); color: var(--slate); }
.fund-rows a span:last-child::after { content: " \2192"; }
.fund-rows a:hover span:first-child { color: var(--slate); }
.week-notes { min-width: 0; max-width: 100%; }
.week-notes li { overflow-wrap: anywhere; }

/* ---------- Membership: the levels as columns, a yearly/monthly switch, the comparison table ---------- */
.mb-switch { display: inline-flex; padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); margin: 0 0 clamp(24px, 3vw, 36px); }
.mb-switch button { font: 500 .95rem/1 var(--sans); padding: .7em 1.3em; border: 0; border-radius: 999px; background: none; color: var(--ink-2); cursor: pointer; }
.mb-switch button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.mb-switch small { color: var(--steel); font-weight: 600; margin-left: .35em; }
.mb-switch button[aria-pressed="true"] small { color: var(--steel-lt); }
.mb-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.mb-level { display: flex; flex-direction: column; padding: 26px clamp(16px, 1.8vw, 28px) 30px 0; }
.mb-level + .mb-level { padding-left: clamp(16px, 1.8vw, 28px); border-left: 1px solid var(--line); }
.mb-level .mb-badge { align-self: flex-start; font: 600 .8rem/1 var(--sans); color: var(--slate); background: var(--slate-lt); border-radius: 999px; padding: .45em .85em; margin-bottom: 12px; }
.mb-level h3 { margin: 0; font-size: clamp(1.35rem, 1.7vw, 1.6rem); }
.mb-tag { margin: .4em 0 0; color: var(--ink-2); font-weight: 500; }
.mb-price { margin: 18px 0 2px; font: 400 clamp(2rem, 2.8vw, 2.6rem)/1 var(--serif); color: var(--walnut); }
.mb-price small { font: 400 1rem/1 var(--sans); color: var(--muted); }
.mb-alt { margin: 0 0 14px; font-size: .9rem; color: var(--muted); }
.mb-desc { font-size: .96rem; color: var(--ink-2); }
.mb-benefits { list-style: none; margin: 4px 0 20px; padding: 0; border-top: 1px solid var(--line); }
.mb-benefits li { padding: .6em 0; border-bottom: 1px solid var(--line); font-size: .95rem; color: var(--ink); display: grid; gap: 2px; }
.mb-benefits li span { color: var(--muted); font-size: .86rem; }
.mb-level .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1100px) { .mb-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mb-level:nth-child(3) { padding-left: 0; border-left: 0; } .mb-level:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 640px) { .mb-levels { grid-template-columns: minmax(0, 1fr); } .mb-level, .mb-level + .mb-level { padding: 24px 0; border-left: 0; border-top: 1px solid var(--line); } .mb-level:first-child { border-top: 0; } }
.mb-note { margin-top: clamp(20px, 2.4vw, 30px); color: var(--muted); max-width: 46em; }
.mb-compare { width: 100%; border-collapse: collapse; font-size: .95rem; }
.mb-compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 2px solid var(--ink); }
.mb-compare th, .mb-compare td { padding: .75em .9em; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.mb-compare thead th { font: 400 1.05rem/1.2 var(--serif); color: var(--ink); white-space: nowrap; }
.mb-compare tbody th { font-weight: 500; color: var(--ink); min-width: 14em; }
.mb-compare td { color: var(--ink-2); white-space: nowrap; }
.mb-compare td.no { color: var(--muted); }
.mb-compare td.yes { color: var(--slate); font-weight: 500; }
.mb-join { max-width: 760px; }
.mb-chosen { padding: 16px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; margin-bottom: 18px; }
.mb-chosen strong { font: 400 1.2rem/1.3 var(--serif); color: var(--ink); }

/* ---------- Event tickets ---------- */
.tk-box { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.tk-prices { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 10px; color: var(--ink-2); font-size: .95rem; }
.tk-prices b { font: 400 1.05rem/1 var(--serif); color: var(--walnut); font-weight: 400; }
.tk-form { display: grid; gap: 14px; margin-top: 12px; padding: 20px; background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.tk-form[hidden] { display: none; }
.tk-lines { display: grid; gap: 8px; }
.tk-line { display: grid; grid-template-columns: minmax(0, 1fr) auto 5.5em; gap: 12px; align-items: center; }
.tk-line .tk-price { color: var(--walnut); font-family: var(--serif); }
.tk-line input { width: 100%; }
.tk-total { font: 400 1.25rem/1.2 var(--serif); color: var(--ink); }
.tk-done { padding: 14px 18px; background: var(--slate-lt); color: var(--ink); border-radius: 2px; }

/* ---------- About: the team, each with a bio to open ---------- */
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 48px) clamp(20px, 2.6vw, 40px); list-style: none; margin: 0; padding: 0; }
.team figure { margin: 0 0 14px; aspect-ratio: 1 / 1; background: var(--honey); overflow: hidden; }
.team img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.team h3 { margin: 0; font-size: 1.35rem; }
.team .role { margin: .15em 0 .6em; color: var(--slate); font-weight: 500; }
.team details summary { cursor: pointer; color: var(--slate); font-weight: 500; list-style: none; }
.team details summary::-webkit-details-marker { display: none; }
.team details summary::after { content: " +"; }
.team details[open] summary::after { content: " –"; }
.team details p { font-size: .95rem; margin: .7em 0 0; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .team { grid-template-columns: minmax(0, 1fr); } }
.stages { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 1.2rem 0 0; padding: 0; }
.stages li { padding: .5em 1em; border: 1px solid var(--line-2); border-radius: 999px; font-size: .95rem; color: var(--ink); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.three > div { padding: 22px clamp(16px, 2vw, 32px) 26px 0; }
.three > div + div { padding-left: clamp(16px, 2vw, 32px); border-left: 1px solid var(--line); }
.three h3 { margin: 0 0 .4em; }
.three p { margin: 0; }
@media (max-width: 860px) { .three { grid-template-columns: minmax(0, 1fr); } .three > div, .three > div + div { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); } .three > div:first-child { border-top: 0; } }
/* Radio rows in the site's forms (membership: join or renew) */
.gv-field .label { display: block; margin-bottom: 6px; font-weight: 500; font-size: .95rem; color: var(--ink); }
.gv-field label.check { display: flex; align-items: center; gap: .6em; font-weight: 400; margin: 0 0 4px; }
.gv-field label.check input { width: 18px; height: 18px; padding: 0; appearance: auto; -webkit-appearance: radio; accent-color: var(--slate); }
.gv-field input, .gv-field select, .gv-field textarea { border-radius: 2px; }
/* A section title beside its words (About) */
.prose-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 88px); align-items: start; }
.prose-grid h2 { margin: 0; }
.prose-grid .prose p:last-child { margin-bottom: 0; }
@media (max-width: 860px) { .prose-grid { grid-template-columns: minmax(0, 1fr); } }
.ei-tix { color: var(--slate); font-weight: 600; }
.tk-box h3 { margin: 0 0 .4em; }
.tk-form label.check { display: flex; align-items: center; gap: .6em; }
.tk-form label.check input { width: 18px; height: 18px; accent-color: var(--slate); }
.tk-form .gv-field { margin-top: 0; }