/* Jazztronic 2026 · design system v2
   One grotesk (Schibsted Grotesk) in mixed weights, sentence case throughout, no italics.
   Black stage with film grain and a cursor-led yellow glow, bone paper with noise and a yellow wash, black and white photographs, the wordmark printed in grainy yellow. */

:root {
  --ink: #111110; --ink-2: #1A1917;
  --bone: #EFEDE6; --bone-2: #E4E1D7;
  --yellow: #FFE500; --yellow-2: #E6CE00;
  --grey: #8F8D84; --grey-2: #5C5A50;
  --line-d: rgba(239, 237, 230, 0.14); --line-l: rgba(16, 16, 16, 0.16);
  --sans: "Schibsted Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
  --gutter: clamp(20px, 4vw, 64px);
  /* type scale, ~1.45 between steps. At 1440 these land on 138 / 95 / 66 / 49 / 35 / 26.
     t1 page title, t2 section opener, t3 named subject, t4 act or card head,
     t5 small head, t6 lede and large body. Nothing sits between two steps. */
  --t1: clamp(52px, 9.6vw, 168px); --t2: clamp(42px, 6.6vw, 112px);
  --t3: clamp(32px, 4.6vw, 76px);  --t4: clamp(26px, 3.4vw, 54px);
  --t5: clamp(21px, 2.4vw, 36px);  --t6: clamp(18px, 1.8vw, 26px);
  /* text ramp, five fixed roles: long-form, secondary copy, interface, label, micro */
  --tb: 17px; --ts: 15px; --tui: 14px; --tl: 13px; --tm: 12px;
  /* spacing scale, same ratio. At 1440: 11 / 23 / 35 / 49 / 69 / 95 / 127 */
  --sp1: clamp(6px, 0.8vw, 12px);   --sp2: clamp(12px, 1.6vw, 24px);
  --sp3: clamp(18px, 2.4vw, 36px);  --sp4: clamp(26px, 3.4vw, 52px);
  --sp5: clamp(36px, 4.8vw, 72px);  --sp6: clamp(48px, 6.6vw, 100px);
  --sp7: clamp(64px, 8.8vw, 132px);
  --gap: clamp(12px, 1.6vw, 28px);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06  0 0 0 0 0.05  0 0 0 0 0.02  1.5 0 0 0 -0.62'/></filter><rect width='200' height='200' filter='url(%23g)'/></svg>");
  --mottle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='m'><feTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0  1.1 0 0 0 -0.42'/></filter><rect width='600' height='600' filter='url(%23m)'/></svg>");
  --mx: 50%; --my: 30%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { background: var(--bone); color: var(--ink); }
.home body, body.home { background: var(--bone); }
body { margin: 0; font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
img { max-width: 100%; display: block; }
p, h1, h2, h3, h4, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }

/* ---------- type roles ---------- */
.disp { font-family: var(--sans); font-weight: 700; letter-spacing: -0.04em; line-height: 0.92; text-wrap: balance; }
.mono { font-family: var(--sans); font-size: var(--tl); font-weight: 500; letter-spacing: 0; line-height: 1.5; color: var(--grey); }
.light .mono, .sun .mono { color: var(--grey-2); }
.serif { font-family: var(--sans); font-weight: 400; letter-spacing: -0.015em; line-height: 1.2; }
.num { font-variant-numeric: tabular-nums; }
.ph { color: var(--grey); }
.light .ph { color: var(--grey-2); }
.lede { font-family: var(--sans); font-weight: 400; font-size: var(--t6); line-height: 1.32; letter-spacing: -0.015em; color: var(--grey); max-width: 32ch; }
.light .lede { color: var(--grey-2); }
.lede b { font-weight: 500; color: var(--bone); }
.light .lede b { color: var(--ink); }
.prose { max-width: 60ch; font-size: var(--tb); line-height: 1.55; display: grid; gap: 1em; }
/* the grid above stacks sibling paragraphs; on a <p> that carries the class itself it would
   blockify inline links onto their own row, so those stay ordinary text blocks */
p.prose { display: block; }
.prose.big { font-size: var(--t5); line-height: 1.32; max-width: 34ch; letter-spacing: -0.02em; font-weight: 500; }
.dark .prose { color: rgba(239,237,230,0.82); } .light .prose { color: var(--grey-2); }
.prose b { font-weight: 600; } .dark .prose b { color: var(--bone); } .light .prose b { color: var(--ink); }
.prose a { border-bottom: 1px solid currentColor; }

/* ---------- grid + surfaces ---------- */
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
/* `clip` not `hidden`: hidden makes every section a scroll container, which silently kills
   `position: sticky` inside it -- the archive poster panel never stuck. clip crops the
   rounded sheet the same way without becoming a scrollport. */
.sec { --pt: var(--sp7); --pb: var(--sp7); position: relative; padding: var(--pt) var(--gutter) var(--pb); overflow: clip; }
.sec.tight { --pt: var(--sp4); --pb: var(--sp5); }
.light { background: var(--bone); color: var(--ink); }
.light::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: 0.14; mix-blend-mode: multiply; pointer-events: none; }
.light::after { content: ""; position: absolute; inset: -25%; pointer-events: none; z-index: 0; filter: blur(28px);
  background: radial-gradient(42% 36% at 88% 12%, rgba(255, 229, 0, 0.32), transparent 70%), radial-gradient(34% 28% at 8% 92%, rgba(255, 229, 0, 0.18), transparent 70%); }
.light:nth-of-type(even)::after { background: radial-gradient(42% 36% at 12% 14%, rgba(255, 229, 0, 0.28), transparent 70%), radial-gradient(34% 28% at 90% 88%, rgba(255, 229, 0, 0.18), transparent 70%); }
/* dark surfaces are rounded sheets set into the bone ground; the edge is a shape, not a fade (Mixpanel, Ramp, Linear) */
:root { --r: clamp(18px, 2.2vw, 30px); }
.sec.dark { margin-inline: var(--gutter); border-radius: var(--r); padding-inline: var(--gutter); }
.sec.dark:not(.foot) { --pt: var(--sp6); --pb: var(--sp6); }
.sec.dark.foot { margin-inline: 0; border-radius: var(--r) var(--r) 0 0; }
.phead { border-radius: 0 0 var(--r) var(--r); }
body:not(.home) .top { background: var(--ink); }
.sec.dark + .sec.dark, .sec.dark + .foot { margin-top: var(--gutter); }
.sec.light + .sec.light { padding-top: 0; }
#brojke + .sec.light { padding-top: var(--pt); }
#novosti { --pb: var(--sp5); }
.dark { background: var(--ink); color: var(--bone); }
.dark::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); background-size: 240px 240px; opacity: 0.34; mix-blend-mode: screen; }
.dark::after { content: ""; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background: radial-gradient(38% 34% at var(--mx) var(--my), rgba(255, 229, 0, 0.16), transparent 70%); filter: blur(20px); transition: background-position 400ms; }
.sun { background: var(--yellow); color: var(--ink); }
.sun::before { content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: 0.18; mix-blend-mode: multiply; pointer-events: none; }
.sec > * { position: relative; z-index: 1; }
/* halftone corner: the divider's dots at section scale, faint, off the top-right (and bottom-left on the footer) */
.sec.dark > .g::before { content: ""; position: absolute; top: calc(-1 * var(--pt)); right: calc(-1 * var(--gutter)); z-index: -1; pointer-events: none;
  width: min(48vw, 560px); aspect-ratio: 1; background: var(--yellow); opacity: 0.085; transform: scaleX(-1);
  -webkit-mask: url(halftone-corner.svg) top left / 100% 100% no-repeat; mask: url(halftone-corner.svg) top left / 100% 100% no-repeat; }
.foot > .g::before { top: auto; bottom: 0; right: auto; left: calc(-1 * var(--gutter)); transform: scaleY(-1); opacity: 0.07; }
.sec.dark > .g { z-index: 1; }
/* fact line: the numbers live inside the sentence, not in tiles */
.factline { font-size: var(--t6); line-height: 1.4; letter-spacing: -0.015em; color: var(--grey); max-width: 34ch; }
.g > .factline { grid-column: 1 / 10; max-width: none; }
#brojke .factline { font-size: var(--t4); line-height: 1.3; letter-spacing: -0.03em; color: var(--ink); }
#brojke .factline b { color: var(--ink); }
.light .factline { color: var(--grey-2); }
.factline b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--yellow); }
.light .factline b { color: var(--ink); }
.head { align-items: end; margin-bottom: var(--sp5); }
.head h2 { grid-column: 1 / 8; font-size: var(--t2); }
.head .lede { grid-column: 8 / -1; padding-bottom: 0.3em; }
.rule-l { border-top: 1px solid var(--line-l); } .rule-d { border-top: 1px solid var(--line-d); }

/* photographs: baked black and white, film grain laid over at screen resolution */
.duo { position: relative; overflow: hidden; background: var(--ink-2); }
.duo img { width: 100%; height: 100%; object-fit: cover; }
.duo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: var(--noise); background-size: 220px 220px; opacity: 0.34; mix-blend-mode: overlay; pointer-events: none; }
.duo::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(17,17,16,0.32), transparent 45%); pointer-events: none; }
.duo .lab { position: absolute; left: 12px; bottom: 10px; z-index: 2; color: var(--bone); font-size: var(--tm); font-weight: 500; }
/* a .duo with no photograph in it yet: paper panel, dark text, no scrim */
.duo.bone { background: var(--bone); color: var(--ink); }
.duo.bone::after { content: none; }
.duo.bone::before { mix-blend-mode: multiply; opacity: 0.14; }

/* page-head photograph: full bleed under the title, dimmed and faded toward the text */
.phead .art { position: absolute; inset: 0; margin: 0; }
.phead .art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; opacity: 0.3;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 80%); mask-image: linear-gradient(to left, #000 25%, transparent 80%); }
/* the lede sits over the photograph, so the scrim has to hold the top-right down, not just the bottom */
.phead .art::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--ink) 8%, rgba(17, 17, 16, 0.58) 100%); }
.phead .art.tall img { object-position: 50% 64%; }
.phead .lede { color: var(--bone); }

/* buttons + links */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: var(--tl); font-weight: 500; letter-spacing: 0.005em; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(17, 17, 16, 0.28); color: inherit; background: transparent; cursor: pointer; line-height: 1; transition: background 160ms, color 160ms, border-color 160ms, transform 200ms; }
.dark .btn { border-color: rgba(239, 237, 230, 0.28); }
.btn:hover { border-color: currentColor; transform: translateY(-1px); }
.btn.primary, .btn.ink { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.btn.primary:hover, .btn.ink:hover { color: var(--yellow); }
.dark .btn.primary { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.dark .btn.primary:hover { background: var(--yellow); border-color: var(--yellow); }
.arrow { display: inline-block; transition: transform 200ms; } a:hover .arrow, button:hover .arrow { transform: translateX(4px); }
.link { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 200ms; }
.link:hover { background-size: 0 1px; }

/* ---------- header ---------- */
.top { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 20px var(--gutter); color: var(--bone); }
.top .wm { justify-self: start; } .top nav { justify-self: center; } .top .pill, .top .burger { justify-self: end; }
.home .top { position: absolute; inset: 0 0 auto 0; }
.top .wm { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
/* the saxophonist from the festival logo, painted by mask so it takes the surrounding colour */
.mk { display: block; background: currentColor; -webkit-mask: url(mark.svg) center / contain no-repeat; mask: url(mark.svg) center / contain no-repeat; }
.top .wm .mk { width: 30px; height: 30px; color: var(--yellow); flex: none; transition: transform 300ms cubic-bezier(.2,.8,.2,1); }
.top .wm:hover .mk { transform: rotate(-6deg) scale(1.06); }

.top nav ul { display: flex; gap: clamp(14px, 2.2vw, 30px); }
.top nav a { font-size: var(--tui); font-weight: 500; opacity: 0.8; position: relative; padding-bottom: 2px; }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms; }
.top nav a:hover { opacity: 1; } .top nav a:hover::after { transform: scaleX(1); }
.top nav a[aria-current="page"] { opacity: 1; } .top nav a[aria-current="page"]::after { transform: scaleX(1); }
.top .pill { font-size: var(--tl); font-weight: 500; color: var(--ink); background: var(--yellow); padding: 6px 10px; }
.top .burger { all: unset; cursor: pointer; display: none; position: relative; width: 44px; height: 44px;
  -webkit-tap-highlight-color: transparent; }
/* the short middle line squares up on press. It is scaled, not resized: animating width
   would relayout the bar on every frame. */
.top .burger i { position: absolute; left: 11px; height: 2px; width: 22px; background: currentColor;
  border-radius: 2px; transform-origin: left center; transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
.top .burger i:nth-child(1) { top: 15px; }
.top .burger i:nth-child(2) { top: 21px; transform: scaleX(0.64); }
.top .burger i:nth-child(3) { top: 27px; }
.top .burger:hover i:nth-child(2), .top .burger:active i:nth-child(2) { transform: scaleX(1); }
.top .burger:active i:nth-child(1) { transform: translateY(1px); }
.top .burger:active i:nth-child(3) { transform: translateY(-1px); }
.menu { position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--bone); padding: 90px var(--gutter) 40px; display: none; flex-direction: column; gap: 10px; }
.menu.open { display: flex; }
.menu a { font-weight: 700; font-size: clamp(40px, 11vw, 88px); line-height: 1; letter-spacing: -0.04em; }
.menu .close { all: unset; position: absolute; top: 22px; right: var(--gutter); cursor: pointer; font-size: var(--tui); font-weight: 500; }
.menu .foot { margin-top: auto; color: var(--grey); }
.menu .mk { width: 64px; height: 64px; color: var(--yellow); margin-top: 28px; }

/* ---------- page head (inner pages) ---------- */
.phead { position: relative; padding: clamp(48px, 7vw, 112px) var(--gutter) clamp(40px, 5vw, 72px); background: var(--ink); color: var(--bone); overflow: hidden; }
.phead::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); background-size: 240px 240px; opacity: 0.5; mix-blend-mode: screen; }
.phead::after { content: ""; position: absolute; inset: -20%; pointer-events: none; background: radial-gradient(34% 30% at 78% 30%, rgba(255, 229, 0, 0.18), transparent 70%); filter: blur(24px); }
.phead > * { position: relative; z-index: 1; }
.phead > .art { z-index: 0; }
.phead .g { align-items: end; }
.phead .eyebrow { grid-column: 1 / -1; margin-bottom: 18px; }
.phead h1 { grid-column: 1 / 9; font-size: var(--t1); }
.phead .lede { grid-column: 9 / -1; padding-bottom: 0.3em; }
.phead .back { grid-column: 1 / -1; font-size: var(--tui); font-weight: 500; color: var(--grey); margin-bottom: 14px; }
.phead .back:hover { color: var(--bone); }
.phead .actions { grid-column: 1 / -1; margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }

/* the JAZZTRONIC wordmark (hero + footer): Bricolage condensed, font kerning on, two pairs hand-tightened */
.wordmark { font-family: "Bricolage Grotesque", var(--sans); font-weight: 800; font-stretch: 75%; font-optical-sizing: auto; text-transform: uppercase; letter-spacing: -0.045em; font-kerning: normal; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; white-space: nowrap; }
.wordmark .ja { margin-right: -0.03em; } .wordmark .tr { margin-right: -0.035em; } .wordmark .ro { margin-right: 0.005em; }
.wordmark.yel, .wordmark.yel .l { color: transparent; -webkit-background-clip: text; background-clip: text; background-color: var(--yellow);
  background-image: var(--grain), var(--mottle), linear-gradient(to bottom, #FFEA33 0%, var(--yellow) 45%, #F0D600 100%);
  background-size: 200px 200px, 600px 600px, 100% 100%; }
/* letters that fade in on their own layer would leak the fill as a box, so the fill sits on the letters, not the parent */
.wordmark.yel:has(.l) { background: none; }

/* separator: a halftone cluster, dots falling off from the centre, with a pulse running
   outward through them. The dots are a mask so each divider is a single element. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.pair { display: inline-flex; align-items: center; gap: 0.34em; }
.sig { position: relative; display: inline-block; flex: none; width: 0.78em; height: 0.78em; vertical-align: -0.06em;
  background-color: rgba(255, 229, 0, 0.26);
  -webkit-mask: url(halftone.svg) center / contain no-repeat; mask: url(halftone.svg) center / contain no-repeat; }
.sig::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(255, 229, 0, 0.8) 0 34%, rgba(255, 229, 0, 0) 72%);
  background-repeat: no-repeat; background-position: 50% 50%; background-size: 0% 0%;
  animation: sig 3.6s cubic-bezier(.25, .6, .35, 1) infinite; }
@keyframes sig { 0% { background-size: 0% 0%; opacity: 0.9; } 58% { opacity: 0.75; } 100% { background-size: 240% 240%; opacity: 0; } }
.cap .pair + .pair .sig::after { animation-delay: -1.8s; }
.menu .foot .sig { width: 1.05em; height: 1.05em; margin: 0 0.5em; vertical-align: -0.2em; }
.menu .foot .sig + .vh + .sig, .menu .foot .sig ~ .sig::after { animation-delay: -1.4s; }
@media (prefers-reduced-motion: reduce) {
  .sig { background-color: rgba(255, 229, 0, 0.5); }
  .sig::after, .acc .panel .spot::after { animation: none; background-size: 140% 140%; opacity: 0.55; }
}

/* ---------- HOME · hero: the yellow wordmark reveals, the photographs flash through it, then the wall fades in ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: var(--ink); color: var(--bone); }
.hero .scrim { position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(17,17,16,0.92) 0%, rgba(17,17,16,0.72) 38%, rgba(17,17,16,0.32) 70%, transparent 100%); }
.hero .wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: 6px; padding: 6px; }
.hero .t { position: relative; overflow: hidden; background: var(--ink-2); opacity: 0; transform: scale(1.035); filter: blur(10px);
  transition: opacity 900ms ease, transform 1400ms cubic-bezier(.2,.8,.2,1), filter 900ms ease; will-change: opacity, transform, filter; }
.hero.in .t { opacity: 1; transform: none; filter: none; }
.hero .t img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.9; transition: transform 900ms cubic-bezier(.2,.8,.2,1), opacity 400ms; }
.hero .t:hover img { transform: scale(1.04); opacity: 1; }
.hero .t::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: var(--noise); background-size: 220px 220px; opacity: 0.4; mix-blend-mode: overlay; pointer-events: none; }
.hero .t::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(17,17,16,0.55), transparent 50%); pointer-events: none; }
/* the wordmark: two copies stacked, one printed yellow, one photo-filled for the flash */
.hero .big { position: absolute; left: -0.02em; right: 0; bottom: -0.2em; z-index: 4; font-size: clamp(120px, 21.5vw, 420px); line-height: 0.8; pointer-events: none;
  transition: transform 1100ms cubic-bezier(.2,.8,.2,1); }
.hero.center .big { transform: translateY(var(--lift, 0px)); }
.hero .big .l { display: inline-block; transition: opacity 900ms ease, filter 900ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.hero.pre .big .l { opacity: 0; filter: blur(14px); transform: translateY(0.08em); }
.hero .big.flash { z-index: 5; color: transparent; -webkit-background-clip: text; background-clip: text; background-color: var(--yellow); background-size: cover; background-position: center; background-blend-mode: multiply; opacity: 0;
  /* the transform transition has to be restated. .hero .big animates transform over 1100ms,
     and a bare `transition: opacity` here would drop it, so this copy would snap to --lift
     while the yellow copy below glided to it. The two wordmarks are meant to sit exactly on
     top of each other; apart, you watch the yellow one and the flash happens somewhere else.
     --lift grows with the viewport, so the gap is invisible on a laptop and half a screen
     tall on a large monitor, which is why this only ever showed up there. */
  transition: opacity 260ms ease, transform 1100ms cubic-bezier(.2,.8,.2,1); }
.hero.flash .big.flash { opacity: 1; }
.hero .cap { position: absolute; left: var(--gutter); top: 84px; z-index: 6; display: grid; gap: 10px; opacity: 0; transform: translateY(8px); transition: opacity 700ms ease 200ms, transform 900ms cubic-bezier(.2,.8,.2,1) 200ms; }
.hero.in .cap { opacity: 1; transform: none; }
.hero .cap .l { display: flex; flex-wrap: wrap; align-items: center; gap: 0.06em 0.4em; margin: 0;
  font-weight: 500; font-size: var(--t4); line-height: 1.05; letter-spacing: -0.03em; color: var(--bone); }
@media (max-width: 720px) { .hero .wall { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(5, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hero .t, .hero .big, .hero .big .l, .hero .cap { transition: none; } }

/* ---------- HOME · masthead strip ---------- */
/* ---------- HOME · sponsor marquee under the hero ----------
   Logos are alpha masks painted in one grey, faded out at both ends, drifting left; pauses on hover. */
.strip { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: clamp(20px, 3vw, 48px); padding: 0 0 0 var(--gutter); border-bottom: 1px solid var(--line-l); }
.strip > * { position: relative; z-index: 1; }
.strip .lbl { font-size: var(--tm); font-weight: 500; color: var(--grey-2); white-space: nowrap; }
.lg { display: block; height: var(--h, 40px); width: calc(var(--h, 40px) * var(--ar, 2)); background: var(--grey-2); opacity: 0.68; flex: none;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity 300ms; }
.lg:hover { opacity: 1; }
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 90%, transparent); }
.mq .track { display: flex; width: max-content; animation: mq 52s linear infinite; }
.mq:hover .track { animation-play-state: paused; }
.mq .set { display: flex; align-items: center; gap: var(--sp5); padding: 26px var(--sp5) 26px 0; }
@keyframes mq { to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .mq .track { animation: none; } .mq .set + .set { display: none; } .mq { mask-image: none; -webkit-mask-image: none; } .mq .set { flex-wrap: wrap; padding-right: 0; } }

/* ---------- HOME · program list ---------- */
.plist { grid-column: 1 / -1; display: grid; }
/* a day is the block: the headline act, plus any smaller act that shares the evening */
.pday { border-top: 1px solid var(--line-l); padding: 22px 0 24px; }
.plist .pday:last-child { border-bottom: 1px solid var(--line-l); }
/* three columns: when, who, about. The about column carries full artist copy, so it is
   wide enough to read as a paragraph rather than a ribbon. */
.prow, .psub { display: grid; grid-template-columns: 2fr 4.4fr 3.6fr; gap: 16px var(--gap); align-items: baseline; }
.prow .d { display: grid; gap: 2px; } .prow .d b { font-weight: 600; font-size: var(--tb); letter-spacing: -0.02em; }
.prow .h { font-weight: 700; font-size: var(--t4); letter-spacing: -0.04em; line-height: 0.95; }
.prow .h i { font-style: italic; }
.prow .s { color: var(--grey-2); font-size: var(--ts); line-height: 1.45; }
.prow .s p { margin: 0 0 0.85em; }
.prow .s p:last-child { margin-bottom: 0; }
/* who plays what, set as a small table rather than run into the paragraph */
.lineup { list-style: none; margin: 0 0 0.9em; padding: 0; display: grid; }
.lineup li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 6px 0; border-top: 1px solid var(--line-l); }
.lineup b { font-weight: 500; color: var(--ink); }
.lineup span { font-family: var(--mono); font-size: var(--tm); letter-spacing: 0.02em; color: var(--grey); }
.prow .s i { font-style: italic; }
/* a partner mark credited inside an act, e.g. RTS Muzicka produkcija on the Big Band */
.prow .s .credit { margin-top: 1.1em; }
.prow .s .credit .lg { --h: 30px; opacity: 0.55; }
.prow[data-photo] { cursor: default; }
.prow[data-photo]:hover .h { color: var(--grey-2); }
/* the second act of an evening: same columns, half the voice */
.psub { margin-top: 18px; }
.psub .h { font-weight: 500; font-size: var(--t6); letter-spacing: -0.02em; line-height: 1.2; color: var(--grey-2); }
/* the second act is an addition to the evening, not a billing of its own */
.psub .plus { margin-right: 0.42em; font-weight: 400; color: var(--grey); }
.psub .s { color: var(--grey); font-size: var(--ts); line-height: 1.45; }

/* the act's photograph, floating beside the pointer while its row is hovered (Freshman) */
.phov { position: fixed; top: 0; left: 0; z-index: 60; width: min(32vw, 400px); margin: 0;
  pointer-events: none; opacity: 0; transition: opacity 300ms ease; will-change: transform; }
.phov.on { opacity: 1; }
.phov .in { aspect-ratio: var(--ar, 3 / 2); background: var(--ink-2) center / cover no-repeat; transform: scale(0.94);
  box-shadow: 0 34px 70px -34px rgba(17, 17, 16, 0.7); transition: transform 460ms cubic-bezier(.2,.8,.2,1); }
.phov.on .in { transform: scale(1); }
.phov figcaption { margin-top: 8px; color: var(--grey); }
@media (max-width: 860px) { .phov { display: none; } }
.foot-row { margin-top: var(--sp3); display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.foot-row .note { max-width: 46ch; color: var(--grey-2); font-size: var(--ts); }

/* ---------- HOME · dvadeset ---------- */
.twenty h2 { grid-column: 1 / 8; font-size: var(--t2); }
.twenty h2 em { font-style: normal; color: var(--grey); }
.twenty .intro { grid-column: 8 / -1; align-self: end; }
.twenty .factline { grid-column: 1 / 8; margin-top: var(--sp4); }
.years { grid-column: 1 / 8; margin-top: var(--sp4); display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; }
.yr { aspect-ratio: 3 / 4; border: 1px solid var(--line-d); display: flex; align-items: end; padding: 8px; font-size: var(--tm); font-weight: 500; color: var(--grey); background: rgba(24,24,22,0.7); transition: border-color 160ms, color 160ms, transform 300ms; }
.yr:hover { border-color: var(--bone); color: var(--bone); transform: translateY(-3px); }
.yr.now { background: var(--yellow); color: var(--ink); border-color: var(--yellow); font-weight: 600; }
.twenty .photo { grid-column: 8 / -1; grid-row: 2 / 4; align-self: stretch; margin-top: var(--sp5); margin-left: var(--gap); aspect-ratio: 4 / 5; }
.twenty .ctas { grid-column: 1 / 8; margin-top: var(--sp4); display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- news list ---------- */
.news-head { align-items: end; }
.news-head h2 { grid-column: 1 / 9; font-size: var(--t2); }
.news-head { margin-bottom: var(--sp3); }
.news-head a { grid-column: 10 / -1; justify-self: end; padding-bottom: 0.5em; font-size: var(--tui); font-weight: 500; }
/* Novosti is a disclosure list: every item opens where it stands.
   The wrapper animates grid-template-rows 0fr -> 1fr, which is the only way to ease to a
   height the content decides; visibility is switched after the ease so a closed panel is
   out of the tab order and unreadable to assistive tech. */
.acc { grid-column: 1 / -1; }
.acc .ai { border-top: 1px solid var(--line-l); }
.acc .ai:last-child { border-bottom: 1px solid var(--line-l); }
.acc .at { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; width: 100%; padding: 26px 0; cursor: pointer; }
.acc .at:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.acc h3 { font-weight: 600; font-size: var(--t5); letter-spacing: -0.03em; line-height: 1.1; }
.acc .at > span { transition: color 160ms; }
.acc .at:hover > span { color: var(--grey-2); }
.acc .pm { position: relative; flex: none; width: 17px; height: 17px; }
.acc .pm::before, .acc .pm::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--ink);
  transition: transform 340ms cubic-bezier(.2,.8,.2,1), opacity 240ms; }
.acc .pm::before { width: 100%; height: 1.5px; }
.acc .pm::after { width: 1.5px; height: 100%; }
.acc .ai.on .pm::after { transform: scaleY(0); opacity: 0; }
.acc .aw { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 440ms cubic-bezier(.2,.8,.2,1); }
.acc .ai.on .aw { grid-template-rows: 1fr; }
.acc .ab { overflow: hidden; visibility: hidden; transition: visibility 0s 440ms; }
.acc .ai.on .ab { visibility: visible; transition: visibility 0s 0s; }
.acc .in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
  padding-bottom: var(--sp4); }
.acc .txt { color: var(--grey-2); font-size: var(--ts); line-height: 1.55; }
.acc .txt p { margin: 0 0 0.9em; }
.acc .txt p:last-child { margin-bottom: 0; }
.acc .txt .btn { margin-top: 6px; }

/* every news card is the same object: a dark inset sheet, its subject on the left,
   the words on the right */
.acc .panel { grid-column: 1 / -1; position: relative; overflow: clip; border-radius: var(--r);
  background: var(--ink); color: var(--bone); padding: var(--sp4);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp4); align-items: center; }
.acc .panel > * { position: relative; z-index: 1; }
.acc .panel .txt { color: rgba(239, 237, 230, 0.82); font-size: var(--tb); line-height: 1.55; max-width: 48ch; }
.acc .panel .txt p { margin: 0 0 0.95em; }
.acc .panel .txt p:last-child { margin-bottom: 0; }
.acc .panel .cover { margin: 0; display: grid; gap: 10px; justify-items: start; }
.acc .panel .cover img { display: block; width: clamp(132px, 15vw, 196px); height: auto;
  box-shadow: 0 32px 64px -28px rgba(0, 0, 0, 0.95); }
.acc .panel .cover figcaption { color: var(--grey); }
/* the mark is drawn as a halftone screen (assets/spotify-dots.svg, 729 baked circles) so the
   pulse runs through dots exactly like the .sig dividers in the hero */
.acc .panel .spot { position: relative; flex: none; width: clamp(104px, 12vw, 160px); aspect-ratio: 1;
  background-color: rgba(255, 229, 0, 0.3);
  -webkit-mask: url(spotify-dots.svg) center / contain no-repeat;
  mask: url(spotify-dots.svg) center / contain no-repeat; }
.acc .panel .spot::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 229, 0, 0.92) 0 30%, rgba(255, 229, 0, 0) 70%);
  background-repeat: no-repeat; background-position: 50% 50%; background-size: 0% 0%;
  animation: sig 4.4s cubic-bezier(.25,.6,.35,1) infinite; }
@media (max-width: 860px) {
  .acc .in { grid-template-columns: 1fr; gap: 24px; }
  .acc .panel { grid-template-columns: 1fr; justify-items: start; gap: 24px; }
  .acc .panel .cover img { width: 150px; }
  .acc .panel .spot { width: 120px; }
}

/* ---------- faq ---------- */
.faq .mono { margin-bottom: 14px; }
.faq details { border-top: 1px solid var(--line-l); }
.faq details:last-child { border-bottom: 1px solid var(--line-l); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 18px; letter-spacing: -0.015em; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--grey-2); font-weight: 400; transition: transform 200ms; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--grey-2); max-width: 52ch; }
.dark .faq details, .dark .faq details:last-child { border-color: var(--line-d); } .dark .faq details p, .dark .faq summary::after { color: var(--grey); }

/* ---------- playlist (jubilee page) ---------- */
.play .player { grid-column: 1 / 6; display: grid; gap: 14px; align-content: start; }
.play .spot { grid-column: 1 / 5; align-self: center; justify-self: start; width: min(100%, 300px); aspect-ratio: 1; background: var(--yellow); opacity: 0.32;
  -webkit-mask: url(spotify.svg) center / contain no-repeat; mask: url(spotify.svg) center / contain no-repeat; }
.play .player iframe { display: block; width: 100%; border: 0; border-radius: 12px; background: var(--ink-2); }
.play .player .btn { justify-self: start; }
.play .body { grid-column: 6 / -1; display: grid; align-content: center; gap: 18px; }
.play .body h2 { font-size: var(--t4); }
.play .body p { color: var(--grey); max-width: 46ch; }
.fine { font-size: var(--tl); max-width: 60ch; }
.play .body .fine { color: var(--grey); max-width: 46ch; }

/* ---------- returning acts + names cloud ---------- */
.returns { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.ret { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-d); font-size: var(--tui); }
.ret b { font-weight: 600; } .ret span { color: var(--yellow); font-weight: 600; font-variant-numeric: tabular-nums; }
.light .ret { border-color: var(--line-l); } .light .ret span { color: var(--grey-2); }
.tracks div { display: grid; grid-template-columns: 6ch minmax(0,1fr) minmax(0,1fr); gap: 8px 16px; padding: 9px 0; border-bottom: 1px solid var(--line-d); font-size: var(--ts); align-items: baseline; }
.tracks { border-top: 1px solid var(--line-d); }
.tracks .y { font-family: var(--mono); font-size: var(--tm); letter-spacing: 0.02em; color: var(--yellow); padding-top: 3px; white-space: nowrap; }
.tracks .y em { font-style: normal; color: var(--grey); margin-left: 2px; cursor: help; }
.tracks .s { font-weight: 500; }
.tracks .n { color: var(--grey); text-align: right; }
.light .tracks, .light .tracks div { border-color: var(--line-l); } .light .tracks .y { color: var(--grey-2); } .light .tracks .n { color: var(--grey-2); }
@media (max-width: 960px) { .play .player, .play .spot, .play .body { grid-column: 1 / -1; } .play .spot { width: 140px; } .play .body { margin-top: 28px; } }
@media (max-width: 720px) { .tracks div { grid-template-columns: 6ch 1fr; } .tracks .n { grid-column: 2; text-align: left; color: var(--grey); } }

/* ---------- newsletter + partners ---------- */
.nl h2 { grid-column: 1 / 7; font-size: var(--t2); }
.nl .side { grid-column: 7 / -1; display: grid; gap: 18px; align-self: end; }
.nl .side p { color: var(--grey-2); max-width: 44ch; }
form.f { display: grid; gap: 14px; }
form.f .row2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.f label { display: grid; gap: 6px; font-size: var(--tl); font-weight: 500; color: var(--grey-2); }
.dark .f label { color: var(--grey); }
.f input, .f select, .f textarea { font: 16px var(--sans); padding: 13px 16px; border: 1px solid currentColor; background: transparent; color: inherit; min-width: 0; width: 100%; border-radius: 0; }
.f textarea { min-height: 140px; resize: vertical; }
.f input::placeholder, .f textarea::placeholder { color: var(--grey); }
.f .fine { font-size: var(--tm); color: var(--grey-2); } .dark .f .fine { color: var(--grey); }
.f .ok { font-weight: 500; font-size: var(--t6); }
.partners .tier { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: 22px 0; border-top: 1px solid var(--line-l); align-items: start; }
.partners .tier:last-child { border-bottom: 1px solid var(--line-l); }
.partners .tier .mono { grid-column: 1 / 3; padding-top: 6px; }
.partners .logos { grid-column: 3 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp3) var(--sp4); }
.partners .lg.big { --h: 52px; }
.logo { height: 64px; padding: 0 22px; display: grid; place-items: center; border: 1px solid var(--line-l); font-size: var(--tl); font-weight: 500; color: var(--grey-2); }
.logo.big { height: 120px; padding: 0 56px; } .logo.sm { height: 48px; padding: 0 16px; }

/* ---------- footer ---------- */
.foot { padding-bottom: 0; overflow: hidden; }
.foot .cols { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 32px; }
.foot .col { display: grid; gap: 8px; align-content: start; }
.foot .col .mono { margin-bottom: 6px; }
.foot .col a { font-size: var(--ts); } .foot .col a:hover { color: var(--yellow); }
.foot .c1 { grid-column: 1 / 4; } .foot .c3 { grid-column: 4 / 7; } .foot .c4 { grid-column: 8 / -1; }
.foot .c4 p { color: var(--grey); max-width: 40ch; font-size: var(--ts); line-height: 1.5; }
.foot .c4 b { color: var(--bone); font-weight: 500; }
.foot .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; color: var(--grey); margin-top: var(--sp6); font-size: var(--tl); }
.foot .live { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tm); letter-spacing: 0.04em; }
.foot .live b { font-weight: 500; color: var(--bone); font-variant-numeric: tabular-nums; }
.tag { color: var(--grey-2); } .dark .tag { color: var(--grey); }
.foot .big { grid-column: 1 / -1; font-size: clamp(90px, 19.4vw, 360px); line-height: 0.74; margin: 8px 0 -0.16em; }

/* a row of photographs inside a text block */
.fotored { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--sp3); }
.fotored .duo { aspect-ratio: 3 / 2; }
.fotored .duo img { transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.fotored .duo:hover img { transform: scale(1.04); }
.fotored figcaption { position: absolute; left: 12px; bottom: 10px; z-index: 2; color: var(--bone); font-size: var(--tm); font-weight: 500; }
@media (max-width: 720px) { .fotored { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a full-bleed band of photographs, a breather between sections */
.band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: var(--sp4) calc(-1 * var(--gutter)) calc(-1 * var(--pb)); }
.band .duo { aspect-ratio: 4 / 3; }
.band .duo img { transition: transform 900ms cubic-bezier(.2,.8,.2,1); }
.band .duo:hover img { transform: scale(1.04); }
@media (max-width: 860px) { .band { grid-template-columns: repeat(3, 1fr); } .band .duo:nth-child(n+4) { display: none; } }

/* ---------- HOME · info: where it happens, the poster show, the two ways in ---------- */
.info .where { grid-column: 1 / -1; grid-row: 1; display: grid; justify-items: center; text-align: center; gap: 18px; margin-bottom: var(--sp5); }
.info .where .venue { --h: clamp(64px, 7.5vw, 112px); background: var(--bone); opacity: 0.92; }
.info .addr { font-size: var(--t6); font-weight: 500; letter-spacing: -0.01em; line-height: 1.4; color: var(--bone-2); }
/* four posters from the archive, fanned along the foot of the sheet and dissolving into it
   (Siena Film Foundation). Solid at the top, the mask alone does the dissolve. */
.info .fan { grid-column: 1 / 8; grid-row: 2; position: relative; aspect-ratio: 1 / 0.56; align-self: end;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 62%, rgba(0, 0, 0, 0) 100%); }
.info .fan img { position: absolute; bottom: 0; filter: saturate(0.82) contrast(1.04);
  box-shadow: 0 34px 64px -30px rgba(0, 0, 0, 0.95); transition: transform 700ms cubic-bezier(.2,.8,.2,1); }
.info .fan .p1 { left: 1%;  width: 36%; opacity: 0.55; transform: rotate(-12deg) translateY(-11%); }
.info .fan .p2 { left: 21%; width: 38%; opacity: 0.7;  transform: rotate(-6deg) translateY(-5%); }
.info .fan .p3 { left: 41%; width: 38%; opacity: 0.85; transform: rotate(0deg) translateY(-8%); }
.info .fan .p4 { left: 61%; width: 39%; opacity: 1;    transform: rotate(7deg) translateY(-3%); }
.info .fan:hover .p1 { transform: rotate(-15deg) translateY(-15%); }
.info .fan:hover .p2 { transform: rotate(-8deg) translateY(-9%); }
.info .fan:hover .p3 { transform: rotate(0deg) translateY(-12%); }
.info .fan:hover .p4 { transform: rotate(9deg) translateY(-7%); }
.info .aside { grid-column: 9 / -1; grid-row: 2; align-self: center; display: grid; justify-items: start; gap: 14px; align-content: center; }
.info .aside h2 { font-size: var(--t4); }
.info .aside .prose { max-width: 34ch; }
.info .jump { display: grid; gap: 2px; margin-top: 10px; width: 100%; }
.info .jump a { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line-d); font-size: var(--t6); font-weight: 500; letter-spacing: -0.02em; }
.info .jump a:last-child { border-bottom: 1px solid var(--line-d); }
.info .jump a:hover { color: var(--yellow); }
/* the desktop composition pins explicit rows; stacking needs them released as well */
@media (max-width: 860px) {
  .info .where, .info .fan, .info .aside { grid-column: 1 / -1; grid-row: auto; }
  .info .where { margin-bottom: 0; }
  .info .fan { aspect-ratio: 1 / 0.62; margin-top: var(--sp3); }
  .info .aside { align-self: start; margin-top: var(--sp4); }
}

/* a row of real posters, each at its own proportion on a common baseline (Pentagram).
   Named .pwall, not .wall: the hero photo grid is #wall.wall and a plain .wall rule broke it. */
.pwall { grid-column: 1 / -1; margin-top: var(--sp4); display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp2); align-items: end; }
.pwall figure { display: grid; gap: 10px; }
.pwall img { width: 100%; height: auto; display: block; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9); }
.pwall figcaption { color: var(--grey); }
@media (max-width: 860px) { .pwall { grid-template-columns: repeat(3, 1fr); } }

/* ---------- O FESTIVALU · the founder ---------- */
.mem .pic { grid-column: 1 / 4; grid-row: 2; margin: 0; align-self: start; }
.mem .pic img { display: block; width: 100%; height: auto; aspect-ratio: 454 / 700; object-fit: cover;
  background: var(--ink-2); box-shadow: 0 30px 64px -32px rgba(0, 0, 0, 0.85); }
.mem .who { grid-column: 1 / -1; grid-row: 1; display: grid; justify-items: start; gap: 8px; align-content: start;
  padding-bottom: var(--sp3); margin-bottom: var(--sp3); border-bottom: 1px solid var(--line-d); }
.mem .who .mono { color: var(--grey); }
.mem .who h2 { font-size: var(--t3); line-height: 0.96; }
.mem .yrs { display: inline-flex; align-items: center; gap: 0.5em; color: var(--grey); letter-spacing: 0.04em; }
.mem .bio { grid-column: 5 / 11; grid-row: 2; color: rgba(239, 237, 230, 0.82); font-size: var(--tb); line-height: 1.6; }
.mem .bio p { margin: 0 0 1em; }
.mem .bio p:last-child { margin-bottom: 0; color: var(--bone); }
@media (max-width: 860px) {
  .mem .pic { grid-column: 1 / -1; grid-row: auto; max-width: 300px; }
  .mem .who, .mem .bio { grid-column: 1 / -1; grid-row: auto; }
  .mem .bio { margin-top: var(--sp3); }
}

/* ---------- GALERIJA ---------- */
/* One dark page: the inner-page header is already ink and the footer is ink, so the gallery
   between them needs no heading and leaves no seam. Colour photographs also sit better on
   ink than on the bone paper the rest of the site uses.
   A real masonry: fixed 4px rows, and each tile's span is computed from its own ratio before
   the picture loads, so nothing reflows on decode. Landscape frames take two columns now and
   then, which is what keeps the rhythm irregular. Refs: Base, Siena Film Foundation. */
.gal { position: relative; background: var(--ink); padding: var(--sp1); overflow: clip; }
/* the footer rounds its top corners against the bone page; here it meets ink flush,
   so the corners would notch two slivers of paper out of the dark */
.gal + .sec.dark.foot { border-radius: 0; }
.gal .dots { position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 229, 0, 0.11) 1px, transparent 1.2px);
  background-size: 22px 22px; }
.gal::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--noise); background-size: 240px 240px; opacity: 0.26; mix-blend-mode: screen; }
.gal .grid { position: relative; z-index: 1; display: grid; gap: var(--sp1);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: 4px; grid-auto-flow: dense; }
.gal .grid figure { position: relative; margin: 0; overflow: hidden; background: var(--ink-2); }
.gal .grid figure img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0;
  transition: opacity 600ms ease, transform 900ms cubic-bezier(.2,.8,.2,1), filter 350ms ease; }
.gal .grid figure img.rdy { opacity: 1; }
/* point at one frame and the rest step back */
.gal .grid:hover figure img { filter: saturate(0.5) brightness(0.55); }
.gal .grid figure:hover img { filter: none; transform: scale(1.04); }
@media (max-width: 720px) { .gal .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 5px; } }
@media (prefers-reduced-motion: reduce) {
  .gal .grid figure img { transition: opacity 600ms ease, filter 350ms ease; }
  .gal .grid figure:hover img { transform: none; }
}

/* ---------- ARHIVA · lista ---------- */
.arh .tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: flex-start; padding: 14px 0; border-top: 1px solid var(--line-l); border-bottom: 1px solid var(--line-l); margin-bottom: 8px; }
.arh .tools .seg { display: flex; gap: 14px; }
.arh .tools button { all: unset; cursor: pointer; font-size: var(--tui); font-weight: 500; color: var(--grey-2); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.arh .tools button.on { color: var(--ink); border-bottom-color: var(--ink); }
.arh .tools .rnd { color: var(--yellow); }
.arh .tools input { margin-left: auto; font: 14px var(--sans); background: transparent; border: 0; border-bottom: 1px solid var(--line-d); color: var(--bone); padding: 8px 0; min-width: 220px; }
.arh .tools input::placeholder { color: var(--grey); }
.arh .list { grid-column: 1 / 8; }
.arh .row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 28px; padding: 10px 0 12px; border-bottom: 1px solid var(--line-l); cursor: pointer; }
.arh .row b { font-weight: 700; letter-spacing: -0.05em; font-size: var(--t2); line-height: 0.95; transition: color 120ms; }
.arh .row .hl { font-size: var(--ts); line-height: 1.45; color: var(--grey-2); }
.arh .row b { color: var(--ink); }
/* yellow on bone is ~1.1:1, so the active year is marked by a solid yellow block behind it */
.arh .row:hover b, .arh .row.on b { background: var(--yellow); box-shadow: 0 0 0 0.12em var(--yellow); }
.arh .row[hidden] { display: none; }
.arh .poster-col { grid-column: 8 / -1; }
.arh .sticky { position: sticky; top: 24px; display: grid; gap: 12px; }
.arh .poster { aspect-ratio: 1 / 1.2; position: relative; overflow: hidden; background: #0B0B0A; border-radius: 3px; }
.arh .poster .pp { position: absolute; inset: 0; display: grid; place-items: center; padding: 7%; opacity: 0; transition: opacity 260ms; }
.arh .poster .pp.on { opacity: 1; }
/* the letterbox is filled by the poster itself, blurred right down: a light spill, not a void */
.arh .poster .pp i { position: absolute; inset: -12%; background: center / cover no-repeat; filter: blur(40px) saturate(0.3) brightness(0.42); }
.arh .poster .pp img { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.9); }
.arh .poster .soon { position: relative; color: var(--grey); }
.arh .caption { display: flex; justify-content: space-between; gap: 16px; }
.arh .caption { color: var(--grey-2); }
.arh .caption b { color: var(--ink); font-weight: 500; }

/* ---------- PROGRAM · schedule rows ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips button { all: unset; cursor: pointer; font-size: var(--tui); font-weight: 500; padding: 8px 12px; border: 1px solid var(--line-d); color: var(--grey); transition: border-color 160ms, color 160ms; }
.light .chips a, .light .chips button { border-color: var(--line-l); color: var(--grey-2); }
.chips .on, .chips a:hover, .chips button:hover { border-color: var(--yellow); color: var(--yellow); }
.light .chips .on, .light .chips button:hover { border-color: var(--ink); background: var(--ink); color: var(--bone); }
.sched { grid-column: 1 / -1; }
.sched .dayh { display: flex; align-items: baseline; gap: 18px; padding: 40px 0 12px; }
.sched .dayh h2 { font-size: var(--t2); }
.sched .slot { display: grid; grid-template-columns: 7ch 1fr auto; gap: 16px 24px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line-l); }
.sched .slot:last-child { border-bottom: 1px solid var(--line-l); }
.sched .slot .t { font-family: var(--mono); font-size: var(--tl); letter-spacing: 0.02em; color: var(--grey-2); }
.sched .slot .a { font-weight: 600; font-size: var(--t5); letter-spacing: -0.03em; line-height: 1.08; }
.sched .slot .a small { display: block; font-size: var(--ts); font-weight: 400; letter-spacing: 0; color: var(--grey-2); margin-top: 5px; line-height: 1.45; }
.sched .slot .s { font-size: var(--tl); font-weight: 500; color: var(--grey-2); text-align: right; }
.sched .slot.hl .a { font-size: var(--t4); font-weight: 700; }
.sched .slot.jam { background: var(--ink); color: var(--bone); padding: 14px; margin-top: 8px; border: 0; }
.sched .slot.jam .t, .sched .slot.jam .s, .sched .slot.jam .a small { color: var(--grey); }

/* ---------- generic content blocks ---------- */
.block { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; padding: var(--sp4) 0; border-top: 1px solid var(--line-l); align-items: start; }
.dark .block { border-top-color: var(--line-d); }
.block .k { grid-column: 1 / 4; display: grid; gap: 6px; }
.block .k h2, .block .k h3 { font-size: var(--t3); }
.block .v { grid-column: 4 / -1; }
.block .v.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px var(--gap); }
/* ---------- 20 GODINA · the wall of names and the credits ---------- */
.wall-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap;
  padding-bottom: 22px; margin-bottom: var(--sp4); border-bottom: 1px solid var(--line-l); }
.dark .wall-head { border-bottom-color: var(--line-d); }
.wall-head h2 { font-size: var(--t3); }
.wall-head .mono { color: var(--grey); }
.light .wall-head .mono { color: var(--grey-2); }   /* --grey is 2.8:1 on bone */
/* one size, one weight, grey until touched; the touched name goes solid ink and its years
   ride in a yellow pin above it (Fiverr's flowing wall, on our palette) */
.cloud { grid-column: 1 / -1; position: relative; line-height: 1.5; text-wrap: balance; }
/* one size, one weight, grey until touched. The padding is always there so the yellow box
   appears on hover without a single name shifting. */
.cloud .nm { display: inline-block; font-size: var(--t5); font-weight: 500; letter-spacing: -0.03em;
  color: var(--grey-2); padding: 0.05em 0.2em; margin: 0 0.22em 0.1em -0.2em; cursor: default; outline: none;
  background-color: transparent; opacity: 0; transform: translateY(6px);
  transition: color 140ms, background-color 140ms, opacity 600ms ease var(--d, 0ms), transform 600ms cubic-bezier(.2,.8,.2,1) var(--d, 0ms); }
.cloud.in .nm { opacity: 1; transform: none; }
.cloud .nm:hover, .cloud .nm:focus-visible { background-color: var(--yellow); color: var(--ink); }
.cloud .pin { position: absolute; z-index: 3; transform: translate(-50%, -112%); background: var(--ink); color: var(--bone);
  font-family: var(--mono); font-size: var(--tm); font-weight: 500; letter-spacing: 0.02em; padding: 5px 9px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity 140ms; }
.cloud .pin.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cloud .nm { transition: color 140ms, background-color 140ms; } }

/* the mark, blown up as a halftone screen behind the names, with a slow glimmer crossing it */
#svirali .ghost { position: absolute; z-index: 0; pointer-events: none;
  right: -8vw; bottom: -6vw; width: min(88vw, 1040px); aspect-ratio: 1;
  background-color: rgba(255, 229, 0, 0.34);
  -webkit-mask: url(mark-dots.svg) center / contain no-repeat; mask: url(mark-dots.svg) center / contain no-repeat; }
#svirali .ghost::after { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 229, 0, 0.3) 0 16%, rgba(255, 229, 0, 0) 62%);
  background-repeat: no-repeat; background-size: 62% 62%; background-position: -25% 125%;
  animation: glim 17s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes glim { 0% { background-position: -25% 125%; } 55%, 100% { background-position: 125% -25%; } }
@media (prefers-reduced-motion: reduce) { #svirali .ghost::after { animation: none; background-position: 50% 50%; } }
@media (max-width: 860px) { #svirali .ghost { width: 118vw; right: -30vw; bottom: -12vw; } }

.credits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.credits .lead { grid-column: 1 / 5; display: grid; gap: 10px; align-content: start;
  opacity: 0; transform: translateY(8px); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.8,.2,1); }
.credits .lead .mono { color: var(--grey); }
.credits .lead b { font-weight: 700; font-size: var(--t4); letter-spacing: -0.04em; line-height: 0.98; color: var(--bone); }
.credits .crew { grid-column: 5 / -1; list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--gap); }
.credits .crew li { break-inside: avoid; padding: 9px 0; border-bottom: 1px solid var(--line-d);
  font-size: var(--t6); font-weight: 500; letter-spacing: -0.02em; color: var(--bone); position: relative;
  opacity: 0; transform: translateY(8px); transition: opacity 600ms ease var(--d, 0ms), transform 600ms cubic-bezier(.2,.8,.2,1) var(--d, 0ms), color 160ms; }
.credits .crew li::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 420ms cubic-bezier(.2,.8,.2,1); }
.credits .crew li:hover { color: var(--yellow); }
.credits .crew li:hover::after { transform: scaleX(1); }
.credits .crew li:nth-child(n)  { --d: 60ms; } .credits .crew li:nth-child(n+4)  { --d: 160ms; } .credits .crew li:nth-child(n+7)  { --d: 260ms; }
.credits .crew li:nth-child(n+10) { --d: 360ms; } .credits .crew li:nth-child(n+13) { --d: 460ms; }
.credits.in .lead, .credits.in .crew li { opacity: 1; transform: none; }
.credits .also { grid-column: 5 / -1; margin-top: 18px; color: var(--grey); font-size: var(--ts); }
@media (max-width: 960px) { .credits .lead, .credits .crew, .credits .also { grid-column: 1 / -1; } .credits .crew { margin-top: 24px; } }
@media (max-width: 640px) { .credits .crew { columns: 1; } }
.duo .dummy { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; color: var(--grey-2); text-align: center; padding: 20px; font-size: var(--tl); }
.kontakt .left { grid-column: 1 / 6; display: grid; gap: 22px; align-content: start; }
.kontakt .right { grid-column: 7 / -1; }
.kontakt .soc { display: grid; gap: 8px; }
.kontakt .soc a { font-weight: 600; font-size: var(--t5); letter-spacing: -0.03em; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line-l); padding: 10px 0; }
.kontakt .soc a:hover { color: var(--grey-2); }
.f .extra[hidden] { display: none; }

/* ---------- mobile: the picture that belongs to a row ----------
   Desktop has the pointer-led hover card on the programme and the sticky poster panel on
   the archive. Neither survives a touch screen, so below 860px the row carries a chip and
   the picture opens over the page. The figure takes no pointer events, which is what makes
   a tap anywhere, the photograph included, go back. */
.thumb { all: unset; display: none; }
.lb { position: fixed; inset: 0; z-index: 80; display: none; }
.lb.on { display: block; }
.lb .scrim { all: unset; position: absolute; inset: 0; cursor: zoom-out; background: rgba(10, 10, 9, 0.94);
  opacity: 0; transition: opacity 280ms ease; }
.lb .scrim::after { content: ""; position: absolute; inset: 0; background-image: var(--noise);
  background-size: 240px 240px; opacity: 0.3; mix-blend-mode: screen; }
.lb.in .scrim { opacity: 1; }
.lb .x { all: unset; position: absolute; top: 14px; right: var(--gutter); z-index: 2; cursor: pointer;
  padding: 10px 2px; font-family: var(--sans); font-size: var(--tui); font-weight: 500; color: var(--bone);
  opacity: 0; transition: opacity 280ms ease; }
.lb.in .x { opacity: 1; }
.lb figure { position: absolute; inset: 0; z-index: 1; margin: 0; pointer-events: none;
  display: grid; align-content: center; justify-items: center; gap: 16px; padding: 62px 14px 42px; }
.lb img { max-width: 100%; max-height: 78vh; width: auto; height: auto; display: block;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.9); opacity: 0; transform: scale(0.96);
  transition: opacity 320ms ease, transform 460ms cubic-bezier(.2,.8,.2,1); }
.lb.in img { opacity: 1; transform: none; }
.lb figcaption { color: var(--grey); text-align: center; opacity: 0; transition: opacity 320ms ease 60ms; }
.lb.in figcaption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lb .scrim, .lb .x, .lb img, .lb figcaption { transition: none; }
  .lb img { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .thumb { display: block; position: relative; overflow: hidden; cursor: pointer; background: var(--ink-2);
    -webkit-tap-highlight-color: transparent; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
  .thumb img { display: block; width: 100%; height: 100%; }
  .thumb::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: var(--noise); background-size: 220px 220px; opacity: 0.28; mix-blend-mode: overlay; }
  .thumb:active { transform: scale(0.985); }

  /* the act: a band under its name, cropped high so faces survive the crop */
  .prow .thumb { width: 100%; height: 112px; margin: 15px 0 3px; }
  .prow .thumb img { object-fit: cover; object-position: center 35%; }

  /* the year: the poster whole on a dark plate. Contained, not cropped, so the row keeps
     one rhythm although the posters themselves run from a tall banner to a wide landscape */
  .arh .row { grid-template-columns: auto 1fr; gap: 6px 14px; }
  .arh .row b { grid-column: 1; grid-row: 1; }
  .arh .row .thumb { grid-column: 2; grid-row: 1; justify-self: start; align-self: center;
    width: 52px; height: 64px; }
  .arh .row .thumb img { object-fit: contain; }
  .arh .row .hl { grid-column: 1 / -1; grid-row: 2; }
  /* the panel it replaces would otherwise unstick and pile up under twenty years of list */
  .arh .poster-col { display: none; }
}

@media (max-width: 960px) {
  .head h2, .head .lede, .twenty h2, .twenty .intro, .nl h2, .nl .side, .news-head h2, .news-head a, .phead h1, .phead .lede { grid-column: 1 / -1; }
  .twenty .factline, .years, .twenty .ctas { grid-column: 1 / -1; } .twenty .photo { grid-column: 1 / -1; grid-row: auto; margin-left: 0; aspect-ratio: 16 / 10; }
  .partners .tier .mono, .partners .logos { grid-column: 1 / -1; }
  .foot .c1, .foot .c3, .foot .c4 { grid-column: span 6; }
  .arh .list, .arh .poster-col { grid-column: 1 / -1; } .arh .sticky { position: static; } .arh .poster { max-width: 360px; }
  .block .k, .block .v { grid-column: 1 / -1; }
  /* every two-column head stacks here, and .g only ever carried a column gap, so each
     lede landed flush against the heading it belongs to */
  .block { row-gap: var(--sp3); }
  .phead .lede, .head .lede, .twenty .intro, .nl .side, .news-head a { margin-top: var(--sp3); }
  .news-head a { justify-self: start; }
  .kontakt .left, .kontakt .right { grid-column: 1 / -1; }
  .prow, .psub { grid-template-columns: 1fr 1fr; } .prow .s, .psub .s { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .top { grid-template-columns: 1fr auto; } .top nav, .top .pill { display: none; } .top .burger { display: block; }
  .strip .cell, .strip .cell.sup { flex: 1 1 45%; border-left: 0; padding-left: 0; }
  .strip .cell:nth-child(2n) { border-left: 1px solid var(--line-l); padding-left: 14px; }
  .years { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  form.f .row2 { grid-template-columns: 1fr; }
  .foot .c1, .foot .c2, .foot .c3, .foot .c4 { grid-column: 1 / -1; }
  .arh .row { gap: 6px 12px; }
  .block .v.split { grid-template-columns: 1fr; }
  .sched .slot { grid-template-columns: 1fr; gap: 6px; } .sched .slot .s { text-align: left; }
  .prow, .psub { grid-template-columns: 1fr; }
}
/* ---------- the phone ----------
   Audited at 375px. The two wordmarks kept their desktop minimum and ran off the right
   edge; the partner marks are sized from their aspect ratio, so the widest ran past the
   screen; the hero caption wrapped with its dots orphaned at line starts. */
@media (max-width: 720px) {
  .hero .big { font-size: 21.5vw; }
  .foot .big { font-size: 19.4vw; }
  .hero .cap { top: 76px; right: var(--gutter); }
  .hero .cap .l { display: grid; gap: 0.12em; }
  .hero .cap .l .sig { display: none; }
  /* one grid, one height: a mark can be as wide as its cell and no wider */
  .partners .logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
  .partners .lg, .partners .lg.big { width: 100%; height: 44px;
    -webkit-mask-position: left center; mask-position: left center; }
  /* the menu is the whole screen, so the links can be too; the page you are on is yellow */
  .menu { padding: 84px var(--gutter) 34px; gap: 0.16em; }
  .menu a { font-size: 13.5vw; padding: 0.05em 0; }
  .menu a[aria-current="page"] { color: var(--yellow); }
}
/* a tap is not a hover: without a pointer the gallery's step-back would stick on whichever
   photograph was touched last */
@media (hover: none) {
  .gal .grid:hover figure img { filter: none; }
  .gal .grid figure:hover img { transform: none; }
}

@media (prefers-reduced-motion: reduce) { .arrow, .yr, .link, .news h3 a, .news h2.nh a { transition: none; } .hero .t { transition: none; } .dark::after { transition: none; } }