/* Global tokens and shared classes: the style block of concepts/v2/shell-head.html, unchanged.
   Two edits only: --f-ar names 'Cairo Variable' first (the family the self-hosted package registers),
   and one comment says /institution/ instead of the old hash route.
   Fonts are self-hosted (no Google Fonts): Cairo variable 200-1000 (arabic, latin, latin-ext by unicode-range), Geist Mono 400/500. *//* cairo-arabic-wght-normal */
@font-face {
  font-family: 'Cairo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/_astro/cairo-arabic-wght-normal.CJWMIGCx.woff2) format('woff2-variations');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* cairo-latin-ext-wght-normal */
@font-face {
  font-family: 'Cairo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/_astro/cairo-latin-ext-wght-normal.at8nfxId.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* cairo-latin-wght-normal */
@font-face {
  font-family: 'Cairo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url(/_astro/cairo-latin-wght-normal.PfPtmrPZ.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* geist-mono-latin-400-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/_astro/geist-mono-latin-400-normal.DTRLJnHl.woff2) format('woff2'), url(/_astro/geist-mono-latin-400-normal.B2yvC1Cq.woff) format('woff');
}
/* geist-mono-latin-500-normal */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/_astro/geist-mono-latin-500-normal.YINYabwD.woff2) format('woff2'), url(/_astro/geist-mono-latin-500-normal.D-GG86Jb.woff) format('woff');
}
/* Layout: one film. A pinned night opener, then bands that alternate night / mist like Terminal. */
:root{
  --night:#0b0c17; --night-2:#12142a; --night-3:#1a1d3a;
  --indigo:#4a51a2; --sky:#658dff; --sky-2:#a9bcff; --navy:#3a3f6e;
  --mist:#e8eceb; --paper:#f6f7f5; --cream:#faf8f5;
  --ink:#1c1e2b; --ink-mute:#5b6070; --mute-d:#9097bb;
  --line-d:rgba(169,188,255,.15); --line-l:rgba(28,30,43,.12);
  --coffee:#b8864e; --alert:#ff7a59; --ok:#6fd0a0;
  --loud:#ffc53d; --loud-ink:var(--night); --loud-d:#8a5a00;
  --f-ar:'Cairo Variable','Cairo','Segoe UI',Tahoma,sans-serif;
  --f-mono:'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --r:12px;
  /* micro-type floor: Latin mono labels never go below --fs-label-s; small Arabic tags (example / from-you / assume) sit at --fs-tag */
  --fs-label:11px; --fs-label-s:10px; --fs-tag:13px;
  --tag-c:var(--mute-d);
  --focus:var(--sky);
  --nav-clear:calc(80px + env(safe-area-inset-top,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
/* anchors, scrollIntoView and focus scrolling stop below the fixed bar; bands keep landing flush (their own padding clears the bar) */
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-clear)}
.band{scroll-margin-top:calc(-1 * var(--nav-clear))}
body{background:var(--night);color:#fff;font-family:var(--f-ar);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--night)}
.page{direction:rtl}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.12em;text-transform:uppercase;direction:ltr;unicode-bidi:isolate;font-weight:400}
a{color:inherit}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
/* sky is under 3:1 on mist/cream/paper, so light surfaces take an indigo ring; a dark island inside a light band sets --focus back to sky.
   The example tag follows the same surfaces: ink-mute on light, mute-d on dark (both above 4.5:1 at 13px). */
.mist,.cream,#s2 .card{--focus:var(--indigo);--tag-c:var(--ink-mute)}
#s3 .b{--focus:var(--sky);--tag-c:var(--mute-d)}

/* bands */
.band{position:relative;padding-block:clamp(80px,11vw,150px)}
.band.night{background:var(--night);color:#fff}
.band.night2{background:var(--night-2);color:#fff}
.band.mist{background:var(--mist);color:var(--ink)}
.band.cream{background:var(--cream);color:var(--ink)}
.h2{font-weight:200;font-size:clamp(2.1rem,5vw,4.4rem);line-height:1.18;margin:0;text-wrap:balance;max-width:18ch;letter-spacing:0}
.h2 em{font-style:normal;color:var(--sky)}
.mist .h2 em,.cream .h2 em{color:var(--indigo)}
.lede{max-width:62ch;font-size:1.1rem;line-height:1.9;margin:20px 0 0;font-weight:400}
.night .lede,.night2 .lede{color:#c3c8ea} .mist .lede,.cream .lede{color:var(--ink-mute)}
.btn{font-family:var(--f-ar);font-size:.98rem;font-weight:600;border:0;border-radius:10px;padding:11px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:1.3;transition:filter .2s,transform .2s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.primary{background:var(--sky);color:var(--night)}
.btn.indigo{background:var(--indigo);color:#fff}
.btn.white{background:#fff;color:var(--night)}
.btn.ghost{background:transparent;color:inherit;border:1px solid currentColor;opacity:.85}
/* loud: the single most important action of a view, always a filled button on a night surface (never text, never on a light band) */
.btn.loud,.pill.loud{background:var(--loud);color:var(--loud-ink)}
.btn.loud:hover,.pill.loud:hover{background:#ffd76a;filter:none}
.btn.loud:focus-visible,.pill.loud:focus-visible{outline-color:#fff}
.chip{font-family:var(--f-ar);font-size:.9rem;padding:7px 14px;border-radius:999px;border:1px solid var(--line-d);background:transparent;color:inherit;cursor:pointer;line-height:1.4;transition:background .2s,border-color .2s}
.mist .chip,.cream .chip{border-color:var(--line-l)}
.chip:hover{border-color:var(--sky)} .chip[aria-pressed="true"]{background:var(--sky);color:var(--night);border-color:var(--sky)}
.mist .chip[aria-pressed="true"],.cream .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.from-you{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-tag);font-weight:600;color:var(--sky);border:1px dashed currentColor;border-radius:999px;padding:3px 10px;line-height:1.5;vertical-align:middle;white-space:nowrap}
.mist .from-you,.cream .from-you{color:var(--indigo)}
.from-you::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.assume{font-size:var(--fs-tag);font-weight:600;color:#f3c37d;border:1px dashed currentColor;border-radius:999px;padding:3px 10px;white-space:nowrap}
.mist .assume,.cream .assume{color:#9a6418}
/* example tag («بيانات توضيحية» / «مثال توضيحي»): one shared pill; solid and muted so it never competes with the dashed .from-you / .assume */
.tag{display:inline-block;vertical-align:middle;font-family:var(--f-ar);font-size:var(--fs-tag);font-weight:600;line-height:1.5;letter-spacing:0;padding:2px 10px;border:1px solid currentColor;border-radius:999px;white-space:nowrap;color:var(--tag-c)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.top{position:fixed;inset:0 0 auto;z-index:50;padding-top:calc(10px + env(safe-area-inset-top,0px));pointer-events:none}
.top .wrap{pointer-events:none}
.bar{pointer-events:auto;max-width:1160px;margin-inline:auto;display:flex;align-items:center;gap:14px;justify-content:space-between;background:rgba(18,20,42,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line-d);border-radius:12px;padding:7px;padding-inline-start:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;white-space:nowrap;text-decoration:none;color:#fff}
.brand svg{width:26px;height:26px;flex:none}
.navlinks{display:flex;gap:18px;font-size:13.5px;color:#dfe3ff}
.navlinks a{text-decoration:none;opacity:.8}.navlinks a:hover,.navlinks a[aria-current="true"]{opacity:1;color:var(--sky-2)}
.navend{display:flex;gap:6px;align-items:center}
.pill{font-family:var(--f-mono);font-size:var(--fs-label);letter-spacing:.06em;line-height:1.25;padding:8px 12px;border-radius:8px;border:0;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill.sky{background:var(--sky);color:var(--night)} .pill.white{background:#fff;color:var(--night)} .pill.dim{background:#262a52;color:#fff}
.pill .ar{font-family:var(--f-ar);font-size:13px;letter-spacing:0;font-weight:600}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mute-d)}
.pill.has .dot{background:var(--sky);box-shadow:0 0 0 3px rgba(101,141,255,.25)}
/* the clinic sign: a green plus drawn in CSS, the only clinic cue reused outside #s2 */
.cplus::before{content:"";display:inline-block;width:1.1em;height:1.1em;flex:none;border-radius:.3em;vertical-align:-.2em;margin-inline-end:.45em;background:linear-gradient(var(--night),var(--night)) center/56% 14% no-repeat,linear-gradient(var(--night),var(--night)) center/14% 56% no-repeat,var(--ok)}
.btn.cplus::before{margin:0}

/* understanding log drawer (سجل الفهم) */
.margin{position:fixed;z-index:70;top:0;bottom:0;left:0;width:min(420px,100%);background:var(--night-2);border-inline-start:1px solid var(--line-d);transform:translateX(-102%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:calc(18px + env(safe-area-inset-top,0px)) max(18px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-left,0px));overflow:auto}
.margin.open{transform:none}
.margin header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}
.margin h3{margin:0;font-weight:300;font-size:1.6rem}
.margin .x{background:transparent;border:1px solid var(--line-d);color:#fff;border-radius:8px;width:44px;height:44px;flex:none;cursor:pointer;font-size:20px}
.margin section{border-top:1px solid var(--line-d);padding:14px 0}
.margin section h4{margin:0 0 6px;font-size:.95rem;font-weight:600;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.margin ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;color:#d4d8f5;font-size:.95rem}
.margin li::before{content:"·";color:var(--sky);margin-inline-end:8px}
.margin .empty{color:var(--mute-d);font-size:.9rem}
.scrim{position:fixed;inset:0;z-index:65;background:rgba(5,6,14,.55);opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.on{opacity:1;pointer-events:auto}

/* progress arrow on the inline-end edge */
.prog{position:fixed;z-index:40;left:max(10px,env(safe-area-inset-left,0px));top:22vh;bottom:22vh;width:2px;background:var(--line-d);border-radius:2px;pointer-events:none}
.prog i{position:absolute;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--sky);box-shadow:0 0 12px var(--sky);top:0;transform:translateY(-50%)}

/* Terminal-style motion: one big sentence per screen, copy that moves with the scroll */
[data-reveal] .w{display:inline-block;transition:opacity .25s linear,transform .35s cubic-bezier(.2,.8,.2,1);will-change:opacity}
.pin{padding-block:0}
.pin>.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
[data-at]{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
[data-at].on{opacity:1;transform:none}
.h1{font-weight:200;font-size:clamp(2.4rem,6.4vw,6rem);line-height:1.08;margin:0;text-wrap:balance;letter-spacing:0}
.h1 em,.h2 em{font-style:normal}
.kicker{font-size:clamp(1.05rem,1.6vw,1.3rem);font-weight:300;line-height:1.7;max-width:46ch;margin:18px 0 0;color:#c3c8ea}
.mist .kicker,.cream .kicker{color:var(--ink-mute)}
@media (prefers-reduced-motion:reduce){[data-at]{opacity:1;transform:none}}

/* category page head (/institution/ …) and the doors row */
.navlinks a[data-route]{position:relative}
.navlinks a[aria-current="page"]{opacity:1;color:var(--sky-2)}
.navlinks a[aria-current="page"]::after{content:"";position:absolute;inset:auto 0 -6px;height:2px;background:var(--sky)}
.menu-btn{display:none}
@media (max-width:1060px){
  .menu-btn{display:inline-flex}
  .navlinks{display:none;position:absolute;top:calc(100% + 8px);inset-inline:0;flex-direction:column;gap:0;background:rgba(18,20,42,.96);border:1px solid var(--line-d);border-radius:12px;padding:8px}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 14px;font-size:15px}
  .bar{position:relative}
}

@media (max-width:1060px){.navlinks:not(.open){display:none}}
@media (max-width:560px){.prog{display:none}.bar{gap:10px;padding-inline-start:12px}.pill{padding-inline:10px}}
/* touch: shared chips and the header pills (the only nav on phones) reach a 40px target */
@media (max-width:560px),(pointer:coarse){.chip,.pill{min-height:40px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
.site-foot{background:var(--night);border-top:1px solid var(--line-d);color:var(--mute-d);font-size:.9rem;line-height:1.8}
.site-foot .wrap{padding-block:44px calc(30px + env(safe-area-inset-bottom,0px))}
.site-foot .foot-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr);gap:28px 32px;align-items:start}
.site-foot .foot-brand{display:inline-flex;align-items:center;gap:10px;justify-self:start;font-weight:700;font-size:15px;color:#fff;text-decoration:none;white-space:nowrap}
.site-foot .foot-brand svg{width:26px;height:26px;flex:none}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot .foot-nav ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.site-foot h2{margin:0 0 4px;font-size:.9rem;font-weight:600;line-height:1.8;color:#c3c8ea}
.site-foot li a{display:inline-flex;align-items:center;min-height:32px;color:inherit;text-decoration:none;transition:color .2s}
.site-foot li a:hover{color:#fff}
.site-foot li a[dir="ltr"]{white-space:nowrap}
.site-foot .foot-box li{min-height:32px;display:flex;align-items:center}
.site-foot .foot-legal a{color:inherit}.site-foot .foot-legal a:hover{color:#fff}
.site-foot .foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin-top:30px;padding-top:18px;border-top:1px solid var(--line-d);font-size:.85rem}
@media (max-width:900px){
  .site-foot .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot .foot-brand{grid-column:1/-1}
}
@media (max-width:480px){.site-foot .foot-cols{grid-template-columns:minmax(0,1fr)}}
/* touch: links reach the 40px target used by the header pills */
@media (max-width:560px),(pointer:coarse){.site-foot li a,.site-foot .foot-box li{min-height:40px}}