:root{--ink:#143a31;--deep:#0a3b31;--gold:#b47c22;--paper:#f5e8c9;--paper2:#ead4a7}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#d8bd87}
body{margin:0;color:var(--ink);font-family:"Noto Nastaliq Urdu","Noto Serif Arabic",serif;background:#d8bd87}
.page{width:100%;overflow:hidden;background:#ead8b2}
.hero{position:relative;width:100%;height:min(50.8vw,780px);min-height:420px;overflow:hidden;background:#d8b56f}
.hero img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:115px;background:linear-gradient(to bottom,transparent 0%,rgba(245,232,201,.52) 45%,#f5e8c9 100%);pointer-events:none}
.reading-area{position:relative;margin-top:-2px;background:
radial-gradient(circle at 50% 0,rgba(255,250,232,.95) 0 12%,transparent 42%),
linear-gradient(90deg,#d6b77d 0,#eeddb8 7%,#f6ebd1 18%,#f7edd5 50%,#f6ebd1 82%,#eeddb8 93%,#d6b77d 100%)}
.reading-area:before,.reading-area:after{content:"";position:absolute;top:0;bottom:0;width:19%;opacity:.34;pointer-events:none;background:
radial-gradient(ellipse at 50% 8%,rgba(74,90,57,.45),transparent 45%),
linear-gradient(150deg,transparent 0 30%,rgba(89,86,48,.28) 31% 33%,transparent 34% 52%,rgba(90,73,42,.25) 53% 55%,transparent 56%)}
.reading-area:before{left:0}.reading-area:after{right:0;transform:scaleX(-1)}
.mist{position:absolute;inset:0;pointer-events:none;opacity:.26;background-image:radial-gradient(rgba(135,93,34,.16) .7px,transparent .7px);background-size:8px 8px;mix-blend-mode:multiply}
.biography{position:relative;z-index:1;width:min(1000px,88vw);margin:0 auto;padding:35px 28px 110px;text-align:center}
.biography:before{content:"";position:absolute;left:50%;top:0;bottom:70px;width:min(920px,100%);transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(255,252,238,.54),rgba(255,248,226,.2) 62%,transparent 76%);z-index:-1}
.gold-mark{display:flex;align-items:center;justify-content:center;gap:13px;color:var(--gold);margin:0 auto 28px;width:240px}.gold-mark span{height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}.gold-mark span:last-child{background:linear-gradient(90deg,var(--gold),transparent)}.gold-mark b{font-size:15px}
p{margin:0 auto 28px;max-width:900px;font-size:clamp(18px,1.55vw,25px);line-height:2.55;font-weight:400;text-shadow:0 1px rgba(255,255,255,.5)}
.intro{font-size:clamp(20px,1.75vw,27px);line-height:2.45;margin-bottom:34px}.intro strong{font-weight:700;color:#173d33}
.facts{font-size:clamp(20px,1.7vw,27px);color:#3e321e;line-height:2.35;margin:38px auto}
h2{margin:50px auto 26px;color:var(--deep);font-size:clamp(31px,3vw,47px);font-weight:700;line-height:1.7}h2:after{content:"";display:block;width:170px;height:1px;margin:4px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.route{display:inline-block;width:auto;padding:2px 28px 8px;margin:-5px auto 16px;color:#865d20;font-size:clamp(20px,1.8vw,28px);font-weight:700;direction:rtl;border-top:1px solid rgba(180,124,34,.3);border-bottom:1px solid rgba(180,124,34,.3)}
.qualities{color:#75501b;font-weight:700;font-size:clamp(20px,1.8vw,28px);margin:-5px auto 18px}
.end-ornament{margin-top:55px;color:var(--gold);font-size:30px}
@media(max-width:800px){.hero{height:58vw;min-height:300px}.hero img{object-position:center top}.hero:after{height:70px}.biography{width:92vw;padding:18px 12px 70px}p{font-size:17px;line-height:2.35;margin-bottom:23px}.intro{font-size:18px}.facts{font-size:18px}h2{font-size:29px;margin-top:38px}.route{font-size:17px;padding-inline:10px}.reading-area:before,.reading-area:after{width:10%;opacity:.18}}
@media(max-width:520px){.hero{height:67vw;min-height:245px}.biography{width:96vw;padding-inline:8px}p{font-size:16px;line-height:2.25}.intro,.facts{font-size:17px}.gold-mark{width:180px}.qualities{font-size:17px}}
/* v3: title is live HTML, not baked into the hero image */
.hero{height:auto;min-height:0;background:#e8c982}
.hero img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center top}
.hero:after{height:76px;background:linear-gradient(to bottom,transparent 0%,rgba(247,237,213,.35) 42%,#f6ead0 100%)}
.reading-area{margin-top:-3px;padding-top:0;background:
 radial-gradient(ellipse at 50% 0%,rgba(255,253,242,.98) 0 16%,rgba(250,242,219,.95) 43%,transparent 70%),
 radial-gradient(circle at 12% 22%,rgba(185,139,63,.09),transparent 28%),
 radial-gradient(circle at 88% 30%,rgba(185,139,63,.08),transparent 30%),
 linear-gradient(90deg,#d8bd86 0%,#ead6ad 5%,#f5e8c9 13%,#fbf3df 50%,#f5e8c9 87%,#ead6ad 95%,#d8bd86 100%)}
.page-title{position:relative;z-index:2;width:min(1080px,92vw);margin:0 auto;padding:18px 20px 8px;text-align:center}
.page-title h1{margin:0;color:#123c31;font-size:clamp(30px,3.25vw,54px);font-weight:700;line-height:1.9;text-shadow:0 1px 0 #fff8e7}
.page-title .rahma{margin-top:-5px;color:#173f34;font-size:clamp(20px,1.8vw,29px);font-weight:600;line-height:2}
.page-title:after{content:"◆";display:flex;align-items:center;justify-content:center;width:280px;max-width:65vw;margin:8px auto 0;color:#b47c22;font-size:13px;background:linear-gradient(90deg,transparent 0 4%,#b47c22 4% 46%,transparent 46% 54%,#b47c22 54% 96%,transparent 96%);background-size:100% 1px;background-repeat:no-repeat;background-position:center}
.biography{padding-top:18px}
.gold-mark{display:none}
.reading-area:before,.reading-area:after{opacity:.18}
@media(max-width:800px){.hero{height:auto;min-height:0}.page-title{padding-top:8px}.page-title h1{font-size:clamp(25px,6vw,38px);line-height:1.8}.page-title .rahma{font-size:19px}.hero:after{height:45px}}
@media(max-width:520px){.hero{height:auto;min-height:0}.page-title h1{font-size:24px}.page-title .rahma{font-size:17px}.page-title:after{width:200px}.biography{padding-top:10px}}
/* v4 requested spacing/background refinements */
.hero:after{height:150px;background:linear-gradient(to bottom,transparent 0%,rgba(248,239,218,.28) 25%,rgba(248,239,218,.82) 72%,#f8efda 100%)}
.reading-area{margin-top:-42px;padding-top:58px;background:
 radial-gradient(ellipse at 50% 0%,#fffaf0 0%,#fbf2dd 42%,rgba(247,234,204,.98) 76%,rgba(233,210,166,.98) 100%),
 linear-gradient(90deg,#e1c58f 0%,#f4e5c5 11%,#fbf4e4 50%,#f4e5c5 89%,#e1c58f 100%)}
.page-title{padding-top:34px;padding-bottom:12px}
.biography{padding-top:48px}
@media(max-width:800px){.hero:after{height:95px}.reading-area{margin-top:-28px;padding-top:40px}.page-title{padding-top:24px}.biography{padding-top:36px}}
@media(max-width:520px){.hero:after{height:70px}.reading-area{margin-top:-20px;padding-top:30px}.page-title{padding-top:18px}.biography{padding-top:30px}}
/* v5: remove visible side overlay/shadow and pull biography upward */
.reading-area:before,.reading-area:after{display:none!important}
.biography:before{display:none!important}
.mist{opacity:.12;mix-blend-mode:normal}
.biography{padding-top:14px}
.page-title{padding-bottom:4px}
@media(max-width:800px){.biography{padding-top:10px}.page-title{padding-bottom:2px}}
@media(max-width:520px){.biography{padding-top:8px}}


/* v6 — front-page proportions matched to approved reference */
.hero{position:relative;width:100%;height:64vh;min-height:500px;max-height:690px;background:#f8efd9;overflow:hidden}
.hero img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 48%}
.hero:after{height:92px;bottom:-1px;background:linear-gradient(to bottom,rgba(248,239,218,0) 0%,rgba(248,239,218,.18) 30%,rgba(248,239,218,.76) 76%,#f8efda 100%)}
.reading-area{margin-top:-1px;padding-top:0;background:#f8efd9}
.page-title{width:min(1200px,94vw);padding:72px 20px 8px}
.page-title h1{font-size:clamp(36px,3.55vw,62px);line-height:1.72}
.page-title .rahma{font-size:clamp(21px,1.8vw,31px);margin-top:-4px}
.page-title:after{margin-top:8px}
.biography{padding-top:38px}
.mist{display:none}

.scroll-cue{position:absolute;z-index:5;right:28px;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#fff8e8;text-decoration:none;font-family:Arial,sans-serif;text-shadow:0 2px 8px rgba(0,0,0,.55);direction:ltr;opacity:.94}
.scroll-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;writing-mode:vertical-rl;transform:rotate(180deg)}
.mouse{width:22px;height:34px;border:1.5px solid currentColor;border-radius:13px;display:block;position:relative;background:rgba(15,43,35,.12);backdrop-filter:blur(2px)}
.mouse i{position:absolute;top:6px;left:50%;width:3px;height:6px;border-radius:3px;background:currentColor;transform:translateX(-50%);animation:wheel 1.5s ease-in-out infinite}
.arrow{font-size:21px;line-height:.7;animation:bob 1.5s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

@media(max-width:900px){
 .hero{height:58vh;min-height:420px;max-height:620px}
 .hero img{object-position:center center}
 .page-title{padding-top:54px}
 .biography{padding-top:28px}
 .scroll-cue{right:16px;bottom:22px}
}
@media(max-width:600px){
 .hero{height:52vh;min-height:350px;max-height:500px}
 .hero img{object-position:center center}
 .hero:after{height:65px}
 .page-title{padding:42px 14px 6px}
 .page-title h1{font-size:clamp(25px,7vw,34px);line-height:1.9}
 .page-title .rahma{font-size:18px}
 .biography{padding-top:24px}
 .scroll-cue{right:10px;bottom:16px;transform:scale(.88);transform-origin:bottom right}
}

/* v7 — ONLY move the hero artwork slightly downward so the Muhammad medallion sits centered */
.hero img{object-position:center 55%}
@media(max-width:900px){.hero img{object-position:center 55%}}
@media(max-width:600px){.hero img{object-position:center 55%}}

/* v8 — move ONLY the hero artwork downward; improve Scroll Down contrast */
.hero img{object-position:center 25%}
.scroll-cue{color:#123c31;text-shadow:0 1px 2px rgba(255,248,232,.95),0 0 8px rgba(255,248,232,.8)}
.mouse{background:rgba(255,248,232,.72);border-color:#123c31}
@media(max-width:900px){.hero img{object-position:center 25%}}
@media(max-width:600px){.hero img{object-position:center 25%}}