/* Town and neighbourhood pages (redesign, 2026-10-11). Mobile first. Tap targets are at least 44px; focus is always visible.
   The first screen shows times: a one-line H1, one compact sticky bar (date tabs, plus the chosen film as a
   chip), a short film strip that scrolls away. */
/* Theme "neutral dark" (Andrew, round 3: the default). Charcoal page with the faintest green tint, cards a
   clear step lighter, gold for selection and links; green only for brand touches (the logo mark, chain
   badges). Contrast, measured: text 12.6-16.1:1, muted 6.4-8.1:1, gold 7.8-10.0:1, dark text on gold
   10.0:1, control borders 3.7:1 on cards and 4.8:1 on the page, card/page step 1.28:1. */
body.town2 { --bg: #121513; --bg-deep: #0c0e0d; --card: #262b29; --line: #3a403d; --text: #eef0ee;
             --muted: #a7aeaa; --edge: #7a8480; --brand: #1f5244; --brand-edge: #3d8a73; --ongold: #141414; }
body.town2 .badge:not(.indie) { background: var(--brand); border-color: var(--brand-edge); color: #eef2ef; }
body.town2 .badge.indie { color: var(--ongold); }
.tv2 a:focus-visible, .tv2 button:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 2px; border-radius: 8px; }

/* H1 row: the logo mark, the page's first line, search at the right. */
.h1row { display: flex; align-items: center; gap: 6px; padding-top: 6px; }
.mark { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -9px; }
.mark img { display: block; width: 26px; height: 26px; border-radius: 6px; }
.h1row h1 { flex: 1; min-width: 0; margin: 0; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.3px; }
.srch { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
        margin-right: -10px; border-radius: 10px; color: var(--text); }
.srch:hover { color: var(--gold); }

/* The one sticky bar: the chosen film's chip (when filtered) and the day tabs, one row. Opaque, so nothing
   shows through; only this element is sticky. */
.bar { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
       margin: 4px -16px 0; padding: 6px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.tabs { flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: none; display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px;
       padding: 0 12px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card);
       color: var(--text); font-weight: 700; font-size: .92rem; white-space: nowrap; }
.tab:hover { text-decoration: none; color: var(--text); border-color: var(--gold); }
.js .tab[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--ongold); }

/* Film strip: the filter. "All films" pinned at the left, outside the scroller, so it is never cut off;
   then posters with the title underneath (2 lines), 4-5 in view at phone width. Scrolls away with the page. */
.strip { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 8px; padding: 10px 16px 6px;
         margin: 0 -16px; background: var(--bg); isolation: isolate; }
.fstrip { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; margin-right: -16px; padding-right: 16px; background: var(--bg);
          scroll-snap-type: x proximity; scrollbar-width: none; }
.fstrip::-webkit-scrollbar { display: none; }
.pf { flex: none; display: block; width: 56px; padding: 0; scroll-snap-align: start; background: none; border: 0;
      color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pf:hover { text-decoration: none; color: var(--text); }
.pf img { display: block; width: 56px; height: 84px; border-radius: 8px; object-fit: cover; background: var(--card);
          border: 2px solid transparent; }
.pf .pt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
          margin-top: 4px; font-size: .7rem; line-height: 1.2; font-weight: 600; }
.pf.off img { opacity: .4; }
.pf.off .pt { color: var(--muted); }
.pf.off[aria-pressed="true"] img { opacity: 1; }
.pf[aria-pressed="true"] img { border-color: var(--gold); }
.pf[aria-pressed="true"] .pt { color: var(--gold); }
.pf.all { flex: none; display: flex; align-items: center; justify-content: center; width: 60px; height: 84px;
          padding: 4px; border-radius: 10px; border: 1px solid var(--edge); background: var(--card);
          font-weight: 700; font-size: .8rem; line-height: 1.2; text-align: center; }
.pf.all[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--ongold); }

/* The chosen film, once, above the list (no clear button here: the bar chip and "All films" clear it). */
.sel { margin: 2px 0 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--gold); }
.sel h2 { margin: 0; font-size: 1.05rem; }
.sel .fm { margin: 4px 0 0; }
.sel .syn { margin: 6px 0 0; font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sel .more { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0 -10px; font-weight: 600; }

/* Hub (London): one row per neighbourhood, linking to its page (or, for a one-cinema area, the cinema). */
.hubh { margin: 14px 0 8px; font-size: 1rem; color: var(--muted); font-weight: 600; }
.hubl { list-style: none; margin: 0 0 8px; padding: 0; border-radius: 14px; background: var(--card); overflow: hidden; }
.hubl li + li { border-top: 1px solid var(--line); }
.hrow { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 14px; color: var(--text); }
.hrow:hover { text-decoration: none; color: var(--text); background: var(--bg-deep); }
.hrow .hn { flex: none; font-weight: 700; }
.hrow .hc { flex: 1; min-width: 0; text-align: right; color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrow::after { content: "›"; flex: none; color: var(--gold); font-size: 1.3rem; line-height: 1; }
.hubl li { scroll-margin-top: 64px; }

/* Cinema pages: the header under the H1 (chain badge rule, town › neighbourhood, address and Map, links). */
.cinhead { padding: 2px 0 4px; }
.ckick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: .9rem; }
.ckick a { font-weight: 600; }
.cinhead .a1row { margin-top: 4px; }
.cinhead .a1 { white-space: normal; }
.clinks { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 2px 0 0; font-size: .88rem; }
.clinks a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.cin2 .cv { padding-top: 0; }
.cin2 .cv > .fc { border-top: 0; border-bottom: 1px solid var(--line); }
.cin2 .cv > .fc:last-of-type { border-bottom: 0; }
.cinfoot { margin-top: 8px; }
.cinfoot .more { margin: 0; }
.cin2 .cv > .none { margin-top: 12px; }
.empty { color: var(--muted); }

/* Days: with script, one at a time. */
.js .day[data-date]:not(.on) { display: none; }
.dh { margin: 16px 0 10px; font-size: 1.05rem; }
.js .dh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.day { scroll-margin-top: 64px; }

/* One block per cinema. */
.cv { background: var(--card); border-radius: 14px; padding: 12px 14px 4px; margin: 0 0 12px; scroll-margin-top: 64px; }
.ch { padding-bottom: 6px; }
.ch h3 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.ch h3 a { color: var(--text); }
.ch .badge { margin-left: 4px; }
.a1row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.a1 { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Map: one style everywhere, a small outlined pill at the right of the address row (44px hit area). */
.map { position: relative; flex: none; margin-left: auto; display: inline-flex; align-items: center; height: 30px;
       padding: 0 12px; border-radius: 999px; border: 1px solid var(--edge); color: var(--text); font-weight: 600;
       font-size: .82rem; }
.map::after { content: ""; position: absolute; inset: -7px -4px; }
.map:hover { text-decoration: none; color: var(--text); border-color: var(--gold); }
.cv .none { margin: 0 0 10px; color: var(--muted); font-size: .9rem; }

/* Film card: small poster, title, certificate and running time, then time tiles. */
.fc { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.fp { width: 64px; height: 96px; border-radius: 8px; object-fit: cover; background: var(--bg); }
/* No poster (round 6): a placeholder with the title in small type, not a single letter. */
.fp.none, .pimg.none { display: flex; align-items: center; justify-content: center; padding: 6px; box-sizing: border-box;
  background: linear-gradient(160deg, var(--card), var(--bg)); border: 1px solid var(--line); text-align: center; overflow: hidden; }
.fp.none span, .pimg.none span { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .58rem; line-height: 1.25; font-weight: 600; color: var(--muted); hyphens: auto; overflow-wrap: break-word; }
.pimg.none { width: 56px; height: 84px; border-radius: 8px; }
.fb { min-width: 0; }
.fb h4 { margin: 0; font-size: 1rem; line-height: 1.3; }
.fb h4 a { color: var(--text); }
.fm .ml { color: var(--muted); }                   /* labels every showing has (round 6) */
.fm { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 4px 0 0; color: var(--muted); font-size: .84rem; }
.cert { display: inline-block; min-width: 26px; padding: 0 5px; border: 1.5px solid var(--muted); border-radius: 5px;
        text-align: center; font-weight: 700; font-size: .76rem; line-height: 1.5; color: var(--text); }
/* Filtered: the film is named once, in the summary card; each cinema shows only its times. */
.tv2.filtered .fc { display: block; padding-top: 4px; border-top: 0; }
.tv2.filtered .fc .fp, .tv2.filtered .fb h4, .tv2.filtered .fb .fm { display: none; }
.tv2.filtered .tiles { margin-top: 4px; }

/* Time tiles: compact on phones (44px tap target, ~20px time, 4 to a row at 390px beside the poster), larger
   and more to a row on wider screens. Labels small beneath the time. */
.tiles { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 6px;
         grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); }
/* Round 6 (Andrew, 2026-10-11): the time is centred in the standard tile height, whether or not there are labels:
   three rows, the outer two always equal (minmax(0, 1fr)), the time in the middle. Labels are one line at the top
   of the bottom row, so they never move the time and never make a tile taller; tiles in a row are equal height. */
.tile { display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); justify-items: center; min-height: 44px; height: 100%;
        padding: 0 3px; border-radius: 8px; border: 1px solid var(--edge); background: var(--bg); color: var(--text);
        text-align: center; }
a.tile:hover { text-decoration: none; color: var(--text); border-color: var(--gold); }
a.tile:active { background: var(--bg-deep); }
/* Time medium, labels regular (round 5). text-box trims each line to cap height and baseline, so the middle row is
   exactly the digits and the time is centred by its ink; browsers without text-box keep a sub-pixel offset. */
.tile time { grid-row: 2; font-size: .9rem; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.2px; line-height: 1.15;
             text-box: trim-both cap alphabetic; }
.tile .lb { grid-row: 3; align-self: start; max-width: 100%; margin-top: 2px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
            font-size: .5rem; line-height: 1.25; color: var(--muted); font-weight: 400; }
.tile .lb b { color: var(--gold); font-weight: 400; }
/* Film pages (stage 3 PROTOTYPE) */
.fsum { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 4px 0 12px; }
.fsp { width: 72px; height: 108px; border-radius: 9px; object-fit: cover; background: var(--card); }
.fsb { align-self: start; }
.fsum .fm { margin-top: 2px; font-size: .92rem; }
.fcr { margin: 6px 0 0; color: var(--muted); font-size: .86rem; }
.fsyn { grid-column: 1 / -1; margin-top: 6px; line-height: 1.45; }
.fsyn p { margin: 0 0 4px; }
.js .fsyn.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.js .fsyn.clamp .fcr { display: none; }
.fmore { grid-column: 1 / -1; justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--gold);
  font: inherit; font-weight: 700; cursor: pointer; }
.nearhint { margin: 0 0 10px; }
.ftr { margin: 8px 0 0; }
.ftr a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; border-radius: 16px; border: 1.5px solid var(--edge);
  color: var(--text); font-weight: 700; font-size: .88rem; }
.ftr a::before { content: "▶"; margin-right: 6px; color: var(--gold); font-size: .75rem; }
.flater { margin: 18px 0 10px; }
.nearby2 { margin: 18px 0 10px; }
.nearby2 h2 { margin: 0 0 8px; font-size: 1.05rem; }
.nearby2 .hrow { min-height: 52px; }
.nearby2 .hn { flex: 1; min-width: 0; }
.flater h2 { margin: 0 0 8px; font-size: 1.05rem; }
.flater .hn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flater .hc { flex: none; }
.nearby2 .ht, .flater .ht { display: block; color: var(--muted); font-weight: 400; font-size: .84rem; }
.fnear { margin: 12px 0 18px; }
.fnear h2, .ftowns h2 { margin: 0 0 8px; font-size: 1.05rem; }
.fnear h2 .meta, .ftowns h2 .meta { color: var(--muted); font-weight: 400; font-size: .86rem; }
.nearctl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.locbtn, .pcform button, .fnear .more { min-height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--gold);
  color: var(--ongold); font: inherit; font-weight: 700; cursor: pointer; }
.pcform { display: flex; gap: 6px; flex: 1; min-width: 200px; margin: 0; }
.pcform input { flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--edge);
  background: var(--card); color: var(--text); font: inherit; }
.pcform button { background: var(--card); color: var(--text); border: 1.5px solid var(--edge); }
.nearmsg { margin: 8px 0 10px; color: var(--muted); font-size: .86rem; }
.fnear .more { display: block; margin: 4px auto 0; background: var(--card); color: var(--text); border: 1.5px solid var(--edge); }
.ftowns li.open .hrow::after { transform: rotate(90deg); }
.hubl .tbox li { border-top: 0; }
html:not(.js) .film2.wide .bar { display: none; }
.tbox { padding: 4px 10px 6px; background: var(--bg-deep); }
.tbox .cv { margin: 8px 0; }
.tbox .more, .tbox .none { margin: 6px 4px 10px; font-size: .9rem; }

/* The other pages in the new design (home, A-Z, privacy and terms, 404; Andrew, 2026-10-11). */
.page h2 { margin: 22px 0 8px; font-size: 1.05rem; }
.lede { margin: 6px 0 14px; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.page .hrow .ht { display: block; color: var(--muted); font-weight: 400; font-size: .84rem; }
.page .hrow .hn { flex: 1; min-width: 0; }
.az { scroll-margin-top: 60px; break-inside: avoid; }
.az h2 { margin-top: 18px; }
/* A-Z: two columns from tablet width, three from desktop, flowing by letter (Andrew, 2026-10-11). */
@media (min-width: 600px) { .azcols { columns: 2; column-gap: 16px; } .azcols .az:first-child h2 { margin-top: 0; } .azcols { margin-top: 12px; } }
@media (min-width: 900px) { .azcols { columns: 3; } }
.letters { position: sticky; top: 0; z-index: 2; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
           margin: 0 -16px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.letters::-webkit-scrollbar { display: none; }
.letters a { flex: none; display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px;
             border-radius: 10px; border: 1px solid var(--edge); background: var(--card); color: var(--text); font-weight: 700; }
.letters a:hover { text-decoration: none; border-color: var(--gold); color: var(--text); }
/* Home: search, near me, the widely-showing strip, largest towns. */
.home2 .finder { margin: 0; }
.home2 .search input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 24px; border: 1.5px solid var(--edge);
                       background: var(--card); color: var(--text); font: inherit; font-size: 1rem; }
.home2 .search input:focus { outline: 3px solid var(--gold-hi); outline-offset: 1px; border-color: var(--gold); }
.home2 .search input::-webkit-search-cancel-button { filter: grayscale(1) brightness(1.8); cursor: pointer; }
.home2 #q-results { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 4px 0; }
.home2 .q-group { padding: 10px 14px 4px; color: var(--muted); font-size: .76rem; letter-spacing: .5px; }
.home2 .q-opt a { display: block; min-height: 44px; padding: 6px 14px; color: var(--text); }
.home2 .q-opt .q-label { font-weight: 700; }
.home2 .q-opt .meta { display: block; font-size: .84rem; color: var(--muted); }
.home2 .q-opt a:hover, .home2 .q-opt[aria-selected="true"] a { background: var(--bg-deep); text-decoration: none; }
.home2 .near { display: block; margin: 10px 0 0; }
.home2 .nearmsg { margin: 8px 0; color: var(--muted); font-size: .88rem; }
.home2 .near-list { margin: 6px 0 0; }
.widely2 .fstrip { margin-right: -16px; padding: 2px 16px 4px 0; scroll-snap-type: x proximity; }
.widely2 .pf { width: 92px; }
.widely2 .pf img, .widely2 .pimg.none { width: 92px; height: 138px; }
.widely2 .pt { font-size: .82rem; -webkit-line-clamp: 2; }
.widely2 .pn { display: block; color: var(--muted); font-size: .76rem; margin-top: 2px; }
.browse2 { margin-top: 10px; }
@media (min-width: 900px) {
  .widely2 .pf { width: 120px; }
  .widely2 .pf img, .widely2 .pimg.none { width: 120px; height: 180px; }
}
/* Privacy and terms: reading width and quiet tables. */
.policy { max-width: 720px; line-height: 1.6; }
.policy .head { padding: 0; }
.policy h2 { margin: 28px 0 8px; font-size: 1.1rem; }
.policy h3 { margin: 18px 0 6px; font-size: 1rem; }
.policy th, .policy td { border-bottom-color: var(--line); }
.policy .draft { border-radius: 12px; background: var(--card); }

@media (min-width: 600px) {
  .tiles { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .tile { min-height: 52px; padding: 0 4px; border-radius: 10px; }
  .tile time { font-size: 1.05rem; }
  .tile .lb { font-size: .52rem; margin-top: 3px; }
  .pf { width: 68px; }
  .pf img, .pimg.none { width: 68px; height: 102px; }
  .pf.all { width: 72px; height: 102px; }
  .pf .pt { font-size: .74rem; }
}
@media (min-width: 900px) {
  body.town2 .wrap { max-width: 1040px; }      /* wider screens: more tiles to a row */
  .tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
  .tile { min-height: 58px; }
  .tile time { font-size: 1.15rem; }
  .tile .lb { margin-top: 4px; }
  .pf { width: 80px; }
  .pf img, .pimg.none { width: 80px; height: 120px; }
  .pf.all { width: 84px; height: 120px; }
  .fstrip { gap: 10px; }
}
/* Where container queries work, the time and labels scale with the tile itself (cqi = 1% of the tile's
   inline size), so the time fills the tile proportionally at every width; the fixed sizes above are the
   fallback. "18:30" is ~2.5em wide in tabular bold, so 27cqi fills ~60% of the tile (round 5, Andrew 2026-10-11: the
   earlier 36cqi filled ~80%; ceiling 30px -> 22px; labels scaled to match, 8px floor for legibility). */
@supports (container-type: inline-size) {
  .tile { container-type: inline-size; }
  .tile time { font-size: clamp(12px, 27cqi, 22px); }
  .tile .lb { font-size: clamp(8px, 11cqi, 10px); }
}
/* Sold out (Andrew, 2026-10-11): dimmed by colour, not opacity, so the "Sold out" label keeps >= 4.5:1 on the tile
   (--muted on --bg 8.1:1) while the time drops to --edge (4.8:1, from 17:1) and the border to --line. Still a link. */
.tile.so { border-color: var(--line); }
.tile.so time { color: var(--edge); }
.tile.so .lb { color: var(--muted); }
.tile.nolink { border-style: dashed; }

.nofilm { padding: 16px; border-radius: var(--radius); background: var(--card); }
.nofilm p { margin: 0 0 8px; }
.nofilm .alt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; color: var(--muted); }
.chip { min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--edge); background: var(--bg);
        color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.loading { color: var(--muted); padding: 16px 0; }