/* Know Islam identity: an open source, examined closely. */
:root {--brand-accent:#8b652c;--brand-tint:#e5edef;--brand-cover:#102b38}
:root[data-theme="dark"] {--brand-accent:#d7ba7d;--brand-tint:#263f49;--brand-cover:#102b38}
.wordmark {gap:0;white-space:nowrap}
.brand-logo {display:block;width:272px;height:auto;flex:none}
.brand-symbol-dark {display:none}
:root[data-theme="dark"] .brand-symbol-light {display:none}
:root[data-theme="dark"] .brand-symbol-dark {display:block}
.site-header {border-bottom-color:var(--border)}
.header-actions {gap:24px}
.theme-toggle,.scroll-top {border-radius:10px}
.text-button[aria-current] {text-decoration-color:var(--brand-accent);text-decoration-thickness:2px}
.library-heading h2 {font-family:Georgia,'Times New Roman',serif;font-size:23px;font-weight:400;letter-spacing:-.3px;margin-bottom:22px}
.library-search input {border-radius:6px;background:var(--white)}
.library-filter select {border-radius:6px;background:var(--soft)}
.level-group summary {gap:10px}
.level-number {border:0;border-radius:5px;background:var(--soft);color:var(--ocean);font-weight:600}
.level-group[open] .level-number {background:var(--ink);color:var(--paper)}
.question-link {border-radius:0 5px 5px 0}
.question-link[aria-current] {background:var(--brand-tint);color:var(--ink);box-shadow:inset 3px 0 var(--brand-accent)}
.hero {display:flex;flex-direction:column;min-height:0;border-radius:10px;background:var(--brand-cover);border:1px solid var(--border)}
.hero-copy {padding:34px 40px 26px;border-bottom:1px solid #ffffff26}
.hero h1 {max-width:23ch;font-size:clamp(34px,3vw,46px);line-height:1.12;letter-spacing:-1.2px;margin:0 0 16px;text-wrap:balance}
.hero-subtitle {max-width:none;color:var(--muted-on-ink);font-size:15px;line-height:1.6}
.sherlock-scene {background:var(--brand-cover)}
.sherlock-scene img {width:100%;max-height:510px;object-fit:contain}
.scene-label {bottom:20px;right:20px;border-color:var(--gold);border-radius:5px;background:var(--brand-cover);padding:13px 18px;gap:28px}
.scene-label svg {color:var(--gold)}
.reader-nav {border-bottom-color:var(--border)}
.depth-switch {border-radius:8px;background:var(--soft);padding:3px}
.depth-switch span {border-radius:5px}
.guide-portrait {border:1px solid var(--control-border)}
.article h1 {text-wrap:balance}
.article-body h2 {border-left:2px solid var(--brand-accent);padding-left:14px}
.article-contents a[aria-current] {text-decoration-color:var(--brand-accent)}
.source-passage {border-left-color:var(--brand-accent)}
.listen-button {border-radius:6px}
.site-footer {font-size:12px}
@media(min-width:1400px) {
  .hero-copy {display:grid;grid-template-columns:1.45fr 1fr;gap:32px;align-items:end;padding:32px 36px}
  .hero h1 {margin:0}
  .hero-subtitle {max-width:24ch;padding-bottom:3px}
}
@media(max-width:900px) {
  .brand-logo {width:220px}
  .hero {max-width:760px}
  .hero-copy {padding:28px 32px 24px}
  .hero h1 {font-size:40px}
}
@media(max-width:760px) {
  .brand-logo {width:196px}
  .header-actions {gap:12px}
}
@media(max-width:600px) {
  .hero {border-radius:8px}
  .hero-copy {padding:25px 24px 22px}
  .hero h1 {font-size:34px;line-height:1.14;letter-spacing:-.8px;margin-bottom:14px}
  .hero-subtitle {font-size:14px;max-width:28ch}
  .scene-label {position:static;border-width:1px 0 0;border-color:#ffffff40;border-radius:0;padding:14px 22px;min-height:56px}
  .article-body h2 {padding-left:10px}
}
@media(max-width:360px) {
  .brand-logo {width:180px}
  .hero h1 {font-size:30px}
  .hero-copy {padding:24px 20px 20px}
  .header-actions {gap:8px}
}