/* Hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(800px 460px at 76% 45%, #b8461c 0%, #6e2412 40%, var(--ember-900) 78%);color:#fbe9da;padding:0}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero h1{font-size:64px;color:#fff3e6}
.hero h1 em{font-style:italic;font-weight:500;color:var(--gold)}
.hero p{font-size:19px;max-width:520px;color:#f1d6c3;margin:18px 0 28px}
.ember{position:absolute;border-radius:50%;background:radial-gradient(circle,#ffd08a,rgba(233,120,40,0) 70%);opacity:.7;animation:rise 9s linear infinite}
@keyframes rise{from{transform:translateY(40px);opacity:0}20%{opacity:.8}to{transform:translateY(-420px);opacity:0}}

/* Phoenix flip card: hover (or tap) reveals today's ayah */
.flip{justify-self:center;width:360px;height:360px;perspective:1200px;cursor:pointer;margin:0 auto}
.flip .in{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip .in{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
/* Hover (laptop) or tap (phone) turns the phoenix over to show today's ayah */
.flip:hover .in,.flip:focus-visible .in,.flip.flipped .in{transform:rotateY(180deg)}
.flip:hover .face,.flip.flipped .face{box-shadow:0 0 0 12px rgba(245,207,138,.28),0 0 120px 26px rgba(245,180,90,.55)}
.flip .face{transition:box-shadow .4s}
.ring{position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(245,207,138,.55);animation:pulse 2.6s ease-out infinite;pointer-events:none}
@keyframes pulse{from{transform:scale(.96);opacity:.9}to{transform:scale(1.12);opacity:0}}
.flip{position:relative}
.face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;overflow:hidden;box-shadow:0 0 0 10px rgba(245,207,138,.12),0 0 90px 12px rgba(233,161,74,.35)}
.face img{width:100%;height:100%;object-fit:cover}
.back{transform:rotateY(180deg);background:radial-gradient(circle at 50% 30%,#fff8ef,#f7e3cc);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px}
.back .eyebrow{margin-bottom:6px}
.back .ar{font-size:19px;line-height:1.85;white-space:normal;max-width:100%}
.back .en{font-size:18px;line-height:1.3}
.back .ref{font-size:12px}
.hint{text-align:center;margin-top:18px;font-size:13px;color:var(--gold);letter-spacing:.06em}

/* Two-column body with left season navigation */
.body{display:grid;grid-template-columns:250px 1fr;gap:44px;align-items:center}
.snav{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 16px}
.snav h4{font-family:Corm;font-size:24px;color:var(--ember-800);margin:0 6px 12px;font-weight:600}
.sitem{border-radius:12px;padding:10px 12px;margin-bottom:4px;transition:background .2s;cursor:pointer}
.sitem:hover,.sitem.is-hover{background:var(--sand)}
.sitem .t{display:flex;justify-content:space-between;font-weight:700;color:var(--ember-800)}
.sitem .t i{font-style:normal;color:var(--flame)}
.sitem .sub{font-size:13px;color:var(--muted)}
.sitem .eps{display:none;margin-top:8px;border-left:2px solid var(--amber);padding-left:10px}
.sitem.open .eps{display:block}
.sitem .eps a{display:block;font-size:13.5px;padding:4px 0;color:var(--ink)}
.sitem .eps a:hover{color:var(--rust)}
.snav .all{display:block;margin:12px 6px 0;color:var(--rust);font-weight:700;font-size:14px}

section.blk{margin-bottom:56px}
h2.big{font-size:40px;color:var(--ember-800);margin-top:4px}

/* Where are you today */
.feel{background:var(--sand);border-radius:22px;padding:24px 30px}
.feel h2.big{font-size:36px}
.feel p.lead{color:var(--muted);margin:6px 0 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.picked{margin-top:16px;background:#fff;border-radius:16px;padding:16px 20px;border:1px solid var(--line);display:none;animation:fade .45s ease}
.picked.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.picked h3{font-size:24px;color:var(--ember-800);margin-bottom:10px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mini{border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--cream)}
.mini .k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--flame);text-transform:uppercase}
.mini b{display:block;font-family:Corm;font-size:21px;color:var(--ember-800);margin:4px 0}
.mini span{font-size:13px;color:var(--muted)}
.mini .ar{font-size:20px;line-height:1.7;text-align:right}

/* Featured latest episode */
.feat{display:grid;grid-template-columns:220px 1fr;gap:26px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:22px;align-items:center;margin-top:12px}
.feat .art{width:220px;height:220px;border-radius:14px;overflow:hidden}
.feat .art img{width:100%;height:100%;object-fit:cover}
.feat .se{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--flame)}
.feat h3{font-size:32px;color:var(--ember-800);margin:6px 0 8px}
.feat p{color:var(--muted);margin:0 0 14px}
.player{display:flex;align-items:center;gap:14px;margin-top:16px}
.pb{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--rust),var(--flame));display:grid;place-items:center;transition:transform .2s, box-shadow .2s;flex:none}
.pb:after{content:"";border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px}
.feat:hover .pb,.feat.is-hover .pb{transform:scale(1.08);box-shadow:0 0 0 8px rgba(212,98,42,.18)}
.track{flex:1;height:6px;border-radius:9px;background:var(--sand)}
.player small{color:var(--muted);font-size:13px}
.links{margin-top:12px;font-size:13px;color:var(--muted)}
.links b{color:var(--rust)}

/* Resources */
.res{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.rc{border-radius:18px;padding:26px;background:#fff;border:1px solid var(--line)}
.rc .ic{width:46px;height:46px;border-radius:12px;background:var(--sand);display:grid;place-items:center;color:var(--rust);font-size:22px;margin-bottom:14px}
.rc h3{font-size:25px;color:var(--ember-800)}
.rc p{color:var(--muted);font-size:15px;margin:8px 0 0}
.rc .go{margin-top:14px;font-weight:700;color:var(--rust);font-size:14px;opacity:0;transform:translateY(6px);transition:all .25s}
.rc:hover .go,.rc.is-hover .go{opacity:1;transform:none}
.featwrap{max-width:900px;margin:0 auto;width:100%}
.featwrap .more{display:flex;justify-content:space-between;margin-top:18px;font-weight:700;color:var(--rust);font-size:15px}
.reswrap h2.big{margin-bottom:6px}