@font-face{
  font-family:'KFGQPC Uthmanic Script HAFS';
  src:url('fonts/KFGQPC-Uthmanic-Script-HAFS.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
:root{
  --ink:#1E2420; --ink-soft:#535D53;
  --parchment:#F4EEDD; --parchment-deep:#EAE0C4; --parchment-card:#FBF8EE;
  --gold:#B8842E; --gold-deep:#9C6F28; --gold-soft:#DDB877; --indigo:#3E3A5E; --sage:#5C6E4E; --rose:#A15C4A;
  --teal:#3E6E64; --plum:#5B3E63;
  --line: rgba(30,36,32,0.14);
  --shadow: 0 1px 2px rgba(30,36,32,0.06), 0 8px 24px -12px rgba(30,36,32,0.18);
  --radius-sm: 6px; --radius-md: 9px;
  /* Per-chapter accents, used on the homepage grid */
  --c-morning-adhkar: var(--gold);       --c-morning-adhkar-bg: #F8E7C3;
  --c-evening-adhkar: var(--indigo);     --c-evening-adhkar-bg: #E3E0EF;
  --c-before-salah-adhkar: var(--sage);  --c-before-salah-adhkar-bg: #E5EDDB;
  --c-after-salah-adhkar: var(--teal);   --c-after-salah-adhkar-bg: #DCEBE7;
  --c-before-sleep-adhkar: var(--plum);  --c-before-sleep-adhkar-bg: #EAE0EC;
  --c-duas: var(--rose);                 --c-duas-bg: #F2E0D8;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:'Source Serif 4', serif; -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse at top left, rgba(184,132,46,0.06), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(92,110,78,0.05), transparent 55%);
}
a{color:inherit;}
:focus-visible{outline:2.5px solid var(--gold); outline-offset:3px; border-radius:2px;}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);font-weight:500;}

header.masthead{position:sticky;top:0;z-index:40;background:rgba(244,238,221,0.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.masthead-inner{max-width:1080px;margin:0 auto;padding:0 28px;}
.masthead-row{display:flex;align-items:center;gap:32px;padding:14px 0;}
.brand{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.brand .mark{width:26px;height:26px;color:var(--gold);flex:0 0 auto;transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.brand .mark svg{width:100%;height:100%;}
.brand:hover .mark{transform:rotate(45deg);}
.brand .name{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;letter-spacing:0.01em;text-decoration:none;color:var(--ink) !important;transition:color .2s ease;}
.brand .name:visited{color:var(--ink) !important;}
.brand .name:hover{color:var(--gold) !important;}
.masthead-meta{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--ink-soft);letter-spacing:0.04em;}

/* Mobile menu trigger — hidden on desktop, shown via media query below */
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:4px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:var(--parchment-card);cursor:pointer;padding:0;align-items:center;}
.menu-btn span{width:16px;height:1.5px;background:var(--ink);transition:transform .25s ease,opacity .2s ease;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}
.menu-btn:active{transform:scale(0.94);}

nav.chapters{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
nav.chapters::-webkit-scrollbar{display:none;}
.ribbon{position:relative;flex:0 0 auto;font-family:'Fraunces',serif;font-weight:480;font-size:0.85rem;padding:9px 16px 10px;color:var(--ink-soft);background:var(--parchment-deep);border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;border-radius:var(--radius-sm);transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;}
.ribbon:hover{color:var(--ink);background:#E7DBB6;border-color:var(--gold-soft);}
.ribbon:active{transform:scale(0.97);}
.ribbon.active{background:linear-gradient(160deg,#C8964A 0%,var(--gold) 55%,var(--gold-deep) 100%);color:#FBF8EE;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,0.25),0 3px 8px -3px rgba(184,132,46,0.55);}

/* Mobile slide-down drawer menu */
.mobile-menu{position:fixed;inset:0;z-index:60;background:rgba(30,36,32,0.42);opacity:0;pointer-events:none;transition:opacity .25s ease;}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu-inner{position:absolute;top:0;left:0;right:0;background:var(--parchment-card);border-radius:0 0 var(--radius-md) var(--radius-md);padding:18px 20px 28px;transform:translateY(-12px);opacity:0;transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .25s ease;box-shadow:0 20px 40px -12px rgba(30,36,32,0.3);}
.mobile-menu.open .mobile-menu-inner{transform:translateY(0);opacity:1;}
.mobile-menu-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.menu-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--ink-soft);cursor:pointer;width:44px;height:44px;}
.mobile-menu-row{display:flex;justify-content:space-between;align-items:center;padding:14px 4px;text-decoration:none;color:var(--ink);font-family:'Fraunces',serif;font-size:1.05rem;border-bottom:1px dashed var(--line);min-height:44px;}
.mobile-menu-row:active{background:rgba(184,132,46,0.08);}
.mobile-menu-row.active{color:var(--gold);}
.mobile-menu-count{font-family:'IBM Plex Mono',monospace;font-size:0.7rem;color:var(--ink-soft);}
.mobile-menu-home{font-family:'IBM Plex Mono',monospace;font-size:0.78rem;color:var(--sage);border-bottom:none;justify-content:flex-start;gap:6px;}

.hero{position:relative;max-width:1080px;margin:0 auto;padding:64px 28px 44px;overflow:visible;}
.hero::before{content:"";position:absolute;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;top:-1px;height:340px;background:radial-gradient(900px 300px at 20% 0%, rgba(221,184,119,0.5), transparent 65%),linear-gradient(160deg,#F8E4C6 0%,var(--parchment) 60%,#EFDCC2 100%);z-index:-1;}
.hero-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:end;}
.hero h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.05;margin:14px 0 18px;letter-spacing:-0.01em;}
.hero p.lede{font-size:1.05rem;color:var(--ink-soft);max-width:46ch;line-height:1.6;}
.hero-count{text-align:right;font-family:'IBM Plex Mono',monospace;}
.hero-count .num{font-family:'Fraunces',serif;font-size:3.2rem;font-weight:600;color:var(--gold);line-height:1;}
.hero-count .label{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-soft);}

/* Desktop reading layout: content + jump-to sidebar */
.page-layout{max-width:1080px;margin:0 auto;padding:0 28px 20px;display:grid;grid-template-columns:1fr 220px;gap:48px;align-items:start;}
.page-layout main{max-width:none;margin:0;padding:8px 0 100px;}
.toc{position:sticky;top:100px;order:2;padding-top:24px;}
.toc ol{list-style:none;margin:12px 0 0;padding:0;border-left:1px solid var(--line);}
.toc li{margin:0;}
.toc a{display:block;padding:7px 0 7px 14px;font-family:'IBM Plex Mono',monospace;font-size:0.74rem;color:var(--ink-soft);text-decoration:none;line-height:1.4;border-left:2px solid transparent;margin-left:-1px;transition:color .15s ease,border-color .15s ease;}
.toc a:hover{color:var(--gold);border-left-color:var(--gold-soft);}

main{max-width:820px;margin:0 auto;padding:8px 28px 120px;}
.single-crumb{max-width:1080px;margin:24px auto 0;padding:0 28px;font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--ink-soft);}
.single-main{max-width:1080px;margin:0 auto;padding:16px 28px 100px;}
.single-main .card{max-width:760px;}
.single-main > p{max-width:760px;}
.card{background:var(--parchment-card);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:34px 36px;margin-bottom:28px;scroll-margin-top:100px;}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px dashed var(--line);}
.card-head .index{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--gold);letter-spacing:0.08em;text-transform:uppercase;}
.card-head h2{font-family:'Fraunces',serif;font-weight:600;font-size:1.5rem;margin:6px 0 0;}
.card-head h2 a{text-decoration:none;color:inherit;}
.card-head h2 .ar-name{font-family:'Amiri',serif;font-weight:700;color:var(--ink-soft);font-size:1.1rem;margin-left:10px;}

.bead-badge{flex:0 0 auto;width:58px;height:58px;border-radius:50%;border:3px dotted var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;color:var(--gold);background:rgba(184,132,46,0.06);}
.bead-badge .x{font-size:1.15rem;font-weight:600;line-height:1;}
.bead-badge .t{font-size:0.55rem;letter-spacing:0.06em;}

.arabic{text-align:right;font-family:'KFGQPC Uthmanic Script HAFS','Scheherazade New','Amiri',serif;font-weight:400;font-size:2.1rem;line-height:2.6;color:var(--ink);margin:6px 0 24px;}

.field-toggles{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:flex-start;margin-bottom:4px;}
.field-toggles .note-body{flex-basis:100%;}


.audio-row{margin:6px 0 6px;}
.audio-row audio{border-radius:6px;}

.note-toggle{margin-top:18px;background:none;border:none;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:0.74rem;letter-spacing:0.04em;color:var(--sage);display:flex;align-items:center;gap:6px;padding:0;}
.note-toggle::before{content:"✦";font-size:0.65rem;}
.note-toggle[aria-expanded="true"]{color:var(--rose);}
.note-body{max-height:0;overflow:hidden;transition:max-height .35s ease;}
.note-body-inner{margin-top:14px;padding:16px 18px;border-left:3px solid var(--sage);background:rgba(92,110,78,0.06);font-size:0.94rem;line-height:1.65;color:var(--ink-soft);font-style:italic;}
.note-body-inner.content-plain{font-style:normal;font-size:1.02rem;color:var(--ink);border-left-color:var(--gold-soft);background:rgba(184,132,46,0.05);}

footer{max-width:820px;margin:0 auto;padding:28px 28px 80px;border-top:1px solid var(--line);font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--ink-soft);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;}
footer a{text-decoration:none;color:var(--ink-soft) !important;}
footer a:visited{color:var(--ink-soft) !important;}
footer a:hover{color:var(--gold) !important;}
.single-crumb a{color:var(--ink-soft) !important;text-decoration:none;}
.single-crumb a:visited{color:var(--ink-soft) !important;}
.single-crumb a:hover{color:var(--gold) !important;}

/* ===== Homepage ===== */
.home-hero{position:relative;max-width:1080px;margin:0 auto;padding:48px 28px 0;overflow:visible;}
.home-hero::before{content:"";position:absolute;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;top:-1px;height:380px;background:radial-gradient(1000px 340px at 15% 0%, rgba(221,184,119,0.5), transparent 65%),linear-gradient(160deg,#F8E4C6 0%,var(--parchment) 60%,#EFDCC2 100%);z-index:-1;}
.home-hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;padding-bottom:28px;}
.home-hero-copy h1{font-family:'Fraunces',serif;font-weight:600;font-size:clamp(2.6rem,5.5vw,3.9rem);line-height:1.04;margin:16px 0 20px;letter-spacing:-0.015em;}
.home-hero-copy h1 em{font-style:italic;font-weight:480;color:var(--gold);}
.home-hero-copy .lede{font-size:1.08rem;color:var(--ink-soft);max-width:44ch;line-height:1.65;}
.home-hero-motif{display:flex;justify-content:center;}
.home-hero-motif svg{width:100%;max-width:260px;animation:spin-slow 90s linear infinite;}
@keyframes spin-slow{to{transform:rotate(360deg);}}

/* "Right now" contextual strip — bridges the hero and the grid, real utility not filler */
.now-strip{position:relative;z-index:1;display:flex;align-items:center;gap:10px;max-width:520px;margin:0 auto;transform:translateY(40%);background:var(--parchment-card);border:1px solid var(--gold-soft);border-radius:var(--radius-md);padding:11px 20px;text-decoration:none;color:var(--ink);font-size:0.88rem;box-shadow:0 1px 2px rgba(30,36,32,0.05);transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.now-strip:hover{border-color:var(--gold);transform:translateY(calc(40% - 2px));box-shadow:0 3px 8px -3px rgba(30,36,32,0.15);}
.now-strip-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:0 0 auto;}
.now-strip strong{color:var(--gold);font-weight:600;}

.home-grid-wrap{max-width:1080px;margin:0 auto;padding:44px 28px 100px;}
.home-grid-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:26px;}
.home-grid-count{font-family:'IBM Plex Mono',monospace;font-size:0.75rem;color:var(--ink-soft);}

.category-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:20px;}
.category-card{--accent: var(--gold);--accent-bg: var(--parchment-deep);background:linear-gradient(165deg,var(--accent-bg) 0%,var(--parchment-card) 60%);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:26px 24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease;animation:card-in .5s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * 70ms);}
.category-card[data-cat="morning-adhkar"]{--accent:var(--c-morning-adhkar);--accent-bg:var(--c-morning-adhkar-bg);}
.category-card[data-cat="evening-adhkar"]{--accent:var(--c-evening-adhkar);--accent-bg:var(--c-evening-adhkar-bg);}
.category-card[data-cat="before-salah-adhkar"]{--accent:var(--c-before-salah-adhkar);--accent-bg:var(--c-before-salah-adhkar-bg);}
.category-card[data-cat="after-salah-adhkar"]{--accent:var(--c-after-salah-adhkar);--accent-bg:var(--c-after-salah-adhkar-bg);}
.category-card[data-cat="before-sleep-adhkar"]{--accent:var(--c-before-sleep-adhkar);--accent-bg:var(--c-before-sleep-adhkar-bg);}
.category-card[data-cat="duas"]{--accent:var(--c-duas);--accent-bg:var(--c-duas-bg);}
@keyframes card-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.category-card:hover{transform:translateY(-4px);box-shadow:0 3px 8px rgba(30,36,32,0.07),0 16px 24px -14px rgba(30,36,32,0.26);}
.category-card:active{transform:translateY(-1px) scale(0.99);}
.category-card.featured{grid-column:span 2;grid-row:span 2;padding:34px 32px;justify-content:center;}
.category-card.featured .category-icon{width:56px;height:56px;}
.category-card.featured .category-name{font-size:1.6rem;}
.category-card.featured .category-desc{font-size:1rem;max-width:34ch;}
.category-icon{width:38px;height:38px;color:var(--accent);}
.category-icon svg{width:100%;height:100%;}
.category-name{font-family:'Fraunces',serif;font-weight:600;font-size:1.15rem;}
.category-desc{color:var(--ink-soft);font-size:0.88rem;line-height:1.5;flex:1;}
.category-count{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;color:var(--accent);letter-spacing:0.03em;font-weight:500;}

@media (max-width:900px){
  .page-layout{grid-template-columns:1fr;}
  .toc{display:none;}
  .category-grid{grid-template-columns:repeat(2,1fr);}
  .category-card.featured{grid-column:span 2;grid-row:span 1;}
}

@media (max-width:640px){
  .hero-grid{grid-template-columns:1fr;} .hero-count{text-align:left;}
  .home-hero-grid{grid-template-columns:1fr;text-align:center;}
  .home-hero-motif{order:-1;max-width:120px;margin:0 auto;}
  .card{padding:24px 20px;} .arabic{font-size:1.7rem;line-height:2.3;}
  .masthead-inner{padding:0 18px;} .hero{padding:44px 18px 32px;}
  .home-hero{padding:44px 18px 0;}
  main{padding:8px 18px 100px;} .page-layout{padding:0 18px 20px;} footer{padding:20px 18px 60px;}
  .single-crumb{padding:0 18px;} .single-main{padding:16px 18px 100px;}
  .home-grid-wrap{padding:36px 18px 80px;}
  .now-strip{max-width:none;margin:0 18px;font-size:0.82rem;padding:12px 16px;}
  .category-grid{grid-template-columns:1fr;}
  .category-card.featured{grid-column:span 1;padding:26px 24px;}

  /* Ribbon tabs become a single "Chapters" trigger; full list moves to the drawer */
  .menu-btn{display:flex;}
  nav.chapters{display:none;}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important;} html{scroll-behavior:auto;} }