/* ==========================================================================
   New Wave Films — 2026 design refresh
   ========================================================================== */

:root {
  /* Brand blue sampled from the New Wave Films logo */
  --brand: #30549e;
  --brand-mid: #4a71c4;
  --brand-light: #8aa9e8;

  --bg: #0b0e14;
  --bg-raised: #121724;
  --bg-card: #161c2b;
  --line: #26304a;
  --text: #f3f4f8;
  --text-dim: #a3abc2;

  /* accent = brand blue; iris colours used only as small highlights */
  --accent: var(--brand);
  --accent-soft: var(--brand-light);
  --iris: linear-gradient(90deg, var(--c-cinema), var(--c-vod), var(--c-news), var(--c-press), var(--c-contact));

  /* Per-section colours, taken from the pixel iris in the logo.
     Each is tuned to stay legible on the dark background. */
  --c-cinema:  #ff5f7a;   /* red      */
  --c-vod:     #f5a93c;   /* amber    */
  --c-news:    #57c98a;   /* green    */
  --c-press:   #b478e8;   /* violet   */
  --c-contact: #5b9bf0;   /* blue     */

  /* Default section colour; pages override via [data-section] below. */
  --section: var(--brand-light);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", -apple-system, "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Author `display` rules (e.g. .film-card { display: flex }) beat the UA
   stylesheet's [hidden] rule, so filtered-out cards would stay visible. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Header ------------------------------------------------------------- */

/* Each page declares its section; everything accent-coloured follows suit. */
body[data-section="cinema"]  { --section: var(--c-cinema); }
body[data-section="vod"]     { --section: var(--c-vod); }
body[data-section="news"]    { --section: var(--c-news); }
body[data-section="press"]   { --section: var(--c-press); }
body[data-section="contact"] { --section: var(--c-contact); }

/* A single page (the homepage) can carry several sections, each in its own colour. */
.section[data-sect="cinema"]  { --section: var(--c-cinema); }
.section[data-sect="vod"]     { --section: var(--c-vod); }
.section[data-sect="news"]    { --section: var(--c-news); }
.section[data-sect="press"]   { --section: var(--c-press); }
.section[data-sect="contact"] { --section: var(--c-contact); }

/* Section headings pick up a short coloured rule above them. */
.section-head h2::before {
  content: "";
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background: var(--section);
  margin-bottom: 14px;
}

/* Inline links inside body copy underline in the section colour on hover. */
.prose a, .contact-card a {
  color: var(--text);
  border-bottom: 1px solid var(--line);
  transition: border-color 0.2s, color 0.2s;
}

.prose a:hover, .contact-card a:hover {
  color: var(--section);
  border-bottom-color: var(--section);
}

/* Nav items keep their own colour on hover wherever you are in the site,
   so the palette reads as a map rather than a per-page theme. */
.main-nav a[data-nav="cinema"]:hover,  .main-nav a[data-nav="cinema"].active  { color: var(--c-cinema); }
.main-nav a[data-nav="vod"]:hover,     .main-nav a[data-nav="vod"].active     { color: var(--c-vod); }
.main-nav a[data-nav="news"]:hover,    .main-nav a[data-nav="news"].active    { color: var(--c-news); }
.main-nav a[data-nav="press"]:hover,   .main-nav a[data-nav="press"].active   { color: var(--c-press); }
.main-nav a[data-nav="contact"]:hover, .main-nav a[data-nav="contact"].active { color: var(--c-contact); }

.main-nav a[data-nav="cinema"]:hover,  .main-nav a[data-nav="cinema"].active  { border-bottom-color: var(--c-cinema); }
.main-nav a[data-nav="vod"]:hover,     .main-nav a[data-nav="vod"].active     { border-bottom-color: var(--c-vod); }
.main-nav a[data-nav="news"]:hover,    .main-nav a[data-nav="news"].active    { border-bottom-color: var(--c-news); }
.main-nav a[data-nav="press"]:hover,   .main-nav a[data-nav="press"].active   { border-bottom-color: var(--c-press); }
.main-nav a[data-nav="contact"]:hover, .main-nav a[data-nav="contact"].active { border-bottom-color: var(--c-contact); }

/* Thin iris-coloured rule, echoing the pixel iris in the logo.
   It stays pinned above the header so the brand colours are always on screen;
   the header and sub-nav stack beneath it. */
.iris-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: 4px;
  background: var(--iris);
}

.site-header {
  position: sticky;
  top: 4px;          /* clears the iris strip pinned above it */
  z-index: 50;
  background: rgba(13, 15, 18, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 68px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
}

.brand em {
  font-style: italic;
  color: var(--brand-light);
}

.main-nav {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.main-nav a {
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;      /* a wrapped item would break the fixed-height bar */
  color: var(--text-dim);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}

.main-nav a:hover { color: var(--text); }

.main-nav a.active {
  color: var(--text);
  border-bottom-color: var(--brand-light);
}

.nav-toggle { display: none; }

/* --- Hero --------------------------------------------------------------- */

.hero {
  position: relative;
  padding: 96px 0 80px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}

.hero .hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(65%) brightness(0.38);
  transform: scale(1.05);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,15,18,0.55) 0%, rgba(13,15,18,0.35) 45%, var(--bg) 100%);
}

.hero .wrap { position: relative; z-index: 1; }

.kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--section);
  margin-bottom: 18px;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.4rem, 5.4vw, 4.2rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 15ch;
}

.hero p {
  margin-top: 22px;
  max-width: 52ch;
  color: var(--text-dim);
  font-size: 1.06rem;
}

.hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 12px 26px;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.15s, background 0.2s, color 0.2s;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-mid); }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,0.04);
}
.btn-ghost:hover { border-color: var(--text-dim); }

/* --- Sections ----------------------------------------------------------- */

.section { padding: 76px 0; }

.section + .section { border-top: 1px solid var(--line); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.section-head h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: -0.01em;
}

.section-head .more {
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--section);
  white-space: nowrap;
}

.section-head .more:hover { color: var(--text); }

/* --- Film cards ---------------------------------------------------------- */

.film-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
}

.film-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
}

.film-card:hover {
  transform: translateY(-4px);
  border-color: #3d4450;
}

.film-card .art {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-raised);
}

.film-card .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.film-card:hover .art img { transform: scale(1.04); }

.film-card .art.packshot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.film-card .art.packshot img {
  width: auto;
  height: 100%;
  object-fit: contain;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}

.film-card .body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; }

.release-tag {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--section);
  background: color-mix(in srgb, var(--section) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--section) 45%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}

.film-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.45rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

a.film-card:hover h3 { color: var(--section); }

.film-card .credit {
  display: block;
  font-size: 0.84rem;
  color: var(--text-dim);
  font-style: italic;
}

.film-card p { font-size: 0.93rem; color: var(--text-dim); }

.film-card .body .more-link {
  display: block;
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.film-card .more-link span { color: var(--section); transition: margin 0.2s; }
a.film-card:hover .more-link span { margin-left: 6px; }

/* --- Catalogue grid + search --------------------------------------------- */

/* Column counts that divide the page sizes evenly, so the last row is never
   left ragged at the default of 10 per page. */
.film-grid.compact {
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 1040px) { .film-grid.compact { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 860px)  { .film-grid.compact { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .film-grid.compact { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px)  { .film-grid.compact { grid-template-columns: 1fr; } }

.film-grid.compact .film-card .body { padding: 16px 16px 20px; gap: 7px; }
.film-grid.compact .film-card h3 { font-size: 1.08rem; }
.film-grid.compact .release-tag { font-size: 0.65rem; padding: 3px 8px; }
.film-grid.compact .film-card .credit { font-size: 0.78rem; }
.film-grid.compact .film-card .more-link { font-size: 0.74rem; }

/* Filter bar: pill search + custom dropdowns (no native selects, so the
   open panel can carry the brand colours too). */

.filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.filter-search {
  position: relative;
  flex: 1 1 300px;
  max-width: 400px;
}

.filter-search .filter-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--text-dim);
  pointer-events: none;
  transition: color 0.2s;
}

.filter-search:focus-within .filter-icon { color: var(--section); }

.filter-search input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 44px 12px 46px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.94rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-search input::placeholder { color: var(--text-dim); }
.filter-search input::-webkit-search-cancel-button { display: none; }

.filter-search input:hover { border-color: var(--text-dim); }

.filter-search input:focus {
  outline: none;
  border-color: var(--section);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--section) 22%, transparent);
}

.filter-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--section) 18%, transparent);
  color: var(--section);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-clear:hover { background: color-mix(in srgb, var(--section) 34%, transparent); }

/* --- Custom dropdown ------------------------------------------------------ */

.dropdown { position: relative; }

.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 12px 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
}

.dropdown-toggle:hover { border-color: var(--text-dim); }

.dropdown-toggle .chev {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--text-dim);
  transition: transform 0.2s, color 0.2s;
}

.dropdown.open .dropdown-toggle,
.dropdown.active .dropdown-toggle {
  border-color: var(--section);
  color: var(--section);
}

.dropdown.open .dropdown-toggle .chev,
.dropdown.active .dropdown-toggle .chev { color: var(--section); }

.dropdown.open .dropdown-toggle .chev { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--section);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.dropdown-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 9px 12px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.dropdown-menu button:hover {
  background: color-mix(in srgb, var(--section) 16%, transparent);
  color: var(--text);
}

.dropdown-menu button[aria-selected="true"] {
  color: var(--section);
  font-weight: 600;
}

.dropdown-menu button[aria-selected="true"]::after {
  content: "✓";
  font-size: 0.8rem;
}

/* Scrollbar inside the long director list */
.dropdown-menu::-webkit-scrollbar { width: 10px; }
.dropdown-menu::-webkit-scrollbar-track { background: transparent; }
.dropdown-menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--section) 45%, transparent);
  border-radius: 99px;
  border: 3px solid var(--bg-raised);
}

/* --- Active filter pills --------------------------------------------------- */

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.filter-pills:empty { margin-bottom: 0; }

.filter-pills button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--section) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--section) 45%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
  color: var(--section);
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s;
}

.filter-pills button:hover { background: color-mix(in srgb, var(--section) 28%, transparent); }
.filter-pills button .x { font-size: 0.95rem; line-height: 1; }

.result-count {
  display: block;
  margin: 0 0 24px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.no-results {
  margin-top: 26px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

@media (max-width: 620px) {
  .filter-search { flex: 1 1 100%; max-width: none; }
  .dropdown { flex: 1 1 calc(50% - 6px); }
  .dropdown-toggle { width: 100%; justify-content: space-between; }
  .dropdown-menu { min-width: 100%; }
}

/* --- Pagination ----------------------------------------------------------- */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 44px;
  flex-wrap: wrap;
}

/* The top pager sits between the filters and the grid. */
.pagination.results-top {
  margin: 0 0 26px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* Prev/next arrows */
.pagination button svg {
  width: 13px;
  height: 13px;
  display: block;
  margin: 0 auto;
}

.pagination .page-arrow { display: flex; align-items: center; justify-content: center; gap: 6px; }

.pagination button {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.pagination button:hover:not(:disabled):not(.current) {
  color: var(--text);
  border-color: var(--text-dim);
}

.pagination button.current {
  color: #fff;
  background: color-mix(in srgb, var(--section) 85%, black);
  border-color: var(--section);
  font-weight: 600;
  cursor: default;
}

.pagination button:disabled { opacity: 0.35; cursor: default; }

.pagination .gap { color: var(--text-dim); padding: 0 2px; }

@media (max-width: 620px) {
  .catalogue-tools input,
  .catalogue-tools select { flex: 1 1 100%; max-width: none; }
}

.no-results {
  margin-top: 26px;
  color: var(--text-dim);
  font-size: 0.95rem;
}

/* --- News list ----------------------------------------------------------- */

.news-list { display: flex; flex-direction: column; }

.news-item {
  display: grid;
  grid-template-columns: 160px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}

.news-item:first-child { border-top: 1px solid var(--line); }

.news-item:hover { background: rgba(255,255,255,0.02); }

.news-item time {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.news-item h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.news-item p { font-size: 0.9rem; color: var(--text-dim); margin-top: 4px; }

.news-item .arrow { color: var(--section); font-size: 1.1rem; }

/* --- Detail page --------------------------------------------------------- */

.detail-hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 72px 0 64px;
  overflow: hidden;
}

.detail-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--detail-art, none) center / cover no-repeat;
  filter: blur(40px) brightness(0.45) saturate(1.3);
  transform: scale(1.4);
}

.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,15,18,0.15), rgba(13,15,18,0.75) 70%, var(--bg));
}

.detail-hero .wrap {
  position: relative;
  z-index: 1;
  display: grid;
  /* Fluid poster column: scales with the viewport instead of sitting at a
     fixed 340px, so the artwork resizes as the window does. */
  grid-template-columns: clamp(220px, 30vw, 440px) 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}

.detail-hero .poster img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.detail-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 10px 0 6px;
}

.detail-hero .director {
  font-style: italic;
  color: var(--text-dim);
  font-size: 1.05rem;
}

.meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.meta-chip {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  padding: 5px 12px;
  border-radius: 999px;
}

.detail-hero .synopsis {
  margin-top: 24px;
  max-width: 58ch;
  color: var(--text-dim);
}

.subnav {
  position: sticky;
  top: 122px;
  z-index: 40;
  background: rgba(13,15,18,0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.subnav::-webkit-scrollbar { display: none; }

/* No width:max-content here — it would override .wrap's max-width and centring
   and pull the sub-nav out of line with the page content. The nowrap links
   simply overflow, and .subnav scrolls them. */
.subnav .wrap { display: flex; gap: 28px; }

.subnav a.current { color: var(--section); border-bottom-color: var(--section); }

.subnav a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 15px 0;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.subnav a:hover { color: var(--text); }

.prose { max-width: 68ch; color: var(--text-dim); }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--text); }

blockquote.pull {
  border-left: 3px solid var(--section);
  padding-left: 22px;
  margin: 18px 0;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.45;
}

blockquote.pull cite {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.credits-table { width: 100%; border-collapse: collapse; max-width: 620px; }

.credits-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.94rem;
}

.credits-table td:first-child {
  color: var(--text-dim);
  width: 42%;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Gallery ------------------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.gallery figure {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--line);
  cursor: zoom-in;
  transition: border-color 0.2s, transform 0.2s;
}

.gallery figure:hover { border-color: var(--brand-mid); transform: translateY(-3px); }

.gallery img {
  width: 100%;
  /* height:100% lets a still fill a row stretched by the wide figure beside it */
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* First still spans two columns on wide screens */
.gallery figure.wide { grid-column: span 2; }

@media (max-width: 700px) {
  .gallery figure.wide { grid-column: span 1; }
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 8, 13, 0.97);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}

.lightbox.open { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.7);
}

.lightbox button {
  position: absolute;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--line);
  color: var(--text);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}

.lightbox button:hover { background: rgba(255,255,255,0.18); }

.lightbox .lb-close { top: 22px; right: 22px; }
.lightbox .lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lightbox .lb-next { right: 22px; top: 50%; transform: translateY(-50%); }

.lightbox .lb-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* --- Press downloads ------------------------------------------------------ */

.press-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 18px;
}

.press-item {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  transition: border-color 0.2s;
}

.press-item:hover { border-color: var(--section); }

.press-item h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.25;
  margin-bottom: 14px;
}

.press-files { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.press-files a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-dim);
  transition: color 0.2s;
}

.press-files a:hover { color: var(--section); }

.file-kind {
  flex: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--section);
  background: rgba(255,255,255,0.03);
}

/* --- Contact ------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.contact-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px;
}

.contact-card h3 {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--section);
  margin-bottom: 14px;
}

.contact-card .name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 4px;
}

.contact-card p { color: var(--text-dim); font-size: 0.95rem; }

.contact-card a { color: var(--text); border-bottom: 1px solid var(--line); }
.contact-card a:hover { border-bottom-color: var(--section); }

/* --- Page head (interior pages) ------------------------------------------ */

/* Only the vertical padding — the horizontal padding comes from .wrap, and a
   shorthand here would zero it out and pull the heading out of alignment. */
.page-head { padding-top: 72px; padding-bottom: 10px; }

.page-head h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.02em;
}

.page-head p { margin-top: 12px; color: var(--text-dim); max-width: 56ch; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  background: var(--bg-raised);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-grid h4 {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 14px;
}

.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--text-dim); font-size: 0.92rem; }
.footer-grid a:hover { color: var(--text); }

.footer-brand {
  font-family: var(--serif);
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.footer-brand em { font-style: italic; color: var(--brand-light); }

.footer-grid .blurb { color: var(--text-dim); font-size: 0.9rem; max-width: 34ch; }

.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 860px) {
  .detail-hero .wrap { grid-template-columns: 1fr; gap: 34px; }
  /* Single column: fill the space rather than sitting at a fixed cap. */
  .detail-hero .poster { max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .news-item { grid-template-columns: 1fr auto; }
  .news-item time { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-raised);
    border-bottom: 1px solid var(--line);
    padding: 10px 24px 20px;
    display: none;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 0; font-size: 1rem; border-bottom: none; }
  .section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 30px;
  }
  .nav-toggle {
    display: block;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-size: 1.1rem;
    padding: 6px 12px;
    cursor: pointer;
  }
  .hero { padding: 64px 0 56px; }
}

/* Blurb text inside the homepage cards (now spans, since the card is a link) */
.film-card .blurb-text {
  display: block;
  font-size: 0.93rem;
  color: var(--text-dim);
}

/* --- Sub-nav on small screens -------------------------------------------- */

/* The film sub-nav scrolls sideways rather than truncating. A fade on the
   right edge signals there is more to reach.
   The wrapper carries the sticky positioning: a sticky element can only travel
   inside its own parent's box, so leaving it on .subnav (whose wrapper is
   exactly its own height) would let it scroll straight out of view. */
.subnav-wrap {
  position: sticky;
  top: 122px;
  z-index: 40;
  background: rgba(11, 14, 20, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.subnav-wrap .subnav {
  position: static;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}

.subnav-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--bg) 85%);
  opacity: 0;
  transition: opacity 0.2s;
}

.subnav-wrap.scrollable::after { opacity: 1; }

@media (max-width: 720px) {
  .subnav .wrap { gap: 20px; padding-right: 44px; }
  .subnav a { font-size: 0.74rem; padding: 13px 0; }
}

/* Anchored sections stop clear of the sticky header (and sub-nav where there
   is one), so a jump-to-anchor never hides the heading behind the bars. */
.section[id],
[id^="synopsis"], [id^="images"], [id^="booking"] {
  scroll-margin-top: 96px;
}

body:has(.subnav) .section[id] { scroll-margin-top: 140px; }

/* --- Responsive media ----------------------------------------------------- */

/* Every image scales with its container; none carry intrinsic fixed widths. */
img { max-width: 100%; height: auto; }

.article-lead {
  width: 100%;
  max-width: 860px;
  height: auto;
  border-radius: 12px;
  margin-bottom: 30px;
}

.article-gallery { margin-top: 30px; }

.prose.article { max-width: 68ch; }

/* Packshots keep their proportions in the card's fixed-ratio art box. */
.film-card .art.packshot img { max-height: 100%; width: auto; }

/* --- Back to results ------------------------------------------------------ */

/* Pinned directly beneath the header, with the sub-nav stacking below it. */
.back-bar {
  position: sticky;
  top: 73px;
  z-index: 45;
  border-bottom: 1px solid var(--line);
  background: rgba(18, 23, 36, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.back-bar .wrap { padding-top: 11px; padding-bottom: 11px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s, gap 0.2s;
}

.back-link svg { width: 14px; height: 12px; flex: none; }

.back-link:hover { color: var(--section); gap: 14px; }

/* --- Image loading placeholders ------------------------------------------- */

/* The container reserves the space; the spinner sits centred inside it and a
   soft shimmer fills the rest until the picture arrives. */
.film-card .art,
.gallery figure,
.detail-hero .poster,
.article-lead-frame {
  position: relative;
}

.article-lead-frame {
  max-width: 860px;
  margin-bottom: 30px;
  border-radius: 12px;
  overflow: hidden;
  min-height: 180px;
}

.article-lead-frame .article-lead { margin-bottom: 0; border-radius: 0; }

.detail-hero .poster.is-loading { min-height: 200px; border-radius: 10px; }

.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      var(--bg-card) 20%,
      color-mix(in srgb, var(--section) 12%, var(--bg-card)) 45%,
      var(--bg-card) 70%);
  background-size: 220% 100%;
  animation: img-shimmer 1.25s linear infinite;
}

/* Centred spinner, sized relative to the box it is waiting in */
.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--section) 25%, transparent);
  border-top-color: var(--section);
  animation: img-spin 0.7s linear infinite;
}

@keyframes img-shimmer {
  from { background-position: 130% 0; }
  to   { background-position: -30% 0; }
}

@keyframes img-spin {
  to { transform: rotate(360deg); }
}

/* Fade the picture in once it has decoded.
   Scoped to .js-img, which imgload.js sets on <html lang="en"> as it starts: if the
   script never runs, images are simply visible rather than stuck at zero. */
.js-img .film-card .art img,
.js-img .gallery figure img,
.js-img .detail-hero .poster img,
.js-img .article-lead-frame img {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* These must match the hiding selectors above in specificity, or the more
   specific hide rule keeps winning and the picture never appears. */
.js-img .film-card .art.is-loaded img,
.js-img .gallery figure.is-loaded img,
.js-img .detail-hero .poster.is-loaded img,
.js-img .article-lead-frame.is-loaded img,
.js-img .film-card .art img.img-in,
.js-img .gallery figure img.img-in,
.js-img .detail-hero .poster img.img-in,
.js-img .article-lead-frame img.img-in { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .is-loading::before { animation: none; }
  .is-loading::after { animation-duration: 2s; }
  .js-img .film-card .art img,
  .js-img .gallery figure img,
  .js-img .detail-hero .poster img,
  .js-img .article-lead-frame img { transition: none; }
}

/* A deep-linked listing announces itself briefly */
.film-card.target-flash {
  border-color: var(--section);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--section) 30%, transparent);
  animation: target-pulse 2.2s ease;
}

@keyframes target-pulse {
  0%, 55% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--section) 34%, transparent); }
  100%    { box-shadow: 0 0 0 3px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .film-card.target-flash { animation: none; }
}

/* --- Sub-nav: mobile picker ----------------------------------------------- */

/* Wide screens keep the horizontal strip; narrow screens swap it for a
   dropdown, so long section names never clip mid-word. */
.subnav-picker { display: none; }

.subnav-picker .wrap { position: relative; padding-top: 10px; padding-bottom: 10px; }

.subnav-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 11px 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s;
}

.subnav-eyebrow {
  flex: none;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.subnav-current {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--section);
}

.subnav-toggle .chev {
  width: 11px;
  height: 11px;
  flex: none;
  color: var(--text-dim);
  transition: transform 0.2s;
}

.subnav-picker.open .subnav-toggle { border-color: var(--section); }
.subnav-picker.open .subnav-toggle .chev { transform: rotate(180deg); color: var(--section); }

.subnav-menu {
  position: absolute;
  z-index: 70;
  top: calc(100% - 2px);
  left: 24px;
  right: 24px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-raised);
  border: 1px solid var(--section);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.6);
}

.subnav-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 9px;
  padding: 11px 12px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}

.subnav-menu button:hover { background: color-mix(in srgb, var(--section) 16%, transparent); color: var(--text); }

.subnav-menu button[aria-selected="true"] { color: var(--section); font-weight: 600; }
.subnav-menu button[aria-selected="true"]::after { content: "✓"; font-size: 0.8rem; }

@media (max-width: 720px) {
  .subnav { display: none; }
  .subnav-picker { display: block; }
  .subnav-wrap::after { display: none; }   /* no scroll fade when not scrolling */
}

/* A returned-to news story announces itself the same way a film card does */
.news-item.target-flash {
  background: color-mix(in srgb, var(--section) 10%, transparent);
  box-shadow: inset 3px 0 0 var(--section);
  animation: target-pulse 2.2s ease;
}

/* --- Tablet header -------------------------------------------------------- */

/* Between the hamburger breakpoint and full width the bar is tight, so the
   nav tightens rather than wrapping (which would break its fixed height). */
@media (min-width: 901px) and (max-width: 1120px) {
  .site-header .wrap { gap: 20px; }
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 0.78rem; letter-spacing: 0.02em; }
  .brand { font-size: 1.1rem; gap: 10px; }
  .brand img { width: 30px; height: 30px; }
}

/* The sub-nav strip also gets crowded on tablets */
@media (min-width: 721px) and (max-width: 900px) {
  .subnav a { font-size: 0.76rem; }
  .subnav .wrap { gap: 22px; }
}

/* --- Footer links --------------------------------------------------------- */

/* Underlined so they read as links against the muted footer text. */
.footer-grid a,
.footer-bottom a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color 0.2s, text-decoration-color 0.2s;
}

.footer-grid a:hover,
.footer-bottom a:hover {
  color: var(--section);
  text-decoration-color: var(--section);
}

/* --- Site search --------------------------------------------------------- */

/* The magnifier at the end of the header opens the whole site's search - every
   film, DVD, news story and page - in a dialog over the page. */
.search-toggle {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.search-toggle:hover,
.search-toggle:focus-visible { color: var(--text); border-color: var(--line); }

.search-toggle svg { width: 20px; height: 20px; }

.site-search {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(56px, 11vh, 110px) 24px 24px;
  border: 0;
  background: transparent;
  color: var(--text);
  overflow-y: auto;
}

.site-search::backdrop {
  background: rgba(8, 10, 14, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html:has(.site-search[open]) { overflow: hidden; }

.site-search-panel {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 26px 28px 24px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.site-search-title {
  margin: 0 48px 16px 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand-light);
}

.site-search-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}

.site-search-close:hover,
.site-search-close:focus-visible { color: var(--text); border-color: var(--text-dim); }

/* the search widget, in the site's own colours */
.site-search .cdnmx-search,
.site-search .cnxw-search-in { max-width: none; }
.site-search .cdnmx-search { color: var(--text-dim); }
.site-search .cnxw-search-icon { color: var(--text-dim); }
.site-search .cnxw-search-input {
  min-height: 52px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 1.02rem;
}
.site-search .cnxw-search-input::placeholder { color: var(--text-dim); }
.site-search .cnxw-search-input:focus {
  outline: none;
  border-color: var(--brand-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-light) 22%, transparent);
}
.site-search .cnxw-search-res { margin-top: 14px; background: transparent; border: 0; }
.site-search .cnxw-search-grp {
  padding: 18px 2px 8px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  background: none;
  border: 0;
}
.site-search .cnxw-search-hit {
  display: block;
  padding: 11px 14px;
  border: 0;
  border-radius: 10px;
  color: var(--text-dim);
  background: none;
}
.site-search .cnxw-search-hit.is-on,
.site-search .cnxw-search-hit:hover { background: var(--bg-card); }
.site-search .cnxw-search-hit > b { display: block; color: var(--text); font-weight: 600; }
.site-search .cnxw-search-hit > span { display: block; margin-top: 2px; font-size: 0.86rem; color: var(--text-dim); }
.site-search .cnxw-search-hit b b,
.site-search .cnxw-search-hit span b { color: var(--brand-light); font-weight: 600; }
.site-search .cnxw-empty { color: var(--text-dim); background: none; }
.site-search .cnxw-empty b { color: var(--text); }
.site-search .cnxw-skel { background: var(--bg-card); }

/* --- Follow us ----------------------------------------------------------- */

.social-links {
  display: flex;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.social-links a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-dim);
  transition: color 0.2s, border-color 0.2s;
}

.social-links a:hover,
.social-links a:focus-visible { color: var(--text); border-color: var(--text-dim); }

.social-links svg { width: 18px; height: 18px; }

.footer-bottom .social-links { margin: 0; }

/* --- The catalogue's search, kept in reach -------------------------------- */

/* On Cinema Releases, Video On Demand, News and Press the search and filters
   stay pinned under the header while the list scrolls beneath them. The band
   behind them runs the full width of the window (a border image paints outside
   the box without widening the page, and clips nothing - the dropdowns open
   below it). */
.filter-bar {
  position: sticky;
  top: 73px;            /* the iris strip (4px), the header (68px) and its rule */
  z-index: 40;
  margin-top: -12px;
  margin-bottom: 6px;
  padding: 12px 0;
  border-image: linear-gradient(var(--bg) 0 0) fill 0 / 0 / 0 100vmax;
}

/* On a phone the bar is rows deep - near a third of the screen - so only the
   search box stays pinned; the dropdowns sit two to a row above the results
   and scroll away with them. */
@media (max-width: 620px) {
  .filter-bar { display: contents; }
  .filter-search {
    position: sticky;
    top: 73px;
    z-index: 40;
    padding: 10px 0;
    border-image: linear-gradient(var(--bg) 0 0) fill 0 / 0 / 0 100vmax;
  }
  .filter-bar .dropdown {
    float: left;
    width: calc(50% - 6px);
    margin: 2px 0 10px;
  }
  .filter-bar .dropdown:nth-child(even) { margin-right: 12px; }
  .filter-bar .dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .filter-bar + * { clear: both; padding-top: 8px; }
}

/* --- A press picture, opened over the page --------------------------------- */

/* Its name and the download sit in a bar under the picture, which makes room
   for it; a set of one has no arrows and no count. */
.lightbox.has-bar { padding-bottom: 128px; }
.lightbox [hidden] { display: none; }
.lightbox img { transition: opacity 0.2s; }
.lightbox.loading img { opacity: 0.35; }

.lightbox .lb-bar {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: calc(100% - 48px);
  padding: 7px 7px 7px 20px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.88rem;
  color: var(--text);
}

.lightbox .lb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lightbox .lb-download {
  flex: none;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s;
}

.lightbox .lb-download:hover,
.lightbox .lb-download:focus-visible { background: var(--brand-mid); }

/* --- A press PDF or file, opened over the page ----------------------------- */

/* A PDF in the browser's own reader, as large as the window allows; any other
   file - a ZIP of stills - as its card: its kind, name, date and size. */
.lightbox .lb-doc {
  width: min(1100px, 100%);
  height: 100%;
  border: 0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 20px 70px rgba(0,0,0,0.7);
}

.lightbox.loading .lb-doc { opacity: 0.6; }

.lightbox .lb-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(440px, 100%);
  padding: 44px 32px 36px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,0.5);
}

.lightbox .lb-file[hidden] { display: none; }
.lightbox .lb-file-icon { color: var(--section); }
.lightbox .lb-file-icon svg { display: block; width: 76px; height: 94px; }
.lightbox .lb-file-name { margin-top: 22px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; color: var(--text); }
.lightbox .lb-file-fn { margin-top: 10px; font-size: 0.84rem; color: var(--text-dim); overflow-wrap: anywhere; }
.lightbox .lb-file-info { margin-top: 6px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); }

.lightbox .lb-open {
  flex: none;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.2s;
}

.lightbox .lb-open:hover,
.lightbox .lb-open:focus-visible { color: var(--text); }

/* --- The house widgets, in this design ------------------------------------ */

/* The widgets the site places - its search, the Instagram feed, the cookie
   panel, a form - draw in the --cnx-* colours. These are New Wave's own, not
   the widget library's light defaults (which it declares at no specificity,
   so these win wherever the sheets load). */
:root {
  --cnx-primary: var(--brand);
  --cnx-on-primary: #fff;
  --cnx-accent: var(--brand-light);
  --cnx-on-accent: var(--bg);
  --cnx-secondary: var(--bg-raised);
  --cnx-on-secondary: var(--text);
  --cnx-neutral: var(--text-dim);
  --cnx-ink: var(--text);
  --cnx-on-ink: var(--bg);
  --cnx-body: var(--text-dim);
  --cnx-line: var(--line);
  --cnx-bg: var(--bg);
  --cnx-tint: var(--bg-card);
  --cnx-heading-font: var(--serif);
  --cnx-body-font: var(--sans);
}

/* --- The hero's picture, brighter ------------------------------------------ */

/* In colour and light enough to see; a dark band behind the words on the left
   keeps them readable, and the foot still fades into the page. On a phone the
   words run the full width, so the wash is even. */
.hero .hero-bg { filter: grayscale(15%) brightness(0.78); }

.hero::after {
  background:
    linear-gradient(90deg, rgba(11,14,20,0.88) 0%, rgba(11,14,20,0.62) 38%, rgba(11,14,20,0.12) 75%, rgba(11,14,20,0) 100%),
    linear-gradient(180deg, rgba(11,14,20,0) 55%, var(--bg) 100%);
}

@media (max-width: 760px) {
  .hero::after { background: linear-gradient(180deg, rgba(11,14,20,0.72) 0%, rgba(11,14,20,0.58) 60%, var(--bg) 100%); }
}

/* --- Instagram, under the hero --------------------------------------------- */

#instagram .cnxw-sec { padding: 0; background: none; }
#instagram .cnxw-wrap { max-width: none; margin: 0; padding: 0; }
#instagram .cnx-ig-ph { border: 1px solid var(--line); }

/* --- Facebook and Instagram in the header ---------------------------------- */

/* Beside the search, at the right of the menu bar; on a phone the bar has no
   room for them and they stay in the footer. */
.header-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.header-social { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.header-social a {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid transparent;
  color: var(--text-dim);
  transition: color 0.2s, border-color 0.2s;
}
.header-social a:hover,
.header-social a:focus-visible { color: var(--text); border-color: var(--line); }
.header-social svg { width: 17px; height: 17px; }
@media (max-width: 640px) { .header-social { display: none; } }

/* the menu button, the icons and the search as one group on the right, on the narrower header */
@media (max-width: 900px) { .site-header .header-tools { margin-left: -28px; } }

/* --- The inner pages' hero (News, Press, Cinema, VOD, Contact) ----------- */

/* The home page's hero, a little shorter: the page's title and introduction
   over its own still, with the listing straight under it. */
.hero.hero-page { padding: 88px 0 64px; }
.hero.hero-page h1 { font-size: clamp(2.3rem, 4.8vw, 3.5rem); max-width: 18ch; }
.hero.hero-page p, .hero.hero-page .hero-intro p { margin-top: 16px; max-width: 56ch; }
.hero.hero-page .hero-intro p:empty { display: none; }
@media (max-width: 900px) { .hero.hero-page { padding: 64px 0 48px; } }