@charset "UTF-8";
/* ==========================================================================
   base.css — design tokens, reset, typography, RTL helpers, colour families
   ========================================================================== */

:root {
  color-scheme: light;

  /* paper & ink */
  --paper: #F6F1E7;
  --paper-2: #EFE6D6;
  --card: #FFFCF6;
  --ink: #1E2A2F;
  --ink-2: #3C4A50;
  --muted: #6E675B;
  --line: #E2D6C0;
  --line-2: #D3C3A4;

  /* brand (sampled from the official emblem: royal blue #0E0583, gold #D2B26C) */
  --primary: #0E0583;
  --primary-2: #0A0463;
  --primary-hero: #14127A;  /* large surfaces: hero, ticker */
  --primary-deep: #0B0A4F;
  --primary-soft: #E9E8F6;
  --gold: #D2B26C;          /* brand gold: ornaments, borders, gold buttons */
  --gold-2: #E2C98F;        /* lighter gold for dark backgrounds */
  --gold-deep: #A8873F;     /* darker gold: large text / icons on light backgrounds */
  --gold-ink: #E8CF8F;      /* lettering on spines and covers */
  --gold-text: #7A5A1E;     /* gold that passes AA as small text on paper */
  --focus: #9C7B36;         /* focus ring on light backgrounds (≥3:1) */

  /* wood */
  --wood: #6B4528;
  --wood-2: #4E311B;
  --wood-hi: #8A5E3A;
  --wood-dark: #2E1C0F;

  --danger: #8A3A33;
  --ok: #2F5D4E;

  /* type */
  --font-ui: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  --font-title: "Amiri", "Traditional Arabic", "Times New Roman", serif;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.1875rem;
  --fs-xl: clamp(1.35rem, 1.1rem + .9vw, 1.7rem);
  --fs-2xl: clamp(1.7rem, 1.25rem + 1.8vw, 2.35rem);
  --fs-3xl: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);

  /* shape */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --sh-1: 0 1px 2px rgba(30, 42, 47, .06), 0 2px 6px rgba(30, 42, 47, .05);
  --sh-2: 0 4px 10px rgba(30, 42, 47, .06), 0 14px 32px rgba(30, 42, 47, .11);
  --sh-3: 0 22px 60px rgba(15, 25, 30, .30);

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --spring: cubic-bezier(.34, 1.45, .64, 1);

  /* layout */
  --maxw: 1200px;
  --gutter: 16px;
}

@media (min-width: 720px) {
  :root { --gutter: 24px; }
}

/* --------------------------------------------------------------------------
   Subject-group colour families (spines, covers, drawers, mini covers).
   --g0/--g1/--g2 are the three shades; --bk is the colour of this book.
   -------------------------------------------------------------------------- */
[data-group] { --g0: #5C5446; --g1: #4E473B; --g2: #6B6253; }
[data-group="islamic"]   { --g0: #2F5D4E; --g1: #26503F; --g2: #3B6B57; }
[data-group="seerah"]    { --g0: #1F5F63; --g1: #1A5054; --g2: #2A6E72; }
[data-group="history"]   { --g0: #7A2E2E; --g1: #662525; --g2: #8A3A33; }
[data-group="biography"] { --g0: #6B4226; --g1: #5A3720; --g2: #7B5031; }
[data-group="language"]  { --g0: #25406B; --g1: #1E3559; --g2: #2F4E7E; }
[data-group="thought"]   { --g0: #5A3A5E; --g1: #4A2F4E; --g2: #6A4870; }
[data-group="society"]   { --g0: #3F4A54; --g1: #343E47; --g2: #4C5864; }
[data-group="science"]   { --g0: #2E5A6E; --g1: #264C5D; --g2: #3A6A80; }
[data-group="reference"] { --g0: #2F2F35; --g1: #26262B; --g2: #3C3C44; }
[data-group="culture"]   { --g0: #9A6A22; --g1: #86591B; --g2: #A87A33; }
[data-group="general"]   { --g0: #5C5446; --g1: #4E473B; --g2: #6B6253; }
[data-group] { --bk: var(--g0); }
[data-shade="1"] { --bk: var(--g1); }
[data-shade="2"] { --bk: var(--g2); }

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: stable;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background-color: var(--paper);
  /* subtle paper: soft light, fine laid lines and a warm vignette — gradients only */
  background-image:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%),
    repeating-linear-gradient(0deg, rgba(110, 103, 91, .022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(110, 103, 91, .016) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 100% 100%, rgba(184, 137, 59, .06), transparent 50%);
  background-attachment: fixed;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}

@media (min-width: 720px) {
  body { font-size: 1.0625rem; }
}

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

[hidden] { display: none !important; }

h1, h2, h3, h4 {
  margin: 0 0 .5em;
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: 0;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
dl, dd { margin: 0; }
figure { margin: 0; }

a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
a:hover { color: var(--primary-2); }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

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

::selection { background: rgba(210, 178, 108, .45); color: var(--ink); }

mark {
  color: inherit;
  background: linear-gradient(180deg, transparent 38%, rgba(210, 178, 108, .55) 38%, rgba(210, 178, 108, .55) 92%, transparent 92%);
  padding: 0 .08em;
  border-radius: 2px;
}

hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* --------------------------------------------------------------------------
   Icons (sprite via icon())
   -------------------------------------------------------------------------- */
.icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* arrows point the reading direction: flip the ones that mean "forward" when needed */
.icon-flip { transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   Helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.ltr { direction: ltr; unicode-bidi: isolate; }
.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

.skip-link {
  position: absolute;
  top: 8px;
  inset-inline-start: 8px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--r);
  background: var(--primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; color: #fff; }

html.is-locked { overflow: hidden; }
html.is-locked body { overflow: hidden; }

/* --------------------------------------------------------------------------
   Reduced motion: keep everything static and instantly visible
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}