/* פסטיבל הקסם השחור 5 — the festival page, on top of base.css.
 *
 * Palette from the poster: cream paper, charcoal ink, orange. Everything that
 * reads a colour reads one of the tokens below, so the page, the accessibility
 * widget and the contrast modes all follow.
 *
 * Contrast measured on #EFEACA: ink 14.1:1, orange text 5.25:1, grey 5.67:1,
 * control edge 3.8:1. The bright orange (#E5601A) is 2.9:1 and is therefore
 * used only on marks and rules, never on text. No colour carries meaning alone.
 */
:root {
  --bg: #EFEACA;
  --bg-2: #E6E0BC;
  --surface: #F6F2DA;
  --surface-raised: #FBF8E8;
  --line: #CFC9A6;
  --line-soft: #DCD6B3;
  --edge: #7A7560;
  --glow: rgba(229, 96, 26, .06);
  --ink: #1F1B16;
  --ink-dim: #5E5A4E;
  --gold: #A63D08;
  --gold-lift: #8A3206;
  --gold-dim: #B5532A;
  --gold-wash: rgba(229, 96, 26, .12);
  --on-gold: #FFF8EC;
  --fest-orange: #E5601A;   /* marks and rules only */
}

/* the dotted-print texture of the poster, very quiet, behind the whole page */
body { background-image: radial-gradient(circle at 1px 1px, rgba(31, 27, 22, .09) 1px, transparent 1.4px); background-size: 9px 9px; }

.fest-star { color: var(--fest-orange); }

/* ----------------------------------------------------------------- hero
   One centred axis for the whole page: art, titles, dates, programme and
   closing line all sit on it, so nothing is pushed to a side. */
.fest-hero { max-width: var(--measure); margin: 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.fest-hero__art { overflow: hidden; border-radius: var(--r); aspect-ratio: 1081 / 605; max-height: 50vh; width: 100%; }
.fest-hero__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fest-hero__body { display: flex; flex-direction: column; align-items: center; padding-top: clamp(1.75rem, 4vw, 3rem); }
.fest-kicker { display: flex; align-items: center; justify-content: center; gap: var(--s-2); margin: 0 0 var(--s-2); font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-3), 5vw, var(--t-4)); line-height: 1.1; }
.fest-sub { font-family: var(--display); font-weight: 400; font-size: clamp(var(--t-2), 3.6vw, var(--t-3)); line-height: 1.1; margin: 0 0 var(--s-3); }
.fest-sub em { font-style: normal; color: var(--gold); }
.fest-dates { display: flex; align-items: center; justify-content: center; gap: .3em; font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 7.5vw, 5rem); line-height: 1; margin: 0 0 var(--s-3); direction: ltr; font-variant-numeric: tabular-nums; }
.fest-dates::before { content: ''; order: 2; flex: 0 0 .75em; height: .07em; background: var(--fest-orange); }
.fest-dates span:first-child { order: 1; }
.fest-dates span:last-child { order: 3; }
.fest-dates b { color: var(--gold); font-weight: 700; }
.fest-lede { font-size: var(--t-0); max-width: 32rem; text-wrap: pretty; }
.fest-marks { display: flex; justify-content: center; align-items: center; gap: var(--s-3); margin: 0 auto var(--s-3); }
.fest-oud { width: 54px; height: auto; display: block; }
.fest-oud--logo { width: auto; height: 97px; }

/* --- countdown: a slim dark strip above the logo row, inside the sticky
   header so it stays in view and never sits in the text. Shown by script only;
   can be dismissed for the session. */
.countdown {
  position: relative; text-align: center; color: #FFF8EC;
  background-color: #1F1B16;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 248, 236, .09) 1px, transparent 1.5px);
  background-size: 8px 8px;
  padding: .3rem 2.6rem;
}
.countdown[hidden] { display: none; }
.countdown__row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .1rem 1rem; }
.countdown__label { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: var(--t--2); line-height: 1.5; }
.countdown__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--fest-orange); animation: beat 1s ease-in-out infinite; flex: none; }
@keyframes beat { 50% { transform: scale(.55); opacity: .5; } }
.countdown__units { list-style: none; margin: 0; padding: 0; display: flex; align-items: baseline; gap: .9rem; font-size: var(--t--2); line-height: 1.5; }
.countdown__units b { font-family: var(--display); font-weight: 700; font-size: var(--t-0); font-variant-numeric: tabular-nums; color: #FFB27A; }
.countdown__close {
  position: absolute; top: 50%; inset-inline-end: .4rem; transform: translateY(-50%); width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center; background: none; border: 0; cursor: pointer;
  color: #FFF8EC; font-size: 1.3rem; line-height: 1; border-radius: 50%;
}
.countdown__close:hover { background: rgba(255, 248, 236, .16); }
.countdown :focus-visible { outline-color: #FFB27A; }
@media (max-width: 34rem) {
  .countdown { padding-inline: 2.2rem; }
  .countdown__label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .countdown__units { gap: .6rem; font-size: var(--t--3); }
  .countdown__units b { font-size: var(--t--1); }
}
html.a11y-reduce-motion .countdown__dot { animation: none; }
@media (prefers-reduced-motion: reduce) { .countdown__dot { animation: none; } }

/* --------------------------------------------------------------- programme */
.fest-prog { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter); text-align: center; }
.fest-prog__title { font-size: clamp(var(--t-3), 6vw, var(--t-4)); margin: 0 0 var(--s-4); text-wrap: balance; }

.tabs { display: flex; justify-content: center; gap: var(--s-1); flex-wrap: wrap; margin-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.tab {
  position: relative; background: none; border: 0; cursor: pointer; color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: var(--t-1); line-height: 1.3;
  padding: .6rem clamp(.9rem, 4vw, 1.75rem) .85rem; transition: color .2s;
}
.tab small { display: block; font-family: var(--display); font-weight: 400; font-size: var(--t--2); color: var(--ink-dim); }
.tab::after { content: ''; position: absolute; inset-inline: .5rem; bottom: -1px; height: 3px; background: var(--fest-orange); opacity: 0; transition: opacity .3s; }
.tab:hover { color: var(--gold); }
.tab:hover::after, .tab[aria-selected="true"]::after { opacity: 1; }
.tab[aria-selected="true"] { color: var(--gold); }

.day { padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 4.5rem); }
.day[hidden] { display: none; }
.day.is-shown { animation: rise .6s cubic-bezier(.2, .7, .2, 1); }
.day__date { font-family: var(--display); font-weight: 700; font-size: clamp(3rem, 12vw, 4.8rem); line-height: 1; margin: 0; direction: ltr; font-variant-numeric: tabular-nums; }
.day__date b { color: var(--gold); font-weight: 700; }
.day__dow { font-family: var(--display); font-weight: 400; font-size: var(--t-1); margin: var(--s-1) 0 var(--s-4); }
.day__note { font-size: var(--t--1); color: var(--ink-dim); margin: calc(-1 * var(--s-2)) auto var(--s-4); max-width: 24rem; }

.slots { list-style: none; margin: 0 auto; padding: 0; max-width: 34rem; border-top: 1px solid var(--line); }
.slot { padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.slot__time { display: block; font-family: var(--display); font-weight: 700; font-size: var(--t-2); line-height: 1.2; color: var(--gold); direction: ltr; font-variant-numeric: tabular-nums; margin-bottom: var(--s-1); }
.slot__time--tbd { font-size: var(--t-0); font-weight: 400; color: var(--ink-dim); direction: rtl; }
.slot__name { font-family: var(--display); font-weight: 700; font-size: clamp(var(--t-3), 7vw, var(--t-4)); line-height: 1.1; margin: 0; text-wrap: balance; }
.slot__name--minor { font-weight: 400; font-size: var(--t-2); }
.slot__where { font-size: var(--t-0); margin: var(--s-1) 0 0; color: var(--ink-dim); }

/* ------------------------------------------------------------------ call */
.fest-call { max-width: 36rem; margin: 0 auto; text-align: center; padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); }
.fest-call h2 { font-size: clamp(var(--t-3), 6vw, var(--t-4)); margin: 0 0 var(--s-2); text-wrap: balance; }
.fest-call p { text-wrap: pretty; }

/* ---------------------------------------------------------------- header
   Taken from the alsheikh header: a sticky bar led by the wordmark, nav on the
   other side, a 3px underline that fades in on hover, and a logo that presses
   in and springs back when touched — the cue that it is a link. Added here: the
   bar tightens once the page has scrolled, so it stops costing height. */
.fest-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg-2); border-bottom: 3px solid var(--fest-orange);
  transition: box-shadow .3s;
}
.fest-header.is-scrolled { box-shadow: 0 6px 22px rgba(31, 27, 22, .16); }
.fest-header__inner {
  --logo-h: clamp(52px, 7vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: .35rem var(--gutter); min-height: calc(var(--logo-h) + .7rem); transition: min-height .3s;
}
.fest-logo-h { margin: 0; line-height: 0; }
.fest-logo { display: inline-block; transition: transform .18s ease, filter .18s ease; }
.fest-logo img {
  height: var(--logo-h); width: auto; transition: height .3s;

}
@keyframes logo-press {
  0% { transform: scale(1); } 32% { transform: scale(.93); }
  62% { transform: scale(1.02); } 100% { transform: scale(1); }
}
.fest-logo:hover, .fest-logo:focus-visible { animation: logo-press .42s cubic-bezier(.34, 1.4, .5, 1); }
.fest-logo:active { animation: none; transform: scale(.93); }

.fest-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.fest-nav a {
  position: relative; display: block; padding: .45rem clamp(.5rem, 1.6vw, 1rem);
  font-family: var(--display); font-size: var(--t-0); line-height: 1.4;
  text-decoration: none; color: var(--ink); transition: color .2s;
}
.fest-nav a::after {
  content: ''; position: absolute; inset-inline: .5rem; bottom: 0; height: 3px;
  background: var(--fest-orange); opacity: 0; transition: opacity .3s;
}
.fest-nav a:hover, .fest-nav a:focus-visible { color: var(--gold); }
.fest-nav a:hover::after, .fest-nav a:focus-visible::after { opacity: 1; }

/* -------------------------------------------------------------- motion
   Hero lines rise in one after another on load, in CSS alone, so they cannot
   get stuck hidden if a script fails. Everything below the fold is revealed by
   js/main.js on scroll (class .anim is added there, so without script the page
   is simply shown). The art drifts slowly against the scroll. */
@keyframes rise { from { opacity: 0; transform: translate3d(0, 1.6rem, 0); } to { opacity: 1; transform: none; } }
/* the hero picture is the largest paint: it must not start invisible, so it only settles in scale */
@keyframes settle { from { transform: scale(1.04); } to { transform: scale(1); } }
.fest-hero__art img { animation: settle 1.4s cubic-bezier(.2, .7, .2, 1) both; }
html.px-on .fest-hero__art img { transform: translate3d(0, var(--py, 0), 0) scale(1.12); animation: none; }
.hero-in { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.fest-kicker.hero-in { animation-delay: .25s; }
.fest-sub.hero-in { animation-delay: .4s; }
.fest-dates.hero-in { animation-delay: .55s; }
.fest-lede.hero-in { animation-delay: .55s; }
.countdown.hero-in { animation-delay: .85s; }

.anim { visibility: hidden; }
.anim.is-in { visibility: visible; animation: rise 1.1s cubic-bezier(.2, .7, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .anim, .anim.is-in { visibility: visible; animation: none; }
  .hero-in, .fest-hero__art img { animation: none; }
  .fest-logo:hover, .fest-logo:focus-visible { animation: none; }
}
html.a11y-reduce-motion .anim, html.a11y-reduce-motion .anim.is-in { visibility: visible; animation: none; }
html.a11y-reduce-motion .hero-in, html.a11y-reduce-motion .fest-hero__art img { animation: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ----------------------------------------------------------------- about */
.fest-about { max-width: 46rem; margin: 0 auto; padding: 0 var(--gutter) clamp(3rem, 7vw, 5rem); text-align: center; }
.fest-about h2 { font-size: clamp(var(--t-3), 6vw, var(--t-4)); margin: 0 0 var(--s-3); }
.fest-about__text p { text-wrap: pretty; }
.triad { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .triad { grid-template-columns: repeat(3, 1fr); gap: 0; } .triad li + li { border-inline-start: 1px solid var(--line); } }
.triad li { padding: 0 var(--s-2); }

/* ------------------------------------------------------ per-act details */
.slot__more { margin-top: var(--s-2); }
.slot__more summary {
  display: inline-block; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: var(--t--1); color: var(--ink);
  border-bottom: 1px solid var(--ink); padding-bottom: .1rem; position: relative;
}
.slot__more summary::-webkit-details-marker { display: none; }
.slot__more summary::after { content: ''; position: absolute; inset: -.6rem -.75rem; }
.slot__more[open] summary { color: var(--gold); border-color: var(--gold); }
.slot__more p { font-size: var(--t--1); line-height: 1.7; margin: var(--s-2) auto 0; max-width: 30rem; text-align: start; text-wrap: pretty; }
.slot__more[open] p { animation: rise .5s cubic-bezier(.2, .7, .2, 1); }

/* --------------------------------------------------------------- photos */
.slot__avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto var(--s-2); outline: 1px solid var(--line); outline-offset: 2px; }
.slot__photo { margin: var(--s-2) auto 0; max-width: 30rem; }
.slot__photo img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.slot__photo figcaption { font-size: var(--t--2); color: var(--ink-dim); margin-top: var(--s-1); text-align: start; }

.day__cal { margin: var(--s-4) 0 0; }
.day__cal .act[hidden] { display: none; }

/* ------------------------------------------------------------ phone header
   One slim row. The dark countdown strip scrolls away with the page (the bar's
   sticky offset is minus its own height, written by js/main.js), and the day
   links go because the day tabs below do that job. */
@media (max-width: 34rem) {
  .fest-header { top: calc(-1 * var(--cd-h, 0px)); }
  .fest-header__inner { --logo-h: 44px; padding-block: .15rem; min-height: 3.1rem; }
  .fest-nav a { font-size: var(--t--1); padding-inline: .6rem; }
  .fest-nav li:nth-child(n+3) { display: none; }
}

/* ------------------------------------------------------------- phone hero
   The art is a halftone: it only resolves into a face when it is small, and a
   187px-tall strip showed noise. 4:3 gives a real picture, and the cap that
   suits a wide desktop crop is dropped. */
@media (max-width: 34rem) {
  .fest-hero { padding-top: .75rem; padding-bottom: 2rem; }
  .fest-hero__art { aspect-ratio: 4 / 3; max-height: none; }
  .fest-hero__body { padding-top: 1.25rem; }
  .fest-kicker { font-size: var(--t-3); }
}
/* the calendar button now opens each day, so it sits close under the date */
.day__cal { margin: 0 0 var(--s-4); }
.day__note + .day__cal { margin-top: 0; }

/* ---------------------------------------------------- phone refinements */
.day__dow { margin-bottom: var(--s-2); }
/* the days row stays under the header while the lineup scrolls, so the day can be
   changed without going back up */
.tabs { position: sticky; top: var(--topbar-h, 3.5rem); z-index: 30; background: var(--bg); padding-top: .25rem; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.countdown__close::after { content: ''; position: absolute; inset: -.5rem; }
.slot__more p { font-size: var(--t-0); }
.slot__more summary { font-size: var(--t-0); }

.fest-notfound { min-height: 60vh; display: grid; align-content: center; }

/* -------------------------------------------------------- where / entry */

/* the map pin in the menu: same mark as the social icons on the other sites */
.fest-nav__pin { display: inline-flex; align-items: center; color: var(--gold); padding: .45rem .5rem; }
.fest-nav__pin svg { width: 22px; height: 22px; display: block; }
.fest-nav__pin::after { display: none; }
.fest-nav__pin:hover, .fest-nav__pin:focus-visible { color: var(--gold-lift); }
.fest-nav__pin { position: relative; }
.fest-nav__pin::before { content: ''; position: absolute; inset: -.2rem -.1rem; }
@media (max-width: 34rem) { .fest-nav li.is-pin { display: list-item; } }
.fest-lede--entry { margin-top: var(--s-1); }
.fest-lede--entry b { color: var(--gold); }

/* ------------------------------------------------------ narrow phones
   The menu is one row at every width: logo, two links and the map pin. The
   decorative oud above the programme is dropped on a phone — it cost ~150px of
   scrolling and told nobody anything. */
@media (max-width: 34rem) {
  .fest-nav ul { flex-wrap: nowrap; gap: 0; }
  .fest-nav a { padding-inline: .45rem; white-space: nowrap; }
  .fest-nav__pin { padding-inline: .35rem; }
}
@media (max-width: 24rem) {
  .fest-header__inner { --logo-h: 38px; gap: .25rem; }
  .fest-nav a { font-size: var(--t--2); padding-inline: .35rem; }
}

/* ------------------------------------------------- phone: the lower half
   The programme is roomy (~64px between rows) and everything under it was
   packed at 16-20px, with no seam between sections, and the footer alone was
   left aligned while the rest sits on the centre axis. So: the same generous
   rhythm all the way down, a quiet band for each section so the eye can tell
   where one ends, and a centred footer. */
@media (max-width: 34rem) {
  .fest-about, .fest-call { padding-block: 3.5rem; }
  .fest-call  { background: var(--surface); border-top: 1px solid var(--line-soft); max-width: none; }
  .fest-call > * { max-width: 24rem; margin-inline: auto; }

  .fest-about h2, .fest-call h2 { margin-bottom: var(--s-4); }
  
  .fest-about__text p { line-height: 1.8; margin-bottom: var(--s-3); }
  .triad { margin-top: var(--s-5); gap: 0; }
  .triad li { padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
  .triad li:last-child { border-bottom: 1px solid var(--line-soft); }

  .foot__legal { padding-top: var(--s-4); }
}

/* ------------------------------------------------------------------ footer
   One centred stack: who, where, when, then a single row of icons. The mark is
   the whole label, so each link carries its name in aria-label and title. */
.foot__stack { max-width: 34rem; margin: 0 auto; padding: clamp(3rem, 6vw, 4rem) var(--gutter) var(--s-4); text-align: center; }
.foot__stack p { margin: 0; font-size: var(--t-0); line-height: 1.6; }
.foot__bar { font-family: var(--display); font-weight: 700; font-size: var(--t-1) !important; line-height: 1.3 !important; }
.foot__about { color: var(--ink-dim); margin-top: var(--s-1) !important; }
.foot__addr { font-family: var(--display); font-weight: 700; font-size: var(--t-1) !important; margin-top: var(--s-4) !important; }
.foot__entry { font-weight: 700; color: var(--gold); margin-top: var(--s-1) !important; }
.foot__when { margin-top: var(--s-1) !important; }
.foot__icons { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .25rem; }
.foot__icons a { display: flex; flex-direction: column; align-items: center; gap: .15rem; width: 4.25rem; padding: .5rem 0 .4rem; border: 0; border-radius: var(--r); color: var(--ink); transition: color .2s, background-color .2s; }
.foot__label { font-size: var(--t--3); line-height: 1.2; }
.foot__icons a:hover, .foot__icons a:focus-visible { color: var(--gold); background: var(--gold-wash); border: 0; }
.foot__icons svg { width: 1.5rem; height: 1.5rem; display: block; }
.foot__contact { margin-top: var(--s-3) !important; font-size: var(--t--1) !important; color: var(--ink-dim); }
.foot__contact a { font-size: inherit; padding-block: .1rem; }
/* six icons: two even rows of three on a phone, instead of four and two */
@media (max-width: 34rem) {
  .foot__icons { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 15rem; margin-inline: auto; gap: .25rem; }
  .foot__icons a { width: 100%; }
}

/* The countdown row is reserved as soon as script is known to run, so it appearing a
   moment later does not push the whole page down (layout shift). Gone for good once
   closed, finished, or without script. */
.js .countdown[hidden]:not([data-gone]) { display: block; visibility: hidden; }
.cd-closed .countdown { display: none !important; }
/* the closing line stands alone: no gap left under it for a paragraph that is not there */
.fest-call h2:last-child { margin-bottom: 0; }

/* the three phrases are the document's own lines; the key word is picked out */
.triad li { font-family: var(--display); font-size: var(--t-1); line-height: 1.35; }
.triad b { color: var(--gold); font-weight: 700; }

.foot__partner { margin-top: var(--s-4) !important; font-size: var(--t--1) !important; color: var(--ink-dim); line-height: 1.6; }