/* Films Discourse · concept "cinema"
   The night screening. A plum-black auditorium ground; posters and trailers are the colour; the page's accent is
   sampled from the lead film's poster and cross-fades as the feature tile rotates. Dark first; "daylight lobby" light mode.
   Type: Bricolage Grotesque (display, variable width) + Schibsted Grotesk (text) + Hind (Devanagari fallback). */

/* ------------------------------------------------------------------ fonts */
@font-face { font-family: "Bricolage Grotesque"; src: url(fonts/cinema-bricolage-vf.woff2) format("woff2-variations"), url(fonts/cinema-bricolage-vf.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/cinema-schibsted-vf.woff2) format("woff2-variations"), url(fonts/cinema-schibsted-vf.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url(fonts/cinema-schibsted-vf-italic.woff2) format("woff2-variations"), url(fonts/cinema-schibsted-vf-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Hind"; src: url(/assets/fonts/post/hind-devanagari-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Hind"; src: url(/assets/fonts/post/hind-devanagari-700-normal.woff2) format("woff2"); font-weight: 600 800; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

/* ------------------------------------------------------------------ tokens
   (declared on `html body…` so they outrank site.css's `html[data-theme="dark"] body` block) */
html body[data-concept="cinema"] {
  --display: "Bricolage Grotesque", "Hind", "Segoe UI", Arial, sans-serif;
  --body: "Schibsted Grotesk", "Hind", "Segoe UI", Arial, sans-serif;
  /* the auditorium */
  --bg: #120C10; --surface: #1B1318; --surface-2: #261B21; --surface-3: #31242B;
  --ink: #F6EEE9; --text: #EDE3DF; --muted: #B3A3AA; --faint: #7E6E76;
  --line: rgba(246,236,232,.11); --line-2: rgba(246,236,232,.22);
  --acc: var(--acc-d, hsl(41 86% 61%)); --on-acc: #140C10;
  --up: #6FD3A2; --down: #F08A6A;
  --v-bad: #F08A6A; --v-meh: #E9B960; --v-ok: #B9D47A; --v-good: #6FD3A2;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 18px 40px -24px rgba(0,0,0,.8);
  --scrim: 18 12 16;
  /* the site's old roles, re-pointed so every existing component follows */
  --velvet: var(--acc); --velvet-deep: var(--acc); --marquee: var(--acc); --ticket: var(--acc); --gold: var(--acc); --gold-line: var(--acc); --on-marquee: var(--on-acc);
  --up-bg: transparent; --down-bg: transparent;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
  accent-color: var(--acc); caret-color: var(--acc);
  scrollbar-color: var(--line-2) transparent;
}
html[data-theme="light"] body[data-concept="cinema"] {
  /* the daylight lobby */
  --bg: #F4F0EC; --surface: #FFFFFF; --surface-2: #EBE4DF; --surface-3: #E0D7D1;
  --ink: #17101A; --text: #241A22; --muted: #6E6068; --faint: #9C8E95;
  --line: rgba(30,18,24,.12); --line-2: rgba(30,18,24,.24);
  --acc: var(--acc-l, hsl(36 90% 29%)); --on-acc: #FFFFFF;
  --up: #1D7A4C; --down: #B4471C;
  --v-bad: #B23A1C; --v-meh: #8A5A00; --v-ok: #4F6B12; --v-good: #0E7C5A;
  --shadow: 0 1px 2px rgba(23,16,26,.06), 0 18px 40px -24px rgba(23,16,26,.35);
  --scrim: 244 240 236;
  color-scheme: light;
}
/* anything that carries its own sampled colour lights itself */
body[data-concept="cinema"] [style*="--acc-d"] { --acc: var(--acc-d); }
html[data-theme="light"] body[data-concept="cinema"] [style*="--acc-d"] { --acc: var(--acc-l); }
/* surfaces that are always dark (video, image tiles) keep the dark-lit accent in the daylight lobby too */
html[data-theme="light"] body[data-concept="cinema"] .cn-feature, html[data-theme="light"] body[data-concept="cinema"] .cn-tile, html[data-theme="light"] body[data-concept="cinema"] .cn-hero [style*="--acc-d"],
html[data-theme="light"] body[data-concept="cinema"] .fv, html[data-theme="light"] body[data-concept="cinema"] .film-hero.is-video { --acc: var(--acc-d, hsl(41 86% 61%)); --on-acc: #140C10; }
/* the header and other dark re-scopes follow the page's tokens instead of the old navy */
body[data-concept="cinema"] .site-head, body[data-concept="cinema"] .on-dark {
  --bg: #120C10; --surface: #1B1318; --surface-2: #261B21; --ink: #F6EEE9; --text: #EDE3DF; --muted: #B3A3AA;
  --line: rgba(246,236,232,.11); --line-2: rgba(246,236,232,.22); --up: #6FD3A2; --down: #F08A6A;
  --velvet: var(--acc); --velvet-deep: var(--acc); --marquee: var(--acc); --gold: var(--acc); --on-marquee: var(--on-acc);
}
html[data-theme="light"] body[data-concept="cinema"] .site-head {
  --bg: #F4F0EC; --surface: #FFFFFF; --surface-2: #EBE4DF; --ink: #17101A; --text: #241A22; --muted: #6E6068;
  --line: rgba(30,18,24,.12); --line-2: rgba(30,18,24,.24);
}

/* ------------------------------------------------------------------ base */
body[data-concept="cinema"] { font-family: var(--body); font-size: 1rem; line-height: 1.55; background: var(--bg); color: var(--text); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }
body[data-concept="cinema"] ::selection { background: var(--acc); color: var(--on-acc); }
body[data-concept="cinema"] ::-webkit-scrollbar { width: 10px; height: 10px; }
body[data-concept="cinema"] ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; border: 2px solid var(--bg); }
body[data-concept="cinema"] ::-webkit-scrollbar-track { background: transparent; }
body[data-concept="cinema"] a { color: var(--acc); text-underline-offset: .18em; text-decoration-thickness: 1px; }
body[data-concept="cinema"] a:focus-visible, body[data-concept="cinema"] button:focus-visible, body[data-concept="cinema"] input:focus-visible, body[data-concept="cinema"] textarea:focus-visible, body[data-concept="cinema"] [tabindex]:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 2px; }
body[data-concept="cinema"] h1, body[data-concept="cinema"] h2, body[data-concept="cinema"] h3 { font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -.015em; text-wrap: balance; color: var(--ink); }
body[data-concept="cinema"] .num, body[data-concept="cinema"] td.num, body[data-concept="cinema"] th.num, body[data-concept="cinema"] table { font-variant-numeric: tabular-nums lining-nums; }
body[data-concept="cinema"] .kicker { font-family: var(--body); font-weight: 500; font-size: .85rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
body[data-concept="cinema"] .note, body[data-concept="cinema"] .muted { color: var(--muted); font-size: .86rem; }
body[data-concept="cinema"] .empty { border: 1px dashed var(--line-2); border-radius: 6px; color: var(--muted); }
body[data-concept="cinema"] .section { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
body[data-concept="cinema"] .section-head { border-bottom: 1px solid var(--line-2); padding-bottom: .55rem; margin-bottom: 1.1rem; }
body[data-concept="cinema"] .section-head h2 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); text-transform: none; letter-spacing: -.015em; font-stretch: 92%; }
body[data-concept="cinema"] .section-head .meta { font-size: .86rem; color: var(--muted); }
body[data-concept="cinema"] .page-h { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 750; font-stretch: 85%; letter-spacing: -.025em; text-transform: none; line-height: .95; margin-top: .2rem; }
body[data-concept="cinema"] .h-sub { font-family: var(--body); font-weight: 500; font-size: .4em; letter-spacing: .02em; color: var(--muted); }
body[data-concept="cinema"] .ph-h2 { text-transform: none; letter-spacing: -.01em; font-size: 1.3rem; }
body[data-concept="cinema"] .poster { border-radius: 3px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line); }
body[data-concept="cinema"] .poster img { object-fit: cover; }
body[data-concept="cinema"] .poster .ph { font-family: var(--display); font-weight: 700; color: var(--ink); }
body[data-concept="cinema"] .btn { font-family: var(--body); font-weight: 600; font-size: .95rem; background: var(--acc); color: var(--on-acc); border-radius: 4px; padding: .7rem 1.25rem; transition: filter .15s ease, transform .15s ease; }
body[data-concept="cinema"] .btn:hover { background: var(--acc); filter: brightness(1.08); }
body[data-concept="cinema"] .btn:active { transform: translateY(1px); }
/* verdicts: marquee lettering with a lamp, not a pill */
body[data-concept="cinema"] .verdict { border: 0; background: none; padding: 0; border-radius: 0; font-family: var(--body); font-weight: 700; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; display: inline-flex; align-items: center; gap: .35em; }
body[data-concept="cinema"] .verdict::before { content: ""; width: .45em; height: .45em; border-radius: 50%; background: currentColor; }
body[data-concept="cinema"] .v-bad { color: var(--v-bad); } body[data-concept="cinema"] .v-meh { color: var(--v-meh); }
body[data-concept="cinema"] .v-ok { color: var(--v-ok); } body[data-concept="cinema"] .v-good { color: var(--v-good); } body[data-concept="cinema"] .v-great { color: var(--acc); }
body[data-concept="cinema"] .tag { font-size: .72rem; font-weight: 500; color: var(--muted); border: 1px solid var(--line-2); border-radius: 3px; padding: .05rem .4rem; }
body[data-concept="cinema"] .live-dot { background: var(--acc); box-shadow: none; animation: cn-pulse 2.2s infinite; width: .5em; height: .5em; }
@keyframes cn-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acc) 55%, transparent); } 70% { box-shadow: 0 0 0 .5em transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
/* the markup's emoji glyphs: drawn marks or nothing */
body[data-concept="cinema"] .hype-b > span[aria-hidden], body[data-concept="cinema"] .chip > span[aria-hidden] { display: none; }
body[data-concept="cinema"] .hm-badge { font-size: 0; background: var(--acc); color: var(--on-acc); border-radius: 3px; padding: .2rem .5rem; vertical-align: .2em; }
body[data-concept="cinema"] .hm-badge::after { content: "Most hyped"; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
body[data-concept="cinema"] .ab-flag { font-size: 0 !important; } body[data-concept="cinema"] .ab-tk-mkt .ab-flag { display: none; }

/* ------------------------------------------------------------------ header */
body[data-concept="cinema"] .site-head { background: color-mix(in srgb, var(--bg) 84%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--line); }
body[data-concept="cinema"] .site-head .wrap { min-height: 3.9rem; gap: .75rem; }
body[data-concept="cinema"] .brand { font-family: var(--display); font-weight: 800; font-stretch: 80%; font-size: 1.4rem; letter-spacing: .035em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: baseline; }
body[data-concept="cinema"] .brand span { font-size: 1em; font-weight: 400; letter-spacing: .035em; margin-left: .28em; color: var(--muted); font-stretch: 80%; }
body[data-concept="cinema"] .nav { gap: 1.5rem; }
body[data-concept="cinema"] .nav > a, body[data-concept="cinema"] .dd-top { font-family: var(--body); font-size: .95rem; font-weight: 500; color: var(--muted); padding: 1.25rem 0 calc(1.25rem - 2px); border-bottom: 2px solid transparent; transition: color .15s ease, border-color .6s ease; }
body[data-concept="cinema"] .nav > a:hover, body[data-concept="cinema"] .dd-top:hover, body[data-concept="cinema"] .dd.open .dd-top { color: var(--ink); }
body[data-concept="cinema"] .nav > a[aria-current="page"], body[data-concept="cinema"] .dd-top[data-current] { color: var(--ink); border-bottom-color: var(--acc); }
body[data-concept="cinema"] .caret { font-size: .6em; opacity: .7; }
body[data-concept="cinema"] .dd-menu { background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px; box-shadow: var(--shadow); padding: .35rem 0; }
body[data-concept="cinema"] .dd-menu a { font-size: .92rem; color: var(--text); }
body[data-concept="cinema"] .dd-menu a:hover, body[data-concept="cinema"] .dd-menu a:focus-visible { background: var(--surface-2); color: var(--ink); }
body[data-concept="cinema"] .dd-menu a.dd-sep { border-top-color: var(--line); }
body[data-concept="cinema"] .search-btn, body[data-concept="cinema"] .me-btn, body[data-concept="cinema"] .theme-btn, body[data-concept="cinema"] .menu-btn { font-family: var(--body); font-size: .9rem; color: var(--muted); border: 1px solid var(--line-2); border-radius: 99px; background: transparent; transition: color .15s ease, border-color .15s ease; }
body[data-concept="cinema"] .search-btn { padding: .42rem .9rem; margin-left: .25rem; }
body[data-concept="cinema"] .search-btn:hover, body[data-concept="cinema"] .me-btn:hover, body[data-concept="cinema"] .theme-btn:hover, body[data-concept="cinema"] .menu-btn:hover, body[data-concept="cinema"] .search-btn[aria-expanded="true"] { color: var(--ink); border-color: var(--acc); }
body[data-concept="cinema"] .me-btn.is-in { border-color: var(--acc); }
body[data-concept="cinema"] .menu-btn { border-radius: 6px; }
body[data-concept="cinema"] .site-search { border-top-color: var(--line); background: var(--bg); }
body[data-concept="cinema"] .site-search input, body[data-concept="cinema"] .search-big input { font-family: var(--body); background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: 6px; }
body[data-concept="cinema"] .site-search input::placeholder, body[data-concept="cinema"] .search-big input::placeholder { color: var(--muted); }
body[data-concept="cinema"] .ss-list { background: var(--surface); border-color: var(--line-2); border-radius: 6px; box-shadow: var(--shadow); }
body[data-concept="cinema"] .ss-list li.on a, body[data-concept="cinema"] .ss-list a:hover { background: var(--surface-2); }
body[data-concept="cinema"] .ss-list img, body[data-concept="cinema"] .ss-list i { border-radius: 2px; background: var(--surface-2); }
body[data-concept="cinema"] .ss-list small, body[data-concept="cinema"] .ss-none { color: var(--muted); }
body[data-concept="cinema"] .preview-bar { background: var(--surface-2); color: var(--text); font-size: .85rem; }
body[data-concept="cinema"] .preview-bar a { color: var(--acc); }
@media (max-width: 1080px) {
  body[data-concept="cinema"] .site-head .wrap { padding-top: .5rem; padding-bottom: .5rem; }
  body[data-concept="cinema"] .nav { border-top-color: var(--line); }
  body[data-concept="cinema"] .nav > a, body[data-concept="cinema"] .dd-top { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  body[data-concept="cinema"] .nav > a[aria-current="page"], body[data-concept="cinema"] .dd-top[data-current] { color: var(--acc); border-bottom-color: var(--line); }
  body[data-concept="cinema"] .dd-menu { border-bottom-color: var(--line); }
  body[data-concept="cinema"] .dd-menu a { color: var(--muted); }
}
@media (max-width: 760px) {
  /* one row: wordmark, then the four round controls; the menu opens beneath */
  body[data-concept="cinema"] .site-head .wrap { gap: .4rem; padding-top: .55rem; padding-bottom: .55rem; }
  body[data-concept="cinema"] .brand { font-size: 1.15rem; margin-right: auto; }
  body[data-concept="cinema"] .theme-btn, body[data-concept="cinema"] .search-btn, body[data-concept="cinema"] .me-btn, body[data-concept="cinema"] .menu-btn { width: 2.3rem; height: 2.3rem; padding: 0; margin: 0; justify-content: center; border-radius: 50%; }
  body[data-concept="cinema"] .me-btn { gap: 0; } body[data-concept="cinema"] .me-label, body[data-concept="cinema"] .mb-label, body[data-concept="cinema"] .menu-btn .bars + span { display: none; }
  body[data-concept="cinema"] .nav { margin-top: .55rem; }
}

/* ================================================================== HOME */
body[data-concept="cinema"] .cn-home { --pad: clamp(.6rem, 1.4vw, 1.5rem); }
body[data-concept="cinema"] .cn-home .wrap, body[data-concept="cinema"] .cn-strip, body[data-concept="cinema"] .cn-hero { max-width: 1560px; margin-left: auto; margin-right: auto; padding-left: var(--pad); padding-right: var(--pad); }
body[data-concept="cinema"] .cn-home .wrap { max-width: calc(1560px); }

/* ---------- mosaic hero */
body[data-concept="cinema"] .cn-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 2.5fr) minmax(0, 2.5fr); grid-template-rows: minmax(0, 11fr) minmax(0, 9fr); gap: .6rem; height: clamp(520px, calc(100vh - 21rem), 600px); padding-top: .6rem; }
body[data-concept="cinema"] .cn-feature { grid-column: 1; grid-row: 1 / 3; }
body[data-concept="cinema"] .cn-wide { grid-column: 2 / 4; grid-row: 1; }
body[data-concept="cinema"] .cn-art { grid-column: 2; grid-row: 2; }
body[data-concept="cinema"] .cn-tile.cn-next { grid-column: 3; grid-row: 2; }
body[data-concept="cinema"] .cn-hero.no-next .cn-art, body[data-concept="cinema"] .cn-hero.no-art .cn-next { grid-column: 2 / 4; }
body[data-concept="cinema"] .cn-hero.no-wide .cn-art { grid-row: 1; } body[data-concept="cinema"] .cn-hero.no-wide .cn-next { grid-row: 1; }
body[data-concept="cinema"] .cn-hero.no-art.no-next .cn-wide { grid-row: 1 / 3; }
body[data-concept="cinema"] .cn-feature, body[data-concept="cinema"] .cn-tile { position: relative; overflow: hidden; border-radius: 6px; background: var(--surface); isolation: isolate; min-height: 0; animation: cn-rise .9s var(--ease) both; }
body[data-concept="cinema"] .cn-wide { animation-delay: .08s; } body[data-concept="cinema"] .cn-art { animation-delay: .16s; } body[data-concept="cinema"] .cn-tile.cn-next { animation-delay: .22s; }
@keyframes cn-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
body[data-concept="cinema"] .cn-atmos { position: absolute; inset: -12%; z-index: -3; background: var(--tile-img, none) center 30% / cover no-repeat; filter: blur(44px) saturate(1.5) brightness(.5); transform: scale(1.1); }
html[data-theme="light"] body[data-concept="cinema"] .cn-atmos { filter: blur(44px) saturate(1.2) brightness(.6); }
body[data-concept="cinema"] .cn-slides { position: absolute; inset: 0; }
body[data-concept="cinema"] .cn-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
body[data-concept="cinema"] .cn-slide.on { opacity: 1; visibility: visible; transition: opacity .9s ease; }
body[data-concept="cinema"] .cn-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .9; transition: opacity 1s ease; }
body[data-concept="cinema"] .cn-vid.is-off { opacity: 0; }
body[data-concept="cinema"] .cn-feature .cn-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(18 12 16) 0%, rgb(18 12 16 / .86) 28%, rgb(18 12 16 / .35) 58%, rgb(18 12 16 / .15) 100%),
              linear-gradient(90deg, rgb(18 12 16 / .78) 0%, rgb(18 12 16 / .35) 50%, transparent 75%),
              radial-gradient(60% 70% at 12% 100%, color-mix(in srgb, var(--acc) 28%, transparent), transparent 70%); transition: background .9s ease; }
body[data-concept="cinema"] .cn-standee { position: absolute; right: 4%; bottom: 0; width: min(27%, 236px); aspect-ratio: 2 / 3; z-index: 1; border-radius: 4px 4px 0 0; overflow: hidden; box-shadow: 0 40px 70px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); transform: translateY(6%); }
body[data-concept="cinema"] .cn-standee img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-concept="cinema"] .cn-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 clamp(1.1rem, 2.4vw, 2.2rem) clamp(1.1rem, 2.4vw, 2rem); width: min(70%, 44rem); color: #F6EEE9; }
body[data-concept="cinema"] .cn-title { margin: 0; font-size: clamp(2.2rem, 4.3vw, 4.4rem); font-weight: 750; font-stretch: 82%; line-height: .9; letter-spacing: -.025em; text-transform: uppercase; }
body[data-concept="cinema"] .cn-title a { color: #fff; text-decoration: none; text-shadow: 0 2px 30px rgba(0,0,0,.5); }
body[data-concept="cinema"] .cn-title a:hover { color: var(--acc); }
body[data-concept="cinema"] .cn-credits { margin: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .2rem 0; font-size: .86rem; color: rgba(246,238,233,.8); }
body[data-concept="cinema"] .cn-credits span + span::before { content: "·"; margin: 0 .55em; color: rgba(246,238,233,.45); }
body[data-concept="cinema"] .cn-marquee { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; font-size: .86rem; color: rgba(246,238,233,.82); }
body[data-concept="cinema"] .cn-m { display: inline-flex; align-items: baseline; gap: .4em; }
body[data-concept="cinema"] .cn-m b { font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 2.3rem; line-height: 1; letter-spacing: -.02em; color: var(--acc); transition: color .9s ease; }
body[data-concept="cinema"] .cn-m i { font-style: normal; color: var(--up); font-weight: 600; }
body[data-concept="cinema"] .cn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: 1.2rem; }
body[data-concept="cinema"] .cn-btn { display: inline-flex; align-items: center; font-weight: 600; font-size: .92rem; padding: .7rem 1.2rem; border-radius: 4px; background: var(--acc); color: var(--on-acc); text-decoration: none; transition: background .9s ease, color .9s ease, filter .15s ease, transform .15s ease; }
body[data-concept="cinema"] .cn-btn:hover { filter: brightness(1.08); } body[data-concept="cinema"] .cn-btn:active { transform: translateY(1px); }
body[data-concept="cinema"] .cn-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .92rem; color: #F6EEE9; text-decoration: none; border-bottom: 1px solid rgba(246,238,233,.35); padding-bottom: 1px; transition: border-color .15s ease; }
body[data-concept="cinema"] .cn-link:hover { border-color: #F6EEE9; }
body[data-concept="cinema"] .cn-link svg { transition: transform .2s var(--ease); } body[data-concept="cinema"] .cn-link:hover svg { transform: translateX(3px); }
body[data-concept="cinema"] .cn-credit { position: absolute; left: clamp(1.1rem, 2.4vw, 2.2rem); top: 1rem; z-index: 2; margin: 0; max-width: 55%; font-size: .68rem; line-height: 1.35; color: rgba(246,238,233,.6); }
body[data-concept="cinema"] .cn-credit a { color: rgba(246,238,233,.8); }
body[data-concept="cinema"] .cn-ctl { position: absolute; top: .8rem; right: .8rem; z-index: 3; display: flex; align-items: center; gap: .35rem; padding: .25rem; border-radius: 99px; background: rgba(18,12,16,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(246,238,233,.12); }
body[data-concept="cinema"] .cn-ctl > button { width: 2rem; height: 2rem; border-radius: 50%; border: 0; background: transparent; color: #F6EEE9; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: background .15s ease; }
body[data-concept="cinema"] .cn-ctl > button:hover { background: rgba(246,238,233,.14); }
body[data-concept="cinema"] .cn-dots { display: flex; gap: .35rem; padding: 0 .25rem; }
body[data-concept="cinema"] .cn-dots button { width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 99px; background: rgba(246,238,233,.4); cursor: pointer; transition: width .3s var(--ease), background .3s ease; }
body[data-concept="cinema"] .cn-dots button[aria-selected="true"] { width: 1.4rem; background: var(--acc); }
body[data-concept="cinema"] .cn-pause .pl { display: none; } body[data-concept="cinema"] .cn-pause[aria-pressed="true"] .pz { display: none; } body[data-concept="cinema"] .cn-pause[aria-pressed="true"] .pl { display: inline; }
body[data-concept="cinema"] .cn-feature:focus-within .cn-ctl, body[data-concept="cinema"] .cn-feature:hover .cn-ctl { border-color: rgba(246,238,233,.3); }

/* the smaller tiles */
body[data-concept="cinema"] .cn-tile { display: flex; text-decoration: none; color: var(--ink); padding: clamp(.8rem, 1.2vw, 1.1rem); gap: clamp(.8rem, 1.3vw, 1.2rem); transition: box-shadow .25s ease; }
body[data-concept="cinema"] .cn-tile:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 70%, transparent); }
body[data-concept="cinema"] .cn-tile .cn-atmos { filter: blur(40px) saturate(1.3) brightness(.38); }
html[data-theme="light"] body[data-concept="cinema"] .cn-tile .cn-atmos { filter: blur(40px) saturate(1.1) brightness(.45); }
body[data-concept="cinema"] .cn-tile-poster { flex: none; height: 100%; aspect-ratio: 2 / 3; border-radius: 3px; overflow: hidden; box-shadow: 0 20px 40px -18px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08); transition: transform .35s var(--ease); }
body[data-concept="cinema"] .cn-tile:hover .cn-tile-poster { transform: translateY(-2px); }
body[data-concept="cinema"] .cn-tile-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-concept="cinema"] .cn-tile-body { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; flex: 1; color: #F6EEE9; }
body[data-concept="cinema"] .cn-tile-meta { font-size: .76rem; color: rgba(246,238,233,.72); }
body[data-concept="cinema"] .cn-tile-title { display: block; font-family: var(--display); font-weight: 700; font-stretch: 86%; font-size: clamp(1.25rem, 1.7vw, 1.75rem); line-height: .98; letter-spacing: -.02em; color: #fff; margin: .25rem 0 0; text-wrap: balance; }
body[data-concept="cinema"] .cn-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.4rem; margin-top: .9rem; }
body[data-concept="cinema"] .cn-fig-main, body[data-concept="cinema"] .cn-fig-sub { display: inline-flex; align-items: baseline; gap: .45em; }
body[data-concept="cinema"] .cn-fig b { font-family: var(--display); font-weight: 700; font-stretch: 88%; letter-spacing: -.02em; line-height: 1; }
body[data-concept="cinema"] .cn-fig-main b { font-size: clamp(2.2rem, 3.2vw, 3.4rem); color: var(--acc); transition: color .9s ease; }
body[data-concept="cinema"] .cn-fig-sub b { font-size: clamp(1.3rem, 1.7vw, 1.7rem); color: #fff; }
body[data-concept="cinema"] .cn-fig small { font-size: .74rem; color: rgba(246,238,233,.72); }
body[data-concept="cinema"] .cn-tile-tags { display: flex; gap: .7rem; align-items: center; margin-top: .7rem; }
body[data-concept="cinema"] .cn-tile-tags .tag { color: rgba(246,238,233,.8); border-color: rgba(246,238,233,.3); }
body[data-concept="cinema"] .cn-wide .cn-tile-body { padding: .1rem 0; }
body[data-concept="cinema"] .cn-wide .cn-fig-main b { font-size: clamp(2.6rem, 3.6vw, 3.8rem); }
body[data-concept="cinema"] .cn-art { padding: 0; }
body[data-concept="cinema"] .cn-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; transition: transform .6s var(--ease); }
body[data-concept="cinema"] .cn-art:hover .cn-cover { transform: scale(1.03); }
body[data-concept="cinema"] .cn-art .cn-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(18 12 16 / .92) 0%, rgb(18 12 16 / .55) 45%, rgb(18 12 16 / .1) 100%); }
body[data-concept="cinema"] .cn-art .cn-tile-body { padding: clamp(.8rem, 1.2vw, 1.1rem); }
body[data-concept="cinema"] .cn-art .cn-tile-title { font-size: clamp(1.05rem, 1.35vw, 1.4rem); font-stretch: 90%; letter-spacing: -.015em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
body[data-concept="cinema"] .cn-art .cn-tile-meta { margin-top: .45rem; }
body[data-concept="cinema"] .cn-tile.cn-next { flex-direction: row-reverse; }
body[data-concept="cinema"] .cn-tile.cn-next .cn-tile-poster { height: 78%; align-self: flex-end; }
body[data-concept="cinema"] .cn-tile.cn-next .cn-tile-title { font-size: clamp(1.05rem, 1.4vw, 1.45rem); }
body[data-concept="cinema"] .cn-tile.cn-next .cn-fig-main b { font-size: clamp(2rem, 2.6vw, 2.8rem); }
body[data-concept="cinema"] .cn-tile.cn-next .cn-fig { gap: .2rem .9rem; margin-top: .6rem; }
body[data-concept="cinema"] .cn-tile.cn-next .cn-fig-sub b { font-size: 1.05rem; }

/* ---------- the strip: today's board */
body[data-concept="cinema"] .cn-strip { margin-top: clamp(1.6rem, 3vw, 2.4rem); }
body[data-concept="cinema"] .cn-strip-head, body[data-concept="cinema"] .cn-head { display: flex; align-items: baseline; gap: 1rem 1.2rem; flex-wrap: wrap; padding-bottom: .6rem; border-bottom: 1px solid var(--line-2); }
body[data-concept="cinema"] .cn-strip-head h1, body[data-concept="cinema"] .cn-head h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-stretch: 92%; letter-spacing: -.02em; margin: 0; }
body[data-concept="cinema"] .cn-head h2 .live-dot { width: .32em; height: .32em; vertical-align: .32em; margin-right: .3em; }
body[data-concept="cinema"] .cn-live { margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--muted); }
body[data-concept="cinema"] .cn-live .live-dot { margin: 0; }
body[data-concept="cinema"] .cn-more, body[data-concept="cinema"] .cn-meta { margin-left: auto; font-size: .84rem; color: var(--muted); white-space: nowrap; }
body[data-concept="cinema"] .cn-more { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; color: var(--text); font-weight: 500; }
body[data-concept="cinema"] .cn-more svg { transition: transform .2s var(--ease); } body[data-concept="cinema"] .cn-more:hover { color: var(--acc); } body[data-concept="cinema"] .cn-more:hover svg { transform: translateX(3px); }
body[data-concept="cinema"] .cn-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
body[data-concept="cinema"] .cn-board li { display: grid; grid-template-columns: 1.4rem 3rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .9rem 1rem .9rem .9rem; border-left: 1px solid var(--line); min-width: 0; }
body[data-concept="cinema"] .cn-board li:first-child { border-left: 0; padding-left: 0; }
body[data-concept="cinema"] .cn-rank { font-family: var(--display); font-weight: 600; font-stretch: 90%; font-size: 1.1rem; color: var(--faint); text-align: right; }
body[data-concept="cinema"] .cn-board .poster { width: 3rem; }
body[data-concept="cinema"] .cn-b-t { min-width: 0; }
body[data-concept="cinema"] .cn-b-t > a, body[data-concept="cinema"] .cn-l-t > a { font-family: var(--display); font-weight: 650; font-stretch: 90%; font-size: 1.08rem; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-concept="cinema"] .cn-b-t > a:hover, body[data-concept="cinema"] .cn-l-t > a:hover { color: var(--acc); }
body[data-concept="cinema"] .cn-b-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .55rem; margin-top: .25rem; font-size: .78rem; color: var(--muted); }
body[data-concept="cinema"] .cn-b-sub b { color: var(--acc); font-weight: 700; }
body[data-concept="cinema"] .cn-b-amt { text-align: right; }
body[data-concept="cinema"] .cn-b-amt b { display: block; font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 1.55rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
body[data-concept="cinema"] .cn-b-amt small { display: block; font-size: .68rem; color: var(--muted); margin-top: .15rem; }
body[data-concept="cinema"] .cn-note { margin: .5rem 0 0; font-size: .78rem; }

/* ---------- two columns: year top · advance booking */
body[data-concept="cinema"] .cn-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem clamp(1.6rem, 4vw, 4rem); margin-top: clamp(2.2rem, 4.5vw, 3.6rem); }
body[data-concept="cinema"] .cn-two.solo { grid-template-columns: minmax(0, 1fr); }
body[data-concept="cinema"] .cn-two.solo .cn-list { columns: 2; column-gap: clamp(1.6rem, 4vw, 4rem); }
body[data-concept="cinema"] .cn-two.solo .cn-list li { break-inside: avoid; }
@media (max-width: 760px) { body[data-concept="cinema"] .cn-two.solo .cn-list { columns: 1; } }
body[data-concept="cinema"] .cn-col { min-width: 0; }
body[data-concept="cinema"] .cn-list, body[data-concept="cinema"] .cn-adv { list-style: none; margin: 0; padding: 0; }
body[data-concept="cinema"] .cn-list li { display: grid; grid-template-columns: 1.4rem 2.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
body[data-concept="cinema"] .cn-list .poster, body[data-concept="cinema"] .cn-adv .poster { width: 2.5rem; }
body[data-concept="cinema"] .cn-l-t { min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
body[data-concept="cinema"] .cn-l-t > a { font-size: 1rem; white-space: normal; }
body[data-concept="cinema"] .cn-list > li > b { font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink); }
body[data-concept="cinema"] .cn-list li:first-child > b { color: var(--acc); }
body[data-concept="cinema"] .cn-adv li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--line); }
body[data-concept="cinema"] .cn-adv-n { display: flex; gap: 1.2rem; text-align: right; }
body[data-concept="cinema"] .cn-adv-n b { display: block; font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 1.3rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
body[data-concept="cinema"] .cn-adv-n > div:first-child b { color: var(--acc); }
body[data-concept="cinema"] .cn-adv-n small { font-size: .7rem; color: var(--muted); }
body[data-concept="cinema"] .up { color: var(--up); }

/* ---------- sections */
body[data-concept="cinema"] .cn-sec { margin-top: clamp(2.2rem, 4.5vw, 3.6rem); }
body[data-concept="cinema"] .cn-charts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(1rem, 2.5vw, 2.4rem); }
body[data-concept="cinema"] .cn-charts a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .8rem; align-items: center; padding: .95rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
body[data-concept="cinema"] .cn-ch-n { font-family: var(--display); font-weight: 650; font-stretch: 90%; font-size: 1.15rem; letter-spacing: -.01em; color: var(--ink); line-height: 1.05; transition: color .15s ease; }
body[data-concept="cinema"] .cn-ch-lead { display: flex; align-items: baseline; gap: .6rem; margin-top: .3rem; font-size: .82rem; color: var(--muted); min-width: 0; }
body[data-concept="cinema"] .cn-ch-film { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-concept="cinema"] .cn-ch-lead b { font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 1.05rem; color: var(--acc); letter-spacing: -.01em; }
body[data-concept="cinema"] .cn-ch-arrow { grid-column: 2; grid-row: 1 / 3; color: var(--faint); transition: transform .2s var(--ease), color .15s ease; }
body[data-concept="cinema"] .cn-charts a:hover .cn-ch-n { color: var(--acc); } body[data-concept="cinema"] .cn-charts a:hover .cn-ch-arrow { transform: translateX(4px); color: var(--acc); }
body[data-concept="cinema"] .cn-arts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4rem clamp(.9rem, 1.6vw, 1.5rem); margin-top: 1.2rem; }
body[data-concept="cinema"] .cn-artc { display: flex; flex-direction: column; gap: .45rem; text-decoration: none; color: var(--text); min-width: 0; }
body[data-concept="cinema"] .cn-artc-img { display: block; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--surface-2); margin-bottom: .3rem; }
body[data-concept="cinema"] .cn-artc-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
body[data-concept="cinema"] .cn-artc:hover img { transform: scale(1.03); }
body[data-concept="cinema"] .cn-artc b { font-family: var(--display); font-weight: 650; font-stretch: 90%; font-size: 1.12rem; line-height: 1.1; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
body[data-concept="cinema"] .cn-artc:hover b { color: var(--acc); }
body[data-concept="cinema"] .cn-artc-ex { font-size: .86rem; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-concept="cinema"] .cn-artc small { font-size: .74rem; color: var(--faint); }
body[data-concept="cinema"] .cn-soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 1.3rem 1rem; margin-top: 1.2rem; }
body[data-concept="cinema"] .cn-soon-c { display: flex; flex-direction: column; gap: .2rem; text-decoration: none; color: var(--text); }
body[data-concept="cinema"] .cn-soon-c .poster { margin-bottom: .45rem; transition: transform .35s var(--ease), box-shadow .35s ease; }
body[data-concept="cinema"] .cn-soon-c:hover .poster { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--acc), 0 18px 30px -18px rgba(0,0,0,.7); }
body[data-concept="cinema"] .cn-soon-c b { font-family: var(--display); font-weight: 650; font-stretch: 90%; font-size: 1rem; line-height: 1.08; letter-spacing: -.01em; color: var(--ink); }
body[data-concept="cinema"] .cn-soon-c span { font-size: .78rem; color: var(--muted); }
/* the reel */
body[data-concept="cinema"] .reel { margin-top: clamp(2.4rem, 5vw, 3.8rem); padding: .6rem 0; }
body[data-concept="cinema"] .reel-item { border-radius: 4px; border: 1px solid var(--line); background: var(--surface-2); box-shadow: 0 16px 30px -16px rgba(0,0,0,.6); width: clamp(7rem, 11vw, 10rem); }
body[data-concept="cinema"] .reel-item:hover, body[data-concept="cinema"] .reel-item:focus-visible { border-color: var(--acc); }

/* ---------- home: tablet and phone */
@media (max-width: 1100px) {
  body[data-concept="cinema"] .cn-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; height: auto; }
  body[data-concept="cinema"] .cn-feature { grid-column: 1 / 3; grid-row: 1; aspect-ratio: 16 / 9; max-height: 72vh; min-height: 380px; }
  body[data-concept="cinema"] .cn-wide { grid-column: 1 / 3; grid-row: 2; min-height: 11rem; }
  body[data-concept="cinema"] .cn-art { grid-column: 1; grid-row: 3; aspect-ratio: 4 / 3; } body[data-concept="cinema"] .cn-tile.cn-next { grid-column: 2; grid-row: 3; aspect-ratio: 4 / 3; }
  body[data-concept="cinema"] .cn-hero.no-next .cn-art, body[data-concept="cinema"] .cn-hero.no-art .cn-next { grid-column: 1 / 3; aspect-ratio: 2 / 1; }
  body[data-concept="cinema"] .cn-wide .cn-tile-poster { height: auto; width: 7.5rem; }
  body[data-concept="cinema"] .cn-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-concept="cinema"] .cn-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  body[data-concept="cinema"] .cn-hero { gap: .5rem; padding-top: .5rem; }
  body[data-concept="cinema"] .cn-feature { aspect-ratio: 4 / 5; min-height: 0; max-height: none; }
  body[data-concept="cinema"] .cn-copy { width: 100%; padding: 0 1rem 1rem; }
  body[data-concept="cinema"] .cn-standee { width: 34%; right: 1rem; top: 3.6rem; bottom: auto; transform: none; border-radius: 4px; box-shadow: 0 24px 50px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
  body[data-concept="cinema"] .cn-title { font-size: clamp(2rem, 10vw, 2.8rem); }
  body[data-concept="cinema"] .cn-m b { font-size: 1.9rem; }
  body[data-concept="cinema"] .cn-marquee { gap: .3rem 1.1rem; margin-top: .8rem; }
  body[data-concept="cinema"] .cn-acts { margin-top: 1rem; gap: .6rem 1rem; }
  body[data-concept="cinema"] .cn-credit { max-width: calc(100% - 9.5rem); top: .8rem; left: 1rem; font-size: .64rem; }
  body[data-concept="cinema"] .cn-ctl .cn-prev, body[data-concept="cinema"] .cn-ctl .cn-next { display: none; }
  body[data-concept="cinema"] .cn-ctl { top: .6rem; right: .6rem; }
  body[data-concept="cinema"] .cn-feature .cn-scrim { background: linear-gradient(to top, rgb(18 12 16) 0%, rgb(18 12 16 / .9) 30%, rgb(18 12 16 / .45) 60%, rgb(18 12 16 / .2) 100%), radial-gradient(70% 60% at 10% 100%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 70%); }
  body[data-concept="cinema"] .cn-wide { min-height: 9.5rem; }
  body[data-concept="cinema"] .cn-wide .cn-tile-poster { width: 5.6rem; }
  body[data-concept="cinema"] .cn-wide .cn-fig-main b { font-size: 2.2rem; }
  body[data-concept="cinema"] .cn-art, body[data-concept="cinema"] .cn-tile.cn-next { aspect-ratio: 1 / 1.05; }
  body[data-concept="cinema"] .cn-tile.cn-next { flex-direction: column; }
  body[data-concept="cinema"] .cn-tile.cn-next .cn-tile-poster { height: auto; width: 42%; align-self: flex-end; }
  body[data-concept="cinema"] .cn-tile.cn-next .cn-fig-main b { font-size: 1.9rem; }
  body[data-concept="cinema"] .cn-strip-head h1, body[data-concept="cinema"] .cn-head h2 { font-size: 1.3rem; }
  body[data-concept="cinema"] .cn-board { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - 1.4rem), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 var(--pad), #000 calc(100% - 1.4rem), transparent); }
  body[data-concept="cinema"] .cn-board::-webkit-scrollbar { display: none; }
  body[data-concept="cinema"] .cn-board li { flex: 0 0 min(78%, 19rem); scroll-snap-align: start; padding: .8rem .8rem .8rem 0; border-left: 0; border-right: 1px solid var(--line); margin-right: .8rem; }
  body[data-concept="cinema"] .cn-two { grid-template-columns: minmax(0, 1fr); }
  body[data-concept="cinema"] .cn-charts { grid-template-columns: minmax(0, 1fr); }
  body[data-concept="cinema"] .cn-arts { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  body[data-concept="cinema"] .cn-artc { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .9rem; row-gap: .2rem; }
  body[data-concept="cinema"] .cn-artc-img { grid-row: 1 / 4; margin: 0; aspect-ratio: 4 / 3; }
  body[data-concept="cinema"] .cn-artc b { font-size: 1rem; }
  body[data-concept="cinema"] .cn-artc-ex { -webkit-line-clamp: 2; font-size: .8rem; }
  body[data-concept="cinema"] .cn-soon { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .7rem; }
  body[data-concept="cinema"] .cn-adv li { grid-template-columns: 2.5rem minmax(0, 1fr); }
  body[data-concept="cinema"] .cn-adv-n { grid-column: 2; text-align: left; }
  body[data-concept="cinema"] .cn-adv-n b { display: inline; }
}
@media (max-width: 400px) {
  body[data-concept="cinema"] .cn-art, body[data-concept="cinema"] .cn-tile.cn-next { aspect-ratio: 1 / 1.25; }
  body[data-concept="cinema"] .cn-tile.cn-next .cn-tile-title { font-size: 1rem; }
  body[data-concept="cinema"] .cn-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================== FILM PAGE */
body[data-concept="cinema"] .film-hero { position: relative; isolation: isolate; overflow: clip; margin: 0 calc(50% - 50vw); padding: clamp(1.8rem, 4vw, 3.2rem) calc(50vw - 50%) clamp(1.6rem, 3.5vw, 2.6rem); grid-template-columns: clamp(9rem, 17vw, 15rem) minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.8rem); align-items: end; background: var(--surface); border-bottom: 1px solid var(--line); }
body[data-concept="cinema"] .film-hero::before { content: ""; position: absolute; inset: -15% -5%; z-index: -2; background: var(--cn-poster, none) center 30% / cover no-repeat; filter: blur(70px) saturate(1.5) brightness(.42); opacity: .95; }
body[data-concept="cinema"] .film-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(var(--scrim)) 0%, rgb(var(--scrim) / .45) 45%, rgb(var(--scrim) / .2) 100%), radial-gradient(50% 80% at 85% 10%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%); }
html[data-theme="light"] body[data-concept="cinema"] .film-hero::before { filter: blur(70px) saturate(1.2) brightness(1.05); opacity: .55; }
html[data-theme="light"] body[data-concept="cinema"] .film-hero::after { background: linear-gradient(to top, rgb(var(--scrim)) 0%, rgb(var(--scrim) / .72) 50%, rgb(var(--scrim) / .55) 100%); }
body[data-concept="cinema"] .film-hero .poster { border-radius: 4px; box-shadow: 0 30px 60px -22px rgba(0,0,0,.8), 0 0 0 1px var(--line-2); }
body[data-concept="cinema"] .film-hero h1 { font-size: clamp(2.5rem, 6.4vw, 5.6rem); font-weight: 750; font-stretch: 80%; letter-spacing: -.03em; line-height: .88; text-transform: uppercase; }
body[data-concept="cinema"] .film-hero .kicker { margin-bottom: .6rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--acc); font-weight: 600; font-size: .84rem; }
body[data-concept="cinema"] .film-meta { margin-top: 1rem; font-size: .92rem; color: var(--muted); }
body[data-concept="cinema"] .film-meta span + span::before { color: var(--line-2); }
body[data-concept="cinema"] .film-badges { margin-top: .9rem; gap: .9rem; align-items: center; }
body[data-concept="cinema"] .film-people { margin-top: 1rem; font-size: .95rem; }
body[data-concept="cinema"] .film-people dt { color: var(--muted); }
body[data-concept="cinema"] .film-people a { color: var(--text); text-decoration-color: var(--line-2); } body[data-concept="cinema"] .film-people a:hover { color: var(--acc); text-decoration-color: currentColor; }
body[data-concept="cinema"] .synopsis { margin-top: 1.1rem; max-width: 60ch; color: var(--text); }
body[data-concept="cinema"] .poster-credit { color: var(--faint); }
body[data-concept="cinema"] .adv-links { font-size: .9rem; }
/* the upcoming film: the video band already lights the page */
body[data-concept="cinema"] .fv { background: var(--bg); }
body[data-concept="cinema"] .fv-shade { background: linear-gradient(to top, #120C10 0%, rgb(18 12 16 / .86) 26%, rgb(18 12 16 / .42) 58%, rgb(18 12 16 / .18) 100%), linear-gradient(to right, rgb(18 12 16 / .72) 0%, rgb(18 12 16 / .25) 55%, transparent 80%); }
body[data-concept="cinema"] .film-hero.is-video { margin: 0; padding: 0; background: none; border: 0; grid-template-columns: clamp(9rem, 16vw, 14.5rem) minmax(0, 1fr); }
body[data-concept="cinema"] .film-hero.is-video::before, body[data-concept="cinema"] .film-hero.is-video::after { content: none; }
body[data-concept="cinema"] .film-hero.is-video .kicker { color: var(--acc); }
body[data-concept="cinema"] .film-hero.is-video .hype { background: rgba(18,12,16,.55); border-color: rgba(246,238,233,.16); border-radius: 6px; }
body[data-concept="cinema"] .fv-btn { background: rgba(18,12,16,.55); border-color: rgba(246,238,233,.28); } body[data-concept="cinema"] .fv-btn:hover { border-color: var(--acc); }
body[data-concept="cinema"] .fv-btn:focus-visible { outline-color: var(--acc); } body[data-concept="cinema"] [data-fv].sound .fv-snd { border-color: var(--acc); color: var(--acc); }
body[data-concept="cinema"] .fv-credit a:hover, body[data-concept="cinema"] .fv-pred a, body[data-concept="cinema"] .film-hero.is-video .adv-links a, body[data-concept="cinema"] .film-hero.is-video .film-people a:hover { color: var(--acc); }
body[data-concept="cinema"] .fv.hv { display: none; }
/* figures: a marquee row */
body[data-concept="cinema"] .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
body[data-concept="cinema"] .fig { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; padding: 1.1rem 1.2rem 1rem; color: var(--muted); font-size: .86rem; line-height: 1.3; }
body[data-concept="cinema"] .fig:first-child { border-left: 0; padding-left: 0; }
body[data-concept="cinema"] .fig b { font-family: var(--display); font-weight: 700; font-stretch: 86%; font-size: clamp(1.8rem, 3.4vw, 2.9rem); letter-spacing: -.025em; line-height: 1; color: var(--ink); margin-bottom: .35rem; }
body[data-concept="cinema"] .figures:not(.figures-open) .fig:first-child b { color: var(--acc); }
body[data-concept="cinema"] .fig small { color: var(--faint); font-size: .74rem; margin-top: .2rem; }
body[data-concept="cinema"] .fig .fig-usd { color: var(--muted); font-weight: 500; }
body[data-concept="cinema"] .figures-open { margin-top: 0; border-top: 0; }
body[data-concept="cinema"] .figures-open .fig { background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0; }
body[data-concept="cinema"] .figures-open .fig:first-child { border-left: 0; }
body[data-concept="cinema"] .figures-open .fig b { color: var(--ink); font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
body[data-concept="cinema"] .footfalls { margin: 1rem 0 .2rem; color: var(--muted); }
body[data-concept="cinema"] .footfalls .big { font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 1.7rem; color: var(--ink); letter-spacing: -.02em; }
body[data-concept="cinema"] .lang-split { height: .4rem; border-radius: 2px; background: var(--line); margin: 1.2rem 0 .5rem; }
body[data-concept="cinema"] .lang-key { font-size: .84rem; } body[data-concept="cinema"] .lang-key i { border-radius: 1px; }
/* the day-wise chart: the site draws it with inline colours; re-lit here */
body[data-concept="cinema"] .chart-box { border: 1px solid var(--line); border-radius: 6px; padding: 1rem .8rem .5rem; background: var(--surface); }
body[data-concept="cinema"] .chart-box rect[fill="#1A2C52"] { fill: var(--acc); }
body[data-concept="cinema"] .chart-box rect[fill="#D6D2C8"] { fill: color-mix(in srgb, var(--ink) 22%, transparent); }
body[data-concept="cinema"] .chart-box text { fill: var(--muted); font-family: var(--body) !important; }
body[data-concept="cinema"] .chart-box text[font-weight="700"] { fill: var(--ink); font-variant-numeric: tabular-nums; }
body[data-concept="cinema"] #box-office h3[style] { font-size: 1.2rem !important; text-transform: none !important; letter-spacing: -.01em; margin: 2.2rem 0 .7rem !important; font-stretch: 92%; }
/* tables */
body[data-concept="cinema"] .table-wrap { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
body[data-concept="cinema"] table { font-size: .92rem; }
body[data-concept="cinema"] th, body[data-concept="cinema"] td { padding: .6rem .9rem; border-bottom-color: var(--line); }
body[data-concept="cinema"] th { background: none; color: var(--muted); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--line-2); }
body[data-concept="cinema"] td.num { font-variant-numeric: tabular-nums lining-nums; font-family: var(--display); font-weight: 500; font-stretch: 94%; font-size: 1.04em; letter-spacing: 0; }
body[data-concept="cinema"] tbody tr:hover td { background: color-mix(in srgb, var(--ink) 4%, transparent); }
body[data-concept="cinema"] tr.week td, body[data-concept="cinema"] tbody tr.week:hover td { background: color-mix(in srgb, var(--acc) 11%, transparent); color: var(--acc); font-weight: 600; }
/* predictions & reviews */
body[data-concept="cinema"] .predict-card, body[data-concept="cinema"] .rv-score, body[data-concept="cinema"] .rv-mine, body[data-concept="cinema"] .rv-item, body[data-concept="cinema"] .pp-list li, body[data-concept="cinema"] .predict-avg, body[data-concept="cinema"] .pp-card { border-color: var(--line); border-radius: 6px; background: var(--surface); box-shadow: none; }
body[data-concept="cinema"] .predict-lead { text-transform: none; letter-spacing: -.01em; font-stretch: 92%; }
body[data-concept="cinema"] .predict-auth a, body[data-concept="cinema"] .pf-row input, body[data-concept="cinema"] .pp-more, body[data-concept="cinema"] .rv-form textarea, body[data-concept="cinema"] .pf-edit input, body[data-concept="cinema"] .pf-edit textarea { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); border-radius: 4px; }
body[data-concept="cinema"] .predict-auth a:hover, body[data-concept="cinema"] .pp-more:hover { border-color: var(--acc); }
body[data-concept="cinema"] .predict-auth .pa-x { background: #000; color: #fff; border-color: #000; }
body[data-concept="cinema"] .predict-form button, body[data-concept="cinema"] .rv-acts button, body[data-concept="cinema"] .vs-pick button { background: var(--acc); color: var(--on-acc); border-radius: 4px; border-color: var(--acc); }
body[data-concept="cinema"] .predict-form button:hover, body[data-concept="cinema"] .vs-pick button:hover { background: var(--acc); filter: brightness(1.08); }
body[data-concept="cinema"] .rv-acts .rv-del { background: transparent; color: var(--down); border-color: currentColor; }
body[data-concept="cinema"] .rv-score > b, body[data-concept="cinema"] .predict-mine b, body[data-concept="cinema"] .predict-result .big, body[data-concept="cinema"] .pp-range, body[data-concept="cinema"] .pf-range { font-stretch: 88%; letter-spacing: -.02em; }
body[data-concept="cinema"] .pp-av { background: var(--surface-3); color: var(--acc); }
body[data-concept="cinema"] .stars .st-full, body[data-concept="cinema"] .star-pick .sp i.st-full { background: var(--acc); }
body[data-concept="cinema"] .stars .st-half, body[data-concept="cinema"] .star-pick .sp i.st-half { background: linear-gradient(90deg, var(--acc) 50%, var(--line-2) 50%); }
body[data-concept="cinema"] .rv-bars .b i { background: var(--acc); }
body[data-concept="cinema"] .predict-bars .b i { background: var(--line-2); }
body[data-concept="cinema"] .pp-list li.hit { background: color-mix(in srgb, var(--up) 8%, var(--surface)); }
/* hype box */
body[data-concept="cinema"] .hype { border-radius: 6px; border-color: var(--line-2); background: var(--surface); }
body[data-concept="cinema"] .hype-b { border-radius: 4px; border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; font-size: .95rem; }
body[data-concept="cinema"] .hype-b b { font-family: var(--display); font-weight: 700; font-stretch: 90%; font-size: 1.05em; }
body[data-concept="cinema"] .hype-b.yes:hover:not(:disabled), body[data-concept="cinema"] .hype-b.yes[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
body[data-concept="cinema"] .hype-b.no:hover:not(:disabled), body[data-concept="cinema"] .hype-b.no[aria-pressed="true"] { background: var(--surface-3); border-color: var(--surface-3); color: var(--ink); }
body[data-concept="cinema"] .hype-bar { background: var(--line); border-radius: 2px; height: .4rem; } body[data-concept="cinema"] .hype-bar span { background: var(--acc); border-radius: 2px; }
@media (max-width: 720px) {
  body[data-concept="cinema"] .film-hero { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1.4rem; }
  body[data-concept="cinema"] .film-hero h1 { font-size: clamp(2rem, 9.5vw, 2.8rem); }
  body[data-concept="cinema"] .film-people, body[data-concept="cinema"] .synopsis, body[data-concept="cinema"] .film-hero .hype, body[data-concept="cinema"] .film-hero .adv-links { grid-column: 1 / -1; }
  body[data-concept="cinema"] .figures { grid-template-columns: 1fr 1fr; border-bottom: 0; }
  body[data-concept="cinema"] .fig { padding: .9rem .8rem; border-bottom: 1px solid var(--line); }
  body[data-concept="cinema"] .fig:nth-child(odd) { border-left: 0; padding-left: 0; }
  body[data-concept="cinema"] .fig b { font-size: 1.7rem; }
  body[data-concept="cinema"] th, body[data-concept="cinema"] td { padding: .5rem .55rem; font-size: .86rem; }
}
@media (max-width: 420px) { body[data-concept="cinema"] .film-hero { grid-template-columns: 6.5rem minmax(0, 1fr); } body[data-concept="cinema"] .film-hero .poster { width: 6.5rem; } }

/* ================================================================== BOX OFFICE · LISTS */
body[data-concept="cinema"] .chips-nav { gap: 0 1.3rem; margin-top: 1.2rem; border-bottom: 1px solid var(--line); }
body[data-concept="cinema"] .chips-nav a { border: 0; border-radius: 0; padding: .55rem 0 .5rem; margin-bottom: -1px; border-bottom: 2px solid transparent; font-size: .92rem; font-weight: 500; color: var(--muted); transition: color .15s ease, border-color .15s ease; }
body[data-concept="cinema"] .chips-nav a:hover { color: var(--ink); border-color: var(--line-2); }
body[data-concept="cinema"] .chips-nav a[aria-current="page"] { background: none; color: var(--ink); border-bottom-color: var(--acc); }
body[data-concept="cinema"] .chips-nav.small { margin-top: .4rem; gap: 0 1rem; border-bottom: 0; }
body[data-concept="cinema"] .chips-nav.small a { font-size: .82rem; padding: .4rem 0; }
body[data-concept="cinema"] .view-bar { margin-top: 1.2rem; }
body[data-concept="cinema"] .metric-switch, body[data-concept="cinema"] .os-tabs { border: 1px solid var(--line-2); border-radius: 4px; }
body[data-concept="cinema"] .metric-switch a, body[data-concept="cinema"] .os-tabs a { font-size: .84rem; color: var(--muted); }
body[data-concept="cinema"] .metric-switch a[aria-current="true"], body[data-concept="cinema"] .os-tabs a[aria-current="page"] { background: var(--acc); color: var(--on-acc); }
body[data-concept="cinema"] table.bo .rk { font-family: var(--display); font-weight: 600; font-stretch: 90%; font-size: 1rem; color: var(--faint); }
body[data-concept="cinema"] .fc span, body[data-concept="cinema"] a.pn, body[data-concept="cinema"] .top10 .t a, body[data-concept="cinema"] .board .t a, body[data-concept="cinema"] .adv-list .t a, body[data-concept="cinema"] .sr-films strong, body[data-concept="cinema"] .card .ct, body[data-concept="cinema"] .pf-pt b, body[data-concept="cinema"] .pf-rt b, body[data-concept="cinema"] .art-film b, body[data-concept="cinema"] .t10-card strong, body[data-concept="cinema"] .side-list b, body[data-concept="cinema"] .ab-other b, body[data-concept="cinema"] .hm-t { font-family: var(--display); font-weight: 650; font-stretch: 90%; text-transform: none; letter-spacing: -.01em; }
body[data-concept="cinema"] .fc span { font-size: 1rem; }
body[data-concept="cinema"] a.pn { font-size: .98rem; }
body[data-concept="cinema"] table.bo td.num:nth-child(5) { color: var(--ink); font-weight: 600; }
body[data-concept="cinema"] .top10 { border-top: 0; margin-top: 1.2rem; }
body[data-concept="cinema"] .top10 li { padding: .75rem 0; border-bottom-color: var(--line); }
body[data-concept="cinema"] .top10 .rk { font-size: 1.4rem; font-weight: 600; font-stretch: 88%; color: var(--faint); }
body[data-concept="cinema"] .top10 li:first-child .rk { color: var(--acc); }
body[data-concept="cinema"] .top10 .t a { font-size: 1.15rem; }
body[data-concept="cinema"] .top10 .sub { font-size: .82rem; }
body[data-concept="cinema"] .top10 b { font-family: var(--display); font-weight: 700; font-stretch: 88%; font-size: 1.45rem; letter-spacing: -.02em; color: var(--ink); }
body[data-concept="cinema"] .top10 li:first-child > b { color: var(--acc); }
body[data-concept="cinema"] main .share-btn { color: var(--text) !important; background: var(--surface) !important; border: 1px solid var(--line-2) !important; border-radius: 4px !important; font-family: var(--body) !important; }
body[data-concept="cinema"] main .share-btn:hover { color: var(--acc) !important; border-color: var(--acc) !important; }
body[data-concept="cinema"] .back-link { border-radius: 4px; }
body[data-concept="cinema"] .vs-pick input:not([type=checkbox]) { background: var(--surface); border-color: var(--line-2); border-radius: 4px; }
body[data-concept="cinema"] .vs-pick-vs { color: var(--acc); }
@media (max-width: 640px) {
  body[data-concept="cinema"] .chips-nav:not(.small) { margin-left: calc(-1 * 1.25rem); margin-right: calc(-1 * 1.25rem); padding: 0 1.25rem; gap: 0 1.1rem; }
  body[data-concept="cinema"] .chips-nav.small { display: flex; overflow-x: auto; scrollbar-width: none; border: 0; border-radius: 0; gap: 0 1rem; }
  body[data-concept="cinema"] .chips-nav.small::-webkit-scrollbar { display: none; }
  body[data-concept="cinema"] .chips-nav.small a { flex: 0 0 auto; text-align: left; padding: .4rem 0; border-bottom: 2px solid transparent; }
  body[data-concept="cinema"] .chips-nav.small a[aria-current="page"] { border-bottom-color: var(--acc); }
  body[data-concept="cinema"] table.bo tr { padding: .9rem .8rem; }
  body[data-concept="cinema"] table.bo td[data-l]::before { color: var(--faint); font-size: .64rem; }
}

/* ================================================================== HYPOMETER */
body[data-concept="cinema"] .hm-h span { color: var(--acc); }
body[data-concept="cinema"] .hm-lede { font-size: 1rem; }
body[data-concept="cinema"] .hm-stats { gap: 0; max-width: 42rem; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
body[data-concept="cinema"] .hm-stats div { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; padding: .9rem 1rem; }
body[data-concept="cinema"] .hm-stats div:first-child { border-left: 0; padding-left: 0; }
body[data-concept="cinema"] .hm-stats b { font-stretch: 88%; letter-spacing: -.02em; color: var(--ink); }
body[data-concept="cinema"] .hm-list { gap: 0; margin-top: 1rem; }
body[data-concept="cinema"] .hm-row { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: none; padding: 1.3rem 0; }
body[data-concept="cinema"] .hm-row.is-top { box-shadow: none; border: 0; border-radius: 6px; background: color-mix(in srgb, var(--acc) 7%, var(--surface)); padding: 1.3rem 1.2rem; margin-bottom: .6rem; }
body[data-concept="cinema"] .hm-rk { font-weight: 600; font-stretch: 88%; font-size: 1.5rem; color: var(--faint); }
body[data-concept="cinema"] .hm-row.is-top .hm-rk { color: var(--acc); }
body[data-concept="cinema"] .hm-poster .poster { border-radius: 3px; }
body[data-concept="cinema"] .hm-t { font-size: 1.35rem; line-height: 1.05; }
body[data-concept="cinema"] .hm-t a:hover { text-decoration: none; color: var(--acc); }
body[data-concept="cinema"] .hm-when { font-size: .86rem; }
body[data-concept="cinema"] .hm-gauge { height: .4rem; border-radius: 2px; background: var(--line); }
body[data-concept="cinema"] .hm-gauge span { background: var(--acc); border-radius: 2px; }
body[data-concept="cinema"] .hm-pct b { color: var(--acc); font-family: var(--display); font-weight: 700; font-stretch: 90%; font-size: 1.2rem; }
body[data-concept="cinema"] .hm-pred { border-left-color: var(--line); }
body[data-concept="cinema"] .hm-pred-n b { font-stretch: 88%; letter-spacing: -.02em; color: var(--ink); }
body[data-concept="cinema"] .hm-go { color: var(--acc); }
body[data-concept="cinema"] .hm-syn-t { font-size: .92rem; color: var(--muted); }
@media (max-width: 860px) { body[data-concept="cinema"] .hm-pred { border-top-color: var(--line); } }

/* ================================================================== ARTICLES */
body[data-concept="cinema"] .art-lead { gap: clamp(1rem, 2.5vw, 2rem); margin-top: 1.6rem; }
body[data-concept="cinema"] .art-lead-img, body[data-concept="cinema"] .art-card-img, body[data-concept="cinema"] .side-img { border-radius: 4px; background: var(--surface-2); }
body[data-concept="cinema"] .art-lead-t, body[data-concept="cinema"] .art-card { display: flex; flex-direction: column; }
body[data-concept="cinema"] .art-lead-t small, body[data-concept="cinema"] .art-card small, body[data-concept="cinema"] .side-list small { order: 3; color: var(--faint); font-size: .74rem; letter-spacing: 0; text-transform: none; margin-top: .3rem; }
body[data-concept="cinema"] .art-lead-t b { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; font-stretch: 86%; text-transform: none; letter-spacing: -.025em; line-height: .98; margin: 0 0 .5rem; }
body[data-concept="cinema"] .art-lead-t > span { font-size: .98rem; color: var(--muted); }
body[data-concept="cinema"] .art-card { gap: .35rem; }
body[data-concept="cinema"] .art-card b { font-size: 1.15rem; font-weight: 650; font-stretch: 90%; text-transform: none; letter-spacing: -.015em; line-height: 1.1; }
body[data-concept="cinema"] .art-card > span:last-child { font-size: .88rem; color: var(--muted); order: 2; }
body[data-concept="cinema"] .art-grid { gap: 1.6rem 1.3rem; margin-top: 1.8rem; }
body[data-concept="cinema"] .side-list small { order: 2; }
body[data-concept="cinema"] .side-list b { font-size: 1rem; margin-top: 0; }
body[data-concept="cinema"] .side-pop .n { color: var(--faint); font-weight: 600; font-stretch: 88%; }
body[data-concept="cinema"] .h3-head { border-bottom: 1px solid var(--line-2); }
body[data-concept="cinema"] .h3-head h1, body[data-concept="cinema"] .h3-head h2 { text-transform: none; letter-spacing: -.015em; font-stretch: 92%; font-size: 1.2rem; }
/* one article: the house "art-theme" re-pointed to the cinema */
html body[data-concept="cinema"].art-theme { background: var(--bg); }
html body[data-concept="cinema"].art-theme main { --a-bg: var(--bg); --a-text: var(--text); --a-muted: var(--muted); --a-rule: var(--line); --a-accent: var(--acc); --a-panel: var(--surface); --a-head: var(--display); --a-body: var(--body); --a-label: var(--body); --line-2: var(--line-2); --velvet-deep: var(--acc); --on-marquee: var(--on-acc); background: var(--bg); color: var(--text); }
body[data-concept="cinema"].art-theme main ::selection { color: var(--on-acc); }
body[data-concept="cinema"].art-theme .art-head { border-top: 0; padding-top: 0; margin-top: 1.4rem; display: flex; flex-direction: column; }
body[data-concept="cinema"].art-theme .art-head .kicker { order: 2; margin: 0 0 1rem; padding: 0; border: 0; font-family: var(--body); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .86rem; color: var(--muted); }
body[data-concept="cinema"].art-theme .art-head .kicker a { color: var(--acc); }
body[data-concept="cinema"].art-theme .art-title { order: 1; font-weight: 700; font-stretch: 86%; font-size: clamp(2.1rem, 4.6vw, 3.6rem); letter-spacing: -.028em; line-height: .96; margin: 0 0 .9rem; }
body[data-concept="cinema"].art-theme .art-dek { order: 3; font-family: var(--body); font-style: normal; font-weight: 400; font-size: 1.2rem; line-height: 1.45; color: var(--muted); margin: 0 0 1.1rem; }
body[data-concept="cinema"].art-theme .art-by { order: 4; font-family: var(--body); letter-spacing: 0; font-size: .84rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body[data-concept="cinema"].art-theme .art-share-top { order: 5; }
body[data-concept="cinema"].art-theme .art-cover img, body[data-concept="cinema"].art-theme .art-body figure:not(.embed) img { border-top: 0; border-radius: 4px; }
body[data-concept="cinema"].art-theme .art-cover figcaption, body[data-concept="cinema"].art-theme .art-body figcaption { font-family: var(--body); letter-spacing: 0; font-size: .8rem; }
body[data-concept="cinema"].art-theme .art-body { font-size: 1.12rem; line-height: 1.72; max-width: 68ch; }
body[data-concept="cinema"].art-theme .art-body .lede::first-letter { font-weight: 750; font-stretch: 85%; font-size: 4rem; }
body[data-concept="cinema"].art-theme .art-body h2 { font-weight: 700; font-stretch: 90%; letter-spacing: -.02em; border-top: 1px solid var(--line-2); font-size: 1.6rem; }
body[data-concept="cinema"].art-theme .art-body h3 { font-weight: 650; font-stretch: 92%; }
body[data-concept="cinema"].art-theme .art-body blockquote:not(.twitter-tweet):not(.instagram-media), body[data-concept="cinema"].art-theme .art-body .pull { font-family: var(--display); font-style: normal; font-weight: 600; font-stretch: 88%; font-size: 1.5rem; letter-spacing: -.015em; border-left: 1px solid var(--acc); padding-left: 1.2rem; }
body[data-concept="cinema"].art-theme .art-body th { font-family: var(--body); background: var(--surface-2); color: var(--ink); letter-spacing: .06em; font-size: .74rem; }
body[data-concept="cinema"].art-theme .art-body .note { border-left: 1px solid var(--acc); background: var(--surface); font-style: normal; }
body[data-concept="cinema"].art-theme .art-body .winner, body[data-concept="cinema"].art-theme .art-body .call strong { font-family: var(--body); letter-spacing: .06em; }
body[data-concept="cinema"].art-theme .art-body .winner { background: var(--acc); color: var(--on-acc); border-radius: 3px; }
body[data-concept="cinema"].art-theme .art-film { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
body[data-concept="cinema"].art-theme .art-film small { font-family: var(--body); letter-spacing: 0; text-transform: none; color: var(--muted); }
body[data-concept="cinema"].art-theme .art-film b { text-transform: uppercase; font-stretch: 84%; font-size: 1.5rem; letter-spacing: -.02em; }
body[data-concept="cinema"].art-theme .art-film img { border-radius: 3px; }
body[data-concept="cinema"].art-theme .art-tags span { border-radius: 3px; font-family: var(--body); letter-spacing: 0; }
body[data-concept="cinema"].art-theme .art-share a, body[data-concept="cinema"].art-theme .art-share button { border-radius: 4px; background: var(--surface); color: var(--ink); border-color: var(--line-2); }
body[data-concept="cinema"].art-theme .art-share-l { font-family: var(--body); font-weight: 600; letter-spacing: .06em; font-size: .78rem; text-transform: uppercase; }
body[data-concept="cinema"].art-theme .art-side .h3-head h2, body[data-concept="cinema"].art-theme .art-more .section-head h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; text-transform: none; font-stretch: 92%; }
body[data-concept="cinema"].art-theme .art-side .h3-head, body[data-concept="cinema"].art-theme .art-more .section-head { border-color: var(--line-2); }
body[data-concept="cinema"].art-theme .side-list b, body[data-concept="cinema"].art-theme .side-pop b, body[data-concept="cinema"].art-theme .art-card b { font-family: var(--display); font-weight: 650; font-stretch: 90%; letter-spacing: -.012em; }
body[data-concept="cinema"].art-theme .side-list small, body[data-concept="cinema"].art-theme .side-pop small, body[data-concept="cinema"].art-theme .art-card small { font-family: var(--body); letter-spacing: 0; color: var(--faint); }
body[data-concept="cinema"].art-theme .side-pop .n { font-family: var(--display); color: var(--faint); }
body[data-concept="cinema"].art-theme .art-card-img, body[data-concept="cinema"].art-theme .side-img { border-radius: 4px; }

/* ================================================================== SEARCH · PEOPLE · PROFILE */
body[data-concept="cinema"] .search-big { gap: .5rem; margin: 1rem 0 1.2rem; }
body[data-concept="cinema"] .search-big .btn { border: 0; }
body[data-concept="cinema"] .sr-group h2 { font-size: 1.2rem; text-transform: none; letter-spacing: -.015em; font-stretch: 92%; color: var(--muted); border-bottom: 1px solid var(--line-2); padding-bottom: .4rem; margin-bottom: .3rem; }
body[data-concept="cinema"] .sr-list li, body[data-concept="cinema"] .sr-films a { border-bottom-color: var(--line); }
body[data-concept="cinema"] .sr-list a { color: var(--ink); text-decoration-color: var(--line-2); } body[data-concept="cinema"] .sr-list a:hover { color: var(--acc); }
body[data-concept="cinema"] .sr-films strong { font-size: 1.1rem; }
body[data-concept="cinema"] .sr-films a:hover strong { color: var(--acc); }
body[data-concept="cinema"] .pp-card { border-radius: 6px; }
body[data-concept="cinema"] .pf-btn { border-radius: 4px; background: var(--acc); color: var(--on-acc); border-color: var(--acc); }
body[data-concept="cinema"] .pf-btn.ghost, body[data-concept="cinema"] .pf-acts .pf-btn + .pf-btn, body[data-concept="cinema"] .pf-btn.pf-follow.on { background: transparent; color: var(--acc); }
body[data-concept="cinema"] .pf-h2, body[data-concept="cinema"] .pf-id h1, body[data-concept="cinema"] .pf-cta h2 { text-transform: none; letter-spacing: -.02em; font-stretch: 88%; }
body[data-concept="cinema"] .pf-av { background: var(--surface-3); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--acc); }
body[data-concept="cinema"] .pf-av span { color: var(--acc); }
body[data-concept="cinema"] .pf-stats div, body[data-concept="cinema"] .pf-edit, body[data-concept="cinema"] .pf-cta, body[data-concept="cinema"] .pf-at { border-radius: 6px; }
body[data-concept="cinema"] .pf-tabs a[aria-current="page"] { border-bottom-color: var(--acc); }
body[data-concept="cinema"] .pf-flash { border-radius: 4px; }

/* ================================================================== ADVANCE BOOKING */
body[data-concept="cinema"] .adv-top, body[data-concept="cinema"] .ab-hero { background: var(--surface); color: var(--text); border-top: 0; border-bottom: 1px solid var(--line); }
body[data-concept="cinema"] .adv-top h1, body[data-concept="cinema"] .ab-hero h1, body[data-concept="cinema"] .adv-top .adv-lede b, body[data-concept="cinema"] .ab-hero-meta a, body[data-concept="cinema"] .adv-top-film .adv-meta a, body[data-concept="cinema"] .adv-top-film .adv-count b { color: var(--ink); }
body[data-concept="cinema"] .adv-top h1, body[data-concept="cinema"] .ab-hero h1 { font-weight: 750; font-stretch: 84%; letter-spacing: -.028em; }
body[data-concept="cinema"] .adv-eyebrow, body[data-concept="cinema"] .ab-kicker { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); font-size: .86rem; }
body[data-concept="cinema"] .adv-top .adv-lede, body[data-concept="cinema"] .ab-lede, body[data-concept="cinema"] .ab-hero-meta, body[data-concept="cinema"] .adv-top-film .adv-meta, body[data-concept="cinema"] .adv-back a, body[data-concept="cinema"] .ab-back a, body[data-concept="cinema"] .adv-howto ul, body[data-concept="cinema"] .adv-top-film .adv-count span { color: var(--muted); }
body[data-concept="cinema"] .adv-feature, body[data-concept="cinema"] .ab-ticket, body[data-concept="cinema"] .os-card, body[data-concept="cinema"] .ab-other, body[data-concept="cinema"] #india .ab-figs-plain, body[data-concept="cinema"] .adv-howto { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
body[data-concept="cinema"] .adv-howto { border-top: 1px solid var(--line); }
body[data-concept="cinema"] .os-card::before { display: none; }
body[data-concept="cinema"] .os-card.is-lead { background: color-mix(in srgb, var(--acc) 9%, var(--surface)); color: var(--text); border-color: var(--line-2); }
body[data-concept="cinema"] .os-card.is-lead h3, body[data-concept="cinema"] .os-card.is-lead .os-facts dd, body[data-concept="cinema"] .os-share b { color: var(--ink); }
body[data-concept="cinema"] .os-card.is-lead header span, body[data-concept="cinema"] .os-card.is-lead .os-v, body[data-concept="cinema"] .os-card.is-lead .os-spark { color: var(--acc); }
body[data-concept="cinema"] .os-card.is-lead .os-gain { color: var(--up); } body[data-concept="cinema"] .os-card.is-lead .os-gain span, body[data-concept="cinema"] .os-card.is-lead .os-when, body[data-concept="cinema"] .os-card.is-lead .os-facts dt, body[data-concept="cinema"] .os-share ul { color: var(--muted); }
body[data-concept="cinema"] .os-card.is-lead .os-facts { border-top-color: var(--line); } body[data-concept="cinema"] .os-share-bar { background: var(--line); }
body[data-concept="cinema"] .os-v, body[data-concept="cinema"] .adv-stat b, body[data-concept="cinema"] .adv-count b, body[data-concept="cinema"] .adv-stub b, body[data-concept="cinema"] .adv-row-nums b, body[data-concept="cinema"] .ab-fig b, body[data-concept="cinema"] .ab-stub b, body[data-concept="cinema"] .ab-hero-nums b { font-family: var(--display); font-weight: 700; font-stretch: 88%; letter-spacing: -.02em; }
body[data-concept="cinema"] .ab-stub { background: color-mix(in srgb, var(--acc) 12%, var(--surface)); color: var(--text); border-left: 1px dashed var(--line-2); border-radius: 0 6px 6px 0; }
body[data-concept="cinema"] .ab-stub b { color: var(--acc); } body[data-concept="cinema"] .ab-stub span, body[data-concept="cinema"] .ab-stub em { color: var(--muted); } body[data-concept="cinema"] .ab-stub em { border-top-color: var(--line); }
body[data-concept="cinema"] .ab-stub-hero { border: 1px dashed var(--line-2); background: transparent; }
body[data-concept="cinema"] .ab-fig.is-lead b, body[data-concept="cinema"] .ab-bars .v, body[data-concept="cinema"] .ab-countries .v, body[data-concept="cinema"] .adv-stat.is-big b { color: var(--acc); }
body[data-concept="cinema"] .ab-bars .bar, body[data-concept="cinema"] .adv-bar, body[data-concept="cinema"] .seatmap i, body[data-concept="cinema"] .adv-chart-col i { background: var(--line); }
body[data-concept="cinema"] .ab-bars .bar i, body[data-concept="cinema"] .ab-bars li:first-child .bar i, body[data-concept="cinema"] .adv-bar i, body[data-concept="cinema"] .seatmap i.b, body[data-concept="cinema"] .adv-chart-col.is-last i { background: var(--acc); }
body[data-concept="cinema"] .seatmap .screen { border-top-color: var(--line-2); }
body[data-concept="cinema"] .ab-hero-film .ab-hero-bg::after { background: linear-gradient(90deg, rgb(var(--scrim) / .92) 0%, rgb(var(--scrim) / .65) 55%, rgb(var(--scrim) / .85) 100%); }
body[data-concept="cinema"] .ab-hero-vid::after { background: linear-gradient(to top, rgb(var(--scrim) / .95) 0%, rgb(var(--scrim) / .55) 40%, rgb(var(--scrim) / .2) 75%, rgb(var(--scrim) / .35) 100%), linear-gradient(90deg, rgb(var(--scrim) / .8) 0%, rgb(var(--scrim) / .3) 60%, rgb(var(--scrim) / .55) 100%); }
body[data-concept="cinema"] .ab-hero-film.has-video .ab-hero-nums div, body[data-concept="cinema"] .ab-hero-nums div { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: var(--line-2); border-radius: 6px; }
body[data-concept="cinema"] .ab-hero-nums div.is-lead { background: color-mix(in srgb, var(--acc) 14%, var(--surface)); border-color: var(--acc); }
body[data-concept="cinema"] .ab-hero-nums b, body[data-concept="cinema"] .ab-hero-film h1 { color: var(--ink); } body[data-concept="cinema"] .ab-hero-nums .is-lead b { color: var(--acc); } body[data-concept="cinema"] .ab-hero-nums span { color: var(--muted); }
body[data-concept="cinema"] .ab-chips span, body[data-concept="cinema"] .ab-chips a { border-radius: 3px; border-color: var(--line-2); color: var(--text); background: transparent; } body[data-concept="cinema"] .ab-chips a { border-color: var(--acc); color: var(--acc); }
body[data-concept="cinema"] .ab-mtabs { background: var(--surface); border-color: var(--line-2); border-radius: 4px; } body[data-concept="cinema"] .ab-mtabs a { color: var(--text); border-radius: 3px; } body[data-concept="cinema"] .ab-mtabs a[aria-current="page"] { background: var(--acc); color: var(--on-acc); }
body[data-concept="cinema"] .ab-hero h1 .ab-mkt { color: var(--acc); }
body[data-concept="cinema"] .ab-days a { border-radius: 3px; } body[data-concept="cinema"] .ab-tk-mkt { color: var(--muted); }
body[data-concept="cinema"] .ab-noposter { background: var(--surface-2) !important; border-color: var(--line-2); box-shadow: none; } body[data-concept="cinema"] .ab-noposter span { color: var(--ink); border-left-color: var(--acc); }
body[data-concept="cinema"] .adv-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
body[data-concept="cinema"] .adv-count { border-radius: 4px; }
body[data-concept="cinema"] .adv-feature-poster .poster, body[data-concept="cinema"] .adv-film-poster .poster, body[data-concept="cinema"] .ab-hero-poster .poster, body[data-concept="cinema"] .ab-tk-poster .poster { border-radius: 4px; }

/* ================================================================== FOOTER · CTA · DOCK */
body[data-concept="cinema"] .cta { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--text); margin-top: clamp(2.6rem, 5vw, 4rem); }
body[data-concept="cinema"] .cta p { color: var(--text); font-size: 1rem; }
body[data-concept="cinema"] .cta .btn { background: var(--acc); color: var(--on-acc); } body[data-concept="cinema"] .cta .btn:hover { background: var(--acc); }
body[data-concept="cinema"] .site-foot { color: var(--muted); font-size: .82rem; margin: 2rem 0 5rem; }
body[data-concept="cinema"] .site-foot a { color: var(--text); text-decoration-color: var(--line-2); } body[data-concept="cinema"] .site-foot a:hover { color: var(--acc); }
body[data-concept="cinema"] .soc a { color: var(--muted); border-color: var(--line-2); }
body[data-concept="cinema"] .soc-dock a { background: var(--surface); border: 1px solid var(--line-2); color: var(--text); box-shadow: var(--shadow); }
body[data-concept="cinema"] .soc-dock a:hover { color: var(--acc); border-color: var(--acc); }
body[data-concept="cinema"] .fd-rail-lbl { color: var(--faint); }

/* ================================================================== ORIGINAL HOME FALLBACK (if the template is missing) */
body[data-concept="cinema"] .h3-next, body[data-concept="cinema"] .t10-card { background: var(--surface); border-color: var(--line); border-radius: 6px; box-shadow: none; }
body[data-concept="cinema"] .t10-k { color: var(--muted); }

/* ================================================================== REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  body[data-concept="cinema"] .cn-feature, body[data-concept="cinema"] .cn-tile { animation: none; }
  body[data-concept="cinema"] .cn-slide, body[data-concept="cinema"] .cn-slide.on, body[data-concept="cinema"] .cn-vid, body[data-concept="cinema"] .cn-cover, body[data-concept="cinema"] .cn-tile-poster, body[data-concept="cinema"] .cn-artc-img img, body[data-concept="cinema"] .cn-soon-c .poster { transition: none; }
  body[data-concept="cinema"] .live-dot { animation: none; }
}

/* ================================================================== FINE-TUNING (desktop board, phones) */
/* Today's board: three films to a row on wide screens, two on tablets, so titles and figures never squeeze */
body[data-concept="cinema"] .cn-board { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1rem, 2.4vw, 2.4rem); }
body[data-concept="cinema"] .cn-board li, body[data-concept="cinema"] .cn-board li:first-child { border-left: 0; border-bottom: 1px solid var(--line); padding: .85rem 0; }
@media (max-width: 1100px) { body[data-concept="cinema"] .cn-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  /* phones: the board is a plain list, every title in full */
  body[data-concept="cinema"] .cn-board { display: block; overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
  body[data-concept="cinema"] .cn-board li { display: grid; grid-template-columns: 1.3rem 2.75rem minmax(0, 1fr) auto; gap: .65rem; margin: 0; padding: .75rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  body[data-concept="cinema"] .cn-board .poster { width: 2.75rem; }
  body[data-concept="cinema"] .cn-b-t > a { white-space: normal; font-size: 1.02rem; line-height: 1.12; }
  body[data-concept="cinema"] .cn-b-amt b { font-size: 1.35rem; }
  body[data-concept="cinema"] .cn-strip-head .cn-more { margin-left: 0; }
  /* the feature: no trailer and no poster yet, so don't hold a tall empty frame */
  body[data-concept="cinema"] .cn-feature:not(:has(.cn-vid)):not(:has(.cn-standee)) { aspect-ratio: auto; min-height: 19rem; }
  /* film page: the day-wise table fits a phone without sideways scrolling */
  body[data-concept="cinema"] .table-wrap th, body[data-concept="cinema"] .table-wrap td { padding: .5rem .4rem; font-size: .82rem; }
  body[data-concept="cinema"] .table-wrap th { font-size: .62rem; letter-spacing: .04em; }
  body[data-concept="cinema"] .table-wrap td:first-child, body[data-concept="cinema"] .table-wrap th:first-child { padding-left: .7rem; }
  /* the floating X / email buttons and the views pill: smaller, and the page ends clear of them */
  body[data-concept="cinema"] .soc-dock { right: 10px; gap: .4rem; }
  body[data-concept="cinema"] .soc-dock a { width: 2.4rem; height: 2.4rem; }
  body[data-concept="cinema"] .soc-dock svg { width: 1rem; height: 1rem; }
  body[data-concept="cinema"] .site-foot { margin-bottom: 7rem; }
  /* comfortable taps */
  body[data-concept="cinema"] .chips-nav a, body[data-concept="cinema"] .cn-more { min-height: 2.5rem; display: inline-flex; align-items: center; }
}
/* the hero tiles are always "screens": dark even in light mode, so a tile without a picture never turns grey */
body[data-concept="cinema"] .cn-feature, body[data-concept="cinema"] .cn-tile { background: #1B1318; }

/* ---------- brand: FILMS in white, DISCOURSE in gold (as before), on a header that stays dark in both modes */
body[data-concept="cinema"] .brand { color: #FFFFFF; }
body[data-concept="cinema"] .brand span { color: #D4B06A; }
html[data-theme="light"] body[data-concept="cinema"] .site-head {
  --bg: #120C10; --surface: #1B1318; --surface-2: #261B21; --ink: #F6EEE9; --text: #EDE3DF; --muted: #B3A3AA;
  --line: rgba(246,236,232,.11); --line-2: rgba(246,236,232,.22); --acc: var(--acc-d, hsl(41 86% 61%)); --on-acc: #140C10;
  background: color-mix(in srgb, #120C10 90%, transparent); color: var(--text);
}
html[data-theme="light"] body[data-concept="cinema"] .site-search { --surface: #1B1318; --text: #EDE3DF; --muted: #B3A3AA; --line-2: rgba(246,236,232,.22); }

/* ---------- dark bands (advance booking hero over a trailer or poster): always lit for a dark screen, in both modes */
body[data-concept="cinema"] .on-dark, html[data-theme="light"] body[data-concept="cinema"] .on-dark {
  --scrim: 18 12 16; --faint: #9A8A92; --acc: var(--acc-d, hsl(41 86% 61%)); --on-acc: #140C10;
  --velvet: var(--acc); --gold: var(--acc); --marquee: var(--acc); color: var(--text);
}
body[data-concept="cinema"] .ab-hero-film .ab-kicker { color: var(--acc); font-weight: 700; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
body[data-concept="cinema"] .ab-hero-film h1 .ab-mkt { text-shadow: 0 1px 14px rgba(0,0,0,.55); }
body[data-concept="cinema"] .ab-hero-film .ab-chips span, body[data-concept="cinema"] .ab-hero-film .ab-chips a { background: rgba(18,12,16,.62); color: #F6EEE9; border-color: rgba(246,238,233,.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-concept="cinema"] .ab-hero-film .ab-chips a { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 70%, transparent); }
body[data-concept="cinema"] .ab-hero-film .share-btn { background: rgba(18,12,16,.62) !important; color: #F6EEE9 !important; border-color: rgba(246,238,233,.35) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-concept="cinema"] .ab-hero-film .share-btn:hover { border-color: var(--acc) !important; color: var(--acc) !important; }
body[data-concept="cinema"] .ab-hero-film .ab-stub-hero { background: rgba(18,12,16,.62); border-color: rgba(246,238,233,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body[data-concept="cinema"] .ab-hero-film .ab-stub-hero span, body[data-concept="cinema"] .ab-hero-film .ab-stub-hero em { color: #D9CDD2; }
body[data-concept="cinema"] .ab-hero-film .ab-hero-nums div { background: rgba(18,12,16,.66); }
body[data-concept="cinema"] .ab-hero-film .ab-hero-nums span { color: #D9CDD2; }

/* ---------- home: the No. 1 tile and the article tile turn through their films / articles */
body[data-concept="cinema"] .cn-rot { padding: 0; display: block; }
body[data-concept="cinema"] .cn-rot .cn-rs { position: absolute; inset: 0; display: flex; gap: clamp(.8rem, 1.3vw, 1.2rem); padding: clamp(.8rem, 1.2vw, 1.1rem); color: var(--ink); text-decoration: none; isolation: isolate; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
body[data-concept="cinema"] .cn-rot .cn-rs.on { opacity: 1; visibility: visible; transition: opacity .8s ease; }
body[data-concept="cinema"] .cn-art.cn-rot .cn-rs { padding: 0; }
body[data-concept="cinema"] .cn-rot .cn-rs:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 70%, transparent); }
body[data-concept="cinema"] .cn-rot:hover { box-shadow: none; }
body[data-concept="cinema"] .cn-art.cn-rot .cn-rs:hover .cn-cover { transform: scale(1.03); }
body[data-concept="cinema"] .cn-rdots { position: absolute; z-index: 3; right: .8rem; bottom: .7rem; display: flex; gap: .3rem; pointer-events: none; }
body[data-concept="cinema"] .cn-rdots i { width: .4rem; height: .4rem; border-radius: 99px; background: rgba(246,238,233,.4); transition: width .3s var(--ease), background .3s ease; }
body[data-concept="cinema"] .cn-rdots i.on { width: 1.1rem; background: #F6EEE9; }
body[data-concept="cinema"] .cn-wide.cn-rot .cn-rdots { top: .8rem; bottom: auto; }
@media (max-width: 1100px) { body[data-concept="cinema"] .cn-wide.cn-rot { min-height: 12rem; } }
@media (max-width: 760px) { body[data-concept="cinema"] .cn-wide.cn-rot { min-height: 11.5rem; } }
@media (prefers-reduced-motion: reduce) { body[data-concept="cinema"] .cn-rot .cn-rs { transition: none; } }

/* ---------- home feature on phones: the trailer plays as a full-width 16:9 screen at the top; the poster sits
   below it on the left, overlapping the screen's edge, with the title and figures beside it. No empty black frame. */
@media (max-width: 760px) {
  body[data-concept="cinema"] .cn-feature, body[data-concept="cinema"] .cn-feature:not(:has(.cn-vid)):not(:has(.cn-standee)) { aspect-ratio: auto; min-height: 0; max-height: none; }
  body[data-concept="cinema"] .cn-slides { position: relative; display: grid; }
  body[data-concept="cinema"] .cn-slide { position: relative; inset: auto; grid-area: 1 / 1; display: grid; grid-template-columns: 31% minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .9rem; align-items: start; padding: 0 0 1rem; }
  body[data-concept="cinema"] .cn-vid { position: relative; inset: auto; grid-column: 1 / -1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 16 / 9; z-index: 0; opacity: 1; background: #000; }
  body[data-concept="cinema"] .cn-feature .cn-scrim { background: linear-gradient(to top, rgb(18 12 16) 0%, rgb(18 12 16 / .96) 52%, rgb(18 12 16 / .15) 72%, rgb(18 12 16 / .45) 100%); z-index: 0; }
  body[data-concept="cinema"] .cn-standee { position: relative; grid-column: 1; grid-row: 2; width: auto; right: auto; top: auto; bottom: auto; margin: -2.6rem 0 0 1rem; transform: none; z-index: 2; border-radius: 4px; }
  body[data-concept="cinema"] .cn-copy { position: relative; grid-column: 2; grid-row: 2; left: auto; right: auto; bottom: auto; width: auto; padding: .85rem 1rem 0 0; z-index: 2; }
  body[data-concept="cinema"] .cn-slide:not(:has(.cn-standee)) .cn-copy { grid-column: 1 / -1; padding-left: 1rem; }
  body[data-concept="cinema"] .cn-title { font-size: clamp(1.55rem, 7.4vw, 2.2rem); line-height: .95; }
  body[data-concept="cinema"] .cn-credits { margin-top: .5rem; font-size: .8rem; }
  body[data-concept="cinema"] .cn-marquee { margin-top: .6rem; gap: .2rem 1rem; font-size: .8rem; }
  body[data-concept="cinema"] .cn-m b { font-size: 1.55rem; }
  body[data-concept="cinema"] .cn-acts { margin-top: .8rem; gap: .5rem .9rem; }
  body[data-concept="cinema"] .cn-btn { padding: .6rem 1rem; font-size: .88rem; }
  body[data-concept="cinema"] .cn-link { font-size: .86rem; }
  /* no trailer: a short band of the poster's colour stands in for the screen */
  body[data-concept="cinema"] .cn-slide:not(:has(.cn-vid))::before { content: ""; grid-column: 1 / -1; grid-row: 1; height: 4.2rem; }
  body[data-concept="cinema"] .cn-slide:not(:has(.cn-vid)) .cn-standee { margin-top: -1.6rem; }
  /* credit line and controls sit inside the screen, small */
  body[data-concept="cinema"] .cn-credit { top: .55rem; left: .7rem; max-width: calc(100% - 8.5rem); font-size: .58rem; line-height: 1.3; }
  body[data-concept="cinema"] .cn-ctl { top: .45rem; right: .45rem; padding: .15rem; }
  body[data-concept="cinema"] .cn-ctl > button { width: 1.8rem; height: 1.8rem; }
}

/* ---------- phones, take two: a widescreen trailer band (most trailers are scope films with black bars baked in, so a
   2.35:1 frame crops those away), then a poster and title side by side in proportion, then the figures and buttons across */
@media (max-width: 760px) {
  body[data-concept="cinema"] .cn-slide { grid-template-columns: 6.6rem minmax(0, 1fr); grid-template-rows: auto auto auto auto auto; column-gap: .95rem; padding-bottom: 1.1rem; }
  body[data-concept="cinema"] .cn-vid { aspect-ratio: 2.35 / 1; object-fit: cover; }
  body[data-concept="cinema"] .cn-copy { display: contents; }
  body[data-concept="cinema"] .cn-standee { grid-column: 1; grid-row: 2 / 4; width: 100%; margin: -1.9rem 0 0 1rem; align-self: start; }
  body[data-concept="cinema"] .cn-slide:not(:has(.cn-vid)) .cn-standee { margin-top: -1.4rem; }
  body[data-concept="cinema"] .cn-title { grid-column: 2; grid-row: 2; align-self: end; position: relative; z-index: 2; margin: .9rem 1rem 0 0; font-size: clamp(1.6rem, 8vw, 2.3rem); }
  body[data-concept="cinema"] .cn-credits { grid-column: 2; grid-row: 3; align-self: start; position: relative; z-index: 2; margin: .45rem 1rem 0 0; font-size: .78rem; line-height: 1.35; }
  body[data-concept="cinema"] .cn-credits span + span::before { margin: 0 .4em; }
  body[data-concept="cinema"] .cn-marquee { grid-column: 1 / -1; grid-row: 4; position: relative; z-index: 2; margin: 1rem 1rem 0; padding-top: .85rem; border-top: 1px solid rgba(246,238,233,.12); gap: .3rem 1.4rem; }
  body[data-concept="cinema"] .cn-marquee:empty { display: none; }
  body[data-concept="cinema"] .cn-acts { grid-column: 1 / -1; grid-row: 5; position: relative; z-index: 2; margin: .9rem 1rem 0; flex-wrap: nowrap; justify-content: space-between; }
  body[data-concept="cinema"] .cn-slide:not(:has(.cn-standee)) .cn-title, body[data-concept="cinema"] .cn-slide:not(:has(.cn-standee)) .cn-credits { grid-column: 1 / -1; margin-left: 1rem; }
  body[data-concept="cinema"] .cn-feature .cn-scrim { background: linear-gradient(to bottom, rgb(18 12 16 / .35) 0%, transparent 18%), linear-gradient(to top, rgb(18 12 16) 0%, rgb(18 12 16 / .97) 62%, rgb(18 12 16 / .2) 78%); }
  body[data-concept="cinema"] .cn-credit { top: .4rem; font-size: .56rem; max-width: calc(100% - 7.5rem); text-shadow: 0 1px 6px rgba(0,0,0,.8); }
  body[data-concept="cinema"] .cn-ctl { top: .35rem; right: .35rem; }
}
@media (max-width: 360px) { body[data-concept="cinema"] .cn-slide { grid-template-columns: 5.6rem minmax(0, 1fr); } body[data-concept="cinema"] .cn-acts { flex-wrap: wrap; } }
@media (max-width: 760px) {
  body[data-concept="cinema"] .cn-slide { grid-template-columns: 7.6rem minmax(0, 1fr); }
  body[data-concept="cinema"] .cn-standee { width: calc(100% - 1rem); }
}
@media (max-width: 360px) { body[data-concept="cinema"] .cn-slide { grid-template-columns: 6.6rem minmax(0, 1fr); } }

/* ---------- articles: a headline or words given a very dark colour (picked for the old white page) stay readable on the
   dark page, and very light ones on the light page */
html[data-theme="dark"] body[data-concept="cinema"] .art-title[data-tc="dark"], html[data-theme="dark"] body[data-concept="cinema"] .art-body:not(.art-paper) [data-tc="dark"] { color: var(--ink) !important; }
html[data-theme="light"] body[data-concept="cinema"] .art-title[data-tc="light"], html[data-theme="light"] body[data-concept="cinema"] .art-body:not(.art-paper) [data-tc="light"] { color: var(--ink) !important; }
/* full-page code articles and articles with their own CSS/HTML were written for the white page: they keep a white sheet */
body[data-concept="cinema"] .art-page-frame { background: #FFFFFF; border-radius: 6px; color-scheme: light; }
body[data-concept="cinema"] .art-body.art-paper { --ink: #1A1A1A; --text: #1A1A1A; --muted: #6B6B6B; --faint: #8A8A8A; --line: #E2E2E2; --line-2: #D0D0D0; --acc: #C8102E; --surface: #F6F4F0; --surface-2: #EEEAE3; --a-text: #1A1A1A; --a-muted: #6B6B6B; --a-rule: #E2E2E2; --a-accent: #C8102E; --a-panel: #F6F4F0; color-scheme: light; }
/* low priority, so the article's own CSS (its own background or colours) still wins */
:where(body[data-concept="cinema"] .art-body.art-paper) { background: #FFFFFF; color: #1A1A1A; padding: clamp(1rem, 3vw, 2rem); border-radius: 6px; }