/* =========================================================
   MUSAB BEN — portfolio
   Clean, minimal, felt-warm. Palette taken from the felt character.
   ========================================================= */

@property --rr { syntax: '<length>'; inherits: true; initial-value: 0px; }

:root{
  --paper:#F3EFE9;
  --paper-2:#EAE4DA;
  --card:#FBF9F6;
  --ink:#1E1A17;
  --ink-2:#4A433D;
  --muted:#8A8077;
  --line:rgba(30,26,23,.12);
  --ochre:#C8952F;
  --rust:#B4552E;
  --sage:#8C9B6E;
  --olive:#5C5A39;
  --burgundy:#6D1E2B;
  --dusty:#7F97A9;
  --felt:#CCB9AE;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease:cubic-bezier(.22,.8,.22,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --pad:clamp(20px,4vw,56px);
  --maxw:1320px;
  --radius:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--ochre);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* subtle paper grain */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .45  0 0 0 0 .4  0 0 0 .08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ---------- type ---------- */
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 14px}
.display{font-family:var(--serif);font-weight:380;letter-spacing:-.02em;line-height:1.02;font-variation-settings:"SOFT" 100,"opsz" 144}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;font-variation-settings:"SOFT" 80,"opsz" 96;margin:0}
p{margin:0 0 1em}

/* ---------- cursor ---------- */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:200;display:none}
@media (hover:hover) and (pointer:fine){ .cursor{display:block} body.has-cursor, body.has-cursor a, body.has-cursor button{cursor:none} }
.cursor-dot,.cursor-ring{position:absolute;left:0;top:0;border-radius:50%;will-change:transform}
.cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ink)}
.cursor-ring{width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(30,26,23,.35);display:grid;place-items:center;
  transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .35s,border-color .35s}
.cursor-ring span{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-link .cursor-ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-color:var(--ink)}
.cursor.is-label .cursor-ring{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--ink);border-color:var(--ink)}
.cursor.is-label .cursor-ring span{opacity:1}
.cursor.is-label .cursor-dot{opacity:0}
.cursor.is-hire .cursor-ring{width:20px;height:20px;margin:-10px 0 0 -10px;background:var(--ochre);border-color:var(--ochre)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:28px;padding:18px var(--pad);
  transition:transform .5s var(--ease),background .4s,backdrop-filter .4s}
.nav.is-scrolled{background:rgba(243,239,233,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.nav.is-hidden{transform:translateY(-110%)}
.brand{font-weight:700;letter-spacing:.02em;font-size:17px;display:flex;align-items:center;gap:4px;margin-right:auto}
.brand i{width:12px;height:12px;border-radius:50%;background:var(--ink);display:inline-block;transition:background .4s,transform .4s var(--spring)}
.brand:hover i{background:var(--ochre);transform:scale(1.25)}
.nav-links{display:flex;gap:26px;font-size:14px;font-weight:500}
.nav-links a{position:relative;padding:4px 0;color:var(--ink-2)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .4s var(--ease)}
.nav-links a:hover,.nav-links a.is-active{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.is-active::after{right:0}
.nav-links .tag{font-size:9px;letter-spacing:.08em;font-weight:700;background:var(--ochre);color:#fff;border-radius:99px;padding:2px 6px;margin-left:5px;vertical-align:2px}
.nav-hire{font-size:14px;font-weight:600;padding:10px 18px;border-radius:99px;background:var(--ink);color:var(--paper);transition:background .3s,transform .3s var(--spring)}
.nav-hire:hover{background:var(--burgundy);transform:translateY(-1px)}
.nav-toggle{display:none;font-size:14px;font-weight:600;padding:8px 2px;align-items:center;gap:10px}
.nav-toggle .bars{width:22px;height:10px;position:relative;display:inline-block}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),top .4s var(--ease)}
.nav-toggle .bars::before{top:0}.nav-toggle .bars::after{top:8px}
body.menu-open .nav-toggle .bars::before{top:4px;transform:rotate(45deg)}
body.menu-open .nav-toggle .bars::after{top:4px;transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:95;background:var(--paper);display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 40px;
  clip-path:circle(0% at calc(100% - 40px) 34px);transition:clip-path .7s var(--ease-io);pointer-events:none}
body.menu-open .menu{clip-path:circle(150% at calc(100% - 40px) 34px);pointer-events:auto}
.menu a{font-family:var(--serif);font-size:clamp(40px,12vw,64px);line-height:1.15;letter-spacing:-.02em;display:block;opacity:0;transform:translateY(20px);transition:opacity .5s,transform .6s var(--ease)}
body.menu-open .menu a{opacity:1;transform:none}
body.menu-open .menu a:nth-child(2){transition-delay:.05s}
body.menu-open .menu a:nth-child(3){transition-delay:.1s}
body.menu-open .menu a:nth-child(4){transition-delay:.15s}
body.menu-open .menu a:nth-child(5){transition-delay:.2s}
.menu .menu-foot{margin-top:40px;font-size:14px;color:var(--muted)}

/* ---------- buttons ---------- */
.hire-btn{position:relative;display:inline-flex;align-items:center;gap:14px;padding:18px 28px 18px 30px;border-radius:99px;background:var(--ink);color:var(--paper);
  font-weight:600;font-size:17px;letter-spacing:.01em;overflow:hidden;isolation:isolate;
  box-shadow:0 10px 30px -12px rgba(30,26,23,.5);transition:transform .45s var(--spring),box-shadow .45s}
.hire-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--ochre),var(--rust) 60%,var(--burgundy));opacity:0;transition:opacity .45s}
.hire-btn:hover,.hire-btn.is-on{transform:translateY(-3px) scale(1.04);box-shadow:0 20px 40px -14px rgba(180,85,46,.55)}
.hire-btn:hover::before,.hire-btn.is-on::before{opacity:1}
.hire-btn .arr{width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink);display:grid;place-items:center;transition:transform .45s var(--spring)}
.hire-btn:hover .arr,.hire-btn.is-on .arr{transform:rotate(-45deg)}
.hire-btn .arr svg{width:14px;height:14px}
.link-arrow{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15px}
.link-arrow .dot{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:transform .4s var(--spring),background .3s}
.link-arrow .dot svg{width:12px;height:12px}
.link-arrow:hover .dot{transform:translateX(4px);background:var(--rust)}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:var(--paper);isolation:isolate;--charW:min(82svh,54vw,860px)}
.stage{position:absolute;left:50%;top:50%;width:max(100vw,calc(100svh * 1.791));aspect-ratio:2400/1340;transform:translate(var(--stage-x,-50%),-50%);z-index:0;will-change:transform}
.stage-inner{position:absolute;inset:0;transform:translate3d(var(--px,0),var(--py,0),0) scale(1.03);transition:transform .9s var(--ease)}
.win{position:absolute;left:8.6%;top:10.4%;width:20.6%;height:56.9%;overflow:hidden;filter:grayscale(1);opacity:.3;transition:filter 1.4s var(--ease),opacity 1.4s var(--ease)}
.sky{position:absolute;inset:0}
.sky-grey{background:linear-gradient(180deg,#c3c7cb,#dfe1e2)}
.sky-blue{background:linear-gradient(180deg,#7fb0dd 0%,#a9cbe9 55%,#f6dcb0 100%);opacity:0;transition:opacity 1.4s var(--ease)}
.sun{position:absolute;left:1.6%;top:5.5%;width:37%;transform:translateY(470%);transition:transform 1.8s cubic-bezier(.2,.75,.15,1) .15s;filter:drop-shadow(0 0 30px rgba(255,200,90,.6))}
.sun-glow{position:absolute;left:-30%;top:-20%;width:110%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,224,150,.85),rgba(255,214,140,0) 62%);opacity:0;transform:translateY(120%);transition:opacity 1.6s var(--ease) .2s,transform 1.8s var(--ease) .15s}
.room{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.room-grey{filter:grayscale(1) contrast(.8) brightness(1.1);opacity:.3}
.room-color{clip-path:circle(var(--rr) at var(--rx,85%) var(--ry,85%));transition:--rr 1.5s cubic-bezier(.65,0,.25,1)}
.beams{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light;transition:opacity 1.8s var(--ease) .4s;
  background:linear-gradient(118deg,transparent 14%,rgba(255,231,170,.95) 24%,transparent 38%),linear-gradient(118deg,transparent 30%,rgba(255,231,170,.7) 38%,transparent 50%)}
.hero.is-sunny .win{filter:none;opacity:1}
.hero.is-sunny .sky-blue{opacity:1}
.hero.is-sunny .sun{transform:translateY(0)}
.hero.is-sunny .sun-glow{opacity:1;transform:translateY(0)}
.hero.is-sunny .room-color{--rr:3200px}
.hero.is-sunny .beams{opacity:.9}

.hero-name{position:absolute;left:0;right:0;top:16%;z-index:1;text-align:center;font-family:var(--serif);font-weight:360;
  font-size:clamp(84px,17.5vw,310px);line-height:.86;letter-spacing:-.045em;color:var(--ink);font-variation-settings:"SOFT" 100,"opsz" 144;
  white-space:nowrap;pointer-events:none;transform:translate3d(var(--nx,0),var(--ny,0),0);transition:color 1.2s var(--ease),transform .9s var(--ease)}
.hero-name span{display:inline-block}
.hero-name .w2{margin-left:.18em}
.hero-name .ch{display:inline-block;transform:translateY(105%);opacity:0;transition:transform 1.1s var(--ease),opacity .8s}
.is-loaded .hero-name .ch{transform:none;opacity:1}
.hero.is-sunny .hero-name{color:var(--burgundy)}

.char{position:absolute;left:50%;bottom:0;z-index:2;width:var(--charW);aspect-ratio:1;
  transform:translate3d(calc(-50% + var(--cx,0px)),0,0);transition:transform .9s var(--ease)}
.char canvas{width:100%;height:100%;opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease) .2s,transform 1.2s var(--ease) .2s}
.is-loaded .char canvas{opacity:1;transform:none}
.char .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s}
.char.ready .ph{opacity:0}
.flower{position:absolute;width:13%;left:83.5%;bottom:9%;transform-origin:50% 100%;pointer-events:none;transition:opacity .5s,transform .9s var(--spring)}
.flower-bloom{opacity:0;transform:scale(.55) rotate(-6deg)}
.hero.is-sunny .flower-bud{opacity:0;transform:scale(1.08)}
.hero.is-sunny .flower-bloom{opacity:1;transform:none;transition-delay:.45s}
.petals{position:absolute;left:84%;bottom:22%;width:12%;height:30%;pointer-events:none}
.petals i{position:absolute;bottom:0;width:8px;height:8px;border-radius:60% 40% 60% 40%;opacity:0}
.hero.is-sunny .petals i{animation:petal 3.2s var(--ease) infinite}
@keyframes petal{0%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx,20px),-160px) rotate(220deg)}}

.bubble{position:absolute;left:66%;top:6%;z-index:3;background:var(--card);color:var(--ink);font-size:14px;font-weight:500;line-height:1.35;
  padding:12px 16px;border-radius:16px 16px 16px 4px;box-shadow:0 12px 30px -16px rgba(30,26,23,.45);max-width:220px;
  opacity:0;transform:translateY(8px) scale(.92);transform-origin:0 100%;transition:opacity .35s,transform .45s var(--spring);pointer-events:none}
.bubble.show{opacity:1;transform:none}

.hero-intro{position:absolute;left:var(--pad);bottom:clamp(28px,6vh,64px);z-index:3;max-width:min(340px,calc((100vw - var(--charW)) / 2 - var(--pad) - 16px))}
.hero-intro p{font-size:16px;line-height:1.55;color:var(--ink-2);margin-bottom:18px}
.hero-intro .eyebrow{margin-bottom:12px}
.hero-cta{position:absolute;right:var(--pad);bottom:clamp(28px,6vh,64px);z-index:4;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.hero-cta .hint{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px;margin:0}
.hero-cta .hint .mouse{width:14px;height:20px;border:1.5px solid var(--muted);border-radius:8px;position:relative}
.hero-cta .hint .mouse::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:4px;margin-left:-1px;background:var(--muted);border-radius:2px;animation:wheel 1.6s infinite}
@keyframes wheel{0%{opacity:1;transform:none}100%{opacity:0;transform:translateY(6px)}}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:16vh;z-index:1;background:linear-gradient(transparent,rgba(243,239,233,.0));pointer-events:none}
.hero-intro,.hero-cta{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) .7s,transform 1s var(--ease) .7s}
.is-loaded .hero-intro,.is-loaded .hero-cta{opacity:1;transform:none}

/* compact / mobile hero */
@media (max-width:1100px){
  .stage{--stage-x:-34%}
  .hero-name{top:calc(64px + 3vh);font-size:clamp(70px,21vw,200px);white-space:normal;line-height:.84}
  .hero-name .w2{margin-left:0;display:block}
  .hero{--charW:min(100vw,58svh,640px)}
  .hero-intro{left:var(--pad);right:var(--pad);max-width:560px;top:calc(64px + 3vh + 2 * min(21vw,200px) * .84 + 18px);bottom:auto}
  .hero-intro .eyebrow{display:none}
  .hero-intro p{font-size:15px;margin-bottom:10px}
  .hero-cta{left:50%;right:auto;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);align-items:center}
  .is-loaded .hero-cta{transform:translateX(-50%)}
  .hero-cta .hint{display:none}
  .hire-btn{padding:14px 20px 14px 24px;font-size:16px}
  .bubble{left:auto;right:4%;top:2%;font-size:13px;max-width:180px;border-radius:16px 16px 4px 16px;transform-origin:100% 100%}
}
@media (max-width:1100px) and (min-aspect-ratio:3/4){ .hero{--charW:min(54vw,62svh)} }
@media (max-width:420px){ .hero-intro p{font-size:14px} }

/* =========================================================
   SECTIONS
   ========================================================= */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(80px,12vw,160px) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.section-head h2{font-size:clamp(40px,6vw,84px);line-height:1;letter-spacing:-.03em}
.section-head h2 em{font-style:italic;color:var(--rust)}
.section-head .count{font-family:var(--serif);font-size:20px;color:var(--muted)}

/* filter chips */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:34px}
.chip{position:relative;font-size:14px;font-weight:500;padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:transparent;color:var(--ink-2);
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--spring)}
.chip sup{font-size:10px;margin-left:4px;color:var(--muted);transition:color .3s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.is-active sup{color:rgba(243,239,233,.6)}
.chip.ai{border-style:dashed}
@media (max-width:760px){
  .filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1 * var(--pad)) 24px;padding:0 var(--pad) 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .filters::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;scroll-snap-align:start}
}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,260px);grid-auto-flow:dense;gap:clamp(10px,1.4vw,20px)}
.card{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper-2);display:block;isolation:isolate;transform:translateZ(0)}
.card.wide{grid-column:span 2}
.card.tall{grid-row:span 2}
.card.wide_tall{grid-column:span 2;grid-row:span 2}
.card .media{position:absolute;inset:-6% -6%;transform:translate3d(var(--ix,0),var(--iy,0),0) scale(1.02);transition:transform .9s var(--ease)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.card:hover img{transform:scale(1.06)}
.card .meta{position:absolute;left:0;right:0;bottom:0;padding:clamp(14px,1.6vw,22px);color:#fff;z-index:2;
  background:linear-gradient(transparent,rgba(20,16,13,.62));display:flex;flex-direction:column;gap:4px;transform:translateY(0);transition:transform .6s var(--ease)}
.card .meta .y{font-size:12px;letter-spacing:.12em;opacity:.85;font-weight:600}
.card .meta h3{font-size:clamp(17px,1.5vw,24px);line-height:1.15;color:#fff;font-variation-settings:"SOFT" 60,"opsz" 48}
.card .meta .cats{font-size:12px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease);max-height:0}
.card:hover .meta .cats{opacity:.85;transform:none;max-height:40px}
.card .pose{position:absolute;right:10px;top:10px;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--felt);z-index:2;
  box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transform:scale(0) rotate(-20deg);transition:transform .55s var(--spring)}
.card .pose img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;transform:scale(1.9) translateY(18%)}
.card:hover .pose{transform:none}
.card.is-out{opacity:0;transform:scale(.94);pointer-events:none}
.card.is-gone{display:none}
.card{transition:opacity .45s var(--ease),transform .55s var(--ease)}
.card .badge{position:absolute;left:12px;top:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(251,249,246,.9);color:var(--ink);padding:5px 10px;border-radius:99px}
.card.soon{background:transparent;border:1.5px dashed rgba(30,26,23,.22);display:flex;align-items:flex-end;padding:20px}
.card.soon .soon-in{position:relative;z-index:2}
.card.soon h3{font-size:22px}
.card.soon p{font-size:13px;color:var(--muted);margin:4px 0 0}
.card.soon .num{position:absolute;right:18px;top:12px;font-family:var(--serif);font-size:54px;color:rgba(30,26,23,.08)}
@media (max-width:1100px){ .grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(150px,24vw,240px)} }
@media (max-width:760px){
  .grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:42vw;gap:10px}
  .card.wide_tall{grid-column:span 2;grid-row:span 2}
  .card .meta{padding:12px}
  .card .meta h3{font-size:15px}
  .card .meta .y{font-size:10px}
  .card .pose{display:none}
  .card .media{inset:0}
}

/* what I do strip */
.skills{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(220px,22vw,300px);gap:16px;overflow-x:auto;padding:4px var(--pad) 20px;margin:0 calc(-1 * var(--pad));
  scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.skills::-webkit-scrollbar{display:none}
.skills.dragging{cursor:grabbing;scroll-snap-type:none}
.skill{scroll-snap-align:start;border-radius:var(--radius);background:var(--felt);overflow:hidden;position:relative;aspect-ratio:4/5;text-align:left}
.skill img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform 1s var(--ease)}
.skill:hover img{transform:scale(1.05) translateY(-2%)}
.skill .lbl{position:absolute;left:14px;bottom:14px;right:14px;display:flex;justify-content:space-between;align-items:center;
  background:rgba(251,249,246,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:12px;padding:10px 14px;font-weight:600;font-size:15px}
.skill .lbl small{font-weight:500;color:var(--muted);font-size:12px}
.skills-wrap{position:relative}
.skills-nav{display:flex;gap:8px}
.skills-nav button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s}
.skills-nav button:hover{background:var(--ink);color:var(--paper)}
.skills-nav svg{width:16px;height:16px}

/* about teaser */
.about-teaser{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.loop-frame{position:relative;border-radius:calc(var(--radius) + 6px);overflow:hidden;background:#d9d0c6;aspect-ratio:1108/832;box-shadow:0 40px 80px -50px rgba(30,26,23,.6)}
.loop-frame video{width:100%;height:100%;object-fit:cover}
.loop-frame .tag{position:absolute;left:16px;top:16px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;background:rgba(251,249,246,.9);padding:6px 10px;border-radius:99px;display:flex;gap:8px;align-items:center}
.loop-frame .tag i{width:7px;height:7px;border-radius:50%;background:#d0442f;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.about-teaser h2{font-size:clamp(34px,4.4vw,62px);line-height:1.04;letter-spacing:-.025em;margin-bottom:24px}
.about-teaser p{color:var(--ink-2);font-size:17px;max-width:520px}
@media (max-width:860px){ .about-teaser{grid-template-columns:1fr} }

/* AI teaser */
.ai-band{border-radius:calc(var(--radius) + 10px);background:var(--ink);color:var(--paper);padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;overflow:hidden;position:relative}
.ai-band h2{font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.03em}
.ai-band p{color:rgba(243,239,233,.7);margin:14px 0 0;max-width:520px}
.ai-band .pose{width:clamp(140px,18vw,240px);border-radius:var(--radius);overflow:hidden;background:var(--felt);transform:rotate(3deg);transition:transform .6s var(--spring)}
.ai-band:hover .pose{transform:rotate(-2deg) scale(1.04)}
.ai-band .link-arrow .dot{background:var(--paper);color:var(--ink)}
.ai-band .stars{position:absolute;inset:0;pointer-events:none;opacity:.5}
@media (max-width:640px){ .ai-band{grid-template-columns:1fr} .ai-band .pose{width:140px} }

/* =========================================================
   CONTACT / HIRE footer
   ========================================================= */
.contact{position:relative;padding:clamp(90px,13vw,170px) 0 28px;background:var(--paper-2);overflow:hidden;transition:background 1s var(--ease)}
.contact.is-warm{background:#f1e2c9}
.contact-inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,70px);align-items:center}
.mini{position:relative;width:clamp(160px,20vw,260px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#efe5d6,var(--felt))}
.mini img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform .6s var(--spring)}
.mini .m-happy{opacity:0;transform:scale(.96)}
.contact.is-warm .mini .m-happy{opacity:1;transform:scale(1.02)}
.contact.is-warm .mini .m-neutral{opacity:0}
.contact h2{font-size:clamp(30px,4.2vw,58px);line-height:1.08;letter-spacing:-.025em;max-width:900px;margin-bottom:34px}
.contact .row{display:flex;flex-wrap:wrap;align-items:center;gap:22px 30px}
.contact .mail{font-family:var(--serif);font-size:clamp(20px,2.2vw,28px);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .3s,color .3s}
.contact .mail:hover{color:var(--rust);border-color:var(--rust)}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.socials a{font-size:14px;font-weight:500;padding:9px 16px;border:1px solid var(--line);border-radius:99px;transition:background .3s,color .3s}
.socials a:hover{background:var(--ink);color:var(--paper)}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:clamp(70px,9vw,120px);padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.foot a:hover{color:var(--ink)}
@media (max-width:760px){ .contact-inner{grid-template-columns:1fr} .mini{width:150px} }

/* =========================================================
   PROJECT PAGE
   ========================================================= */
.p-hero{position:relative;height:88vh;height:88svh;min-height:520px;overflow:hidden;background:var(--ink)}
.p-hero .bg{position:absolute;inset:-8% 0;will-change:transform}
.p-hero .bg img{width:100%;height:100%;object-fit:cover}
.p-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,13,.38),rgba(20,16,13,0) 26%,rgba(20,16,13,.35) 55%,rgba(20,16,13,.86)),linear-gradient(90deg,rgba(20,16,13,.45),transparent 60%);pointer-events:none}
.p-hero .in{position:absolute;left:0;right:0;bottom:0;z-index:2;color:#fff;padding:0 var(--pad) clamp(30px,6vh,70px)}
.p-hero .crumbs{display:flex;gap:10px;align-items:center;font-size:13px;margin-bottom:18px;opacity:.85}
.p-hero .crumbs a:hover{text-decoration:underline}
.p-hero h1{text-shadow:0 2px 30px rgba(0,0,0,.25);font-size:clamp(38px,6.6vw,104px);line-height:.98;letter-spacing:-.035em;max-width:1100px;color:#fff}
.p-hero h1 .ln{display:block;overflow:hidden}
.p-hero h1 .ln>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.is-loaded .p-hero h1 .ln>span{transform:none}
.p-hero .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.p-hero .tags span{font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.glance{display:grid;grid-template-columns:1fr minmax(220px,300px);gap:clamp(24px,4vw,60px);align-items:start;padding:clamp(50px,7vw,90px) 0 clamp(30px,4vw,50px)}
.glance-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.gcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px}
.gcard .eyebrow{margin-bottom:10px}
.gcard p{margin:0;font-size:15px;color:var(--ink-2);line-height:1.5}
.gcard ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.gcard li{font-size:15px;color:var(--ink-2);line-height:1.45}
.gcard .chips{display:flex;flex-wrap:wrap;gap:6px}
.gcard .chips span{font-size:12.5px;font-weight:500;padding:5px 10px;border-radius:99px;background:var(--paper-2)}
.glance-pose{position:relative;border-radius:var(--radius);background:var(--felt);overflow:hidden;aspect-ratio:4/5}
.glance-pose img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.glance-pose .say{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(251,249,246,.94);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.jump{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.jump a{font-size:13px;font-weight:500;padding:7px 14px;border-radius:99px;border:1px solid var(--line);transition:background .3s,color .3s}
.jump a:hover{background:var(--ink);color:var(--paper)}
@media (max-width:860px){ .glance{grid-template-columns:1fr} .glance-pose{max-width:260px;aspect-ratio:1} }

.lead{font-family:var(--serif);font-size:clamp(22px,2.4vw,32px);line-height:1.35;letter-spacing:-.01em;color:var(--ink);max-width:980px;margin:0 0 clamp(30px,4vw,50px)}
.lead p{margin:0 0 .8em}

.feature{margin:clamp(30px,5vw,60px) 0}
.feature .frame{border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.feature figcaption,.fig figcaption{font-size:13px;color:var(--muted);margin-top:10px}

.psec{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,3vw,48px);padding:clamp(50px,8vw,110px) 0;border-top:1px solid var(--line);align-items:start}
.psec .txt{grid-column:1 / span 5;position:sticky;top:110px}
.psec .med{grid-column:7 / span 6;display:flex;flex-direction:column;gap:clamp(14px,2vw,24px)}
.psec.flip .txt{grid-column:8 / span 5;order:2}
.psec.flip .med{grid-column:1 / span 6;order:1}
.psec.textonly .txt{grid-column:1 / span 4;position:static}
.psec.textonly .body{grid-column:6 / span 7}
.psec .label{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);margin-bottom:16px}
.psec .label::before{content:"";width:18px;height:1px;background:currentColor}
.psec .meta-y{font-family:var(--serif);font-size:18px;color:var(--muted);margin:-6px 0 16px}
.psec h2{font-size:clamp(30px,3.6vw,52px);line-height:1.04;letter-spacing:-.025em;margin-bottom:22px}
.psec .num{font-family:var(--serif);font-size:15px;color:var(--muted);display:block;margin-bottom:12px}
.psec .body p,.psec .txt p{font-size:16.5px;line-height:1.7;color:var(--ink-2)}
.psec .body ul,.psec .txt ul{margin:0 0 1em;padding:0;list-style:none}
.psec .body li,.psec .txt li{position:relative;padding-left:20px;margin:0 0 .55em;font-size:16px;line-height:1.6;color:var(--ink-2)}
.psec li::before{content:"";position:absolute;left:2px;top:.72em;width:7px;height:7px;border-radius:50%;background:var(--ochre)}
.psec .subhead{font-weight:600;color:var(--ink);margin:1.2em 0 .5em;font-size:15px;letter-spacing:.02em}
.fig{margin:0}
.fig .frame{border-radius:var(--radius);overflow:hidden;background:var(--paper-2);position:relative}
.fig img,.fig video{width:100%;height:auto}
.fig.cap-strong figcaption{font-family:var(--serif);font-size:20px;color:var(--ink);margin-top:12px}
@media (max-width:860px){
  .psec{grid-template-columns:1fr;gap:26px}
  .psec .txt,.psec.flip .txt,.psec .med,.psec.flip .med,.psec.textonly .txt,.psec.textonly .body{grid-column:1 / -1;order:0;position:static}
}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-img .frame{clip-path:inset(12% 6% 12% 6% round var(--radius));transition:clip-path 1.3s var(--ease)}
.rv-img .frame img,.rv-img .frame video{transform:scale(1.18);transition:transform 1.6s var(--ease)}
.rv-img.in .frame{clip-path:inset(0 0 0 0 round var(--radius))}
.rv-img.in .frame img,.rv-img.in .frame video{transform:none}

/* gallery (horizontal) */
.gallery{position:relative;margin:clamp(10px,2vw,20px) 0 clamp(40px,6vw,80px)}
.gallery-track{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;padding:6px var(--pad) 16px;margin:0 calc(-1 * var(--pad));scrollbar-width:none;cursor:grab}
.gallery-track::-webkit-scrollbar{display:none}
.gallery-track.dragging{cursor:grabbing;scroll-snap-type:none}
.gallery-track .fig{flex:0 0 auto;width:clamp(240px,34vw,520px);scroll-snap-align:center}
.gallery-track .fig .frame{aspect-ratio:3/2}
.gallery-track .fig img{height:100%;object-fit:cover;pointer-events:none}
.gallery-bar{display:flex;align-items:center;gap:16px;justify-content:space-between}
.gallery-bar .prog{flex:1;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.gallery-bar .prog i{display:block;height:100%;width:20%;background:var(--ink);transform-origin:left;transition:transform .2s}
.gallery-bar .btns{display:flex;gap:8px}
.gallery-bar button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s}
.gallery-bar button:hover{background:var(--ink);color:var(--paper)}
.gallery-bar svg{width:15px;height:15px}

/* youtube lite */
.yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#111 center/cover no-repeat;display:block}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(0,0,0,.45))}
.yt .play{position:absolute;left:50%;top:50%;z-index:2;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:rgba(251,249,246,.95);display:grid;place-items:center;transition:transform .45s var(--spring)}
.yt:hover .play{transform:scale(1.1)}
.yt .play svg{width:26px;height:26px;margin-left:4px;color:var(--ink)}
.yt .yt-l{position:absolute;left:18px;bottom:16px;z-index:2;color:#fff;font-size:13px;font-weight:600}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* next project */
.next{position:relative;display:block;height:70vh;min-height:420px;overflow:hidden;background:var(--ink);color:#fff;margin-top:clamp(40px,6vw,80px)}
.next .bg{position:absolute;inset:0;transition:transform 1.4s var(--ease),filter 1s}
.next .bg img{width:100%;height:100%;object-fit:cover}
.next::after{content:"";position:absolute;inset:0;background:rgba(20,16,13,.5);transition:background .8s}
.next:hover::after{background:rgba(20,16,13,.3)}
.next:hover .bg{transform:scale(1.05)}
.next .in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:var(--pad)}
.next .eyebrow{color:rgba(255,255,255,.75)}
.next h2{font-size:clamp(34px,6vw,90px);line-height:1;letter-spacing:-.03em;max-width:1100px;color:#fff}
.next .sub{margin-top:24px;display:flex;align-items:center;gap:12px;font-weight:600}
.pnav{display:flex;justify-content:space-between;gap:16px;padding:22px var(--pad);font-size:14px;color:var(--muted);border-bottom:1px solid var(--line)}
.pnav a:hover{color:var(--ink)}

/* =========================================================
   ABOUT / AI pages
   ========================================================= */
.page-top{padding:clamp(120px,16vw,190px) 0 clamp(40px,6vw,80px)}
.page-top h1{font-size:clamp(46px,8vw,128px);line-height:.95;letter-spacing:-.04em}
.page-top h1 em{font-style:italic;color:var(--rust)}
.page-top .sub{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:640px;margin-top:26px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:start}
.then-now{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.then-now .fig .frame{aspect-ratio:4/5}
.then-now .fig img{height:100%;object-fit:cover}
.then-now figcaption{font-family:var(--serif);font-size:16px;color:var(--ink-2)}
.do-list{display:flex;flex-wrap:wrap;gap:10px}
.do-list span{font-size:15px;font-weight:500;padding:10px 18px;border-radius:99px;background:var(--card);border:1px solid var(--line)}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr} }

/* =========================================================
   TRANSITIONS
   ========================================================= */
.curtain{position:fixed;inset:0;z-index:300;pointer-events:none;display:grid;place-items:center;background:var(--ink);color:var(--paper);
  transform:translateY(100%);will-change:transform}
.curtain .lbl{font-family:var(--serif);font-size:clamp(28px,4vw,56px);letter-spacing:-.02em;opacity:0;transform:translateY(20px);transition:opacity .4s .15s,transform .6s var(--ease) .15s;text-align:center;padding:0 var(--pad)}
.curtain.cover{transform:none;transition:transform .6s var(--ease-io)}
.curtain.cover .lbl{opacity:1;transform:none}
.curtain.leave{transform:translateY(-100%);transition:transform .8s var(--ease-io)}
.curtain.instant{transform:none;transition:none}
.flip-img{position:fixed;z-index:299;overflow:hidden;pointer-events:none;border-radius:var(--radius);transition:all .75s var(--ease-io)}
.flip-img img{width:100%;height:100%;object-fit:cover}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}

/* mobile nav */
@media (max-width:900px){
  .nav-links,.nav-hire{display:none}
  .nav-toggle{display:inline-flex}
  .nav{padding:14px var(--pad)}
}
.gallery-track .fig video{height:100%;object-fit:cover;pointer-events:none}
.psec strong{color:var(--ink);font-weight:600}
.dot-story{display:flex;align-items:center;gap:clamp(20px,4vw,60px);flex-wrap:wrap;margin-top:clamp(30px,5vw,60px)}
.logo-big{font-family:var(--sans);font-weight:700;font-size:clamp(48px,8vw,110px);letter-spacing:.01em;display:flex;align-items:flex-end;gap:.06em;line-height:1}
.logo-big i{width:.32em;height:.32em;border-radius:50%;background:var(--ink);display:inline-block;margin-bottom:.12em}
.dot-story p{font-family:var(--serif);font-size:clamp(20px,2.2vw,30px);line-height:1.3;max-width:520px;margin:0;color:var(--ink-2)}
.dot-story em{color:var(--rust)}

/* AI Works — full film + draft flag (new copy waiting for approval) */
.feature.film .frame{background:var(--ink)}
.feature.film video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.draft-flag{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;font-size:12px;font-weight:600;letter-spacing:.02em;
  background:var(--ochre);color:var(--ink);padding:8px 14px;border-radius:99px;box-shadow:0 8px 24px -10px rgba(0,0,0,.4);pointer-events:none;white-space:nowrap}

/* Before / after compare slider (build.py → compare_html) */
.compare .frame{position:relative;overflow:hidden;border-radius:var(--radius);background:var(--paper-2);touch-action:pan-y;user-select:none}
.compare img{display:block;width:100%;height:auto}
.compare .before-clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.compare .before-clip img{width:100%;height:100%;object-fit:cover}
.compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3}
.compare .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08);z-index:2;pointer-events:none}
.compare .handle i{position:absolute;top:50%;left:50%;width:42px;height:42px;margin:-21px 0 0 -21px;border-radius:50%;background:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.45)}
.compare .handle i::before,.compare .handle i::after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.compare .handle i::before{left:9px;border-right-color:var(--ink)}
.compare .handle i::after{right:9px;border-left-color:var(--ink)}
.compare .cmp-label{position:absolute;top:12px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(251,249,246,.92);color:var(--ink);padding:5px 10px;border-radius:99px;pointer-events:none}
.compare .cmp-label.l{left:12px}.compare .cmp-label.r{right:12px}
.compare input:focus-visible ~ .handle i{outline:2px solid var(--rust);outline-offset:3px}

/* New-work sections: image pairs, phone screens, portrait gallery, era bands on extended pages */
.fig-pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);align-items:start}
.fig-pair .frame,.phones .frame{border-radius:var(--radius);overflow:hidden;background:var(--paper-2)}
.fig-pair img,.phones img{display:block;width:100%;height:auto}
.phones{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px);align-items:start}
.phones .frame{border-radius:22px;border:6px solid var(--ink);background:var(--ink);box-shadow:0 18px 40px -24px rgba(30,26,23,.6)}
.gallery.g-portrait .gallery-track .fig{width:clamp(200px,24vw,340px)}
.gallery.g-portrait .gallery-track .fig .frame{aspect-ratio:4/5}
.era-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line);padding:6px 12px;border-radius:99px;margin:0 0 18px}
.era{border-top:1px solid var(--line);margin-top:clamp(30px,5vw,60px);padding-top:clamp(50px,8vw,110px)}
.era .era-tag{background:var(--rust);border-color:var(--rust);color:#fff}
.era h2{font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.03em;margin:0 0 22px}
.era .lead{margin-bottom:0}
@media (max-width:760px){ .phones{grid-template-columns:repeat(3,1fr);gap:8px} .phones .frame{border-width:3px;border-radius:14px} }
.feature.wide-med{margin-top:0}
.feature.wide-med .compare .frame{max-height:none}

/* rows of video players; portrait (9:16) players get a phone-like width */
.vids{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,22px);justify-content:center;margin-top:clamp(14px,2vw,24px)}
.vids .fig{flex:1 1 320px;max-width:100%}
.vids .fig.vert{flex:0 1 300px}
.vids .frame{border-radius:var(--radius);overflow:hidden;background:var(--ink)}
.vids video{display:block;width:100%;height:auto}
.feature.wide-med .fig-pair{grid-template-columns:1fr 1fr}
.gallery.g-story .gallery-track .fig{width:clamp(170px,20vw,280px)}
.gallery.g-story .gallery-track .fig .frame{aspect-ratio:9/16}