:root {
    color-scheme: dark;
    --ink: #f6f2e7;
    --muted: #b9b7ac;
    --paper: #101719;
    --card: #192225;
    --line: #344044;
    --gold: #dea855
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: radial-gradient(circle at 50% -20%, #394146 0, var(--paper) 47%);
    color: var(--ink);
    font: 16px/1.5 Inter, Segoe UI, Arial, sans-serif
}

.hero {
    position: relative;
    isolation: isolate;
    height: 400px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    text-align: center;
    background: #070b0c
}

/* .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #071012cc, #07101236 48%, #071012c9), linear-gradient(0deg, #101719e8, #10171908 55%)
} */

.hero-poster {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-copy {
    padding: 54px 24px 43px;
    text-shadow: 0 2px 16px #000
}

.hero span {
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gold)
}

h1 {
    font: 600 clamp(46px, 8vw, 86px)/.95 Georgia, serif;
    margin: 15px 0 11px
}

.hero p {
    margin: 0;
    color: var(--muted)
}

main {
    max-width: 1320px;
    margin: auto;
    padding: 30px 24px 70px
}

.catalog-title {
    display: flex;
    align-items: baseline;
    gap: 18px;
    margin: 0 0 22px
}

.catalog-title h1 {
    margin: 0
}

.catalog-title #status {
    min-height: 0;
    text-align: left;
    white-space: nowrap
}

.catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 18px
}

.medal {
    background: linear-gradient(145deg, #202b2e, #141c1e);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 30px #0003
}

.medal img {
    display: block;
    width: 100%;
    height: 245px;
    object-fit: contain;
    background: #0b1011;
    padding: 16px
}

.medal section {
    padding: 17px 18px 19px
}

.text {
    white-space: pre-line;
    font: 600 20px/1.18 Georgia, serif;
    margin: 0 0 15px
}

.unknown {
    color: var(--muted);
    font-style: italic
}

.detail {
    color: var(--muted);
    font-size: 13px;
    margin: 5px 0
}

.detail b {
    color: #e9e4d7;
    font-weight: 600
}

@media(max-width:560px) {
    .hero-copy {
        padding: 40px 18px 32px
    }

    main {
        padding: 22px 15px 50px
    }

    .catalog-title {
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 16px
    }

    .catalog-title #status {
        white-space: normal
    }

    .catalog {
        grid-template-columns: 1fr 1fr;
        gap: 10px
    }

    .medal img {
        height: 170px;
        padding: 8px
    }

    .medal section {
        padding: 12px
    }

    .text {
        font-size: 16px
    }
}

.catalog-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 24px
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.tab,
.sort-control select {
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #182124;
    color: var(--ink);
    font: inherit
}

.tab {
    cursor: pointer;
    padding: 8px 12px;
    transition: border-color .15s, background .15s, color .15s
}

.tab:hover,
.tab:focus-visible {
    border-color: var(--gold)
}

.tab.is-active {
    border-color: var(--gold);
    background: var(--gold);
    color: #152023
}

.tab span {
    display: inline-grid;
    place-items: center;
    min-width: 21px;
    height: 21px;
    margin-left: 5px;
    border-radius: 50%;
    background: #ffffff1a;
    font-size: 12px
}

.tab.is-active span {
    background: #1821242e
}

.sort-control {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    white-space: nowrap
}

.sort-control select {
    padding: 8px 28px 8px 11px
}

.empty-state {
    grid-column: 1 / -1;
    margin: 30px 0;
    color: var(--muted);
    text-align: center
}

@media(max-width:560px) {
    .catalog-controls {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 18px
    }
}