/* ═══════════════════════════════════════════════════════════════
   ד״ר חיה מילוא — סיפורים והמוח
   Warm paper / terracotta / amber. RTL. Mobile-first.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Custom Properties ─────────────────────────────────────── */
:root {
  /* palette — warm only */
  --paper: #faf5ec;
  --paper-deep: #f1e6d4;
  --ink: #2e2117;
  --ink-soft: #57453a;
  --ink-panel: #362719;
  --terra: #b4552d;
  --terra-dark: #93431f;
  --amber: #d99a3f;
  --amber-soft: rgba(217, 154, 63, 0.18);
  --line: rgba(46, 33, 23, 0.16);
  --line-soft: rgba(46, 33, 23, 0.09);
  --shadow-warm: 0 14px 40px -18px rgba(84, 52, 28, 0.35);
  --shadow-soft: 0 6px 24px -12px rgba(84, 52, 28, 0.25);

  /* spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;
  --space-3: 0.75rem;  --space-4: 1rem;
  --space-5: 1.5rem;   --space-6: 2rem;
  --space-7: 3rem;     --space-8: 4rem;
  --space-9: 6rem;     --space-10: 8rem;

  /* type — high contrast (slider 4), generous body for older readers */
  --font-serif: "Frank Ruhl Libre", "Times New Roman", serif;
  --font-sans: "Assistant", "Arial Hebrew", sans-serif;
  --type-display: clamp(2.5rem, 7vw, 5.25rem);
  --type-h1: clamp(2.1rem, 5vw, 3.6rem);
  --type-h2: clamp(1.7rem, 3.6vw, 2.7rem);
  --type-h3: clamp(1.25rem, 2vw, 1.55rem);
  --type-lead: clamp(1.15rem, 1.7vw, 1.4rem);
  --type-body: clamp(1.0625rem, 1.2vw, 1.1875rem);
  --type-small: clamp(0.9rem, 1vw, 0.975rem);
  --type-mono: clamp(0.8rem, 0.9vw, 0.9rem);

  /* radius — soft */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-pill: 9999px;

  /* motion — fireside, unhurried */
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 650ms;
  --dur-reveal: 1000ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* layout */
  --container: 72rem;
  --section-pad: clamp(4.75rem, 10vw, 8rem);
}

/* ─── Reset & Base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.75;
  position: relative;
  min-block-size: 100dvh;
}

/* paper whisper texture */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(94deg, rgba(180, 85, 45, 0.028) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(4deg, rgba(217, 154, 63, 0.024) 0 1px, transparent 1px 7px);
}

img {
  max-inline-size: 100%;
  block-size: auto;
  display: block;
}

p, ul, ol, figure, blockquote { margin-block: 0 var(--space-5); }
ul, ol { padding-inline-start: 1.25em; }

@view-transition { navigation: auto; }

/* ─── Typography ────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.15;
  margin-block: 0 var(--space-5);
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: var(--type-h1); font-weight: 900; }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }

.lead {
  font-size: var(--type-lead);
  line-height: 1.65;
  color: var(--ink-soft);
  max-inline-size: 42ch;
}

a {
  color: var(--terra-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease-soft);
}

/* eyebrow — hairline AFTER the text (RTL: text flush right) */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--type-mono);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--terra);
  margin-block-end: var(--space-4);
}
.eyebrow::after {
  content: "";
  flex: 0 1 5.5rem;
  block-size: 1px;
  background: var(--amber);
}
.eyebrow--center {
  justify-content: center;
  text-align: center;
}
.eyebrow--center::before {
  content: "";
  flex: 0 1 5.5rem;
  block-size: 1px;
  background: var(--amber);
}

/* ─── Layout Utilities ──────────────────────────────────────── */
.container {
  inline-size: min(100% - clamp(2.5rem, 8vw, 5rem), var(--container));
  margin-inline: auto;
}

.section { padding-block: var(--section-pad); position: relative; }
.section--cream { background: var(--paper-deep); }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.section-head { max-inline-size: 46ch; margin-block-end: var(--space-7); }
.section-head--center {
  margin-inline: auto;
  text-align: center;
}

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

/* focus — every interactive element */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* skip link */
.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--space-4);
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus {
  inset-block-start: 0;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 48px;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--type-body);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-soft),
              color var(--dur-base) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft),
              transform var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
.btn--primary {
  background: var(--terra);
  color: #fff;
}
.btn--primary::after {
  content: "";
  position: absolute;
  inset-block: -20%;
  inline-size: 34%;
  inset-inline-start: -50%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  opacity: 0;
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--paper {
  background: var(--paper);
  color: var(--terra-dark);
}
.btn--sm {
  min-block-size: 44px;
  padding: var(--space-2) var(--space-5);
  font-size: var(--type-small);
}
.on-dark .btn--ghost {
  color: var(--paper);
  border-color: rgba(250, 245, 236, 0.75);
}

@media (hover: hover) {
  .btn--primary:hover {
    background: var(--terra-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
  }
  .btn--ghost:hover {
    background: var(--ink);
    color: var(--paper);
    transform: translateY(-2px);
  }
  .btn--paper:hover {
    color: var(--terra-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
  }
  a:hover { color: var(--terra); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::after {
    opacity: 1;
    animation: btnShine 0.7s var(--ease-soft) 1 forwards;
  }
}

/* ─── Header ────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: rgba(250, 245, 236, 0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--line-soft);
  transition: box-shadow var(--dur-base) var(--ease-soft);
}
.site-header.is-scrolled { box-shadow: var(--shadow-soft); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  min-block-size: 64px;
}

.brand {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.desktop-nav { display: none; }
.desktop-nav ul {
  display: flex;
  gap: clamp(var(--space-4), 2.5vw, var(--space-6));
  list-style: none;
  margin: 0;
  padding: 0;
}
.desktop-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding-block: var(--space-2);
  border-block-end: 2px solid transparent;
}
.desktop-nav a.is-current {
  color: var(--terra-dark);
  border-block-end-color: var(--terra);
}

.header-cta { display: none; }

/* scroll progress hairline */
.scroll-progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--amber), var(--terra));
  transform: scaleX(0);
  transform-origin: right;
}

/* mobile menu */
.mobile-menu { position: relative; }
.mobile-menu summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: var(--space-2) var(--space-3);
  min-inline-size: 44px;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  color: var(--ink);
}
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu[open] summary {
  background: var(--paper-deep);
}
.mobile-menu nav {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: calc(100% + var(--space-2));
  min-inline-size: 15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  padding: var(--space-4);
}
.mobile-menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.mobile-menu li > a:not(.btn) {
  display: block;
  padding: var(--space-3) var(--space-4);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius-sm);
}
.mobile-menu li > a:not(.btn).is-current {
  background: var(--amber-soft);
  color: var(--terra-dark);
}
.mobile-menu li > .btn {
  inline-size: 100%;
  margin-block-start: var(--space-2);
}

@media (min-width: 768px) {
  .desktop-nav { display: block; }
  .mobile-menu { display: none; }
  .header-cta { display: inline-flex; }
}

/* ─── Hero (home) ───────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 11vw, 8.5rem);
  background-image:
    linear-gradient(180deg, rgba(250, 245, 236, 0.94), rgba(250, 245, 236, 0.9)),
    var(--hero-img, none);
  background-size: cover;
  background-position: center;
}
.hero-inner {
  max-inline-size: 52rem;
}
.hero h1 {
  font-size: var(--type-display);
  line-height: 1.08;
  margin-block-end: var(--space-5);
}
.hero .lead { margin-block-end: var(--space-6); }
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
}
.hero-trust {
  font-size: var(--type-small);
  color: var(--ink-soft);
  border-block-start: 1px solid var(--line-soft);
  padding-block-start: var(--space-4);
  max-inline-size: 46ch;
}

/* synapse ornament */
.hero-synapse {
  position: absolute;
  inset-inline-start: -4rem;
  inset-block-end: -3rem;
  inline-size: clamp(14rem, 30vw, 24rem);
  opacity: 0.5;
  pointer-events: none;
}

/* ─── News Strip ────────────────────────────────────────────── */
.news-strip {
  background: var(--amber-soft);
  border-block: 1px solid var(--line-soft);
  padding-block: var(--space-4);
}
.news-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
}
.news-strip p { flex: 1 1 20rem; }
.news-link {
  flex: none;
  font-size: var(--type-small);
  font-weight: 700;
  color: var(--terra-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.news-link:hover { color: var(--wine); }
.news-strip p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--type-small);
  color: var(--ink-soft);
}
.news-strip p::before {
  content: "";
  align-self: center;
  flex: none;
  inline-size: 9px;
  block-size: 9px;
  border-radius: var(--radius-pill);
  background: var(--terra);
}

/* ─── Statement (hot take) ──────────────────────────────────── */
.statement blockquote {
  margin: 0;
  text-align: center;
}
.statement blockquote p {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.55rem, 4vw, 2.75rem);
  line-height: 1.3;
  color: var(--ink);
  margin-inline: auto;
  max-inline-size: min(30ch, 90%);
}

/* ─── Brain Section (signature) ─────────────────────────────── */
.brain-grid {
  display: grid;
  gap: var(--space-7);
}
.brain-story {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  box-shadow: var(--shadow-soft);
  position: relative;
}
.brain-story::before {
  content: "״";
  position: absolute;
  inset-block-start: -0.35em;
  inset-inline-start: var(--space-5);
  font-family: var(--font-serif);
  font-size: 6rem;
  line-height: 1;
  color: var(--amber);
  opacity: 0.35;
  pointer-events: none;
}
.brain-story-text {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.8;
  margin: 0;
}
.brain-story-text .w { display: inline-block; }

.sparks {
  display: grid;
  gap: var(--space-5);
  position: relative;
  padding-inline-start: var(--space-6);
}
.sparks::before {
  content: "";
  position: absolute;
  inset-inline-start: 10px;
  inset-block: 12px;
  inline-size: 1px;
  background: linear-gradient(180deg, var(--amber), var(--terra), var(--amber));
  opacity: 0.5;
}
.spark { position: relative; }
.spark::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--space-6) + 4px);
  inset-block-start: 0.5em;
  inline-size: 13px;
  block-size: 13px;
  border-radius: var(--radius-pill);
  background: var(--amber);
  box-shadow: 0 0 0 0 rgba(217, 154, 63, 0.5);
}
.spark h3 { margin-block-end: var(--space-2); color: var(--terra-dark); }
.spark p { margin: 0; color: var(--ink-soft); }

/* ─── Paths (two audiences) ─────────────────────────────────── */
.paths-wrap {
  container-type: inline-size;
  container-name: paths;
}
.paths-grid {
  display: grid;
  gap: var(--space-5);
}
.path-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
}
.path-card .card-kicker {
  font-size: var(--type-mono);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--amber);
  margin-block-end: var(--space-3);
}
.path-card h3 {
  font-size: clamp(1.35rem, 4cqi, 1.8rem);
}
.path-card p { color: var(--ink-soft); flex: 1; }
.card-link {
  font-weight: 700;
  color: var(--terra-dark);
  text-decoration: none;
  border-block-end: 2px solid var(--amber);
  align-self: flex-start;
  padding-block-end: 2px;
}

@container paths (min-width: 640px) {
  .paths-grid { grid-template-columns: 1fr 1fr; }
  .path-card { padding: var(--space-7); }
}

@media (hover: hover) {
  .path-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-warm);
  }
}

/* ─── Stats ─────────────────────────────────────────────────── */
.stats-wrap {
  container-type: inline-size;
  container-name: stats;
}
.stats-grid {
  display: grid;
  gap: var(--space-6);
  text-align: center;
}
.stat-value {
  display: block;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2.75rem, 9cqi, 4.5rem);
  line-height: 1;
  color: var(--terra);
  margin-block-end: var(--space-2);
}
.stat-label {
  display: block;
  color: var(--ink-soft);
  max-inline-size: 24ch;
  margin-inline: auto;
}

@container stats (min-width: 560px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Quotes / Testimonials ─────────────────────────────────── */
.quotes-grid {
  display: grid;
  gap: var(--space-5);
}
.quote-card {
  position: relative;
  z-index: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: var(--shadow-soft);
}
.quote-card::before {
  content: "״";
  position: absolute;
  z-index: -1;
  inset-block-start: -1.5rem;
  inset-inline-end: var(--space-4);
  font-family: var(--font-serif);
  font-size: 8rem;
  line-height: 1;
  color: var(--terra);
  opacity: 0.12;
  pointer-events: none;
}
.quote-card p {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  margin-block-end: var(--space-4);
}
.quote-card cite {
  font-style: normal;
  font-size: var(--type-small);
  color: var(--ink-soft);
}
.quote-card cite::before {
  content: "— ";
  color: var(--amber);
}

@media (min-width: 768px) {
  .quotes-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Intro (home about blurb) ──────────────────────────────── */
.intro-grid {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}
.intro-figure {
  max-inline-size: 22rem;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .intro-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* portrait arch frame */
.portrait-frame {
  position: relative;
  z-index: 0;
}
.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(-13px, 13px);
  border: 1.5px solid var(--terra);
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  opacity: 0.7;
}
.portrait-frame .frame-clip {
  overflow: hidden;
  border-start-start-radius: 999px;
  border-start-end-radius: 999px;
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
  background: var(--paper-deep);
  box-shadow: var(--shadow-warm);
}
.portrait-frame img {
  inline-size: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
}
.portrait-badge {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-start: calc(-1 * var(--space-4));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-2) var(--space-4);
  font-size: var(--type-small);
  font-weight: 700;
  color: var(--terra-dark);
}
.portrait-ornament {
  position: absolute;
  inset-block-start: -2.25rem;
  inset-inline-end: -2.25rem;
  inline-size: 5.5rem;
  block-size: 5.5rem;
  border: 1.5px dashed var(--amber);
  border-radius: var(--radius-pill);
  opacity: 0.7;
  pointer-events: none;
}

/* ─── CTA Panel ─────────────────────────────────────────────── */
.cta-panel {
  position: relative;
  overflow: hidden;
  z-index: 0;
  background: linear-gradient(150deg, #4a3421, var(--ink-panel) 55%, var(--ink));
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-7), 7vw, var(--space-9)) clamp(var(--space-5), 5vw, var(--space-8));
  text-align: center;
  box-shadow: var(--shadow-warm);
}
.cta-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: repeating-linear-gradient(96deg, rgba(217, 154, 63, 0.05) 0 2px, transparent 2px 10px);
}
.cta-panel::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -4rem;
  inset-inline-start: -4rem;
  inline-size: 12rem;
  block-size: 12rem;
  border: 1.5px dashed rgba(217, 154, 63, 0.45);
  border-radius: var(--radius-pill);
}
.cta-panel h2 {
  color: var(--paper);
  max-inline-size: 26ch;
  margin-inline: auto;
}
.cta-panel p {
  color: rgba(250, 245, 236, 0.85);
  max-inline-size: 48ch;
  margin-inline: auto;
}
.cta-panel .hero-ctas {
  justify-content: center;
  margin-block-end: 0;
}

/* ─── Page Hero (inner pages) ───────────────────────────────── */
.page-hero {
  background: var(--paper-deep);
  border-block-end: 1px solid var(--line-soft);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.page-hero h1 { max-inline-size: 24ch; }
.page-hero .lead { margin-block-end: var(--space-6); }
.page-hero .hero-ctas { margin-block-end: 0; }

/* ─── Feature List (lectures: how it feels) ─────────────────── */
.feel-grid {
  display: grid;
  gap: var(--space-5);
}
.feel-item {
  border-inline-start: 3px solid var(--amber);
  padding-inline-start: var(--space-5);
}
.feel-item h3 { margin-block-end: var(--space-2); }
.feel-item p { margin: 0; color: var(--ink-soft); }
@media (min-width: 768px) {
  .feel-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}

/* ─── Topic Cards ───────────────────────────────────────────── */
.topics-wrap {
  container-type: inline-size;
  container-name: topics;
}
.topics-grid {
  display: grid;
  gap: var(--space-5);
}
.topic-card {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-base) var(--ease-soft),
              box-shadow var(--dur-base) var(--ease-soft);
  background-image:
    radial-gradient(circle at 88% 12%, rgba(217, 154, 63, 0.12) 0 6px, transparent 7px),
    radial-gradient(circle at 78% 26%, rgba(180, 85, 45, 0.1) 0 4px, transparent 5px),
    linear-gradient(200deg, rgba(217, 154, 63, 0.07), transparent 40%);
}
.topic-index {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-4);
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(2.6rem, 8cqi, 3.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(180, 85, 45, 0.35);
  pointer-events: none;
}
.topic-card h3 {
  max-inline-size: 16ch;
  padding-inline-end: var(--space-8);
}
.topic-card p { margin: 0; color: var(--ink-soft); }

@container topics (min-width: 600px) {
  .topics-grid { grid-template-columns: 1fr 1fr; }
  .topic-card { padding: var(--space-7); }
}
@container topics (min-width: 960px) {
  /* 5 cards: flex + centered wrap keeps the trailing 2 balanced under the
     first 3 instead of hugging the start edge with an empty grid cell */
  .topics-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .topic-card {
    flex: 0 1 calc((100% - 2 * var(--space-5)) / 3);
  }
}

@media (hover: hover) {
  .topic-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-warm);
  }
}

/* ─── Facts / Info rows ─────────────────────────────────────── */
.facts-grid {
  display: grid;
  gap: var(--space-5);
}
.fact {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.fact h3 {
  font-size: 1.1rem;
  color: var(--terra-dark);
  margin-block-end: var(--space-2);
}
.fact p { margin: 0; color: var(--ink-soft); }
@media (min-width: 768px) {
  .facts-grid { grid-template-columns: repeat(3, 1fr); }
  .facts-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Series Callout ────────────────────────────────────────── */
.series-callout {
  background: var(--paper);
  border: 1px solid var(--amber);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-inline-size: 44rem;
  margin-inline: auto;
  text-align: center;
  box-shadow: var(--shadow-soft);
}
.series-callout h2 { font-size: var(--type-h3); }
.series-callout p { margin: 0; color: var(--ink-soft); }
.series-callout .hero-ctas {
  margin-block-start: var(--space-5);
  justify-content: center;
}

/* ─── FAQ ───────────────────────────────────────────────────── */
.faq-list {
  max-inline-size: 46rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}
.faq-list details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}
.faq-list summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  padding: var(--space-4) var(--space-5);
  padding-inline-end: var(--space-8);
  min-block-size: 44px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: var(--space-5);
  inset-block-start: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  color: var(--terra);
  transition: transform var(--dur-base) var(--ease-soft);
}
.faq-list details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq-list details > p {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  color: var(--ink-soft);
}

/* ─── Workshop: pain → flip ─────────────────────────────────── */
.pain-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3.2vw, 2.1rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-inline-size: 26ch;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-6);
}
.flip-block {
  max-inline-size: 46rem;
  margin-inline: auto;
  text-align: center;
}
.flip-block h2 { max-inline-size: 26ch; margin-inline: auto; }
.flip-block p { color: var(--ink-soft); margin-block-end: 0; }

.gift-statement {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  line-height: 1.4;
  color: var(--terra-dark);
  max-inline-size: 28ch;
  margin-inline: auto;
  text-align: center;
  margin-block: 0;
}

/* ─── Benefits list (strings) ───────────────────────────────── */
.benefits-list {
  list-style: none;
  padding: 0;
  max-inline-size: 42rem;
  margin-inline: auto;
  display: grid;
  gap: var(--space-3);
}
.benefits-list li {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
}
.benefits-list li::before {
  content: "";
  flex: none;
  align-self: center;
  inline-size: 10px;
  block-size: 10px;
  border-radius: var(--radius-pill);
  background: var(--amber);
}

/* ─── Cohort (live section) ─────────────────────────────────── */
.cohort-panel {
  background: var(--paper);
  border: 1.5px solid var(--terra);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-6), 5vw, var(--space-8));
  max-inline-size: 44rem;
  margin-inline: auto;
  text-align: center;
  box-shadow: var(--shadow-warm);
}
.cohort-panel .eyebrow { justify-content: center; }
.cohort-panel .eyebrow::before {
  content: "";
  flex: 0 1 3rem;
  block-size: 1px;
  background: var(--amber);
}
.cohort-panel p { color: var(--ink-soft); }

/* ─── About: bio prose ──────────────────────────────────────── */
.bio-grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
.bio-prose {
  max-inline-size: 62ch;
}
.bio-prose p {
  margin-block-end: var(--space-5);
}
.bio-prose .dropcap::first-letter {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 3.2em;
  line-height: 0.85;
  float: inline-start;
  color: var(--terra);
  padding-inline-end: var(--space-3);
  padding-block-start: 0.08em;
}
@media (min-width: 1024px) {
  .bio-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* ─── Credentials ───────────────────────────────────────────── */
.cred-list {
  list-style: none;
  padding: 0;
  max-inline-size: 42rem;
  display: grid;
  gap: var(--space-3);
  margin-inline: auto;
}
.cred-list li {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
  border-block-end: 1px solid var(--line-soft);
  padding-block-end: var(--space-3);
}
.cred-list li::before {
  content: "";
  flex: none;
  align-self: center;
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-pill);
  background: var(--terra);
}

/* ─── Books ─────────────────────────────────────────────────── */
.books-grid {
  display: grid;
  gap: var(--space-6);
  max-inline-size: 46rem;
  margin-inline: auto;
}
.book-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: center;
}
.book-cover {
  inline-size: 6.5rem;
  aspect-ratio: 2 / 3;
  border-radius: 4px 10px 10px 4px;
  background: linear-gradient(160deg, var(--terra), var(--terra-dark));
  border-inline-start: 6px solid var(--amber);
  box-shadow: var(--shadow-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3);
  text-align: center;
}
.book-cover--amber {
  background: linear-gradient(160deg, var(--amber), #b57a29);
  border-inline-start-color: var(--terra);
}
.book-cover span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--paper);
}
/* real cover art fills the same 2:3 spine slot (block-size:auto lets the
   width/height attrs coexist with aspect-ratio, per the img reset) */
.book-cover--photo {
  display: block;
  padding: 0;
  background: none;
  border-inline-start: 0;
  block-size: auto;
  object-fit: cover;
}
.book-card h3 { margin-block-end: var(--space-2); }
.book-card p { margin: 0; color: var(--ink-soft); }
.book-link {
  display: inline-block;
  margin-block-start: var(--space-3);
  font-weight: 700;
  color: var(--terra-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.book-link:hover { color: var(--wine); }
@media (min-width: 640px) {
  .books-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Contact ───────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  gap: var(--space-8);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.contact-methods {
  display: grid;
  gap: var(--space-5);
}
.contact-methods .method {
  border-inline-start: 3px solid var(--amber);
  padding-inline-start: var(--space-5);
}
.contact-methods h2 {
  font-size: 1.05rem;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--terra-dark);
  margin-block-end: var(--space-1);
}
.contact-methods p { margin: 0; }
.contact-methods a {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
}
.phone-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  unicode-bidi: embed;
}

/* form */
.lead-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  box-shadow: var(--shadow-soft);
}
.form-row { margin-block-end: var(--space-5); }
.lead-form label {
  display: block;
  font-weight: 700;
  margin-block-end: var(--space-2);
}
.req { color: var(--terra); }
.lead-form input,
.lead-form select,
.lead-form textarea {
  inline-size: 100%;
  font: inherit;
  color: var(--ink);
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-block-size: 48px;
}
.lead-form textarea { min-block-size: 8rem; resize: vertical; }
.lead-form input.is-invalid,
.lead-form textarea.is-invalid {
  border-color: var(--terra);
  background: #fdf3ec;
}
.hp-field {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.form-consent {
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin-block-end: var(--space-4);
}
.form-message {
  margin-block-start: var(--space-4);
  font-weight: 700;
  border-radius: var(--radius-sm);
}
.form-message.is-success {
  background: var(--amber-soft);
  color: var(--ink);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--amber);
}
.form-message.is-error {
  background: #f6e3d8;
  color: var(--terra-dark);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--terra);
}
@media (max-width: 767px) {
  .lead-form input, .lead-form select, .lead-form textarea { font-size: 16px; }
}

/* ─── Legal pages ───────────────────────────────────────────── */
.legal-prose {
  max-inline-size: 65ch;
  margin-inline: auto;
}
.legal-prose h1 { margin-block-end: var(--space-6); }
.legal-prose h2 {
  font-size: var(--type-h3);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--line-soft);
}
.legal-prose p, .legal-prose li { color: var(--ink-soft); }
.legal-updated {
  font-size: var(--type-small);
  color: var(--ink-soft);
  margin-block-start: var(--space-7);
  border-block-start: 1px solid var(--line-soft);
  padding-block-start: var(--space-4);
}

/* ─── FF preset classes (client-added sections) ─────────────── */
.ff-section-title {
  font-family: var(--font-serif);
  font-size: var(--type-h2);
  font-weight: 700;
  text-align: center;
  margin-block: var(--space-8) var(--space-6);
}
.ff-gallery { padding-block: var(--space-7); }
.ff-gallery-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.ff-gallery--masonry .ff-gallery-grid { align-items: start; }
.ff-gallery--carousel .ff-gallery-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: inline mandatory;
  padding-block-end: var(--space-3);
}
.ff-gallery--carousel .ff-gallery-item {
  flex: 0 0 min(20rem, 85%);
  scroll-snap-align: start;
}
.ff-gallery-item img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.ff-quote {
  max-inline-size: 40rem;
  margin: var(--space-8) auto;
  padding: var(--space-6);
  text-align: center;
  border-radius: var(--radius-lg);
}
.ff-quote--plain { background: transparent; }
.ff-quote--bordered { border: 1.5px solid var(--amber); }
.ff-quote--dark {
  background: var(--ink-panel);
  color: var(--paper);
}
.ff-quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.6;
  margin-block-end: var(--space-3);
}
.ff-quote-by { font-size: var(--type-small); opacity: 0.8; }

/* ─── Footer ────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 0;
  overflow: hidden;
  background: var(--paper-deep);
  border-block-start: 1px solid var(--line);
  margin-block-start: var(--space-9);
}
.footer-ghost {
  position: absolute;
  z-index: -1;
  inset-block-end: -0.25em;
  inset-inline-start: 0;
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(5rem, 18vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(180, 85, 45, 0.12);
  pointer-events: none;
  white-space: nowrap;
}
.footer-inner {
  display: grid;
  gap: var(--space-7);
  padding-block: var(--space-8) var(--space-6);
}
.footer-name {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 1.4rem;
  margin-block-end: var(--space-2);
}
.footer-brand p { margin-block-end: var(--space-2); color: var(--ink-soft); }
.footer-contact a { font-weight: 700; }
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.footer-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding-block: var(--space-1);
  display: inline-block;
}
@media (min-width: 768px) {
  .footer-inner { grid-template-columns: 2fr 1fr; }
}
.footer-legal {
  border-block-start: 1px solid var(--line-soft);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: var(--type-small);
  color: var(--ink-soft);
}
.legal-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.legal-links a { color: var(--ink-soft); }
.footer-legal p { margin: 0; }

/* ─── Consent Banner ────────────────────────────────────────── */
.cookie-consent {
  position: fixed;
  inset-block-end: var(--space-4);
  inset-inline: var(--space-4);
  z-index: 150;
  max-inline-size: 34rem;
  margin-inline-start: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-warm);
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}
.cookie-consent[hidden] { display: none; }
.cookie-consent p {
  margin: 0;
  flex: 1 1 16rem;
  font-size: var(--type-small);
  color: var(--ink-soft);
}
.cookie-consent button {
  font: inherit;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-radius: var(--radius-pill);
  min-block-size: 44px;
  padding: var(--space-2) var(--space-6);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft);
}
@media (hover: hover) {
  .cookie-consent button:hover { background: var(--terra-dark); }
}

/* ─── Animations (@keyframes) ───────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  @keyframes wordRise {
    to { opacity: 1; transform: none; }
  }
  @keyframes btnShine {
    from { inset-inline-start: -50%; }
    to { inset-inline-start: 120%; }
  }
  @keyframes slowSpin {
    to { transform: rotate(360deg); }
  }
  @keyframes sparkPulse {
    0% { box-shadow: 0 0 0 0 rgba(217, 154, 63, 0.55); }
    100% { box-shadow: 0 0 0 14px rgba(217, 154, 63, 0); }
  }

  /* reveal system — gated on html.js so no-JS users see everything */
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--dur-reveal) var(--ease-out),
                transform var(--dur-reveal) var(--ease-out);
    transition-delay: var(--rd, 0ms);
  }
  html.js [data-reveal="fade"] { transform: none; }
  html.js [data-reveal="zoom"] { transform: scale(0.95); }
  html.js [data-reveal].in-view {
    opacity: 1;
    transform: none;
  }

  /* hero word-by-word (spans created at runtime) */
  html.js .word-rise .w {
    opacity: 0;
    transform: translateY(0.55em);
    animation: wordRise 0.85s var(--ease-out) forwards;
    animation-delay: var(--wd, 0ms);
  }

  /* brain story word-by-word */
  html.js .brain-story-text .w {
    opacity: 0.12;
    transition: opacity var(--dur-slow) var(--ease-soft);
  }
  html.js .brain-story.in-view .brain-story-text .w { opacity: 1; }

  /* sparks light up in sequence */
  html.js .sparks .spark {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--sd, 0ms);
  }
  html.js .sparks.in-view .spark {
    opacity: 1;
    transform: none;
  }
  html.js .sparks.in-view .spark::before {
    animation: sparkPulse 1.6s var(--ease-soft) 2;
    animation-delay: var(--sd, 0ms);
  }

  .portrait-ornament,
  .cta-panel::after {
    animation: slowSpin 60s linear infinite;
  }

  @media (hover: hover) {
    .portrait-frame img {
      transition: transform 6s var(--ease-soft);
    }
    .portrait-frame:hover img { transform: scale(1.04); }
  }
}

@media (prefers-reduced-data: reduce) {
  .portrait-ornament, .cta-panel::after { animation: none; }
  body::before { display: none; }
}

/* ─── Responsive Adjustments ────────────────────────────────── */
@media (min-width: 640px) {
  .hero-ctas { gap: var(--space-5); }
}

@media (min-width: 768px) {
  .brain-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--space-8);
  }
}

@media (min-width: 1280px) {
  :root { --container: 76rem; }
}

/* ─── Print ─────────────────────────────────────────────────── */
@media print {
  .site-header, .site-footer, .cookie-consent, .skip-link,
  .scroll-progress, .btn, .hero-ctas, .cta-panel, .hero-synapse,
  .portrait-ornament { display: none !important; }
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .section { padding-block: 1.5rem; }
  main a[href^="http"]::after,
  main a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #444;
  }
  h1, h2, h3 { color: #000; }
  .section--cream, .page-hero { background: #fff; }
}

/* ── v2 liven-up layer (CSS-only, edit-safe) ─────────────────── */
:root {
  --wine: #7d3026;
  --wine-soft: rgba(125, 48, 38, 0.08);
  --olive: #7c6a33;
  --gold: #c8871e;
  --font-display2: "David Libre", "Frank Ruhl Libre", serif;
  --font-hand: "Amatic SC", cursive;
}

/* paper grain — whole site gains tactile depth */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* the amber thread gets a warmer, glowing gradient */
.scroll-progress {
  background: linear-gradient(90deg, var(--terra), var(--amber), var(--gold)) !important;
  box-shadow: 0 0 10px rgba(217, 154, 63, 0.55);
}

/* hero: candle-glow wash + giant watermark quote mark */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 78% 18%, rgba(217, 154, 63, 0.20), transparent 60%),
    radial-gradient(ellipse 45% 40% at 12% 85%, rgba(125, 48, 38, 0.07), transparent 65%);
  pointer-events: none;
}
.hero-inner { position: relative; }
.hero-inner::before {
  content: '״';
  position: absolute;
  inset-inline-start: -0.35em; top: -0.55em;
  font-family: var(--font-display2);
  font-size: clamp(9rem, 22vw, 17rem);
  line-height: 1;
  color: var(--terra);
  opacity: 0.09;
  pointer-events: none;
}

/* eyebrows become handwritten margin notes */
.eyebrow {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--wine);
}

/* ink flourish under section headings */
.section-head h2 { position: relative; }
.section-head h2::after {
  content: '';
  display: block;
  width: 74px; height: 4px;
  margin-block-start: 14px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--terra), var(--amber));
}
.section-head--center h2::after { margin-inline: auto; }

/* cards: warm top bar, deeper lift, slight paper tilt */
.path-card, .topic-card, .quote-card, .book-card, .feel-item {
  position: relative;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.path-card::before, .topic-card::before, .book-card::before {
  content: '';
  position: absolute; inset-inline: 0; top: 0;
  height: 4px;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: linear-gradient(90deg, var(--terra), var(--amber) 55%, var(--olive));
  opacity: 0.85;
}
.path-card:hover, .topic-card:hover, .book-card:hover {
  transform: translateY(-6px) rotate(-0.35deg);
  box-shadow: 0 24px 50px -20px rgba(84, 52, 28, 0.45);
}

/* testimonials: archive tape strip */
.quote-card { overflow: visible; }
.quote-card::before {
  content: '';
  position: absolute;
  top: -11px; inset-inline-start: 26px;
  width: 92px; height: 24px;
  background: rgba(217, 154, 63, 0.38);
  border: 1px solid rgba(217, 154, 63, 0.25);
  transform: rotate(-3deg);
  border-radius: 2px;
}
.quote-card:hover { transform: translateY(-4px) rotate(0.4deg); }

/* literary voice: pull-quotes + big statements in David Libre */
.ff-quote-text, .pain-quote, .gift-statement, .statement {
  font-family: var(--font-display2);
}
.stat-value {
  font-family: var(--font-display2);
  color: var(--wine);
  text-shadow: 0 2px 18px rgba(217, 154, 63, 0.35);
}

/* drop cap opening the prose blocks — like a manuscript */
.bio-prose > p:first-of-type::first-letter,
.brain-story-text > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 3.1em;
  line-height: 0.8;
  float: inline-start;
  color: var(--terra);
  padding-inline-end: 0.14em;
  padding-block-start: 0.08em;
}

/* primary button: shine sweep + warm bloom */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(170%);
  animation: v2shine 5s ease-in-out infinite;
}
.btn--primary:hover { box-shadow: 0 10px 34px -10px rgba(180, 85, 45, 0.65); }
@keyframes v2shine { 0%, 64% { transform: translateX(170%); } 84%, 100% { transform: translateX(-170%); } }

/* news strip becomes a pinned wine ribbon */
.news-strip {
  background: linear-gradient(90deg, var(--wine-soft), rgba(217, 154, 63, 0.10));
  border-inline-start: 4px solid var(--amber);
}

/* dark panels: deeper ember gradient + amber hairline */
.cta-panel.on-dark, .site-footer {
  background: linear-gradient(180deg, var(--ink-panel), #21160c) !important;
  border-top: 1px solid rgba(217, 154, 63, 0.35);
}

/* footer text tuned for the dark ember panel: the v3 layer flipped the footer
   background to dark, but the footer text colours were written for the old
   light footer — on dark they collapsed to ~1.1-2.6:1. These restore WCAG AA
   contrast (all >=4.5:1 on #21160c..#362719). Scoped specificity beats the
   base .footer-* rules, so no !important needed; chrome stays byte-identical. */
.site-footer {
  --footer-fg: #d9cbb3;          /* warm light body — 11:1 */
  --footer-strong: var(--paper); /* name — 16:1 */
  --footer-link: var(--amber);   /* links — 7.3:1 */
}
.site-footer .footer-brand p { color: var(--footer-fg); }
.site-footer .footer-brand p.footer-name { color: var(--footer-strong); }
.site-footer .footer-contact a,
.site-footer .footer-nav a,
.site-footer .legal-links a { color: var(--footer-link); }
.site-footer .footer-contact a:hover,
.site-footer .footer-nav a:hover,
.site-footer .legal-links a:hover { color: var(--footer-strong); }
.site-footer .footer-legal {
  color: var(--footer-fg);
  border-block-start-color: rgba(217, 154, 63, 0.28);
}
.site-footer .footer-legal p { color: var(--footer-fg); }

/* nav: amber underline sweep */
.desktop-nav a { position: relative; }
.desktop-nav a::after {
  content: '';
  position: absolute; inset-inline: 0; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, var(--terra), var(--amber));
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.25s ease;
}
.desktop-nav a:hover::after, .desktop-nav a.is-current::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .btn--primary::after { animation: none; display: none; }
  .path-card:hover, .topic-card:hover, .book-card:hover, .quote-card:hover { transform: none; }
}


/* ── v3 storytelling layer ───────────────────────────────────── */

/* the site reads as chapters: ghost Hebrew numerals on each section */
main { counter-reset: chapter; }
main > .section:not(:has(.legal-prose)) {
  position: relative;
  counter-increment: chapter;
}
main > .section:not(:has(.legal-prose))::before {
  content: counter(chapter, hebrew) "׳";
  position: absolute;
  top: clamp(0.5rem, 3vw, 2.2rem);
  inset-inline-end: clamp(0.75rem, 4vw, 3.5rem);
  font-family: var(--font-display2);
  font-weight: 700;
  font-size: clamp(3.5rem, 8vw, 7rem);
  line-height: 1;
  color: var(--wine);
  opacity: 0.07;
  pointer-events: none;
}

/* asterism — the classic book section-break — closes each home chapter */
main > .section:not(:last-of-type):not(:has(.legal-prose))::after {
  content: '⁂';
  display: block;
  text-align: center;
  font-size: 1.3rem;
  color: var(--amber);
  opacity: 0.55;
  padding-block-start: clamp(1.5rem, 4vw, 2.5rem);
}

/* testimonials open like quoted manuscript lines */
.quote-card { padding-block-start: 2.4rem; }
.quote-card > p:first-of-type { position: relative; }
.quote-card > p:first-of-type::before,
.ff-quote-text::before {
  content: '״';
  position: absolute;
  inset-inline-start: -0.15em;
  top: -0.75em;
  font-family: var(--font-display2);
  font-size: 3.2em;
  line-height: 1;
  color: var(--amber);
  opacity: 0.5;
  pointer-events: none;
}

/* a researcher's pencil note beside the live demo section */
.brain-story { position: relative; }
.brain-story::after {
  content: 'שימו לב מה קורה לכם עכשיו…';
  position: absolute;
  top: -2.4rem;
  inset-inline-end: -0.5rem;
  font-family: var(--font-hand);
  font-size: 1.35rem;
  color: var(--wine);
  opacity: 0.75;
  transform: rotate(-2.5deg);
}
@media (max-width: 760px) { .brain-story::after { display: none; } }

/* the revealed story words land like ink soaking into paper */
.brain-story-text span, .brain-story-text .w {
  transition: opacity 0.5s ease, filter 0.5s ease;
}

/* lead paragraphs in the literary voice, slightly larger line rhythm */
.hero .lead, .page-hero .lead { line-height: 1.85; }

@media (prefers-reduced-motion: reduce) {
  .brain-story-text span, .brain-story-text .w { transition: none; }
}


/* ── v4 imagery ─────────────────────────────────────────────── */
.path-figure {
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  overflow: hidden;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
}
.path-card .path-figure img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 8.2; object-fit: cover; transition: transform 0.5s ease; }
.path-card:hover .path-figure img { transform: scale(1.04); }
.page-band, .about-band { max-width: 62rem; margin-inline: auto; }
.page-band img, .about-band img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 21 / 8; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-warm); }
.about-band figcaption { font-family: var(--font-hand); font-size: 1.3rem; color: var(--wine); text-align: center; padding-block-start: var(--space-3); }
.section--tight { padding-block: clamp(1.5rem, 4vw, 3rem); }
@media (prefers-reduced-motion: reduce) { .path-card:hover .path-figure img { transform: none; } }


/* ── v5 folklore layer ───────────────────────────────────────── */
/* a warmer, more colourful storytelling skin: folk accent hues + hand-drawn
   spot illustrations. Additive + decorative only (all aria-hidden, no seam). */
:root {
  --folk-teal: #2b7a78;
  --folk-indigo: #3b3e73;
  --folk-berry: #a5324a;
  --folk-leaf: #6f8f3a;
}

/* section break becomes a colourful folk sprig instead of the plain asterism */
main > .section:not(:last-of-type):not(:has(.legal-prose))::after {
  content: '';
  display: block;
  block-size: 30px;
  margin-block-start: clamp(1.5rem, 4vw, 2.75rem);
  background: center / auto 28px no-repeat
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMjAgMzAiIGZpbGw9Im5vbmUiPgo8cGF0aCBkPSJNMjAgMTUgcTQyIDAgNzggMCIgc3Ryb2tlPSIjYjQ1NTJkIiBzdHJva2Utd2lkdGg9IjEuMyIgb3BhY2l0eT0iMC40NSIvPgo8cGF0aCBkPSJNMjAwIDE1IHEtNDIgMCAtNzggMCIgc3Ryb2tlPSIjYjQ1NTJkIiBzdHJva2Utd2lkdGg9IjEuMyIgb3BhY2l0eT0iMC40NSIvPgo8cGF0aCBkPSJNNDYgMTUgcTcgLTEwIDE4IC02IHEtNyAxMCAtMTggNnoiIGZpbGw9IiM2ZjhmM2EiLz4KPHBhdGggZD0iTTE3NCAxNSBxLTcgLTEwIC0xOCAtNiBxNyAxMCAxOCA2eiIgZmlsbD0iIzZmOGYzYSIvPgo8Y2lyY2xlIGN4PSIyNiIgY3k9IjE1IiByPSIzIiBmaWxsPSIjYTUzMjRhIi8+CjxjaXJjbGUgY3g9IjE5NCIgY3k9IjE1IiByPSIzIiBmaWxsPSIjYTUzMjRhIi8+CjxjaXJjbGUgY3g9IjkwIiBjeT0iMTUiIHI9IjIiIGZpbGw9IiMyYjdhNzgiLz4KPGNpcmNsZSBjeD0iMTMwIiBjeT0iMTUiIHI9IjIiIGZpbGw9IiMyYjdhNzgiLz4KPGcgZmlsbD0iI2Q5OWEzZiI+PGNpcmNsZSBjeD0iMTEwIiBjeT0iNi41IiByPSI0Ii8+PGNpcmNsZSBjeD0iMTEwIiBjeT0iMjMuNSIgcj0iNCIvPjxjaXJjbGUgY3g9IjEwMS41IiBjeT0iMTUiIHI9IjQiLz48Y2lyY2xlIGN4PSIxMTguNSIgY3k9IjE1IiByPSI0Ii8+PC9nPgo8Y2lyY2xlIGN4PSIxMTAiIGN5PSIxNSIgcj0iNC4zIiBmaWxsPSIjN2QzMDI2Ii8+Cjwvc3ZnPgo=");
}

/* signature storybook vignette above the "once upon a time" demo story */
.story-vignette {
  display: block;
  inline-size: min(100%, 24rem);
  height: auto;
  margin: 0 auto var(--space-5);
}
@media (prefers-reduced-motion: no-preference) {
  .story-vignette .twinkle { animation: folkTwinkle 3.4s ease-in-out infinite; }
  .story-vignette .twinkle:nth-of-type(2) { animation-delay: 1.1s; }
  .story-vignette .twinkle:nth-of-type(3) { animation-delay: 2.2s; }
  .story-vignette .folk-bird { animation: folkDrift 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes folkTwinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes folkDrift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* folk accents floating in the hero, opposite the synapse */
.hero-folk {
  position: absolute;
  inset-block-end: clamp(1.5rem, 6vh, 4rem);
  inset-inline-end: clamp(1rem, 5vw, 4rem);
  inline-size: clamp(84px, 11vw, 140px);
  height: auto;
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) { .hero-folk { display: none; } }