/* Layout: ستون باریک لینک‌تری؛ هدر یه کاور کوچیک تیلیته (کلاژ، هافتون، پرتو، شطرنجی)،
   زیرش دکمه‌های استیکری با خط مشکی ضخیم و سایه‌ی سخت. */
:root{
  --bg:#11126E; --accent:#FEBB02; --text:#FFFFFF; --dots:#028BA3;
  --ink:#111111; --paper:#FFFFFF; --hl:#7F0102;

  --font-display:"Lalezar", "Vazirmatn", Tahoma, sans-serif;
  --font-body:"Vazirmatn", Tahoma, system-ui, sans-serif;
  --font-latin:"DM Sans", "Vazirmatn", system-ui, sans-serif;
  --font-fun:"Fredoka", "Vazirmatn", system-ui, sans-serif;

  --line:3px; --shadow:5px;
  --r-lg:22px; --r-md:16px; --r-sm:10px; --r-pill:999px;
  --col:440px;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  font-family:var(--font-body); font-size:16px; line-height:1.7;
  color:var(--text); background-color:var(--bg);
  background-image:radial-gradient(color-mix(in srgb, var(--dots) 45%, transparent) 1.5px, transparent 1.9px);
  background-size:14px 14px;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
.latin{font-family:var(--font-latin); direction:ltr; unicode-bidi:isolate}

.page{
  width:100%; max-width:calc(var(--col) + 32px); margin-inline:auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:24px 32px;
  display:flex; flex-direction:column; gap:36px;
}

/* ---------- قطعه‌های مشترک هویت ---------- */
.sticker{
  border:var(--line) solid var(--ink);
  box-shadow:var(--shadow) var(--shadow) 0 var(--ink);
}
/* سطح رنگی با زمینه و متن خودش */
.surface{background:var(--s-bg); color:var(--s-text)}
/* تیکه‌کاغذهای زاویه‌دار */
.collage{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
/* لکه‌ی هافتون */
.halftone{
  position:absolute; z-index:-1; pointer-events:none;
  width:var(--size,140px); height:var(--size,140px);
  background-image:radial-gradient(var(--s-dots) 2.3px, transparent 2.7px);
  background-size:9px 9px;
  -webkit-mask:radial-gradient(circle at var(--at,50% 50%), #000 15%, transparent 68%);
          mask:radial-gradient(circle at var(--at,50% 50%), #000 15%, transparent 68%);
}
/* نوار شطرنجی */
.checker{
  height:20px; border-top:var(--line) solid var(--ink);
  background:conic-gradient(var(--c1,#11126E) 25%, var(--c2,#fff) 0 50%, var(--c1,#11126E) 0 75%, var(--c2,#fff) 0) 0 0 / 20px 20px;
}
/* سه خط کوچیک کنار حباب، مثل کاورها */
.burst{display:inline-flex; flex-direction:column; gap:5px; flex:none}
.burst i{display:block; height:4px; border-radius:4px; background:var(--b,var(--ink))}
.burst i:nth-child(1){width:14px; rotate:-24deg}
.burst i:nth-child(2){width:18px}
.burst i:nth-child(3){width:14px; rotate:24deg}
.burst--end i:nth-child(1){rotate:24deg}
.burst--end i:nth-child(3){rotate:-24deg}

/* تیتر بخش‌ها */
.section-title{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin:0 0 16px;
  font-family:var(--font-display); font-weight:400;
  font-size:24px; line-height:1.4; color:var(--accent);
}
.section-title .burst i{background:var(--accent)}

/* ---------- ۱. هدر / کاور ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:44px;
}
/* لایه‌ی کلاژ (SVG) که app.js با اندازه‌ی واقعی کارت می‌کشه */
.hero__art{position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none}
.hero__logo{margin:0; width:var(--logo-w,80%); max-width:400px}
.hero__logo img{width:100%; aspect-ratio:var(--logo-ar)}

.hero__say{display:flex; align-items:center; justify-content:center; gap:10px; margin:12px 0 0; max-width:100%}
.hero__say .burst i{height:5px}
/* حباب حرف دوتکه، مثل «EP 01 PIZZA»: تیکه‌ی اول مشکی، تیکه‌ی دوم زرشکی و درشت، با دم حباب */
.say{
  position:relative; margin:0; display:inline-flex; align-items:center; gap:.4em;
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:var(--r-pill);
  padding:2px 20px 4px; white-space:nowrap;
}
.say::after{
  content:""; position:absolute; bottom:-9px; inset-inline-start:30px;
  width:16px; height:16px; background:var(--paper);
  border:solid var(--ink); border-width:0 var(--line) var(--line) 0;
  transform:rotate(45deg) skew(10deg,10deg);
}
.say__a{font-weight:800; font-size:18px; line-height:1}
.say__b{font-family:var(--font-display); font-size:38px; line-height:1.5; color:var(--hl)}
.hero__tagline{
  margin:24px 0 0; padding-inline:40px; max-width:34ch;
  font-size:16px; font-weight:700; line-height:1.65; text-wrap:balance;
}
.hero__cadence{
  margin:16px 0 0; padding:2px 14px 3px;
  font-size:13px; font-weight:700; line-height:1.7;
  color:var(--paper); background:var(--ink); border-radius:var(--r-pill);
}
.hero .checker{align-self:stretch; margin-top:60px}

/* ---------- ۲. دکمه‌های گوش‌دادن ---------- */
.links{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.btn{
  display:flex; align-items:center; gap:14px;
  min-height:66px; padding:10px 12px 10px 14px;
  border-radius:var(--r-md);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
  touch-action:manipulation; cursor:pointer;
}
.btn__badge{
  flex:none; display:grid; place-items:center;
  width:42px; height:42px; border-radius:var(--r-sm);
  background:var(--ink); color:var(--paper);
}
.btn__badge svg{width:24px; height:24px}
.btn__name{flex:1; min-width:0; font-size:19px; font-weight:700; line-height:1.2; text-align:start}
.btn__go{
  flex:none; display:inline-flex; align-items:center; gap:4px;
  padding:3px 10px 4px 8px; border-radius:var(--r-pill);
  font-size:13px; font-weight:700; line-height:1.6;
  border:2px solid currentColor;
}
.btn__go svg{width:16px; height:16px}
@media (hover:hover){
  a.btn:hover{transform:translate(-2px,-2px); box-shadow:calc(var(--shadow) + 2px) calc(var(--shadow) + 2px) 0 var(--ink)}
}
.btn[aria-disabled]{cursor:default}
a.btn:active{transform:translate(var(--shadow),var(--shadow)); box-shadow:0 0 0 var(--ink)}
:focus-visible{outline:3px solid var(--accent); outline-offset:4px}

/* ---------- ۳. آخرین قسمت ---------- */
.ep{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:28px 18px 0; border-radius:var(--r-lg); text-align:center;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.ep__label{
  margin:0; font-size:13px; font-weight:800; line-height:1.6;
  padding:2px 12px 3px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--paper);
}
.ep__row{display:flex; align-items:center; gap:10px; max-width:100%}
.ep__bubble{
  display:inline-flex; align-items:center; gap:12px; min-width:0;
  background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:var(--r-pill);
  padding:6px 8px 6px 20px;
}
.ep__num{
  flex:none; padding:2px 12px 4px; border-radius:var(--r-pill);
  background:#FEBB02; color:var(--ink);
  font-family:var(--font-fun); font-weight:700; font-size:18px; line-height:1.5;
}
.ep__title{
  font-family:var(--font-display); font-weight:400; font-size:32px; line-height:1.3;
  color:var(--hl); white-space:nowrap;
}
@media (max-width:420px){ .ep__row .burst{display:none} }
.ep__cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 18px 8px; border-radius:var(--r-pill);
  background:var(--ink); color:var(--paper);
  font-size:15px; font-weight:700; line-height:1.5;
}
.ep__cta svg{width:18px; height:18px}
.ep .checker{align-self:stretch; margin:6px -18px 0}
@media (hover:hover){
  a.ep:hover{transform:translate(-2px,-2px); box-shadow:calc(var(--shadow) + 2px) calc(var(--shadow) + 2px) 0 var(--ink)}
}
a.ep:active{transform:translate(var(--shadow),var(--shadow)); box-shadow:0 0 0 var(--ink)}

/* ---------- قسمت بعدی (بنر کوچیک شمارش معکوس) ---------- */
.next{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:14px 16px; border-radius:var(--r-lg);
}
.next[hidden]{display:none}
.next__info{min-width:0}
.next__label{
  display:inline-block; margin:0; padding:1px 10px 2px; border-radius:var(--r-pill);
  font-size:13px; font-weight:800; line-height:1.6; background:var(--ink); color:var(--paper);
}
.next__topic{margin:2px 0 0; font-family:var(--font-display); font-size:32px; line-height:1.3; color:var(--s-accent)}
.next__date{
  flex:none; display:flex; flex-direction:column; align-items:center; min-width:104px; padding:6px 12px 5px;
  background:var(--paper); color:var(--ink); border:var(--line) solid var(--ink); border-radius:var(--r-md);
  box-shadow:3px 3px 0 var(--ink);
}
.next__date b{font-family:var(--font-display); font-weight:400; font-size:24px; line-height:1.35; white-space:nowrap}
.next__date small{font-size:13px; font-weight:700; line-height:1.5}

/* ---------- ۴. شبکه‌های اجتماعی ---------- */
.social{list-style:none; margin:0; padding:0; display:flex; justify-content:center; gap:16px}
.social a, .social span{
  display:grid; place-items:center; width:58px; height:58px;
  border-radius:var(--r-md); background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.social svg{width:26px; height:26px}
@media (hover:hover){ .social a:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)} }
.social a:active{transform:translate(4px,4px); box-shadow:0 0 0 var(--ink)}

/* ---------- ۵. فوتر ---------- */
.foot{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; font-weight:500; color:color-mix(in srgb, var(--text) 78%, transparent);
}
.foot img{width:26px; height:auto}

/* ---------- حرکت ---------- */
@keyframes rise{from{opacity:.001; transform:translateY(8px)} to{opacity:1; transform:none}}
.page > *{animation:rise .35s var(--ease) both}
.page > :nth-child(2){animation-delay:.06s}
.page > :nth-child(3){animation-delay:.12s}
.page > :nth-child(4){animation-delay:.18s}
.page > :nth-child(5){animation-delay:.22s}
.page > :nth-child(6){animation-delay:.26s}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
}

@media (max-width:360px){
  .say{padding-inline:14px}
  .say__a{font-size:16px}
  .say__b{font-size:32px}
  .ep__title{font-size:26px}
  .btn__name{font-size:17px}
  .next{padding-inline:12px}
  .next__topic{font-size:28px}
}
@media (min-width:600px){
  .page{padding-block:48px 48px}
}