@font-face{font-family:Amiri;src:url(fonts/Amiri-Regular.ttf);font-weight:400}
@font-face{font-family:Amiri;src:url(fonts/Amiri-Bold.ttf);font-weight:700}
@font-face{font-family:"Amiri Quran";src:url(fonts/AmiriQuran.ttf)}
@font-face{font-family:Kufi;src:url(fonts/ReemKufi-SemiBold.ttf)}
:root{--green:#0f4a3a;--green2:#16634e;--gold:#c99a3e;--gold2:#e6b85c;--cream:#fffaf0;--ink:#2a2418;--muted:#6b5c3e}
*{box-sizing:border-box;margin:0}
body{background:#1d2b23;color:var(--ink);font-family:Georgia,"Times New Roman",serif}
html[lang=ar] body{font-family:Amiri,serif}
.bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;background:rgba(15,74,58,.97);border-bottom:2px solid var(--gold)}
.brand{display:flex;align-items:center;gap:8px;color:var(--gold2);font:700 16px system-ui,sans-serif}
.brand span{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--gold2);border-radius:50%;font-family:Georgia}
nav{display:flex;gap:4px;flex-wrap:wrap}
.lang{border:0;border-radius:999px;padding:6px 12px;background:transparent;color:#e9f1ea;font:600 13px system-ui,sans-serif;cursor:pointer}
.lang.on{background:var(--gold2);color:#152a20}
#poster{width:min(1080px,100%);margin:0 auto;padding:0 0 26px;background:
  radial-gradient(circle at 70% 17%,rgba(255,236,170,.95) 0 38px,rgba(255,200,110,.55) 90px,transparent 260px),
  linear-gradient(180deg,#f7c98a 0%,#f9dcae 14%,#f6e6c8 24%,#e9d9b6 32%,#b9a273 42%,#7f7550 55%,#4f5a3a 75%,#33402c 100%)}
.head{position:relative;padding:44px 40px 26px;text-align:center}
.head:after{content:"";position:absolute;left:0;right:0;bottom:-30px;height:120px;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(51,64,44,.25)),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 120' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L140 40 L260 80 L400 25 L540 70 L700 30 L840 75 L980 35 L1080 60 L1080 120 L0 120Z' fill='%238c7a55' opacity='.55'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.sun{display:block;margin:0 auto -6px;width:120px;height:44px}
.title{font-family:Kufi,Amiri,serif;font-size:96px;line-height:1.1;color:var(--green);text-shadow:0 2px 0 rgba(255,255,255,.4)}
html:not([lang=ar]) .title{font-family:Georgia,serif;font-weight:700;font-size:78px}
.sub{font-family:Amiri,serif;font-weight:700;font-size:34px;color:#8a5a1c;margin-top:4px}
html:not([lang=ar]) .sub{font-family:Georgia,serif;font-size:27px}
.orn{color:var(--gold);letter-spacing:6px;margin:8px 0}
.intro{max-width:620px;margin:0 auto;font-size:26px;line-height:1.7;color:#2b2a20}
html:not([lang=ar]) .intro{font-size:21px}
.grid{position:relative;z-index:1;display:grid;gap:18px;padding:22px 22px 0}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}
.card{background:var(--cream);border:2px solid var(--gold);border-radius:20px;padding:0 0 16px;box-shadow:0 8px 22px rgba(0,0,0,.25);overflow:hidden}
.card h2{margin:12px 14px 12px;padding:9px 14px;border-radius:999px;background:linear-gradient(180deg,var(--green2),var(--green));color:#f5dfa5;
  font-family:Amiri,serif;font-weight:700;font-size:25px;text-align:center;border:1.5px solid var(--gold)}
html:not([lang=ar]) .card h2{font-family:Georgia,serif;font-size:19px}
.body{padding:0 18px}
.verse{text-align:center;padding:8px 0 12px;border-bottom:1px solid #ecdcb3}
.verse:last-child{border:0}
.q{font-family:"Amiri Quran",Amiri,serif;font-size:27px;line-height:2.1;color:#5a3a12;direction:rtl}
.ref{display:inline-block;font-size:15px;color:var(--muted);font-family:system-ui,sans-serif;text-decoration:none}
.ref:hover{text-decoration:underline}
.tr{font-size:16px;line-height:1.55;color:#3c3424;margin-top:4px;font-style:italic}
.note{font-size:19px;line-height:1.6;margin-top:4px}
html:not([lang=ar]) .note{font-size:15.5px}
.poem{direction:rtl;text-align:center;font-family:Amiri,serif;font-weight:700;font-size:28px;line-height:2;color:#1f2a20}
.bayt{padding:8px 0;border-bottom:1px solid #ecdcb3}.bayt:last-child{border:0}
.bayt .m{font-family:Georgia,serif;font-weight:400;font-size:15px;line-height:1.5;color:#4a3f2a;font-style:italic;direction:ltr}
.pnote{text-align:center;font:600 13px system-ui,sans-serif;color:var(--muted);margin:2px 0}
ol.steps{list-style:none;padding:0;counter-reset:s}
ol.steps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px dashed #e3cf9e;font-size:19px;line-height:1.55}
html:not([lang=ar]) ol.steps li{font-size:15.5px}
ol.steps li:before{content:counter(s);flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#f5dfa5;font:700 14px system-ui,sans-serif}
.prose p,.dua p{font-size:19px;line-height:1.7;text-align:center;padding:8px 0;border-bottom:1px dashed #e3cf9e}
html:not([lang=ar]) .prose p,html:not([lang=ar]) .dua p{font-size:15.5px}
.prose p:last-child,.dua p:last-child{border:0}
.trnote{margin:16px 26px 0;text-align:center;font:13px system-ui,sans-serif;color:#efe2c2}
.foot{text-align:center;margin-top:14px;font:700 18px system-ui,sans-serif;color:var(--gold2)}
.dl{text-align:center;padding:18px 16px 30px}
.btn{display:inline-block;padding:11px 26px;border-radius:999px;background:var(--gold2);color:#152a20;font:800 16px system-ui,sans-serif;text-decoration:none}
@media(max-width:820px){.g2,.g3{grid-template-columns:1fr}.title{font-size:64px}html:not([lang=ar]) .title{font-size:52px}.head{padding:30px 16px 20px}.grid{padding:16px 12px 0}}
/* Dark sunrise background, matching earlier Channel 7 postings */
body{background:#060d22}
#poster{background:
  radial-gradient(circle at 72% 16%,rgba(255,226,150,.9) 0 34px,rgba(255,170,90,.45) 80px,transparent 230px),
  linear-gradient(180deg,#0a1a3f 0%,#1b3a7a 10%,#5a3a86 20%,#b8455e 28%,#d9703a 33%,#2a1d3f 42%,#101a36 60%,#070d22 100%)}
#poster:before{content:"";position:absolute;inset:0;height:280px;background-image:radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.5px);background-size:44px 44px;pointer-events:none;-webkit-mask-image:linear-gradient(#000,transparent)}
#poster{position:relative}
.head:after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1080 120' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L140 40 L260 80 L400 25 L540 70 L700 30 L840 75 L980 35 L1080 60 L1080 120 L0 120Z' fill='%23120d24' opacity='.85'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.title{color:transparent;background:linear-gradient(180deg,#fff6c8,#ffc24a 60%,#ff9a3c);-webkit-background-clip:text;background-clip:text;text-shadow:none;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.sub{color:#ffd27a}
.intro{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.trnote{color:#cfd6ea}
/* Dark tiles, same theme */
.card{background:linear-gradient(180deg,rgba(6,12,32,.95),rgba(12,18,42,.93));border:2px solid #ffd27a;box-shadow:0 12px 32px rgba(0,0,0,.55)}
.card h2{background:linear-gradient(180deg,#1b6b55,#0f4a3a);color:#ffe3a0;border-color:#ffd27a}
.q{color:#ffe3a0}
.ref{color:#9fc3ff}
.tr{color:#cfd8ef}
.note{color:#f2f2f2}
.poem{color:#fff}
.bayt .m{color:#ffe2b0}
.pnote{color:#b8c2dc}
.verse,.bayt{border-color:rgba(255,210,122,.3)}
ol.steps li{color:#f2f2f2;border-color:rgba(255,210,122,.3)}
ol.steps li:before{background:linear-gradient(180deg,#ffd27a,#ff9a3c);color:#1a1030}
.prose p,.dua p{color:#f2f2f2;border-color:rgba(255,210,122,.3)}
.dua p{color:#ffe9c4}
.head>*{position:relative;z-index:2}.head:after{z-index:0;bottom:-40px;height:90px}