/* Work page. A black frame under the site header holds one paper card cut like the KURO plate (top-right and
   bottom-left chamfers). Strip: giant headline, a loupe that becomes the hovered project, a contact sheet on black.
   Index: names set large, trailed by the project's own pictures. Display face is the site's Anton (as the sleek home
   poster); labels are IBM Plex Mono, already shipped for BreachX. */
@font-face{font-family:'KK Mono';src:url('/assets/kuro/Inter-var.woff2') format('woff2');font-weight:400;font-display:swap}
@property --wx-open{syntax:'<number>';inherits:false;initial-value:1}

.wx{--wx-ink:#141414;--wx-paper:#f3f3ef;--wx-red:var(--red,#dd1a2a);--wx-display:KuroServiceDisplay,Anton,'Arial Narrow',sans-serif;--wx-mono:'KK Mono',ui-monospace,monospace;--wx-ease:cubic-bezier(.22,1,.36,1);--wx-over:cubic-bezier(.3,1.16,.4,1);--wx-cut:46px;--wx-cut2:22px;display:block;margin:0;padding:0;background:transparent;color:var(--wx-ink)} /* the frame takes the site's ground */
.wx *{box-sizing:border-box}
.wx a{color:inherit;text-decoration:none}
.wx button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;letter-spacing:inherit;text-transform:inherit}
.wx :focus-visible{outline:2px solid var(--wx-red);outline-offset:3px}

/* Frame: the card on top, the contact sheet on black beneath; together they fill the screen under the header */
.wx-frame{height:calc(100svh - var(--wx-hdr,72px));min-height:560px;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) var(--wx-sh,auto);gap:14px;padding:4px var(--pad,14px) 14px;transition:grid-template-rows .9s var(--wx-ease)}
.wx[data-layout=index] .wx-frame{grid-template-rows:minmax(0,1fr) 0px}
.wx-card-wrap{min-height:0;clip-path:inset(0 0 calc((1 - var(--wx-open)) * 100%) 0)}
.wx-card{position:relative;height:100%;background:var(--wx-paper);clip-path:polygon(0 0,calc(100% - var(--wx-cut)) 0,100% var(--wx-cut),100% 100%,var(--wx-cut2) 100%,0 calc(100% - var(--wx-cut2)));padding:16px 22px 22px;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}

/* Micro bar (the site header above carries the logo and navigation) */
.wx-bar{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:14px;align-items:start;padding-right:calc(var(--wx-cut) - 8px);font:400 12px/1.3 var(--wx-mono);text-transform:uppercase;letter-spacing:.02em}
.wx-bar p{margin:0}
.wx-about{grid-column:1/span 4}
.wx-switch,.wx-sort{display:flex;gap:6px;align-items:baseline}
.wx-switch{grid-column:6/span 2}
.wx-sort{grid-column:8/span 2;transition:opacity .5s var(--wx-ease),visibility 0s}
.wx[data-layout=strip] .wx-sort{opacity:0;visibility:hidden;transition:opacity .5s var(--wx-ease),visibility 0s .5s}
.wx-count{grid-column:10/span 2}
.wx-bar button[aria-pressed=false]{opacity:.42}
.wx-bar button:hover{opacity:1}
.wx-contact{grid-column:12;justify-self:end;text-decoration:underline!important;text-underline-offset:3px}

/* Strip stage: headline lower-left, loupe right */
.wx-stage{position:relative;min-height:0;padding-bottom:4px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);column-gap:28px;align-items:end}
.wx[data-layout=index] .wx-stage{display:none}
.wx-headline{margin:0;align-self:end;display:grid;font:400 clamp(72px,10vw,188px)/.9 var(--wx-display);text-transform:uppercase;letter-spacing:-.004em;white-space:nowrap}
.wx-measure{position:absolute;visibility:hidden;left:-9999px;top:0;display:inline-block}
.wx-set{grid-area:1/1;align-self:end;display:block}
.wx-ln{display:block;overflow:hidden;padding:.05em 0 .12em;margin-bottom:-.11em}
.wx-ln>span{display:block;transform:translateY(0);transition:transform .8s var(--wx-ease)}
.wx-ln.is-in>span{transform:translateY(108%)}
.wx-ln.is-out>span{transform:translateY(-108%)}

.wx-loupe{margin:0;align-self:stretch;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;min-height:0;padding-top:clamp(28px,5vh,64px)}
.wx-meta{grid-row:1;display:grid;grid-template-columns:auto 1fr auto;gap:4px 18px;font:400 12px/1.4 var(--wx-mono);text-transform:uppercase;letter-spacing:.02em;min-height:2.8em;opacity:0;transform:translateY(6px);transition:opacity .5s var(--wx-ease),transform .7s var(--wx-ease)}
.wx-meta p{margin:0}
.wx-meta .wx-sum{text-transform:none;letter-spacing:0;max-width:36ch}
.wx-meta .wx-go{text-decoration:underline!important;text-underline-offset:3px}
.wx-stage.is-active .wx-meta{opacity:1;transform:none}
.wx-win{grid-row:2;position:relative;min-height:0;overflow:hidden;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,14px 100%,0 calc(100% - 14px))}
.wx-win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path .9s var(--wx-ease),transform 1.6s var(--wx-ease)}
.wx-win img.is-on{clip-path:inset(0);transform:scale(1)}
.wx-win img.from-left{clip-path:inset(0 100% 0 0)}
.wx-win img.from-right{clip-path:inset(0 0 0 100%)}
.wx-win img.from-left.is-on,.wx-win img.from-right.is-on{clip-path:inset(0)}

/* Contact sheet on black: equal widths, natural heights, tops aligned */
.wx-strip{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:10px;align-items:start;color:var(--wx-paper);padding:0 2px 4px;transition:opacity .6s var(--wx-ease),transform .9s var(--wx-ease)}
.wx[data-layout=index] .wx-strip{opacity:0;transform:translateY(24px);pointer-events:none}
.wx-shot{display:grid;gap:7px;align-content:start;transition:opacity .5s var(--wx-ease),transform .7s var(--wx-over)}
.wx-shot img{display:block;width:100%;height:auto;max-height:15vh;object-fit:cover;background:rgba(243,243,239,.08)}
.wx-shot span{font:400 12px/1.25 var(--wx-mono);text-transform:uppercase;letter-spacing:.02em;opacity:.62}
.wx-shot span::after{content:"";display:inline-block;margin-left:6px;vertical-align:1px;width:5px;height:5px;background:var(--wx-red);transform:scale(0);transition:transform .45s var(--wx-over)}
.wx-strip.is-hot .wx-shot{opacity:.38}
.wx-strip.is-hot .wx-shot.is-on{opacity:1;transform:translateY(-6px)}
.wx-shot.is-on span{opacity:1}
.wx-shot.is-on span::after{transform:scale(1)}

/* Index */
.wx-index{display:none;list-style:none;margin:0;padding:clamp(18px,3vh,36px) 0 0;overflow:auto;min-height:0;scrollbar-width:none}
.wx-index::-webkit-scrollbar{display:none}
.wx[data-layout=index] .wx-index{display:block}
.wx-row{position:relative;margin:0}
.wx-index.is-sorting .wx-row{overflow:hidden}
.wx-row>a{display:flex;flex-wrap:wrap;align-items:center;gap:.08em .16em;padding:.02em 0;font:400 clamp(34px,min(5.2vw,6.9vh),88px)/.92 var(--wx-display);text-transform:uppercase;letter-spacing:-.004em;transition:opacity .5s var(--wx-ease)}
.wx-nm{white-space:nowrap}
.wx-pics{display:inline-flex;gap:.08em;height:.72em;align-items:stretch}
.wx-pics img{height:100%;width:auto;display:block;transition:transform .6s var(--wx-over);transition-delay:calc(var(--i) * 45ms)}
.wx-sec{font:400 12px/1.3 var(--wx-mono);letter-spacing:.02em;align-self:flex-start;margin-top:.5em;opacity:0;transform:translateX(-6px);transition:opacity .4s var(--wx-ease),transform .6s var(--wx-ease)}
.wx-index.is-hot .wx-row>a{opacity:.2}
.wx-index.is-hot .wx-row.is-on>a{opacity:1}
.wx-row.is-on .wx-pics img{transform:translateY(-.07em)}
.wx-row.is-on .wx-sec{opacity:1;transform:none}

/* Opening a project */
.wx-veil{position:fixed;z-index:60;left:0;top:0;width:100vw;height:100vh;object-fit:cover;pointer-events:none}

/* Intro, each time the page renders */
@keyframes wx-open{from{--wx-open:0}to{--wx-open:1}}
@keyframes wx-rise{from{transform:translateY(108%)}to{transform:none}}
@keyframes wx-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes wx-sheet{from{opacity:0;transform:translateY(60px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .wx-intro .wx-card-wrap{animation:wx-open 1s var(--wx-ease) both}
  .wx-intro .wx-headline .wx-ln>span{animation:wx-rise 1.1s var(--wx-ease) both;animation-delay:calc(.45s + var(--l) * .09s)}
  .wx-intro .wx-bar>*{animation:wx-up .7s var(--wx-ease) both;animation-delay:.6s}
  .wx-intro .wx-shot{animation:wx-sheet .9s var(--wx-over) both;animation-delay:calc(.7s + var(--n) * .045s)}
}
@media (prefers-reduced-motion:reduce){
  .wx *,.wx *::before,.wx *::after{transition-duration:.01ms!important;animation:none!important}
}

/* Tablet and phone: the page scrolls, the sheet scrolls sideways */
@media (max-width:900px){
  .wx-frame{height:auto;min-height:0;overflow:visible;grid-template-rows:auto auto}
  .wx[data-layout=index] .wx-frame{grid-template-rows:auto 0px}
  .wx[data-layout=index] .wx-strip{display:none}
  .wx-card{min-height:calc(100svh - var(--wx-hdr,72px) - 190px)}
  .wx-bar{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:12px}
  .wx-about{grid-column:1/span 4}
  .wx-contact{grid-column:6;grid-row:1}
  .wx-switch{grid-column:1/span 2}
  .wx-sort{grid-column:3/span 2}
  .wx-count{grid-column:5/span 2;justify-self:end}
  .wx-stage{grid-template-columns:1fr;row-gap:18px;align-content:end}
  .wx-loupe{padding-top:0;grid-template-rows:auto auto}
  .wx-win{aspect-ratio:16/10}
  .wx-headline{font-size:clamp(64px,19vw,150px)}
  .wx-strip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scrollbar-width:none}
  .wx-strip::-webkit-scrollbar{display:none}
  .wx-shot{flex:0 0 96px;scroll-snap-align:start}
  .wx-shot img{max-height:none}
  .wx-index{overflow:visible}
  .wx-row>a{font-size:clamp(32px,10.4vw,64px)}
  .wx-pics{height:.7em}
  .wx-sec{display:none}
}