/* ============================================================
   MIFTAH FOUNDATION — site layer
   Hand-written. Holds only what differs between the Claude
   Design canvas and the shipped static site. Loaded last.
   foundation.css and home.css stay byte-faithful to the design
   (home.css is regenerated by build.py), so every deliberate
   divergence lives here and is visible in one place.
   ============================================================ */

/* The language control is a real link between /  and  /en/ , not a JS toggle.
   .f-lang was written for a <button> (inline-block, text auto-centred); an
   <a> is plain inline, so it needs the box restored. */
.f-lang{display:inline-flex;align-items:center;justify-content:center;}

/* Keyboard skip link. Invisible until focused. */
.skip{position:absolute;inset-inline-start:var(--gut);top:-100px;z-index:60;
  background:var(--paper);color:var(--pine);font-family:var(--f-display);font-weight:700;
  font-size:.95rem;padding:11px 20px;border-radius:999px;box-shadow:var(--shadow);
  transition:top .18s var(--ease);}
.skip:focus{top:12px;}

/* Anchor links land with a little air above the heading. */
section[id]{scroll-margin-top:18px;}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth;}}

/* English body text.
   tokens.css sets `[lang="en"]{font-family:var(--f-latin)}`, but `lang` lives on
   <html> while `body` carries its own `font-family:var(--f-body)`, so body's own
   declaration wins and English prose fell back to Noto Naskh's Latin glyphs.
   Headings escaped it because `[lang="en"] h1..h4` name --f-latin explicitly.
   The canvas had the same bug; splitting into two pages makes it fixable here. */
html[lang="en"] body{font-family:var(--f-latin);line-height:1.6;}
