/* ==========================================================================
   benomran.ly — Mohammed Ben Omran, Creative Director
   Single stylesheet. No build step.
   Tokens → base → chrome (nav, cursor, HUD, preloader) → sections → overlays
   ========================================================================== */

/* ---------- Arabic face: ثمانية (Thmanyah), self-hosted --------------------
   Downloaded from font.thmanyah.com. Sans carries Arabic display and body,
   Serif Display carries Arabic quotes. Latin keeps Anton / Rubik / Instrument. */
@font-face { font-family: 'Thmanyah Sans'; src: url('../assets/fonts/thmanyah-sans-light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('../assets/fonts/thmanyah-sans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('../assets/fonts/thmanyah-sans-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('../assets/fonts/thmanyah-sans-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Sans'; src: url('../assets/fonts/thmanyah-sans-black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Serif Display'; src: url('../assets/fonts/thmanyah-serif-display-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Thmanyah Serif Display'; src: url('../assets/fonts/thmanyah-serif-display-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- Tokens ------------------------------------------------------ */
:root {
  /* Night on the Mediterranean: deep teal-black, limestone ink, mustard accent */
  --bg: #0b1b1f;
  --bg-raised: #10262b;
  --bg-sunken: #071316;
  --ink: #ede3cf;
  --ink-2: rgba(237, 227, 207, 0.64);
  --ink-3: rgba(237, 227, 207, 0.34);
  --line: rgba(237, 227, 207, 0.14);
  --accent: #e9b44c;
  --accent-text: #e9b44c;
  --accent-ink: #0b1b1f;
  --teal: #1c6e7a;
  --teal-soft: rgba(28, 110, 122, 0.35);
  --shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);

  --f-display: 'Anton', 'Thmanyah Sans', Impact, 'Arial Narrow Bold', sans-serif;
  --f-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;

  --safe: clamp(16px, 4vw, 56px);
  --gap: 16px;
  --nav-h: 64px;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --dur: 0.6s;

  color-scheme: dark;
}

:root[data-theme='light'] {
  --bg: #ede3cf;
  --bg-raised: #f6efe1;
  --bg-sunken: #e1d5b9;
  --ink: #0b1b1f;
  --ink-2: rgba(11, 27, 31, 0.68);
  --ink-3: rgba(11, 27, 31, 0.4);
  --line: rgba(11, 27, 31, 0.14);
  --accent: #e9b44c;
  --accent-text: #8a5f0a;
  --accent-ink: #0b1b1f;
  --teal: #1c6e7a;
  --teal-soft: rgba(28, 110, 122, 0.18);
  --shadow: 0 30px 60px -30px rgba(11, 27, 31, 0.35);
  color-scheme: light;
}

/* Arabic faces swap in when the document is RTL: ثمانية for display, body and quotes */
:root[dir='rtl'] {
  --f-display: 'Thmanyah Sans', 'Anton', 'Arial', sans-serif;
  --f-body: 'Thmanyah Sans', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-serif: 'Thmanyah Serif Display', 'Instrument Serif', 'Times New Roman', Georgia, serif;
}

/* ---------- Base -------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* smooth only once the page is ready: a smooth fragment scroll on load
     keeps animating in the compositor while the lists render and would
     carry a deep link past its section */
  scroll-behavior: auto;
  -webkit-text-size-adjust: 100%;
  /* clip, not hidden: no scroll container is created, so sticky keeps working */
  overflow-x: clip;
}
html.is-ready:not(.is-settling) {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.5;
  /* clip, never hidden: hidden would make body a scroll container once html
     clips too, and position: sticky (the reel) would stop working */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.5s var(--ease-out), color 0.5s var(--ease-out);
}

body.is-locked {
  overflow: hidden;
}

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

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.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;
}

/* Language switching: both languages live in the DOM, one is shown */
.en {
  display: inline;
}
.ar {
  display: none;
}
:root[dir='rtl'] .en {
  display: none;
}
:root[dir='rtl'] .ar {
  display: inline;
}
.en.block,
.ar.block {
  display: block;
}
:root[dir='rtl'] .en.block {
  display: none;
}
:root[dir='ltr'] .ar.block {
  display: none;
}

/* Numbers and Latin identifiers stay left-to-right inside Arabic text */
.num,
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}

/* ---------- Type -------------------------------------------------------- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.005em;
}
:root[dir='rtl'] .display {
  font-weight: 800;
  text-transform: none;
  line-height: 1.15;
  letter-spacing: 0;
}

.label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
:root[dir='rtl'] .label {
  letter-spacing: 0;
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 12px;
}

.serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
}
/* Arabic quotes use Thmanyah Serif Display through --f-serif; no synthetic italic */
:root[dir='rtl'] .serif {
  font-style: normal;
  font-weight: 400;
}

/* ---------- Layout ------------------------------------------------------ */
.wrap {
  padding-inline: var(--safe);
  max-width: 1600px;
  margin-inline: auto;
}

.section {
  position: relative;
  padding-block: clamp(80px, 12vw, 160px);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
  padding-bottom: 16px;
  margin-bottom: clamp(32px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
}

.section-head .title {
  margin: 0;
  font-weight: 400;
  font-size: clamp(11px, 1vw, 13px);
}

.section-head .count {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
}

/* ---------- Custom cursor ---------------------------------------------- */
/* Positioned by JS in physical pixels, so physical offsets: never inline-start,
   which flips to the right edge in RTL and pushes the cursor off-screen. */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  pointer-events: none;
  z-index: 9000;
  transform: translate(-50%, -50%);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
    background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out),
    opacity 0.3s var(--ease-out);
  mix-blend-mode: difference;
  display: none;
}
.cursor.is-hidden {
  opacity: 0;
}

.cursor::after {
  content: '';
  position: absolute;
  inset: 50%;
  width: 4px;
  height: 4px;
  margin: -2px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.3s var(--ease-out);
}

/* The label hangs below the pointer so it never covers what is being pointed at */
.cursor-label {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, 8px);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 3px 8px;
  border-radius: 999px;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.25s var(--ease-out);
}
:root[dir='rtl'] .cursor-label {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}
.cursor-label:empty {
  display: none;
}

.cursor.is-hover {
  width: 38px;
  height: 38px;
  border-color: var(--accent);
  background: transparent;
  mix-blend-mode: normal;
}
.cursor.is-hover::after {
  transform: scale(0.75);
}
.cursor.is-hover .cursor-label {
  opacity: 1;
}
.cursor.is-down {
  transform: translate(-50%, -50%) scale(0.85);
}

@media (hover: hover) and (pointer: fine) {
  .cursor {
    display: block;
  }
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button {
    cursor: none;
  }
}

/* ---------- Preloader --------------------------------------------------- */
.loader {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: var(--bg);
  display: grid;
  place-items: center;
  transition: transform 0.9s var(--ease-in-out);
}
.loader.is-done {
  transform: translateY(-100%);
}
.loader-inner {
  text-align: center;
}
.loader-num {
  font-family: var(--f-display);
  font-size: clamp(120px, 28vw, 320px);
  line-height: 0.9;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.loader-cap {
  margin-top: 12px;
  color: var(--ink-2);
}
.loader-bar {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  height: 3px;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
:root[dir='rtl'] .loader-bar {
  transform-origin: right;
}
html.no-loader .loader {
  display: none;
}

/* ---------- Nav --------------------------------------------------------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--nav-h);
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--safe);
  transition: transform 0.5s var(--ease-out), background-color 0.4s var(--ease-out);
}
.nav.is-hidden {
  transform: translateY(-110%);
}
.nav.is-scrolled {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.brand {
  font-family: var(--f-display);
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
:root[dir='rtl'] .brand {
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: rec 1.6s ease-in-out infinite;
}
@keyframes rec {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.nav-links {
  display: none;
  gap: 32px;
}
.nav-link {
  position: relative;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 6px;
  overflow: hidden;
}
:root[dir='rtl'] .nav-link {
  font-family: var(--f-body);
  font-size: 13px;
  letter-spacing: 0;
  font-weight: 500;
}
.nav-link .swap {
  display: block;
  transition: transform 0.45s var(--ease-out);
}
.nav-link .swap + .swap {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 0;
  color: var(--accent-text);
}
.nav-link:hover .swap,
.nav-link:focus-visible .swap {
  transform: translateY(-100%);
}
.nav-link.is-active::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
}

.nav-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tool {
  height: 34px;
  min-width: 34px;
  padding-inline: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out),
    border-color 0.3s var(--ease-out);
}
.tool:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.tool svg {
  width: 14px;
  height: 14px;
}
.tool .sun {
  display: none;
}
:root[data-theme='light'] .tool .sun {
  display: block;
}
:root[data-theme='light'] .tool .moon {
  display: none;
}
.tool-lang .ar-glyph {
  font-family: var(--f-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
/* Arabic UI labels leave the mono stack: IBM Plex Mono has no Arabic, and
   tracking pulls joined letters apart */
:root[dir='rtl'] .tool,
:root[dir='rtl'] .totop,
:root[dir='rtl'] .dailies-cap .m,
:root[dir='rtl'] .reader-nav button small,
:root[dir='rtl'] .section-head .count {
  font-family: var(--f-body);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
:root[dir='rtl'] .tool {
  font-size: 12px;
}

.menu-btn {
  display: inline-flex;
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
  }
  .menu-btn {
    display: none;
  }
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 6500;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--safe);
  gap: 8px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.7s var(--ease-in-out), visibility 0s linear 0.7s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.7s var(--ease-in-out), visibility 0s;
}
.menu-link {
  font-family: var(--f-display);
  font-size: clamp(44px, 12vw, 96px);
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 14px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
:root[dir='rtl'] .menu-link {
  font-weight: 800;
  text-transform: none;
}
.menu.is-open .menu-link {
  opacity: 1;
  transform: none;
}
.menu.is-open .menu-link:nth-child(2) {
  transition-delay: 0.1s;
}
.menu.is-open .menu-link:nth-child(3) {
  transition-delay: 0.16s;
}
.menu.is-open .menu-link:nth-child(4) {
  transition-delay: 0.22s;
}
.menu.is-open .menu-link:nth-child(5) {
  transition-delay: 0.28s;
}
.menu.is-open .menu-link:nth-child(6) {
  transition-delay: 0.34s;
}
.menu.is-open .menu-link:nth-child(7) {
  transition-delay: 0.4s;
}
.menu-link {
  font-size: clamp(36px, 9vw, 80px);
}
.menu-link .idx {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--accent-text);
  letter-spacing: 0.1em;
}
.menu-foot {
  margin-top: 32px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ---------- HUD (timecode) --------------------------------------------- */
.hud {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-start: var(--safe);
  z-index: 6000;
  display: none;
  gap: 18px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
  mix-blend-mode: difference;
}
.hud b {
  font-weight: 400;
  color: var(--ink-2);
}
@media (min-width: 900px) {
  .hud {
    display: flex;
  }
}

.totop {
  position: fixed;
  inset-block-end: 18px;
  inset-inline-end: var(--safe);
  z-index: 6000;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  pointer-events: none;
}
.totop.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* ---------- Hero -------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: var(--nav-h);
  overflow: hidden;
  isolation: isolate;
}

.hero-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-title {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: clamp(88px, 27vw, 420px);
  line-height: 0.85;
  z-index: 1;
  pointer-events: none;
  padding-inline: var(--safe);
  transition: opacity 0.6s var(--ease-out);
}
:root[dir='rtl'] .hero-title {
  font-size: clamp(80px, 24vw, 380px);
  line-height: 1.1;
}
.hero.has-gl .hero-title {
  opacity: 0;
}

.hero-meta {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
.hero-meta > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-meta .value {
  font-size: 15px;
  font-weight: 500;
}
.hero-meta .value.big {
  font-family: var(--f-display);
  font-size: clamp(22px, 2.4vw, 34px);
  text-transform: uppercase;
  line-height: 1;
}
:root[dir='rtl'] .hero-meta .value.big {
  font-weight: 800;
  text-transform: none;
}

/* The portrait is a real hero element: tall, at the end edge, centered in the
   band between the nav and the meta row. The wordmark is drawn beside it. */
.hero-portrait {
  position: absolute;
  inset-inline-end: var(--safe);
  top: calc(var(--nav-h) + (100svh - var(--nav-h) - 150px) / 2);
  transform: translateY(-50%);
  /* sized by height, but never so wide that the wordmark loses its band (portrait tablets) */
  height: clamp(280px, min(58vh, 40vw), 620px);
  width: auto;
  aspect-ratio: 3 / 4;
  z-index: 2;
  margin: 0;
  overflow: hidden;
  background: var(--bg-sunken);
  box-shadow: var(--shadow);
}
@media (max-width: 699px) {
  .hero-portrait {
    top: calc(var(--nav-h) + 12px);
    transform: none;
    inset-inline-end: 16px;
    height: clamp(180px, 26vh, 260px);
  }
}
.hero-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  transition: filter 0.6s var(--ease-out), transform 0.9s var(--ease-out);
  transform: scale(1.04);
}
.hero-portrait:hover img {
  filter: grayscale(0) contrast(1);
  transform: scale(1);
}
.hero-portrait figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 6px 8px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--ink-2);
}

.hero-scroll {
  position: absolute;
  inset-inline-start: var(--safe);
  inset-block-start: calc(var(--nav-h) + 28px);
  z-index: 2;
  display: none;
  align-items: center;
  gap: 10px;
}
.hero-scroll .line {
  width: 1px;
  height: 40px;
  background: var(--ink-3);
  position: relative;
  overflow: hidden;
}
.hero-scroll .line::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: -40%;
  height: 40%;
  background: var(--accent);
  animation: drip 1.8s var(--ease-in-out) infinite;
}
@keyframes drip {
  to {
    top: 110%;
  }
}

.hero-meta .reveal-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.hero.is-in .hero-meta .reveal-up {
  opacity: 1;
  transform: none;
}
.hero.is-in .hero-meta .reveal-up:nth-child(2) {
  transition-delay: 0.08s;
}
.hero.is-in .hero-meta .reveal-up:nth-child(3) {
  transition-delay: 0.16s;
}
.hero.is-in .hero-meta .reveal-up:nth-child(4) {
  transition-delay: 0.24s;
}

@media (min-width: 700px) {
  .hero-meta {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    padding-block: 28px;
  }
  .hero-scroll {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  /* plain-type fallback (no WebGL) leaves room for the portrait */
  .hero-title {
    padding-inline-end: clamp(280px, 34vw, 520px);
    text-align: center;
  }
}

/* ---------- Ticker (marquee) ------------------------------------------ */
.ticker {
  border-block: 1px solid var(--line);
  overflow: hidden;
  padding-block: 14px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: ticker 40s linear infinite;
}
:root[dir='rtl'] .ticker-track {
  animation-name: ticker-rtl;
}
.ticker:hover .ticker-track {
  animation-play-state: paused;
}
.ticker-item {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.6vw, 34px);
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 48px;
  color: var(--ink-2);
}
:root[dir='rtl'] .ticker-item {
  font-weight: 700;
  text-transform: none;
}
.ticker-item::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
@keyframes ticker-rtl {
  to {
    transform: translateX(50%);
  }
}

/* ---------- Manifesto (scroll-scrubbed words) -------------------------- */
.manifesto {
  padding-block: clamp(120px, 18vw, 240px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.manifesto > .wrap {
  position: relative;
  z-index: 1;
}
/* The photo of me and my DOP at the monitor, washed in the page color so the
   thesis stays the loudest thing on screen */
.manifesto-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('../assets/img/onset-monitor.jpg') center 30% / cover no-repeat;
  filter: saturate(0.75);
  pointer-events: none;
}
.manifesto-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--bg) 88%, transparent),
    color-mix(in srgb, var(--bg) 62%, transparent) 45%,
    color-mix(in srgb, var(--bg) 90%, transparent)
  );
}
.manifesto-cap {
  position: absolute;
  z-index: 1;
  inset-block-end: 18px;
  inset-inline-end: var(--safe);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
:root[dir='rtl'] .manifesto-cap {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}
.scrub {
  font-size: clamp(40px, 7.4vw, 124px);
  max-width: 14em;
  text-wrap: balance;
}
/* ثمانية sets wider than Changa did, so the Arabic thesis steps down a size to stay at three lines */
:root[dir='rtl'] .scrub {
  font-size: clamp(34px, 6vw, 100px);
  line-height: 1.12;
}
.scrub .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-block: 0.08em;
  margin-block: -0.08em;
  margin-inline-end: 0.22em;
}
.scrub .wi {
  display: inline-block;
  will-change: transform, opacity;
  transform: translateY(130%);
  opacity: 0.12;
}
/* Arabic descenders and dots reach well below the line box */
:root[dir='rtl'] .scrub .w {
  padding-block: 0.22em;
  margin-block: -0.22em;
}
.scrub .accent {
  color: var(--accent-text);
}
.manifesto-note {
  margin-top: clamp(40px, 6vw, 72px);
  max-width: 34em;
  color: var(--ink-2);
  font-size: 15px;
}
/* photo with a small label, used under the thesis and beside the archive */
.photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--bg-sunken);
}
.photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 1.4s var(--ease-out);
}
.photo:hover img {
  transform: scale(1.03);
}
.photo figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 8px 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
}
:root[dir='rtl'] .photo figcaption {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}

/* ---------- Dailies: a dolly through the frames ------------------------ */
/* A pinned scene. Scrolling moves the camera forward past photos hung at
   different depths (CSS perspective, transforms only). The rig tilts with
   the pointer; the nearest frame's caption reads out below. */
.dailies {
  position: relative;
  height: calc(100svh + 3600px);
}
.dailies-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-raised) 0%, var(--bg) 55%, var(--bg-sunken) 100%);
}
.dailies-head {
  position: absolute;
  inset-inline: 0;
  top: var(--nav-h);
  z-index: 4;
  pointer-events: none;
}
.dailies-head .section-head {
  margin-bottom: 0;
}
.dailies-beam {
  position: absolute;
  left: 50%;
  top: -6vh;
  width: 160vmax;
  height: 160vmax;
  transform: translateX(-50%);
  background: conic-gradient(from 165deg at 50% 0%, transparent 0deg, color-mix(in srgb, var(--accent) 26%, transparent) 14deg, transparent 30deg);
  filter: blur(10px);
  opacity: 0.5;
  animation: beam 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
:root[data-theme='light'] .dailies-beam {
  opacity: 0.35;
}
@keyframes beam {
  0%,
  100% {
    opacity: 0.32;
    transform: translateX(-50%) rotate(-2deg);
  }
  50% {
    opacity: 0.6;
    transform: translateX(-50%) rotate(2deg);
  }
}
.dailies-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1000px;
  perspective-origin: 50% 48%;
}
.dailies-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.frame {
  --w: 26vw;
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(var(--w), 560px);
  margin: 0;
  padding: 10px 10px 28px;
  background: #0c0c0c;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.85);
  opacity: 0;
  transform: translate(-50%, -50%) translate3d(0, 0, -6000px);
  will-change: transform, opacity;
  cursor: pointer;
  backface-visibility: hidden;
}
.frame.l {
  --w: 36vw;
}
.frame img {
  width: 100%;
  height: auto;
  display: block;
  background: #151515;
}
/* sprocket holes */
.frame::before,
.frame::after {
  content: '';
  position: absolute;
  inset-inline: 10px;
  height: 5px;
  background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(237, 227, 207, 0.55) 4px 10px, transparent 10px 16px);
}
.frame::before {
  top: 2px;
}
.frame::after {
  bottom: 2px;
}
.frame .slate {
  position: absolute;
  inset-inline-start: 10px;
  bottom: 9px;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 227, 207, 0.55);
}
.frame.is-near {
  box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(233, 180, 76, 0.35);
}
.frame.is-passed {
  pointer-events: none;
}
.dailies-cap {
  position: absolute;
  inset-inline: var(--safe);
  bottom: 64px;
  z-index: 4;
  text-align: center;
  pointer-events: none;
}
.dailies-cap .t {
  display: block;
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 34px);
  line-height: 1.2;
  max-width: 24em;
  margin-inline: auto;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}
:root[dir='rtl'] .dailies-cap .t {
  font-style: normal;
  font-weight: 400;
}
.dailies-cap .m {
  display: block;
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dailies-progress {
  position: absolute;
  inset-inline: var(--safe);
  bottom: 40px;
  height: 2px;
  background: var(--line);
  z-index: 4;
}
.dailies-progress i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
:root[dir='rtl'] .dailies-progress i {
  transform-origin: right;
}
.dailies-hint {
  position: absolute;
  inset-inline-end: var(--safe);
  top: calc(var(--nav-h) + 64px);
  z-index: 4;
  color: var(--ink-3);
  pointer-events: none;
}
@media (max-width: 899px) {
  .frame {
    --w: 62vw;
  }
  .frame.l {
    --w: 80vw;
  }
  .dailies-cap {
    bottom: 56px;
  }
  .dailies-cap .t {
    font-size: 18px;
  }
  .dailies-hint {
    display: none;
  }
}
/* No motion, or no 3D: a plain grid of the same frames */
.dailies.is-static {
  height: auto;
  padding-block: clamp(80px, 12vw, 160px);
}
.dailies.is-static .dailies-sticky {
  position: static;
  height: auto;
  overflow: visible;
  background: none;
}
.dailies.is-static .dailies-head {
  position: static;
  margin-bottom: 40px;
}
.dailies.is-static .dailies-beam,
.dailies.is-static .dailies-cap,
.dailies.is-static .dailies-progress,
.dailies.is-static .dailies-hint {
  display: none;
}
.dailies.is-static .dailies-scene {
  position: static;
  perspective: none;
  padding-inline: var(--safe);
}
.dailies.is-static .dailies-rig {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}
.dailies.is-static .frame {
  position: static;
  width: auto;
  opacity: 1;
  transform: none;
}

/* ---------- The 55-dinar ad (receipt) ---------------------------------- */
.fiftyfive {
  background: var(--bg-sunken);
}
/* minmax(0, …) so a wide child can never stretch a column past the page */
.fiftyfive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
@media (min-width: 900px) {
  .fiftyfive-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}

.bignum {
  position: relative;
  font-size: clamp(160px, 30vw, 460px);
  line-height: 0.82;
  display: inline-block;
}
.bignum .outline {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-3);
}
.bignum .fill {
  position: absolute;
  inset: 0;
  color: var(--accent);
  clip-path: inset(calc(100% - var(--p, 0%)) 0 0 0);
}
.bignum-cap {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
}
.bignum-cap .unit {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 56px);
  text-transform: uppercase;
  line-height: 1;
}
:root[dir='rtl'] .bignum-cap .unit {
  font-weight: 800;
  text-transform: none;
}
.fiftyfive-story {
  margin-top: 40px;
  max-width: 34em;
  color: var(--ink-2);
}
.fiftyfive-story p + p {
  margin-top: 1em;
}
.fiftyfive-story strong {
  color: var(--ink);
  font-weight: 500;
}

.receipt {
  position: relative;
  background: #f7f1e3;
  color: #1a1a1a;
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1.6;
  padding: 36px 28px 44px;
  max-width: 440px;
  margin-inline: auto;
  box-shadow: var(--shadow);
  transform: rotate(-1.2deg);
  direction: ltr;
}
:root[dir='rtl'] .receipt {
  direction: rtl;
  transform: rotate(1.2deg);
  font-family: var(--f-body);
}
.receipt::before,
.receipt::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  height: 10px;
  background: radial-gradient(circle, transparent 5px, #f7f1e3 5.5px) -6px 0 / 12px 10px repeat-x;
}
.receipt::before {
  top: -10px;
  transform: rotate(180deg);
}
.receipt::after {
  bottom: -10px;
}
.receipt-head {
  text-align: center;
  border-bottom: 1px dashed #1a1a1a;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.receipt-head .shop {
  font-family: var(--f-display);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
}
:root[dir='rtl'] .receipt-head .shop {
  font-weight: 800;
  text-transform: none;
}
.receipt-head .sub {
  font-size: 11px;
  margin-top: 6px;
  opacity: 0.7;
}
.receipt-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 4px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.receipt.is-in .receipt-line {
  opacity: 1;
  transform: none;
}
.receipt-line span:first-child {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.receipt-line .amt {
  font-variant-numeric: tabular-nums;
}
.receipt-line.note {
  font-size: 11px;
  opacity: 0.65;
  padding-top: 0;
}
.receipt.is-in .receipt-line.note {
  opacity: 0.65;
}
.receipt-total {
  border-top: 1px dashed #1a1a1a;
  margin-top: 12px;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-display);
  font-size: 30px;
  text-transform: uppercase;
  line-height: 1;
}
:root[dir='rtl'] .receipt-total {
  font-weight: 800;
  text-transform: none;
}
.receipt-foot {
  margin-top: 18px;
  text-align: center;
  font-size: 11px;
  opacity: 0.7;
}
.receipt-barcode {
  margin: 16px auto 0;
  height: 34px;
  width: 78%;
  background: repeating-linear-gradient(90deg, #1a1a1a 0 2px, transparent 2px 4px, #1a1a1a 4px 5px, transparent 5px 8px, #1a1a1a 8px 11px, transparent 11px 13px);
}
.receipt-stamp {
  position: absolute;
  inset-inline-end: 18px;
  inset-block-start: 18px;
  font-family: var(--f-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b3261e;
  border: 2px solid #b3261e;
  padding: 4px 8px;
  transform: rotate(8deg);
  opacity: 0.85;
}
:root[dir='rtl'] .receipt-stamp {
  transform: rotate(-8deg);
  font-weight: 800;
  letter-spacing: 0;
}
.receipt-cta {
  margin-top: 28px;
  text-align: center;
}

/* ---------- The reel (lateral tracking shot) --------------------------- */
.reel {
  position: relative;
}
.reel-sticky {
  position: relative;
}
.reel-head {
  padding-top: clamp(80px, 12vw, 160px);
}
.reel-track {
  display: flex;
  gap: var(--gap);
  padding-inline: var(--safe);
  padding-block: 24px 60px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.reel-track::-webkit-scrollbar {
  display: none;
}

.shot {
  position: relative;
  flex: 0 0 min(82vw, 420px);
  scroll-snap-align: start;
  background: var(--bg-raised);
  display: flex;
  flex-direction: column;
  min-height: 520px;
  transition: transform 0.6s var(--ease-out);
}
.shot:hover {
  transform: translateY(-6px);
}
.shot-poster {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--teal);
  display: grid;
  place-items: center;
  color: var(--ink);
  isolation: isolate;
}
.shot-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.shot:hover .shot-poster img {
  transform: scale(1.05);
}
.shot-poster .fact {
  font-family: var(--f-display);
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.9;
  text-align: center;
  text-transform: uppercase;
  padding: 16px;
  text-wrap: balance;
}
:root[dir='rtl'] .shot-poster .fact {
  font-weight: 800;
  text-transform: none;
  line-height: 1.1;
}
.shot-poster .fact small {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-top: 12px;
  opacity: 0.8;
}
:root[dir='rtl'] .shot-poster .fact small {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-weight: 400;
}
.shot-poster.mustard {
  background: var(--accent);
  color: var(--accent-ink);
}
.shot-poster.paper {
  background: #ede3cf;
  color: #0b1b1f;
}
.shot-poster.night {
  background: var(--bg-sunken);
}
.shot-poster.stripes {
  background: repeating-linear-gradient(135deg, var(--teal) 0 18px, #155661 18px 36px);
}
.shot-poster .wave {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 120px;
}
.shot-poster .wave i {
  width: 6px;
  height: 20%;
  background: var(--accent);
  animation: wave 1.2s ease-in-out infinite;
}
.shot-poster .wave i:nth-child(2n) {
  animation-delay: 0.15s;
  height: 60%;
}
.shot-poster .wave i:nth-child(3n) {
  animation-delay: 0.3s;
  height: 90%;
}
.shot-poster .wave i:nth-child(5n) {
  animation-delay: 0.45s;
  height: 40%;
}
@keyframes wave {
  50% {
    transform: scaleY(0.25);
  }
}
.shot-tag {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root[dir='rtl'] .shot-tag {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}
.shot-body {
  padding: 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.shot-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.shot-title {
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  text-transform: uppercase;
}
:root[dir='rtl'] .shot-title {
  font-weight: 800;
  text-transform: none;
  line-height: 1.2;
  font-size: 28px;
}
.shot-desc {
  color: var(--ink-2);
  font-size: 14px;
  flex: 1;
}
.shot-link {
  align-self: flex-start;
  margin-top: 6px;
}
.shot-cast {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
:root[dir='rtl'] .shot-cast {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}

.reel-progress {
  height: 2px;
  background: var(--line);
  margin-inline: var(--safe);
  position: relative;
  display: none;
}
.reel-progress i {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}
:root[dir='rtl'] .reel-progress i {
  transform-origin: right;
}

/* Desktop: the strip becomes a sticky lateral dolly driven by page scroll.
   The track takes whatever height is left under the head, every card
   stretches to that height, the poster owns a fixed share of it and the body
   clamps its text, so the link is always on screen on any laptop. */
@media (min-width: 900px) {
  .reel-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding-bottom: 40px;
  }
  .reel-head {
    padding-top: var(--nav-h);
  }
  .reel-head .section-head {
    margin-bottom: 4px;
  }
  .reel-track {
    flex: 1;
    min-height: 0;
    overflow: visible;
    scroll-snap-type: none;
    will-change: transform;
    padding-block: 12px 16px;
  }
  .shot {
    flex: 0 0 clamp(280px, 24vw, 400px);
    min-height: 0;
    cursor: pointer;
  }
  .shot-poster {
    flex: 0 0 52%;
    aspect-ratio: auto;
    min-height: 0;
  }
  .shot-poster .fact {
    font-size: clamp(40px, min(6vw, 12svh), 100px);
  }
  .shot-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 14px 18px 16px;
    gap: 8px;
  }
  .shot-desc {
    flex: 0 1 auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
  }
  .shot-cast {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shot-link {
    margin-top: auto;
  }
  .reel-progress {
    display: block;
  }
}

/* Buttons and links */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease-out);
}
:root[dir='rtl'] .btn {
  font-family: var(--f-body);
  font-weight: 500;
  letter-spacing: 0;
  font-size: 13px;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}
.btn:hover::before {
  transform: translateY(0);
}
.btn:hover {
  color: var(--bg);
}
.btn > * {
  position: relative;
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn.ghost:hover {
  color: var(--bg);
}
.arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease-out);
}
:root[dir='rtl'] .arrow {
  transform: scaleX(-1);
}
.btn:hover .arrow,
.link:hover .arrow {
  transform: translate(3px, -3px);
}
:root[dir='rtl'] .btn:hover .arrow,
:root[dir='rtl'] .link:hover .arrow {
  transform: scaleX(-1) translate(3px, -3px);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
  transition: border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
:root[dir='rtl'] .link {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 500;
}
.link:hover {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ---------- Feed (the posts as images) --------------------------------- */
.feed-intro {
  max-width: 36em;
  color: var(--ink-2);
  margin-bottom: 40px;
  font-size: 17px;
}
.gallery {
  columns: 1;
  column-gap: var(--gap);
}
@media (min-width: 640px) {
  .gallery {
    columns: 2;
  }
}
@media (min-width: 1100px) {
  .gallery {
    columns: 3;
  }
}
/* One card = one post: his image, his words (excerpt), a way to read it here,
   and the link to the original. */
.post {
  break-inside: avoid;
  margin: 0 0 var(--gap);
  background: var(--bg-raised);
  position: relative;
  overflow: hidden;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.post:hover {
  transform: translateY(-4px);
}
.post-media {
  position: relative;
  display: block;
  background: var(--bg-sunken);
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: var(--ratio, 4 / 5);
}
.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s var(--ease-out);
}
.post:hover .post-media img {
  transform: scale(1.04);
}
.post-poster {
  display: grid;
  place-items: center;
  background: var(--teal);
  color: var(--ink);
}
.post-poster.mustard {
  background: var(--accent);
  color: var(--accent-ink);
}
.post-poster.paper {
  background: #ede3cf;
  color: #0b1b1f;
}
.post-poster .fact {
  font-family: var(--f-display);
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 0.92;
  text-align: center;
  text-transform: uppercase;
  padding: 24px;
  text-wrap: balance;
}
:root[dir='rtl'] .post-poster .fact {
  font-weight: 800;
  text-transform: none;
  line-height: 1.1;
}
.post-poster .fact small {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  margin-top: 12px;
  opacity: 0.8;
}
:root[dir='rtl'] .post-poster .fact small {
  font-family: var(--f-body);
  letter-spacing: 0;
}
.post-body {
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.post-title {
  font-family: var(--f-display);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
:root[dir='rtl'] .post-title {
  font-weight: 800;
  text-transform: none;
  line-height: 1.25;
  font-size: 24px;
}
.post-title:hover {
  color: var(--accent-text);
}
.post-excerpt {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
  text-align: start;
  overflow-wrap: anywhere;
}
.post-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
:root[dir='rtl'] .post-meta {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}
.post-meta .where {
  color: var(--accent-text);
}
.post-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.post-media .tag {
  position: absolute;
  inset-block-start: 12px;
  inset-inline-start: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--ink);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}
:root[dir='rtl'] .post-media .tag {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}

/* ---------- Lightbox (a post in a window) ------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 8600;
  background: color-mix(in srgb, var(--bg) 55%, #000 45%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.is-open {
  display: flex;
}
.lightbox-panel {
  position: relative;
  width: min(100%, 560px);
  max-height: 92vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  animation: pop 0.5s var(--ease-out);
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
}
.lightbox-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.lightbox-bar .what {
  font-size: 13px;
}
.lightbox-body {
  overflow: auto;
  background: #fff;
}
.lightbox-body iframe {
  width: 100%;
  height: min(78vh, 900px);
  border: 0;
  display: block;
}

/* ---------- Cut list (EDL) --------------------------------------------- */
.edl {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.edl th,
.edl td {
  text-align: start;
  padding: 18px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.edl th {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
  padding-block: 10px;
}
:root[dir='rtl'] .edl th {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}
.edl td.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  direction: ltr;
  text-align: start;
}
:root[dir='rtl'] .edl td.mono {
  text-align: end;
}
.edl td.track {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  white-space: nowrap;
}
:root[dir='rtl'] .edl td.track {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 11px;
}
.edl td.clip strong {
  display: block;
  font-weight: 500;
  font-size: 17px;
}
.edl td.clip span.desc {
  color: var(--ink-2);
  font-size: 14px;
}
.edl tr.row {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.edl tr.row.is-in {
  opacity: 1;
  transform: none;
}
.edl tr.row:hover td {
  background: var(--teal-soft);
}
.edl .col-in,
.edl .col-out {
  width: 72px;
}
.edl .col-ev {
  width: 48px;
}
.edl .col-track {
  width: 96px;
}
@media (max-width: 700px) {
  .edl .col-out,
  .edl td:nth-child(3),
  .edl th:nth-child(3) {
    display: none;
  }
  .edl th,
  .edl td {
    padding-inline: 6px;
  }
}
/* Narrow phones: each event becomes a two-line block (number · year · track, then the clip) */
@media (max-width: 480px) {
  .edl,
  .edl tbody {
    display: block;
  }
  .edl thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .edl tr.row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: 14px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .edl tr.row td {
    display: block;
    padding: 0;
    border: 0;
  }
  .edl tr.row td:nth-child(3) {
    display: none;
  }
  .edl tr.row td.clip {
    grid-column: 1 / -1;
    margin-top: 8px;
  }
  .edl tr.row:hover td {
    background: none;
  }
}

.certs {
  margin-top: 48px;
  display: grid;
  gap: 8px 24px;
  grid-template-columns: 1fr;
  color: var(--ink-2);
  font-size: 14px;
}
.certs li {
  list-style: none;
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.certs ul {
  margin: 0;
  padding: 0;
}
.certs .yr {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--ink-3);
}
@media (min-width: 900px) {
  .certs {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Archive (the blog) ----------------------------------------- */
.archive-intro {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-bottom: 48px;
}
.archive-intro .photo {
  max-width: 420px;
}
@media (min-width: 900px) {
  .archive-intro {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: end;
  }
  .archive-intro .photo {
    grid-row: 1 / span 2;
    max-width: none;
  }
  .archive-intro .lead,
  .archive-intro .meta {
    grid-column: 2;
  }
}
.archive-intro .lead {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  max-width: 22em;
}
.archive-intro .meta {
  color: var(--ink-2);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.archive-tools {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.chip {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.chip.is-active,
.chip:hover {
  background: var(--ink);
  color: var(--bg);
}

.archive-year {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 32px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
  .archive-year {
    grid-template-columns: 160px 1fr;
  }
}
.archive-year .yr {
  font-family: var(--f-display);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  color: var(--ink-3);
  position: sticky;
  top: calc(var(--nav-h) + 16px);
  align-self: start;
}
.post-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: center;
  padding-block: 14px;
  border-bottom: 1px solid var(--line);
  transition: padding-inline-start 0.4s var(--ease-out);
}
.post-row:hover {
  padding-inline-start: 10px;
}
.post-row .film {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1;
  text-transform: uppercase;
  direction: ltr;
  unicode-bidi: isolate;
}
.post-row .film.arabic {
  font-weight: 900;
  text-transform: none;
  font-family: 'Thmanyah Sans', var(--f-display);
  direction: rtl;
  line-height: 1.25;
}
.post-row .subtitle {
  direction: rtl;
  font-size: 15px;
  color: var(--ink-2);
  grid-column: 1;
}
.post-row .side {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}
.post-row .side .cat {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--accent-text);
}
.post-row .side .arrow {
  color: var(--ink);
  font-size: 16px;
}
/* Arabic runs keep RTL shaping but align with the row's reading edge */
:root[dir='ltr'] .post-row .film.arabic,
:root[dir='ltr'] .post-row .subtitle {
  text-align: left;
}
:root[dir='rtl'] .post-row .film,
:root[dir='rtl'] .post-row .subtitle {
  text-align: right;
}
.post-row.is-hidden {
  display: none;
}

.float-img {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;
  aspect-ratio: 3 / 2;
  pointer-events: none;
  z-index: 5000;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.9);
  transition: opacity 0.3s var(--ease-out);
  overflow: hidden;
  background: var(--bg-raised);
  box-shadow: var(--shadow);
  display: none;
}
.float-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.float-img.is-on {
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .float-img {
    display: block;
  }
}

.archive-foot {
  margin-top: 32px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--ink-2);
  font-size: 14px;
}

/* ---------- Reader overlay --------------------------------------------- */
/* A centered window over the blurred page */
.reader {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.reader.is-open {
  display: block;
}
.reader.is-in {
  opacity: 1;
}
.reader-panel {
  position: absolute;
  top: 3vh;
  bottom: 3vh;
  left: 50%;
  width: min(100% - 32px, 1040px);
  background: var(--bg);
  color: var(--ink);
  overflow-y: auto;
  transform: translate(-50%, 28px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out), opacity 0.6s var(--ease-out);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.reader.is-in .reader-panel {
  transform: translate(-50%, 0);
  opacity: 1;
}
@media (max-width: 699px) {
  .reader-panel {
    inset: 0;
    left: 0;
    width: 100%;
    transform: translateY(28px);
    border: 0;
  }
  .reader.is-in .reader-panel {
    transform: none;
  }
}
.reader-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--safe);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.reader-bar .tools {
  display: flex;
  gap: 8px;
}
.reader-article {
  padding: 40px var(--safe) 96px;
  direction: rtl;
  text-align: start;
  font-size: 18px;
  line-height: 1.9;
}
.reader-article .kicker {
  direction: ltr;
  text-align: start;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}
:root[dir='rtl'] .reader-article .kicker {
  direction: rtl;
}
.reader-article h1 {
  font-family: 'Thmanyah Sans', var(--f-display);
  font-weight: 900;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.25;
  margin-bottom: 24px;
}
.reader-article h1 .latin {
  font-family: 'Anton', var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  direction: ltr;
  unicode-bidi: isolate;
}
.reader-article[dir='ltr'] {
  direction: ltr;
}
.reader-article[dir='ltr'] h1 {
  font-family: var(--f-display);
}
.reader-article h1.latin {
  font-family: 'Anton', var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.95;
}
/* Never crop a post's image: tall ones sit whole on the raised surface */
.reader-article .featured {
  margin: 0 0 32px;
  overflow: hidden;
  background: var(--bg-raised);
  display: grid;
  place-items: center;
}
.reader-article .featured img {
  width: 100%;
  height: auto;
  max-height: 72vh;
  object-fit: contain;
}
.reader-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 32px;
}
.reader-gallery img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-raised);
}
.reader-gallery img:first-child {
  grid-column: 1 / -1;
}
@media (max-width: 599px) {
  .reader-gallery {
    grid-template-columns: 1fr;
  }
}
.reader-body .hashtag {
  color: var(--accent-text);
}
.reader-body .reader-credits {
  margin-top: 2em;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  direction: ltr;
  text-align: start;
}
:root[dir='rtl'] .reader-body .reader-credits {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 12px;
  direction: rtl;
}
.reader-body {
  overflow-wrap: anywhere;
}
.reader-body p {
  margin: 0 0 1.2em;
}
.reader-body img {
  margin: 1.5em auto;
  height: auto;
}
.reader-body figure {
  margin: 1.5em 0;
}
.reader-body figcaption {
  font-size: 13px;
  color: var(--ink-2);
  text-align: center;
}
.reader-body h2,
.reader-body h3,
.reader-body h4 {
  font-family: 'Thmanyah Sans', var(--f-display);
  font-weight: 700;
  line-height: 1.3;
  margin: 1.6em 0 0.6em;
}
.reader-body blockquote {
  margin: 1.5em 0;
  padding-inline-start: 20px;
  border-inline-start: 3px solid var(--accent);
  color: var(--ink-2);
}
.reader-body a {
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.reader-body ul,
.reader-body ol {
  padding-inline-start: 1.4em;
}
.reader-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  margin: 1.5em 0;
}
.reader-skeleton {
  display: grid;
  gap: 14px;
}
.reader-skeleton i {
  display: block;
  height: 14px;
  background: var(--line);
  border-radius: 4px;
  animation: pulse 1.2s ease-in-out infinite;
}
.reader-skeleton i:nth-child(2n) {
  width: 84%;
}
.reader-skeleton i:nth-child(3n) {
  width: 62%;
}
@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}
.reader-error {
  padding: 24px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  direction: inherit;
}
.reader-navwrap {
  padding: 0 var(--safe) 72px;
}
.reader-nav {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  direction: ltr;
}
:root[dir='rtl'] .reader-nav {
  direction: rtl;
}
.reader-nav button {
  max-width: 45%;
  text-align: start;
  font-size: 14px;
  color: var(--ink-2);
}
.reader-nav button:hover {
  color: var(--ink);
}
.reader-nav button small {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

/* ---------- Voice ------------------------------------------------------- */
.voice {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.voice > .wrap {
  position: relative;
  z-index: 1;
}
/* Behind the section: the empty-cinema photo at once, then the video of me
   talking about the podcast fades in over it (assets/video/voice.*) */
.voice-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../assets/img/cinema-sepia.jpg') center 30% / cover no-repeat;
}
.voice-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.voice-video {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) brightness(0.42);
  opacity: 0;
  transition: opacity 1.4s var(--ease-out);
}
.voice.has-video .voice-video {
  opacity: 1;
}
.voice-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--bg) 82%, transparent), color-mix(in srgb, var(--bg) 35%, transparent) 55%, color-mix(in srgb, var(--bg) 70%, transparent));
}
.voice-sound {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  height: 36px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
:root[dir='rtl'] .voice-sound {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 12px;
}
.voice.has-video .voice-sound {
  display: inline-flex;
}
.voice-sound:hover,
.voice-sound.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.voice-sound .ico {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.voice-sound .ico .wave1,
.voice-sound .ico .wave2 {
  opacity: 0.35;
}
.voice-sound.is-on .ico .wave1,
.voice-sound.is-on .ico .wave2 {
  opacity: 1;
}
.voice-sound .off,
.voice-sound.is-on .on {
  display: inline;
}
.voice-sound .on,
.voice-sound.is-on .off {
  display: none;
}
.voice-grid {
  display: grid;
  gap: clamp(32px, 6vw, 96px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .voice-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}
.quote {
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.15;
  max-width: 16em;
}
.quote .ar {
  font-style: normal;
  font-weight: 400;
}
.quote-by {
  margin-top: 24px;
}
.testimonial {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
  max-width: 34em;
}
.testimonial .who {
  margin-top: 12px;
  color: var(--ink);
  font-size: 13px;
}

.player {
  background: var(--bg-raised);
  padding: 24px;
}
.player-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.player-head .name {
  font-family: 'Thmanyah Sans', var(--f-display);
  font-weight: 900;
  font-size: 26px;
  line-height: 1.2;
}
.player-embed {
  position: relative;
  min-height: 152px;
  background: var(--bg-sunken);
  display: grid;
  place-items: center;
}
.player-embed iframe {
  width: 100%;
  height: 352px;
  border: 0;
}
.episodes {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  direction: rtl;
}
.episodes li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 10px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.episodes li span:last-child {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--ink-3);
  direction: ltr;
}
.player-links {
  margin-top: 20px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Contact ----------------------------------------------------- */
.contact {
  background: var(--accent);
  color: var(--accent-ink);
  overflow: hidden;
}
.contact .label,
.contact .link {
  color: var(--accent-ink);
}
.contact .link {
  border-color: rgba(11, 27, 31, 0.3);
}
.contact .link:hover {
  border-color: var(--accent-ink);
}
.contact-title {
  font-size: clamp(48px, 10vw, 168px);
  max-width: 7.5em;
  line-height: 0.9;
}
.contact-grid {
  margin-top: clamp(40px, 6vw, 80px);
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.contact-grid ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-grid li a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-size: clamp(24px, 3vw, 40px);
  text-transform: uppercase;
  line-height: 1;
  transition: transform 0.4s var(--ease-out), opacity 0.4s var(--ease-out);
}
:root[dir='rtl'] .contact-grid li a {
  font-weight: 800;
  text-transform: none;
}
.contact-grid li a:hover {
  transform: translateX(8px);
}
:root[dir='rtl'] .contact-grid li a:hover {
  transform: translateX(-8px);
}
.contact-grid ul:hover li a:not(:hover) {
  opacity: 0.45;
}
.contact-grid li a small {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  opacity: 0.7;
}
.contact-place {
  font-size: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-photo {
  margin: 0 0 14px;
  width: min(100%, 240px);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: rgba(11, 27, 31, 0.15);
}
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  transition: filter 0.6s var(--ease-out);
}
.contact-photo:hover img {
  filter: grayscale(0);
}
.contact-place .big {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 40px);
  text-transform: uppercase;
  line-height: 1;
}
:root[dir='rtl'] .contact-place .big {
  font-weight: 800;
  text-transform: none;
}
.contact-marquee {
  margin-top: clamp(48px, 8vw, 120px);
  margin-inline: calc(-1 * var(--safe));
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(11, 27, 31, 0.25);
  padding-top: 8px;
}
.contact-marquee > span {
  display: inline-block;
  font-family: var(--f-display);
  font-size: clamp(120px, 22vw, 360px);
  line-height: 0.85;
  text-transform: uppercase;
  padding-inline-end: 0.35em;
  animation: ticker 28s linear infinite;
}
:root[dir='rtl'] .contact-marquee > span {
  animation-name: ticker-rtl;
  font-weight: 800;
  text-transform: none;
  line-height: 1.1;
}

/* ---------- Footer ------------------------------------------------------ */
.footer {
  padding-block: 28px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
:root[dir='rtl'] .footer {
  font-family: var(--f-body);
  letter-spacing: 0;
  font-size: 12px;
  text-transform: none;
}
.footer a:hover {
  color: var(--ink);
}
@media (min-width: 900px) {
  .footer {
    padding-bottom: 56px;
  }
}

/* ---------- Generic reveal --------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal='fade'] {
  transform: none;
}

/* ---------- Grain ------------------------------------------------------- */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 5500;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.6s steps(6) infinite;
  mix-blend-mode: overlay;
}
:root[data-theme='light'] .grain {
  opacity: 0.08;
  mix-blend-mode: multiply;
}
@keyframes grain {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-4%, 6%);
  }
  40% {
    transform: translate(5%, -3%);
  }
  60% {
    transform: translate(-6%, -5%);
  }
  80% {
    transform: translate(3%, 5%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ---------- Reduced motion --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html,
  html.is-ready {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .grain {
    display: none;
  }
  .loader {
    display: none;
  }
  .scrub .wi {
    transform: none;
    opacity: 1;
  }
  .voice-video {
    display: none;
  }
  [data-reveal],
  .edl tr.row,
  .receipt-line,
  .hero-meta .reveal-up {
    opacity: 1;
    transform: none;
  }
  .hero.has-gl .hero-title {
    opacity: 1;
  }
  .hero-gl {
    display: none;
  }
  .bignum .fill {
    clip-path: none;
  }
}