@font-face { font-family:Vazirmatn; src:url('assets/fonts/Vazirmatn-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url('assets/fonts/Vazirmatn-Bold.ttf') format('truetype'); font-style:normal; font-weight:700 900; font-display:swap; }
:root { --navy:#2c3148; --blue:#174e85; --red:#d91f35; --ink:#202c43; --muted:#5b6677; --line:#e9edf1; --gold:#c5a064; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Vazirmatn,Tahoma,Arial,sans-serif; line-height:1.8; }
button,a { font:inherit; }
a { color:inherit; }
img { max-width:100%; }
.container { width:min(1180px,calc(100% - 72px)); margin-inline:auto; }
.site-header { position:relative; width:100%; background:#fff; }
.header-art { display:block; width:100%; height:auto; }
.header-inner { height:100%; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:1; }
.header-copy { display:flex; flex-direction:column; line-height:1.3; padding-bottom:15px; }
.header-eyebrow { color:#d4d9e6; font-size:.75rem; }
.header-name { font-size:1.05rem; font-weight:800; }
.header-name span { color:#f36c73; }
.brand { position:absolute; top:0; right:7%; width:10%; height:100%; text-decoration:none; border-radius:50%; }
.brand img { width:70px; height:70px; object-fit:cover; object-position:center 25%; border-radius:50%; background:white; }
.hero { margin-top:24px; overflow:hidden; background:#e8edf4; aspect-ratio:1200/410; display:flex; align-items:center; justify-content:center; }
.hero img { display:block; width:122%; max-width:none; height:auto; flex:none; }
.sample-note { color:#657181; font-size:.78rem; margin:12px 2px 0; }
.featured { padding-block:35px 65px; }
.featured-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,355px); gap:clamp(30px,8vw,110px); align-items:center; min-height:385px; }
.featured-details { max-width:575px; }
.section-kicker { display:inline-flex; align-items:center; gap:8px; color:var(--red); font-size:.82rem; font-weight:800; letter-spacing:.01em; }
.red-line { display:inline-block; height:2px; width:20px; background:var(--red); }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(1.5rem,2.6vw,2.1rem); line-height:1.55; margin:14px 0 18px; }
.featured-description { font-size:1.02rem; line-height:2.3; color:#343c49; margin-bottom:25px; }
.featured-meta { display:flex; gap:18px; align-items:center; color:var(--muted); font-size:.87rem; margin-bottom:24px; }
.pill { display:inline-block; border-radius:100px; background:#eff4f9; padding:3px 12px; color:var(--blue); font-weight:700; }
.featured-actions { display:flex; justify-content:flex-end; align-items:center; gap:18px; flex-wrap:wrap; }
.icon { width:18px; height:18px; flex:none; }
.primary-link { display:inline-flex; min-width:104px; align-items:center; justify-content:center; gap:9px; padding:10px 18px; background:var(--blue); color:#fff; border-radius:7px; text-decoration:none; font-weight:800; box-shadow:0 4px 12px #174e8524; transition:background .2s,transform .2s; }
.primary-link:hover { background:#0e3d70; transform:translateY(-2px); }
.primary-link:focus-visible,.archive-link:focus-visible,.archive-jump:focus-visible,.featured-cover-link:focus-visible,.issue-cover-link:focus-visible,.brand:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
.archive-jump { display:inline-flex; align-items:center; gap:7px; color:var(--blue); text-decoration:none; font-size:.88rem; font-weight:700; }
.archive-jump:hover { color:var(--red); }
.disabled-link { display:inline-flex; padding:9px 18px; border-radius:7px; color:#6f7882; background:#edf0f3; cursor:not-allowed; font-weight:700; }
.featured-cover-link { display:block; width:100%; max-width:330px; justify-self:center; box-shadow:0 18px 26px #1b293229, -9px 9px 0 #e6e9ed; }
.featured-cover { display:block; width:100%; max-width:330px; justify-self:center; aspect-ratio:3/4; object-fit:cover; box-shadow:0 18px 26px #1b293229, -9px 9px 0 #e6e9ed; }
.featured-cover-link .featured-cover { box-shadow:none; }
.featured-cover-link,.featured-content > .featured-cover,.issue-cover-wrap { transition:transform 180ms ease,filter 180ms ease; }
@media (hover:hover) and (pointer:fine) {
  .featured-cover-link:hover,.featured-content > .featured-cover:hover,.issue-cover-wrap:hover { transform:translateY(-5px); filter:drop-shadow(0 8px 8px #18253a25); }
}
.archive { padding:10px 0 80px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:34px; }
h2 { font-size:clamp(1.55rem,2.5vw,2rem); line-height:1.45; margin:9px 0 0; color:#18365d; }
#archive-heading { display:flex; align-items:center; gap:12px; }
.book-icon { width:31px; height:31px; color:var(--blue); flex:none; }
.archive-count { color:var(--muted); font-size:.86rem; }
.archive-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px 32px; }
.issue-card { display:grid; grid-template-columns:minmax(0,1fr) 45%; grid-template-rows:1fr auto; column-gap:17px; min-width:0; border-bottom:1px solid var(--line); padding-bottom:20px; }
.issue-cover-wrap { grid-column:1; grid-row:1 / span 2; position:relative; width:100%; align-self:start; }
.issue-cover-link { display:block; }
.issue-cover { display:block; width:100%; height:auto; aspect-ratio:3/4; object-fit:contain; background:#e7ebf0; box-shadow:0 6px 15px #18253a1c; }
.play-overlay { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:42px; height:42px; border:2px solid #fff; border-radius:50%; color:#fff; background:#123a34aa; pointer-events:none; }
.play-overlay .icon { width:22px; height:22px; margin-left:2px; }
.issue-content { grid-column:2; grid-row:1; display:flex; flex-direction:column; min-width:0; }
.issue-content h3 { font-size:1.03rem; margin:3px 0 5px; white-space:nowrap; }
.issue-date { font-size:.82rem; color:var(--muted); margin-bottom:5px; }
.issue-topic { font-size:.88rem; line-height:1.75; margin:0 0 12px; }
.archive-link { display:inline-flex; align-items:center; gap:5px; color:var(--blue); font-weight:700; font-size:.85rem; text-decoration:none; margin-top:auto; width:max-content; }
.archive-link:hover { color:var(--red); }
.archive-link .icon { width:16px; height:16px; }
.archive-link.disabled { color:#858c97; cursor:default; }
.issue-views { grid-column:2; grid-row:2; color:#ad6b64; font-size:.78rem; white-space:nowrap; margin:12px 0 0; }
.issue-views strong { color:#344052; font-size:1rem; margin-inline-start:4px; }
.site-footer { background:var(--navy); color:#d6bb83; padding:26px 0; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; align-items:center; font-size:.82rem; font-weight:700; }
.loading,.error { color:var(--muted); }
.error { background:#fff3f3; padding:18px; border-radius:8px; }
@media (max-width:900px) { .archive-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .featured-content { gap:28px; } }
@media (max-width:620px) {
  .container { width:min(100% - 32px,480px); }
  .site-header { overflow:hidden; height:72px; } .header-art { width:683px; max-width:none; height:72px; position:absolute; right:0; } .brand { right:45px; width:70px; height:72px; }
  .header-copy { padding-bottom:8px; } .header-name { font-size:.9rem; }
  .hero { margin-top:16px; aspect-ratio:1.7; } .hero img { width:180%; }
  .featured { padding:34px 0 50px; } .featured-content { grid-template-columns:1fr; } .featured-cover-link,.featured-cover { width:min(70%,260px); } .featured-cover-link { grid-row:1; } .featured-cover-link .featured-cover { width:100%; } .featured-content > .featured-cover { grid-row:1; } .featured-details { grid-row:2; }
  .featured-description { font-size:.93rem; } .archive { padding-bottom:55px; } .archive-grid { grid-template-columns:1fr; gap:25px; }
  .issue-card { grid-template-columns:minmax(0,1fr) 40%; } .footer-inner { flex-direction:column; text-align:center; gap:2px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .primary-link,.featured-cover-link,.featured-content > .featured-cover,.issue-cover-wrap { transition:none; } .featured-cover-link:hover,.featured-content > .featured-cover:hover,.issue-cover-wrap:hover { transform:none; } }