/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(32px,4.5vw,64px);align-items:center;padding-block:clamp(44px,7vh,86px)}
.hero-sub{color:var(--ink2);max-width:52ch;margin-top:22px;font-size:1.03rem}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.hero-fig{min-width:0}
.map-frame{position:relative;border:1px solid var(--ink);background:#EDE7D8}
.hero .map-frame{height:clamp(340px,44vw,470px)}
.tick{position:absolute;width:12px;height:12px;pointer-events:none}
.tick::before{content:"";position:absolute;width:12px;height:2px;top:5px;background:var(--ink)}
.tick::after{content:"";position:absolute;width:2px;height:12px;left:5px;background:var(--ink)}
.tick.tl{top:-7px;left:-7px}.tick.tr{top:-7px;right:-7px}.tick.bl{bottom:-7px;left:-7px}.tick.br{bottom:-7px;right:-7px}
#citymap{width:100%;height:100%;display:block;cursor:crosshair}
.map-cap{display:flex;justify-content:space-between;gap:14px;padding-top:11px;color:var(--ink2)}
.map-cap.light{color:var(--dmut)}

/* ---------- Sections ---------- */
.sec{border-top:1px solid var(--line);padding-block:clamp(56px,9vw,104px)}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:clamp(30px,4.5vw,48px)}
.sec-index{color:var(--clay)}
.sec-head h2{font-size:clamp(1.85rem,3.4vw,2.7rem);text-transform:uppercase}
html[lang="fa"] .sec-head h2{text-transform:none}
.sec-link{margin-inline-start:auto;display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink2);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
html[lang="fa"] .sec-link{letter-spacing:0;font-size:.76rem}
.sec-link:hover{color:var(--ink)}
.band{background:var(--paper2);border-block:1px solid var(--line)}
.sec-sub{color:var(--ink2);max-width:56ch;margin:-14px 0 34px}

/* ---------- Featured (dark) ---------- */
.featured{background:var(--dark);color:var(--dtext)}
.fgrid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,5vw,72px);align-items:center;padding-block:clamp(64px,9vw,112px)}
.flabel{color:var(--dmut);margin-bottom:22px}
.flabel .fnum{color:var(--clay)}
.featured h2{font-size:clamp(1.9rem,3.6vw,3rem);color:var(--paper)}
.fdesc{color:#C9C2AE;margin-top:20px;max-width:52ch}
.fstat{margin-top:26px}
.featured .stat{color:#CFC8B0}
.featured .tags{margin-top:20px}
.featured .tag{border-color:#4A463A;color:#CFC8B0}
.featured .btn{margin-top:32px}
.mock-frame{position:relative;border:1px solid var(--dline);padding:14px;background:var(--dark2)}
.mock-frame .tick::before,.mock-frame .tick::after{background:var(--dmut)}
.mock-frame svg{width:100%;height:auto}
.mock-frame figcaption{border-top:1px solid var(--dline);margin-top:14px;padding-top:11px;display:flex;justify-content:space-between;gap:12px}

/* ---------- Project cards ---------- */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pcard{border:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;text-decoration:none;transition:transform .3s,border-color .3s,box-shadow .3s}
.pcard:hover{transform:translateY(-4px);border-color:var(--ink);box-shadow:0 16px 32px -20px rgba(33,31,25,.4)}
.thumb{aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:#EFE9DB}
.thumb svg{width:100%;height:100%;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .thumb svg{transform:scale(1.035)}
.pbody{padding:20px 20px 22px;display:flex;flex-direction:column;gap:13px;flex:1}
.pmeta{display:flex;justify-content:space-between;gap:10px;color:var(--ink2)}
.ptitle{font-size:1.32rem}
.pshort{color:var(--ink2);font-size:.95rem;line-height:1.7}
.pfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:6px}
.go{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none}
html[lang="fa"] .go{letter-spacing:0;font-size:.74rem}

/* ---------- Experiments ---------- */
.xgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.xtile{position:relative;border:1px dashed rgba(33,31,25,.42);padding:28px 26px 24px;transition:transform .3s,background .3s,border-color .3s}
.xtile:hover{border-style:solid;border-color:var(--ink);background:var(--paper);transform:translateY(-3px)}
.xnum{position:absolute;top:22px;inset-inline-end:24px;font-size:1.4rem;color:#C6BFA8}
.xglyph{color:var(--ink);margin-bottom:18px}
.xtile h3{font-size:1.24rem;margin-bottom:10px}
.xtile p{color:var(--ink2);font-size:.95rem;max-width:44ch}
.xfoot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:22px;flex-wrap:wrap}

/* ---------- Writing rows ---------- */
.arow{display:grid;grid-template-columns:44px 1fr 30px;gap:20px;align-items:start;padding:24px 14px;margin-inline:-14px;border-top:1px solid var(--line);text-decoration:none;transition:background .25s}
.arow:last-of-type{border-bottom:1px solid var(--line)}
.arow:hover{background:var(--paper2)}
.arow .idx{color:var(--clay);padding-top:5px}
.arow h3{font-size:1.28rem;transition:color .2s}
.aex{color:var(--ink2);font-size:.94rem;margin-top:7px;max-width:72ch}
.ameta{display:flex;gap:10px;flex-wrap:wrap;color:var(--ink2);margin-top:12px}
.ameta .sep{color:var(--line)}
.aarr{padding-top:6px;color:var(--ink)}
.arow:hover .aarr{color:var(--clay)}

/* ---------- Detail pages ---------- */
.narrow{max-width:880px}
.crumb{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px;color:var(--ink2)}
.crumb a{text-decoration:none;color:var(--clay)}
.crumb a:hover{text-decoration:underline}
.h1-md{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.lede{font-size:1.12rem;color:var(--ink2);margin-top:20px;max-width:62ch}
.dmeta{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;border-block:1px solid var(--line);padding-block:22px;margin-block:30px}
.dmeta dt{color:var(--ink2);margin-bottom:6px}
.dmeta dd{font-weight:600;font-size:.98rem}
.body{margin-block:8px}
.body p{max-width:70ch;color:#3B372C;margin-bottom:1.25em;font-size:1.02rem}
.subh{margin:38px 0 16px;color:var(--clay)}
.feat li{display:flex;gap:14px;align-items:baseline;padding-block:12px;border-top:1px solid var(--line);max-width:70ch}
.feat .fsq{width:8px;height:8px;background:var(--sage);flex:none;transform:translateY(-1px)}
.tags-row{margin-top:30px}
.figdet{margin-block:36px}
.figdet svg{width:100%;height:auto}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:20px;border-top:1px solid var(--line);margin-top:52px;padding-top:26px}
.pager a{text-decoration:none;display:flex;flex-direction:column;gap:7px;align-items:flex-start}
.pager a.nx{align-items:flex-end;text-align:end}
.pager .mono{color:var(--clay)}
.pager strong{font-size:1.05rem;font-weight:680}
.vnote{border:1px dashed rgba(33,31,25,.4);background:var(--paper2);padding:22px;margin-top:44px;max-width:70ch}
.vnote p:last-child{color:var(--ink2);font-size:.97rem}
.vn-t{color:var(--clay);margin-bottom:10px}

/* ---------- About ---------- */
.ab-grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(32px,5vw,72px);margin-top:44px}
.ab-text p{color:#3B372C;margin-bottom:1.3em;max-width:62ch;font-size:1.05rem}
.ab-text p:first-child{font-size:1.18rem;color:var(--ink)}
.sheet{border:1px solid var(--line);padding:26px;background:var(--paper);align-self:start}
.sh-t{color:var(--clay);margin-bottom:20px}
.sh-row{padding-block:16px;border-top:1px solid var(--line)}
.sh-row .mono{display:block;color:var(--ink2);margin-bottom:8px}
.sh-row p{font-size:.97rem}
.sh-links a{display:flex;justify-content:space-between;gap:10px;text-decoration:none;padding-block:7px;font-size:.95rem;color:var(--ink)}
.sh-links a:hover .sh-h{color:var(--clay)}
.sh-h{color:var(--ink2);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em}
.ab-map{margin-top:56px}
.ab-map svg{width:100%;height:auto}

/* ---------- Now ---------- */
.now-list{margin-top:46px;max-width:72ch}
.now-list li{display:flex;gap:18px;align-items:baseline;padding-block:20px;border-top:1px solid var(--line)}
.now-list .nsq{width:10px;height:10px;background:var(--clay);flex:none;transform:translateY(-1px)}
.now-list p{font-size:1.14rem}
.now-note{color:var(--ink2);margin-top:30px;max-width:60ch}
.now-ref{margin-top:26px}
.now-ref a{color:var(--clay);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.now-ref a:hover{text-decoration:underline}

/* ---------- Contact ---------- */
.contact-sub{color:var(--ink2);margin-top:18px;max-width:50ch;font-size:1.05rem}
.email-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:40px}
.email{font-size:clamp(1.3rem,3.6vw,2.1rem);font-weight:680;text-decoration:none;border-bottom:3px solid var(--sage);padding-bottom:4px;transition:color .2s,border-color .2s}
.email:hover{color:var(--sage)}
.crow-list{margin-top:52px;border-top:1px solid var(--line);max-width:640px}
.crow{display:grid;grid-template-columns:110px 1fr 24px;gap:16px;align-items:center;padding-block:18px;border-bottom:1px solid var(--line);text-decoration:none;transition:background .25s}
.crow:hover{background:var(--paper2)}
.crow .cl{color:var(--clay)}
.crow .ch{font-weight:600}
.mini{color:var(--ink2);margin-top:34px}

/* ---------- 404 ---------- */
.nf{padding-block:clamp(70px,12vh,130px)}
.nf p.nfp{color:var(--ink2);margin-top:18px}
.nf .btn{margin-top:32px}

/* ---------- Mockup SVG type ---------- */
.mk-l{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:#8B8470}
.mk-v{font-family:var(--sans);font-weight:600;font-size:16px;fill:#211F19}
.mk-div{stroke:#28251E;stroke-opacity:.12}
.mk-bar{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:#6B6553}
.mk-tag{font-family:var(--mono);font-size:11px;fill:#F4F1E9;letter-spacing:.08em}
.mk-chip{font-family:var(--mono);font-size:9px;letter-spacing:.1em;fill:#5F6F4E}
.mk-rec{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;fill:#211F19}
.mk-btn{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:#F4F1E9}
.mk-btn2{font-family:var(--mono);font-size:10px;letter-spacing:.14em;fill:#211F19}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .hero .map-frame{height:clamp(300px,52vw,420px)}
  .fgrid{grid-template-columns:1fr}
  .ab-grid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .pgrid .pcard:last-child{grid-column:1/-1}
  .dmeta{grid-template-columns:1fr 1fr}
}
@media (max-width:880px){
  .main-nav,.hdr-cta{display:none}
  .burger{display:inline-flex}
  .xgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pgrid{grid-template-columns:1fr}
  .pgrid .pcard:last-child{grid-column:auto}
  .arow{grid-template-columns:1fr 24px;gap:10px}
  .arow .idx{display:none}
  .f-grid{grid-template-columns:1fr;gap:34px}
  .f-bot{flex-direction:column}
  .sec-head{flex-wrap:wrap}
  .sec-link{margin-inline-start:0;width:100%}
  .crow{grid-template-columns:86px 1fr 24px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ---------- System states (loading / error / empty) ---------- */
.sysmsg{padding-block:clamp(70px,14vh,140px)}
.empty{color:var(--ink2);padding-block:18px}
.article-body p{max-width:70ch;color:#3B372C;margin-bottom:1.25em;font-size:1.02rem}