/* =============================================================================
   SILSILA QADRIA — styles.css
   Theme: illuminated manuscript — lapis lazuli, bone, gold leaf, madder red.
   Typography: Cormorant Garamond + DM Sans + Noto Nastaliq Urdu
   ============================================================================= */

/* ---------- PREMIUM FONT SYSTEM ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@400;500;600&family=Noto+Nastaliq+Urdu:wght@400;500&display=swap');


:root{
  /* --- pigments of the illuminated page --- */
  --lapis:#16284F;
  --lapis-deep:#0C1731;
  --lapis-ink:#060D1F;
  --lapis-soft:#26406F;
  --bone:#F4EFE6;
  --vellum:#EAE1CE;
  --gold:#C9A227;
  --gold-lt:#E3C767;
  --gold-pale:#F0DFA8;
  --madder:#9C4A55;
  --verdigris:#2E6F63;
  --slate:#5E6B80;
  --body-fg:#2C3547;

  /* --- premium typography --- */
  --display:"Cormorant Garamond","Times New Roman",serif;
  --body:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --urdu:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Alvi Nastaleeq",serif;

  --rail:clamp(20px,5vw,72px);
  --sec:clamp(76px,10vw,150px);
  --measure:66ch;
  --ease:cubic-bezier(.2,.75,.25,1);
}


*,*::before,*::after{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%
}

body{
  margin:0;
  background:var(--bone);
  color:var(--body-fg);
  font-family:var(--body);
  font-size:clamp(15px,1.02vw,16.5px);
  line-height:1.74;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:opacity .3s ease;
}

img,svg{
  max-width:100%;
  display:block
}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:500;
  line-height:1.08;
  margin:0;
  color:var(--lapis);
  letter-spacing:-.015em;
}

p{
  margin:0 0 1.05em
}

a{
  color:inherit;
  text-decoration:none
}

button{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  cursor:pointer;
  text-align:inherit
}

dl,dd{
  margin:0
}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}


/* ---------- Urdu: its own typographic system, never English metrics ---------- */

html[lang="ur"] body{
  font-family:var(--urdu);
  line-height:2.5;
  font-size:clamp(15px,1vw,16px)
}

html[lang="ur"] h1,
html[lang="ur"] h2,
html[lang="ur"] h3,
html[lang="ur"] h4{
  font-family:var(--urdu);
  line-height:2.05;
  letter-spacing:0
}

html[lang="ur"] p{
  margin-bottom:1.5em
}

html[lang="ur"]{
  --measure:50ch
}

.caps{
  letter-spacing:.16em;
  text-transform:uppercase
}

html[lang="ur"] .caps{
  letter-spacing:0 !important;
  text-transform:none !important
}

.ar{
  font-family:var(--urdu);
  direction:rtl;
  unicode-bidi:isolate
}


/* ---------- ornament primitives ---------- */

.orn-rule{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:var(--gold)
}

.orn-rule::before,
.orn-rule::after{
  content:"";
  height:1px;
  flex:1;
  max-width:200px;
  background:linear-gradient(
    90deg,
    transparent,
    currentColor 45%,
    currentColor 55%,
    transparent
  );
  opacity:.6
}

.star8{
  width:12px;
  height:12px;
  flex:0 0 auto;
  position:relative
}

.star8::before,
.star8::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid currentColor
}

.star8::after{
  rotate:45deg
}

.kicker{
  font-family:var(--display);
  font-size:.9rem;
  font-weight:500;
  color:var(--madder);
  margin:0 0 10px;
  letter-spacing:.18em;
  text-transform:uppercase
}

html[lang="ur"] .kicker{
  font-family:var(--urdu);
  letter-spacing:0;
  text-transform:none;
  font-size:1rem
}

.dark .kicker{
  color:var(--gold-lt)
}


/* ---------- picture holder: photo if present, drawing if not ---------- */

.pic{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:
    transform 1.6s var(--ease),
    filter 1.2s var(--ease)
}

.pic svg{
  width:100%;
  height:100%
}


/* =========================== NAV =========================== */

.nav{
  position:fixed;
  inset-block-start:0;
  inset-inline:0;
  z-index:70;
  display:flex;
  align-items:center;
  gap:20px;
  padding:18px var(--rail);
  transition:padding .5s
}

/* The solid bar's background + blur live on ::before, NOT on .nav itself.
   A backdrop-filter on .nav makes it the containing block for its
   position:fixed children, which collapsed the full-screen mobile menu into
   a thin bar whenever the page was scrolled. */
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:rgba(12,23,49,0);
  box-shadow:0 0 0 rgba(201,162,39,0);
  transition:background .5s, backdrop-filter .5s, -webkit-backdrop-filter .5s, box-shadow .5s
}

.nav.solid{
  padding-block:12px
}

.nav.solid::before{
  background:rgba(12,23,49,.9);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:
    0 1px 0 rgba(201,162,39,.25),
    0 20px 46px -30px rgba(6,13,31,.95)
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--bone);
  flex:0 0 auto;
  position:relative;
  z-index:2
}

.brand .seal{
  width:32px;
  height:32px;
  color:var(--gold-lt);
  flex:0 0 auto;
  transition:rotate .9s var(--ease)
}

.brand:hover .seal{
  rotate:45deg
}

.brand b{
  font-family:var(--display);
  font-size:1.2rem;
  font-weight:500;
  white-space:nowrap;
  letter-spacing:.08em
}

html[lang="ur"] .brand b{
  font-family:var(--urdu);
  letter-spacing:0;
  font-size:1.1rem
}

.nav-links{
  display:flex;
  gap:clamp(14px,2vw,30px);
  margin-inline-start:auto;
  align-items:center
}

.nav-links a{
  color:rgba(244,239,230,.8);
  font-size:.84rem;
  position:relative;
  padding:6px 0;
  transition:color .3s
}

html[lang="ur"] .nav-links a{
  font-size:1rem
}

.nav-links a::after{
  content:"";
  position:absolute;
  inset-block-end:0;
  inset-inline-start:0;
  height:1px;
  width:0;
  background:var(--gold-lt);
  transition:width .45s var(--ease)
}

.nav-links a:hover{
  color:#fff
}

.nav-links a:hover::after,
.nav-links a[aria-current="true"]::after{
  width:100%
}

.lang{
  display:flex;
  align-items:center;
  gap:5px;
  border:1px solid rgba(201,162,39,.45);
  border-radius:2px;
  padding:4px 5px;
  flex:0 0 auto;
  margin-inline-start:clamp(8px,1.6vw,22px)
}

.lang button{
  color:rgba(244,239,230,.62);
  font-size:.78rem;
  letter-spacing:.1em;
  padding:4px 13px;
  font-family:var(--body);
  transition:
    background .35s,
    color .35s
}

.lang button.ur{
  font-family:var(--urdu);
  font-size:.95rem;
  letter-spacing:0;
  line-height:1.7;
  padding-block:1px
}

.lang button.on{
  background:var(--gold);
  color:var(--lapis-ink);
  font-weight:700
}

.lang-mobile{
  display:none
}

.burger{
  display:none;
  width:40px;
  height:34px;
  position:relative;
  z-index:2;
  flex:0 0 auto;
  margin-inline-start:10px;
  -webkit-tap-highlight-color:transparent
}

.burger span{
  position:absolute;
  inset-inline:6px;
  height:1.5px;
  background:var(--bone);
  transition:.42s var(--ease)
}

.burger span:nth-child(1){
  top:11px
}

.burger span:nth-child(2){
  top:17px
}

.burger span:nth-child(3){
  top:23px
}

.burger[aria-expanded="true"] span:nth-child(1){
  top:17px;
  rotate:45deg
}

.burger[aria-expanded="true"] span:nth-child(2){
  opacity:0
}

.burger[aria-expanded="true"] span:nth-child(3){
  top:17px;
  rotate:-45deg
}

@media(max-width:940px){
  .burger{
    display:block;
    margin-inline-start:auto
  }

  .lang-desktop{
    display:none
  }

  /* language switch becomes the last item inside the open menu */
  .lang-mobile{
    display:flex;
    position:static;
    margin:12px auto 0;
    width:max-content
  }

  .nav-links{
    position:fixed;
    inset:0;
    width:100%;
    height:100vh;
    height:100dvh;
    box-sizing:border-box;
    padding:84px var(--rail) 40px;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:rgba(12,23,49,.98);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:safe center;
    gap:24px;
    margin:0;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .45s, visibility 0s .45s
  }

  .nav-links.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:opacity .45s, visibility 0s
  }

  .nav-links a{
    font-size:1.2rem;
    text-align:center
  }
}

/* short screens (phones in landscape): tighten the menu so it all fits */
@media(max-width:940px) and (max-height:520px){
  .nav-links{gap:12px;padding-top:70px}
  .nav-links a{font-size:1rem}
}

/* =========================== HERO =========================== */

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:130px var(--rail) 96px;
  background:var(--lapis-ink)
}

.hero .pic{
  animation:slowpan 30s ease-in-out infinite alternate
}

@keyframes slowpan{
  from{
    transform:scale(1.02) translateY(0)
  }

  to{
    transform:scale(1.1) translateY(-14px)
  }
}

.hero-veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(
      ellipse at 50% 68%,
      rgba(12,23,49,.08),
      rgba(9,18,39,.72) 58%,
      rgba(6,13,31,.96)
    ),
    linear-gradient(
      180deg,
      rgba(6,13,31,.82),
      transparent 32%,
      rgba(6,13,31,.6)
    )
}

/* gold hairline frame, drawn on load */

.hero-frame{
  position:absolute;
  inset:clamp(14px,2.4vw,34px);
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(201,162,39,.32)
}

.hero-frame::before,
.hero-frame::after{
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  border:1px solid rgba(227,199,103,.6)
}

.hero-frame::before{
  top:-1px;
  inset-inline-start:-1px;
  border-width:1px 0 0 1px
}

.hero-frame::after{
  bottom:-1px;
  inset-inline-end:-1px;
  border-width:0 1px 1px 0
}

.hero-inner{
  position:relative;
  z-index:3;
  text-align:center;
  color:var(--bone);
  max-width:900px
}

.hero .bism{
  font-family:var(--urdu);
  direction:rtl;
  font-size:clamp(1rem,2.2vw,1.4rem);
  color:var(--gold-pale);
  opacity:.9;
  margin-bottom:28px;
  line-height:2.3
}

.hero h1{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(3rem,8vw,6.5rem);
  line-height:.95;
  color:var(--bone);
  letter-spacing:.01em;
  margin:0;
  text-shadow:0 4px 50px rgba(0,0,0,.5)
}

html[lang="ur"] .hero h1{
  letter-spacing:0;
  font-size:clamp(2.3rem,7vw,5rem);
  line-height:1.8
}

.hero .sub{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.05rem,2vw,1.45rem);
  color:var(--gold-pale);
  margin:18px 0 0;
  letter-spacing:.04em
}

html[lang="ur"] .hero .sub{
  font-family:var(--urdu);
  letter-spacing:0
}

.hero .orn-rule{
  margin:28px auto;
  max-width:440px;
  color:var(--gold-lt)
}

.hero .note{
  max-width:56ch;
  margin:0 auto 36px;
  color:rgba(244,239,230,.74);
  font-size:.97rem
}


.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1px solid rgba(201,162,39,.65);
  color:var(--bone);
  padding:15px 36px;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition:
    color .45s,
    border-color .45s
}

html[lang="ur"] .btn{
  letter-spacing:0;
  text-transform:none;
  font-size:1rem;
  padding:11px 34px
}

.btn::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--gold);
  z-index:-1;
  clip-path:inset(0 100% 0 0);
  transition:clip-path .55s var(--ease)
}

.btn:hover,
.btn:focus-visible{
  color:var(--lapis-ink);
  border-color:var(--gold)
}

.btn:hover::before,
.btn:focus-visible::before{
  clip-path:inset(0 0 0 0)
}

.btn.on-light{
  color:var(--lapis);
  border-color:rgba(22,40,79,.45)
}

.btn.on-light:hover{
  color:var(--lapis-ink)
}


.scrollcue{
  position:absolute;
  inset-block-end:38px;
  inset-inline:0;
  z-index:3;
  display:grid;
  justify-items:center;
  gap:10px;
  color:rgba(240,223,168,.78)
}

.scrollcue i{
  display:block;
  width:1px;
  height:54px;
  background:rgba(201,162,39,.3);
  position:relative;
  overflow:hidden
}

.scrollcue i::after{
  content:"";
  position:absolute;
  inset-inline:0;
  top:-54px;
  height:54px;
  background:var(--gold-lt);
  animation:drip 3s ease-in-out infinite
}

@keyframes drip{
  0%{
    transform:translateY(0)
  }

  62%,100%{
    transform:translateY(108px)
  }
}

.scrollcue small{
  font-family:var(--body);
  font-size:.64rem;
  letter-spacing:.26em;
  text-transform:uppercase
}

html[lang="ur"] .scrollcue small{
  letter-spacing:0;
  text-transform:none;
  font-size:.9rem
}


/* =========================== layout =========================== */

section{
  position:relative
}

.wrap{
  max-width:1300px;
  margin-inline:auto;
  padding-inline:var(--rail);
  position:relative;
  z-index:2
}

.wrap.narrow{
  max-width:1020px
}

.pad{
  padding-block:var(--sec)
}

.dark{
  background:var(--lapis);
  color:var(--bone)
}

.dark h2,
.dark h3{
  color:var(--bone)
}

.darkest{
  background:var(--lapis-ink);
  color:var(--bone)
}

.darkest h2,
.darkest h3{
  color:var(--bone)
}

.tile-bg{
  position:absolute;
  inset:0;
  opacity:.06;
  pointer-events:none;
  z-index:1
}

.sec-head{
  text-align:center;
  max-width:780px;
  margin-inline:auto;
  margin-bottom:clamp(46px,6vw,82px)
}

.sec-head h2{
  font-size:clamp(2.2rem,4.6vw,3.5rem);
  margin:0 0 20px
}

.sec-head p{
  color:var(--slate);
  max-width:60ch;
  margin-inline:auto
}

.dark .sec-head p,
.darkest .sec-head p{
  color:rgba(244,239,230,.72)
}


.split{
  display:grid;
  gap:clamp(34px,5vw,74px);
  grid-template-columns:1fr;
  align-items:center
}

@media(min-width:900px){
  .split{
    grid-template-columns:.9fr 1.1fr
  }
}

.plate{
  position:relative;
  min-height:460px;
  overflow:hidden;
  border:1px solid rgba(201,162,39,.35);
  box-shadow:0 40px 80px -52px rgba(12,23,49,.9)
}

.plate::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(240,223,168,.28);
  pointer-events:none
}

.plate:hover .pic{
  transform:scale(1.05)
}

.split-copy h2{
  font-size:clamp(2.2rem,4.2vw,3.2rem);
  margin-bottom:22px
}

.split-copy p{
  max-width:var(--measure)
}

.lead{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.25rem,1.9vw,1.52rem);
  line-height:1.6;
  color:var(--lapis)
}

html[lang="ur"] .lead{
  font-family:var(--urdu);
  line-height:2.3
}

.stats{
  display:flex;
  flex-wrap:wrap;
  gap:36px;
  margin-top:36px;
  padding-top:26px;
  border-top:1px solid rgba(22,40,79,.18)
}

.stat b{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:2.6rem;
  color:var(--madder);
  line-height:1
}

.stat span{
  font-size:.76rem;
  color:var(--slate);
  letter-spacing:.06em
}

html[lang="ur"] .stat span{
  font-size:.92rem;
  letter-spacing:0
}


/* =========================== SHRINES =========================== */

.shrines{
  display:grid;
  gap:20px;
  grid-template-columns:1fr
}

@media(min-width:760px){
  .shrines{
    grid-template-columns:repeat(2,1fr)
  }
}

@media(min-width:1120px){
  .shrines{
    grid-template-columns:repeat(3,1fr)
  }

  .shrines>:nth-child(1){
    grid-column:span 2
  }
}

.shrine{
  position:relative;
  overflow:hidden;
  min-height:340px;
  display:block;
  width:100%;
  border:1px solid rgba(201,162,39,.24)
}

.shrines>:nth-child(1){
  min-height:430px
}

.shrine:hover .pic,
.shrine:focus-visible .pic{
  transform:scale(1.08)
}

.shrine .glaze{
  position:absolute;
  inset:0;
  transition:background .7s var(--ease);
  background:
    linear-gradient(
      180deg,
      rgba(12,23,49,0) 26%,
      rgba(10,20,42,.84) 80%,
      rgba(6,13,31,.96)
    )
}

.shrine:hover .glaze{
  background:
    linear-gradient(
      180deg,
      rgba(22,40,79,.34) 6%,
      rgba(10,20,42,.9) 64%,
      rgba(6,13,31,.98)
    )
}

.shrine .corner{
  position:absolute;
  inset:14px;
  border:1px solid rgba(240,223,168,.5);
  opacity:0;
  scale:1.03;
  transition:
    opacity .55s var(--ease),
    scale .55s var(--ease);
  pointer-events:none
}

.shrine:hover .corner,
.shrine:focus-visible .corner{
  opacity:1;
  scale:1
}

.shrine .txt{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  padding:28px;
  color:var(--bone);
  transition:transform .65s var(--ease)
}

.shrine:hover .txt{
  transform:translateY(-10px)
}

.shrine .loc{
  font-family:var(--body);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold-lt)
}

html[lang="ur"] .shrine .loc{
  font-size:.9rem;
  letter-spacing:0;
  text-transform:none
}

.shrine h3{
  font-size:1.55rem;
  font-weight:500;
  margin:10px 0 0;
  color:var(--bone)
}

.shrine .bar{
  height:1px;
  background:var(--gold);
  width:0;
  margin-top:14px;
  transition:width .75s var(--ease)
}

.shrine:hover .bar,
.shrine:focus-visible .bar{
  width:70px
}

.shrine .desc{
  max-height:0;
  opacity:0;
  overflow:hidden;
  font-size:.9rem;
  color:rgba(244,239,230,.86);
  margin-top:0;
  transition:
    max-height .65s var(--ease),
    opacity .5s,
    margin .65s
}

.shrine:hover .desc,
.shrine:focus-visible .desc{
  max-height:160px;
  opacity:1;
  margin-top:12px
}


/* =========================== INVOCATION =========================== */

.invocation{
  max-width:780px;
  margin:0 auto clamp(52px,6vw,92px);
  text-align:center;
  padding:clamp(30px,4vw,52px);
  border:1px solid rgba(201,162,39,.34);
  background:
    linear-gradient(
      180deg,
      rgba(38,64,111,.42),
      rgba(12,23,49,.18)
    );
  position:relative
}

.invocation::before{
  content:"";
  position:absolute;
  inset:9px;
  border:1px solid rgba(240,223,168,.2);
  pointer-events:none
}

.invocation .ar{
  color:var(--gold-pale);
  font-size:clamp(1.15rem,2.6vw,1.7rem);
  line-height:2.4;
  margin-bottom:20px
}

.invocation .tr{
  color:rgba(244,239,230,.78);
  font-size:.92rem;
  line-height:1.95;
  max-width:56ch;
  margin-inline:auto
}

.invocation .ttl{
  font-family:var(--display);
  font-weight:500;
  color:var(--gold-lt);
  font-size:clamp(1.45rem,3vw,2rem);
  margin-top:24px;
  letter-spacing:.06em
}

html[lang="ur"] .invocation .ttl{
  font-family:var(--urdu);
  direction:rtl;
  letter-spacing:0
}


/* =========================== DUROOD-E-TAJ =========================== */

.durood{
  max-width:920px
}

.durood .durood-ar{
  font-size:clamp(1.02rem,2vw,1.3rem);
  line-height:2.3
}

.durood .durood-tr{
  max-width:74ch
}

.durood .dt-label{
  font-family:var(--display);
  font-size:.78rem;
  font-weight:500;
  color:var(--gold);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:24px 0 14px
}

html[lang="ur"] .durood .dt-label{
  font-family:var(--urdu);
  letter-spacing:0;
  text-transform:none;
  font-size:.95rem
}

.durood .durood-meaning{
  color:rgba(244,239,230,.86);
  max-width:70ch
}

.durood .dt-tag{
  display:block;
  margin-top:26px;
  opacity:.75
}


/* =========================== THE FOLIO LIST =========================== */

.folios{
  max-width:1000px;
  margin-inline:auto;
  border-top:1px solid rgba(201,162,39,.2)
}

.folio{
  position:relative;
  border-bottom:1px solid rgba(201,162,39,.2);
  opacity:0;
  transform:translateY(18px);
  transition:
    opacity .8s,
    transform .8s var(--ease)
}

.folio.in{
  opacity:1;
  transform:none
}

.folio-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:clamp(16px,2.4vw,30px);
  align-items:start;
  width:100%;
  padding:clamp(20px,2.6vw,30px) clamp(10px,1.6vw,22px);
  position:relative;
  isolation:isolate
}

.folio-head::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(
      90deg,
      rgba(38,64,111,.5),
      rgba(38,64,111,0)
    );
  clip-path:inset(0 100% 0 0);
  transition:clip-path .6s var(--ease)
}

.folio-head:hover::before,
.folio.open .folio-head::before{
  clip-path:inset(0 0 0 0)
}

.folio-head::after{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-start:0;
  width:2px;
  background:
    linear-gradient(
      180deg,
      var(--gold-lt),
      var(--gold)
    );
  scale:1 0;
  transform-origin:top;
  transition:scale .55s var(--ease)
}

.folio-head:hover::after,
.folio.open .folio-head::after{
  scale:1 1
}

.numeral{
  position:relative;
  width:clamp(44px,5vw,58px);
  height:clamp(44px,5vw,58px);
  flex:0 0 auto;
  display:grid;
  place-items:center
}

.numeral svg{
  position:absolute;
  inset:0;
  color:rgba(201,162,39,.35);
  transition:
    rotate 1s var(--ease),
    color .5s
}

.folio-head:hover .numeral svg,
.folio.open .numeral svg{
  rotate:45deg;
  color:var(--gold)
}

.numeral span{
  font-family:var(--display);
  font-weight:500;
  font-size:1rem;
  color:var(--gold-lt);
  position:relative;
  z-index:1
}

html[lang="ur"] .numeral span{
  font-family:var(--urdu)
}

.folio-title{
  min-width:0
}

.folio-title .hon{
  display:block;
  font-size:.78rem;
  color:rgba(240,223,168,.62);
  line-height:1.8;
  margin-bottom:5px
}

html[lang="ur"] .folio-title .hon{
  font-size:.92rem;
  line-height:2.05
}

.folio-title .nm{
  display:block;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.25rem,2.1vw,1.68rem);
  line-height:1.3;
  color:var(--bone);
  transition:
    letter-spacing .6s var(--ease),
    color .4s
}

html[lang="ur"] .folio-title .nm{
  font-family:var(--urdu);
  line-height:2;
  font-size:clamp(1.12rem,1.9vw,1.44rem)
}

.folio-head:hover .nm{
  letter-spacing:.018em;
  color:#fff
}

html[lang="ur"] .folio-head:hover .nm{
  letter-spacing:0
}

.folio-title .suf{
  display:block;
  font-size:.88rem;
  color:rgba(244,239,230,.58);
  margin-top:6px;
  font-style:italic
}

html[lang="ur"] .folio-title .suf{
  font-family:var(--urdu);
  font-style:normal;
  font-size:.92rem
}

.folio.key .nm{
  color:var(--gold-lt)
}

.folio.key .numeral svg{
  color:var(--gold)
}


.chev{
  width:30px;
  height:30px;
  flex:0 0 auto;
  margin-top:6px;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,162,39,.4);
  color:var(--gold-lt);
  transition:
    rotate .5s var(--ease),
    background .4s,
    color .4s
}

.folio-head:hover .chev{
  background:rgba(201,162,39,.16)
}

.folio.open .chev{
  rotate:180deg;
  background:var(--gold);
  color:var(--lapis-ink)
}


/* the body: grid-rows trick gives a smooth true-height reveal */

.folio-body{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--ease)
}

.folio.open .folio-body{
  grid-template-rows:1fr
}

.folio-inner{
  overflow:hidden
}

.folio-pad{
  padding:
    6px
    clamp(10px,1.6vw,22px)
    clamp(28px,3.4vw,42px)
    clamp(66px,7.6vw,110px)
}

.detail{
  display:grid;
  gap:clamp(18px,2.4vw,30px);
  grid-template-columns:1fr
}

@media(min-width:860px){
  .detail{
    grid-template-columns:1.25fr .75fr
  }

  .folio-media{
    grid-column:1 / -1
  }
}

/* ---- shrine photograph — big square plate, aligned with the card's own
   padding rather than bleeding past it ---- */

.folio-media{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  width:100%;
  max-width:560px;
  margin-inline:auto;
  border:1px solid rgba(201,162,39,.32);
  background:rgba(6,13,31,.4);
  opacity:0;
  translate:0 10px;
  transition:
    opacity .5s .06s,
    translate .5s .06s var(--ease);
}

@media(min-width:860px){
  .folio-media{
    max-width:620px
  }
}

@media(min-width:1180px){
  .folio-media{
    max-width:680px
  }
}

.folio.open .folio-media{
  opacity:1;
  translate:0 0
}

.fm-frame{
  position:absolute;
  inset:0
}

.fm-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:rgba(240,223,168,.42);
  text-align:center;
  padding:16px;
  background:rgba(6,13,31,.35);
}
.fm-placeholder span{
  font-size:.78rem;
  letter-spacing:.03em;
  max-width:240px;
}

.fm-frame .pic{
  position:absolute;
  inset:0
}

.fm-corner{
  position:absolute;
  inset:9px;
  border:1px solid rgba(240,223,168,.28);
  pointer-events:none
}

.fm-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(
      180deg,
      rgba(6,13,31,0) 16%,
      rgba(6,13,31,.6) 62%,
      rgba(6,13,31,.92)
    )
}

.folio-media figcaption{
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:clamp(14px,3vw,30px)
}

.fm-loc{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-family:var(--body);
  font-size:.68rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gold-lt)
}

html[lang="ur"] .fm-loc{
  font-family:var(--urdu);
  font-size:.84rem;
  letter-spacing:0;
  text-transform:none
}

.fm-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(1.28rem,5vw,1.9rem);
  line-height:1.22;
  color:var(--bone)
}

html[lang="ur"] .fm-name{
  font-family:var(--urdu);
  font-size:clamp(1.24rem,4.4vw,1.6rem);
  line-height:1.5
}

.facts{
  display:grid;
  gap:0
}

.fact{
  padding:12px 0;
  border-top:1px solid rgba(201,162,39,.18);
  opacity:0;
  translate:0 10px;
  transition:
    opacity .5s,
    translate .5s var(--ease)
}

.folio.open .fact{
  opacity:1;
  translate:0 0
}

.folio.open .fact:nth-child(1){
  transition-delay:.10s
}

.folio.open .fact:nth-child(2){
  transition-delay:.16s
}

.folio.open .fact:nth-child(3){
  transition-delay:.22s
}

.folio.open .fact:nth-child(4){
  transition-delay:.28s
}

.folio.open .fact:nth-child(5){
  transition-delay:.34s
}

.fact dt{
  font-family:var(--body);
  font-size:.68rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:5px
}

html[lang="ur"] .fact dt{
  font-size:.9rem;
  letter-spacing:0;
  text-transform:none
}

.fact dd{
  font-size:.97rem;
  line-height:1.8;
  color:rgba(244,239,230,.88)
}

html[lang="ur"] .fact dd{
  line-height:2.2;
  font-size:.98rem
}

.bioblock{
  opacity:0;
  translate:0 10px;
  transition:
    opacity .5s .2s,
    translate .5s .2s var(--ease)
}

.folio.open .bioblock{
  opacity:1;
  translate:0 0
}

.bioblock p{
  font-family:var(--display);
  font-weight:400;
  font-size:1.08rem;
  line-height:1.72;
  color:rgba(244,239,230,.92);
  margin:0
}

html[lang="ur"] .bioblock p{
  font-family:var(--urdu);
  line-height:2.3;
  font-size:1rem
}

.tag{
  display:inline-block;
  font-family:var(--body);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold-pale);
  border:1px solid rgba(201,162,39,.45);
  padding:4px 10px;
  margin-bottom:12px
}

html[lang="ur"] .tag{
  font-family:var(--urdu);
  font-size:.82rem;
  letter-spacing:0;
  text-transform:none
}


/* the full printed line, set like a rubricated manuscript block */

.source{
  position:relative;
  padding:20px 22px;
  background:rgba(6,13,31,.55);
  border:1px solid rgba(201,162,39,.25);
  opacity:0;
  translate:0 10px;
  transition:
    opacity .5s .26s,
    translate .5s .26s var(--ease)
}

.folio.open .source{
  opacity:1;
  translate:0 0
}

.source .lbl{
  display:block;
  font-size:.66rem;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--madder);
  filter:brightness(1.7);
  margin-bottom:10px
}

html[lang="ur"] .source .lbl{
  font-size:.88rem;
  letter-spacing:0;
  text-transform:none
}

.source .line{
  font-family:var(--display);
  font-weight:400;
  font-size:1.02rem;
  line-height:1.85;
  color:var(--gold-pale)
}

html[lang="ur"] .source .line{
  font-family:var(--urdu);
  line-height:2.35;
  direction:rtl;
  text-align:right
}


.chapter{
  margin:clamp(44px,6vw,76px) 0 0;
  text-align:center;
  padding-bottom:clamp(20px,3vw,34px)
}

.chapter span{
  display:inline-block;
  padding:12px 28px;
  border:1px solid rgba(201,162,39,.42);
  color:var(--gold-lt);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  max-width:min(600px,86vw);
  line-height:1.9
}

html[lang="ur"] .chapter span{
  font-size:1rem;
  letter-spacing:0;
  text-transform:none;
  line-height:2
}

.chain-actions{
  text-align:center;
  margin-top:clamp(46px,6vw,72px)
}

.chain-tools{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-bottom:clamp(30px,4vw,44px)
}

.tool{
  border:1px solid rgba(201,162,39,.35);
  padding:9px 20px;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(244,239,230,.82);
  transition:
    background .4s,
    color .4s,
    border-color .4s
}

html[lang="ur"] .tool{
  font-size:.94rem;
  letter-spacing:0;
  text-transform:none
}

.tool:hover{
  background:var(--gold);
  color:var(--lapis-ink);
  border-color:var(--gold)
}


/* =========================== full-screen reading view =========================== */

.full{
  position:fixed;
  inset:0;
  z-index:95;
  background:var(--lapis-ink);
  color:var(--bone);
  opacity:0;
  pointer-events:none;
  transition:opacity .55s;
  overflow-y:auto
}

.full.on{
  opacity:1;
  pointer-events:auto
}

.full-top{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:18px;
  padding:16px var(--rail);
  background:rgba(6,13,31,.95);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(201,162,39,.24)
}

.full-top-seal{
  width:26px;
  height:26px;
  flex:0 0 auto;
  color:var(--gold);
  opacity:.85
}

.full-top-seal svg{
  width:100%;
  height:100%
}

.full-top h3{
  font-size:1.2rem;
  font-weight:500;
  color:var(--bone);
  letter-spacing:.08em
}

html[lang="ur"] .full-top h3{
  letter-spacing:0
}


/* -------------------- opening invocation of the reading view -------------------- */

.full-invocation{
  position:relative;
  max-width:880px;
  margin:0 auto;
  text-align:center;
  padding:clamp(46px,7vw,88px) var(--rail) clamp(34px,5vw,58px)
}

.fi-frame-l,
.fi-frame-r{
  position:absolute;
  top:clamp(26px,4vw,46px);
  bottom:clamp(18px,3vw,32px);
  width:clamp(28px,4vw,54px);
  opacity:.55;
  pointer-events:none;
  border-top:1px solid rgba(201,162,39,.4);
  border-bottom:1px solid rgba(201,162,39,.4)
}

.fi-frame-l{
  left:var(--rail);
  border-left:1px solid rgba(201,162,39,.4)
}

.fi-frame-r{
  right:var(--rail);
  border-right:1px solid rgba(201,162,39,.4)
}

.full-invocation .orn-rule{
  margin-bottom:clamp(22px,3vw,32px)
}

.full-invocation .fi-rule2{
  margin-block:clamp(26px,3.6vw,38px)
}

.fi-ar{
  color:var(--gold-pale);
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  line-height:2.05;
  margin:0 0 clamp(22px,3vw,32px);
  text-shadow:0 0 26px rgba(240,223,168,.22)
}

.fi-tr{
  font-family:var(--display);
  color:rgba(244,239,230,.86);
  font-size:clamp(1.05rem,2vw,1.34rem);
  line-height:2;
  max-width:66ch;
  margin:0 auto
}

.fi-tr + .fi-tr{
  margin-top:14px
}

.fi-letters{
  color:var(--gold-pale)
}

.fi-ttl{
  font-family:var(--display);
  font-weight:500;
  color:var(--gold-lt);
  font-size:clamp(1.9rem,4vw,2.6rem);
  letter-spacing:.05em;
  margin:0
}

.full-top .close{
  margin-inline-start:auto;
  width:38px;
  height:38px;
  border:1px solid rgba(201,162,39,.45);
  color:var(--gold-lt);
  display:grid;
  place-items:center;
  transition:.35s
}

.full-top .close:hover{
  background:var(--gold);
  color:var(--lapis-ink)
}

.full-list{
  position:relative;
  max-width:840px;
  margin-inline:auto;
  padding:clamp(10px,2vw,26px) var(--rail) 130px;
  border-top:1px solid rgba(201,162,39,.22)
}

.fl{
  position:relative;
  display:flex;
  gap:clamp(14px,2.4vw,24px);
  padding:clamp(24px,3.4vw,34px) 0;
  border-bottom:1px solid rgba(201,162,39,.14)
}

.fl::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-1px;
  translate:-50% 50%;
  width:7px;
  height:7px;
  background:var(--lapis-ink);
  border:1px solid rgba(201,162,39,.45);
  rotate:45deg
}

.fl:last-child{
  border-bottom:none
}

.fl:last-child::after{
  display:none
}

.fl .n{
  flex:0 0 auto;
  width:clamp(38px,4.6vw,50px);
  height:clamp(38px,4.6vw,50px);
  position:relative;
  display:grid;
  place-items:center;
  font-family:var(--display);
  font-weight:500;
  color:var(--gold-lt);
  font-size:1rem
}

.fl .n::before{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(201,162,39,.4);
  rotate:45deg
}

html[lang="ur"] .fl .n{
  font-family:var(--urdu);
  letter-spacing:0
}

.fl .line{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.18rem,2.1vw,1.48rem);
  line-height:1.95;
  color:rgba(244,239,230,.94)
}

html[lang="ur"] .fl .line{
  font-family:var(--urdu);
  line-height:2.55;
  direction:rtl;
  text-align:right;
  font-size:clamp(1.28rem,2.4vw,1.66rem)
}

.fl.key .line{
  color:var(--gold-pale)
}

.fl.key .n{
  color:var(--gold)
}

.fl.key .n::before{
  border-color:rgba(201,162,39,.75)
}


/* -------------------- decorative margins either side of the reading view -------------------- */

.full-rail{
  position:fixed;
  top:0;
  bottom:0;
  width:120px;
  pointer-events:none;
  z-index:1;
  display:none
}

@media(min-width:1360px){
  .full-rail{
    display:block
  }
}

.full-rail.left{
  left:clamp(6px,2vw,34px)
}

.full-rail.right{
  right:clamp(6px,2vw,34px)
}

.fr-line{
  position:absolute;
  top:8%;
  bottom:8%;
  left:50%;
  width:1px;
  background:linear-gradient(180deg,
      transparent,
      rgba(201,162,39,.4) 10%,
      rgba(201,162,39,.4) 90%,
      transparent)
}

.fr-marks{
  position:absolute;
  inset:0
}

.fr-mark{
  position:absolute;
  left:50%;
  top:0;
  translate:-50% -50%;
  width:30px;
  height:30px;
  color:rgba(201,162,39,.42)
}

.fr-mark svg{
  width:100%;
  height:100%
}

.fr-mark.big{
  width:44px;
  height:44px;
  color:rgba(201,162,39,.6)
}


/* =========================== gallery =========================== */

.gal{
  display:grid;
  gap:16px;
  grid-template-columns:1fr
}

@media(min-width:720px){
  .gal{
    grid-template-columns:repeat(4,1fr);
    grid-auto-rows:190px
  }

  .gal>:nth-child(1){
    grid-column:span 2;
    grid-row:span 2
  }

  .gal>:nth-child(2){
    grid-column:span 2
  }

  .gal>:nth-child(3),
  .gal>:nth-child(4){
    grid-column:span 1
  }

  .gal>:nth-child(5){
    grid-column:span 4
  }
}

.gitem{
  position:relative;
  overflow:hidden;
  min-height:210px;
  margin:0;
  cursor:zoom-in;
  border:1px solid rgba(22,40,79,.22)
}

.gitem:hover .pic{
  transform:scale(1.07)
}

.gitem::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(240,223,168,.45);
  opacity:0;
  transition:opacity .5s var(--ease);
  pointer-events:none
}

.gitem:hover::after{
  opacity:1
}

.gitem figcaption{
  position:absolute;
  inset-block-end:0;
  inset-inline:0;
  padding:18px 20px;
  color:var(--bone);
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(6,13,31,.9)
    );
  font-size:.88rem
}


.lightbox{
  position:fixed;
  inset:0;
  z-index:98;
  background:rgba(6,13,31,.97);
  display:grid;
  place-items:center;
  padding:5vw;
  opacity:0;
  pointer-events:none;
  transition:opacity .5s
}

.lightbox.on{
  opacity:1;
  pointer-events:auto
}

.lightbox figure{
  margin:0;
  max-width:1060px;
  width:100%
}

.lightbox .frame{
  position:relative;
  border:1px solid rgba(201,162,39,.32);
  overflow:hidden;
  aspect-ratio:3/2
}

.lightbox figcaption{
  color:var(--gold-pale);
  text-align:center;
  margin-top:16px;
  font-family:var(--display);
  font-weight:500;
  font-size:1.25rem
}

html[lang="ur"] .lightbox figcaption{
  font-family:var(--urdu)
}

.lightbox .close{
  position:absolute;
  top:22px;
  inset-inline-end:22px;
  width:44px;
  height:44px;
  border:1px solid rgba(201,162,39,.5);
  color:var(--gold-lt);
  display:grid;
  place-items:center
}


/* =========================== footer =========================== */

footer{
  position:relative;
  background:var(--lapis-ink);
  color:var(--bone);
  padding:clamp(60px,8vw,96px) 0 34px;
  overflow:hidden
}

.f-grid{
  display:grid;
  gap:36px;
  grid-template-columns:1fr;
  align-items:start
}

@media(min-width:800px){
  .f-grid{
    grid-template-columns:1.3fr 1fr auto
  }
}

.f-brand b{
  font-family:var(--display);
  font-weight:500;
  font-size:1.55rem;
  display:block;
  letter-spacing:.08em;
  color:var(--bone)
}

html[lang="ur"] .f-brand b{
  font-family:var(--urdu);
  letter-spacing:0
}

.f-brand p{
  color:rgba(244,239,230,.58);
  max-width:42ch;
  margin-top:14px;
  font-size:.92rem
}

.f-links{
  display:flex;
  flex-direction:column;
  gap:9px
}

.f-links a{
  color:rgba(244,239,230,.7);
  font-size:.9rem;
  transition:
    color .3s,
    padding .3s
}

.f-links a:hover{
  color:var(--gold-lt);
  padding-inline-start:6px
}

.memorial{
  margin-top:clamp(50px,7vw,80px);
  padding-top:34px;
  border-top:1px solid rgba(201,162,39,.22);
  text-align:center;
  position:relative;
  z-index:2
}

.memorial .orn-rule{
  color:var(--gold);
  margin-bottom:26px
}

.memorial .mem{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.05rem,2vw,1.35rem);
  color:var(--gold-pale);
  line-height:1.8;
  max-width:48ch;
  margin:0 auto 22px
}

html[lang="ur"] .memorial .mem{
  font-family:var(--urdu);
  line-height:2.3
}

.memorial .by{
  font-size:.78rem;
  color:rgba(244,239,230,.5);
  letter-spacing:.1em
}

html[lang="ur"] .memorial .by{
  font-size:.92rem;
  letter-spacing:0
}


/* =========================== reveal =========================== */

.rv{
  opacity:0;
  transform:translateY(24px);
  transition:
    opacity .9s,
    transform .9s var(--ease)
}

.rv.in{
  opacity:1;
  transform:none
}




/* =========================== ACCESSIBILITY =========================== */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important
  }

  .rv,
  .folio{
    opacity:1 !important;
    transform:none !important
  }

  .fact,
  .bioblock,
  .source{
    opacity:1 !important;
    translate:none !important
  }
}

/* =============================================================================
   PREMIUM UPGRADE — additions
   ============================================================================= */

/* ---------------------------- loading screen ---------------------------- */
.loader{
  position:fixed;
  inset:0;
  z-index:999;
  display:grid;
  place-items:center;
  gap:16px;
  background:var(--lapis-ink);
  color:var(--gold-lt);
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader-seal{
  width:52px;height:52px;
  animation:loaderspin 2.4s linear infinite;
  opacity:.92;
}
.loader-seal svg{width:100%;height:100%}
@keyframes loaderspin{
  from{transform:rotate(0deg) scale(.94)}
  to{transform:rotate(360deg) scale(.94)}
}
.loader-word{
  font-family:var(--display);
  letter-spacing:.16em;
  font-size:.92rem;
  color:var(--bone);
  text-transform:uppercase;
  opacity:.85;
}
.loader.done{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

/* ------------------------- reading progress rail ------------------------ */
.progress-rail{
  position:fixed;
  inset-block:0;
  inset-inline-end:0;
  width:3px;
  z-index:80;
  background:rgba(201,162,39,.12);
}
.progress-rail #progressFill{
  display:block;
  width:100%;
  height:0%;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  transition:height .12s linear;
}
@media(max-width:720px){
  .progress-rail{width:2px}
}

/* --------------------------- back to top button -------------------------- */
.back-to-top{
  position:fixed;
  inset-block-end:26px;
  inset-inline-end:26px;
  z-index:60;
  width:46px;height:46px;
  border-radius:50%;
  border:1px solid rgba(201,162,39,.5);
  background:rgba(12,23,49,.88);
  backdrop-filter:blur(8px);
  color:var(--gold-lt);
  display:grid;
  place-items:center;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), border-color .3s;
}
.back-to-top:not([hidden]){opacity:1; transform:translateY(0)}
.back-to-top[hidden]{display:grid; opacity:0; pointer-events:none}
.back-to-top:hover{border-color:rgba(227,199,103,.9)}

/* ------------------------------ hero extras ------------------------------ */
.hero-pattern{
  position:absolute;
  inset:0;
  z-index:1;
  opacity:.05;
  background-image:
    linear-gradient(45deg, rgba(227,199,103,.5) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(227,199,103,.5) 1px, transparent 1px);
  background-size:64px 64px;
  animation:patternshift 60s linear infinite;
}
@keyframes patternshift{
  from{background-position:0 0, 0 0}
  to{background-position:64px 0, -64px 0}
}
.hero-dust{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
.hero-dust span{
  position:absolute;
  bottom:-6%;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:rgba(240,223,168,.55);
  opacity:0;
  animation:dustfloat var(--dur) linear var(--delay) infinite;
}
@keyframes dustfloat{
  0%{opacity:0; transform:translate(0,0)}
  8%{opacity:.55}
  92%{opacity:.25}
  100%{opacity:0; transform:translate(var(--drift),-118vh)}
}
.hero-sweep{
  position:absolute;
  inset-block:-10%;
  inset-inline-start:-30%;
  width:22%;
  background:linear-gradient(100deg, transparent, rgba(240,223,168,.35), transparent);
  transform:skewX(-18deg) translateX(-40%);
  animation:heroswoop 2.4s 1.1s var(--ease) 1;
  pointer-events:none;
}
@keyframes heroswoop{
  0%{transform:skewX(-18deg) translateX(-140%); opacity:0}
  12%{opacity:1}
  55%{opacity:.7}
  100%{transform:skewX(-18deg) translateX(560%); opacity:0}
}
.seq{
  opacity:0;
  transform:translateY(16px);
  animation:seqin .9s var(--ease) forwards;
  animation-delay:calc(var(--d, 0) * .16s + .15s);
}
@keyframes seqin{
  to{opacity:1; transform:translateY(0)}
}

/* ------------------------- manuscript introduction ------------------------ */
.manuscript-sec{
  position:relative;
  overflow:hidden;
  background-image:
    radial-gradient(rgba(22,40,79,.05) 1px, transparent 1px);
  background-size:5px 5px;
}
.ms-corner{
  position:absolute;
  width:46px;height:46px;
  border-color:rgba(201,162,39,.4);
  pointer-events:none;
  z-index:1;
}
.ms-corner.tl{
  top:18px; inset-inline-start:18px;
  border-width:1px 0 0 1px;
  border-style:solid;
}
.ms-corner.br{
  bottom:18px; inset-inline-end:18px;
  border-width:0 1px 1px 0;
  border-style:solid;
}
.ms-rule{
  display:block;
  width:1px;
  height:44px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
  margin-bottom:18px;
}
.archival-meta .stat{
  transition:transform .35s var(--ease);
}
.archival-meta .stat:hover{
  transform:translateY(-3px);
}
.archival-meta .stat:hover b{
  color:var(--gold);
  text-shadow:0 0 22px rgba(201,162,39,.35);
}
.archival-meta .stat b{
  font-variant-numeric:tabular-nums;
  transition:color .35s, text-shadow .35s;
  font-size:3rem;
}
.archival-meta .stat span{
  text-transform:uppercase;
}

/* --------------------------- the original record --------------------------- */
.record-stage{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:26px;
  margin-top:18px;
}
.record-table{
  width:100%;
  max-width:760px;
  perspective:1400px;
}
.record-frame{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  border:1px solid rgba(201,162,39,.4);
  background:
    linear-gradient(180deg, rgba(234,225,206,.06), transparent),
    var(--lapis);
  background-size:cover;
  background-position:center;
  transform:rotateX(3deg);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.75), 0 2px 0 rgba(201,162,39,.25) inset;
  cursor:zoom-in;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.record-frame:hover,
.record-frame:focus-visible{
  transform:rotateX(0deg) translateY(-4px);
  box-shadow:0 50px 100px -40px rgba(0,0,0,.8), 0 2px 0 rgba(201,162,39,.4) inset;
}
.record-frame.has-image .record-placeholder{display:none}
.record-placeholder{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  color:rgba(240,223,168,.5);
  text-align:center;
  padding:20px;
  font-size:.86rem;
  letter-spacing:.03em;
}
.record-zoom{
  position:absolute;
  inset-block-end:14px;
  inset-inline-end:14px;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid rgba(201,162,39,.5);
  background:rgba(6,13,31,.65);
  color:var(--gold-lt);
  display:grid;
  place-items:center;
  transition:opacity .3s;
}
.record-frame.no-image{cursor:default}
.record-frame.no-image .record-zoom{
  opacity:.35;
  cursor:not-allowed;
}
.record-cap{
  max-width:60ch;
  text-align:center;
  color:rgba(244,239,230,.7);
  font-size:.9rem;
}
.record-viewer{
  position:fixed;
  inset:0;
  z-index:120;
  background:rgba(6,13,31,.97);
  display:grid;
  place-items:center;
  padding:5vw;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
}
.record-viewer.on{opacity:1; pointer-events:auto}
.record-viewer-stage{max-width:1100px; width:100%}
.record-viewer-stage img{
  width:100%;
  border:1px solid rgba(201,162,39,.4);
  cursor:zoom-in;
  transition:transform .4s var(--ease);
  transform-origin:center;
}
.record-viewer-stage img.zoomed{
  transform:scale(1.7);
  cursor:zoom-out;
}
.record-viewer .close{
  position:absolute;
  top:22px;
  inset-inline-end:22px;
  width:44px;height:44px;
  border:1px solid rgba(201,162,39,.5);
  color:var(--gold-lt);
  display:grid;
  place-items:center;
}

/* -------------------------------- search bar ------------------------------- */
.Shijra-search{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:480px;
  margin:0 auto 26px;
  padding:12px 18px;
  border:1px solid rgba(201,162,39,.35);
  background:rgba(244,239,230,.03);
  color:var(--gold-pale);
}
.Shijra-search svg{flex:none; opacity:.7}
.Shijra-search input{
  flex:1;
  min-width:0;
  background:none;
  border:0;
  outline:0;
  color:var(--bone);
  font-family:var(--body);
  font-size:.92rem;
}
.Shijra-search input::placeholder{color:rgba(244,239,230,.45)}
.search-count{font-size:.76rem; color:rgba(244,239,230,.55); white-space:nowrap}
.search-clear{
  font-size:1.1rem;
  line-height:1;
  color:rgba(244,239,230,.6);
  padding:2px 4px;
}
mark{
  background:rgba(201,162,39,.35);
  color:inherit;
  padding:0 1px;
}

/* ------------------------------- chain tools ------------------------------- */
.tool-accent{
  border-color:rgba(227,199,103,.55) !important;
  color:var(--gold-lt) !important;
}
.tool.active,
.tool-accent.active{
  background:rgba(201,162,39,.18);
}

/* --------------------------- follow the chain bar --------------------------- */
.follow-bar{
  position:sticky;
  top:80px;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin:0 auto 26px;
  padding:10px 20px;
  max-width:340px;
  border:1px solid rgba(201,162,39,.4);
  background:rgba(6,13,31,.85);
  backdrop-filter:blur(10px);
  color:var(--gold-lt);
}
.follow-bar button{
  width:28px;height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(201,162,39,.35);
  border-radius:50%;
}
.follow-progress{
  font-variant-numeric:tabular-nums;
  font-size:.82rem;
  min-width:64px;
  text-align:center;
}
.follow-exit{
  border:0 !important;
  border-radius:0 !important;
  width:auto !important;
  height:auto !important;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 8px !important;
  opacity:.75;
}
.folio.following .folio-head{
  background:rgba(201,162,39,.08);
}
.folio.following .numeral svg{
  color:var(--gold-lt);
}

/* ---------------------------- Shijra vertical spine -------------------------- */
.folios-wrap{
  position:relative;
}
.chain-timeline{
  position:absolute;
  inset-inline-start:calc(var(--rail) + 27px);
  top:0;
  bottom:0;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(201,162,39,.35) 6%, rgba(201,162,39,.35) 94%, transparent);
  pointer-events:none;
  z-index:0;
}
@media(max-width:760px){
  .chain-timeline{display:none}
}

/* ---------------------------- timeline of the chain --------------------------- */
.era-timeline{
  position:relative;
  max-width:640px;
  margin:0 auto;
  padding-inline-start:26px;
  border-inline-start:1px solid rgba(201,162,39,.35);
}
html[dir="rtl"] .era-timeline{
  padding-inline-start:0;
  padding-inline-end:26px;
  border-inline-start:0;
  border-inline-end:1px solid rgba(201,162,39,.35);
}
.era-node{
  position:relative;
  display:flex;
  gap:16px;
  padding-block:18px;
}
.era-dot{
  position:absolute;
  inset-inline-start:-31px;
  top:24px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--gold-lt);
  box-shadow:0 0 0 4px rgba(201,162,39,.15);
}
html[dir="rtl"] .era-dot{
  inset-inline-start:auto;
  inset-inline-end:-31px;
}
.era-name{
  display:block;
  font-family:var(--display);
  color:var(--bone);
  font-size:1.05rem;
}
.era-dates{
  display:block;
  color:var(--gold-pale);
  font-size:.8rem;
  letter-spacing:.04em;
  margin-top:2px;
}
.era-period{
  display:block;
  color:rgba(244,239,230,.55);
  font-size:.76rem;
  margin-top:2px;
}

/* ----------------------------- archive details panel -------------------------- */
.archive-panel{
  max-width:820px;
  margin:0 auto;
  border-top:1px solid rgba(201,162,39,.25);
}
.ad-row{
  display:grid;
  grid-template-columns:160px 1fr;
  gap:18px;
  padding:18px 4px;
  border-bottom:1px solid rgba(201,162,39,.16);
  align-items:baseline;
}
.ad-label{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-lt);
}
.ad-value{
  font-family:var(--display);
  font-size:1.15rem;
  color:var(--bone);
}
@media(max-width:600px){
  .ad-row{grid-template-columns:1fr; gap:6px}
}

/* --------------------------------- places map --------------------------------- */
.places-map{
  position:relative;
  max-width:900px;
  margin:0 auto;
  aspect-ratio:16/9;
  border:1px solid rgba(22,40,79,.25);
  background:
    radial-gradient(rgba(22,40,79,.14) 1px, transparent 1px) 0 0/26px 26px,
    var(--lapis-ink);
  filter:grayscale(.4);
  opacity:.55;
  overflow:hidden;
}
.pm-veil{
  position:absolute;
  inset:0;
  background:rgba(6,13,31,.35);
}
.pm-marker{
  position:absolute;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--gold-lt);
  opacity:.5;
  transform:translate(-50%,-50%);
}
.pm-badge{
  position:absolute;
  inset-inline:0;
  bottom:16px;
  text-align:center;
  color:var(--gold-pale);
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------------------------------- lightbox nav ------------------------------- */
.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;height:44px;
  border:1px solid rgba(201,162,39,.4);
  color:var(--gold-lt);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(6,13,31,.4);
}
.lb-nav.prev{inset-inline-start:22px}
.lb-nav.next{inset-inline-end:22px}
.lb-count{
  display:block;
  text-align:center;
  color:rgba(244,239,230,.5);
  font-size:.76rem;
  letter-spacing:.1em;
  margin-top:6px;
}

/* ---------------------------------- easter egg ---------------------------------- */
.archive-note{
  position:fixed;
  inset:0;
  z-index:150;
  display:grid;
  place-items:center;
  background:rgba(6,13,31,.8);
  opacity:0;
  pointer-events:none;
  transition:opacity .4s;
  padding:20px;
}
.archive-note.on{opacity:1; pointer-events:auto}
.an-inner{
  max-width:440px;
  background:var(--lapis-deep);
  border:1px solid rgba(201,162,39,.4);
  padding:34px 30px;
  text-align:center;
  color:var(--bone);
}
.an-seal{
  display:inline-block;
  width:40px;height:40px;
  color:var(--gold-lt);
  margin-bottom:16px;
  animation:loaderspin 8s linear infinite;
}
.an-inner p{
  font-family:var(--display);
  font-size:1.02rem;
  line-height:1.6;
}
.an-inner button{
  margin-top:14px;
  border:1px solid rgba(201,162,39,.5);
  color:var(--gold-lt);
  padding:9px 22px;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.digital-seal{cursor:pointer}

/* --------------------------------- full reading extras --------------------------------- */
.full-position{
  color:rgba(240,223,168,.6);
  font-size:.78rem;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  margin-inline-start:auto;
  margin-inline-end:16px;
}
.full-print-btn{
  border:1px solid rgba(201,162,39,.4);
  color:var(--gold-lt);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:8px 14px;
  margin-inline-end:12px;
}
.fl{position:relative}
.fl-copy{
  font-size:.68rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(240,223,168,.55);
  border:1px solid rgba(201,162,39,.3);
  padding:4px 10px;
  margin-inline-start:14px;
  flex:none;
}
.fl-copy.done{color:var(--gold-lt); border-color:rgba(201,162,39,.6)}

/* ------------------------------------- misc micro-interactions ------------------------------------- */
.btn{transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s, color .35s, border-color .35s}
.btn:hover{transform:translateY(-2px)}
.tool{transition:transform .3s var(--ease)}
.tool:hover{transform:translateY(-1px)}
.close{transition:transform .3s var(--ease)}
.close:hover{transform:rotate(90deg)}
.sec-head h2{will-change:transform}

/* ------------------------------------------- RTL layout mirroring --------------------------------- */
html[dir="rtl"] .Shijra-search svg{order:2}
html[dir="rtl"] .lb-nav.prev{inset-inline-start:auto; inset-inline-end:22px}
html[dir="rtl"] .lb-nav.next{inset-inline-end:auto; inset-inline-start:22px}
html[dir="rtl"] .back-to-top{inset-inline-end:auto; inset-inline-start:26px}
html[dir="rtl"] .progress-rail{inset-inline-end:auto; inset-inline-start:0}
html[dir="rtl"] .ad-row{grid-template-columns:160px 1fr}
html[dir="rtl"] .full-position{margin-inline-start:16px; margin-inline-end:auto}

/* --------------------------------------------- print --------------------------------------------- */
@media print{
  @page{size:A4; margin:16mm 14mm}

  /* Printing from the "complete Shijra" reader: ONLY the Sijra is printed.
     (script.js adds body.print-sijra while the reader is open and printing.) */
  body.print-sijra{background:#fff !important; color:#111 !important; overflow:visible !important; height:auto !important}
  body.print-sijra > *:not(#full){display:none !important}
  body.print-sijra #full{
    position:static !important; inset:auto !important; opacity:1 !important; overflow:visible !important;
    height:auto !important; background:#fff !important; color:#111 !important; pointer-events:auto !important
  }
  body.print-sijra .full-top,
  body.print-sijra .full-rail,
  body.print-sijra .fi-frame-l,
  body.print-sijra .fi-frame-r,
  body.print-sijra .fl-copy,
  body.print-sijra .fl::after{display:none !important}

  /* the invocation opens the printed Sijra */
  body.print-sijra .full-invocation{
    display:block !important; position:static !important; padding:0 0 10mm !important;
    text-align:center; background:none !important; break-after:avoid
  }
  body.print-sijra .fi-ar,
  body.print-sijra .fi-tr,
  body.print-sijra .fi-letters,
  body.print-sijra .fi-ttl{color:#111 !important; text-shadow:none !important}
  body.print-sijra .fi-ttl{color:#8a1c1c !important}

  body.print-sijra .full-list{max-width:none !important; padding:0 !important; border:0 !important}
  body.print-sijra .fl{
    break-inside:avoid; page-break-inside:avoid;
    padding:5mm 0 !important; border-bottom:.3pt solid #bbb !important
  }
  body.print-sijra .fl .n{color:#111 !important}
  body.print-sijra .fl .n::before{border-color:#999 !important}
  body.print-sijra .fl .line{color:#111 !important; font-size:13pt !important; line-height:1.7 !important}
  body.print-sijra .fl.key .line{color:#8a1c1c !important; font-weight:600}
  body.print-sijra .fl-chapter{
    break-inside:avoid; break-after:avoid; text-align:center; color:#8a1c1c !important;
    border:0 !important; padding:8mm 0 2mm !important
  }

  /* fallback: printing the normal page still hides the chrome */
  .nav, .loader, .progress-rail, .back-to-top, .scrollcue, .lightbox, .record-viewer,
  .archive-note, .follow-bar{display:none !important}
}

/* --------------------------------------------- reduced motion additions --------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .hero .pic{animation:none}
  .hero-pattern{animation:none}
  .hero-sweep{display:none}
  .seq{opacity:1 !important; transform:none !important; animation:none !important}
  .loader-seal{animation:none}
  .an-seal{animation:none}
}

/* =============================================================================
   MOBILE — dedicated responsive treatment for new sections
   ============================================================================= */
@media(max-width:720px){
  .Shijra-search{
    max-width:100%;
    margin-inline:var(--rail);
    padding:11px 14px;
  }
  .Shijra-search input{font-size:.88rem}
  .search-count{display:none}

  .follow-bar{
    position:fixed;
    top:auto;
    bottom:14px;
    inset-inline:14px;
    max-width:none;
    margin:0;
    justify-content:space-between;
    padding:10px 16px;
    z-index:70;
  }
  .follow-progress{min-width:auto}

  .record-frame{aspect-ratio:3/4}
  .record-zoom{width:34px;height:34px}
  .record-cap{font-size:.84rem; padding-inline:8px}

  .era-timeline{padding-inline-start:20px}
  html[dir="rtl"] .era-timeline{padding-inline-end:20px}
  .era-node{padding-block:14px}
  .era-name{font-size:.96rem}

  .ad-row{padding:14px 4px}
  .ad-value{font-size:1rem}

  .places-map{aspect-ratio:4/5}

  .lb-nav{width:38px;height:38px}
  .lb-nav.prev{inset-inline-start:8px}
  .lb-nav.next{inset-inline-end:8px}

  .back-to-top{
    width:42px;height:42px;
    inset-block-end:80px;
    inset-inline-end:16px;
  }
  html[dir="rtl"] .back-to-top{inset-inline-start:16px}

  .an-inner{padding:26px 20px}

  .full-position{display:none}
  .full-print-btn{padding:6px 10px; font-size:.66rem}

  .fl-copy{
    font-size:.62rem;
    padding:3px 8px;
    margin-inline-start:8px;
  }

  .hero-dust span{display:none}
  .hero-dust span:nth-child(-n+10){display:block}
}

@media(max-width:420px){
  .follow-bar{
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
  }
  .follow-exit{order:5; width:100%; text-align:center}
}

/* keep the follow-bar clear of the mobile bottom safe-area */
@supports(padding:max(0px)){
  @media(max-width:720px){
    .follow-bar{
      padding-bottom:max(10px, env(safe-area-inset-bottom));
    }
  }
}

/* optional 'Almaroof ...' popular-name line printed after the suffix */
.folio-title .suf.aka{font-style:italic;opacity:.85;margin-top:2px}

/* chapter heading inside the complete-reading view (before Names associated with Jalanvi Sheriff) */
.fl-chapter{
  text-align:center;
  font-family:var(--display);
  color:var(--gold-lt);
  font-size:clamp(1.05rem,2vw,1.35rem);
  letter-spacing:.04em;
  padding:clamp(26px,3.6vw,38px) 0 6px;
  border-bottom:1px solid rgba(201,162,39,.14)
}
html[lang="ur"] .fl-chapter{font-family:var(--urdu);letter-spacing:0}

/* --- publish fixes --- */
.follow-bar[hidden]{display:none !important}
.hero h1{overflow-wrap:break-word}
.lb-nav[hidden],.lb-count[hidden],.archive-note[hidden],.search-clear[hidden]{display:none !important}

/* ===================== IN MEMORY OF — white theme ===================== */
.memorial{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,39,.10), transparent 60%),
    #FFFFFF;
  color:var(--body-fg);
  border-block:1px solid rgba(201,162,39,.28);
}
.memorial .sec-head h2{color:var(--lapis-deep)}
.memorial .sec-head p{color:var(--slate)}
.memorial .orn-rule{margin:0 auto 20px}
.mem-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(26px,4vw,52px);
  max-width:900px;
  margin-inline:auto;
}
@media (min-width:760px){
  .mem-grid{grid-template-columns:1fr 1fr}
}
.mem-card{
  background:#fff;
  border:1px solid rgba(201,162,39,.38);
  border-radius:4px;
  padding:14px 14px 30px;
  text-align:center;
  box-shadow:0 18px 44px -26px rgba(12,23,49,.35);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  position:relative;
}
.mem-card::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(201,162,39,.18);
  border-radius:2px;
  pointer-events:none;
}
.mem-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 54px -26px rgba(12,23,49,.45);
}
.mem-photo{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:linear-gradient(160deg,#FBF7EC,#F1E8D0);
  display:grid;
  place-items:center;
  color:rgba(201,162,39,.7);
}
.mem-initial svg{width:38%;min-width:90px;height:auto}
.mem-photo img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  transition:transform 1.2s var(--ease);
}
.mem-card:hover .mem-photo img{transform:scale(1.04)}
.mem-body{padding:6px 14px 0}
.mem-rule{
  display:block;
  width:56px;
  height:1px;
  margin:20px auto 16px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.mem-body h3{
  font-family:var(--display);
  font-size:clamp(1.35rem,2.2vw,1.7rem);
  line-height:1.3;
  color:var(--lapis-deep);
  margin:0 0 8px;
}
.mem-role{
  margin:0;
  font-size:.92rem;
  color:var(--madder);
  letter-spacing:.04em;
}
.mem-dua{
  text-align:center;
  max-width:56ch;
  margin:clamp(34px,5vw,60px) auto 0;
  font-family:var(--display);
  font-style:italic;
  font-size:1.15rem;
  color:var(--slate);
}
html[lang="ur"] .mem-body h3,
html[lang="ur"] .mem-role,
html[lang="ur"] .mem-dua{
  font-family:var(--urdu);
  font-style:normal;
  letter-spacing:0;
  line-height:2
}