:root{
  --black:#000;
  --white:#fff;
  --dim:rgba(255,255,255,.55);
  --hair:rgba(255,255,255,.28);
  --display:'Poppins',Helvetica,Arial,sans-serif;
  --body:'Jost','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(20px,3.2vw,44px);
  --slide:6000ms;
  --app-h:100dvh;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit;margin:0;padding:0}
html{height:100%;height:100dvh;height:var(--app-h)}
html,body{background:var(--black);color:var(--white);overflow:hidden}
body{height:100%;height:100dvh;height:var(--app-h);font-family:var(--body);font-weight:400;-webkit-font-smoothing:antialiased;position:relative;width:100%}
a{color:inherit;text-decoration:none}

/* ---------- background carousel — blended crossfade; movement vibes vary ---------- */
.stage{position:absolute;inset:0;background:var(--black);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;z-index:0;will-change:opacity;
  transition:opacity 1.7s ease-in-out}
.slide.on{opacity:1;z-index:1}
.slide img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);filter:none}
.slide.on img{animation:ken-soft var(--slide) linear forwards}

/* movement only — every plate keeps the same soft blend between images */
.stage[data-vibe="soft"] .slide.on img{animation-name:ken-soft}
@keyframes ken-soft{
  from{transform:scale(1.04)}
  to{transform:scale(1.12)}
}

.stage[data-vibe="snap"] .slide.on img{animation-name:ken-snap}
@keyframes ken-snap{
  0%{transform:scale(1.08)}
  18%{transform:scale(1.04)}
  100%{transform:scale(1.13)}
}

.stage[data-vibe="drift"] .slide.on img{animation-name:ken-drift}
@keyframes ken-drift{
  from{transform:scale(1.05) translate3d(-1.2%,0,0)}
  to{transform:scale(1.13) translate3d(.9%,0,0)}
}

.stage[data-vibe="heat"] .slide.on img{animation-name:ken-heat}
@keyframes ken-heat{
  from{transform:scale(1.06)}
  to{transform:scale(1.15)}
}

/* keeps white type legible over the lighter plates */
.veil{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:
    linear-gradient(90deg,rgba(0,0,0,.08) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.42) 100%),
    linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 78%,rgba(0,0,0,.35) 100%);
}

/* ---------- chrome ---------- */
.nav{position:absolute;top:0;left:0;right:0;padding:calc(var(--pad) * .8) var(--pad) 0;
  display:flex;align-items:baseline;justify-content:space-between;z-index:5}
.burger{display:none;appearance:none;background:none;border:0;cursor:pointer;
  width:48px;height:44px;margin:-8px 0 0 -6px;padding:0;position:relative;z-index:7;flex-shrink:0}
.burger span{position:absolute;left:6px;right:6px;height:2px;background:var(--white);transition:transform .3s ease,top .3s ease}
.burger span:first-child{top:16px}
.burger span:last-child{top:26px}
.burger:focus-visible{outline:1px solid var(--white);outline-offset:4px}
body.nav-open .burger span:first-child{top:21px;transform:rotate(45deg)}
body.nav-open .burger span:last-child{top:21px;transform:rotate(-45deg)}
.nav ul{list-style:none;display:flex;gap:clamp(18px,2.6vw,38px)}
.nav a{font-size:clamp(12px,.95vw,15px);letter-spacing:.14em;text-transform:uppercase;font-weight:400;
  padding:6px 0;position:relative;opacity:.92}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:1px;background:var(--white);transition:right .35s ease}
.nav a:hover::after,.nav a:focus-visible::after{right:0}
.nav a:focus-visible{outline:1px solid var(--white);outline-offset:6px}
.nav .side{display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);position:relative;z-index:7}
.nav .side a{opacity:.7;font-size:15px;line-height:1;padding:6px 0}
.nav .side a svg{width:16px;height:16px;display:block}
.nav .side a:hover{opacity:1}
.nav .side .txt{margin-left:clamp(6px,1vw,14px)}

/* vertical wordmark, right edge — replace the <h1> with KOHJAK_WHT.svg in production */
.mark{position:absolute;top:calc(var(--pad) * 3.19);right:var(--pad);z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;pointer-events:none}
.mark h1{
  font-family:var(--display);font-weight:800;text-transform:uppercase;
  font-size:clamp(64px,10.5vh,132px);line-height:.86;letter-spacing:.22em;
  writing-mode:vertical-rl;text-orientation:mixed;
}
.mark .release{
  font-family:var(--display);font-weight:300;text-transform:uppercase;
  font-size:clamp(20px,3.3vh,42px);letter-spacing:.06em;line-height:1;
  writing-mode:vertical-rl;margin-top:.55em;margin-left:auto;opacity:.95
}

/* bottom row */
.foot{position:absolute;left:0;right:0;bottom:0;padding:0 var(--pad) var(--pad);
  display:flex;align-items:flex-end;justify-content:space-between;z-index:3}
.now{max-width:38ch}
.now p{font-size:clamp(13px,1.05vw,16px);color:var(--dim);letter-spacing:.02em;line-height:1.5}
.now a{display:inline-block;margin-top:12px;font-size:clamp(12px,.95vw,15px);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--hair);padding:11px 18px;transition:border-color .3s,background .3s}
.now a:hover,.now a:focus-visible{border-color:var(--white);background:rgba(255,255,255,.08);outline:none}

.dots{display:flex;gap:8px;align-items:center}
.dots button{appearance:none;background:none;border:0;padding:10px 0;cursor:pointer}
.dots span{display:block;width:clamp(22px,2.6vw,36px);height:1px;background:var(--hair);transition:background .4s,height .2s}
.dots button.on span{background:var(--white)}
.dots button:focus-visible span{height:3px}

@media (max-width:900px){
  .burger{display:block}
  .nav{align-items:center}
  .nav nav{
    position:fixed;inset:0;z-index:6;
    background:rgba(0,0,0,.96);
    padding:calc(var(--pad) * 4.2) var(--pad) var(--pad);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s ease,visibility .35s;
  }
  body.nav-open .nav nav{opacity:1;visibility:visible;pointer-events:auto}
  .nav ul{
    flex-direction:column;gap:0;align-items:flex-start;
    transform:translateY(10px);transition:transform .35s ease;
  }
  body.nav-open .nav ul{transform:none}
  .nav nav a{
    font-family:var(--display);font-weight:300;font-size:clamp(28px,8vw,42px);
    letter-spacing:.08em;line-height:1.15;padding:14px 0;opacity:1;
    border-bottom:1px solid var(--hair);display:block;width:min(100%,320px);
  }
  .nav nav a::after{display:none}
  .nav nav a.active{text-decoration:none;opacity:1;border-bottom-color:var(--white)}
  .nav .side .txt{display:none}
  .nav .side a svg{width:14px;height:14px}
  body.nav-open{overflow:hidden}
  body.nav-open .mark,body.nav-open .foot,body.nav-open .page{visibility:hidden}
  .mark{top:calc(var(--pad) * 3.74)}
  .mark h1{font-size:clamp(67px,10.8vh,115px);letter-spacing:.264em}
  .foot{flex-direction:column;align-items:flex-start;gap:22px}
  .now{max-width:70vw}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .nav nav,.nav ul,.burger span{transition:none}
}

/* ---------- section pages ---------- */
.page{position:absolute;inset:0;z-index:2;display:none;padding:calc(var(--pad) * 3.2) calc(var(--pad) + 180px) calc(var(--pad) * 4) var(--pad);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.page.on{display:block}
body.paged .now,body.paged .dots{display:none}
body.paged .stage{filter:brightness(.55)}
.page h2{font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(13px,1vw,15px);
  color:var(--dim);margin-bottom:clamp(22px,3vh,36px)}
.page .wrap{max-width:820px}

/* music */
.rel{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:clamp(20px,3vw,44px);align-items:start;margin-bottom:clamp(30px,5vh,56px)}
.rel .art{aspect-ratio:1;background:var(--black);position:relative;overflow:hidden;border:1px solid var(--hair)}
.rel .art img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.9)}
.rel .art b{position:absolute;left:10px;top:10px;font-family:var(--display);font-weight:800;text-transform:uppercase;
  writing-mode:vertical-rl;font-size:clamp(28px,4vh,44px);line-height:.9;letter-spacing:.12em;color:var(--black);mix-blend-mode:normal}
.rel h3{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,4vw,52px);line-height:.95;letter-spacing:.02em}
.rel .meta{color:var(--dim);margin:10px 0 22px;font-size:clamp(13px,1vw,16px);line-height:1.5}
.links{display:flex;flex-wrap:wrap;gap:10px}
.links a{font-size:clamp(11px,.85vw,13px);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hair);padding:10px 16px;transition:border-color .3s,background .3s}
.links a:hover,.links a:focus-visible{border-color:var(--white);background:rgba(255,255,255,.08);outline:none}
.tracks{list-style:none;border-top:1px solid var(--hair)}
.tracks li{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--hair);font-size:clamp(14px,1.05vw,17px)}
.tracks li span:last-child{color:var(--dim)}

/* video */
.vid{aspect-ratio:16/9;background:var(--black);border:1px solid var(--hair);position:relative;overflow:hidden;margin-bottom:22px}
.vid img{width:100%;height:100%;object-fit:cover;display:block;filter:brightness(.7)}
.vid .play{position:absolute;inset:0;display:grid;place-items:center}
.vid .play span{width:72px;height:72px;border:1px solid var(--white);border-radius:50%;display:grid;place-items:center}
.vid .play i{display:block;width:0;height:0;border-left:16px solid var(--white);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.vid .cap{position:absolute;left:18px;bottom:16px;font-size:clamp(12px,.9vw,14px);letter-spacing:.14em;text-transform:uppercase}

/* tour */
.dates{list-style:none;border-top:1px solid var(--hair)}
.dates li{display:grid;grid-template-columns:110px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--hair);font-size:clamp(14px,1.05vw,17px)}
.dates .d{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.dates .v{color:var(--dim);display:block;font-size:.9em;margin-top:3px}
.dates a{font-size:clamp(11px,.85vw,13px);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--hair);padding:9px 14px;white-space:nowrap}
.dates a:hover{border-color:var(--white)}
.dates .soon a{opacity:.45;pointer-events:none}
.note{color:var(--dim);font-size:clamp(13px,1vw,16px);line-height:1.5;margin-top:22px;max-width:52ch}

/* shop */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:clamp(16px,2vw,28px)}
.item .ph{aspect-ratio:4/5;background:#0a0a0a;border:1px solid var(--hair);display:grid;place-items:center;overflow:hidden;position:relative}
.item .ph b{font-family:var(--display);font-weight:800;text-transform:uppercase;writing-mode:vertical-rl;letter-spacing:.12em;font-size:clamp(34px,5vh,60px);line-height:.9}
.item .ph.w{background:#f2f2f2}
.item .ph.w b{color:var(--black)}
.item .ph.blk b{color:var(--white)}
.item .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8)}
.item .ph img + b{position:relative;color:var(--white)}
.item p{margin-top:12px;font-size:clamp(13px,1vw,16px)}
.item p span{display:block;color:var(--dim);margin-top:3px}

@media (max-width:640px){
  .page{padding:calc(var(--pad) * 4.2) var(--pad) calc(var(--pad) * 6)}
  .rel{grid-template-columns:1fr}
  .rel .art{max-width:220px}
  .dates li{grid-template-columns:1fr;gap:8px}
  body.paged .mark{opacity:.25}
}


/* press */
.bio{font-size:clamp(15px,1.15vw,19px);line-height:1.6;max-width:58ch;margin-bottom:clamp(28px,4vh,44px)}
.bio p + p{margin-top:1em}
.press-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:clamp(28px,4vh,44px)}
.press-grid a{display:block;aspect-ratio:1;overflow:hidden;border:1px solid var(--hair);position:relative}
.press-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:filter .3s}
.press-grid a:hover img{filter:brightness(1.1)}
.press-grid a span{position:absolute;left:10px;bottom:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.contact{border-top:1px solid var(--hair);padding-top:20px;font-size:clamp(14px,1.05vw,17px);line-height:1.7}
.contact span{color:var(--dim)}
.contact a{border-bottom:1px solid var(--hair)}

@media (max-width:640px){
  .foot{padding-bottom:calc(var(--pad) * 2.4)}
  .dots{display:none}
}

@media (prefers-reduced-motion:reduce){
  .slide{transition:none}
  .slide.on img{transform:scale(1.06);filter:none;animation:none}
}
.nav nav a.active{text-decoration:underline;text-underline-offset:6px;opacity:1}

.signup{display:grid;gap:12px;max-width:420px}
.signup input{background:transparent;border:1px solid var(--hair);color:var(--white);font:inherit;font-size:16px;padding:14px 16px;outline:none}
.signup input:focus{border-color:var(--white)}
.signup .hp{position:absolute;left:-9999px}
.signup button{font:inherit;font-size:13px;letter-spacing:.14em;text-transform:uppercase;background:var(--white);color:var(--black);border:0;padding:14px 18px;cursor:pointer}