/* خبرخانه — the event is the text, the outlets are the margins.
   Lapis for chrome (Persian tilework blue), warm paper for reading, and
   saffron reserved for one job only: where the accounts contradict. */

@font-face { font-family:'Vazirmatn'; src:url('assets/fonts/Vazirmatn-Regular.ttf') format('truetype');
  font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('assets/fonts/Vazirmatn-Bold.ttf') format('truetype');
  font-weight:700; font-display:swap; }

:root {
  --ink:#16181d; --ink-soft:#454a54; --muted:#757b86;
  --paper:#fbfaf7; --panel:#f2f0ea; --rule:#e3e0d9;
  --lapis:#17325c; --azure:#2a6099; --saffron:#a06510;
  --measure:38rem;
}
@media (prefers-color-scheme:dark) {
  :root {
    --ink:#e9e7e2; --ink-soft:#b9bcc3; --muted:#8b929d;
    --paper:#111419; --panel:#181c23; --rule:#2a3039;
    --lapis:#16273f; --azure:#7fb0e8; --saffron:#d3a04e;
    /* the accent lightens in dark mode, so anything sitting *on* it needs
       dark text rather than white */
    --on-accent:#0d1622;
  }
}
:root { --on-accent:#fff; }

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink);
  font-family:'Vazirmatn',system-ui,sans-serif; font-size:17px; line-height:2;
  direction:rtl; text-rendering:optimizeLegibility; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; height:auto; }
:focus-visible { outline:2px solid var(--azure); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }

.wrap { width:min(100% - 2.5rem, 64rem); margin-inline:auto; }

/* ---- masthead: a single lapis band, nothing else competing ---- */
.masthead { background:var(--lapis); color:#fff; }
.masthead .wrap { display:flex; align-items:baseline; gap:1rem;
  padding:1.5rem 0 1.35rem; }
.brand { font-size:1.6rem; font-weight:700; letter-spacing:0; line-height:1.3; }
.brand span { display:block; font-size:.78rem; font-weight:400; opacity:.62;
  line-height:1.7; margin-top:.15rem; }
.masthead nav { margin-inline-start:auto; display:flex; gap:1.4rem; font-size:.87rem; opacity:.85; }
.masthead nav a:hover { opacity:1; text-decoration:underline; text-underline-offset:.35em; }

/* ---- category bar: a second register under the masthead, quieter than it ---- */
.cats { background:var(--panel); border-bottom:1px solid var(--rule); }
.cats .wrap { display:flex; gap:1.35rem; padding:.72rem 0; font-size:.88rem;
  overflow-x:auto; scrollbar-width:none; }
.cats .wrap::-webkit-scrollbar { display:none; }
.cats a { white-space:nowrap; color:var(--ink-soft); }
.cats a:hover { color:var(--azure); }
.cats a[aria-current="page"] { color:var(--azure); font-weight:700; }

/* ---- dateline ---- */
.dateline { border-bottom:1px solid var(--rule); }
.dateline .wrap { display:flex; justify-content:space-between; align-items:baseline;
  padding:.9rem 0; font-size:.86rem; color:var(--muted); }

/* ---- lead: the thesis, not the photograph ---- */
.lead { padding:2.4rem 0 2.4rem; border-bottom:1px solid var(--rule); }
.lead .wrap { display:grid; gap:1.6rem 2.8rem; grid-template-columns:1fr; align-items:start; }
@media (min-width:52rem){
  .lead .wrap { grid-template-columns:1.05fr .95fr; }
  .lead figure { grid-column:2; grid-row:1 / span 2; position:sticky; top:1.5rem; }
}
.lead figure { margin:0; }
.lead figure img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.count { display:inline-block; font-size:.79rem; font-weight:700; color:var(--on-accent);
  background:var(--azure); padding:.2rem .75rem; }
.lead h1 { font-size:clamp(1.7rem,4.2vw,2.7rem); line-height:1.42; font-weight:700;
  margin:.85rem 0 .85rem; letter-spacing:-.012em; }
.lead h1 a:hover { color:var(--azure); }
.lead .core { font-size:1.05rem; color:var(--ink-soft); margin:0 0 1.1rem; }

/* the chorus, compressed: you should read the *spread* of outlets at a glance */
.outlets { display:flex; flex-wrap:wrap; font-size:.83rem; color:var(--muted); }
.outlets span { padding-inline-end:.65rem; margin-inline-end:.65rem;
  border-inline-end:1px solid var(--rule); line-height:1.9; }
.outlets span:last-child { border:0; }

/* ---- source filter ---- */
.filter { border-bottom:1px solid var(--rule); padding:1rem 0 1.1rem; }
.filter .lbl { font-size:.8rem; font-weight:700; color:var(--azure); display:block;
  margin-bottom:.7rem; }
.chips { display:flex; flex-wrap:wrap; gap:.45rem; }
.chip { font:inherit; font-size:.83rem; line-height:1.7; cursor:pointer;
  background:none; color:var(--ink-soft); border:1px solid var(--rule);
  border-radius:999px; padding:.24rem .8rem; }
.chip:hover { border-color:var(--azure); color:var(--azure); }
.chip[aria-pressed="true"] { background:var(--azure); border-color:var(--azure);
  color:var(--on-accent); font-weight:700; }
.chip .n { opacity:.6; font-size:.76rem; margin-inline-start:.3rem; }
.chip[aria-pressed="true"] .n { opacity:.8; }
.chip.reset { border-style:dashed; }
.filter .none { font-size:.9rem; color:var(--muted); padding:1.4rem 0; display:none; }

/* ---- section headings ---- */
.sec { font-size:.8rem; font-weight:700; color:var(--azure);
  padding-block:1.9rem .9rem; }
.sec.tight { padding-top:0; }

/* ---- event list ---- */
.events { display:grid; gap:2rem 2.6rem; grid-template-columns:1fr;
  padding-bottom:2rem; }
@media (min-width:44rem){ .events { grid-template-columns:1fr 1fr; } }
.event { display:flex; flex-direction:column; }
.event img { width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:.9rem; }
.event .n { font-size:.78rem; font-weight:700; color:var(--azure); }
.event h2 { font-size:1.22rem; line-height:1.62; font-weight:700; margin:.35rem 0 .5rem; }
.event h2 a:hover { color:var(--azure); }
.event p { font-size:.95rem; color:var(--ink-soft); margin:0 0 .7rem; }
.event .who { font-size:.8rem; color:var(--muted); }

/* ---- single-source items ---- */
.brief { border-top:1px solid var(--rule); padding:1.15rem 0; display:flex; gap:1.1rem; }
.brief img { width:5.5rem; height:5.5rem; object-fit:cover; flex:none; }
.brief h3 { font-size:1.02rem; line-height:1.65; font-weight:700; margin:0 0 .3rem; }
.brief h3 a:hover { color:var(--azure); }
.brief p { font-size:.9rem; color:var(--ink-soft); margin:0; }
.brief .src { font-size:.78rem; color:var(--muted); margin-top:.35rem; }

/* ---- event page ---- */
.crumb { font-size:.84rem; color:var(--muted); padding-top:2rem; }
.article h1 { font-size:clamp(1.75rem,5vw,2.7rem); line-height:1.42; font-weight:700;
  margin:.7rem 0 1.1rem; letter-spacing:-.01em; }
.article .hero { width:100%; aspect-ratio:16/8; object-fit:cover; margin:1.4rem 0 2rem; }
.article .core { font-size:1.14rem; max-width:var(--measure); color:var(--ink); }

/* the signature: outlets set as marginal glosses on the agreed text.
   The rule runs the full width so the column of names reads as a list of
   narrators rather than a table. */
.gloss { border-top:1px solid var(--rule); padding:1rem 0; }
.gloss dt { font-weight:700; font-size:.92rem; color:var(--azure); line-height:1.9; }
.gloss dd { margin:0; font-size:.99rem; color:var(--ink-soft); }
@media (min-width:44rem){
  .gloss { display:grid; grid-template-columns:9.5rem 1fr; gap:1.6rem; align-items:baseline; }
  .gloss dt { text-align:left; }
}

/* the risk: contradictions as facing panels, not a warning box */
.split { border-block:2px solid var(--saffron); padding:1.5rem 0; margin:2.4rem 0; }
.split h2 { font-size:.8rem; font-weight:700; color:var(--saffron); margin:0 0 1.1rem; }
.split ul { list-style:none; margin:0; padding:0; display:grid; gap:1.1rem; }
.split li { font-size:.99rem; color:var(--ink-soft); padding-inline-start:1.1rem;
  border-inline-start:2px solid var(--saffron); line-height:1.95; }

.sources { list-style:none; margin:0; padding:0; }
.gloss .angle { display:block; }
.gloss .orig { display:block; margin-top:.4rem; font-size:.9rem; color:var(--muted); }
.gloss .orig:hover { color:var(--azure); }
.gloss .go { font-size:.78rem; }

/* ---- archive ---- */
.days { list-style:none; margin:0; padding:0; }
.days li { border-top:1px solid var(--rule); }
.days a { display:flex; justify-content:space-between; align-items:baseline;
  gap:1rem; padding:1.05rem 0; }
.days a:hover { color:var(--azure); }
.days .c { font-size:.83rem; color:var(--muted); }

footer { border-top:1px solid var(--rule); margin-top:3rem; padding:2rem 0 3rem;
  font-size:.84rem; color:var(--muted); }
footer p { margin:.3rem 0; max-width:var(--measure); }
footer nav { display:flex; flex-wrap:wrap; gap:.55rem 1.25rem; margin-top:1.2rem;
  padding-top:1.2rem; border-top:1px solid var(--rule); }
footer nav a:hover { color:var(--azure); }
.telegram { display:inline-flex; align-items:baseline; gap:.5rem; margin-top:1.3rem;
  padding:.55rem 1rem; border:1px solid var(--azure); color:var(--azure);
  font-size:.92rem; font-weight:700; }
.telegram:hover { background:var(--azure); color:var(--on-accent); }
.telegram .h { font-weight:400; opacity:.75; font-size:.85rem; }
.telegram { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.4rem;
  padding:.55rem 1rem; border:1px solid var(--azure); color:var(--azure);
  font-size:.92rem; font-weight:700; }
.telegram:hover { background:var(--azure); color:var(--on-accent); }
.telegram .h { font-weight:400; opacity:.8; }