/* Layout: hard black and white sections; the renders carry all the colour. Type is the Squarespace
   pairing, Marcellus for display and PT Serif for everything else. Grain sits over every page, and the
   header, cursor and chevron invert against whatever is under them. */
:root{
  --white:#ffffff; --black:#0a0a0a;
  --f-display:'Marcellus','Optima','Trajan Pro',Georgia,serif;
  --f-text:'PT Serif',Georgia,'Times New Roman',serif;
  --gut:clamp(16px,3.2vw,48px);
  --ease:cubic-bezier(.22,1,.36,1);
  --bg:var(--white); --fg:var(--black); --mute:rgba(10,10,10,.58); --line:rgba(10,10,10,.14);
  color-scheme:light;
}
.light{--bg:var(--white);--fg:var(--black);--mute:rgba(10,10,10,.58);--line:rgba(10,10,10,.14)}
.dark{--bg:var(--black);--fg:var(--white);--mute:rgba(255,255,255,.6);--line:rgba(255,255,255,.18)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--white)}
body{margin:0;background:var(--white);color:var(--black);font-family:var(--f-text);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
section,footer.site-foot{background:var(--bg);color:var(--fg)}
img,video{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.disp{font-family:var(--f-display);font-weight:400;letter-spacing:-.02em}
.lbl{font-family:var(--f-text);font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:400}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.split-line{overflow:hidden;padding:0 .08em .14em 0;margin:0 -.08em -.14em 0}
/* hold the opening frame until the first animation runs; show it anyway if scripts never arrive */
html.pre .intro{opacity:0;animation:preFail 0s 3s forwards}
@keyframes preFail{to{opacity:1}}

/* ---------------------------------------------------------------- grain, cursor, loupe, curtains */
.grain{position:fixed;inset:-60%;z-index:200;pointer-events:none;background:url(grain.png?v=d484c71b70);opacity:.3;animation:grain .9s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}17%{transform:translate(-5%,4%)}33%{transform:translate(4%,-7%)}
  50%{transform:translate(-8%,8%)}67%{transform:translate(7%,2%)}83%{transform:translate(-3%,-5%)}100%{transform:translate(0,0)}}
.cursor{position:fixed;left:0;top:0;z-index:190;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--white);mix-blend-mode:difference;display:none;place-items:center;
  transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease),opacity .25s}
.cursor b{font:400 11px/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--black);opacity:0;transition:opacity .2s}
.cursor.is-label{width:80px;height:80px;margin:-40px 0 0 -40px}
.cursor.is-label b{opacity:1}
.cursor.is-hidden{opacity:0}
@media (hover:hover) and (pointer:fine){ .cursor{display:grid} }
.loupe{position:fixed;left:0;top:0;z-index:150;width:240px;height:240px;margin:-120px 0 0 -120px;border-radius:50%;pointer-events:none;
  background-color:#111;background-repeat:no-repeat;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 24px 60px rgba(0,0,0,.35);
  opacity:0;scale:.6;transition:opacity .3s ease,scale .45s var(--ease)}
.loupe.on{opacity:1;scale:1}
.loupe span{position:absolute;left:50%;bottom:14px;translate:-50% 0;color:#fff;font:400 10px/1 var(--f-text);letter-spacing:.14em;
  text-shadow:0 1px 6px rgba(0,0,0,.7)}
.curtain{position:fixed;inset:0;z-index:170;background:var(--black);pointer-events:none;transform:translateY(100%)}
.zoom{position:fixed;inset:0;z-index:170;pointer-events:none;overflow:hidden;background:#111}
.zoom img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- header */
.bar{position:fixed;top:0;left:0;right:0;z-index:80;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:calc(env(safe-area-inset-top,0px) + 18px) var(--gut) 18px;color:var(--white);mix-blend-mode:difference;pointer-events:none}
.bar a{pointer-events:auto}
.brand{font-family:var(--f-display);font-size:19px;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);font-size:15px}
.nav a{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.nav a:hover,.nav a.is-on{background-size:100% 1px}
.clock{font-variant-numeric:tabular-nums;opacity:.7}
@media (max-width:760px){ .nav a:not(.keep){display:none} .clock{display:none} }

/* ---------------------------------------------------------------- shared bits */
.pill{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;border-radius:999px;
  padding:14px 28px;font:400 15px/1 var(--f-text);border:1px solid var(--fg);transition:background-color .3s ease,color .3s ease}
.pill-solid{background:var(--fg);color:var(--bg)}
.pill-solid:hover{background:transparent;color:var(--fg)}
.pill-line{background:transparent;color:var(--fg)}
.pill-line:hover{background:var(--fg);color:var(--bg)}
.ulink{text-decoration:none;padding-bottom:3px;border-bottom:1px solid currentColor;opacity:.85;transition:opacity .3s}
.ulink:hover{opacity:1}
.marquee{overflow:hidden;white-space:nowrap;pointer-events:none;user-select:none}
.mq-track{display:inline-flex;will-change:transform}
.mq-track span{padding-right:.3em}

/* ---------------------------------------------------------------- home: hero */
.hero{position:relative;min-height:100svh;overflow:hidden}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:16px;
  grid-template-rows:auto auto 1fr auto;min-height:100svh;padding:clamp(92px,15vh,150px) var(--gut) clamp(150px,28vh,270px)}
.hero-kicker{grid-column:1/8;grid-row:1;margin:0;color:var(--mute)}
.hero-title{grid-column:1/-1;grid-row:2;position:relative;z-index:3;margin:.14em 0 0 -.03em;font-size:clamp(64px,12.4vw,236px);
  line-height:.92;letter-spacing:-.035em;pointer-events:none}
.hero-frame{grid-column:8/13;grid-row:1/5;position:relative;margin:0 0 clamp(-150px,-15vh,-90px);overflow:hidden;background:#e9e9e9}
.hf-stack{position:absolute;inset:0}
.hf-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:0;transition:opacity 1.2s ease}
.hf-stack img.on{opacity:1;z-index:2}
.hf-stack img.was{opacity:1;z-index:1;transition:none}
.hero-frame figcaption{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;gap:12px;padding:14px 16px;
  color:var(--white);background:linear-gradient(to bottom,rgba(0,0,0,.45),transparent);z-index:3}
.hero-foot{grid-column:1/6;grid-row:4;align-self:end;position:relative;z-index:3;display:grid;gap:22px;justify-items:start}
.hero-foot p{margin:0;max-width:30ch;font-size:clamp(16px,1.2vw,19px)}
.hero-mq{position:absolute;left:0;right:0;bottom:clamp(14px,3vh,40px);z-index:4;color:var(--black)}
.hero-mq .mq-track{font-family:var(--f-display);font-size:clamp(64px,14vw,264px);line-height:1;letter-spacing:-.02em}
@media (max-width:860px){
  .hero-grid{grid-template-rows:auto;padding-bottom:clamp(120px,22vh,200px)}
  .hero-kicker,.hero-title,.hero-frame,.hero-foot{grid-column:1/-1;grid-row:auto}
  .hero-frame{aspect-ratio:4/5;margin:-.4em 0 24px;max-height:70svh}
  .hero-frame figcaption{top:auto;bottom:0;background:linear-gradient(to top,rgba(0,0,0,.5),transparent)}
  .hero-title{font-size:clamp(56px,16vw,130px)}
}

/* ---------------------------------------------------------------- home: statement (pinned) */
.st-pin{position:relative;height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:0 var(--gut) clamp(48px,9vh,110px)}
.st-kicker{position:absolute;top:clamp(92px,14vh,140px);left:var(--gut);margin:0;opacity:.6}
.st-words{margin:0;display:flex;flex-direction:column;font-size:clamp(52px,10.8vw,200px);line-height:.98;letter-spacing:-.035em}
.st-words .w{display:block}

/* ---------------------------------------------------------------- home: numbers */
.numbers{position:relative;padding-block:clamp(72px,14vh,160px);overflow:hidden}
.nu-track{display:flex;gap:clamp(48px,8vw,140px);width:max-content;padding-inline:var(--gut);will-change:transform}
.nu b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(68px,10.5vw,190px);line-height:.95;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.nu span{display:block;margin-top:14px;max-width:22ch;color:var(--mute)}

/* ---------------------------------------------------------------- home: selected work + slits */
.bold{position:relative;padding-block:clamp(90px,14vh,170px) clamp(80px,12vh,150px);overflow:hidden}
.bold-type{margin:0;padding-left:calc(var(--gut) - .04em);display:flex;flex-direction:column;font-size:clamp(84px,21vw,390px);line-height:.86;letter-spacing:-.045em}
.bold-type span{display:block}
.slits-head{display:flex;justify-content:space-between;gap:16px;padding:clamp(60px,10vh,120px) var(--gut) 16px;color:var(--mute)}
.slits{display:grid;gap:10px;padding-inline:var(--gut);position:relative;z-index:2}
@media (min-width:900px){ .slits,.slits-head{padding-right:max(var(--gut),13vw)} }
.slit{position:relative;display:block;height:clamp(92px,16vh,170px);overflow:hidden;color:var(--white);text-decoration:none;background:#151515;
  transition:height 1s var(--ease)}
.slit-img{position:absolute;left:0;top:0;width:100vw;height:100vh;will-change:transform}
.slit-img img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:filter 1s ease}
.slit::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.5),rgba(0,0,0,.08) 62%);transition:opacity .8s}
.slit-txt{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:3.6rem minmax(0,1fr) auto;align-items:center;gap:16px;
  padding:0 clamp(16px,2.4vw,36px)}
.slit-nm{font-family:var(--f-display);font-size:clamp(28px,4.4vw,78px);line-height:1;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;transition:transform 1s var(--ease)}
.slit-ct{text-align:right;opacity:.85}
.slit.is-text{background:var(--black);outline:1px solid rgba(255,255,255,.18);outline-offset:-1px}
.slit.is-text::after{display:none}
@media (hover:hover){
  .slit:hover,.slit:focus-visible{height:clamp(240px,46vh,540px)}
  .slit:hover .slit-img img,.slit:focus-visible .slit-img img{filter:none}
  .slit:hover::after{opacity:.55}
  .slit:hover .slit-nm{transform:translateX(18px)}
}
@media (hover:none){ .slit{height:clamp(120px,22vh,210px)} .slit-img img{filter:none} }
@media (max-width:760px){ .slit-txt{grid-template-columns:2.4rem minmax(0,1fr)} .slit-ct{display:none} }
#chev{position:fixed;right:0;top:18vh;z-index:4;height:64vh;width:auto;aspect-ratio:600/800;translate:54% 0;pointer-events:none;
  visibility:hidden;overflow:visible;mix-blend-mode:difference}
#chev path{fill:none;stroke:var(--white);stroke-width:30;stroke-linejoin:round}
@media (max-width:760px){ #chev{height:36vh;translate:64% 0} }

/* ---------------------------------------------------------------- project page */
.ph{position:relative;height:100svh;min-height:520px;overflow:hidden;color:var(--white)}
.ph-img{position:absolute;inset:0;will-change:transform}
.ph-img img{width:100%;height:100%;object-fit:cover}
.ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,0) 48%),
  linear-gradient(to bottom,rgba(0,0,0,.28),rgba(0,0,0,0) 22%)}
.ph-txt{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(40px,8vh,90px);z-index:2}
.ph-txt .lbl{margin:0 0 16px;opacity:.85}
.ph-title{margin:0 0 0 -.03em;font-size:clamp(56px,10.6vw,200px);line-height:.92;letter-spacing:-.035em;text-wrap:balance}
.ph-cue{position:absolute;right:var(--gut);bottom:clamp(40px,8vh,90px);z-index:2;margin:0;opacity:.8}
.pi{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 16px;padding:clamp(80px,13vh,160px) var(--gut) clamp(60px,9vh,110px)}
.pi-short{grid-column:1/9;margin:0;font-size:clamp(28px,3.4vw,58px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.pi-meta{grid-column:10/13;margin:0;display:grid;gap:14px;align-content:end}
.pi-meta div{display:grid;gap:4px;padding-top:12px;border-top:1px solid var(--line)}
.pi-meta dt{color:var(--mute)}
.pi-meta dd{margin:0;font-size:15px}
.pg{padding:0 var(--gut) clamp(90px,14vh,170px);display:grid;gap:clamp(12px,1.4vw,22px)}
.pg-row{display:flex;gap:clamp(12px,1.4vw,22px)}
.pg-row.gap{margin-top:clamp(40px,8vw,120px)}
.g{position:relative;margin:0;overflow:hidden;background:var(--line);cursor:zoom-in;flex:var(--ar) 1 0;aspect-ratio:var(--ar);min-width:0}
.g img{width:100%;height:100%;object-fit:cover}
.r-off{width:min(62%,980px)}
.r-off.r{margin-left:auto}
.r-off .g,.r-full .g{flex:1 1 auto}
@media (max-width:760px){
  .pi-short,.pi-meta{grid-column:1/-1}
  .pg-row{flex-direction:column}
  .g{flex:none;width:100%}
  .r-off{width:100%}
}
.pn{padding:0 var(--gut) clamp(90px,14vh,160px)}
.pn .lbl{display:block;margin:0 0 16px;color:var(--mute)}
.pn .slits{padding:0}

/* ---------------------------------------------------------------- motion page */
.mo{padding-block:clamp(120px,20vh,220px) clamp(90px,14vh,170px)}
.mo-head{padding-inline:var(--gut);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;align-items:end;margin-bottom:clamp(40px,7vh,80px)}
.mo-head h1{grid-column:1/9;margin:0;font-size:clamp(60px,11vw,210px);line-height:.92;letter-spacing:-.035em}
.mo-head p{grid-column:9/13;margin:0;color:var(--mute)}
.mo-grid{padding-inline:var(--gut);columns:3;column-gap:clamp(12px,1.4vw,22px)}
.reel{margin:0 0 clamp(26px,3vw,44px);break-inside:avoid}
.reel video{width:100%;aspect-ratio:var(--ar);object-fit:cover;background:var(--line)}
.reel figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:10px}
.reel figcaption b{font-weight:400;font-family:var(--f-display);font-size:19px}
.reel figcaption span{color:var(--mute)}
@media (max-width:1000px){ .mo-grid{columns:2} }
@media (max-width:560px){ .mo-grid{columns:1} .mo-head h1,.mo-head p{grid-column:1/-1} }

/* ---------------------------------------------------------------- about page */
.ab{padding-block:clamp(120px,20vh,220px) clamp(70px,10vh,120px);overflow:hidden}
.ab-lede{padding-inline:var(--gut);margin:0;font-size:clamp(38px,5.6vw,104px);line-height:1.02;letter-spacing:-.03em;max-width:18ch;text-wrap:balance}
.ab-grid{padding-inline:var(--gut);margin-top:clamp(60px,10vh,120px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px 16px}
.ab-bio{grid-column:1/6;display:grid;gap:16px;align-content:start}
.ab-bio p{margin:0;max-width:44ch}
.ab-cv{grid-column:7/13;display:grid;gap:38px;align-content:start}
.ab-cv h2{margin:0 0 10px;color:var(--mute)}
.xp{list-style:none;margin:0;padding:0}
.xp li{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:4px 16px;padding:13px 0;border-top:1px solid var(--line)}
.xp .yr{color:var(--mute);padding-top:4px}
.xp b{font-family:var(--f-display);font-weight:400;font-size:20px}
.xp span{display:block;color:var(--mute);font-size:15px}
.kit{margin:0;display:grid;gap:10px}
.kit div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:16px;padding-top:12px;border-top:1px solid var(--line)}
.kit dt{color:var(--mute);padding-top:3px}
.kit dd{margin:0;font-size:16px}
.kit-mq{margin-top:clamp(70px,12vh,140px)}
.kit-mq .mq-track{font-family:var(--f-display);font-size:clamp(56px,9vw,170px);line-height:1.05;letter-spacing:-.02em}
.kit-mq .mq-track i{font-style:normal;opacity:.3}
@media (max-width:760px){ .ab-bio,.ab-cv{grid-column:1/-1} .xp li,.kit div{grid-template-columns:6.5rem minmax(0,1fr)} }

/* ---------------------------------------------------------------- contact page + footer */
.ct{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,18vh,200px) var(--gut) clamp(70px,10vh,110px)}
.ct .lbl{color:var(--mute);margin:0}
.ct-title{margin:22px 0 clamp(30px,5vh,56px) -.03em;font-size:clamp(60px,12.6vw,240px);line-height:.92;letter-spacing:-.035em}
.ct-mail{align-self:flex-start;font-family:var(--f-display);font-size:clamp(24px,4.2vw,72px);line-height:1.1;letter-spacing:-.02em;
  text-decoration:none;word-break:break-all;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:6px;
  transition:background-size .6s var(--ease)}
.ct-mail:hover{background-size:0 1px;background-position:100% 100%}
.ct-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:clamp(28px,4vh,44px)}
.site-foot{padding:clamp(70px,12vh,140px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 32px)}
.site-foot .lbl{color:var(--mute);margin:0 0 18px}
.site-foot .ct-mail{display:inline-block}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 26px;margin-top:clamp(50px,9vh,100px);color:var(--mute);font-size:15px}
.foot-row a{text-decoration:none}
.foot-row a:hover{color:var(--fg)}
.foot-row nav{display:flex;gap:22px;flex-wrap:wrap}

/* ---------------------------------------------------------------- image viewer */
#lightbox{position:fixed;inset:0;z-index:160;display:grid;place-items:center;background:rgba(0,0,0,.96);color:var(--white);
  visibility:hidden;opacity:0;transition:opacity .3s ease,visibility 0s .3s;touch-action:pan-y}
#lightbox.on{visibility:visible;opacity:1;transition:opacity .3s ease}
#lbImg{max-width:min(90vw,1600px);max-height:78svh;width:auto;height:auto;object-fit:contain;user-select:none}
.lb-meta{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 28px);display:flex;justify-content:space-between;gap:16px;color:rgba(255,255,255,.6)}
.lb-nav{position:absolute;top:50%;translate:0 -50%;appearance:none;cursor:pointer;width:54px;height:54px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:var(--white);font-size:18px;transition:background-color .3s,color .3s}
.lb-nav:hover{background:var(--white);color:var(--black)}
.lb-prev{left:var(--gut)} .lb-next{right:var(--gut)}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:var(--gut);appearance:none;border:0;background:none;cursor:pointer;color:var(--white)}
@media (max-width:760px){ .lb-nav{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);translate:0 0;width:46px;height:46px} }

@media (prefers-reduced-motion:reduce){ .grain{animation:none} .slit{transition:none} }

/* ---------------------------------------------------------------- arriving from another page */
html.arrive .curtain{transform:none;animation:curtainFail 0s 2.5s forwards}
@keyframes curtainFail{to{transform:translateY(-100%)}}
.tip{position:fixed;left:0;top:0;z-index:189;pointer-events:none;padding:7px 11px;background:var(--black);color:var(--white);
  font:400 13px/1.2 var(--f-text);white-space:nowrap;opacity:0;transition:opacity .2s}
.tip.on{opacity:1}
@media (hover:none){ .tip{display:none} }

/* ---------------------------------------------------------------- home: the wall of screens */
.wall{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--white)}
.wall canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.wall-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:110px var(--gut) 120px}
.wall.is-3d .wall-fallback{display:none}
.wf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(980px,100%)}
.wf-grid a{position:relative;aspect-ratio:4/3;overflow:hidden;background:#111;border:10px solid var(--black);border-radius:10px;color:#fff;text-decoration:none}
.wf-grid img{width:100%;height:100%;object-fit:cover}
.wf-grid span{position:absolute;left:10px;bottom:8px;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.7)}
.wall-ui{position:absolute;inset:0;pointer-events:none;z-index:3}
.wall-ui a,.wall-ui button{pointer-events:auto}
.wall-cap{position:absolute;left:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 28px);margin:0;max-width:30ch;color:var(--mute);font-size:15px}
.wall-cap b{display:block;font-family:var(--f-display);font-weight:400;color:var(--fg);font-size:clamp(22px,2.2vw,34px);letter-spacing:-.02em;margin-bottom:4px}
.wall-cue{position:absolute;left:50%;translate:-50% 0;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);margin:0;color:var(--mute);text-decoration:none}
.help{position:fixed;right:var(--gut);bottom:calc(env(safe-area-inset-bottom,0px) + 24px);z-index:90;width:46px;height:46px;border-radius:50%;
  border:0;background:var(--black);color:var(--white);font:400 20px/1 var(--f-display);cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .4s var(--ease)}
.help:hover{transform:scale(1.08)}
.sticker{position:absolute;left:0;top:0;pointer-events:none;white-space:nowrap;padding:7px 12px;font:400 14px/1 var(--f-display);letter-spacing:.02em;
  background:var(--black);color:var(--white);rotate:-6deg;translate:14px -150%;box-shadow:0 8px 20px rgba(0,0,0,.18);transition:opacity .3s}
.sticker.alt{background:var(--white);color:var(--black);border:1px solid var(--black);rotate:5deg;translate:10px -170%}
.wall.is-on .sticker.alt{opacity:0}
.wall-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wall-sr:focus-within{left:var(--gut);top:90px;width:auto;height:auto;clip:auto;z-index:5;display:flex;gap:8px;flex-wrap:wrap;
  background:var(--white);padding:10px;border:1px solid var(--black)}
@media (max-width:760px){ .wall-cue{display:none} .wall-cap{max-width:22ch}
  .sticker{translate:calc(-100% - 8px) -150%;font-size:12px} .sticker.alt{translate:calc(-100% - 30px) -120%} }

/* ---------------------------------------------------------------- welcome tour */
.tour{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:24px;background:rgba(10,10,10,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s .35s}
.tour.on{visibility:visible;opacity:1;transition:opacity .35s ease}
.tr-card{position:relative;width:min(460px,100%);background:var(--white);color:var(--black);padding:38px 34px 30px;text-align:center;
  box-shadow:0 40px 90px rgba(0,0,0,.35);border:1px solid var(--black)}
.tr-skip{position:absolute;top:14px;right:16px;appearance:none;border:0;background:none;cursor:pointer;color:var(--mute)}
.tr-skip:hover{color:var(--black)}
.tr-icon{width:58px;height:58px;margin:0 auto 14px}
.tr-icon svg{width:100%;height:100%;fill:none;stroke:var(--black);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tr-k{margin:0 0 8px;color:var(--mute)}
.tr-card h2{margin:0 0 12px;font-size:clamp(28px,3vw,36px);line-height:1.05}
.tr-body{margin:0 auto;max-width:34ch;font-size:16px;line-height:1.55}
.tr-dots{display:flex;justify-content:center;gap:7px;margin:22px 0}
.tr-dots i{width:7px;height:7px;border-radius:99px;background:rgba(10,10,10,.2);transition:width .4s var(--ease),background-color .3s}
.tr-dots i.on{width:22px;background:var(--black)}
.tr-nav{display:flex;justify-content:center;gap:10px}
.tr-nav .pill{padding:12px 22px;font-size:14px}

/* ---------------------------------------------------------------- studio line (contact board) */
.board{position:fixed;inset:0;z-index:180;display:grid;place-items:center;padding:20px;background:rgba(10,10,10,.6);perspective:1200px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease,visibility 0s .3s}
.board.on{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .3s ease}
.bd{width:min(520px,100%);background:#141414;color:var(--white);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:18px 18px 16px;
  box-shadow:0 50px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.bd-top{display:flex;justify-content:space-between;align-items:center;color:rgba(255,255,255,.7);margin-bottom:14px}
.bd-x{appearance:none;border:0;background:none;cursor:pointer;color:rgba(255,255,255,.7)}
.bd-x:hover{color:#fff}
.bd-tape{position:relative;display:flex;align-items:center;gap:12px;padding:12px 16px 26px;border-radius:8px;background:#0b0b0b;border:1px solid rgba(255,255,255,.1)}
.reel-dot{width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.7);flex:none;
  background:repeating-conic-gradient(rgba(255,255,255,.75) 0 12deg,transparent 12deg 60deg);animation:spin 1.4s linear infinite paused}
.board.on .reel-dot{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.bd-bar{flex:1;height:3px;background:rgba(255,255,255,.15);overflow:hidden}
.bd-bar b{display:block;height:100%;width:40%;background:#fff;animation:tape 9s linear infinite paused}
.board.on .bd-bar b{animation-play-state:running}
@keyframes tape{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
.bd-tape .lbl{position:absolute;left:50%;bottom:7px;translate:-50% 0;font-size:10px;color:rgba(255,255,255,.5)}
.bd-screen{margin:14px 0;padding:16px 18px;min-height:190px;background:#0b0b0b;border:1px solid rgba(255,255,255,.12);border-radius:6px;
  font-size:15px;line-height:1.55;color:rgba(255,255,255,.86)}
.bd-screen p{margin:0 0 6px}
.bd-title{font-family:var(--f-display);font-size:22px;color:#fff}
.bd-screen ul{list-style:none;margin:10px 0 0;padding:0}
.bd-screen li::before{content:"\25B8  ";opacity:.6}
.bd-out{margin-top:12px!important;color:#fff;min-height:1.5em}
.bd-out a{color:#fff}
.bd-keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bd-keys > *{appearance:none;cursor:pointer;display:grid;place-items:center;gap:4px;padding:14px 6px;text-decoration:none;color:#111;
  background:linear-gradient(#f4f4f2,#d9d9d6);border:1px solid #000;border-radius:6px;box-shadow:0 4px 0 #000;transition:transform .1s,box-shadow .1s}
.bd-keys b{font:400 26px/1 var(--f-display)}
.bd-keys span{font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.bd-keys > *:hover{background:#fff}
.bd-keys > .hit,.bd-keys > *:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.bd-hint{margin:12px 0 0;text-align:center;font-size:10px;color:rgba(255,255,255,.45)}

/* ---------------------------------------------------------------- project: turntable */
.tt{position:relative;height:min(86svh,860px);min-height:460px;overflow:hidden}
.tt canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.tt canvas:active{cursor:grabbing}
.tt-ui{position:absolute;inset:0;pointer-events:none;padding:clamp(70px,10vh,110px) var(--gut) clamp(28px,5vh,48px);display:flex;flex-direction:column;justify-content:space-between}
.tt-ui button{pointer-events:auto}
.tt-title{margin:0;font-size:clamp(44px,6vw,110px);line-height:.95;letter-spacing:-.03em}
.tt-foot{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
.tt-note{margin:0;color:var(--mute);max-width:36ch;font-size:14px}
.tt-modes{display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;pointer-events:auto}
.tt-modes button{appearance:none;cursor:pointer;border:0;border-radius:999px;padding:9px 18px;background:transparent;color:var(--mute);font:400 14px/1 var(--f-text)}
.tt-modes button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.tt-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--mute)}
.tt.is-3d .tt-fallback{display:none}

/* ---------------------------------------------------------------- home marquee + about numbers */
.home-mq{padding-block:clamp(40px,8vh,90px) 0;overflow:hidden}
.home-mq .mq-track{font-family:var(--f-display);font-size:clamp(64px,13vw,250px);line-height:1.05;letter-spacing:-.02em}
.ab-nums{display:grid;grid-template-columns:1fr 1fr;gap:26px 16px;margin-top:26px}
.ab-nums .nu b{font-size:clamp(44px,5.4vw,96px)}
.ab-nums .nu span{margin-top:6px}

/* ---------------------------------------------------------------- footer: signature + copyright */
.site-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding:clamp(56px,10vh,110px) var(--gut) calc(env(safe-area-inset-bottom,0px) + 28px)}
.foot-sig{display:block;color:var(--white);text-decoration:none;transition:transform .7s var(--ease),opacity .3s}
.foot-sig:hover{transform:rotate(-4deg) scale(1.05)}
.sig{display:block;width:clamp(150px,17vw,280px);aspect-ratio:410.8/249;background:currentColor;
  -webkit-mask:url(signature.svg?v=b274ea2837) center/contain no-repeat;mask:url(signature.svg?v=b274ea2837) center/contain no-repeat}
.foot-copy{color:var(--mute);font-size:14px}
.help{transition:transform .4s var(--ease),opacity .3s}
.help.away{opacity:0;pointer-events:none;transform:scale(.6)}

/* ---------------------------------------------------------------- RohitOS */
.os{position:fixed;inset:0;overflow:hidden;color:var(--black);background:#f2f2ef;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.03) 0 1px,transparent 1px 4px),radial-gradient(120% 90% at 50% 40%,#fbfbf9 0%,#e9e8e4 100%)}
.os.inv{filter:invert(1)}
.os.inv img,.os.inv video{filter:invert(1)}
.os-menu{position:absolute;top:0;left:0;right:0;z-index:50;height:36px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:0 12px;background:var(--black);color:var(--white);font:13px var(--f-text)}
.os-menu-l,.os-menu-r{display:flex;align-items:center;gap:2px;white-space:nowrap}
.os-menu b{font:400 16px var(--f-display);margin-right:14px}
.os-menu button{appearance:none;border:0;background:none;color:inherit;cursor:pointer;padding:5px 10px;font:inherit;opacity:.82}
.os-menu button:hover{opacity:1;background:rgba(255,255,255,.14)}
.os-clock{font-variant-numeric:tabular-nums;opacity:.85;margin-right:12px}
.os-off{border:1px solid rgba(255,255,255,.6);padding:5px 12px;text-decoration:none;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.os-off:hover{background:var(--white);color:var(--black)}
.os-desk{position:absolute;inset:36px 0 0 0}
.os-sig{position:absolute;left:50%;top:48%;translate:-50% -50%;width:min(72vw,940px);aspect-ratio:410.8/249;pointer-events:none;
  background:rgba(10,10,10,.07);-webkit-mask:url(signature.svg?v=b274ea2837) center/contain no-repeat;mask:url(signature.svg?v=b274ea2837) center/contain no-repeat}
.os-icons{position:absolute;left:14px;top:18px;z-index:2;display:grid;gap:10px}
.os-icon{appearance:none;border:0;background:none;cursor:pointer;width:88px;display:grid;justify-items:center;gap:6px;padding:6px 2px;
  font:12px/1.25 var(--f-text);color:var(--black);text-align:center}
.os-icon i{width:44px;height:44px;display:grid;place-items:center;background:var(--white);border:1px solid var(--black);box-shadow:3px 3px 0 var(--black);
  transition:transform .2s ease}
.os-icon svg,.os-dock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.os-icon:hover i{transform:translate(-1px,-1px)}
.os-icon.sel i{background:var(--black);color:var(--white)}
.os-icon.sel span{background:var(--black);color:var(--white);padding:0 4px}
.os-roll{position:absolute;right:20px;top:18px;z-index:2;appearance:none;cursor:pointer;width:126px;padding:8px 8px 10px;background:var(--white);
  border:1px solid var(--black);box-shadow:4px 4px 0 var(--black);display:grid;gap:8px;font:11px var(--f-text);letter-spacing:.12em;
  text-transform:uppercase;rotate:3deg;transition:rotate .4s var(--ease)}
.os-roll img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1);transition:filter .5s}
.os-roll:hover{rotate:0deg}
.os-roll:hover img{filter:none}
.os-dock{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);translate:-50% 0;z-index:40;display:flex;gap:6px;padding:6px;
  background:var(--white);border:1px solid var(--black);box-shadow:4px 4px 0 var(--black)}
.os-dock > *{appearance:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--black);background:var(--white);
  color:var(--black);font:16px var(--f-display);text-decoration:none}
.os-dock > *:hover{background:var(--black);color:var(--white)}
.os-win{position:absolute;display:flex;flex-direction:column;width:520px;max-width:calc(100vw - 24px);max-height:calc(100svh - 130px);
  background:var(--white);border:1px solid var(--black);box-shadow:6px 6px 0 var(--black);z-index:10}
.os-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:5px 6px 5px 10px;border-bottom:1px solid var(--black);
  background:repeating-linear-gradient(0deg,var(--white) 0 2px,#e7e7e4 2px 4px);cursor:grab;user-select:none;touch-action:none;font:12px var(--f-text);letter-spacing:.06em}
.os-win.top .os-bar{background:repeating-linear-gradient(0deg,var(--white) 0 2px,#bdbdb9 2px 4px)}
.os-win.drag .os-bar{cursor:grabbing}
.os-bar span{background:var(--white);padding:1px 8px}
.os-x{appearance:none;width:22px;height:22px;border:1px solid var(--black);background:var(--white);cursor:pointer;font:12px/1 var(--f-text);display:grid;place-items:center}
.os-x:hover{background:var(--black);color:var(--white)}
.os-body{overflow:auto;padding:22px 24px 26px;font-size:15px;line-height:1.62}
.os-body h2{margin:0 0 16px;font:400 clamp(30px,3.2vw,44px)/1 var(--f-display);letter-spacing:-.02em;display:flex;align-items:center;gap:14px}
.os-body h2 i{flex:0 0 48px;height:1px;background:currentColor}
.os-body p{margin:0 0 12px}
.os-body a,.os-link{color:inherit;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.os-rows{list-style:none;margin:0;padding:0}
.os-rows li{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:2px 14px;padding:10px 0;border-top:1px solid rgba(10,10,10,.14)}
.os-rows b{font:400 18px var(--f-display)}
.os-rows span{display:block;color:rgba(10,10,10,.6);font-size:14px}
.os-proj{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.os-proj a{display:grid;grid-template-columns:92px minmax(0,1fr) auto;align-items:center;gap:14px;padding:6px;border:1px solid rgba(10,10,10,.16);text-decoration:none}
.os-proj a:hover{border-color:var(--black);background:#f4f4f1}
.os-proj img{width:92px;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1);transition:filter .4s}
.os-proj a:hover img{filter:none}
.os-proj b{display:block;font:400 19px/1.1 var(--f-display)}
.os-proj span{font-size:12px;color:rgba(10,10,10,.6)}
.os-reel video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#111;display:block}
.os-reel-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.os-reel-list button{appearance:none;cursor:pointer;border:1px solid var(--black);background:var(--white);padding:6px 10px;font:12px var(--f-text)}
.os-reel-list button[aria-pressed="true"]{background:var(--black);color:var(--white)}
.os-set{display:grid;gap:10px}
.os-set button{appearance:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:12px 14px;
  border:1px solid var(--black);background:var(--white);font:15px var(--f-text);text-align:left}
.os-set button b{font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border:1px solid var(--black)}
.os-set button[aria-checked="true"] b{background:var(--black);color:var(--white)}
.os-mail{display:grid;gap:6px;margin:0 0 16px;font-size:14px}
.os-mail div{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:10px;padding-bottom:6px;border-bottom:1px solid rgba(10,10,10,.14)}
.os-mail dt{color:rgba(10,10,10,.55)}
.os-mail dd{margin:0;word-break:break-all}
.os-btns{display:flex;flex-wrap:wrap;gap:8px}
.os-btns > *{appearance:none;cursor:pointer;border:1px solid var(--black);background:var(--black);color:var(--white);padding:10px 16px;font:14px var(--f-text);text-decoration:none}
.os-btns > *:nth-child(2){background:var(--white);color:var(--black)}
.os-win.wide{width:760px}
.os-mag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:420px}
.os-win .os-mag-body{padding:0}
.os-mag-l{padding:22px 24px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--black)}
.os-mag-l .lbl{font-size:10px;display:flex;justify-content:space-between;gap:10px}
.os-mag-l h2{font:400 clamp(44px,5vw,76px)/.9 var(--f-display);letter-spacing:-.03em;margin:10px 0 0;display:block}
.os-mag-l ol{list-style:none;margin:auto 0 0;padding:0;display:grid;gap:8px}
.os-mag-l ol a{font:italic 16px var(--f-text);text-decoration:none}
.os-mag-l ol a:hover{text-decoration:underline}
.os-mag-r{position:relative;margin:0;cursor:pointer;background:#111;overflow:hidden;min-height:300px}
.os-mag-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.os-mag-r figcaption{position:absolute;left:12px;right:12px;bottom:10px;color:var(--white);font-size:12px;text-shadow:0 1px 8px rgba(0,0,0,.7);
  display:flex;justify-content:space-between;gap:10px}
.os-boot{position:fixed;inset:0;z-index:300;background:var(--black);color:var(--white);display:grid;place-content:center;justify-items:center;gap:14px;text-align:center}
.os-boot b{font:400 clamp(36px,4.4vw,60px)/1 var(--f-display)}
.os-boot p{margin:0}
.os-boot-bar{width:220px;height:8px;border:1px solid var(--white);padding:1px}
.os-boot-bar i{display:block;height:100%;width:0;background:var(--white);animation:boot 1.1s steps(14) forwards}
@keyframes boot{to{width:100%}}
.os-boot.done{opacity:0;visibility:hidden;transition:opacity .5s ease .05s,visibility 0s .6s}
@media (max-width:760px){
  .os-menu-l button{display:none}
  .os-icons{grid-template-columns:repeat(4,1fr);left:6px;right:6px;top:10px}
  .os-roll{display:none}
  .os-win,.os-win.wide{left:8px!important;right:8px;width:auto!important;top:190px!important;max-height:calc(100svh - 290px)}
  .os-mag{grid-template-columns:1fr}
  .os-mag-l{border-right:0;border-bottom:1px solid var(--black)}
}

/* ---------------------------------------------------------------- cursors: tiny inverting dot; a TV remote over the wall */
.cursor{width:8px;height:8px;margin:-4px 0 0 -4px}
.cursor.is-label{width:18px;height:18px;margin:-9px 0 0 -9px}
.cursor b{display:none}
.cursor-remote{position:fixed;left:0;top:0;z-index:191;pointer-events:none;width:30px;height:75px;margin-left:-15px;transform-origin:15px 0;
  display:none;opacity:0;transition:opacity .2s}
.cursor-remote svg{width:100%;height:100%;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.28))}
.cr-beam{position:absolute;left:50%;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border:2px solid #111;border-radius:50%;opacity:0}
.cursor-remote.fire .cr-beam{animation:irBeam .55s ease-out}
.cursor-remote.fire .cr-ir{animation:irLed .4s steps(2)}
@keyframes irBeam{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(5)}}
@keyframes irLed{50%{fill:#ff3b30}}
@media (hover:hover) and (pointer:fine){
  .cursor-remote{display:block}
  html.on-wall .cursor-remote{opacity:1}
  html.on-wall .cursor{opacity:0}
  html.on-wall #wall canvas,html.on-wall #wall .wall-ui{cursor:none}
}

/* ---------------------------------------------------------------- footer: big centred signature, the Hindi name at the very end */
.site-foot{display:block;position:relative;overflow:hidden;padding:clamp(80px,14vh,160px) 0 0}
.foot-top{display:grid;justify-items:center;gap:20px;padding:0 var(--gut)}
.foot-sig .sig{width:clamp(240px,36vw,620px)}
.foot-copy{font-size:13px;color:var(--mute)}
.foot-hi-wrap{width:100%;text-align:center;margin-top:clamp(40px,8vh,100px);line-height:0}
.foot-hi{display:inline-block;margin:0 0 -.13em;white-space:nowrap;font-family:'Sarpanch','Mukta','Noto Sans Devanagari',sans-serif;
  font-weight:900;line-height:.86;color:var(--white);font-size:18vw}
.foot-hi span{display:inline-block;will-change:transform}

/* ---------------------------------------------------------------- wall: the signature is a flat layer behind the 3D, it never moves */
.wall-sig{position:absolute;z-index:0;pointer-events:none;background:var(--black);
  -webkit-mask:url(signature.svg?v=b274ea2837) center/contain no-repeat;mask:url(signature.svg?v=b274ea2837) center/contain no-repeat}
.wall canvas{z-index:1}

/* ---------------------------------------------------------------- project gallery, Behance-style: full width, one even gap */
.pg{gap:10px;padding:0 var(--gut) clamp(90px,14vh,170px)}
.pg-row{display:flex;gap:10px}
.pg .g{flex:var(--ar) 1 0;aspect-ratio:var(--ar);min-width:0;margin:0}
/* feature row: a portrait in the middle, two renders stacked on each side */
.pg-feature .pg-col{flex:.65 1 0;min-width:0;display:grid;grid-template-rows:1fr 1fr;gap:10px}
.pg-feature .pg-col .g{flex:none;aspect-ratio:auto;min-height:0;height:100%}
.pg-feature .pg-col .g img{position:absolute;inset:0}   /* the centre portrait alone sets the row height */
.pg-feature .pg-mid{flex:1 1 0}
@media (max-width:760px){
  .pg-row{flex-direction:column} .pg .g{flex:none;width:100%}
  .pg-feature .pg-col{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none}
  .pg-feature .pg-col .g{aspect-ratio:1;height:auto}
  .pg-feature .pg-mid{order:-1}
}

/* ---------------------------------------------------------------- footer: corner copyright; on hover a thin white outline traces the signature */
.foot-copy{position:absolute;top:22px;right:var(--gut);margin:0;font-size:12px;letter-spacing:.04em;color:var(--mute)}
.foot-sig{position:relative;display:block;padding:10px;text-decoration:none;color:var(--white)}
.foot-sig:hover{transform:none}
.foot-sig-svg{display:block;width:clamp(260px,38vw,660px);height:auto;overflow:visible}
.foot-sig-svg .sig-fill{fill:currentColor}
.foot-sig-svg .sig-ring{opacity:0;transition:opacity .35s ease}
.foot-sig:hover .sig-ring,.foot-sig:focus-visible .sig-ring{opacity:1}
.foot-sig:focus-visible{outline:none}

/* ---------------------------------------------------------------- about: the resume itself, numbers underneath */
.ab-bio{grid-column:1/7;gap:0}
.ab-cv{grid-column:8/13}
.ab-resume{margin:0;display:grid;gap:18px}
.ab-resume > a{display:block;border:1px solid var(--line);box-shadow:0 34px 70px -38px rgba(0,0,0,.45);transition:transform .5s var(--ease)}
.ab-resume > a:hover{transform:translateY(-4px)}
.ab-resume img{display:block;width:100%;height:auto}
.ab-resume figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ab-resume figcaption .lbl{color:var(--mute)}
.ab-nums{margin-top:clamp(44px,7vh,80px);padding-top:28px;border-top:1px solid var(--line)}
@media (max-width:760px){ .ab-bio,.ab-cv{grid-column:1/-1} }

/* ---------------------------------------------------------------- RohitOS: the real resume */
.os-resume{margin:0 0 14px;border:1px solid var(--black)}
.os-resume img{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- motion: three balanced columns, flush at the bottom */
.mo-grid{columns:auto;display:flex;align-items:stretch;gap:clamp(12px,1.4vw,22px)}
.mo-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
.mo-col .reel:last-child{flex:1 0 auto;display:flex;flex-direction:column;margin-bottom:0}
.mo-col .reel:last-child video{flex:1 0 auto}
@media (max-width:1000px){ .mo-grid{display:block;columns:2} .mo-col{display:contents} .mo-col .reel:last-child{display:block;margin-bottom:clamp(26px,3vw,44px)} }
@media (max-width:560px){ .mo-grid{columns:1} }

/* ---------------------------------------------------------------- home: the drawn scene */
.wall{--hs:.5}
/* the "pick up!" bubble: its tail sits on the phone, sized with the drawing */
.sticker.bubble{rotate:none;translate:-18% calc(-100% - 2px);padding:.45em .8em .5em;border-radius:3px;
  font:400 max(11px, calc(13px * var(--hs)))/1 var(--f-text);letter-spacing:0;box-shadow:none}
.sticker.bubble::after{content:"";position:absolute;left:12%;top:100%;border:solid transparent;border-width:0 .55em .9em 0;border-right-color:var(--black)}
/* without WebGL: the drawing as a picture, with the two ways in */
.wall-fallback{display:block;padding:0}
.wall-fallback img{position:absolute;right:0;top:50%;translate:0 -50%;height:min(100%, 100vw);width:auto;max-width:none}
.wf-links{position:absolute;left:var(--gut);bottom:84px;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:760px){ .sticker.bubble{translate:-18% calc(-100% - 2px);font-size:11px} }

/* ---------------------------------------------------------------- header: no name (the signature says it), the links on the right */
.bar .nav{margin-left:auto}

/* ---------------------------------------------------------------- a hand over the studio line */
.cursor-hand{position:fixed;left:0;top:0;z-index:191;pointer-events:none;width:28px;height:32px;margin:-1px 0 0 -12px;
  transform-origin:12px 1px;display:none;opacity:0;transition:opacity .15s}
.cursor-hand svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
@media (hover:hover) and (pointer:fine){
  .cursor-hand{display:block}
  html.on-hand .cursor-hand{opacity:1}
  html.on-hand .cursor{opacity:0}
  html.on-hand #wall canvas{cursor:none}
}

/* ---------------------------------------------------------------- about: the resume stands as tall as the column beside it
   (as far as its width allows); the download button sits right under it */
@media (min-width:761px){
  .ab-bio{grid-column:1/8;padding-right:clamp(20px,3vw,56px);container-type:size;min-height:560px}
  .ab-resume > a{display:block;width:max-content;max-width:100%;border:0;box-shadow:none;transform:none!important}
  .ab-resume img{width:auto;max-width:100%;height:min(calc(100cqh - 66px), calc(100cqw * 2200 / 1700));
    border:1px solid var(--line);box-shadow:0 34px 70px -38px rgba(0,0,0,.45);transition:transform .5s var(--ease)}
  .ab-resume > a:hover img{transform:translateY(-4px)}
  .ab-resume figcaption{justify-content:flex-start;gap:22px}
}

/* ---------------------------------------------------------------- 2026-10-22 polish */
/* project write-up under the one-liner, from the case studies */
.pi-brief{grid-column:1/9;max-width:66ch;display:grid;gap:14px;align-content:start;align-self:start;font-size:clamp(16px,1.12vw,18px);line-height:1.62}
.pi-brief p{margin:0}
.pi-brief:empty{display:none}
/* each project's own reels */
.pm{padding:0 var(--gut) clamp(60px,9vh,110px)}
.pm-head{display:flex;justify-content:space-between;gap:12px;margin:0 0 18px;padding-top:12px;border-top:1px solid var(--line);color:var(--mute)}
.pm-row{display:flex;gap:clamp(12px,1.4vw,22px);align-items:flex-start}
.pm-row .reel{flex:var(--ar) 1 0;min-width:0;margin:0}
.pm-row .reel:only-child{flex:none;width:min(100%, 1180px)}
.pm-row .reel figcaption{flex-direction:column;justify-content:flex-start;gap:4px}
.pm-row .reel figcaption b{font-size:clamp(16px,1.25vw,19px);line-height:1.2}
.pm-row .reel:only-child figcaption{flex-direction:row;justify-content:space-between}
/* a blurred stand-in behind each project hero until the full render arrives */
.ph-img{background-color:#111;background-size:cover;background-position:center}
@media (max-width:760px){
  .pi-brief{grid-column:1/-1}
  .pm-row{flex-direction:column}
  .pm-row .reel{flex:none;width:100%}
  .home-mq{padding-top:14px}
}
/* text selection in the site's own ink, inverted on dark sections */
::selection{background:var(--fg);color:var(--bg)}
/* one render alone on its row, centred and no taller than the screen, so it is seen whole */
.pg-row.pg-solo{justify-content:center}
.pg-row.pg-solo .g{flex:none;width:min(100%, calc(88vh * var(--ar)))}
/* ---------------------------------------------------------------- services (home + About) */
.svc{padding:clamp(70px,11vh,140px) var(--gut) clamp(50px,8vh,110px)}
.svc-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 clamp(26px,4vh,44px)}
.svc-title{margin:0;font-size:clamp(52px,9vw,170px);line-height:.9;letter-spacing:-.04em}
.svc-head .lbl{color:var(--mute);margin:0}
.svc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px)}
.svc-item{display:grid;align-content:start;gap:14px;padding:22px 0 clamp(34px,5vh,56px);border-top:1px solid var(--line)}
.svc-no{color:var(--mute)}
.svc-name{margin:0;font-size:clamp(26px,2.6vw,42px);line-height:1.08;letter-spacing:-.02em;max-width:20ch}
.svc-text{margin:0;max-width:52ch;font-size:clamp(16px,1.12vw,18px);line-height:1.55}
.svc-dl,.svc-see{margin:0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;max-width:58ch;line-height:1.5}
.svc-dl .lbl,.svc-see .lbl{color:var(--mute);flex:0 0 100%}
.svc-see a{font-size:15px}
@media (max-width:760px){ .svc-list{grid-template-columns:1fr} }
.ab-rest{padding-top:0}
/* ---------------------------------------------------------------- start a project: the header button */
.nav a.nav-cta{background:none;border:1px solid currentColor;border-radius:999px;padding:7px 15px 8px;transition:background-color .3s,color .3s}
.nav a.nav-cta:hover{background:var(--white);color:var(--black)}
/* the Motion page closes on the same display line as its "In motion" heading */
.mo-more{padding-inline:var(--gut);margin:clamp(40px,7vh,80px) 0 0;font-size:clamp(60px,11vw,210px);line-height:.92;letter-spacing:-.035em}