/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#f6f7f9; --panel:#ffffff; --panel-2:#f0f2f5; --line:#e2e6ec;
  --ink:#12161c; --ink-2:#4a5461; --ink-3:#7a8595;
  --accent:#0b6bcb; --accent-ink:#ffffff;
  --cheap:#0d7a4f; --cheap-bg:#e6f6ee;
  --warm:#b4520a; --warm-bg:#fdf0e4;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.10);
  --shadow-lg:0 8px 24px rgba(16,24,40,.10);
  --r:10px; --r-lg:14px;
  --sans:'Inter','Noto Sans HK',system-ui,-apple-system,'Helvetica Neue',sans-serif;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --bg:#0e1116; --panel:#161b22; --panel-2:#1c222b; --line:#293240;
    --ink:#e8edf4; --ink-2:#a9b4c2; --ink-3:#78848f;
    --accent:#4d9dff; --accent-ink:#08111c;
    --cheap:#4ade9c; --cheap-bg:#0f2d21;
    --warm:#f0a868; --warm-bg:#2e2016;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 10px 30px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --bg:#0e1116; --panel:#161b22; --panel-2:#1c222b; --line:#293240;
  --ink:#e8edf4; --ink-2:#a9b4c2; --ink-3:#78848f;
  --accent:#4d9dff; --accent-ink:#08111c;
  --cheap:#4ade9c; --cheap-bg:#0f2d21;
  --warm:#f0a868; --warm-bg:#2e2016;
  --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lg:0 10px 30px rgba(0,0,0,.5);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
     font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
html[data-lang="zh"] body{font-family:'Noto Sans HK','Inter',system-ui,sans-serif}
/* Wide screens get used. The listing is a grid of showtimes — the more of a
   film's week fits on one row, the less scrolling to compare prices. Prose is
   constrained separately, where a long measure genuinely hurts. */
.wrap{max-width:min(1760px,96vw);margin:0 auto;padding:0 24px}
b,strong{font-weight:600}
button,select,input{font:inherit;color:inherit}

/* ------------------------------------------------------------- masthead */
.masthead{position:sticky;top:0;z-index:40;background:var(--panel);
          border-bottom:1px solid var(--line)}
.masthead-in{display:flex;align-items:center;justify-content:space-between;
             gap:16px;height:62px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;flex:none;
  border-radius:9px;background:var(--accent);color:var(--accent-ink);
  font-weight:700;font-size:13px;letter-spacing:.02em}
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-text b{font-size:15px;letter-spacing:-.01em}
.brand-text small{color:var(--ink-3);font-size:12px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.masthead-right{display:flex;align-items:center;gap:8px;flex:none}
.langtoggle{display:flex;background:var(--panel-2);border-radius:8px;padding:3px;
            border:1px solid var(--line)}
.lang-btn{border:0;background:none;padding:5px 11px;border-radius:6px;
  font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer}
.lang-btn.is-on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.theme-btn{border:1px solid var(--line);background:var(--panel-2);width:34px;
  height:34px;border-radius:8px;cursor:pointer;font-size:15px;color:var(--ink-2)}

/* -------------------------------------------------------------- statbar */
.statbar{background:var(--panel);border-bottom:1px solid var(--line)}
.statbar-in{display:flex;gap:28px;align-items:baseline;padding:13px 20px;
            overflow-x:auto;scrollbar-width:none}
.statbar-in::-webkit-scrollbar{display:none}
.stat{display:flex;gap:7px;align-items:baseline;white-space:nowrap}
.stat b{font-size:19px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat span{color:var(--ink-3);font-size:12.5px}
.stat-price b{color:var(--cheap)}
.stat-gen{margin-left:auto;color:var(--ink-3);font-size:12px;white-space:nowrap}

/* --------------------------------------------------------------- layout */
.layout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:28px;
        align-items:start;padding-top:22px;padding-bottom:40px}

/* -------------------------------------------------------------- filters */
.filters{position:sticky;top:84px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:16px;box-shadow:var(--shadow);
  max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain}
.filters::-webkit-scrollbar{width:8px}
.filters::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.filters-head{display:flex;justify-content:space-between;align-items:center;
              margin-bottom:14px}
.filters-head h2{margin:0;font-size:13px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3)}
.linkbtn{border:0;background:none;color:var(--accent);font-size:12.5px;
  cursor:pointer;padding:0;font-weight:500}
.fgroup{margin-bottom:17px}
.fgroup:last-child{margin-bottom:0}
.flabel{display:flex;justify-content:space-between;align-items:baseline;
  font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:7px;
  letter-spacing:.01em}
.fout{font-variant-numeric:tabular-nums;color:var(--cheap);font-weight:600}

.datestrip{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px;
           scrollbar-width:thin}
.dchip{flex:none;border:1px solid var(--line);background:var(--panel-2);
  border-radius:8px;padding:5px 8px;cursor:pointer;text-align:center;
  min-width:47px;line-height:1.2}
.dchip small{display:block;font-size:10px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.03em}
.dchip b{display:block;font-size:14px;font-weight:600}
.dchip.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.dchip.is-on small{color:var(--accent-ink);opacity:.8}

input[type=range]{width:100%;accent-color:var(--accent);margin:2px 0 6px}
.pricehist{display:flex;align-items:flex-end;gap:2px;height:26px}
.pricehist i{flex:1;background:var(--panel-2);border-radius:2px 2px 0 0;
             transition:background .15s}
.pricehist i.on{background:var(--accent);opacity:.55}

.chips{display:flex;flex-wrap:wrap;gap:5px}
/* No inner scroll. A scrollbox inside a sidebar hides options behind a
   gesture people do not discover — every district and format is shown. */
.chips-scroll{max-height:none;overflow:visible}
.chip{border:1px solid var(--line);background:var(--panel-2);border-radius:99px;
  padding:4px 10px;font-size:12.5px;cursor:pointer;color:var(--ink-2);
  white-space:nowrap}
.chip:hover{border-color:var(--ink-3)}
.chip.is-on{background:var(--accent);border-color:var(--accent);
            color:var(--accent-ink);font-weight:500}
.chip .n{opacity:.55;font-size:11px;margin-left:3px;font-variant-numeric:tabular-nums}
.search{width:100%;border:1px solid var(--line);background:var(--panel-2);
  border-radius:8px;padding:8px 10px;font-size:13.5px}
.search:focus{outline:2px solid var(--accent);outline-offset:-1px}

/* -------------------------------------------------------------- toolbar */
.toolbar{display:flex;gap:12px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.viewtoggle{display:flex;background:var(--panel-2);border:1px solid var(--line);
            border-radius:9px;padding:3px}
.vbtn{border:0;background:none;padding:6px 13px;border-radius:6px;font-size:13px;
  color:var(--ink-2);cursor:pointer;font-weight:500;white-space:nowrap}
.vbtn.is-on{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
.sortwrap{margin-left:auto;display:flex;align-items:center;gap:7px;
          font-size:12.5px;color:var(--ink-3)}
#sort{border:1px solid var(--line);background:var(--panel);border-radius:8px;
      padding:6px 9px;font-size:13px}
.mobfilter{display:none}
.countline{color:var(--ink-3);font-size:12.5px;margin:0 0 12px}
.empty{background:var(--panel);border:1px dashed var(--line);border-radius:var(--r-lg);
  padding:36px;text-align:center;color:var(--ink-3)}

/* ------------------------------------------------------------- cheapbar */
.cheapbar{display:flex;align-items:center;gap:13px;background:var(--cheap-bg);
  border:1px solid color-mix(in srgb,var(--cheap) 32%,transparent);
  border-radius:var(--r-lg);padding:12px 15px;margin-bottom:15px}
.cheapbar .tag{font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--cheap);flex:none}
.cheapbar .big{font-size:24px;font-weight:700;color:var(--cheap);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cheapbar .meta{color:var(--ink-2);font-size:13px;min-width:0}
.cheapbar .meta b{color:var(--ink)}

/* ---------------------------------------------------------- film cards */
.film{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px;margin-bottom:13px;box-shadow:var(--shadow)}
.poster{width:104px;aspect-ratio:2/3;border-radius:9px;object-fit:cover;
  background:var(--panel-2);display:block}
.poster-ph{width:104px;aspect-ratio:2/3;border-radius:9px;background:var(--panel-2);
  display:grid;place-items:center;color:var(--ink-3);font-size:26px}
.film-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
           margin-bottom:9px}
.film-title{margin:0 0 4px;font-size:17px;letter-spacing:-.015em;line-height:1.28}
.film-alt{color:var(--ink-3);font-size:12.5px;margin:0 0 6px}
.film-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
           color:var(--ink-3);font-size:12px}
.pill{border:1px solid var(--line);border-radius:5px;padding:1px 6px;
      background:var(--panel-2);font-size:11px;color:var(--ink-2)}
.from{text-align:right;flex:none}
.from small{display:block;font-size:10.5px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.05em}
.from b{font-size:22px;color:var(--cheap);font-variant-numeric:tabular-nums;
        letter-spacing:-.02em}
.venues{display:flex;flex-direction:column;gap:9px;margin-top:11px}
.venue{border-top:1px solid var(--line);padding-top:9px}
.venue-head{display:flex;justify-content:space-between;align-items:baseline;
            gap:10px;margin-bottom:6px}
.venue-name{font-size:13px;font-weight:600}
.venue-dist{color:var(--ink-3);font-weight:400;font-size:12px}
.times{display:flex;flex-wrap:wrap;gap:5px}
.time{display:flex;flex-direction:column;align-items:center;gap:1px;
  border:1px solid var(--line);background:var(--panel-2);border-radius:8px;
  padding:5px 9px;min-width:62px;cursor:default;text-decoration:none;color:inherit}
.time b{font-size:13px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.time span{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.daysep{display:flex;align-items:center;font-size:10.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  padding:0 7px 0 2px;border-left:2px solid var(--line);margin-left:2px}
.times .daysep:first-child{border-left:0;margin-left:0;padding-left:0}
.time.best{border-color:var(--cheap);background:var(--cheap-bg)}
.time.best span{color:var(--cheap);font-weight:600}
.time .fmt{font-size:9.5px;letter-spacing:.04em;color:var(--warm);font-weight:600;
           text-transform:uppercase}

/* ------------------------------------------------------------ show rows */
.rows{background:var(--panel);border:1px solid var(--line);
      border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.row{display:grid;grid-template-columns:88px 82px minmax(0,2fr) minmax(0,1.45fr) 168px;
  gap:14px;align-items:center;padding:11px 15px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row:nth-child(even){background:var(--panel-2)}
.row .price{font-size:18px;font-weight:700;color:var(--cheap);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.row .when b{display:block;font-size:14px;font-variant-numeric:tabular-nums}
.row .when small{color:var(--ink-3);font-size:11px}
.row .what{min-width:0}
.row .what b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;
             white-space:nowrap}
.row .what small{color:var(--ink-3);font-size:11.5px}
.row .where{min-width:0;font-size:13px}
.row .where small{display:block;color:var(--ink-3);font-size:11.5px}
.row .tags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.rowhead{display:grid;grid-template-columns:88px 82px minmax(0,2fr) minmax(0,1.45fr) 168px;
  gap:14px;padding:9px 15px;background:var(--panel-2);
  border-bottom:1px solid var(--line);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);font-weight:600}

/* --------------------------------------------------------- cinema cards */
.cin{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:15px;margin-bottom:13px;box-shadow:var(--shadow)}
.cin-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
          margin-bottom:10px}
.cin-head h3{margin:0 0 3px;font-size:16px;letter-spacing:-.015em}
.cin-addr{color:var(--ink-3);font-size:12.5px;margin:0}
.cin-films{display:grid;gap:7px}
.cin-film{display:flex;justify-content:space-between;gap:12px;align-items:center;
  border-top:1px solid var(--line);padding-top:7px;font-size:13px}
.cin-film .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cin-film .p{font-variant-numeric:tabular-nums;color:var(--cheap);font-weight:600;
             flex:none}

.more{border:1px dashed var(--line);background:none;color:var(--ink-3);
  border-radius:8px;padding:5px 11px;font-size:12px;cursor:pointer;margin-top:8px}

/* ---------------------------------------------------------------- foot */
.foot{padding:22px 20px 40px;color:var(--ink-3);font-size:12px;
      border-top:1px solid var(--line);margin-top:8px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:45}

/* --------------------------------------------------------- responsive */
@media (max-width:1080px){
  .layout{grid-template-columns:230px minmax(0,1fr);gap:18px}
  .row,.rowhead{grid-template-columns:80px 74px minmax(0,2fr) minmax(0,1.3fr)}
  .row .tags{display:none}
}
@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .filters{position:fixed;inset:0 auto 0 0;width:min(310px,88vw);z-index:50;
    border-radius:0;max-height:100vh;transform:translateX(-102%);
    transition:transform .22s ease;box-shadow:var(--shadow-lg)}
  .filters.open{transform:none}
  .mobfilter{display:inline-block;border:1px solid var(--line);
    background:var(--panel);border-radius:9px;padding:7px 13px;font-size:13px;
    cursor:pointer;font-weight:500}
  .sortwrap{margin-left:0}
  .film{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .poster,.poster-ph{width:76px}
  .row,.rowhead{grid-template-columns:70px minmax(0,1fr);row-gap:2px}
  .row .where{grid-column:2}
  .row .when{grid-row:1;grid-column:2;display:flex;gap:6px;align-items:baseline}
  .rowhead{display:none}
}

/* ------------------------------------------------- server-rendered pages */
.crumbs{padding-top:14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;
  font-size:12.5px;color:var(--ink-3)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--accent);text-decoration:underline}
/* Article prose stays narrow for readability; listing pages use the full
   width because their content is a grid, not a paragraph. */
.pagebody{padding:16px 24px 40px;max-width:1180px}
.pagebody .prose,.pagebody .faq,.pagebody .lede,.pagebody .cardlist{max-width:70ch}
.pagehead{display:flex;gap:20px;align-items:flex-start;margin-bottom:18px}
.poster-lg{width:150px;aspect-ratio:2/3;flex:none}
.pagehead h1{margin:0 0 5px;font-size:29px;letter-spacing:-.025em;line-height:1.15}
.lede{color:var(--ink-2);margin:9px 0 0;font-size:14.5px;max-width:62ch}
.prose{color:var(--ink-2);font-size:14.5px;max-width:68ch;margin:16px 0}
.prose p{margin:0 0 10px}
.sechead{font-size:13px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);margin:26px 0 12px;padding-bottom:7px;
  border-bottom:1px solid var(--line)}
.cin-head h3 a{color:inherit;text-decoration:none}
.cin-head h3 a:hover{color:var(--accent)}
.linkgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px}
.linkgrid a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;font-size:13px;color:var(--ink-2);
  text-decoration:none}
.linkgrid a:hover{border-color:var(--accent);color:var(--accent)}
.masthead .brand{text-decoration:none;color:inherit}
a.lang-btn{text-decoration:none;display:inline-block}
a.theme-btn{display:grid;place-items:center;text-decoration:none}
.foot p{margin:0 0 6px}
.foot a{color:var(--accent)}
@media (max-width:600px){
  .pagehead{gap:14px}.poster-lg{width:104px}.pagehead h1{font-size:22px}
}
.browse{padding:26px 20px 10px}
.browse-h{font-size:13px;font-weight:600;color:var(--ink-2);margin:16px 0 8px}

/* ------------------------------------------------------ nav + occupancy */
.mainnav{display:flex;gap:2px;margin-left:8px;flex:1;min-width:0;overflow-x:auto;
  scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{padding:7px 11px;border-radius:8px;font-size:13.5px;font-weight:500;
  color:var(--ink-2);text-decoration:none;white-space:nowrap}
.mainnav a:hover{background:var(--panel-2);color:var(--ink)}
.brand-mark{font-size:19px;background:var(--panel-2);border:1px solid var(--line)}

/* Capacity: a continuous green -> red ramp driven by --cap, set inline from
   the actual percentage. Buckets would flatten the 60-100% range, which is
   exactly where the number changes your decision. */
.cap{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;
  font-weight:700;padding:2px 4px 2px 7px;border-radius:99px;
  color:var(--cap,var(--ink-3));font-variant-numeric:tabular-nums;
  white-space:nowrap;
  background:color-mix(in srgb,var(--cap,var(--line)) 14%,var(--panel-2));
  border:1px solid color-mix(in srgb,var(--cap,var(--line)) 38%,transparent)}
.capbar{display:block;width:30px;height:5px;border-radius:3px;
  background:color-mix(in srgb,var(--cap,var(--line)) 22%,transparent);
  overflow:hidden;flex:none}
.capbar i{display:block;height:100%;background:var(--cap,var(--ink-3));border-radius:3px}
/* Capacity reads as a filled bar, not a number in colour. --cap carries the
   ramped hue; the chip is tinted with it and the fill width IS the percentage,
   so the colour and the geometry say the same thing. */
/* A filling screening tints its own square — softly, so the time and price
   stay the most legible thing on it. Colour is the signal; the exact
   percentage lives in the title attribute for anyone who wants it. */
.time.hasfill{background:color-mix(in srgb,var(--cap) 26%,var(--panel-2));
  border-color:color-mix(in srgb,var(--cap) 60%,transparent)}
.time.hasfill span{color:color-mix(in srgb,var(--cap) 55%,var(--ink))}
.time.best.hasfill{background:color-mix(in srgb,var(--cap) 16%,var(--cheap-bg))}
:root[data-theme="dark"] .time.hasfill{
  background:color-mix(in srgb,var(--cap) 24%,var(--panel-2))}
.time.isout{opacity:.55;cursor:not-allowed}
.time.isout b{text-decoration:line-through}

.foot{padding:26px 0 44px;border-top:1px solid var(--line);margin-top:22px;
  color:var(--ink-3);font-size:13px}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px}
.footgrid b{display:block;color:var(--ink-2);font-size:12px;margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.06em}
.footgrid a{display:block;color:var(--ink-3);text-decoration:none;padding:3px 0}
.footgrid a:hover{color:var(--accent)}

@media (max-width:1080px){ .mainnav a{padding:7px 8px;font-size:13px} }
@media (max-width:860px){
  .masthead-in{height:auto;padding:10px 0;flex-wrap:wrap;gap:8px}
  .mainnav{order:3;flex-basis:100%;margin-left:0;border-top:1px solid var(--line);
    padding-top:7px}
  .brand-text small{display:none}
}

/* --------------------------------------------------- mobile refinements */
@media (max-width:600px){
  /* The cheapest bar is the most important thing on the page; on a narrow
     screen it reads far better stacked than squeezed into one row. */
  .cheapbar{flex-wrap:wrap;gap:4px 10px;padding:11px 13px}
  .cheapbar .tag{flex-basis:100%;order:1}
  .cheapbar .big{order:2;font-size:26px;line-height:1.1}
  .cheapbar .meta{order:3;flex-basis:100%;font-size:12.5px;line-height:1.45}

  .venue-head{flex-direction:column;align-items:flex-start;gap:1px}
  .venue-name{font-size:12.5px;line-height:1.35}
  .film-title{font-size:15.5px}
  .film-head{gap:10px}
  .from b{font-size:19px}
  .statbar-in{gap:18px;padding:11px 20px}
  .stat b{font-size:17px}
  .toolbar{gap:8px}
  .viewtoggle{flex:1}
  .vbtn{flex:1;padding:6px 8px;font-size:12.5px}
  .sortwrap{flex:1;min-width:0}
  #sort{flex:1;min-width:0}
  .time{min-width:56px;padding:5px 7px}
  .daysep{font-size:10px;padding-right:5px}
  .footgrid{grid-template-columns:repeat(2,1fr);gap:16px}
}
@media (max-width:380px){
  .brand-text b{font-size:14px}
  .mainnav a{padding:6px 7px;font-size:12.5px}
}

/* ------------------------------------------------------------ score badge */
.score{display:inline-flex;align-items:baseline;gap:4px;vertical-align:middle;
  font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;
  border:1px solid transparent;white-space:nowrap;letter-spacing:.01em}
.score b{font-size:12.5px;font-variant-numeric:tabular-nums}
.score-great{color:#0d7a4f;background:#e6f6ee;border-color:#9bdcbf}
.score-good{color:#3f6212;background:#f0f7e4;border-color:#c3dd9a}
.score-mixed{color:#8a6100;background:#fdf5e2;border-color:#ecd08a}
.score-poor{color:#a1200f;background:#fdeceb;border-color:#f0b3ac}
:root[data-theme="dark"] .score-great{color:#5fe3a8;background:#0f2d21;border-color:#1d5c42}
:root[data-theme="dark"] .score-good{color:#a9d96b;background:#1d2812;border-color:#3d5423}
:root[data-theme="dark"] .score-mixed{color:#f0c368;background:#2e2412;border-color:#5c4820}
:root[data-theme="dark"] .score-poor{color:#f19b90;background:#2e1614;border-color:#5c2a25}
a.time{text-decoration:none;color:inherit;transition:border-color .12s,transform .12s}
a.time:hover{border-color:var(--accent);transform:translateY(-1px)}
a.time.best:hover{border-color:var(--cheap)}
.time.isout{cursor:not-allowed}

/* Logo tile: solid accent with a punched-out white glyph. It was a grey box on
   a grey bar, which is the one place on the page that must not be low-contrast. */
:root{--brand-punch:#0b6bcb}
:root:not([data-theme="light"]){@media (prefers-color-scheme:dark){--brand-punch:#0e1116}}
:root[data-theme="dark"]{--brand-punch:#0e1116}
.brand-mark{background:var(--accent);border:0;color:#fff;display:grid;
  place-items:center;padding:0;box-shadow:0 1px 2px rgba(16,24,40,.18)}
.brand-mark svg{display:block}
.faq{margin:0;max-width:68ch}
.faq dt{font-weight:600;font-size:14.5px;margin:16px 0 5px}
.faq dd{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}
.prose h2{font-size:18px;letter-spacing:-.015em;margin:24px 0 8px;color:var(--ink)}
.prose ul{margin:0 0 12px;padding-left:20px}
.prose li{margin-bottom:5px}
.prose a{color:var(--accent)}

/* ------------------------------------------------------------ error pages */
.errbody{display:flex;flex-direction:column;min-height:100vh}
.errwrap{flex:1;display:grid;place-items:center;padding:48px 20px}
.errcard{max-width:620px;width:100%;text-align:center}
.errcode{font-size:clamp(72px,16vw,132px);font-weight:700;line-height:.9;
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:2px var(--line);
  margin-bottom:6px;font-variant-numeric:tabular-nums;user-select:none}
:root[data-theme="dark"] .errcode{-webkit-text-stroke-color:var(--panel-2)}
.errcard h1{margin:0 0 8px;font-size:26px;letter-spacing:-.02em}
.errcard .lede{margin:0 auto;max-width:46ch}
.errhint{color:var(--ink-3);font-size:13px;margin:22px 0 0}
.errlinks{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:20px}
.errbtn{display:inline-block;padding:9px 16px;border-radius:9px;font-size:13.5px;
  font-weight:500;text-decoration:none;border:1px solid var(--line);
  background:var(--panel);color:var(--ink-2)}
.errbtn:hover{border-color:var(--accent);color:var(--accent)}
.errbtn-primary{background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink)}
.errbtn-primary:hover{color:var(--accent-ink);opacity:.92}
.errpop{margin-top:30px;text-align:left;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.errpop b{display:block;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);margin-bottom:10px}
.errpop ul{list-style:none;margin:0;padding:0}
.errpop li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:6px 0;border-top:1px solid var(--line);font-size:13.5px}
.errpop li:first-child{border-top:0}
.errpop a{color:var(--ink);text-decoration:none;font-weight:500}
.errpop a:hover{color:var(--accent)}
.errpop span{color:var(--ink-3);font-size:12px;flex:none}
.errnote{color:var(--ink-3);font-size:12.5px;margin-top:20px}

/* ------------------------------------------------------ sponsored blocks */
.ctabox{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;
  margin:26px 0;background:var(--panel);max-width:68ch}
.ctadisc{margin:0 0 10px;font-size:11.5px;color:var(--ink-3);line-height:1.5;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.ctaintro{margin:0 0 12px;font-size:14px;color:var(--ink-2)}
.ctalist{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ctalist li{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.ctabtn{display:inline-block;padding:8px 15px;border-radius:8px;font-size:13.5px;
  font-weight:600;text-decoration:none;background:var(--accent);
  color:var(--accent-ink);flex:none}
.ctabtn:hover{opacity:.92}
.ctalist span{font-size:13px;color:var(--ink-2);flex:1;min-width:180px}

/* ------------------------------------------------------------------ legend
   The green outline was carrying meaning with nothing to decode it: a grey
   chip is simply a screening that is not the cheapest for that film. Say so. */
.legend{display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin:0 0 14px;font-size:12px;color:var(--ink-3)}
.legend b{font-weight:600;color:var(--ink-2)}
.legend .swatch{display:inline-flex;align-items:center;gap:6px}
.legend .box{width:26px;height:17px;border-radius:5px;border:1px solid var(--line);
  background:var(--panel-2);flex:none}
.legend .box.is-best{border-color:var(--cheap);background:var(--cheap-bg)}
.legend .box.is-cap{border:0;background:linear-gradient(90deg,
  hsl(145 46% 56%),hsl(47 82% 60%),hsl(353 70% 63%))}

/* ------------------------------------------------------- editorial cards */
.cardlist{list-style:none;margin:0;padding:0;display:grid;gap:9px;max-width:70ch}
.cardlist a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:14px 16px;text-decoration:none}
.cardlist a:hover{border-color:var(--accent)}
.cardlist b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px;
  letter-spacing:-.01em}
.cardlist span{display:block;font-size:13.5px;color:var(--ink-2);line-height:1.55}
.cardlist li.is-pillar a{border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,var(--panel))}

/* ------------------------------------------------------ dual time slider */
.dualrange{position:relative;height:30px;margin-top:4px}
.dr-track{position:absolute;top:13px;left:0;right:0;height:4px;border-radius:2px;
  background:var(--panel-2);border:1px solid var(--line)}
.dr-fill{position:absolute;top:-1px;bottom:-1px;background:var(--accent);
  border-radius:2px}
.dualrange input[type=range]{position:absolute;top:0;left:0;width:100%;margin:0;
  height:30px;background:none;pointer-events:none;-webkit-appearance:none;
  appearance:none}
.dualrange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;
  pointer-events:auto;width:17px;height:17px;border-radius:50%;
  background:var(--panel);border:2px solid var(--accent);cursor:grab;
  box-shadow:var(--shadow)}
.dualrange input[type=range]::-moz-range-thumb{pointer-events:auto;width:17px;
  height:17px;border-radius:50%;background:var(--panel);
  border:2px solid var(--accent);cursor:grab}

/* --------------------------------------------------------- legend ramp */
.swatch-ramp{gap:8px}
.legend .ramp{position:relative;display:flex;align-items:center;
  justify-content:space-between;width:150px;height:18px;border-radius:5px;
  padding:0 7px;background:linear-gradient(90deg,
    hsl(145 46% 56%) 0%, hsl(47 82% 60%) 50%, hsl(353 70% 63%) 100%)}
.legend .ramp em{font-style:normal;font-size:9.5px;font-weight:700;color:#fff;
  letter-spacing:.03em;text-shadow:0 1px 1px rgba(0,0,0,.35)}

/* ------------------------------------------------------- rating badge */
.score .star{font-style:normal;font-size:11px;line-height:1;opacity:.9}
.score em{font-style:normal;font-weight:600}
.film-title a{color:inherit;text-decoration:none}
.film-title a:hover{color:var(--accent)}
.posterlink{display:block}
.posterlink:hover .poster{outline:2px solid var(--accent);outline-offset:2px}
.venue-name a{color:inherit;text-decoration:none}
.venue-name a:hover{color:var(--accent);text-decoration:underline}
a.venue-dist{text-decoration:none}
a.venue-dist:hover{color:var(--accent);text-decoration:underline}

/* --------------------------------------------------- theme button state */
.theme-btn{display:grid;place-items:center;position:relative;overflow:hidden}
.theme-btn .ico-sun,.theme-btn .ico-moon{grid-area:1/1;font-size:15px;
  line-height:1;transition:opacity .15s,transform .15s}
.theme-btn .ico-moon{opacity:0;transform:rotate(-40deg) scale(.7)}
:root[data-theme="dark"] .theme-btn .ico-sun{opacity:0;transform:rotate(40deg) scale(.7)}
:root[data-theme="dark"] .theme-btn .ico-moon{opacity:1;transform:none}
:root:not([data-theme="light"]){@media (prefers-color-scheme:dark){
  .theme-btn .ico-sun{opacity:0;transform:rotate(40deg) scale(.7)}
  .theme-btn .ico-moon{opacity:1;transform:none}}}
.akas{color:var(--ink-3);font-size:12.5px;margin:-6px 0 16px;max-width:70ch}
.homehead{padding:20px 24px 2px}
.homehead h1{margin:0 0 6px;font-size:24px;letter-spacing:-.025em}
.homehead .lede{margin:0;max-width:78ch;font-size:14px}
@media (max-width:600px){.homehead h1{font-size:19px}}

.venue-sep{color:var(--ink-3);margin:0 2px;font-weight:400}

/* --------------------------------------------------------------- venue map */
.venuegrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;
  align-items:start}
.mapcard{position:sticky;top:84px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.mapcard iframe{display:block;width:100%;height:260px;border:0;
  filter:saturate(.9)}
:root[data-theme="dark"] .mapcard iframe{filter:saturate(.75) brightness(.82)}
.mapmeta{padding:13px 15px;font-size:13px;color:var(--ink-2);line-height:1.55}
.mapmeta b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:3px}
.mapmeta .dirbtn{display:inline-block;margin-top:10px;padding:7px 13px;
  border-radius:8px;background:var(--accent);color:var(--accent-ink);
  text-decoration:none;font-size:13px;font-weight:600}
@media (max-width:980px){
  /* On mobile the map moves below the fold copy — a 260px map above the
     showtimes would push the thing people came for off the screen. */
  .venuegrid{grid-template-columns:minmax(0,1fr)}
  .mapcard{position:static;order:2;margin-top:18px}
}
.filmgrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:7px}
.filmgrid a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:9px;padding:9px 12px;text-decoration:none}
.filmgrid a:hover{border-color:var(--accent)}
.filmgrid b{display:block;font-size:13.5px;color:var(--ink);font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filmgrid span{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------ format marks

   Typographic treatments in each brand's colour — NOT the official logos,
   which are trademarked artwork requiring a licence from each holder. The
   letterspacing and weight approximate how each brand sets its own name, which
   is what makes them recognisable at a glance without copying anything. */
.fmtmark{display:inline-flex;align-items:center;gap:4px;font-weight:800;
  letter-spacing:.06em;font-size:10px;line-height:1;padding:3px 7px;
  border-radius:4px;font-family:'Inter',system-ui,sans-serif;white-space:nowrap;
  background:var(--panel-2);color:var(--ink-2);border:1px solid var(--line)}
.fmtmark i{font-style:normal}
.fmtmark.fm-sm{font-size:8px;padding:2px 5px;gap:3px;letter-spacing:.07em}
.fm-imax,.fm-imax-laser{background:#0b1f5c;color:#fff;border-color:#0b1f5c;
  letter-spacing:.16em;font-weight:800}
.fm-dolby-atmos,.fm-dolby-cinema{background:#0b0d10;color:#fff;
  border-color:#0b0d10;letter-spacing:.2em}
.fm-4dx{background:#d8102b;color:#fff;border-color:#d8102b;letter-spacing:.02em;
  font-style:italic}
.fm-mx4d{background:#b3122c;color:#fff;border-color:#b3122c;letter-spacing:.02em}
.fm-cinity,.fm-cinity-led{background:#141414;color:#e8b52a;border-color:#141414;
  letter-spacing:.1em}
.fm-cgs,.fm-china-giant-screen{background:#7d1519;color:#fff;border-color:#7d1519;
  letter-spacing:.08em}
.fm-screenx{background:#4d2580;color:#fff;border-color:#4d2580}
.fm-vip,.fm-premiere{background:#7a5f18;color:#fff;border-color:#7a5f18}
.chip-fmt{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 4px}
.time .fmt .fmtmark{margin-top:1px}

/* --------------------------------------------------------- format glyphs */
.fmticon{width:15px;height:10px;display:block;flex:none}
.fmtmark{display:inline-flex;align-items:center;gap:4px}
.fmtmark i{font-style:normal}
.fmtmark.fm-sm{padding:2px 4px;gap:0}
.fmtmark.fm-sm .fmticon{width:16px;height:11px}
.chip-fmt .fmtmark{background:none;border:0;padding:0;color:inherit}
.chip-fmt .fmtmark i{font-size:11px;letter-spacing:.05em}
.time .fmt .fmtmark{border:0;background:none;padding:0}
.versions{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px}
.versions a{display:block;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:11px 14px;text-decoration:none}
.versions a:hover{border-color:var(--accent)}
.versions b{display:block;font-size:13px;color:var(--accent);font-weight:600;
  letter-spacing:.01em;margin-bottom:2px}
.versions span{display:block;font-size:13px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.versions em{display:block;font-style:normal;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;margin-top:3px}
a.fmtmark{text-decoration:none}
a.fmtmark:hover{filter:brightness(1.12)}

.fmticon{width:14px;height:9px;display:block;flex:none;opacity:.9}
.fmtmark.fm-sm .fmticon{width:12px;height:8px}
.time .fmt .fmtmark{margin-top:2px}
.tablewrap{overflow-x:auto;margin:14px 0;max-width:100%}
.prose-table{border-collapse:collapse;width:100%;font-size:13.5px}
.prose-table th{text-align:left;font-size:11px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);padding:8px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.prose-table td{padding:9px 12px;border-bottom:1px solid var(--line);
  color:var(--ink-2);vertical-align:top}
.prose-table tr:last-child td{border-bottom:0}
.prose-table a{color:var(--accent)}
.prose h3{font-size:15px;margin:18px 0 6px}
/* Sits inside .wrap, so it must not add its own horizontal padding on top —
   that pushed it 30px wider than the columns above it. */
.disclaimer{padding:18px 0 0;margin-top:20px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:11.5px;line-height:1.7}
.disclaimer p{margin:0 0 8px;max-width:96ch}
.disclaimer strong{color:var(--ink-2);text-transform:uppercase;
  letter-spacing:.07em;font-size:10.5px}

/* ---------------------------------------------------------------- skeleton

   The explorer ships its dataset to the browser and renders client-side, so
   without placeholders the whole results column appears at once and pushes the
   page down — measured at CLS 0.21, well past the 0.1 threshold.

   Each skeleton occupies the exact box its real counterpart will, so the swap
   costs no layout shift at all. */
.sk{display:block;border-radius:6px;position:relative;overflow:hidden;
  background:var(--panel-2)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb,var(--ink-3) 9%,transparent),transparent);
  animation:sk-sweep 1.25s ease-in-out infinite}
@keyframes sk-sweep{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.sk::after{animation:none}}

.sk-line{height:13px;margin-bottom:7px;width:100%}
.sk-title{height:19px;width:62%;margin-bottom:9px}
.sk-poster{width:104px;aspect-ratio:2/3;border-radius:9px;flex:none}
.sk-time{width:62px;height:44px;border-radius:8px;display:inline-block}
.sk-chip{height:25px;border-radius:99px;display:inline-block}
.sk-date{width:47px;height:41px;border-radius:8px;flex:none;display:inline-block}
.film-sk{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px}
.cheapbar-sk{background:var(--panel-2);border-color:var(--line);
  align-items:center;min-height:52px}
@media (max-width:600px){.sk-poster{width:76px}.film-sk{grid-template-columns:76px minmax(0,1fr)}}

/* A fixed final column keeps every WHERE cell starting on the same line. With
   `auto` each row sized its own grid from its own tag content, so the column
   wandered by up to 50px down the page. */
.row .what a,.row .where a{color:inherit;text-decoration:none;display:block}
.row .what a:hover b,.row .where a:hover{color:var(--accent)}
.row .where a.sub{display:block;color:var(--ink-3);font-size:11.5px;margin-top:1px}
.row .where a.sub:hover{color:var(--accent);text-decoration:underline}
.row .tags{justify-content:flex-start}
.cin-head h3 a{color:inherit;text-decoration:none}
.cin-head h3 a:hover{color:var(--accent)}
.cin-addr a{color:var(--ink-3);text-decoration:none}
.cin-addr a:hover{color:var(--accent);text-decoration:underline}
a.t{color:inherit;text-decoration:none}
a.t:hover{color:var(--accent)}

/* --------------------------------------------------- mobile toolbar fix
   The three controls were competing for one row: the select collapsed to 20px
   and overlapped the Filter button. Stacked instead, with the sort and filter
   sharing the second row. */
@media (max-width:700px){
  .toolbar{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center}
  .viewtoggle{grid-column:1 / -1;width:100%}
  .vbtn{flex:1;text-align:center}
  .sortwrap{grid-column:1;margin-left:0;min-width:0;gap:6px}
  .sortwrap label{flex:none}
  #sort{flex:1;min-width:0;width:100%;height:36px;
    -webkit-appearance:none;appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
      linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
    background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;
    background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    padding-right:30px}
  .mobfilter{grid-column:2;height:36px;white-space:nowrap}
}

/* -------------------------------------------------- nav + footer surfaces

   Both bars sit on white with black text in either theme. They frame the page
   rather than competing with it, and the listing's own colour — the green of a
   cheap ticket, the ramp on a filling screening — is the only colour that
   should be carrying meaning. */
.masthead{background:#fff;border-bottom:1px solid #e6e8ec}
.masthead .brand-text b,
.masthead .mainnav a,
.masthead .lang-btn,
.masthead .theme-btn{color:#111}
.masthead .brand-text small{color:#5b6470}
.masthead .mainnav a:hover{background:#f1f3f6;color:#000}
.masthead .langtoggle{background:#f1f3f6;border-color:#e0e3e8}
.masthead .lang-btn.is-on{background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.10)}
.masthead .theme-btn{background:#f1f3f6;border-color:#e0e3e8}

.foot{background:#fff;border-top:1px solid #e6e8ec;color:#111}
.footgrid b{color:#111}
.footgrid b a{color:#111;text-decoration:none}
.footgrid a{color:#111}
.footgrid a:hover{color:#0b6bcb;text-decoration:underline}
.disclaimer{border-top:1px solid #e6e8ec;color:#111}
.disclaimer p{max-width:none;text-align:justify;hyphens:auto}
.disclaimer strong{color:#111;margin-right:4px}

/* ------------------------------------------------------------ poster grid */
.postergrid{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:18px}
.postergrid a{display:block;text-decoration:none;color:inherit}
.postergrid img{width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:10px;
  background:var(--panel-2);display:block;box-shadow:var(--shadow)}
.postergrid .poster-ph{display:grid;place-items:center;width:100%;aspect-ratio:2/3;
  border-radius:10px;background:var(--panel-2);font-size:30px;color:var(--ink-3)}
.postergrid a:hover img,.postergrid a:hover .poster-ph{outline:2px solid var(--accent);
  outline-offset:2px}
.postergrid b{display:block;font-size:13.5px;line-height:1.35;margin:9px 0 3px;
  font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.postergrid a:hover b{color:var(--accent)}
.postergrid .meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  font-size:11.5px;color:var(--ink-3);margin-bottom:2px}
.postergrid .meta .pill{font-size:10px;padding:0 5px}
.postergrid .score{padding:1px 5px;font-size:10px;gap:2px}
.postergrid .score b{display:inline;margin:0;font-size:10.5px}
.postergrid .from-price{display:block;font-size:12px;font-weight:600;
  color:var(--cheap);margin-top:3px;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .postergrid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
  .postergrid b{font-size:12px}
}

/* ---------------------------------------------------- mobile nav drawer */
/* The desktop nav is a single horizontal row that overflows on a phone: the
   last two hubs sat off-screen behind a scroll nobody discovers. Below 860px
   it is replaced by a drawer holding every hub, including the district list
   that otherwise only exists in the footer. */
.burger{display:none;width:38px;height:34px;border:1px solid var(--line);
  border-radius:9px;background:var(--panel);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--ink)}
.burger:hover{background:var(--panel-2)}

.navscrim{position:fixed;inset:0;z-index:59;background:rgba(15,18,22,.44);
  opacity:0;transition:opacity .22s ease}
.navscrim.open{opacity:1}

.mobnav{position:fixed;top:0;left:0;bottom:0;width:70%;max-width:420px;z-index:60;
  background:var(--panel);border-right:1px solid var(--line);
  box-shadow:var(--shadow-lg);transform:translateX(-102%);
  transition:transform .22s ease;display:flex;flex-direction:column}
.mobnav.open{transform:none}
.mobnav-head{display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--line);flex:0 0 auto}
.mobnav-head b{font-size:14px}
.mobnav-x{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;
  color:var(--ink-2);padding:0 4px}
/* The whole point of a drawer on a phone: it scrolls independently, and
   -webkit-overflow-scrolling keeps it from feeling stuck on iOS. */
.mobnav-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:8px 8px 28px;overscroll-behavior:contain}
.mobnav-body a{display:block;padding:11px 12px;border-radius:9px;font-size:15px;
  color:var(--ink);text-decoration:none}
.mobnav-body a:active,.mobnav-body a:hover{background:var(--panel-2)}
.mobnav-h{display:block;padding:16px 12px 6px;font-size:11.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

@media (max-width:860px){
  .burger{display:flex}
  .mainnav{display:none}
}

/* ------------------------------------------- full-width body on mobile */
/* 96vw plus 24px of padding each side left ~326px of usable width on a 390px
   phone — the content read as a narrow column with wide dead margins. Below
   600px the shell goes edge to edge with a small, even gutter instead. */
@media (max-width:600px){
  .wrap{max-width:100%;padding:0 12px}
  .pagebody{padding:14px 12px 34px;max-width:100%}
  .pagebody .prose,.pagebody .faq,.pagebody .lede,.pagebody .cardlist{max-width:100%}
  .browse{padding:20px 12px 10px}
  .masthead-in{padding-left:12px;padding-right:12px}
}
@media (max-width:420px){
  .wrap{padding:0 10px}
  .pagebody{padding:12px 10px 30px}
}

/* ----------------------------------------------------- map directions */
.dirrow{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.dirbtn{flex:1 1 auto;text-align:center;white-space:nowrap}

/* ------------------------------------------------ open-in-maps buttons */
/* Directly under the address, because that is the moment someone asks "where
   is that?". Both apps, since which one is "the maps app" depends entirely on
   the phone in your hand. */
.maplinks{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;align-items:center}
.maplink{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;
  line-height:1}
.maplink:hover{background:var(--panel-2);border-color:var(--ink-3)}
.maplink svg{flex:0 0 auto;border-radius:3px}
.maplink-jump{font-weight:500;color:var(--ink-2);border-style:dashed}
@media (max-width:600px){
  /* Thumb-sized and evenly split rather than three cramped chips. */
  .maplinks{gap:6px}
  .maplink{flex:1 1 calc(50% - 3px);justify-content:center;padding:9px 10px}
  .maplink-jump{flex:1 1 100%}
}
/* #map is the jump target; offset so the sticky masthead does not cover it. */
.mapcard{scroll-margin-top:76px}

/* The cheapest bar is the loudest thing on the page; it needs an action, not
   just a number. */
.cheapbook{margin-left:auto;display:inline-flex;align-items:center;gap:4px;
  padding:8px 14px;border-radius:9px;background:var(--cheap);color:#fff;
  font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap}
.cheapbook:hover{filter:brightness(.94)}
.cheapbar .meta a{color:inherit;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.cheapbar .meta a:hover{text-decoration-thickness:2px}
@media (max-width:600px){
  .cheapbar{flex-wrap:wrap}
  /* order:4 is required, not cosmetic: the siblings already carry explicit
     order values (tag 1, big 2, meta 3), so an unordered button defaults to 0
     and jumps above the label. */
  .cheapbook{order:4;margin-left:0;width:100%;justify-content:center;margin-top:10px}
}