/* =========================================================================
   Shaikh Amir Hussain — Portfolio
   Aesthetic: dark terminal "code & AI" — red-on-black, syntax-highlight
   accents on deep space
   Type: IBM Plex Sans (display) · Schibsted Grotesk (sans) · JetBrains Mono
   ========================================================================= */

/* ----- Tokens ----------------------------------------------------------- */
:root{
  --paper:#0B0F14;          /* deep space, page */
  --paper-2:#10161F;        /* raised panel   */
  --paper-3:#141C28;        /* deeper panel   */
  --ink:#E6EDF3;            /* terminal white */
  --ink-2:#9DAFC2;          /* muted          */
  --ink-3:#5E7288;          /* faint          */
  --accent:#FF3B30;         /* signal red     */
  --accent-deep:#B3261E;
  --accent-rgb:255,59,48;
  --on-accent:#1B0403;      /* dark text for on-accent surfaces */
  --pine:#4ADE80;           /* git-add / success · green  */
  --gold:#F5B02B;           /* warning / pending · amber  */
  --blue:#8B93F8;           /* function/type token · violet */
  --rule:#3D4E63;
  --line:rgba(230,237,243,.09);
  --line-2:rgba(230,237,243,.20);
  --paper-rgb:11,15,20;
  --ink-rgb:230,237,243;
  --sh-rgb:2,8,14;          /* shadows stay dark on the dark theme */
  color-scheme:dark;

  --display:"IBM Plex Sans","Schibsted Grotesk",-apple-system,sans-serif;
  --signature:"Caveat",cursive;
  --sans:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --maxw:1180px;
  --gutter:clamp(20px,5vw,72px);
  --radius:2rem;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ----- Reset ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:clamp(16px,1.05vw,18px);
  font-weight:420;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* graph-paper grid + grain atmosphere */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 0%,transparent 78%);
  opacity:.5;
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ambient code wallpaper — a faint wall of real-looking code sits behind every
   page (built by main.js so it's one shared string, not duplicated per page) */
.code-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;user-select:none;overflow:hidden;
  font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.02em;
  color:var(--ink);opacity:.05;white-space:pre-wrap;word-break:break-word;padding:60px;
  background-image:repeating-linear-gradient(rgba(230,237,243,.03) 0px,rgba(230,237,243,.03) 1px,transparent 1px,transparent 3px);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 15%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 15%,#000 0%,transparent 78%);
}
@media (prefers-reduced-motion:no-preference){
  .code-bg{animation:codedrift 100s linear infinite}
}
@keyframes codedrift{to{transform:translateY(-3%)}}
main,header,footer{position:relative;z-index:1}

/* ----- Type ------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.02em;font-optical-sizing:auto}
h1{font-size:clamp(2.1rem,4.9vw,4rem);font-weight:700}
h2{font-size:clamp(2rem,4.6vw,3.5rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.01em}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
p code,.lede code,.pull code{font-family:var(--mono);font-size:.86em;font-weight:500;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:.45em;padding:.12em .42em}
::selection{background:var(--accent);color:var(--on-accent)}

.signature{
  font-family:var(--signature);font-weight:700;font-style:normal;
  font-size:1.22em;line-height:1.3;letter-spacing:.01em;
  display:inline-block;padding:.04em .18em .1em .02em;
}
.accent{color:var(--accent)}
.u-mono{font-family:var(--mono);font-weight:500}

/* eyebrow / section index labels */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);display:inline-block}
.eyebrow.center{justify-content:center}

/* ----- Layout ----------------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:clamp(64px,9vw,140px)}
.rule{height:1px;background:var(--line);border:0}
.rule-ink{height:2px;background:var(--rule)}

.sec-head{margin-bottom:clamp(36px,5vw,64px)}
.sec-head h2{margin-top:14px;max-width:16ch}
.sec-head .lede{margin-top:16px;max-width:54ch;color:var(--ink-2);font-size:1.08rem}
.idx{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--ink-3)}
.idx::before{content:"// ";color:var(--ink-3)}

/* ----- Buttons / links -------------------------------------------------- */
.btn{
  --bg:var(--ink);--fg:var(--paper);
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--mono);font-weight:600;font-size:.86rem;letter-spacing:0;
  padding:.85em 1.35em;border-radius:100px;border:1.5px solid var(--ink);
  background:var(--bg);color:var(--fg);cursor:pointer;
  transition:transform .35s var(--ease),background .3s,color .3s,box-shadow .35s;
  will-change:transform;position:relative;
}
.btn svg{width:1.05em;height:1.05em}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(var(--sh-rgb),.5)}
.btn-accent{--bg:var(--accent);--fg:var(--on-accent);border-color:var(--accent)}
.btn-accent:hover{box-shadow:0 12px 34px -10px rgba(var(--accent-rgb),.55)}
.btn-accent::before{content:"$";opacity:.6;font-weight:400}
.btn-ghost{--bg:transparent;--fg:var(--ink)}
.btn-ghost:hover{--bg:var(--ink);--fg:var(--paper)}

.link-u{position:relative;font-weight:600;display:inline-flex;align-items:center;gap:.4em}
.link-u::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1.5px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}
.link-u:hover::after{transform:scaleX(1);transform-origin:left}
.link-u .arr{transition:transform .35s var(--ease)}
.link-u:hover .arr{transform:translate(3px,-3px)}

/* ----- Header / masthead ------------------------------------------------ */
.topbar{position:sticky;top:16px;z-index:60;padding-inline:var(--gutter)}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:24px;height:60px;
  max-width:calc(var(--maxw) - var(--gutter)*2);margin-inline:auto;padding-inline:22px;
  background:rgba(var(--paper-rgb),.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:9999px;
  box-shadow:0 10px 30px -18px rgba(var(--sh-rgb),.35);transition:box-shadow .4s,background .4s;
}
.topbar.stuck .wrap{background:rgba(var(--paper-rgb),.96);box-shadow:0 14px 36px -16px rgba(var(--sh-rgb),.4)}
.brand{display:inline-flex;align-items:center;gap:.6em;font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.02em}
.brand .mark{width:30px;height:30px;flex:none}
.brand b{font-weight:600}
.brand .tld{color:var(--accent)}
.nav{display:flex;align-items:center;gap:clamp(14px,2.4vw,26px)}
.nav a.navlink{font-family:var(--mono);font-size:.74rem;letter-spacing:0;color:var(--ink-2);transition:color .25s;position:relative;white-space:nowrap}
.nav a.navlink:hover,.nav a.navlink.active{color:var(--ink)}
.nav a.navlink.active::before{content:"";position:absolute;left:-12px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}
.nav .btn{padding:.6em 1.05em;font-size:.85rem}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle .nt-bar{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nt-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:2px;background:var(--accent);width:0;z-index:70;transition:width .1s linear}

/* ----- Hero ------------------------------------------------------------- */
.hero{padding-top:clamp(30px,5vw,54px);padding-bottom:clamp(40px,6vw,80px);position:relative}
.edition{
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:14px;border-bottom:2px solid var(--rule);margin-bottom:clamp(30px,5vw,52px)
}
.edition .dot{display:inline-flex;align-items:center;gap:.5em}
.edition .pulse{width:7px;height:7px;border-radius:50%;background:var(--pine);position:relative}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:center}
.hero h1{margin:.32em 0 .1em}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:inline-block}
.hero .lede{font-size:clamp(1.05rem,1.5vw,1.28rem);color:var(--ink-2);max-width:46ch;margin-top:1.1em}
.hero .lede b{color:var(--ink);font-weight:600}

/* animated equation */
.equation{display:flex;align-items:center;gap:.7em;flex-wrap:wrap;margin-top:1.6em;font-family:var(--mono);font-size:.82rem;letter-spacing:.04em;color:var(--ink-2)}
.equation .term{padding:.5em .85em;border:1px solid var(--line-2);border-radius:8px;background:var(--paper-2);white-space:nowrap}
.equation .op{color:var(--accent);font-weight:700}

.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:2em}
.hero-soc{display:flex;gap:10px;margin-top:1.5em}
.soc{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;color:var(--ink);transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s}
.soc svg{width:19px;height:19px}
.soc:hover{transform:translateY(-3px);background:var(--ink);color:var(--paper);border-color:var(--ink)}
.soc.wa:hover{background:#25D366;border-color:#25D366;color:#0b3d20}

/* hero chart panel */
.chartcard{
  background:linear-gradient(165deg,var(--paper-2),var(--paper-3));
  border:1px solid var(--line-2);border-radius:var(--radius);
  padding:22px 22px 16px;position:relative;box-shadow:0 30px 60px -40px rgba(var(--sh-rgb),.55);
}
.chartcard .cc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.chartcard .cc-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.chartcard .cc-dots{display:flex;gap:5px}
.chartcard .cc-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.chartcard .cc-dots i:first-child{background:var(--accent)}
/* hero terminal */
.term-body{font-family:var(--mono);font-size:.82rem;line-height:1.7;padding-top:6px}
.term-body .term-line{color:var(--ink);margin:0}
.term-body .prompt{color:var(--pine);font-weight:700;margin-right:.55em}
.term-body .term-out{color:var(--ink-2);margin:.1em 0 .95em;padding-left:1.4em}
.term-body .term-out.accent{color:var(--accent)}
.term-body .term-out.good{color:var(--pine)}
.term-body .cmd{color:var(--pine)}
.term-body .flag{color:var(--ink-3)}
.term-body .arg{color:var(--gold)}
.term-body .var{color:var(--blue)}
.term-caret{display:inline-block;width:.5em;height:1em;background:var(--accent);margin-left:.3em;vertical-align:-.15em;animation:caret 1.1s steps(1) infinite}

/* ----- Interactive: diagnose your problem ---------------------------------- */
.fixit{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(20px,3vw,44px);align-items:stretch}
.fixit-picks{display:flex;flex-direction:column;gap:10px}
.fixit-pick{font-family:var(--mono);font-size:.92rem;text-align:left;padding:.95em 1.25em;
  border:1px solid var(--line-2);border-radius:12px;background:var(--paper-2);color:var(--ink);
  cursor:pointer;transition:border-color .3s,background .3s,transform .3s,box-shadow .3s}
.fixit-pick::before{content:"▸ ";color:var(--ink-3);transition:color .3s}
.fixit-pick:hover{border-color:rgba(var(--accent-rgb),.4);transform:translateX(4px)}
.fixit-pick.active{border-color:var(--accent);background:var(--paper-3);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.28)}
.fixit-pick.active::before{color:var(--accent)}
.fixit-out{font-family:var(--mono);font-size:.92rem;line-height:1.85;background:var(--paper-2);
  border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(24px,3vw,34px);
  min-height:240px;display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 30px 60px -40px rgba(var(--sh-rgb),.55)}
.fixit-idle{color:var(--ink-3)}
.fixit-out .q{color:var(--accent);display:block;margin-bottom:.7em}
.fixit-out .a{color:var(--ink);display:block;margin-bottom:1em;font-family:var(--sans);font-size:1.02rem;line-height:1.6}
.fixit-out .proof{color:var(--pine);display:block;margin-bottom:1.5em}
.fixit-out .proof::before{content:"✓ "}
.fixit-cta{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;color:var(--accent);width:fit-content}
.fixit-cta .arr{transition:transform .35s var(--ease)}
.fixit-cta:hover .arr{transform:translate(3px,-3px)}
.fixit-custom{margin-top:6px;padding-top:16px;border-top:1px dashed var(--line)}
.fixit-custom-label{display:block;font-family:var(--mono);font-size:.76rem;color:var(--ink-3);margin-bottom:.7em}
.fixit-input-row{display:flex;gap:10px}
.fixit-input{flex:1;min-width:0;font-family:var(--mono);font-size:.86rem;padding:.85em 1em;
  border:1px solid var(--line-2);border-radius:10px;background:var(--paper-2);color:var(--ink)}
.fixit-input::placeholder{color:var(--ink-3)}
.fixit-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3)}
.fixit-submit{font-family:var(--mono);font-weight:700;font-size:.84rem;padding:.85em 1.3em;border-radius:10px;
  border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;white-space:nowrap;
  transition:transform .3s,box-shadow .3s}
.fixit-submit:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(var(--accent-rgb),.5)}
@media (max-width:760px){.fixit{grid-template-columns:1fr}}
@media (max-width:480px){.fixit-input-row{flex-direction:column}}

/* floating chips */
.chip{position:absolute;font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;padding:.45em .7em;background:var(--paper);border:1px solid var(--line-2);border-radius:10px;box-shadow:0 8px 20px -12px rgba(var(--sh-rgb),.5);white-space:nowrap;transition:transform .2s linear}
.chip.c1{top:-14px;right:8%;color:var(--pine)}
.chip.c2{bottom:34px;left:-16px;color:var(--accent)}
.chip .ar{color:var(--pine)}

/* ----- Stats band ------------------------------------------------------- */
.stats{background:var(--paper-2);color:var(--ink);position:relative;z-index:1;border-block:1px solid var(--line)}
.stats .grid{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{padding:clamp(26px,3.4vw,46px) clamp(18px,2.4vw,32px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat:nth-child(3n){border-right:0}
.stat:nth-child(n+4){}
.stat .num{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.8vw,2.1rem);line-height:.95;letter-spacing:-.03em;display:flex;align-items:baseline;gap:.06em}
.stat .num .suf{color:var(--accent);font-size:.62em}
.stat .cap{font-family:var(--sans);font-size:.92rem;color:var(--ink-2);margin-top:.5em;max-width:24ch}
.stat .tick{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.7em}

/* ----- About ------------------------------------------------------------ */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,72px);align-items:start}
.portrait{position:relative}
.portrait .frame{aspect-ratio:4/5;border:1px solid var(--line-2);border-radius:var(--radius);background:
  radial-gradient(120% 80% at 30% 10%,var(--paper-2),var(--paper-3));overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative}
.portrait .frame::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:26px 26px;opacity:.6}
.portrait .mono-mark{font-family:var(--display);font-weight:600;font-size:clamp(5rem,12vw,9rem);color:var(--ink);position:relative;letter-spacing:-.04em}
.portrait .tag{position:absolute;left:14px;bottom:14px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(var(--paper-rgb),.8);padding:.4em .7em;border:1px solid var(--line-2);border-radius:6px}
.about-body p{font-size:clamp(1.05rem,1.45vw,1.25rem);color:var(--ink-2);margin-bottom:1em}
.about-body p .lead{color:var(--ink);font-weight:500}
.about-body .pull{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.15;color:var(--ink);margin:.6em 0;letter-spacing:-.02em}
.about-body .pull em{color:var(--accent);font-style:normal}
.sign{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-3);margin-top:1.4em;display:flex;gap:.6em;align-items:center}
.sign::before{content:"";width:30px;height:1px;background:var(--ink-3)}

/* ----- Now / dispatch --------------------------------------------------- */
.now-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,28px)}
.dispatch{border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(22px,3vw,34px);background:var(--paper-2);position:relative;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .4s}
.dispatch:hover{transform:translateY(-5px);box-shadow:0 26px 50px -34px rgba(var(--sh-rgb),.5),inset 0 1px 0 rgba(255,255,255,.05);border-color:var(--line-2)}
.dispatch.feature{grid-column:1/-1;background:linear-gradient(135deg,var(--paper-3),var(--paper-2));color:var(--ink);
  border-color:rgba(var(--accent-rgb),.3);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12),0 30px 60px -40px rgba(var(--sh-rgb),.7)}
.dispatch.feature .d-kicker,.dispatch.feature .d-meta{color:var(--ink-3)}
.dispatch.feature h3{color:var(--ink)}
.dispatch.feature p{color:var(--ink-2)}
.dispatch.feature .link-u{color:var(--ink)}
.d-kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.6em}
.d-kicker .live{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25)}
@media (prefers-reduced-motion:no-preference){.d-kicker .live{animation:statusping 6.5s ease-out infinite}}
.dispatch h3{margin:.7em 0 .35em;font-size:clamp(1.35rem,2.4vw,1.9rem)}
.dispatch p{color:var(--ink-2);margin-bottom:1em;max-width:52ch}
.dispatch .d-meta{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:1em;display:flex;gap:14px;flex-wrap:wrap}
.d-links{display:flex;gap:18px;flex-wrap:wrap}
.feature-row{display:grid;grid-template-columns:1.3fr .7fr;gap:34px;align-items:center}
.draftly-vis{border:1px solid var(--line-2);border-radius:10px;padding:16px;background:rgba(0,0,0,.22);font-family:var(--mono);font-size:.8rem}
.draftly-vis .row{display:flex;gap:8px;align-items:flex-start;margin-bottom:10px;opacity:.55}
.draftly-vis .row.good{opacity:1;color:var(--ink)}
.draftly-vis .row .t{flex:none;color:var(--accent);font-weight:700}
.draftly-vis .row.good .t{color:var(--pine)}

/* ----- Work / case studies --------------------------------------------- */
.work-list{display:grid;gap:clamp(16px,2vw,22px)}
.case{
  display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(22px,3vw,38px);border:1px solid var(--line);border-radius:var(--radius);
  background:var(--paper-2);transition:transform .5s var(--ease),box-shadow .5s,border-color .4s,background .4s;position:relative;overflow:hidden;
}
.case::after{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--accent);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease)}
.case:hover{transform:translateY(-4px);box-shadow:0 30px 55px -38px rgba(var(--sh-rgb),.55),inset 0 1px 0 rgba(255,255,255,.05);border-color:var(--line-2)}
.case:hover::after{transform:scaleY(1);transform-origin:top}
.case .no{font-family:var(--mono);font-size:.9rem;color:var(--ink-3);letter-spacing:.05em}
.case .c-main h3{margin-bottom:.3em}
.case .c-main .role{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.7em;display:block}
.case .c-main p{color:var(--ink-2);font-size:.98rem;max-width:46ch}
.case .c-main .stack{display:flex;gap:7px;flex-wrap:wrap;margin-top:.9em}
.case .c-main .stack span{font-family:var(--mono);font-size:.64rem;letter-spacing:.04em;padding:.35em .6em;border:1px solid var(--line-2);border-radius:6px;color:var(--ink-2)}
.case .c-metric{text-align:right}
.case .c-metric .big{font-family:var(--display);font-weight:600;font-size:clamp(2rem,3.6vw,3rem);line-height:1;letter-spacing:-.03em;color:var(--ink)}
.case .c-metric .big .suf{color:var(--accent);font-size:.6em}
.case .c-metric .ml{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:.6em;display:block}
.case .c-metric .links{display:flex;gap:14px;justify-content:flex-end;margin-top:1em}
.case .c-metric .bars{display:flex;gap:4px;justify-content:flex-end;align-items:flex-end;height:40px;margin-top:1em}
.case .c-metric .bars i{width:9px;background:var(--line-2);border-radius:2px 2px 0 0;height:20%;transition:height .8s var(--ease-out)}
.case.in .c-metric .bars i{height:var(--h)}
.case .c-metric .bars i:last-child{background:var(--accent)}

/* ----- Timeline --------------------------------------------------------- */
.timeline{position:relative;border-left:2px solid var(--rule);margin-left:8px}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 240px;gap:clamp(24px,4vw,48px);align-items:center;padding:0 0 clamp(34px,5vw,56px) clamp(28px,4vw,46px)}
.tl-item:last-child{padding-bottom:0}
.tl-item .challenge,.tl-item .result{color:var(--ink-2);margin-top:.55em;max-width:60ch;font-size:.98rem}
.tl-item .challenge b{color:var(--accent)}
.tl-item .result b{color:var(--pine)}
.tl-item::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--ink);transition:background .3s,transform .3s}
.tl-item:hover::before{background:var(--accent);border-color:var(--accent);transform:scale(1.2)}
.tl-item .when{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tl-item .role{font-family:var(--display);font-weight:560;font-size:clamp(1.3rem,2.3vw,1.8rem);margin:.25em 0 .1em;letter-spacing:-.01em}
.tl-item .org{font-weight:600;color:var(--ink)}
.tl-item .loc{color:var(--ink-3);font-size:.9rem;font-family:var(--mono);letter-spacing:.04em}
.tl-item p{color:var(--ink-2);margin-top:.6em;max-width:62ch}
.tl-item .wins{display:flex;gap:10px 26px;flex-wrap:wrap;margin-top:.9em}
.tl-item .wins span{font-size:.86rem;color:var(--ink-2);display:inline-flex;align-items:baseline;gap:.5em}
.tl-item .wins b{font-family:var(--mono);color:var(--pine);font-weight:700;font-size:.9rem}

/* ----- Toolkit ---------------------------------------------------------- */
.kit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,40px) clamp(28px,5vw,72px)}
.kit h3{font-family:var(--display);font-size:1.15rem;display:flex;align-items:center;gap:.6em;margin-bottom:1em;padding-bottom:.7em;border-bottom:1px solid var(--line)}
.kit h3 .n{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.1em}
.kit ul{list-style:none;display:flex;flex-wrap:wrap;gap:9px}
.kit li{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;padding:.5em .8em;border:1px solid var(--line-2);border-radius:8px;color:var(--ink-2);background:var(--paper-2);transition:transform .3s var(--ease),color .3s,border-color .3s,background .3s;cursor:default}
.kit li:hover{transform:translateY(-3px);color:var(--ink);border-color:var(--ink);background:var(--paper)}

/* ticker */
.ticker{margin-top:clamp(40px,5vw,64px);border-block:2px solid var(--rule);overflow:hidden;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ticker .track{display:flex;gap:0;width:max-content;animation:scroll 38s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.ticker span{font-family:var(--display);font-weight:560;font-size:clamp(1.1rem,2vw,1.6rem);padding:0 .6em;letter-spacing:-.01em;color:var(--ink);display:inline-flex;align-items:center;gap:.5em}
.ticker span::after{content:"✳";color:var(--accent);font-size:.6em;margin-left:.6em}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ----- Credentials ------------------------------------------------------ */
.cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.cred h3.lbl{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:600;margin-bottom:1.3em;display:flex;align-items:center;gap:.6em}
.cred h3.lbl::after{content:"";flex:1;height:1px;background:var(--line)}
.edu-item{padding:0 0 1.2em;margin-bottom:1.2em;border-bottom:1px solid var(--line)}
.edu-item:last-child{border-bottom:0;margin-bottom:0}
.edu-item .deg{font-family:var(--display);font-weight:560;font-size:1.22rem;display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.edu-item .deg .badge{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pine);border:1px solid var(--pine);border-radius:100px;padding:.25em .6em}
.edu-item .inst{color:var(--ink-2);margin-top:.2em}
.edu-item .yr{font-family:var(--mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.06em;margin-top:.3em;display:block}
.certs{display:flex;flex-direction:column;gap:.1em}
.cert{display:flex;align-items:center;gap:.9em;padding:.7em 0;border-bottom:1px solid var(--line)}
.cert:last-child{border-bottom:0}
.cert .ck{font-family:var(--mono);font-size:.7rem;color:var(--accent)}
.cert .ct{font-weight:500}

/* ----- Contact ---------------------------------------------------------- */
.contact{background:var(--paper-2);color:var(--ink);border-radius:0;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.contact::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:radial-gradient(100% 100% at 50% 0,#000,transparent 70%);mask-image:radial-gradient(100% 100% at 50% 0,#000,transparent 70%)}
.contact .wrap{position:relative;text-align:center}
.contact .eyebrow{color:var(--ink-2)}
.contact .eyebrow::before{background:var(--accent)}
.contact h2{font-size:clamp(2.4rem,6vw,5rem);margin:.3em auto;max-width:16ch}
.contact h2 em{color:var(--accent)}
.contact .sub{color:var(--ink-2);max-width:48ch;margin:0 auto 2.4em;font-size:1.1rem}
.contact-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ccard{display:flex;align-items:center;gap:.8em;padding:1em 1.4em;border:1.5px solid var(--line-2);border-radius:100px;color:var(--ink);font-family:var(--mono);font-size:.92rem;font-weight:600;transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s}
.ccard svg{width:20px;height:20px}
.ccard span{display:inline-flex;align-items:center;gap:.5em;line-height:1.2}
.ccard .go{font-family:var(--mono);font-size:.85em;opacity:.5;transition:transform .35s var(--ease),opacity .3s}
.ccard:hover{transform:translateY(-3px)}
.ccard:hover .go{transform:translate(3px,-3px);opacity:1}
.ccard.gh:hover{background:#1C1813;border-color:#1C1813;color:#fff}
.ccard.wa:hover{background:#25D366;border-color:#25D366;color:#062b13}
.ccard.li:hover{background:#0A66C2;border-color:#0A66C2;color:#fff}
.ccard.em:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.avail{margin-top:2.4em;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:.7em}
.avail .pulse{width:8px;height:8px;border-radius:50%;background:#0E8A4D;position:relative;box-shadow:0 0 0 3px rgba(14,138,77,.25)}
@media (prefers-reduced-motion:no-preference){.avail .pulse{animation:statusping-green 7.2s ease-out -2.4s infinite}}
@keyframes statusping{0%,88%,100%{box-shadow:0 0 0 3px rgba(var(--accent-rgb),.25)}93%{box-shadow:0 0 0 9px rgba(var(--accent-rgb),.12)}96%{box-shadow:0 0 0 13px rgba(var(--accent-rgb),0)}}
@keyframes statusping-green{0%,88%,100%{box-shadow:0 0 0 3px rgba(14,138,77,.25)}93%{box-shadow:0 0 0 9px rgba(14,138,77,.12)}96%{box-shadow:0 0 0 13px rgba(14,138,77,0)}}

/* ----- Footer ----------------------------------------------------------- */
footer.site{background:var(--paper);padding:clamp(54px,7vw,92px) 0 30px;border-top:2px solid var(--rule)}
.foot-statement{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:clamp(32px,5vw,54px)}
.foot-statement .logo{font-size:clamp(2.8rem,9vw,5.2rem)}
.foot-line{font-family:var(--display);font-weight:500;font-size:clamp(1.1rem,4.6vw,2.7rem);letter-spacing:-.02em;color:var(--ink);line-height:1.05;margin-top:-4px;white-space:nowrap}
.foot-statement .btn{margin-top:10px}
.foot-base{display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.foot-up{color:var(--ink-2);transition:color .25s}
.foot-up:hover{color:var(--accent)}
.totop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);border:0;display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(14px);transition:opacity .4s,transform .4s,background .3s;z-index:55}
.totop.show{opacity:1;transform:none}
.totop:hover{background:var(--accent)}
.totop svg{width:20px;height:20px}

/* ----- Reveal animations ----------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.reveal[data-d="5"]{transition-delay:.40s}

.hero h1 .line>span{transform:translateY(110%);transition:transform .9s var(--ease-out)}
.hero h1.in .line>span{transform:none}
/* fixed prefix line — its own responsive scale so "Data Analyst by craft," always
   fits one row regardless of the main h1 clamp used for the shorter rotating line */
.line-fixed{white-space:nowrap}
.line-fixed>span{font-size:clamp(1.5rem,7vw,4rem);display:inline-block}
/* rotating role sits on its own dedicated line, sized and pinned to nowrap so a
   longer/shorter word never changes the hero's wrap count or shifts anything below it */
.type-line{white-space:nowrap;font-size:clamp(1.3rem,2.9vw,2.15rem);line-height:1.3;margin-top:.18em;min-height:1.5em}
.type-rotate{min-width:1px;font-size:1em}
.type-line .term-caret{height:.85em}

/* ----- Custom cursor ---------------------------------------------------- */
.cursor,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:90;mix-blend-mode:difference;will-change:transform}
.cursor{width:6px;height:6px;background:#fff;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-ring{width:34px;height:34px;border:1px solid rgba(255,255,255,.6);border-radius:50%;transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s}
.cursor-ring.big{width:56px;height:56px;border-color:#fff}
@media (hover:none),(pointer:coarse){.cursor,.cursor-ring{display:none!important}}

/* ----- Responsive ------------------------------------------------------- */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero .chartwrap{order:2}
  .about-grid{grid-template-columns:1fr}
  .portrait{max-width:340px}
  .now-grid{grid-template-columns:1fr}
  .feature-row{grid-template-columns:1fr}
  .case{grid-template-columns:1fr;gap:18px}
  .case .c-metric{grid-column:1/-1;text-align:left;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:16px;margin-top:4px}
  .case .c-metric .links,.case .c-metric .bars{justify-content:flex-start}
  .kit-grid,.cred-grid,.stats .grid{}
}
/* nav gets its own, wider breakpoint: the path-style labels (~/experience)
   need more room in a single row than the old word-only labels did */
@media (max-width:900px){
  .nav{position:fixed;inset:88px var(--gutter) auto var(--gutter);background:var(--paper);border-radius:1.5rem;flex-direction:column;align-items:flex-start;gap:0;padding:8px var(--gutter) 22px;border:1px solid var(--line);transform:translateY(-130%);transition:transform .45s var(--ease);box-shadow:0 20px 40px -30px rgba(var(--sh-rgb),.6)}
  .nav.open{transform:none}
  .nav a.navlink{padding:14px 0;width:100%;border-bottom:1px solid var(--line);font-size:.82rem}
  .nav .btn{margin-top:14px;width:100%;justify-content:center}
  .nav-toggle{display:flex}
}
@media (max-width:760px){
  .stats .grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3n){border-right:1px solid var(--line)}
  .stat:nth-child(2n){border-right:0}
  .kit-grid,.cred-grid{grid-template-columns:1fr}
  .edition{font-size:.6rem}
  .case .c-main .stack{display:none}
}
@media (max-width:440px){
  .stats .grid{grid-template-columns:1fr}
  .stat{border-right:0!important}
  .hero-soc{flex-wrap:wrap}
}

/* ----- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero h1 .line>span{transform:none}
  .term-caret{animation:none}
  .cursor,.cursor-ring{display:none}
  .ticker .track{animation:none;transform:none}
}

/* print */
@media print{body::before,body::after,.code-bg,.topbar,.totop,.cursor,.cursor-ring{display:none}body{background:#fff}}

/* =========================================================================
   Revision additions — logo, tagline, tools, gallery, exp charts, lightbox
   ========================================================================= */

/* a11y */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:10px 16px;background:var(--ink);color:var(--paper);border-radius:0 0 8px 0;font-family:var(--mono);font-size:.8rem}
.skip:focus{left:0}

/* AmiR wordmark logo — handwritten signature, matching the hero's signed phrases */
.logo{font-family:var(--signature);font-weight:700;font-size:2.15rem;letter-spacing:.01em;line-height:1;
  padding:.06em .16em .12em .02em;color:var(--ink);display:inline-block}
.logo .r{font-size:1em;color:var(--accent)}
.foot-top .logo{font-size:2.6rem}
/* the name glitches on its own, everywhere it appears: brief RGB-split
   bursts on a long quiet cycle (constant flicker would be unbearable) */
@media (prefers-reduced-motion:no-preference){
  .logo{animation:glitchburst 2.6s steps(1) infinite}
  .foot-statement .logo{animation-delay:-1.3s}
}

/* hero tagline */
.hero-tag{font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,3.4vw,2.05rem);letter-spacing:-.02em;color:var(--ink);margin-top:.55em;white-space:nowrap}
.grad-sweep{color:var(--accent);font-style:italic}
@media (prefers-reduced-motion:no-preference){
  .grad-sweep{animation:glitchburst 3.4s steps(1) -1.1s infinite}
}

/* animated heading underline */
.h-underline{position:relative;display:inline}
.h-underline::after{content:"";position:absolute;left:0;bottom:-.1em;height:2px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease-out) .2s}
.sec-head.in .h-underline::after{transform:scaleX(1)}

/* timeline before/after chart */
.tl-chart{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--paper-2);border:1px solid var(--line-2);
  border-radius:var(--radius);padding:18px 18px 14px;position:relative;overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s}
.tl-chart:hover{transform:translateY(-4px);box-shadow:0 24px 44px -34px rgba(var(--sh-rgb),.55),inset 0 1px 0 rgba(255,255,255,.05)}
.tl-chart figcaption{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);align-self:flex-start}
.ba{display:flex;align-items:flex-end;justify-content:center;gap:30px;min-height:152px;width:100%}
.ba .col{display:flex;flex-direction:column;align-items:center;gap:8px}
.ba .bar{flex:0 0 auto;width:44px;border-radius:6px 6px 0 0;height:0;transition:height 1.1s var(--ease-out) .2s}
.in .ba .bar{height:var(--h)}
.ba .bar.before{background:repeating-linear-gradient(45deg,var(--paper-3),var(--paper-3) 5px,var(--paper-2) 5px,var(--paper-2) 10px);border:1px solid var(--line-2)}
.ba .bar.after{background:linear-gradient(var(--accent),var(--accent-deep));box-shadow:0 10px 22px -10px var(--accent)}
.ba .bl{font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.delta{font-family:var(--display);font-weight:600;font-size:1.55rem;color:var(--pine);letter-spacing:-.02em}
.delta .ar{font-size:.62em}

/* tools cloud */
.tools-cloud{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,3vw,40px) clamp(28px,5vw,64px)}
.tg-label{font-family:var(--display);font-size:1.12rem;display:flex;align-items:center;gap:.6em;margin-bottom:1em;padding-bottom:.6em;border-bottom:1px solid var(--line)}
.tg-label .n{font-family:var(--mono);font-size:.7rem;color:var(--accent);letter-spacing:.1em}
.tlist{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.tlist li{font-family:var(--mono);font-size:.8rem;padding:.55em .9em .55em .8em;border:1px solid var(--line-2);border-radius:100px;color:var(--ink-2);background:var(--paper-2);
  transition:transform .3s var(--ease),color .3s,border-color .3s,background .3s,box-shadow .3s;cursor:default}
.tlist li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:.55em;vertical-align:middle;opacity:.45;transition:opacity .3s,transform .3s}
.tlist li:hover{transform:translateY(-4px);color:var(--ink);border-color:var(--ink);background:var(--paper);box-shadow:0 12px 24px -16px rgba(var(--sh-rgb),.55)}
.tlist li:hover::before{opacity:1;transform:scale(1.4)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.gtile{position:relative;aspect-ratio:4/3;border:1px solid var(--line-2);border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--paper-2);padding:0;display:block;font:inherit}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease-out),filter .5s;filter:saturate(.95)}
.gtile:hover img{transform:scale(1.06);filter:saturate(1.1)}
.gtile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,24,19,.35),transparent 55%);opacity:0;transition:opacity .4s}
.gtile:hover::after{opacity:1}
.gtile.ph{background:radial-gradient(120% 90% at 30% 10%,var(--paper-2),var(--paper-3));display:grid;place-items:center}
.gtile.ph::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:22px 22px;opacity:.6}
.gph{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.gph-ic{width:42px;height:42px;border-radius:50%;border:1.5px dashed var(--line-2);display:grid;place-items:center;font-size:1.4rem;color:var(--accent);transition:transform .45s var(--ease),border-color .3s}
.gtile.ph:hover .gph-ic{transform:rotate(90deg) scale(1.1);border-color:var(--accent)}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(20,17,13,.92);display:flex;align-items:center;justify-content:center;padding:5vw;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:88vh;border-radius:10px;box-shadow:0 30px 80px -20px #000;transform:scale(.94);transition:transform .4s var(--ease-out)}
.lightbox.open img{transform:scale(1)}
.lb-close{position:absolute;top:16px;right:24px;background:none;border:0;color:#fff;font-size:2.6rem;line-height:1;cursor:pointer;opacity:.8}
.lb-close:hover{opacity:1}

/* responsive (new sections) */
@media (max-width:900px){
  .tl-item{grid-template-columns:1fr;gap:20px}
  .tl-chart{max-width:320px}
  .tools-cloud{grid-template-columns:1fr}
}
@media (max-width:600px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .ba{gap:22px}
}
@media (prefers-reduced-motion:reduce){
  .in .ba .bar{transition:none}
  .grad-sweep,.logo{animation:none!important}
  .sec-head.in .h-underline::after{transform:scaleX(1)}
  .helps-track{animation:none;overflow-x:auto;max-width:100%}
  .helps{overflow-x:auto}
  .help[aria-hidden="true"]{display:none}
}

/* =========================================================================
   How I can help · page heroes · detail-page components · footer statement
   ========================================================================= */

/* How I can help — auto-playing marquee, same technique as .ticker/.bigline:
   two identical sets of cards in a width:max-content track, translated -50%.
   Pauses on hover; still fully keyboard/screen-reader reachable (only the
   duplicate set is aria-hidden). */
.helps{overflow:hidden;padding:4px 4px 16px;margin-inline:-4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 2%,#000 92%,transparent)}
.helps-track{display:flex;gap:clamp(14px,1.8vw,22px);width:max-content;animation:helpsScroll 48s linear infinite}
.helps:hover .helps-track{animation-play-state:paused}
@keyframes helpsScroll{to{transform:translateX(-50%)}}
.help{position:relative;flex:0 0 268px;border:1px solid var(--line-2);border-radius:var(--radius);padding:clamp(24px,2.8vw,34px);background:var(--paper-2);overflow:hidden;
  transition:transform .5s var(--ease),box-shadow .5s,border-color .4s,background .4s}
.help::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.help:hover{transform:translateY(-6px);box-shadow:0 26px 50px -34px rgba(var(--sh-rgb),.5),inset 0 1px 0 rgba(255,255,255,.05);background:var(--paper)}
.help:hover::before{transform:scaleX(1)}
.help-ic{display:inline-flex;width:46px;height:46px;border-radius:1rem;background:var(--paper);border:1px solid var(--line-2);align-items:center;justify-content:center;color:var(--accent);margin-bottom:18px;
  box-shadow:0 8px 18px -12px rgba(var(--sh-rgb),.35),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .5s var(--ease),background .4s,color .4s}
.help-ic svg{width:23px;height:23px}
.help:hover .help-ic{transform:rotate(-6deg) scale(1.06);background:var(--ink);color:var(--paper)}
.help h3{font-size:1.32rem;font-weight:650;display:flex;align-items:center;gap:.4em;margin-bottom:.5em;letter-spacing:-.02em}
.help h3 .up{color:var(--pine);font-size:.6em;display:inline-block;transition:transform .35s var(--ease)}
.help:hover h3 .up{transform:translateY(-3px)}
.help p{font-size:.94rem;color:var(--ink-2);line-height:1.58}
@media (max-width:900px){.help{flex-basis:230px}}
@media (max-width:480px){.help{flex-basis:82vw}}

/* footer statement reveal */
.foot-statement{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.foot-statement.in{opacity:1;transform:none}

/* ---- shared detail-page styles ---- */
.page-hero{padding-top:clamp(40px,6vw,78px);padding-bottom:clamp(26px,4vw,46px)}
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;gap:.55em;align-items:center;margin-bottom:24px}
.crumb a{color:var(--ink-2);transition:color .25s}
.crumb a:hover{color:var(--accent)}
.crumb .sep{opacity:.5}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.02em;line-height:1.06;margin-bottom:.22em}
.page-hero .lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-2);max-width:60ch}
.page-hero .lede a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* detail blocks (experience / work) */
.detail{padding-top:clamp(10px,2vw,24px);padding-bottom:clamp(56px,8vw,120px)}
.xp{padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line)}
.xp:first-child{border-top:0;padding-top:0}
.xp-head{display:flex;justify-content:space-between;gap:10px 22px;flex-wrap:wrap;align-items:baseline}
.xp-head .when{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.xp-head .loc{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--ink-3)}
.xp h2{font-size:clamp(1.55rem,3.2vw,2.4rem);margin:.18em 0 .1em}
.xp h2 .org{color:var(--ink)}
.xp .summary{color:var(--ink-2);max-width:72ch;margin:.5em 0 1.5em;font-size:1.05rem}
.xp .summary .toolline{display:block;margin-top:.7em;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--ink-3)}
.points{display:grid;gap:14px;counter-reset:pt}
.point{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:clamp(16px,2vw,22px);border:1px solid var(--line);border-radius:1.25rem;background:var(--paper-2);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s,background .3s}
.point:hover{transform:translateX(5px);border-color:var(--line-2);background:var(--paper);box-shadow:0 16px 32px -28px rgba(var(--sh-rgb),.55)}
.point .pn{font-family:var(--mono);color:var(--accent);font-size:.82rem;font-weight:700;padding-top:.1em}
.point .pn::before{counter-increment:pt;content:counter(pt,decimal-leading-zero)}
.point h4{font-family:var(--sans);font-weight:600;font-size:1.04rem;margin-bottom:.35em;letter-spacing:-.01em}
.point p{font-size:.95rem;color:var(--ink-2);line-height:1.55}
.point .res{color:var(--pine);font-weight:600;font-family:var(--mono);font-size:.8rem;display:inline-flex;align-items:center;gap:.4em;margin-top:.6em}
.point .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:.8em}
.point .tags span{font-family:var(--mono);font-size:.62rem;padding:.32em .6em;border:1px solid var(--line-2);border-radius:6px;color:var(--ink-2)}
@media (max-width:560px){.point{grid-template-columns:1fr;gap:6px}}

/* tools detail */
.tool-cat{padding:clamp(24px,3.5vw,44px) 0;border-top:1px solid var(--line)}
.tool-cat:first-child{border-top:0;padding-top:0}
.tool-cat h2{font-size:clamp(1.4rem,2.8vw,2rem);margin-bottom:.2em}
.tool-cat .ci{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:1.4em;display:block}
.tool-cat .ci::before{content:"// "}
.trow{display:grid;grid-template-columns:200px 1fr;gap:10px 28px;padding:16px 0;border-top:1px dashed var(--line)}
.trow:first-of-type{border-top:0}
.trow .tn{font-family:var(--display);font-weight:560;font-size:1.15rem;display:flex;align-items:center;gap:.5em}
.trow .tn .lvl{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;border-radius:100px;padding:.2em .5em;border:1px solid currentColor}
.trow .tn .lvl.lvl-expert{color:var(--pine)}
.trow .tn .lvl.lvl-advanced{color:var(--accent)}
.trow .tn .lvl.lvl-proficient{color:var(--blue)}
.trow p{color:var(--ink-2);font-size:.96rem;max-width:64ch}
@media (max-width:640px){.trow{grid-template-columns:1fr;gap:4px}}

/* about long-form */
.about-long{max-width:74ch}
.about-long p{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-2);margin-bottom:1.1em}
.about-long p .lead{color:var(--ink);font-weight:500}
.about-long h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:1.4em 0 .5em;display:flex;align-items:baseline;gap:.45em}
.about-long h2::before{content:"//";font-family:var(--mono);font-size:.62em;font-weight:500;color:var(--ink-3);letter-spacing:0}
.about-long .pull{font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.18;color:var(--ink);margin:.7em 0;letter-spacing:-.02em;border-left:3px solid var(--accent);padding-left:.7em}
.about-long .pull em{color:var(--accent);font-style:normal}

/* next-page pager */
.pager{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(30px,4vw,48px);padding-top:24px;border-top:2px solid var(--rule)}
.pager a{font-family:var(--display);font-weight:560;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:.5em;transition:color .3s}
.pager a:hover{color:var(--accent)}
.pager .pg-back{font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-3);align-self:center}
.pager .pg-back:hover{color:var(--accent)}

/* =========================================================================
   Skills — floating "bubble" cloud
   ========================================================================= */
.bubbles{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.bubbles.center{justify-content:center}
.bubble{display:inline-block;will-change:transform}
/* one-time staggered pop-in as the group scrolls into view (rides the same
   .reveal/.in mechanism main.js already drives — no extra JS, no loop) */
@media (prefers-reduced-motion:no-preference){
  .bubble{opacity:0;transform:translateY(10px) scale(.92);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
  .skill-cat.in .bubble{opacity:1;transform:none}
  .skill-cat.in .bubble:nth-child(2n){transition-delay:.04s}
  .skill-cat.in .bubble:nth-child(3n){transition-delay:.08s}
  .skill-cat.in .bubble:nth-child(4n){transition-delay:.12s}
  .skill-cat.in .bubble:nth-child(5n){transition-delay:.16s}
  .skill-cat.in .bubble:nth-child(7n){transition-delay:.2s}
}
.bub{display:inline-block;font-family:var(--mono);font-size:.82rem;line-height:1;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:100px;background:var(--paper-2);padding:.62em 1.05em;cursor:default;
  transition:transform .35s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .35s}
.bub::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);
  margin-right:.55em;vertical-align:middle;opacity:.5;transition:opacity .3s,transform .3s}
.bub[data-size="lg"]{font-size:1.06rem;padding:.72em 1.3em;color:var(--ink);font-weight:500;border-color:var(--line-2)}
.bub[data-size="sm"]{font-size:.72rem;padding:.5em .85em;opacity:.92}
.bubble:hover .bub{transform:scale(1.07) translateY(-2px);background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:0 14px 28px -16px rgba(var(--sh-rgb),.6)}
.bubble:hover .bub::before{opacity:1;transform:scale(1.5)}
.skill-cat .bubbles{margin-top:.4em}

/* =========================================================================
   GSAP motion layer — page transitions, SplitText words
   ========================================================================= */

/* page transition curtain (element is created/animated by gsap-motion.js) */
.page-transition{position:fixed;inset:0;z-index:300;background:var(--paper);display:flex;align-items:center;justify-content:center;pointer-events:none}
.page-transition .pt-mark{font-family:var(--signature);font-weight:700;font-size:2.7rem;letter-spacing:.01em;color:var(--ink);opacity:.95;padding:.06em .16em .12em .02em;display:inline-block}
.page-transition .pt-mark .r{color:var(--accent)}

/* SplitText word reveals (.sec-head h2 / .xp h2 / .tool-cat h2) */
.sw-word{display:inline-block;will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .page-transition{display:none}
}

/* =========================================================================
   Editorial elevation — ghost numerals, statement marquee, orbit badge,
   indexed color-coded cards, italic almanac numerals
   ========================================================================= */

h2,h3{text-wrap:balance}

/* oversized ghost section numerals (data-almanac folio marks) */
body{counter-reset:sec}
.sec-head{position:relative;counter-increment:sec}
.sec-head::after{
  content:counter(sec,decimal-leading-zero);
  position:absolute;right:0;top:-.32em;line-height:1;pointer-events:none;
  font-family:var(--display);font-weight:700;
  font-size:clamp(4.5rem,11vw,8.5rem);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(230,237,243,.16);
}
.detail{counter-reset:blk}
.xp,.tool-cat{counter-increment:blk;position:relative}
.xp::after,.tool-cat::after{
  content:counter(blk,decimal-leading-zero);
  position:absolute;right:0;top:.35em;line-height:1;pointer-events:none;
  font-family:var(--display);font-weight:700;
  font-size:clamp(3.6rem,8vw,6.5rem);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(230,237,243,.14);
}
.xp:first-child::after,.tool-cat:first-child::after{top:0}

/* statement marquee — huge outlined serif, filled accent on the payoff */
.bigline{overflow:hidden;border-block:2px solid var(--rule);padding:clamp(16px,2.4vw,28px) 0;position:relative;z-index:1;background:var(--paper)}
.bl-track{display:flex;align-items:center;width:max-content;animation:scroll 100s linear infinite}
.bigline span,.bigline em{
  font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,3.2vw,2.5rem);
  line-height:1.1;letter-spacing:-.02em;white-space:nowrap;padding:0 .38em;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);
}
.bigline em{font-style:italic;color:var(--accent);-webkit-text-stroke:0;text-shadow:0 0 20px rgba(var(--accent-rgb),.5)}
.bigline em.quote{color:var(--ink);-webkit-text-stroke:0;text-shadow:none;font-style:normal;opacity:.85}
.bigline i{font-style:normal;color:var(--accent);font-size:clamp(1rem,2vw,1.5rem)}
.bigline:hover .bl-track{animation-play-state:paused}
/* counter-scrolling code ticker under the statement */
.bl-track.bl-code{animation-direction:reverse;animation-duration:44s;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.bigline .code{font-family:var(--mono);font-size:clamp(.7rem,1.2vw,.9rem);font-weight:500;letter-spacing:.05em;
  color:var(--ink-3);-webkit-text-stroke:0;padding:0 1.6em;white-space:nowrap}
.bigline .code b{color:var(--pine);font-weight:600}
.bigline .code u{color:var(--gold);text-decoration:none}
.bigline .code i{color:var(--blue);font-style:italic}

/* orbit badge on the portrait — static now, one less thing spinning */
.orbit{position:absolute;top:-30px;right:-24px;width:132px;height:132px;z-index:2;color:var(--ink)}
.orbit::before{content:"";position:absolute;inset:8px;border-radius:50%;background:var(--paper);border:1px solid var(--line-2);box-shadow:0 14px 30px -20px rgba(var(--sh-rgb),.55)}
.orbit::after{content:"✳";position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);font-size:1.35rem}
.orbit svg{position:relative;width:100%;height:100%;transition:transform .8s var(--ease-out)}
.portrait:hover .orbit svg{transform:rotate(360deg)}
.orbit text{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;fill:currentColor}

/* "How I can help" cards — indexed + color-coded per card */
.helps-track{counter-reset:help}
.help{counter-increment:help;--hc:var(--accent)}
.help:nth-child(4n+2){--hc:var(--pine)}
.help:nth-child(4n+3){--hc:var(--gold)}
.help:nth-child(4n+4){--hc:var(--blue)}
.help::after{
  content:counter(help,decimal-leading-zero);
  position:absolute;top:22px;right:24px;
  font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.14em;color:var(--ink-3);
}
.help::before{background:var(--hc)}
.help-ic{color:var(--hc)}
.help:hover .help-ic{background:var(--hc);color:var(--paper)}

@keyframes caret{50%{opacity:0}}

@media (max-width:900px){
  .sec-head::after,.xp::after,.tool-cat::after{display:none}
  .orbit{width:104px;height:104px;top:-20px;right:-14px}
}

/* =========================================================================
   Hacker-terminal layer — scanlines, shell prompts, glitch, statusline
   ========================================================================= */

/* CRT scanlines over everything (very faint; below the custom cursor) */
html::after{
  content:"";position:fixed;inset:0;z-index:80;pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    transparent 0 2px,rgba(2,8,14,.14) 2px 3px);
  opacity:.5;
}

/* the hero eyebrow is a real shell prompt now — kill the dash + uppercase */
.hero .eyebrow{text-transform:none;letter-spacing:.05em;font-size:.76rem}
.hero .eyebrow::before{display:none}
.eyebrow .u{color:var(--pine);font-weight:700}
.eyebrow .p{color:var(--ink-3)}
.eyebrow .s{color:var(--gold)}

/* breadcrumbs read as a shell cd */
.crumb::before{content:"$ cd";color:var(--pine);font-weight:700;margin-right:.1em}

/* cert list reads as test output: [✓] */
.cert .ck::before{content:"[";color:var(--ink-3)}
.cert .ck::after{content:"]";color:var(--ink-3)}

/* availability chip framed like an env flag */
.avail::before{content:"[";color:var(--ink-3);font-size:1.1em}
.avail::after{content:"]";color:var(--ink-3);font-size:1.1em}

/* RGB-split glitch. glitchburst = idle cycle (quiet ~87% of the time, then
   a ~0.4s burst); glitch = the continuous version, used on hover to
   intensify. Same shadows, different duty cycle. */
@keyframes glitchburst{
  0%,86%,100%{text-shadow:none}
  87%{text-shadow:2px 0 var(--accent),-2px 0 var(--blue)}
  89%{text-shadow:-2px 0 var(--accent),2px 0 var(--blue)}
  91%{text-shadow:1.5px 0 var(--blue),-1.5px 0 var(--accent)}
  93%{text-shadow:2px 0 var(--accent),-2px 0 var(--blue)}
  95%{text-shadow:none}
}
@media (prefers-reduced-motion:no-preference){
  .brand:hover .logo{animation:glitch .35s steps(2) infinite}
  .page-transition .pt-mark{animation:glitch .5s steps(2) infinite}
}
@keyframes glitch{
  0%{text-shadow:2px 0 var(--accent),-2px 0 var(--blue)}
  50%{text-shadow:-2px 0 var(--accent),2px 0 var(--blue)}
  100%{text-shadow:1px 0 var(--blue),-1px 0 var(--accent)}
}

/* hero terminal window chrome: classic traffic lights in theme colors */
.chartcard .cc-dots i:nth-child(2){background:var(--gold)}
.chartcard .cc-dots i:nth-child(3){background:var(--pine)}

/* keyboard focus reads as an active selection */
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* static red vignette at the top of every page — ambient tint, not another
   loop; the glitch + statusline + typed labels already carry the motion */
html::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 42% at 50% 0%,rgba(var(--accent-rgb),.07),transparent 70%);
}

/* buttons speak terminal: lowercase mono, ghost buttons bracket-framed */
.btn,.fixit-submit{text-transform:lowercase}
.btn-ghost::before{content:"[";color:var(--ink-3);margin-right:.15em}
.btn-ghost::after{content:"]";color:var(--ink-3);margin-left:.15em}
.btn-ghost:hover::before,.btn-ghost:hover::after{color:var(--paper)}

/* themed scrollbar + input caret */
html{scrollbar-color:var(--accent-deep) var(--paper);scrollbar-width:thin}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--accent-deep);border-radius:5px;border:2px solid var(--paper)}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}
input,textarea{caret-color:var(--accent)}

/* stats read as log output */
.stat .tick::before{content:"> ";color:var(--accent)}

/* section labels type themselves in (main.js); reserve the line so the
   heading below doesn't jump while the label is still empty */
.idx{display:inline-block;min-height:1.2em}

/* live session statusline — bottom-left, tracks what's being read */
.readline{
  position:fixed;left:18px;bottom:16px;z-index:55;pointer-events:none;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--ink-2);
  background:rgba(var(--paper-rgb),.88);border:1px solid var(--line-2);border-radius:8px;
  padding:.5em .8em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;gap:.5em;
}
.readline .rl-dot{width:6px;height:6px;border-radius:50%;background:var(--pine);flex:none}
.readline .rl-path{color:var(--ink)}
.readline .rl-pct{color:var(--accent);font-weight:700}
.readline .rl-caret{display:inline-block;width:.5em;height:1em;background:var(--accent);animation:caret 1.1s steps(1) infinite}
@media (max-width:900px){.readline{display:none}}

@media (prefers-reduced-motion:reduce){
  .brand:hover .logo{animation:none}
  .readline .rl-caret{animation:none}
}
@media print{html::after,html::before,.readline{display:none}}