/* ==========================================================================
   Amal Alsuwayan — site shell (presentation only)
   Tokens · fonts · base · header · menu · pager · footer · utilities
   Content lives in content/original/ and is never styled into new words.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL — licences in /assets/fonts) ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-display:swap;font-weight:200 800;src:url('/assets/fonts/newsreader-latin-opsz-normal.woff2') format('woff2');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}
@font-face{font-family:"Newsreader";font-style:normal;font-display:swap;font-weight:200 800;src:url('/assets/fonts/newsreader-latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-display:swap;font-weight:200 800;src:url('/assets/fonts/newsreader-latin-opsz-italic.woff2') format('woff2');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}
@font-face{font-family:"Newsreader";font-style:italic;font-display:swap;font-weight:200 800;src:url('/assets/fonts/newsreader-latin-ext-opsz-italic.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter Tight";font-style:normal;font-display:swap;font-weight:100 900;src:url('/assets/fonts/inter-tight-latin-wght-normal.woff2') format('woff2');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}
@font-face{font-family:"Inter Tight";font-style:normal;font-display:swap;font-weight:100 900;src:url('/assets/fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:300;src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-300-normal.woff2') format('woff2');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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:500;src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url('/assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:300;src:url('/assets/fonts/ibm-plex-sans-arabic-latin-300-normal.woff2') format('woff2');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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:400;src:url('/assets/fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:500;src:url('/assets/fonts/ibm-plex-sans-arabic-latin-500-normal.woff2') format('woff2');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}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-display:swap;font-weight:600;src:url('/assets/fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');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}
@font-face{font-family:"Noto Naskh Arabic";font-style:normal;font-display:swap;font-weight:400 700;src:url('/assets/fonts/noto-naskh-arabic-arabic-wght-normal.woff2') format('woff2');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}

/* ---------- Tokens ---------- */
:root{
  --paper:#f3f0e8; --paper-2:#ebe6db; --stone:#ddd5c5; --mist:#e3e8e6; --white:#fbfaf6;
  --ink:#15181b; --ink-2:#2a3036; --muted:#555d5a; --faint:#7d8581;
  --line:rgba(21,24,27,.13); --line-2:rgba(21,24,27,.26);
  --accent:#46627a; --accent-deep:#2f4a60; --accent-soft:#d6dfe4;
  --brass:#b08d5b; --brass-light:#c9b38c;
  --night:#101820; --night-2:#16212b; --night-3:#1e2b37; --night-line:rgba(243,240,232,.13);
  --on-night:#f3f0e8; --on-night-muted:#a9b6c0;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --display:var(--serif);
  --gutter:clamp(1.25rem,5vw,5.5rem);
  --max:1480px;
  --header:5rem;
  --radius:2px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 1px rgba(16,24,32,.04),0 8px 24px -12px rgba(16,24,32,.18);
  --shadow-lg:0 2px 2px rgba(16,24,32,.04),0 30px 60px -28px rgba(16,24,32,.35);
  /* legacy aliases used by original inline styles */
  --blue:var(--accent);
}
html[dir=rtl]{
  --serif:"Noto Naskh Arabic","IBM Plex Sans Arabic",Tahoma,serif;
  --sans:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --display:var(--serif);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 1.5rem);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;overflow-x:clip}
html[dir=rtl] body{line-height:1.85}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;background:url('/assets/art/grain.svg');opacity:.05;mix-blend-mode:multiply}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
a,button{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button svg{pointer-events:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3{font-weight:400;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:340;line-height:1.04;letter-spacing:-.022em;font-optical-sizing:auto}
h3{font-family:var(--serif);font-weight:400;line-height:1.2;letter-spacing:-.01em}
p{text-wrap:pretty}
html[dir=rtl] h1,html[dir=rtl] h2,html[dir=rtl] h3{letter-spacing:0;font-weight:500;line-height:1.5}
html[dir=rtl] h1,html[dir=rtl] h2{font-weight:500}
em{font-style:italic}
html[dir=rtl] em{font-style:normal}
::selection{background:var(--accent);color:var(--paper)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:1px}
.dark :focus-visible,.site-footer :focus-visible,.praxis-page .archive-masthead :focus-visible{outline-color:var(--brass-light)}
main{min-height:60vh;display:block}
.container{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:500 .75rem/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
html[dir=rtl] .eyebrow{letter-spacing:0;font-size:.875rem;font-weight:500}

/* ---------- Skip / progress ---------- */
.skip{position:fixed;inset-block-start:-6rem;inset-inline-start:1rem;z-index:120;background:var(--ink);color:var(--paper);padding:.9rem 1.2rem;font-size:.95rem}
.skip:focus{inset-block-start:1rem}
.progress{position:fixed;top:0;inset-inline-start:0;z-index:60;height:2px;width:var(--reading,0%);background:linear-gradient(90deg,var(--accent),var(--brass));pointer-events:none;transition:width .1s linear}
html[dir=rtl] .progress{background:linear-gradient(270deg,var(--accent),var(--brass))}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header);display:flex;align-items:center;gap:2rem;padding-inline:var(--gutter);background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(18px);backdrop-filter:saturate(1.3) blur(18px);border-bottom:1px solid transparent;transition:height .35s var(--ease),border-color .35s,background .35s}
.is-scrolled .site-header{height:4.25rem;border-bottom-color:var(--line)}
.brand{display:flex;align-items:center;gap:1rem;flex-shrink:0;min-height:2.75rem}
.brand img{width:2.5rem;height:2.5rem;object-fit:contain;transition:transform .5s var(--ease)}
.brand:hover img{transform:translateY(-2px)}
.brand-name{font:500 .78rem/1.25 var(--sans);letter-spacing:.3em;white-space:nowrap}
.brand-praxis .brand-name{font-size:1.15rem;letter-spacing:.26em;font-weight:500}
.brand-sub{display:block;font:400 .7rem/1.3 var(--sans);letter-spacing:.06em;margin-top:.2rem;color:var(--muted)}
html[dir=rtl] .brand-name{letter-spacing:0;font-size:1.1rem;font-weight:500}
html[dir=rtl] .brand-praxis .brand-name{font-size:1.2rem}
html[dir=rtl] .brand-sub{letter-spacing:0;font-size:.8rem}

.desktop-nav{margin-inline-start:auto;display:flex;align-items:center;gap:.25rem;padding:.3rem;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--white) 55%,transparent)}
.desktop-nav a{position:relative;display:inline-flex;align-items:center;min-height:2.4rem;padding:.35rem 1rem;border-radius:999px;font:450 .9rem/1 var(--sans);color:var(--ink-2);transition:background .25s,color .25s}
.desktop-nav a:hover{background:rgba(21,24,27,.06);color:var(--ink)}
.desktop-nav a[aria-current=page],.desktop-nav a.is-active{background:var(--ink);color:var(--paper)}
html[dir=rtl] .desktop-nav a{font-size:.95rem;font-weight:500}

.header-controls{display:flex;align-items:center;gap:.6rem}
.language{display:inline-grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line-2);font:600 .75rem/1 var(--sans);letter-spacing:.06em;transition:background .25s,color .25s,border-color .25s}
.language:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.menu-toggle{display:none;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line-2);align-items:center;justify-content:center}
.menu-icon{position:relative;width:1.1rem;height:.55rem;border-block:1.5px solid currentColor;transition:transform .3s var(--ease),height .3s}
.menu-open .menu-icon{height:0;border-bottom:0;transform:rotate(45deg)}
.menu-open .menu-icon::after{content:"";position:absolute;inset-inline:0;top:-1.5px;border-top:1.5px solid currentColor;transform:rotate(-90deg)}

/* Mobile menu */
.mobile-nav{display:none}
@media (max-width:1000px){
  .desktop-nav{display:none}
  .menu-toggle{display:inline-flex}
  .header-controls{margin-inline-start:auto}
  .mobile-nav:not([hidden]){position:fixed;inset:var(--header) 0 0;z-index:45;display:flex;flex-direction:column;padding:1.5rem var(--gutter) 3rem;background:var(--paper);overflow:auto;counter-reset:m}
  .is-scrolled .mobile-nav:not([hidden]){inset-block-start:4.25rem}
  .mobile-nav a{display:flex;align-items:baseline;gap:1.25rem;padding:1.05rem 0;border-bottom:1px solid var(--line);font:340 clamp(2rem,8vw,3rem)/1.1 var(--display);letter-spacing:-.02em;counter-increment:m;animation:menu-in .5s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
  .mobile-nav a::before{content:counter(m,decimal-leading-zero);font:500 .75rem/1 var(--sans);letter-spacing:.1em;color:var(--accent);min-width:1.6rem}
  .mobile-nav a[aria-current=page]{color:var(--accent)}
  html[dir=rtl] .mobile-nav a{font-weight:500;letter-spacing:0;line-height:1.5}
}
@keyframes menu-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Buttons & links (shared) ---------- */
.button,.hero-cta,.canvas-btn{display:inline-flex;align-items:center;justify-content:center;gap:.9rem;min-height:3.25rem;padding:.8rem 1.4rem;border-radius:999px;font:500 .95rem/1.2 var(--sans);letter-spacing:.01em;border:1px solid var(--ink);background:transparent;color:var(--ink);transition:background .3s var(--ease),color .3s,border-color .3s,transform .3s var(--ease)}
.button:hover{background:var(--ink);color:var(--paper)}
.button.primary,.hero-cta,.canvas-btn{background:var(--ink);color:var(--paper)}
.button.primary:hover,.hero-cta:hover,.canvas-btn:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.text-link{display:inline-flex;align-items:center;gap:.6rem;border-bottom:1px solid currentColor;padding-block:.4rem}
.arrow{display:inline-block;transition:transform .3s var(--ease)}

/* ---------- Pager (previous / next page) ---------- */
.pager{border-top:1px solid var(--line);margin-top:0}
.pager-inner{display:grid;grid-template-columns:1fr 1fr;max-width:var(--max);margin-inline:auto}
.pager-link{position:relative;display:flex;align-items:center;gap:1.25rem;min-height:9rem;padding:2rem var(--gutter);font:340 clamp(1.8rem,3.6vw,3.2rem)/1.1 var(--display);letter-spacing:-.02em;overflow:hidden;isolation:isolate;transition:color .4s var(--ease)}
html[dir=rtl] .pager-link{font-weight:500;letter-spacing:0;line-height:1.5}
.pager-link::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.pager-link:hover{color:var(--paper)}
.pager-link:hover::before{transform:scaleY(1)}
.pager-link svg{flex:none;width:2.25rem;height:2.25rem;padding:.45rem;border:1px solid currentColor;border-radius:50%;transition:transform .4s var(--ease)}
.pager-prev svg{transform:scaleX(-1)}
.pager-next{justify-content:flex-end;border-inline-start:1px solid var(--line)}
.pager-next:hover svg{transform:translateX(6px)}
.pager-prev:hover svg{transform:scaleX(-1) translateX(6px)}
html[dir=rtl] .pager-next svg{transform:scaleX(-1)}
html[dir=rtl] .pager-prev svg{transform:none}
html[dir=rtl] .pager-next:hover svg{transform:scaleX(-1) translateX(6px)}
html[dir=rtl] .pager-prev:hover svg{transform:translateX(6px)}
.pager-empty{min-height:0}

/* ---------- Back to top ---------- */
.to-top{position:fixed;inset-inline-end:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:40;width:3rem;height:3rem;display:grid;place-items:center;border-radius:50%;background:var(--ink);color:var(--paper);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;transition:opacity .35s,transform .35s var(--ease),background .25s}
.to-top svg{width:1.2rem;height:1.2rem}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--accent-deep)}

/* ---------- Footer ---------- */
.site-footer{position:relative;background:var(--night);color:var(--on-night);padding:3rem var(--gutter) 2.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;font-size:.875rem;overflow:hidden}
.site-footer::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(201,179,140,.35),transparent) top/100% 1px no-repeat;pointer-events:none}
.original-footer-line{display:flex;flex-direction:column;gap:.35rem;color:var(--on-night-muted)}
.original-footer-line span:first-child{color:var(--on-night);font-size:.95rem}
.footer-links{display:flex;flex-wrap:wrap;gap:.35rem}
.footer-links a{display:inline-flex;align-items:center;min-height:2.5rem;padding:.4rem .95rem;border:1px solid var(--night-line);border-radius:999px;transition:background .25s,border-color .25s,color .25s}
.footer-links a:hover{background:var(--on-night);color:var(--night);border-color:var(--on-night)}

/* ---------- 404 ---------- */
.not-found{min-height:60vh;display:grid;place-content:center;justify-items:center;text-align:center;gap:1.25rem;padding-block:6rem}
.not-found h1{font-size:clamp(2.5rem,6vw,5rem)}
.not-found p:not(.eyebrow){color:var(--muted)}
.not-found .button{margin-top:1rem}

/* ---------- Scroll settle (JS adds .js; content is never hidden) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* movement only: content is always visible, it simply settles into place */
  .js [data-reveal]{transform:translate3d(0,26px,0);transition:transform 1s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
  .js [data-reveal].is-in{transform:none}
}
@media print{[data-reveal]{transform:none!important}.site-header,.to-top,.pager,.progress{display:none!important}body::before{display:none}}

/* ---------- Responsive shell ---------- */
@media (max-width:1180px){.desktop-nav a{padding-inline:.75rem}.site-header{gap:1.25rem}}
@media (max-width:1000px){:root{--header:4.5rem}}
@media (max-width:640px){
  body{font-size:1rem}
  .brand{gap:.7rem}.brand img{width:2.1rem;height:2.1rem}
  .brand-name{font-size:.68rem;letter-spacing:.2em}
  .brand-praxis .brand-name{font-size:1rem}
  html[dir=rtl] .brand-name{font-size:1rem}
  .pager-link{min-height:6.5rem;padding:1.5rem var(--gutter);gap:.8rem;font-size:1.5rem}
  .pager-link svg{width:1.9rem;height:1.9rem}
  .site-footer{flex-direction:column;align-items:flex-start;padding-block:2.5rem 5.5rem}
}
@media (max-width:360px){.brand-name{letter-spacing:.12em}.language,.menu-toggle{width:2.6rem;height:2.6rem}}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}