/* ajmalps.com - shared stylesheet. Built from the published design. */
/* ============ Tokens ============ */
:root{
  --ink:#1d1d1f;
  --muted:#6e6e73;
  --faint:#86868b;
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --hairline:#d2d2d7;
  --blue:#0071e3;
  --blue-hover:#0077ed;
  --cyan:#00c8ff;
  --violet:#7c3aed;
  --grad:linear-gradient(96deg,#00c8ff 0%,#2563eb 48%,#7c3aed 100%);
  --radius:28px;
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --nav-h:60px;
  --card:#ffffff;
  --link:#0071e3;
  --hover-bg:rgba(0,0,0,.05);
  --hero-bg:linear-gradient(180deg,#f7f9fc 0%,#eff2f8 100%);
  --nav-bg:rgba(245,247,251,.7);
  --nav-border:rgba(0,0,0,.08);
  --menu-bg:rgba(245,247,251,.92);
  /* glass */
  --glass:rgba(255,255,255,.55);
  --glass-strong:rgba(255,255,255,.68);
  --glass-border:rgba(255,255,255,.7);
  --glass-fb:#fbfcfe;
  /* neumorphic */
  --neu-surface:#eef1f7;
  --neu-out:8px 8px 20px rgba(163,177,198,.4),-8px -8px 20px rgba(255,255,255,.9);
  --neu-out-sm:4px 4px 10px rgba(163,177,198,.35),-4px -4px 10px rgba(255,255,255,.85);
  --neu-hover:14px 14px 30px rgba(140,155,180,.42),-14px -14px 30px rgba(255,255,255,.95);
  --neu-in:inset 3px 3px 8px rgba(163,177,198,.4),inset -3px -3px 8px rgba(255,255,255,.9);
  /* ambient blobs */
  --b-cyan:rgba(0,200,255,.15);
  --b-blue:rgba(37,99,235,.12);
  --b-violet:rgba(124,58,237,.12);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#f5f5f7;
  --muted:#a1a1a6;
  --faint:#86868b;
  --bg:#0c0e13;
  --bg-alt:#12141b;
  --hairline:#2b2f38;
  --card:#1d1d1f;
  --link:#2997ff;
  --hover-bg:rgba(255,255,255,.08);
  --hero-bg:linear-gradient(180deg,#0c0e13 0%,#0e1118 100%);
  --nav-bg:rgba(16,18,24,.7);
  --nav-border:rgba(255,255,255,.12);
  --menu-bg:rgba(16,18,24,.94);
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.075);
  --glass-border:rgba(255,255,255,.12);
  --glass-fb:#191c23;
  --neu-surface:#171a21;
  --neu-out:8px 8px 20px rgba(0,0,0,.6),-8px -8px 20px rgba(255,255,255,.04);
  --neu-out-sm:4px 4px 10px rgba(0,0,0,.55),-4px -4px 10px rgba(255,255,255,.04);
  --neu-hover:14px 14px 30px rgba(0,0,0,.7),-14px -14px 30px rgba(255,255,255,.05);
  --neu-in:inset 3px 3px 8px rgba(0,0,0,.6),inset -3px -3px 8px rgba(255,255,255,.05);
  --b-cyan:rgba(0,200,255,.1);
  --b-blue:rgba(37,99,235,.12);
  --b-violet:rgba(124,58,237,.11);
  color-scheme:dark;
}
/* smooth cross-fade while switching themes */
html.theming *,html.theming *::before,html.theming *::after{
  transition:background-color .35s var(--ease),background .35s var(--ease),color .35s var(--ease),
  border-color .35s var(--ease),fill .35s var(--ease),stroke .35s var(--ease),
  box-shadow .35s var(--ease),transform .35s var(--ease) !important;
}
/* solid fallbacks where backdrop blur is unsupported */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  #nav{background:var(--bg-alt)}
  .navlinks.open{background:var(--menu-bg)}
  .bcard,.ribbon,.chips span{background:var(--glass-fb)}
  .ptile{background:#14161b}
  .stat-b{background:#12151b}
}

/* ============ Base ============ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI Variable Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
::selection{background:rgba(0,113,227,.18)}
a{color:var(--link);text-decoration:none}
img,svg{display:block;max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:820px;margin:0 auto;padding:0 22px}

:where(a,button):focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:8px}

/* skip to content */
.skip{
  position:absolute;left:14px;top:-70px;z-index:200;
  padding:12px 20px;border-radius:14px;
  background:var(--link);color:#fff;font-weight:600;font-size:15px;
  transition:top .2s var(--ease-out);
}
.skip:focus{top:14px}

.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* section rhythm */
section{padding:110px 0}
@media(max-width:734px){section{padding:76px 0}}
.sec-dark{background:#000;color:#f5f5f7}
.sec-dark .muted,.sec-dark p.sub{color:#a1a1a6}
.sec-alt{background:var(--bg-alt)}

/* ambient colour blobs behind the glass */
.hero,section{position:relative}
.hero::before,section::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--blobs,none)}
.hero>*,section>*{position:relative}
.hero{--blobs:radial-gradient(620px 460px at 12% 16%,var(--b-cyan),transparent 65%),radial-gradient(680px 500px at 88% 28%,var(--b-violet),transparent 65%)}
#about{--blobs:radial-gradient(640px 480px at 86% 12%,var(--b-blue),transparent 65%),radial-gradient(520px 400px at 8% 78%,var(--b-cyan),transparent 62%)}
#experience{--blobs:radial-gradient(560px 420px at 92% 24%,var(--b-cyan),transparent 65%)}
#ajtools{--blobs:radial-gradient(660px 480px at 10% 18%,var(--b-cyan),transparent 65%),radial-gradient(600px 440px at 90% 72%,var(--b-violet),transparent 62%)}
#skills{--blobs:radial-gradient(560px 420px at 88% 18%,var(--b-violet),transparent 65%)}
.sec-dark{--blobs:radial-gradient(760px 500px at 50% 0%,rgba(37,99,235,.16),transparent 65%)}
#contact{--blobs:radial-gradient(680px 460px at 50% 16%,rgba(124,58,237,.17),transparent 65%),radial-gradient(560px 420px at 16% 82%,rgba(0,200,255,.1),transparent 62%)}

/* headlines: apple two-tone */
.eyebrow{
  display:block;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--link);margin-bottom:14px;
}
.sec-dark .eyebrow{color:#6ea8ff}
h2.head{
  font-size:clamp(34px,5vw,60px);font-weight:700;letter-spacing:-.022em;line-height:1.08;
  max-width:900px;text-wrap:balance;
}
h2.head .dim{color:var(--faint)}
.sec-dark h2.head .dim{color:#6e6e73}
p.sub{
  font-size:clamp(18px,2.2vw,21px);color:var(--muted);max-width:680px;margin-top:20px;
}

/* ============ Reveal motion (hidden state only when JS is running) ============ */
html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);transition-delay:var(--d,0s)}
html.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .hero-enter{animation:none !important}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* ============ Nav ============ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:var(--nav-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease);
}
#nav.scrolled{border-bottom-color:var(--nav-border);box-shadow:0 1px 14px rgba(0,0,0,.04)}
.navin{max-width:1080px;height:100%;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:8px}
.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.brand svg{width:26px;height:26px}
/* the centred capsule */
.navcenter{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.navlinks{
  position:relative;display:flex;align-items:center;gap:2px;
  padding:4px;border-radius:999px;
  background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:var(--neu-out-sm);
}
.navlinks a{
  position:relative;z-index:1;display:inline-flex;align-items:center;
  color:var(--muted);font-size:13.5px;font-weight:500;padding:8px 15px;border-radius:999px;
  white-space:nowrap;
  transition:color .25s var(--ease);
}
.navlinks a:hover{color:var(--ink)}
/* the tab you are on: a solid pill that glides to the new tab on every page load.
   The name sits on the ::before - the black lozenge on its own - and NOT on the
   <a>. Naming the <a> takes its label along for the ride, and the browser
   cross-fades the old label into the new one while the pill moves, so a smeared
   "AJ AI"/"Toolbox" double image drags across the bar and covers the tabs it
   passes. With only the lozenge named, the labels stay where they are and just
   change colour under it. Do not put the name back on the <a>.
   Tried and rejected: z-index:-1 on ::view-transition-group(navpill) to keep the
   labels on top - the bar's own background is painted in the site-nav snapshot,
   so the lozenge vanishes behind it for the whole flight. */
.navlinks a[aria-current="page"]{color:var(--bg);font-weight:600}
.navlinks a[aria-current="page"]::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;
  background:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.18);
  view-transition-name:navpill;
}
@media(prefers-reduced-motion:reduce){
  .navlinks a[aria-current="page"]::before{view-transition-name:none}
}
/* hover ghost that slides between tabs */
.navpill{
  position:absolute;top:4px;left:0;height:calc(100% - 8px);width:0;
  border-radius:999px;background:var(--hover-bg);
  opacity:0;pointer-events:none;z-index:0;transform:translateX(0);
  transition:transform .42s var(--ease-out),width .42s var(--ease-out),opacity .25s var(--ease);
}
.navlinks.armed .navpill{opacity:1}
@media(prefers-reduced-motion:reduce){.navpill{transition:opacity .01ms}}
/* right cluster - the theme switch is the last thing in the corner */
.navend{display:flex;align-items:center;gap:6px;margin-left:auto}
.navlinks a.cta{color:#fff;background:var(--blue);font-weight:500;margin-left:6px}
.navlinks a.cta:hover{background:var(--blue-hover)}
#menuBtn{
  display:none;width:42px;height:42px;border:none;background:none;cursor:pointer;
  align-items:center;justify-content:center;border-radius:12px;
}
#menuBtn span{position:relative;display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),background .3s var(--ease)}
#menuBtn span::before,#menuBtn span::after{
  content:"";position:absolute;left:0;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease);
}
#menuBtn span::before{top:-6px}
#menuBtn span::after{top:6px}
#menuBtn[aria-expanded="true"] span{background:transparent}
#menuBtn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
#menuBtn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* theme switch: pill track + sliding bubble */
#themeSwitch{
  border:none;background:none;cursor:pointer;padding:5px;
  display:flex;align-items:center;border-radius:999px;
}
#themeSwitch .track{
  position:relative;display:block;width:54px;height:30px;border-radius:999px;
  background:var(--neu-surface);
  box-shadow:var(--neu-in);
  transition:background .35s var(--ease),box-shadow .35s var(--ease);
}
:root[data-theme="dark"] #themeSwitch .track{background:rgba(0,113,227,.35)}
#themeSwitch .knob{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:2px 2px 6px rgba(0,0,0,.3),-2px -2px 6px rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;
  transition:transform .35s var(--ease);
}
:root[data-theme="dark"] #themeSwitch .knob{transform:translateX(24px)}
#themeSwitch svg{position:absolute;transition:opacity .25s var(--ease)}
#themeSwitch .ic-sun{color:#ff9f0a;opacity:1}
#themeSwitch .ic-moon{color:#0071e3;opacity:0}
:root[data-theme="dark"] #themeSwitch .ic-sun{opacity:0}
:root[data-theme="dark"] #themeSwitch .ic-moon{opacity:1}
/* 1100, not 1024: the capsule is centred on the viewport while the brand and the
   theme switch sit inside the 1080px .navin, so the clearance on the brand side
   stops shrinking above 1080px and is the same at every wider screen.
   Measured: nine tabs at 15px side padding = 679px capsule, 77px clear.
   The padding was briefly 12px to fit a tenth tab; that tab is gone, so it is back
   to the value measured for nine.
   Re-measure both gaps here if a tenth tab is ever added again. */
@media(max-width:1100px){
  /* menu button first, theme switch stays last in the corner */
  #menuBtn{display:flex}
  .navcenter{position:static;transform:none}
  .navlinks{
    position:fixed;top:var(--nav-h);left:0;right:0;z-index:99;
    flex-direction:column;align-items:stretch;gap:0;padding:12px 22px 24px;border-radius:0;
    background:var(--menu-bg);border:none;
    border-bottom:1px solid var(--nav-border);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    box-shadow:0 18px 40px rgba(0,0,0,.14);
    opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
    transition:opacity .35s var(--ease),transform .35s var(--ease);
  }
  .navlinks.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  .navlinks a{font-size:17px;padding:15px 6px;border-radius:0;border-bottom:1px solid var(--nav-border)}
  .navlinks a:last-child{border-bottom:none}
  .navlinks a:hover{background:none}
  .navlinks a[aria-current="page"]{color:var(--link);font-weight:600}
  /* in the drop-down menu the marker is a small blue bar, and the menu is shut
     on load - nothing should fly anywhere, so the name comes off here */
  .navlinks a[aria-current="page"]::before{
    inset:auto auto auto -8px;top:50%;width:3px;height:22px;transform:translateY(-50%);
    border-radius:2px;background:var(--link);box-shadow:none;view-transition-name:none;
  }
  .navpill{display:none}
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 26px;border-radius:999px;
  background:var(--blue);color:#fff;font-size:17px;font-weight:500;cursor:pointer;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.btn:hover{background:var(--blue-hover);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,113,227,.28)}
.btn:active{transform:scale(.985)}
.btn-ghost{background:rgba(0,0,0,.05);color:var(--ink)}
.btn-ghost:hover{background:rgba(0,0,0,.09);box-shadow:none}
.btn-light{background:#f5f5f7;color:#000}
.btn-light:hover{background:#fff;box-shadow:0 8px 24px rgba(255,255,255,.15)}
.btn-glass{background:rgba(255,255,255,.1);color:#f5f5f7;border:1px solid rgba(255,255,255,.22)}
.btn-glass:hover{background:rgba(255,255,255,.16);box-shadow:none}
.tlink{font-size:17px;font-weight:500;display:inline-flex;align-items:center;gap:5px;min-height:48px}
.tlink:hover{text-decoration:underline}
.tlink .chev{font-weight:400}

/* ============ Hero ============ */
.hero{
  padding:calc(var(--nav-h) + 78px) 0 96px;text-align:center;
  background:var(--hero-bg);
}
.hero .kicker{
  display:block;font-size:15px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.hero h1{
  font-size:clamp(54px,10vw,108px);font-weight:700;letter-spacing:-.03em;line-height:1.02;
  margin:14px 0 10px;
}
.hero .tagline{
  font-size:clamp(26px,4.4vw,50px);font-weight:700;letter-spacing:-.022em;line-height:1.12;
  max-width:900px;margin:0 auto;text-wrap:balance;
}
.hero p.lead{
  font-size:clamp(17px,2.3vw,21px);color:var(--muted);max-width:660px;margin:24px auto 0;
  text-wrap:pretty;
}
.hero .btnrow{display:flex;gap:18px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px}
.hero-enter{animation:heroIn .9s var(--ease-out) backwards;animation-delay:var(--d,0s)}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ============ Stats band ============ */
.stats-band{padding:100px 0}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:44px 28px;margin-top:64px;text-align:center;
}
@media(max-width:900px){.stats-grid{grid-template-columns:1fr 1fr;gap:52px 20px}}
.stat-b{
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;padding:34px 18px;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.stat-b b{
  display:block;font-size:clamp(46px,6.6vw,84px);font-weight:700;letter-spacing:-.03em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}
.stat-b span{display:block;margin-top:12px;font-size:16px;color:#a1a1a6;line-height:1.4}

/* ============ Bento ============ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
@media(max-width:900px){.bento{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.bento{grid-template-columns:1fr}}
.bcard{
  background:var(--glass);border-radius:var(--radius);padding:36px 34px;
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid var(--glass-border);
  box-shadow:var(--neu-out);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s var(--ease);
}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--neu-hover)}
.bcard.span2{grid-column:span 2}
@media(max-width:600px){.bcard.span2{grid-column:span 1}}
.bcard h3{font-size:23px;font-weight:700;letter-spacing:-.015em;margin-bottom:10px}
.bcard p{font-size:16.5px;color:var(--muted)}
.bcard p strong{color:var(--ink);font-weight:600}
.bcard .big{font-size:clamp(30px,3.4vw,40px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.bcard .cap{font-size:14px;color:var(--faint);margin-top:8px}
.bicon{
  width:46px;height:46px;border-radius:14px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(0,200,255,.12),rgba(124,58,237,.12));
  display:flex;align-items:center;justify-content:center;color:var(--link);
  box-shadow:var(--neu-out-sm);
}

/* ============ Experience ============ */
.xp{margin-top:64px;border-top:1px solid var(--hairline)}
.xp-row{
  display:grid;grid-template-columns:220px 1fr;gap:20px 44px;
  padding:44px 0;border-bottom:1px solid var(--hairline);
}
@media(max-width:734px){.xp-row{grid-template-columns:1fr;padding:34px 0}}
.xp-when{font-size:15px;font-weight:600;color:var(--link);letter-spacing:.02em;padding-top:4px}
.xp-body h3{font-size:23px;font-weight:700;letter-spacing:-.015em}
.xp-body .org{font-size:16px;color:var(--muted);margin:4px 0 16px}
.xp-body ul{list-style:none}
.xp-body li{
  font-size:16.5px;color:var(--muted);padding-left:20px;position:relative;margin-bottom:9px;line-height:1.55;
}
.xp-body li::before{
  content:"";position:absolute;left:2px;top:10px;width:6px;height:6px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--blue));
}

/* ============ Projects ============ */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}
@media(max-width:734px){.pgrid{grid-template-columns:1fr}}
.ptile{
  position:relative;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:var(--radius);padding:38px 36px;overflow:hidden;
  transition:transform .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.ptile:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.2);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ptile.feature{grid-column:1/-1}
.ptile::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(80% 90% at 85% 0%,rgba(37,99,235,.14),transparent 60%);
  pointer-events:none;
}
.ptile:hover::before{opacity:1}
.ptype{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#6ea8ff}
.ptile h3{font-size:clamp(24px,2.8vw,31px);font-weight:700;letter-spacing:-.018em;color:#f5f5f7;margin:10px 0 12px}
.ptile p{font-size:16.5px;color:#a1a1a6;max-width:640px}
.picon{
  width:50px;height:50px;border-radius:14px;margin-bottom:22px;color:#6ea8ff;
  background:rgba(110,168,255,.1);border:1px solid rgba(110,168,255,.18);
  display:flex;align-items:center;justify-content:center;
}

/* ============ AJ-Tools ============ */
.ribbon{
  background:var(--glass-strong);border-radius:var(--radius);padding:26px;margin-top:56px;
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--glass-border);
  box-shadow:var(--neu-out);
}
.rtabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--hairline);padding-bottom:14px;margin-bottom:6px}
.rtabs button{
  font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
  padding:8px 18px;border-radius:999px;border:1px solid transparent;
  background:transparent;color:var(--muted);
  transition:background .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease);
}
.rtabs button:hover{color:var(--ink);background:var(--hover-bg)}
.rtabs button[aria-selected="true"]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.rpanel[hidden]{display:none}
.rmeta{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);
  font-weight:600;padding:14px 0 4px}
.rgrp{
  display:grid;grid-template-columns:158px minmax(0,1fr);gap:20px;align-items:start;
  padding:15px 0;border-top:1px solid var(--hairline);
}
.rgl{font-size:12.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);padding-top:7px}
.rchips{display:flex;flex-wrap:wrap;gap:8px}
.rchips span{
  background:var(--neu-surface);border-radius:11px;padding:8px 14px;
  font-size:13px;color:var(--ink);font-weight:500;
  box-shadow:var(--neu-out-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}
html.js .rchips span:hover{transform:translateY(-2px);box-shadow:var(--neu-out)}
@media(max-width:734px){
  .rgrp{grid-template-columns:1fr;gap:10px;padding:14px 0}
  .rgl{padding-top:0}
  .rchips span{font-size:12.5px;padding:7px 12px}
}
@media(prefers-reduced-motion:reduce){html.js .rchips span:hover{transform:none}}
.brain{
  background:#000;color:#f5f5f7;border-radius:var(--radius);
  padding:clamp(36px,5vw,64px);margin-top:18px;position:relative;overflow:hidden;
}
.brain::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(70% 60% at 50% 0%,rgba(124,58,237,.18),transparent 65%);
  pointer-events:none;
}
.brain>*{position:relative}
.brain h3{font-size:clamp(28px,3.6vw,44px);font-weight:700;letter-spacing:-.02em}
.brain p.sub{color:#a1a1a6;max-width:720px}
.brain-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:44px 0}
@media(max-width:734px){.brain-stats{grid-template-columns:1fr}}
.brain-stat b{
  display:block;font-size:clamp(40px,5vw,64px);font-weight:700;letter-spacing:-.03em;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  font-variant-numeric:tabular-nums;
}
.brain-stat span{display:block;margin-top:10px;font-size:15px;color:#a1a1a6;line-height:1.45}
.brain ul{list-style:none;max-width:760px}
.brain li{font-size:16.5px;color:#a1a1a6;padding-left:24px;position:relative;margin-bottom:12px}
.brain li::before{
  content:"";position:absolute;left:0;top:8px;width:9px;height:9px;border-radius:3px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
}
.brain li strong{color:#f5f5f7;font-weight:600}

/* ============ Skills (specs table) ============ */
.specs{margin-top:56px;border-top:1px solid var(--hairline)}
.spec-row{
  display:grid;grid-template-columns:260px 1fr;gap:12px 44px;
  padding:26px 0;border-bottom:1px solid var(--hairline);
}
@media(max-width:734px){.spec-row{grid-template-columns:1fr;padding:22px 0}}
.spec-row h3{font-size:17px;font-weight:600}
.spec-row p{font-size:16.5px;color:var(--muted)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.chips span{
  font-size:14px;color:var(--ink);background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-radius:999px;padding:9px 18px;font-weight:500;
  box-shadow:var(--neu-out-sm);
}

/* ============ Contact ============ */
.contact{text-align:center}
.contact h2{
  font-size:clamp(44px,7vw,84px);font-weight:700;letter-spacing:-.028em;line-height:1.04;
}
.contact p.sub{margin:22px auto 0}
.crow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.cnote{margin-top:34px;color:#6e6e73;font-size:14px}

/* ============ Footer ============ */
footer{background:var(--bg-alt);padding:26px 0;border-top:1px solid var(--hairline)}
.foot{
  max-width:1080px;margin:0 auto;padding:0 22px;
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--faint);
}
.foot a{color:var(--muted)}

/* ============ Story / motion layer ============ */

/* so the timeline stroke can be tweened rather than snapped */
@property --draw{syntax:"<percentage>";inherits:false;initial-value:0%}

/* reading progress */
.progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:130;pointer-events:none}
.progress i{display:block;height:100%;background:var(--grad);transform:scaleX(0);transform-origin:0 50%}

/* line-masked text reveal (Apple-style) */
.rvt{display:block}
.rvt .ln{display:block;overflow:hidden;padding-bottom:.22em;margin-bottom:-.22em}
html.js .rvt .ln>i{display:block;font-style:inherit;transform:translateY(130%);opacity:0;
  transition:transform .95s var(--ease-out),opacity .8s var(--ease-out);transition-delay:var(--ld,0s)}
html.js .rvt.in .ln>i{transform:none;opacity:1}


/* ---- chapters ---- */
.chapter{position:relative}
.ch-top{display:flex;align-items:baseline;margin-bottom:18px}
.ch-eyebrow{font-size:12px;font-weight:650;letter-spacing:.19em;text-transform:uppercase;color:var(--faint)}
.ch-title{
  font-size:clamp(30px,5.4vw,62px);line-height:1.06;letter-spacing:-.035em;font-weight:700;
  max-width:17ch;
}
.ch-lead{
  margin-top:26px;max-width:60ch;font-size:clamp(17px,2.1vw,21px);
  line-height:1.62;color:var(--muted);
}
.ch-lead strong{color:var(--ink);font-weight:600}
.ch-lead + .ch-lead{margin-top:18px}

/* two-column chapters: the heading holds its place while the story scrolls past */
@media(min-width:1000px){
  .chapter .wrap{
    display:grid;grid-template-columns:minmax(300px,440px) minmax(0,1fr);
    column-gap:72px;align-items:start;
  }
  .ch-head{position:sticky;top:calc(var(--nav-h) + 56px)}
  .ch-title{max-width:none}
  .chapter:not(.chapter-wide) .ch-title{font-size:clamp(30px,4.4vw,52px)}
  .ch-body{min-width:0}
  .ch-body > :first-child{margin-top:0}
  /* the timeline chapter runs full width under its heading */
  .chapter-wide .wrap{display:block}
  .chapter-wide .ch-head{position:static}
  .chapter-wide .ch-title{max-width:17ch}
}
@media(min-width:1000px) and (prefers-reduced-motion:reduce){
  .ch-head{position:static}
}

/* pull quote */
.pull{
  margin:56px 0 0;padding-left:26px;border-left:3px solid transparent;
  border-image:var(--grad) 1;
  font-size:clamp(21px,3vw,31px);line-height:1.32;letter-spacing:-.022em;font-weight:600;
  max-width:22ch;
}

/* ---- ch01: the repetition stack ---- */

/* ---- ch02: the tooling ladder ---- */
.ladder{margin-top:52px;list-style:none;position:relative;padding-left:30px}
.ladder li{position:relative;padding-bottom:26px}
.ladder li:last-child{padding-bottom:0}
/* each step draws its own connector, so the rail stops at the last dot */
.ladder li::after{content:"";position:absolute;left:-26px;top:19px;bottom:-3px;width:2px;
  border-radius:2px;background:var(--grad);opacity:.4}
.ladder li:last-child::after{display:none}
.ladder li::before{content:"";position:absolute;left:-30px;top:6px;width:10px;height:10px;
  border-radius:50%;background:var(--bg);border:2px solid var(--hairline)}
.ladder li:last-child::before{border-color:var(--link);box-shadow:0 0 0 4px rgba(0,113,227,.15)}
.ladder b{display:block;font-size:17.5px;font-weight:650;letter-spacing:-.012em}
.ladder span{display:block;margin-top:4px;font-size:15px;color:var(--muted)}
html.js .ladder li{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out);transition-delay:var(--rd,0s)}
html.js .ladder.in li{opacity:1;transform:none}
.code-note{margin-top:22px;font-size:14px;color:var(--faint)}

/* ---- ch03: story timeline ---- */
.tl{position:relative;margin-top:64px;padding-left:34px}
.tl::before{
  content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;border-radius:2px;
  background:var(--hairline);
}
.tl::after{
  content:"";position:absolute;left:5px;top:6px;width:2px;border-radius:2px;
  height:var(--draw,0%);background:var(--grad);
}
@media(max-width:734px){.tl{padding-left:26px}}
.tl-item{position:relative;padding-bottom:62px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:"";position:absolute;left:-34px;top:8px;width:12px;height:12px;border-radius:50%;
  background:var(--bg);border:2px solid var(--hairline);transition:border-color .4s var(--ease),box-shadow .4s var(--ease);
}
@media(max-width:734px){.tl-item::before{left:-26px}}
.tl-item.lit::before{border-color:var(--link);box-shadow:0 0 0 5px rgba(0,113,227,.15)}
.tl-yr{font-size:13px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--link)}
.tl-item h3{font-size:clamp(20px,2.6vw,27px);letter-spacing:-.022em;margin-top:9px;font-weight:650}
.tl-org{margin-top:7px;font-size:14.5px;color:var(--faint)}
.tl-item p{margin-top:15px;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:62ch}
/* wide screens: year sits in its own column so the row uses the full measure */
@media(min-width:900px){
  .tl-item{display:grid;grid-template-columns:190px minmax(0,1fr);column-gap:32px}
  .tl-yr{grid-column:1;grid-row:1 / span 4;padding-top:7px}
  .tl-item h3,.tl-org,.tl-item p,.tl-stake{grid-column:2}
  .tl-stake{justify-self:start}
  .tl-item h3{margin-top:0}
}
.tl-stake{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 15px;
  border-radius:100px;border:1px solid var(--hairline);background:var(--glass);
  font-size:12.5px;font-weight:600;color:var(--muted);
}
.tl-stake::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grad)}

/* magnetic-ish button lift */
.btn,.tlink{will-change:transform}

/* card tilt/lift */
html.js .bcard,html.js .ptile{transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out),border-color .4s var(--ease)}
html.js .bcard:hover,html.js .ptile:hover{transform:translateY(-6px)}

@media(prefers-reduced-motion:reduce){
  html.js .rvt .ln>i{transform:none;opacity:1;transition:none}
  html.js .ladder li{opacity:1;transform:none;transition:none}
  .progress{display:none}
  .tl::after{display:none}
  html.js .bcard:hover,html.js .ptile:hover{transform:none}
}

/* ============ Print ============ */
@media print{
  @page{margin:14mm}
  html,body{background:#fff !important;color:#000 !important}
  nav,.skip,#themeSwitch,#menuBtn,.btnrow,.crow,.bicon,.picon,.chev,
  .progress,.rtabs{display:none !important}
  /* the ribbon now carries the real tool list, so print it — both tabs, compactly */
  .rpanel[hidden]{display:block !important}
  .rgrp{grid-template-columns:130px 1fr !important;padding:7px 0 !important;break-inside:avoid}
  .rchips span{box-shadow:none !important;border:1px solid #ccc !important;padding:3px 8px !important;
    font-size:8.5pt !important;border-radius:6px !important}
  .rmeta{padding:10px 0 2px !important}
  /* gradient-filled text is transparent — force it back to ink for paper */
  .grad-text,.stat-b b,.brain-stat b,.pull{
    -webkit-text-fill-color:#000 !important;color:#000 !important;background:none !important;
  }
  .ch-head{position:static !important}
  .chapter .wrap{display:block !important}
  .tl::after{display:none !important}
  /* decorative gradient blobs and hover glows */
  .hero::before,section::before,.ptile::before,.brain::before{display:none !important}
  section,.hero{padding:16pt 0 !important;break-inside:avoid}
  .hero,.sec-dark,.sec-alt,.brain,.stat-b,.bcard,.ptile,.chips span{
    background:#fff !important;background-image:none !important;color:#000 !important;
    box-shadow:none !important;border:1px solid #ccc !important;
  }
  .hero,.sec-dark,.sec-alt{border:0 !important}
  .sec-dark *,.brain *,.ptile *,.stat-b *,.bcard *,.cap,.big,.dim,.eyebrow,.kicker{color:#000 !important}
  .grad-text{-webkit-text-fill-color:#000 !important;color:#000 !important;background:none !important}
  .reveal,.hero-enter{opacity:1 !important;transform:none !important;filter:none !important}
  h1{font-size:30pt !important}
  h2,.head{font-size:17pt !important;break-after:avoid}
  h3{font-size:11pt !important;break-after:avoid}
  p,li,span{font-size:9.5pt !important;line-height:1.45 !important}
  .xp-row,.spec-row,.bcard,.ptile{break-inside:avoid}
  a{color:#000 !important;text-decoration:none}
  .contact a[href^="mailto:"]::after,.contact a[href^="tel:"]::after{content:""}
  footer{border-top:1px solid #ccc}
}


/* ==================================================================
   Multi-page additions - page headers, pager, CTA band, footer, and
   the cross-page view transition.
   ================================================================== */

@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vtOut .22s var(--ease) both}
  ::view-transition-new(root){animation:vtIn .42s var(--ease-out) both}
}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(14px)}}
#nav{view-transition-name:site-nav}

/* page header on inner pages */
.pagehead{
  position:relative;
  padding:calc(var(--nav-h) + 74px) 0 62px;
  background:var(--hero-bg);border-bottom:1px solid var(--hairline);
  --blobs:radial-gradient(600px 440px at 8% 20%,var(--b-cyan),transparent 65%),radial-gradient(620px 460px at 92% 30%,var(--b-violet),transparent 65%);
}
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--blobs)}
.pagehead>*{position:relative}
.pagehead h1{
  font-size:clamp(38px,6.2vw,74px);font-weight:700;letter-spacing:-.028em;line-height:1.05;
  max-width:940px;text-wrap:balance;
}
.pagehead h1 .dim{color:var(--faint)}
.pagehead p.sub{max-width:700px}
.crumbs{font-size:13px;color:var(--faint);margin-bottom:16px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--link)}

/* a chapter that opens a page clears the fixed bar itself.
   .chapter .wrap is a two-column grid, so the breadcrumb has to span it or it
   takes the heading's cell and pushes the columns over. */
.chapter.first{padding-top:calc(var(--nav-h) + 44px)}
.chapter.first .crumbs{grid-column:1/-1;margin-bottom:34px}
@media(max-width:734px){.chapter.first{padding-top:calc(var(--nav-h) + 30px)}}

.sec-tight{padding-top:74px}
@media(max-width:734px){.sec-tight{padding-top:56px}}

/* explore grid on the home page */
.xgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
@media(max-width:1024px){.xgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.xgrid{grid-template-columns:1fr}}
.xcard{
  position:relative;display:block;overflow:hidden;color:inherit;
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--neu-out);padding:30px 28px 28px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.xcard::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(0,113,227,.12),transparent 62%);
  transition:opacity .4s var(--ease);
}
.xcard:hover{transform:translateY(-5px);box-shadow:var(--neu-hover)}
.xcard:hover::after{opacity:1}
.xcard h3{font-size:21px;font-weight:700;letter-spacing:-.015em;margin-bottom:8px;color:var(--ink)}
.xcard p{font-size:15.5px;color:var(--muted)}
.xcard .go{display:inline-flex;align-items:center;gap:5px;margin-top:18px;font-size:14.5px;font-weight:600;color:var(--link)}
.xcard .go .chev{transition:transform .3s var(--ease-out)}
.xcard:hover .go .chev{transform:translateX(4px)}

/* CTA band at the foot of inner pages */
.ctaband{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--neu-out);padding:40px clamp(26px,4vw,48px);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
}
.ctaband h2{font-size:clamp(24px,3.2vw,34px);font-weight:700;letter-spacing:-.02em;line-height:1.15}
.ctaband p{font-size:16px;color:var(--muted);margin-top:8px;max-width:520px}
.ctaband .btnrow{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* WhatsApp glyph keeps its own green on an otherwise neutral button */
.ic-wa{color:#25D366}

/* ---- animated flock behind the hero (home page only) ----
   The canvas is transparent, so the hero gradient and the ambient blobs still
   show through and the birds fly over them. It sits under the hero content and
   ignores the pointer, so nothing here can swallow a click on the buttons.
   The ID beats the `.hero > *{position:relative}` rule. */
#vanta-hero{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease);
}
/* held back so the birds stay scenery and the name stays the loudest thing */
#vanta-hero.on{opacity:.7}
#vanta-hero canvas{display:block}
.hero{overflow:hidden}
/* On the AJ AI Brain page the flock sits behind the opening chapter instead of
   a hero. It covers the heading and fades out before the reading column, so it
   decorates the top of the page without flying through the text. */
.chapter.has-birds{overflow:hidden}
.chapter.has-birds #vanta-hero{
  bottom:auto;height:min(78%,640px);
  -webkit-mask-image:linear-gradient(to bottom,#000 52%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 52%,transparent 100%);
}
.chapter.has-birds #vanta-hero.on{opacity:.5}
@media(prefers-reduced-motion:reduce){#vanta-hero{display:none}}
@media print{#vanta-hero{display:none !important}}
/* High Contrast strips decoration; canvas pixels are exempt from forced-colour
   substitution, so the flock has to remove itself */
@media(forced-colors:active){#vanta-hero{display:none}}

/* previous / next - kept for the 404 shortcuts */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
@media(max-width:600px){.pager{grid-template-columns:1fr}}
.pcard{
  display:block;padding:24px 26px;border-radius:22px;color:inherit;
  background:var(--glass);border:1px solid var(--glass-border);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
  box-shadow:var(--neu-out-sm);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pcard:hover{transform:translateY(-3px);box-shadow:var(--neu-out)}
.pcard small{display:block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.pcard b{font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--ink);display:flex;align-items:center;gap:8px}
.pcard.next{text-align:right}
.pcard.next b{justify-content:flex-end}
.pcard .chev{color:var(--link);transition:transform .3s var(--ease-out)}
.pcard.next:hover .chev{transform:translateX(4px)}
.pcard.prev:hover .chev{transform:translateX(-4px)}

/* fuller footer */
footer{padding:52px 0 26px}
.fgrid{
  max-width:1080px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;
}
@media(max-width:734px){.fgrid{grid-template-columns:1fr 1fr;gap:28px}}
.fgrid h4{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.fgrid ul{list-style:none;display:grid;gap:10px}
.fgrid a{font-size:15px;color:var(--muted)}
.fgrid a:hover{color:var(--link)}
.fbrand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink);margin-bottom:12px}
.fbrand svg{width:26px;height:26px}
.fabout{font-size:15px;color:var(--muted);max-width:330px}
.foot{
  max-width:1080px;margin:38px auto 0;padding:20px 22px 0;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--faint);
}
.foot a{color:var(--muted)}

/* light follows the cursor across cards */
.bcard,.ptile{position:relative;overflow:hidden}
.bcard::after,.ptile::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(110,168,255,.14),transparent 62%);
  transition:opacity .4s var(--ease);
}
.bcard:hover::after,.ptile:hover::after{opacity:1}

/* 404 */
.nf{min-height:70vh;display:flex;align-items:center;text-align:center;padding-top:var(--nav-h)}
.nf h1{font-size:clamp(64px,14vw,150px);font-weight:700;letter-spacing:-.04em;line-height:1}
.nf p{font-size:19px;color:var(--muted);margin:14px auto 30px;max-width:520px}
.nf .btnrow{justify-content:center}