* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --background: #f2f5f1;
    --surface: #fbfcf9;
    --text: #17211d;
    --muted: #67736d;
    --border: #d3dcd6;
    --accent: #d8f25b;
    --mono: "IBM Plex Mono", "Courier New", monospace;
    --sans: "IBM Plex Sans", "Segoe UI", sans-serif;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--background);
    color: var(--text);
    font-family: var(--sans);
}

.topbar {
    min-height: 72px;
    padding: 0 max(6vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.brand {
    color: var(--text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
}

.brand span {
    color: #819c24;
}

.topbar-note {
    display: flex;
    align-items: center;
    gap: 28px;
    color: var(--muted);
    font: 11px var(--mono);
}

main {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 72px 24px;
}

.resource {
    width: min(1030px, 100%);
    margin: 0 auto;
    border-top: 2px solid var(--text);
}

.resource-heading {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

.eyebrow,
.resource-number {
    font: 11px var(--mono);
}

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

.eyebrow span {
    padding: 0 5px;
    color: #819c24;
}

.resource-number {
    color: var(--muted);
}

.resource-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(270px, 0.75fr);
    gap: 10%;
    padding: 58px 0 64px;
}

.resource-info h1 {
    max-width: 600px;
    font-size: 72px;
    line-height: 0.98;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.resource-info p {
    max-width: 390px;
    margin-top: 22px;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.6;
}

.download {
    width: fit-content;
    min-height: 52px;
    margin-top: 32px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    gap: 36px;
    background: var(--accent);
    color: var(--text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 140ms ease;
}

.download:hover,
.download:focus-visible {
    background: #c8e348;
}

.arrow {
    font-size: 20px;
}

.file-details {
    align-self: start;
    margin-top: 12px;
    border-top: 1px solid var(--border);
}

.file-heading {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font: 11px var(--mono);
}

.file-type {
    padding: 5px 7px;
    background: var(--accent);
    color: var(--text);
}

.file-name {
    padding: 18px 0 22px;
    border-bottom: 1px solid var(--border);
    font: 16px var(--mono);
    overflow-wrap: anywhere;
}

.file-meta > div {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.file-meta dt {
    color: var(--muted);
}

.file-meta dd {
    text-align: right;
}

footer {
    min-height: 62px;
    padding: 0 max(6vw, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font: 10px var(--mono);
}

footer .footer-divider {
    padding: 0 5px;
    color: #819c24;
}

@media (max-width: 700px) {
    main {
        padding: 54px 24px;
    }

    .resource-grid {
        grid-template-columns: 1fr;
        gap: 48px;
        padding: 42px 0 48px;
    }

    .resource-info h1 {
        max-width: 100%;
        font-size: 56px;
    }

    .file-details {
        max-width: 460px;
        width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 420px) {
    .topbar {
        min-height: 64px;
        padding: 0 18px;
    }

    .topbar-note {
        gap: 12px;
        font-size: 9px;
    }

    main {
        padding: 42px 18px;
    }

    .resource-info h1 {
        font-size: 48px;
    }

    footer {
        padding: 14px 18px;
        gap: 10px;
        font-size: 8px;
    }
}