:root{
  --ink:#0B1B2B; --ink2:#0F2E47; --ink3:#102a40;
  --surf:#13476B; --teal:#1C7C8C; --teal-br:#2AA7B8;
  --gold:#C9A227; --gold-soft:#E1C772;
  --pom:#C25C58; --pom-soft:#F0C9C7;
  --cream:#E8DCC0; --cream2:#F4EEE1; --vellum:#5C4326; --vellum2:#7A5C3E;
  --muted:#9DB2C2; --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --maxw:1080px;
  --r-md:10px; --r-lg:16px; --r-pill:999px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1200px 600px at 80% -10%, #143a5a 0, transparent 60%),
    radial-gradient(900px 500px at 10% 0%, #12314a 0, transparent 55%),
    var(--ink);
  color:var(--cream);
  font-family:"Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.65;
  min-height:100vh;
}
html[lang="fa"] body{font-family:"Vazirmatn",system-ui,sans-serif}
.serif{font-family:"Source Serif 4",Georgia,serif}
.skip-link{position:absolute;inset-inline-start:-999px;top:8px;background:var(--gold);color:#2a1e04;padding:8px 14px;border-radius:8px;z-index:50}
.skip-link:focus{inset-inline-start:8px}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:6px}

/* ---------- shell ---------- */
.shell{max-width:var(--maxw);margin:0 auto;padding:0 18px 120px;position:relative}
.topbar{position:sticky;top:0;z-index:30;background:rgba(11,27,43,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 18px}
.brand{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:500;letter-spacing:.4px;color:#fff;background:none;border:0;padding:0}
.brand .mark{color:var(--gold);font-size:18px}
.tb-actions{display:flex;align-items:center;gap:6px}
.iconbtn{background:transparent;border:1px solid var(--line2);color:var(--muted);width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;transition:.18s}
.iconbtn:hover{color:var(--teal-br);border-color:var(--teal)}
.iconbtn svg{width:18px;height:18px}
.langpill{display:inline-flex;background:rgba(0,0,0,.28);border-radius:10px;padding:3px;gap:2px;border:1px solid var(--line)}
.langpill button{background:transparent;border:0;color:var(--muted);padding:6px 12px;border-radius:7px;font-size:13.5px;transition:.18s}
.langpill button.on{background:var(--gold);color:#2a1e04;font-weight:500}

.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding:14px 2px 4px}
.breadcrumb button{background:none;border:0;color:var(--muted);padding:0;font-size:13px}
.breadcrumb button:hover{color:var(--teal-br)}
.breadcrumb .sep{color:var(--gold);opacity:.7}
.breadcrumb .cur{color:var(--cream)}

/* ---------- arc home ---------- */
.hero{text-align:center;padding:30px 10px 18px}
.hero h1{font-size:34px;font-weight:500;color:#fff;margin:0 0 8px;letter-spacing:.3px}
.hero p{color:var(--muted);max-width:640px;margin:0 auto;font-size:15.5px}
.hero .range{display:inline-block;margin-top:14px;color:var(--gold);border:1px solid rgba(201,162,39,.4);border-radius:var(--r-pill);padding:5px 16px;font-size:13.5px;letter-spacing:.5px}

.section-label{font-size:12.5px;font-weight:500;letter-spacing:.6px;color:var(--teal-br);text-transform:uppercase;margin:26px 2px 12px;display:flex;align-items:center;gap:10px}
.section-label::after{content:"";flex:1;height:1px;background:var(--line)}

.arcribbon{display:flex;gap:4px;align-items:stretch;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:thin}
.arcband{flex:1 0 64px;min-width:64px;border:0;background:transparent;padding:0;text-align:center;color:var(--cream)}
.arcband .bar{height:30px;border-radius:6px;opacity:.62;transition:.18s}
.arcband:hover .bar{opacity:1;transform:translateY(-2px)}
.arcband .yr{display:block;font-size:10.5px;color:var(--muted);margin-top:6px;white-space:nowrap}
.arcband .nm{display:block;font-size:11px;margin-top:2px;line-height:1.3;color:var(--cream)}

.eragrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.eracard{position:relative;text-align:start;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r-lg);padding:0;overflow:hidden;color:var(--cream);transition:.18s;cursor:pointer}
.eracard:hover{border-color:var(--teal);transform:translateY(-3px)}
.eracard .stripe{height:6px}
.eracard .ec-in{padding:14px 16px 16px}
.eracard .ec-num{font-size:11px;color:var(--muted)}
.eracard h3{margin:4px 0 3px;font-size:17px;font-weight:500;color:#fff}
.eracard .ec-date{font-size:12.5px;color:var(--gold);margin-bottom:8px}
.eracard .ec-one{font-size:13.5px;color:#cdd9e2;line-height:1.6}
.eracard .ec-pp{position:absolute;inset-inline-end:10px;top:10px;background:rgba(201,162,39,.16);color:var(--gold-soft);border:1px solid rgba(201,162,39,.5);font-size:10.5px;border-radius:var(--r-pill);padding:2px 9px}

/* ---------- era view ---------- */
.cover{position:relative;text-align:center;padding:26px 10px 22px;margin-top:6px}
.cover .arch{position:absolute;inset-inline:28%;top:16px;width:44%;height:64px;opacity:.5;pointer-events:none}
.cover h2{position:relative;font-size:30px;font-weight:500;color:#fff;margin:6px 0 4px}
.cover .c-date{position:relative;color:var(--gold);font-size:15px;letter-spacing:1px}
.cover .c-conf{position:relative;display:inline-block;margin-top:10px;font-size:11.5px;color:var(--muted);border:1px solid var(--line2);border-radius:var(--r-pill);padding:3px 11px}

.why{background:rgba(201,162,39,.08);border:1px solid rgba(201,162,39,.32);border-radius:var(--r-md);padding:12px 16px;margin:6px 0 16px;color:var(--gold-soft);font-size:14.5px}
.why b{color:var(--gold);font-weight:500;margin-inline-end:6px}

.capsule{background:var(--cream);color:var(--vellum);border-radius:var(--r-lg);padding:16px 18px;line-height:1.9;font-size:15px}
.capsule .cap-l{font-size:12px;font-weight:600;color:#8a6d3b;letter-spacing:.5px;margin-bottom:6px}

.row2{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
@media(min-width:720px){.row2{grid-template-columns:300px 1fr}}
.mapthumb{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.mapthumb svg{display:block;width:100%;height:150px}
.mapthumb .cap{font-size:11.5px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--line)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{background:rgba(42,167,184,.12);border:1px solid rgba(42,167,184,.42);color:#bfeaf0;border-radius:var(--r-pill);padding:6px 13px;font-size:13px}
.chip.pom{background:rgba(194,92,88,.14);border-color:rgba(194,92,88,.5);color:var(--pom-soft)}
.chip.ghost{background:transparent;border-color:var(--line2);color:var(--muted)}
.chip small{opacity:.7;margin-inline-start:5px}

.evlist{display:flex;flex-direction:column;gap:10px}
.evcard{display:flex;align-items:flex-start;gap:12px;text-align:start;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r-md);padding:13px 15px;color:var(--cream);transition:.18s;cursor:pointer}
.evcard:hover{border-color:var(--teal);background:var(--ink3)}
.evcard .ev-date{flex:0 0 auto;font-size:12px;color:var(--gold);min-width:74px;padding-top:2px}
.evcard h4{margin:0 0 3px;font-size:15.5px;font-weight:500;color:#fff}
.evcard .ev-sn{font-size:13px;color:#aebcc7;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.evcard .arrow{margin-inline-start:auto;color:var(--muted);align-self:center}

.badge{display:inline-block;font-size:10.5px;border-radius:var(--r-pill);padding:2px 9px;border:1px solid;vertical-align:middle}
.b-fact{color:#bfeaf0;border-color:rgba(42,167,184,.5);background:rgba(42,167,184,.12)}
.b-interp{color:var(--gold-soft);border-color:rgba(201,162,39,.5);background:rgba(201,162,39,.1)}
.b-trad{color:var(--pom-soft);border-color:rgba(194,92,88,.5);background:rgba(194,92,88,.12)}
.b-contested{color:#f0d9a0;border-color:rgba(201,162,39,.6);background:transparent}

.callout{background:var(--ink2);border:1px solid var(--line2);border-inline-start:3px solid var(--gold);border-radius:var(--r-md);padding:13px 16px;margin-top:16px}
.callout .co-l{font-size:12.5px;font-weight:500;color:var(--gold-soft);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.callout ul{margin:0;padding-inline-start:18px}
.callout li{font-size:13.5px;color:#c6d2db;margin:6px 0;line-height:1.6}

/* ---------- event view ---------- */
.event h2{font-size:26px;font-weight:500;color:#fff;margin:4px 0 6px}
.event .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:var(--gold);font-size:14px;margin-bottom:14px}
.hero-media{background:var(--ink2);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin:6px 0 16px}
.hero-media svg{display:block;width:100%;height:190px}
.hero-media .cap{font-size:11.5px;color:var(--muted);padding:9px 14px;border-top:1px solid var(--line);line-height:1.5}
.event .body{font-size:16px;line-height:1.95;color:#dbe4ec}
.event .body .cite{color:var(--teal-br);cursor:pointer;font-weight:500;vertical-align:super;font-size:11px;padding:0 2px;background:none;border:0}
.event .body .cite:hover{color:var(--gold)}

.popover{margin-top:12px;background:#08151f;border:1px solid var(--teal);border-radius:var(--r-md);padding:12px 14px;font-size:13px;line-height:1.7}
.popover .pv-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.popover .pv-h .t{color:var(--teal-br);font-weight:500}
.popover .src{color:#dbe4ec}
.popover .tier{display:inline-block;margin-top:6px;font-size:11px;color:var(--muted);border:1px solid var(--line2);border-radius:var(--r-pill);padding:2px 9px}
.popover .close{background:none;border:0;color:var(--muted);font-size:15px}

.srcbox{margin-top:18px}
.srcbox .s-item{display:flex;gap:10px;align-items:flex-start;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;margin-top:8px;font-size:13px;color:#cdd9e2;line-height:1.6}
.srcbox .s-n{color:var(--teal-br);font-weight:500;flex:0 0 auto}
.srcbox .tier{font-size:10.5px;color:var(--muted);border:1px solid var(--line2);border-radius:var(--r-pill);padding:1px 8px;margin-inline-start:auto;white-space:nowrap}

.relnav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.relbtn{flex:1;background:var(--ink2);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 14px;color:var(--cream);text-align:start;transition:.18s}
.relbtn:hover{border-color:var(--teal)}
.relbtn small{display:block;color:var(--muted);font-size:11px;margin-bottom:3px}
.relbtn span{font-size:13.5px;color:#fff}
.relbtn[disabled]{opacity:.35;cursor:default}

.comingsoon{text-align:center;color:var(--muted);background:var(--ink2);border:1px dashed var(--line2);border-radius:var(--r-lg);padding:26px 16px;font-size:14px}
.comingsoon .cs-em{color:var(--gold-soft);display:block;margin-bottom:6px;font-size:15px}

/* ---------- minispine ---------- */
.spine{position:fixed;inset-inline:0;bottom:0;z-index:20;background:rgba(15,46,71,.94);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.spine-in{max-width:var(--maxw);margin:0 auto;padding:8px 16px 10px}
.spine .ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-bottom:5px}
.spine .ends .mid{color:var(--gold)}
.spine .bands{display:flex;gap:3px}
.spine .sb{flex:1;height:22px;border:0;border-radius:4px;opacity:.5;transition:.16s;padding:0}
.spine .sb:hover{opacity:.85}
.spine .sb.on{opacity:1;outline:2px solid var(--gold);outline-offset:1px}
.spine .lab{text-align:center;margin-top:6px;font-size:11px;color:var(--teal-br)}

/* ---------- search overlay ---------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(5,12,20,.6);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:64px 16px}
.searchbox{width:100%;max-width:560px;background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden}
.searchbox .sb-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.searchbox input{flex:1;background:transparent;border:0;color:#fff;font-size:16px;font-family:inherit;outline:none}
.searchbox input::placeholder{color:var(--muted)}
.results{max-height:50vh;overflow:auto}
.results button{display:flex;width:100%;gap:10px;align-items:center;text-align:start;background:transparent;border:0;border-top:1px solid var(--line);padding:11px 16px;color:var(--cream);transition:.14s}
.results button:hover{background:var(--ink3)}
.results .r-dot{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.results .r-meta{font-size:11.5px;color:var(--muted);margin-inline-start:auto}
.results .empty{padding:20px 16px;color:var(--muted);font-size:14px;text-align:center}

.fallback-rib{display:inline-block;font-size:11px;color:var(--gold-soft);background:rgba(201,162,39,.1);border:1px solid rgba(201,162,39,.35);border-radius:6px;padding:1px 8px;margin-inline-start:8px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}
@media (max-width:560px){
  .hero h1{font-size:27px}
  .cover h2{font-size:24px}
  .spine .lab{display:none}
}

/* ---------- kids mode ---------- */
.kidsbtn.on{color:var(--gold);border-color:var(--gold);width:auto;padding:0 10px;gap:5px}
.kb-band{font-size:12px;font-weight:500}
.hero.kids h1{font-size:30px;color:var(--gold-soft)}
.hero.kids p{font-size:16px}
.eracard.kids .ec-in{padding:16px 18px}
.eracard.kids h3{font-size:19px}
.eracard.kids .ec-one{font-size:15px;line-height:1.7;-webkit-line-clamp:none;display:block}
.kids .cover h2{font-size:28px}
.kcap{font-size:16.5px;line-height:2.05;background:var(--cream);color:var(--vellum);border-radius:var(--r-lg);padding:16px 18px}
.quest-chip{display:inline-block;background:rgba(99,153,34,.16);border:1px solid rgba(99,153,34,.5);color:#C0DD97;border-radius:var(--r-pill);padding:6px 15px;font-size:13.5px;margin-bottom:12px}
.mascot{display:flex;gap:12px;align-items:flex-start;background:rgba(42,167,184,.10);border:1px solid rgba(42,167,184,.4);border-radius:var(--r-xl);padding:13px 15px;margin:16px 0}
.mascot .huma{width:42px;height:42px;border-radius:50%;background:rgba(201,162,39,.18);color:var(--gold);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mascot .huma svg{width:26px;height:26px}
.mascot .bubble{font-size:15px;color:#dbe4ec;line-height:1.6;padding-top:2px}
.mascot .m-l{font-size:12px;color:var(--teal-br);margin-bottom:3px;font-weight:500}
.evcard.kids h4{font-size:17px}
.badge.b-note{color:#f0d9a0;border:1px solid rgba(201,162,39,.6);background:rgba(201,162,39,.12)}
.note-banner{background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.4);border-radius:var(--r-md);padding:11px 15px;margin:4px 0 14px;color:var(--gold-soft);font-size:14px;line-height:1.7}
.note-banner b{color:var(--gold);margin-inline-end:7px;font-weight:500}
.kbody{font-size:17px;line-height:2.05}
.howknow{background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r-lg);padding:15px 17px;margin-top:18px}
.howknow .hk-q{color:var(--teal-br);font-weight:500;margin-bottom:7px;font-size:15px}
.howknow .hk-a{font-size:14.5px;color:#dbe4ec;line-height:1.75}
.howknow .hk-btn{margin-top:11px;background:transparent;border:1px solid var(--line2);color:var(--cream);border-radius:8px;padding:8px 13px;font-size:13px;font-family:inherit;cursor:pointer}
.howknow .hk-btn:hover{border-color:var(--teal)}
.howknow .hk-src .src{font-size:12.5px;color:#cdd9e2;line-height:1.6;border-top:1px solid var(--line);padding-top:9px;margin-top:9px}
.howknow .hk-src .tier{color:var(--muted);border:1px solid var(--line2);border-radius:var(--r-pill);padding:1px 8px;font-size:10.5px;margin-inline-start:7px;white-space:nowrap}
.kidspicker .kp-head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.kidspicker .kp-title{font-size:16px;color:#fff;font-weight:500}
.kidspicker .kp-intro{padding:12px 16px 4px;color:var(--muted);font-size:13.5px;line-height:1.6}
.kidspicker .kp-opts{display:grid;gap:8px;padding:12px 16px}
.kidopt{text-align:start;background:var(--ink);border:1px solid var(--line2);border-radius:var(--r-md);padding:13px 15px;color:var(--cream);font-family:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:.15s}
.kidopt:hover{border-color:var(--teal)}
.kidopt.on{border-color:var(--gold);background:rgba(201,162,39,.09)}
.kidopt .ko-t{font-size:15px;font-weight:500}
.kidopt .ko-d{font-size:12.5px;color:var(--muted)}
.kidspicker .kp-note{padding:11px 16px 16px;color:var(--muted);font-size:12px;line-height:1.6;border-top:1px solid var(--line)}
.comingsoon.kids{margin-top:14px}

/* ---------- gamification ---------- */
.questpanel{margin-top:20px;background:var(--ink2);border:1px solid var(--line2);border-radius:var(--r-lg);padding:16px 17px}
.qp-prog-l{font-size:13px;color:var(--muted);margin-bottom:7px}
.qp-bar{height:9px;background:rgba(255,255,255,.08);border-radius:var(--r-pill);overflow:hidden}
.qp-fill{height:100%;background:var(--teal);border-radius:var(--r-pill);transition:width .35s}
.qp-allstar{margin-top:8px;color:#C0DD97;font-size:13px}
.qp-cta{display:block;width:100%;margin-top:14px;background:rgba(201,162,39,.14);border:1px solid var(--gold);color:var(--gold-soft);border-radius:var(--r-md);padding:13px;font-size:15px;font-weight:500;font-family:inherit;cursor:pointer;transition:.15s}
.qp-cta:hover{background:rgba(201,162,39,.22)}
.qp-badge{margin-top:12px;text-align:center}
.badgechip{display:inline-block;background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.5);color:var(--gold-soft);border-radius:var(--r-pill);padding:5px 14px;font-size:13px}
.qp-note{margin-top:12px;color:var(--muted);font-size:12px;text-align:center}
.badge-shelf{margin-top:14px;font-size:13px;color:var(--muted)}
.badge-shelf .badgechip{margin-inline-start:6px}

.quizbox{padding:0}
.quiz-prog{display:flex;align-items:center;justify-content:space-between;padding:12px 16px 4px}
.qdots{display:flex;gap:6px}
.qd{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.16)}
.qd.done{background:var(--teal)}
.qd.cur{background:var(--gold)}
.qnum{font-size:12px;color:var(--muted)}
.quiz-q{padding:8px 16px 14px;font-size:17px;color:#fff;line-height:1.6}
.quiz-opts{display:grid;gap:9px;padding:0 16px}
.quizopt{text-align:start;background:var(--ink);border:1px solid var(--line2);border-radius:var(--r-md);padding:13px 15px;color:var(--cream);font-size:15px;font-family:inherit;cursor:pointer;transition:.15s}
.quizopt:hover:not([disabled]){border-color:var(--teal)}
.quizopt.correct{border-color:#639922;background:rgba(99,153,34,.16);color:#C0DD97}
.quizopt.wrong{border-color:rgba(201,162,39,.6);background:rgba(201,162,39,.10)}
.quiz-fb{padding:12px 16px 18px}
.quizfb{font-size:14px;line-height:1.7;border-radius:var(--r-md);padding:11px 14px}
.quizfb.good{background:rgba(99,153,34,.14);border:1px solid rgba(99,153,34,.45);color:#C0DD97;margin-bottom:12px}
.quizfb.hint{background:rgba(201,162,39,.10);border:1px solid rgba(201,162,39,.4);color:var(--gold-soft)}
.quizfb.hint b{color:var(--gold);margin-inline-end:5px}
.quiz-next{background:var(--teal);border:0;color:#04201f;border-radius:var(--r-md);padding:12px 18px;font-size:15px;font-weight:500;font-family:inherit;cursor:pointer}
.quiz-restart{background:transparent;border:1px solid var(--line2);color:var(--cream);border-radius:var(--r-md);padding:11px 16px;font-size:14px;font-family:inherit;cursor:pointer}
.quizdone{padding:28px 20px;text-align:center}
.qd-star{font-size:46px;color:var(--gold);line-height:1}
.qd-title{font-size:20px;color:#fff;font-weight:500;margin-top:10px}
.qd-badgewrap{margin-top:16px}
.qd-badge-l{font-size:13px;color:var(--muted);margin-bottom:8px}
.qd-actions{display:flex;gap:10px;justify-content:center;margin-top:22px}