/* The Tzav HaLev site: one stylesheet, right to left. Colours come from the old site. */
@font-face { font-family: "Heebo"; src: url("/assets/fonts/heebo-hebrew.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; src: url("/assets/fonts/heebo-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; }
:root {
  --cream: #f7e6d8; --paper: #fffaf5; --white: #fff; --ink: #1c1c1c; --muted: #4d4640; --nav: #f1f4f3;
  --orange: #f89a54; --orange-dark: #c9611b; --dark: #151515; --navy: #1f3a56; --gold: #e9cf9e; --line: #e4d3c3;
  --radius: 14px; --wrap: 1120px;
  --font: "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 18px; line-height: 1.75; color: var(--ink); background: var(--white); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 800; text-wrap: balance; }
p, li { text-wrap: pretty; }  /* browsers that can, also avoid a lonely word at a paragraph's end (build.py makes sure) */
h1 { font-size: clamp(2rem, 5vw, 3.4rem); } h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); } h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; } ul { margin: 0 0 1em; padding-inline-start: 1.3em; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; } .skip-2 { border: 0; font: inherit; cursor: pointer; } .skip-2:focus { inset-inline-start: 220px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }

/* header */
.top { background: var(--nav); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid #dfe5e3; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px 10px; }  /* the same room above the logo and below its motto (the text line carries ~2px of its own) */
/* the logo (cropped to its drawing), and under its orange line (the left 5%–66% of the picture) the motto, as text so it stays sharp */
.brand { display: flex; flex-direction: column; width: 200px; text-decoration: none; } .brand img { width: 100%; height: auto; }
.brand .tag { align-self: flex-end; width: 61%; margin: 3px 0 0; margin-inline: 0 5%; text-align: center; white-space: nowrap; font-size: 10.5px; line-height: 1; font-weight: 600; color: #4b4b4b; }
.menu { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 10px 14px; text-decoration: none; font-weight: 600; border-radius: 999px; }
.menu a:hover, .menu a[aria-current="page"] { background: #fff; color: var(--orange-dark); }
/* the mechina's emblem, small, over its menu item (on a computer above the words, so every label stays on one line; in the folded menu after them, so the labels keep one edge) */
.menu a { position: relative; } .menu .emblem { position: absolute; bottom: calc(100% - 9px); left: 50%; transform: translateX(-50%); height: 18px; width: auto; pointer-events: none; }
@media (max-width: 1000px) { .menu a:has(.emblem) { display: flex; align-items: center; gap: 8px; } .menu .emblem { position: static; transform: none; order: 1; height: 18px; } }
/* on a computer the menu sits in the middle of the page, the logo on the right and the donation button, always there, on the left
   (the three need about 1000px: below that the menu folds into its button) */
@media (min-width: 1001px) { .top .wrap { display: grid; grid-template-columns: 1fr auto 1fr; } .brand { justify-self: start; } }
.nav-donate { justify-self: end; padding: 10px 24px; white-space: nowrap; }
.burger { display: none; background: none; border: 0; font: inherit; font-weight: 700; padding: 10px; cursor: pointer; white-space: nowrap; }
@media (max-width: 1000px) {
  .burger { display: block; } .menu { display: none; position: absolute; inset-inline: 0; top: 100%; background: var(--nav); flex-direction: column; padding: 8px 16px 16px; border-bottom: 1px solid #dfe5e3; }
  .menu.open { display: flex; } .brand { width: 180px; } .brand .tag { font-size: 9.5px; }
  /* the menu button where the logo is on a computer (the right), the donation button beside it, the logo at the far left */
  .top .wrap { gap: 0; } .burger { order: -2; padding-inline-start: 0; } .nav-donate { order: -1; margin-inline-start: 6px; } .brand { margin-inline-start: auto; }
}

@media (max-width: 480px) { .nav-donate { padding: 7px 13px; font-size: .9rem; } .brand { width: 150px; } .brand .tag { font-size: 8px; } .burger { padding-block: 6px; } }
@media (max-width: 400px) { .brand .tag { width: auto; margin-inline-end: 2%; } }  /* the narrowest phones: the motto may run a little past the line rather than off the screen */

/* hero */
.hero { position: relative; color: #fff; display: grid; place-items: center; text-align: center; min-height: clamp(260px, 42vw, 520px); background: #333 center / cover no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.42)); }
.hero > div { position: relative; padding: 32px 16px; max-width: 900px; }
/* a hero whose picture is a film: the film under the same dark veil, the words above both */
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero:has(.hero-bg)::before { z-index: 1; } .hero:has(.hero-bg) > div { z-index: 2; }
/* the about page's film: a quarter lower than a big hero, the cut taken from the sky; a darker veil (20 points more) */
.hero.big.about-film { min-height: clamp(280px, 40vw, 495px); background-position: 50% 85%; } .about-film .hero-bg { object-position: 50% 85%; }
.about-film::before { background: linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.62)); }
.hero h1 { margin: 0 0 .3em; text-shadow: 0 2px 12px rgba(0,0,0,.4); }
.hero p { font-size: 1.3rem; font-weight: 600; margin: 0 0 1.2em; }
.hero.big { min-height: clamp(360px, 52vw, 640px); }
/* the home page's head: the film (two clips joined, looping) across the whole width; the clip itself shows the name and motto, so the
   heading is for screen readers and search engines only */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc { padding: 0 0 40px; }
/* under the film, and the part after it, in the grey of the film's opening, so they read as one with it (the card stays white) */
.hc, .film-gray { background: #e4e3e2; } .hc + .film-gray { padding-top: 16px; }
.hc .hero-film { position: relative; } .hc .hero-film::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 48px; background: linear-gradient(rgba(228,227,226,0), #e4e3e2); pointer-events: none; }  /* no seam where the film ends */
/* height: the frame less 10%, lower still (down to 18% less) when the screen is short, so the card's buttons stay on the
   first screen; never more, so the logo is never cut. The cut is taken mostly from the top (61/39). */
.hc .hero-film video { display: block; width: 100%; object-fit: cover; object-position: 50% 61%; background: #eee;
  height: clamp(calc(100vw * .5625 * .82), calc(100vh - 204px), calc(100vw * .5625 * .9)); }
/* only the two buttons, floating over the film's lower edge (the film says the name and motto; the line is a hidden h1) */
.hc-card { position: relative; width: auto; margin: -30px auto 0; text-align: center; }
.hc-card .btn { padding: 15px 38px; font-size: 1.1rem; box-shadow: 0 14px 30px -14px rgba(228,87,57,.75); }
.hc-card .btn + .btn { background: #fff; color: #b8431f; }
@media (max-width: 700px) { .hc-card { margin-top: 14px; } }  /* a phone's film is short: the buttons would hide its closing words */
.btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn { display: inline-block; background: var(--orange); color: #1c1c1c; font-weight: 700; padding: 12px 28px; border-radius: 999px; text-decoration: none; border: 0; font: inherit; font-weight: 700; cursor: pointer; transition: transform .15s, background .15s; }
.btn:hover { background: #ffad73; transform: translateY(-1px); }
.btn.dark { background: var(--dark); color: #fff; } .btn.dark:hover { background: #333; }
.btn.gold { background: var(--gold); } .btn.sm { padding: 8px 20px; font-size: .95rem; }

/* sections */
section { padding: 56px 0; }
.band { background: var(--cream); } .paper { background: var(--paper); }
.narrow { max-width: 820px; } .center { text-align: center; }
.lead { font-size: 1.15rem; font-weight: 600; }
.cols { display: grid; gap: 32px; align-items: center; }
@media (min-width: 820px) { .cols.two { grid-template-columns: 1fr 1fr; } .cols.photo { grid-template-columns: 1fr 340px; } .cols.logo { grid-template-columns: 1fr 260px; } }
/* a page's own two columns (--cols on the element): side by side on a computer only, one under the other on a phone */
@media (min-width: 820px) { .cols.split { grid-template-columns: var(--cols); } }
@media (max-width: 819px) { .cols.split > img, .cols.split > video { width: min(100%, 340px); justify-self: center; } .no-phone { display: none; } }
.rounded { border-radius: var(--radius); box-shadow: 0 8px 30px -14px rgba(0,0,0,.35); width: 100%; } video.rounded { display: block; height: auto; }
.cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background: #fdeee2; border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 22px -14px rgba(0,0,0,.4); }
.band .card { background: #fff6ee; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card .pic { display: block; } .card .pic img { transition: transform .3s; } .card .pic:hover img { transform: scale(1.03); }
.card .in { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card .in .btn { align-self: flex-start; margin-top: auto; }
.card h3 { margin: 0; }
.card h3.with-emblem { display: flex; align-items: center; gap: 16px; } .card h3.with-emblem img { height: 42px; width: auto; aspect-ratio: auto; object-fit: contain; flex-shrink: 0; margin-block: -6px; }  /* the mechina's emblem left of its title, never squeezed, without making the title row taller than its neighbours' */
.quote { text-align: center; font-size: clamp(1.4rem, 3.2vw, 2.1rem); font-weight: 800; line-height: 1.5; }
.quote small { display: block; font-size: 1rem; font-weight: 500; margin-top: 12px; color: var(--muted); }
/* the home page's quote over a looping sunrise film: a soft dark veil keeps the white words readable on its bright sun */
.quote-film { position: relative; overflow: hidden; padding: 84px 0; background: #2b2018 center / cover url("/assets/img/quote-sunrise-poster.jpg"); }
.quote-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-film::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(20,12,6,.42), rgba(20,12,6,.52)); }
.quote-film .wrap { position: relative; } .quote-film .quote { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); } .quote-film .quote small { color: #f1e4d8; }
.logos { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: center; justify-content: center; margin: 26px 0; }
.logos img { height: 64px; width: auto; object-fit: contain; }
.team { display: grid; gap: 28px 22px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); list-style: none; padding: 0; }
.team img { border-radius: var(--radius); aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: 10px; }
.team h3 { font-size: 1.05rem; margin: 0; } .team p { margin: 0; font-size: .92rem; color: var(--muted); line-height: 1.4; }
.tiles { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.tile { padding: 34px 28px; background: var(--paper); } .tile:nth-child(even) { background: var(--cream); } .tile h3 { font-size: 1.4rem; }
.photo-band { min-height: 360px; background: #333 center / cover; color: #fff; display: grid; align-items: center; position: relative; padding: 60px 0; }
.photo-band::before { content: ""; position: absolute; inset: 0; background: rgba(15,12,10,.68); } .photo-band > .wrap { position: relative; }
.photo-band ul { margin-top: 12px; } .photo-band li { margin-bottom: .6em; }
.bank { background: #fff; border: 2px solid var(--line); border-radius: var(--radius); padding: 22px 26px; max-width: 460px; margin-inline: auto; text-align: start; }
.bank h3 { margin-bottom: .4em; } .bank p { margin: 0; }
.prose { max-width: 820px; } .prose h2 { margin-top: 1.6em; font-size: 1.5rem; } .prose li { margin-bottom: .6em; }

/* contact form (every page ends with it) */
.contact { background: var(--cream); position: relative; }
.contact .wrap { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .contact .wrap { grid-template-columns: 1fr 260px; } }
.contact form { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; } .contact .full { grid-column: 1 / -1; }
.contact h2 { font-size: 1.4rem; margin: 0 0 .3em; } .contact .sub { margin: 0 0 18px; }
label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
input, textarea { width: 100%; font: inherit; padding: 11px 14px; border: 1.5px solid #d9c7b8; border-radius: 10px; background: #fff; }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus { border-color: var(--navy); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { grid-column: 1 / -1; min-height: 1.6em; font-weight: 600; margin: 0; }
.form-note.ok { color: #1e6b3a; } .form-note.err { color: #a12222; }
.contact .logo { justify-self: center; width: 220px; }
@media (max-width: 560px) { .contact form { grid-template-columns: 1fr; } }

/* footer */
.foot { background: var(--dark); color: #eee; padding: 44px 0 30px; }
.foot .wrap { display: grid; gap: 28px; align-items: start; grid-template-columns: 1fr 1fr; }
@media (min-width: 820px) { .foot .wrap { grid-template-columns: 1fr 1fr 1fr; } }
/* on a phone the links and the contact column sit side by side, the organisation's block under both */
@media (max-width: 819px) { .foot .wrap > .org:last-child { grid-column: 1 / -1; } }
.foot .copy { margin: 28px 16px 0; text-align: center; }
.foot a { color: #fff; } .foot ul { list-style: none; padding: 0; margin: 0; } .foot li { margin-bottom: 6px; }
.foot .org { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.foot small { color: #bbb; }
.crumb { display: inline-block; margin-bottom: 14px; }

.measure { max-width: 820px; }
.contact.centered .wrap { grid-template-columns: 1fr; max-width: 760px; }
.contact.centered h2, .contact.centered .sub { text-align: center; }
.contact.centered .logo { display: none; }

/* a hero that is a wide group photo: at most about half a screen tall, cropped only at the feet so every face shows */
.hero.fit { aspect-ratio: 3 / 2; width: min(100%, 1280px); max-height: min(60vh, 600px); min-height: 0; margin-inline: auto; background-position: center 24%; }
.hero.fit::before { display: none; }
@media (max-width: 700px) { .hero.fit { width: 100%; max-height: none; background-position: center; } }

/* "from the breaking to the rising" (the activity page): three cards, the ruins in grey; when they come into view they
   turn over slowly, right to left, to the three projects in colour (each a way to its page), and each project's own card
   slides down from under it. They stay so. Without the script, or for whoever asked for less motion, all of it shows. */
.flips { margin-top: 30px; }
.flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-inline: calc(50% - min(492px, 50vw - 16px)); }
.flip-col { display: flex; flex-direction: column; gap: 14px; }
.flip { position: relative; z-index: 2; aspect-ratio: 1; perspective: 1400px; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); }
.flips.live .flip-in { transition: transform 1.6s cubic-bezier(.45, .05, .25, 1); }
.flips.armed .flip-col:not(.turned) .flip-in { transform: none; }
.flip-front, .flip-back { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius); overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flip-front { object-fit: cover; filter: grayscale(1) brightness(.85); }
.flip-back { transform: rotateY(180deg); display: block; color: #fff; text-decoration: none; box-shadow: 0 10px 26px -16px rgba(228,87,57,.7); }
.flip-back img, .flip-back video { display: block; width: 100%; height: 100%; object-fit: cover; }
.flip-back span { position: absolute; inset-inline: 0; bottom: 0; padding: 30px 10px 12px; font-weight: 800; background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.62)); }
.drop { position: relative; z-index: 1; text-align: start; flex: 1; }  /* the three project cards end on one line */
.flips.live .drop { transition: transform 1.1s cubic-bezier(.3, .1, .2, 1) 1.1s, opacity .7s ease 1.1s; }
.flips.armed .flip-col:not(.turned) .drop { transform: translateY(-85%); opacity: 0; }
@media (max-width: 700px) { .flip-grid { grid-template-columns: 1fr; gap: 34px; margin-inline: 0; } }

/* memorial pages (at the old site's addresses, not in the menu) */
.memorial-hero { min-height: clamp(200px, 22vw, 300px); }
.memorial-hero::before { background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55)); }
.memorial { max-width: 980px; }
.memorial-head { display: grid; gap: 28px; align-items: start; grid-template-columns: 1fr auto; margin-bottom: 36px; }
.memorial-head h2 { margin-bottom: .4em; } .facts { list-style: none; padding: 0; margin: 0; } .facts li { margin-bottom: 4px; }
.portrait { width: 220px; height: auto; border-radius: var(--radius); box-shadow: 0 10px 28px -16px rgba(0,0,0,.45); }
.story { display: grid; gap: 10px 40px; grid-template-columns: auto 1fr; } .story h2 { white-space: nowrap; } .story p { margin: 0 0 1em; }
@media (max-width: 700px) { .memorial-head { grid-template-columns: 1fr; } .memorial-head .portrait { order: -1; justify-self: center; width: min(220px, 70%); } .story { grid-template-columns: 1fr; } }
.memorial-end { background: var(--paper) center / min(760px, 92%) no-repeat url("/assets/img/memorial-wings.webp"); padding: 70px 0; text-align: center; position: relative; }
.memorial-end::before { content: ""; position: absolute; inset: 0; background: rgba(255,250,245,.72); }
.memorial-end p { position: relative; margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; }

/* the English donation page (/donations, for donors abroad) */
.en-hero h1 { max-width: 760px; }
.en-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 34px 0; }
.en-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: 0 10px 26px -16px rgba(0,0,0,.4); }
.en-bank { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 auto; text-align: left; }
.en-bank dt { font-weight: 700; } .en-bank dd { margin: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.en-receipt { max-width: 560px; margin: 22px auto 0; font-size: .95rem; } .en-closing { margin: 26px 0 0; font-size: 1.25rem; font-weight: 700; }
@media (max-width: 560px) { .en-photos { gap: 8px; } .en-bank { grid-template-columns: 1fr; gap: 2px; } .en-bank dd { margin-bottom: 10px; } }

/* the questions page: each answer under its question, quotable on its own */
.faq h2 { font-size: 1.3rem; margin: 1.6em 0 .4em; } .faq h2::before { width: 40px; height: 4px; margin-bottom: 10px; }

/* ---- design language: the heart's colours, and a winding edge where a cream part meets a white one ---- */
:root { --heart: linear-gradient(120deg, #f26a2b, #e45739); --heart-soft: linear-gradient(120deg, #f9a25e, #f07a52); }
.btn { background: var(--heart-soft); box-shadow: 0 8px 20px -10px rgba(228,87,57,.55); transition: transform .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(228,87,57,.65); }
main h2::before { content: ""; display: block; width: 56px; height: 5px; border-radius: 5px; background: var(--heart); margin-bottom: 14px; }
main .center h2::before, main h2.center::before { margin-inline: auto; }
.band, .contact { position: relative; }
:not(.band):not(.contact):not(.hero) + .band::before, :not(.band):not(.contact):not(.hero) + .contact::before,
.band:not(:has(+ .band, + .contact))::after, .contact:not(:has(+ .band, + .contact))::after {
  content: ""; position: absolute; inset-inline: 0; height: 34px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 34' preserveAspectRatio='none'%3E%3Cpath fill='%23f7e6d8' d='M0 34V20C180 2 360 2 540 14s360 22 540 10 270-22 360-20v30z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
:not(.band):not(.contact):not(.hero) + .band::before, :not(.band):not(.contact):not(.hero) + .contact::before { top: -33px; }
.band:not(:has(+ .band, + .contact))::after, .contact:not(:has(+ .band, + .contact))::after { bottom: -33px; transform: scaleY(-1); }