/* TRIPLEH metal v1 — approved artwork, isolated from the original media/calculator. */
:root{--metal-texture:url('assets/metal-v1/texture.webp');--metal-frame:url('assets/metal-v1/panel-frame.webp');--green:#97ffcd}
body{background:linear-gradient(#070d0bf0,#070d0bf0),var(--metal-texture) repeat;background-size:auto,500px;color:#eef4f0}
header{padding:16px 4vw;min-height:92px;gap:28px;background:linear-gradient(#050a08a6,#050a0880),var(--metal-texture);background-size:auto,420px;border:9px solid transparent;border-image:var(--metal-frame) 100 stretch;box-shadow:0 8px 25px #0009}
header::before{background:#060c09}
.brand{display:block;flex:none;transform:none;padding:0;line-height:0;letter-spacing:0}
.brand img{display:block;width:136px;height:auto;max-height:60px;object-fit:contain}
.brand::before{display:none}
nav{gap:12px;align-items:center;font-family:'Barlow Condensed',Impact,sans-serif;font-size:18px;letter-spacing:.07em}
nav a,.contract button,#sound-toggle,.clip-transport button,.music-clips,.belt-key button,.live-price button{--button-image:url('assets/metal-v1/button-normal.webp');position:relative;isolation:isolate;background:transparent!important;border:0!important;box-shadow:none!important;color:#e7f2eb!important;text-shadow:0 2px 3px #000;font-family:'Barlow Condensed',Impact,sans-serif;font-weight:700;letter-spacing:.07em;transition:filter .2s,transform .15s}
header nav a.magnetic::before,.contract button::before,#sound-toggle::before,.clip-transport button::before,.music-clips::before,.belt-key button::before,.live-price button::before{content:'';position:absolute;inset:-7px -10px;z-index:-1;pointer-events:none;background:var(--button-image) center/100% 100% no-repeat;border:0;opacity:1;transform:none!important;border-radius:0;transition:none}
header nav a.magnetic::before{inset:-7px -3px}
nav a{display:flex;align-items:center;justify-content:center;min-width:112px;min-height:45px;padding:9px 23px;white-space:nowrap}
nav a:hover,.contract button:hover,#sound-toggle:hover,.clip-transport button:hover,.music-clips:hover,.belt-key button:hover,.live-price button:hover,nav a:focus-visible,.contract button:focus-visible,#sound-toggle:focus-visible,.clip-transport button:focus-visible,.music-clips:focus-visible,.belt-key button:focus-visible,.live-price button:focus-visible{--button-image:url('assets/metal-v1/button-hover.webp');filter:brightness(1.12);color:#fff!important}
nav a:active,.contract button:active,#sound-toggle:active,.clip-transport button:active,.music-clips:active,.belt-key button:active,.live-price button:active{--button-image:url('assets/metal-v1/button-pressed.webp');transform:scale(.985)}
.hero{background:#0b1912}
.hero-shade{background:linear-gradient(180deg,#030a0845,transparent 35%,#050e0945 75%,#080e0b),linear-gradient(90deg,#020905ba,transparent 72%)}
.hero-content{left:6%;width:46%;max-width:730px;top:49%;transform:translateY(-36%)}
.hero-content>.eyebrow{font:800 clamp(20px,2vw,30px)/1 'Barlow Condensed',Impact,sans-serif;letter-spacing:.08em;color:#e2ece7;text-shadow:0 2px 2px #000}
h1{font-size:inherit;line-height:1;margin:20px -14px 22px;letter-spacing:0;text-shadow:none}
h1 img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 12px #0009)}
.hero-content>p{font:700 clamp(20px,2.7vw,40px)/1.16 'Barlow Condensed',Impact,sans-serif;letter-spacing:.01em;margin:0 0 28px;color:#dbe7e0;text-shadow:0 2px 4px #000}
.hero-content strong{display:block;font-weight:800}.hero-content .mobile-break{display:none}
.contract{width:100%;max-width:650px;gap:13px;padding:7px 14px;min-height:62px;background:linear-gradient(#030a08c7,#030a08c7),var(--metal-texture);background-size:auto,400px;border:8px solid transparent;border-image:var(--metal-frame) 100 stretch;box-shadow:0 5px 15px #0006;backdrop-filter:blur(6px)}
.ca-label{font:800 22px 'Barlow Condensed',Impact,sans-serif;color:#d8e6dc;border-right:1px solid #6e81724d;padding-right:13px}
.contract code{font-size:13px;color:#cad8ce}.contract button{padding:9px 19px;font-size:15px;min-height:35px}
.hero-bottom{bottom:24px;align-items:center;gap:20px}.scroll-link{font-family:'Barlow Condensed',Impact,sans-serif;font-size:15px;letter-spacing:.2em}.scroll-link span{display:inline-block;font-size:27px}
.sound-controls{gap:14px;padding:10px 18px;background:linear-gradient(#080f0ad1,#080f0ad1),var(--metal-texture);background-size:auto,400px;border:8px solid transparent;border-image:var(--metal-frame) 100 stretch}
.sound-controls button{padding:8px 15px;font-size:14px;min-width:96px;min-height:34px}
#volume{--volume-fill:65%;appearance:none;-webkit-appearance:none;width:126px;height:9px;border-radius:8px;border:0;background-image:url('assets/metal-v1/slider-fill.webp'),url('assets/metal-v1/slider-track.webp');background-position:left center,center;background-size:var(--volume-fill) 100%,100% 100%;background-repeat:no-repeat;box-shadow:0 0 0 1px #18201c;cursor:pointer;outline-offset:10px}
#volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;border:0;background:url('assets/metal-v1/slider-thumb.webp') center/contain no-repeat;filter:drop-shadow(0 2px 2px #000);cursor:grab}
#volume::-moz-range-thumb{width:28px;height:28px;border:0;background:url('assets/metal-v1/slider-thumb.webp') center/contain no-repeat;cursor:grab}
#volume:hover::-webkit-slider-thumb,#volume:focus-visible::-webkit-slider-thumb{filter:drop-shadow(0 0 5px #57ffad)}
#volume:hover::-moz-range-thumb,#volume:focus-visible::-moz-range-thumb{filter:drop-shadow(0 0 5px #57ffad)}
#volume:active::-webkit-slider-thumb{cursor:grabbing}
.section-heading,.champion-title{position:relative;border:0;padding:24px 28px;background:linear-gradient(#060d0acb,#060d0acb),var(--metal-texture);background-size:auto,500px;border:9px solid transparent;border-image:var(--metal-frame) 100 stretch;box-shadow:0 7px 24px #0005}
.section-heading::after{content:'';position:absolute;left:28px;right:28px;bottom:0;height:1px;background:linear-gradient(90deg,#79f4b1,transparent);opacity:.6}
.section-heading .eyebrow,.champion-title .eyebrow{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:15px;letter-spacing:.15em}
.section h2,.champion-title h2{font-weight:900;letter-spacing:.015em;color:#e8eeea;text-shadow:0 2px 0 #43514a,0 4px 7px #000}
.section{padding-top:36px;padding-bottom:36px}
.how-infographic{border:8px solid transparent;border-image:var(--metal-frame) 100 stretch;background:#07120d;box-shadow:0 12px 30px #0006}
/* Calculator contents, column layout and existing highlight are deliberately retained. */
.calc-card{border:9px solid transparent;border-image:var(--metal-frame) 100 stretch;box-shadow:0 15px 55px #0007}
.calc-top,.calc-bottom{background-image:linear-gradient(#09150ee8,#09150ee8),var(--metal-texture);background-size:auto,500px}
.live-price button{padding:7px 15px;margin:9px 0 0;font-size:12px}.belt-key button{padding:7px 14px;font-size:12px}
.meme-card{border:8px solid transparent;border-image:var(--metal-frame) 100 stretch;background:linear-gradient(#08140ed9,#08140ed9),var(--metal-texture);background-size:auto,400px;box-shadow:0 8px 20px #0006;transition:filter .2s}
.meme-card:hover,.meme-card:focus-visible{filter:brightness(1.1) drop-shadow(0 0 6px #97ffcd40)}
.meme-card>span{padding:16px;font-family:'Barlow Condensed',Impact,sans-serif;font-size:18px;letter-spacing:.015em}
.champions{background:transparent}.champion-title{margin:0 7vw 30px;padding:30px}.champions>img{border-top:1px solid #64806e}
dialog{border:10px solid transparent;border-image:var(--metal-frame) 100 stretch;background:linear-gradient(#050c09f0,#050c09f0),var(--metal-texture);background-size:auto,500px;box-shadow:0 20px 80px #000}
dialog::backdrop{background:#000d}
.music-dock{border:8px solid transparent;border-image:var(--metal-frame) 100 stretch;background:linear-gradient(#08110de3,#08110de3),var(--metal-texture);background-size:auto,400px}
.music-clips{padding:9px 15px;margin-right:6px}.music-top strong{letter-spacing:.05em}
footer{background:linear-gradient(#050c09d9,#050c09d9),var(--metal-texture);background-size:auto,500px;border-top:3px ridge #65756d;font-family:'Barlow Condensed',Impact,sans-serif;font-size:16px}
#toast{border:4px solid transparent;border-image:var(--metal-frame) 100 stretch;box-shadow:0 8px 24px #0008}
@media(min-width:1800px){.hero-content{max-width:850px}}
@media(max-width:1050px){header{gap:20px;padding:12px 3vw;min-height:80px}.brand img{width:115px}nav{gap:10px;font-size:16px}nav a{min-width:88px;padding:8px 16px;min-height:40px}.hero-content{width:52%;left:6%}.hero-content>p{font-size:30px}.sound-controls{gap:10px;padding:8px 12px}}
@media(max-width:700px){html{scroll-padding-top:132px}header{display:flex;flex-direction:column;gap:9px;padding:10px 14px 12px;min-height:116px;border-width:6px}.brand img{width:94px;height:40px;object-fit:contain}nav{width:100%;justify-content:center;gap:7px;font-size:13px;letter-spacing:.02em}nav a{flex:1;min-width:0;min-height:33px;padding:5px 7px}header nav a.magnetic::before{inset:-6px -1px}.hero{min-height:690px}.hero-content{left:6%;right:6%;width:auto;max-width:none;top:47%;transform:translateY(-25%)}h1{margin:16px -6px 20px}.hero-content>.eyebrow{font-size:22px}.hero-content>p{font-size:29px;max-width:330px;margin-bottom:24px}.hero-shade{background:linear-gradient(180deg,#02090555,transparent 20%,#02090588 75%,#080e0b),linear-gradient(90deg,#020905b0,#02090518)}.contract{min-height:58px;padding:7px 8px;gap:9px;border-width:6px}.ca-label{font-size:18px;padding-right:9px}.contract code{font-size:11px}.contract button{font-size:13px;padding:8px 14px}.hero-bottom{left:6%;right:6%;bottom:24px;gap:12px;align-items:center}.scroll-link{font-size:11px;letter-spacing:.08em}.scroll-link span{margin-left:4px;font-size:22px}.sound-controls{gap:8px;padding:8px;border-width:5px}.sound-controls button{min-width:70px;min-height:28px;font-size:11px;padding:5px 8px}#volume{width:66px;height:7px}#volume::-webkit-slider-thumb{width:23px;height:23px}#volume::-moz-range-thumb{width:23px;height:23px}#sound-signal{width:3px;height:12px}.section-heading{padding:20px 16px;border-width:7px}.section-heading .eyebrow,.champion-title .eyebrow{font-size:12px}.section h2{font-size:36px}.section{padding:26px 6vw}.how-infographic{border-width:5px}.calc-card{border-width:5px}.live-price button{font-size:11px}.belt-key button{font-size:10px;padding:6px 8px}.meme-card{border-width:6px}.champion-title{margin:0 6vw 24px;padding:23px 16px;border-width:7px}.meme-card>span{font-size:16px}.music-dock{border-width:6px}.clip-launcher{bottom:85px}}
@media(max-width:370px){nav{font-size:12px}.sound-controls{gap:6px}#volume{width:48px}.scroll-link{font-size:10px}.hero-content>p{font-size:26px}.contract button{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){nav a,.contract button,#sound-toggle,.meme-card,.clip-transport button,.music-clips,.belt-key button,.live-price button{transition:none}}

/* Compact HHH mark above the hero wordmark. */
.hero-hhh-mark{display:block;width:auto;height:clamp(30px,3vw,42px);object-fit:contain}