/* Ehsan Gharehdaghi — Portfolio, Version 2
   Editorial / poster aesthetic: monochrome, grain, wide-tracked labels,
   contact-sheet grids, split-frame portraits. */

@font-face {
  font-family: "Anjoman";
  src: url("../../fonts/Anjoman-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Anjoman";
  src: url("../../fonts/Anjoman-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Anjoman";
  src: url("../../fonts/Anjoman-Medium.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Anjoman";
  src: url("../../fonts/Anjoman-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #0b0b0c;
  --ink-2: #141416;
  --ink-3: #1c1c1f;
  --paper: #e9e6e0;
  --paper-dim: #8e8b86;
  --paper-faint: #55534f;
  --line: #2a2a2e;
  --hot: #c9542f;

  --rail-w: 224px;
  --pad-x: clamp(1.25rem, 4vw, 4rem);

  --fa: "Anjoman", Tahoma, sans-serif;
  --en: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --label: 0.62rem;
  --track: 0.22em;
}

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

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--en);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
html[lang="fa"] body { font-family: var(--fa); }

html[lang="fa"] .en { display: none !important; }
html[lang="en"] .fa { display: none !important; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* ===== Film grain ===== */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 900;
  pointer-events: none;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: grainshift 700ms steps(3) infinite;
}
@keyframes grainshift {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-2%, 1%); }
  66%  { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* ===== Shared type ===== */
.kicker,
.band-note,
.rail-nav a,
.rail-loc,
.frame figcaption,
.aw-tag,
.group-label,
.edge,
.scroll-cue,
.hero-strip,
.window-cap,
.cl-name,
.foot {
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  font-weight: 500;
}
html[lang="fa"] .kicker,
html[lang="fa"] .band-note,
html[lang="fa"] .rail-nav a,
html[lang="fa"] .rail-loc,
html[lang="fa"] .aw-tag,
html[lang="fa"] .group-label,
html[lang="fa"] .edge,
html[lang="fa"] .scroll-cue,
html[lang="fa"] .window-cap,
html[lang="fa"] .foot {
  text-transform: none;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
}

/* ===== Side rail ===== */
.rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rail-w);
  z-index: 800;
  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  background: var(--ink);
  border-inline-end: 1px solid var(--line);
}
.rail-mark { display: block; }
.mark-name {
  display: block;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.mark-role {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--paper-faint);
}
html[lang="fa"] .mark-role { text-transform: none; letter-spacing: 0.06em; font-size: 0.72rem; }

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-block: auto;
}
.rail-nav a {
  color: var(--paper-dim);
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  transition: color 0.25s ease, transform 0.25s ease;
}
.rail-nav a i {
  font-style: normal;
  font-size: 0.55rem;
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
}
.rail-nav a:hover,
.rail-nav a.is-active { color: var(--paper); }
.rail-nav a.is-active i { color: var(--hot); }

.rail-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
#lang-toggle {
  font-family: inherit;
  font-size: var(--label);
  letter-spacing: var(--track);
  color: var(--paper);
  background: transparent;
  border: 1px solid var(--line);
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
#lang-toggle:hover { border-color: var(--hot); color: var(--hot); }
.rail-loc { color: var(--paper-faint); }

/* ===== Layout ===== */
main { margin-inline-start: var(--rail-w); }

.band {
  padding: clamp(3.5rem, 9vw, 8rem) var(--pad-x);
  border-top: 1px solid var(--line);
  position: relative;
}
.band-tight { padding-inline: clamp(1rem, 2.5vw, 2.5rem); }
.band-alt { background: var(--ink-2); }

.band-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.band-head i {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  color: var(--hot);
  font-variant-numeric: tabular-nums;
}
.band-head h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.band-note { color: var(--paper-faint); margin: 0; margin-inline-start: auto; }

/* ===== Hero ===== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vh, 7rem) var(--pad-x);
  overflow: hidden;
}
.hero-frame {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}
.hero-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  filter: grayscale(1) contrast(1.08) brightness(0.62);
}
.hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, transparent 20%, rgba(11,11,12,0.75) 100%),
    linear-gradient(to bottom, rgba(11,11,12,0.55), transparent 30%, rgba(11,11,12,0.85));
}

.hero-strip {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem var(--pad-x);
  font-size: 0.55rem;
  letter-spacing: 0.25em;
  color: var(--paper-faint);
  border-top: 1px solid var(--line);
  background: rgba(11,11,12,0.6);
}

.hero-type {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}
.kicker { margin: 0 0 clamp(1rem, 3vw, 2rem); color: var(--paper-dim); }

.spread {
  margin: 0;
  font-weight: 400;
  line-height: 0.95;
}
/* Each word is sized to fill the column: --len is its character count,
   --fit approximates the usable width in "character widths". */
.spread {
  --fit: calc(min(1100px, 94vw - var(--rail-w)) * 1.42);
}
.spread b {
  display: block;
  font-weight: 400;
  font-size: min(8.5rem, calc(var(--fit) / var(--len, 8)));
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
html[lang="fa"] .spread b {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: min(8.5rem, calc(var(--fit) / var(--len, 8) * 1.15));
}
.spread b + b { margin-top: 0.04em; }

.hero-line {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--paper-dim);
}
html[lang="fa"] .hero-line { letter-spacing: 0.02em; font-size: 0.9rem; }

.edge {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: var(--paper-faint);
  writing-mode: vertical-rl;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
/* physical insets: in vertical writing-mode the logical inline axis is vertical */
.edge-start { left: 0.85rem; right: auto; }
.edge-end { right: 0.85rem; left: auto; rotate: 180deg; }

.scroll-cue {
  position: absolute;
  z-index: 2;
  inset-block-end: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--paper-dim);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.scroll-cue::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--paper-faint);
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleX(0.4); opacity: 0.5; } 50% { transform: scaleX(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }

/* ===== Statement / split ===== */
.split {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) 1.15fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.window {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--ink-3);
}
.window img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.window-back { filter: grayscale(1) blur(7px) brightness(0.55); transform: scale(1.06); }
.window-front {
  position: absolute;
  inset: 0;
  filter: grayscale(1) contrast(1.12);
  clip-path: inset(8% 34% 8% 34%);
  transition: clip-path 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.window:hover .window-front { clip-path: inset(0% 0% 0% 0%); }
.window::after {
  content: "";
  position: absolute;
  inset: 8% 34%;
  border: 1px solid rgba(233, 230, 224, 0.55);
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.window:hover::after { opacity: 0; }
.window-cap { margin: 0.85rem 0 0; color: var(--paper-faint); }

.split-text .lede {
  margin: 0 0 1.75rem;
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.6;
  color: var(--paper);
  border-inline-start: 1px solid var(--hot);
  padding-inline-start: 1.1rem;
}
.split-text p { color: var(--paper-dim); max-width: 62ch; }
.split-text > div p + p { margin-top: 1em; }

.facts {
  margin-top: 2.25rem;
  display: grid;
  gap: 0.9rem;
  border-top: 1px solid var(--line);
  padding-top: 1.5rem;
}
.facts li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--paper-dim);
}
.facts i {
  font-style: normal;
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  color: var(--hot);
  padding-top: 0.35rem;
}

/* ===== Contact sheet ===== */
.sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.frame {
  position: relative;
  margin: 0;
  background: var(--ink-2);
  overflow: hidden;
  cursor: zoom-in;
}
.frame img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.8);
  transition: filter 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.frame:hover img { filter: grayscale(0) contrast(1) brightness(1); transform: scale(1.04); }
.frame-no {
  position: absolute;
  top: 0.5rem;
  inset-inline-start: 0.55rem;
  z-index: 2;
  font-size: 0.55rem;
  letter-spacing: 0.18em;
  color: var(--paper-dim);
  mix-blend-mode: difference;
}
.frame figcaption {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 0.55rem 0.6rem;
  color: var(--paper);
  background: linear-gradient(to top, rgba(11,11,12,0.9), transparent);
  opacity: 0;
  transform: translateY(0.4rem);
  transition: opacity 0.35s ease, transform 0.35s ease;
  font-size: 0.55rem;
}
.frame:hover figcaption { opacity: 1; transform: translateY(0); }

/* ===== Works index ===== */
.group-label {
  margin: 2.5rem 0 0.75rem;
  color: var(--hot);
  font-weight: 500;
}
.group-label:first-of-type { margin-top: 0; }

.index-list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.35rem 1.5rem;
  align-items: baseline;
  padding: 0.95rem 0.5rem;
  border-top: 1px solid var(--line);
  cursor: pointer;
  transition: background-color 0.3s ease, padding-inline 0.3s ease;
}
.index-list li:focus-visible { outline: 1px solid var(--hot); outline-offset: 2px; }
.index-list li:hover { background: var(--ink-2); padding-inline: 0.9rem 0.1rem; }
.ix-year {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--paper-faint);
  font-variant-numeric: tabular-nums;
}
.ix-title { font-size: clamp(1rem, 2.2vw, 1.5rem); line-height: 1.25; }
.index-list li:hover .ix-title { color: #fff; }
.ix-note { font-size: 0.72rem; color: var(--paper-faint); letter-spacing: 0.04em; text-align: end; }

.index-peek {
  position: fixed;
  z-index: 700;
  margin: 0;
  width: 190px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.index-peek.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.index-peek img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  border: 1px solid var(--line);
}

/* ===== Awards ===== */
.award-rows li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0.3rem 1.5rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.aw-tag { color: var(--paper-faint); }
.aw-tag.win { color: var(--hot); }
.aw-what { font-size: 0.95rem; }
.aw-where { font-size: 0.78rem; color: var(--paper-faint); }

/* ===== Closing ===== */
.closing {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.closing-img { margin: 0; }
.closing-img img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.85);
}
.closing-line {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--paper-dim);
  margin: 0 0 2rem;
  max-width: 40ch;
}
.contact-links li { border-top: 1px solid var(--line); }
.contact-links a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  transition: padding-inline 0.3s ease, color 0.3s ease;
}
.contact-links a:hover { padding-inline-start: 0.6rem; color: var(--hot); }
.cl-name { color: inherit; }
.cl-detail { font-size: 0.78rem; color: var(--paper-faint); }

/* ===== Footer ===== */
.foot {
  margin-inline-start: var(--rail-w);
  border-top: 1px solid var(--line);
  padding: 1rem var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--paper-faint);
  background: var(--ink-2);
}
.foot-credit { display: inline-flex; gap: 0.6rem; align-items: baseline; transition: color 0.25s ease; }
.foot-credit:hover { color: var(--paper); }
.foot-domain { color: var(--hot); }

/* ===== Lightbox ===== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 6vh 6vw;
  background: rgba(6, 6, 7, 0.96);
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 84vh; width: auto; }
.lb-close, .lb-prev, .lb-next {
  position: absolute;
  background: transparent;
  border: none;
  color: var(--paper);
  font-size: 1.7rem;
  line-height: 1;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.lb-close { top: 1rem; inset-inline-end: 1rem; }
.lb-prev { top: 50%; inset-inline-start: 0.5rem; transform: translateY(-50%); }
.lb-next { top: 50%; inset-inline-end: 0.5rem; transform: translateY(-50%); }
.lb-caption {
  position: absolute;
  inset-block-end: 2rem;
  inset-inline: 0;
  text-align: center;
  font-size: var(--label);
  letter-spacing: var(--track);
  color: var(--paper-dim);
}

/* ===== Reveal on scroll ===== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ===== Responsive ===== */
@media (max-width: 1080px) {
  .sheet { grid-template-columns: repeat(3, 1fr); }
  .index-list li { grid-template-columns: 4rem 1fr; }
  .ix-note { grid-column: 2; text-align: start; }
  .award-rows li { grid-template-columns: 6rem 1fr; }
  .aw-where { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --rail-w: 0px; }
  main, .foot { margin-inline-start: 0; }

  .rail {
    position: sticky;
    top: 0;
    inset-inline: 0;
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    padding: 0.85rem var(--pad-x);
    border-inline-end: none;
    border-bottom: 1px solid var(--line);
    background: rgba(11,11,12,0.92);
    backdrop-filter: blur(8px);
  }
  .mark-name { font-size: 0.9rem; }
  .mark-role { display: none; }

  /* one non-wrapping, horizontally scrollable row — English labels are long */
  .rail-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.9rem;
    margin: 0;
    order: 3;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.15rem;
    -webkit-overflow-scrolling: touch;
  }
  .rail-nav::-webkit-scrollbar { display: none; }
  .rail-nav a { white-space: nowrap; flex: 0 0 auto; letter-spacing: 0.12em; }
  /* fade the trailing edge only when the row actually overflows */
  .rail-nav.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 82%, transparent 100%);
    mask-image: linear-gradient(to right, #000 82%, transparent 100%);
  }
  html[dir="rtl"] .rail-nav.is-scrollable {
    -webkit-mask-image: linear-gradient(to left, #000 82%, transparent 100%);
    mask-image: linear-gradient(to left, #000 82%, transparent 100%);
  }
  .rail-nav a i { display: none; }
  .rail-foot { flex-direction: row; align-items: center; gap: 0.75rem; }
  .rail-loc { display: none; }

  .split, .closing { grid-template-columns: 1fr; }
  .closing-img, .split-media { max-width: 330px; margin-inline: auto; width: 100%; }
  .window-cap, .closing-img { text-align: center; }
  .edge { display: none; }
}

@media (max-width: 560px) {
  .sheet { grid-template-columns: repeat(2, 1fr); }
  .index-list li { grid-template-columns: 1fr; gap: 0.15rem; padding-inline: 0; }
  .index-list li:hover { padding-inline: 0.4rem 0; }
  .award-rows li { grid-template-columns: 1fr; }
  .aw-where { grid-column: 1; }
  .foot { justify-content: flex-start; }
  .index-peek { display: none; }
}