/* The website's look ("K · Πρόγραμμα"): a programme on grey paper. The time set large in a display serif, the poster
   a little off its axis (three to a row on a wide screen), the title on a white label hanging off the image's edge.
   One colour picks things out (the logo, the distances, the buttons): a cinema seat's velvet red, by day and at night.
   Sharp corners everywhere. Moves to site/ with the Worker (docs/plan.md). */
:root {
  /* Every text at least 4.5:1 on what it sits on (WCAG AA): --soft for quiet words, never --faint, which is for lines.
     --accent is the red as words and lines; --accent-fill the red behind --on-accent's words. */
  --paper: #eceeed; --ink: #151716; --soft: #5c6160; --faint: #b9bdbb; --accent: #a3192e; --accent-fill: #a3192e; --on-accent: #ffffff;
  /* Labels are paper stuck on the posters: light at any hour, with their own dark text. Surfaces are the panels. */
  --label: #ffffff; --label-ink: #151716; --label-soft: #6c716f; --surface: #ffffff; --edge: transparent;
  --solid: #151716; --button-hover: #6f0f1f; --shade: rgba(21, 23, 22, 0.5); --tile: #f3f4f4;
  --serif-weight: 400; --dim: 1;
  --great: #1d7f4a; --good: #4a7f22; --fair: #e3a21a; --low: #b8431f; --flag-filter: none; --dial-on: 13%;
  --serif: "Noto Serif Display", Georgia, serif; --sans: "Geologica", system-ui, sans-serif;
  color-scheme: light;
}
/* Night ("Βελούδο"): the inside of a cinema, not the page inverted. A deep wine-black, like its seats and curtains; the labels stay paper; the serif a weight
   heavier and the text off-white, so its hairlines hold; the red a little brighter and rosier; the posters a little dimmed
   (full on hover) and the colours around them quieter, so the images lead; panels a lighter charcoal with a fine edge, as shadows don't show. The
   computer's or phone's setting, unless the person chose light or dark here (data-theme, site.js). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1b1214; --ink: #f0e6e4; --soft: #a8969a; --faint: #3e2e31; --label: #f3ebe8; --label-ink: #1b1214; --label-soft: #6e5c60;
    --surface: #261a1d; --edge: rgba(255, 255, 255, 0.08); --solid: #33242a; --accent: #ec5d6f; --accent-fill: #c42d42; --on-accent: #ffffff; --button-hover: #a82536; --shade: rgba(0, 0, 0, 0.65); --tile: #34272b;
    --serif-weight: 500; --dim: 0.88; --great: #2f7a50; --good: #4d7a2e; --fair: #c99a2e; --low: #a84c31; --flag-filter: saturate(0.8) brightness(0.92); --dial-on: 20%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #1b1214; --ink: #f0e6e4; --soft: #a8969a; --faint: #3e2e31; --label: #f3ebe8; --label-ink: #1b1214; --label-soft: #6e5c60;
  --surface: #261a1d; --edge: rgba(255, 255, 255, 0.08); --solid: #33242a; --accent: #ec5d6f; --accent-fill: #c42d42; --on-accent: #ffffff; --button-hover: #a82536; --shade: rgba(0, 0, 0, 0.65); --tile: #34272b;
  --serif-weight: 500; --dim: 0.88; --great: #2f7a50; --good: #4d7a2e; --fair: #c99a2e; --low: #a84c31; --flag-filter: saturate(0.8) brightness(0.92); --dial-on: 20%;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--sans); overflow-x: clip; } /* the header's paper reaches past the sides */
body.sheet-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { display: block; max-width: 100%; }
main { max-width: 1240px; margin: 0 auto; padding: 0 24px 64px; }

/* The images, a little dimmed at night (--dim), full when pointed at. */
.pick-img img, .venue-img img, .tile-img img, .venue-card-img img, .film-hero img, .film-poster img { filter: brightness(var(--dim)); transition: filter 0.2s ease; }
a:hover .pick-img img, a:hover .venue-img img, a:hover .tile-img img { filter: none; }
/* Pointed at, a poster grows a little out of its frame and lifts, its label and distance growing with it. */
.pick-pic, .venue-pic { transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.pick-img, .venue-img { display: block; transition: box-shadow 0.35s ease; }
.tile-img { display: block; transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease; }
a:hover .pick-pic, a:hover .venue-pic, a:hover .tile-img, a:focus-visible .pick-pic, a:focus-visible .venue-pic, a:focus-visible .tile-img { transform: scale(1.045); }
a:hover .pick-img, a:hover .venue-img, a:hover .tile-img, a:focus-visible .pick-img, a:focus-visible .venue-img, a:focus-visible .tile-img { box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
/* The label and the distance in front of the poster. */
.pick-label, .venue-label, .pick-dist { z-index: 1; }
@media (prefers-reduced-motion: reduce) { a:hover .pick-pic, a:hover .venue-pic, a:hover .tile-img { transform: none; } }

/* The top: the square logo, the place the suggestions are measured from */
.top { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 16px 28px; padding: 14px 24px 10px;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 35; }
/* The header's paper, as wide as the screen, behind it always: nothing about it changes as the page moves, so nothing
   flashes over the posters on the way back to the top. */
.top::before { content: ""; position: absolute; inset: 0 -100vmax; background: var(--paper); z-index: -1; }
/* Stuck over the page: a line under it, as wide as the screen. */
.top::after { content: ""; position: absolute; left: -100vmax; right: -100vmax; bottom: 0; height: 1px; background: var(--faint); opacity: 0; transition: opacity 0.2s ease; }
.top.stuck::after { opacity: 1; }

/* The menu, at the top and the bottom: a line of small words, the current one underlined. */
.menu { display: flex; align-items: center; gap: 4px 18px; font-size: 0.88rem; }
.menu a { color: var(--soft); padding: 4px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.menu a:hover { color: var(--ink); }
.menu a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.menu .theme { display: inline-grid; place-items: center; width: 26px; height: 22px; border: 1px solid var(--faint); color: var(--soft); font-size: 0.85rem; line-height: 1; }
.menu .theme:hover { color: var(--ink); border-color: var(--ink); }
.menu .menu-lang { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; border: 1px solid var(--faint); padding: 2px 6px; }
.logo-mark { width: 64px; height: 64px; display: block; }
.logo-mark .logo-bg { fill: var(--accent-fill); }
.logo-mark .logo-fg { fill: var(--on-accent); }
/* Distances on or off: the top's button, ticked when on, where from said under it. */
.here-box { margin-left: auto; display: grid; justify-items: end; gap: 2px; }
.here-box { position: relative; }
.here-from { font-size: 0.72rem; color: var(--soft); visibility: hidden; } /* its space kept while off: the button never moves */
.here-from.on { visibility: visible; }
.here-from button { font-weight: 500; color: var(--ink); border-bottom: 1px dotted var(--soft); padding: 0; }
.here-from button:hover { color: var(--accent); border-color: var(--accent); }
/* The small box to choose a neighbourhood, under the place's name. */
.area-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: 260px; display: grid; gap: 6px; padding: 12px 14px;
  background: var(--surface); outline: 1px solid var(--edge); outline-offset: -1px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); animation: rise 0.16s ease-out; }
.area-pop[hidden] { display: none; }
.place-far { margin: 0 0 4px; font-size: 0.85rem; line-height: 1.4; color: var(--accent); }
.place-far[hidden] { display: none; }
/* The neighbourhood box's parts: the search, a few names while typing, the device's location. */
.place-find { width: 100%; font: var(--serif-weight) 1.2rem/1.2 var(--serif); padding: 6px 2px; border: 0; border-bottom: 1px solid var(--faint); background: transparent; color: var(--ink); border-radius: 0; }
.place-find::placeholder { color: var(--soft); }
.place-find:focus { outline: none; border-bottom-color: var(--accent); }
.place-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 14px; }
.place-areas li[hidden] { display: none; }
.place-areas button { padding: 6px 0 2px; font: var(--serif-weight) 1rem/1.3 var(--serif); color: var(--accent); }
.place-links { margin: 2px 0 0; display: flex; gap: 16px; font-size: 0.8rem; }
.place-links button { color: var(--soft); border-bottom: 1px solid var(--faint); padding: 1px 0; }
.place-links button:hover { color: var(--ink); border-color: var(--ink); }
.place-links [data-locate]::before { content: "⌖ "; }
/* The top's button: a tick while distances show (its place kept, so the words never move), then a circle: hollow
   while off, grey for a chosen neighbourhood, in the accent colour following the device's location. */
.here { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; padding: 6px 0; border-bottom: 1px solid var(--ink); }
.here-tick { font-style: normal; font-weight: 700; color: var(--ink); width: 0.8em; text-align: center; visibility: hidden; }
.here.on .here-tick { visibility: visible; }
.here-dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--soft); }
.here.on .here-dot { background: var(--soft); border-color: var(--soft); }
.here.on.device .here-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.here.locating .here-dot { animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { from { opacity: 0.3; } to { opacity: 1; } }

/* Three kinds of control, each its own look. The menu goes somewhere: small words. The day, the preferences and the
   place are all in the floater, a square in the accent colour at the bottom right that opens a panel; the preferences there are index
   flags, a colour each, a little askew, full and ticked when on (and a chip of their colour over the closed square).
   A cinema's days choose one of several: serif words on a line. */
/* The dock: the square, always in the same place, the chips of the filters that are on stacked over it. */
.dock { position: fixed; right: 24px; bottom: 24px; z-index: 40; display: flex; flex-direction: column; align-items: flex-end; pointer-events: none; }
.floater, .chip { position: relative; pointer-events: auto; }
/* Room under the list, so its end clears the square; and under the footer, the page's end, so it clears the chips. */
main:has(.dock), body:has(> .dock) main { padding-bottom: 110px; }
:root:has(.floater-chips > li:nth-child(1)) { --chips: 1; }
:root:has(.floater-chips > li:nth-child(2)) { --chips: 2; }
:root:has(.floater-chips > li:nth-child(3)) { --chips: 3; }
:root:has(.floater-chips > li:nth-child(4)) { --chips: 4; }
:root:has(.floater-chips > li:nth-child(5)) { --chips: 5; }
body:has(.floater-chips > li) footer { padding-bottom: calc(var(--chips) * 34px + 104px); }
/* The chips: small labels in their flag's colour, right-aligned over the square, the first on top; each takes its
   filter off. They come in from the right, and fold away (site.js); hidden while the panel is open. */
.floater-chips { list-style: none; margin: 0; padding: 0 0 8px; display: flex; flex-direction: column; align-items: flex-end; transition: opacity 0.2s ease, visibility 0.2s; }
.floater-chips:empty { display: none; }
.floater-chips li { display: flex; justify-content: flex-end; padding-top: 6px; overflow: visible; animation: chip-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.floater-chips li:first-child { padding-top: 0; }
.floater-chips li.going { overflow: hidden; }
.floater-chips li.going .chip { pointer-events: none; }
@keyframes chip-in { from { opacity: 0; transform: translateX(16px); } }
.dock:has(.floater[open]) .floater-chips { opacity: 0; visibility: hidden; }
.chip { --chip: var(--flag); display: inline-flex; align-items: center; gap: 5px; height: 26px; max-width: min(220px, calc(100vw - 32px)); padding: 0 6px 0 8px;
  background: var(--chip); color: #151716; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.01em; white-space: nowrap; filter: var(--flag-filter);
  box-shadow: 0 1px 0 rgba(21, 23, 22, 0.1), 0 6px 16px rgba(21, 23, 22, 0.18); transition: transform 0.15s ease; }
.chip span { overflow: hidden; text-overflow: ellipsis; padding: 2px 0; }
.chip .icon { width: 13px; height: 13px; flex: none; }
.chip .knock { fill: var(--chip); }
.chip .knock-line { stroke: var(--chip); }
.chip i { font-style: normal; font-weight: 400; font-size: 0.95rem; line-height: 1; width: 12px; text-align: center; opacity: 0.45; transition: opacity 0.15s ease; }
.chip:hover { transform: translateX(-2px); }
.chip:hover i, .chip:focus-visible i { opacity: 1; }
@media (min-width: 641px) { .chip { height: 28px; font-size: 0.8rem; gap: 6px; padding: 0 7px 0 9px; } .chip .icon { width: 14px; height: 14px; } }
.chip-more { --chip: var(--surface); color: var(--ink); filter: none; padding: 0 9px; outline: 1px solid var(--edge); outline-offset: -1px; }
.floater summary { color: var(--on-accent); list-style: none; cursor: pointer; position: relative; width: 60px; height: 60px; display: grid; place-items: center;
  background: var(--accent-fill); box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-fill) 40%, transparent); transition: transform 0.15s ease; }
.floater summary::-webkit-details-marker { display: none; }
.floater summary:hover { transform: translateY(-2px); }
.floater[open] summary { background: var(--solid); }
.floater-icon { width: 26px; height: 26px; }
/* The panel (Floater), compact: the head, the days, the hours, the flags, and at its bottom a foot that stays in sight
   as the rest scrolls. A floating panel on a wide screen, the whole screen on a phone. */
.floater-panel { --pad: 20px; position: absolute; right: 0; bottom: calc(100% + 14px); width: min(400px, calc(100vw - 32px)); max-height: calc(100vh - 140px);
  overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 18px var(--pad) 0;
  background: var(--surface); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); animation: rise 0.18s ease-out; outline: 1px solid var(--edge); outline-offset: -1px; }
.floater-panel > * { flex: none; }
.unseen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
/* The head: the name in the serif, the order's switch and the close beside it, the order's name under them. */
.floater-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; }
.floater-title { margin: 0; font: var(--serif-weight) 30px/1 var(--serif); letter-spacing: -0.01em; }
.floater-close { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -10px; }
.floater-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
/* The order (OrderSwitch): two cells, 44 × 34, in a track of ink 7%; the chosen one under the accent thumb that slides
   across, its icon in the accent's ink; under the head, the chosen order's name, the other's folded away. */
.order { display: contents; }
.switch { grid-column: 2; grid-row: 1; position: relative; display: grid; grid-template-columns: repeat(2, 44px); gap: 2px; height: 40px; padding: 3px;
  background: color-mix(in srgb, var(--ink) 7%, var(--surface)); }
.switch-thumb { position: absolute; left: 3px; top: 3px; width: 44px; height: 34px; background: var(--accent-fill); transition: transform 0.32s cubic-bezier(0.3, 1.25, 0.5, 1); }
.switch:has([data-order="times"][aria-checked="true"]) .switch-thumb { transform: translateX(46px); }
.switch a { position: relative; display: grid; place-items: center; color: var(--soft); transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.switch a:hover { color: var(--ink); }
.switch a[aria-checked="true"] { color: var(--on-accent); }
.switch a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.switch .icon { width: 22px; height: 22px; }
.order-said { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 0; display: grid; font-size: 12px; line-height: 1.3; color: var(--soft); }
.order-said span { grid-area: 1 / 1; white-space: nowrap; transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.order:has([data-order="ours"][aria-checked="true"]) [data-said="times"],
.order:has([data-order="times"][aria-checked="true"]) [data-said="ours"] { opacity: 0; transform: translateY(4px); }
/* The days (FloaterDays): seven tiles in a row, the weekday small over the date in the serif; the chosen one inverted,
   a day whose programme is still to come with an orange dot. */
.floater-panel > section:first-of-type { margin-top: 16px; }
.floater-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.floater-days a { display: grid; justify-items: center; gap: 2px; padding: 8px 0 7px; background: var(--tile); color: var(--ink); transition: background 0.15s ease; -webkit-tap-highlight-color: transparent; }
.floater-days span { font-size: 10px; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; }
.floater-days b { font: var(--serif-weight) 20px/1 var(--serif); font-variant-numeric: lining-nums; }
.floater-days i { width: 4px; height: 4px; border-radius: 50%; }
.floater-days a.soon i { background: var(--fair); }
.floater-days a:hover { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.floater-days a[aria-current="page"] { background: var(--ink); color: var(--surface); }
/* The hours: the dial, 206 across, and beside it the quick choices (HourQuick), chosen inverted, those with nothing
   in them dimmed. */
.floater-hours { margin-top: 20px; display: flex; align-items: center; gap: 10px; }
.floater-hours .dial { flex: 0 1 206px; width: 206px; min-width: 0; margin: 0; }
.quick { flex: 1 0 104px; display: grid; gap: 6px; } /* the dial gives way on a narrow phone */
.quick a { display: grid; gap: 1px; padding: 8px 10px; background: var(--tile); color: var(--ink); transition: background 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; }
.quick b { font-size: 13px; font-weight: 500; line-height: 1.25; }
.quick span { font-size: 11px; line-height: 1.25; opacity: 0.75; font-variant-numeric: tabular-nums; }
.quick a:hover { background: color-mix(in srgb, var(--ink) 12%, var(--surface)); }
.quick a[data-gone] { color: color-mix(in srgb, var(--ink) 40%, var(--tile)); }
.quick a[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
/* The preferences and the genres: one flow of tags that wraps, every one in sight; the panel's middle scrolls instead. */
.floater-flags { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 7px 6px; align-items: flex-start; padding: 2px 0 4px; }
.floater-flags > [hidden] { display: none; }
/* The foot: clearing every filter, and back to the list with how many films it shows; kept at the panel's bottom. */
.floater-foot { position: sticky; bottom: 0; z-index: 1; margin: auto calc(-1 * var(--pad)) 0; padding: 16px var(--pad) 20px; display: flex; align-items: center; gap: 12px;
  background: var(--surface); border-top: 1px solid color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.floater-panel > section:last-of-type { margin-bottom: 18px; }
.floater-clear { font-size: 14px; color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.floater-clear:hover { color: var(--ink); }
.floater-see { margin-left: auto; padding: 14px 20px; background: var(--accent-fill); color: var(--on-accent); font-size: 15px; font-weight: 500; line-height: 1.2; white-space: nowrap; transition: background 0.15s ease; }
.floater-see:hover { background: var(--button-hover); }
/* The hours as a 12-hour clock's face with two rings (HourDial): the afternoon and evening outside, the small hours
   and the morning inside, thinner. The hours none starts in faint, those chosen in the accent colour (pale when none
   starts in them), the start waiting for its end in full accent and outlined; gaps of the panel's colour between the segments; marks and
   numbers outside the outer ring, small numbers inside the inner one, what's chosen in the middle. */
.dial { display: block; width: min(256px, 100%); height: auto; margin: 0 auto; overflow: visible; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.dial-seg { stroke: var(--surface); stroke-width: 2.5; stroke-linejoin: round; fill: color-mix(in srgb, var(--ink) var(--dial-on), var(--surface)); transition: fill 0.15s ease; cursor: pointer; }
.dial a[data-gone] .dial-seg { fill: color-mix(in srgb, var(--ink) 4%, var(--surface)); }
.dial a:hover .dial-seg { fill: color-mix(in srgb, var(--ink) 24%, var(--surface)); }
.dial a[aria-pressed="true"] .dial-seg { fill: var(--accent-fill); }
.dial a[aria-pressed="true"]:hover .dial-seg { fill: var(--button-hover); }
.dial a[data-gone][aria-pressed="true"] .dial-seg { fill: color-mix(in srgb, var(--accent-fill) 45%, var(--surface)); }
.dial a[data-start][aria-pressed] .dial-seg { fill: var(--accent-fill); }
.dial-hit { fill: transparent; stroke: none; cursor: pointer; }
/* The start waiting for its end: an accent line round it, set off by a gap of the panel's colour. */
.dial-start { pointer-events: none; display: none; fill: none; stroke-linejoin: round; }
.dial.pending .dial-start { display: inline; }
.dial-start .gap { stroke: var(--surface); stroke-width: 5; } /* 4 units of gap, and the neighbours' edges under it covered */
.dial-start .line { stroke: var(--accent); stroke-width: 1.6; }
.dial-start .inner, .dial-start.inner .outer { display: none; }
.dial-start.inner .inner { display: inline; }
.dial a:focus { outline: none; }
.dial a:focus-visible .dial-seg { stroke: var(--ink); stroke-width: 2; }
.dial-tick { stroke: var(--faint); stroke-width: 1; }
.dial-num { fill: var(--soft); font: 400 11px var(--sans); font-variant-numeric: tabular-nums; text-anchor: middle; dominant-baseline: central; letter-spacing: 0.02em; pointer-events: none; }
.dial-num.major { fill: var(--ink); font-weight: 600; font-size: 12px; }
.dial-num.inner { font-size: 8.5px; letter-spacing: 0; }
.dial-mid { cursor: pointer; }
.dial-mid circle { fill: var(--surface); stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 4; transition: stroke 0.15s ease; }
.dial-mid:hover circle, .dial-mid:focus-visible circle { stroke: var(--ink); stroke-dasharray: none; }
.dial-sum { fill: var(--ink); font: var(--serif-weight) 24px var(--serif); letter-spacing: -0.02em; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.dial.any .dial-sum { fill: var(--soft); font-style: italic; transform: translateY(4px); }
.dial.many .dial-sum { font-size: 18px; }
.dial.pending .dial-sum { font-size: 14.5px; }
.dial-x { fill: var(--soft); font: 400 15px var(--sans); text-anchor: middle; dominant-baseline: central; }
.dial.any .dial-x, .dial.pending .dial-x { display: none; }
.dial-hint { display: none; fill: var(--accent); font: 500 8.5px var(--sans); letter-spacing: 0.03em; text-anchor: middle; dominant-baseline: central; }
.dial.pending .dial-hint { display: inline; }
.dial-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dial-now { pointer-events: none; display: none; }
.dial.today .dial-now { display: inline; }
.dial-now path { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.dial-now .inner, .dial-now.inner .outer { display: none; }
.dial-now.inner .inner { display: inline; }
.dial-now circle { fill: var(--ink); }
.flag { filter: var(--flag-filter); transform: rotate(var(--tilt)); padding: 7px 11px; font-size: 13px; white-space: nowrap; font-weight: 500; color: rgba(21, 23, 22, 0.6); background: var(--flag-pale);
  box-shadow: 0 2px 0 rgba(21, 23, 22, 0.08); transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.flag:hover { color: #151716; transform: rotate(var(--tilt)) translateY(-1px); }
.flag[aria-pressed="true"] { background: var(--flag); color: #151716; font-weight: 600; }
.flag[aria-pressed="true"]::before { content: "✓ "; }
.flag-near, .chip-near { --flag: #ffd23f; --flag-pale: #fff0b3; --tilt: -1.5deg; }
.flag-late, .chip-late, .flag-mine, .chip-mine { --flag: #c4a8f5; --flag-pale: #ebe2fb; --tilt: 1deg; }
.flag-nodub, .chip-nodub { --flag: #ff9cb0; --flag-pale: #ffe1e7; --tilt: -0.6deg; }
.flag-kids, .chip-kids { --flag: #7fd6a2; --flag-pale: #d9f3e3; --tilt: 1.4deg; }
.flag-genre, .chip-genre { --flag: #9cc9f0; --flag-pale: #e1eefb; }
.chip-hours { --flag: #f5a46b; }
.chip-times { --flag: #8fd0d4; }
.floater-where { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.floater-where b { font: var(--serif-weight) 1.3rem/1.2 var(--serif); }
@media (max-width: 640px) {
  .dock { right: 16px; bottom: 16px; }
  .floater summary { width: 56px; height: 56px; }
  .floater-panel { position: fixed; inset: 0; width: auto; height: 100dvh; max-height: none; padding-top: calc(22px + env(safe-area-inset-top, 0px)); }
  .floater-foot { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
  html:has(.floater[open]) { overflow: hidden; }
}
.menu-days { position: relative; }
.menu-days summary { list-style: none; cursor: pointer; color: var(--soft); padding: 4px 0; border-bottom: 1px solid transparent; white-space: nowrap; }
.menu-days summary::-webkit-details-marker { display: none; }
.menu-days summary::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 2px 3px 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.menu-days summary[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.menu-days[open] summary::after { transform: rotate(225deg); margin-bottom: 0; }
.menu-days div { position: absolute; z-index: 20; top: calc(100% + 8px); left: -12px; min-width: 200px; background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); display: grid; padding: 6px 0; outline: 1px solid var(--edge); outline-offset: -1px; }
.menu-days div a { padding: 9px 16px; color: var(--ink); border: 0; font-family: var(--serif); font-size: 1.05rem; text-transform: capitalize; }
.menu-days div a:hover { background: var(--paper); }
.menu-days div a[aria-current="page"] { color: var(--accent); }
.menu-days div a small { display: block; font: 400 0.72rem/1.3 var(--sans); color: var(--soft); text-transform: none; }
.tabs { display: flex; gap: 6px 26px; overflow-x: auto; padding: 4px 0 0; border-bottom: 1px solid var(--faint); scrollbar-width: none; }
.tabs a { flex: none; display: grid; padding: 8px 0 10px; font: var(--serif-weight) 1.2rem/1.1 var(--serif); color: var(--soft); border-bottom: 3px solid transparent; margin-bottom: -1px; text-transform: capitalize; }
.tabs a small { font: 400 0.72rem/1.4 var(--sans); text-transform: none; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }

/* The day, the page's heading set small. */
.day { margin: 14px 0 0; font: 400 0.78rem/1.5 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.notice { margin: 10px 0 0; max-width: 64ch; padding: 10px 14px; background: var(--surface); outline: 1px solid var(--edge); outline-offset: -1px; border-left: 3px solid var(--accent); font-size: 0.88rem; color: var(--ink); }
.empty { color: var(--soft); padding: 24px 0; }
.swap.loading { opacity: 0.5; transition: opacity 0.2s; }
/* A place remembered: the list made without it waits unseen for the one measured from it (site.js); a moment at most,
   so a page whose script never runs still shows it. */
.placed [data-placed] { animation: placed-wait 0s 2.5s both; }
@keyframes placed-wait { from { visibility: hidden; } to { visibility: visible; } }

/* The programme: on a wide screen posters in loose columns, each at its own height */
.picks { list-style: none; margin: 0; padding: 26px 30px 40px 30px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 80px 64px; }
@media (max-width: 900px) { .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px 48px; } }
.pick:nth-child(3n+2) { margin-top: 70px; }
.pick:nth-child(3n+3) { margin-top: 26px; }
.pick { position: relative; } /* so one in flight passes over the others (site.js, moveList) */
.pick > a { display: grid; gap: 10px; }
.pick-time { font: var(--serif-weight) 3.4rem/0.85 var(--serif); letter-spacing: -0.04em; font-variant-numeric: lining-nums; }
.pick-time small { display: block; font: 400 0.78rem/1.4 var(--sans); letter-spacing: 0; color: var(--soft); margin-top: 8px; }
.pick:nth-child(even) .pick-time { text-align: right; }
.pick-pic { position: relative; display: block; }
.pick-img img, .pick-img.no-image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--faint); }
.no-image { display: grid; place-items: center; font: var(--serif-weight) 4rem/1 var(--serif); color: #ffffff; background: #151716 !important; }
.pick-dist { position: absolute; top: 0; right: 0; background: var(--accent-fill); color: var(--on-accent); font-size: 0.75rem; padding: 5px 8px; font-variant-numeric: tabular-nums; }
.pick:nth-child(even) .pick-dist { right: auto; left: 0; }
/* The rating: a small square coloured by how good the film is. */
.score { flex: none; display: inline-grid; place-items: center; min-width: 2.3em; padding: 2px 5px; font: 600 0.75rem/1.3 var(--sans); color: #ffffff; font-variant-numeric: tabular-nums; }
.score-great { background: var(--great); }
.score-good { background: var(--good); }
.score-fair { background: var(--fair); color: #151716; }
.score-low { background: var(--low); }
.pick-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pick-title .score { margin-top: 3px; }
.pick-label { position: absolute; left: -26px; bottom: -22px; max-width: 94%; background: var(--label); padding: 10px 14px; display: grid; gap: 2px; ; color: var(--label-ink)}
.pick:nth-child(even) .pick-label { left: auto; right: -26px; bottom: 26%; }
.pick-label strong { font: var(--serif-weight) 1.3rem/1.05 var(--serif); letter-spacing: -0.01em; text-wrap: balance; }
.pick-label > span:not(.pick-title) { font-size: 0.75rem; color: var(--label-soft); }
/* By time: the film's later times and how many cinemas, smaller under the cinema's line. */
.pick-label > span.pick-note { font-size: 0.7rem; font-variant-numeric: tabular-nums; }

.more { margin: 8px 0 0; }
/* With the script, the end of the list fetches the next films by itself: the link is only a quiet marker there. */
.more.auto a { border: 0; color: var(--soft); font-size: 0.8rem; }
.more.auto a::before { content: ""; display: inline-block; width: 24px; height: 1px; background: currentColor; vertical-align: middle; margin-right: 8px; animation: pulse 0.9s ease-in-out infinite alternate; }
.more a { border-bottom: 1px solid var(--ink); font-size: 0.95rem; }

/* On a phone, as the apps: one film a row, its poster (46% of the width) on one side by turns, beside it the time
   large and how soon, and at the poster's foot the title, its rating, the cinema and the film's length. The poster's
   parts (the label, the marks) become the row's own (display: contents). */
@media (max-width: 640px) {
  main { padding: 0 16px 48px; }
  .top { padding: 14px 16px 6px; flex-wrap: wrap; gap: 10px 16px; }
  .top .menu { order: 3; width: 100%; gap: 4px 16px; font-size: 0.85rem; flex-wrap: wrap; }
  .logo-mark { width: 54px; height: 54px; }
  .picks { grid-template-columns: 1fr; gap: 34px; padding: 18px 0 30px; }
  .pick:nth-child(n) { margin-top: 0; }
  .pick > a { position: relative; grid-template-columns: 46% minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 0 16px; }
  .pick:nth-child(even) > a { grid-template-columns: minmax(0, 1fr) 46%; }
  .pick-pic { display: contents; }
  .pick-img { grid-column: 1; grid-row: 1 / 4; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18); }
  .pick:nth-child(even) .pick-img { grid-column: 2; }
  .pick-img img, .pick-img.no-image { aspect-ratio: 2 / 3; }
  .pick-time { grid-column: 2; grid-row: 1; font-size: 3.1rem; text-align: right; }
  .pick:nth-child(even) .pick-time { grid-column: 1; text-align: left; }
  .pick-label { position: static; grid-column: 2; grid-row: 3; max-width: none; padding: 0; background: none; color: var(--ink); text-align: right; gap: 4px; }
  .pick:nth-child(even) .pick-label { grid-column: 1; text-align: left; }
  /* The rating after the title (poster on the left), before it (on the right), as the apps. */
  .pick-title { display: block; }
  .pick-title .score { display: inline-grid; margin: 0 0 0 8px; vertical-align: 4px; }
  .pick:nth-child(even) .pick-title { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: 10px; }
  .pick:nth-child(even) .pick-title .score { margin: 3px 0 0; }
  .pick-label strong { font-size: 1.35rem; }
  .pick-label > span:not(.pick-title) { color: var(--soft); font-size: 0.8rem; }
  .pick-label > span.pick-note { font-size: 0.74rem; }
  .pick-dist, .pick-mark { position: absolute; top: 0; }
  .pick-dist { left: auto; right: 54%; }
  .pick:nth-child(even) .pick-dist { left: 54%; right: auto; }
  .pick-mark { left: 0; }
  .pick:nth-child(even) .pick-mark { left: auto; right: 0; }
}

/* A film, over the page (the sheet) or as a page of its own */
.sheet { position: fixed; inset: 0; z-index: 50; background: var(--shade); overflow-y: auto; overscroll-behavior: contain; }
/* The previous and next film, either side of the sheet: a thin chevron alone, light on the dimmed page with a soft
   shadow, a faint round glow under the pointer; on a narrow screen, where it sits over the film, a small frosted disc
   behind it. */
.sheet-step { position: fixed; top: 50%; z-index: 51; width: 72px; height: 72px; margin-top: -36px; display: grid; place-items: center;
  border: 0; padding: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55)); opacity: 0.85; transition: opacity 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.sheet-step svg { width: 46px; height: 46px; }
.sheet-step:hover, .sheet-step:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.sheet-step.previous:hover { transform: translateX(-3px); }
.sheet-step.next:hover { transform: translateX(3px); }
.sheet-step:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sheet-step.previous { left: max(8px, calc(50% - 450px - 92px)); }
.sheet-step.next { right: max(8px, calc(50% - 450px - 92px)); }
@media (max-width: 1080px) {
  .sheet-step { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin-top: 0; width: 46px; height: 46px; opacity: 0.95;
    background: rgba(20, 20, 20, 0.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); filter: none; }
  .sheet-step svg { width: 24px; height: 24px; }
  .sheet-step.previous { left: 14px; }
  .sheet-step.next { right: 14px; }
}
@media (prefers-reduced-motion: reduce) { .sheet-step { transition: none; } .sheet-step:hover { transform: none; } }
.sheet .film { max-width: 900px; margin: 5vh auto; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); animation: rise 0.22s ease-out; outline: 1px solid var(--edge); }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
main > .film { max-width: 900px; margin: 12px auto 0; }
.film { background: var(--paper); padding-bottom: 32px; }
.film-hero { position: relative; aspect-ratio: 21 / 9; background: var(--solid); }
.film-hero img { width: 100%; height: 100%; object-fit: cover; position: relative; }
/* Until the wide image arrives, the poster (already loaded on the page) fills its place, blurred, so the panel never
   opens on black; the wide image fades in over it. */
.film-hero { background-image: var(--poster); background-size: cover; background-position: center 30%; overflow: hidden; }
.film-hero::before { content: ""; position: absolute; inset: -20px; background: inherit; filter: blur(22px) brightness(0.85); }
.js .film-hero img { opacity: 0; transition: opacity 0.45s ease; }
.js .film-hero img.loaded { opacity: 1; }
.film-loading .film-head h1 { opacity: 0.85; }
.film-loading .film-wait { margin: 26px 32px 0; height: 120px; background: linear-gradient(90deg, var(--surface) 0%, var(--paper) 50%, var(--surface) 100%); background-size: 200% 100%; animation: wait 1.2s linear infinite; }
@keyframes wait { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* The trailer: a tile at the end of the title's row, a strip of film (sprocket holes along its edges) with a still of
   the film and the play button; pressed, YouTube's player takes the wide image's place, at 16:9, with a black strip
   above for its own close button and the film's ×, and the poster no longer reaching up over it. */
.film-trailer { display: grid; gap: 8px; width: 168px; align-self: end; color: inherit; text-decoration: none; }
.film-trailer-frame { position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: #111 var(--still, none) center / cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.film-trailer-frame::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); transition: background 0.2s ease; }
.film-trailer-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; --holes: repeating-linear-gradient(90deg, transparent 0 4px, rgba(255, 255, 255, 0.75) 4px 9px, transparent 9px 14px);
  background: var(--holes) left 0 top 3px / 100% 5px no-repeat, var(--holes) left 0 bottom 3px / 100% 5px no-repeat,
              linear-gradient(#111, #111) top / 100% 11px no-repeat, linear-gradient(#111, #111) bottom / 100% 11px no-repeat; }
.film-trailer .film-play-icon { position: relative; z-index: 1; transition: transform 0.15s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); }
.film-trailer:hover .film-trailer-frame::before { background: rgba(0, 0, 0, 0.1); }
.film-trailer:hover .film-play-icon { transform: scale(1.1); }
.film-trailer-text { display: grid; gap: 1px; }
.film-trailer-text b { font: var(--serif-weight) 1.15rem/1.1 var(--serif); }
.film-trailer-text small { color: var(--soft); font-size: 0.8rem; }
.film-trailer.on .film-trailer-text small { visibility: hidden; }
.film-play-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--accent-fill); display: grid; place-items: center; }
.film-play-icon::before { content: ""; margin-left: 3px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--on-accent); }
.film-trailer.on .film-play-icon::before { margin: 0; border: 0; width: 12px; height: 12px; background: var(--on-accent); } /* playing: stop */
.film-hero.playing { aspect-ratio: auto; background: #000; padding-top: 52px; }
.film-hero.playing::before, .film-hero.playing > img { display: none; }
.film-hero iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.film-hero.playing + .film-head > :first-child { margin-top: 0; }
.film-trailer-stop { position: absolute; top: 0; left: 0; height: 52px; padding: 0 18px; display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; color: #fff; font: inherit; font-size: 0.9rem; cursor: pointer; }
.film-trailer-stop span { font-size: 1.5rem; line-height: 1; }
.film-close { position: absolute; top: 0; right: 0; width: 52px; height: 52px; display: grid; place-items: center; background: var(--label); font-size: 1.8rem; line-height: 1; ; color: var(--label-ink)}
/* The head: the poster reaches up over the wide image, the title always below it, whole. */
.film-head { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 18px 32px 0; position: relative; }
.film-head > :first-child { margin-top: -110px; }
.film-hero.bare { aspect-ratio: auto; height: 64px; background: repeating-linear-gradient(90deg, var(--solid) 0 18px, color-mix(in srgb, var(--solid) 80%, var(--paper)) 18px 20px); }
.film-hero.bare::before { display: none; }
.film-hero.bare + .film-head > :first-child { margin-top: -40px; }
.film-head .film-trailer { align-self: start; }
.film-poster img, .film-poster.no-image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.film-head h1 { margin: 0; font: var(--serif-weight) clamp(2rem, 5vw, 3rem)/1 var(--serif); letter-spacing: -0.02em; text-wrap: balance; }
.film-facts, .film-genres { margin: 8px 0 0; color: var(--soft); font-size: 0.9rem; }
.film-facts i { font-family: var(--serif); }
.film-facts .age { text-decoration: none; border: 1px solid var(--soft); padding: 0 4px; font-size: 0.8rem; }
/* Sharing the film: a small quiet action under its facts. */
.film-share { margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--soft); border-bottom: 1px solid var(--faint); padding: 2px 0; }
.film-share:hover { color: var(--ink); border-color: var(--ink); }
.film-share[hidden] { display: none; }
.icon { flex: none; }
.film section, .film-overview { margin: 26px 32px 0; }
.film h2 { margin: 0 0 10px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--soft); }
.film-pick { background: var(--surface); padding: 18px 20px 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: end; outline: 1px solid var(--edge); outline-offset: -1px; }
.film-pick h2 { grid-column: 1 / -1; }
.film-pick-time { margin: 0; font: var(--serif-weight) 4rem/0.85 var(--serif); letter-spacing: -0.04em; }
.film-pick-time small { display: block; font: 400 0.8rem/1.4 var(--sans); letter-spacing: 0; color: var(--soft); margin-top: 8px; }
.film-pick-where { margin: 0; font-size: 0.92rem; color: var(--soft); }
.film-pick-where a { color: var(--ink); font: var(--serif-weight) 1.35rem/1.2 var(--serif); }
.film-pick-go { grid-column: 1 / -1; margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; border-top: 1px solid var(--paper); padding-top: 14px; }
.film-pick-go b { font-weight: 600; font-variant-numeric: tabular-nums; }
.film-pick-where .version { font-weight: 500; color: var(--ink); }
.film-pick-note { grid-column: 1 / -1; margin: 4px 0 0; font-size: 0.85rem; color: var(--soft); }
.film-pick-links { grid-column: 1 / -1; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.82rem; }
.film-pick-links a, .where-links .tickets, .venue-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--soft); border-bottom: 1px solid var(--faint); }
.film-pick-links a:hover, .where-links .tickets:hover, .venue-links a:hover { color: var(--accent); border-color: var(--accent); }
.button { background: var(--accent-fill); color: var(--on-accent); padding: 10px 18px; font-weight: 500; }
.button:hover { background: var(--button-hover); }
.film-overview { max-width: 64ch; font-size: 1rem; }
.film-days ul { list-style: none; margin: 0; padding: 0; }
/* Where it plays: a drawn map of the cinemas (numbered as the rows, our pick in the accent colour, a dashed line from
   the place the distances are from), then a card a cinema: its number, name and address, how far and the way there,
   its times with screen and version (gone ones struck through, the next with how soon, our pick in the accent), and
   the way there. Two cards a row on a wide screen. */
.where-map-box { position: relative; margin: 4px 0 14px; aspect-ratio: 640 / 260; background: var(--surface); outline: 1px solid var(--edge); outline-offset: -1px; overflow: hidden; }
.where-map { display: block; width: 100%; height: 100%; }
/* The streets (site.js), over the drawing once loaded. */
.where-map-box > .where-map-live { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } /* over MapLibre's own position */
.where-map-box.live .where-map-live { opacity: 1; }
.map-dot { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--label); color: var(--label-ink); border: 2px solid var(--label-ink);
  font: 600 12px/1 var(--sans); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); cursor: default; }
.map-dot.picked { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); width: 30px; height: 30px; font-size: 13px; }
.map-dot { cursor: pointer; padding: 0; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.map-dot.selected { transform: scale(1.25); box-shadow: 0 0 0 3px var(--label), 0 0 0 5px var(--ink), 0 4px 12px rgba(0, 0, 0, 0.35); }
/* A card whose cinema is on the map: a click on it chooses it there too (site.js). */
.where-row.on-map { cursor: pointer; transition: outline-color 0.15s ease; }
.where-row.selected { outline: 2px solid var(--ink); outline-offset: -2px; }
.where-row.selected .where-n { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.map-you { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 3px solid var(--paper); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 18%, transparent); }
.where-map-box .maplibregl-ctrl-attrib { font-size: 0.65rem; }
.where-map .grid { stroke: var(--faint); stroke-width: 0.5; opacity: 0.6; }
.where-map .route { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; }
.where-map .you { fill: var(--ink); }
.where-map .you-ring { fill: none; stroke: var(--ink); stroke-width: 1.2; opacity: 0.5; }
.where-map .dot circle { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.where-map .dot text { fill: var(--ink); font: 600 11px var(--sans); text-anchor: middle; }
.where-map .dot.picked circle { fill: var(--accent-fill); stroke: var(--accent-fill); }
.where-map .dot.picked text { fill: var(--on-accent); }
.where-map .dot.away { opacity: 0.45; }
.where-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.where-row { background: var(--surface); outline: 1px solid var(--edge); outline-offset: -1px; padding: 14px 16px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; align-content: start; }
.where-row.picked { box-shadow: inset 3px 0 0 var(--accent); }
.where-n { width: 24px; height: 24px; display: grid; place-items: center; border: 1.4px solid var(--ink); border-radius: 50%; font-size: 0.75rem; font-weight: 600; margin-top: 2px; }
.where-row.picked .where-n { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.where-name { min-width: 0; }
.where-name a { font: var(--serif-weight) 1.2rem/1.2 var(--serif); }
.where-name small { display: block; color: var(--soft); font-size: 0.78rem; line-height: 1.35; margin-top: 2px; }
.where-far { margin: 0; text-align: right; color: var(--accent); font-size: 0.9rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.where-far small { display: block; color: var(--soft); font-size: 0.72rem; font-weight: 400; }
.where-times { grid-column: 2 / -1; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-variant-numeric: tabular-nums; }
.where-time { position: relative; display: grid; padding: 4px 8px; border: 1px solid var(--faint); line-height: 1.2; }
/* A time still to come adds itself to a calendar: its small icon in the corner, quiet until pointed at. */
.where-time .cal { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; opacity: 0.45; }
a.where-time:hover { border-color: var(--ink); }
a.where-time:hover .cal { opacity: 1; }
a.where-time b { padding-right: 8px; }
.where-time b { font-weight: 500; font-size: 0.98rem; }
.where-time small { font-size: 0.68rem; color: var(--soft); }
.where-time.past { color: var(--soft); border-color: transparent; }
.where-time.past b { text-decoration: line-through; font-weight: 400; }
.where-time.next { border-color: var(--ink); }
.where-time.picked { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.where-time.picked small { color: var(--on-accent); }
.where-notes { grid-column: 2 / -1; margin: 8px 0 0; display: grid; gap: 2px; }
.where-notes small { font-size: 0.78rem; line-height: 1.35; color: var(--soft); }
.where-links { grid-column: 2 / -1; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 0.82rem; }
.where-go { color: var(--soft); border-bottom: 1px solid var(--faint); }
.where-go:hover { color: var(--accent); border-color: var(--accent); }
.film-more .where-list { margin-top: 10px; }
/* A film's marks: new this week, back after a break. */
.run-mark, .pick-mark { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 7px; background: var(--ink); color: var(--paper); vertical-align: 1px; }
.run-mark.back, .pick-mark.back { background: var(--label); color: var(--label-ink); outline: 1px solid var(--ink); outline-offset: -1px; }
/* A festival or programme listed as one film: its own mark. */
.run-mark.event, .pick-mark.event { background: var(--label); color: var(--label-ink); outline: 1px dashed var(--label-ink); outline-offset: -3px; }
.tile-mark { margin-right: 6px; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.pick-mark { position: absolute; top: 0; left: 0; z-index: 1; }
.pick:nth-child(even) .pick-mark { left: auto; right: 0; }
/* The poster opens large over everything (site.js). */
.film-poster-open { display: block; cursor: zoom-in; }
.poster-view { position: fixed; inset: 0; z-index: 90; background: var(--shade); display: grid; place-items: center; padding: 24px; cursor: zoom-out; animation: fade-in 0.2s ease; }
.poster-view img { display: block; width: auto; height: auto; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } /* the whole of it on the screen, never past it */
@keyframes fade-in { from { opacity: 0; } }
.film-more summary { cursor: pointer; list-style: none; display: inline-block; margin-top: 10px; padding: 4px 0; border-bottom: 1px solid var(--ink); font-size: 0.9rem; }
.film-more summary::-webkit-details-marker { display: none; }
.film-more[open] summary { display: none; }
.film-days ul { display: flex; flex-wrap: wrap; gap: 8px; }
.film-days li { background: var(--surface); padding: 8px 12px; display: grid; font-size: 0.8rem; color: var(--soft); outline: 1px solid var(--edge); outline-offset: -1px; }
.film-days li.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.film-days li b { font: var(--serif-weight) 1.05rem/1.2 var(--serif); color: var(--ink); text-transform: capitalize; }
@media (max-width: 640px) {
  .sheet .film { margin: 0; min-height: 100%; box-shadow: none; }
  .film-hero { aspect-ratio: 16 / 10; }
  .film-head { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; padding: 12px 16px 0; }
  .film-head > :first-child { margin-top: -56px; }
  .film-hero.bare { height: 52px; }
  .film-hero.bare + .film-head > :first-child { margin-top: -30px; }
  .film-head h1 { font-size: 1.75rem; }
  .film section, .film-overview { margin: 22px 16px 0; }
  /* On a phone the tile is the round button alone, its name under it. */
  .film-trailer { width: auto; min-width: 56px; justify-items: center; text-align: center; gap: 6px; }
  .film-trailer-frame { width: 52px; aspect-ratio: 1; border: 0; border-radius: 50%; background: none; box-shadow: none; overflow: visible; }
  .film-trailer-frame::before, .film-trailer-frame::after, .film-trailer-text small { display: none; }
  .film-trailer .film-play-icon { width: 52px; height: 52px; }
  .film-trailer-text b { font-size: 0.85rem; }
  .film-pick-time { font-size: 3.2rem; }
  .where-map-box { aspect-ratio: 4 / 3; }
}

/* A cinema: its name large, the way there, the days, the films with their times */
.venue { padding: 18px 0 18px; display: grid; gap: 10px; }
.venue-name { margin: 0; font: var(--serif-weight) clamp(2.6rem, 8vw, 5.5rem)/0.92 var(--serif); letter-spacing: -0.035em; text-wrap: balance; }
.venue-facts { margin: 0; color: var(--soft); }
.venue-facts a { text-decoration: underline; }
/* The star that keeps a cinema among the person's own (site.js): hollow, filled when it's one. */
.star { display: inline-grid; place-items: center; width: 36px; height: 36px; vertical-align: middle; color: var(--soft); }
.star .icon { width: 22px; height: 22px; fill: none; }
.star[aria-pressed="true"] { color: var(--accent); }
.star[aria-pressed="true"] .icon { fill: currentColor; }
.star:hover { color: var(--accent); }
.star[hidden] { display: none; }
.venue-name .star { margin-left: 6px; width: 44px; height: 44px; }
.venue-name .star .icon { width: 30px; height: 30px; }
.venue-note { margin: 6px 0 0; font-size: 0.78rem; line-height: 1.35; color: var(--soft); }
.venue-links { margin: 6px 0 0; font-size: 0.82rem; }
.venue-go { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--soft); font-size: 0.9rem; }
.venue-km { background: var(--accent-fill); color: var(--on-accent); padding: 4px 9px; font-variant-numeric: tabular-nums; }
.venue-go span:empty { display: none; }
.venue-go .button { margin-left: auto; }
.venue-films { list-style: none; margin: 0; padding: 34px 26px 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 44px; }
@media (max-width: 1000px) { .venue-films { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .venue-films { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; padding: 26px 14px 10px; } }
.venue-films li:nth-child(even) { margin-top: 34px; }
.venue-pic { position: relative; display: block; }
.venue-img img, .venue-img.no-image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.venue-label { position: absolute; left: -16px; bottom: 12px; max-width: 100%; background: var(--label); padding: 8px 12px; display: grid; gap: 1px; ; color: var(--label-ink)}
.venue-films li:nth-child(even) .venue-label { left: auto; right: -16px; }
.venue-label strong { font: var(--serif-weight) 1.1rem/1.08 var(--serif); text-wrap: balance; }
.venue-label > span:not(.pick-title) { font-size: 0.75rem; color: var(--label-soft); }
.venue-times { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 2px 14px; font: var(--serif-weight) 1.6rem/1.2 var(--serif); letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.venue-times .past { color: var(--soft); text-decoration: line-through; text-decoration-thickness: 1px; }
.venue-times small { display: inline-block; font: 400 0.7rem var(--sans); color: var(--soft); margin-left: 3px; letter-spacing: 0; } /* a block of its own: a time's strike stays off it */
@media (max-width: 640px) { .venue-label { left: -10px; } .venue-films li:nth-child(even) .venue-label { right: -10px; } .venue-times { font-size: 1.3rem; } .venue-go .button { margin-left: 0; } }

/* The cinemas: find one, then the list */
.finder { margin: 14px 0 0; }
.finder input { width: min(100%, 480px); font: var(--serif-weight) 1.4rem/1.2 var(--serif); padding: 10px 2px; border: 0; border-bottom: 2px solid var(--ink); background: transparent; color: var(--ink); border-radius: 0; }
.finder input::placeholder { color: var(--soft); }
.finder input:focus { outline: none; border-bottom-color: var(--accent); }
.cinema-list { list-style: none; padding: 0; margin: 20px 0 0; columns: 3 260px; column-gap: 36px; }
.cinema-list li { padding: 9px 0; break-inside: avoid; border-top: 1px solid var(--faint); display: grid; grid-template-columns: 1fr auto auto; gap: 0 10px; align-items: baseline; }
.cinema-list .star { grid-column: 3; grid-row: 1 / 3; align-self: center; width: 32px; height: 32px; }
.cinema-list .star .icon { width: 18px; height: 18px; }
/* Every cinema on the map, each dot a link to its page. */
.cinemas-map { margin: 18px 0 0; aspect-ratio: 640 / 300; max-height: 400px; width: 100%; }
.where-map .pin { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; }
.map-pin { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-fill); border: 2px solid var(--label); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); }
/* A cinema's card on the maps, under the pointer: the paper label of the posters, its name in the serif. */
.map-card { pointer-events: none; } /* never under the pointer itself, so it doesn't flicker */
.map-card .maplibregl-popup-content { background: var(--label); color: var(--label-ink); padding: 8px 12px; border-radius: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); font: 400 0.8rem/1.35 var(--sans); }
.map-card .maplibregl-popup-tip { border-top-color: var(--label); border-bottom-color: var(--label); }
.map-card-name { font: var(--serif-weight) 1.05rem/1.2 var(--serif); }
.map-card-area { color: var(--label-soft); }
.map-card-times { margin-top: 3px; font-variant-numeric: tabular-nums; }
.map-pin:hover, .map-pin:focus-visible { transform: scale(1.35); background: var(--ink); }
.cinema-list li[hidden] { display: none; }
.cinema-list a { font: var(--serif-weight) 1.15rem/1.25 var(--serif); }
.cinema-list a:hover { color: var(--accent); }
.cinema-list span { grid-row: 2; color: var(--soft); font-size: 0.8rem; }
.cinema-list b { grid-column: 2; grid-row: 1; font-weight: 400; font-size: 0.8rem; color: var(--accent); font-variant-numeric: tabular-nums; }

/* The week's films */
.page-title { margin: 20px 0 8px; font: var(--serif-weight) clamp(2rem, 5vw, 3rem)/1 var(--serif); letter-spacing: -0.02em; }
.page-title span { color: var(--soft); font-style: italic; }
.page-facts { color: var(--soft); margin: 0 0 8px; }
.tiles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.tiles a { display: grid; gap: 6px; }
.tile-img img, .tile-img.no-image { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.tiles strong { font: var(--serif-weight) 1.1rem/1.15 var(--serif); }
.tiles span { font-size: 0.8rem; color: var(--soft); }
.tiles li[hidden] { display: none; }

/* The footer: the logo in black and white, what the site is and who made it, the menu; TMDB's note under a line. */
footer { max-width: 1240px; margin: 48px auto 0; padding: 36px 24px 40px; border-top: 1px solid var(--faint); color: var(--soft); display: grid; gap: 28px; }
.foot { display: grid; grid-template-columns: auto 1fr auto; gap: 18px 24px; align-items: center; }
.logo-mono { width: 56px; height: 56px; display: block; }
.logo-mono .logo-bg { fill: var(--ink); }
.logo-mono .logo-fg { fill: var(--paper); }
.foot-words p { margin: 0; }
.foot-line { font: var(--serif-weight) 1.35rem/1.25 var(--serif); color: var(--ink); letter-spacing: -0.01em; }
.foot-by { font-size: 0.85rem; margin-top: 4px !important; }
.foot-by a { color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--ink); }
.foot-by a:hover { color: var(--accent); border-color: var(--accent); }
footer .menu { flex-wrap: wrap; justify-content: flex-end; }
.foot-note { margin: 0; max-width: none; padding-right: 100px; /* clear of the floater at the bottom right */ font-size: 0.75rem; line-height: 1.5; padding-top: 16px; border-top: 1px dashed var(--faint); }
.foot-note a { text-decoration: underline; }
@media (max-width: 640px) { .foot { grid-template-columns: auto 1fr; } footer .menu { grid-column: 1 / -1; justify-content: flex-start; } .foot-note { padding-right: 76px; } }

@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }