/* =========================================================
   Booklet site styles.
   Design tokens are taken from the printed booklet:
   warm cream paper, deep royal indigo, sky blue line icons, green chapter titles,
   soft bottom waves (light green, sky, navy) and a red hand drawn heart.
   Contrast ratios (WCAG 2.1) are noted next to every colour used for text or UI.
   ========================================================= */

:root {
  /* colour */
  --navy: #2b3990;           /* royal indigo: buttons, active chips, footer. White on it 10.0:1, on cream 8.96:1 */
  --navy-900: #1d2766;       /* white on it 13.7:1 */
  --navy-700: #3646a6;       /* hover. White on it 8.1:1 */
  --blue: #3f9ad3;           /* booklet sky blue: waves and decoration only (2.8:1 on cream, never text) */
  --blue-ink: #1f6fa5;       /* blue as text / highlight box: 4.8:1 on cream, 5.4:1 on white, white on it 5.4:1 */
  --icon: #2a7fb8;           /* line icons: 3.9:1 on cream, 4.4:1 on white (graphics need 3:1) */
  --green: #3a7d44;          /* big titles only (large text, 3:1 needed): 4.46:1 on cream, 5.0:1 on white. Not for body text */
  --green-ink: #2f6b38;      /* green as small text / highlight box: 5.7:1 on cream, white on it 6.4:1 */
  --green-soft: #a7d493;     /* waves only */
  --heart: #d6283b;          /* the cover's heart, decoration only */
  --focus: #b81f33;          /* focus ring on light: 5.7:1 on cream, 6.4:1 on white, 5.1:1 on cream-2 */
  --focus-dark: #ffd166;     /* focus ring on navy: 7.0:1 */
  --page: #feefe8;           /* booklet paper, matches the cover image exactly */
  --page-2: #f9e2d6;         /* placeholders, quiet bands */
  --paper: #ffffff;
  --frame: #ecd3c6;          /* thin decorative frame */
  --line-strong: #6a73ad;    /* form field boundary: 4.0:1 on cream, 4.5:1 on white */
  --rule: #a9cbe6;           /* the booklet's thin blue column rule, decoration */
  --ink: #1b2240;            /* body text: 13.9:1 on cream, 15.6:1 on white */
  --ink-2: #4a4f6a;          /* secondary text: 7.2:1 on cream, 8.0:1 on white */
  --on-dark-2: #c7d0f2;      /* secondary text on navy: 6.6:1 */
  --mark: #ffe08a;           /* search match: ink on it 12.1:1, navy on it 7.8:1 */
  --star: #e9a800;

  /* type */
  --font-display: "Heebo", "Assistant", system-ui, sans-serif;
  --font-body: "Assistant", "Heebo", system-ui, sans-serif;

  /* spacing scale (4px base) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  --gutter: 20px;
  --maxw: 1200px;
  --radius: 16px;
  --radius-sm: 12px;
  --header-h: 112px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 200ms;
  --shadow-lift: 0 1px 0 rgba(43, 57, 144, .04), 0 14px 30px -20px rgba(43, 57, 144, .5);
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);
  overflow-x: clip;
}
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
@media (min-width: 1024px) { body { font-size: 1.125rem; } }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--blue-ink); }
p { margin: 0; }
/* anywhere (not break-word): a long word in a big title breaks instead of being cut off at narrow widths with enlarged text */
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.15; color: var(--navy); overflow-wrap: anywhere; }
ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
bdi { unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
mark { background: var(--mark); color: var(--ink); border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px #d9a730 inset; }
[hidden] { display: none !important; }
main:focus { outline: none; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

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

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

.skip-link {
  position: absolute; inset-inline-start: 12px; top: -6em; z-index: 100; /* em: stays fully hidden with enlarged text */
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  font-weight: 700; text-decoration: none; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 12px; }
.awards :focus-visible, .footer :focus-visible { outline-color: var(--focus-dark); }

.noscript { padding: var(--s7) var(--gutter); text-align: center; font-weight: 700; }

svg { flex-shrink: 0; }
.share svg, .gallery svg, .sheet svg, .search svg, .contact svg, .card__more svg, .btn--text svg, .topbar__search svg, .ach__go svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
svg .fill { fill: currentColor; stroke: none; }

/* line icons for topics (achievements, chapter heads) */
.topic svg, .ach__icon svg, .chapter__icon svg {
  display: block; width: 100%; height: 100%;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* the cover's hand drawn heart */
.heart { fill: none; stroke: var(--heart); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

/* display headline */
.display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.04;
  color: var(--navy);
}

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--blue-ink);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: var(--green); }
.eyebrow--light { color: var(--on-dark-2); }
.eyebrow--light::before { background: var(--green-soft); }

/* white card with a thin warm frame */
.frame {
  background: var(--paper);
  border: 1px solid var(--frame);
  border-radius: var(--radius);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-700); }
.btn--text {
  background: none; padding: 0 4px; min-height: 44px; color: var(--blue-ink);
  border-radius: 8px;
}
.btn--text svg { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.btn--text[aria-expanded="true"] svg { transform: rotate(180deg); }
.btn--text:hover { color: var(--navy); }

/* ---------- waves ---------- */
.waves { display: block; width: 100%; height: 48px; }
@media (min-width: 768px) { .waves { height: 88px; } }

/* =========================================================
   Top bar + chapter nav
   ========================================================= */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(254, 239, 232, .95);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--frame);
  transition: box-shadow var(--dur) var(--ease);
}
.topbar.is-scrolled { box-shadow: 0 8px 24px -20px rgba(43, 57, 144, .6); }
.topbar__bar {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
}
.brand {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  text-decoration: none; color: var(--navy); min-width: 0;
}
.brand__name {
  font-family: var(--font-display); font-weight: 900; font-size: 1.3125rem; letter-spacing: -.01em;
  position: relative; white-space: nowrap;
}
.brand__name::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 1px;
  width: 26px; height: 3px; border-radius: 2px; background: var(--heart);
}
.brand__sep { width: 1px; height: 22px; background: var(--frame); }
.brand__doc { font-weight: 600; font-size: 0.9375rem; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 400px) { .brand__doc { font-size: 0.875rem; } .brand { gap: 10px; } }

.topbar__search {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  margin-inline-end: -12px;
  color: var(--navy); font-weight: 700; text-decoration: none; border-radius: 999px;
  transition: background-color var(--dur) var(--ease);
}
.topbar__search:hover { background: var(--paper); }
@media (max-width: 380px) { .topbar__search span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.chapnav { max-width: var(--maxw); margin-inline: auto; position: relative; }
.chapnav::before, .chapnav::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 24px; z-index: 1; pointer-events: none;
}
.chapnav::before { right: 0; background: linear-gradient(to left, var(--page), rgba(254, 239, 232, 0)); }
.chapnav::after { left: 0; background: linear-gradient(to right, var(--page), rgba(254, 239, 232, 0)); }
.chapnav__list {
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 4px var(--gutter) 10px;
  scrollbar-width: none;
}
.chapnav__list::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; white-space: nowrap;
  min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--frame);
  background: var(--paper); color: var(--navy);
  font-family: var(--font-display); font-weight: 500; font-size: 0.9375rem;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { border-color: var(--navy); }
.chip--nav { min-height: 38px; position: relative; }
.chip--nav::before { /* invisible extension: 44px touch target */
  content: ""; position: absolute; inset: -3px 0;
}
.chip--nav.is-active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }
.chip--filter[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 700; }

/* =========================================================
   Hero: the booklet cover. Title and subtitle on paper, the cover image below (mobile) or beside it.
   ========================================================= */
.hero { position: relative; isolation: isolate; }
.hero__body {
  display: grid; justify-items: center; text-align: center;
  padding: var(--s7) var(--gutter) var(--s4);
}
.hero__kicker {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--navy);
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: var(--s4);
}
.hero__kicker::before, .hero__kicker::after { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--green); }
.hero__title {
  font-weight: 900; color: var(--navy); letter-spacing: -.015em;
  font-size: clamp(min(3rem, 13vw), 16vw, 5rem); line-height: .98; /* min() keeps the longest word inside 320px even with enlarged text */
}
/* The title never breaks inside a word ("תתח/דשי"). Instead its size is capped so the
   longest word (--hero-chars, set from the data in renderHero) always fits its column. */
.hero__body { container-type: inline-size; }
.hero__title { overflow-wrap: normal; }
.hero__line { display: block; position: relative; white-space: nowrap; }
.hero__line .heart {
  position: absolute; z-index: -1;
  inset-inline-start: -.36em; top: -.2em; width: 1.02em; height: .94em;
  transform: rotate(-8deg);
}
.hero__subtitle {
  margin-top: var(--s4); max-width: 20ch;
  font-family: var(--font-display); font-weight: 700; color: var(--blue-ink);
  font-size: clamp(1.25rem, 5.6vw, 1.75rem); line-height: 1.3;
}
.hero__year {
  display: inline-block; margin-top: 12px;
  background: var(--navy); color: #fff;
  padding: 2px 14px 6px; border-radius: 8px;
  font-size: .62em;
}
.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s3) var(--s4);
  margin-top: var(--s5);
}
.hero__media { position: relative; }
.hero__media img { width: 100%; }
@media (max-width: 479.98px) {
  .hero__actions { gap: var(--s2); }
  .hero__actions .btn { padding: 0 18px; }
  .hero__actions .share__btn--native { padding: 0; width: 44px; }
  .hero__actions .share__btn--native span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (min-width: 900px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center;
    max-width: 1440px; margin-inline: auto;
  }
  .hero__body {
    justify-items: start; text-align: start;
    padding: var(--s8) var(--gutter) var(--s8) 0;
    padding-inline-start: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  }
  .hero__title { font-size: clamp(min(4.5rem, 8.4vw), 8.4vw, 7.5rem); line-height: .94; } /* min(): with enlarged text the title stays inside its column instead of running under the photo */
  .hero__subtitle { font-size: clamp(1.5rem, 2.3vw, 2rem); max-width: 18ch; }
  .hero__actions { justify-content: flex-start; margin-top: var(--s6); }
  /* the cover image bleeds to the page edge; its paper coloured top melts into the page,
     and its inner edge fades so the cover's own waves do not end on a hard line */
  .hero__media {
    align-self: end;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 16%);
    mask-image: linear-gradient(to left, transparent 0, #000 16%);
  }
}

/* =========================================================
   Share
   ========================================================= */
.share { display: inline-flex; align-items: center; gap: 6px; }
.share__label { font-weight: 700; font-size: 0.9375rem; color: var(--ink-2); }
.share__label:empty { display: none; }
.share__list { display: flex; align-items: center; gap: 4px; }
.share__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--frame); background: var(--paper);
  color: var(--navy); text-decoration: none; font-weight: 700; font-size: 0.9375rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.share__btn svg { width: 20px; height: 20px; }
.share__btn:hover { border-color: var(--navy); }
.share__btn--native { padding: 0 14px 0 16px; }

.share--dark .share__btn { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.share--dark .share__btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.share--dark .share__label { color: var(--on-dark-2); }

/* =========================================================
   Mayor
   ========================================================= */
.mayor { padding: var(--s7) 0 var(--s8); }
.mayor__grid { display: grid; gap: var(--s5); }
.mayor__head { display: flex; align-items: center; gap: var(--s5); }
.mayor__photo {
  width: 112px; aspect-ratio: 1; flex: none; border-radius: 50%;
  padding: 4px; background: var(--paper);
  box-shadow: 0 0 0 3px var(--navy);
  position: relative;
}
.mayor__photo::after { /* green arc */
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 3px solid transparent; border-top-color: var(--green); border-left-color: var(--green);
  transform: rotate(-20deg);
}
.mayor__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 18%; border-radius: 50%; }
.mayor__title { font-size: clamp(2.5rem, 11vw, 3.5rem); color: var(--green); }
.mayor__letter { padding: var(--s5) var(--s5) var(--s3); position: relative; }
.mayor__letter p { max-width: 66ch; margin-bottom: var(--s4); }
.mayor__greeting { font-family: var(--font-display); font-weight: 800; color: var(--navy); font-size: 1.25rem; }
.mayor__more.is-entering { animation: rise 240ms var(--ease) both; }
.mayor__sign { display: flex; flex-direction: column; font-weight: 700; color: var(--navy); line-height: 1.5; margin-top: var(--s5); }
.mayor__name { font-family: var(--font-display); font-weight: 900; font-size: 1.375rem; margin-top: 2px; }
.mayor__role { font-weight: 600; color: var(--ink-2); }
.mayor__toggle { margin-inline-start: -4px; }

@media (min-width: 900px) {
  .mayor { padding: var(--s8) 0 var(--s9); }
  .mayor__grid { grid-template-columns: 340px 1fr; gap: var(--s8); align-items: start; }
  .mayor__head { flex-direction: column; align-items: flex-start; gap: var(--s6); position: sticky; top: calc(var(--header-h) + 32px); }
  .mayor__photo { width: 220px; padding: 6px; }
  .mayor__photo::after { inset: -16px; border-width: 4px; }
  .mayor__title { font-size: 4.5rem; }
  .mayor__letter { padding: var(--s7) var(--s7) var(--s5); font-size: 1.1875rem; }
  .mayor__greeting { font-size: 1.5rem; }
}

/* =========================================================
   Achievements: the booklet's summary page, each tile links to its chapter
   ========================================================= */
.achievements { padding: var(--s7) 0 var(--s8); }
.achievements__head { text-align: center; margin: 0 auto var(--s6); max-width: 36rem; }
.achievements__title {
  font-weight: 800; font-size: clamp(1.625rem, 6.4vw, 2.75rem); line-height: 1.2; color: var(--navy);
}
.achievements__intro { display: block; margin-top: var(--s2); font-weight: 500; color: var(--blue-ink); font-size: .72em; }

.achievements__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.achievements__list > li { display: flex; }
.ach {
  flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: var(--s5) var(--s3) var(--s4);
  background: var(--paper); border: 1px solid var(--frame); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
a.ach:hover { border-color: var(--navy); box-shadow: var(--shadow-lift); }
a.ach:focus-visible { outline-offset: 3px; border-radius: var(--radius); }
.ach__icon { width: 46px; height: 46px; color: var(--icon); margin-bottom: var(--s2); }
.ach__area { font-size: 1.0625rem; font-weight: 800; line-height: 1.25; color: var(--navy); }
.ach__text { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.ach__go {
  margin-top: auto; padding-top: var(--s2);
  display: inline-flex; align-items: center; gap: 2px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; color: var(--green-ink);
}
.ach__go svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }
a.ach:hover .ach__go svg { transform: translateX(-3px); }

@media (min-width: 640px) and (max-width: 1023.98px) {
  .achievements__list { gap: var(--s4); }
  .ach {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; text-align: start;
    column-gap: var(--s4); row-gap: 4px; padding: var(--s5);
  }
  .ach__icon { grid-row: 1 / span 3; margin: 2px 0 0; }
  .ach__go { grid-column: 2; justify-self: start; }
}
@media (min-width: 1024px) {
  .achievements { padding: var(--s8) 0 var(--s9); }
  .achievements__head { margin-bottom: var(--s7); }
  .achievements__list { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--s4); }
  .ach { padding: var(--s6) var(--s4) var(--s5); }
  .ach__icon { width: 54px; height: 54px; }
  .ach__area { font-size: 1.1875rem; }
  .ach__text { font-size: 1rem; }
}

/* =========================================================
   Awards (layout for booklets that have them)
   ========================================================= */
.awards {
  background: var(--navy); color: #fff;
  padding: var(--s8) 0 var(--s8);
  position: relative; overflow: hidden;
}
.awards::before {
  content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 38%; height: 6px; background: var(--green-soft);
  border-end-start-radius: 6px;
}
.awards__head { max-width: 640px; margin-bottom: var(--s6); }
.awards__title { color: #fff; font-size: clamp(2.625rem, 12vw, 4.5rem); margin: var(--s2) 0 var(--s4); }
.awards__intro { color: #e3e8fa; font-size: 1.125rem; line-height: 1.7; }

.awards__list {
  display: grid; grid-auto-flow: column; grid-auto-columns: 82%;
  gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) var(--s4);
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent;
}
.award {
  scroll-snap-align: start;
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.award__media { aspect-ratio: 16 / 9; background: var(--page-2); overflow: hidden; }
.award__media img { width: 100%; height: 100%; object-fit: cover; }
.award__body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.award__score { display: flex; align-items: baseline; gap: 8px; color: var(--blue-ink); font-family: var(--font-display); font-weight: 700; }
.award__num {
  font-family: var(--font-display); font-weight: 900; font-size: 3.5rem; line-height: 1; color: var(--navy);
  min-width: 3ch; letter-spacing: -.02em;
}
.award__score-label { font-size: 1.125rem; }
.award__stars { display: flex; gap: 2px; color: var(--star); height: 56px; align-items: center; }
.award__stars svg { width: 26px; height: 26px; }
.award__icon { height: 56px; display: flex; align-items: center; color: var(--icon); }
.award__icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.award__title { font-size: 1.5rem; font-weight: 900; }
.award__text { color: var(--ink-2); font-size: 1rem; line-height: 1.65; }

@media (min-width: 900px) {
  .awards { padding: var(--s9) 0; }
  .awards__head { margin-bottom: var(--s7); }
  .awards__list {
    grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto;
    overflow: visible; margin: 0; padding: 0; gap: var(--s5);
  }
}

/* =========================================================
   Explore (search + filter)
   ========================================================= */
.explore { padding: var(--s5) 0 var(--s7); scroll-margin-top: calc(var(--header-h) + 8px); }
.explore__panel { padding: var(--s5); display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
.explore__title { font-size: 1.375rem; font-weight: 800; }
.search { position: relative; }
.search__input {
  width: 100%; min-height: 54px; padding: 0 48px 0 48px;
  border: 1.5px solid var(--line-strong); border-radius: 12px; background: var(--page);
  font-size: 1.0625rem; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.search__input::placeholder { color: #5d6280; } /* 5.4:1 on cream */
.search__input:hover { border-color: var(--navy); }
.search__input:focus { background: var(--paper); border-color: var(--navy); outline: 3px solid var(--focus); outline-offset: 2px; }
.search__input::-webkit-search-cancel-button { display: none; }
.search__icon { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--blue-ink); display: flex; }
.search__icon svg { width: 22px; height: 22px; }
.search__clear {
  position: absolute; inset-inline-end: 5px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: none; border-radius: 8px; color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
}
.search__clear svg { width: 20px; height: 20px; }
.search__clear:hover { color: var(--navy); background: var(--page-2); }

.filters { margin-inline: calc(var(--s5) * -1); }
.filters__list {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px var(--s5) 4px;
  scrollbar-width: none;
}
.filters__list::-webkit-scrollbar { display: none; }
.filters .chip { background: var(--page); }
.filters .chip[aria-pressed="true"] { background: var(--navy); }
@media (min-width: 768px) {
  .filters { margin: 0; }
  .filters__list { flex-wrap: wrap; overflow: visible; padding: 0; }
}
.explore__status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* keep the live region rendered so announcements fire */
.explore__status { min-height: 1.75em; color: var(--ink-2); font-weight: 600; }
.explore__status b { color: var(--navy); font-weight: 800; }
.empty__title { font-family: var(--font-display); font-weight: 800; }
@media (min-width: 900px) {
  .explore__panel { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s6); padding: var(--s5) var(--s6); }
  .explore__title { grid-column: 1; }
  .search { grid-column: 2; }
  .filters, .explore__status { grid-column: 1 / -1; }
}

.empty {
  margin-top: var(--s5); padding: var(--s7) var(--s5);
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius);
  text-align: center; display: grid; justify-items: center; gap: var(--s2);
}
.empty__title { font-size: 1.5rem; color: var(--navy); }
.empty__text { color: var(--ink-2); margin-bottom: var(--s3); }

/* =========================================================
   Chapters: shared head (green title, navy tagline, topic icon)
   ========================================================= */
/* Each chapter is a band: white and cream alternate (set by paintBands in app.js), and a thin wave in the
   booklet colours opens every band. Text colours are AA on both (ratios are noted on the tokens above). */
.chapter {
  --band: var(--page); --band-prev: var(--paper);
  background: var(--band); padding: 0 0 var(--s8);
}
.chapter[data-band="light"] { --band: var(--paper); --band-prev: var(--page); }
.chapter > .wrap { padding-top: var(--s7); }
.chapter[data-band="light"] .share__btn { background: var(--page); }
.chapters__end { --band: var(--page); --band-prev: var(--paper); }
.waves.band-wave { height: 28px; background: var(--band-prev); }
.band-wave__a { fill: var(--green-soft); }
.band-wave__b { fill: var(--blue); }
.band-wave__c { fill: var(--band); }
.is-flip > .band-wave { transform: scaleX(-1); }
.chapter__head {
  display: grid; grid-template-columns: minmax(0, 1fr);
  align-items: start; gap: var(--s2) var(--s4); margin-bottom: var(--s6);
}
.chapter__head.has-icon { grid-template-columns: auto minmax(0, 1fr); }
.chapter__num {
  grid-column: 1 / -1;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9375rem; color: var(--green-ink);
  letter-spacing: .04em; display: flex; align-items: center; gap: 10px; margin-bottom: var(--s2);
}
.chapter__num-label { color: var(--ink-2); font-weight: 500; margin-inline-end: -4px; }
.chapter__num::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.chapter__icon { grid-column: 1; grid-row: 2 / span 2; width: 52px; height: 52px; color: var(--icon); margin-top: 2px; }
.chapter__title {
  grid-column: 1 / -1; justify-self: start;
  font-weight: 900; color: var(--green); letter-spacing: -.012em;
  font-size: clamp(2rem, 8.6vw, 3.75rem); line-height: 1.06;
}
.chapter__tagline {
  grid-column: 1 / -1; max-width: 32ch;
  font-family: var(--font-body); font-weight: 500; color: var(--navy);
  font-size: clamp(1.25rem, 4.8vw, 1.75rem); line-height: 1.3;
}
.has-icon .chapter__title, .has-icon .chapter__tagline { grid-column: 2; }
.chapter__tagline span { display: block; }
.chapter__tagline span + span { color: var(--blue-ink); }
.chapter .share { grid-column: 1 / -1; justify-self: start; margin-top: var(--s3); }
@media (min-width: 768px) {
  .chapter { padding-bottom: var(--s9); }
  .chapter > .wrap { padding-top: var(--s8); }
  .waves.band-wave { height: 44px; }
  .chapter__head { margin-bottom: var(--s7); }
  .chapter__head, .chapter__head.has-icon { column-gap: var(--s5); }
  .chapter__head { grid-template-columns: minmax(0, 1fr) auto; }
  .chapter__head.has-icon { grid-template-columns: auto minmax(0, 1fr) auto; }
  .chapter__icon { width: 76px; height: 76px; }
  .chapter .share { grid-column: -2; grid-row: 2 / span 2; align-self: end; justify-self: end; margin: 0; }
  .chapter__title, .chapter__tagline { grid-column: 1; }
  .has-icon .chapter__title, .has-icon .chapter__tagline { grid-column: 2; }
}
.is-filtering .chapter > .wrap { padding-top: var(--s7); }
.is-filtering .chapter--cards .mosaic { display: none; }
.is-filtering .chapter--cards .chapter__tagline { display: none; }

/* =========================================================
   Story layout: one stacked column at every width.
   Photo band, then the key numbers, then the text with its stepper, centred at a reading measure.
   ========================================================= */
.story { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
.story__text p { max-width: 66ch; margin-bottom: 1em; }
.story__lead > p:first-child { font-size: 1.125em; line-height: 1.75; color: var(--navy); }

/* the booklet's highlight boxes: bold + filled, never colour alone */
.hl {
  font-weight: 700; color: #fff;
  padding: .06em .3em .1em; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.hl--g { background: var(--green-ink); }  /* white on it 6.4:1 */
.hl--b { background: var(--blue-ink); }   /* white on it 5.4:1 */
.hl mark { color: var(--ink); }

/* key numbers */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--s5) var(--s5); }
.stat { padding-top: var(--s3); border-top: 3px solid var(--green); }
.stat__num {
  font-family: var(--font-display); font-weight: 900; color: var(--navy);
  font-size: clamp(2.5rem, 10vw, 3.5rem); line-height: 1; letter-spacing: -.02em;
}
.stat__num .num { display: inline-block; min-width: 2ch; }
.stat__label { margin-top: var(--s2); color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; max-width: 26ch; }

/* collage (small screens): the first photo larger, the last tile counts the rest */
.collage {
  --row: clamp(56px, 17vw, 88px);
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: var(--row); gap: 8px;
}
.collage__cell { grid-column: span 3; grid-row: span 2; }
.collage__cell:first-child { grid-column: span 6; grid-row: span 3; }
.collage--2 .collage__cell:first-child { grid-column: span 4; }
.collage--2 .collage__cell:nth-child(2) { grid-column: span 2; grid-row: span 3; }
.collage--4 .collage__cell:not(:first-child) { grid-column: span 2; }
.collage__tile {
  position: relative; display: block; width: 100%; height: 100%; padding: 0;
  border: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--page-2);
}
.collage__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.collage__tile:hover img { transform: scale(1.03); }
.collage__tile:focus-visible { outline-offset: 3px; border-radius: var(--radius-sm); }
.collage__more {
  position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-content: center; align-items: center; justify-content: center; gap: 0 6px;
  padding: 4px; text-align: center; line-height: 1.15; /* wraps instead of clipping when text is enlarged */
  background: rgba(29, 39, 102, .74); color: #fff; /* 6.1:1 over a pure white photo (measured 6.3:1 or more on the real tiles) */
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem;
}
.collage__more .num { font-size: 1.5rem; }

@media (min-width: 640px) and (max-width: 767.98px) {
  .collage { --row: 76px; }
}
@media (min-width: 640px) {
  .story.has-stats .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Wider screens: the photos become one wide band, two rows high at most.
   The first photo is large at the reading start, the rest share the other half. */
@media (min-width: 768px) {
  .story { gap: var(--s7); }
  .collage {
    height: clamp(320px, 30vw, 420px); gap: 10px;
    grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto;
  }
  /* (.story prefix: outranks the small screen spans above) */
  .story .collage .collage__cell:nth-child(n) { grid-column: auto; grid-row: auto; min-height: 0; }
  .story .collage .collage__cell:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .story .collage--4 .collage__cell:nth-child(4) { grid-column: 2 / span 2; }
  .collage--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1.15fr); }
  .collage--2 { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .collage--1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .story .collage--2 .collage__cell:first-child, .story .collage--1 .collage__cell:first-child { grid-row: 1; }

  /* numbers and text share one centred reading column */
  .story__stats, .story__text { width: 100%; max-width: 44rem; margin-inline: auto; }
  .story__stats .stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5) var(--s7); }
  .story__stats .stat { flex: 0 1 12rem; text-align: center; }
  .story__stats .stat__label { margin-inline: auto; }
}
@media (min-width: 1024px) {
  .story__text p { font-size: 1.125rem; line-height: 1.85; }
  .steps__item p { font-size: 1.3125rem; line-height: 1.75; }  /* one paragraph at a time: it can be read at lead size */
  .story__lead > p:first-child { font-size: 1.3125rem; line-height: 1.7; }
}

/* ---------- paragraph stepper (story chapters with 2+ paragraphs) ----------
   rail of segments (one per paragraph, filled up to the current one), the paragraph, then counter + arrows.
   All paragraphs sit in one grid cell, so the block keeps the tallest paragraph's height at any width or text size. */
.steps__rail { display: flex; gap: 6px; margin-bottom: var(--s3); }
.steps__dot {
  flex: 1 1 0; min-width: 24px; height: 44px; padding: 0; border: 0; background: none;
  display: flex; align-items: center; border-radius: 6px;
}
.steps__dot span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--line-strong); /* 4.0:1 on cream */
  transition: height var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.steps__dot.is-done span { height: 4px; background: var(--navy); }
.steps__dot:hover span { height: 4px; background: var(--navy-700); }
.steps__dot:focus-visible { outline-offset: 0; }
/* search: the segments of paragraphs that match carry the search colour */
.steps__dot.has-match span { height: 6px; background: var(--mark); box-shadow: 0 0 0 1px #b8861a inset; }
.steps__dot.has-match.is-done span { box-shadow: 0 0 0 2px var(--navy) inset; }

.steps__stage { display: grid; touch-action: pan-y; }
.steps__item {
  grid-area: 1 / 1; align-self: start; min-width: 0;
  /* the next paragraph arrives after the old one has mostly gone, so text never overlaps text */
  transition: opacity 220ms var(--ease) 110ms, transform 260ms var(--ease) 110ms, visibility 0s linear 0s;
}
.steps__item:not(.is-active) {
  visibility: hidden; opacity: 0;
  transition: opacity 110ms linear, transform 160ms var(--ease), visibility 0s linear 160ms;
}
/* content travels toward the left on "next", in step with the swipe */
.steps__item.is-before { transform: translateX(20px); }   /* in RTL the next paragraph enters from the left and the current one leaves to the right, matching the swipe */
.steps__item.is-after { transform: translateX(-20px); }
.story__text .steps__item p { margin: 0; }

.steps__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--frame);
}
.steps__count { font-family: var(--font-display); color: var(--ink-2); font-size: 1rem; line-height: 1; white-space: nowrap; }
.steps__cur { font-weight: 800; color: var(--navy); font-size: 1.5rem; }
.steps__of { margin-inline-start: 2px; }
.steps__arrows { display: flex; gap: var(--s2); }
.steps__btn {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.steps__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.steps__btn:hover:not([aria-disabled="true"]) { background: var(--page); border-color: var(--navy); }
.steps__btn[data-step-dir="1"]:not([aria-disabled="true"]) { background: var(--navy); border-color: var(--navy); color: #fff; }
.steps__btn[data-step-dir="1"]:hover:not([aria-disabled="true"]) { background: var(--navy-700); border-color: var(--navy-700); }
.steps__btn[aria-disabled="true"] { opacity: .35; cursor: default; }

/* image mosaic under a cards chapter head */
.mosaic { display: grid; gap: 8px; margin-bottom: var(--s5); grid-template-columns: repeat(2, 1fr); }
.mosaic__cell { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--page-2); }
.mosaic__cell img { width: 100%; height: 100%; object-fit: cover; }
.mosaic--1 { grid-template-columns: 1fr; }
.mosaic--1 .mosaic__cell { aspect-ratio: 16 / 7; }
@media (min-width: 768px) {
  .mosaic--4 { grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 200px 200px; gap: 12px; margin-bottom: var(--s6); }
  .mosaic--4 .mosaic__cell { aspect-ratio: auto; }
  .mosaic--4 .mosaic__cell:first-child { grid-row: 1 / span 2; }
  .mosaic--4 .mosaic__cell:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 1100px) { .mosaic--4 { grid-template-rows: 230px 230px; } }

/* cards */
.cards { display: grid; gap: var(--s4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--s5); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--frame); border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--navy); box-shadow: var(--shadow-lift); }
.card:has(.card__hit:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.card__media { position: relative; aspect-ratio: 16 / 10; background: var(--page-2); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__count {
  position: absolute; bottom: 10px; inset-inline-start: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(29, 39, 102, .85); color: #fff;
  font-size: 0.8125rem; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px;
}
.card__body { padding: var(--s4) var(--s5) var(--s5); display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title { font-size: 1.3125rem; font-weight: 800; line-height: 1.25; }
.card__hit {
  all: unset; cursor: pointer; color: var(--navy);
}
.card__hit::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__hit:focus-visible { outline: none; }
@supports not selector(:has(*)) { .card__hit:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } }
.card__subtitle { font-family: var(--font-display); font-weight: 700; color: var(--blue-ink); font-size: 1rem; line-height: 1.4; }
.card__text {
  color: var(--ink-2); font-size: 1rem; line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card__more {
  margin-top: auto; padding-top: var(--s3);
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--green-ink);
}
.card__more svg { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.card:hover .card__more svg { transform: translateX(-4px); }

/* mobile: the lead card stays large, the rest become compact rows so the long page stays scannable */
@media (max-width: 639.98px) {
  .cards { gap: var(--s3); }
  .cards > .card:not(:first-child) { flex-direction: row; align-items: stretch; }
  .cards > .card:not(:first-child) .card__media { flex: 0 0 34%; aspect-ratio: auto; min-height: 124px; }
  .cards > .card:not(:first-child) .card__body { padding: var(--s3) var(--s4) var(--s3); gap: 2px; justify-content: center; }
  .cards > .card:not(:first-child) .card__title { font-size: 1.125rem; }
  .cards > .card:not(:first-child) .card__subtitle { font-size: 0.9375rem; }
  .cards > .card:not(:first-child) .card__text { font-size: 0.9375rem; line-height: 1.6; -webkit-line-clamp: 2; margin-top: 2px; }
  .cards > .card:not(:first-child) .card__more { display: none; }
  .cards > .card:not(:first-child) .card__count { bottom: 6px; inset-inline-start: 6px; font-size: 0.75rem; padding: 4px 7px; }
}

/* the first card of each chapter is the lead: wider and horizontal on tablet / desktop */
@media (min-width: 640px) {
  .cards > .card:first-child:not([hidden]) { grid-column: 1 / -1; flex-direction: row; }
  .cards > .card:first-child .card__media { flex: 0 0 56%; aspect-ratio: 16 / 9; }
  .cards > .card:first-child .card__body { padding: var(--s6); justify-content: center; }
  .cards > .card:first-child .card__title { font-size: clamp(1.625rem, 3vw, 2.125rem); }
  .cards > .card:first-child .card__subtitle { font-size: 1.1875rem; }
  .cards > .card:first-child .card__text { -webkit-line-clamp: 5; font-size: 1.0625rem; }
  .cards > .card:first-child .card__more { margin-top: var(--s3); }
  .is-filtering .cards > .card:first-child { grid-column: auto; flex-direction: column; }
  .is-filtering .cards > .card:first-child .card__media { flex: none; aspect-ratio: 16 / 10; }
  .is-filtering .cards > .card:first-child .card__body { padding: var(--s4) var(--s5) var(--s5); justify-content: flex-start; }
  .is-filtering .cards > .card:first-child .card__title { font-size: 1.3125rem; }
  .is-filtering .cards > .card:first-child .card__subtitle { font-size: 1rem; }
  .is-filtering .cards > .card:first-child .card__text { -webkit-line-clamp: 3; font-size: 1rem; }
}

/* =========================================================
   In progress: "עוד ידינו נטויה" (layout for booklets that have it)
   ========================================================= */
.progress { padding: var(--s9) 0 var(--s8); }
.progress__head { margin-bottom: var(--s6); display: grid; gap: var(--s2); }
.progress__title { font-size: clamp(2.5rem, 11vw, 4.5rem); color: var(--green); }
.progress__tagline { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--navy); display: flex; align-items: center; gap: 10px; }
.progress__tagline::before { content: ""; width: 26px; height: 4px; border-radius: 2px; background: var(--green); }
.progress__list { display: grid; gap: var(--s4); grid-template-columns: 1fr 1fr; }
.plan:first-child { grid-column: 1 / -1; }
.plan {
  position: relative; border-radius: var(--radius); overflow: hidden; background: var(--navy);
}
.plan__media { aspect-ratio: 4 / 3; overflow: hidden; }
.plan:first-child .plan__media { aspect-ratio: 2 / 1; }
.plan__media img { width: 100%; height: 100%; object-fit: cover; }
.plan__title {
  background: var(--navy); color: #fff; font-size: 1.0625rem; font-weight: 800; line-height: 1.3;
  padding: 12px 14px 14px; position: relative;
}
.plan__title::before { content: ""; position: absolute; top: -3px; inset-inline-start: 14px; width: 30px; height: 6px; border-radius: 3px; background: var(--green-soft); }
@media (min-width: 768px) {
  .progress__list { grid-template-columns: repeat(6, 1fr); gap: var(--s5); }
  .plan { grid-column: span 2; }
  .plan:first-child { grid-column: span 3; }
  .plan:nth-child(2) { grid-column: span 3; }
  .plan:first-child .plan__media, .plan:nth-child(2) .plan__media { aspect-ratio: 2 / 1; }
  .plan__title { font-size: 1.25rem; padding: 14px 20px 18px; }
  .plan__title::before { inset-inline-start: 20px; }
}

/* =========================================================
   Closing: the booklet's back cover
   ========================================================= */
.closing { padding-top: var(--s8); text-align: center; }
.closing__body { display: flex; justify-content: center; }
.closing__text {
  position: relative; display: inline-block; isolation: isolate;
  max-width: 13ch; padding-inline: .2em;
  font-weight: 900; color: var(--navy); letter-spacing: -.012em;
  font-size: clamp(2.25rem, 10vw, 4.75rem); line-height: 1.08;
}
.closing__text .heart {
  position: absolute; z-index: -1;
  inset-inline-start: -.5em; top: -.18em; width: 1.25em; height: 1.15em;
  transform: rotate(-8deg);
}
.closing__media { position: relative; margin-top: var(--s4); }
.closing__media img { width: 100%; }
.closing__waves { position: absolute; inset-inline: 0; bottom: -1px; }
@media (min-width: 900px) {
  .closing { padding-top: var(--s9); }
  #chapters + .closing { padding-top: var(--s8); } /* the last chapter band already ends in generous space */
  .closing__media img { height: clamp(360px, 46vw, 640px); object-fit: cover; object-position: 50% 40%; }
}

/* =========================================================
   Footer
   ========================================================= */
.footer { background: var(--navy); color: #fff; position: relative; }
.footer__waves { background: var(--page); height: 40px; }
@media (min-width: 768px) { .footer__waves { height: 72px; } }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); padding-top: var(--s6); padding-bottom: var(--s7); }
.footer--after-closing .footer__grid { padding-top: var(--s5); }
.footer__brand { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: var(--on-dark-2); margin-bottom: var(--s2); }
.footer__title { color: #fff; font-size: clamp(2.25rem, 10vw, 3.75rem); }

.contact { display: grid; gap: 2px; border-top: 1px solid rgba(255,255,255,.22); }
.contact__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s3); /* wraps the number under the label when text is enlarged */
  min-height: 64px; padding: var(--s2) 0;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.22);
  transition: color var(--dur) var(--ease);
}
a.contact__row:hover .contact__value { color: var(--focus-dark); }
.contact__icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.contact__icon svg { width: 20px; height: 20px; }
.contact__label { flex: 1 1 7rem; font-weight: 600; color: #e3e8fa; line-height: 1.3; }
.contact__label small { display: block; font-size: 0.8125rem; color: var(--on-dark-2); font-weight: 400; }
.contact__value {
  font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; letter-spacing: .01em;
  unicode-bidi: isolate; transition: color var(--dur) var(--ease);
  margin-inline-start: auto; max-width: 100%; overflow-wrap: anywhere;
}
.contact__row--lead .contact__value { font-size: 1.875rem; color: var(--focus-dark); }
.contact__row--text .contact__value { font-size: 1.1875rem; }
@media (max-width: 400px) { .contact__value { font-size: 1.25rem; } .contact__row--text .contact__value { font-size: 1.0625rem; } }

.footer__share { display: grid; gap: var(--s3); }
.footer__share-title { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; }
.footer__credits { color: var(--on-dark-2); font-size: 0.9375rem; line-height: 1.7; max-width: 70ch; }
.footer__meta { color: var(--on-dark-2); font-size: 0.875rem; padding-top: var(--s4); border-top: 1px solid rgba(255,255,255,.16); }
.footer__link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 24px; }
.footer__link:hover { color: #fff; }

@media (min-width: 900px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--s9); padding-top: var(--s7); }
  .footer__intro { grid-column: 1; grid-row: 1; }
  .contact { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .footer__share { grid-column: 1; grid-row: 2; align-self: end; }
  .footer__credits { grid-row: 3; }
  .footer__meta { grid-row: 4; }
  .footer__credits, .footer__meta { grid-column: 1 / -1; }
  /* no contact details: the booklet on one side, sharing on the other */
  .footer--min .footer__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .footer--min .footer__share { grid-column: 2; grid-row: 1; justify-items: end; }
}

/* =========================================================
   Sheet: drawer on mobile, modal on desktop
   ========================================================= */
.sheet {
  padding: 0; border: 0; color: var(--ink); background: var(--paper);
  width: 100%; max-width: 100%; max-height: 92vh;
  margin: auto 0 0; border-radius: 20px 20px 0 0;
  overflow: auto; overscroll-behavior: contain;
}
@supports (max-height: 92dvh) { .sheet { max-height: 92dvh; } }
.sheet::backdrop { background: rgba(29, 39, 102, .62); }
.sheet[open] { animation: sheet-up 240ms var(--ease) both; }
.sheet[open]::backdrop { animation: fade 240ms var(--ease) both; }
.sheet.is-closing { animation: sheet-down 180ms ease-in both; }
.sheet.is-closing::backdrop { animation: fade 180ms ease-in reverse both; }
.sheet__inner { position: relative; }
.sheet__top {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: 8px 12px 8px var(--s5); padding-inline-start: var(--s5);
  background: rgba(255,255,255,.96); border-bottom: 1px solid var(--frame);
}
.sheet__top::before { /* drag handle cue */
  content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--frame);
}
.sheet__chapter a {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; color: var(--blue-ink);
  text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.sheet__chapter a::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--green); }
.sheet__chapter a:hover { text-decoration: underline; }
.sheet__heading {
  font-weight: 800; font-size: 1.125rem; color: var(--green-ink); line-height: 1.3;
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
}
.sheet__heading::before { content: ""; flex: none; width: 18px; height: 4px; border-radius: 2px; background: var(--green); }
.sheet__close {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--frame); background: var(--paper); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.sheet__close svg { width: 22px; height: 22px; }
.sheet__close:hover { background: var(--page); }

.gallery { background: var(--page); }
.gallery__track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline-offset: -3px; border-radius: 0; }
.gallery__slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
}
.gallery__slide img { width: 100%; height: 100%; object-fit: contain; }
.gallery__nav {
  display: flex; align-items: center; justify-content: center; gap: var(--s4);
  padding: var(--s2) var(--s4); background: var(--paper); border-bottom: 1px solid var(--frame);
}
.gallery__btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  transition: background-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.gallery__btn svg { width: 22px; height: 22px; }
.gallery__btn:hover:not(:disabled) { background: var(--page); border-color: var(--navy); }
.gallery__btn:disabled { opacity: .35; cursor: default; }
.gallery__count { font-family: var(--font-display); font-weight: 700; color: var(--navy); min-width: 4ch; text-align: center; }

/* image only (a story chapter's photos) */
.sheet__inner--media .gallery__slide { aspect-ratio: auto; height: min(68vh, 120vw); }
.sheet__inner--media .gallery__nav { border-bottom: 0; }

.sheet__body { padding: var(--s5) var(--s5) var(--s7); }
.sheet__title { font-size: 1.75rem; font-weight: 900; line-height: 1.15; }
.sheet__subtitle { font-family: var(--font-display); font-weight: 700; color: var(--blue-ink); font-size: 1.1875rem; margin-top: var(--s2); }
.sheet__text { margin-top: var(--s4); font-size: 1.125rem; line-height: 1.85; max-width: 62ch; }

@media (min-width: 768px) {
  .sheet {
    width: min(880px, calc(100% - 64px)); max-height: calc(100vh - 64px);
    margin: auto; border-radius: 20px;
  }
  .sheet[open] { animation-name: pop-in; }
  .sheet.is-closing { animation-name: pop-out; }
  .sheet__top::before { display: none; }
  .sheet__body { padding: var(--s6) var(--s7) var(--s7); }
  .sheet__title { font-size: 2.25rem; }
  .sheet__inner--media .gallery__slide { height: min(72vh, 62vw); }
}

@media (min-width: 1024px) {
  .sheet { width: min(1120px, calc(100% - 80px)); }
  .sheet__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); }
  .sheet__top { grid-column: 1 / -1; }
  .gallery { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; justify-content: center; border-end-end-radius: 20px; }
  .gallery__nav { background: transparent; border: 0; }
  .sheet__body { grid-column: 1; grid-row: 2; padding: var(--s7) var(--s6); align-self: center; }
  .sheet__inner:not(:has(.gallery)) .sheet__body { grid-column: 1 / -1; }
  .sheet__inner--media { display: block; }
  .sheet__inner--media .gallery { border-end-start-radius: 20px; }
}

/* privacy statement (reuses the sheet) */
.privacy h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; margin-top: var(--s5); color: var(--navy); }
.privacy p { margin-top: var(--s2); font-size: 1.125rem; line-height: 1.85; max-width: 62ch; }
.privacy .privacy__date { color: var(--ink-2); font-size: 1rem; margin-top: var(--s3); }
.privacy a { color: var(--blue-ink); }
.statement__list { list-style: disc; padding-inline-start: 1.4em; margin-top: var(--s2); }
.statement__list li { font-size: 1.125rem; line-height: 1.85; max-width: 62ch; margin-top: var(--s1); }
.statement__list li::marker { color: var(--green-ink); }

/* toast */
.toast {
  position: fixed; bottom: 20px; left: 50%; z-index: 200;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--navy-900); color: #fff; font-weight: 700;
  padding: 12px 20px; border-radius: 999px;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast:empty { padding: 0; }

/* =========================================================
   Motion
   ========================================================= */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-down { to { transform: translateY(40px); opacity: 0; } }
@keyframes pop-in { from { transform: translateY(12px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop-out { to { transform: translateY(8px) scale(.985); opacity: 0; } }

/* "עצירת אנימציות" in the accessibility menu applies the same rules as the OS setting */
html.a11y-still { scroll-behavior: auto; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; }
html.a11y-still.js .reveal { opacity: 1; transform: none; }
html.a11y-still .card:hover .card__media img, html.a11y-still .collage__tile:hover img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .card:hover .card__media img, .collage__tile:hover img { transform: none; }
}

@media print {
  .topbar, .explore, .share, .waves, .steps__rail, .steps__bar, .chapters__end { display: none !important; }
  .chapter { background: none !important; }
  /* every paragraph of a stepped story, one after another */
  .steps__stage { display: block; }
  .steps__item { visibility: visible !important; opacity: 1 !important; transform: none !important; transition: none !important; }
  .steps__item + .steps__item { margin-top: 1em; }
  .js .reveal { opacity: 1; transform: none; }
  body { background: #fff; }
}

/* Hero title fit (must come after the hero rules): cap the size so the longest word fits the column. */
@supports (width: 1cqi) {
  .hero__title { font-size: min(clamp(min(3rem, 13vw), 16vw, 5rem), calc(100cqi / (var(--hero-chars, 6) * .66))); }
  @media (min-width: 900px) {
    .hero__title { font-size: min(clamp(min(4.5rem, 8.4vw), 8.4vw, 7.5rem), calc(100cqi / (var(--hero-chars, 6) * .66))); }
  }
}

/* =========================================================
   Hero, cover composition (C.hero.image set): the booklet cover rebuilt in layers.
   Title block on paper, full width hills below (inline SVG), and the cut out photo
   standing in the navy hill, cropped from the bottom when height is short.
   Must come after the hero rules above.
   ========================================================= */
.hero--cover {
  display: flex; flex-direction: column; align-items: stretch;
  max-width: none; margin-inline: 0;
  overflow: clip;            /* the heart may hang past the column; never a sideways scroll */
  /* height of the hills band; the photo top is tied to it and to the width (the photo keeps its ratio) */
  --wave-h: clamp(84px, 9vw + 48px, 200px);
}
.hero--cover .hero__body {
  justify-items: center; text-align: center;
  padding: var(--s6) var(--gutter) var(--s5);
}
.hero--cover .hero__line { display: inline-block; }
.hero--cover .hero__line .heart--hand {
  position: absolute; z-index: -1;
  inset-inline-start: auto; inset-inline-end: -1.22em;
  top: -.6em; width: 1.36em; height: 1.76em;
  fill: var(--heart); stroke: none; transform: none;
}
.hero--cover .hero__title { padding-inline-end: .6em; } /* room for the heart, so title and heart centre as one group */
.hero--cover .hero__title.is-wrapped { padding-inline-end: .3em; }
.hero--cover .hero__title.is-wrapped .heart--hand { inset-inline-end: -.94em; top: -.12em; width: .98em; height: 1.26em; }
.hero--cover .hero__subtitle { max-width: 17ch; margin-top: var(--s3); }
.hero--cover .hero__actions { justify-content: center; }

.hero__scene {
  position: relative; container-type: inline-size;
  flex: 1 0 auto;
  /* hills, then the photo at its own ratio: top of the photo sits inside the hills */
  --city-top: calc(var(--wave-h) * .96 - 11.5cqi);
  min-height: calc(var(--wave-h) * .96 + 42.3cqi); /* the whole photo at its own ratio (1333 x 717) */
  background: linear-gradient(to bottom, transparent calc(var(--wave-h) - 2px), var(--navy) 0);
}
.hero__waves { position: absolute; inset: 0 0 auto; width: 100%; height: var(--wave-h); }
.hero__city {
  position: absolute; inset-inline: 0; top: var(--city-top);
  width: 100%; height: calc(100% - var(--city-top)); max-width: none;
  object-fit: cover; object-position: 50% 0;
}
/* fallback for browsers without container units: tie to the viewport */
@supports not (width: 1cqi) {
  .hero__scene { --city-top: calc(var(--wave-h) * .96 - 11.5vw); min-height: calc(var(--wave-h) * .96 + 42.3vw); }
}

@media (min-width: 900px) {
  .hero--cover { min-height: calc(100svh - var(--header-h)); }
  .hero--cover .hero__body { padding: var(--s7) var(--gutter) var(--s6); }
  .hero--cover .hero__subtitle { max-width: none; margin-top: var(--s4); }
  .hero--cover .hero__actions { justify-content: center; margin-top: var(--s5); }
  .hero__scene { min-height: calc(var(--wave-h) + 15cqi); }
}
@supports (width: 1cqi) {
  @media (min-width: 900px) {
    /* one line like the cover: as large as fits the whole title, still capped by the longest word */
    .hero--cover .hero__title {
      font-size: min(clamp(3.5rem, 6.6vw, 7.5rem),
                     calc(100cqi / (var(--hero-words, 12) * .64)),
                     calc(100cqi / (var(--hero-chars, 6) * .66)));
    }
  }
}