/* Abhishek Sharma — portfolio
   Paper is the sheet colour of his own drawing set; ink is black; blue is the dimension pencil. */
@font-face{font-family:"Archivo";src:url("/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{color-scheme:only light;
  --paper:#F2F1EC;
  --sheet:#FBFAF7;
  --ink:#14130F;
  --graphite:#6B6A63;
  --rule:rgba(20,19,15,.16);
  --blue:#2440D0;
  --pad:clamp(16px,3.2vw,48px);
  --wd:100;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.5;
  font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.6,0,.1,1)}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:baseline;
  padding:18px var(--pad);transition:transform .45s var(--ease);mix-blend-mode:difference;color:#fff}
.top.away{transform:translateY(-110%)}
.top a{font-size:15px;font-weight:500}
.top .me{font-weight:600;font-variation-settings:"wdth" 112;letter-spacing:-.01em}
.top nav{display:flex;gap:clamp(16px,2.4vw,34px)}
.top nav a{position:relative;padding:4px 0}
.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.top nav a:hover::after,.top nav a[aria-current]::after{transform:scaleX(1)}

/* ---------- home hero ---------- */
.hero{padding:clamp(96px,15vh,170px) var(--pad) 0}
.name{margin:0;font-weight:640;line-height:.84;letter-spacing:-.035em;text-transform:uppercase;
  font-size:clamp(54px,14.4vw,330px);font-variation-settings:"wdth" var(--wd);white-space:nowrap;user-select:none}
.name span{display:block;width:max-content}
.name .l2{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.dim{position:relative;height:34px;margin-top:clamp(10px,1.4vw,22px);color:var(--blue);width:var(--dw,60%)}
.dim::before{content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:currentColor}
.dim i{position:absolute;top:2px;width:1px;height:15px;background:currentColor;transform:rotate(35deg)}
.dim i:first-child{left:0}.dim i:nth-child(2){right:0}
.dim b{position:absolute;left:50%;top:0;transform:translateX(-50%);background:var(--paper);padding:0 10px;
  font-size:13px;font-weight:500;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 88;line-height:19px;white-space:nowrap}
.intro{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(22px,4vw,56px)}
.intro p{grid-column:1/span 6;margin:0;font-size:clamp(20px,2.05vw,32px);line-height:1.22;letter-spacing:-.012em;font-weight:440;max-width:24em}
.intro .hint{grid-column:9/span 4;align-self:end;justify-self:end;font-size:14px;color:var(--graphite);text-align:right;max-width:22em;text-wrap:balance}

.reel{position:relative;margin:clamp(28px,5vw,70px) calc(var(--pad)*-1) 0;height:min(86vh,60vw);min-height:320px;overflow:hidden;background:#1b1a17}
.reel a{position:absolute;inset:0;display:block;clip-path:inset(0 0 0 100%);z-index:1}
.reel a.on{clip-path:inset(0);z-index:2;transition:clip-path 1.15s cubic-bezier(.75,0,.15,1)}
.reel a.was{clip-path:inset(0);z-index:1}
.reel img{width:100%;height:118%;object-fit:cover;will-change:transform}
.reel-cap{display:flex;justify-content:space-between;gap:20px;padding:12px 0 0;font-size:14px}
.reel-cap span:last-child{color:var(--graphite);font-variant-numeric:tabular-nums}

/* ---------- section heads ---------- */
.sec{padding:clamp(80px,12vw,190px) var(--pad) 0}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:24px;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:clamp(30px,5vw,72px)}
.sec-h h2{margin:0;font-size:clamp(30px,4.6vw,76px);font-weight:560;line-height:.95;letter-spacing:-.03em;font-variation-settings:"wdth" 118}
.sec-h p{margin:0;font-size:14px;color:var(--graphite);max-width:24em;text-align:right}

/* ---------- featured tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(16px,2vw,32px);row-gap:clamp(48px,8vw,130px)}
.tile{display:block}
.tile:nth-child(6n+1){grid-column:1/span 8}
.tile:nth-child(6n+2){grid-column:10/span 3;align-self:end}
.tile:nth-child(6n+3){grid-column:2/span 5}
.tile:nth-child(6n+4){grid-column:7/span 6;margin-top:clamp(40px,9vw,150px)}
.tile:nth-child(6n+5){grid-column:1/span 4;align-self:end}
.tile:nth-child(6n+6){grid-column:6/span 7}
.frame{overflow:hidden;background:#dddbd3;clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.7,0,.15,1)}
.in .frame,.frame.in{clip-path:inset(0)}
.frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 1.6s var(--ease)}
.in .frame img,.frame.in img{transform:scale(1.04)}
.tile:hover .frame img{transform:scale(1)}
.tile .frame{aspect-ratio:var(--ar,4/3)}
.tile h3{margin:14px 0 2px;font-size:clamp(20px,2.1vw,34px);font-weight:560;line-height:1.02;letter-spacing:-.02em;
  font-variation-settings:"wdth" 96;transition:font-variation-settings .5s var(--ease)}
.tile:hover h3{font-variation-settings:"wdth" 125}
.tile p{margin:0;font-size:14px;color:var(--graphite)}

/* ---------- index ---------- */
.index h3{margin:clamp(34px,5vw,64px) 0 10px;font-size:14px;font-weight:500;color:var(--graphite)}
.index h3:first-of-type{margin-top:0}
.row{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,3fr) minmax(0,2.4fr) 7.5em;gap:20px;align-items:baseline;
  padding:clamp(10px,1.1vw,16px) 0;border-top:1px solid var(--rule);font-size:14px;color:var(--graphite);transition:color .3s}
.row:last-of-type{border-bottom:1px solid var(--rule)}
.row strong{color:var(--ink);font-size:clamp(22px,2.9vw,46px);font-weight:540;line-height:1;letter-spacing:-.025em;
  font-variation-settings:"wdth" 80;transition:font-variation-settings .55s var(--ease),color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:.08em}
.row span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.row:hover strong,.row:focus-visible strong{font-variation-settings:"wdth" 122;color:var(--blue)}
.index:has(.row:hover) .row:not(:hover) strong{color:rgba(20,19,15,.34)}
.peek{position:fixed;left:0;top:0;z-index:40;width:min(30vw,440px);aspect-ratio:4/3;pointer-events:none;overflow:hidden;
  opacity:0;transform:translate3d(var(--x,0),var(--y,0),0) scale(.92);transition:opacity .25s,scale .4s var(--ease);background:#dddbd3}
.peek.on{opacity:1}
.peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- about strip / footer ---------- */
.about{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.about p{grid-column:1/span 8;margin:0;font-size:clamp(22px,2.7vw,44px);line-height:1.14;letter-spacing:-.02em;font-weight:460}
.about div{grid-column:10/span 3;align-self:end;font-size:15px}
.link{display:inline-block;border-bottom:1px solid currentColor;padding-bottom:2px;font-weight:500;transition:color .25s}
.link:hover{color:var(--blue)}
.foot{padding:clamp(90px,13vw,200px) var(--pad) 26px}
.foot .mail{display:block;font-size:clamp(33px,7.1vw,150px);font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variation-settings:"wdth" 70;transition:font-variation-settings .7s var(--ease),color .3s;white-space:nowrap}
.foot .mail:hover{font-variation-settings:"wdth" 92;color:var(--blue)}
.foot .say{margin:0 0 14px;font-size:15px;color:var(--graphite)}
.foot .base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:clamp(36px,5vw,70px);padding-top:14px;border-top:1px solid var(--ink);font-size:14px}
.foot .base div{display:flex;gap:24px;flex-wrap:wrap}
.foot .base a:hover{color:var(--blue)}

/* ---------- project page ---------- */
.p-head{padding:clamp(110px,17vh,190px) var(--pad) 0}
.p-head .crumb{font-size:14px;color:var(--graphite);margin:0 0 18px}
.p-head .crumb a:hover{color:var(--blue)}
.p-head h1{margin:0;font-size:clamp(40px,9.2vw,190px);font-weight:600;line-height:.9;letter-spacing:-.04em;
  font-variation-settings:"wdth" var(--wd);text-wrap:balance;max-width:14em}
.p-meta{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(30px,5vw,72px);align-items:start}
.p-meta .lead{grid-column:1/span 7;margin:0;font-size:clamp(19px,1.85vw,28px);line-height:1.28;letter-spacing:-.01em;font-weight:440}
.p-meta dl{grid-column:9/span 4;margin:0;font-size:14px}
.p-meta dl div{display:grid;grid-template-columns:6.2em 1fr;gap:12px;padding:9px 0;border-top:1px solid var(--rule)}
.p-meta dl div:last-child{border-bottom:1px solid var(--rule)}
.p-meta dt{color:var(--graphite)}
.p-meta dd{margin:0}
.p-hero{margin:clamp(34px,5vw,80px) 0 0;overflow:hidden;max-height:92vh;background:#dddbd3}
.p-hero img{width:100%;height:auto;min-height:100%;object-fit:cover}
.p-body{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:clamp(40px,7vw,110px) var(--pad) 0}
.p-body div{grid-column:6/span 6;max-width:38em}
.p-body p{margin:0 0 1em;font-size:18px;line-height:1.55}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(28px,4vw,64px) clamp(16px,2vw,32px);padding:clamp(40px,7vw,110px) var(--pad) 0;align-items:start}
.gal figure{margin:0;grid-column:span 12}
.gal .h{grid-column:span 6}.gal .t{grid-column:span 4}
.gal .w{grid-column:2/span 10}
.gal button{all:unset;display:block;width:100%;cursor:zoom-in;overflow:hidden;background:var(--sheet);
  clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.7,0,.15,1)}
.gal .in button{clip-path:inset(0)}
.gal button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.gal img{width:100%}
.gal figcaption{margin-top:10px;font-size:14px;line-height:1.4;color:var(--graphite);max-width:44em}
.next{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:end;margin:clamp(90px,13vw,200px) var(--pad) 0;padding-top:14px;border-top:1px solid var(--ink)}
.next small{grid-column:1/-1;font-size:14px;color:var(--graphite)}
.next strong{grid-column:1/span 8;font-size:clamp(34px,7vw,132px);font-weight:600;line-height:.92;letter-spacing:-.04em;
  font-variation-settings:"wdth" 74;transition:font-variation-settings .7s var(--ease),color .3s;text-wrap:balance}
.next:hover strong{font-variation-settings:"wdth" 116;color:var(--blue)}
.next .frame{grid-column:10/span 3;aspect-ratio:4/3}

/* lightbox */
dialog.box{border:0;padding:0;margin:0;width:100vw;height:100dvh;max-width:none;max-height:none;background:rgba(242,241,236,.97);overflow:auto;cursor:zoom-out}
dialog.box::backdrop{background:transparent}
dialog.box img{margin:auto;max-width:min(96vw,1700px);max-height:none;padding:5vh 0 2vh;min-height:0;object-fit:contain}
dialog.box.fit img{max-height:90vh;width:auto}
dialog.box p{margin:0 auto;padding:0 4vw 5vh;max-width:50em;font-size:14px;color:var(--graphite);text-align:center}
dialog.box .x{position:fixed;top:14px;right:var(--pad);font:inherit;font-size:15px;font-weight:500;background:none;border:0;border-bottom:1px solid;padding:2px 0;cursor:pointer;color:var(--ink)}

/* ---------- profile ---------- */
.cv-intro{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:clamp(30px,5vw,72px)}
.cv-intro p{grid-column:1/span 8;margin:0;font-size:clamp(21px,2.4vw,38px);line-height:1.18;letter-spacing:-.018em;font-weight:450}
.cv-intro p+p{grid-column:1/span 6;font-size:18px;line-height:1.55;letter-spacing:0;font-weight:400;margin-top:10px}
.cv{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;padding:clamp(60px,9vw,130px) var(--pad) 0}
.cv h2{grid-column:1/span 3;margin:0;font-size:clamp(24px,2.6vw,40px);font-weight:560;letter-spacing:-.025em;line-height:1;font-variation-settings:"wdth" 118;position:sticky;top:80px;align-self:start}
.cv .list{grid-column:4/span 9}
.cv .item{display:grid;grid-template-columns:9.5em 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--rule)}
.cv .item:last-child{border-bottom:1px solid var(--rule)}
.cv .when{font-size:14px;color:var(--graphite);font-variant-numeric:tabular-nums;padding-top:4px}
.cv h3{margin:0;font-size:clamp(19px,1.7vw,25px);font-weight:560;letter-spacing:-.015em;line-height:1.15}
.cv .role{margin:3px 0 0;font-size:15px;color:var(--graphite)}
.cv .item p.d{margin:10px 0 0;font-size:16px;line-height:1.5;max-width:40em}

/* reveal for text blocks: one quiet rise, used only on section heads */
.rise{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rise.in{opacity:1;transform:none}

/* ---------- small screens ---------- */
@media (max-width:820px){
  body{font-size:16px}
  .intro p,.intro .hint{grid-column:1/-1;justify-self:start;text-align:left}
  .intro .hint{margin-top:6px}
  .reel{height:62vh}
  .sec-h{flex-direction:column;gap:8px}.sec-h p{text-align:left}
  .tiles{row-gap:44px}
  .tile:nth-child(n){grid-column:1/-1;margin-top:0}
  .tile:nth-child(even){grid-column:3/-1}
  .row{grid-template-columns:1fr auto;gap:2px 14px}
  .row strong{grid-column:1/-1;white-space:normal;font-variation-settings:"wdth" 86}
  .row span:nth-of-type(2){display:none}
  .peek{display:none}
  .about p,.about div{grid-column:1/-1}
  .p-meta .lead,.p-meta dl{grid-column:1/-1}
  .p-body div{grid-column:1/-1}
  .gal figure,.gal .h,.gal .w{grid-column:1/-1}
  .gal .t{grid-column:span 6}
  .next strong{grid-column:1/-1}.next .frame{grid-column:1/span 7}
  .cv-intro p,.cv-intro p+p{grid-column:1/-1}
  .cv h2{grid-column:1/-1;position:static;margin-bottom:14px}
  .cv .list{grid-column:1/-1}
  .cv .item{grid-template-columns:1fr;gap:4px}
  .foot .mail{font-variation-settings:"wdth" 62}
}
@media (hover:none){.intro .hint{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .frame,.gal button{clip-path:none!important}.frame img{transform:none!important}
  .rise{opacity:1;transform:none}
  @view-transition{navigation:none}
}