/* McBeth Kings full-width black bands v6 (24 Oct 2026): standalone black sections run edge to edge, like the footer and the header.
   Loaded after mk-chrome-v1.css, only on the pages that have such a section (home: the Academy block; /academy: the hero).
   Content, text and layout inside the sections are untouched: each keeps its column, only the black behind it widens. */

body.mk-paper{overflow-x:clip}

body.mk-paper .sheet.dark.cl-hero,
body.mk-paper .sheet.dark.academy{background:none;box-shadow:none;isolation:isolate}
body.mk-paper .sheet.dark.cl-hero::before,
body.mk-paper .sheet.dark.academy::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);
  background:url(/brand/assets/vignette.png) center/100% 100% no-repeat,var(--mkc-grain) repeat,var(--mkc-ground)}

/* /academy hero: the photo runs the full width too, and the black meets the header with no paper gap between */
body.mk-paper .cl-hero{overflow:visible;margin-top:0}
@media(min-width:861px){
  body.mk-paper .cl-hero picture{left:50%;right:auto;width:100vw;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 36%,rgba(0,0,0,.55) 50%,transparent 62%);
    mask-image:linear-gradient(90deg,#000 0%,#000 36%,rgba(0,0,0,.55) 50%,transparent 62%)}
}
@media(max-width:860px){
  body.mk-paper .cl-hero picture{left:calc(50% - 50vw);width:100vw;max-width:none}
}

/* ---- /academy hero, v2: the hero IS the screen. The header floats over it (like the home page) and the photo runs up behind the menu,
   fading into the same black so the two blend. Only the pages with body.mkb-hero (the academy) get this. ---- */
body.mk-paper.mkb-hero .hdr{position:absolute;top:0;left:0;right:0;background:transparent;border-bottom:0}
body.mkb-hero .cl-hero{min-height:100vh;min-height:100svh}
body.mkb-hero .cl-hero .cl-copy{position:relative;z-index:1}
body.mkb-hero .cl-hero::after{content:"";position:absolute;z-index:0;top:0;height:clamp(150px,22vh,230px);left:50%;width:100vw;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(180deg,#161514 0,rgba(22,21,20,.92) 56px,rgba(22,21,20,.55) 120px,rgba(22,21,20,0) 100%)}
@media(max-width:860px){
  body.mkb-hero .cl-hero{display:flex;flex-direction:column;justify-content:flex-end}
}

/* ---- v4: original text sizes; the hero text block sits to the right, its right edge in line with the menu's right edge, so the black
   to its right is no longer empty. It is also nudged down to sit centred below the floating menu. Desktop only. ---- */
@media(min-width:861px){
  body.mkb-hero .cl-hero .cl-copy{left:max(0px,calc((100vw - 100%)/2 - var(--mkp,60px)));padding-top:calc(var(--sp-first,56px) + 7vh);padding-bottom:calc(var(--sp-first,56px) + 2vh)}
}

/* ---- v5: phones and tablets. The full-screen hero is a flex column there, and its base rule centres children, which centred the
   (screen-wide) photo and let the page-margin offset push it one margin too far left, leaving a black strip on the right.
   Children now stretch from the left again, so the offset lands the photo exactly edge to edge. ---- */
@media(max-width:860px){
  body.mkb-hero .cl-hero{align-items:stretch}
  body.mk-paper .cl-hero picture{left:calc(50% - 50vw);transform:none;width:100vw;max-width:none}
}

/* ---- v6: ultra-wide and very tall screens. The /academy hero composes inside the same 1680px stage as the menu: the photo no longer stretches across
   a 3440px screen (it is 1600px wide at source, so it is shown at most 2000px wide), it fades into the black at its left edge, and the text sits at the stage's right edge instead of the
   screen's. On very tall screens the photo is capped at 1500px high and fades top and bottom. Up to 1680px wide and 1500px high nothing changes. ---- */
@media(min-width:861px){
  body.mkb-hero .cl-hero .cl-copy{left:max(0px,calc((min(100vw,var(--stage,1680px)) - 100%)/2 - var(--mkp,60px)))}
  body.mkb-hero .cl-hero picture{--hm:linear-gradient(90deg,#000 0%,#000 36%,rgba(0,0,0,.55) 50%,transparent 62%);-webkit-mask-image:var(--hm);mask-image:var(--hm)}
}
@media(min-width:1681px){
  body.mkb-hero .cl-hero picture{width:min(100vw,2000px);--hm:linear-gradient(90deg,transparent 0,#000 14%,#000 36%,rgba(0,0,0,.55) 50%,transparent 62%)}
}
@media(min-width:861px) and (min-height:1501px){
  body.mkb-hero .cl-hero picture{top:50%;bottom:auto;height:1500px;transform:translate(-50%,-50%);
    -webkit-mask-image:var(--hm),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:var(--hm),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
}