/* ───────── تم «دفترچه‌ی رنگ» ───────── */
@counter-style persian{system:numeric;symbols:"۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹"}
:root{
  --font:"Estedad Variable","Estedad",system-ui,"Segoe UI",Tahoma,sans-serif;
  --paper:#F6F1E7;--ink:#14122B;--muted:#6A6680;--line:#DDD5C4;--dark:#14122B;--onDark:#F6F1E7;
  --bg:var(--paper);--fg:var(--ink);
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{--paper:#0F0E1E;--ink:#EFE9DA;--muted:#9A96AE;--line:#2A2842;--dark:#07061200;--onDark:#EFE9DA}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0F0E1E;--ink:#EFE9DA;--muted:#9A96AE;--line:#2A2842;--onDark:#EFE9DA}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.9 var(--font);word-spacing:.04em;text-rendering:optimizeLegibility}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
img,svg,video,iframe{max-width:100%}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.skip{position:absolute;inset-inline-start:1rem;top:-4rem;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:99}
.skip:focus{top:1rem}
::selection{background:#F5B82E;color:#14122B}

/* هدر */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:1rem clamp(1rem,4vw,2.4rem);color:#fff;mix-blend-mode:difference;pointer-events:none}
.top>*{pointer-events:auto}
.brand{font-weight:900;font-size:1.35rem;letter-spacing:0}
.nav{display:flex;align-items:center;gap:1.4rem;font-weight:500;font-size:.95rem}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;inset:auto 0 -2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.ico{background:none;border:0;padding:.3rem;cursor:pointer;display:grid;place-items:center;color:inherit;transition:transform .4s var(--ease)}
.ico:hover{transform:rotate(18deg) scale(1.1)}

/* قهرمان */
.hero{position:relative;overflow:hidden;background:var(--dark,#14122B);background:#14122B;color:#F6F1E7;min-height:58svh;display:flex;align-items:flex-end;padding:7rem clamp(1.2rem,5vw,4rem) 3rem}
.hero.short{min-height:38svh}
.hero.lost{min-height:80svh;background:#2D3FB5}
.hero .arches{position:absolute;inset-inline-start:clamp(-6rem,-4vw,0px);bottom:0;height:112%;width:auto;color:#F5B82E;opacity:.9;transform-origin:bottom}
.hero.lost .arches{color:#F6A6BC}
.hero .arches path{stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.4s var(--ease) .1s forwards}
.hero .arches path:nth-child(2){animation-delay:.2s}.hero .arches path:nth-child(3){animation-delay:.3s}.hero .arches path:nth-child(4){animation-delay:.4s}.hero .arches path:nth-child(5){animation-delay:.5s}.hero .arches path:nth-child(6){animation-delay:.6s}.hero .arches path:nth-child(7){animation-delay:.7s}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-in{position:relative;max-width:46rem;margin-inline-start:auto}
.hero h1{font:900 clamp(2.4rem,8vw,5.6rem)/1.25 var(--font);margin:0;text-wrap:balance}
.hero-sub{margin:1rem 0 0;font-size:1.1rem;color:#F5B82E}
.huge{font:900 clamp(6rem,24vw,15rem)/1 var(--font);margin:0;color:#F5B82E}
.inline-search{display:flex;gap:.6rem;margin-top:1.4rem}
.inline-search input{flex:1;min-width:0;background:transparent;border:0;border-bottom:2px solid #F6F1E7;color:#F6F1E7;padding:.5rem 0;font-size:1.3rem}
.inline-search input:focus{outline:0;border-color:#F5B82E}

/* دکمه */
.btn{display:inline-block;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:.55rem 1.4rem;font-weight:700;cursor:pointer;transition:background .25s,color .25s,transform .25s var(--ease)}
.btn:hover{background:transparent;color:var(--ink);transform:translateY(-2px)}
.hero .btn{background:#F5B82E;border-color:#F5B82E;color:#14122B;margin-top:1.6rem}
.hero .btn:hover{background:transparent;color:#F5B82E}
.inline-search .btn{margin:0;background:#F5B82E;border-color:#F5B82E;color:#14122B}

/* دسته‌ها */
.cats{display:flex;flex-wrap:wrap;gap:.5rem;padding:1.6rem clamp(1rem,4vw,2.4rem)}
.cats a{border:2px solid var(--ink);padding:.15rem 1rem;border-radius:99px;font-weight:500;font-size:.92rem;transition:background .25s,color .25s}
.cats a small{margin-inline-start:.45rem;opacity:.6;font-size:.8em}
.cats a:hover,.cats a[aria-current]{background:var(--ink);color:var(--paper)}

/* انباشته‌ی نوارها */
.stack{display:flex;flex-direction:column}
.band{--bg:#2D3FB5;--fg:#F4F3FF;background:var(--bg);color:var(--fg);flex:1 1 auto;overflow:hidden;
  clip-path:inset(0 0 0 100%);animation:wipe .9s var(--ease) calc(var(--i)*70ms + .15s) forwards}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
.band-link{display:flex;align-items:flex-start;gap:clamp(1rem,4vw,3rem);padding:1.5rem clamp(1.2rem,5vw,4rem);min-height:6.5rem}
.num{font:900 clamp(2.6rem,8vw,5.5rem)/1 var(--font);opacity:.35;flex:none;min-width:2.1ch;transition:opacity .4s}
.band-main{flex:1;min-width:0}
.band-meta{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.82rem;font-weight:500;opacity:.8}
.band h2{font:800 clamp(1.5rem,4.2vw,2.8rem)/1.5 var(--font);margin:.1rem 0 0;text-wrap:balance}
.band-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.band-more-in{overflow:hidden;padding:.4rem 10px;margin-inline:-10px;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;opacity:0;transition:opacity .4s}
.band-ex{max-width:38rem;font-size:1rem;line-height:1.9;padding-top:.5rem}
.go{flex:none;display:grid;place-items:center;width:3.4rem;height:3.4rem;border:2px solid currentColor;border-radius:50%;transition:transform .4s var(--ease),background .3s,color .3s}
.band-link:hover .go{transform:translateX(-6px);background:var(--fg);color:var(--bg)}
@media (hover:hover) and (min-width:760px){
  .stack:hover .band:not(:hover):not(:focus-within) .band-more{grid-template-rows:0fr}
  .band:hover .band-more,.band:focus-within .band-more,.stack:not(:hover):not(:focus-within) .band:first-child .band-more{grid-template-rows:1fr}
  .band:hover .band-more-in,.band:focus-within .band-more-in,.stack:not(:hover):not(:focus-within) .band:first-child .band-more-in{opacity:1}
  .band:hover .num,.band:focus-within .num{opacity:.9}
  .band{transition:flex-grow .5s var(--ease)}
}
@media (max-width:759px),(hover:none){
  .band-more{grid-template-rows:1fr}.band-more-in{opacity:1}
  .band-link{padding-block:1.6rem}.go{width:2.8rem;height:2.8rem}
}

/* صفحه‌بندی */
.pager{display:flex;justify-content:center;gap:.5rem;padding:2.4rem 1rem}
.pager a{min-width:2.6rem;height:2.6rem;display:grid;place-items:center;border:2px solid var(--ink);border-radius:50%;font-weight:700;transition:background .25s,color .25s}
.pager a:hover,.pager a[aria-current]{background:var(--ink);color:var(--paper)}

.empty{padding:4rem 1.5rem;text-align:center}.empty .big{font:900 2.4rem/1.5 var(--font);margin:0}

/* ستون خواندن */
.col{max-width:680px;margin-inline:auto;padding-inline:1.2rem}

/* نوشته */
.post-hero{position:relative;overflow:hidden;background:var(--bg);color:var(--fg);padding:8rem clamp(1.2rem,5vw,4rem) 3.5rem;min-height:62svh;display:flex;align-items:flex-end}
.post-hero .arches{position:absolute;inset-inline-start:-3rem;bottom:0;height:105%;width:auto;opacity:.22}
.post-hero-in{position:relative;max-width:50rem;margin-inline-start:auto}
.meta{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;font-size:.88rem;font-weight:500;margin:0 0 1rem;opacity:.85}
.meta a{border-bottom:2px solid currentColor}
.post-hero h1{font:900 clamp(2rem,6.5vw,4.4rem)/1.4 var(--font);margin:0;text-wrap:balance}
.lead{font-size:1.25rem;line-height:2;margin:1.2rem 0 0;max-width:38rem;opacity:.92}
.post-cover{margin-block:2.4rem 0}.post-cover img{width:100%;height:auto;display:block}
.progress{position:fixed;inset:0 auto auto 0;height:5px;width:0;background:var(--bg,#2D3FB5);z-index:60;border-inline-end:0}
.post{--bg:#2D3FB5;--fg:#F4F3FF}
.post .progress{background:#F5B82E}
.post-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-block:2.4rem 3.4rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0}
.tags a{padding:0 .9rem;border-radius:99px;background:color-mix(in srgb,var(--bg) 16%,transparent);font-size:.88rem}
.tags a::before{content:"#";opacity:.5}
.tags a:hover{background:var(--bg);color:var(--fg)}
.next-band{position:relative;overflow:hidden;display:block;background:var(--bg);color:var(--fg);padding:4rem clamp(1.2rem,5vw,4rem)}
.next-band .arches{position:absolute;inset-inline-end:-2rem;bottom:0;height:130%;opacity:.2;transition:transform .8s var(--ease)}
.next-band:hover .arches{transform:scale(1.08) translateY(-1rem)}
.next-in{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.8rem}
.next-t{font:900 clamp(1.7rem,5vw,3.4rem)/1.45 var(--font);max-width:40rem;text-wrap:balance}
.next-band .go{margin-top:.6rem}.next-band:hover .go{transform:translateX(-8px);background:var(--fg);color:var(--bg)}
.prev-line{padding-block:1.4rem 2rem;font-size:.95rem;color:var(--muted)}.prev-line a{border-bottom:1px solid currentColor}
.rel-h{font:900 1.6rem/1.5 var(--font);padding:2.4rem clamp(1rem,4vw,2.4rem) 1rem;margin:0}

/* متن */
.prose{overflow-wrap:anywhere;padding-top:3rem;font-size:1.1rem}
.prose>*{margin:0 0 1.5em}
.prose h2{font:800 clamp(1.6rem,4vw,2.1rem)/1.6 var(--font);margin:2.4em 0 .6em;position:relative;padding-inline-start:1.1rem}
.prose h2::before{content:"";position:absolute;inset-inline-start:0;top:.45em;bottom:.45em;width:.4rem;background:var(--bg)}
.prose h3{font:700 1.4rem/1.6 var(--font);margin:2em 0 .5em}
.prose strong{font-weight:800}
.prose a{background:linear-gradient(color-mix(in srgb,var(--bg) 35%,transparent),color-mix(in srgb,var(--bg) 35%,transparent)) 0 100%/100% .45em no-repeat;transition:background-size .3s var(--ease)}
.prose a:hover{background-size:100% 100%}
.prose img{height:auto;margin-inline:auto;display:block}
.prose figure{margin:2.4em 0;counter-increment:fig}
.prose figure.math{counter-increment:none}
.prose figcaption{text-align:center;color:var(--muted);font-size:.85rem;margin-top:.7rem}
.prose figcaption::before{content:"شکل " counter(fig,persian) " — "}
.prose ul,.prose ol{padding-inline-start:1.5em}.prose li{margin-bottom:.35em}.prose li::marker{color:var(--bg);font-weight:800}
.prose blockquote{margin:2.4em 0;padding:1.4rem 1.6rem;background:color-mix(in srgb,var(--bg) 14%,transparent);border-inline-start:6px solid var(--bg);font:600 1.3rem/1.95 var(--font)}
.prose blockquote p{margin:0}
.prose pre{direction:ltr;text-align:left;background:#14122B;color:#F6F1E7;padding:1.1rem 1.3rem;overflow:auto;font-size:.85rem;line-height:1.7}
.prose code{direction:ltr;unicode-bidi:embed;font-size:.88em;background:color-mix(in srgb,var(--bg) 16%,transparent);padding:0 .35em}
.prose pre code{background:none;padding:0}
.prose hr{border:0;margin:3em 0;text-align:center;height:auto}
.prose hr::before{content:"●  ●  ●";color:var(--bg);letter-spacing:.3em;white-space:pre;font-size:.8rem}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;margin-block:2em;max-width:100%}
.prose th{background:var(--bg);color:var(--fg);font-weight:700}
.prose th,.prose td{padding:.6rem .8rem;text-align:start;vertical-align:top;border-bottom:1px solid var(--line)}
.prose tbody tr:nth-child(even){background:color-mix(in srgb,var(--bg) 7%,transparent)}
.prose caption{caption-side:bottom;color:var(--muted);font-size:.85rem;padding-top:.6rem;counter-increment:tab}
.prose caption::before{content:"جدول " counter(tab,persian) " — "}
.prose aside.note{background:color-mix(in srgb,var(--bg) 14%,transparent);padding:1.1rem 1.4rem;border-radius:0 0 0 0;border-top:4px solid var(--bg);font-size:.98rem;line-height:1.95}
.prose aside.note>:last-child{margin-bottom:0}
.prose details{border-block:2px solid var(--ink);padding:.8rem 0}
.prose details+details{border-top:0}
.prose summary{cursor:pointer;font:700 1.15rem/1.8 var(--font);list-style:none}
.prose summary::-webkit-details-marker{display:none}
.prose summary::before{content:"+";display:inline-block;width:1.3em;color:var(--bg);font-weight:900}
.prose details[open]>summary::before{content:"−"}
.prose details[open]>summary{margin-bottom:.6em}
.prose mark{background:#F5B82E;color:#14122B;padding:0 .2em}
.prose kbd{font:.85em ui-monospace,Menlo,Consolas,monospace;border:2px solid var(--ink);border-bottom-width:4px;padding:0 .4em}
.prose del{color:var(--muted)}.prose sup,.prose sub{font-size:.7em;line-height:0}
.prose [dir="ltr"]{text-align:left}
.prose .video{position:relative;aspect-ratio:16/9;margin:2.4em 0;background:#000}
.prose .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.prose .katex{direction:ltr;unicode-bidi:isolate;font-size:1.08em}
.prose .katex-display{margin:0;overflow-x:auto;overflow-y:hidden;padding-block:.3em}
.prose .math{text-align:center;direction:ltr;margin:1.8em 0;overflow-x:auto}
@media (max-width:640px){.prose table{display:block;overflow-x:auto}}
p,li,blockquote{text-wrap:pretty}

/* جستجو */
.search{border:0;padding:0;margin:0;max-width:none;width:100%;top:0;background:#F5B82E;color:#14122B}
.search::backdrop{background:rgba(20,18,43,.7)}
.search form{display:flex;gap:1rem;padding:3rem clamp(1.2rem,5vw,4rem)}
.search input{flex:1;min-width:0;background:none;border:0;border-bottom:3px solid #14122B;font:800 clamp(1.4rem,4vw,2.4rem) var(--font);padding:.3rem 0}
.search input:focus{outline:0}.search input::placeholder{color:#14122B;opacity:.45}
.search .btn{background:#14122B;color:#F5B82E;border-color:#14122B}

/* فوتر */
.foot{background:#14122B;color:#F6F1E7;margin-top:0}
.foot-swatches{display:flex;height:2.2rem}.foot-swatches span{flex:1;transition:flex .5s var(--ease)}.foot-swatches span:hover{flex:4}
.foot-in{padding:3rem clamp(1.2rem,5vw,4rem) 2.4rem}
.foot-name{font:900 clamp(2rem,7vw,4rem)/1.3 var(--font);margin:0}
.foot-line{margin:.3rem 0 1.6rem;opacity:.65}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;list-style:none;margin:0;padding:0;font-weight:500}
.foot-links a{border-bottom:2px solid transparent;transition:border-color .25s}.foot-links a:hover{border-color:#F5B82E}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}.band{clip-path:none}.hero .arches path{stroke-dashoffset:0}html{scroll-behavior:auto}}
@media print{.top,.foot,.progress,.next-band,.related,.post-foot{display:none}.post-hero{min-height:0;padding:1rem 0;background:none;color:#000}body{font-size:12pt}}