html, body { margin: 0; padding: 0; }
body {
    background: #3a1220;
    --page: #3a1220; --raised: #4b1a2b; --ink: #f6e8dc; --ink2: #dfbda9;
    --hairline: #5f2438; --gold: #d4a94e;
    --elev: 0 1px 2px rgba(0,0,0,.32), 0 4px 14px rgba(0,0,0,.36);
    font-family: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Hebrew", sans-serif;
    color: var(--ink);
}
img { user-select: none; }
/* Full-screen scroller: one painting per screen, snap stops exactly on each */
.gallery-scroll { height: 142vw; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.gallery-scroll::-webkit-scrollbar { display: none; }
.screen { height: 142vw; scroll-snap-align: start; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.screen-inner { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; box-sizing: border-box; padding: 8px 14px; max-width: 920px; }
/* Intro */
.intro-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; width: 100%; max-width: 720px; margin-inline: auto; }
.welcome { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.welcome-kicker { color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: 0.32em; margin-top: 4px; }
.medallion { position: relative; width: 116px; height: 116px; color: var(--gold); margin: 2px 0; }
.ring { position: absolute; inset: 0; border: 1.5px dashed var(--gold); border-radius: 50%; animation: spin 70s linear infinite; }
.ring-b { inset: 16px; animation: spinrev 50s linear infinite; opacity: 0.7; }
.medallion-core { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; letter-spacing: 0.14em; color: var(--ink); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinrev { to { transform: rotate(-360deg); } }
.brand-name { font-size: 28px; line-height: 1.2; font-weight: 700; color: var(--ink); }
.brand-tagline { color: var(--ink2); font-size: 15px; letter-spacing: 0.06em; }
.intro-title { font-size: 22px; margin: 10px 0 0; }
.intro-fact { color: var(--gold); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; }
.intro-text { color: var(--ink2); font-size: 15px; line-height: 1.6; max-width: 560px; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0; }
.cat-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 18px; border: 1px solid var(--gold); border-radius: 999px; color: var(--gold); text-decoration: none; font-size: 15px; font-weight: 600; }
.cat-chip:hover { background: var(--gold); color: #3a1220; }
.scroll-hint { margin-top: 6px; color: var(--gold); font-size: 15px; font-weight: 600; }
/* Brand row + language bar */
.screen-top { display: flex; align-items: center; gap: 10px; flex: none; }
.screen-top .screen-brand { flex: 1; min-width: 0; }
.screen-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold); font-size: 12px; font-weight: 600; letter-spacing: 0.26em; opacity: 0.9; }
.screen-brand .sb-dot { font-size: 8px; }
.lang-dock { position: sticky; top: 0; height: 0; z-index: 60; }
.lang-bar { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(58,18,32,0.78); border: 1px solid var(--hairline); flex: none; width: max-content; }
.lang-dock .lang-bar { position: absolute; top: 10px; inset-inline-end: 14px; }
.lang-btn { min-width: 40px; min-height: 34px; padding: 4px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink2); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.lang-btn.active { background: var(--gold); color: #3a1220; }
/* Stage: artwork keeps at least ~54% of the frame; long stories scroll inside the band */
.cat-heading { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--gold); }
.stage-frame { display: flex; flex-direction: column; width: 100%; min-height: 0; flex: 1 1 auto; border-radius: 24px; overflow: hidden; background: var(--raised); box-shadow: var(--elev); border: 1px solid var(--hairline); }
.stage-photo { position: relative; flex: 1 1 auto; padding: 0; border: 0; background: var(--raised); cursor: zoom-in; overflow: hidden; min-height: 0; }
.stage-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.stage-story { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px 20px 18px; background: var(--raised); border-top: 2px solid var(--gold); flex: 0 1 auto; min-height: 0; max-height: 46%; overflow: hidden; }
.stage-story > * { flex: none; }
.stage-story > .stage-text { flex: 0 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.stage-kicker { font-size: 13px; letter-spacing: 0.04em; color: var(--gold); font-weight: 600; }
.stage-title { font-size: 24px; font-weight: 700; color: var(--ink); margin: 0; }
.stage-text { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink2); }
.ask-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 18px; border-radius: 999px; background: var(--ink); color: #3a1220; font-weight: 700; font-size: 14px; text-decoration: none; }
.ask-btn:hover { background: var(--gold); }
/* Closing */
.closing-screen { height: auto; min-height: 142vw; scroll-snap-align: end; scroll-snap-stop: normal; padding: 24px 14px; }
.closing-inner { width: 100%; max-width: 920px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.callout { background: var(--raised); border: 1px solid var(--hairline); border-radius: 16px; padding: 16px 20px; }
.callout h2 { margin: 0 0 8px; font-size: 20px; color: var(--ink); }
.callout p { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.6; }
.closing-line { text-align: center; color: var(--ink2); font-size: 14px; letter-spacing: 0.06em; }
@media (min-width: 768px) {
  .brand-name { font-size: 38px; } .medallion { width: 168px; height: 168px; } .medallion-core { font-size: 46px; }
  .stage-title { font-size: 28px; } .stage-text { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ring, .ring-b { animation: none; }
  .gallery-scroll { scroll-snap-type: none; }
}
/* Fullscreen viewer */
.viewer { position: fixed; inset: 0; z-index: 100; background: rgba(24,6,13,0.96); display: flex; align-items: center; justify-content: center; }
.viewer[hidden] { display: none; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.v-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--hairline); background: rgba(58,18,32,0.8); color: var(--ink); font-size: 18px; cursor: pointer; }
.v-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 1px solid var(--hairline); border-radius: 12px; background: rgba(58,18,32,0.8); color: var(--ink); font-size: 28px; cursor: pointer; }
.v-prev { inset-inline-start: 10px; } .v-next { inset-inline-end: 10px; }