/* ── Global Resets & Base Styles ─────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{position:relative;margin:0;background:var(--neutral-900);color:var(--neutral-300);
     font:400 16px/26px var(--sans);letter-spacing:var(--track);overflow-x:hidden}
a{color:inherit}
img,svg{display:block}

.page{position:relative;z-index:1;width:692px;max-width:calc(100% - 48px);margin:0 auto;padding:96px 0 140px;
      display:flex;flex-direction:column;gap:120px}
.stack{display:flex;flex-direction:column;gap:120px}

/* ── hero spotlight ─────────────────────────────────────────────── */
.spotlight{position:absolute;top:0;left:0;right:0;height:640px;max-height:70vh;
  overflow:hidden;pointer-events:none;z-index:0}
.spotlight-group{position:absolute;top:0;width:100vw;height:100%}
.spotlight-group--left{left:0;animation:spotlight-drift-left 7s ease-in-out infinite}
.spotlight-group--right{right:0;animation:spotlight-drift-right 7s ease-in-out infinite}
.spotlight-blob{position:absolute;top:0;display:block;width:240px;height:1380px}
.spotlight-group--left .spotlight-blob{left:0}
.spotlight-group--right .spotlight-blob{right:0}
.spotlight-blob--main{width:560px;
  background:radial-gradient(68.54% 68.72% at 55.02% 31.46%,hsla(210,100%,85%,.10) 0,hsla(210,100%,55%,.03) 50%,hsla(210,100%,45%,0) 80%)}
.spotlight-group--left .spotlight-blob--main{transform:translateY(-350px) rotate(-45deg)}
.spotlight-group--right .spotlight-blob--main{transform:translateY(-350px) rotate(45deg)}
.spotlight-blob--small-a{transform-origin:top left;
  background:radial-gradient(50% 50% at 50% 50%,hsla(210,100%,85%,.07) 0,hsla(210,100%,55%,.02) 80%,transparent 100%)}
.spotlight-group--left .spotlight-blob--small-a{transform:rotate(-45deg) translate(5%,-50%)}
.spotlight-group--right .spotlight-blob--small-a{transform-origin:top right;transform:rotate(45deg) translate(-5%,-50%)}
.spotlight-blob--small-b{transform-origin:top left;
  background:radial-gradient(50% 50% at 50% 50%,hsla(210,100%,85%,.05) 0,hsla(210,100%,45%,.02) 80%,transparent 100%)}
.spotlight-group--left .spotlight-blob--small-b{transform:rotate(-45deg) translate(-180%,-70%)}
.spotlight-group--right .spotlight-blob--small-b{transform-origin:top right;transform:rotate(45deg) translate(180%,-70%)}

@keyframes spotlight-drift-left{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(100px)}
}
@keyframes spotlight-drift-right{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-100px)}
}

/* ── header ─────────────────────────────────────────────────────── */
.intro{display:flex;flex-direction:column;gap:32px}
.header{display:flex;gap:14px;align-items:center}
.avatar{width:60px;height:60px;flex:0 0 auto;border-radius:100px;
        background:var(--surface);border:1px solid var(--zinc-800);
        display:grid;place-items:center;padding:0;cursor:pointer;
        -webkit-tap-highlight-color:transparent}
.avatar .disc{width:54px;height:54px;border-radius:50%;background:var(--neutral-950);
              display:grid;place-items:center;overflow:hidden}
.avatar svg{width:48px;height:48px;color:var(--neutral-100)}
.avatar .tlogo-disc{fill:none}
.avatar .tlogo-thread{fill:none;stroke:currentColor;stroke-width:1.6;
  vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.avatar:focus-visible{outline:2px solid var(--neutral-300);outline-offset:3px}

.who{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.name{font:400 24px/26px var(--serif);letter-spacing:var(--track);
      color:var(--neutral-100);margin:0}
.meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.meta p{margin:0;white-space:nowrap}
.meta .at{width:16px;height:16px;flex:0 0 auto;color:var(--neutral-300)}
.employer{display:flex;gap:4px;align-items:center;text-decoration:none}
.employer .mark{width:20px;height:20px;flex:0 0 auto;border-radius:5px;object-fit:cover}
.employer span{text-decoration:underline;text-underline-offset:2px}
.bio{margin:0}

/* ── section headings ───────────────────────────────────────────── */
.h{font:400 18px/26px var(--serif);letter-spacing:var(--track);
   color:var(--neutral-100);margin:0}
.h.soft{color:var(--neutral-300)}
.sec{display:flex;flex-direction:column;gap:24px}
.sec-head{display:flex;gap:24px;align-items:center}
.sec-head .h{flex:1;min-width:0}

/* ── selected works ─────────────────────────────────────────────── */
.grid{display:flex;flex-direction:column;gap:20px}
.grid .row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center}
.card{position:relative;flex:1 0 0;min-width:0;height:300px;padding:1px;border-radius:16px;
      background:var(--surface);border:1px solid var(--neutral-800);
      display:flex;align-items:flex-start;text-decoration:none;
      transition:border-color .3s ease,background .3s ease}
.card:hover{border-color:rgba(255,255,255,0.2);background:rgba(38,38,38,.45)}

/* ── Aceternity Glowing Effect Border Glow ─────────────────────── */
.card::before{
  content:'';position:absolute;inset:-1px;border-radius:16px;padding:1.5px;
  background:radial-gradient(
    280px circle at var(--glow-x,50%) var(--glow-y,50%),
    rgba(56,189,248,0.9) 0%,
    rgba(129,140,248,0.65) 30%,
    rgba(192,132,252,0.4) 60%,
    transparent 80%
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  pointer-events:none;
  opacity:var(--glow-opacity,0);
  transition:opacity .35s ease;
  z-index:5;
}

/* ── Aceternity Ambient Glow Behind Card ────────────────────────── */
.card::after{
  content:'';position:absolute;inset:-12px;border-radius:24px;
  background:radial-gradient(
    220px circle at var(--glow-x,50%) var(--glow-y,50%),
    rgba(56,189,248,0.22) 0%,
    rgba(129,140,248,0.12) 40%,
    transparent 70%
  );
  pointer-events:none;
  opacity:var(--glow-opacity,0);
  transition:opacity .35s ease;
  z-index:0;
  filter:blur(12px);
}

.card .inner{position:relative;z-index:2;flex:1 0 0;min-width:0;height:100%;display:flex;flex-direction:column;
  border-radius:15px;overflow:hidden;background:var(--neutral-900);
  border:1px solid var(--neutral-800)}
.card .art{flex:1 0 0;min-height:0;max-height:180px;width:100%;background:#fff;
  overflow:hidden;display:grid;place-items:center}
.card .art img{width:100%;height:100%;object-fit:cover}
.card .txt{display:flex;flex-direction:column;gap:4px;padding:16px;
  overflow:hidden;font-family:var(--dm);letter-spacing:0}
.card .txt h3{margin:0;font:500 18px/normal var(--dm);color:var(--card-title)}
.card .txt p{margin:0;font:400 14px/normal var(--dm);color:var(--card-desc)}

/* ── icon button ────────────────────────────────────────────────── */
.iconbtn{position:relative;width:32px;height:32px;flex:0 0 auto;border:0;padding:6px;border-radius:6px;
  background:var(--surface-solid);color:var(--neutral-300);cursor:pointer;
  display:grid;place-items:center;transition:color .2s,background .2s}
.iconbtn:hover{color:var(--neutral-100);background:rgba(48,48,48,.95)}
.iconbtn svg,
.iconbtn img{width:20px;height:20px;display:block}
.iconbtn:focus-visible{outline:2px solid var(--neutral-300);outline-offset:2px}

.icontooltip{position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--neutral-950);color:var(--neutral-100);
  border:1px solid var(--neutral-800);padding:4px 8px;border-radius:6px;
  font:400 12px/1.2 var(--dm);letter-spacing:0;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;z-index:20;
  box-shadow:0 6px 16px rgba(0,0,0,.6);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.iconbtn:hover .icontooltip,
.iconbtn:focus-visible .icontooltip{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}

/* ── skills orbit ───────────────────────────────────────────────── */
.orbit{position:relative;height:420px;margin-top:-8px;overflow:hidden;border-radius:20px}
.stars-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0.85}
.chip{position:absolute;left:50%;top:50%;margin:-28px 0 0 -28px;width:56px;height:56px;
  padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;
  filter:blur(var(--b));opacity:var(--o);transition:opacity .4s,filter .4s;will-change:transform;
  perspective:800px}
.chip .tile{position:relative;overflow:hidden;width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;transform-style:preserve-3d;
  border:1.5px solid transparent;color:var(--neutral-300);transform:scale(var(--s));
  transition:transform .55s cubic-bezier(.22,1,.28,1),background .3s,border-color .3s,color .3s}
.chip .tile::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),
    rgba(255,255,255,.9) 0%,rgba(255,255,255,.35) 22%,transparent 60%);
  mix-blend-mode:overlay;opacity:var(--glare-o,0);transition:opacity .3s ease}
.warp-canvas{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);pointer-events:none;z-index:1;opacity:0;transition:opacity .4s ease}
.chip.on .warp-canvas{opacity:1}
.chip svg,
.chip img.skill-icon{position:relative;z-index:2;width:24px;height:24px;object-fit:contain}
.chip .nm{position:absolute;top:100%;left:50%;transform:translate(-50%,6px);
  font:400 16px/1 var(--dm);letter-spacing:var(--track);text-transform:none;
  color:#8a8a92;white-space:nowrap;opacity:0;transition:opacity .25s;pointer-events:none}
.chip:hover .nm{opacity:1}
.chip:hover .tile{color:var(--neutral-100);border-color:var(--neutral-800)}
.chip.on{filter:none;opacity:1;z-index:4}
.chip.on .tile{transform:scale(1.95);background:var(--neutral-950);
  border-color:var(--neutral-800);color:var(--neutral-100);
  box-shadow:0 12px 30px -8px rgba(0,0,0,.5),0 30px 60px -20px #000}
.chip.on .nm{opacity:1;font:400 16px/1 var(--dm);color:var(--neutral-100);transform:translate(-50%,40px)}

/* ── skills list view ───────────────────────────────────────────── */
.skills-list{display:flex;flex-wrap:wrap;gap:10px 12px;padding:8px 0 16px}
.skill-tag{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:10px;
  background:var(--surface);border:1px solid var(--neutral-800);
  color:var(--neutral-300);font:400 14px/1 var(--dm);letter-spacing:var(--track);
  transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
  user-select:none;cursor:default;text-decoration:none}
.skill-tag:hover{transform:translateY(-2px);background:rgba(38,38,38,.65);
  border-color:#3d3d3d;color:var(--neutral-100)}
.skill-tag.skill-more{cursor:pointer;color:var(--neutral-100);border-color:#3a3a3a;
  text-decoration:underline;text-underline-offset:3px}
.skill-tag .skill-icon{width:15px;height:15px;flex:0 0 auto;object-fit:contain;color:var(--neutral-300);
  transition:color .2s ease}
.skill-tag:hover .skill-icon{color:var(--neutral-100)}

/* ── bookshelf ──────────────────────────────────────────────────── */
.shelf{display:flex;align-items:center}
.spines{display:flex;gap:8px;align-items:center;flex-wrap:nowrap}
.book{position:relative;height:208px;padding:4px;border-radius:4px;background:var(--surface);
  border:1px solid var(--neutral-800);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent;
  transition:border-color .3s ease,background .3s ease}
.book:hover{border-color:#3d3d3d;background:rgba(38,38,38,.5)}
.book:focus-visible{outline:2px solid var(--neutral-300);outline-offset:2px}
.btooltip{position:absolute;bottom:calc(100% + 8px);left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--neutral-950);color:var(--neutral-100);
  border:1px solid var(--neutral-800);padding:5px 9px;border-radius:6px;
  font:400 12px/1.2 var(--dm);letter-spacing:0;white-space:nowrap;
  opacity:0;visibility:hidden;pointer-events:none;z-index:20;
  box-shadow:0 6px 16px rgba(0,0,0,.6);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
.book:not(.open):hover .btooltip,
.book:not(.open):focus-visible .btooltip{
  opacity:1;visibility:visible;
  transform:translateX(-50%) translateY(0)}
.book .slot{position:relative;height:200px;width:var(--w);border-radius:2px;
  overflow:hidden;background:var(--c);
  transition:width .62s cubic-bezier(.22,.9,.24,1)}
.book .spineart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:opacity .28s ease;user-select:none}
.book .front{position:absolute;inset:0;display:flex;opacity:0;
  transition:opacity .3s ease;background:var(--c)}
.book .coverart{width:100%;height:100%;object-fit:cover}
.book .fspine{width:20px;height:100%;object-fit:cover;flex:0 0 auto;
  box-shadow:2px 0 8px -2px rgba(0,0,0,.55)}
.book .fbody{flex:1;min-width:0;display:flex;flex-direction:column;
  justify-content:space-between;padding:18px 16px;text-align:left}
.book .ft{font:500 16px/1.25 var(--dm);letter-spacing:-.01em;color:var(--ink)}
.book .fa{font:400 10px/1 var(--dm);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);opacity:.7}
.book.open .slot{width:138px}
.book.open .spineart{opacity:0}
.book.open .front{opacity:1;transition-delay:.18s}
.tilt{display:inline-flex;transform:rotate(-5deg);transition:transform .4s ease}
.tilt:has(.book.open){transform:none}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms!important}
  .spotlight-group{animation-duration:1ms!important;animation-iteration-count:1!important}
}
@media (max-width:760px){
  .page{gap:88px;padding-top:56px}
  .grid .row{flex-direction:column}
  .card{width:100%;flex:none}
  .shelf{overflow-x:auto;padding-bottom:10px;margin:0 -24px;padding-left:24px;padding-right:24px}
  .orbit{height:340px}
  .spotlight{height:420px}
}