@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* NOTE: the source repo referenced these two files but never actually
   included them, so this @font-face pair was already inert on the original
   site (every place using --arabic-display / --arabic-body silently fell
   back to Noto Sans Arabic / Tahoma). If you have the real GE SS Two files,
   drop them in wp-content/themes/tamass/assets/fonts/ and this will pick
   them up automatically — nothing else needs to change. */
@font-face {
  font-family: 'GE SS Two';
  src: url('../fonts/GE-SS-Two-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GE SS Two';
  src: url('../fonts/GE-SS-Two-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f4f8fc;
  --paper-band: #edf3fb;
  --paper-band-alt: #e6eef9;
  --paper-line: rgba(37, 73, 124, 0.16);
  --paper-line-strong: rgba(37, 73, 124, 0.28);
  --ink: #15335d;
  --ink-soft: #5b7395;
  --accent: #2f67b2;
  --content-width: min(1240px, calc(100vw - 56px));
  --display: 'Bebas Neue', Impact, sans-serif;
  --body: 'Inter', 'Segoe UI', Aptos, Tahoma, sans-serif;
  --arabic-display: 'GE SS Two', 'Tahoma', sans-serif;
  --arabic-body: 'GE SS Two', 'Noto Sans Arabic', 'Tahoma', sans-serif;
  --radius-lg: 30px;
  --radius-md: 24px;
  --surface-card: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(244,249,255,0.9));
  --shadow-soft: 0 18px 38px rgba(31, 58, 102, 0.1);
  --shadow-card: 0 20px 42px rgba(31, 58, 102, 0.12);
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; min-height: 100%; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--tamass-body-font, var(--body));
  font-size: var(--tamass-body-size, initial);
  font-weight: var(--tamass-body-weight, initial);
  line-height: var(--tamass-body-line-height, initial);
  color: var(--ink);
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.72), transparent 34%),
    linear-gradient(180deg, #eef4fb 0%, #f7faff 52%, #eff4fb 100%);
}
button { font: inherit; }
img { display: block; max-width: 100%; }
/* Base anchor reset: the stylesheet never had one, so every <a> on the
   site (nav links, headings/cards that happen to be links, etc.) fell
   back to the browser's default underline. Components that WANT an
   underline (e.g. .press-card-link:hover, .cinema-latest-card-action)
   declare it explicitly via a class selector further down, which still
   wins over this tag-level rule — so this only removes the unintended,
   inherited underlines, never an intentional one. */
a { text-decoration: none; }
.app-shell { min-height: 100vh; }
.topbar-wrap, .page-shell, .site-footer { width: 100%; }
.page-shell, .timeline-band-inner { width: var(--content-width); margin-inline: auto; }
.topbar { width: var(--content-width); margin-inline: auto; }

.topbar-wrap {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244, 248, 252, 0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(255,255,255,0.45);
  border-bottom: 1px solid var(--paper-line-strong);
}
.edition-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 96px;
  padding: 10px 0;
}
.edition-copy, .lang-switch, .issue-label, .eyebrow, .clip-meta, .collage-caption, .button-primary, .button-secondary, .timeline-nav-chip, .timeline-year-tag {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.edition-copy, .eyebrow, .clip-meta, .collage-caption { color: var(--ink-soft); }
.edition-copy {
  /* Keep on a single line — wrapping under the masthead looks broken. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  letter-spacing: 0.08em;
  max-width: 100%;
  min-width: 0;
}
.brand-button, .topnav :is(button, a), .lang-switch button, .clip-button, .button-primary, .button-secondary, .front-clip-card, .timeline-nav-chip, .timeline-clip-link {
  appearance: none;
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
/* Split from a single combined rule so the Font Settings admin page
   (inc/font-settings.php) can control "Main Headings", "Category
   Titles", "Card Titles" and "Section Titles" independently, per the
   backend requirements. Grouping and computed values (color, base
   font-weight) are unchanged from the original combined rule — only
   font-family/weight/letter-spacing become admin-controllable, via
   var(--tamass-x, <original value>) fallbacks so nothing changes
   until an admin actually sets something. */
.masthead-button, .front-masthead, .about-hero-card h1 {
  font-family: var(--tamass-heading-font, var(--display));
  font-weight: var(--tamass-heading-weight, 400);
  font-size: var(--tamass-heading-size, initial);
  letter-spacing: var(--tamass-heading-letter-spacing, normal);
  color: var(--ink);
}
.section-heading h1, .section-heading h2 {
  font-family: var(--tamass-category-title-font, var(--display));
  font-weight: var(--tamass-category-title-weight, 400);
  letter-spacing: var(--tamass-category-title-letter-spacing, normal);
  text-transform: var(--tamass-category-title-transform, none);
  color: var(--ink);
}
.front-clip-copy h3, .clip-card h3 {
  font-family: var(--tamass-card-title-font, var(--display));
  font-weight: var(--tamass-card-title-weight, 400);
  font-size: var(--tamass-card-title-size, initial);
  color: var(--ink);
}
.about-card h2, .timeline-feature-header h2, .timeline-text-side h3, .archive-selected-copy h2 {
  font-family: var(--tamass-section-title-font, var(--display));
  font-weight: var(--tamass-section-title-weight, 400);
  font-size: var(--tamass-section-title-size, initial);
  letter-spacing: var(--tamass-section-title-letter-spacing, normal);
  color: var(--ink);
}
.archive-inline-copy h2 {
  font-family: var(--tamass-video-title-font, var(--display));
  font-weight: var(--tamass-video-title-weight, 400);
  font-size: var(--tamass-video-title-size, initial);
  color: var(--ink);
}
/* .article-file-title's real font declaration lives further down
   (grid-area/title rule) where it's the sole source of truth — see
   there for the --tamass-article-title-* wiring. */
.masthead-button {
  padding: 0;
  display: inline-flex;
  align-items: center;
  font-size: clamp(2.5rem, 5vw, 4rem);
  letter-spacing: 0.12em;
  line-height: 1;
}
.masthead-logo {
  display: block;
  /* The PNG aspect is roughly 2.3:1 (TAMASS wordmark + 2-line tagline below). */
  height: clamp(56px, 6.4vw, 78px);
  width: auto;
  /* Multiply blends the logo's near-black background into the light topbar
     so it doesn't sit as a hard dark plate. The dark navy text is dark
     enough to still read clearly. */
  mix-blend-mode: multiply;
}
/* Hamburger + drawer are hidden by default; the mobile breakpoint reveals
   them and hides the inline desktop pieces.
   !important guards against later same-specificity rules on `.lang-switch`
   accidentally changing the desktop controls. */
.menu-toggle { display: none !important; }
.menu-scrim { display: none !important; }
.menu-drawer { display: none !important; }

.topbar-left {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.topbar-left .lang-switch { flex-shrink: 0; }
.topbar-left .edition-copy { min-width: 0; }
.topnav {
  display: flex;
  align-items: center;
  gap: 17px;
  flex-wrap: nowrap;
}
/* Arabic: render the nav right-to-left so it reads
   search · main · archive · timeline · articles · indicators · press. */
.rtl-page .topnav { direction: rtl; }
.topnav :is(button, a) {
  white-space: nowrap;
  padding: 4px 0;
  font-family: var(--tamass-nav-font, inherit);
  font-size: var(--tamass-nav-size, 12.5px);
  font-weight: var(--tamass-nav-weight, inherit);
  letter-spacing: var(--tamass-nav-letter-spacing, 0.16em);
  text-transform: var(--tamass-nav-transform, uppercase);
}
.topnav :is(button, a).is-active, .topnav :is(button, a):hover, .lang-switch button.is-active, .lang-switch button:hover { color: var(--accent); }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
}

.page-shell { padding: 34px 0 48px; }
.centered-heading { text-align: center; }
.home-front-page, .timeline-page-shell, .clips-page-shell, .about-page-shell { padding-top: 48px; }
.timeline-heading, .clips-page-heading { max-width: 860px; margin-inline: auto; margin-bottom: 30px; }
.statement-copy h2 {
  margin: 8px 0 14px;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 1.04;
}
.section-heading h1, .section-heading h2 {
  margin: 8px 0 14px;
  font-size: var(--tamass-category-title-size, clamp(2.1rem, 4vw, 3.6rem));
  line-height: 1.04;
}
/* Page-level eyebrow kickers (Timeline / Archive / Articles / Indicators
   / Method) — pumped to ~3x the regular eyebrow so the page identity is
   immediately obvious at the top of each section. */
.section-heading.centered-heading > .eyebrow:first-child,
.timeline-heading > .eyebrow:first-child,
.clips-page-heading > .eyebrow:first-child {
  font-family: var(--display);
  font-size: clamp(2.6rem, 5vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 6px;
}
.rtl-page .section-heading.centered-heading > .eyebrow:first-child,
.rtl-page .timeline-heading > .eyebrow:first-child,
.rtl-page .clips-page-heading > .eyebrow:first-child {
  font-family: var(--arabic-display);
  font-weight: 700;
  letter-spacing: 0;
  font-size: clamp(2.8rem, 5.5vw, 4.2rem);
}
.front-body, .section-heading p, .front-clip-copy p, .about-card p, .timeline-text-side p, .archive-selected-copy p, .about-hero-card p {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.75;
}
.hero-actions, .featured-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.button-primary, .button-secondary {
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--tamass-button-font, inherit);
  font-size: var(--tamass-button-size, 12.5px);
  font-weight: var(--tamass-button-weight, inherit);
  letter-spacing: var(--tamass-button-letter-spacing, 0.16em);
  text-transform: var(--tamass-button-transform, uppercase);
}
.gold-button { border-color: rgba(47, 103, 178, 0.48); background: rgba(47, 103, 178, 0.12); }
.line-button { border-color: var(--paper-line-strong); background: rgba(255,255,255,0.6); }
.hero-panel .gold-button { border-color: rgba(180, 215, 255, 0.35); background: rgba(120, 175, 240, 0.15); color: #d0e2f8; }
.hero-panel .line-button { border-color: rgba(180, 215, 255, 0.2); background: rgba(255,255,255,0.06); color: rgba(200, 220, 245, 0.8); }

.front-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: 30px;
  align-items: stretch;
}
.front-hero-fullscreen {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 30px 60px rgba(14, 22, 35, 0.18);
}
.hero-panel,
.hero-image-panel,
.statement-panel,
.front-clip-card,
.about-card,
.archive-grid-card,
.archive-selected-panel,
.about-hero-card {
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.hero-panel {
  padding: 38px 38px 42px;
  background: linear-gradient(165deg, #0f2845 0%, #1a3c6b 60%, #234a7a 100%);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e8eff8;
}
.hero-panel-overlay {
  position: absolute;
  left: clamp(22px, 4vw, 48px);
  bottom: clamp(22px, 4vw, 44px);
  z-index: 3;
  width: min(820px, calc(100% - 44px));
  padding: clamp(20px, 2.4vw, 32px) clamp(24px, 3vw, 36px);
  background: linear-gradient(180deg, rgba(15, 18, 23, 0.66), rgba(15, 18, 23, 0.36));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
}
.hero-panel .issue-label { color: rgba(180, 205, 240, 0.7); }
.hero-panel .front-masthead {
  margin: 0 0 6px;
  font-size: clamp(2.87rem, 5.6vw, 4.76rem);
  line-height: 0.9;
  color: #f0f5fc;
}
.hero-panel .front-subline { color: rgba(210, 225, 245, 0.9); }
.hero-panel .front-body { color: rgba(180, 205, 240, 0.75); }
.front-subline {
  max-width: none;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(0.95rem, 1.68vw, 1.33rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-image-panel {
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.hero-image-panel-fullbleed {
  padding: 0;
}
.hero-image-frame {
  aspect-ratio: 1 / 0.92;
  overflow: hidden;
  border-radius: 24px;
  background: #cfddf0;
}
.hero-image-frame-fullscreen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 34px;
  background: #2d3948;
}
.hero-image-immersive {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: contrast(1.03) brightness(0.86) saturate(0.96);
}
.hero-image-overlay {
  position: absolute;
  inset: 0;
  /* Left side stays readable for the panel; right half lets the image breathe. */
  background:
    linear-gradient(90deg, rgba(8, 14, 20, 0.62) 0%, rgba(8, 14, 20, 0.38) 38%, rgba(8, 14, 20, 0.06) 62%, rgba(8, 14, 20, 0.18) 100%),
    linear-gradient(180deg, rgba(6, 10, 14, 0.06) 0%, rgba(6, 10, 14, 0.04) 50%, rgba(6, 10, 14, 0.42) 100%);
}
.hero-caption-rail {
  position: absolute;
  right: 28px;
  bottom: 28px;
  z-index: 2;
}
.hero-caption-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  color: rgba(238, 230, 214, 0.9);
  background: rgba(24, 28, 34, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
}
.statement-band,
.home-clips-grid-section { padding-top: 28px; }
.statement-panel {
  padding: 32px 34px 36px;
  background: linear-gradient(175deg, #1c3d68 0%, #234a7a 100%);
  border: 1px solid rgba(255,255,255,0.06);
  color: #d8e6f4;
}
.statement-panel .eyebrow { color: rgba(180, 210, 245, 0.6); }
.statement-panel h2 { color: #eaf2fc; }
.statement-panel p { color: rgba(190, 215, 245, 0.75); }
.home-grid-heading { margin-bottom: 18px; }
.about-grid, .archive-flow-grid { display: grid; gap: 18px; }
.archive-grid-card {
  padding: 12px 12px 16px;
  text-align: left;
  font-family: var(--tamass-card-font, inherit);
}
.archive-grid-card .clip-thumb {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  margin-bottom: 12px;
  background: rgba(57, 91, 141, 0.08);
  border-radius: 16px;
}
.clip-card h3 { margin: 6px 0 6px; font-size: var(--tamass-card-title-size, 1.35rem); line-height: 1.1; }

/* ─── Home featured clip ── single lead clip, video + description ── */
.home-featured-section { padding-top: 28px; }
.home-featured-clip {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 36px;
  align-items: start;
  padding: 20px;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  /* Always video-left / description-right, even on the RTL (Arabic) site. */
  direction: ltr;
}
/* Keep the description text itself reading right-to-left in Arabic. */
.rtl-page .home-featured-copy {
  direction: rtl;
  text-align: right;
}
.home-featured-media .vimeo-iframe,
.home-featured-media .vimeo-placeholder,
.home-featured-media video {
  display: block;
  width: 100%;
  border: 0;
}
.home-featured-media {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background: #0a0e14;
  box-shadow: var(--shadow-card);
}
.home-featured-media .vimeo-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.home-featured-copy {
  padding: 8px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.home-featured-copy h3 {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--ink);
}
.rtl-page .home-featured-copy h3 {
  font-family: var(--arabic-display);
  font-weight: 700;
}
.home-featured-copy p { margin: 0; line-height: 1.7; color: var(--ink-soft); }
.home-featured-copy .button-secondary { align-self: flex-start; margin-top: 8px; }

/* ── "Fresh on TAMASS" landing row (latest clip chip + article/infographic cards) ── */
.home-latest-heading { display: flex; align-items: center; gap: 18px; margin: 8px 0 20px; }
.home-latest-label {
  font-weight: 700;
  color: var(--ink);
  font-size: 1.08rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.home-latest-rule { flex: 1; height: 1px; background: var(--paper-line-strong); }
.home-latest-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  margin-top: 26px;
}
/* Latest row, desktop — three equal cards, fixed media window. */
.home-trio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 22px;
}
.home-trio-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: start;
  font: inherit;
  color: inherit;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.home-trio-card:hover,
.home-trio-card:focus-visible { border-color: rgba(47, 103, 178, 0.3); box-shadow: var(--shadow-card); }
.home-trio-media {
  position: relative;
  display: block;
  height: 210px;
  overflow: hidden;
  background: #0d1b30;
}
.home-trio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: filter 180ms ease, transform 180ms ease;
}
.home-trio-card:hover .home-trio-media img,
.home-trio-card:focus-visible .home-trio-media img { filter: brightness(0.94); transform: scale(1.012); }
.home-trio-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: #fff;
}
.home-trio-play::before {
  content: '';
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(10, 20, 34, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.home-trio-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.home-trio-body .home-latest-cta { margin-top: auto; }
@media (max-width: 900px) {
  .home-trio-grid { grid-template-columns: 1fr; }
  .home-trio-media { height: 190px; }
}

/* Variant B — ledger rows with small square thumbs. */
.home-ledger { margin-top: 18px; }
.home-ledger-row {
  appearance: none;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 12px 6px;
  text-align: start;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--paper-line);
  cursor: pointer;
  transition: background-color 160ms ease;
}
.home-ledger-row:hover,
.home-ledger-row:focus-visible { background: rgba(47, 103, 178, 0.035); }
.home-ledger .home-ledger-row:first-child { border-top: 1px solid var(--paper-line); }
.home-ledger-thumb {
  position: relative;
  width: 88px;
  height: 88px;
  border-radius: 12px;
  overflow: hidden;
  background: #0d1b30;
}
.home-ledger-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.home-ledger-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.7rem;
  background: rgba(10, 20, 34, 0.25);
}
.home-ledger-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.home-ledger-title { font-weight: 700; color: var(--ink); line-height: 1.5; }
.home-ledger-row:hover .home-ledger-title,
.home-ledger-row:focus-visible .home-ledger-title { color: var(--accent); }
.home-ledger-row:hover .home-series-arrow,
.home-ledger-row:focus-visible .home-series-arrow { opacity: 1; }
.home-ledger-meta { color: var(--ink-soft); font-size: 0.85rem; white-space: nowrap; }
@media (max-width: 640px) {
  .home-ledger-row { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .home-ledger-thumb { width: 64px; height: 64px; }
  .home-ledger-meta { display: none; }
}
.home-latest-card {
  appearance: none;
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: stretch;
  padding: 0;
  text-align: start;
  font: inherit;
  color: inherit;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.08);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.home-latest-card:hover,
.home-latest-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.home-latest-media {
  position: relative;
  display: block;
  min-height: 230px;
  overflow: hidden;
  background: #0d1b30;
}
.home-latest-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s ease;
}
.home-latest-card:hover .home-latest-media img { transform: scale(1.045); }
.home-latest-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.home-latest-chip {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: rgba(47, 103, 178, 0.1);
  border: 1px solid rgba(47, 103, 178, 0.22);
  padding: 4px 11px;
  border-radius: 999px;
}
.home-latest-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  line-height: 1.3;
  color: var(--ink);
}
.rtl-page .home-latest-title { font-family: var(--arabic-display); font-weight: 700; }
.home-latest-meta { color: var(--ink-soft); font-size: 0.85rem; }
.home-latest-excerpt {
  color: var(--ink-soft);
  line-height: 1.7;
  font-size: 0.92rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-latest-cta { margin-top: auto; padding-top: 8px; color: var(--accent); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 900px) {
  .home-latest-grid { grid-template-columns: 1fr; }
  .home-latest-card { grid-template-columns: 160px minmax(0, 1fr); }
  .home-latest-media { min-height: 190px; }
}
@media (max-width: 540px) {
  .home-latest-card { grid-template-columns: 1fr; }
  .home-latest-media { min-height: 0; height: 210px; position: relative; }
}

/* ── Page transitions: gentle fade-rise when switching pages ── */
@media (prefers-reduced-motion: no-preference) {
  main > .page-shell { animation: page-enter 260ms ease-out both; }
  @keyframes page-enter {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }

  .home-front-page .front-masthead,
  .home-front-page .front-subline {
    animation: home-hero-copy-in 420ms ease-out both;
  }
  .home-front-page .front-subline { animation-delay: 80ms; }
  @keyframes home-hero-copy-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }

  [data-home-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 360ms ease, transform 360ms cubic-bezier(.2, .7, .3, 1);
  }
  [data-home-reveal].is-visible {
    opacity: 1;
    transform: none;
  }

  [data-home-reveal] .home-latest-rule {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 420ms ease 80ms;
  }
  .rtl-page [data-home-reveal] .home-latest-rule { transform-origin: right center; }
  [data-home-reveal].is-visible .home-latest-rule { transform: scaleX(1); }

  [data-home-reveal] .home-trio-card,
  [data-home-reveal] .home-section-card,
  [data-home-reveal] .home-ledger-row,
  [data-home-reveal] .home-story-period {
    opacity: 0;
    transform: translateY(7px);
    transition-property: opacity, transform, border-color, background-color, box-shadow, color;
    transition-duration: 260ms, 260ms, 160ms, 160ms, 160ms, 160ms;
    transition-timing-function: ease;
  }
  [data-home-reveal].is-visible .home-trio-card,
  [data-home-reveal].is-visible .home-section-card,
  [data-home-reveal].is-visible .home-ledger-row,
  [data-home-reveal].is-visible .home-story-period {
    opacity: 1;
    transform: none;
  }
  [data-home-reveal].is-visible :is(.home-trio-card, .home-section-card, .home-ledger-row, .home-story-period):nth-child(2) { transition-delay: 45ms; }
  [data-home-reveal].is-visible :is(.home-trio-card, .home-section-card, .home-ledger-row, .home-story-period):nth-child(3) { transition-delay: 90ms; }
  [data-home-reveal].is-visible :is(.home-trio-card, .home-section-card, .home-ledger-row, .home-story-period):nth-child(4) { transition-delay: 135ms; }
  [data-home-reveal].is-visible :is(.home-trio-card, .home-section-card, .home-ledger-row, .home-story-period):nth-child(5) { transition-delay: 180ms; }
  [data-home-reveal].is-visible :is(.home-trio-card, .home-section-card, .home-ledger-row, .home-story-period):nth-child(6) { transition-delay: 225ms; }
  [data-home-reveal].is-visible .home-story-rail li:nth-child(2) .home-story-period { transition-delay: 45ms; }
  [data-home-reveal].is-visible .home-story-rail li:nth-child(3) .home-story-period { transition-delay: 90ms; }
  [data-home-reveal].is-visible .home-story-rail li:nth-child(4) .home-story-period { transition-delay: 135ms; }
  [data-home-reveal].is-visible .home-story-rail li:nth-child(5) .home-story-period { transition-delay: 180ms; }
  [data-home-reveal].is-visible .home-story-rail li:nth-child(6) .home-story-period { transition-delay: 225ms; }

  .home-statement.is-visible h3,
  .home-statement.is-visible .home-statement-body {
    animation: home-statement-copy-in 320ms ease-out both;
  }
  .home-statement.is-visible .home-statement-body { animation-delay: 70ms; }
  @keyframes home-statement-copy-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-story-visual img,
  .home-story-copy { animation: none; }
}

/* ── Full-bleed hero on the landing page ── */
.home-front-page { padding-top: 0; }
/* On home the header floats OVER the hero (fixed, out of flow) so the video
   touches the top of the page. At the top it's transparent (is-overlay);
   after scrolling it falls back to the normal solid / condensed styles. */
.page-home .topbar-wrap { position: fixed; top: 0; left: 0; right: 0; }
.topbar-wrap.is-overlay {
  background: linear-gradient(180deg, rgba(8, 14, 22, 0.8), rgba(8, 14, 22, 0));
  border: 0;
  backdrop-filter: none;
}
.topbar-wrap.is-overlay .masthead-logo {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0, 0, 0, 0.35));
}
/* White header text only on desktop — the mobile lang pill and hamburger keep
   their own light backgrounds, so their dark default text stays readable. */
@media (min-width: 761px) {
  .topbar-wrap.is-overlay .edition-copy { color: rgba(255, 255, 255, 0.85); }
  .topbar-wrap.is-overlay .lang-switch button { color: rgba(255, 255, 255, 0.82); }
  .topbar-wrap.is-overlay .lang-switch button.is-active { color: #fff; }
  .topbar-wrap.is-overlay .lang-switch span { color: rgba(255, 255, 255, 0.6); }
}
/* Mobile: solidify the pills slightly so they sit cleanly on any video frame. */
@media (max-width: 760px) {
  .topbar-wrap.is-overlay .menu-toggle { background: rgba(255, 255, 255, 0.85); border-radius: 999px; }
}

/* Single-article Featured Image: a compact visual index inside the blue title
   tab, in the physical right-hand position requested by the editor. */
.single-article-file > .article-file-tab {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(92px, 7vw, 112px);
  grid-template-areas:
    "title featured"
    "meta featured";
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  direction: ltr;
  min-height: 124px;
  padding: 16px 20px;
}

.single-article-file > .article-file-tab .article-file-meta {
  grid-area: meta;
  width: 100%;
  direction: rtl;
  text-align: right;
  align-self: start;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.single-article-file > .article-file-tab .article-file-title {
  grid-area: title;
  width: 100%;
  direction: rtl;
  text-align: right;
  align-self: end;
  font-size: clamp(1.45rem, 2.1vw, 2.15rem);
  line-height: 1.22;
}

.lang-en .single-article-file > .article-file-tab .article-file-meta,
.lang-en .single-article-file > .article-file-tab .article-file-title {
  direction: ltr;
  text-align: left;
}

.single-article-featured {
  grid-area: featured;
  position: static;
  transform: none;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(222, 194, 119, 0.78);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 6px 14px rgba(6, 23, 49, 0.3);
}

.single-article-featured img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .single-article-file > .article-file-tab {
    grid-template-columns: minmax(0, 1fr) 62px;
    column-gap: 10px;
    row-gap: 4px;
    min-height: 88px;
    padding: 11px 12px;
  }

  .single-article-file > .article-file-tab .article-file-title {
    font-size: clamp(1rem, 4.4vw, 1.25rem);
    line-height: 1.25;
  }

  .single-article-file > .article-file-tab .article-file-meta {
    font-size: 0.65rem;
  }

  .single-article-featured {
    width: 100%;
    border-radius: 0;
    box-shadow: 0 3px 8px rgba(6, 23, 49, 0.28);
  }
}
/* Keep the hero's sound cue clear of the floating header. */
.home-front-page .herovid-cue { top: 108px; }
/* The WHOLE 16:9 frame must fit on screen: cap the video at viewport height
   and center it on a dark band when the screen is shorter than 16:9. */
.home-front-page .front-hero-fullscreen { background: #0a0e14; }
.home-front-page .hero-video-frame {
  width: min(100vw, calc(100svh * 16 / 9));
  margin-inline: auto;
}
.home-front-page .front-hero-fullscreen {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(14, 22, 35, 0.16);
}
.home-front-page .home-featured-section { padding-top: 34px; }

/* ── Section index ("أقسام الموقع") ── */
.home-sections-block { margin-top: 40px; }
.home-sections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.home-section-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 22px;
  text-align: start;
  font: inherit;
  color: inherit;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.home-section-card:hover,
.home-section-card:focus-visible { border-color: var(--accent); background: rgba(255, 255, 255, 0.85); }
.home-section-title { font-weight: 700; color: var(--ink); font-size: 1.05rem; }
.home-section-count { color: var(--accent); font-size: 0.82rem; font-weight: 600; }
.home-section-desc { color: var(--ink-soft); font-size: 0.88rem; line-height: 1.6; }

/* ── The story in order — one focused documentary chapter at a time. ── */
.home-series-block { margin-top: 46px; }
.home-story-mobile { display: none; }
.home-story-stage {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(260px, 0.65fr);
  height: 286px;
  width: 100%;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--paper-line-strong);
  text-align: start;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 160ms ease;
}
.home-story-stage:hover { border-color: rgba(47, 103, 178, 0.34); }
.home-story-stage:focus-visible {
  outline: 3px solid rgba(47, 103, 178, 0.35);
  outline-offset: 4px;
}
.home-story-visual {
  position: relative;
  display: block;
  overflow: hidden;
  background: #102b4f;
}
.home-story-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.48) saturate(0.72) contrast(1.04);
  animation: home-story-image-in 220ms ease-out both;
}
@keyframes home-story-image-in {
  from { opacity: 0.5; transform: scale(1.012); }
  to { opacity: 1; transform: scale(1); }
}
.home-story-image-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(16, 43, 79, 0.08), rgba(16, 43, 79, 0.28));
  pointer-events: none;
}
.home-story-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 9px;
  padding: 24px 28px;
  background: #fff;
  animation: home-story-copy-in 180ms ease-out both;
}
@keyframes home-story-copy-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
.rtl-page .home-story-copy { align-items: flex-end; }
.home-story-count {
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}
.home-story-years {
  color: #9b7830;
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 0.92;
  letter-spacing: 0.025em;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
}
.rtl-page .home-story-years {
  font-family: var(--arabic-display);
  font-weight: 700;
  letter-spacing: 0;
}
.home-story-title {
  color: var(--ink);
  font-size: clamp(1.05rem, 1.55vw, 1.4rem);
  font-weight: 700;
  line-height: 1.45;
}
.home-story-cta {
  margin-top: 3px;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 700;
}
.home-story-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 22px 0 0;
}
.home-story-rail::before {
  content: '';
  position: absolute;
  top: 11px;
  inset-inline: 0;
  height: 1px;
  background: var(--paper-line-strong);
}
.home-story-period {
  appearance: none;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  min-height: 66px;
  padding: 9px 12px 6px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-inline-start: 1px solid var(--paper-line);
  text-align: start;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease;
}
.home-story-rail li:last-child .home-story-period { border-inline-end: 1px solid var(--paper-line); }
.home-story-dot {
  position: absolute;
  top: -14px;
  inset-inline-start: 12px;
  width: 8px;
  height: 8px;
  background: #f4f8fc;
  border: 2px solid var(--paper-line-strong);
  border-radius: 50%;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.home-story-period-years {
  color: inherit;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1;
  direction: ltr;
  unicode-bidi: isolate;
}
.rtl-page .home-story-period-years { font-family: var(--arabic-display); font-weight: 700; }
.home-story-period-title {
  color: inherit;
  font-size: 0.68rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-story-period.is-active { color: var(--ink); }
.home-story-period.is-active .home-story-period-years { color: #9b7830; }
.home-story-period.is-active .home-story-dot {
  background: #b99546;
  border-color: #b99546;
  transform: scale(1.22);
}
.home-story-period:hover,
.home-story-period:focus-visible { color: var(--ink); }
.home-story-period:focus-visible { outline: 2px solid rgba(47, 103, 178, 0.28); outline-offset: -2px; }
@media (max-width: 900px) {
  .home-story-stage { grid-template-columns: 1fr; height: auto; }
  .home-story-visual { aspect-ratio: 16 / 7; }
  .home-story-copy { min-height: 172px; padding: 20px 22px 22px; }
  .home-story-rail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(170px, 44vw);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: thin;
    padding-bottom: 10px;
  }
  .home-story-rail > li { scroll-snap-align: start; }
}
@media (max-width: 540px) {
  .home-story-visual { aspect-ratio: 16 / 7; }
  .home-story-copy { min-height: 162px; }
  .home-story-rail { grid-auto-columns: minmax(158px, 64vw); }
}

@media (max-width: 900px) {
  .home-story-desktop { display: none; }
  .home-story-mobile { display: block; }
  .home-story-mobile-track {
    display: flex;
    gap: 10px;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .home-story-mobile-track::-webkit-scrollbar { display: none; }
  .home-story-mobile-card {
    appearance: none;
    display: flex;
    flex: 0 0 min(520px, calc(100vw - 42px));
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--paper-line-strong);
    border-radius: 8px;
    text-align: start;
    scroll-snap-align: center;
    cursor: pointer;
  }
  .home-story-mobile-image {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    background: #102b4f;
  }
  .home-story-mobile-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.4) saturate(0.76) contrast(1.04);
  }
  .home-story-mobile-copy {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 17px 19px 19px;
  }
  .home-story-mobile-years {
    color: #9b7830;
    font-family: var(--display);
    font-size: clamp(1.75rem, 8vw, 2.35rem);
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .rtl-page .home-story-mobile-years {
    font-family: var(--arabic-display);
    font-weight: 700;
  }
  .home-story-mobile-title {
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
  }
  .home-story-mobile-index {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
    border-top: 1px solid var(--paper-line-strong);
  }
  .home-story-mobile-index button {
    appearance: none;
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 13px 2px 0;
    color: var(--ink-soft);
    background: none;
    border: 0;
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: color 160ms ease;
  }
  .home-story-mobile-index button::before {
    content: '';
    position: absolute;
    top: -4px;
    width: 7px;
    height: 7px;
    border: 1px solid var(--paper-line-strong);
    border-radius: 50%;
    background: #f4f8fc;
    transition: background-color 160ms ease, border-color 160ms ease;
  }
  .home-story-mobile-index button > span:first-child {
    font-family: var(--display);
    font-size: clamp(0.7rem, 2.8vw, 0.82rem);
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    direction: ltr;
    unicode-bidi: isolate;
  }
  .rtl-page .home-story-mobile-index button > span:first-child { font-family: var(--arabic-display); }
  .home-story-mobile-word {
    font-size: clamp(0.56rem, 2.15vw, 0.68rem);
    line-height: 1.2;
  }
  .home-story-mobile-index button.is-active { color: #9b7830; }
  .home-story-mobile-index button.is-active::before {
    background: #b99546;
    border-color: #b99546;
  }
}

/* ── Editorial statement band ── */
.home-statement {
  width: 100vw;
  margin: 56px calc(50% - 50vw) 0;
  text-align: center;
  padding: 58px max(28px, calc((100vw - 920px) / 2));
  background: #102b4f;
  border-block: 1px solid rgba(213, 181, 109, 0.28);
}
.home-statement-body { max-width: 640px; margin-inline: auto; }
.home-statement h3 {
  margin: 10px 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  color: #fff;
}
.rtl-page .home-statement h3 { font-family: var(--arabic-display); font-weight: 700; }
.home-statement .eyebrow { color: #d5b56d; }
.home-statement-body { margin: 0 auto; color: rgba(236, 243, 251, 0.78); line-height: 1.9; }
.clip-thumb-grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(18,45,83,0.14)),
    radial-gradient(circle at center, transparent 0%, rgba(30,52,90,0.08) 100%);
  mix-blend-mode: multiply;
}
.image-cool img { filter: saturate(0.88) contrast(1.02) brightness(0.96); }
.image-warm img { filter: saturate(0.96) contrast(1.01); }
.image-grain img { filter: grayscale(0.08) contrast(1.08) brightness(0.93); }
.image-soft img { filter: saturate(0.82) brightness(1.03); }
.image-tight-top img { object-position: center 20%; }
.image-tight-bottom img { object-position: center 78%; }
.image-focus-right img { object-position: 72% center; }
.image-focus-left img { object-position: 28% center; }

.timeline-floating-nav-wrap {
  position: sticky;
  top: 96px;
  z-index: 20;
  padding: 14px 0 18px;
  background: transparent;
  pointer-events: none;
}
.timeline-floating-nav-wrap > * {
  pointer-events: auto;
}
.timeline-nav-strip {
  display: inline-flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  background: rgba(248, 251, 255, 0.88);
  border: 1px solid rgba(37, 73, 124, 0.1);
  box-shadow: 0 12px 28px rgba(34, 60, 101, 0.08);
  border-radius: 999px;
}
.timeline-floating-nav-wrap { text-align: center; }
.timeline-nav-chip {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(37, 73, 124, 0.12);
  color: var(--ink-soft);
  background: rgba(255,255,255,0.8);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile-only year-range dropdown (replaces the chip strip on small
   screens). Hidden on desktop. */
.timeline-nav-select-wrap { display: none; }
.timeline-nav-chip.is-active, .timeline-nav-chip:hover {
  color: var(--accent);
  border-color: rgba(47, 103, 178, 0.34);
  background: rgba(47, 103, 178, 0.08);
}
/* One continuous gradient behind the whole timeline so sections bleed into
   each other instead of stepping. Bands themselves are transparent. */
.timeline-continuous-stack {
  display: grid;
  gap: 0;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: transparent;
}
.rtl-page .timeline-continuous-stack {
  margin-left: 0;
  margin-right: calc(50% - 50vw);
}
/* Single grid texture overlay across the entire stack so the lines don't
   restart at every section boundary. */
.timeline-continuous-stack::before {
  content: none;
}
.app-shell.page-timeline {
  background:
    linear-gradient(rgba(56, 89, 138, 0.078) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(56, 89, 138, 0.078) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(180deg, #edf3fb 0%, #eef1f6 16%, #ebf0f4 32%, #e9eef5 48%, #e6ecf3 64%, #e3e9f0 82%, #e0e6ed 100%);
}
.timeline-continuous-stack::after {
  content: none;
}
.timeline-band {
  position: relative;
  width: 100%;
  scroll-margin-top: 200px;
  overflow: hidden;
  background: transparent;
}
.band-0, .band-1, .band-2, .band-3, .band-4, .band-5, .band-6 {
  background: transparent;
}
.timeline-band-inner {
  position: relative;
  padding: 64px 0 56px;
}
.timeline-axis {
  position: absolute;
  /* Start higher above the first event so the line has visible "pre-roll"
     drawing in before reaching the first marker. */
  top: 150px;
  bottom: 24px;
  left: 50%;
  width: 6px;
  transform: translateX(-50%);
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(64, 111, 184, 0.25), rgba(47, 103, 178, 0.95), rgba(64, 111, 184, 0.25));
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.55), 0 0 18px rgba(47, 103, 178, 0.16);
  z-index: 0;
  /* Gentle fades keep the axis from starting or ending as a hard stub. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 18%, #000 36%, #000 72%, rgba(0,0,0,0.22) 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.18) 18%, #000 36%, #000 72%, rgba(0,0,0,0.22) 90%, transparent 100%);
  /* Scroll-driven reveal: as the axis enters the viewport, the clip-path
     uncovers from the top down, drawing the line in slowly before the first
     point. Browsers without support fall back to the static line. */
  animation: timelineLineDraw linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 70%;
}
@keyframes timelineLineDraw {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.timeline-section-heading {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 44px;
}
.timeline-feature-header h2 {
  margin: 8px 0 0;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  line-height: 0.96;
}
/* Section range label (e.g. 1990–1997) was reading as a thin sliver,
   especially in Arabic-Indic numerals. Bump significantly so it reads as
   a real chronological marker, not a footnote. */
.timeline-section-heading .eyebrow {
  display: inline-block;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink);
  padding: 10px 28px;
  border: 1px solid rgba(37, 73, 124, 0.18);
  border-radius: 999px;
  background: var(--surface-card);
  box-shadow: 0 6px 16px rgba(31, 58, 102, 0.08);
  /* The range pill must always read as a single line, no matter the
     viewport. Side scroll is OK if the page is narrow enough. */
  white-space: nowrap;
}
.rtl-page .timeline-section-heading .eyebrow {
  font-size: 38px;
  letter-spacing: 0;
  padding: 8px 28px;
}
.timeline-event-stack {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 54px;
}
.timeline-event-row { position: relative; }
.timeline-event-band { padding: 16px 0 20px; }
.timeline-event-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 0 8px;
  align-items: start;
}
.timeline-visual-side,
.timeline-text-side { grid-row: 1; }
.timeline-visual-side.place-left,
.timeline-text-side.place-left { grid-column: 1; }
.timeline-visual-side.place-right,
.timeline-text-side.place-right { grid-column: 3; }
/* Shrink the visual-side to its image width and anchor it to the spine
   edge of its grid cell with justify-self. justify-self respects writing
   mode, so end/start flip automatically in RTL — no separate overrides
   needed. */
.timeline-visual-side {
  width: 100%;
  max-width: 460px;
}
.timeline-visual-side.place-left { justify-self: end; }
.timeline-visual-side.place-right { justify-self: start; }
.timeline-text-side { width: 100%; }
.timeline-center-marker {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  min-height: 100%;
}
.timeline-node {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 18px;
  height: 18px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #f8fbff;
  border: 3px solid rgba(47, 103, 178, 0.9);
  box-shadow: 0 0 0 3px rgba(210, 229, 248, 0.95);
  z-index: 3;
}
.timeline-event-image-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 460px;
  overflow: hidden;
  background: #cfddf0;
  border-radius: 18px;
  border: 1px solid rgba(37, 73, 124, 0.08);
  box-shadow: var(--shadow-card);
}
/* Fill the whole 16:9 frame — stretch to fill (no whitespace, no clipping). */
.timeline-event-image {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.timeline-clip-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 6px 12px;
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid rgba(47, 103, 178, 0.22);
  border-radius: 999px;
  background: rgba(47, 103, 178, 0.05);
  position: relative;
  z-index: 2;
  transition: background 180ms ease, border-color 180ms ease;
}
.timeline-clip-link::after { content: ' →'; }
.rtl-page .timeline-clip-link::after { content: ' ←'; }
.timeline-clip-link:hover {
  background: rgba(47, 103, 178, 0.12);
  border-color: rgba(47, 103, 178, 0.4);
}
.timeline-text-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: start;
  padding-top: 0;
}
.timeline-event-row.is-right .timeline-text-side { align-items: flex-end; }
.timeline-year-callout {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 6px;
}
.timeline-year-callout.is-left { flex-direction: row-reverse; }
.timeline-year-callout.is-right { flex-direction: row; }
.timeline-year-line {
  display: none;
}
.timeline-year-tag {
  display: inline-block;
  font-family: 'Bebas Neue', Impact, sans-serif;
  font-style: normal;
  font-weight: 700;
  font-synthesis: weight;
  font-size: clamp(2.8rem, 4.8vw, 4.2rem);
  letter-spacing: 0.02em;
  text-transform: none;
  color: #1c4078;
  line-height: 0.85;
  transform: scaleY(0.85);
  transform-origin: center top;
  /* Display fonts (Bebas Neue, GE SS Two) carry leading above the cap line.
     Pull the digit upward so its visible top edge sits on the image's top
     edge across the spine. */
  margin-top: -10px;
}
.rtl-page .timeline-year-tag {
  font-family: var(--arabic-display);
  font-weight: 700;
}
.timeline-text-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.08);
  border-radius: 18px;
  padding: 16px 18px 20px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  /* Inherit parent's align-items so the card hugs the spine in both
     directions — flex-column align-items in Chrome correctly flips with
     RTL when no align-self override is forcing a side. */
}
.timeline-card-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  background:
    radial-gradient(120px 32px at 14% 100%, rgba(98, 143, 205, 0.35), transparent 65%),
    radial-gradient(170px 44px at 44% 100%, rgba(72, 110, 185, 0.4), transparent 66%),
    radial-gradient(160px 40px at 82% 100%, rgba(38, 77, 149, 0.48), transparent 64%);
  opacity: 0.95;
}
.timeline-text-side h3 {
  margin: 0 0 6px;
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: 0;
  position: relative;
  z-index: 1;
  max-width: 100%;
}
.timeline-text-side p {
  max-width: 100%;
  font-size: 0.88rem;
  position: relative;
  z-index: 1;
}

.archive-selected-panel {
  display: grid;
  grid-template-columns: minmax(340px, 1fr) minmax(320px, 1fr);
  gap: 40px;
  align-items: start;
  padding: 20px;
  margin-bottom: 26px;
}
.archive-selected-media { display: flex; flex-direction: column; }
.archive-expanded-frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 24px;
  background: #d8e0ed;
  box-shadow: var(--shadow-card);
}
.archive-selected-copy { padding-top: 12px; }
.archive-selected-copy h2 {
  margin: 10px 0 12px;
  font-size: clamp(2rem, 4vw, 3rem);
}
.archive-selected-copy blockquote {
  margin: 18px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--paper-line-strong);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.45;
}
/* ─── Sort bar ─── */
.archive-sort-bar {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.archive-sort-btn {
  appearance: none;
  border: 1px solid var(--paper-line);
  background: rgba(255,255,255,0.6);
  color: var(--ink-soft);
  padding: 0 16px;
  min-height: 38px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 180ms ease;
}
.archive-sort-btn.is-active {
  color: var(--accent);
  border-color: rgba(47, 103, 178, 0.34);
  background: rgba(47, 103, 178, 0.08);
  transition: all 180ms ease;
}
.archive-sort-btn:hover:not(.is-active) {
  border-color: var(--paper-line-strong);
  background: rgba(255,255,255,0.85);
}

.now-playing { margin-bottom: 18px; text-align: center; }
.more-clips-section { padding-top: 22px; }
.clips-feed-heading { border-bottom: 1px solid var(--paper-line); padding-bottom: 14px; margin-bottom: 22px; }
.archive-flow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.archive-grid-card {
  transition: transform 220ms ease;
}
.archive-grid-card:hover {
  transform: translateY(-4px);
}
.archive-grid-card .clip-thumb {
  box-shadow: 0 12px 28px rgba(31, 58, 102, 0.14);
  transition: box-shadow 220ms ease, transform 220ms ease;
}
/* "this is a video" play cue */
.clip-thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 220ms ease, transform 220ms ease;
}
.clip-thumb-play svg {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
.archive-grid-card:hover .clip-thumb-play {
  opacity: 1;
  transform: scale(1.07);
}
/* Selected clip: highlight the rounded thumbnail itself — a ring that hugs the
   image plus a lift — instead of a rectangular border around the whole card. */
.archive-grid-card.is-selected {
  position: relative;
  overflow: visible;
}
.archive-grid-card.is-selected .clip-thumb {
  box-shadow: 0 0 0 3px var(--accent), 0 20px 42px rgba(31, 58, 102, 0.30);
  transform: translateY(-3px);
}
.archive-grid-card.is-selected .clip-thumb-play {
  opacity: 1;
  transform: scale(1.07);
}
.archive-grid-card.is-selected h3 {
  color: var(--accent);
}
.archive-grid-card.is-selected::after {
  content: '';
  position: absolute;
  bottom: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--accent);
  z-index: 2;
}

/* ─── Inline expansion panel ─── */
.archive-inline-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.archive-inline-panel.is-open {
  grid-template-rows: 1fr;
}
.archive-inline-overflow {
  overflow: hidden;
}
.archive-inline-content {
  position: relative;
  padding: 22px 26px 26px;
  margin: 10px 0 14px;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.archive-inline-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  appearance: none;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255,255,255,0.8);
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.archive-inline-close:hover {
  background: rgba(47, 103, 178, 0.08);
  color: var(--ink);
}
.archive-inline-detail {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(280px, 0.58fr);
  gap: 28px;
  align-items: start;
  animation: inlinePanelFade 320ms ease 100ms both;
}
@keyframes inlinePanelFade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.archive-inline-media {
  display: flex;
  flex-direction: column;
}
.archive-inline-player {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #0a0e14;
}
/* The stage owns the aspect ratio (matches the video, set inline by VimeoPlayer;
   defaults to 4/5 until known) so the player never letter/pillar-boxes. */
.vimeo-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #0a0e14;
}
.vimeo-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.vimeo-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
}
.vimeo-thumb {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.vimeo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) brightness(0.6);
}
.vimeo-pending {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.vimeo-pending span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.archive-inline-copy h2 {
  margin: 8px 0 12px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
  color: var(--ink);
}
.archive-inline-copy p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  line-height: 1.72;
  font-size: 0.95rem;
}
.archive-inline-copy blockquote {
  margin: 14px 0 18px;
  padding-left: 16px;
  border-left: 2px solid var(--paper-line-strong);
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.2rem;
  line-height: 1.42;
  font-style: italic;
}
.archive-inline-copy .featured-actions {
  margin-top: 20px;
}

/* ─── Articles page ─── stack of folders that open up */
.article-stack {
  display: flex;
  flex-direction: column;
  margin-top: 36px;
}
.article-file {
  position: relative;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.12);
  border-radius: 14px;
  /* gentle stagger so the stack reads as papered folders */
  margin-left: calc(var(--stack-index, 0) * 1.5px);
  margin-right: calc(var(--stack-index, 0) * 1.5px);
  margin-top: -6px;
  /* subtle paper-layer shadow at top, drop shadow at bottom */
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.7) inset,
    0 -8px 18px -10px rgba(31, 58, 102, 0.18),
    0 6px 14px -10px rgba(31, 58, 102, 0.18);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 320ms ease,
              margin 320ms cubic-bezier(0.32, 0.72, 0, 1);
}
.article-file:first-child { margin-top: 0; }
.article-file.is-open {
  margin-left: 0;
  margin-right: 0;
  margin-top: 16px;
  margin-bottom: 16px;
  box-shadow: 0 30px 60px -18px rgba(31, 58, 102, 0.32),
              0 10px 22px -14px rgba(31, 58, 102, 0.22);
  z-index: 5;
}
.article-file:first-child.is-open { margin-top: 0; }

/* The closed tab — cool blue-white gradient */
.article-file-tab {
  appearance: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(238, 246, 255, 0.7) 100%);
  border: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta chevron"
    "title chevron";
  align-items: baseline;
  gap: 8px 28px;
  padding: 22px 26px;
  cursor: pointer;
  text-align: start;
  color: var(--ink);
  border-radius: 14px;
  transition: background 220ms ease, color 220ms ease;
}
.article-file:hover .article-file-tab {
  background: linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(228, 240, 254, 0.92) 100%);
}
/* Active folder — navy tab, white text */
.article-file.is-open .article-file-tab {
  background: linear-gradient(180deg, #15335d 0%, #1c4078 100%);
  color: #f0f5fc;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.article-file.is-open .article-file-meta { color: rgba(200, 218, 240, 0.78); }
.article-file.is-open .article-file-title { color: #f0f5fc; }
.article-file.is-open .article-file-chevron {
  color: #f0f5fc;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.article-file-meta {
  grid-area: meta;
  font-family: var(--tamass-article-meta-font, inherit);
  font-size: var(--tamass-article-meta-size, 12px);
  letter-spacing: var(--tamass-article-meta-letter-spacing, 0.16em);
  text-transform: var(--tamass-article-meta-transform, uppercase);
  color: var(--ink-soft);
  line-height: 1;
}
.article-file-title {
  grid-area: title;
  font-family: var(--tamass-article-title-font, var(--display));
  font-weight: var(--tamass-article-title-weight, 400);
  font-size: var(--tamass-article-title-size, clamp(1.55rem, 2.2vw, 1.95rem));
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: var(--ink);
  /* Closed folders keep titles to a single line with an ellipsis so
     every card in the stack reads as the same height. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* When this folder is the open one, let the title wrap to its full
   length — the tab visibly grows to fit it. */
.article-file.is-open .article-file-title {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
.article-file-chevron {
  grid-area: chevron;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-soft);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(37, 73, 124, 0.15);
  border-radius: 999px;
  transition: color 200ms ease, transform 280ms ease, background 200ms ease;
}
.article-file:hover .article-file-chevron {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.95);
}
.article-file.is-open .article-file-chevron {
  color: var(--accent);
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.95);
}

.rtl-page .article-file-title { text-align: right; }

/* Body of the folder — what slides out when opened */
.article-file-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms cubic-bezier(0.32, 0.72, 0, 1);
}
.article-file.is-open .article-file-body { grid-template-rows: 1fr; }
.article-file-overflow {
  overflow: hidden;
  border-radius: 0 0 14px 14px;
}

.article-file-content {
  /* single-column reading view sized for the card width */
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 30px 36px 40px;
  max-width: 780px;
  margin-inline: auto;
}
.article-file-media {
  aspect-ratio: 16 / 10;
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(57, 91, 141, 0.08);
  box-shadow: var(--shadow-soft);
}
.article-file-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.08) contrast(1.02);
}
.article-file-text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rtl-page .article-file-text { text-align: right; }
.article-byline {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-line);
  padding-bottom: 14px;
}
.article-file-text > p {
  margin: 0;
  color: var(--ink);
  font-family: var(--tamass-article-body-font, inherit);
  font-size: var(--tamass-article-body-size, 1.02rem);
  line-height: var(--tamass-article-body-line-height, 1.82);
}
.article-file-text p.article-excerpt {
  margin: 0 0 6px;
  font-family: var(--tamass-card-desc-font, var(--display));
  font-weight: 400;
  font-size: var(--tamass-card-desc-size, clamp(1.4rem, 2vw, 1.75rem));
  line-height: var(--tamass-card-desc-line-height, 1.3);
  letter-spacing: 0.01em;
  color: var(--ink);
}
.rtl-page .article-file-text p.article-excerpt {
  font-family: var(--tamass-card-desc-font, var(--arabic-display));
  font-weight: 700;
  letter-spacing: 0;
}
.article-infographic {
  display: block;
  appearance: none;
  border: 0;
  margin: 18px auto 4px;
  padding: 0;
  width: 60%;
  max-width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(57, 91, 141, 0.06);
  box-shadow: 0 12px 28px rgba(31, 58, 102, 0.12);
  cursor: zoom-in;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.article-infographic:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px rgba(31, 58, 102, 0.18);
}
.article-infographic img {
  display: block;
  width: 100%;
  height: auto;
}
.article-read-btn {
  align-self: flex-start;
  margin-top: 18px;
  background: transparent;
  border: 0;
  color: var(--accent);
  padding: 8px 0;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid var(--accent);
  border-radius: 0;
  min-height: auto;
}
.article-read-btn:hover { opacity: 0.75; }

/* ─── Indicators page ─── */
/* Accordion: each titled group collapses to a bar; tap to expand. */
.indicator-accordion {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
}
.indicator-section {
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  transition: box-shadow 280ms ease, transform 280ms ease, border-color 280ms ease;
}
/* Gentle lift on the closed bars so they read as tappable. */
.indicator-section:not(.is-open):hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(31, 58, 102, 0.14);
  border-color: var(--paper-line-strong);
}
.indicator-section.is-open {
  box-shadow: var(--shadow-card);
  border-color: transparent;
}
.indicator-section-toggle {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 24px 24px 28px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: start;
  color: var(--ink);
  transition: background 240ms ease, color 240ms ease;
}
.indicator-section.is-open .indicator-section-toggle {
  background: linear-gradient(165deg, #0f2845 0%, #1a3c6b 60%, #234a7a 100%);
  color: #f0f5fc;
}
/* Preview thumbnail of the section's first slide — a visual cue so people
   see what's inside instead of just reading a title. Hidden once open. */
.indicator-section-cover {
  flex: 0 0 auto;
  width: 52px;
  height: 66px;
  border-radius: 9px;
  overflow: hidden;
  background: #0f1d33;
  box-shadow: 0 4px 12px rgba(31, 58, 102, 0.16);
}
.indicator-section-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.indicator-section.is-open .indicator-section-cover { display: none; }
.indicator-section-title {
  flex: 1;
  min-width: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.14;
  letter-spacing: 0.01em;
}
.rtl-page .indicator-section-title {
  font-family: var(--arabic-display);
  font-weight: 700;
  letter-spacing: 0;
}
/* Small board-count pill sitting before the chevron. */
.indicator-section-count {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 9px;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  background: rgba(47, 103, 178, 0.1);
  color: var(--accent);
  transition: background 240ms ease, color 240ms ease;
}
.indicator-section.is-open .indicator-section-count {
  background: rgba(183, 218, 242, 0.22);
  color: #eaf4ff;
}
/* Chevron lives in a soft circular button that rotates on open. */
.indicator-section-chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 18px;
  line-height: 1;
  border-radius: 999px;
  background: rgba(47, 103, 178, 0.08);
  border: 1px solid rgba(37, 73, 124, 0.14);
  color: var(--accent);
  transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1), background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.indicator-section.is-open .indicator-section-chevron {
  transform: rotate(180deg);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
  color: #f0f5fc;
}
/* Collapsible body — smooth grid-rows expand (same pattern as articles) */
.indicator-section-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 420ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indicator-section.is-open .indicator-section-body { grid-template-rows: 1fr; }
.indicator-section-body-inner { overflow: hidden; min-height: 0; }
.indicator-section-body-pad { padding: 24px 24px 28px; }
/* ─── Carousel: browse a section's slides like a phone photo burst ─── */
.carousel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Force LTR internals so arrows/order behave identically in both languages
     (‹ = back on the left, › = forward on the right). */
  direction: ltr;
}
/* Each slide shown at its natural aspect, centered — no box, no letterbox,
   no blur. Sizes may differ between slides; they stay centered. */
.carousel-stage {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-main {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0 auto;
  display: block;
  max-width: 100%;
  cursor: zoom-in;
  line-height: 0;
}
.carousel-main img {
  display: block;
  max-width: 100%;
  max-height: 64vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 14px;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(31, 58, 102, 0.12);
  transition: background 160ms ease, transform 160ms ease;
}
.carousel-arrow:hover { background: #fff; }
/* Carousel is forced LTR, so start = left (prev ‹), end = right (next ›)
   consistently in both languages. */
.carousel-left { left: 10px; }
.carousel-right { right: 10px; }
/* Mobile: no arrows — swipe to flip. Arrows are desktop-only. */
@media (max-width: 760px) {
  .carousel-arrow { display: none; }
}
/* Position indicator: "n / total" */
.carousel-indicator {
  text-align: center;
  font-family: var(--body);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
/* Thumbnail strip — current one highlighted; click to jump. */
.carousel-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  /* centered when they fit, falls back to start-aligned (scrollable) when
     there are too many to fit — avoids clipping the first thumbnails. */
  justify-content: safe center;
}
/* Arabic-first: the thumbnail strip reads right-to-left (slide 1 on the right). */
.rtl-page .carousel-thumbs { direction: rtl; }
.carousel-thumb {
  flex: 0 0 auto;
  width: 50px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.carousel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-thumb.is-active {
  opacity: 1;
  border-color: var(--accent);
}
.carousel-thumb:hover { opacity: 0.85; }

/* ─── Indicator albums: a grid of collection covers (tap to open carousel) ─── */
.indicator-albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 22px;
  margin-top: 28px;
}
.indicator-album {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: start;
}
.indicator-album-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: #0f1d33;
  box-shadow: var(--shadow-soft);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.indicator-album:hover .indicator-album-cover,
.indicator-album:focus-visible .indicator-album-cover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.indicator-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.indicator-album-count {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(15, 29, 51, 0.82);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.indicator-album-title {
  font-family: var(--tamass-indicator-font, var(--display));
  font-weight: var(--tamass-indicator-weight, 400);
  font-size: var(--tamass-indicator-size, clamp(1.15rem, 2vw, 1.5rem));
  line-height: 1.2;
  color: var(--ink);
}
.rtl-page .indicator-album-title {
  font-family: var(--tamass-indicator-font, var(--arabic-display));
  font-weight: var(--tamass-indicator-weight, 700);
}

/* ─── Collection modal (opens the carousel) ─── */
.indicator-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(8, 17, 33, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: lightboxFadeIn 160ms ease both;
}
.indicator-modal-panel {
  width: min(560px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(8, 17, 33, 0.45);
  padding-bottom: 18px;
}
.indicator-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 14px;
}
.indicator-modal-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  line-height: 1.15;
  color: var(--ink);
}
.rtl-page .indicator-modal-head h2 {
  font-family: var(--arabic-display);
  font-weight: 700;
}
.indicator-modal-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.indicator-modal-close:hover { background: #fff; color: var(--accent); }
/* keep the carousel comfortably inside the modal */
.indicator-modal .carousel-main img { max-height: 58vh; }

.image-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(8, 17, 33, 0.86);
  backdrop-filter: blur(6px);
  animation: lightboxFadeIn 180ms ease both;
}
@keyframes lightboxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.image-lightbox-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-select: none;
}
.image-lightbox-stage.is-zoomed { cursor: grab; }
.image-lightbox-stage.is-dragging { cursor: grabbing; }
.image-lightbox-img {
  display: block;
  /* Fit inside the page at rest (leaving room for the toolbar); zoom is
     opt-in via the controls. */
  max-width: 88vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  transform-origin: center center;
  will-change: transform;
  -webkit-user-drag: none;
}

/* ─── Global archive search ─── */
.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid var(--paper-line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.nav-search-btn:hover {
  background: #fff;
  color: var(--accent);
  border-color: rgba(47, 103, 178, 0.4);
}
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(8, 17, 33, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(40px, 10vh, 120px) 16px 16px;
  animation: lightboxFadeIn 160ms ease both;
}
.search-panel {
  width: min(640px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--paper-line-strong);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(8, 17, 33, 0.4);
  overflow: hidden;
}
.search-input {
  appearance: none;
  border: 0;
  border-bottom: 1px solid var(--paper-line);
  background: #fff;
  padding: 18px 22px;
  font-family: var(--tamass-search-font, var(--body));
  font-size: var(--tamass-search-size, 1.05rem);
  color: var(--ink);
  width: 100%;
  outline: none;
}
.rtl-page .search-input {
  text-align: right;
  font-family: var(--tamass-search-font, var(--arabic-body));
}
.search-results {
  overflow-y: auto;
  padding: 8px;
  font-family: var(--tamass-search-font, inherit);
}
.search-hint {
  color: var(--ink-soft);
  text-align: center;
  padding: 28px 16px;
  font-size: 0.92rem;
  margin: 0;
}
.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 12px;
  text-align: start;
  color: var(--ink);
  transition: background 140ms ease;
}
.search-result:hover {
  background: rgba(47, 103, 178, 0.08);
}
.search-result-thumb {
  flex: 0 0 auto;
  width: 46px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  background: #0f1d33;
}
.search-result-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.search-result-title {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.25;
}
.rtl-page .search-result-title {
  font-family: var(--arabic-body);
  font-weight: 700;
}
.search-result-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}
.menu-drawer-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: start;
  appearance: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.08);
  color: #f0f5fc;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 12px 16px;
  margin-bottom: 14px;
  font-family: var(--body);
  font-size: 15px;
}
.image-lightbox-toolbar {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 102;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.96);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.32);
}
.image-lightbox-toolbar button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox-toolbar button:hover:not(:disabled) {
  background: rgba(47, 103, 178, 0.12);
}
.image-lightbox-toolbar button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.image-lightbox-toolbar button:last-child {
  width: auto;
  padding: 0 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.image-lightbox-zoom-readout {
  min-width: 56px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-soft);
}
.image-lightbox-close {
  position: fixed;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  z-index: 102;
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
.image-lightbox-close:hover { background: #fff; }
.rtl-page .image-lightbox-close { right: auto; left: 22px; }
.indicator-card h3 {
  margin: 4px 0 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.05;
  color: var(--ink);
}
.indicator-caption {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
.indicator-detail {
  padding: 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: inlinePanelFade 320ms ease both;
}
.indicator-detail p {
  margin: 0;
  color: var(--ink);
  line-height: 1.74;
}
.indicator-source {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.indicator-detail .button-secondary {
  align-self: flex-start;
}

.about-page-shell {
  display: grid;
  gap: 26px;
}
.about-hero-card {
  padding: 30px 32px 34px;
}
.about-hero-card h1 {
  margin: 8px 0 12px;
  font-family: var(--tamass-heading-font, var(--display));
  font-size: var(--tamass-heading-size, clamp(2.5rem, 5vw, 4.2rem));
  line-height: 0.98;
  text-align: center;
}
.about-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.about-card { padding: 22px 22px 24px; }
.about-card h2 { margin: 0 0 12px; font-size: 1.55rem; }

.about-hero-card p {
  margin: 0 0 14px;
  color: var(--ink);
  line-height: 1.78;
  font-size: 1.02rem;
}
.about-hero-card p:last-child { margin-bottom: 0; }

.about-quote {
  margin: 0;
  padding: 32px 38px;
  background: linear-gradient(170deg, #1c3d68 0%, #234a7a 100%);
  border-radius: var(--radius-lg);
  color: #eaf2fc;
  font-family: var(--tamass-quote-font, var(--display));
  font-weight: var(--tamass-quote-weight, 400);
  font-size: var(--tamass-quote-size, clamp(1.6rem, 3vw, 2.3rem));
  line-height: 1.25;
  letter-spacing: 0.02em;
  box-shadow: var(--shadow-card);
  text-align: center;
  position: relative;
}
.about-quote::before,
.about-quote::after {
  content: '"';
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: rgba(180, 215, 255, 0.55);
  vertical-align: -0.18em;
}
.about-quote::before { margin-right: 8px; }
.about-quote::after  { margin-left: 8px; }
.rtl-page .about-quote {
  font-family: var(--tamass-quote-font, var(--arabic-display));
  font-weight: var(--tamass-quote-weight, 700);
}
.rtl-page .about-quote::before,
.rtl-page .about-quote::after {
  font-family: var(--display);
}

.about-extra-card {
  padding: 30px 32px 34px;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.about-extra-card h2 {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.1;
  color: var(--ink);
}
.about-extra-card p {
  margin: 0 0 12px;
  color: var(--ink);
  line-height: 1.78;
  font-size: 1rem;
}
.about-extra-card p:last-child { margin-bottom: 0; }
.about-questions {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}
.about-questions li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.6;
}
.about-questions li::before {
  content: '←';
  position: absolute;
  inset-inline-start: 0;
  color: var(--accent);
  font-weight: 700;
}
.rtl-page .about-questions li::before { content: '→'; }
.rtl-page .about-extra-card h2 {
  font-family: var(--arabic-display);
  font-weight: 700;
}

/* ─── Editorial polish pass ───
   Keep the archival identity, but sharpen the publication rhythm: quieter
   surfaces, firmer type contrast, fewer floating cards, and clearer states. */
:root {
  --ink-soft: #486786;
  --radius-lg: 16px;
  --radius-md: 12px;
  --surface-card: rgba(255, 255, 255, 0.88);
  --shadow-soft: 0 6px 18px rgba(31, 58, 102, 0.07);
  --shadow-card: 0 10px 24px rgba(31, 58, 102, 0.1);
}

.topbar-wrap {
  background: rgba(247, 250, 253, 0.97);
  backdrop-filter: blur(4px);
  transition: background 220ms ease, border-color 220ms ease, backdrop-filter 220ms ease;
}
.edition-bar {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
  transition: min-height 220ms ease, padding 220ms ease;
}
.masthead-button {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  transition: opacity 180ms ease, transform 220ms ease;
}
.topnav-desktop {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  padding: 10px 16px;
  border: 1px solid rgba(37, 73, 124, 0.1);
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.68);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 14px rgba(34, 60, 101, 0.06);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.topbar-left {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  flex-direction: row-reverse;
  transition: opacity 180ms ease, transform 220ms ease;
}
.topbar-left .edition-copy {
  max-width: 240px;
  text-align: right;
}
.topbar-wrap.is-condensed {
  background: transparent;
  backdrop-filter: none;
  border-color: transparent;
  pointer-events: none;
}
.topbar-wrap.is-condensed .edition-bar {
  min-height: 0;
  padding: 8px 0;
}
.topbar-wrap.is-condensed .masthead-button,
.topbar-wrap.is-condensed .topbar-left {
  position: absolute;
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}
.topbar-wrap.is-condensed .topnav-desktop {
  pointer-events: auto;
  background: rgba(248, 251, 255, 0.74);
  border-color: rgba(37, 73, 124, 0.14);
  box-shadow: 0 8px 20px rgba(34, 60, 101, 0.08);
}
.masthead-logo { height: clamp(62px, 6.7vw, 82px); }
.topnav :is(button, a) {
  position: relative;
  color: #315477;
  transition: color 160ms ease;
}
.topnav :is(button, a)::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 160ms ease;
}
.topnav :is(button, a).is-active::after,
.topnav :is(button, a):hover::after { transform: scaleX(1); }
.topnav :is(button, a).is-active { color: var(--ink); }

.front-hero-fullscreen {
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(14, 22, 35, 0.14);
}
.hero-image-frame-fullscreen { border-radius: 18px; }
.hero-panel-overlay {
  left: clamp(20px, 3vw, 38px);
  bottom: clamp(20px, 3vw, 34px);
  max-width: 760px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.6vw, 30px);
  border-radius: 10px;
  background: rgba(10, 20, 34, 0.74);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(4px);
}
.hero-image-overlay {
  background:
    linear-gradient(90deg, rgba(8, 14, 20, 0.52) 0%, rgba(8, 14, 20, 0.2) 38%, rgba(8, 14, 20, 0.02) 68%, rgba(8, 14, 20, 0.1) 100%),
    linear-gradient(180deg, rgba(6, 10, 14, 0.02) 0%, rgba(6, 10, 14, 0.03) 55%, rgba(6, 10, 14, 0.32) 100%);
}
.home-featured-clip {
  border-radius: 12px;
  box-shadow: none;
  border-color: rgba(37, 73, 124, 0.16);
}
.home-featured-media {
  border-radius: 8px;
  box-shadow: none;
}

.timeline-axis {
  width: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.5);
}
.timeline-nav-strip {
  background: rgba(248, 251, 255, 0.7);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 14px rgba(34, 60, 101, 0.06);
}
@media (min-width: 761px) {
  .timeline-page-shell { padding-top: 22px; }
  .timeline-heading { margin-bottom: 10px; }
  .timeline-band-inner { padding-top: 22px; }
  .timeline-axis {
    top: 270px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.52) 4%, #000 11%, #000 78%, rgba(0,0,0,0.22) 92%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.52) 4%, #000 11%, #000 78%, rgba(0,0,0,0.22) 92%, transparent 100%);
  }
  .timeline-floating-nav-wrap {
    position: fixed;
    top: 50%;
    left: 12px;
    z-index: 24;
    width: auto;
    padding: 0;
    transform: translateY(-50%);
  }
  .timeline-nav-strip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: auto;
    max-width: none;
    padding: 7px;
    border-radius: 10px;
    background: rgba(248, 251, 255, 0.68);
  }
  .timeline-nav-chip {
    width: 92px;
    min-height: 30px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 9.5px;
    letter-spacing: 0.04em;
    text-align: center;
  }
}

/* Desktop editorial refinement batch */
:root {
  --editorial-rule: rgba(37, 73, 124, 0.18);
}

.home-featured-clip,
.archive-inline-content,
.article-file.is-open,
.timeline-text-card {
  border-color: var(--editorial-rule);
}

.timeline-event-image-wrap,
.home-featured-media,
.article-file-media,
.indicator-album-cover {
  border-radius: 8px;
}

.indicator-album-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--editorial-rule);
}

.indicator-album-total {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
}

@media (min-width: 761px) {
  .hero-image-frame-fullscreen {
    aspect-ratio: 16 / 8.35;
  }

  .home-featured-section {
    padding-top: 16px;
  }

  .timeline-nav-strip {
    background: rgba(248, 251, 255, 0.52);
    border-color: var(--editorial-rule);
  }

  .timeline-nav-chip {
    color: rgba(72, 103, 134, 0.68);
    font-size: 10px;
    background: transparent;
    border-color: transparent;
  }

  .timeline-nav-chip:hover {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.58);
    border-color: rgba(47, 103, 178, 0.16);
  }

  .timeline-nav-chip.is-active {
    color: #fff;
    background: var(--accent);
    border-color: var(--accent);
  }

  .timeline-text-card {
    background: rgba(250, 252, 255, 0.82);
    border-top: 2px solid rgba(47, 103, 178, 0.38);
    box-shadow: none;
  }

  .timeline-card-wave {
    height: 36px;
    opacity: 0.22;
  }

  .article-file-tab {
    grid-template-columns: 132px minmax(0, 1fr) auto;
    grid-template-areas:
      'preview meta chevron'
      'preview title chevron';
    gap: 7px 20px;
    padding: 14px 4px;
  }

  .article-file-preview {
    grid-area: preview;
    display: block;
    width: 132px;
    height: 78px;
    overflow: hidden;
    border-radius: 6px;
    background: rgba(57, 91, 141, 0.08);
  }

  .article-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.08) contrast(1.02);
  }

  .article-file.is-open .article-file-preview {
    opacity: 0.72;
  }

  .article-file-overflow {
    border-top: 1px solid var(--editorial-rule);
  }

  .article-file-content {
    max-width: 710px;
  }

  .article-file-text > p {
    color: #17365c;
  }

  .indicator-album-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .indicator-modal-panel {
    width: min(680px, calc(100vw - 48px));
  }

  .indicator-modal .carousel-stage {
    max-width: 540px;
  }

  .indicator-modal .carousel-arrow {
    width: 44px;
    height: 44px;
  }

  .indicator-modal .carousel-thumbs {
    gap: 6px;
    padding-top: 2px;
  }

  .indicator-modal .carousel-thumb {
    width: 46px;
    height: 58px;
    border-radius: 6px;
    opacity: 0.38;
  }

  .indicator-modal .carousel-thumb.is-active {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .article-file-preview {
    display: none;
  }

  .article-file-tab {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'meta chevron'
      'title chevron';
  }
}
.timeline-text-card {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(31, 58, 102, 0.06);
}
.timeline-event-image-wrap {
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(31, 58, 102, 0.08);
}

.archive-flow-grid { gap: 28px 22px; }
.archive-grid-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--paper-line);
}
.archive-grid-card .clip-thumb {
  border-radius: 8px;
  margin-bottom: 14px;
}
.archive-grid-card:only-child {
  grid-column: 1 / -1;
  width: min(430px, 100%);
  justify-self: center;
}
.archive-flow-grid:has(.archive-grid-card:only-of-type) .archive-grid-card {
  grid-column: 1 / -1;
  width: min(430px, 100%);
  justify-self: center;
}
.archive-inline-content {
  border-radius: 10px;
  box-shadow: none;
  border-color: rgba(37, 73, 124, 0.18);
}
.archive-inline-player { border-radius: 8px; }

.article-stack {
  max-width: 1080px;
  margin-inline: auto;
}
.article-file {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
  border-color: var(--paper-line-strong);
  background: transparent;
  box-shadow: none;
}
.article-file.is-open {
  margin: 0;
  border: 1px solid var(--paper-line-strong);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(31, 58, 102, 0.08);
}
.article-file-tab {
  padding: 20px 4px;
  border-radius: 0;
  background: transparent;
}
.article-file:hover .article-file-tab { background: rgba(255, 255, 255, 0.58); }
.article-file.is-open .article-file-tab {
  border-radius: 9px 9px 0 0;
  background: #173861;
}
.article-file-chevron {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: transparent;
}
.article-file-content { max-width: 740px; }
.article-file-media {
  border-radius: 6px;
  box-shadow: none;
}

.indicator-albums {
  gap: 18px;
  margin-top: 20px;
}
.indicator-album { gap: 10px; }
.indicator-album-cover {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(31, 58, 102, 0.08);
}
.indicator-album:hover .indicator-album-cover,
.indicator-album:focus-visible .indicator-album-cover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(31, 58, 102, 0.12);
}
.indicator-album-count {
  top: 10px;
  inset-inline-end: 10px;
  min-width: 26px;
  height: 26px;
  border-radius: 13px;
}
.indicator-modal-panel {
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(8, 17, 33, 0.36);
}
.carousel-main img { border-radius: 6px; }
.carousel-arrow {
  width: 38px;
  height: 38px;
  box-shadow: 0 3px 10px rgba(31, 58, 102, 0.12);
}

.about-page-shell {
  max-width: 900px;
  gap: 34px;
}
.about-hero-card,
.about-extra-card {
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.about-hero-card p,
.about-extra-card p {
  max-width: 740px;
  margin-inline: auto;
}
.about-hero-card .eyebrow,
.about-hero-card h1,
.about-extra-card h2 { max-width: 740px; margin-inline: auto; }
.about-quote {
  padding: 28px 34px;
  border-radius: 8px;
  box-shadow: none;
}

button:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 3px solid rgba(47, 103, 178, 0.38);
  outline-offset: 3px;
}

/* ─── Password gate ─── */
.gate-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top, rgba(255,255,255,0.72), transparent 34%),
    linear-gradient(180deg, #eef4fb 0%, #f7faff 52%, #eff4fb 100%);
}
.gate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: min(380px, calc(100vw - 40px));
  padding: 48px 36px 40px;
  background: var(--surface-card);
  border: 1px solid rgba(37, 73, 124, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  text-align: center;
}
.gate-title {
  margin: 0;
  font-family: var(--display);
  font-size: 3.2rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ink);
  line-height: 1;
}
.gate-subtitle {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.gate-input {
  width: 100%;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--paper-line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  font-family: var(--body);
  font-size: 0.95rem;
  color: var(--ink);
  text-align: center;
  outline: none;
  transition: border-color 180ms ease;
}
.gate-input:focus {
  border-color: var(--accent);
}
.gate-input-error {
  border-color: #c0392b;
  animation: gateShake 320ms ease;
}
@keyframes gateShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.gate-submit {
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ink);
  color: #f4f8fc;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease;
}
.gate-submit:hover {
  background: #1e4475;
}
.gate-error {
  margin: 0;
  color: #c0392b;
  font-size: 0.82rem;
}

.site-footer { height: 36px; }

.rtl-page { font-family: var(--arabic-body); font-weight: 300; }
/* Arabic Light renders visually smaller than Latin Inter at the same px.
   Bump it ~3px wherever it appears in the topnav and timeline so the
   reading weight matches the English baseline. */
.rtl-page .topnav :is(button, a) { font-size: 14px; }
.rtl-page .timeline-nav-chip { font-size: 14px; }
.rtl-page .timeline-text-side p { font-size: 1.08rem; }
.rtl-page .timeline-feature-header + .section-heading p,
.rtl-page .timeline-heading p,
.rtl-page .timeline-page-shell .section-heading p { font-size: 1.15rem; }
.rtl-page .timeline-clip-link { font-size: 0.98rem; }
/* Number-bearing meta labels (dates, durations, read times) in Arabic */
.rtl-page .clip-meta,
.rtl-page .article-file-meta { font-size: 13px; }
.rtl-page .masthead-button,
.rtl-page .front-masthead,
.rtl-page .about-hero-card h1 {
  font-family: var(--tamass-heading-font, var(--arabic-display));
  font-weight: var(--tamass-heading-weight, 700);
}
.rtl-page .section-heading h1,
.rtl-page .section-heading h2 {
  font-family: var(--tamass-category-title-font, var(--arabic-display));
  font-weight: var(--tamass-category-title-weight, 700);
}
.rtl-page .front-clip-copy h3,
.rtl-page .clip-card h3,
.rtl-page .indicator-card h3 {
  font-family: var(--tamass-card-title-font, var(--arabic-display));
  font-weight: var(--tamass-card-title-weight, 700);
}
.rtl-page .about-card h2,
.rtl-page .timeline-feature-header h2,
.rtl-page .timeline-text-side h3,
.rtl-page .archive-selected-copy h2 {
  font-family: var(--tamass-section-title-font, var(--arabic-display));
  font-weight: var(--tamass-section-title-weight, 700);
}
.rtl-page .archive-inline-copy h2 {
  font-family: var(--tamass-video-title-font, var(--arabic-display));
  font-weight: var(--tamass-video-title-weight, 700);
}
.rtl-page .front-subline,
.rtl-page .gate-title {
  font-family: var(--arabic-display);
  font-weight: 700;
}
.rtl-page .article-file-title {
  font-family: var(--tamass-article-title-font, var(--arabic-display));
  font-weight: var(--tamass-article-title-weight, 700);
}
.rtl-page .topnav :is(button, a) {
  font-family: var(--tamass-nav-font, var(--arabic-body));
}
.rtl-page .button-primary,
.rtl-page .button-secondary {
  font-family: var(--tamass-button-font, var(--arabic-body));
}
.rtl-page .edition-copy,
.rtl-page .lang-switch,
.rtl-page .issue-label,
.rtl-page .eyebrow,
.rtl-page .clip-meta,
.rtl-page .collage-caption,
.rtl-page .timeline-nav-chip,
.rtl-page .timeline-year-tag,
.rtl-page .timeline-clip-link,
.rtl-page p,
.rtl-page button,
.rtl-page span {
  font-family: var(--tamass-body-font, var(--arabic-body));
}
/* ── RTL: zero out letter-spacing (distorts Arabic glyph joining) ── */
.rtl-page .edition-copy,
.rtl-page .issue-label,
.rtl-page .eyebrow,
.rtl-page .clip-meta,
.rtl-page .collage-caption,
.rtl-page .button-primary,
.rtl-page .button-secondary,
.rtl-page .timeline-nav-chip,
.rtl-page .timeline-year-tag,
.rtl-page .timeline-clip-link,
.rtl-page .archive-sort-btn,
.rtl-page p,
.rtl-page h1,
.rtl-page h2,
.rtl-page h3 {
  letter-spacing: 0;
}
/* ── RTL: lock the topbar to the English layout so the logo, nav, and lang
     switcher stay in the same positions in both languages. Grid cells flow
     LTR; individual Arabic strings inside still read RTL via Unicode bidi. */
.rtl-page .edition-bar {
  direction: ltr;
}
.rtl-page .edition-copy {
  /* Edition text is Arabic — keep its internal reading direction and pin it
     to the leading edge of its (now-left) cell. */
  direction: rtl;
  text-align: left;
  /* Arabic at 10px renders much thinner than English (Inter has more visual
     weight at small sizes). Bump to match the English edition copy size. */
  font-size: 12px;
  font-weight: 400;
}
/* Lang-switch labels are Latin (EN / AR) — force them to the Latin body
   font and weight in both languages so the pill reads identically. */
.lang-switch,
.lang-switch button {
  font-family: var(--body) !important;
  font-weight: 500;
}
/* ── RTL: hero panel pinned right ── */
.rtl-page .hero-panel-overlay {
  left: auto;
  right: clamp(22px, 4vw, 48px);
}
/* ── RTL: caption chip pinned left ── */
.rtl-page .hero-caption-rail {
  right: auto;
  left: 28px;
}
/* ── RTL: inline panel close button pinned left ── */
.rtl-page .archive-inline-close {
  right: auto;
  left: 16px;
}
/* ── RTL: timeline band full-width breakout ── */
.rtl-page .timeline-band {
  margin-left: 0;
  margin-right: calc(50% - 50vw);
}
/* RTL: keep the year nav centered with chronological left-to-right order
   (1990 → present). Chip text is Arabic-Indic numerals so it can use the
   Arabic body font naturally. */
.rtl-page .timeline-nav-strip {
  flex-direction: row;
  justify-content: center;
  direction: ltr;
}
@media (min-width: 761px) {
  .rtl-page .timeline-nav-strip {
    flex-direction: column;
  }
}
.rtl-page .hero-panel,
.rtl-page .statement-panel,
.rtl-page .front-clip-card,
.rtl-page .archive-grid-card,
.rtl-page .archive-selected-copy,
.rtl-page .about-card,
.rtl-page .about-hero-card,
.rtl-page .section-heading:not(.centered-heading) {
  text-align: right;
}
/* Anything centered in EN stays centered in AR. */
.rtl-page .centered-heading,
.rtl-page .centered-heading h1,
.rtl-page .centered-heading h2,
.rtl-page .centered-heading p,
.rtl-page .about-quote {
  text-align: center;
}
.rtl-page .timeline-year-line {
  background: linear-gradient(270deg, rgba(47, 103, 178, 1), rgba(47, 103, 178, 0.38));
}
.rtl-page .timeline-text-card { text-align: right; }
.rtl-page .timeline-card-icon { right: auto; left: 18px; }
.rtl-page .timeline-clip-link { text-align: right; }
.rtl-page .archive-selected-copy blockquote,
.rtl-page .archive-inline-copy blockquote {
  padding-right: 16px;
  padding-left: 0;
  border-right: 2px solid var(--paper-line-strong);
  border-left: 0;
}
.rtl-page .archive-inline-copy {
  text-align: right;
}

@media (max-width: 1100px) {
  .front-hero,
  .front-clips-grid,
  .about-grid,
  .archive-selected-panel,
  .indicators-grid {
    grid-template-columns: 1fr;
  }
  .indicator-card.is-open { grid-column: auto; }
  .hero-panel-overlay {
    width: min(700px, calc(100% - 36px));
  }
  .archive-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .archive-inline-detail {
    grid-template-columns: 1fr;
  }
  .archive-inline-player {
    max-width: 320px;
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  .front-clip-card.is-lead { grid-column: auto; }
  .about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .timeline-axis { display: none; }
  .timeline-event-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* Reset every column AND row placement back to auto so the mobile
     single-column stack actually flows in one column. The center-marker
     had grid-column: 2 hard-coded; both sides had grid-row: 1 hard-coded
     — the combination was forcing a multi-track implicit grid. */
  .timeline-visual-side.place-left,
  .timeline-visual-side.place-right,
  .timeline-text-side.place-left,
  .timeline-text-side.place-right,
  .timeline-center-marker {
    grid-column: auto;
  }
  .timeline-visual-side,
  .timeline-text-side {
    grid-row: auto;
  }
  .timeline-center-marker { display: none; }
  .timeline-visual-side {
    order: 1;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }
  .timeline-year-callout-mobile {
    order: 2;
  }
  .timeline-text-side {
    order: 3;
    align-items: stretch;
    justify-content: flex-start;
  }
  .timeline-event-image-wrap { max-width: 100%; }
  .timeline-text-card,
  .archive-selected-panel {
    width: 100%;
    max-width: 100%;
  }
  .timeline-event-stack { gap: 36px; }
  .timeline-event-band { padding: 8px 0 12px; }
  .timeline-band-inner { padding: 36px 0 28px; }
  .timeline-section-heading { margin-bottom: 22px; }
  .timeline-feature-header h2 { font-size: clamp(2rem, 7vw, 2.6rem); }
  .timeline-section-heading .eyebrow {
    font-size: 22px;
    padding: 8px 22px;
  }
  .rtl-page .timeline-section-heading .eyebrow { font-size: 26px; }
}

@media (max-width: 760px) {
  :root { --content-width: min(100vw - 24px, 1240px); }
  body { font-size: 0.9375rem; }
  .page-shell { padding: 18px 0 28px; }

  /* Bump uppercase/eyebrow text to ~13px on mobile so it stays
     readable. Base rule sets these to 11px which is too small on a
     phone screen. */
  .eyebrow,
  .clip-meta,
  .issue-label,
  .collage-caption,
  .button-primary,
  .button-secondary,
  .article-byline,
  .indicator-source { font-size: 0.8125rem; }
  .timeline-event-row .eyebrow,
  .timeline-event-band .eyebrow { font-size: 0.84rem; }
  .article-file-meta { font-size: 0.75rem; letter-spacing: 0.14em; }
  .timeline-clip-link { font-size: 0.84rem; padding: 8px 16px; }
  .article-read-btn { font-size: 0.8125rem; padding: 10px 0; }
  .home-front-page,
  .timeline-page-shell,
  .clips-page-shell,
  .articles-page-shell,
  .indicators-page-shell,
  .about-page-shell { padding-top: 18px; }

  .topbar-wrap {
    /* Sticky on mobile too — drawer is the way to navigate, must always
       be reachable while scrolling. */
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .edition-bar {
    /* Lock the mobile bar to LTR so left/center/right is consistent
       regardless of language: lang-switch | logo | hamburger. */
    direction: ltr;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    min-height: 0;
  }
  .edition-copy { display: none; }
  .masthead-logo {
    height: clamp(36px, 10vw, 46px);
  }
  .masthead-button {
    padding: 0;
    justify-self: center;
    grid-column: 2;
  }
  .topbar-left,
  .topnav-desktop,
  .lang-switch-desktop { display: none !important; }

  /* Hamburger button on mobile — always on the right edge of the bar,
     regardless of language. The bar itself is locked to LTR. */
  .menu-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--paper-line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
    grid-column: 3;
    justify-self: end;
  }
  .menu-toggle span {
    width: 16px;
    height: 1.5px;
    background: var(--ink);
    border-radius: 2px;
    transition: transform 240ms ease, opacity 200ms ease;
  }
  .menu-toggle.is-open { background: var(--ink); border-color: var(--ink); }
  .menu-toggle.is-open span { background: #f0f5fc; }
  .menu-toggle.is-open span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .menu-toggle.is-open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

  /* Scrim overlay */
  .menu-scrim {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(15, 24, 40, 0);
    pointer-events: none;
    transition: background 280ms ease;
  }
  .menu-scrim.is-open {
    background: rgba(15, 24, 40, 0.5);
    backdrop-filter: blur(2px);
    pointer-events: auto;
  }

  /* Drawer — always slides in from the right edge in both languages,
     since the hamburger button is also on the right in both. */
  .menu-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: min(86vw, 340px);
    z-index: 100;
    background: linear-gradient(170deg, #0f2845 0%, #1a3c6b 65%, #234a7a 100%);
    color: #f0f5fc;
    box-shadow: -20px 0 40px rgba(0, 0, 0, 0.18);
    transform: translateX(110%);
    transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1);
  }
  .menu-drawer.is-open { transform: translateX(0); }

  .menu-drawer-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    /* Lock LTR so the close button sits at the same edge in both
       languages (drawer always opens from the right) */
    direction: ltr;
  }
  .menu-drawer-close {
    appearance: none;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    color: #f0f5fc;
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    border-radius: 999px;
    cursor: pointer;
  }
  .menu-drawer-language {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    direction: ltr;
  }
  .menu-drawer-language button {
    appearance: none;
    padding: 4px 0;
    color: rgba(220, 232, 250, 0.68);
    background: none;
    border: 0;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
  }
  .menu-drawer-language button.is-active { color: #fff; font-weight: 700; }
  .menu-drawer-language span { color: rgba(220, 232, 250, 0.38); }
  .menu-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px 28px;
    overflow-y: auto;
  }
  .menu-drawer-nav :is(button, a) {
    appearance: none;
    background: transparent;
    border: 0;
    display: block;
    text-decoration: none;
    color: rgba(220, 232, 250, 0.92);
    text-align: start;
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.6;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0.01em;
  }
  .rtl-page .menu-drawer-nav :is(button, a) {
    font-family: var(--arabic-display);
    font-weight: 700;
    font-size: 22px;
  }
  .menu-drawer-nav :is(button, a).is-active {
    color: #ffffff;
  }
  .menu-drawer-nav :is(button, a).is-active::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #b7daf2;
    margin-inline-end: 10px;
    vertical-align: middle;
  }

  /* ── Hero (home) ──
     On mobile the image keeps its natural aspect ratio (no crop) and the
     title + subline move OUT of the dark overlay to a panel underneath. */
  .front-hero-fullscreen {
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .hero-image-frame-fullscreen {
    border-radius: 22px;
    aspect-ratio: auto;
  }
  .hero-image-still.hero-image-immersive {
    height: auto;
    object-fit: contain;
    object-position: center top;
    filter: none;
  }
  .hero-image-overlay { display: none; }

  .hero-panel-overlay {
    position: static;
    inset: auto;
    width: auto;
    margin-top: 14px;
    padding: 22px 22px 26px;
    border-radius: 18px;
    /* match desktop hero treatment — dark navy with white text */
    background: linear-gradient(165deg, #0f2845 0%, #1a3c6b 60%, #234a7a 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 18px 38px rgba(14, 22, 35, 0.22);
    backdrop-filter: none;
    color: #e8eff8;
    text-align: center;
  }
  .hero-panel.hero-panel-overlay .front-masthead {
    color: #f0f5fc;
    font-size: clamp(2.2rem, 9vw, 3.2rem);
    margin: 0 0 6px;
    line-height: 0.95;
  }
  .hero-panel.hero-panel-overlay .front-subline {
    color: rgba(210, 225, 245, 0.9);
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(0.9rem, 3.6vw, 1.05rem);
    line-height: 1.45;
    max-width: none;
    margin: 0 auto;
  }

  /* ── Section headings everywhere ── */
  .statement-copy h2,
  .section-heading h1,
  .section-heading h2 {
    font-size: clamp(1.7rem, 6.5vw, 2.4rem);
    line-height: 1.05;
    margin: 6px 0 10px;
  }
  .section-heading p { font-size: 0.95rem; line-height: 1.6; }
  .rtl-page .section-heading p { font-size: 1rem; }
  .timeline-heading,
  .clips-page-heading,
  .articles-page-shell .section-heading,
  .indicators-page-shell .section-heading {
    margin-bottom: 18px;
  }

  /* ── Statement band on home ── */
  .statement-panel { padding: 22px 22px 24px; }

  /* ── Home featured clip on mobile — stack vertically ── */
  .home-featured-section { padding-top: 18px; }
  .home-grid-heading { margin-bottom: 12px; }
  .home-featured-clip {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 12px;
  }
  .home-featured-copy { padding: 4px 4px 6px; gap: 10px; }
  .archive-grid-card { padding: 10px 10px 14px; }
  .archive-grid-card .clip-thumb {
    aspect-ratio: 4 / 5;
    margin-bottom: 10px;
    border-radius: 14px;
  }

  /* ── About page ── */
  .about-hero-card { padding: 22px 22px 26px; }
  .about-hero-card h1 { font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .about-hero-card p { font-size: 0.98rem; line-height: 1.7; }
  .about-quote { padding: 22px 22px; font-size: clamp(1.1rem, 4.5vw, 1.45rem); }
  .about-extra-card { padding: 22px 22px 26px; }
  .about-extra-card h2 { font-size: clamp(1.4rem, 5.5vw, 1.85rem); }
  .about-extra-card p { font-size: 0.98rem; }

  /* ── Article folders ── */
  .article-file-tab {
    padding: 18px 18px;
    gap: 6px 16px;
  }
  .article-file-title { font-size: clamp(1.1rem, 4.4vw, 1.45rem); }
  .article-file-chevron { width: 28px; height: 28px; font-size: 18px; }
  .article-file-content {
    padding: 18px 18px 28px;
    gap: 18px;
  }
  .article-file-text > p { font-size: 0.98rem; line-height: 1.78; }
  .article-file-text p.article-excerpt { font-size: clamp(1.1rem, 4vw, 1.4rem); }

  /* ── Archive (clips) inline panel ── */
  .archive-inline-content { padding: 16px 14px 18px; }
  .archive-inline-copy h2 { font-size: clamp(1.4rem, 5.5vw, 1.9rem); }
  .archive-inline-copy p { font-size: 0.95rem; }
  .archive-inline-copy blockquote { font-size: 1.05rem; }
  .archive-grid-card { padding: 12px; }
  .archive-grid-card h3 { font-size: 1.3rem; }

  /* ── Indicator cards ── */
  .indicators-grid { grid-template-columns: 1fr; gap: 18px; }
  .indicator-card-trigger { padding: 12px; gap: 6px; }
  .indicator-section-toggle { padding: 16px 16px; gap: 12px; }
  .indicator-section-body-pad { padding: 14px 14px 18px; }

  /* ── Timeline event card padding tighter ── */
  .timeline-text-card { padding: 14px 16px 18px; }
  .timeline-text-side h3 { font-size: 1.35rem; }
  .timeline-text-side p { font-size: 1rem; line-height: 1.7; }
  .rtl-page .timeline-text-side p { font-size: 1.05rem; }
  .timeline-clip-link { padding: 6px 14px; font-size: 0.78rem; }
  .rtl-page .timeline-clip-link { font-size: 0.95rem; }
  /* Hide the chip strip on mobile — replaced by a dropdown */
  .timeline-floating-nav-wrap { top: 0; padding: 8px 14px; }
  .timeline-nav-strip { display: none; }

  /* Mobile dropdown for year ranges */
  .timeline-nav-select-wrap {
    display: block;
    position: relative;
    max-width: 380px;
    margin-inline: auto;
  }
  .timeline-nav-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 44px;
    padding: 0 36px 0 16px;
    border: 1px solid rgba(37, 73, 124, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: var(--ink);
    font-family: var(--body);
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(31, 58, 102, 0.08);
  }
  .rtl-page .timeline-nav-select {
    font-family: var(--arabic-body);
    font-weight: 400;
    font-size: 14px;
    padding: 0 16px 0 36px;
    direction: rtl;
  }
  .timeline-nav-select-chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    pointer-events: none;
    font-size: 14px;
  }
  .rtl-page .timeline-nav-select-chevron { right: auto; left: 14px; }

  /* ── Mobile timeline: vertical spine on the leading edge ──
     Each event card sits on a ruled line. The spine carries the
     timeline visual identity that's lost in a plain card stack. */
  .timeline-band {
    overflow: visible;
  }
  .timeline-band-inner {
    padding: 30px 0 26px;
    position: relative;
  }
  .timeline-event-stack {
    /* Anchor the spine relative to this stack so it spans all events */
    position: relative;
    padding-inline-start: 38px;
    gap: 28px;
  }
  /* The spine itself */
  .timeline-event-stack::before {
    content: '';
    position: absolute;
    inset-block: 12px;
    inset-inline-start: 14px;
    width: 2px;
    background: linear-gradient(
      180deg,
      rgba(64, 111, 184, 0.0) 0%,
      rgba(47, 103, 178, 0.6) 8%,
      rgba(47, 103, 178, 0.85) 50%,
      rgba(47, 103, 178, 0.6) 92%,
      rgba(64, 111, 184, 0.0) 100%
    );
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
  }
  /* Year node on the spine, aligned with each event's image top */
  .timeline-event-row { position: relative; }
  .timeline-event-row::before {
    content: '';
    position: absolute;
    top: 8px;
    inset-inline-start: -32px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f8fbff;
    border: 3px solid var(--accent);
    box-shadow: 0 0 0 3px rgba(210, 229, 248, 0.85);
    z-index: 2;
  }
  /* The year tag is the top-most element of each event on mobile —
     order: year → image → text card → button. Achieved by promoting
     text-side to display: contents so its children become direct grid
     children that can be reordered alongside the image. */
  .timeline-text-side {
    display: contents;
  }
  .timeline-year-callout {
    order: 1;
    width: 100%;
    margin-bottom: 4px;
    /* On mobile there's only one column, so the year stays anchored to
       the spine side regardless of the row's alternation class. */
    flex-direction: row !important;
    justify-content: flex-start;
  }
  .timeline-visual-side { order: 2; }
  .timeline-text-card { order: 3; }
  .timeline-clip-link { order: 4; align-self: flex-start; }
  .timeline-event-row .timeline-year-tag {
    margin-top: 0;
    font-size: clamp(2.2rem, 8vw, 2.8rem);
  }
  .archive-flow-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .hero-panel-overlay {
    border-radius: 10px;
    box-shadow: 0 8px 18px rgba(14, 22, 35, 0.16);
  }
  .home-featured-clip {
    border-radius: 8px;
    box-shadow: none;
  }
  .timeline-text-card,
  .timeline-event-image-wrap { border-radius: 8px; }
  .archive-grid-card {
    padding: 0 0 12px;
    border-radius: 0;
    box-shadow: none;
  }
  .archive-grid-card .clip-thumb { border-radius: 6px; }
  .article-file-tab { padding: 17px 4px; }
  .article-file.is-open { border-radius: 8px; }
  .indicator-albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
  }
  .indicator-album-cover { border-radius: 6px; }
  .indicator-album-title {
    font-size: 1.05rem;
    line-height: 1.25;
  }
  .about-page-shell { gap: 26px; }
  .about-hero-card,
  .about-extra-card { padding: 4px 8px; }
  .about-quote {
    padding: 20px 18px;
    border-radius: 6px;
  }
}

@media (min-width: 761px) {
  .timeline-text-card {
    box-shadow: none;
  }

  .article-file-tab {
    align-items: center;
    padding: 14px 4px;
  }

  .article-file-content {
    max-width: 710px;
  }
}

/* ─── In the Press (press archive) ─────────────────────────────────────────── */
.press-page-shell { padding-top: 40px; }
.press-title {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--ink);
}
.rtl-page .press-title { font-family: var(--arabic-display); font-weight: 700; }
/* Scoped under .press-page-shell to outrank `.section-heading p { margin:0 }`,
   so the auto margins actually centre these max-width blocks. */
.press-page-shell .press-intro { max-width: 680px; margin: 14px auto 0; color: var(--ink-soft); line-height: 1.8; }
.press-page-shell .press-disclaimer { max-width: 640px; margin: 12px auto 0; font-size: 0.84rem; color: var(--ink-soft); opacity: 0.8; }
.press-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin: 26px auto 28px; max-width: 860px;
}
.press-filter {
  border: 1px solid var(--paper-line); border-radius: 999px;
  background: rgba(255,255,255,0.6); color: var(--ink-soft);
  padding: 7px 16px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}
.press-filter:hover { color: var(--ink); border-color: var(--paper-line-strong); }
.press-filter.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.press-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px;
}
.press-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 22px 22px 20px; background: var(--surface-card);
  border: 1px solid var(--paper-line); border-radius: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.press-card:hover { border-color: var(--paper-line-strong); box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.press-card-meta { display: flex; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); letter-spacing: 0.02em; }
.press-card-source { font-weight: 600; }
.press-card-title { margin: 0; font-size: 1.15rem; line-height: 1.45; color: var(--ink); font-weight: 700; }
.rtl-page .press-card-title { font-family: var(--arabic-display); }
.press-card-byline { font-size: 0.82rem; color: var(--ink-soft); }
.press-card-summary { margin: 0; color: var(--ink-soft); line-height: 1.75; font-size: 0.95rem; }
.press-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.press-tag { font-size: 0.74rem; color: var(--ink-soft); background: rgba(37,73,124,0.07); border-radius: 6px; padding: 3px 8px; }
.press-card-link { align-self: flex-start; margin-top: 6px; color: var(--accent); font-weight: 700; font-size: 0.92rem; text-decoration: none; }
.press-card-link:hover { text-decoration: underline; }
.press-footer-note { margin: 30px auto 0; text-align: center; font-size: 0.85rem; color: var(--ink-soft); opacity: 0.85; }
@media (max-width: 600px) { .press-grid { grid-template-columns: 1fr; } }

/* ─── Hero / About promo video (Cloudflare Stream or direct R2 file) ──────── */
.herovid {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: #0b0f15;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.herovid:focus-visible { outline: 3px solid rgba(255,255,255,0.7); outline-offset: 3px; }
.herovid-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.herovid-native {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  border: 0; background: #000; object-fit: cover;
}
/* Hero (inline) video is a click target, not interactive — let clicks expand it. */
.herovid > .herovid-iframe,
.herovid > .herovid-native { pointer-events: none; }
.herovid .hero-image-overlay,
.herovid .hero-panel-overlay { pointer-events: none; }

/* "tap for sound" cue */
.herovid-cue {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 4;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(10, 14, 20, 0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.82rem; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.18);
  transition: background 160ms ease, transform 160ms ease;
}
.rtl-page .herovid-cue { right: auto; left: 16px; }
.herovid:hover .herovid-cue { background: rgba(10, 14, 20, 0.72); transform: translateY(-1px); }

/* About-page 4:5 video */
.about-video-wrap { display: flex; justify-content: center; margin: 0 0 30px; }
.about-video {
  width: min(360px, 78%);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(14, 22, 35, 0.18);
}

/* Fullscreen player overlay */
.herovid-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
}
.herovid-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 9, 14, 0.86);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 420ms ease;
}
.herovid-overlay.is-shown .herovid-backdrop { opacity: 1; }
.herovid-stage {
  position: relative;
  /* width/height are set inline (computed from the video aspect + viewport). */
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.92);
  transition: transform 520ms cubic-bezier(.16,.84,.28,1), opacity 360ms ease;
  will-change: transform, opacity;
}
.herovid-overlay.is-shown .herovid-stage { opacity: 1; transform: scale(1); }
.herovid-stage .herovid-iframe { pointer-events: auto; }
.herovid-stage .herovid-native { pointer-events: auto; object-fit: contain; }
.herovid-close { opacity: 0; transition: opacity 320ms ease 120ms, background 160ms ease; }
.herovid-overlay.is-shown .herovid-close { opacity: 1; }
.herovid-close {
  position: absolute; top: 20px; right: 24px; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  background: rgba(20, 24, 30, 0.6);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  transition: background 160ms ease;
}
.herovid-close:hover { background: rgba(40, 46, 54, 0.85); }
.archive-inline-native-video {
  display: block;
  max-width: 100%;
  background: #000;
  object-fit: contain;
}
@media (max-width: 760px) {
  .herovid-cue span { display: none; }
  .herovid-close { top: 12px; right: 12px; }
}

/* Mobile home: the film begins at the viewport edge and the identification
   stays attached to its closing frames, rather than becoming a panel above it. */
@media (max-width: 760px) {
  .page-home .home-front-page { padding-top: 0; padding-bottom: 0; }
  .home-front-page .front-hero-fullscreen {
    position: relative;
    margin-top: 0;
    overflow: hidden;
  }
  .home-front-page .hero-video-frame {
    width: 100vw;
    margin-inline: 0;
  }
  .home-front-page .hero-image-overlay {
    display: block;
    background: linear-gradient(180deg, rgba(5, 10, 17, 0) 42%, rgba(5, 10, 17, 0.3) 67%, rgba(5, 10, 17, 0.86) 100%);
  }
  .home-front-page .hero-panel-overlay {
    position: absolute;
    inset: auto 12px 12px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #fff;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    text-align: start;
  }
  .home-front-page .hero-panel.hero-panel-overlay .front-masthead {
    display: block;
    margin: 0 0 3px;
    color: #fff;
    font-size: clamp(1.15rem, 5vw, 1.35rem);
    line-height: 1;
    letter-spacing: 0;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.42);
  }
  .home-front-page .hero-panel.hero-panel-overlay .front-subline {
    max-width: 310px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: clamp(0.68rem, 2.8vw, 0.78rem);
    line-height: 1.3;
    text-wrap: balance;
    text-shadow: 0 1px 7px rgba(0, 0, 0, 0.45);
  }
  .rtl-page .home-front-page .hero-panel-overlay { text-align: right; }
  .rtl-page .home-front-page .hero-panel.hero-panel-overlay .front-subline {
    max-width: none;
    font-size: clamp(0.65rem, 2.75vw, 0.72rem);
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
  }
  .home-front-page .herovid-cue { top: 74px; }

  .home-front-page .home-featured-section { padding-top: 14px; }
  .home-featured-section > .home-latest-heading { margin-top: 0; }
  .home-latest-heading { gap: 14px; margin-bottom: 16px; }
  .home-sections-block { margin-top: 34px; }
  .home-sections-grid { gap: 12px; margin-top: 18px; }
  .home-section-card { padding: 17px 18px; }
  .home-series-block { margin-top: 38px; }
  .home-statement { margin-top: 44px; }
}

@media (max-width: 350px) {
  .home-front-page .hero-panel-overlay { inset-inline: 10px; }
  .rtl-page .home-front-page .hero-panel.hero-panel-overlay .front-subline {
    max-width: 276px;
    white-space: normal;
    text-wrap: balance;
    line-height: 1.25;
  }
}

/* ─── Cinematic home experiment ─────────────────────────────────────────────
   A desktop-first editorial sequence: one screen, one idea, decisive cuts.
   The rest of the publication keeps its existing visual language. */
.cinema-home {
  --cinema-navy: #0b2544;
  --cinema-navy-deep: #06192e;
  --cinema-paper: #f7f8fa;
  --cinema-gold: #c7a75c;
  --cinema-ink: #112c4e;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: clip;
  background: var(--cinema-paper);
  color: var(--cinema-ink);
}

.cinema-home button {
  font: inherit;
}

.cinema-home button:focus-visible {
  outline: 2px solid var(--cinema-gold);
  outline-offset: 4px;
}

.cinema-home .cinema-scene-number {
  color: var(--cinema-gold);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.cinema-hero {
  position: relative;
  min-height: min(100svh, 900px);
  display: grid;
  place-items: start center;
  background: var(--cinema-navy-deep);
}

.cinema-hero-video {
  width: max(100vw, calc(min(100svh, 900px) * 16 / 9));
  min-width: min(100vw, 980px);
  max-width: none;
  margin-inline: auto;
  isolation: isolate;
}

.cinema-hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}

.cinema-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 15, 29, 0.06) 30%, rgba(3, 15, 29, 0.62) 100%),
    linear-gradient(0deg, rgba(3, 15, 29, 0.84) 0%, rgba(3, 15, 29, 0.05) 55%);
}

.cinema-hero-copy {
  position: absolute;
  z-index: 3;
  inset-inline: max(5vw, 54px) auto;
  bottom: clamp(52px, 8vh, 94px);
  width: min(760px, 62vw);
  color: #fff;
  text-align: start;
  pointer-events: none;
}

.cinema-hero-copy .cinema-scene-number,
.cinema-hero-copy h1,
.cinema-hero-copy > p,
.cinema-hero-actions {
  animation: cinema-hero-copy-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.cinema-hero-copy h1 { animation-delay: 120ms; }
.cinema-hero-copy > p { animation-delay: 250ms; }
.cinema-hero-actions { animation-delay: 390ms; }

.rtl-page .cinema-hero-copy {
  right: max(5vw, 54px);
  left: auto;
  text-align: right;
}

.cinema-hero-copy h1 {
  margin: 12px 0 8px;
  max-width: 11ch;
  color: #fff;
  font-size: clamp(3.5rem, 6.4vw, 6.6rem);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.045em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.24);
}

.rtl-page .cinema-hero-copy h1 {
  margin-right: 0;
  margin-left: auto;
  max-width: 12ch;
  font-size: clamp(3.15rem, 5.7vw, 5.9rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.cinema-hero-copy > p {
  margin: 0;
  max-width: 650px;
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.55vw, 1.32rem);
  line-height: 1.65;
}

.rtl-page .cinema-hero-copy > p {
  margin-right: 0;
  margin-left: auto;
}

.cinema-hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  pointer-events: auto;
}

.cinema-hero-actions button,
.cinema-history-copy :is(button, a) {
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 750;
  transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-hero-actions button:first-child {
  border-color: var(--cinema-gold);
  background: var(--cinema-gold);
  color: var(--cinema-navy-deep);
}

.cinema-hero-actions button:hover,
.cinema-hero-actions button:focus-visible {
  border-color: #fff;
  background: #fff;
  color: var(--cinema-navy-deep);
  transform: translateY(-5px) scale(1.035);
}

.cinema-hero-edge {
  position: absolute;
  z-index: 3;
  inset-inline-end: max(3vw, 30px);
  bottom: clamp(54px, 8vh, 96px);
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
  pointer-events: none;
}

.rtl-page .cinema-hero-edge {
  inset-inline-end: auto;
  inset-inline-start: max(3vw, 30px);
}

.cinema-hero-edge::before {
  content: "";
  width: 1px;
  height: 64px;
  background: rgba(255, 255, 255, 0.44);
  transform-origin: top;
  animation: cinema-scroll-line 2200ms ease-in-out infinite;
}

.cinema-hero .herovid-cue {
  z-index: 5;
  top: auto;
  right: auto;
  left: 50%;
  inset-inline-end: auto;
  bottom: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  color: rgba(255, 255, 255, 0.74);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  transform: translateX(-50%);
}

.rtl-page .cinema-hero .herovid-cue {
  right: auto;
  left: 50%;
  inset-inline-end: auto;
  transform: translateX(-50%);
}

.cinema-hero .herovid:hover .herovid-cue {
  transform: translateX(-50%) translateY(-1px);
}

.cinema-latest,
.cinema-history {
  padding: clamp(72px, 8vw, 112px) 0;
  background: var(--cinema-paper);
}

.cinema-section-heading {
  position: relative;
  width: min(1240px, calc(100% - 80px));
  margin: 0 auto clamp(38px, 5vw, 62px);
  padding-bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(24px, 5vw, 72px);
  border-bottom: 1px solid rgba(17, 44, 78, 0.18);
}

.cinema-section-heading::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: min(220px, 28vw);
  height: 1px;
  background: var(--cinema-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

.rtl-page .cinema-section-heading::after {
  transform-origin: right;
}

[data-cinema-scene].is-visible .cinema-section-heading::after {
  transform: scaleX(1);
}

.cinema-section-heading h2 {
  margin: 0;
  color: inherit;
  font-family: var(--tamass-home-section-font, inherit);
  font-size: var(--tamass-home-section-size, clamp(2rem, 3.5vw, 3.5rem));
  font-weight: var(--tamass-home-section-weight, 780);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.rtl-page .cinema-section-heading h2 {
  letter-spacing: -0.02em;
}

.cinema-section-heading > span:last-child {
  max-width: 320px;
  color: #58708c;
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: end;
}

.cinema-latest-grid {
  /* Slightly smaller cards for this section only (per request) — a
     narrower max container width plus the media/copy/type-scale
     reductions below. Nothing outside .cinema-latest-* is touched, so
     every other card grid on the site (archive, home-featured, etc.)
     keeps its original size. */
  width: min(1140px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 18px;
}

.cinema-latest-item {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cinema-latest-card {
  width: 100%;
  flex: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(92, 81, 61, 0.24);
  border-radius: 10px;
  overflow: hidden;
  background: #fffdf7;
  color: var(--cinema-ink);
  box-shadow: 0 2px 8px rgba(57, 48, 34, 0.1);
  cursor: pointer;
  text-align: start;
  transition: border-color 220ms ease, box-shadow 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-latest-kind {
  display: block;
  padding-inline: 8px;
  color: var(--cinema-navy);
  font-family: inherit;
  font-size: clamp(1.85rem, 2.8vw, 3.25rem);
  font-weight: 780;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-align: start;
}

.rtl-page .cinema-latest-kind {
  letter-spacing: -0.025em;
}

.cinema-latest-item:first-child .cinema-latest-card {
  border-color: rgba(199, 167, 92, 0.5);
  border-inline-end: 5px solid var(--cinema-gold);
  background: var(--cinema-navy-deep);
  color: #fff;
}

.cinema-latest-card:hover,
.cinema-latest-card:focus-visible {
  border-color: rgba(155, 117, 48, 0.62);
  box-shadow: 0 16px 26px rgba(57, 48, 34, 0.2);
}

.cinema-latest-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9.4;
  overflow: hidden;
  background: var(--cinema-navy-deep);
}

.cinema-latest-card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-bottom: 3px solid transparent;
  background: linear-gradient(0deg, rgba(3, 15, 29, 0.25), transparent 42%);
  transition: border-color 240ms ease;
}

.cinema-latest-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.02);
  transition: filter 420ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cinema-latest-card:hover .cinema-latest-card-media img,
.cinema-latest-card:focus-visible .cinema-latest-card-media img {
  filter: saturate(1) contrast(1.02);
  transform: scale(1.085);
}

.cinema-latest-card:hover .cinema-latest-card-media::after,
.cinema-latest-card:focus-visible .cinema-latest-card-media::after {
  border-bottom-color: var(--cinema-gold);
}

.cinema-card-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: rgba(4, 20, 38, 0.42);
  color: #fff;
  font-size: 0.88rem;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(3px);
}

.cinema-latest-card-copy {
  min-height: 200px;
  padding: 20px 21px 24px;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.cinema-latest-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: #6e8196;
  font-family: var(--tamass-date-font, inherit);
  font-size: var(--tamass-date-size, 0.62rem);
  font-weight: var(--tamass-date-weight, 780);
  line-height: 1.4;
}

.cinema-latest-card-meta > span:first-child {
  color: #9b7530;
}

.cinema-latest-card-copy > strong {
  margin-top: 20px;
  color: var(--cinema-ink);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.38;
  text-wrap: balance;
}

.cinema-latest-item:first-child .cinema-latest-card-meta {
  color: rgba(255, 255, 255, 0.58);
}

.cinema-latest-item:first-child .cinema-latest-card-copy > strong {
  color: #fff;
}

.cinema-latest-card-action {
  margin-top: auto;
  padding-top: 28px;
  color: var(--cinema-navy);
  font-size: 0.74rem;
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--cinema-gold);
  text-underline-offset: 5px;
}

.cinema-latest-item:first-child .cinema-latest-card-action,
.cinema-latest-item:first-child .cinema-latest-card-meta > span:first-child {
  color: var(--cinema-gold);
}

.cinema-directory {
  padding: clamp(74px, 8vw, 112px) 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.42)),
    #e9edf1;
  color: var(--cinema-ink);
}

.cinema-directory-list {
  width: min(900px, calc(100% - 80px));
  margin: 0 auto;
  display: grid;
  gap: 12px;
}

.cinema-directory-list :is(button, a) {
  width: 100%;
  min-height: 82px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 20px;
  border: 1px solid rgba(17, 44, 78, 0.42);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--cinema-ink);
  cursor: pointer;
  text-align: start;
  transition: border-color 220ms ease, background-color 220ms ease, box-shadow 320ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-directory-list :is(button, a):hover,
.cinema-directory-list :is(button, a):focus-visible {
  border-color: var(--cinema-gold);
  background: #fff;
  box-shadow: 0 12px 20px rgba(17, 44, 78, 0.16);
}

.cinema-directory-thumb {
  width: 92px;
  height: 58px;
  overflow: hidden;
  border: 1px solid rgba(17, 44, 78, 0.24);
  border-radius: 6px;
  background: #dce3ea;
}

.cinema-directory-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.96) contrast(1.02);
}

.cinema-directory-list strong {
  min-width: 0;
  color: var(--cinema-ink);
  font-size: clamp(1.25rem, 2vw, 1.8rem);
  line-height: 1.25;
}

.cinema-directory-list b {
  color: #ad8d3f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-weight: 700;
  text-align: center;
}

.cinema-directory-list i {
  color: #ad8d3f;
  font-size: 1.6rem;
  font-style: normal;
  line-height: 1;
}

.cinema-history {
  padding-bottom: 0;
}

.cinema-history-stage {
  position: relative;
  width: 100%;
  min-height: min(820px, 86vh);
  overflow: hidden;
  isolation: isolate;
  background: var(--cinema-navy-deep);
  color: #fff;
}

.cinema-history-stage > img {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.58) contrast(1.08);
  animation: cinema-history-in 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cinema-history-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(2, 12, 24, 0.92) 0%, rgba(2, 12, 24, 0.43) 58%, rgba(2, 12, 24, 0.7) 100%),
    linear-gradient(0deg, rgba(2, 12, 24, 0.96) 0%, transparent 48%);
}

.rtl-page .cinema-history-shade {
  background:
    linear-gradient(270deg, rgba(2, 12, 24, 0.92) 0%, rgba(2, 12, 24, 0.43) 58%, rgba(2, 12, 24, 0.7) 100%),
    linear-gradient(0deg, rgba(2, 12, 24, 0.96) 0%, transparent 48%);
}

.cinema-history-ghost {
  position: absolute;
  z-index: -1;
  inset-inline-end: 3vw;
  top: 4%;
  color: rgba(255, 255, 255, 0.075);
  font-size: clamp(8rem, 18vw, 18rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.07em;
  white-space: nowrap;
  pointer-events: none;
  animation: cinema-history-ghost 12s ease-in-out infinite alternate;
}

.cinema-history-copy {
  width: min(1240px, calc(100% - 80px));
  min-height: min(690px, calc(86vh - 120px));
  margin: 0 auto;
  padding: clamp(80px, 10vh, 116px) 0 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  animation: cinema-copy-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.rtl-page .cinema-history-copy {
  align-items: flex-start;
}

.cinema-history-copy > span {
  color: rgba(255, 255, 255, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.cinema-history-copy > b {
  margin-top: 0;
  color: var(--cinema-gold);
  font-size: 0.82rem;
}

.cinema-history-copy > strong {
  margin-top: 4px;
  color: #fff;
  font-size: clamp(4rem, 7vw, 7.2rem);
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.055em;
}

.cinema-history-copy h3 {
  max-width: 720px;
  margin: 20px 0 30px;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 3rem);
  font-weight: 650;
  line-height: 1.28;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.cinema-history-copy :is(button, a) {
  border-width: 0 0 1px;
  border-color: var(--cinema-gold);
  color: #fff;
}

.cinema-history-copy :is(button, a):hover,
.cinema-history-copy :is(button, a):focus-visible {
  background: #fff;
  color: var(--cinema-navy-deep);
}

.cinema-history-reel {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  min-height: 122px;
  margin: 0;
  padding: 0 max(40px, calc((100% - 1240px) / 2));
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  list-style: none;
  background: rgba(3, 15, 29, 0.86);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.cinema-history-reel li {
  min-width: 0;
}

.cinema-history-reel button {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 122px;
  padding: 23px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-inline-end: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(255, 255, 255, 0.58);
  cursor: pointer;
  text-align: start;
  transition: color 200ms ease, background 200ms ease;
}

.cinema-history-reel li:first-child button {
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
}

.cinema-history-reel button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--cinema-gold);
  transform: scaleX(0);
  transition: transform 240ms ease;
}

.cinema-history-reel button.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.cinema-history-reel button.is-active::before {
  transform: scaleX(1);
}

.cinema-history-reel button span {
  font-size: clamp(1.35rem, 2vw, 1.68rem);
  font-weight: 800;
  white-space: nowrap;
}

.cinema-history-reel button b {
  color: var(--cinema-gold);
  font-size: 1.4rem;
}

[data-cinema-scene] {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 820ms ease, transform 920ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-cinema-scene].is-visible {
  opacity: 1;
  transform: none;
}

[data-cinema-scene] .cinema-latest-card {
  opacity: 0;
  transform: translateY(44px) scale(0.96);
}

[data-cinema-scene] .cinema-latest-kind {
  opacity: 0;
  transform: translateY(18px);
}

[data-cinema-scene].is-visible .cinema-latest-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms ease,
    transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 190ms ease,
    color 150ms ease;
}

[data-cinema-scene].is-visible .cinema-latest-kind {
  opacity: 1;
  transform: none;
  transition: opacity 420ms ease 320ms, transform 560ms cubic-bezier(0.16, 1, 0.3, 1) 320ms;
}

[data-cinema-scene].is-visible .cinema-latest-card:hover,
[data-cinema-scene].is-visible .cinema-latest-card:focus-visible {
  transform: translateY(-16px) scale(1.025);
  transition-delay: 0ms;
}

[data-cinema-scene] .cinema-directory-list :is(button, a) {
  opacity: 0;
  transform: translateX(38px);
}

.rtl-page [data-cinema-scene] .cinema-directory-list :is(button, a) {
  transform: translateX(-38px);
}

[data-cinema-scene].is-visible .cinema-directory-list :is(button, a) {
  opacity: 1;
  transform: none;
  transition:
    opacity 420ms ease,
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

[data-cinema-scene].is-visible .cinema-directory-list :is(button, a):nth-child(2) { transition-delay: 80ms; }
[data-cinema-scene].is-visible .cinema-directory-list :is(button, a):nth-child(3) { transition-delay: 160ms; }
[data-cinema-scene].is-visible .cinema-directory-list :is(button, a):nth-child(4) { transition-delay: 240ms; }
[data-cinema-scene].is-visible .cinema-directory-list :is(button, a):nth-child(5) { transition-delay: 320ms; }

[data-cinema-scene].is-visible .cinema-directory-list :is(button, a):hover,
[data-cinema-scene].is-visible .cinema-directory-list :is(button, a):focus-visible {
  transform: translateX(16px) scale(1.012);
  transition-delay: 0ms;
}

.rtl-page [data-cinema-scene].is-visible .cinema-directory-list :is(button, a):hover,
.rtl-page [data-cinema-scene].is-visible .cinema-directory-list :is(button, a):focus-visible {
  transform: translateX(-16px) scale(1.012);
  transition-delay: 0ms;
}

@keyframes cinema-hero-copy-in {
  from { opacity: 0; transform: translateY(34px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes cinema-scroll-line {
  0%, 100% { opacity: 0.36; transform: scaleY(0.35); }
  48% { opacity: 1; transform: scaleY(1); }
}

@keyframes cinema-history-ghost {
  from { opacity: 0.62; transform: translateX(2vw) scale(0.96); }
  to { opacity: 1; transform: translateX(-3.5vw) scale(1.03); }
}

@keyframes cinema-image-in {
  from { opacity: 0.45; transform: scale(1.035); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cinema-history-in {
  from { opacity: 0.12; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes cinema-copy-in {
  from { opacity: 0; transform: translateY(38px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 901px) {
  .page-home .topbar-wrap:not(.is-condensed) .topnav-desktop {
    padding: 10px 18px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(6, 25, 46, 0.42);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(3, 15, 29, 0.12);
  }

  .page-home .topbar-wrap:not(.is-condensed) .topnav :is(button, a) {
    color: rgba(255, 255, 255, 0.82);
  }

  .page-home .topbar-wrap:not(.is-condensed) .topnav :is(button, a).is-active,
  .page-home .topbar-wrap:not(.is-condensed) .topnav :is(button, a):hover {
    color: #fff;
  }

  .page-home .topbar-wrap:not(.is-condensed) .topnav :is(button, a)::after {
    background: var(--cinema-gold, #c7a75c);
  }

  .page-home .topbar-wrap.is-condensed .topnav-desktop {
    border: 1px solid rgba(17, 44, 78, 0.14);
    border-radius: 999px;
    background: rgba(247, 248, 250, 0.97);
    box-shadow: 0 4px 12px rgba(17, 44, 78, 0.08);
    backdrop-filter: blur(8px);
  }
}

/* Safeguards only; the next pass will compose the dedicated mobile cut. */
@media (max-width: 900px) {
  .cinema-hero {
    min-height: 100svh;
    overflow: hidden;
  }

  .cinema-hero-video {
    width: 100%;
    height: 100svh;
    min-width: 0;
    aspect-ratio: auto !important;
  }

  .cinema-hero-video > .herovid-iframe {
    left: 50%;
    right: auto;
    width: max(100vw, 177.78svh);
    transform: translateX(-50%);
  }

  .cinema-hero-copy {
    inset-inline: 24px;
    bottom: clamp(52px, 9svh, 84px);
    width: auto;
  }

  .rtl-page .cinema-hero-copy {
    inset-inline: 24px;
  }

  .cinema-hero-copy h1 {
    margin-bottom: 10px;
    font-size: clamp(3rem, 15vw, 4.5rem);
  }

  .cinema-hero-copy > p {
    max-width: 36ch;
    font-size: clamp(0.92rem, 4.2vw, 1.08rem);
    line-height: 1.55;
  }

  .cinema-hero-actions {
    margin-top: 20px;
  }

  .cinema-hero-edge,
  .cinema-hero-copy .cinema-scene-number {
    display: none;
  }

  .cinema-section-heading {
    width: min(100% - 36px, 680px);
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .cinema-section-heading > span:last-child {
    grid-column: 1;
    justify-self: start;
    text-align: start;
  }

  .cinema-latest-grid {
    width: min(100% - 36px, 680px);
    grid-template-columns: 1fr;
  }

  .cinema-latest-card-copy {
    min-height: 205px;
    padding: 22px 20px 24px;
  }

  .cinema-directory-list {
    width: min(100% - 36px, 680px);
  }

  .cinema-directory-list :is(button, a) {
    grid-template-columns: 64px minmax(0, 1fr) 24px;
    gap: 12px;
    min-height: 72px;
    padding: 8px 10px;
  }

  .cinema-directory-thumb {
    width: 64px;
    height: 48px;
  }

  .cinema-directory-list strong {
    font-size: 1.08rem;
  }

  .cinema-directory-list b {
    font-size: 0.95rem;
  }

  .cinema-history-copy {
    width: min(100% - 36px, 680px);
  }

  .cinema-history-reel {
    padding: 0;
    overflow-x: auto;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    scroll-snap-type: x mandatory;
  }

  .cinema-history-reel li {
    scroll-snap-align: start;
  }

}

/* ─── Site-wide archival language + amplified interaction ─────────────────
   The interior pages now share the cinematic home's paper, ink, gold, and
   image-led focus. Motion is strongest on content that can actually open. */
:root {
  --paper: #f4f6f8;
  --paper-band: #edf1f4;
  --paper-band-alt: #e5eaef;
  --paper-line: rgba(17, 44, 78, 0.15);
  --paper-line-strong: rgba(17, 44, 78, 0.34);
  --ink: #112c4e;
  --ink-soft: #637184;
  --accent: #ad8d3f;
  --surface-card: #fff;
  --shadow-soft: 0 3px 8px rgba(17, 44, 78, 0.1);
  --shadow-card: 0 12px 22px rgba(17, 44, 78, 0.16);
}

body,
.app-shell {
  background: #f4f6f8;
}

.topbar-wrap:not(.is-overlay) {
  background: rgba(248, 250, 252, 0.96);
  border-bottom-color: var(--paper-line);
}

.topnav-desktop,
.timeline-nav-strip,
.search-panel,
.indicator-modal-panel {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--paper-line);
}

.app-shell.page-timeline {
  background:
    linear-gradient(rgba(17, 44, 78, 0.052) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(17, 44, 78, 0.052) 1px, transparent 1px) 0 0 / 44px 44px,
    #eef2f5;
}

.timeline-axis {
  background: linear-gradient(180deg, rgba(173, 141, 63, 0.18), rgba(173, 141, 63, 0.96), rgba(173, 141, 63, 0.18));
  box-shadow: 0 0 0 1px rgba(255, 253, 247, 0.7), 0 0 16px rgba(173, 141, 63, 0.14);
}

.timeline-node {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(220, 204, 165, 0.82);
}

.timeline-text-card,
.archive-inline-content,
.article-file,
.indicator-section,
.press-card,
.about-card,
.about-extra-card,
.about-hero-card,
.archive-selected-panel {
  border-color: var(--paper-line);
  background: var(--surface-card);
  box-shadow: var(--shadow-soft);
}

.timeline-event-image-wrap,
.timeline-text-card,
.archive-grid-card,
.archive-grid-card .clip-thumb,
.article-file,
.article-infographic,
.indicator-section,
.indicator-album-cover,
.indicator-album-cover img,
.press-card,
.about-card,
.about-extra-card,
.about-hero-card,
.home-section-card,
.search-result,
.button-primary,
.button-secondary {
  transition-duration: 420ms;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-event-image-wrap,
.timeline-text-card {
  transition-property: transform, border-color, box-shadow;
}

.timeline-event-image {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}

.timeline-event-row:hover .timeline-event-image-wrap {
  transform: translateY(-12px) scale(1.025);
  border-color: rgba(173, 141, 63, 0.7);
  box-shadow: 0 16px 26px rgba(57, 48, 34, 0.2);
}

.timeline-event-row:hover .timeline-event-image {
  transform: scale(1.09);
  filter: saturate(1.04) contrast(1.04);
}

.timeline-event-row:hover .timeline-text-card {
  transform: translateY(-10px);
  border-color: rgba(173, 141, 63, 0.62);
  box-shadow: 0 12px 20px rgba(57, 48, 34, 0.16);
}

.archive-grid-card:hover {
  transform: translateY(-14px) scale(1.025);
}

.archive-grid-card .clip-thumb {
  overflow: hidden;
}

.archive-grid-card .clip-thumb img {
  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}

.archive-grid-card:hover .clip-thumb {
  box-shadow: 0 18px 28px rgba(57, 48, 34, 0.22);
}

.archive-grid-card:hover .clip-thumb img {
  transform: scale(1.1);
  filter: saturate(1.04) contrast(1.04);
}

.article-file:not(.is-open):hover {
  z-index: 4;
  transform: translateY(-10px) scale(1.012);
  box-shadow: 0 14px 22px rgba(57, 48, 34, 0.18);
}

.article-file-tab {
  background: linear-gradient(180deg, #fffdf7, #f5efe2);
}

.article-file:hover .article-file-tab {
  background: #fffdf7;
}

.article-file.is-open .article-file-tab,
.indicator-section.is-open .indicator-section-toggle {
  background: var(--ink);
}

.article-infographic:hover {
  transform: translateY(-12px) scale(1.025);
  box-shadow: 0 18px 28px rgba(57, 48, 34, 0.2);
}

.indicator-section:not(.is-open):hover {
  transform: translateY(-10px) scale(1.012);
  border-color: rgba(173, 141, 63, 0.64);
  box-shadow: 0 14px 22px rgba(57, 48, 34, 0.18);
}

.indicator-album-cover {
  border: 1px solid var(--paper-line);
  border-radius: 10px;
}

/* Card and image move as one, and only slightly. Previously the card scaled
   1.035 while the image inside scaled 1.075, so the artwork grew faster than
   the frame holding it and burst out of the card. */
.indicator-album:hover .indicator-album-cover,
.indicator-album:focus-visible .indicator-album-cover {
  transform: translateY(-5px) scale(1.012);
  border-color: rgba(173, 141, 63, 0.68);
  box-shadow: 0 10px 20px rgba(57, 48, 34, 0.16);
}

.indicator-album-cover img {
  transition-property: filter;
}

.indicator-album:hover .indicator-album-cover img,
.indicator-album:focus-visible .indicator-album-cover img {
  transform: none; /* the cover already carries the movement */
  filter: saturate(1.03) contrast(1.02);
}

/* Middle ground: fill the card's full width (no letterbox bars) but anchor to
   the top of the slide, so the infographic's title is always the part kept and
   only the lower artwork is cropped away. */
.indicator-album-cover img {
  object-fit: cover;
  object-position: top center;
  background: #f4f1ea;
}

/* The title sits in a flex row next to the slide count. A flex child defaults
   to min-width:auto, so a long Arabic title refused to wrap and ran far past
   the card (measured 1110px of text in a 285px column). */
.indicator-album-meta {
  align-items: flex-start;
  flex-wrap: wrap;
}
.indicator-album-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  hyphens: auto;
}

.press-card:hover {
  border-color: rgba(173, 141, 63, 0.72);
  box-shadow: 0 16px 24px rgba(57, 48, 34, 0.18);
  transform: translateY(-12px) scale(1.018);
}

.press-tag,
.indicator-section-count {
  background: rgba(173, 141, 63, 0.11);
  color: #8f712e;
}

.about-card:hover,
.about-extra-card:hover,
.about-hero-card:hover,
.home-section-card:hover,
.home-section-card:focus-visible {
  border-color: rgba(173, 141, 63, 0.66);
  box-shadow: 0 14px 22px rgba(57, 48, 34, 0.18);
  transform: translateY(-12px) scale(1.018);
}

.search-result:hover {
  background: rgba(173, 141, 63, 0.1);
  transform: translateX(10px) scale(1.012);
}

.rtl-page .search-result:hover {
  transform: translateX(-10px) scale(1.012);
}

.button-primary:hover,
.button-secondary:hover {
  transform: translateY(-5px) scale(1.04);
  box-shadow: 0 8px 14px rgba(57, 48, 34, 0.16);
}

/* Interior-page composition: repeat the reference's strong title rule,
   paper panels, navy selection, and gold navigation cues. */
.timeline-page-shell,
.clips-page-shell,
.articles-page-shell,
.indicators-page-shell,
.press-page-shell,
.about-page-shell {
  padding-top: clamp(48px, 6vw, 76px);
  padding-bottom: clamp(64px, 8vw, 104px);
}

.timeline-page-shell > .section-heading,
.clips-page-shell > .section-heading,
.articles-page-shell > .section-heading,
.indicators-page-shell > .section-heading,
.press-page-shell > .section-heading {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 42px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--paper-line);
  text-align: start;
}

.timeline-page-shell > .section-heading::after,
.clips-page-shell > .section-heading::after,
.articles-page-shell > .section-heading::after,
.indicators-page-shell > .section-heading::after,
.press-page-shell > .section-heading::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -1px;
  width: 110px;
  height: 3px;
  background: var(--accent);
}

.timeline-page-shell > .section-heading .eyebrow,
.clips-page-shell > .section-heading .eyebrow,
.articles-page-shell > .section-heading .eyebrow,
.indicators-page-shell > .section-heading .eyebrow,
.press-page-shell > .section-heading .press-title {
  margin: 0;
  color: var(--ink);
  text-align: start;
}

.press-page-shell > .section-heading .press-intro,
.press-page-shell > .section-heading .press-disclaimer {
  max-width: 760px;
  margin-inline: 0;
  text-align: start;
}

.timeline-nav-strip {
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(57, 48, 34, 0.12);
}

.timeline-nav-chip,
.press-filter {
  border-radius: 7px;
  background: #fffdf7;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-nav-chip:hover,
.press-filter:hover {
  transform: translateY(-4px) scale(1.055);
  border-color: var(--accent);
}

.timeline-nav-chip.is-active,
.press-filter.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

.timeline-section-heading .eyebrow {
  border-radius: 8px;
  border-color: rgba(173, 141, 63, 0.54);
  background: #fffdf7;
  color: var(--ink);
  box-shadow: 0 3px 8px rgba(57, 48, 34, 0.12);
}

.timeline-year-tag {
  color: #9a782f;
}

.timeline-card-wave {
  background:
    radial-gradient(120px 32px at 14% 100%, rgba(199, 167, 92, 0.28), transparent 65%),
    radial-gradient(170px 44px at 44% 100%, rgba(173, 141, 63, 0.3), transparent 66%),
    radial-gradient(160px 40px at 82% 100%, rgba(17, 44, 78, 0.3), transparent 64%);
}

.archive-flow-grid {
  gap: 24px;
}

.archive-grid-card {
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: var(--shadow-soft);
  text-align: start;
}

.archive-grid-card .clip-thumb {
  border-radius: 7px;
  border: 1px solid rgba(91, 78, 54, 0.22);
}

.archive-grid-card.is-selected {
  border-color: var(--accent);
  border-inline-end: 5px solid var(--accent);
  background: var(--ink);
}

.archive-grid-card.is-selected h3 {
  color: #fff;
}

.archive-grid-card.is-selected .clip-thumb {
  box-shadow: 0 0 0 2px var(--accent), 0 12px 20px rgba(4, 19, 35, 0.26);
}

.archive-inline-content {
  border-radius: 10px;
  border-inline-start: 5px solid var(--accent);
}

.article-file,
.article-file-tab {
  border-radius: 9px;
}

.article-file {
  border-color: rgba(91, 78, 54, 0.36);
}

.article-file.is-open {
  border-color: var(--accent);
  box-shadow: 0 16px 26px rgba(57, 48, 34, 0.2);
}

.article-file.is-open .article-file-tab {
  border-radius: 9px 9px 0 0;
  border-inline-end: 5px solid var(--accent);
}

.article-file-overflow {
  border-radius: 0 0 9px 9px;
}

.article-file-chevron,
.indicator-section-chevron {
  border-radius: 7px;
}

.indicator-albums {
  gap: 24px;
}

.indicator-album {
  padding: 10px 10px 16px;
  border: 1px solid var(--paper-line);
  border-radius: 10px;
  background: #fffdf7;
  box-shadow: var(--shadow-soft);
  transition: border-color 320ms ease, box-shadow 320ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.indicator-album:hover,
.indicator-album:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 16px 24px rgba(57, 48, 34, 0.18);
  transform: translateY(-12px) scale(1.018);
}

.indicator-section,
.indicator-section-toggle {
  border-radius: 9px;
}

.indicator-section.is-open {
  border-color: var(--accent);
}

.indicator-section.is-open .indicator-section-toggle {
  border-radius: 9px 9px 0 0;
  border-inline-end: 5px solid var(--accent);
}

.press-card {
  border-radius: 9px;
  border-color: rgba(91, 78, 54, 0.34);
}

.press-card:first-child {
  border-color: rgba(199, 167, 92, 0.55);
  border-inline-end: 5px solid var(--accent);
  background: var(--ink);
}

.press-card:first-child .press-card-title,
.press-card:first-child .press-card-link {
  color: #fff;
}

.press-card:first-child .press-card-meta,
.press-card:first-child .press-card-byline,
.press-card:first-child .press-card-summary {
  color: rgba(255, 255, 255, 0.68);
}

.press-card:first-child .press-tag {
  background: rgba(199, 167, 92, 0.18);
  color: #e3ca88;
}

.about-video-wrap,
.about-hero-card,
.about-extra-card {
  border-radius: 10px;
}

.about-hero-card {
  border-inline-end: 5px solid var(--accent);
}

.about-hero-card h1,
.about-extra-card h2 {
  position: relative;
  padding-bottom: 14px;
  text-align: start;
}

.about-hero-card h1::after,
.about-extra-card h2::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 88px;
  height: 3px;
  background: var(--accent);
}

.about-quote {
  border: 1px solid rgba(199, 167, 92, 0.44);
  border-radius: 10px;
  background: var(--ink);
  box-shadow: 0 6px 12px rgba(57, 48, 34, 0.16);
  color: #fff;
}

.about-quote::before,
.about-quote::after {
  color: var(--accent);
}

.site-footer {
  height: auto;
  padding: 30px max(24px, 4vw);
  border-top: 1px solid rgba(199, 167, 92, 0.32);
  background: var(--ink);
  color: #fff;
  font-family: var(--tamass-footer-font, inherit);
  font-size: var(--tamass-footer-size, inherit);
}

.site-footer-inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(180px, 0.8fr) minmax(420px, 2fr) auto;
  align-items: end;
  gap: 32px;
}

.site-footer-identity {
  display: grid;
  gap: 12px;
}

.site-footer-identity img {
  width: 116px;
  height: auto;
  filter: brightness(0) invert(1);
}

.site-footer-identity span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.site-footer-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.site-footer-socials a {
  width: 78px;
  min-height: 76px;
  padding: 12px 8px 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.site-footer-socials a:hover,
.site-footer-socials a:focus-visible {
  border-color: rgba(255, 255, 255, 0.66);
  background: rgba(255, 255, 255, 0.09);
  transform: translateY(-3px);
  outline: none;
}

.site-footer-socials a:focus-visible {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.site-footer-social-icon {
  width: 27px;
  height: 27px;
  fill: currentColor;
  flex: 0 0 auto;
}

.site-footer-social-name {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.62rem;
  line-height: 1;
}

.site-footer-year {
  color: rgba(255, 255, 255, 0.46);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.66rem;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .site-footer-socials {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .site-footer-socials a {
    width: 72px;
  }
}

/* Neutralize the canvas: hierarchy comes from layout, imagery, and state,
   while gold remains a precise accent rather than a page-wide color cast. */
.cinema-latest-card,
.cinema-directory-list :is(button, a),
.timeline-nav-strip,
.timeline-nav-chip,
.timeline-section-heading .eyebrow,
.timeline-text-card,
.archive-grid-card,
.archive-inline-content,
.article-file,
.article-file-tab,
.indicator-album,
.indicator-section,
.press-card,
.about-hero-card,
.about-extra-card,
.search-panel,
.search-result {
  background-color: #fff;
}

.cinema-latest-card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(17, 44, 78, 0.1);
}

.cinema-latest-item:first-child .cinema-latest-card,
.archive-grid-card.is-selected,
.press-card:first-child {
  background: var(--ink);
}

.cinema-latest-card:hover,
.cinema-latest-card:focus-visible,
.timeline-event-row:hover .timeline-event-image-wrap,
.archive-grid-card:hover .clip-thumb,
.article-file.is-open,
.article-infographic:hover,
.indicator-album:hover,
.indicator-album:focus-visible,
.press-card:hover,
.about-card:hover,
.about-extra-card:hover,
.about-hero-card:hover {
  box-shadow: 0 16px 26px rgba(17, 44, 78, 0.17);
}

.article-file-tab {
  background: linear-gradient(180deg, #fff, #f3f5f7);
}

.article-file:hover .article-file-tab {
  background: #fff;
}

.archive-flow-grid {
  counter-reset: none;
}

.archive-grid-card {
  position: relative;
  padding-bottom: 18px;
}

.archive-grid-card::before {
  content: none;
}

.archive-grid-card h3 {
  min-height: 2.45em;
  margin: 8px 0 0;
  padding-inline: 20px;
  display: flex;
  align-items: center;
  text-align: start;
}

.archive-grid-card::after {
  content: "↗";
  position: absolute;
  inset-inline-end: 14px;
  bottom: 15px;
  color: var(--accent);
  font-size: 1rem;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.rtl-page .archive-grid-card::after {
  content: "↖";
}

.archive-grid-card:hover::after,
.archive-grid-card:focus-visible::after {
  transform: translate(4px, -4px) scale(1.25);
}

.rtl-page .archive-grid-card:hover::after,
.rtl-page .archive-grid-card:focus-visible::after {
  transform: translate(-4px, -4px) scale(1.25);
}

/* Navy is structural: navigation, page identity, lead records, and active
   states. Neutral canvas and full-color imagery keep the content breathable. */
.topbar-wrap:not(.is-overlay) {
  background: rgba(17, 44, 78, 0.98);
  border-bottom-color: rgba(199, 167, 92, 0.38);
}

.topbar-wrap:not(.is-overlay) .masthead-logo {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}

.topbar-wrap:not(.is-overlay) .topnav-desktop {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(3, 15, 29, 0.18);
}

.topbar-wrap:not(.is-overlay) .topnav :is(button, a),
.topbar-wrap:not(.is-overlay) .lang-switch button,
.topbar-wrap:not(.is-overlay) .lang-switch span {
  color: rgba(255, 255, 255, 0.78);
}

.topbar-wrap:not(.is-overlay) .topnav :is(button, a):hover,
.topbar-wrap:not(.is-overlay) .topnav :is(button, a).is-active,
.topbar-wrap:not(.is-overlay) .lang-switch button:hover,
.topbar-wrap:not(.is-overlay) .lang-switch button.is-active {
  color: #fff;
}

.topbar-wrap:not(.is-overlay) .topnav :is(button, a)::after {
  background: var(--accent);
}

.topbar-wrap:not(.is-overlay) .lang-switch {
  border-color: rgba(255, 255, 255, 0.22);
}

.timeline-page-shell > .section-heading,
.clips-page-shell > .section-heading,
.articles-page-shell > .section-heading,
.indicators-page-shell > .section-heading,
.press-page-shell > .section-heading {
  padding: 24px 28px 27px;
  border: 1px solid rgba(199, 167, 92, 0.38);
  border-radius: 10px;
  background: var(--ink);
  box-shadow: 0 8px 16px rgba(17, 44, 78, 0.16);
}

.timeline-page-shell > .section-heading::after,
.clips-page-shell > .section-heading::after,
.articles-page-shell > .section-heading::after,
.indicators-page-shell > .section-heading::after,
.press-page-shell > .section-heading::after {
  inset-inline-start: 28px;
  bottom: 16px;
  background: var(--accent);
}

.timeline-page-shell > .section-heading .eyebrow,
.clips-page-shell > .section-heading .eyebrow,
.articles-page-shell > .section-heading .eyebrow,
.indicators-page-shell > .section-heading .eyebrow,
.press-page-shell > .section-heading .press-title {
  color: #fff;
}

.press-page-shell > .section-heading .press-intro,
.press-page-shell > .section-heading .press-disclaimer {
  color: rgba(255, 255, 255, 0.72);
}

.archive-grid-card:first-of-type {
  border-color: rgba(199, 167, 92, 0.55);
  border-inline-end: 5px solid var(--accent);
  background: var(--ink);
}

.archive-grid-card:first-of-type h3 {
  color: #fff;
}

.archive-grid-card:first-of-type .clip-thumb {
  border-color: rgba(199, 167, 92, 0.44);
}

.timeline-event-row:nth-child(3n + 1) .timeline-text-card {
  border-color: rgba(199, 167, 92, 0.42);
  border-inline-end: 4px solid var(--accent);
  background: var(--ink);
}

.timeline-event-row:nth-child(3n + 1) .timeline-text-card h3,
.timeline-event-row:nth-child(3n + 1) .timeline-text-card p {
  color: #fff;
}

.timeline-event-row:nth-child(3n + 1) .timeline-card-wave {
  opacity: 0.52;
}

.indicator-album:first-child {
  border-color: rgba(199, 167, 92, 0.55);
  border-inline-end: 5px solid var(--accent);
  background: var(--ink);
}

.indicator-album:first-child .indicator-album-title {
  color: #fff;
}

.about-hero-card {
  border-color: rgba(199, 167, 92, 0.48);
  background: var(--ink);
}

.about-hero-card h1,
.about-hero-card p {
  color: #fff;
}

.about-hero-card p {
  opacity: 0.8;
}

/* Holistic rhythm pass: remove the blanket bars and let each content type
   own a distinct editorial form. */
.topbar-wrap:not(.is-overlay) {
  background: rgba(248, 250, 252, 0.96);
  border-bottom-color: var(--paper-line);
}

.topbar-wrap:not(.is-overlay) .masthead-logo {
  mix-blend-mode: multiply;
  filter: none;
}

.topbar-wrap:not(.is-overlay) .topnav-desktop {
  border-color: rgba(199, 167, 92, 0.4);
  background: var(--ink);
  box-shadow: 0 6px 14px rgba(17, 44, 78, 0.18);
}

.topbar-wrap:not(.is-overlay) .lang-switch {
  border-color: var(--paper-line);
}

.topbar-wrap:not(.is-overlay) .lang-switch button,
.topbar-wrap:not(.is-overlay) .lang-switch span {
  color: var(--ink-soft);
}

.topbar-wrap:not(.is-overlay) .lang-switch button:hover,
.topbar-wrap:not(.is-overlay) .lang-switch button.is-active {
  color: var(--ink);
}

/* Category/archive heading: one page title followed by the restrained
   rule-and-gold marker used in the original GitHub design. */
.timeline-page-shell > .section-heading,
.clips-page-shell > .section-heading,
.articles-page-shell > .section-heading,
.indicators-page-shell > .section-heading,
.press-page-shell > .section-heading {
	padding: 0 0 22px;
	border: 0;
	border-bottom: 1px solid var(--paper-line-strong);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
  margin-bottom: 36px;
}

.timeline-page-shell > .section-heading::after,
.clips-page-shell > .section-heading::after,
.articles-page-shell > .section-heading::after,
.indicators-page-shell > .section-heading::after,
.press-page-shell > .section-heading::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	bottom: -1px;
	width: 130px;
	height: 3px;
	background: var(--accent);
}

.timeline-page-shell > .section-heading .eyebrow,
.clips-page-shell > .section-heading .eyebrow,
.articles-page-shell > .section-heading .eyebrow,
.indicators-page-shell > .section-heading .eyebrow,
.press-page-shell > .section-heading .press-title {
  color: var(--ink);
}

.press-page-shell > .section-heading .press-intro,
.press-page-shell > .section-heading .press-disclaimer {
  color: var(--ink-soft);
}

/* Indicators: the newest collection becomes a wide editorial feature with
   its cover and title in separate planes; the rest remain a browseable shelf. */
.indicator-albums {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 22px;
  align-items: stretch;
}

.indicator-album:first-child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(210px, 0.7fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.indicator-album:first-child .indicator-album-cover {
  height: 100%;
  min-height: 420px;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.indicator-album:first-child .indicator-album-title {
  padding: 30px 24px;
  display: flex;
  align-items: center;
  color: #fff;
  font-size: clamp(1.55rem, 2.5vw, 2.25rem);
  line-height: 1.3;
}

.indicator-album:not(:first-child) {
  height: 100%;
}

.indicator-album:not(:first-child) .indicator-album-title {
  min-height: 2.6em;
  padding-inline: 4px;
  display: flex;
  align-items: center;
}

.timeline-event-row .timeline-text-card {
  border-inline-end: 1px solid var(--paper-line);
  background: #fff;
}

.timeline-event-row .timeline-text-card h3 {
  color: var(--ink);
}

.timeline-event-row .timeline-text-card p {
  color: var(--ink-soft);
}

.timeline-event-row:nth-child(odd) .timeline-text-card {
  border-color: rgba(199, 167, 92, 0.42);
  border-inline-end: 4px solid var(--accent);
  background: var(--ink);
}

.timeline-event-row:nth-child(odd) .timeline-text-card h3,
.timeline-event-row:nth-child(odd) .timeline-text-card p {
  color: #fff;
}

.timeline-event-row:nth-child(even) .timeline-text-card {
  border-color: var(--paper-line);
  border-inline-end: 1px solid var(--paper-line);
  background: #fff;
}

.timeline-event-row:nth-child(even) .timeline-text-card h3 {
  color: var(--ink);
}

.timeline-event-row:nth-child(even) .timeline-text-card p {
  color: var(--ink-soft);
}

.timeline-event-row:nth-child(even) .timeline-card-wave {
  opacity: 0.95;
}

.archive-grid-card h3 {
  min-height: 3em;
  line-height: 1.35;
}

.press-grid {
  gap: 22px;
  align-items: stretch;
}

.press-card:not(:first-child) {
  min-height: 100%;
}

/* Press: one lead story establishes the reading hierarchy before the grid. */
.press-card:first-child {
  grid-column: span 2;
  min-height: 310px;
  justify-content: flex-end;
  padding: 30px;
}

.press-card:first-child .press-card-title {
  max-width: 24ch;
  font-size: clamp(1.55rem, 2.7vw, 2.35rem);
  line-height: 1.3;
}

.press-card:first-child .press-card-summary {
  max-width: 72ch;
}

/* About: image and purpose statement now meet in one opening spread. */
.about-page-shell {
  width: var(--content-width);
  max-width: 1180px;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr);
  align-items: stretch;
}

.about-video-wrap {
  margin: 0;
  align-items: stretch;
}

.about-video {
  width: 100%;
  max-width: none;
  min-height: 620px;
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(17, 44, 78, 0.16);
}

.about-hero-card {
  padding: clamp(34px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.about-quote,
.about-extra-card {
  grid-column: 1 / -1;
}

/* Repeated content arrives as a visual cut, while hover remains free to use
   the larger movement already defined above. */
@keyframes tamass-content-cut {
  from {
    opacity: 0.12;
    clip-path: inset(14% 0 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@supports (animation-timeline: view()) {
  .archive-grid-card,
  .article-file,
  .indicator-album,
  .press-card,
  .timeline-event-row {
    animation: tamass-content-cut linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 34%;
  }
}

/* Archive: establish a cinematic lead record, then settle into the catalogue.
   The lead image and title share one wide frame instead of feeling like another
   thumbnail in a uniform grid. */
@media (min-width: 1101px) {
  .archive-grid-card:first-of-type {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(330px, 0.75fr);
    grid-template-rows: 420px;
    padding: 0;
    overflow: hidden;
  }

  .archive-grid-card:first-of-type .clip-thumb {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    margin: 0;
    border: 0;
    border-radius: 8px 0 0 8px;
  }

  .archive-grid-card:first-of-type .clip-thumb img {
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .rtl-page .archive-grid-card:first-of-type .clip-thumb {
    border-radius: 0 8px 8px 0;
  }

  .archive-grid-card:first-of-type h3 {
    min-height: 0;
    margin: 0;
    padding: 46px 44px 82px;
    align-self: center;
    font-size: clamp(1.75rem, 2.55vw, 2.75rem);
    line-height: 1.25;
  }

  .archive-grid-card:first-of-type::before {
    inset-inline-start: calc(69% + 44px);
    bottom: 34px;
  }

  .archive-grid-card:first-of-type::after {
    inset-inline-end: 38px;
    bottom: 30px;
  }
}

.archive-grid-card:not(:first-of-type) {
  align-self: stretch;
}

@media (min-width: 761px) and (max-width: 1100px) {
  .archive-grid-card:first-of-type {
    grid-column: 1 / -1;
  }
}

/* Articles: the newest piece opens as an editorial spread. Numbered tabs make
   the archive scannable; the media and reading column enter as a single scene. */
.article-stack {
  gap: 8px;
}

.article-file-tab {
  position: relative;
  padding-inline-start: 22px;
}

.article-file-tab::before {
  content: none;
}

.article-file.is-open .article-file-tab::before {
  color: #e4c978;
}

@keyframes tamass-article-media-in {
  from {
    opacity: 0.18;
    clip-path: inset(0 0 18% 0);
    transform: scale(1.055);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: scale(1);
  }
}

@keyframes tamass-article-copy-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.article-file-media img {
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), filter 500ms ease;
}

.article-file-media:hover img {
  transform: scale(1.06);
  filter: grayscale(0) contrast(1.04);
}

.article-file.is-open .article-file-media {
  animation: tamass-article-media-in 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.article-file.is-open .article-file-text {
  animation: tamass-article-copy-in 620ms cubic-bezier(0.16, 1, 0.3, 1) 110ms both;
}

@media (min-width: 901px) {
  .article-file-content {
    width: 100%;
    max-width: none;
    display: flex;
    flex-direction: column;
    gap: 38px;
    padding: clamp(34px, 4vw, 52px);
  }

  .article-file-media {
    position: relative;
    top: auto;
    width: 100%;
    aspect-ratio: 16 / 7;
  }

  .article-file-text {
    width: 100%;
    padding: 0 clamp(4px, 1.2vw, 18px) 12px;
  }

  .article-file-text > p {
    width: 100%;
    max-width: none;
  }

  .article-file-text > p:first-child {
    font-family: var(--display);
    font-size: clamp(1.3rem, 1.9vw, 1.7rem);
    line-height: 1.55;
  }

  .rtl-page .article-file-text > p:first-child {
    font-family: var(--arabic-display);
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .indicator-albums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .indicator-album:first-child {
    grid-column: span 2;
  }
}

@media (max-width: 760px) {
  .timeline-page-shell,
  .clips-page-shell,
  .articles-page-shell,
  .indicators-page-shell,
  .press-page-shell,
  .about-page-shell {
    padding-top: 28px;
    padding-bottom: 52px;
  }

  .timeline-page-shell > .section-heading,
  .clips-page-shell > .section-heading,
  .articles-page-shell > .section-heading,
  .indicators-page-shell > .section-heading,
  .press-page-shell > .section-heading {
    margin-bottom: 28px;
  }

  .timeline-page-shell > .section-heading::after,
  .clips-page-shell > .section-heading::after,
  .articles-page-shell > .section-heading::after,
  .indicators-page-shell > .section-heading::after,
  .press-page-shell > .section-heading::after {
    width: 76px;
  }

  .indicator-albums {
    grid-template-columns: 1fr;
  }

  .indicator-album:first-child {
    grid-column: auto;
    display: flex;
    padding: 10px 10px 16px;
  }

  .indicator-album:first-child .indicator-album-cover {
    width: 100%;
    min-height: 0;
    aspect-ratio: 4 / 5;
    border-radius: 8px;
  }

  .indicator-album:first-child .indicator-album-title {
    padding: 0;
    font-size: 1.2rem;
  }

  .press-card:first-child {
    grid-column: auto;
    min-height: 0;
    padding: 22px;
  }

  .about-page-shell {
    grid-template-columns: 1fr;
  }

  .about-video {
    width: min(360px, 82vw);
    min-height: 0;
  }

  .about-hero-card {
    padding: 28px 22px;
  }

  .about-quote,
  .about-extra-card {
    grid-column: auto;
  }

  .article-file-tab {
    padding-inline-start: 52px;
  }

  .article-file-tab::before {
    inset-inline-start: 14px;
  }
}

/* ─── Publication motion system ────────────────────────────────────────────
   Page changes use a short optical settle, like a clean documentary edit.
   There is no travelling overlay: the incoming page simply resolves. */
@keyframes tamass-page-enter {
  from {
    opacity: 0.88;
  }
  to {
    opacity: 1;
  }
}

.page-stage {
  position: relative;
  animation: tamass-page-enter 140ms ease-out both;
}

/* Supersede the older per-page translate animation. Its retained identity
   transform created a containing block for fixed readers and modal overlays. */
.page-stage > .page-shell {
  animation: none;
}

.page-stage::before {
  content: none;
}

/* Home: a nearly imperceptible camera drift keeps the opening frame breathing. */
@keyframes tamass-hero-camera {
  from { transform: scale(1.015); }
  to { transform: scale(1.065); }
}

.cinema-hero-video > .herovid-iframe {
  animation: tamass-hero-camera 14s ease-in-out alternate infinite;
  transform-origin: center 42%;
}

@keyframes tamass-history-image-in {
  from {
    opacity: 0.35;
    clip-path: inset(0 16% 0 0);
    transform: scale(1.075);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: scale(1);
  }
}

.cinema-history-stage > img {
  animation: tamass-history-image-in 760ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rtl-page .cinema-history-stage > img {
  animation-name: tamass-history-image-in-rtl;
}

@keyframes tamass-history-image-in-rtl {
  from {
    opacity: 0.35;
    clip-path: inset(0 0 0 16%);
    transform: scale(1.075);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: scale(1);
  }
}

.cinema-directory-thumb img {
  transition: transform 720ms cubic-bezier(0.16, 1, 0.3, 1), filter 360ms ease;
}

.cinema-directory-list :is(button, a):hover .cinema-directory-thumb img,
.cinema-directory-list :is(button, a):focus-visible .cinema-directory-thumb img {
  transform: scale(1.16);
  filter: saturate(1.04) contrast(1.05);
}

/* Archive: a restrained poster drift and a light pass signal playable media. */
@keyframes tamass-archive-poster-drift {
  from { object-position: 50% 43%; }
  to { object-position: 50% 57%; }
}

.archive-grid-card:first-of-type .clip-thumb img {
  animation: tamass-archive-poster-drift 13s ease-in-out alternate infinite;
}

.clip-thumb-grain::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -45%;
  width: 30%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
  transform: skewX(-16deg);
  opacity: 0;
}

.archive-grid-card:hover .clip-thumb-grain::after,
.archive-grid-card:focus-visible .clip-thumb-grain::after {
  animation: tamass-film-pass 760ms ease-out both;
}

@keyframes tamass-film-pass {
  0% { left: -45%; opacity: 0; }
  20% { opacity: 0.75; }
  100% { left: 120%; opacity: 0; }
}

/* Timeline: the axis draws with the scroll and the active chapter answers with
   one gold pulse rather than making every event move continuously. */
@keyframes tamass-axis-draw {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

.timeline-axis {
  transform-origin: top center;
}

@supports (animation-timeline: view()) {
  .timeline-axis {
    animation: tamass-axis-draw linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 72%;
  }
}

@keyframes tamass-section-focus {
  0% { box-shadow: 0 0 0 0 rgba(199, 167, 92, 0.52); }
  100% { box-shadow: 0 0 0 16px rgba(199, 167, 92, 0); }
}

.timeline-band.is-active .timeline-section-heading::after {
  animation: tamass-section-focus 720ms ease-out both;
}

.timeline-band.is-active .timeline-year-tag {
  color: var(--accent);
  transform: scale(1.08);
}

.timeline-year-tag {
  transition: color 240ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Articles: the progress rule is fixed to the viewport while the open paper
   remains broad and calm. */
.article-reading-progress {
  position: fixed;
  z-index: 31;
  top: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
  transition: transform 100ms linear;
  pointer-events: none;
}

.rtl-page .article-reading-progress {
  transform-origin: right center;
}

@keyframes tamass-infographic-focus {
  from {
    opacity: 0.35;
    filter: grayscale(0.5) contrast(0.9);
    clip-path: inset(10% 0 0);
  }
  to {
    opacity: 1;
    filter: grayscale(0) contrast(1);
    clip-path: inset(0);
  }
}

@supports (animation-timeline: view()) {
  .article-infographic {
    animation: tamass-infographic-focus linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 48%;
  }
}

/* Infographics: switching a plate produces a firm, directional print slide. */
@keyframes tamass-plate-in {
  from {
    opacity: 0.2;
    transform: translateX(-46px);
    clip-path: inset(0 12% 0 0);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0);
  }
}

.carousel-main img {
  animation: tamass-plate-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.rtl-page .carousel-main img {
  animation-name: tamass-plate-in-rtl;
}

@keyframes tamass-plate-in-rtl {
  from {
    opacity: 0.2;
    transform: translateX(46px);
    clip-path: inset(0 0 0 12%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
    clip-path: inset(0);
  }
}

@keyframes tamass-counter-tick {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.carousel-indicator {
  animation: tamass-counter-tick 260ms ease-out both;
}

.indicator-modal-panel {
  animation: tamass-modal-open 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes tamass-modal-open {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Press: filters recompose the issue in short editorial groups. */
@keyframes tamass-press-recompose {
  from {
    opacity: 0;
    clip-path: inset(0 10% 0 0);
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: translateY(0);
  }
}

.press-grid .press-card {
  animation: tamass-press-recompose 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(min(var(--press-index, 0), 5) * 70ms);
}

.press-card-link span {
  display: inline-block;
  transition: transform 220ms ease;
}

.press-card:hover .press-card-link span,
.press-card:focus-within .press-card-link span {
  transform: translate(4px, -4px);
}

.rtl-page .press-card:hover .press-card-link span,
.rtl-page .press-card:focus-within .press-card-link span {
  transform: translate(-4px, -4px);
}

/* About: the statement reads into view in ordered lines. */
@keyframes tamass-about-line {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.about-hero-card > p,
.about-extra-card > p,
.about-questions > li {
  animation: tamass-about-line 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(140ms + min(var(--about-index, 0), 8) * 90ms);
}

.about-video {
  transform-origin: center;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.about-video-wrap:hover .about-video {
  transform: scale(1.025);
}

/* Completion pass: concrete versions of the interactions described in the
   motion plan, replacing static approximations with state-connected movement. */
.topnav-desktop {
  position: relative;
}

.topnav-active-track {
  position: absolute;
  bottom: 6px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
  transition:
    left 420ms cubic-bezier(0.16, 1, 0.3, 1),
    width 420ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 160ms ease;
}

.topnav :is(button, a).is-active::after {
  transform: scaleX(0);
}

.clip-thumb-preview {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms ease-out;
}

.archive-grid-card:first-of-type .clip-thumb-preview {
  transform: scale(2.35);
}

@keyframes tamass-preview-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.clip-thumb:hover .clip-thumb-preview,
.clip-thumb:focus-within .clip-thumb-preview {
  opacity: 1;
}

.clip-thumb:hover > img,
.clip-thumb:focus-within > img {
  opacity: 0;
}

.clip-thumb > img {
  transition: opacity 240ms ease, transform 700ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}

.clip-thumb:hover .clip-thumb-play,
.clip-thumb:focus-within .clip-thumb-play {
  opacity: 0.34;
  transform: scale(0.84);
}

[data-cinema-scene] .cinema-latest-card-media {
  clip-path: inset(0 0 18% 0);
  transition: clip-path 680ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-cinema-scene] .cinema-latest-card-copy > strong,
[data-cinema-scene] .cinema-latest-card-action {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 480ms ease, transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-cinema-scene].is-visible .cinema-latest-card-media {
  clip-path: inset(0);
}

[data-cinema-scene].is-visible .cinema-latest-card-copy > strong,
[data-cinema-scene].is-visible .cinema-latest-card-action {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 260ms;
}

.cinema-history-shade {
  transition: background 620ms ease, opacity 620ms ease;
}

.cinema-history-stage[data-series-index="0"] .cinema-history-shade {
  background: linear-gradient(90deg, rgba(4, 20, 38, 0.84), rgba(4, 20, 38, 0.18));
}

.cinema-history-stage[data-series-index="1"] .cinema-history-shade,
.cinema-history-stage[data-series-index="2"] .cinema-history-shade {
  background: linear-gradient(90deg, rgba(9, 32, 56, 0.78), rgba(72, 56, 29, 0.18));
}

.cinema-history-stage[data-series-index="3"] .cinema-history-shade,
.cinema-history-stage[data-series-index="4"] .cinema-history-shade {
  background: linear-gradient(90deg, rgba(5, 18, 33, 0.88), rgba(80, 34, 24, 0.24));
}

.cinema-history-stage[data-series-index="5"] .cinema-history-shade {
  background: linear-gradient(90deg, rgba(3, 14, 27, 0.94), rgba(18, 38, 55, 0.36));
}

.rtl-page .cinema-history-stage[data-series-index] .cinema-history-shade {
  transform: scaleX(-1);
}

.cinema-directory-list :is(button, a) {
  transition:
    grid-template-columns 420ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms ease,
    background-color 220ms ease,
    box-shadow 320ms ease,
    transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-directory-list :is(button, a):hover,
.cinema-directory-list :is(button, a):focus-visible {
  grid-template-columns: 150px minmax(0, 1fr) 34px;
}

.cinema-directory-list :is(button, a):hover .cinema-directory-thumb,
.cinema-directory-list :is(button, a):focus-visible .cinema-directory-thumb {
  width: 150px;
}

.cinema-directory-thumb {
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tamass-archive-number {
  from {
    color: rgba(199, 167, 92, 0.15);
    transform: translateY(8px);
  }
  to {
    color: var(--accent);
    transform: translateY(0);
  }
}

@supports (animation-timeline: view()) {
  .archive-grid-card::before {
    animation: tamass-archive-number linear both;
    animation-timeline: view();
    animation-range: entry 4% entry 42%;
  }
}

.timeline-event-band {
  position: relative;
  overflow: clip;
}

.timeline-year-ghost {
  position: absolute;
  z-index: 0;
  inset-inline-start: 50%;
  top: 50%;
  color: rgba(17, 44, 78, 0.045);
  font-family: var(--display);
  font-size: clamp(7rem, 19vw, 17rem);
  font-weight: 800;
  line-height: 0.7;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.rtl-page .timeline-year-ghost {
  transform: translate(50%, -50%);
}

.timeline-event-grid {
  position: relative;
  z-index: 1;
}

@keyframes tamass-event-side-in {
  from {
    opacity: 0;
    transform: translateX(-70px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tamass-event-side-in-reverse {
  from {
    opacity: 0;
    transform: translateX(70px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tamass-timeline-parallax {
  from { object-position: 50% 38%; }
  to { object-position: 50% 62%; }
}

@supports (animation-timeline: view()) {
  .timeline-event-row.is-left .timeline-visual-side,
  .timeline-event-row.is-right .timeline-text-side {
    animation: tamass-event-side-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 46%;
  }

  .timeline-event-row.is-right .timeline-visual-side,
  .timeline-event-row.is-left .timeline-text-side {
    animation: tamass-event-side-in-reverse linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 46%;
  }

  .timeline-event-image {
    animation: tamass-timeline-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@keyframes tamass-article-media-in-rtl {
  from {
    opacity: 0.16;
    clip-path: inset(0 18% 0 0);
    transform: scale(1.045);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    transform: scale(1);
  }
}

.rtl-page .article-file.is-open .article-file-media {
  animation-name: tamass-article-media-in-rtl;
}

.article-file.is-open .article-file-text {
  animation: none;
}

.article-file.is-open .article-file-text > p {
  animation: tamass-article-copy-in 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(170ms + min(var(--paragraph-index, 0), 6) * 55ms);
}

.article-file.is-open .article-file-text > p:nth-child(2) { animation-delay: 225ms; }
.article-file.is-open .article-file-text > p:nth-child(3) { animation-delay: 280ms; }
.article-file.is-open .article-file-text > p:nth-child(4) { animation-delay: 335ms; }
.article-file.is-open .article-file-text > p:nth-child(n + 5) { animation-delay: 390ms; }

.carousel-main {
  cursor: zoom-in;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-group(*) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tamass-indicator-from-cover {
  from {
    opacity: 0.28;
    clip-path: inset(8% round 10px);
    transform:
      translate(
        calc(var(--indicator-origin-x) - 50vw),
        calc(var(--indicator-origin-y) - 50vh)
      )
      scale(var(--indicator-origin-scale));
  }
  to {
    opacity: 1;
    clip-path: inset(0 round 10px);
    transform: translate(0, 0) scale(1);
  }
}

.indicator-modal-panel.from-cover {
  transform-origin: center;
  animation: tamass-indicator-from-cover 520ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.indicator-modal-panel.from-cover.is-closing {
  animation: tamass-indicator-from-cover 420ms cubic-bezier(0.76, 0, 0.24, 1) reverse both;
  pointer-events: none;
}

.press-card-title {
  transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.press-card:hover .press-card-title,
.press-card:focus-within .press-card-title {
  transform: translateX(8px);
}

.rtl-page .press-card:hover .press-card-title,
.rtl-page .press-card:focus-within .press-card-title {
  transform: translateX(-8px);
}

@keyframes tamass-about-parallax {
  from { transform: translateY(-3%) scale(1.08); }
  to { transform: translateY(3%) scale(1.08); }
}

@supports (animation-timeline: view()) {
  .about-video .herovid-iframe {
    animation: tamass-about-parallax linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }

  .about-hero-card h1::after,
  .about-extra-card h2::after {
    transform-origin: right center;
    animation: tamass-axis-draw linear both;
    animation-timeline: view();
    animation-range: entry 5% entry 52%;
  }

  .app-shell:not(.rtl-page) .about-hero-card h1::after,
  .app-shell:not(.rtl-page) .about-extra-card h2::after {
    transform-origin: left center;
  }

  .about-hero-card > p,
  .about-extra-card > p,
  .about-questions > li {
    animation: tamass-about-line linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 42%;
    animation-delay: 0ms;
  }
}

@media (min-width: 901px) {
  .about-quote {
    position: sticky;
    top: 116px;
    z-index: 2;
  }

  .about-extra-card {
    position: relative;
    z-index: 3;
  }
}

/* Timeline copy is the reading anchor. Images and the axis can move, but the
   year callout and text card stay fixed in their final position. */
.timeline-text-side {
  opacity: 1;
  transform: none;
  animation: none !important;
}

.timeline-event-row:hover .timeline-text-card {
  transform: translateY(3px) scale(1.018);
  transform-origin: top center;
}

/* Timeline correction: one readable date, one dependable spine. The former
   oversized background dates duplicated the actual marker and interfered with
   the images, so they are deliberately suppressed even for stale markup. */
.timeline-year-ghost {
  display: none !important;
}

@keyframes tamass-axis-form {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}

.timeline-axis {
  width: 4px;
  opacity: 1;
  transform: translateX(-50%);
  transform-origin: top center;
  background: linear-gradient(
    180deg,
    rgba(173, 141, 63, 0.28),
    rgba(173, 141, 63, 0.98) 12%,
    rgba(173, 141, 63, 0.98) 88%,
    rgba(173, 141, 63, 0.28)
  );
  box-shadow: 0 0 0 1px rgba(255, 253, 247, 0.76);
  -webkit-mask-image: none;
  mask-image: none;
  animation: tamass-axis-form 760ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (min-width: 761px) {
  .timeline-text-side {
    padding-top: 18px;
  }
}

.timeline-year-callout {
  position: relative;
  z-index: 2;
  margin-bottom: 10px;
}

.timeline-year-tag,
.timeline-band.is-active .timeline-year-tag {
  transform: scaleY(0.9);
}

.timeline-text-card {
  transform-origin: top center;
  transition:
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 260ms ease,
    box-shadow 260ms ease;
}

.archive-card-copy {
  min-width: 0;
  display: block;
}

/* Home history reel: chapter selection is a direct archival cut. The images
   are preloaded in React, so there is no need to fade content out while the
   next frame arrives. */
.cinema-history-stage > img {
  opacity: 1;
  clip-path: none;
  transform: none;
  animation: none !important;
}

.cinema-history-copy {
  opacity: 1;
  transform: none;
  animation: none !important;
}

.cinema-history-shade {
  transition: none;
}

.cinema-history-ghost {
  animation: none;
}

.archive-card-meta {
  min-height: 18px;
  padding: 0 42px 0 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--ink-soft);
  font-family: var(--tamass-date-font, inherit);
  font-size: var(--tamass-date-size, 0.66rem);
  font-weight: var(--tamass-date-weight, inherit);
  line-height: 1.3;
}

.rtl-page .archive-card-meta {
  padding: 0 0 0 42px;
}

.archive-card-meta span:empty {
  display: none;
}

.archive-card-summary {
  display: block;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.94rem;
  line-height: 1.75;
  text-align: start;
}

@media (min-width: 1101px) {
  .archive-grid-card:first-of-type {
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.85fr);
    grid-template-rows: 390px;
  }

  .archive-grid-card:first-of-type .archive-card-copy {
    height: 100%;
    padding: 38px 40px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    background: var(--ink);
    color: #fff;
  }

  .archive-grid-card:first-of-type .archive-card-meta {
    min-height: 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.54);
  }

  .archive-grid-card:first-of-type h3 {
    min-height: 0;
    margin: 0;
    padding: 0;
    align-self: auto;
    color: #fff;
    font-size: clamp(1.7rem, 2.3vw, 2.55rem);
    line-height: 1.28;
  }

  .archive-grid-card:first-of-type::before {
    inset-inline-start: auto;
    inset-inline-end: 40px;
    bottom: 28px;
  }

  .archive-grid-card:first-of-type::after {
    inset-inline-end: auto;
    inset-inline-start: 40px;
    bottom: 24px;
  }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .archive-grid-card:first-of-type {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
    grid-template-rows: 340px;
    padding: 0;
    overflow: hidden;
  }

  .archive-grid-card:first-of-type .clip-thumb {
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
  }

  .archive-grid-card:first-of-type .archive-card-copy {
    height: 100%;
    padding: 30px 28px 54px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    background: var(--ink);
    color: #fff;
  }

  .archive-grid-card:first-of-type .archive-card-meta {
    padding: 0;
    color: rgba(255, 255, 255, 0.54);
  }

  .archive-grid-card:first-of-type h3 {
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: clamp(1.45rem, 2.8vw, 2rem);
  }

  .archive-grid-card:first-of-type .archive-card-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

@media (max-width: 760px) {
  .archive-card-meta {
    padding-inline: 0;
  }

  .archive-card-summary {
    margin-top: 10px;
    color: var(--ink-soft);
  }
}

/* An open article owns its navy tab across the entire expanded hit area.
   This must outrank the generic white hover state used by closed rows. */
.article-file.is-open .article-file-tab,
.article-file.is-open:hover .article-file-tab,
.article-file.is-open:focus-within .article-file-tab {
  background: var(--ink);
  color: #fff;
}

/* ─── Documentary cinema pass ──────────────────────────────────────────────
   Motion belongs to footage, light and scene changes. Reading copy remains
   planted, so the publication feels authored rather than restless. */
.herovid-keyboard-trigger {
  position: absolute;
  z-index: 1;
  width: 1px;
  height: 1px;
  inset: 0 auto auto 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  background: transparent;
}

.herovid-keyboard-trigger:focus-visible {
  width: auto;
  height: auto;
  inset: 14px auto auto 14px;
  padding: 8px 12px;
  clip-path: none;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
}

button.herovid-cue {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
}

.herovid-cue.is-sounding {
  color: #fff;
}

.herovid-cue.is-sounding svg {
  filter: drop-shadow(0 0 7px rgba(199, 167, 92, 0.9));
}

.cinema-home {
  position: relative;
  isolation: isolate;
}

/* A very light film surface unifies stills and footage without tinting the
   publication sepia. It is intentionally monochrome and nearly invisible. */
.cinema-home::after {
  content: "";
  position: fixed;
  inset: -45%;
  z-index: 70;
  pointer-events: none;
  opacity: 0.035;
  background:
    repeating-radial-gradient(circle at 31% 47%, rgba(255,255,255,0.9) 0 0.7px, transparent 0.8px 3px),
    repeating-radial-gradient(circle at 67% 53%, rgba(4,18,35,0.8) 0 0.6px, transparent 0.8px 4px);
  background-size: 7px 7px, 9px 9px;
  mix-blend-mode: soft-light;
  animation: tamass-film-grain 900ms steps(2, end) infinite;
}

@keyframes tamass-film-grain {
  0% { transform: translate3d(-1.2%, 0.8%, 0); }
  25% { transform: translate3d(1%, -1.1%, 0); }
  50% { transform: translate3d(0.5%, 1.3%, 0); }
  75% { transform: translate3d(-0.8%, -0.6%, 0); }
  100% { transform: translate3d(1.1%, 0.4%, 0); }
}

.cinema-hero-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: #020913;
  opacity: 0;
  transition: opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cinema-home.is-cold-opening .cinema-hero-video::before {
  opacity: 1;
}

.cinema-home.is-cold-opening .cinema-hero-copy > *,
.cinema-home.is-cold-opening .cinema-hero-edge,
.cinema-home.is-cold-opening .cinema-hero .herovid-cue {
  opacity: 0;
  animation: none !important;
}

.cinema-home.is-cold-ready .cinema-hero-copy .cinema-scene-number {
  animation-delay: 80ms;
}

.cinema-home.is-cold-ready .cinema-hero-copy h1 {
  animation-delay: 220ms;
}

.cinema-home.is-cold-ready .cinema-hero-copy > p {
  animation-delay: 430ms;
}

.cinema-home.is-cold-ready .cinema-hero-actions {
  animation-delay: 620ms;
}

.tamass-cold-open .page-home .topbar-wrap {
  opacity: 0;
  transform: translateY(-22px);
  pointer-events: none;
}

.page-home .topbar-wrap {
  transition:
    opacity 700ms ease,
    transform 850ms cubic-bezier(0.16, 1, 0.3, 1),
    background 240ms ease,
    box-shadow 240ms ease;
}

.cinema-latest,
.cinema-history,
.cinema-directory {
  position: relative;
  min-height: min(92svh, 980px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

.cinema-latest > *,
.cinema-history > *,
.cinema-directory > * {
  position: relative;
  z-index: 1;
}

.cinema-latest-card-media img,
.cinema-history-stage > img,
.cinema-directory-thumb img,
.timeline-event-image,
.archive-grid-card .clip-thumb > img {
  filter: saturate(0.82) contrast(1.06) brightness(0.96);
  transition:
    filter 700ms ease,
    transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cinema-latest-card:hover .cinema-latest-card-media img,
.cinema-latest-card:focus-visible .cinema-latest-card-media img,
.cinema-directory-list :is(button, a):hover .cinema-directory-thumb img,
.cinema-directory-list :is(button, a):focus-visible .cinema-directory-thumb img,
.timeline-event-row:hover .timeline-event-image,
.archive-grid-card:hover .clip-thumb > img,
.archive-grid-card:focus-visible .clip-thumb > img {
  filter: saturate(1) contrast(1.03) brightness(1);
}

/* Titles reveal by exposure rather than sliding through the layout. */
.cinema-section-heading h2,
.timeline-section-heading h2 {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1) 100ms;
}

.rtl-page .cinema-section-heading h2,
.rtl-page .timeline-section-heading h2 {
  clip-path: inset(0 0 0 100%);
}

[data-cinema-scene].is-visible .cinema-section-heading h2,
.timeline-band.is-active .timeline-section-heading h2 {
  clip-path: inset(0);
}

/* The timeline behaves like one tracking shot: tonal density grows across
   chapters, while each active chapter dissolves cleanly into view. */
.timeline-continuous-stack {
  isolation: isolate;
}

.timeline-band {
  --chapter-tone: rgba(12, 45, 82, 0.018);
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255,255,255,0.72), transparent 45%),
    linear-gradient(180deg, transparent, var(--chapter-tone));
}

.timeline-band:nth-child(2n) { --chapter-tone: rgba(17, 57, 99, 0.045); }
.timeline-band:nth-child(3n) { --chapter-tone: rgba(6, 31, 60, 0.065); }
.timeline-band:nth-child(n + 6) { --chapter-tone: rgba(4, 26, 51, 0.09); }

.timeline-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.54) 48%, transparent),
    radial-gradient(circle at 50% 16%, rgba(49, 103, 178, 0.12), transparent 38%);
  transition: opacity 900ms ease;
}

.timeline-band.is-active::before {
  opacity: 1;
}

@keyframes tamass-chapter-dissolve {
  0%, 100% { opacity: 0; }
  18%, 62% { opacity: 1; }
}

@supports (animation-timeline: view()) {
  .timeline-band::before {
    animation: tamass-chapter-dissolve linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

.timeline-event-image-wrap {
  box-shadow:
    0 26px 54px rgba(14, 40, 72, 0.16),
    0 0 0 1px rgba(255,255,255,0.55);
}

/* Poster-to-player expansion. Layout opens first; the media surface then
   resolves from the exact card centre captured at the click. */
.archive-inline-panel.from-card .archive-inline-content {
  opacity: 0.18;
  clip-path: inset(7% round 18px);
  transform:
    translate(var(--clip-origin-x, 0), var(--clip-origin-y, 0))
    scale(var(--clip-origin-scale, 0.35));
  transform-origin: center;
  transition:
    transform 560ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease,
    clip-path 560ms cubic-bezier(0.16, 1, 0.3, 1);
}

.archive-inline-panel.from-card.is-open .archive-inline-content {
  opacity: 1;
  clip-path: inset(0 round var(--radius-lg));
  transform: translate(0, 0) scale(1);
}

.archive-inline-panel.from-card:not(.is-open) .archive-inline-detail {
  opacity: 0;
}

.archive-inline-panel.from-card.is-open .archive-inline-detail {
  opacity: 1;
  transition: opacity 280ms ease 210ms;
}

/* ─── Physical depth pass ──────────────────────────────────────────────────
   Weight comes from directional light and visible material edges, not from
   extra decorative motion. The shadows are deliberately firm and offset:
   these elements read as mounted editorial objects rather than flat cards. */
.cinema-home {
  --cinema-edge-dark: #06182b;
  --cinema-edge-paper: #d3d0c6;
  --cinema-cast: rgba(6, 20, 37, 0.24);
}

.cinema-hero {
  box-shadow:
    inset 0 -34px 48px rgba(1, 8, 16, 0.58),
    inset 0 1px rgba(255, 255, 255, 0.1);
}

.cinema-hero-copy {
  padding: 24px 28px 26px;
  isolation: isolate;
}

.cinema-hero-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  border-inline-start: 4px solid var(--cinema-gold);
  background: rgba(3, 15, 29, 0.58);
  box-shadow:
    0 10px 0 rgba(2, 10, 20, 0.72),
    0 16px 22px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(3px);
}

.cinema-hero-copy h1 {
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.34),
    0 10px 20px rgba(0, 0, 0, 0.28);
}

.cinema-hero-actions button {
  box-shadow: 0 5px 0 rgba(2, 10, 20, 0.72);
}

.cinema-hero-actions button:first-child {
  box-shadow:
    0 5px 0 #806827,
    0 9px 14px rgba(0, 0, 0, 0.26);
}

.cinema-hero-actions button:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(2, 10, 20, 0.72);
}

.cinema-latest {
  background:
    linear-gradient(180deg, rgba(6, 25, 46, 0.035), transparent 24%),
    var(--cinema-paper);
}

.cinema-latest-grid {
  perspective: 1400px;
}

.cinema-latest-card {
  border-color: rgba(17, 44, 78, 0.34);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.92) inset,
    0 8px 0 var(--cinema-edge-paper),
    0 13px 20px var(--cinema-cast);
  transform: translateY(0);
}

.cinema-latest-item:first-child .cinema-latest-card {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.1) inset,
    0 8px 0 #03101e,
    0 14px 22px rgba(2, 12, 24, 0.32);
}

[data-cinema-scene].is-visible .cinema-latest-card:hover,
[data-cinema-scene].is-visible .cinema-latest-card:focus-visible {
  transform: translateY(-10px) scale(1.018);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.92) inset,
    0 16px 0 var(--cinema-edge-paper),
    0 24px 30px rgba(6, 20, 37, 0.28);
}

[data-cinema-scene].is-visible .cinema-latest-item:first-child .cinema-latest-card:hover,
[data-cinema-scene].is-visible .cinema-latest-item:first-child .cinema-latest-card:focus-visible {
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.12) inset,
    0 16px 0 #03101e,
    0 25px 34px rgba(2, 12, 24, 0.36);
}

.cinema-latest-card:active {
  transform: translateY(5px) scale(0.995) !important;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.82) inset,
    0 3px 0 var(--cinema-edge-paper),
    0 6px 10px rgba(6, 20, 37, 0.18) !important;
}

.cinema-latest-card-media {
  border-bottom: 1px solid rgba(17, 44, 78, 0.32);
  box-shadow: 0 6px 12px rgba(5, 18, 34, 0.16);
}

/* The content type belongs to the section hierarchy, above the object.
   Cards share one neutral resting state and reveal their navy identity only
   through interaction. */
.cinema-latest-item {
  gap: 18px;
}

.cinema-latest-card,
.cinema-latest-item:first-child .cinema-latest-card {
  border-color: rgba(17, 44, 78, 0.34);
  border-inline-end-width: 1px;
  background: #fff;
  color: var(--cinema-ink);
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.92) inset,
    0 8px 0 var(--cinema-edge-paper),
    0 13px 20px var(--cinema-cast);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 190ms ease,
    color 150ms ease,
    transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.cinema-latest-item-article .cinema-latest-card-media img,
.cinema-latest-item-infographic .cinema-latest-card-media img {
  object-position: center top;
}

.cinema-latest-card .cinema-latest-card-media img,
.cinema-latest-card:hover .cinema-latest-card-media img,
.cinema-latest-card:focus-visible .cinema-latest-card-media img {
  transform: none;
  transition: filter 160ms ease;
}

.cinema-latest-item:first-child .cinema-latest-card-meta {
  color: #6e8196;
}

.cinema-latest-item:first-child .cinema-latest-card-copy > strong {
  color: var(--cinema-ink);
}

.cinema-latest-item:first-child .cinema-latest-card-meta > span:first-child {
  color: #9b7530;
}

.cinema-latest-item:first-child .cinema-latest-card-action {
  color: var(--cinema-navy);
}

[data-cinema-scene].is-visible .cinema-latest-card:hover,
[data-cinema-scene].is-visible .cinema-latest-card:focus-visible,
[data-cinema-scene].is-visible .cinema-latest-item:first-child .cinema-latest-card:hover,
[data-cinema-scene].is-visible .cinema-latest-item:first-child .cinema-latest-card:focus-visible {
  z-index: 3;
  border-color: rgba(199, 167, 92, 0.72);
  background: var(--cinema-navy-deep);
  color: #fff;
  transform: translateY(-15px) scale(1.055);
  transition-delay: 0ms;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.1) inset,
    0 18px 30px rgba(2, 12, 24, 0.24);
}

.cinema-latest-card:hover .cinema-latest-card-copy > strong,
.cinema-latest-card:focus-visible .cinema-latest-card-copy > strong {
  color: #fff;
}

.cinema-latest-card:hover .cinema-latest-card-meta,
.cinema-latest-card:focus-visible .cinema-latest-card-meta {
  color: rgba(255, 255, 255, 0.62);
}

.cinema-latest-card:hover .cinema-latest-card-action,
.cinema-latest-card:focus-visible .cinema-latest-card-action,
.cinema-latest-card:hover .cinema-latest-card-meta > span:first-child,
.cinema-latest-card:focus-visible .cinema-latest-card-meta > span:first-child {
  color: var(--cinema-gold);
}

.cinema-history-stage {
  border-block: 1px solid rgba(199, 167, 92, 0.54);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -38px 56px rgba(1, 8, 16, 0.52),
    0 13px 0 #03101e,
    0 22px 30px rgba(3, 15, 29, 0.3);
}

.cinema-history-copy > strong {
  text-shadow:
    0 3px 0 rgba(0, 0, 0, 0.46),
    0 12px 20px rgba(0, 0, 0, 0.34);
}

.cinema-history-reel {
  border-top: 1px solid rgba(199, 167, 92, 0.7);
  box-shadow:
    0 -8px 16px rgba(0, 0, 0, 0.28),
    inset 0 1px rgba(255, 255, 255, 0.08);
}

.cinema-history-reel button.is-active {
  transform: translateY(-6px);
  background: #102c4c;
  box-shadow:
    0 7px 0 #06182b,
    0 11px 16px rgba(0, 0, 0, 0.3);
}

.cinema-history-reel button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #06182b;
}

.cinema-directory {
  background:
    linear-gradient(180deg, rgba(6, 25, 46, 0.08), transparent 22%),
    #e9edf1;
}

.cinema-directory-list {
  gap: 18px;
}

.cinema-directory-list :is(button, a) {
  border-color: rgba(17, 44, 78, 0.56);
  background: #fff;
  box-shadow:
    0 6px 0 rgba(17, 44, 78, 0.9),
    0 10px 14px rgba(6, 20, 37, 0.16);
}

.cinema-directory-list :is(button, a):hover,
.cinema-directory-list :is(button, a):focus-visible {
  transform: translateY(-7px);
  box-shadow:
    0 13px 0 rgba(17, 44, 78, 0.94),
    0 20px 24px rgba(6, 20, 37, 0.22);
}

.cinema-directory-list :is(button, a):active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 rgba(17, 44, 78, 0.94),
    0 5px 8px rgba(6, 20, 37, 0.16);
}

.cinema-directory-thumb {
  border-color: rgba(17, 44, 78, 0.66);
  box-shadow:
    0 3px 0 rgba(17, 44, 78, 0.86),
    0 6px 9px rgba(6, 20, 37, 0.2);
}

/* Interior content uses the same light direction, but each object keeps its
   own shape instead of becoming one repeated card component. */
.archive-grid-card:not(:first-of-type) .clip-thumb,
.indicator-album-cover,
.timeline-event-image-wrap {
  box-shadow:
    0 6px 0 rgba(17, 44, 78, 0.86),
    0 10px 14px rgba(6, 20, 37, 0.18);
}

.article-file.is-open,
.archive-inline-content,
.indicator-modal-panel {
  box-shadow:
    0 7px 0 rgba(17, 44, 78, 0.88),
    0 13px 18px rgba(6, 20, 37, 0.2);
}

.article-file {
  box-shadow: 0 2px 8px rgba(17, 44, 78, 0.07);
}

.article-file:not(.is-open):hover {
  box-shadow: 0 12px 22px rgba(17, 44, 78, 0.13);
}

.article-file.is-open,
.article-file.is-open:hover,
.article-file.is-open:focus-within {
  box-shadow: 0 10px 24px rgba(17, 44, 78, 0.14);
}

.press-card {
  box-shadow:
    0 5px 0 rgba(17, 44, 78, 0.78),
    0 9px 12px rgba(6, 20, 37, 0.15);
}

.timeline-text-card {
  box-shadow:
    0 5px 0 rgba(17, 44, 78, 0.76),
    0 9px 12px rgba(6, 20, 37, 0.16);
}

@media (max-width: 760px) {
  .cinema-hero-copy {
    padding: 18px 18px 20px;
  }

  .cinema-latest-card,
  .cinema-latest-item:first-child .cinema-latest-card {
    box-shadow:
      0 5px 0 var(--cinema-edge-paper),
      0 8px 12px rgba(6, 20, 37, 0.18);
  }

  .cinema-history-stage {
    box-shadow:
      inset 0 -24px 38px rgba(1, 8, 16, 0.48),
      0 7px 0 #03101e;
  }

  .cinema-directory-list :is(button, a) {
    box-shadow:
      0 4px 0 rgba(17, 44, 78, 0.9),
      0 7px 10px rgba(6, 20, 37, 0.14);
  }
}

/* Authoritative desktop navbar states. Earlier design passes independently
   changed the condensed background and non-overlay text, producing white text
   on a white pill after scrolling Home. Keep these states paired here. */
@media (min-width: 901px) {
  .page-home .topbar-wrap.is-overlay:not(.is-condensed) .topnav-desktop {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(6, 25, 46, 0.58);
    box-shadow: none;
    backdrop-filter: blur(8px);
  }

  .page-home .topbar-wrap.is-overlay:not(.is-condensed) .topnav :is(button, a) {
    color: rgba(255, 255, 255, 0.82);
  }

  .page-home .topbar-wrap.is-overlay:not(.is-condensed) .topnav :is(button, a):hover,
  .page-home .topbar-wrap.is-overlay:not(.is-condensed) .topnav :is(button, a).is-active {
    color: #fff;
  }

  .page-home .topbar-wrap.is-condensed .topnav-desktop,
  .topbar-wrap:not(.is-overlay) .topnav-desktop {
    border-color: rgba(199, 167, 92, 0.58);
    background: #112c4e;
    box-shadow: none;
    backdrop-filter: none;
  }

  .page-home .topbar-wrap.is-condensed .topnav :is(button, a),
  .topbar-wrap:not(.is-overlay) .topnav :is(button, a) {
    color: rgba(255, 255, 255, 0.8);
  }

  .page-home .topbar-wrap.is-condensed .topnav :is(button, a):hover,
  .page-home .topbar-wrap.is-condensed .topnav :is(button, a).is-active,
  .topbar-wrap:not(.is-overlay) .topnav :is(button, a):hover,
  .topbar-wrap:not(.is-overlay) .topnav :is(button, a).is-active {
    color: #fff;
  }

  .page-home .topbar-wrap.is-condensed {
    background: transparent;
    border-color: transparent;
    backdrop-filter: none;
  }

  .page-home .topbar-wrap.is-condensed .masthead-logo {
    mix-blend-mode: normal;
    filter: brightness(0) invert(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-stage,
  .page-stage::before,
  .cinema-hero-video > .herovid-iframe,
  .archive-grid-card:first-of-type .clip-thumb img,
  .clip-thumb-grain::after,
  .timeline-axis,
  .timeline-band.is-active .timeline-section-heading::after,
  .article-reading-progress,
  .carousel-main img,
  .carousel-indicator,
  .indicator-modal-panel,
  .press-grid .press-card,
  .about-hero-card > p,
  .about-extra-card > p,
  .about-questions > li,
  .about-video {
    animation: none !important;
    transition: none !important;
  }

  .cinema-home::after {
    animation: none !important;
  }

  .topnav-active-track,
  .cinema-hero-video::before,
  .clip-thumb-preview,
  .timeline-event-side,
  .timeline-event-image,
  .timeline-year-ghost,
  .press-card-title,
  .about-video .herovid-iframe,
  .about-hero-card h1::after,
  .about-extra-card h2::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .page-stage::before {
    display: none;
  }

  [data-cinema-scene],
  [data-cinema-scene] .cinema-latest-card,
  [data-cinema-scene] .cinema-latest-kind,
  [data-cinema-scene] .cinema-directory-list :is(button, a),
  .cinema-hero-copy .cinema-scene-number,
  .cinema-hero-copy h1,
  .cinema-hero-copy > p,
  .cinema-hero-actions,
  .cinema-hero-edge::before,
  .cinema-latest-card-media img,
  .cinema-history-stage > img,
  .cinema-history-ghost,
  .cinema-history-copy {
    animation: none !important;
    opacity: 1;
    transform: none;
    transition: none !important;
  }

  .timeline-event-image-wrap,
  .timeline-event-image,
  .timeline-text-card,
  .archive-grid-card,
  .archive-grid-card .clip-thumb img,
  .article-file,
  .article-file-media,
  .article-file-media img,
  .article-file-text,
  .article-infographic,
  .indicator-section,
  .indicator-album,
  .indicator-album-cover,
  .indicator-album-cover img,
  .press-card,
  .about-card,
  .about-extra-card,
  .about-hero-card,
  .home-section-card,
  .search-result,
  .timeline-nav-chip,
  .press-filter,
  .button-primary,
  .button-secondary {
    animation: none !important;
    opacity: 1;
    clip-path: none;
    transform: none !important;
    transition: none !important;
  }

  .archive-inline-panel.from-card .archive-inline-content,
  .archive-inline-panel.from-card.is-open .archive-inline-content {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
}

/* ─── WhatsApp review corrections (authoritative final overrides) ────────── */
.cinema-latest-item {
  gap: 0;
  align-items: stretch;
}

.cinema-latest-kind {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 12px 18px 11px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: 0;
  border-bottom: 1px solid rgba(199, 167, 92, 0.68);
  border-radius: 0;
  background: var(--cinema-navy);
  color: #fff;
  font-size: clamp(1.44rem, 2.06vw, 1.94rem);
  line-height: 1.1;
  text-align: start;
  box-sizing: border-box;
  box-shadow: none;
}

[data-cinema-scene] .cinema-latest-kind,
[data-cinema-scene].is-visible .cinema-latest-kind {
  opacity: 1;
  transform: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cinema-latest-item:hover .cinema-latest-kind,
.cinema-latest-item:focus-within .cinema-latest-kind {
  border-bottom-color: var(--cinema-gold);
  background: #0b223d;
  color: var(--cinema-gold);
}

.cinema-latest-card,
.cinema-latest-item:first-child .cinema-latest-card {
  border-radius: 10px;
}

.cinema-latest-item-article .cinema-latest-card-media img,
.cinema-latest-item-infographic .cinema-latest-card-media img,
.article-file-preview img,
.article-infographic img {
  object-position: center top;
}

.article-file-preview {
  background: #f4f6f8;
}

.article-infographic img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.indicator-albums {
  align-items: stretch;
}

.indicator-album:first-child {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.indicator-album:first-child .indicator-album-cover,
.indicator-album-cover {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 9px 9px 0 0;
  background: #f7f8fa;
  box-shadow: none;
}

.indicator-album-cover img,
.indicator-album:first-child .indicator-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
}

.indicator-album:first-child .indicator-album-title {
  min-height: 0;
  padding: 24px 28px 28px;
  align-items: flex-start;
  font-size: clamp(1.4rem, 2.25vw, 2rem);
}

.indicator-album:not(:first-child) .indicator-album-cover {
  border-radius: 9px;
}

.about-extra-card {
  padding: clamp(30px, 4vw, 50px);
}

.about-extra-card h2 {
  width: 100%;
  max-width: none;
  margin: 0 0 28px;
  text-wrap: balance;
}

.about-extra-copy {
  min-width: 0;
}

.about-extra-copy p {
  max-width: 62ch;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.9;
  overflow-wrap: anywhere;
}

.about-extra-copy p:last-child {
  margin-bottom: 0;
}

.site-footer-inner {
  align-items: center;
}

.site-footer-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}

.site-footer-identity img {
  width: clamp(150px, 13vw, 188px);
}

.site-footer-identity span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1;
}

.site-footer-year {
  color: rgba(255, 255, 255, 0.62);
  font-family: Arial, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  direction: ltr;
}

@media (min-width: 901px) {
  .about-extra-card {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
    column-gap: clamp(40px, 6vw, 86px);
    align-items: start;
  }

  .about-extra-card h2 {
    grid-column: 1 / -1;
  }

  .about-questions {
    margin: 0;
  }

  .about-extra-copy {
    padding-top: 2px;
  }
}

@media (max-width: 900px) {
  .indicator-album:first-child {
    grid-column: 1 / -1;
  }

  .about-extra-card {
    display: block;
    padding: 28px 22px 32px;
  }

  .about-extra-copy {
    margin-top: 24px;
  }

  .site-footer-identity img {
    width: 160px;
  }
}

@media (max-width: 600px) {
  .cinema-latest-kind {
    margin: 0;
    padding: 10px 15px 9px;
    font-size: 1.44rem;
  }

  .indicator-album:first-child .indicator-album-cover,
  .indicator-album-cover {
    aspect-ratio: 4 / 3;
  }

  .site-footer-socials {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
  }

  .site-footer-socials a {
    width: auto;
    min-width: 0;
    min-height: 70px;
    padding: 9px 3px 7px;
  }

  .site-footer-social-name {
    font-size: 0.54rem;
  }
}

/* ── Infographic albums ───────────────────────────────────────────────────── */
/* The newest report is a featured card: a navy panel carrying the title beside
   the slide. The page is RTL, so the cover (first in the DOM) sits on the right
   and the navy title panel lands on the left. */
.indicator-album:first-child {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  background: var(--ink);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(31, 58, 102, 0.16);
}
.indicator-album:first-child .indicator-album-cover {
  aspect-ratio: auto;
  height: 100%;
  min-height: 260px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.indicator-album:first-child .indicator-album-meta {
  display: flex;
  align-items: flex-start;     /* sit at the top of the panel */
  justify-content: flex-start; /* RTL start = the right edge */
  width: 100%;
  padding: clamp(22px, 2.8vw, 40px);
  background: var(--ink);
  border-bottom: 0;
}
.indicator-album:first-child .indicator-album-title {
  display: block;
  color: #fff;
  /* Large enough to occupy most of the navy panel rather than floating in it. */
  font-size: clamp(1.7rem, 3.1vw, 3rem);
  line-height: 1.3;
  text-align: start;
  text-wrap: balance;
}

/* Every other album keeps the same navy identity: slide above, navy title
   band beneath it. */
.indicator-album:not(:first-child) {
  background: var(--ink);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(31, 58, 102, 0.14);
}
/* A 4:5 frame sits closest to the slides themselves (they run 0.75–1.06), so
   the full width is covered while almost nothing is trimmed. The earlier 16:10
   frame was far wider than any slide and cut them to a sliver. */
.indicator-album:not(:first-child) .indicator-album-cover {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.indicator-album:not(:first-child) .indicator-album-meta {
  display: flex;
  align-items: center;
  min-height: 5.6em;          /* room for two comfortable lines */
  width: 100%;
  padding: 16px 16px 18px;
  border-bottom: 0;
  background: var(--ink);
}
.indicator-album:not(:first-child) .indicator-album-title {
  display: block;
  width: 100%;
  color: #fff;
  font-size: clamp(1.12rem, 1.5vw, 1.4rem);
  line-height: 1.4;
}

/* Cards move as one modest piece rather than the image outgrowing its frame. */
.indicator-album:hover,
.indicator-album:focus-visible { transform: translateY(-5px) scale(1.012); }
.indicator-album:hover .indicator-album-cover,
.indicator-album:focus-visible .indicator-album-cover { transform: none; box-shadow: none; }
.indicator-album { transition: transform 220ms ease, box-shadow 220ms ease; }

/* ── Text safety net, site-wide ───────────────────────────────────────────── */
/* Arabic headlines are long and unbreakable by default, so any box with a
   fixed height or a flex display could clip them, overlap the text beneath, or
   push them past the viewport. These rules make wrapping the consistent
   behaviour everywhere instead of something each component has to remember. */
h1, h2, h3, h4, h5, h6,
p, li, blockquote, figcaption, dt, dd,
label, summary, th, td {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
  hyphens: auto;
}

/* Headings must never be flex/grid containers with a capped height — that is
   what made a two-line title paint on top of the paragraph below it. */
.archive-card-copy h3,
.cinema-latest-card-copy h3,
.home-latest-title,
.indicator-album-title,
.press-card h3,
.article-file-title,
.home-story-title,
.timeline-text-card h3 {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
}

/* A flex or grid child will not shrink below its content unless told to, which
   is how long titles ended up overflowing their columns. */
.archive-card-copy,
.cinema-latest-card-copy,
.home-latest-body,
.indicator-album-meta,
.press-card,
.article-file,
.article-file-tab,
.article-file-title,
.article-file-content,
.home-story-copy,
.campaign-card-head > div {
  min-width: 0;
}
.article-file-title { flex: 1 1 auto; }

/* Nothing on the page may force a horizontal scrollbar. */
body { overflow-x: hidden; }

/* Crop, final word: fill the card's full width and anchor to the top of the
   slide so the infographic's own title survives and only lower artwork is
   trimmed. (Overrides the earlier `contain`, which letterboxed the slides and
   shrank the title until it was unreadable.) */
.indicator-album-cover img,
.indicator-album:first-child .indicator-album-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: #f4f1ea;
}

/* ── Clip cards: artwork always pinned to the top of the card ──────────────── */
/* Cards stretch to the tallest in their row. A card with a one-line title has
   slack left over, and that slack was landing above the thumbnail, so clips
   with short titles sat ~16px lower than their neighbours. Laying the card out
   as a top-anchored column puts every thumbnail on the same line and pushes any
   spare space to the bottom, where it belongs. */
.archive-grid-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.archive-grid-card .clip-thumb {
  flex: 0 0 auto;
  margin-top: 0;
  align-self: stretch;
}
.archive-grid-card .archive-card-copy {
  flex: 0 0 auto;
}

/* ── Lead press card: let the headline use the frame ───────────────────────── */
/* The lead story's title was capped at 24ch (~334px inside an 819px card) and
   the summary was similarly boxed, so both sat in a narrow column against one
   edge with more than half the navy panel empty. */
.press-card:first-child .press-card-title,
.press-card:first-child h3 {
  max-width: none;
  width: 100%;
  text-wrap: balance;
}
.press-card:first-child .press-card-summary,
.press-card:first-child .press-card-summary p,
.press-card:first-child > p {
  max-width: none;
  width: 100%;
}

/* ─── WordPress media/responsive bridge (authoritative) ────────────────────
   React's HeroVideo component supplied the `.herovid` and `.herovid-iframe`
   layout contract at runtime. The WordPress templates now use that exact
   contract too, so the 16:9 homepage film covers the viewport and the 4:5
   About film keeps its portrait shape at every breakpoint. */
.tamass-video-player {
  position: relative;
  isolation: isolate;
}

.tamass-video-player > .herovid-iframe,
.tamass-video-player > .herovid-native {
  max-width: none;
}

.cinema-hero-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-reading-progress {
  transform: scaleX(0);
}

@media (max-width: 900px) {
  .cinema-hero-video.herovid {
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    min-width: 0;
    max-width: none;
    aspect-ratio: auto !important;
  }

  /* A 16:9 film must be wider than a portrait phone viewport to cover it.
     Keep the iframe centred and disable the later transform-only camera
     animation, which otherwise discards translateX() and pushes half the
     film off-screen. */
  .cinema-hero-video > .herovid-iframe {
    inset: 0 auto 0 50%;
    width: max(100vw, 177.78svh);
    height: 100svh;
    max-width: none;
    animation: none !important;
    transform: translateX(-50%) scale(1.01);
    transform-origin: center center;
  }

  .cinema-hero-copy {
    max-width: calc(100% - 48px);
    box-sizing: border-box;
  }

  .cinema-latest-grid,
  .cinema-section-heading,
  .cinema-directory-list,
  .cinema-history-copy {
    max-width: calc(100vw - 36px);
  }

  .cinema-latest-card,
  .cinema-directory-list :is(button, a),
  .article-file,
  .indicator-album,
  .press-card {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .about-video.herovid {
    width: min(100%, 360px);
    min-height: 0;
    margin-inline: auto;
  }

  .cinema-hero-copy {
    inset-inline: 16px;
    bottom: max(38px, calc(env(safe-area-inset-bottom) + 24px));
    max-width: calc(100% - 32px);
    padding: 16px 16px 18px;
  }

  .rtl-page .cinema-hero-copy {
    inset-inline: 16px;
  }

  .cinema-hero-copy h1 {
    font-size: clamp(2.65rem, 14vw, 4.2rem);
  }

  .cinema-hero-copy > p {
    font-size: clamp(0.88rem, 3.8vw, 1rem);
    line-height: 1.5;
  }

  .cinema-hero-actions {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
  }

  .cinema-hero-actions button {
    min-height: 42px;
    padding: 9px 14px;
  }

  .cinema-latest,
  .cinema-history,
  .cinema-directory {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .cinema-latest-card-copy {
    min-height: 0;
  }

  .cinema-history-stage {
    min-height: 720px;
  }

  .cinema-history-copy {
    min-height: 570px;
    padding-top: 64px;
    padding-bottom: 158px;
  }

  .cinema-history-copy > strong {
    font-size: clamp(2.7rem, 14vw, 4.4rem);
  }

  .cinema-history-reel {
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .menu-drawer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (max-width: 420px) {
  .cinema-section-heading,
  .cinema-latest-grid,
  .cinema-directory-list,
  .cinema-history-copy {
    width: calc(100% - 28px);
    max-width: calc(100vw - 28px);
  }

  .cinema-directory-list :is(button, a) {
    grid-template-columns: 54px minmax(0, 1fr) 20px;
    gap: 10px;
  }

  .cinema-directory-thumb {
    width: 54px;
    height: 44px;
  }

  .cinema-latest-kind {
    font-size: 1.24rem;
  }

  .site-footer-socials a {
    min-height: 62px;
  }
}

/* ─── Bilingual controls + final mobile contract ───────────────────────────
   These rules intentionally live last. Several visual passes above restyle the
   same components; keeping the phone contract here prevents a later desktop
   card rule from recreating the very tall/overflowing mobile layouts. */
.lang-switch :is(a, button),
.menu-drawer-language :is(a, button) {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

.lang-switch :is(a, button) {
  padding: 2px 0;
  color: var(--ink-soft);
}

.lang-switch :is(a, button).is-active,
.lang-switch :is(a, button):hover,
.lang-switch :is(a, button):focus-visible {
  color: var(--accent);
}

.topbar-wrap.is-overlay:not(.is-condensed) .lang-switch :is(a, button) {
  color: rgba(255, 255, 255, 0.82);
}

.topbar-wrap.is-overlay:not(.is-condensed) .lang-switch :is(a, button).is-active,
.topbar-wrap.is-overlay:not(.is-condensed) .lang-switch :is(a, button):hover,
.topbar-wrap.is-overlay:not(.is-condensed) .lang-switch :is(a, button):focus-visible {
  color: #fff;
}

.menu-drawer-language :is(a, button) {
  padding: 4px 0;
  color: rgba(220, 232, 250, 0.68);
  font-size: 14px;
}

.menu-drawer-language :is(a, button).is-active,
.menu-drawer-language :is(a, button):hover,
.menu-drawer-language :is(a, button):focus-visible {
  color: #fff;
  font-weight: 700;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

.page-stage,
.page-shell,
.cinema-home,
.article-stack,
.indicator-albums,
.press-grid,
.archive-flow-grid,
.timeline-continuous-stack,
.site-footer-inner {
  min-width: 0;
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

@media (max-width: 760px) {
  :root { --content-width: calc(100vw - 24px); }

  .page-shell,
  .cinema-section-heading,
  .cinema-latest-grid,
  .cinema-directory-list,
  .cinema-history-copy {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-inline: auto;
    box-sizing: border-box;
  }

  .section-heading h1,
  .section-heading h2 {
    font-size: clamp(1.85rem, 9vw, 2.7rem);
    line-height: 1.18;
  }

  .archive-flow-grid,
  .indicator-albums,
  .press-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100%;
    max-width: 100%;
  }

  /* Indicator albums: every phone card is one finite image plus one finite
     title band. The late featured-card grid/min-height rules are desktop only. */
  .indicator-album,
  .indicator-album:first-child,
  .indicator-album:not(:first-child) {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ink);
    transform: none;
  }

  .indicator-album:hover,
  .indicator-album:focus-visible {
    transform: translateY(-2px);
  }

  .indicator-album .indicator-album-cover,
  .indicator-album:first-child .indicator-album-cover,
  .indicator-album:not(:first-child) .indicator-album-cover {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  .indicator-album .indicator-album-cover img,
  .indicator-album:first-child .indicator-album-cover img,
  .indicator-album:not(:first-child) .indicator-album-cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  .indicator-album .indicator-album-meta,
  .indicator-album:first-child .indicator-album-meta,
  .indicator-album:not(:first-child) .indicator-album-meta {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 16px 18px;
    box-sizing: border-box;
    background: var(--ink);
  }

  .indicator-album .indicator-album-title,
  .indicator-album:first-child .indicator-album-title,
  .indicator-album:not(:first-child) .indicator-album-title {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 0 !important;
    color: #fff;
    font-size: clamp(1.08rem, 5.4vw, 1.38rem);
    line-height: 1.45;
    text-align: start;
    overflow-wrap: anywhere;
  }

  .indicator-modal {
    padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  .indicator-modal-panel {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 20px);
    overflow: auto;
    box-sizing: border-box;
  }

  .carousel-stage,
  .carousel-main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Articles: stop the folder grid and its expanded body from establishing a
     desktop-width implicit column behind the mobile drawer. */
  .article-stack,
  .article-file,
  .article-file-body,
  .article-file-overflow,
  .article-file-content,
  .article-file-media,
  .article-file-text,
  .article-infographic {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .article-file {
    margin-inline: 0;
    overflow: hidden;
  }

  .article-file-tab {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "meta chevron"
      "title chevron";
    column-gap: 12px;
    row-gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 16px;
    box-sizing: border-box;
  }

  .article-file-preview { display: none; }

  .article-file-meta {
    line-height: 1.45;
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
  }

  .article-file-title {
    min-width: 0;
    font-size: clamp(1.08rem, 5vw, 1.4rem);
    line-height: 1.35;
  }

  .article-file-content {
    display: block;
    padding: 16px;
  }

  .article-file-media {
    position: static;
    margin: 0 0 18px;
    aspect-ratio: 16 / 10;
    overflow: hidden;
  }

  .article-file-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-file-text {
    padding: 0;
    overflow-wrap: anywhere;
  }

  .article-file-text > p {
    width: 100%;
    max-width: 100%;
    font-size: 0.98rem;
    line-height: 1.82;
  }

  .article-infographic {
    display: block;
    padding: 0;
    overflow: hidden;
  }

  .article-infographic img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Remaining page families share the same one-column width contract. */
  .archive-grid-card,
  .archive-inline-panel,
  .archive-inline-overflow,
  .archive-inline-content,
  .archive-inline-detail,
  .archive-inline-media,
  .archive-inline-copy,
  .timeline-band-inner,
  .timeline-event-row,
  .timeline-event-band,
  .timeline-event-grid,
  .timeline-event-side,
  .timeline-event-image-wrap,
  .timeline-text-card,
  .press-card,
  .about-video-wrap,
  .about-hero-card,
  .about-extra-card,
  .about-quote {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .archive-inline-detail,
  .timeline-event-grid,
  .about-page-shell {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .archive-inline-content { padding: 16px; }

  .archive-inline-player,
  .archive-inline-player iframe,
  .timeline-event-image-wrap,
  .timeline-event-image {
    width: 100%;
    max-width: 100%;
  }

  .press-card,
  .press-card:first-child,
  .press-card:not(:first-child) {
    grid-column: 1 !important;
    width: 100%;
    min-height: 0;
    padding: 20px;
  }

  .press-filters {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .about-video.herovid {
    width: min(100%, 360px);
    max-width: 100%;
    margin-inline: auto;
  }

  .site-footer-inner {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    margin-inline: auto;
  }
}

@media (max-width: 600px) {
  /* A full-width drawer avoids leaving a misleading, unusably narrow strip of
     the article underneath, as seen in the supplied Android screenshots. */
  .menu-drawer {
    width: 100vw;
    max-width: none;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: none;
  }

  .menu-drawer-head {
    padding-top: max(16px, env(safe-area-inset-top));
  }

  .menu-drawer-language {
    justify-content: center;
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .page-shell,
  .cinema-section-heading,
  .cinema-latest-grid,
  .cinema-directory-list,
  .cinema-history-copy,
  .site-footer-inner {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }

  .article-file-tab,
  .article-file-content,
  .press-card,
  .press-card:first-child,
  .press-card:not(:first-child) {
    padding: 14px;
  }
}

/* ── Archive headings + lead Clip card, final reference contract ───────────
   Archive templates expose one real H1 only. Keeping the legacy eyebrow class
   preserves the original display type while this class removes browser H1
   defaults and gives every archive family the same predictable baseline. */
.archive-page-title {
  margin: 0;
}

/* The lead Clip is one editorial object: its copy owns a full navy plane,
   rather than leaving the title on a loose white strip beside/below the art. */
.archive-grid-card:first-of-type .archive-card-copy {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  background: var(--ink);
  color: #fff;
}

.archive-grid-card:first-of-type .archive-card-meta {
  color: rgba(255, 255, 255, 0.58);
}

.archive-grid-card:first-of-type .archive-card-copy h3 {
  color: #fff;
}

@media (max-width: 760px) {
  .archive-grid-card:first-of-type {
    padding: 0;
    overflow: hidden;
    border-bottom: 0;
    border-radius: 10px;
  }

  .archive-grid-card:first-of-type .clip-thumb {
    width: 100%;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .archive-grid-card:first-of-type .archive-card-copy {
    min-height: 112px;
    padding: 17px 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
  }

  .archive-grid-card:first-of-type .archive-card-meta {
    min-height: 0;
    padding: 0;
  }

  .archive-grid-card:first-of-type .archive-card-copy h3 {
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: clamp(1.3rem, 6vw, 1.75rem);
    line-height: 1.35;
  }
}

/* ── Footer mobile containment ──────────────────────────────────────────────
   The footer already supplies horizontal padding. An older phone rule gave
   its inner grid another viewport-based width, making the grid wider than the
   remaining content box and clipping the physical left edge on RTL pages. */
.site-footer {
  max-width: 100%;
  overflow: hidden;
}

.site-footer-inner {
  width: min(1240px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .site-footer {
    padding-inline: 12px;
  }

  .site-footer-inner {
    width: 100%;
    max-width: 100%;
  }

  .site-footer-identity,
  .site-footer-year {
    width: 100%;
    text-align: center;
  }

  .site-footer-socials {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .site-footer-inner {
    width: 100%;
    max-width: 100%;
  }
}

/* ── Mobile header: reveal on upward scroll only ───────────────────────────
   Keep the navigation reachable without pinning the logo and hamburger over
   the video while the visitor is moving down the page. */
@media (max-width: 760px) {
  .topbar-wrap,
  .page-home .topbar-wrap {
    will-change: transform;
    transition:
      transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
      background 220ms ease,
      border-color 220ms ease,
      box-shadow 220ms ease;
  }

  .topbar-wrap.is-scroll-hidden,
  .page-home .topbar-wrap.is-scroll-hidden {
    transform: translate3d(0, calc(-100% - 8px), 0) !important;
    pointer-events: none;
  }

  .topbar-wrap.is-scroll-visible,
  .page-home .topbar-wrap.is-scroll-visible {
    transform: translate3d(0, 0, 0) !important;
  }
}

/* ── Article folders: always show the complete headline ────────────────────
   Article titles are content, not labels. Let every closed and open folder
   grow to the number of lines its headline needs, including long Arabic text. */
.article-file-tab {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  box-sizing: border-box;
  align-items: start;
}

.article-file .article-file-title,
.article-file:not(.is-open) .article-file-title,
.article-file.is-open .article-file-title {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  max-height: none;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
	margin: 0;
}

/* Article titles are permanent links; the separate round control keeps the
   original inline + / minus accordion behaviour. */
.article-file-link .article-file-tab {
	 cursor: default;
}

.article-file-title-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.article-file-title-link:hover,
.article-file-title-link:focus-visible {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(199, 167, 92, 0.7);
  text-underline-offset: 0.18em;
}

button.article-file-chevron {
  appearance: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.single-article-file > .article-file-tab {
  cursor: default;
}

.rtl-page .article-file-title {
  direction: rtl;
  text-align: right;
  unicode-bidi: plaintext;
}

@media (max-width: 760px) {
  .article-file-tab {
    grid-template-columns: minmax(0, 1fr) 30px;
  }

  .article-file-title {
    font-size: clamp(1.02rem, 4.8vw, 1.35rem);
  }

  .article-file-chevron {
    align-self: center;
  }
}