/* ============================================================
   سایت محمدجواد احمدی — قالب Sideband × سبز نعنایی
   فایل مشترک استایل — همهٔ صفحات از این استفاده می‌کنند
   ============================================================ */

@font-face{font-family:V;src:url('assets/Vazirmatn-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:V;src:url('assets/Vazirmatn-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:D;src:url('assets/Estedad-Black.ttf') format('truetype');font-weight:900;font-display:swap}
@font-face{font-family:D;src:url('assets/Estedad-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:LZ;src:url('assets/lalezar.woff2') format('woff2');font-weight:400;font-display:swap}

:root{
  --bg:#1b1b19;
  --bg2:#232320;
  --cream:#f2efe6;
  --mint:#3ddc84;
  --mint2:#8ef2b6;
  --mut:#9a978d;
  --line:#333330;
  --font-body:V,Tahoma,sans-serif;
  --font-head:D,sans-serif;
  --font-display:LZ,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{background:var(--bg);color:var(--cream);font-family:var(--font-body);line-height:1.9}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--mint);color:#141412}

/* ============ نوار بالا ============ */
.topbar{
  position:fixed;inset-inline:0;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px 26px;
  background:linear-gradient(180deg,rgba(27,27,25,.96),rgba(27,27,25,.72) 70%,transparent);
  backdrop-filter:blur(6px);
}
.topbar .brand{display:flex;align-items:center;gap:12px}
.topbar .brand img{height:38px;width:auto}
.topbar .brand .wm{font-family:var(--font-head);font-weight:900;font-size:.9rem;letter-spacing:.05em}
.topbar .pagelabel{
  font-family:var(--font-head);font-weight:900;font-size:.86rem;color:var(--mut);
  letter-spacing:.02em
}
.topbar .menu-btn{
  display:flex;flex-direction:column;gap:5px;padding:10px 12px;border:1px solid #44443d;border-radius:8px;
  transition:.2s
}
.topbar .menu-btn i{display:block;width:20px;height:2px;background:var(--cream);border-radius:2px;transition:.25s}
.topbar .menu-btn:hover{border-color:var(--mint)}
.topbar .menu-btn:hover i{background:var(--mint)}

/* دکمهٔ مرکزی قرص (روی دسکتاپ) */
.pill{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:61;
  display:flex;align-items:center;gap:9px;
  border:1px solid #44443d;border-radius:100px;padding:8px 18px;font-size:.74rem;
  background:rgba(27,27,25,.8);backdrop-filter:blur(8px);transition:.2s
}
.pill:hover{border-color:var(--mint);color:var(--mint)}
.pill b{color:var(--mint);font-weight:700}

/* ============ منوی همبرگری (داشبورد) ============ */
.drawer{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(15,15,14,.86);backdrop-filter:blur(14px)
}
.drawer.open{display:grid;place-items:center;animation:fade .25s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.drawer .inner{width:min(560px,90vw);padding:30px 0}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.drawer .dh span{font-family:var(--font-head);font-weight:900;font-size:.8rem;color:var(--mint);letter-spacing:.1em}
.drawer .dh button{font-size:1.4rem;line-height:1;color:var(--mut);padding:6px 10px}
.drawer .dh button:hover{color:var(--mint)}
.drawer ul{list-style:none}
.drawer li{border-top:1px solid var(--line)}
.drawer li:last-child{border-bottom:1px solid var(--line)}
.drawer li a{
  display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:14px;
  padding:15px 6px;transition:.2s
}
.drawer li a:hover{background:rgba(61,220,132,.07);padding-inline-start:16px}
.drawer li .n{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--mint)}
.drawer li .t{font-family:var(--font-head);font-weight:900;font-size:1.06rem}
.drawer li .t small{display:block;font-family:var(--font-body);font-weight:400;font-size:.68rem;color:var(--mut);margin-top:2px}
.drawer li .ar{color:var(--mint);font-size:1rem}
.drawer li a.on .t{color:var(--mint)}

/* ============ قاب اسلایدها (مثل استوری) ============ */
.deck{position:fixed;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;cursor:grab}
.deck.grabbing{cursor:grabbing}
.deck::-webkit-scrollbar{display:none}
.slide{
  flex:0 0 100vw;width:100vw;height:100%;
  scroll-snap-align:center;scroll-snap-stop:always;
  overflow-y:auto;overflow-x:hidden;
  padding:76px 0 40px;
  -webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;justify-content:flex-start
}
.slide > .wrap{width:min(1280px,100% - 88px);margin-block:auto}
.deck{scroll-behavior:smooth}
.wrap{width:min(1280px,100% - 88px);margin:0 auto}
.k{font-size:.6rem;letter-spacing:.3em;color:var(--mint);margin-bottom:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace}

/* ============ تیتر ============ */
h1{font-family:var(--font-display);font-weight:400;font-size:86px;line-height:1.22;letter-spacing:0}
h1 em{font-style:normal;color:var(--mint)}
h2{font-family:var(--font-head);font-weight:900;font-size:2rem;line-height:1.35;letter-spacing:0}
h3{font-family:var(--font-head);font-weight:900;font-size:1.2rem;line-height:1.5}
.lead{color:#c9c4ba;font-size:.94rem;line-height:2.05}

/* ============ دکمه‌ها ============ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;font-size:.78rem;
  font-weight:700;border-radius:0;transition:.2s}
.btn.mint{background:var(--mint);color:#141412}
.btn.mint:hover{background:var(--mint2)}
.btn.ghost{border:1px solid #46463f;color:var(--cream)}
.btn.ghost:hover{border-color:var(--mint);color:var(--mint)}

/* ============ صفحه‌نما (نقطه‌های پایین) ============ */
.dots{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);z-index:55;
  display:flex;gap:8px;align-items:center}
.dots i{width:7px;height:7px;border-radius:50%;background:#4a4a44;transition:.25s;display:block}
.dots i.on{background:var(--mint);width:20px;border-radius:100px}
.hint{position:fixed;bottom:14px;inset-inline-end:26px;z-index:55;
  font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:.2em;color:#6c695f}

/* ============ عکس ============ */
.frame{border-radius:14px;overflow:hidden;background:var(--mint);position:relative;line-height:0}
.frame img{width:100%;height:auto;display:block}

/* ============ جدول سوابق ============ */
.rows .r{display:grid;grid-template-columns:120px 1fr auto;gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line)}
.rows .r:first-child{border-top:1px solid var(--line)}
.rows .r .yr{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--mint)}
.rows .r b{font-family:var(--font-head);font-weight:900;font-size:1rem}
.rows .r i{font-style:normal;display:block;font-size:.76rem;color:var(--mut);margin-top:2px}
.rows .r .tag{font-size:.62rem;color:var(--mut);border:1px solid var(--line);padding:3px 9px;border-radius:100px;white-space:nowrap}

/* ============ واکنش‌گرا ============ */
@media(max-width:760px){
  .wrap{width:calc(100% - 32px)}
  h1{font-size:46px;line-height:1.3}
  h2{font-size:1.35rem}
  .lead{font-size:.82rem;line-height:2}
  .slide{padding:64px 0 34px}
  .topbar{padding:10px 14px}
  .topbar .brand img{height:30px}
  .topbar .pagelabel{font-size:.72rem}
  .pill{display:none}
  .hint{display:none}
  .rows .r{grid-template-columns:74px 1fr;gap:10px}
  .rows .r .tag{grid-column:2;justify-self:start;margin-top:4px}
  .rows .r b{font-size:.88rem}
  .rows .r i{font-size:.68rem}
}