/* ============================================================================
   JEWISH  ·  "Broadcast Poster / Tangerine Festival"   (PROMPT_0820, 2026-07-10)

   The same design system as havanagila.org and jewishhit.com, wearing the film's
   own palette: warm cream paper, three festival bands, deep garnet ink, thick ink
   rules and hard offset shadows. Nunito only. Light, warm, festive. Never dark.

   This sheet is loaded AFTER every page's inline <style> block, so it has the last
   word over the page-level shims without any of them being rewritten. It is a SKIN:
   colour, borders, shadows and the brand block. Page structure, copy and the
   typographic scale in site.css :root are untouched, so tools/design_gate.py still
   measures the same geometry.

   Palette (contrast measured on cream and all three bands, see site.css :root):
     ink       #8E1E4F  garnet      text, borders, offset shadows
     ink-soft  #9C3F6B  rosewood    small secondary text
     rose      #B4557F  rose        large text and decoration only
     gold-ink  #A61E4D  ruby        eyebrows, small links, small accent text
     red       #C2255C  crimson     buttons, focal fills
     gold      #E8590C  tangerine   large accent, rings, decoration
     marigold  #F59F00  amber       offset shadows, discs, rules (decorative only)
     bands     #FFE8CC  #FFD8A8  #FCD5E4
   ========================================================================== */

:root{
  /* page-level shim vars, re-asserted here so /film and /testimonials (whose inline
     <style> blocks reference them but never declared a :root) stop rendering with
     undefined custom properties. */
  --title:var(--ink);
  --title-deep:var(--red-deep);
  --band-deep:var(--gold-ink);
  --border:var(--ink);
  --border-strong:var(--ink);
  --radius:10px;
  --radius-lg:12px;
  --radius-xl:14px;
  --accent:var(--marigold);
  --accent-deep:var(--red);
  --accent-tint:rgba(245,159,0,.30);
  --accent-glow:rgba(245,159,0,.34);
  --cream-shade:var(--band-2);
  --cream-tint:#FFF3E4;
  --cream-deeper:var(--band-2);
  --ink-faint:var(--rose);
  --band-peach-fill:var(--band-2);
  --band-pistachio-deep:var(--gold-ink);
  /* hard offset shadows are the signature of the poster system */
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-md:6px 6px 0 var(--ink);
  --shadow-lg:8px 8px 0 var(--ink);
  --shadow-gold:5px 5px 0 var(--marigold);
  --rule:4px solid var(--ink);
}

/* A single soft festival wash. Fixed + z-index:-1, so it adds zero page height. */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(120% 66% at 50% -12%, rgba(245,159,0,.16), rgba(245,159,0,0) 58%),
    radial-gradient(72% 54% at 100% -6%, rgba(252,213,228,.55), rgba(252,213,228,0) 62%);
}
::selection{background:var(--band-2);color:var(--ink)}
a:focus-visible,button:focus-visible,:focus-visible{outline:3px solid var(--red);outline-offset:3px}

.skip-link{background:var(--ink);color:var(--cream);border:0;border-radius:0 0 8px 8px}

/* ---------------------------------------------------------------- header ---- */
.site-header{
  background:var(--cream);
  border-bottom:var(--rule);
  box-shadow:none;
}

/* LOGO-DOMAIN RULE: the domain IS the logo, loud. The tagline sits under it, quiet. */
.brand{
  display:inline-flex;align-items:center;gap:11px;
  letter-spacing:normal;text-decoration:none;color:var(--ink);
}
.brand::after{display:none}          /* the old burgundy dot */
.brand .brand-dot{display:none}      /* /film's variant of the same dot */
.brand .brand-sub{display:none}      /* superseded by .brand-motto */
.brand:hover{text-decoration:none}
.brand-wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:1px;line-height:1.04}
.brand-name{
  font-weight:900;font-size:clamp(20px,1.8vw,26px);
  letter-spacing:-.015em;white-space:nowrap;
}
.bn-a{color:var(--ink)}
.bn-b{color:var(--red)}
.brand-motto{
  font-weight:700;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft);white-space:nowrap;
}

.site-nav a,.footer-nav a{color:var(--ink-soft);font-weight:800}
.site-nav a:hover,.footer-nav a:hover{color:var(--red)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--marigold)}
/* on /film the brand sits INSIDE .site-nav, where site.css's link rules would
   shrink it to 12px uppercase nav type. Put the wordmark back. */
.site-nav a.brand,.site-nav a.brand:hover{
  font-size:inherit;letter-spacing:normal;text-transform:none;
  padding:0;border-bottom:0;color:var(--ink);
}

/* ---------------------------------------------------------------- buttons ---- */
.btn{
  background:var(--ink);color:var(--cream);
  border:3px solid var(--ink);border-radius:8px;
  box-shadow:5px 5px 0 var(--red);
  padding:11px 28px;
}
.btn:hover{background:var(--red-deep);border-color:var(--red-deep);color:var(--cream);box-shadow:5px 5px 0 var(--marigold)}
.btn.ghost{background:var(--cream);color:var(--ink);border:3px solid var(--ink);box-shadow:var(--shadow-gold);padding:11px 26px}
.btn.ghost:hover{background:var(--band-1);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--red)}

/* --------------------------------------------------------- labels + links ---- */
.eyebrow,.section-label,.k,.l,.footer-eco-label,.footer-col-heading,
.key-numbers h2,.related h2,.about-links h2,.reviews h2,.lyrics h2,
.voices-head,.proof-l,.opening-audio-label{color:var(--gold-ink)}
.section-label::after{background:linear-gradient(90deg,var(--gold),rgba(232,89,12,.10))}
.eyebrow.center::before{background:linear-gradient(90deg,rgba(232,89,12,0),var(--gold))}
.eyebrow.center::after{background:linear-gradient(90deg,var(--gold),rgba(232,89,12,0))}

.char-link,.kn-title a,.about-links a,.track-story,.track-player-link,.song-embed-link{
  text-decoration-color:var(--marigold);
}
.char-link:hover,.kn-title a:hover,.about-links a:hover,.track-story:hover,
.track-player-link:hover,.song-embed-link:hover{color:var(--red);text-decoration-color:var(--red)}
.track-story,.track-player-link,.song-embed-link,.kn-title a{color:var(--gold-ink)}

/* ------------------------------------------------------------------ bands ---- */
.banded{
  background:var(--band-1);
  border-top:var(--rule);border-bottom:var(--rule);
  box-shadow:none;
}
/* the home page reads as a poster: cream, apricot, rose, amber, then the footer */
#demo{background:var(--band-3);border-top:var(--rule);border-bottom:var(--rule)}
#support-preview{background:var(--band-2);border-top:var(--rule)}

/* ------------------------------------------------------------- home  hero ---- */
.hero{background:var(--cream)}
.hero-disc{background:var(--marigold);border:4px solid var(--ink)}
.hero-ring{border:3px solid var(--gold);opacity:.7}
.hero-title{
  color:var(--gilt);
  text-transform:uppercase;
  text-shadow:5px 5px 0 var(--marigold);
}
.hero-stat{color:var(--red)}
.logline{color:var(--ink)}
.logline-2,.hero-context{color:var(--ink-soft)}
@media (max-width:760px){.hero-disc,.hero-ring{display:none}}

/* -------------------------------------------------------- poster surfaces ---- */
/* one shared card language: cream face, thick garnet rule, hard offset shadow */
.q,
.lane,
.key-numbers,
.act-card,
.crossing-panel,
.quick-list div,
.tcard,
.audience-card,
.demo-card,
.strategy-col,
.materials-list li,
.role-card,
.contact-card,
.anc-card,
.ask-card,
.tier,
.lane-card,
.vcard,
.stat,
.short-card,
.image-panel,
.footer-eco-links a{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}
.short-card{background:var(--band-2)}
.stat{background:var(--band-1)}
.q{border-left:9px solid var(--marigold)}
.tcard{border-left:9px solid var(--marigold)}
.lane:hover,.demo-card:hover,.footer-eco-links a:hover{
  transform:translateY(-2px);
  box-shadow:8px 8px 0 var(--red);
  border-color:var(--ink);
}
.section-title,.pull-line,.core-line{color:var(--ink);font-weight:900}
.lede,.sub,.q cite,.demo-more,.timeline-note,.disclaimer,.tracklist-note,
.reviews-intro,.lyrics-intro,.voices-sub,.footer-note,.footer-copy,
.cast-role,.related-role,.track-origin,.track-feat,.kn-note,.album-blurb,
.opening-caption,.opening-audio-credit,.footer-eco-note,.footer-tag{color:var(--ink-soft)}
.proof-n,.threshold b{color:var(--red)}
.proof-line{color:var(--ink)}
.definition{
  background:var(--band-1);
  border-left:9px solid var(--red);
  border-radius:0 12px 12px 0;
  color:var(--ink);
}
.go,.lane .go,.ask-cta{color:var(--red);font-weight:900}

/* cinematic stills: garnet scrim instead of the old espresso one */
.still,.demo-embed{border:3px solid var(--ink);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);background:var(--band-2)}
.still::after{background:linear-gradient(to top,rgba(74,12,40,.88) 0%,rgba(74,12,40,.58) 18%,rgba(74,12,40,.14) 42%,rgba(74,12,40,0) 64%)}
.demo-embed::after{background:linear-gradient(to top,rgba(74,12,40,.58),rgba(74,12,40,.04) 55%)}
.still-label,.still-sub,.demo-cap .t,.demo-cap .s{color:#FFF9F2;text-shadow:0 1px 10px rgba(74,12,40,.7)}
.demo-play span{background:var(--red);box-shadow:0 0 0 8px rgba(194,37,92,.24),6px 6px 0 var(--ink)}
.demo-embed:hover .demo-play span{background:var(--red-deep)}
.demo-play span::after{border-color:transparent transparent transparent #FFF9F2}

/* ------------------------------------------------------------------- cast ---- */
.cast-thumb{border:3px solid var(--ink)}
.cast-thumb:hover{border-color:var(--red);box-shadow:0 0 0 4px rgba(245,159,0,.45)}
.cast-thumb.mono{background:var(--band-2);border:3px solid var(--ink);color:var(--gold-ink)}
.cast-name,.related-name,.track-title,.voice-name{color:var(--ink)}
.related-thumb{border:2px solid var(--ink)}
.related-thumb.mono{background:var(--band-2);border-color:var(--ink);color:var(--gold-ink)}

/* -------------------------------------------------------------------- bio ---- */
.bio-portrait img,.album-art,.voice-photo,.opening-img{border:3px solid var(--ink);box-shadow:var(--shadow-md)}
.monogram{background:var(--band-2);border:3px solid var(--ink);box-shadow:var(--shadow-md)}
.monogram::after{border-color:rgba(142,30,79,.45)}
.monogram-star{color:var(--red)}
.monogram-letters{color:var(--gold-ink)}
.monogram-word{color:var(--ink-soft)}
.tagline{color:var(--red);font-style:normal;font-weight:700}
.back-link{color:var(--ink-soft)}
.back-link:hover{color:var(--red)}

/* ------------------------------------------------------------------ music ---- */
.track{border-bottom:2px solid var(--line)}
.track:target{background:var(--band-1)}
.track-num{color:var(--gold-ink)}
.track-play{color:var(--ink);border:2px solid var(--ink);font-weight:900}
.track-play:hover,.track-play[aria-expanded="true"]{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.track-player-frame,.song-embed-frame{border:3px solid var(--ink);border-radius:var(--radius-lg);background:var(--band-2);box-shadow:var(--shadow-md)}
.track-player-close,.song-player-close{background:var(--cream);border:2px solid var(--ink);color:var(--ink)}
.track-player-close:hover,.song-player-close:hover{background:var(--red);color:var(--cream);border-color:var(--red)}
.song-player-btn{background:var(--red);box-shadow:5px 5px 0 var(--ink)}
.song-player-facade:hover .song-player-btn{background:var(--red-deep)}
.album-stat{color:var(--red)}
.album-meta h2{color:var(--ink)}

/* --------------------------------------------------------- song / reviews ---- */
.review{border-left:5px solid var(--marigold)}
.review-by{color:var(--gold-ink)}
.review-ru,.reviews-note,.song-native,.lyric-en{color:var(--ink-soft)}
.opening-audio{background:var(--band-1);border:3px solid var(--ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.snapshot-entry-title{color:var(--ink)}

/* ------------------------------------------------------------------- 404 ----- */
.nf-code{color:var(--red)}
.nf-title{color:var(--ink)}
.nf-lede{color:var(--ink-soft)}
.dot{background:var(--marigold)}

/* ---------------------------------------------------------------- footer ----- */
.site-footer{
  background:var(--cream);
  border-top:var(--rule);
  box-shadow:none;
}
/* the footer's two columns used to WRAP: .footer-nav's ten links made .footer-right
   too wide to sit beside .footer-left, so it dropped underneath and cost ~90px of
   fold on every page. Let the nav wrap inside its own column instead. */
.footer-inner{flex-wrap:nowrap;gap:28px}
.footer-left{flex:1 1 52%;min-width:0}
.footer-right{flex:0 1 auto;min-width:0}
.footer-nav{flex-wrap:wrap;justify-content:flex-end;gap:2px 20px}
@media (max-width:760px){
  .footer-inner{flex-wrap:wrap}
  .footer-nav{justify-content:flex-start}
}
.foot-brand{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.04;text-decoration:none}
.foot-brand:hover{text-decoration:none}
.foot-brand .brand-name{font-size:clamp(22px,2.1vw,30px)}
.footer-cross a{color:var(--gold-ink);border-bottom:2px solid var(--marigold);text-decoration:none}
.footer-cross a:hover{color:var(--red);border-bottom-color:var(--red)}
.footer-world{margin:6px 0 0;font-size:12.5px;color:var(--ink-soft)}
/* inline label, not a block: /cast and /music are held to the design gate's
   no-scroll fold and cannot afford an extra footer line. */
.footer-world b{
  margin-right:10px;
  font-size:var(--label);font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);
}
.footer-world a{color:var(--ink);font-weight:800;text-decoration:none;border-bottom:2px solid var(--marigold)}
.footer-world a:hover{color:var(--red);border-bottom-color:var(--red)}

/* ===========================================================================
   /film and /testimonials ship an older chrome vocabulary (site-nav-inner,
   nav-toggle, #primary-menu, footer-ecosystem) that was styled by the retired
   root /site.css. They were migrated to /assets/css/site.css without it, so the
   nav rendered as a raw numbered list. Their markup is intentionally left alone;
   the missing components are supplied here, in the poster language.
   =========================================================================== */
.site-nav-inner{
  max-width:1100px;margin:0 auto;
  padding-top:14px;padding-bottom:14px;padding-left:28px;padding-right:28px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.site-nav[data-open] ol#primary-menu{
  list-style:none;margin:0;padding:0;
  display:flex;align-items:center;gap:26px;
}
.site-nav a.nav-link{
  display:inline-block;
  padding-top:6px;padding-bottom:4px;
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  border-bottom:2px solid transparent;white-space:nowrap;
}
.site-nav a.nav-link:hover{color:var(--red)}
.site-nav a.nav-link.active,.site-nav a.nav-link[aria-current="page"]{color:var(--ink);border-bottom-color:var(--marigold)}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  font:inherit;font-weight:900;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--cream);
  border:3px solid var(--ink);border-radius:8px;box-shadow:3px 3px 0 var(--marigold);
  padding:9px 15px;min-height:44px;cursor:pointer;line-height:1;
}
.nav-toggle:hover{background:var(--band-1)}
.nav-toggle .nav-toggle-bars{display:inline-flex;flex-direction:column;gap:3px;width:18px}
.nav-toggle .nav-toggle-bars span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px}
.site-nav[data-open="true"] .nav-toggle .label-open{display:none}
.site-nav[data-open="false"] .nav-toggle .label-close{display:none}

footer.site-footer:has(.footer-ecosystem){padding-top:16px;padding-bottom:8px}
footer.site-footer .footer-inner:has(.footer-col){
  max-width:1100px;margin:0 auto;padding-left:28px;padding-right:28px;
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:36px;align-items:start;
}
.footer-brand{margin:0 0 4px;font-weight:900;font-size:clamp(22px,2.1vw,30px);letter-spacing:-.015em;line-height:1.04;color:var(--ink)}
.footer-tag{margin:0;font-size:13.5px;line-height:1.55;max-width:30ch}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.footer-col a{color:var(--ink);font-weight:800;font-size:13.5px;text-decoration:none;border-bottom:2px solid transparent}
.footer-col a:hover{color:var(--red);border-bottom-color:var(--marigold)}
.footer-col-heading{margin:0 0 12px;font-size:var(--label);font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.footer-ecosystem{max-width:1100px;margin:28px auto 0;padding:24px 28px 0;border-top:2px solid var(--line)}
.footer-eco-label{margin:0 0 14px;font-size:var(--label);font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.footer-eco-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.footer-eco-links a{display:grid;gap:5px;padding:16px 18px;text-decoration:none}
.footer-eco-name{font-weight:900;font-size:16px;color:var(--ink)}
.footer-eco-flag{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.footer-eco-flag.is-live{color:var(--gold-ink)}
.footer-eco-note{font-size:13px;line-height:1.5}
.footer-bottom{max-width:1100px;margin:22px auto 0;padding:0 28px 26px;font-size:13px;color:var(--ink-soft)}

@media (max-width:900px){
  .footer-eco-links{grid-template-columns:1fr}
  footer.site-footer .footer-inner:has(.footer-col){grid-template-columns:1fr}
  .site-nav-inner{flex-wrap:wrap;gap:12px;padding-left:18px;padding-right:18px}
  .nav-toggle{display:inline-flex}
  .site-nav[data-open="false"] ol#primary-menu{display:none}
  .site-nav[data-open="true"] ol#primary-menu{flex-basis:100%;flex-direction:column;align-items:stretch;gap:0}
  .site-nav[data-open="true"] a.nav-link{display:block;padding-top:13px;padding-bottom:13px;border-bottom:1px solid var(--line)}
}

/* --------------------------------------------------------------- mobile ----- */
@media (max-width:560px){
  .brand{gap:9px}
  .brand-name{font-size:19px}
  .brand-motto{font-size:9.5px;letter-spacing:.11em}
  .btn,.btn.ghost{box-shadow:4px 4px 0 var(--red)}
  .btn.ghost{box-shadow:4px 4px 0 var(--marigold)}
  .q,.lane,.key-numbers,.act-card,.crossing-panel,.tcard,.audience-card,
  .demo-card,.strategy-col,.role-card,.contact-card,.anc-card,.ask-card,
  .tier,.lane-card,.vcard,.stat,.short-card,.image-panel,.footer-eco-links a{box-shadow:4px 4px 0 var(--ink)}
  .hero-title{text-shadow:4px 4px 0 var(--marigold)}
}

/* ------------------------------------------------- short desktop windows ----- */
/* Volodya's real maximized Chrome is 1463x688 CSS px (175% Windows scaling), and
   tools/design_gate.py holds /cast and /music to a no-scroll fold there. The poster
   chrome (two-line wordmark, thick rules) plus a footer that has grown line by line
   does not fit that fold at default sizes, so it compacts on short windows.
   Nothing is hidden: every line of copy stays on the page. */
@media (min-width:761px) and (max-height:730px){
  .header-inner{padding-top:11px;padding-bottom:11px}
  .page-head{padding-top:10px}
  .page-pad{padding-bottom:16px}
  .cast-section{margin-top:6px}
  .cast-grid{gap:9px 14px}
  .footer-inner{padding-top:7px;padding-bottom:9px}
  .foot-brand .brand-name{font-size:21px}
  .foot-brand .brand-motto{font-size:9.5px}
  .footer-note{margin-top:4px}
  .footer-cross,.footer-world{margin-top:2px}
  .footer-copy{margin-top:5px}
  .footer-nav{gap:0 20px}
}

@media (prefers-reduced-motion: reduce){
  .lane:hover,.demo-card:hover,.footer-eco-links a:hover{transform:none}
}