/* fonts: SIL Open Font License 1.1 */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/vazir-arabic-n300-800.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(fonts/vazir-latin-n300-800.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/naskh-arabic-n400-700.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/garamond-latin-ext-i400-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/garamond-latin-i400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/garamond-latin-ext-n400-700.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/garamond-latin-n400-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Nik Aein Lohrasbi — portfolio, second form
   The form follows the notebooks:
   - lemniscate: "infinity as the end and the beginning fold upon themselves"
   - strata: sediment that can be reactivated, not ossified
   - no privileged ordering: three arrangements, none of them the index
   The surface follows the collages: muraqqa margin, gold jadval rules,
   tile bands, vermilion redaction bars, a red seal.
   ========================================================================== */

:root{
  color-scheme:light;
  --bg:#FBF7EE;
  --surface:#FFFCF6;
  --margin:#F3ECDD;
  --ink:#2B2926;
  --ink-2:#4A4744;
  --mute:#7C766C;
  --rule:#DDD2B8;
  --rule-2:#EAE2CF;
  --gold:#A88B4E;
  --red:#B8612F;
  --lapis:#3F3577;
  --indigo:#3F3577;
  --violet:#534375;
  --band:#4B4373;
  --shadow:0 1px 1px rgba(63,53,119,.05),0 18px 40px -24px rgba(63,53,119,.35);

  --f-fa:"Noto Naskh Arabic","EB Garamond",serif;
  --f-en:"EB Garamond","Noto Naskh Arabic",Georgia,serif;
  --f-ui:"Vazirmatn",system-ui,Tahoma,sans-serif;
  --f-mono:"IBM Plex Mono","Vazirmatn",ui-monospace,monospace;

  --max:76rem;
  --edge:clamp(1rem,5vw,4rem);
  --measure:36rem;
  --ease:cubic-bezier(.2,.7,.2,1);

  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' viewBox='0 0 24 14'%3E%3Crect width='24' height='14' fill='%234B4373'/%3E%3Cpath d='M6 2 L10 7 L6 12 L2 7Z' fill='%23A88B4E'/%3E%3Ccircle cx='6' cy='7' r='1.3' fill='%234B4373'/%3E%3Ccircle cx='18' cy='7' r='1.6' fill='%23B8612F' fill-opacity='.8'/%3E%3Ccircle cx='18' cy='7' r='.7' fill='%23FBF7EE'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#15131F;--surface:#1C1A29;--margin:#242036;
    --ink:#EFE8DA;--ink-2:#D6CEBF;--mute:#9D95A8;
    --rule:#37314A;--rule-2:#2A2639;
    --gold:#C9AE72;--red:#E08A57;--lapis:#B7AEEA;--indigo:#C3BBF0;--violet:#A99CD0;--band:#2E2850;
    --shadow:0 1px 1px rgba(0,0,0,.4),0 22px 50px -24px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#15131F;--surface:#1C1A29;--margin:#242036;
  --ink:#EFE8DA;--ink-2:#D6CEBF;--mute:#9D95A8;
  --rule:#37314A;--rule-2:#2A2639;
  --gold:#C9AE72;--red:#E08A57;--lapis:#B7AEEA;--indigo:#C3BBF0;--violet:#A99CD0;--band:#2E2850;
  --shadow:0 1px 1px rgba(0,0,0,.4),0 22px 50px -24px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.traveller{display:none}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-fa);font-size:1.0625rem;line-height:1.95;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="dark"] body::before{mix-blend-mode:screen;opacity:.035}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body::before{mix-blend-mode:screen;opacity:.035}}
[lang="en"]{font-family:var(--f-en);line-height:1.55}
img{max-width:100%}
figure{margin:0}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:1px;text-decoration-color:var(--rule);text-underline-offset:.3em;transition:color .2s,text-decoration-color .2s}
a:hover{color:var(--red);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
::selection{background:var(--red);color:var(--bg)}
.lat{font-family:var(--f-mono);unicode-bidi:isolate}
.skip{position:absolute;inset-inline-start:1rem;top:-3rem;z-index:50;background:var(--ink);color:var(--bg);padding:.4rem .8rem;font-family:var(--f-ui);font-size:.85rem;text-decoration:none}
.skip:focus{top:1rem}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--edge)}

.app{font-family:var(--f-ui);font-weight:500;font-size:.8125rem;line-height:1.7;color:var(--mute)}
.app [lang="en"],.app .lat,.app.lat{font-family:var(--f-mono);font-weight:400;font-size:.72rem;letter-spacing:.05em}
.caps{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase}

/* ---- ornaments --------------------------------------------------------- */
.tileband{height:14px;background:var(--tile) repeat-x center/24px 14px;border-block:1px solid var(--gold);opacity:.9}
:root[data-theme="dark"] .tileband{opacity:.55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tileband{opacity:.55}}
.jadval{display:block;padding:clamp(.6rem,1.6vw,1rem);background:var(--margin);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 5px var(--margin),inset 0 0 0 6px var(--gold),var(--shadow)}
.jadval img{display:block;width:100%;height:auto;background:var(--rule-2)}
.seal{display:grid;place-items:center;width:2.3rem;height:2.3rem;background:var(--red);color:#F7F1E3;font-family:var(--f-fa);font-size:1.2rem;line-height:1;padding-block-start:.15rem;transform:rotate(-4deg);box-shadow:inset 0 0 0 2px var(--red),inset 0 0 0 3px rgba(247,241,227,.55);transition:transform .5s var(--ease)}

/* ---- nav ---------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block-end:1px solid var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.1rem}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand:hover .seal{transform:rotate(4deg)}
.brand-t{display:flex;flex-direction:column;line-height:1.25}
.brand-t b{font-family:var(--f-ui);font-weight:600;font-size:.95rem}
.brand-t span{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.links{display:flex;align-items:center;gap:.15rem;margin:0;padding:0;list-style:none}
.links a{display:flex;flex-direction:column;align-items:center;padding:.3rem .75rem;text-decoration:none;font-family:var(--f-ui);font-size:.86rem;font-weight:500;color:var(--ink-2);line-height:1.35;border-block-end:2px solid transparent}
.links a .lat{font-size:.58rem;letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.links a:hover,.links a[aria-current]{color:var(--red);border-color:var(--red)}
.theme{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1px solid var(--rule);background:transparent;color:var(--ink);cursor:pointer;transition:border-color .2s,color .2s,transform .4s var(--ease)}
.theme:hover{border-color:var(--gold);color:var(--gold);transform:rotate(25deg)}
.theme svg{width:1.05rem;height:1.05rem}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:block}:root:not([data-theme="light"]) .theme .moon{display:none}}
@media (max-width:56rem){.links{display:none}}

.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.75rem 1.3rem;font-family:var(--f-ui);font-weight:500;font-size:.9rem;line-height:1.2;text-decoration:none;border:1px solid var(--ink);color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn.solid:hover{background:var(--red);border-color:var(--red);color:#F7F1E3}
.btn:hover{border-color:var(--red);color:var(--red)}
.btn .lat{font-size:.7rem;opacity:.75}
.arrow{display:inline-block;transition:transform .3s var(--ease)}
a:hover .arrow{transform:translateX(-5px)}

/* ---- epigraph ----------------------------------------------------------- */
.epi{margin:0;max-width:44rem}
.epi p{margin:0;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.9;color:var(--ink-2)}
.epi p[lang="en"]{font-style:italic;font-size:clamp(1.1rem,1.8vw,1.3rem);line-height:1.5;color:var(--mute);margin-block-start:.3rem}
.epi cite{display:block;margin-block-start:.6rem;font-style:normal}

/* ---- hero ---------------------------------------------------------------- */
.hero{padding-block:clamp(2.5rem,7vh,5rem) 0}
.hero-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:1.5rem clamp(2rem,6vw,5rem);align-items:end}
.hero h1{margin:0;font-weight:500;font-size:clamp(2.6rem,7vw,5.2rem);line-height:1.2}
.hero .en-name{display:block;margin-block-start:.2rem;font-family:var(--f-en);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.1;color:var(--mute);text-align:right}
.hero .lead p{margin:0 0 .7rem;font-size:1.08rem;color:var(--ink-2)}
.hero .lead p[lang="en"]{font-size:1.15rem;color:var(--mute)}
.hero .cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-block-start:1.2rem}
@media (max-width:52rem){.hero-top{grid-template-columns:1fr}}

/* ---- lemniscate (the path) ------------------------------------------------ */
.path{margin-block-start:clamp(1.5rem,4vh,2.5rem);position:relative}
.path svg{display:block;width:100%;height:auto;overflow:visible}
.path .v{display:none}
@media (max-width:40rem){.path .h{display:none}.path .v{display:block;max-width:30rem;margin-inline:auto}}
.lem{fill:none;stroke:var(--gold);stroke-width:1.3}
.lem-2{fill:none;stroke:var(--gold);stroke-width:.6;opacity:.5}
.lem-draw{stroke-dasharray:3200;stroke-dashoffset:3200;animation:draw 3.2s var(--ease) .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.traveller{fill:var(--red)}
.loop-l{font-family:var(--f-ui);font-size:15px;font-weight:600;fill:var(--ink)}
.loop-s{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;fill:var(--mute)}
.now text{font-family:var(--f-ui);font-size:13px;font-weight:600;fill:var(--red)}
.now circle{fill:var(--bg);stroke:var(--red);stroke-width:1.4}
.node .dot{fill:var(--ink);stroke:var(--bg);stroke-width:3;transition:fill .3s}
.node .halo{fill:none;stroke:var(--gold);stroke-width:1;opacity:0;transition:opacity .3s}
.node text.fa{font-family:var(--f-fa);font-size:21px;fill:var(--ink);transition:fill .2s}
.node text.en{font-family:var(--f-en);font-style:italic;font-size:13.5px;fill:var(--mute)}
.node:hover .dot,.node:focus-visible .dot{fill:var(--red)}
.node:hover .halo,.node:focus-visible .halo{opacity:1}
.node:hover text.fa,.node:focus-visible text.fa{fill:var(--red)}
.node.climbed .dot{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.node.rem .dot{fill:var(--bg);stroke:var(--mute);stroke-dasharray:2 2;stroke-width:1.2}
.node.rem text{fill:var(--mute)}
.path-note{display:grid;grid-template-columns:1fr 1fr;gap:1rem 3rem;margin-block-start:1.4rem;padding-block-start:1rem;border-block-start:1px solid var(--rule)}
.path-note p{margin:0}
@media (max-width:40rem){.path-note{grid-template-columns:1fr}}

/* ---- section heads ------------------------------------------------------ */
.section{padding-block:clamp(4rem,11vh,7rem) 0}
.sh{display:grid;grid-template-columns:auto 1fr;align-items:end;gap:1rem 1.6rem;margin-block-end:clamp(2rem,5vh,3rem)}
.sh .num{font-family:var(--f-mono);font-size:.75rem;color:var(--gold);letter-spacing:.1em;align-self:start;padding-block-start:.7rem}
.sh h2{position:relative;margin:0;padding-block-end:.6rem;font-weight:500;font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.3}
.sh h2::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:.42rem;width:2.6rem;background:var(--red);transition:width .5s var(--ease)}
.section:hover .sh h2::after{width:4.4rem}
.sh h2 span{display:block;font-family:var(--f-en);font-style:italic;font-weight:400;font-size:.52em;color:var(--mute);line-height:1.4;text-align:right}
.sh .lede{grid-column:2;margin:0;max-width:42rem}

/* ---- strata (sediment / reactivation) ------------------------------------ */
.strata{border-block-start:1px solid var(--gold)}
.stratum{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1.5rem;padding-block:1.8rem}
.st-label{position:sticky;top:5.5rem;align-self:start}
.st-label b{display:block;font-family:var(--f-fa);font-weight:500;font-size:2.2rem;line-height:1.2;color:var(--ink)}
.st-label .caps{display:block;color:var(--gold)}
.st-label .app{display:block;margin-block-start:.3rem}
.st-works{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:1.6rem}
.card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.card:hover{color:var(--ink)}
.card.wide{grid-column:span 2}
.card .ph{position:relative;overflow:hidden;aspect-ratio:4/5;background:var(--rule-2)}
.card.wide .ph{aspect-ratio:16/10}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.card:hover .ph img{transform:scale(1.04)}
.card .body{padding-block-start:1rem}
.card .meta{margin:0 0 .35rem}
.card h3{margin:0;font-weight:500;font-size:1.6rem;line-height:1.35}
.card h3 [lang="en"]{display:block;font-style:italic;font-weight:400;font-size:.62em;color:var(--mute);line-height:1.35;text-align:right}
.card .ex{margin:.55rem 0 0;color:var(--ink-2);font-size:.98rem;line-height:1.85;max-width:34rem}
.card .go{display:inline-flex;gap:.4rem;margin-block-start:.7rem;font-family:var(--f-ui);font-weight:500;font-size:.85rem;color:var(--red)}
.remainder{display:flex;flex-direction:column;justify-content:center;gap:.4rem;padding:1.4rem;border:1px dashed var(--rule);color:var(--mute);min-height:12rem}
.remainder b{font-family:var(--f-fa);font-weight:500;font-size:1.3rem;color:var(--ink-2)}
.remainder p{margin:0}
@media (max-width:44rem){
  .stratum{grid-template-columns:1fr;gap:1rem}
  .st-label{position:static;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
  .card.wide{grid-column:auto}
}

/* ---- four registers ------------------------------------------------------- */
.registers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 5px var(--surface),inset 0 0 0 6px var(--gold);padding:6px}
.reg{padding:1.3rem 1.3rem .5rem;min-width:0;border-inline-start:1px solid var(--rule)}
.reg:first-child{border-inline-start:0}
.reg h2{margin:0 0 1.1rem;font-size:.9rem;font-weight:600;font-family:var(--f-ui);color:var(--ink);display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;padding-block-end:.6rem;border-block-end:1px solid var(--rule)}
.reg h2 .lat{color:var(--red);font-size:.62rem;letter-spacing:.16em}
.reg h3{margin:0;font-family:var(--f-ui);font-weight:500;font-size:.78rem;color:var(--mute)}
.reg h3 .lat{margin-inline-start:.5rem;font-size:.6rem;letter-spacing:.1em}
.reg ul{list-style:none;margin:.25rem 0 1.2rem;padding:0}
.reg li{margin:0 0 .2rem}
.reg .w{display:block;padding:.3rem .55rem;margin-inline:-.55rem;font-size:1.08rem;line-height:1.5;text-decoration:none;transition:background .2s,color .2s}
.reg .w [lang="en"]{display:block;font-size:.84rem;font-style:italic;color:var(--mute);line-height:1.3;text-align:right}
.legend{grid-column:1/-1;margin:0;padding:.85rem 1.3rem;display:flex;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;border-block-start:1px solid var(--rule)}
@media (max-width:60rem){.registers{grid-template-columns:repeat(2,minmax(0,1fr))}.reg:nth-child(3){border-inline-start:0}.reg:nth-child(n+3){border-block-start:1px solid var(--rule)}}
@media (max-width:30rem){.registers{grid-template-columns:1fr}.reg{border-inline-start:0}.reg:nth-child(n+2){border-block-start:1px solid var(--rule)}}

/* ---- sky / sand band ------------------------------------------------------- */
.wind{margin-block-start:clamp(4rem,11vh,7rem);padding-block:clamp(3.5rem,10vh,6rem);background:linear-gradient(180deg,var(--sky) 0%,color-mix(in srgb,var(--sky) 40%,var(--sand)) 55%,var(--sand) 100%);position:relative;overflow:hidden}
.wind::after{content:"";position:absolute;inset-inline:0;bottom:0;height:45%;opacity:.3;background-image:radial-gradient(circle at 1px 1px,rgba(80,50,20,.55) 1px,transparent 0);background-size:7px 7px;-webkit-mask-image:linear-gradient(0deg,#000,transparent);mask-image:linear-gradient(0deg,#000,transparent)}
.wind .epi{position:relative;z-index:1;max-width:52rem;margin-inline:auto;text-align:center}
.wind .epi p{font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1.8;color:#1E1A17}
.wind .epi p[lang="en"]{font-size:clamp(1.1rem,2vw,1.4rem);color:#3A322A}
.wind .epi cite{color:#4a3f33}
:root[data-theme="dark"] .wind .epi p{color:#EDE3CF}
:root[data-theme="dark"] .wind .epi p[lang="en"],:root[data-theme="dark"] .wind .epi cite{color:#C8BBA3}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wind .epi p{color:#EDE3CF}:root:not([data-theme="light"]) .wind .epi p[lang="en"],:root:not([data-theme="light"]) .wind .epi cite{color:#C8BBA3}}

/* ---- about ---------------------------------------------------------------- */
.about{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem)}
.about .txt > p{margin:0 0 1.1rem;font-size:1.2rem;line-height:2;color:var(--ink-2)}
.about .txt > p[lang="en"]{font-size:1.25rem;line-height:1.55}
.about .txt .big{font-size:clamp(1.45rem,2.5vw,1.85rem);line-height:1.8;color:var(--ink)}
.about .epi{margin-block-start:2rem;padding-inline-start:1.2rem;border-inline-start:3px solid var(--gold)}
.practice{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--gold)}
.practice li{display:grid;grid-template-columns:2.4rem 1fr auto;align-items:baseline;gap:1rem;padding-block:1rem;border-block-end:1px solid var(--rule)}
.practice .i{font-family:var(--f-mono);font-size:.7rem;color:var(--red)}
.practice b{font-weight:500;font-size:1.2rem;line-height:1.5}
.practice .lat{font-size:.66rem;letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.edu{margin-block-start:1.5rem;padding:1.1rem 1.3rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
.edu p{margin:0}
.edu b{display:block;font-weight:500;font-size:1.08rem;color:var(--ink);font-family:var(--f-fa)}
.edu p[lang="en"]{margin-block-start:.3rem}
@media (max-width:52rem){.about{grid-template-columns:1fr}}

/* ---- contact / footer ------------------------------------------------------ */
.contact{padding-block:clamp(3.5rem,9vh,5.5rem);background:var(--ink);color:var(--bg)}
.contact .wrap{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end}
.contact .caps{color:var(--gold)}
.contact h2{margin:.8rem 0 0;font-weight:500;font-size:clamp(1.9rem,4.6vw,3.3rem);line-height:1.35}
.contact h2 span{display:block;font-family:var(--f-en);font-style:italic;font-weight:400;font-size:.5em;opacity:.65;text-align:right}
.mail{display:inline-flex;gap:.7rem;margin-block-start:1.6rem;font-family:var(--f-mono);font-size:clamp(1rem,2.4vw,1.4rem);color:var(--bg);text-decoration-color:color-mix(in srgb,var(--bg) 35%,transparent);text-underline-offset:.4em;direction:ltr;unicode-bidi:isolate}
.mail:hover{color:var(--gold)}
.contact .btn{border-color:color-mix(in srgb,var(--bg) 40%,transparent);color:var(--bg)}
.contact .btn:hover{border-color:var(--gold);color:var(--gold)}
:root[data-theme="dark"] .contact{background:var(--margin);color:var(--ink)}
:root[data-theme="dark"] .contact .mail,:root[data-theme="dark"] .contact .btn{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact{background:var(--margin);color:var(--ink)}:root:not([data-theme="light"]) .contact .mail,:root:not([data-theme="light"]) .contact .btn{color:var(--ink)}}
@media (max-width:44rem){.contact .wrap{grid-template-columns:1fr}}
.foot{padding-block:2rem 2.4rem}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem}
.foot p{margin:0}
.foot a{color:var(--ink-2)}
.foot .top{text-decoration:none}

/* ==========================================================================
   Work pages
   ========================================================================== */
.work-head{padding-block:clamp(2.2rem,6vh,4rem) 0}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1.8rem}
.crumb a{text-decoration:none;color:var(--mute)}
.crumb a:hover{color:var(--red)}
.crumb .sep{color:var(--gold)}
.wh{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 3rem;align-items:end;padding-block-end:1.8rem;border-block-end:1px solid var(--gold)}
.wh h1{margin:0;font-weight:500;font-size:clamp(2.6rem,7vw,5rem);line-height:1.2}
.wh .sub{margin:.4rem 0 0;font-size:1.25rem;color:var(--ink-2);max-width:40rem}
.wh .sub[lang="en"]{font-style:italic;color:var(--mute);text-align:right}
.specs{display:grid;grid-template-columns:auto auto;gap:.35rem 1.4rem;margin:0;font-family:var(--f-ui);font-size:.84rem}
.specs dt{color:var(--mute);font-weight:400}
.specs dt .lat{display:block;font-size:.58rem;letter-spacing:.14em}
.specs dd{margin:0;font-weight:500;color:var(--ink)}
.specs dd .lat{display:block;font-size:.64rem;color:var(--mute);letter-spacing:.05em}
@media (max-width:44rem){.wh{grid-template-columns:1fr}}

.sowhat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.4rem 1.6rem;margin-block-start:2rem;padding:1.3rem 1.5rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);border-inline-start:4px solid var(--red)}
.sowhat h2{margin:0;font-family:var(--f-fa);font-weight:500;font-size:1.6rem;line-height:1.2;color:var(--red);grid-row:span 2}
.sowhat h2 .lat{display:block;font-size:.6rem;letter-spacing:.16em;color:var(--mute);margin-block-start:.3rem}
.sowhat p{margin:0;font-size:1.1rem;color:var(--ink-2)}
.sowhat p[lang="en"]{font-size:1.1rem;color:var(--mute)}
@media (max-width:36rem){.sowhat{grid-template-columns:1fr}.sowhat h2{grid-row:auto}}

.cover{margin-block-start:2rem}
.cover img{height:clamp(15rem,50vh,32rem);object-fit:cover}

.work{padding-block-end:1rem}
.role{margin-block:2.2rem 0;padding:1.3rem 1.5rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);border-inline-start:4px solid var(--gold);display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.4rem}
.role p{margin:0 0 .3rem}
.role p:first-child{color:var(--ink);font-weight:600}
.role [lang="en"] p{font-family:var(--f-mono);font-size:.72rem}
.sec{margin-block-start:clamp(3.2rem,9vh,5rem);max-width:48rem}
.sec.wide{max-width:none}
.sec h2{position:relative;margin:0 0 1.5rem;font-weight:500;font-size:clamp(1.55rem,3vw,2rem);line-height:1.4;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1rem;padding-block-end:.5rem}
.sec h2::after{content:"";position:absolute;inset-inline-start:0;bottom:0;height:.38rem;width:2.4rem;background:var(--red)}
.sec h2 .app{font-size:.66rem;letter-spacing:.16em;color:var(--gold)}
.sec .subh{margin:-.6rem 0 1.1rem;color:var(--mute);font-size:1.12rem}
.sec p{margin:0 0 1.1rem;font-size:1.13rem;max-width:var(--measure);color:var(--ink-2)}
.wide > p,.wide > h2,.wide > .subh{max-width:48rem}
.fw{border-collapse:separate;border-spacing:0;width:100%;max-width:64rem;margin:1.6rem 0;font-size:1rem;line-height:1.75;background:var(--surface);box-shadow:inset 0 0 0 1px var(--gold)}
.fw th{font-family:var(--f-ui);font-weight:600;font-size:.78rem;color:var(--ink);text-align:start;padding:.8rem 1rem;background:var(--margin);border-block-end:1px solid var(--gold)}
.fw td{padding:.9rem 1rem;border-block-end:1px solid var(--rule);vertical-align:top}
.fw tr:last-child td{border-block-end:0}
.fw td:first-child{color:var(--red);font-weight:500}
.fw td:last-child{color:var(--mute);font-size:.95rem}
.triad{margin:1.8rem 0 0;max-width:52rem;display:grid;border-block-start:1px solid var(--gold)}
.triad div{display:grid;grid-template-columns:10rem 1fr;gap:1.2rem;padding:1rem 0;border-block-end:1px solid var(--rule)}
.triad dt{margin:0;line-height:1.55;font-weight:600;font-family:var(--f-ui);font-size:.9rem}
.triad dt .lat{display:block;font-weight:400;font-size:.6rem;letter-spacing:.14em;color:var(--mute)}
.triad div:nth-child(1) dt{color:var(--lapis)}
.triad div:nth-child(2) dt{color:var(--gold)}
.triad div:nth-child(3) dt{color:var(--red)}
.triad dd{margin:0;font-size:1.03rem;line-height:1.85;color:var(--ink-2)}
.note{margin-block-start:1.4rem;max-width:48rem;padding:1.1rem 1.3rem;border-inline-start:3px solid var(--gold);background:var(--surface)}
.note p{margin:0;font-size:1.03rem}
.frames{list-style:none;margin:1.6rem 0 0;padding:.7rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));gap:.6rem;background:var(--margin);box-shadow:inset 0 0 0 1px var(--gold)}
.frames li{margin:0;position:relative;overflow:hidden;background:var(--rule-2)}
.frames img{display:block;width:100%;height:10rem;object-fit:cover;transition:transform .8s var(--ease)}
.frames li:hover img{transform:scale(1.06)}
.frames .n{position:absolute;inset-block-end:.35rem;inset-inline-start:.35rem;min-width:1.5rem;padding:0 .35rem;text-align:center;background:var(--red);color:#F7F1E3;font-size:.7rem}
.figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem;margin-block-start:1.8rem}
.figs img,.grid4 img{display:block;width:100%;height:auto;padding:.5rem;background:var(--margin);box-shadow:inset 0 0 0 1px var(--gold)}
.figs figcaption,.gcap{margin-block-start:.7rem;font-size:.96rem;line-height:1.8;color:var(--ink-2)}
.figs figcaption [lang="en"],.gcap [lang="en"]{display:block;color:var(--mute);font-size:.93rem;font-style:italic;line-height:1.45;margin-block-start:.25rem}
.grid4{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:.9rem;margin-block-start:1.8rem;align-items:start}
.gcap{max-width:48rem}
.limits{margin:0;padding:0;list-style:none;max-width:48rem;counter-reset:l}
.limits li{position:relative;margin:0;padding-block:.8rem;padding-inline-start:2.6rem;border-block-end:1px solid var(--rule);font-size:1.04rem;color:var(--ink-2);counter-increment:l}
.limits li::before{content:counter(l,persian);position:absolute;inset-inline-start:0;top:.8rem;width:1.7rem;height:1.7rem;display:grid;place-items:center;background:var(--red);color:#F7F1E3;font-family:var(--f-ui);font-size:.78rem;transform:rotate(-4deg)}
.en-block{margin-block-start:clamp(3.5rem,10vh,5.5rem);padding:clamp(1.5rem,4vw,2.5rem);background:var(--surface);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 5px var(--surface),inset 0 0 0 6px var(--gold);max-width:46rem;margin-inline-start:auto}
.en-block h2{margin:0 0 1rem;font-weight:500;font-size:clamp(1.5rem,3vw,2rem);line-height:1.2}
.en-block p{margin:0 0 1rem;font-size:1.2rem;color:var(--ink-2)}
.credits{margin-block-start:3rem;max-width:48rem}
.credits p{margin:0 0 .3rem}

.img-work{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(1.8rem,5vw,4.5rem);align-items:start;margin-block-start:2.5rem}
.img-work .plate > img{display:block;width:100%;height:auto;padding:clamp(.6rem,1.6vw,1rem);background:var(--margin);box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 5px var(--margin),inset 0 0 0 6px var(--gold),var(--shadow)}
.img-work .plate figcaption{margin-block-start:.8rem}
.img-work .txt{position:sticky;top:6rem}
.img-work .txt p{margin:0 0 1.1rem;font-size:1.15rem;color:var(--ink-2)}
.img-work .txt p:first-child{font-size:1.3rem;line-height:1.9;color:var(--ink)}
.img-work .txt [lang="en"] p,.img-work .txt [lang="en"] p:first-child{font-size:1.2rem;line-height:1.55;color:var(--ink-2)}
.img-work .txt [lang="en"]{margin-block-start:1.6rem;padding-block-start:1.2rem;border-block-start:1px solid var(--rule)}
.versions{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,15rem));gap:1.4rem;margin-block-start:1.6rem}
.versions img{display:block;width:100%;height:auto;padding:.5rem;background:var(--margin);box-shadow:inset 0 0 0 1px var(--gold)}
.plate figcaption .lat,.versions figcaption .lat{display:block}
.versions figcaption{margin-block-start:.6rem}
.srcs{margin-block-start:3rem;max-width:52rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem 2rem;padding-block-start:1.2rem;border-block-start:1px solid var(--gold)}
.srcs p{margin:0 0 .35rem}
.work-epi{margin-block-start:clamp(3rem,8vh,4.5rem);padding-block:1.6rem;border-block:1px solid var(--rule)}
@media (max-width:52rem){.img-work{grid-template-columns:1fr}.img-work .txt{position:static}.srcs{grid-template-columns:1fr}}
@media (max-width:60rem){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:44rem){
  .role{grid-template-columns:1fr}
  .triad div{grid-template-columns:1fr;gap:.3rem}
  .figs{grid-template-columns:1fr}
  .fw thead{display:none}
  .fw tr{display:block;border-block-end:1px solid var(--rule);padding:.8rem 1rem}
  .fw tr:last-child{border-block-end:0}
  .fw td{display:block;border:0;padding:.1rem 0}
  .frames{grid-template-columns:repeat(3,minmax(0,1fr))}
  .frames img{height:7rem}
}

.pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-block-start:clamp(3.5rem,9vh,5rem)}
.pager a{display:flex;flex-direction:column;gap:.3rem;padding:1.2rem 1.4rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);text-decoration:none;color:var(--ink);transition:box-shadow .25s}
.pager a:hover{box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--gold);color:var(--ink)}
.pager a.next{text-align:end}
.pager b{font-weight:500;font-size:1.4rem;line-height:1.4}
.pager b [lang="en"]{display:inline-block;font-style:italic;font-weight:400;font-size:.75em;color:var(--mute);margin-inline:.6rem}
@media (max-width:36rem){.pager{grid-template-columns:1fr}.pager a.next{text-align:start}}

@media print{:root{--bg:#fff;--ink:#000}.nav,.theme,.contact,.pager,body::before{display:none}}

/* ==========================================================================
   Third pass: resume palette, quieter framing, writing
   ========================================================================== */
.hero h1,.sh h2,.wh h1,.card h3,.contact h2,.essay h1,.writing h3,.sec h2,.en-block h2{color:var(--indigo)}
.sh h2 span,.card h3 [lang="en"]{color:var(--mute)}
.seal{background:var(--band);box-shadow:inset 0 0 0 2px var(--band),inset 0 0 0 3px var(--gold)}
.sh h2::after,.sec h2::after{background:var(--red);height:.28rem}
.dmd{display:inline-block;width:.45rem;height:.45rem;background:var(--red);transform:rotate(45deg);margin-inline-end:.55rem;vertical-align:.15em}
.hero .role-line{margin:.9rem 0 0;font-family:var(--f-ui);font-weight:500;font-size:clamp(.95rem,1.6vw,1.1rem);color:var(--red)}
.hero .role-line [lang="en"]{display:block;font-family:var(--f-en);font-style:italic;font-weight:400;color:var(--mute);text-align:right}
/* a quiet figure-eight behind the name: form without commentary */
.hero{position:relative;overflow:hidden}
.hero .orn{position:absolute;inset-inline-start:-6%;top:8%;width:70%;max-width:52rem;opacity:.5;pointer-events:none}
.hero .orn path{fill:none;stroke:var(--gold);stroke-width:.8}
.hero .orn path + path{stroke-width:.4;opacity:.6}
.hero .orn circle{fill:var(--red)}
.hero-top{position:relative}
.cv{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:1.2rem}
.cv a{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .9rem;border:1px solid var(--rule);background:var(--surface);text-decoration:none;font-family:var(--f-ui);font-size:.82rem;font-weight:500;color:var(--indigo)}
.cv a:hover{border-color:var(--red);color:var(--red)}
.cv a .lat{font-size:.66rem;color:var(--mute)}
.card .body{padding-block-start:1rem}
.card .jadval{box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 0 5px var(--margin),inset 0 0 0 6px var(--gold)}
.stratum{padding-block:1.4rem}
.st-label b{color:var(--indigo)}

/* writing list */
.writing{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--gold)}
.writing li{border-block-end:1px solid var(--rule)}
.writing a{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:.3rem 2rem;align-items:baseline;padding-block:1.15rem;text-decoration:none;color:var(--ink);transition:background .2s,padding .3s var(--ease)}
.writing a:hover{background:var(--surface);padding-inline:1rem;color:var(--ink)}
.writing h3{margin:0;font-weight:500;font-size:1.45rem;line-height:1.4}
.writing h3 [lang="en"]{display:block;font-family:var(--f-en);font-style:italic;font-weight:400;font-size:.62em;color:var(--mute);text-align:right}
.writing .ab{margin:0;color:var(--ink-2);font-size:.98rem;line-height:1.8}
.writing .k{white-space:nowrap}
.writing .k b{display:block;font-weight:500;color:var(--red)}
@media (max-width:44rem){.writing a{grid-template-columns:1fr}}

/* related writing on work pages */
.related{margin-block-start:clamp(3rem,8vh,4.5rem);padding:1.3rem 1.5rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);border-inline-start:4px solid var(--indigo)}
.related h2{margin:0 0 .7rem;font-family:var(--f-ui);font-weight:600;font-size:.9rem;color:var(--indigo)}
.related h2 .lat{margin-inline-start:.6rem;font-size:.62rem;letter-spacing:.14em;color:var(--mute)}
.related ul{list-style:none;margin:0;padding:0}
.related li{padding-block:.45rem;border-block-start:1px solid var(--rule-2)}
.related li:first-child{border:0}
.related a{font-size:1.2rem;text-decoration:none;color:var(--ink)}
.related a:hover{color:var(--red)}
.related .app{margin-inline-start:.6rem}

/* essay page */
.essay{max-width:44rem;margin-inline:auto;padding-block:clamp(2.2rem,6vh,4rem) 0}
.essay .kind{margin:0 0 .8rem}
.essay .kind b{color:var(--red);font-weight:600}
.essay h1{margin:0;font-weight:500;font-size:clamp(2.3rem,6vw,3.8rem);line-height:1.25}
.essay .en-t{display:block;margin-block-start:.3rem;font-family:var(--f-en);font-style:italic;font-weight:400;font-size:clamp(1.2rem,2.4vw,1.6rem);color:var(--mute)}
.essay[lang="fa"] .en-t{text-align:right}
.essay .ab{margin:1.2rem 0 0;padding-block-end:1.6rem;border-block-end:1px solid var(--gold);color:var(--ink-2);font-size:1.1rem}
.essay .flag{margin:1.4rem 0 0;padding:.9rem 1.1rem;background:var(--margin);font-family:var(--f-ui);font-size:.85rem;color:var(--ink-2)}
.essay .txt{margin-block-start:2rem}
.essay .txt p{margin:0 0 1.25rem;font-size:1.2rem;line-height:2.15;color:var(--ink);text-align:justify;text-justify:inter-word}
.essay[lang="en"] .txt p{font-family:var(--f-en);font-size:1.28rem;line-height:1.7;text-align:left}
.essay .txt h2{margin:2.4rem 0 1rem;font-family:var(--f-ui);font-weight:600;font-size:1.05rem;color:var(--indigo)}
.essay .txt h2::before{content:"";display:inline-block;width:.42rem;height:.42rem;background:var(--red);transform:rotate(45deg);margin-inline-end:.6rem;vertical-align:.12em}
.essay .sign{margin:2.2rem 0 0;font-family:var(--f-ui);font-size:.9rem;color:var(--mute);text-align:left}
.essay .refs{margin-block-start:2.4rem;padding-block-start:1rem;border-block-start:1px solid var(--rule)}
.essay .refs h2{margin:0 0 .6rem;font-family:var(--f-ui);font-size:.85rem;font-weight:600;color:var(--mute)}
.essay .refs ul{margin:0;padding-inline-start:1.2rem}
.essay .refs li{font-size:.95rem;color:var(--ink-2)}
.essay .note-p{margin-block-start:2rem;padding-block-start:1rem;border-block-start:1px dashed var(--rule);font-style:italic;color:var(--mute)}
.essay .back{margin-block-start:2.6rem;display:flex;flex-wrap:wrap;gap:.6rem}
/* contact band in the resume's indigo */
.contact{background:var(--band);color:#FBF7EE}
.contact h2{color:#FBF7EE}
.contact .mail{color:#FBF7EE}
.contact .btn{color:#FBF7EE;border-color:rgba(251,247,238,.4)}
:root[data-theme="dark"] .contact{background:var(--band);color:var(--ink)}
:root[data-theme="dark"] .contact h2,:root[data-theme="dark"] .contact .mail,:root[data-theme="dark"] .contact .btn{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact{background:var(--band);color:var(--ink)}:root:not([data-theme="light"]) .contact h2,:root:not([data-theme="light"]) .contact .mail,:root:not([data-theme="light"]) .contact .btn{color:var(--ink)}}
/* path, in the resume palette */
a.node,a.node text{text-decoration:none}
.node .dot{fill:var(--indigo)}
.node text.fa{fill:var(--indigo)}
.loop-l{fill:var(--violet)}

/* ==========================================================================
   Fourth pass: Taq Kasra entrance, miniature ornaments
   ========================================================================== */
/* entrance */
.taq{display:none}
.taq-on .taq{display:block;position:fixed;inset:0;z-index:200;overflow:hidden}
.taq-on body{overflow:hidden}
.taq-svg{position:absolute;inset:0;width:100%;height:100%;transition:transform 1.7s cubic-bezier(.55,0,.35,1),opacity .5s ease 1.25s}
.taq.go .taq-svg{transform:scale(14);opacity:0}
.taq.go .taq-enter,.taq.go .taq-cap{opacity:0;transition:opacity .3s}
.tq-s0{stop-color:#E9DDC4}.tq-s1{stop-color:#F6EEDC}
.tq-ground{fill:#D9C39C}
.tq-b0{fill:#C58A55}.tq-bl{stroke:#9C6437;stroke-width:.8;fill:none;opacity:.55}
.tq-niche{fill:#8A5530;opacity:.5}
.tq-pier{fill:#D8A474;opacity:.55}
.tq-cornice{stroke:#8A5530;stroke-width:3}
.tq-cap{fill:#B07A48}
.tq-edge{fill:none;stroke:#7B4A28;stroke-width:3}
.tq-line{fill:#9C6437}
:root[data-theme="dark"] .tq-s0{stop-color:#0E0C18}:root[data-theme="dark"] .tq-s1{stop-color:#241F3A}
:root[data-theme="dark"] .tq-ground{fill:#2A2233}
:root[data-theme="dark"] .tq-b0{fill:#6E4A33}:root[data-theme="dark"] .tq-bl{stroke:#3E2718}
:root[data-theme="dark"] .tq-niche{fill:#23150D}:root[data-theme="dark"] .tq-pier{fill:#8A6044}:root[data-theme="dark"] .tq-cap{fill:#5C3C29}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tq-s0{stop-color:#0E0C18}:root:not([data-theme="light"]) .tq-s1{stop-color:#241F3A}
  :root:not([data-theme="light"]) .tq-ground{fill:#2A2233}
  :root:not([data-theme="light"]) .tq-b0{fill:#6E4A33}:root:not([data-theme="light"]) .tq-bl{stroke:#3E2718}
  :root:not([data-theme="light"]) .tq-niche{fill:#23150D}:root:not([data-theme="light"]) .tq-pier{fill:#8A6044}:root:not([data-theme="light"]) .tq-cap{fill:#5C3C29}
}
.taq-enter{position:absolute;left:50%;bottom:6vh;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.7rem 1.8rem;border:1px solid var(--gold);background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--indigo);font-family:var(--f-ui);font-weight:600;font-size:1rem;cursor:pointer;animation:taq-pulse 2.4s ease-in-out infinite}
.taq-enter .lat{font-size:.6rem;letter-spacing:.2em;color:var(--mute)}
.taq-cap{position:absolute;top:1.4rem;left:0;right:0;text-align:center;margin:0;display:flex;flex-direction:column;align-items:center}
@keyframes taq-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--gold) 25%,transparent)}}

/* clouds drift in over the hero once the arch is passed */
.clouds{position:absolute;inset:0 0 auto 0;height:16rem;pointer-events:none;z-index:0}
.clouds img{position:absolute;opacity:0;height:auto}
.cloud-a{width:clamp(9rem,22vw,17rem);top:.5rem;inset-inline-end:4%}
.cloud-b{width:clamp(7rem,16vw,12rem);top:3.5rem;inset-inline-start:30%}
.entered .clouds img{animation:cloud-in 1.6s ease .2s forwards,drift 26s ease-in-out 1.8s infinite alternate}
.entered .cloud-b{animation-delay:.6s,2.2s}
@keyframes cloud-in{from{opacity:0;transform:translateY(-14px)}to{opacity:.9;transform:none}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(3.5rem)}}
:root[data-theme="dark"] .clouds img{filter:brightness(.8)}
.hero .wrap{position:relative;z-index:1}

/* the figure-eight behind the name, whole and drawn in */
.name-col{position:relative}
.hero .orn{position:absolute;inset:auto;left:50%;top:50%;width:125%;max-width:none;transform:translate(-50%,-52%);opacity:.75;z-index:-1}
.hero .orn path.o1{stroke-dasharray:3000;stroke-dashoffset:3000;animation:draw 3.4s var(--ease) .3s forwards}
.taq-on .hero .orn path.o1{animation-play-state:paused}
@media (max-width:52rem){.hero .orn{width:110%}}

/* floating brick panel beside Qolhak */
#works{position:relative}
.float-brick{position:absolute;width:clamp(5rem,9vw,8.5rem);top:9rem;inset-inline-end:max(.5rem,calc((100vw - 76rem)/2 - 7.5rem));transform:rotate(-24deg);filter:drop-shadow(0 18px 18px rgba(60,40,20,.25));animation:float 7s ease-in-out infinite alternate;pointer-events:none}
@keyframes float{from{transform:rotate(-24deg) translateY(0)}to{transform:rotate(-19deg) translateY(-16px)}}
@media (max-width:90rem){.float-brick{inset-inline-end:.8rem;width:4.8rem}}
@media (max-width:60rem){.float-brick{display:none}}

/* figures beside the writing list */
.writing-wrap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.figures{width:clamp(6rem,11vw,9.5rem);height:auto;position:sticky;top:6rem;filter:drop-shadow(0 12px 20px rgba(60,40,20,.18))}
@media (max-width:44rem){.writing-wrap{grid-template-columns:1fr}.figures{display:none}}

/* lid in About */
#about{position:relative}
.float-lid{position:absolute;width:clamp(7rem,13vw,11rem);top:2rem;inset-inline-start:max(1rem,calc((100vw - 76rem)/2 + 12rem));transform:rotate(7deg);opacity:.95;pointer-events:none;filter:drop-shadow(0 12px 16px rgba(40,20,20,.2))}
@media (max-width:52rem){.float-lid{display:none}}

/* real borders from the manuscript */
.tileband{height:24px;background:url(img/orn/band-lapis.webp) repeat-x center/auto 24px;border:0;opacity:1}
:root[data-theme="dark"] .tileband{background-image:url(img/orn/band-night.webp);opacity:1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tileband{background-image:url(img/orn/band-night.webp);opacity:1}}

/* Behzad, before the collage */
.source-plate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-block-start:2.5rem;padding:1.4rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
.source-plate .jadval{max-width:22rem}
.source-plate h2{margin:0 0 .6rem;font-weight:500;font-size:1.5rem;color:var(--indigo)}
.source-plate h2 .lat{display:block;font-size:.62rem;letter-spacing:.16em;color:var(--mute)}
.source-plate p{margin:0 0 .8rem;font-size:1.08rem;color:var(--ink-2)}
.source-plate p[lang="en"]{font-size:1.1rem;color:var(--mute)}
@media (max-width:44rem){.source-plate{grid-template-columns:1fr}}
.taq-on .taq{inset:0;direction:ltr}
.taq-svg{inset:0;width:100%;height:100%}

html,body{overflow-x:clip}

.float-brick,.float-lid,.figures,.clouds img{height:auto}
.float-brick{top:13rem}
@media (prefers-reduced-motion:reduce){.clouds img{opacity:.9}.hero .orn path.o1{stroke-dashoffset:0}}
.hero{padding-block-start:clamp(4.5rem,13vh,8rem)}
.cloud-a{width:clamp(7rem,13vw,11rem);top:.4rem;inset-inline-end:2%}
.cloud-b{width:clamp(5.5rem,10vw,8.5rem);top:1.2rem;inset-inline-start:38%}
.float-brick{top:34rem;inset-inline-end:auto;inset-inline-start:max(.6rem,calc((100vw - 76rem)/2 - 6.5rem))}
@media (max-width:90rem){.float-brick{inset-inline-start:.6rem;width:4.6rem}}

/* ==========================================================================
   Fifth pass: full-screen Taq, Sassanid motifs, the pool for the resumes
   ========================================================================== */
.tq-gold{fill:#E6C77E}
.tq-roundel{fill:#8A5530}.tq-roundel-in{fill:#6E4024}
:root[data-theme="dark"] .tq-gold{fill:#C9A45A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tq-gold{fill:#C9A45A}}
.cloud-gold{width:clamp(6rem,11vw,9rem);top:5.5rem;inset-inline-start:8%}
.entered .cloud-gold{animation-delay:1s,2.6s}

/* the pool (حوض) holds the resumes */
.hoz{position:relative;width:min(100%,34rem);margin-block-start:1.8rem;filter:drop-shadow(0 14px 18px rgba(40,20,20,.18))}
.hoz > img{display:block;width:100%;height:auto}
.hoz-water{position:absolute;left:34.5%;right:5%;top:56%;bottom:10%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;text-align:center}
.hoz-t{font-family:var(--f-ui);font-size:clamp(.66rem,1.3vw,.78rem);font-weight:600;letter-spacing:.06em;color:#E6C77E}
.hoz-t .lat{font-size:.85em;letter-spacing:.18em;color:#C9B8A0;margin-inline-start:.4rem}
.hoz-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.hoz-links a{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border:1px solid rgba(230,199,126,.6);color:#F4E6C4;text-decoration:none;font-family:var(--f-ui);font-size:clamp(.66rem,1.4vw,.8rem);font-weight:500;background:rgba(0,0,0,.18);transition:background .2s,color .2s}
.hoz-links a:hover{background:#E6C77E;color:#2B2926}
.hoz-links .lat{font-size:.85em;opacity:.8}
.hoz-links a::before{content:"";width:.4rem;height:.4rem;border:1px solid currentColor;transform:rotate(45deg)}
/* ripples on the water */
.hoz-water::before,.hoz-water::after{content:"";position:absolute;left:50%;top:48%;width:30%;aspect-ratio:3/1;border:1px solid rgba(230,199,126,.35);border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;animation:ripple 5s ease-out infinite;pointer-events:none}
.hoz-water::after{animation-delay:2.5s}
@keyframes ripple{0%{opacity:.8;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}

/* Bahram Gur rides beside Khavarnaq */
.float-bahram{position:absolute;width:clamp(5rem,8vw,8.5rem);height:auto;top:40rem;inset-inline-end:max(.4rem,calc((100vw - 76rem)/2 - 7rem));pointer-events:none;filter:drop-shadow(0 12px 14px rgba(40,20,20,.18))}
@media (max-width:60rem){.float-bahram{display:none}}

/* from Ctesiphon to Tehran: the story on the Khavarnaq page */
.lineage{margin-block-start:clamp(3rem,8vh,4.5rem)}
.lineage ol{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:lg}
.lineage li{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:1rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);counter-increment:lg}
.lineage li + li::before{content:"←";position:absolute;inset-inline-start:-.95rem;top:40%;color:var(--gold);font-size:1.1rem}
.lineage .pic{height:11rem;display:flex;align-items:flex-end;justify-content:center}
.lineage .pic img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
.lineage .pic svg{height:100%;width:auto;fill:var(--gold)}
.lineage b{font-weight:500;font-size:1.15rem;color:var(--indigo);line-height:1.4}
.lineage p{margin:0;font-size:.95rem;line-height:1.75;color:var(--ink-2)}
.lineage p[lang="en"]{font-size:.95rem;color:var(--mute)}
.lineage .src{font-family:var(--f-mono);font-size:.62rem;color:var(--mute);line-height:1.5}
@media (max-width:60rem){.lineage ol{grid-template-columns:repeat(2,minmax(0,1fr))}.lineage li + li::before{display:none}}
@media (max-width:30rem){.lineage ol{grid-template-columns:1fr}}
.credit-lib{margin-block-start:.3rem}
.tq-cornice{fill:#8A5530;stroke:none}
:root[data-theme="dark"] .tq-cornice{fill:#3E2718}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tq-cornice{fill:#3E2718}}
.taq-cap{top:auto;bottom:1.2rem;left:1.4rem;right:auto;align-items:flex-start;text-align:left;color:#6E4A33}
.cloud-gold{top:.8rem}

/* ==========================================================================
   Sixth pass: wider frame, a miniature for every section, resume at the top,
   work in development
   ========================================================================== */
:root{--max:86rem;--edge:clamp(1rem,3.2vw,2.5rem)}
.float-brick,.float-bahram,.float-lid{display:none}

/* section heads carry their own miniature at the far edge */
.sh{grid-template-columns:auto minmax(0,1fr) auto;align-items:end}
.sh .lede{grid-column:2}
.sh-mini{grid-column:3;grid-row:1 / span 2;align-self:end;justify-self:end;height:clamp(5.5rem,10vw,8.5rem);width:auto;filter:drop-shadow(0 10px 12px rgba(40,20,20,.16))}
@media (max-width:44rem){.sh-mini{height:4.5rem}}

/* the year column holds an object from its time */
.st-label{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem}
.st-mini{width:clamp(5rem,7vw,7rem);height:auto;margin-block-start:1.4rem;filter:drop-shadow(0 12px 14px rgba(60,40,20,.2))}
.st-mini.tilt{transform:rotate(-16deg);width:clamp(4rem,5.5vw,5.5rem);margin-inline-start:1rem;animation:float2 7s ease-in-out infinite alternate}
@keyframes float2{from{transform:rotate(-16deg) translateY(0)}to{transform:rotate(-11deg) translateY(-10px)}}
@media (max-width:44rem){.st-mini{display:none}}
.bahram-in{align-self:end;justify-self:start;width:clamp(7rem,12vw,11rem);height:auto;filter:drop-shadow(0 12px 14px rgba(40,20,20,.18))}
@media (max-width:44rem){.bahram-in{display:none}}

/* resume beside a painter at work (Reza Abbasi), at the top */
.resume-card{display:flex;align-items:flex-end;gap:1.1rem;margin-block-start:1.6rem;padding:.9rem 1.1rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule),inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--gold)}
.resume-card img{width:clamp(6.5rem,11vw,8.5rem);height:auto;flex:0 0 auto;margin-block:-2.2rem -.3rem;filter:drop-shadow(0 10px 12px rgba(40,20,20,.18))}
.resume-card > div{display:flex;flex-direction:column;align-items:flex-start;gap:.45rem}
.resume-card .caps{color:var(--gold)}
.resume-card a{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--f-ui);font-weight:500;font-size:.9rem;color:var(--indigo);text-decoration:none}
.resume-card a::before{content:"";width:.42rem;height:.42rem;background:var(--red);transform:rotate(45deg)}
.resume-card a:hover{color:var(--red)}
.resume-card a .lat{font-size:.66rem;color:var(--mute)}
.hoz{display:none}

/* contact: a messenger on the move */
.contact .wrap{grid-template-columns:minmax(0,1fr) auto}
.contact-mini{width:clamp(6rem,11vw,9rem);height:auto;align-self:end;filter:drop-shadow(0 12px 14px rgba(0,0,0,.25))}
@media (max-width:44rem){.contact-mini{width:5rem}}

/* work in development */
.dev{padding:clamp(1.3rem,3vw,2.2rem);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
.dev-head p{margin:0 0 .5rem}
.dev-tag{display:inline-block;padding:.1rem .6rem;background:var(--red);color:#FBF7EE;font-weight:600}
.dev h3{margin:0 0 1.4rem;font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.35;color:var(--indigo)}
.dev h3 [lang="en"]{display:block;font-family:var(--f-en);font-style:italic;font-weight:400;font-size:.6em;color:var(--mute);text-align:right}
.dev-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.dev-txt > p{margin:0 0 1rem;font-size:1.08rem;color:var(--ink-2)}
.dev-txt > p[lang="en"]{font-size:1.12rem;color:var(--mute)}
.dev-stats{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--rule)}
.dev-stats li{padding:.8rem .6rem;border-inline-start:1px solid var(--rule)}
.dev-stats li:first-child{border-inline-start:0}
.dev-stats b{display:block;font-family:var(--f-fa);font-weight:500;font-size:1.7rem;line-height:1.2;color:var(--indigo)}
.dev-stats .lat{display:block;font-size:.58rem;letter-spacing:.1em}
.dev-fig figcaption{margin-block-start:.6rem}
.dev-fig figcaption .lat{display:block}
.dev-steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.8rem;counter-reset:st}
.dev-steps li{position:relative;padding:1rem 1rem 1rem 1rem;padding-block-start:2.4rem;background:var(--bg);box-shadow:inset 0 0 0 1px var(--rule-2);counter-increment:st}
.dev-steps li::before{content:counter(st,persian);position:absolute;top:.8rem;inset-inline-start:1rem;width:1.5rem;height:1.5rem;display:grid;place-items:center;background:var(--indigo);color:var(--bg);font-family:var(--f-ui);font-size:.75rem;transform:rotate(45deg)}
.dev-steps b{display:block;margin-block-end:.3rem;font-weight:600;font-family:var(--f-ui);font-size:.95rem;color:var(--indigo)}
.dev-steps p{margin:0;font-size:.95rem;line-height:1.8;color:var(--ink-2)}
.dev-steps p[lang="en"]{margin-block-start:.3rem;font-size:.92rem;line-height:1.45;color:var(--mute)}
.dev-status{margin:1.6rem 0 0;padding-block-start:1rem;border-block-start:1px solid var(--rule)}
.dev-status b{color:var(--red)}
.dev-status [lang="en"]{display:block;margin-block-start:.3rem}
@media (max-width:60rem){.dev-grid{grid-template-columns:1fr}.dev-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.dev-stats li:nth-child(3){border-inline-start:0}}
.dev-steps{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:60rem){.dev-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:30rem){.dev-steps{grid-template-columns:1fr}}

/* ==========================================================================
   Seventh pass
   Order of ornament (one rule each, no exceptions):
   - lapis floral strip: opens every main section
   - black and gold tile strip: closes the page, above the footer
   - lapis side bands + golden arch: frame work in progress only
   Clouds mark the kind of section, after two schools of painting:
   Herat (gold ribbon cloud) finished works · Safavid Tabriz (blue scroll) writing ·
   Safavid Qazvin (white-blue) about · mixed colours: work in progress.
   Terrain appears only at the foot of the page.
   ========================================================================== */
.section{position:relative;padding-block-start:clamp(4.5rem,11vh,7rem)}
.section:not(.contact)::before{content:"";position:absolute;top:clamp(1.2rem,3vh,2rem);left:0;right:0;height:22px;background:url(img/orn/strip-lapis.webp) repeat-x center/auto 22px;opacity:.95}
.rule-gold{height:1px;background:var(--gold);opacity:.6}
.foot-strip{height:22px;background:url(img/orn/strip-night.webp) repeat-x center/auto 22px}

/* section head: cloud above, four-roundel panel at the same edge */
.sh{position:relative}
.sh-cloud{position:absolute;top:-1.9rem;inset-inline-end:clamp(7rem,12vw,10.5rem);width:clamp(7rem,12vw,10rem);height:auto;pointer-events:none;opacity:.95;animation:drift 30s ease-in-out infinite alternate}
.sh-mini{height:clamp(5rem,8vw,7rem)}
@media (max-width:44rem){.sh-cloud{width:5.5rem;inset-inline-end:5.5rem;top:-1.2rem}}

/* terrain at the foot, on the contact band */
.terrain{position:relative;height:clamp(4.5rem,9vw,8rem);margin-block-start:clamp(3rem,8vh,5rem);pointer-events:none}
.terrain img{position:absolute;bottom:-2px;height:100%;width:auto}
.terrain .tr-a{inset-inline-start:0}
.terrain .tr-c{inset-inline-start:38%;height:80%}
.terrain .tr-b{inset-inline-end:0;height:120%}
.terrain + .contact{margin-block-start:0!important}
@media (max-width:44rem){.terrain .tr-c{display:none}}

/* work in progress: lapis side bands and a golden arch over the figure */
.dev{position:relative;padding-inline:clamp(2.2rem,5vw,3.6rem)}
.dev::before,.dev::after{content:"";position:absolute;top:0;bottom:0;width:14px;background:url(img/orn/strip-v.webp) repeat-y center top/14px auto}
.dev::before{left:0}.dev::after{right:0}
.dev-fig{position:relative;padding-block-start:12%}
.dev-fig .arch-gold{position:absolute;left:-4%;right:-4%;top:0;width:108%;height:auto;pointer-events:none;z-index:1}
.dev-fig .jadval{position:relative;z-index:0;margin-inline:6%}

/* qolhak: the full report */
.report{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-block-start:1.6rem;padding:1rem 1.3rem;background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);border-inline-start:4px solid var(--indigo)}
.report p{margin:0;font-size:.98rem;color:var(--ink-2)}
.report p [lang="en"]{display:block;color:var(--mute);font-size:.92rem}

/* ==========================================================================
   Eighth pass: one order for the whole page.
   Every section is a leaf of an album: border, then sky, then scene.
   - border: the lapis strip, full width, at the very top of the leaf
   - sky: one band of fixed height under the border, inside the column.
     The four-roundel panel (flat top) hangs from the border at the inline end.
     Clouds sit at the inline start, all the same height:
       a cloud cut from a painting's corner sits in that corner (cut-tr),
       an uncut cloud slips under the border, so the border becomes its cut (tuck).
   - ground: only once, at the foot. Flat bottoms stand on the contact band;
     pieces with a cut side stand flush with the column edge on that side.
   ========================================================================== */
:root{--border:22px;--sky:clamp(4.5rem,7vw,6rem)}
.section,.hero{position:relative;padding-block-start:var(--border)}
.section:not(.contact)::before,.hero::before{content:"";position:absolute;z-index:3;top:0;left:0;right:0;height:var(--border);background:url(img/orn/strip-lapis.webp) repeat-x center/auto var(--border);opacity:1}
.hero{padding-block-end:clamp(3rem,8vh,5rem)}
.sky{position:relative;z-index:1;height:var(--sky);margin-block-end:clamp(.5rem,2vh,1.2rem)}
.sky-panel{position:absolute;top:0;inset-inline-end:0;height:100%;width:auto;filter:drop-shadow(0 8px 10px rgba(40,20,20,.14))}
.sky-cloud{position:absolute;inset-inline-start:0;height:calc(var(--sky) * .74);width:auto}
.sky-cloud.cut-tr{top:0}
.sky-cloud.tuck{top:calc(var(--border) * -.6)}
.sky-cloud.second{inset-inline-start:calc(100% / 3)}
.entered .sky-cloud,.sky-cloud{animation:none}
@media (max-width:44rem){.sky-cloud.second{display:none}}

/* ground at the foot */
.ground{height:clamp(5rem,9vw,8.5rem);margin-block-start:clamp(3rem,8vh,5rem);overflow:hidden}
.ground .wrap{position:relative;height:100%}
.ground img{position:absolute;bottom:0;height:100%;width:auto}
.ground .g-r{inset-inline-start:var(--edge)}
.ground .g-l{inset-inline-end:var(--edge)}
.ground .g-m{inset-inline-start:38%;height:86%}
.ground + .contact{margin-block-start:0!important}
@media (max-width:52rem){.ground .g-m{display:none}}

/* in development: the gate surrounds the box on three sides and stands on its bases */
.dev{padding:clamp(1.3rem,3vw,2.2rem);border-style:solid;border-width:16px 17px 52px 16px;border-image:url(img/orn/gate.webp) 28 31 94 29 round;box-shadow:none}
.dev::before,.dev::after{content:none}
.dev-fig{padding-block-start:0}
.dev-fig .jadval{margin-inline:0}
.dev-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;align-items:end}
.dev-head > p,.dev-head > h3{grid-column:1}
.smith{grid-column:2;grid-row:1 / span 2;position:relative;width:clamp(7.5rem,12vw,10.5rem);aspect-ratio:900/845;margin-block-end:1rem}
.smith .arch{position:absolute;inset:0;width:100%;height:100%}
.smith .maker{position:absolute;bottom:2%;left:50%;height:70%;width:auto;transform:translateX(-50%)}
@media (max-width:44rem){.dev-head{grid-template-columns:1fr}.smith{grid-column:1;grid-row:auto;justify-self:end;width:7rem}}

/* objects without a cut edge stand on a line: the brick leans on the rule under its year,
   the row of figures stands on the last line of the list it points at */
.stratum{align-items:stretch}
.st-label{position:static;align-self:stretch;height:auto}
.st-mini.tilt{margin-block-start:auto;margin-block-end:-1.4rem;transform-origin:0% 100%;transform:rotate(-14deg);animation:none}
.writing-wrap{align-items:stretch}
.figures{position:static;align-self:stretch;height:0;min-height:100%;width:auto;object-fit:contain;object-position:bottom}
@media (max-width:44rem){.st-label{flex-direction:row}}

/* ==========================================================================
   Ninth pass: every section is a framed leaf of one album.
   - the leaf: content column on paper, surrounded by the lapis border (Decorative Strips)
   - finished leaves are closed; the leaf still being made (in development) is the open gate,
     standing on its bases
   - the four-roundel panel is the corner joint where the border bands meet (inline end, top)
   - sky and clouds are inside the leaf: a corner-cut cloud in its corner against the inner edge,
     uncut clouds slip under the top border
   - ground only in the last leaf, standing on its bottom border
   - the page between leaves is the album's margin
   ========================================================================== */
:root{--fb:16px;--pad:clamp(1.1rem,3vw,2.4rem);--gap:clamp(1.4rem,3.5vw,2.6rem)}
.section:not(.contact)::before,.hero::before{content:none}
.section,.hero{padding:0;margin:0}
.section + .section,.hero + .section{margin-block-start:var(--gap)}
.hero{padding-block-start:var(--gap)}
.section > .wrap,.hero > .wrap{position:relative;width:calc(100% - 2 * var(--edge));max-width:calc(var(--max) - 2 * var(--edge));margin-inline:auto;padding:var(--fb) calc(var(--fb) + var(--pad)) calc(var(--fb) + var(--pad));background:var(--surface)}
.section > .wrap::after,.hero > .wrap::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-style:solid;border-width:var(--fb) 17px var(--fb) var(--fb);border-image:url(img/orn/leaf.webp) 28 31 28 29 round}
.section.open > .wrap{padding-block-end:calc(52px + var(--pad))}
.section.open > .wrap::after{border-width:var(--fb) 17px 52px var(--fb);border-image:url(img/orn/gate.webp) 28 31 94 29 round}

/* sky spans the inner edge of the frame */
.sky{margin-inline:calc(-1 * var(--pad));height:var(--sky)}
.sky-cloud{z-index:1}
.sky-cloud.cut-tr{top:0;inset-inline-start:0}
.sky-cloud.tuck{top:calc(var(--fb) * -.9);inset-inline-start:var(--pad)}
.sky-cloud.second{inset-inline-start:calc(100% / 3)}
/* the corner joint sits on the outer corner of the frame */
.sky-panel{position:absolute;z-index:3;height:4.2rem;width:auto;top:calc(-1 * var(--fb) - 2.1rem + var(--fb) / 2);inset-inline-end:calc(-1 * var(--fb) - 2.5rem + var(--fb) / 2)}
@media (max-width:44rem){.sky-panel{height:3.2rem;top:calc(-1 * var(--fb) - 1.6rem + var(--fb) / 2);inset-inline-end:calc(-1 * var(--fb) - 1.9rem + var(--fb) / 2)}}

/* in development: the article no longer needs its own frame */
.dev{border:0;border-image:none;padding:0;background:none;box-shadow:none}

/* the last leaf: contact, with ground standing on its bottom border */
.contact{background:none;color:var(--ink);margin-block-end:var(--gap)}
.contact > .wrap{display:block;background:var(--band);color:#FBF7EE;padding-block-end:calc(var(--fb) + clamp(6rem,11vw,9rem))}
.contact > .wrap > div:not(.sky):not(.ground){position:relative;z-index:1}
.contact h2,.contact .mail{color:#FBF7EE}
.contact-sky{height:clamp(1.5rem,3vw,2.5rem)}
.ground{position:absolute;left:var(--fb);right:17px;bottom:var(--fb);height:clamp(5rem,9vw,8rem);margin:0;overflow:hidden;z-index:1}
.ground img{position:absolute;bottom:0;height:100%;width:auto}
.ground .g-r{inset-inline-start:0}
.ground .g-m{inset-inline-start:auto;inset-inline-end:14%;height:84%}
:root[data-theme="dark"] .contact > .wrap,:root[data-theme="dark"] .contact h2,:root[data-theme="dark"] .contact .mail{color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .contact > .wrap,:root:not([data-theme="light"]) .contact h2,:root:not([data-theme="light"]) .contact .mail{color:var(--ink)}}
.foot{border:0}
:root{--sky:clamp(3.4rem,5vw,4.4rem)}

/* ==========================================================================
   Tenth pass.
   - only the works in between are leaves; the opening (hero) and the close (contact) are unframed
   - the border is one even band: the lapis floral strip on all four sides, with a gold jadval
     line outside and inside it
   - the rug is the corner joint and sits on top of the frame
   - the sky band clips its clouds: motion (drift, scroll) never leaves its leaf; a cloud cut from a
     corner stays still in that corner, uncut clouds drift and are cut by the frame's inner edge
   - every leaf stands on its own ground: a piece with a cut side flush at that side, one free piece
   ========================================================================== */
:root{--fb:20px;--sky:clamp(5rem,8vw,7rem);--ground:clamp(4.5rem,7vw,6.5rem)}
.section > .wrap{padding-block-end:calc(var(--fb) + var(--pad) + var(--ground))}
.section > .wrap::after{border-width:var(--fb);border-image:url(img/orn/leaf2.webp) 30 round;outline:1px solid var(--gold);outline-offset:3px}
.section > .wrap::before{content:"";position:absolute;inset:calc(var(--fb) + 4px);border:1px solid var(--gold);opacity:.7;pointer-events:none;z-index:2}
.section.open > .wrap{padding-block-end:calc(52px + var(--pad) + var(--ground))}
.section.open > .wrap::after{border-width:var(--fb) 17px 52px var(--fb);border-image:url(img/orn/gate.webp) 28 31 94 29 round;outline:0}
.section.open > .wrap::before{content:none}

/* the opening and the close are not framed */
.hero > .wrap{background:none;padding:0 var(--edge);width:auto;max-width:var(--max)}
.hero > .wrap::after{content:none}
.contact > .wrap::after,.contact > .wrap::before{content:none}
.contact > .wrap{padding:clamp(2rem,5vw,3.5rem) clamp(1.5rem,4vw,3rem) clamp(7rem,12vw,10rem)}

/* the rug: bigger, centred on the corner, above the border */
.sky-panel{position:absolute;z-index:4;height:clamp(5rem,8vw,7rem);width:auto;top:calc(var(--fb) / 2 - clamp(2.5rem,4vw,3.5rem));inset-inline-end:calc(var(--fb) / 2 - clamp(2.95rem,4.8vw,4.15rem));filter:drop-shadow(0 6px 10px rgba(20,10,30,.35))}

/* sky: clouds are larger, share one height, and stay inside the band */
.sky{overflow:hidden;height:var(--sky);margin-inline:calc(-1 * var(--pad))}
.sky-cloud{height:88%;width:auto}
.sky-cloud.cut-tr{top:0;inset-inline-start:0;animation:none}
.sky-cloud.tuck{top:-18%;inset-inline-start:var(--pad);animation:drift-in 38s ease-in-out infinite alternate}
.sky-cloud.second{inset-inline-start:calc(100% / 3);animation-duration:52s}
@keyframes drift-in{from{transform:translateX(0)}to{transform:translateX(-4rem)}}
@supports (animation-timeline: view()){
  .sky-cloud.tuck{animation:sky-scroll linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes sky-scroll{from{transform:translateX(3rem)}to{transform:translateX(-5rem)}}
}
.hero-sky{margin-inline:0}
@media (prefers-reduced-motion:reduce){.sky-cloud{animation:none!important}}

/* ground: every leaf stands on its own */
.section .ground{position:absolute;z-index:1;left:var(--fb);right:var(--fb);bottom:var(--fb);height:var(--ground);overflow:hidden}
.section.open .ground{bottom:0;left:17px;right:17px}
.ground img{position:absolute;bottom:0;height:100%;width:auto}
.ground .g-cut-r{inset-inline-start:0}
.ground .g-cut-l{inset-inline-end:0}
.ground .g-free{height:78%}
.ground .g-far{inset-inline-end:10%}
.ground .g-near{inset-inline-start:12%}
.ground .g-mid{left:50%;transform:translateX(-50%)}
.contact .ground{position:absolute;left:0;right:0;bottom:0;height:clamp(5rem,9vw,8rem)}
@media (max-width:44rem){.ground .g-free:not(.g-mid){display:none}}

/* ==========================================================================
   Eleventh pass: less, so each thing counts.
   - one language at a time (switch in the header); the English line of each pair is its twin
   - sky only in the opening, ground only at the close; leaves keep their frame and rug
   - one object once: the brick stays with Qolhak
   - one typeface fewer (no mono); orange only for links
   ========================================================================== */
:root{--f-mono:var(--f-ui)}
html:not([data-lang="en"]) .en-only{display:none!important}
html[data-lang="en"] .fa-only{display:none!important}
html[data-lang="en"] main,html[data-lang="en"] .foot{direction:ltr}
html[data-lang="en"] :is(h1,h2,h3,b,.rc-t,.go,.en-name) > .en-only,
html[data-lang="en"] .en-name,
html[data-lang="en"] .brand-t .en-only{display:inline!important;margin:0;font-size:1em;font-style:normal;color:inherit;text-align:inherit;font-family:var(--f-en);letter-spacing:0;text-transform:none}
html[data-lang="en"] .links a .en-only{display:inline!important;font-size:.88rem;letter-spacing:0;text-transform:none;color:inherit;font-family:var(--f-ui)}
html[data-lang="en"] [lang="en"]{text-align:start}
html[data-lang="en"] .hero h1{font-family:var(--f-en)}
.lang-sw{display:grid;place-items:center;min-width:2.4rem;height:2.4rem;padding:0 .6rem;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--ink);font-family:var(--f-ui);font-size:.8rem;font-weight:600;cursor:pointer}
.lang-sw:hover{border-color:var(--gold);color:var(--gold)}
.lang-sw .to-fa{display:none}
html[data-lang="en"] .lang-sw .to-fa{display:inline}
html[data-lang="en"] .lang-sw .to-en{display:none}
.nav .wrap{gap:1rem}
.nav .theme{margin-inline-start:0}

/* leaves: frame and rug only */
.section > .wrap{padding-block-start:calc(var(--fb) + var(--pad));padding-block-end:calc(var(--fb) + var(--pad))}
.section.open > .wrap{padding-block-end:calc(52px + var(--pad))}
.sh{margin-block-end:clamp(1.4rem,3vh,2rem)}

/* the opening */
.hero-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:end;gap:2rem 4rem}
.resume-card{justify-self:end;margin:0;min-width:17rem}
.rc-t{font-family:var(--f-ui);font-weight:600;font-size:.95rem;color:var(--indigo)}
.resume-card .pdf{font-size:.7rem;color:var(--mute)}
.resume-card a::before{background:var(--gold)}
@media (max-width:52rem){.hero-top{grid-template-columns:1fr}.resume-card{justify-self:start}}

/* writing: the list alone */
.writing{width:100%}

/* about: two sentences */
.about-txt{max-width:48rem}
.about-txt .big{margin:0 0 1rem;font-size:clamp(1.25rem,2.2vw,1.6rem);line-height:1.9;color:var(--ink)}
.about-txt .big[lang="en"]{font-family:var(--f-en);font-size:clamp(1.2rem,2vw,1.45rem);line-height:1.5;color:var(--ink-2)}
.edu-line{margin:1.2rem 0 0}
.edu-line .en-only{display:block}

/* in development: one card in its gate */
.dev-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.5rem 2.5rem;align-items:end;text-decoration:none;color:var(--ink)}
.dev-card:hover{color:var(--ink)}
.dev-card .smith{grid-column:auto;grid-row:auto;margin:0;width:clamp(8rem,13vw,11rem)}
.dev-card h3{margin:0 0 .7rem;font-weight:500;font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.35;color:var(--indigo)}
.dev-card h3 .en-only{display:block;font-family:var(--f-en);font-style:italic;font-weight:400;font-size:.6em;color:var(--mute)}
.dev-card p{margin:0 0 .6rem;max-width:40rem;color:var(--ink-2)}
.dev-card .go{display:inline-flex;gap:.4rem;margin-block-start:.4rem;font-family:var(--f-ui);font-weight:500;font-size:.9rem;color:var(--red)}
.dev-card:hover .go{text-decoration:underline}
@media (max-width:44rem){.dev-card{grid-template-columns:1fr}}
.work-head .wh .smith{grid-column:auto;grid-row:auto;width:clamp(7rem,11vw,9.5rem);margin:0}

/* orange is for links only */
.sh h2::after,.sec h2::after{background:var(--gold)}
.dmd,.resume-card a::before,.essay .txt h2::before{background:var(--gold)}
.role-line{color:var(--gold)!important}
.dev-tag,.limits li::before,.frames .n{background:var(--indigo)}
.dev-status b,.writing .k b,.triad div:nth-child(3) dt,.fw td:first-child,.essay .kind b{color:var(--indigo)}
.card .meta .en-only,.writing .k .en-only{font-family:var(--f-ui)}
/* the Persian half of a pair keeps its host's style */
span.fa-only{display:inline!important;font:inherit!important;color:inherit!important;margin:0!important;text-align:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;opacity:1!important}
.contact > .wrap{padding-block-end:calc(clamp(5rem,9vw,8rem) + 2rem)}
html:not([data-lang="en"]) .writing h3.solo-en{text-align:right}

/* About, first: hook, background, focus, detail, invitation */
.about-txt{max-width:46rem}
.about-txt p{margin:0 0 1rem;font-size:1.12rem;line-height:2;color:var(--ink-2)}
.about-txt p[lang="en"]{font-family:var(--f-en);font-size:1.18rem;line-height:1.6}
.about-txt .hook{font-size:clamp(1.3rem,2.3vw,1.65rem);line-height:1.85;color:var(--ink)}
.about-txt .hook[lang="en"]{font-size:clamp(1.25rem,2.1vw,1.5rem);line-height:1.5;color:var(--ink)}
.mail-in{font-family:var(--f-ui);direction:ltr;unicode-bidi:isolate}
.writing-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
.writing-wrap .figures{grid-column:2;grid-row:1}
.writing-wrap .writing{grid-column:1;grid-row:1}
.writing-wrap{grid-template-columns:auto minmax(0,1fr)}.writing-wrap .figures{grid-column:1}.writing-wrap .writing{grid-column:2}

/* essay sources: a small number after the passage, the notes at the end */
.fn{font-family:var(--f-ui);font-size:.62em;line-height:0;vertical-align:super;margin-inline-start:.15em}
.fn a{display:inline-grid;place-items:center;min-width:1.35em;height:1.35em;padding:0 .2em;border-radius:50%;background:var(--margin);color:var(--indigo);text-decoration:none;font-weight:600}
.fn a:hover,.fn a:focus-visible{background:var(--gold);color:#FBF7EE}
.notes{margin-block-start:3rem;padding-block-start:1.4rem;border-block-start:1px solid var(--gold)}
.notes h2{margin:0 0 .4rem;font-family:var(--f-ui);font-weight:600;font-size:1.05rem;color:var(--indigo)}
.notes-intro{margin:0 0 1.2rem}
.notes ol{margin:0;padding:0;list-style:none;counter-reset:nt}
.notes li{position:relative;padding:.9rem 0;padding-inline-start:2.4rem;border-block-end:1px solid var(--rule-2);counter-increment:nt;scroll-margin-top:6rem}
.notes li::before{content:counter(nt);position:absolute;inset-inline-start:0;top:.95rem;width:1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:50%;background:var(--margin);color:var(--indigo);font-family:var(--f-ui);font-size:.78rem;font-weight:600}
.notes li:target{background:color-mix(in srgb,var(--gold) 10%,transparent)}
.notes .rel{display:block;font-family:var(--f-ui);font-size:.74rem;font-weight:600;color:var(--gold);margin-block-end:.2rem}
.notes li p{margin:0 0 .35rem;font-size:1rem;line-height:1.85;color:var(--ink-2)}
.notes li p[lang="en"]{font-family:var(--f-en);font-size:1.02rem;line-height:1.5}
.notes cite{display:block;font-style:normal;font-family:var(--f-en);font-size:.95rem;line-height:1.5;color:var(--mute)}
.notes .back-ref{position:absolute;inset-inline-end:0;top:.9rem;text-decoration:none;color:var(--mute)}
.essay .txt p{scroll-margin-top:6rem}
/* the figure-eight stays whole: it sits inside the name column and the hero no longer clips it */
.hero{overflow:visible}
.hero .orn{left:0;right:0;top:50%;width:100%;max-width:none;transform:translateY(-50%);inset-inline-start:auto}
.name-col{padding-inline:clamp(1rem,3vw,2.5rem)}
@media (max-width:52rem){.hero .orn{width:100%}}
/* Persian with no English twin is shown only in Persian */
html[data-lang="en"] .fa-solo,html[data-lang="en"] .fw,html[data-lang="en"] .en-t[lang="fa"]{display:none!important}
html[data-lang="en"] .kind b .en-only,html[data-lang="en"] .crumb .en-only,html[data-lang="en"] .back .en-only,html[data-lang="en"] .pager .en-only,html[data-lang="en"] .specs .en-only{display:inline!important;font-size:inherit;color:inherit;font-family:var(--f-ui);letter-spacing:0;text-transform:none}
html[data-lang="en"] .taq-cap .en-only{display:block}
.pdf{font-size:.7rem;opacity:.75}

/* unfinished projects live in the works strata, under the year they began */
.wip{display:inline-block;margin-inline-end:.6rem;padding:0 .5rem;border:1px solid var(--gold);color:var(--gold);font-weight:500;line-height:1.6}
.wip-line{margin:0 0 .6rem}
.dev-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;align-items:end;margin-block-start:2rem}
@media (max-width:60rem){.dev-figs{grid-template-columns:1fr}}
/* a lone narrow card in a two-column stratum lies down, so no cell is left empty */
.st-works{container-type:inline-size}
@container (min-width:33.6rem) and (max-width:51.19rem){
  .card.solo{grid-column:span 2;flex-direction:row;gap:1.6rem;align-items:flex-start}
  .card.solo .jadval{flex:0 0 calc(50% - .8rem)}
  .card.solo .body{padding-block-start:0}
}
.dev-ai{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-block-start:2rem}
.dev-ai > div{padding:1rem 1.2rem;background:var(--bg);box-shadow:inset 0 0 0 1px var(--gold)}
.dev-ai h3{margin:0 0 .4rem;font-family:var(--f-ui);font-weight:600;font-size:.95rem;color:var(--indigo)}
.dev-ai p{margin:0;font-size:.98rem;line-height:1.85;color:var(--ink-2)}
@media (max-width:44rem){.dev-ai{grid-template-columns:1fr}}

/* registers: pointing at a work lights it in all four */
.registers:has([data-w="qolhak"]:hover,[data-w="qolhak"]:focus-visible) [data-w="qolhak"],
.registers:has([data-w="khavarnaq"]:hover,[data-w="khavarnaq"]:focus-visible) [data-w="khavarnaq"],
.registers:has([data-w="wish"]:hover,[data-w="wish"]:focus-visible) [data-w="wish"],
.registers:has([data-w="may"]:hover,[data-w="may"]:focus-visible) [data-w="may"]{background:var(--indigo);color:var(--bg)}
.registers:has([data-w="qolhak"]:hover,[data-w="qolhak"]:focus-visible) [data-w="qolhak"] [lang="en"],
.registers:has([data-w="khavarnaq"]:hover,[data-w="khavarnaq"]:focus-visible) [data-w="khavarnaq"] [lang="en"],
.registers:has([data-w="wish"]:hover,[data-w="wish"]:focus-visible) [data-w="wish"] [lang="en"],
.registers:has([data-w="may"]:hover,[data-w="may"]:focus-visible) [data-w="may"] [lang="en"]{color:var(--bg)!important;opacity:.8}