/* NWXT ENT. — artist showcase pages: shared pieces. Each page adds its own composition on top. */
.show{position:relative;margin-top:14px;min-height:760px;overflow:hidden;isolation:isolate;touch-action:pan-y}
.show img{-webkit-user-drag:none;user-drag:none}   /* a drag across the figure is a swipe, not an image drag */
.show *{min-width:0}
/* figure: drawn twice. The full figure sits under the big display type; a copy clipped to the top half sits over everything,
   so the head and shoulders are always in front. Text is laid out beside the figure or in the legs band, never behind it. */
/* waist-up: the figure is drawn half again as tall as the frame and anchored below it, so the frame holds head to hips */
.show .fig{position:absolute;z-index:3;bottom:-54%;height:150%;display:block;width:fit-content;max-width:none;filter:drop-shadow(0 18px 14px rgba(0,0,0,.35))}
.show .fig.top{z-index:9;clip-path:inset(0 0 46% 0);filter:none}
/* ---------- ARRIVAL: everything flies in; each element keeps its own transform because only translate/scale/rotate props animate ---------- */
.show [data-in]{animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.8,.2,1.04);animation-fill-mode:both;animation-delay:calc(var(--d,0) * 1ms + 260ms)}
.show [data-in="up"]{animation-name:inUp}
.show [data-in="down"]{animation-name:inDown}
.show [data-in="left"]{animation-name:inLeft}
.show [data-in="right"]{animation-name:inRight}
.show [data-in="pop"]{animation-name:inPop;animation-timing-function:cubic-bezier(.2,.9,.3,1.15)}
.show [data-in="stamp"]{animation-name:inStamp;animation-duration:.4s;animation-timing-function:cubic-bezier(.2,.9,.3,1.12)}
.show [data-in="wipe"]{animation-name:inWipe;animation-duration:.8s}
.show [data-in="fade"]{animation-name:inFade}
.show .fig{animation:figIn .7s cubic-bezier(.2,.8,.2,1) .22s both}
@keyframes figIn{from{opacity:0;translate:0 90px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes inUp{from{opacity:0;translate:0 36px}to{opacity:1;translate:0 0}}
@keyframes inDown{from{opacity:0;translate:0 -36px}to{opacity:1;translate:0 0}}
@keyframes inLeft{from{opacity:0;translate:-60px 0}to{opacity:1;translate:0 0}}
@keyframes inRight{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}
@keyframes inPop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes inStamp{from{opacity:0;scale:2;filter:blur(4px)}to{opacity:1;scale:1;filter:blur(0)}}
@keyframes inWipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes inFade{from{opacity:0}to{opacity:1}}
/* letters stamp in one by one on elements marked .letters */
.show .letters .w{display:inline-block;white-space:nowrap}
.show .letters .ch{display:inline-block;animation:chIn .34s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i) * 30ms + var(--d,0) * 1ms + 320ms)}
@keyframes chIn{from{opacity:0;scale:1.6;filter:blur(3px)}to{opacity:1;scale:1;filter:blur(0)}}
/* leaving for another artist: everything breaks apart before the shutter */
body.leaving .show .fig{animation:figOut .42s cubic-bezier(.6,0,.9,.4) forwards}
body.leaving .show [data-in]{animation:elOut .36s cubic-bezier(.6,0,.9,.4) forwards}
body.leaving .show .letters .ch{animation:explodeCh .45s cubic-bezier(.5,0,.9,.4) forwards}
@keyframes figOut{to{opacity:0;translate:0 80px;scale:.95}}
@keyframes elOut{to{opacity:0;scale:.92;filter:blur(3px)}}
@keyframes explodeCh{to{translate:calc(var(--rx) * 160px) calc(var(--ry) * 120px);rotate:calc(var(--rx) * 25deg);opacity:0;scale:1.2}}
/* ambient motion shared by every page */
.show .deco.tw{animation:twinkle 2.8s ease-in-out infinite var(--tw,0s),floaty 7s ease-in-out infinite calc(var(--tw,0s) * 2)}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}}
.show .deco,.show .giant{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.show .deco{transform:translate(calc(var(--mx,0) * -12px),calc(var(--my,0) * -8px))}
.show .giant{transform:translate(calc(var(--mx,0) * 10px),calc(var(--my,0) * 6px))}
.show .reg{animation:regSpin 16s linear infinite}
.show .reg:nth-of-type(2n){animation-direction:reverse}
@keyframes regSpin{to{rotate:360deg}}
.show .halo{position:absolute;z-index:2;translate:-50% -50%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(150,174,186,.30),rgba(150,174,186,.10) 40%,rgba(150,174,186,0) 70%);pointer-events:none;opacity:0;transition:opacity .5s;animation:haloBreathe 5s ease-in-out infinite}
body[data-mode="dark"] .show .halo{opacity:1}
@keyframes haloBreathe{50%{scale:1.06}}
.show .dstrip{position:absolute;left:0;right:0;top:0;height:16px;z-index:8;font-family:var(--f-label);font-size:9px;letter-spacing:.22em;line-height:16px;color:var(--paper);background:var(--ink);text-transform:uppercase;opacity:.9}
.show .dstrip .marq>span{animation-duration:38s;padding-right:0}
.show .bio .cur{display:inline-block;width:.55em;height:.85em;background:currentColor;vertical-align:-.08em;margin-left:.25em;animation:blinky 1.1s steps(2) infinite}
@keyframes twinkle{0%,100%{scale:1;opacity:1}50%{scale:.75;opacity:.6}}
.show .wobble{animation:wobble 5s ease-in-out infinite}
@keyframes wobble{0%,100%{rotate:0deg}30%{rotate:-1deg}70%{rotate:1deg}}
.show .blinky{animation:blinky 2.2s steps(2) infinite}
@keyframes blinky{50%{opacity:.55}}
.show .marq{display:flex;white-space:nowrap;overflow:hidden}
.show .marq>span{flex:none;padding-right:.6em;animation:marq 16s linear infinite}
.show .marq.rev>span{animation-direction:reverse}
@keyframes marq{to{translate:-100% 0}}
/* giant type */
.show .giant{position:absolute;z-index:1;font-family:var(--f-display);text-transform:uppercase;line-height:.86;letter-spacing:-.02em;white-space:nowrap;user-select:none;pointer-events:none}
/* labelled field boxes */
.show .field{border:2px solid var(--ink);padding:7px 10px 6px;font-family:var(--f-label);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--paper)}
.show .field b{display:block;font-family:var(--f-ui);font-size:18px;letter-spacing:0;text-transform:none;color:var(--ink-strong);font-weight:normal;margin-top:2px}
/* numbered list (01..06) */
.show .nlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-family:var(--f-label);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.show .nlist li{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:4px}
.show .nlist li i{font-style:normal;font-family:var(--f-num);font-size:16px;color:var(--accent)}
.show .nlist li b{font-weight:normal;color:var(--ink-strong)}
/* bio / placeholder text */
.show .bio{font-family:var(--f-screen);font-size:15px;line-height:1.35;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-strong);margin:0}
.show .bio.jp{font-family:var(--f-jp);font-weight:700;font-size:12.5px;line-height:1.55;text-transform:none;color:var(--ink);letter-spacing:0}
/* socials */
.show .soc{display:flex;gap:8px;flex-wrap:wrap}
.show .soc a{font-family:var(--f-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:2px solid var(--ink);width:38px;height:38px;display:grid;place-items:center}
.show .soc a:hover{background:var(--ink);color:var(--paper)}
/* stars */
.show .stars{display:flex;gap:3px}
.show .stars svg{width:14px;height:14px;fill:var(--accent);stroke:var(--accent)}
.show .stars svg.off{fill:none}
/* stickers */
.show .deco{position:absolute;z-index:6;fill:var(--ink);stroke:var(--ink);pointer-events:none}
.show .reg{position:absolute;z-index:6;width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.5}
/* the page's ink inside a solid colour block */
.show .onblock{--ink:var(--white);--ink-strong:var(--white);--line:rgba(243,238,229,.4);--paper:transparent}
/* under-the-hero info strip, same on every page */
.info{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;border-top:2px solid var(--ink);padding-top:16px;margin-top:0}
.info .k{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.info .v{font-family:var(--f-ui);font-size:17px;color:var(--ink-strong);line-height:1.2}
.info .v.num{font-family:var(--f-num);font-size:26px;color:var(--accent)}
.prevnext{display:flex;justify-content:space-between;gap:12px;margin-top:16px}
.prevnext a{font-family:var(--f-label);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);border:2px solid var(--ink);padding:8px 12px 7px}
.prevnext a:hover{background:var(--ink);color:var(--paper)}
.prevnext a b{font-weight:normal;color:var(--ink-strong)}
.prevnext a:hover b{color:var(--paper)}
@media (max-width:1100px){.info{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* phones: a slightly longer crop, the figure centred, and the bio printed under the hero instead of over it */
.mbio{display:none}
@media (max-width:700px){.info{grid-template-columns:repeat(2,minmax(0,1fr))}
 .show .fig{height:128%;bottom:-38%}
 .show .bio{display:none}
 .mbio{display:block;border-top:2px solid var(--ink);padding-top:14px;margin-top:14px}
 .mbio .bio{display:block;font-size:14px}
 .mbio .bio.jp{margin-top:10px}}

/* ---------- socials bar under the hero ---------- */
.socials{border-top:2px solid var(--ink);padding-top:14px;margin-top:16px}
.socials .k{font-family:var(--f-label);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-bottom:10px}
.socials .links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.socials .sl{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;border:2px solid var(--ink);padding:9px 12px 8px;text-decoration:none;color:var(--ink-strong);transition:background .15s steps(2),color .15s steps(2)}
.socials .sl svg{grid-row:1 / span 2;width:26px;height:26px;color:var(--accent)}
.socials .sl span{font-family:var(--f-ui);font-size:16px;line-height:1.1}
.socials .sl i{font-style:normal;font-family:var(--f-label);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.socials .sl:hover{background:var(--ink);color:var(--paper)}
.socials .sl:hover svg,.socials .sl:hover i{color:var(--paper)}
/* socials not live yet: shown, dimmed, not clickable */
.socials .sl.soon{border-style:dashed;color:var(--ink);opacity:.62;cursor:default}
.socials .sl.soon:hover{background:none;color:var(--ink)}
.socials .sl.soon:hover svg{color:var(--accent)}
.socials .sl.soon i{color:var(--accent)}
.show .soc span.soon{font-family:var(--f-label);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border:2px dashed var(--ink);width:38px;height:38px;display:grid;place-items:center;opacity:.55}
.socials .sl i[data-no-t]{text-transform:none;letter-spacing:.04em}   /* handles keep their own case */