/* ---------- @font-face (self-hosted) ---------- */
@font-face {
    font-family: 'Instrument Serif';
    src: url('fonts/instrument-serif-400-normal.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-300-700-normal.woff2') format('woff2');
    font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url('fonts/geist-mono-300-700-normal.woff2') format('woff2');
    font-weight: 300 700; font-style: normal; font-display: swap;
}

/* ---------- parametric tokens (exported from /typography) ---------- */
/* mtlcinema typography — exported 2026-05-02T20:35:50.973Z */
:root {
  --font-heading: 'OT Miniature';
  --fw-heading: 300;
  --size-title: 42px;
  --lh-title: 1.04;
  --lh-title-wrap: 0.9;
  --track-title: -0.035em;
  --font-body: 'Geist';
  --fw-body: 400;
  --size-body: 11px;
  --lh-body: 1.1;
  --font-sub: 'Manrope';
  --fw-sub: 900;
  --size-sub: 9px;
  --lh-sub: 1.16;
  --gap-sub: 2px;
  --font-meta: 'PP Object Sans';
  --fw-meta: 400;
  --size-meta: 14px;
  --lh-meta: 1.35;
  --track-meta: 0em;
  --gap-meta: 6px;
  --font-desc: 'Geist';
  --fw-desc: 400;
  --size-desc: 13px;
  --lh-desc: 1.45;
  --gap-desc: 4px;
  --font-ui: 'Geist';
  --fw-ui: 500;
  --size-ui: 10px;
  --track-ui: 0.06em;
  --font-mono: 'Geist';
  --fw-mono: 700;
  --size-mono: 11px;
  --gap-card-row: 38px;
  --gap-card-col: 38px;
  --pad-card-y: 23px;
  --gap-head-top: 36px;
  --gap-shows-top: 5px;
  --gap-shows-pills: 8px;
  --bg: #aaf04e;
  --panel: #1a1a1f;
  --text-primary: #e6e6e6;
  --accent: #b3b8e9;
}

/* ---------- layout + chrome ---------- */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-body), system-ui, sans-serif;
    font-size: var(--size-body);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
}
header {
    /* tint panel toward the lime canvas so the seam softens; keep subtle. */
    padding: 10px 48px 12px;
    background: #1d2515;
    border-bottom: 1px solid #2a3520;
    position: sticky; top: 0; z-index: 10;
}
.wordmark-row {
    display: flex; align-items: baseline; gap: 16px;
    margin-bottom: 8px;
}
.wordmark-row #summary {
    margin-left: auto;
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
    color: #8a9075;
}
header h1 {
    margin: 0;
    font-family: var(--font-heading), serif;
    font-size: 32px;
    font-weight: var(--fw-heading);
    line-height: var(--lh-title);
    letter-spacing: var(--track-title);
    color: #fff;
}
.controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.controls button {
    background: var(--accent);
    color: #0e0e10;
    border: 0; padding: 6px 14px;
    border-radius: 4px; cursor: pointer;
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    font-weight: var(--fw-ui);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
}
.controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.controls #statusText {
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
    color: #999;
}
.controls #summary {
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
    color: #888;
    margin-left: auto;
}

.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip {
    padding: 4px 10px; border-radius: 12px; background: #2a2a30;
    color: #ccc;
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    font-weight: var(--fw-ui);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
}
.chip.active { background: var(--accent); color: #0e0e10; border-color: var(--accent); }
.chip .count { opacity: 0.65; margin-left: 4px; font-variant-numeric: tabular-nums; }
.chips.dayrow { margin-top: 6px; }
.chips.dayrow .chip { background: #20202a; }
.chips.dayrow .chip.active { background: #2563eb; border-color: #2563eb; color: #fff; }

.sortbar {
    margin-top: 10px;
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
    color: #888;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}
.sortbar select {
    background: #2a2a30; color: #e6e6e6; border: 1px solid #3a3a40;
    padding: 3px 6px; border-radius: 3px;
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    text-transform: none;
}

main { padding: 16px 48px; max-width: 1500px; margin: 0 auto; }
#moviesList {
    list-style: none; padding: 0; margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 1100px) {
    main { padding: 24px 80px; }
    #moviesList {
        grid-template-columns: repeat(2, minmax(0, 560px));
        justify-content: center;
        column-gap: var(--gap-card-col, 40px);
        row-gap: var(--gap-card-row, 36px);
    }
}

.movie {
    background: var(--panel);
    border: 1px solid #2a2a30;
    border-radius: 6px;
    padding: var(--pad-card-y, 16px) 18px;
    display: flex;
    gap: 16px;
    align-items: stretch;
}
.movie-poster {
    flex: 0 0 144px;
    width: 144px;
    height: 216px;
    border-radius: 4px;
    background: #000 center/cover no-repeat;
    position: relative;
    /* overflow visible so the corner flag sticker can bleed past the edge */
}
.movie-poster .play {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.4);
    color: #fff;
    font-size: 28px;
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s;
}
.movie-poster:hover .play { opacity: 1; }
.movie-desc .desc-flag {
    display: inline-block;
    margin-left: 2px;
    font-size: 1em;
    line-height: 1;
    vertical-align: -0.1em;
}

.movie-body {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-direction: column;
}
.movie-head {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: var(--gap-head-top, 0);
}

.movie-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    text-wrap: balance;
    /* No clip — let descenders (y/g/p) overlay rather than be cropped, even
       though that means a long title can push the card past the poster height. */
    overflow: visible;
    font-family: var(--font-heading), serif;
    font-size: var(--size-title);
    font-weight: var(--fw-heading);
    line-height: var(--lh-title-wrap, var(--lh-title));
    letter-spacing: var(--track-title);
    color: #fff;
}
.movie-native {
    font-family: var(--font-heading), serif;
    font-style: italic;
    font-weight: 400;
    font-size: calc(var(--size-title) * 0.5);
    color: #888;
}
.movie-year {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: var(--size-mono);
    font-weight: var(--fw-mono);
    color: #888;
}
.movie-flags { font-size: calc(var(--size-title) * 0.4); }
.movie-sub {
    font-family: var(--font-sub, var(--font-body)), system-ui, sans-serif;
    font-weight: var(--fw-sub, 400);
    font-size: var(--size-sub, 13px);
    line-height: var(--lh-sub, 1.3);
    color: #8a8a8a;
    margin-top: var(--gap-sub, 4px);
}
.movie-sub .sub-native { font-style: italic; }
.movie-sub .sub-flag   { margin-right: 2px; }
.movie-meta {
    font-family: var(--font-meta, var(--font-body)), system-ui, sans-serif;
    font-weight: var(--fw-meta, 400);
    font-style: normal;
    font-size: var(--size-meta, var(--size-body));
    line-height: var(--lh-meta, 1.4);
    letter-spacing: var(--track-meta, 0);
    color: #999;
    margin-top: var(--gap-meta, 4px);
}
.movie-meta .meta-flag { margin-right: 2px; }
.movie-desc {
    font-family: var(--font-desc, var(--font-body)), system-ui, sans-serif;
    font-weight: var(--fw-desc, 400);
    font-size: var(--size-desc, var(--size-body));
    line-height: var(--lh-desc, 1.45);
    color: #b0b0b0;
    margin-top: var(--gap-desc, 4px);
    max-width: 720px;
}
.movie-subs-line {
    /* Same family / size / weight as description; softer colour so it reads
       as secondary. Render directly after the description. */
    font-family: var(--font-desc, var(--font-body)), system-ui, sans-serif;
    font-weight: var(--fw-desc, 400);
    font-size: var(--size-desc, var(--size-body));
    line-height: var(--lh-desc, 1.45);
    color: #888;
    margin-top: 2px;
    max-width: 720px;
}

.pills {
    display: flex; gap: 5px; flex-wrap: wrap;
    flex: 0 0 auto; opacity: 0.75;
    justify-content: flex-start;
    margin-top: var(--gap-shows-pills, 10px);
}
.pill {
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: var(--size-mono);
    font-weight: var(--fw-mono);
    padding: 2px 7px;
    border-radius: 3px;
}
.pill a { color: inherit; text-decoration: none; }
.pill.lb       { background: #00d735; color: #000; }
.pill.rt       { background: #fa320a; color: #fff; }
.pill.imdb     { background: #f5c518; color: #000; }
.pill.empty    { background: #2a2a30; color: #555; }
.pill.weighted { background: #2563eb; color: #fff; }

.shows {
    margin-top: auto; padding-top: var(--gap-shows-top, 16px);
    border-top: 1px dashed #2a2a30;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
}
.show-cinema { flex: 1 1 180px; min-width: 0; }
.show-cinema {
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: var(--size-ui);
    letter-spacing: var(--track-ui);
    text-transform: uppercase;
}
.show-cinema .cname { color: var(--accent); font-weight: var(--fw-ui); }
.show-cinema .cq-link { color: #999; text-decoration: none; font-weight: 400; font-size: var(--size-ui); }
.show-cinema .cq-link:hover { color: var(--accent); }
.show-cinema .stimes {
    color: #ccc;
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 360px;
}
.show-cinema .stime {
    background: #2a2a30; color: #ddd;
    padding: 2px 7px;
    border-radius: 3px;
    font-family: var(--font-mono), ui-monospace, monospace;
    font-size: var(--size-mono);
    font-weight: var(--fw-mono);
    text-transform: none;
    letter-spacing: 0;
}
.show-cinema .stime.stime-hidden { display: none; }
.show-cinema button.stime.stime-more {
    border: none;
    cursor: pointer;
    background: #3a3a44;
    color: #fff;
    line-height: inherit;
}
.show-cinema button.stime.stime-more:hover { background: #4a4a55; }

.city-switcher {
    display: flex;
    gap: 14px;
    margin-bottom: 6px;
    font-family: var(--font-ui), ui-monospace, monospace;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.city-switcher .city-link {
    color: #888;
    text-decoration: none;
    padding: 2px 0;
}
.city-switcher .city-link:hover { color: #ddd; }
.city-switcher .city-link.active {
    color: #fff;
    border-bottom: 2px solid currentColor;
}

/* >>> typography-managed @font-face — regenerated on save >>> */
@font-face { font-family: 'OT Miniature'; src: url('typography/fonts/ot-miniature-400-normal.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'OT Miniature'; src: url('typography/fonts/ot-miniature-700-normal.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('typography/fonts/geist-300-700-normal.woff2') format('woff2'); font-weight: 300-700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('typography/fonts/manrope-300-700-normal.woff2') format('woff2'); font-weight: 300-700; font-style: normal; font-display: swap; }
@font-face { font-family: 'PP Object Sans'; src: url('typography/fonts/pp-object-sans-400-normal.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
/* <<< end typography-managed >>> */