@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Rye&display=swap');

:root {
    --brown: #3a210f;
    --brown-dark: #281609;
    --cream: #f7f0dc;
    --paper: #fbf7ea;
    --gold: #b88a2e;
    --ink: #20180f;
    --line: #bba777;
    --muted: #625849;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    font-family: Georgia, "Times New Roman", serif;

    background-color: #efe7d2;

    background-image:
        repeating-linear-gradient(
            90deg,
            rgba(91,66,35,.055) 0,
            rgba(91,66,35,.055) 1px,
            transparent 1px,
            transparent 5px
        );
}

img {
    max-width: 100%;
    display: block;
}

button,
input,
select {
    font: inherit;
}


/* ============================================================
   HEADER
============================================================ */

.masthead {
    width: min(1170px, calc(100% - 28px));
    min-height: 176px;

    margin: 0 auto;
    padding: 12px 70px;

    display: grid;

    grid-template-columns:
        165px
        minmax(360px, 1fr)
        135px
        205px;

    gap: 20px;
    align-items: center;

    color: #f4d88d;

    background:
        radial-gradient(
            circle at 50% 45%,
            #5b361d 0,
            #432612 47%,
            #2c180b 100%
        );

    border-left: 1px solid #d9c47e;
    border-right: 1px solid #d9c47e;

    box-shadow:
        inset 0 -3px 0 #cda84f;
}

.mast-copy {
    color: #f4d88d;

    font:
        700 21px/1.18
        Oswald,
        Arial,
        sans-serif;

    letter-spacing: .12em;
}

.mast-copy-left {
    transform: skewY(-5deg);
}

.mast-copy-right {
    text-align: center;
    font-size: 14px;
    line-height: 1.45;
}

.mast-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mast-logo img {
    width: 100%;
    max-width: 520px;
    height: auto;
}

.mast-mascot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mast-mascot img {
    width: 125px;
    height: 125px;

    object-fit: cover;

    border-radius: 8px;
}


/* ============================================================
   REGISTRATION BAR
============================================================ */

.registration-bar {
    width: min(1170px, calc(100% - 28px));

    min-height: 31px;

    margin: 0 auto 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 28px;

    color: #f8edd1;
    background: var(--brown);

    border-top: 3px solid #d6b55c;
    border-bottom: 3px solid #d6b55c;

    font:
        400 13px
        Oswald,
        Arial,
        sans-serif;

    letter-spacing: .28em;
}

.registration-bar span {
    color: #e2b74e;
}


/* ============================================================
   MAIN PAGE
============================================================ */

.page-grid {
    width: min(1195px, calc(100% - 20px));

    margin: 0 auto;

    padding: 0 8px 10px;

    display: grid;

    grid-template-columns:
        minmax(0, 2.55fr)
        minmax(285px, 1fr);

    background:
        rgba(255,252,241,.75);

    border: 1px solid #c7b47e;
}

.main-column {
    padding: 8px 12px 0 8px;

    border-right:
        1px solid #c7b47e;
}

.sidebar {
    padding:
        8px 8px 0 12px;
}


/* ============================================================
   HEADINGS
============================================================ */

.rule-heading {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rule-heading h1,
.rule-heading h2 {
    flex: 0 0 auto;

    margin: 0;

    font:
        400 35px/1
        Rye,
        Georgia,
        serif;
}

.rule-heading h2 {
    font-size: 30px;
}

.rule-heading span {
    height: 5px;

    flex: 1;

    border-top:
        2px solid #352618;

    border-bottom:
        1px solid #352618;
}


/* ============================================================
   INTRO
============================================================ */

.intro {
    padding:
        3px 5px 13px;
}

.intro p {
    margin:
        5px 0;

    font-size: 14px;
}

.hero-copy {
    font-size: 15px !important;
}


/* ============================================================
   BROWN SECTION BARS
============================================================ */

.uniform-box,
.size-guide {
    overflow: hidden;

    border:
        1px solid #a98538;

    border-radius: 5px;

    background:
        rgba(255,255,255,.32);

    box-shadow:
        0 1px 2px rgba(0,0,0,.12);
}

.brown-titlebar {
    min-height: 43px;

    padding:
        6px 15px;

    display: flex;
    align-items: center;

    gap: 13px;

    color:
        #fff7df;

    background:
        linear-gradient(
            #4b2c16,
            #321b0d
        );

    border-bottom:
        3px solid #c39a45;
}

.brown-titlebar > span {
    color:
        #e4bd58;

    font-size: 18px;
}

.brown-titlebar h2 {
    margin: 0;

    white-space: nowrap;

    font:
        400 21px
        Rye,
        Georgia,
        serif;
}

.brown-titlebar p {
    margin:
        0 0 0 auto;

    font:
        600 10px/1.35
        Oswald,
        Arial,
        sans-serif;

    letter-spacing: .08em;
}


/* ============================================================
   UNIFORM
============================================================ */

.uniform-grid {
    display: grid;

    grid-template-columns:
        1.3fr
        1.05fr
        .82fr;

    gap: 8px;

    padding: 8px;
}

.uniform-grid figure {
    margin: 0;

    text-align: center;
}

.uniform-grid figure img {
    width: 100%;
    height: 224px;

    object-fit: cover;

    background: #fff;

    border:
        1px solid #c8c2b4;
}

.uniform-grid figure:first-child img {
    object-fit: contain;
}

.uniform-grid figure:nth-child(3) img {
    object-fit: contain;
    padding: 12px;
}

.uniform-grid figcaption {
    padding:
        5px 3px 0;
}

.uniform-grid figcaption strong {
    display: block;

    font:
        700 13px
        Oswald,
        Arial,
        sans-serif;

    letter-spacing: .04em;
}

.uniform-grid figcaption span {
    display: block;

    font-size: 12px;
    line-height: 1.15;
}


/* ============================================================
   FORM
============================================================ */

.builder {
    padding:
        13px 0 10px;
}

.builder > p {
    margin:
        3px 0 10px;

    font-size: 15px;
}

.order-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        13px 20px;
}

.field label {
    display: block;

    margin-bottom: 4px;

    font:
        700 12px
        Arial,
        sans-serif;
}

.field input,
.field select {
    width: 100%;
    height: 35px;

    padding:
        5px 11px;

    border:
        1px solid #9f9f9f;

    background: #fff;

    border-radius: 2px;

    font:
        14px Arial,
        sans-serif;
}

.field input:focus,
.field select:focus {
    outline:
        2px solid rgba(184,138,46,.25);

    border-color:
        #735020;
}

.counter {
    margin-top: 3px;

    text-align: right;

    font:
        11px Arial,
        sans-serif;
}

.size-link {
    margin-top: 5px;
    padding: 0;

    border: 0;

    background: none;

    color: #6e4b24;

    cursor: pointer;

    text-decoration: underline;

    font:
        11px Georgia,
        serif;
}

.full {
    grid-column:
        1 / -1;
}

.sign-button {
    width: 100%;
    height: 46px;

    border: 0;

    border-radius: 2px;

    color:
        #fff4d7;

    background:
        linear-gradient(
            #4a2a14,
            #321a0c
        );

    cursor: pointer;

    font:
        400 17px
        Oswald,
        Arial,
        sans-serif;

    letter-spacing: .25em;
}

.sign-button:hover {
    filter:
        brightness(1.12);
}

.flash {
    margin:
        7px 0;

    padding:
        9px 12px;

    background:
        #fff1e9;

    border-left:
        4px solid #9b2d20;

    font:
        13px Arial,
        sans-serif;
}


/* ============================================================
   SIZE GUIDE
============================================================ */

.size-guide {
    margin-top: 2px;
}

.size-title p {
    margin-left: 8px;
    margin-right: auto;

    color:
        #e4bd58;

    font-size: 9px;

    letter-spacing: .12em;
}

.size-title button {
    margin-left: auto;

    border: 0;

    background: none;

    color:
        #e9c35c;

    cursor: pointer;

    font-size: 27px;
}

.size-content {
    display: grid;

    grid-template-columns:
        1fr 1.25fr;

    gap: 20px;

    align-items: center;

    padding:
        9px 14px 3px;
}

.measure {
    display: grid;

    grid-template-columns:
        110px 1fr;

    gap: 8px;

    align-items: center;
}

.measure img {
    width: 105px;
    height: 95px;

    object-fit: contain;
}

.measure strong,
.size-table-block > strong {
    font:
        700 12px
        Arial,
        sans-serif;
}

.measure p {
    margin:
        3px 0;

    font-size: 11px;

    line-height: 1.25;
}

.size-table {
    width: 100%;

    margin-top: 3px;

    border-collapse: collapse;

    font:
        11px Arial,
        sans-serif;
}

.size-table th,
.size-table td {
    padding: 6px;

    border:
        1px solid #b69a68;

    text-align: center;
}

.size-table thead th {
    background:
        #3a210f;

    color: #fff;
}

.size-table tbody th {
    background:
        #e4d4a7;
}

.size-note {
    margin:
        1px 12px 7px;

    color:
        #5c554b;

    text-align: right;

    font:
        9px Arial,
        sans-serif;
}


/* ============================================================
   ROSTER
============================================================ */

.roster-panel {
    border:
        1px solid #9e7e42;
}

.sidebar-title {
    padding:
        9px 10px;

    display: flex;

    justify-content:
        space-around;

    color:
        #fff3d4;

    background:
        linear-gradient(
            #4b2b15,
            #321b0d
        );

    font:
        400 18px
        Rye,
        Georgia,
        serif;
}

.sidebar-title span {
    color:
        #e2b74e;
}

.roster {
    width: 100%;

    border-collapse: collapse;
}

.roster th,
.roster td {
    height: 35px;

    padding:
        7px 12px;

    border-right:
        1px solid #bcae8e;

    border-bottom:
        1px solid #bcae8e;

    text-align: left;
}

.roster th {
    background:
        #e4dbc6;

    font:
        700 11px
        Arial,
        sans-serif;
}

.roster th:first-child,
.roster td:first-child {
    width: 70px;

    text-align: center;
}

.roster td {
    font:
        700 13px
        Oswald,
        Arial,
        sans-serif;
}

.roster tbody tr:nth-child(even) td {
    background:
        rgba(210,201,182,.45);
}

.roster-count {
    padding:
        10px 4px;

    text-align: center;

    font:
        600 11px
        Oswald,
        Arial,
        sans-serif;

    letter-spacing: .08em;
}


/* ============================================================
   BALLPARK
============================================================ */

.ballpark-panel {
    margin-top: 10px;

    border:
        1px solid #a18a5c;

    background:
        #f3ead1;
}

.ballpark-image {
    display: block;

    width: 100%;
    height: auto;

    border-bottom:
        1px solid #8f764c;
}


/* ============================================================
   SIDEBAR CTA
============================================================ */

.cta {
    padding:
        16px 16px 18px;

    text-align: center;
}

.cta h3 {
    margin: 0;

    font:
        400 19px/1.35
        Rye,
        Georgia,
        serif;
}

.cta-mascot {
    width: 55px;
    height: 55px;

    margin:
        8px auto 10px;

    overflow: hidden;
}

.cta-mascot img {
    width: 55px;
    height: 55px;

    object-fit: cover;

    border-radius: 4px;
}

.cta a {
    display: block;

    max-width: 225px;

    margin: 0 auto;

    padding: 10px;

    color:
        #fff1cf;

    background:
        #3a210f;

    border:
        4px double #f0dfb5;

    text-decoration: none;

    font:
        400 17px
        Rye,
        Georgia,
        serif;
}


/* ============================================================
   FOOTER
============================================================ */

.footer {
    min-height: 41px;

    padding:
        11px 20px 8px;

    text-align: center;

    color:
        #e9dcc0;

    background:
        #321b0d;

    border-top:
        4px solid #b98d37;

    font:
        400 9px
        Oswald,
        Arial,
        sans-serif;

    letter-spacing: .16em;
}

.footer > span {
    color:
        #e0b64e;

    padding:
        0 8px;
}

.rr-reveal {
    margin-top: 6px;

    opacity: .55;

    font-size: 7px;
}

.rr-reveal a {
    color: inherit;

    text-decoration: none;
}


[hidden] {
    display: none !important;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 850px) {

    .masthead {
        grid-template-columns:
            minmax(0, 1fr)
            105px;

        gap: 15px;

        min-height: auto;

        padding:
            18px 25px;
    }

    .mast-copy {
        display: none;
    }

    .mast-logo img {
        max-width: 570px;
    }

    .mast-mascot img {
        width: 100px;
        height: 100px;
    }

    .registration-bar {
        gap: 10px;

        padding:
            5px 10px;

        font-size: 10px;

        letter-spacing: .12em;
    }

    .page-grid {
        grid-template-columns:
            1fr;
    }

    .main-column {
        padding: 10px;

        border-right: 0;
    }

    .sidebar {
        padding: 10px;
    }
}


@media (max-width: 620px) {

    .rule-heading h1,
    .rule-heading h2 {
        font-size: 26px;
    }

    .uniform-grid {
        grid-template-columns:
            1fr;
    }

    .uniform-grid figure img {
        height: auto;

        max-height: 330px;
    }

    .order-grid,
    .size-content {
        grid-template-columns:
            1fr;
    }

    .measure {
        grid-template-columns:
            100px 1fr;
    }

    .brown-titlebar {
        flex-wrap: wrap;
    }

    .brown-titlebar p {
        width: 100%;

        margin: 0;
    }

    .size-table-block {
        overflow-x: auto;
    }

    .size-table {
        min-width: 430px;
    }
}


@media (max-width: 520px) {

    .masthead {
        grid-template-columns:
            minmax(0, 1fr)
            72px;

        gap: 7px;

        padding: 12px;
    }

    .mast-mascot img {
        width: 70px;
        height: 70px;
    }

    .registration-bar {
        font-size: 9px;

        letter-spacing: .07em;
    }
}