/* almomani.me — shared styles for inner pages (v1). Tokens match the homepage. */
:root[data-theme="dark"]{
  --bg:#0A0B0D;--bg2:#101318;--card:#14171C;--card2:#191D23;
  --ink:#F3F2EF;--ink2:#A6AAB1;--dim:#6B7076;
  --line:rgba(243,242,239,.10);--line2:rgba(243,242,239,.055);
  --accent:#48D597;--del:#7AB8F5;--eng:#FF8A5B;
  --shadow:0 24px 70px -28px rgba(0,0,0,.9);
}
:root[data-theme="light"]{
  --bg:#FAFAF9;--bg2:#F1F1EF;--card:#FFF;--card2:#F7F7F5;
  --ink:#101214;--ink2:#52565C;--dim:#8A8E94;
  --line:rgba(16,18,20,.12);--line2:rgba(16,18,20,.06);
  --accent:#0F8D68;--del:#2A6FB0;--eng:#D2542A;
  --shadow:0 24px 60px -30px rgba(16,18,20,.30);
}
:root{--pad:clamp(20px,4.6vw,80px);--r:16px;--rl:24px;--e:cubic-bezier(.22,1,.36,1);--max:1180px}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-weight:300;line-height:1.6;overflow-x:hidden;transition:background .6s var(--e),color .6s var(--e)}
::selection{background:var(--accent);color:var(--bg)}
img{display:block;max-width:100%}
a{color:inherit}

/* ambient glow */
.glow{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow i{position:absolute;border-radius:50%;filter:blur(100px);display:block}
.g1{width:52vw;height:52vw;top:-20vw;left:-14vw;opacity:.13;
  background:radial-gradient(circle,var(--accent) 0%,transparent 68%)}
.g2{width:40vw;height:40vw;bottom:-16vw;right:-12vw;opacity:.10;
  background:radial-gradient(circle,var(--del) 0%,transparent 68%)}
main,nav,footer{position:relative;z-index:2}

/* type */
.mono{font-family:'IBM Plex Mono',monospace;font-weight:400;font-size:.66rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--dim)}
.mono b{color:var(--ink);font-weight:500}
h1,h2,h3{font-family:'Archivo',sans-serif;color:var(--ink)}
h1.big{font-weight:700;letter-spacing:-.055em;line-height:.9;font-size:clamp(2.6rem,8.4vw,7.2rem)}
h2.sec{font-weight:700;letter-spacing:-.045em;line-height:.98;font-size:clamp(1.8rem,4.2vw,3.4rem)}
h3{font-weight:600;letter-spacing:-.03em}
.lead{font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.66;color:var(--ink2);max-width:62ch}
.lead b{color:var(--ink);font-weight:400}
.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);font-family:'IBM Plex Mono';
  font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink2);text-decoration:none}
.pill s{width:6px;height:6px;border-radius:50%;background:var(--accent);text-decoration:none}
@media (max-width:400px){.pill{letter-spacing:.08em;padding:7px 12px;gap:8px}}

/* nav */
nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  display:flex;align-items:center;gap:8px;padding:7px 8px 7px 18px;border-radius:99px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--card) 72%,transparent);
  backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);
  box-shadow:var(--shadow);max-width:calc(100vw - 24px)}
nav>.mono{white-space:nowrap;text-decoration:none}
nav .links{display:flex;gap:4px}
nav .links a{text-decoration:none;padding:7px 12px;border-radius:99px;font-family:'IBM Plex Mono';
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2);transition:background .3s,color .3s}
nav .links a:hover,nav .links a[aria-current]{background:var(--card2);color:var(--ink)}
.tgl{border:0;background:var(--card2);color:var(--ink);cursor:pointer;width:34px;height:34px;
  border-radius:50%;display:grid;place-items:center;font-size:.8rem;transition:background .3s}
.tgl:hover{background:var(--accent);color:var(--bg)}
@media(max-width:980px){nav .links{display:none}}

/* layout */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.page-head{padding-top:calc(var(--pad) + 96px);padding-bottom:clamp(36px,6vh,64px)}
.page-head .pill{margin-bottom:clamp(18px,3vh,30px)}
.page-head .lead{margin-top:clamp(18px,3vh,28px)}
.crumbs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.block{padding-top:clamp(40px,7vh,84px);padding-bottom:clamp(40px,7vh,84px);border-top:1px solid var(--line2)}
.grid2{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
@media(max-width:900px){.grid2{grid-template-columns:1fr}}

/* prose */
.prose{max-width:66ch}
.prose p{font-size:clamp(1.02rem,1.25vw,1.14rem);line-height:1.75;color:var(--ink2)}
.prose p+p{margin-top:1.15em}
.prose p b,.prose p strong{color:var(--ink);font-weight:400}
.prose h2:not(.sec){font-size:clamp(1.3rem,2vw,1.7rem);letter-spacing:-.03em;margin:1.6em 0 .6em}
.prose .closer{color:var(--ink)}

/* photo */
.shot{position:relative;border-radius:var(--rl);overflow:hidden;border:1px solid var(--line2);
  box-shadow:var(--shadow);background:var(--card)}
.shot img{width:100%;height:auto}
.shot figcaption{position:absolute;left:14px;right:14px;bottom:14px;padding:10px 14px;border-radius:12px;
  background:rgba(10,11,13,.62);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.10);
  font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:#F3F2EF}

/* rows / cards */
.ev{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:20px 22px;
  border-radius:var(--r);border:1px solid var(--line2);background:var(--card);
  transition:border-color .4s,transform .5s var(--e);text-decoration:none}
a.ev:hover,.ev:hover{border-color:var(--accent)}
a.ev:hover{transform:translateX(5px)}
.ev h3{font-size:clamp(1.05rem,1.6vw,1.3rem)}
.ev h3 small{display:block;margin-top:4px;font-family:'IBM Plex Sans';font-weight:300;font-size:.9rem;
  letter-spacing:0;color:var(--ink2)}
.ev .ok{color:var(--accent)}
.stack{display:grid;gap:10px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.cols3{grid-template-columns:1fr}}
.vlink{display:inline-block;margin-top:10px;text-decoration:none;color:var(--accent)}
.vlink:hover{text-decoration:underline}
.note{margin-top:14px}

/* field cards (hub + related) */
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.fcard{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--rl);overflow:hidden;
  border:1px solid var(--line2);text-decoration:none;background:#14171C}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.9);
  transform:scale(1.06);transition:transform 1.2s var(--e),filter .8s var(--e)}
.fcard:hover img{transform:scale(1);filter:brightness(.88) saturate(1)}
.fcard::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,13,.2),rgba(10,11,13,0) 35%,rgba(10,11,13,.85))}
.fcard span{position:absolute;left:18px;right:18px;bottom:18px;z-index:1;color:#F3F2EF;
  font-family:'Archivo';font-weight:600;letter-spacing:-.03em;font-size:1.2rem;line-height:1.15}
.fcard span small{display:block;margin-top:6px;font-family:'IBM Plex Mono';font-weight:400;font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(243,242,239,.7)}
@media(max-width:700px){.fgrid{grid-template-columns:repeat(2,1fr)}.fcard span{left:12px;right:12px;bottom:12px;font-size:1rem}.fcard span small{display:none}}
.fhero{position:relative;border-radius:var(--rl);overflow:hidden;border:1px solid var(--line2);
  aspect-ratio:21/9;background:#14171C}
.fhero img{width:100%;height:100%;object-fit:cover;filter:brightness(.85)}
@media(max-width:700px){.fhero{aspect-ratio:4/3}}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.tags span{padding:7px 13px;border-radius:99px;border:1px solid var(--line);font-family:'IBM Plex Mono';
  font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}

/* journal */
.jlist{display:grid;gap:10px}
.jitem{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:22px 24px;
  border-radius:var(--r);border:1px solid var(--line2);background:var(--card);text-decoration:none;
  transition:border-color .4s,transform .5s var(--e)}
.jitem:hover{border-color:var(--accent);transform:translateY(-3px)}
.jitem h3{font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.2}
.jitem p{margin-top:8px;color:var(--ink2);font-size:.98rem;line-height:1.55;max-width:70ch}
.article .prose p{white-space:pre-line}
.article-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px}

/* bio box */
.bio{position:relative;padding:24px 26px;border-radius:var(--r);border:1px solid var(--line);background:var(--card)}
.bio p{color:var(--ink2);line-height:1.75}
.copy{margin-top:16px;border:1px solid var(--line);background:var(--card2);color:var(--ink);cursor:pointer;
  border-radius:99px;padding:9px 16px;font-family:'IBM Plex Mono';font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}
.copy:hover{border-color:var(--accent);color:var(--accent)}

/* cta + footer */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 20px;border-radius:99px;text-decoration:none;
  border:1px solid var(--line);background:var(--card);font-family:'IBM Plex Mono';font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);transition:border-color .4s,color .4s}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.primary:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)}
footer{border-top:1px solid var(--line2);margin-top:clamp(40px,8vh,90px)}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:clamp(30px,5vh,48px);padding-bottom:clamp(30px,5vh,48px)}
.foot .cols{display:flex;gap:clamp(24px,5vw,64px);flex-wrap:wrap}
.foot .col{display:grid;gap:8px;align-content:start}
.foot a{color:var(--ink2);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot .ar{font-family:'IBM Plex Sans Arabic';direction:rtl;color:var(--ink2)}

/* reveal */
.fade{opacity:0;transform:translateY(18px);transition:opacity .9s var(--e),transform .9s var(--e)}
.on .fade,.fade.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.fade{opacity:1;transform:none;transition:none}}