/* Anita Hashemi Moghaddam — minimal */
:root {
  --ink: #0e0e0f;
  --text: #e6e2da;
  --muted: #8b8881;
  --line: rgba(230, 226, 218, .12);
  --pad: clamp(16px, 3vw, 40px);
  --font: "Montserrat", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  color: var(--text); background: transparent;
  font: 400 12px/1.75 var(--font); letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url(texture-1.jpg) center / cover no-repeat; opacity: .28;
}
body.is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--muted); }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }
h1, h2, h3, p, ul, dl { margin: 0; }
ul { list-style: none; padding: 0; }
::selection { background: var(--text); color: var(--ink); }

.label { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.muted { color: var(--muted); }

/* ---------- header ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px var(--pad);
  background: linear-gradient(var(--ink) 40%, rgba(14, 14, 15, 0));
}
.nav__mark { font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }

/* ---------- home intro ---------- */
.intro { margin-bottom: 72px; }
.intro__photo { width: min(100%, 340px); aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
.intro__text { margin-top: 14px; }
.nav__links { display: flex; gap: 22px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.nav__links a.is-active { color: var(--muted); }
.nav__group { position: relative; }
.nav__group > span { cursor: default; }
.nav__sub {
  position: absolute; top: 100%; left: -12px; padding: 10px 12px; min-width: 150px;
  display: flex; flex-direction: column; gap: 6px; background: var(--ink);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.nav__group:hover .nav__sub, .nav__group:focus-within .nav__sub { opacity: 1; visibility: visible; }
.nav__toggle { display: none; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- page ---------- */
main { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: 40px var(--pad) 80px; }
.page-title { margin-bottom: 32px; }

/* ---------- work grid ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 28px; }
.filters button { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.filters button.is-active, .filters button:hover { color: var(--text); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 36px 24px; }
.item { display: block; width: 100%; text-align: left; }
.item__img { aspect-ratio: 1; overflow: hidden; background: rgba(255, 255, 255, .03); }
.item__img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s; }
.item:hover .item__img img { opacity: .75; }
.item__cap { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; font-size: 11px; }
.item__cap span:last-child { color: var(--muted); text-align: right; }

/* ---------- lists (exhibitions, cv) ---------- */
.rows { border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.row__year { color: var(--muted); font-variant-numeric: tabular-nums; }
.row__title { font-weight: 500; }
.row__venue { color: var(--muted); }
.row__thumb { width: 44px; cursor: zoom-in; }
.row__thumb img { width: 44px; height: 58px; object-fit: cover; }
.section + .section { margin-top: 56px; }
.section > .label { display: block; margin-bottom: 14px; }
.posters { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 40px; }
.posters button { width: 120px; text-align: left; font-size: 11px; }
.posters img { width: 120px; height: 160px; object-fit: cover; margin-bottom: 6px; }

/* ---------- about ---------- */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.portrait { width: 100%; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
.about__text p + p { margin-top: 1em; }
.about__text { max-width: 620px; color: #cfcbc3; }

/* ---------- contact ---------- */
.contact p + p { margin-top: 6px; }
.contact a { border-bottom: 1px solid var(--line); }

/* ---------- footer ---------- */
.footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px var(--pad); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* ---------- viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 50; background: rgba(10, 10, 11, .97);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.viewer.open { opacity: 1; visibility: visible; }
.viewer__top, .viewer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--pad); font-size: 11px; }
.viewer__title { font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.viewer__stage { position: relative; min-height: 0; }
.viewer__stage img, .viewer__stage video { position: absolute; inset: 0 var(--pad); width: calc(100% - 2 * var(--pad)); height: 100%; object-fit: contain; }
.viewer__nav { position: absolute; top: 0; bottom: 0; width: 40%; z-index: 1; }
.viewer__nav--prev { left: 0; cursor: w-resize; }
.viewer__nav--next { right: 0; cursor: e-resize; }
.viewer__stage video ~ .viewer__nav { bottom: 60px; }
.viewer button:hover { color: var(--muted); }

@media (max-width: 760px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1; padding: 90px var(--pad) 40px;
    flex-direction: column; gap: 14px; font-size: 13px; background: var(--ink);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
  }
  .nav.menu-open .nav__links { opacity: 1; visibility: visible; }
  .nav__sub { position: static; opacity: 1; visibility: visible; padding: 6px 0 0 14px; background: none; }
  .nav__mark { font-size: 10px; letter-spacing: .12em; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .row { grid-template-columns: 64px minmax(0, 1fr); }
  .row__venue, .row__thumb { grid-column: 2; }
  .about { grid-template-columns: 1fr; }
}