:root {
    /* =========================================================
       TRUCK'N THRU PINS
       DARK GRAY / BLUE / RED THEME
       ========================================================= */

    --ink: #20252a;
    --muted: #66717c;

    --background: #343a40;
    --background-dark: #292e33;

    --paper: #ffffff;
    --paper-alt: #f1f3f5;

    --blue: #1769aa;
    --blue-light: #2d8fd5;
    --blue-dark: #0d4775;

    --red: #c62828;
    --red-light: #e53935;
    --red-dark: #8e1b1b;

    --line: #c5ccd3;

    --shadow:
        0 12px 30px rgba(0, 0, 0, .30);

    --radius: 22px;
}


/* =========================================================
   LOGO
   ========================================================= */

.brand img {
    height: 58px;
    width: auto;
    display: block;
}

@media (max-width: 800px) {
    .brand img {
        height: 48px;
    }
}


/* =========================================================
   BASIC PAGE RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #f1f3f5;

    background:
        var(--background);

    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: min(1120px, 92%);
    margin: auto;
}


/* =========================================================
   STICKY HEADER & NAVIGATION
   ========================================================= */

header {
    position: sticky;
    top: 0;
    z-index: 20;

    background:
        rgba(41, 46, 51, .97);

    backdrop-filter: blur(10px);

    border-bottom:
        2px solid var(--blue);
}

.nav {
    min-height: 76px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}

.brand {
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: .3px;
}

.brand span {
    color: var(--red);
}

nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

nav a {
    padding: 10px 13px;

    border-radius: 12px;

    font-weight: 700;

    color: #f1f3f5;
}

nav a:hover {
    background: var(--blue);
    color: #ffffff;
}

nav a.active {
    background: var(--red);
    color: #ffffff;
}

.menu {
    display: none;

    border: 0;

    background: none;

    font-size: 1.8rem;

    cursor: pointer;

    color: #ffffff;
}


/* =========================================================
   HOME PAGE HERO
   ========================================================= */

.hero {
    padding: 78px 0 65px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(45, 143, 213, .35) 0,
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #343a40,
            #252a2f
        );
}

.hero-grid {
    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    gap: 45px;

    align-items: center;
}

.kicker {
    display: inline-block;

    background:
        var(--blue);

    color: #ffffff;

    border-radius: 999px;

    padding: 7px 13px;

    font-weight: 800;

    font-size: .85rem;
}

h1 {
    font-size:
        clamp(
            2.7rem,
            6vw,
            5.4rem
        );

    line-height: .98;

    margin: 18px 0;

    color: #ffffff;
}

.hero p {
    font-size: 1.15rem;

    color: #d6dce1;

    max-width: 650px;
}

.buttons {
    display: flex;

    gap: 12px;

    flex-wrap: wrap;

    margin-top: 26px;
}

.btn {
    display: inline-block;

    padding: 13px 18px;

    border-radius: 14px;

    font-weight: 900;

    border:
        2px solid var(--blue);

    transition:
        all .2s ease;
}

.btn.primary {
    background:
        var(--blue);

    color: #ffffff;
}

.btn.primary:hover {
    background:
        var(--blue-light);

    border-color:
        var(--blue-light);

    transform:
        translateY(-2px);
}

.btn.secondary {
    background:
        #ffffff;

    color:
        var(--blue);

    border-color:
        #ffffff;
}

.btn.secondary:hover {
    background:
        var(--red);

    color:
        #ffffff;

    border-color:
        var(--red);
}


/* =========================================================
   BOWLING GRAPHIC
   ========================================================= */

.bowl-art {
    min-height: 310px;

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            var(--blue-dark),
            #111820
        );

    box-shadow:
        var(--shadow);

    display: grid;

    place-items: center;

    position: relative;

    overflow: hidden;

    border:
        2px solid
        rgba(45, 143, 213, .55);
}

.bowl-art:before {
    content: "";

    width: 190px;
    height: 190px;

    border-radius: 50%;

    background:
        #2d8fd5;

    box-shadow:
        inset -24px -24px 35px
        rgba(0, 0, 0, .30);
}

.bowl-art:after {
    content: "•••";

    position: absolute;

    font-size: 45px;

    color: #ffffff;

    letter-spacing: 14px;

    transform:
        rotate(-25deg);
}


/* =========================================================
   GENERAL CONTENT SECTIONS
   ========================================================= */

.section {
    padding: 70px 0;

    background:
        var(--background);
}

.section.alt {
    background:
        #3d4349;
}

.section-head {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    align-items: end;

    margin-bottom: 25px;
}

h2 {
    font-size: 2.2rem;

    line-height: 1.1;

    margin: 0;

    color: #ffffff;
}

.sub {
    color: #cbd2d8;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 20px;
}

.card {
    background:
        var(--paper);

    color:
        var(--ink);

    border:
        1px solid var(--line);

    border-radius:
        var(--radius);

    padding:
        24px;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, .22);
}

.card h3 {
    margin-top: 0;

    color:
        var(--ink);
}

.tag {
    display: inline-block;

    background:
        #dcecf8;

    border-radius:
        999px;

    padding:
        5px 9px;

    font-size:
        .78rem;

    font-weight:
        800;

    color:
        var(--blue-dark);
}

.event {
    border-left:
        5px solid
        var(--blue);
}

.event .date {
    font-size:
        1.8rem;

    font-weight:
        900;

    color:
        var(--blue);
}




/* ----- DARK TEXT ON WHITE CARDS ----- */

.card {
    color: #2f343a;
}

.card h2,
.card h3,
.card h4,
.card p,
.card strong,
.card label {
    color: #2f343a;
}

.card .sub {
    color: #5f6973;
}


/* =========================================================
   RED ACCENTS
   ========================================================= */

.event strong {
    color:
        var(--blue-dark);
}

.event .tag {
    border-left:
        3px solid
        var(--red);
}


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

footer {
    background:
        #20252a;

    color:
        #edf3f8;

    padding:
        42px 0;

    border-top:
        3px solid
        var(--red);
}

.footer-grid {
    display: flex;

    justify-content: space-between;

    gap: 30px;

    flex-wrap: wrap;
}

.socials {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}

.socials a {
    background:
        #343b42;

    color:
        #ffffff;

    padding:
        9px 12px;

    border-radius:
        12px;

    font-weight:
        700;

    transition:
        all .2s ease;
}

.socials a:hover {
    background:
        var(--blue);

    color:
        #ffffff;

    transform:
        translateY(-2px);
}

.socials a:last-child {
    background:
        var(--red);
}

.socials a:last-child:hover {
    background:
        var(--red-light);
}


/* =========================================================
   TOURNAMENT PAGE
   ========================================================= */

.page-hero {
    padding:
        55px 0;

    background:
        linear-gradient(
            135deg,
            #3d454d,
            #292f35
        );

    border-bottom:
        2px solid
        var(--blue);
}

.page-hero h1 {
    font-size:
        3.3rem;
}

.page-hero .sub {
    color:
        #d4dbe1;
}


/* =========================================================
   TOURNAMENT BUTTONS / LINKS
   ========================================================= */

.tournament-buttons {
    display:
        flex;

    gap:
        10px;

    flex-wrap:
        wrap;

    margin-bottom:
        25px;
}

.tournament-buttons button,
.tournament-buttons a {
    background:
        var(--blue);

    color:
        #ffffff;

    border:
        2px solid
        var(--blue);

    padding:
        10px 16px;

    border-radius:
        10px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        all .2s ease;
}

.tournament-buttons button:hover,
.tournament-buttons a:hover {
    background:
        var(--red);

    border-color:
        var(--red);

    transform:
        translateY(-2px);
}


/* =========================================================
   TOURNAMENT FLYERS
   ========================================================= */

.tournament-layout {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        30px;

    align-items:
        start;
}

.flyer {
    display:
        flex;

    justify-content:
        center;
}

.flyer img {
    width:
        70%;

    height:
        auto;

    display:
        block;

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

    border:
        3px solid
        rgba(45, 143, 213, .55);
}


/* =========================================================
   PHOTO GALLERY
   ========================================================= */

.gallery {
    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        14px;
}

.photo {
    min-height:
        220px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            #4b5660,
            #303840
        );

    display:
        grid;

    place-items:
        center;

    font-weight:
        900;

    color:
        #dce5ec;

    border:
        1px solid
        #56616c;
}

.video {
    aspect-ratio:
        16 / 9;

    border-radius:
        16px;

    background:
        #20252a;

    color:
        #ffffff;

    display:
        grid;

    place-items:
        center;

    font-size:
        2.5rem;

    border:
        2px solid
        var(--blue);
}

.small {
    font-size:
        .9rem;

    color:
        var(--muted);
}


/* =========================================================
   MOBILE / PHONE LAYOUT
   ========================================================= */

@media (max-width: 800px) {

    .tournament-layout {
        grid-template-columns:
            1fr;
    }

    nav {
        display:
            none;

        position:
            absolute;

        top:
            76px;

        left:
            0;

        right:
            0;

        background:
            #292e33;

        padding:
            12px;

        flex-direction:
            column;

        border-bottom:
            2px solid
            var(--blue);
    }

    nav.open {
        display:
            flex;
    }

    nav a {
        width:
            100%;

        text-align:
            center;
    }

    .menu {
        display:
            block;
    }

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

    .bowl-art {
        min-height:
            230px;
    }

    .grid,
    .gallery {
        grid-template-columns:
            1fr;
    }

    .section-head {
        display:
            block;
    }

    .page-hero h1 {
        font-size:
            2.7rem;
    }

    .flyer img {
        width:
            90%;
    }

}