@font-face{font-family:'Estedad Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/estedad-arabic-wght-normal.woff2?v=15") format('woff2-variations');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:'Estedad Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/estedad-vietnamese-wght-normal.woff2?v=15") format('woff2-variations');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Estedad Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/estedad-latin-ext-wght-normal.woff2?v=15") format('woff2-variations');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:'Estedad Variable';font-style:normal;font-display:swap;font-weight:100 900;src:url("../assets/fonts/estedad-latin-wght-normal.woff2?v=15") format('woff2-variations');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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?v=15") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?v=15") 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: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?v=15") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?v=15") 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: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?v=15") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?v=15") 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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2?v=15") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2?v=15") 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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2?v=15") 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;
}


/* بلاگ کوله — independent editorial styles. Fonts come from the live site. */

:root{
  --blue:#0B63EB;
  --blue-2:#1A86FA;
  --ink:#0A0A0A;
  --muted:#5C5C63;
  --bg:#F3F5F9;
  --bg-soft:#E8EEF8;
  --card:#FFFFFF;
  --line:#E4E6EC;
  --glass:rgba(255,255,255,.78);
  --shadow:0 8px 28px rgba(16,32,60,.06);
  --shadow-hover:0 16px 40px rgba(16,32,60,.10);
  --radius:28px;
  --radius-md:20px;
  --radius-sm:14px;
  --font:"Estedad Variable","Estedad","Vazirmatn","Inter",system-ui,Tahoma,sans-serif;
  --font-en:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --header-h:68px;
  --wrap:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html[dir="ltr"]{font-family:var(--font-en)}
body{margin:0;min-height:100vh;background:
  radial-gradient(1200px 500px at 100% -10%,rgba(11,99,235,.10),transparent 60%),
  radial-gradient(900px 420px at 0% 0%,rgba(26,134,250,.06),transparent 55%),
  var(--bg);
  color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0;letter-spacing:-.03em;line-height:1.25;font-weight:750}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:min(var(--wrap), calc(100% - 40px));margin-inline:auto}
.skip-link{position:absolute;inset-inline-start:12px;top:-40px;z-index:80;background:var(--ink);color:#fff;padding:8px 12px;border-radius:10px}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ===== Header ===== */
.blog-header{position:sticky;top:0;z-index:50;background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(10,10,16,.06);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset}
.blog-header__bar{width:min(var(--wrap), calc(100% - 40px));margin-inline:auto;display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"brand cats tools";align-items:center;gap:18px;height:var(--header-h)}
.brand{grid-area:brand;display:flex;align-items:center;min-width:0}
.brand__title{font-size:18px;font-weight:800;letter-spacing:-.03em;color:var(--ink);white-space:nowrap;line-height:1}
html[dir="ltr"] .brand__title{font-family:var(--font-en);letter-spacing:-.04em}
.cats-nav{grid-area:cats;display:flex;align-items:center;gap:2px;min-width:0;justify-content:center}
.cats-nav a,.cats-nav button{appearance:none;display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted);white-space:nowrap;transition:background .2s var(--ease),color .2s}
.cats-nav a:hover,.cats-nav button:hover{color:var(--ink);background:rgba(11,99,235,.06)}
.cats-nav a.is-active,.cats-nav button.is-active{color:#fff;background:var(--blue)}
.header-tools{grid-area:tools;display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid rgba(10,10,16,.08);transition:background .2s,border-color .2s}
.icon-btn:hover{background:#fff;border-color:rgba(11,99,235,.25)}
.icon-btn svg{width:18px;height:18px;display:block}
.home-link{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:650;color:var(--blue);background:rgba(11,99,235,.08);border:1px solid rgba(11,99,235,.12);white-space:nowrap}
.home-link:hover{background:rgba(11,99,235,.14)}
.home-link svg{width:14px;height:14px}

.search-panel{display:none;border-top:1px solid rgba(10,10,16,.06);background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.search-panel.is-open{display:block}
.search-panel__inner{width:min(var(--wrap), calc(100% - 40px));margin-inline:auto;padding:12px 0 16px;display:flex;align-items:center;gap:10px}
.search-panel input{flex:1;height:44px;border:1px solid var(--line);border-radius:14px;padding:0 16px;background:#fff;font-size:15px}
.search-panel input::placeholder{color:#9A9AA1}

@media (max-width: 900px){
  .blog-header__bar{width:calc(100% - 28px);height:auto;grid-template-columns:1fr auto;grid-template-areas:"brand tools" "cats cats";padding-top:8px;padding-bottom:0;gap:8px 12px}
  .brand__title{font-size:16px}
  .home-link{padding:0 10px;font-size:12.5px;height:36px}
  .icon-btn{width:36px;height:36px}
  .cats-nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:10px;padding-inline-end:20px;gap:4px}
  .cats-nav a,.cats-nav button{height:32px;padding:0 10px;font-size:13px}
  .cats-nav::-webkit-scrollbar{display:none}
  .search-panel__inner{width:calc(100% - 28px)}
}

/* ===== Hero ===== */
.hero{padding:36px 0 8px}
.hero__card{display:grid;grid-template-columns:.95fr 1.05fr;grid-template-areas:"body media";min-height:440px;background:var(--card);border:1px solid rgba(10,10,16,.06);border-radius:32px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.hero__card:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.hero__media{grid-area:media;position:relative;background:#e8eef8;min-height:440px}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.hero__body{grid-area:body;display:flex;flex-direction:column;justify-content:center;align-items:start;padding:44px 40px;gap:16px}
.hero__body h2{font-size:clamp(28px, 3vw, 42px);line-height:1.28}
.hero__body .excerpt{font-size:17px;line-height:1.8;color:var(--muted);max-width:34em}
.badge{position:absolute;inset-inline-start:16px;top:16px;z-index:1;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(10,10,16,.82);color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.chip{display:inline-flex;align-items:center;align-self:flex-start;width:auto;height:28px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--blue);background:rgba(11,99,235,.1)}
.meta{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:13.5px;color:var(--muted)}
.meta span{display:inline-flex;align-items:center;gap:6px}
.meta .dot{width:3px;height:3px;border-radius:50%;background:#C4C4C8;display:inline-block}

@media (max-width: 860px){
  .hero{padding:20px 0 4px}
  .hero__card{grid-template-columns:1fr;grid-template-areas:"media" "body";min-height:0;border-radius:24px}
  .hero__media{min-height:220px;aspect-ratio:16/10}
  .hero__body{padding:22px 20px 24px;gap:12px}
  .hero__body h2{font-size:26px}
  .hero__body .excerpt{font-size:15.5px}
}

/* ===== Main layout ===== */
.section{padding:28px 0 8px}
.section-head{display:flex;align-items:center;justify-content:start;gap:14px 18px;margin-bottom:18px;flex-wrap:wrap}
.section-head h2{font-size:22px}
.section-head .chips,.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:start}
.chips a,.chips button{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:650;color:var(--muted);background:#fff;border:1px solid var(--line)}
.chips a:hover,.chips button:hover,.chips a.is-active,.chips button.is-active{color:var(--blue);border-color:rgba(11,99,235,.28);background:rgba(11,99,235,.06)}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"main side";gap:36px;align-items:start;padding-bottom:12px}
.layout > div:first-child{grid-area:main;min-width:0}
.layout > .sidebar{grid-area:side}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid rgba(10,10,16,.06);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);transition:transform .22s var(--ease),box-shadow .22s var(--ease);min-width:0;height:100%}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.card__media{position:relative;aspect-ratio:16/10;background:#e8eef8;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;object-position:center}
.card__body{display:flex;flex-direction:column;align-items:start;gap:8px;padding:16px 16px 18px;flex:1}
.card__body h3{font-size:17.5px;line-height:1.45}
.card__body .excerpt{font-size:14px;line-height:1.75;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card__body .meta{margin-top:auto;padding-top:6px}

.empty{display:none;padding:48px 20px;text-align:center;color:var(--muted);background:#fff;border:1px dashed var(--line);border-radius:22px}
.empty.is-visible{display:block}

.sidebar{display:flex;flex-direction:column;gap:22px}
.side-block{background:var(--card);border:1px solid rgba(10,10,16,.06);border-radius:22px;padding:18px 16px 12px;box-shadow:var(--shadow)}
.side-block h2{font-size:16px;margin-bottom:12px;padding-inline:4px}
.pop{display:flex;flex-direction:column}
.pop a{display:grid;grid-template-columns:auto 64px minmax(0,1fr);gap:12px;align-items:center;padding:10px 4px;border-top:1px solid var(--line)}
.pop a:first-of-type{border-top:0}
.pop__n{font-family:var(--font-en);font-weight:700;font-size:13px;color:#C2C5CE;width:1.4em;direction:ltr}
.pop__thumb{width:64px;height:48px;border-radius:10px;overflow:hidden;background:#e8eef8}
.pop__thumb img{width:100%;height:100%;object-fit:contain;object-position:center}
.pop__title{font-size:13.5px;font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pop .meta{font-size:12px;margin-top:3px}

@media (max-width: 980px){
  .layout{grid-template-columns:1fr;grid-template-areas:"main" "side";gap:28px}
}
@media (max-width: 700px){
  .wrap,.blog-header__bar{width:calc(100% - 28px)}
  .grid{grid-template-columns:1fr;gap:14px}
  .section{padding:22px 0 4px}
}

/* ===== Follow ===== */
.follow{padding:20px 0 40px}
.follow__card{position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 32px;
  padding:28px 32px;border-radius:28px;background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.7)),
    radial-gradient(600px 200px at 100% 0%,rgba(11,99,235,.14),transparent 60%);
  border:1px solid rgba(11,99,235,.12);
  box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
.follow__card h2{font-size:22px;margin-bottom:6px}
.follow__card p{color:var(--muted);font-size:14.5px;line-height:1.7}
.socials{display:flex;flex-wrap:wrap;gap:8px;justify-content:start}
.social{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:13.5px;font-weight:650}
.social:hover{border-color:rgba(11,99,235,.3);color:var(--blue)}
.social svg{width:16px;height:16px}
.follow__mascot{width:150px;height:190px;object-fit:contain;object-position:center bottom;flex:none;justify-self:center}
@media (max-width: 700px){
  .follow__card{padding:20px 18px 16px;gap:16px 18px;text-align:start}
  .follow__card > div{flex:1 1 180px}
  .socials{justify-content:flex-start}
  .follow__mascot{width:96px;height:124px;margin-inline-start:auto}
}

/* ===== Footer ===== */
.blog-footer{border-top:1px solid rgba(10,10,16,.06);padding:28px 0 36px;background:rgba(255,255,255,.45)}
.blog-footer__inner{width:min(var(--wrap), calc(100% - 40px));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.foot-brand img.logo{height:24px;width:auto}
.foot-brand p{font-size:13px;color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:13.5px;font-weight:600}
.foot-links a:hover{color:var(--blue)}
.footer__enamad{flex:none;display:grid;place-items:center;padding:10px;border-radius:20px;background:rgba(255,255,255,.72);border:1px solid rgba(11,99,235,.12);
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);
  box-shadow:0 8px 30px rgba(15,20,30,.08),0 1px 0 rgba(255,255,255,.7) inset,0 0 0 1px rgba(255,255,255,.35) inset}
.footer__enamad a{display:grid;place-items:center;line-height:0}
.footer__enamad img{height:72px;width:auto;max-height:80px;max-width:100%;display:block}
@media (max-width: 700px){
  .blog-footer__inner{width:calc(100% - 28px);justify-content:center;text-align:center}
  .foot-brand,.foot-links{justify-content:center;width:100%}
}

/* ===== Article ===== */
.article-wrap{width:min(1180px, calc(100% - 40px));margin-inline:auto;display:grid;grid-template-columns:220px minmax(0,720px) 1fr;grid-template-areas:"toc article .";gap:36px;align-items:start;padding:36px 0 56px}
.article-wrap > .toc{grid-area:toc}
.article-wrap > .article{grid-area:article}
.toc{position:sticky;top:calc(var(--header-h) + 18px);padding:16px;border-radius:18px;background:rgba(255,255,255,.65);border:1px solid rgba(10,10,16,.06);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.toc h2{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-bottom:10px}
.toc ol{list-style:none;display:flex;flex-direction:column;gap:6px}
.toc a{display:block;font-size:13px;line-height:1.55;color:var(--muted);padding:4px 0;border-inline-start:2px solid transparent;padding-inline-start:10px}
.toc a:hover,.toc a.is-active{color:var(--ink);border-inline-start-color:var(--blue)}
.article{min-width:0}
.article__hero{margin:0 0 22px;border-radius:28px;overflow:hidden;background:#e8eef8;aspect-ratio:16/9;position:relative}
.article__hero img{width:100%;height:100%;object-fit:cover;object-position:center}
.article__kicker{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.article h1{font-size:clamp(28px, 4vw, 40px);line-height:1.3;margin-bottom:14px}
.article__lead{font-size:18px;line-height:1.85;color:var(--muted);margin-bottom:16px}
.article__byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:14px 0 22px;border-bottom:1px solid var(--line);margin-bottom:28px;font-size:14px;color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#e8eef8;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center}
.byline-name{font-weight:700;color:var(--ink)}
.prose{font-size:18.5px;line-height:2;color:#1a1a1d}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:1.35rem;margin:1.8em 0 .6em;line-height:1.4}
.prose h2:first-child{margin-top:.2em}
.share{display:flex;flex-wrap:wrap;justify-content:start;gap:8px;padding:28px 0 8px;border-top:1px solid var(--line);margin-top:36px}
.share span{width:100%;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:2px}
.related{margin-top:36px}
.related h2{font-size:20px;margin-bottom:16px}
.related .grid{grid-template-columns:1fr 1fr}

@media (max-width: 1040px){
  .article-wrap{grid-template-columns:1fr;grid-template-areas:"toc" "article";width:min(760px, calc(100% - 36px));gap:20px}
  .toc{position:relative;top:auto}
  .toc ol{flex-direction:row;flex-wrap:wrap;gap:4px 10px}
  .toc a{border-inline-start:0;border-bottom:2px solid transparent;padding:4px 2px}
  .toc a:hover,.toc a.is-active{border-bottom-color:var(--blue)}
}
@media (max-width: 700px){
  .article-wrap{width:calc(100% - 28px);padding:20px 0 40px}
  .article__hero{border-radius:20px;aspect-ratio:16/10}
  .article h1{font-size:26px}
  .article__lead,.prose{font-size:16.5px}
  .related .grid{grid-template-columns:1fr}
}

/* 404 */
.notfound{min-height:52vh;display:flex;flex-direction:column;align-items:start;justify-content:center;padding:48px 0 64px;gap:12px}
.notfound h1{font-size:36px}
.notfound p{color:var(--muted)}
.notfound a{color:var(--blue);font-weight:700}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.badge--plain{position:static;inset:auto;background:rgba(10,10,16,.08);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.socials--start{justify-content:flex-start;margin-top:16px}
.post.is-hidden{display:none}
.hero.is-hidden{display:none}
[hidden]{display:none!important}
.social[data-copy-link].is-copied{border-color:rgba(11,99,235,.35);color:var(--blue)}

.lang-toggle{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:999px;font-size:12.5px;font-weight:750;letter-spacing:.04em;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid rgba(10,10,16,.08);font-family:var(--font-en)}
.lang-toggle:hover{background:#fff;border-color:rgba(11,99,235,.25);color:var(--blue)}
@media (max-width: 900px){
  .lang-toggle{height:36px;padding:0 10px;font-size:12px}
}