/* mishmush.info — shared shell styles (ux.md §1–3, §8–9) */

/* ---------- 1. Design tokens ---------- */
:root {
  /* brand — SUPERSEDED 2026-08-13 (visual parity, Doron): purple and paper
     below are measured from the live site (mishmush.mailerpage.io), not
     PROJECT.md's original values. See docs/ux.md §1 for detail + the
     original tokens kept for reversion. */
  --purple:  #7E53AD;   /* primary: headings, primary buttons, focus rings — measured live-site button bg */
  --magenta: #D6338C;   /* accent: large text, borders, icons, decorations */
  --paper:   #FFFBF6;   /* page background — measured live-site cream */
  --ink:     #221F26;   /* body text */
  /* derived (ux.md) */
  --magenta-deep: #B01E71; /* magenta darkened for SMALL text/links (6.1:1 on paper) */
  --purple-soft:  #F1E7FA; /* card/section tint background */
  --white:   #FFFFFF;

  /* type — Tahoma stack sitewide for visual parity with the current live
     site (Doron, 2026-08-13); see docs/ux.md §2 for the superseded webfont
     spec this replaces. */
  --font-body: Tahoma, Geneva, sans-serif;

  /* rhythm */
  --space-1: .5rem; --space-2: 1rem; --space-3: 1.5rem;
  --space-4: 2.5rem; --space-5: 4rem;
  --radius: 14px;          /* cards */
  --radius-btn: 999px;     /* pill buttons */
  --shadow-card: 0 2px 12px rgb(34 31 38 / .08);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}
/* `height: auto` is load-bearing, not cosmetic: every <img> here carries
   width/height attributes (good — they reserve space and prevent CLS), but those
   attributes also set a *used* height. Without `height: auto` the `max-width:
   100%` clamp shrinks the width while the height attribute holds, so every image
   squashes vertically as soon as its column is narrower than the file's
   intrinsic width — i.e. on every mobile viewport. Mobile pass 2026-08-14. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--purple); }

/* ---------- 2. Typography ---------- */
h1 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  color: var(--purple);
  margin-block: 0 var(--space-2);
}
h2, .section-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  color: var(--purple);
  margin-block: 0 var(--space-2);
}
h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--purple);
  margin-block: 0 var(--space-1);
}
.text-small { font-size: .875rem; }
.price { font-size: 1.25rem; font-weight: 700; }
p, .measure { max-width: 65ch; }

/* ---------- 3.1 Grid ---------- */
.container {
  max-width: 1100px;
  margin-inline: auto;
  padding-inline: var(--space-3);
}
.section {
  padding-block: var(--space-4);
}
@media (min-width: 720px) {
  .section { padding-block: var(--space-5); }
}
.section--tint {
  background: var(--purple-soft);
}

/* ---------- 3.2 Header + nav ---------- */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-2);
  background: var(--purple);
  color: var(--white);
  padding: var(--space-1) var(--space-2);
  border-radius: 0 0 8px 8px;
  z-index: 100;
  transition: inset-block-start .15s ease;
}
.skip-link:focus {
  inset-block-start: 0;
}

/* SUPERSEDED 2026-08-13 (visual parity, Doron): header is sticky and uses
   a CSS-grid layout (nav / toggle / logo) so the mishmush logo can sit at
   the visual END (left, in RTL) with the nav content at the visual START
   (right) — matching the live site — while grid-column/row placement stays
   independent of DOM order. DOM order is nav-toggle, site-nav, site-logo
   (see docs/ux.md §3.2 for the reasoning and the accepted minor focus-order
   trade-off on mobile). */
.site-header {
  background: var(--paper);
  border-block-end: 1px solid rgb(123 47 190 / .15);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-header .container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-1);
  position: relative;
}
.nav-toggle { grid-column: 1; grid-row: 1; }
.site-logo  { grid-column: 3; grid-row: 1; }
.site-nav   { grid-column: 1 / -1; grid-row: 2; }

.site-logo {
  display: inline-flex;
  text-decoration: none;
}
.site-logo img {
  display: block;
  width: 56px;
  height: 56px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--purple);
  border-radius: 8px;
  color: var(--purple);
  font-size: 1.25rem;
  cursor: pointer;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-contact-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding-inline: .25em;
}
.nav-contact-link:hover { color: var(--purple); }
.nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
}
.nav-list a {
  display: block;
  padding-block: .75rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ink);
  text-decoration: none;
  border-block-end: 1px solid rgb(123 47 190 / .12);
}
.nav-list a:hover { color: var(--purple); }

/* mobile: nav hidden until toggled open */
.site-nav[data-open="false"] {
  display: none;
}
.site-nav[data-open="true"] {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

@media (min-width: 720px) {
  .nav-toggle { display: none; }
  .site-header .container { grid-template-columns: auto 1fr auto; }
  .site-nav[data-open="false"],
  .site-nav[data-open="true"] {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-column: 2;
    grid-row: 1;
  }
  .site-logo { grid-column: 3; grid-row: 1; }
  .nav-list {
    flex-direction: row;
    gap: var(--space-3);
  }
  .nav-list a {
    padding-block: 0;
    border-block-end: none;
  }
}

.lang-toggle {
  border: 1px solid var(--purple);
  background: transparent;
  color: var(--purple);
  border-radius: var(--radius-btn);
  padding: .4em 1.1em;
  font-family: var(--font-body);
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  align-self: flex-start;
  margin-block-start: var(--space-1);
}
@media (min-width: 720px) {
  .lang-toggle { margin-block-start: 0; }
}

/* ---------- hero placeholder (real content: Task 10) ---------- */
.hero {
  padding-block: var(--space-4);
  text-align: center;
}
.hero .sub {
  font-size: 1.0625rem;
  color: var(--ink);
  margin-block-start: 0;
}

/* ---------- 3.3 Footer ---------- */
/* SUPERSEDED 2026-08-13 (visual parity, Doron): the live site's footer is a
   light cream band with dark text, not a dark band — see docs/ux.md §1. */
.site-footer {
  background: var(--paper);
  color: var(--ink);
  border-block-start: 1px solid rgb(34 31 38 / .1);
  padding-block: var(--space-4);
}
.site-footer a {
  color: var(--purple);
  text-decoration: underline;
}
.site-footer .container > * + * {
  margin-block-start: var(--space-2);
}
.social-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
}
.social-link:hover { color: var(--purple); text-decoration: underline; }
.social-link svg { width: 1.25em; height: 1.25em; fill: currentColor; }
.legal-links { font-size: .875rem; }
.legal-links a + a { margin-inline-start: .75em; }

/* ---------- Masthead / page-title banners + section-title graphics ----------
   ADDED 2026-08-13 (visual parity, Doron): the live site's site masthead
   ("ספרי מישמוש" under the header on / and /events/), its per-book
   page-title banners, and its section-title graphics are baked-PNG
   decorative Hebrew lettering. Accessibility pattern (documented in
   docs/ux.md §3.2 addendum): the heading element WRAPS the <img>, and the
   image's `alt` IS the heading's accessible name — one real h1/h2 stays in
   the outline, nothing is duplicated for screen readers. English pages
   have no such graphics and keep plain text headings. */
.masthead-banner {
  text-align: center;
  padding-block: var(--space-2);
  background: var(--paper);
}
/* SUPERSEDED 2026-08-13 (visual parity round 2, Doron): banner-home-title.jpg
   has a lot of built-in white margin around the actual wordmark glyphs (the
   file is 1366×190 but the purple text only occupies its middle ~49% by
   width). The live site renders this <img> at ~1020px CSS width at a 1280
   viewport (measured directly against mishmush.mailerpage.io) — NOT a small
   ~520px box — which is what makes the visible glyphs come out to the
   ~500-600px the wordmark actually reads at. Wrapping the image in
   `.container` and letting it fill that container (same as every other
   1366-wide "title graphic" asset on the live site) reproduces this at every
   viewport width without a magic-number cap. */
.masthead-banner img {
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.page-title-banner {
  text-align: center;
  margin-block-end: var(--space-3);
}
.page-title-banner img {
  max-width: min(640px, 100%);
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.section-title-graphic {
  margin-block: 0 var(--space-2);
  text-align: center;
}
.section-title-graphic img {
  max-width: min(420px, 100%);
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.book-section-title-graphic {
  margin-block: var(--space-4) var(--space-2);
  text-align: center;
}
.book-section-title-graphic img {
  max-width: min(420px, 100%);
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Decorative "NEW ARRIVAL" sticker on a home-page book cover (Tier 1 #3).
   badge-new-arrival-maybenow-sticker.png is a 240×240 crop (made from the
   live-site's wide badge+title banner, badge-new-arrival-maybenow-home.png)
   isolating just the round "NEW ARRIVAL" stamp — cropping a composite
   banner down to its badge sub-image for this overlay use case, distinct
   from author.png's "don't re-crop the matted photo" rule (§4.1). */
.book-cover-wrap { position: relative; display: inline-block; }
.badge-sticker {
  position: absolute;
  inset-block-start: -.75rem;
  inset-inline-start: -1rem;
  width: 5.5rem;
  height: 5.5rem;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  background: var(--white);
  pointer-events: none;
}
.badge-sticker img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Testimonial stars (Tier 1 #6) — same 5-of-5 decoration on every card,
   so it carries no distinct information per card; hidden from AT. */
.stars {
  color: #8A6D00; /* darkened gold — 4.9:1 on white card bg, passes AA even though decorative/aria-hidden */
  font-size: 1.1rem;
  letter-spacing: .1em;
  margin-block-end: var(--space-1);
}

/* ---------- 8. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  padding: .7em 1.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  min-height: 44px;
  min-width: 44px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--purple);
  color: var(--white);
}
.btn-primary:hover, .btn-primary:active {
  background: #6a28a6;
}
.btn-accent {
  background: var(--magenta);
  color: var(--white);
  font-size: 1.0625rem;
}
.btn-outline {
  background: transparent;
  border: 2px solid var(--purple);
  color: var(--purple);
}
.btn[disabled] {
  opacity: .5;
  cursor: default;
}

/* ---------- 9. Accessibility ---------- */
.visually-hidden {
  position: absolute;
  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(--purple);
  outline-offset: 2px;
}
.btn-primary:focus-visible,
.btn-accent:focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4.1 Hero — real content (Task 10) ---------- */
.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.hero-photo {
  /* SUPERSEDED 2026-08-13 (visual parity, Doron): author.png is a
     pre-matted image (circular photo + thin green ring + cream margin
     baked in) — render the whole file un-clipped and un-bordered instead
     of cropping it into a small magenta-ringed circle. The cream matte
     blends into --paper.
     SUPERSEDED again 2026-08-13 (visual parity round 2, Doron): the ~305px
     figure is the visible circular photo, not the whole matted file — the
     matte adds ~36% blank margin around the circle (measured on our own
     author.png: the non-background content is 527px wide inside an 826px-
     wide file). The live site's <img> element itself renders at 480px CSS
     width at 1280px viewport (measured directly against
     mishmush.mailerpage.io), which is what makes ITS visible circle come
     out to ~305px. Setting width:305px here (as the first pass did) shrunk
     the whole matted file to 305px, so the visible circle inside it was
     only ~195px — "much smaller" than the live site, exactly as flagged.
     480px (desktop) / min(315px, 84vw) (mobile) are the live site's own
     measured <img>-element widths, copied directly rather than re-derived. */
  width: min(315px, 84vw);
  height: auto;
}
.hero-text { max-width: 65ch; }
.hero-text h1 { text-align: center; }
.hero-text p { margin-inline: auto; }
@media (min-width: 720px) {
  .hero-inner {
    display: grid;
    /* photo at inline-end (left in RTL) like the live site: text takes the
       first (start) column, photo is pushed to the second via order */
    grid-template-columns: 1fr auto;
    align-items: center;
    text-align: start;
    gap: var(--space-4);
  }
  .hero-photo { width: 480px; height: auto; order: 2; }
  .hero-text h1, .hero-text p { text-align: start; margin-inline: 0; }
}

/* ---------- 4.2 Books — #books, .book-card ---------- */
#books .section-title, #bundles .section-title, #testimonials .section-title {
  text-align: center;
}
.book-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  margin-block-end: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.book-cover-link { display: block; }
.book-cover {
  max-width: 240px;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  margin-inline: auto;
}
.book-body { max-width: 65ch; }
.book-side-effects,
.book-launch-note {
  background: rgb(214 51 140 / .08);
  border-inline-start: 4px solid var(--magenta);
  padding: var(--space-2);
  border-radius: 8px;
  font-weight: 600;
  color: var(--ink);
  text-align: start;
  margin-block: var(--space-2);
}
.book-cta { margin-block-start: var(--space-1); }
.book-more-link { margin-block-start: var(--space-1); font-weight: 600; }
@media (min-width: 720px) {
  .book-card {
    display: grid;
    /* SUPERSEDED 2026-08-13 (visual parity, Doron): swapped columns so the
       cover sits at the grid's inline-END (left in RTL) like the live
       site's "click the cover" cards, instead of inline-start. Grid column
       numbering follows dir, so this stays correct in the /en/ LTR cards
       too (cover on the right there). */
    grid-template-columns: 1fr minmax(200px, 280px);
    text-align: start;
    align-items: start;
    gap: var(--space-4);
  }
  .book-cover-link { grid-column: 2; grid-row: 1; }
  .book-body { grid-column: 1; grid-row: 1; }
  .book-cover { margin-inline: 0; }
}

/* ---------- Home page book sections (visual parity round 2, Doron) ----------
   The live site does NOT show `.book-card` as a boxed white card per book —
   each of the 3 books is its own full-width section: a white-background row
   with the badge+title graphic (banner-crackedimage-title.png etc. — same
   assets used as the book pages' own <h1> banner, already including the
   scallop/stamp badge), then a cream-background row with the cover on one
   side and the blurb/CTA text on the other. Measured directly against
   mishmush.mailerpage.io: the title-graphic row is #fff, the content row is
   --paper, and the cover sits at the grid's inline-START (right in RTL,
   opposite of the boxed `.book-card`'s own cover placement above) with text
   at inline-end (left). Scoped to `.books-home .book-card` (a class ONLY on
   `index.html`'s `#books`, never on `/en/`'s) precisely so `.book-card`'s
   base rules above — and `/en/`'s `.book-card`/`.book-card--featured`/
   `.book-card--coming` cards, which reuse those same base rules — are
   untouched by this override block. */
.books-home { padding-block: 0; }
.books-home .book-card {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-block-end: 0;
  display: block;
  text-align: initial;
}
.book-banner-row {
  background: var(--white);
  padding-block: var(--space-3);
}
.book-banner {
  margin: 0;
  text-align: center;
}
.book-banner img {
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.book-content-row {
  background: var(--paper);
  padding-block: var(--space-4);
}
.book-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
}
.book-cover-col { text-align: center; }
.book-row .book-cover {
  max-width: 260px;
  margin-inline: auto;
}
.book-row .book-body {
  max-width: 65ch;
  margin-inline: auto;
  text-align: start;
}
@media (min-width: 720px) {
  .book-row {
    display: grid;
    /* first DOM column (cover) lands at inline-start, which is the RIGHT
       edge under dir=rtl — matching the live site, unlike the boxed
       `.book-card` variant above which deliberately puts the cover at
       inline-end. */
    grid-template-columns: minmax(220px, 320px) 1fr;
    align-items: start;
    text-align: start;
  }
  .book-row .book-cover { margin-inline: 0; }
}

/* ---------- English home — featured / coming-soon book cards (ux.md §5) ---------- */
.book-card--featured {
  border: 2px solid var(--purple);
}
.books-coming-grid {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-4);
}
.coming-badge {
  display: inline-block;
  background: var(--purple-soft);
  color: var(--magenta-deep);
  font-weight: 700;
  font-size: .8rem;
  padding: .3em .9em;
  border-radius: var(--radius-btn);
  margin-block-start: var(--space-1);
}
@media (min-width: 720px) {
  .books-coming-grid { grid-template-columns: 1fr 1fr; }
  .book-card--coming {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .book-card--coming .book-cover { margin-inline: auto; }
}

/* ---------- 4.3 Gift bundles — #bundles, .bundle-card ---------- */
.section-intro {
  text-align: center;
  max-width: 65ch;
  margin-inline: auto;
}
.bundles-grid {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-3);
}
@media (min-width: 720px) {
  .bundles-grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
}
.bundle-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bundle-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0;
}
.bundle-body {
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.bundle-includes { margin: 0; padding-inline-start: 1.2em; }
.bundle-price { margin: 0; }
.price-old {
  opacity: .65;
  font-weight: 400;
  margin-inline-end: .5em;
}
.bundle-cta { align-self: flex-start; }

/* ---------- 4.4 Testimonials — #testimonials, .testimonial-gallery ----------
   2026-08-14 (Doron): the scroll-snap carousel is replaced everywhere by an
   arrow gallery (one testimonial visible, prev/next arrows, dot indicators)
   — assets/js/gallery.js builds the controls into [data-gallery]. */
.testimonial-gallery {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 8px;
}
.gallery-viewport { min-width: 0; }
/* author display rules (e.g. the flex testimonial cards) would otherwise
   beat the UA's [hidden] { display: none } */
.gallery-viewport > [hidden] { display: none !important; }
.gallery-arrow {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--purple);       /* old carousel arrows: #7e53ad, 28px */
  font-size: 28px;
  line-height: 1;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}
.gallery-arrow:hover { color: var(--magenta-deep); }
.gallery-dots {
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-block-start: 14px;
}
.gallery-dot {
  inline-size: 15px;          /* old carousel indicators: 15px purple dots */
  block-size: 15px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--purple);
  opacity: .35;
}
.gallery-dot[aria-current="true"] { opacity: 1; }
.gallery-arrow:focus-visible,
.gallery-dot:focus-visible {
  outline: 2px solid var(--magenta-deep);
  outline-offset: 2px;
}
.testimonial-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}
.testimonial-card blockquote {
  margin: 0;
  white-space: pre-line;
}
.testimonial-card blockquote::before {
  content: "\201C";
  display: block;
  line-height: 1;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--magenta);
}
.testimonial-name {
  display: block;
  margin-block-start: var(--space-2);
  color: var(--purple);
  font-weight: 700;
}

/* ---------- 4.5 Video — #video ---------- */
.video-embed {
  aspect-ratio: 16 / 9;
  max-width: 720px;
  margin-inline: auto;
}
/* `display: block` removes the inline-baseline descender gap that otherwise left
   ~8px of dead space under every embed (the 16/9 box measured 1.704, not 1.778,
   because of it). Mobile pass 2026-08-14. */
.video-embed iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* ---------- 4.8 Contact — #contact ---------- */
.contact-links {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
@media (min-width: 720px) {
  .contact-links { flex-direction: row; gap: var(--space-4); }
}
.contact-links .social-link { color: var(--ink); }
.contact-links .social-link:hover { color: var(--purple); }
.contact-links .social-link svg { fill: var(--purple); }

/* ---------- 6. Book detail pages ---------- */
.book-page-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}
.book-page-cover {
  max-width: 320px;
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.book-page-about { max-width: 65ch; }
.book-quote {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  max-width: 45ch;
  font-style: italic;
  margin-inline: auto;
}
@media (min-width: 720px) {
  .book-page-hero { flex-direction: row; align-items: flex-start; text-align: start; }
  .book-page-cover { flex: 0 0 320px; }
  .book-quote { margin-inline: 0; }
}
.book-blurb-full {
  max-width: 65ch;
  margin-inline: auto;
  white-space: pre-line;
}
@media (min-width: 720px) { .book-blurb-full { margin-inline: 0; } }

.order-box {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  max-width: 40rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Store links (book pages) — fidelity 2026-08-14: the old site renders
   these as centered running-text paragraphs whose links are plain blue
   underlined text (#1700ff; the /thirdbook page used #0045ff), not a
   button-like list. */
.store-links { text-align: center; }
.store-links p { max-width: none; margin-block: 8px; }
.store-links a { color: #1700FF; text-decoration: underline; }
.store-links--maybestill a { color: #0045FF; }

.prologue { max-width: 65ch; }
.prologue-text {
  white-space: pre-line;
  margin-block-start: var(--space-2);
}

.press {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
}
.press img {
  max-width: 380px; /* SUPERSEDED 2026-08-13 (visual parity): was 280px, notably smaller than the live site's clipping */
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}

.back-link { display: inline-block; margin-block-start: var(--space-2); }

/* ---------- Events + legal pages ---------- */
.prose { max-width: 65ch; white-space: pre-line; }
.prose h2 { margin-block-start: var(--space-4); }
.flyer-image {
  max-width: 100%;
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: block;
  margin-inline: auto var(--space-3);
}
/* .flyer-transcript rules removed 2026-08-16 (Tami's review) — the /events/
   flyer transcription block they styled no longer exists (see events/index.html). */

/* ---- Numbered legal sections (/terms/) ----------------------------------
   Mirrors the old /regulation page's own scheme, measured with
   getComputedStyle on mishmush.mailerpage.io at 1280px: top-level <ol> is
   `decimal` ("1." "2." …), the nested clause <ol> is `lower-alpha`
   ("a." "b." …), both `list-style-position: outside` with a 40px
   padding-inline-start. The section title is a real heading (outline
   preserved) rendered inline-bold so it reads exactly like the original's
   <strong>. Not scoped to html[lang="he"]: /terms/ is Hebrew-only and these
   class names appear nowhere else, so /en/ can never pick them up. */
.legal-sections {
  list-style-type: decimal;
  padding-inline-start: 40px;
  margin-block: var(--space-2);
}
.legal-sections ol {
  list-style-type: lower-alpha;
  padding-inline-start: 40px;
  margin-block: .35rem 0;
}
.legal-sections > li { margin-block-end: var(--space-2); }
.legal-sections li { margin-block-end: .35rem; }
.legal-section-title {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  color: inherit;
  margin: 0;
}

/* ---------- Newsletter signup card (ux.md §7, Task 9) ---------- */
.signup-card { max-width: 30rem; }
.signup-form { display: flex; flex-direction: column; gap: var(--space-1); }
.signup-form label { font-weight: 600; }
.signup-form input {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .6em .8em;
  border: 1px solid rgb(34 31 38 / .25);
  border-radius: 8px;
  min-height: 44px;
  background: var(--white);
  color: var(--ink);
}
.signup-form input[aria-invalid="true"] {
  border: 2px solid var(--magenta-deep);
}
.signup-form input:disabled { opacity: .6; }

.signup-submit { align-self: flex-start; min-width: 10rem; }
.signup-status {
  min-height: 1.5em;
  margin: 0;
  font-weight: 600;
}
.is-error .signup-status,
.signup-status.is-error-text { color: var(--magenta-deep); }
.is-success .signup-status,
.signup-status.is-success-text { color: var(--purple); }
.signup-privacy { color: var(--ink); opacity: .75; margin-block-start: 0; }
.signup-unconfigured {
  font-family: var(--font-body);
  color: var(--purple);
  font-size: 1.1rem;
}

.signup-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.5rem;
  height: 6.5rem;
  border: 3px solid var(--purple);
  color: var(--purple);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 1.15rem;
  text-align: center;
  rotate: -12deg;
  animation: signupStampIn .25s ease;
}
@keyframes signupStampIn {
  from { opacity: 0; transform: scale(1.15) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(-12deg); }
}
.signup-success-body { margin-block-start: var(--space-2); max-width: 30rem; }

/* ---------- Newsletter tool page (/newsletter/, Task 9) ---------- */
.newsletter-tool { max-width: 40rem; }
.newsletter-tool .sub { margin-block-start: 0; }
.tabs { display: flex; gap: var(--space-1); margin-block-end: var(--space-3); }
.tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .95rem;
  padding: .5em 1.2em;
  border-radius: var(--radius-btn);
  border: 1px solid rgb(123 47 190 / .3);
  background: transparent;
  color: var(--ink);
  min-height: 44px;
  cursor: pointer;
}
.tab.active { background: var(--purple); color: var(--white); border-color: var(--purple); }
.tab[hidden] { display: none; }

.card {
  background: var(--white);
  border: 1px solid rgb(34 31 38 / .1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  margin-block-end: var(--space-3);
}
.card textarea,
.card input[type="text"],
.card input[type="email"],
.card input[type="password"],
.card select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: .6em .8em;
  border: 1px solid rgb(34 31 38 / .25);
  border-radius: 8px;
  min-height: 44px;
  margin-block-end: var(--space-2);
  background: var(--white);
  color: var(--ink);
}
.card label { display: block; font-weight: 600; margin-block-end: .3em; }
.checkbox-label { display: flex; align-items: center; gap: .5em; font-weight: 400; cursor: pointer; }
.checkbox-label input { width: auto; min-height: auto; }

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  opacity: .6;
  font-size: .875rem;
  margin-block: var(--space-3);
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: rgb(34 31 38 / .2); }

.ledger-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-block-end: var(--space-2);
}
.ledger-title { font-family: var(--font-body); font-weight: 700; color: var(--purple); font-size: 1.2rem; margin: 0; }
.count { font-size: .875rem; opacity: .7; }
.toolbar { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-block-end: var(--space-2); }
.toolbar input { flex: 1; min-width: 10rem; margin-block-end: 0; }
.btn-small { padding: .4em 1em; min-height: 36px; font-size: .875rem; }

.index-card {
  border: 1px solid rgb(34 31 38 / .12);
  border-radius: 8px;
  padding: .6em .9em;
  margin-block-end: var(--space-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}
.index-card .who { font-weight: 700; }
.index-card .email { font-size: .8rem; opacity: .7; font-family: monospace; }
.index-card .meta { font-size: .75rem; opacity: .6; }
.status-pill { font-size: .7rem; padding: .15em .6em; border-radius: var(--radius-btn); }
.status-pill.active { background: rgb(123 47 190 / .12); color: var(--purple); }
.status-pill.unsub { background: rgb(214 51 140 / .12); color: var(--magenta-deep); }
.empty { text-align: center; opacity: .6; padding: var(--space-2) 0; }
.note { font-size: .8rem; opacity: .7; line-height: 1.6; }
.btn-row { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.setup-details { margin-block-start: var(--space-2); }
.setup-details summary { cursor: pointer; color: var(--purple); font-weight: 700; }

/* ============================================================================
   Hebrew visual parity — ADDED 2026-08-14 (Doron's review round).
   Every value in this block is MEASURED from the old live site
   (mishmush.mailerpage.io) with getComputedStyle at a 1280px viewport.

   Scoping mechanism (the one consistent mechanism, documented in docs/ux.md):
   - Selectors that /en/ pages also use are overridden under `html[lang="he"]`
     so English pages keep their existing look untouched.
   - Brand-new classes below (.band-white, .band-cream, .socials-row,
     .bundle-row, .order-intro-text, .mm-form, .contact-form-grid,
     .whatsapp-icon-row, .footer-*) appear ONLY in Hebrew pages' markup.
   ============================================================================ */

/* ---- base typography (old site: 16px Tahoma, #333, right-aligned) ----
   2026-08-14 (Doron, fidelity round): the old site declares
   `Tahoma, Geneva, sans-serif` on body AND headings — the system-ui stack
   a previous cycle introduced here was wrong and is replaced. */
html[lang="he"] body {
  background: #fff; /* old page bg is WHITE; cream is per-band (below) */
  color: #333;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
html[lang="he"] h2,
html[lang="he"] .section-title {
  font-family: inherit;
  font-size: 30px;          /* measured: bundle titles / פרולוג */
  font-weight: 700;
  color: #000;
  text-align: center;
}
html[lang="he"] h3 { font-family: inherit; color: #000; }
html[lang="he"] .btn {
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  border-radius: 6px;       /* measured: old buttons are 6px, not pills */
  padding: 12px 40px;
}

/* ---- page grid: old content column is 1020px ---- */
html[lang="he"] .container { max-width: 1068px; } /* 1020 + 2×24 padding */
html[lang="he"] .section { padding-block: 20px; }
.band-white { background: #fff; }
.band-cream { background: var(--paper); }
html[lang="he"] .section--tint { background: transparent; }

/* ---- header / nav (old: white sticky, 105px total, logo 70px at the far
        left, 14px black links ~40px apart, current page bold, יצירת קשר
        underlined at the far right) ---- */
html[lang="he"] .site-header { background: #fff; border-block-end: none; }
html[lang="he"] .site-header .container {
  max-width: none;
  padding-inline: 16px;
  padding-block: 12px;
}
html[lang="he"] .site-logo img { width: 70px; height: 70px; }
html[lang="he"] .site-nav { gap: 4px; }
html[lang="he"] .nav-list a,
html[lang="he"] .nav-contact-link {
  font-size: 14px;
  font-weight: 400;
  color: #000;
}
html[lang="he"] .nav-list a[aria-current="page"] { font-weight: 700; }
html[lang="he"] .nav-contact-link { text-decoration: underline; }
@media (min-width: 720px) {
  html[lang="he"] .nav-list { gap: 0; }
  html[lang="he"] .nav-list a { padding-inline: 20px; }
  html[lang="he"] .nav-contact-link { padding-inline: 20px; }
}
html[lang="he"] .lang-toggle {
  font-size: 14px;
  font-weight: 400;
  min-height: 36px;
  padding: .3em 1em;
  border-color: rgb(0 0 0 / .35);
  color: #333;
  border-radius: 6px;
}

/* ---- masthead: full-width white band, banner img fills the container
        (old: 1020×142 at 1280vp on a white row → reads full-page-width) ---- */
html[lang="he"] .masthead-banner { background: #fff; padding-block: 0 20px; }

/* ---- section-title graphics render at FULL container width on the old
        site (1020px), not capped ---- */
html[lang="he"] .section-title-graphic img,
html[lang="he"] .book-section-title-graphic img,
html[lang="he"] .page-title-banner img { max-width: 100%; }
html[lang="he"] .section-title-graphic { margin-block: 0; }
html[lang="he"] .book-section-title-graphic { margin-block: 0; }
html[lang="he"] .page-title-banner { margin-block-end: 0; }

/* ---- hero (old: cream band, photo 480px at the left, right-aligned text) ---- */
html[lang="he"] .hero { padding-block: 0 24px; }
@media (min-width: 720px) {
  html[lang="he"] .hero-inner { gap: 60px; }
}

/* ---- home book rows: measured cover render sizes, no card chrome ---- */
html[lang="he"] .book-cover,
html[lang="he"] .book-page-cover { border-radius: 0; box-shadow: none; }
html[lang="he"] .book-row .book-cover { max-width: 100%; width: auto; }
html[lang="he"] .book-banner-row { padding-block: 4px; }
html[lang="he"] .book-content-row { padding-block: 32px; }
html[lang="he"] .book-side-effects {
  background: none;
  border-inline-start: none;
  padding: 0;
  border-radius: 0;
  font-weight: 400; /* old: plain body text */
  margin-block: var(--space-2);
}
html[lang="he"] .book-side-effects strong { font-weight: 700; }

/* ---- book detail hero: text at inline-start (right), cover at inline-end ---- */
@media (min-width: 720px) {
  html[lang="he"] .book-page-hero {
    display: grid;
    grid-template-columns: 1fr 480px;
    align-items: center;
    gap: 60px;
  }
  html[lang="he"] .book-page-cover { grid-column: 2; grid-row: 1; justify-self: center; flex: none; }
  html[lang="he"] .book-page-about { grid-column: 1; grid-row: 1; }
}

/* ---- bundles: full-width alternating bands. Measured on the old site:
        TEXT at screen-LEFT (x=130..610), PHOTO at screen-RIGHT (x≈760).
        DOM keeps text first (title first for AT); explicit grid placement
        puts the photo in column 1 (= the RIGHT column under dir=rtl). ---- */
/* .bundle-card stays on the two bundle band sections (class contract:
   "2 .bundle-card on /"), but the old site has no boxed card — strip the
   card chrome on Hebrew pages. /en/ has zero .bundle-card, so scoping is
   belt-and-braces. */
html[lang="he"] .bundle-card {
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  display: block;
}
.bundle-row { display: grid; gap: 32px; align-items: start; }
@media (min-width: 720px) {
  .bundle-row { grid-template-columns: 1fr 1fr; column-gap: 60px; }
  .bundle-row .bundle-photo-col { grid-column: 1; grid-row: 1; }
  .bundle-row .bundle-text { grid-column: 2; grid-row: 1; }
}
.bundle-photo-col { text-align: center; }
html[lang="he"] .bundle-photo {
  width: auto;
  max-width: 100%;
  aspect-ratio: auto;
  object-fit: unset;
  border-radius: 0;
  margin-inline: auto;
}
html[lang="he"] .bundle-title {
  font-size: 30px;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin-block: 0 var(--space-2);
}
html[lang="he"] .bundle-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
html[lang="he"] .bundle-includes--numbered { list-style: decimal; padding-inline-start: 1.4em; }
.bundle-price-line { margin: 0; }
.bundle-text > p { margin-block: 10px; max-width: none; }
.whatsapp-icon-row { text-align: center; margin-block: 12px 0; }
.whatsapp-icon-row--start { text-align: start; }
.whatsapp-icon-row img { display: inline-block; width: 40px; height: 40px; }
html[lang="he"] .store-links { margin-block-start: 16px; }

/* ---- order / contact form sections ---- */
.order-intro-text p { max-width: none; margin-block: 8px; }
.order-intro-text { text-align: start; }
/* Book pages' order intro is CENTERED on the old site (home's is not);
   the shipping line renders at 12px there (fidelity 2026-08-14). */
.order-intro-text--center { text-align: center; }
.order-shipping { font-size: 12px; }

.mm-form { display: flex; flex-direction: column; gap: 16px; max-width: none; }
.mm-form input[type="text"],
.mm-form input[type="email"],
.mm-form input[type="tel"],
.mm-form select,
.mm-form textarea {
  width: 100%;
  min-height: 50px;         /* measured field height */
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;          /* measured */
  color: #333;
  background: #fff;
  border: 1px solid #E5E7EB; /* measured */
  border-radius: 6px;        /* measured */
}
.mm-form textarea { min-height: 74px; resize: vertical; }
.mm-form ::placeholder { color: #6B7280; opacity: 1; }
.mm-form input[aria-invalid="true"],
.mm-form textarea[aria-invalid="true"],
.mm-form select[aria-invalid="true"] { border: 2px solid var(--magenta-deep); }
/* the consent box is required on the order form (Doron 2026-08-18) — give it
   the same visible cue as a text field, plus a tint on its label text */
.mm-form input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--magenta-deep); outline-offset: 2px; }
.mm-form input[type="checkbox"][aria-invalid="true"] ~ span { color: var(--magenta-deep); }
.mm-form input:disabled,
.mm-form select:disabled,
.mm-form textarea:disabled { opacity: .6; }
.mm-label { font-size: 14px; font-weight: 700; color: #000; margin: 0 0 -8px; }
.mm-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  color: #000;
  font-weight: 400;
  cursor: pointer;
}
.mm-consent input { margin-block-start: 4px; }
.order-form .mm-submit { align-self: center; min-width: 170px; }
.mm-form .signup-status { text-align: center; }

/* contact form: two 480px columns, message textarea in the START (right)
   column spanning the 3 input rows, שלח at the far END (left) — measured */
@media (min-width: 720px) {
  .contact-form-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; row-gap: 16px; }
  .contact-form-grid .cf-message { grid-column: 1; grid-row: 1 / span 3; }
  .contact-form-grid .cf-message textarea { height: 100%; min-height: 182px; }
  .contact-form-grid .cf-name  { grid-column: 2; grid-row: 1; }
  .contact-form-grid .cf-email { grid-column: 2; grid-row: 2; }
  .contact-form-grid .cf-phone { grid-column: 2; grid-row: 3; }
  .contact-form-grid .cf-status { grid-column: 1 / -1; grid-row: 4; }
  .contact-form-grid .cf-actions { grid-column: 1 / -1; grid-row: 5; justify-self: end; }
}
.contact-form .mm-submit { min-width: 112px; }
.form-success { text-align: center; font-size: 18px; padding-block: 24px; }
.form-success p { margin-block: 6px; max-width: none; }
html[lang="he"] .signup-unconfigured { font-family: inherit; }

/* ---- social icon rows (old: brand-color round PNGs, centered) ---- */
.socials-row {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.socials-row img { width: 36px; height: 36px; }
.socials-row--lg img { width: 40px; height: 40px; }
.socials-row a { display: inline-flex; }

/* ---- video embeds (measured per page on the live site: home 570×321,
   wingspan trailer 750×422, crackedimage trailer 1020×574) ---- */
html[lang="he"] .video-embed { max-width: 570px; }
html[lang="he"] .video-embed--wide { max-width: 750px; }
html[lang="he"] .video-embed--full { max-width: 1020px; }
html[lang="he"] .video-embed iframe { border-radius: 0; }

/* ---- testimonials (old: no cards — one centered plain quote per view,
        gold stars UNDER the quote) ---- */
html[lang="he"] .testimonial-card {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding: 8px 0 16px;
  text-align: center;
}
html[lang="he"] .testimonial-card blockquote {
  max-width: 640px;
  margin-inline: auto;
}
html[lang="he"] .testimonial-card blockquote::before { content: none; }
html[lang="he"] .stars {
  color: #FFC107;           /* old: gold star icons */
  font-size: 26px;
  letter-spacing: .55em;
  margin-block: 14px 0;
}
html[lang="he"] .testimonial-name {
  color: #333;
  font-weight: 400;
  font-size: 14px;
  margin-block-start: 10px;
}
/* ---- prologue: plain centered heading + fully visible text (the
        <details>/<summary> widget was removed 2026-08-14 for fidelity;
        .prologue-heading inherits the he h2 look: 30px, 700, black,
        centered) ---- */
html[lang="he"] .prologue { max-width: none; }
html[lang="he"] .prologue-text { max-width: 65ch; margin-inline: auto; }

/* ---- press image (old: 568×492 plain) ---- */
/* Events-page prose: the old page is plain full-width right-aligned
   paragraphs — no 65ch cap, and real <p>/<br> markup instead of the
   pre-line hack (fidelity 2026-08-14). */
html[lang="he"] .prose { max-width: none; white-space: normal; }
html[lang="he"] .prose p { max-width: none; }

/* Press clippings render at the old site's own per-image CSS size, driven
   by each <img>'s width/height attributes (wingspan 568×492, crackedimage
   423×529 — fidelity 2026-08-14); the cap here only prevents overflow. */
html[lang="he"] .press img { max-width: 100%; height: auto; border-radius: 0; box-shadow: none; }

/* ---- newsletter section on Hebrew pages: centered, band-styled ---- */
html[lang="he"] .newsletter-band .container { text-align: center; }
html[lang="he"] .newsletter-band p { margin-inline: auto; }
html[lang="he"] .newsletter-band .signup-card { margin-inline: auto; text-align: start; }

/* ---- events flyer (old: 676px wide on a white band) ---- */
html[lang="he"] .flyer-image {
  max-width: 676px;
  border-radius: 0;
  box-shadow: none;
  margin-inline: auto;
}

/* ---- footer (old: cream legal-links strip, then white strip with the
        baked copyright graphic) ---- */
html[lang="he"] .site-footer {
  background: #fff;
  border-block-start: none;
  padding-block: 0;
}
html[lang="he"] .site-footer .container > * + * { margin-block-start: 0; }
.footer-legal-band { padding-block: 16px; }
.footer-legal-band .legal-links {
  text-align: center;
  margin: 0;
  font-size: 12px;
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}
html[lang="he"] .site-footer .legal-links a { color: #000; }
.footer-copyright-band { padding-block: 16px; text-align: center; }
.footer-copyright {
  display: block;
  width: 100%;
  height: auto;
  margin-inline: auto;
}
.footer-copyright--home { max-width: 750px; }
.footer-newsletter-link { font-size: 12px; margin-block: 8px 0; }
html[lang="he"] .back-link { margin-block: 0; }

/* ---- cycle-1 refinements after first old-vs-new comparison ---- */
/* old hero: each sentence is its own line, 15px apart */
html[lang="he"] .hero-text p { margin-block: 0 15px; max-width: none; }
/* old home book rows: two equal 480px columns, 60px apart; wingspan's cover
   renders at its full 354px */
@media (min-width: 720px) {
  html[lang="he"] .book-row { grid-template-columns: 1fr 1fr; column-gap: 60px; }
  /* the base .book-card rules pin .book-body to grid column 1 (for /en/'s
     boxed cards); place the home row's children explicitly — column 1 is
     the RIGHT column under dir=rtl, where the old site puts the cover */
  html[lang="he"] .book-row .book-cover-col { grid-column: 1; grid-row: 1; }
  html[lang="he"] .book-row .book-body { grid-column: 2; grid-row: 1; }
}
/* old book-page covers render at natural size (354/285/215) */
html[lang="he"] .book-page-cover { max-width: 100%; }
/* old header is 105px tall (12px padding + 80px nav row) */
@media (min-width: 720px) {
  html[lang="he"] .site-nav { min-height: 80px; }
}
/* old site wraps blurb/prologue text naturally at full container width —
   the pre-line + source-wrapped markup produced arbitrary mid-sentence
   breaks on Hebrew pages */
html[lang="he"] .book-blurb-full,
html[lang="he"] .prologue-text {
  white-space: normal;
  max-width: none;
}
html[lang="he"] .book-blurb-full p { max-width: none; }
html[lang="he"] .prologue-text p { max-width: none; }
@media (min-width: 720px) {
  /* center the cover inside its (right) column like the old site */
  html[lang="he"] .book-row .book-cover { margin-inline: auto; }
}

/* ---- cycle-2 refinements ---- */
/* old book pages: quote, then attribution, then MAGENTA stars (home stays
   gold); enforce that visual order regardless of DOM order */
html[lang="he"] .testimonial-card { display: flex; flex-direction: column; }
html[lang="he"] .testimonial-card blockquote { order: 1; }
html[lang="he"] .testimonial-card .testimonial-name { order: 2; }
html[lang="he"] .testimonial-card .stars { order: 3; }
html[lang="he"] .stars--pink { color: #EC1A9E; }
.footer-legal-band .legal-links { max-width: none; }


/* ============================================================================
   MOBILE PASS — 2026-08-14   (contract: docs/ux.md "Mobile pass 2026-08-14")

   Two scopes, deliberately different, because two different things are being
   fixed and they do not have the same trigger condition:

   A. TOUCH scope — `(max-width: 719px), (pointer: coarse)`
      Touch-target sizes, iOS zoom-on-focus, and fine-print legibility. The
      trigger is "a finger is the pointer", not "the screen is narrow", so a
      768px tablet in portrait and a phone in landscape are covered even though
      they render the ≥720px desktop layout. A mouse-driven desktop reports
      `pointer: fine` and is left completely untouched.

   B. NARROW scope — `(max-width: 719px)`
      Layout-shape changes (header height, the open nav panel) that only make
      sense while the single-column mobile layout is active.

   Why scope at all instead of applying sitewide: the Hebrew desktop look is a
   signed-off pixel-parity contract measured against mishmush.mailerpage.io at
   1280px (see the addendum in docs/ux.md). Growing dot/icon hit boxes or
   bumping fine-print sizes at every width would silently break it, and buys
   nothing for a mouse user.

   Selectors below are repeated at the same specificity as the rules they
   override; being last in the file is what makes them win.
   ========================================================================== */

/* ---------------- A. TOUCH scope ---------------- */
@media (max-width: 719px), (pointer: coarse) {

  /* --- iOS zoom-on-focus: Safari zooms the whole page whenever a focused form
     control computes below 16px. The parity-measured 14px field text is a
     desktop-only value. --- */
  input, select, textarea,
  .mm-form input[type="text"],
  .mm-form input[type="email"],
  .mm-form input[type="tel"],
  .mm-form input[type="password"],
  .mm-form select,
  .mm-form textarea {
    font-size: 16px;
  }

  /* --- Touch targets ≥44×44 (ux.md §9.5) --- */

  /* Gallery dots: 15px purple dot is the parity-measured *visual*. The button
     box grows to 44×44 around it and the dot is drawn with ::before, so the
     appearance is unchanged and only the hit area grows. The row wraps because
     7 dots × 44px overflows a 320px column. */
  .gallery-dots { gap: 0; flex-wrap: wrap; }
  .gallery-dot {
    inline-size: 44px;
    block-size: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border-radius: 0;
    opacity: 1;
  }
  .gallery-dot::before {
    content: "";
    inline-size: 15px;
    block-size: 15px;
    border-radius: 50%;
    background: var(--purple);
    opacity: .35;
  }
  .gallery-dot[aria-current="true"]::before { opacity: 1; }

  /* Social icon links and the round WhatsApp order icons: the 36/40px brand
     PNGs are centred inside a 44×44 link box; icon size (parity) is untouched. */
  .socials-row a,
  .whatsapp-icon-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  /* Language toggle — the he override pins it to 36px for desktop parity. */
  html[lang="he"] .lang-toggle,
  .lang-toggle { min-height: 44px; }

  /* Footer links and the standalone /en/ "More about…" link are one link on a
     line of their own, not inline-in-a-sentence, so they get real boxes.
     `.site-footer p a` also catches /en/'s unclassed footer newsletter link. */
  .legal-links a,
  .footer-newsletter-link a,
  .site-footer p a,
  .book-more-link a {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
  .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.25em; }
  .legal-links a + a { margin-inline-start: 0; }

  /* Store links render as centred running-text lines (parity). WCAG 2.5.8
     exempts inline-in-a-sentence targets from the size rule, but these stack
     vertically only 15px apart, which is a real mis-tap risk — pad each into a
     45px box so the tap pitch is ~49px. Visual line spacing barely moves. */
  .store-links p { margin-block: 2px; }
  .store-links a { display: inline-block; padding-block: 14px; }

  /* Same problem, same fix: /accessibility/'s email and WhatsApp links sit on
     consecutive <br>-separated lines only 27px apart — too close to tap
     confidently, and this is the accessibility statement of all places. */
  .contact-lines { line-height: 2.4; }
  .contact-lines a { display: inline-block; padding-block: 10px; }

  /* Skip link — the first focusable element on every page. */
  .skip-link { min-block-size: 44px; display: inline-flex; align-items: center; }

  /* .testimonial-card is a <figure>, and the UA default `margin: 1em 40px` was
     eating 80px of the 223px the gallery leaves between its two arrows — a
     143px text column, narrow enough that the 5-star row (187px) overflowed it.
     Scoped to touch rather than fixed globally so the signed-off 1280px parity
     screenshots are not disturbed by a mobile pass; on desktop the same 80px is
     cosmetically wrong too (the addendum calls for full container width), which
     is noted for a future parity round rather than changed here. */
  .testimonial-card { margin-inline: 0; }

  /* Label-wrapped checkboxes (.mm-consent, .checkbox-label) are activated by
     tapping anywhere on the label, so the LABEL is the target; it only needs to
     be tall enough. The box itself just grows from 13px to a comfortable 22px. */
  .mm-consent input[type="checkbox"],
  .checkbox-label input[type="checkbox"] { inline-size: 22px; block-size: 22px; }
  .mm-consent, .checkbox-label { min-block-size: 44px; }

  /* --- Typography: nothing below 15px under a finger. Every value replaced
     here is a parity-measured desktop size (12–14px fine print, field labels,
     prices, badges). --- */
  .text-small,
  .mm-label,
  .legal-links,
  .divider,
  .order-shipping,
  .footer-newsletter-link,
  .coming-badge,
  .note,
  .testimonial-name,
  html[lang="he"] .testimonial-name { font-size: 15px; }
}

/* ---------------- B. NARROW scope ---------------- */
@media (max-width: 719px) {

  /* Header: the parity header is 105px (70px logo + 12px padding) — a lot of a
     667px phone screen to hand to a permanently sticky bar. */
  html[lang="he"] .site-header .container { padding-block: 10px; }
  html[lang="he"] .site-logo img { width: 52px; height: 52px; }

  /* The open menu is grid row 2 *inside* the sticky header, which made the
     sticky bar 436px tall — two thirds of an iPhone SE screen, permanently
     pinned. Float the panel below the header instead, so the sticky bar stays
     ~72px and the panel scrolls internally if it ever outgrows the screen. */
  .site-header .container { position: relative; }
  .site-nav[data-open="true"] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    padding-inline: var(--space-3);
    padding-block-end: var(--space-2);
    border-block-end: 1px solid rgb(123 47 190 / .15);
    box-shadow: var(--shadow-card);
    max-block-size: calc(100vh - 100%);
    overflow-y: auto;
    z-index: 60;
  }
  html[lang="he"] .site-nav[data-open="true"] { background: #fff; }
}

/* Landscape phones: a viewport under ~500px tall is mostly consumed by a 105px
   sticky header, and the width there is ≥720px so scope B does not apply. */
@media (max-height: 500px) and (max-width: 926px) {
  .site-logo img { width: 44px; height: 44px; }
  html[lang="he"] .site-logo img { width: 44px; height: 44px; }
  html[lang="he"] .site-header .container { padding-block: 8px; }
  html[lang="he"] .site-nav { min-height: 0; }
}

/* =========================================================================
   RTL TEXT ALIGNMENT ON MOBILE — Tami's review 2026-08-16 (item 5)
   -------------------------------------------------------------------------
   Reported: "some Hebrew text is not right-aligned as it should be on mobile,
   causing a messy look."

   Root cause: two components center their text ONLY in the single-column
   mobile layout and switch to `text-align: start` at ≥720px —
   `.hero-inner` (§4.1) and `.book-page-hero` (§6). On desktop they therefore
   matched the old site and on a phone they did not. Measured against
   mishmush.mailerpage.io at 375px: the old site renders every one of these
   blocks `text-align: right` at mobile too (home hero intro ×10 paragraphs;
   each book page's ⚠ warning lines and about/accolade paragraphs).

   Scope: `html[lang="he"]` + narrow only. `/en/`'s hero and book pages keep
   their designed centered mobile treatment (ux.md §4.1/§5) — the old site has
   no English version to match, so nothing there is a parity bug. The base
   rules are left untouched so the ≥720px layout is unchanged in both
   languages; this only removes the mobile-only centering.

   Elements the old site DOES centre at 375 (section-title graphics, the
   newsletter band, store links, the whatsapp icon row, prices/order intro,
   testimonials, footer) are deliberately NOT touched — this was matched
   element by element at 375, not applied as a blanket rule.
   ========================================================================= */
@media (max-width: 719px) {
  html[lang="he"] .hero-inner { text-align: start; }
  html[lang="he"] .hero-text h1,
  html[lang="he"] .hero-text p { text-align: start; margin-inline: 0; }
  html[lang="he"] .book-page-hero { text-align: start; }
  /* the cover/photo stay centred: both are flex items positioned by
     `align-items: center`, which `text-align` does not affect. */
}

/* /terms/ — the old /regulation page centres the document title and the two
   "which site / updated on" meta lines at every width (measured: those are
   its only centred blocks); everything else on it is right-aligned. */
.legal-title { text-align: center; }
.legal-meta { text-align: center; }

/* ============================================================================
   ENGLISH PAGES — banded layout   (Doron 2026-08-18)
   -------------------------------------------------------------------------
   The /en/ pages were rebuilt to mirror the Hebrew pages' band structure
   (docs/ux.md, Hebrew visual-parity addendum): alternating .band-white /
   .band-cream full-width sections, content inside .container, and banner
   PNGs wrapped in the heading element (alt = the heading's accessible name).

   The English banner assets (en-banner-*.png) are the same 1366×178 shape as
   the Hebrew ones, so the English pages need the same "render the banner at
   full container width" treatment the html[lang="he"] block above applies —
   the base .section-title-graphic / .page-title-banner caps (420px / 640px)
   were sized for small decorative graphics and would render these wordmarks
   only ~55px tall.

   Scoped to html[lang="en"] so the signed-off Hebrew parity rules stay
   untouched, mirroring the existing html[lang="he"] scoping convention.
   ========================================================================== */

/* header: white, like the white masthead band directly under it. The logo is
   the 1080×1080 en-logo-mishmush.png rendered in the same 70px box the Hebrew
   header uses (the <img> carries width/height="70" so nothing is squashed). */
html[lang="en"] .site-header { background: #fff; border-block-end: none; }
html[lang="en"] .site-logo img { width: 70px; height: 70px; }
@media (max-width: 719px) {
  html[lang="en"] .site-logo img { width: 52px; height: 52px; }
  html[lang="en"] .site-nav[data-open="true"] { background: #fff; }
}

/* Tami's review 2026-08-22 (item 4): the English bands' padding-block was
   noticeably more generous than Hebrew's (tightened for parity to a flat
   20px — see html[lang="he"] .section further down) and read as too much
   air between panels. Cut roughly a third to a half at each breakpoint,
   keeping the base rules' mobile/desktop step so wide bands still get a
   little more room than narrow ones; .hero / .book-banner-row /
   .book-content-row have no breakpoint step in the base rules, so their
   cuts are flat. This also tightens the gap above/below every banner
   heading (.masthead-banner, .section-title-graphic,
   .book-section-title-graphic, .page-title-banner) — their own
   margin-block is already zeroed for English just below, so all of their
   surrounding space comes from the containing .section/.book-*-row.
   Scoped to html[lang="en"] only — Hebrew's own spacing is untouched. */
html[lang="en"] .section { padding-block: 24px; }
@media (min-width: 720px) {
  html[lang="en"] .section { padding-block: 40px; }
}
html[lang="en"] .hero { padding-block: 24px; }
html[lang="en"] .book-banner-row { padding-block: 16px; }
html[lang="en"] .book-content-row { padding-block: 24px; }

/* masthead + banner headings at full container width */
html[lang="en"] .masthead-banner { background: #fff; padding-block: 0 20px; }
html[lang="en"] .masthead-banner img,
html[lang="en"] .section-title-graphic img,
html[lang="en"] .book-section-title-graphic img,
html[lang="en"] .page-title-banner img { max-width: 100%; }
html[lang="en"] .section-title-graphic,
html[lang="en"] .book-section-title-graphic { margin-block: 0; }
html[lang="en"] .page-title-banner { margin-block-end: 0; }

/* Long-form English copy is written as real <p>/<br> markup, so the base
   classes' `white-space: pre-line` (a markup-free authoring shortcut) would
   inject a line break at every source-line wrap. Same override the Hebrew
   block makes, for the same reason. */
html[lang="en"] .prose,
html[lang="en"] .book-blurb-full,
html[lang="en"] .prologue-text { white-space: normal; }

/* legal pages: full content column, like the Hebrew /terms/ and /accessibility/ */
html[lang="en"] .prose { max-width: none; }
html[lang="en"] .prose p,
html[lang="en"] .prose li { max-width: none; }
html[lang="en"] .prose ol.legal-sections + h2,
html[lang="en"] .prose h2 { margin-block-start: var(--space-4); }

/* book page: blurb and prologue read at full band width like the Hebrew page,
   with the prologue's long narrative kept to a comfortable measure. */
html[lang="en"] .book-blurb-full { max-width: none; margin-inline: 0; }
html[lang="en"] .book-blurb-full p { max-width: none; }
html[lang="en"] .prologue { max-width: none; }
html[lang="en"] .prologue-text { max-width: 72ch; margin-inline: auto; }
html[lang="en"] .prologue-text p { max-width: none; }
html[lang="en"] .prologue-heading { text-align: center; }

/* the Wingspan cover is a 415×649 file; keep the home row's cover from
   outgrowing its column and the book page's from dwarfing the copy.
   min(…, 100%) matters: a bare px max-width beats the `img { max-width: 100% }`
   reset, so at a 320px viewport (content column 272px) the cover would push
   the page sideways. */
html[lang="en"] .book-row .book-cover { max-width: min(300px, 100%); }
html[lang="en"] .book-page-cover { max-width: min(340px, 100%); }

/* Legal pages on a narrow phone: two nested 40px list indents leave ~150px of
   text column at 320px, and a long address like mishmushbooks@gmail.com then
   runs off the side. */
@media (max-width: 719px) {
  html[lang="en"] .legal-sections,
  html[lang="en"] .legal-sections ol { padding-inline-start: 24px; }
  html[lang="en"] .prose a { overflow-wrap: anywhere; }
}

/* "Get in touch" panel: one shared centred block, socials underneath. */
html[lang="en"] #contact .container { text-align: center; }
html[lang="en"] #contact p { margin-inline: auto; }
html[lang="en"] .contact-links { justify-content: center; align-items: center; }

/* newsletter / bonus-chapter band */
html[lang="en"] .newsletter-band .container { text-align: center; }
html[lang="en"] .newsletter-band p { margin-inline: auto; }
html[lang="en"] .newsletter-band .signup-card {
  margin-inline: auto;
  max-width: 34rem;
  text-align: start;
}

/* footer: cream legal-links strip, then a white strip whose single line
   carries the copyright and the newsletter link (Doron 2026-08-18). */
html[lang="en"] .site-footer {
  background: #fff;
  border-block-start: none;
  padding-block: 0;
}
html[lang="en"] .site-footer .container > * + * { margin-block-start: 0; }
.footer-copyright-line {
  margin: 0;
  max-width: none;
  text-align: center;
  font-size: .9375rem; /* 15px — already at the touch-scope minimum */
}
.footer-copyright-line .sep { margin-inline: .6em; color: rgb(34 31 38 / .45); }

/* "Coming in English" cards: the base .book-card grid pins .book-body to
   row 1 / column 1, which pushed the (auto-placed) cover into a second row
   below the text once .book-card--coming collapsed the grid to one column.
   These cards are a simple centred stack — cover, title, teaser, badge. */
html[lang="en"] .book-card--coming { display: block; text-align: center; }
html[lang="en"] .book-card--coming .book-cover { margin-inline: auto; }
html[lang="en"] .book-card--coming .book-body { max-width: none; }
html[lang="en"] .book-card--coming .book-body p { margin-inline: auto; }

/* Banner PNGs carry a #FEFEFD ground; painting the bands they sit on with the
   same value keeps the seam between image and band exactly invisible. */
html[lang="en"] .band-white,
html[lang="en"] .masthead-banner { background: #FEFEFD; }

@media (min-width: 720px) {
  /* Home book row: cover at inline-start (left, in LTR) with the copy beside
     it — the LTR mirror of the Hebrew home rows. Without this the base
     .book-card grid rules pin .book-body into the NARROW first column and
     auto-place the cover into the wide one. */
  html[lang="en"] .book-row .book-cover-col { grid-column: 1; grid-row: 1; }
  html[lang="en"] .book-row .book-body { grid-column: 2; grid-row: 1; }
  /* Book page hero: centre the copy against the tall cover, like the Hebrew
     page, instead of leaving a column of dead space under a short blurb. */
  html[lang="en"] .book-page-hero { align-items: center; }
}

/* the full book description reads at the same measure as the prologue */
html[lang="en"] .book-blurb-full { max-width: 72ch; margin-inline: auto; }