:root{
  --paper:#FBF8F1; --ink:#211C16; --soft:#6E6459; --rule:#E3DACA;
  --accent:#8C5A3C; --panel:#F4EFE4;
  --serif:'EB Garamond','PT Serif',Georgia,'Times New Roman',serif;
  --body:'PT Serif',Georgia,'Times New Roman',serif;
  --arab:'Noto Naskh Arabic','Vazirmatn',serif;
  --size:1.075rem;
}
html[data-night="1"]{
  --paper:#16130F; --ink:#E7DECF; --soft:#9C9184; --rule:#332C24;
  --accent:#C79268; --panel:#1E1A14;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:var(--size);line-height:1.75;
  transition:background .3s,color .3s}
html[lang="fa"] body{font-family:var(--arab);line-height:2.05}
a{color:inherit;text-decoration:none}
.wrap{max-width:62rem;margin:0 auto;padding:0 1.6rem}
.narrow{max-width:36rem;margin:0 auto}

/* header */
header.site{border-bottom:1px solid var(--rule);position:sticky;top:0;
  background:var(--paper);z-index:20;backdrop-filter:saturate(1.2) blur(6px)}
header.site .bar{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;padding:.95rem 0;flex-wrap:wrap}
header.site .who{font-family:var(--serif);font-size:1.02rem;letter-spacing:.055em;
  text-transform:uppercase;white-space:nowrap}
html[lang="fa"] header.site .who{text-transform:none;letter-spacing:0}
nav.main{display:flex;gap:1.35rem;flex-wrap:wrap;font-size:.87rem;letter-spacing:.045em;
  text-transform:uppercase;color:var(--soft)}
html[lang="fa"] nav.main{text-transform:none;letter-spacing:0;font-size:.95rem}
nav.main a:hover,nav.main a.on{color:var(--accent)}
.langbar{display:flex;gap:.28rem 1.15rem;flex-wrap:wrap;padding:0 0 .8rem;
  font-size:.83rem;color:var(--soft);border-top:1px solid var(--rule);padding-top:.6rem}
.langbar a:hover{color:var(--accent)}
.langbar .cur{color:var(--accent)}
html[lang="fa"] .langbar{font-size:.92rem}

/* cover */
.cover{min-height:100vh;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:4rem 1.5rem}
.cover .orn{width:46px;height:46px;margin-bottom:2.4rem;opacity:.55}
.cover h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,6vw,3.9rem);
  line-height:1.12;margin:0 0 .5rem}
.cover .sub{color:var(--soft);font-style:italic;font-size:1.05rem;margin-bottom:.4rem}
.cover .years{color:var(--accent);letter-spacing:.3em;font-size:.8rem;
  text-transform:uppercase;margin-bottom:3.2rem}
.langs{display:flex;flex-wrap:wrap;gap:.55rem 1.55rem;justify-content:center;
  max-width:38rem;font-family:var(--serif);font-size:1.32rem}
.langs a{border-bottom:1px solid transparent;padding-bottom:.12rem}
.langs a:hover{border-color:var(--accent);color:var(--accent)}
.cover .note{margin-top:3rem;color:var(--soft);font-size:.82rem;letter-spacing:.18em;
  text-transform:uppercase}

/* hero */
.hero{padding:5.5rem 0 3.4rem;border-bottom:1px solid var(--rule);text-align:center}
.hero h1{font-family:var(--serif);font-weight:400;margin:0 0 .8rem;
  font-size:clamp(2rem,5.2vw,3.4rem);line-height:1.15}
.hero .role{color:var(--soft);font-style:italic;margin-bottom:1.9rem}
.hero .creds{color:var(--soft);font-size:.9rem;max-width:34rem;margin:0 auto}
.epi{font-family:var(--serif);font-style:italic;color:var(--soft);
  max-width:32rem;margin:2.6rem auto 0;font-size:1.12rem;line-height:1.7}

/* section headings */
h2.sec{font-family:var(--serif);font-weight:400;font-size:.82rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent);margin:3.6rem 0 1.5rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--rule)}
html[lang="fa"] h2.sec{letter-spacing:0;text-transform:none;font-size:1rem}
.page-title{font-family:var(--serif);font-weight:400;text-align:center;
  font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.2;margin:0 0 2.4rem}
.page-title + h2.sec{margin-top:0}

/* work list */
ul.works{list-style:none;padding:0;margin:0}
ul.works li{border-bottom:1px solid var(--rule)}
ul.works li:last-child{border-bottom:0}
ul.works a,ul.works .dim{display:flex;align-items:baseline;gap:1.1rem;
  padding:1.05rem .2rem;flex-wrap:wrap}
ul.works a:hover{background:var(--panel)}
ul.works .t{font-family:var(--serif);font-size:1.28rem;flex:1 1 15rem}
ul.works .dim .t{color:var(--soft)}
ul.works .meta{color:var(--soft);font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap}
html[lang="fa"] ul.works .meta{letter-spacing:0;text-transform:none;font-size:.9rem}
.chips{display:flex;gap:.35rem;flex-wrap:wrap}
.chip{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);border:1px solid var(--rule);border-radius:2px;padding:.13rem .42rem}
.chip.self{border-color:var(--accent);color:var(--accent)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper);padding:1.6rem 1.4rem;display:block;min-height:9.5rem}
.card:hover{background:var(--panel)}
.card .k{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.card h3{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:.6rem 0 .5rem;
  line-height:1.25}
.card p{margin:0;color:var(--soft);font-size:.88rem}
html[lang="fa"] .card .k{letter-spacing:0;text-transform:none;font-size:.85rem}

/* reading */
article.read{padding:3.6rem 0 6rem}
article.read h1{font-family:var(--serif);font-weight:400;line-height:1.2;
  font-size:clamp(1.8rem,4.4vw,2.7rem);margin:0 0 .9rem;text-align:center}
article.read .form{text-align:center;color:var(--accent);font-size:.72rem;
  letter-spacing:.24em;text-transform:uppercase;margin-bottom:2.2rem}
html[lang="fa"] article.read .form{letter-spacing:0;text-transform:none;font-size:.9rem}
article.read .epigraph{font-style:italic;color:var(--soft);text-align:center;
  margin:0 auto 2.6rem;max-width:26rem;font-size:.98rem;white-space:pre-line}
article.read .body p{margin:0 0 1.35rem;text-align:justify;hyphens:auto}
article.read .body.drop p:first-of-type::first-letter{font-family:var(--serif);
  font-size:3.1rem;line-height:.82;float:left;padding:.16em .1em 0 0;color:var(--accent)}
html[lang="fa"] article.read .body p{text-align:right}
.rule-orn{display:block;margin:3.4rem auto;width:34px;opacity:.4}

.prevnext{display:flex;justify-content:space-between;gap:1.5rem;margin-top:3.4rem;
  padding-top:1.5rem;border-top:1px solid var(--rule)}
.prevnext .pn{display:flex;flex-direction:column;gap:.25rem;max-width:47%}
.prevnext .n{text-align:end;align-items:flex-end}
.prevnext .ar{color:var(--soft);font-size:.78rem}
.prevnext .pt{font-family:var(--serif);font-size:1.08rem;line-height:1.3}
.prevnext .pn:hover .pt{color:var(--accent)}

/* switcher */
.switch{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.8rem}
.switch .lbl{width:100%;text-align:center;color:var(--soft);font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:.5rem}
html[lang="fa"] .switch .lbl{letter-spacing:0;text-transform:none;font-size:.88rem}
.switch a,.switch span{font-size:.86rem;padding:.28rem .72rem;border:1px solid var(--rule);
  border-radius:2px;color:var(--soft)}
.switch a:hover{border-color:var(--accent);color:var(--accent)}
.switch .cur{border-color:var(--accent);color:var(--accent)}

/* tools */
.tools{position:fixed;inset-inline-end:1.1rem;bottom:1.1rem;display:flex;gap:.4rem;
  background:var(--paper);border:1px solid var(--rule);border-radius:3px;
  padding:.32rem;z-index:30}
.tools button{font:inherit;font-size:.85rem;background:none;border:0;color:var(--soft);
  cursor:pointer;padding:.24rem .55rem;border-radius:2px;font-family:var(--serif)}
.tools button:hover{color:var(--accent);background:var(--panel)}

/* prose */
.prose h1{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.6vw,2.9rem);
  margin:0 0 1.8rem;line-height:1.18;text-align:center}
.prose p{margin:0 0 1.3rem}
.voice{border-top:1px solid var(--rule);padding:1.8rem 0}
.voice p{margin:0 0 .7rem}
.voice cite{font-style:normal;color:var(--accent);font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase}
html[lang="fa"] .voice cite{letter-spacing:0;text-transform:none;font-size:.95rem}

/* gallery */
.gal{columns:3 15rem;column-gap:1rem}
.gal figure{margin:0 0 1rem;break-inside:avoid}
.gal img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.gal-open{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.gal-open:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.lightbox[hidden]{display:none}
.lightbox{position:fixed;inset:0;z-index:1000;background:rgba(8,7,6,.96);color:#fff;
  display:grid;grid-template-rows:1fr auto;overscroll-behavior:contain}
.lb-stage{min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:3.5rem 4.7rem 1rem;touch-action:pinch-zoom}
.lb-stage img{display:block;max-width:100%;max-height:100%;object-fit:contain;
  transform-origin:center;transition:transform .14s ease;user-select:none;-webkit-user-drag:none}
.lb-btn{position:absolute;border:0;border-radius:999px;background:rgba(25,22,19,.72);
  color:#fff;cursor:pointer;font:1.7rem/1 var(--serif);width:2.8rem;height:2.8rem}
.lb-btn:hover,.lb-btn:focus-visible,.lb-tools button:hover,.lb-tools button:focus-visible{
  background:rgba(140,90,60,.95);outline:none}
.lb-close{inset-block-start:.8rem;inset-inline-end:.9rem;font-size:1.5rem}
.lb-prev{inset-inline-start:.9rem;top:50%;transform:translateY(-50%)}
.lb-next{inset-inline-end:.9rem;top:50%;transform:translateY(-50%)}
.lb-tools{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:.8rem 1rem 1.1rem}
.lb-tools button{border:0;border-radius:999px;background:rgba(45,40,35,.9);color:#fff;
  cursor:pointer;font:1rem/1 var(--serif);min-width:2.7rem;height:2.4rem;padding:0 .8rem}
body.lb-open{overflow:hidden}
@media(max-width:600px){.lb-stage{padding:3.8rem .5rem 4.2rem}.lb-prev,.lb-next{top:auto;bottom:.85rem}
  .lb-prev{inset-inline-start:.8rem}.lb-next{inset-inline-end:.8rem}.lb-tools{padding:.8rem 4rem 1rem}}
.gallery-wrap{padding-top:3.6rem;padding-bottom:2rem}
.empty{border:1px dashed var(--rule);padding:3.5rem 1.5rem;text-align:center;
  color:var(--soft);font-style:italic}

footer.site{border-top:1px solid var(--rule);margin-top:5rem;padding:2.4rem 0 3.4rem;
  color:var(--soft);font-size:.82rem;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap}
.back{display:inline-block;margin-top:3rem;color:var(--soft);font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase}
.back:hover{color:var(--accent)}
html[lang="fa"] .back{letter-spacing:0;text-transform:none;font-size:.95rem}
@media print{header.site,.tools,.switch,footer.site,.back{display:none}
  body{background:#fff;color:#000}}
@media(max-width:600px){
  .wrap{padding-inline:1rem}
  header.site{position:relative;backdrop-filter:none}
  header.site .bar{gap:.65rem;padding:.75rem 0 .65rem}
  header.site .who{width:100%;font-size:.92rem;letter-spacing:.04em}
  nav.main{gap:.35rem 1rem;font-size:.76rem;letter-spacing:.025em;line-height:1.45}
  .langbar{flex-wrap:nowrap;overflow-x:auto;gap:1rem;padding:.55rem 0 .65rem;
    white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .langbar::-webkit-scrollbar{display:none}
  .hero{padding:3.8rem 0 2.8rem}
  .hero .role{margin-bottom:1.3rem}
  .epi{margin-top:2rem}
  h2.sec{margin-top:2.8rem}
  article.read{padding:2.8rem 0 4.5rem}
  article.read .body p{text-align:start;hyphens:none}
  html[lang="fa"] article.read .body p{text-align:right}
  .gallery-wrap{padding-top:2.8rem;padding-bottom:1.5rem}
  .gal{columns:2;column-gap:.6rem}
  .gal figure{margin-bottom:.6rem}
  .tools{right:.7rem;bottom:.7rem;padding:.22rem;background:color-mix(in srgb,var(--paper) 90%,transparent)}
  .tools button{min-width:2.4rem;min-height:2.4rem;padding:.2rem .45rem}
  footer.site{margin-top:3.5rem;padding:2rem 0 4.8rem}
}