@import url(https://db.onlinewebfonts.com/c/bb2e1211dfd31103079dbce7c49e1d4e?family=DIN+Neuzeit+Grotesk+LT+W01+BdCn);
@import url(https://db.onlinewebfonts.com/c/164a60c2e090248befbcf32fdd5af386?family=Lulo+Clean+One+Bold);
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@200&display=swap");

:root {
    --header-bg: #193669;
    --header-fg: #f3f5f7;
    --hero-fg: #193669;
    --hero-bg: #e7e7e7;
    --nav-bg: #fff;
    --nav-fg: #000;
    --subhead-fg: #c41919;
}

* {
    box-sizing: border-box;
}

.barlow-extralight {
    font-family: "Barlow", sans-serif;
    font-weight: 200;
    font-style: normal;
}

html,
body {
    margin: 0;
    padding: 0;
    font-size: 20px;
}

header {
    background-color: var(--header-bg);

    color: var(--header-fg);
}

nav {
    background-color: var(--nav-bg);
    color: var(--nav-fg);
    display: flex;
    width: 100%;
    justify-content: space-around;
    text-transform: uppercase;
    font-size: 125%;
    font-family: Arial, Helvetica, sans-serif;
}

.hero {
    color: var(--hero-fg);
    background-color: var(--hero-bg);

    background-image: url("images/eeeagle.webp");
    background-size: cover;
    background-position: center bottom;
}

h1 {
    font-family: "Lulo Clean One Bold", Arial, Helvetica, sans-serif;
    font-size: 90px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    margin: 0 auto;
    -webkit-text-stroke: 1px white;
}

.subhead {
    color: var(--subhead-fg);
    font-family:
        "DIN Neuzeit Grotesk LT W01 BdCn", arial, helvetica, sans-serif;
    font-size: 28px;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    -webkit-text-stroke: 1px white;
}

h2,
h3 {
    font-family:
        "DIN Neuzeit Grotesk LT W01 BdCn", arial, helvetica, sans-serif;
}

.topbar {
    font-family: arial, helvetica, sans-serif;
    font-weight: normal;
    padding: 1em;
    text-align: center;
    text-transform: uppercase;
}

.gallery {
    display: flex;
    gap: 2em;
    justify-content: space-around;
    flex-wrap: wrap;
}

.gallery-item {
    width: 25em;
    max-width: 100%;
}

.fear {
    padding: 1em;
    font-family: "Barlow", sans-serif;
    font-size: 120%;
}

.article-link {
    font-weight: bold;
    background-color: blue;
    color: white;
    padding: 1em 2em;
    font-size: 150%;
}

a.article-link,
a.article-link:visited,
a.article-link:active,
a.article-link:link {
    color: white;
}

h2 {
    background-color: #e5554f;
    color: white;
    padding: 0.5em 1em;
    text-align: center;
}

a,
a:link,
a:visited,
a:active {
    color: inherit;
}

header a,
header a:link,
header a:visited,
header a:active,
nav a,
nav a:link,
nav a:visited,
nav a:active {
    text-decoration: none;
    color: var(--nav-fg);
}

.footnotes {
    margin-top: 4em;
    padding: 0 2em;
    font-style: italic;
}

.gallery img {
    max-width: 100%;
}

.notices {
    font-family: "Barlow", sans-serif;
    padding: 1em;
}

.notices img {
    max-width: 600px;
    display: block;
    margin: 0 auto;
}

.images {
    display: flex;
    gap: 2em;
    justify-content: space-around;
    flex-wrap: wrap;
    align-items: start;
}

.images img,
.images figure {
    width: 300px;
    max-width: 100%;
}

.images figure {
    margin: 0;
    padding: 0;
    text-align: center;
    font-style: italic;
}

.caption {
    font-style: italic;
    opacity: 0.9;
}

.imageblock {
    border: 1px dotted #ccc;
    padding: 0.5em;
}

.checky-list {
    list-style: none;
    padding: 0;
}

.checky-list li::marker {
    content: "✔️ ";
    color: green;
    font-size: 1.2em;
}

.statement {
    margin: 1em auto;
    max-width: 600px;
}

.notices {
    max-width: 900px;
    margin: 1em auto;
}

.slider-box {
    margin: 0 auto;
    padding: 0;
}

.slider-control {
    width: 100%;
}

.slider-container {
    background-image: url("/images/re-elect.webp");
    background-size: cover;
    padding: 0;
    position: relative;
}

.slider-image {
    margin: 0 !important;
    max-width: 100% !important;
}

.hidden {
    display: none !important;
}

.slide-me {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    border-radius: 10px;
    border: 2px solid #666;
}

/* Homepage campaign treatment. Header and hero styling intentionally unchanged. */
.home-page {
    --campaign-navy: #173568;
    --campaign-navy-dark: #0d2349;
    --campaign-red: #c92f3d;
    --campaign-red-dark: #9f1f2c;
    --campaign-blue-light: #eaf1fa;
    --campaign-ink: #15243b;
    color: var(--campaign-ink);
    background:
        linear-gradient(90deg, var(--campaign-red) 0 8px, transparent 8px),
        #f5f7fb;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    line-height: 1.55;
}

.home-page main {
    padding: 3rem 1.25rem 4rem;
}

.home-page main > section {
    width: min(1100px, 100%);
    margin: 0 auto 3.5rem;
}

.home-page .notices {
    max-width: 1100px;
    padding: 0;
}

.home-page main h2 {
    position: relative;
    margin: 0 0 1.5rem;
    padding: 0.55em 1em 0.48em;
    border-bottom: 8px solid var(--campaign-red);
    background: var(--campaign-navy);
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 900;
    letter-spacing: 0.045em;
    line-height: 1.05;
    text-align: left;
    text-transform: uppercase;
    box-shadow: 7px 7px 0 var(--campaign-blue-light);
}

.home-page main h2::after {
    content: "★";
    float: right;
    color: #fff;
    font-size: 0.65em;
}

.home-page .notices > p {
    margin: 1.5rem 0;
    padding: 1.15rem 1.35rem;
    border-left: 7px solid var(--campaign-red);
    background: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    box-shadow: 0 4px 16px rgb(13 35 73 / 10%);
}

.home-page .imageblock {
    margin: 1.5rem 0;
    padding: 1.25rem;
    border: 2px solid var(--campaign-navy);
    border-top-width: 7px;
    background: #fff;
    box-shadow: 0 8px 20px rgb(13 35 73 / 12%);
}

.home-page .imageblock:nth-of-type(even) {
    border-top-color: var(--campaign-red);
}

.home-page .caption {
    margin: 0 0 1rem;
    color: var(--campaign-ink);
    font-style: normal;
    font-weight: 800;
    opacity: 1;
}

.home-page main a {
    color: var(--campaign-red-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
}

.home-page main a:hover,
.home-page main a:focus-visible {
    color: var(--campaign-navy);
}

.home-page .images img,
.home-page .gallery img {
    border: 3px solid #fff;
    outline: 2px solid var(--campaign-navy);
    box-shadow: 0 5px 14px rgb(13 35 73 / 20%);
}

.home-page .gallery {
    align-items: stretch;
    gap: 1.5rem;
}

.home-page .newsblock,
.home-page .fear,
.home-page #hates .gallery-item {
    margin: 0;
    padding: 1.25rem;
    border: 2px solid var(--campaign-navy);
    border-top: 7px solid var(--campaign-red);
    background: #fff;
    box-shadow: 0 8px 20px rgb(13 35 73 / 12%);
}

.home-page .newsblock-caption {
    margin-top: 1rem;
    font-weight: 800;
}

.home-page .article-link {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 3px solid #fff;
    outline: 3px solid var(--campaign-red-dark);
    background: var(--campaign-red);
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.15;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 8px 8px 0 var(--campaign-navy);
}

.home-page .article-link:hover,
.home-page .article-link:focus-visible {
    background: var(--campaign-navy);
    color: #fff;
    outline-color: var(--campaign-navy-dark);
}

.home-page .arrow {
    font-size: 1.4em;
}

.home-page main h3 {
    margin-top: 0;
    color: var(--campaign-navy);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.home-page .footnotes {
    width: min(1100px, calc(100% - 2.5rem));
    margin: 0 auto 3rem;
    padding: 1.25rem 1.5rem;
    border-left: 7px solid var(--campaign-red);
    background: var(--campaign-blue-light);
    color: var(--campaign-navy-dark);
    font-style: normal;
    font-weight: 700;
}

@media (max-width: 650px) {
    .home-page main {
        padding: 2rem 0.8rem 3rem;
    }

    .home-page main > section {
        margin-bottom: 2.5rem;
    }

    .home-page main h2 {
        box-shadow: 5px 5px 0 var(--campaign-blue-light);
    }

    .home-page .imageblock,
    .home-page .newsblock,
    .home-page .fear,
    .home-page #hates .gallery-item {
        padding: 0.9rem;
    }

    .home-page .article-link {
        min-height: 96px;
        font-size: 1.1rem;
    }
}