:root{--yellow:#f4b927;--red:#c93a24;--ink:#fff7df;--black:#070707}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--black);color:var(--ink)}
body{font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif}
.hero{position:relative;isolation:isolate;min-height:calc(100vh - 76px);display:grid;align-items:end;overflow:hidden;border-bottom:5px solid var(--yellow)}
.hero-art,.shade{position:absolute;inset:0;width:100%;height:100%}
.hero-art{z-index:-2;object-fit:cover;object-position:62% center}
.shade{z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.96),rgba(0,0,0,.77) 39%,rgba(0,0,0,.1) 78%),linear-gradient(0deg,#070707,transparent 48%)}
header{position:absolute;top:0;left:0;right:0;padding:16px clamp(20px,5vw,72px);display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,.7);border-bottom:1px solid rgba(244,185,39,.5);letter-spacing:.1em}
header span{color:var(--yellow);font-size:clamp(21px,3vw,34px)}
header small{font:800 10px/1.2 Arial,sans-serif;letter-spacing:.14em}
.copy{padding:110px clamp(22px,7vw,100px) 9vh;max-width:780px}
.kicker{margin:0 0 12px;color:var(--yellow);font:900 13px/1.2 Arial,sans-serif;letter-spacing:.2em}
h1{margin:0 0 20px;font-size:clamp(74px,12vw,168px);line-height:.76;letter-spacing:-.045em;text-shadow:7px 7px 0 var(--red),12px 12px 0 #000}
.intro{max-width:550px;font:800 clamp(16px,2.1vw,23px)/1.35 Arial,sans-serif}
.play{display:inline-flex;padding:15px 29px;color:#080808;background:var(--yellow);border:3px solid #fff1b4;box-shadow:6px 6px 0 var(--red);text-decoration:none;font-size:22px;letter-spacing:.12em}
.play:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--red)}
.tip{margin:18px 0 0;color:#d5cdb8;font:700 11px/1.4 Arial,sans-serif;letter-spacing:.08em}
.controls{min-height:76px;padding:18px clamp(18px,5vw,70px);display:flex;gap:16px 34px;align-items:center;justify-content:center;flex-wrap:wrap;font:800 13px/1.4 Arial,sans-serif;letter-spacing:.08em}
.controls b{display:inline-block;margin-right:7px;padding:6px 10px;color:#111;background:var(--yellow);border-radius:6px;box-shadow:0 3px 0 #725000}
@media(max-width:700px){.hero{min-height:calc(100vh - 118px)}.hero-art{object-position:62% center}.shade{background:linear-gradient(0deg,#070707,rgba(0,0,0,.76) 64%,rgba(0,0,0,.2))}header{padding:14px 18px}.copy{padding:300px 20px 48px}h1{font-size:clamp(66px,24vw,108px);text-shadow:4px 4px 0 var(--red),7px 7px 0 #000}.intro{font-size:16px}.controls{min-height:118px;gap:12px 18px}}