:root {
  /* ── Canonical palette ─────────────────────────────────────── */

  /* ── Border / opacity utilities — dark-mode: cream-on-black ── */
  --border: rgba(227, 218, 201, 0.1);
  --border-strong: rgba(227, 218, 201, 0.22);

  /* ── Semantic aliases (keep for backward-compat) ────────────── */
  --cream: var(--color-base);
  --cream-bg: var(--color-base);
  --cream-mid: rgba(227, 218, 201, 0.6);
  --cream-dim: rgba(227, 218, 201, 0.55);
  --cream-hover: rgba(227, 218, 201, 0.06);
  --gray-text: rgba(227, 218, 201, 0.55);
  --gray-mid: rgba(227, 218, 201, 0.55);
  --gray-light: rgba(227, 218, 201, 0.55);
  --cream-border: rgba(227, 218, 201, 0.12);
}
body {
  background: var(--color-primary);
  color: var(--color-base);
  font-family: "Inter", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  filter: url(#texture-noise);
}

/* SCREENS */
.screen {
  display: none;
  min-height: calc(100vh - 52px);
}
.screen.active {
  display: block;
}

/* ── ENTRY SCREEN ─────────────────────────────────────────────── */
.entry-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 52px);
}
.entry-hero {
  background: var(--black);
  padding: 28px 32px 32px;
  border-bottom: 2px solid var(--red);
}
.entry-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  font-weight: 700;
}
.home-hero-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
/* Headline reduced ~30% (was clamp(3rem,7.5vw,5.8rem)) so the Lineage of the
   Month divider + poster row break the fold on a ~900px laptop viewport. Still
   the largest element on the page. */
.home-hero-title {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  max-width: 13ch;
  color: var(--off-white);
  margin: 0;
}
.home-hero-sub {
  margin-top: 14px;
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.7;
  color: #8f897d;
  max-width: 460px;
}
.home-hero-sub em {
  color: var(--off-white);
  font-style: italic;
}
.onboarding-intro {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.9375rem;
  color: rgba(15, 15, 15, 0.65);
  margin-bottom: 10px;
}
.onboarding-actions {
  margin-top: 32px;
}
.collection-count-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}

/* Doors removed in homepage hero redesign (2026-06-18) — see index.html. */

/* ── Persona Selector Bar ─────────────────────────────────────── */
.atlas-poster-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 16px;
  font-weight: 700;
}
.atlas-poster-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 28px;
}
.atlas-poster-row::-webkit-scrollbar {
  display: none;
}
.atlas-poster-item {
  flex-shrink: 0;
  width: 130px;
  display: block;
  text-decoration: none;
}
.atlas-poster-img {
  width: 130px;
  height: 195px;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  background: rgba(242, 237, 228, 0.08);
  transition: opacity 0.15s;
}
.atlas-poster-item:hover .atlas-poster-img {
  opacity: 0.75;
}

/* Door + strip hide when results are shown */
.hidden {
  display: none;
}

/* Search-again button — shown above results */
#search-again {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 24px;
  display: none;
}

/* ── ATLAS SCREEN ─────────────────────────────────────────────── */
/* Base display:none so the screen stays hidden on initial load until activated
   (mirrors .map-screen). Without this, display:flex outranks .screen{display:none}
   and the Movements screen renders stacked under the homepage. */
.atlas-screen {
  display: none;
  flex-direction: column;
  min-height: calc(100vh - 52px);
}
.atlas-screen.active {
  display: flex;
}
.atlas-header {
  background: var(--black);
  padding: 24px 32px 20px;
  border-bottom: 2px solid var(--red);
}
.atlas-header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.atlas-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 6px;
  font-weight: 700;
}
.atlas-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 400;
  color: var(--off-white);
  letter-spacing: -0.5px;
  line-height: 1.05;
}
.atlas-title em {
  font-style: italic;
}
.atlas-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.875rem;
  color: rgba(227, 218, 201, 0.55);
  flex-wrap: wrap;
}
.bc-item {
  color: rgba(227, 218, 201, 0.55);
  cursor: pointer;
}
.bc-item:hover {
  color: var(--off-white);
}
.bc-item.current {
  color: var(--off-white);
  cursor: default;
}
.bc-sep {
  color: rgba(227, 218, 201, 0.2);
}
.atlas-back-btn {
  padding: 8px 20px;
  border: 1px solid rgba(227, 218, 201, 0.2);
  background: none;
  color: rgba(227, 218, 201, 0.55);
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  margin-top: 4px;
}
.atlas-back-btn:hover {
  border-color: var(--off-white);
  color: var(--off-white);
}

.atlas-body {
  display: grid;
  grid-template-columns: 280px 1fr;
  flex: 1;
}
.atlas-sidebar {
  border-right: 1px solid var(--border-strong);
  background: #181818;
  overflow-y: auto;
}
.sidebar-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.sidebar-head-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* Region → movement → director hierarchy (replaces flat director list).
 * The active region carries a 2px red rail on its left edge — the affordance
 * is architectural (a rail you've stepped onto) rather than UI-y (a chevron). */
.region-block {
  border-bottom: 1px solid var(--border);
  position: relative;
}
.region-block::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background 0.2s;
}
.region-block.expanded::before {
  background: var(--red);
}
.region-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 12px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  min-height: 44px;
}
.region-header:hover {
  background: var(--cream-hover);
}
.region-name {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(227, 218, 201, 0.82);
  line-height: 1.2;
}
.region-mv-count {
  font-size: 0.875rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 3px;
}
.mv-growing-note p {
  font-family: "Lora", serif;
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.6;
}
.region-block.expanded .region-name {
  color: var(--color-base);
}
.region-toggle {
  font-size: 0.75rem;
  color: var(--cream-dim);
  transition:
    transform 0.2s,
    color 0.15s;
  line-height: 1;
}
.region-block.expanded .region-toggle {
  transform: rotate(90deg);
  color: var(--red);
}
.region-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease;
}
.region-block.expanded .region-panel {
  max-height: 800px;
}
.mv-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 16px 10px 34px;
  min-height: 44px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.mv-item:hover {
  background: rgba(227, 218, 201, 0.06);
  border-left-color: var(--cream-mid);
}
.mv-item.active {
  background: var(--black);
  border-left-color: var(--red);
}
.mv-item.active .mv-name {
  color: var(--off-white);
}
.mv-item.active .mv-meta {
  color: rgba(227, 218, 201, 0.55);
}
.mv-name {
  font-family: "Playfair Display", serif;
  font-style: normal;
  font-size: 0.9375rem;
  color: var(--color-base);
  line-height: 1.25;
}
.mv-meta {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 3px;
}
.film-item {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: #8c8678;
  padding: 4px 0;
  line-height: 1.4;
}
.region-more {
  display: block;
  padding: 8px 22px 14px 34px;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  cursor: pointer;
  transition: color 0.15s;
}
.region-more:hover {
  color: var(--red);
}

/* Director detail still rendered in atlas-main — keep .dir-item rules so
 * existing renderDirectorDetail() works unchanged when invoked from
 * showDirector() (called from country-page cards or movement detail). */
.dir-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 20px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
.dir-item:hover {
  background: rgba(227, 218, 201, 0.06);
  border-left-color: var(--cream-mid);
}
.dir-item.active {
  background: var(--black);
  border-left-color: var(--red);
}
.dir-item.active .dir-item-name {
  color: var(--off-white);
}
.dir-item.active .dir-item-meta {
  color: rgba(227, 218, 201, 0.55);
}
.dir-item.active .dir-spine {
  color: var(--red);
}
.dir-spine {
  font-family: "Playfair Display", serif;
  font-size: 0.75rem;
  color: var(--cream-dim);
  min-width: 22px;
  line-height: 1.4;
  flex-shrink: 0;
}
.dir-item-name {
  font-family: "Playfair Display", serif;
  font-size: 0.8125rem;
  color: var(--color-base);
  line-height: 1.3;
}
.dir-item-meta {
  font-size: 0.875rem;
  color: var(--cream-dim);
  margin-top: 1px;
}

.atlas-main {
  background: var(--color-primary);
  overflow-y: auto;
}

/* Movement detail screen (rendered in atlas-main when a sidebar movement is clicked). */
.mv-detail {
  padding: 36px 44px;
  max-width: 880px;
}
.mv-detail-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 700;
}
.mv-detail-rule {
  height: 2px;
  width: 40px;
  background: var(--red);
  margin-bottom: 14px;
}
.mv-detail-years {
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 6px;
}
.mv-detail h1 {
  font-family: "Playfair Display", serif;
  font-size: 3rem;
  font-weight: 400;
  letter-spacing: -0.8px;
  line-height: 1.04;
  margin-bottom: 26px;
}
.mv-detail-bg {
  font-family: "Playfair Display", serif;
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(227, 218, 201, 0.85);
  max-width: 720px;
}
.mv-detail-bg-source {
  margin-top: 12px;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.mv-detail-bg-source a {
  color: var(--cream-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mv-detail-bg-source a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}
.mv-detail-section {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--border-strong);
}
.mv-detail-section-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  font-weight: 700;
}
.mv-detail-directors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
}
.mv-detail-dir {
  background: var(--color-primary);
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s;
}
.mv-detail-dir:hover {
  background: #181818;
}
.mv-detail-dir-name {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  line-height: 1.2;
}
.mv-detail-dir-meta {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(227, 218, 201, 0.55);
  margin-top: 4px;
}
.mv-detail-dir-bio {
  font-family: "Lora", serif;
  font-size: 0.875rem;
  color: rgba(227, 218, 201, 0.6);
  margin-top: 6px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: normal;
  overflow-wrap: break-word;
}
.mv-detail-films {
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
}
/* Red rule is the visual signal of "this is THE canonical entry". Apply
 * only to the first film so the affordance keeps its weight; subsequent
 * films sit on the same grid but with a quieter left border. */
.mv-detail-film-row {
  background: var(--color-primary);
  padding: 13px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  border-left: 3px solid var(--border-strong);
}
.mv-detail-film-row:first-child {
  border-left-color: var(--red);
}
.mv-detail-film-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.875rem;
}
.mv-detail-film-meta {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}
.mv-detail-related {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
}
.mv-detail-related-card {
  background: var(--color-primary);
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.mv-detail-related-card:hover {
  background: #181818;
}
.mv-detail-related-name {
  font-family: "Playfair Display", serif;
  font-size: 0.8125rem;
}
.mv-detail-related-years {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 3px;
}
.mv-welcome {
  padding: 60px 44px;
  max-width: 620px;
}
.mv-welcome-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.mv-welcome h2 {
  font-family: "Playfair Display", serif;
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 14px;
}
.mv-welcome p {
  font-family: "Playfair Display", serif;
  font-style: normal;
  font-size: 1.125rem;
  color: rgba(227, 218, 201, 0.88);
  line-height: 1.7;
}

/* ── Featured movements grid (atlas default state) ── */
.mv-featured {
  padding: 32px 36px 48px;
}
.mv-featured-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 6px;
}
.mv-featured-intro {
  font-family: "Playfair Display", serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--cream-dim);
  margin-bottom: 28px;
}
.mv-featured-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.mv-feat-card {
  background: var(--color-primary);
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.mv-feat-card:hover {
  border-color: var(--red);
  background: rgba(227, 218, 201, 0.04);
}
.mv-feat-poster-strip {
  display: flex;
  height: 150px;
  gap: 2px;
}
.mv-feat-poster {
  position: relative;
  overflow: hidden;
  flex: 1;
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.mv-feat-poster-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  padding: 16px 6px 6px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}
.mv-feat-body {
  padding: 14px 18px 16px;
}
.mv-feat-region {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 700;
  margin-bottom: 5px;
}
.mv-feat-name {
  font-family: "Playfair Display", serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--color-base);
  line-height: 1.15;
  margin-bottom: 4px;
}
.mv-feat-years {
  font-size: 0.875rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 10px;
}
.mv-feat-directors {
  font-family: "Lora", serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--gray-mid);
  line-height: 1.5;
  margin-bottom: 12px;
}
.mv-feat-thread {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-base);
  border-bottom: 1px solid var(--border-strong);
  display: inline-block;
  padding-bottom: 1px;
  transition:
    color 0.15s,
    border-color 0.15s;
}
.mv-feat-card:hover .mv-feat-thread {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Director detail */
.dir-detail {
  display: none;
}
.dir-detail.visible {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-width: 100%;
}
.dir-header {
  padding: 28px 36px 24px;
  border-bottom: 1px solid var(--border-strong);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
.dir-red-rule {
  height: 2px;
  width: 40px;
  background: var(--red);
  margin-bottom: 14px;
}
.dir-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 700;
}
.dir-name {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--color-base);
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin-bottom: 14px;
}
.dir-bio {
  font-family: "Lora", serif;
  font-size: 1.125rem;
  color: rgba(227, 218, 201, 0.7);
  line-height: 1.75;
  max-width: 520px;
}
.dir-stat-block {
  text-align: right;
}
.dir-stat-n {
  font-family: "Playfair Display", serif;
  font-size: 2.125rem;
  font-weight: 600;
  color: var(--color-base);
  line-height: 1;
  display: block;
}
.dir-stat-l {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(227, 218, 201, 0.55);
  display: block;
  margin-top: 3px;
}

.director-backdrop {
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}
.director-backdrop img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  filter: contrast(1.15) brightness(0.9) saturate(0.85);
}
.backdrop-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(transparent, var(--color-primary));
}

/* Film card grid */
.film-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  background: #0f0f0f;
  margin-bottom: 24px;
}
.film-card {
  width: 100%;
  aspect-ratio: 2/3;
  cursor: pointer;
  border: 1px solid transparent;
  transition:
    border-color 0.15s,
    transform 0.2s ease;
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  background: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.film-card:hover {
  border-color: var(--red);
}
.film-card-placeholder {
  width: 100%;
  height: 100%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  position: absolute;
  top: 0;
  left: 0;
}
.film-card-placeholder-text {
  font-family: "Playfair Display", serif;
  font-size: 0.8125rem;
  font-style: italic;
  color: rgba(227, 218, 201, 0.55);
  text-align: center;
  line-height: 1.4;
}
.film-card-title {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  color: var(--off-white);
  line-height: 1.25;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  word-break: normal;
  overflow-wrap: break-word;
}
.film-card-meta {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: #8c8678;
  letter-spacing: 0.5px;
}
.streaming-badges {
  display: none;
}
.streaming-badges.active {
  display: flex;
  gap: 8px;
}
@media (max-width: 700px) {
  .film-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Theme / mood two-column layout */
.theme-results-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}
.theme-results-right .film-card-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}
.theme-results-right .film-card {
  width: 100%;
}
@media (max-width: 1024px) {
  .theme-results-layout {
    grid-template-columns: 1fr;
  }
}
.film-banner {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--color-primary);
  color: var(--color-base);
  padding: 36px 32px;
  border-bottom: 2px solid var(--red);
  margin-bottom: 36px;
}
.film-banner-poster {
  width: 150px;
  height: 225px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.film-banner-info {
  flex: 1;
  min-width: 0;
}
.film-banner-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 8px;
}
.film-banner-meta {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-mid);
  margin-bottom: 16px;
}
.film-banner-synopsis {
  font-family: "Lora", serif;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-base);
  max-width: 640px;
}
.film-banner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.film-banner-tag {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-mid);
  border: 1px solid rgba(242, 237, 228, 0.25);
  padding: 4px 10px;
  border-radius: 3px;
}
.film-banner-bridge {
  margin-top: 20px;
  font-family: "Lora", serif;
  font-style: normal;
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--color-base);
  max-width: 680px;
  border-left: 2px solid var(--red);
  padding-left: 16px;
}
.film-banner-bridge-label {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--red);
  margin-bottom: 6px;
}
@media (max-width: 700px) {
  .film-banner {
    flex-direction: column;
  }
  .film-banner-poster {
    width: 120px;
    height: 180px;
  }
}

/* Film detail modal */
.film-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.75);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.film-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.film-modal {
  background: var(--color-primary);
  display: grid;
  grid-template-columns: 40% 60%;
  max-width: 860px;
  width: 90vw;
  max-height: 88vh;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  position: relative;
}
.film-modal-left {
  background: var(--color-primary);
  overflow: hidden;
  border-radius: 2px;
  display: flex;
  align-items: flex-start;
}
.film-modal-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-modal-poster-placeholder {
  width: 100%;
  height: 100%;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.film-modal-right {
  padding: 48px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.film-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  color: var(--cream-dim);
  z-index: 10;
  line-height: 1;
}
.film-modal-close:hover {
  color: var(--color-base);
}
.film-modal-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 6px;
}
.film-modal-title {
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-base);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 6px;
}
.film-modal-meta {
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: var(--cream-dim);
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}
.film-modal-red-rule {
  height: 1px;
  width: 100%;
  background: var(--red);
  margin-bottom: 16px;
}
.film-modal-section {
  margin-bottom: 18px;
}
.film-modal-section-label {
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 6px;
}
.film-modal-overview {
  font-family: "Lora", serif;
  font-size: 1.125rem;
  color: var(--color-base);
  line-height: 1.75;
}
.film-modal-badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border-strong);
  color: var(--color-base);
  background: #181818;
  cursor: pointer;
  margin-right: 6px;
  margin-bottom: 8px;
  transition: all 0.12s;
}
.film-modal-badge:hover {
  background: var(--black);
  color: var(--off-white);
  border-color: var(--color-base);
}
.film-modal-badge.rank {
  border-color: var(--cream-dim);
  color: var(--cream-dim);
  background: none;
  cursor: default;
  padding: 4px 10px;
}
.film-modal-badge.rank:hover {
  background: none;
  color: var(--cream-dim);
  border-color: var(--cream-dim);
}
.mood-chip {
  display: inline-block;
  padding: 3px 10px;
  font-size: 0.75rem;
  letter-spacing: 0px;
  background: var(--black);
  color: var(--off-white);
  border: none;
  border-radius: 0;
  font-family: "Inter", sans-serif;
  color: var(--cream-dim);
  margin: 2px 4px 2px 0;
  background: rgba(227, 218, 201, 0.06);
}

.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.section-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}
.rule-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.films-section {
  padding: 22px 36px;
  border-bottom: 1px solid var(--border);
  overflow: visible;
  max-width: 100%;
  flex-wrap: wrap;
}
.film-tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 16px;
  max-width: 100%;
  overflow: visible;
}
.film-tag {
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  font-family: "Playfair Display", serif;
  font-size: 0.8125rem;
  color: var(--color-base);
  background: #181818;
  cursor: default;
  transition: all 0.15s;
  max-width: 100%;
  overflow: visible;
  white-space: normal;
  box-sizing: border-box;
}
.films-show-all {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 6px 14px;
  border: 1px solid var(--red);
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1px;
  color: var(--red);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.films-show-all:hover {
  background: var(--red);
  color: var(--off-white);
}
.film-tag:hover {
  background: var(--black);
  color: var(--off-white);
  border-color: var(--color-base);
}

.more-info-row {
  padding: 12px 36px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.more-info-row:hover {
  background: #181818;
}
.more-info-label {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
  flex: 1;
}
.more-info-icon {
  width: 18px;
  height: 18px;
  border: 1px solid var(--cream-mid);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  color: var(--cream-dim);
  transition: all 0.15s;
  flex-shrink: 0;
}
.more-info-panel {
  display: none;
  padding: 16px 36px 20px;
  background: #181818;
  border-bottom: 1px solid var(--border);
}
.more-info-panel.open {
  display: block;
}
.info-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.info-col-label {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 5px;
}
.info-col-value {
  font-family: "Playfair Display", serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-base);
}

.connections-section {
  padding: 22px 36px 32px;
}
.conn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
}
.conn-card {
  background: var(--color-primary);
  padding: 18px 20px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}
.conn-card:hover {
  background: #181818;
}
.conn-card:hover .conn-arr {
  opacity: 1;
}
.conn-type {
  font-size: 0.75rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.conn-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.type-thematic .conn-type {
  color: var(--red);
}
.type-thematic .conn-dot {
  background: var(--red);
}
.type-production .conn-type {
  color: #7a5500;
}
.type-production .conn-dot {
  background: #c5a050;
}
.type-distributor .conn-type {
  color: #1a5a2a;
}
.type-distributor .conn-dot {
  background: #4a9b5a;
}
.type-movement .conn-type {
  color: #2a2a7a;
}
.type-movement .conn-dot {
  background: #6a6abe;
}
.conn-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.conn-name {
  font-family: "Playfair Display", serif;
  font-size: 1.125rem;
  color: var(--color-base);
  line-height: 1.2;
}
.conn-sep {
  font-size: 0.875rem;
  color: #bbb;
}
.conn-origin {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(227, 218, 201, 0.55);
}
.conn-reason {
  font-family: "Lora", serif;
  font-size: 0.875rem;
  color: rgba(227, 218, 201, 0.6);
  line-height: 1.6;
}
.conn-arr {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 1rem;
  color: var(--color-base);
  opacity: 0;
  transition: opacity 0.15s;
}

/* Subscription prompt */
.sub-prompt {
  margin: 0 36px 32px;
  padding: 24px 28px;
  background: var(--black);
  border-left: 3px solid var(--red);
}
.sub-prompt-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.sub-prompt-title {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--off-white);
  margin-bottom: 8px;
  line-height: 1.2;
}
.sub-prompt-desc {
  font-size: 0.875rem;
  color: rgba(227, 218, 201, 0.55);
  line-height: 1.6;
  margin-bottom: 18px;
}
.sub-input-row {
  display: flex;
  gap: 10px;
}
.sub-email-input {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid #2a2a2a;
  background: #161616;
  color: var(--off-white);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
  transition: border-color 0.15s;
}
.sub-email-input:focus {
  border-color: var(--red);
}
.sub-submit-btn {
  padding: 11px 22px;
  background: var(--red);
  color: var(--off-white);
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.sub-submit-btn:hover {
  background: #a00e26;
}
.sub-success {
  padding: 12px 16px;
  background: rgba(74, 155, 90, 0.15);
  border: 1px solid rgba(74, 155, 90, 0.3);
  color: #4a9b5a;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  display: none;
}
.sub-success.visible {
  display: block;
}

/* Entry results */
.entry-results {
  padding: 28px 36px;
}
.entry-result-card {
  border: 1px solid var(--border-strong);
  background: #181818;
  padding: 20px 24px;
  margin-bottom: 10px;
  transition: all 0.15s;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* Only slug-backed rows are clickable links (carry go-director). Rows without
   a resolvable slug render as plain text — no pointer cursor or hover affordance. */
.entry-result-card[data-action="go-director"] {
  cursor: pointer;
}
.entry-result-card[data-action="go-director"]:hover {
  background: var(--black);
  border-color: var(--color-base);
}
.entry-result-card[data-action="go-director"]:hover .erc-name {
  color: var(--off-white);
}
.entry-result-card[data-action="go-director"]:hover .erc-why {
  color: rgba(227, 218, 201, 0.55);
}
.entry-result-card[data-action="go-director"]:hover .erc-origin {
  color: rgba(227, 218, 201, 0.55);
}
.entry-result-card[data-action="go-director"]:hover .erc-arrow {
  color: var(--off-white);
}
.erc-name {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  color: var(--color-base);
  margin-bottom: 3px;
}
.erc-origin {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(227, 218, 201, 0.55);
  margin-bottom: 8px;
}
.erc-why {
  font-family: "Playfair Display", serif;
  font-size: 0.875rem;
  color: rgba(227, 218, 201, 0.6);
  line-height: 1.6;
}
.erc-arrow {
  font-size: 1.25rem;
  color: var(--cream-mid);
  flex-shrink: 0;
  margin-top: 4px;
  transition: color 0.15s;
}

/* Director row — horizontal list for theme/mood results */
.director-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.director-row:first-child {
  border-top: 1px solid var(--border);
}
/* Only slug-backed rows are clickable links (carry go-director). Rows without
   a resolvable slug render as plain text — no pointer cursor or hover affordance. */
.director-row[data-action="go-director"] {
  cursor: pointer;
}
.director-row[data-action="go-director"]:hover {
  background: #181818;
  padding-left: 12px;
  padding-right: 12px;
  margin: 0 -12px;
}
.director-row[data-action="go-director"]:hover .erc-name {
  color: var(--color-base);
}
.director-row[data-action="go-director"]:hover .dir-sep {
  color: #999;
}
.director-row[data-action="go-director"]:hover .erc-arrow {
  color: var(--red);
}
.director-row-body {
  flex: 1;
  min-width: 0;
}
.director-row-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.dir-sep {
  color: #bbb;
  font-size: 0.875rem;
}
.director-row .erc-origin {
  margin-bottom: 0;
}

/* Onboarding Modal */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}
.onboarding-overlay.hidden {
  display: none;
  pointer-events: none;
}
.onboarding-modal {
  background: var(--color-primary);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  width: 90vw;
  max-width: 520px;
  padding: 48px 44px;
  box-shadow: 0 20px 60px rgba(10, 10, 10, 0.3);
}
.onboarding-header {
  margin-bottom: 36px;
}
.onboarding-header h1 {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--color-base);
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin-bottom: 14px;
}
.onboarding-subtitle {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  font-style: normal;
  color: rgba(227, 218, 201, 0.82);
  line-height: 1.7;
  margin: 0;
}
.onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.onboarding-btn-submit {
  padding: 14px 28px;
  background: var(--color-accent);
  color: var(--off-white);
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s;
  font-weight: 500;
}
.onboarding-btn-submit:hover {
  background: #a0281e;
}

/* Onboarding Films Collection */
.onboarding-films-section {
  padding: 32px 36px;
  border-bottom: 1px solid var(--border);
  background: #181818;
}
.onboarding-films-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 24px;
}
.onboarding-films-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  display: block;
}
.onboarding-films-title {
  font-family: "Playfair Display", serif;
  font-size: 1.75rem;
  font-weight: 400;
  color: var(--color-base);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin: 0;
}
.onboarding-films-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--cream-dim);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.onboarding-films-close:hover {
  color: var(--color-base);
}
.onboarding-films-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}
.onboarding-film-card {
  background: var(--color-primary);
  border: 1px solid var(--border-strong);
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.onboarding-film-card:hover {
  background: var(--black);
  border-color: var(--red);
}
.onboarding-film-card:hover .onboarding-film-title {
  color: var(--off-white);
}
.onboarding-film-card:hover .onboarding-film-director {
  color: rgba(227, 218, 201, 0.55);
}
.onboarding-film-title {
  font-family: "Playfair Display", serif;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--color-base);
  margin-bottom: 8px;
  line-height: 1.3;
  transition: color 0.15s;
}
.onboarding-film-director {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 0.15s;
}

/* Loading */
.loading {
  padding: 48px 36px;
  text-align: center;
}
.loading-text {
  font-family: "Playfair Display", serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--cream-dim);
}
.home-search-loading {
  padding: 48px 20px;
  text-align: center;
}
.home-search-loading-title {
  color: var(--color-base);
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  font-style: italic;
  margin-bottom: 12px;
}
.home-search-loading-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.home-search-loading-dot {
  animation: pulse 1s ease-in-out infinite;
  background: var(--red);
  border-radius: 50%;
  height: 6px;
  width: 6px;
}
.home-search-loading-dot.delay-1 {
  animation-delay: 0.2s;
}
.home-search-loading-dot.delay-2 {
  animation-delay: 0.4s;
}

/* Newsletter screen */
.newsletter-screen {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 32px;
}
.nl-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.nl-title {
  font-family: "Playfair Display", serif;
  font-size: 2.375rem;
  font-weight: 400;
  color: var(--color-base);
  letter-spacing: -1px;
  margin-bottom: 16px;
  line-height: 1.05;
}
.nl-body {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(227, 218, 201, 0.7);
  margin-bottom: 32px;
}
.nl-features {
  margin-bottom: 40px;
}
.nl-feature {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.nl-feature-num {
  font-family: "Playfair Display", serif;
  font-size: 1.25rem;
  color: var(--red);
  flex-shrink: 0;
  width: 28px;
}
.nl-feature-title {
  font-family: "Playfair Display", serif;
  font-size: 0.9375rem;
  color: var(--color-base);
  margin-bottom: 4px;
}
.nl-feature-desc {
  font-size: 0.875rem;
  color: var(--cream-dim);
  line-height: 1.6;
}
.nl-sub-area {
  background: var(--black);
  padding: 28px 32px;
}
.nl-sub-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.nl-sub-title {
  font-family: "Playfair Display", serif;
  font-size: 1.125rem;
  color: var(--off-white);
  margin-bottom: 18px;
}
.nl-input-row {
  display: flex;
  gap: 10px;
}
.nl-email {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #2a2a2a;
  background: #161616;
  color: var(--off-white);
  font-family: "Inter", sans-serif;
  font-size: 1rem;
}
.nl-email:focus {
  border-color: var(--red);
}
.nl-btn {
  padding: 12px 24px;
  background: var(--red);
  color: var(--off-white);
  border: none;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}
.nl-btn:hover {
  background: #a00e26;
}
.nl-success {
  margin-top: 14px;
  font-size: 0.75rem;
  color: #4a9b5a;
  display: none;
}
.nl-success.visible {
  display: block;
}

/* ── MAP SCREEN ───────────────────────────────────────────────── */
.map-screen {
  display: none;
  flex-direction: column;
  min-height: calc(100vh - 52px);
}
.map-screen.active {
  display: flex;
}
.map-header {
  background: var(--black);
  padding: 28px 32px 24px;
  border-bottom: 2px solid var(--red);
}
.map-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 700;
}
.map-title {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--off-white);
  letter-spacing: -0.8px;
  line-height: 1.05;
}
.map-title em {
  font-style: italic;
}
.map-subtitle {
  font-size: 1rem;
  color: rgba(227, 218, 201, 0.5);
  max-width: 560px;
  line-height: 1.7;
  margin-top: 10px;
  letter-spacing: 0.2px;
}

.map-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  position: relative;
}

/* World map view */
.world-map-wrap {
  flex: 1;
  padding: 24px 32px 32px;
  position: relative;
}
#world-map {
  width: 100%;
  max-height: calc(100vh - 220px);
  background: var(--color-primary);
}
#world-map path.land {
  fill: var(--cream);
  stroke: rgba(15, 15, 15, 0.28);
  stroke-width: 0.6;
  transition: fill 0.15s;
  cursor: pointer;
}
#world-map path.land.has-films {
  fill: #d0c3ab;
}
#world-map path.land:hover {
  fill: var(--black);
}
#world-map path.land.active {
  fill: var(--red);
}
#world-map path.land.no-data {
  cursor: default;
}
#world-map path.land.no-data:hover {
  fill: var(--cream);
}

.map-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--black);
  color: var(--off-white);
  padding: 12px 16px;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  min-width: 200px;
  max-width: 280px;
  border-left: 2px solid var(--red);
  opacity: 0;
  transition: opacity 0.1s;
  z-index: 10;
}
.map-tooltip.visible {
  opacity: 1;
}
.tt-name {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  color: var(--off-white);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
}
.tt-region {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.tt-films-label {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(227, 218, 201, 0.55);
  margin-bottom: 6px;
}
.tt-film {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.75rem;
  color: #c8c2b2;
  line-height: 1.5;
}
.tt-empty {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.75rem;
  color: rgba(227, 218, 201, 0.55);
}

.map-legend {
  display: flex;
  gap: 24px;
  padding: 0 32px 18px;
  align-items: center;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.legend-swatch {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-strong);
}
.legend-swatch.has-films {
  background: #e5dcc9;
}
.legend-swatch.no-films {
  background: #181818;
}
.map-stats {
  margin-left: auto;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  color: var(--cream-dim);
}
.map-stats strong {
  color: var(--color-base);
  font-family: "Playfair Display", serif;
  font-size: 0.875rem;
  font-weight: 600;
  margin-right: 4px;
}

/* Country detail view (inside Map screen) */
.country-detail {
  display: none;
  flex: 1;
  overflow-y: auto;
}
.country-detail.visible {
  display: block;
}
.country-back-bar {
  padding: 14px 36px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  background: #181818;
}
.country-back-btn {
  padding: 6px 18px;
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--color-base);
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.country-back-btn:hover {
  background: var(--black);
  color: var(--off-white);
  border-color: var(--color-base);
}
.country-bc {
  font-size: 0.875rem;
  color: var(--cream-dim);
  letter-spacing: 1px;
}

.country-header {
  padding: 32px 36px 28px;
  border-bottom: 1px solid var(--border-strong);
}
.country-red-rule {
  height: 2px;
  width: 40px;
  background: var(--red);
  margin-bottom: 14px;
}
.country-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  font-weight: 700;
}
.country-name {
  font-family: "Playfair Display", serif;
  font-size: 2.375rem;
  font-weight: 400;
  color: var(--color-base);
  letter-spacing: -0.8px;
  line-height: 1.05;
  margin-bottom: 16px;
}
.country-history {
  font-family: "Playfair Display", serif;
  font-size: 1.125rem;
  color: rgba(227, 218, 201, 0.85);
  line-height: 1.8;
  max-width: 720px;
}
.country-history-source {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-top: 14px;
}
.country-history-source a {
  color: var(--cream-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.country-history-source a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

.country-section {
  padding: 24px 36px;
  border-bottom: 1px solid var(--border);
}
.country-directors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
  margin-top: 6px;
}
.country-dir-card {
  background: var(--color-primary);
  padding: 16px 20px;
  cursor: pointer;
  transition: background 0.15s;
}
.country-dir-card:hover {
  background: #181818;
}
.country-dir-name {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  color: var(--color-base);
  margin-bottom: 4px;
}
.country-dir-meta {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
}
.country-dir-bio {
  font-family: "Lora", serif;
  font-size: 0.875rem;
  color: rgba(227, 218, 201, 0.7);
  margin-top: 8px;
  line-height: 1.6;
}

.country-films-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
  margin-top: 6px;
}
.country-film-row {
  background: var(--color-primary);
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.country-film-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--color-base);
}
.country-film-meta {
  font-size: 0.875rem;
  letter-spacing: 1px;
  color: var(--cream-dim);
  white-space: nowrap;
}
.country-film-badge {
  display: inline-block;
  padding: 2px 7px;
  margin-left: 8px;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: var(--black);
  color: var(--off-white);
  vertical-align: middle;
}

/* Featured films (top 5) get the prominent Criterion-styled treatment */
.country-featured-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border-strong);
  margin-top: 6px;
}
.country-featured-row {
  background: var(--color-primary);
  padding: 18px 22px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-left: 3px solid var(--red);
}
.country-featured-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--color-base);
  line-height: 1.25;
}
.country-featured-meta {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  white-space: nowrap;
}

/* Expandable "More films" block */
.country-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 18px;
  border: 1px solid var(--border-strong);
  background: none;
  color: var(--color-base);
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.country-more-toggle:hover {
  background: var(--black);
  color: var(--off-white);
  border-color: var(--color-base);
}
.country-more-toggle .arrow {
  transition: transform 0.2s;
  display: inline-block;
}
.country-more-toggle.expanded .arrow {
  transform: rotate(90deg);
}
.country-more-panel {
  display: none;
  margin-top: 20px;
}
.country-more-panel.visible {
  display: block;
}
.country-decade-block {
  margin-top: 22px;
}
.country-decade-label {
  font-size: 0.75rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
  font-family: "Inter", sans-serif;
}
.country-decade-rule {
  height: 1px;
  background: var(--border-strong);
  margin-bottom: 10px;
}

.map-loading {
  padding: 80px 36px;
  text-align: center;
}
.map-loading-text {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 0.875rem;
  color: var(--cream-dim);
}

/* Personal link banner */

/* Collection screen */
.collection-screen {
  padding: 0;
  width: 100%;
}
.collection-header {
  background: var(--black);
  padding: 28px 32px 24px;
  border-bottom: 2px solid var(--red);
}
.collection-title {
  font-family: "Playfair Display", serif;
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--off-white);
  letter-spacing: -0.8px;
}
.collection-grid {
  width: 100%;
  padding: 0;
}
.coll-card {
  background: var(--color-primary);
  padding: 20px;
  cursor: pointer;
  transition: background 0.15s;
}
.coll-card:hover {
  background: #181818;
}
.coll-card-spine {
  font-family: "Playfair Display", serif;
  font-size: 0.75rem;
  color: var(--red);
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.coll-card-name {
  font-family: "Playfair Display", serif;
  font-size: 1rem;
  color: var(--color-base);
  margin-bottom: 4px;
  line-height: 1.2;
}
.coll-card-country {
  font-size: 0.875rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cream-dim);
  margin-bottom: 10px;
}
.coll-card-films {
  font-family: "Playfair Display", serif;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--cream-dim);
  line-height: 1.5;
}

/* Suggested Journey */
#suggested-journey {
  background: var(--color-primary);
  padding: 32px;
  margin-top: 0;
}
.dna-suggest-cta {
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  color: var(--color-accent);
  text-decoration: underline;
}
.dna-suggest-rotate {
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  color: #8c8678;
  text-decoration: none;
}

/* Footer */
.site-footer {
  background: var(--color-primary);
  border-top: 2px solid var(--color-accent);
  padding: 60px 48px 32px;
  margin-top: 80px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 48px;
}
.footer-tagline-small {
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 3px;
  color: var(--color-accent);
  margin: 0 0 8px;
}
.footer-wordmark {
  font-family:
    Playfair Display,
    serif;
  font-size: 2.25rem;
  color: var(--color-base);
  font-weight: 700;
  margin: 0 0 16px;
}
.footer-copy {
  font-family: "Lora", serif;
  font-size: 0.9375rem;
  font-style: italic;
  color: #8c8678;
  line-height: 1.7;
  margin: 0 0 24px;
}
.footer-links a:hover {
  color: var(--color-base);
}
.footer-bottom {
  border-top: 1px solid rgba(15, 15, 15, 0.4);
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-closing {
  font-style: italic;
}

/* Affiliate badges */
.affiliate-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: Inter, sans-serif;
  font-size: 0.75rem;
  border: 1px solid var(--cream-border);
  color: var(--color-base);
  text-decoration: none;
  border-radius: 2px;
  cursor: pointer;
  margin-right: 8px;
  margin-top: 12px;
  background: transparent;
  transition: all 0.15s;
}
.affiliate-badge:hover {
  background: var(--color-primary);
  color: var(--color-base);
  border-color: var(--color-base);
}
.affiliate-badge.mubi {
  background: var(--color-accent);
  color: var(--color-base);
  border-color: var(--color-accent);
}
.affiliate-badge.mubi:hover {
  background: #a82f22;
  border-color: #a82f22;
  color: var(--color-base);
}
.affiliate-badge.criterion {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.affiliate-badge.criterion:hover {
  background: var(--color-accent);
  color: var(--color-base);
  border-color: var(--color-accent);
}

/* MOBILE RESPONSIVE FIXES (v2 — corrected selectors) */
@media (max-width: 768px) {
  /* FIX 1: Stop horizontal overflow */
  body,
  html {
    overflow-x: hidden;
    max-width: 100vw;
  }
  * {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* FIX 4: Atlas two-column to single-column layout */
  .atlas-body {
    grid-template-columns: 1fr !important;
  }
  .atlas-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .atlas-main {
    width: 100% !important;
    max-width: 100% !important;
  }
  .mv-featured {
    padding: 20px 16px 32px;
  }
  .mv-featured-grid {
    grid-template-columns: 1fr !important;
  }
  .mv-feat-poster-strip {
    height: 130px;
  }

  /* FIX 5: Text rendering — prevent narrow text wrapping in movements */
  .mv-detail p,
  .mv-detail h1,
  .mv-detail h2,
  .mv-detail h3 {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* FIX 6: Hide map legend on mobile */
  .map-legend {
    display: none !important;
  }

  /* FIX 7: D3 Map dimensions and SVG sizing */
  .world-map-wrap {
    width: 100% !important;
    height: 300px !important;
    min-height: 300px !important;
    padding: 0 !important;
  }
  #world-map {
    width: 100% !important;
    height: 300px !important;
    overflow: hidden !important;
  }

  /* FIX 8: Collection grid — change 3 columns to 2 */
  #collection-grid > div > div[style*="display:grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #collection-grid {
    padding: 20px 16px !important;
  }

  /* FIX 9: Director detail page — stack layout */
  .dir-header {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .film-card-grid {
    grid-template-columns: 1fr !important;
  }
  .mv-detail-directors {
    grid-template-columns: 1fr !important;
  }
  .mv-detail-related {
    grid-template-columns: 1fr !important;
  }

  /* FIX 10: General mobile padding and sizing */
  .entry-screen,
  .atlas-screen,
  .map-screen,
  .collection-screen,
  .newsletter-screen {
    padding: 0 16px !important;
  }
  .entry-hero {
    padding: 48px 16px 36px !important;
  }
  .atlas-header {
    padding: 24px 16px 20px !important;
  }
  .map-header {
    padding: 24px 16px 20px !important;
  }
  .collection-header {
    padding: 24px 16px 20px !important;
  }
  h1 {
    font-size: 2rem !important;
  }
  h2 {
    font-size: 1.4rem !important;
  }

  /* Collection page spacing fixes */
  #collection-grid {
    padding: 16px !important;
  }
  #collection-grid > div {
    margin-bottom: 24px !important;
  }
  #collection-grid h2,
  #collection-grid .region-heading {
    margin-top: 8px !important;
    margin-bottom: 12px !important;
  }

  .collection-screen .collection-header {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }

  /* Director detail film cards/tags — fix overlapping */
  .film-tags {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    row-gap: 8px !important;
    width: 100% !important;
    position: relative !important;
  }

  .film-tag {
    position: relative !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 0 !important;
    display: inline-block !important;
    flex-shrink: 1 !important;
  }

  /* DNA results container — reduce padding so right column has room */
  .entry-results {
    padding: 20px 16px !important;
  }

  .nl-input-row {
    flex-direction: column;
  }

  .nl-email,
  .nl-btn {
    width: 100%;
  }
}

/* DNA card: single-column stack at narrow widths */
@media (max-width: 480px) {
  .dna-film-item {
    flex-direction: column !important;
    align-items: flex-start !important;
    position: relative !important;
  }
  .dna-bm-btn {
    position: absolute !important;
    top: 24px !important;
    right: 0 !important;
  }
}

/* Loading animation for search */
@keyframes pulse {
  0%,
  100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

/* ── Watchlist bookmark button on film tiles ───────────────────── */
.film-card-bookmark {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s;
  background: rgba(15, 15, 15, 0.65);
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 2px;
  color: var(--color-base);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.film-card:hover .film-card-bookmark {
  opacity: 1;
}
.film-card-bookmark[style*="opacity: 1"] {
  opacity: 1;
}

/* MY LIST nav badge */
.wl-nav-badge {
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: var(--color-base);
  font-size: 0.75rem;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  margin-left: 5px;
  vertical-align: middle;
  line-height: 1;
}

/* ── Lineage of the Week — the red thread ───────────────────────────────── */
.lineage-shelf {
  background: var(--color-primary);
  padding: 64px 32px 80px;
  border-top: 1px solid var(--border-strong);
}
.lineage-shelf.hidden {
  display: none;
}
.lineage-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--red);
}
.lineage-headline {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 2.1rem;
  color: var(--off-white);
  margin: 16px 0 0;
}
.lineage-headline em {
  font-style: italic;
}
.lineage-blurb {
  margin-top: 14px;
  font-family: "Lora", serif;
  font-style: italic;
  color: #8f897d;
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 70ch;
}
/* The thread: one red line passing behind the posters — cards have opaque
   backgrounds, so it reads only in the gaps between them. */
.lineage-thread-row {
  position: relative;
  margin-top: 56px;
}
.lineage-thread-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  border-top: 1px solid var(--red);
  opacity: 0.55;
}
.lineage-cards {
  position: relative;
  display: flex;
  gap: 28px;
}
.lineage-card {
  flex: 1 1 0;
  min-width: 0;
  display: block;
  text-decoration: none;
}
.lineage-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  background: #141414;
  border: 1px solid #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.lineage-card:hover .lineage-poster {
  border-color: #8f897d;
}
.lineage-card.origin .lineage-poster {
  border-left: 3px solid var(--red);
}
.lineage-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lineage-mock-title {
  font-family: "Playfair Display", serif;
  font-style: italic;
  color: #8f897d;
  font-size: 1.15rem;
  padding: 0 12px;
  text-align: center;
}
.lineage-caption {
  margin-top: 14px;
}
.lineage-title {
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 0.98rem;
  color: var(--off-white);
}
.lineage-meta {
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
  color: #8f897d;
}
@media (max-width: 900px) {
  .lineage-shelf {
    padding: 40px 16px 48px;
  }
  /* Snap-scroll rail; the thread line is doing less work here — hide it. */
  .lineage-thread-row::before {
    display: none;
  }
  .lineage-cards {
    display: flex;
    overflow-x: auto;
    gap: 18px;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) transparent;
  }
  .lineage-card {
    flex: 0 0 46%;
    scroll-snap-align: start;
  }
}

/* ── Thread Shelves — static hand-curated lineages (8 anchors) ─────────────── */
#thread-shelves {
  background: var(--color-primary);
}

.thread-shelf {
  /* ── Poster-size lever ───────────────────────────────────────────────
     Single knob for the whole shelf. The heading, blurb, and 4-poster row
     all span this width, so the row stays edge-aligned with the heading
     while the four posters scale. Each poster ≈ (value − 64px padding −
     60px gaps) ÷ 4. BIGGER posters / tighter side margins → raise it (e.g.
     1500px). SMALLER posters / wider margins → lower it (e.g. 1200px). */
  --thread-shelf-width: 1360px;
  padding: 64px 32px 72px;
  border-top: 1px solid var(--border-strong);
  max-width: var(--thread-shelf-width);
  margin: 0 auto;
}
.thread-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.thread-heading {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 2rem;
  color: var(--color-base);
  line-height: 1.15;
  margin: 0 0 12px;
}
/* Upright Lora at paragraph length — bridge-copy voice, post-a11y (no italic). */
.thread-blurb {
  font-family: "Lora", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(227, 218, 201, 0.62);
  max-width: 64ch;
  margin: 0 0 40px;
}

/* Poster row + the thread: a thin crimson line crossing the row, read only in
   the gaps between the opaque posters. Posters sit above it via z-index. */
.thread-row-wrap {
  position: relative;
  overflow-x: auto;
}

/* ── Horizontal-scroll affordance (h-scroll.js) ──────────────────────────
   Fade + arrow pattern replacing the native scrollbar. The scrollbar is only
   hidden once JS wraps the row in .hscroll-frame, so no-JS keeps it usable. */
.hscroll-frame {
  position: relative;
}
.hscroll-frame > .thread-row-wrap {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hscroll-frame > .thread-row-wrap::-webkit-scrollbar {
  display: none;
}
.hscroll-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.hscroll-fade-left {
  left: 0;
  background: linear-gradient(to right, var(--color-primary), transparent);
}
.hscroll-fade-right {
  right: 0;
  background: linear-gradient(to left, var(--color-primary), transparent);
}
.hscroll-frame.has-left .hscroll-fade-left,
.hscroll-frame.has-right .hscroll-fade-right {
  opacity: 1;
}
.hscroll-arrow {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(15, 15, 15, 0.72);
  color: var(--color-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease, border-color 0.15s ease;
}
.hscroll-arrow:hover {
  border-color: var(--color-accent);
}
.hscroll-arrow-left {
  left: 6px;
}
.hscroll-arrow-right {
  right: 6px;
}
.hscroll-frame.has-left .hscroll-arrow-left,
.hscroll-frame.has-right .hscroll-arrow-right {
  opacity: 1;
}
.hscroll-arrow:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Touch devices: native swipe is the affordance — hide the arrows. */
@media (hover: none) {
  .hscroll-arrow {
    display: none;
  }
}
/* Line lives on .thread-row (the scrolling content) so it tracks the posters
   when the row scrolls; left/right:0 spans exactly the poster run. */
/* The thread itself: two crimson strands that twist/braid between posters,
   read only in the gaps (posters are opaque and sit above via z-index). The
   tiled SVG is a pair of out-of-phase curves crossing at each repeat boundary,
   so it reads as thread weaving the films together rather than a flat line. */
.thread-row::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  height: 16px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='16'%3E%3Cpath%20d='M0%208C4%202%208%202%2012%208%2016%2014%2020%2014%2024%208'%20fill='none'%20stroke='%23C0392B'%20stroke-width='1.8'/%3E%3Cpath%20d='M0%208C4%2014%208%2014%2012%208%2016%202%2020%202%2024%208'%20fill='none'%20stroke='%23C0392B'%20stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 24px 16px;
  opacity: 0.7;
  z-index: 0;
}
.thread-row {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 180px;
  justify-content: start;
  gap: 25px;
  width: max-content;
}
.thread-tile {
  position: relative;
  z-index: 1;
  display: block;
  text-decoration: none;
}
.thread-poster {
  position: relative;
  aspect-ratio: 2 / 3;
  background: #141414;
  border: 1px solid #2a2a2a;
  overflow: hidden;
  border-radius: var(--radius); /* rounded to match the film-page hero poster */
  transition: border-color 0.15s ease;
}
.thread-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thread-tile:hover .thread-poster {
  border-color: #8f897d;
}
/* The anchor owns the thread — a thicker crimson frame marks it as the spool
   the thread runs from. */
.thread-tile.is-anchor .thread-poster {
  border: 3px solid var(--color-accent);
}
.thread-tile.is-anchor:hover .thread-poster {
  border-color: var(--color-accent);
}
.thread-tile-meta {
  margin-top: 12px;
}
.thread-tile-title {
  font-family: "Lora", serif;
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--color-base);
}
.thread-tile-sub {
  margin-top: 4px;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: rgba(227, 218, 201, 0.55);
}
.thread-cta {
  display: inline-block;
  margin-top: 32px;
  font-family: "Inter", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.thread-cta:hover {
  opacity: 0.7;
}

/* ── Homepage hero redesign (2026-06-18): new browse blocks ── */

/* "Trace the threads." in the hero sub is a call-to-action that focuses the nav
   search bar (data-action="focus-search"). Crimson per the CTA colour role;
   upright so it stands out against the italic Lora sub. */
.home-hero-cta {
  color: var(--color-accent);
  font-style: normal;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.15s ease;
}
.home-hero-cta:hover {
  opacity: 0.7;
}

/* Hero search affordance — a ghost-input pill that hugs its content and focuses
   the nav search on click (data-action="focus-search"). Not a second search bar. */
.hero-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 10px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 40px;
  background: rgba(227, 218, 201, 0.05);
  text-decoration: none;
  cursor: text;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}
.hero-search:hover {
  border-color: rgba(227, 218, 201, 0.4);
  background: rgba(227, 218, 201, 0.08);
}
.hero-search-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(227, 218, 201, 0.5);
}
.hero-search-text {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  color: rgba(227, 218, 201, 0.55);
}
.hero-search-arrow {
  margin-left: 2px;
  color: var(--color-accent);
  font-size: 1rem;
}

/* Hero enclosure: copy/search + trust panel share ONE bordered container split
   by a divider, so the hero reads as a single block (not two islands). Border
   kept subtle + low-alpha so it stays distinct from the Lineage box below. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  align-items: stretch;
  max-width: var(--thread-shelf-width, 1360px);
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  background: rgba(227, 218, 201, 0.015); /* very subtle left-pane tint */
}
.hero-main {
  min-width: 0;
  padding: 30px 36px;
}

/* "How threads work" — the right pane of the enclosure (attached, not a floating
   card): slightly distinct fill + a divider border, content vertically centered. */
.hero-trust {
  border-left: 1px solid var(--border);
  background: #141210;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-trust-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
}
.hero-trust-head-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--color-accent);
}
.hero-trust-title {
  font-family: "Inter", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-base);
}
.hero-trust-lead {
  font-family: "Lora", serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(227, 218, 201, 0.62);
  margin: 0 0 18px;
}
.hero-trust-accent {
  color: var(--color-accent);
}
.hero-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  color: rgba(227, 218, 201, 0.7);
}
.hero-trust-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(227, 218, 201, 0.45);
}

/* Mood shelf — pills route to the interim search path. */
.mood-shelf {
  max-width: var(--thread-shelf-width, 1360px);
  margin: 0 auto;
  padding: 28px 32px;
  border-top: 1px solid var(--border-strong);
}
/* Heading + sub on one baseline (tightened — no full-width bordered container). */
.mood-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.mood-heading {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--color-base);
  margin: 0;
}
.mood-sub {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  color: rgba(227, 218, 201, 0.45);
  margin: 0;
}
.mood-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.mood-pill {
  font-family: "Inter", sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-base);
  text-decoration: none;
  border: 1px solid var(--border-strong);
  border-radius: 40px;
  padding: 9px 18px;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}
.mood-pill:hover {
  background: var(--color-base);
  color: var(--color-primary);
  border-color: var(--color-base);
}

/* The Atlas — poster-backed country tiles. */
.atlas-shelf {
  max-width: var(--thread-shelf-width, 1360px);
  margin: 0 auto;
  padding: 48px 32px;
  border-top: 1px solid var(--border-strong);
}
.atlas-shelf-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.atlas-shelf-heading {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  font-size: 1.6rem;
  color: var(--color-base);
  margin: 0;
}
.atlas-shelf-link {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.atlas-shelf-link:hover {
  opacity: 0.7;
}
.atlas-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.atlas-tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: #141414; /* shows through if a poster ever fails to load */
  border: 1px solid #2a2a2a;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.atlas-tile-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.atlas-tile-scrim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(15, 15, 15, 0.92), transparent);
  pointer-events: none;
}
.atlas-tile-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
}
.atlas-tile-country {
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-base);
}
.atlas-tile-film {
  margin-top: 2px;
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  color: rgba(227, 218, 201, 0.6);
}
.atlas-tile:hover {
  border-color: var(--color-accent);
}
.atlas-tile:hover .atlas-tile-poster {
  opacity: 0.85;
}

/* More threads to pull — stacked singular shelves under one eyebrow. */
.more-thread-divided {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid var(--border);
}
.more-thread-head {
  display: inline-block;
  text-decoration: none;
}
.more-thread-heading {
  font-size: 1.4rem;
  margin: 0 0 16px;
  transition: color 0.15s ease;
}
.more-thread-head:hover .more-thread-heading {
  color: var(--color-accent);
}

.home-footer {
  background: var(--color-primary);
  border-top: 2px solid var(--color-accent);
  padding: 20px 48px;
  margin-top: 80px;
}
.home-footer-inner {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  color: rgba(242, 237, 228, 0.45);
}
.home-footer-link {
  color: rgba(242, 237, 228, 0.55);
  text-decoration: none;
  transition: color 0.15s;
}
.home-footer-link:hover {
  color: rgba(242, 237, 228, 0.9);
}

@media (max-width: 768px) {
  /* Posters keep their fixed width and the row scrolls horizontally; the thread
     line scrolls with them. */
  .thread-shelf {
    padding: 40px 16px 48px;
  }
  .thread-heading {
    font-size: 1.5rem;
  }
  .thread-blurb {
    font-size: 1rem;
    margin-bottom: 28px;
  }
  .thread-row {
    gap: 10px;
  }
  .thread-row::before {
    top: 36%;
  }
  .thread-tile-title {
    font-size: 0.85rem;
  }
  .thread-tile-sub {
    font-size: 0.7rem;
  }
  /* Panes stack inside the same enclosure; divider becomes a horizontal border. */
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-main {
    padding: 28px 22px;
  }
  .hero-trust {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 26px 22px;
  }
  .mood-shelf,
  .atlas-shelf {
    padding: 32px 16px;
  }
  .mood-heading,
  .atlas-shelf-heading {
    font-size: 1.3rem;
  }
  .atlas-shelf-head {
    flex-direction: column;
    gap: 6px;
  }
  .atlas-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
  .more-thread-heading {
    font-size: 1.2rem;
  }
}