* { box-sizing: border-box; }
body {
    margin: 0;
    background: radial-gradient(ellipse at top, #203b29, #101410 55%, #0b0d0b);
    color: #f6f2e7;
    font: 1rem/1.6 Arial, sans-serif;
}
main { max-width: 62rem; margin: auto; padding: 1.5rem clamp(1rem, 5vw, 3rem) 3rem; }
nav { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; }
header { margin: 2.5rem 0 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #6c6145; }
h1, h2, .subtitle { font-family: Georgia, serif; line-height: 1.12; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); margin: .35rem 0; }
h2 { font-size: 1.65rem; margin: 0 0 .75rem; }
.eyebrow { color: #e5c77c; letter-spacing: .13em; text-transform: uppercase; }
.subtitle { font-size: clamp(1.45rem, 4vw, 2.4rem); color: #e5c77c; margin: .4rem 0; }
time { color: #d5d1c7; }
a { color: #eed18c; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, video:focus-visible, audio:focus-visible {
    outline: 3px solid #eed18c;
    outline-offset: 4px;
}
.media { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2rem; }
section { margin-bottom: 1.5rem; scroll-margin-top: 1rem; }
video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; background: #000; border-radius: .5rem; }
audio { display: block; width: 100%; }
button {
    color: #171910;
    background: #eed18c;
    border: 0;
    border-radius: .3rem;
    padding: .65rem 1rem;
    min-height: 44px;
    font: inherit;
    cursor: pointer;
}
@media (max-width: 42rem) {
    .media { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
    video { max-width: 22rem; }
}