/* ================================================================
   Hikmah — Design Tokens (v2, aligned to official design system)

   - Parchment #F2EADA · Ink #1F1712 · Isfahan Terracotta #A8543A
   - Display: Fraunces (variable, opsz axis)
   - Body:    Inter Tight
   - Arabic:  Amiri (body/Qur'an) · Reem Kufi (display)
   - Cards:   sharp 90° corners
   - Surface: background grain texture (see .grain — applied in Homepage.html)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter+Tight:wght@400;500;600;700&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Reem+Kufi:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400..700;1,400..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500;1,8..60,600&display=swap');

:root {
  /* --- Color: Surface (Parchment family — warmer + more saturated) - */
  --sand-50:   #F7F0DF;   /* Parchment Soft — card fill */
  --sand-100:  #F2EADA;   /* Parchment — PAGE background (official) */
  --sand-200:  #EDE1C4;   /* Parchment Warm — illustration bg */
  --sand-300:  #E8DEC5;   /* Parchment Deep — alt section bg */
  --sand-400:  #D9C9A8;   /* muted band (retained) */

  /* --- Color: Ink (text, gravity) ---------------------------------- */
  --ink-900:   #1F1712;   /* Ink — headlines, structure (official) */
  --ink-800:   #3A2F26;   /* Ink Soft — body paragraphs (official) */
  --ink-600:   #5C4A3C;   /* Ink Mute — secondary / captions (official) */
  --ink-500:   #7A6A58;   /* faint meta */
  --ink-400:   #9C8E7C;   /* hints only */

  /* --- Color: Accent (Isfahan Terracotta — signature) -------------- */
  --clay-700:  #8A4430;   /* hover / pressed */
  --clay-600:  #9A4C35;   /* link hover mid */
  --clay-500:  #A8543A;   /* PRIMARY accent — italic display, eyebrows */
  --clay-300:  #D99A85;   /* tinted accent */
  --clay-100:  #EFD2C4;   /* notice fill */

  /* --- Color: Illustration palette (inside painted scenes only) ---- */
  --ill-navy:    #1D2840;  /* Night — teacher's robe, night sky */
  --ill-forest:  #4A5339;  /* Moss — plants, clothing */
  --ill-rust:    #A8543A;  /* Terracotta echo */
  --ill-rug:     #A8543A;  /* Rug */
  --ill-wood:    #8C5A3A;  /* wood tones */
  --ill-sand:    #C8994A;  /* Sand — lamp glow, warm highlights */

  /* --- Color: SACRED — three uses only (verse markers · medallions ·
         completion certificates). Never decorative. ----------------- */
  --gold-sacred: #A8843D;  /* Leaf Gold */

  /* --- Type --------------------------------------------------------- */
  --serif:        'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --sans:         'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --arabic:       'Amiri', 'Scheherazade New', serif;
  --arabic-disp:  'Reem Kufi', 'Amiri', serif;

  /* --- Scale -------------------------------------------------------- */
  --t-12: 0.75rem;
  --t-14: 0.875rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-32: 2rem;
  --t-40: 2.5rem;
  --t-56: 3.5rem;
  --t-72: 4.5rem;
  --t-88: 5.5rem;

  /* --- Space -------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* --- Radius / borders --------------------------------------------
     Official brand preference: cards use SHARP 90° corners.
     --r-lg is kept = 0 for card-like surfaces; buttons remain pill-shaped. */
  --r-sm: 0px;
  --r-md: 0px;
  --r-lg: 0px;
  --r-pill: 999px;
  --hairline: 1px solid rgba(31, 23, 18, 0.12);  /* official card outline */

  /* --- Shadows (very soft, warm) ----------------------------------- */
  --shadow-sm: 0 1px 2px rgba(31, 23, 18, 0.05);
  --shadow-md: 0 4px 20px rgba(31, 23, 18, 0.08);  /* official card drop */

  /* --- Layout ------------------------------------------------------- */
  --container: 1200px;            /* official full-width max */
  --container-narrow: 720px;       /* official text-heavy max */
}

/* =================================================================
   Base resets + page chrome
   ================================================================= */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--sand-100);
  color: var(--ink-800);
  font-family: var(--sans);
  font-size: var(--t-16);
  line-height: 1.7;                    /* official: 1.65–1.75 body */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: var(--clay-600); text-decoration: none; }
a:hover { color: var(--clay-700); }

/* =================================================================
   Background grain — subtle parchment tactility.
   Body-level fixed overlay (official spec). The SVG turbulence is
   URL-encoded inline so no external asset is needed.
   ================================================================= */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.28;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Keep interactive content above the overlay */
body > * { position: relative; z-index: 2; }

/* =================================================================
   Type primitives
   ================================================================= */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(3rem, 5.5vw, 6rem);       /* official hero: 48–96px */
  line-height: 1.05;
  letter-spacing: -0.022em;                   /* official: -0.02 to -0.025 */
  color: var(--ink-900);
  text-wrap: balance;
  font-variation-settings: 'opsz' 144;
}
.display em,
.display .accent {
  font-style: italic;
  font-weight: 500;
  color: var(--clay-500);
}

.h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 3.5vw, 3.625rem);  /* 36–58px official */
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink-900);
  font-variation-settings: 'opsz' 72;
}
.h2 em { font-style: italic; color: var(--clay-500); font-weight: 500; }

.h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.625rem, 2.4vw, 2rem);     /* 30–32px pillar/track */
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  font-variation-settings: 'opsz' 48;
}
.h3 em { font-style: italic; color: var(--clay-500); font-weight: 500; }

.eyebrow {
  font-family: var(--sans);
  font-size: var(--t-12);
  font-weight: 600;                            /* official: 600 */
  letter-spacing: 0.2em;                       /* 0.18–0.22em */
  text-transform: uppercase;
  color: var(--clay-500);
}
.eyebrow::before { content: '— '; }
.eyebrow::after  { content: ' —'; }

.lede {
  font-family: var(--sans);
  font-size: var(--t-18);
  line-height: 1.65;
  color: var(--ink-800);
  text-wrap: pretty;
}

.body { font-size: var(--t-16); line-height: 1.72; color: var(--ink-800); }
.meta { font-size: var(--t-14); color: var(--ink-600); letter-spacing: 0.01em; }

.arabic {
  font-family: var(--arabic);
  font-weight: 400;
  direction: rtl;
  color: var(--ink-800);
}
.arabic-display {
  font-family: var(--arabic-disp);
  font-weight: 500;
  direction: rtl;
  color: var(--ink-800);
}

/* =================================================================
   Buttons (official: sharp pill, 11-13px uppercase, 0.08em tracking)
   ================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 11px 22px;
  border-radius: var(--r-pill);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  border: 1.5px solid transparent;
  text-decoration: none;
}

.btn-primary {
  background: var(--ink-900);
  color: var(--sand-50);
}
.btn-primary:hover { background: var(--clay-500); color: var(--sand-50); }

.btn-ghost {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn-ghost:hover { background: var(--ink-900); color: var(--sand-50); }

/* =================================================================
   Cards (sharp 90° corners, 1px Ink-line border)
   ================================================================= */
.card {
  background: var(--sand-50);
  border: var(--hairline);
  overflow: hidden;
}
.card-body { padding: var(--s-6); }

.notice {
  background: var(--clay-100);
  border-left: 3px solid var(--clay-500);
  padding: var(--s-4) var(--s-5);
  font-size: var(--t-14);
  color: var(--ink-800);
  line-height: 1.55;
}
.notice strong { color: var(--clay-700); font-weight: 600; }

/* =================================================================
   Inline tokens: placeholder text (.ph) and verification pill (.verify).
   Used throughout the pre-launch site to mark TBD content + unverified
   claims so the voice stays honest.
   ================================================================= */
.ph {
  background: var(--clay-100);
  color: var(--clay-700);
  padding: 1px 6px;
  border-radius: 3px;
  font-style: italic;
  font-size: 0.95em;
  border: 1px dashed rgba(168, 84, 58, 0.35);
}

.verify {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay-500);
  background: rgba(168, 84, 58, 0.10);
  border: 1px solid rgba(168, 84, 58, 0.28);
  border-radius: 99px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: 2px;
  white-space: nowrap;
}

/* =================================================================
   Painted-edge mask — signature hero treatment.
   Apply `.paint-edge` to any <img>. The mask is a soft-displaced
   rectangle that dissolves the edges into the page background; the
   multiply blend ties the image tone into the parchment surface.
   ================================================================= */
.paint-edge {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 620' preserveAspectRatio='none'><defs><filter id='b' x='-5%25' y='-5%25' width='110%25' height='110%25'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.022' numOctaves='2' seed='7'/><feDisplacementMap in='SourceGraphic' scale='32'/><feGaussianBlur stdDeviation='6'/></filter></defs><rect x='28' y='26' width='1044' height='568' rx='10' fill='white' filter='url(%23b)'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 620' preserveAspectRatio='none'><defs><filter id='b' x='-5%25' y='-5%25' width='110%25' height='110%25'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.022' numOctaves='2' seed='7'/><feDisplacementMap in='SourceGraphic' scale='32'/><feGaussianBlur stdDeviation='6'/></filter></defs><rect x='28' y='26' width='1044' height='568' rx='10' fill='white' filter='url(%23b)'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  mix-blend-mode: multiply;
  filter: saturate(0.92) contrast(0.98);
}

/* Diagonal stripe texture — reused in illustration frames, portrait cards,
   and placeholder surfaces. Ink-on-parchment at very low opacity. */
.stripe-texture {
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 14px,
    rgba(31, 23, 18, 0.035) 14px 15px
  );
}

/* =================================================================
   Layout
   ================================================================= */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-6); }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--s-5); }
.section { padding: var(--s-10) 0; }                          /* 128px, spec: 120–140 */
.center { text-align: center; }
.divider { border: 0; height: 1px; background: rgba(31,23,18,0.12); margin: var(--s-7) 0; }

@media (max-width: 720px) {
  .section { padding: var(--s-9) 0; }                         /* 96px / ~80 */
  .container { padding: 0 var(--s-5); }
}