/* about.css — page-specific rules only.
   The design system (tokens, fonts, reset, nav, buttons, switch, scrollbar,
   progress bar, back-to-top) lives in base.css and is no longer duplicated here. */

/* tokens come from base.css - this file must not redeclare them */

body{background:var(--bg);color:var(--txt);font-family:'Instrument Sans',system-ui,sans-serif;line-height:1.75;overflow-x:clip}
h1,h2{font-family:'Instrument Serif',Georgia,serif;line-height:1.15}
h3,h4{font-family:'Instrument Sans',sans-serif;line-height:1.25}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{font-family:Qomraa,Tajawal,sans-serif}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
.wrap{max-width:940px;margin:0 auto;padding:0 24px}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:
  linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
  linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:44px 44px}
[data-theme="light"] body::before{background:
  linear-gradient(rgba(var(--shadow-rgb),.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(var(--shadow-rgb),.045) 1px,transparent 1px);background-size:44px 44px}
.cv-btn{height:32px;display:inline-flex;align-items:center;border-radius:var(--r-pill);border:1px solid var(--line);
  background:var(--card2);color:var(--mut);font-family:var(--mono);font-size:12.5px;padding:0 14px;
  transition:.25s;flex:none;white-space:nowrap}
.cv-btn:hover{color:var(--acc);border-color:var(--acc)}
@media(max-width:1040px){ .cv-btn{display:none} }
/* mobile nav now lives entirely in base.css — no page-level copy to drift */
/* the CV page carries one control more than the main site (PDF); drop its label on
   small screens so the bar stays one row like everywhere else */
@media(max-width:620px){ nav .btn{padding:9px 12px;font-size:12.5px} }
@media(max-width:430px){ .brand-name{display:none} }
/* the shared nav is fixed; give the page room under it */
/* header */
.head{padding:132px 0 40px;display:grid;grid-template-columns:132px 1fr;gap:30px;align-items:center}
.head .pic{width:132px;height:132px;border-radius:50%;overflow:hidden;border:3px solid var(--acc);
  box-shadow:var(--sh-2)}
.head .pic img{width:100%;height:100%;object-fit:cover}
.head h1{font-size:clamp(30px,5vw,44px);font-weight:800}
.role{color:var(--acc2);font-family:var(--mono);font-size:15px;margin-top:8px}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;color:var(--mut);font-size:14px}
.meta span{display:inline-flex;align-items:center;gap:7px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc)}
@media(max-width:640px){.head{grid-template-columns:1fr;gap:20px;padding:104px 0 28px}
  .head .pic{width:104px;height:104px}}
section.blk{padding:34px 0;border-top:1px solid var(--line)}
.blk h2{font-size:13px;font-family:var(--mono);color:var(--acc);text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:22px;font-weight:600}
.lead{font-size:17px;color:var(--txt);max-width:70ch}
.lead + .lead{margin-top:14px}
.muted{color:var(--mut)}
/* credentials */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.cred{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px}
.cred b{display:block;font-family:'Instrument Sans',Qomraa,Tajawal;font-size:24px;color:var(--acc);
  direction:ltr;unicode-bidi:isolate}
.cred span{color:var(--mut);font-size:13px;display:block;margin-top:3px}
.cred a{color:var(--acc2);font-size:12px;font-family:var(--mono);direction:ltr;display:inline-block;margin-top:8px}
.cred a:hover{text-decoration:underline}
/* timeline */
.tl{display:grid;gap:0}
.tl .row{display:grid;grid-template-columns:118px 1fr;gap:22px;padding:20px 0}
.tl .row + .row{border-top:1px solid var(--line)}
.tl .when{font-family:var(--mono);font-size:12.5px;color:var(--acc);direction:ltr;unicode-bidi:isolate;padding-top:3px}
.tl h3{font-size:17px;margin-bottom:5px}
.tl p{color:var(--mut);font-size:14.5px}
@media(max-width:640px){.tl .row{grid-template-columns:1fr;gap:6px;padding:16px 0}}
/* skills */
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.sk h3{font-size:14px;margin-bottom:11px}
.sk ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.sk li{font-family:var(--mono);font-size:12px;color:var(--mut);background:var(--card2);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;direction:ltr}
.sk li.pri{color:var(--acc2);border-color:rgba(var(--acc-rgb),.3);background:rgba(var(--acc-rgb),.08)}
/* project list */
.plist{display:grid;gap:12px}
.pitem{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 20px;transition:.22s}
.pitem:hover{border-color:rgba(var(--acc-rgb),.4)}
.pitem h3{font-size:16px}
.pitem p{color:var(--mut);font-size:13.5px;margin-top:4px}
.pitem .go{font-family:var(--mono);font-size:12px;color:var(--acc2);white-space:nowrap;direction:ltr}
@media(max-width:640px){.pitem{grid-template-columns:1fr}}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--acc);color:var(--acc-ink);font-weight:700;
  font-size:14px;padding:12px 21px;border-radius:var(--r-sm);border:0;cursor:pointer;font-family:inherit;transition:.22s}
.btn:hover{background:var(--acc2);transform:translateY(-2px)}
.btn.ghost:hover{border-color:var(--acc);color:var(--acc);transform:none}
footer{padding:30px 0 46px;border-top:1px solid var(--line);color:var(--mut);
  font-family:var(--mono);font-size:12.5px;text-align:center;direction:ltr}
/* same Arabic-in-mono bug as the main site: JetBrains Mono has no Arabic glyphs, so
   the role line, section labels and timeline dates were falling back to a system face.
   Latin-only chrome (domains, tech tags, project links, footer) stays mono. */
html[lang="ar"] .role,
html[lang="ar"] .blk h2,
html[lang="ar"] .tl .when{font-family:Qomraa,Tajawal,sans-serif;letter-spacing:0}
/* closing CTA — same card language as the site's contact block */
.cv-end{border-top:1px solid var(--line)}
.endcard{background:linear-gradient(140deg,var(--card2),var(--card));border:1px solid var(--line);
  border-radius:22px;padding:34px 36px;display:grid;grid-template-columns:1fr auto;gap:26px;
  align-items:center;position:relative;overflow:hidden}
[data-theme="light"] .endcard{background:linear-gradient(140deg,var(--card2),var(--bg2))}
.endcard::after{content:"";position:absolute;inset-inline-end:-90px;top:-90px;width:260px;height:260px;
  border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 65%);pointer-events:none}
.endcard h3{font-size:22px;margin-bottom:6px}
.endcard p{color:var(--mut);font-size:14.5px;max-width:46ch}
.end-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:2}
.end-actions .btn svg{width:16px;height:16px}
@media(max-width:720px){.endcard{grid-template-columns:1fr;padding:26px 22px}}
/* a slot the owner fills; hidden until it has content */
.todo{background:rgba(var(--acc-rgb),.07);border:1px dashed rgba(var(--acc-rgb),.35);border-radius:var(--r-sm);
  padding:15px 18px;color:var(--mut);font-size:13.5px}
html:not([data-dev]) .todo{display:none}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .btn:hover{transform:none}
}
/* print / save-as-PDF — this IS the downloadable CV */
@media print{
  @page{margin:14mm}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.5}
  body::before,nav,.skip,.cta-row,.cv-end,footer,.todo{display:none!important}
  .wrap{max-width:none;padding:0}
  .head{padding:0 0 14px;grid-template-columns:92px 1fr;gap:18px}
  .head .pic{width:92px;height:92px;border-color:#000;box-shadow:none}
  h1{font-size:22pt}
  .role,.cred b,.tl .when,.blk h2{color:#000!important}
  section.blk{padding:14px 0;border-top:1px solid #ccc;break-inside:avoid}
  .cred,.pitem,.sk li{background:#fff!important;border-color:#bbb!important}
  .muted,.tl p,.pitem p,.cred span,.sk li{color:#333!important}
  /* anything still on var(--txt) renders near-white on the printed page */
  .lead,.tl h3,.pitem h3,h1,h2,h3,h4,body{color:#000!important}
  .cred b{color:#000!important}
  a{color:#000!important}
  .creds{grid-template-columns:repeat(4,1fr)}
  .tl .row{break-inside:avoid}
}
/* ---- pitem cards v2: lift + ring + glow ---- */
.pitem{transition:border-color .22s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.pitem:hover{border-color:rgba(var(--acc-rgb),.4);transform:translateY(-4px);box-shadow:0 14px 34px rgba(var(--shadow-rgb),.35),0 0 0 1px rgba(var(--acc-rgb),.25),0 0 30px rgba(var(--acc-rgb),.1)}