/* ── featured works ── */
.work{padding-top:60px}
.work-head{text-align:center}
.handline{display:inline-block;font-family:var(--hand);font-size:30px;line-height:1}
.handline svg{display:block;width:110px;height:14px;margin:4px auto 0}
.handline path{stroke:var(--text);stroke-width:2;fill:none;stroke-linecap:round}
.pixel-h{font-family:var(--pixel);font-weight:700;font-size:clamp(58px,10.5vw,132px);line-height:.92;letter-spacing:.01em;margin-top:14px}
.pixel-h .ln{display:block}
.pixel-h .ch{display:inline-block;will-change:transform}
.snote{color:#111;display:block;width:max-content;max-width:min(330px,88%);margin:26px auto 0;background:var(--cream);padding:16px 18px;font-size:16px;
  line-height:1.35;text-align:left;rotate:-4deg;box-shadow:0 8px 18px rgba(0,0,0,.06)}

.cards{max-width:1290px;margin:90px auto 0}
.card{--th:72px;--sl:70px;--tw:200px;--tx:-70px;
  position:sticky;top:calc(98px + env(safe-area-inset-top,0px));height:min(720px,calc(100vh - 110px));margin-bottom:70px;
  display:grid;grid-template-rows:var(--th) minmax(0,1fr);background:var(--bg);color:var(--fg);
  clip-path:polygon(0 var(--th),var(--tx) var(--th),calc(var(--tx) + var(--sl)) 0,calc(var(--tx) + var(--sl) + var(--tw)) 0,
    calc(var(--tx) + var(--sl) * 2 + var(--tw)) var(--th),100% var(--th),100% 100%,0 100%)}
.card:last-child{margin-bottom:0}
/* folder tabs spread evenly across 5 cards; the last tab (--sl*2 + --tw = 340px wide) ends at the right edge */
.card:nth-child(2){--tx:calc((100% - 270px) * .25 - 70px)}.card:nth-child(3){--tx:calc((100% - 270px) * .5 - 70px)}
.card:nth-child(4){--tx:calc((100% - 270px) * .75 - 70px)}.card:nth-child(5){--tx:calc(100% - 340px)}
.c1{--bg:var(--cyan);--fg:var(--ink);--frame:var(--ink);--hf:#fff;--chipbg:var(--ink);--chipfg:var(--cyan);--p1:#2FB6E0;--p2:#34BDE8}
.c2{--bg:#121212;--fg:#fff;--frame:#fff;--hf:#121212;--chipbg:#fff;--chipfg:#121212;--p1:#1D1D1D;--p2:#232323}
.c3{--bg:var(--yellow);--fg:var(--ink);--frame:var(--ink);--hf:#fff;--chipbg:var(--ink);--chipfg:var(--yellow);--p1:#E5A724;--p2:#EBAD28}
.c4{--bg:var(--pink);--fg:#fff;--frame:#fff;--hf:var(--pink);--chipbg:#fff;--chipfg:var(--ink);--p1:#D51E55;--p2:#DC2259}
.c5{--bg:var(--green);--fg:var(--ink);--frame:var(--ink);--hf:#fff;--chipbg:var(--ink);--chipfg:var(--green);--p1:#29AD72;--p2:#2CB678}
.tab{position:absolute;top:0;left:calc(var(--tx) + var(--sl));width:var(--tw);height:var(--th);display:flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.tab svg{width:16px;height:16px}
.card .body{grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:16px 16px 18px;min-height:0}
.ctext{display:flex;flex-direction:column;min-width:0;padding-top:30px}
.date{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:14px;text-transform:uppercase;opacity:.8}
.date i{width:12px;height:12px;border-radius:50%;background:currentColor;opacity:.5}
.ctext h3{font-weight:500;font-size:clamp(40px,4.9vw,72px);line-height:1;letter-spacing:-.05em;margin:16px 0 18px}
.ctext p{font-size:17px;line-height:1.35;max-width:30ch;opacity:.9}
.vp{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:40px;padding-bottom:6px;border-bottom:1.5px solid currentColor;
  font-family:var(--mono);font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.cimg{position:relative;min-height:0;border:2px solid var(--frame)}
.cimg .pat{position:absolute;inset:0;overflow:hidden;background:repeating-linear-gradient(135deg,var(--p1) 0 22px,var(--p2) 22px 44px);display:grid;place-items:center}
.cimg .pat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cimg .pat span{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg);opacity:.7}
.cimg .hd{background:var(--hf);border-color:var(--frame);z-index:2}
.jpg{position:absolute;z-index:2;top:14px;right:14px;display:flex;align-items:center;gap:8px;background:var(--chipbg);color:var(--chipfg);
  padding:8px 13px;font-family:var(--mono);font-weight:700;font-size:14px}
.jpg svg{width:20px;height:20px}
@media(max-width:760px){
  .card{position:relative;top:auto;height:auto;margin-bottom:40px;--th:56px;--sl:40px;--tw:170px;--tx:-40px}
  .card:nth-child(2){--tx:10%}.card:nth-child(3){--tx:20%}
  .card:nth-child(4){--tx:min(30%,calc(100% - 250px))}.card:nth-child(5){--tx:min(40%,calc(100% - 250px))}
  .card .body{grid-template-columns:1fr;gap:20px}
  .ctext{padding-top:10px}
  .vp{margin-top:24px}
  .cimg{aspect-ratio:4/3}
  .tab{font-size:13px}
}

/* project covers */
.cover{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--fg);padding:20px}
.cimg .pat .cover .k{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.cimg .pat .cover .w{font-family:var(--sans);opacity:1;font-size:clamp(46px,6.2vw,94px);line-height:1;font-weight:600;letter-spacing:-.04em}
.cimg .pat .cover .w-haven{font-weight:500;letter-spacing:.24em;margin-right:-.24em;padding-block:.16em;border-block:2px solid currentColor}
.cimg .pat .cover .w-buttr{font-family:var(--hand);font-weight:400;letter-spacing:0;font-size:clamp(64px,8vw,124px)}
.cimg .pat .cover .w-kaori{font-family:var(--pixel);font-weight:700;letter-spacing:.05em}
.cover svg{width:clamp(90px,10vw,140px);height:auto}

/* more case studies */
.more{max-width:1290px;margin:130px auto 0}
.more-head{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;margin-bottom:34px}
.more-h{font-family:var(--pixel);font-weight:700;font-size:clamp(36px,5vw,60px);line-height:.95}
.more-sub{font-family:var(--hand);font-size:24px;rotate:-3deg}
.mgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
@media (max-width:900px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.mgrid{grid-template-columns:1fr}}
.mcard{--acc:var(--cyan);--th:30px;color:#111;position:relative;display:flex;flex-direction:column;gap:6px;min-height:210px;min-width:0;
  padding:calc(var(--th) + 16px) 18px 16px;background:var(--acc);
  clip-path:polygon(0 var(--th),0 0,46% 0,calc(46% + 22px) var(--th),100% var(--th),100% 100%,0 100%);transition:transform .2s,filter .2s}
.mcard:hover,.mcard:focus-visible{transform:translateY(-4px);filter:brightness(.96)}
.mcard .mtab{position:absolute;top:0;left:0;width:46%;height:var(--th);display:flex;align-items:center;padding-left:14px;
  font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.mcard .mtab b{display:none}
.mcard .mk{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:rgba(17,17,17,.6)}
.mcard .mt{font-size:28px;font-weight:500;line-height:1.02;letter-spacing:-.04em}
.mcard .md{font-size:15px;line-height:1.35;color:#3A3A3A}
.mcard .mgo{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.a2{--acc:var(--yellow)}.a3{--acc:var(--mint)}.a4{--acc:var(--cream)}
.allrow{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:48px}