/* =========================================================================
   Fereshte Mohammadi — portfolio
   Dark, typographic, no framework. Logical properties throughout so the
   whole layout mirrors correctly when <html dir="rtl">.
   ========================================================================= */

/* ------------------------------------------------------------- 1. tokens */
:root {
  --ink:        #0a0908;
  --ink-1:      #100e0d;
  --ink-2:      #171513;
  --line:       #2a2624;
  --bone:       #ece7df;
  --bone-dim:   #a9a19a;
  --muted:      #6f6862;
  --gold:       #c8963e;
  --gold-soft:  #e0b872;

  --serif: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --fa:    "Vazirmatn", "Iran Sans", Tahoma, sans-serif;

  --gap:   clamp(0.75rem, 1.6vw, 1.5rem);
  --pad:   clamp(1.25rem, 5vw, 5.5rem);
  --rule:  1px solid var(--line);

  --ease:  cubic-bezier(.22, .61, .36, 1);
}

/* Persian swaps both faces for one that has the glyphs. */
html[lang="fa"] {
  --serif: var(--fa);
  --sans:  var(--fa);
}

/* -------------------------------------------------------------- 2. reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

/* The hidden attribute must win over any display rule below. */
[hidden] { display: none !important; }

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

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

h1, h2, h3 { font-weight: 300; margin: 0; }

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

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

.skip-link {
  position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
  z-index: 200; padding: .75rem 1.25rem;
  background: var(--gold); color: var(--ink);
  transition: inset-block-start .2s;
}
.skip-link:focus { inset-block-start: 1rem; }

/* ---------------------------------------------------- 3. shared typography */
.section {
  padding-inline: var(--pad);
  padding-block: clamp(4.5rem, 11vh, 9rem);
  position: relative;
}

.section--tight { padding-block-start: 0; }

/* Small tracked-out label that sits above each section heading. */
.eyebrow {
  font-family: var(--sans);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
html[lang="fa"] .eyebrow { letter-spacing: 0; text-transform: none; font-size: .8125rem; }

.h-display {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  font-weight: 300;
}
html[lang="fa"] .h-display { line-height: 1.35; letter-spacing: 0; }

.lead {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  color: var(--bone-dim);
  font-weight: 300;
}
html[lang="fa"] .lead { line-height: 1.9; }

/* ----------------------------------------------------------------- 4. nav */
.nav {
  position: fixed;
  inset-block-start: 0; inset-inline: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid transparent;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s var(--ease);
}
.nav.is-visible {
  transform: translateY(0);
  opacity: 1;
  border-block-end-color: var(--line);
}

.nav__name {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: .04em;
  white-space: nowrap;
}
html[lang="fa"] .nav__name { letter-spacing: 0; }

.nav__links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  align-items: center;
}

.nav__link {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bone-dim);
  padding-block: .35rem;
  border-block-end: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.nav__link:hover,
.nav__link.is-active { color: var(--bone); border-block-end-color: var(--gold); }
html[lang="fa"] .nav__link { text-transform: none; letter-spacing: 0; font-size: .9375rem; }

.lang {
  font-size: .75rem;
  letter-spacing: .12em;
  color: var(--bone-dim);
  border: var(--rule);
  border-radius: 999px;
  padding: .3rem .85rem;
  transition: color .25s, border-color .25s;
}
.lang:hover { color: var(--gold-soft); border-color: var(--gold); }

@media (max-width: 640px) {
  .nav__links { gap: .9rem; }
  .nav__link  { font-size: .6875rem; letter-spacing: .06em; }
  .nav__name  { font-size: .9375rem; }
}
@media (max-width: 430px) {
  .nav__link[data-optional] { display: none; }
}

/* ---------------------------------------------------------------- 5. hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  padding: var(--pad);
  padding-block-end: clamp(3rem, 9vh, 6rem);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media picture { display: contents; }
.hero__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* object-position is set from content.js (hero.image.focus). */
  /* The hero photograph is already graded; the gradients below handle
     legibility, so no filter here (the 3D canvas couldn't match one anyway). */
  transform: scale(1.06);
  animation: heroDrift 26s var(--ease) forwards;
}
@keyframes heroDrift { to { transform: scale(1); } }

/* 3D stage (assets/js/hero3d.js). The still photo is hidden while the canvas
   takes over, and comes straight back if WebGL isn't available. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero__canvas.is-ready { opacity: 1; }
.hero.has-3d .hero__media img { opacity: 0; }
.hero.has-3d .hero__inner { will-change: transform, opacity; }

/* Vignette + floor gradient so text always has something to sit on. */
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(115% 75% at 62% 34%, transparent 22%, rgba(10,9,8,.42) 72%, rgba(10,9,8,.72) 100%),
    linear-gradient(to bottom, rgba(10,9,8,.62) 0%, transparent 22%, transparent 42%, rgba(10,9,8,.88) 88%, var(--ink) 100%);
}

.hero__inner { position: relative; z-index: 1; max-width: 60rem; }

.hero__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.75rem, 11.5vw, 9.5rem);
  line-height: .92;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
html[lang="fa"] .hero__name { line-height: 1.25; letter-spacing: 0; }

.hero__name em {
  display: block;
  font-style: italic;
  color: var(--gold-soft);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 1.5rem;
  margin-block-start: 1.5rem;
  font-size: .8125rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
html[lang="fa"] .hero__meta { text-transform: none; letter-spacing: 0; font-size: .9375rem; }

.hero__scroll {
  position: absolute;
  inset-block-end: 1.75rem;
  inset-inline-end: var(--pad);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .625rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 3rem;
  background: linear-gradient(to bottom, var(--muted), transparent);
  animation: scrollPulse 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(.35); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1;  }
}
html[lang="fa"] .hero__scroll { letter-spacing: 0; text-transform: none; font-size: .75rem; }
@media (max-width: 640px) { .hero__scroll { display: none; } }

/* hero.textSide: "right" — physical right in both languages, because it's
   about where the subject stands in the photo, not reading direction. */
.hero--text-right .hero__inner {
  justify-self: stretch;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
.hero--text-right .hero__meta { display: grid; justify-items: end; gap: .35rem; }
/* Centred: the right holds the name, the lower left holds the radio. */
.hero--text-right .hero__scroll { right: auto; left: 50%; transform: translateX(-50%); }
.hero--text-right .hero__media::after {
  background:
    radial-gradient(70% 90% at 30% 42%, transparent 35%, rgba(10,9,8,.35) 100%),
    linear-gradient(to left, rgba(10,9,8,.55) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(10,9,8,.45) 0%, transparent 20%, transparent 55%, rgba(10,9,8,.85) 92%, var(--ink) 100%);
}

/* On a phone the hero is a tall crop of a landscape photo, so the scrim
   has to work harder to keep the name legible over whatever lands there. */
@media (max-width: 640px) {
  .hero__media::after {
    background:
      radial-gradient(120% 55% at 55% 32%, transparent 20%, rgba(10,9,8,.35) 75%, rgba(10,9,8,.6) 100%),
      linear-gradient(to bottom, rgba(10,9,8,.55) 0%, transparent 25%, transparent 38%, rgba(10,9,8,.9) 82%, var(--ink) 100%);
  }
}

/* ----------------------------------------------------------------- 6. bio */
.bio__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: start;
}
@media (max-width: 860px) {
  .bio__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.bio__portrait {
  position: relative;
  align-self: start;
}
.bio__portrait picture { display: contents; }
.bio__portrait img {
  width: 100%;
  /* height:auto is required — the width/height attributes act as a
     presentational hint and would otherwise force the natural pixel height. */
  height: auto;
  /* No fixed aspect-ratio: app.js sets width/height from the photo's true size,
     so any portrait keeps its own shape (a hard-coded ratio cropped new ones). */
  object-fit: cover;
  filter: grayscale(.15) contrast(1.04);
  transition: filter .8s var(--ease);
}
.bio__portrait:hover img { filter: grayscale(0) contrast(1); }

/* Thin gold rule offset behind the portrait — a small editorial flourish. */
.bio__portrait::before {
  content: "";
  position: absolute;
  inset-block: -.75rem;
  inset-inline-start: -.75rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--gold), transparent);
  opacity: .5;
}

.bio__text { max-width: 42rem; }
.bio__text p {
  margin: 0 0 1.35em;
  color: var(--bone-dim);
}
.bio__text p:first-of-type {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.45;
  color: var(--bone);
}
html[lang="fa"] .bio__text p:first-of-type { line-height: 1.85; }
.bio__text em { color: var(--bone); font-style: italic; }
html[lang="fa"] .bio__text em { font-style: normal; color: var(--gold-soft); }

.facts {
  margin-block-start: 2.5rem;
  border-block-start: var(--rule);
}
.facts__row {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) 3fr;
  gap: 1rem;
  padding-block: .85rem;
  border-block-end: var(--rule);
  font-size: .875rem;
}
.facts__key {
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .6875rem;
}
html[lang="fa"] .facts__key { letter-spacing: 0; text-transform: none; font-size: .8125rem; }

/* ------------------------------------------------------------- 7. credits */
.credits__list { border-block-start: var(--rule); }

.credit {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) 5rem;
  gap: clamp(.75rem, 2vw, 2rem);
  align-items: start;
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-block-end: var(--rule);
  transition: background-color .4s var(--ease);
}
.credit:hover { background: var(--ink-1); }

.credit__art {
  width: 4.5rem;
  border: var(--rule);
}
.credit__art picture { display: contents; }
.credit__art img { width: 100%; height: auto; object-fit: cover; }

.credit__title {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  line-height: 1.15;
}
html[lang="fa"] .credit__title { line-height: 1.5; }

.credit__note {
  display: block;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--muted);
  margin-block-start: .35rem;
  line-height: 1.6;
}
.credit__note em { font-style: italic; color: var(--bone-dim); }

.credit__cell { font-size: .9375rem; color: var(--bone-dim); }
.credit__year { font-variant-numeric: tabular-nums; color: var(--muted); text-align: end; }

/* Column headers, hidden on narrow screens where the layout stacks. */
.credits__head {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 5fr) minmax(0, 3fr) minmax(0, 3fr) 5rem;
  gap: clamp(.75rem, 2vw, 2rem);
  padding-block: .75rem;
  font-size: .625rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  border-block-end: var(--rule);
}
html[lang="fa"] .credits__head { letter-spacing: 0; text-transform: none; font-size: .75rem; }

.credit__award {
  grid-column: 2 / -1;
  margin-block-start: .85rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--gold-soft);
  display: flex;
  align-items: center;
  gap: .6rem;
}
.credit__award::before {
  content: "";
  width: 1.5rem; height: 1px;
  background: var(--gold);
  flex: none;
}

@media (max-width: 780px) {
  .credits__head { display: none; }
  .credit {
    grid-template-columns: 3.5rem 1fr;
    row-gap: .3rem;
  }
  .credit__art { width: 3.5rem; grid-row: 1 / span 4; }
  .credit__cell, .credit__year { text-align: start; font-size: .875rem; }
  .credit__award { grid-column: 2; }
}

/* ------------------------------------------------------------- 8. gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}

.shot {
  grid-column: span var(--span, 6);
  margin: 0;
  position: relative;
  cursor: zoom-in;
  /* reveal-on-scroll starting state */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.shot.is-in { opacity: 1; transform: none; }

/* Nudge every third item down a little so rows never march in lockstep. */
.shot--offset { margin-block-start: clamp(1rem, 4vw, 3.5rem); }

.shot__frame {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
  aspect-ratio: var(--ar, 3 / 2);
}
.shot__frame picture { display: contents; }
.shot__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .6s var(--ease);
  filter: brightness(1.04);
}
.shot:hover .shot__frame img { transform: scale(1.06); filter: brightness(1.15); }

/* Index number, revealed on hover. */
.shot__num {
  position: absolute;
  inset-block-end: .7rem;
  inset-inline-end: .8rem;
  font-size: .625rem;
  letter-spacing: .18em;
  color: var(--bone);
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .35s;
  font-variant-numeric: tabular-nums;
}
.shot:hover .shot__num { opacity: .85; }

@media (max-width: 900px) {
  /* Two up, then the bands stay full width. */
  .shot { grid-column: span 6; }
  .shot[data-band="true"] { grid-column: 1 / -1; }
  .shot--offset { margin-block-start: 0; }
}
@media (max-width: 560px) {
  .shot, .shot[data-band="true"] { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------ 9. lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgba(6, 5, 5, .97);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.lb.is-open { opacity: 1; pointer-events: auto; }

.lb__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad);
  font-size: .75rem;
  letter-spacing: .16em;
  color: var(--bone-dim);
}
.lb__count { font-variant-numeric: tabular-nums; }

.lb__stage {
  --lb-gutter: clamp(.5rem, 4vw, 4rem);
  position: relative;
  min-height: 0;
  overflow: hidden;
}
/* Absolutely positioned so max-width/max-height measure against the stage
   itself. As a grid item, max-height: 100% was circular and ignored: a tall
   photo grew the row past the screen and sat hundreds of pixels too low.
   inset: 0 + margin: auto centres it exactly, whatever its shape. */
.lb__img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--lb-gutter));
  max-height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lb__img.is-ready { opacity: 1; }

.lb__nav {
  position: absolute;
  z-index: 1;               /* stay clickable above a wide photo */
  inset-block: 0;
  width: clamp(3rem, 12vw, 8rem);
  display: grid;
  place-items: center;
  color: var(--bone-dim);
  transition: color .25s, background-color .25s;
}
.lb__nav:hover { color: var(--bone); background: rgba(255,255,255,.03); }
.lb__nav--prev { inset-inline-start: 0; }
.lb__nav--next { inset-inline-end: 0; }
.lb__nav svg { width: 1.5rem; height: 1.5rem; }
/* Arrows point the correct way in RTL. */
html[dir="rtl"] .lb__nav svg { transform: scaleX(-1); }

.lb__foot {
  padding: 1rem var(--pad) 1.75rem;
  text-align: center;
  font-size: .875rem;
  color: var(--bone-dim);
  min-height: 3.5rem;
}

.lb__close {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color .25s;
}
.lb__close:hover { color: var(--gold-soft); }
html[lang="fa"] .lb__close { text-transform: none; letter-spacing: 0; }

@media (max-width: 640px) {
  .lb__nav { width: 20%; }
}

/* --------------------------------------------------------------- 10. reel */
/* Four columns: an upright clip takes one (a quarter), a landscape clip two
   (half). Set by app.js from each clip's w/h, or by `span` in content.js. */
.reel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
  /* Without this, a vertical clip stretches every clip beside it to match. */
  align-items: start;
}
.clip[data-span="2"] { grid-column: span 2; }
.clip[data-span="3"] { grid-column: span 3; }
.clip[data-span="4"] { grid-column: 1 / -1; }

/* Tablet: two columns — upright clips side by side, landscape full width. */
@media (max-width: 900px) {
  .reel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clip[data-span="3"], .clip[data-span="4"] { grid-column: 1 / -1; }
}
/* Phone: one clip per row. */
@media (max-width: 560px) {
  .reel { grid-template-columns: 1fr; }
  .clip[data-span] { grid-column: 1 / -1; }
}

.clip {
  position: relative;
  margin: 0;
  background: var(--ink-2);
  border: var(--rule);
  overflow: hidden;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), border-color .4s;
}
.clip.is-in { opacity: 1; transform: none; }
.clip:hover { border-color: #3b3531; }

/* A vertical clip gets a taller frame than a landscape one. */
.clip__frame {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  background: #000;
}
.clip__frame img,
.clip__frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}
.clip__frame img { object-fit: cover; filter: brightness(.88); transition: filter .5s, transform 1s var(--ease); }
.clip:hover .clip__frame img { filter: brightness(1.05); transform: scale(1.02); }

.clip.is-playing .clip__poster,
.clip.is-playing .clip__play { display: none; }

.clip__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: .75rem;
  color: var(--bone);
}
.clip__play span {
  display: grid; place-items: center;
  width: clamp(3.25rem, 7vw, 4.5rem);
  aspect-ratio: 1;
  border: 1px solid rgba(236,231,223,.5);
  border-radius: 50%;
  transition: background-color .35s var(--ease), border-color .35s, transform .35s var(--ease);
}
.clip:hover .clip__play span {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  transform: scale(1.06);
}
.clip__play svg { width: 1.1rem; height: 1.1rem; margin-inline-start: .15rem; }
html[dir="rtl"] .clip__play svg { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: .15rem; }

.clip__cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.1rem 1.1rem;
  font-size: .875rem;
}
.clip__dur { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .75rem; }

/* Warning badge for the HEVC files that browsers can't decode yet. */
.clip__warn {
  position: absolute;
  inset-block-start: .6rem; inset-inline-start: .6rem;
  z-index: 2;
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(200,150,62,.92);
  color: var(--ink);
  padding: .25rem .55rem;
}
html[lang="fa"] .clip__warn { text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------------ 10b. press */
.press__feature {
  margin: 0 0 clamp(2.5rem, 6vw, 4.5rem);
  max-width: 52rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.press__feature.is-in { opacity: 1; transform: none; }

.press__quote {
  position: relative;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.6vw, 2.75rem);
  line-height: 1.3;
  font-weight: 300;
  font-style: italic;
  color: var(--bone);
  text-wrap: balance;
}
/* Persian has no italic tradition; set it upright in Vazirmatn instead. */
.press__quote:lang(fa) {
  font-family: var(--fa);
  font-style: normal;
  line-height: 1.8;
  font-size: clamp(1.35rem, 3vw, 2.2rem);
}
.press__quote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -.35em;
  inset-inline-start: -.05em;
  font-family: var(--serif);
  font-style: normal;
  font-size: 4em;
  line-height: 1;
  color: var(--gold);
  opacity: .22;
  pointer-events: none;
}
.press__quote:lang(fa)::before { content: "\00AB"; inset-block-start: -.5em; }

.press__cite {
  margin-block-start: 1.25rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .75rem;
}
.press__cite::before { content: ""; width: 2rem; height: 1px; background: var(--gold); }
.press__cite a { color: var(--bone-dim); border-block-end: 1px solid var(--line); transition: color .3s, border-color .3s; }
.press__cite a:hover { color: var(--gold-soft); border-block-end-color: var(--gold); }
html[lang="fa"] .press__cite { letter-spacing: 0; text-transform: none; font-size: .875rem; }

.press__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: var(--rule);
}

.press__item {
  border-block-end: var(--rule);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.press__item.is-in { opacity: 1; transform: none; }

.press__row {
  display: grid;
  grid-template-columns: minmax(8rem, 2fr) minmax(0, 7fr) auto;
  gap: clamp(.75rem, 2.5vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.25rem, 2.6vw, 1.9rem);
  padding-inline: .25rem;
  transition: background-color .4s var(--ease);
}
a.press__row:hover { background: var(--ink-1); }

.press__outlet {
  font-size: .6875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
html[lang="fa"] .press__outlet { letter-spacing: 0; text-transform: none; font-size: .8125rem; }

.press__main { display: grid; gap: .4rem; min-width: 0; }

.press__title {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.3;
  color: var(--bone);
  transition: color .3s;
}
/* A Persian headline gets Persian type even on the English page. */
.press__title:lang(fa) { font-family: var(--fa); line-height: 1.75; font-size: clamp(1.05rem, 1.9vw, 1.35rem); }
.press__title:lang(en) { font-family: "Cormorant Garamond", "Iowan Old Style", Palatino, Georgia, serif; }
a.press__row:hover .press__title { color: var(--gold-soft); }

.press__meta {
  font-size: .8125rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.press__dot { margin-inline: .55rem; opacity: .6; }
.press__by :lang(fa) { font-family: var(--fa); }

.press__go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}
.press__go svg { width: .95rem; height: .95rem; transition: transform .35s var(--ease); }
html[dir="rtl"] .press__go svg { transform: scaleX(-1); }
a.press__row:hover .press__go { color: var(--gold-soft); }
a.press__row:hover .press__go svg { transform: translate(2px, -2px); }
html[dir="rtl"] a.press__row:hover .press__go svg { transform: scaleX(-1) translate(2px, -2px); }
html[lang="fa"] .press__go { letter-spacing: 0; text-transform: none; font-size: .875rem; }

/* ---- a row with an interview clip ---- */
.press__row--video {
  grid-template-columns: clamp(9rem, 16vw, 13rem) minmax(7rem, 1.6fr) minmax(0, 6fr) auto;
  align-items: center;
}

.press__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 16 / 9);
  overflow: hidden;
  background: #000;
  border: var(--rule);
  cursor: pointer;
}
/* Poster <picture> wrappers must not add a box of their own. */
.clip__frame picture,
.press__thumb picture { display: contents; }

.press__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.8);
  transition: filter .5s var(--ease), transform 1s var(--ease);
}
.press__thumb:hover img { filter: brightness(1); transform: scale(1.04); }

.press__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--bone);
}
.press__play svg {
  width: 2.5rem; height: 2.5rem;
  padding: .7rem .6rem .7rem .8rem;
  border: 1px solid rgba(236,231,223,.55);
  border-radius: 50%;
  box-sizing: border-box;
  transition: background-color .35s var(--ease), border-color .35s, color .35s;
}
.press__thumb:hover .press__play svg { background: var(--gold); border-color: var(--gold); color: var(--ink); }
html[dir="rtl"] .press__play svg { transform: scaleX(-1); }

.press__dur {
  position: absolute;
  inset-block-end: .4rem; inset-inline-end: .45rem;
  padding: .1rem .4rem;
  font-size: .6875rem;
  font-variant-numeric: tabular-nums;
  background: rgba(10,9,8,.75);
  color: var(--bone-dim);
}

/* While a clip is open its thumbnail steps back; the player below takes over. */
.press__item.is-playing .press__thumb img { filter: brightness(.35) grayscale(.6); }
.press__item.is-playing .press__play { opacity: 0; }

.press__title--link { transition: color .3s; }
.press__title--link:hover { color: var(--gold-soft); }

.press__actions {
  display: grid;
  justify-items: end;
  gap: .6rem;
}
.press__watch { cursor: pointer; }
.press__watch svg { width: .8rem; height: .8rem; }
.press__watch:hover, a.press__go:hover { color: var(--gold-soft); }
.press__actions a.press__go:hover svg { transform: translate(2px, -2px); }
html[dir="rtl"] .press__watch svg { transform: scaleX(-1); }

.press__player {
  padding-block: 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 60rem;
  margin-inline-start: calc(clamp(9rem, 16vw, 13rem) + clamp(.75rem, 2.5vw, 2.5rem));
}
.press__player video {
  display: block;
  width: 100%;
  background: #000;
  border: var(--rule);
}

@media (max-width: 900px) {
  .press__row.press__row--video { grid-template-columns: clamp(8rem, 30vw, 11rem) minmax(0, 1fr); row-gap: .6rem; }
  .press__row.press__row--video .press__thumb { grid-row: 1 / span 3; align-self: start; }
  .press__row.press__row--video .press__outlet,
  .press__row.press__row--video .press__main,
  .press__row.press__row--video .press__actions { grid-column: 2; }
  .press__row.press__row--video .press__actions { justify-items: start; grid-auto-flow: column; justify-content: start; gap: 1.25rem; }
  .press__player { margin-inline-start: 0; }
}

@media (max-width: 720px) {
  .press__row { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .press__outlet { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .press__row.press__row--video { grid-template-columns: 1fr; }
  .press__row.press__row--video .press__thumb { grid-row: auto; }
  .press__row.press__row--video .press__outlet,
  .press__row.press__row--video .press__main,
  .press__row.press__row--video .press__actions { grid-column: 1; }
}

/* ---------------------------------------------------------- 11. instagram */
.ig__strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .5rem;
  margin-block-start: 2rem;
}
.ig__cell {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--ink-2);
}
.ig__cell picture { display: contents; }
.ig__cell img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(.35) brightness(.95);
  transition: filter .5s var(--ease), transform 1s var(--ease);
}
.ig__cell:hover img { filter: none; transform: scale(1.05); }

@media (max-width: 720px) { .ig__strip { grid-template-columns: repeat(3, 1fr); } }

.ig__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-block-start: 1.75rem;
  font-size: .8125rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  border-block-end: 1px solid var(--line);
  padding-block-end: .35rem;
  transition: color .3s, border-color .3s;
}
.ig__cta:hover { color: var(--gold-soft); border-block-end-color: var(--gold); }
.ig__cta svg { width: 1rem; height: 1rem; }
html[lang="fa"] .ig__cta { text-transform: none; letter-spacing: 0; font-size: .9375rem; }

/* ------------------------------------------------------------ 12. contact */
.contact__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-block-start: 2.5rem;
}
.contact__block h3 {
  font-size: .625rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-block-end: .75rem;
}
html[lang="fa"] .contact__block h3 { letter-spacing: 0; text-transform: none; font-size: .8125rem; }

.contact__mail {
  font-family: var(--serif);
  font-size: clamp(1rem, 3vw, 1.5rem);
  color: var(--bone);
  border-block-end: 1px solid var(--line);
  transition: border-color .35s, color .35s;
  word-break: break-word;
}
.contact__mail:hover { color: var(--gold-soft); border-block-end-color: var(--gold); }

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 2rem var(--pad) 3rem;
  border-block-start: var(--rule);
  font-size: .75rem;
  color: var(--muted);
}
.footer a:hover { color: var(--bone-dim); }

/* --------------------------------------------------- 13. reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  /* Never leave reveal-on-scroll elements stuck invisible. */
  .shot, .clip, .press__item, .press__feature { opacity: 1 !important; transform: none !important; }
  .hero__media img { transform: none; }
}

/* --------------------------------------------------------------- 14. print */
@media print {
  .nav, .hero__scroll, .lb, .ig__strip { display: none !important; }
  body { background: #fff; color: #000; }
}