@charset "UTF-8";
/* aliaskari.net
   Locally hosted type. Latin: Newsreader (display) + Archivo (text).
   Persian: Vazirmatn. No external requests, no webfont CDN. */

@font-face{font-family:Newsreader;src:url('/assets/fonts/newsreader-var.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21BB,U+2212}
@font-face{font-family:Newsreader;src:url('/assets/fonts/newsreader-var-italic.woff2') format('woff2');
  font-weight:200 800;font-style:italic;font-display:swap;unicode-range:U+0000-024F,U+2000-206F}
@font-face{font-family:Archivo;src:url('/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-024F,U+2000-206F,U+2190-21BB}
@font-face{font-family:Vazirmatn;src:url('/assets/fonts/vazirmatn-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --ink:#0b0b0c; --raise:#141416; --sink:#08080a;
  --rule:#26262a; --rule-soft:#1b1b1e;
  --text:#eceae4; --muted:#96928a; --dim:#6f6c66;
  --ember:#c2603a; --ember-lift:#d9754c; --bone:#ddd5c4;
  --shell:1240px; --gutter:clamp(20px,5vw,64px);
  --head:72px;
  --display:Newsreader,Georgia,'Times New Roman',serif;
  --body:Archivo,'Helvetica Neue',Arial,sans-serif;
  --step:clamp(72px,9vw,128px);
  color-scheme:dark;
}
html[lang="fa"]{--display:Vazirmatn,Tahoma,Arial,sans-serif;--body:Vazirmatn,Tahoma,Arial,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);
  font:400 1.0625rem/1.68 var(--body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
html[lang="fa"] body{font:400 1rem/1.95 var(--body)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:400;letter-spacing:-.018em;line-height:1.08}
html[lang="fa"] h1,html[lang="fa"] h2,html[lang="fa"] h3,html[lang="fa"] h4{
  font-weight:700;letter-spacing:0;line-height:1.45}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
::selection{background:var(--ember);color:#0b0b0c}
:focus-visible{outline:2px solid var(--ember-lift);outline-offset:3px;border-radius:2px}

.shell{width:min(var(--shell),100% - var(--gutter)*2);margin-inline:auto}
.skip{position:fixed;inset-inline-start:12px;top:-200px;z-index:300;background:var(--ember);
  color:#fff;padding:10px 18px;border-radius:4px;font-size:.9rem}
.skip:focus{top:12px}
.eyebrow{display:block;margin:0 0 18px;font-family:var(--body);font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
html[lang="fa"] .eyebrow{letter-spacing:.02em;text-transform:none;font-size:.85rem;font-weight:700}
.d1{font-size:clamp(2.9rem,7vw,5.6rem)}
.d2{font-size:clamp(2.1rem,4.3vw,3.5rem)}
html[lang="fa"] .d1{font-size:clamp(2.1rem,5vw,4rem)}
html[lang="fa"] .d2{font-size:clamp(1.7rem,3.3vw,2.7rem)}
.lead{font-size:1.125rem;color:var(--muted);max-width:62ch}
html[lang="fa"] .lead{font-size:1.02rem}
.section{padding-block:var(--step)}
.section--tight{padding-block:calc(var(--step)*.68)}
.section--raise{background:var(--raise)}
.head{max-width:68ch;margin-bottom:clamp(36px,5vw,60px)}
.head .lead{margin-top:18px}
.muted{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;
  border:1px solid transparent;border-radius:3px;font-family:var(--body);
  font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  transition:background .18s,border-color .18s,color .18s,transform .18s}
html[lang="fa"] .btn{letter-spacing:0;text-transform:none;font-size:.95rem;font-weight:600}
.btn .i{width:16px;height:16px;flex:none}
.btn--solid{background:var(--ember);color:#fff}
.btn--solid:hover{background:var(--ember-lift)}
.btn--ghost{border-color:#5b5751;color:var(--text)}
.btn--ghost:hover{border-color:var(--bone);background:#ffffff0d}
.btn:active{transform:translateY(1px)}
.tlink{display:inline-flex;align-items:center;gap:10px;color:var(--ember);
  font-size:.82rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  padding-bottom:6px;border-bottom:1px solid #c2603a66;transition:border-color .18s,color .18s}
html[lang="fa"] .tlink{letter-spacing:0;text-transform:none;font-size:.95rem}
.tlink:hover{color:var(--ember-lift);border-color:var(--ember-lift)}
.tlink .i{width:14px;height:14px}
html[lang="fa"] .tlink .i,html[lang="fa"] .btn .i{transform:scaleX(-1)}
html[lang="fa"] .btn--solid .i.i--play,html[lang="fa"] .tlink .i.i--play{transform:none}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:120;height:var(--head);
  background:#0b0b0ceb;backdrop-filter:blur(14px);border-bottom:1px solid var(--rule-soft)}
.hdr__in{height:100%;display:flex;align-items:center;gap:20px}
.mark{display:grid;line-height:1;margin-inline-end:auto;white-space:nowrap}
.mark b{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:-.01em}
html[lang="fa"] .mark b{font-size:1.25rem;font-weight:700}
.mark span{margin-top:5px;font-size:.56rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--dim)}
html[lang="fa"] .mark span{letter-spacing:.02em;font-size:.68rem;text-transform:none}
.nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);
  font-size:.78rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
html[lang="fa"] .nav{font-size:.92rem;letter-spacing:0;text-transform:none}
.nav a{padding:8px 0;color:#cfcbc3;transition:color .16s}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ember)}
.nav__grp{position:relative}
.nav__grp>button{display:inline-flex;align-items:center;gap:7px;padding:8px 0;color:#cfcbc3;
  font-size:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:inherit}
.nav__grp>button:hover,.nav__grp.is-active>button{color:var(--ember)}
.nav__grp>button .i{width:11px;height:11px;transition:transform .2s}
.pop{position:absolute;top:calc(100% + 10px);inset-inline-start:-18px;min-width:232px;
  display:grid;padding:8px;background:#17171a;border:1px solid var(--rule);border-radius:6px;
  box-shadow:0 24px 60px #000a;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s,transform .18s,visibility .18s}
.nav__grp:hover .pop,.nav__grp:focus-within .pop{opacity:1;visibility:visible;transform:none}
.pop a{padding:10px 14px;border-radius:4px;font-size:.88rem;letter-spacing:0;text-transform:none}
html[lang="fa"] .pop a{font-size:.95rem}
.pop a:hover{background:#ffffff0f}
.hdr__act{display:flex;align-items:center;gap:10px;flex:none}
.lang{display:inline-flex;align-items:center;justify-content:center;min-width:62px;min-height:38px;
  padding:0 14px;border:1px solid #4a4640;border-radius:999px;font-size:.8rem;transition:border-color .18s,background .18s}
.lang:hover{border-color:var(--ember);background:#ffffff0a}
html[lang="en"] .lang{font-family:Vazirmatn,Tahoma,sans-serif}
html[lang="fa"] .lang{font-family:Archivo,Arial,sans-serif}
.burger{display:none;width:44px;height:44px;place-items:center;border:1px solid #33312e;border-radius:999px}
.burger .i{width:20px;height:20px}
.scrim{position:fixed;inset:0;z-index:118;background:#000b;opacity:0;visibility:hidden;transition:.25s}
body.is-menu .scrim{opacity:1;visibility:visible}
body.is-menu{overflow:hidden}

@media (max-width:1080px){
  /* backdrop-filter makes the header a containing block for position:fixed
     children, which traps the drawer inside the 64px header. The header is
     already 92% opaque, so dropping the blur here costs nothing. */
  .hdr{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0b0b0cfa}
  .burger{display:grid}
  .nav{position:fixed;inset-block:0;inset-inline-start:0;z-index:125;width:min(400px,88vw);
    display:flex;flex-direction:column;align-items:stretch;gap:0;overflow-y:auto;overscroll-behavior:contain;
    padding:max(18px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom));
    background:#131315;border-inline-end:1px solid var(--rule);box-shadow:0 0 70px #000c;
    transform:translateX(-102%);visibility:hidden;transition:transform .3s cubic-bezier(.3,.8,.3,1),visibility .3s;
    font-size:1rem;letter-spacing:0;text-transform:none}
  html[dir="rtl"] .nav{transform:translateX(102%)}
  .nav.is-open,html[dir="rtl"] .nav.is-open{transform:none;visibility:visible}
  .nav__head{display:flex!important;align-items:center;justify-content:space-between;
    padding-bottom:16px;margin-bottom:8px;border-bottom:1px solid var(--rule);
    font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
  html[lang="fa"] .nav__head{letter-spacing:0;text-transform:none;font-size:.95rem}
  .nav__head button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--rule);border-radius:999px}
  .nav__head .i{width:18px;height:18px}
  .nav>a{padding:15px 2px;border-bottom:1px solid var(--rule-soft)}
  .nav__grp{position:static}
  .nav__grp>button{width:100%;justify-content:space-between;padding:15px 2px;border-bottom:1px solid var(--rule-soft)}
  .nav__grp>button .i{width:14px;height:14px}
  .nav__grp[aria-expanded="true"]>button .i{transform:rotate(180deg)}
  .pop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    background:#ffffff06;border-radius:0;padding:4px 0 10px;margin-inline-start:14px;display:none}
  .nav__grp.is-open .pop{display:grid}
  .nav__lang{display:flex!important;align-items:center;justify-content:space-between;gap:14px;
    margin-top:auto;padding-top:22px;border-top:1px solid var(--rule);color:var(--muted);font-size:.85rem}
  .nav__lang a{display:inline-flex;align-items:center;justify-content:center;min-width:92px;min-height:44px;
    padding:0 18px;border:1px solid var(--ember);border-radius:999px;color:var(--text)}
  html[lang="en"] .nav__lang a{font-family:Vazirmatn,Tahoma,sans-serif}
  html[lang="fa"] .nav__lang a{font-family:Archivo,Arial,sans-serif}
  .hdr__act .lang{display:none}
}
.nav__head,.nav__lang{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(86svh,780px);display:flex;align-items:flex-end;
  padding-block:clamp(90px,14vh,150px) clamp(48px,8vh,86px);overflow:hidden;background:var(--sink)}
.hero__img{position:absolute;inset:0}
.hero__img img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,#0b0b0cf2 0%,#0b0b0cad 32%,#0b0b0c3d 64%,#0b0b0c52 100%),
             linear-gradient(to right,#0b0b0cb3,#0b0b0c26 55%,transparent)}
html[dir="rtl"] .hero::after{background:linear-gradient(to top,#0b0b0cf2 0%,#0b0b0cad 32%,#0b0b0c3d 64%,#0b0b0c52 100%),
             linear-gradient(to left,#0b0b0cb3,#0b0b0c26 55%,transparent)}
.hero__in{position:relative;z-index:1;width:min(var(--shell),100% - var(--gutter)*2);margin-inline:auto}
.hero h1{max-width:16ch}
.hero .lead{margin-top:22px;color:#dfdbd3;font-size:1.18rem}
html[lang="fa"] .hero .lead{font-size:1.05rem}
.hero__act{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.phero{min-height:min(66svh,560px)}
.phero h1{max-width:18ch}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr .92fr;gap:clamp(32px,6vw,92px);align-items:center}
.split--flip>.split__fig{order:-1}
.split__fig{margin:0;position:relative}
.split__fig img{width:100%;height:auto;aspect-ratio:var(--ratio,4/5);object-fit:cover;border-radius:4px}
.split__fig::after{content:"";position:absolute;inset-inline-start:-14px;top:-14px;
  width:100%;height:100%;border:1px solid #c2603a3d;border-radius:4px;pointer-events:none}
html[dir="rtl"] .split__fig::after{inset-inline-start:auto;inset-inline-end:-14px}
.split__txt .tlink{margin-top:10px}
figcaption{margin-top:12px;font-size:.82rem;line-height:1.5;color:var(--dim)}
figcaption b{display:block;font-weight:500;color:var(--muted)}

/* ---------- work cards ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.card{position:relative;display:block;min-height:460px;overflow:hidden;border-radius:4px;background:#1a1a1c}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);filter:saturate(.85)}
.card:hover img{transform:scale(1.05)}
.card::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,#08080af7 0%,#0a0a0ccc 24%,#0b0b0c5c 56%,#0b0b0c0f 100%)}
.card__t{position:absolute;z-index:1;inset-inline:26px;bottom:26px}
.card__n{font-family:var(--body);font-size:.7rem;font-weight:600;letter-spacing:.18em;color:var(--ember)}
html[lang="fa"] .card__n{letter-spacing:.02em;font-size:.8rem}
.card__t h3{margin:10px 0 8px;font-size:clamp(1.5rem,2vw,1.95rem)}
.card__t p{margin:0;font-size:.88rem;line-height:1.55;color:#c8c4bc}

/* ---------- listen ---------- */
.listen{background:linear-gradient(160deg,#17161a,#0d0d0f 62%);border-block:1px solid var(--rule-soft)}
.player{display:grid;gap:4px;margin-top:8px;border-top:1px solid var(--rule)}
.trk{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;width:100%;
  padding:19px 8px;border-bottom:1px solid var(--rule);text-align:start;transition:background .16s}
.trk:hover{background:#ffffff07}
.trk__btn{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:999px;
  border:1px solid #4e4a44;color:var(--text);transition:background .18s,border-color .18s,color .18s}
.trk:hover .trk__btn{border-color:var(--ember);color:var(--ember)}
.trk.is-on .trk__btn{background:var(--ember);border-color:var(--ember);color:#fff}
.trk__btn .i{width:16px;height:16px}
.trk__btn .i--pause{display:none}
.trk.is-on .trk__btn .i--play{display:none}
.trk.is-on .trk__btn .i--pause{display:block}
.trk__m{min-width:0}
.trk__m strong{display:block;font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.3}
html[lang="fa"] .trk__m strong{font-weight:700;font-size:1.1rem}
.trk__m span{display:block;margin-top:3px;font-size:.84rem;color:var(--muted)}
.trk__time{font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums}
.trk__bar{grid-column:1/-1;height:2px;margin-top:2px;background:var(--rule);border-radius:2px;overflow:hidden;display:none}
.trk.is-on .trk__bar{display:block}
.trk__bar i{display:block;height:100%;width:0;background:var(--ember);transition:width .25s linear}

/* ---------- credits table ---------- */
.credits{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,72px)}
.credits>li{list-style:none;padding:22px 0;border-top:1px solid var(--rule)}
.credits h3{font-size:1.45rem}
html[lang="fa"] .credits h3{font-size:1.2rem}
.credits .alt{display:block;margin-top:4px;font-family:var(--body);font-size:.84rem;color:var(--dim)}
html[lang="fa"] .credits .alt{font-family:Archivo,Arial,sans-serif;direction:ltr;text-align:start}
.credits .role{margin:9px 0 0;font-size:.82rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ember)}
html[lang="fa"] .credits .role{letter-spacing:0;text-transform:none;font-size:.92rem}
.credits .meta{margin:7px 0 0;font-size:.85rem;line-height:1.55;color:var(--muted)}
ul.credits{margin:0;padding:0}

/* ---------- plain list ---------- */
.plain{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(28px,5vw,72px);margin:0;padding:0}
.plain li{list-style:none;padding:20px 2px;border-top:1px solid var(--rule);
  font-family:var(--display);font-size:1.4rem}
html[lang="fa"] .plain li{font-family:var(--body);font-size:1.1rem;font-weight:600}
.plain li span{display:block;margin-top:4px;font-family:var(--body);font-size:.84rem;
  font-weight:400;color:var(--dim)}
html[lang="fa"] .plain li span{direction:ltr;text-align:start;font-family:Archivo,Arial,sans-serif}

/* ---------- education table ---------- */
.tbl{display:grid;margin:0;padding:0}
.tbl li{list-style:none;display:grid;grid-template-columns:1.3fr 1fr auto;gap:12px 32px;
  align-items:baseline;padding:20px 2px;border-top:1px solid var(--rule)}
.tbl strong{font-family:var(--display);font-weight:500;font-size:1.22rem;line-height:1.35}
html[lang="fa"] .tbl strong{font-family:var(--body);font-weight:600;font-size:1.02rem}
.tbl em{font-style:normal;font-size:.92rem;color:var(--muted)}
.tbl span{font-size:.82rem;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- books ---------- */
.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:0;padding:0}
.book{list-style:none;display:flex;flex-direction:column;gap:12px;padding:28px;
  background:var(--raise);border:1px solid var(--rule-soft);border-radius:4px}
.book h3{font-size:1.5rem;line-height:1.25}
html[lang="fa"] .book h3{font-size:1.2rem}
.book .alt{font-family:var(--body);font-size:.86rem;color:var(--muted)}
html[lang="fa"] .book .alt{font-family:Archivo,Arial,sans-serif;direction:ltr;text-align:start}
.book .by{font-size:.9rem;color:var(--text)}
.book .note{font-size:.82rem;line-height:1.55;color:var(--dim)}
.book .role{font-size:.78rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--ember)}
html[lang="fa"] .book .role{letter-spacing:0;text-transform:none;font-size:.88rem}
.book__foot{margin-top:auto;padding-top:14px}
.mini{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid #4e4a44;
  border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  transition:border-color .18s,color .18s}
html[lang="fa"] .mini{letter-spacing:0;text-transform:none;font-size:.88rem}
.mini:hover{border-color:var(--ember);color:var(--ember)}
.mini .i{width:13px;height:13px}

/* ---------- production ---------- */
.prod{border-top:1px solid var(--rule)}
.prod__top{display:grid;grid-template-columns:300px 1fr;gap:clamp(28px,5vw,64px);align-items:start}
.prod__top--nop{grid-template-columns:1fr}
.prod__poster{margin:0}
.prod__poster img{width:100%;height:auto;border-radius:4px;border:1px solid var(--rule)}
.prod h2{font-size:clamp(2rem,4vw,3.2rem)}
html[lang="fa"] .prod h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.prod__alt{margin-top:8px;font-family:var(--body);font-size:1rem;color:var(--muted)}
html[lang="fa"] .prod__alt{font-family:Archivo,Arial,sans-serif;direction:ltr;text-align:start}
.prod__meta{display:flex;flex-wrap:wrap;gap:8px 10px;margin:22px 0 26px;padding:0}
.prod__meta li{list-style:none;padding:7px 14px;border:1px solid var(--rule);border-radius:999px;
  font-size:.8rem;color:var(--muted)}
html[lang="fa"] .prod__meta li{font-size:.88rem}
.ctbl{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(24px,4vw,56px);
  margin:clamp(34px,5vw,56px) 0 0;padding:0}
.ctbl div{display:grid;grid-template-columns:minmax(120px,.8fr) 1.4fr;gap:16px;
  padding:13px 0;border-top:1px solid var(--rule-soft);font-size:.9rem}
.ctbl dt{color:var(--dim)}
.ctbl dd{margin:0;color:var(--text)}

/* ---------- video ---------- */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.vids--2{grid-template-columns:repeat(2,1fr)}
.vid{background:var(--raise);border:1px solid var(--rule-soft);border-radius:4px;overflow:hidden}
.vid__frame{position:relative;aspect-ratio:var(--vr,1/1);background:#0a0a0b;overflow:hidden}
.vid__bg{position:absolute;inset:-10%;background-size:cover;background-position:center;
  filter:blur(30px) saturate(.6) brightness(.4);transform:scale(1.1)}
.vid__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.vid__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.vid__go{position:absolute;inset:0;display:grid;place-items:center;background:#0b0b0c4d;
  transition:background .2s}
.vid__go:hover{background:#0b0b0c26}
.vid__go span{display:grid;place-items:center;width:66px;height:66px;border-radius:999px;
  background:#0b0b0cc2;border:1px solid #ffffff3d;backdrop-filter:blur(4px);transition:background .2s,transform .2s}
.vid__go:hover span{background:var(--ember);border-color:var(--ember);transform:scale(1.06)}
.vid__go .i{width:20px;height:20px;margin-inline-start:3px}
html[dir="rtl"] .vid__go .i{margin-inline-start:0;margin-inline-end:3px}
.vid__c{padding:20px 22px}
.vid__c h3{font-size:1.25rem}
html[lang="fa"] .vid__c h3{font-size:1.08rem}
.vid__c p{margin:7px 0 0;font-size:.86rem;line-height:1.55;color:var(--muted)}
.vid--solo{max-width:880px}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal--3{grid-template-columns:repeat(3,1fr)}
.gal figure{margin:0;display:flex;flex-direction:column}
.gal a{display:block;overflow:hidden;border-radius:3px;background:#17171a;cursor:zoom-in}
.gal img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.gal a:hover img{transform:scale(1.045)}
.gal figcaption{margin-top:10px;font-size:.78rem;line-height:1.45}

/* ---------- poem ---------- */
.poem{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(32px,6vw,72px);align-items:center}
.poem__box{padding:clamp(30px,4vw,52px);background:var(--raise);border:1px solid var(--rule);
  border-radius:4px;border-inline-start:2px solid var(--ember)}
.poem__box h3{font-size:1.6rem;margin-bottom:22px}
.poem__fa{font-family:Vazirmatn,Tahoma,sans-serif;direction:rtl;text-align:start;
  font-size:1.35rem;line-height:2.1;color:var(--text)}
.poem__en{margin-top:22px;padding-top:22px;border-top:1px solid var(--rule);
  font-family:Newsreader,Georgia,serif;font-style:italic;direction:ltr;text-align:start;
  font-size:1.1rem;line-height:1.9;color:var(--muted)}
html[lang="fa"] .poem__en{display:none}
.poem__by{margin-top:22px;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ember)}
html[lang="fa"] .poem__by{letter-spacing:0;text-transform:none;font-size:.9rem}

/* ---------- cta + footer ---------- */
.cta{text-align:center;background:linear-gradient(140deg,#1a1713,#0c0c0d 58%)}
.cta .head{margin-inline:auto;text-align:center}
.cta .eyebrow{text-align:center}
.mail{display:inline-block;margin-top:8px;font-family:var(--display);
  font-size:clamp(1.3rem,2.6vw,2rem);color:var(--ember);border-bottom:1px solid #c2603a59;
  padding-bottom:6px;direction:ltr}
html[lang="fa"] .mail{font-family:Archivo,Arial,sans-serif;font-weight:500}
.mail:hover{color:var(--ember-lift);border-color:var(--ember-lift)}
.ftr{border-top:1px solid var(--rule);padding-top:clamp(56px,7vw,86px);background:var(--sink)}
.ftr__top{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding-bottom:clamp(44px,6vw,72px)}
.ftr__top h2{font-size:clamp(1.9rem,3.4vw,2.8rem)}
html[lang="fa"] .ftr__top h2{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.ftr__top .lead{margin:14px 0 24px;font-size:1rem}
.ftr__links{display:grid;gap:14px;align-content:start;padding-top:8px;font-size:.84rem;
  letter-spacing:.07em;text-transform:uppercase}
html[lang="fa"] .ftr__links{letter-spacing:0;text-transform:none;font-size:.95rem}
.ftr__links a{display:inline-flex;align-items:center;gap:10px;color:var(--muted);transition:color .16s}
.ftr__links a:hover{color:var(--ember)}
.ftr__links .i{width:15px;height:15px;flex:none}
.ftr__btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding:20px 0;border-top:1px solid var(--rule-soft);font-size:.76rem;color:var(--dim)}
.ftr__btm a{color:var(--muted)}
.ftr__btm a:hover{color:var(--ember)}

/* ---------- lightbox ---------- */
.lb{width:min(1180px,100vw - 20px);max-width:none;max-height:calc(100dvh - 20px);padding:10px 12px 16px;
  background:#121214;color:var(--text);border:1px solid var(--rule);border-radius:6px;overflow:hidden;direction:ltr}
.lb::backdrop{background:#000000eb;backdrop-filter:blur(6px)}
.lb__top{height:42px;display:flex;align-items:center;justify-content:space-between;
  font-size:.76rem;color:var(--dim);font-variant-numeric:tabular-nums}
.lb button{display:grid;place-items:center;width:44px;height:44px;border-radius:999px;background:#232326}
.lb button:hover{background:var(--ember)}
.lb button .i{width:17px;height:17px}
.lb__prev .i{transform:rotate(90deg)}
.lb__next .i{transform:rotate(-90deg)}
.lb__frame{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:10px}
.lb__frame img{width:100%;max-height:calc(100dvh - 160px);object-fit:contain;margin:auto}
.lb__cap{margin:12px 54px 0;text-align:center;font-size:.84rem;line-height:1.5;color:#cfcbc3;direction:auto}
.lb__cap b{color:var(--dim);font-weight:400}
body.is-lb{overflow:hidden}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .vids{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(3,1fr)}
  .prod__top{grid-template-columns:230px 1fr}
}
@media (max-width:860px){
  :root{--head:64px}
  .split,.poem{grid-template-columns:1fr;gap:40px}
  .split--flip>.split__fig{order:0}
  .split__fig img{aspect-ratio:3/2}
  .ftr__top{grid-template-columns:1fr;gap:34px}
  .ctbl{grid-template-columns:1fr}
  .tbl li{grid-template-columns:1fr;gap:4px}
  .books{grid-template-columns:repeat(2,1fr)}
  .prod__top,.prod__top--nop{grid-template-columns:1fr}
  .prod__poster{max-width:280px}
}
@media (max-width:620px){
  body{font-size:1rem}
  .hero{min-height:min(84svh,660px)}
  .phero{min-height:min(56svh,460px)}
  .hero .lead{font-size:1.02rem}
  .hero__act{gap:10px}
  .hero__act .btn{flex:1 1 100%;justify-content:center}
  .cards,.vids,.books{grid-template-columns:1fr}
  .card{min-height:330px}
  .gal{grid-template-columns:repeat(2,1fr);gap:8px}
  .credits,.plain{grid-template-columns:1fr}
  .trk{grid-template-columns:auto 1fr;gap:14px;padding:16px 4px}
  .trk__time{grid-column:2;margin-top:2px}
  .trk__m strong{font-size:1.12rem}
  .lb{width:calc(100vw - 10px);padding:8px}
  .lb__frame{grid-template-columns:36px minmax(0,1fr) 36px;gap:4px}
  .lb button{width:36px;height:44px;border-radius:6px}
  .lb__cap{margin-inline:38px}
  .split__fig::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
@media print{
  .hdr,.scrim,.vid__go,.lb,.hero__act{display:none}
  body{background:#fff;color:#000}
}

/* per-block ratio helpers */
.split--wide .split__fig{--ratio:3/2}
.split--sq .split__fig{--ratio:1/1}
.poem .split__fig{--ratio:1/1}
.vid--wide .vid__frame{--vr:16/9}
.vid--solo .vid__frame{--vr:16/9}
@media (max-width:860px){.split__fig{--ratio:3/2!important}.poem .split__fig{--ratio:3/2!important}}
.vid__fallback{position:absolute;inset-inline:0;bottom:14px;z-index:2;width:max-content;margin-inline:auto;
  padding:9px 18px;border:1px solid var(--ember);border-radius:999px;background:#0b0b0ce6;
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
html[lang="fa"] .vid__fallback{letter-spacing:0;text-transform:none;font-size:.88rem}

/* =========================================================================
   preloader
   The keyframes below hide it on their own after four seconds, so the page
   is never left covered if the script fails to run.
   ========================================================================= */
.pre{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:24px;
  background:var(--ink);animation:preBail 0s 4s forwards}
body.is-pre{overflow:hidden}
.pre__mark{width:86px;height:86px;flex:none;overflow:visible}
.pre__mark path{fill:none;stroke:var(--ember);stroke-width:5.5;stroke-linecap:round;
  stroke-linejoin:round;stroke-dasharray:var(--len,120);stroke-dashoffset:var(--len,120);
  animation:preDraw 1.15s cubic-bezier(.65,0,.35,1) forwards}
.pre__mark path:nth-child(2){animation-delay:.42s}
.pre__bar{width:140px;height:2px;flex:none;background:#2a2a2d;border-radius:2px;overflow:hidden}
.pre__bar i{display:block;height:100%;width:30%;background:var(--ember);border-radius:2px;
  animation:preSlide 1.25s ease-in-out infinite}
.pre__name{font-family:var(--display);font-size:.78rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--dim)}
html[lang="fa"] .pre__name{font-family:var(--body);letter-spacing:.06em;text-transform:none}
.pre.is-out{opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s}
@keyframes preDraw{to{stroke-dashoffset:0}}
@keyframes preSlide{0%{transform:translateX(-110%)}100%{transform:translateX(400%)}}
@keyframes preBail{to{opacity:0;visibility:hidden;pointer-events:none}}
@media (prefers-reduced-motion:reduce){
  .pre{animation:none;opacity:0;visibility:hidden;pointer-events:none}
  .pre__mark path,.pre__bar i{animation:none}
}

/* =========================================================================
   hero slider
   ========================================================================= */
.hero--slider .hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility .9s}
.hero--slider .hero__slide.is-on{opacity:1;visibility:visible}
.hero--slider .hero__img img{transform:scale(1.06);transition:transform 9s linear}
.hero--slider .hero__slide.is-on .hero__img img{transform:scale(1)}
.hero__stage{position:relative;z-index:1;width:min(var(--shell),100% - var(--gutter)*2);
  margin-inline:auto}
.hero__fixed{position:relative;z-index:2}
.hero__rot{position:relative;min-height:1px}
.hero__panel{opacity:0;visibility:hidden;transition:opacity .55s ease .12s,visibility .55s,
  transform .55s cubic-bezier(.2,.7,.2,1) .12s;transform:translateY(14px)}
.hero__panel.is-on{position:relative;opacity:1;visibility:visible;transform:none}
.hero__panel:not(.is-on){position:absolute;inset-inline-start:0;top:0;width:100%;pointer-events:none}
.hero__dots{display:flex;gap:10px;margin-top:34px;padding:0;list-style:none}
.hero__dot{position:relative;width:46px;height:38px;padding:0;display:grid;align-items:center}
.hero__dot::before{content:"";display:block;width:100%;height:2px;background:#ffffff33;
  border-radius:2px;transition:background .3s}
.hero__dot.is-on::before{background:var(--ember)}
.hero__dot:hover::before{background:#ffffff66}
.hero__dot.is-on:hover::before{background:var(--ember-lift)}
.hero__num{position:absolute;inset-block-start:-16px;inset-inline-start:0;font-size:.6rem;
  letter-spacing:.12em;color:var(--dim)}
@media (prefers-reduced-motion:reduce){
  .hero--slider .hero__slide,.hero__panel{transition:none}
  .hero--slider .hero__img img{transition:none;transform:none}
}

/* =========================================================================
   video: the overlay must really disappear, or it swallows clicks meant for
   the native controls
   ========================================================================= */
.vid__frame.is-playing .vid__go{display:none!important}
.vid__frame.is-playing > img{display:none}
.vid__frame.is-playing .vid__bg{opacity:.35}
.vid__go[hidden]{display:none!important}
.vid__frame video[hidden]{display:none}
.vid__bg{transition:opacity .4s}

/* =========================================================================
   drawer: staggered entrance
   ========================================================================= */
@media (max-width:1080px){
  .nav{transition:transform .42s cubic-bezier(.22,1,.36,1),visibility .42s}
  .nav.is-open > *{animation:navIn .44s cubic-bezier(.22,1,.36,1) both}
  .nav.is-open > *:nth-child(1){animation-delay:.06s}
  .nav.is-open > *:nth-child(2){animation-delay:.10s}
  .nav.is-open > *:nth-child(3){animation-delay:.14s}
  .nav.is-open > *:nth-child(4){animation-delay:.18s}
  .nav.is-open > *:nth-child(5){animation-delay:.22s}
  .nav.is-open > *:nth-child(6){animation-delay:.26s}
  .nav.is-open > *:nth-child(7){animation-delay:.30s}
  .nav.is-open > *:nth-child(8){animation-delay:.34s}
  .nav.is-open > *:nth-child(9){animation-delay:.38s}
  .scrim{transition:opacity .42s ease,visibility .42s}
  @keyframes navIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .nav,.scrim{transition:none}
    .nav.is-open > *{animation:none}
  }
}
