/* =====================================================================
   MUHAMMAD HOQUE — PORTFOLIO STYLESHEET
   =====================================================================
   Layout: editorial two-column. A sticky label sits in the left column
   while its content scrolls in the right. Restrained, typographic, no
   decorative metaphors — the content carries the page.

   Structure (search these banners):
     1.  TOKENS        – variables: color, type, spacing
     2.  BASE          – reset, body, shared primitives
     3.  LAYOUT        – the two-column section shell
     4.  HEADER        – fixed nav
     5.  INTRO         – name, role, summary, headline figures
     6.  EXPERIENCE    – roles
     7.  SELECTED WORK – expandable detail items
     8.  CAPABILITIES  – skill groups
     9.  CREDENTIALS   – certifications + education
    10.  HISTORY       – full career timeline
    11.  OUTSIDE WORK  – interests, reading
    12.  CONTACT
    13.  FOOTER
    14.  RESPONSIVE

   Accent (--accent) is used only for emphasis and figures, never for
   decoration. Everything else is neutral so the numbers stand out.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root{
  --bg:#0b0c0d;
  --panel:#121415;
  --panel-2:#171a1b;
  --line:rgba(236,240,242,0.09);
  --line-2:rgba(236,240,242,0.18);
  --ink:#eef1f3;
  --ink-2:#a2aaae;
  --ink-3:#646c70;
  --accent:#ffab56;
  --radius:8px;
  --wrap:1160px;
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;overflow-x:hidden;
  background:var(--bg);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
p{margin:0;}
h1,h2,h3{font-family:var(--display);margin:0;letter-spacing:-0.015em;line-height:1.15;}
::selection{background:var(--accent);color:#1a0e03;}
.wrap{width:min(100% - 48px,var(--wrap));margin-inline:auto;}

/* keyboard focus — visible ring for keyboard users only, so mouse
   clicks stay clean. Without this the site is very hard to navigate
   by keyboard, since every control is otherwise unhighlighted. */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}
/* skip link — first tab stop, lets keyboard and screen reader users
   jump past the nav straight into the page content. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:1100;
  background:var(--accent);color:#1a0e03;font-family:var(--mono);font-size:13px;
  padding:12px 18px;border-radius:0 0 6px 0;font-weight:600;
}
.skip:focus{left:0;}

.rise{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;}
.rise.seen{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* =====================================================================
   3. LAYOUT — editorial two-column section shell
   ===================================================================== */
.sect{padding:88px 0;border-top:1px solid var(--line);}
.sect-in{
  width:min(100% - 48px,var(--wrap));margin-inline:auto;
  display:grid;grid-template-columns:210px 1fr;gap:56px;align-items:start;
}
.sect-label{position:sticky;top:104px;}
.sect-label .num{
  font-family:var(--mono);font-size:11px;color:var(--ink-3);
  letter-spacing:0.12em;display:block;margin-bottom:8px;
}
.sect-label h2{font-size:19px;font-weight:600;}
.sect-label p{margin-top:12px;font-size:13.5px;color:var(--ink-3);line-height:1.55;}
.sect-body{min-width:0;}

/* =====================================================================
   4. HEADER
   ===================================================================== */
.hdr{position:fixed;top:0;left:0;right:0;z-index:1000;border-bottom:1px solid var(--line);}
.hdr::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,12,13,0.88);backdrop-filter:blur(12px);}
.hdr-in{
  width:min(100% - 48px,var(--wrap));margin-inline:auto;height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.mark{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:13px;}
.mark i{
  width:27px;height:27px;border:1px solid var(--accent);border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-size:10.5px;font-weight:600;color:var(--accent);
}
.nav{display:flex;gap:2px;align-items:center;}
.nav a{
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
  padding:8px 12px;border-radius:5px;transition:color .15s,background .15s;
}
.nav a:hover{color:var(--ink);background:rgba(255,255,255,0.05);}
.burger{
  display:none;background:none;border:1px solid var(--line-2);border-radius:6px;
  width:37px;height:37px;color:var(--ink);cursor:pointer;font-size:15px;
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:12.5px;padding:12px 20px;border-radius:6px;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s,background .15s,border-color .15s,color .15s;
}
.btn:hover{transform:translateY(-1px);}
.btn.fill{background:var(--accent);color:#1a0e03;font-weight:600;}
.btn.fill:hover{background:#ffbc78;}
.btn.line{border-color:var(--line-2);color:var(--ink);}
.btn.line:hover{border-color:var(--accent);color:var(--accent);}

/* =====================================================================
   5. INTRO
   ===================================================================== */
.intro{padding:164px 0 84px;}
.intro-grid{display:grid;grid-template-columns:1fr 0.82fr;gap:64px;align-items:center;}
.intro .eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:22px;
}
.intro h1{font-size:clamp(42px,7vw,80px);font-weight:700;letter-spacing:-0.035em;}
.intro .role{
  margin-top:20px;font-size:clamp(17px,2.2vw,21px);color:var(--ink);
  font-weight:500;max-width:34ch;line-height:1.4;
}
.intro .summary{margin-top:22px;font-size:16.5px;color:var(--ink-2);max-width:60ch;}
.intro-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:36px;}
.intro-meta{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:38px;
  font-family:var(--mono);font-size:12px;color:var(--ink-3);
}
.intro-meta .sep{opacity:0.5;}

/* fabric diagram — spine/leaf topology beside the intro copy.
   Chosen over a stock image because it depicts the actual layer this
   work happens on. Pure SVG, so it stays crisp and weighs nothing. */
.fabric{width:100%;height:auto;display:block;}
.fabric .fl{stroke:var(--line-2);stroke-width:1;fill:none;}
.fabric .fl-hot{stroke:var(--accent);stroke-width:1.2;fill:none;opacity:0.85;}
.fabric .fn{fill:var(--panel-2);stroke:var(--line-2);stroke-width:1.2;}
.fabric .fn-hot{fill:var(--bg);stroke:var(--accent);stroke-width:1.4;}
.fabric .fdot{fill:var(--accent);}
.fabric .flabel{
  font-family:var(--mono);font-size:9px;letter-spacing:0.18em;
  fill:var(--ink-3);text-transform:uppercase;
}
.fabric .frule{stroke:var(--line);stroke-width:1;}
/* slow traffic pulse along the highlighted paths */
.fabric .flow{
  stroke:var(--accent);stroke-width:1.6;fill:none;
  stroke-dasharray:5 128;
  animation:flow 4.6s linear infinite;
}
.fabric .flow.d2{animation-delay:1.6s;}
.fabric .flow.d3{animation-delay:3s;}
@keyframes flow{to{stroke-dashoffset:-133;}}
@media (prefers-reduced-motion:reduce){
  .fabric .flow{animation:none;opacity:0;}
}

/* headline figures */
.figures{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:76px;
  background:var(--line);border-block:1px solid var(--line);
}
.figures div{background:var(--bg);padding:28px 24px 26px;}
.figures b{
  display:block;font-family:var(--display);font-size:clamp(28px,3.2vw,38px);
  font-weight:700;letter-spacing:-0.025em;color:var(--ink);
}
.figures span{display:block;margin-top:8px;font-size:13px;color:var(--ink-3);line-height:1.5;}

/* =====================================================================
   6. EXPERIENCE
   ===================================================================== */
.job{padding:30px 0;border-bottom:1px solid var(--line);}
.job:first-child{padding-top:0;}
.job:last-child{border-bottom:none;padding-bottom:0;}
.job-hd{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:6px;}
.job-hd h3{font-size:18.5px;font-weight:600;}
.job-hd time{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap;}
.job .org{font-size:14.5px;color:var(--accent);margin-bottom:16px;}
.job ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14.5px;display:flex;flex-direction:column;gap:8px;}
.job li::marker{color:var(--ink-3);}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.chips span{
  font-family:var(--mono);font-size:10.5px;color:var(--ink-3);
  border:1px solid var(--line);border-radius:4px;padding:4px 9px;
}

/* =====================================================================
   7. SELECTED WORK
   ===================================================================== */
.item{border-bottom:1px solid var(--line);}
.item:last-child{border-bottom:none;}
.item summary{
  list-style:none;cursor:pointer;padding:22px 0;
  display:flex;align-items:baseline;gap:24px;
}
.item summary::-webkit-details-marker{display:none;}
.item-n{
  font-family:var(--display);font-size:21px;font-weight:700;color:var(--accent);
  flex:none;min-width:70px;letter-spacing:-0.02em;
}
.item-h{flex:1;min-width:0;}
.item-h h3{font-size:15.5px;font-weight:600;margin-bottom:4px;}
.item-h p{font-size:13.5px;color:var(--ink-3);}
.item-t{flex:none;font-family:var(--mono);font-size:17px;color:var(--ink-3);line-height:1;transition:color .15s;}
.item-t::after{content:"+";}
.item[open] .item-t::after{content:"–";}
.item[open] .item-t{color:var(--accent);}
.item-b{padding:0 0 26px 94px;display:flex;flex-direction:column;gap:16px;}
.item-r{display:flex;flex-direction:column;gap:4px;}
.item-r em{
  font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:0.13em;text-transform:uppercase;color:var(--ink-3);
}
.item-r p{font-size:14.5px;color:var(--ink-2);}

/* =====================================================================
   8. CAPABILITIES
   ===================================================================== */
.cap{padding:22px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:start;}
.cap:first-child{padding-top:0;}
.cap:last-child{border-bottom:none;padding-bottom:0;}
.cap h3{font-size:14.5px;font-weight:600;padding-top:2px;}
.cap .chips{margin-top:0;}

/* =====================================================================
   9. CREDENTIALS
   ===================================================================== */
.certs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px;}
.cert{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
  padding:19px 20px;display:flex;gap:14px;align-items:flex-start;
  transition:border-color .15s,background .15s;
}
.cert:hover{border-color:var(--line-2);background:var(--panel-2);}
.cert i{
  flex:none;width:36px;height:36px;border:1px solid var(--line-2);border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--mono);font-size:10px;font-weight:600;color:var(--accent);
}
.cert h3{font-size:14.5px;font-weight:600;margin-bottom:4px;}
.cert p{font-size:12.5px;color:var(--ink-3);line-height:1.5;}
.edu{margin-top:26px;padding-top:26px;border-top:1px solid var(--line);}
.edu h3{font-size:17px;font-weight:600;}
.edu .field{color:var(--ink-2);margin-top:4px;font-size:14.5px;}
.edu .school{color:var(--accent);margin-top:10px;font-size:14.5px;}
.edu .when{margin-top:6px;font-family:var(--mono);font-size:12px;color:var(--ink-3);}

/* =====================================================================
   10. HISTORY
   ===================================================================== */
.hist{display:flex;flex-direction:column;}
.hrow{
  display:grid;grid-template-columns:132px 1fr auto;gap:22px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.hrow:last-child{border-bottom:none;}
.hrow time{font-family:var(--mono);font-size:12px;color:var(--ink-3);}
.hrow h3{font-size:15.5px;font-weight:500;}
.hrow .org{font-size:13.5px;color:var(--ink-3);margin-top:2px;}
.hrow.now h3{color:var(--accent);}
.hrow .pill{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent);border:1px solid rgba(255,171,86,0.35);border-radius:20px;padding:3px 9px;
}

/* =====================================================================
   11. OUTSIDE WORK
   ===================================================================== */
.outside p{color:var(--ink-2);font-size:15px;max-width:62ch;}
.outside p + p{margin-top:13px;}
.shelf{margin-top:26px;padding-top:24px;border-top:1px solid var(--line);}
.shelf-hd{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:0.1em;text-transform:uppercase;margin-bottom:12px;}
.book{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);}
.book:last-child{border-bottom:none;}
.book b{font-weight:500;font-size:14.5px;}
.book span{font-family:var(--mono);font-size:12px;color:var(--ink-3);}

/* =====================================================================
   12. CONTACT
   ===================================================================== */
.contact-h{font-size:clamp(26px,3.8vw,38px);font-weight:600;max-width:19ch;letter-spacing:-0.025em;}
.contact-p{margin-top:18px;color:var(--ink-2);font-size:16px;max-width:56ch;}
.contact-do{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px;}
.contact-alt{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);}
.contact-alt a{color:var(--ink-2);border-bottom:1px solid var(--line-2);}
.contact-alt a:hover{color:var(--accent);border-color:var(--accent);}

/* =====================================================================
   13. FOOTER
   ===================================================================== */
.foot{border-top:1px solid var(--line);padding:28px 0;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.foot a:hover{color:var(--accent);}

/* =====================================================================
   14. RESPONSIVE
   ===================================================================== */
@media (max-width:940px){
  .sect-in{grid-template-columns:1fr;gap:28px;}
  .sect-label{position:static;}
  .sect-label p{display:none;}
  .figures{grid-template-columns:repeat(2,1fr);}
  .cap{grid-template-columns:1fr;gap:12px;}
  /* diagram drops below the copy and shrinks rather than squashing it */
  .intro-grid{grid-template-columns:1fr;gap:44px;}
  .fabric{max-width:400px;}
}
@media (max-width:760px){
  .nav{
    position:fixed;top:64px;left:0;right:0;bottom:0;z-index:999;background:var(--bg);
    flex-direction:column;align-items:stretch;padding:18px;gap:3px;
    border-top:1px solid var(--line);opacity:0;transform:translateY(-8px);
    pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  }
  .nav.open{opacity:1;transform:none;pointer-events:auto;}
  .nav a{padding:16px 8px;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink);}
  .burger{display:block;}
  .sect{padding:60px 0;}
  .intro{padding:128px 0 56px;}
  .intro-cta{flex-direction:column;align-items:stretch;}
  .item summary{gap:16px;}
  .item-n{min-width:56px;font-size:18px;}
  .item-b{padding-left:0;}
  .hrow{grid-template-columns:1fr;gap:3px;}
  .hrow time{order:-1;}
}
@media (max-width:480px){
  .figures{grid-template-columns:1fr;}
  .mark span{display:none;}
  /* diagram detail is illegible at phone width — drop it entirely */
  .fabric{display:none;}
  .intro-grid{gap:0;}
}

/* =====================================================================
   15. PRINT — makes the page a clean, readable PDF/printout.
   Anyone hitting Ctrl+P (or "Save as PDF") gets a usable document
   instead of a dark screenshot with hidden collapsed content.
   ===================================================================== */
@media print{
  :root{
    --bg:#fff;--panel:#fff;--panel-2:#fff;
    --ink:#111;--ink-2:#333;--ink-3:#666;
    --line:#ddd;--line-2:#bbb;--accent:#8a5a12;
  }
  body{background:#fff;color:#111;font-size:11pt;line-height:1.45;}
  .hdr,.burger,.nav,.skip,.intro-cta,.contact-do,.foot a,.fabric{display:none !important;}
  .intro-grid{display:block;}
  .rise{opacity:1 !important;transform:none !important;}
  .intro{padding:0 0 18pt;}
  .intro h1{font-size:26pt;}
  .intro .role{font-size:13pt;margin-top:8pt;}
  .intro .summary{font-size:10.5pt;margin-top:8pt;}
  .sect{padding:16pt 0;border-top:1px solid #ddd;break-inside:avoid;}
  .sect-in{display:block;}
  .sect-label{position:static;margin-bottom:10pt;}
  .sect-label p{display:none;}
  .sect-label h2{font-size:13pt;}
  .figures{grid-template-columns:repeat(4,1fr);margin-top:16pt;}
  .figures div{padding:8pt;}
  .figures b{font-size:15pt;}
  .job{padding:10pt 0;break-inside:avoid;}
  .job ul{font-size:10pt;}
  .chips span{border-color:#ccc;color:#444;}
  /* force every collapsed case study open so nothing is lost in print */
  .item[open] .item-b,.item .item-b{display:flex !important;}
  .item-t{display:none;}
  .item summary{padding:8pt 0;}
  .certs{grid-template-columns:repeat(3,1fr);}
  .cert{break-inside:avoid;}
  a{color:#111;text-decoration:none;}
  /* print the destination of external links, since they aren't clickable on paper */
  .cert[href]::after{content:" (" attr(href) ")";font-size:7pt;color:#777;word-break:break-all;}
}