:root {
    --void: #070605;
    --panel: #12100e;
    --gold: #c9a45c;
    --copper: #d4784a;
    --brass: #e4c078;
    --cream: #efe4d4;
    --muted: #9a8d7c;
    --display: "Cinzel", "Times New Roman", serif;
    --sans: "Outfit", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(201, 164, 92, 0.1), transparent 46%),
        var(--void);
    color: var(--cream);
    font-family: var(--sans);
    line-height: 1.6;
    color-scheme: dark;
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    opacity: .06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.shell {
    width: min(1120px, calc(100% - 2.4rem));
    margin: 0 auto;
    padding: 4.2rem 0 3.4rem;
}

.shell__header {
    text-align: center;
    margin-bottom: 2.6rem;
}

.eyebrow {
    margin: 0 0 .7rem;
    letter-spacing: .32em;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 500;
    color: var(--gold);
}

.eyebrow i { margin-right: .35rem; }

.shell__header h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    letter-spacing: .06em;
    color: var(--gold);
}

.rule {
    display: block;
    width: 7.5rem;
    height: 1px;
    margin: 1.1rem auto 1.15rem;
    background: var(--gold);
    position: relative;
}

.rule::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border: 1px solid var(--gold);
    transform: rotate(45deg);
    background: var(--void);
}

.lead {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--muted);
}

.picker {
    position: relative;
    height: 100%;
    padding: 1.25rem 1.25rem 0;
    background: var(--panel);
    border: 1px solid rgba(201, 164, 92, 0.28);
    border-top: 2px solid var(--gold);
    border-radius: .15rem;
    text-align: center;
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.picker:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .45), 0 0 0 1px rgba(201, 164, 92, .2);
}

.picker--copper { border-top-color: var(--copper); }
.picker--copper:hover { border-color: var(--copper); box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .45), 0 0 0 1px rgba(212, 120, 74, .25); }
.picker--brass { border-top-color: var(--brass); }
.picker--brass:hover { border-color: var(--brass); box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, .45), 0 0 0 1px rgba(228, 192, 120, .25); }

.picker .pill {
    display: inline-block;
    margin-bottom: .7rem;
    padding: .28rem .7rem;
    border: 1px solid rgba(201, 164, 92, 0.35);
    border-radius: 999px;
    background: transparent;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}

.picker--copper .pill { border-color: rgba(212, 120, 74, .4); color: var(--copper); }
.picker--brass .pill { border-color: rgba(228, 192, 120, .4); color: var(--brass); }

.picker h2 {
    margin: 0 0 .45rem;
    font-family: var(--display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--cream);
}

.picker p {
    margin: 0 0 1.1rem;
    color: var(--muted);
    font-size: .92rem;
}

.picker__media {
    margin: 0 -1.25rem;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-top: 1px solid rgba(201, 164, 92, 0.16);
}

.picker__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 1.1s ease;
}

.picker:hover .picker__media img { transform: scale(1.06); }

.stretched-link::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    content: "";
}

footer {
    padding: 0 1.2rem 2.4rem;
    text-align: center;
    color: var(--muted);
    font-size: .92rem;
}

footer em { color: var(--gold); font-style: italic; }

@media (prefers-reduced-motion: reduce) {
    .picker, .picker__media img { transition: none; }
    .picker:hover { transform: none; }
    .picker:hover .picker__media img { transform: none; }
}