/* Magen David of Madison: the lit screen.
   A Syrian Sephardic congregation in Brooklyn moving into its new shul at 1667 East 24th Street. The pictures are the
   architect's renderings of that building, so the site takes its look from them: white marble pages from the
   sanctuary, graphite from the facade at dusk for the header, the deep bands and the footer, and brass lamplight from
   the lattice screens that glow beside the entrance. Red Hat Display for headings (light, architectural, close to the
   lettering of their MM monogram), Red Hat Text for text, Frank Ruhl Libre for Hebrew.
   The motif is the facade's organic lattice screen, lit from behind: a tall panel of it beside the homepage's
   building, a narrow slice of it before each section title, and a band of it across the top of the footer.
   Square corners, hairlines rather than boxes. No eyebrows above headings, sentence case, lining figures. */

:root {
  --page: #f5f4f1; --paper: #fbfaf8; --stone: #ebe9e4; --honey: #dfdcd5;
  --ink: #1f2124; --ink-2: #44474c; --muted: #6f7277;
  --sodalite: #8f6227; --sodalite-lt: #e3cfae;
  --navy: #1f2124; --navy-dk: #141517; --gold: #c9a066; --gold-lt: #e2c391; --gold-text: #8a5d24;
  --bronze: #a8742f; --bronze-dk: #7a5220; --bronze-lt: #e3cfae;
  --night: #232528; --night-2: #2c2f33; --night-text: #e6e2da; --night-muted: #a9a59d;
  --velvet: #8f6227; --velvet-dk: #6f4a1b; --walnut: #8f6227; --lamp: #d9a45a; --sapphire: #26386e;
  --line: rgba(31, 33, 36, .12); --line-2: rgba(31, 33, 36, .26); --rule: rgba(201, 160, 102, .9);
  /* Names the shared scripts and the giving form use. */
  --ivory: var(--page); --stone-2: var(--honey); --accent: var(--walnut); --accent-dk: var(--velvet-dk); --accent-lt: var(--bronze-lt);
  --serif: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --text-serif: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --sans: "Red Hat Text", 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);
}
@media (max-width: 760px) { :root { --header-h: 64px; } }
@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); }



/* =====================================================================
   Magen David of Madison: the lit screen
   ===================================================================== */
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.018em; color: var(--ink); }
h1 { font-weight: 300; letter-spacing: -.028em; }
h2 { font-weight: 400; }
h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
body { font-family: var(--sans); font-size: 1.03rem; 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(--walnut); text-decoration-color: var(--bronze-lt); }
a:hover { color: var(--ink); }
:focus-visible { outline-color: var(--bronze); }
[lang="he"] { font-family: var(--hebrew); }

/* Buttons: graphite, square; brass for the main action. */
.btn { border-radius: 0; background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; letter-spacing: .01em; }
.btn:hover { background: var(--walnut); border-color: var(--walnut); color: #fff; }
.btn-accent { background: var(--walnut); border-color: var(--walnut); 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(--lamp); border-color: var(--lamp); color: var(--night); }
.btn-light:hover { background: #f2d29e; border-color: #f2d29e; color: var(--night); }
.btn-outline-light, .btn-ghost-light { background: transparent; color: #fff; border: 1px solid rgba(226, 195, 145, .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(--bronze); }
.link-arrow:hover { color: var(--walnut); border-color: var(--walnut); }
.jump a { border-bottom-color: var(--gold); }

/* The lamplight rule under page titles: a short brass line that glows a little, as the lattice does at dusk.
   (.halo-rule is the name the shared pages use.) */
.halo-rule { position: relative; display: block; height: 2px; width: 72px; margin: 0; background: var(--lamp);
  box-shadow: 0 0 14px 1px rgba(217, 164, 90, .55); }
.halo-rule i { display: none; }
.halo-rule.short { width: 72px; }
.ring-rule, .verse-band { display: none; }
/* Section titles: a narrow slice of the lit lattice before them, like the tall panels beside the entrance. */
.ring-title { display: flex; align-items: center; gap: 18px; }
.ring-title::before { content: ""; width: 14px; height: 1.15em; flex: none; background: url(/images/lattice.svg) center / cover no-repeat; }

/* Pictures: whole, square-cornered, 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.portrait { aspect-ratio: 2 / 3; }
.caption { font-size: .86rem; color: var(--muted); padding-top: .7em; }

/* Header: the facade at dusk, graphite, the monogram in light and brass */
.site-header, .site-header.scrolled { background: rgba(35, 37, 40, .97); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.brand { color: #fff; gap: 14px; }
.brand img { height: 44px; width: auto; }
.brand-1 { font: 400 1.32rem/1 var(--serif); color: #fff; letter-spacing: -.01em; }
.brand-2 { font-size: .78rem; color: var(--night-muted); margin-top: 5px; letter-spacing: .01em; }
.nav a:not(.btn) { color: var(--night-text); }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: #fff; }
.nav a:not(.btn)::after { background: var(--lamp); box-shadow: 0 0 8px rgba(217, 164, 90, .6); }
.nav .btn { background: var(--lamp); border-color: var(--lamp); color: var(--night); }
.nav .btn:hover { background: #f2d29e; border-color: #f2d29e; color: var(--night); }
.nav-toggle { color: #fff; }
.skip { background: var(--lamp); color: var(--night); }
@media (max-width: 1240px) {
  .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--night); }
  .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(--night); overflow-y: auto; border-top: 1px solid rgba(255, 255, 255, .08); 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: 300 1.75rem/1.1 var(--serif); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .nav a:not(.btn)::after { display: none; }
  .nav a:not(.btn)[aria-current="page"] { color: var(--lamp); }
  .nav .btn { margin: 28px 0 0; min-height: 54px; font-size: 1rem; }
}
@media (max-width: 420px) { .brand img { height: 36px; } .brand-1 { font-size: 1.1rem; } .brand-2 { font-size: .7rem; } }

/* ---------- Home: the building at dusk, beside a panel of its lit screen, then this Shabbat ---------- */
.dusk { background: var(--night); color: var(--night-text); }
.dusk h1 { color: #fff; }
.hero { padding: clamp(28px, 3.4vw, 52px) 0 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4.5vw, 80px); align-items: center; }
.hero-he { text-align: left; margin: 0 0 .35em; font: 400 clamp(1.5rem, 2.2vw, 2rem)/1.2 var(--hebrew); color: var(--lamp); }
.hero h1 { margin: 0; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; }
.hero h1 span { display: block; }
.hero-lede { margin: 1.1em 0 0; font-size: clamp(1.02rem, 1.2vw, 1.14rem); line-height: 1.62; max-width: 30em; color: var(--night-text); }
.hero-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.8em; }
/* The facade: a tall panel of the lit lattice, then the rendering whole at 2:3, sized from the screen's height so
   this Shabbat (the strip below) is on the first screen. */
.facade { display: flex; gap: 10px; align-items: stretch; height: clamp(320px, calc(100svh - var(--header-h) - 190px), 720px); }
.facade-screen { width: clamp(28px, 4.2vw, 64px); background: url(/images/lattice.svg) center / cover no-repeat; box-shadow: 0 0 40px rgba(217, 164, 90, .25); }
.hero-photo { margin: 0; height: 100%; aspect-ratio: 2 / 3; width: auto; min-width: 0; max-height: none; min-height: 0; overflow: visible; background: var(--night-2); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-photo figcaption { position: absolute; right: 0; top: 100%; padding-top: .5em; font-size: .8rem; color: var(--night-muted); white-space: nowrap; }
.hero-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid rgba(226, 195, 145, .35); }
.hero .hero-strip { margin-top: clamp(34px, 3.4vw, 48px); }
.hero-strip .hs { padding: 16px 18px 22px 0; margin: 0; border: 0; }
.hero-strip .hs + .hs { padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .1); }
.hero-strip dt { color: var(--night-muted); font-size: .86rem; margin-bottom: 4px; }
.hero-strip dd { margin: 0; font: 300 clamp(1.25rem, 1.7vw, 1.6rem)/1.15 var(--serif); color: #fff; }
.hero-strip dd[data-z="candles"], .hero-strip dd[data-z="havdalah"] { color: var(--lamp); }
/* The Times page uses the same strip on marble. */
.section-tight .hero-strip { border-top-color: var(--ink); }
.section-tight .hero-strip .hs + .hs { border-left-color: var(--line); }
.section-tight .hs span { color: var(--muted); font-size: .86rem; }
.section-tight .hs strong { font: 300 clamp(1.25rem, 1.7vw, 1.6rem)/1.15 var(--serif); color: var(--ink); }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .facade { height: auto; }
  .facade-screen { width: 34px; }
  .hero-photo { flex: 1; height: auto; aspect-ratio: 2 / 3; max-height: 78svh; }
  .hero-photo figcaption { position: static; white-space: normal; }
}
@media (max-width: 640px) {
  .hero-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-strip .hs:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-strip .hs:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .section-tight .hero-strip .hs:nth-child(-n+2) { border-bottom-color: var(--line); }
}
.hero + .section { padding-top: clamp(44px, 4.6vw, 68px); }

/* Rows of times, events and classes: Red Hat Display 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); font-size: 1.16rem; }
.rows li.hl .time { color: var(--walnut); font-weight: 500; }
.week-col h3 { border-bottom: 1px solid var(--ink); font-weight: 400; }
.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); }
.c-name, .ei-title, .ways strong { font-weight: 400; }

/* 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, .deep p { color: var(--night-text); }
.deep a:not(.btn) { color: var(--gold-lt); }

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

/* 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.2rem/1.2 var(--serif); color: var(--walnut); white-space: nowrap; }
.price-rows li small { color: var(--muted); font-size: .88rem; margin-left: .35em; }
.deep .price-rows { border-top-color: var(--gold-lt); }
.deep .price-rows li { color: var(--night-text); border-bottom-color: rgba(226, 195, 145, .2); }
.deep .price-rows li span:last-child { color: var(--lamp); }
.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(--bronze); }
.ways a:hover strong { color: var(--walnut); }
@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); }

/* About: the story, year by year */
.story { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.story li { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: 8px clamp(24px, 4vw, 64px); padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--line); }
.story .when { font: 300 clamp(1.6rem, 2.6vw, 2.4rem)/1.05 var(--serif); color: var(--walnut); letter-spacing: -.02em; }
.story h3 { margin: 0 0 .35em; }
.story p { margin: 0; max-width: 40em; }
@media (max-width: 700px) { .story li { grid-template-columns: minmax(0, 1fr); } }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2vw, 28px); }
.pair figure { margin: 0; }
.pair img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: var(--honey); }
.pair figcaption { font-size: .86rem; color: var(--muted); padding-top: .6em; }
.verse { margin: 0; text-align: center; }
.verse [lang="he"] { display: block; font: 400 clamp(1.5rem, 2.6vw, 2.3rem)/1.4 var(--hebrew); color: var(--lamp); }
.verse span:not([lang]) { display: block; margin-top: .6em; font: 300 clamp(1.15rem, 1.6vw, 1.4rem)/1.5 var(--serif); color: #fff; }
.verse cite { display: block; margin-top: .6em; font-style: normal; color: var(--night-muted); font-size: .95rem; }
.mission { max-width: 46em; margin-inline: auto; text-align: center; }
.mission p { font: 300 clamp(1.25rem, 1.9vw, 1.6rem)/1.5 var(--serif); color: var(--ink); }

/* Dedications: the list, area by area */
.dd-summary { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--muted); margin: 0 0 clamp(24px, 3vw, 36px); }
.dd-summary strong { color: var(--ink); font-weight: 500; }
.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-area h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); margin: 0 0 .5em; }
.dd-list { list-style: none; margin: 0; padding: 0; border-top: 1px 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-name { color: var(--ink); }
.dd-name small { color: var(--muted); font-size: .88rem; margin-left: .35em; }
.dd-price { font: 400 1.2rem/1.2 var(--serif); color: var(--walnut); white-space: nowrap; text-align: right; }
.dd-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; font-size: .9rem; color: var(--muted); }
.dd-meta .dd-names { color: var(--ink-2); font-style: italic; }
.dd-ask { background: none; border: 0; padding: 0; font: 500 .92rem var(--sans); color: var(--walnut); cursor: pointer; text-decoration: underline; text-decoration-color: var(--bronze-lt); text-underline-offset: 3px; }
.dd-ask:hover { color: var(--ink); }
.dd-item.taken .dd-name, .dd-item.taken .dd-price { color: var(--muted); }
.dd-item.taken .dd-price { text-decoration: line-through; text-decoration-thickness: 1px; }
.dd-item.chosen { background: linear-gradient(90deg, rgba(217, 164, 90, .14), transparent); }
@media (max-width: 860px) { .dd-areas { grid-template-columns: minmax(0, 1fr); } }
.dd-form-wrap { scroll-margin-top: calc(var(--header-h) + 20px); }
.dd-chosen { font: 300 clamp(1.3rem, 2vw, 1.7rem)/1.3 var(--serif); color: var(--ink); margin: 0 0 .3em; }
.how-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--gold-lt); }
.how-steps li { padding: 22px 22px 24px 0; }
.how-steps li + li { padding-left: 22px; border-left: 1px solid rgba(226, 195, 145, .2); }
.how-steps strong { display: block; font: 300 1.5rem/1.2 var(--serif); color: #fff; margin-bottom: .3em; }
.how-steps span { color: var(--night-muted); }
@media (max-width: 760px) { .how-steps { grid-template-columns: minmax(0, 1fr); } .how-steps li + li { padding-left: 0; border-left: 0; border-top: 1px solid rgba(226, 195, 145, .2); } }

/* 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; }
.rabbi-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.rabbi-card img { width: 180px; height: 213px; object-fit: cover; background: var(--honey); }
.rabbi-card h3 { margin: 0 0 .2em; }
.rabbi-card .role { margin: 0 0 .8em; }
@media (max-width: 560px) { .rabbi-card { grid-template-columns: minmax(0, 1fr); } }

/* Events: the date in a graphite pane */
.ei-date { border-radius: 0; border: 1px solid var(--line-2); background: var(--paper); width: 76px; height: 76px; }
.ei-date b { color: var(--ink); font-family: var(--serif); font-weight: 300; }
.ei-date small { color: var(--muted); }
.event-item.is-featured .ei-date { background: var(--night); border-color: var(--night); }
.event-item.is-featured .ei-date b { color: var(--lamp); }
.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; }
@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 lamplight 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); line-height: 1.02; }
.page-hero-grid .page-hero-text .halo-rule { margin-top: 1.4rem; }
.page-hero-grid .page-hero-photo.portrait { aspect-ratio: 2 / 3; max-height: calc(100svh - var(--header-h) - 80px); justify-self: end; width: auto; height: calc(100svh - var(--header-h) - 80px); max-width: 100%; }
@media (max-width: 760px) { .page-hero-grid .page-hero-photo.portrait { height: auto; width: 54%; max-height: none; justify-self: start; } }

/* Footer: graphite under a band of the lit screen */
.site-footer { position: relative; background: var(--night); color: var(--night-text); padding-top: 0; }
.footer-screen { height: clamp(56px, 7vw, 96px); background: url(/images/lattice-wide.svg) center / cover; margin-bottom: clamp(48px, 6vw, 88px); box-shadow: 0 10px 40px rgba(217, 164, 90, .12); }
.footer-brand { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px 32px; text-align: left; }
.footer-emblem { width: 88px; height: auto; }
.footer-name { color: #fff; font-size: clamp(1.5rem, 2.3vw, 2.1rem); margin: 0; font-weight: 300; }
.footer-place { color: var(--night-muted); margin: .2em 0 0; }
.footer-he { margin: 0; font: 400 1.7rem/1.3 var(--hebrew); color: var(--lamp); }
@media (max-width: 760px) { .footer-brand { grid-template-columns: minmax(0, 1fr); } .footer-emblem { width: 72px; } }
.footer-cols { border-top: 1px solid rgba(226, 195, 145, .3); }
.footer-h { color: var(--lamp); font-weight: 400; }
.footer-col a { color: var(--night-text); }
.footer-col a:hover { color: #fff; }
.footer-base { border-top-color: rgba(255, 255, 255, .1); color: var(--night-muted); }
.footer-col a[href^="mailto"] { overflow-wrap: normal; word-break: keep-all; }
@media (max-width: 420px) { .footer-col a[href^="mailto"] { font-size: .86rem; } }

/* 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(226, 195, 145, .45); margin-top: 0; }
.ways.ways-dark li { border-bottom-color: rgba(226, 195, 145, .18); }
.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(--lamp); }
@media (max-width: 560px) { .footer-col:last-child { grid-column: 1 / -1; } }