/* ============================================================
   MIFTAH FOUNDATION — token + base layer
   Extracted from the miftah.media theme's main.css (source of
   truth: ~/miftah-projects/miftah-home/assets/css/main.css).
   Carries ONLY what miftah.foundation uses: webfonts, the
   :root token set, and the reset/base layer. Every newsroom
   component rule is deliberately absent — the Foundation page
   uses zero classes from the newsroom stylesheet.

   TYPEFACE NOTE: the newsroom's display face is Fatimah Arabic
   ITF (Iwantype, commercial, licensed one-website). It is NOT
   used here. Display falls to Noto Naskh Arabic, SIL Open Font
   License 1.1, self-hosted. Noto covers 400/500/600/700, which
   is exactly the range this design asks for; Fatimah has no
   600 at all. See CLAUDE.md.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,600;6..72,700&display=swap");

/* ---------- Arabic: Noto Naskh Arabic (OFL 1.1), self-hosted ---------- */
@font-face{font-family:"Naskh";src:url("../fonts/NotoNaskh/NotoNaskhArabic-Regular.woff2") format("woff2");font-weight:400;font-display:swap;}
@font-face{font-family:"Naskh";src:url("../fonts/NotoNaskh/NotoNaskhArabic-Medium.woff2") format("woff2");font-weight:500;font-display:swap;}
@font-face{font-family:"Naskh";src:url("../fonts/NotoNaskh/NotoNaskhArabic-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap;}
@font-face{font-family:"Naskh";src:url("../fonts/NotoNaskh/NotoNaskhArabic-Bold.woff2") format("woff2");font-weight:700;font-display:swap;}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* palette — warm archival */
  --paper:#F1E9D8;          /* base parchment */
  --paper-2:#EAE0CC;        /* slightly deeper */
  --card:#FBF6EA;           /* raised surfaces */
  --ink:#23201B;            /* warm near-black text */
  --ink-2:#5E564A;          /* secondary text */
  --ink-3:#8A8073;          /* meta / captions */
  --line:rgba(35,32,27,.14);/* hairlines */
  --line-2:rgba(35,32,27,.28);
  --crimson:#A41E22;        /* Miftah Media's signal colour — reserved */
  --crimson-d:#7E1518;
  --pine:#15402F;           /* the Foundation's institutional ground */
  --pine-2:#1F6E43;
  --gold:#B98A3E;           /* rare accent */
  --paper-fixed:#F1E9D8;

  /* type families */
  --f-display:"Naskh",sans-serif;
  --f-body:"Naskh",serif;
  --f-latin:"Newsreader",Georgia,serif;

  /* fluid type scale */
  --t-h1:clamp(2rem,6.4vw,3.6rem);
  --t-h2:clamp(1.5rem,4.6vw,2.3rem);
  --t-h3:clamp(1.22rem,3.4vw,1.6rem);
  --t-lead:clamp(1.08rem,2.7vw,1.35rem);
  --t-body:clamp(1.02rem,2.3vw,1.12rem);
  --t-sm:.9rem;
  --t-xs:.84rem;

  /* spacing rhythm */
  --gut:clamp(16px,4.4vw,28px);
  --col:min(1180px,100%);
  --read:min(680px,100%);

  --radius:3px;
  --shadow:0 1px 2px rgba(35,32,27,.06),0 8px 30px -18px rgba(35,32,27,.35);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;font-size:100%;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-body);line-height:1.72;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"liga" 1;
  transition:background .4s var(--ease),color .4s var(--ease);
}
[lang="en"]{font-family:var(--f-latin);line-height:1.6;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none;}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.18;letter-spacing:-.01em;}
[lang="en"] h1,[lang="en"] h2,[lang="en"] h3,[lang="en"] h4{font-family:var(--f-latin);font-weight:600;letter-spacing:-.02em;}
p{margin:0 0 1.1em;text-wrap:pretty;}
::selection{background:var(--crimson);color:var(--paper);}

/* paper grain */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* focus */
:focus-visible{outline:2px solid var(--crimson);outline-offset:3px;border-radius:2px;}

/* screen-reader-only, for the skip link and form hints */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}