:root {
    color-scheme: dark;
    --red: #d71920;
    --red-bright: #ff3038;
    --panel: #0b0b0b;
    --muted: #b8b8b8;
}

* { box-sizing: border-box; }
html { background: #000; }

body {
    margin: 0;
    background: #000;
    color: #fff;
    font: 15px/1.65 Verdana, Arial, sans-serif;
}

a { color: #fff; }
a:hover, a:focus-visible { color: var(--red-bright); }

.site-shell {
    width: min(100%, 850px);
    min-height: 100vh;
    margin: 0 auto;
    background: var(--panel);
    box-shadow: 0 0 40px rgba(215, 25, 32, .16);
}

.hero {
    position: relative;
    display: grid;
    min-height: clamp(320px, 70vw, 600px);
    place-items: end center;
    overflow: hidden;
    background: #050505 url("logo.jpg") center top / cover no-repeat;
}

.hero::after {
    position: absolute;
    inset: 45% 0 0;
    content: "";
    background: linear-gradient(transparent, rgba(0, 0, 0, .92));
}

.hero-title {
    position: relative;
    z-index: 1;
    display: grid;
    padding: 24px;
    text-align: center;
    text-shadow: 0 2px 12px #000;
}

.hero-title span { color: var(--red); font-size: clamp(2rem, 8vw, 4.5rem); font-weight: 900; letter-spacing: .12em; }
.hero-title h1 { margin: 0; font-size: clamp(1.4rem, 5vw, 2.8rem); font-style: italic; }
.hero-title small { color: var(--muted); letter-spacing: .5em; }

.main-nav {
    position: sticky;
    z-index: 2;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    border-block: 1px solid #2b2b2b;
    background: rgba(0, 0, 0, .96);
}

.main-nav a {
    padding: 9px 14px;
    border-radius: 3px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
}

.main-nav a[aria-current="page"] { background: var(--red); color: #fff; }

.content {
    min-height: 260px;
    padding: clamp(22px, 6vw, 48px);
    overflow-wrap: anywhere;
    text-align: center;
}

.content img, .content iframe { max-width: 100%; }
.content iframe { border: 0; }

.media-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
}

.media-list h2 { grid-column: 1 / -1; color: var(--red-bright); }

.media-list a {
    display: grid;
    align-content: center;
    min-height: 100px;
    padding: 18px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #111;
    font-weight: 700;
    text-decoration: none;
}

.media-list a:hover, .media-list a:focus-visible { border-color: var(--red); }
.media-list small { color: var(--muted); font-weight: 400; }

.site-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    padding: 20px;
    border-top: 1px solid #333;
    color: var(--muted);
    font-size: .75rem;
    text-align: center;
}

.site-footer a { color: #fff; font-weight: 700; }

@media (max-width: 560px) {
    .main-nav a { padding-inline: 9px; font-size: .73rem; }
    .content { font-size: 14px; }
}