/* KBNP: an exhibition of one mark. White, no nav, no dots. Type = Inter Tight + Fragment Mono. Colours = the logo only. */
:root{
  --ink:#0d0d0d; --ink-2:#474847; --line:rgba(13,13,13,.12); --paper:#ffffff;
  --mint:#01de8f; --teal:#1791a9; --deep:#0b5147;
  --head:"Inter Tight",system-ui,sans-serif; --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--head);font-weight:500;font-size:18px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}
p{margin:0}
::selection{background:var(--mint);color:var(--ink)}
.mono{font-family:var(--mono);font-weight:400;font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.dim{color:var(--ink-2);opacity:.7}

/* ---------- header: fixed, the glyph assembles and breathes ---------- */
.top{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:28px 40px;pointer-events:none;mix-blend-mode:normal}
.top > *{pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:18px;width:auto}
.glyph{width:30px;height:30px;overflow:visible}
.glyph .ga{fill:var(--mint)} .glyph .gb{fill:var(--teal)} .glyph .gc{fill:var(--deep)}
.glyph rect{transform-box:view-box}
.loaded .glyph .ga{animation:ga 1.4s var(--ease) both,bga 7s ease-in-out 1.6s infinite}
.loaded .glyph .gb{animation:gb 1.4s var(--ease) both,bgb 7s ease-in-out 1.6s infinite}
.loaded .glyph .gc{animation:gc 1.4s var(--ease) both,bgc 7s ease-in-out 1.6s infinite}
@keyframes ga{from{transform:translate(-40px,-40px) rotate(-90deg);opacity:0}to{transform:none;opacity:1}}
@keyframes gb{from{transform:translate(40px,40px) rotate(90deg);opacity:0}to{transform:none;opacity:1}}
.glyph .gc{transform-origin:60px 60px}
@keyframes gc{0%,60%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
/* breath: the squares part, the overlap goes, they meet again */
@keyframes bga{0%,70%,100%{transform:none}82%{transform:translate(-14px,-14px)}}
@keyframes bgb{0%,70%,100%{transform:none}82%{transform:translate(14px,14px)}}
@keyframes bgc{0%,70%,100%{opacity:1}76%,88%{opacity:0}}
.brand:hover .ga{transform:translate(-10px,-10px)!important;animation-play-state:paused}
.brand:hover .gb{transform:translate(10px,10px)!important;animation-play-state:paused}
.glyph rect{transition:transform .5s var(--ease)}
.stamp{text-align:right;white-space:nowrap;color:var(--ink-2)}
.stamp .sep{margin:0 10px;opacity:.4}

/* ---------- appear on load ---------- */
.ap{opacity:0;transform:translateY(16px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.loaded .ap{opacity:1;transform:none}
.loaded .placard.ap{transition-delay:.5s} .loaded .hint.ap{transition-delay:.7s}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- placards: gallery labels ---------- */
.placard{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:1px solid var(--ink)}

/* ---------- Plate I: tile field ---------- */
.hero{height:100vh;min-height:620px}
#mark{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
.hero,main,.foot{position:relative;z-index:1}
.hero .placard{position:absolute;left:40px;bottom:40px;z-index:2}
.hint{position:absolute;right:40px;bottom:40px;z-index:2;color:var(--ink-2)}

/* ---------- Plates II + III: horizontal corridor ---------- */
.corridor{position:relative}
.corridor .pin{position:sticky;top:0;height:100vh;overflow:hidden}
.strip{display:flex;height:100%;width:max-content;will-change:transform;transform-origin:center}
.panel{position:relative;flex:none;width:86vw;height:100%;display:flex;align-items:center;padding:0 6vw 0 40px}
.panel.wide{width:100vw;justify-content:center;padding:0 40px}
.panel .placard{position:absolute;left:40px;top:110px}
.ghost{position:absolute;right:4vw;bottom:-0.12em;font-size:clamp(200px,38vw,560px);line-height:1;letter-spacing:-.06em;font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(11,81,71,.22);pointer-events:none;will-change:transform}
.st{max-width:1100px;font-size:clamp(44px,7.4vw,124px);line-height:.95;letter-spacing:-.05em;font-weight:600;position:relative}
.st .w{display:inline-block;overflow:hidden;padding:.06em .14em .12em;margin:-.06em .1em -.12em -.14em}
.st .w > span{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.st.in .w > span{transform:none}
.rail{position:absolute;left:40px;right:40px;bottom:36px;height:1px;background:var(--line)}
.rail i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}

/* ---------- Plate III: two currents of words ---------- */
.mural{overflow:hidden;padding:48px 0;display:flex;flex-direction:column;gap:12px}
.mural .track{display:flex;width:max-content;gap:72px;animation:drift 70s linear infinite}
.mural .track.rev{animation-direction:reverse;animation-duration:90s}
.mural span{font-size:clamp(64px,11vw,176px);line-height:1;letter-spacing:-.05em;font-weight:600;color:var(--ink);white-space:nowrap}
.mural span.o{color:transparent;-webkit-text-stroke:1.5px var(--deep)}
.mural .rev span{font-weight:300}
@keyframes drift{to{transform:translateX(-50%)}}

/* ---------- Plate IV: the name unfolds (sticky, scroll driven by --p 0..1) ---------- */
.unfold{height:300vh;position:relative;--p:0}
.unfold .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 40px;overflow:hidden}
.unfold .placard{position:absolute;left:40px;top:110px}
.name{font-size:clamp(64px,13vw,220px);line-height:.86;letter-spacing:-.06em;font-weight:600;transform-origin:left center;will-change:transform}
.name .ln{white-space:nowrap;display:flex;align-items:baseline;width:max-content}
.name b{font-weight:600}
.name b.k{color:var(--mint)} .name b.b{color:var(--teal)}
.name i{font-style:normal;display:inline-block;flex-shrink:0;overflow:hidden;max-width:0;vertical-align:bottom;white-space:pre;color:var(--ink)}
.cap{position:absolute;right:40px;bottom:40px;display:flex;gap:14px;align-items:center}
.cap .x{color:var(--deep)}

/* ---------- the two as colour fields in the logo's geometry ---------- */
.fields{position:relative;width:min(84vw,calc((100vh - 300px) * 120 / 84));aspect-ratio:120/84;margin-top:110px}
.f{position:absolute;border-radius:clamp(16px,2.4vw,36px);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(18px,2.6vw,40px);transition:transform 1.4s var(--ease),opacity 1s var(--ease)}
/* Kashu copy sits top-left, away from the overlap in the bottom-right corner */
.fa{left:0;top:0;width:63.33%;height:63.33%;background:var(--mint);color:var(--ink);justify-content:flex-start;gap:14px}
.fa p{max-width:min(12ch,52%)}
.fb{left:36.67%;top:36.67%;width:63.33%;height:63.33%;background:var(--teal);color:#fff;justify-content:flex-end;align-items:flex-end;text-align:right}
.fc{left:36.67%;top:36.67%;width:26.67%;height:26.67%;background:var(--deep);border-radius:0;z-index:2}
.fa.rv{transform:translate(-8%,-8%)} .fb.rv{transform:translate(8%,8%)} .fc.rv{transform:scale(0)}
.fa.rv.in,.fb.rv.in{transform:none} .fc.rv.in{transform:none;transition-delay:.5s}
.fb .mono{color:#fff}
.f p{font-size:clamp(24px,3vw,46px);line-height:1;letter-spacing:-.04em;font-weight:600;max-width:12ch}
.fb p{margin-top:10px}

/* ---------- Plate VI: finale (sticky, drawn on #fin) ---------- */
.finale{height:280vh;position:relative}
.finale .pin{position:sticky;top:0;height:100vh;overflow:hidden}
.finale .placard{position:absolute;left:40px;top:110px;z-index:2}
#fin{position:absolute;inset:0;width:100%;height:100%;display:block}
.finale .cap{z-index:2}
.end{position:absolute;left:40px;right:40px;top:57%;z-index:2;text-align:center;opacity:0;transform:translateY(24px)}
.end .big{font-size:clamp(44px,6.4vw,112px);line-height:.95;letter-spacing:-.05em;font-weight:600;max-width:14ch;margin:0 auto}
.end .sub{margin-top:22px;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.01em;color:var(--ink-2)}

/* ---------- footer ---------- */
.foot{background:var(--paper);display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:24px 40px 32px;border-top:1px solid var(--ink)}
.foot > div:nth-child(2){text-align:right;color:var(--ink-2)}
.foot a:hover{color:var(--deep)}

@media (prefers-reduced-motion:reduce){
  .ap,.rv,.st .w > span{opacity:1!important;transform:none!important;transition:none}
  .mural .track,.loaded .glyph rect{animation:none!important}
  .name i{max-width:none!important}
}
@media (max-width:720px){
  .top{padding:18px 16px}
  .stamp{display:none}
  .hero{min-height:560px}
  .hero .placard{left:16px;bottom:24px}
  .hint{right:16px;bottom:24px}
  .plate{padding:0 16px}
  .panel{width:100vw;padding:0 24px 0 16px}
  .panel.wide{padding:0 16px}
  .panel .placard{left:16px;top:80px}
  .st{font-size:46px}
  .rail{left:16px;right:16px;bottom:24px}
  .end{left:16px;right:16px;top:51%}
  .mural{padding:32px 0}
  .mural .track{gap:36px}
  .unfold .pin{padding:0 16px}
  .unfold .placard{left:16px;top:80px}
  .name{font-size:22vw}
  .cap{right:16px;bottom:24px}
  .fields{width:88vw;aspect-ratio:120/150}
  .fa,.fb{width:72%;height:62%}
  .fb{left:28%;top:38%}
  .fc{left:28%;top:38%;width:44%;height:24%}
  .f p{font-size:24px}
  .finale .placard{left:16px;top:80px}
  .foot{grid-template-columns:1fr;padding:20px 16px 28px}
  .foot > div:nth-child(2){text-align:left}
}