/* ---------- Tokens ---------- */
:root{
  --paper:#F4F1E9; --paper2:#ECE7D8; --ink:#211F19; --ink2:#5C574A;
  --line:#D9D2C0; --sage:#5F6F4E; --clay:#A15C33; --hl:#DFE3C9;
  --dark:#191813; --dark2:#22201A; --dline:#3A372B; --dtext:#E8E2D2; --dmut:#A8A18B;
  --sans:'Archivo','Vazirmatn',sans-serif;
  --mono:'IBM Plex Mono','Vazirmatn',monospace;
  color-scheme:light;
}
html[lang="fa"]{ --sans:'Vazirmatn',sans-serif; }
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
::selection{background:var(--sage);color:var(--paper)}
a{color:inherit}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--sans);font-stretch:88%;line-height:1.06;letter-spacing:-.015em;font-weight:680;text-wrap:balance}
html[lang="fa"] :is(h1,h2,h3){font-stretch:normal;letter-spacing:0;line-height:1.34;font-weight:800}
svg{display:block}

/* ---------- Utilities ---------- */
.wrap{max-width:1200px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,56px)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500}
html[lang="fa"] .mono{letter-spacing:0;font-size:.76rem}
.kicker{color:var(--clay);margin-bottom:18px}
.display{font-size:clamp(2.5rem,5.8vw,4.6rem);line-height:1.05}
html[lang="fa"] .display{line-height:1.3}
.hl{box-shadow:inset 0 -.32em 0 var(--hl)}
.skip{position:absolute;inset-inline-start:-9999px;top:10px;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200;font-family:var(--mono);font-size:.75rem}
.skip:focus{inset-inline-start:10px}
@keyframes pin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.page{animation:pin .55s cubic-bezier(.22,.7,.3,1) both}
.rise{animation:pin .6s cubic-bezier(.22,.7,.3,1) both}
.d1{animation-delay:.07s}.d2{animation-delay:.15s}.d3{animation-delay:.24s}
.noscript{padding:24px;font-family:var(--mono)}

/* ---------- Buttons / tags / status ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;padding:15px 24px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;text-decoration:none;transition:background .25s,border-color .25s,color .25s}
html[lang="fa"] .btn{letter-spacing:0;font-size:.8rem}
.btn:hover{background:var(--sage);border-color:var(--sage)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-light{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn-light:hover{background:var(--sage);color:var(--paper);border-color:var(--sage)}
.btn-sm{padding:9px 15px;font-size:.68rem}
html[lang="fa"] .btn-sm{font-size:.74rem}
.arr{transition:transform .25s}
.btn:hover .arr,.arow:hover .arr,.sec-link:hover .arr,.go:hover .arr{transform:translateX(4px)}
[dir="rtl"] .arr{transform:scaleX(-1)}
[dir="rtl"] .btn:hover .arr,[dir="rtl"] .arow:hover .arr,[dir="rtl"] .sec-link:hover .arr,[dir="rtl"] .go:hover .arr{transform:scaleX(-1) translateX(-4px)}
.tags{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;border:1px solid var(--line);padding:4px 9px;color:var(--ink2);white-space:nowrap}
html[lang="fa"] .tag{font-size:.7rem}
.stat{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
html[lang="fa"] .stat{letter-spacing:0;font-size:.74rem}
.dot{width:8px;height:8px;background:var(--sage);flex:none}
.dot.amber{background:var(--clay)}