/* =========================================================
   Page skins: light, hand-made looks carried over from the old site.
   skin-jerusalem  -> /streetevents  (Jerusalem stone, Alef, antique gold)
   skin-storybook  -> /thebeginning  (cream storybook, stardust, glowing path)
   Header, footer and villain mode stay shared.
   ========================================================= */

/* ---------- timeline path (all pages; stronger in storybook) ---------- */
.story-timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.story-timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 6px; translate: 50% 0;
  background: linear-gradient(180deg, transparent, #4c2a90 12%, #2569c5 50%, #ffd700 88%, transparent);
  filter: blur(3px); opacity: 0.45; border-radius: 6px; z-index: 0;
}
.story-timeline > li { position: relative; z-index: 1; }

/* ---------- shared light-skin base ---------- */
body.skin-jerusalem,
body.skin-storybook {
  --text: #231637;
  --text-soft: #4a3f5e;
  --text-mute: #675b80;
  --glass: rgba(255, 255, 255, 0.7);
  --glass-strong: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(76, 42, 144, 0.14);
  --shadow: 0 18px 40px -18px rgba(46, 16, 101, 0.28);
  --accent: #8a6508;
  --focus: #2e1065;
  color: var(--text);
}
body.skin-jerusalem .site-header, body.skin-storybook .site-header,
body.skin-jerusalem .mobile-menu, body.skin-storybook .mobile-menu,
body.skin-jerusalem .site-footer, body.skin-storybook .site-footer { --focus: var(--gold); }
body.skin-jerusalem #stars, body.skin-storybook #stars { opacity: 0.25; filter: invert(1) hue-rotate(180deg); }
body.skin-jerusalem .aurora, body.skin-storybook .aurora { opacity: 0.35; }
body.skin-jerusalem .doodles, body.skin-storybook .doodles { --doodle: #4c2a90; opacity: 0.045; }
body.skin-jerusalem h1, body.skin-jerusalem h2, body.skin-jerusalem h3,
body.skin-storybook h1, body.skin-storybook h2, body.skin-storybook h3 { font-family: 'Alef', var(--font); font-weight: 700; color: #2e1065; }
body.skin-jerusalem main .gold-text, body.skin-storybook main .gold-text {
  background-image: linear-gradient(100deg, #4c2a90 0%, #2569c5 30%, #b8860b 55%, #4c2a90 80%, #2569c5 100%);
  filter: none;
}
/* header, menu and footer keep the dark-theme text colours */
body.skin-jerusalem .site-header, body.skin-storybook .site-header,
body.skin-jerusalem .mobile-menu, body.skin-storybook .mobile-menu,
body.skin-jerusalem .site-footer, body.skin-storybook .site-footer,
body.skin-jerusalem .page-hero, body.skin-storybook .page-hero {
  --text: #f4f0ff; --text-soft: #c9bff0; --text-mute: #9b8fc9; color: var(--text);
}
body.skin-jerusalem .page-hero h1.gold-text, body.skin-storybook .page-hero h1.gold-text {
  color: transparent;
  background-image: linear-gradient(100deg, #fff6c9 0%, #ffd700 25%, #d99a1e 45%, #fff6c9 55%, #ffd700 75%, #d99a1e 100%);
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
}
body.skin-jerusalem .card, body.skin-storybook .card,
body.skin-jerusalem .quote-card, body.skin-storybook .quote-card {
  background: rgba(255, 255, 255, 0.86); border-color: rgba(184, 134, 11, 0.22);
}
body.skin-jerusalem .prose, body.skin-storybook .prose { color: var(--text); }
body.skin-jerusalem .prose strong, body.skin-storybook .prose strong { color: #2e1065; }
body.skin-jerusalem .prose a, body.skin-storybook .prose a { color: #4c2a90; }
body.skin-jerusalem .btn-ghost, body.skin-storybook .btn-ghost { color: #2e1065; background: rgba(255, 255, 255, 0.75); border-color: rgba(76, 42, 144, 0.2); }
body.skin-jerusalem .map-card iframe { filter: sepia(0.25) saturate(0.9); }
body.skin-jerusalem .callout, body.skin-storybook .callout { color: #fff; }
body.skin-jerusalem .callout h2, body.skin-storybook .callout h2 { color: #fff; }
body.skin-jerusalem .callout .lead, body.skin-storybook .callout .lead { color: #efe9ff; }
body.skin-jerusalem .masonry .g-item, body.skin-storybook .masonry .g-item { background: #e9dec6; box-shadow: 0 10px 24px -12px rgba(46, 16, 101, 0.35); }
/* the wave under the hero melts into the page colour */
body.skin-jerusalem .page-hero .wave { color: #f1e9d8; }
body.skin-storybook .page-hero .wave { color: #fdfbf7; }

/* ---------- Jerusalem stone ---------- */
body.skin-jerusalem { --tint-2: #efe4cf; background: #efe4cf; }
/* the wall: a plastered limestone wall, not a tiled pattern. Fine grain, one big golden-hour light
   from the top corner, and the square's dusk violet creeping in from below. Nothing repeats at a visible scale. */
body.skin-jerusalem .sky {
  background:
    radial-gradient(90% 60% at 88% -5%, rgba(255, 219, 150, 0.65), transparent 70%),
    radial-gradient(60% 45% at 8% 30%, rgba(255, 255, 250, 0.55), transparent 70%),
    radial-gradient(70% 50% at 20% 105%, rgba(118, 84, 172, 0.26), transparent 70%),
    radial-gradient(50% 40% at 95% 100%, rgba(196, 150, 90, 0.28), transparent 70%),
    linear-gradient(180deg, #f6eedc, #eee2c9 55%, #e6d6bb);
}
/* the square itself, blurred and washed in stone light, drifting slowly behind the page */
body.skin-jerusalem .page-photo { filter: blur(24px) saturate(1.2) brightness(1.25); opacity: 0.38; mix-blend-mode: multiply; }
body.skin-jerusalem .page-photo::after { background: none; }
/* a single stone course under the hero, like the top of a wall */
body.skin-jerusalem .page-hero { box-shadow: 0 22px 0 -10px rgba(120, 95, 60, 0.12); }
body.skin-jerusalem .aurora { display: none; }
body.skin-jerusalem .doodles { opacity: 0.035; }
/* string lights across the top of the page, like the square at night */
body.skin-jerusalem main { position: relative; }
body.skin-jerusalem main::before {
  content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 40px; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 100%, #ffd98a 0 5px, rgba(255, 217, 138, 0.35) 7px, transparent 12px) 0 0 / 120px 40px repeat-x;
  -webkit-mask-image: linear-gradient(#000, #000); mask-image: linear-gradient(#000, #000);
  filter: drop-shadow(0 0 6px rgba(255, 200, 90, 0.8));
}
body.skin-jerusalem .eyebrow { font-family: 'Alef', var(--font); font-weight: 700; letter-spacing: 0.02em; color: #7d5a0c; }
body.skin-jerusalem .quote-card { border-radius: 4px; background: #fffdf5; box-shadow: 0 14px 30px -16px rgba(60, 40, 20, 0.45); rotate: var(--r, -1.2deg); }
body.skin-jerusalem .quote-card:nth-child(3n+2) { --r: 1.4deg; } body.skin-jerusalem .quote-card:nth-child(3n) { --r: -0.6deg; }
body.skin-jerusalem .quote-card::after { content: ''; position: absolute; top: -10px; left: 50%; translate: -50% 0; width: 70px; height: 22px; background: rgba(255, 236, 170, 0.8); rotate: -3deg; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.18); }
body.skin-jerusalem .quotes.notes .quote-card.bare { background: none; box-shadow: none; rotate: 0deg; }
body.skin-jerusalem .quotes.notes .quote-card.bare::after { display: none; }
body.skin-jerusalem .quotes.notes .quote-card.bare blockquote { font-family: var(--font-hand); font-size: 1.35rem; color: #2e1065; }
/* prints on the stone */
body.skin-jerusalem .masonry .g-item { border: 6px solid #fff; border-bottom-width: 22px; border-radius: 3px; rotate: var(--r, -1deg); box-shadow: 0 16px 30px -14px rgba(60, 40, 20, 0.6); transition: rotate 0.4s var(--ease-spring), transform 0.4s var(--ease-spring); }
body.skin-jerusalem .masonry .g-item:nth-child(even) { --r: 1.2deg; }
body.skin-jerusalem .masonry .g-item:hover { rotate: 0deg; transform: scale(1.03); }
body.skin-jerusalem .masonry .g-item::after { display: none; }
/* the map as a postcard */
body.skin-jerusalem .map-card { border: 10px solid #fffdf5; border-radius: 4px; rotate: -1.5deg; box-shadow: 0 24px 50px -22px rgba(60, 40, 20, 0.7); overflow: hidden; }
body.skin-jerusalem .map-card::before { content: 'כיכר ציון'; position: absolute; top: 10px; inset-inline-end: 12px; z-index: 2; font-family: var(--font-hand); font-weight: 700; color: #2e1065; background: rgba(255, 253, 245, 0.92); padding: 4px 12px; border-radius: 6px; border: 1.5px dashed #b8860b; }
body.skin-jerusalem .recipe li::before { color: #b8860b; text-shadow: 0 2px 0 rgba(255, 255, 255, 0.8); }
body.skin-jerusalem .recipe { position: relative; }
body.skin-jerusalem .recipe::before { content: ''; position: absolute; top: 30px; inset-inline: 12%; border-top: 2px dashed rgba(184, 134, 11, 0.45); z-index: -1; }
body.skin-jerusalem .section-head .meta { color: #7b7090; }
body.skin-jerusalem .page-hero::before {
  background:
    radial-gradient(ellipse at center, rgba(46, 16, 101, 0.2), rgba(30, 14, 50, 0.7) 75%),
    linear-gradient(180deg, rgba(30, 14, 50, 0.3) 0%, transparent 45%, rgba(239, 228, 207, 0.95) 100%);
}
body.skin-jerusalem .page-hero .wave { color: #efe4cf; }
body.skin-jerusalem blockquote.big-quote { font-family: 'Alef', var(--font); font-weight: 700; color: #2e1065; }
body.skin-jerusalem .quote-card::before { color: #b8860b; }
body.skin-jerusalem .quote-card figcaption { color: #4c2a90; }
body.skin-jerusalem .page-hero::before {
  background:
    radial-gradient(ellipse at center, rgba(46, 16, 101, 0.25), rgba(30, 14, 50, 0.75) 75%),
    linear-gradient(180deg, rgba(30, 14, 50, 0.3) 0%, transparent 45%, rgba(241, 233, 216, 0.95) 100%);
}
body.skin-jerusalem .page-hero .lead { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
body.skin-jerusalem .page-hero .eyebrow, body.skin-storybook .page-hero .eyebrow { color: #ffe680; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55); font-family: var(--font-hand); }
/* a calmer callout on the light skins: cream paper with a gold edge */
body.skin-jerusalem .callout, body.skin-storybook .callout { background: linear-gradient(160deg, #fffdf6, #f6ecd0); color: #2e1065; border: 2px solid rgba(200, 168, 75, 0.6); box-shadow: 0 18px 40px -22px rgba(46, 16, 101, 0.35); }
body.skin-jerusalem .callout h2, body.skin-storybook .callout h2, body.skin-jerusalem .callout .lead, body.skin-storybook .callout .lead { color: #2e1065; }
body.skin-jerusalem .callout::before, body.skin-storybook .callout::before { background: #4c2a90; opacity: 0.06; }
body.skin-jerusalem .callout .eyebrow, body.skin-storybook .callout .eyebrow { color: #9a6f12; }
body.skin-jerusalem .quote-card.bare, body.skin-storybook .quote-card.bare { background: none; }
body.skin-jerusalem .quote-card.bare blockquote { color: #2e1065; }
body.skin-jerusalem .quote-card::before { background: none; }

/* ---------- storybook ---------- */
body.skin-storybook { --tint-2: #fdfbf7; background: #fdfbf7; }
body.skin-storybook .sky {
  background-color: #fdfbf7;
  background-image:
    radial-gradient(rgba(76, 42, 144, 0.16) 1px, transparent 1.4px),
    radial-gradient(rgba(184, 134, 11, 0.22) 1px, transparent 1.4px),
    radial-gradient(900px 600px at 85% 10%, rgba(37, 105, 197, 0.1), transparent 70%),
    radial-gradient(800px 600px at 10% 60%, rgba(76, 42, 144, 0.08), transparent 70%);
  background-size: 34px 34px, 57px 57px, auto, auto;
  background-position: 0 0, 17px 23px, 0 0, 0 0;
}
body.skin-storybook .eyebrow { font-family: var(--font-hand); font-size: 1.35rem; font-weight: 700; color: #2569c5; }
body.skin-storybook .eyebrow::before, body.skin-storybook .section-head .eyebrow::after { background: #ffd700; height: 3px; }
body.skin-storybook .page-hero::before {
  background:
    radial-gradient(ellipse at center, rgba(46, 16, 101, 0.3), rgba(26, 11, 61, 0.8) 75%),
    linear-gradient(180deg, rgba(26, 11, 61, 0.3), transparent 45%, rgba(253, 251, 247, 0.96) 100%);
}
body.skin-storybook .page-hero .lead { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
body.skin-storybook .story-timeline::before { opacity: 0.6; }
body.skin-storybook .story-timeline > li::after {
  content: ""; position: absolute; top: 26px; inset-inline-start: -46px; width: 26px; height: 26px; border-radius: 50%;
  background: #ffd700; box-shadow: 0 0 20px #ffd700, inset 0 0 8px rgba(255, 255, 255, 0.9);
  animation: breathe 3s ease-in-out infinite;
}
body.skin-storybook .story-timeline { padding-inline-start: 54px; }
body.skin-storybook .story-timeline::before { inset-inline-start: 10px; translate: 0 0; }
body.skin-storybook blockquote { color: #2e1065; }
body.skin-storybook .memory .hand { color: #2569c5; }
body.skin-storybook .memory { border-radius: 30px; }

/* villain mode wins over any skin */
body.villain.skin-jerusalem, body.villain.skin-storybook {
  --text: var(--v-text, #eef7ea); --text-soft: var(--v-soft); --text-mute: var(--v-mute); --tint-2: var(--v-n900, #07020f);
  --glass: rgb(var(--v-rgb) / 0.05); --glass-strong: rgb(var(--v-rgb) / 0.11); --glass-border: rgb(var(--v-rgb) / 0.3);
  --shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6); --accent: var(--villain); --focus: var(--v-warm);
  color: var(--text); background: var(--v-n900, #07020f);
}
body.villain.skin-jerusalem .sky, body.villain.skin-storybook .sky { background: var(--v-sky); }
body.villain.skin-jerusalem .aurora { display: block; }
body.villain.skin-jerusalem .aurora, body.villain.skin-storybook .aurora { opacity: 1; }
body.villain.skin-jerusalem #stars, body.villain.skin-storybook #stars { opacity: 1; filter: none; }
body.villain.skin-jerusalem .doodles, body.villain.skin-storybook .doodles { --doodle: var(--villain); opacity: 0.09; }
body.villain.skin-jerusalem main::before { display: none; }
body.villain.skin-jerusalem h1, body.villain.skin-jerusalem h2, body.villain.skin-jerusalem h3,
body.villain.skin-storybook h1, body.villain.skin-storybook h2, body.villain.skin-storybook h3 { color: var(--villain); }
body.villain.skin-jerusalem main .gold-text, body.villain.skin-storybook main .gold-text { background-image: linear-gradient(100deg, var(--v-light) 0%, var(--villain) 25%, var(--v-deep) 45%, var(--v-light) 55%, var(--villain) 75%, var(--v-deep) 100%); }
body.villain.skin-jerusalem .page-hero h1.gold-text, body.villain.skin-storybook .page-hero h1.gold-text { background-image: linear-gradient(100deg, var(--v-light) 0%, var(--villain) 25%, var(--v-deep) 45%, var(--v-light) 55%, var(--villain) 75%, var(--v-deep) 100%); }
body.villain.skin-jerusalem .page-hero::before, body.villain.skin-storybook .page-hero::before {
  background: radial-gradient(ellipse at center, rgba(7, 2, 15, 0.2), rgba(4, 1, 10, 0.75) 75%), linear-gradient(180deg, rgba(4, 1, 10, 0.3), transparent 45%, rgba(7, 2, 15, 0.96) 100%);
}
body.villain.skin-jerusalem .page-hero .wave, body.villain.skin-storybook .page-hero .wave { color: #07020f; }
body.villain.skin-jerusalem .card, body.villain.skin-storybook .card,
body.villain.skin-jerusalem .quote-card, body.villain.skin-storybook .quote-card { background: rgba(6, 14, 8, 0.8); border-color: rgb(var(--v-rgb) / 0.22); box-shadow: none; }
body.villain.skin-jerusalem .quote-card::after { background: rgb(var(--v-rgb) / 0.35); }
body.villain.skin-jerusalem .prose strong, body.villain.skin-storybook .prose strong { color: var(--v-light); }
body.villain.skin-jerusalem .prose a, body.villain.skin-storybook .prose a { color: var(--v-warm); }
body.villain.skin-jerusalem .btn-ghost, body.villain.skin-storybook .btn-ghost { color: var(--text); background: rgb(var(--v-rgb) / 0.05); border-color: rgb(var(--v-rgb) / 0.45); }
body.villain.skin-jerusalem .eyebrow, body.villain.skin-storybook .eyebrow, body.villain.skin-jerusalem .page-hero .eyebrow, body.villain.skin-storybook .page-hero .eyebrow { color: var(--v-warm); }
body.villain.skin-storybook .eyebrow::before, body.villain.skin-storybook .section-head .eyebrow::after { background: var(--villain); }
body.villain.skin-jerusalem blockquote, body.villain.skin-storybook blockquote, body.villain.skin-jerusalem blockquote.big-quote, body.villain.skin-jerusalem .quote-card.bare blockquote, body.villain.skin-jerusalem .quotes.notes .quote-card.bare blockquote { color: #eef7ea; }
body.villain.skin-jerusalem .quote-card::before, body.villain.skin-jerusalem .quote-card figcaption, body.villain.skin-jerusalem .recipe li::before { color: var(--v-warm); text-shadow: none; }
body.villain.skin-jerusalem .section-head .meta { color: var(--v-mute); }
body.villain.skin-jerusalem .callout, body.villain.skin-storybook .callout { background: linear-gradient(160deg, rgba(16, 36, 14, 0.85), rgba(28, 10, 46, 0.85)); color: var(--text); border-color: rgb(var(--v-rgb) / 0.45); box-shadow: none; }
body.villain.skin-jerusalem .callout h2, body.villain.skin-storybook .callout h2 { color: var(--villain); }
body.villain.skin-jerusalem .callout .lead, body.villain.skin-storybook .callout .lead, body.villain.skin-jerusalem .callout .eyebrow, body.villain.skin-storybook .callout .eyebrow { color: var(--v-soft); }
body.villain.skin-jerusalem .callout::before, body.villain.skin-storybook .callout::before { background: var(--villain); }
body.villain.skin-jerusalem .masonry .g-item, body.villain.skin-storybook .masonry .g-item { background: #0d0520; border-color: #dfe7d6; box-shadow: var(--shadow); }
body.villain.skin-jerusalem .map-card { border-color: #dfe7d6; }
body.villain.skin-jerusalem .map-card::before { background: rgba(6, 14, 8, 0.92); color: var(--v-warm); border-color: var(--villain); }
body.villain.skin-jerusalem .map-card iframe { filter: saturate(0.6) contrast(1.1) invert(0.9) hue-rotate(180deg); }
body.villain.skin-jerusalem .recipe::before { border-top-color: rgb(var(--v-rgb) / 0.35); }
body.villain.skin-storybook .memory .hand { color: var(--v-warm); }
body.villain.skin-storybook .story-timeline > li::after { background: var(--villain); box-shadow: 0 0 20px var(--villain), inset 0 0 8px rgba(255, 255, 255, 0.6); }
body.villain .story-timeline::before { background: linear-gradient(180deg, transparent, #4c1d95 12%, var(--v2) 50%, var(--villain) 88%, transparent); }