:root {
    
    --navy: #082846;
    --blue: #07549a;
    --bright-blue: #25aee4;
    --purple: #412486;
    --red: #c9242b;
    --line: #c9d5df;
    --muted: #607184;
    --page: #edf2f6;
    --white: #ffffff;
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    background: #edf2f6;
    color: #17324a;
    font: 14px Arial, sans-serif
}

.site-header {
    min-height: 124px;
    padding: 13px max(25px, calc((100vw - 1180px)/2));
    display: grid;
    grid-template-columns: 150px 1fr 150px;
    gap: 24px;
    align-items: center;
    text-align: center;
    background: var(--blue);
    color: #fff
}

.heading h1 {
    margin: 0;
    font-size: clamp(20px, 3vw, 35px)
}

.heading p {
    margin: 7px 0 0;
    font-size: 18px
}

.logo-panel {
    width: 126px;
    height: 96px;
    padding: 7px;
    background: #fff;
    border-radius: 6px
}

.logo-panel img,
.nationals-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.nationals-logo {
    width: 108px;
    height: 90px;
    margin-left: auto;
    border: 3px solid #fff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #063d72
}

.nationals-logo b {
    font-size: 30px
}

.nationals-logo small {
    letter-spacing: .12em
}

.nationals-logo em {
    font-style: normal
}

.brand-rule {
    height: 5px;
    background: linear-gradient(90deg, #25aee4 50%, #412486 50%)
}

.toolbar {
    background: #fff;
    border-bottom: 1px solid var(--line)
}

.display-options {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center
}

.display-options span {
    margin-right: 8px;
    font-weight: bold
}

.display-options button {
    padding: 6px 11px;
    border: 1px solid #acbbc8;
    background: #fff;
    cursor: pointer
}

.display-options .selected {
    background: var(--navy);
    color: #fff
}

.toolbar nav,
.subnav {
    max-width: 1180px;
    margin: auto;
    display: flex;
    overflow: auto
}

.toolbar nav a,
.subnav a {
    padding: 12px 11px 10px;
    white-space: nowrap;
    text-decoration: none;
    font: 600 14px "Segoe UI", Aptos, sans-serif;
    color: var(--navy)
}

.champions {
    margin-left: auto !important;
    background: var(--navy);
    color: #fff !important
}

.champion-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.champion-card {
    min-height: 114px;
    margin: 0;
    padding: 17px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    background: var(--white);
    border: 1px solid #b7c6d3;
    border-top: 3px solid var(--bright-blue);
    border-radius: 6px;
}

.champion-medal {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e9f5fc;
    color: #0877bc;
    font-size: 20px;
}

.champion-card h3 {
    margin: 4px 0 3px;
    color: var(--navy);
    font-size: 18px;
}

.champion-card p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
}

.champion-card > b {
    color: var(--navy);
    white-space: nowrap;
}

.champions-intro {
    margin: 0 0 38px;
    text-align: center;
}

.champions-intro small,
.section-heading small,
.champion-card small {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.champions-intro small {
    color: var(--red);
}

.champions-intro h2 {
    margin: 6px 0 8px;
    color: var(--navy);
    font-size: 38px;
}

.champion-section {
    margin: 0 0 44px;
}

.content {
    max-width: 1180px;
    margin: auto;
    padding: 20px 20px 30px
}

.notice {
    padding: 10px 13px;
    border-left: 4px solid var(--blue);
    background: #e6eff7
}

.section-title,
.detail-title {
    display: flex;
    justify-content: space-between;
    align-items: end
}

.section-title h2,
.detail-title h2 {
    font-size: 32px;
    color: var(--navy)
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 15px;
}

.section-heading > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 42px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--white);
    font-weight: 800;
}

.section-heading small,
.champion-card small {
    color: var(--blue);
}

.section-heading h2 {
    margin: 1px 0 0;
    color: var(--navy);
    font-size: 25px;
}

.event-card {
    margin: 0 0 20px;
    background: #fff;
    border: 1px solid #b7c6d3;
    border-radius: 6px;
    overflow: hidden
}

.event-heading {
    padding: 14px 17px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f6f9
}

.event-heading a {
    font-size: 20px;
    font-weight: bold;
    color: #0750a0
}

.event-heading time {
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px solid #9aaab7
}

.event-heading strong,
.detail-title>strong {
    color: #15713a;
    border: 2px solid #15713a;
    padding: 5px 8px;
    border-radius: 5px
}

.result-header,
.result-row {
    display: grid;
    grid-template-columns: 70px minmax(240px, 2fr) 85px minmax(145px, 1fr) minmax(100px, 1fr);
    gap: 13px;
    align-items: center
}

.result-header {
    min-height: 40px;
    padding: 0 17px;
    background: #eaf0f5;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase
}

.result-row {
    min-height: 58px;
    padding: 7px 17px;
    border-top: 1px solid #e0e6ec
}

.person,
.score {
    display: flex;
    flex-direction: column
}

.person small,
.score small {
    color: var(--muted)
}

.place {
    width: 30px;
    height: 30px;
    border: 1px solid #9aa8b4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center
}

.p1 {
    background: #f2c24a
}

.p2 {
    background: #d9e0e5
}

.p3 {
    background: #ca9065
}

.empty,
.unofficial,
.error {
    padding: 18px
}

.subnav {
    background: #fff
}

.detail-title small {
    color: var(--red);
    font-weight: bold
}

footer {
    padding: 18px max(20px, calc((100vw - 1140px)/2));
    display: flex;
    justify-content: space-between;
    background: var(--navy);
    color: #fff
}

footer a {
    color: #fff
}

@media(max-width:760px) {
    .site-header {
        grid-template-columns: 82px 1fr 72px
    }

    .logo-panel {
        width: 76px;
        height: 70px
    }

    .nationals-logo {
        width: 66px;
        height: 64px
    }

    .result-header {
        display: none
    }

    .result-row {
        grid-template-columns: 42px 1fr 75px 90px
    }

    .result-row>span:last-child {
        display: none
    }
    
    .champion-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:500px) {
    .site-header {
        grid-template-columns: 66px 1fr
    }

    .nationals-logo {
        display: none
    }

    .heading {
        text-align: left
    }

    .result-row {
        grid-template-columns: 38px 1fr 80px
    }

    .result-row>b {
        display: none
    }
    
     .champions-intro h2 {
        font-size: 30px;
    }

    .champion-card {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .champion-card > b {
        grid-column: 2;
    }
}