/* SMAAAQ — Editorial Redesign / 2026 */
:root{--red:#9b1c24;--red-dark:#6e1118;--red-soft:#f7e9ea;--gold:#c9a24d;--gold-soft:#f4ead2;--ink:#171717;--muted:#6d7075;--gray:#eef0f2;--line:#dedfe2;--white:#fff;--surface:#f8f8f7;--shadow:0 18px 50px rgba(25,20,20,.09);--serif:"Cinzel",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;--urdu:"Jameel Noori Nastaleeq Kasheeda","Noto Nastaliq Urdu",serif;--bengali:"Noto Serif Bengali","Noto Sans Bengali",serif;--bengali-sans:"Noto Sans Bengali","Noto Serif Bengali",sans-serif;--devanagari:"Noto Serif Devanagari","Noto Sans Devanagari",serif;--devanagari-sans:"Noto Sans Devanagari","Noto Serif Devanagari",sans-serif;--ease:cubic-bezier(.2,.7,.2,1);--radius:18px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}body:before{content:"";display:block;height:3px;background:linear-gradient(90deg,var(--red),var(--gold),var(--red))}.reading-progress{position:fixed;z-index:9999;top:0;left:0;width:100%;height:3px;pointer-events:none}.reading-progress-bar{display:block;width:100%;height:100%;background:var(--gold);transform-origin:left center}.section-inner,.header-inner{width:min(1180px,calc(100% - 40px));margin:auto}.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.reveal.is-visible{opacity:1;transform:none}
.site-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(16px);transition:box-shadow .3s ease}.site-header.is-scrolled{box-shadow:0 8px 30px rgba(0,0,0,.08)}.header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}.logo{font-family:var(--serif);font-size:1.55rem;font-weight:700;letter-spacing:.12em;color:var(--red);text-decoration:none;white-space:nowrap}.header-controls{display:flex;align-items:center;gap:16px}.primary-nav{display:flex;align-items:center;gap:4px}.primary-nav>a,.primary-nav>button{appearance:none;border:0;background:transparent;color:#4d4f53;text-decoration:none;font:600 .83rem var(--sans);padding:10px 12px;cursor:pointer;position:relative;white-space:nowrap}.primary-nav>a:after,.primary-nav>button:after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;background:var(--red);transform:scaleX(0);transition:transform .25s var(--ease)}.primary-nav>a:hover,.primary-nav>button:hover,.primary-nav>a.active{color:var(--red)}.primary-nav>a:hover:after,.primary-nav>a.active:after{transform:scaleX(1)}.nav-sufinama{color:var(--red)!important}.lang-switcher{position:relative}.lang-switcher-btn{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--white);border-radius:999px;padding:9px 11px;font:600 .76rem var(--sans);color:var(--ink);cursor:pointer}.lang-switcher-icon,.lang-switcher-caret{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}.lang-switcher-caret{width:12px}.lang-switcher-menu{display:none;position:absolute;right:0;top:calc(100% + 10px);width:145px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:var(--shadow)}.lang-switcher.open .lang-switcher-menu{display:grid}.lang-btn{border:0;background:transparent;padding:9px 10px;text-align:left;border-radius:9px;cursor:pointer;font:600 .8rem var(--sans)}.lang-btn:hover,.lang-btn.active{background:var(--red-soft);color:var(--red)}.menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);background:var(--white);border-radius:10px;padding:10px;cursor:pointer}.menu-toggle span{display:block;height:2px;background:var(--ink);margin:5px 0;transition:.25s}
.hero{min-height:650px;position:relative;display:grid;place-items:center;overflow:hidden;background:#111}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;filter:none}.hero-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.22) 55%,rgba(0,0,0,.5))}.hero-vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,transparent 0,rgba(0,0,0,.18) 65%,rgba(0,0,0,.6) 100%)}.hero-content{position:relative;z-index:2;text-align:center;color:var(--white);width:min(900px,calc(100% - 36px));padding:80px 0;transform:translateY(48px)}.hero-title{font-family:"Cinzel",var(--urdu);font-size:clamp(2.4rem,6vw,5.1rem);line-height:1.4;font-weight:400;margin:0;text-shadow:0 10px 35px rgba(0,0,0,.4)}.hero-title:after{content:"";display:block;width:72px;height:2px;margin:26px auto 20px;background:var(--gold)}.hero-subtitle{font-size:clamp(.95rem,1.7vw,1.15rem);color:rgba(255,255,255,.83);margin:0}.imran-link{color:#f0cf7b;text-decoration:none;border-bottom:1px solid rgba(240,207,123,.5)}.hero-actions{position:relative;z-index:3;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0 auto;padding:38px 0 18px;width:min(720px,calc(100% - 40px));animation:actionsIn .8s var(--ease) both}.hero-actions .btn{width:100%;min-height:54px}.hero-actions .btn:nth-child(1){animation-delay:.05s}.hero-actions .btn:nth-child(2){animation-delay:.1s}.hero-actions .btn:nth-child(3){animation-delay:.15s}.hero-actions .btn:nth-child(4){animation-delay:.2s}.hero-actions .btn:nth-child(5){animation-delay:.25s}.hero-actions .btn:nth-child(6){animation-delay:.3s}@keyframes actionsIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border-radius:10px;text-decoration:none;font:700 .82rem var(--sans);letter-spacing:.02em;transition:transform .25s var(--ease),background .25s,border-color .25s,box-shadow .25s}.btn-outline{color:#fff;border:1px solid var(--red);background:#000;box-shadow:0 10px 24px rgba(0,0,0,.18);backdrop-filter:blur(10px)}.btn-outline:hover{background:#111;border-color:var(--red);color:#fff;transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.28)}.btn-outline:active{background:#000;border-color:var(--red);color:#fff}
.home-collections{padding:110px 0 80px;background:var(--white)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:34px}.section-kicker,.about-card-eyebrow,.bio-card-kicker,.poem-tag{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}.section-heading h2,.page-hero-title{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);line-height:1.15;margin:8px 0 0}.section-heading p{max-width:530px;color:var(--muted);margin:0}.home-collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.home-collection-card{position:relative;display:flex;flex-direction:column;min-height:190px;padding:25px;text-decoration:none;color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.3s var(--ease)}.home-collection-card:before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--red);transform:scaleY(.35);transform-origin:top;transition:.3s var(--ease)}.home-collection-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#d8bd79}.home-collection-card:hover:before{transform:scaleY(1)}.home-card-number{font-size:.7rem;color:var(--gold);font-weight:800;letter-spacing:.15em}.home-card-title{font-family:var(--serif);font-size:1.4rem;margin-top:28px}.home-card-desc{font-size:.82rem;color:var(--muted);max-width:230px;margin-top:7px}.home-card-arrow{margin-top:auto;align-self:flex-end;color:var(--red);font-size:1.4rem}
.poetry-section,.about-teaser{padding:100px 0}.poetry-section{background:var(--surface)}.couplet-slideshow{position:relative;min-height:260px;border:1px solid var(--line);background:var(--white);box-shadow:var(--shadow);border-radius:var(--radius);padding:52px clamp(50px,8vw,110px);display:flex;align-items:center;justify-content:center;text-align:center}.couplet-slideshow:before{content:"“";position:absolute;top:20px;left:32px;font:700 5rem/1 var(--serif);color:var(--gold-soft)}.couplet-slideshow-body{font-family:var(--urdu);font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.8;margin:0}.couplet-slideshow-controls{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none}.couplet-slide-btn{pointer-events:auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--white);display:grid;place-items:center;cursor:pointer;color:var(--red);transition:.25s}.couplet-slide-btn:hover{background:var(--red);color:var(--white);transform:scale(1.06)}.couplet-slide-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}.couplet-slide-dots{position:absolute;top:calc(100% + 18px);left:50%;transform:translateX(-50%);display:flex;gap:7px}.couplet-slide-dots button{width:7px;height:7px;padding:0;border:0;border-radius:50%;background:#c9c9c9;cursor:pointer}.couplet-slide-dots button.active{background:var(--red);transform:scale(1.35)}.about-teaser{background:var(--white)}.about-card{width:100%;border:1px solid var(--line);background:var(--white);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:22px 26px;border-radius:var(--radius);cursor:pointer;text-align:left;box-shadow:0 10px 30px rgba(0,0,0,.05);transition:.3s var(--ease)}.about-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d4b36b}.about-card-photo img{display:block;width:92px;height:92px;object-fit:cover;border-radius:50%;border:3px solid var(--gold-soft)}.about-card-title{display:block;font-family:var(--serif);font-size:1.45rem;margin:4px 0}.about-card-line{display:block;color:var(--muted);font-size:.9rem}.about-card-arrow{font-size:1.7rem;color:var(--red);transition:transform .25s}.about-card:hover .about-card-arrow{transform:translateX(5px)}
.page-hero{background:linear-gradient(135deg,#5d0e14,#9b1c24);color:var(--white);padding:80px 0 90px;position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;width:320px;height:320px;border:1px solid rgba(201,162,77,.35);border-radius:50%;right:-90px;top:-120px}.page-hero-inner{position:relative;z-index:1}.breadcrumb{display:flex;align-items:center;gap:9px;font-size:.76rem;color:rgba(255,255,255,.7);margin-bottom:20px}.breadcrumb a{color:inherit;text-decoration:none}.page-hero-title{color:var(--white);max-width:800px}.page-hero-desc{max-width:700px;color:rgba(255,255,255,.78);margin:14px 0 0}.bio-section{padding:78px 0}.bio-grid,.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card{background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.045);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s}.bio-card:hover,.fact-card:hover,.quote-card:hover,.poem-card:hover,.couplet-poem-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#dcc58d}.bio-card{padding:26px}.bio-card-title{font-family:var(--serif);font-size:1.35rem;margin:6px 0 10px}.bio-card p{color:var(--muted);margin:0}.fact-table{width:100%;border-collapse:collapse;background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden}.fact-table tr{border-bottom:1px solid var(--line)}.fact-table tr:last-child{border-bottom:0}.fact-table td{padding:14px 18px}.fact-table td:first-child{font-weight:700;color:var(--muted);width:35%}.quote-card{padding:28px}.quote-card p{font-family:var(--serif);font-size:1.2rem}.poem-block{padding:32px;background:var(--white);border:1px solid var(--line);border-radius:16px;margin-top:20px}.poem-refrain{color:var(--red);font-weight:700}.poem-reader{max-width:920px;margin:auto}.poem-card-header{display:flex;justify-content:space-between;gap:16px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}.poem-card-title{font-family:var(--serif);font-size:1.5rem}.poem-switch{display:flex;gap:5px;flex-wrap:wrap}.poem-toggle{border:1px solid var(--line);background:var(--white);padding:7px 12px;border-radius:8px;cursor:pointer;font:600 .75rem var(--sans)}.poem-toggle.active{background:var(--red);border-color:var(--red);color:var(--white)}.poem-lang{display:none}.poem-lang.active{display:block}.urdu{font-family:var(--urdu);font-size:1.45rem;line-height:2.1;text-align:right}.roman{font-family:var(--serif);font-size:1.1rem;line-height:1.9}.poem-launch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.poem-launch-btn{display:block;text-decoration:none;color:var(--ink);padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--white);transition:.3s var(--ease)}.poem-launch-btn:hover{transform:translateY(-4px);border-color:#d6b96e;box-shadow:var(--shadow)}.poem-launch-title{font-family:var(--serif);font-size:1.3rem}.poem-launch-sub{color:var(--muted);font-size:.86rem}.lineage-link{color:var(--red);font-weight:700;text-decoration:none}.bio-closing{padding:25px;border-left:3px solid var(--gold);background:var(--gold-soft);border-radius:0 12px 12px 0}.family-tree-container{overflow:auto;padding:25px;border:1px solid var(--line);border-radius:18px;background:var(--surface)}
.site-footer{background:#171717;color:#d7d7d7;padding:58px 0 30px}.footer-inner{text-align:center}.footer-sufinama-wrap{margin-bottom:25px}.sufinama-badge{display:inline-flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-weight:700}.sufinama-logo-icon{width:25px;height:25px;object-fit:contain}.social-links{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}.social-link{display:inline-flex;align-items:center;gap:7px;color:#cfcfcf;text-decoration:none;border:1px solid #383838;border-radius:999px;padding:8px 12px;font-size:.78rem;transition:.25s}.social-link svg{width:15px;height:15px;fill:currentColor}.social-link:hover{color:var(--white);border-color:var(--gold);transform:translateY(-2px)}.copyright{color:#8d8d8d;font-size:.68rem;letter-spacing:.08em;margin:28px 0 0}.modal-backdrop{position:fixed;inset:0;z-index:2000;background:rgba(15,8,9,.72);backdrop-filter:blur(7px);display:none;align-items:center;justify-content:center;padding:20px}.modal-backdrop.is-open{display:flex}.modal-panel{width:min(760px,100%);max-height:min(760px,90vh);overflow:auto;background:var(--white);border-radius:20px;box-shadow:0 30px 90px rgba(0,0,0,.3);animation:modalIn .35s var(--ease)}@keyframes modalIn{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}.modal-topbar{display:flex;justify-content:flex-end;padding:14px 14px 0}.modal-close{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--white);font-size:1.3rem;cursor:pointer}.modal-body{padding:10px 42px 42px}.modal-photo{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid var(--gold-soft)}.modal-title{font-family:var(--serif);font-size:2rem;margin:10px 0}.lineage-marker{padding:14px 16px;border-left:3px solid var(--gold);background:var(--gold-soft);margin:22px 0}.scroll-top-btn{position:fixed;right:22px;bottom:22px;z-index:900;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--red);box-shadow:var(--shadow);display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:.3s}.scroll-top-btn.is-visible{opacity:1;transform:none;pointer-events:auto}.scroll-top-btn svg{width:20px;fill:none;stroke:currentColor;stroke-width:2}
@media(max-width:980px){.primary-nav{position:absolute;left:20px;right:20px;top:calc(100% + 1px);display:none;flex-direction:column;align-items:stretch;background:var(--white);border:1px solid var(--line);padding:10px;border-radius:0 0 16px 16px;box-shadow:var(--shadow)}.primary-nav.is-open{display:flex;animation:navDrop .28s var(--ease) both}@keyframes navDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}.primary-nav>a,.primary-nav>button{padding:12px}.primary-nav>a:after,.primary-nav>button:after{display:none}.menu-toggle{display:block}.header-controls{margin-left:auto}.bio-grid,.quote-grid{grid-template-columns:1fr 1fr}.home-collection-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.section-inner,.header-inner{width:min(100% - 28px,1180px)}.header-inner{min-height:68px}.logo{font-size:1.25rem}.lang-switcher-btn{padding:8px}.hero{min-height:570px}.hero-actions{margin:0 auto;padding:24px 0 10px;gap:9px}.btn{min-height:43px;padding:0 13px;font-size:.72rem}.poetry-section,.about-teaser,.bio-section{padding:65px 0}.section-heading{display:block}.section-heading p{margin-top:12px}.home-collection-grid,.bio-grid,.quote-grid,.poem-launch-grid{grid-template-columns:1fr}.couplet-slideshow{padding:55px 35px;min-height:230px}.couplet-slideshow-body{font-size:1.35rem}.couplet-slideshow-controls{left:8px;right:8px}.about-card{grid-template-columns:auto 1fr;gap:15px;padding:18px}.about-card-arrow{display:none}.about-card-photo img{width:70px;height:70px}.about-card-title{font-size:1.15rem}.page-hero{padding:62px 0 70px}.page-hero-title{font-size:2rem}.modal-body{padding:8px 22px 28px}.poem-block{padding:22px 16px}.urdu{font-size:1.2rem}.scroll-top-btn{right:14px;bottom:14px}}


.couplet-slideshow-section .section-inner{position:relative}.couplet-slideshow{animation:floatIn .8s var(--ease) both}.couplet-slide-btn:focus-visible,.btn:focus-visible,.menu-toggle:focus-visible,.primary-nav a:focus-visible,.primary-nav button:focus-visible{outline:3px solid rgba(201,162,77,.45);outline-offset:3px}@keyframes floatIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Refined About experience */
body.modal-open{overflow:hidden}
.about-modal[hidden]{display:none}
.about-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:18px}
.about-modal .modal-backdrop{position:absolute;inset:0;z-index:0;display:block;background:rgba(16,12,12,.84);backdrop-filter:none;-webkit-backdrop-filter:none;opacity:1}
.about-panel{position:relative;z-index:1;width:min(940px,100%);max-height:min(760px,92vh);overflow:auto;background:#fff;border-radius:24px;box-shadow:0 35px 100px rgba(0,0,0,.42);border:1px solid rgba(188,145,54,.3);animation:aboutPanelIn .42s cubic-bezier(.2,.8,.2,1);scrollbar-width:thin}
.about-modal.closing .about-panel{animation:aboutPanelOut .3s ease forwards}
@keyframes aboutPanelIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes aboutPanelOut{to{opacity:0;transform:translateY(18px) scale(.98)}}
.about-profile{display:grid;grid-template-columns:330px 1fr;min-height:610px}
.about-profile-visual{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:48px 30px;background:linear-gradient(145deg,#8f1017 0%,#b21a23 58%,#7d0c12 100%);color:#fff;overflow:hidden}
.about-profile-visual:before,.about-profile-visual:after{content:"";position:absolute;border:1px solid rgba(232,196,104,.28);border-radius:50%;pointer-events:none}
.about-profile-visual:before{width:380px;height:380px;top:-130px;left:-190px}
.about-profile-visual:after{width:260px;height:260px;bottom:-110px;right:-120px}
.about-crest{font-size:.7rem;font-weight:800;letter-spacing:.28em;color:#f0d28a;margin-bottom:28px;position:relative;z-index:1}
.about-photo-wrap{position:relative;z-index:1;width:188px;height:188px;border-radius:50%;padding:7px;background:linear-gradient(145deg,#f0d28a,#a97a25);box-shadow:0 18px 45px rgba(0,0,0,.28)}
.about-photo-wrap:before{content:"";position:absolute;inset:-11px;border:1px solid rgba(240,210,138,.5);border-radius:50%}
.about-profile-visual .modal-photo{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:4px solid #fff}
.about-visual-caption{position:relative;z-index:1;text-align:center;margin-top:30px}
.about-visual-caption span{display:block;font-size:.78rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.about-visual-caption small{display:block;margin-top:9px;color:#f2dca6;font-size:.7rem;line-height:1.6}
.about-profile-content{position:relative;padding:54px 58px 48px;background:#fff}
.modal-close{position:absolute;right:18px;top:18px;z-index:5;width:42px;height:42px;border:1px solid #e7dfd0;border-radius:50%;background:rgba(255,255,255,.96);color:#761018;display:grid;place-items:center;font-size:1.55rem;line-height:1;cursor:pointer;box-shadow:0 7px 20px rgba(0,0,0,.08);transition:transform .25s,background .25s,color .25s,border-color .25s}
.modal-close:hover{transform:rotate(90deg);background:#9f1119;color:#fff;border-color:#9f1119}
.about-heading{padding-right:48px}
.about-card-eyebrow{margin:0 0 9px;color:#956d25;font-size:.68rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase}
.modal-title{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.65rem);line-height:1.08;color:#1b1716;margin:0;max-width:600px}
.about-title-rule{display:flex;align-items:center;gap:8px;margin:20px 0 27px}
.about-title-rule span{height:1px;width:38px;background:#d9c29a}.about-title-rule i{width:7px;height:7px;transform:rotate(45deg);background:#b78a32;display:block}
.modal-body{padding:0;color:#4d4946;font-size:.94rem;line-height:1.85}
.about-lead{font-size:1rem;color:#292523;line-height:1.9;margin:0 0 22px}
.lineage-marker{display:flex;align-items:center;gap:18px;padding:18px 20px;margin:25px 0;background:linear-gradient(90deg,#fff9ed,#fff);border:1px solid #eadcc0;border-left:4px solid #b78a32;border-radius:12px;box-shadow:0 8px 22px rgba(91,57,18,.06)}
.lineage-number{width:54px;height:54px;flex:0 0 54px;border-radius:50%;display:grid;place-content:center;text-align:center;background:#9f1119;color:#fff;box-shadow:0 8px 18px rgba(159,17,25,.2)}
.lineage-number strong{font-family:var(--serif);font-size:1.45rem;line-height:.8}.lineage-number sup{font-size:.55rem;margin-left:1px}
.lineage-copy small{display:block;color:#8b8176;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}.lineage-link{display:flex;align-items:center;gap:8px;color:#891019;text-decoration:none;font-size:.9rem}.lineage-link span{font-size:.8rem;transition:transform .2s}.lineage-link:hover span{transform:translate(3px,-3px)}
.about-signature{display:flex;align-items:center;gap:12px;margin-top:30px;padding-top:20px;border-top:1px solid #eee7dc}.signature-mark{width:34px;height:34px;display:grid;place-items:center;border:1px solid #c7a45d;color:#9a701f;font-family:var(--serif);font-size:1.2rem;border-radius:50%}.about-signature b{display:block;color:#28221f;font-size:.72rem;letter-spacing:.16em}.about-signature small{display:block;color:#8d847b;font-size:.64rem;margin-top:2px}
@media(max-width:760px){.about-modal{padding:10px}.about-panel{max-height:94vh;border-radius:20px}.about-profile{grid-template-columns:1fr;min-height:0}.about-profile-visual{padding:38px 24px 34px;min-height:330px}.about-photo-wrap{width:145px;height:145px}.about-crest{margin-bottom:20px}.about-visual-caption{margin-top:22px}.about-profile-content{padding:38px 24px 30px}.modal-close{right:13px;top:13px}.about-heading{padding-right:35px}.modal-body{font-size:.88rem}.about-lead{font-size:.93rem}.lineage-marker{padding:15px}.about-signature{margin-top:24px}}


/* Premium language controls */
.lang-switcher-btn{position:relative;overflow:hidden;border:1px solid rgba(180,140,60,.45);background:linear-gradient(135deg,#fff 0%,#fffaf0 100%);box-shadow:0 6px 18px rgba(60,20,20,.08);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.lang-switcher-btn:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#9b1c24,#c9a24d)}.lang-switcher-btn:hover{transform:translateY(-2px);border-color:#c9a24d;box-shadow:0 10px 24px rgba(60,20,20,.12)}.lang-switcher-current{min-width:23px;text-align:center;color:#8e151d;letter-spacing:.08em}.lang-switcher-menu{border:1px solid #e5d7b9;border-radius:14px;padding:7px;background:rgba(255,255,255,.98);box-shadow:0 18px 45px rgba(40,10,10,.16);animation:langMenuIn .22s ease both;transform-origin:top right}.lang-btn{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;color:#4d4742;transition:background .2s ease,color .2s ease,transform .2s ease}.lang-btn:after{content:"";width:6px;height:6px;border-radius:50%;background:#c9a24d;opacity:0;transform:scale(.5);transition:.2s ease}.lang-btn:hover{background:#fff7e8;color:#941721;transform:translateX(2px)}.lang-btn.active{background:linear-gradient(90deg,#fff2f1,#fffaf0);color:#941721}.lang-btn.active:after{opacity:1;transform:scale(1)}@keyframes langMenuIn{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}
/* Poetry language toggle — shared by Nohas, Naats, Salams, Rubais and poem pages */
.poem-switch{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid #e4d9c7;border-radius:12px;background:linear-gradient(135deg,#fff,#fbf7ef);box-shadow:0 7px 20px rgba(60,30,15,.07)}.poem-toggle{position:relative;min-width:82px;padding:9px 14px;border:0;border-radius:9px;background:transparent;color:#6c645d;font:800 .72rem var(--sans);letter-spacing:.04em;transition:all .25s ease}.poem-toggle:hover{color:#971720;background:#fff4f1;transform:translateY(-1px)}.poem-toggle.active{background:linear-gradient(135deg,#9b1c24,#741018);color:#fff;box-shadow:0 6px 14px rgba(122,16,24,.22)}.poem-toggle.active:after{content:"";position:absolute;left:50%;bottom:3px;width:16px;height:2px;border-radius:2px;background:#d8b968;transform:translateX(-50%)}
@media(max-width:640px){.lang-switcher-menu{right:-4px;width:150px}.poem-switch{width:100%;display:grid;grid-template-columns:1fr 1fr}.poem-toggle{width:100%;min-width:0}.hero-title{font-size:clamp(2rem,10vw,3.5rem)}}

/* ===== v5 polish: motion, controls, modal stability ===== */
:root{--ease-premium:cubic-bezier(.22,.8,.22,1);--ease-soft:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:smooth}
body{overflow-x:hidden;overflow-x:clip}
.hero-title{font-family:'Cinzel',serif;font-weight:600;letter-spacing:.015em;text-wrap:balance;animation:heroTitleIn .9s var(--ease-premium) both}
.hero-subtitle{animation:heroFadeUp .8s .14s var(--ease-premium) both}
.hero:after{content:"";position:absolute;inset:auto 8% 7%;height:1px;background:linear-gradient(90deg,transparent,rgba(201,162,77,.5),transparent);opacity:.7;pointer-events:none}
.btn,.poem-toggle,.lang-switcher-btn,.menu-toggle,.social-link,.poem-launch-btn,.about-card,.home-collection-card,.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card{transition:transform .32s var(--ease-premium),box-shadow .32s var(--ease-premium),border-color .28s ease,background-color .28s ease,color .28s ease}
.btn:active,.poem-toggle:active,.lang-switcher-btn:active,.menu-toggle:active{transform:translateY(1px) scale(.98)}
.poem-toggle{position:relative;overflow:hidden}
.poem-toggle:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.18) 50%,transparent 80%);transform:translateX(-120%);transition:transform .55s var(--ease-soft)}
.poem-toggle:hover:before{transform:translateX(120%)}
.poem-toggle.active{box-shadow:0 7px 20px rgba(120,14,22,.18)}
.lang-switcher-btn{min-width:76px;justify-content:center}
.lang-switcher-btn:focus-visible,.lang-btn:focus-visible,.poem-toggle:focus-visible,.modal-close:focus-visible{outline:3px solid rgba(201,162,77,.38);outline-offset:3px}
.lang-switcher.open .lang-switcher-btn .lang-switcher-caret{transform:rotate(180deg)}
.lang-switcher-caret{transition:transform .25s var(--ease-premium)}
.lang-switcher-menu{will-change:transform,opacity}
.lang-btn{min-height:38px}

/* Modal must render above the backdrop; no blur-only state. */
body.modal-open{overflow:hidden}
.about-modal{isolation:isolate}
.about-modal .modal-backdrop{position:absolute;inset:0;z-index:0;background:rgba(20,7,9,.78);opacity:1;display:block;pointer-events:auto}
.about-panel{z-index:2;opacity:1;visibility:visible;transform:translateZ(0);will-change:transform,opacity}
.about-modal[hidden]{display:none!important}
.about-modal.closing .about-panel{pointer-events:none}
.modal-close{position:absolute;right:18px;top:18px;z-index:5;display:grid;place-items:center;transition:transform .28s var(--ease-premium),background .25s,border-color .25s,color .25s}
.modal-close:hover{transform:rotate(90deg);background:#fff7e8;border-color:#c9a24d;color:#8f1017}
.about-profile-visual{isolation:isolate}
.about-profile-visual>*{position:relative;z-index:1}
.about-photo-wrap{box-shadow:0 18px 45px rgba(35,3,6,.3);transition:transform .45s var(--ease-premium),box-shadow .45s var(--ease-premium)}
.about-photo-wrap:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 24px 55px rgba(35,3,6,.38)}
.about-profile-content{animation:aboutContentIn .55s .08s var(--ease-premium) both}
.about-heading,.about-lead,.about-signature{animation:aboutTextIn .55s var(--ease-premium) both}
/* Lineage badge: keep the 31st descendant number fully opaque and readable. */
.lineage-marker{opacity:1!important;animation:lineageMarkerIn .55s var(--ease-premium) both}
.lineage-marker>strong{opacity:1!important;color:#9f1119;font-family:var(--serif);font-size:1.45rem;font-weight:800;line-height:1}
.lineage-marker>strong sup{font-size:.55em;margin-left:1px}
@keyframes lineageMarkerIn{from{opacity:1;transform:translateY(10px)}to{opacity:1;transform:none}}
.about-lead{animation-delay:.08s}.lineage-marker{animation-delay:.15s}.about-signature{animation-delay:.22s}
.lineage-link{display:inline-flex;align-items:center;gap:10px;transition:gap .25s var(--ease-premium),color .25s}
.lineage-link:hover{gap:14px;color:#6f0c13}

/* Consistent reveal motion for page content. */
main>section{animation:sectionReveal .7s var(--ease-premium) both}
.poem-block,.poem-launch-btn,.couplet-slideshow{animation:cardReveal .65s var(--ease-premium) both}

@keyframes heroTitleIn{from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes heroFadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes sectionReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cardReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes aboutContentIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes aboutTextIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(max-width:760px){
 .about-modal{padding:8px}
 .about-panel{width:100%;max-height:96vh;border-radius:18px}
 .about-profile-content{animation:aboutContentMobile .45s var(--ease-premium) both}
 .modal-close{right:11px;top:11px}
 .lang-switcher-btn{min-width:70px}
}
@keyframes aboutContentMobile{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}



/* ================================================================
   SMAAAQ v8 — unified visual system & interaction polish
   ================================================================ */
:root{
  --bg:#ffffff; --panel:#ffffff; --card:#fbfaf8; --text:#171717;
  --muted:#6d7075; --maroon:#9b1c24; --ember:#741018;
  --gold:#c9a24d; --gold-bright:#e0bd69; --parchment:#282421;
  --display:'Cinzel',Georgia,serif; --body:'Source Serif 4',Georgia,serif;
}

/* Consistent page rhythm */
main{background:var(--bg)}
.page-hero,.hero{isolation:isolate}
.page-hero-inner,.hero-content,.section-inner{position:relative;z-index:2}
.page-hero-title,.section-heading h2{font-family:'Cinzel',Georgia,serif;letter-spacing:.015em}
.page-hero-desc{max-width:760px;line-height:1.8;color:rgba(255,255,255,.84)}

/* Premium content cards across every page */
.bio-card,.fact-card,.quote-card,.poem-card,.poem-launch-btn,.home-collection-card,.about-card,.couplet-slideshow{
  position:relative; overflow:hidden;
  border:1px solid #e3e0db;
  box-shadow:0 12px 34px rgba(40,18,18,.055);
}
.bio-card::before,.fact-card::before,.quote-card::before,.poem-card::before,.poem-launch-btn::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:100%;
  background:linear-gradient(180deg,var(--maroon),var(--gold));
  transform:scaleY(.18);transform-origin:top;
  transition:transform .45s cubic-bezier(.22,.8,.22,1);
}
.bio-card:hover::before,.fact-card:hover::before,.quote-card:hover::before,.poem-card:hover::before,.poem-launch-btn:hover::before{transform:scaleY(1)}
.bio-card:hover,.fact-card:hover,.quote-card:hover,.poem-card:hover,.poem-launch-btn:hover{
  transform:translateY(-4px); border-color:#d7c49a;
  box-shadow:0 20px 45px rgba(45,12,16,.09);
}

/* Buttons: one consistent interaction language */
.btn,.poem-launch-btn,.poem-toggle,.menu-toggle,.modal-close,.couplet-slide-btn,.social-link{
  -webkit-tap-highlight-color:transparent;
}
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.16) 50%,transparent 85%);transform:translateX(-120%);transition:transform .65s ease}
.btn:hover::before{transform:translateX(120%)}
.btn:focus-visible,.poem-launch-btn:focus-visible,.couplet-slide-btn:focus-visible,.social-link:focus-visible,.menu-toggle:focus-visible{outline:3px solid rgba(201,162,77,.42);outline-offset:3px}

/* Navigation */
.site-header{backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.primary-nav>a,.primary-nav>button{transition:color .25s ease,transform .25s ease}
.primary-nav>a:hover,.primary-nav>button:hover{transform:translateY(-1px)}
.menu-toggle{position:relative;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.menu-toggle:hover{border-color:#c9a24d;background:#fffaf0;transform:translateY(-1px)}
.menu-toggle span{transform-origin:center}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:980px){
 .primary-nav{z-index:1002;max-height:calc(100vh - 86px);overflow:auto}
 .primary-nav.is-open{animation:navDropPremium .32s cubic-bezier(.22,.8,.22,1) both}
 .primary-nav.is-open>a,.primary-nav.is-open>button{animation:navItemIn .3s both}
 .primary-nav.is-open>*:nth-child(1){animation-delay:.02s}.primary-nav.is-open>*:nth-child(2){animation-delay:.04s}.primary-nav.is-open>*:nth-child(3){animation-delay:.06s}.primary-nav.is-open>*:nth-child(4){animation-delay:.08s}.primary-nav.is-open>*:nth-child(5){animation-delay:.1s}.primary-nav.is-open>*:nth-child(6){animation-delay:.12s}.primary-nav.is-open>*:nth-child(7){animation-delay:.14s}.primary-nav.is-open>*:nth-child(8){animation-delay:.16s}
}
@keyframes navDropPremium{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes navItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* Hero: restrained, cinematic motion */
.hero-title{font-family:'Cinzel',Georgia,serif;text-shadow:0 12px 35px rgba(0,0,0,.45)}
.hero-content{animation:heroContentIn .9s cubic-bezier(.22,.8,.22,1) both}
@keyframes heroContentIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* Poetry controls */
.poem-switch{vertical-align:middle;position:relative}
.poem-toggle{cursor:pointer;will-change:transform}
.poem-toggle.active{border:1px solid rgba(201,162,77,.4)}
.poem-toggle:focus-visible{outline:3px solid rgba(155,28,36,.22);outline-offset:2px}

/* Family tree — crisp, same palette as every other page */
#tree-wrap{max-width:760px!important;padding:1.25rem 1rem 6rem!important}
.tree-item{opacity:0;transform:translateY(16px);filter:none!important;transition:opacity .55s cubic-bezier(.22,.8,.22,1),transform .55s cubic-bezier(.22,.8,.22,1)}
.tree-item.is-visible{opacity:1!important;transform:none!important;filter:none!important}
.tree-item + .tree-item{margin-top:.7rem!important}
.tree-rail{flex:0 0 48px!important}
.tree-spine{left:calc(1rem + 24px)!important;background:linear-gradient(to bottom,transparent,var(--gold) 7%,rgba(201,162,77,.35) 94%,transparent)!important}
.node-num{width:36px!important;height:36px!important;font-family:'Cinzel',Georgia,serif!important;color:#6d7075!important;background:#fff!important;border:1px solid #ddd7cd!important;box-shadow:0 4px 12px rgba(30,10,10,.05);transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease!important}
.node-inner{background:#fff!important;border:1px solid #e2ded7!important;border-radius:14px!important;color:#171717!important;box-shadow:0 8px 22px rgba(35,15,15,.045);transition:transform .35s cubic-bezier(.22,.8,.22,1),box-shadow .35s ease,border-color .3s ease,background .3s ease!important}
.node-name{font-family:'Source Serif 4',Georgia,serif!important;font-size:1rem!important;line-height:1.5!important;color:#252321!important;filter:none!important;text-shadow:none!important;opacity:1!important}
.node-sub{font-family:'Source Serif 4',Georgia,serif!important;color:#956e23!important}
.tree-item.linked .node-num{background:var(--maroon)!important;color:#fff!important;border-color:var(--gold)!important;box-shadow:0 7px 18px rgba(155,28,36,.18)!important}
.tree-item.linked .node-name{color:var(--maroon)!important;font-weight:700!important}
a.node-inner:hover{transform:translateX(6px)!important;border-color:#c9a24d!important;box-shadow:0 16px 32px rgba(60,20,20,.09)!important;background:linear-gradient(135deg,#fff,#fffaf0)!important}
a.node-inner:hover .node-num{transform:scale(1.05);box-shadow:0 9px 20px rgba(155,28,36,.22)!important}
.tree-item.final .node-inner{border-color:#c9a24d!important;background:linear-gradient(135deg,#fff,#fff9ee)!important}
.tree-item.final .node-name{color:#252321!important}

/* The 19th-generation profile page follows the same system */
#sadr-ud-deen .bio-section:nth-of-type(even){background:#f8f7f5}
#sadr-ud-deen .fact-table tr{transition:background .25s ease}
#sadr-ud-deen .fact-table tr:hover{background:#fffaf0}
#sadr-ud-deen .bio-closing{border-left:3px solid var(--gold);padding:1rem 1.25rem;background:linear-gradient(90deg,#fff9ed,#fff);box-shadow:0 10px 25px rgba(50,20,10,.05)}

/* Global section entrance without blur */
.reveal{filter:none!important}

@media(max-width:640px){
 .page-hero-title{font-size:clamp(1.8rem,8vw,2.65rem)!important;line-height:1.2}
 .page-hero-desc{font-size:.9rem}
 #tree-wrap{padding-left:.4rem!important;padding-right:.4rem!important}
 .tree-rail{flex-basis:40px!important}
 .tree-spine{left:calc(.4rem + 20px)!important}
 .node-inner{padding:.8rem .85rem!important}
 .node-name{font-size:.9rem!important}
}


/* =========================================================
   SMAAAQ FINAL UI SYSTEM — page consistency + alignment pass
   ========================================================= */
:root{
  --red:#941923;
  --red-dark:#681019;
  --gold:#c9a24d;
  --gold-light:#e8d29a;
  --ink:#171719;
  --muted:#686b70;
  --surface:#f7f7f5;
  --white:#fff;
  --line:#e2e2e4;
  --shadow-soft:0 12px 36px rgba(25,18,18,.07);
  --shadow-deep:0 24px 70px rgba(25,18,18,.12);
  --ease-pro:cubic-bezier(.22,.8,.22,1);
}

body{overflow-x:hidden;overflow-x:clip;background:var(--white)}
a,button{ -webkit-tap-highlight-color:transparent }
button{font:inherit}

/* ---------- Shared page frame ---------- */
.section-inner,.page-hero-inner{width:min(1160px,calc(100% - 48px));margin-inline:auto}
.poetry-section,.bio-section,.about-teaser{padding-block:84px}
.section-heading{margin-bottom:38px}
.section-heading h2{letter-spacing:-.02em}

/* ---------- Page hero ---------- */
.page-hero{padding:72px 0 76px;background:
  radial-gradient(circle at 85% 20%,rgba(201,162,77,.16),transparent 30%),
  linear-gradient(135deg,#5f0e15 0%,#941923 52%,#731018 100%);
}
.page-hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.025),transparent)}
.page-hero-inner{z-index:2}
.page-hero-title{font-family:var(--serif);font-weight:700;letter-spacing:-.025em}
.page-hero-desc{font-size:1rem;line-height:1.75}

/* ---------- Proper breadcrumb / Back Home control ---------- */
.breadcrumb-trail,.breadcrumb{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  width:max-content;max-width:100%;
  margin:0 0 28px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  box-shadow:0 8px 22px rgba(0,0,0,.08);
  backdrop-filter:blur(8px);
}
.breadcrumb-trail a,.breadcrumb a{
  display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 13px;
  color:rgba(255,255,255,.82);text-decoration:none;
  border-radius:999px;
  transition:color .25s var(--ease-pro),background .25s var(--ease-pro),transform .25s var(--ease-pro);
}
.breadcrumb-trail a:first-child,.breadcrumb a:first-child{background:rgba(255,255,255,.10);color:#fff}
.breadcrumb-trail a:hover,.breadcrumb a:hover{color:#fff;background:rgba(255,255,255,.16);transform:translateY(-1px)}
.breadcrumb-home-icon{font-size:1rem;line-height:1}
.crumb-sep{color:rgba(255,255,255,.4);font-size:1rem}

/* ---------- Poem reader: one centered column, no accidental nesting widths ---------- */
.poetry-section.poem-reader{max-width:none;margin:0;padding:72px 0 100px;background:var(--surface)}
.poem-reader>.section-inner{width:min(960px,calc(100% - 48px));margin-inline:auto}
.poem-card{overflow:hidden;border-radius:22px;box-shadow:var(--shadow-deep);border-color:#dddfe2}
.poem-card-header{padding:30px 32px 24px;align-items:center;background:linear-gradient(180deg,#fff,#fcfcfb)}
.poem-card-header-text{min-width:0}
.poem-card-title{margin:6px 0 0;line-height:1.25;letter-spacing:-.02em}

/* Back-to-section button inside poems */
.poem-back-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:0 15px;
  border:1px solid #e0c988;border-radius:999px;
  color:var(--red);background:#fffaf0;text-decoration:none;
  font:800 .74rem var(--sans);letter-spacing:.045em;text-transform:uppercase;
  box-shadow:0 7px 18px rgba(100,45,15,.07);
  transition:transform .28s var(--ease-pro),box-shadow .28s var(--ease-pro),background .28s,color .28s,border-color .28s;
}
.poem-back-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .28s var(--ease-pro)}
.poem-back-btn:hover{transform:translateY(-2px);background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 12px 26px rgba(111,16,25,.18)}
.poem-back-btn:hover svg{transform:translateX(-3px)}
.poem-back-btn:active{transform:translateY(0) scale(.98)}

/* ---------- Correct the poem language switcher ---------- */
.poem-card>.poem-toggle{
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:max-content;max-width:calc(100% - 48px);
  margin:22px auto 10px;padding:4px;
  border:1px solid #e1d6c0;border-radius:13px;
  background:linear-gradient(135deg,#fff,#fbf7ef);
  box-shadow:0 8px 22px rgba(60,30,15,.07);
}
.poem-card>.poem-toggle>button{
  position:relative;min-width:92px;min-height:40px;padding:0 15px;
  border:0;border-radius:9px;background:transparent;color:#6a6763;cursor:pointer;
  font:800 .72rem var(--sans);letter-spacing:.045em;
  transition:transform .25s var(--ease-pro),background .25s var(--ease-pro),color .25s var(--ease-pro),box-shadow .25s var(--ease-pro);
}
.poem-card>.poem-toggle>button:hover{color:var(--red);background:#fff1ef;transform:translateY(-1px)}
.poem-card>.poem-toggle>button.active{color:#fff;background:linear-gradient(135deg,var(--red),var(--red-dark));box-shadow:0 7px 17px rgba(110,16,25,.2)}
.poem-card>.poem-toggle>button.active:after{content:"";position:absolute;left:50%;bottom:4px;width:16px;height:2px;border-radius:2px;background:var(--gold-light);transform:translateX(-50%)}
.poem-block{margin:18px 32px 32px;padding:34px 42px;border-radius:17px;background:#fff;border-color:#e1e1e3;box-shadow:0 8px 25px rgba(20,20,20,.035)}
.poem-lang p{margin:0 0 1.2em}
.poem-lang p:last-child{margin-bottom:0}

/* ---------- Archive/list pages ---------- */
.poem-launch-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px}
.poem-launch-btn{min-height:150px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.poem-launch-btn:after{content:"→";position:absolute;right:22px;bottom:18px;color:var(--gold);font-size:1.35rem;transition:transform .3s var(--ease-pro),color .3s}
.poem-launch-btn:hover:after{transform:translateX(5px);color:var(--red)}
.poem-launch-title{line-height:1.35;padding-right:35px}

/* ---------- Facts / cards ---------- */
.bio-grid,.quote-grid{align-items:stretch}
.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card{height:100%}
.bio-card{display:flex;flex-direction:column}
.bio-card p{line-height:1.8}
.fact-table{box-shadow:var(--shadow-soft)}
.fact-table td{vertical-align:top;line-height:1.65}

/* ---------- Family tree ---------- */
.family-tree-container{box-shadow:var(--shadow-soft);padding:30px}
.lineage-link{transition:color .25s var(--ease-pro),transform .25s var(--ease-pro)}
.lineage-link:hover{transform:translateX(3px)}

/* ---------- Global interaction polish ---------- */
.btn,.poem-launch-btn,.bio-card,.fact-card,.quote-card,.couplet-poem-card,.about-card,.social-link{will-change:transform}
.btn:focus-visible,.poem-back-btn:focus-visible,.poem-card>.poem-toggle>button:focus-visible,.breadcrumb-trail a:focus-visible{outline:3px solid rgba(201,162,77,.45);outline-offset:3px}

/* ---------- Responsive alignment ---------- */
@media(max-width:760px){
  .section-inner,.page-hero-inner{width:min(100% - 28px,1160px)}
  .poetry-section,.bio-section,.about-teaser{padding-block:64px}
  .page-hero{padding:58px 0 64px}
  .breadcrumb-trail,.breadcrumb{margin-bottom:22px;padding:5px 6px}
  .breadcrumb-trail a,.breadcrumb a{min-height:32px;padding:0 11px;font-size:.72rem}
  .poetry-section.poem-reader{padding:58px 0 78px}
  .poem-reader>.section-inner{width:min(100% - 28px,960px)}
  .poem-card-header{padding:24px 20px 18px;gap:16px;align-items:flex-start}
  .poem-card-header-text{flex:1}
  .poem-card-title{font-size:1.35rem}
  .poem-back-btn{min-height:38px;padding:0 12px;font-size:.68rem}
  .poem-card>.poem-toggle{max-width:calc(100% - 32px);margin:18px auto 8px}
  .poem-card>.poem-toggle>button{min-width:82px;min-height:38px;padding:0 12px}
  .poem-block{margin:16px 16px 20px;padding:25px 18px}
  .poem-launch-grid{grid-template-columns:1fr;gap:14px}
  .poem-launch-btn{min-height:125px;padding:22px}
  .family-tree-container{padding:18px}
}
@media(max-width:480px){
  .poem-card-header{display:flex;flex-direction:column}
  .poem-back-btn{align-self:flex-start}
  .poem-card>.poem-toggle{width:calc(100% - 32px);max-width:none}
  .poem-card>.poem-toggle>button{flex:1;min-width:0}
  .poem-block{margin-inline:10px}
}



/* =========================================================
   FINAL ACTION BUTTON SYSTEM
   One visual language for primary navigation actions
   ========================================================= */
:root{
  --action-bg:#fffaf0;
  --action-border:#dfc27a;
  --action-text:#8d1821;
  --action-hover:#8f1720;
  --action-shadow:0 8px 22px rgba(93,31,25,.09);
}

.btn,
.poem-back-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:44px;
  padding:0 17px;
  border:1px solid var(--action-border);
  border-radius:999px;
  background:linear-gradient(180deg,#fffdf8 0%,var(--action-bg) 100%);
  color:var(--action-text);
  text-decoration:none;
  font:800 .74rem/1 var(--sans);
  letter-spacing:.055em;
  text-transform:uppercase;
  box-shadow:var(--action-shadow);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:transform .28s var(--ease-pro),
             color .28s var(--ease-pro),
             background .28s var(--ease-pro),
             border-color .28s var(--ease-pro),
             box-shadow .28s var(--ease-pro);
}

.btn::before,
.poem-back-btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .65s var(--ease-pro);
  z-index:-1;
}

.btn:hover,
.poem-back-btn:hover{
  transform:translateY(-2px);
  color:#fff;
  background:linear-gradient(135deg,var(--action-hover),#6f1018);
  border-color:var(--action-hover);
  box-shadow:0 14px 30px rgba(111,16,25,.20);
}

.btn:hover::before,
.poem-back-btn:hover::before{transform:translateX(120%)}

.btn:active,
.poem-back-btn:active{transform:translateY(0) scale(.985)}

.btn svg,
.poem-back-btn svg{
  width:17px;
  height:17px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  transition:transform .28s var(--ease-pro);
}

.btn:hover svg,
.poem-back-btn:hover svg{transform:translateX(-3px)}

/* Home/category breadcrumb acts like a secondary action, not a plain text link. */
.breadcrumb-trail,
.breadcrumb{
  width:max-content;
  max-width:100%;
  padding:5px;
  gap:5px;
  border:1px solid rgba(223,194,122,.42);
  border-radius:999px;
  background:rgba(255,255,255,.075);
  box-shadow:0 8px 24px rgba(0,0,0,.08);
}

.breadcrumb-trail a,
.breadcrumb a{
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  font-weight:800;
  letter-spacing:.035em;
  transition:transform .28s var(--ease-pro),background .28s var(--ease-pro),color .28s var(--ease-pro),box-shadow .28s var(--ease-pro);
}

.breadcrumb-trail a:first-child,
.breadcrumb a:first-child{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.10);
}

.breadcrumb-trail a:hover,
.breadcrumb a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.18);
  box-shadow:0 8px 18px rgba(0,0,0,.10);
}

/* Archive cards remain cards; their arrow action now uses the same gold/red language. */
.poem-launch-btn{
  border-color:#e3ddd4;
}
.poem-launch-btn:after{
  width:32px;
  height:32px;
  right:18px;
  bottom:16px;
  display:grid;
  place-items:center;
  border:1px solid var(--action-border);
  border-radius:50%;
  background:var(--action-bg);
  color:var(--action-text);
  font-size:1rem;
  transition:transform .28s var(--ease-pro),background .28s var(--ease-pro),color .28s var(--ease-pro),border-color .28s var(--ease-pro);
}
.poem-launch-btn:hover:after{
  transform:translateX(4px) scale(1.05);
  background:var(--action-hover);
  color:#fff;
  border-color:var(--action-hover);
}

/* Standardize focus rings across all action controls. */
.btn:focus-visible,
.poem-back-btn:focus-visible,
.poem-launch-btn:focus-visible,
.breadcrumb-trail a:focus-visible,
.breadcrumb a:focus-visible{
  outline:3px solid rgba(201,162,77,.45);
  outline-offset:3px;
}

@media(max-width:480px){
  .btn,.poem-back-btn{
    min-height:42px;
    padding-inline:14px;
    font-size:.69rem;
  }
  .breadcrumb-trail,
  .breadcrumb{max-width:100%;}
  .breadcrumb-trail a,
  .breadcrumb a{padding-inline:11px;font-size:.68rem;}
}



/* =========================================================
   UNIVERSAL ACTION LANGUAGE — V11
   Apply the same premium red + gold interaction language
   to every page-specific action without changing utility controls.
   ========================================================= */

/* Family Tree linked nodes: same action treatment, card geometry retained. */
a.node-inner{
  position:relative;
  border:1px solid var(--action-border)!important;
  background:linear-gradient(180deg,#fffdf8 0%,var(--action-bg) 100%)!important;
  color:var(--action-text)!important;
  box-shadow:var(--action-shadow)!important;
  overflow:hidden;
}
a.node-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.42) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform .55s var(--ease-pro);
  pointer-events:none;
}
a.node-inner:hover{
  transform:translateX(6px)!important;
  border-color:var(--action-hover)!important;
  background:linear-gradient(135deg,var(--action-hover),#6f1018)!important;
  color:#fff!important;
  box-shadow:0 14px 30px rgba(111,16,25,.20)!important;
}
a.node-inner:hover::before{transform:translateX(120%)}
a.node-inner:hover .node-name{color:#fff!important}
a.node-inner:hover .node-arrow{color:#fff;transform:translateX(4px)}

/* Archive / collection launch controls use the same red + gold action language
   while remaining larger content cards rather than becoming tiny pills. */
.poem-launch-btn{
  border-color:var(--action-border)!important;
  background:linear-gradient(180deg,#fffdf8 0%,var(--action-bg) 100%)!important;
  box-shadow:var(--action-shadow)!important;
}
.poem-launch-btn:hover{
  color:#fff!important;
  border-color:var(--action-hover)!important;
  background:linear-gradient(135deg,var(--action-hover),#6f1018)!important;
  box-shadow:0 14px 30px rgba(111,16,25,.20)!important;
}
.poem-launch-btn:hover .poem-launch-title,
.poem-launch-btn:hover .poem-launch-sub{color:#fff!important}
.poem-launch-btn:hover .poem-launch-sub{opacity:.84}
.poem-launch-btn:hover:after{
  background:#fff!important;
  color:var(--action-hover)!important;
  border-color:#fff!important;
}

/* Language/poem selector buttons use the same palette, but keep segmented-control UX. */
.poem-card>.poem-toggle>button,
.poem-toggle{
  border-color:var(--action-border);
}
.poem-card>.poem-toggle>button:hover,
.poem-toggle:hover{
  color:var(--action-text);
  background:#fff4df;
}
.poem-card>.poem-toggle>button.active,
.poem-toggle.active{
  background:linear-gradient(135deg,var(--action-hover),#6f1018)!important;
  border-color:var(--action-hover)!important;
  color:#fff!important;
}

/* Small inline lineage/action links also inherit the visual language. */
.lineage-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:0 13px;
  border:1px solid var(--action-border);
  border-radius:999px;
  background:var(--action-bg);
  color:var(--action-text)!important;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(93,31,25,.07);
}
.lineage-link:hover{
  transform:translateY(-2px);
  color:#fff!important;
  background:var(--action-hover);
  border-color:var(--action-hover);
  box-shadow:0 10px 22px rgba(111,16,25,.16);
}

/* Consistent focus treatment for every content/action control. */
a.node-inner:focus-visible,
.lineage-link:focus-visible,
.poem-launch-btn:focus-visible,
.poem-card>.poem-toggle>button:focus-visible{
  outline:3px solid rgba(201,162,77,.45);
  outline-offset:3px;
}



/* ================================================================
   SMAAAQ v13 — MASTER ACTION SYSTEM
   One visual language for every user-facing action across every page.
   ================================================================ */
:root{
  --master-action-bg:#fffaf0;
  --master-action-border:#dfc27a;
  --master-action-text:#8d1821;
  --master-action-hover:#8f1720;
  --master-action-shadow:0 7px 20px rgba(93,31,25,.09);
}

/* Primary action buttons — this is the canonical SMAAAQ button. */
.btn,
.btn.btn-outline,
.poem-back-btn,
.poem-launch-btn,
a.lineage-link,
a.node-inner,
.breadcrumb-trail a,
a.breadcrumb,
.couplet-view-all{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:44px!important;
  padding:0 17px!important;
  border:1px solid var(--master-action-border)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffdf8 0%,var(--master-action-bg) 100%)!important;
  color:var(--master-action-text)!important;
  text-decoration:none!important;
  box-shadow:var(--master-action-shadow)!important;
  font-weight:700!important;
  transition:transform .28s var(--ease-pro),background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease!important;
  overflow:hidden;
}

.btn::before,
.poem-back-btn::before,
.poem-launch-btn::before,
a.lineage-link::before,
a.node-inner::before,
a.breadcrumb::before,
.breadcrumb-trail a::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.48) 50%,transparent 82%);
  transform:translateX(-125%);
  transition:transform .6s ease;
  pointer-events:none;
}

.btn:hover,
.btn.btn-outline:hover,
.poem-back-btn:hover,
.poem-launch-btn:hover,
a.lineage-link:hover,
a.node-inner:hover,
a.breadcrumb:hover,
.breadcrumb-trail a:hover,
.couplet-view-all:hover{
  transform:translateY(-2px)!important;
  background:linear-gradient(135deg,var(--master-action-hover),#6f1018)!important;
  border-color:var(--master-action-hover)!important;
  color:#fff!important;
  box-shadow:0 13px 28px rgba(111,16,25,.20)!important;
}

.btn:hover::before,
.poem-back-btn:hover::before,
.poem-launch-btn:hover::before,
a.lineage-link:hover::before,
a.node-inner:hover::before,
a.breadcrumb:hover::before,
.breadcrumb-trail a:hover::before{transform:translateX(125%)}

.btn:active,
.poem-back-btn:active,
.poem-launch-btn:active,
a.lineage-link:active,
a.node-inner:active,
a.breadcrumb:active,
.breadcrumb-trail a:active,
.couplet-view-all:active{transform:translateY(0) scale(.985)!important}

/* Collection cards retain their larger touch target, but use the exact same
   action palette and interaction language. */
.poem-launch-btn{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  min-height:78px!important;
  padding:22px 24px!important;
  border-radius:18px!important;
}
.poem-launch-btn .poem-launch-title,
.poem-launch-btn .poem-launch-sub{color:inherit!important}

/* Family Tree: linked generations use the same canonical action treatment. */
a.node-inner,
button.node-inner{
  border:1px solid var(--master-action-border)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#fffdf8 0%,var(--master-action-bg) 100%)!important;
  color:var(--master-action-text)!important;
  box-shadow:var(--master-action-shadow)!important;
}
a.node-inner .node-name,
button.node-inner .node-name{color:var(--master-action-text)!important}
a.node-inner .node-arrow,
button.node-inner .node-arrow{color:var(--master-action-text)!important}
a.node-inner:hover .node-name,
button.node-inner:hover .node-name,
a.node-inner:hover .node-arrow,
button.node-inner:hover .node-arrow{color:#fff!important}

/* Breadcrumbs are actions too — never revert to the old transparent style. */
.breadcrumb-trail,
.breadcrumb{gap:7px!important}
.breadcrumb-trail a:first-child,
.breadcrumb a:first-child{background:linear-gradient(180deg,#fffdf8 0%,var(--master-action-bg) 100%)!important;color:var(--master-action-text)!important}

/* Poetry language controls: same red/gold visual system, compact segmented UX. */
.poem-card>.poem-toggle,
.poem-toggle{
  display:flex!important;
  gap:5px!important;
  padding:4px!important;
  border:1px solid var(--master-action-border)!important;
  border-radius:999px!important;
  background:#fffaf0!important;
}
.poem-card>.poem-toggle>button,
.poem-toggle>button{
  min-height:36px!important;
  padding:0 13px!important;
  border:1px solid transparent!important;
  border-radius:999px!important;
  background:transparent!important;
  color:var(--master-action-text)!important;
  font-weight:700!important;
  transition:all .25s ease!important;
}
.poem-card>.poem-toggle>button:hover,
.poem-toggle>button:hover{background:#fff0d5!important;border-color:var(--master-action-border)!important}
.poem-card>.poem-toggle>button.active,
.poem-toggle>button.active{background:linear-gradient(135deg,var(--master-action-hover),#6f1018)!important;color:#fff!important;border-color:var(--master-action-hover)!important}

/* Homepage slideshow controls use the same palette; their circular geometry is
   intentionally preserved for directional affordance. */
.couplet-slide-btn{
  border:1px solid var(--master-action-border)!important;
  background:linear-gradient(180deg,#fffdf8 0%,var(--master-action-bg) 100%)!important;
  color:var(--master-action-text)!important;
  box-shadow:var(--master-action-shadow)!important;
}
.couplet-slide-btn:hover{background:linear-gradient(135deg,var(--master-action-hover),#6f1018)!important;color:#fff!important;border-color:var(--master-action-hover)!important}

/* About/profile action card and footer social actions share the same palette. */
.about-card,
.social-link{
  border-color:var(--master-action-border)!important;
}
.about-card:hover{border-color:var(--master-action-hover)!important}
.social-link:hover{border-color:var(--master-action-hover)!important;background:var(--master-action-hover)!important;color:#fff!important}

/* All content action focus states. */
.btn:focus-visible,
.poem-back-btn:focus-visible,
.poem-launch-btn:focus-visible,
a.lineage-link:focus-visible,
a.node-inner:focus-visible,
.breadcrumb-trail a:focus-visible,
a.breadcrumb:focus-visible,
.couplet-slide-btn:focus-visible,
.couplet-view-all:focus-visible,
.poem-toggle>button:focus-visible{
  outline:3px solid rgba(201,162,77,.45)!important;
  outline-offset:3px!important;
}

@media(max-width:640px){
  .btn,.btn.btn-outline,.poem-back-btn,a.lineage-link,a.node-inner,.breadcrumb-trail a,a.breadcrumb,.couplet-view-all{
    min-height:42px!important;
    padding-inline:14px!important;
    font-size:.72rem!important;
  }
  .poem-launch-btn{min-height:72px!important;padding:18px!important;border-radius:16px!important}
  .poem-card>.poem-toggle>button,.poem-toggle>button{min-height:34px!important;padding-inline:11px!important}
}

/* v14 hero + smoothness */
html{scroll-behavior:smooth}
body{overflow-x:hidden;overflow-x:clip}
a,button,.btn,.poem-back-btn,.home-collection-card,.poem-launch-btn,.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card,.tree-item,.node-inner{transition:transform .32s cubic-bezier(.22,.8,.22,1),background-color .32s ease,border-color .32s ease,box-shadow .32s ease,color .25s ease,opacity .32s ease}
.hero-video{will-change:transform}
@media(max-width:640px){.hero-content{transform:translateY(32px)}}

/* v15 — Hero title placement: move the name clearly below the visual centre. */
.hero-content{
  transform:translateY(118px)!important;
}
@media(max-width:640px){
  .hero-content{
    transform:translateY(78px)!important;
  }
}


/* v17 — premium entrance + living hero identity */
body{animation:siteOpening .9s cubic-bezier(.22,.8,.22,1) both}
.site-header{animation:headerOpening .8s cubic-bezier(.22,.8,.22,1) .05s both}
.hero-video{animation:heroVideoOpening 1.4s cubic-bezier(.22,.8,.22,1) both}
.hero-scrim,.hero-vignette{animation:heroAtmosphereOpening 1.2s ease both}
.hero-content{animation:heroContentOpening 1.05s cubic-bezier(.22,.8,.22,1) .12s both!important}
.hero-title{
  animation:heroTitleEntrance 1.25s cubic-bezier(.22,.8,.22,1) .25s both, heroTitleBreath 5.5s ease-in-out 1.8s infinite!important;
  transform-origin:center center;
}
.hero-subtitle{animation:heroSubtitleEntrance .9s cubic-bezier(.22,.8,.22,1) .65s both!important}
.imran-link{
  position:relative;display:inline-block;
  margin:0 .08em;
  padding:0 .08em;
  color:#f0cf7b!important;
  font-weight:800;
  letter-spacing:.015em;
  text-decoration:none!important;
  border:0!important;
  border-bottom:1px solid rgba(240,207,123,.6)!important;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
  transition:color .25s ease,transform .25s ease,border-color .25s ease,text-shadow .25s ease;
  cursor:pointer;
}
.imran-link:after{content:none!important}
.imran-link:before{
  content:'';position:absolute;left:0;right:0;bottom:-3px;height:2px;
  border:0!important;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,#f0cf7b,transparent);
  opacity:.35;transform:scaleX(.55);
  transition:opacity .25s ease,transform .25s ease;
}
.imran-link:hover,.imran-link:focus-visible{
  color:#ffe29a!important;
  transform:translateY(-1px);
  border-bottom-color:#f0cf7b!important;
  text-shadow:0 0 14px rgba(201,162,77,.35);
}
.imran-link:hover:before,.imran-link:focus-visible:before{opacity:.9;transform:scaleX(1)}
.imran-link:active{transform:translateY(0) scale(.98);}
@keyframes siteOpening{from{opacity:0}to{opacity:1}}
@keyframes headerOpening{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes heroVideoOpening{from{opacity:.35;transform:scale(1.035)}to{opacity:.9;transform:scale(1)}}
@keyframes heroAtmosphereOpening{from{opacity:0}to{opacity:1}}
@keyframes heroContentOpening{from{opacity:0;transform:translateY(155px) scale(.985)}to{opacity:1;transform:translateY(118px) scale(1)}}
@keyframes heroTitleEntrance{from{opacity:0;transform:translateY(34px) scale(.94);letter-spacing:.06em;filter:blur(7px)}to{opacity:1;transform:translateY(0) scale(1);letter-spacing:.015em;filter:blur(0)}}
@keyframes heroTitleBreath{0%,100%{text-shadow:0 12px 35px rgba(0,0,0,.45),0 0 0 rgba(201,162,77,0);transform:scale(1)}50%{text-shadow:0 14px 40px rgba(0,0,0,.5),0 0 24px rgba(201,162,77,.2);transform:scale(1.012)}}
@keyframes heroSubtitleEntrance{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes imranGlow{0%,100%{transform:scale(.98);border-color:rgba(240,207,123,0);box-shadow:0 0 0 rgba(201,162,77,0)}50%{transform:scale(1.035);border-color:rgba(240,207,123,.55);box-shadow:0 0 20px rgba(201,162,77,.22)}}
@media(max-width:640px){
 .hero-content{animation:heroContentOpeningMobile 1.05s cubic-bezier(.22,.8,.22,1) .12s both!important;transform:translateY(78px)!important}
 .hero-title{animation:heroTitleEntranceMobile 1.1s cubic-bezier(.22,.8,.22,1) .25s both,heroTitleBreath 5.5s ease-in-out 1.7s infinite!important}
 .imran-link{padding:.18em .58em .22em}
}
@keyframes heroContentOpeningMobile{from{opacity:0;transform:translateY(112px) scale(.985)}to{opacity:1;transform:translateY(78px) scale(1)}}
@keyframes heroTitleEntranceMobile{from{opacity:0;transform:translateY(26px) scale(.95);letter-spacing:.04em;filter:blur(6px)}to{opacity:1;transform:translateY(0) scale(1);letter-spacing:.015em;filter:blur(0)}}

/* v18 — refined hero positioning + selected couplets showcase */
.hero{min-height:680px}
.hero-content{
  position:absolute!important;
  left:50%;
  bottom:72px!important;
  transform:translateX(-50%)!important;
  padding:0!important;
  width:min(920px,calc(100% - 36px));
}
.hero-title{margin:0!important}
.hero-subtitle{margin-top:12px!important}
@media(max-width:640px){
  .hero{min-height:590px}
  .hero-content{bottom:46px!important;width:calc(100% - 28px)}
}

/* Selected Couplets — premium showcase */
.couplet-slideshow-section{background:var(--white)}
.couplet-slideshow{
  min-height:310px!important;
  padding:68px clamp(62px,10vw,130px)!important;
  border:1px solid rgba(201,162,77,.38)!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 50% 0%,rgba(201,162,77,.11),transparent 42%),
    linear-gradient(145deg,#fff,#fbfaf7)!important;
  box-shadow:0 20px 55px rgba(65,38,12,.10),0 2px 0 rgba(255,255,255,.9) inset!important;
  overflow:visible!important;
}
.couplet-slideshow:before{
  top:22px!important;left:30px!important;
  color:rgba(201,162,77,.38)!important;
  font-size:6rem!important;
}
.couplet-slideshow:after{
  content:'';position:absolute;inset:10px;border:1px solid rgba(201,162,77,.12);
  border-radius:18px;pointer-events:none;
}
.couplet-slideshow-text{position:relative;z-index:2;max-width:820px}
.couplet-slideshow-body{
  color:#3b1115;
  text-shadow:0 2px 12px rgba(80,30,10,.06);
  animation:coupletTextIn .55s cubic-bezier(.22,.8,.22,1) both;
}
.couplet-slideshow-controls{left:16px!important;right:16px!important;z-index:4}
.couplet-slide-btn{
  width:48px!important;height:48px!important;
  border:1px solid #dfc27a!important;
  background:#fffaf0!important;color:#8d1821!important;
  box-shadow:0 8px 22px rgba(80,35,10,.10)!important;
}
.couplet-slide-btn:hover{background:linear-gradient(135deg,#9b1c24,#74131a)!important;color:#fff!important;border-color:#9b1c24!important;transform:translateY(-2px) scale(1.05)!important}
.couplet-slide-dots{top:calc(100% + 24px)!important;gap:9px!important}
.couplet-slide-dots button{width:8px!important;height:8px!important;background:#d8c9a6!important;transition:.25s ease!important}
.couplet-slide-dots button.active{width:24px!important;border-radius:999px!important;background:#9b1c24!important;transform:none!important}
.couplet-view-all{margin-top:48px}
@keyframes coupletTextIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:640px){
 .couplet-slideshow{min-height:270px!important;padding:62px 42px!important;border-radius:20px!important}
 .couplet-slideshow:before{left:18px!important;top:18px!important;font-size:4.5rem!important}
 .couplet-slide-btn{width:42px!important;height:42px!important}
 .couplet-slideshow-controls{left:7px!important;right:7px!important}
}

/* v19 — Selected Couplets slideshow: editorial / premium reader UI */
.couplet-slideshow-section{padding-top:96px;padding-bottom:112px}
.couplet-slideshow-section .section-heading{margin-bottom:30px}
.couplet-slideshow{
  position:relative!important;
  min-height:390px!important;
  padding:34px clamp(28px,7vw,86px) 28px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:space-between!important;
  border:1px solid rgba(166,125,47,.34)!important;
  border-radius:26px!important;
  background:linear-gradient(145deg,#fffefa 0%,#faf7ef 100%)!important;
  box-shadow:0 26px 70px rgba(47,29,8,.11), inset 0 1px 0 rgba(255,255,255,.95)!important;
  overflow:hidden!important;
}
.couplet-slideshow:before{content:'“'!important;left:auto!important;right:24px!important;top:-8px!important;font-size:9rem!important;line-height:1!important;color:rgba(181,140,57,.12)!important;z-index:0!important}
.couplet-slideshow:after{inset:9px!important;border:1px solid rgba(181,140,57,.16)!important;border-radius:19px!important}
.couplet-slideshow-head{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-bottom:18px;border-bottom:1px solid rgba(141,24,33,.10)}
.couplet-slideshow-kicker{font:700 .68rem/1 var(--sans);letter-spacing:.18em;color:var(--red);text-transform:uppercase}
.couplet-slideshow-count{font:600 .72rem/1 var(--sans);letter-spacing:.12em;color:#8b7b61}
.couplet-slideshow-text{position:relative;z-index:2;max-width:880px;width:100%;margin:auto;text-align:center;padding:25px 30px 20px}
.couplet-slideshow-title{font-family:var(--serif);font-size:clamp(.82rem,1.3vw,1rem);font-weight:700;letter-spacing:.04em;color:#8d1821;margin:0 0 22px}
.couplet-slideshow-title:after{content:'';display:block;width:46px;height:2px;margin:12px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.couplet-slideshow-body{font-family:var(--urdu);font-size:clamp(1.55rem,3vw,2.5rem)!important;line-height:1.95!important;color:#2d2020!important;text-shadow:none!important;margin:0!important;min-height:128px;display:grid;place-items:center;animation:coupletTextIn .55s cubic-bezier(.22,.8,.22,1) both}
.couplet-slideshow-footer{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:28px;padding-top:18px;border-top:1px solid rgba(141,24,33,.10)}
.couplet-slideshow-controls{position:static!important;transform:none!important;display:flex!important;align-items:center;gap:10px;pointer-events:auto!important;order:2}
.couplet-slide-btn{width:44px!important;height:44px!important;border:1px solid #dfc27a!important;background:#fffaf0!important;color:#8d1821!important;box-shadow:0 8px 20px rgba(80,35,10,.08)!important;display:grid!important;place-items:center!important}
.couplet-slide-btn:hover{background:linear-gradient(135deg,#9b1c24,#74131a)!important;color:#fff!important;border-color:#9b1c24!important;transform:translateY(-2px)!important}
.couplet-slide-dots{position:static!important;transform:none!important;display:flex!important;align-items:center;justify-content:center;gap:7px!important;order:1}
.couplet-slide-dots button{width:6px!important;height:6px!important;border:0!important;padding:0!important;border-radius:99px!important;background:#d5c7aa!important;cursor:pointer;transition:width .3s ease,background-color .3s ease,transform .3s ease!important}
.couplet-slide-dots button.active{width:22px!important;background:#9b1c24!important;transform:none!important}
.couplet-view-all{margin-top:34px!important}
@media(max-width:640px){
 .couplet-slideshow-section{padding-top:70px;padding-bottom:88px}
 .couplet-slideshow{min-height:360px!important;padding:24px 18px 20px!important;border-radius:20px!important}
 .couplet-slideshow:before{font-size:7rem!important;right:8px!important}
 .couplet-slideshow-head{padding-bottom:14px}
 .couplet-slideshow-text{padding:20px 12px 14px}
 .couplet-slideshow-title{font-size:.75rem;margin-bottom:16px}
 .couplet-slideshow-body{font-size:1.28rem!important;line-height:2!important;min-height:132px}
 .couplet-slideshow-footer{gap:14px;flex-wrap:wrap;padding-top:15px}
 .couplet-slide-btn{width:40px!important;height:40px!important}
 .couplet-slide-dots{max-width:210px;flex-wrap:wrap;row-gap:8px}
}

/* v20 — Selected Couplets: quote-first presentation */
.couplet-slideshow-section .couplet-slideshow-head{display:none!important}
.couplet-slideshow-section .couplet-slideshow-text{min-height:clamp(220px,26vw,320px);display:flex;align-items:center;justify-content:center;text-align:center;margin:0;padding:clamp(30px,5vw,64px) clamp(24px,7vw,92px)}
.couplet-slideshow-section .couplet-slideshow-body{width:100%;margin:0;font-size:clamp(1.35rem,2.2vw,2.05rem);line-height:2.05;letter-spacing:.01em}
.couplet-slideshow-section .couplet-slideshow-footer{margin-top:0}

/* ================================================================
   SMAAAQ v21 — Selected Couplets page alignment repair
   ================================================================ */
.couplet-poem-grid{
  width:min(1120px,100%);
  margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  align-items:stretch;
}
.couplet-poem-card{
  min-width:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:20px;
  text-align:left;
}
.couplet-poem-top{
  min-height:76px;
  display:flex;
  align-items:center;
  padding:20px 24px 14px;
  border-bottom:1px solid #eee7dc;
  background:linear-gradient(180deg,#fffdf9 0%,#fff 100%);
}
.couplet-poem-top .poem-tag{
  display:block;
  width:100%;
  margin:0;
  color:#8d1821;
  font-family:var(--sans);
  font-size:.68rem;
  font-weight:800;
  line-height:1.55;
  letter-spacing:.075em;
  text-align:left;
  text-transform:none;
}
.couplet-poem-card>.poem-toggle{
  align-self:flex-start;
  margin:16px 24px 0;
}
.couplet-poem-card .poem-block{
  flex:1;
  width:auto;
  margin:14px 18px 20px;
  padding:28px 30px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:150px;
  background:linear-gradient(180deg,#fff 0%,#fffdf9 100%);
  border:1px solid #e8e0d4;
  border-radius:16px;
  box-shadow:0 8px 24px rgba(60,30,15,.035);
}
.couplet-poem-card .poem-lang{
  width:100%;
}
.couplet-poem-card .poem-lang p{
  width:100%;
  margin:0;
}
.couplet-poem-card .poem-lang.urdu{
  direction:rtl;
  text-align:right;
  font-family:var(--urdu);
  font-size:1.42rem;
  line-height:2.05;
}
.couplet-poem-card .poem-lang.roman{
  direction:ltr;
  text-align:left;
  font-family:var(--serif);
  font-size:1.12rem;
  line-height:1.85;
}
.couplet-poem-card .poem-lang.urdu p,
.couplet-poem-card .poem-lang.roman p{
  text-align:inherit;
}
@media(max-width:760px){
  .couplet-poem-grid{grid-template-columns:1fr;gap:18px}
  .couplet-poem-top{min-height:68px;padding:17px 18px 12px}
  .couplet-poem-card>.poem-toggle{margin:14px 18px 0}
  .couplet-poem-card .poem-block{margin:12px 12px 14px;padding:24px 18px;min-height:132px}
  .couplet-poem-card .poem-lang.urdu{font-size:1.24rem;line-height:2}
  .couplet-poem-card .poem-lang.roman{font-size:1.02rem;line-height:1.8}
}


/* ================================================================
   SMAAAQ v22 — Professional Motion System
   ================================================================ */

:root{
  --motion-ease:cubic-bezier(.22,.8,.22,1);
  --motion-fast:.22s;
  --motion-base:.42s;
  --motion-slow:.72s;
}

/* Page entrance/exit */
body{
  animation:smaaaqPageIn .65s var(--motion-ease) both;
}
body.page-leaving{
  animation:smaaaqPageOut .23s ease forwards;
  pointer-events:none;
}
@keyframes smaaaqPageIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes smaaaqPageOut{
  to{opacity:0;transform:translateY(-5px)}
}

/* Header polish */
.site-header{
  will-change:background,box-shadow,transform;
  transition:
    background-color .45s ease,
    box-shadow .45s ease,
    border-color .45s ease,
    min-height .45s var(--motion-ease);
}
.site-header.has-scrolled,
body.has-scrolled .site-header{
  box-shadow:0 12px 38px rgba(25,20,20,.11);
  background:rgba(255,255,255,.94);
}
.logo{
  transition:transform .4s var(--motion-ease),letter-spacing .4s var(--motion-ease);
}
.logo:hover{
  transform:translateY(-1px);
  letter-spacing:.15em;
}
.primary-nav>a,
.primary-nav>button{
  transition:
    color .25s ease,
    background-color .25s ease,
    transform .25s var(--motion-ease);
}
.primary-nav>a:hover,
.primary-nav>button:hover{
  transform:translateY(-2px);
}

/* Existing reveal elements become more cinematic. */
.reveal{
  will-change:opacity,transform;
}
.reveal.is-visible{
  animation:smaaaqReveal .72s var(--motion-ease) both;
}
@keyframes smaaaqReveal{
  from{opacity:0;transform:translate3d(0,28px,0) scale(.985)}
  to{opacity:1;transform:none}
}

/* New staggered content motion */
.motion-stagger{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:
    opacity .72s var(--motion-ease) var(--motion-delay,0ms),
    transform .72s var(--motion-ease) var(--motion-delay,0ms);
  will-change:opacity,transform;
}
.motion-stagger.motion-visible{
  opacity:1;
  transform:none;
}

/* Premium hover treatment without aggressive movement */
.card,
.poem-card,
.couplet-card,
.category-card,
.feature-card{
  position:relative;
  isolation:isolate;
  transition:
    transform .42s var(--motion-ease),
    box-shadow .42s var(--motion-ease),
    border-color .3s ease;
}
.card::after,
.poem-card::after,
.couplet-card::after,
.category-card::after,
.feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  border-radius:inherit;
  background:radial-gradient(
    260px circle at var(--pointer-x,50%) var(--pointer-y,50%),
    rgba(201,162,77,.12),
    transparent 65%
  );
  transition:opacity .35s ease;
}
@media (hover:hover){
  .card:hover,
  .poem-card:hover,
  .couplet-card:hover,
  .category-card:hover,
  .feature-card:hover{
    transform:translateY(-7px);
    box-shadow:0 22px 52px rgba(40,22,12,.12);
  }
  .card:hover::after,
  .poem-card:hover::after,
  .couplet-card:hover::after,
  .category-card:hover::after,
  .feature-card:hover::after{
    opacity:1;
  }
}

/* Buttons */
.btn,
button,
.nav-about{
  transition:
    transform .25s var(--motion-ease),
    box-shadow .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}
.btn:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(75,20,20,.13);
}
.btn:active,
button:active{
  transform:translateY(0) scale(.98);
}
.motion-focus{
  transform:translateY(-1px);
}

/* Hero: layered cinematic movement */
.hero-content{
  animation:smaaaqHeroContent 1.05s var(--motion-ease) .12s both;
}
.hero-scrim{
  animation:smaaaqScrim 1.4s ease both;
}
.hero-vignette{
  animation:smaaaqVignette 1.8s ease both;
}
@keyframes smaaaqHeroContent{
  from{opacity:0;transform:translate3d(0,34px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,48px,0) scale(1)}
}
@keyframes smaaaqScrim{
  from{opacity:.2}
  to{opacity:1}
}
@keyframes smaaaqVignette{
  from{opacity:.35}
  to{opacity:1}
}

/* About portrait: premium ring animation */
.about-photo-wrap{
  transition:transform .65s var(--motion-ease),box-shadow .65s var(--motion-ease);
}
.about-photo-wrap::before{
  transition:transform .8s var(--motion-ease),opacity .5s ease;
}
@media (hover:hover){
  .about-photo-wrap:hover{
    transform:translateY(-7px) scale(1.025);
    box-shadow:0 25px 58px rgba(0,0,0,.34);
  }
  .about-photo-wrap:hover::before{
    transform:rotate(28deg) scale(1.05);
    opacity:.85;
  }
}

/* About modal entrance */
.about-modal{
  opacity:0;
  transition:opacity .32s ease;
}
.about-modal:not([hidden]){
  opacity:1;
}
.about-modal .modal-backdrop{
  opacity:0;
  background:rgba(16,12,12,.78);
  backdrop-filter:blur(10px) saturate(115%);
  -webkit-backdrop-filter:blur(10px) saturate(115%);
  transition:opacity .38s ease,backdrop-filter .38s ease;
}
.about-modal:not([hidden]) .modal-backdrop{
  opacity:1;
}
.about-panel{
  transform:translate3d(0,24px,0) scale(.965);
  opacity:0;
  animation:none;
  transition:
    opacity .4s var(--motion-ease),
    transform .55s var(--motion-ease);
}
.about-modal.motion-open:not([hidden]) .about-panel{
  opacity:1;
  transform:none;
}
.about-modal.closing .about-panel{
  opacity:0;
  transform:translate3d(0,14px,0) scale(.98);
}

/* About content reveals after the panel */
.about-modal.motion-open .about-profile-visual > *,
.about-modal.motion-open .about-profile-content > *{
  animation:smaaaqModalChild .6s var(--motion-ease) both;
}
.about-modal.motion-open .about-profile-visual > *:nth-child(2){animation-delay:.08s}
.about-modal.motion-open .about-profile-visual > *:nth-child(3){animation-delay:.16s}
.about-modal.motion-open .about-profile-content > *:nth-child(2){animation-delay:.08s}
.about-modal.motion-open .about-profile-content > *:nth-child(3){animation-delay:.16s}
@keyframes smaaaqModalChild{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* Image loading polish */
img{
  transition:opacity .35s ease,filter .45s ease,transform .6s var(--motion-ease);
}
img[loading="lazy"]{
  background:linear-gradient(110deg,#f1eee8 20%,#faf8f4 38%,#f1eee8 55%);
  background-size:220% 100%;
}

/* Mobile navigation */
@media(max-width:980px){
  .primary-nav{
    transition:
      opacity .3s ease,
      transform .42s var(--motion-ease),
      visibility .3s ease;
  }
}

/* Keep the requested always-animated presentation; no reduced-motion media
   override is intentionally included. */

/* ================================================================
   SMAAAQ v23 — Refined visual palette + premium motion
   Final override layer (intentionally last so it wins over legacy rules)
   ================================================================ */
:root{
  --red:#a51f2b;
  --red-dark:#74141d;
  --red-deep:#5c0e16;
  --red-soft:#f9ecee;
  --gold:#c6a15b;
  --gold-light:#e1c98d;
  --gold-soft:#f5eddc;
  --ink:#201b1b;
  --muted:#706b6b;
  --surface:#fbfaf8;
  --gray:#f1efed;
  --line:#e4dfda;
  --white:#fffdfb;
  --shadow:0 18px 55px rgba(65,31,24,.085);
  --ease-premium:cubic-bezier(.16,1,.3,1);
}

/* Warm, calm page surfaces */
body{background:var(--surface);color:var(--ink)}
main{background:transparent}
section:not(.couplet-slideshow-section):nth-of-type(even){background:rgba(247,244,240,.72)}

/* Header: clean ivory glass instead of stark white */
.site-header{
  background:rgba(255,253,251,.90)!important;
  border-bottom-color:rgba(125,86,67,.13)!important;
  box-shadow:0 1px 0 rgba(80,35,25,.035);
  backdrop-filter:blur(20px) saturate(135%);
  -webkit-backdrop-filter:blur(20px) saturate(135%);
}
body.has-scrolled .site-header,
.site-header.is-scrolled{
  background:rgba(255,253,251,.97)!important;
  box-shadow:0 14px 42px rgba(55,25,20,.10)!important;
}
.logo{color:var(--red)!important}

/* Primary action buttons — unmistakably red */
.btn,
.btn.btn-outline,
.poem-back-btn,
.poem-launch-btn,
a.lineage-link,
a.node-inner,
a.breadcrumb,
.breadcrumb-trail a,
.couplet-view-all{
  color:#fff!important;
  border:1px solid var(--red)!important;
  background:linear-gradient(135deg,var(--red) 0%,#921a25 58%,var(--red-dark) 100%)!important;
  box-shadow:0 9px 22px rgba(126,19,29,.18)!important;
  text-shadow:0 1px 1px rgba(0,0,0,.10);
}
.btn:hover,
.btn.btn-outline:hover,
.poem-back-btn:hover,
.poem-launch-btn:hover,
a.lineage-link:hover,
a.node-inner:hover,
a.breadcrumb:hover,
.breadcrumb-trail a:hover,
.couplet-view-all:hover{
  color:#fff!important;
  background:linear-gradient(135deg,#b62936 0%,var(--red) 50%,#78131c 100%)!important;
  border-color:#b62936!important;
  box-shadow:0 16px 34px rgba(126,19,29,.26)!important;
  transform:translateY(-3px)!important;
}
.btn:active,
.poem-back-btn:active,
.poem-launch-btn:active,
a.lineage-link:active,
a.node-inner:active,
a.breadcrumb:active,
.breadcrumb-trail a:active,
.couplet-view-all:active{
  transform:translateY(-1px) scale(.985)!important;
}

/* Red button shine: subtle, not flashy */
.btn::before,
.poem-back-btn::before,
.poem-launch-btn::before,
a.lineage-link::before,
a.node-inner::before,
a.breadcrumb::before,
.breadcrumb-trail a::before{
  background:linear-gradient(110deg,transparent 18%,rgba(255,255,255,.24) 47%,rgba(255,255,255,.06) 54%,transparent 82%)!important;
}

/* Secondary controls: ivory with red accents, so the UI doesn't become a sea of red */
.lang-switcher-btn,
.menu-toggle,
.poem-toggle,
.poem-card>.poem-toggle>button,
.couplet-slide-btn,
.modal-close{
  color:var(--red)!important;
  background:rgba(255,253,251,.94)!important;
  border-color:rgba(165,31,43,.22)!important;
  box-shadow:0 6px 18px rgba(80,35,25,.06);
}
.lang-switcher-btn:hover,
.menu-toggle:hover,
.poem-toggle:hover,
.poem-card>.poem-toggle>button:hover,
.couplet-slide-btn:hover,
.modal-close:hover{
  color:#fff!important;
  background:var(--red)!important;
  border-color:var(--red)!important;
  box-shadow:0 10px 24px rgba(126,19,29,.16);
}
.poem-toggle.active,
.poem-card>.poem-toggle>button.active{
  color:#fff!important;
  background:linear-gradient(135deg,var(--red),var(--red-dark))!important;
  border-color:var(--red)!important;
}

/* Softer cards and borders */
.card,.poem-card,.couplet-poem-card,.bio-card,.fact-card,.quote-card,
.home-collection-card,.about-card,.poem-block,.couplet-slideshow{
  border-color:rgba(110,73,57,.13)!important;
  box-shadow:0 10px 34px rgba(65,31,24,.055);
  background:rgba(255,253,251,.96);
}
.card:hover,.poem-card:hover,.couplet-poem-card:hover,.bio-card:hover,
.fact-card:hover,.quote-card:hover,.home-collection-card:hover,.about-card:hover{
  border-color:rgba(165,31,43,.24)!important;
  box-shadow:0 24px 58px rgba(65,31,24,.105)!important;
}

/* Gold becomes an accent, not a competing primary colour */
.section-kicker,.eyebrow{color:var(--red)!important}
.hero-title:after{background:linear-gradient(90deg,transparent,var(--gold-light),transparent)!important}
.about-card-photo img{border-color:var(--gold)!important}

/* ================================================================
   Premium motion system
   ================================================================ */
html{scroll-behavior:smooth}

/* Universal interactive transition */
a,button,.btn,.poem-back-btn,.poem-launch-btn,.social-link,
.about-card,.home-collection-card,.bio-card,.fact-card,.quote-card,
.poem-card,.couplet-poem-card,.tree-item,.node-inner{
  transition:
    transform .48s var(--ease-premium),
    background-color .32s ease,
    background .32s ease,
    border-color .32s ease,
    box-shadow .48s var(--ease-premium),
    color .28s ease,
    opacity .32s ease;
}

/* Gentle lift for interactive content */
@media(hover:hover){
  .social-link:hover{transform:translateY(-4px) scale(1.025)!important}
  .about-card:hover{transform:translateY(-6px)!important}
  .home-collection-card:hover,.bio-card:hover,.fact-card:hover,
  .quote-card:hover,.poem-card:hover,.couplet-poem-card:hover{
    transform:translateY(-7px)!important;
  }
}

/* Scroll reveals */
.motion-stagger{
  opacity:0;
  transform:translate3d(0,26px,0) scale(.985);
  filter:blur(2px);
  transition:
    opacity .75s var(--ease-premium) var(--motion-delay,0ms),
    transform .75s var(--ease-premium) var(--motion-delay,0ms),
    filter .75s var(--ease-premium) var(--motion-delay,0ms);
}
.motion-stagger.motion-visible{
  opacity:1;
  transform:none;
  filter:none;
}
.reveal.is-visible{animation:smaaaqV23Reveal .82s var(--ease-premium) both!important}
@keyframes smaaaqV23Reveal{
  from{opacity:0;transform:translate3d(0,30px,0) scale(.985);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}

/* Hero: cinematic layered entrance */
.hero-content{animation:smaaaqV23Hero 1.15s var(--ease-premium) .08s both!important}
@keyframes smaaaqV23Hero{
  from{opacity:0;transform:translate3d(0,38px,0) scale(.97)}
  to{opacity:1;transform:translate3d(0,48px,0) scale(1)}
}
.hero-title{animation:smaaaqV23Title .95s var(--ease-premium) .22s both}
.hero-subtitle{animation:smaaaqV23Sub .8s var(--ease-premium) .42s both}
@keyframes smaaaqV23Title{from{opacity:0;letter-spacing:.035em;filter:blur(5px)}to{opacity:1;letter-spacing:normal;filter:none}}
@keyframes smaaaqV23Sub{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Page hero decorative ring */
.page-hero:after{
  animation:smaaaqRing 16s linear infinite;
  transform-origin:center;
}
@keyframes smaaaqRing{to{transform:rotate(360deg)}}

/* Active nav underline grows from the centre */
.primary-nav>a:after,.primary-nav>button:after{
  transform-origin:center!important;
  transition:transform .42s var(--ease-premium)!important;
}

/* Button micro-motion + shine */
.btn:hover::before,.poem-back-btn:hover::before,.poem-launch-btn:hover::before,
a.lineage-link:hover::before,a.node-inner:hover::before,a.breadcrumb:hover::before,
.breadcrumb-trail a:hover::before{animation:smaaaqShine .72s var(--ease-premium) both}
@keyframes smaaaqShine{from{transform:translateX(-125%)}to{transform:translateX(125%)}}

/* Floating scroll-top button */
.scroll-top-btn{transition:opacity .35s ease,transform .45s var(--ease-premium),box-shadow .35s ease!important}
.scroll-top-btn:hover{transform:translateY(-5px) scale(1.04)!important;box-shadow:0 14px 30px rgba(126,19,29,.22)!important}

/* About image gets a refined halo */
.about-photo-wrap{box-shadow:0 20px 48px rgba(65,31,24,.16)!important}
.about-photo-wrap:after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid rgba(198,161,91,.34);
  opacity:.65;pointer-events:none;
  animation:smaaaqHalo 5s ease-in-out infinite;
}
@keyframes smaaaqHalo{0%,100%{transform:scale(1);opacity:.48}50%{transform:scale(1.035);opacity:.9}}

/* Modal: soft scale + blur */
.about-modal .modal-backdrop{
  background:rgba(30,14,16,.72)!important;
  backdrop-filter:blur(12px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(12px) saturate(120%)!important;
}
.about-panel{box-shadow:0 34px 100px rgba(0,0,0,.28)!important}

/* Mobile: preserve animation quality without excessive movement */
@media(max-width:640px){
  .btn,.btn.btn-outline,.poem-back-btn,.poem-launch-btn,
  a.lineage-link,a.node-inner,a.breadcrumb,.breadcrumb-trail a,.couplet-view-all{
    min-height:44px!important;
  }
  .motion-stagger{transform:translate3d(0,20px,0) scale(.99);filter:none}
}

/* No reduced-motion override: the requested visual language remains active. */


/* ================================================================
   SMAAAQ v24 — About modal bug fix
   ================================================================ */
.about-modal[hidden]{display:none!important;}
.about-modal:not([hidden]){
  display:grid!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.about-modal:not([hidden]) .modal-backdrop{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
.about-modal:not([hidden]) .about-panel{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  pointer-events:auto!important;
  animation:aboutPanelInFixed .46s cubic-bezier(.2,.8,.2,1) both!important;
}
.about-modal.closing .about-panel{
  animation:aboutPanelOutFixed .28s ease both!important;
}
@keyframes aboutPanelInFixed{
  from{opacity:0;transform:translate3d(0,22px,0) scale(.965);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes aboutPanelOutFixed{
  from{opacity:1;transform:none;filter:none}
  to{opacity:0;transform:translate3d(0,12px,0) scale(.985);filter:blur(2px)}
}
/* The backdrop is intentionally blurred, never the modal content. */
.about-modal .modal-backdrop{filter:none!important;}
.about-modal .about-panel{filter:none!important;}
@media(max-width:760px){
  .about-modal:not([hidden]) .about-panel{max-height:96vh;overflow:auto;}
}

/* ================================================================
   SMAAAQ v25 — Navigation alignment refinement
   ================================================================ */
@media (min-width:981px){
  .header-inner{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:24px;
    min-height:78px;
  }
  .header-controls{
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:18px;
  }
  .primary-nav{
    min-width:0;
    justify-content:center;
    align-items:center;
    gap:1px;
    flex-wrap:nowrap;
  }
  .primary-nav>a,.primary-nav>button{
    padding:9px 9px;
    font-size:.78rem;
    line-height:1.25;
    text-align:center;
  }
  .primary-nav>a:after,.primary-nav>button:after{
    left:9px;right:9px;bottom:1px;
  }
  .nav-sufinama{margin-left:2px}
  .lang-switcher{justify-self:end}
}

/* Give the navigation a little more breathing room on medium desktop widths. */
@media (min-width:981px) and (max-width:1120px){
  .header-inner{gap:16px}
  .header-controls{gap:10px}
  .primary-nav>a,.primary-nav>button{padding-left:6px;padding-right:6px;font-size:.72rem}
  .primary-nav>a:after,.primary-nav>button:after{left:6px;right:6px}
  .logo{font-size:1.4rem}
  .lang-switcher-btn{padding:8px 9px}
}

/* Keep the mobile menu perfectly aligned with the header edge. */
@media (max-width:980px){
  .header-inner{position:relative}
  .header-controls{gap:10px}
  .primary-nav{
    left:0!important;
    right:0!important;
    width:100%;
    top:calc(100% + 1px)!important;
    margin:0;
  }
  .primary-nav>a,.primary-nav>button{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    text-align:left;
  }
}

.about-card{text-decoration:none;color:inherit;cursor:pointer}

/* ==================== SMAAAQ SMOOTH MOTION SYSTEM v27 ==================== */
:root{--smooth-ease:cubic-bezier(.22,1,.36,1);--smooth-ease-soft:cubic-bezier(.16,1,.3,1)}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{overflow-x:hidden;overflow-x:clip}
/* cinematic page transition */
body:after{content:"";position:fixed;inset:0;background:linear-gradient(135deg,#5d0e14,#9b1c24);z-index:100000;pointer-events:none;transform:translateY(0);transition:transform .9s var(--smooth-ease);}
body.page-ready:after{transform:translateY(-100%)}
body.page-leaving:after{transform:translateY(0)}
/* subtle reading progress */
.reading-progress-bar{transition:transform .08s linear}
/* smoother header */
.site-header{transition:background .55s var(--smooth-ease),box-shadow .55s var(--smooth-ease),transform .55s var(--smooth-ease);}
.site-header.is-scrolled{background:rgba(255,255,255,.88);box-shadow:0 12px 42px rgba(0,0,0,.09)}
/* reveal system */
.reveal{opacity:0;transform:translate3d(0,38px,0) scale(.985);filter:blur(3px);transition:opacity .9s var(--smooth-ease),transform .95s var(--smooth-ease),filter .9s var(--smooth-ease);will-change:opacity,transform,filter}
.reveal.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
.reveal:nth-child(2){transition-delay:.06s}.reveal:nth-child(3){transition-delay:.12s}.reveal:nth-child(4){transition-delay:.18s}
/* hero entrance + depth */
.hero-video{transform:scale(1.06);will-change:transform}
.hero-content{opacity:0;transform:translate3d(0,32px,0);animation:smaaaqHeroIn 1.25s .35s var(--smooth-ease) forwards;will-change:transform,opacity}
.hero-actions{opacity:0;transform:translate3d(0,28px,0);animation:smaaaqActionsIn 1.05s .7s var(--smooth-ease) forwards}
.hero-actions .btn{opacity:0;transform:translate3d(0,18px,0);animation:smaaaqBtnIn .8s var(--smooth-ease) forwards}
@keyframes smaaaqHeroIn{to{opacity:1;transform:none}}
@keyframes smaaaqActionsIn{to{opacity:1;transform:none}}
@keyframes smaaaqBtnIn{to{opacity:1;transform:none}}
/* tactile buttons */
.btn,.primary-nav>a,.primary-nav>button,.couplet-slide-btn,.menu-toggle,.lang-switcher-btn{transition:transform .45s var(--smooth-ease),background-color .35s var(--smooth-ease),border-color .35s var(--smooth-ease),box-shadow .45s var(--smooth-ease),color .35s var(--smooth-ease)}
.btn:hover{transform:translateY(-4px) scale(1.012)}
.btn:active,.couplet-slide-btn:active,.menu-toggle:active{transform:scale(.96)}
/* cards feel physical */
.home-collection-card,.about-card,.couplet-slideshow,.bio-card,.quote-card{transition:transform .6s var(--smooth-ease),box-shadow .6s var(--smooth-ease),border-color .45s var(--smooth-ease);will-change:transform}
.home-collection-card:hover,.about-card:hover{transform:translateY(-8px)}
.home-collection-card:after,.about-card:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(201,162,77,.11),transparent 34%);opacity:0;transition:opacity .45s ease;pointer-events:none}
.home-collection-card:hover:after,.about-card:hover:after{opacity:1}
/* ambient hero light */
.hero:before{content:"";position:absolute;width:42vw;height:42vw;min-width:280px;min-height:280px;left:var(--hero-x,50%);top:var(--hero-y,35%);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(201,162,77,.13),transparent 68%);filter:blur(14px);pointer-events:none;z-index:1;transition:left .8s var(--smooth-ease),top .8s var(--smooth-ease)}
/* page heroes */
.page-hero:before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-120px;bottom:-260px;background:radial-gradient(circle,rgba(201,162,77,.17),transparent 68%);animation:heroOrb 9s ease-in-out infinite alternate}
@keyframes heroOrb{to{transform:translate(-70px,-45px) scale(1.12)}}
/* animated underline */
.primary-nav>a:after{transition:transform .5s var(--smooth-ease);transform-origin:center}
/* focus states */
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
/* mobile menu motion */
@media(max-width:900px){.primary-nav{transition:opacity .4s var(--smooth-ease),transform .55s var(--smooth-ease),visibility .4s}.primary-nav.open{transform:translateY(0);opacity:1}.menu-toggle span{transition:transform .5s var(--smooth-ease),opacity .3s ease}.menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}}
/* floating pointer light, enabled by JS on fine pointers */
.smaaaq-pointer{position:fixed;left:0;top:0;width:24px;height:24px;border:1px solid rgba(155,28,36,.28);border-radius:50%;pointer-events:none;z-index:99998;transform:translate3d(-50%,-50%,0);opacity:0;transition:width .35s var(--smooth-ease),height .35s var(--smooth-ease),opacity .35s ease,border-color .35s ease;mix-blend-mode:multiply}
.smaaaq-pointer.is-active{width:52px;height:52px;opacity:1;border-color:rgba(155,28,36,.45)}
/* remove accidental dead-space around page entry */
main,.site-footer{position:relative}
@media(max-width:700px){.smaaaq-pointer{display:none}.hero:before{width:80vw;height:80vw}.reveal{transform:translate3d(0,25px,0) scale(.99)}}

/* ============================================================
   v28 — Apple-grade smoothness, soft redesign & premium tap feel
   ============================================================ */
:root{
  --ease-apple:cubic-bezier(.22,1,.36,1);
  --ease-press:cubic-bezier(.4,0,1,1);
  --ease-release:cubic-bezier(.34,1.56,.64,1);
}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(155,28,36,.16);color:var(--ink)}
.family-tree-container{-webkit-overflow-scrolling:touch}

/* Softer, more diffused shadow language across the whole site */
:root{--shadow:0 24px 64px rgba(25,18,18,.08)}
.btn-outline{box-shadow:0 12px 28px rgba(80,8,14,.16)}
.couplet-slideshow,.about-card,.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card,.poem-launch-btn,.home-collection-card{
  box-shadow:0 10px 34px rgba(25,15,15,.05);
}

/* --- Real fix: the hero title carries Urdu script, so it must actually
   render in the Urdu display face rather than the Latin fallback stack. --- */
.hero-title.urdu-font,
.hero-title[lang="ur"]{
  font-family:var(--urdu),'Cinzel',serif!important;
  font-weight:700!important;
  line-height:2.05!important;
  font-feature-settings:"liga" 1,"calt" 1;
  padding-bottom:.06em;
}
@media(max-width:640px){
  .hero-title.urdu-font,.hero-title[lang="ur"]{line-height:1.95!important}
}

/* --- Apple-style press feedback: quick, weighty press-down; soft,
   springy release. Applied uniformly across every tappable surface. --- */
.btn,.poem-toggle,.lang-switcher-btn,.menu-toggle,.social-link,.poem-launch-btn,
.about-card,.home-collection-card,.couplet-slide-btn,.modal-close,.lang-btn,
.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card,.poem-back-btn,
.couplet-view-all{
  position:relative;
  transition:transform .38s var(--ease-release),box-shadow .38s var(--ease-apple),
    background-color .3s var(--ease-apple),border-color .3s var(--ease-apple),color .3s var(--ease-apple)!important;
}
.btn:active,.poem-toggle:active,.lang-switcher-btn:active,.menu-toggle:active,
.social-link:active,.poem-launch-btn:active,.about-card:active,.home-collection-card:active,
.couplet-slide-btn:active,.modal-close:active,.lang-btn:active,.bio-card:active,
.fact-card:active,.quote-card:active,.poem-card:active,.couplet-poem-card:active,
.poem-back-btn:active,.couplet-view-all:active{
  transform:scale(.954)!important;
  transition:transform .12s var(--ease-press)!important;
}
.couplet-slide-btn:active{transform:scale(.88)!important}

/* Ripple: a small circle grows from the exact touch point and fades —
   JS sets --rx/--ry on pointerdown, this class plays the animation. */
.btn,.poem-toggle,.lang-switcher-btn,.menu-toggle,.social-link,.poem-launch-btn,
.about-card,.home-collection-card,.couplet-slide-btn,.modal-close,.lang-btn{
  overflow:hidden;
}
.tap-ripple::after{
  content:"";
  position:absolute;
  left:var(--rx,50%);
  top:var(--ry,50%);
  width:10px;height:10px;
  background:radial-gradient(circle,currentColor 0%,transparent 72%);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  opacity:.4;
  pointer-events:none;
  animation:smaaaqRipple .62s var(--ease-apple) forwards;
}
@keyframes smaaaqRipple{
  to{transform:translate(-50%,-50%) scale(26);opacity:0}
}

/* Smoother nav / lang-menu motion to match */
.primary-nav>a:after,.primary-nav>button:after{transition:transform .32s var(--ease-apple)}
.lang-switcher-caret{transition:transform .32s var(--ease-apple)}


/* ============================================================
   SMAAAQ v29 — final consistency / performance pass
   ============================================================ */
/* Cinzel is intentionally regular on branding and Latin hero copy. */
.logo,.hero-title,.page-hero-title{font-family:'Cinzel',Georgia,serif!important;font-weight:400!important}
.hero-title[lang="ur"],.hero-title.urdu-font{font-family:var(--urdu,'Noto Nastaliq Urdu',serif)!important;font-weight:400!important}

/* One clean navigation language on every page. */
.primary-nav{align-items:center;gap:4px!important;padding:6px!important;border:1px solid rgba(226,226,228,.9);border-radius:16px;background:rgba(255,255,255,.76);box-shadow:0 8px 28px rgba(30,15,15,.06);}
.primary-nav>a,.primary-nav>button{border-radius:11px;padding:9px 11px!important;font-weight:600;line-height:1;white-space:nowrap;}
.primary-nav>a:hover,.primary-nav>button:hover{background:#f7f3ee;transform:translateY(-1px)!important}
.primary-nav>a.active,.primary-nav>button.active,.primary-nav>a[aria-current="page"]{background:#171719!important;color:#fff!important;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.primary-nav>a.active:after,.primary-nav>button.active:after{transform:scaleX(.55)!important;background:#c9a24d!important}
.nav-about{font-weight:700!important}

/* Home collection actions: black, as requested. */
.hero-actions .btn.btn-outline{color:#171719!important;background:#fff!important;border-color:#171719!important;box-shadow:0 8px 22px rgba(0,0,0,.08)!important}
.hero-actions .btn.btn-outline:hover{color:#fff!important;background:#171719!important;border-color:#171719!important;box-shadow:0 14px 30px rgba(0,0,0,.16)!important}
.hero-actions .btn.btn-outline::before{background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.12) 50%,transparent 85%)!important}

/* Remove expensive blur/filter choreography from the home reveal path. */
.reveal{filter:none!important;will-change:opacity,transform!important;transition:opacity .55s var(--ease-apple),transform .65s var(--ease-apple)!important}
.hero-video{transform:none!important;will-change:auto!important}
.hero:before{filter:none!important;transition:none!important;opacity:.7}
.hero-content{will-change:opacity,transform!important}
.hero-actions,.hero-actions .btn{will-change:opacity,transform!important}

/* Keep page-to-page curtain short and smooth rather than blocking navigation. */
body:after{transition:transform .42s var(--ease-apple)!important}

/* Mobile navigation: one state name, one animation, no competing transforms. */
@media(max-width:900px){
  .primary-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px!important;padding:10px!important;border-radius:18px;background:rgba(255,255,255,.97);box-shadow:0 22px 50px rgba(20,12,12,.14);}
  .primary-nav:not(.is-open){visibility:hidden;opacity:0;transform:translateY(-10px) scale(.985);pointer-events:none}
  .primary-nav.is-open{visibility:visible;opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .primary-nav>a,.primary-nav>button{padding:12px 13px!important;text-align:left}
  .menu-toggle{width:44px;height:44px;border-radius:13px!important;background:#fff;border:1px solid #ddd7cd;display:grid;place-content:center;gap:5px}
  .menu-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:#171719;transition:transform .35s var(--ease-apple),opacity .25s ease}
  .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

/* Do not run a permanent pointer animation loop; it was a major source of
   unnecessary main-thread/GPU work, especially on the homepage video hero. */
.smaaaq-pointer{display:none!important}


/* v30 refinements: solid black home buttons + Cinzel branding */
.logo{font-family:"Cinzel",Georgia,serif!important;font-weight:400!important;letter-spacing:.14em}
.hero-title{font-family:"Cinzel",Georgia,serif!important;font-weight:400!important;letter-spacing:.015em}
/* Urdu is intentionally rendered with an Urdu-capable font when Urdu is selected. */
body[data-lang="ur"] .hero-title{font-family:var(--urdu)!important;font-weight:400!important;letter-spacing:0}
.hero-actions .btn.btn-outline{color:#fff!important;background:#171719!important;border:1px solid #171719!important;box-shadow:0 10px 24px rgba(0,0,0,.16)!important}
.hero-actions .btn.btn-outline:hover{color:#fff!important;background:#000!important;border-color:#000!important;box-shadow:0 14px 30px rgba(0,0,0,.22)!important;transform:translateY(-3px)}
.hero-actions .btn.btn-outline:active{background:#0b0b0c!important}


/* v31 — Hero typography: Cinzel for Latin hero title; preserve Nastaliq for Urdu script. */
.logo,.hero-title,.page-hero-title{font-family:"Cinzel",Georgia,serif!important;font-weight:400!important;}
.hero-title[lang="ur"],body[data-lang="ur"] .hero-title{font-family:var(--urdu,"Noto Nastaliq Urdu",serif)!important;font-weight:400!important;}
.hero-title:not([lang="ur"]){font-family:"Cinzel",Georgia,serif!important;font-weight:400!important;letter-spacing:.015em;}

/* v33 — Hero title: Cinzel is authoritative for the Latin/English hero text. */
.hero-title:not(.urdu-font),
.hero-title[lang="en"],
.hero-title[lang="ur"]{
  font-family:"Cinzel", Georgia, serif !important;
  font-weight:400 !important;
}
.hero-title.urdu-font,
.hero-title[lang="ur"]{
  font-family:var(--urdu,"Noto Nastaliq Urdu",serif) !important;
  font-weight:400 !important;
  letter-spacing:0 !important;
}

/* SMAAAQ v37: detailed personality pages must always display their written content.
   The page transition/reveal system must never leave biography text hidden. */
body.person-page .reveal,
body.person-page .motion-stagger,
body.person-page .bio-section .section-inner,
body.person-page .bio-card,
body.person-page .fact-card,
body.person-page .quote-card,
body.person-page .bio-closing {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
body.person-page .bio-card p,
body.person-page .bio-closing p,
body.person-page .page-hero-desc,
body.person-page .fact-table td,
body.person-page .quote-card p {
  visibility: visible !important;
  opacity: 1 !important;
}

/* =========================================================
   FINAL HOMEPAGE ACTION BUTTON STYLE — WHITE / BLACK / RED
   ========================================================= */
.hero-actions .btn,
.hero-actions .btn.btn-outline{
  background:#fff !important;
  color:#111 !important;
  border:1.5px solid var(--red) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.10) !important;
}
.hero-actions .btn:hover,
.hero-actions .btn.btn-outline:hover{
  background:#fff !important;
  color:#111 !important;
  border-color:var(--red) !important;
  transform:translateY(-3px) !important;
  box-shadow:0 14px 30px rgba(0,0,0,.16) !important;
}
.hero-actions .btn:active,
.hero-actions .btn.btn-outline:active{
  background:#fff !important;
  color:#111 !important;
  border-color:var(--red) !important;
  transform:translateY(-1px) scale(.985) !important;
}


/* v40 — SMAAAQ red header */
.site-header, header.site-header, .main-header {
  background: #c9152b !important;
  background-image: none !important;
}
.site-header .logo, .site-header .brand, .site-header .site-title,
.site-header a, .main-header .logo, .main-header .brand, .main-header .site-title {
  color: #fff !important;
}

/* v41 — Professional SMAAAQ red header + restored red action buttons */
:root{--smaaaq-header-red:var(--red);}
.site-header, header.site-header, .main-header{
  background:var(--smaaaq-header-red)!important;
  background-image:none!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 8px 28px rgba(120,0,15,.18)!important;
}
.site-header .logo,.site-header .brand,.site-header .site-title{color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.12);}
.site-header .primary-nav{background:transparent!important;border-color:rgba(255,255,255,.20)!important;box-shadow:none!important;}
.site-header .primary-nav>a,.site-header .primary-nav>button{color:#fff!important;background:transparent!important;}
.site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{color:#fff!important;background:rgba(255,255,255,.12)!important;transform:translateY(-1px)!important;}
.site-header .primary-nav>a.active,.site-header .primary-nav>button.active,.site-header .primary-nav>a[aria-current=page]{color:var(--red)!important;background:#fff!important;box-shadow:0 5px 16px rgba(0,0,0,.14)!important;}
.site-header .primary-nav>a.active:after,.site-header .primary-nav>button.active:after{background:#fff!important;}
.site-header .sufinama-badge{color:#fff!important;border-color:rgba(255,255,255,.45)!important;background:rgba(255,255,255,.10)!important;}
.site-header .lang-switcher-btn{color:#fff!important;background:transparent!important;border-color:rgba(255,255,255,.42)!important;}
.site-header .lang-switcher-btn svg{stroke:#fff!important;}
.site-header .lang-switcher-menu{background:#fff!important;border-color:rgba(0,0,0,.10)!important;}
.site-header .lang-btn{color:#111!important;background:#fff!important;}
.site-header .lang-btn.active,.site-header .lang-btn:hover{color:#fff!important;background:var(--red)!important;}
.site-header .menu-toggle{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.42)!important;}
.site-header .menu-toggle span{background:#fff!important;}
@media(max-width:980px){
 .site-header .primary-nav{background:var(--red)!important;border:1px solid rgba(255,255,255,.20)!important;box-shadow:0 22px 50px rgba(80,0,10,.25)!important;}
 .site-header .primary-nav>a,.site-header .primary-nav>button{color:#fff!important;}
 .site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{background:rgba(255,255,255,.12)!important;color:#fff!important;}
 .site-header .primary-nav>a.active,.site-header .primary-nav>button.active,.site-header .primary-nav>a[aria-current=page]{background:#fff!important;color:var(--red)!important;}
}
.hero-actions .btn,.hero-actions .btn.btn-outline{
 background:var(--red)!important;color:#fff!important;border:1.5px solid var(--red)!important;
 box-shadow:0 8px 24px rgba(130,0,20,.18)!important;
}
.hero-actions .btn:hover,.hero-actions .btn.btn-outline:hover{
 background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;
 transform:translateY(-3px)!important;box-shadow:0 14px 30px rgba(130,0,20,.26)!important;
}
.hero-actions .btn:active,.hero-actions .btn.btn-outline:active{
 background:var(--red)!important;color:#fff!important;border-color:var(--red)!important;transform:translateY(-1px) scale(.985)!important;
}

/* ================================================================
   SMAAAQ v42 — Professional Red Navigation System
   ================================================================ */
.site-header,
.site-header.is-scrolled,
.site-header.has-scrolled,
body.has-scrolled .site-header{
  background:var(--red)!important;
  color:#fff!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 8px 28px rgba(95,12,20,.20)!important;
  backdrop-filter:blur(16px) saturate(125%);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
}
.site-header .header-inner{min-height:76px}
.site-header .logo{
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.16);
  transition:transform .35s var(--smooth-ease),letter-spacing .35s var(--smooth-ease),opacity .25s ease;
}
.site-header .logo:hover{color:#fff!important;opacity:.92;transform:translateY(-1px);letter-spacing:.16em}
.site-header .primary-nav{
  background:rgba(255,255,255,.075)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 24px rgba(80,8,15,.10)!important;
}
.site-header .primary-nav>a,
.site-header .primary-nav>button{
  color:#fff!important;
  background:transparent!important;
  border-radius:10px;
  transition:color .25s ease,background-color .28s var(--smooth-ease),transform .28s var(--smooth-ease),box-shadow .28s ease;
}
.site-header .primary-nav>a:hover,
.site-header .primary-nav>button:hover{
  color:#fff!important;
  background:rgba(255,255,255,.14)!important;
  transform:translateY(-1px)!important;
}
.site-header .primary-nav>a:after,
.site-header .primary-nav>button:after{
  background:#fff!important;
  height:2px;
  border-radius:2px;
}
.site-header .primary-nav>a.active,
.site-header .primary-nav>button.active,
.site-header .primary-nav>a[aria-current="page"]{
  color:var(--red)!important;
  background:#fff!important;
  box-shadow:0 5px 16px rgba(65,5,12,.18)!important;
}
.site-header .primary-nav>a.active:after,
.site-header .primary-nav>button.active:after,
.site-header .primary-nav>a[aria-current="page"]:after{background:var(--red)!important}
.site-header .nav-sufinama{color:#fff!important}
.site-header .lang-switcher-btn{
  color:#fff!important;
  background:rgba(255,255,255,.09)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:background .25s ease,border-color .25s ease,transform .25s var(--smooth-ease);
}
.site-header .lang-switcher-btn:hover{background:rgba(255,255,255,.17)!important;border-color:rgba(255,255,255,.48)!important;transform:translateY(-1px)}
.site-header .lang-switcher-icon,
.site-header .lang-switcher-caret{stroke:#fff!important;color:#fff!important}
.site-header .lang-switcher-menu{
  background:#fff!important;
  border:1px solid rgba(155,28,36,.18)!important;
  box-shadow:0 18px 45px rgba(70,8,15,.22)!important;
}
.site-header .lang-btn{color:#171717!important}
.site-header .lang-btn:hover,
.site-header .lang-btn.active{background:var(--red-soft)!important;color:var(--red)!important}
.site-header .menu-toggle{
  background:rgba(255,255,255,.10)!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.site-header .menu-toggle span{background:#fff!important}
.site-header .menu-toggle:hover{background:rgba(255,255,255,.18)!important}

/* Mobile navigation opens as a polished red panel instead of a white card. */
@media(max-width:980px){
  .site-header .primary-nav{
    background:var(--red)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:0 0 18px 18px!important;
    box-shadow:0 22px 45px rgba(70,8,15,.28)!important;
    padding:10px!important;
  }
  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    color:#fff!important;
    background:transparent!important;
    min-height:46px;
  }
  .site-header .primary-nav>a:hover,
  .site-header .primary-nav>button:hover{background:rgba(255,255,255,.12)!important;color:#fff!important}
  .site-header .primary-nav>a.active,
  .site-header .primary-nav>button.active,
  .site-header .primary-nav>a[aria-current="page"]{background:#fff!important;color:var(--red)!important}
}

/* Homepage collection buttons — restore the original red treatment. */
.hero-actions .btn,
.hero-actions .btn.btn-outline{
  color:#fff!important;
  background:linear-gradient(135deg,var(--red) 0%,#921a25 58%,var(--red-dark) 100%)!important;
  border:1.5px solid var(--red)!important;
  box-shadow:0 9px 22px rgba(126,19,29,.18)!important;
}
.hero-actions .btn:hover,
.hero-actions .btn.btn-outline:hover{
  color:#fff!important;
  background:linear-gradient(135deg,#b62936 0%,var(--red) 50%,#78131c 100%)!important;
  border-color:#b62936!important;
  box-shadow:0 16px 34px rgba(126,19,29,.26)!important;
  transform:translateY(-3px)!important;
}
.hero-actions .btn:active,
.hero-actions .btn.btn-outline:active{color:#fff!important;background:var(--red-dark)!important;border-color:var(--red)!important;transform:translateY(-1px) scale(.985)!important}

/* v43 — Keep the SMAAAQ header red at every scroll position. */
.site-header,
.site-header.is-scrolled,
.site-header.has-scrolled,
body.has-scrolled .site-header,
header.site-header {
  background: var(--red) !important;
  background-color: var(--red) !important;
  background-image: none !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 8px 28px rgba(95,12,20,.20) !important;
}
.site-header .header-inner { min-height: 76px; }
.site-header .logo,
.site-header .primary-nav > a,
.site-header .primary-nav > button,
.site-header .nav-sufinama,
.site-header .lang-switcher-btn { color:#fff !important; }
.site-header .primary-nav > a,
.site-header .primary-nav > button { height:auto !important; min-height:42px; }
.site-header .primary-nav > a:after,
.site-header .primary-nav > button:after { background:#fff !important; }
.site-header .primary-nav > a.active,
.site-header .primary-nav > button.active,
.site-header .primary-nav > a[aria-current="page"] {
  color: var(--red) !important;
  background:#fff !important;
}
.site-header .primary-nav > a.active:after,
.site-header .primary-nav > button.active:after,
.site-header .primary-nav > a[aria-current="page"]:after { background:var(--red) !important; }
@media(max-width:980px){
  .site-header .primary-nav { background:var(--red) !important; }
}

/* v45 — richer, more eye-catching SMAAAQ header red */
:root{--smaaaq-header-red:#d20f26;--smaaaq-header-red-deep:#a70719;--smaaaq-header-red-bright:#ed1b32}
.site-header,.site-header.is-scrolled,.site-header.has-scrolled,body.has-scrolled .site-header,header.site-header{background:linear-gradient(135deg,var(--smaaaq-header-red-deep) 0%,var(--smaaaq-header-red) 48%,var(--smaaaq-header-red-bright) 100%) !important;background-color:var(--smaaaq-header-red) !important;box-shadow:0 8px 28px rgba(90,0,10,.22),inset 0 -1px 0 rgba(255,255,255,.12) !important}
.site-header::before{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12),rgba(255,255,255,0));opacity:.7 !important}
.site-header .logo,.site-header .primary-nav a,.site-header .lang-switcher-btn,.site-header .menu-toggle{color:#fff !important}
.site-header .primary-nav a:hover{background:rgba(255,255,255,.14) !important;color:#fff !important}
.site-header .primary-nav a.active{background:#fff !important;color:var(--smaaaq-header-red-deep) !important;box-shadow:0 5px 18px rgba(70,0,8,.16)}
.site-header .lang-switcher-menu{border-color:rgba(255,255,255,.18) !important;box-shadow:0 16px 35px rgba(55,0,8,.2)}
@media (max-width:900px){.site-header .primary-nav{background:linear-gradient(145deg,var(--smaaaq-header-red-deep),var(--smaaaq-header-red)) !important}}

/* v46 — refined professional header motion: subtle light sweep + lift on interaction */
.site-header{overflow:hidden;isolation:isolate;will-change:box-shadow}
.site-header::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.03) 38%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.03) 62%,transparent 100%);background-size:220% 100%;animation:smaaaqHeaderShimmer 7s ease-in-out infinite;opacity:.72!important}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent);transform:scaleX(.18);transform-origin:center;animation:smaaaqHeaderLine 4.8s ease-in-out infinite}
.site-header .header-inner{position:relative;z-index:3}
.site-header .logo{transition:transform .45s cubic-bezier(.22,1,.36,1),letter-spacing .45s ease,text-shadow .45s ease}
.site-header .logo:hover{transform:translateY(-1px);letter-spacing:.08em;text-shadow:0 5px 18px rgba(0,0,0,.22)}
.site-header .primary-nav>a,.site-header .primary-nav>button{transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .32s ease,color .32s ease,box-shadow .32s ease}
.site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{transform:translateY(-2px)}
.site-header .primary-nav>a.active{box-shadow:0 6px 20px rgba(70,0,8,.18),0 0 0 1px rgba(255,255,255,.22) inset}
.site-header .lang-switcher-btn{transition:transform .3s ease,background-color .3s ease}
.site-header .lang-switcher-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.12)}
@keyframes smaaaqHeaderShimmer{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@keyframes smaaaqHeaderLine{0%,100%{transform:scaleX(.12);opacity:.25}50%{transform:scaleX(.72);opacity:.9}}
@media(max-width:900px){.site-header::after{animation-duration:5.5s}.site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{transform:none}}

/* v47 — Apple-smooth navigation layer + elegant white header */
.site-header,
.site-header.is-scrolled,
.site-header.has-scrolled,
body.has-scrolled .site-header,
header.site-header{
  position:sticky!important;
  top:0!important;
  z-index:11000!important;
  overflow:visible!important;
  isolation:isolate!important;
  color:#171717!important;
  background:rgba(255,255,255,.97)!important;
  background-image:none!important;
  background-color:#fff!important;
  border-bottom:1px solid rgba(25,25,25,.08)!important;
  box-shadow:0 1px 0 rgba(0,0,0,.025),0 8px 30px rgba(20,10,10,.08)!important;
  -webkit-backdrop-filter:saturate(180%) blur(18px)!important;
  backdrop-filter:saturate(180%) blur(18px)!important;
  transition:background-color .45s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),border-color .45s ease!important;
}
.site-header::before{
  z-index:0!important;
  opacity:.42!important;
  background:linear-gradient(105deg,transparent 0%,rgba(155,28,36,.025) 38%,rgba(155,28,36,.075) 50%,rgba(155,28,36,.025) 62%,transparent 100%)!important;
  background-size:220% 100%!important;
  animation:smaaaqHeaderWhiteShimmer 9s cubic-bezier(.22,1,.36,1) infinite!important;
}
.site-header::after{
  z-index:4!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(155,28,36,.28),transparent)!important;
  animation:smaaaqHeaderLineWhite 7s cubic-bezier(.22,1,.36,1) infinite!important;
}
.site-header .header-inner{position:relative!important;z-index:10!important;min-height:78px!important}
.site-header .logo{
  position:relative!important;
  z-index:11!important;
  color:var(--red)!important;
  font-family:"Cinzel",Georgia,serif!important;
  font-size:clamp(1.72rem,2.3vw,2.15rem)!important;
  font-weight:500!important;
  letter-spacing:.16em!important;
  line-height:1!important;
  text-shadow:none!important;
  transition:transform .5s cubic-bezier(.22,1,.36,1),letter-spacing .5s cubic-bezier(.22,1,.36,1),color .3s ease!important;
}
.site-header .logo:hover{color:#7e111a!important;transform:translateY(-1px)!important;letter-spacing:.19em!important}
.site-header .header-controls{position:relative!important;z-index:12!important}
.site-header .primary-nav{
  position:relative!important;
  z-index:20!important;
  background:rgba(255,255,255,.82)!important;
  border:1px solid rgba(30,20,20,.075)!important;
  box-shadow:0 5px 20px rgba(40,10,10,.055),inset 0 1px 0 rgba(255,255,255,.9)!important;
  border-radius:999px!important;
  overflow:visible!important;
}
.site-header .primary-nav>a,.site-header .primary-nav>button{
  position:relative!important;
  z-index:21!important;
  color:#343434!important;
  background:transparent!important;
  transition:color .38s cubic-bezier(.22,1,.36,1),background-color .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s cubic-bezier(.22,1,.36,1)!important;
}
.site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{color:var(--red)!important;background:rgba(155,28,36,.055)!important;transform:translateY(-1px)!important}
.site-header .primary-nav>a.active,.site-header .primary-nav>a[aria-current="page"],.site-header .primary-nav>button.active{color:#fff!important;background:var(--red)!important;box-shadow:0 5px 15px rgba(155,28,36,.18)!important}
.site-header .primary-nav>a.active:after,.site-header .primary-nav>a[aria-current="page"]:after{background:#fff!important}
.site-header .nav-sufinama{color:var(--red)!important}
.site-header .lang-switcher{position:relative!important;z-index:100!important}
.site-header .lang-switcher-btn{
  position:relative!important;
  z-index:101!important;
  color:#343434!important;
  background:#fff!important;
  border:1px solid rgba(155,28,36,.18)!important;
  box-shadow:0 5px 18px rgba(40,10,10,.06)!important;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),border-color .3s ease!important;
}
.site-header .lang-switcher-btn:hover{color:var(--red)!important;transform:translateY(-1px)!important;box-shadow:0 9px 24px rgba(40,10,10,.10)!important;border-color:rgba(155,28,36,.32)!important}
.site-header .lang-switcher-icon,.site-header .lang-switcher-caret{stroke:currentColor!important;color:currentColor!important}
.site-header .lang-switcher-menu{
  position:absolute!important;
  z-index:12000!important;
  display:none;
  right:0!important;
  top:calc(100% + 9px)!important;
  background:rgba(255,255,255,.985)!important;
  border:1px solid rgba(155,28,36,.13)!important;
  box-shadow:0 18px 55px rgba(25,5,8,.16),0 3px 12px rgba(25,5,8,.07)!important;
  -webkit-backdrop-filter:blur(20px) saturate(150%)!important;
  backdrop-filter:blur(20px) saturate(150%)!important;
  transform-origin:top right!important;
}
.site-header .lang-switcher.open .lang-switcher-menu{display:grid!important;animation:appleMenuIn .42s cubic-bezier(.22,1,.36,1) both!important}
.site-header .menu-toggle{
  position:relative!important;
  z-index:120!important;
  color:#343434!important;
  background:#fff!important;
  border:1px solid rgba(155,28,36,.18)!important;
  box-shadow:0 5px 18px rgba(40,10,10,.06)!important;
  transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1),background-color .3s ease!important;
}
.site-header .menu-toggle span{background:var(--red)!important}
.site-header .menu-toggle:hover{background:#fff!important;transform:translateY(-1px)!important;box-shadow:0 9px 24px rgba(40,10,10,.10)!important}

/* The mobile menu must form a layer above the hero/video, not inside its stacking plane. */
@media(max-width:980px){
  .site-header .header-inner{min-height:70px!important}
  .site-header .primary-nav{
    position:absolute!important;
    z-index:13000!important;
    left:0!important;right:0!important;
    top:calc(100% + 8px)!important;
    background:rgba(255,255,255,.985)!important;
    border:1px solid rgba(155,28,36,.12)!important;
    border-radius:18px!important;
    padding:8px!important;
    box-shadow:0 22px 55px rgba(25,5,8,.18)!important;
    -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
    backdrop-filter:blur(22px) saturate(160%)!important;
  }
  .site-header .primary-nav.is-open{display:flex!important;animation:appleNavIn .45s cubic-bezier(.22,1,.36,1) both!important}
  .site-header .primary-nav>a,.site-header .primary-nav>button{color:#303030!important;min-height:46px!important}
  .site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{background:rgba(155,28,36,.055)!important;color:var(--red)!important}
  .site-header .primary-nav>a.active,.site-header .primary-nav>a[aria-current="page"]{color:#fff!important;background:var(--red)!important}
  .site-header .lang-switcher-menu{z-index:14000!important}
}

/* Smoothness pass: keep motion compositor-friendly and avoid layout-heavy animation. */
*,*::before,*::after{scroll-margin-top:88px}
a,button{ -webkit-tap-highlight-color:transparent }
.btn,.poem-toggle,.lang-switcher-btn,.menu-toggle,.social-link,.poem-launch-btn,.about-card,.home-collection-card,.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card{
  will-change:transform;
  transition-timing-function:cubic-bezier(.22,1,.36,1)!important;
}
.hero-video{will-change:auto!important}
@keyframes appleMenuIn{from{opacity:0;transform:translateY(-7px) scale(.965)}to{opacity:1;transform:none}}
@keyframes appleNavIn{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes smaaaqHeaderWhiteShimmer{0%,100%{background-position:120% 0}50%{background-position:-20% 0}}
@keyframes smaaaqHeaderLineWhite{0%,100%{transform:scaleX(.08);opacity:.15}50%{transform:scaleX(.55);opacity:.7}}


/* v48 — refined editorial navigation: elegant, quiet, premium */
.site-header .primary-nav{
  display:flex!important;
  align-items:center!important;
  gap:2px!important;
  padding:5px!important;
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(30,20,20,.08)!important;
  border-radius:16px!important;
  box-shadow:0 8px 28px rgba(30,12,12,.07), inset 0 1px 0 rgba(255,255,255,.95)!important;
  -webkit-backdrop-filter:blur(18px) saturate(160%)!important;
  backdrop-filter:blur(18px) saturate(160%)!important;
}
.site-header .primary-nav>a,
.site-header .primary-nav>button{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:40px!important;
  padding:0 12px!important;
  border-radius:11px!important;
  font-size:.76rem!important;
  font-weight:600!important;
  letter-spacing:.035em!important;
  white-space:nowrap!important;
  transform:none!important;
  transition:color .3s cubic-bezier(.22,1,.36,1),background .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1)!important;
}
.site-header .primary-nav>a:hover,
.site-header .primary-nav>button:hover{
  transform:translateY(-1px)!important;
  color:var(--red)!important;
  background:rgba(155,28,36,.055)!important;
}
.site-header .primary-nav>a.active,
.site-header .primary-nav>a[aria-current="page"],
.site-header .primary-nav>button.active{
  color:#fff!important;
  background:linear-gradient(135deg,#a51f2b,#8c151f)!important;
  box-shadow:0 5px 16px rgba(140,21,31,.20)!important;
}
.site-header .primary-nav>a.active:after,
.site-header .primary-nav>a[aria-current="page"]:after{display:none!important}
.site-header .nav-sufinama{
  margin-left:3px!important;
  color:var(--red)!important;
  border-left:1px solid rgba(30,20,20,.08)!important;
  border-radius:0 10px 10px 0!important;
  padding-left:15px!important;
}
.site-header .nav-sufinama:hover{background:rgba(155,28,36,.055)!important}

/* Desktop header rhythm */
@media(min-width:981px){
  .site-header .header-inner{gap:24px!important}
  .site-header .header-controls{gap:10px!important}
  .site-header .lang-switcher-btn{min-height:42px!important;border-radius:12px!important}
}

/* Mobile navigation: clean sheet, clear hierarchy, no pill clutter */
@media(max-width:980px){
  .site-header .primary-nav{
    display:none!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:3px!important;
    left:10px!important;right:10px!important;
    top:calc(100% + 10px)!important;
    padding:9px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 24px 65px rgba(20,8,10,.18),0 3px 12px rgba(20,8,10,.06)!important;
  }
  .site-header .primary-nav.is-open{display:flex!important}
  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    justify-content:flex-start!important;
    width:100%!important;
    min-height:48px!important;
    padding:0 15px!important;
    border-radius:12px!important;
    font-size:.88rem!important;
    letter-spacing:.01em!important;
  }
  .site-header .primary-nav>a.active,
  .site-header .primary-nav>a[aria-current="page"]{
    background:linear-gradient(135deg,#a51f2b,#8c151f)!important;
  }
  .site-header .nav-sufinama{
    margin:4px 0 0!important;
    border-left:0!important;
    border-top:1px solid rgba(30,20,20,.08)!important;
    border-radius:0 0 12px 12px!important;
    padding-top:8px!important;
  }
}

/* v49 — navigation stability + premium responsive menu
   Rebuild the nav layer cleanly so it cannot overlap, clip, or sit behind the hero. */
.site-header{position:sticky!important;top:0!important;z-index:50000!important;overflow:visible!important;isolation:isolate!important}
.site-header .header-inner{position:relative!important;z-index:50001!important}
.site-header .header-controls{position:relative!important;z-index:50002!important;display:flex!important;align-items:center!important}
.site-header .primary-nav{position:relative!important;z-index:50003!important;overflow:visible!important}
.site-header .lang-switcher{position:relative!important;z-index:50010!important}
.site-header .lang-switcher-menu{z-index:50020!important}
.site-header .menu-toggle{position:relative!important;z-index:50020!important}

/* Desktop: remove the crowded container look and use a clean editorial nav. */
@media(min-width:1181px){
  .site-header .primary-nav{
    display:flex!important;align-items:center!important;gap:2px!important;
    padding:3px!important;border:0!important;border-radius:0!important;
    background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;
  }
  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    min-height:38px!important;padding:0 10px!important;border-radius:9px!important;
    font-size:.72rem!important;font-weight:600!important;letter-spacing:.025em!important;
  }
  .site-header .primary-nav>a:hover,
  .site-header .primary-nav>button:hover{background:rgba(155,28,36,.055)!important;transform:translateY(-1px)!important}
  .site-header .primary-nav>a.active,
  .site-header .primary-nav>a[aria-current="page"],
  .site-header .primary-nav>button.active{
    background:transparent!important;color:var(--red)!important;box-shadow:none!important;
  }
  .site-header .primary-nav>a.active:after,
  .site-header .primary-nav>a[aria-current="page"]:after{
    display:block!important;left:10px!important;right:10px!important;bottom:1px!important;height:2px!important;
    background:var(--red)!important;transform:scaleX(1)!important;border-radius:2px!important;
  }
  .site-header .nav-sufinama{
    margin-left:6px!important;padding-left:11px!important;border-left:1px solid rgba(30,20,20,.10)!important;
  }
  .site-header .menu-toggle{display:none!important}
}

/* Compact desktop/tablet: switch to a real menu before the links become cramped. */
@media(max-width:1180px){
  .site-header .header-inner{min-height:72px!important;padding-top:2px!important;padding-bottom:2px!important}
  .site-header .header-controls{gap:8px!important}
  .site-header .primary-nav{
    display:none!important;position:absolute!important;
    left:12px!important;right:12px!important;top:calc(100% + 10px)!important;
    width:auto!important;max-height:calc(100vh - 95px)!important;overflow:auto!important;
    flex-direction:column!important;align-items:stretch!important;gap:3px!important;
    padding:9px!important;border:1px solid rgba(155,28,36,.11)!important;border-radius:20px!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 26px 70px rgba(25,5,8,.20),0 5px 18px rgba(25,5,8,.07)!important;
    -webkit-backdrop-filter:blur(24px) saturate(170%)!important;backdrop-filter:blur(24px) saturate(170%)!important;
    transform-origin:top center!important;
  }
  .site-header .primary-nav.is-open{display:flex!important;animation:navSheetIn .42s cubic-bezier(.22,1,.36,1) both!important}
  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    width:100%!important;min-height:48px!important;padding:0 15px!important;
    justify-content:flex-start!important;border-radius:13px!important;font-size:.88rem!important;
    color:#292929!important;background:transparent!important;letter-spacing:.01em!important;
  }
  .site-header .primary-nav>a:hover,
  .site-header .primary-nav>button:hover{background:rgba(155,28,36,.055)!important;color:var(--red)!important;transform:none!important}
  .site-header .primary-nav>a.active,
  .site-header .primary-nav>a[aria-current="page"],
  .site-header .primary-nav>button.active{
    color:#fff!important;background:linear-gradient(135deg,#a51f2b,#8c151f)!important;
    box-shadow:0 7px 18px rgba(140,21,31,.18)!important;
  }
  .site-header .primary-nav>a.active:after,
  .site-header .primary-nav>a[aria-current="page"]:after{display:none!important}
  .site-header .nav-sufinama{
    margin:5px 0 0!important;padding:12px 15px 4px!important;
    border:0!important;border-top:1px solid rgba(30,20,20,.08)!important;border-radius:0 0 12px 12px!important;
  }
  .site-header .menu-toggle{
    display:flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 44px!important;width:44px!important;height:44px!important;
    border-radius:13px!important;border:1px solid rgba(155,28,36,.16)!important;background:#fff!important;
    box-shadow:0 5px 18px rgba(40,10,10,.07)!important;
  }
  .site-header .menu-toggle span{width:18px!important;margin:3px 0!important;background:var(--red)!important}
  .site-header .lang-switcher-btn{min-height:44px!important;border-radius:13px!important}
  .site-header .lang-switcher-menu{top:calc(100% + 8px)!important;right:0!important;z-index:50020!important}
}

@keyframes navSheetIn{
  from{opacity:0;transform:translateY(-9px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Keep the navigation layers independent from hero/video stacking contexts. */
.hero,.hero-video,.hero-scrim,.hero-vignette,.hero-content{z-index:auto!important}
.hero{position:relative!important}
.hero-video{z-index:0!important}
.hero-scrim,.hero-vignette{z-index:1!important}
.hero-content{z-index:2!important}

/* v50 — premium navigation system: spacious, editorial, and touch-friendly */
.site-header,
.site-header.is-scrolled,
.site-header.has-scrolled,
body.has-scrolled .site-header{
  background:rgba(255,255,255,.94)!important;
  color:#171717!important;
  border-bottom:1px solid rgba(30,20,20,.08)!important;
  box-shadow:0 8px 30px rgba(20,10,10,.055)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
}
.site-header .header-inner{min-height:78px!important;padding:0 24px!important;}
.site-header .logo{
  font-family:'Cinzel',serif!important;font-weight:500!important;letter-spacing:.18em!important;
  font-size:clamp(1.55rem,2.15vw,2.05rem)!important;line-height:1!important;
  color:#171717!important;text-shadow:0 1px 0 rgba(255,255,255,.8)!important;
  transition:transform .55s cubic-bezier(.22,1,.36,1),letter-spacing .55s cubic-bezier(.22,1,.36,1),color .35s ease!important;
}
.site-header .logo:hover{color:var(--red)!important;transform:translateY(-1px)!important;letter-spacing:.205em!important}
.site-header .header-controls{gap:14px!important}
.site-header .primary-nav{gap:2px!important;}
.site-header .primary-nav>a{
  position:relative!important;min-height:42px!important;padding:0 11px!important;border-radius:10px!important;
  color:#262626!important;background:transparent!important;font-size:.73rem!important;font-weight:600!important;
  letter-spacing:.025em!important;transition:color .35s ease,background .35s ease,transform .45s cubic-bezier(.22,1,.36,1)!important;
}
.site-header .primary-nav>a:hover{color:var(--red)!important;background:rgba(155,28,36,.055)!important;transform:translateY(-1px)!important}
.site-header .primary-nav>a.active,.site-header .primary-nav>a[aria-current="page"]{
  color:var(--red)!important;background:rgba(155,28,36,.065)!important;font-weight:700!important;
}
.site-header .primary-nav>a.active:after,.site-header .primary-nav>a[aria-current="page"]:after{
  content:""!important;position:absolute!important;left:50%!important;right:auto!important;bottom:5px!important;width:18px!important;height:2px!important;
  background:var(--red)!important;border-radius:99px!important;transform:translateX(-50%) scaleX(1)!important;
}
.site-header .primary-nav .nav-sufinama{margin-left:8px!important;padding-left:14px!important;border-left:1px solid rgba(30,20,20,.12)!important;border-radius:0!important}
.site-header .lang-switcher-btn{
  min-height:44px!important;padding:0 12px!important;border:1px solid rgba(30,20,20,.11)!important;
  border-radius:12px!important;background:rgba(255,255,255,.72)!important;color:#222!important;
  box-shadow:0 4px 15px rgba(20,10,10,.04)!important;transition:all .4s cubic-bezier(.22,1,.36,1)!important;
}
.site-header .lang-switcher-btn:hover{border-color:rgba(155,28,36,.28)!important;color:var(--red)!important;transform:translateY(-1px)!important;box-shadow:0 8px 22px rgba(20,10,10,.08)!important}
.site-header .lang-switcher-menu{
  min-width:170px!important;padding:7px!important;border:1px solid rgba(30,20,20,.09)!important;border-radius:16px!important;
  background:rgba(255,255,255,.97)!important;box-shadow:0 22px 55px rgba(20,10,10,.16)!important;
  -webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
}
.site-header .lang-btn{min-height:42px!important;border-radius:10px!important;transition:all .3s ease!important}
.site-header .lang-btn:hover{background:rgba(155,28,36,.07)!important;color:var(--red)!important}

/* A wide, centered navigation sheet — never a skinny column. */
@media(max-width:1180px){
  .site-header .header-inner{min-height:72px!important;padding:0 18px!important}
  .site-header .header-controls{gap:9px!important}
  .site-header .menu-toggle{
    width:46px!important;height:46px!important;flex:0 0 46px!important;border-radius:14px!important;
    border:1px solid rgba(155,28,36,.16)!important;background:#fff!important;
    box-shadow:0 7px 22px rgba(25,8,10,.08)!important;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s ease,border-color .3s ease!important;
  }
  .site-header .menu-toggle:hover{transform:translateY(-1px)!important;box-shadow:0 10px 28px rgba(25,8,10,.12)!important;border-color:rgba(155,28,36,.3)!important}
  .site-header .menu-toggle span{width:19px!important;height:2px!important;border-radius:99px!important;background:var(--red)!important;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .25s ease!important}
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)!important}
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0!important;transform:scaleX(.2)!important}
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)!important}
  .site-header .primary-nav{
    display:flex!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important;
    position:absolute!important;left:50%!important;right:auto!important;top:calc(100% + 12px)!important;
    width:min(560px,calc(100vw - 28px))!important;max-height:calc(100vh - 96px)!important;overflow:auto!important;
    transform:translate(-50%,-10px) scale(.985)!important;transform-origin:top center!important;
    flex-direction:column!important;align-items:stretch!important;gap:4px!important;
    padding:14px!important;border:1px solid rgba(155,28,36,.11)!important;border-radius:24px!important;
    background:rgba(255,255,255,.975)!important;
    box-shadow:0 30px 90px rgba(25,5,8,.20),0 8px 24px rgba(25,5,8,.08)!important;
    -webkit-backdrop-filter:blur(28px) saturate(150%)!important;backdrop-filter:blur(28px) saturate(150%)!important;
    transition:opacity .38s ease,transform .5s cubic-bezier(.22,1,.36,1),visibility 0s linear .38s!important;
  }
  .site-header .primary-nav.is-open{
    visibility:visible!important;opacity:1!important;pointer-events:auto!important;
    transform:translate(-50%,0) scale(1)!important;transition-delay:0s!important;
  }
  .site-header .primary-nav:before{
    content:"SMAAAQ NAVIGATION"!important;display:block!important;padding:3px 10px 10px!important;
    color:#8a7778!important;font-family:'Cinzel',serif!important;font-size:.62rem!important;font-weight:600!important;
    letter-spacing:.16em!important;text-align:left!important;border-bottom:1px solid rgba(30,20,20,.08)!important;margin-bottom:3px!important;
  }
  .site-header .primary-nav>a{
    width:100%!important;min-height:52px!important;padding:0 17px!important;border-radius:13px!important;
    font-size:.91rem!important;font-weight:600!important;letter-spacing:.005em!important;color:#222!important;
    justify-content:flex-start!important;transform:none!important;
  }
  .site-header .primary-nav>a:hover{background:rgba(155,28,36,.055)!important;color:var(--red)!important}
  .site-header .primary-nav>a.active,.site-header .primary-nav>a[aria-current="page"]{
    color:#fff!important;background:linear-gradient(135deg,#a51f2b,#87151e)!important;
    box-shadow:0 8px 22px rgba(135,21,30,.18)!important;
  }
  .site-header .primary-nav>a.active:after,.site-header .primary-nav>a[aria-current="page"]:after{display:none!important}
  .site-header .primary-nav .nav-sufinama{
    margin:7px 0 0!important;padding:14px 17px 4px!important;border:0!important;border-top:1px solid rgba(30,20,20,.08)!important;border-radius:0!important;
  }
}
@media(max-width:560px){
  .site-header .header-inner{padding:0 14px!important}
  .site-header .logo{font-size:1.38rem!important;letter-spacing:.14em!important}
  .site-header .lang-switcher-btn{min-height:42px!important;padding:0 10px!important}
  .site-header .primary-nav{width:calc(100vw - 20px)!important;border-radius:22px!important;padding:12px!important;top:calc(100% + 8px)!important}
  .site-header .primary-nav>a{min-height:50px!important;font-size:.88rem!important}
}

/* ================================================================
   v51 — FINAL MASTER POLISH
   Navigation rebuilt as a refined editorial system. The rules below
   intentionally sit last so legacy redesign layers cannot fight them.
   ================================================================ */
:root{
  --s51-red:#a51f2b;
  --s51-red-dark:#7f121c;
  --s51-ink:#171717;
  --s51-muted:#70696a;
  --s51-ease:cubic-bezier(.22,1,.36,1);
}

/* Stable header surface */
.site-header,
.site-header.is-scrolled,
.site-header.has-scrolled,
body.has-scrolled .site-header{
  position:sticky!important;
  top:0!important;
  z-index:90000!important;
  isolation:isolate!important;
  overflow:visible!important;
  height:auto!important;
  min-height:0!important;
  background:rgba(255,255,255,.94)!important;
  background-image:none!important;
  border-bottom:1px solid rgba(20,20,20,.075)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.9),0 10px 34px rgba(20,10,10,.075)!important;
  -webkit-backdrop-filter:saturate(180%) blur(22px)!important;
  backdrop-filter:saturate(180%) blur(22px)!important;
}
.site-header::before{
  z-index:0!important;
  opacity:.28!important;
  animation:s51HeaderGlow 10s ease-in-out infinite!important;
  background:linear-gradient(110deg,transparent 0%,rgba(165,31,43,.025) 42%,rgba(165,31,43,.075) 50%,rgba(165,31,43,.025) 58%,transparent 100%)!important;
  background-size:220% 100%!important;
}
.site-header::after{
  z-index:8!important;
  height:1px!important;
  background:linear-gradient(90deg,transparent,rgba(165,31,43,.32),transparent)!important;
  animation:s51HeaderLine 8s var(--s51-ease) infinite!important;
}
@keyframes s51HeaderGlow{0%,100%{background-position:115% 0;opacity:.12}50%{background-position:-15% 0;opacity:.42}}
@keyframes s51HeaderLine{0%,100%{transform:scaleX(.08);opacity:.18}50%{transform:scaleX(.7);opacity:.72}}

.site-header .header-inner{
  position:relative!important;
  z-index:10!important;
  min-height:82px!important;
  height:auto!important;
  padding:0 clamp(18px,3vw,42px)!important;
  gap:clamp(18px,2.5vw,38px)!important;
}
.site-header .logo{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:11!important;
  font-family:"Cinzel",Georgia,serif!important;
  font-size:clamp(1.85rem,2.8vw,2.5rem)!important;
  font-weight:500!important;
  letter-spacing:.19em!important;
  line-height:1!important;
  color:var(--s51-ink)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.9)!important;
  transition:color .35s ease,transform .55s var(--s51-ease),letter-spacing .55s var(--s51-ease)!important;
}
.site-header .logo:hover{color:var(--s51-red)!important;transform:translateY(-1px)!important;letter-spacing:.215em!important}
.site-header .header-controls{
  position:relative!important;
  z-index:20!important;
  min-width:0!important;
  gap:12px!important;
}

/* Desktop navigation: quiet, high-end editorial treatment */
@media(min-width:1181px){
  .site-header .primary-nav{
    position:relative!important;
    z-index:30!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:1px!important;
    padding:5px!important;
    margin:0!important;
    border:1px solid rgba(25,20,20,.075)!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.68)!important;
    box-shadow:0 6px 24px rgba(20,10,10,.045),inset 0 1px 0 rgba(255,255,255,.95)!important;
    -webkit-backdrop-filter:blur(16px) saturate(140%)!important;
    backdrop-filter:blur(16px) saturate(140%)!important;
  }
  .site-header .primary-nav>a{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:42px!important;
    padding:0 11px!important;
    border-radius:10px!important;
    color:#343132!important;
    background:transparent!important;
    font-size:.73rem!important;
    font-weight:600!important;
    letter-spacing:.018em!important;
    white-space:nowrap!important;
    transform:none!important;
    transition:color .3s ease,background-color .3s ease,transform .45s var(--s51-ease),box-shadow .35s ease!important;
  }
  .site-header .primary-nav>a::after{display:none!important}
  .site-header .primary-nav>a:hover{
    color:var(--s51-red)!important;
    background:rgba(165,31,43,.055)!important;
    transform:translateY(-1px)!important;
  }
  .site-header .primary-nav>a.active,
  .site-header .primary-nav>a[aria-current="page"]{
    color:#fff!important;
    background:var(--s51-red)!important;
    box-shadow:0 5px 15px rgba(165,31,43,.20)!important;
  }
  .site-header .primary-nav>a.active:hover,
  .site-header .primary-nav>a[aria-current="page"]:hover{color:#fff!important;background:var(--s51-red-dark)!important}
  .site-header .primary-nav .nav-sufinama{
    margin-left:7px!important;
    padding-left:13px!important;
    border-left:1px solid rgba(25,20,20,.10)!important;
    border-radius:0!important;
    color:var(--s51-red)!important;
  }
}

/* Language control */
.site-header .lang-switcher{position:relative!important;z-index:90010!important}
.site-header .lang-switcher-btn{
  position:relative!important;
  z-index:90011!important;
  min-height:44px!important;
  padding:0 12px!important;
  border:1px solid rgba(25,20,20,.10)!important;
  border-radius:13px!important;
  background:rgba(255,255,255,.86)!important;
  color:#292728!important;
  box-shadow:0 5px 18px rgba(20,10,10,.055)!important;
  transition:transform .4s var(--s51-ease),box-shadow .4s var(--s51-ease),border-color .3s ease,color .3s ease!important;
}
.site-header .lang-switcher-btn:hover{transform:translateY(-1px)!important;color:var(--s51-red)!important;border-color:rgba(165,31,43,.27)!important;box-shadow:0 9px 25px rgba(20,10,10,.09)!important}
.site-header .lang-switcher-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  right:0!important;
  z-index:95000!important;
  min-width:170px!important;
  padding:7px!important;
  border:1px solid rgba(165,31,43,.12)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.975)!important;
  box-shadow:0 24px 65px rgba(20,7,9,.17),0 5px 18px rgba(20,7,9,.07)!important;
  -webkit-backdrop-filter:blur(24px) saturate(160%)!important;
  backdrop-filter:blur(24px) saturate(160%)!important;
  transform-origin:top right!important;
}
.site-header .lang-switcher.open .lang-switcher-menu{display:grid!important;animation:s51DropIn .42s var(--s51-ease) both!important}
@keyframes s51DropIn{from{opacity:0;transform:translateY(-7px) scale(.96)}to{opacity:1;transform:none}}
.site-header .lang-btn{min-height:44px!important;border-radius:10px!important;transition:background-color .28s ease,color .28s ease,transform .35s var(--s51-ease)!important}
.site-header .lang-btn:hover{background:rgba(165,31,43,.065)!important;color:var(--s51-red)!important;transform:translateX(2px)!important}

/* Mobile/tablet: full-width premium sheet, never a narrow column */
@media(max-width:1180px){
  .site-header .menu-toggle{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    position:relative!important;
    z-index:90020!important;
    width:46px!important;height:46px!important;flex:0 0 46px!important;
    border:1px solid rgba(165,31,43,.14)!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 6px 20px rgba(20,10,10,.065)!important;
  }
  .site-header .menu-toggle span{
    width:19px!important;height:2px!important;margin:3px 0!important;border-radius:99px!important;
    background:var(--s51-red)!important;
    transition:transform .45s var(--s51-ease),opacity .24s ease!important;
  }
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)!important}
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0!important;transform:scaleX(.25)!important}
  .site-header .menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)!important}

  .site-header .primary-nav{
    display:flex!important;
    visibility:hidden!important;
    opacity:0!important;
    pointer-events:none!important;
    position:absolute!important;
    left:50%!important;right:auto!important;top:calc(100% + 10px)!important;
    width:min(760px,calc(100vw - 24px))!important;
    max-height:min(78vh,680px)!important;
    overflow:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:4px!important;
    margin:0!important;
    padding:15px!important;
    border:1px solid rgba(165,31,43,.11)!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.975)!important;
    box-shadow:0 30px 90px rgba(15,5,7,.20),0 7px 24px rgba(15,5,7,.08)!important;
    -webkit-backdrop-filter:blur(28px) saturate(160%)!important;
    backdrop-filter:blur(28px) saturate(160%)!important;
    transform:translate(-50%,-12px) scale(.97)!important;
    transform-origin:top center!important;
    transition:opacity .35s ease,transform .5s var(--s51-ease),visibility 0s linear .35s!important;
    scrollbar-width:thin!important;
  }
  .site-header .primary-nav.is-open{
    visibility:visible!important;opacity:1!important;pointer-events:auto!important;
    transform:translate(-50%,0) scale(1)!important;
    transition-delay:0s!important;
  }
  .site-header .primary-nav::before{
    content:"SMAAAQ  •  NAVIGATION"!important;
    display:block!important;
    padding:3px 13px 12px!important;
    margin:0 0 3px!important;
    border-bottom:1px solid rgba(25,20,20,.075)!important;
    color:#817677!important;
    font-family:"Cinzel",Georgia,serif!important;
    font-size:.62rem!important;
    font-weight:600!important;
    letter-spacing:.15em!important;
    text-align:left!important;
  }
  .site-header .primary-nav>a{
    width:100%!important;min-height:54px!important;padding:0 17px!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    border-radius:13px!important;color:#252324!important;background:transparent!important;
    font-size:.94rem!important;font-weight:600!important;letter-spacing:.004em!important;
    transform:none!important;white-space:normal!important;
    transition:color .28s ease,background-color .28s ease,transform .35s var(--s51-ease),box-shadow .35s ease!important;
  }
  .site-header .primary-nav>a::after{display:none!important}
  .site-header .primary-nav>a:hover{color:var(--s51-red)!important;background:rgba(165,31,43,.055)!important;transform:translateX(3px)!important}
  .site-header .primary-nav>a.active,
  .site-header .primary-nav>a[aria-current="page"]{
    color:#fff!important;background:linear-gradient(135deg,#ad2430,#86141e)!important;
    box-shadow:0 9px 25px rgba(134,20,30,.18)!important;
  }
  .site-header .primary-nav>a.active:hover,
  .site-header .primary-nav>a[aria-current="page"]:hover{color:#fff!important;transform:none!important}
  .site-header .primary-nav .nav-sufinama{
    margin:7px 0 0!important;padding:15px 17px 5px!important;
    border:0!important;border-top:1px solid rgba(25,20,20,.075)!important;border-radius:0!important;
    color:var(--s51-red)!important;
  }
}
@media(min-width:601px) and (max-width:1180px){
  .site-header .primary-nav{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:stretch!important}
  .site-header .primary-nav::before{grid-column:1/-1!important}
  .site-header .primary-nav .nav-sufinama{grid-column:1/-1!important}
}
@media(max-width:600px){
  .site-header .header-inner{min-height:72px!important;padding:0 14px!important}
  .site-header .logo{font-size:clamp(1.42rem,7vw,1.72rem)!important;letter-spacing:.14em!important}
  .site-header .header-controls{gap:8px!important}
  .site-header .lang-switcher-btn{min-height:42px!important;padding:0 10px!important;border-radius:12px!important}
  .site-header .primary-nav{width:calc(100vw - 20px)!important;max-height:calc(100vh - 88px)!important;top:calc(100% + 8px)!important;padding:12px!important;border-radius:21px!important}
  .site-header .primary-nav>a{min-height:51px!important;font-size:.9rem!important}
}

/* Global motion cleanup: one consistent release curve, no blur-heavy reveals. */
.reveal{will-change:opacity,transform!important;filter:none!important;transition:opacity .62s var(--s51-ease),transform .72s var(--s51-ease)!important}
.reveal.is-visible{filter:none!important}
.btn,.home-collection-card,.about-card,.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card,.couplet-slide-btn,.social-link{
  transition:transform .5s var(--s51-ease),box-shadow .5s var(--s51-ease),border-color .35s ease,background-color .35s ease,color .3s ease!important;
}

/* Never allow a page element to establish an accidental clipping layer over nav. */
.hero{z-index:0!important}
.hero-video{z-index:0!important}
.hero-scrim,.hero-vignette{z-index:1!important}
.hero-content{z-index:2!important}

/* Accessible focus treatment */
.site-header a:focus-visible,.site-header button:focus-visible{
  outline:2px solid var(--s51-red)!important;
  outline-offset:3px!important;
}

/* Avoid motion being disabled by a stale preference rule; preserve the designed feel. */
@media(prefers-reduced-motion:reduce){
  .site-header::before,.site-header::after{animation:none!important}
  .site-header .primary-nav,.site-header .lang-switcher-menu{transition-duration:.18s!important}
}


/* v52 final polish: red SMAAAQ wordmark + homepage performance */
.site-header .logo, .site-header .logo:visited { color: #a51f2b !important; }
.site-header .logo { font-family: Cinzel, Georgia, serif !important; font-weight: 500 !important; letter-spacing: .16em !important; }
@media (min-width: 769px) { .site-header .logo { font-size: clamp(1.65rem, 2.2vw, 2.15rem) !important; } }
.hero-video { transform: translateZ(0); backface-visibility: hidden; }
.hero, .hero-media, .hero-video-wrap { contain: layout paint style; }


/* v52 — final homepage performance pass */
html { scroll-behavior: smooth; }
.hero-video { contain: strict; will-change: auto !important; }
.hero::before, .hero::after { pointer-events: none; }
@media (pointer: fine) {
  .card, .poem-card, .couplet-card, .category-card, .feature-card {
    transition: transform .42s cubic-bezier(.22,1,.36,1), box-shadow .42s cubic-bezier(.22,1,.36,1), border-color .42s ease;
  }
}
.site-header .logo { color: #a51f2b !important; }

/* v54 — Mobile edge-to-edge stability + horizontal overflow guard */
html,
body{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:clip!important;
}
body{
  overscroll-behavior-x:none;
}
@media(max-width:760px){
  *,*::before,*::after{max-width:100%;}
  .site-header,.site-header .header-inner,
  main,.hero,.home-collections,.poetry-section,.about-teaser,
  footer,.page-hero,.bio-section,.quote-section,.content-section{
    max-width:100%;
  }
  .section-inner,.page-hero-inner,.poem-reader>.section-inner{
    width:calc(100% - 28px)!important;
    max-width:100%!important;
    min-width:0!important;
  }
  img,video,svg,canvas,iframe{
    max-width:100%;
  }
  .hero-video{
    width:100%!important;
    max-width:none!important;
  }
  .hero-content{
    width:calc(100% - 28px)!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .home-collection-grid,.bio-grid,.quote-grid,.about-card{
    min-width:0!important;
  }
  .about-card>*{min-width:0!important;}
  .couplet-slideshow{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
  }
  .couplet-slideshow-body,.couplet-slideshow-text,
  .poem-card,.poem-card-body,.bio-card,.quote-card{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:anywhere;
  }
  /* Keep decorative oversized orbs inside the viewport. */
  .hero:before,.page-hero:after,.page-hero:before{
    pointer-events:none!important;
  }
}
@media(max-width:480px){
  .site-header .header-inner{width:100%!important;max-width:100%!important;}
  .section-inner,.page-hero-inner,.poem-reader>.section-inner,
  .hero-content{width:calc(100% - 24px)!important;}
  .hero-actions{width:100%!important;max-width:100%!important;}
}

/* Urdu content direction is scoped to the page content only. The global site header, language switcher, navigation, and other chrome remain in their original LTR layout. */
html { direction: ltr !important; }
body { direction: ltr; }
body[data-lang="ur"] main { direction: rtl; }
body[data-lang="ur"] .site-header,
body[data-lang="ur"] .site-header * { direction: ltr; }
body[data-lang="ur"] .site-header { unicode-bidi: isolate; }

/* v55 — Family Tree Urdu typography */
body[data-lang="ur"] #family-tree,
body[data-lang="ur"] #family-tree .renowned-section,
body[data-lang="ur"] #family-tree .tree-item { direction: rtl; }
body[data-lang="ur"] #family-tree .page-hero-title,
body[data-lang="ur"] #family-tree .page-hero-desc,
body[data-lang="ur"] #family-tree .tree-note,
body[data-lang="ur"] #family-tree .section-kicker,
body[data-lang="ur"] #family-tree .renowned-heading,
body[data-lang="ur"] #family-tree .renowned-card,
body[data-lang="ur"] #family-tree .person-detail-content { font-family: "Noto Nastaliq Urdu", "Noto Naskh Arabic", serif; }
body[data-lang="ur"] #family-tree .page-hero-title { line-height: 1.55; }
body[data-lang="ur"] #family-tree .tree-item .node-inner { text-align: right; }
body[data-lang="ur"] #family-tree .renowned-card { text-align: right; }

/* ============================================================
   v60 — Apple-style smoothness consolidation.
   This project has multiple prior smoothness passes (v51/v52/
   ease-premium/ease-pro/ease-apple/s51) that added effects on
   top of each other without removing the earlier ones. That
   layering is itself a source of jank: permanent will-change
   on many elements keeps them on their own GPU layer at all
   times (memory pressure -> worse scroll perf), and the header
   backdrop-filter was escalated across passes (14px -> 28px)
   with !important chains that just kept compounding blur cost
   on a sticky element repainted every scroll frame.
   This block consolidates rather than adds: it resets
   always-on will-change to on-demand (hover/focus only),
   pins the header blur to one moderate value, extends
   prefers-reduced-motion to cover every infinite decorative
   animation added in later passes, improves touch/momentum
   scrolling on overlay panels, and defers off-screen paint
   cost on long list pages (family tree). No new motion is
   added — this is about making the existing motion cheap
   enough to actually run at 60fps.
   ============================================================ */

/* Stop permanently promoting cards/buttons to their own GPU
   layer. will-change is a hint for imminent change, not a
   standing state — keeping it on at rest wastes compositor
   memory on every one of these elements across a 24-page site
   and is a common real cause of scroll stutter on lower-end
   phones. Re-enable it only while the element is actually
   about to animate (hover/focus/active). */
.btn,.poem-launch-btn,.bio-card,.fact-card,.quote-card,.couplet-poem-card,
.about-card,.social-link,.poem-toggle,.home-collection-card,.couplet-slideshow,
.lang-switcher-menu,.about-panel{will-change:auto!important}
.btn:hover,.btn:focus-visible,.poem-launch-btn:hover,.poem-launch-btn:focus-visible,
.bio-card:hover,.fact-card:hover,.quote-card:hover,.couplet-poem-card:hover,
.about-card:hover,.social-link:hover,.poem-toggle:hover,.poem-toggle.active,
.home-collection-card:hover,.couplet-slideshow:hover,
.lang-switcher.open .lang-switcher-menu,.about-modal.is-open .about-panel{
  will-change:transform,opacity
}
/* Hero video is large and expensive to keep GPU-composited
   after its entrance animation finishes; only promote it
   during the opening sequence. */
.hero-video{will-change:auto!important}
body:not(.page-ready) .hero-video{will-change:transform!important}

/* One final, moderate header blur instead of the escalating
   14px -> 28px chain from earlier passes. Heavy blur+saturate
   on a `position:sticky` element is recomputed on every scroll
   frame in Safari; capping it keeps the frosted-glass look
   without the compounding cost. */
.site-header{
  backdrop-filter:blur(14px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(130%)!important;
}

/* Smoother, native-feeling scrolling on overlay/panel content,
   matching how scroll views feel on Apple platforms. */
.modal-panel,.about-panel,.lang-switcher-menu,.family-tree-container,.poem-reader{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}

/* Defer paint cost for content far off-screen on long pages
   (family tree, poem lists) so the browser doesn't have to
   keep laying out/painting hundreds of cards that aren't
   visible yet — this is what keeps long-page scrolling smooth
   rather than adding animation to try to mask jank. */
.tree-item,.home-collection-card,.bio-card,.fact-card,.quote-card,.poem-card,.couplet-poem-card{
  content-visibility:auto;
  contain-intrinsic-size:0 220px;
}

/* Every infinite decorative loop added across passes now
   respects reduced motion, not just the two from the original
   rule. Infinite animations are also the ones most likely to
   overlap with a user's scroll and cause perceived stutter, so
   this is a real accessibility + battery + smoothness fix, not
   just a formality. */
@media(prefers-reduced-motion:reduce){
  .hero-title,.imran-link:before,.page-hero:before,
  .site-header::before,.site-header::after{
    animation:none!important
  }
}

/* v61 — Slightly smaller homepage section buttons (Nohas, Naats
   & Manqabats, Salams, etc.) on mobile. These sit inside
   .hero-actions, which sets its own min-height:54px with higher
   specificity than the general mobile .btn rule above, so they
   needed a dedicated override rather than inheriting it. */
@media(max-width:640px){
  .hero-actions .btn{min-height:46px;font-size:.76rem;padding:0 14px}
}
@media(max-width:480px){
  .hero-actions .btn{min-height:43px;font-size:.73rem;padding:0 12px}
}

/* v62 — Fix real jank source in the hero: two infinite loops
   (title "breathing" and the Imran-link glow ring) were
   animating text-shadow / box-shadow / border-color forever.
   Those properties force a full repaint on every frame of the
   loop, which competes with the video decoder for the same
   thread/GPU time — that's the actual cause of the stutter
   right where the video plays, not the video itself. Rewritten
   to animate only opacity/transform (compositor-only, no
   repaint), keeping the same visual effect. */
@keyframes heroTitleBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes imranGlow{0%,100%{opacity:0;transform:scale(.98)}50%{opacity:1;transform:scale(1.035)}}

/* v66 — Imran hero link refined as a gold text link; removes pill/search styling. */
.imran-link:after{content:none!important}

/* v63 — Fluid sizing for the homepage section buttons (Nohas,
   Naats & Manqabats, Salams, Rubais & Qitas, Selected Couplets,
   Family Tree) across ALL screen sizes, not just two fixed
   mobile breakpoints. clamp() scales height/font/padding
   smoothly with viewport width, so there's no sudden jump when
   resizing a window or rotating a phone between breakpoints —
   it's the same continuous scale from the smallest phone up to
   desktop. Supersedes the fixed 640px/480px steps above (same
   selector, later in source wins) rather than deleting them, in
   case a fallback for very old browsers without clamp() support
   is ever needed. */
.hero-actions .btn{
  min-height:clamp(42px, 30px + 5vw, 54px);
  font-size:clamp(.72rem, .52rem + 1vw, .82rem);
  padding:0 clamp(12px, 3.75vw, 18px);
}

/* ============================================================
   v64 — Homepage soft redesign: professional, Apple-inspired.
   Scoped to homepage-only classes (.hero, .hero-actions,
   .poetry-section, .couplet-slideshow, .about-teaser,
   .about-card) so inner pages are untouched. This doesn't
   introduce a new color system — it applies the site's own
   existing card/shadow language (the same soft-white,
   soft-shadow, hover-lift pattern already used for bio/fact/
   quote cards) more consistently, and fixes the one real
   layout issue: six full-width stacked buttons reading fine on
   a phone but feeling dated as a tall single column on a wide
   screen.
   ============================================================ */

/* Hero: dissolve into the page instead of a hard cut at the
   bottom edge of the video, and let it breathe at more heights. */
.hero{min-height:clamp(520px,86vh,760px)}
.hero:after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(to bottom,transparent,var(--white));
  pointer-events:none;z-index:1;
}

/* Small eyebrow label introducing the button grid — gives the
   jump from hero into the section list a proper lead-in instead
   of dropping straight into six buttons. */
.hero-actions-eyebrow{
  text-align:center;font:800 .7rem var(--sans);letter-spacing:.18em;
  text-transform:uppercase;color:var(--red);margin:44px 0 0;
}

/* Hero action buttons: a responsive grid instead of one long
   stacked column, and one clean, confident card style replacing
   the several competing red/black/white treatments layered on
   in earlier passes. */
.hero-actions{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  width:min(1040px,calc(100% - 40px))!important;
  padding:18px 0 30px!important;
  margin:0 auto!important;
}
@media(min-width:560px){
  .hero-actions{grid-template-columns:repeat(2,1fr)!important}
}
@media(min-width:900px){
  .hero-actions{grid-template-columns:repeat(3,1fr)!important}
}
.hero-actions .btn,
.hero-actions .btn.btn-outline{
  width:100%!important;
  background:linear-gradient(135deg,var(--red) 0%,#921a25 58%,var(--red-dark) 100%)!important;
  color:#fff!important;
  border:1.5px solid var(--red)!important;
  box-shadow:0 9px 22px rgba(126,19,29,.18)!important;
  border-radius:14px!important;
  font-weight:700!important;
  justify-content:center!important;
  text-align:center!important;
  padding:0 20px!important;
}
/* Homepage action arrows intentionally removed; button animation remains. */
.hero-actions .btn::after{content:none!important;display:none!important;}
.hero-actions .btn:hover,
.hero-actions .btn.btn-outline:hover{
  background:linear-gradient(135deg,#b62936 0%,var(--red) 50%,#78131c 100%)!important;
  color:#fff!important;
  border-color:#b62936!important;
  box-shadow:0 16px 34px rgba(126,19,29,.26)!important;
  transform:translateY(-4px)!important;
}
.hero-actions .btn:hover::after{content:none!important;display:none!important;}
.hero-actions .btn:active,
.hero-actions .btn.btn-outline:active{
  background:var(--red-dark)!important;
  transform:translateY(-1px) scale(.99)!important;
}

/* Couplet card and about card: softer, more spacious, less
   boxy — larger radius, quieter border, calmer quote mark. */
.couplet-slideshow{
  border-color:transparent;
  box-shadow:0 24px 60px rgba(25,20,20,.07);
  border-radius:24px;
}
.couplet-slideshow:before{color:var(--gold-soft);opacity:.8;font-size:4.2rem}
.couplet-view-all{
  display:inline-flex;background:transparent!important;color:var(--red)!important;
  border:1px solid var(--line)!important;box-shadow:none!important;
  font-weight:700;margin-top:8px;
}
.couplet-view-all:hover{
  border-color:var(--red)!important;background:var(--red-soft)!important;
  transform:translateY(-2px)!important;
}
.couplet-view-all::after{
  content:"→";margin-left:8px;opacity:.65;display:inline-block;
  transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.couplet-view-all:hover::after{transform:translateX(4px);opacity:1}
.about-card{
  border-color:transparent;
  box-shadow:0 20px 50px rgba(25,20,20,.06);
  border-radius:24px;
  padding:30px 34px;
  gap:28px;
}
.about-card:hover{box-shadow:0 26px 64px rgba(25,20,20,.1)}
.about-card-photo img{width:104px;height:104px}

/* Fluid, consistent section rhythm on the homepage — generous
   on desktop, comfortable on mobile, no abrupt jump between. */
.poetry-section,.about-teaser{
  padding-block:clamp(56px,9vw,110px)!important;
}

@media(max-width:640px){
  .hero-actions-eyebrow{margin-top:30px}
  .hero-actions{padding:14px 0 20px!important}
  .about-card{padding:22px 20px}
}

/* v65 — Softer footer social icons. Replaces the flat dark
   outlined chips with a translucent frosted-glass pill (subtle
   on the dark footer background, matching the soft-card
   language used elsewhere), lifting into a warm gold glow on
   hover instead of a hard-filled block. */
.social-link{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#e9e9e9!important;
  padding:10px 16px!important;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.social-link:hover{
  background:rgba(201,162,77,.16)!important;
  border-color:rgba(201,162,77,.55)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  transform:translateY(-3px)!important;
}
.social-link svg{opacity:.9;transition:opacity .25s ease}
.social-link:hover svg{opacity:1}

/* ============================================================
   v66 — Site-wide polish pass: back button, scroll-to-top,
   About modal, and inner-page title banners.
   ============================================================ */

/* Back-to-section button: was still the old shouting all-caps
   red-gradient pill from an earlier pass, out of step with the
   calmer soft-card language used everywhere else now. Given the
   same quiet ghost-pill treatment as "View All Couplets" — it's
   a secondary/back action, so it shouldn't compete visually
   with primary red CTAs. */
.poem-back-btn{
  background:var(--white)!important;
  color:var(--red)!important;
  border:1px solid var(--line)!important;
  text-transform:none!important;
  letter-spacing:.01em!important;
  box-shadow:0 4px 14px rgba(20,10,10,.05)!important;
  text-shadow:none!important;
}
.poem-back-btn:hover{
  background:var(--red-soft)!important;
  color:var(--red)!important;
  border-color:#dcc58d!important;
  box-shadow:0 10px 24px rgba(20,10,10,.08)!important;
  transform:translateY(-2px)!important;
}
.poem-back-btn:active{transform:translateY(0) scale(.98)!important}

/* Scroll-to-top: soft frosted-glass circle instead of a flat
   bordered disc, matching the same soft-shadow language used
   across the redesigned cards. */
.scroll-top-btn{
  width:48px!important;height:48px!important;
  border:1px solid rgba(0,0,0,.05)!important;
  background:rgba(255,255,255,.92)!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 32px rgba(25,20,20,.14)!important;
}
.scroll-top-btn.is-visible:hover{background:#fff!important}

/* About popup modal: warm, gently-blurred backdrop instead of a
   flat near-black overlay, and a softer, warmer panel shadow to
   match the rest of the site's shadow palette instead of a
   stark black one. */
.about-modal .modal-backdrop{
  background:rgba(20,10,10,.68)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.about-panel{
  box-shadow:0 40px 100px rgba(30,12,12,.28),0 8px 26px rgba(30,12,12,.12)!important;
  border-color:rgba(201,162,77,.28)!important;
}

/* Inner-page title banners (Nohas, Naats, Salams, etc.): same
   soft dissolve into the page used on the homepage hero, so the
   red banner doesn't end in a hard line against the white
   content below. */
.page-hero{overflow:hidden}
.page-hero:before{
  content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
  background:linear-gradient(to bottom,transparent,var(--white));
  pointer-events:none;z-index:0;
}

/* ============================================================
   Couplet slideshow — dynamic content animations
   (slideshow now pulls live from Selected Couplets in the admin
   panel via couplets-data.php; these rules give it a proper
   crossfade/slide transition plus an autoplay progress bar.)
   ============================================================ */
.couplet-slideshow{overflow:hidden}
.couplet-slideshow-body{
  animation:none!important;
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .38s cubic-bezier(.22,.8,.22,1),transform .42s cubic-bezier(.22,.8,.22,1)!important;
  will-change:opacity,transform;
}
.couplet-slideshow-body.is-leaving{opacity:0!important;transform:translateY(-12px) scale(.98)!important}
.couplet-slideshow-body.is-entering{opacity:0!important;transform:translateY(14px) scale(.98)!important}

/* Autoplay progress bar — fills over the autoplay interval and
   resets on slide change, manual navigation, or hover/focus pause. */
.couplet-slide-progress{
  position:absolute;top:0;left:22px;right:22px;height:3px;
  border-radius:0 0 4px 4px;background:rgba(141,24,33,.08);
  overflow:hidden;z-index:6;
}
.couplet-slide-progress span{
  display:block;height:100%;width:0%;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--gold),var(--red));
}
@media(max-width:640px){.couplet-slide-progress{left:12px;right:12px}}

/* Gentle ambient motion on the quotation mark so the card doesn't
   feel static between slide changes. */
.couplet-slideshow:before{animation:coupletQuotePulse 5s ease-in-out infinite}
@keyframes coupletQuotePulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* Dots: smoother morph + a subtle pop when a dot becomes active. */
.couplet-slide-dots button{transition:width .32s cubic-bezier(.22,.8,.22,1),background-color .32s ease,transform .32s cubic-bezier(.34,1.56,.64,1)!important}
.couplet-slide-dots button.active{animation:coupletDotPop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes coupletDotPop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

@media(prefers-reduced-motion:reduce){
  .couplet-slideshow-body,.couplet-slideshow-body.is-leaving,.couplet-slideshow-body.is-entering{
    transition:none!important;opacity:1!important;transform:none!important;
  }
  .couplet-slideshow:before{animation:none}
  .couplet-slide-dots button.active{animation:none}
  .couplet-slide-progress span{transition:none!important}
}


/* SMAAAQ mobile viewport stability patch v61 */
html{width:100%;max-width:100%;overflow-x:hidden;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden;overflow-x:clip;}
img,video,svg,iframe{max-width:100%;}
@media(max-width:980px){
  html,body{width:100%;max-width:100%;}
  .site-header,.site-header .header-inner,.primary-nav{max-width:100%;}
}


/* ============================================================
   v67 — SMAAAQ Light / Night Theme System
   Default: follows the device/system appearance.
   Manual choice is remembered locally.
   ============================================================ */
:root{
  color-scheme:light;
  --theme-bg:#ffffff;
  --theme-surface:#f8f8f7;
  --theme-surface-2:#f2f3f4;
  --theme-text:#171717;
  --theme-muted:#6d7075;
  --theme-line:#dedfe2;
  --theme-soft:#f7e9ea;
  --theme-gold-soft:#f4ead2;
}
html[data-theme="night"]{
  color-scheme:dark;
  --theme-bg:#101011;
  --theme-surface:#171719;
  --theme-surface-2:#1e1f21;
  --theme-text:#f2eee8;
  --theme-muted:#aaa7a1;
  --theme-line:#343438;
  --theme-soft:#351c20;
  --theme-gold-soft:#342d20;
  --white:#101011;
  --ink:#f2eee8;
  --muted:#aaa7a1;
  --gray:#1e1f21;
  --line:#343438;
  --surface:#171719;
  --red-soft:#351c20;
  --gold-soft:#342d20;
  --shadow:0 18px 50px rgba(0,0,0,.32);
}
html,body{transition:background-color .3s ease,color .3s ease}
body{background:var(--theme-bg);color:var(--theme-text)}
html[data-theme="night"] .site-header{background:rgba(16,16,17,.88)!important;border-color:rgba(255,255,255,.08)!important}
html[data-theme="night"] .primary-nav a{color:#e9e5df}
html[data-theme="night"] .primary-nav a:hover,
html[data-theme="night"] .primary-nav a.active{color:#fff}
html[data-theme="night"] .lang-switcher-btn,
html[data-theme="night"] .theme-toggle-btn,
html[data-theme="night"] .menu-toggle{color:#eee;border-color:#38383c;background:rgba(255,255,255,.045)}
html[data-theme="night"] .lang-switcher-menu{background:#19191b;border-color:#38383c;box-shadow:0 18px 45px rgba(0,0,0,.4)}
html[data-theme="night"] .lang-btn{color:#eee}
html[data-theme="night"] .lang-btn:hover{background:#29292d}
html[data-theme="night"] .poetry-section,
html[data-theme="night"] .about-teaser{background:var(--theme-bg)!important;color:var(--theme-text)}
html[data-theme="night"] .about-card,
html[data-theme="night"] .couplet-slideshow,
html[data-theme="night"] .home-collection-card,
html[data-theme="night"] .bio-card,
html[data-theme="night"] .quote-card,
html[data-theme="night"] .fact-card,
html[data-theme="night"] .poem-card,
html[data-theme="night"] .content-card,
html[data-theme="night"] .archive-card{
  background:var(--theme-surface)!important;color:var(--theme-text)!important;border-color:var(--theme-line)!important;box-shadow:0 20px 55px rgba(0,0,0,.22)!important;
}
html[data-theme="night"] .about-card p,
html[data-theme="night"] .about-card .muted,
html[data-theme="night"] .section-intro,
html[data-theme="night"] .poem-meta,
html[data-theme="night"] .card-meta{color:var(--theme-muted)!important}
html[data-theme="night"] .section-title,
html[data-theme="night"] h1,html[data-theme="night"] h2,html[data-theme="night"] h3,html[data-theme="night"] h4{color:var(--theme-text)}
html[data-theme="night"] .poem-back-btn,
html[data-theme="night"] .scroll-top-btn{background:#1b1b1e!important;color:#f0d58e!important;border-color:#38383c!important}
html[data-theme="night"] .poem-back-btn:hover{background:#29292d!important}
html[data-theme="night"] .page-hero:before{background:linear-gradient(to bottom,transparent,var(--theme-bg))}
html[data-theme="night"] .about-modal .modal-backdrop{background:rgba(0,0,0,.78)!important}
html[data-theme="night"] .about-panel{background:#171719!important;color:var(--theme-text)!important;border-color:rgba(201,162,77,.28)!important}
html[data-theme="night"] .about-panel .modal-body,
html[data-theme="night"] .about-panel p{color:var(--theme-text)}
html[data-theme="night"] .couplet-slide-progress{background:rgba(255,255,255,.08)}
html[data-theme="night"] footer{background:#0a0a0b!important;color:#d7d3cd!important}
html[data-theme="night"] .site-footer{background:#0a0a0b!important}
html[data-theme="night"] input,html[data-theme="night"] textarea,html[data-theme="night"] select{background:#1a1a1d!important;color:#f2eee8!important;border-color:#38383c!important}
html[data-theme="night"] ::selection{background:#7d222b;color:#fff}

.theme-toggle-btn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.55);color:var(--ink);
  cursor:pointer;padding:0;transition:transform .25s var(--ease),background-color .25s ease,border-color .25s ease,color .25s ease;
}
.theme-toggle-btn:hover{transform:translateY(-2px)}
.theme-toggle-btn:active{transform:translateY(0) scale(.96)}
.theme-toggle-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle-btn .theme-icon-sun{display:none}
html[data-theme="night"] .theme-toggle-btn .theme-icon-moon{display:none}
html[data-theme="night"] .theme-toggle-btn .theme-icon-sun{display:block}
@media(max-width:980px){.theme-toggle-btn{width:38px;height:38px;border-radius:11px}}
@media(max-width:640px){.theme-toggle-btn{width:36px;height:36px}.header-controls{gap:7px!important}}

/* When no manual preference exists, CSS itself mirrors the system immediately. */
@media(prefers-color-scheme:dark){
  html:not([data-theme="light"]) body{background:#101011;color:#f2eee8}
}


/* ================================================================
   SMAAAQ v68 — Premium Dark Mode Correction
   Purpose: replace remaining light/cream surfaces and low-contrast
   typography in Night Mode while preserving the SMAAAQ red/gold identity.
   ================================================================ */
html[data-theme="night"]{
  color-scheme:dark;
  --white:#111316;
  --surface:#0d0f12;
  --gray:#181b20;
  --line:#30343b;
  --ink:#f3efe8;
  --muted:#aaa59e;
  --red:#c93440;
  --red-dark:#8f1823;
  --red-deep:#681018;
  --red-soft:#32171c;
  --gold:#d5b36a;
  --gold-light:#ead29a;
  --gold-soft:#30291d;
  --shadow:0 22px 65px rgba(0,0,0,.38);
}
html[data-theme="night"] body{
  /* Matches the unified --white/--theme-bg value (v318, end of file) —
     this rule's higher specificity + !important otherwise override that
     variable with its own separate hardcoded shade. */
  background:#111316!important;
  color:#f3efe8!important;
}
html[data-theme="night"] main,
html[data-theme="night"] section:not(.page-hero):not(.hero),
html[data-theme="night"] .poetry-section,
html[data-theme="night"] .bio-section,
html[data-theme="night"] .about-teaser,
html[data-theme="night"] .home-collections{
  background:transparent!important;
  color:#f3efe8!important;
}
html[data-theme="night"] section:not(.page-hero):not(.hero):not(.couplet-slideshow-section):nth-of-type(even){background:#101216!important}
/* v317: .page-hero (and .hero) are deliberately colored banners — a maroon
   gradient with white text, styled at line ~8/268 above — not plain content
   sections. The blanket `section{background:transparent!important}` rule
   above was flattening that gradient away entirely in Night Mode, leaving
   the banner with no background at all (just whatever happened to show
   through) instead of its intended look. Excluding both keeps their own
   gradient/dark background intact in both themes. */

/* Header / controls */
html[data-theme="night"] .site-header,
html[data-theme="night"] .site-header.is-scrolled,
html[data-theme="night"] body.has-scrolled .site-header{
  background:rgba(13,15,18,.93)!important;
  border-bottom:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 10px 35px rgba(0,0,0,.28)!important;
  color:#f3efe8!important;
}
html[data-theme="night"] .site-header .logo{color:#e4c06f!important;text-shadow:0 1px 18px rgba(213,179,106,.12)!important}
html[data-theme="night"] .primary-nav>a,
html[data-theme="night"] .primary-nav>button{color:#e9e4dc!important}
html[data-theme="night"] .primary-nav>a:hover,
html[data-theme="night"] .primary-nav>button:hover{color:#fff!important;background:rgba(201,52,64,.10)!important}
html[data-theme="night"] .primary-nav>a.active,
html[data-theme="night"] .primary-nav>a[aria-current="page"]{color:#fff!important;background:rgba(201,52,64,.14)!important}
html[data-theme="night"] .primary-nav>a.active:after,
html[data-theme="night"] .primary-nav>a[aria-current="page"]:after{background:var(--gold)!important}
html[data-theme="night"] .nav-sufinama{color:#dfb86a!important;border-color:rgba(213,179,106,.20)!important}
/* v317: .lang-switcher-current ("EN"/"UR"/…) has its own hardcoded dark-red
   color (#8e151d) meant for the light theme's cream switcher button. It had
   no Night Mode override, so it stayed dark red even once the button's own
   background turned near-black — ~1.8:1 contrast, effectively unreadable. */
html[data-theme="night"] .lang-switcher-current{color:#eee8df!important}
html[data-theme="night"] .lang-switcher-btn,
html[data-theme="night"] .menu-toggle,
html[data-theme="night"] .theme-toggle-btn{
  color:#eee8df!important;
  background:#17191d!important;
  border-color:#353941!important;
  box-shadow:0 7px 24px rgba(0,0,0,.28)!important;
}
html[data-theme="night"] .lang-switcher-btn:hover,
html[data-theme="night"] .menu-toggle:hover,
html[data-theme="night"] .theme-toggle-btn:hover{
  color:#fff!important;background:#202329!important;border-color:rgba(213,179,106,.42)!important;
}
html[data-theme="night"] .menu-toggle span{background:var(--red)!important}

/* Mobile navigation sheet — fixes the bright white panel shown in Night Mode. */
@media(max-width:1180px){
  html[data-theme="night"] .site-header .primary-nav{
    background:rgba(20,22,26,.985)!important;
    border-color:#363a42!important;
    box-shadow:0 30px 90px rgba(0,0,0,.58),0 8px 28px rgba(0,0,0,.35)!important;
    -webkit-backdrop-filter:blur(28px) saturate(130%)!important;
    backdrop-filter:blur(28px) saturate(130%)!important;
  }
  html[data-theme="night"] .site-header .primary-nav::before{
    color:#a9a29a!important;
    border-bottom-color:rgba(255,255,255,.09)!important;
  }
  html[data-theme="night"] .site-header .primary-nav>a{
    color:#e9e4dc!important;background:transparent!important;
  }
  html[data-theme="night"] .site-header .primary-nav>a:hover{
    color:#fff!important;background:rgba(201,52,64,.12)!important;
  }
  html[data-theme="night"] .site-header .primary-nav>a.active,
  html[data-theme="night"] .site-header .primary-nav>a[aria-current="page"]{
    color:#fff!important;background:linear-gradient(135deg,#b52632,#81141e)!important;
    box-shadow:0 10px 26px rgba(0,0,0,.30)!important;
  }
  html[data-theme="night"] .site-header .primary-nav .nav-sufinama{
    color:#dcb86f!important;border-top-color:rgba(255,255,255,.09)!important;
  }
}
html[data-theme="night"] .lang-switcher-menu{
  background:#17191d!important;border-color:#383c44!important;box-shadow:0 24px 60px rgba(0,0,0,.55)!important;
}
html[data-theme="night"] .lang-btn{color:#ece7df!important}
html[data-theme="night"] .lang-btn:hover,
html[data-theme="night"] .lang-btn.active{background:#302025!important;color:#f2c6c9!important}

/* General cards / tables / poem readers */
html[data-theme="night"] .card,
html[data-theme="night"] .poem-card,
html[data-theme="night"] .couplet-poem-card,
html[data-theme="night"] .bio-card,
html[data-theme="night"] .fact-card,
html[data-theme="night"] .quote-card,
html[data-theme="night"] .home-collection-card,
html[data-theme="night"] .about-card,
html[data-theme="night"] .poem-block,
html[data-theme="night"] .couplet-slideshow,
html[data-theme="night"] .family-tree-container,
html[data-theme="night"] .poem-launch-btn{
  background:#17191d!important;
  color:#f3efe8!important;
  border-color:#30343b!important;
  box-shadow:0 18px 52px rgba(0,0,0,.30)!important;
}
html[data-theme="night"] .home-collection-card:hover,
html[data-theme="night"] .about-card:hover,
html[data-theme="night"] .bio-card:hover,
html[data-theme="night"] .fact-card:hover,
html[data-theme="night"] .quote-card:hover,
html[data-theme="night"] .poem-card:hover,
html[data-theme="night"] .couplet-poem-card:hover{
  border-color:rgba(213,179,106,.30)!important;
  box-shadow:0 24px 62px rgba(0,0,0,.40)!important;
}
html[data-theme="night"] .section-heading p,
html[data-theme="night"] .section-intro,
html[data-theme="night"] .poem-meta,
html[data-theme="night"] .card-meta,
html[data-theme="night"] .home-card-desc,
html[data-theme="night"] .bio-card p,
html[data-theme="night"] .poem-launch-sub{color:#aaa59e!important}
html[data-theme="night"] .section-heading h2,
html[data-theme="night"] .section-title,
html[data-theme="night"] h1,html[data-theme="night"] h2,
html[data-theme="night"] h3,html[data-theme="night"] h4,
html[data-theme="night"] .home-card-title,
html[data-theme="night"] .bio-card-title,
html[data-theme="night"] .poem-card-title,
html[data-theme="night"] .poem-launch-title{color:#f3efe8!important}

html[data-theme="night"] .fact-table{
  background:#17191d!important;
  border-color:#343840!important;
}
html[data-theme="night"] .fact-table tr{border-bottom-color:#343840!important}
html[data-theme="night"] .fact-table tr:hover{background:#1e2126!important}
html[data-theme="night"] .fact-table td{color:#e9e4dc!important;border-color:#343840!important}
html[data-theme="night"] .fact-table td:first-child{color:#b8b1a8!important}
html[data-theme="night"] body.person-page .fact-table td,
html[data-theme="night"] body.person-page .bio-card p,
html[data-theme="night"] body.person-page .bio-closing p,
html[data-theme="night"] body.person-page .quote-card p{color:#e9e4dc!important}

/* Poem language switcher and actual poem text — fixes dark text on cream panels. */
html[data-theme="night"] .poem-card-header{background:#17191d!important;border-bottom-color:#343840!important}
html[data-theme="night"] .poem-card>.poem-toggle{
  background:#1d2025!important;border-color:#3a3e46!important;box-shadow:0 8px 24px rgba(0,0,0,.24)!important;
}
html[data-theme="night"] .poem-card>.poem-toggle>button{color:#aaa59e!important}
html[data-theme="night"] .poem-card>.poem-toggle>button:hover{color:#fff!important;background:#302025!important}
html[data-theme="night"] .poem-card>.poem-toggle>button.active{color:#fff!important;background:linear-gradient(135deg,#b52633,#82141e)!important}
html[data-theme="night"] .poem-block{background:#121419!important;border-color:#30343b!important}
html[data-theme="night"] .poem-lang,
html[data-theme="night"] .poem-lang p,
html[data-theme="night"] .urdu,
html[data-theme="night"] .roman{color:#eee9e1!important}
html[data-theme="night"] .poem-refrain{color:#e04b56!important}
html[data-theme="night"] .poem-launch-btn{color:#eee9e1!important}

/* Selected Couplets — the screenshot showed the Urdu body becoming almost invisible. */
html[data-theme="night"] .couplet-slideshow{background:#15171b!important;border-color:#343840!important}
html[data-theme="night"] .couplet-slideshow:after{border-color:rgba(213,179,106,.16)!important}
html[data-theme="night"] .couplet-slideshow-body{color:#eee9e1!important;text-shadow:none!important}
html[data-theme="night"] .couplet-slideshow-title{color:#e05a62!important}
html[data-theme="night"] .couplet-slideshow-footer{border-top-color:rgba(255,255,255,.08)!important}
html[data-theme="night"] .couplet-slide-progress{background:rgba(255,255,255,.09)!important}
html[data-theme="night"] .couplet-slide-btn{background:#eee9e1!important;color:#9d1c27!important;border-color:#d8c9aa!important}
html[data-theme="night"] .couplet-slide-btn:hover{background:#b52633!important;color:#fff!important;border-color:#b52633!important}
html[data-theme="night"] .couplet-slide-dots button{background:#756d61!important}
html[data-theme="night"] .couplet-slide-dots button.active{background:#c93440!important}
html[data-theme="night"] .couplet-view-all{color:#fff!important}

/* Person pages / content details */
html[data-theme="night"] .bio-closing{background:#282319!important;border-left-color:var(--gold)!important;color:#eee9e1!important}
html[data-theme="night"] .lineage-marker{background:#282319!important;border-left-color:var(--gold)!important;color:#eee9e1!important}
html[data-theme="night"] .lineage-copy small{color:#aaa39a!important}
html[data-theme="night"] .lineage-number{color:#e04a55!important}
html[data-theme="night"] .lineage-link{color:#e7bd70!important}
html[data-theme="night"] .lineage-link:hover{color:#f5d794!important}

/* About page: keep the red profile side, but make the reading side properly dark. */
html[data-theme="night"] .about-page{background:#0d0f12!important}
html[data-theme="night"] .about-page-card{background:#17191d!important;border-color:#343840!important;box-shadow:0 26px 72px rgba(0,0,0,.40)!important}
html[data-theme="night"] .about-content{background:#17191d!important}
html[data-theme="night"] .about-title{color:#f0ebe3!important}
html[data-theme="night"] .about-lead{color:#e5dfd7!important}
html[data-theme="night"] .about-content p{color:#bdb6ad!important}
html[data-theme="night"] .about-signature{border-top-color:#343840!important}
html[data-theme="night"] .about-signature b{color:#f0ebe3!important}
html[data-theme="night"] .about-signature small{color:#aaa39a!important}
html[data-theme="night"] .about-back{color:#e05a62!important}

/* Breadcrumbs, back buttons, secondary controls */
html[data-theme="night"] .breadcrumb-trail,
html[data-theme="night"] .breadcrumb{background:rgba(255,255,255,.045)!important;border-color:rgba(213,179,106,.28)!important}
html[data-theme="night"] .breadcrumb-trail a:first-child,
html[data-theme="night"] .breadcrumb a:first-child{background:rgba(255,255,255,.08)!important}
html[data-theme="night"] .breadcrumb-trail a,
html[data-theme="night"] .breadcrumb a{color:#e9e4dc!important}
html[data-theme="night"] .poem-back-btn,
html[data-theme="night"] .scroll-top-btn,
html[data-theme="night"] .modal-close{
  background:#1a1d22!important;color:#e7bd70!important;border-color:#3a3e46!important;
}
html[data-theme="night"] .poem-back-btn:hover,
html[data-theme="night"] .modal-close:hover{background:#8f1823!important;color:#fff!important;border-color:#b52633!important}

/* Modal + overlays */
html[data-theme="night"] .about-modal .modal-backdrop{background:rgba(0,0,0,.78)!important}
html[data-theme="night"] .about-panel,
html[data-theme="night"] .about-profile-content{background:#17191d!important;color:#eee9e1!important;border-color:rgba(213,179,106,.28)!important}
html[data-theme="night"] .about-panel .modal-body,
html[data-theme="night"] .about-panel p{color:#ded8cf!important}

/* Inputs / selects / admin UI when Night Mode is used there too. */
html[data-theme="night"] input,
html[data-theme="night"] textarea,
html[data-theme="night"] select,
html[data-theme="night"] .form-control{
  background:#14171b!important;color:#eee9e1!important;border-color:#383c44!important;
}
html[data-theme="night"] input::placeholder,
html[data-theme="night"] textarea::placeholder{color:#7f7b76!important}
html[data-theme="night"] label{color:#d8d1c8!important}

/* Footer */
html[data-theme="night"] footer,
html[data-theme="night"] .site-footer{background:#080a0d!important;color:#cfc8be!important;border-top-color:#24272d!important}
html[data-theme="night"] footer a,
html[data-theme="night"] .site-footer a{color:#d8b96f!important}

/* Make the dark theme feel intentional rather than washed-out. */
html[data-theme="night"] .section-kicker,
html[data-theme="night"] .about-card-eyebrow,
html[data-theme="night"] .bio-card-kicker,
html[data-theme="night"] .poem-tag{color:#e05a62!important}
html[data-theme="night"] .home-card-number{color:#d8b96f!important}
html[data-theme="night"] ::selection{background:#7e2029!important;color:#fff!important}


/* SMAAAQ — Imran link: clean gold text with a refined glow */
.imran-link{
  font-weight:400!important;
  text-decoration:none!important;
  border-bottom:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  margin:0 .08em!important;
  color:#f0cf7b!important;
  text-shadow:
    0 0 4px rgba(240,207,123,.28),
    0 0 10px rgba(201,162,77,.20),
    0 0 18px rgba(201,162,77,.10);
  transition:color .25s ease,text-shadow .25s ease,transform .25s ease;
}
.imran-link:before,
.imran-link:after{
  content:none!important;
  display:none!important;
}
.imran-link:hover,
.imran-link:focus-visible{
  font-weight:400!important;
  text-decoration:none!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  color:#ffe29a!important;
  text-shadow:
    0 0 5px rgba(255,226,154,.55),
    0 0 12px rgba(240,207,123,.42),
    0 0 24px rgba(201,162,77,.24);
  transform:translateY(-1px);
}
.imran-link:active{
  font-weight:400!important;
  text-decoration:none!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
  transform:translateY(0) scale(.98);
}


/* v76 — SMAAAQ cinematic homepage loader: 4-second animation + header handoff */
.smaaaq-loader{position:fixed;inset:0;width:100%;height:100%;height:100dvh;min-height:100svh;z-index:2147483000;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#fff;opacity:1;visibility:visible;pointer-events:auto;overflow:hidden;isolation:isolate;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.smaaaq-loader:before{content:"";position:absolute;left:50%;top:50%;width:min(72vw,520px);height:min(72vw,520px);transform:translate(-50%,-50%) scale(.45);border:1px solid rgba(155,28,36,.13);border-radius:50%;opacity:0;pointer-events:none;animation:smaaaqLoaderRing 2.8s cubic-bezier(.2,.7,.2,1) .2s forwards}
.smaaaq-loader:after{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:0;background:linear-gradient(110deg,transparent 38%,rgba(155,28,36,.055) 49%,rgba(155,28,36,.12) 50%,rgba(155,28,36,.055) 51%,transparent 62%);transform:translateX(-35%);animation:smaaaqLoaderSweep 2.4s ease-in-out .65s forwards}
.smaaaq-loader-word{position:relative;z-index:2;display:block;width:max-content;max-width:90vw;margin:0;padding:0;text-align:center;white-space:nowrap;font-family:'Cinzel',Georgia,serif;font-size:clamp(2.35rem,11vw,7rem);font-weight:500;line-height:1;letter-spacing:.12em;padding-left:.12em;color:#9b1c24;opacity:0;transform:translate3d(0,14px,0) scale(.88);filter:blur(7px);text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;text-shadow:0 0 0 rgba(155,28,36,0);animation:smaaaqLogoReveal 1.15s cubic-bezier(.16,1,.3,1) .18s forwards,smaaaqLogoPulse 1.65s ease-in-out 1.25s 1 forwards;will-change:opacity,transform,filter}
.smaaaq-loader-word:before{content:"";position:absolute;left:50%;top:50%;width:1.9em;height:1.9em;transform:translate(-50%,-50%) scale(.5);border-radius:50%;z-index:-1;pointer-events:none;border:1px solid rgba(155,28,36,.10);box-shadow:0 0 0 14px rgba(155,28,36,.025),0 0 45px rgba(155,28,36,.08);opacity:0;animation:smaaaqLogoHalo 2.1s ease .55s forwards}
.smaaaq-loader-word:after{content:"";position:absolute;left:50%;top:50%;width:1.3em;height:1.3em;transform:translate(-50%,-50%) scale(.55);border-radius:50%;z-index:-1;pointer-events:none;background:radial-gradient(circle,rgba(155,28,36,.15),rgba(155,28,36,.045) 42%,transparent 72%);filter:blur(14px);opacity:0;animation:smaaaqLogoAura 2.2s ease .45s forwards}
.smaaaq-loader.is-merging .smaaaq-loader-word{animation:smaaaqLogoMerge .8s cubic-bezier(.76,0,.18,1) forwards!important}
.smaaaq-loader.is-merging:before{animation:smaaaqRingMerge .8s cubic-bezier(.76,0,.18,1) forwards}
.smaaaq-loader.is-merging:after{animation:smaaaqSweepMerge .8s ease forwards}
.smaaaq-loader.is-leaving{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .10s linear,visibility .10s linear}
.site-header.smaaaq-loader-hidden .logo{opacity:0!important;transform:none!important;pointer-events:none!important}
.site-header .logo{transition:opacity .32s ease,transform .55s cubic-bezier(.22,1,.36,1),letter-spacing .55s cubic-bezier(.22,1,.36,1),color .35s ease!important}
html[data-theme="night"] .smaaaq-loader{background:#000}
html[data-theme="night"] .smaaaq-loader:before{border-color:rgba(224,190,105,.16);box-shadow:0 0 0 14px rgba(224,190,105,.025),0 0 45px rgba(224,190,105,.09)}
html[data-theme="night"] .smaaaq-loader:after{background:linear-gradient(110deg,transparent 38%,rgba(224,190,105,.045) 49%,rgba(224,190,105,.11) 50%,rgba(224,190,105,.045) 51%,transparent 62%)}
html[data-theme="night"] .smaaaq-loader-word{color:#e0be69;text-shadow:0 0 14px rgba(224,190,105,.22),0 0 38px rgba(201,162,77,.12)}
html[data-theme="night"] .smaaaq-loader-word:before{border-color:rgba(224,190,105,.12);box-shadow:0 0 0 14px rgba(224,190,105,.025),0 0 45px rgba(201,162,77,.09)}
html[data-theme="night"] .smaaaq-loader-word:after{background:radial-gradient(circle,rgba(224,190,105,.17),rgba(201,162,77,.05) 42%,transparent 72%)}
@keyframes smaaaqLogoReveal{0%{opacity:0;transform:translate3d(0,14px,0) scale(.88);filter:blur(7px);letter-spacing:.02em}55%{opacity:1;transform:translate3d(0,-4px,0) scale(1.04);filter:blur(0);letter-spacing:.14em}78%{transform:translate3d(0,1px,0) scale(.985)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);letter-spacing:.12em}}
@keyframes smaaaqLogoPulse{0%,100%{text-shadow:0 0 10px rgba(155,28,36,.08),0 0 24px rgba(155,28,36,.04)}50%{transform:translate3d(0,-1px,0) scale(1.018);text-shadow:0 0 16px rgba(155,28,36,.18),0 0 42px rgba(155,28,36,.09)}}
@keyframes smaaaqLogoHalo{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}45%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.55;transform:translate(-50%,-50%) scale(1.08)}}
@keyframes smaaaqLogoAura{0%{opacity:0;transform:translate(-50%,-50%) scale(.55)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:.7;transform:translate(-50%,-50%) scale(1.12)}}
@keyframes smaaaqLoaderRing{0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}25%{opacity:1}100%{opacity:.25;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes smaaaqLoaderSweep{0%{opacity:0;transform:translateX(-55%)}18%{opacity:1}80%{opacity:.65}100%{opacity:0;transform:translateX(55%)}}
@keyframes smaaaqLogoMerge{0%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0);letter-spacing:.12em;text-shadow:0 0 16px rgba(155,28,36,.16),0 0 35px rgba(155,28,36,.08)}42%{opacity:1;transform:translate3d(calc(var(--merge-x)*.62),calc(var(--merge-y)*.62),0) scale(calc(var(--merge-scale)*1.035));filter:blur(.15px);letter-spacing:.08em}100%{opacity:1;transform:translate3d(var(--merge-x),var(--merge-y),0) scale(var(--merge-scale));filter:blur(0);letter-spacing:.02em;text-shadow:none}}
@keyframes smaaaqRingMerge{0%{opacity:.3;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.8)}}
@keyframes smaaaqSweepMerge{0%{opacity:.25;transform:translateX(0)}100%{opacity:0;transform:translateX(35%)}}
@media(max-width:600px){.smaaaq-loader{padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}.smaaaq-loader:before{width:78vw;height:78vw}.smaaaq-loader-word{max-width:88vw;font-size:clamp(2.15rem,12.5vw,4rem);letter-spacing:.075em;padding-left:.075em;line-height:1}}
@media(max-width:360px){.smaaaq-loader-word{max-width:90vw;font-size:clamp(2rem,11.5vw,2.75rem);letter-spacing:.055em;padding-left:.055em}}
@media(min-width:601px){.smaaaq-loader-word{font-size:clamp(3rem,8vw,7rem)}}


/* v80 — Clean, fast cinematic theme transition. No full-screen color wash or wipe. */
.theme-transition-layer{
  position:fixed;left:0;top:0;width:0;height:0;z-index:2147482990;pointer-events:none;
  border-radius:50%;opacity:0;transform:translate(-50%,-50%) scale(.15);
  background:radial-gradient(circle,rgba(201,162,77,.28) 0%,rgba(201,162,77,.10) 24%,transparent 68%);
  filter:blur(1px);will-change:transform,opacity;
}
.theme-transition-layer.is-active{animation:themePulse .62s cubic-bezier(.16,1,.3,1) both}
.theme-transition-layer.is-settling{opacity:0}
@keyframes themePulse{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}18%{opacity:.9}55%{opacity:.38;transform:translate(-50%,-50%) scale(5)}100%{opacity:0;transform:translate(-50%,-50%) scale(8)}}
html.theme-is-transitioning,
html.theme-is-transitioning body,
html.theme-is-transitioning body *{
  transition-timing-function:cubic-bezier(.22,1,.36,1)!important;
}
html.theme-is-transitioning body,
html.theme-is-transitioning .site-header,
html.theme-is-transitioning .site-header .header-inner,
html.theme-is-transitioning main,
html.theme-is-transitioning main section,
html.theme-is-transitioning footer,
html.theme-is-transitioning .card,
html.theme-is-transitioning .poem-block,
html.theme-is-transitioning .couplet-slideshow,
html.theme-is-transitioning .about-panel,
html.theme-is-transitioning input,
html.theme-is-transitioning textarea,
html.theme-is-transitioning select,
html.theme-is-transitioning button{
  transition-duration:.52s!important;
  transition-property:background-color,color,border-color,box-shadow,fill,stroke!important;
}
.theme-toggle-btn{
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .32s cubic-bezier(.22,1,.36,1),background-color .42s ease,border-color .42s ease,color .42s ease,box-shadow .42s ease;
}
.theme-toggle-btn:active{transform:scale(.93)}
.theme-toggle-btn:before{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(circle,currentColor 0%,transparent 66%);
  opacity:0;transform:scale(.2);pointer-events:none;
}
.theme-toggle-btn:active:before{animation:themeButtonFlash .48s cubic-bezier(.16,1,.3,1) both}
@keyframes themeButtonFlash{0%{opacity:.24;transform:scale(.2)}100%{opacity:0;transform:scale(1.35)}}
.theme-toggle-btn svg{position:relative;z-index:1;transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .28s ease}
.theme-toggle-btn .theme-icon-moon{transform:rotate(0) scale(1)}
.theme-toggle-btn .theme-icon-sun{transform:rotate(-90deg) scale(.65);opacity:0}
html[data-theme="night"] .theme-toggle-btn .theme-icon-moon{transform:rotate(90deg) scale(.65);opacity:0}
html[data-theme="night"] .theme-toggle-btn .theme-icon-sun{transform:rotate(0) scale(1);opacity:1}
@media(max-width:600px){.theme-transition-layer{background:radial-gradient(circle,rgba(201,162,77,.22) 0%,rgba(201,162,77,.07) 25%,transparent 68%)}}

/* v79 — Fast cinematic return-to-home transition. No 4s opener on repeat visits. */
.smaaaq-loader.is-return{
  background:transparent!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  animation:smaaaqReturnExit .68s cubic-bezier(.16,1,.3,1) forwards!important;
}
.smaaaq-loader.is-return .smaaaq-loader-word{
  color:var(--red,#9b1c24)!important;
  opacity:0!important;
  filter:none!important;
  transform:translate3d(-42vw,0,0) scale(.72)!important;
}
.smaaaq-loader.is-return:before{
  content:"";
  position:absolute;inset:0;width:auto;height:auto;
  border:0!important;border-radius:0!important;
  background:linear-gradient(105deg,transparent 0%,transparent 37%,rgba(155,28,36,.12) 44%,rgba(155,28,36,.92) 49%,rgba(224,190,105,.62) 50%,rgba(155,28,36,.92) 51%,rgba(155,28,36,.12) 56%,transparent 63%,transparent 100%)!important;
  opacity:0!important;
  transform:translate3d(-120%,0,0) skewX(-14deg)!important;
  animation:smaaaqReturnSlash .62s cubic-bezier(.16,1,.3,1) forwards!important;
}
.smaaaq-loader.is-return:after{
  content:"";
  position:absolute;inset:-30%;
  background:radial-gradient(circle at 50% 50%,rgba(201,162,77,.13),transparent 28%),linear-gradient(90deg,transparent 0%,rgba(155,28,36,.08) 48%,transparent 52%);
  opacity:0!important;
  transform:scale(.75) rotate(-4deg);
  animation:smaaaqReturnPulse .68s cubic-bezier(.16,1,.3,1) forwards!important;
}
.smaaaq-return-transition{
  position:fixed;inset:0;z-index:2147482995;pointer-events:none;overflow:hidden;isolation:isolate;
  opacity:0;
  background:transparent;
  animation:smaaaqReturnOverlay .68s cubic-bezier(.16,1,.3,1) both;
}
.smaaaq-return-transition:before{
  content:"";position:absolute;inset:-25%;
  background:linear-gradient(104deg,transparent 38%,rgba(155,28,36,.13) 46%,rgba(155,28,36,.92) 49.5%,rgba(224,190,105,.62) 50%,rgba(155,28,36,.92) 50.5%,rgba(155,28,36,.13) 54%,transparent 62%);
  transform:translate3d(-105%,0,0) skewX(-12deg);
  animation:smaaaqReturnSlash .62s cubic-bezier(.16,1,.3,1) both;
}
.smaaaq-return-transition:after{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(circle at 50% 50%,rgba(201,162,77,.15),transparent 30%);
  transform:scale(.6);
  animation:smaaaqReturnPulse .68s cubic-bezier(.16,1,.3,1) both;
}
html[data-theme="night"] .smaaaq-return-transition:before{
  background:linear-gradient(104deg,transparent 38%,rgba(224,190,105,.10) 46%,rgba(224,190,105,.92) 49.5%,rgba(155,28,36,.70) 50%,rgba(224,190,105,.92) 50.5%,rgba(224,190,105,.10) 54%,transparent 62%);
}
@keyframes smaaaqReturnSlash{
  0%{opacity:0;transform:translate3d(-105%,0,0) skewX(-12deg)}
  12%{opacity:1}
  58%{opacity:1}
  100%{opacity:0;transform:translate3d(105%,0,0) skewX(-12deg)}
}
@keyframes smaaaqReturnPulse{
  0%{opacity:0;transform:scale(.6)}
  25%{opacity:1;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.35)}
}
@keyframes smaaaqReturnOverlay{
  0%{opacity:1}
  45%{opacity:1}
  100%{opacity:0}
}
@keyframes smaaaqReturnExit{
  0%{opacity:1;visibility:visible}
  70%{opacity:1;visibility:visible}
  100%{opacity:0;visibility:hidden}
}


/* v81 — SMAAAQ navigation icon: premium orbit / compass mark */
.menu-toggle{
  position:relative!important;display:grid!important;place-items:center!important;
  width:44px!important;height:44px!important;padding:0!important;border-radius:14px!important;
  border:1px solid rgba(201,162,77,.48)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(255,248,235,.92))!important;
  box-shadow:0 7px 20px rgba(70,18,22,.10),inset 0 1px 0 rgba(255,255,255,.9)!important;
  overflow:hidden!important;isolation:isolate;
}
.menu-toggle:before{
  content:"";position:absolute;inset:5px;border-radius:11px;
  border:1px solid rgba(155,28,36,.12);
  background:radial-gradient(circle at 50% 45%,rgba(201,162,77,.13),transparent 62%);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .35s ease,background .35s ease;
}
.nav-icon-orbit{
  position:relative;width:25px;height:25px;display:block;
  transform:rotate(-10deg);transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.nav-icon-orbit:before,.nav-icon-orbit:after{
  content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;
  border:1.7px solid currentColor;border-radius:50%;
  transform:translate(-50%,-50%) rotate(32deg);
}
.nav-icon-orbit:after{width:12px;height:12px;border-color:rgba(201,162,77,.95);transform:translate(-50%,-50%) rotate(-28deg);}
.nav-icon-core{
  position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);background:#9b1c24;box-shadow:0 0 0 3px rgba(201,162,77,.13),0 0 10px rgba(155,28,36,.22);z-index:2;
}
.nav-icon-line{
  position:absolute;left:50%;top:50%;height:1.5px;width:11px;background:currentColor;
  transform-origin:0 50%;z-index:3;border-radius:2px;
}
.nav-icon-line-a{transform:translate(0,-50%) rotate(0deg)}
.nav-icon-line-b{transform:translate(0,-50%) rotate(120deg)}
.nav-icon-line-c{transform:translate(0,-50%) rotate(240deg)}
.menu-toggle:hover{
  border-color:#c9a24d!important;background:linear-gradient(145deg,#fffdf8,#fff3dc)!important;
  transform:translateY(-2px);box-shadow:0 11px 27px rgba(70,18,22,.14),0 0 0 4px rgba(201,162,77,.07)!important;
}
.menu-toggle:hover .nav-icon-orbit{transform:rotate(35deg) scale(1.04)}
.menu-toggle:active .nav-icon-orbit{transform:rotate(55deg) scale(.92)}
.menu-toggle[aria-expanded="true"] .nav-icon-orbit{transform:rotate(135deg) scale(.94)}
.menu-toggle[aria-expanded="true"]:before{border-color:rgba(201,162,77,.30);background:radial-gradient(circle,rgba(201,162,77,.18),transparent 68%)}
html[data-theme="night"] .menu-toggle{
  background:linear-gradient(145deg,#17191d,#101216)!important;
  border-color:rgba(213,179,106,.45)!important;color:#f1eadf;
  box-shadow:0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.04)!important;
}
html[data-theme="night"] .menu-toggle:before{border-color:rgba(213,179,106,.13);background:radial-gradient(circle,rgba(213,179,106,.10),transparent 65%)}
html[data-theme="night"] .nav-icon-core{background:#d5b36a;box-shadow:0 0 0 3px rgba(213,179,106,.12),0 0 12px rgba(213,179,106,.24)}
@media(max-width:600px){.menu-toggle{width:42px!important;height:42px!important;border-radius:13px!important}.nav-icon-orbit{width:24px;height:24px}}


/* v82 — SMAAAQ signature navigation icon: orbit + four-point compass mark */
.menu-toggle{
  position:relative!important; display:grid!important; place-items:center!important;
  width:44px!important; height:44px!important; min-width:44px; padding:8px!important;
  border-radius:50%!important; overflow:visible!important;
  background:linear-gradient(145deg,var(--white),var(--gray))!important;
  border:1px solid rgba(201,162,77,.55)!important;
  box-shadow:0 7px 20px rgba(80,20,25,.10),inset 0 1px 0 rgba(255,255,255,.75)!important;
  transition:transform .42s cubic-bezier(.22,1,.36,1),box-shadow .42s ease,border-color .35s ease!important;
}
.menu-toggle span{display:none!important}
.menu-toggle .nav-orbit-icon{
  width:27px!important;height:27px!important;display:block!important;
  fill:none;overflow:visible;
  color:var(--red);
  transition:transform .55s cubic-bezier(.16,1,.3,1),color .35s ease,filter .35s ease;
}
.nav-orbit-ring{stroke:currentColor;stroke-width:1.6;opacity:.42;stroke-dasharray:3 2.5}
.nav-orbit-mark{fill:currentColor;stroke:var(--gold);stroke-width:.8;stroke-linejoin:round}
.nav-orbit-core{fill:var(--gold);stroke:none}
.menu-toggle:hover{
  transform:translateY(-2px) rotate(-4deg)!important;
  border-color:var(--gold)!important;
  box-shadow:0 12px 28px rgba(80,20,25,.16),0 0 0 5px rgba(201,162,77,.08)!important;
}
.menu-toggle:hover .nav-orbit-icon{transform:rotate(32deg) scale(1.08);filter:drop-shadow(0 0 5px rgba(201,162,77,.35))}
.menu-toggle[aria-expanded="true"]{transform:rotate(8deg) scale(.97)!important}
.menu-toggle[aria-expanded="true"] .nav-orbit-icon{transform:rotate(135deg) scale(1.04)}
.menu-toggle:active{transform:scale(.91)!important}
html[data-theme="night"] .menu-toggle{
  background:linear-gradient(145deg,#1a1d22,#101216)!important;
  border-color:rgba(213,179,106,.48)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
html[data-theme="night"] .nav-orbit-mark{fill:var(--red);stroke:var(--gold)}
@media(max-width:600px){
  .menu-toggle{width:42px!important;height:42px!important;min-width:42px;padding:7px!important}
  .menu-toggle .nav-orbit-icon{width:26px!important;height:26px!important}
}


/* v84 — Sufinama footer badge refinement: clean, native SVG mark */


/* v84 — Simple, reliable navigation icon across every page */
.menu-toggle .nav-simple-icon{
  width:25px!important;height:25px!important;display:block!important;
  fill:none!important;stroke:var(--red)!important;stroke-width:1.8!important;
  stroke-linecap:round!important;stroke-linejoin:round!important;
  overflow:visible!important;
  transition:transform .28s ease,stroke .25s ease,filter .25s ease!important;
}
.menu-toggle:hover .nav-simple-icon{
  transform:scale(1.06)!important;
  stroke:var(--gold)!important;
  filter:drop-shadow(0 0 4px rgba(201,162,77,.28));
}
.menu-toggle[aria-expanded="true"] .nav-simple-icon{transform:rotate(90deg)!important}
.menu-toggle:active .nav-simple-icon{transform:scale(.94)!important}
html[data-theme="night"] .menu-toggle .nav-simple-icon{stroke:var(--gold)!important}
@media(max-width:600px){.menu-toggle .nav-simple-icon{width:24px!important;height:24px!important}}

/* v86 — transparent original Sufinama logo: no pill, no box, no duplicate text */
.footer-sufinama-wrap{margin:0 0 24px!important;display:flex!important;justify-content:center!important;align-items:center!important}
.footer-sufinama-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;padding:0!important;margin:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;text-decoration:none!important;line-height:0!important;transition:transform .35s cubic-bezier(.22,1,.36,1),filter .3s ease,opacity .3s ease!important}
.footer-sufinama-logo{display:block!important;width:150px!important;height:auto!important;max-width:72vw!important;object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;opacity:.96!important}
.footer-sufinama-link:hover{transform:translateY(-2px) scale(1.015)!important;filter:drop-shadow(0 7px 18px rgba(213,179,106,.16))!important}
.footer-sufinama-link:focus-visible{outline:2px solid rgba(213,179,106,.75)!important;outline-offset:6px!important;border-radius:4px!important}
html[data-theme="night"] .footer-sufinama-logo{opacity:1!important}
@media(max-width:600px){.footer-sufinama-wrap{margin-bottom:20px!important}.footer-sufinama-logo{width:132px!important;max-width:64vw!important}}


/* v87 — Present Sufinama as the author's external/social profile link, not site ownership. */
.footer-sufinama-wrap{margin:0 0 24px!important;display:flex!important;justify-content:center!important;align-items:center!important}
.footer-sufinama-link{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;padding:8px 13px!important;margin:0!important;border:1px solid #383838!important;background:transparent!important;box-shadow:none!important;border-radius:999px!important;text-decoration:none!important;line-height:1!important;color:#cfcfcf!important;font:600 .78rem var(--sans)!important;transition:color .25s ease,border-color .25s ease,transform .25s ease,background .25s ease!important}
.footer-sufinama-logo{display:block!important;width:24px!important;height:24px!important;max-width:24px!important;object-fit:contain!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;opacity:.95!important}
.footer-sufinama-label{display:inline-block!important;white-space:nowrap!important}
.footer-sufinama-link:hover{color:#fff!important;border-color:var(--gold)!important;background:rgba(255,255,255,.035)!important;transform:translateY(-2px)!important;filter:none!important}
.footer-sufinama-link:focus-visible{outline:2px solid rgba(213,179,106,.75)!important;outline-offset:3px!important}
html[data-theme="night"] .footer-sufinama-link{color:#d8d8d8!important;border-color:#3b3f45!important;background:transparent!important}
@media(max-width:600px){.footer-sufinama-wrap{margin-bottom:20px!important}.footer-sufinama-link{padding:7px 11px!important;font-size:.74rem!important}.footer-sufinama-logo{width:22px!important;height:22px!important;max-width:22px!important}}


.footer-intro{max-width:620px;margin:0 auto 22px;color:#a8a8a8;font-size:.82rem;line-height:1.7}
.footer-sufinama-label{font:600 .76rem var(--sans)!important;color:#cfcfcf!important}
.site-notice{position:fixed;inset:0;z-index:2147482500;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(10,7,8,.68);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .3s ease}
.site-notice.is-open{opacity:1;pointer-events:auto}.site-notice-panel{width:min(560px,100%);background:var(--white);color:var(--ink);border:1px solid rgba(201,162,77,.35);border-radius:22px;box-shadow:0 30px 100px rgba(0,0,0,.32);padding:28px;position:relative;transform:translateY(16px) scale(.98);transition:transform .38s cubic-bezier(.16,1,.3,1)}.site-notice.is-open .site-notice-panel{transform:none}.site-notice-kicker{font:700 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:9px}.site-notice-title{font:700 clamp(1.35rem,3vw,1.8rem)/1.2 var(--serif);margin:0 42px 12px}.site-notice-message{font:.95rem/1.8 var(--serif);white-space:pre-wrap;color:var(--ink);margin:0}.site-notice-actions{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}.site-notice-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:10px;background:var(--red);color:#fff;text-decoration:none;font:700 .8rem var(--sans);border:1px solid var(--red)}.site-notice-close{position:absolute;right:16px;top:16px;width:38px;height:38px;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink);font-size:1.35rem;cursor:pointer}.site-notice-close:hover{border-color:var(--gold);color:var(--red)}
html[data-theme="night"] .site-notice-panel{background:#121417;color:#f3efe8;border-color:rgba(213,179,106,.34)}html[data-theme="night"] .site-notice-message{color:#f3efe8}html[data-theme="night"] .site-notice-close{background:#181b20;color:#f3efe8;border-color:#30343b}
@media(max-width:600px){
  /* v93 — SMAAAQ Notice: mobile-first popup optimization */

  .site-notice{
    align-items:flex-end;
    justify-content:center;
    padding:10px;
    padding-top:max(10px,env(safe-area-inset-top));
    padding-right:max(10px,env(safe-area-inset-right));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
    padding-left:max(10px,env(safe-area-inset-left));
  }
  .site-notice-panel{
    width:100%;
    max-width:520px;
    max-height:min(82dvh,680px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    padding:22px 18px 18px;
    border-radius:20px;
    box-shadow:0 22px 70px rgba(0,0,0,.34);
    transform:translateY(24px) scale(.985);
  }
  .site-notice.is-open .site-notice-panel{transform:translateY(0) scale(1)}
  .site-notice-kicker{font-size:.58rem;letter-spacing:.14em;margin-bottom:8px}
  .site-notice-title{
    margin:0 42px 10px 0;
    font-size:clamp(1.18rem,6vw,1.55rem);
    line-height:1.18;
    overflow-wrap:anywhere;
  }
  .site-notice-message{
    font-size:.9rem;
    line-height:1.7;
    overflow-wrap:anywhere;
  }
  .site-notice-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
    margin-top:17px;
  }
  .site-notice-btn{
    width:100%;
    min-height:44px;
    padding:11px 14px;
    border-radius:11px;
    font-size:.76rem;
    box-sizing:border-box;
  }
  .site-notice-close{
    right:12px;
    top:12px;
    width:38px;
    height:38px;
    min-width:38px;
    font-size:1.25rem;
    -webkit-tap-highlight-color:transparent;
  }
}
@media(max-width:380px){
  .site-notice{padding:8px}
  .site-notice-panel{padding:20px 15px 15px;border-radius:18px;max-height:84dvh}
  .site-notice-title{font-size:1.12rem;margin-right:40px}
  .site-notice-message{font-size:.86rem;line-height:1.65}
  .site-notice-close{right:10px;top:10px;width:36px;height:36px;min-width:36px}
}
@media(max-width:600px) and (orientation:landscape){
  .site-notice{align-items:center;padding:8px}
  .site-notice-panel{max-height:90dvh;padding:18px 20px}
}
@media(prefers-reduced-motion:no-preference){
  @keyframes smaaaqNoticeMobileIn{from{opacity:0;transform:translateY(28px) scale(.985)}to{opacity:1;transform:none}}
  .site-notice.is-open .site-notice-panel{animation:smaaaqNoticeMobileIn .42s cubic-bezier(.16,1,.3,1) both}
}



/* v89 — Public Admin Login button
   Gives the site owner a clear, restrained path to the protected admin panel. */
.primary-nav .nav-admin-login{
  display:inline-flex!important;align-items:center;justify-content:center;gap:6px;
  color:#fff!important;
  background:linear-gradient(135deg,#b8863b,#8e1b1b)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:999px!important;
  padding:8px 12px!important;
  font-weight:700!important;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(60,12,15,.16);
  text-decoration:none!important;
  transition:transform .28s var(--ease-premium),box-shadow .28s ease,filter .28s ease!important;
}
.primary-nav .nav-admin-login:hover,.primary-nav .nav-admin-login:focus-visible{
  color:#fff!important;
  transform:translateY(-1px)!important;
  filter:brightness(1.06);
  box-shadow:0 9px 24px rgba(60,12,15,.22),0 0 0 3px rgba(201,162,77,.10);
}
html[data-theme="night"] .primary-nav .nav-admin-login{
  background:linear-gradient(135deg,#d5b36a,#9d202a)!important;
  color:#fff!important;
  border-color:rgba(213,179,106,.38)!important;
}
@media(max-width:980px){
  .primary-nav .nav-admin-login{justify-content:flex-start;border-radius:11px!important;padding:12px 13px!important}
}

/* v92 — Admin Login visibility repair. Keep the protected login entry visible in every navigation implementation. */
.site-header .primary-nav .nav-admin-login,
.primary-nav .nav-admin-login{
  display:inline-flex!important;
  visibility:visible!important;
  opacity:1!important;
}
@media(max-width:1180px){
  .site-header .primary-nav .nav-admin-login{
    width:100%!important;
    min-height:51px!important;
    justify-content:flex-start!important;
    margin-top:4px!important;
  }
}

/* v95 — Admin-uploaded social logos */
.social-link-logo{width:16px!important;height:16px!important;display:block!important;object-fit:contain!important;border-radius:4px!important;flex:0 0 16px!important}.social-link-fallback{display:inline-grid;place-items:center;width:16px;height:16px;font-size:13px;line-height:1}.social-link:has(.social-link-logo){gap:8px}

/* v96 — Notice popup visibility and mobile fix. No backdrop blur; notice is always viewport-centered. */
.site-notice{
  position:fixed!important; inset:0!important; z-index:2147483646!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
  width:100vw!important; height:100dvh!important; min-height:100vh!important;
  padding:20px!important; margin:0!important; box-sizing:border-box!important;
  background:rgba(10,7,8,.42)!important;
  backdrop-filter:none!important; -webkit-backdrop-filter:none!important;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s!important;
}
.site-notice.is-open{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transition:opacity .28s ease,visibility 0s linear 0s!important}
.site-notice-panel{
  position:relative!important; z-index:2!important;
  width:min(560px,calc(100vw - 40px))!important;
  max-width:560px!important; max-height:min(82dvh,680px)!important;
  overflow:auto!important; overscroll-behavior:contain!important;
  margin:0!important; box-sizing:border-box!important;
  transform:translateY(18px) scale(.97)!important;
  opacity:0!important;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .3s ease!important;
}
.site-notice.is-open .site-notice-panel{transform:none!important;opacity:1!important}
.site-notice-close{z-index:4!important;pointer-events:auto!important}
@media(max-width:600px){
  .site-notice{padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important}
  .site-notice-panel{width:min(100%,520px)!important;max-height:calc(100dvh - 24px)!important;border-radius:20px!important;padding:22px 18px 18px!important}
}

/* Atef Ali profile button */
.atef-profile-btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;margin-top:24px;padding:13px 21px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:linear-gradient(135deg,rgba(142,27,27,.96),rgba(111,12,19,.96));color:#fff;text-decoration:none;font-weight:700;font-size:.84rem;letter-spacing:.035em;box-shadow:0 10px 28px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18);backdrop-filter:blur(10px);transition:transform .25s ease,box-shadow .25s ease,filter .25s ease,border-color .25s ease}.atef-profile-btn svg{width:19px;height:19px;fill:currentColor;flex:0 0 auto}.atef-profile-btn:hover{transform:translateY(-3px);filter:brightness(1.08);border-color:rgba(255,255,255,.7);box-shadow:0 14px 34px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.22)}.atef-profile-btn:focus-visible{outline:3px solid rgba(255,215,120,.65);outline-offset:4px}.atef-profile-btn-hero{margin-top:26px;min-width:185px}.atef-profile-btn-light{margin-top:0;background:var(--red);border-color:var(--red);color:#fff}.atef-profile-btn-light:hover{background:#6f0c13;border-color:#6f0c13}
@media(max-width:640px){.atef-profile-btn{margin-top:20px;width:max-content;max-width:100%;justify-content:center}}

/* ============================================================
   PERSON PAGES — IMAM ALI MASTER TEMPLATE SYSTEM
   All Family Tree biographies share one visual grammar while
   retaining their own historically supported sections/content.
   ============================================================ */
body.person-template-master main > .bio-section{background:var(--theme-bg,var(--surface));}
body.person-template-master main > .bio-section:nth-of-type(odd){background:var(--theme-bg,var(--surface));}
body.person-template-master .section-heading{align-items:flex-end;gap:22px;margin-bottom:34px;}
body.person-template-master .section-heading > span{display:block;flex:1;height:1px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.65;margin-bottom:8px;}
body.person-template-master .bio-grid,.person-template-master .quote-grid{align-items:stretch;}
body.person-template-master .bio-card,body.person-template-master .fact-card,body.person-template-master .quote-card{min-height:0;}
body.person-template-master .bio-card{padding:28px;}
body.person-template-master .bio-card p,body.person-template-master .quote-card p{line-height:1.85;}
body.person-template-master .fact-card{overflow:hidden;}
body.person-template-master .fact-table td{vertical-align:top;line-height:1.65;}
body.person-template-master .bio-closing{margin-top:26px;}
@media(max-width:640px){
 body.person-template-master .section-heading > span{margin-top:14px;width:100%;}
 body.person-template-master .bio-card{padding:22px;}
 body.person-template-master .fact-table td{padding:12px 13px;}
 body.person-template-master .fact-table td:first-child{width:39%;}
}


/* v122 — inline lineage references */
.lineage-reference{color:var(--maroon);font-weight:650;text-decoration:underline;text-decoration-color:rgba(201,162,77,.65);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .25s ease,text-decoration-color .25s ease}
.lineage-reference:hover{color:var(--red);text-decoration-color:var(--gold)}
html[data-theme="night"] .lineage-reference{color:#e4bf70;text-decoration-color:rgba(228,191,112,.55)}
/* The lineage-reference auto-linker (java.js) also runs inside .page-hero's
   intro paragraph (e.g. "...Prophet Muhammad (S.A.W.W)..." on person pages),
   which always sits on the same dark maroon gradient in both themes. In
   light mode, --maroon (#9b1c24) is nearly identical to the gradient's own
   end color, making the link unreadable. Keep it on the same light gold
   used elsewhere on this banner (.imran-link), regardless of theme. */
.page-hero .lineage-reference{color:#f0cf7b;text-decoration-color:rgba(240,207,123,.55)}
.page-hero .lineage-reference:hover{color:#fff;text-decoration-color:#f0cf7b}


/* v123 — Family Tree editorial overview */
.family-tree-intro{padding:56px 0 24px;background:linear-gradient(180deg,var(--surface),var(--white));border-bottom:1px solid rgba(201,162,77,.12)}
.family-tree-intro-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.9fr);gap:32px;align-items:stretch}
.family-tree-intro-copy{padding:8px 0 4px}.family-tree-intro-copy .section-kicker{margin:0 0 10px;color:var(--gold);font-family:var(--sans);font-size:.72rem;font-weight:800;letter-spacing:.16em}.family-tree-intro-copy h2{margin:0 0 12px;font-family:var(--serif);font-size:clamp(1.8rem,3.2vw,2.55rem);letter-spacing:-.025em;color:var(--ink)}.family-tree-intro-copy>p:last-child{max-width:650px;margin:0;color:var(--muted);line-height:1.85;font-size:.96rem}
.family-tree-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.68);box-shadow:0 12px 32px rgba(35,15,15,.045);backdrop-filter:blur(10px)}.family-tree-stat{display:flex;flex-direction:column;justify-content:center;min-height:112px;padding:15px 12px;text-align:center;border-radius:14px;background:linear-gradient(145deg,var(--white),rgba(255,250,239,.72));border:1px solid rgba(201,162,77,.16)}.family-tree-stat strong{font-family:var(--display);font-size:1.55rem;line-height:1;color:var(--maroon);letter-spacing:.02em}.family-tree-stat span{margin-top:9px;font:600 .67rem/1.45 var(--sans);color:var(--muted);letter-spacing:.035em}
html[data-theme="night"] .family-tree-intro{background:linear-gradient(180deg,#151516,#171719);border-color:rgba(201,162,77,.08)}html[data-theme="night"] .family-tree-intro-copy h2{color:#f1ede6}html[data-theme="night"] .family-tree-stats{background:rgba(30,30,32,.78);border-color:#353338}html[data-theme="night"] .family-tree-stat{background:linear-gradient(145deg,#1c1c1e,#24221e);border-color:rgba(201,162,77,.14)}html[data-theme="night"] .family-tree-stat strong{color:#e5c477}
@media(max-width:820px){.family-tree-intro{padding:42px 0 18px}.family-tree-intro-grid{grid-template-columns:1fr;gap:22px}.family-tree-stats{grid-template-columns:repeat(3,1fr)}}@media(max-width:520px){.family-tree-stats{gap:7px;padding:7px;border-radius:16px}.family-tree-stat{min-height:94px;padding:12px 7px}.family-tree-stat strong{font-size:1.25rem}.family-tree-stat span{font-size:.61rem;margin-top:7px}}


/* =========================================================
   FAMILY TREE SEARCH — lineage-only explorer
   ========================================================= */
.family-tree-explorer{padding-top:38px}
.family-tree-search{margin:0 auto 2.2rem;max-width:920px;padding:1.15rem 1.2rem 1.25rem;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,var(--card),rgba(201,162,77,.035));box-shadow:var(--shadow-soft)}
.family-tree-search-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.family-tree-search-heading h2{margin:.18rem 0 0;font-family:var(--serif);font-size:clamp(1.35rem,3vw,1.8rem);letter-spacing:-.025em;color:var(--text)}
.family-tree-search-count{font-family:var(--display);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.family-tree-search-box{display:flex;align-items:center;gap:.7rem;min-height:56px;padding:0 .8rem 0 1rem;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 7px 22px rgba(30,15,15,.045);transition:border-color .25s,box-shadow .25s,transform .25s}
.family-tree-search-box:focus-within{border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,77,.11),0 12px 28px rgba(30,15,15,.07);transform:translateY(-1px)}
.family-tree-search-icon{font-family:Georgia,serif;font-size:1.55rem;line-height:1;color:var(--gold);transform:rotate(-20deg);display:inline-block}
.family-tree-search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:500 .98rem var(--body)}
.family-tree-search-box input::placeholder{color:var(--muted);opacity:.82}
.family-tree-search-box button{width:34px;height:34px;border:0;border-radius:50%;background:rgba(201,162,77,.12);color:var(--maroon);font-size:1.3rem;line-height:1;cursor:pointer}
.family-tree-search-results{display:grid;gap:.55rem;margin-top:.75rem}
.family-search-result{display:grid;grid-template-columns:42px minmax(0,1fr) 30px;align-items:center;gap:.8rem;padding:.72rem .8rem;border:1px solid var(--line);border-radius:15px;background:var(--panel);color:var(--text);text-decoration:none;transition:transform .25s var(--ease-pro),border-color .25s,box-shadow .25s,background .25s}
.family-search-result:hover{transform:translateY(-2px);border-color:rgba(201,162,77,.72);box-shadow:0 12px 26px rgba(30,15,15,.08);background:linear-gradient(145deg,var(--panel),rgba(201,162,77,.07))}
.family-search-result.is-related{border-color:rgba(201,162,77,.48);background:linear-gradient(145deg,var(--panel),rgba(201,162,77,.055))}
.family-search-result-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:10px;background:rgba(201,162,77,.13);color:var(--maroon);font:700 .66rem var(--display);letter-spacing:.05em}
.family-search-result-copy{min-width:0;display:grid;gap:.18rem}
.family-search-result-copy strong{font:600 .94rem var(--serif);line-height:1.35;color:var(--text)}
.family-search-result-copy small{font-size:.72rem;line-height:1.45;color:var(--muted)}
.family-search-result-copy mark{background:rgba(201,162,77,.32);color:inherit;border-radius:3px;padding:0 .08em}
.family-search-result-arrow{font-size:1.05rem;color:var(--gold);text-align:center}
.family-tree-search-empty{padding:1.05rem;text-align:center;border:1px dashed rgba(201,162,77,.55);border-radius:15px;background:rgba(201,162,77,.045)}
.family-tree-search-empty strong{display:block;color:var(--text);font:600 .96rem var(--serif);margin-bottom:.25rem}
.family-tree-search-empty span{font-size:.78rem;color:var(--muted)}
#tree-wrap .tree-item[hidden]{display:none!important}
html[data-theme="night"] .family-tree-search{background:linear-gradient(145deg,#18181a,#211e1a);border-color:#38353a;box-shadow:0 18px 44px rgba(0,0,0,.24)}
html[data-theme="night"] .family-tree-search-box{background:#111113;border-color:#38353a}
html[data-theme="night"] .family-search-result{background:#161618;border-color:#353238}
html[data-theme="night"] .family-search-result:hover{background:#211f1b;border-color:#7a6334}
html[data-theme="night"] .family-search-result-copy strong{color:#f2eee8}
html[data-theme="night"] .family-search-result-icon{background:rgba(201,162,77,.15);color:#e8c978}
@media(max-width:700px){
 .family-tree-search{padding:.95rem;margin-bottom:1.6rem;border-radius:19px}
 .family-tree-search-heading{align-items:flex-start;flex-direction:column;gap:.2rem}
 .family-tree-search-count{font-size:.62rem}
 .family-tree-search-box{min-height:52px}
 .family-search-result{grid-template-columns:36px minmax(0,1fr) 22px;gap:.65rem;padding:.65rem}
 .family-search-result-icon{width:32px;height:32px}
 .family-search-result-copy strong{font-size:.86rem}
 .family-search-result-copy small{font-size:.68rem}
}

/* v132 — Family Tree intelligent search: prominence ordering + Did You Mean */
.family-tree-did-you-mean{display:flex;align-items:center;justify-content:center;gap:.65rem;flex-wrap:wrap;padding:.7rem .9rem;border:1px solid rgba(201,162,77,.42);border-radius:14px;background:linear-gradient(145deg,var(--panel),rgba(201,162,77,.055));color:var(--muted);font-size:.78rem}
.family-tree-did-you-mean strong{font-family:var(--serif);color:var(--text)}
.family-tree-did-you-mean small{width:100%;text-align:center;color:var(--muted);font-size:.68rem}
.family-search-suggestion{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .65rem;border-radius:9px;background:rgba(201,162,77,.12);color:var(--maroon);font:600 .9rem var(--serif);text-decoration:none;border:1px solid rgba(201,162,77,.3)}
.family-search-suggestion:hover{border-color:var(--gold);transform:translateY(-1px)}
html[data-theme="night"] .family-tree-did-you-mean{background:#18181a;border-color:#5a4a2b}
html[data-theme="night"] .family-search-suggestion{color:#e8c978;background:rgba(201,162,77,.12);border-color:#5a4a2b}

/* ============================================================
   v133 — FAMILY TREE HARD ISOLATION / VISIBILITY FIX
   The universal action-button system intentionally targets
   `a.node-inner`, but Family Tree generation cards are content
   cards, not action buttons. These scoped rules come LAST so no
   later global selector can turn the lineage cards into red pills
   or reduce the contrast of their names.
   ============================================================ */
#family-tree #tree-wrap .tree-item > a.node-inner,
#family-tree #tree-wrap .tree-item > button.node-inner{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:.85rem!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  padding:1rem 1.15rem!important;
  border:1px solid rgba(201,162,77,.42)!important;
  border-radius:18px!important;
  background:#fff!important;
  color:#171719!important;
  box-shadow:0 10px 30px rgba(35,15,15,.045)!important;
  text-decoration:none!important;
  text-shadow:none!important;
}
#family-tree #tree-wrap .tree-item > a.node-inner .node-name,
#family-tree #tree-wrap .tree-item > button.node-inner .node-name{
  display:block!important;
  color:#8f1b25!important;
  font-family:var(--display)!important;
  font-size:1.02rem!important;
  font-weight:700!important;
  line-height:1.48!important;
  letter-spacing:.005em!important;
  opacity:1!important;
  visibility:visible!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  text-shadow:none!important;
}
#family-tree #tree-wrap .tree-item > a.node-inner .node-sub,
#family-tree #tree-wrap .tree-item > button.node-inner .node-sub{
  display:block!important;
  color:#8f6d21!important;
  opacity:1!important;
  visibility:visible!important;
  font-family:var(--body)!important;
  font-size:.8rem!important;
  line-height:1.45!important;
  font-style:italic!important;
}
#family-tree #tree-wrap .tree-item > a.node-inner .node-arrow,
#family-tree #tree-wrap .tree-item > button.node-inner .node-arrow{
  flex:0 0 auto!important;
  width:34px!important;
  height:34px!important;
  border-radius:10px!important;
  display:grid!important;
  place-items:center!important;
  color:#941923!important;
  background:rgba(201,162,77,.12)!important;
  opacity:1!important;
  visibility:visible!important;
}
#family-tree #tree-wrap .tree-item > a.node-inner::before,
#family-tree #tree-wrap .tree-item > button.node-inner::before{
  display:none!important;
}
#family-tree #tree-wrap .tree-item > a.node-inner:hover,
#family-tree #tree-wrap .tree-item > a.node-inner:focus-visible,
#family-tree #tree-wrap .tree-item > button.node-inner:hover,
#family-tree #tree-wrap .tree-item > button.node-inner:focus-visible{
  background:#fffaf0!important;
  color:#171719!important;
  border-color:#c9a24d!important;
  transform:translateY(-2px)!important;
}
#family-tree #tree-wrap .tree-item > a.node-inner:hover .node-name,
#family-tree #tree-wrap .tree-item > a.node-inner:focus-visible .node-name,
#family-tree #tree-wrap .tree-item > button.node-inner:hover .node-name,
#family-tree #tree-wrap .tree-item > button.node-inner:focus-visible .node-name{
  color:#8f1b25!important;
}
#family-tree #tree-wrap .tree-item > a.node-inner:hover .node-arrow,
#family-tree #tree-wrap .tree-item > a.node-inner:focus-visible .node-arrow{
  color:#941923!important;
  background:rgba(201,162,77,.2)!important;
}

/* Keep the reveal animation, but never allow a script/CSS timing issue
   to leave the lineage permanently invisible. */
#family-tree #tree-wrap .tree-item{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}
#family-tree #tree-wrap .tree-item[hidden]{display:none!important}

/* Night theme: explicit colours, independent of global action variables. */
html[data-theme="night"] #family-tree #tree-wrap .tree-item > a.node-inner,
html[data-theme="night"] #family-tree #tree-wrap .tree-item > button.node-inner{
  background:linear-gradient(145deg,#19191b,#202022)!important;
  border-color:#3d3a36!important;
  color:#f1ede6!important;
  box-shadow:0 14px 34px rgba(0,0,0,.24)!important;
}
html[data-theme="night"] #family-tree #tree-wrap .tree-item > a.node-inner .node-name,
html[data-theme="night"] #family-tree #tree-wrap .tree-item > button.node-inner .node-name{
  color:#f4efe7!important;
}
html[data-theme="night"] #family-tree #tree-wrap .tree-item > a.node-inner .node-sub,
html[data-theme="night"] #family-tree #tree-wrap .tree-item > button.node-inner .node-sub{
  color:#d7b76c!important;
}
html[data-theme="night"] #family-tree #tree-wrap .tree-item > a.node-inner .node-arrow,
html[data-theme="night"] #family-tree #tree-wrap .tree-item > button.node-inner .node-arrow{
  color:#e8c978!important;
  background:rgba(201,162,77,.13)!important;
}
html[data-theme="night"] #family-tree #tree-wrap .tree-item > a.node-inner:hover,
html[data-theme="night"] #family-tree #tree-wrap .tree-item > a.node-inner:focus-visible{
  background:linear-gradient(145deg,#202022,#29251d)!important;
  border-color:#c9a24d!important;
}

@media(max-width:700px){
  #family-tree #tree-wrap .tree-item > a.node-inner,
  #family-tree #tree-wrap .tree-item > button.node-inner{
    padding:.9rem .85rem!important;
    border-radius:15px!important;
    gap:.65rem!important;
  }
  #family-tree #tree-wrap .tree-item > a.node-inner .node-name,
  #family-tree #tree-wrap .tree-item > button.node-inner .node-name{
    font-size:.88rem!important;
    line-height:1.5!important;
  }
  #family-tree #tree-wrap .tree-item > a.node-inner .node-sub,
  #family-tree #tree-wrap .tree-item > button.node-inner .node-sub{
    font-size:.72rem!important;
  }
  #family-tree #tree-wrap .tree-item > a.node-inner .node-arrow,
  #family-tree #tree-wrap .tree-item > button.node-inner .node-arrow{
    width:29px!important;
    height:29px!important;
  }
}

.site-notice{
  transition:opacity .52s cubic-bezier(.22,1,.36,1),backdrop-filter .52s ease,-webkit-backdrop-filter .52s ease;
  will-change:opacity,backdrop-filter;
}
.site-notice.is-open{
  animation:smaaaqNoticeBackdropIn .62s cubic-bezier(.16,1,.3,1) both;
}
.site-notice-panel{
  overflow:hidden;
  transform:translateY(38px) scale(.91) rotateX(7deg);
  transform-origin:50% 100%;
  opacity:0;
  filter:blur(5px);
  transition:none;
  will-change:transform,opacity,filter;
}
.site-notice.is-open .site-notice-panel{
  animation:smaaaqNoticePanelIn .72s cubic-bezier(.16,1,.3,1) .03s both;
}
.site-notice-panel::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:linear-gradient(90deg,transparent,#c9a24d 35%,#f2d88d 50%,#c9a24d 65%,transparent);
  transform:scaleX(.2);
  opacity:0;
}
.site-notice.is-open .site-notice-panel::before{
  animation:smaaaqNoticeGoldLine .8s cubic-bezier(.16,1,.3,1) .28s both;
}
.site-notice-kicker,
.site-notice-title,
.site-notice-message,
.site-notice-actions{
  opacity:0;
  transform:translateY(13px);
}
.site-notice.is-open .site-notice-kicker{animation:smaaaqNoticeChild .55s cubic-bezier(.16,1,.3,1) .25s both}
.site-notice.is-open .site-notice-title{animation:smaaaqNoticeChild .6s cubic-bezier(.16,1,.3,1) .31s both}
.site-notice.is-open .site-notice-message{animation:smaaaqNoticeChild .6s cubic-bezier(.16,1,.3,1) .38s both}
.site-notice.is-open .site-notice-actions{animation:smaaaqNoticeChild .6s cubic-bezier(.16,1,.3,1) .45s both}
.site-notice-close{
  transition:transform .35s cubic-bezier(.16,1,.3,1),background .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.site-notice-close:hover{transform:rotate(90deg) scale(1.06);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.site-notice-btn{
  position:relative;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease,background .25s ease;
}
.site-notice-btn::before{
  content:"";
  position:absolute;
  top:0;bottom:0;left:-65%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.25),transparent);
  transform:skewX(-18deg);
  transition:left .55s cubic-bezier(.16,1,.3,1);
}
.site-notice-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(118,16,24,.22)}
.site-notice-btn:hover::before{left:125%}

@keyframes smaaaqNoticeBackdropIn{
  from{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
  to{opacity:1;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
}
@keyframes smaaaqNoticePanelIn{
  0%{opacity:0;transform:translateY(38px) scale(.91) rotateX(7deg);filter:blur(5px)}
  55%{opacity:1;transform:translateY(-5px) scale(1.012) rotateX(0);filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}
@keyframes smaaaqNoticeGoldLine{to{opacity:1;transform:scaleX(1)}}
@keyframes smaaaqNoticeChild{to{opacity:1;transform:none}}

/* Reverse motion is applied while the existing dismiss class is active. */
.site-notice:not(.is-open){
  pointer-events:none;
}
.site-notice.is-closing .site-notice-panel{animation:smaaaqNoticePanelOut .42s cubic-bezier(.7,0,.84,0) both}
.site-notice.is-closing{animation:smaaaqNoticeBackdropOut .44s cubic-bezier(.7,0,.84,0) both}
@keyframes smaaaqNoticePanelOut{
  from{opacity:1;transform:none;filter:none}
  to{opacity:0;transform:translateY(25px) scale(.94) rotateX(-4deg);filter:blur(4px)}
}
@keyframes smaaaqNoticeBackdropOut{
  from{opacity:1;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
  to{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
}

@media(max-width:600px){
  .site-notice-panel{transform:translateY(48px) scale(.95);transform-origin:50% 100%;}
  .site-notice.is-open .site-notice-panel{animation:smaaaqNoticePanelMobileIn .68s cubic-bezier(.16,1,.3,1) .02s both}
  @keyframes smaaaqNoticePanelMobileIn{
    0%{opacity:0;transform:translateY(48px) scale(.95);filter:blur(4px)}
    60%{opacity:1;transform:translateY(-5px) scale(1.01);filter:blur(0)}
    100%{opacity:1;transform:none;filter:none}
  }
}
/* Admin-controlled loading screen */
.smaaaq-loader{--loader-bg-light:#fff;--loader-bg-dark:#000;--loader-accent-light:#9b1c24;--loader-accent-dark:#e0be69;--loader-overlay:#000;--loader-overlay-opacity:0;--loader-logo-scale:1;--loader-duration:3000ms;--loader-min:1200ms}
.smaaaq-loader-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;visibility:hidden;z-index:0;background:#000}
.smaaaq-loader-video-overlay{position:absolute;inset:0;background:var(--loader-overlay);opacity:var(--loader-overlay-opacity);z-index:1;pointer-events:none}
.smaaaq-loader-status{position:absolute;z-index:4;bottom:10%;left:50%;transform:translateX(-50%);font:500 12px/1.4 'DM Sans',sans-serif;letter-spacing:.1em;opacity:.58;white-space:nowrap}
.smaaaq-loader-indicator{position:absolute;z-index:4;bottom:7%;left:50%;width:min(180px,42vw);height:2px;transform:translateX(-50%);opacity:0;background:currentColor}
.smaaaq-loader[data-type="video"] .smaaaq-loader-video,.smaaaq-loader.loader-type-video .smaaaq-loader-video{opacity:1;visibility:visible}
.smaaaq-loader[data-type="video"] .smaaaq-loader-word,.smaaaq-loader.loader-type-video .smaaaq-loader-word{opacity:1;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.smaaaq-loader[data-type="video"] .smaaaq-loader-status,.smaaaq-loader.loader-type-video .smaaaq-loader-status{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.smaaaq-loader.loader-no-logo .smaaaq-loader-word{display:none}
.smaaaq-loader[data-type="minimal"] .smaaaq-loader-word{font-size:clamp(2rem,8vw,4rem);filter:none;animation:none;opacity:1;transform:none}
.smaaaq-loader[data-type="minimal"]:before,.smaaaq-loader[data-type="minimal"]:after{display:none}
.smaaaq-loader[data-type="minimal"] .smaaaq-loader-status{opacity:.55}
.smaaaq-loader[data-animation="none"] .smaaaq-loader-word{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
.smaaaq-loader[data-animation="zoom"] .smaaaq-loader-word{animation:smaaaqAdminZoom 1s cubic-bezier(.16,1,.3,1) .05s both}
.smaaaq-loader[data-animation="blur"] .smaaaq-loader-word{animation:smaaaqAdminBlur 1s cubic-bezier(.16,1,.3,1) .05s both}
.smaaaq-loader[data-speed="slow"] .smaaaq-loader-word{animation-duration:1.5s!important}.smaaaq-loader[data-speed="fast"] .smaaaq-loader-word{animation-duration:.65s!important}
html[data-theme="night"] .smaaaq-loader{background:var(--loader-bg-dark)}
html[data-theme="light"] .smaaaq-loader{background:var(--loader-bg-light)}
html[data-theme="light"] .smaaaq-loader-word{color:var(--loader-accent-light)}
html[data-theme="night"] .smaaaq-loader-word{color:var(--loader-accent-dark)}
.smaaaq-loader-word{transform:translate3d(0,14px,0) scale(calc(.88 * var(--loader-logo-scale)))}
@keyframes smaaaqAdminZoom{from{opacity:0;transform:scale(.72);filter:blur(4px)}to{opacity:1;transform:scale(var(--loader-logo-scale));filter:none}}
@keyframes smaaaqAdminBlur{from{opacity:0;transform:translateY(8px) scale(.96);filter:blur(14px)}to{opacity:1;transform:translateY(0) scale(var(--loader-logo-scale));filter:blur(0)}}
.smaaaq-loader[data-indicator="bar"] .smaaaq-loader-indicator{opacity:.7;animation:smaaaqLoaderBar var(--loader-duration) linear both}.smaaaq-loader-indicator.is-visible{opacity:.7}
@keyframes smaaaqLoaderBar{from{transform:translateX(-50%) scaleX(0);transform-origin:left}to{transform:translateX(-50%) scaleX(1);transform-origin:left}}

/* Multilingual family-tree prose bridge */
body.translation-loading::after{content:"Translating…";position:fixed;right:18px;bottom:18px;z-index:99999;padding:9px 13px;border:1px solid rgba(142,27,27,.25);border-radius:999px;background:rgba(255,255,255,.94);color:#8e1b1b;font:600 12px/1.2 'DM Sans',sans-serif;box-shadow:0 8px 30px rgba(0,0,0,.12);backdrop-filter:blur(10px)}
html[dir="rtl"] body{font-family:'Noto Nastaliq Urdu','Source Serif 4',serif}
html[dir="rtl"] .lang-switcher,html[dir="rtl"] .header-controls{direction:ltr}

/* v151: English + Urdu only. Urdu is RTL only inside page content; the header remains LTR and visually unchanged. */
body[data-lang="ur"] main, body[data-lang="ur"] main * {
  font-family: 'Noto Nastaliq Urdu', 'Source Serif 4', serif;
}
body[data-lang="ur"] main { direction: rtl; text-align: right; }
body[data-lang="ur"] main .breadcrumb,
body[data-lang="ur"] main .section-heading,
body[data-lang="ur"] main .bio-card,
body[data-lang="ur"] main .fact-table,
body[data-lang="ur"] main .quote-card,
body[data-lang="ur"] main .family-tree-search,
body[data-lang="ur"] main .family-tree-search-results { direction: rtl; }
body[data-lang="ur"] main .breadcrumb { text-align: right; }
body[data-lang="ur"] .site-header, body[data-lang="ur"] .site-header * { direction:ltr; }

/* Inline links on biographical pages */
.inline-person-link{color:var(--gold);font-weight:650;text-decoration:underline;text-decoration-color:rgba(201,162,77,.72);text-decoration-thickness:1px;text-underline-offset:4px;cursor:pointer;transition:color .25s ease,text-decoration-color .25s ease,opacity .2s ease}.inline-person-link:hover{color:var(--red);text-decoration-color:var(--gold);opacity:1}.inline-person-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
/* v317: --gold (#c9a24d) only gives ~2.4:1 against the light-theme white/
   off-white card backgrounds these links sit on — well under the 4.5:1
   readable-text minimum. Night mode already redefines --gold to a lighter
   #d5b36a that reads fine against its dark backgrounds, so only light mode
   needs a darker, still-gold, readable shade here. */
html[data-theme="light"] .inline-person-link{color:#90702c}

/* ===== v157: premium Imam al-Mahdi + Prophet motion system ===== */
.mahdi-hero{position:relative;overflow:hidden;text-align:center;padding:76px 0 92px;background:radial-gradient(circle at 50% 0%,rgba(201,162,77,.24),transparent 40%),linear-gradient(135deg,#5b0c14 0%,#941923 52%,#650f17 100%);isolation:isolate}
.mahdi-hero:before,.mahdi-hero:after{content:"";position:absolute;inset:auto;pointer-events:none;border:1px solid rgba(201,162,77,.18);border-radius:50%;animation:mahdiOrbit 18s linear infinite}
.mahdi-hero:before{width:520px;height:520px;left:50%;top:50%;transform:translate(-50%,-45%)}.mahdi-hero:after{width:760px;height:760px;left:50%;top:50%;transform:translate(-50%,-45%);opacity:.45;animation-duration:28s;animation-direction:reverse}
.mahdi-hero-inner{position:relative;z-index:2;width:min(980px,calc(100% - 40px));margin:auto}.mahdi-eyebrow{font:700 .78rem var(--sans);letter-spacing:.22em;color:#e3c77c;margin:26px 0 12px;text-transform:uppercase;animation:mahdiRise .8s .08s var(--ease-premium) both}.mahdi-hero h1{font-family:var(--serif);font-size:clamp(2.35rem,6vw,5rem);line-height:1.08;color:#fff;margin:0 auto 20px;letter-spacing:-.025em;text-shadow:0 12px 40px rgba(0,0,0,.25);animation:mahdiRise .9s .16s var(--ease-premium) both}.mahdi-hero-desc{max-width:800px;margin:auto;color:rgba(255,255,255,.87);font-size:clamp(1rem,1.7vw,1.2rem);line-height:1.9;animation:mahdiRise .9s .28s var(--ease-premium) both}.mahdi-ornament{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px;color:#d8b968;animation:mahdiFade 1s .45s ease both}.mahdi-ornament span{width:min(180px,24vw);height:1px;background:linear-gradient(90deg,transparent,#d8b968,transparent)}.mahdi-ornament b{font-size:1.4rem;font-weight:400;animation:mahdiPulse 3s ease-in-out infinite}
.mahdi-fact-card,.mahdi-story .prose-block,.mahdi-timeline .timeline-card,.deputy-card,.source-card,.mahdi-nav-card{animation:mahdiCardIn .8s var(--ease-premium) both}.mahdi-fact-card{border-top:2px solid #c9a24d}.mahdi-story .prose-block{max-width:900px;margin:auto;font-size:1.08rem;line-height:2}.mahdi-occultation{background:linear-gradient(180deg,transparent,rgba(201,162,77,.045),transparent)}.mahdi-timeline{margin-top:34px}.mahdi-timeline .timeline-card{border-top:2px solid #c9a24d}.deputy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.deputy-card{padding:26px;border:1px solid rgba(201,162,77,.28);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(251,247,239,.92));box-shadow:0 16px 38px rgba(60,30,15,.07);transition:transform .35s var(--ease-premium),box-shadow .35s,border-color .35s}.deputy-card:hover{transform:translateY(-7px);box-shadow:0 24px 50px rgba(60,30,15,.13);border-color:#c9a24d}.deputy-card>span{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#8e1b1b;color:#fff;font:700 .72rem var(--sans);margin-bottom:12px}.deputy-card h3{font-family:var(--serif);margin:0 0 8px}.deputy-card p{line-height:1.75;margin:0}.source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}.source-card{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid rgba(201,162,77,.32);border-radius:16px;text-decoration:none;color:inherit;background:rgba(255,255,255,.7);transition:transform .3s var(--ease-premium),box-shadow .3s,border-color .3s}.source-card:hover{transform:translateY(-5px);border-color:#c9a24d;box-shadow:0 16px 32px rgba(60,30,15,.1)}.source-card strong{color:#8e1b1b}.source-card span{line-height:1.6;font-size:.94rem}.mahdi-nav-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 26px;border:1px solid rgba(201,162,77,.35);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(251,247,239,.9));box-shadow:0 12px 30px rgba(60,30,15,.07)}.mahdi-nav-card>span{font:600 .78rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#766b61;text-align:center}.mahdi-page .inline-person-link,.imam-mahdi-page .inline-person-link{color:#9a741f;text-decoration:none;font-weight:700;background:linear-gradient(transparent 65%,rgba(201,162,77,.28) 65%);transition:color .25s,background .25s}.imam-mahdi-page .inline-person-link:hover{color:#7b1119;background:linear-gradient(transparent 45%,rgba(201,162,77,.5) 45%)}
.prophet-page .reveal,.prophet-page .timeline-card,.prophet-page .source-card,.prophet-page .scripture-card{transition:transform .7s var(--ease-premium),opacity .7s ease,box-shadow .35s,border-color .35s}.prophet-page .reveal:not(.visible){opacity:0;transform:translateY(26px)}.prophet-page .reveal.visible{opacity:1;transform:none}.prophet-page .timeline-card:hover,.prophet-page .source-card:hover,.prophet-page .scripture-card:hover{transform:translateY(-6px);box-shadow:0 20px 45px rgba(60,30,15,.12);border-color:rgba(201,162,77,.55)}.prophet-page .prophet-hero:before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle,rgba(201,162,77,.11) 0 1px,transparent 2px);background-size:38px 38px;opacity:.35;animation:prophetStars 24s linear infinite}.prophet-page .prophet-hero-inner{animation:prophetHeroIn 1s var(--ease-premium) both}.prophet-page .scripture-card{position:relative;overflow:hidden}.prophet-page .scripture-card:after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:skewX(-18deg);animation:prophetSheen 6s ease-in-out infinite}.prophet-page .section-heading span{transition:width .7s var(--ease-premium)}.prophet-page .reveal.visible .section-heading span{width:78px!important}
@keyframes mahdiRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes mahdiFade{from{opacity:0}to{opacity:1}}@keyframes mahdiPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.18);opacity:1}}@keyframes mahdiOrbit{to{transform:translate(-50%,-45%) rotate(360deg)}}@keyframes mahdiCardIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}@keyframes prophetStars{to{transform:translate3d(38px,38px,0)}}@keyframes prophetHeroIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes prophetSheen{0%,55%{transform:translateX(-180%) skewX(-18deg)}75%,100%{transform:translateX(500%) skewX(-18deg)}}
@media(max-width:760px){.deputy-grid,.source-grid{grid-template-columns:1fr}.mahdi-nav-card{flex-direction:column}.mahdi-hero{padding:64px 0 76px}.mahdi-hero:before{width:340px;height:340px}.mahdi-hero:after{width:500px;height:500px}}


/* v160 — Imam pages: Imam Ali VISUAL STYLE ONLY.
   Do not alter the individual page content or section structure. */
.imam-standard-page .prose-block,
#imam-musa-al-kadhim .prose-block,
#ali-al-rida .prose-block,
#imam-muhammad-al-jawad .prose-block,
#imam-ali-al-hadi .prose-block,
#imam-hasan-al-askari .prose-block{
  position:relative;
  padding:30px clamp(22px,3vw,32px);
  margin:0;
  background:var(--white);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.045);
  overflow:hidden;
  transition:transform .32s var(--ease-premium),box-shadow .32s var(--ease-premium),border-color .28s ease,background-color .28s ease,color .25s ease;
}
.imam-standard-page .prose-block::before,
#imam-musa-al-kadhim .prose-block::before,
#ali-al-rida .prose-block::before,
#imam-muhammad-al-jawad .prose-block::before,
#imam-ali-al-hadi .prose-block::before,
#imam-hasan-al-askari .prose-block::before{
  content:"";position:absolute;left:0;top:0;width:3px;height:36%;
  background:linear-gradient(180deg,var(--red),var(--gold));
  transform:scaleY(.7);transform-origin:top;
  transition:transform .32s var(--ease-premium);
}
.imam-standard-page .prose-block:hover,
#imam-musa-al-kadhim .prose-block:hover,
#ali-al-rida .prose-block:hover,
#imam-muhammad-al-jawad .prose-block:hover,
#imam-ali-al-hadi .prose-block:hover,
#imam-hasan-al-askari .prose-block:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:#dcc58d;
}
.imam-standard-page .prose-block:hover::before,
#imam-musa-al-kadhim .prose-block:hover::before,
#ali-al-rida .prose-block:hover::before,
#imam-muhammad-al-jawad .prose-block:hover::before,
#imam-ali-al-hadi .prose-block:hover::before,
#imam-hasan-al-askari .prose-block:hover::before{transform:scaleY(1)}
.imam-standard-page .prose-block p,
#imam-musa-al-kadhim .prose-block p,
#ali-al-rida .prose-block p,
#imam-muhammad-al-jawad .prose-block p,
#imam-ali-al-hadi .prose-block p,
#imam-hasan-al-askari .prose-block p{color:var(--muted);line-height:1.85;margin:0}
.imam-standard-page .prose-block p + p,
#imam-musa-al-kadhim .prose-block p + p,
#ali-al-rida .prose-block p + p,
#imam-muhammad-al-jawad .prose-block p + p,
#imam-ali-al-hadi .prose-block p + p,
#imam-hasan-al-askari .prose-block p + p{margin-top:1rem}

/* Same Imam Ali visual language for facts, headings and navigation, without changing markup. */
#imam-musa-al-kadhim .fact-table,
#ali-al-rida .fact-table,
#imam-muhammad-al-jawad .fact-table,
#imam-ali-al-hadi .fact-table,
#imam-hasan-al-askari .fact-table{
  box-shadow:0 8px 30px rgba(0,0,0,.045);
}
#imam-musa-al-kadhim .section-heading h2,
#ali-al-rida .section-heading h2,
#imam-muhammad-al-jawad .section-heading h2,
#imam-ali-al-hadi .section-heading h2,
#imam-hasan-al-askari .section-heading h2{letter-spacing:-.02em}

html[data-theme="night"] .imam-standard-page .prose-block,
html[data-theme="night"] #imam-musa-al-kadhim .prose-block,
html[data-theme="night"] #ali-al-rida .prose-block,
html[data-theme="night"] #imam-muhammad-al-jawad .prose-block,
html[data-theme="night"] #imam-ali-al-hadi .prose-block,
html[data-theme="night"] #imam-hasan-al-askari .prose-block{
  background:#171719;
  color:#f1ede6;
  border-color:#38383d;
  box-shadow:0 12px 32px rgba(0,0,0,.25);
}
html[data-theme="night"] .imam-standard-page .prose-block p,
html[data-theme="night"] #imam-musa-al-kadhim .prose-block p,
html[data-theme="night"] #ali-al-rida .prose-block p,
html[data-theme="night"] #imam-muhammad-al-jawad .prose-block p,
html[data-theme="night"] #imam-ali-al-hadi .prose-block p,
html[data-theme="night"] #imam-hasan-al-askari .prose-block p{color:#c9c4bb}

@media(max-width:640px){
 .imam-standard-page .prose-block,
 #imam-musa-al-kadhim .prose-block,
 #ali-al-rida .prose-block,
 #imam-muhammad-al-jawad .prose-block,
 #imam-ali-al-hadi .prose-block,
 #imam-hasan-al-askari .prose-block{padding:22px 18px}
}

/* v160 dark-mode correction for the Mahdi page: every custom light card must follow Night Mode. */
html[data-theme="night"] .imam-mahdi-page .deputy-card,
html[data-theme="night"] .imam-mahdi-page .source-card,
html[data-theme="night"] .imam-mahdi-page .mahdi-nav-card,
html[data-theme="night"] .imam-mahdi-page .mahdi-story .prose-block,
html[data-theme="night"] .imam-mahdi-page .mahdi-fact-card{
  background:#171719!important;
  color:#f1ede6;
  border-color:rgba(228,191,112,.26);
  box-shadow:0 12px 32px rgba(0,0,0,.28);
}
html[data-theme="night"] .imam-mahdi-page .deputy-card h3,
html[data-theme="night"] .imam-mahdi-page .source-card strong,
html[data-theme="night"] .imam-mahdi-page .mahdi-nav-card,
html[data-theme="night"] .imam-mahdi-page .mahdi-fact-card h3{color:#f1ede6}
html[data-theme="night"] .imam-mahdi-page .deputy-card p,
html[data-theme="night"] .imam-mahdi-page .source-card span,
html[data-theme="night"] .imam-mahdi-page .mahdi-nav-card>span,
html[data-theme="night"] .imam-mahdi-page .mahdi-fact-card p{color:#c9c4bb}


/* SMAAAQ v162 — premium visual redesign for Imam Muhammad al-Mahdi */
.imam-mahdi-page{--mahdi-gold:#c9a24d;--mahdi-gold-light:#ead39a;--mahdi-red:#8e1b1b}
.imam-mahdi-page .mahdi-hero-premium{min-height:clamp(610px,78vh,820px);display:flex;align-items:center;padding:72px 0 76px;background:radial-gradient(circle at 50% 20%,rgba(236,208,133,.18),transparent 24%),radial-gradient(circle at 50% 80%,rgba(0,0,0,.22),transparent 52%),linear-gradient(145deg,#430810 0%,#7d111b 44%,#a12029 64%,#510a12 100%);isolation:isolate}
.imam-mahdi-page .mahdi-hero-inner{width:min(1060px,calc(100% - 34px));z-index:5}
.imam-mahdi-page .mahdi-hero-aura{position:absolute;left:50%;top:48%;width:min(720px,86vw);height:min(720px,86vw);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(226,191,103,.12),rgba(226,191,103,.035) 34%,transparent 67%);animation:mahdiAura 7s ease-in-out infinite}
.imam-mahdi-page .mahdi-hero-ring{position:absolute;left:50%;top:49%;border:1px solid rgba(237,210,145,.2);border-radius:50%;pointer-events:none;z-index:1}
.imam-mahdi-page .ring-one{width:min(560px,68vw);height:min(560px,68vw);transform:translate(-50%,-50%) rotate(12deg);border-style:dashed;animation:mahdiSpin 30s linear infinite}
.imam-mahdi-page .ring-two{width:min(880px,105vw);height:min(880px,105vw);transform:translate(-50%,-50%) rotate(-18deg);opacity:.45;animation:mahdiSpinReverse 44s linear infinite}
.imam-mahdi-page .mahdi-hero-stars{position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle,rgba(255,239,190,.8) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.55) 0 1px,transparent 1.5px);background-size:93px 117px,157px 139px;background-position:10px 20px,42px 61px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 75%,transparent);animation:mahdiStars 14s linear infinite}
.imam-mahdi-page .mahdi-seal{width:82px;height:82px;margin:22px auto 8px;border:1px solid rgba(239,213,150,.62);border-radius:50%;display:grid;place-items:center;position:relative;background:radial-gradient(circle,rgba(247,224,162,.14),rgba(0,0,0,.1));box-shadow:0 0 0 8px rgba(201,162,77,.035),0 0 55px rgba(225,190,105,.12);animation:mahdiSeal 1.1s .15s var(--ease-premium) both}
.imam-mahdi-page .mahdi-seal:before,.imam-mahdi-page .mahdi-seal:after{content:"";position:absolute;inset:-9px;border:1px solid rgba(239,213,150,.14);border-radius:50%}.imam-mahdi-page .mahdi-seal:after{inset:-17px;opacity:.5}
.imam-mahdi-page .mahdi-seal span{font:600 1.55rem var(--display);color:#f2d891}.imam-mahdi-page .mahdi-seal small{position:absolute;bottom:-12px;background:#71111a;padding:1px 8px;color:#f2d891;font-size:.95rem}
.imam-mahdi-page .mahdi-hero h1{font-size:clamp(2.55rem,7vw,5.6rem);max-width:980px}.imam-mahdi-page .mahdi-hero-desc{max-width:820px;font-size:clamp(1rem,1.65vw,1.18rem)}
.imam-mahdi-page .mahdi-hero-stats{width:min(900px,100%);margin:34px auto 0;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid rgba(236,209,143,.26);border-radius:20px;background:rgba(24,3,7,.24);backdrop-filter:blur(12px);overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.16)}
.imam-mahdi-page .mahdi-hero-stats div{padding:17px 15px;border-right:1px solid rgba(236,209,143,.18);display:flex;flex-direction:column;gap:4px}.imam-mahdi-page .mahdi-hero-stats div:last-child{border-right:0}.imam-mahdi-page .mahdi-hero-stats strong{font:600 1.05rem var(--display);color:#f0d58f}.imam-mahdi-page .mahdi-hero-stats span{font:700 .58rem var(--sans);letter-spacing:.14em;color:rgba(255,255,255,.62)}
.imam-mahdi-page .mahdi-section-index{position:sticky;top:0;z-index:20;padding:8px 0;background:color-mix(in srgb,var(--surface) 88%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}
.imam-mahdi-page .mahdi-section-index .section-inner{display:flex;justify-content:center;gap:7px;overflow:auto;scrollbar-width:none}.imam-mahdi-page .mahdi-section-index .section-inner::-webkit-scrollbar{display:none}
.imam-mahdi-page .mahdi-section-index a{flex:0 0 auto;width:35px;height:30px;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;text-decoration:none;color:var(--muted);font:700 .62rem var(--sans);transition:.28s var(--ease-premium);background:var(--white)}.imam-mahdi-page .mahdi-section-index a:hover{color:var(--red);border-color:var(--gold);transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.06)}
.imam-mahdi-page .mahdi-fact-card{border-radius:22px;overflow:hidden;box-shadow:0 18px 55px rgba(39,17,8,.07)}.imam-mahdi-page .fact-table td{padding:17px 20px}.imam-mahdi-page .fact-table tr:nth-child(even){background:rgba(201,162,77,.035)}
.imam-mahdi-page .bio-card{border-radius:20px;padding:31px 32px;box-shadow:0 12px 38px rgba(30,15,8,.055)}.imam-mahdi-page .bio-card p{font-size:1.02rem;line-height:1.92}
.imam-mahdi-page #lineage .bio-card,.imam-mahdi-page #birth .bio-card,.imam-mahdi-page #imamate .bio-card,.imam-mahdi-page #reappearance .bio-card,.imam-mahdi-page #legacy .bio-card{border-left:3px solid var(--gold)}
.imam-mahdi-page #occultation{background:radial-gradient(circle at 15% 45%,rgba(201,162,77,.055),transparent 25%),var(--surface)}
.imam-mahdi-page .mahdi-timeline{position:relative;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:38px}.imam-mahdi-page .mahdi-timeline:before{content:"";position:absolute;left:50%;top:12px;bottom:12px;width:1px;background:linear-gradient(var(--gold),transparent);opacity:.4}
.imam-mahdi-page .mahdi-timeline .timeline-card{border-radius:20px;padding:30px;z-index:1}.imam-mahdi-page .mahdi-timeline .timeline-card:nth-child(1){margin-right:20px}.imam-mahdi-page .mahdi-timeline .timeline-card:nth-child(2){margin-left:20px}.imam-mahdi-page .mahdi-timeline .timeline-card>span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:#fff;font:700 .7rem var(--sans);box-shadow:0 0 0 7px rgba(142,27,27,.07);margin-bottom:13px}.imam-mahdi-page .mahdi-timeline .timeline-card h3{font-size:1.5rem}
.imam-mahdi-page .deputy-grid{gap:22px}.imam-mahdi-page .deputy-card{min-height:225px;padding:30px;border-radius:21px;background:linear-gradient(145deg,var(--white),rgba(201,162,77,.055));position:relative;overflow:hidden}.imam-mahdi-page .deputy-card:after{content:"";position:absolute;right:18px;bottom:-20px;font:700 7rem/.8 var(--display);color:rgba(142,27,27,.055);pointer-events:none}.imam-mahdi-page .deputy-card:nth-child(1):after{content:"01"}.imam-mahdi-page .deputy-card:nth-child(2):after{content:"02"}.imam-mahdi-page .deputy-card:nth-child(3):after{content:"03"}.imam-mahdi-page .deputy-card:nth-child(4):after{content:"04"}.imam-mahdi-page .deputy-card h3{font-size:1.45rem;max-width:80%;position:relative;z-index:1}.imam-mahdi-page .deputy-card p{position:relative;z-index:1}
.imam-mahdi-page #sources .source-grid{gap:18px}.imam-mahdi-page #sources .source-card{min-height:145px;border-radius:18px;padding:22px}.imam-mahdi-page .mahdi-nav-card{border-radius:22px;padding:27px 30px;position:relative;overflow:hidden}.imam-mahdi-page .mahdi-nav-card:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(201,162,77,.08),transparent);transform:translateX(-100%);animation:mahdiSweep 5s ease-in-out infinite}
@keyframes mahdiAura{0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.7}50%{transform:translate(-50%,-50%) scale(1.04);opacity:1}}@keyframes mahdiSpin{to{transform:translate(-50%,-50%) rotate(372deg)}}@keyframes mahdiSpinReverse{to{transform:translate(-50%,-50%) rotate(-378deg)}}@keyframes mahdiStars{from{background-position:10px 20px,42px 61px}to{background-position:10px 120px,42px -39px}}@keyframes mahdiSeal{from{opacity:0;transform:scale(.7) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes mahdiSweep{0%,60%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
html[data-theme="night"] .imam-mahdi-page .mahdi-section-index{background:rgba(20,20,22,.88)}html[data-theme="night"] .imam-mahdi-page .mahdi-section-index a{background:#171719;color:#c9c4bb;border-color:#35353b}html[data-theme="night"] .imam-mahdi-page .mahdi-timeline .timeline-card{background:#171719}html[data-theme="night"] .imam-mahdi-page .deputy-card{background:linear-gradient(145deg,#171719,rgba(201,162,77,.045));border-color:#35353b}html[data-theme="night"] .imam-mahdi-page .deputy-card:after{color:rgba(230,193,108,.045)}
@media(max-width:760px){.imam-mahdi-page .mahdi-hero-premium{min-height:680px;padding:58px 0 62px}.imam-mahdi-page .mahdi-hero-inner{width:min(100% - 28px,680px)}.imam-mahdi-page .mahdi-seal{width:68px;height:68px}.imam-mahdi-page .mahdi-hero h1{font-size:clamp(2.15rem,11vw,3.5rem)}.imam-mahdi-page .mahdi-hero-stats{grid-template-columns:1fr;margin-top:28px}.imam-mahdi-page .mahdi-hero-stats div{border-right:0;border-bottom:1px solid rgba(236,209,143,.15);padding:13px}.imam-mahdi-page .mahdi-hero-stats div:last-child{border-bottom:0}.imam-mahdi-page .ring-one{width:360px;height:360px}.imam-mahdi-page .ring-two{width:540px;height:540px}.imam-mahdi-page .mahdi-section-index .section-inner{justify-content:flex-start}.imam-mahdi-page .mahdi-timeline{grid-template-columns:1fr}.imam-mahdi-page .mahdi-timeline:before{left:19px}.imam-mahdi-page .mahdi-timeline .timeline-card:nth-child(1),.imam-mahdi-page .mahdi-timeline .timeline-card:nth-child(2){margin:0 0 0 18px}.imam-mahdi-page .deputy-card{min-height:0}.imam-mahdi-page .deputy-card h3{max-width:90%}}
@media(prefers-reduced-motion:reduce){.imam-mahdi-page .mahdi-hero-aura,.imam-mahdi-page .mahdi-hero-ring,.imam-mahdi-page .mahdi-hero-stars,.imam-mahdi-page .mahdi-seal,.imam-mahdi-page .mahdi-nav-card:before{animation:none!important}}

/* SMAAAQ v165 — Premium Homepage Hero polish
   Keeps the existing dark mode, red/gold palette and hero video intact. */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;inset:-15%;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 42%,rgba(201,162,77,.10),transparent 24%),radial-gradient(circle at 18% 78%,rgba(142,27,27,.16),transparent 30%);transform:translate3d(var(--hero-px,0),var(--hero-py,0),0);transition:transform .7s cubic-bezier(.22,.8,.22,1)}
.hero::after{z-index:1;opacity:.9;box-shadow:0 0 35px rgba(201,162,77,.10)}
.hero-content{will-change:transform}
.hero-eyebrow{position:relative;display:inline-flex;align-items:center;gap:12px;margin:0 0 15px!important;color:rgba(255,255,255,.78);font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;animation:heroEyebrowIn .8s .1s var(--ease-premium) both}
.hero-eyebrow::before,.hero-eyebrow::after{content:"";width:30px;height:1px;background:linear-gradient(90deg,transparent,var(--gold));opacity:.8}
.hero-eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent)}
.hero-title{position:relative;z-index:2}
.hero-title:before{content:"";position:absolute;inset:-35px -55px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.26),transparent 68%);filter:blur(12px)}
.hero-subtitle{position:relative;z-index:2}
.hero-actions-eyebrow{margin:0 auto 10px;text-align:center;color:var(--muted);font-size:.65rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.hero-actions{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--gold) 24%,transparent);border-radius:18px;background:color-mix(in srgb,var(--surface) 76%,transparent);box-shadow:0 18px 55px rgba(0,0,0,.12);backdrop-filter:blur(14px);padding:16px;transition:box-shadow .4s ease,border-color .4s ease}
.hero-actions::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.045) 48%,transparent 70%);transform:translateX(-100%);animation:heroActionSweep 7s ease-in-out infinite}
.hero-actions .btn{position:relative;z-index:1;border-color:color-mix(in srgb,var(--gold) 48%,var(--red));background:rgba(0,0,0,.28);box-shadow:0 8px 24px rgba(0,0,0,.10)}
.hero-actions .btn:hover{border-color:var(--gold);box-shadow:0 12px 30px rgba(201,162,77,.13)}
@keyframes heroEyebrowIn{from{opacity:0;transform:translateY(10px);letter-spacing:.28em}to{opacity:1;transform:none;letter-spacing:.22em}}
@keyframes heroActionSweep{0%,62%{transform:translateX(-100%)}82%,100%{transform:translateX(100%)}}
html[data-theme="night"] .hero-actions{background:rgba(15,15,17,.72);border-color:rgba(201,162,77,.24);box-shadow:0 20px 60px rgba(0,0,0,.30)}
html[data-theme="night"] .hero-actions .btn{background:rgba(0,0,0,.38)}
@media(max-width:640px){.hero-eyebrow{font-size:.58rem;gap:8px;letter-spacing:.14em}.hero-eyebrow::before,.hero-eyebrow::after{width:18px}.hero-actions{width:min(100% - 28px,720px);padding:12px;border-radius:15px}.hero-actions-eyebrow{font-size:.58rem}}

/* ================================================================
   SMAAAQ v185 — Clean Archive Buttons + Premium Motion
   Removes the outer box around the homepage archive buttons and
   gives each button a smoother, more premium interaction.
   ================================================================ */
.hero-actions{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding:18px 0 30px!important;
  overflow:visible!important;
}
.hero-actions::before{display:none!important}

.hero-actions .btn,
.hero-actions .btn.btn-outline{
  position:relative!important;
  overflow:hidden!important;
  isolation:isolate!important;
  border:1px solid transparent!important;
  background:linear-gradient(135deg,var(--red) 0%,#a31b28 52%,var(--red-dark) 100%)!important;
  color:#fff!important;
  border-radius:14px!important;
  box-shadow:0 8px 22px rgba(100,0,15,.16)!important;
  transform:translate3d(0,0,0)!important;
  transition:
    transform .42s cubic-bezier(.22,1,.36,1),
    box-shadow .42s cubic-bezier(.22,1,.36,1),
    filter .35s ease,
    background-position .55s ease!important;
  background-size:160% 160%!important;
  background-position:0% 50%!important;
}
.hero-actions .btn::before,
.hero-actions .btn.btn-outline::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.16) 48%,transparent 76%)!important;
  transform:translateX(-125%) skewX(-16deg)!important;
  transition:transform .75s cubic-bezier(.22,1,.36,1)!important;
}
.hero-actions .btn::after,
.hero-actions .btn.btn-outline::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.12)!important;
}
.hero-actions .btn:hover,
.hero-actions .btn.btn-outline:hover{
  border-color:transparent!important;
  background-position:100% 50%!important;
  color:#fff!important;
  transform:translate3d(0,-5px,0) scale(1.012)!important;
  filter:saturate(1.08) brightness(1.03)!important;
  box-shadow:0 16px 34px rgba(100,0,15,.25),0 4px 10px rgba(201,162,77,.08)!important;
}
.hero-actions .btn:hover::before,
.hero-actions .btn.btn-outline:hover::before{
  transform:translateX(125%) skewX(-16deg)!important;
}
.hero-actions .btn:active,
.hero-actions .btn.btn-outline:active{
  border-color:transparent!important;
  transform:translate3d(0,-1px,0) scale(.975)!important;
  filter:brightness(.96)!important;
  box-shadow:0 5px 14px rgba(100,0,15,.18)!important;
  transition-duration:.12s!important;
}
.hero-actions .btn:focus-visible,
.hero-actions .btn.btn-outline:focus-visible{
  outline:2px solid var(--gold)!important;
  outline-offset:4px!important;
}

/* A gentle stagger when the archive appears. */
.hero-actions .btn:nth-child(1){animation:smaaaqArchiveBtnIn .72s .06s cubic-bezier(.22,1,.36,1) both!important}
.hero-actions .btn:nth-child(2){animation:smaaaqArchiveBtnIn .72s .12s cubic-bezier(.22,1,.36,1) both!important}
.hero-actions .btn:nth-child(3){animation:smaaaqArchiveBtnIn .72s .18s cubic-bezier(.22,1,.36,1) both!important}
.hero-actions .btn:nth-child(4){animation:smaaaqArchiveBtnIn .72s .24s cubic-bezier(.22,1,.36,1) both!important}
.hero-actions .btn:nth-child(5){animation:smaaaqArchiveBtnIn .72s .30s cubic-bezier(.22,1,.36,1) both!important}
.hero-actions .btn:nth-child(6){animation:smaaaqArchiveBtnIn .72s .36s cubic-bezier(.22,1,.36,1) both!important}
@keyframes smaaaqArchiveBtnIn{
  from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

@media(max-width:640px){
  .hero-actions{width:min(100% - 28px,720px)!important;padding:14px 0 20px!important}
  .hero-actions .btn,
  .hero-actions .btn.btn-outline{border-radius:13px!important;min-height:52px!important}
}

/* SMAAAQ — tappable Fatema Zehra profile mentions */
.fatema-profile-link{color:inherit;text-decoration:none;border-bottom:1px solid rgba(201,162,77,.34);text-underline-offset:3px;transition:color .2s ease,border-color .2s ease}.fatema-profile-link:hover,.fatema-profile-link:focus{color:var(--red,#941923);border-bottom-color:var(--gold,#c9a24d)}


/* ================================================================
   SMAAAQ v195 — Desktop Header + Admin-Controlled Search Integrity
   ================================================================ */
@media (min-width: 1101px){
  .site-header{
    min-height: 78px;
  }
  .site-header .header-inner{
    width:min(1440px,calc(100% - 56px));
    min-height:78px;
    display:grid;
    grid-template-columns:190px minmax(0,1fr);
    align-items:center;
    gap:28px;
  }
  .site-header .logo{
    justify-self:start;
    font-size:clamp(1.45rem,1.8vw,1.72rem);
    letter-spacing:.14em;
    white-space:nowrap;
  }
  .site-header .header-controls{
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:16px;
  }
  .site-header .primary-nav{
    min-width:0;
    width:100%;
    justify-content:flex-end;
    gap:2px;
    flex-wrap:nowrap;
    overflow:visible;
  }
  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    padding:10px 9px;
    font-size:clamp(.72rem,.62vw,.79rem);
    line-height:1.2;
  }
  .site-header .lang-switcher{
    justify-self:end;
  }
  .site-header .lang-switcher-btn{
    min-width:76px;
    min-height:42px;
    justify-content:center;
  }
}

@media (min-width:1101px) and (max-width:1240px){
  .site-header .header-inner{
    width:min(1180px,calc(100% - 36px));
    grid-template-columns:155px minmax(0,1fr);
    gap:16px;
  }
  .site-header .primary-nav{gap:0}
  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    padding-left:6px;
    padding-right:6px;
    font-size:.68rem;
  }
}

/* At smaller desktop/tablet widths, keep the full navigation usable by
   switching to the intentional menu state rather than squeezing labels. */
@media (min-width:981px) and (max-width:1100px){
  .site-header .header-inner{
    width:min(100% - 36px,1180px);
    min-height:72px;
  }
  .site-header .menu-toggle{display:block}
  .site-header .primary-nav{
    position:absolute;
    left:18px!important;
    right:18px!important;
    width:auto;
    top:calc(100% + 1px)!important;
    display:none;
    flex-direction:column;
    align-items:stretch;
    background:var(--red)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:0 0 18px 18px!important;
    padding:10px!important;
    box-shadow:0 22px 45px rgba(70,8,15,.28)!important;
  }
  .site-header .primary-nav.is-open{display:flex!important}
  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    color:#fff!important;
  }
}

.family-tree .tree-item.not-tappable .node-inner,
#tree-wrap .tree-item.not-tappable .node-inner{
  cursor:default!important;
  pointer-events:none!important;
}
.family-tree .tree-item.not-tappable .node-name,
#tree-wrap .tree-item.not-tappable .node-name{
  opacity:.72;
}

/* v196 — Homepage Selected Couplets: premium single-line slide rail */
.couplet-slideshow-section .couplet-slide-dots{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;
  width:min(360px,100%)!important;
  max-width:none!important;
  min-width:0!important;
  flex:0 1 min(360px,100%)!important;
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  padding:7px 9px!important;
  border:1px solid rgba(201,162,77,.28)!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,243,232,.9))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 6px 18px rgba(80,35,10,.07)!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.couplet-slideshow-section .couplet-slide-dots button{
  flex:1 1 14px!important;
  width:auto!important;
  min-width:4px!important;
  max-width:20px!important;
  height:4px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#d9cfba,#c9b98f)!important;
  box-shadow:inset 0 1px 1px rgba(75,45,12,.08)!important;
  transform:none!important;
  transition:flex .32s cubic-bezier(.22,.8,.22,1),background .32s ease,box-shadow .32s ease,height .32s ease!important;
}
.couplet-slideshow-section .couplet-slide-dots button:hover{
  background:linear-gradient(90deg,#c7ae73,#b9964e)!important;
  height:5px!important;
}
.couplet-slideshow-section .couplet-slide-dots button.active{
  flex:2.4 1 32px!important;
  width:auto!important;
  min-width:18px!important;
  max-width:42px!important;
  height:5px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#8e1821,#c9a24d)!important;
  box-shadow:0 0 0 1px rgba(201,162,77,.14),0 2px 9px rgba(142,24,33,.22)!important;
  transform:none!important;
  animation:none!important;
}
.couplet-slideshow-section .couplet-slide-dots button:focus-visible{
  outline:2px solid rgba(201,162,77,.7)!important;
  outline-offset:4px!important;
}

html[data-theme="night"] .couplet-slideshow-section .couplet-slide-dots{
  border-color:rgba(201,162,77,.32)!important;
  background:linear-gradient(180deg,rgba(45,31,28,.94),rgba(31,24,23,.92))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px rgba(0,0,0,.22)!important;
}
html[data-theme="night"] .couplet-slideshow-section .couplet-slide-dots button{
  background:linear-gradient(90deg,#70695e,#8c7d61)!important;
  box-shadow:none!important;
}
html[data-theme="night"] .couplet-slideshow-section .couplet-slide-dots button.active{
  background:linear-gradient(90deg,#c93440,#d2ad5e)!important;
  box-shadow:0 0 0 1px rgba(201,162,77,.16),0 2px 10px rgba(201,162,77,.18)!important;
}

@media(max-width:640px){
  .couplet-slideshow-section .couplet-slide-dots{
    width:min(260px,calc(100vw - 150px))!important;
    flex:0 1 min(260px,calc(100vw - 150px))!important;
    gap:4px!important;
    padding:6px 8px!important;
  }
  .couplet-slideshow-section .couplet-slide-dots button{
    flex-basis:10px!important;
    max-width:16px!important;
    height:3px!important;
  }
  .couplet-slideshow-section .couplet-slide-dots button.active{
    flex-basis:25px!important;
    min-width:15px!important;
    max-width:34px!important;
    height:4px!important;
  }
}


/* v197 — About lineage visibility + desktop homepage refinement */
.about-page .lineage-marker,
.about-modal .lineage-marker,
.site-footer .lineage-marker{
  visibility:visible!important;
  opacity:1!important;
}
.about-page .lineage-number,
.about-page .lineage-number strong,
.about-modal .lineage-marker>strong,
.site-footer .lineage-marker>strong{
  display:inline-flex!important;
  align-items:baseline!important;
  visibility:visible!important;
  opacity:1!important;
  color:#9f1119!important;
  font-family:var(--serif)!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}
.about-page .lineage-number sup,
.about-modal .lineage-marker>strong sup,
.site-footer .lineage-marker>strong sup{
  display:inline!important;
  visibility:visible!important;
  opacity:1!important;
  color:inherit!important;
  font-size:.52em!important;
  line-height:1!important;
  margin-left:2px!important;
  vertical-align:super!important;
}
html[data-theme="night"] .about-page .lineage-number,
html[data-theme="night"] .about-page .lineage-number strong,
html[data-theme="night"] .about-modal .lineage-marker>strong,
html[data-theme="night"] .site-footer .lineage-marker>strong{
  color:#f0c96f!important;
  text-shadow:0 0 18px rgba(201,162,77,.12)!important;
}
html[data-theme="night"] .about-page .lineage-marker,
html[data-theme="night"] .about-modal .lineage-marker,
html[data-theme="night"] .site-footer .lineage-marker{
  background:linear-gradient(135deg,#282319,#211d18)!important;
  border-color:rgba(213,179,106,.24)!important;
  border-left-color:var(--gold)!important;
}

/* Desktop: use the available canvas instead of stretching text into long,
   thin bands. Keep the homepage visually balanced at wide resolutions. */
@media (min-width:1200px){
  #home .section-inner,
  #home + .site-footer .footer-inner{
    width:min(1280px,calc(100% - 80px))!important;
  }
  #home .hero-content{
    width:min(1120px,calc(100% - 80px))!important;
  }
  #home .hero-title{
    font-size:clamp(3.5rem,5.1vw,5.35rem)!important;
  }
  #home .hero-actions{
    width:min(1120px,calc(100% - 80px))!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
  }
  #home .hero-actions .btn{
    min-height:58px!important;
  }
  #home .couplet-slideshow-section{
    padding-top:116px!important;
    padding-bottom:124px!important;
  }
  #home .couplet-slideshow{
    min-height:330px!important;
    padding:66px 116px!important;
  }
  #home .couplet-slideshow-body{
    max-width:980px!important;
    margin-inline:auto!important;
  }
  #home .about-teaser{
    padding-top:112px!important;
    padding-bottom:112px!important;
  }
  #home .about-card{
    min-height:142px!important;
    padding:26px 32px!important;
    gap:30px!important;
  }
  #home .about-card-photo img{width:104px!important;height:104px!important}
}

@media (min-width:901px) and (max-width:1199px){
  #home .section-inner{width:min(1160px,calc(100% - 56px))!important}
  #home .hero-actions{width:min(1040px,calc(100% - 56px))!important}
  #home .couplet-slideshow{padding-inline:86px!important}
}

/* Never allow the slideshow indicator rail to wrap on desktop. */
#home .couplet-slide-dots{flex-wrap:nowrap!important;white-space:nowrap!important;overflow:hidden!important}

/* v200 — About 31st lineage badge: stable two-part lockup for light/dark themes. */
.about-page .lineage-marker{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
  gap:20px!important;
  min-height:82px!important;
  box-sizing:border-box!important;
  overflow:visible!important;
}
.about-page .lineage-number{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:92px!important;
  height:58px!important;
  padding:0 12px!important;
  box-sizing:border-box!important;
  white-space:nowrap!important;
  flex:none!important;
}
.about-page .lineage-number-value{
  display:inline-flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  visibility:visible!important;
  opacity:1!important;
  color:#9f1119!important;
  font-family:var(--serif)!important;
  font-size:2.05rem!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
}
.about-page .lineage-number-value sup{
  display:inline-block!important;
  position:relative!important;
  top:-.08em!important;
  margin-left:2px!important;
  color:inherit!important;
  font-family:inherit!important;
  font-size:.48em!important;
  font-weight:800!important;
  line-height:1!important;
  vertical-align:top!important;
}
.about-page .lineage-copy{
  min-width:0!important;
  padding:2px 0!important;
}
.about-page .lineage-copy small{
  margin:0!important;
  line-height:1.35!important;
}
.about-page .lineage-link{
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  line-height:1.4!important;
}
.about-page .lineage-link b{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
html[data-theme="night"] .about-page .lineage-number-value{
  color:#f0c96f!important;
  text-shadow:0 0 18px rgba(201,162,77,.14)!important;
}
@media(max-width:800px){
  .about-page .lineage-marker{grid-template-columns:auto minmax(0,1fr)!important;gap:14px!important;min-height:78px!important;padding:15px 14px!important}
  .about-page .lineage-number{min-width:78px!important;height:52px!important;padding:0 7px!important}
  .about-page .lineage-number-value{font-size:1.75rem!important}
}
@media(min-width:1200px){
  .about-wrap{width:min(1240px,calc(100% - 72px))!important}
  .about-page-card{grid-template-columns:390px minmax(0,1fr)!important}
  .about-content{padding:64px 76px 54px!important}
  .about-visual{min-height:680px!important}
}


/* v201 — hard-lock About lineage number visibility in light mode. */
.about-page .lineage-number-value{
  color:#8f1017!important;
  -webkit-text-fill-color:#8f1017!important;
  opacity:1!important;
  visibility:visible!important;
  display:inline-flex!important;
  position:relative!important;
  z-index:10!important;
  text-indent:0!important;
  transform:none!important;
}
.about-page .lineage-number-value sup{
  color:#8f1017!important;
  -webkit-text-fill-color:#8f1017!important;
  opacity:1!important;
  visibility:visible!important;
  display:inline-block!important;
}
html[data-theme="night"] .about-page .lineage-number-value,
html[data-theme="night"] .about-page .lineage-number-value sup{
  color:#f0c96f!important;
  -webkit-text-fill-color:#f0c96f!important;
}
.about-page .lineage-number{
  background:rgba(143,16,23,.055)!important;
  border:1px solid rgba(143,16,23,.16)!important;
  border-radius:14px!important;
}
html[data-theme="night"] .about-page .lineage-number{
  background:rgba(240,201,111,.08)!important;
  border-color:rgba(240,201,111,.22)!important;
}
@media(max-width:800px){.about-page .lineage-marker{grid-template-columns:78px minmax(0,1fr)!important;gap:14px!important}.about-page .lineage-number{min-width:78px!important}.about-page .lineage-number-value{font-size:1.75rem!important}}

/* v202 — Refined hero-to-content transition
   Replaces the flat white/black fade with a restrained editorial edge. */
.page-hero:before{
  content:""!important;
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  height:82px!important;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(201,162,77,.045) 62%,
      rgba(201,162,77,.09) 100%)!important;
  pointer-events:none!important;
  z-index:0!important;
}
.page-hero:after{
  content:""!important;
  position:absolute!important;
  left:10%!important;right:10%!important;bottom:0!important;
  height:1px!important;
  width:auto!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(90deg,transparent,rgba(201,162,77,.58) 25%,rgba(239,213,147,.9) 50%,rgba(201,162,77,.58) 75%,transparent)!important;
  box-shadow:0 0 18px rgba(201,162,77,.16)!important;
  opacity:.78!important;
  pointer-events:none!important;
  z-index:2!important;
}
html[data-theme="night"] .page-hero:before{
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(201,162,77,.035) 60%,
      rgba(201,162,77,.075) 100%)!important;
}
html[data-theme="night"] .page-hero:after{
  background:linear-gradient(90deg,transparent,rgba(201,162,77,.42) 25%,rgba(240,210,132,.78) 50%,rgba(201,162,77,.42) 75%,transparent)!important;
  box-shadow:0 0 20px rgba(201,162,77,.12)!important;
}

/* v206 — site-wide premium motion system, inspired by the Fatema profile.
   Keeps motion smooth and tactile without persistent blur or heavy effects. */
:root{--smaaaq-motion:cubic-bezier(.16,1,.3,1);--smaaaq-motion-soft:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth;scroll-padding-top:92px}
.reveal{opacity:0!important;transform:translate3d(0,18px,0) scale(.992)!important;filter:none!important;transition:opacity .72s var(--smaaaq-motion),transform .78s var(--smaaaq-motion)!important;will-change:opacity,transform!important}
.reveal.is-visible{opacity:1!important;transform:translate3d(0,0,0) scale(1)!important}
.reveal:nth-child(2){transition-delay:.04s!important}.reveal:nth-child(3){transition-delay:.08s!important}.reveal:nth-child(4){transition-delay:.12s!important}
.btn,.archive-btn,.about-card,.couplet-slide-btn,.scroll-top-btn,.social-link,.search-input,.family-search-input,.person-card,.lineage-card,.source-card,.timeline-card{transition:transform .32s var(--smaaaq-motion),box-shadow .32s var(--smaaaq-motion),border-color .28s ease,background-color .28s ease,color .25s ease!important}
.about-card:hover,.person-card:hover,.lineage-card:hover{transform:translate3d(0,-4px,0)!important}
.btn:hover,.archive-btn:hover,.couplet-slide-btn:hover,.social-link:hover{transform:translate3d(0,-2px,0)!important}

/* v212 — header notification bell: publication-style, compact and responsive */
.header-notify-btn{
  position:relative;display:grid;place-items:center;width:40px;height:40px;flex:0 0 40px;
  border:1px solid rgba(142,27,27,.16);border-radius:12px;background:linear-gradient(145deg,#fff,#faf6ef);
  color:#861a20;cursor:pointer;box-shadow:0 5px 16px rgba(38,22,15,.08),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1),border-color .22s ease,background .22s ease;
}
.header-notify-btn:hover{transform:translateY(-2px);border-color:rgba(201,162,77,.55);box-shadow:0 9px 22px rgba(38,22,15,.12),inset 0 1px 0 rgba(255,255,255,.98)}
.header-notify-btn:active{transform:translateY(0) scale(.96)}
.header-notify-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.header-notify-dot{position:absolute;right:8px;top:7px;width:6px;height:6px;border-radius:50%;background:#a62a2a;box-shadow:0 0 0 2px #fff;pointer-events:none}
.header-notify-btn:focus-visible{outline:2px solid #c9a24d;outline-offset:3px}
html[data-theme="night"] .header-notify-btn{background:linear-gradient(145deg,#292624,#1d1b1a);color:#e5c878;border-color:rgba(229,200,120,.18);box-shadow:0 7px 20px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.04)}
html[data-theme="night"] .header-notify-btn:hover{border-color:rgba(229,200,120,.46);box-shadow:0 10px 25px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="night"] .header-notify-dot{background:#d5ad55;box-shadow:0 0 0 2px #292624}
@media(max-width:640px){.header-notify-btn{width:36px;height:36px;flex-basis:36px;border-radius:10px}.header-notify-btn svg{width:18px;height:18px}.header-notify-dot{right:7px;top:6px;width:5px;height:5px}}
@media(max-width:380px){.header-notify-btn{width:34px;height:34px;flex-basis:34px}.header-notify-btn svg{width:17px;height:17px}}


/* v213 — header bell interaction + cleaner hero-to-content transition */
.header-notify-btn{
  overflow:visible!important;
  transform-origin:50% 55%;
  isolation:isolate;
}
.header-notify-btn::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:15px;
  border:1px solid rgba(201,162,77,0);
  transform:scale(.82);
  opacity:0;
  pointer-events:none;
}
.header-notify-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 50% 50%,rgba(201,162,77,.18),transparent 65%);
  opacity:0;
  transform:scale(.7);
  pointer-events:none;
  transition:opacity .3s ease,transform .45s var(--smaaaq-motion);
}
.header-notify-btn svg{position:relative;z-index:2;transform-origin:50% 12%;transition:transform .35s var(--smaaaq-motion),filter .35s ease}
.header-notify-dot{z-index:3;transition:transform .3s var(--smaaaq-motion),box-shadow .3s ease}
.header-notify-btn:hover::before,.header-notify-btn.is-notifying::before{
  opacity:1;border-color:rgba(201,162,77,.34);animation:headerBellHalo .7s var(--smaaaq-motion) both;
}
.header-notify-btn:hover::after,.header-notify-btn.is-notifying::after{opacity:1;transform:scale(1)}
.header-notify-btn:hover svg{transform:rotate(-7deg) translateY(-1px);filter:drop-shadow(0 3px 6px rgba(142,27,27,.18));animation:headerBellSwing .8s ease-in-out .05s both}
.header-notify-btn.is-notifying svg{animation:headerBellSwing .6s ease-in-out both}
.header-notify-btn:hover .header-notify-dot,.header-notify-btn.is-notifying .header-notify-dot{transform:scale(1.22);box-shadow:0 0 0 2px #fff,0 0 0 5px rgba(201,162,77,.12),0 0 13px rgba(166,42,42,.28)}
@keyframes headerBellSwing{0%{transform:rotate(0)}18%{transform:rotate(10deg)}36%{transform:rotate(-8deg)}54%{transform:rotate(6deg)}72%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes headerBellHalo{0%{transform:scale(.78);opacity:0}35%{opacity:1}100%{transform:scale(1.08);opacity:0}}
html[data-theme="night"] .header-notify-btn:hover .header-notify-dot,html[data-theme="night"] .header-notify-btn.is-notifying .header-notify-dot{box-shadow:0 0 0 2px #292624,0 0 0 5px rgba(229,200,120,.10),0 0 14px rgba(213,173,85,.3)}

/* Keep the hero's complete text composition inside the cinematic frame.
   The previous downward offset let the subtitle drift into the white section. */
.hero{min-height:720px!important}
.hero-content{transform:translateY(52px)!important}
.hero-content{animation:heroContentOpening213 1.05s cubic-bezier(.22,.8,.22,1) .12s both!important}
@keyframes heroContentOpening213{from{opacity:0;transform:translateY(78px) scale(.985)}to{opacity:1;transform:translateY(52px) scale(1)}}
.hero::after{bottom:0!important;height:1px!important;background:linear-gradient(90deg,transparent,rgba(201,162,77,.12) 20%,rgba(239,213,147,.5) 50%,rgba(201,162,77,.12) 80%,transparent)!important;box-shadow:0 0 14px rgba(201,162,77,.08)!important}
@media(max-width:640px){
  .hero{min-height:625px!important}
  .hero-content{transform:translateY(30px)!important;animation:heroContentOpening213Mobile 1.05s cubic-bezier(.22,.8,.22,1) .12s both!important}
}
@keyframes heroContentOpening213Mobile{from{opacity:0;transform:translateY(54px) scale(.985)}to{opacity:1;transform:translateY(30px) scale(1)}}


/* v214 — keep the desktop hero identity centered as a single editorial composition */
.hero-content{width:min(900px,calc(100% - 36px));margin-inline:auto;text-align:center}
.hero-eyebrow,.hero-subtitle{margin-left:auto!important;margin-right:auto!important;text-align:center}
.hero-eyebrow{justify-content:center;max-width:100%;}
@media(min-width:641px){
  .hero-content{transform:translateY(50px)!important}
}

/* v215 — definitive mobile hero centering */
.hero-content{
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  justify-self:center!important;
  align-self:center!important;
  margin-left:auto!important;
  margin-right:auto!important;
  left:auto!important;
  right:auto!important;
  box-sizing:border-box!important;
}
.hero-eyebrow,
.hero-title,
.hero-subtitle{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  align-self:center!important;
  box-sizing:border-box!important;
  text-align:center!important;
}
.hero-eyebrow{display:flex!important;width:max-content;max-width:100%;}
.hero-title{width:100%!important;max-width:100%!important;}
.hero-subtitle{width:100%!important;max-width:100%!important;}
@media(max-width:640px){
  .hero-content{
    width:calc(100vw - 28px)!important;
    max-width:520px!important;
    padding-left:0!important;
    padding-right:0!important;
    transform:translateY(12px)!important;
  }
  .hero-eyebrow{
    width:auto!important;
    max-width:calc(100% - 4px)!important;
    font-size:clamp(.50rem,2.35vw,.62rem)!important;
    letter-spacing:.095em!important;
    gap:7px!important;
  }
  .hero-eyebrow::before,.hero-eyebrow::after{width:14px!important;flex:0 0 14px!important}
  .hero-title{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin-left:auto!important;margin-right:auto!important;
    font-size:clamp(1.82rem,9.7vw,3.15rem)!important;
    line-height:1.34!important;
  }
  .hero-subtitle{
    width:100%!important;
    max-width:100%!important;
    padding:0!important;
    margin-left:auto!important;margin-right:auto!important;
    line-height:1.55!important;
    font-size:clamp(.80rem,3.35vw,.98rem)!important;
  }
  .hero-subtitle .imran-link{white-space:nowrap!important}
}
@media(max-width:380px){
  .hero-content{width:calc(100vw - 22px)!important}
  .hero-eyebrow{letter-spacing:.075em!important;gap:5px!important}
  .hero-eyebrow::before,.hero-eyebrow::after{width:10px!important;flex-basis:10px!important}
  .hero-title{font-size:clamp(1.72rem,9.4vw,2.65rem)!important}
  .hero-subtitle{font-size:.76rem!important}
}


/* v216 — premium transparent gold-outline homepage archive buttons */
.hero-actions .btn,
.hero-actions .btn.btn-outline{
  border:1px solid rgba(201,162,77,.82)!important;
  background:rgba(255,255,255,.025)!important;
  color:var(--gold)!important;
  box-shadow:inset 0 0 0 1px rgba(201,162,77,.06),0 7px 22px rgba(0,0,0,.08)!important;
  transition:transform .38s cubic-bezier(.22,1,.36,1),color .3s ease,border-color .3s ease,background .38s ease,box-shadow .38s ease!important;
}
.hero-actions .btn::before,
.hero-actions .btn.btn-outline::before{
  background:linear-gradient(110deg,transparent 25%,rgba(201,162,77,.18) 50%,transparent 75%)!important;
  transform:translateX(-125%) skewX(-12deg)!important;
  transition:transform .72s cubic-bezier(.22,1,.36,1)!important;
}
.hero-actions .btn::after,
.hero-actions .btn.btn-outline::after{
  box-shadow:inset 0 0 0 1px rgba(201,162,77,.08)!important;
}
.hero-actions .btn:hover,
.hero-actions .btn.btn-outline:hover{
  border-color:var(--gold)!important;
  background:rgba(201,162,77,.105)!important;
  color:var(--gold)!important;
  transform:translate3d(0,-4px,0)!important;
  filter:none!important;
  box-shadow:0 13px 30px rgba(0,0,0,.12),0 0 0 1px rgba(201,162,77,.08),0 0 24px rgba(201,162,77,.10)!important;
}
.hero-actions .btn:hover::before,
.hero-actions .btn.btn-outline:hover::before{transform:translateX(125%) skewX(-12deg)!important}
.hero-actions .btn:active,
.hero-actions .btn.btn-outline:active{
  border-color:var(--gold)!important;background:rgba(201,162,77,.15)!important;color:var(--gold)!important;
  transform:translate3d(0,-1px,0) scale(.975)!important;filter:none!important;
  box-shadow:0 5px 14px rgba(0,0,0,.10)!important;
}
html[data-theme="night"] .hero-actions .btn,
html[data-theme="night"] .hero-actions .btn.btn-outline{
  background:rgba(8,8,10,.16)!important;color:#e7c878!important;border-color:rgba(231,200,120,.82)!important;
}
html[data-theme="night"] .hero-actions .btn:hover,
html[data-theme="night"] .hero-actions .btn.btn-outline:hover{background:rgba(201,162,77,.10)!important;color:#f0d68d!important;border-color:#e7c878!important}
html[data-theme="light"] .hero-actions .btn,
html[data-theme="light"] .hero-actions .btn.btn-outline{
  background:rgba(255,255,255,.32)!important;color:#9b7223!important;border-color:rgba(155,114,35,.78)!important;
  box-shadow:inset 0 0 0 1px rgba(155,114,35,.06),0 7px 22px rgba(55,35,10,.07)!important;
}
html[data-theme="light"] .hero-actions .btn:hover,
html[data-theme="light"] .hero-actions .btn.btn-outline:hover{background:rgba(201,162,77,.10)!important;color:#8b641b!important;border-color:#b88a2e!important}
@media(max-width:640px){
  .hero-actions .btn,.hero-actions .btn.btn-outline{min-height:50px!important;border-radius:12px!important;letter-spacing:.035em!important}
}

/* v217 — red-accented luminous archive buttons */
.hero-actions .btn,
.hero-actions .btn.btn-outline{
  color:#d8b45f!important;
  border-color:rgba(216,180,95,.9)!important;
  background:
    radial-gradient(circle at 92% 12%,rgba(177,25,40,.18),transparent 34%),
    rgba(255,255,255,.018)!important;
  box-shadow:
    inset 0 0 0 1px rgba(216,180,95,.08),
    0 7px 20px rgba(0,0,0,.10),
    0 0 0 0 rgba(177,25,40,0)!important;
  transition:transform .42s cubic-bezier(.22,1,.36,1),
    color .3s ease,border-color .3s ease,background .42s ease,
    box-shadow .42s cubic-bezier(.22,1,.36,1)!important;
}
.hero-actions .btn::before,
.hero-actions .btn.btn-outline::before{
  background:
    linear-gradient(110deg,transparent 18%,rgba(216,180,95,.16) 43%,rgba(177,25,40,.14) 54%,transparent 80%)!important;
}
.hero-actions .btn::after,
.hero-actions .btn.btn-outline::after{
  box-shadow:inset 0 0 0 1px rgba(216,180,95,.10),inset 0 -1px 0 rgba(177,25,40,.18)!important;
}
.hero-actions .btn:hover,
.hero-actions .btn.btn-outline:hover{
  color:#f0d78f!important;
  border-color:#e4c574!important;
  background:
    radial-gradient(circle at 90% 18%,rgba(177,25,40,.30),transparent 40%),
    linear-gradient(135deg,rgba(201,162,77,.09),rgba(177,25,40,.07))!important;
  transform:translate3d(0,-4px,0) scale(1.012)!important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.14),
    0 0 18px rgba(201,162,77,.16),
    0 0 30px rgba(177,25,40,.09)!important;
}
.hero-actions .btn:active,
.hero-actions .btn.btn-outline:active{
  transform:translate3d(0,-1px,0) scale(.975)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.12),0 0 12px rgba(201,162,77,.10)!important;
}
html[data-theme="night"] .hero-actions .btn,
html[data-theme="night"] .hero-actions .btn.btn-outline{
  color:#e7c878!important;
  border-color:rgba(231,200,120,.86)!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(177,25,40,.20),transparent 36%),
    rgba(4,4,6,.20)!important;
}
html[data-theme="night"] .hero-actions .btn:hover,
html[data-theme="night"] .hero-actions .btn.btn-outline:hover{
  color:#f3db91!important;
  background:
    radial-gradient(circle at 90% 18%,rgba(177,25,40,.34),transparent 42%),
    rgba(201,162,77,.08)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.22),0 0 22px rgba(201,162,77,.17),0 0 34px rgba(177,25,40,.10)!important;
}
html[data-theme="light"] .hero-actions .btn,
html[data-theme="light"] .hero-actions .btn.btn-outline{
  color:#a51f2d!important;
  border-color:rgba(178,133,42,.82)!important;
  background:
    radial-gradient(circle at 92% 10%,rgba(177,25,40,.09),transparent 36%),
    rgba(255,255,255,.42)!important;
  box-shadow:inset 0 0 0 1px rgba(178,133,42,.07),0 7px 20px rgba(70,45,10,.07)!important;
}
html[data-theme="light"] .hero-actions .btn:hover,
html[data-theme="light"] .hero-actions .btn.btn-outline:hover{
  color:#8f1826!important;
  border-color:#b88a2e!important;
  background:
    radial-gradient(circle at 90% 18%,rgba(177,25,40,.15),transparent 42%),
    rgba(201,162,77,.10)!important;
  box-shadow:0 13px 28px rgba(70,45,10,.10),0 0 18px rgba(201,162,77,.13),0 0 24px rgba(177,25,40,.07)!important;
}
@media(max-width:640px){
  .hero-actions .btn,.hero-actions .btn.btn-outline{
    min-height:49px!important;
    padding:12px 15px!important;
    box-shadow:inset 0 0 0 1px rgba(216,180,95,.07),0 5px 16px rgba(0,0,0,.08)!important;
  }
  .hero-actions .btn:hover,.hero-actions .btn.btn-outline:hover{transform:translate3d(0,-2px,0) scale(1.006)!important}
}
@media(hover:none){
  .hero-actions .btn:hover,.hero-actions .btn.btn-outline:hover{transform:none!important}
  .hero-actions .btn:active,.hero-actions .btn.btn-outline:active{transform:scale(.975)!important}
}

/* v22 — Selected Couplets: full-size responsive showcase card */
#home .couplet-slideshow-section .couplet-slideshow{
  min-height:480px!important;
  height:480px!important;
  box-sizing:border-box!important;
  padding:36px clamp(82px,9vw,150px) 30px!important;
}
#home .couplet-slideshow-section .couplet-slideshow-text{
  min-height:0!important;
  flex:1 1 auto!important;
  width:100%!important;
  max-width:1040px!important;
  padding:30px clamp(20px,3vw,50px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#home .couplet-slideshow-section .couplet-slideshow-body{
  width:100%!important;
  max-width:980px!important;
  min-height:0!important;
  max-height:255px!important;
  overflow:hidden!important;
  font-size:clamp(1.65rem,2.65vw,2.5rem)!important;
  line-height:1.95!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
}
#home .couplet-slideshow-section .couplet-slideshow-footer{
  flex:0 0 auto!important;
  min-height:62px!important;
}

@media (max-width:900px){
  #home .couplet-slideshow-section .couplet-slideshow{
    min-height:450px!important;
    height:450px!important;
    padding:30px 62px 24px!important;
  }
  #home .couplet-slideshow-section .couplet-slideshow-text{
    padding:26px 14px 20px!important;
  }
  #home .couplet-slideshow-section .couplet-slideshow-body{
    max-height:235px!important;
    font-size:clamp(1.45rem,3.1vw,2rem)!important;
    line-height:1.9!important;
  }
}

@media (max-width:640px){
  #home .couplet-slideshow-section .couplet-slideshow{
    min-height:430px!important;
    height:430px!important;
    padding:25px 48px 20px!important;
    border-radius:22px!important;
  }
  #home .couplet-slideshow-section .couplet-slideshow-text{
    padding:24px 8px 18px!important;
  }
  #home .couplet-slideshow-section .couplet-slideshow-body{
    max-height:225px!important;
    font-size:clamp(1.28rem,5.2vw,1.65rem)!important;
    line-height:1.95!important;
  }
  #home .couplet-slideshow-section .couplet-slideshow-footer{
    min-height:56px!important;
    gap:12px!important;
  }
  #home .couplet-slideshow-section .couplet-slide-btn{
    width:42px!important;
    height:42px!important;
  }
}

@media (max-width:380px){
  #home .couplet-slideshow-section .couplet-slideshow{
    min-height:410px!important;
    height:410px!important;
    padding-inline:42px!important;
  }
  #home .couplet-slideshow-section .couplet-slideshow-body{
    max-height:215px!important;
    font-size:1.22rem!important;
    line-height:1.9!important;
  }
}

/* v220 — Selected Couplets: larger fixed showcase + classic text entrance + red action-button effect */
#home .couplet-slideshow-section .couplet-slideshow{
  width:100%!important;
  max-width:1180px!important;
  min-height:540px!important;
  height:540px!important;
  box-sizing:border-box!important;
}
#home .couplet-slideshow-section .couplet-slideshow-body{
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  max-width:980px!important;
  max-height:none!important;
  min-height:0!important;
  overflow:visible!important;
  margin:0 auto!important;
  text-align:center!important;
  animation:none!important;
  will-change:opacity,transform!important;
  transition:opacity .48s cubic-bezier(.22,.8,.22,1),transform .56s cubic-bezier(.22,.8,.22,1)!important;
}
/* Bring back the older, elegant upward entrance instead of a hard reflow. */
#home .couplet-slideshow-section .couplet-slideshow-body.is-leaving{
  opacity:0!important;
  transform:translateY(-18px) scale(.985)!important;
}
#home .couplet-slideshow-section .couplet-slideshow-body.is-entering{
  opacity:0!important;
  transform:translateY(18px) scale(.985)!important;
}
/* Red/gold interactive treatment for the previous/next buttons. */
#home .couplet-slideshow-section .couplet-slide-btn{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(216,180,95,.72)!important;
  background:
    radial-gradient(circle at 88% 12%,rgba(177,25,40,.22),transparent 48%),
    rgba(255,255,255,.035)!important;
  color:#d8b45f!important;
  box-shadow:inset 0 0 0 1px rgba(216,180,95,.06),0 6px 18px rgba(0,0,0,.12)!important;
  transition:transform .38s cubic-bezier(.22,1,.36,1),color .3s ease,border-color .3s ease,background .38s ease,box-shadow .38s ease!important;
}
#home .couplet-slideshow-section .couplet-slide-btn::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:linear-gradient(110deg,transparent 25%,rgba(216,180,95,.14) 46%,rgba(177,25,40,.22) 55%,transparent 76%);
  transform:translateX(-70%) rotate(8deg);
  transition:transform .55s cubic-bezier(.22,1,.36,1)!important;
  pointer-events:none;
}
#home .couplet-slideshow-section .couplet-slide-btn svg{position:relative;z-index:1}
#home .couplet-slideshow-section .couplet-slide-btn:hover{
  color:#fff!important;
  border-color:#b52633!important;
  background:
    radial-gradient(circle at 50% 50%,rgba(177,25,40,.42),transparent 68%),
    rgba(142,24,33,.12)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.18),0 0 18px rgba(177,25,40,.22),0 0 28px rgba(216,180,95,.10)!important;
  transform:translateY(-2px) scale(1.035)!important;
}
#home .couplet-slideshow-section .couplet-slide-btn:hover::before{transform:translateX(70%) rotate(8deg)!important}
#home .couplet-slideshow-section .couplet-slide-btn:active{transform:translateY(0) scale(.96)!important}
html[data-theme="light"] #home .couplet-slideshow-section .couplet-slide-btn{
  color:#a51f2d!important;
  border-color:rgba(178,133,42,.82)!important;
  background:radial-gradient(circle at 88% 12%,rgba(177,25,40,.10),transparent 48%),rgba(255,255,255,.55)!important;
}
html[data-theme="light"] #home .couplet-slideshow-section .couplet-slide-btn:hover{
  color:#fff!important;
  border-color:#a51f2d!important;
  background:radial-gradient(circle at 50% 50%,rgba(177,25,40,.40),transparent 68%),rgba(142,24,33,.08)!important;
  box-shadow:0 10px 24px rgba(70,45,10,.12),0 0 20px rgba(177,25,40,.18),0 0 24px rgba(201,162,77,.12)!important;
}
html[data-theme="night"] #home .couplet-slideshow-section .couplet-slide-btn{
  color:#e7c878!important;
  border-color:rgba(231,200,120,.76)!important;
  background:radial-gradient(circle at 88% 12%,rgba(177,25,40,.24),transparent 48%),rgba(4,4,6,.18)!important;
}
html[data-theme="night"] #home .couplet-slideshow-section .couplet-slide-btn:hover{
  color:#fff!important;
  border-color:#b52633!important;
  background:radial-gradient(circle at 50% 50%,rgba(177,25,40,.44),transparent 68%),rgba(142,24,33,.14)!important;
}
@media(max-width:900px){
  #home .couplet-slideshow-section .couplet-slideshow{
    max-width:100%!important;
    min-height:500px!important;
    height:500px!important;
  }
}
@media(max-width:640px){
  #home .couplet-slideshow-section .couplet-slideshow{
    min-height:470px!important;
    height:470px!important;
    width:100%!important;
  }
  #home .couplet-slideshow-section .couplet-slideshow-body{
    max-width:100%!important;
  }
}
@media(max-width:380px){
  #home .couplet-slideshow-section .couplet-slideshow{
    min-height:450px!important;
    height:450px!important;
  }
}
@media(hover:none){
  #home .couplet-slideshow-section .couplet-slide-btn:hover{transform:none!important}
  #home .couplet-slideshow-section .couplet-slide-btn:active{transform:scale(.95)!important}
}

/* v222 — Selected Couplets card: restrained red shadow from the right only */
#home .couplet-slideshow-section .couplet-slideshow{
  border-color:rgba(216,180,95,.58)!important;
  background:
    radial-gradient(ellipse 42% 78% at 100% 52%,rgba(177,25,40,.13),transparent 72%),
    radial-gradient(circle at 50% 0%,rgba(216,180,95,.055),transparent 42%),
    var(--white)!important;
  box-shadow:
    14px 18px 50px rgba(25,20,20,.10),
    22px 0 42px rgba(177,25,40,.11),
    0 0 0 1px rgba(216,180,95,.08)!important;
  overflow:hidden!important;
}
#home .couplet-slideshow-section .couplet-slideshow:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  border:1px solid rgba(216,180,95,.10);
  background:linear-gradient(90deg,transparent 72%,rgba(177,25,40,.075) 92%,rgba(177,25,40,.12) 100%);
  opacity:.8;
  transition:opacity .5s ease,box-shadow .5s ease;
}
#home .couplet-slideshow-section .couplet-slideshow:hover{
  border-color:rgba(216,180,95,.70)!important;
  box-shadow:
    16px 20px 55px rgba(25,20,20,.12),
    25px 0 48px rgba(177,25,40,.15),
    0 0 0 1px rgba(216,180,95,.10)!important;
}
#home .couplet-slideshow-section .couplet-slideshow:hover:after{opacity:1}
html[data-theme="night"] #home .couplet-slideshow-section .couplet-slideshow{
  background:
    radial-gradient(ellipse 44% 80% at 100% 52%,rgba(177,25,40,.17),transparent 72%),
    radial-gradient(circle at 50% 0%,rgba(216,180,95,.055),transparent 44%),
    #0a0a0a!important;
  border-color:rgba(231,200,120,.50)!important;
  box-shadow:
    14px 20px 55px rgba(0,0,0,.34),
    24px 0 46px rgba(177,25,40,.15),
    0 0 0 1px rgba(216,180,95,.07)!important;
}
html[data-theme="night"] #home .couplet-slideshow-section .couplet-slideshow:after{
  border-color:rgba(216,180,95,.08);
  background:linear-gradient(90deg,transparent 70%,rgba(177,25,40,.09) 92%,rgba(177,25,40,.14) 100%);
}
html[data-theme="light"] #home .couplet-slideshow-section .couplet-slideshow{
  border-color:rgba(178,133,42,.55)!important;
  box-shadow:
    14px 18px 48px rgba(55,30,20,.08),
    22px 0 40px rgba(177,25,40,.08),
    0 0 0 1px rgba(216,180,95,.08)!important;
}
@media(hover:none){
  #home .couplet-slideshow-section .couplet-slideshow:hover{border-color:rgba(216,180,95,.58)!important}
}

/* v223 — Selected Couplets: social image sharing controls (section only) */
.couplet-poem-card .couplet-share{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin:0 18px 18px;padding:11px 12px 11px 14px;
  border:1px solid rgba(201,162,77,.22);border-radius:14px;
  background:linear-gradient(135deg,rgba(255,253,249,.98),rgba(249,245,236,.92));
  box-shadow:0 7px 20px rgba(60,30,15,.045);
}
.couplet-share-label{font:700 .67rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#786f68;white-space:nowrap}
.couplet-share-actions{display:flex;align-items:center;gap:7px}
.couplet-share-btn{
  width:38px;height:38px;padding:0;border-radius:11px;border:1px solid rgba(130,110,90,.18);
  display:grid;place-items:center;cursor:pointer;background:#fff;color:#5e5148;
  box-shadow:0 4px 12px rgba(30,20,10,.06);
  transition:transform .28s var(--ease-premium),box-shadow .28s,border-color .28s,background .28s,color .28s;
}
.couplet-share-btn svg{width:19px;height:19px;fill:currentColor;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.couplet-share-btn.instagram svg{fill:none}
.couplet-share-btn.instagram .fill-dot{fill:currentColor;stroke:none}
.couplet-share-btn.download svg{fill:none}
.couplet-share-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(30,20,10,.11);border-color:rgba(177,25,40,.34);color:#9b1c24}
.couplet-share-btn:active{transform:scale(.94)}
@media(max-width:560px){
  .couplet-poem-card .couplet-share{margin:0 12px 14px;padding:10px}
  .couplet-share-label{font-size:.61rem}
  .couplet-share-actions{gap:6px}
  .couplet-share-btn{width:36px;height:36px;border-radius:10px}
  .couplet-share-btn svg{width:18px;height:18px}
}

/* v231 — About SMAAAQ: identical English/Urdu layout; language changes only text */
.about-modal .modal-panel{
  direction:ltr;
  text-align:center;
}
.about-modal .modal-topbar{
  direction:ltr;
}
.about-modal .modal-photo{
  display:block;
  margin:0 auto;
}
.about-modal .about-card-eyebrow,
.about-modal .modal-title{
  text-align:center;
}
.about-modal .modal-body{
  text-align:left;
  direction:ltr;
}
body[data-lang="ur"] .about-modal .modal-body{
  direction:rtl;
  text-align:right;
}
body[data-lang="ur"] .about-modal .modal-body .lineage-marker{
  direction:rtl;
}
body[data-lang="ur"] .about-modal .modal-body .lineage-link{
  justify-content:flex-start;
}
/* Keep the Urdu title in exactly the same visual position as English. */
body[data-lang="ur"] .about-modal .modal-title{
  direction:rtl;
  text-align:center;
}


/* v237 — About-only four-language selector + high-contrast night-mode menu */
html[data-theme="night"] .site-header .lang-switcher-menu{
  background:#121214 !important;
  border:1px solid rgba(242,238,232,.24) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.62),0 0 0 1px rgba(201,162,77,.10) !important;
}
html[data-theme="night"] .site-header .lang-btn{
  color:#f7f3ec !important;
  background:transparent !important;
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
html[data-theme="night"] .site-header .lang-btn:hover,
html[data-theme="night"] .site-header .lang-btn:focus-visible{
  color:#fff !important;
  background:rgba(201,162,77,.16) !important;
}
html[data-theme="night"] .site-header .lang-btn.active{
  color:#fff !important;
  background:linear-gradient(135deg,rgba(165,31,43,.92),rgba(120,14,22,.92)) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.30);
}
.about-only-lang{display:block;}

/* v238 — bulletproof dark-mode language menu contrast.
   Some theme states can be applied before/after the header is mounted;
   mirror the night state on body and cover both theme attribute variants. */
html[data-theme="night"] .site-header .lang-switcher-menu,
html[data-theme="dark"] .site-header .lang-switcher-menu,
body.smaaaq-night-theme .site-header .lang-switcher-menu{
  background:#171719 !important;
  color:#f7f3ec !important;
  border-color:rgba(229,200,120,.30) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.68),0 0 0 1px rgba(229,200,120,.08) !important;
}
html[data-theme="night"] .site-header .lang-switcher-menu .lang-btn,
html[data-theme="dark"] .site-header .lang-switcher-menu .lang-btn,
body.smaaaq-night-theme .site-header .lang-switcher-menu .lang-btn{
  color:#f7f3ec !important;
  background:#242326 !important;
  border-color:rgba(255,255,255,.07) !important;
  text-shadow:none !important;
}
html[data-theme="night"] .site-header .lang-switcher-menu .lang-btn:hover,
html[data-theme="night"] .site-header .lang-switcher-menu .lang-btn:focus-visible,
html[data-theme="dark"] .site-header .lang-switcher-menu .lang-btn:hover,
html[data-theme="dark"] .site-header .lang-switcher-menu .lang-btn:focus-visible,
body.smaaaq-night-theme .site-header .lang-switcher-menu .lang-btn:hover,
body.smaaaq-night-theme .site-header .lang-switcher-menu .lang-btn:focus-visible{
  color:#fff !important;
  background:rgba(201,162,77,.22) !important;
}
html[data-theme="night"] .site-header .lang-switcher-menu .lang-btn.active,
html[data-theme="dark"] .site-header .lang-switcher-menu .lang-btn.active,
body.smaaaq-night-theme .site-header .lang-switcher-menu .lang-btn.active{
  color:#fff !important;
  background:linear-gradient(135deg,#a51f2b,#78121a) !important;
  box-shadow:0 5px 16px rgba(0,0,0,.34) !important;
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .site-header .lang-switcher-menu .lang-btn{
    color:#f7f3ec !important;
    background:#242326 !important;
  }
}


/* v243 — professional site-wide header system
   One consistent header across homepage, archive pages, family pages and PHP pages. */
.site-header{
  position:sticky!important;top:0!important;z-index:11000!important;
  background:rgba(255,255,255,.96)!important;
  border-bottom:1px solid rgba(28,20,18,.075)!important;
  box-shadow:0 8px 28px rgba(30,16,12,.07)!important;
  backdrop-filter:saturate(160%) blur(16px)!important;
  -webkit-backdrop-filter:saturate(160%) blur(16px)!important;
}
.site-header .header-inner{
  width:min(1380px,calc(100% - 40px))!important;
  min-height:72px!important;
  margin-inline:auto!important;
  display:flex!important;align-items:center!important;
  gap:22px!important;
}
.site-header .logo{
  flex:0 0 auto!important;
  font-family:"Cinzel",Georgia,serif!important;
  font-size:1.72rem!important;font-weight:600!important;
  letter-spacing:.14em!important;color:#8e1b24!important;
  line-height:1!important;
}
.site-header .header-controls{
  flex:1 1 auto!important;min-width:0!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:8px!important;
}
.site-header .primary-nav{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  gap:2px!important;padding:3px!important;
  border:0!important;border-radius:14px!important;
  background:transparent!important;box-shadow:none!important;
  min-width:0!important;
}
.site-header .primary-nav>a,.site-header .primary-nav>button{
  min-height:40px!important;padding:9px 10px!important;
  border-radius:10px!important;border:0!important;
  color:#4a4541!important;background:transparent!important;
  font-size:.76rem!important;font-weight:650!important;
  letter-spacing:-.005em!important;
}
.site-header .primary-nav>a:after,.site-header .primary-nav>button:after{display:none!important}
.site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{
  color:#8e1b24!important;background:rgba(142,27,36,.055)!important;transform:none!important;
}
.site-header .primary-nav>a.active,.site-header .primary-nav>a[aria-current="page"],.site-header .primary-nav>button.active{
  color:#fff!important;background:#8e1b24!important;
  box-shadow:0 5px 15px rgba(142,27,36,.17)!important;
}
.site-header .nav-admin-login{font-size:.7rem!important;color:#8e1b24!important}
.site-header .nav-sufinama{font-size:.7rem!important;color:#8e1b24!important}
.site-header .header-notify-btn{
  flex:0 0 40px!important;width:40px!important;height:40px!important;
  border-radius:11px!important;
  border:1px solid rgba(142,27,36,.16)!important;
  background:#fff!important;color:#8e1b24!important;
  box-shadow:0 4px 14px rgba(35,18,12,.055)!important;
}
.site-header .header-notify-btn:hover{background:#fffaf5!important;border-color:rgba(201,162,77,.55)!important}
.site-header .lang-switcher-btn{
  min-width:70px!important;height:40px!important;padding:0 10px!important;
  border-radius:11px!important;
  border:1px solid rgba(142,27,36,.14)!important;
  background:#fff!important;color:#423d39!important;
  box-shadow:0 4px 14px rgba(35,18,12,.045)!important;
}
.site-header .menu-toggle{
  flex:0 0 40px!important;width:40px!important;height:40px!important;
  border-radius:11px!important;background:#fff!important;color:#8e1b24!important;
  border:1px solid rgba(142,27,36,.15)!important;box-shadow:0 4px 14px rgba(35,18,12,.045)!important;
}
.site-header .menu-toggle .nav-simple-icon{stroke:currentColor!important}
html[data-theme="night"] .site-header{
  background:rgba(16,15,15,.94)!important;border-bottom-color:rgba(229,200,120,.12)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.34)!important;
}
html[data-theme="night"] .site-header .logo{color:#e2bd63!important}
html[data-theme="night"] .site-header .primary-nav>a,.site-header .primary-nav>button{color:#ddd5ca!important}
html[data-theme="night"] .site-header .primary-nav>a:hover,.site-header .primary-nav>button:hover{color:#f0d48d!important;background:rgba(229,200,120,.08)!important}
html[data-theme="night"] .site-header .primary-nav>a.active,html[data-theme="night"] .site-header .primary-nav>a[aria-current="page"]{color:#fff!important;background:#8e1b24!important}
html[data-theme="night"] .site-header .header-notify-btn,html[data-theme="night"] .site-header .lang-switcher-btn,html[data-theme="night"] .site-header .menu-toggle{background:#211f1d!important;color:#e4c574!important;border-color:rgba(229,200,120,.18)!important}
@media(max-width:1180px){
  .site-header .header-inner{width:min(100% - 28px,1380px)!important;min-height:68px!important}
  .site-header .primary-nav{display:none!important}
  .site-header .primary-nav.is-open{display:flex!important;position:absolute!important;left:14px!important;right:14px!important;top:calc(100% + 8px)!important;flex-direction:column!important;align-items:stretch!important;padding:8px!important;border:1px solid rgba(142,27,36,.12)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 20px 55px rgba(25,10,8,.15)!important}
  .site-header .primary-nav.is-open>a,.site-header .primary-nav.is-open>button{min-height:44px!important;text-align:left!important;padding:11px 13px!important}
  .site-header .menu-toggle{display:grid!important;place-items:center!important}
  html[data-theme="night"] .site-header .primary-nav.is-open{background:#191817!important;border-color:rgba(229,200,120,.18)!important}
}
@media(max-width:640px){
  .site-header .header-inner{width:calc(100% - 20px)!important;min-height:62px!important;gap:6px!important}
  .site-header .logo{font-size:1.43rem!important;letter-spacing:.11em!important}
  .site-header .header-controls{gap:6px!important}
  .site-header .header-notify-btn{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:10px!important}
  .site-header .lang-switcher-btn{min-width:54px!important;width:54px!important;height:36px!important;padding:0 6px!important;border-radius:10px!important}
  .site-header .lang-switcher-btn .lang-switcher-icon{display:none!important}
  .site-header .lang-switcher-btn .lang-switcher-caret{width:11px!important}
  .site-header .menu-toggle{width:36px!important;height:36px!important;flex-basis:36px!important;border-radius:10px!important}
}
@media(max-width:370px){.site-header .logo{font-size:1.28rem!important}.site-header .header-inner{width:calc(100% - 14px)!important}.site-header .lang-switcher-btn{width:50px!important;min-width:50px!important}}

/* v247 — Photo sharing controls for full Rubais & Qitas, matching Selected Couplets. */
.poem-card .poem-share{margin:18px 22px 22px;padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid rgba(177,25,40,.12);border-radius:14px;background:rgba(250,247,239,.72)}
.poem-card .poem-share .couplet-share-label{font:700 .67rem var(--sans);letter-spacing:.08em;text-transform:uppercase;color:#786f68;white-space:nowrap}
@media(max-width:640px){.poem-card .poem-share{margin:14px 12px 16px;padding:10px}.poem-card .poem-share .couplet-share-label{font-size:.61rem}}

/* v259 — share-card style selector */
.poem-share-style{display:flex;align-items:center;gap:4px;margin-left:auto;margin-right:4px;padding:3px;border:1px solid rgba(177,25,40,.12);border-radius:10px;background:rgba(255,255,255,.35)}
.poem-style-btn{border:0;background:transparent;color:#786f68;font:700 .62rem var(--sans);padding:6px 8px;border-radius:7px;cursor:pointer;transition:.2s ease}
.poem-style-btn.active{background:#9b1c24;color:#fff;box-shadow:0 3px 9px rgba(155,28,36,.16)}
.poem-style-btn:hover{transform:translateY(-1px)}
@media(max-width:640px){.poem-share-style{margin-left:auto;margin-right:0}.poem-style-btn{padding:5px 7px;font-size:.58rem}}
html[data-theme="night"] .poem-share-style{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10)}
html[data-theme="night"] .poem-style-btn{color:#d8d1c7}

/* v271 — share-card generation feedback */
.couplet-share-btn.is-preparing{opacity:.55;transform:scale(.96);pointer-events:none}
.couplet-share-btn.is-preparing svg{animation:smaaaqShareSpin .8s linear infinite}
@keyframes smaaaqShareSpin{to{transform:rotate(360deg)}}


/* v274 — Professional SMAAAQ contact access */
.smaaaq-contact-fab{
  position:fixed!important;right:22px!important;bottom:22px!important;left:auto!important;top:auto!important;z-index:2147483647!important;
  display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 16px 0 12px;
  border:1px solid rgba(201,162,77,.72);border-radius:999px;
  background:rgba(142,27,36,.97);color:#fff;text-decoration:none;
  box-shadow:0 12px 30px rgba(35,18,12,.18),0 0 0 1px rgba(255,255,255,.05) inset;
  font:700 .72rem var(--sans);letter-spacing:.07em;text-transform:uppercase;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .22s ease,box-shadow .22s ease,background .22s ease,opacity .65s ease;
  opacity:0;transform:translate3d(0,18px,0) scale(.92);
  pointer-events:none;
}
.smaaaq-contact-fab.is-visible{opacity:1;transform:translate3d(0,0,0) scale(1);pointer-events:auto;transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,background .22s ease;}
/* v310: fade out once the footer (which has its own contact@smaaaq.com link) is in view, so this floating button never sits on top of that address. */
.smaaaq-contact-fab.is-near-footer{opacity:0!important;transform:translate3d(0,18px,0) scale(.92)!important;pointer-events:none!important;transition:opacity .3s ease,transform .3s ease;}
.smaaaq-contact-fab:hover{transform:translateY(-2px);background:#9b1c24;box-shadow:0 15px 34px rgba(35,18,12,.22),0 0 0 1px rgba(255,255,255,.06) inset}
.smaaaq-contact-fab:focus-visible{outline:2px solid #d7b86a;outline-offset:3px}
.smaaaq-contact-fab-icon{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:rgba(201,162,77,.16);color:#e4c574}
.smaaaq-contact-fab-icon svg{width:15px;height:15px;display:block}
.smaaaq-contact-fab-label{white-space:nowrap}
.footer-contact{display:flex;align-items:center;justify-content:center;margin:18px auto 10px;font:600 .74rem var(--sans);letter-spacing:.03em}
.footer-contact-email{color:#d7b86a;text-decoration:none;border-bottom:1px solid rgba(215,184,106,.35);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.footer-contact-email:hover{color:#fff;border-color:#fff}
html[data-theme="night"] .smaaaq-contact-fab{background:rgba(142,27,36,.98);border-color:rgba(228,197,116,.72);box-shadow:0 14px 34px rgba(0,0,0,.42)}
html[data-theme="night"] .footer-contact-email{color:#e4c574}
@media(max-width:640px){
  .smaaaq-contact-fab{right:14px!important;bottom:14px!important;min-height:46px;padding:0 14px 0 11px;gap:8px;font-size:.66rem}
  .smaaaq-contact-fab-icon{width:24px;height:24px}
  .footer-contact{margin-top:16px}
}
@media(max-width:370px){.smaaaq-contact-fab{right:10px!important;bottom:10px!important}.smaaaq-contact-fab-label{display:none}.smaaaq-contact-fab{width:46px;padding:0;justify-content:center}}

/* v279: footer contact email is a static site-wide element, so it remains visible on every public page even if dynamic footer content fails or is disabled. */
.footer-contact-static{display:flex!important;align-items:center;justify-content:center;margin:18px auto 10px!important;position:relative;z-index:2;}
.footer-contact-static .footer-contact-email{display:inline-block!important;color:#d7b86a!important;text-decoration:none!important;border-bottom:1px solid rgba(215,184,106,.35)!important;padding-bottom:2px;visibility:visible!important;opacity:1!important;}
html[data-theme="night"] .footer-contact-static .footer-contact-email{color:#e4c574!important;}


/* v282 — iOS Safari header scroll stability. Keep the sticky header visually
   stable while the browser's URL/toolbar changes viewport metrics. */
.site-header{will-change:auto;transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.site-header.is-scrolled{transform:translateZ(0);}
@supports (-webkit-touch-callout:none){
  .site-header{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    background:rgba(255,255,255,.98);
  }
}
@media (prefers-reduced-motion: reduce){
  .site-header{transition:none!important;}
}


/* v283/v284 — superseded by v314 further below, which scopes the iOS fix
   with @supports(-webkit-touch-callout:none) instead of a plain phone-width
   media query. The old versions here forced position:fixed (v283) and then
   position:sticky (v284) onto EVERY phone, Android included, which is why
   Android/desktop behaviour drifted even though only iOS ever trembled.
   Removed rather than left dead, since they no longer agree with v314 and
   would only add confusion. */
@media (prefers-reduced-motion: reduce){
  .site-header,.site-header::before,.site-header::after{
    animation:none!important;
    transition:none!important;
  }
}


/* V296 responsive hero sizing */
.hero-video{display:block;width:100%;height:100%;max-width:100%;object-fit:cover;}
@media (max-width:768px){.hero-video{width:100%;height:100%;}}


/* V297 — Family Tree performance layer
   Structure and family-tree data intentionally unchanged. */
.family-tree-page img,
.family-tree-container img {
  content-visibility: auto;
  contain-intrinsic-size: 320px 240px;
}
@media (max-width: 768px) {
  .family-tree-page,
  .family-tree-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
}
@media (prefers-reduced-motion: reduce) {
  .family-tree-page *,
  .family-tree-container * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ================================================================
   SMAAAQ v299 — Premium Header Performance Layer
   ---------------------------------------------------------------
   Motion is deliberately limited to transform/opacity/color.
   No backdrop-filter, layout animation, or continuous animation loop.
   ================================================================ */

.site-header{
  --hdr-ease:cubic-bezier(.22,.8,.22,1);
  position:sticky!important;
  top:0!important;
  z-index:3000!important;
  isolation:isolate;
  background:rgba(255,255,255,.97)!important;
  border-bottom:1px solid rgba(142,27,36,.08);
  box-shadow:0 5px 22px rgba(35,15,15,.055)!important;
  transition:background-color .22s ease,box-shadow .22s ease,border-color .22s ease!important;
}
.site-header .header-inner{
  min-height:72px!important;
  width:min(100% - 40px,1380px)!important;
  gap:18px!important;
}
.site-header .header-controls{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0;
}
.site-header .logo{
  flex:0 0 auto;
  transition:letter-spacing .24s var(--hdr-ease),transform .24s var(--hdr-ease),opacity .2s ease!important;
}
.site-header .logo:hover{
  transform:translateY(-1px);
  opacity:.9;
}
.site-header .primary-nav{
  min-width:0;
}
.site-header .primary-nav>a{
  transition:color .18s ease,background-color .18s ease,transform .18s var(--hdr-ease)!important;
}
.site-header .header-notify-btn,
.site-header .lang-switcher-btn,
.site-header .theme-toggle-btn,
.site-header .header-search-btn,
.site-header .menu-toggle{
  position:relative;
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  padding:0!important;
  border:1px solid rgba(201,162,77,.36)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.72)!important;
  color:var(--red)!important;
  cursor:pointer;
  overflow:hidden;
  transition:
    transform .2s var(--hdr-ease),
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease!important;
}
.site-header .header-notify-btn:hover,
.site-header .lang-switcher-btn:hover,
.site-header .theme-toggle-btn:hover,
.site-header .header-search-btn:hover,
.site-header .menu-toggle:hover{
  transform:translateY(-2px);
  border-color:rgba(201,162,77,.72)!important;
  background:rgba(201,162,77,.10)!important;
  box-shadow:0 8px 20px rgba(50,20,20,.09)!important;
}
.site-header .header-notify-btn:active,
.site-header .lang-switcher-btn:active,
.site-header .theme-toggle-btn:active,
.site-header .header-search-btn:active,
.site-header .menu-toggle:active{
  transform:translateY(0) scale(.96);
}
.site-header .header-notify-btn svg,
.site-header .header-search-btn svg,
.site-header .theme-toggle-btn svg{
  width:18px!important;
  height:18px!important;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
}
.site-header .header-notify-dot{
  width:6px!important;
  height:6px!important;
  top:7px!important;
  right:7px!important;
}
.site-header .lang-switcher-btn{
  display:flex!important;
  gap:5px!important;
  width:auto!important;
  min-width:52px!important;
  padding:0 9px!important;
}
.site-header .lang-switcher-current{font-size:.72rem!important}
.site-header .lang-switcher-icon{width:16px!important;height:16px!important}
.site-header .lang-switcher-caret{width:11px!important;height:11px!important}

.site-header .theme-toggle-btn .theme-icon-sun{display:none}
html[data-theme="night"] .site-header .theme-toggle-btn .theme-icon-moon{display:none}
html[data-theme="night"] .site-header .theme-toggle-btn .theme-icon-sun{display:block}
.site-header .theme-toggle-btn:hover .theme-icon-moon,
.site-header .theme-toggle-btn:hover .theme-icon-sun{
  transform:rotate(12deg) scale(1.06);
}
.site-header .theme-toggle-btn svg{transition:transform .28s var(--hdr-ease)}

.site-header .header-search-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 48%);
  opacity:0;
  transition:opacity .2s ease;
  pointer-events:none;
}
.site-header .header-search-btn:hover::after{opacity:1}

.site-header .menu-toggle svg{
  width:19px!important;height:19px!important;
  fill:none;stroke:currentColor;stroke-width:1.8;
  transition:transform .24s var(--hdr-ease);
}
.site-header .menu-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}

@media(min-width:1181px){
  .site-header .header-controls{gap:9px!important}
  .site-header .primary-nav{margin-left:auto;margin-right:4px}
}
@media(max-width:1180px){
  .site-header .header-inner{min-height:68px!important}
  .site-header .header-controls{margin-left:auto!important}
  .site-header .primary-nav{
    transform-origin:top center;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-7px) scale(.985);
    transition:opacity .2s ease,transform .24s var(--hdr-ease),visibility 0s linear .24s!important;
  }
  .site-header .primary-nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
    transition:opacity .2s ease,transform .24s var(--hdr-ease),visibility 0s!important;
  }
}
@media(max-width:640px){
  .site-header .header-inner{
    width:calc(100% - 14px)!important;
    min-height:62px!important;
    gap:7px!important;
  }
  .site-header .logo{
    font-size:1.22rem!important;
    letter-spacing:.105em!important;
  }
  .site-header .header-controls{gap:5px!important}
  .site-header .header-notify-btn,
  .site-header .theme-toggle-btn,
  .site-header .header-search-btn,
  .site-header .menu-toggle{
    width:36px!important;height:36px!important;min-width:36px!important;border-radius:10px!important;
  }
  .site-header .lang-switcher-btn{
    width:48px!important;min-width:48px!important;height:36px!important;
    padding:0 5px!important;
  }
  .site-header .lang-switcher-btn .lang-switcher-icon{display:none!important}
  .site-header .lang-switcher-btn .lang-switcher-caret{display:block!important}
}
@media(max-width:370px){
  .site-header .logo{font-size:1.08rem!important}
  .site-header .header-inner{width:calc(100% - 8px)!important}
  .site-header .header-controls{gap:3px!important}
  .site-header .header-notify-btn,
  .site-header .theme-toggle-btn,
  .site-header .header-search-btn,
  .site-header .menu-toggle{width:34px!important;height:34px!important;min-width:34px!important}
  .site-header .lang-switcher-btn{width:44px!important;min-width:44px!important;height:34px!important}
}

/* Night mode */
html[data-theme="night"] .site-header{
  background:rgba(16,16,17,.97)!important;
  border-bottom-color:rgba(228,197,116,.12)!important;
  box-shadow:0 5px 24px rgba(0,0,0,.28)!important;
}
html[data-theme="night"] .site-header .header-notify-btn,
html[data-theme="night"] .site-header .lang-switcher-btn,
html[data-theme="night"] .site-header .theme-toggle-btn,
html[data-theme="night"] .site-header .header-search-btn,
html[data-theme="night"] .site-header .menu-toggle{
  background:rgba(33,31,29,.86)!important;
  color:#e4c574!important;
  border-color:rgba(228,197,116,.20)!important;
}
html[data-theme="night"] .site-header .header-notify-btn:hover,
html[data-theme="night"] .site-header .lang-switcher-btn:hover,
html[data-theme="night"] .site-header .theme-toggle-btn:hover,
html[data-theme="night"] .site-header .header-search-btn:hover,
html[data-theme="night"] .site-header .menu-toggle:hover{
  background:rgba(228,197,116,.09)!important;
  border-color:rgba(228,197,116,.42)!important;
}

/* ================================================================
   v299 — Search sheet
   ================================================================ */
.smaaaq-search-sheet{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(18px,4vw,48px);
  background:rgba(10,8,8,.48);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility 0s linear .28s;
}
.smaaaq-search-sheet.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity .22s ease,visibility 0s;
}
.smaaaq-search-panel{
  width:min(920px,100%);
  max-height:min(86vh,820px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(201,162,77,.38);
  border-radius:24px;
  background:var(--white);
  box-shadow:0 30px 90px rgba(20,8,8,.28);
  transform:translateY(-14px) scale(.985);
  transition:transform .28s var(--hdr-ease);
}
.smaaaq-search-sheet.is-open .smaaaq-search-panel{
  transform:translateY(0) scale(1);
}
.smaaaq-search-top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--line);
}
.smaaaq-search-input-wrap{
  position:relative;
  display:flex;
  align-items:center;
  flex:1;
  min-width:0;
}
.smaaaq-search-input{
  width:100%;
  min-height:50px;
  border:1px solid var(--line);
  border-radius:15px;
  outline:none;
  padding:0 48px 0 16px;
  background:var(--white);
  color:var(--ink);
  font:600 1rem var(--sans);
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.smaaaq-search-input:focus{
  border-color:rgba(142,27,36,.48);
  box-shadow:0 0 0 4px rgba(142,27,36,.08);
}
.smaaaq-search-clear{
  position:absolute;
  right:7px;
  width:36px;height:36px;
  border:0;border-radius:10px;
  background:transparent;color:var(--muted);
  cursor:pointer;
  opacity:0;
  transform:scale(.9);
  transition:opacity .16s ease,transform .16s ease,background-color .16s ease;
}
.smaaaq-search-clear.is-visible{opacity:1;transform:scale(1)}
.smaaaq-search-clear:hover{background:rgba(142,27,36,.08);color:var(--red)}
.smaaaq-search-close{
  width:50px;height:50px;flex:0 0 50px;
  display:grid;place-items:center;
  border:1px solid var(--line);border-radius:15px;
  background:var(--white);color:var(--ink);cursor:pointer;
  transition:transform .2s var(--hdr-ease),background-color .18s ease,border-color .18s ease;
}
.smaaaq-search-close:hover{transform:rotate(3deg) scale(1.03);background:var(--red-soft);border-color:rgba(142,27,36,.25)}
.smaaaq-search-close svg,.smaaaq-search-clear svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8}
.smaaaq-search-status{
  min-height:24px;
  padding:11px 18px 0;
  color:var(--muted);
  font-size:.78rem;
}
.smaaaq-search-results{
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 14px 18px;
}
.smaaaq-search-result{
  display:block;
  padding:14px 15px;
  border:1px solid transparent;
  border-radius:15px;
  color:inherit;
  text-decoration:none;
  contain:paint;
  transition:transform .18s var(--hdr-ease),background-color .18s ease,border-color .18s ease;
}
.smaaaq-search-result + .smaaaq-search-result{margin-top:4px}
.smaaaq-search-result:hover,
.smaaaq-search-result:focus-visible{
  transform:translateX(3px);
  background:var(--red-soft);
  border-color:rgba(142,27,36,.10);
  outline:none;
}
.smaaaq-search-result-title{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--red);
  font:700 .98rem var(--display);
  line-height:1.45;
}
.smaaaq-search-result-type{
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  background:var(--gold-soft);
  color:#8a6b27;
  font:700 .58rem var(--sans);
  letter-spacing:.07em;
  text-transform:uppercase;
}
.smaaaq-search-result-excerpt{
  margin-top:4px;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.6;
}
.smaaaq-search-empty{
  padding:45px 18px;
  text-align:center;
  color:var(--muted);
}
.smaaaq-search-empty strong{display:block;color:var(--ink);font:700 1rem var(--display);margin-bottom:6px}
html[data-theme="night"] .smaaaq-search-panel{
  background:#151516;
  border-color:rgba(228,197,116,.20);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
html[data-theme="night"] .smaaaq-search-top{border-color:rgba(255,255,255,.08)}
html[data-theme="night"] .smaaaq-search-input,
html[data-theme="night"] .smaaaq-search-close{
  background:#1c1b1a;color:#f2eee7;border-color:rgba(255,255,255,.10);
}
html[data-theme="night"] .smaaaq-search-result:hover,
html[data-theme="night"] .smaaaq-search-result:focus-visible{background:rgba(228,197,116,.07);border-color:rgba(228,197,116,.12)}
html[data-theme="night"] .smaaaq-search-result-title{color:#e4c574}
html[data-theme="night"] .smaaaq-search-result-type{color:#e4c574;background:rgba(228,197,116,.10)}

@media(max-width:640px){
  .smaaaq-search-sheet{
    padding:0;
    align-items:stretch;
    background:var(--white);
  }
  .smaaaq-search-panel{
    width:100%;
    height:100%;
    max-height:none;
    border:0;
    border-radius:0;
    box-shadow:none;
    transform:translateY(100%);
  }
  .smaaaq-search-sheet.is-open .smaaaq-search-panel{transform:translateY(0)}
  .smaaaq-search-top{padding:max(10px,env(safe-area-inset-top)) 10px 10px}
  .smaaaq-search-input{min-height:48px;border-radius:14px;font-size:.96rem}
  .smaaaq-search-close{width:46px;height:48px;flex-basis:46px;border-radius:14px}
  .smaaaq-search-results{padding:7px 10px calc(18px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .site-header *,
  .smaaaq-search-sheet *,
  .smaaaq-search-sheet,
  .smaaaq-search-panel{transition:none!important;animation:none!important}
}

/* V299.3 — header/logo release guard
   Prevents the header logo from staying hidden after the homepage loader. */
.site-header,
.site-header .logo,
.site-header .brand,
.site-header .site-logo,
.site-header .logo-link{
  visibility:visible;
}
html.smaaaq-loader-released .site-header,
html.smaaaq-loader-released .site-header .logo,
html.smaaaq-loader-released .site-header .brand,
html.smaaaq-loader-released .site-header .site-logo,
html.smaaaq-loader-released .site-header .logo-link{
  opacity:1!important;
  visibility:visible!important;
}


/* V300 — YouTube-style search surface
   The search surface owns its own scroll area. The underlying page is NOT
   overflow-locked, which preserves the exact scroll position when search opens. */
html.smaaaq-search-open,
body.smaaaq-search-open{
  /* Do not set overflow:hidden here: changing root overflow can jump the
     underlying page to the top on Android/WebKit. */
}
.smaaaq-search-sheet{
  position:fixed!important;
  inset:0!important;
  width:100%;
  height:100%;
  overflow:hidden!important;
  touch-action:none;
  overscroll-behavior:none;
}
.smaaaq-search-panel{
  min-height:0!important;
  overflow:hidden!important;
  touch-action:auto;
}
.smaaaq-search-top{
  flex:0 0 auto;
  position:relative;
  z-index:2;
}
.smaaaq-search-status{
  flex:0 0 auto;
}
.smaaaq-search-results{
  flex:1 1 0!important;
  height:0!important;
  min-height:0!important;
  max-height:none!important;
  display:block!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  scrollbar-gutter:stable;
}
.smaaaq-search-result{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
@media(max-width:640px){
  .smaaaq-search-panel{
    height:100%!important;
    max-height:none!important;
    display:flex!important;
    flex-direction:column!important;
  }
  .smaaaq-search-top{
    padding:max(10px,env(safe-area-inset-top)) 10px 10px!important;
    padding-top:max(10px,env(safe-area-inset-top))!important;
    background:var(--white);
  }
  .smaaaq-search-results{
    flex:1 1 0!important;
    height:0!important;
    max-height:none!important;
    min-height:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
    padding:7px 10px calc(18px + env(safe-area-inset-bottom))!important;
  }
}
@media(max-width:640px) and (orientation:landscape){
  .smaaaq-search-top{
    padding-top:max(8px,env(safe-area-inset-top))!important;
  }
  .smaaaq-search-input,
  .smaaaq-search-close{min-height:44px;height:44px}
}
@supports (-webkit-touch-callout:none){
  .smaaaq-search-results{
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

.smaaaq-search-back{
  display:none;
  width:46px;height:48px;flex:0 0 46px;
  place-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
}
.smaaaq-search-back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:640px){
  .smaaaq-search-back{display:grid}
  .smaaaq-search-close{display:none!important}
}

/* V301 — search gesture ownership
   The fixed sheet itself must not claim "none", otherwise iOS/Android can
   suppress vertical gestures before they reach the results scroller. */
.smaaaq-search-sheet{
  touch-action:auto!important;
  overscroll-behavior:none!important;
}
.smaaaq-search-panel{
  touch-action:auto!important;
}
.smaaaq-search-results{
  touch-action:pan-y!important;
  pointer-events:auto!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
}
@media(max-width:640px){
  .smaaaq-search-sheet{
    height:100dvh!important;
    min-height:100svh!important;
  }
  .smaaaq-search-panel{
    height:100dvh!important;
    min-height:0!important;
  }
  .smaaaq-search-results{
    flex:1 1 0!important;
    height:0!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    touch-action:pan-y!important;
  }
}

/* V303 — Family Tree glow containment + global search layering polish */
#tree-wrap .tree-spine::before{
  top:0!important;
  height:18%!important;
  clip-path:inset(0 0 0 0 round 999px)!important;
  -webkit-clip-path:inset(0 0 0 0 round 999px)!important;
  box-shadow:0 0 6px var(--gold-light),0 0 14px rgba(201,162,77,.72),0 0 24px rgba(201,162,77,.28)!important;
}
#tree-wrap .tree-spine{
  overflow:visible!important;
}
#tree-wrap .tree-spine::after{
  z-index:2;
}

/* Keep the moving illumination visually inside the actual rail. */
@keyframes illuminatedFlow{
  0%{top:-1%;opacity:0}
  10%{opacity:1}
  88%{opacity:1}
  100%{top:99%;opacity:0}
}

/* Search must always sit above the sticky header and keep its results
   completely inside the independently scrollable search surface. */
.smaaaq-search-sheet{
  z-index:2147483000!important;
  padding-top:max(12px,env(safe-area-inset-top))!important;
}
.smaaaq-search-panel{
  position:relative!important;
  z-index:1!important;
  max-height:calc(100dvh - max(24px,env(safe-area-inset-top) + env(safe-area-inset-bottom)))!important;
}
.smaaaq-search-top{
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  flex-shrink:0!important;
}
.smaaaq-search-results{
  position:relative!important;
  z-index:1!important;
  padding-top:12px!important;
  scroll-padding-top:12px!important;
}
.smaaaq-search-result:first-child{margin-top:2px!important}

@media(max-width:640px){
  .smaaaq-search-sheet{
    padding:0!important;
    z-index:2147483000!important;
  }
  .smaaaq-search-panel{
    max-height:none!important;
    height:100dvh!important;
    min-height:100svh!important;
  }
  .smaaaq-search-top{
    position:sticky!important;
    top:0!important;
    z-index:20!important;
    padding-top:max(10px,env(safe-area-inset-top))!important;
  }
  .smaaaq-search-results{
    min-height:0!important;
    padding-top:10px!important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom))!important;
    scroll-padding-top:10px!important;
  }
}

/* v304 search accuracy/UX refinements */
.smaaaq-search-status{position:sticky;top:0;z-index:2;background:var(--white)}
html[data-theme="night"] .smaaaq-search-status{background:#151516}
.smaaaq-search-result-title>span:first-child{min-width:0;overflow-wrap:anywhere}
@media(max-width:640px){
  .smaaaq-search-results{padding-bottom:calc(24px + env(safe-area-inset-bottom));}
  .smaaaq-search-result{padding:13px 12px;}
}


/* ================================================================
   SMAAAQ V305 — Desktop Header + Search + Cinematic Hero Repair
   Scoped to desktop so existing mobile/tablet behavior remains intact.
   ================================================================ */

@media (min-width:1181px){
  /* Full navigation is already visible on desktop; hamburger is redundant. */
  .site-header .menu-toggle{display:none!important;}

  .site-header .header-inner{
    width:min(100% - 48px,1440px)!important;
    min-height:68px!important;
    gap:14px!important;
  }

  .site-header .logo{
    font-size:clamp(1.55rem,1.75vw,1.82rem)!important;
    letter-spacing:.15em!important;
  }

  .site-header .header-controls{gap:7px!important;}
  .site-header .primary-nav{gap:1px!important;}

  .site-header .primary-nav>a,
  .site-header .primary-nav>button{
    min-height:38px!important;
    padding:8px 8px!important;
    font-size:clamp(.70rem,.59vw,.77rem)!important;
  }

  .site-header .header-notify-btn,
  .site-header .theme-toggle-btn,
  .site-header .header-search-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
  }

  .site-header .lang-switcher-btn{min-height:38px!important;}
}

/* The V300 search scroller had height:0 but desktop did not give its
   flex parent a definite height. That can collapse the results area. */
@media (min-width:641px){
  .smaaaq-search-sheet{
    padding:clamp(12px,2.4vh,28px) clamp(18px,3vw,42px)!important;
  }

  .smaaaq-search-panel{
    width:min(920px,100%)!important;
    height:min(780px,calc(100dvh - 48px))!important;
    max-height:calc(100dvh - 48px)!important;
    min-height:0!important;
  }

  .smaaaq-search-top,
  .smaaaq-search-status{
    flex:0 0 auto!important;
  }

  .smaaaq-search-results{
    flex:1 1 0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
}

/* The supplied desktop hero source is portrait (720x1280).
   object-fit:cover therefore crops most of the composition on wide
   monitors. Show the complete video in the center and use its poster
   as a restrained blurred side-fill instead of cropping the scene. */
@media (min-width:901px){
  .hero{
    background:#090909 url("hero-v471-bg.jpg") center center / cover no-repeat!important;
  }

  .hero-video-backdrop{
    position:absolute!important;
    inset:-5%!important;
    z-index:0!important;
    pointer-events:none!important;
    background:url("hero-v471-bg.jpg") center center / cover no-repeat!important;
    filter:blur(24px)!important;
    transform:scale(1.08)!important;
    opacity:.48!important;
  }

  .hero-video{
    object-fit:contain!important;
    object-position:center center!important;
    background:transparent!important;
    opacity:.96!important;
  }

  .hero-scrim,
  .hero-vignette{z-index:1!important;}

  .hero-content{z-index:2!important;}
}

@media (prefers-reduced-motion:reduce){
  .hero-video-backdrop{filter:blur(18px)!important;}
}


/* ================================================================
   SMAAAQ V306 — Professional desktop hero treatment
   The desktop source is now a purpose-built 16:9 crop of the supplied
   portrait footage, so the hero can fill the screen naturally.
   ================================================================ */
@media (min-width:901px){
  .hero{
    min-height:clamp(600px,72vh,720px)!important;
    background:#080a0e url("hero-v471-bg.jpg") center center / cover no-repeat!important;
  }

  .hero-video-backdrop{display:none!important;}

  .hero-video{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center center!important;
    opacity:1!important;
    filter:saturate(1.02) contrast(1.02)!important;
  }

  .hero-scrim{
    background:linear-gradient(
      to bottom,
      rgba(0,0,0,.06) 0%,
      rgba(0,0,0,.04) 42%,
      rgba(0,0,0,.20) 66%,
      rgba(0,0,0,.70) 100%
    )!important;
  }

  .hero-vignette{
    background:radial-gradient(
      circle at 50% 42%,
      transparent 0%,
      rgba(0,0,0,.06) 55%,
      rgba(0,0,0,.38) 100%
    )!important;
  }

  .hero-content{
    width:min(1000px,calc(100% - 64px))!important;
    padding:70px 0 52px!important;
    transform:translateY(18px)!important;
  }

  .hero-title{
    font-size:clamp(3.1rem,5vw,4.7rem)!important;
    line-height:1.28!important;
    text-shadow:0 8px 28px rgba(0,0,0,.62)!important;
  }
}


/* ================================================================
   SMAAAQ V308 — Poetry card tap interaction
   ================================================================ */
.poem-launch-btn{
  -webkit-tap-highlight-color:transparent;
  transform-origin:center center;
}
.poem-launch-btn::before{
  transition:transform .55s var(--ease-pro),opacity .24s ease!important;
}
.poem-launch-btn:active{
  transform:translateY(2px) scale(.975)!important;
  box-shadow:0 5px 12px rgba(80,20,20,.10)!important;
  transition-duration:.11s!important;
}
.poem-launch-btn:active::before{
  transform:translateX(120%)!important;
  opacity:.9;
}
.poem-launch-btn:focus-visible{
  transform:none!important;
}

/* Language text transition used by V308 Roman/Urdu switching. */
.poem-lang{
  will-change:opacity,transform;
}
.poem-lang-exit{
  animation:smaaaqPoemTextExit .22s ease both!important;
}
.poem-lang-enter{
  animation:smaaaqPoemTextEnter .30s cubic-bezier(.22,.8,.25,1) both!important;
}
@keyframes smaaaqPoemTextExit{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-6px)}
}
@keyframes smaaaqPoemTextEnter{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* ================================================================
   SMAAAQ V310 — UNIVERSAL PREMIUM MOTION
   Motion reference: Hazrat Syeda Fatema Zehra (S.A.) flagship page.
   Purpose: carry the same calm, responsive, editorial smoothness across
   the site without changing content, layout, language logic or features.
   ================================================================ */
:root{
  --smaaaq-motion:cubic-bezier(.22,.8,.22,1);
  --smaaaq-motion-soft:cubic-bezier(.16,1,.3,1);
  --smaaaq-fast:.20s;
  --smaaaq-base:.34s;
  --smaaaq-slow:.62s;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

/* Keep motion on compositor-friendly properties wherever possible. */
a,button,[role="button"],input,select,textarea,
.card,.poem-card,.couplet-poem-card,.bio-card,.fact-card,.quote-card,
.about-card,.social-link,.home-collection-card,.poem-launch-btn,
.category-card,.feature-card,.fz-link{
  -webkit-tap-highlight-color:transparent;
}

/* Universal interactive response — subtle, immediate, never bouncy. */
@media (hover:hover){
  a:not(.logo):not(.social-link),
  button:not(.menu-toggle):not(.header-notify-btn):not(.header-search-btn){
    transition:
      color .24s var(--smaaaq-motion),
      background-color .28s var(--smaaaq-motion),
      border-color .28s var(--smaaaq-motion),
      box-shadow .34s var(--smaaaq-motion),
      transform .34s var(--smaaaq-motion),
      opacity .28s ease;
  }
}

button:active,
a:active .card,
a:active .poem-card,
a:active .bio-card,
a:active .fact-card,
a:active .quote-card,
a:active .about-card{
  transform:scale(.985);
}

/* Premium reveal used by pages that previously had no motion class. */
.smaaaq-universal-reveal{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:
    opacity .62s var(--smaaaq-motion),
    transform .68s var(--smaaaq-motion);
  will-change:opacity,transform;
}
.smaaaq-universal-reveal.smaaaq-motion-visible{
  opacity:1;
  transform:none;
}

/* Headings arrive slightly before their supporting copy. */
.smaaaq-motion-heading{
  opacity:0;
  transform:translate3d(0,16px,0);
  transition:opacity .55s var(--smaaaq-motion),transform .60s var(--smaaaq-motion);
}
.smaaaq-motion-heading.smaaaq-motion-visible{opacity:1;transform:none}

/* Image entrance: no blur, avoiding expensive paint work on mobile. */
.smaaaq-motion-image{
  opacity:0;
  transform:scale(.985);
  transition:opacity .55s ease,transform .72s var(--smaaaq-motion);
}
.smaaaq-motion-image.smaaaq-motion-visible{opacity:1;transform:none}

/* Softer card interaction for surfaces not already covered by legacy rules. */
@media (hover:hover){
  .smaaaq-premium-surface{
    transition:transform .34s var(--smaaaq-motion),
      box-shadow .38s var(--smaaaq-motion),
      border-color .30s ease;
  }
  .smaaaq-premium-surface:hover{
    transform:translateY(-3px);
  }
}

/* Native-looking focus: visible, but not visually noisy. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid rgba(198,161,91,.72);
  outline-offset:3px;
  transition:outline-offset .22s var(--smaaaq-motion),box-shadow .22s ease;
}

/* Search sheet and overlays inherit the same movement curve. */
.smaaaq-search-sheet,
.search-overlay,
.search-modal,
.lang-switcher-menu,
.primary-nav{
  transition-timing-function:var(--smaaaq-motion)!important;
}

/* Don't animate huge fixed surfaces during scroll. */
.smaaaq-search-open .site-header{will-change:auto}

/* Family Tree remains interaction/performance controlled by its dedicated code. */
.family-tree-page .smaaaq-universal-reveal,
.family-tree-page .smaaaq-motion-heading,
.family-tree-page .smaaaq-motion-image{opacity:1;transform:none;transition:none}

@media(max-width:640px){
  html{scroll-padding-top:82px}
  .smaaaq-universal-reveal{transform:translate3d(0,18px,0);transition-duration:.54s}
  .smaaaq-motion-heading{transform:translate3d(0,12px,0)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .smaaaq-universal-reveal,
  .smaaaq-motion-heading,
  .smaaaq-motion-image{opacity:1;transform:none;transition:none}
}

/* ==========================================================
   SMAAAQ V311 — HIGH-REFRESH / 240Hz-READY MOTION LAYER
   Keeps the Fathima S.A. motion language while ensuring that
   animated UI stays on the compositor whenever possible.
   ========================================================== */
:root{
  --smaaaq-hq-ease:cubic-bezier(.16,1,.3,1);
  --smaaaq-hq-ease-soft:cubic-bezier(.22,1,.36,1);
}

/* Promote only common interactive/animated surfaces to a composited layer. */
.smaaaq-universal-reveal,
.smaaaq-motion-heading,
.smaaaq-motion-image,
.reveal,
.motion-stagger,
.btn,.archive-btn,.about-card,.couplet-slide-btn,.scroll-top-btn,
.social-link,.search-input,.family-search-input,.person-card,
.lineage-card,.source-card,.timeline-card,
.smaaaq-search-sheet,.search-overlay,.search-modal,
.lang-switcher-menu,.primary-nav{
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* Never animate layout geometry; use compositor-friendly properties. */
.smaaaq-universal-reveal,
.smaaaq-motion-heading,
.smaaaq-motion-image{
  contain:paint;
}

/* High-refresh displays benefit from slightly shorter interaction motion. */
@media (min-resolution: 120dpi){
  .btn,.archive-btn,.about-card,.couplet-slide-btn,.scroll-top-btn,
  .social-link,.person-card,.lineage-card,.source-card,.timeline-card{
    transition-duration:.26s!important;
  }
}

/* 120/144/165/240Hz devices: preserve the same visual character without
   pretending CSS can force a display refresh rate. */
@media (min-width:1px){
  html{
    -webkit-tap-highlight-color:transparent;
  }
  a,button,[role="button"]{
    touch-action:manipulation;
  }
}

/* Avoid expensive paint effects while an element is actively moving. */
.smaaaq-hq-moving{
  will-change:transform,opacity;
}

@media(prefers-reduced-motion:reduce){
  .smaaaq-hq-moving{will-change:auto}
}

/* ============================================================
   SMAAAQ v312 — Bengali (bn) as a full third site language.
   Bengali is left-to-right, so no direction overrides are needed —
   only script-appropriate typography, mirroring the Urdu rules above
   but without any rtl/text-align changes. */
.hero-title.bengali-font,
.hero-title[lang="bn"]{
  font-family:var(--bengali,"Noto Serif Bengali",serif)!important;
  font-weight:500!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}
body[data-lang="bn"] .hero-title{font-family:var(--bengali,"Noto Serif Bengali",serif)!important;font-weight:500!important}

/* v151-equivalent: Bengali page content typography. */
body[data-lang="bn"] main, body[data-lang="bn"] main * {
  font-family:var(--bengali,"Noto Serif Bengali",serif);
}
body[data-lang="bn"] .site-header,
body[data-lang="bn"] .site-header * { font-family: inherit; }

/* v55-equivalent: Family Tree Bengali typography (no RTL). */
body[data-lang="bn"] #family-tree .page-hero-title,
body[data-lang="bn"] #family-tree .page-hero-desc,
body[data-lang="bn"] #family-tree .tree-note,
body[data-lang="bn"] #family-tree .section-kicker,
body[data-lang="bn"] #family-tree .renowned-heading,
body[data-lang="bn"] #family-tree .renowned-card,
body[data-lang="bn"] #family-tree .person-detail-content { font-family: var(--bengali,"Noto Serif Bengali",serif); }
body[data-lang="bn"] #family-tree .page-hero-title { line-height: 1.5; }

/* Poem/couplet Bengali script rendering, alongside the existing .urdu/.roman variants. */
.poem-lang.bengali,.lang-content.lang-bn{font-family:var(--bengali,"Noto Serif Bengali",serif);font-size:1.25rem;line-height:2}

/* ============================================================
   SMAAAQ — Hindi (hi) as a full fourth site language.
   Devanagari is left-to-right, so no direction overrides are needed —
   only script-appropriate typography, mirroring the Bengali rules above. */
.hero-title.hindi-font,
.hero-title[lang="hi"]{
  font-family:var(--devanagari,"Noto Serif Devanagari",serif)!important;
  font-weight:500!important;
  line-height:1.5!important;
  letter-spacing:0!important;
}
body[data-lang="hi"] .hero-title{font-family:var(--devanagari,"Noto Serif Devanagari",serif)!important;font-weight:500!important}

/* Hindi page content typography. */
body[data-lang="hi"] main, body[data-lang="hi"] main * {
  font-family:var(--devanagari,"Noto Serif Devanagari",serif);
}
body[data-lang="hi"] .site-header,
body[data-lang="hi"] .site-header * { font-family: inherit; }

/* Family Tree Hindi typography (no RTL). */
body[data-lang="hi"] #family-tree .page-hero-title,
body[data-lang="hi"] #family-tree .page-hero-desc,
body[data-lang="hi"] #family-tree .tree-note,
body[data-lang="hi"] #family-tree .section-kicker,
body[data-lang="hi"] #family-tree .renowned-heading,
body[data-lang="hi"] #family-tree .renowned-card,
body[data-lang="hi"] #family-tree .person-detail-content { font-family: var(--devanagari,"Noto Serif Devanagari",serif); }
body[data-lang="hi"] #family-tree .page-hero-title { line-height: 1.5; }

/* Poem/couplet Hindi script rendering, alongside the existing .urdu/.roman/.bengali variants. */
.poem-lang.hindi,.lang-content.lang-hi{font-family:var(--devanagari,"Noto Serif Devanagari",serif);font-size:1.25rem;line-height:2}

/* ==========================================================
   SMAAAQ V313 — UNIFIED MOTION SYSTEM (Apple-style, 120fps feel)
   ----------------------------------------------------------
   The site had accumulated FIFTEEN separate easing-curve custom
   properties across earlier redesign passes (--ease, --ease-pro,
   --ease-premium, --motion-ease, --hdr-ease, --smooth-ease,
   --s51-ease, --ease-apple, --ease-soft, --smaaaq-hq-ease, etc.),
   including --ease-premium defined TWICE with two different curve
   values — so depending on which :root block happened to win the
   cascade on a given page, motion quietly used different curves in
   different sections. That inconsistency is what breaks the
   "premium/native" feel even when every individual transition looks
   fine in isolation.

   Rather than rewrite every one of the 250+ transition/animation
   declarations that reference these names (risky, and unnecessary),
   this block sits last in the cascade and re-defines every one of
   those custom-property NAMES to point at ONE shared, deliberately
   chosen "Apple-like" deceleration curve. Because :root selectors
   share the same specificity, the last declaration in the file wins,
   so every existing transition/animation across all pages now
   resolves to the same coordinated motion language without touching
   the 250+ call sites. The tactile --ease-press/--ease-release pair
   (button press-and-release) is deliberately left untouched — it's
   a genuine, well-designed distinct micro-interaction, not drift. */
:root{
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --ease-premium:cubic-bezier(.22,1,.36,1);
  --ease-pro:cubic-bezier(.22,1,.36,1);
  --motion-ease:cubic-bezier(.22,1,.36,1);
  --hdr-ease:cubic-bezier(.22,1,.36,1);
  --smooth-ease:cubic-bezier(.22,1,.36,1);
  --smooth-ease-soft:cubic-bezier(.22,1,.36,1);
  --s51-ease:cubic-bezier(.22,1,.36,1);
  --ease-apple:cubic-bezier(.22,1,.36,1);
  --smaaaq-hq-ease:cubic-bezier(.22,1,.36,1);
  --smaaaq-hq-ease-soft:cubic-bezier(.22,1,.36,1);
}

/* The header's ambient shimmer sweep (background-position animation,
   paint-triggering — unlike the transform/opacity underline glow next
   to it, which is compositor-only and left untouched) is a decorative
   flourish that was set to repaint forever on every page. A prior pass
   (v60, above) already capped the header's blur and fixed will-change
   hygiene, but left this specific loop running indefinitely. Capping
   it to a couple of sweeps on load removes that last continuous,
   unbounded repaint cost sitting behind the header blur at all times,
   without changing what the visitor actually sees (the same shimmer
   still plays on load; it just stops afterwards instead of forever). */
.site-header::before{animation-iteration-count:2!important;animation-duration:3.2s!important;animation-fill-mode:both!important}

/* v311 — quiet homepage notice under the writings buttons. */
.home-writings-notice{display:flex;align-items:center;justify-content:center;gap:7px;width:min(720px,calc(100% - 40px));margin:14px auto 0;text-align:center;font-size:.78rem;color:var(--muted);letter-spacing:.01em}
html[data-theme="night"] .home-writings-notice{color:#9a9a9a}
.home-writings-notice-icon{flex:0 0 auto;width:15px;height:15px;color:var(--gold);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="night"] .home-writings-notice-icon{color:#d9b869}

/* v311 — "Coming soon" notice shown on any person page the Admin Panel has
   turned off. Reuses .bio-closing's existing look, just centred and roomier
   since it's now the page's only content instead of a small aside. */
.smaaaq-coming-soon{padding:40px 0 90px}
.smaaaq-coming-soon-card{max-width:620px;margin:0 auto;text-align:center;padding:38px 34px}
.smaaaq-coming-soon-card .section-kicker{justify-content:center}
.smaaaq-coming-soon-card h2{font-family:var(--serif);font-size:1.6rem;line-height:1.3}
.smaaaq-coming-soon-card p{color:var(--muted)}
.smaaaq-coming-soon-card .lineage-link{display:inline-block;margin-top:4px}
html[data-theme="night"] .smaaaq-coming-soon-card{background:rgba(201,162,77,.10)}

/* v314 — iOS Safari header trembling, scoped to iOS only.
   Android and desktop never had this problem — Chrome/Firefox/desktop
   Safari don't re-evaluate `position:sticky` against a resizing visual
   viewport the way iOS Safari does. v313's fix reached every phone-width
   screen via `@media (max-width:900px)`, which also caught Android phones
   that never needed it. This scopes the same fix to iOS specifically using
   `@supports (-webkit-touch-callout:none)` — a feature only iOS Safari (and
   in-app iOS WebKit browsers) report, never Android Chrome or desktop
   browsers — so Android and desktop keep the exact original
   `position:sticky` header untouched, and only iOS gets switched to
   `position:fixed` (with a matching body offset so nothing jumps).
   Everything else about the header (blur, scroll-shadow transition,
   opening animation, shimmer/underline pseudo-elements) is unchanged on
   every platform, including iOS. */
@supports (-webkit-touch-callout:none){
  @media (max-width:900px){
    body{padding-top:70px!important;}
    .site-header,
    header.site-header,
    .main-header{
      position:fixed!important;
      top:0!important;
      left:0!important;
      right:0!important;
      width:100%!important;
      min-height:0!important;
      height:auto!important;
    }
  }
}

/* v316 — Android position:sticky not sticking at all (separate, older bug —
   nothing to do with the iOS trembling fix above).
   `overflow-x:hidden` was set on <html>/<body> in several places across this
   file (a common, long-standing pattern to stop decorative elements from
   causing horizontal scroll). Chrome for Android has a well-known rendering
   bug where `overflow-x:hidden` on <html> or <body> makes it treat them as
   a scroll container of their own, and any `position:sticky` descendant —
   the header included — then stops sticking and just scrolls away with the
   page. Desktop Chrome/Safari and iOS Safari don't have this bug, which is
   why only Android showed it. `overflow-x:clip` prevents the same
   horizontal bleed without creating that scroll container, so it doesn't
   trip the bug. Added alongside the existing `overflow-x:hidden` (not
   replacing it) so any older browser that doesn't understand `clip` simply
   ignores that one declaration and keeps working exactly as before. */

/* v318 — one consistent page background per theme.
   --white (used by cards, tables, modals, etc.) and --theme-bg (used by
   <body> itself) had drifted apart over many past patches — in night mode
   the page body sat on #101011 while cards/sections sat on #111316, and in
   light mode body was #ffffff against cards' #fffdfb. The difference is only
   a few RGB units, but it's visible as an inconsistent background tone
   between the page and the content sitting on it, on both themes. This is
   the last (and therefore winning) declaration for these two variables, so
   both now resolve to the same flat color per theme, everywhere.
   --surface is left untouched — .poetry-section, .family-tree-intro and a
   few others deliberately use it as a slightly different tone from --white
   to create visible depth against the cards inside them. */
:root{--white:#ffffff;--theme-bg:#ffffff}
html[data-theme="night"]{--white:#111316;--theme-bg:#111316}

/* v319 — the header and footer had their own separate, hardcoded night-mode
   colors (several redundant copies of each, layered on top of each other by
   past patches) that never got updated to match the flat #111316 above, so
   the very top and very bottom of every page in dark mode were each a
   slightly different near-black from the page body in between them. Same
   fix as above: this is the last declaration for these two selectors, so it
   wins over every earlier one. The header keeps its .97 opacity (it's a
   translucent bar over whatever scrolls beneath it) but now blends from the
   same base color as everything else, instead of a different one. */
html[data-theme="night"] .site-header{background:rgba(17,19,22,.97)!important}
html[data-theme="night"] .site-footer{background:#111316!important}

/* v320 — the homepage's "Selected Couplets" section sat between two other
   sections and had a visibly different background from both of them: its
   own warm off-white gradient in light mode (line ~962, now flat --white),
   plus a generic "every other <section> gets a tinted background"
   zebra-stripe rule (line ~1450 light / ~3687 night) that landed on it
   because of its position among the homepage's <section> elements — the
   exact seam the "About SMAAAQ" section above and below it didn't have.
   Both of those rules now explicitly skip .couplet-slideshow-section
   (edited in place, since this section's specificity couldn't otherwise
   beat theirs) so it stays on the same flat --white as its neighbors.
   .poetry-section and .bio-section elsewhere still use --surface for their
   own, unrelated, intentional two-tone layering against the cards inside
   them — untouched. */

/* ==========================================================
   SMAAAQ V434 — Cross-page transition polish
   ----------------------------------------------------------
   Every in-page interaction (nav underline, hover lifts, modal/menu
   open-close, scroll reveal, theme switch, the homepage entrance
   sequence, etc.) already animates smoothly — see the V310/V313 passes
   above. What was still missing is the moment BETWEEN pages: SMAAAQ is
   a traditional multi-page site (index.html, nohas.php, a poem page,
   ~45 person pages…), so every click on a link was a hard, unanimated
   browser navigation sitting in between all that polish.

   1) `@view-transition` opts every page into the native View
      Transitions API. Supporting browsers (Chromium-based — Chrome,
      Edge, Opera, Android WebView) automatically cross-fade the old
      page out and the new one in on every same-origin navigation, at
      the platform level, with zero JavaScript and zero extra markup.
      Unsupported browsers (Safari, Firefox) simply ignore the whole
      rule and navigate exactly as before — this is purely additive.
   2) The matching `::view-transition-*` rules give that native
      cross-fade the same easing/duration language as the rest of the
      site (the --ease token from the V313 unified motion system)
      instead of the browser's own default timing, so it reads as part
      of the same design system rather than a generic browser effect.
   3) `.smaaaq-page-exit` is a small hand-rolled equivalent for
      browsers without the API (see java.js), so Safari/Firefox visitors
      get the same smooth fade-out on the way to the next page instead
      of an abrupt cut — matching the fade-IN the homepage already had
      (`body{animation:siteOpening…}`, v17 above) with a fade-OUT. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s;animation-timing-function:var(--ease,cubic-bezier(.22,1,.36,1))}

html.smaaaq-page-exit body{
  animation:none!important;
  opacity:0!important;
  transition:opacity .28s cubic-bezier(.4,0,1,1);
  pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  html.smaaaq-page-exit body{opacity:1!important;transition:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}


/* ================================================================
   SMAAAQ V440 — Bright, vivid homepage hero
   The video was dimmed by 90% opacity + a heavy black scrim + a dark
   vignette (and a desktop-only flat filter). Now: full-strength, richer
   footage; shade is kept only where the text sits so the name stays readable.
   ================================================================ */
html body .hero .hero-video{
  opacity:1!important;
  filter:brightness(1.14) saturate(1.32) contrast(1.07)!important;
  animation:smaaaqHeroVideoIn 1.4s cubic-bezier(.22,.8,.22,1) both!important;
}
@keyframes smaaaqHeroVideoIn{from{transform:scale(1.035)}to{transform:scale(1)}}
/* Light touch at the top for the header, soft shade at the bottom behind the text */
html body .hero .hero-scrim{
  background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 46%,rgba(0,0,0,.3) 76%,rgba(0,0,0,.5) 100%)!important;
}
html body .hero .hero-vignette{
  background:radial-gradient(ellipse 85% 75% at 50% 42%,transparent 58%,rgba(0,0,0,.2) 100%)!important;
}
/* Warm golden glow, like the lit shrine */
html body .hero .hero-vignette::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 45% at 50% 70%,rgba(255,196,92,.12),transparent 70%);
  mix-blend-mode:screen;
}
/* Keep the text crisp on the brighter footage */
html body .hero .hero-content{text-shadow:0 2px 6px rgba(0,0,0,.45),0 10px 34px rgba(0,0,0,.45)}
html body .hero .hero-title{text-shadow:0 2px 8px rgba(0,0,0,.5),0 12px 38px rgba(0,0,0,.5)!important}
/* Phones: the blurred fill behind the video was very dark too */
@media (max-width:900px){
  html body .hero .hero-video-backdrop{opacity:.85!important;filter:blur(24px) brightness(1.05) saturate(1.2)!important}
}
@media (prefers-reduced-motion:reduce){
  html body .hero .hero-video{animation:none!important}
}


/* ================================================================
   SMAAAQ V441 — Glowing ornamental divider under the hero title
   Replaces the short 72px line with a wide, tapering gold rule and a
   centre ornament (diamond + scroll curls) with a soft glow. The small
   dash lines beside the eyebrow name are removed.
   ================================================================ */
html body .hero .hero-title::after{
  content:""!important;
  display:block!important;
  width:min(440px,72vw)!important;
  height:24px!important;
  margin:22px auto 18px!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 18'%3E%3Cg fill='none' stroke='%23f3d98b' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M27 9c-3 0-4-3.4-7-3.4-2.2 0-3 2-1.4 3 1.3.8 2.8-.4 2.1-1.4'/%3E%3Cpath d='M45 9c3 0 4-3.4 7-3.4 2.2 0 3 2 1.4 3-1.3.8-2.8-.4-2.1-1.4'/%3E%3Cpath d='M27 9c-3 0-4 3.4-7 3.4'/%3E%3Cpath d='M45 9c3 0 4 3.4 7 3.4'/%3E%3C/g%3E%3Cpath d='M36 3.2 41.8 9 36 14.8 30.2 9z' fill='none' stroke='%23f3d98b' stroke-width='1.1'/%3E%3Cpath d='M36 6.4 38.6 9 36 11.6 33.4 9z' fill='%23f7e3a6'/%3E%3Ccircle cx='13' cy='9' r='1' fill='%23f3d98b'/%3E%3Ccircle cx='59' cy='9' r='1' fill='%23f3d98b'/%3E%3C/svg%3E") center center / 92px 23px no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      rgba(201,162,77,.55) 14%,
      #e8c56f 32%,
      #f7e3a6 calc(50% - 48px),
      transparent calc(50% - 46px),
      transparent calc(50% + 46px),
      #f7e3a6 calc(50% + 48px),
      #e8c56f 68%,
      rgba(201,162,77,.55) 86%,
      transparent 100%) center center / 100% 1px no-repeat!important;
  filter:drop-shadow(0 0 3px rgba(247,214,120,.85)) drop-shadow(0 0 9px rgba(224,178,70,.5))!important;
  opacity:1!important;
  animation:smaaaqHeroDividerGlow 4.5s ease-in-out 1.6s infinite!important;
}
@keyframes smaaaqHeroDividerGlow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(247,214,120,.85)) drop-shadow(0 0 9px rgba(224,178,70,.5))}
  50%{filter:drop-shadow(0 0 4px rgba(250,224,140,.95)) drop-shadow(0 0 14px rgba(232,188,82,.65))}
}
@media (max-width:600px){
  html body .hero .hero-title::after{width:min(300px,78vw)!important;margin:16px auto 14px!important}
}
/* Remove the small dash lines beside the eyebrow name */
html body .hero .hero-eyebrow::before,
html body .hero .hero-eyebrow::after{display:none!important;content:none!important}
@media (prefers-reduced-motion:reduce){
  html body .hero .hero-title::after{animation:none!important}
}

/* V442 — the eyebrow name above the hero title is removed (index.html). */
html body .hero .hero-eyebrow{display:none!important}


/* ================================================================
   SMAAAQ V445 — Simple, elegant divider under the hero title
   A single hairline of gold that fades out at both ends, with one
   small glowing diamond at the centre. (Overrides the V441 ornament.)
   ================================================================ */
html body .hero .hero-title::after{
  content:""!important;
  display:block!important;
  width:min(360px,64vw)!important;
  height:10px!important;
  margin:24px auto 18px!important;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 .8 9.2 5 5 9.2.8 5z' fill='%23f6dc92'/%3E%3C/svg%3E") center center / 8px 8px no-repeat,
    linear-gradient(90deg,
      transparent 0%,
      rgba(214,176,86,.55) 18%,
      #efd08a calc(50% - 12px),
      transparent calc(50% - 9px),
      transparent calc(50% + 9px),
      #efd08a calc(50% + 12px),
      rgba(214,176,86,.55) 82%,
      transparent 100%) center center / 100% 1px no-repeat!important;
  filter:drop-shadow(0 0 4px rgba(246,214,130,.55))!important;
  opacity:1!important;
  animation:none!important;
}
@media (max-width:600px){
  html body .hero .hero-title::after{width:min(240px,66vw)!important;margin:16px auto 14px!important}
}


/* ================================================================
   SMAAAQ V448 — Smoothness pass
   1. No backdrop blur anywhere. The header, menus, buttons and the 35
      family-tree cards re-blurred everything behind them on every scroll
      frame — the main cause of choppy scrolling on phones. Their
      backgrounds are already ~97% opaque, so the look is unchanged.
   2. The hero video's brightness/colour is now baked into the video file,
      so no live filter runs on every video frame.
   3. The hero title's endless "breathing" animation (repainting a large
      text shadow over the moving video) now plays once.
   ================================================================ */
/* :not(#smaaaq-nb) raises priority above the older per-element !important rules */
html *:not(#smaaaq-nb),html *:not(#smaaaq-nb)::before,html *:not(#smaaaq-nb)::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .hero .hero-video{filter:none!important}
html body .hero .hero-title{animation-iteration-count:1!important}
/* Modal overlay: slightly darker to make up for the removed blur */
html .modal-backdrop{background-color:rgba(0,0,0,.84)}
html[data-theme="light"] .modal-backdrop{background-color:rgba(20,10,10,.74)}


/* ================================================================
   SMAAAQ V450 — Selected Couplets slideshow: text that fits beautifully
   - Each misra (half-verse) sits on its own line and is sized by script
     (java.js fitCoupletSlide) so it never breaks mid-phrase.
   - Correct font per script: Roman text no longer uses the Urdu Nastaliq
     font (its tall line boxes caused the big gaps).
   - Card height is measured across all couplets, so it never jumps.
   ================================================================ */
#home .couplet-slideshow-section .couplet-slideshow-body{line-height:1.6!important;letter-spacing:.005em;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.28em}
#home .couplet-slideshow-body .cs-misra{display:block;max-width:100%;white-space:nowrap}
#home .couplet-slideshow-body .cs-nw{white-space:nowrap}
#home .couplet-slideshow-body.cs-wrap .cs-misra{white-space:normal;text-wrap:balance}
#home .couplet-slideshow-body[data-script="roman"]{font-family:"Source Serif 4",Georgia,serif!important;font-weight:500}
#home .couplet-slideshow-body[data-script="urdu"]{font-family:"Jameel Noori Nastaleeq Kasheeda","Noto Nastaliq Urdu",serif!important;line-height:2.15!important;direction:rtl;gap:.1em}
#home .couplet-slideshow-body[data-script="bengali"]{font-family:"Noto Serif Bengali","Source Serif 4",serif!important;line-height:1.75!important}
#home .couplet-slideshow-body[data-script="hindi"]{font-family:"Noto Serif Devanagari","Source Serif 4",serif!important;line-height:1.75!important}
/* More room for the text on phones */
@media (max-width:600px){
  #home .couplet-slideshow-section .couplet-slideshow{padding-left:14px!important;padding-right:14px!important}
  #home .couplet-slideshow-section .couplet-slideshow-text{padding-left:10px!important;padding-right:10px!important}
  #home .couplet-slideshow-section .couplet-slideshow-body{font-size:1.32rem!important}
}

/* V451 — Selected Couplets: strictly two lines (one per misra), everywhere. */
#home .couplet-slideshow-body .cs-misra,#home .couplet-slideshow-body.cs-wrap .cs-misra{white-space:nowrap!important;text-wrap:nowrap}
.couplet-poem-card .poem-lang,.couplet-poem-card .poem-lang p,.couplet-poem-card .poem-lang div{white-space:nowrap!important}
.couplet-poem-card .poem-lang{overflow:hidden;max-width:100%}
@media (max-width:600px){
  #home .couplet-slideshow-section .couplet-slideshow{padding-left:10px!important;padding-right:10px!important}
  #home .couplet-slideshow-section .couplet-slideshow-text{padding-left:6px!important;padding-right:6px!important}
}
.couplet-poem-card .poem-lang{text-align:center!important}
@media (max-width:600px){
  .couplet-poem-card .poem-block{margin-left:8px!important;margin-right:8px!important;padding-left:8px!important;padding-right:8px!important}
}

/* V453 — No gold line between the couplet misras; poem language switch is instant
   (no fade/slide of the text, no press-down of the toggle buttons). */
html .poem-lang,html .poem-lang.active,html .poem-lang-enter,html .poem-lang-exit{animation:none!important;transition:none!important;will-change:auto!important}
html .poem-toggle,html .poem-toggle:hover,html .poem-toggle:active,
html .poem-toggle>button,html .poem-toggle>button:hover,html .poem-toggle>button:active,html .poem-toggle>button:focus{transform:none!important}

/* V455 — Cards never lift/"pop" on tap or hover, on phones and on desktop.
   (Colour and shadow changes on hover stay; only the movement is removed.) */
html .poem-card,html .poem-card:hover,html .poem-card:active,html .poem-card:focus-within,
html .couplet-poem-card,html .couplet-poem-card:hover,html .couplet-poem-card:active,html .couplet-poem-card:focus-within,
html .bio-card,html .bio-card:hover,html .bio-card:active,
html .fact-card,html .fact-card:hover,html .fact-card:active,
html .quote-card,html .quote-card:hover,html .quote-card:active,
html .about-card,html .about-card:hover,html .about-card:active,
html .home-collection-card,html .home-collection-card:hover,html .home-collection-card:active,
html .couplet-slideshow,html .couplet-slideshow:hover,html .couplet-slideshow:active,
html .tree-item,html .tree-item:hover,html .tree-item:active,
html .node-inner,html .node-inner:hover,html .node-inner:active{transform:none!important}

/* v471 Urdu (RTL): keep couplet slideshow buttons/dots identical to English.
   "<" stays on the left = previous, ">" stays on the right = next. */
body[data-lang="ur"] .couplet-slideshow-footer,
body[data-lang="ur"] .couplet-slideshow-controls,
body[data-lang="ur"] .couplet-slide-dots{direction:ltr!important;unicode-bidi:isolate}
body[data-lang="ur"] .couplet-slide-btn{direction:ltr}