:root {
    --ink: #161616;
    --paper: #f8f8f8;
    --tint: #f1f1f1;
    --accent: #ff6436;
    --strong: #3c3a3e;
    --muted: #7b7a7c;
    --border: #c9c7cc;
    font-family: Arial, system-ui, sans-serif
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--strong)
}

header,
main,
footer {
    max-width: 1180px;
    margin: auto;
    padding: 28px 5vw
}

header {
    border-bottom: 1px solid var(--border)
}

.brand {
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: .1em
}

.eyebrow,
.label {
    font: 12px ui-monospace, monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin-top: 28px;
    padding-bottom: 3px
}

.chip,
.btn {
    border: 0;
    border-radius: 999px;
    padding: 11px 17px;
    font: inherit;
    cursor: pointer;
    white-space: nowrap
}

.chip {
    background: var(--tint);
    color: var(--ink)
}

.chip.active {
    background: var(--ink);
    color: white
}

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

.card {
    border: 1px solid var(--border);
    background: white;
    text-align: left;
    cursor: pointer
}

.card img {
    display: block;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover
}

.card-body {
    padding: 16px
}

.card h2 {
    font-size: 1.15rem;
    margin: 7px 0
}

.muted {
    color: var(--muted)
}

.detail {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
    gap: 36px
}

.viewer {
    position: relative;
    border: 1px solid var(--border);
    background: white
}

.viewer img {
    display: block;
    width: 100%;
    max-height: 70vh;
    object-fit: contain;
    aspect-ratio: 4/3
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 1px solid var(--border);
    background: white;
    font-size: 1.4rem;
    padding: 9px 14px;
    cursor: pointer
}

.prev {
    left: 12px
}

.next {
    right: 12px
}

.btn {
    display: inline-block;
    background: var(--accent);
    color: var(--ink);
    text-decoration: none;
    margin: 8px 5px 0 0
}

.verify, .validity {
    border-top: 1px solid var(--border);
    margin-top: 24px;
    padding-top: 18px
}

.copy {
    background: var(--ink);
    color: #fff
}

.drive {
    color: var(--ink)
}

footer {
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: .85rem
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px
}

@media(max-width:700px) {
    .detail {
        grid-template-columns: 1fr;
        gap: 20px
    }

    header,
    main,
    footer {
        padding: 22px 5vw
    }

    footer {
        display: block
    }

    footer span {
        display: block;
        margin: 5px 0
    }
}