* { box-sizing: border-box; }
html { background: #0d0e10; color: #f7f4ec; font-family: Arial, Helvetica, sans-serif; font-size: 20px; }
body { margin: 0; }
header, main, footer { width: 90%; max-width: 1120px; margin: 0 auto; }
header { padding: 30px 0 20px; border-bottom: 1px solid #494137; }
.brand { color: #e3bd77; font-weight: bold; letter-spacing: 2px; }
.brand span { display: inline-block; margin-left: 16px; font-size: 14px; color: #d2cec5; }
nav a { display: inline-block; margin: 0 10px 8px 0; padding: 12px 16px; background: #242427; border-radius: 6px; text-decoration: none; }
a { color: #f1cc8a; }
a:focus, button:focus, video:focus { outline: 4px solid #fff; outline-offset: 4px; }
section { padding: 32px 0; border-bottom: 1px solid #494137; }
h1 { font-size: 42px; margin: 12px 0; }
h2 { font-size: 32px; } h3 { font-size: 26px; }
p { line-height: 1.6; color: #dedbd5; }
.eyebrow { font-size: 14px; color: #e3bd77; letter-spacing: 2px; }
video { display: block; width: 100%; height: auto; max-height: 630px; background: #000; }
audio { display: block; width: 100%; max-width: 760px; min-height: 64px; margin: 24px 0; }
#live { min-height: 200px; }
video[id^="highlight"] { height: 540px; }
.cover { max-width: 100%; }
.controls { margin: 18px 0 0; }
button, .direct { display: inline-block; background: #e3bd77; color: #151515; padding: 15px 24px; margin: 0 12px 12px 0; border: 2px solid #e3bd77; border-radius: 6px; font-size: 20px; font-family: inherit; font-weight: bold; cursor: pointer; text-decoration: none; }
button:hover, .direct:hover { background: #ffe0a9; }
.status { min-height: 32px; font-size: 18px; }
article { margin-bottom: 36px; }
footer { padding: 30px 0; line-height: 2; color: #b7b4ac; font-size: 16px; }
@media (max-width: 650px) { html { font-size: 16px; } h1 { font-size: 30px; } h2 { font-size: 26px; } video[id^="highlight"] { height: 230px; } button, .direct { font-size: 16px; padding: 12px 14px; } .brand span { display: block; margin: 10px 0 0; } }