
/* METALKISTE V13 — visual lock to approved V13 mockup */
:root{--mk-width:1280px}
body.mk-v6{background:#080808!important}

/* One cinematic masthead: no separate black header box */
body.mk-v6 .mk12-header{position:absolute!important;top:0;left:0;right:0;background:transparent!important}
body.mk-v6 .mk12-topline{
 height:178px!important;
 background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.18) 72%,rgba(0,0,0,0))!important;
 border-bottom:0!important;
}
body.mk-v6 .mk12-brand{
 top:5px!important;width:min(590px,46vw)!important;height:164px!important;
}
body.mk-v6 .mk12-socials{left:28px!important;top:18px!important;gap:14px!important}
body.mk-v6 .mk12-tools{right:26px!important;top:16px!important}
body.mk-v6 .mk12-search input{width:180px!important}
body.mk-v6 .mk12-live{height:38px!important;min-width:162px!important}
body.mk-v6 .mk12-navrow{
 height:48px!important;
 background:rgba(5,5,5,.48)!important;
 border-top:1px solid rgba(255,255,255,.08)!important;
 border-bottom:1px solid rgba(255,255,255,.12)!important;
 backdrop-filter:none!important;
}
body.mk-v6 .mk12-nav,body.mk-v6 .mk12-menu{height:48px!important}
body.mk-v6 .mk12-menu>li>a{height:48px!important;padding:0 18px!important}

/* Hero matches mockup proportions: guitarist large on left, copy starts around center */
body.mk-v6 .mk6-hero{
 min-height:485px!important;
 background:#060606!important;
}
body.mk-v6 .mk6-hero:before{
 background-image:
   linear-gradient(90deg,rgba(0,0,0,.02) 0%,rgba(0,0,0,.02) 31%,rgba(0,0,0,.26) 48%,rgba(0,0,0,.80) 72%,#050505 100%),
   url('images/hero-guitar.jpg')!important;
 background-size:auto 121%,auto 121%!important;
 background-position:left 49%,left 49%!important;
 filter:saturate(.92) contrast(1.08)!important;
}
body.mk-v6 .mk6-hero:after{
 background:
   radial-gradient(circle at 17% 43%,rgba(220,25,20,.29),transparent 33%),
   linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.08) 80%,rgba(0,0,0,.22))!important;
}
body.mk-v6 .mk6-hero-inner{
 min-height:485px!important;
 padding-top:226px!important;
 padding-bottom:12px!important;
 grid-template-columns:49% 51%!important;
 align-items:center!important;
}
body.mk-v6 .mk6-hero-copy{
 grid-column:2!important;
 padding-left:22px!important;
 transform:translateY(4px)!important;
 max-width:610px!important;
}
body.mk-v6 .mk6-kicker{font-size:clamp(31px,3.15vw,47px)!important;line-height:.96!important}
body.mk-v6 .mk6-title{font-size:clamp(54px,5.1vw,78px)!important;margin:7px 0 15px!important}
body.mk-v6 .mk6-hero p{font-size:14px!important;max-width:550px!important;line-height:1.45!important;margin-bottom:15px!important}
body.mk-v6 .mk6-btn{padding:10px 15px!important}

/* Main magazine grid: slightly wider and tighter like mockup */
body.mk-v6 .mk6-main{padding:10px 0 20px!important;background:#101010!important}
body.mk-v6 .mk6-layout{grid-template-columns:minmax(0,1fr) 330px!important;gap:14px!important}
body.mk-v6 .mk6-news-grid{gap:9px!important}
body.mk-v6 .mk6-card-media{aspect-ratio:1.45/1!important}
body.mk-v6 .mk6-card-body{padding:9px 10px 10px!important}
body.mk-v6 .mk6-card h3{font-size:14px!important}
body.mk-v6 .mk6-card p{display:none!important}
body.mk-v6 .mk6-section-title{font-size:14px!important;margin-bottom:8px!important}
body.mk-v6 .mk6-more{margin:-24px 4px 9px 0!important}
body.mk-v6 .mk6-lower{margin-top:10px!important}
body.mk-v6 .mk6-panel{background:#0c0c0c!important}
body.mk-v6 .mk6-values{padding:10px 0!important}
body.mk-v6 .mk6-footer{padding:11px 0!important}
body.mk-v6 .mk6-footer-brand img{width:105px!important}

/* Keep debug small like the reference */
body.mk-v6 .mk6-debug{right:12px!important;bottom:10px!important}

/* Mobile stays usable rather than forcing desktop mockup proportions */
@media(max-width:1000px){
 body.mk-v6 .mk6-layout{grid-template-columns:1fr!important}
 body.mk-v6 .mk12-brand{width:min(540px,52vw)!important}
}
@media(max-width:760px){
 body.mk-v6 .mk12-topline{height:126px!important}
 body.mk-v6 .mk12-brand{width:min(400px,73vw)!important;height:118px!important}
 body.mk-v6 .mk6-hero{min-height:455px!important}
 body.mk-v6 .mk6-hero-inner{min-height:455px!important;padding-top:173px!important;grid-template-columns:1fr!important}
 body.mk-v6 .mk6-hero-copy{grid-column:1!important;padding:90px 0 30px!important;transform:none!important}
 body.mk-v6 .mk6-hero:before{background-size:auto 108%,auto 108%!important;background-position:-55px center,-55px center!important}
}
