/* קולנוע טרב — the room's own colours, dark house style
 *
 * Red walls and ceiling, a gold stage wall, green curtains. The palette below
 * is DERIVED from those three by tools/build_theme.py and rewritten on every
 * build — edit the colours in the admin panel (data/films.json → venue.theme),
 * never here. Structural tones keep the luminance of the original hand-tuned
 * palette, so re-hueing the room cannot move any contrast ratio; text tones are
 * lifted until they clear 4.5:1. See the script for the full reasoning.
 */

/* ==== נוצר על ידי tools/build_theme.py — אין לערוך ידנית ==== */
:root {
  /* החדר — הרקע, המשטחים, קווי ההפרדה וגבולות הפקדים */
  --bg:          #1B2C25;
  --bg-2:        #233930;
  --surface:     #274035;
  --surface-raised: #325144;   /* 1.67:1 מול הרקע — מספיק כדי שכרטיס ייראה כמו כרטיס */
  --line:        #3C6151;
  --line-soft:   #2A453A;
  --title:       #C38A73;   /* שמות הפריטים — 3.0:1 */
  --edge:        #74A38F;   /* גבול פקד — 5.1:1 על הרקע, 4.0:1 על משטח, 4.3:1 על bg-2 */
  --bg-veil:     rgba(27, 44, 37, .9);
  --glow:        rgba(89, 145, 121, .07);

  /* דיו */
  --ink:         #EDE9DF;   /* 7.2:1 */
  --ink-dim:     #BDBAAF;   /* 4.5:1 */
  --ink-faint:   #BCBAB2;   /* 4.5:1 */

  /* זהב הבמה — ההדגשה הראשית: תאריכים, כפתורים, קישורים, פוקוס */
  --gold:        #D8B74A;   /* 4.5:1 */
  --gold-lift:   #DEC367;
  --gold-dim:    #AA985F;   /* 5.1:1 */
  --gold-wash:   rgba(212, 175, 55, .12);
  --on-gold:     #14140E;   /* 9.5:1 */

  /* גוון החדר כטקסט — לשימוש נדיר, כשצריך לסמן על משטח */
  --jade:        #A1C1B3;   /* 4.5:1 */
  --jade-dim:    #889E95;   /* 5.1:1 */
  --jade-wash:   rgba(89, 145, 121, .14);
  --on-jade:     #14140E;   /* 9.5:1 */

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23D8B74A' stroke-width='1.5'/%3E%3C/svg%3E");
}

:root[data-mode="light"] {
  /* החדר — הרקע, המשטחים, קווי ההפרדה וגבולות הפקדים */
  --bg:          #E1EBE6;
  --bg-2:        #D0E0D9;
  --surface:     #F7FAF9;
  --surface-raised: #FCFDFC;   /* 1.20:1 מול הרקע — מספיק כדי שכרטיס ייראה כמו כרטיס */
  --line:        #A6C4B7;
  --line-soft:   #C8DBD3;
  --title:       #96320B;   /* שמות הפריטים — 5.6:1 */
  --edge:        #52856F;   /* גבול פקד — 3.5:1 על הרקע, 4.0:1 על משטח, 3.1:1 על bg-2 */
  --bg-veil:     rgba(225, 235, 230, .9);
  --glow:        rgba(89, 145, 121, .05);

  /* דיו */
  --ink:         #1C1613;   /* 13.1:1 */
  --ink-dim:     #4C433C;   /* 7.1:1 */
  --ink-faint:   #6A5F57;   /* 4.5:1 */

  /* זהב הבמה — ההדגשה הראשית: תאריכים, כפתורים, קישורים, פוקוס */
  --gold:        #745F1E;   /* 4.5:1 */
  --gold-lift:   #615019;
  --gold-dim:    #8B7C4D;   /* 3.4:1 */
  --gold-wash:   rgba(212, 175, 55, .12);
  --on-gold:     #FFF8EC;   /* 5.9:1 */

  /* גוון החדר כטקסט — לשימוש נדיר, כשצריך לסמן על משטח */
  --jade:        #406756;   /* 4.7:1 */
  --jade-dim:    #678075;   /* 3.5:1 */
  --jade-wash:   rgba(89, 145, 121, .14);
  --on-jade:     #FFF8EC;   /* 6.0:1 */

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23745F1E' stroke-width='1.5'/%3E%3C/svg%3E");
}
/* ==== סוף האזור הנוצר ==== */

/* --- everything below here is hand-written and survives the build */

/* The brand faces, served from our own domain. Self-hosting drops the Google
   Fonts request the site used to make on every page load, and woff2 puts each
   cut at 11–19KB. tools/build_fonts.py converts them from the delivered files.

   Ogen is the display family — sharp, geometric, two cuts. Shefa is the text
   family — four cuts including a true italic, which is what running prose wants.
   Neither goes past 700, so nothing here may ask for 900: the browser answers
   that by smearing a synthetic bold. */
@font-face {
  font-family: 'Ogen'; src: url('../assets/fonts/ogen-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Ogen'; src: url('../assets/fonts/ogen-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shefa'; src: url('../assets/fonts/shefa-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shefa'; src: url('../assets/fonts/shefa-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Shefa'; src: url('../assets/fonts/shefa-400i.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Shefa'; src: url('../assets/fonts/shefa-700i.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  --display: 'Ogen', system-ui, sans-serif;
  --body:    'Shefa', system-ui, sans-serif;

  /* Two ramps from one 17px base, and every size on the site is one of them.
     Above the body text the steps are 1.25 apart — headings need to announce
     themselves. Below it they are 1.125 apart, because labels, meta and buttons
     live within a few pixels of each other and a 25% jump there is a cliff.
     One ratio for the whole range is a rule that reads well and sets badly.

     In rem, not px, so the accessibility widget's text-size control still
     scales the entire system proportionally. */
  --t--4: 0.663rem;   /* 10.6px — the quietest label   */
  --t--3: 0.746rem;   /* 11.9px — tags, fine print     */
  --t--2: 0.839rem;   /* 13.4px — meta, times, buttons */
  --t--1: 0.944rem;   /* 15.1px — secondary UI text    */
  --t-0:  1.0625rem;  /* 17px   — body                 */
  --t-1:  1.328rem;   /* 21.3px — subheading           */
  --t-2:  1.660rem;   /* 26.6px — section heading      */
  --t-3:  2.075rem;   /* 33.2px — large heading        */
  --t-4:  2.594rem;   /* 41.5px — item title           */

  /* One rhythm for vertical space, so nothing is nudged by hand */
  --s-1: .35rem; --s-2: .75rem; --s-3: 1.25rem; --s-4: 2rem; --s-5: 3rem;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --measure: 78rem;
  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* the red ceiling bleeding down over the top of the page */
  background-image: radial-gradient(70% 32% at 50% -6%, var(--glow), transparent 70%);
  background-repeat: no-repeat;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { display: block; max-width: 100%; }

/* off-screen offsets leak into the RTL scroll width — clip it instead */
.skip {
  position: fixed; top: 0; inset-inline-start: 0; z-index: 99;
  background: var(--gold); color: var(--on-gold); padding: .75rem 1.25rem; font-weight: 700;
  clip-path: inset(50%); white-space: nowrap;
}
.skip:focus { clip-path: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* --------------------------------------------------------------- top menu */
/* Not sticky on purpose — the filter bar already owns the top of the screen
   once you scroll, and two bars fighting for it is one too many. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .5rem var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.topbar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem clamp(.75rem, 3vw, 2rem); }
.topbar__nav a {
  font-family: var(--display); font-weight: 400; font-size: var(--t--2);
  letter-spacing: .04em; text-decoration: none; color: var(--ink);
  display: inline-block; padding: .45rem .25rem;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.topbar__nav a:hover { color: var(--ink); border-bottom-color: var(--gold); }
/* the handle spelled out was a fifth link competing with four words; the mark
   says the same thing and stops reading as navigation */
.topbar__ig { color: var(--gold); display: inline-flex; align-items: center; padding: .45rem .35rem; }
.topbar__ig:hover { border-bottom-color: transparent; }
.topbar__ig-icon { width: 20px; height: 20px; display: block; }

/* ---------------------------------------------------------------- header */
.head {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.75rem;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem);
}

/* --- בהיר / כהה. A display preference, not an accessibility control — which is
   why it rides in the menu bar and not in the widget. Built by JS, so it is
   never a dead button on a page whose scripts did not arrive. */
.mode {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 1px solid var(--edge); border-radius: 999px;
  color: var(--ink); font-family: var(--display); font-weight: 400;
  font-size: var(--t--3); line-height: 1.45; letter-spacing: .02em;
  padding: .4rem .8rem; cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.mode:hover { color: var(--ink); border-color: var(--gold-dim); background: var(--gold-wash); }
.mode svg { width: 15px; height: 15px; flex: none; }
/* on a phone the label crowds the logo; the aria-label carries the meaning */
@media (max-width: 34rem) {
  .mode__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mode { padding: .45rem; }
}
.head__logo img { width: clamp(190px, 30vw, 290px); height: auto; }

/* The gig side drops the megaphone and is just טרב. It is the same drawing with
   one shape removed, so the letters occupy 67.7% of the full mark's width —
   scaled by that exact factor here, they render at the same optical size as on
   the cinema side and the header does not jump when you switch between them. */
.head__logo .logo--bar { width: clamp(129px, 20.3vw, 196px); }
.foot__logo.logo--bar { width: 114px; }

/* The cream cut is drawn for a dark room and vanishes on paper. The ink cut is
   the same artwork; swapping it here rather than in the markup keeps the URL
   relative to the stylesheet, so it resolves from every page depth, and the
   <img> keeps its alt text either way. */
:root[data-mode="light"] .logo--cinema { content: url("../assets/logo/trav-ink.png"); }
:root[data-mode="light"] .logo--bar { content: url("../assets/logo/bar-ink.png"); }

/* The red only earns its place on the pale scheme. On the dark green it has to
   be lifted so far to clear the floor that it comes back as a dusty rose — a
   third near-cream competing with the two that are already there. On paper it
   is the wall colour itself and it sings. So: cream in the dark, red in the
   light, rather than one rule that is right in one place and limp in the other. */
:root[data-mode="light"] .film__title { color: var(--title); }

/* --- סרטים / הופעות switcher */
.switch {
  display: inline-flex; border: 1px solid var(--edge); border-radius: 999px;
  padding: .25rem; gap: .25rem; background: var(--bg-2);
}
.switch__tab {
  font-family: var(--display); font-weight: 700; font-size: var(--t--1);
  letter-spacing: .02em; text-decoration: none; color: var(--ink);
  padding: .5rem 1.5rem; border-radius: 999px;
  transition: background-color .2s, color .2s;
}
.switch__tab:hover { color: var(--ink); }
.switch__tab.is-on { background: var(--gold); color: var(--on-gold); }

/* the @ jumps to the wrong end of the handle under RTL — isolate it everywhere */
[data-venue="instagramHandle"] { direction: ltr; unicode-bidi: isolate; }

/* --- הבא בתור: the next date, answered before anyone has to scroll for it */
.next { margin: 0 0 clamp(2.5rem, 6vw, 4rem); padding: 0 var(--gutter); text-align: center; }
.next__link {
  display: inline-flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: .25rem .7rem;
  text-decoration: none; border: 1px solid var(--edge); border-radius: 999px;
  padding: .5rem 1.15rem; transition: border-color .2s, background-color .2s;
}
.next__link:hover { border-color: var(--gold-dim); background: var(--gold-wash); }
.next__label {
  font-family: var(--display); font-size: var(--t--4); font-weight: 400;
  letter-spacing: .06em; color: var(--ink);
}
.next__when { font-family: var(--display); font-weight: 700; font-size: var(--t--1); color: var(--gold); }
.next__title { font-family: var(--display); font-weight: 400; font-size: var(--t--1); color: var(--ink); }

/* ------------------------------------------------------------------ intro */
.intro {
  max-width: 46rem; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}
.intro__tag {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(var(--t-2), 5.5vw, var(--t-4)); line-height: 1.12; margin-bottom: .85rem;
  text-wrap: balance;
}
.intro__about { color: var(--ink); font-size: var(--t-0); text-wrap: pretty; margin-bottom: 0; }


/* ------------------------------------------------------------- filter bar */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-veil);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}
.bar__inner {
  max-width: var(--measure); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(.75rem, 2vw, 1.5rem);
  padding: .875rem var(--gutter);
}
.field { display: flex; align-items: center; gap: .625rem; }
.field__label {
  font-family: var(--display); font-size: var(--t--4); font-weight: 400;
  letter-spacing: .06em; color: var(--ink); white-space: nowrap;
}
.field select {
  appearance: none;
  background: var(--surface) var(--select-arrow) no-repeat left .85rem center;
  border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-family: var(--body); font-size: var(--t--1);
  padding: .5rem 2.25rem .5rem .9rem; min-width: 11rem; cursor: pointer;
}
.field select:hover { border-color: var(--gold-dim); }

.bar__note {
  margin: 0 auto 0 0; font-size: var(--t--2); color: var(--ink); white-space: nowrap;
}
.bar__reset {
  background: none; border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-family: var(--body); font-size: var(--t--2);
  padding: .4rem .9rem; cursor: pointer; transition: color .2s, border-color .2s;
}
.bar__reset:hover { color: var(--ink); border-color: var(--gold-dim); }

/* the two selects at their natural width overflow a phone — let them share the row */
@media (max-width: 46rem) {
  .bar__inner { gap: .5rem .75rem; padding-block: .75rem; }
  .field { flex: 1 1 45%; min-width: 0; }
  .field__label { display: none; }
  .field select { min-width: 0; width: 100%; }
  .bar__note { flex: 1 1 100%; margin: .25rem 0 0; text-align: center; }
  .bar__reset { flex: 1 1 100%; }
}

/* ------------------------------------------------------------------ films */
.films { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter); }

.film {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: 1fr;
  padding: clamp(3.25rem, 7vw, 5.5rem) 0;
  border-bottom: 1px solid var(--line-soft);
}

/* No box. A filled, bordered, rounded card is application furniture; a
   programme is an edited list, and it separates the way print does — with a
   hairline and with air. The room's red lives in the page itself and in the
   glow over the top of it, not in panels floating on top. */
@media (min-width: 62rem) {
  .film { grid-template-columns: 1.05fr 1fr; align-items: center; }
  /* scoped to the programme list — a film on its own page must not be flipped */
  .films > .film:nth-child(even) .film__media { order: 2; }
}

/* --- media */
.film__media { position: relative; }
.film__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line-soft);
}
.film__frame img.shot { width: 100%; height: 100%; object-fit: cover; }
/* portrait-only sources sit centred on a blurred bed of themselves */
.film__frame[data-fit="contain"] img.shot { object-fit: contain; position: relative; z-index: 1; }
.film__bed {
  position: absolute; inset: -8%; width: 116%; height: 116%;
  object-fit: cover; filter: blur(28px) saturate(1.25) brightness(.55); z-index: 0;
}
.film__poster {
  position: absolute; inset-block-end: -1.25rem; inset-inline-end: 1.25rem; z-index: 2;
  width: clamp(64px, 8vw, 92px); border-radius: 2px;
  border: 1px solid rgba(237,233,223,.22);
  box-shadow: 0 10px 26px rgba(0,0,0,.6);
}
@media (max-width: 40rem) { .film__poster { display: none; } }

/* --- body */

/* ── The card carries three type sizes and no more.
   Jaffa Cinema, which this programme was modelled on, puts 93.6% of every
   character on its page at a single size and reserves one step up for the
   title. Ours had reached seven sizes and seven greys inside one card, most of
   them stacked in two narrow strips — which is what "crowded" turns out to mean
   when you measure it. Title, body, and one label. That is the whole ramp. */
/* The rule closes the block of facts — title, original, credits, date — and the
   synopsis starts underneath it. The date was sitting on the far side of the
   line, orphaned between the credits it belongs with and the paragraph it does
   not, which is what made the stack read as big-small-big. */
.film__date {
  font-size: var(--t-0); line-height: 1.55; color: var(--ink);
  margin: 0 0 var(--s-3); padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line-soft);
}
.film__meta { font-size: var(--t-0); line-height: 1.6; color: var(--ink); margin: 0; }

/* the whole frame is a link to the film's own page */
.film__link { position: absolute; inset: 0; z-index: 3; }
.film__frame:hover img.shot { transform: scale(1.02); }
.film__frame img.shot { transition: transform .6s ease; }

.film__title { font-size: clamp(var(--t-1), 3.6vw, var(--t-3)); line-height: 1.05; margin-bottom: var(--s-1); text-wrap: balance; }
.film__title a { text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s; }
.film__title a:hover { border-bottom-color: var(--gold); }
.film__orig {
  font-family: var(--display); font-weight: 400; font-size: var(--t--1);
  letter-spacing: .04em; color: var(--ink); direction: ltr; text-align: right;
  font-size: var(--t-0); line-height: 1.4; margin-bottom: var(--s-2);
}

/* who is on stage — too long to sit inside the one-line meta row */
.film__lineup {
  font-size: var(--t-0); color: var(--ink); line-height: 1.6;
  margin-top: -.5rem; margin-bottom: var(--s-3);
}

.film__text { color: var(--ink); font-size: var(--t-0); line-height: 1.7; margin-bottom: var(--s-3); }
/* clamp the whole synopsis, not each paragraph inside it */
.film__text.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.film__text p:last-child { margin-bottom: 0; }

.film__more {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--display); font-weight: 400; font-size: var(--t-0); color: var(--ink);
  border-bottom: 1px solid var(--ink); margin-bottom: 1.5rem;
}
.film__more { position: relative; }
/* the underline is the affordance, so grow the target behind the text rather
   than padding the box and pushing the rule away from it */
.film__more::after { content: ''; position: absolute; inset: -.5rem -.75rem; }
.film__more:hover { color: var(--ink); border-bottom-color: var(--ink); }

.film__foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .5rem; }
/* The times line already separates doors from screening with a middot, so the
   two facts either side of it are the same kind of thing at the same level —
   one run of separators, not a dash announcing a different sort of break. Drawn
   in CSS so it disappears with the tag on a paid night, and marked aria-hidden
   so a screen reader is not read a punctuation mark. */
.tag + .film__times::before {
  content: "·"; margin-inline-end: .5rem; opacity: .6;
}
/* Set in the body face, like the doors line it sits next to — it was in the
   display face, which is what made it read as heavier than everything around it. */
.tag { font-size: var(--t-0); line-height: 1.55; color: var(--ink); }
/* Free entry is a fact about the evening, not a badge. A pill around two words
   asks the eye to stop for a label that is already sitting in a row of labels. */
.film__times { font-size: var(--t-0); line-height: 1.55; color: var(--ink); }

.film__actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.25rem; }
.act {
  display: inline-flex; align-items: center; gap: .5rem;
  background: none; border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-family: var(--display); font-weight: 700; font-size: var(--t-0);
  /* a <button> and an <a> disagree on line-height by default — pin it so the
     three actions line up at the same height */
  line-height: 1.45;
  padding: .5rem .95rem; cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.act:hover { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-wash); }

/* Both actions now look identical at rest and separate only under the pointer.
   Nothing is left to say which one leads — kept as a hook rather than deleted,
   because the class is still what js/core.js marks the calendar button with. */

.act svg { width: 15px; height: 15px; flex: none; }
.act__label { white-space: nowrap; }

/* --- share sheet */
.film__sharewrap { position: relative; }
.sheet {
  position: absolute; top: calc(100% + .5rem); inset-inline-start: 0; z-index: 30;
  min-width: 12rem; display: flex; flex-direction: column;
  background: #14140F; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 18px 44px rgba(0,0,0,.7); overflow: hidden;
}
.sheet__item {
  background: none; border: 0; border-bottom: 1px solid var(--line-soft);
  text-align: start; text-decoration: none;
  color: var(--ink); font-family: var(--body); font-size: var(--t--1);
  padding: .7rem 1rem; cursor: pointer; transition: background-color .15s, color .15s;
}
.sheet__item:last-child { border-bottom: 0; }
.sheet__item:hover, .sheet__item:focus-visible { background: var(--gold-wash); color: var(--ink); }
.sheet__item--copy { color: var(--ink); font-size: var(--t--2); }

/* --- the run of not-yet-programmed dates, folded into one strip */
.soon {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
  gap: .5rem 1.1rem; text-align: center;
  padding: clamp(2rem, 4vw, 2.75rem) 0;
}
.soon__label {
  font-family: var(--display); font-size: var(--t--4); font-weight: 400;
  letter-spacing: .06em; color: var(--ink); width: 100%;
}
.soon__date {
  font-family: var(--display); font-weight: 700; font-size: var(--t-0);
  color: var(--ink); letter-spacing: .01em;
}
.soon__note { width: 100%; font-size: var(--t--2); color: var(--ink); }

.empty { text-align: center; color: var(--ink); padding: 4rem var(--gutter); }

/* -------------------------------------------------- standalone page shell */
.page { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.page__back { font-family: var(--display); font-size: var(--t--2); margin-bottom: 1.5rem; }
.page__back a { color: var(--ink); text-decoration: none; }
.page__back a:hover { color: var(--gold); }

/* a film on its own page leads with a full-width still, then the full text */
.film--solo { border-bottom: 0; padding-top: 0; max-width: 62rem; margin-inline: auto; }
.film--solo .film__title { font-size: clamp(var(--t-2), 5vw, var(--t-4)); }
.film--solo .film__text { font-size: var(--t-0); }
.film--solo .film__body { max-width: 46rem; }
@media (min-width: 62rem) {
  .film--solo { grid-template-columns: 1fr; }
}

.prose { max-width: 44rem; }
.prose h1 { font-size: clamp(var(--t-2), 5vw, var(--t-4)); line-height: 1.05; margin-bottom: var(--s-4); }
.prose h2 {
  font-size: var(--t-1); line-height: 1.25; margin: var(--s-5) 0 var(--s-2); color: var(--ink);
  font-weight: 700; letter-spacing: 0;
}
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-inline-start: 1.15rem; margin: 0 0 1em; }
.prose li { margin-bottom: .4rem; }
.prose ul.plain { list-style: none; padding: 0; }
.prose a { color: var(--gold); }
.prose kbd {
  font-family: ui-monospace, monospace; font-size: .8125em;
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: .1em .4em; color: var(--ink);
}
.page__note {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
  font-size: var(--t--2); color: var(--ink);
}

/* ------------------------------------------------------------------ about */
.about { border-block: 1px solid var(--line); margin-top: 3rem; background: var(--bg-2); }
.about__inner {
  max-width: 42rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gutter); text-align: center;
}
.about h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin-bottom: 1.5rem; }
.about p { color: var(--ink); }
.about__when {
  font-family: var(--display); font-size: var(--t--2); letter-spacing: .05em;
  color: var(--ink); margin: 2rem auto 0; max-width: 32rem; text-wrap: balance;
}

/* ---------------------------------------------------------------- archive */
.archive { max-width: var(--measure); margin: 0 auto; padding: clamp(3rem, 7vw, 5rem) var(--gutter); }
.archive__title {
  font-size: var(--t--3); font-weight: 400; letter-spacing: .08em; color: var(--ink);
  text-align: center; margin-bottom: 2rem;
}
.archive__grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem;
}
.past { width: 210px; opacity: .6; transition: opacity .25s; text-decoration: none; }
.past:hover { opacity: 1; }
.past__frame {
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r);
  border: 1px solid var(--line-soft); background: var(--bg-2); margin-bottom: .625rem;
  display: grid; place-items: center;
}
.past__frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .25s; }
.past:hover .past__frame img { filter: grayscale(0); }
/* no artwork on file — fall back to a reel mark */
.past__none { font-size: var(--t-1); color: var(--line); }

/* the same cards used for what's still coming, so: in colour, not dimmed to grey */
.archive--next .past { opacity: .82; }
.archive--next .past__frame img { filter: none; }
.past__title { font-family: var(--display); font-weight: 700; font-size: var(--t--1); }
.past__date { font-size: var(--t--3); color: var(--ink); }

/* ----------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); background: var(--bg-2); }
.foot__inner {
  max-width: var(--measure); margin: 0 auto;
  display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2.5rem;
}
.foot__col--brand { grid-column: 1 / -1; }
@media (min-width: 52rem) { .foot__col--brand { grid-column: auto; } }
.foot__logo { width: 168px; margin-bottom: 1rem; }
.foot__bar { font-size: var(--t--2); color: var(--ink); }
.foot h3 {
  font-size: var(--t--4); font-weight: 400; letter-spacing: .06em;
  color: var(--ink); margin-bottom: .9rem;
}
.foot p { font-size: var(--t--1); color: var(--ink); margin-bottom: .4rem; }
.foot a {
  text-decoration: none; border-bottom: 1px solid transparent;
  display: inline-block; padding-block: .3rem;
  transition: color .2s, border-color .2s;
}
.foot a:hover { color: var(--gold); border-bottom-color: var(--gold-dim); }
.foot__hours { list-style: none; margin: 0 0 .75rem; padding: 0; }
.foot__hours li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--t--1); color: var(--ink); margin-bottom: .3rem;
}
.foot__hours span:last-child { color: var(--ink); }
.foot__hh { font-size: var(--t--2); color: var(--ink); }
/* time ranges must not be re-ordered by the RTL paragraph direction */
.ltr { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.foot__legal {
  max-width: var(--measure); margin: 0 auto; padding: 1.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--line-soft);
  font-size: var(--t--3); color: var(--ink); text-align: center;
}

/* ============================================================== נגישות ===
   Accessibility preferences widget (תקנה 35). Every rule below is driven by a
   class the widget puts on <html>. Nothing here touches page content. */

.a11y-trigger {
  position: fixed; inset-block-end: 1.25rem; inset-inline-start: 1.25rem; z-index: 90;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold); border: 2px solid var(--on-gold);
  box-shadow: 0 6px 20px rgba(0,0,0,.55); cursor: pointer;
}
.a11y-trigger svg { width: 26px; height: 26px; }
.a11y-trigger svg circle { fill: currentColor; }
.a11y-trigger:hover { background: var(--gold-lift); }

.a11y-panel {
  position: fixed; inset-block-end: 5.25rem; inset-inline-start: 1.25rem; z-index: 91;
  width: min(21rem, calc(100vw - 2.5rem));
  background: var(--surface-raised); border: 1px solid var(--edge); border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,.75);
  padding: 1rem; max-height: min(80vh, 40rem); overflow-y: auto;
}
.a11y-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .9rem; }
.a11y-panel__head h2 { font-size: var(--t-0); font-weight: 700; }
.a11y-close {
  background: none; border: 0; color: var(--ink); font-size: var(--t-0);
  cursor: pointer; padding: .25rem .4rem; line-height: 1;
}
.a11y-close:hover { color: var(--ink); }

.a11y-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.a11y-opt {
  display: flex; flex-direction: column; gap: .2rem; text-align: start;
  background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-family: var(--body); font-size: var(--t--2);
  padding: .6rem .7rem; cursor: pointer; min-height: 3.4rem;
  transition: border-color .15s, color .15s, background-color .15s;
}
.a11y-opt:hover { color: var(--ink); border-color: var(--gold-dim); }
.a11y-opt.is-on { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.a11y-opt { position: relative; }
.a11y-opt[aria-pressed="true"]::after {
  content: '✓'; position: absolute; inset-block-start: .35rem; inset-inline-end: .5rem;
  font-size: var(--t--2); font-weight: 700; line-height: 1; color: var(--gold);
}
.a11y-opt__value { font-family: var(--display); font-weight: 700; font-size: var(--t--2); }

.a11y-reset {
  width: 100%; margin-top: .75rem;
  background: none; border: 1px solid var(--edge); border-radius: var(--r);
  color: var(--ink); font-family: var(--body); font-size: var(--t--2);
  padding: .55rem; cursor: pointer;
}
.a11y-reset:hover { color: var(--ink); border-color: var(--gold-dim); }
.a11y-note { font-size: var(--t--3); color: var(--ink); margin: .75rem 0 0; }

/* screen-reader-only live region */
.a11y-live {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --- what the preferences actually do ------------------------------------ */
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; }
html.a11y-links .film__title a,
html.a11y-links .topbar__nav a { text-decoration-thickness: 2px; }

html.a11y-headings h1, html.a11y-headings h2, html.a11y-headings h3 {
  outline: 2px dashed var(--gold); outline-offset: 4px;
}

/* OS stack only — loading a webfont here would re-flow the page past content */
html.a11y-readable, html.a11y-readable body,
html.a11y-readable h1, html.a11y-readable h2, html.a11y-readable h3,
html.a11y-readable p, html.a11y-readable a, html.a11y-readable span,
html.a11y-readable button, html.a11y-readable select, html.a11y-readable li {
  font-family: Arial, "Arial Hebrew", "Helvetica Neue", sans-serif !important;
  letter-spacing: normal !important;
}

html.a11y-cursor-black, html.a11y-cursor-black * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M4 2l14 9-6 1 3.5 7-3 1.5L9 13l-5 4z' fill='black' stroke='white' stroke-width='1.2'/></svg>") 2 2, auto !important; }
html.a11y-cursor-large, html.a11y-cursor-large * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'><path d='M4 2l14 9-6 1 3.5 7-3 1.5L9 13l-5 4z' fill='white' stroke='black' stroke-width='1.2'/></svg>") 4 4, auto !important; }

html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
/* the reveal animation parks cards at opacity 0 until observed — with motion
   off they must simply be visible */
html.a11y-reduce-motion [data-reveal] > .film,
html.a11y-reduce-motion [data-reveal] > .past { opacity: 1 !important; transform: none !important; }

html.a11y-text-115 { font-size: 115%; }
html.a11y-text-130 { font-size: 130%; }
html.a11y-text-150 { font-size: 150%; }

html.a11y-lines-20 p, html.a11y-lines-20 li, html.a11y-lines-20 .film__text {
  line-height: 2 !important;
}
html.a11y-lines-25 p, html.a11y-lines-25 li, html.a11y-lines-25 .film__text {
  line-height: 2.5 !important;
}

html.a11y-contrast-high {
  --bg: #000000; --bg-2: #000000; --surface: #000000;
  --ink: #FFFFFF; --ink-dim: #FFFFFF; --ink-faint: #F0F0F0;
  --gold: #FFD24A; --gold-dim: #FFD24A; --line: #FFFFFF; --line-soft: #FFFFFF; --edge: #FFFFFF;
  --jade: #7CE0BC; --jade-dim: #7CE0BC; --jade-wash: transparent;
  --gold-wash: transparent; --gold-lift: #FFFFFF;
  --brick: #000000; --brick-line: #FFFFFF; --on-brick: #FFFFFF;
  --bg-veil: #000000;
  --on-gold: #000000; --glow: transparent;
}
html.a11y-contrast-high body { background-image: none; }

html.a11y-contrast-invert { filter: invert(1) hue-rotate(180deg); background: #fff; }
html.a11y-contrast-mono { filter: grayscale(1); }
/* keep photographs looking like photographs under invert */
html.a11y-contrast-invert img,
html.a11y-contrast-invert video { filter: invert(1) hue-rotate(180deg); }

/* Without this the widget is inverted along with the page and the user cannot
   read it to switch the setting back off. */
html.a11y-contrast-invert .a11y-trigger,
html.a11y-contrast-invert .a11y-panel { filter: invert(1) hue-rotate(180deg); }
/* mono needs no counter-rule: grayscale preserves luminance, so the widget
   stays perfectly legible, and filter:grayscale(0) on a child cannot undo an
   ancestor's filter anyway. */

@media (max-width: 30rem) {
  .a11y-grid { grid-template-columns: 1fr; }
}

/* none of the above should follow the user onto paper */
@media print {
  .a11y-trigger, .a11y-panel { display: none !important; }
  html[class*="a11y-contrast-"] { filter: none !important; }
  html[class*="a11y-text-"] { font-size: 100% !important; }
  html[class*="a11y-lines-"] p, html[class*="a11y-lines-"] li { line-height: normal !important; }
}

/* ------------------------------------------------------------ entrance fx */
/* Opt-in per container: only the programme page runs the IntersectionObserver
   that adds .in, so anywhere else the cards must start visible. */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] > .film,
  [data-reveal] > .past { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
  [data-reveal] > .film.in,
  [data-reveal] > .past.in { opacity: 1; transform: none; }
  [data-reveal] > .past { transition-duration: .5s; }
}