/* ── The stelvio look (?look=stelvio) ────────────────────────────────
 * A comparison variant after k95.it/en/projects/stelvio-grotesk, taken over
 * measure for measure: the studio's electric blue and white, its 58px margin
 * and twelve-column grid, its one grotesque at 16px with half a pixel of
 * tracking, its fixed nav, its hero of title / panel / date, and its project
 * sheet. The reference sets Adaptive Grotesk, the studio's own face;
 * Instrument Sans is the nearest free relative and stands in for it. No
 * curtain, no brass. */
/* ── Base: the few rules of the former look's site.css these pages still
 * rest on, now that they load this sheet alone (no curtain image, no --fin-*
 * tokens). The scope sits in :where() so each rule keeps the weight it had
 * there and every stelvio rule below still wins over it. Text is never
 * resized by the browser on its own, and never pinned against the reader's
 * zoom either (100%, not none). */
html:where(:has([data-look^="stelvio"])) { color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(html:has([data-look^="stelvio"])) * { box-sizing: border-box; }
:where(html:has([data-look^="stelvio"])) body { margin: 0; }
:where(html:has([data-look^="stelvio"])) :is(button, a) { -webkit-tap-highlight-color: transparent; }
:where(html:has([data-look^="stelvio"])) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 5px; }
:where(html:has([data-look^="stelvio"])) :is(a, button, summary) { transition: color .25s cubic-bezier(.2, .7, .2, 1), background .25s cubic-bezier(.2, .7, .2, 1), transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s cubic-bezier(.2, .7, .2, 1), filter .25s cubic-bezier(.2, .7, .2, 1); }
:where(html:has([data-look^="stelvio"])) :is(a, button, summary):active { transform: translateY(2px); }
:where(html:has([data-look^="stelvio"])) :is(figure, h1, h2, h3, p) { margin: 0; }
:where(html:has([data-look^="stelvio"])) .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(html:has([data-look^="stelvio"])) [hidden] { display: none !important; }
:where(html:has([data-look^="stelvio"])) .site { margin-inline: auto; }
:where(html:has([data-look^="stelvio"])) .clock { font-variant-numeric: tabular-nums; white-space: nowrap; }
:where(html:has([data-look^="stelvio"])) .version { letter-spacing: .04em; white-space: nowrap; }
:where(html:has([data-look^="stelvio"])) abbr[title] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  :where(html:has([data-look^="stelvio"])) *, :where(html:has([data-look^="stelvio"])) *::before, :where(html:has([data-look^="stelvio"])) *::after { animation: none !important; transition: none !important; }
}
/* The palette: the only place a colour is written. Every rule below reads a
 * role, and the derived surfaces mix the roles, so a page takes another palette
 * by redefining the roles on the same element, for instance the inner pages
 * with html:has([data-look^="stelvio"] [data-sv-inner]) { --sv-bg: …; … }. */
html:has([data-look^="stelvio"]) {
  --sv-bg: #DE243A;               /* ground: Kirschrot, dunkler als #E8283F, damit Weiß 4.75:1 erreicht */
  --sv-fg: #FFFFFF;               /* text, rules and dots on the ground */
  --sv-accent: #DE243A;           /* the red as a colour: the loader's counter, text on the solid pill */
  --sv-on-accent: #FFFFFF;        /* text set on the accent */
  --sv-ink: #1C1C1C;              /* the dark that surfaces are mixed with */
  --sv-frame-empty: #0C0A0C;      /* a picture frame with no picture */
  --sv-loader-bg: #FFFFFF;        /* the home page's loader */
  --sv-pill-bg: var(--sv-fg);     /* the solid pill: Tickets, the chosen view, the chosen day */
  --sv-pill-fg: var(--sv-accent); /* its text */
  --sv-focus: var(--sv-fg);       /* the focus ring on the ground */
  --sv-focus-inner: var(--sv-bg); /* the ring just inside a solid pill */
  --sv-cursor: var(--sv-fg);      /* the dot, in difference blend */
  --sv-wordmark: var(--sv-fg);    /* "Fin" in the nav */
  --sv-shadow: var(--sv-ink);     /* what the open menu's shadow is mixed from */
  --sv-white: var(--sv-fg);       /* kept: the name the static sheet shares */
  --sv-qr-bg: var(--sv-fg);       /* the App Store code: light ground, dark modules, 7:1 and more */
  --sv-qr-fg: var(--sv-ink);
  /* Surfaces mixed from the roles; never text. */
  --sv-glass: color-mix(in srgb, var(--sv-ink) 10%, transparent);
  --sv-glass-border: color-mix(in srgb, var(--sv-fg) 20%, transparent);
  --sv-rule: color-mix(in srgb, var(--sv-fg) 24%, transparent);
  --sv-underline: color-mix(in srgb, var(--sv-fg) 45%, transparent);
  --sv-press: color-mix(in srgb, var(--sv-bg) 76%, var(--sv-ink));
  --sv-menu-bg: color-mix(in srgb, var(--sv-bg) 84%, var(--sv-ink));
  --sv-menu-hover: color-mix(in srgb, var(--sv-ink) 20%, transparent);
  --sv-menu-shadow: color-mix(in srgb, var(--sv-shadow) 45%, transparent);
  --sv-frame: color-mix(in srgb, var(--sv-ink) 18%, transparent);
  --sv-loader-rule: color-mix(in srgb, var(--sv-ink) 8%, transparent);
  --sv-scroll-thumb: color-mix(in srgb, var(--sv-fg) 72%, var(--sv-bg));
}
/* The inner pages stand on the blue: the programme, the films, the cinemas and
 * the error pages carry data-sv-inner, the home page does not and stays red.
 * No red on the blue: the solid pill is the off-white with blue text, and the
 * surfaces are mixed from the off-white, as a darker mix barely shows. */
html:has([data-look^="stelvio"] [data-sv-inner]) {
  --sv-bg: #00008B;               /* ground: the owner's blue, to the digit */
  --sv-fg: #F4EDE2;               /* warm off-white: 13.15:1 on the blue */
  --sv-accent: #00008B;           /* text on the off-white pill */
  --sv-on-accent: #F4EDE2;
  --sv-ink: #F4EDE2;              /* the surfaces are mixed from the off-white */
  --sv-frame-empty: #000064;
  --sv-loader-bg: #F4EDE2;
  --sv-pill-bg: var(--sv-fg);
  --sv-pill-fg: var(--sv-accent);
  --sv-focus: var(--sv-fg);
  --sv-focus-inner: var(--sv-bg);
  --sv-cursor: var(--sv-fg);
  --sv-wordmark: var(--sv-fg);
  --sv-shadow: #00004F;           /* a deeper blue under the menus, not a glow */
  --sv-qr-bg: var(--sv-fg);       /* blue modules on the off-white: 13.15:1 */
  --sv-qr-fg: var(--sv-bg);
}
/* The inner pages' other tones, previews for comparing (?tone=red|paper|night|
 * wine|rose|navy; ?tone=blue is the block above). Each redefines the written
 * roles on the page that carries data-sv-tone and nothing else; the surfaces
 * above mix themselves from them. Warm off-whites and inks, never pure white
 * or black, the red excepted: it is the inner pages as they were. */
html:has([data-look^="stelvio"] [data-sv-inner][data-sv-tone="red"]) {
  --sv-bg: #DE243A;
  --sv-fg: #FFFFFF;
  --sv-accent: #DE243A;
  --sv-on-accent: #FFFFFF;
  --sv-ink: #1C1C1C;
  --sv-frame-empty: #0C0A0C;
  --sv-loader-bg: #FFFFFF;
  --sv-pill-bg: var(--sv-fg);
  --sv-pill-fg: var(--sv-accent);
  --sv-focus: var(--sv-fg);
  --sv-focus-inner: var(--sv-bg);
  --sv-cursor: var(--sv-fg);
  --sv-wordmark: var(--sv-fg);
  --sv-shadow: var(--sv-ink);
  --sv-qr-bg: var(--sv-fg);
  --sv-qr-fg: var(--sv-ink);
}
html:has([data-look^="stelvio"] [data-sv-inner][data-sv-tone="paper"]) {
  --sv-bg: #F4ECE0;               /* ground: warm paper */
  --sv-fg: #2A1D1A;               /* ink: 13.9:1 on the paper */
  --sv-accent: #DE243A;           /* the red, as a fill only: 4.06:1 on the paper */
  --sv-on-accent: #FFFAF4;        /* text on the red: 4.58:1 */
  --sv-ink: #5A3A2A;              /* surfaces are mixed from a warm sepia ink, so the glass and the menus stay paper, not grey */
  --sv-frame-empty: #E4D8C6;      /* a frame with no picture: deeper paper */
  --sv-loader-bg: #F4ECE0;
  --sv-pill-bg: var(--sv-accent);
  --sv-pill-fg: var(--sv-on-accent);
  --sv-focus: var(--sv-fg);
  --sv-focus-inner: var(--sv-on-accent);
  --sv-cursor: var(--sv-on-accent);
  --sv-wordmark: var(--sv-accent);
  --sv-shadow: var(--sv-ink);
  --sv-qr-bg: var(--sv-bg);       /* the code on the paper itself: 13.9:1 */
  --sv-qr-fg: var(--sv-fg);
}
html:has([data-look^="stelvio"] [data-sv-inner][data-sv-tone="night"]) {
  --sv-bg: #140E10;               /* ground: a warm near-black */
  --sv-fg: #EFE5D6;               /* cream */
  --sv-accent: #DE243A;           /* the red, as a fill and the wordmark */
  --sv-on-accent: #FFFAF4;        /* text on the red: 4.58:1 */
  --sv-ink: #EFE5D6;              /* at night the surfaces are mixed from the cream */
  --sv-frame-empty: #241B1D;
  --sv-loader-bg: #140E10;
  --sv-pill-bg: var(--sv-accent);
  --sv-pill-fg: var(--sv-on-accent);
  --sv-focus: var(--sv-fg);
  --sv-focus-inner: var(--sv-on-accent);
  --sv-cursor: var(--sv-fg);
  --sv-wordmark: var(--sv-accent);
  --sv-shadow: transparent;       /* flat: no shadow under the menus */
  --sv-qr-bg: var(--sv-fg);       /* dark modules on the cream, as a camera reads best */
  --sv-qr-fg: var(--sv-bg);
}
html:has([data-look^="stelvio"] [data-sv-inner][data-sv-tone="wine"]) {
  --sv-bg: #7E1A2A;               /* ground: bordeaux */
  --sv-fg: #FBF3EA;               /* warm off-white: 9.2:1 on the wine */
  --sv-accent: #7E1A2A;           /* text on the off-white pill */
  --sv-on-accent: #FBF3EA;
  --sv-ink: #1E1215;              /* surfaces are mixed from a warm dark */
  --sv-frame-empty: #4A0F19;
  --sv-loader-bg: #FBF3EA;
  --sv-pill-bg: var(--sv-fg);
  --sv-pill-fg: var(--sv-accent);
  --sv-focus: var(--sv-fg);
  --sv-focus-inner: var(--sv-bg);
  --sv-cursor: var(--sv-fg);
  --sv-wordmark: var(--sv-fg);
  --sv-shadow: var(--sv-ink);
  --sv-qr-bg: var(--sv-fg);
  --sv-qr-fg: var(--sv-ink);
}
html:has([data-look^="stelvio"] [data-sv-inner][data-sv-tone="rose"]) {
  --sv-bg: #F9E6E7;               /* ground: the palest blush paper */
  --sv-fg: #3A1A22;               /* ink with a hint of wine: 12.96:1 on the blush */
  --sv-accent: #DE243A;           /* the red, as a fill and the wordmark: 3.96:1 on the blush */
  --sv-on-accent: #FFFAF4;        /* text on the red: 4.58:1 */
  --sv-ink: #8A3A48;              /* surfaces are mixed from a deep rose, so the glass and the menus stay blush, not grey */
  --sv-frame-empty: #EDD2D5;      /* a frame with no picture: deeper blush */
  --sv-loader-bg: #F9E6E7;
  --sv-pill-bg: var(--sv-accent);
  --sv-pill-fg: var(--sv-on-accent);
  --sv-focus: var(--sv-fg);
  --sv-focus-inner: var(--sv-on-accent);
  --sv-cursor: var(--sv-on-accent);
  --sv-wordmark: var(--sv-accent);
  --sv-shadow: var(--sv-ink);
  --sv-qr-bg: var(--sv-bg);       /* the code on the blush itself: 12.96:1 */
  --sv-qr-fg: var(--sv-fg);
}
html:has([data-look^="stelvio"] [data-sv-inner][data-sv-tone="navy"]) {
  --sv-bg: #132247;               /* ground: a deep, calm navy */
  --sv-fg: #F4EDE2;               /* warm off-white: 13.4:1 on the navy */
  --sv-accent: #132247;           /* text on the off-white pill; no red on the blue */
  --sv-on-accent: #F4EDE2;
  --sv-ink: #F4EDE2;              /* the surfaces are mixed from the off-white: a darker mix barely shows on the navy */
  --sv-frame-empty: #0D1834;
  --sv-loader-bg: #F4EDE2;
  --sv-pill-bg: var(--sv-fg);
  --sv-pill-fg: var(--sv-accent);
  --sv-focus: var(--sv-fg);
  --sv-focus-inner: var(--sv-bg);
  --sv-cursor: var(--sv-fg);
  --sv-wordmark: var(--sv-fg);
  --sv-shadow: #0A1128;           /* the menus' shadow stays a deeper blue, not a glow */
  --sv-qr-bg: var(--sv-fg);       /* navy modules on the off-white: 13.4:1 */
  --sv-qr-fg: var(--sv-bg);
}
body:has([data-look^="stelvio"]) {
  --sv-mark: 'Pinyon Script', 'Snell Roundhand', cursive;
  --sv-margin: 58px;
  --sv-space-high: 160px;
  --sv-space-medium: 80px;
  --sv-space-min: 60px;
  --sv-media-gap: 30px;
  --sv-t35: 2.188em; --sv-t28: 1.75em; --sv-t25: 1.563em; --sv-t20: 1.25em; --sv-t18: 1.125em; --sv-t16: 1em; --sv-t14: .875em;
  --sv-font: 'Instrument Sans', 'Instrument Sans Fallback', system-ui, sans-serif;
  --sv-ease: cubic-bezier(.4, 0, .2, 1);
  --fin-ground: var(--sv-bg);
  --fin-text: var(--sv-fg);
  --fin-text2: var(--sv-fg);
  /* A still of the grain, for the surfaces that cover the moving one: the
   * opaque nav and bar, and the pictures. */
  --sv-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fin-brass: var(--sv-fg);
  /* The row posters, one pair per kind of list, tuned here; 2:3. */
  --sv-thumb-w: 80px; --sv-thumb-h: 120px;
  --sv-fthumb-w: 96px; --sv-fthumb-h: 144px;
  background: var(--sv-bg);
  color: var(--sv-fg);
  font-family: var(--sv-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .5px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body:has([data-look^="stelvio"])::before { display: none; }
/* The nav's height, which the bar below it and every anchor keep clear of:
 * compact on a phone (upright or on its side), and roomy there only while the
 * page is at its top. */
html:has([data-look^="stelvio"]) { --sv-nav-h: 104px; scroll-behavior: auto; scroll-padding-top: calc(var(--sv-nav-h) + 16px); scrollbar-color: var(--sv-scroll-thumb) var(--sv-bg); }
@media (max-width: 768px), (max-height: 500px) {
  html:has([data-look^="stelvio"]) { --sv-nav-h: 64px; }
  html.sv-ready:not(.sv-scrolled):has([data-look^="stelvio"]) { --sv-nav-h: 84px; }
}
/* A sticky bar under the nav (the programme's toolbar, the film index's
 * letters) is kept clear as well, so a focused link never hides behind it. The
 * script measures the bar; without it the fallbacks are a two-row toolbar and
 * one row of letters. On a phone on its side the bars scroll away with the page. */
@media (min-height: 501px) {
  html:has([data-look^="stelvio"]):has(.sv-toolbar) { scroll-padding-top: calc(var(--sv-nav-h) + var(--sv-toolbar-h, 120px) + 16px); }
  html:has([data-look^="stelvio"]):has(.sv-letters) { scroll-padding-top: calc(var(--sv-nav-h) + var(--sv-letters-h, 56px) + 16px); }
}
html.sv-booting { overflow: hidden; }
/* The page is the main content and the foot after it; a short page (an
 * error, an empty day) keeps its foot at the bottom of the window. */
body:has([data-look^="stelvio"]) .site { container-type: normal; display: flex; flex-direction: column; width: 100%; min-height: 100vh; font-family: var(--sv-font); background: transparent; }
[data-look^="stelvio"] { flex: 1 0 auto; width: 100%; color: var(--sv-fg); }
/* Skip link: the first stop for Tab, out of sight until it takes focus, then
 * the white pill over the nav. */
.sv-skip { position: fixed; top: 12px; left: var(--sv-margin); z-index: 2147483647; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; background: var(--sv-pill-bg); color: var(--sv-pill-fg); font-size: 14px; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; transform: translateY(-200%); }
.sv-skip:hover { color: var(--sv-pill-fg); }
.sv-skip:focus { transform: none; }
body:has([data-look^="stelvio"]) .sv-skip:focus-visible { outline-color: var(--sv-focus); outline-offset: 3px; }
[data-look^="stelvio"] a { color: var(--sv-fg); text-decoration: none; transition: none; }
[data-look^="stelvio"] a:hover { color: var(--sv-fg); }
[data-look^="stelvio"] a:active, .sv-nav a:active, .sv-nav summary:active { transform: none; }
body:has([data-look^="stelvio"]) :focus-visible { outline: 2px solid var(--sv-focus); outline-offset: 4px; }
body:has([data-look^="stelvio"]) ::selection { background: var(--sv-fg); color: var(--sv-bg); }
[data-look^="stelvio"] .clock { font: inherit; color: inherit; }
/* A version code keeps its own casing (OmU, OmeU) inside uppercase lines. */
[data-look^="stelvio"] .version { font: inherit; font-size: max(12px, .8em); color: inherit; text-transform: none; margin: 0 .35em; }
[data-look^="stelvio"] .version abbr { text-decoration: none; }
@media (max-width: 767px) { body:has([data-look^="stelvio"]) { --sv-margin: 30px; --sv-thumb-w: 72px; --sv-thumb-h: 108px; --sv-fthumb-w: 80px; --sv-fthumb-h: 120px; } }
@media (min-width: 768px) and (max-width: 1023px) { body:has([data-look^="stelvio"]) { --sv-margin: 40px; } }
.sv-label { font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); font-weight: 400; text-transform: uppercase; }

/* ── Boot loader: white, a stack of tonight's posters growing wider one over
 * the other under a counter, then the blue window that opens onto the page. */
.sv-boot { display: none; position: fixed; inset: 0; z-index: 2147483646; place-content: center; gap: 18px; background: var(--sv-loader-bg); opacity: 1; filter: blur(0); visibility: visible; pointer-events: all; transition: opacity .9s cubic-bezier(.22, 1, .36, 1), filter 1.1s cubic-bezier(.22, 1, .36, 1); }
html.sv-booting .sv-boot { display: grid; animation: sv-unboot 0s 3s forwards; }
/* The loader is switched on before the script arrives; if the script never
 * runs, the page scrolls and shows itself after three seconds all the same. */
html.sv-booting { animation: sv-unlock 0s 3s forwards; }
@keyframes sv-unboot { to { visibility: hidden; opacity: 0; pointer-events: none; } }
@keyframes sv-unlock { to { overflow: visible; } }
.sv-boot.is-fading { opacity: 0; filter: blur(28px); pointer-events: none; }
.sv-boot.is-fading.is-patch-expanding { filter: none; }
.sv-boot-stack { position: relative; z-index: 2; width: min(40vw, 420px); aspect-ratio: 3 / 4; transform: scale(1); transition: transform 2.4s cubic-bezier(.12, .9, .22, 1); will-change: transform; }
.sv-boot.is-fading .sv-boot-stack { transform: scale(1.06); }
.sv-boot.is-patch-preview .sv-boot-stack { opacity: 0; filter: blur(8px); transition: opacity .42s ease, filter .42s ease; }
.sv-boot.is-patch-expanding .sv-boot-stack { opacity: 0; filter: blur(8px); transition: opacity .26s ease, filter .32s ease; }
.sv-boot-layer { position: absolute; top: 50%; left: 50%; width: 0; aspect-ratio: 3 / 4; overflow: hidden; transform: translate(-50%, -50%); background: var(--sv-bg); border: 1px solid var(--sv-loader-rule); }
.sv-boot-layer--final { background: var(--sv-bg) !important; border-color: transparent !important; box-shadow: none !important; }
.sv-boot-img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; background: var(--sv-bg); }
.sv-boot-counter { position: absolute; bottom: 100%; left: calc(100% + 12px); z-index: 11; color: var(--sv-accent); font-size: 14px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.sv-boot-patch { position: fixed; top: 0; left: 0; width: 0; height: 0; z-index: 10; opacity: 0; background: transparent; box-shadow: 0 0 0 200vmax var(--sv-loader-bg); contain: paint; transform: translateZ(0) scale(1); transform-origin: center center; will-change: transform, opacity; pointer-events: none; }
.sv-boot.is-patch-preview .sv-boot-patch, .sv-boot.is-patch-expanding .sv-boot-patch { opacity: 1; }
.sv-boot.is-patch-preview, .sv-boot.is-patch-expanding { background: transparent; }
@media (max-width: 768px) {
  .sv-boot-stack { width: min(72vw, 320px); }
  .sv-boot-counter { font-size: 12px; left: calc(100% + 8px); }
}
@media (max-width: 767px) { .sv-boot-stack { width: min(59vw, 240px); } }

/* ── The layers behind and over the page: the wireframe cylinder, the WebGL
 * canvas that redraws the images while the page scrolls, and the cursor. */
.sv-grid { position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .7s ease; }
.sv-grid.is-on { opacity: 1; }
/* Film grain on the ground: a canvas of moving noise in overlay blend under
 * the page, so text is read on the red it is measured on. The opaque bars and
 * the pictures take a still of the same grain (--sv-noise) over themselves. */
.sv-grain { position: fixed; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; opacity: 0; pointer-events: none; mix-blend-mode: overlay; transition: opacity .7s ease; }
.sv-grain.is-on { opacity: .16; }
.sv-distort { position: fixed; top: 0; left: 0; z-index: 32; width: 100vw; height: 100vh; opacity: 1; pointer-events: none; transition: opacity .35s ease; }
@media (hover: none) and (pointer: coarse) {
  .sv-grid, .sv-grain { height: 100svh; }
  .sv-distort { height: 100svh; }
}
.sv-cursor { position: fixed; top: 0; left: 0; z-index: 2147483647; width: 15px; height: 15px; border: 1px solid transparent; border-radius: 50%; background: var(--sv-cursor); mix-blend-mode: difference; pointer-events: none; transform: translate3d(-100px, -100px, 0) translate(-50%, -50%); transition: width .3s ease, height .3s ease, background .3s ease, border-color .3s ease; will-change: transform; }
.sv-cursor.is-hovering { width: 45px; height: 45px; background: transparent; border-color: var(--sv-cursor); }
/* Reduced motion: no dot trailing the pointer at all; the native cursor stays. */
@media (hover: none), (prefers-reduced-motion: reduce) { .sv-cursor { display: none; } }

/* ── Nav ─────────────────────────────────────────────────────────────── */
/* Opaque in the look's red as soon as anything could pass under it, and
 * whenever no script has said the page is at its top. */
.sv-nav { position: fixed; top: 0; right: 0; left: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; height: var(--sv-nav-h); padding: 0 var(--sv-margin); background-color: var(--sv-bg); pointer-events: auto; transition: height .25s var(--sv-ease); font-family: var(--sv-font); font-size: 16px; letter-spacing: .5px; color: var(--sv-fg); mix-blend-mode: normal; }
.sv-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sv-noise); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
html.sv-ready:not(.sv-scrolled) .sv-nav { background-color: transparent; pointer-events: none; }
html.sv-ready:not(.sv-scrolled) .sv-nav::before { display: none; }
.sv-nav-logo a, .sv-nav-logo-mobile { display: flex; align-items: center; height: 44px; pointer-events: auto; color: var(--sv-wordmark); text-decoration: none; }
/* The mark: a tall flourished F and a smaller "in" in one script face. */
.sv-mark { display: inline-flex; align-items: baseline; font: 400 34px/1 var(--sv-mark); letter-spacing: 0; white-space: nowrap; translate: 0 -4px; }
/* In the compact phone nav the mark steps down to fit the band. */
.sv-nav-logo-mobile .sv-mark { transform-origin: 0 70%; transition: transform .25s var(--sv-ease); }
@media (max-width: 768px) { html:is(.sv-scrolled, :not(.sv-ready)) .sv-nav-logo-mobile .sv-mark { transform: scale(.72); } }
.sv-mark-f { font-size: 62px; line-height: 1; margin-right: -.04em; }
.sv-nav-links { display: flex; align-items: center; gap: 50px; margin: 0; padding: 0; list-style: none; pointer-events: auto; }
.sv-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sv-fg); font-size: .875rem; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.sv-link-text { display: inline-flex; }
.sv-wave { display: inline; }
.sv-wave-word { display: inline-flex; white-space: nowrap; }
.sv-char { position: relative; display: inline-block; height: 1.2em; line-height: 1.2; overflow: hidden; clip-path: inset(0); }
.sv-link-text .sv-char { height: 1em; line-height: 1; }
.sv-char-top, .sv-char::after { display: block; transition: transform .35s var(--sv-ease); transition-delay: calc(var(--i) * 40ms); }
/* The copy that rolls in is drawn from data-ch, so the letter is in the text once. */
.sv-char::after { content: attr(data-ch); position: absolute; top: 0; left: 0; transform: translateY(100%); }
@media (hover: hover) and (pointer: fine) {
  :is(.sv-link, .sv-cat, .sv-external):hover .sv-char-top { transform: translateY(-100%); }
  :is(.sv-link, .sv-cat, .sv-external):hover .sv-char::after { transform: translateY(0); }
}
.sv-link-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--sv-fg); opacity: 0; transform: scale(0); transform-origin: 50% 50%; transition: transform .26s cubic-bezier(.22, 1, .36, 1), opacity .12s linear; }
.sv-link.is-active .sv-link-dot { opacity: 1; transform: scale(1); }
.sv-lang { display: inline-flex; align-items: center; gap: 4px; }
/* Both languages in full white; the one the page is in is underlined. */
.sv-lang-btn, .sv-lang-sep { color: var(--sv-fg); font-size: .875rem; text-transform: uppercase; text-decoration: none; }
.sv-lang-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; pointer-events: auto; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.sv-lang-btn:hover, .sv-lang-btn.is-active { text-decoration-line: underline; }
.sv-lang-btn.is-active { pointer-events: none; }
.sv-lang-sep { pointer-events: none; }
.sv-menu, .sv-nav-logo-mobile { display: none; }
@media (max-width: 768px) {
  .sv-nav .sv-nav-logo { visibility: hidden; }
  .sv-nav-logo-mobile { position: fixed; top: calc((var(--sv-nav-h) - 44px) / 2); left: var(--sv-margin); z-index: 101; display: flex; transition: top .25s var(--sv-ease); }
  .sv-nav-links { display: none; }
  .sv-menu { display: block; pointer-events: auto; }
  .sv-menu-btn { position: relative; z-index: 100; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--sv-glass-border); border-radius: 100px; background: var(--sv-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--sv-fg); font-family: inherit; font-size: 13px; font-weight: 500; text-transform: uppercase; overflow: hidden; cursor: pointer; list-style: none; mix-blend-mode: normal; }
  .sv-menu-btn::-webkit-details-marker { display: none; }
  .sv-btn-spacer { visibility: hidden; pointer-events: none; }
  .sv-btn-phrase { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; gap: 0; transform: translate(-50%, -50%); white-space: nowrap; }
  .sv-btn-char { position: relative; display: inline-block; height: 1.2em; line-height: 1.2; overflow: hidden; }
  .sv-btn-char:first-child { margin-right: 7px; }
  .sv-btn-char > span, .sv-btn-char > .sv-menu-dot { display: block; transition: transform .35s var(--sv-ease); }
  .sv-btn-phrase--menu .sv-btn-char > * { transform: translateY(0); }
  .sv-menu[open] .sv-btn-phrase--menu .sv-btn-char > * { transform: translateY(-1.2em); }
  .sv-btn-phrase--close .sv-btn-char > span { transform: translateY(1.2em); }
  .sv-menu[open] .sv-btn-phrase--close .sv-btn-char > span { transform: translateY(0); }
  .sv-menu-dot { flex-shrink: 0; width: 6px; height: 6px; margin-top: calc(.5em - 3px); border-radius: 50%; background: var(--sv-fg); }
  .sv-overlay { position: fixed; inset: 0; z-index: 99; display: flex; flex-direction: column; align-items: center; padding: 15vh var(--sv-margin) 20px; text-align: center; overflow-y: auto; background: color-mix(in srgb, var(--sv-bg) 40%, transparent); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); }
  .sv-mobile-links { position: absolute; top: 50%; right: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; padding: 0; list-style: none; transform: translateY(-50%); }
  .sv-mobile-link { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; color: var(--sv-fg); font-size: 10.4vw; line-height: 1.2; text-transform: uppercase; text-decoration: none; }
  .sv-mobile-char { display: inline-block; height: 1.1em; line-height: 1; overflow: hidden; }
  .sv-mobile-char > span { display: block; animation: sv-char-in .6s var(--sv-ease) both; animation-delay: calc(var(--base-delay, .15s) + var(--j, 0) * 40ms); }
  .sv-mobile-lang { display: inline-flex; align-items: center; align-self: center; gap: 12px; margin-top: 6px; color: var(--sv-fg); font-size: var(--sv-t20); line-height: 1.4; }
  .sv-mobile-lang a, .sv-mobile-lang-sep, .sv-mobile-lang .is-active { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--sv-fg); text-decoration: none; }
  .sv-mobile-lang-sep { min-width: 0; }
  .sv-mobile-lang .is-active { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
  .sv-mobile-social { position: absolute; right: var(--sv-margin); bottom: 40px; left: var(--sv-margin); display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
  .sv-mobile-social-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--sv-fg); font-size: 1rem; line-height: 1.4; text-decoration: none; }
  .sv-mobile-social-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  html:has(.sv-menu[open]) { overflow: hidden; }
}
@keyframes sv-char-in { 0% { transform: translateY(1em); } 100% { transform: translateY(0); } }

/* ── Hero: the title in the left quarter, the panel in the middle, the date in
 * the right quarter, all centred on the first screen. */
.sv-hero { display: flex; align-items: center; width: 100%; height: 100vh; padding: 0 var(--sv-margin); }
.sv-col--title, .sv-col--year { width: 25%; }
.sv-col--year { min-width: 0; }
.sv-col--cover { display: flex; flex: 1; justify-content: center; }
.sv-title { margin: 0; max-width: 23vw; font-family: var(--sv-font); font-size: clamp(var(--sv-t20), 2vw, 1.4rem); font-weight: 400; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; text-wrap: initial; }
.sv-year { margin: 0; font-size: var(--sv-t20); line-height: 1; text-align: right; }
.sv-year .sv-external { margin-top: 0; font-size: inherit; }
/* 30vw wide, but never taller than the space between the nav (104px + 16px)
   and the same margin below, so the sticky nav never covers the poster. */
.sv-panel { position: relative; display: block; width: min(30vw, calc((100vh - 240px) * 1.4 / 1.9)); aspect-ratio: 1.4 / 1.9; overflow: hidden; isolation: isolate; background: transparent; transition: opacity .36s ease; }
html.sv-js .sv-panel.is-pending { opacity: 0; }
.sv-panel-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.sv-panel-empty { display: grid; place-items: center; width: 100%; height: 100%; background: var(--sv-frame-empty); color: var(--sv-fg); }
.sv-panel-empty .sv-mark { font-size: 4rem; }
.sv-panel-empty .sv-mark-f { font-size: 7rem; }
@media (hover: none) and (pointer: coarse) {
  [data-look^="stelvio"] { min-height: 100svh; }
  .sv-hero { height: 100svh; }
}

/* ── The sheet ───────────────────────────────────────────────────────── */
.sv-info { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; padding: var(--sv-space-min) var(--sv-margin) var(--sv-space-high); }
.sv-info-left { grid-column: 1 / span 2; }
.sv-info-roles { grid-column: 4 / span 2; margin-bottom: 20px; }
.sv-info-right { grid-column: 7 / span 6; }
.sv-cats { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.sv-cats > div { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.sv-cat { display: inline-flex; align-items: center; color: var(--sv-fg); font-size: var(--sv-t20); line-height: 1.2; text-decoration: none; }
a.sv-cat { min-width: 44px; min-height: 44px; }
.sv-info-label { margin: 0 0 5px; font-family: inherit; }
.sv-info-roles .sv-info-label { margin-bottom: 13px; }
.sv-roles { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--sv-t20); line-height: 1.4; }
.sv-external { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 50px; color: var(--sv-fg); font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); text-transform: uppercase; text-decoration: none; transition: color .2s; }
.sv-external-dot { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--sv-fg); }
.sv-rich { font-size: clamp(var(--sv-t20), 2vw, var(--sv-t20)); line-height: 1.3; }
.sv-rich p { margin: 0 0 20px; }
.sv-description { display: block; line-height: 1.2; }
.sv-info-right .sv-rich { font-size: clamp(var(--sv-t20), 2vw, var(--sv-t25)); }
.sv-description p { margin: 0; }
.sv-description p + p { margin-top: .45em; }
.sv-inline-label { display: inline; margin-right: clamp(34px, 10vw, 200px); font-size: clamp(10px, 10vw, 16px); line-height: inherit; letter-spacing: .04em; }
.sv-section--text .sv-external { margin-top: 30px; }

/* ── The artworks: a still across the page, or two posters in the grid, each
 * a link with the film and its next screening beneath it. */
.sv-section { padding-bottom: var(--sv-media-gap); }
.sv-section--center .sv-media-item { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 0 var(--sv-margin); }
.sv-section--center .sv-media-item > * { width: 100%; }
.sv-duo, .sv-section--text { display: grid; grid-template-columns: repeat(12, 1fr); gap: 28px; padding: 0 var(--sv-margin); }
.sv-section--text { padding: var(--sv-space-medium) var(--sv-margin); }
.col-3 { grid-column-end: span 3; }
.col-6 { grid-column-end: span 6; }
.col-7 { grid-column-end: span 7; }
.col-start-1 { grid-column-start: 1; }
.col-start-7 { grid-column-start: 7; }
.sv-subtitle { margin: 0; font-family: inherit; font-size: var(--sv-t18); font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.sv-media-inner { position: relative; display: block; width: 100%; overflow: hidden; isolation: isolate; background: var(--sv-bg); }
.sv-media-inner--wide { aspect-ratio: 16 / 9; }
.sv-media-inner--tall { aspect-ratio: 4 / 5; }
.sv-media-el { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-caption { margin: 12px 0 0; line-height: 1.4; }

/* ── Next screening: the panel lifts on hover and the page's foot cuts it off. */
.sv-next { position: relative; display: flex; width: 100%; height: 20vw; max-height: 600px; margin-top: var(--sv-space-medium); padding: 80px var(--sv-margin) 0; overflow: hidden; }
.sv-next-left, .sv-next-right { flex-shrink: 0; width: 16.67%; }
.sv-next-left { order: 1; } .sv-next-center { order: 2; }
.sv-next-right { order: 3; text-align: right; }
.sv-next-label { font-family: inherit; }
.sv-next-title { margin: 0; font-family: inherit; font-size: var(--sv-t16); font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.sv-next-center { display: flex; flex: 1; align-items: flex-start; justify-content: center; height: auto; transition: transform .7s var(--sv-ease); }
.sv-next:hover .sv-next-center { transform: translateY(-20px) scale(1.05); }
.sv-next-panel { position: relative; display: block; width: 25vw; aspect-ratio: 1.4 / 1.9; overflow: hidden; isolation: isolate; background: var(--sv-bg); }
.sv-next-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sv-float { position: fixed; top: 0; left: 0; z-index: 100; padding: 10px 16px; border: 1px solid var(--sv-glass-border); border-radius: 100px; background: var(--sv-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--sv-fg); font-size: var(--sv-t16); text-transform: uppercase; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; will-change: transform; }
.sv-float.is-visible { opacity: 1; visibility: visible; }
@media (hover: none) { .sv-float { display: none; } }
.sv-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding: 40px var(--sv-margin) 20px; font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); line-height: 1.4; }
.sv-foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.sv-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sv-fg); text-transform: uppercase; text-decoration: none; }
.sv-foot a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1px; }
.sv-foot a[href^="mailto:"] { text-transform: none; }

/* ── Inner pages: the Works listing and the project sheet, kept quick ──
 * No loader, no reveals, no wobble here: the grid and the list are plain
 * markup, the view switch is two radios, the filters are native disclosures
 * whose items are links. */
.sv-works { position: relative; min-height: 100vh; }
.sv-works-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 11.8vw; row-gap: 8.6vw; padding: 120px 9vw 180px; }
.sv-tile { position: relative; display: block; color: var(--sv-fg); text-decoration: none; transition: transform .5s var(--sv-ease), opacity .3s ease; }
.sv-tile-img { position: relative; display: block; aspect-ratio: 2 / 3; overflow: hidden; background: var(--sv-frame); }
.sv-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sv-tile-empty { display: grid; place-items: center; width: 100%; height: 100%; background: var(--sv-frame-empty); }
.sv-tile-empty .sv-mark { font-size: 2.4rem; } .sv-tile-empty .sv-mark-f { font-size: 4rem; }
.sv-works-grid--wide .sv-tile-img { aspect-ratio: 3 / 4; }
@media (hover: hover) and (pointer: fine) { .sv-tile:hover { transform: translateY(-6px) scale(1.03); } }
/* The name under every tile on every device, not only at the pointer. */
.sv-tile-cap { display: block; margin-top: 10px; font-size: 14px; line-height: 1.35; }
/* A long one-word title (KURZFILMNACHT) breaks inside its column, not past it. */
.sv-tile-cap strong { display: block; font-weight: 500; text-transform: uppercase; overflow-wrap: break-word; hyphens: auto; }
.sv-tile-cap span { display: block; margin-top: 2px; }
/* A film's "Ebenfalls im Kino": six poster tiles in the text column, three
 * across; across the whole page up to 1024px, two across on a phone. */
.sv-related .sv-works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 28px; padding: 0; }
.sv-works-list { display: none; grid-template-columns: minmax(0, 909fr) minmax(0, 357fr); column-gap: 4vw; padding: 0 var(--sv-margin); }
.sv-list-titles { padding: 160px 0 220px clamp(0px, 14vw, 201px); }
.sv-band { position: relative; padding-bottom: 28px; }
.sv-band-label { position: absolute; top: .3em; left: calc(-1 * clamp(0px, 14vw, 201px)); width: clamp(0px, 14vw, 201px); padding-right: 16px; font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); text-transform: uppercase; }
.sv-row { margin-bottom: 18px; }
.sv-row-title { overflow-wrap: anywhere; hyphens: auto; margin: 0; font-family: inherit; font-size: clamp(28px, 3.97vw, 57px); font-weight: 400; line-height: 1.04; letter-spacing: -.03em; text-transform: uppercase; }
.sv-row-title a { display: inline-block; color: var(--sv-fg); text-decoration: none; }
.sv-row-title a:hover, .sv-row.is-active .sv-row-title a { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
/* Every row the same: the first line, then the second, on every width. */
.sv-row-times { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--sv-fg); }
.sv-house { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sv-house-name { color: var(--sv-fg); text-decoration: none; }
.sv-house-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.sv-time { color: var(--sv-fg); text-decoration: none; border-bottom: 1px solid var(--sv-underline); padding-bottom: 1px; white-space: nowrap; }
a.sv-time:hover { border-bottom-color: var(--sv-fg); }
.sv-time--plain { border-bottom-color: transparent; }
.sv-time small { font-size: 12px; text-transform: none; margin-left: 4px; }
[data-look^="stelvio"] .sv-time .version { margin: 0 0 0 .3em; }
.sv-list-side { position: relative; }
.sv-list-cover { position: sticky; top: 24vh; aspect-ratio: 2 / 3; overflow: hidden; background: var(--sv-frame); }
.sv-list-cover--wide { aspect-ratio: 3 / 4; }
.sv-list-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
body:has(#sv-view-list:checked) .sv-works-grid { display: none; }
body:has(#sv-view-list:checked) .sv-works-list { display: grid; }
.sv-empty { padding: 48px var(--sv-margin) 96px; font-size: var(--sv-t20); text-align: left; }
/* Error pages: what went wrong and what to do in one column, the ways
 * forward as pills, the first the white one. */
.sv-error { box-sizing: content-box; max-width: 40rem; margin: 0 auto; padding: 200px var(--sv-margin) var(--sv-space-medium); }
.sv-error-title { margin: 0 0 .5em; font-family: inherit; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.sv-error-body { margin: 0 0 2rem; font-size: var(--sv-t20); line-height: 1.4; }
.sv-error-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) { .sv-error { padding-top: 140px; } }
.sv-empty .sv-external { margin-top: 24px; }
/* The pills. The view switch is two or three radios in a glass pill; on the
 * cinemas page it hangs fixed at the top, on the programme it sits in the bar.
 * A filter is a native disclosure whose list drops down under its pill. */
.sv-controls { position: fixed; left: 50%; z-index: 90; display: flex; gap: 10px; transform: translateX(-50%); pointer-events: auto; }
.sv-controls--top { top: calc((var(--sv-nav-h) - 56px) / 2); z-index: 101; }
.sv-switch { position: relative; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--sv-glass-border); border-radius: 999px; background: var(--sv-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sv-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* The chosen view is the solid white segment with red type; the others are
 * full white on the glass. */
.sv-switch label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; text-transform: uppercase; color: var(--sv-fg); cursor: pointer; transition: color .25s ease, background .25s ease; }
.sv-switch label:hover { text-decoration: underline; text-underline-offset: 4px; }
.sv-switch input:checked + label { color: var(--sv-pill-fg); background: var(--sv-pill-bg); text-decoration: none; }
.sv-switch input:focus-visible + label { outline: 2px solid var(--sv-focus); outline-offset: 3px; }
.sv-switch input:checked:focus-visible + label { box-shadow: inset 0 0 0 2px var(--sv-focus-inner); }
.sv-filter { position: relative; }
.sv-filter summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--sv-glass-border); border-radius: 999px; background: var(--sv-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); list-style: none; font-size: 13px; text-transform: uppercase; color: var(--sv-fg); white-space: nowrap; cursor: pointer; transition: background .2s ease; }
.sv-filter summary::-webkit-details-marker { display: none; }
/* Pressed or open, a pill goes darker, never lighter under white type. */
.sv-filter summary:hover, .sv-filter[open] summary { background: var(--sv-press); }
.sv-filter-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--sv-fg); }
.sv-filter-count { font-size: 12px; }
.sv-filter sup { font-size: 12px; line-height: inherit; vertical-align: baseline; }
.sv-filter-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 50; display: flex; flex-direction: column; width: max-content; min-width: 250px; max-width: min(420px, calc(100vw - 24px)); max-height: min(60vh, 520px); padding: 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid var(--sv-glass-border); border-radius: 20px; background: var(--sv-menu-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 20px 50px -20px var(--sv-menu-shadow); }
/* The items are names and sentences, so they keep their casing. */
.sv-filter-item { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 12px; font-size: 14px; line-height: 1.3; color: var(--sv-fg); text-decoration: none; transition: background .15s ease; }
.sv-filter-item .sv-filter-dot { visibility: hidden; }
.sv-filter-item:hover { background: var(--sv-menu-hover); }
.sv-filter-item.is-active .sv-filter-dot { visibility: visible; }
.sv-filter-item.is-empty { cursor: default; }
/* A day the filters leave empty, "(0)": struck through in the soft rule
 * colour, the type itself at full strength. */
.sv-filter-item.is-empty .sv-filter-label { text-decoration: line-through; text-decoration-color: var(--sv-underline); text-decoration-thickness: 1px; }
.sv-filter-group { margin: 10px 12px 2px; font-size: 12px; line-height: 1.4; text-transform: uppercase; }
.sv-filter-group:first-child { margin-top: 4px; }
.sv-filter-label { flex: 1; }
.sv-filter-item .version { margin: 0; font-size: inherit; }

/* ── The programme as a schedule ─────────────────────────────────────
 * The day's rows in three readings, chosen in the bar that stays under the
 * nav: by time, by film, by cinema. A row is time and version, the film with
 * its small poster, the house with its address, and the ticket pill. */
.sv-programme { padding: 130px 0 160px; }
.sv-sched-head { padding: 0 var(--sv-margin) 28px; }
.sv-sched-title { margin: 0 0 8px; font-family: inherit; font-size: clamp(24px, 2.4vw, 34px); font-weight: 400; line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; }
.sv-sched-head a { text-decoration: underline; text-underline-offset: 4px; }
/* The bar sticks under the fixed nav; once it is stuck, the script marks it
 * and the band behind the nav is painted too, so rows pass under both. */
/* The bar: the view switch, then the filters. Opaque only once it is stuck
 * under the nav (or when no script can say), so at rest it is the ground. */
.sv-toolbar { position: sticky; top: var(--sv-nav-h); z-index: 40; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 10px; padding: 0 var(--sv-margin) 14px; background-color: transparent; }
.sv-toolbar.is-stuck, html:not(.sv-ready) .sv-toolbar { background-color: var(--sv-bg); }
.sv-toolbar::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--sv-noise); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
html.sv-ready .sv-toolbar:not(.is-stuck)::before { display: none; }
.sv-toolbar { transition: top .25s var(--sv-ease); }
.sv-toolbar-sentinel { height: 1px; margin-top: -1px; }
.sv-toolbar-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.sv-sched-view { display: none; padding: 4px var(--sv-margin) 0; }
.sv-sched-view[data-view="time"] { display: block; }
body:has(#sv-view-film:checked) .sv-sched-view[data-view="time"], body:has(#sv-view-cinema:checked) .sv-sched-view[data-view="time"] { display: none; }
body:has(#sv-view-film:checked) .sv-sched-view[data-view="film"] { display: block; }
body:has(#sv-view-cinema:checked) .sv-sched-view[data-view="cinema"] { display: block; }
.sv-sched-band { padding: 26px 0 6px; }
.sv-sched-label { margin: 0 0 8px; font-family: inherit; font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); font-weight: 400; text-transform: uppercase; }
.sv-sched-label--house { margin: 0; font-size: var(--sv-t20); text-transform: none; }
.sv-sched-label--house a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.sv-sched-label--house a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sv-house-address { margin: 0 0 10px; font-size: 14px; line-height: 1.4; }
/* The days of a film or cinema page: a heading per day in full white, and a
 * jump from the day pills that lands below the fixed nav. */
.sv-sched-band--day { padding: 0 0 26px; }
.sv-sched { margin: 0; padding: 0; list-style: none; }
.sv-srow:last-child { border-bottom: 1px solid var(--sv-rule); }
/* A row: time and version, poster, title, house, ticket, each in a column the
 * whole list shares (fixed and fractional tracks, none sized by its content),
 * all hung from the top edge of the poster. A long title or address wraps in
 * its own column and never moves the next one. The poster is shown as it is:
 * no fade, filter or blend on it or on its row, started or not. */
.sv-srow { display: grid; grid-template-columns: 176px var(--sv-thumb-w) minmax(0, 1.25fr) minmax(0, 1fr) 136px; grid-template-areas: "time poster film cinema ticket"; align-items: start; gap: 12px 20px; padding: 14px 0; border-top: 1px solid var(--sv-rule); }
.sv-srow--short { grid-template-columns: 176px var(--sv-thumb-w) minmax(0, 1fr) 136px; grid-template-areas: "time poster film ticket"; }
.sv-srow--nofilm { grid-template-columns: 176px minmax(0, 1fr) 136px; grid-template-areas: "time cinema ticket"; }
.sv-srow-time { grid-area: time; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: var(--sv-t20); line-height: 1.2; }
/* The version under the time: the code, then what it means in small plain
 * words, the same in every row and in every pill. */
.sv-version { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
[data-look^="stelvio"] .sv-srow-time .version { font-size: 16px; }
.sv-version-said { font-size: 13px; line-height: 1.3; text-transform: none; }
/* In a row the meaning always takes the line under the code, so every row
 * reads the same whatever the width; a pill keeps them on one line. */
.sv-srow-time .sv-version { flex-direction: column; gap: 2px; }
.sv-tpill .sv-version { display: inline; }
.sv-tpill .sv-version-said { font-size: 12px; }
.sv-srow-poster { grid-area: poster; display: block; width: var(--sv-thumb-w); }
.sv-srow-film { grid-area: film; min-width: 0; font-size: var(--sv-t20); line-height: 1.2; text-decoration: none; }
.sv-srow-film span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
.sv-srow-film:hover span, .sv-srow-cinema:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sv-thumb { display: block; flex-shrink: 0; width: var(--sv-thumb-w); height: var(--sv-thumb-h); object-fit: cover; background: var(--sv-frame); }
/* A row with no poster: the frame keeps its size and carries the small wordmark,
 * quieted by mixing the text colour into the ground (opaque, never faded):
 * about 4.9:1 on the frame on the blue. */
.sv-thumb--empty { display: grid; place-items: center; overflow: hidden; color: color-mix(in srgb, var(--sv-fg) 72%, var(--sv-bg)); }
.sv-thumb--empty .sv-mark { font-size: 1.05rem; translate: 0 -2px; } .sv-thumb--empty .sv-mark-f { font-size: 1.9rem; }
.sv-srow-cinema { grid-area: cinema; display: flex; flex-direction: column; min-width: 0; min-height: 44px; font-size: var(--sv-t16); line-height: 1.3; text-decoration: none; }
.sv-srow > .sv-ticket { grid-area: ticket; justify-self: end; }
.sv-srow-cinema small { font-size: 14px; line-height: 1.35; }
.sv-ticket { display: inline-flex; align-items: center; justify-content: center; min-width: 124px; min-height: 44px; padding: 0 16px; border: 1px solid var(--sv-pill-bg); border-radius: 999px; background: var(--sv-pill-bg); font-size: 13px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .25s var(--sv-ease); }
[data-look^="stelvio"] .sv-ticket, [data-look^="stelvio"] a.sv-ticket:hover { color: var(--sv-pill-fg); }
a.sv-ticket:hover { transform: translateY(-2px); }
/* Started, sold out, no booking: a small outlined tag in full white, nothing
 * to press; the row around it stays as legible as any other. */
.sv-ticket--off, [data-look^="stelvio"] .sv-ticket--off { min-width: 0; min-height: 0; padding: 3px 10px; font-size: 12px; color: var(--sv-fg); border-color: var(--sv-fg); background: transparent; }
.sv-films { margin: 0; padding: 16px 0 0; list-style: none; }
.sv-frow { display: grid; grid-template-columns: var(--sv-fthumb-w) minmax(0, 1fr) minmax(0, 1.4fr); grid-template-areas: "poster film times"; align-items: start; gap: 16px 24px; padding: 18px 0; border-top: 1px solid var(--sv-rule); }
.sv-frow-poster { grid-area: poster; display: block; width: var(--sv-fthumb-w); }
.sv-frow-poster .sv-thumb { width: var(--sv-fthumb-w); height: var(--sv-fthumb-h); }
.sv-frow:last-child { border-bottom: 1px solid var(--sv-rule); }
.sv-frow-film { grid-area: film; display: block; min-width: 0; min-height: 44px; text-decoration: none; }
.sv-frow-title { display: block; margin: 0; font-size: var(--sv-t20); font-weight: 400; line-height: 1.2; }
.sv-frow-film:hover .sv-frow-title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sv-frow-film small { display: block; margin-top: 6px; font-size: 14px; }
.sv-frow-times { grid-area: times; display: flex; flex-wrap: wrap; gap: 8px; }
.sv-tpill { display: inline-flex; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 0 6px; max-width: 100%; min-height: 44px; padding: 8px 14px; border: 1px solid var(--sv-pill-bg); border-radius: 22px; background: var(--sv-pill-bg); font-size: 14px; line-height: 1.3; text-decoration: none; transition: transform .25s var(--sv-ease); }
[data-look^="stelvio"] .sv-tpill, [data-look^="stelvio"] a.sv-tpill:hover { color: var(--sv-pill-fg); }
a.sv-tpill:hover { transform: translateY(-2px); }
.sv-tpill-house { font-size: 12px; text-transform: uppercase; }
.sv-tpill--off, [data-look^="stelvio"] .sv-tpill--off { min-height: 0; padding: 4px 12px; color: var(--sv-fg); border-color: var(--sv-fg); background: transparent; }
[data-look^="stelvio"] :is(.sv-tpill, .sv-ticket, .sv-srow-time) .version { margin: 0; color: inherit; }
@media (max-width: 1024px) {
  /* Narrower: the house goes under the title in the same column. */
  .sv-srow { grid-template-columns: 120px var(--sv-thumb-w) minmax(0, 1fr) 136px; grid-template-areas: "time poster film ticket" "time poster cinema ticket"; grid-template-rows: auto 1fr; }
  .sv-srow--short { grid-template-areas: "time poster film ticket"; grid-template-rows: auto; }
  .sv-srow--nofilm { grid-template-columns: 120px minmax(0, 1fr) 136px; grid-template-areas: "time cinema ticket"; grid-template-rows: auto; }
  .sv-section--times > * { grid-column: 1 / -1; }
  .sv-frow { grid-template-columns: var(--sv-fthumb-w) minmax(0, 1fr); grid-template-areas: "poster film" "poster times"; grid-template-rows: auto 1fr; }
}
@media (max-width: 767px) {
  .sv-programme { padding-top: 120px; }
  /* The view switch first, the filter pills wrapping after it, so every
   * chosen filter stays in sight. */
  .sv-toolbar { gap: 8px; padding: 0 var(--sv-margin) 12px; }
  .sv-toolbar-filters { display: contents; }
  .sv-toolbar .sv-switch { flex: none; }
  .sv-toolbar .sv-switch label { padding: 0 8px; font-size: 12px; }
  /* A phone: the poster on the left, time, title, house and ticket stacked
   * to its right; nothing runs under the poster. */
  .sv-srow { grid-template-columns: var(--sv-thumb-w) minmax(0, 1fr); grid-template-areas: "poster time" "poster film" "poster cinema" "poster ticket"; grid-template-rows: auto auto auto 1fr; gap: 6px 14px; }
  .sv-srow--short { grid-template-areas: "poster time" "poster film" "poster ticket"; grid-template-rows: auto auto 1fr; }
  .sv-srow-time { gap: 2px; font-size: 18px; }
  .sv-srow-film { display: flex; align-items: center; min-height: 44px; font-size: 17px; }
  .sv-srow-cinema { font-size: 17px; }
  .sv-srow > .sv-ticket { justify-self: start; }
  /* Denser rows: the time with Tickets at the right end of its line, the
   * version code and its words on one line under them, and in the time view
   * no street address (the house's own page and the cinema view carry it).
   * The time cell gives its two parts to the row's grid for this. */
  .sv-srow:not(.sv-srow--nofilm) { grid-template-columns: var(--sv-thumb-w) minmax(0, 1fr) 104px; grid-template-areas: "poster time ticket" "poster version version" "poster film film" "poster cinema cinema"; grid-template-rows: auto auto auto 1fr; gap: 0 14px; padding: 8px 0; }
  .sv-srow--short:not(.sv-srow--nofilm) { grid-template-areas: "poster time ticket" "poster version version" "poster film film"; grid-template-rows: auto auto 1fr; }
  /* A film's own list: the same line of time and Tickets, the version under
   * it, then the house with its address. */
  .sv-srow.sv-srow--nofilm { grid-template-columns: minmax(0, 1fr) 104px; grid-template-areas: "time ticket" "version version" "cinema cinema"; grid-template-rows: auto; gap: 0 14px; padding: 8px 0; }
  .sv-srow.sv-srow--nofilm > .sv-srow-cinema { min-height: 44px; margin-top: 2px; }
  .sv-srow .sv-srow-time { display: contents; }
  .sv-srow .sv-srow-time > :first-child { grid-area: time; align-self: center; }
  .sv-srow .sv-srow-time > span:first-child { font-size: 15px; line-height: 1.25; }
  .sv-srow .sv-srow-time > .sv-version { grid-area: version; }
  .sv-srow:not(.sv-srow--nofilm) > .sv-srow-cinema { justify-content: center; }
  .sv-srow > .sv-ticket { justify-self: end; align-self: start; }
  .sv-srow > .sv-ticket { max-width: 100%; }
  .sv-srow > .sv-ticket:not(.sv-ticket--off) { width: 100%; min-width: 0; padding: 0 12px; }
  .sv-srow > .sv-ticket--off { white-space: normal; text-align: center; }
  .sv-srow-time .sv-version { flex-direction: row; gap: 0 5px; }
  .sv-srow-time .sv-version > .version::after { content: "\00a0·" / ""; }
  .sv-sched-view[data-view="time"] .sv-srow-cinema small { display: none; }
}

/* The float label with a second line. */
.sv-float strong { display: block; font-weight: 600; font-size: var(--sv-t16); }
.sv-float small { display: block; font-size: var(--sv-t14); }
.sv-float:has(small) { text-transform: none; border-radius: 22px; }
/* The project sheet's showtimes: the days on the left, the houses on the right. */
.sv-days { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.sv-day { color: var(--sv-fg); font-size: 14px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .2s ease; }
.sv-day:hover { text-decoration: underline; text-underline-offset: 4px; }
.sv-day sup { margin-left: .3em; font-size: 12px; vertical-align: baseline; }
.sv-shows-date { margin: 0 0 16px; }
.sv-shows { display: flex; flex-direction: column; gap: 14px; font-size: var(--sv-t20); line-height: 1.4; }
.sv-shows .sv-house { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.sv-shows .sv-house-name { min-width: 0; }
.sv-shows .sv-time { font-size: 15px; text-transform: uppercase; padding: 9px 14px; border: 1px solid var(--sv-glass-border); border-radius: 999px; background: var(--sv-glass); }
.sv-shows a.sv-time:hover { background: var(--sv-press); border-color: var(--sv-glass-border); }
.sv-hero-credit { margin: 0 var(--sv-margin) 40px; max-width: 70ch; }
.sv-hero-credit--phone { display: none; }
@media (max-width: 1024px) {
  .sv-works-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 5vw; row-gap: 6vw; padding: 120px var(--sv-margin) 180px; }
  .sv-works-list { grid-template-columns: minmax(0, 1fr); }
  .sv-list-side { display: none; }
  .sv-list-titles { padding: 120px 0 200px; }
  .sv-band-label { position: static; display: block; width: auto; margin-bottom: 12px; }
}
@media (max-width: 767px) {
  .sv-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 36px; padding: 160px var(--sv-margin) 200px; }
  .sv-list-titles { padding-top: 160px; }
  .sv-controls--top { position: static; justify-content: flex-start; margin: 28px var(--sv-margin) 0; transform: none; }
  .sv-controls--bottom { right: var(--sv-margin); bottom: 20px; left: var(--sv-margin); flex-wrap: wrap; justify-content: center; gap: 6px; transform: none; }
  .sv-filter summary { min-width: 0; padding: 0 14px; font-size: 12px; }
  /* On a phone a menu drops the full width of the screen from under the bar
   * (the pills scroll sideways, so it hangs from the bar, not the pill): the
   * pill that closes it stays uncovered, and the list scrolls inside itself.
   * Stuck under the nav it ends above the foot of the screen; lower on the
   * page the script shortens it to the room that is left. */
  .sv-toolbar .sv-filter { position: static; }
  .sv-filter-menu { top: 100%; right: 12px; left: 12px; width: auto; min-width: 0; max-width: none; max-height: calc(100vh - var(--sv-nav-h) - 72px); max-height: calc(100dvh - var(--sv-nav-h) - 72px); }
  .sv-switch label { padding: 0 12px; font-size: 12px; }
  .sv-row-times { gap: 2px 12px; font-size: 12px; }
  .sv-shows { font-size: var(--sv-t16); }
}

/* ── Booking on a film page: the next screening and its ticket link in the
 * hero's right quarter, the day pills, and time pills that say where they go. */
.sv-book { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; text-align: right; }
.sv-book-when { margin: 0; font-size: var(--sv-t20); line-height: 1.2; text-transform: uppercase; }
.sv-book-when small { display: block; margin-top: 6px; font-size: 14px; }
.sv-book-when--ended { max-width: 22em; text-transform: none; }
.sv-title-year { margin-top: 12px; }
.sv-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 1px solid var(--sv-pill-bg); border-radius: 999px; background: var(--sv-pill-bg); font-size: 14px; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: transform .25s var(--sv-ease); }
[data-look^="stelvio"] .sv-btn, [data-look^="stelvio"] .sv-btn:hover { color: var(--sv-pill-fg); }
.sv-btn:hover { transform: translateY(-2px); }
.sv-btn--glass, [data-look^="stelvio"] .sv-btn--glass, [data-look^="stelvio"] .sv-btn--glass:hover { color: var(--sv-fg); border-color: var(--sv-glass-border); background: var(--sv-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sv-book-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; text-transform: uppercase; text-decoration: none; }
.sv-book-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.sv-book-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0 20px; margin: -8px 0 0; }
.sv-book-when .sv-book-house { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
/* The version in the booking box sits flush with the lines above it and
 * reads as one phrase: 'OmU · deutsche Untertitel'. */
[data-look^="stelvio"] .sv-book-when .version { margin: 0; }
.sv-book-when .sv-version > .version::after { content: "\00a0·" / ""; }
/* A cinema's hero answers where and what next under the year, as the film
 * hero does: the address to Maps, the next screening to the programme. */
.sv-hero-where, .sv-hero-next { margin: 8px 0 0; font-size: 14px; line-height: 18px; text-align: right; }
.sv-hero-where + .sv-hero-next { margin-top: 0; }
.sv-hero-next { text-transform: uppercase; }
.sv-hero-where a, .sv-hero-next a { display: inline-block; padding: 13px 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) { .sv-hero-where, .sv-hero-next { text-align: left; } }
.sv-section--times { padding-top: 0; }
.sv-days--pills { gap: 8px; margin-top: 18px; }
.sv-days--pills .sv-day { display: inline-flex; align-items: center; gap: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--sv-glass-border); border-radius: 999px; background: var(--sv-glass); color: var(--sv-fg); font-size: 13px; }
.sv-days--pills .sv-day:hover { background: var(--sv-press); text-decoration: none; }
.sv-days--pills .sv-day.is-active { border-color: var(--sv-pill-bg); background: var(--sv-pill-bg); color: var(--sv-pill-fg); }
.sv-shows .sv-time--book, [data-look^="stelvio"] .sv-shows .sv-time--book:hover { color: var(--sv-pill-fg); border-color: var(--sv-pill-bg); background: var(--sv-pill-bg); }
.sv-shows .sv-time--book { transition: transform .25s var(--sv-ease); }
.sv-shows .sv-time--book:hover { transform: translateY(-2px); }
[data-look^="stelvio"] .sv-time--book .version { color: inherit; }
.sv-time-note { margin-left: 6px; font-size: 12px; }
.sv-row-times .sv-time-note { display: none; }
.sv-shows-hint { max-width: 60ch; margin: 24px 0 0; font-size: 14px; line-height: 1.5; }
@media (max-width: 1024px) {
  .sv-book { align-items: flex-start; text-align: left; }
  .sv-book-links { justify-content: flex-start; }
  .sv-section--times { padding-top: 0; }
}

/* ── Reveals: text waits below its line and rises word by word, blocks rise
 * 24px, the sheet's lines are unclipped from the top. Only with the script,
 * and never for longer than the script needs. */
html.sv-js .is-pending { opacity: 0; animation: sv-unpend 0s 6s forwards; }
@keyframes sv-unpend { to { opacity: 1; } }
/* The mask reaches .2em above the line, so an umlaut or accent on a capital is never cut. */
.sv-w-wrap { display: inline-block; overflow: hidden; line-height: inherit; vertical-align: baseline; padding-top: .2em; margin-top: -.2em; }
.sv-w { display: inline-block; will-change: transform, opacity; }

/* ── Tablet and phone, as the reference breaks ──────────────────────── */
@media (max-width: 1024px) {
  .sv-hero { flex-direction: column; align-items: center; justify-content: center; gap: 80px; height: auto; padding-top: max(15vh, calc(104px + env(safe-area-inset-top))); padding-bottom: var(--sv-space-medium); transform: none; }
  .sv-col--title, .sv-col--year { width: 100%; text-align: left; }
  .sv-title { width: clamp(350px, 80vw, 600px); max-width: 100%; font-size: 6vw; line-height: 100%; }
  .sv-year { text-align: left; }
  .sv-col--cover { flex: none; order: 1; width: 100%; padding: 0 80px; }
  .sv-panel { width: 100%; }
  .sv-col--title { order: 2; }
  .sv-col--year { order: 3; display: inline-block; }
  [data-look^="stelvio"] { --sv-media-gap: 60px; }
  .sv-section { padding-top: 0; }
  .sv-section, .sv-section--text { padding-bottom: var(--sv-media-gap); }
  .sv-section--text { padding-top: 40px; }
  .sv-duo { row-gap: var(--sv-media-gap); }
  .sv-subtitle { grid-column-end: span 6; font-size: var(--sv-t20); }
  .sv-info { margin-top: 0; padding-bottom: var(--sv-space-medium); row-gap: var(--sv-space-medium); }
  .sv-info-left { grid-column: 1 / span 4; }
  .sv-external { margin-top: 20px; }
  .sv-info-roles { grid-column: 6 / span 4; }
  .sv-info-right, .sv-section--text .sv-rich { grid-column: 1 / span 11; }
  .sv-related .sv-works-grid { grid-column: 1 / -1; }
  .sv-duo .sv-media-item { grid-column: 1 / -1 !important; }
  .sv-next { flex-direction: column; align-items: center; gap: 20px; height: auto; padding-top: 40px; }
  .sv-next-right { order: 1; width: 100%; text-align: center; }
  .sv-next-left { order: 2; width: 70vw; margin-bottom: 30px; text-align: center; }
  .sv-next-center { order: 3; }
  .sv-next:hover .sv-next-center { transform: none; }
  .sv-next-panel { width: 70vw; }
}
@media (max-width: 500px) {
  .sv-info { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 80px; padding-top: 40px; padding-bottom: 40px; }
  .sv-hero { gap: 30px; padding-top: max(13vh, calc(96px + env(safe-area-inset-top))); padding-bottom: var(--sv-space-min); }
  .sv-col--cover { flex: none; padding: 0 10px; }
  /* The home poster stays large but leaves room for the line and the date link in the first screen. */
  .sv-hero:not(.sv-hero--book):not(.sv-hero--cinema) .sv-panel { width: min(100%, calc(52svh * 1.4 / 1.9)); max-height: 52svh; }
  .sv-col--title { padding-top: 40px; }
  .sv-year, .sv-cat, .sv-roles { font-size: var(--sv-t16); }
  /* The film page on a phone opens on the answer: title, next screening and
   * tickets, then the poster at full size. */
  .sv-hero--book .sv-col--title { order: 1; padding-top: 0; }
  .sv-hero--book .sv-col--year { order: 2; }
  .sv-hero--book .sv-col--cover { order: 3; }
  /* A cinema page on a phone opens on the name, its address and next
   * screening, then the photo as a cropped
   * band with its credit right under it, so the programme starts within the
   * first screen; the full-page credit further down gives way to it. */
  .sv-hero--cinema { gap: 12px; padding-top: calc(76px + env(safe-area-inset-top)); padding-bottom: 0; }
  /* The address and next lines' 44px targets carry their own air. */
  .sv-hero--cinema .sv-hero-where, .sv-hero--cinema .sv-hero-next { margin-top: 0; }
  .sv-hero--cinema .sv-col--title { order: 1; padding-top: 0; }
  .sv-hero--cinema .sv-col--year { order: 2; }
  .sv-hero--cinema .sv-col--cover { order: 3; flex-direction: column; padding: 0; }
  .sv-hero--cinema .sv-panel { aspect-ratio: 16 / 9; max-height: 28svh; }
  .sv-hero--cinema .sv-panel-img { object-position: 50% 30%; }
  .sv-hero--cinema .sv-hero-credit--phone { display: block; margin-top: 8px; font-size: var(--sv-t14); }
  .sv-hero-credit { display: none; }
  .sv-info-left, .sv-info-roles { grid-column: 1 / -1 !important; }
  .sv-info-roles { margin-bottom: 0; }
  .sv-info-left:empty { display: none; }
  .sv-info-right, .sv-section--text .sv-rich { grid-column: 1 / -1; }
  .sv-description { display: block; }
  .sv-inline-label { margin-right: 50px; font-size: 12px; }
  [data-look^="stelvio"] { --sv-media-gap: 40px; }
  .sv-section--center .sv-media-item { padding: 0 calc(var(--sv-margin) + 10px); }
  .sv-next { height: 30vh; padding-top: 0; }
  .sv-next-right { width: 100%; }
  .sv-next-left { margin-bottom: 10px; }
  .sv-foot { flex-direction: column; }
}
@media (min-width: 480px) and (max-width: 767px) and (orientation: landscape) {
  .sv-hero { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; height: auto; min-height: 100svh; padding-top: max(88px, calc(72px + env(safe-area-inset-top))); padding-bottom: var(--sv-space-medium); }
  .sv-col--title, .sv-col--year { order: 0; width: 25%; }
  .sv-col--cover { flex: 1; order: 0; width: auto; padding: 0; }
  .sv-title { width: auto; max-width: 100%; padding-top: 0; font-size: clamp(14px, 1.9vw, 18px); line-height: 1.1; text-align: left; }
  .sv-year { width: 100%; font-size: var(--sv-t16); text-align: right; }
  .sv-hero-where, .sv-hero-next { text-align: right; }
  .sv-panel { width: min(30vw, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-boot-img, .sv-char-top, .sv-char::after, .sv-next-center, .sv-mobile-char > span, .sv-nav, .sv-nav-logo-mobile, .sv-nav-logo-mobile .sv-mark, .sv-toolbar { transition: none; animation: none; }
}

/* ── Search foundation (September 2026): the programme's h1 set small above
 * the day, the cinemas and films indexes with a visible h1 and their groups,
 * the freshness line, the FAQ, the directions and the TMDB note in the foot.
 * Every line here is full white; what must be quieter is smaller. */
.sv-sched-name { margin: 0 0 10px; font-family: inherit; font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.sv-fresh { margin-top: 16px; font-size: 14px; }
.sv-sched-head .sv-fresh { margin-top: 6px; }
.sv-foot-note { flex-basis: 100%; max-width: 70ch; margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.sv-works-head { padding: 130px var(--sv-margin) 0; }
.sv-works-head ~ .sv-works-list .sv-list-titles { padding-top: 64px; }
.sv-index-count { margin: 0; font-size: 14px; line-height: 1.4; text-transform: uppercase; }
/* The cinemas grid, one per district under its heading; the list view hides them all. */
body:has(#sv-view-list:checked) .sv-works-groups { display: none; }
.sv-works-groups { padding: 64px 0 180px; }
.sv-works-group + .sv-works-group { margin-top: 8.6vw; }
.sv-works-district { margin: 0; padding: 0 9vw; font-family: inherit; font-size: var(--sv-t18); font-weight: 400; line-height: 1.2; text-transform: uppercase; }
.sv-works-group .sv-works-grid { padding-top: 28px; padding-bottom: 0; }
.sv-band-label--plain { margin: 0; font-family: inherit; font-weight: 400; opacity: 1; }
.sv-works-list .sv-band + .sv-band { margin-top: 48px; }
.sv-works-list--index { display: grid; }
.sv-works-list--index .sv-row-title a, .sv-works-list--index .sv-row:hover .sv-row-title a { color: var(--sv-fg); }
.sv-works-list--index .sv-row-title a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.sv-works-list--index .sv-row-times { color: var(--sv-fg); }
/* The index is a list to scan, not a poster wall: smaller titles, one meta
 * line and tighter rows, so 300 films stay a page and not a scroll marathon. */
.sv-works-list--index .sv-row-title { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.1; }
.sv-works-list--index .sv-row { margin-bottom: 12px; }
.sv-works-list--index .sv-row-times { margin-top: 2px; }
.sv-works-list--index .sv-band + .sv-band { margin-top: 24px; }
.sv-index-note { margin: 0 0 20px; font-size: var(--sv-t16); }
.sv-faq h3 { margin: 1.4em 0 .3em; font-family: inherit; font-size: inherit; font-weight: 600; line-height: 1.3; }
.sv-faq h3:first-child { margin-top: 0; }
.sv-faq a, .sv-sources a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sv-address { display: block; font-style: normal; }
@media (max-width: 1024px) {
  .sv-works-district { padding: 0 var(--sv-margin); }
  .sv-works-group + .sv-works-group { margin-top: 64px; }
}
@media (max-width: 767px) {
  .sv-works-head { padding-top: 120px; }
  .sv-works--index .sv-works-head { padding-top: 120px; }
  .sv-works-groups { padding-top: 40px; }
  .sv-works-group .sv-works-grid { padding-top: 20px; }
  .sv-works-group + .sv-works-group { margin-top: 48px; }
}

/* ── Reading the schedule (September 2026): what has started waits in one
 * closed disclosure at the end, the codes are spelled out under the counts,
 * the end of the page names the next day. Full white throughout; what is
 * quieter is smaller, never fainter. */
.sv-legend { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; font-size: 14px; line-height: 1.5; }
.sv-notes { padding-top: 0; }
.sv-notes .sv-legend { flex-direction: column; font-size: 16px; }
.sv-legend dt, .sv-legend dd { display: inline; }
.sv-legend dt { margin-right: .4em; font-weight: 600; }
.sv-legend dt .version { margin: 0; font-size: inherit; }
.sv-legend dd { margin: 0; }
.sv-started { margin: 18px 0 0; }
.sv-started-summary { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: clamp(var(--sv-t14), 1vw, var(--sv-t16)); text-transform: uppercase; list-style: none; cursor: pointer; }
.sv-started-summary::-webkit-details-marker { display: none; }
.sv-started-summary::before { content: ''; flex-shrink: 0; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--sv-ease); }
.sv-started[open] > .sv-started-summary::before { transform: translateY(2px) rotate(-135deg); }
.sv-started-summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.sv-sched-band .sv-started { margin-top: 10px; }
.sv-notice { margin: 0 var(--sv-margin) 24px; padding: 20px 0; border-top: 1px solid var(--sv-fg); border-bottom: 1px solid var(--sv-fg); font-size: var(--sv-t18); line-height: 1.4; }
.sv-notice p { margin: 0 0 12px; }
.sv-notice-title { font-size: var(--sv-t20); }
.sv-empty p { margin: 0 0 12px; }
.sv-empty-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 24px; }
.sv-onward .sv-rich p { margin: 30px 0 0; }
.sv-onward .sv-external { margin-top: 20px; }
.sv-onward .sv-onward-day { margin-top: 0; }

/* The still grain over the pictures, as the moving grain lies on the ground. */
:is(.sv-panel, .sv-media-inner, .sv-tile-img, .sv-list-cover, .sv-next-panel)::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--sv-noise); opacity: .16; mix-blend-mode: overlay; pointer-events: none; }
.sv-tile-img, .sv-list-cover { isolation: isolate; }
/* The wireframe ground has no grain, so nothing else takes it either. */
body:has(.sv-grid) :is(.sv-nav, .sv-toolbar)::before, body:has(.sv-grid) :is(.sv-panel, .sv-media-inner, .sv-tile-img, .sv-list-cover, .sv-next-panel)::after { display: none; }

/* The focus ring on a white pill: the white outline on the ground around it,
 * and a red ring just inside its edge, so it reads on either surface. */
body:has([data-look^="stelvio"]) :is(.sv-ticket, .sv-tpill, .sv-btn, .sv-time--book, .sv-days--pills .sv-day.is-active):not(.sv-btn--glass):focus-visible { box-shadow: inset 0 0 0 2px var(--sv-focus-inner); }

/* Room for a thumb: every control at least 44px high on a phone, with space
 * between neighbours. */
@media (max-width: 767px) {
  .sv-sched-head a { display: inline-flex; align-items: center; min-height: 44px; }
  .sv-row-title a { padding: 10px 0; }
  .sv-sources a { display: inline-flex; align-items: center; min-height: 44px; }
  .sv-row { margin-bottom: 10px; }
  .sv-works-list--index .sv-row { margin-bottom: 0; }
  .sv-works-list--index .sv-row-title a { padding: 16px 0 6px; }
  .sv-frow-times { gap: 8px; }
  .sv-cats > div { gap: 0; }
  .sv-days--pills { gap: 8px; }
}
/* The tone switcher, only on a preview (?tone=): the seven tones as plain
 * links in one opaque pill at the foot of the window, the current one solid;
 * on a phone they wrap into rows. The page keeps room under its foot so the
 * pill never covers the last line. */
.sv-tones { position: fixed; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; z-index: 98; display: flex; justify-content: center; pointer-events: none; }
.sv-tones ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; margin: 0; padding: 3px; list-style: none; border: 1px solid var(--sv-glass-border); border-radius: 26px; background: var(--sv-menu-bg); pointer-events: auto; }
.sv-tones li { display: flex; align-items: center; }
.sv-tones li + li::before { content: '·'; padding: 0 2px; color: var(--sv-fg); }
.sv-tones a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--sv-fg); font-size: 13px; text-decoration: none; white-space: nowrap; }
.sv-tones a:hover { background: var(--sv-menu-hover); color: var(--sv-fg); }
.sv-tones a[aria-current] { background: var(--sv-pill-bg); color: var(--sv-pill-fg); }
.sv-tones a[aria-current]:focus-visible { box-shadow: inset 0 0 0 2px var(--sv-focus-inner); }
body:has(.sv-tones) .site { padding-bottom: 80px; }
@media (max-width: 767px) {
  .sv-tones li + li::before { content: none; }
  .sv-tones ul { max-width: 248px; }
  .sv-tones a { padding: 0 12px; }
  body:has(.sv-tones) .site { padding-bottom: 128px; }
}

/* ── No grain on the inner pages ─────────────────────────────────────────
 * The home page keeps the film crawl. Programme, film, cinema and the other
 * inner pages stand on a flat ground: no crawling canvas (the script does not
 * start it there), and no still grain on the nav, the stuck bar or the pictures. */
html:has([data-look^="stelvio"] [data-sv-inner]) .sv-grain { display: none; }
html:has([data-look^="stelvio"] [data-sv-inner]) :is(.sv-nav, .sv-toolbar)::before,
html:has([data-look^="stelvio"] [data-sv-inner]) :is(.sv-panel, .sv-media-inner, .sv-tile-img, .sv-list-cover, .sv-next-panel)::after { content: none; }

/* ── The app on the inner pages (September 2026): the nav's one solid pill,
 * one sentence and a link where the app does what the page cannot, and the
 * block at the end of the programme, a film, a cinema and the film index. */
.sv-link--app { gap: 0; padding: 0 16px; border-radius: 999px; background: var(--sv-pill-bg); color: var(--sv-pill-fg); font-size: 13px; transition: transform .25s var(--sv-ease); }
.sv-link--app:hover { color: var(--sv-pill-fg); transform: translateY(-2px); }
body:has([data-look^="stelvio"]) .sv-link--app:focus-visible { box-shadow: inset 0 0 0 2px var(--sv-focus-inner); }
@media (max-width: 768px) {
  .sv-mobile-link--app { margin-bottom: 8px; padding: 0 .4em; border-radius: 999px; background: var(--sv-pill-bg); color: var(--sv-pill-fg); }
  body:has([data-look^="stelvio"]) .sv-mobile-link--app:focus-visible { box-shadow: inset 0 0 0 2px var(--sv-focus-inner); }
}
.sv-invite { margin: 0; font-size: 14px; line-height: 1.45; text-transform: none; }
.sv-external.sv-invite-link { margin-top: 4px; }
/* Under the tickets: a rule, the sentence and the link, quieter than the pill. */
.sv-book-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 22em; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--sv-rule); }
.sv-book > .sv-invite { max-width: 22em; }
.sv-info-roles .sv-invite { max-width: 30ch; margin-top: 40px; }
.sv-works-head .sv-invite { max-width: 52ch; margin-top: 20px; font-size: var(--sv-t16); }
.sv-app-body { display: grid; grid-template-columns: 160px minmax(0, 1fr); grid-template-areas: "shot lines" "shot get"; grid-template-rows: auto 1fr; column-gap: 28px; align-items: start; }
.sv-app-shot { grid-area: shot; display: block; width: 100%; height: auto; }
.sv-app-lines { grid-area: lines; margin: 0; padding: 0; list-style: none; }
.sv-app-lines li + li { margin-top: 12px; }
.sv-app-get { grid-area: get; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 32px; margin-top: 30px; }
/* The code only where it can be scanned: a wide screen and a mouse. */
.sv-app-qr { display: none; margin: 0; }
.sv-app-qr svg { display: block; width: 123px; height: 123px; border-radius: 4px; background: var(--sv-qr-bg); color: var(--sv-qr-fg); }
.sv-app-qr figcaption { max-width: 9em; font-size: 14px; line-height: 1.4; }
@media (min-width: 1024px) and (pointer: fine) { .sv-app-qr { display: flex; align-items: flex-end; gap: 14px; } }
/* Wide: the screen stands in the columns the text sections leave empty (4 to
 * 6), the lines, the button and the code in the text column (7 to 12). */
@media (min-width: 1025px) {
  .sv-app .sv-app-body { grid-column: 4 / -1; grid-template-columns: subgrid; grid-template-areas: none; }
  .sv-app .sv-app-shot { grid-area: 1 / 1 / 3 / 4; justify-self: end; width: 170px; }
  .sv-app .sv-app-lines { grid-area: 1 / 4 / 2 / -1; }
  .sv-app .sv-app-get { grid-area: 2 / 4 / 3 / -1; }
}
@media (max-width: 1024px) { .sv-book-aside { align-items: flex-start; } }
@media (max-width: 767px) {
  .sv-app-body { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "shot lines" "get get"; column-gap: 16px; }
  .sv-app-lines { font-size: 16px; }
  .sv-app-lines li + li { margin-top: 10px; }
  .sv-app-get { margin-top: 24px; }
  .sv-info-roles .sv-invite { margin-top: 28px; }
}
/* A phone: the text sections take one column, so twelve tracks and their
 * gaps never outgrow a 320px screen. */
@media (max-width: 500px) {
  .sv-section.sv-section--text { grid-template-columns: minmax(0, 1fr); }
  .sv-section.sv-section--text > * { grid-column: 1 / -1; }
  .sv-duo { column-gap: 0; }
  .sv-related .sv-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

/* ── Programme states and ways through the indexes (September 2026) ────
 * The reset link on a line of its own under the counts; a row whose version
 * the cinema did not state says so, as quietly as the meanings of the codes. */
.sv-sched-reset { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 4px; font-size: 14px; }
.sv-version--none .sv-version-said { font-size: 13px; font-weight: 400; }
/* The phone menu button's spoken name follows its visible text. */
.sv-menu[open] .sv-menu-name--menu, .sv-menu:not([open]) .sv-menu-name--close { display: none; }
/* The film index's letters: a bar of links to the bands that stays under the
 * nav; a band's heading lands below nav and bar. On a phone the bar is one
 * row that scrolls sideways, lined up with the content; a strip of ground
 * laid over its right edge shows there is more (the letters themselves keep
 * full colour) and goes once the row is scrolled to its end. The letter of
 * the band being read is underlined. Each band ends with a way back to it. On a phone on its side there is no height to spare, so
 * there the bar and the programme's toolbar stay in the page. */
.sv-letters { position: sticky; top: var(--sv-nav-h); z-index: 40; margin-top: 40px; padding: 6px var(--sv-margin); background-color: var(--sv-bg); transition: top .25s var(--sv-ease); }
.sv-letters ul { display: flex; flex-wrap: wrap; gap: 0 2px; margin: 0; padding: 0; list-style: none; }
.sv-letters a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-size: 16px; text-decoration: none; }
.sv-letters a:hover, .sv-letters a:focus-visible, .sv-letters a[aria-current] { text-decoration: underline; text-underline-offset: 5px; }
.sv-letters a[aria-current] { text-decoration-thickness: 2px; }
.sv-letters li:first-child a { justify-content: flex-start; }
.sv-works--index .sv-band { scroll-margin-top: calc(var(--sv-nav-h) + 76px); }
.sv-works-head ~ .sv-letters + .sv-works-list .sv-list-titles { padding-top: 32px; }
.sv-letters-top { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; min-height: 44px; margin-top: 12px; color: var(--sv-fg); font-size: 16px; text-decoration: none; }
.sv-letters-top:hover, .sv-letters-top:focus-visible { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 767px) {
  .sv-letters { padding: 0; }
  .sv-letters ul { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 var(--sv-margin); scroll-padding-inline: var(--sv-margin); }
  .sv-letters::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(90deg, transparent, var(--sv-bg)); pointer-events: none; transition: opacity .2s var(--sv-ease); }
  .sv-letters.is-end::after { opacity: 0; }
  .sv-letters ul::-webkit-scrollbar { display: none; }
  .sv-letters li { flex: none; }
  /* The page's scroll padding already keeps the nav clear; this adds the bar. */
  .sv-works--index .sv-band { scroll-margin-top: 44px; }
}
@media (max-height: 500px) {
  .sv-letters, .sv-toolbar { position: static; }
  .sv-letters { position: relative; }
  .sv-works--index .sv-band { scroll-margin-top: 0; }
}
/* Four links, the app pill and the languages: between a phone and a wide
 * desk the gaps close up, so the row never reaches the wordmark. */
@media (min-width: 769px) and (max-width: 1100px) { .sv-nav-links { gap: 28px; } }
/* With Filme in the nav the band has no room for the cinemas' Bilder / Liste
 * switch, so it stands under the heading at every width, as on a phone. */
.sv-controls.sv-controls--top { position: static; justify-content: flex-start; margin: 28px var(--sv-margin) 0; transform: none; }