/* ============================================================
   WORKBENCH DS · STUDIO GRAY · v1.0
   shyamgole.com — shared stylesheet
   ============================================================ */

:root{
  /* ---- Color tokens ---- */
  --page:#F4F6F9;
  --board:#E9EDF2;
  --paper:#FFFFFF;
  --ink:#232A33;
  --ink-2:#57616E;
  --ink-3:#8A93A0;
  --line:#DEE4EB;

  --green:#0FA36B;
  --green-deep:#0B7A50;
  --marker:#FFD23F;
  --thread:#C43C3C;

  --note-y:#FFF3A6;  --note-y-ink:#4A3D00;
  --note-g:#CDEEDD;  --note-g-ink:#0B4A33;
  --note-p:#FFD9E1;  --note-p-ink:#6B1E35;
  --tape:rgba(15,163,107,.35);

  /* ---- Type ---- */
  --font-display:'Sora',sans-serif;
  --font-note:'Kalam',cursive;
  --font-mono:'IBM Plex Mono',monospace;

  /* ---- Space (4px base) ---- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* ---- Radius ---- */
  --r-note:2px; --r-btn:8px; --r-card:12px; --r-tag:3px;

  /* ---- Elevation ---- */
  --sh-note:0 8px 16px rgba(35,42,51,.18);
  --sh-note-lift:0 16px 28px rgba(35,42,51,.24);
  --sh-card:0 1px 2px rgba(35,42,51,.06);
  --sh-card-hover:0 10px 24px rgba(35,42,51,.12);
  --sh-btn:0 4px 0 var(--green-deep);

  /* ---- Motion ---- */
  --t-fast:.15s; --t-base:.25s; --t-slow:.4s;
  --ease:cubic-bezier(.2,.8,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-display);background:var(--page);color:var(--ink);line-height:1.65;font-size:16px;}
img{max-width:100%;display:block;}
::selection{background:var(--marker);color:#4A3D00;}

.board{background:var(--board);background-image:radial-gradient(rgba(35,42,51,.12) 1px,transparent 1px);background-size:20px 20px;}
.wrap{max-width:1080px;margin:0 auto;padding:0 5vw;}
.section{padding:var(--s9) 0;}
@media(max-width:640px){.section{padding:var(--s8) 0;}}

h1,h2,h3{letter-spacing:-.02em;}
.display{font-size:clamp(34px,5vw,58px);font-weight:800;letter-spacing:-.025em;line-height:1.08;}
.h2{font-size:28px;font-weight:800;}
.h3{font-size:20px;font-weight:700;}
.lead{color:var(--ink-2);max-width:56ch;}
.small{font-size:13.5px;color:var(--ink-2);}
.spec{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);}
.measure{max-width:68ch;}

a:focus-visible,button:focus-visible,.chip:focus-visible{outline:3px solid var(--green);outline-offset:2px;}

/* ============ Eyebrow, mark, metric ============ */
.eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;background:var(--ink);color:#fff;padding:5px 10px;border-radius:var(--r-tag);display:inline-block;transform:rotate(-1.5deg);}
.eyebrow.y{background:var(--marker);color:#4A3D00;}
.eyebrow.flat{transform:none;}
mark.hl{background:linear-gradient(transparent 55%,var(--marker) 55%);color:inherit;}
.metric{font-family:var(--font-mono);font-size:13px;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 12px;display:inline-flex;align-items:baseline;gap:8px;}
.metric b{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--green);}

/* ============ Buttons ============ */
.btn{display:inline-block;font-family:var(--font-display);font-size:14px;font-weight:600;padding:12px 22px;border-radius:var(--r-btn);border:0;cursor:pointer;text-decoration:none;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast);}
.btn-primary{background:var(--green);color:#fff;box-shadow:var(--sh-btn);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--green-deep);}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 var(--green-deep);}
.btn-secondary{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);}
.btn-secondary:hover{background:var(--ink);color:#fff;}
.btn-ghost{background:transparent;color:var(--ink-2);padding:12px 14px;}
.btn-ghost:hover{color:var(--ink);background:rgba(35,42,51,.06);}

/* ============ Sticky notes ============ */
.note{position:relative;width:130px;padding:16px 12px 18px;font-family:var(--font-note);font-size:15px;line-height:1.3;color:var(--note-y-ink);background:var(--note-y);box-shadow:var(--sh-note);border-radius:var(--r-note);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);}
.note.taped::before{content:'';position:absolute;top:-8px;left:50%;translate:-50% 0;width:38px;height:14px;background:var(--tape);transform:rotate(-2deg);}
.note.g{background:var(--note-g);color:var(--note-g-ink);}
.note.p{background:var(--note-p);color:var(--note-p-ink);}
.note:hover{transform:rotate(0deg) translateY(-6px) scale(1.04) !important;box-shadow:var(--sh-note-lift);z-index:2;}
.note .n-tag{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;opacity:.65;display:block;margin-bottom:4px;}

/* ============ Cards ============ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5);box-shadow:var(--sh-card);}
.card-pin{position:relative;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);}
.card-pin::before{content:'';position:absolute;top:-9px;left:50%;translate:-50%;width:14px;height:14px;border-radius:50%;background:var(--thread);box-shadow:0 2px 4px rgba(35,42,51,.3);z-index:1;}
.card-pin:hover{transform:translateY(-6px) rotate(.4deg);box-shadow:var(--sh-card-hover);}
.card h4{font-size:16px;font-weight:700;margin-bottom:4px;}
.card .c-sub{font-size:13.5px;color:var(--ink-2);}
a.card{display:block;text-decoration:none;color:inherit;}

.sheet{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s6);box-shadow:var(--sh-note);}
.sheet .eyebrow{transform:none;margin-bottom:var(--s3);}
@media(max-width:640px){.sheet{padding:var(--s5);}}

/* ============ Nav ============ */
.nav{position:sticky;top:0;z-index:50;background:rgba(244,246,249,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:1080px;margin:0 auto;padding:12px 5vw;display:flex;align-items:center;gap:18px;}
.nav-logo{font-family:var(--font-note);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;transform:rotate(-2deg);display:inline-block;}
.nav-spacer{flex:1;}
.nav-a{font-size:13.5px;font-weight:600;color:var(--ink-2);text-decoration:none;position:relative;padding:4px 2px;}
.nav-a:hover{color:var(--ink);}
.nav-a.on{color:var(--ink);}
.nav-a.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(transparent 30%,var(--marker) 30%);z-index:-1;transform:rotate(-1deg);}
.nav-burger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-right:-8px;}
.nav-burger span{display:block;width:22px;height:2.5px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform var(--t-base) var(--ease),opacity var(--t-base);}
@media(max-width:760px){
  .nav-links{display:none;}
  .nav-burger{display:block;}
}
/* Mobile menu — full-screen note wall */
.mobile-menu{position:fixed;inset:0;z-index:49;background:var(--board);background-image:radial-gradient(rgba(35,42,51,.12) 1px,transparent 1px);background-size:20px 20px;display:none;padding:96px 8vw 40px;}
.mobile-menu.open{display:block;}
.mobile-menu a{display:inline-block;font-family:var(--font-note);font-size:22px;text-decoration:none;padding:18px 22px;margin:10px 8px;border-radius:var(--r-note);box-shadow:var(--sh-note);background:var(--note-y);color:var(--note-y-ink);}
.mobile-menu a:nth-child(2){background:var(--note-g);color:var(--note-g-ink);transform:rotate(2deg);}
.mobile-menu a:nth-child(3){background:var(--note-p);color:var(--note-p-ink);transform:rotate(-1.5deg);}
.mobile-menu a:nth-child(4){background:var(--note-y);color:var(--note-y-ink);transform:rotate(3deg);}
.mobile-menu a:nth-child(5){background:var(--note-g);color:var(--note-g-ink);transform:rotate(-3deg);}
.mobile-menu a:first-child{transform:rotate(-2deg);}
body.menu-open{overflow:hidden;}
body.menu-open .nav-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
body.menu-open .nav-burger span:nth-child(2){opacity:0;}
body.menu-open .nav-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

/* ============ Contact chips ============ */
.chip{font-family:var(--font-mono);font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-btn);padding:10px 14px;display:inline-flex;align-items:center;gap:10px;cursor:pointer;transition:border-color var(--t-fast),transform var(--t-fast) var(--ease);color:var(--ink);}
.chip:hover{border-color:var(--green);transform:translateY(-2px);}
.chip svg{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:2;opacity:0;transition:opacity var(--t-fast);}
.chip:hover svg{opacity:1;stroke:var(--green);}
.chip.copied{border-color:var(--green);color:var(--green-deep);}

/* ============ Timeline ============ */
.tl{position:relative;padding-left:26px;max-width:620px;}
.tl::before{content:'';position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);}
.tl-item{position:relative;padding-bottom:var(--s6);}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:'';position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid var(--green);}
.tl-item .t-role{font-weight:700;font-size:16px;}
.tl-item .t-date{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.06em;}
.tl-item .t-did{font-size:14px;color:var(--ink-2);margin-top:4px;max-width:56ch;}
.tl-note{display:inline-block;font-family:var(--font-note);font-size:13.5px;background:var(--note-p);color:var(--note-p-ink);padding:8px 12px;border-radius:var(--r-note);box-shadow:var(--sh-note);transform:rotate(-1.5deg);margin-top:10px;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);}
.tl-note:hover{transform:rotate(0deg) translateY(-4px);box-shadow:var(--sh-note-lift);}

/* ============ Grids / helpers ============ */
.flex{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s5);}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s5);}
.mt2{margin-top:var(--s2);}.mt3{margin-top:var(--s3);}.mt4{margin-top:var(--s4);}
.mt5{margin-top:var(--s5);}.mt6{margin-top:var(--s6);}.mt7{margin-top:var(--s7);}

/* ============ Scroll reveal ============ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-drop{opacity:0;transform:translateY(-50px) rotate(var(--sr,0deg));transition:opacity .55s var(--ease),transform .55s var(--ease);}
.reveal-drop.in{opacity:1;transform:translateY(0) rotate(var(--sr,0deg));}
.reveal-l{opacity:0;transform:translateX(-44px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal-r{opacity:0;transform:translateX(44px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.reveal-l.in,.reveal-r.in{opacity:1;transform:none;}
[data-stagger] > *{transition-delay:calc(var(--i,0)*.12s);}

/* ============ Journey — pinned notes & the red thread ============ */
.jz{position:relative;margin-top:var(--s7);}
.jz-thread{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:visible;}
.jz-thread path{fill:none;stroke:var(--thread);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 1px 1px rgba(196,60,60,.3));}
.jz-item{position:relative;width:50%;padding:14px 30px 68px 0;z-index:1;}
.jz-item:last-child{padding-bottom:8px;}
.jz-item.right{margin-left:50%;padding:14px 0 68px 30px;}
.jz-item:last-child.right{padding-bottom:8px;}

/* the note on the wall */
.jz-note{position:relative;max-width:400px;margin-right:auto;padding:24px 24px 20px;border-radius:var(--r-note);box-shadow:var(--sh-note);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);}
.jz-item.right .jz-note{margin-right:0;margin-left:auto;}
.jz-item:nth-child(odd) .jz-note{transform:rotate(-1.5deg);}
.jz-item:nth-child(even) .jz-note{transform:rotate(1.5deg);}
.jz-note:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--sh-note-lift);}
.jz-note.y{background:var(--note-y);color:var(--note-y-ink);}
.jz-note.g{background:var(--note-g);color:var(--note-g-ink);}
.jz-note.p{background:var(--note-p);color:var(--note-p-ink);}

/* the pin the thread ties to */
.jz-note::after{content:'';position:absolute;top:-7px;left:50%;translate:-50%;width:15px;height:15px;border-radius:50%;background:var(--ink-3);box-shadow:0 2px 5px rgba(35,42,51,.35),inset 0 -2px 3px rgba(0,0,0,.15);transition:background .4s,transform .4s var(--ease);z-index:2;}
.jz-item.lit .jz-note::after{background:var(--thread);transform:scale(1.2);}

/* note content */
.jz-note .j-date{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.15em;opacity:.65;display:block;}
.jz-note h3{font-family:var(--font-note);font-weight:700;font-size:24px;line-height:1.15;margin-top:7px;}
.jz-note ul{list-style:none;margin:13px 0 0;padding:0;}
.jz-note li{position:relative;font-family:var(--font-display);font-size:13px;font-weight:500;line-height:1.5;padding-left:21px;margin-bottom:8px;opacity:.95;}
.jz-note li::before{content:'✓';position:absolute;left:2px;top:0;font-size:11px;font-weight:700;}
.jz-note .j-learn{display:block;font-family:var(--font-note);font-size:15px;margin-top:13px;padding-top:13px;border-top:1.5px dashed rgba(35,42,51,.22);}

@media(max-width:760px){
  .jz-item,.jz-item.right{width:100%;margin-left:0;padding:14px 0 56px;}
  .jz-note,.jz-item.right .jz-note{margin:0 auto;}
}

/* ============ Hero (Home) ============ */
.hero{position:relative;overflow:hidden;padding:var(--s9) 0 var(--s8);}
.hero-notes{position:absolute;right:5vw;top:50%;transform:translateY(-50%);display:none;width:340px;}
@media(min-width:980px){.hero-notes{display:block;}}

/* ---- Skill sticky-note pad (hero) ---- */
.skill-pad{position:relative;width:258px;height:264px;margin:0 auto;}
.snote{position:absolute;inset:0;border-radius:var(--r-note);box-shadow:var(--sh-note);padding:30px 24px;display:flex;flex-direction:column;justify-content:center;will-change:transform,opacity;transition:transform .55s var(--ease),opacity .55s var(--ease);backface-visibility:hidden;}
/* glue strip along the top, like a real pad */
.snote::before{content:'';position:absolute;left:0;right:0;top:0;height:22px;background:linear-gradient(rgba(35,42,51,.09),rgba(35,42,51,0));border-radius:var(--r-note) var(--r-note) 0 0;}
.snote.y{background:var(--note-y);color:var(--note-y-ink);}
.snote.g{background:var(--note-g);color:var(--note-g-ink);}
.snote.p{background:var(--note-p);color:var(--note-p-ink);}

/* note content — simple: icon, name, line */
.snote .sn-ico{width:52px;height:52px;border-radius:13px;background:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.snote .sn-ico svg{width:27px;height:27px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.snote h4{font-family:var(--font-note);font-weight:700;font-size:27px;line-height:1.15;letter-spacing:0;}
.snote .sn-desc{font-family:var(--font-note);font-size:16px;line-height:1.35;opacity:.85;margin-top:8px;}

/* stack slots — the pad */
.snote.s0{transform:rotate(-2deg);z-index:5;}
.snote.s1{transform:rotate(2.5deg) translate(7px,11px) scale(.97);z-index:4;}
.snote.s2{transform:rotate(-3.5deg) translate(-6px,21px) scale(.94);z-index:3;}
.snote.s3{transform:rotate(2deg) translate(3px,30px) scale(.91);z-index:2;opacity:.8;}
.snote.s4{transform:rotate(-2deg) translate(0,36px) scale(.88);z-index:1;opacity:0;}

/* the peel — bottom-right corner is pinched & pulled, note tears off to the upper right */
.snote.peel{z-index:8;transform-origin:0 0;transition:none;animation:peel 1.2s cubic-bezier(.48,.04,.4,.96) forwards;}
@keyframes peel{
  0%  {transform:rotate(-2deg);box-shadow:var(--sh-note);}
  28% {transform:perspective(800px) rotate3d(-1,1,0,32deg) rotate(-1deg);box-shadow:18px 26px 34px rgba(35,42,51,.28);opacity:1;}
  55% {transform:perspective(800px) rotate3d(-1,1,0,18deg) rotate(7deg) translate(70px,-130px);opacity:1;}
  100%{transform:perspective(800px) rotate3d(-1,1,0,5deg) rotate(20deg) translate(300px,-430px);opacity:0;}
}
@media (prefers-reduced-motion:reduce){
  .snote.peel{animation:none;}
}
.hero .wave{display:inline-block;}
.hero.play .wave{animation:wave 1.2s .8s var(--ease) 1;transform-origin:70% 70%;}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(16deg)}50%{transform:rotate(-8deg)}75%{transform:rotate(12deg)}}

/* Typed line */
.typed-line{font-family:var(--font-mono);font-size:14px;color:var(--ink-2);letter-spacing:.04em;min-height:24px;display:block;margin-top:var(--s4);}
.typed-line .caret{display:inline-block;width:8px;height:16px;background:var(--green);margin-left:3px;vertical-align:-2px;animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}

/* ============ Picker — fanned sticky-note arc ============ */
.picker-fan{display:flex;justify-content:center;align-items:flex-start;padding:34px 0 28px;}
.pick-note{position:relative;flex:0 0 auto;width:186px;margin:0 -12px;padding:30px 16px 20px;border-radius:var(--r-note);box-shadow:var(--sh-note);text-decoration:none;text-align:center;background:var(--note-y);color:var(--note-y-ink);transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);will-change:transform;}
.pick-note::before{content:'';position:absolute;top:-9px;left:50%;translate:-50% 0;width:44px;height:15px;background:var(--tape);transform:rotate(-2deg);}
.pick-note.g{background:var(--note-g);color:var(--note-g-ink);}
.pick-note.p{background:var(--note-p);color:var(--note-p-ink);}
/* the fan arc */
.pick-note:nth-child(1){transform:rotate(-9deg) translateY(30px);}
.pick-note:nth-child(2){transform:rotate(-4.5deg) translateY(8px);}
.pick-note:nth-child(3){transform:rotate(0deg);z-index:1;}
.pick-note:nth-child(4){transform:rotate(4.5deg) translateY(8px);}
.pick-note:nth-child(5){transform:rotate(9deg) translateY(30px);}
.pick-note:hover{transform:rotate(0deg) translateY(-16px) scale(1.07) !important;box-shadow:var(--sh-note-lift);z-index:10;}
.pick-note .p-ico{width:54px;height:54px;margin:0 auto 12px;border-radius:12px;background:rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;transition:transform var(--t-base) var(--ease),background var(--t-base);}
.pick-note:hover .p-ico{transform:translateY(-3px) rotate(-4deg);background:#fff;}
.pick-note .p-ico svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.pick-note .p-title{display:block;font-family:var(--font-note);font-weight:700;font-size:20px;line-height:1.2;}
.pick-note .p-sub{display:block;font-family:var(--font-display);font-size:12px;line-height:1.45;opacity:.8;margin-top:6px;}
.pick-note .p-go{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;margin-top:12px;opacity:0;transform:translateY(4px);transition:opacity var(--t-base),transform var(--t-base) var(--ease);}
.pick-note:hover .p-go{opacity:.9;transform:none;}
/* fan entrance — notes drop onto the desk one by one */
@keyframes fan-drop{0%{opacity:0;translate:0 -56px;}60%{opacity:1;translate:0 6px;}100%{opacity:1;translate:0 0;}}
.picker-fan.in .pick-note{animation:fan-drop .6s var(--ease) both;animation-delay:calc(var(--i,0)*.1s);}
.picker-fan:not(.in) .pick-note{opacity:0;}
@media(max-width:900px){
  .picker-fan{flex-wrap:wrap;gap:26px 18px;align-items:stretch;}
  .pick-note{margin:0;width:calc(50% - 12px);max-width:220px;}
  .pick-note:nth-child(1){transform:rotate(-2deg);}
  .pick-note:nth-child(2){transform:rotate(2deg) translateY(0);}
  .pick-note:nth-child(3){transform:rotate(-1.5deg);}
  .pick-note:nth-child(4){transform:rotate(1.5deg) translateY(0);}
  .pick-note:nth-child(5){transform:rotate(-2deg) translateY(0);}
}

/* ============ About ============ */
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:var(--s7);align-items:start;}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;}}
.polaroid{background:var(--paper);padding:14px 14px 48px;border:1px solid var(--line);box-shadow:var(--sh-note);transform:rotate(-2deg);position:relative;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);max-width:300px;}
.polaroid:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--sh-note-lift);}
.polaroid::before{content:'';position:absolute;top:-10px;left:50%;translate:-50%;width:64px;height:18px;background:var(--tape);transform:rotate(-2deg);}
.polaroid img{border-radius:4px;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;}
.polaroid .cap{font-family:var(--font-note);font-size:15px;color:var(--ink-2);text-align:center;position:absolute;bottom:12px;left:0;right:0;}

/* ============ Skill tags (About) ============ */
.skills-label{font-family:var(--font-note);font-size:15px;color:var(--ink-2);display:inline-block;transform:rotate(-1.5deg);margin-bottom:10px;}
.skill-tags{display:flex;flex-wrap:wrap;gap:10px;}
.skill-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:999px;padding:8px 15px;cursor:default;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),border-color var(--t-fast);}
.skill-tag::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto;}
.skill-tag.t::before{background:var(--marker);}
.skill-tag:nth-child(odd){transform:rotate(-1deg);}
.skill-tag:nth-child(even){transform:rotate(1deg);}
.skill-tag:hover{transform:rotate(0deg) translateY(-4px);border-color:var(--green);box-shadow:var(--sh-card-hover);}
.skill-key{display:flex;gap:16px;margin-top:12px;}
.skill-key span{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);display:inline-flex;align-items:center;gap:6px;}
.skill-key i{width:8px;height:8px;border-radius:50%;display:inline-block;}

/* ============ Red thread (case study) ============ */
.thread-svg path{stroke-dasharray:600;stroke-dashoffset:600;}
.thread-svg.in path{animation:dash 1.6s var(--ease) forwards;}
@keyframes dash{to{stroke-dashoffset:0}}

/* ============ Tabs (AI page) ============ */
.tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:2px solid var(--line);padding-bottom:0;}
.tab{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:10px 16px;position:relative;transition:color var(--t-fast);}
.tab:hover{color:var(--ink);}
.tab.on{color:var(--ink);}
.tab.on::after{content:'';position:absolute;left:10px;right:10px;bottom:-2px;height:6px;background:linear-gradient(transparent 30%,var(--marker) 30%);transform:rotate(-1deg);}
.tab-panel{display:none;}
.tab-panel.on{display:block;}

/* ============ Resume page ============ */
.resume-sheet{max-width:820px;margin:0 auto;}
.resume-sheet h1{font-size:32px;font-weight:800;letter-spacing:-.02em;}
.resume-sheet .r-title{color:var(--green-deep);font-weight:700;font-size:16px;margin-top:2px;}
.resume-sheet .r-contact{font-family:var(--font-mono);font-size:12px;color:var(--ink-2);margin-top:10px;display:flex;flex-wrap:wrap;gap:6px 18px;}
.resume-sheet .r-contact a{color:var(--ink-2);}
.resume-sheet h2{font-family:var(--font-mono);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--green-deep);border-bottom:2px solid var(--line);padding-bottom:6px;margin:var(--s6) 0 var(--s4);}
.r-row{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:2px 16px;margin-top:var(--s5);}
.r-row:first-of-type{margin-top:0;}
.r-row .r-role{font-weight:700;font-size:16px;}
.r-row .r-when{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);}
.r-org{font-size:13.5px;color:var(--green-deep);font-weight:600;}
.r-loc{font-size:12.5px;color:var(--ink-3);}
.resume-sheet ul{margin:10px 0 0 18px;}
.resume-sheet li{font-size:14px;color:var(--ink-2);margin-bottom:7px;}
.resume-sheet li b{color:var(--ink);font-weight:600;}
.skill-row{display:flex;gap:12px;margin-bottom:10px;font-size:14px;flex-wrap:wrap;}
.skill-row b{min-width:86px;font-weight:700;font-size:13.5px;}
.skill-row span{color:var(--ink-2);flex:1;min-width:220px;}

/* Download dropdown */
.dl-wrap{position:relative;display:inline-block;}
.dl-wrap .dl-caret{display:inline-block;margin-left:6px;transition:transform var(--t-base) var(--ease);}
.dl-wrap.open .dl-caret{transform:rotate(180deg);}
.dl-menu{position:absolute;top:calc(100% + 10px);left:0;min-width:270px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-card-hover);padding:8px;display:none;z-index:10;}
.dl-wrap.open .dl-menu{display:block;animation:dl-pop .28s var(--ease);}
@keyframes dl-pop{from{opacity:0;transform:translateY(-8px) scale(.97);}to{opacity:1;transform:none;}}
.dl-menu a{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:600;padding:11px 12px;border-radius:8px;transition:background var(--t-fast),transform var(--t-fast) var(--ease);}
.dl-menu a:hover{background:var(--board);transform:translateX(3px);}
.dl-menu a .spec{display:block;margin-top:1px;}
.dl-menu a .dl-ico{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--note-g);display:flex;align-items:center;justify-content:center;}
.dl-menu a:nth-child(2) .dl-ico{background:var(--note-y);}
.dl-menu a .dl-ico svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.resume-sheet li::marker{color:var(--green);}

/* ============ Page-header scenes (Resume & AI) ============ */
.hd-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--s7);align-items:center;}
@media(max-width:880px){.hd-grid{grid-template-columns:1fr;}.hd-scene{display:none;}}

/* ---- Resume: the printer — your one-pager, hot off the press ---- */
.ra{position:relative;width:270px;margin:0 auto;}
.rp-window{position:relative;height:212px;overflow:hidden;z-index:1;}
.rp-paper{position:absolute;left:50%;bottom:0;width:172px;height:200px;margin-left:-86px;background:var(--paper);border:1px solid var(--line);border-bottom:0;border-radius:8px 8px 0 0;box-shadow:0 8px 16px rgba(35,42,51,.14);padding:16px 15px;transform:translateY(103%);}
.ra.play .rp-paper{animation:rp-print 5s cubic-bezier(.5,.12,.32,.9) forwards .35s;}
@keyframes rp-print{
  0%  {transform:translateY(103%) rotate(0deg);}
  60% {transform:translateY(3%) rotate(0deg);}
  72% {transform:translateY(3%) rotate(0deg);}
  82% {transform:translateY(-6%) rotate(-2.2deg);}
  100%{transform:translateY(-3%) rotate(-1.5deg);}
}
/* mini resume on the sheet */
.pp-head{display:flex;gap:9px;align-items:center;margin-bottom:4px;}
.pp-ava{width:27px;height:27px;border-radius:50%;background:var(--note-g);border:1.5px solid var(--green);flex:0 0 auto;}
.pp-name{height:8px;width:62%;background:var(--ink);border-radius:4px;}
.pp-sub{height:6px;width:42%;background:var(--note-g);border-radius:3px;margin-top:5px;}
.pp-line{height:6px;background:var(--board);border-radius:3px;margin-top:8px;}
.pp-chips{display:flex;gap:6px;margin-top:13px;}
.pp-chip{height:14px;flex:1;border-radius:7px;background:var(--note-y);}
.pp-chip:nth-child(2){background:var(--note-g);}
.pp-chip:nth-child(3){background:var(--note-p);}
/* printer body */
.rp-printer{position:relative;z-index:2;height:58px;background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;box-shadow:var(--sh-note);display:flex;align-items:center;gap:10px;padding:0 16px;}
.rp-slot{position:absolute;left:12px;right:12px;top:-2.5px;height:5px;background:var(--ink);border-radius:3px;}
.rp-led{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(15,163,107,.6);opacity:.3;flex:0 0 auto;}
.ra.play .rp-led{animation:rp-led 5.3s linear forwards .35s;}
@keyframes rp-led{
  0%,7%,15%,23%,31%,39%,47%,55%,63%{opacity:.25;}
  3%,11%,19%,27%,35%,43%,51%,59%,67%{opacity:1;}
  75%,100%{opacity:1;}
}
.rp-stwrap{position:relative;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;color:var(--ink-3);flex:1;}
.rp-st.b{position:absolute;left:0;top:0;opacity:0;color:var(--green-deep);font-weight:700;}
.ra.play .rp-st.a{animation:rp-swap-out .3s var(--ease) forwards 4.6s;}
.ra.play .rp-st.b{animation:rp-swap-in .3s var(--ease) forwards 4.6s;}
@keyframes rp-swap-out{to{opacity:0;transform:translateY(-5px);}}
@keyframes rp-swap-in{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.rp-btn{width:22px;height:10px;border-radius:5px;background:var(--board);border:1px solid var(--line);flex:0 0 auto;}

/* ---- AI: the leverage flow — raw work through the AI orb, delivered to me ---- */
@keyframes scan-twinkle{0%{opacity:0;transform:translateY(0) scale(.3) rotate(0deg);}35%{opacity:1;transform:translateY(-8px) scale(1.15) rotate(20deg);}100%{opacity:0;transform:translateY(-22px) scale(.6) rotate(45deg);}}

.flowai{width:min(480px,100%);margin:0 auto;}
.flowai svg{width:100%;height:auto;display:block;overflow:visible;}
.ai-badge{display:flex;align-items:center;justify-content:center;gap:9px;margin:2px auto 0;width:max-content;background:var(--paper);border:1.5px solid var(--ink);border-radius:999px;padding:8px 16px;box-shadow:var(--sh-card);}
.ai-badge svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
.ai-badge b{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;color:var(--ink);}
.ai-badge i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 6px rgba(15,163,107,.55);animation:ai-led 1.6s ease-in-out infinite;}
@keyframes ai-led{0%,100%{opacity:.3;}50%{opacity:1;}}

/* ---- Contact: the builder's pact — signed by me, waiting for you ---- */
.pact{position:relative;width:min(540px,100%);margin:0 auto;}
.pact-sheet{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-note);padding:28px 30px 26px;transform:rotate(-1deg);opacity:0;text-align:left;}
.pact.play .pact-sheet{animation:pact-drop .6s var(--ease) forwards .1s;}
@keyframes pact-drop{0%{opacity:0;transform:translateY(-38px) rotate(-3deg);}100%{opacity:1;transform:translateY(0) rotate(-1deg);}}
.pact-eyebrow{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;color:var(--ink-3);display:flex;align-items:center;gap:8px;}
.pact-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green);}
.pact-quote{font-size:18.5px;font-weight:700;letter-spacing:-.01em;line-height:1.5;margin-top:12px;color:var(--ink);}
.pact-lines{display:flex;gap:28px;margin-top:30px;}
.pact-side{flex:1;min-width:0;}
.sig-wrap{position:relative;height:42px;display:flex;align-items:flex-end;}
.sig-text{font-family:var(--font-note);font-weight:700;font-size:28px;line-height:1;color:var(--ink);transform:rotate(-2deg);clip-path:inset(-20% 100% -20% 0);}
.pact.play .sig-text{animation:sig-write 1.5s steps(22) forwards 1.15s;}
@keyframes sig-write{to{clip-path:inset(-20% -10% -20% 0);}}
.sig-pen{position:absolute;left:0;bottom:8px;font-size:16px;opacity:0;z-index:2;}
.pact.play .sig-pen{animation:pen-move 1.5s steps(22) forwards 1.15s;}
@keyframes pen-move{0%{opacity:1;transform:translateX(0);}92%{opacity:1;}100%{opacity:0;transform:translateX(104px);}}
.pact-line{display:block;height:2px;border-radius:1px;background:var(--ink);margin-top:5px;transform:scaleX(0);transform-origin:left center;}
.pact.play .pact-line{animation:line-draw .5s var(--ease) forwards;animation-delay:var(--d,.9s);}
@keyframes line-draw{to{transform:scaleX(1);}}
.pact-role{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.15em;color:var(--ink-3);margin-top:8px;display:block;opacity:0;}
.pact.play .pact-role{animation:pact-fade .45s var(--ease) forwards;animation-delay:var(--d,1.1s);}
@keyframes pact-fade{to{opacity:1;}}
.pact-you{font-family:var(--font-note);font-size:17.5px;color:var(--ink-3);height:42px;display:flex;align-items:flex-end;gap:9px;padding-bottom:5px;opacity:0;}
.pact.play .pact-you{animation:pact-fade .5s var(--ease) forwards 3.4s;}
.pact-caret{width:3px;height:22px;border-radius:2px;background:var(--green);animation:blink 1.1s steps(1) infinite;}
.pact-stamp{position:absolute;right:-16px;top:-16px;font-family:var(--font-mono);font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--green);border:3px solid var(--green);border-radius:8px;padding:7px 13px;background:rgba(255,255,255,.94);opacity:0;transform:scale(2) rotate(10deg);z-index:3;}
.pact.play .pact-stamp{animation:pact-stamp .45s cubic-bezier(.2,1.6,.4,1) forwards 2.85s;}
@keyframes pact-stamp{to{opacity:1;transform:scale(1) rotate(8deg);}}
.pact-spark{position:absolute;color:var(--marker);font-size:17px;opacity:0;z-index:3;text-shadow:0 0 6px rgba(255,210,63,.6);}
.pact.play .pact-spark{animation:scan-twinkle .95s var(--ease) forwards;animation-delay:var(--d,3.9s);}
@media(max-width:560px){.pact-lines{flex-direction:column;gap:18px;}}

/* ============ Contact page ============ */
.mega-note{width:min(420px,88vw);padding:34px 30px 40px;font-family:var(--font-note);font-size:clamp(24px,4vw,34px);line-height:1.25;color:var(--note-y-ink);background:var(--note-y);box-shadow:var(--sh-note);border-radius:var(--r-note);transform:rotate(-2deg);position:relative;transition:transform var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);}
.mega-note::before{content:'';position:absolute;top:-12px;left:50%;translate:-50%;width:74px;height:20px;background:var(--tape);transform:rotate(-2deg);}
.mega-note:hover{transform:rotate(0deg) translateY(-6px);box-shadow:var(--sh-note-lift);}
.toolkit-wall{position:relative;height:340px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;}
.toolkit-wall .note{position:absolute;cursor:grab;touch-action:none;user-select:none;}
.toolkit-wall .note:active{cursor:grabbing;}

/* ============ Connect — two buddies scene ============ */
.connect{display:grid;grid-template-columns:1.15fr 1fr;gap:var(--s7);align-items:center;}
@media(max-width:860px){.connect{grid-template-columns:1fr;gap:var(--s6);}}
.connect-scene{position:relative;}
.connect-scene svg{width:100%;height:auto;display:block;overflow:visible;}
.connect-scene .k{font-family:var(--font-note);}
.connect-scene .m{font-family:var(--font-mono);letter-spacing:.12em;}

/* thread draws itself */
.cn-thread{stroke-dasharray:620;stroke-dashoffset:620;}
.connect.in .cn-thread{animation:dash 1.5s var(--ease) .3s forwards;}

/* envelope commutes between the two buddies */
.cn-mail{offset-path:path('M147 202 C 240 118, 330 218, 413 128');offset-rotate:0deg;offset-distance:0%;}
.connect.in .cn-mail{animation:mail-travel 3s ease-in-out 1.9s infinite alternate;}
@keyframes mail-travel{0%{offset-distance:0%}100%{offset-distance:100%}}

/* pulsing rings at each buddy */
.cn-pulse{transform-box:fill-box;transform-origin:center;opacity:0;}
.connect.in .cn-pulse{animation:cn-pulse 2.4s ease-out 1.9s infinite;}
.connect.in .cn-pulse.b{animation-delay:3.1s;}
@keyframes cn-pulse{0%{transform:scale(.3);opacity:.65}70%{transform:scale(1.7);opacity:0}100%{transform:scale(1.7);opacity:0}}

/* speech notes pop in one after the other */
.cn-note{opacity:0;transform:translateY(-26px);transform-box:fill-box;}
.connect.in .cn-note{animation:cn-note .55s var(--ease) forwards;}
.connect.in .cn-note.b{animation-delay:.9s;}
.connect.in .cn-note.a{animation-delay:.45s;}
@keyframes cn-note{60%{opacity:1;transform:translateY(4px)}100%{opacity:1;transform:translateY(0)}}

/* "you" avatar breathes, waiting to connect */
.cn-you-ring{transform-box:fill-box;transform-origin:center;}
.connect.in .cn-you-ring{animation:cn-breathe 3.4s ease-in-out 2s infinite;}
@keyframes cn-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* details column */
.connect-details .chip{width:100%;max-width:340px;justify-content:space-between;}
.connect-details .chip svg{flex:0 0 auto;}

@media (prefers-reduced-motion:reduce){
  .cn-thread{stroke-dashoffset:0;}
  .cn-note{opacity:1;transform:none;}
  .cn-mail{offset-distance:50%;}
  .cn-pulse{opacity:0!important;}
}

/* ============ Footer ============ */
footer{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s7);margin-top:var(--s8);}
footer .wrap{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;}
footer .f-logo{font-family:var(--font-note);font-size:17px;font-weight:700;color:var(--ink);text-decoration:none;transform:rotate(-2deg);display:inline-block;}
footer .f-links{display:flex;gap:16px;flex-wrap:wrap;}
footer .f-links a{font-size:13px;color:var(--ink-2);text-decoration:none;font-weight:600;}
footer .f-links a:hover{color:var(--ink);}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  html{scroll-behavior:auto;}
  .reveal,.reveal-drop{opacity:1;transform:none;}
  .hero-notes .note{opacity:1;transform:rotate(var(--sr));}
  .thread-svg path{stroke-dashoffset:0;}
}