/* black felt letterboard, big letters. loaded after each page's own <style>, so these tokens and overrides win.
   felt grooves sit behind the page; times and selected filters are white letter tiles; titles in barlow caps.
   felt and greys lean warm to sit with the cream tiles and amber bulbs.
   wcag contrast on the lightest of felt / card / raised: body 14.4:1, ink-2 10.5:1, grey 6.0:1, accent 9.8:1, warn 6.8:1;
   tiles 17.5:1, version mark on tile 6.5:1 (5.2:1 on a hovered tile), end time 5.9:1; chip borders 3.3:1 */
:root {
  --felt: #131211;
  --groove: #0c0b0a;
  --bg: #131211;
  --surface: #181715;
  --surface-2: #252320;
  --line: #403d38;
  --line-strong: #6b665e;
  --ink: #f8f5ef;
  --ink-2: #d8d3c9;
  --ink-3: #a59f94;
  --ink-4: #6b665e;
  --accent: #ffc34d;
  --accent-ink: #141210;
  --warn: #ff8a5c;
  --tile: #f6f3ec;
  --tile-hover: #ffd77a;
  --tile-ink: #0e0d0c;
  --tile-ink-2: #625d55;
  --sup: #a8241a;
  --radius: 4px;
  --display: "Barlow", system-ui, sans-serif;
  --mono: "Barlow", system-ui, sans-serif;
  --sign: "Big Shoulders Display", Impact, sans-serif;
}
body {
  font-size: 16px; font-variant-numeric: tabular-nums;
  background: var(--felt) repeating-linear-gradient(180deg, var(--felt) 0 6px, var(--groove) 6px 8px);
}

/* brand: signage caps inside a frame of bulbs */
.brand h1 {
  display: inline-block; position: relative; padding: 10px 18px 8px; background: var(--groove);
  font-family: var(--sign); font-weight: 900; font-stretch: 100%; letter-spacing: 0.04em;
}
.brand h1::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; padding: 5px;
  background: radial-gradient(circle at center, var(--accent) 0 2.6px, transparent 3.2px) 0 0 / 14px 14px;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 70%, transparent));
}
.brand p { font-size: 14px; margin-top: 10px; }
.views { font-size: 14px; }
.search input, .panel-head input { font-size: 16px; }

/* filters: barlow semibold caps, 38px tall, the selected one is a white tile */
.chip, .later, .sort {
  height: 38px; border-radius: 3px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.tools .chip, .tools .later { height: 34px; }
.chip, .later, .sort { border-color: var(--line-strong); }
.chip:hover, .later:hover, .sort:hover { background-color: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.chip.zero:not([aria-pressed="true"]) { opacity: 1; color: var(--ink-4); border-color: var(--line); background-color: transparent; }
.chip[aria-pressed="true"], .later.on {
  background-color: var(--tile); border-color: var(--tile); color: var(--tile-ink);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.chip .n { font-size: 13px; }
.row .label { font-size: 12.5px; }
.later option, .sort option { text-transform: none; }

/* section heads in signage caps */
section > h2, .count, .panel-head h2 {
  font-family: var(--sign); font-size: 19px; font-weight: 800; letter-spacing: 0.12em; color: var(--ink);
}
section > h2 .count, .count span { font-family: var(--display); font-size: 15px; color: var(--ink-3); letter-spacing: 0; }
section > h2 .tools { font-family: var(--display); }

/* film titles: barlow bold caps at normal width */
.film h3, .card h2, .night .film .l, .lead-film b {
  font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.12;
}
.film h3 { font-size: 21px; padding-right: 64px; }
.card h2 { font-size: 18px; }
.strip .t, .pp .tt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 14px; }
.night .film .l { font-size: 16px; }
.night .film .l span { text-transform: none; letter-spacing: 0; }
.lead-film b { font-size: 20px; }
.night > h3 { font-family: var(--sign); font-size: 22px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.night > h3 span { font-family: var(--display); letter-spacing: 0; text-transform: none; }

/* bigger supporting text */
.meta, .venue .day, .venue .name, .links, .alt { font-size: 14px; }
.venue .days { grid-template-columns: 78px 1fr; }
.leaving li { font-size: 15.5px; }
.leaving .where { font-size: 14.5px; }
.leaving .when { font-family: var(--sign); font-size: 16px; font-weight: 700; letter-spacing: 0.04em; }
.tag { font-size: 11.5px; border-radius: 3px; }
.tag.leaving { background: color-mix(in srgb, var(--warn) 20%, var(--surface)); color: var(--warn); }
.blurb { font-size: 14.5px; }
.where, .card .meta { font-size: 13px; }

/* times: white letter tiles */
.times .t, .ts .t {
  font: 800 18px/1.15 var(--sign); letter-spacing: 0.05em; padding: 2px 8px; border-radius: 2px;
  background: var(--tile); color: var(--tile-ink);
}
.times { gap: 6px; }
.times a.t:hover, .ts a.t:hover { background: var(--tile-hover); }
.times .t sup, .ts .t sup { font: 700 12px var(--display); color: var(--sup); letter-spacing: 0.02em; }
.times .t .end { color: var(--tile-ink-2); font-size: 14px; }

/* poster placeholders become blank tiles with the title on them */
.ph, .poster .ph { background: var(--tile); color: var(--tile-ink); font-family: var(--sign); font-weight: 900; font-stretch: 100%; }
.film img, .film .ph, .strip img, .strip .ph, .poster, .pp .img { border-radius: 2px; }

/* cards: a hairline on the felt instead of a lifted panel */
.film, .night, .panel, .area { border: 1px solid var(--line); }
.night .film { border: 0; border-top: 1px solid var(--line); }
.night > h3 + .film { border-top: 0; }

/* calendars: selected day is a white tile too */
.cal-grid .d[aria-pressed="true"], .day[aria-pressed="true"] { background: var(--tile); color: var(--tile-ink); }
.cal-grid .d[aria-pressed="true"] .n, .day[aria-pressed="true"] em { color: var(--tile-ink-2); }
.cal-grid .d .n, .day em { font-size: 11.5px; }
.day, .cal-grid .d { border-radius: 3px; }

@media (max-width: 520px) {
  /* bigger caps don't fit beside the heading: the sort and view tools take their own line */
  section > h2 { flex-wrap: wrap; }
  section > h2 .tools { margin-left: 0; flex-basis: 100%; }
  #view { display: flex; gap: 6px; }
}

/* phones: sign, subtitle and view tabs centred (search sits on its own line below) */
@media (max-width: 720px) {
  header.top .brand { flex: 1 0 100%; text-align: center; }
  .views { justify-content: center; gap: 22px; }
  header.top .search { flex-basis: 100%; margin-left: 0; }
}