/* Projects + case pages, v3: small type, 4-column grid, air, one playful gesture per block. */
:root{
  --bg:#ffffff;
  --ink:#111111;
  --muted:#8a8a8a;
  --rule:#e8e8e8;
  --font:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --gut:max(16px, env(safe-area-inset-left,0px));
  --gut-r:max(16px, env(safe-area-inset-right,0px));
  --gap:10px;
  --t:clamp(15px,1.15vw,18px);      /* the one reading size */
  --s:12px;                          /* labels */
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);letter-spacing:-.02em;line-height:1.25;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:22px var(--gut-r) 14px var(--gut);font-size:clamp(18px,2.2vw,32px);line-height:.95;letter-spacing:-.026em;background:var(--bg)}
nav a{position:relative}
nav a::after,.u::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
nav a[aria-current]::after,.u:hover::after{transform:scaleX(1)}
nav em{font-style:italic}
.u{position:relative;display:inline-block}

.wrap{padding:clamp(120px,18vh,190px) var(--gut-r) 70px var(--gut);font-size:var(--t)}
.muted{color:var(--muted)}
.lab{font-size:var(--s);color:var(--muted);letter-spacing:0}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}

/* ---------- Projects: table + image that follows the cursor ---------- */
.ptable{list-style:none;margin:0;padding:0}
.ptable .hd,.ptable a{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);padding:9px 0;border-bottom:1px solid var(--rule)}
.ptable .hd{font-size:var(--s);color:var(--muted);border-bottom-color:var(--ink)}
.ptable a{transition:padding .5s var(--ease)}
.ptable .nm{transition:transform .5s var(--ease)}
.ptable a:hover .nm{transform:translateX(10px)}
.ptable a:hover .no::before{content:"→ "}
.ptable .soon{color:var(--muted)}
.ptable .soon .nm::after{content:" (soon)";color:var(--muted)}
.ptable .th{display:none}
#float{position:fixed;left:0;top:0;width:clamp(150px,13vw,210px);pointer-events:none;z-index:4;opacity:0;transition:opacity .35s ease}
#float img{width:100%;aspect-ratio:4/5;object-fit:cover}
.pnote{margin-top:22px}

/* ---------- Case page ---------- */
.intro{align-items:start;margin-bottom:clamp(90px,16vh,170px)}
.intro .info{grid-column:1 / span 2;max-width:46ch}
.intro h1{margin:0;font-weight:400;font-size:clamp(18px,1.7vw,26px);line-height:1}
.intro h1 em{font-style:italic}
.intro .line{margin:6px 0 26px}
.intro p{margin:0 0 .9em}
.role{margin:26px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px}
.cycle{grid-column:3 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.cyc{position:relative;aspect-ratio:2/3;overflow:hidden;background:#f3f3f3}
.cyc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.1s ease}
.cyc img.on{opacity:1}

.blk{margin-bottom:clamp(90px,16vh,170px)}
.blk-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}
.blk-h h2{margin:0;font-weight:400;font-size:var(--t)}
.blk-h h2 span{color:var(--muted);margin-right:.6em}
.tile{margin:0;position:relative;overflow:hidden}
.tile img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile figcaption{position:absolute;left:8px;bottom:8px;font-size:var(--s);color:#fff;opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;text-shadow:0 0 8px rgba(0,0,0,.35)}
.tile:hover figcaption{opacity:1;transform:none}
.txtcol{max-width:46ch}
.txtcol p{margin:0 0 .9em}

/* scroll reveal: tiles drift in, one after another */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s ease,transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* collection viewer */
.tabs{display:flex;gap:18px}
.tabs button{color:var(--muted);position:relative}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:currentColor}
.stage{position:relative;overflow:hidden;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut-r));touch-action:pan-y;user-select:none}
.vtrack{display:flex;gap:var(--gap);transition:transform .8s var(--ease);will-change:transform}
.slide{flex:none;width:calc((100vw - var(--gut) - var(--gut-r) - 3 * var(--gap)) / 4);margin:0;cursor:pointer;transition:filter .8s ease,opacity .8s ease;filter:blur(8px);opacity:.5}
.slide img{width:100%;aspect-ratio:2/3;object-fit:cover;pointer-events:none}
.slide.on{filter:none;opacity:1;cursor:default}
.v-bot{display:flex;justify-content:space-between;align-items:baseline;margin-top:12px}
.v-ctrl{display:flex;gap:18px}
.v-ctrl button{color:var(--muted)}
.v-ctrl button:hover{color:var(--ink)}

.order{align-items:start}
.order .txtcol{grid-column:1}
.order .tile:nth-child(2){grid-column:2}

.next{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--ink);padding-top:10px}
.next .lab{grid-column:1}
.next .nm{grid-column:2 / span 2;transition:transform .5s var(--ease)}
.next .ar{grid-column:4;text-align:right}
.next:hover .nm{transform:translateX(10px)}

@media (max-width:760px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ptable .hd{display:none}
  .ptable a{grid-template-columns:minmax(0,1fr) 64px;gap:2px 12px;padding:12px 0}
  .ptable a > span{grid-column:1}
  .ptable .yr{display:none}
  .ptable .th{display:block;grid-column:2;grid-row:1 / 4;width:64px;aspect-ratio:4/5;object-fit:cover}
  #float{display:none}
  .intro .info,.cycle{grid-column:1 / -1}
  .slide{width:62vw}
  .order .txtcol{grid-column:1 / -1}
  .order .tile:nth-child(2){grid-column:auto}
  .next{grid-template-columns:minmax(0,1fr) auto}
  .next .nm{grid-column:1}.next .ar{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .vtrack,.slide,.cyc img,.tile img{transition:none}
}

/* ---------- Work as a book's table of contents ---------- */
.toc{min-height:100vh;display:grid;place-items:center;padding:clamp(120px,16vh,170px) var(--gut-r) 80px var(--gut)}
.toc-in{width:min(680px,100%)}
.toc-t{margin:0 0 clamp(48px,9vh,96px);text-align:center;font-weight:400;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.toc-l{list-style:none;margin:0;padding:0;font-size:clamp(16px,1.3vw,20px);line-height:1.2}
.toc-l a{display:flex;align-items:baseline;gap:20px;padding:5px 0 5px calc(var(--i) * clamp(18px,4vw,64px))}
.toc-l .tt{transition:transform .5s var(--ease)}
.toc-l .ds{font-size:var(--s);color:var(--muted);opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s var(--ease);white-space:nowrap}
.toc-l .pg{margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.toc-l a:hover .tt{transform:translateX(8px)}
.toc-l a:hover .ds{opacity:1;transform:translateX(8px)}
.toc-l .soon{color:var(--muted)}
@media (max-width:760px){
  .toc-l a{padding-left:calc(var(--i) * 14px);gap:12px}
  .toc-l .ds{display:none}
}

/* ---------- Case v4: text + moving image, then a large feed ---------- */
.film{grid-column:3 / span 2;margin:0;background:#f3f3f3}
.film video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.feed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-bottom:clamp(90px,16vh,170px)}
.feed img{width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:760px){ .film{grid-column:1 / -1} .feed{grid-template-columns:repeat(2,minmax(0,1fr))} }
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toc-l a{padding-top:4px;padding-bottom:4px}
@media (max-width:760px){ .toc-l a{padding-left:calc(var(--i) * 10px)} }
.toc-l .tt{white-space:nowrap;flex:none}
.toc-l .ds{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.toc-l .pg{flex:none}
.toc-in{width:min(860px,100%)}
/* Work index v3: tighter block, gentler curve */
.toc-in{width:min(600px,100%)}
.toc-l{font-size:clamp(16px,1.25vw,19px)}
.toc-l a{padding-top:3px;padding-bottom:3px;padding-left:calc(var(--i) * clamp(14px,3vw,48px));gap:14px}
@media (max-width:760px){ .toc-l a{padding-left:calc(var(--i) * 12px)} }

/* Bando v5: film matches the text height, 4-column feed, polaroid-style reveal */
.intro{align-items:stretch}
.film{position:relative;min-height:320px}
.film video{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
.feed{grid-template-columns:repeat(4,minmax(0,1fr))}
.feed .rv{opacity:.55;transform:none;filter:blur(14px) brightness(1.35) saturate(.25) sepia(.15);transition:filter 2.2s cubic-bezier(.3,.7,.2,1),opacity 1.6s ease}
.feed .rv.in{opacity:1;filter:none}
@media (max-width:760px){ .film{min-height:0;aspect-ratio:4/3} .feed{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){ .feed .rv{opacity:1;filter:none;transition:none} }

/* Bando feed tiles: hover swap (e-commerce style) and stop-motion GIF tiles */
.feed .tile{margin:0;position:relative;overflow:hidden;aspect-ratio:4/5;background:#f3f3f3}
.feed .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.feed .tile:hover img{transform:none}
.feed .swap .alt{opacity:0;transition:opacity .45s ease}
.feed .swap:hover .alt{opacity:1}
.feed .gif img{opacity:0}
.feed .gif img.on{opacity:1}
.feed .tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (hover:none){ .feed .vid .alt{opacity:1} }
/* print pages: top frame cycles like a GIF */
.film.cyc{position:relative;aspect-ratio:auto;min-height:320px;overflow:hidden}
.film.cyc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.film.cyc img.on{opacity:1}
@media (max-width:760px){ .film.cyc{aspect-ratio:4/5;min-height:0} }
.film.cyc img{transition:none}
.film.duo{background:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap);align-content:start;min-height:0}
.duo .cyc{position:relative;aspect-ratio:4/5;overflow:hidden;background:#f3f3f3}
.duo .cyc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:none}
.duo .cyc img.on{opacity:1}

/* All-over print tiles: scrub through photos, click opens gallery */
.pfeed .pt{margin:0}
.pt-img{display:block;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#f3f3f3;padding:0;border:0}
.pt-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.pt-img img.on{opacity:1}
.bars{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:3px;opacity:0;transition:opacity .3s}
.pt-img:hover .bars,.pt-img:focus-visible .bars{opacity:1}
.bars i{flex:1;height:2px;background:rgba(255,255,255,.45)}
.bars i.on{background:#fff}
.pt figcaption{margin-top:8px;font-size:var(--s);color:var(--muted);display:flex;justify-content:space-between}
.pfeed .rv{filter:none;opacity:1}
.pfeed .rv .pt-img{opacity:.55;filter:blur(14px) brightness(1.35) saturate(.25) sepia(.15);transition:filter 2.2s cubic-bezier(.3,.7,.2,1),opacity 1.6s ease}
.pfeed .rv.in .pt-img{opacity:1;filter:none}
.lb{position:fixed;inset:0;z-index:20;background:rgba(255,255,255,.97);display:grid;grid-template-rows:auto 1fr auto;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.lb-x{justify-self:end;font-size:var(--t)}
.lb-stage{display:grid;place-items:center;min-height:0}
.lb-stage img{max-width:100%;max-height:calc(100vh - 140px);object-fit:contain;cursor:pointer}
.lb-bar{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t)}
.lb-nav{display:flex;gap:18px;align-items:baseline}
.lb-nav span{color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){ .pfeed .rv .pt-img{opacity:1;filter:none;transition:none} }

/* Bando website block: same layout as the intro, a window that scrolls through the store */
.web .h{margin:0;font-weight:400;font-size:clamp(18px,1.7vw,26px);line-height:1}
.scr{grid-column:3 / span 2;position:relative;display:block;overflow:hidden;min-height:360px;background:#f3f3f3;outline:1px solid #ececec;outline-offset:-1px}
.scr img{position:absolute;top:0;left:0;width:100%;height:auto;will-change:transform}
.scr-hint{position:absolute;right:10px;bottom:10px;font-size:var(--s);color:var(--muted);background:#fff;padding:4px 8px;transition:opacity .4s}
.scr:hover .scr-hint{opacity:0}
@media (hover:none){ .scr-hint{display:none} }
@media (max-width:760px){ .scr{grid-column:1 / -1;min-height:0;aspect-ratio:4/5} }

/* section breaks inside a project feed: a short title and one line of context */
.pfeed .sec{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);padding:clamp(28px,5vh,56px) 0 clamp(4px,1vh,10px)}
.pfeed .sec:first-child{padding-top:0}
.pfeed .sec h2{margin:0;font-weight:400;font-size:clamp(18px,1.7vw,26px);line-height:1;grid-column:1 / span 1}
.pfeed .sec p{margin:0;color:var(--muted);line-height:1.25;max-width:44ch;grid-column:2 / span 2}
@media (max-width:760px){ .pfeed .sec{grid-template-columns:1fr;gap:8px} .pfeed .sec h2,.pfeed .sec p{grid-column:1 / -1} }