/* ============================================================
   STRANGER MARGINALIA — shared module (Joel 2026-05-13)
   Notes from the Stranger speaking directly to the reader, plus
   Hebrew watermarks. Scoped to any page that opts in via
   body[data-stranger="..."] (e.g. "home", "kids", "parents",
   "pastors", "strangers", "timeline", "curriculum").
   Every note's TEXT is cited to a real Stranger/Father/Spirit
   line from the manuscript or quotes.json — never fabricated.
   ============================================================ */

body[data-stranger] {
  --s-saffron:      #E2A93B;
  --s-saffron-deep: #B08020;
  --s-saffron-glow: #F4C766;
  --s-wine:         #6B2A4F;
  --s-wine-deep:    #3F1830;
  --s-cream:        #F7EDD3;
  --s-cream-glow:   #FAEAB8;
  --s-lapis:        #2A5BA8;
  --s-lapis-deep:   #173972;
  --s-shadow:       #1A1410;

  --s-fnt-heb:  "Frank Ruhl Libre", "Noto Sans Hebrew", serif;
  --s-fnt-hand: "Caveat", "Marker Felt", cursive;
}

/* ----------- Journal-note base (Stranger voice) ----------- */
body[data-stranger] .s-jnote {
  position: absolute;
  font-family: var(--s-fnt-hand);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 26px);
  /* Joel fix 2026-05-13: was 1.15 — too tight, multi-line + rotation
     caused text to crash on itself. Loosened to 1.4 for breathing room. */
  line-height: 1.4;
  pointer-events: none;
  user-select: none;
  z-index: 5;
  max-width: 220px;
  color: var(--s-saffron-deep);
}
body[data-stranger] .s-jnote-cite {
  margin-top: 8px;  /* explicit gap so cite doesn't crash into last line */
}
body[data-stranger] .s-jnote--saffron {
  /* Joel fix 2026-05-13: was --s-saffron-deep (#B08020) which was too soft
     on cream gutter. Bumped to a richer burnt-bronze that POPS on cream
     and stays handwritten-warm — no soft glow. */
  color: #8A5A1A;
  font-weight: 600;
}
body[data-stranger] .s-jnote--wine    { color: #6B2A4F; font-weight: 600; }  /* deep plum — pops hard on cream */
body[data-stranger] .s-jnote--cream   { color: var(--s-saffron-glow); }
body[data-stranger] .s-jnote--lapis   { color: var(--s-lapis-deep); font-weight: 600; }
body[data-stranger] .s-jnote--ink     { color: var(--s-shadow); }
/* ON CREAM bg, kill any inherited text-shadow so handwritten letters
   are crisp, not fuzzy. Only DARK-section notes get the dark-halo
   shadow (overridden below). */
body[data-stranger] .s-jnote--saffron,
body[data-stranger] .s-jnote--wine,
body[data-stranger] .s-jnote--lapis,
body[data-stranger] .s-jnote--ink {
  text-shadow: none;
}

/* On any DARK section (.on-dark, .stranger-callout, [data-bg-art]),
   FORCE Stranger notes to a warm IVORY that pops on dark backgrounds
   without needing any shadow.
   Joel mandate 2026-05-13: "I hate the dark outline rather than the
   soft shadow of the gold. Let's just change the color of that gold
   on every page. It looks awful."
   — was gold (#F4C766) with crisp 1-px outline → now pale ivory (no
   outline, no shadow). Ivory reads cleanly on any dark bg as a
   handwritten note without competing with body copy. */
/* Joel fix 2026-05-13: shared-marginalia notes that anchor directly to
   .aud-section / .stranger-callout / etc. (sections that are full
   viewport width) had right:16px inline which placed them 16px from
   the actual viewport edge — rotation made letters extend past that.
   Push them in by another 32px so the rotation always stays in frame. */
body[data-stranger] section > aside.s-jnote:not(.s-jnote--over)[style*="right: 16px"],
body[data-stranger] header > aside.s-jnote:not(.s-jnote--over)[style*="right: 16px"] {
  right: 48px !important;
}
body[data-stranger] section > aside.s-jnote:not(.s-jnote--over)[style*="left: 16px"],
body[data-stranger] header > aside.s-jnote:not(.s-jnote--over)[style*="left: 16px"] {
  left: 48px !important;
}

body[data-stranger] .on-dark .s-jnote,
body[data-stranger] .stranger-callout .s-jnote,
body[data-stranger] [data-bg-art] .s-jnote,
body[data-stranger] section.on-dark .s-jnote,
body[data-stranger] .universe-tease .s-jnote,
body[data-stranger] .universe-mini .s-jnote,
body[data-stranger] .inside-books .s-jnote,
body[data-stranger] .inside-books-strip .s-jnote,
body[data-stranger] .timeline-strip .s-jnote,
body[data-stranger] .curric-strip .s-jnote,
body[data-stranger] #curriculum-strip .s-jnote,
body[data-stranger] .home-cta .s-jnote,
body[data-stranger] .endorsements-strip .s-jnote,
body[data-stranger] .endorsement-bar .s-jnote,
body[data-stranger] .reviews-strip .s-jnote,
body[data-stranger] .testimonials .s-jnote,
body[data-stranger] .vote-next-strip .s-jnote,
body[data-stranger] #vote-next .s-jnote,
body[data-stranger] #reviews .s-jnote,
body[data-stranger] .series-description .s-jnote {
  color: #F4EDD7 !important;     /* warm ivory — clean & readable */
  text-shadow: none !important;
  font-weight: 600;
}

/* ============================================================
   Joel fix 2026-05-13 (round 2): the audience pages
   (for-kids / for-parents / for-pastors) keep `class="on-dark"` on
   sections 1/3/5 even though those sections are visually CREAM (the
   per-page CSS overrides the background). The .on-dark .s-jnote
   rule above was force-coloring those notes saffron-glow (gold) with
   a black shadow → gold-on-cream with a soft fuzzy halo. Joel:
   "Every time you see that weird gold on cream with a soft shadow…
   Fix it please." Here we restore the configured color (wine =
   deep plum, saffron = burnt bronze) on those cream sections and
   kill the inherited shadow.
   ============================================================ */
body[data-topic="kids"]    .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--wine,
body[data-topic="kids"]    .aud-section:nth-of-type(3) .s-jnote--wine,
body[data-topic="kids"]    .aud-section:nth-of-type(5) .s-jnote--wine,
body[data-topic="parents"] .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--wine,
body[data-topic="parents"] .aud-section:nth-of-type(3) .s-jnote--wine,
body[data-topic="parents"] .aud-section:nth-of-type(5) .s-jnote--wine,
body[data-topic="pastors"] .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--wine,
body[data-topic="pastors"] .aud-section:nth-of-type(3) .s-jnote--wine,
body[data-topic="pastors"] .aud-section:nth-of-type(5) .s-jnote--wine {
  color: #6B2A4F !important;          /* deep plum — pops on cream */
  text-shadow: none !important;
  font-weight: 600;
}
body[data-topic="kids"]    .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--saffron,
body[data-topic="kids"]    .aud-section:nth-of-type(3) .s-jnote--saffron,
body[data-topic="kids"]    .aud-section:nth-of-type(5) .s-jnote--saffron,
body[data-topic="parents"] .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--saffron,
body[data-topic="parents"] .aud-section:nth-of-type(3) .s-jnote--saffron,
body[data-topic="parents"] .aud-section:nth-of-type(5) .s-jnote--saffron,
body[data-topic="pastors"] .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--saffron,
body[data-topic="pastors"] .aud-section:nth-of-type(3) .s-jnote--saffron,
body[data-topic="pastors"] .aud-section:nth-of-type(5) .s-jnote--saffron {
  color: #8A5A1A !important;          /* burnt bronze — pops on cream */
  text-shadow: none !important;
  font-weight: 600;
}
/* For .s-jnote--cream variants placed on the CREAM sections (which is
   actually a config bug — cream on cream is invisible), fall them back
   to a readable deep-plum so they don't vanish. */
body[data-topic="kids"]    .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--cream,
body[data-topic="kids"]    .aud-section:nth-of-type(3) .s-jnote--cream,
body[data-topic="kids"]    .aud-section:nth-of-type(5) .s-jnote--cream,
body[data-topic="parents"] .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--cream,
body[data-topic="parents"] .aud-section:nth-of-type(3) .s-jnote--cream,
body[data-topic="parents"] .aud-section:nth-of-type(5) .s-jnote--cream,
body[data-topic="pastors"] .aud-section:nth-of-type(1):not(.aud-hero) .s-jnote--cream,
body[data-topic="pastors"] .aud-section:nth-of-type(3) .s-jnote--cream,
body[data-topic="pastors"] .aud-section:nth-of-type(5) .s-jnote--cream {
  color: #6B2A4F !important;
  text-shadow: none !important;
  font-weight: 600;
}
body[data-stranger] .s-jnote-text   { display: inline-block; }
body[data-stranger] .s-jnote-doodle { display: block; margin: 4px 0 2px; }
body[data-stranger] .s-jnote-doodle svg { display: block; width: 64px; height: 36px; overflow: visible; }
body[data-stranger] .s-jnote-cite {
  display: block;
  margin-top: 4px;
  font-size: 0.78em;
  font-style: italic;
  opacity: 0.78;
  font-family: 'Cormorant Garamond', serif;
}
body[data-stranger] .s-jnote--big   { font-size: clamp(22px, 2vw, 32px); }
body[data-stranger] .s-jnote--small { font-size: clamp(15px, 1.2vw, 19px); }

/* Hide on viewports where the gutter can't fit them. Always-visible
   --over notes (over-content scrawls) bypass this.
   Joel fix 2026-05-13: was 1050px — notes were crashing into endorsement
   cards / prose around 1050–1240px. Raised to 1280px (wrap-narrow at
   1080px + 220px note width = 1300px needed). */
@media (max-width: 1280px) {
  body[data-stranger] .s-jnote:not(.s-jnote--over) { display: none !important; }
}
body[data-stranger] .s-jnote--over {
  /* Joel mandate 2026-05-13 (round 2): drop outline + shadow entirely.
     Color the over-content scrawl WARM IVORY so it reads cleanly on
     dark hero photos (every hero is sufficiently dark + dark overlay
     from data-bg-art). No fuzzy halo, no outline — just clean
     handwriting. */
  z-index: 6;
  color: #F4EDD7 !important;
  text-shadow: none !important;
  font-weight: 600;
}
body[data-stranger] .s-jnote--over .s-jnote-doodle svg path {
  filter: none;
}
@media (max-width: 720px) {
  body[data-stranger] .s-jnote--over {
    top: 9% !important; right: 14px !important; font-size: 15px; max-width: 160px;
  }
}

/* ----------- Phrase decorations ----------- */
body[data-stranger] .s-circled {
  position: relative; display: inline-block; padding: 0 6px; z-index: 1;
}
body[data-stranger] .s-circled::before {
  content: ""; position: absolute; inset: -8px -6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60' preserveAspectRatio='none'><path d='M110 4 C 170 4, 214 16, 214 30 C 214 46, 162 56, 108 56 C 50 56, 6 44, 6 28 C 6 12, 56 6, 112 6' fill='none' stroke='%23E2A93B' stroke-width='2.2' stroke-linecap='round' opacity='0.78'/></svg>");
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none; z-index: -1;
}
body[data-stranger] .s-squiggled {
  position: relative; display: inline-block; font-weight: 600; color: var(--s-saffron-deep);
}
body[data-stranger] .s-squiggled::after {
  content: ""; position: absolute; left: -3%; right: -3%; bottom: -6px; height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2 5 Q 30 1, 60 4 T 120 4 T 198 3' fill='none' stroke='%23E2A93B' stroke-width='2.4' stroke-linecap='round' opacity='0.85'/></svg>");
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}
body[data-stranger] .s-starred {
  position: relative; display: inline-block; padding-right: 18px; font-weight: 600; color: var(--s-wine);
}
body[data-stranger] .s-starred::after {
  content: "✦"; position: absolute; right: 0; top: -8px; font-size: 14px; color: var(--s-saffron);
}

/* Bright variants for use on dark-bg sections — including .stranger-callout */
body[data-stranger] .on-dark .s-circled,
body[data-stranger] .on-dark .s-squiggled,
body[data-stranger] .on-dark .s-starred,
body[data-stranger] .stranger-callout .s-circled,
body[data-stranger] .stranger-callout .s-squiggled,
body[data-stranger] .stranger-callout .s-starred {
  color: var(--s-saffron-glow) !important;
}
body[data-stranger] .on-dark .s-circled::before,
body[data-stranger] .stranger-callout .s-circled::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60' preserveAspectRatio='none'><path d='M110 4 C 170 4, 214 16, 214 30 C 214 46, 162 56, 108 56 C 50 56, 6 44, 6 28 C 6 12, 56 6, 112 6' fill='none' stroke='%23F4C766' stroke-width='2.4' stroke-linecap='round' opacity='0.9'/></svg>") !important;
}
body[data-stranger] .on-dark .s-squiggled::after,
body[data-stranger] .stranger-callout .s-squiggled::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2 5 Q 30 1, 60 4 T 120 4 T 198 3' fill='none' stroke='%23F4C766' stroke-width='2.4' stroke-linecap='round' opacity='0.9'/></svg>") !important;
}
body[data-stranger] .on-dark .s-starred::after,
body[data-stranger] .stranger-callout .s-starred::after {
  color: var(--s-saffron-glow) !important;
}

/* ----------- Hebrew watermarks ----------- */
body[data-stranger] .s-watermark {
  position: absolute;
  font-family: var(--s-fnt-heb);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
  font-weight: 700;
  z-index: 0;
}
body[data-stranger] .s-watermark--saffron { color: rgba(226,169,59,0.10); }
body[data-stranger] .s-watermark--wine    { color: rgba(107,42,79,0.14); }
body[data-stranger] .s-watermark--cream   { color: rgba(247,237,211,0.10); }
body[data-stranger] .s-watermark--lapis   { color: rgba(42,91,168,0.12); }