.krank-page{background:#03080c}
.krank-page .site{background:#03080c;box-shadow:0 0 90px #000;overflow:hidden}
.krank-page main{background:radial-gradient(circle at 12% 52%,rgba(18,76,91,.15),transparent 30%),linear-gradient(#03080c,#071116 52%,#03070a)}
.krank-hero{position:relative;width:100%;height:min(76vw,840px);min-height:590px;overflow:hidden;background:#031018}
.krank-hero-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.krank-hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,4,8,.08),transparent 42%,rgba(2,8,12,.22) 76%,#03080c 100%),linear-gradient(90deg,transparent 48%,rgba(2,8,12,.12) 60%,rgba(1,5,8,.52) 100%)}
.krank-hero-copy{position:absolute;z-index:2;right:7%;top:28%;width:min(42%,570px);text-align:center;color:#f3eee5;text-shadow:0 4px 18px #000}
.krank-hero-copy p{margin:0 0 10px;font:500 clamp(9px,.9vw,13px) 'Barlow Condensed',sans-serif;letter-spacing:.54em}
.krank-hero-copy h1{margin:0;font:800 clamp(70px,9vw,138px)/.82 'Barlow Condensed',sans-serif;letter-spacing:.01em;color:#d9d2c6;text-shadow:0 3px 0 #7d7871,0 12px 24px #000}
.krank-hero-copy strong{display:block;margin-top:18px;font:400 clamp(16px,2vw,29px) 'Barlow Condensed',sans-serif;letter-spacing:.5em}
.krank-hero-copy small{display:block;margin-top:13px;color:#b7b9b8;font:400 clamp(9px,.9vw,13px) 'DM Mono',monospace;letter-spacing:.14em;text-transform:uppercase}
.krank-hero-copy small b{color:#dfb454;font-weight:500;letter-spacing:.2em}
.krank-hero-copy span{display:block;margin-top:23px;font:400 clamp(13px,1.35vw,19px) Georgia,serif;color:#d7d1c7}
.krank-body{position:relative;z-index:3;width:90%;margin:-52px auto 0}
.krank-intro{display:grid;grid-template-columns:minmax(310px,38%) 1fr;gap:clamp(42px,6vw,92px);align-items:center;padding:0 3% clamp(32px,4vw,62px)}
.krank-cover{position:relative;width:100%;max-width:460px;aspect-ratio:1;padding:7px;border:1px solid rgba(222,210,190,.32);background:#071015;box-shadow:0 28px 70px #000b,0 0 28px rgba(45,122,141,.12);cursor:zoom-in;transform:rotate(-.35deg);overflow:hidden}
.krank-cover:before,.krank-cover:after{content:'';position:absolute;pointer-events:none}
.krank-cover:before{inset:-5px;border:1px solid rgba(190,166,132,.18)}
.krank-cover:after{inset:0;background:linear-gradient(130deg,rgba(255,255,255,.08),transparent 22%,transparent 74%,rgba(29,157,180,.08))}
.krank-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease,filter .45s ease}
.krank-cover:hover img,.krank-cover:focus-visible img{transform:scale(1.01);filter:brightness(1.06)}
.section-kicker{display:flex;align-items:center;gap:14px;margin:0 0 10px;color:#d5a541;font:500 11px 'Barlow Condensed',sans-serif;letter-spacing:.3em}
.section-kicker i{width:50px;height:1px;background:#c69422}
.krank-story h2{margin:0 0 24px;font:600 clamp(36px,4vw,58px)/1 'Barlow Condensed',sans-serif;letter-spacing:.14em;color:#fff}
.krank-story>p:not(.section-kicker){max-width:760px;margin:0 0 18px;color:#c8c9c7;font:400 clamp(12px,1.05vw,15px)/1.75 'DM Mono',monospace}
.krank-story em{color:#eee0c6;font-style:normal}
.krank-story .krank-question{margin-top:24px!important;color:#fff!important;font-weight:500!important}
.krank-player{position:relative;display:grid;grid-template-columns:minmax(230px,1fr) auto auto auto;align-items:center;gap:14px 26px;padding:18px 22px 21px;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(7,13,18,.94);box-shadow:0 25px 60px #0009,0 0 24px rgba(32,123,142,.08)}
.krank-player-track{display:flex;align-items:center;gap:15px;min-width:0}
.krank-player-cover{flex:0 0 58px;width:58px;height:58px;padding:0;border:1px solid rgba(255,255,255,.26);background:#050a0d;overflow:hidden;cursor:zoom-in}
.krank-player-cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.krank-player-cover:hover img,.krank-player-cover:focus-visible img{transform:scale(1.08)}
.krank-player-track>div{display:flex;flex-direction:column;min-width:0}
.krank-player-track strong{color:#fff;font:500 14px 'DM Mono',monospace}
.krank-player-track span{margin-top:4px;color:#bfc2c3;font:500 11px 'Barlow Condensed',sans-serif;letter-spacing:.12em}
.krank-player-controls{display:flex;align-items:center;gap:11px}
.krank-player-controls button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:1px solid transparent;border-radius:50%;background:transparent;color:#ddd;font:500 11px 'DM Mono',monospace;transition:transform .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.krank-player-controls button:hover,.krank-player-controls button:focus-visible{color:#ef1554;border-color:rgba(239,21,84,.4);box-shadow:0 0 18px rgba(239,21,84,.17);transform:translateY(-2px)}
.krank-player-controls .krank-player-toggle{width:48px;height:48px;padding-left:3px;border-color:#ddd;font-size:17px}
.krank-player-controls .krank-player-toggle.is-playing{padding-left:0;color:#ef1554;border-color:#ef1554}
.krank-player-time{display:flex;gap:6px;color:#bbc0c1;font:400 10px 'DM Mono',monospace;white-space:nowrap}
.krank-volume{display:flex;align-items:center;gap:8px;color:#aaa;font:400 13px sans-serif}
.krank-volume input{width:76px;height:2px;accent-color:#e90750;cursor:pointer}
.krank-progress{position:relative;grid-column:1/-1;height:24px}
.krank-progress:before{content:'';position:absolute;z-index:4;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid rgba(234,13,79,.28);border-top-color:#ea0d4f;border-radius:50%;opacity:0;pointer-events:none;animation:krank-loader .72s linear infinite}
.krank-progress.is-loading:before{opacity:1}
.krank-progress canvas{position:absolute;inset:0;width:100%;height:24px;transition:opacity .2s ease}
.krank-progress>img{position:absolute;z-index:2;left:0;top:5px;width:18px;height:18px;transform:translateX(-50%);filter:drop-shadow(0 0 6px #ff174dcc);pointer-events:none;transition:opacity .2s ease}
.krank-progress.is-loading canvas,.krank-progress.is-loading>img{opacity:0}
.krank-progress input{position:absolute;z-index:3;inset:0;width:100%;height:24px;margin:0;opacity:0;cursor:pointer}
.krank-player-message{position:absolute;right:20px;bottom:3px;margin:0;color:#c29c67;font:500 8px 'Barlow Condensed',sans-serif;letter-spacing:.15em}
.krank-player audio{display:none}
@keyframes krank-loader{to{transform:rotate(360deg)}}
.other-tracks{padding:clamp(42px,5vw,72px) 0 0}
.focus-section-heading,.inspiration-heading{display:flex;align-items:center;justify-content:space-between}
.focus-section-heading>div,.inspiration-heading>div{display:flex;align-items:center;gap:18px}
.focus-section-heading>div>i,.inspiration-heading>div>i{width:45px;height:2px;background:#ec0b50;box-shadow:0 0 8px #ec0b50aa}
.focus-section-heading h2,.inspiration-heading h2{margin:0;color:#eee;font:400 clamp(24px,2.5vw,38px) 'Barlow Condensed',sans-serif;letter-spacing:.2em}
.focus-section-heading hgroup{display:flex;align-items:baseline;gap:14px;margin:0;white-space:nowrap}
.focus-section-heading hgroup p{margin:0;color:#d4ab54;font:500 clamp(9px,.8vw,12px) 'DM Mono',monospace;letter-spacing:.3em}
.focus-section-heading button{display:flex;align-items:center;gap:10px;border:0;background:none;color:#d9b454;font:500 9px 'Barlow Condensed',sans-serif;letter-spacing:.2em}
.focus-section-heading button b{font:normal 17px sans-serif;transition:transform .3s ease}
.other-tracks.is-expanded .focus-section-heading button b{transform:rotate(180deg)}
.focus-carousel{position:relative;margin-top:20px}
.focus-grid{display:flex;gap:12px;max-height:230px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;transition:max-height .72s cubic-bezier(.22,.75,.18,1)}
.focus-grid::-webkit-scrollbar{display:none}
.focus-card{position:relative;flex:0 0 calc((100% - 60px)/6);padding:0 0 11px;border:1px solid rgba(255,255,255,.17);background:#080d11;color:#fff;scroll-snap-align:start;overflow:hidden;transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.focus-card:hover,.focus-card:focus-visible{border-color:#e91253;box-shadow:0 0 20px rgba(233,18,83,.22);transform:translateY(-2px)}
.focus-card.is-current{border-color:#ed1055;box-shadow:0 0 0 2px rgba(237,16,85,.22),0 0 22px rgba(237,16,85,.25)}
.focus-card img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.focus-card>span{position:absolute;z-index:2;left:8px;top:7px;padding:3px 7px;background:rgba(0,0,0,.6);font:500 17px 'Barlow Condensed',sans-serif}
.focus-card strong{display:block;padding:9px 36px 0 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 9px 'DM Mono',monospace}
.focus-card>i{position:absolute;right:7px;bottom:6px;display:grid;place-items:center;width:25px;height:25px;border:1px solid #eee;border-radius:50%;font:normal 9px sans-serif}
.focus-arrow{position:absolute;z-index:3;top:50%;width:42px;height:62px;border:0;background:transparent;color:#ddd;font-size:24px;transform:translateY(-50%)}
.focus-prev{left:-48px}.focus-next{right:-48px}
.other-tracks.is-expanded .focus-grid{flex-wrap:wrap;max-height:520px;overflow:hidden;scroll-snap-type:none}
.other-tracks.is-expanded .focus-card{flex-basis:calc((100% - 60px)/6)}
.other-tracks.is-expanded .focus-arrow{display:none}
.inspiration-wall{padding:clamp(44px,5vw,76px) 0 clamp(50px,7vw,105px)}
.inspiration-heading p{margin:0;color:#9ba2a5;font:500 9px 'Barlow Condensed',sans-serif;letter-spacing:.42em}
.inspiration-collage{position:relative;height:clamp(420px,47vw,690px);margin-top:22px;background:linear-gradient(rgba(4,11,15,.25),rgba(4,11,15,.72)),url('/assets/mooviz/krank-hero-v2.png') center/cover;isolation:isolate}
.inspiration-collage:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(4,9,12,.38),transparent 35%,transparent 70%,rgba(4,9,12,.4)),radial-gradient(circle at 50% 45%,transparent,rgba(0,0,0,.55))}
.inspiration-slot{position:absolute;display:grid;place-items:center;padding:0;border:4px solid #b9aa8f;background:#071015;box-shadow:0 10px 20px #000b,0 0 0 1px rgba(255,255,255,.18);color:#fff;transform:rotate(var(--r));overflow:hidden;cursor:zoom-in}
.inspiration-slot:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 12px,rgba(255,255,255,.02) 12px 13px)}
.inspiration-slot img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.04);transition:opacity .42s ease,transform .6s cubic-bezier(.2,.7,.2,1),filter .42s ease}
.inspiration-slot.is-changing img{opacity:0;transform:scale(1.035)}
.inspiration-slot:hover img,.inspiration-slot:focus-visible img{transform:scale(1.035);filter:saturate(1) contrast(1.03) brightness(1.06)}
.inspiration-slot i{position:absolute;z-index:3;right:8px;bottom:8px;display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(255,255,255,.84);border-radius:50%;background:rgba(2,8,12,.6);box-shadow:0 4px 14px #0008;color:#fff;font:normal 15px sans-serif;opacity:0;transform:scale(.72);transition:opacity .3s ease,transform .3s ease}
.inspiration-slot:hover i,.inspiration-slot:focus-visible i{opacity:1;transform:scale(1)}
.slot-1{--r:-3deg;left:2%;top:3%;width:18%;height:23%}.slot-2{--r:2deg;left:21%;top:0;width:18%;height:20%}.slot-3{--r:-2deg;left:40%;top:4%;width:18%;height:23%}.slot-4{--r:3deg;left:59%;top:1%;width:18%;height:21%}.slot-5{--r:-2deg;left:78%;top:4%;width:20%;height:23%}
.slot-6{--r:2deg;left:1%;top:33%;width:15%;height:23%}.slot-7{--r:-3deg;left:17%;top:29%;width:16%;height:26%}.slot-8{--r:2deg;left:34%;top:35%;width:15%;height:21%}.slot-9{--r:-2deg;left:50%;top:30%;width:16%;height:25%}.slot-10{--r:3deg;left:67%;top:35%;width:15%;height:22%}.slot-11{--r:-2deg;left:83%;top:29%;width:16%;height:26%}
.slot-12{--r:3deg;left:3%;bottom:13%;width:18%;height:23%}.slot-13{--r:-2deg;left:22%;bottom:10%;width:18%;height:26%}.slot-14{--r:2deg;left:41%;bottom:13%;width:18%;height:22%}.slot-15{--r:-3deg;left:60%;bottom:11%;width:18%;height:25%}.slot-16{--r:2deg;left:79%;bottom:13%;width:19%;height:23%}
.krank-lightbox{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:clamp(20px,5vw,70px);background:rgba(1,5,7,.92);backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s;cursor:zoom-out}
.krank-lightbox.is-open{opacity:1;visibility:visible}
.krank-lightbox>img{display:block;width:min(82vw,82vh,760px);height:auto;max-height:86vh;object-fit:contain;box-shadow:0 35px 110px #000,0 0 45px rgba(33,123,140,.2);transform:scale(.78);opacity:0;transition:transform .58s cubic-bezier(.18,.8,.22,1),opacity .38s ease;cursor:default}
.krank-lightbox.is-open>img{transform:scale(1);opacity:1}
.krank-lightbox-close{position:absolute;right:clamp(16px,3.5vw,50px);top:clamp(16px,3.5vw,50px);width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.6);border-radius:50%;background:rgba(5,12,15,.72)}
.krank-lightbox-close:before,.krank-lightbox-close:after{content:'';position:absolute;left:50%;top:50%;width:15px;height:1px;background:#fff}
.krank-lightbox-close:before{transform:translate(-50%,-50%) rotate(45deg)}.krank-lightbox-close:after{transform:translate(-50%,-50%) rotate(-45deg)}
body.krank-lightbox-open{overflow:hidden}
@media(max-width:1199px){
  .krank-hero{height:76vw;min-height:620px;max-height:760px}
  .krank-hero-copy{right:5%;width:45%}
  .krank-body{margin-top:-30px}
  .krank-intro{grid-template-columns:minmax(280px,39%) 1fr;gap:42px}
  .krank-player{grid-template-columns:1fr auto}
  .krank-player-track{grid-column:1}.krank-player-controls{grid-column:2}
  .krank-player-time{grid-column:1;grid-row:2}.krank-volume{grid-column:2;grid-row:2;justify-self:end}.krank-progress{grid-row:3}
  .focus-card{flex-basis:calc((100% - 24px)/3)}
  .other-tracks.is-expanded .focus-card{flex-basis:calc((100% - 24px)/3)}
  .focus-prev{left:-40px}.focus-next{right:-40px}
}
@media(max-width:767px){
  .krank-hero{height:100svh;min-height:620px;max-height:780px}
  .krank-hero-image{object-position:43% center}
  .krank-hero-shade{background:linear-gradient(180deg,rgba(0,4,8,.12),transparent 35%,rgba(2,8,12,.28) 68%,#03080c 100%)}
  .krank-hero-copy{left:6%;right:6%;top:auto;bottom:14%;width:auto}
  .krank-hero-copy p{font-size:9px}.krank-hero-copy h1{font-size:72px}.krank-hero-copy strong{font-size:16px;margin-top:12px}.krank-hero-copy small{font-size:9px;margin-top:10px}.krank-hero-copy span{font-size:13px;margin-top:18px}
  .krank-body{width:88%;margin-top:-26px}
  .krank-intro{display:block;padding:0 0 34px}
  .krank-cover{width:min(100%,430px);margin:0 auto 44px}
  .krank-story h2{font-size:42px}
  .krank-story>p:not(.section-kicker){font-size:12px;line-height:1.7}
  .krank-player{grid-template-columns:1fr auto;padding:14px 13px 18px;gap:10px}
  .krank-player-cover{flex-basis:46px;width:46px;height:46px}
  .krank-player-track strong{font-size:11px}
  .krank-player-controls{gap:2px}.krank-player-controls button:not(.krank-player-toggle){display:none}.krank-player-controls .krank-player-toggle{width:40px;height:40px}
  .krank-player-time{font-size:9px}.krank-volume input{width:52px}
  .focus-section-heading{align-items:flex-end;gap:8px}.focus-section-heading h2,.inspiration-heading h2{font-size:18px;letter-spacing:.14em}.focus-section-heading hgroup{gap:8px}.focus-section-heading hgroup p{font-size:7px;letter-spacing:.18em}.focus-section-heading>div{gap:10px}.focus-section-heading>div>i,.inspiration-heading>div>i{width:24px}.focus-section-heading button{font-size:8px;white-space:nowrap}
  .focus-card{flex-basis:76%}
  .focus-prev{left:-8px}.focus-next{right:-8px}
  .other-tracks.is-expanded .focus-grid{gap:9px;max-height:1120px}.other-tracks.is-expanded .focus-card{flex-basis:calc((100% - 9px)/2)}
  .inspiration-heading{align-items:flex-end}.inspiration-heading p{font-size:7px;letter-spacing:.25em;text-align:right}
  .inspiration-collage{height:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:10px}
  .inspiration-slot{position:relative;inset:auto!important;width:auto!important;height:auto!important;min-height:105px;transform:rotate(var(--r))}
  .krank-lightbox{padding:14px}.krank-lightbox>img{width:94vw}.krank-lightbox-close{right:12px;top:12px;width:36px;height:36px}
}
@media(max-width:420px){.other-tracks.is-expanded .focus-card{flex-basis:100%}.focus-card{flex-basis:84%}.inspiration-collage{grid-template-columns:1fr 1fr}.inspiration-slot{min-height:112px}}
@media(prefers-reduced-motion:reduce){.krank-cover img,.krank-player-cover img,.krank-player-controls button,.focus-grid,.focus-card,.inspiration-slot img,.inspiration-slot i,.krank-lightbox,.krank-lightbox>img{transition:none;scroll-behavior:auto}}
