@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Inter:wght@400;500;600;700;800&family=Libre+Baskerville:wght@400;700&family=Literata:opsz,wght@7..72,400;7..72,600;7..72,700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap");

:root {
  --primary:#8f171d; --primary-dark:#741217; --page-bg:#fbf8f4; --page-bg-top:#fffdf9;
  --nav-bg:rgba(255,252,248,.88); --text:#2d2926; --muted:#6f6661; --card-bg:rgba(255,255,255,.86);
  --card-border:#e8ded6; --link:#7a1d21; --link-hover:#a3262b; --surface-soft:color-mix(in srgb,var(--card-bg) 88%,var(--page-bg));
  --hairline:color-mix(in srgb,var(--card-border) 72%,transparent); --drawer:#fff; --panel:#fffdf9; --control:#f6f0ec;
  --font-serif:"Source Serif 4",Georgia,serif; --font-sans:"Inter",system-ui,sans-serif; --font-arabic:"Amiri","Noto Naskh Arabic",serif;
  --scale:1; --content-width:min(1220px,calc(100% - 44px)); --shadow:0 20px 50px rgba(45,35,30,.06);
  --header-bg:linear-gradient(160deg,#9b1a20 0%,#7a1217 55%,#5c0d11 100%); --footer:#f0eae2;
}
[data-theme="dark"]{--primary:#7f161c;--primary-dark:#5f1015;--page-bg:#15110f;--page-bg-top:#201814;--nav-bg:rgba(29,23,20,.94);--text:#f6eee8;--muted:#cdbcb2;--card-bg:rgba(31,25,22,.92);--card-border:#41352f;--link:#e1a84e;--link-hover:#f3c86f;--drawer:#1f1916;--panel:#1f1916;--control:#2b231f;--header-bg:linear-gradient(160deg,#241b1a,#1a1210 55%,#110a09);--footer:#1e1714}
[data-theme="sepia"]{--primary:#87512a;--primary-dark:#6d3f20;--page-bg:#fbf3e3;--page-bg-top:#fff7e8;--nav-bg:rgba(242,228,203,.9);--text:#30241b;--muted:#6f5b49;--card-bg:rgba(255,249,236,.9);--card-border:#e2cfae;--link:#7b3f20;--link-hover:#9b512a;--drawer:#fff9ec;--panel:#fff9ec;--control:#f2e4cb;--header-bg:linear-gradient(160deg,#87512a,#6d3f20 55%,#4f2d18);--footer:#eee0c4}
[data-font-pair="literata"]{--font-serif:"Literata",Georgia,serif;--font-sans:"Noto Sans",system-ui,sans-serif}
[data-font-pair="baskerville"]{--font-serif:"Libre Baskerville",Georgia,serif;--font-sans:"Nunito Sans",system-ui,sans-serif}
[data-arabic-font="amiri"]{--font-arabic:"Amiri","Noto Naskh Arabic",serif}
[data-arabic-font="classic"]{--font-arabic:"Noto Naskh Arabic","Amiri",serif}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--text);background:radial-gradient(circle at 50% -12%,color-mix(in srgb,var(--primary) 8%,transparent),transparent 32rem),linear-gradient(180deg,var(--page-bg-top),var(--page-bg) 22rem);font-family:var(--font-serif);font-size:calc(16px * var(--scale));line-height:1.62;letter-spacing:-.003em;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased} a{color:inherit} button,input,select{font:inherit} button{cursor:pointer}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.header-inner,.top-nav-inner,.page,.footer-body,.footer-base{width:var(--content-width);margin-inline:auto}.site-header{position:relative;overflow:hidden;color:#fff;background:var(--header-bg);box-shadow:0 1px 0 rgba(255,255,255,.07),0 4px 32px rgba(30,10,10,.32)}.site-header:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.018) 0 1px,transparent 1px 18px),repeating-linear-gradient(-45deg,rgba(255,255,255,.012) 0 1px,transparent 1px 18px)}.site-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,rgba(240,185,100,.75) 50%,transparent)}.header-inner{min-height:68px;display:flex;align-items:center;gap:14px;position:relative;z-index:1}.brand{color:#fff;font-size:clamp(1.12rem,1rem + .6vw,1.52rem);font-weight:700;letter-spacing:-.02em;text-decoration:none;text-shadow:0 1px 8px rgba(0,0,0,.25)}.brand:after{content:"";display:block;width:100%;height:1px;margin-top:3px;background:linear-gradient(90deg,rgba(220,170,80,.7),transparent)}.header-actions{margin-left:auto;display:flex;gap:10px}.icon-button,.sidebar-menu-button{width:38px;height:38px;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;background:transparent;text-decoration:none;transition:background .15s}.icon-button:hover,.sidebar-menu-button:hover{background:rgba(255,255,255,.13)}.icon-button svg,.sidebar-menu-button svg{width:19px;height:19px}.sidebar-menu-button{display:none}
.top-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--nav-bg) 92%,transparent);border-bottom:1px solid var(--hairline);backdrop-filter:blur(18px)}.top-nav-inner{min-height:48px;display:flex;align-items:center;gap:30px;overflow-x:auto;scrollbar-width:none}.top-nav-inner::-webkit-scrollbar{display:none}.top-nav a{position:relative;flex:0 0 auto;padding:15px 0 12px;color:color-mix(in srgb,var(--text) 70%,transparent);font-family:var(--font-sans);font-size:.84rem;font-weight:700;text-decoration:none}.top-nav a:after{content:"";position:absolute;left:0;right:0;bottom:8px;height:2px;border-radius:99px;background:var(--link);opacity:0;transform:scaleX(.45);transition:.16s}.top-nav a:hover,.top-nav a.active{color:var(--link)}.top-nav a:hover:after,.top-nav a.active:after{opacity:1;transform:scaleX(1)}
.settings-panel{position:fixed;top:68px;right:max(20px,calc((100vw - 1180px)/2));z-index:60;width:min(350px,calc(100vw - 32px));padding:18px;color:var(--text);background:var(--panel);border:1px solid var(--card-border);border-radius:14px;box-shadow:0 18px 48px rgba(30,20,16,.24)}.settings-panel[hidden]{display:none}.settings-title{margin:0 0 14px;color:var(--link);font-size:1.2rem}.settings-section{margin-top:16px}.settings-label{display:block;margin:0 0 8px;color:var(--muted);font-family:var(--font-sans);font-size:.72rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}.settings-grid{display:grid;gap:8px}.settings-row{display:flex;flex-wrap:wrap;gap:8px}.setting-choice,.font-control{border:1px solid var(--card-border);background:var(--control);color:var(--text);border-radius:999px;padding:8px 12px;font-family:var(--font-sans);font-size:.86rem}.setting-choice:hover,.font-control:hover{color:var(--link-hover);transform:translateY(-1px)}.setting-choice.active,.font-control.active{background:var(--link);color:#fff;border-color:var(--link);font-weight:700}[data-theme="dark"] .setting-choice.active,[data-theme="dark"] .font-control.active{color:#1b130f}.settings-note{margin:14px 0 0;color:var(--muted);font-family:var(--font-sans);font-size:.8rem}
.page{margin-top:clamp(34px,5vw,62px);margin-bottom:64px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(28px,3.2vw,44px);align-items:start}.sidebar{position:sticky;top:78px;padding:0 0 24px;font-family:var(--font-sans);max-height:calc(100vh - 94px)}.sidebar:before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--primary) 35%,transparent) 15%,color-mix(in srgb,var(--primary) 22%,transparent) 70%,transparent)}.sidebar-head{padding:0 0 14px 14px;border-bottom:1px solid var(--hairline)}.sidebar-label{display:block;color:color-mix(in srgb,var(--muted) 70%,transparent);font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.sidebar-filter{width:calc(100% - 14px);margin-top:12px;padding:9px 11px;border:1px solid var(--card-border);border-radius:9px;color:var(--text);background:var(--card-bg);font-family:var(--font-sans);font-size:.84rem}.sidebar-list{margin:0;padding:8px 0 22px;max-height:calc(100vh - 194px);overflow:auto;scrollbar-width:thin}.sidebar-list a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:7px;align-items:start;margin:1px 0;padding:9px 10px 9px 14px;border-left:3px solid transparent;border-radius:0 6px 6px 0;text-decoration:none;color:var(--text);font-size:.88rem;line-height:1.35;transition:.15s}.sidebar-list a:hover,.sidebar-list a.active{color:var(--link);background:color-mix(in srgb,var(--primary) 6%,transparent);border-left-color:var(--link)}.chapter-number{color:color-mix(in srgb,var(--muted) 58%,transparent);font-size:.69rem;font-weight:800;letter-spacing:.03em;padding-top:.22em}.sidebar-list a.active .chapter-number{color:var(--link)}.sidebar-translit{display:block;color:var(--muted);font-size:.74rem;font-weight:500;margin-top:2px}.sidebar-close-button{display:none}.sidebar-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.48);opacity:0;visibility:hidden;pointer-events:none;transition:.22s}.sidebar-backdrop[hidden]{display:none}body.sidebar-open{overflow:hidden}body.sidebar-open .sidebar-backdrop{opacity:1;visibility:visible;pointer-events:auto}
main{width:100%;max-width:930px;min-width:0;margin-inline:auto;font-size:calc(18px * var(--scale))}.page-title{max-width:850px;margin:0 auto;padding-bottom:26px;color:var(--text);font-size:clamp(2rem,3.2vw,2.9rem);font-weight:700;line-height:1.08;letter-spacing:-.045em;text-align:center;text-wrap:balance}.page-title:after{content:"";display:block;width:56px;height:3px;margin:20px auto 0;background:linear-gradient(90deg,var(--primary),color-mix(in srgb,var(--primary) 60%,var(--link)));border-radius:999px}.page-kicker{margin:0 auto 10px;color:var(--link);font-family:var(--font-sans);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-align:center;text-transform:uppercase}.card{background:var(--surface-soft);border:1px solid var(--hairline);border-radius:16px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}
.search-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:16px;margin-bottom:34px}.search-input{width:100%;padding:13px 15px;border:1px solid var(--card-border);border-radius:11px;background:var(--panel);color:var(--text);font-family:var(--font-sans);font-size:.94rem}.primary-button{border:1px solid var(--link);border-radius:11px;padding:11px 17px;color:#fff;background:var(--link);font-family:var(--font-sans);font-size:.88rem;font-weight:800}.primary-button:hover{background:var(--link-hover);border-color:var(--link-hover)}.search-status{grid-column:1/-1;min-height:1.2em;margin:0;color:var(--muted);font-family:var(--font-sans);font-size:.78rem}.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px}.section-heading h2{margin:0;font-family:var(--font-sans);font-size:.82rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.section-heading span{color:var(--muted);font-family:var(--font-sans);font-size:.8rem}.chapter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.chapter-card{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 17px;text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s}.chapter-card:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(45,35,30,.09);border-color:color-mix(in srgb,var(--link) 22%,var(--card-border))}.chapter-card-number{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--link) 10%,transparent);color:var(--link);font-family:var(--font-sans);font-size:.78rem;font-weight:800}.chapter-card-title{font-weight:700;line-height:1.25}.chapter-card-translit{display:block;margin-top:3px;color:var(--muted);font-family:var(--font-sans);font-size:.76rem}.chapter-arrow{color:var(--link);font-family:var(--font-sans);font-size:1.05rem}.chapter-card[hidden]{display:none}
.chapter-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-8px auto 26px}.meta-pill{padding:6px 10px;border:1px solid var(--card-border);border-radius:999px;background:var(--card-bg);color:var(--muted);font-family:var(--font-sans);font-size:.76rem;font-weight:700}.chapter-toolbar{position:sticky;top:58px;z-index:25;display:grid;grid-template-columns:auto minmax(150px,1fr) auto;gap:10px;align-items:center;padding:11px 12px;margin-bottom:20px;background:color-mix(in srgb,var(--panel) 94%,transparent);border:1px solid var(--hairline);border-radius:13px;box-shadow:0 9px 28px rgba(45,35,30,.06);backdrop-filter:blur(14px)}.toolbar-link{display:inline-flex;align-items:center;gap:7px;padding:9px 11px;border:1px solid var(--card-border);border-radius:9px;background:var(--control);color:var(--link);font-family:var(--font-sans);font-size:.78rem;font-weight:800;text-decoration:none}.toolbar-search{width:100%;padding:9px 12px;border:1px solid var(--card-border);border-radius:9px;background:var(--panel);color:var(--text);font-family:var(--font-sans);font-size:.82rem}.reading-card{overflow:hidden}.chapter-bismillah{padding:32px 26px 28px;text-align:center;border-bottom:1px solid var(--hairline)}.chapter-bismillah .arabic{margin:0;font-family:var(--font-arabic);font-size:2rem;line-height:1.8;direction:rtl}.chapter-bismillah .english{margin:8px 0 0;color:var(--muted);font-size:.94rem}.verse{padding:clamp(24px,4vw,38px) clamp(20px,5vw,48px);border-bottom:1px solid var(--hairline);scroll-margin-top:130px}.verse:last-child{border-bottom:0}.verse[hidden]{display:none}.verse-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.verse-number{display:inline-flex;align-items:center;gap:8px;color:var(--link);font-family:var(--font-sans);font-size:.8rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.verse-number:before{content:attr(data-number);width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--link);color:#fff;font-size:.74rem}.verse-link{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--card-border);border-radius:50%;color:var(--link);text-decoration:none;font-family:var(--font-sans)}.verse-arabic{margin:0 0 18px;font-family:var(--font-arabic);font-size:clamp(1.58rem,2.8vw,2.15rem);line-height:2.05;text-align:right;direction:rtl}.verse-english{max-width:72ch;margin:0;line-height:1.82}.proof{margin-top:22px;border:1px solid color-mix(in srgb,var(--link) 18%,var(--card-border));border-left:4px solid var(--link);border-radius:10px;background:color-mix(in srgb,var(--card-bg) 90%,var(--control));overflow:hidden}.proof summary{padding:13px 16px;color:var(--link);font-family:var(--font-sans);font-size:.8rem;font-weight:800;cursor:pointer}.proof p{margin:0;padding:0 16px 16px;color:var(--muted);font-size:.94rem;line-height:1.7}.verse-subheading{padding:24px 20px 4px;text-align:center}.verse-subheading h2{display:inline-block;margin:0;padding-bottom:8px;border-bottom:2px solid color-mix(in srgb,var(--primary) 20%,transparent);font-family:var(--font-sans);font-size:1rem;letter-spacing:-.01em}.no-results{padding:34px;text-align:center;color:var(--muted);font-family:var(--font-sans);font-size:.9rem}.no-results[hidden]{display:none}
.site-footer{position:relative;width:100%;margin-top:56px;padding-top:46px;background:var(--footer);border-top:1px solid var(--hairline);font-family:var(--font-sans)}.site-footer:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--link),var(--primary-dark));opacity:.82}.footer-body{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding-bottom:38px}.footer-name{margin:0 0 8px;font-family:var(--font-serif);font-size:1.08rem;font-weight:700}.footer-copy{margin:0;max-width:620px;color:var(--muted);font-size:.88rem;line-height:1.65}.footer-label{display:block;margin:0 0 12px;color:color-mix(in srgb,var(--muted) 70%,transparent);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.footer-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px}.footer-nav a{color:var(--muted);font-size:.86rem;text-decoration:none}.footer-nav a:hover{color:var(--link)}.footer-base{display:flex;justify-content:space-between;gap:16px;padding:17px 0;border-top:1px solid var(--hairline);color:var(--muted);font-size:.78rem}.footer-base a{color:var(--link)}
:focus-visible{outline:3px solid color-mix(in srgb,var(--link) 35%,transparent);outline-offset:2px}
@media(max-width:980px){.header-inner,.top-nav-inner,.page,.footer-body,.footer-base{width:min(100% - 26px,1180px)}.sidebar-menu-button{display:inline-flex}.page{grid-template-columns:minmax(0,1fr);gap:0;margin-top:32px}.page>.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:80;width:min(24rem,92vw);max-height:none;padding:54px 0 18px;overflow:auto;visibility:hidden;background:var(--drawer);border-right:1px solid var(--card-border);box-shadow:18px 0 44px rgba(60,40,35,.22);transform:translateX(-100%);transition:transform .22s,visibility .22s}.page>.sidebar:before{display:none}body.sidebar-open .page>.sidebar{visibility:visible;transform:translateX(0)}.sidebar-close-button{position:absolute;top:11px;right:12px;width:34px;height:34px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:var(--text);font-size:1.35rem}.sidebar-head{padding-left:20px}.sidebar-list{max-height:none}.sidebar-list a{padding-left:20px}.chapter-toolbar{top:58px}.footer-body{grid-template-columns:1fr;gap:34px}}
@media(max-width:680px){body{font-size:calc(15.5px * var(--scale))}.header-inner,.top-nav-inner,.page,.footer-body,.footer-base{width:min(100% - 18px,1180px)}.brand{font-size:1.08rem}.header-actions{gap:4px}.top-nav-inner{gap:22px}.page{margin-top:22px;margin-bottom:44px}main{font-size:calc(17px * var(--scale))}.page-title{font-size:clamp(1.65rem,7.8vw,2.2rem);letter-spacing:-.03em}.search-card{grid-template-columns:1fr}.search-card .primary-button{width:100%}.chapter-grid{grid-template-columns:1fr}.chapter-toolbar{grid-template-columns:1fr 1fr;top:56px}.toolbar-search{grid-column:1/-1;grid-row:1}.toolbar-link{justify-content:center}.verse{padding:24px 16px}.verse-arabic{font-size:1.62rem}.footer-base{flex-direction:column}.footer-nav{grid-template-columns:1fr}.settings-panel{top:62px;right:9px;width:calc(100vw - 18px)}}
@media(max-width:420px){.header-inner,.top-nav-inner,.page,.footer-body,.footer-base{width:min(100% - 14px,1180px)}.brand{font-size:1rem}.icon-button,.sidebar-menu-button{width:34px;height:34px}.chapter-card{grid-template-columns:36px minmax(0,1fr) auto;padding:14px 12px}.chapter-card-number{width:34px;height:34px}}
@media print{.site-header,.top-nav,.sidebar,.settings-panel,.chapter-toolbar,.site-footer,.verse-link{display:none}.page{display:block;width:100%;margin:0}.reading-card{box-shadow:none;border:0}.verse{break-inside:avoid}}
/* Homepage title retained from the original QuranTranslation.com identity. */
.quran-title-panel {
  max-width: 760px;
  margin: 0 auto 38px;
  padding: 10px 20px 28px;
  text-align: center;
}

.quran-title-ornament {
  display: block;
  width: min(96%, 520px);
  height: auto;
  margin: 0 auto 18px;
  opacity: 0.72;
  pointer-events: none;
  user-select: none;
}

[data-theme="dark"] .quran-title-ornament {
  filter: brightness(2.15) saturate(0.72);
  opacity: 0.78;
}

[data-theme="sepia"] .quran-title-ornament {
  filter: sepia(0.45) saturate(0.9);
  opacity: 0.68;
}

.glorious-prefix {
  margin: 0 0 5px;
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.glorious-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-serif);
  font-size: clamp(2.2rem, 5.6vw, 4.15rem);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.015em;
  text-wrap: balance;
}

.glorious-arabic {
  margin: 28px 0 8px;
  color: var(--text);
  font-family: var(--font-arabic);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.8;
}

.glorious-english {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}

@media (max-width: 680px) {
  .quran-title-panel {
    margin-bottom: 28px;
    padding: 4px 10px 20px;
  }

  .quran-title-ornament {
    width: min(100%, 380px);
    margin-bottom: 14px;
    opacity: 0.68;
  }

  .glorious-title {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .glorious-arabic {
    margin-top: 22px;
    font-size: 1.72rem;
  }
}