@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(../fonts/Vazirmatn-Black.woff2) format("woff2");font-weight:900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px}
body{font-family:Vazirmatn,Tahoma,sans-serif;background:var(--bg);color:var(--ink);line-height:1.9;font-size:16px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,select{font-family:inherit}
.wrap{width:min(1240px,92%);margin-inline:auto}
.muted{color:var(--muted)}
.tiny{font-size:.74rem;color:var(--muted);margin-top:auto;padding-top:.8rem}
.topbar{position:sticky;top:0;z-index:50;transition:.3s}
.topbar-in{display:flex;align-items:center;justify-content:space-between;height:72px;gap:1rem}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:800}
.nav{display:flex;gap:.2rem}
.nav a{padding:.45rem .85rem;font-size:.92rem;font-weight:500;transition:.2s}
.menu-btn{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;flex-direction:column;justify-content:center;gap:5px;align-items:center}
.menu-btn span{width:22px;height:2px;background:var(--ink);border-radius:2px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.6rem;font-weight:700;font-size:.95rem;transition:.25s;border:1.5px solid transparent;cursor:pointer}
.section{padding:5.5rem 0;position:relative}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:2.2rem}
.sec-head.center{justify-content:center;text-align:center}
.title{font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:900;line-height:1.4}
.title span{display:block;font-size:.82rem;font-weight:700;margin-bottom:.25rem}
.card{display:flex;flex-direction:column;padding:1.5rem}
.card-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.card-h h3{font-size:1.08rem}
.card-h small{font-weight:700;margin-right:.3rem}
.live{font-size:.72rem;color:#16a34a;display:flex;align-items:center;gap:.35rem;font-weight:700}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:#16a34a;animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}100%{box-shadow:0 0 0 10px rgba(22,163,74,0)}}
/* about */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;align-items:center}
.about-photos{position:relative;height:520px}
.about-photos img{position:absolute;object-fit:cover}
.about-photos .ph1{width:78%;height:72%;top:0;right:0;object-position:60% 30%}
.about-photos .ph2{width:62%;height:50%;bottom:0;left:0;object-position:50% 30%}
.about-text p{margin:1rem 0;text-align:justify}
.facts{list-style:none;margin:1.5rem 0;display:grid;gap:.6rem}
.facts li{display:grid;grid-template-columns:120px 1fr;gap:1rem;padding:.7rem 1rem}
.facts b{font-size:.9rem}
.facts span{font-size:.93rem}
.src-note{font-size:.78rem!important;color:var(--muted)!important}
/* today */
.city-select{display:flex;align-items:center;gap:.4rem;padding:.35rem .9rem}
.city-select svg{width:18px}
.city-select select{border:0;background:none;font-size:.95rem;font-weight:700;outline:0;cursor:pointer;padding:.2rem;color:inherit}
.today-grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:1.4rem}
.clock-card{align-items:center;text-align:center}
.analog{width:170px;height:170px}
.analog line{transform-origin:100px 100px}
.analog .h{stroke-width:6;stroke-linecap:round}.analog .m{stroke-width:4;stroke-linecap:round}.analog .s{stroke-width:2;stroke-linecap:round}
.analog .tick{stroke-width:2}.analog .tick.big{stroke-width:4}
.digital{font-size:2.1rem;font-weight:900;letter-spacing:.06em;margin:.5rem 0}
.dates{width:100%;display:grid;gap:.45rem}
.dates div{display:flex;justify-content:space-between;align-items:center;padding:.5rem .8rem}
.dates span{font-size:.8rem;color:var(--muted)}
.dates b{font-size:.95rem}
.w-now{display:flex;align-items:center;gap:1.2rem}
.w-icon{width:84px;height:84px}.w-icon svg{width:100%;height:100%}
.w-temp{font-size:3rem;font-weight:900;line-height:1}
.w-desc{color:var(--muted);font-weight:500}
.w-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1.1rem 0}
.w-meta div{padding:.45rem;text-align:center;font-size:.78rem;color:var(--muted)}
.w-meta b{display:block;font-size:.95rem}
.w-days{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}
.w-days div{text-align:center;padding:.4rem .2rem;font-size:.75rem;color:var(--muted)}
.w-days svg{width:30px;height:30px;margin:.1rem auto}
.w-days b{font-size:.82rem}
.next-prayer{padding:.9rem 1rem;margin-bottom:1rem;text-align:center;font-size:.9rem}
.next-prayer b{font-size:1.4rem;display:block;font-weight:900;letter-spacing:.04em}
.p-list{list-style:none;display:grid;gap:.35rem}
.p-list li{display:flex;justify-content:space-between;padding:.48rem .8rem;font-size:.93rem;border:1px solid transparent}
.p-list li b{font-weight:700}
.p-list li.past{opacity:.5}
/* news */
.upd{font-size:.82rem;color:var(--muted)}
.chips{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:1.6rem}
.chip{padding:.35rem .95rem;font-size:.82rem;cursor:pointer;transition:.2s;font-weight:500}
.chips.small{margin:0}
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.news-grid .n-card:first-child{grid-column:span 2;grid-row:span 2}
.news-grid .n-card:first-child h3{font-size:1.3rem}
.n-card{overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.n-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.n-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;position:relative;z-index:1}
.n-card:hover .n-img img{transform:scale(1.05)}
.n-img .ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:1.3rem}
.n-src{position:absolute;top:.6rem;right:.6rem;font-size:.72rem;font-weight:700;padding:.15rem .6rem;z-index:2}
.n-body{padding:.9rem 1rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.n-body h3{font-size:.96rem;line-height:1.75;font-weight:700;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.n-body p{font-size:.82rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.n-time{margin-top:auto;font-size:.74rem;font-weight:500}
.news-grid .n-card:first-child .n-img{aspect-ratio:auto;flex:1;min-height:300px}
.news-grid .n-card:first-child .n-img img{position:absolute;inset:0}
.news-grid .n-card:first-child .n-body{flex:0 0 auto}
.news-grid .n-card:first-child .n-body p{-webkit-line-clamp:3}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:2rem}
.more-btn{display:block;margin:1.8rem auto 0}
/* religion */
.rel-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:1.4rem}
.hadith{text-align:center;justify-content:center;padding:2.8rem 2rem;position:relative}
.orn{font-size:1.8rem;line-height:1}
.h-ar{font-size:clamp(1.3rem,2.4vw,1.8rem);font-weight:700;line-height:2.1;margin:1rem 0 .6rem;font-family:"Amiri","Traditional Arabic",Vazirmatn,serif}
.h-fa{font-size:1.05rem}
.h-src{margin-top:1.2rem;font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:.1rem}
.rel-side{display:grid;gap:1.4rem}
.mini .lbl{font-size:.75rem;font-weight:700}
.mini p{font-weight:700;margin-bottom:.6rem}
.mini p:last-child{margin-bottom:0}
.zekr{font-size:1.15rem}
/* media */
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.m-card{overflow:hidden;display:flex;flex-direction:column;transition:.3s}
.m-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;cursor:pointer}
.m-thumb img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
.m-thumb .ph{position:absolute;inset:0;display:grid;place-items:center;font-weight:700;text-align:center;padding:1rem}
.m-play{position:absolute;inset:0;display:grid;place-items:center;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 60%)}
.m-play i{width:62px;height:62px;border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:.3s}
.m-play i::after{content:"";border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--acc);margin-left:4px}
.m-card:hover .m-play i{transform:scale(1.1)}
.m-type{position:absolute;top:.7rem;right:.7rem;font-size:.72rem;font-weight:700;padding:.15rem .65rem;z-index:2}
.m-body{padding:1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.m-meta{font-size:.76rem;font-weight:700}
.m-body h3{font-size:1rem;line-height:1.75}
.m-body p{font-size:.85rem;color:var(--muted)}
.m-link{margin-top:auto;font-size:.85rem;font-weight:700;display:inline-flex;gap:.3rem;align-items:center}
/* modal */
.modal{position:fixed;inset:0;background:rgba(15,23,42,.7);z-index:100;display:grid;place-items:center;padding:1rem;backdrop-filter:blur(4px)}
.modal[hidden]{display:none}
.modal-box{width:min(960px,100%);background:#fff;border-radius:18px;padding:1rem;position:relative}
.modal-box p{margin-top:.6rem;font-weight:700}
.modal-x{position:absolute;top:-14px;left:-14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--acc);color:#fff;font-size:1.4rem;cursor:pointer}
.ratio{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* footer */
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem}
.contact{list-style:none;display:grid;gap:.4rem;font-size:.9rem}
.contact li{display:flex;gap:.8rem}
.contact li>span:first-child{min-width:50px;color:var(--muted)}
.socials{display:flex;gap:.5rem;flex-wrap:wrap}
.socials a{padding:.35rem .9rem;font-size:.85rem;transition:.2s}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;padding-top:1.2rem;font-size:.8rem}
.footer h4{margin-bottom:.8rem}
/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}*{animation:none!important;transition:none!important}}
/* responsive */
@media (max-width:1080px){
  .today-grid{grid-template-columns:1fr 1fr}
  .clock-card{grid-column:span 2;display:grid;grid-template-columns:auto 1fr;gap:1rem 2rem;text-align:right}
  .clock-card .analog{grid-row:span 2}
  .news-grid{grid-template-columns:repeat(3,1fr)}
  .media-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .nav{position:fixed;top:72px;right:0;left:0;flex-direction:column;background:var(--bg);padding:1rem 4%;border-bottom:1px solid var(--line);transform:translateY(-140%);transition:.35s}
  .nav.open{transform:none}
  .menu-btn{display:flex}
  .about,.rel-grid{grid-template-columns:1fr}
  .about-photos{height:400px}
  .news-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:600px){
  body{font-size:15px}
  .section{padding:3.5rem 0}
  .today-grid{grid-template-columns:1fr}
  .clock-card{grid-column:auto;display:flex;text-align:center}
  .news-grid,.media-grid{grid-template-columns:1fr}
  .news-grid .n-card:first-child{grid-column:auto;grid-row:auto}
  .news-grid .n-card:first-child .n-img{min-height:200px}
  .facts li{grid-template-columns:1fr;gap:0}
}

/* ===== theme: heritage ===== */
:root{--bg:#FBF6EC;--bg2:#F5ECDC;--card:#FFFDF8;--ink:#2B1B18;--maroon:#7B1E2B;--maroon2:#9A2C3A;--gold:#B08A4F;--gold2:#D4B47A;--muted:#7A6A5F;--acc:#7B1E2B;--accsoft:#F3E3D3;--line:#E7D8BF;--sh:0 14px 34px -20px rgba(123,30,43,.35);
--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23B08A4F' stroke-width='1'%3E%3Cpath d='M36 10L44 28L62 36L44 44L36 62L28 44L10 36L28 28Z' fill='%237B1E2B' fill-opacity='.10'/%3E%3Cpath d='M17.6 17.6L36 24.6L54.4 17.6L47.4 36L54.4 54.4L36 47.4L17.6 54.4L24.6 36Z'/%3E%3Ccircle cx='36' cy='36' r='4' fill='%23B08A4F' fill-opacity='.5'/%3E%3Cpath d='M0 0L10 10M72 0L62 10M0 72L10 62M72 72L62 62'/%3E%3Ccircle cx='0' cy='0' r='6'/%3E%3Ccircle cx='72' cy='0' r='6'/%3E%3Ccircle cx='0' cy='72' r='6'/%3E%3Ccircle cx='72' cy='72' r='6'/%3E%3C/g%3E%3C/svg%3E");
--frieze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14' viewBox='0 0 36 14'%3E%3Crect width='36' height='14' fill='%237B1E2B'/%3E%3Cpath d='M0 7L9 1L18 7L9 13Z' fill='%23D4B47A'/%3E%3Cpath d='M18 7L27 1L36 7L27 13Z' fill='%23F5ECDC'/%3E%3Ccircle cx='9' cy='7' r='2' fill='%237B1E2B'/%3E%3Ccircle cx='27' cy='7' r='2' fill='%23B08A4F'/%3E%3C/svg%3E")}
body{background:var(--bg)}
.frieze{height:8px;background-image:var(--frieze);background-size:auto 8px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.frieze.big{height:14px;background-size:auto 14px}
.topbar{background:rgba(251,246,236,.95);backdrop-filter:blur(10px)}
.topbar.scrolled{box-shadow:0 10px 26px -18px rgba(123,30,43,.45)}
.topbar-in{height:76px}
.brand{color:var(--maroon)}
.brand-mark{width:46px;height:46px;display:grid;place-items:center;color:var(--gold2);background:var(--maroon);font-weight:900;font-size:.82rem;clip-path:polygon(50% 0,64% 14%,85% 15%,86% 36%,100% 50%,86% 64%,85% 85%,64% 86%,50% 100%,36% 86%,15% 85%,14% 64%,0 50%,14% 36%,15% 15%,36% 14%)}
.brand-t{display:flex;flex-direction:column;line-height:1.3;font-weight:900;font-size:1.08rem}
.brand-t small{font-size:.7rem;color:var(--gold);font-weight:600}
.nav a{color:var(--ink);position:relative}
.nav a::before{content:"◆";position:absolute;bottom:-.35rem;left:50%;transform:translateX(-50%) scale(0);font-size:.5rem;color:var(--gold);transition:.25s}
.nav a:hover{color:var(--maroon)}.nav a:hover::before{transform:translateX(-50%) scale(1)}
.btn{border-radius:4px}
.btn-maroon{background:var(--maroon);color:#FBF6EC;box-shadow:0 12px 24px -14px rgba(123,30,43,.9);border-color:var(--maroon)}
.btn-maroon:hover{background:var(--maroon2)}
.btn-goldline{border-color:var(--gold)!important;color:var(--maroon);background:transparent}
.btn-goldline:hover{background:var(--gold);color:#fff}
.nav-cta{padding:.55rem 1.3rem}
/* hero */
.hero{position:relative;padding:3rem 0 3.6rem;overflow:hidden;background:radial-gradient(800px 500px at 25% 50%,rgba(212,180,122,.22),transparent 65%),linear-gradient(180deg,#FDF9F1,var(--bg))}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
.orn-line{display:flex;align-items:center;gap:.7rem;color:var(--gold);width:220px}
.orn-line i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.orn-line i:last-child{background:linear-gradient(90deg,var(--gold),transparent)}
.pre{color:var(--gold);font-weight:700;font-size:.9rem;margin-top:.5rem}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);font-weight:900;color:var(--maroon);line-height:1.25;margin:.4rem 0 1rem}
.hero h1 small{display:block;font-size:.38em;color:var(--gold);font-weight:700}
.hero-role{font-size:1.2rem;color:var(--ink);font-weight:500;line-height:1.9}
.hero-role small{color:var(--muted);font-size:.82em;font-weight:400}
.hero-quote{position:relative;margin:2rem 0 1.6rem;padding:1.3rem 1.6rem 1.1rem;max-width:560px;font-size:1.08rem;color:var(--ink);background:var(--card);border:1px solid var(--line);outline:1px solid var(--line);outline-offset:4px;border-radius:2px}
.hero-quote::before,.hero-quote::after{position:absolute;font-size:3rem;color:var(--gold2);line-height:1;font-weight:900}
.hero-quote::before{content:"«";top:-1.75rem;right:1rem;font-size:2.6rem;background:var(--bg);padding:0 .4rem}
.hero-quote cite{display:block;font-style:normal;font-size:.8rem;color:var(--gold);margin-top:.3rem}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-mini{display:flex;margin-top:2rem;width:fit-content;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.hero-mini>div{padding:.6rem 1.4rem;display:flex;flex-direction:column;position:relative}
.hero-mini>div+div::before{content:"◆";position:absolute;right:-.3rem;top:50%;transform:translateY(-50%);color:var(--gold);font-size:.55rem}
.hero-mini .k{font-size:.74rem;color:var(--muted)}
.hero-mini .v{font-weight:800;color:var(--maroon);white-space:nowrap}
.hero-photo{position:relative;justify-self:center;width:min(390px,100%);padding:26px}
.tile-arch{position:absolute;inset:0;border-radius:220px 220px 10px 10px;background:var(--bg2);background-image:var(--tile);background-size:54px;border:1px solid var(--gold)}
.arch{position:relative;z-index:2;aspect-ratio:9/13.5;border-radius:180px 180px 6px 6px;overflow:hidden;border:5px solid var(--card);box-shadow:0 0 0 1.5px var(--gold),0 30px 60px -30px rgba(123,30,43,.7)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:center 10%}
.arch-line{position:absolute;inset:12px;z-index:1;border-radius:205px 205px 8px 8px;border:1px dashed rgba(176,138,79,.7)}
.medal{position:absolute;z-index:3;bottom:2.6rem;right:-2.2rem;background:var(--maroon);color:#FBF6EC;padding:.7rem 1.1rem;display:flex;gap:.7rem;align-items:center;box-shadow:var(--sh);border:1px solid var(--gold2);outline:1px solid var(--maroon);outline-offset:3px}
.medal b{color:var(--gold2);font-size:1.35rem;font-weight:900}
.medal span{font-size:.76rem;max-width:100px;line-height:1.5}
/* sections */
.section{padding:4.8rem 0}
.section.alt{background:var(--bg2)}
.section.alt::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.18;pointer-events:none}
.section>.wrap{position:relative}
.sec-head{align-items:center}
.title{color:var(--maroon)}
.title span{color:var(--gold);display:flex;align-items:center;gap:.5rem;font-size:.82rem}
.title span::before{content:"❖";font-size:.8rem}
.title span::after{content:"";width:50px;height:1px;background:var(--gold)}
.sec-head.center{flex-direction:column}
.sec-head.center .title span{justify-content:center}
.sec-head.center .title span::after{display:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:var(--sh);position:relative}
.card-h{border-bottom:1px dashed var(--line);padding-bottom:.6rem}
.card-h h3{color:var(--maroon)}.card-h small{color:var(--gold)}
/* about */
.about-photos img{border-radius:120px 120px 6px 6px;border:5px solid var(--card);box-shadow:0 0 0 1px var(--gold),var(--sh)}
.about-photos .ph2{border-radius:6px}
.about-photos::before{content:"";position:absolute;width:55%;height:60%;left:6%;top:8%;background-image:var(--tile);background-size:48px;opacity:.6;border:1px solid var(--gold);z-index:-1}
.about-text p{color:#4A3A34}
.facts li{background:var(--card);border:1px solid var(--line);border-right:3px solid var(--gold);border-radius:4px}
.facts b{color:var(--maroon)}.facts span{color:var(--ink)}
/* today */
.city-select{background:var(--card);border:1px solid var(--gold);border-radius:4px;color:var(--maroon)}
.city-select svg{fill:var(--gold)}
.analog .face{fill:var(--card);stroke:var(--gold);stroke-width:4}
.analog .tick{stroke:#C9B48E}.analog .tick.big{stroke:var(--maroon)}
.analog .h{stroke:var(--maroon)}.analog .m{stroke:var(--ink)}.analog .s{stroke:var(--gold)}.analog .pin{fill:var(--gold)}
.digital,.dates b,.w-temp,.w-meta b,.w-days b,.p-list li b{color:var(--maroon)}
.dates div,.w-meta div{background:var(--bg2);border-radius:4px}
.w-days div{border:1px solid var(--line);border-radius:4px}
.next-prayer{background:var(--maroon);background-image:linear-gradient(rgba(123,30,43,.85),rgba(123,30,43,.85)),var(--tile);background-size:auto,40px;color:#FBF6EC;border-radius:4px;border:1px solid var(--gold2)}
.next-prayer b{color:var(--gold2)}
.p-list li{border-radius:4px}.p-list li:nth-child(odd){background:var(--bg2)}
.p-list li.next{background:#F7E7D6;border-color:var(--gold)}
/* news */
.chip{background:var(--card);border:1px solid var(--line);color:var(--maroon);border-radius:4px}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--maroon);color:#FBF6EC;border-color:var(--maroon)}
.n-card{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 20px -16px rgba(123,30,43,.4)}
.n-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--gold2)}
.n-img{background:var(--bg2);background-image:var(--tile);background-size:40px}
.n-img .ph{color:var(--gold)}
.n-src{background:var(--card);color:var(--maroon);border:1px solid var(--gold2);border-radius:3px}
.n-body h3{color:var(--ink)}.n-card:hover h3{color:var(--maroon)}
.n-time{color:var(--gold)}
.btn.btn-ghost{border-color:var(--gold);color:var(--maroon)}
/* religion */
.religion{background:radial-gradient(600px 320px at 50% 0,rgba(212,180,122,.25),transparent 70%),var(--bg)}
.hadith{background:var(--card);padding:3.4rem 2.6rem 3rem;border:0;box-shadow:inset 0 0 0 10px var(--card),inset 0 0 0 11px var(--gold),var(--sh)}
.hadith::before{content:"";position:absolute;top:0;right:0;left:0;height:10px;background-image:var(--frieze);background-size:auto 10px;border-radius:6px 6px 0 0}
.orn{color:var(--gold);font-size:2.2rem}
.h-ar{color:var(--maroon)}.h-fa{color:#4A3A34}.h-src b{color:var(--gold)}
.mini .lbl{color:var(--gold)}.mini p{color:var(--maroon)}
/* media */
.m-card{background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 20px -16px rgba(123,30,43,.4)}
.m-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.m-thumb{background:var(--maroon);background-image:var(--tile);background-size:44px}
.m-thumb .ph{color:var(--gold2)}
.m-type{background:var(--maroon);color:var(--gold2);border:1px solid var(--gold2);border-radius:3px}
.m-meta{color:var(--gold)}.m-body h3{color:var(--maroon)}
.m-link{color:var(--maroon)}.m-link:hover{color:var(--gold)}
/* footer */
.footer{background:var(--bg2);padding:3.2rem 0 1.4rem;position:relative;border-top:14px solid transparent;border-image:var(--frieze) 14 0 0 0 / 14px 0 0 0 round}
.footer::before{content:"";position:absolute;inset:0;background-image:var(--tile);background-size:72px;opacity:.14;pointer-events:none}
.footer>.wrap{position:relative}
.footer .brand{color:var(--maroon)}
.footer .brand-mark{width:46px;height:46px;display:grid;place-items:center;color:var(--gold2);background:var(--maroon);font-weight:900;font-size:.82rem;clip-path:polygon(50% 0,64% 14%,85% 15%,86% 36%,100% 50%,86% 64%,85% 85%,64% 86%,50% 100%,36% 86%,15% 85%,14% 64%,0 50%,14% 36%,15% 15%,36% 14%)}
.footer h4{color:var(--maroon)}
.socials a{background:var(--card);border:1px solid var(--gold);border-radius:4px;color:var(--maroon)}
.socials a:hover{background:var(--maroon);color:#FBF6EC}
.foot-bottom{border-top:1px solid var(--line);color:var(--muted)}
@media (max-width:1080px){.nav-cta{display:none}}
@media (max-width:860px){.hero-in{grid-template-columns:1fr}.hero-photo{order:-1;width:min(320px,82%)}.medal{right:-1rem}.nav{top:76px}}

/* =====================================================================
   HERITAGE 2 — energetic layer (richer accents, dramatic hero, motion)
   ===================================================================== */
:root{--maroon:#8F1830;--maroon2:#B4223D;--crimson:#C8283F;--gold:#B8862E;--gold2:#E5B95C;--gold3:#F6DE9C;--turq:#13808A;--turq2:#2BA7AE;--ink:#25140F;--bg:#FCF7EE;--bg2:#F6EAD6;--card:#FFFDF9;--line:#EAD7B6;
--sh:0 18px 40px -22px rgba(143,24,48,.45);--sh2:0 26px 50px -24px rgba(143,24,48,.55);
--goldgrad:linear-gradient(110deg,#A8761F 0%,#E5B95C 22%,#FFF1C4 34%,#E5B95C 46%,#A8761F 70%,#E5B95C 100%);
--tile2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke-width='1.1'%3E%3Cpath d='M40 6L50 30L74 40L50 50L40 74L30 50L6 40L30 30Z' stroke='%23B8862E' fill='%2313808A' fill-opacity='.08'/%3E%3Cpath d='M20 20L40 28L60 20L52 40L60 60L40 52L20 60L28 40Z' stroke='%238F1830' stroke-opacity='.45'/%3E%3Ccircle cx='40' cy='40' r='4.5' fill='%23B8862E' fill-opacity='.55'/%3E%3C/g%3E%3C/svg%3E")}
html{scroll-padding-top:130px}
body{background:var(--bg)}
::selection{background:var(--gold2);color:var(--ink)}
/* topbar + ticker */
.topbar{background:rgba(252,247,238,.92);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)}
.topbar-in{height:70px}
.brand-mark{background:linear-gradient(135deg,var(--maroon),var(--crimson));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.brand:hover .brand-mark{transform:rotate(45deg)}
.nav a::after{content:"";position:absolute;right:.85rem;left:.85rem;bottom:.15rem;height:2px;background:var(--goldgrad);transform:scaleX(0);transition:transform .3s}
.nav a:hover::after{transform:scaleX(1)}
.ticker{display:flex;align-items:stretch;height:40px;background:linear-gradient(90deg,#6E1124,var(--maroon) 30%,#7A1428);color:#FCF2DF;border-top:2px solid var(--gold2);border-bottom:2px solid var(--gold);overflow:hidden;font-size:.88rem}
.ticker-lbl{flex:none;display:flex;align-items:center;gap:.5rem;padding:0 1.1rem 0 1.4rem;background:var(--goldgrad);background-size:220% 100%;animation:shimmer 5s linear infinite;color:#4A0E1A;font-weight:900;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,12px 50%);position:relative;z-index:2}
.ticker-lbl i{width:8px;height:8px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 0 rgba(200,40,63,.6);animation:pulseR 1.4s infinite}
@keyframes pulseR{to{box-shadow:0 0 0 9px rgba(200,40,63,0)}}
.ticker-view{flex:1;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ticker-track{display:flex;width:max-content;height:100%;align-items:center}
.ticker-track.on{animation:tick var(--dur,90s) linear infinite}
.ticker-view:hover .ticker-track{animation-play-state:paused}
.t-run{display:flex;align-items:center}
.t-item{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;padding:0 1.4rem;position:relative;transition:color .2s}
.t-item::after{content:"✦";position:absolute;left:-.35rem;color:var(--gold2);font-size:.7rem}
.t-item b{font-size:.72rem;font-weight:800;color:#4A0E1A;background:var(--gold2);padding:.05rem .5rem;border-radius:3px}
.t-item:hover{color:var(--gold3)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}
@keyframes shimmer{from{background-position:220% 0}to{background-position:0 0}}
/* hero */
.hero{padding:3.6rem 0 4.4rem;background:linear-gradient(180deg,#FFFBF3,var(--bg) 70%);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;background-image:var(--tile2);background-size:80px;opacity:.5;-webkit-mask-image:radial-gradient(700px 520px at 28% 50%,#000 10%,transparent 75%);mask-image:radial-gradient(700px 520px at 28% 50%,#000 10%,transparent 75%)}
.glow{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:float 12s ease-in-out infinite alternate}
.glow.g1{width:520px;height:520px;left:6%;top:8%;background:radial-gradient(circle,rgba(229,185,92,.75),transparent 65%)}
.glow.g2{width:380px;height:380px;left:26%;top:44%;background:radial-gradient(circle,rgba(200,40,63,.32),transparent 65%);animation-delay:-6s}
@keyframes float{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.12)}}
.hero-in{grid-template-columns:1.05fr .95fr;gap:3.5rem}
.pre{color:var(--turq);font-weight:800}
.hero h1{font-size:clamp(2.8rem,6.4vw,5.4rem);line-height:1.18;margin:.3rem 0 1.1rem;color:var(--maroon)}
.hero h1 small{font-size:.34em;color:var(--gold)}
.hero h1 .shine{display:inline-block;padding-bottom:.12em;background:linear-gradient(100deg,var(--maroon) 0%,var(--crimson) 35%,#E0A13B 48%,var(--crimson) 60%,var(--maroon) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s ease-in-out infinite;filter:drop-shadow(0 6px 14px rgba(143,24,48,.18))}
.hero h1 .shine::after{content:"";display:block;height:5px;width:46%;margin-top:.12em;border-radius:3px;background:var(--goldgrad);background-size:220% 100%;animation:shimmer 4s linear infinite}
.hero-role{font-size:1.25rem}
.hero-quote{border:0;outline:0;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(120deg,var(--gold2),var(--maroon2),var(--gold2)) border-box;border:1.5px solid transparent;border-radius:14px 14px 14px 2px;box-shadow:var(--sh);border-right:5px solid var(--maroon)}
.hero-quote::before{background:none;color:var(--crimson);top:-1.9rem}
.btn{border-radius:999px;position:relative;overflow:hidden}
.btn-maroon{background:linear-gradient(135deg,var(--maroon),var(--crimson));border:0;color:#FFF7E8;box-shadow:0 14px 28px -12px rgba(180,34,61,.75)}
.btn-maroon::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,241,196,.55) 50%,transparent 70%);transform:translateX(120%);transition:transform .7s}
.btn-maroon:hover{transform:translateY(-2px);box-shadow:0 18px 32px -12px rgba(180,34,61,.85)}
.btn-maroon:hover::before{transform:translateX(-120%)}
.btn-goldline{border-width:1.5px}
.btn-goldline:hover{background:var(--goldgrad);background-size:200% 100%;color:#4A0E1A;transform:translateY(-2px)}
.hero-mini{border:0;gap:.7rem;width:auto;flex-wrap:wrap}
.hero-mini>div{background:rgba(255,253,249,.85);border:1px solid var(--line);border-top:3px solid var(--gold2);border-radius:12px;padding:.55rem 1.2rem;box-shadow:0 10px 22px -18px rgba(143,24,48,.5);transition:.3s}
.hero-mini>div:hover{transform:translateY(-3px);border-top-color:var(--crimson)}
.hero-mini>div+div::before{display:none}
.hero-mini .v{font-size:1.08rem}
/* photo composition */
.hero-photo{width:min(470px,100%);padding:34px;justify-self:center}
.star-spin{position:absolute;width:150%;left:-25%;top:50%;margin-top:-75%;aspect-ratio:1;color:var(--gold);opacity:.55;animation:spin 60s linear infinite;z-index:0;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.arch-back{position:absolute;inset:8px -22px 46px 46px;border-radius:240px 240px 14px 14px;background:linear-gradient(160deg,var(--maroon2),#5E0F20);box-shadow:var(--sh2);z-index:0}
.arch-back::after{content:"";position:absolute;inset:10px;border-radius:inherit;border:1px solid rgba(229,185,92,.55);background-image:var(--tile2);background-size:48px;opacity:.5}
.tile-arch{inset:0;border-radius:250px 250px 14px 14px;background-color:#FFF8EA;background-image:var(--tile2);background-size:52px;border:1.5px solid var(--gold);z-index:1;box-shadow:0 30px 60px -36px rgba(143,24,48,.6)}
.arch-frame{position:relative;z-index:2;padding:5px;border-radius:210px 210px 10px 10px;background:var(--goldgrad);background-size:240% 100%;animation:shimmer 6s linear infinite;box-shadow:0 34px 70px -30px rgba(143,24,48,.75),0 0 0 6px rgba(255,253,249,.9)}
.arch{border:0;box-shadow:none;border-radius:205px 205px 7px 7px;aspect-ratio:9/13}
.arch img{transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hero-photo:hover .arch img{transform:scale(1.04)}
.arch-line{display:none}
.medal{z-index:4;right:-1.6rem;bottom:3rem;background:linear-gradient(135deg,var(--maroon),var(--crimson));border-radius:12px;outline:0;border:1.5px solid var(--gold2);animation:bob 5s ease-in-out infinite}
.medal b{font-size:1.6rem;background:var(--goldgrad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite}
.badge-float{position:absolute;z-index:4;left:-1.4rem;top:5.5rem;display:flex;align-items:center;gap:.45rem;background:rgba(255,253,249,.95);backdrop-filter:blur(6px);border:1px solid var(--line);border-right:4px solid var(--turq);border-radius:12px;padding:.55rem .9rem;font-size:.8rem;font-weight:800;color:var(--ink);box-shadow:var(--sh);animation:bob 6s ease-in-out infinite -2.5s}
@keyframes bob{50%{transform:translateY(-8px)}}
/* load-in animation for hero */
.rise{opacity:0;transform:translateY(26px);animation:rise .9s cubic-bezier(.2,.8,.2,1) forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.3s}.d4{animation-delay:.42s}.d5{animation-delay:.54s}.d6{animation-delay:.66s}
@keyframes rise{to{opacity:1;transform:none}}
/* frieze richer */
.frieze.big{height:16px;background-size:auto 16px;border-color:var(--gold2)}
/* scroll reveal: richer + stagger */
.reveal{opacity:0;transform:translateY(34px) scale(.98);transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms),transform .8s cubic-bezier(.2,.8,.2,1) var(--d,0ms),box-shadow .35s,border-color .35s}
.reveal.in{opacity:1;transform:none}
.sec-head.reveal{transform:translateX(30px)}
.sec-head.reveal.in{transform:none}
/* section headers */
.section{padding:5.4rem 0}
.title{font-size:clamp(1.7rem,3.2vw,2.6rem);color:var(--ink);position:relative;padding-bottom:.9rem}
.title span{display:inline-flex;color:#FFF7E8;background:linear-gradient(135deg,var(--maroon),var(--crimson));padding:.15rem .9rem .15rem .75rem;border-radius:999px;font-size:.78rem;margin-bottom:.55rem;box-shadow:0 8px 18px -10px rgba(180,34,61,.8)}
.title span::before{content:"✦";color:var(--gold2)}
.title span::after{display:none}
.title::after{content:"";position:absolute;bottom:0;right:0;width:140px;height:10px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent) center/100% 2px no-repeat,radial-gradient(circle,var(--crimson) 0 3.5px,transparent 4px) center/10px 10px no-repeat;transform-origin:right;transform:scaleX(0);transition:transform 1s .25s cubic-bezier(.2,.8,.2,1)}
.reveal.in .title::after,.about-text.in .title::after{transform:scaleX(1)}
.sec-head.center .title::after{right:50%;margin-right:-70px;transform-origin:center}
.section.alt{background:linear-gradient(180deg,var(--bg2),#F9EFDE)}
.section.alt::before{background-image:var(--tile2);background-size:80px;opacity:.22}
/* cards: hover energy */
.card{border-radius:16px;border:1px solid var(--line);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s}
.card::after{content:"";position:absolute;top:0;right:1.5rem;left:1.5rem;height:3px;border-radius:0 0 3px 3px;background:var(--goldgrad);background-size:220% 100%;opacity:.0;transition:opacity .35s}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh2);border-color:var(--gold2)}
.card:hover::after{opacity:1;animation:shimmer 3s linear infinite}
.card-h h3{color:var(--maroon)}
.facts li{border-radius:12px;border-right:4px solid var(--gold);transition:transform .3s,border-color .3s,box-shadow .3s}
.facts li:hover{transform:translateX(-6px);border-right-color:var(--crimson);box-shadow:var(--sh)}
.about-photos img{transition:transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .6s}
.about-photos img:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 0 0 1px var(--gold),var(--sh2)}
.about-photos::before{background-image:var(--tile2);border-color:var(--gold2);border-radius:16px}
.next-prayer{background:linear-gradient(135deg,rgba(143,24,48,.92),rgba(200,40,63,.88)),var(--tile2);background-size:auto,44px;border-radius:12px}
.p-list li.next{background:linear-gradient(90deg,#FBE6CF,#FFF6E6);border-color:var(--gold2);box-shadow:inset -4px 0 0 var(--crimson)}
.analog .face{stroke:var(--gold2)}
.analog .s{stroke:var(--crimson)}
.digital{background:linear-gradient(100deg,var(--maroon),var(--crimson));-webkit-background-clip:text;background-clip:text;color:transparent}
.dates div,.w-meta div{border-radius:10px}
.w-days div{border-radius:10px;transition:.25s}.w-days div:hover{border-color:var(--gold2);transform:translateY(-3px)}
/* news cards */
.chip{border-radius:999px;transition:.25s}
.chip:hover{border-color:var(--gold);transform:translateY(-2px)}
.chip.on{background:linear-gradient(135deg,var(--maroon),var(--crimson));border-color:transparent;box-shadow:0 8px 18px -10px rgba(180,34,61,.8)}
.n-card,.m-card{border-radius:16px;overflow:hidden;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .3s,opacity .8s var(--d,0ms)}
.n-card:hover,.m-card:hover{transform:translateY(-8px);box-shadow:var(--sh2);border-color:var(--gold2)}
.n-img,.m-thumb{overflow:hidden}
.n-img img,.m-thumb img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.n-card:hover .n-img img,.m-card:hover .m-thumb img{transform:scale(1.08)}
.n-img::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(94,15,32,.45),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
.n-card:hover .n-img::after{opacity:1}
.n-src{border-radius:999px;background:rgba(255,253,249,.95);border-color:var(--gold2);font-weight:800;z-index:2}
.n-body h3{transition:color .25s}
.n-time{color:var(--turq);font-weight:700}
.m-type{border-radius:999px}
.m-thumb{background:linear-gradient(135deg,var(--maroon),#5E0F20);background-image:linear-gradient(135deg,rgba(143,24,48,.9),rgba(94,15,32,.9)),var(--tile2)}
/* religion */
.religion{background:radial-gradient(700px 360px at 50% 0,rgba(229,185,92,.32),transparent 70%),radial-gradient(500px 300px at 85% 100%,rgba(19,128,138,.10),transparent 70%),var(--bg)}
.hadith{border-radius:18px;box-shadow:inset 0 0 0 10px var(--card),inset 0 0 0 11.5px var(--gold2),var(--sh2)}
.hadith::before{height:12px;background-size:auto 12px;border-radius:18px 18px 0 0}
.hadith .orn{display:inline-block;font-size:2.6rem;background:var(--goldgrad);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 4s linear infinite,spin 30s linear infinite}
.h-ar{color:var(--maroon)}
.mini .lbl{color:var(--turq);font-weight:800}
/* footer */
.footer{background:linear-gradient(180deg,var(--bg2),#F1E0C4)}
.socials a{border-radius:999px;transition:.25s}
.socials a:hover{background:linear-gradient(135deg,var(--maroon),var(--crimson));border-color:transparent;transform:translateY(-3px)}
/* responsive */
.photo-badges{display:contents}
@media (max-width:900px){
  .hero-photo{margin-bottom:5.2rem}
  .photo-badges{display:flex;position:absolute;z-index:4;top:calc(100% + .9rem);left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2rem);justify-content:center;align-items:stretch;gap:.6rem}
  .photo-badges .medal,.photo-badges .badge-float{position:static;inset:auto;margin:0;flex:0 1 auto}
  .photo-badges .medal{padding:.55rem .85rem;gap:.55rem}
  .photo-badges .medal b{font-size:1.3rem}
  .photo-badges .medal span{font-size:.7rem;max-width:96px}
  .photo-badges .badge-float{font-size:.74rem;padding:.55rem .8rem;line-height:1.5}
}
@media (max-width:380px){
  .photo-badges{gap:.45rem}
  .photo-badges .medal{padding:.5rem .65rem}
  .photo-badges .badge-float{font-size:.68rem;padding:.5rem .6rem;max-width:150px}
}
@media (max-width:1080px){.badge-float{left:-.4rem}}
@media (max-width:860px){
  html{scroll-padding-top:120px}
  .hero{padding:2.2rem 0 3rem}
  .hero-in{grid-template-columns:1fr;gap:2.2rem}
  .hero-photo{order:-1}
  .hero-photo{width:min(360px,86%);padding:26px}
  .arch-back{inset:8px -12px 40px 30px}
  .medal{right:-.6rem;bottom:2rem}
  .badge-float{left:-.6rem;top:3.5rem;font-size:.72rem}
  .hero-text{text-align:center}
  .orn-line{margin-inline:auto}
  .hero h1 .shine::after{margin-inline:auto}
  .hero-cta,.hero-mini{justify-content:center}
  .hero-quote{margin-inline:auto;text-align:right}
  .nav{top:110px}
  .glow.g1{left:-20%;width:420px;height:420px}
}
@media (max-width:600px){
  .ticker{height:36px;font-size:.8rem}
  .ticker-lbl{padding:0 .7rem 0 1rem}
  .hero-mini>div{padding:.45rem .8rem}
  .star-spin{opacity:.4}
  .glow{filter:blur(40px)}
}
@media (prefers-reduced-motion:reduce){.rise{opacity:1;transform:none}.ticker-track.on{animation:none}}

/* ===== compact daily row: hadith · prayer · weather (right after hero) ===== */
.daily-sec{padding:3.2rem 0 3.6rem}
.daily-sec .sec-head{margin-bottom:1.4rem}
.daily-grid{grid-template-columns:1.15fr 1fr 1fr;gap:1.2rem;align-items:stretch}
.daily-grid .card{padding:1.15rem 1.2rem 1rem}
.daily-grid .card-h{margin-bottom:.75rem;padding-bottom:.5rem}
.daily-grid .card-h h3{font-size:1rem}
.daily-grid .tiny{font-size:.66rem;padding-top:.55rem;line-height:1.6}
/* hadith: short card with source */
.daily-grid .hadith{padding:1.35rem 1.4rem 1.1rem;text-align:center;justify-content:flex-start;box-shadow:inset 0 0 0 6px var(--card),inset 0 0 0 7px var(--gold2),var(--sh)}
.daily-grid .hadith::before{height:8px;background-size:auto 8px}
.daily-grid .hadith .card-h{justify-content:center;gap:.5rem;border-bottom-color:rgba(184,134,46,.35)}
.orn-sm{color:var(--gold);font-size:1rem}
.daily-grid .h-ar{font-size:1.18rem;line-height:1.95;margin:.25rem 0 .45rem}
.daily-grid .h-fa{font-size:.9rem;line-height:1.9;color:#4A3A34}
.daily-grid .h-src{margin-top:auto;padding-top:.7rem;font-size:.76rem;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.15rem .4rem}
.daily-grid .h-src b::after{content:" ·";color:var(--muted)}
/* prayer: compact list, next highlighted */
.daily-grid .next-prayer{padding:.55rem .8rem;margin-bottom:.6rem;font-size:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;text-align:right}
.daily-grid .next-prayer b{font-size:1.15rem;display:inline}
.daily-grid .p-list{grid-template-columns:1fr 1fr;gap:.3rem}
.daily-grid .p-list li{padding:.38rem .6rem;font-size:.8rem;gap:.3rem}
.daily-grid .p-list li:not(.next){background:var(--bg2)}
.daily-grid .p-list li:last-child:nth-child(odd){grid-column:1/-1}
.daily-grid .p-list li.next{font-weight:800}
/* weather: current + 3-day strip */
.daily-grid .w-now{gap:.8rem}
.daily-grid .w-icon{width:58px;height:58px}
.daily-grid .w-temp{font-size:2.3rem}
.daily-grid .w-desc{font-size:.85rem}
.daily-grid .w-meta{margin:.7rem 0;gap:.35rem}
.daily-grid .w-meta div{padding:.3rem .2rem;font-size:.68rem}
.daily-grid .w-meta b{font-size:.82rem}
.daily-grid .w-days{grid-template-columns:repeat(3,1fr);gap:.35rem}
.daily-grid .w-days div:nth-child(n+4){display:none}
.daily-grid .w-days div{padding:.35rem .2rem;font-size:.7rem;display:flex;flex-direction:column;align-items:center;gap:.05rem}
.daily-grid .w-days svg{width:24px;height:24px}
/* calendar row lower on the page: clock · occasions · dhikr */
.cal-sec{padding:3.4rem 0}
.cal-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1.2rem;align-items:stretch}
.cal-grid .clock-card{display:grid;grid-template-columns:auto 1fr;gap:.6rem 1.2rem;align-items:center;text-align:right;padding:1.2rem}
.cal-grid .analog{width:110px;height:110px;grid-row:span 2}
.cal-grid .digital{font-size:1.5rem;margin:0}
.cal-grid .dates{gap:.3rem}
.cal-grid .dates div{padding:.3rem .6rem}
.cal-grid .mini{padding:1.2rem;justify-content:center}
@media (max-width:1080px){
  .daily-grid{grid-template-columns:1fr 1fr}
  .daily-grid .hadith{grid-column:1/-1}
  .daily-grid .clock-card{grid-column:auto}
  .cal-grid{grid-template-columns:1fr 1fr}
  .cal-grid .clock-card{grid-column:1/-1}
}
@media (max-width:600px){
  .daily-sec{padding:2.4rem 0 2.8rem}
  .daily-grid{grid-template-columns:1fr;gap:.9rem}
  .daily-grid .hadith{grid-column:auto}
  .daily-sec .sec-head{flex-wrap:wrap;gap:.6rem}
  .cal-grid{grid-template-columns:1fr;gap:.9rem}
  .cal-grid .clock-card{grid-column:auto;grid-template-columns:auto 1fr;text-align:right}
  .cal-grid .analog{width:92px;height:92px}
}

/* ===== articles (homepage section, archive, single article) ===== */
[hidden]{display:none!important}
.articles-sec{background:radial-gradient(640px 320px at 85% 0,rgba(229,185,92,.22),transparent 70%),radial-gradient(520px 300px at 10% 100%,rgba(19,128,138,.08),transparent 70%),var(--bg)}
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.a-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh);color:inherit;text-decoration:none;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s,border-color .3s}
.a-card:hover{transform:translateY(-5px);border-color:var(--gold2);box-shadow:var(--sh2)}
.a-img{position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,#F7E7D6,#FFF6E6);background-image:var(--tile2);background-size:60px;overflow:hidden;border-bottom:3px solid var(--gold2)}
.a-img .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--maroon);font-weight:800;opacity:.55}
.a-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.a-card:hover .a-img img{transform:scale(1.05)}
.a-body{padding:1rem 1.15rem 1.15rem;display:flex;flex-direction:column;gap:.35rem;flex:1}
.a-date{font-size:.78rem;color:var(--turq);font-weight:700}
.a-body h3{font-size:1.06rem;line-height:1.75;color:var(--maroon);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-body p{font-size:.88rem;color:var(--muted);line-height:1.9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.a-more{margin-top:auto;padding-top:.4rem;font-size:.82rem;font-weight:800;color:var(--crimson)}
/* article pages */
.page-article .topbar .nav a{white-space:nowrap}
.art-main{padding:2rem 0 4rem;min-height:60vh;background:radial-gradient(700px 360px at 50% 0,rgba(229,185,92,.18),transparent 70%),var(--bg)}
.crumbs{display:flex;gap:.45rem;align-items:center;font-size:.82rem;color:var(--muted);margin-bottom:1.2rem;flex-wrap:wrap}
.crumbs a{color:var(--maroon);text-decoration:none}
.art-wrap{max-width:820px}
.art-head{text-align:center;margin-bottom:1.6rem}
.art-kicker{display:inline-block;color:#FFF7E8;background:linear-gradient(135deg,var(--maroon),var(--crimson));padding:.1rem .9rem;border-radius:999px;font-size:.78rem;font-weight:700}
.art-head h1{font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.6;color:var(--maroon);margin:.7rem 0 .4rem;font-weight:900}
.art-meta{display:flex;gap:.5rem;justify-content:center;color:var(--muted);font-size:.88rem}
.art-lead{margin:1rem auto 0;max-width:640px;font-size:1.05rem;color:#4A3A34;line-height:2}
.art-cover{margin:0 0 1.8rem;border-radius:18px;overflow:hidden;box-shadow:var(--sh2);border:4px solid var(--card);outline:1.5px solid var(--gold2)}
.art-cover img{display:block;width:100%;height:auto}
.art-body{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:2rem 2.2rem;box-shadow:var(--sh);font-size:1.06rem;line-height:2.15;color:#33241F;overflow-wrap:anywhere}
.art-body p{margin:0 0 1.1rem}
.art-body h2{font-size:1.4rem;color:var(--maroon);margin:1.6rem 0 .6rem;line-height:1.7}
.art-body h3{font-size:1.15rem;color:var(--maroon);margin:1.3rem 0 .5rem}
.art-body blockquote{border-right:4px solid var(--gold2);background:#FBF3E6;padding:.8rem 1.1rem;margin:1.2rem 0;border-radius:10px;color:#4A3A34}
.art-body ul,.art-body ol{padding-right:1.6rem;margin:0 0 1.1rem}
.art-body img{max-width:100%;height:auto;border-radius:12px;display:block;margin:1.2rem auto}
.art-body hr{border:0;border-top:1px dashed var(--gold);margin:1.6rem 0}
.art-body a{color:var(--turq)}
.art-foot{display:flex;gap:.7rem;justify-content:center;margin-top:2rem;flex-wrap:wrap}
.art-grid-all{margin-top:.4rem}
.art-empty{grid-column:1/-1}
.page-article .footer{padding:1.4rem 0}
@media (max-width:1080px){.art-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.art-grid{grid-template-columns:1fr}.art-body{padding:1.3rem 1.1rem;font-size:1rem}.art-main{padding-top:1.2rem}}