/* ============================================================
   OMID IZADI — omidizadiart.com
   DARK MODE. Palette drawn from the four Iranian Series oils and
   the flag, deliberately desaturated: green, white and red never
   shout — they sit in the background as material, not as flag.
   Gold is the only thing allowed to gleam.
   ============================================================ */

:root {
  /* --- ground --- */
  --bg:         #0E0C0A;   /* deep warm black — the wall of a dim gallery */
  --bg-2:       #14110E;   /* alternating section */
  --bg-3:       #1A1511;   /* raised card */
  --bg-4:       #221B15;   /* raised card, hover */
  --bg-deep:    #080706;   /* footer / lightbox */

  /* --- ink (now light) --- */
  --ink:        #EFE5D3;   /* primary text — warm cream, the flag's white */
  --ink-2:      #D5C7AF;   /* body copy */
  --ink-soft:   #9E8D77;   /* meta, captions */
  --ink-faint:  #6E6151;

  /* --- gold: the one luminous accent --- */
  --gold:       #C6A05C;
  --gold-2:     #A98040;
  --gold-bright:#E3C489;
  --gold-dim:   #7A5F30;

  /* --- flag, desaturated into the background --- */
  --red:        #A8544A;   /* carpet-shop red, dusted down */
  --red-deep:   #7E3A32;
  --green:      #566E5C;   /* pistachio green, greyed */
  --green-deep: #3A4A3E;
  --white-flag: #E8DFCC;

  /* --- painting-derived --- */
  --teal:       #47756C;   /* the Baluchi shawl */
  --rust:       #B96A47;   /* teahouse amber */

  /* --- lines --- */
  --line:       rgba(198,160,92,.16);
  --line-soft:  rgba(239,229,211,.09);
  --line-strong:rgba(198,160,92,.34);

  --serif-display: 'Marcellus', serif;
  --serif-body: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
  --farsi: 'Vazirmatn', sans-serif;
  --on-gold:    #120E0A;   /* text on a gold fill; flips per direction */
  --shadow:     28,16,8;   /* dark brown, as rgb triples for rgba() */
  --ease: cubic-bezier(.22,.8,.24,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background: var(--bg); }
body {
  font-family: var(--serif-body);
  background: var(--bg);
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { max-width:100%; display:block; }
a { color:inherit; }
::selection { background: var(--gold); color:var(--on-gold); }

/* Focus visibility — keyboard users must never be lost on a dark page */
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

/* ---------- utilities ---------- */
.wrap { max-width:1280px; margin:0 auto; padding:0 clamp(20px, 4vw, 56px); }
.kicker {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  display:flex; align-items:center; gap:14px;
}
.kicker .fa {
  font-family: var(--farsi);
  font-size: 14px;
  letter-spacing: 0;
  text-transform:none;
  color: var(--ink-soft);
  font-weight: 400;
}

/* tri-stripe hairline — the flag, whispered */
.stripe {
  width: 64px; height: 5px; border-radius:1px; overflow:hidden;
  display:flex; flex-direction:column; flex:0 0 auto;
}
.stripe i { flex:1; display:block; }
.stripe i:nth-child(1){ background: var(--green); }
.stripe i:nth-child(2){ background: var(--ink-faint); }
.stripe i:nth-child(3){ background: var(--red); }

h1,h2,h3 { font-family: var(--serif-display); font-weight:400; line-height:1.12; color: var(--ink); }
h2 { font-size: clamp(34px, 4.6vw, 58px); letter-spacing:.01em; }
h3 { font-size: clamp(22px, 2.4vw, 30px); }

.section { padding: clamp(84px, 10vw, 150px) 0; position:relative; }
.section-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 820px; }
.section-head h2 { margin: 18px 0 16px; }
.section-head p.lede { font-size: clamp(19px, 1.6vw, 23px); color: var(--ink-soft); max-width: 640px; }

/* alternating darker band — SOLID. The girih tile is retired: pattern was
   reading as wallpaper across half the page. Colour now separates rooms. */
.dark { background: var(--bg-2); }
/* hairline seams between sections so the darks read as separate rooms */
.dark { border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }

/* ---------- THE BUTTON ----------
   One shape for every button on the site: a painted stroke. A scanned
   brush PNG masks a coloured layer behind the label, so the silhouette
   is real brushwork and the colour still comes from the palette. The
   paint deliberately overhangs the box; the label sits well inside it.
   Chosen in the design lab; baked here so it cannot switch off. */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--sans); font-size:12.5px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  padding: 19px 44px;
  border:0; background:none;
  color: var(--on-gold);
  text-decoration:none;
  white-space:nowrap; line-height:1.15;
  position:relative; isolation:isolate;
  transition: transform .35s var(--ease);
  cursor:pointer;
}
.btn::before {
  content:""; position:absolute; inset:-10px -18px; z-index:-1;
  background: var(--gold);
  -webkit-mask:url("../brushes/brush-flat.png") center/100% 100% no-repeat;
          mask:url("../brushes/brush-flat.png") center/100% 100% no-repeat;
  transition: background .3s var(--ease), transform .35s var(--ease);
}
/* a drier second pass smudged underneath — real paint is layered */
.btn::after {
  content:""; position:absolute; inset:-13px -24px; z-index:-2; opacity:.3;
  background: var(--gold);
  -webkit-mask:url("../brushes/brush-dry.png") center/100% 100% no-repeat;
          mask:url("../brushes/brush-dry.png") center/100% 100% no-repeat;
  transform: rotate(-.6deg);
}
.btn:hover { transform: translateY(-2px) rotate(-.4deg); color:var(--ink); }
.btn:hover::before { background: var(--red); transform: scale(1.03,1.08); }
/* solid = the loaded stroke in cream; quiet variant drops the underlayer */
.btn.solid { color: var(--bg); }
.btn.solid::before { background: var(--ink); }
.btn.solid:hover { color: var(--ink); }
.btn.solid:hover::before { background: var(--red); }
.btn:not(.solid)::after { display:none; }
.btn[disabled] { opacity:.5; pointer-events:none; }

/* reveal on scroll */
.rv { opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity:1; transform:none; }

/* ============ NAV ============ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  border-bottom:1px solid var(--line-soft);
  transition: transform .4s var(--ease);
}
.nav-inner {
  max-width:1380px; margin:0 auto;
  padding: 0 clamp(20px,3vw,40px);
  height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.wordmark {
  font-family: var(--serif-display);
  font-size:21px; letter-spacing:.14em;
  text-decoration:none; color: var(--ink);
  display:flex; align-items:baseline; gap:12px;
}
.wordmark .fa { font-family:var(--farsi); font-size:13px; color:var(--gold); letter-spacing:0; }
.brand-mark { height:38px; width:auto; display:block; align-self:center; }
.nav-links { display:flex; gap: clamp(16px,2.4vw,34px); align-items:center; }
.nav-links a {
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:.3s;
}
.nav-links a:hover { color:var(--gold-bright); }
.nav-cta {
  font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; text-decoration:none;
  border:0; background:none; color:var(--on-gold);
  padding:13px 26px; flex:0 0 auto;
  white-space:nowrap; line-height:1.15;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; isolation:isolate;
  transition: transform .3s var(--ease);
}
.nav-cta::before {
  content:""; position:absolute; inset:-7px -12px; z-index:-1;
  background:var(--gold-bright);
  /* the loaded brush, oversized: at this small scale only the dense centre
     of the stroke is visible, so the label always sits on solid paint */
  -webkit-mask:url("../brushes/brush-loaded.png") center/118% 150% no-repeat;
          mask:url("../brushes/brush-loaded.png") center/118% 150% no-repeat;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.nav-cta:hover { transform: translateY(-1px) rotate(-.4deg); color:var(--ink); }
.nav-cta:hover::before { background:var(--red); transform:scale(1.04,1.1); }
@media (max-width:1180px){ .nav-cta { padding-left:16px; padding-right:16px; letter-spacing:.12em; } }
.nav-burger { display:none; }

/* ============ HERO ============ */
.hero {
  min-height:100vh;
  display:grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  position:relative;
  background:
    radial-gradient(ellipse at 12% 40%, rgba(198,160,92,.07), transparent 60%),
    var(--bg);
}
.hero-copy {
  display:flex; flex-direction:column; justify-content:center;
  padding: clamp(120px,14vh,180px) clamp(28px,4.5vw,72px) clamp(60px,8vh,100px);
}
.hero-copy .kicker { margin-bottom:26px; }
.hero-copy h1 {
  font-size: clamp(44px, 4.8vw, 74px);
  line-height:1.08;
  margin-bottom: 26px;
  color: var(--ink);
}
.hero-copy h1 em { font-style:italic; font-family:var(--serif-body); color:var(--rust); }
.hero-copy .sub {
  font-size: clamp(19px,1.55vw,22px);
  color: var(--ink-soft);
  max-width: 520px;
  margin-bottom: 40px;
}
.hero-ctas { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px; }
.hero-strip {
  display:flex; gap: clamp(24px,3vw,48px); flex-wrap:wrap;
  border-top:1px solid var(--line);
  padding-top:28px;
}
.hstat .n {
  font-family:var(--serif-display);
  font-size: clamp(26px,2.4vw,34px);
  color: var(--gold-bright);
  display:block; line-height:1;
}
.hstat .l {
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  margin-top:8px; display:block;
}
.hero-art { position:relative; overflow:hidden; min-height:60vh; background: var(--bg-deep); }
.hero-art img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 28%;
  transform: scale(1.06);
  animation: heroDrift 26s var(--ease) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate(0,0); }
  to   { transform: scale(1.12) translate(-1.6%, -1.2%); }
}
/* feather the painting into the dark page instead of cutting it */
.hero-art::before {
  content:""; position:absolute; inset:0; z-index:2;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 9%, transparent 26%),
    linear-gradient(0deg, color-mix(in srgb, var(--bg) 45%, transparent) 0%, transparent 24%);
}
.hero-art::after {
  content:""; position:absolute; left:0; top:0; bottom:0; width:1px; z-index:3;
  background: linear-gradient(180deg, transparent, var(--gold-2) 30%, var(--gold-2) 70%, transparent);
}
.hero-art .caption {
  position:absolute; right:22px; bottom:20px; z-index:4;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(239,229,211,.9);
  background: rgba(8,7,6,.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border:1px solid var(--line-soft);
  padding:8px 14px;
}

/* ============ STAT BAND ============ */
.stats-band { padding: clamp(64px,7vw,96px) 0; }
.stats-grid {
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px,3vw,40px);
  text-align:center;
}
.stat .n {
  font-family: var(--serif-display);
  font-size: clamp(40px, 4.4vw, 62px);
  color: var(--gold-bright);
  display:block; line-height:1;
}
.stat .l {
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); margin-top:14px; display:block; line-height:1.7;
}
.stats-note {
  text-align:center; margin-top: clamp(36px,4vw,56px);
  font-size:19px; color:var(--ink-soft); font-style:italic;
}
.stats-note b { color:var(--ink); font-weight:500; font-style:normal; }

/* ============ IRANIAN SERIES ============ */
.iranian { background: var(--bg); }
.ir-piece {
  display:grid;
  grid-template-columns: minmax(0,56fr) minmax(0,44fr);
  gap: clamp(32px,5vw,84px);
  align-items:center;
  padding: clamp(44px,5.5vw,84px) 0;
}
.ir-piece + .ir-piece { border-top:1px solid var(--line-soft); }
.ir-piece:nth-child(even) .ir-art { order:2; }
.ir-art { position:relative; }
/* a lit frame on a dark wall */
.ir-art .frame {
  position:relative;
  padding: clamp(10px,1.2vw,16px);
  background: linear-gradient(160deg, var(--bg-4), var(--bg-2));
  border:1px solid var(--line-strong);
  box-shadow: 0 40px 90px -34px rgba(var(--shadow),.72), 0 0 0 1px rgba(var(--shadow),.34);
}
.ir-art .frame::before, .ir-art .frame::after {
  content:""; position:absolute; width:26px; height:26px; z-index:2;
  border-color: var(--gold); border-style:solid;
}
.ir-art .frame::before { top:-1px; left:-1px; border-width:1px 0 0 1px; }
.ir-art .frame::after { bottom:-1px; right:-1px; border-width:0 1px 1px 0; }
.ir-art img { width:100%; height:auto; cursor:zoom-in; transition: opacity .3s; }
.ir-art img:hover { opacity:.93; }
.ir-info .num {
  font-family: var(--serif-display);
  font-size:15px; letter-spacing:.3em; color:var(--gold);
  display:block; margin-bottom:18px;
}
.ir-info h3 { font-size: clamp(28px,2.8vw,40px); margin-bottom:14px; }
.ir-meta {
  font-family: var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; gap:18px; flex-wrap:wrap;
  margin-bottom:22px;
}
.ir-meta span + span::before { content:"·"; margin-right:18px; color:var(--gold); }
.ir-info p.st { color: var(--ink-2); max-width:52ch; margin-bottom:30px; }
.inquire-link {
  font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase;
  text-decoration:none; color:var(--gold);
  display:inline-flex; align-items:center; gap:10px;
  border:0;                     /* it is a <button>; kill the UA box entirely */
  padding:0 0 14px;
  position:relative;
  transition:.3s; background:none; cursor:pointer;
}
.inquire-link::before {
  content:""; position:absolute; left:-10px; right:-10px; bottom:-2px; height:10px;
  background:var(--gold);
  -webkit-mask:url("../brushes/brush-sweep.png") center/100% 100% no-repeat;
          mask:url("../brushes/brush-sweep.png") center/100% 100% no-repeat;
  transition: background .3s var(--ease);
}
.inquire-link:hover { color:var(--gold-bright); gap:16px; }
.inquire-link:hover::before { background:var(--red); }
.inquire-link::after { content:"→"; transition: inherit; }

/* ============ ANTHRO ============ */
.anthro-scroller {
  display:grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(240px, 24vw, 330px);
  gap: clamp(14px,1.6vw,24px);
  overflow-x:auto;
  padding: 6px 6px 26px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.anthro-scroller::-webkit-scrollbar { height:6px; }
.anthro-scroller::-webkit-scrollbar-thumb { background:var(--gold-dim); }
.anthro-card {
  scroll-snap-align:start;
  position:relative; cursor:zoom-in;
  background: var(--bg-3);
  padding:10px 10px 16px;
  border:1px solid var(--line);
  box-shadow: 0 22px 50px -26px rgba(var(--shadow),.72);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.anthro-card:hover {
  transform: translateY(-8px);
  border-color: var(--line-strong);
  box-shadow: 0 34px 70px -26px rgba(var(--shadow),.8);
}
.anthro-card .ph { aspect-ratio: 10/13; overflow:hidden; background:var(--bg-deep); }
.anthro-card img { width:100%; height:100%; object-fit:cover; transition: transform 6s var(--ease); }
.anthro-card:hover img { transform: scale(1.07); }
.anthro-card .t {
  font-family: var(--serif-display); font-size:16px; color:var(--ink);
  margin-top:14px; text-align:center; letter-spacing:.04em;
}
.anthro-card .m {
  font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft); text-align:center; margin-top:4px;
}

/* ============ COLLECTION GRID (brik-style) ============ */
.collection { background: var(--bg); }
.filters {
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom: clamp(28px,3vw,44px);
}
.chip {
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  border:0; background:none;
  color: var(--ink-soft);
  padding:11px 22px; cursor:pointer;
  white-space:nowrap; line-height:1.15;
  display:inline-flex; align-items:center; justify-content:center;
  position:relative; isolation:isolate;
  transition:.3s var(--ease);
}
.chip::before {
  content:""; position:absolute; inset:-6px -12px; z-index:-1; opacity:.5;
  background: var(--gold-dim);
  -webkit-mask:url("../brushes/brush-dry.png") center/100% 100% no-repeat;
          mask:url("../brushes/brush-dry.png") center/100% 100% no-repeat;
  transition: background .3s var(--ease), opacity .3s var(--ease);
}
.chip:hover { color:var(--gold-bright); }
.chip:hover::before { opacity:.8; }
.chip.on { color:var(--on-gold); }
.chip.on::before { opacity:1; background:var(--gold);
  -webkit-mask-image:url("../brushes/brush-flat.png");
          mask-image:url("../brushes/brush-flat.png"); }
.grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:5px;
}
.cell {
  position:relative;
  aspect-ratio: 1 / 1;
  overflow:hidden;
  cursor:zoom-in;
  background:var(--bg-3);
  opacity:0; transform: scale(.97);
  animation: cellIn .7s var(--ease) forwards;
}
.cell.wide { grid-column: span 2; aspect-ratio: 2.008 / 1; }
@keyframes cellIn { to { opacity:1; transform:none; } }
.cell img {
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.08);
  transition: transform 1.1s var(--ease), filter .6s;
  will-change: transform;
}
/* brik-like idle drift, alternating */
.cell:nth-child(4n+1) img { animation: driftA 17s ease-in-out infinite alternate; }
.cell:nth-child(4n+2) img { animation: driftB 21s ease-in-out infinite alternate; }
.cell:nth-child(4n+3) img { animation: driftC 19s ease-in-out infinite alternate; }
.cell:nth-child(4n+4) img { animation: driftD 23s ease-in-out infinite alternate; }
@keyframes driftA { from{transform:scale(1.08) translate(0,0)} to{transform:scale(1.14) translate(-2%,-1.4%)} }
@keyframes driftB { from{transform:scale(1.09) translate(-1.5%,0)} to{transform:scale(1.14) translate(1.2%,1.6%)} }
@keyframes driftC { from{transform:scale(1.1) translate(1.4%,1%)} to{transform:scale(1.15) translate(-1.2%,-1.6%)} }
@keyframes driftD { from{transform:scale(1.08) translate(0,1.4%)} to{transform:scale(1.13) translate(1.6%,-1%)} }
.cell:hover img { animation-play-state: paused; }
.cell .veil {
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 44%, rgba(8,7,6,.88) 100%);
  opacity:0; transition:opacity .5s var(--ease);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:20px 22px;
}
.cell:hover .veil, .cell:focus-visible .veil { opacity:1; }
.cell .veil .t { font-family:var(--serif-display); color:var(--ink); font-size:19px; letter-spacing:.03em; }
.cell .veil .m { font-family:var(--sans); color:var(--gold); font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; margin-top:6px; }
.grid-note {
  margin-top:22px;
  font-family:var(--sans); font-size:12px; color:var(--ink-soft);
  letter-spacing:.06em;
}

/* ============ LIGHTBOX ============ */
.lb {
  position:fixed; inset:0; z-index:400;
  background: rgba(6,5,4,.97);
  display:none;
  align-items:stretch;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lb.open { display:flex; }
.lb-img {
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(20px,4vw,56px);
  min-width:0;
}
.lb-img img {
  max-width:100%; max-height: calc(100vh - 112px);
  object-fit:contain;
  box-shadow: 0 40px 120px -30px rgba(var(--shadow),.8);
}
.lb-rail {
  flex: 0 0 clamp(300px, 26vw, 400px);
  background: var(--bg-2);
  border-left:1px solid var(--line);
  padding: clamp(32px,3.5vw,52px) clamp(26px,2.6vw,42px);
  color:var(--ink-2);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.lb-rail .kicker { margin-bottom:16px; }
.lb-rail h3 { font-size:clamp(24px,2vw,32px); color:var(--ink); margin-bottom:14px; }
.lb-rail .meta {
  font-family:var(--sans); font-size:11.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
  display:flex; flex-direction:column; gap:8px;
  padding:18px 0; margin-bottom:18px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.lb-rail .st { font-size:17.5px; line-height:1.7; color:var(--ink-2); flex:1; }
.lb-rail .btn { margin-top:28px; justify-content:center; }
.lb-x, .lb-prev, .lb-next {
  position:absolute; z-index:5;
  background:none; border:0;
  color:var(--on-gold); font-size:18px; font-family:var(--sans);
  width:48px; height:48px;
  cursor:pointer; transition:.3s;
  display:flex; align-items:center; justify-content:center;
  isolation:isolate;
}
.lb-x::before, .lb-prev::before, .lb-next::before {
  content:""; position:absolute; inset:-6px -10px; z-index:-1;
  background: var(--gold);
  -webkit-mask:url("../brushes/brush-loaded.png") center/100% 100% no-repeat;
          mask:url("../brushes/brush-loaded.png") center/100% 100% no-repeat;
  transition: background .3s var(--ease);
}
.lb-x:hover, .lb-prev:hover, .lb-next:hover { color:var(--ink); }
.lb-x:hover::before, .lb-prev:hover::before, .lb-next:hover::before { background:var(--red); }
.lb-x { top:22px; right:22px; }
.lb-prev { left:22px; top:50%; transform:translateY(-50%); }
.lb-next { right: calc(clamp(300px,26vw,400px) + 22px); top:50%; transform:translateY(-50%); }

/* ============ STUDIO / TIMELAPSES ============ */
.studio-grid {
  display:grid; grid-template-columns: minmax(0,40fr) minmax(0,60fr);
  gap: clamp(36px,5vw,90px); align-items:center;
}
.videos { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(18px,2.4vw,34px); }
.vid-card { position:relative; }
.vid-card .vwrap {
  position:relative; overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-deep);
  aspect-ratio: 9/16;
  box-shadow: 0 32px 80px -32px rgba(var(--shadow),.8);
}
.vid-card video { width:100%; height:100%; object-fit:cover; }
/* Some clips are landscape work filmed into a portrait file, so they arrive
   letterboxed. Giving that card its true 4:3 shape lets object-fit:cover crop
   the black bars away — in the poster AND during playback. */
.vid-card.landscape-src .vwrap { aspect-ratio: 4/3; }
.videos:has(.landscape-src) { align-items:start; }
/* Iranian Series reel strip — four vertical clips across, below the two
   main studio films. Falls to 2-up on tablet and 1-up on phone. */
.reel-block { margin-top: clamp(48px,5vw,80px); }
.reel-head { margin-bottom: clamp(22px,2.4vw,34px); }
.reel-head p {
  margin-top: 14px; color: var(--ink-soft);
  font-size: clamp(17px,1.4vw,19px); max-width: 52ch;
}
.reel-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px,1.8vw,26px); align-items: start;
}
.reel-strip .vt { font-size: 15px; }
@media (max-width: 1000px) { .reel-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .reel-strip { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.vid-card .play {
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  background: rgba(8,7,6,.24);
  cursor:pointer; border:0; transition: background .35s;
}
.vid-card .play:hover { background: rgba(8,7,6,.12); }
/* the play control is a daub of paint, same hand as every button */
.vid-card .play span {
  width:74px; height:74px;
  border:0; border-radius:0; background:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--on-gold); font-size:20px; padding-left:4px;
  position:relative; isolation:isolate;
  transition: transform .35s var(--ease);
}
.vid-card .play span::before {
  content:""; position:absolute; inset:-8px -14px; z-index:-1;
  background: var(--gold);
  -webkit-mask:url("../brushes/brush-loaded.png") center/100% 100% no-repeat;
          mask:url("../brushes/brush-loaded.png") center/100% 100% no-repeat;
  transition: background .35s var(--ease);
}
.vid-card .play:hover span { transform:scale(1.1) rotate(-2deg); color:var(--ink); }
.vid-card .play:hover span::before { background: var(--red); }
.vid-card.playing .play { opacity:0; pointer-events:none; }
.vid-card .vt {
  margin-top:16px;
  font-family:var(--serif-display); font-size:17px; color:var(--ink); letter-spacing:.04em;
}
.vid-card .vm {
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-top:5px;
}
.studio-copy p { color:var(--ink-2); margin-bottom:20px; max-width:46ch; }
.studio-copy p b { color:var(--ink); font-weight:500; }

/* ============ CAREER ============ */
.career { background: var(--bg-2); }
.venue { padding: 26px 0; border-top:1px solid var(--line-soft); }
.career-cols {
  display:grid; grid-template-columns: 1fr 1fr;
  gap: clamp(32px,4.5vw,72px);
}
.venue .v-name { font-family:var(--serif-display); font-size:21px; color:var(--ink); }
.venue .v-years {
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
  margin:6px 0 10px;
}
.venue p { font-size:17.5px; color:var(--ink-soft); max-width:56ch; }
.press-band {
  margin-top: clamp(48px,5vw,72px);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px);
}
.press-card {
  background: var(--bg-3);
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  padding: clamp(24px,2.6vw,38px);
}
.press-card .q { font-size: clamp(20px,1.8vw,25px); font-style:italic; line-height:1.5; color:var(--ink); }
.press-card .s {
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-top:16px;
}

/* ============ ABOUT ============ */
.about-grid {
  display:grid; grid-template-columns: minmax(0,44fr) minmax(0,56fr);
  gap: clamp(36px,5.5vw,96px); align-items:start;
}
.about-art { position:sticky; top:110px; }
.about-art .frame {
  padding: clamp(10px,1.2vw,16px);
  background: linear-gradient(160deg, var(--bg-4), var(--bg-2));
  border:1px solid var(--line-strong);
  box-shadow: 0 40px 90px -34px rgba(var(--shadow),.72);
}
.about-art .cap {
  margin-top:14px; text-align:center;
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft);
}
.about-copy p { margin-bottom:22px; color:var(--ink-2); font-size:clamp(19px,1.5vw,21px); }
.about-copy p:first-of-type::first-letter {
  font-family:var(--serif-display);
  font-size:3.4em; float:left; line-height:.85;
  padding: 6px 12px 0 0; color:var(--rust);
}
.about-quote {
  margin: 34px 0; padding: 26px 0 26px 30px;
  border-left:2px solid var(--gold);
  font-size: clamp(21px,1.9vw,26px); font-style:italic; color:var(--ink);
  line-height:1.55;
}
.about-facts {
  margin-top:36px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
}
.fact { background:var(--bg-3); border:1px solid var(--line-soft); padding:20px 22px; }
.fact .f-l { font-family:var(--sans); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); }
.fact .f-v { font-family:var(--serif-display); font-size:17px; margin-top:7px; line-height:1.4; color:var(--ink); }

/* portrait placeholder — Omid drops his own photo in later */
/* Signature closing the biography, which is now Omid's own first-person
   statement rather than a third-person bio. */
.about-sig {
  margin-top: 6px;
  font-family: var(--serif-display); font-size: clamp(22px,1.9vw,26px);
  color: var(--gold); letter-spacing: .03em;
}
.about-sig::before {
  content: ""; display: block; width: 46px; height: 1px;
  background: var(--gold-dim); margin-bottom: 18px;
}

/* Portrait rotation — photos stack on top of each other and crossfade.
   Only images that actually load take part; missing files are removed. */
.portrait-stack { position:relative; width:100%; aspect-ratio:4/5; overflow:hidden; background:var(--bg-3); }
.portrait-stack .pt {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.6s cubic-bezier(.4,0,.2,1);
}
.portrait-stack .pt.on { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  .portrait-stack .pt { transition:none; }
}

.portrait-slot {
  aspect-ratio: 4/5; width:100%;
  background:
    repeating-linear-gradient(135deg, rgba(198,160,92,.05) 0 12px, transparent 12px 24px),
    var(--bg-3);
  border:1px dashed var(--line-strong);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:24px;
}
.portrait-slot .ps-ico { width:38px; height:38px; color:var(--gold-dim); }
.portrait-slot .ps-t {
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
}
.portrait-slot .ps-s { font-size:15px; color:var(--ink-faint); font-style:italic; max-width:26ch; }

/* ============ COMMISSIONS ============ */
.commission-grid {
  display:grid; grid-template-columns: minmax(0,52fr) minmax(0,48fr);
  gap: clamp(36px,5vw,88px); align-items:center;
}
.steps { counter-reset: step; margin-top:38px; }
.step {
  counter-increment: step;
  display:flex; gap:22px; padding:22px 0;
  border-top:1px solid var(--line-soft);
}
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family:var(--serif-display); font-size:20px; color:var(--gold);
  flex:0 0 40px;
}
.step .s-t { font-family:var(--serif-display); font-size:19px; color:var(--ink); }
.step p { font-size:17px; color:var(--ink-soft); margin-top:6px; max-width:52ch; }
.commission-art .frame {
  padding: clamp(10px,1.2vw,16px);
  background: linear-gradient(160deg, var(--bg-4), var(--bg-2));
  border:1px solid var(--line-strong);
  box-shadow: 0 40px 100px -40px rgba(var(--shadow),.8);
}

/* ============ CONTACT ============ */
.contact { text-align:center; background: var(--bg-2); }
.contact .sun { margin: 0 auto 30px; width:56px; height:56px; color:var(--gold); }
.contact h2 { max-width:760px; margin:16px auto 20px; }
.contact .lede { max-width:600px; margin:0 auto 44px; color:var(--ink-soft); font-size:clamp(19px,1.6vw,22px); }
.contact-mail {
  font-family: var(--serif-display);
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--gold-bright);
  text-decoration:none;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:8px;
  transition:.3s;
}
.contact-mail:hover { color:var(--ink); border-color:var(--ink); }
.contact-alt {
  margin-top:44px;
  display:flex; gap: clamp(24px,4vw,64px); justify-content:center; flex-wrap:wrap;
}
.c-alt {
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); text-decoration:none; transition:.3s;
  display:flex; align-items:center; gap:10px;
}
.c-alt:hover { color:var(--gold-bright); }
.c-note { margin-top:52px; font-size:16px; color:var(--ink-faint); font-style:italic; }

/* ---------- the inquiry form ---------- */
.form-card {
  max-width: 760px; margin: 0 auto clamp(40px,5vw,56px);
  text-align:left;
  background: var(--bg-3);
  border:1px solid var(--line);
  padding: clamp(26px,3.4vw,48px);
  position:relative;
}
.form-card::before {
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg, var(--green) 0 33.4%, var(--ink-faint) 33.4% 66.7%, var(--red) 66.7% 100%);
  opacity:.75;
}
.f-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.f-field { display:flex; flex-direction:column; gap:8px; }
.f-field.full { grid-column: 1 / -1; }
.f-field label {
  font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}
.f-field label .req { color:var(--red); margin-left:4px; }
.f-field input, .f-field select, .f-field textarea {
  font-family: var(--serif-body);
  font-size:18px;
  color: var(--ink);
  background: var(--bg);
  border:1px solid var(--line);
  padding: 14px 16px;
  transition: border-color .3s, background .3s;
  width:100%;
}
.f-field textarea { resize:vertical; min-height:130px; line-height:1.6; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus {
  outline:none; border-color: var(--gold); background: var(--bg-4);
}
.f-field input::placeholder, .f-field textarea::placeholder { color: var(--ink-faint); }
.f-field select {
  appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C6A05C' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 16px center;
  padding-right:42px;
}
.f-field select option { background: var(--bg-3); color: var(--ink); }
.f-hint { font-family:var(--sans); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; }
/* honeypot — invisible to humans, irresistible to bots */
.f-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.f-actions { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-top:8px; }
.f-msg {
  font-family:var(--sans); font-size:13px; letter-spacing:.04em;
  padding:14px 18px; margin-top:18px; display:none;
  border-left:3px solid var(--gold);
  background: rgba(198,160,92,.08); color:var(--ink-2);
}
.f-msg.show { display:block; }
.f-msg.err { border-color:var(--red); background: rgba(168,84,74,.1); }
.f-msg.ok  { border-color:var(--green); background: rgba(86,110,92,.12); }

/* ============ FOOTER ============ */
footer {
  background:var(--bg-deep);
  padding: 44px 0 40px;
  color:var(--ink-faint);
  border-top:1px solid var(--line-soft);
}
.foot-stripe { height:3px; display:flex; }
.foot-stripe i { flex:1; }
.foot-stripe i:nth-child(1){ background:var(--green-deep); }
.foot-stripe i:nth-child(2){ background:var(--ink-faint); }
.foot-stripe i:nth-child(3){ background:var(--red-deep); }
.foot-inner {
  display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.1em;
}
.foot-inner a { color:var(--ink-soft); text-decoration:none; }
.foot-inner a:hover { color:var(--gold-bright); }
.foot-mark { font-family:var(--serif-display); font-size:16px; letter-spacing:.16em; color:var(--ink-2); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1080px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .lb-next { right:22px; bottom:22px; top:auto; transform:none; }
  .lb { flex-direction:column; overflow-y:auto; }
  .lb-img { padding:64px 18px 18px; flex:0 0 auto; }
  .lb-img img { max-height:62vh; }
  .lb-rail { flex:1 0 auto; border-left:0; border-top:1px solid var(--line); }
}
@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { min-height:52vh; order:-1; }
  .hero-art::before { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 50%, transparent) 10%, transparent 30%); }
  .hero-copy { padding-top:44px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap:44px; }
  .ir-piece, .studio-grid, .about-grid, .commission-grid, .career-cols, .press-band { grid-template-columns:1fr; }
  .ir-piece:nth-child(even) .ir-art { order:0; }
  .about-art { position:static; max-width:440px; }
  .videos { max-width:560px; }
  .nav-links { display:none; }
  .nav-burger {
    display:flex; flex-direction:column; gap:5px;
    background:none; border:0; cursor:pointer; padding:8px;
  }
  .nav-burger i { width:24px; height:1.5px; background:var(--ink); transition:.3s; }
  .nav.open .m-menu { display:flex; }
  .m-menu {
    display:none; flex-direction:column;
    background:var(--bg-2);
    border-bottom:1px solid var(--line-soft);
    padding: 10px 24px 26px;
  }
  .m-menu a {
    font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.18em;
    text-transform:uppercase; text-decoration:none; color:var(--ink);
    padding:14px 0; border-bottom:1px solid var(--line-soft);
  }
}
@media (min-width: 921px) { .m-menu { display:none !important; } }
@media (max-width: 560px) {
  body { font-size:17.5px; }
  .grid { grid-template-columns: 1fr; }
  .cell.wide { grid-column: span 1; aspect-ratio: 1.6/1; }
  .videos { grid-template-columns:1fr; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .about-facts { grid-template-columns:1fr; }
  .f-row { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cell img, .hero-art img { animation:none !important; }
  .rv { transition:none; opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}