/* ==========================================================================
   AXIS COLLECTIVE — design system
   Palette drawn from the studio mark: quarry stone, oxidised brass, verdigris.
   Display face is Cinzel (Roman inscriptional capitals) to echo the carved
   lettering of the architecture the series reconstructs.
   ========================================================================== */

:root {
  --stone-900: #08090b;
  --stone-800: #0d0f12;
  --stone-700: #14171c;
  --stone-600: #1b1f26;
  --stone-500: #262b34;

  --limestone: #e9e4d8;
  --limestone-dim: #9a9488;
  --limestone-faint: #8b8478; /* was #6b665d — 3.49:1 failed AA; now 5.4:1 */

  --brass: #b28a4a;
  --brass-bright: #d9b877;
  --brass-deep: #a27b3e; /* was #7d5f30 — 3.37:1 failed AA on the episode numerals; now 5.2:1 */
  --verdigris: #7b9485; /* was #5f7267 — 3.88:1 failed AA on the status label; now 6.1:1 */
  --alarm: #a3543f;

  --line: rgba(233, 228, 216, 0.11);
  --line-strong: rgba(233, 228, 216, 0.22);

  --font-display: 'Cinzel', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-arabic: 'Noto Sans Arabic', var(--font-body);
  --font-arabic-display: 'Noto Naskh Arabic', var(--font-display);

  --wrap: 1200px;
  --gutter: 32px;
  --nav-h: 74px;

  --ease: cubic-bezier(0.22, 0.72, 0.24, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--stone-900);
  color: var(--limestone);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* Locked while the mobile nav panel or the lightbox is open, so the page
   behind it can't scroll. */
body.nav-locked { overflow: hidden; }

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
}

::selection { background: var(--brass); color: var(--stone-900); }

:focus-visible {
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
}

/* ---------- utilities ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
}

.carved {
  text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.6), 1px 1px 0 rgba(255, 255, 255, 0.05);
}

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 200;
  background: var(--brass); color: var(--stone-900);
  padding: 12px 20px; font-size: 0.8rem; letter-spacing: 0.1em;
}
.skip-link:focus { inset-inline-start: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 28px;
  font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--brass);
  color: var(--limestone);
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover, .btn:focus-visible { background: var(--brass); color: var(--stone-900); }

.btn-ghost { border-color: var(--line-strong); color: var(--limestone-dim); }
.btn-ghost:hover, .btn-ghost:focus-visible {
  background: transparent; border-color: var(--limestone-dim); color: var(--limestone);
}

.btn-solid { background: var(--brass); color: var(--stone-900); }
.btn-solid:hover { background: var(--brass-bright); color: var(--stone-900); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------- navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--gutter);
  background: linear-gradient(to bottom, rgba(8, 9, 11, 0.92), rgba(8, 9, 11, 0));
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(8, 9, 11, 0.96);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}

.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { width: 42px; height: auto; }
.nav-brand .name {
  font-family: var(--font-display); font-size: 0.9rem;
  letter-spacing: 0.2em; font-weight: 600;
}

.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--limestone-dim); position: relative; padding: 4px 0;
  transition: color 0.25s var(--ease);
}
.nav-links a::after {
  content: ''; position: absolute; inset-inline-start: 0; bottom: 0; height: 1px; width: 0;
  background: var(--brass); transition: width 0.3s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--brass-bright); }
.nav-links a:hover::after, .nav-links a[aria-current='page']::after { width: 100%; }

.nav-toggle { display: none; width: 40px; height: 40px; position: relative; }
.nav-toggle span {
  position: absolute; left: 8px; right: 8px; height: 1px; background: var(--limestone);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }
.nav-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- language switcher ---------- */
.lang-switch { position: relative; }
.lang-toggle {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.7rem; letter-spacing: 0.14em; font-weight: 600;
  color: var(--limestone-dim); border: 1px solid var(--line-strong);
  padding: 7px 12px; transition: all 0.25s var(--ease);
}
.lang-toggle:hover, .lang-toggle[aria-expanded='true'] { color: var(--limestone); border-color: var(--limestone-dim); }
.lang-toggle::after {
  content: ''; width: 5px; height: 5px; border-inline-end: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px); margin-inline-start: 2px;
}
.lang-menu {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  width: 340px; max-width: 80vw;
  background: rgba(10, 11, 13, 0.98); backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong); padding: 8px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
/* The browser's own [hidden]{display:none} rule lives in the lowest-priority
   "user agent" cascade layer, so it silently loses to the ordinary author-level
   `display: grid` above no matter what the JS sets the hidden property to —
   the menu was never actually able to disappear. This selector (a class plus
   an attribute) outranks the class alone, so it wins for real. */
.lang-menu[hidden] { display: none; }
.lang-menu a {
  display: flex; align-items: baseline; gap: 8px; padding: 10px 12px;
  font-size: 0.78rem; color: var(--limestone-dim); transition: all 0.2s var(--ease);
}
.lang-menu a:hover, .lang-menu a:focus-visible { background: rgba(233,228,216,0.06); color: var(--limestone); }
.lang-menu a[aria-current='true'] { color: var(--brass-bright); }
.lang-code { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.05em; min-width: 24px; }
.lang-native { font-size: 0.8rem; }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-end;
  background-color: var(--stone-900);
  background-size: cover; background-position: center 40%;
  overflow: hidden;
}

/* Background video layer.
   Sits under the gradient scrim so foreground text keeps its contrast.
   The poster image shows first and remains visible if the video is blocked,
   still loading, or suppressed by a reduced-motion preference. */
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center 45%;
}
.hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.hero-media video.ready { opacity: 1; }

.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(8,9,11,0.62) 0%, rgba(8,9,11,0.42) 35%, rgba(8,9,11,0.97) 100%);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: 90px; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { font-size: clamp(2.8rem, 8.5vw, 6.5rem); line-height: 0.95; }
.hero .lede {
  max-width: 620px; margin-top: 26px;
  font-size: clamp(0.98rem, 1.6vw, 1.12rem); color: var(--limestone-dim);
}
.hero .cta-row { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero-sub {
  min-height: 62vh; align-items: center; text-align: start;
}
.hero-sub .hero-inner { padding-bottom: 0; padding-top: var(--nav-h); }

.scroll-cue {
  position: absolute; z-index: 2; bottom: 30px; inset-inline-end: var(--gutter);
  display: flex; align-items: center; gap: 12px;
  font-size: 0.62rem; letter-spacing: 0.24em; color: var(--limestone-faint);
}
.scroll-cue::after {
  content: ''; width: 1px; height: 40px; background: var(--brass);
  transform-origin: top; animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay='1'] { transition-delay: 0.1s; }
.reveal[data-delay='2'] { transition-delay: 0.2s; }
.reveal[data-delay='3'] { transition-delay: 0.3s; }

/* ---------- sections ---------- */
.section { padding: clamp(90px, 12vw, 150px) 0; border-bottom: 1px solid var(--line); }
.section-alt { background: var(--stone-800); }
.section-slate { background: var(--stone-700); }

.section-head { max-width: 660px; margin-bottom: 64px; }
.section-head .eyebrow { margin-bottom: 18px; }
.section-head h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: 20px; }
.section-head p { color: var(--limestone-dim); }

/* ---------- thesis statement ---------- */
.thesis { text-align: center; }
.thesis .eyebrow { margin-bottom: 32px; }
.thesis p {
  max-width: 920px; margin: 0 auto;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2.5vw, 1.95rem);
  line-height: 1.6; letter-spacing: 0.01em; text-transform: none;
}
.thesis strong { color: var(--brass-bright); font-weight: 600; }

/* ---------- video ---------- */
.video-frame {
  position: relative; border: 1px solid var(--line-strong); background: #000;
  aspect-ratio: 16 / 9; overflow: hidden;
}
.video-frame video { width: 100%; height: 100%; object-fit: cover; }
.video-caption {
  margin-top: 16px; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--limestone-faint);
}

/* ---------- pillar cards ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1px; background: var(--line); }
.pillar { background: var(--stone-900); padding: 42px 34px; }
.section-alt .pillar { background: var(--stone-800); }
.pillar .num {
  font-family: var(--font-display); font-size: 0.8rem; color: var(--brass);
  letter-spacing: 0.2em; display: block; margin-bottom: 20px;
}
.pillar h3 { font-size: 1.05rem; margin-bottom: 14px; letter-spacing: 0.05em; }
.pillar p { color: var(--limestone-dim); font-size: 0.93rem; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ---------- stats ---------- */
.stats { display: flex; gap: 60px; flex-wrap: wrap; }
.stat b { display: block; font-family: var(--font-display); font-size: 2.3rem; color: var(--brass-bright); line-height: 1; }
.stat span {
  display: block; margin-top: 8px;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--limestone-faint);
}

/* ---------- gallery ---------- */
.gallery-filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 44px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.filter-btn {
  padding: 9px 18px; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--limestone-dim);
  transition: all 0.25s var(--ease);
}
.filter-btn:hover { border-color: var(--limestone-dim); color: var(--limestone); }
.filter-btn.active { background: var(--brass); border-color: var(--brass); color: var(--stone-900); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2px; background: var(--line);
}
.tile {
  position: relative; overflow: hidden; background: var(--stone-800);
  aspect-ratio: 16 / 10; cursor: pointer; display: block; width: 100%;
  border: none; padding: 0;
}
.tile.portrait { aspect-ratio: 3 / 4; }
.tile.pano { grid-column: span 2; aspect-ratio: 21 / 9; }
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.82) contrast(1.04) brightness(0.92);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.06); filter: saturate(1) contrast(1.05) brightness(1); }
.tile-meta {
  position: absolute; inset: auto 0 0 0; padding: 44px 22px 20px; text-align: start;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0));
  transform: translateY(8px); opacity: 0.85;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.tile:hover .tile-meta, .tile:focus-visible .tile-meta { transform: none; opacity: 1; }
.tile-meta b {
  display: block; font-family: var(--font-display); font-size: 0.86rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px;
}
.tile-meta span { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--brass); text-transform: uppercase; }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 5, 6, 0.97);
  display: none; align-items: center; justify-content: center;
  padding: 60px 24px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; }
.lightbox-caption {
  position: absolute; left: 0; right: 0; bottom: 26px; text-align: center;
  font-size: 0.78rem; letter-spacing: 0.1em; color: var(--limestone-dim);
}
.lightbox-caption b {
  display: block; font-family: var(--font-display); color: var(--limestone);
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px;
}
.lightbox-close, .lightbox-nav {
  position: absolute; color: var(--limestone-dim); font-size: 1.6rem; line-height: 1;
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--line); transition: all 0.25s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { color: var(--limestone); border-color: var(--limestone-dim); }
.lightbox-close { top: 24px; inset-inline-end: 24px; }
.lightbox-nav.prev { inset-inline-start: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { inset-inline-end: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav[hidden] { display: none; }

/* ---------- split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.split.narrow { gap: 60px; }

/* ---------- join box ---------- */
.panel { border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2); padding: 40px; }
.panel .eyebrow { margin-bottom: 14px; }
.panel h3 { font-size: 1.2rem; margin-bottom: 18px; letter-spacing: 0.05em; }
.panel p { color: var(--limestone-dim); font-size: 0.92rem; margin-bottom: 22px; }

.role-list { list-style: none; margin-bottom: 26px; }
.role-list li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.role-list li:last-child { border-bottom: none; }
.role-list b {
  display: block; font-family: var(--font-display); font-size: 0.86rem;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 3px;
}
.role-list span { font-size: 0.84rem; color: var(--limestone-faint); }

/* ---------- forms ---------- */
.field { margin-bottom: 22px; }
.field label {
  display: block; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--limestone-dim); margin-bottom: 9px;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 16px;
  background: rgba(0, 0, 0, 0.32); border: 1px solid var(--line);
  color: var(--limestone); font-size: 0.94rem; font-weight: 300;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brass); background: rgba(0, 0, 0, 0.5);
}
.field textarea { resize: vertical; min-height: 140px; }
.field select option { background: var(--stone-700); }

.honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-note {
  padding: 14px 18px; font-size: 0.85rem; margin-bottom: 20px;
  border-inline-start: 2px solid var(--brass); background: rgba(178, 138, 74, 0.08);
}
.form-note.error { border-inline-start-color: var(--alarm); background: rgba(163, 84, 63, 0.1); }
.form-note.success { border-inline-start-color: var(--verdigris); background: rgba(95, 114, 103, 0.12); }
.form-note[hidden] { display: none; }
.form-note-mailto { color: var(--brass-bright); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- footer ---------- */
.footer { padding: 72px 0 44px; background: var(--stone-900); }
.footer-top {
  display: flex; justify-content: space-between; align-items: center; gap: 28px; flex-wrap: wrap;
  padding-bottom: 40px; margin-bottom: 34px; border-bottom: 1px solid var(--line);
}
.footer-brand { display: flex; align-items: center; gap: 16px; }
.footer-brand img { width: 52px; }
.footer-brand .name { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.16em; }
.footer-brand .tag { display: block; font-size: 0.74rem; color: var(--limestone-faint); margin-top: 4px; }
.footer-links { display: flex; gap: 28px; flex-wrap: wrap; }
.footer-links a {
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--limestone-dim); transition: color 0.25s var(--ease);
}
.footer-links a:hover { color: var(--brass-bright); }
.fineprint { font-size: 0.72rem; color: var(--limestone-faint); line-height: 1.85; max-width: 780px; }
.fineprint + .fineprint { margin-top: 8px; }

/* ---------- 404 ---------- */
.error-page {
  min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 40px;
}
.error-page .code {
  font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem);
  color: var(--brass-deep); line-height: 1;
}
.error-page h1 { font-size: 1.4rem; margin: 20px 0 14px; }
.error-page p { color: var(--limestone-dim); margin-bottom: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --gutter: 22px; }
  .split { grid-template-columns: 1fr; gap: 50px; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(8, 9, 11, 0.99); backdrop-filter: blur(12px);
    padding: 0 var(--gutter); max-height: 0; overflow: hidden auto;
    transition: max-height 0.45s var(--ease), padding 0.45s var(--ease);
    border-bottom: 1px solid transparent;
    max-height: calc(100dvh - var(--nav-h));
  }
  .nav-links.open { max-height: calc(100dvh - var(--nav-h)); padding: 18px var(--gutter) 30px; border-bottom-color: var(--line); }
  .nav-links:not(.open) { max-height: 0; }
  .nav-links a { padding: 15px 0; font-size: 0.8rem; width: 100%; }
  .tile.pano { grid-column: span 1; aspect-ratio: 16 / 10; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .stats { gap: 36px; }
  .lightbox-nav { display: none; }
  .panel { padding: 28px 22px; }

  /* On mobile the language menu expands inline within the stacked nav panel
     instead of floating as a dropdown — a floating box over other nav links
     that are already stacked vertically would overlap and be hard to reach. */
  .lang-switch { width: 100%; order: 99; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
  .lang-toggle { width: 100%; justify-content: space-between; padding: 10px 0; }
  .lang-menu {
    position: static; box-shadow: none; border: none; background: none;
    margin-top: 6px; max-height: none; grid-template-columns: 1fr 1fr;
  }
}

/* Extra-small phones: tighten spacing further and drop to a single gallery
   column so tile captions have room to breathe rather than truncating. */
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .nav-brand .name { font-size: 0.76rem; letter-spacing: 0.14em; }
  .hero h1 { font-size: clamp(2.1rem, 11vw, 3.4rem); }
  .btn { padding: 13px 20px; font-size: 0.7rem; }
  .grid { grid-template-columns: 1fr; }
  .stats { gap: 24px; }
  .stat b { font-size: 1.8rem; }
  .split.narrow { gap: 40px; }
  .panel { padding: 22px 16px; }
  .lightbox-close { width: 44px; height: 44px; top: 12px; inset-inline-end: 12px; font-size: 1.3rem; }
  .lightbox-caption { bottom: 16px; }
  .footer-top { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* Motion is the whole point of the hero video, so drop it entirely and
     let the poster image stand in. */
  .hero-media video { display: none; }
}

/* ---------- gallery additions ---------- */
.gallery-heading {
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  margin-bottom: 28px;
}
.tile-badge {
  position: absolute; top: 14px; inset-inline-end: 14px;
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 10px; background: rgba(8, 9, 11, 0.82);
  border: 1px solid var(--line-strong); color: var(--brass-bright);
  backdrop-filter: blur(4px);
}
.lightbox-count {
  position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
  font-size: 0.7rem; letter-spacing: 0.18em; color: var(--limestone-faint);
}

/* ---------- episode list ---------- */
.season-block { margin-bottom: 60px; }
.season-head {
  display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--line-strong);
}
.season-head .numeral { font-family: var(--font-display); font-size: 1.1rem; color: var(--brass); }
.season-head h3 { font-size: 1.05rem; letter-spacing: 0.09em; }
.season-head .sub {
  font-size: 0.8rem; color: var(--limestone-faint); font-style: italic;
  text-transform: none; letter-spacing: 0.02em;
}
.season-head .status {
  margin-inline-start: auto; font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--limestone-faint);
}
.season-head .status.live { color: var(--verdigris); }
.season-head .status.live::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--verdigris); margin-inline-end: 8px; vertical-align: middle;
  animation: pulse 2s var(--ease) infinite;
}
.ep-row {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 18px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--line);
  transition: background 0.25s var(--ease);
}
.ep-row:hover { background: rgba(233, 228, 216, 0.02); }
.ep-row .n { font-family: var(--font-display); font-size: 0.86rem; color: var(--brass-deep); }
.ep-row .t { font-size: 0.94rem; color: var(--limestone); }
.ep-row .d { font-size: 0.68rem; letter-spacing: 0.12em; color: var(--limestone-faint); }
.season-note { font-size: 0.82rem; color: var(--limestone-faint); padding: 18px 0; }

@media (max-width: 700px) {
  .ep-row { grid-template-columns: 40px 1fr; row-gap: 2px; }
  .ep-row .d { grid-column: 2; }
  .season-head .status { margin-inline-start: 0; width: 100%; }
}

/* Links to services that aren't live yet — visible but clearly inactive. */
.link-soon {
  opacity: 0.38; cursor: default; pointer-events: none;
}
a.tile { display: block; }

/* ==========================================================================
   RTL — Persian and Arabic
   Most of the layout mirrors automatically: Flexbox and CSS Grid are both
   direction-aware by spec, and the properties above already use logical
   (inset-inline-*, margin-inline-*, text-align:start) equivalents instead of
   hardcoded left/right. What's left here is the small set of things that
   need an explicit decision under RTL rather than an automatic one: chevron
   glyphs (their shape, not just position, needs to flip so they still point
   the way they mean), and typography for scripts Cinzel/Inter don't cover.
   ========================================================================== */
[dir="rtl"] {
  --font-display: 'Cinzel', var(--font-arabic-display);
}
[lang="fa"], [lang="ar"] {
  font-family: var(--font-arabic);
}
[lang="fa"] h1, [lang="fa"] h2, [lang="fa"] h3, [lang="fa"] h4, [lang="fa"] .display,
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4, [lang="ar"] .display {
  font-family: var(--font-arabic-display);
  /* Arabic-script faces don't have a Latin all-caps convention, and Cinzel's
     letterforms weren't drawn for this script — both would misrender the
     display headings, so headings fall back to a normal-weight native face. */
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}
[lang="fa"] .eyebrow, [lang="ar"] .eyebrow,
[lang="fa"] .btn, [lang="ar"] .btn,
[lang="fa"] .nav-links a, [lang="ar"] .nav-links a,
[lang="fa"] .filter-btn, [lang="ar"] .filter-btn {
  letter-spacing: 0; /* wide tracking is a Latin-type convention; it just adds odd gaps in Arabic script */
}

/* Chevrons are drawn pointing left/right as literal characters. Flipping the
   glyph itself (not just its position, which inset-inline-* already swaps)
   keeps "next" pointing the way the eye actually travels in RTL. The close
   button's × is symmetric, so it needs no equivalent rule. */
[dir="rtl"] .lightbox-nav.prev { transform: translateY(-50%) scaleX(-1); }
[dir="rtl"] .lightbox-nav.next { transform: translateY(-50%) scaleX(-1); }