/* HUD layer, homepage only: red-framed panels, section bands, image frames, page rails. All static.
   Every label here is decoration, so each uses the `/ ''` form to stay out of the accessibility tree. */
:root{--hx-red:#D60000;--hx-cut:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}

/* Page rails */
@media(min-width:1100px){.hs-homepage::before{content:'';position:fixed;z-index:20;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(242,210,0,.42) 0 1px,transparent 1px 24px) 2px 0/6px 100% no-repeat,repeating-linear-gradient(0deg,rgba(24,221,224,.42) 0 1px,transparent 1px 24px) calc(100% - 2px) 0/6px 100% no-repeat}}

/* Opaque section fills would hide the data ground */
#work,#testimonials{background:transparent!important}

/* Section bands */
#history,#services,#work,#photos,#testimonials,#tech,#transmissions-home{position:relative}
#history::before,#services::before,#work::before,#photos::before,#testimonials::before,#tech::before,#transmissions-home::before{display:block;box-sizing:border-box;height:28px;padding:0 0 0 max(28px,calc(50% - 592px));background:linear-gradient(90deg,rgba(214,0,0,.5),transparent 30%),repeating-linear-gradient(90deg,rgba(242,210,0,.3) 0 1px,transparent 1px 16px) 0 100%/100% 5px no-repeat;border-bottom:1px solid rgba(242,210,0,.3);color:var(--hs-y);font-size:9px;font-weight:700;letter-spacing:.22em;line-height:27px;white-space:nowrap;overflow:hidden}
#history::before{content:'SEC.03 // SERVICE RECORD' / ''}
#services::before{content:'SEC.04 // BOOKING NODE' / ''}
#work::before{content:'SEC.05 // CLIENT FILES' / ''}
#photos::before{content:'SEC.06 // VISUAL ARCHIVE' / ''}
#testimonials::before{content:'SEC.07 // INCOMING SIGNAL' / ''}
#tech::before{content:'SEC.08 // RIDER + LINKS' / ''}
#transmissions-home::before{content:'SEC.09 // BROADCAST LOG' / ''}
#history::after,#services::after,#work::after,#photos::after,#testimonials::after,#tech::after,#transmissions-home::after{content:'';position:absolute;top:9px;right:max(28px,calc(50% - 592px));width:128px;height:9px;background:repeating-linear-gradient(120deg,var(--hs-live) 0 5px,transparent 5px 11px);opacity:.6;pointer-events:none}

/* Chamfered panels: outer fill is the line, ::before is the face */
.hs-mix-info,.hs-panel.hs-brk,.hs-job,.hs-card,#services .hs-split-r>div:last-child,#tech>div>div{--hl:rgba(214,0,0,.82);position:relative;isolation:isolate;background:var(--hl)!important;border:0!important;clip-path:var(--hx-cut)}
.hs-mix-info::before,.hs-panel.hs-brk::before,.hs-job::before,.hs-card::before,#services .hs-split-r>div:last-child::before,#tech>div>div::before{content:'';position:absolute;z-index:-1;inset:1px;background:linear-gradient(var(--hx-red),var(--hx-red)) 0 0/100% 3px no-repeat,#07090a;clip-path:var(--hx-cut)}
.hs-mix-info::after,.hs-panel.hs-brk::after,.hs-job::after,.hs-card::after,#services .hs-split-r>div:last-child::after,#tech>div>div::after{position:absolute;z-index:3;top:0;left:22px;padding:4px 18px 4px 10px;background:var(--hx-red);color:#fff;font-size:8px;font-weight:700;letter-spacing:.18em;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,10px 100%);pointer-events:none}
.hs-mix-info::after{content:'SIGNAL RECORD' / ''}
#services .hs-split-r>div:last-child::after{content:'ACCESS LANES' / ''}
#tech>div>div:first-child::after{content:'RIDER SPEC' / ''}
#tech>div>div:last-child::after{content:'NET LINKS' / ''}
.hs-qs{counter-reset:hxq}.hs-panel.hs-brk{counter-increment:hxq}.hs-panel.hs-brk::after{content:'TX.0' counter(hxq) / ''}
.hs-clients{counter-reset:hxf}.hs-job{counter-increment:hxf}.hs-job::after{content:'FILE.0' counter(hxf) / ''}
.hs-posts{counter-reset:hxl}.hs-card{counter-increment:hxl}.hs-card::after{content:'LOG.0' counter(hxl) / ''}
.hs-job,.hs-card{padding:1px}
.hs-card:hover,.hs-card:focus-visible,.hs-panel.hs-brk:hover{--hl:var(--hs-y)}
.hs-mix-info{padding:36px 28px 26px}
.hs-panel.hs-brk{padding-top:36px!important}
#services .hs-split-r>div:last-child,#tech>div>div{box-sizing:border-box;padding:38px 26px 22px}
#services .hs-split-r>div:last-child .hs-kv:last-child,#tech .hs-kv:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.hs-kv b::before{content:'';display:block;width:24px;height:24px;margin-bottom:6px;background:var(--i,linear-gradient(var(--hs-live),var(--hs-live))) center/contain no-repeat}
#services .hs-kv:nth-of-type(2) b{--i:url(/v2/img/hud/icon-vinyl.webp)}
#services .hs-kv:nth-of-type(3) b{--i:url(/v2/img/hud/icon-mic.webp)}
#services .hs-kv:nth-of-type(4) b{--i:url(/v2/img/hud/icon-calendar.webp)}
#services .hs-kv:nth-of-type(5) b{--i:url(/v2/img/hud/icon-laptop.webp)}
#tech>div>div:first-child .hs-kv:nth-of-type(2) b{--i:url(/v2/img/hud/icon-calendar.webp)}
#tech>div>div:first-child .hs-kv:nth-of-type(3) b{--i:url(/v2/img/hud/icon-crate.webp)}
#tech>div>div:first-child .hs-kv:nth-of-type(4) b{--i:url(/v2/img/hud/icon-plug.webp)}
#tech>div>div:first-child .hs-kv:nth-of-type(5) b{--i:url(/v2/img/hud/icon-wave.webp)}
#tech>div>div:first-child .hs-kv:nth-of-type(6) b{--i:url(/v2/img/hud/icon-mic.webp)}
#tech>div>div:last-child .hs-kv:nth-of-type(2) b{--i:url(/v2/img/hud/icon-vinyl.webp)}
#tech>div>div:last-child .hs-kv:nth-of-type(3) b{--i:url(/v2/img/hud/icon-laptop.webp)}
#tech>div>div:last-child .hs-kv:nth-of-type(4) b{--i:url(/v2/img/hud/social-spotify.svg)}
#tech>div>div:last-child .hs-kv:nth-of-type(5) b{--i:url(/v2/img/hud/social-instagram.svg)}
#tech>div>div:last-child .hs-kv:nth-of-type(6) b{--i:url(/v2/img/hud/social-tiktok.svg)}
#tech>div>div:last-child .hs-kv:nth-of-type(7) b{--i:url(/v2/img/hud/code-cyan.webp)}
#tech>div>div:last-child .hs-kv:nth-of-type(7) b::before{width:48px}

/* Barcodes sit in the panel face, top right */
.hs-mix-info::before{background:url(/v2/img/hud/code-red.webp) calc(100% - 34px) 12px/48px auto no-repeat,linear-gradient(var(--hx-red),var(--hx-red)) 0 0/100% 3px no-repeat,#07090a}
#services .hs-split-r>div:last-child::before{background:url(/v2/img/hud/code-yellow.webp) calc(100% - 34px) 12px/48px auto no-repeat,linear-gradient(var(--hx-red),var(--hx-red)) 0 0/100% 3px no-repeat,#07090a}
#tech>div>div::before{background:url(/v2/img/hud/code-cyan.webp) calc(100% - 34px) 12px/48px auto no-repeat,linear-gradient(var(--hx-red),var(--hx-red)) 0 0/100% 3px no-repeat,#07090a}

/* Rider schematics */
#tech>.hx-schem{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1296px;box-sizing:border-box;margin:0 auto;padding:0 28px clamp(58px,7vw,104px)}
#tech>.hx-schem>div img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
#tech>.hx-schem>div:first-child::after{content:'SCHEMATIC 01 // DECK' / ''}
#tech>.hx-schem>div:last-child::after{content:'SCHEMATIC 02 // MIXER' / ''}

/* Image frames: brackets live in the padding ring of the img itself */
.hs-gal img,.hs-shot img,#history figure img,.hs-qimg{--b:var(--hs-y);box-sizing:border-box;padding:7px;border:1px solid rgba(214,0,0,.72)!important;background-color:#050505;background-image:linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b));background-repeat:no-repeat;background-size:24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px,24px 2px,2px 24px;background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
.hs-qimg{padding:4px;--b:var(--hs-live);background-size:12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px,12px 1px,1px 12px}
.hs-gal{counter-reset:hxi}
.hs-gal figure,.hs-shot,#history figure{position:relative}
.hs-gal figure{counter-increment:hxi}
.hs-gal figure::before,.hs-shot::before,#history figure::before{position:absolute;z-index:2;top:7px;left:7px;padding:3px 8px;background:#050505;color:var(--hs-y);font-size:8px;font-weight:700;letter-spacing:.16em;pointer-events:none}
.hs-gal figure::before{content:'REC.' counter(hxi) / ''}
.hs-shot::before{content:'FIELD CAPTURE' / ''}
#history figure::before{content:'SUBJECT 01' / ''}
.hs-shot::after,#history figure::after{content:'';position:absolute;z-index:2;top:16px;right:16px;width:44px;height:44px;background:url(/v2/img/hud/reticle-cyan.webp) center/contain no-repeat;opacity:.85;pointer-events:none}

/* Stage photo: scanlines and a capture tag */
#tech>figure::before{content:'CAM 01 // STAGE VIEW' / '';position:absolute;z-index:2;top:14px;left:max(14px,calc(50% - 592px));padding:4px 10px;background:var(--hx-red);color:#fff;font-size:9px;font-weight:700;letter-spacing:.18em;pointer-events:none}
#tech>figure::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px);pointer-events:none}

/* Audio bay */
.hs-audio-console::before{content:'';position:absolute;z-index:3;left:0;top:190px;width:6px;height:320px;background:linear-gradient(to bottom,var(--hs-y) 0 22%,transparent 22% 30%,var(--hx-red) 30% 64%,transparent 64% 72%,var(--hs-live) 72% 100%);pointer-events:none}
.hs-listen-head::after{content:'';position:absolute;top:12px;right:0;width:112px;height:112px;background:url(/v2/img/hud/deck-dial.webp) center/contain no-repeat;pointer-events:none}
/* the dial only turns while audio is really loading or playing */
.hs-audio-visible .hs-listen-head::after{animation:hxspin 6s linear infinite}
@keyframes hxspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hs-audio-visible .hs-listen-head::after{animation:none}}
.hx-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:20px;background:rgba(214,0,0,.5);border:1px solid rgba(214,0,0,.5);text-transform:uppercase}
.hx-cell{padding:9px 12px;background:#07090a}
.hx-cell span{display:block;color:#8e9292;font-size:8px;letter-spacing:.18em}
.hx-cell b{display:block;margin-top:3px;color:#e8e8e8;font-size:11px;letter-spacing:.08em}
.hx-cell[data-audio-ui] b{color:var(--hs-live)}
.hx-scope{position:relative;grid-column:1/-1;height:64px;background:#040606 linear-gradient(rgba(24,221,224,.12),rgba(24,221,224,.12)) 0 50%/100% 1px no-repeat}
.hx-scope svg{position:absolute;inset:0;width:100%;height:100%;stroke:var(--hx-red);stroke-width:2;fill:none;opacity:.8}
.hx-scope .hs-deck-wave{position:absolute;inset:0;top:0;right:0;width:100%!important;height:100%!important}

/* Booking section: corner brackets on the red */
#book>div{--b:#fff;background-image:linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b)),linear-gradient(var(--b),var(--b));background-repeat:no-repeat;background-size:44px 2px,2px 44px,44px 2px,2px 44px;background-position:12px 28px,12px 28px,calc(100% - 12px) calc(100% - 28px),calc(100% - 12px) calc(100% - 28px)}

@media(max-width:860px){
  #history::after,#services::after,#work::after,#photos::after,#testimonials::after,#tech::after,#transmissions-home::after,.hs-listen-head::after,.hs-audio-console::before{display:none}
  .hs-mix-info{padding:34px 16px 20px}
  #services .hs-split-r>div:last-child,#tech>div>div{padding:36px 16px 18px}
  .hx-cell{padding:8px}.hx-cell b{font-size:9px}
  .hs-gal figure::before{font-size:7px;padding:2px 5px}
  .hs-deck-label{display:none}
  #tech>.hx-schem{grid-template-columns:minmax(0,1fr);padding-inline:28px}
}