/* Archivo, variable (weight 400–800, width 75–125%), OFL 1.1 — see
   vendor/fonts/OFL.txt. Vendored like Leaflet: no request ever leaves the host.
   The width axis carries the design: expanded for the masthead, condensed
   uppercase for every label, normal for the data itself. */
@font-face {
  font-family: 'Archivo';
  src: url('/static/vendor/fonts/archivo-latin.woff2') format('woff2');
  font-weight: 400 800; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('/static/vendor/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 400 800; font-stretch: 75% 125%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Dark only — a cinema schedule read in the evening, on the yellow-on-black of
   a Zürich departure board. Yellow is reserved for what is live or clickable;
   everything else is white, grey and hairlines. */
:root {
  --bg: #0a0a0b;
  --panel: #121214;
  --panel-2: #1a1a1e;
  --line: #2a2a31;
  --text: #f3f2ee;
  --dim: #8f8f99;
  --accent: #ffd400;
  --ink: #0a0a0b;              /* text on top of yellow */
  --ov: #4fd6c4;               /* original version — the one non-yellow signal */
  --warn: #ff7a2f;
  --radius: 10px;
  --tint: color-mix(in srgb, var(--accent) 10%, transparent);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* One label style for the whole page: condensed, uppercase, tracked out. Every
   caption, count and unit uses it, so the data can stay plainly set. */
.meta, .apilink, .chip .day-date, .cinemas summary, .mapwrap summary, .reset,
.viewswitch a, .rowswitch a, .weekhead .hint, .cellsum, .ext a,
th.rowhead .rowmeta, th.rowhead .rowlinks a, table.matrix thead th .dn,
a.cell .ov, .showchip .lg, .cellgroup h4 .cnt, .times .daysep td, .foot,
h1 .sub, button {
  font-stretch: 88%;
  text-transform: uppercase;
  letter-spacing: .085em;
  font-weight: 700;
}

/* header */
.topbar {
  border-bottom: 1px solid var(--accent); background: var(--panel);
  position: sticky; top: 0; z-index: 5;
}
.topbar .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 13px; flex-wrap: wrap; }
h1 {
  margin: 0; font-size: 21px; font-weight: 800; font-stretch: 115%;
  text-transform: uppercase; letter-spacing: -.005em; line-height: 1.05;
}
h1 .sub { color: var(--accent); font-size: 11px; margin-left: 10px; vertical-align: 2px; }
.meta { color: var(--dim); font-size: 11px; }
.apilink {
  margin-left: 10px; border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 8px; font-size: 10.5px; color: var(--dim);
}
.apilink:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.warn {
  background: color-mix(in srgb, var(--warn) 12%, var(--panel));
  color: #ffcaa8; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line));
  border-left: 3px solid var(--warn);
  padding: 9px 12px; border-radius: var(--radius); margin-top: 12px; font-size: 13px;
}
.warn b { color: var(--warn); }

/* filters */
.filters { padding-block: 14px; border-bottom: 1px solid var(--line); }
.days { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.days[hidden] { display: none; }   /* the class would otherwise beat [hidden] */
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  padding: 6px 12px; font-size: 13px; font-weight: 600; user-select: none;
  transition: background .12s, border-color .12s, color .12s;
}
/* The input stays in the DOM (clipped, not display:none) so a label click keeps
   toggling it and keyboard focus still works. */
.chip input {
  position: absolute; width: 1px; height: 1px; opacity: 0;
  clip-path: inset(50%); pointer-events: none;
}
/* :has() gives the chip its active look the instant it is clicked, before the
   form round-trip repaints it with the server-rendered .on class. */
.chip.on,
.chip:has(input:checked) {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
}
.chip:hover { border-color: var(--dim); }
.chip.on:hover, .chip:has(input:checked):hover { border-color: var(--accent); }
.chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip .day-date { color: var(--dim); font-size: 10.5px; }
.chip.on .day-date, .chip:has(input:checked) .day-date { color: color-mix(in srgb, var(--ink) 65%, transparent); }
.chip.small { padding: 5px 10px; font-size: 12.5px; }

.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
input[type=search], select, input[type=time], button {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; font-size: 13.5px; font-family: inherit;
}
input[type=search]:focus, select:focus, input[type=time]:focus {
  outline: none; border-color: var(--accent);
}
.search { min-width: 220px; flex: 1 1 220px; }
.timebox { color: var(--dim); font-size: 11px; display: inline-flex; align-items: center; gap: 5px;
           font-stretch: 88%; text-transform: uppercase; letter-spacing: .085em; font-weight: 700; }
button {
  background: var(--accent); border-color: var(--accent); color: var(--ink);
  cursor: pointer; font-weight: 800; font-size: 11.5px; padding-inline: 14px;
}
button:hover { background: #ffe14d; }
.reset { color: var(--dim); font-size: 11px; padding: 7px 6px; }
.reset:hover { color: var(--text); }
.viewswitch, .rowswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.viewswitch a, .rowswitch a { padding: 8px 12px; font-size: 10.5px; color: var(--dim); }
.viewswitch a:hover, .rowswitch a:hover { color: var(--text); text-decoration: none; }
.viewswitch a.on, .rowswitch a.on { background: var(--accent); color: var(--ink); }

.cinemas { margin-top: 10px; }
.cinemas summary, .mapwrap summary { cursor: pointer; color: var(--dim); font-size: 10.5px; }
.cinemas summary:hover, .mapwrap summary:hover { color: var(--accent); }
.cinema-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* map */
.mapwrap { padding-block: 14px; border-bottom: 1px solid var(--line); }
.mapwrap summary { margin-bottom: 10px; }
#map {
  height: 340px; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel-2); z-index: 0;
}
@media (max-width: 720px) { #map { height: 240px; } }

/* Leaflet's own chrome, themed to match the page. */
.leaflet-container { font: inherit; background: var(--panel-2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.leaflet-popup-content { font-size: 13px; line-height: 1.45; }
.leaflet-popup-content a { color: var(--accent); font-weight: 700; }
.leaflet-bar a, .leaflet-control-attribution {
  background: var(--panel); color: var(--dim); border-color: var(--line);
}
.leaflet-control-attribution a { color: var(--dim); }

.pin {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--ink);
  font-size: 12px; font-weight: 800; line-height: 1;
  border: 2px solid var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, .6);
}
.pin.on { background: var(--ink); color: var(--accent); border-color: var(--accent); }

.maplegend {
  list-style: none; margin: 10px 0 0; padding: 0;
  display: grid; gap: 5px 14px; font-size: 13px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.maplegend li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.maplegend li.on a { color: var(--accent); font-weight: 700; }
.maplegend a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maplegend .n { color: var(--dim); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.legend-pin {
  flex: none; width: 22px; height: 22px; padding: 0; border-radius: 50%;
  background: var(--accent); color: var(--ink); border: 0;
  font-size: 11.5px; font-weight: 800; cursor: pointer; font-family: inherit;
}
.legend-pin:hover { filter: brightness(1.15); }

.pin-label {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 6px; font-size: 11px; font-weight: 700;
  box-shadow: none; white-space: nowrap;
}
.pin-label::before { display: none; }        /* drop Leaflet's tooltip arrow */
.pin-label.on { border-color: var(--accent); color: var(--accent); }
#map.labels-off .pin-label { display: none; }

.leaflet-tile-pane { filter: brightness(.72) contrast(1.08) saturate(.85); }

/* cards */
.cards { display: flex; flex-direction: column; gap: 14px; padding-block: 18px; }
.card {
  display: flex; gap: 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; overflow: hidden;
}
.poster { width: 92px; height: 138px; object-fit: cover; border-radius: 6px; flex: none; background: var(--panel-2); }
.card .body { min-width: 0; flex: 1; }
.card h2 { font-size: 18px; font-weight: 800; margin: 0 0 3px; letter-spacing: -.015em; }
.card h2 .year { color: var(--dim); font-weight: 600; font-size: 13px; margin-left: 7px; font-variant-numeric: tabular-nums; }
.ot { color: var(--dim); font-size: 13px; margin: 0 0 4px; }
.facts { color: var(--dim); font-size: 12.5px; margin: 0 0 7px; }
.ext { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 9px; }
.ext a {
  font-size: 10px; border: 1px solid var(--line); border-radius: 5px;
  padding: 2px 7px; color: var(--dim);
}
.ext a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.syn { color: var(--dim); font-size: 13px; margin: 0 0 10px; max-width: 70ch; }

/* showings tables */
table { width: 100%; border-collapse: collapse; }
.showings td, .times td { padding: 6px 8px 6px 0; font-size: 13.5px; border-top: 1px solid var(--line); vertical-align: top; }
.showings tr:first-child td { border-top: 0; }
td.d { color: var(--dim); width: 58px; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.t { font-variant-numeric: tabular-nums; font-weight: 800; width: 54px; white-space: nowrap; }
td.cin { color: var(--dim); }
/* One column takes the slack, so language, attributes and the ticket link stay
   together on the right instead of drifting apart: the cinema in a film card,
   the film title in the chronological list (where it must not wrap early). */
.showings td.cin, .times td.film { width: 99%; }
/* …and in that list the cinema shrinks to its own width instead of wrapping
   the name over three lines. It may wrap again once the screen is narrow. */
.times td.cin { width: 1%; white-space: nowrap; }
td.cin .hall { opacity: .7; margin-left: 6px; }
td.cin a:hover { color: var(--text); }
.card h2 a:hover { text-decoration: underline; }
td.film a { font-weight: 700; }
td.film .ot { display: block; }
td.lang { white-space: nowrap; color: var(--dim); font-size: 12.5px; }
td.lang.ov { color: var(--ov); }
td.attr { color: var(--dim); font-size: 12px; }
td.go, td.links { text-align: right; white-space: nowrap; }
.ticket {
  color: var(--accent); font-size: 10.5px; font-weight: 700;
  font-stretch: 88%; text-transform: uppercase; letter-spacing: .085em;
}
.times .daysep td {
  padding-top: 22px; color: var(--accent); font-size: 11px; border-top: 0;
}

/* week matrix — the departure board */
.weekhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px 0 10px; }
.weekhead .hint { color: var(--dim); font-size: 10.5px; }

.matrixscroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.matrix { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--panel); }
table.matrix th, table.matrix td { border-bottom: 1px solid var(--line); padding: 0; }
table.matrix thead th {
  /* `top` is inert here: .matrixscroll sets overflow-x, which computes
     overflow-y to auto, so this sticks to that scrollport rather than the
     viewport. Kept because the z-index below is what orders the corner cell. */
  position: sticky; top: 0; z-index: 3; background: var(--panel);
  padding: 8px; text-align: center; font-size: 10.5px; font-weight: 700;
  border-bottom: 1px solid var(--line);
}
table.matrix thead th .dn { display: block; color: var(--dim); }
table.matrix thead th .dd {
  display: block; color: var(--dim); font-weight: 600; font-size: 11px;
  font-variant-numeric: tabular-nums; opacity: .75;
}
/* Today gets the yellow rail: the one column you are most likely to read. */
table.matrix thead th.today { box-shadow: inset 0 -2px 0 var(--accent); }
table.matrix thead th.today .dn { color: var(--accent); }
table.matrix td.today { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* One fixed width for head and body cell alike — a flex table cell would drop
   out of the column layout and the two would drift apart. */
/* Prefixed with the table so it out-specifies `table.matrix th { padding: 0 }`
   above — without that the padding here never applies and the titles sit flush
   against the left edge. */
table.matrix th.rowhead {
  position: sticky; left: 0; z-index: 2; background: var(--panel);
  text-align: left; padding: 7px 10px;
  width: 250px; min-width: 250px; max-width: 250px;
  font-weight: 700; font-size: 13px; border-right: 1px solid var(--line);
}
/* The corner cell is sticky on both axes, so it has to outrank the day headers
   it scrolls under. Selector must be at least as specific as
   `table.matrix thead th` above, or that rule's z-index wins, the two tie, and
   DOM order lets the days paint over the corner. */
table.matrix thead th.rowhead {
  /* Above the day headers (3), below the sticky masthead (5) — at 6 the corner
     scrolled over the site title. */
  z-index: 4; color: var(--dim); font-size: 10.5px;
  font-stretch: 88%; text-transform: uppercase; letter-spacing: .085em;
}
.headinner { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
th.rowhead .thumb {
  flex: none; width: 32px; height: 48px; border-radius: 4px; object-fit: cover;
  background: var(--panel-2);
}
th.rowhead .headtext { min-width: 0; flex: 1; }
th.rowhead .rowmeta { display: block; color: var(--dim); font-size: 10px; margin-top: 1px; }
th.rowhead .rowlinks { display: flex; gap: 4px; margin-top: 3px; }
th.rowhead .rowlinks a {
  font-size: 9.5px; color: var(--dim);
  border: 1px solid var(--line); border-radius: 4px; padding: 0 5px;
}
th.rowhead .rowlinks a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
th.rowhead .lbl { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
th.rowhead .sub {
  display: block; color: var(--dim); font-weight: 500; font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

table.matrix td { text-align: center; vertical-align: middle; }
table.matrix td .none { color: #33333b; font-size: 13px; }
a.cell {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 7px 4px; min-width: 62px; text-decoration: none; line-height: 1.15;
  transition: background .12s;
}
a.cell:hover { background: var(--tint); text-decoration: none; }
a.cell.open {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  box-shadow: inset 0 -2px 0 var(--accent);
}
a.cell .n { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
a.cell .t { font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; }
a.cell .ov { font-size: 9.5px; color: var(--ov); }
a.cell.open .n, a.cell.open .t { color: var(--text); }

/* film header inside an opened cell */
.cellfilm { display: flex; gap: 12px; padding-bottom: 10px; margin-bottom: 10px;
            border-bottom: 1px solid var(--line); }
.cellfilm img { width: 54px; height: 81px; object-fit: cover; border-radius: 4px; flex: none; }
.cellfilm b { font-size: 14.5px; font-weight: 800; }
.cellfilm .ot { color: var(--dim); font-size: 12px; }
.cellfilm .facts { color: var(--dim); font-size: 12px; margin-top: 3px; }
.cellfilm .ext { margin: 5px 0 0; }
.cellfilm .syn { margin: 7px 0 0; font-size: 12.5px; color: var(--dim); max-width: 80ch; }

tr.detail td { padding: 12px; background: var(--panel-2); text-align: left;
               box-shadow: inset 2px 0 0 var(--accent); }

.cellsum { color: var(--dim); font-size: 10.5px; margin-bottom: 10px; }

/* Grouped screenings: one block per cinema (or per film), times as chips.
   Both grids are auto-fill so every wrap lands on a block or chip boundary
   instead of in the middle of a screening. */
.cellgroups { display: flex; flex-direction: column; }
.cellgroup {
  display: grid; grid-template-columns: 190px 1fr; gap: 4px 14px;
  align-items: start; padding: 7px 0; border-top: 1px solid var(--line);
}
.cellgroup:first-child { border-top: 0; padding-top: 2px; }
.cellgroup h4 {
  display: flex; align-items: baseline; gap: 8px; margin: 0;
  font-size: 12.5px; font-weight: 700; min-width: 0; padding-top: 6px;
}
.cellgroup h4 a, .cellgroup h4 span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cellgroup h4 a:hover { color: var(--accent); text-decoration: none; }
.cellgroup h4 .cnt {
  flex: none; margin-left: auto; color: var(--dim); font-size: 10px;
  font-variant-numeric: tabular-nums;
}
.chips { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
.showchip {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px; min-width: 0; line-height: 1.15;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  transition: background .12s, border-color .12s;
}
.showchip:hover {
  text-decoration: none; border-color: var(--accent); background: var(--tint);
}
.showchip:hover .tm { color: var(--accent); }
.showchip .tm { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.showchip .lg {
  font-size: 9.5px; color: var(--dim); max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.showchip .lg.ov { color: var(--ov); }
/* No per-screening ticket link from this source — still opens the film page. */
.showchip.noticket { border-style: dashed; }

@media (max-width: 720px) {
  /* Same specificity as the base rule above, or that one wins and the column
     stays 250px here. */
  table.matrix th.rowhead { width: 170px; min-width: 170px; max-width: 170px; font-size: 12px; }
  a.cell { min-width: 52px; }
  .cellgroup { grid-template-columns: 1fr; }
  .cellgroup h4 { padding-top: 0; }
  .chips { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
}

/* cinema pages (/kinos) */
.pagelead { color: var(--dim); font-size: 13.5px; max-width: 62ch; padding: 20px 0 4px; }
.kinos {
  display: grid; gap: 14px; padding-block: 14px 8px; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
}
.kino {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 12px; scroll-margin-top: 80px;
}
.kino h2, .kinohead h2 { font-size: 17px; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.kinohead h2 { font-size: 24px; }
.kino h2 a:hover { color: var(--accent); text-decoration: none; }
.tagline { color: var(--accent); font-size: 12.5px; margin: 3px 0 0; }
.addr { color: var(--dim); font-size: 12.5px; margin: 6px 0 0; }
.addr a { border-bottom: 1px solid var(--line); }
.addr a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.lead { font-size: 13.5px; margin: 10px 0 0; color: var(--text); }
.closed { color: var(--warn); font-size: 12.5px; margin: 10px 0 0; }

/* Counts come from the crawled rows, so they get the board treatment. */
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 12px 0 0; }
.stats > div {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 8px;
}
.stats dt {
  color: var(--dim); font-size: 9.5px; font-weight: 700; font-stretch: 88%;
  text-transform: uppercase; letter-spacing: .085em;
}
.stats dd { margin: 1px 0 0; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stats.big { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: 18px; }
.stats.big > div { padding: 10px 12px; }
.stats.big dd { font-size: 22px; }

.kino .ext, .kinohead .ext { margin: 12px 0 0; }
.ext a.primary { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }

.kinopage { padding-bottom: 8px; }
.kinohead { padding: 22px 0 0; }
.kinohead .tagline { font-size: 14px; margin-top: 6px; }
.kinohead .addr { font-size: 13px; }

/* Lead across the top, the remaining four in a 2×2 — five blocks in three
   columns would always leave one cell empty. */
.profile {
  display: grid; gap: 1px; margin: 18px 0 0; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) { .profile { grid-template-columns: 1fr; } }
.profile section { background: var(--panel); padding: 12px 14px; }
/* Five blocks never divide evenly into a column count; letting the first one
   run the full width turns the leftover cell into a lead paragraph. */
.profile section:first-child { grid-column: 1 / -1; }
.profile section:first-child p { max-width: 90ch; }
.profile h3 {
  margin: 0 0 5px; color: var(--accent); font-size: 10.5px; font-weight: 700;
  font-stretch: 88%; text-transform: uppercase; letter-spacing: .085em;
}
.profile p { margin: 0; font-size: 13.5px; max-width: 60ch; }

.kinomap { height: 240px; margin-top: 16px; border-radius: var(--radius);
           border: 1px solid var(--line); background: var(--panel-2); z-index: 0; }

.halls { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 14px 0 0; }
.halls .cap {
  color: var(--dim); font-size: 10px; font-weight: 700; font-stretch: 88%;
  text-transform: uppercase; letter-spacing: .085em; margin-right: 3px;
}
.hallchip {
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px;
  font-size: 11.5px; color: var(--dim); background: var(--panel);
}

.sectionhead {
  margin: 26px 0 10px; font-size: 11px; font-weight: 700; color: var(--dim);
  font-stretch: 88%; text-transform: uppercase; letter-spacing: .085em;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.kinoday { margin-bottom: 16px; }
.kinoday > h4 {
  margin: 0 0 6px; font-size: 12px; font-weight: 800; color: var(--accent);
  font-stretch: 88%; text-transform: uppercase; letter-spacing: .085em;
}
.kinoday > h4 .dd { color: var(--dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.otherkinos { margin-bottom: 8px; }
.otherkinos a { white-space: nowrap; }   /* one house per chip, not per line */

.empty { color: var(--dim); padding: 48px 0; text-align: center; font-size: 13px; }
.foot { color: var(--dim); font-size: 10.5px; line-height: 1.7; padding-block: 26px;
        border-top: 1px solid var(--line); margin-top: 24px; }
.footnav { display: flex; gap: 14px; margin-bottom: 8px; }
.footnav a { color: var(--accent); }
.popuplinks { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
h1 a:hover { text-decoration: none; color: var(--accent); }

@media (max-width: 720px) {
  /* Shrunk, not hidden — the poster is how a card is recognised at a glance.
     .card is flex with `min-width: 0` on the body, so the narrower fixed width
     just leaves more room for the text. */
  .poster { width: 64px; height: 96px; }
  .card { gap: 10px; padding: 12px; }
  td.cin { font-size: 12.5px; }
  .times td.cin { white-space: normal; width: auto; }
  td.attr { display: none; }
}

/* The masthead is set tight enough that the subtitle breaks mid-phrase on a
   phone; give it its own line instead. */
@media (max-width: 560px) {
  h1 { font-size: 18px; }
  h1 .sub { display: block; margin: 3px 0 0; vertical-align: baseline; }

  /* On a phone the board is the page, so spend the gutters on it. */
  .wrap { padding: 0 10px; }
  /* Full-bleed the scroller back over that padding — 20px is most of another
     column of times. The side borders go with it; the top and bottom stay. */
  .matrixscroll {
    margin-inline: -10px; border-radius: 0; border-left: 0; border-right: 0;
  }
  /* The extra left padding is deliberate: the scroller is full-bleed, so
     without it the titles sit flush against the screen edge. */
  table.matrix th.rowhead {
    width: 150px; min-width: 150px; max-width: 150px;
    padding: 6px 8px 6px 12px;
  }
  /* Posters stay — they are how the board is scanned. Shrunk to pay for
     themselves. The IMDb/TMDB/Trailer chips go instead; they are on the film
     card anyway and are a poor tap target at this size. */
  th.rowhead .thumb { width: 26px; height: 39px; }
  .headinner { gap: 6px; }
  th.rowhead .rowlinks { display: none; }
  table.matrix thead th { padding: 6px 4px; }
  a.cell { min-width: 44px; padding: 6px 3px; }
  .topbar .wrap { padding-block: 9px; }
  .weekhead { padding: 12px 0 8px; }
}

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