/* fasfos.ca blog v2: the dark "flight" tokens of the home page, tuned for reading.
   Arabic body: Amiri 1.25rem/2. English body: IBM Plex Serif. Measure ~66ch. RTL via dir="rtl". */

:root{
  color-scheme:dark;
  --abyss:#05090d; --night:#09121a; --deep:#0f1d27; --tide:#17303c; --slate:#284756;
  --mist:#7f98a3; --fog:#b4c6cc; --pearl:#e9f1ef; --halo:#f6faf8; --ink:#0a1a22;
  --coral:#ef7a5c; --coral-soft:rgba(239,122,92,.22);
  --pearl-a04:rgba(233,241,239,.04); --pearl-a06:rgba(233,241,239,.06); --pearl-a08:rgba(233,241,239,.08); --pearl-a12:rgba(233,241,239,.12);
  --pearl-a18:rgba(233,241,239,.18); --pearl-a22:rgba(233,241,239,.22); --pearl-a40:rgba(233,241,239,.4); --pearl-a70:rgba(233,241,239,.7);
  --glass:rgba(12,24,33,.62); --glass-2:rgba(9,18,26,.82);
  --f-display:'El Messiri','Segoe UI',sans-serif;
  --f-ui:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --f-ar:'Amiri','IBM Plex Sans Arabic','Traditional Arabic',serif;
  --f-serif:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --gutter:16px; --maxw:80rem; --pad:max(var(--gutter),calc((100vw - var(--maxw)) / 2));
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --acc:var(--pearl); --acc-soft:rgba(233,241,239,.10);     /* pillar accent, overridden below */
  --col:41rem;                                              /* reading column */
  --wrap:min(calc(100% - 2 * var(--gutter)), calc(var(--col) + 17rem));
}
html[dir=rtl]{
  --col:43rem;
  --f-ui:'IBM Plex Sans Arabic','IBM Plex Sans','Segoe UI',Tahoma,Arial,sans-serif;
}
html[data-pillar=psychology]{--acc:#efc9bf;--acc-soft:rgba(239,201,191,.14)}
html[data-pillar=management]{--acc:#ef7a5c;--acc-soft:rgba(239,122,92,.16)}
html[data-pillar=ai]{--acc:#8fc4cf;--acc-soft:rgba(143,196,207,.15)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--abyss);color:var(--pearl);font:400 1rem/1.6 var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-width:320px}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,blockquote{margin:0}
::selection{background:var(--pearl);color:var(--ink)}
:focus-visible{outline:2px solid var(--pearl);outline-offset:3px;border-radius:6px}
.skip{position:absolute;inset-inline-start:-9999px;top:8px;z-index:99;padding:.6rem 1rem;border-radius:999px;background:var(--pearl);color:var(--ink);text-decoration:none}
.skip:focus{inset-inline-start:12px}

/* ---------- bar ---------- */
.bar{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:calc(env(safe-area-inset-top,0px) + 14px) var(--pad) 14px;transition:background .4s,padding .4s}
.bar.solid{background:rgba(5,9,13,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding-block:calc(env(safe-area-inset-top,0px) + 9px) 9px}
.bar .prog{position:absolute;inset-inline:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--pearl-a40),var(--halo));transform-origin:0 50%;
  transform:scaleX(var(--p,0));opacity:0;transition:opacity .4s;pointer-events:none}
html[dir=rtl] .bar .prog{transform-origin:100% 50%;background:linear-gradient(270deg,var(--pearl-a40),var(--halo))}
.page-article .bar.solid .prog{opacity:1}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;font:600 1.05rem var(--f-display);letter-spacing:.01em;min-width:0}
.brand span{white-space:nowrap}
.brand .mark{width:28px;height:28px;flex:none}
.nav{display:flex;align-items:center;gap:1.7rem;font:400 .92rem var(--f-ui);color:var(--fog)}
.nav a{text-decoration:none;position:relative;padding:.3rem 0;white-space:nowrap;transition:color .3s}
.nav a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:var(--pearl);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
html[dir=rtl] .nav a::after{transform-origin:100% 50%}
.nav a:hover,.nav a.on{color:var(--halo)}
.nav a:hover::after,.nav a.on::after{transform:none}
.bar-end{display:flex;align-items:center;gap:.6rem}
.lang{display:inline-flex;align-items:center;min-height:36px;padding:.2rem .95rem;border:1px solid var(--pearl-a22);border-radius:999px;color:var(--fog);text-decoration:none;font:500 .86rem var(--f-ui);transition:border-color .3s,color .3s}
.lang:hover{border-color:var(--pearl);color:var(--halo)}

/* ---------- shared ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:46px;padding:.7rem 1.4rem;border-radius:999px;border:1px solid var(--pearl-a40);
  font:500 .95rem var(--f-ui);text-decoration:none;color:var(--pearl);background:transparent;cursor:pointer;transition:background .3s,border-color .3s,color .3s}
.btn:hover{border-color:var(--pearl);background:var(--pearl-a06)}
.btn .arr{display:inline-block;width:18px;height:1px;background:currentColor;position:relative;transition:width .4s var(--ease)}
.btn .arr::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .arr{width:26px}
html[dir=rtl] .arr{transform:scaleX(-1)}
.pill{display:inline-flex;align-items:center;min-height:26px;padding:.1rem .8rem;border:1px solid var(--acc);border-radius:999px;color:var(--acc);
  font:500 .78rem/1.2 var(--f-ui);letter-spacing:.06em;text-decoration:none;background:var(--acc-soft);width:max-content;max-width:100%}
html[dir=rtl] .pill{letter-spacing:0;font-size:.84rem}
a.pill:hover{background:var(--acc);color:var(--ink)}
[data-p=psychology]{--acc:#efc9bf;--acc-soft:rgba(239,201,191,.14)}
[data-p=management]{--acc:#ef7a5c;--acc-soft:rgba(239,122,92,.16)}
[data-p=ai]{--acc:#8fc4cf;--acc-soft:rgba(143,196,207,.15)}
.eyebrow{display:flex;align-items:center;gap:.9rem;margin:0 0 1.2rem;font:500 .78rem var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:var(--mist)}
html[dir=rtl] .eyebrow{letter-spacing:.04em;font-size:.92rem;text-transform:none}
.eyebrow::before{content:"";width:36px;height:1px;background:var(--pearl-a40);flex:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:calc(env(safe-area-inset-top,0px) + 112px) 0 2.6rem;border-bottom:1px solid var(--pearl-a08);
  background:radial-gradient(60% 90% at 82% 0%,var(--acc-soft),transparent 70%),linear-gradient(180deg,var(--night),var(--abyss) 92%)}
html[dir=rtl] .hero{background:radial-gradient(60% 90% at 18% 0%,var(--acc-soft),transparent 70%),linear-gradient(180deg,var(--night),var(--abyss) 92%)}
.hero-in{width:var(--wrap);margin-inline:auto}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;margin-bottom:1.5rem;font:400 .84rem var(--f-ui);color:var(--mist)}
.crumbs a{color:var(--fog);text-decoration:none}
.crumbs a:hover{color:var(--halo);text-decoration:underline;text-underline-offset:3px}
.crumbs a+a::before,.crumbs a+span::before{content:"/";margin-inline-end:.5rem;color:var(--pearl-a40)}
.crumbs [aria-current]{color:var(--mist)}
.meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-bottom:1.1rem;font:400 .86rem var(--f-ui);color:var(--mist)}
.meta-row>time+*::before,.meta-row>span+span::before{content:"";display:inline-block;width:3px;height:3px;margin-inline-end:.8rem;border-radius:50%;background:var(--pearl-a40);vertical-align:middle}
.hero h1{max-width:24em;font:700 clamp(1.85rem,1.2rem + 2.8vw,3.35rem)/1.16 var(--f-display);letter-spacing:-.01em;color:var(--halo);text-wrap:balance;overflow-wrap:break-word}
html[dir=rtl] .hero h1{line-height:1.42;letter-spacing:0}
.lede{max-width:36em;margin-top:1.1rem;font:400 1.1rem/1.75 var(--f-ui);color:var(--fog);text-wrap:pretty}
html[dir=rtl] .lede{font:400 1.32rem/1.95 var(--f-ar)}
.byline{margin-top:1.6rem}
.byline a{display:inline-flex;align-items:center;gap:.8rem;text-decoration:none}
.by-ph{width:44px;height:44px;border-radius:50%;object-fit:cover;border:1px solid var(--pearl-a22)}
.byline span{display:flex;flex-direction:column;line-height:1.35}
.byline b{font:600 .96rem var(--f-ui);color:var(--halo)}
.byline small{font:400 .8rem var(--f-ui);color:var(--mist)}

/* ---------- article layout ---------- */
.post-grid{width:var(--wrap);margin-inline:auto;padding-block:2.6rem 1rem;display:grid;grid-template-columns:minmax(0,var(--col)) 14rem;gap:3rem;justify-content:space-between;align-items:start}
.post-main{min-width:0}
.fade{will-change:opacity,transform}
html.js .fade:not(.in){opacity:0;transform:translateY(12px);animation:fadeSafe .6s ease 2.6s forwards}
html.js .fade{transition:opacity .7s var(--ease),transform .8s var(--ease-out)}
html.js .fade.in{opacity:1;transform:none}
@keyframes fadeSafe{to{opacity:1;transform:none}}

/* takeaways */
.takeaways{margin:0 0 2.4rem;padding:1.3rem 1.4rem 1.4rem;border:1px solid var(--pearl-a12);border-inline-start:3px solid var(--acc);border-radius:14px;background:var(--glass)}
.takeaways h2,.faq h2,.sources h2,.related h2{font:600 .82rem var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
html[dir=rtl] .takeaways h2,html[dir=rtl] .faq h2,html[dir=rtl] .sources h2,html[dir=rtl] .related h2{letter-spacing:.02em;font-size:1.05rem;text-transform:none;font-family:var(--f-display)}
.faq h2,.sources h2{color:var(--halo)}
.takeaways ul{list-style:none;padding:0;margin:.9rem 0 0;display:grid;gap:.7rem}
.takeaways li{position:relative;padding-inline-start:1.7rem;font:400 1rem/1.7 var(--f-ui);color:var(--pearl)}
html[dir=rtl] .takeaways li{font:400 1.18rem/1.85 var(--f-ar)}
.takeaways li::before{content:"";position:absolute;inset-inline-start:.1rem;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--acc)}
html[dir=rtl] .takeaways li::before{top:.75em}

/* ---------- prose: the reading column ---------- */
.prose{font:400 1.1875rem/1.78 var(--f-serif);color:var(--pearl);max-width:66ch;overflow-wrap:break-word;hyphens:manual}
html[dir=rtl] .prose{font:400 1.25rem/2 var(--f-ar)}
.prose>*+*{margin-top:1.15em}
.prose p{text-wrap:pretty}
.prose strong{font-weight:600;color:var(--halo)}
html[dir=rtl] .prose strong{font-weight:700}
.prose em{font-style:italic}
html[dir=rtl] .prose em{font-style:normal;color:var(--halo)}
.prose a{color:var(--halo);text-decoration:underline;text-decoration-color:var(--acc);text-decoration-thickness:1px;text-underline-offset:.25em;transition:text-decoration-color .3s,color .3s}
.prose a:hover{text-decoration-color:var(--halo);color:#fff}
.prose a.ext::after,.sources a.ext::after{content:"\2197";display:inline-block;margin-inline-start:.2em;font:400 .78em var(--f-ui);color:var(--mist);text-decoration:none}
html[dir=rtl] .prose a.ext::after,html[dir=rtl] .sources a.ext::after{content:"\2196"}
.prose h2{margin-top:2.5em;font:700 clamp(1.45rem,1.1rem + 1.2vw,2rem)/1.3 var(--f-display);color:var(--halo);letter-spacing:-.005em;text-wrap:balance;scroll-margin-top:90px}
html[dir=rtl] .prose h2{line-height:1.55;letter-spacing:0}
.prose h2::before{content:"";display:block;width:34px;height:2px;margin-bottom:.8rem;background:var(--acc);opacity:.9}
.prose h2+*{margin-top:.8em}
.prose h3{margin-top:1.9em;font:600 clamp(1.15rem,1rem + .5vw,1.4rem)/1.4 var(--f-display);color:var(--halo);text-wrap:balance}
html[dir=rtl] .prose h3{line-height:1.6}
.prose h3+*{margin-top:.55em}
.prose ul,.prose ol{padding:0;list-style:none;display:grid;gap:.55em}
.prose ul>li,.prose ol>li{position:relative;padding-inline-start:1.7em}
.prose ul>li::before{content:"";position:absolute;inset-inline-start:.25em;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--acc)}
html[dir=rtl] .prose ul>li::before{top:1.05em}
.prose ol{counter-reset:n}
.prose ol>li{counter-increment:n}
.prose ol>li::before{content:counter(n) ".";position:absolute;inset-inline-start:0;font:600 .9em var(--f-ui);color:var(--acc);top:.15em;font-variant-numeric:tabular-nums}
html[dir=rtl] .prose ol>li::before{top:.3em}
.prose li>ul,.prose li>ol{margin-top:.55em}
.prose blockquote{padding:.2em 0;padding-inline:1.3rem 0;border-inline-start:3px solid var(--acc);font:italic 400 1.1em/1.75 var(--f-serif);color:var(--halo)}
html[dir=rtl] .prose blockquote{font:400 1.12em/1.95 var(--f-ar)}
.prose blockquote>p+p{margin-top:.7em}
.prose blockquote a{color:inherit}

/* tool card and note */
.prose aside{position:relative;padding:1.2rem 1.3rem 1.3rem;border-radius:14px;font:400 1rem/1.75 var(--f-ui);overflow-wrap:break-word}
html[dir=rtl] .prose aside{font:400 1.12rem/1.95 var(--f-ar)}
.prose aside::before{content:attr(data-label);display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem;font:600 .78rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
html[dir=rtl] .prose aside::before{letter-spacing:.02em;text-transform:none;font:700 1.05rem/1.2 var(--f-display)}
.prose aside>*+*{margin-top:.8em}
.prose aside h3{margin-top:0;font:600 1.15rem/1.4 var(--f-display)}
.prose aside.tool{border:1px solid var(--pearl-a22);border-top:3px solid var(--acc);background:linear-gradient(180deg,var(--acc-soft),var(--glass) 60%)}
.prose aside.tool::before{content:attr(data-label)}
.prose aside.tool ol{counter-reset:step;gap:.85em}
.prose aside.tool ol>li{counter-increment:step;padding-inline-start:2.5rem;min-height:1.9rem}
.prose aside.tool ol>li::before{content:counter(step);display:grid;place-items:center;top:.05em;width:1.9rem;height:1.9rem;border-radius:50%;
  background:var(--acc);color:var(--ink);font:700 .88rem/1 var(--f-ui)}
html[dir=rtl] .prose aside.tool ol>li::before{top:.2em}
.prose aside.note{border:1px dashed var(--pearl-a40);border-inline-start:3px solid var(--mist);background:var(--pearl-a04);color:var(--fog)}
.prose aside.note::before{color:var(--fog)}
.prose aside ul>li::before{background:var(--acc)}

/* ---------- share / faq / sources / author ---------- */
.share{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--pearl-a12)}
.share p{margin-bottom:.8rem;font:500 .85rem var(--f-ui);color:var(--mist);letter-spacing:.06em}
.share div{display:flex;flex-wrap:wrap;gap:.5rem}
.share a,.share button{display:inline-flex;align-items:center;min-height:40px;padding:.4rem 1rem;border:1px solid var(--pearl-a22);border-radius:999px;background:transparent;color:var(--fog);
  font:500 .88rem var(--f-ui);text-decoration:none;cursor:pointer;transition:border-color .3s,color .3s,background .3s}
.share a:hover,.share button:hover{border-color:var(--pearl);color:var(--halo);background:var(--pearl-a06)}
.share button.done{border-color:var(--acc);color:var(--acc)}

.faq,.sources{margin-top:3rem}
.faq .qa{border-bottom:1px solid var(--pearl-a12)}
.faq .qa:first-of-type{margin-top:1rem;border-top:1px solid var(--pearl-a12)}
.faq summary{position:relative;display:block;padding:1.05rem 2.6rem 1.05rem 0;font:600 1.08rem/1.5 var(--f-display);color:var(--halo);cursor:pointer;list-style:none}
html[dir=rtl] .faq summary{padding:1.05rem 0 1.05rem 2.6rem;line-height:1.7;font-size:1.2rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before,.faq summary::after{content:"";position:absolute;top:50%;inset-inline-end:.35rem;width:14px;height:1.5px;background:var(--fog);transition:transform .35s var(--ease)}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0)}
.faq summary:hover{color:#fff}
.faq .ans{padding:0 0 1.2rem}
.faq .ans p{max-width:66ch;font:400 1.02rem/1.8 var(--f-ui);color:var(--fog)}
html[dir=rtl] .faq .ans p{font:400 1.18rem/1.95 var(--f-ar)}
.faq details[open] .ans{animation:ansIn .45s var(--ease)}
@keyframes ansIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.sources ol{margin:1rem 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:.7rem}
.sources li{counter-increment:s;position:relative;padding-inline-start:2rem;font:400 .94rem/1.6 var(--f-ui);color:var(--fog)}
.sources li::before{content:counter(s);position:absolute;inset-inline-start:0;top:.1em;font:600 .82rem var(--f-ui);color:var(--mist);font-variant-numeric:tabular-nums}
.sources a{color:var(--halo);text-decoration:underline;text-decoration-color:var(--pearl-a40);text-underline-offset:.2em;overflow-wrap:anywhere}
.sources a:hover{text-decoration-color:var(--halo)}
.src-meta{display:block;font-size:.84rem;color:var(--mist)}

.author{display:flex;gap:1.2rem;align-items:flex-start;margin-top:3rem;padding:1.4rem;border:1px solid var(--pearl-a12);border-radius:16px;background:var(--glass)}
.author .ph{width:84px;height:84px;flex:none;border-radius:50%;object-fit:cover;border:1px solid var(--pearl-a22)}
.author p{margin:0}
.a-name{font:700 1.2rem/1.3 var(--f-display);color:var(--halo)}
.a-role{margin-top:.15rem;font:400 .85rem var(--f-ui);color:var(--mist)}
.a-bio{margin-top:.7rem;font:400 .95rem/1.7 var(--f-ui);color:var(--fog)}
html[dir=rtl] .a-bio{font:400 1.08rem/1.9 var(--f-ar)}
.a-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin-top:.9rem}
.a-links a{font:500 .88rem var(--f-ui);color:var(--halo);text-decoration:underline;text-decoration-color:var(--pearl-a40);text-underline-offset:.25em}
.a-links a:hover{text-decoration-color:var(--halo)}

/* ---------- book call to action ---------- */
.bookcta{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:1.4rem;align-items:center;margin-top:2.4rem;padding:1.4rem;border:1px solid var(--pearl-a22);border-radius:18px;
  background:radial-gradient(90% 120% at 100% 0%,var(--coral-soft),transparent 60%),var(--glass-2)}
html[dir=rtl] .bookcta{background:radial-gradient(90% 120% at 0% 0%,var(--coral-soft),transparent 60%),var(--glass-2)}
.bookcta[data-book=istiqala]{background:radial-gradient(90% 120% at 100% 0%,rgba(239,201,191,.2),transparent 60%),var(--glass-2)}
html[dir=rtl] .bookcta[data-book=istiqala]{background:radial-gradient(90% 120% at 0% 0%,rgba(239,201,191,.2),transparent 60%),var(--glass-2)}
.bk-cover{display:block}
.bk-cover img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 18px 40px -14px rgba(0,0,0,.8),0 0 0 1px var(--pearl-a12)}
.bk-text{min-width:0}
.bk-kicker{margin:0 0 .5rem}
.soon{display:inline-block;padding:.12rem .7rem;border:1px solid var(--pearl-a40);border-radius:999px;font:500 .74rem/1.4 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--fog)}
html[dir=rtl] .soon{letter-spacing:0;text-transform:none;font-size:.82rem}
.bk-title{margin:0;font:700 1.45rem/1.25 var(--f-display);color:var(--halo)}
.bk-sub{margin:.2rem 0 0;font:400 .9rem/1.5 var(--f-ui);color:var(--mist)}
.bk-line{margin:.8rem 0 1.1rem;font:400 .95rem/1.7 var(--f-ui);color:var(--fog)}
html[dir=rtl] .bk-line{font:400 1.08rem/1.9 var(--f-ar)}
.bookcta .btn{border-color:var(--pearl);background:var(--pearl);color:var(--ink)}
.bookcta .btn:hover{background:var(--halo)}
.bookpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:2.4rem}
.bookpair .bookcta{margin-top:0;grid-template-columns:5rem minmax(0,1fr);gap:1rem;padding:1.1rem}
.bookpair .bk-title{font-size:1.2rem}
.bookpair .bk-line{font-size:.88rem;margin-block:.6rem .9rem}
html[dir=rtl] .bookpair .bk-line{font-size:1rem}
.bookpair .btn{min-height:42px;padding:.5rem 1.1rem;font-size:.9rem}

/* ---------- toc ---------- */
.toc{position:sticky;top:96px;padding-inline-start:1rem;border-inline-start:1px solid var(--pearl-a12);font:400 .88rem/1.5 var(--f-ui)}
.toc-h{margin-bottom:.8rem;font:600 .74rem var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
html[dir=rtl] .toc-h{letter-spacing:.02em;font-size:.92rem;text-transform:none}
.toc ol{margin:0;padding:0;list-style:none;display:grid;gap:.15rem}
.toc a{display:block;padding:.35rem 0;color:var(--mist);text-decoration:none;transition:color .3s}
.toc a:hover{color:var(--halo)}
.toc a.on{color:var(--acc)}

/* ---------- related ---------- */
.related{margin-top:3.5rem;padding:3rem 0 3.4rem;border-top:1px solid var(--pearl-a08);background:linear-gradient(180deg,var(--night),var(--abyss))}
.related-in{width:var(--wrap);margin-inline:auto}
.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.2rem}
.rel{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;padding:1.2rem;border:1px solid var(--pearl-a12);border-radius:16px;background:var(--glass);text-decoration:none;
  transition:border-color .35s,transform .5s var(--ease-out),background .35s}
.rel:hover{border-color:var(--pearl-a40);background:var(--glass-2);transform:translateY(-3px)}
.rel b{font:700 1.08rem/1.45 var(--f-display);color:var(--halo)}
html[dir=rtl] .rel b{line-height:1.65}
.rel-meta{margin-top:auto;font:400 .82rem var(--f-ui);color:var(--mist)}

/* ---------- hub ---------- */
.hub-hero{padding-bottom:2.2rem}
.hub-hero .hero-in,.rows,.hub-books{width:min(calc(100% - 2 * var(--gutter)),64rem);margin-inline:auto}
.hub-hero h1{max-width:18em}
.hub-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:2rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.55rem;min-height:40px;padding:.35rem 1rem;border:1px solid var(--pearl-a22);border-radius:999px;color:var(--fog);text-decoration:none;font:500 .92rem var(--f-ui);
  transition:background .3s,border-color .3s,color .3s}
.chip b{font-weight:500;color:var(--mist);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--pearl);color:var(--halo)}
.chip.on{background:var(--pearl);color:var(--ink);border-color:var(--pearl)}
.chip.on b{color:var(--slate)}
.hub-links{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:0;font:400 .88rem var(--f-ui);color:var(--mist)}
.hub-links a{color:var(--fog);text-underline-offset:.25em}
.hub-links a:hover{color:var(--halo)}
.rows{padding-block:1.4rem 1rem}
.row{position:relative;display:grid;grid-template-columns:10.5rem minmax(0,1fr) 2.5rem;gap:1.5rem;align-items:start;padding:1.7rem .6rem;border-top:1px solid var(--pearl-a12);transition:background .35s}
.row:last-of-type{border-bottom:1px solid var(--pearl-a12)}
.row[hidden]{display:none}
.row:hover{background:var(--pearl-a04)}
.row-meta{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;font:400 .84rem var(--f-ui);color:var(--mist)}
.row-main h2{font:700 clamp(1.25rem,1rem + 1vw,1.7rem)/1.35 var(--f-display);color:var(--halo);text-wrap:balance}
html[dir=rtl] .row-main h2{line-height:1.6}
.row-a{color:inherit;text-decoration:none}
.row-a::after{content:"";position:absolute;inset:0}
.row-main p{margin-top:.55rem;max-width:44em;font:400 .98rem/1.7 var(--f-ui);color:var(--fog)}
html[dir=rtl] .row-main p{font:400 1.12rem/1.9 var(--f-ar)}
.row-go{display:flex;align-items:center;justify-content:flex-end;align-self:center;color:var(--mist);transition:color .3s,transform .5s var(--ease-out)}
.row-go i{display:block;width:22px;height:1px;background:currentColor;position:relative}
.row-go i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
html[dir=rtl] .row-go{justify-content:flex-start}
html[dir=rtl] .row-go i{transform:scaleX(-1)}
.row:hover .row-go{color:var(--halo);transform:translateX(4px)}
html[dir=rtl] .row:hover .row-go{transform:translateX(-4px)}
.rows-empty{padding:2.5rem 0;text-align:center;color:var(--mist)}
.hub-books{margin-top:3rem;padding-bottom:1rem}
.hub-books-h{margin-bottom:-1.4rem;font:600 .78rem var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
html[dir=rtl] .hub-books-h{letter-spacing:.02em;font-size:1rem;text-transform:none}

/* ---------- footer ---------- */
.foot{margin-top:4rem;padding:3rem var(--pad) 1.6rem;border-top:1px solid var(--pearl-a12);background:var(--night)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;max-width:var(--maxw);margin-inline:auto}
.foot-id{max-width:26rem}
.foot-line{margin:.9rem 0 0;font:400 .92rem/1.6 var(--f-ui);color:var(--mist)}
.foot nav{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.6rem 1.6rem;font:400 .92rem var(--f-ui)}
.foot nav a{color:var(--fog);text-decoration:none}
.foot nav a:hover{color:var(--halo);text-decoration:underline;text-underline-offset:4px}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem 2rem;max-width:var(--maxw);margin:2rem auto 0;padding-top:1.1rem;border-top:1px solid var(--pearl-a08);font:400 .82rem var(--f-ui);color:var(--mist)}
.foot-bottom p{margin:0}
.page-article .foot{margin-top:0}

/* ---------- narrow screens ---------- */
@media (max-width:1100px){
  .post-grid{grid-template-columns:minmax(0,var(--col));justify-content:center}
  .toc{display:none}
}
@media (max-width:760px){
  .nav a.opt{display:none}
  .nav{gap:1rem}
  .rel-grid{grid-template-columns:1fr}
  .bookpair{grid-template-columns:1fr}
  .row{grid-template-columns:minmax(0,1fr);gap:.7rem;padding:1.4rem .1rem}
  .row-meta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem .9rem}
  .row-go{display:none}
}
@media (max-width:520px){
  .bar{gap:.6rem}
  .brand{font-size:.98rem;gap:.5rem}
  .meta-row>time+*::before,.meta-row>span+span::before{display:none}
  .brand span{overflow:hidden;text-overflow:ellipsis;max-width:11.5rem}
  .nav{font-size:.86rem}
  .lang{padding-inline:.8rem}
  .hero{padding-top:calc(env(safe-area-inset-top,0px) + 96px);padding-bottom:2rem}
  .post-grid{padding-top:2rem}
  html[dir=rtl] .prose{font-size:1.2rem}
  .prose{font-size:1.125rem}
  .takeaways{padding:1.1rem 1.1rem 1.2rem}
  .prose aside{padding:1.05rem 1.05rem 1.15rem}
  .author{flex-direction:column;gap:.9rem}
  .bookcta{grid-template-columns:5.6rem minmax(0,1fr);gap:1rem;padding:1.1rem}
  .bookpair .bookcta{grid-template-columns:4.6rem minmax(0,1fr)}
  .bk-title{font-size:1.25rem}
  .btn{min-height:44px}
  .rel{padding:1.05rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
  html.js .fade:not(.in),html.js .fade{opacity:1;transform:none}
}
@media print{
  .bar,.share,.toc,.related,.foot,.bookcta,.bookpair{display:none}
  body{background:#fff;color:#000}
  .hero{background:none;padding-top:0}
  .hero h1,.prose,.prose h2,.prose h3,.prose strong{color:#000}
}