/* =====================================================================
   Fonts — self-hosted. Both are SIL Open Font License 1.1, which permits this
   explicitly. OFL clause 2 requires the licence to travel with every copy, and
   Google's webfont builds keep the copyright notice but drop the licence text,
   so the full texts sit beside the files: assets/fonts/OFL-Heebo.txt and
   OFL-SuezOne.txt. Neither font declares a Reserved Font Name. The files are
   unmodified, so nothing else in the licence applies to us.
   Served from our own origin on purpose: the Google Fonts stylesheet was a
   render-blocking third-party request (~750ms on mobile), and fonts.googleapis.com
   is one of the domains the kosher filters our visitors use may not resolve.

   The byte count is unchanged: Google was already serving one VARIABLE file per
   subset covering every weight, and these are those same files. What self-hosting
   buys is the round trips — the browser no longer has to reach fonts.googleapis.com
   and parse a stylesheet before it even learns the font URLs, which is why these
   can now be <link rel=preload>ed from our own <head>.

   It also fixes weight 600: the old request asked for 400;500;700;800;900, this
   stylesheet uses 600, and the browser was synthesising it. 900 was requested and
   never used. The variable range 400-800 below covers what is actually used.

   These are Google's own subset files, byte for byte, with only the URL changed.
   Cutting them down further was tried and abandoned: it saved about 5KB and it
   silently dropped the minus and multiplication signs the kaparot page uses in
   its quantity stepper. The unicode-range on each face means a file is fetched
   only when the page actually contains a character from it, so the latin-ext
   faces below cost nothing on a page that never needs them.
   ===================================================================== */
@font-face {
  font-family: 'Heebo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/heebo-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/heebo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Heebo'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/heebo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Suez One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/suez-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Suez One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/suez-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Suez One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/suez-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =====================================================================
   בני הישיבות הספרדים — דעת חיים אלעד
   Palette sampled from the campaign artwork: bordeaux / cream / gold.
   ===================================================================== */

:root {
  --bordeaux:       #571926;
  --bordeaux-light: #6b2231;
  --bordeaux-deep:  #411d1f;
  --gold:           #c9a15e;
  /* Darkened from #a9833f, which failed AA everywhere it carried text:
     3.43:1 on the cards, 2.97:1 on the page background, and 3.15:1 as the
     secondary button's hover fill. It is a text colour as well as a border
     and gradient colour, so the token itself moves rather than each use. */
  --gold-dark:      #7d5e26;
  --gold-soft:      #d9a983;

  --bg:        #f2edd9;
  --bg-card:   #fffdf8;
  --bg-ivory:  #f7f3e6;

  --text:        #2a1a1c;
  --text-muted:  #5a4446;
  --text-light:  #f7f3e6;
  --text-dim:    #e0d3c4;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --shadow-sm: 0 1px 3px rgba(87, 25, 38, .10);
  --shadow-md: 0 2px 14px rgba(87, 25, 38, .09);
  --shadow-lg: 0 8px 26px rgba(87, 25, 38, .14);

  --display: 'Suez One', 'Frank Ruhl Libre', Georgia, serif;
  --ui:      'Heebo', 'Assistant', 'Arial Hebrew', system-ui, sans-serif;

  --maxw: 1120px;

  /* height of the sticky masthead — anchor targets clear it when jumped to */
  --sticky-h: 70px;
}

/* Without this the sticky header covers the heading you just jumped to. */
#eo-main, #eo-about, #eo-sedarim, #eo-partnership {
  scroll-margin-top: calc(var(--sticky-h) + 14px);
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.65;
  direction: rtl;
  text-align: right;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
/* <picture> is an inline box, so it would sit between an img and the sized
   parent it measures its percentage height against (.eo-about-image has an
   aspect-ratio; the img inside is height:100%). display:contents takes the
   wrapper out of layout and leaves that relationship intact. */
picture { display: contents; }

a { color: var(--bordeaux); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--gold-dark); }

/* A focus ring has to clear 3:1 against whatever is behind it (WCAG 2.1 SC
   1.4.11), and controls on this site sit on cream, on white and on bordeaux.
   No single colour clears all three: the gold measured 2.05-2.36:1 on the
   light backgrounds. So the ring is two rings. The dark outline shows on the
   light backgrounds; the light halo fills the 2px offset gap and shows on the
   dark ones. Whichever background a control lands on, one of the two is
   clearly visible. */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--bordeaux);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg-card);
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  color: var(--bordeaux);
  margin-top: 0;
  letter-spacing: -.005em;
  text-wrap: balance;
}
h1 { font-size: clamp(1.7rem, 5.2vw, 2.6rem); line-height: 1.2; }
h3 { font-size: clamp(1.18rem, 3.4vw, 1.45rem); line-height: 1.35; }

.eo-container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.eo-skip {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.eo-skip:focus {
  position: static;
  width: auto; height: auto;
  clip: auto;
  display: inline-block;
  padding: 10px;
  background: var(--gold);
  color: var(--bordeaux);
  font-weight: 700;
  z-index: 10000;
}

/* ---------- buttons ---------- */
.eo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  min-height: 48px;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  border: 2px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.eo-btn-primary   { background-color: var(--bordeaux); color: var(--text-light); }
.eo-btn-primary:hover, .eo-btn-primary:focus { background-color: var(--bordeaux-light); color: var(--text-light); box-shadow: var(--shadow-md); }
.eo-btn-secondary { background-color: var(--gold); color: var(--bordeaux); border-color: var(--gold-dark); }
.eo-btn-secondary:hover, .eo-btn-secondary:focus { background-color: var(--gold-dark); color: var(--text-light); box-shadow: var(--shadow-md); }
.eo-btn-outline   { background: transparent; color: var(--bordeaux); border-color: var(--bordeaux); }
.eo-btn-outline:hover, .eo-btn-outline:focus { background-color: var(--bordeaux); color: var(--text-light); }

.eo-badge {
  display: inline-block;
  padding: 4px 13px;
  background-color: var(--gold);
  color: var(--bordeaux);
  font-weight: 700;
  font-size: .85rem;
  border-radius: var(--r-sm);
}

/* Ornamental rule — gold hairline with a centred lozenge */
.eo-orn {
  position: relative;
  height: 1px;
  max-width: 190px;
  margin: 16px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.eo-orn::after {
  content: "";
  position: absolute;
  left: 50%; top: -3.5px;
  width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--gold);
}
.eo-orn.eo-on-dark { background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); }
.eo-orn.eo-on-dark::after { background: var(--gold-soft); }

/* =====================================================================
   Top bar
   ===================================================================== */
.eo-top-bar {
  background-color: var(--bordeaux-deep);
  color: var(--text-dim);
  font-size: .86rem;
  border-bottom: 1px solid rgba(201, 161, 94, .3);
}
.eo-top-bar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  flex-wrap: wrap;
}
.eo-top-bar-contact {
  display: flex;
  align-items: center;
  gap: 6px 18px;
  flex-wrap: wrap;
  min-width: 0;
}
.eo-top-bar-contact a { color: inherit; }
.eo-top-bar-contact a:hover { color: var(--gold-soft); }
.eo-tb-sep { opacity: .4; }

.eo-share { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.eo-share-label { font-size: .82rem; opacity: .8; }
.eo-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background-color: rgba(247, 243, 230, .1);
  color: var(--gold-soft);
  transition: background-color .2s ease, color .2s ease;
}
.eo-share-btn:hover, .eo-share-btn:focus { background-color: var(--gold); color: var(--bordeaux-deep); }
.eo-share-btn svg { width: 17px; height: 17px; display: block; fill: currentColor; }

/* =====================================================================
   Masthead
   ===================================================================== */
.eo-main-header {
  background-color: var(--bg-card);
  box-shadow: 0 1px 0 rgba(87, 25, 38, .10), 0 2px 12px rgba(87, 25, 38, .06);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.eo-header-inner {
  display: flex;
  align-items: center;
  column-gap: 14px;
  row-gap: 0;
  flex-wrap: wrap;
  padding-block: 10px;
}

.eo-logo { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; }
.eo-logo-mark {
  flex: 0 0 auto;
  width: 46px; height: 46px;
  border-radius: 50%;
  background-color: var(--bg-ivory);
  box-shadow: 0 0 0 1px var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.eo-logo-mark img { width: 36px; display: block; }
.eo-logo-text { display: flex; flex-direction: column; min-width: 0; }
.eo-logo-title {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--bordeaux);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.eo-logo-subtitle {
  font-size: .82rem;
  color: var(--gold-dark);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 1px;
}

.eo-nav { flex: 0 0 auto; }
.eo-nav-list { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 26px; }
.eo-nav-link {
  display: inline-block;
  font-weight: 600;
  font-size: .97rem;
  color: var(--bordeaux);
  padding: 6px 0;
  position: relative;
  white-space: nowrap;
}
.eo-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 2px;
  background-color: var(--gold);
  transition: width .2s ease;
}
.eo-nav-link:hover::after,
.eo-nav-link:focus::after,
.eo-nav-link.eo-current::after { width: 100%; }

a.eo-btn.eo-header-cta {
  flex: 0 0 auto;
  padding: 9px 22px;
  min-height: 42px;
  font-size: .95rem;
}

/* =====================================================================
   Hero
   ===================================================================== */
.eo-hero {
  position: relative;
  color: var(--text-light);
  text-align: center;
  padding: 92px 0 96px;
  border-bottom: 4px solid var(--gold);
  /* Scrim strength is load-bearing, not decoration: at .82 the gold pre-title
     measured 3.52:1 against the bright ceiling in the photo, under the 4.5:1 AA
     floor for text this size. Re-measure before lowering these values. */
  /* The photo is the LCP element on mobile. It is swapped per breakpoint through
     --hero-img so the scrim above stays defined in exactly one place. The plain
     background-image line is the fallback for browsers without image-set(). */
  --hero-img: url('hero-1600.jpg');
  background-image:
    linear-gradient(180deg, rgba(65, 29, 31, .90) 0%, rgba(87, 25, 38, .90) 55%, rgba(65, 29, 31, .94) 100%),
    var(--hero-img);
  background-position: center center, center 38%;
  background-size: auto, cover;
  background-repeat: no-repeat;
}
@supports (background-image: image-set(url('hero-1600.webp') type('image/webp'))) {
  .eo-hero { --hero-img: image-set(url('hero-1600.webp') type('image/webp'), url('hero-1600.jpg') type('image/jpeg')); }
}
.eo-hero-inner { max-width: 820px; margin-inline: auto; }
.eo-hero-pretitle {
  display: inline-block;
  /* soft gold, not --gold: at 13px this text needs 4.5:1 and the darker gold missed it */
  color: var(--gold-soft);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .14em;
  margin-bottom: 18px;
}
.eo-hero h1 {
  color: var(--text-light);
  font-size: clamp(2rem, 7vw, 3.4rem);
  line-height: 1.15;
  margin: 0;
}
.eo-hero-rabbi {
  margin: 18px 0 0;
  font-family: var(--display);
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  line-height: 1.5;
  color: var(--gold-soft);
}
.eo-hero-rabbi small {
  display: block;
  font-family: var(--ui);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: rgba(247, 243, 230, .78);
  margin-top: 6px;
}
.eo-hero-subtitle {
  font-size: clamp(1rem, 2.6vw, 1.18rem);
  max-width: 680px;
  margin: 22px auto 34px;
  color: #efe7d4;
  line-height: 1.8;
}
.eo-hero-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

/* =====================================================================
   Pillars strip
   ===================================================================== */
.eo-pillars { background-color: var(--bg-ivory); border-bottom: 1px solid rgba(87, 25, 38, .08); }
.eo-pillars-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 0;
  list-style: none;
  margin: 0;
  padding: 18px 0;
  font-family: var(--display);
  font-size: clamp(.95rem, 2.4vw, 1.15rem);
  color: var(--bordeaux);
}
.eo-pillars-list li { padding-inline: 18px; position: relative; }
.eo-pillars-list li + li::before {
  content: "";
  position: absolute;
  inset-inline-end: 100%;
  top: 50%;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  transform: rotate(45deg);
  background: var(--gold);
}

/* =====================================================================
   Sections
   ===================================================================== */
.eo-section { padding: 78px 0; }
.eo-section-alt {
  background-color: rgba(87, 25, 38, .025);
  border-block: 1px solid rgba(87, 25, 38, .06);
}
.eo-section-header { text-align: center; margin-bottom: 52px; }
.eo-section-header h2 {
  display: inline-block;
  font-size: clamp(1.4rem, 4.2vw, 2rem);
  line-height: 1.3;
  border-bottom: 2px solid var(--gold);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.eo-section-header p {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 620px;
  margin-inline: auto;
}

/* ---------- about ---------- */
.eo-about-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 52px;
  align-items: start;
}
.eo-about-figure { margin: 0; }
.eo-about-image {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background-color: var(--bordeaux);
  aspect-ratio: 4 / 5;
}
.eo-about-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.eo-about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 161, 94, .9);
  border-radius: var(--r-lg);
  pointer-events: none;
}
.eo-about-caption {
  margin-top: 12px;
  text-align: center;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.eo-about-content { font-size: 1.1rem; line-height: 1.85; }
.eo-about-content h2 { font-size: clamp(1.35rem, 3.6vw, 1.75rem); margin-bottom: 8px; }
.eo-about-role {
  display: block;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--gold-dark);
  margin-bottom: 22px;
}
.eo-about-quote {
  background-color: var(--bg-card);
  border-inline-start: 4px solid var(--gold);
  padding: 24px 26px;
  margin: 30px 0 0;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.eo-about-quote p {
  font-family: var(--display);
  font-size: 1.16rem;
  line-height: 1.7;
  color: var(--bordeaux);
  margin: 0 0 12px;
}
.eo-about-quote cite {
  font-style: normal;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---------- press mention ---------- */
/*
 * External coverage, not another quote from us. It sits below the Rabbi's own
 * words and is deliberately quieter than them: a rule instead of a card, and
 * the paper's name and issue number in full so a reader can check it.
 */
.eo-press {
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(87, 25, 38, .12);
}
.eo-press-label {
  display: block;
  font-size: .76rem;
  font-weight: 700;
  color: var(--bordeaux);   /* the gold failed contrast at this size */
  margin-bottom: 8px;
}
.eo-press p {
  font-size: .97rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 8px;
}
.eo-press cite {
  font-style: normal;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-muted);
  opacity: .82;
}

/* ---------- sedarim ---------- */
.eo-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.eo-card {
  background: var(--bg-card);
  border-radius: var(--r-md);
  padding: 32px 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(87, 25, 38, .07);
  border-top: 3px solid var(--bordeaux);
  transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease;
}
.eo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--gold); }
.eo-card h3 { margin-bottom: 6px; }
.eo-card-rule { width: 42px; height: 2px; margin-bottom: 16px; background: var(--gold); }
.eo-card p { font-size: 1rem; color: var(--text-muted); line-height: 1.75; margin: 0; }

/* ---------- partnership ---------- */
.eo-partnership {
  background-color: var(--bordeaux);
  color: var(--text-light);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 62px 0;
  position: relative;
  overflow: hidden;
}
.eo-partnership::before {
  content: 'ב';
  position: absolute;
  bottom: -70px;
  inset-inline-start: -20px;
  font-size: 19rem;
  line-height: 1;
  font-family: var(--display);
  color: rgba(255, 255, 255, .035);
  user-select: none;
  pointer-events: none;
}
.eo-partnership-inner {
  position: relative;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  padding-inline: 26px;
}
.eo-partnership h2 {
  color: var(--text-light);
  font-size: clamp(1.5rem, 5vw, 2.15rem);
  margin: 16px 0 6px;
}
.eo-partnership-lead { color: #e7d8c9; font-size: 1.08rem; line-height: 1.85; margin: 18px 0 0; }
.eo-partnership-lead strong { color: var(--gold-soft); font-weight: 700; }

.eo-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin: 32px 0 30px; }
.eo-stat {
  flex: 1 1 190px;
  max-width: 260px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(201, 161, 94, .38);
  border-radius: var(--r-md);
  padding: 18px 14px;
}
.eo-stat-num {
  display: block;
  font-weight: 800;
  font-size: clamp(1.45rem, 5vw, 1.85rem);
  color: var(--gold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.eo-stat-label { display: block; margin-top: 4px; font-size: .88rem; color: rgba(247, 243, 230, .82); line-height: 1.5; }

.eo-progress {
  background-color: rgba(255, 255, 255, .12);
  border-radius: 50px;
  height: 18px;
  margin: 6px 0 12px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .2);
}
.eo-progress-fill {
  background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-soft) 100%);
  height: 100%;
  border-radius: 50px;
}
.eo-progress-caption { font-size: .95rem; color: rgba(247, 243, 230, .85); margin: 0 0 28px; }

/* ---------- closing ---------- */
.eo-closing {
  background-color: var(--bg-ivory);
  border-top: 1px solid rgba(87, 25, 38, .08);
  padding: 74px 0;
  text-align: center;
  margin-top: 70px;
}
.eo-closing-inner { max-width: 660px; margin-inline: auto; }
.eo-closing h2 { font-size: clamp(1.4rem, 4.2vw, 2rem); margin-bottom: 0; }
.eo-closing p { font-size: 1.1rem; color: var(--text-muted); line-height: 1.85; margin: 16px 0 32px; }

/* =====================================================================
   Donation page
   ===================================================================== */
.eo-donate-header {
  background-color: var(--bordeaux);
  color: var(--text-light);
  padding: 62px 0;
  text-align: center;
  border-bottom: 4px solid var(--gold);
}
.eo-donate-header h1 { color: var(--text-light); font-size: clamp(1.7rem, 6vw, 2.6rem); margin: 14px 0 0; }
.eo-donate-header .eo-lead {
  color: #e7d8c9;
  font-size: clamp(1rem, 2.6vw, 1.14rem);
  max-width: 660px;
  margin: 20px auto 0;
  line-height: 1.85;
}

.eo-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.eo-tier {
  background: var(--bg-card);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(87, 25, 38, .08);
  padding: 34px 26px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  position: relative;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
.eo-tier:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.eo-tier.eo-featured { border: 2px solid var(--gold); box-shadow: var(--shadow-lg); }
.eo-tier.eo-featured::before {
  content: 'החזקה מלאה';
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background-color: var(--gold);
  color: var(--bordeaux);
  padding: 4px 16px;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 50px;
}
.eo-tier h2 { font-size: 1.32rem; margin: 0 0 12px; }
.eo-tier-desc { font-size: .97rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
.eo-accent { color: var(--gold-dark); font-weight: 800; white-space: nowrap; }
.eo-tier-price {
  font-family: var(--ui);
  font-size: clamp(1.7rem, 5vw, 2rem);
  font-weight: 800;
  color: var(--bordeaux);
  margin: 0 0 16px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.eo-tier-price span {
  display: block;
  font-size: .9rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}
.eo-tier-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 8px;
  min-height: 44px;
  padding: 4px 8px;
  font-family: var(--ui);
  font-size: .88rem;
  line-height: 1.4;
  color: var(--bordeaux);
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.eo-tier-alt:hover { color: var(--gold-dark); }

/* optional dedication line inside a tier card */
.eo-ded { display: block; margin: 0 0 14px; text-align: right; }
.eo-ded-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.eo-ded-field {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  font-family: var(--ui);
  font-size: 16px;            /* ≥16px keeps iOS from zooming on focus */
  color: var(--text);
  background-color: var(--bg-card);
  border: 1px solid #d8c9b4;
  border-radius: var(--r-md);
}
.eo-ded-field:focus { border-color: var(--gold-dark); }

.eo-amount-field {
  width: 160px;
  margin-inline: auto;
  padding: 8px;
  min-height: 48px;
  text-align: center;
  font-family: var(--ui);
  font-weight: 800;
  font-size: 1.5rem;   /* ≥16px keeps iOS from zooming on focus */
  color: var(--bordeaux);
  background-color: var(--bg-card);
  border: 1px solid #d8c9b4;
  border-radius: var(--r-md);
  display: block;
}
.eo-amount-field:focus { border-color: var(--gold-dark); }

/* ---------- trust strip ---------- */
.eo-trust {
  background-color: var(--bg-ivory);
  border-block: 1px solid rgba(87, 25, 38, .08);
  padding: 28px 0;
}
.eo-trust-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .95rem;
  color: var(--text-muted);
}
.eo-trust-list li { display: flex; align-items: center; gap: 8px; }
.eo-trust-list svg { flex: 0 0 16px; width: 16px; height: 16px; fill: var(--gold-dark); }

/* =====================================================================
   Footer
   ===================================================================== */
.eo-footer {
  background-color: var(--bordeaux-deep);
  color: var(--text-dim);
  font-size: .95rem;
  line-height: 1.75;
  padding: 58px 0 24px;
  border-top: 4px solid var(--gold);
}
.eo-footer-grid { display: grid; grid-template-columns: 2.1fr 1fr 1.3fr; gap: 44px; }
.eo-footer p { margin: 0 0 14px; }
.eo-footer a { color: var(--text-dim); }
.eo-footer a:hover, .eo-footer a:focus { color: var(--gold-soft); }

.eo-footer-title {
  font-family: var(--display);
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1.3;
  margin: 0 0 18px;
}
.eo-footer-title-sm { font-size: 1.18rem; }
.eo-footer-pasuk { font-family: var(--display); color: var(--gold-soft); font-size: 1.05rem; }

.eo-footer-links, .eo-footer-contact { list-style: none; margin: 0; padding: 0; }
.eo-footer-links li { margin-bottom: 2px; }
.eo-footer-links a { display: inline-block; padding-block: 8px; }

.eo-footer-contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; }

/* The row's vertical padding is set here and nowhere else. A linked row is
   <span><a>…</a></span>, so padding the anchor as well used to stack on top of
   this one and push the text down while the icon stayed put — that is what left
   the envelope hovering above the address. The anchor instead pulls itself back
   over the same padding, keeping a ~44px tap target without adding height. */
.eo-footer-contact li > span:last-child { padding-block: 9px; }
.eo-footer-contact a { display: block; padding-block: 9px; margin-block: -9px; }

/* Centred on the first line of text rather than nudged by eye: the padding
   above it, plus half of whatever the line box has over the icon.
   Line height here is 1.75 (.eo-footer) — change one and this follows. */
.eo-footer-contact svg {
  flex: 0 0 17px; width: 17px; height: 17px; fill: var(--gold);
  margin-top: calc(9px + (1.75em - 17px) / 2);
}

.eo-footer-note {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(201, 161, 94, .28);
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(224, 211, 196, .72);
}

.eo-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid rgba(201, 161, 94, .22);
  font-size: .83rem;
  color: rgba(224, 211, 196, .7);
}
.eo-footer-bottom p { margin: 0; }

/* =====================================================================
   Tablet
   ===================================================================== */
@media (max-width: 992px) {
  .eo-container { padding-inline: 18px; }
  .eo-tiers { grid-template-columns: repeat(2, 1fr); }
  .eo-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  :root { --sticky-h: 92px; }   /* logo row + nav strip */

  /* the nav drops to its own compact strip under the logo row */
  .eo-nav {
    order: 3;
    flex: 1 0 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .eo-nav::-webkit-scrollbar { display: none; }
  .eo-nav-list { gap: 22px; }
  .eo-nav-link { font-size: .9rem; padding: 8px 0; }
}

/* =====================================================================
   Phone
   ===================================================================== */
@media (max-width: 768px) {
  body { font-size: 16.5px; }

  .eo-top-bar { font-size: .8rem; }
  .eo-top-bar-inner { padding-block: 4px; flex-wrap: nowrap; }
  .eo-top-bar-contact { flex-wrap: nowrap; overflow: hidden; }
  .eo-top-bar-contact > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eo-share-label { display: none; }

  .eo-header-inner { padding-block: 5px; column-gap: 10px; }
  .eo-logo-mark { width: 36px; height: 36px; }
  .eo-logo-mark img { width: 28px; }
  .eo-logo-title { font-size: 1.12rem; }
  .eo-logo-subtitle { font-size: .72rem; }
  .eo-logo-subtitle .eo-sub-long { display: none; }
  a.eo-btn.eo-header-cta { padding: 7px 14px; min-height: 40px; font-size: .86rem; }

  .eo-btn { width: 100%; max-width: 340px; }
  a.eo-btn.eo-header-cta { width: auto; max-width: none; }

  .eo-hero { padding: 62px 0 64px; --hero-img: url('hero-1100.jpg'); }
  @supports (background-image: image-set(url('hero-1100.webp') type('image/webp'))) {
    .eo-hero { --hero-img: image-set(url('hero-1100.webp') type('image/webp'), url('hero-1100.jpg') type('image/jpeg')); }
  }
  .eo-hero-pretitle { font-size: .8rem; letter-spacing: .1em; }
  .eo-hero-subtitle { margin-bottom: 28px; }
  .eo-hero-actions { flex-direction: column; align-items: center; gap: 12px; }

  .eo-pillars-list { font-size: .92rem; padding: 14px 0; }
  .eo-pillars-list li { padding-inline: 12px; }

  .eo-section { padding: 54px 0; }
  .eo-section-header { margin-bottom: 36px; }
  .eo-section-header h2 { display: block; border-bottom: 0; padding-bottom: 0; }
  .eo-section-header h2::after {
    content: "";
    display: block;
    width: 120px; height: 2px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }

  .eo-about-grid { grid-template-columns: 1fr; gap: 28px; }
  .eo-about-figure { max-width: 300px; margin-inline: auto; }

  .eo-cards { grid-template-columns: 1fr; gap: 18px; }
  .eo-card { padding: 26px 22px; }

  .eo-partnership { padding: 48px 0; }
  .eo-partnership::before { font-size: 12rem; bottom: -40px; }
  .eo-partnership-inner { padding-inline: 20px; }
  .eo-stat { flex: 1 1 100%; max-width: none; }

  .eo-closing { padding: 52px 0; margin-top: 50px; }

  .eo-tiers { grid-template-columns: 1fr; }

  .eo-footer { padding: 44px 0 20px; }
  .eo-footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .eo-footer-bottom { flex-direction: column; text-align: center; margin-top: 28px; }
}

@media (max-width: 420px) {
  .eo-container { padding-inline: 16px; }
  body { font-size: 16px; }
}

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

/* Visually hidden, still announced by screen readers */
.eo-screen-reader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* note under the free-amount card */
.eo-tier-hint {
  margin: 0 0 12px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* =====================================================================
   Site upgrade, November 2026 (PLAN-site-upgrade). Additions only — no
   existing class above was changed. Same tokens; gold never carries text on
   cream (it fails contrast), only on bordeaux or as a rule.
   ===================================================================== */

/* ---------- header: seven menu items + mobile menu ---------- */
.eo-nav { order: 2; }
a.eo-btn.eo-header-cta { order: 3; }
.eo-nav-list { gap: 22px; }
.eo-menu-btn { display: none; }

@media (max-width: 1100px) and (min-width: 901px) {
  .eo-nav-list { gap: 16px; }
  .eo-nav-link { font-size: .92rem; }
  .eo-logo-subtitle .eo-sub-long { display: none; }
}

@media (max-width: 900px) {
  .eo-menu-btn {
    order: 2;
    display: none;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 6px 12px;
    font: 700 .92rem/1 var(--ui);
    color: var(--bordeaux);
    background: transparent;
    border: 1px solid rgba(87, 25, 38, .25);
    border-radius: var(--r-md);
    cursor: pointer;
  }
  .eo-js .eo-menu-btn { display: inline-flex; }
  .eo-menu-icon, .eo-menu-icon::before, .eo-menu-icon::after {
    display: block; width: 16px; height: 2px; background: currentColor; border-radius: 1px; position: relative;
  }
  .eo-menu-icon::before, .eo-menu-icon::after { content: ""; position: absolute; inset-inline-start: 0; }
  .eo-menu-icon::before { top: -5px; }
  .eo-menu-icon::after { top: 5px; }
  .eo-menu-btn[aria-expanded="true"] .eo-menu-icon { background: transparent; }
  .eo-menu-btn[aria-expanded="true"] .eo-menu-icon::before { top: 0; transform: rotate(45deg); }
  .eo-menu-btn[aria-expanded="true"] .eo-menu-icon::after { top: 0; transform: rotate(-45deg); }
  a.eo-btn.eo-header-cta { order: 3; }

  /* without JS the strip stays as it was (scrolls sideways); with JS it folds */
  .eo-nav { order: 4; }
  .eo-js .eo-nav { display: none; overflow: visible; }
  .eo-js .eo-nav.eo-open { display: block; }
  .eo-js .eo-nav-list { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 0 10px; }
  .eo-js .eo-nav-list li + li { border-top: 1px solid rgba(87, 25, 38, .08); }
  .eo-js .eo-nav-link { display: block; padding: 12px 4px; font-size: 1rem; }
  .eo-js .eo-nav-link::after { display: none; }
  .eo-js .eo-nav-link.eo-current { color: var(--gold-dark); }
}
@media (max-width: 900px) { .eo-js { --sticky-h: 64px; } }

/* ---------- breadcrumbs ---------- */
.eo-crumbs { background: var(--bg-ivory); border-bottom: 1px solid rgba(87, 25, 38, .08); font-size: .88rem; }
.eo-crumbs ol { display: flex; flex-wrap: wrap; list-style: none; margin: 0 auto; padding-block: 9px; gap: 4px 0; }
.eo-crumbs li { color: var(--text-muted); }
.eo-crumbs li + li::before { content: "›"; margin-inline: 8px; color: var(--text-muted); }
.eo-crumbs a { color: var(--bordeaux); }

/* ---------- inner-page header ---------- */
.eo-page-head {
  position: relative;
  color: var(--text-light);
  background: var(--bordeaux-deep);
  border-bottom: 4px solid var(--gold);
  overflow: hidden;
}
.eo-page-head-img { position: absolute; inset: 0; }
.eo-page-head-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-page-head::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(65, 29, 31, .86) 0%, rgba(87, 25, 38, .88) 60%, rgba(65, 29, 31, .92) 100%);
}
.eo-page-head .eo-container { position: relative; z-index: 1; padding-block: 64px 60px; text-align: center; }
.eo-page-head h1 { color: var(--text-light); margin: 0; font-size: clamp(1.8rem, 5.6vw, 2.8rem); }
.eo-page-head p { max-width: 680px; margin: 14px auto 0; color: #efe7d4; font-size: clamp(1rem, 2.4vw, 1.14rem); line-height: 1.75; }
.eo-page-head .eo-kicker { display: inline-block; color: var(--gold-soft); font-weight: 700; font-size: .9rem; letter-spacing: .1em; margin: 0 0 12px; }

/* ---------- home hero with the new photograph ---------- */
.eo-hero.eo-hero-bm { --hero-img: url('img/beit-midrash-wide-1200.jpg'); background-position: center center, center 45%; overflow: hidden; }
@supports (background-image: image-set(url('img/beit-midrash-wide-1600.webp') type('image/webp'))) {
  .eo-hero.eo-hero-bm { --hero-img: image-set(url('img/beit-midrash-wide-1600.webp') type('image/webp'), url('img/beit-midrash-wide-1200.jpg') type('image/jpeg')); }
}
@media (max-width: 768px) {
  .eo-hero.eo-hero-bm { --hero-img: url('img/beit-midrash-wide-1200.jpg'); }
  @supports (background-image: image-set(url('img/beit-midrash-wide-800.webp') type('image/webp'))) {
    .eo-hero.eo-hero-bm { --hero-img: image-set(url('img/beit-midrash-wide-800.webp') type('image/webp'), url('img/beit-midrash-wide-1200.jpg') type('image/jpeg')); }
  }
}
.eo-hero-bm > .eo-container { position: relative; z-index: 2; }
.eo-hero-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; z-index: 0; }
.eo-hero-loop.eo-on { opacity: .2; }
/* The scrim is load-bearing (STATUS §3): the loop sits above it, so it is darkened
   until the soft-gold pre-title still measures 4.5:1 against its brightest frame. */
.eo-hero-loop { filter: brightness(.38) saturate(.8); }
.eo-hero-bm a.eo-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .75); }

/* ---------- shared blocks ---------- */
.eo-img { display: block; width: 100%; height: auto; background: var(--bg-ivory); }
.eo-date { margin: 0 0 6px; font-size: .86rem; font-weight: 600; color: var(--text-muted); }
.eo-more { font-weight: 700; }
.eo-more::after { content: " ←"; }
.eo-center { text-align: center; margin-top: 34px; }
.eo-lead-text { font-size: 1.1rem; line-height: 1.85; max-width: 760px; margin-inline: auto; }
.eo-lead-text p { margin: 0 0 16px; }
.eo-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eo-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* ---------- activity cards (front page) ---------- */
.eo-acards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eo-acard, .eo-ecard, .eo-news {
  background: var(--bg-card);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(87, 25, 38, .07);
  overflow: hidden;
}
.eo-acard { border-top: 3px solid var(--bordeaux); transition: transform .25s ease, box-shadow .25s ease, border-top-color .25s ease; }
.eo-acard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-top-color: var(--gold); }
.eo-acard-link, .eo-ecard-link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.eo-acard-link:hover, .eo-acard-link:focus, .eo-ecard-link:hover, .eo-ecard-link:focus { color: inherit; }
.eo-acard-body { padding: 22px 22px 24px; }
.eo-acard h3 { margin-bottom: 6px; }
.eo-acard p { font-size: .98rem; color: var(--text-muted); line-height: 1.7; margin: 0; }
.eo-acard p.eo-acard-when { margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--bordeaux); }

/* ---------- event cards ---------- */
.eo-ecards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.eo-ecards.eo-ecards-3 { grid-template-columns: repeat(3, 1fr); }
.eo-ecard { transition: transform .25s ease, box-shadow .25s ease; }
.eo-ecard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.eo-ecard-body { padding: 16px 18px 20px; }
.eo-ecard-title { font-size: 1.12rem; line-height: 1.4; margin: 0 0 6px; }
.eo-ecard p { margin: 0; font-size: .94rem; color: var(--text-muted); line-height: 1.65; }
.eo-ecard p.eo-date { margin-bottom: 6px; font-size: .84rem; }

/* ---------- news ---------- */
.eo-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eo-news-body { padding: 18px 20px 22px; }
.eo-news-title { font-size: 1.15rem; line-height: 1.4; margin: 0 0 8px; }
.eo-news-title a { color: var(--bordeaux); }
.eo-news p { margin: 0 0 10px; font-size: .98rem; color: var(--text-muted); line-height: 1.7; }
.eo-news p.eo-date { margin-bottom: 6px; }
.eo-news-list { display: grid; gap: 22px; max-width: 900px; margin-inline: auto; }
.eo-news-full { display: grid; grid-template-columns: 300px 1fr; align-items: start; scroll-margin-top: calc(var(--sticky-h) + 14px); }
.eo-news-full:not(:has(.eo-news-img)) { grid-template-columns: 1fr; }
.eo-news-full .eo-news-body { padding: 22px 26px 18px; }
.eo-news-full p { color: var(--text); font-size: 1.02rem; }
.eo-news-full p.eo-date { color: var(--text-muted); font-size: .88rem; }
.eo-bsd { text-align: start; font-size: .9rem; color: var(--text-muted); margin: 0 0 18px; }

/* ---------- Rav block: video card under the quote ---------- */
.eo-vcard { display: flex; gap: 16px; align-items: center; margin-top: 22px; padding: 12px; background: var(--bg-card); border: 1px solid rgba(87, 25, 38, .1); border-radius: var(--r-md); color: var(--text); box-shadow: var(--shadow-sm); }
.eo-vcard:hover, .eo-vcard:focus { color: var(--text); box-shadow: var(--shadow-md); }
.eo-vcard-thumb { position: relative; flex: 0 0 150px; border-radius: var(--r-sm); overflow: hidden; }
.eo-vcard-thumb img { display: block; width: 100%; height: auto; }
.eo-vcard-thumb::after {
  content: ""; position: absolute; inset-inline-start: 50%; top: 50%; width: 40px; height: 40px; margin: -20px -20px 0 0;
  border-radius: 50%; background: rgba(87, 25, 38, .88) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f7f3e6' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.eo-vcard-text strong { display: block; font-family: var(--display); font-weight: 400; color: var(--bordeaux); font-size: 1.1rem; }
.eo-vcard-text span { font-size: .9rem; color: var(--text-muted); }

/* ---------- video player ---------- */
.eo-video { margin: 0; }
.eo-video-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #1c0f10; box-shadow: var(--shadow-lg); aspect-ratio: 16 / 9; }
.eo-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: #1c0f10; }
.eo-video-caption { padding: 14px 4px 0; }
.eo-video-title { display: inline; font-size: 1.2rem; margin: 0; }
.eo-video-len { margin-inline-start: 10px; font-size: .88rem; font-weight: 600; color: var(--text-muted); }
.eo-video-caption p { margin: 8px 0 14px; color: var(--text-muted); font-size: 1rem; }
.eo-videos { display: grid; gap: 54px; max-width: 880px; margin-inline: auto; }
.eo-video-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 46px; }
.eo-video-index a { display: block; color: var(--text); }
.eo-video-index img { display: block; width: 100%; height: auto; border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.eo-video-index strong { display: block; margin-top: 8px; font-size: .95rem; color: var(--bordeaux); }
.eo-video-index span { font-size: .84rem; color: var(--text-muted); }

/* ---------- gallery + lightbox ---------- */
.eo-gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.eo-gallery figure { margin: 0; }
.eo-gallery a { display: block; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }
.eo-gallery a img { transition: transform .35s ease; }
.eo-gallery a:hover img, .eo-gallery a:focus img { transform: scale(1.03); }
.eo-gallery figcaption { margin-top: 6px; font-size: .86rem; color: var(--text-muted); line-height: 1.45; }
.eo-gallery-strip .eo-gallery { grid-template-columns: repeat(6, 1fr); }
.eo-gallery-strip figcaption { display: none; }
.eo-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; list-style: none; margin: 0 0 34px; padding: 0; }
.eo-chips a { display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1px solid rgba(87, 25, 38, .25); background: var(--bg-card); color: var(--bordeaux); font-weight: 600; font-size: .94rem; }
.eo-chips a[aria-current="page"], .eo-chips a[aria-current="true"] { background: var(--bordeaux); color: var(--text-light); border-color: var(--bordeaux); }
.eo-lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 96vh; overflow: visible; }
.eo-lightbox::backdrop { background: rgba(28, 15, 16, .92); }
.eo-lightbox figure { margin: 0; text-align: center; }
.eo-lightbox img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; border-radius: var(--r-sm); background: #000; }
.eo-lightbox figcaption { color: var(--text-light); margin-top: 10px; font-size: 1rem; }
.eo-lb-count { color: var(--text-dim); font-size: .9rem; margin-inline-start: 8px; }
.eo-lightbox button {
  position: fixed; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(247, 243, 230, .92); color: var(--bordeaux); font-size: 30px; line-height: 1;
}
.eo-lb-close { top: 16px; inset-inline-end: 16px; }
.eo-lb-prev { top: 50%; inset-inline-start: 14px; margin-top: -24px; }
.eo-lb-next { top: 50%; inset-inline-end: 14px; margin-top: -24px; }

/* ---------- activities page ---------- */
.eo-chip-nav { position: sticky; top: var(--sticky-h); z-index: 50; background: var(--bg); padding: 12px 0; border-bottom: 1px solid rgba(87, 25, 38, .08); }
.eo-chip-nav .eo-chips { margin: 0; flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
.eo-chip-nav .eo-chips::-webkit-scrollbar { display: none; }
.eo-chip-nav .eo-chips a { white-space: nowrap; }
.eo-act { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 56px 0; border-bottom: 1px solid rgba(87, 25, 38, .08); scroll-margin-top: calc(var(--sticky-h) + 70px); }
.eo-act:nth-child(even) .eo-act-img { order: 2; }
.eo-act.eo-act-noimg { grid-template-columns: 1fr; max-width: 760px; }
.eo-act-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.eo-act h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-bottom: 10px; }
.eo-act p { font-size: 1.05rem; line-height: 1.85; margin: 0 0 14px; }
.eo-facts { margin: 18px 0 0; padding: 16px 18px; background: var(--bg-card); border-inline-start: 3px solid var(--gold); border-radius: var(--r-sm); display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .97rem; }
.eo-facts dt { font-weight: 700; color: var(--bordeaux); }
.eo-facts dd { margin: 0; }

/* ---------- about / rav ---------- */
.eo-split { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.eo-split-img { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.eo-roles { list-style: none; margin: 14px 0 22px; padding: 0; }
.eo-roles li { position: relative; padding: 8px 22px 8px 0; border-bottom: 1px solid rgba(87, 25, 38, .08); font-weight: 600; }
.eo-roles li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; transform: rotate(45deg); background: var(--gold); }
.eo-weekly { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: grid; gap: 12px; }
.eo-weekly li { display: grid; grid-template-columns: 220px 1fr; gap: 14px; padding: 14px 18px; background: var(--bg-card); border-radius: var(--r-sm); box-shadow: var(--shadow-sm); }
.eo-weekly strong { font-family: var(--display); font-weight: 400; color: var(--bordeaux); font-size: 1.1rem; }
.eo-weekly span { color: var(--text-muted); }
.eo-weekly em { display: block; font-style: normal; font-size: .9rem; font-weight: 600; color: var(--bordeaux); margin-top: 4px; }
.eo-cycle { list-style: none; margin: 0 auto; padding: 0; max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.eo-cycle li { padding: 16px 20px; background: var(--bg-card); border-radius: var(--r-sm); border-top: 2px solid var(--gold); box-shadow: var(--shadow-sm); }
.eo-cycle h3 { font-size: 1.12rem; margin: 0 0 6px; }
.eo-cycle p { margin: 0; color: var(--text-muted); font-size: .98rem; line-height: 1.7; }
.eo-cycle a { font-size: .9rem; font-weight: 700; }
.eo-transparency { max-width: 760px; margin-inline: auto; padding: 24px 26px; background: var(--bg-card); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.eo-transparency ul { margin: 0; padding-inline-start: 20px; }
.eo-transparency li { margin-bottom: 8px; }
.eo-press-thumb { display: block; max-width: 420px; margin-top: 14px; border-radius: var(--r-sm); overflow: hidden; box-shadow: var(--shadow-sm); }

/* ---------- donate tiers: photo on top ---------- */
.eo-tier-img { margin: -34px -26px 18px; border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }

/* ---------- event page ---------- */
.eo-event-text { max-width: 760px; margin: 0 auto 40px; font-size: 1.08rem; line-height: 1.85; }
.eo-event-text p { margin: 0 0 14px; }

/* ---------- thanks page video ---------- */
.eo-thanks-video { max-width: 640px; margin: 10px auto 34px; text-align: start; }
.eo-thanks-video h2 { text-align: center; font-size: 1.35rem; margin-bottom: 14px; }

@media (max-width: 992px) {
  .eo-acards, .eo-news-grid, .eo-grid-3, .eo-ecards.eo-ecards-3 { grid-template-columns: repeat(2, 1fr); }
  .eo-ecards, .eo-grid-4, .eo-video-index { grid-template-columns: repeat(2, 1fr); }
  .eo-gallery { grid-template-columns: repeat(3, 1fr); }
  .eo-gallery-strip .eo-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .eo-pillars-list { max-width: 420px; margin-inline: auto; }
  .eo-acards, .eo-news-grid, .eo-grid-3, .eo-ecards, .eo-ecards.eo-ecards-3 { grid-template-columns: 1fr; }
  .eo-gallery, .eo-gallery-strip .eo-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .eo-act { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .eo-act:nth-child(even) .eo-act-img { order: 0; }
  .eo-split { grid-template-columns: 1fr; gap: 26px; }
  .eo-split-img { max-width: 340px; margin-inline: auto; }
  .eo-news-full { grid-template-columns: 1fr; }
  .eo-weekly li { grid-template-columns: 1fr; gap: 4px; }
  .eo-cycle { grid-template-columns: 1fr; }
  .eo-vcard-thumb { flex-basis: 110px; }
  .eo-page-head .eo-container { padding-block: 44px 42px; }
  .eo-lightbox button { width: 44px; height: 44px; }
}

/* phone header: logo, menu and donate on one row */
@media (max-width: 480px) {
  .eo-header-inner { column-gap: 8px; }
  .eo-menu-btn { padding: 6px 9px; font-size: .86rem; min-height: 40px; }
  .eo-logo-mark { width: 32px; height: 32px; }
  .eo-logo-mark img { width: 25px; }
  .eo-logo-title { font-size: 1rem; }
  .eo-logo-subtitle { font-size: .66rem; }
  a.eo-btn.eo-header-cta { padding: 6px 11px; font-size: .84rem; }
}
@media (max-width: 480px) {
  .eo-header-inner { flex-wrap: wrap; }
  .eo-menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .eo-menu-btn { width: 42px; justify-content: center; padding: 0; }
}

/* chips (activities anchors, events years, gallery topics) — one look everywhere.
   Desktop: wraps to centred rows inside the container. Phone: one scrolling row
   whose first and last chip clear the screen edge. (Manager, 5.11.2026) */
.eo-chips { gap: 12px 14px; }
.eo-chips a { padding: 10px 18px; line-height: 1.2; }
.eo-chip-nav { padding: 14px 0; }
@media (min-width: 769px) {
  .eo-chip-nav .eo-chips { flex-wrap: wrap; justify-content: center; overflow: visible; }
}
@media (max-width: 768px) {
  .eo-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none;
              margin-inline: -16px; padding: 2px 16px 4px; scroll-padding-inline: 16px; }
  .eo-chips::-webkit-scrollbar { display: none; }
  .eo-chips a { white-space: nowrap; padding: 9px 16px; }
}

/* main menu: more air on wide screens, tighter where seven items barely fit */
@media (min-width: 1200px) { .eo-nav-list { gap: 28px; } }
@media (max-width: 1199px) and (min-width: 1101px) { .eo-nav-list { gap: 20px; } }
.eo-chips li { flex: 0 0 auto; }
@media (max-width: 768px) { .eo-chip-nav .eo-chips { margin: 0 -16px; } }

/* gallery v2 (5.11.2026): three columns, no visible captions (they live in the
   lightbox), a short last row centred; event pages with 1-3 photos get a lead
   photo and two large columns under it */
.eo-gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.eo-gallery > li { flex: 0 0 calc((100% - 32px) / 3); }
.eo-gallery-strip .eo-gallery > li { flex-basis: calc((100% - 32px) / 3); }
.eo-gallery.eo-gallery-feature { max-width: 900px; margin-inline: auto; }
.eo-gallery-feature > li { flex: 0 0 calc((100% - 16px) / 2); }
.eo-gallery-feature > li.eo-gallery-lead { flex-basis: 100%; }
.eo-gallery-feature img { height: auto; }
@media (max-width: 768px) {
  .eo-gallery, .eo-gallery-strip .eo-gallery { gap: 10px; }
  .eo-gallery > li, .eo-gallery-strip .eo-gallery > li { flex-basis: calc((100% - 10px) / 2); }
  .eo-gallery-feature > li.eo-gallery-lead { flex-basis: 100%; }
}
.eo-gallery.eo-gallery-2col { max-width: 900px; margin-inline: auto; }
.eo-gallery-2col > li { flex: 0 0 calc((100% - 16px) / 2); }
@media (max-width: 768px) { .eo-gallery-2col > li { flex-basis: calc((100% - 10px) / 2); } }

/* newspaper clipping beside the quote (Rav page) */
.eo-clip { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; margin-top: 28px; }
.eo-clip-img { display: block; background: #fff; padding: 8px; border: 1px solid rgba(87, 25, 38, .15); box-shadow: var(--shadow-md); transform: rotate(-.6deg); }
.eo-clip-img:hover, .eo-clip-img:focus { box-shadow: var(--shadow-lg); }
.eo-clip-img img { display: block; width: 100%; height: auto; }
@media (max-width: 768px) { .eo-clip { grid-template-columns: 1fr; } .eo-clip-img { max-width: 360px; } }

/* about page */
.eo-wide-img { max-width: 1000px; margin: 0 auto 34px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.eo-about-rav { display: grid; grid-template-columns: 240px 1fr; gap: 26px; align-items: start; margin: 8px 0 18px; }
.eo-about-rav-img { border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-md); }
.eo-about-rav p { margin: 0 0 12px; }
@media (max-width: 768px) { .eo-about-rav { grid-template-columns: 1fr; } .eo-about-rav-img { max-width: 260px; margin-inline: auto; } }
.eo-transparency-card { display: flex; flex-wrap: wrap; gap: 20px 32px; align-items: center; justify-content: space-between; }
.eo-transparency-card ul { flex: 1 1 320px; }
.eo-pdf-btn { display: inline-flex; align-items: center; gap: 10px; }
.eo-pdf-btn svg { width: 22px; height: 22px; flex: 0 0 auto; fill: currentColor; }

/* the small kicker used for בס"ד on /news/ — quieter than a title kicker */
.eo-page-head .eo-kicker.eo-bsd-kicker { font-size: .78rem; letter-spacing: 0; opacity: .75; font-weight: 500; }

/* lightbox v2 (5.11.2026): a full-viewport layer; the photo is centred and kept
   inside the window whatever its orientation; arrows are SVG (the ‹ › characters
   are bidi-mirrored and showed reversed in RTL). Next (left, pointing left),
   previous (right, pointing right). */
.eo-lightbox[open] { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0;
                     display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; background: transparent; }
.eo-lightbox figure { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 100vw; }
.eo-lightbox img { display: block; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); width: auto; height: auto; object-fit: contain; margin: 0 auto; }
.eo-lightbox figcaption { max-width: calc(100vw - 32px); text-align: center; padding: 0 64px; }
.eo-lightbox button { display: flex; align-items: center; justify-content: center; }
.eo-lightbox button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.eo-lb-close { top: 14px; inset-inline-end: 14px; }
.eo-lb-prev { inset-inline-start: 12px; }   /* RTL: right side */
.eo-lb-next { inset-inline-end: 12px; }     /* RTL: left side */
@media (max-width: 600px) {
  .eo-lb-prev, .eo-lb-next { top: auto; bottom: 14px; margin-top: 0; }
  .eo-lightbox figcaption { padding: 0 8px; }
}

/* Home hero, layered (5.11.2026): photo → loop video → ONE bordeaux scrim → text.
   The scrim used to live in background-image, under the video; the video then
   sat on top at partial opacity and greyed the hero when it started. Now the
   same gradient, same opacity, covers photo and video alike, so the only change
   when the loop starts is the motion. The scrim strength is unchanged (STATUS §3). */
.eo-hero.eo-hero-bm { background-image: var(--hero-img); background-position: center 45%; background-size: cover; isolation: isolate; }
.eo-hero.eo-hero-bm::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(65, 29, 31, .90) 0%, rgba(87, 25, 38, .90) 55%, rgba(65, 29, 31, .94) 100%);
}
.eo-hero.eo-hero-bm .eo-hero-loop { z-index: 0; filter: none; opacity: 0; }
.eo-hero.eo-hero-bm .eo-hero-loop.eo-on { opacity: 1; }
/* scrim strength as one variable, tuned by measurement (see STATUS §3) */
.eo-hero.eo-hero-bm { --scrim: .90; }
.eo-hero.eo-hero-bm::after {
  background: linear-gradient(180deg, rgba(65, 29, 31, var(--scrim)) 0%, rgba(87, 25, 38, var(--scrim)) 55%, rgba(65, 29, 31, calc(var(--scrim) + .04)) 100%);
}
/* 5.11.2026: lighter scrim at the manager's request. .78 is the lowest value at
   which every hero line holds >= 4.5:1 against the AVERAGE luminance behind it,
   on the photo and across the loop (min 4.59, pre-title at 1024). The soft shadow
   is extra margin over bright frames (ceiling lights), not counted in the figure. */
.eo-hero.eo-hero-bm { --scrim: .78; }
.eo-hero.eo-hero-bm .eo-hero-pretitle, .eo-hero.eo-hero-bm .eo-hero-rabbi,
.eo-hero.eo-hero-bm .eo-hero-subtitle, .eo-hero.eo-hero-bm h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.eo-tier-more { margin: -6px 0 0; font-size: .9rem; }
.eo-tier-more a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
/* the "watch the Rav explain" link under a tier's text: its own line, quieter */
.eo-tier-more { margin: 12px 0 20px; font-size: .9em; }
.eo-tier-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; }
.eo-tier-more a:hover, .eo-tier-more a:focus { text-decoration: underline; text-underline-offset: 3px; }
.eo-tier-more svg { width: 18px; height: 18px; flex: 0 0 auto; padding: 3px; border-radius: 50%; background: var(--bordeaux); fill: var(--text-light); }
/* "ראש הכולל" made the menu longer. The container stops at 1120px, so the menu
   has the same room at every width above ~1160: 20px between items there. */
@media (min-width: 1200px) { .eo-nav-list { gap: 20px; } }
/* donate: the price sits under the text; only the field + button go to the bottom,
   so a short text no longer leaves a hole above the price */
.eo-tier > div:last-child { display: flex; flex-direction: column; flex: 1 1 auto; }
.eo-tier > div:last-child .eo-tier-price { margin-top: 20px; }
.eo-tier > div:last-child .eo-ded,
.eo-tier > div:last-child > .eo-btn:first-of-type,
.eo-tier > div:last-child .eo-tier-hint { margin-top: auto; }
.eo-tier > div:last-child .eo-ded + .eo-btn { margin-top: 0; }
.eo-tier { justify-content: flex-start; }

/* donate cards, aligned ACROSS the row (the manager, 5.11.2026): every card is a
   subgrid of eight fixed rows — image, title, text, video link, price, field/hint,
   button, alternative link — so prices, fields and buttons sit on one line in
   each row of cards, whatever a card lacks. An absent slot is an empty track of
   height 0. Browsers without subgrid keep the flex layout above. */
@supports (grid-template-rows: subgrid) {
  .eo-tiers { row-gap: 26px; }
  .eo-tier { display: grid; grid-row: span 8; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .eo-tier > div, .eo-tier > div:last-child { display: contents; }  /* beats the flex rule on :last-child */
  .eo-tier .eo-tier-img    { grid-row: 1; margin-bottom: 18px; }
  .eo-tier h2              { grid-row: 2; }
  .eo-tier .eo-tier-desc   { grid-row: 3; }
  .eo-tier .eo-tier-more   { grid-row: 4; margin: 12px 0 0; }
  .eo-tier .eo-tier-price  { grid-row: 5; margin: 20px 0 14px; align-self: end; }
  .eo-tier .eo-ded,
  .eo-tier .eo-tier-hint   { grid-row: 6; margin: 0 0 12px; align-self: end; }
  .eo-tier .eo-btn         { grid-row: 7; margin: 0; align-self: end; }
  .eo-tier .eo-tier-alt    { grid-row: 8; margin-top: 12px; justify-self: center; align-self: start; }
}

/* Home hero, panel (the manager, 5.11.2026): the video is to be SEEN, so the
   full-width scrim drops to a light .15 wash (only to even the colour of photo and
   loop), and the text gets its own bordeaux panel instead. Contrast is now carried
   by the panel, not by the scrim: every line is measured against the panel
   (tools/qa/hero-contrast.py, "panel88"), and must hold >= 4.5:1. At .82 the
   pre-title fell to 4.1 over the ceiling lights; at .88 the weakest line is 4.8
   even against the brightest pixel. Without backdrop-filter the panel is more
   opaque (.93), since nothing blurs what is behind. */
.eo-hero.eo-hero-bm { --scrim: .15; padding: 72px 0 76px; }
.eo-hero.eo-hero-bm .eo-hero-inner {
  width: calc(100% - 40px); max-width: 760px;
  padding: 40px 48px;
  background: rgba(87, 25, 38, .93);
  border: 1px solid rgba(201, 161, 94, .75);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(20, 8, 10, .28);
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .eo-hero.eo-hero-bm .eo-hero-inner {
    background: rgba(87, 25, 38, .88);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
}
@media (max-width: 768px) {
  .eo-hero.eo-hero-bm { padding: 36px 0 40px; }
  .eo-hero.eo-hero-bm .eo-hero-inner { width: calc(100% - 32px); padding: 28px 20px; }
}

/* about, "מי אנחנו" (5.11.2026): two small sub-headings and the blessing paragraph
   as a callout, to break a 28-line block on phones. The heading uses --gold-dark,
   not the page-head kicker's --gold-soft, which fails contrast on the light page. */
.eo-lead-text .eo-lead-h { font-family: var(--ui); color: var(--gold-dark); font-weight: 700; font-size: .9rem; letter-spacing: .1em; line-height: 1.4; margin: 30px 0 8px; }
.eo-lead-text a:not(.eo-more) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.eo-lead-text .eo-lead-callout { background: var(--bg-ivory); border-inline-start: 3px solid var(--gold); border-radius: var(--r-md); border-start-start-radius: 0; border-end-start-radius: 0; padding: 16px 20px; margin: 28px 0 16px; }
@media (max-width: 768px) { .eo-lead-text .eo-lead-callout { padding: 14px 16px; } }
/* page-head subtitles: balanced lines, never a lone word on the second line;
   the Rav's name is kept whole (eo_page_head). Older browsers ignore balance. */
.eo-page-head p { text-wrap: balance; }
.eo-nowrap { white-space: nowrap; }

/* /news/ (the manager, 5.11.2026): on desktop the photo fills the whole side of the
   card, top to bottom, instead of a 4:3 box with empty space under it. The img is
   taken out of flow so its own height never sets the card's; the crop anchor
   ('p' in images.php) stays inline. Mobile keeps the 4:3 box above the text. */
@media (min-width: 769px) {
  .eo-news-full { align-items: stretch; }
  .eo-news-full .eo-news-img { position: relative; min-height: 225px; }
  .eo-news-full .eo-news-img img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto !important; object-fit: cover; }
  /* a tall narrow column crops differently from the 4:3 box the anchors were set for (zman-choref's
     override went with rav-heichal-open, 5.11.2026: bm-v-hall needs none) */
  #simchat-torah .eo-news-img img { object-position: 50% 0 !important; }         /* the scroll raised, not its middle */
}