@layer reset, tokens, base, components, pages, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, blockquote, ul, ol { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, input { font: inherit; }
  a { color: inherit; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --emerald-950: #031f1c;
    --emerald-900: #073c35;
    --emerald-800: #0a4d43;
    --emerald-700: #126355;
    --petrol-900: #082c35;
    --petrol-700: #155360;
    --gold-500: #caa85e;
    --gold-400: #dfc47f;
    --gold-200: #efe0b9;
    --ivory-50: #fffdf7;
    --ivory-100: #f8f3e8;
    --ivory-200: #eee5d3;
    --ink-950: #13201d;
    --ink-800: #2c3a36;
    --ink-600: #5f6c68;
    --white: #fff;
    --surface-dark: rgba(255, 255, 255, .055);
    --line-dark: rgba(223, 196, 127, .2);
    --line-light: rgba(19, 32, 29, .13);
    --shadow-sm: 0 8px 24px rgba(3, 31, 28, .08);
    --shadow-lg: 0 28px 80px rgba(1, 22, 19, .25);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --arabic: "Noto Naskh Arabic", "Traditional Arabic", "Arabic Typesetting", serif;
    --radius-sm: .75rem;
    --radius-md: 1.25rem;
    --radius-lg: 2rem;
    --container: 74rem;
    --transition: 180ms ease;
  }

  [data-theme="light"] {
    color-scheme: light;
    --page-bg: var(--ivory-50);
    --page-text: var(--ink-950);
  }
}

@layer base {
  html { background: var(--emerald-950); }
  body {
    min-width: 20rem;
    min-height: 100vh;
    color: var(--ivory-100);
    background: var(--emerald-950);
    font: 400 1rem/1.7 var(--sans);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  body.nav-open { overflow: hidden; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; text-wrap: balance; }
  h1 { font-size: clamp(2.9rem, 8vw, 6.5rem); letter-spacing: -.045em; }
  h2 { font-size: clamp(2rem, 5vw, 3.6rem); letter-spacing: -.035em; }
  h3 { font-size: clamp(1.35rem, 2vw, 1.75rem); }
  p { text-wrap: pretty; }
  :focus-visible { outline: 3px solid var(--gold-400); outline-offset: 4px; }
  ::selection { color: var(--emerald-950); background: var(--gold-400); }
}

@layer components {
  .container { width: min(var(--container), calc(100% - 2rem)); margin-inline: auto; }
  .container.narrow { width: min(52rem, calc(100% - 2rem)); }
  .skip-link {
    position: fixed; z-index: 999; top: .75rem; left: .75rem; padding: .7rem 1rem;
    color: var(--emerald-950); background: var(--gold-400); border-radius: .5rem;
    transform: translateY(-180%); transition: transform var(--transition);
  }
  .skip-link:focus { transform: translateY(0); }

  .site-header {
    position: sticky; z-index: 100; top: 0; border-bottom: 1px solid rgba(255,255,255,.09);
    background: color-mix(in srgb, var(--emerald-950) 88%, transparent); backdrop-filter: blur(18px);
  }
  .header-inner { min-height: 5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
  .brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
  .brand-mark {
    width: 2.5rem; height: 2.5rem; display: grid; place-items: center; color: var(--emerald-950);
    background: var(--gold-400); border-radius: 50%; font: 700 1.25rem/1 var(--serif);
    box-shadow: 0 0 0 5px rgba(223,196,127,.08);
  }
  .brand-copy { display: grid; line-height: 1.15; }
  .brand-copy strong { color: var(--ivory-50); font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
  .brand-copy small { color: rgba(248,243,232,.57); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; }
  .desktop-nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.7rem); }
  .desktop-nav a {
    position: relative; color: rgba(248,243,232,.76); font-size: .88rem; font-weight: 600; text-decoration: none;
  }
  .desktop-nav a::after {
    content: ""; position: absolute; right: 0; bottom: -.55rem; left: 0; height: 1px;
    background: var(--gold-400); transform: scaleX(0); transition: transform var(--transition);
  }
  .desktop-nav a:hover, .desktop-nav a[aria-current="page"] { color: var(--gold-400); }
  .desktop-nav a:hover::after, .desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .header-actions { display: flex; align-items: center; gap: .45rem; }
  .icon-button {
    width: 2.65rem; height: 2.65rem; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.13);
    color: var(--ivory-100); background: rgba(255,255,255,.035); border-radius: 50%; cursor: pointer;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
  }
  .icon-button:hover { color: var(--gold-400); border-color: var(--gold-400); background: rgba(223,196,127,.08); }
  .menu-button { display: none; }
  .mobile-nav {
    position: fixed; z-index: 99; inset: 5rem 0 0; padding: 2rem;
    background: var(--emerald-950); transform: translateX(100%); visibility: hidden;
    transition: transform 240ms ease, visibility 240ms;
  }
  .mobile-nav.open { transform: translateX(0); visibility: visible; }
  .mobile-nav nav { display: grid; }
  .mobile-nav a { padding: 1rem 0; border-bottom: 1px solid var(--line-dark); font: 500 1.65rem/1.2 var(--serif); text-decoration: none; }

  .site-footer { padding: 4.5rem 0 2rem; color: rgba(248,243,232,.68); background: #021a17; border-top: 1px solid var(--line-dark); }
  .footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 3rem; }
  .footer-about p { max-width: 28rem; margin-top: 1rem; font-size: .9rem; }
  .footer-column { display: grid; align-content: start; gap: .65rem; }
  .footer-column h2 { margin-bottom: .35rem; color: var(--gold-400); font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
  .footer-column a { color: inherit; font-size: .9rem; text-decoration: none; }
  .footer-column a:hover { color: var(--gold-400); }
  .footer-bottom {
    display: flex; justify-content: space-between; gap: 1rem; margin-top: 3.5rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,.08); font-size: .77rem;
  }

  .section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
  .section-ivory { color: var(--ink-950); background: var(--ivory-50); }
  .section-heading { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3.2rem); }
  .section-heading h2 { margin-top: .45rem; }
  .section-heading > p:last-child { max-width: 42rem; margin-top: 1rem; color: var(--ink-600); }
  .split-heading { max-width: none; display: grid; grid-template-columns: 1.1fr .75fr; align-items: end; gap: 3rem; }
  .split-heading > p:last-child { margin: 0; }
  .eyebrow {
    color: var(--emerald-700); font-size: .72rem; font-weight: 800; letter-spacing: .16em; line-height: 1.3;
    text-transform: uppercase;
  }
  .kicker { color: var(--gold-400); font: 500 clamp(1.1rem, 2.5vw, 1.5rem)/1.8 var(--arabic); letter-spacing: .08em; }
  .surface { border: 1px solid var(--line-dark); background: var(--surface-dark); box-shadow: var(--shadow-lg); }
  .tag, .source-badge, .content-label, .editorial-label {
    display: inline-flex; width: fit-content; align-items: center; padding: .35rem .65rem;
    border: 1px solid currentColor; border-radius: 99rem; font-size: .63rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  }
  .tag, .source-badge { color: var(--emerald-700); background: rgba(10,77,67,.06); }
  .content-label { color: #7b5b1d; background: rgba(202,168,94,.12); }
  .editorial-label { margin-top: .75rem; color: rgba(248,243,232,.55); border-color: rgba(248,243,232,.16); }
  .button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
  .button-row.left { justify-content: flex-start; }
  .button {
    min-height: 3.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .75rem;
    padding: .75rem 1.2rem; border: 1px solid transparent; border-radius: 99rem; font-size: .85rem;
    font-weight: 750; line-height: 1; text-decoration: none; cursor: pointer; transition: transform var(--transition), background var(--transition), border-color var(--transition);
  }
  .button:hover { transform: translateY(-2px); }
  .button-primary { color: var(--emerald-950); background: var(--gold-400); }
  .button-primary:hover { background: var(--gold-200); }
  .button-ghost { color: var(--ivory-50); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.035); }
  .button-outline { color: var(--emerald-800); border-color: rgba(7,60,53,.25); background: transparent; }
  .text-link, .card-action {
    display: inline-flex; align-items: center; gap: .4rem; color: var(--emerald-800); font-size: .84rem;
    font-weight: 800; text-decoration: none;
  }
  .text-link:hover, .card-action:hover { text-decoration: underline; text-underline-offset: .3rem; }

  .search-field {
    min-height: 3.3rem; display: flex; flex: 1 1 22rem; align-items: center; gap: .6rem; padding: 0 1rem;
    border: 1px solid var(--line-light); background: var(--white); border-radius: 99rem; box-shadow: var(--shadow-sm);
  }
  .search-field input { width: 100%; border: 0; outline: 0; color: var(--ink-950); background: transparent; }
  .search-field input::placeholder { color: #89928f; }
  .filter-group { display: flex; flex-wrap: wrap; gap: .5rem; }
  .filter-chip {
    min-height: 2.6rem; padding: .55rem .9rem; border: 1px solid var(--line-light); color: var(--ink-600);
    background: transparent; border-radius: 99rem; font-size: .76rem; font-weight: 750; cursor: pointer;
  }
  .filter-chip:hover, .filter-chip.active { color: var(--white); border-color: var(--emerald-800); background: var(--emerald-800); }
  .library-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
  .results-count { min-height: 1.5rem; margin-bottom: 1.5rem; color: var(--ink-600); font-size: .82rem; }
  .empty-state { padding: 5rem 1rem; text-align: center; }
  .empty-state > span { color: var(--gold-500); font-size: 3rem; }
  .empty-state h2 { margin: 1rem 0 .5rem; font-size: 2rem; }
  .empty-state p { color: var(--ink-600); }

  .back-link { display: inline-flex; margin-bottom: 2rem; color: inherit; opacity: .67; font-size: .8rem; font-weight: 700; text-decoration: none; }
  .source-line { color: var(--gold-400); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
  .source-links { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }
  .source-links a {
    padding: .55rem .8rem; border: 1px solid var(--line-light); color: var(--emerald-800); border-radius: 99rem;
    font-size: .74rem; font-weight: 750; text-decoration: none;
  }
  .topic-chips, .source-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
  .topic-chips span, .source-pills span {
    padding: .5rem .75rem; border: 1px solid var(--line-light); color: var(--ink-600); background: rgba(255,255,255,.55);
    border-radius: 99rem; font-size: .75rem; font-weight: 700;
  }
}

@layer pages {
  .hero {
    position: relative; overflow: hidden; isolation: isolate; min-height: calc(100svh - 5rem); display: grid; align-items: center;
    color: var(--ivory-100);
    background:
      radial-gradient(circle at 72% 48%, rgba(202,168,94,.13), transparent 24rem),
      linear-gradient(132deg, var(--emerald-950), var(--emerald-900) 58%, var(--petrol-900));
  }
  .hero::after {
    content: ""; position: absolute; z-index: -1; right: -12rem; bottom: -21rem; width: 46rem; height: 46rem;
    border: 1px solid rgba(223,196,127,.12); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(223,196,127,.018), 0 0 0 10rem rgba(223,196,127,.012);
  }
  .hero-pattern {
    position: absolute; z-index: -1; inset: 0; opacity: .055;
    background-image:
      linear-gradient(30deg, var(--gold-400) 12%, transparent 12.5%, transparent 87%, var(--gold-400) 87.5%),
      linear-gradient(150deg, var(--gold-400) 12%, transparent 12.5%, transparent 87%, var(--gold-400) 87.5%);
    background-size: 4rem 7rem;
    mask-image: linear-gradient(90deg, transparent, #000 58%, #000);
  }
  .hero-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .75fr); align-items: center; gap: clamp(2rem, 7vw, 7rem); padding-block: 5rem; }
  .hero-copy h1 { max-width: 12ch; margin-top: .65rem; }
  .hero-lead { max-width: 42rem; margin-top: 1.5rem; color: rgba(248,243,232,.73); font-size: clamp(1rem, 2vw, 1.18rem); }
  .hero-copy .button-row { justify-content: flex-start; }
  .trust-list { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-top: 2rem; padding: 0; color: rgba(248,243,232,.55); font-size: .7rem; list-style: none; }
  .trust-list li::before { content: "◆"; margin-right: .45rem; color: var(--gold-500); font-size: .55rem; }
  .daily-card { position: relative; overflow: hidden; padding: clamp(1.6rem, 4vw, 2.4rem); border-radius: var(--radius-lg); }
  .daily-card::before { content: "۞"; position: absolute; right: -1rem; bottom: -4rem; color: rgba(223,196,127,.055); font: 400 13rem/1 var(--serif); }
  .daily-card-head { display: flex; align-items: center; justify-content: space-between; }
  .daily-card .eyebrow { color: var(--gold-400); }
  .arabic-display { min-height: 4.5rem; margin: 2rem 0 1.25rem; color: var(--gold-200); font: 500 clamp(2rem, 5vw, 3rem)/1.8 var(--arabic); text-align: right; }
  .daily-card blockquote { font: 500 clamp(1.2rem, 2.5vw, 1.6rem)/1.45 var(--serif); }
  .daily-card .source-line { margin-top: 1.25rem; }
  .daily-card .text-link { position: relative; margin-top: 1.5rem; color: var(--gold-400); }

  .path-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line-light); border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-sm); }
  .path-card { position: relative; min-height: 22rem; display: flex; flex-direction: column; padding: 2rem; text-decoration: none; }
  .path-card + .path-card { border-left: 1px solid var(--line-light); }
  .path-card::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: .22rem; background: var(--gold-500); transform: scaleX(0); transition: transform var(--transition); }
  .path-card:hover::after { transform: scaleX(1); }
  .path-number { color: #9aa19e; font-size: .64rem; font-weight: 800; letter-spacing: .1em; }
  .path-icon { margin: 2rem 0 1.25rem; color: var(--gold-500); font: 500 2rem/1 var(--serif); }
  .path-card p { margin-top: .9rem; color: var(--ink-600); font-size: .9rem; }
  .path-card .text-link { margin-top: auto; padding-top: 2rem; }

  .feature-grid { display: grid; grid-template-columns: 1.25fr repeat(2, 1fr); gap: 1rem; }
  .feature-card {
    min-height: 19rem; display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line-dark);
    color: var(--ivory-50); background: linear-gradient(145deg, var(--emerald-900), var(--petrol-900)); border-radius: var(--radius-md);
    text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition);
  }
  .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .feature-card-large { grid-row: span 2; min-height: 39rem; justify-content: space-between; background: linear-gradient(155deg, var(--petrol-900), var(--emerald-950)); }
  .feature-card:nth-child(4) { grid-column: 2 / span 2; min-height: 18rem; }
  .feature-card .tag { color: var(--gold-400); border-color: rgba(223,196,127,.4); background: rgba(223,196,127,.06); }
  .feature-card h3 { max-width: 16ch; margin-top: 1.25rem; font-size: clamp(1.65rem, 3vw, 2.5rem); }
  .feature-card p { max-width: 34rem; margin-top: .85rem; color: rgba(248,243,232,.68); font-size: .9rem; }
  .feature-card .card-action { margin-top: auto; padding-top: 2rem; color: var(--gold-400); }
  .arabic-ornament { margin-top: 4rem; color: var(--gold-200); font: 500 clamp(3rem, 7vw, 5.5rem)/1.4 var(--arabic); }
  .source-section { background: var(--ivory-100); color: var(--ink-950); }
  .source-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 8vw, 8rem); }
  .source-copy > p { max-width: 44rem; color: var(--ink-600); font: 500 clamp(1.2rem, 2.5vw, 1.5rem)/1.6 var(--serif); }
  .source-pills { margin: 1.5rem 0; }

  .page-hero, .topic-hero, .names-hero, .devotional-hero, .surah-hero {
    position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 8rem) 0;
    color: var(--ivory-100);
    background:
      radial-gradient(circle at 70% 10%, rgba(202,168,94,.13), transparent 28rem),
      linear-gradient(135deg, var(--emerald-950), var(--emerald-900) 64%, var(--petrol-900));
  }
  .page-hero::after, .topic-hero::after, .names-hero::after, .devotional-hero::after {
    content: "۞"; position: absolute; right: 6vw; bottom: -5rem; color: rgba(223,196,127,.055); font: 400 18rem/1 var(--serif);
  }
  .page-hero h1, .topic-hero h1, .names-hero h1, .devotional-hero h1 { margin: .5rem 0 1.2rem; }
  .page-hero .narrow > p:last-child, .topic-hero .narrow > p, .names-hero .narrow > p:last-child, .devotional-title > p {
    max-width: 47rem; color: rgba(248,243,232,.7); font-size: clamp(1rem, 2vw, 1.17rem);
  }
  .page-hero .eyebrow, .topic-hero .eyebrow, .devotional-hero .eyebrow { color: var(--gold-400); }

  .surah-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; }
  .surah-card {
    position: relative; min-height: 10rem; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 1rem;
    padding: 1.2rem; border: 1px solid var(--line-light); color: var(--ink-950); background: var(--white);
    border-radius: var(--radius-sm); text-decoration: none; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  }
  .surah-card:hover { border-color: var(--gold-500); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .surah-index { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; color: var(--emerald-800); background: var(--ivory-100); border-radius: .45rem; font-size: .72rem; font-weight: 800; transform: rotate(45deg); }
  .surah-index span { transform: rotate(-45deg); }
  .surah-card h2 { font: 600 1.1rem/1.2 var(--serif); }
  .surah-card-meta { margin-top: .4rem; color: var(--ink-600); font-size: .7rem; }
  .surah-card-arabic { color: var(--emerald-800); font: 500 1.4rem/1.5 var(--arabic); }
  .mini-favorite {
    position: absolute; right: .8rem; bottom: .7rem; border: 0; color: #9da7a3; background: transparent; cursor: pointer;
  }
  .mini-favorite.active { color: var(--gold-500); }

  .surah-hero .back-link { color: var(--ivory-100); }
  .surah-title-row { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; }
  .surah-title-row h1 { margin-top: .35rem; }
  .surah-arabic-title { color: var(--gold-200); font: 500 clamp(3rem, 8vw, 6rem)/1.4 var(--arabic); }
  .surah-translation { margin-top: .6rem; color: rgba(248,243,232,.66); font: italic 1.1rem/1.5 var(--serif); }
  .surah-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
  .surah-meta span { padding: .45rem .75rem; border: 1px solid rgba(255,255,255,.14); border-radius: 99rem; color: rgba(248,243,232,.72); font-size: .7rem; font-weight: 700; }
  .reading-layout { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; align-items: start; gap: clamp(2rem, 6vw, 5rem); }
  .reading-main { display: grid; gap: 1rem; }
  .content-block { padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line-light); background: var(--white); border-radius: var(--radius-md); }
  .content-block h2 { margin: .5rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
  .content-block > p:not(.eyebrow, .editorial-note) { color: var(--ink-600); }
  .interpretation-block { border-left: .3rem solid var(--gold-500); background: #fdf8ec; }
  .label-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
  .editorial-note { margin-top: 1.25rem; padding: 1rem; border: 1px dashed rgba(123,91,29,.3); color: #755e30; background: rgba(202,168,94,.08); border-radius: .6rem; font-size: .78rem; }
  .reading-aside { position: sticky; top: 6.5rem; display: grid; gap: 1rem; }
  .aside-card { padding: 1.3rem; border: 1px solid var(--line-light); background: var(--ivory-100); border-radius: var(--radius-sm); }
  .aside-card p:not(.eyebrow) { margin-top: .75rem; color: var(--ink-600); font-size: .82rem; }
  .source-list { display: grid; gap: .55rem; margin-top: 1rem; padding-left: 1.1rem; color: var(--ink-600); font-size: .79rem; }

  .library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
  .library-card {
    min-height: 16rem; display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line-light);
    color: var(--ink-950); background: var(--white); border-radius: var(--radius-md); text-decoration: none; box-shadow: var(--shadow-sm);
  }
  .library-card:hover { border-color: var(--gold-500); }
  .library-card h2 { margin-top: 1rem; font-size: 1.55rem; }
  .library-card p { margin-top: .65rem; color: var(--ink-600); font-size: .84rem; }
  .library-card .card-action { margin-top: auto; padding-top: 1.4rem; }
  .library-card-index { align-self: flex-end; color: var(--gold-500); font: 500 1.3rem/1 var(--serif); }

  .topic-hero .button-row { justify-content: flex-start; }
  .hierarchy-list { display: grid; gap: .8rem; margin-top: 1rem; padding: 0; list-style: none; counter-reset: hierarchy; }
  .hierarchy-list li { display: grid; grid-template-columns: 1fr; padding-left: 1rem; border-left: 2px solid var(--gold-500); }
  .hierarchy-list span { color: var(--ink-600); font-size: .7rem; }
  .verse-citation, .hadith-citation, .dua-block {
    margin: 1.25rem 0; padding: 1.4rem; border-radius: var(--radius-sm);
  }
  .verse-citation { color: var(--ivory-50); background: var(--emerald-900); }
  .hadith-citation { border: 1px solid rgba(202,168,94,.35); background: #fdf8ec; }
  .dua-block { border: 1px solid var(--line-light); background: var(--ivory-100); }
  .verse-citation > span, .hadith-citation > span, .dua-block > span { font-size: .64rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
  .verse-citation > span { color: var(--gold-400); }
  .verse-citation blockquote, .hadith-citation blockquote { margin: .8rem 0; font: 500 1.3rem/1.55 var(--serif); }
  .verse-citation a, .hadith-citation a { font-size: .75rem; font-weight: 750; }
  .dua-arabic { margin-top: 1rem; color: var(--emerald-800); font: 500 1.8rem/1.8 var(--arabic); text-align: right; }

  .devotional-title { text-align: center; }
  .devotional-title .kicker { margin-bottom: 1rem; }
  .devotional-title .eyebrow { color: var(--gold-400); }
  .devotional-title > p { margin-inline: auto; }
  .devotional-layout { display: grid; grid-template-columns: 13rem minmax(0, 48rem); justify-content: center; gap: clamp(2rem, 7vw, 6rem); }
  .devotional-nav { position: sticky; top: 6.5rem; display: grid; align-self: start; }
  .devotional-nav a { padding: .65rem 0; border-bottom: 1px solid var(--line-light); color: var(--ink-600); font-size: .78rem; font-weight: 700; text-decoration: none; }
  .devotional-nav a:hover { color: var(--emerald-800); }
  .devotional-article { display: grid; gap: 1rem; }
  .devotional-section { scroll-margin-top: 6.5rem; padding: clamp(1.5rem, 4vw, 2.6rem); border: 1px solid var(--line-light); background: var(--white); border-radius: var(--radius-md); }
  .devotional-section h2 { margin: .45rem 0 1rem; font-size: 2rem; }
  .devotional-section > p { color: var(--ink-600); }
  .devotional-section .arabic-display { color: var(--emerald-800); }
  .reflection-list { display: grid; gap: .8rem; margin-top: 1rem; padding-left: 1.2rem; color: var(--ink-600); }
  .devotional-pagination { max-width: 65rem; display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }

  .scholarly-note, .source-policy {
    margin-bottom: 2rem; padding: clamp(1.5rem, 4vw, 2.4rem); border: 1px solid rgba(202,168,94,.35);
    background: #fdf8ec; border-radius: var(--radius-md);
  }
  .scholarly-note h2, .source-policy h2 { margin: .7rem 0 1rem; font-size: clamp(1.7rem, 3vw, 2.4rem); }
  .scholarly-note > p, .source-policy { color: var(--ink-600); }
  .names-toolbar { justify-content: space-between; margin-top: 3rem; }
  .names-toolbar .results-count { margin: 0; }
  .names-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
  .name-card { min-height: 12rem; padding: 1.3rem; border: 1px solid var(--line-light); background: var(--white); border-radius: var(--radius-sm); text-align: center; }
  .name-card-index { color: #9ba5a1; font-size: .66rem; font-weight: 800; }
  .name-card-arabic { margin: 1rem 0 .6rem; color: var(--emerald-800); font: 500 2rem/1.5 var(--arabic); }
  .name-card h2 { font-size: 1.15rem; }
  .name-card p { margin-top: .35rem; color: var(--ink-600); font-size: .75rem; }
  .name-card .evidence { display: inline-block; margin-top: .7rem; color: #7b5b1d; font-size: .64rem; font-weight: 750; }

  .timeline { position: relative; display: grid; gap: 0; margin-top: 1.5rem; }
  .timeline::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: 3.4rem; width: 1px; background: var(--gold-500); }
  .timeline > div { position: relative; display: grid; grid-template-columns: 4.3rem 1fr; padding: 0 0 1.8rem; }
  .timeline span { z-index: 1; width: 3.2rem; height: 3.2rem; display: grid; place-items: center; color: var(--emerald-950); background: var(--gold-400); border-radius: 50%; font-size: .68rem; font-weight: 800; }
  .timeline h3, .timeline p { grid-column: 2; }
  .timeline h3 { margin-top: -3.1rem; }
  .timeline p { margin-top: .4rem; color: var(--ink-600); font-size: .85rem; }

  .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 3rem; }
  .method-card { min-height: 20rem; padding: 1.7rem; border: 1px solid var(--line-light); background: var(--white); border-radius: var(--radius-md); }
  .method-card > span { color: var(--gold-500); font-size: .72rem; font-weight: 800; }
  .method-card h2 { margin: 2rem 0 1rem; font-size: 1.7rem; }
  .method-card p { color: var(--ink-600); font-size: .86rem; }
  .source-policy ol { display: grid; gap: .7rem; padding-left: 1.2rem; }
}

@layer utilities {
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  [hidden] { display: none !important; }

  @media (max-width: 62rem) {
    .desktop-nav { display: none; }
    .menu-button { display: inline-grid; }
    .hero-layout { grid-template-columns: 1fr; }
    .hero-copy { text-align: center; }
    .hero-copy h1, .hero-lead { margin-inline: auto; }
    .hero-copy .button-row { justify-content: center; }
    .trust-list { justify-content: center; }
    .daily-card { width: min(100%, 38rem); margin-inline: auto; }
    .feature-grid { grid-template-columns: 1fr 1fr; }
    .feature-card-large { grid-row: auto; min-height: 24rem; }
    .feature-card:nth-child(4) { grid-column: auto; }
    .arabic-ornament { margin-top: 2rem; }
    .surah-grid, .library-grid { grid-template-columns: repeat(2, 1fr); }
    .names-grid { grid-template-columns: repeat(3, 1fr); }
    .method-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
    .footer-column:last-child { grid-column: 2; }
  }

  @media (max-width: 44rem) {
    .container, .container.narrow { width: min(100% - 1.25rem, var(--container)); }
    .brand-copy small { display: none; }
    .header-actions > .icon-button:not(.menu-button, .theme-toggle) { display: none; }
    .hero { min-height: auto; }
    .hero-layout { padding-block: 4rem; }
    .hero-copy { text-align: left; }
    .hero-copy h1, .hero-lead { margin-inline: 0; }
    .hero-copy .button-row, .trust-list { justify-content: flex-start; }
    .split-heading, .source-layout, .reading-layout, .devotional-layout { grid-template-columns: 1fr; }
    .path-grid, .feature-grid, .surah-grid, .library-grid, .method-grid { grid-template-columns: 1fr; }
    .path-card { min-height: 18rem; }
    .path-card + .path-card { border-top: 1px solid var(--line-light); border-left: 0; }
    .feature-card, .feature-card-large, .feature-card:nth-child(4) { min-height: 18rem; }
    .feature-card-large { grid-row: auto; }
    .surah-title-row { grid-template-columns: 1fr; }
    .surah-arabic-title { grid-row: 1; text-align: right; }
    .reading-aside, .devotional-nav { position: static; }
    .devotional-nav { grid-template-columns: repeat(4, auto); overflow-x: auto; }
    .devotional-nav a { padding: .65rem; white-space: nowrap; }
    .names-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
    .footer-column:last-child { grid-column: auto; }
    .footer-bottom { flex-direction: column; }
    .devotional-pagination { flex-direction: column; }
  }

  @media (max-width: 29rem) {
    .names-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-column:last-child { grid-column: auto; }
    .button-row .button { width: 100%; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}

[data-theme="light"] body { color: var(--ink-950); background: var(--ivory-50); }
[data-theme="light"] .site-header {
  border-bottom-color: var(--line-light);
  background: color-mix(in srgb, var(--ivory-50) 90%, transparent);
}
[data-theme="light"] .brand-copy strong { color: var(--emerald-900); }
[data-theme="light"] .brand-copy small, [data-theme="light"] .desktop-nav a { color: var(--ink-600); }
[data-theme="light"] .icon-button { color: var(--emerald-900); border-color: var(--line-light); background: rgba(7,60,53,.03); }
[data-theme="light"] .mobile-nav { color: var(--ink-950); background: var(--ivory-50); }
[data-theme="light"] .button-ghost { color: var(--emerald-900); border-color: rgba(7,60,53,.25); background: rgba(7,60,53,.03); }
.hero .button-ghost, .page-hero .button-ghost, .topic-hero .button-ghost, .devotional-hero .button-ghost, .surah-hero .button-ghost { color: var(--ivory-50); border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.035); }