/* ============================================================
   Shaul Naim - "כרזה ששרה / The Song-Poster"
   A pioneer Eretz-Yisrael song-pamphlet you scroll as one day of song.
   Palette "Degel": the Israeli flag - white field + flag blue (#0038B8) + navy.
   White light sections alternate with flag-blue/navy dark sections.
   Signature: the sing-along headline that ignites word by word.
   ============================================================ */
:root{
  /* ---- COLOR FOUNDATION: "Degel" - the Israeli flag (white + tekhelet blue), WCAG-verified ----
     White is the field; Israeli-flag blue #0038B8 is the one saturated hue; navy carries depth
     and text. Token NAMES kept from the previous system so every component inherits. */
  --stone:#FFFFFF;    /* white page / light sections; navy text 16:1 AAA */
  --stone-2:#E7EEFC;  /* palest blue tint band (shows table-of-contents); navy 13:1 AAA */
  --gold:#FFFFFF;     /* hero field = the flag's white field (large field; navy text + blue accents) */
  --gold-deep:#EAF1FF; /* faint blue for the hero's subtle light gradient */
  --glow:#FFFFFF;     /* the light accent on the blue/navy dark sections (white 8.6:1+ on flag blue) */
  --ink:#0A1E4A;      /* navy: dark section grounds + primary body text on white (16:1 AAA) */
  --ink-2:#12245C;    /* raised navy card on the singles wall */
  --ink-900:#07153A;  /* deepest navy: cover-plate bg + navy-button hover */
  --pom:#0038B8;      /* Israeli-flag blue: thread, every CTA, links, drop-caps, the igniting word */
  --pom-700:#00268A;  /* flag-blue CTA hover (white label 11:1 AAA) */
  --euc:#21407F;      /* deep blue for eucalyptus-slot detail plates (white 9:1+ AAA) */
  --tek:#16357C;      /* deep blue for the tekhelet-slot detail plate (white 10:1 AAA) */
  --tek-500:#3B5BC0;  /* lighter flag blue for hairlines / medallion rings / large accents */
  --brass:#7C90C6;    /* blue-gray hairlines, keylines, crop-marks on white (never text on white) */
  --brass-light:#C9D6F5; /* keyline / eyebrow on navy night (7.5:1 AA) */
  --stone-soft:#3A4A78;   /* muted navy text on white (7.4:1 AAA) */
  --cream:#FFFFFF;    /* white: raised plate + inverse text on all blue/navy grounds */
  --sand:#AEC0EA;     /* muted light-blue text on navy (6.2:1 AA) + disabled-fill base */
  /* semantic aliases */
  --page:var(--stone); --raised:var(--cream); --muted:var(--stone-soft);
  --focus-glow:var(--glow); --focus-ink:var(--ink); --disabled-text:var(--stone-soft);
  --display:'Suez One','Frank Ruhl Libre',serif;
  --serif:'Frank Ruhl Libre',serif;
  --sans:'Heebo',Arial,sans-serif;
  --tooth:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
/* focus ring must be visible on the white field: flag-blue outline + navy halo (works on white AND on flag-blue buttons) */
:focus-visible{outline:3px solid var(--pom);outline-offset:2px;box-shadow:0 0 0 5px rgba(10,30,74,.25)}
html{scroll-behavior:smooth}
body{font-family:var(--serif);background:var(--stone);color:var(--ink);line-height:1.75;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-weight:900;line-height:1.06;letter-spacing:-.01em}
img{display:block;max-width:100%}
.container{max-width:1160px;margin:0 auto;padding:0 30px}
section{padding:116px 0;position:relative;scroll-margin-top:96px}

/* furniture: tracked Heebo small-caps for all nav / meta / labels */
.eyebrow,.section-sub,.meta,.nav nav a,.lang-toggle,.card-year,.back-link,.imprint,.medallion-label{
  font-family:var(--sans);letter-spacing:.12em}
/* Hebrew has no uppercase and dislikes Latin letter-spacing: neutralise both on RTL
   furniture (English keeps its tracked small-caps because dir flips to ltr in EN). */
[dir=rtl] .eyebrow,[dir=rtl] .section-sub,[dir=rtl] .meta,[dir=rtl] .card-year,[dir=rtl] .back-link,
[dir=rtl] .imprint,[dir=rtl] .medallion-label,[dir=rtl] .album-info,[dir=rtl] .album-detail-meta,
[dir=rtl] .toc-meta,[dir=rtl] .video-desc,[dir=rtl] .soon,[dir=rtl] .credit,[dir=rtl] .cap{
  letter-spacing:normal;text-transform:none}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* paper tooth on printed (light) panels */
.paper{position:relative}
.paper::after{content:"";position:absolute;inset:0;background:var(--tooth);background-size:180px;
  opacity:.05;mix-blend-mode:multiply;pointer-events:none;z-index:0}
.paper > *{position:relative;z-index:1}

/* registration crop-marks (four corners) */
.cropped{position:relative}
.cropped::before{content:"";position:absolute;inset:9px;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--brass),var(--brass)) left top/13px 1.5px no-repeat,
    linear-gradient(var(--brass),var(--brass)) left top/1.5px 13px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right top/13px 1.5px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right top/1.5px 13px no-repeat,
    linear-gradient(var(--brass),var(--brass)) left bottom/13px 1.5px no-repeat,
    linear-gradient(var(--brass),var(--brass)) left bottom/1.5px 13px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right bottom/13px 1.5px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right bottom/1.5px 13px no-repeat}

/* the scarlet thread (chut ha'shani) down the leading (right) edge */
.thread{position:fixed;inset-block:0;right:0;width:2px;background:var(--pom);z-index:40}
.thread-bead{position:fixed;right:-4px;top:0;width:10px;height:10px;border-radius:50%;
  background:var(--glow);box-shadow:0 0 10px var(--glow);z-index:41;will-change:transform}

/* skip link */
.skip-link{position:absolute;inset-inline-start:16px;top:-60px;z-index:100;background:var(--ink);
  color:var(--stone);text-decoration:none;font-weight:700;font-size:14px;padding:10px 18px;transition:top .2s}
.skip-link:focus{top:0}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;inset-inline:0;z-index:30;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;row-gap:6px;padding:18px 36px;transition:.35s;background:transparent}
.nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--brass)}
.nav.scrolled .brand,.nav.scrolled nav a{color:var(--ink)}
.brand{font-family:var(--display);font-weight:400;font-size:23px;white-space:nowrap;color:var(--ink);text-decoration:none}
.brand::after{content:"";display:inline-block;width:7px;height:7px;background:var(--pom);
  margin-inline-start:9px;vertical-align:middle}
.nav nav{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}
.nav nav a{color:var(--ink);text-decoration:none;margin-inline-start:26px;font-size:12px;font-weight:500;
  text-transform:uppercase;opacity:.85;transition:.2s;white-space:nowrap}
.nav nav a:hover{opacity:1;color:var(--pom)}
.nav.scrolled nav a:hover{color:var(--pom)}
.lang-toggle{margin-inline-start:26px;background:transparent;border:1.5px solid currentColor;color:inherit;
  padding:5px 13px;font-size:11px;font-weight:700;cursor:pointer;font-family:var(--sans);min-width:44px;
  color:var(--ink);transition:.2s}
.nav.scrolled .lang-toggle{color:var(--ink)}
.lang-toggle:hover{color:var(--pom)}
/* mobile menu toggle (injected by JS; hidden on desktop) */
.nav-toggle{display:none;background:transparent;border:1.5px solid currentColor;color:inherit;
  width:44px;height:40px;cursor:pointer;align-items:center;justify-content:center;padding:0}
.nav.scrolled .nav-toggle{color:var(--ink)}
.nav-toggle svg{width:22px;height:22px;transition:.2s}
@media(max-width:700px){
  .nav-toggle{display:inline-flex}
  .nav nav{display:none}
  .nav.open .nav-toggle svg{transform:rotate(90deg)}
  .nav.open nav{display:flex;flex-direction:column;align-items:flex-start;gap:16px;
    position:fixed;inset:66px 0 auto 0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);
    padding:24px 22px 28px;border-bottom:1px solid var(--brass);z-index:29}
  .nav.open nav a{margin:0;font-size:16px;color:var(--ink);opacity:1}
  .nav.open .lang-toggle{margin:10px 0 0;color:var(--ink)}
}

/* buttons: hard-edged poster blocks, no pills */
.btn{display:inline-block;text-decoration:none;padding:16px 40px;border-radius:0;font-family:var(--sans);
  font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;transition:.2s;cursor:pointer;
  border:2px solid transparent}
.btn-ink{background:var(--ink);color:var(--stone)}
.btn-ink:hover{background:var(--ink-900)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--stone)}
.btn-pom{background:var(--pom);color:var(--stone);border-color:var(--pom)}
.btn-pom:hover{background:var(--pom-700)}
/* on ink grounds, outline flips to light */
.on-ink .btn-outline{color:var(--stone);border-color:var(--stone)}
.on-ink .btn-outline:hover{background:var(--stone);color:var(--ink)}

/* ---------- hero: solid gold panel, karaoke marquee ---------- */
.hero{background:radial-gradient(135% 95% at 82% 8%, var(--gold), var(--gold-deep) 80%);
  color:var(--ink);min-height:100vh;display:flex;flex-direction:column;
  justify-content:center;padding:150px 40px 96px;overflow:hidden;position:relative}
.hero.cropped::before{inset:22px;z-index:3}
/* the raking-light band that crosses the poster */
.sweep{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.sweep::before{content:"";position:absolute;top:-25%;bottom:-25%;width:46%;
  background:linear-gradient(100deg,transparent,rgba(0,56,184,.06) 45%,rgba(0,56,184,.06) 55%,transparent);
  transform:translateX(220%) skewX(-10deg);animation:sweep 8s ease-in-out 1.2s infinite}
@keyframes sweep{0%{transform:translateX(220%) skewX(-10deg)}
  60%,100%{transform:translateX(-260%) skewX(-10deg)}}
.hero > *:not(.sweep){position:relative;z-index:2}
/* orchestrated load-in */
.hero .nameplate,.hero .eyebrow,.hero .marquee,.hero .attribution,.hero .sub,.hero .hero-cta{
  opacity:0;transform:translateY(16px)}
.hero.entered .nameplate,.hero.entered .eyebrow,.hero.entered .marquee,
.hero.entered .attribution,.hero.entered .sub,.hero.entered .hero-cta{
  opacity:1;transform:none;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.hero.entered .eyebrow{transition-delay:.12s}
.hero.entered .marquee{transition-delay:.22s}
.hero.entered .attribution{transition-delay:.9s}
.hero.entered .sub{transition-delay:1.0s}
.hero.entered .hero-cta{transition-delay:1.12s}
.nameplate{font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,30px);color:var(--ink);
  align-self:center;border-bottom:2px solid var(--ink);padding-bottom:4px;position:relative}
.hero .eyebrow{align-self:center;margin:20px 0 8px;font-size:12px;font-weight:600;
  text-transform:uppercase;color:var(--ink);opacity:.8}
.marquee{font-family:var(--display);font-weight:400;line-height:1.12;direction:rtl;
  font-size:clamp(44px,9.6vw,132px);margin:6px 0 4px;padding-block-end:.1em;
  width:100vw;margin-inline-start:calc(50% - 50vw);padding-inline:clamp(20px,5vw,72px);text-align:center}
/* the whole Psalm rests readable in navy; a flag-blue highlight travels across it (sing-along ball) */
.marquee .word{display:inline-block;color:var(--ink);transition:color .4s ease,text-shadow .4s ease,transform .4s ease;
  margin-inline-start:.22em}
.marquee .word.lit{color:var(--pom);text-shadow:0 0 26px rgba(0,56,184,.5),0 0 9px rgba(0,56,184,.6);transform:translateY(-2px)}
.hero .attribution{align-self:center;font-family:var(--serif);font-style:normal;font-size:15px;
  letter-spacing:0;text-transform:none;color:var(--ink);opacity:.7;margin-top:16px}
.hero .sub{align-self:center;font-family:var(--serif);font-weight:500;font-size:clamp(17px,2.2vw,23px);
  color:var(--ink);max-width:620px;margin-top:22px;line-height:1.5}
.hero-cta{display:flex;gap:0;margin-top:34px;align-self:center}
.hero-cta .btn:first-child{border-inline-end:none}
.scroll-hint{position:absolute;bottom:22px;inset-inline-start:0;inset-inline-end:0;text-align:center;
  color:var(--ink);font-size:22px;text-decoration:none;animation:bob 2s infinite;opacity:.7}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ---------- section titles: gilt rule + Suez One ---------- */
h2{font-family:var(--display);font-weight:400;font-size:clamp(30px,3.6vw,50px);letter-spacing:-.01em}
.section-head{margin-bottom:34px;text-align:center}
/* a short pom thread-tick ties each section eyebrow to the scarlet leading edge */
.section-head .eyebrow{position:relative;display:inline-block;padding-inline-start:22px}
.section-head .eyebrow::before{content:"";position:absolute;inset-inline-start:0;top:50%;
  width:14px;height:2px;background:var(--pom);transform:translateY(-50%)}
.section-head .eyebrow{display:inline-block;font-size:12px;font-weight:600;text-transform:uppercase;
  color:var(--pom);margin-bottom:12px}
.section-sub{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  margin-top:12px;opacity:.75}

/* full-bleed stone gutter between saturated panels (so hues never butt) */
.gutter{height:clamp(52px,7vw,92px);background:var(--stone)}

/* ---------- singles: printed 45-rpm plates on the night wall ---------- */
.singles{background:var(--stone);color:var(--ink)}
.singles .eyebrow{color:var(--pom)}
.singles h2{color:var(--ink)}
.singles .section-sub{color:var(--stone-soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,270px));gap:34px;
  justify-content:center;max-width:960px;margin:0 auto}
.card{padding:0;border:none;background:none;text-align:inherit;font-family:inherit;color:inherit;
  text-decoration:none;display:block}
.plate{position:relative;aspect-ratio:1;background:var(--stone-2) center/cover;overflow:hidden;
  border:1px solid var(--brass);transition:.3s}
.card-cover{position:relative;aspect-ratio:1;background:var(--stone-2) center/cover;overflow:hidden;
  border:1px solid var(--brass);transition:.35s}
a.card:hover .card-cover{border-color:var(--pom)}
.card-play{position:absolute;inset:0;margin:auto;width:58px;height:58px;border:1.5px solid var(--stone);
  background:rgba(10,30,74,.55);color:var(--stone);font-size:20px;display:flex;align-items:center;
  justify-content:center;padding-inline-start:4px;opacity:0;transition:.28s}
a.card:hover .card-play{opacity:1}
.card-coming .card-cover{display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
  border:1px solid var(--brass);background:var(--stone-2)}
.card-coming .card-cover::before{content:"";position:absolute;inset:9px;pointer-events:none;
  background:
    linear-gradient(var(--brass),var(--brass)) left top/12px 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) left top/1px 12px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right top/12px 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right top/1px 12px no-repeat,
    linear-gradient(var(--brass),var(--brass)) left bottom/12px 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) left bottom/1px 12px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right bottom/12px 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) right bottom/1px 12px no-repeat}
.soon{font-family:var(--sans);color:var(--stone-soft);font-weight:600;font-size:13px;letter-spacing:.15em;text-transform:uppercase}
.card-meta{display:flex;align-items:baseline;gap:12px;margin-top:16px;padding:0 2px}
.card-num{font-family:var(--display);color:var(--pom);font-size:20px;line-height:1}
.card-title{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink);flex:1;
  line-height:1.25;min-height:2.5em;
  background:linear-gradient(100deg,var(--ink) 42%,var(--pom) 50%,var(--ink) 58%);
  background-size:230% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;transition:background-position .7s ease}
a.card:hover .card-title{background-position:-60% 0}
.card-dots{flex:1;height:1px;align-self:center;
  background:repeating-linear-gradient(to left,var(--brass) 0 2px,transparent 2px 8px);opacity:.5}
.card-year{color:var(--stone-soft);font-size:12px}

/* ---------- albums: flagship record sleeves on stone ---------- */
.albums{background:var(--stone);color:var(--ink)}
.albums .section-head{text-align:center}
.albums .section-head .eyebrow{color:var(--pom)}
.album-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,430px));gap:48px;
  justify-content:center;max-width:940px;margin:0 auto}
.album-card{text-decoration:none;color:inherit;display:block}
.album-cover{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--brass);transition:.3s}
.album-cover img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
.album-card:hover .album-cover{border-color:var(--pom)}
.album-card:hover .album-cover img{transform:scale(1.04)}
.album-buy{position:absolute;bottom:0;inset-inline:0;background:var(--pom);color:var(--stone);
  font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  text-align:center;padding:12px;transform:translateY(100%);transition:transform .32s ease}
.album-card:hover .album-buy,.album-card:focus-visible .album-buy{transform:none}
/* touch devices have no hover: keep the purchase CTA always visible */
@media (hover:none),(pointer:coarse){.album-buy{transform:none}}
.album-meta{margin-top:20px;display:flex;flex-direction:column;gap:5px;text-align:start}
.album-title{font-family:var(--serif);font-weight:900;font-size:25px;color:var(--ink);line-height:1.15}
.album-sub{font-family:var(--serif);font-style:normal;color:var(--stone-soft);font-size:16px}
.album-info{font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-soft);margin-top:3px}

/* album detail page: record sleeve */
.album-detail{display:flex;gap:46px;align-items:flex-start;flex-wrap:wrap}
.album-detail-cover{flex:0 0 320px;max-width:100%;aspect-ratio:1;overflow:hidden;
  border:1px solid var(--brass);outline:1px solid rgba(124,144,198,.4);outline-offset:7px}
.album-detail-cover.cropped::before{inset:-1px}
.album-detail-cover img{width:100%;height:100%;object-fit:cover}
.album-detail-info{flex:1;min-width:280px}
.album-detail-sub{font-family:var(--serif);font-style:normal;font-size:21px;color:var(--stone-soft);margin-bottom:8px}
.album-detail-meta{font-family:var(--sans);font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--stone-soft);margin-bottom:22px}
.album-detail .stream-links{gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- about: printed photo plate on stone ---------- */
.about{background:var(--stone);color:var(--ink)}
.about-inner{display:flex;gap:60px;align-items:flex-start;flex-wrap:wrap;justify-content:center;max-width:1000px;margin:0 auto}
.about .portrait{display:block;width:360px;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top;border-radius:0;
  border:1px solid var(--brass)}
.portrait-plate{position:relative}
.portrait-plate .cap{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone-soft);margin-top:10px;border-top:1px solid var(--brass);padding-top:8px}
.about-text{flex:1;min-width:300px;max-width:540px}
.about-text h2{color:var(--ink);margin-bottom:16px}
.about-text .eyebrow{display:block;color:var(--pom);font-size:12px;font-weight:600;text-transform:uppercase;margin-bottom:10px}
.about-text p{color:var(--stone-soft);margin-bottom:15px;font-size:18px}
.about-text p.lead{color:var(--ink);font-weight:500}
.quote{font-family:var(--serif);font-size:23px;color:var(--ink);font-style:normal;font-weight:700;
  border-inline-start:4px solid var(--pom);padding-inline-start:18px;margin:22px 0}

/* ---------- shows: the songbook table of contents ---------- */
.shows{background:var(--stone);color:var(--ink)}
.shows .section-head{text-align:center}
.shows .section-head .eyebrow,.gallery .section-head .eyebrow,.music .section-head .eyebrow,.contact .section-head .eyebrow{color:var(--pom)}
.toc{max-width:1000px;margin:0 auto;border-top:1px solid var(--brass)}
.toc-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;
  padding:24px 26px;border-bottom:1px solid var(--brass);text-decoration:none;color:inherit;transition:.25s}
.toc-row:hover{background:rgba(10,30,74,.055)}
/* letterpress medallion: navy plate with a double-rule keyline (not a thin hollow ring) */
.medallion{font-family:var(--display);font-size:24px;width:54px;height:54px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:50%;
  color:var(--ink);background:var(--stone);
  box-shadow:inset 0 0 0 3px var(--stone), inset 0 0 0 4px var(--ink)}
.toc-row:hover .medallion{border-color:var(--pom);color:var(--pom);
  box-shadow:inset 0 0 0 3px var(--stone), inset 0 0 0 4px var(--pom)}
.toc-main{min-width:0}
.toc-line{display:flex;align-items:baseline;gap:16px}
.toc-title{font-family:var(--serif);font-weight:900;font-size:clamp(19px,2.3vw,26px);line-height:1.2}
.toc-dots{flex:1;min-width:24px;height:1px;transform:scaleX(0);transform-origin:right;
  background:repeating-linear-gradient(to left,var(--brass) 0 2px,transparent 2px 9px);transition:transform .7s ease}
.toc-row.seen .toc-dots{transform:scaleX(1)}
.toc-meta{font-family:var(--sans);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-soft);white-space:nowrap}
.toc-desc{font-family:var(--serif);font-weight:500;color:var(--stone-soft);font-size:15px;margin-top:4px}
.toc-arrow{font-family:var(--sans);font-weight:700;color:var(--pom);font-size:15px}
.toc-row.events{background:var(--stone-2);color:var(--ink);margin-top:0}
.toc-row.events .toc-title{color:var(--ink)}
.toc-row.events .toc-desc{color:var(--stone-soft);font-style:normal}
.toc-row.events .medallion{background:var(--pom);color:var(--stone);border-color:var(--pom);box-shadow:none}
.toc-row.events .toc-meta,.toc-row.events .toc-arrow{color:var(--pom)}
.toc-row.events:hover .medallion{color:var(--stone);border-color:var(--pom)}
.shows-cta{text-align:center;margin-top:40px}
@media(max-width:640px){
  .toc-line{flex-wrap:wrap;gap:8px}
  .toc-dots,.toc-meta{display:none}
}

/* ---------- gallery: the projection wall ---------- */
.gallery{background:var(--stone);color:var(--ink)}
.gallery .section-head .eyebrow{color:var(--pom)}
.gallery h2{color:var(--ink)}
.gallery .section-sub{color:var(--stone-soft)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,620px));gap:34px;justify-content:center}
.video-item{margin:0}
.video-wrap{position:relative;aspect-ratio:16/9;background:var(--stone-2);overflow:hidden;cursor:pointer;
  border:1px solid var(--brass)}
.video-wrap .poster{width:100%;height:100%;object-fit:cover}
.video-wrap video,.video-wrap iframe{width:100%;height:100%;display:block;border:0}
.play-btn{position:absolute;inset:0;margin:auto;width:82px;height:82px;border:2px solid var(--stone);
  background:rgba(0,56,184,.78);color:var(--stone);font-size:28px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;padding-inline-start:5px;transition:.2s;border-radius:50%}
.video-wrap:hover .play-btn{background:var(--pom);color:var(--stone)}
.video-cap{margin-top:16px;padding:0 2px}
.video-title{display:block;font-family:var(--serif);font-weight:700;font-size:19px;color:var(--ink)}
.video-desc{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.08em;color:var(--stone-soft);margin-top:5px}

/* ---------- music ---------- */
.music{background:var(--stone);color:var(--ink);text-align:center}
.music .section-head{text-align:center}
/* light listen panel: streaming links, no dark player */
.listen{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin-top:8px}
.listen .btn:first-child{border-inline-end:none}

/* ---------- contact: the colophon ---------- */
.contact{background:var(--stone);color:var(--ink);text-align:center}
/* centered framed letterpress colophon plate (turns the void into a deliberate object) */
.contact .container{max-width:820px;border:1px solid var(--brass);
  outline:1px solid rgba(124,144,198,.35);outline-offset:7px;padding:clamp(44px,6vw,72px) clamp(28px,5vw,60px)}
/* the waving Israeli flag flies above the nameplate on the hero */
.flag-stage{display:flex;justify-content:center;margin:0 auto 10px}
.flag-stage canvas{width:min(980px,96vw);aspect-ratio:16/10;height:auto;display:block;filter:drop-shadow(0 34px 38px rgba(10,30,74,.16))}
.contact .section-head{text-align:center;margin-bottom:26px}
.contact .section-head .eyebrow{color:var(--pom);padding-inline-start:0}
.contact .section-head .eyebrow::before{display:none}
.contact h2{color:var(--ink)}
.contact .section-sub{color:var(--stone-soft)}
.contact-links{display:flex;flex-wrap:wrap;gap:0;justify-content:center;align-items:stretch;margin-top:8px}
.contact-links .btn:first-child{border-inline-end:none}
.imprint{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-soft);margin-top:30px}
.social{margin-top:18px;display:flex;gap:22px;justify-content:center;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.social a{display:inline-block;padding:6px 6px;color:var(--stone-soft);text-decoration:none;transition:.2s}
.social a:hover{color:var(--pom)}
.seal-here{position:absolute;right:-7px;bottom:0;width:16px;height:16px;border-radius:50%;background:var(--pom);
  box-shadow:0 0 14px var(--pom);transform:scale(0);transition:transform .55s cubic-bezier(.2,1.5,.45,1)}
.seal-here.stamped{transform:scale(1)}
.seal-here::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(10,30,74,.4)}

/* ---------- footer ---------- */
footer{background:var(--stone);color:var(--stone-soft);text-align:center;padding:46px 24px;border-top:1px solid var(--brass);font-family:var(--sans);font-size:12px;letter-spacing:.1em}
footer p:first-child{font-family:var(--serif);letter-spacing:0;color:var(--pom);font-size:16px;text-transform:none}
footer .small{margin-top:8px;opacity:.85}
footer .small a{color:var(--pom);text-decoration:underline}
footer .small a:hover{color:var(--pom-700)}

/* ---------- detail pages ---------- */
.detail-panel{padding:150px 30px 60px;color:var(--ink);position:relative}
/* Bright direction: every detail title panel is a WHITE field with navy ink (the
   per-item colour lives only in the flag-blue eyebrow + the scarlet thread). */
.detail-panel.hue-gold,.detail-panel.hue-stone,.detail-panel.hue-euc,
.detail-panel.hue-tek,.detail-panel.hue-ink,.detail-panel.hue-pom{background:var(--stone);color:var(--ink)}
.detail-inner{max-width:860px;margin:0 auto}
.back-link{display:inline-flex;align-items:center;gap:8px;color:inherit;opacity:.75;text-decoration:none;
  font-size:12px;text-transform:uppercase;font-weight:600;margin-bottom:26px;transition:.2s}
.back-link:hover{opacity:1;color:var(--pom)}
.detail-panel .eyebrow{display:block;font-size:12px;font-weight:600;text-transform:uppercase;margin-bottom:12px;color:var(--pom)}
.detail-panel h1{font-family:var(--display);font-weight:400;font-size:clamp(38px,7vw,86px);line-height:1;margin-bottom:6px}
.detail-body{background:var(--stone);color:var(--ink);padding:70px 30px 96px}
.detail-body .inner{max-width:760px;margin:0 auto}
.detail-body .show-lead{font-family:var(--serif);font-weight:700;font-size:23px;font-style:normal;
  border-inline-start:4px solid var(--pom);padding-inline-start:18px;margin:0 0 26px;color:var(--ink)}
/* the ignite mechanic echoed on each leaf: the tagline lights word by word */
.detail-body .show-lead .w{display:inline-block;opacity:0;filter:blur(5px);transform:translateY(4px);
  transition:opacity .55s ease,filter .55s ease,transform .55s ease}
.detail-body .show-lead .w.on{opacity:1;filter:none;transform:none}
@media (prefers-reduced-motion: reduce){.detail-body .show-lead .w{opacity:1!important;filter:none!important;transform:none!important}}
.detail-body p{color:var(--stone-soft);font-size:18px;line-height:1.9;margin-bottom:16px}
.detail-body .show-list{list-style:none;margin:8px 0 20px;padding:0;display:grid;gap:12px}
.detail-body .show-list li{position:relative;padding-inline-start:24px;color:var(--stone-soft);line-height:1.6}
.detail-body .show-list li::before{content:"";position:absolute;inset-inline-start:0;top:11px;width:12px;height:2px;background:var(--pom)}
.detail-body .show-includes{color:var(--stone-soft);font-size:14px;border-top:1px solid var(--brass);padding-top:16px;margin-top:24px;opacity:.9}
.detail-body .credit{font-family:var(--sans);font-size:13px;letter-spacing:.06em;color:var(--stone-soft);margin:2px 0 18px}
.detail-body .blurb{font-size:19px;color:var(--ink);margin-bottom:22px}
.detail-body .video-wrap{margin:0 0 30px;outline-color:rgba(124,144,198,.4)}
.detail-body .stream-links{display:flex;gap:0;flex-wrap:wrap;margin-bottom:8px}
.chip{font-family:var(--sans);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  background:transparent;color:var(--ink);text-decoration:none;padding:13px 30px;border:2px solid var(--ink);transition:.2s}
.chip:hover{background:var(--ink);color:var(--stone)}
.detail-body .shows-cta{margin-top:34px}
.lyrics{margin-top:14px;border-top:1px solid var(--brass);padding-top:14px}
.lyrics summary{cursor:pointer;font-family:var(--sans);letter-spacing:.1em;text-transform:uppercase;font-size:12px;color:var(--stone-soft);list-style:none}
.lyrics summary::-webkit-details-marker{display:none}
.lyrics-body{margin-top:14px;line-height:1.95;text-align:center;color:var(--stone-soft)}

/* ---------- responsive ---------- */
@media(max-width:640px){
  section{padding:78px 0}
  .nav{padding:14px 18px}
  .nav nav a{margin-inline-start:12px;font-size:11px}
  .hero{padding:120px 22px 80px;min-height:92vh}
  .about-inner{justify-content:center}
  .about .portrait{width:min(320px,100%)}
  .detail-panel{padding:120px 22px 50px}
  .detail-body{padding:52px 22px 76px}
}

/* ---------- 3D: cursor-driven perspective tilt on the plates ---------- */
@media (hover:hover) and (pointer:fine){
  .tilt{transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(var(--tz,0px));
    transform-style:preserve-3d;transition:transform .18s cubic-bezier(.2,.7,.3,1);will-change:transform}
  .tilt:hover{transition:transform .06s ease-out}
  .tilt .album-cover,.tilt .card-cover,.tilt .video-wrap{transform:translateZ(28px);transition:box-shadow .2s}
  .tilt:hover .album-cover,.tilt:hover .card-cover,.tilt:hover .video-wrap{box-shadow:0 30px 50px -18px rgba(0,56,184,.5)}
  .tilt .album-meta,.tilt .card-meta,.tilt .video-cap{transform:translateZ(14px)}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal,.reveal.in{opacity:1!important;transform:none!important}
  .marquee .word{color:var(--ink)!important}
  .scroll-hint{animation:none!important}
  .thread-bead{display:none}
  .tilt{transform:none!important}
}

/* ================================================================
   HOME v3 (2026-10-03): the flag is the living backdrop, Shaul is the subject.
   Seven details derived from the flag recur across the page:
   1 two stripes  2 silver pole line  3 gold finial dot  4 star triangle (play)
   5 fabric weave  6 the wind's 180ms response  7 white / pale-blue alternation
   ================================================================ */
:root{
  --v3-blue:#0038B8; --v3-blue-d:#00268A; --v3-ink:#0A1E4A; --v3-soft:#3A4A78;
  --v3-rule:#C6D2EA; --v3-gold:#B69A4F; --v3-pale:#F7F9FF; --v3-ease:cubic-bezier(.22,1,.36,1);
}
/* 1. two stripes: 2px lines, 6px apart, 28px wide */
.stripes2{display:inline-block;width:28px;height:10px;flex:none;vertical-align:middle;
  background:linear-gradient(var(--v3-blue),var(--v3-blue)) 0 0/100% 2px no-repeat,
             linear-gradient(var(--v3-blue),var(--v3-blue)) 0 8px/100% 2px no-repeat}
.nav nav a{position:relative;transition:color .18s ease-out}
.nav nav a::after{content:"";position:absolute;inset-inline-start:0;bottom:-8px;width:28px;height:10px;opacity:0;transform:translateY(2px);
  transition:opacity .18s ease-out,transform .18s ease-out;
  background:linear-gradient(var(--v3-blue),var(--v3-blue)) 0 0/100% 2px no-repeat,
             linear-gradient(var(--v3-blue),var(--v3-blue)) 0 8px/100% 2px no-repeat}
.nav nav a:hover::after,.nav nav a:focus-visible::after{opacity:1;transform:none}
.nav nav a:hover{color:var(--v3-blue)!important}
/* 3. gold finial dot */
.finial-dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle;margin-inline:6px;
  background:radial-gradient(circle at 35% 30%,#F6E3A6,var(--v3-gold) 60%,#7E6522)}
.v3-eyebrow{display:inline-flex!important;align-items:center;gap:10px;color:var(--v3-blue)!important;font-weight:700!important;letter-spacing:0!important}

/* ---------- hero ---------- */
.hero-v3{background:linear-gradient(180deg,var(--v3-pale) 0%,#fff 100%);padding:112px 72px 56px;position:relative;overflow:hidden}
.hv3-grid{max-width:1296px;margin:0 auto;display:grid;column-gap:40px;align-items:center;
  grid-template-columns:minmax(0,504px) minmax(0,1fr);
  grid-template-areas:"name flag" "desc flag" "row flag" ". pause"}
.hv3-text{display:contents}
.hv3-name{grid-area:name;align-self:end;margin:0;font-family:"Frank Ruhl Libre",serif;font-weight:700;color:var(--v3-blue);
  font-size:clamp(64px,8.4vw,120px);line-height:1.05;white-space:nowrap;letter-spacing:0}
.hv3-desc{grid-area:desc;display:flex;align-items:center;gap:14px;margin:14px 0 36px;font-family:"Heebo",sans-serif;font-size:18px;line-height:28px;color:var(--v3-soft);font-weight:500}
.hv3-row{grid-area:row;align-self:start;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.hv3-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding-bottom:12px}
.hv3-photo{width:216px;height:270px;object-fit:cover;object-position:center top;border-radius:0;display:block;
  border-inline-start:1px solid var(--v3-rule);padding-inline-start:0}
.hv3-flag{grid-area:flag;position:relative;width:100%;aspect-ratio:800/580;will-change:transform}
.hv3-flag canvas,.hv3-flag .flag-still{position:absolute;inset:0;width:100%;height:100%;display:block}
.hv3-flag canvas{z-index:1}
.hv3-flag canvas.flag-ready + .flag-still{display:none}
.motion-v3{grid-area:pause;justify-self:start;min-height:44px;padding:0 14px;background:transparent;border:0;cursor:pointer;
  font-family:"Heebo",sans-serif;font-size:14px;font-weight:500;color:var(--v3-soft);text-decoration:underline;text-underline-offset:4px}
.motion-v3:hover{color:var(--v3-blue)}
/* 4 + 6. the star's triangle as play, moving 2px with the wind's 180ms rhythm */
.btn-v3{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:232px;min-height:52px;border-radius:2px;
  background:var(--v3-blue);color:#fff;text-decoration:none;font-family:"Heebo",sans-serif;font-weight:700;font-size:16px;
  transition:background-color .18s ease-out}
.btn-v3:hover,.btn-v3:focus-visible{background:var(--v3-blue-d);color:#fff}
.btn-v3 .tri{width:14px;height:14px;fill:currentColor;transition:transform .18s ease-out}
[dir=rtl] .btn-v3 .tri{transform:none}
.btn-v3:hover .tri{transform:translateX(2px)}
.link-v3{display:inline-flex;align-items:center;min-height:44px;color:var(--v3-ink);font-family:"Heebo",sans-serif;font-weight:500;font-size:16px;
  text-decoration:underline;text-decoration-color:var(--v3-rule);text-underline-offset:6px;text-decoration-thickness:2px;transition:text-decoration-color .18s ease-out}
.link-v3:hover{text-decoration-color:var(--v3-blue);color:var(--v3-blue)}
:focus-visible{outline:3px solid var(--v3-blue);outline-offset:3px;box-shadow:0 0 0 6px #fff}
@media (prefers-reduced-motion: reduce){.btn-v3,.btn-v3 .tri,.link-v3,.nav nav a::after{transition:none}}

/* play triangle on the music cards */
.card-play svg{width:22px;height:22px;fill:currentColor;transition:transform .18s ease-out}
a.card:hover .card-play svg{transform:translateX(2px)}

/* 7. white / pale-blue alternation, like the flag's field and stripes */
.singles{background:#fff}
.albums{background:var(--v3-pale);position:relative}
.about{background:#fff}
.shows{background:var(--v3-pale)}
.gallery{background:#fff}
.music{background:var(--v3-pale)}
.contact{background:#fff}
.gutter{display:none}
/* 5. the fabric weave, behind the albums */
.albums::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  background-image:repeating-linear-gradient(0deg,rgba(10,30,74,.015) 0 1px,transparent 1px 6px),
                   repeating-linear-gradient(90deg,rgba(10,30,74,.015) 0 1px,transparent 1px 6px)}
.albums > *{position:relative}
/* 2. the silver pole line beside readable blocks */
.about-text{border-inline-start:1px solid var(--v3-rule);padding-inline-start:28px}
.toc{border-inline-start:1px solid var(--v3-rule)}

/* the Psalm, now beside the invitation to sing together */
.psalm{margin:0 0 18px;font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:48px;line-height:1.2;color:var(--v3-blue)}
.psalm small{display:block;margin-top:6px;font-family:"Heebo",sans-serif;font-weight:500;font-size:14px;color:var(--v3-soft)}

/* ---------- mobile ---------- */
@media (max-width:767px){
  .hero-v3{padding:88px 24px 40px}
  .hv3-grid{grid-template-columns:1fr;grid-template-areas:"name" "desc" "flag" "pause" "row";column-gap:0}
  .hv3-name{font-size:clamp(64px,20.5vw,80px);line-height:1.1;white-space:nowrap}
  .hv3-desc{margin:8px 0 16px;font-size:16px;line-height:24px;flex-wrap:wrap}
  .hv3-flag{aspect-ratio:342/260}
  .motion-v3{justify-self:start;margin:4px 0 12px}
  .hv3-row{gap:16px}
  .hv3-photo{width:128px;height:160px}
  .btn-v3{width:190px}
  .psalm{font-size:32px}
}

/* ================================================================
   HERO CINEMA v3: the flag is the whole background; the title floats on it.
   ================================================================ */
.hero-v3.cinema{padding:0;height:100svh;min-height:600px;background:#fff;position:relative;overflow:hidden}
.cinema .hv3-grid{max-width:none;height:100%;display:block;position:relative}
.cinema .hv3-flag{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;transform:none!important}
.cinema .hv3-text{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  position:absolute;inset:0;z-index:3;padding:0 24px 9vh;pointer-events:none}
.cinema .hv3-text > *{pointer-events:auto}
/* a soft white veil (no box) so the title reads over the moving cloth */
.cinema .hv3-text::before{content:"";position:absolute;inset-inline:0;bottom:0;height:62%;z-index:-1;
  background:radial-gradient(70% 85% at 50% 82%,rgba(255,255,255,.97) 0%,rgba(255,255,255,.86) 40%,rgba(255,255,255,0) 78%)}
.cinema .hv3-name{font-size:clamp(76px,10.5vw,168px);line-height:1;font-weight:900;color:var(--v3-blue);white-space:nowrap}
.cinema .hv3-desc{justify-content:center;margin:20px 0 0;font-size:19px}
.cinema .hv3-row,.cinema .hv3-photo{display:none}
.cinema .motion-v3{position:absolute;bottom:18px;inset-inline-start:24px;z-index:4;background:rgba(255,255,255,.8);border-radius:4px}
@media (max-width:767px){
  .hero-v3.cinema{height:92svh}
  .cinema .hv3-text{padding-bottom:11vh}
  .cinema .hv3-name{font-size:clamp(62px,19vw,84px)}
  .cinema .hv3-text::before{height:58%;background:radial-gradient(95% 80% at 50% 78%,rgba(255,255,255,.97) 0%,rgba(255,255,255,.85) 45%,rgba(255,255,255,0) 80%)}
}
/* header: readable Hebrew, no Latin letter-spacing, a quiet language link */
.nav nav a{font-family:"Heebo",sans-serif!important;font-size:16px!important;letter-spacing:0!important;text-transform:none!important;font-weight:500!important}
.lang-toggle{border:0!important;background:none!important;font-family:"Heebo",sans-serif!important;font-size:15px!important;letter-spacing:0!important;
  text-decoration:underline;text-underline-offset:4px;padding:6px 4px!important;color:var(--v3-blue)!important}
.brand{font-family:"Frank Ruhl Libre",serif!important;font-weight:900!important;font-size:24px!important;color:var(--v3-blue)!important}
.brand::before,.brand::after{display:none!important}
/* the sentence we love: Psalm 133, the film's tagline under the name */
.hv3-psalm{margin:14px 0 0;font-family:"Frank Ruhl Libre",serif;font-weight:700;color:var(--v3-ink);
  font-size:clamp(30px,3.6vw,54px);line-height:1.15}
.hv3-psalm .w{display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .hv3-psalm .w{opacity:0;transform:translateY(10px);animation:psalmIn .7s var(--v3-ease) forwards}
  .hv3-psalm .w:nth-child(1){animation-delay:.25s}.hv3-psalm .w:nth-child(2){animation-delay:.4s}
  .hv3-psalm .w:nth-child(3){animation-delay:.55s}.hv3-psalm .w:nth-child(4){animation-delay:.7s}
  .hv3-psalm .w:nth-child(5){animation-delay:.85s;color:var(--v3-blue)}
}
@keyframes psalmIn{to{opacity:1;transform:none}}
.hv3-psalm .w:nth-child(5){color:var(--v3-blue)}
@media (max-width:767px){ .hv3-psalm{font-size:clamp(26px,8vw,34px)} }
.cinema .hv3-name{align-self:center;margin:0}
.cinema .hv3-psalm{margin-top:12px}
/* the header floats above the cloth on a soft white glass */
body:has(.hero-v3.cinema) .nav{background:rgba(255,255,255,.78);backdrop-filter:saturate(1.3) blur(12px);-webkit-backdrop-filter:saturate(1.3) blur(12px)}
@media (max-width:767px){
  .cinema .hv3-text::before{height:66%;background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.82) 38%,rgba(255,255,255,.95) 70%,#fff 100%)}
}
.cinema .hv3-flag .flag-still{object-fit:cover}

/* ================================================================
   HERO CINEMA v4 (Astra critique, 10/3): one lit opening shot
   ================================================================ */
/* a soft pool of light behind the lettering, the cloth stays visible around it */
.cinema .hv3-text::before{display:none}
.cinema .hv3-grid::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 560px 230px at 50% 74%,rgb(255 255 255/.90) 0%,rgb(255 255 255/.78) 35%,rgb(255 255 255/.28) 65%,transparent 100%)}
.cinema .hv3-text{z-index:3;padding-bottom:8svh}
/* refined Hebrew: the name as a signature, the Psalm as its answer */
.cinema .hv3-name{font-weight:700;font-size:clamp(88px,9.5vw,152px);line-height:1.02;letter-spacing:0;word-spacing:.02em;color:#0038B8}
.cinema .hv3-psalm{font-weight:500;font-size:clamp(32px,3vw,46px);line-height:1.2;margin-top:12px;color:#15284B}
.cinema .hv3-psalm .w:nth-child(5){color:#0038B8}
.cinema .hv3-desc{font-family:"Heebo",sans-serif;font-weight:400;font-size:17px;line-height:26px;color:#425573;margin-top:20px}
.cinema .hv3-desc .stripes2{width:22px;height:8px;
  background:linear-gradient(#0038B8,#0038B8) 0 0/100% 1.5px no-repeat,linear-gradient(#0038B8,#0038B8) 0 6px/100% 1.5px no-repeat}
/* the Psalm arrives as one complete thought */
@media (prefers-reduced-motion: no-preference){
  .hv3-psalm .w{opacity:1;transform:none;animation:none}
  .cinema .hv3-psalm{opacity:0;transform:translateY(4px);animation:psalmIn .7s var(--v3-ease) .3s forwards}
}
/* one musical invitation */
.hv3-listen{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin-top:20px;color:#0038B8;text-decoration:none;
  font-family:"Heebo",sans-serif;font-weight:500;font-size:15px;background:none;border:0;transition:color .18s ease-out}
.hv3-listen svg{width:10px;height:10px;fill:currentColor;transition:transform .18s ease-out}
.hv3-listen:hover{color:#00268A}.hv3-listen:hover svg{transform:translateX(2px)}
.hv3-listen span{border-bottom:1px solid rgba(0,56,184,.35);padding-bottom:2px}
/* pause: a quiet utility */
.cinema .motion-v3{background:none;border-radius:0;font-size:13px;min-height:44px;bottom:calc(16px + env(safe-area-inset-bottom))}
/* header integrated with the scene; double-stripe details at a matching scale */
body:has(.hero-v3.cinema) .nav:not(.scrolled){background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,0));
  backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0}
body:has(.hero-v3.cinema) .nav.scrolled{background:rgba(255,255,255,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.brand{font-weight:700!important;font-size:22px!important}
.nav nav a{font-weight:400!important;font-size:15px!important}
.nav-toggle{border:0!important;width:44px;height:44px}
body:has(.hero-v3.cinema) .thread,body:has(.hero-v3.cinema) .thread-bead{display:none}
@media (max-width:767px){
  .hero-v3.cinema{height:100svh}
  .cinema .hv3-text{top:55svh;bottom:auto;justify-content:flex-start;padding:0 20px}
  .cinema .hv3-grid::after{background:radial-gradient(ellipse 340px 190px at 50% 66%,rgb(255 255 255/.92) 0%,rgb(255 255 255/.8) 35%,rgb(255 255 255/.3) 65%,transparent 100%)}
  .cinema .hv3-name{font-size:clamp(58px,18.6vw,78px)}
  .cinema .hv3-psalm{font-size:clamp(25px,7.4vw,31px)}
  .cinema .hv3-desc{font-size:16px;line-height:24px;margin-top:12px}
}
.cinema .hv3-grid::after{background:radial-gradient(ellipse 820px 330px at 50% 76%,rgb(255 255 255/.96) 0%,rgb(255 255 255/.9) 38%,rgb(255 255 255/.55) 62%,rgb(255 255 255/.12) 82%,transparent 100%)}
@media (max-width:767px){
  .cinema .hv3-grid::after{background:radial-gradient(ellipse 340px 190px at 50% 66%,rgb(255 255 255/.92) 0%,rgb(255 255 255/.8) 35%,rgb(255 255 255/.3) 65%,transparent 100%)}
}