:root {
    --bg: #edf1f4;
    --paper: #ffffff;

    --navy: #132634;
    --navy2: #1d3a4b;

    --blue: #2878a5;
    --blue-dark: #195f85;

    --gold: #d49b37;
    --green: #28775c;

    --ink: #1d2b34;
    --muted: #64737c;

    --line: #d9e0e5;
    --soft: #f5f8fa;

    --shadow: 0 10px 28px rgba(20,40,55,.09);

    --radius: 14px;
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--bg);
    color: var(--ink);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.55;
}

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

a:hover {
    color: var(--blue);
}

img {
    max-width: 100%;
}


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

.site-header {
    background:
        linear-gradient(
            120deg,
            #0e222f,
            #194155
        );

    color: white;

    border-bottom:
        4px solid var(--gold);
}

.header-inner {
    max-width: 1180px;
    margin: auto;

    padding: 22px 24px;

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

    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 18px;
}

.logo {
    width: 96px;
    height: 96px;

    flex: 0 0 auto;

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

.logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

.brand h1 {
    margin: 0;

    font-size:
        clamp(1.4rem, 3vw, 2.25rem);

    line-height: 1.08;
}

.brand p {
    margin: 7px 0 0;

    color: #c9d6dc;
}

.since {
    text-align: right;

    color: #dce6ea;

    font-size: .9rem;
}

.since strong {
    color: white;
}

/* =========================================================
   NAVIGATION
========================================================= */

.site-nav {
    background: var(--navy);

    position: sticky;
    top: 0;

    z-index: 1000;
}

.nav-inner {
    max-width: 1180px;
    margin: auto;

    padding: 0 24px;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.site-nav a,
.nav-drop-button {
    color: #eef6f9;

    text-decoration: none;

    padding: 14px 15px;

    font-size: .9rem;
    font-weight: 650;

    border: 0;
    border-bottom: 3px solid transparent;

    background: transparent;

    font-family: inherit;

    cursor: pointer;
}

.site-nav a:hover,
.nav-drop-button:hover,
.nav-drop-button:focus {
    color: white;

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

    border-bottom-color:
        var(--gold);

    outline: none;
}


/* =========================================================
   DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;

    display: flex;
}

.nav-drop-button {
    display: flex;
    align-items: center;

    gap: 5px;
}

.nav-arrow {
    font-size: .72rem;

    transition:
        transform .2s ease;
}

.nav-dropdown.open .nav-arrow {
    transform:
        rotate(180deg);
}


.nav-dropdown-menu {
    position: absolute;

    top: 100%;
    left: 0;

    min-width: 225px;

    background:
        var(--navy);

    border-top:
        3px solid var(--gold);

    box-shadow:
        0 12px 28px rgba(0,0,0,.23);

    display: none;

    z-index: 2000;
}

.nav-dropdown-menu a {
    display: block;

    padding:
        12px 17px;

    border-bottom:
        1px solid rgba(255,255,255,.09);

    white-space: nowrap;
}

.nav-dropdown-menu a:last-child {
    border-bottom: 0;
}

.nav-dropdown-menu a:hover {
    background:
        rgba(255,255,255,.10);

    border-bottom-color:
        rgba(255,255,255,.09);
}


/*
Desktop:
open by hover or keyboard focus.
*/

@media (min-width: 651px) {

    .nav-dropdown:hover
    .nav-dropdown-menu,

    .nav-dropdown:focus-within
    .nav-dropdown-menu,

    .nav-dropdown.open
    .nav-dropdown-menu {

        display: block;
    }

}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

@media (max-width: 650px) {

    .site-nav {
        position: static;
    }

    .nav-inner {
        padding: 0;

        display: block;
    }

    .site-nav a,
    .nav-drop-button {
        width: 100%;

        display: block;

        text-align: left;

        padding:
            12px 16px;

        border-bottom:
            1px solid rgba(255,255,255,.08);
    }

    .nav-dropdown {
        display: block;
    }

    .nav-drop-button {
        display: flex;

        align-items: center;
        justify-content: space-between;
    }

    .nav-dropdown-menu {
        position: static;

        width: 100%;

        min-width: 0;

        box-shadow: none;

        border-top: 0;

        background:
            #0e202c;
    }

    .nav-dropdown.open
    .nav-dropdown-menu {

        display: block;
    }

    .nav-dropdown-menu a {
        padding-left: 32px;

        font-size: .86rem;

        background:
            rgba(0,0,0,.08);
    }

}

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

main {
    max-width: 1180px;
    margin: auto;

    padding: 26px 24px 50px;
}


/* =========================================================
   GENERAL
========================================================= */

.eyebrow {
    color: var(--blue-dark);

    font-size: .77rem;
    font-weight: 850;

    letter-spacing: .12em;
    text-transform: uppercase;
}

.eyebrow.light {
    color: #add5e5;
}

.small {
    font-size: .88rem;

    color: var(--muted);
}


.button {
    display: inline-block;

    padding: 11px 17px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 750;
    font-size: .92rem;
}

.button-primary {
    background: var(--blue);
    color: white;
}

.button-primary:hover {
    background: var(--blue-dark);
    color: white;
}

.button-secondary {
    background: #eef3f6;

    color: var(--navy);

    border:
        1px solid #d7e0e5;
}

.button-secondary:hover {
    background: #e2ebf0;

    color: var(--navy);
}


.tag {
    display: inline-block;

    border-radius: 999px;

    padding: 5px 9px;

    font-size: .7rem;
    font-weight: 850;

    text-transform: uppercase;
}

.tag-blue {
    background: #e3f0f7;
    color: #145c81;
}

.tag-green {
    background: #dff1e9;
    color: #216248;
}

.tag-gold {
    background: #f8ecd3;
    color: #805a15;
}


/* =========================================================
   HERO
========================================================= */

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

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    overflow: hidden;

    margin-bottom: 28px;

    display: grid;

    grid-template-columns:
        1.55fr .85fr;
}

.hero-main {
    padding: 34px 38px;
}

.hero h2 {
    margin:
        7px 0 13px;

    font-size:
        clamp(1.8rem,4vw,2.8rem);

    line-height: 1.08;
}

.hero p {
    max-width: 720px;

    color: #4b5b64;

    font-size: 1.04rem;

    margin:
        0 0 22px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 11px;
}

.hero-side {
    background:
        linear-gradient(
            145deg,
            var(--navy2),
            #234d63
        );

    color: white;

    padding: 30px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-side .label {
    color: #b9d0dc;

    text-transform: uppercase;

    font-size: .74rem;
    font-weight: 850;
}

.hero-side .frequency {
    margin-top: 8px;

    font-size: 2rem;
    font-weight: 850;
}

.hero-side .tone {
    color: #d8e5ea;
}

.hero-side hr {
    border: 0;

    border-top:
        1px solid rgba(255,255,255,.18);

    width: 100%;

    margin: 19px 0;
}


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

.section-heading {
    display: flex;

    justify-content: space-between;
    align-items: end;

    gap: 20px;

    margin-bottom: 16px;
}

.section-heading h2 {
    margin:
        3px 0 0;

    font-size: 1.9rem;
}

.section-link {
    text-decoration: none;

    font-weight: 750;
}


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

.page-intro {
    background: white;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 28px 30px;

    margin-bottom: 26px;
}

.page-intro h2 {
    margin:
        4px 0 8px;

    font-size: 2rem;
}

.page-intro p {
    margin: 0;

    max-width: 800px;

    color: #53636d;
}


/* =========================================================
   EVENTS
========================================================= */

.events-section {
    margin-bottom: 30px;
}

.event-grid {
    display: grid;

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

    gap: 18px;
}

.event-card {
    display: grid;

    grid-template-columns:
        74px 1fr;

    gap: 17px;

    background: white;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 20px;

    border-top:
        4px solid var(--blue);
}

.event-card.featured-event {
    border-top-color:
        var(--gold);
}

.event-date {
    background:
        var(--navy);

    color: white;

    border-radius: 9px;

    text-align: center;

    overflow: hidden;

    align-self: start;
}

.event-month {
    display: block;

    background:
        var(--blue);

    padding: 5px;

    font-size: .68rem;
    font-weight: 850;
}

.event-day {
    display: block;

    padding:
        11px 4px 12px;

    font-size: 1.7rem;
    font-weight: 850;

    line-height: 1;
}

.event-content h3 {
    margin:
        8px 0 7px;

    font-size: 1.08rem;
}

.event-content p {
    margin:
        0 0 10px;
}

.event-meta {
    color:
        var(--muted);

    font-size: .87rem;
}


/* =========================================================
   DETAILED EVENT SECTIONS
========================================================= */

.event-details-section {
    margin-top: 35px;
}

.event-detail {
    background: white;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    padding: 30px;

    margin-bottom: 25px;

    scroll-margin-top: 85px;
}

.event-detail-header {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 20px;

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

    padding-bottom: 18px;

    margin-bottom: 20px;
}

.event-detail-header h2 {
    margin:
        9px 0 0;

    font-size: 1.8rem;
}

.event-detail-date {
    background:
        var(--navy);

    color: white;

    border-radius: 8px;

    padding: 9px 14px;

    font-size: .85rem;
    font-weight: 850;

    white-space: nowrap;
}

.event-detail-meta {
    display: grid;

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

    gap: 16px;

    margin-bottom: 20px;
}

.event-detail-meta div {
    background:
        var(--soft);

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

    border-radius: 8px;

    padding: 14px;
}

.event-detail-meta strong {
    display: block;

    color:
        var(--navy);

    margin-bottom: 3px;
}

.event-detail-meta span {
    color:
        #53636d;
}

.event-detail-intro {
    font-size: 1.05rem;

    color:
        #43535c;
}

.event-detail h3 {
    margin:
        24px 0 7px;

    color:
        var(--navy);
}

.back-to-top {
    margin-top: 25px;
}


/* =========================================================
   PUBLIC SERVICE
========================================================= */

.public-service-section {
    margin-bottom: 28px;

    background:
        linear-gradient(
            135deg,
            #163143,
            #24556d
        );

    color: white;

    border-radius:
        var(--radius);

    overflow: hidden;

    box-shadow:
        var(--shadow);
}

.public-service-header {
    display: grid;

    grid-template-columns:
        1fr 220px;

    gap: 30px;

    align-items: center;

    padding: 30px;

    border-bottom:
        1px solid rgba(255,255,255,.16);
}

.public-service-header h2 {
    margin:
        4px 0 9px;

    font-size: 1.8rem;
}

.public-service-header p {
    margin: 0;

    max-width: 760px;

    color:
        #d2e0e7;
}


/*
|--------------------------------------------------------------------------
| ARES / RACES LOGO
|--------------------------------------------------------------------------
|
| Deliberately NO circle, border or white box.
|
*/

.service-badge {
    width: 220px;

    display: flex;

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

    background: transparent;

    border: 0;

    padding: 0;

    margin: 0;
}

.service-badge img {
    display: block;

    width: 220px;
    height: auto;

    max-width: none;

    object-fit: contain;

    background: transparent;

    border: 0;
    border-radius: 0;
}


.service-events {
    display: grid;

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

.service-event {
    padding: 22px 25px;

    border-right:
        1px solid rgba(255,255,255,.15);
}

.service-event:last-child {
    border-right: 0;
}

.service-date {
    color:
        #f2c773;

    font-size: .78rem;
    font-weight: 850;

    margin-bottom: 8px;
}

.service-event h3 {
    margin:
        0 0 7px;
}

.service-event p {
    margin:
        0 0 12px;

    color:
        #d1dee4;
}

.service-event a {
    color: white;

    font-weight: 750;
}

.service-event a:hover {
    color:
        #f2c773;
}


/* =========================================================
   DASHBOARD CARDS
========================================================= */

.dashboard {
    display: grid;

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

    gap: 20px;
}

.card {
    background:
        white;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    padding: 24px;
}

.card h3 {
    margin:
        0 0 12px;
}

.card p {
    color:
        #53636d;
}

.card-wide {
    grid-column:
        span 8;
}

.card-small {
    grid-column:
        span 4;
}

.card-half {
    grid-column:
        span 6;
}

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

.card-header {
    display: flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap: 15px;

    margin-bottom: 14px;
}


/* =========================================================
   MEETING
========================================================= */

.meeting {
    display: grid;

    grid-template-columns:
        105px 1fr;

    gap: 20px;

    align-items: start;
}

.datebox {
    background:
        var(--navy);

    color: white;

    border-radius: 10px;

    text-align: center;

    overflow: hidden;
}

.datebox .month {
    background:
        var(--blue);

    padding: 6px;

    font-size: .76rem;
    font-weight: 850;
}

.datebox .day {
    display: block;

    padding:
        12px 0 4px;

    font-size: 2.2rem;
    font-weight: 850;

    line-height: 1;
}

.datebox .year {
    display: block;

    padding-bottom: 11px;

    color:
        #c6d5dd;

    font-size: .78rem;
}

.meeting-details h3 {
    margin-top: 0;
}

.meeting-details p {
    margin:
        0 0 13px;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.newsletter {
    position: relative;

    overflow: hidden;
}

.newsletter::after {
    content: "73";

    position: absolute;

    right: 18px;
    bottom: -24px;

    font-size: 7rem;
    font-weight: 900;

    color:
        rgba(30,75,100,.05);

    pointer-events: none;
}


/* =========================================================
   TABLES
========================================================= */

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;

    border-collapse:
        collapse;

    font-size: .92rem;
}

th,
td {
    padding:
        10px 11px;

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

    text-align: left;

    white-space: nowrap;
}

th {
    background:
        var(--soft);

    color:
        #43525c;

    font-size: .76rem;

    text-transform:
        uppercase;
}

.freq {
    color:
        var(--navy2);

    font-weight: 850;
}


/* =========================================================
   QUICK LINKS
========================================================= */

.quicklinks {
    display: grid;

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

    gap: 10px;
}

.quicklinks a {
    display: block;

    background:
        var(--soft);

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

    border-radius: 8px;

    padding:
        13px 14px;

    text-decoration: none;

    color:
        var(--navy);

    font-weight: 700;
}

.quicklinks a:hover {
    background:
        #edf5f9;

    color:
        var(--navy);
}


/* =========================================================
   ABOUT
========================================================= */

.about-section {
    margin-top: 26px;

    background: white;

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

    padding: 30px;
}

.about-grid {
    display: grid;

    grid-template-columns:
        1.5fr .7fr;

    gap: 32px;
}

.callout {
    background:
        #eff6f9;

    border-left:
        4px solid var(--blue);

    padding:
        18px 20px;

    border-radius:
        4px 9px 9px 4px;
}


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

footer {
    background:
        var(--navy);

    color:
        #c8d5db;

    margin-top: 20px;
}

.footer-inner {
    max-width: 1180px;
    margin: auto;

    padding:
        30px 24px;

    display: flex;

    justify-content:
        space-between;

    gap: 28px;

    flex-wrap: wrap;
}

footer strong {
    color: white;
}

footer a {
    color:
        #dbe9ef;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

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

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

    .public-service-header {
        grid-template-columns:
            1fr;
    }

    .service-badge {
        width: 180px;
    }

    .service-badge img {
        width: 180px;
    }

    .service-events {
        grid-template-columns:
            1fr;
    }

    .service-event {
        border-right: 0;

        border-bottom:
            1px solid rgba(255,255,255,.15);
    }

    .service-event:last-child {
        border-bottom: 0;
    }

    .card-wide,
    .card-small,
    .card-half {
        grid-column:
            1 / -1;
    }

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

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .header-inner {
        align-items:
            flex-start;

        padding:
            18px;
    }

    .logo {
        width: 70px;
        height: 70px;
    }

    .since {
        display: none;
    }

    nav {
        position: static;
    }

    .nav-inner {
        padding:
            0 8px;
    }

    nav a {
        padding:
            11px 9px;

        font-size: .8rem;
    }

    main {
        padding:
            18px 13px 36px;
    }

    .hero-main,
    .hero-side {
        padding:
            25px 21px;
    }

    .section-heading {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .meeting {
        grid-template-columns:
            82px 1fr;
    }

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

    .event-detail-header {
        flex-direction:
            column;
    }

    .event-detail-meta {
        grid-template-columns:
            1fr;
    }

    .service-badge {
        width: 150px;

        margin-top: 10px;
    }

    .service-badge img {
        width: 150px;
    }

}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 420px) {

    .logo {
        width: 58px;
        height: 58px;
    }

    .brand h1 {
        font-size: 1.1rem;
    }

    .event-card {
        grid-template-columns:
            62px 1fr;

        padding: 16px;
    }

    .event-day {
        font-size: 1.45rem;
    }

    .card {
        padding: 18px;
    }

}