/* Ohr Chabad — the Pioneers Neighborhood campaign.
   Structure inherited from tanyainarabic.com (editorial layout, sticky progress band,
   donate drawer). The Moroccan palette and ornament it came with are overridden by the
   Ohr Chabad theme block at the END of this file — tokens first, then the classes this
   page adds. Read that block before changing colours here.
   Logical properties (inline/block) throughout, so an RTL page could reuse this file. */

:root {
    /* Palette from alyahud.com */
    --ink: #16110E;        /* espresso: header, hero, footer, strong text */
    --ink-2: #23201D;
    --ink-3: #0E0B09;
    --brown: #441A05;      /* headings on light backgrounds */
    --paper: #FFFFFF;
    --white: #FFFFFF;
    --sand: #FBF9F3;       /* cream cards */
    --line: #ECE6DA;
    --line-2: #DCD3C3;
    --text: #333333;
    --muted: #7B7A79;
    --gold: #DB9E2F;       /* brand accent, buttons, gold bands */
    --gold-2: #C98B1C;
    --gold-text: #946311;  /* gold that reads on white */
    --gold-light: #E8BE6E;
    --orange: #E95823;
    --green: #5BA68A;
    --green-text: #3E7F67;

    --head: 'Roboto Slab', Georgia, serif;
    --serif: 'Roboto Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --arabic: 'Amiri', 'Traditional Arabic', serif;
    --ruqaa: 'Aref Ruqaa', 'Amiri', serif;
    --hebrew: 'Frank Ruhl Libre', 'Times New Roman', serif;

    --header-h: 68px;
    --radius: 6px;

    /* Zellige lattice for the hero background (gold lines) */
    --zellige: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23DB9E2F' stroke-width='.8'%3E%3Cpath d='M22 22H58V58H22Z'/%3E%3Cpath d='M40 14.5L65.5 40L40 65.5L14.5 40Z'/%3E%3Cpath d='M40 14.5V0M65.5 40H80M40 65.5V80M14.5 40H0M22 22L0 0M58 22L80 0M58 58L80 80M22 58L0 80'/%3E%3C/g%3E%3C/svg%3E");
    /* Coloured tile for the strip under the hero: star, corner diamonds */
    --tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Crect width='28' height='28' fill='%2316110E'/%3E%3Cpath fill='%23DB9E2F' d='M14 4l2.6 4.7L21.1 7l-1.7 4.5L24 14l-4.6 2.5 1.7 4.5-4.5-1.7L14 24l-2.6-4.7L6.9 21l1.7-4.5L4 14l4.6-2.5L6.9 7l4.5 1.7z'/%3E%3Ccircle cx='14' cy='14' r='2.6' fill='%2316110E'/%3E%3Cpath fill='%23E95823' d='M0 0h4L0 4zM28 0v4l-4-4zM0 28v-4l4 4zM28 28h-4l4-4z'/%3E%3Cpath fill='%235BA68A' d='M14 0l2 2-2 2-2-2zM14 24l2 2-2 2-2-2zM0 14l2-2 2 2-2 2zM24 14l2-2 2 2-2 2z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 88px); }
body {
    margin: 0; background: var(--paper); color: var(--text);
    font: 400 17px/1.6 var(--sans);
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
[lang="ar"] { font-family: var(--arabic); }
[lang="he"] { font-family: var(--hebrew); }
a { color: var(--gold-text); text-underline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; top: -48px; z-index: 200; background: var(--white); padding: 8px 14px; border-radius: var(--radius); }
.skip:focus { top: 12px; }

.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .container { padding-inline: 32px; } }

h1, h2, h3 { font-family: var(--head); color: var(--brown); margin: 0; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.15; margin-bottom: 20px; }
h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; }
p { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ב״ה in the top right corner, 8px from the edges; inside the sticky header so it stays with it */
.bh { position: absolute; top: 8px; right: 8px; z-index: 70; font-size: 12px; line-height: 1; color: var(--gold-light); pointer-events: none; }
@media (max-width: 640px) { .bh { top: 3px; right: 6px; font-size: 10px; } }

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; text-decoration: none;
    font: 600 1rem/1 var(--sans); letter-spacing: .01em; padding: 13px 22px;
    transition: background-color .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--gold-2); }
.btn-quiet { background: transparent; color: var(--brown); border-color: var(--line-2); }
.btn-quiet:hover { border-color: var(--ink); }
.btn-sm { padding: 9px 16px; font-size: .94rem; }
.btn-lg { padding: 16px 26px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .7; cursor: wait; }
.btn-lock { width: 16px; height: 16px; fill: currentColor; opacity: .9; }
.link-arrow { color: var(--white); font-weight: 600; text-decoration: none; border-block-end: 1px solid rgba(255,255,255,.4); padding-block-end: 2px; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { border-color: var(--white); }

/* ===== Header ===== */
.site-header {
    position: sticky; top: 0; z-index: 60; height: var(--header-h);
    background: var(--ink); color: var(--white);
}
.header-inner { display: flex; align-items: center; gap: 32px; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--white); text-decoration: none; margin-inline-end: auto; }
@media (min-width: 900px) { .brand { margin-inline-end: 0; } .nav { margin-inline: auto; } }
.brand-mark { width: 30px; height: 30px; fill: none; stroke: var(--gold-light); stroke-width: 1.6; }
.brand-mark circle { fill: var(--gold-light); stroke: none; }
.brand-en { font: 600 1.2rem/1 var(--head); letter-spacing: 0; }
.brand-ar { font-size: 1rem; color: var(--gold-light); padding-left: 10px; border-left: 1px solid rgba(255,255,255,.2); line-height: 1.6; } /* physical: the element itself is RTL */
.nav { display: none; gap: 28px; }
.nav a { color: var(--gold); text-decoration: none; font-size: 1rem; font-weight: 400; }
.nav a:hover { color: var(--gold-light); }
@media (min-width: 900px) { .nav { display: flex; } }
@media (max-width: 480px) { .brand-ar { display: none; } }

/* ===== Hero: centred over a dark warm photograph, as on alyahud.com.
   Set --hero-photo to an image url to use a photo; without it the gradient + lattice show. ===== */
.hero {
    --hero-photo: none;
    position: relative; overflow: hidden; color: #D9D2C7; text-align: center;
    background:
        linear-gradient(180deg, rgba(22,17,14,.62) 0%, rgba(22,17,14,.82) 70%, var(--ink) 100%),
        var(--hero-photo) center / cover no-repeat,
        radial-gradient(ellipse at 50% 30%, #3A2C1F 0%, var(--ink) 70%);
}
.hero::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--zellige); opacity: .06;
}
.hero-grid { position: relative; display: grid; gap: 44px; align-items: center; padding-block: 64px 72px; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.3fr .7fr; gap: 72px; padding-block: 96px 104px; text-align: start; } }
.hero-copy { max-width: 640px; margin-inline: auto; }
@media (min-width: 900px) { .hero-copy { margin-inline: 0; } }
.hero-ar { font-size: clamp(1.4rem, 2.6vw, 1.8rem); line-height: 1.6; color: var(--gold); margin: 0 0 12px; }
@media (min-width: 900px) { html[dir="ltr"] .hero-ar { text-align: left; } html[dir="rtl"] .hero-ar { text-align: right; } }
.hero h1 { color: #F2F2F2; font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.08; letter-spacing: -.015em; margin-bottom: 24px; }
.hero-sub { font-size: 1.12rem; line-height: 1.7; max-width: 36em; margin: 0 auto 34px; }
@media (min-width: 900px) { .hero-sub { margin-inline: 0; } }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
@media (min-width: 900px) { .hero-actions { justify-content: flex-start; } }
.hero-figure { margin: 0; justify-self: center; width: min(68%, 330px); }
.hero-figure img { width: 100%; background: var(--white); padding: 12px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(219,158,47,.25); }
.hero-figure figcaption { margin-top: 14px; font-size: .86rem; color: #9A8F80; text-align: center; }

.tile-strip { height: 14px; background: var(--tile) 0 0 / 14px 14px repeat-x; }

/* ===== Sticky progress band ===== */
.band {
    position: sticky; top: var(--header-h); z-index: 50;
    background: var(--white); border-block-end: 1px solid var(--line);
    transition: box-shadow .2s;
}
.band.is-stuck { box-shadow: 0 6px 18px -8px rgba(22,17,14,.3); }
.site-header .btn { transition: opacity .2s, visibility .2s; }
.band-stuck .site-header .btn { opacity: 0; visibility: hidden; } /* the pinned band has its own Donate button */
.band-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding-block: 14px; }
.band-figure { display: flex; flex-direction: column; line-height: 1.1; }
.band-raised { font: 700 1.8rem/1 var(--head); color: var(--brown); }
.band-of { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.band-meta { display: flex; justify-content: space-between; margin-top: 7px; font-size: .86rem; color: var(--muted); }
.band-meta strong { color: var(--brown); }
@media (max-width: 640px) {
    .band-inner { grid-template-columns: 1fr auto; gap: 10px 16px; padding-block: 10px 12px; }
    .band-progress { grid-column: 1 / -1; grid-row: 2; }
    .band-raised { font-size: 1.45rem; }
    .band .btn { padding: 10px 16px; font-size: .95rem; }
    .band-meta { margin-top: 5px; font-size: .8rem; }
}

.progress { height: 8px; background: #EFE8DB; border-radius: 99px; overflow: hidden; }
.progress-fill { height: 100%; width: 0; background: var(--gold); border-radius: inherit; transition: width 1.2s cubic-bezier(.2,.7,.2,1); }

/* ===== Layout ===== */
.layout { display: grid; gap: 48px; padding-block: 56px 88px; }
@media (min-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 72px; } }
.content { min-width: 0; max-width: 700px; }

.section { padding-block: 56px 0; }
.section + .section { border-block-start: 1px solid var(--line); margin-block-start: 56px; }
.content > .section:first-of-type, .video-section + .section { padding-block-start: 0; }
.section-intro { color: var(--muted); }

.prose p { font: 400 1.1rem/1.8 var(--serif); color: var(--text); }
.prose .lede { font-size: 1.3rem; font-weight: 500; color: var(--brown); }
.prose em, .step-body em, .goal em { font-style: italic; }
.prose .highlight { font: italic 500 1.45rem/1.45 var(--serif); color: var(--brown); margin-block: 1.4em; }
.prose .spoken { font-style: italic; color: var(--brown); padding-inline-start: 18px; border-inline-start: 2px solid var(--gold); }

/* ===== Video ===== */
.video-section { margin-bottom: 56px; }
.video-section video { width: 100%; background: var(--ink); border-radius: var(--radius); }

/* ===== Clips (history section): 4:3 and 9:16 side by side at equal height ===== */
.clips { display: grid; gap: 16px; margin: 28px 0 8px; align-items: start; }
@media (min-width: 560px) { .clips { grid-template-columns: 2.37fr 1fr; } }
.clip { margin: 0; }
.clip video { width: 100%; height: auto; background: var(--ink); border-radius: var(--radius); }
.clip-wide video { aspect-ratio: 4 / 3; }
.clip-tall video { aspect-ratio: 9 / 16; }
@media (max-width: 559px) { .clip-tall { width: 64%; margin-inline: auto; } }
.clip figcaption { margin-top: 8px; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.clip figcaption a, .clip-credit a { color: var(--brown); text-decoration-color: var(--line-2); }
.clip figcaption a:hover, .clip-credit a:hover { text-decoration-color: var(--brown); }
.prose .clip-credit { font: 400 .8rem/1.4 var(--sans); color: #8F887B; margin: 0 0 28px; }

/* ===== Story ===== */
.story-title { font: italic 500 clamp(1.9rem, 4vw, 2.6rem)/1.15 var(--serif); color: var(--brown); margin-bottom: 32px; }
.lede::first-letter {
    float: inline-start; font: 700 3.3rem/.8 var(--head); color: var(--gold);
    margin-block-start: 6px; margin-inline-end: 6px;
}
.portrait { float: inline-end; width: min(40%, 220px); margin: 6px 0 20px; margin-inline-start: 32px; }
.arch { border: 1px solid var(--gold); padding: 6px; border-radius: 999px 999px 4px 4px / 46% 46% 4px 4px; background: var(--white); }
.arch img { width: 100%; border-radius: 999px 999px 2px 2px / 46% 46% 2px 2px; }
.portrait figcaption { margin-top: 10px; text-align: center; font-size: .86rem; color: var(--muted); }
.story::after { content: ""; display: block; clear: both; }
@media (max-width: 560px) { .portrait { float: none; width: 60%; margin: 0 auto 28px; } }

.statement {
    margin: 56px 0 0; padding: 36px 0; text-align: center;
    border-block: 1px solid var(--line-2);
}
.statement p { margin: 0; font: italic 400 clamp(1.45rem, 3vw, 1.85rem)/1.4 var(--serif); color: var(--brown); max-width: 22em; margin-inline: auto; }

.callout {
    margin: 8px 0 28px; padding: 24px 28px;
    background: var(--sand); border-inline-start: 3px solid var(--gold);
}
.callout p { margin: 0; font: 400 1.2rem/1.55 var(--serif); color: var(--brown); }
.callout strong { font-weight: 600; }

/* ===== Full-width sections (alyahud.com rhythm: light / gold / dark) ===== */
.wide { padding-block: 88px; }
.wide h2 { text-align: center; font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 18px; }
.wide .section-intro { text-align: center; max-width: 40em; margin: 0 auto 36px; }
.container.narrow { max-width: 980px; }
.cream-wide { background: var(--sand); }
.dark-wide { background: var(--ink); color: #CFC6B8; }
.dark-wide h2 { color: #FBF9F3; }
.dark-wide .section-intro { color: #B3A898; }
.dark-wide .draft-tag { color: var(--gold); }

/* Process: a numbered list down a gold line (one step after another) */
.steps { list-style: none; margin: 40px auto 0; padding: 0; max-width: 760px; position: relative; }
.steps::before { content: ""; position: absolute; top: 22px; bottom: 22px; inset-inline-start: 21px; width: 2px; background: var(--line-2); }
.steps li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 22px; padding-block: 0 34px; }
.steps li:last-child { padding-block-end: 0; }
.step-n {
    position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: 50%; background: var(--white); border: 2px solid var(--gold);
    font: 700 1rem/1 var(--head); color: var(--gold-text); font-variant-numeric: tabular-nums;
}
.steps li:has(.status-done) .step-n { background: var(--gold); color: var(--ink); }
.steps li:has(.status-active) .step-n { box-shadow: 0 0 0 6px rgba(219,158,47,.2); }
.step-body { padding-top: 8px; }
.step-body h3 { margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 1.2rem; }
.step-body p { margin: 0; color: var(--muted); }
.status { font: 600 .72rem/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 3px; }
.status-done { background: #E6F2ED; color: var(--green-text); }
.status-active { background: #FBEFD6; color: var(--gold-text); }
.status-need { background: #FDE6DC; color: #B2401A; }

/* ===== Sample (folio) ===== */
.draft-tag { display: inline-block; margin-inline-start: 6px; font-size: .8rem; font-weight: 600; color: #B2401A; }
.folio {
    display: grid; margin-top: 20px; background: var(--white);
    border: 1px solid var(--line-2); outline: 1px solid var(--line); outline-offset: 5px;
}
@media (min-width: 720px) { .folio { grid-template-columns: 1fr 1fr; } }
.folio-col { padding: 26px 28px; }
.folio-he { border-block-end: 1px solid var(--line); }
@media (min-width: 720px) { .folio-he { border-block-end: 0; border-inline-start: 1px solid var(--line); order: 2; } .folio-ar { order: 1; } }
.folio-label { font: 600 .72rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; text-align: end; }
.folio-he p:last-child { font-size: 1.28rem; line-height: 1.9; margin: 0; color: var(--ink); }
.folio-ar p:last-child { font-size: 1.45rem; line-height: 2.1; margin: 0; color: var(--ink); }
.folio-note { grid-column: 1 / -1; order: 3; padding: 20px 28px 24px; background: var(--sand); border-block-start: 1px solid var(--line); }
.folio-note [lang="ar"] { font-size: 1.15rem; line-height: 2; color: var(--muted); margin-bottom: 10px; }
.folio-gloss { margin: 0; font-size: .95rem; color: var(--muted); }

/* ===== Goals: gold band with icons ===== */
.goals-band { position: relative; background: var(--gold); color: #3A2A12; overflow: hidden; }
.goals-band::before {
    content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%2316110E' stroke-width='.8'%3E%3Cpath d='M22 22H58V58H22Z'/%3E%3Cpath d='M40 14.5L65.5 40L40 65.5L14.5 40Z'/%3E%3Cpath d='M40 14.5V0M65.5 40H80M40 65.5V80M14.5 40H0M22 22L0 0M58 22L80 0M58 58L80 80M22 58L0 80'/%3E%3C/g%3E%3C/svg%3E");
}
.goals-band .container { position: relative; }
.goals-band h2 { color: #FBF9F3; }
.goals { display: grid; gap: 40px; margin-top: 40px; text-align: center; }
@media (min-width: 720px) { .goals { grid-template-columns: repeat(3, 1fr); gap: 36px; } }
.goal-icon {
    display: inline-grid; place-items: center; width: 84px; height: 84px; margin-bottom: 18px;
    border-radius: 50%; background: var(--ink); color: var(--gold);
}
.goal-icon svg { width: 42px; height: 42px; }
.goal-icon-letter { font: 700 2.6rem/1 var(--ruqaa); padding-bottom: 8px; }
.goal h3 { color: var(--ink); font-size: 1.25rem; margin-bottom: 10px; }
.goal p { margin: 0 auto; max-width: 22em; color: #3A2A12; }

/* ===== Budget ===== */
.budget-bar { display: flex; height: 14px; margin: 24px 0 8px; border-radius: 2px; overflow: hidden; gap: 2px; }
.budget-bar span { display: block; height: 100%; }
.budget-table { width: 100%; border-collapse: collapse; }
.budget-table td, .budget-table th { padding: 16px 0; border-block-end: 1px solid var(--line); vertical-align: top; text-align: start; }
.budget-table .swatch { width: 26px; }
.budget-table .swatch i { display: block; width: 12px; height: 12px; margin-top: 6px; border-radius: 2px; }
.budget-table .item strong { display: block; font: 600 1.02rem var(--head); color: var(--brown); margin-bottom: 2px; }
.budget-table .item span { font-size: .94rem; color: var(--muted); }
.budget-table .num { text-align: end; white-space: nowrap; font: 600 1.02rem var(--head); color: var(--brown); padding-inline-start: 16px; font-variant-numeric: tabular-nums; }
.budget-table tfoot th, .budget-table tfoot td { border-block-end: 0; font: 700 1.08rem var(--head); color: var(--brown); }

/* ===== FAQ ===== */
.faq details { border-block-start: 1px solid var(--line); }
.faq details:last-child { border-block-end: 1px solid var(--line); }
.faq summary {
    cursor: pointer; list-style: none; padding: 18px 0;
    display: flex; justify-content: space-between; gap: 16px;
    font: 500 1.08rem/1.4 var(--head); color: var(--brown);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-top: 7px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq details p { margin: 0 0 20px; color: var(--muted); max-width: 40em; }

/* ===== Sidebar ===== */
.sidebar { display: grid; gap: 24px; align-content: start; }
.panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.goal-raised { font: 700 2.4rem/1 var(--head); color: var(--brown); }
.goal-of { color: var(--muted); font-size: .95rem; margin: 6px 0 16px; }
.goal-meta { display: flex; justify-content: space-between; margin: 10px 0 20px; font-size: .92rem; color: var(--muted); }
.goal-meta strong { color: var(--brown); }

.trust { display: grid; gap: 8px; margin-top: 18px; font-size: .86rem; color: var(--muted); }
.trust-item { display: flex; align-items: center; gap: 8px; }
.trust-item svg { width: 16px; height: 16px; flex: none; fill: var(--green-text); }
.cards { display: inline-flex; gap: 5px; }
.cards svg { width: 34px; height: 22px; display: block; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.trust .cards { margin-top: 4px; }

.share { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.share-label { font-size: .86rem; font-weight: 600; color: var(--muted); }
.share-row { display: flex; gap: 6px; }
.share-btn {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    border: 1px solid var(--line-2); background: var(--white); color: var(--brown); text-decoration: none;
    transition: background-color .15s, color .15s, border-color .15s;
}
.share-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }
.share-btn svg { width: 15px; height: 15px; fill: currentColor; }

.donors-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.donors-head h3 { font: 600 1.1rem var(--head); }
.donors-head .count { color: var(--muted); font-family: var(--sans); font-weight: 500; font-size: .95rem; margin-inline-start: 4px; }
.donors-panel select, .donors-panel input[type="search"] {
    font: inherit; font-size: .9rem; color: var(--text); background: var(--white);
    border: 1px solid var(--line-2); border-radius: var(--radius);
}
.donors-panel select { padding: 6px 8px; }
.donors-panel input[type="search"] { width: 100%; padding: 9px 12px; }
.donor-list { list-style: none; padding: 0; margin: 8px 0 12px; }
.donor-item { display: flex; justify-content: space-between; gap: 14px; padding: 14px 0; border-block-end: 1px solid var(--line); }
.donor-item:last-child { border-block-end: 0; }
.donor-name { font-weight: 500; color: var(--brown); }
.donor-ded { font: italic 400 .95rem/1.4 var(--serif); color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.donor-time { font-size: .8rem; color: #8F887B; margin-top: 2px; }
.donor-amt { font: 700 1rem var(--head); color: var(--brown); white-space: nowrap; }
.donor-empty { color: var(--muted); text-align: center; font-size: .95rem; padding: 12px 0; margin: 0; }

/* ===== Closing: a gold band, as on alyahud.com ===== */
.closing { position: relative; background: var(--gold); color: var(--ink); text-align: center; overflow: hidden; }
.closing::before {
    content: ""; position: absolute; inset: 0; opacity: .12;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%2316110E' stroke-width='.8'%3E%3Cpath d='M22 22H58V58H22Z'/%3E%3Cpath d='M40 14.5L65.5 40L40 65.5L14.5 40Z'/%3E%3Cpath d='M40 14.5V0M65.5 40H80M40 65.5V80M14.5 40H0M22 22L0 0M58 22L80 0M58 58L80 80M22 58L0 80'/%3E%3C/g%3E%3C/svg%3E");
}
.closing-inner { position: relative; padding-block: 72px 80px; }
.closing .closing-ar { font-family: var(--ruqaa); font-size: clamp(3.2rem, 8vw, 4.8rem); line-height: 1.3; color: var(--brown); margin: 0 0 8px; }
.closing h2 { color: var(--ink); font-size: clamp(1.9rem, 4vw, 2.5rem); margin-bottom: 14px; }
.closing p { max-width: 32em; margin: 0 auto 30px; font-size: 1.1rem; color: #3A2A12; }
.closing .btn-primary { background: var(--ink); color: var(--gold); }
.closing .btn-primary:hover { background: #000; }

/* ===== Footer ===== */
.site-footer { background: var(--ink-3); color: #8F8578; font-size: .9rem; }
.footer-inner { display: grid; gap: 18px; padding-block: 36px 40px; }
@media (min-width: 900px) { .footer-inner { grid-template-columns: auto 1fr; align-items: center; } .footer-fine { grid-column: 1 / -1; } }
.footer-brand { display: flex; align-items: baseline; gap: 12px; color: var(--white); font: 600 1.15rem var(--head); }
.footer-brand [lang="ar"] { color: var(--gold-light); font-size: 1.05rem; font-weight: 400; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (min-width: 900px) { .footer-nav { justify-content: flex-end; } }
.footer-nav a { color: #CFC6B8; text-decoration: none; }
.footer-nav a:hover { color: var(--white); }
.footer-fine { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }

/* ===== Drawer ===== */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(22,17,14,.6); }
.drawer {
    position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 100;
    width: min(460px, 100%); background: var(--white); overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(100%); transition: transform .3s ease; box-shadow: -10px 0 40px rgba(0,0,0,.18);
}
[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.open { transform: none; }
.drawer-head {
    position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: flex-start;
    padding: 20px 24px 16px; background: var(--white); border-block-end: 1px solid var(--line);
}
.drawer-head h2 { font-size: 1.6rem; margin: 0 0 4px; }
.drawer-secure { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .86rem; font-weight: 500; color: var(--green-text); }
.drawer-secure svg { width: 14px; height: 14px; fill: currentColor; }
.drawer-close { background: none; border: 0; cursor: pointer; padding: 11px; margin-block-start: -10px; margin-inline-end: -12px; color: var(--muted); border-radius: var(--radius); }
.drawer-close svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.drawer-close:hover { color: var(--ink); background: var(--sand); }

.donate-form { padding: 22px 24px 32px; }
.donate-form fieldset { border: 0; padding: 0; margin: 0 0 26px; }
.donate-form legend { font: 600 1.1rem var(--head); color: var(--brown); margin-bottom: 12px; padding: 0; }
.legend-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.donate-form label { display: block; font-size: .88rem; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.hint { font-weight: 400; color: var(--muted); }
.donate-form input[type="text"], .donate-form input[type="email"], .donate-form input[type="tel"],
.donate-form input[type="number"], .donate-form select {
    display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
    font: 400 1rem var(--sans); color: var(--text); background: var(--white);
    border: 1px solid var(--line-2); border-radius: var(--radius);
}
.donate-form input:focus, .donate-form select:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(219,158,47,.2); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.amount-btn {
    padding: 13px 6px; background: var(--white); color: var(--ink); cursor: pointer;
    border: 1px solid var(--line-2); border-radius: var(--radius); font: 600 1.02rem var(--sans);
}
.amount-btn:hover { border-color: var(--gold); }
.amount-btn.active { background: var(--ink); border-color: var(--ink); color: var(--gold); }
.custom-amount { position: relative; margin: 0 !important; }
.custom-prefix { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-45%); color: var(--muted); font-weight: 400; }
.custom-amount input { margin-top: 0 !important; padding-inline-start: 26px !important; }
.check { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; cursor: pointer; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--gold-2); }

.ifield-wrap { position: relative; height: 46px; margin-top: 6px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--radius); overflow: hidden; }
.ifield-wrap iframe { width: 100%; height: 100%; border: 0; }
.ifield-wrap.valid { border-color: var(--green-text); }
.ifield-wrap.invalid { border-color: #B3261E; }
.card-type { position: absolute; inset-inline-end: 12px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 700; color: var(--muted); }
.ifield-error { color: #B3261E; font-size: .85rem; font-weight: 400 !important; }
.form-error { background: #FBEAE7; color: #8C1D18; border-radius: var(--radius); padding: 10px 14px; font-size: .92rem; }
.trust-form { justify-items: center; text-align: center; margin-top: 16px; }

/* ===== Thank-you modal ===== */
.modal-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 16px; background: rgba(22,17,14,.65); }
.modal { width: min(440px, 100%); background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.modal-top { background: var(--ink); text-align: center; padding: 30px 20px 24px; }
.modal-ar { font-family: var(--ruqaa); color: var(--gold-light); font-size: 2.3rem; line-height: 1.4; margin: 0; }
.modal-top h2 { color: var(--white); margin: 0; font-size: 1.8rem; }
.modal-body { padding: 24px; text-align: center; }
.modal-body .share-row { justify-content: center; margin: 8px 0 20px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .progress-fill, .drawer, .band { transition: none; }
}

/* Reading width for the budget table and the questions */
#budget .budget-bar, #budget .budget-table, #faq .faq { max-width: 780px; margin-inline: auto; }
#faq .faq details { border-color: var(--line-2); }

/* Bonus goal note (shown once the original goal is passed) */
.bonus-note { margin: -6px 0 14px; padding: 10px 12px; background: #FBEFD6; color: var(--gold-text); font-size: .88rem; line-height: 1.45; border-radius: var(--radius); }

/* Contact form */
.contact { max-width: 780px; margin: 56px auto 0; padding: 32px; background: var(--white); border: 1px solid var(--line); }
.contact h3 { font-size: 1.4rem; margin-bottom: 6px; }
.contact > p { color: var(--muted); }
.contact-form label { display: block; font-size: .88rem; font-weight: 500; color: var(--text); margin-bottom: 14px; }
.contact-form input, .contact-form textarea {
    display: block; width: 100%; margin-top: 6px; padding: 11px 13px;
    font: 400 1rem var(--sans); color: var(--text); background: var(--white);
    border: 1px solid var(--line-2); border-radius: var(--radius); resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(219,158,47,.2); }
.contact-ok { background: #E6F2ED; color: var(--green-text); border-radius: var(--radius); padding: 10px 14px; }
/* Honeypot: invisible and takes no space. (No far-off left offset: in RTL pages that widens the scroll area.) */
.hp { position: absolute !important; width: 1px; height: 1px; margin: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.contact-form { position: relative; }
@media (max-width: 560px) { .contact { padding: 22px 18px; } .row-2 { grid-template-columns: 1fr; } }

/* ===== Page-load animation: hero rises in, sections reveal as they scroll into view.
   Only with JS on (html.js, set by boot.js); reduced-motion users get no movement. ===== */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rise-figure { from { opacity: 0; transform: translateY(28px) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.js .hero-copy > * { opacity: 0; animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
.js .hero-copy > :nth-child(1) { animation-delay: .1s; }
.js .hero-copy > :nth-child(2) { animation-delay: .22s; }
.js .hero-copy > :nth-child(3) { animation-delay: .38s; }
.js .hero-copy > :nth-child(4) { animation-delay: .52s; }
.js .hero-figure { opacity: 0; animation: rise-figure 1.1s .35s cubic-bezier(.2,.7,.2,1) forwards; }
.js .band, .js .tile-strip { opacity: 0; animation: fade .6s .7s ease forwards; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ===== Video play button: gold, slowly pulsing to draw the eye ===== */
.clip-media { position: relative; }
.play-overlay {
    position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
    background: rgba(219,158,47,.96); color: var(--ink);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    animation: play-breathe 2.6s ease-in-out infinite;
}
.play-overlay svg { width: 32px; height: 32px; fill: currentColor; margin-left: 4px; position: relative; }
.play-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold); animation: play-ring 2.6s ease-out infinite; }
.play-overlay:hover { background: var(--gold-light); }
.play-overlay:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.clip-tall .play-overlay { width: 60px; height: 60px; }
.clip-tall .play-overlay svg { width: 26px; height: 26px; }
.clip-media.playing .play-overlay { display: none; }
@keyframes play-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes play-ring { 0% { transform: scale(1); opacity: .85; } 100% { transform: scale(1.75); opacity: 0; } }

.turnstile { margin: 4px 0 16px; min-height: 65px; }

@media (prefers-reduced-motion: reduce) {
    .js .hero-copy > *, .js .hero-figure, .js .band, .js .tile-strip { opacity: 1; animation: none; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .play-overlay, .play-ring { animation: none; }
}

/* ===== Sample: listen buttons, spoken-word highlight, English row ===== */
.folio-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; direction: ltr; }
[dir="rtl"] .folio-head { direction: rtl; }
.folio-head .folio-label { margin: 0; }
.speak {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; cursor: pointer;
    border: 1px solid var(--gold); border-radius: 99px; background: var(--white); color: var(--brown);
    font: 500 .82rem/1 var(--sans);
}
.speak svg { width: 14px; height: 14px; fill: currentColor; }
.speak .i-stop { display: none; }
.speak:hover { background: #FBEFD6; }
.speak.on { background: var(--gold); color: var(--ink); }
.speak.on .i-play { display: none; }
.speak.on .i-stop { display: inline; }
.speak.on svg { animation: play-breathe 1.6s ease-in-out infinite; }
.speak[disabled] { opacity: .45; cursor: not-allowed; }
.speak-text .w { border-radius: 3px; transition: background-color .15s; }
.speak-text .w.now { background: rgba(219,158,47,.35); }
.folio-en { grid-column: 1 / -1; order: 3; padding: 22px 28px; border-block-start: 1px solid var(--line); }
.folio-en p:last-child { margin: 0; font: 400 1.1rem/1.7 var(--serif); color: var(--ink); }
.folio-note { order: 4; }
.folio-speak-note { margin: 12px 0 0; font-size: .82rem; color: #B3A898; text-align: center; }

/* ===== Budget: linked bar and rows, gift slider ===== */
.budget-readout { margin: 24px 0 8px; min-height: 1.6em; font: 500 1rem/1.5 var(--sans); color: var(--brown); }
.budget-readout strong { color: var(--gold-text); }
.budget-bar { cursor: pointer; }
.budget-bar span { transition: opacity .2s, transform .2s; transform-origin: center bottom; }
.budget-bar.has-focus span { opacity: .3; }
.budget-bar.has-focus span.on { opacity: 1; transform: scaleY(1.5); }
.budget-table tbody tr { cursor: pointer; transition: background-color .15s; }
.budget-table tbody tr:hover, .budget-table tbody tr.on { background: #FBEFD6; }
.budget-table tbody tr:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.budget-table tbody tr td:first-child { padding-inline-start: 8px; }
.gift-calc { max-width: 780px; margin: 40px auto 0; padding: 28px; background: var(--sand); border-block-start: 3px solid var(--gold); text-align: center; }
.gift-label { display: block; font: 600 1.25rem var(--head); color: var(--brown); margin-bottom: 16px; }
.gift-row { display: flex; align-items: center; gap: 18px; max-width: 560px; margin: 0 auto; }
.gift-amount { flex: none; min-width: 96px; font: 700 1.8rem/1 var(--head); color: var(--brown); text-align: center; }
.gift-row input[type="range"] { flex: 1; accent-color: var(--gold-2); height: 28px; }
.gift-out { margin: 18px auto 20px; max-width: 34em; color: var(--text); }
@media (max-width: 560px) { .gift-row { flex-direction: column; gap: 8px; } .gift-row input[type="range"] { width: 100%; } }

/* ===== Hebrew page (html lang="he" dir="rtl") ===== */
html[lang="he"] {
    --head: 'Frank Ruhl Libre', 'Times New Roman', serif;
    --serif: 'Frank Ruhl Libre', 'Times New Roman', serif;
    --sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html[lang="he"] h1, html[lang="he"] h2, html[lang="he"] h3 { letter-spacing: 0; }
html[lang="he"] .hero h1 { font-weight: 700; }
html[lang="he"] .prose p { font-size: 1.18rem; line-height: 1.85; }
html[lang="he"] .story-title, html[lang="he"] .prose .spoken, html[lang="he"] .prose .highlight, html[lang="he"] .donor-ded { font-style: normal; }
[dir="rtl"] .link-arrow::after { content: " ←"; }
[dir="rtl"] .brand-ar { border-left: 0; padding-left: 0; border-right: 1px solid rgba(255,255,255,.2); padding-right: 10px; }
@media (min-width: 720px) {
    [dir="rtl"] .folio-he { order: 1; border-inline-start: 0; border-inline-end: 1px solid var(--line); }
    [dir="rtl"] .folio-ar { order: 2; }
}

/* Language switch in the header */
.lang-switch { color: #CFC6B8; text-decoration: none; font-size: .95rem; padding: 6px 4px; border-bottom: 1px solid transparent; }
.lang-switch:hover { color: var(--white); border-bottom-color: var(--gold); }
html[lang="he"] .lede::first-letter { float: none; font: inherit; color: inherit; margin: 0; }

/* Closing quote (Tanya ch. 36) */
.closing-quote { margin: 0 auto 34px; max-width: 760px; }
.closing-quote p { margin: 0; }
.closing .closing-quote .cq-he { font: 700 clamp(1.6rem, 4vw, 2.4rem)/1.5 var(--hebrew); color: var(--ink); }
.closing .closing-quote .cq-en { font: italic 400 1.15rem/1.5 var(--serif); color: #3A2A12; margin-top: 8px; max-width: none; }
.closing-quote cite { display: block; margin-top: 10px; font: 500 .85rem var(--sans); font-style: normal; letter-spacing: .04em; color: #5A4318; }
.closing-quote + h2 { padding-top: 26px; border-top: 1px solid rgba(22,17,14,.25); display: inline-block; }

/* The closed drawer waits off-screen; hide it (and its shadow) entirely so nothing bleeds into the page edge. */
.drawer { visibility: hidden; box-shadow: none; transition: transform .3s ease, visibility 0s linear .3s; }
.drawer.open { visibility: visible; box-shadow: -10px 0 40px rgba(0,0,0,.18); transition: transform .3s ease, visibility 0s; }
[dir="rtl"] .drawer.open { box-shadow: 10px 0 40px rgba(0,0,0,.18); }
.closing .closing-quote .cq-ar { font: 400 clamp(1.25rem, 3vw, 1.6rem)/1.9 var(--arabic); color: #2A1E0C; margin-top: 10px; max-width: none; }

/* ============================================================================
   OHR CHABAD THEME — everything below overrides the inherited layout above.

   The layout came from tanyainarabic.com, whose palette and ornament are
   Moroccan and dark. This block re-skins it to match ohrchabad.com: the same
   tokens that site uses (navy #10151D, gold #A4832A, cream #F5F3EE), the same
   type (Cormorant headings, Quicksand body), 3px radii, and a light page with
   a single dark section for rhythm.

   Change colours HERE, not in the :root at the top of the file, which is the
   inherited one. Two of the inherited ornaments are hard-coded inside rules
   rather than tokens (.goals-band::before, .closing::before) and so are
   overridden by hand further down.
   ========================================================================== */

:root {
    /* Straight from ohrchabad.com's stylesheet */
    --ink: #10151D;
    --ink-2: #1A2030;
    --ink-3: #0B0F15;
    --brown: #10151D;          /* headings on light backgrounds */
    --paper: #FFFFFF;
    --sand: #F5F3EE;           /* cream */
    --warm: #E8E4DA;
    --line: #D6D2C9;
    --line-2: #E8E4DA;
    --text: #53504C;
    --muted: #807C76;
    --gold: #A4832A;
    --gold-2: #8A6E23;
    --gold-text: #7B6118;
    --gold-dark: #6A5214;
    --gold-light: #C4A24E;
    --green: #5C7F67;
    --green-text: #41604B;

    --head: 'Cormorant', Georgia, 'Times New Roman', serif;
    --serif: 'Cormorant', Georgia, 'Times New Roman', serif;
    --sans: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --hebrew: 'Frank Ruhl Libre', 'Times New Roman', serif;

    --radius: 3px;
    --header-h: 72px;
    --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
    --shadow-md: 0 4px 20px rgba(0,0,0,.10);
    --shadow-lg: 0 8px 40px rgba(0,0,0,.12);

    /* No lattice: the light treatment uses a plain wash. */
    --zellige: none;
    --tile: none;
}

body { font-family: var(--sans); font-size: 16.5px; }

/* Cormorant is a light, high-contrast serif: headings need real weight and
   tighter leading or they read as captions. */
h1, h2, h3, .story-title, .brand, .footer-brand {
    font-family: var(--head); font-weight: 600; letter-spacing: -.005em;
}
h2 { line-height: 1.12; }
.btn { border-radius: var(--radius); font-family: var(--sans); font-weight: 600; }
.btn-primary { background: var(--gold); color: #fff; }
.btn-primary:hover { background: var(--gold-2); }
.btn-quiet { background: #fff; color: var(--gold-text); border: 1px solid var(--line); }
.btn-quiet:hover { border-color: var(--gold); background: #fff; }

/* ── Header: navy, with the real wordmark ── */
.site-header { background: var(--ink); box-shadow: var(--shadow-sm); }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-logo { width: auto; height: 34px; display: block; }
@media (max-width: 420px) { .brand-logo { height: 27px; } }
.nav a { color: #D8D3C8; font-family: var(--sans); font-size: .95rem; font-weight: 500; }
.nav a:hover { color: var(--gold-light); }

/* ── Hero: light. This is the biggest departure from the inherited design,
      which washed a photo in near-black. ── */
.hero {
    --hero-photo: none;
    background: linear-gradient(180deg, #FFFFFF 0%, var(--sand) 62%, var(--sand) 100%);
    color: var(--text);
    padding-block: 56px 44px;
}
.hero::before { display: none; }           /* the inherited lattice overlay */
.hero h1 { color: var(--ink); font-size: clamp(2.5rem, 5.4vw, 4.1rem); font-weight: 700; }
.hero-sub { color: var(--text); font-size: 1.08rem; }
.hero-kicker {
    font-family: var(--sans); font-weight: 600; font-size: .72rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold-text);
    margin: 0 0 16px;
}
.hero .link-arrow { color: var(--gold-text); }
.hero-figure { width: min(78%, 420px); }
.hero-figure img { padding: 0; box-shadow: none; }
.hero-photo {
    position: relative; overflow: hidden; border-radius: var(--radius);
    background: #fff; box-shadow: var(--shadow-lg);
}

/* ── The sun, shining. The photo has the sun at roughly 22% / 24%; the rays and
      the glow are anchored there. Both are decorative and hidden from a11y.
      They sit inside .hero-photo, which clips them to the picture. ── */
.sunburst, .sunglow {
    position: absolute; left: 22%; top: 24%;
    translate: -50% -50%; pointer-events: none;
    will-change: transform, opacity;
}
.sunburst {
    width: 190%; aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg at 50% 50%,
        rgba(255, 238, 190, .50) 0deg 2.2deg,
        rgba(255, 238, 190, 0) 2.2deg 13deg);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 4%, rgba(0,0,0,.55) 20%, transparent 58%);
            mask-image: radial-gradient(circle at 50% 50%, #000 4%, rgba(0,0,0,.55) 20%, transparent 58%);
    mix-blend-mode: screen;
    animation: sun-turn 90s linear infinite, sun-breathe 9s ease-in-out infinite alternate;
}
.sunglow {
    width: 62%; aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 246, 214, .75) 0%, rgba(255, 228, 160, .34) 32%, rgba(255, 220, 150, 0) 68%);
    mix-blend-mode: screen;
    animation: sun-pulse 9s ease-in-out infinite alternate;
}
@keyframes sun-turn   { to { rotate: 360deg; } }
@keyframes sun-breathe { from { opacity: .34; } to { opacity: .72; } }
@keyframes sun-pulse   { from { opacity: .55; scale: .94; } to { opacity: .95; scale: 1.06; } }

/* Someone who has asked for less motion gets the warmth and none of the movement. */
@media (prefers-reduced-motion: reduce) {
    .sunburst { animation: none; opacity: .4; }
    .sunglow  { animation: none; opacity: .7; }
}

/* ── The four numbers under the hero ── */
.hero-stats {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px;
    list-style: none; margin: 46px 0 0; padding: 30px 0 0;
    border-top: 1px solid var(--line); text-align: center;
}
@media (min-width: 760px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stats li { display: flex; flex-direction: column; gap: 4px; }
.hero-stats strong {
    font-family: var(--head); font-size: clamp(2rem, 4vw, 2.7rem);
    font-weight: 700; color: var(--gold-text); line-height: 1;
}
.hero-stats span { font-size: .86rem; color: var(--muted); }

/* A hairline instead of the tile strip. */
.tile-strip { height: 3px; background: linear-gradient(90deg, var(--gold-light), var(--gold), var(--gold-light)); }

/* ── Band and panels: lighter, flatter ── */
.band { background: rgba(255,255,255,.96); backdrop-filter: blur(6px); }
.panel { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }

/* ── "In short" box ── */
.summary {
    background: var(--sand); border: 1px solid var(--line);
    border-left: 3px solid var(--gold); border-radius: var(--radius);
    padding: 28px 30px; margin-bottom: 44px;
}
.summary h2 {
    font-size: 1.5rem; margin: 0 0 14px; color: var(--ink);
}
.summary ul { margin: 0 0 20px; padding-inline-start: 20px; }
.summary li { margin-bottom: 10px; line-height: 1.6; }
.summary li::marker { color: var(--gold); }

/* ── Story ── */
.story-title { color: var(--ink); font-style: normal; font-weight: 700; margin-bottom: 8px; }
.story-standfirst {
    font-family: var(--serif); font-style: italic; font-size: 1.25rem;
    color: var(--muted); margin: 0 0 34px;
}
.prose h3 {
    font-size: 1.75rem; color: var(--ink); margin: 42px 0 14px;
    padding-top: 22px; border-top: 1px solid var(--line);
}
.lede::first-letter { color: var(--gold); }
.spoken {
    font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5;
    color: var(--ink); border-inline-start: 3px solid var(--gold);
    padding-inline-start: 20px; margin: 26px 0;
}
.highlight {
    font-family: var(--serif); font-size: 1.35rem; line-height: 1.45; font-weight: 600;
    color: var(--ink); background: var(--sand); padding: 22px 26px;
    border-radius: var(--radius); margin: 30px 0;
}
.story-cta { margin: 36px 0 0; text-align: center; }
.inline-fig { margin: 30px 0; clear: both; }
.inline-fig img { width: 100%; border-radius: var(--radius); }
.inline-fig figcaption { margin-top: 10px; font-size: .86rem; color: var(--muted); font-style: italic; }

/* ── "What your donation does": cream, not a solid gold band ── */
.goals-band { background: var(--sand); color: var(--text); border-block: 1px solid var(--line); }
.goals-band::before { display: none; }
.goals-band h2 { color: var(--ink); }
.goal-icon { background: #fff; color: var(--gold); border: 1px solid var(--line); }
.goal h3 { color: var(--ink); }
.goal p { color: var(--text); }

/* ── Ways to give ── */
.give-wide { background: #fff; }
.give-wide .section-intro { text-align: center; max-width: 54ch; margin-inline: auto; }

.founding {
    display: grid; gap: 0; margin: 38px 0 42px;
    border: 1px solid var(--gold); border-radius: var(--radius); overflow: hidden;
    background: linear-gradient(180deg, #fff 0%, var(--sand) 100%);
}
@media (min-width: 860px) { .founding { grid-template-columns: 1.25fr .75fr; } }
.founding-body { padding: 34px 34px 30px; }
.founding-eyebrow {
    font-family: var(--sans); font-weight: 700; font-size: .72rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); margin: 0;
}
.founding-amount {
    font-family: var(--head); font-weight: 700; font-size: clamp(2.6rem, 5vw, 3.4rem);
    line-height: 1; color: var(--gold-text); margin: 6px 0 14px;
}
.founding-body h3 { font-size: 1.6rem; color: var(--ink); margin: 0 0 16px; line-height: 1.25; }
.founding-body p { margin: 0 0 14px; }
.founding-actions { margin: 24px 0 0; }
.founding-figure { margin: 0; position: relative; min-height: 220px; }
.founding-figure img { width: 100%; height: 100%; object-fit: cover; }

.tiers {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 18px; grid-template-columns: 1fr;
}
@media (min-width: 620px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier {
    display: flex; flex-direction: column; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px 24px;
}
.tier p:not(.tier-amount) { flex: 1; margin: 0; font-size: .95rem; line-height: 1.6; }
.tier-amount {
    font-family: var(--head); font-weight: 700; font-size: 2rem; line-height: 1;
    color: var(--gold-text); margin: 0;
}
.tier h3 { font-size: 1.2rem; margin: 0; color: var(--ink); }
.tier-any { background: var(--sand); }

/* ── Steps ── */
.step-n { background: var(--gold); color: #fff; }
.status { border-radius: 999px; font-family: var(--sans); font-weight: 600; }
.status-date { background: var(--green); color: #fff; }

/* ── The one dark section ── */
.dark-wide { background: var(--ink); color: #C8C4BC; }
.dark-wide h2 { color: #fff; }
.dark-wide .section-intro { color: #A8A49C; }
.place-grid { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 720px) { .place-grid { grid-template-columns: 1fr 1fr; } }
.place-item { margin: 0; }
.place-item img { width: 100%; border-radius: var(--radius); }
.place-item figcaption { margin-top: 10px; font-size: .86rem; line-height: 1.5; color: #A8A49C; }
@media (min-width: 720px) { .place-wide { grid-column: 1 / -1; } }
.place-note {
    margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
    font-size: .95rem; color: #B5B1A9;
}

/* ── FAQ ── */
.cream-wide { background: var(--sand); }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { font-family: var(--sans); font-weight: 600; color: var(--ink); }

/* ── Closing: cream and gold, not a solid gold block ── */
.closing { background: var(--sand); color: var(--text); border-top: 1px solid var(--line); }
.closing::before { display: none; }
.closing h2 { color: var(--ink); }
.closing-quote { color: var(--gold-text); }
.closing-quote .cq-he { font-family: var(--hebrew); }
.closing-quote cite { color: var(--muted); }

/* ── Footer ── */
.site-footer { background: var(--ink); color: #8E8A83; }
.footer-brand { color: #fff; }
.footer-brand span + span { color: var(--gold-light); font-weight: 400; font-size: 1rem; }
.footer-nav a { color: #B9B5AD; }
.footer-nav a:hover { color: var(--gold-light); }

/* ── Thank-you modal ── */
.modal-he { font: 500 1.5rem/1.4 var(--hebrew); color: var(--gold-text); margin: 0 0 6px; }

/* ── Cormorant ships old-style figures by default, so "33" and "30" sit with
      descenders and read as a typo in a statistic. Force lining figures
      everywhere a number is doing work. ── */
.hero-stats strong, .tier-amount, .founding-amount,
.goal-raised, .band-raised, .goal-of, .band-of, .step-n, .closing-quote {
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: "lnum" 1, "tnum" 1;
}

/* ── Hero proportions: the picture carries this page, so give it room, and
      close the gap the short copy left above and below. ── */
.hero { padding-block: 40px 36px; }
.hero-grid { align-items: center; gap: 30px 48px; }
.hero-figure { width: min(100%, 460px); }
.hero-figure figcaption {
    margin-top: 10px; font-size: .8rem; line-height: 1.45;
    color: var(--muted); font-style: italic; text-align: center;
}
.hero-stats { margin-top: 38px; padding-top: 26px; }

/* The sun sits in a different place in each picture, so the overlay takes its
   position from the element rather than hard-coding it. */
.sunburst, .sunglow { left: var(--sun-x, 22%); top: var(--sun-y, 24%); }
.hero-photo { --sun-x: 8%; --sun-y: 33%; }

/* A portrait figure in the story column should not run the full page height. */
.inline-fig-tall img { max-height: 620px; width: auto; margin-inline: auto; }

/* Two photographs that belong together: the water line and the road works are
   one fact, so they share a caption. */
.fig-pair { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.fig-pair img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius); }
.fig-pair figcaption { grid-column: 1 / -1; }
@media (max-width: 560px) { .fig-pair img { height: 200px; } }

/* The photograph above the "Where it stands" list. */
.plan-lead { margin: 0 0 34px; }
.plan-lead img {
    width: 100%; max-height: 380px; object-fit: cover;
    border-radius: var(--radius);
}
.plan-lead figcaption {
    margin-top: 10px; font-size: .86rem; color: var(--muted); font-style: italic;
    text-align: center;
}

/* Tier names are Hebrew with an English gloss: the names come from the parts of
   a building, so they promise nothing the project would later have to honour. */
.tier h3 { font-size: 1.45rem; letter-spacing: 0; }
.tier-gloss {
    margin: 2px 0 10px !important; flex: 0 0 auto !important;
    font-family: var(--hebrew); font-size: .95rem; color: var(--gold-text);
}
.tier-gloss [lang="en"] {
    font-family: var(--sans); font-size: .8rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
}

/* ============================================================================
   HERO — full-bleed, the photograph ohrchabad.com opens with, and a LENS FLARE

   The previous version drew a fan of rays over the sun. It read as artwork
   stuck on top of a photo, because that is what it was. A camera does not draw
   rays; it produces ARTEFACTS, and they are what make an image feel
   photographed rather than decorated:

     · a bloom where the light overwhelms the sensor,
     · an anamorphic streak, the horizontal smear from a wide lens,
     · and a row of GHOSTS — faint discs of the aperture, reflected between the
       elements of the lens. Ghosts always sit on the straight line that runs
       from the light source through the centre of the frame and out the other
       side. That line is the whole trick, and getting it right is why this
       reads as a lens and the rays did not.

   Ghosts move when the camera moves, so they are tied to scroll (initFlare in
   app.js sets --flare-scroll from 0 to 1 as the hero passes). Idling, they
   drift and the bloom breathes, on long off-rhythm periods, so the flare is
   mostly almost invisible and now and then catches.

   Light source measured off the photograph: 15.4% across, 23.6% down.
   ========================================================================== */

.hero {
    position: relative; isolation: isolate;
    min-height: min(78vh, 680px);
    display: flex; align-items: flex-end;
    padding: 0 0 58px; margin: 0; background: var(--ink);
    text-align: start;
    --lx: 15.4%;              /* light source */
    --ly: 23.6%;
    --flare-scroll: 0;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.hero-img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    filter: saturate(.98) contrast(1.04) brightness(.92);
}
/* The same gradient grammar as ohrchabad.com: barely there at the top, firm at
   the bottom, so the type has something to sit on. */
.hero-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(10,14,18,.30) 0%, rgba(10,14,18,.06) 26%, rgba(10,14,18,.38) 66%, rgba(10,14,18,.80) 100%),
        linear-gradient(90deg, rgba(10,14,18,.62) 0%, rgba(10,14,18,.18) 48%, rgba(10,14,18,0) 74%);
}

.hero-inner { position: relative; max-width: 1180px; text-align: start; }
.hero h1 {
    color: #fff; font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700;
    line-height: 1.02; margin: 0 0 20px; max-width: 14ch;
    text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.hero-kicker {
    font-family: var(--sans); font-weight: 600; font-size: .72rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--gold-light);
    margin: 0 0 18px;
}
.hero-sub {
    color: rgba(255,255,255,.90); font-size: 1.08rem; line-height: 1.65;
    max-width: 46ch; margin: 0 0 32px;
    text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
.hero-actions { justify-content: flex-start; }
.hero .link-arrow { color: #fff; }
.hero .link-arrow:hover { color: var(--gold-light); }

/* ── The flare ────────────────────────────────────────────────────────────── */
.flare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.flare > * { position: absolute; border-radius: 50%; translate: -50% -50%; }

.flare-bloom {
    left: var(--lx); top: var(--ly);
    width: 30vw; height: 30vw; max-width: 460px; max-height: 460px;
    background: radial-gradient(circle at 50% 50%,
        rgba(255,252,240,.60) 0%, rgba(255,238,196,.26) 26%,
        rgba(255,228,170,.08) 50%, rgba(255,228,170,0) 70%);
    animation: flare-breathe 13s ease-in-out infinite alternate;
}
/* The horizontal smear. Wide, very faint, and never quite symmetrical. */
.flare-streak {
    left: var(--lx); top: var(--ly);
    width: 86vw; height: 2.2px; border-radius: 2px;
    background: linear-gradient(90deg,
        rgba(255,240,205,0) 0%, rgba(255,240,205,.16) 26%,
        rgba(255,250,235,.42) 50%, rgba(255,240,205,.14) 72%, rgba(255,240,205,0) 100%);
    filter: blur(1.4px);
    animation: flare-streak 17s ease-in-out infinite alternate;
}

/* Ghosts: discs on the line from the light through the centre of the frame.
   --t is how far along that line each one sits (1 = dead centre). Scrolling
   nudges every one of them along the same axis, which is what a lens does. */
.ghost {
    --t: 1;
    --dx: calc((50% - var(--lx)) * var(--t));
    --dy: calc((50% - var(--ly)) * var(--t));
    left: calc(var(--lx) + var(--dx) + (50% - var(--lx)) * 0.10 * var(--flare-scroll));
    top:  calc(var(--ly) + var(--dy) + (50% - var(--ly)) * 0.10 * var(--flare-scroll));
    animation: flare-ghost 19s ease-in-out infinite alternate;
}
.ghost-1 { --t: .44; width: 14px; height: 14px; background: radial-gradient(circle, rgba(255,226,170,.30), transparent 70%); }
.ghost-2 { --t: .74; width: 44px; height: 44px; background: radial-gradient(circle, rgba(255,244,210,.05) 42%, rgba(255,230,180,.11) 74%, transparent 80%); }
.ghost-3 { --t: 1.08; width: 22px; height: 22px; background: radial-gradient(circle, rgba(255,210,145,.20), transparent 72%); animation-delay: -4s; }
.ghost-4 { --t: 1.36; width: 70px; height: 70px; background: radial-gradient(circle, rgba(255,236,196,.03) 48%, rgba(255,226,172,.07) 78%, transparent 84%); animation-delay: -8s; }
.ghost-5 { --t: 1.64; width: 16px; height: 16px; background: radial-gradient(circle, rgba(255,232,180,.22), transparent 70%); animation-delay: -2s; }
.ghost-6 { --t: 1.96; width: 110px; height: 110px; background: radial-gradient(circle, rgba(255,230,180,.02) 56%, rgba(255,230,180,.05) 82%, transparent 88%); animation-delay: -11s; }

/* The flare should be almost nothing most of the time and briefly catch. These
   are deliberately low ceilings: a flare you notice as a graphic has failed. */
@keyframes flare-breathe { from { opacity: .40; scale: .97; } to { opacity: .78; scale: 1.04; } }
@keyframes flare-streak  { 0% { opacity: .10; } 62% { opacity: .18; } 100% { opacity: .42; } }
@keyframes flare-ghost   { 0% { opacity: .18; } 55% { opacity: .34; } 100% { opacity: .62; } }

@media (prefers-reduced-motion: reduce) {
    .flare-bloom, .flare-streak, .ghost { animation: none; }
    .flare { opacity: .75; }
}
@media (max-width: 700px) {
    .hero { min-height: 72vh; padding-bottom: 42px; }
    .ghost-4, .ghost-6 { display: none; }     /* too large for a phone frame */
}

/* The numbers move out of the hero and onto their own light band. */
.stats-band { background: var(--sand); border-bottom: 1px solid var(--line); }
.stats-band .hero-stats { margin: 0; padding-block: 30px; border-top: 0; }

/* ============================================================================
   EDITORIAL PLATES — pictures the text runs around

   The hotel sites this is modelled on (Waldorf Astoria and its kind) never put
   a picture on its own line in the middle of a column. Pictures sit INTO the
   text, alternating side to side, with a wide gutter and a hairline caption in
   small letterspaced caps. The text closing round them is what makes a page
   feel composed rather than assembled.

   Below 760px the float is dropped — wrapped text in a phone column is a mess
   of two- and three-word lines.
   ========================================================================== */

.plate { margin: 10px 0 22px; }
.plate img { width: 100%; border-radius: var(--radius); display: block; }
.plate figcaption {
    margin-top: 10px; font-family: var(--sans);
    font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
    line-height: 1.6; color: var(--muted);
}
@media (min-width: 760px) {
    .plate-left  { float: inline-start; width: 46%; margin-inline: 0 34px; }
    .plate-right { float: inline-end;   width: 46%; margin-inline: 34px 0; }
    .plate-wide  { width: 54%; }
    .plate-left  figcaption,
    .plate-right figcaption { padding-inline-end: 6px; }
}
/* A float must not escape its section. */
.story .prose::after, .prose h3 { clear: both; }
.prose h3 { display: block; }

.fig-pair { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
.fig-pair img { height: 190px; object-fit: cover; }
.fig-pair figcaption { grid-column: 1 / -1; }

/* ============================================================================
   MASONRY GALLERY + LIGHTBOX
   CSS columns, not grid: a masonry wants the pictures to keep their own
   proportions, and columns do that for nothing. Order reads down each column,
   which is fine for a gallery where no picture depends on the one before it.
   ========================================================================== */

.masonry { columns: 2; column-gap: 14px; margin-top: 28px; }
@media (min-width: 900px) { .masonry { columns: 3; } }
.tile {
    display: block; width: 100%; break-inside: avoid; margin: 0 0 14px;
    padding: 0; border: 0; background: none; cursor: zoom-in;
    position: relative; overflow: hidden; border-radius: var(--radius);
}
.tile img { width: 100%; display: block; transition: transform .5s ease, filter .5s ease; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.035); filter: brightness(1.06); }
.tile-cap {
    position: absolute; inset-inline: 0; bottom: 0; padding: 30px 14px 12px;
    font-family: var(--sans); font-size: .7rem; letter-spacing: .08em;
    text-transform: uppercase; line-height: 1.5; color: #fff; text-align: start;
    background: linear-gradient(180deg, rgba(10,14,18,0), rgba(10,14,18,.78));
    opacity: 0; transition: opacity .3s ease;
}
.tile:hover .tile-cap, .tile:focus-visible .tile-cap { opacity: 1; }
@media (hover: none) { .tile-cap { opacity: 1; } }

.lightbox {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(8, 11, 15, .95);
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    gap: 8px; padding: 18px;
}
.lightbox[hidden] { display: none; }
.lb-figure { margin: 0; min-width: 0; text-align: center; }
.lb-figure img {
    max-width: 100%; max-height: 78vh; margin-inline: auto;
    border-radius: var(--radius);
}
.lb-figure figcaption {
    margin-top: 14px; font-family: var(--sans); font-size: .72rem;
    letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72);
}
.lb-count { color: rgba(255,255,255,.45); margin-inline-start: 10px; }
.lb-nav, .lb-close {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    color: #fff; border-radius: 50%; width: 46px; height: 46px;
    display: grid; place-items: center; cursor: pointer;
}
.lb-nav:hover, .lb-close:hover { background: rgba(255,255,255,.18); }
.lb-nav svg, .lb-close svg { width: 22px; height: 22px; fill: currentColor; }
.lb-close { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 2; }
@media (max-width: 640px) {
    .lightbox { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
    .lb-nav { position: absolute; bottom: 20px; }
    .lb-prev { inset-inline-start: 24px; }
    .lb-next { inset-inline-end: 24px; }
}

/* ============================================================================
   Section rhythm. The wide sections were inheriting one padding value, so
   Questions sat tight against the section above it and its own form ran to the
   edge of the card. Give every wide section the same generous block padding,
   and the Questions block its own inner breathing room.
   ========================================================================== */
.wide { padding-block: clamp(56px, 7vw, 92px); }
#faq .faq { margin-top: 30px; }
#faq .faq details { padding: 4px 6px; margin-bottom: 10px; }
#faq .faq summary { padding: 16px 18px; }
#faq .faq details > p { padding: 0 18px 18px; margin: 0; line-height: 1.7; }
#faq .contact {
    margin-top: 48px; padding: 34px 32px;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
#faq .contact h3 { margin-top: 0; }
@media (max-width: 560px) {
    #faq .contact { padding: 24px 20px; }
    #faq .faq summary { padding: 14px 14px; }
    #faq .faq details > p { padding: 0 14px 14px; }
}