/* ==========================================================================
   Help Rebuild Camp Gan Israel Tzfat — cgitzfat.org
   The page opens on the camp as it was (sunlit, cream), the fire takes it in
   the hero (cgi-fire.js), and everything after is the aftermath: charcoal,
   ember orange, and the warm gold light of the two pictures that survived.

   State lives on <html>:
     .intro-run             the fire is playing — before-layer up, CTA hidden
     .intro-run.intro-done  the fire has burned out — CTA fades in
     .intro-skip / no class the final state from the first paint (no JS too)
     .no-webgl              no canvas; the CSS char background stands in

   No web fonts, like the rest of this repo. Decorative motion is transform /
   opacity only and is switched off under prefers-reduced-motion at the end.
   ========================================================================== */

:root {
  --coal: #0b0807;
  --coal-2: #120d0b;
  --coal-3: #1b1411;
  --ash: #2b221e;
  --line: rgba(255, 214, 160, 0.14);
  --line-strong: rgba(255, 214, 160, 0.28);

  --ivory: #f8f1e4;
  --muted: #cbbfb0;
  --hint: #9a8c7e;

  --ember: #ff6a1a;
  --flame: #ffa53a;
  --gold: #f2cf86;
  --gold-bright: #ffe3a6;
  --gold-deep: #b98a3c;

  --cream: #f7efdd;
  --cream-ink: #3a2717;

  --ok: #a5e8bf;
  --bad: #ffb3a8;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --hebrew: "SBL Hebrew", "Taamey Frank CLM", "David", "Times New Roman", serif;

  --ease-out: cubic-bezier(0.22, 0.7, 0.28, 1);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--coal);
}

body {
  margin: 0;
  background: var(--coal);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

/* The fire is the page for its first eighteen seconds. */
html.intro-run:not(.intro-done) body,
body.modal-open { overflow: hidden; }

img, video { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { min-width: 0; }

a { color: var(--gold-bright); }
a:hover { color: #fff3d6; }

/* Hebrew snippets inside English text (and the בס״ד mark). Not <html>: in
   Hebrew mode the whole page is lang="he" and keeps its own stacks below. */
:not(html)[lang="he"] { font-family: var(--hebrew); }

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--coal);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 720px) {
  .wrap { padding: 0 28px; }
}

/* ==========================================================================
   Hero stage
   ========================================================================== */

.stage {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--coal);
  --holy: 0.9;
}

/* The camp before: the summer group photo under warm cream. */
.stage-before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--cream);
  visibility: hidden;
}

.stage-before img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: sepia(0.25) saturate(0.9);
}

.stage-before::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(250, 243, 228, 0.55), transparent 70%),
    linear-gradient(180deg, rgba(250, 244, 230, 0.93), rgba(246, 236, 214, 0.72) 48%, rgba(250, 244, 230, 0.94));
}

/* The aftermath without WebGL (and under the canvas once it is fully burnt). */
.stage-char {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255, 214, 140, 0.16), transparent 70%),
    radial-gradient(ellipse 50% 40% at 12% 100%, rgba(255, 90, 20, 0.12), transparent 70%),
    radial-gradient(ellipse 40% 30% at 90% 0%, rgba(120, 110, 100, 0.12), transparent 70%),
    linear-gradient(180deg, #090706, #15100d 55%, #0a0807);
}

.fire-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Language toggle: top-left, opposite the בס״ד mark, readable on both the
   cream page and the fire. */
.lang-toggle {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  left: 12px;
  z-index: 7;
  min-height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 226, 180, 0.4);
  background: rgba(24, 14, 9, 0.55);
  color: var(--ivory);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.2s, background 0.2s;
}

.lang-toggle:hover { border-color: var(--gold); background: rgba(24, 14, 9, 0.75); }
.lang-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.lang-toggle [lang="he"] { font-family: inherit; font-size: 15px; }

.bsd {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  z-index: 6;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(248, 241, 228, 0.6);
}

.intro-run:not(.intro-done):not(.is-engulfed) .bsd { color: rgba(58, 39, 23, 0.6); }
.intro-run .bsd { transition: color 1.5s ease; }

/* One grid for both the "before" and "after" copy: they share cells, so the
   pictures in the middle never move when the copy changes. The grid is not a
   stacking context — its children layer against the canvas by z-index. */
.stage-grid {
  position: relative;
  width: min(1120px, 100%);
  padding: 64px 16px 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "top"
    "pics"
    "bottom";
  row-gap: clamp(20px, 3.4vh, 36px);
  justify-items: center;
  text-align: center;
}

.before-top, .after-top { grid-area: top; align-self: end; }
.before-bottom, .after-bottom { grid-area: bottom; align-self: start; }

.before-copy { z-index: 1; visibility: hidden; color: var(--cream-ink); max-width: 720px; }
.after-copy { z-index: 3; max-width: 760px; }

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow .dot { opacity: 0.6; margin: 0 0.3em; }
.eyebrow .he { letter-spacing: 0; text-transform: none; font-size: 15px; margin-left: 0.4em; }

.before-copy .eyebrow { color: #8a5a22; }

.before-title,
.stage h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 6.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.stage h1 {
  color: var(--ivory);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 200, 120, 0.18);
}

.stage h1:focus { outline: none; }

.before-bottom p {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(17px, 2.2vw, 22px);
  font-style: italic;
}

.lede {
  margin: 0 auto;
  max-width: 640px;
  font-size: clamp(15px, 1.9vw, 19px);
  line-height: 1.55;
  color: #efe4d3;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.7);
  text-wrap: pretty;
}

.cta-row {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), background 0.2s;
}

.button--fire {
  color: #1a0d05;
  background: linear-gradient(180deg, #ffd58a, #ff9a3c 55%, #ff7a22);
  box-shadow: 0 0 0 1px rgba(255, 220, 160, 0.5) inset, 0 10px 36px rgba(255, 110, 30, 0.42);
}

.button--fire:hover {
  color: #1a0d05;
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 230, 180, 0.7) inset, 0 14px 44px rgba(255, 120, 40, 0.55);
}

.button--ghost {
  color: var(--ivory);
  border: 1px solid var(--line-strong);
  background: rgba(20, 14, 11, 0.45);
  backdrop-filter: blur(6px);
}

.button--ghost:hover { color: #fff; border-color: rgba(255, 220, 170, 0.55); }

/* ---- The two pictures ------------------------------------------------- */

.survivors {
  grid-area: pics;
  z-index: 3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(14px, 3.2vw, 40px);
  /* Both pictures share a height; the pair must fit a phone side by side. */
  --h: clamp(150px, min(36vh, calc((100vw - 56px) / 2.12)), 340px);
}

.survivor {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.survivor-art {
  position: relative;
  height: var(--h);
  overflow: hidden;
  border-radius: 3px;
  /* A tight rim of light only — the wide halo and the beams are drawn by the
     shader underneath, where the flames can play against them. */
  box-shadow:
    0 0 calc(var(--holy) * 22px) calc(var(--holy) * 2px) rgba(255, 226, 170, calc(var(--holy) * 0.6)),
    0 10px 24px rgba(0, 0, 0, 0.35);
}

/* A slow sheen across the glass. */
.survivor-art::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, 0.32) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 120% 0;
  mix-blend-mode: screen;
  opacity: calc(var(--holy) * 0.9);
  animation: sheen 7s ease-in-out 2s infinite;
}

@keyframes sheen {
  0%, 30% { background-position: 120% 0; }
  70%, 100% { background-position: -20% 0; }
}

.survivor--mikdash .survivor-art { aspect-ratio: 1000 / 760; }

.survivor--mikdash .survivor-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The Rebbe's portrait in a dark pewter frame like the real one. Two images
   share the box: the painting while it burns, then the pull-back to the
   firefighter holding it. */
.survivor--rebbe .survivor-art {
  aspect-ratio: 3 / 4;
  padding: calc(var(--h) * 0.04);
  background:
    linear-gradient(145deg, #2b2a2b, #77726b 16%, #1e1c1d 34%, #8f8a82 50%, #262426 68%, #615c56 84%, #1b1a1b);
}

.survivor--rebbe .survivor-art::before {
  content: "";
  position: absolute;
  inset: calc(var(--h) * 0.04 - 2px);
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 18px rgba(0, 0, 0, 0.5);
}

.survivor--rebbe img {
  position: absolute;
  inset: calc(var(--h) * 0.04);
  width: calc(100% - var(--h) * 0.08);
  height: calc(100% - var(--h) * 0.08);
  object-fit: cover;
}

.rebbe-painting { opacity: 0; }
.rebbe-scene { opacity: 1; }

.intro-run:not(.intro-done) .rebbe-painting { opacity: 1; }
.intro-run:not(.intro-done) .rebbe-scene {
  opacity: 0;
  transform-origin: 75% 60%;
  transform: translate(-25%, -10%) rotate(-29deg) scale(1.85);
}

.intro-run.intro-done .rebbe-painting {
  transform: translate(25%, 10%) rotate(29deg) scale(0.54);
  transition: opacity 1.3s ease 2.6s, transform 2.4s var(--ease-out) 2.2s;
}

.intro-run.intro-done .rebbe-scene {
  transform-origin: 75% 60%;
  transition: opacity 1.3s ease 2.5s, transform 2.4s var(--ease-out) 2.2s;
}

.survivor figcaption {
  display: grid;
  gap: 2px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--gold);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
}

.cap-name { font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cap-name [lang="he"] { letter-spacing: 0; font-size: 14px; margin-left: 0.35em; text-transform: none; }
.cap-note { color: var(--muted); font-size: 12px; max-width: 26ch; margin: 0 auto; }

.intro-run:not(.intro-done) .survivor figcaption { color: #6b4a22; text-shadow: none; }
.intro-run:not(.intro-done) .cap-note { opacity: 0; }
.intro-run.intro-done .cap-note { transition: opacity 1.2s ease 3.4s; }
.intro-run.intro-done .survivor figcaption { transition: color 1s ease, text-shadow 1s ease; }

/* While the fire burns, the captions sit on cream until the flames reach them —
   then they need the dark treatment early. */
.intro-run.is-burning:not(.intro-done) .survivor figcaption { color: var(--gold); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); transition: color 1.5s ease; }

/* ---- Intro state machine --------------------------------------------- */

.intro-run .stage-before,
.intro-run .before-copy { visibility: visible; }

.intro-run.intro-done .stage-before,
.intro-run.intro-done .before-copy { visibility: hidden; transition: visibility 0s linear 1s; }

.intro-run:not(.intro-done) .stage-char { opacity: 0; }

.after-copy { transition: opacity 1.6s var(--ease-out), transform 1.6s var(--ease-out); }
.after-bottom { transition-delay: 0.6s; }

.intro-run:not(.intro-done) .after-copy {
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
}

.no-webgl .fire-canvas { display: none; }

/* Fixed to the screen, not the hero: the hero is taller than most screens, so
   pinned to its bottom the button sat below the fold and nobody saw it. It is
   only visible while the intro runs, so it never floats over the page after. */
.skip-intro {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 20;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 220, 170, 0.6);
  background: rgba(20, 12, 8, 0.78);
  color: var(--ivory);
  font-size: 15px;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
}

.intro-run:not(.intro-done) .skip-intro {
  visibility: visible;
  animation: fade-in 0.6s ease 0.8s forwards;
}

.skip-intro:hover { border-color: rgba(255, 230, 190, 0.95); background: rgba(20, 12, 8, 0.9); }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 6;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: opacity 1s ease 1.6s;
}

.scroll-cue span {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: nudge 2.4s ease-in-out infinite;
}

.intro-run:not(.intro-done) .scroll-cue { opacity: 0; pointer-events: none; }

@keyframes nudge {
  0%, 100% { transform: translateY(-3px) rotate(45deg); opacity: 0.6; }
  50% { transform: translateY(3px) rotate(45deg); opacity: 1; }
}

@keyframes fade-in { to { opacity: 1; } }

/* ==========================================================================
   Sections
   ========================================================================== */

.section {
  position: relative;
  padding: clamp(64px, 10vw, 120px) 0;
}

.section + .section { border-top: 1px solid rgba(255, 214, 160, 0.06); }

.story { background: linear-gradient(180deg, #0a0706, var(--coal-2)); }
.survived { background: radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 200, 120, 0.07), transparent 70%), var(--coal-2); }
.damage { background: var(--coal); }
.children { background: linear-gradient(180deg, var(--coal), var(--coal-3)); }
.donate { background: radial-gradient(ellipse 60% 60% at 80% 20%, rgba(255, 120, 40, 0.1), transparent 70%), var(--coal-3); }
.donors { background: var(--coal-2); }

.kicker {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--flame);
}

.section h2 {
  margin: 0 0 18px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.prose p,
.section-head p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 17px;
  text-wrap: pretty;
}

.prose strong { color: var(--ivory); }

.section-head { max-width: 720px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.pull {
  margin: 28px 0 0;
  padding-block: 4px;
  padding-inline: 22px 0;
  border-inline-start: 2px solid var(--flame);
  font-family: var(--serif);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.3;
  color: var(--ivory);
}

.pull p { margin: 0; color: inherit; font-size: inherit; }
.pull em { color: var(--gold-bright); }

.pull--center {
  max-width: 820px;
  margin: clamp(40px, 6vw, 64px) auto 0;
  padding: 0;
  border: 0;
  text-align: center;
  font-size: clamp(20px, 2.6vw, 27px);
  color: #f1e5d1;
}

.pull--center p::before { content: "“"; color: var(--flame); }
.pull--center p::after { content: "”"; color: var(--flame); }

.story-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

@media (min-width: 880px) {
  .story-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 64px; }
}

.video-card {
  margin: 0;
  justify-self: center;
  width: min(100%, 380px);
}

.video-card video {
  width: 100%;
  aspect-ratio: 480 / 848;
  object-fit: cover;
  border-radius: 14px;
  background: #000;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(255, 120, 40, 0.08);
}

.video-card figcaption,
.photo-card figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--hint);
}

.survived-grid {
  display: grid;
  gap: 24px;
  align-items: start;
}

@media (min-width: 760px) {
  .survived-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

.photo-card { margin: 0; }

.photo-card img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.photo-card--tall img { aspect-ratio: 3 / 4; object-fit: cover; }


.gallery {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

.gallery .photo-card img { aspect-ratio: 3 / 4; object-fit: cover; }

.wide-photo { margin: 0 0 clamp(32px, 5vw, 56px); }

.wide-photo img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.children-grid {
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 820px) {
  .children-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 56px; }
}

.closing {
  margin-top: 26px !important;
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 26px) !important;
  line-height: 1.35;
  color: var(--gold-bright) !important;
}

/* ==========================================================================
   Donate
   ========================================================================== */

.donate-grid {
  display: grid;
  gap: 36px;
  align-items: start;
}

@media (min-width: 940px) {
  .donate-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }
  .donate-intro { position: sticky; top: 32px; }
}

.donate-intro p { color: var(--muted); font-size: 17px; }

.progress-panel {
  margin: 26px 0;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.progress-figures {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.progress-figures strong {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1;
  color: var(--gold-bright);
}

.progress-figures span { color: var(--muted); }

.progress-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff6a1a, #ffb347, #ffe3a6);
  box-shadow: 0 0 16px rgba(255, 150, 60, 0.6);
  transition: width 1.4s var(--ease-out);
}

.tax-note { font-size: 13px !important; color: var(--hint) !important; }

.donation-card {
  position: relative;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(43, 32, 26, 0.85), rgba(24, 18, 15, 0.9));
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.4);
}

.donation-form fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

.donation-form legend {
  margin-bottom: 12px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.donation-form hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.choice-row {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.choice-row.two { grid-template-columns: repeat(2, 1fr); }
.amount-grid { grid-template-columns: repeat(3, 1fr); }

.choice-row label { position: relative; display: block; }

.choice-row input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}

.choice-row span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.03);
  font-weight: 700;
  transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
}

.choice-row label:hover span { border-color: rgba(255, 210, 150, 0.5); }

.choice-row input:checked + span {
  color: #1a0d05;
  border-color: transparent;
  background: linear-gradient(180deg, #ffd58a, #ffa53a);
  box-shadow: 0 6px 22px rgba(255, 130, 40, 0.3);
}

.choice-row input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

.field {
  display: block;
  margin-bottom: 10px;
}

.field > span:not(.card-input-wrap) {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--muted);
}

.field input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 6, 5, 0.55);
  color: var(--ivory);
  font-size: 16px;
}

.field input::placeholder { color: #8d8074; }

.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(242, 207, 134, 0.18);
}

.name-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 14px;
  color: var(--muted);
  cursor: pointer;
}

.check input { width: 18px; height: 18px; accent-color: var(--flame); }

.method-note {
  margin: 4px 0 10px;
  font-size: 14px;
  color: var(--muted);
}

.card-input-wrap { position: relative; display: block; }
.card-input-wrap input { padding-right: 150px; }

.card-brand-strip {
  position: absolute;
  right: 10px;
  top: 50%;
  display: flex;
  gap: 4px;
  transform: translateY(-50%);
  pointer-events: none;
}

.card-brand-strip img {
  width: 30px;
  height: 20px;
  border-radius: 3px;
  background: #fff;
  transition: opacity 0.15s, filter 0.15s;
}

.card-brand-strip.has-active img { opacity: 0.25; filter: grayscale(1); }
.card-brand-strip img.is-active { opacity: 1; filter: none; }

.card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 8px;
  align-items: center;
}

.card-row .field { margin-bottom: 0; }
.slash { color: var(--hint); }

.total-box {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
}

.total-box span { color: var(--muted); }

.total-box strong {
  font-family: var(--serif);
  font-size: 28px;
  color: var(--gold-bright);
}

.form-message {
  min-height: 1.4em;
  margin: 12px 0 6px;
  font-size: 15px;
}

.form-message.is-error { color: var(--bad); }
.form-message.is-success { color: var(--ok); }

.submit-button {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #1a0d05;
  background: linear-gradient(180deg, #ffd58a, #ff9a3c 55%, #ff7a22);
  box-shadow: 0 0 0 1px rgba(255, 220, 160, 0.5) inset, 0 12px 36px rgba(255, 110, 30, 0.4);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.submit-button:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255, 230, 180, 0.7) inset, 0 16px 44px rgba(255, 120, 40, 0.5); }
.submit-button[disabled] { opacity: 0.6; cursor: progress; transform: none; }

.consent-note {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--hint);
}

.consent-note a { color: var(--muted); }

/* ---- Donor wall ------------------------------------------------------- */

.donor-wall {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}

.donor-wall:empty { display: none; }

.donor-wall article {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
}

.donor-wall strong {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--gold-bright);
}

.donor-wall span { font-weight: 600; }
.donor-wall em { color: var(--muted); font-size: 14px; }
.donor-wall small { color: var(--hint); font-size: 12px; }

.donor-wall-actions { margin-top: 22px; text-align: center; }

.load-more-donors {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ivory);
  font-weight: 600;
}

.load-more-donors:hover { border-color: rgba(255, 220, 170, 0.6); }
.load-more-donors[disabled] { opacity: 0.6; }

/* ---- Floating button (phones) ---------------------------------------- */

.float-cta {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 800;
  color: #1a0d05;
  text-decoration: none;
  background: linear-gradient(180deg, #ffd58a, #ff9a3c 55%, #ff7a22);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 120, 40, 0.35);
  transform: translate(-50%, 140%);
  opacity: 0;
  transition: transform 0.35s var(--ease-out), opacity 0.35s;
}

.float-cta.is-visible { transform: translate(-50%, 0); opacity: 1; }
.float-cta:hover { color: #1a0d05; }

@media (min-width: 940px) {
  .float-cta { display: none; }
}

/* ---- Footer ----------------------------------------------------------- */

.site-footer {
  padding: 36px 0 calc(90px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #080605;
  color: var(--hint);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

@media (min-width: 940px) {
  .site-footer { padding-bottom: 40px; }
}

.footer-org { margin: 0; }
.footer-legal { margin-top: 8px; font-size: 12px; }
.footer-legal a { color: var(--hint); }
.footer-legal a:hover { color: var(--muted); }
.footer-legal .sep { margin: 0 8px; opacity: 0.5; }

/* ---- Confirmation modal ---------------------------------------------- */

.donation-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
}

.donation-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 3, 2, 0.78);
  backdrop-filter: blur(4px);
}

.donation-modal-panel {
  position: relative;
  width: min(460px, 100%);
  padding: 34px 26px 26px;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, #2a1f19, #17110e);
  text-align: center;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 80px rgba(255, 190, 110, 0.12);
}

.donation-modal-panel:focus { outline: none; }

.modal-close {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 26px;
  line-height: 1;
}

.modal-close:hover { color: var(--ivory); background: rgba(255, 255, 255, 0.06); }

.modal-check {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #1a0d05;
  background: linear-gradient(180deg, #ffe3a6, #ffb347);
  box-shadow: 0 0 40px rgba(255, 200, 120, 0.45);
}

.modal-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flame);
}

.donation-modal h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.2;
}

.modal-copy { margin: 0 0 18px; color: var(--muted); }

.modal-summary {
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
  text-align: start;
}

.modal-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.modal-summary dt { color: var(--hint); }
.modal-summary dd { margin: 0; font-weight: 700; text-align: end; overflow-wrap: anywhere; }

.modal-primary {
  width: 100%;
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  color: #1a0d05;
  background: linear-gradient(180deg, #ffd58a, #ff9a3c);
}

/* ---- Hebrew (right-to-left) ----------------------------------------- */

html[lang="he"] {
  --serif: "SF Hebrew", "Arial Hebrew", "Noto Serif Hebrew", David, Georgia, serif;
}

/* Hebrew has no capitals; tracking built for English caps only spaces it out. */
html[lang="he"] .eyebrow,
html[lang="he"] .kicker,
html[lang="he"] .cap-name,
html[lang="he"] .donation-form legend,
html[lang="he"] .modal-eyebrow,
html[lang="he"] .section h2,
html[lang="he"] .stage h1,
html[lang="he"] .before-title { letter-spacing: 0; }

html[lang="he"] .before-bottom p,
html[lang="he"] .pull em { font-style: normal; }

html[lang="he"] .pull--center p::before,
html[lang="he"] .pull--center p::after { content: '"'; }

/* Card, phone, email and amount fields stay left-to-right so digit groups
   keep their order; in Hebrew they still sit flush with the other fields. */
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
[dir="rtl"] .field input[dir="ltr"]:placeholder-shown { direction: rtl; }

/* ---- Small screens ---------------------------------------------------- */

@media (max-width: 520px) {
  .stage-grid { padding: 56px 16px 64px; }
  .survivor { gap: 8px; }
  .survivor figcaption, .cap-note { font-size: 11px; }
  .cap-name [lang="he"] { display: none; }
  .cap-note { max-width: 20ch; }
  .eyebrow { font-size: 11px; letter-spacing: 0.14em; }
  .eyebrow .he { display: none; }
  .cta-row .button { flex: 1 1 100%; }
  .amount-grid { grid-template-columns: repeat(2, 1fr); }
  .card-input-wrap input { padding-right: 14px; }
  .card-brand-strip { display: none; }
  .card-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .card-row .cvc { grid-column: 1 / -1; }
}

@media (max-height: 640px) and (orientation: landscape) {
  .survivors { --h: clamp(120px, 40vh, 220px); }
  .stage-grid { row-gap: 14px; padding-top: 44px; padding-bottom: 56px; }
  .lede { display: none; }
}

/* ---- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}