/* Site shell: header, navigation, page grid, footer. */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-gutter);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-chrome);
    color: var(--color-chrome-text);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    min-height: var(--size-header);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-chrome-text);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-xl);
    flex-shrink: 0;
}

.brand:hover {
    color: var(--color-chrome-text);
}

.brand__mark {
    width: var(--size-control);
    height: var(--size-control);
}

.site-nav {
    display: flex;
    gap: var(--space-1);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    min-height: var(--size-control);
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-chrome-muted);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.site-nav a:hover {
    background: var(--color-chrome-raised);
    color: var(--color-chrome-text);
}

.site-nav a[aria-current="page"] {
    background: var(--color-chrome-raised);
    color: var(--color-chrome-text);
    box-shadow: inset 0 calc(var(--border-width-strong) * -1) 0 var(--color-accent);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.site-header__search {
    flex: 1;
    max-width: var(--size-search-max);
    margin-inline: auto;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-12);
    padding-block: var(--space-8);
}

.hero__text { display: grid; justify-items: start; gap: var(--space-4); max-width: var(--size-form); }
.hero .mascot { justify-self: center; }
.hero h1 { font-size: var(--text-3xl); }
.hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--measure); }

.site-main {
    flex: 1;
    padding-block: var(--space-8) var(--space-16);
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.page-head__lead {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
}

.section + .section {
    margin-top: var(--space-12);
}

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

/* Card grids: 4 columns from 1280 px wide, fewer on narrow screens. */
.grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min), 1fr));
}

.grid--tiles {
    grid-template-columns: repeat(auto-fill, minmax(var(--size-tile-min), 1fr));
    gap: var(--space-3);
}

.grid--tight {
    grid-template-columns: repeat(auto-fill, minmax(var(--size-card-min-tight), 1fr));
    gap: var(--space-4);
}

.stack > * + * { margin-top: var(--space-4); }
.stack--lg > * + * { margin-top: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Studio: side menu and page. */
.studio {
    display: grid;
    grid-template-columns: var(--size-studio-nav) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.studio__main { min-width: 0; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--size-card-min-tight), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

/* Studio chat: the chat and the list of bans side by side. */
.studio-chat {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--size-aside);
    gap: var(--space-6);
    align-items: start;
}

/* Watch page: player and chat side by side. */
.watch {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--chat-width);
    gap: var(--space-6);
    /* The chat stretches to the height of the player column (see .chat). */
    align-items: stretch;
}

.site-footer {
    background: var(--color-chrome);
    color: var(--color-chrome-muted);
    font-size: var(--text-sm);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-8);
}

.site-footer a {
    color: var(--color-chrome-text);
}

.site-footer a:hover {
    color: var(--color-accent);
}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
}

/* Touch target of at least 24 px (WCAG 2.2, 2.5.8). */
.site-footer__links a {
    display: inline-block;
    padding-block: var(--space-1);
}

@media (max-width: 64rem) {
    .studio { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
    .studio-chat { grid-template-columns: minmax(0, 1fr); }
    .hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .hero .mascot { order: -1; width: min(var(--mascot-size), 70%); }

    .watch {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-header__search {
        display: none;
    }
}

@media (max-width: 40rem) {
    .site-header__inner {
        flex-wrap: wrap;
        padding-block: var(--space-2);
        gap: var(--space-2) var(--space-4);
    }

    .site-header__inner > nav {
        order: 3;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
    }

    .page-head {
        flex-direction: column;
        align-items: flex-start;
    }

    h1 { font-size: var(--text-2xl); }
}

/* Recording page: the video, then the text under it. */
.recording {
    display: grid;
    gap: var(--space-6);
    max-width: var(--size-recording);
}

.recording__title { font-size: var(--text-2xl); }

/* Tabs of a channel page sit between the header and the content. */
.channel-tabs { margin-bottom: var(--space-6); }