/* ==========================================================================
   Hear Our Heroes: one-page site
   Palette taken from the subject: memorial granite, service navy,
   and the red of the Remembrance Bowl armbands.
   ========================================================================== */

:root {
    --granite: #E4E5E1; /* engraved-wall light stone */
    --granite-deep: #CACCC6;
    --paper: #F6F6F3; /* cool off-white page */
    --navy: #1B2940; /* service navy */
    --navy-soft: #2A3B57;
    --armband: #A8232B; /* armband red, used for actions only */
    --ink: #1D2433; /* body text */
    --ink-muted: #545B66;
    --engrave: #5E625B;
    --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;
    --wrap: 1120px;
    --nav-h: 64px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-padding-top: var(--nav-h);
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--armband);
    text-underline-offset: 3px;
}

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

:focus-visible {
    outline: 3px solid var(--armband);
    outline-offset: 3px;
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.05;
    margin: 0 0 .5em;
    color: var(--navy);
}

h2 {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    letter-spacing: -.01em;
}

h3 {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
}

/* Three-star rule under section headings, echoing the Valor Vault and
   Collection splash screens */
h2::after {
    content: "\2605\2003\2605\2003\2605";
    display: block;
    margin-top: .8rem;
    font-size: .8rem;
    line-height: 1;
    color: var(--armband);
}

.photo-band h2::after, .band-navy h2::after {
    color: var(--granite-deep);
}

p {
    margin: 0 0 1em;
    max-width: 68ch;
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--navy);
    color: #fff;
    padding: .75rem 1rem;
    z-index: 100;
}

    .skip-link:focus {
        left: 1rem;
        top: 1rem;
    }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: .02em;
    text-decoration: none;
    padding: .7rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: background-color .15s, color .15s, border-color .15s;
}

.btn-primary {
    background: var(--armband);
    color: #fff;
}

    .btn-primary:hover {
        background: #8C1C23;
        color: #fff;
    }

.btn-ghost {
    border-color: rgba(255,255,255,.75);
    color: #fff;
}

    .btn-ghost:hover {
        background: #fff;
        color: var(--navy);
    }

/* ---------- Nav ---------- */
.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--granite-deep);
    height: var(--nav-h);
}

.nav-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand img {
    height: 40px;
    width: auto;
}

.site-nav nav {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

    .site-nav nav a {
        white-space: nowrap;
        font-family: var(--font-display);
        font-weight: 500;
        font-size: 1.1rem;
        color: var(--navy);
        text-decoration: none;
        padding: .25rem 0;
        border-bottom: 2px solid transparent;
    }

        .site-nav nav a:hover {
            border-bottom-color: var(--armband);
        }

        .site-nav nav a.nav-login {
            margin-left: .6rem;
        }

        .site-nav nav a.nav-register {
            background: var(--armband);
            color: #fff;
            padding: .35rem .9rem;
            border: 0;
            border-radius: 2px;
        }

            .site-nav nav a.nav-register:hover {
                background: #8C1C23;
            }

        .site-nav nav a.nav-donate {
            background: var(--navy);
            color: #fff;
            padding: .35rem .9rem;
            border: 0;
            border-radius: 2px;
            margin-left: -.6rem;
        }

            .site-nav nav a.nav-donate:hover {
                background: var(--navy-soft);
            }

.nav-toggle {
    display: none;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    background: none;
    border: 2px solid var(--navy);
    color: var(--navy);
    padding: .3rem .8rem;
    border-radius: 2px;
    cursor: pointer;
}

@media (max-width: 1320px) and (min-width: 1181px) {
    .site-nav nav {
        gap: 1rem;
    }
}

@media (max-width: 1180px) {
    .nav-toggle {
        display: block;
    }

    .site-nav nav {
        display: none;
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-bottom: 1px solid var(--granite-deep);
        padding: .5rem 1.5rem 1rem;
    }

        .site-nav nav.open {
            display: flex;
        }

        .site-nav nav a {
            padding: .7rem 0;
            border-bottom: 1px solid var(--granite);
        }

            .site-nav nav a.nav-login {
                margin-left: 0;
            }

            .site-nav nav a.nav-register {
                margin-top: .8rem;
                text-align: center;
                padding: .7rem;
            }

            .site-nav nav a.nav-donate {
                margin: .6rem 0 0;
                text-align: center;
                padding: .7rem;
            }
}

/* ---------- Hero ---------- */
.hero {
    min-height: 78vh;
    margin-top: var(--nav-h);
    display: flex;
    align-items: flex-start;
    color: #fff;
    background-color: var(--navy);
    background-image: linear-gradient(to right, rgba(27,41,64,.95) 0%, rgba(27,41,64,.8) 38%, rgba(27,41,64,.2) 75%, rgba(27,41,64,.1) 100%), url("../images/hoh/hero-memorial-wall.jpg");
    background-size: cover;
    background-position: 60% 30%;
}

.hero-inner {
    width: 100%;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: clamp(2.5rem, 6vh, 4.5rem) 1.5rem 4rem;
}
/* Logo with three white stars centered beneath it */
.hero-brand {
    display: inline-block;
    text-align: center;
    margin-bottom: 1.75rem;
}

.hero-logo {
    width: clamp(150px, 16vw, 210px);
    height: auto;
}

.hero-stars {
    color: #fff;
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1;
    margin-top: .7rem;
    text-shadow: 0 1px 8px rgba(0,0,0,.45);
}

.hero-title {
    font-size: clamp(2.8rem, 6.2vw, 5.25rem);
    font-weight: 700;
    line-height: .98;
    letter-spacing: -.015em;
    color: #fff;
    max-width: 13ch;
    margin: 0 0 1.5rem;
    text-shadow: 0 2px 18px rgba(0,0,0,.35);
}

.hero-lead {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.55;
    max-width: 50ch;
    margin-bottom: 2rem;
    color: rgba(255,255,255,.92);
    text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ---------- Bands ---------- */
.band {
    padding: clamp(4rem, 9vw, 7rem) 0;
}

.band-paper {
    background: var(--paper);
}

.band-stone {
    background: var(--granite);
}

.band-navy {
    background: var(--navy);
    color: #fff;
}

    .band-navy h2 {
        color: #fff;
    }

.section-lead {
    font-size: 1.2rem;
    color: var(--ink-muted);
    margin-bottom: 2.5rem;
}

/* ---------- Who we are ---------- */
.intro {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 3rem;
    align-items: start;
}

.intro-big {
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.35;
    color: var(--navy);
}

/* ---------- What we provide ---------- */
.pillar {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 3rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--granite-deep);
}

    .pillar:first-of-type {
        margin-top: 1.5rem;
    }

    .pillar h3 {
        margin: 0;
    }

.pillar-line {
    font-style: italic;
    color: var(--navy);
    font-size: 1.25rem;
}

.pillar-media {
    grid-template-columns: 1fr 1.7fr;
}

    .pillar-media .pillar-video {
        grid-column: 2;
    }

figure.pillar-video {
    margin: 0;
}

.pillar-video img {
    width: 100%;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 12px 30px -12px rgba(27,41,64,.45);
}

.pillar-photo {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.pillar-video figcaption {
    font-size: .95rem;
    color: var(--ink-muted);
    margin-top: .6rem;
    font-style: italic;
}

.pillar-video video, .reel-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 2px;
    box-shadow: 0 12px 30px -12px rgba(27,41,64,.45);
}

/* ---------- Photo bands: break up the scroll with full-bleed imagery ----------
   Backgrounds are the photos the old home page used for its sections.
   Swap any url() below to change a band's photo. */
.photo-band {
    position: relative;
    color: #fff;
    background-color: var(--navy);
    background-size: cover;
    background-position: center;
    padding: clamp(4.5rem, 10vw, 8rem) 0;
}

    .photo-band h2, .photo-band h3 {
        color: #fff;
    }

    .photo-band h2, .photo-band h3, .photo-band p {
        text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 16px rgba(0,0,0,.35);
    }

    .photo-band .section-lead {
        color: rgba(255,255,255,.85);
    }

    .photo-band a:not(.btn) {
        color: #fff;
    }

.mov {
    background-image: linear-gradient(to right, rgba(20,31,49,.82) 0%, rgba(20,31,49,.6) 50%, rgba(20,31,49,.42) 100%), url("../img/mob1.jpg");
    border-top: 6px solid var(--armband);
}

.mov-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3.5rem;
    align-items: center;
}

.mov-copy p {
    color: rgba(255,255,255,.9);
}

.mov-line {
    font-style: italic;
    font-size: 1.3rem;
    color: #fff !important;
}

.mov-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 2px;
    box-shadow: 0 20px 40px -16px rgba(0,0,0,.7);
}

/* The cost statement: the one loud moment on the page */
.mov-cost {
    margin-top: clamp(3.5rem, 7vw, 5.5rem);
    padding-top: clamp(2.5rem, 5vw, 3.5rem);
    border-top: 1px solid rgba(255,255,255,.2);
}

    .mov-cost p {
        max-width: none;
        margin: 0;
        font-family: var(--font-display);
        line-height: 1;
    }

.cost-q {
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    font-weight: 500;
    color: var(--granite-deep);
    margin-bottom: .6rem !important;
}

.cost-a {
    font-size: clamp(2.6rem, 7vw, 5.5rem);
    font-weight: 700;
    letter-spacing: -.015em;
    color: #fff;
    margin-bottom: 2.25rem !important;
}

.docs {
    background-image: linear-gradient(rgba(20,31,49,.72) 0%, rgba(20,31,49,.5) 45%, rgba(20,31,49,.72) 100%), url("../img/mob2.jpg");
}

/* ---------- Documentary roster: set like names on a memorial wall ---------- */
.roster {
    list-style: none;
    margin: 0 0 4rem;
    padding: 2.5rem 2.5rem 1.5rem;
    background: var(--granite);
    columns: 3 220px;
    column-gap: 2.5rem;
    border-radius: 2px;
}

    .roster li {
        break-inside: avoid;
        padding-bottom: 1.1rem;
    }

.roster-name {
    display: block;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.55rem;
    line-height: 1.1;
    text-transform: uppercase; /* engraved names, as on the wall */
    letter-spacing: .04em;
    color: var(--engrave);
    text-shadow: 0 1px 0 rgba(255,255,255,.8), 0 -1px 0 rgba(0,0,0,.12);
}

.roster-sub {
    display: block;
    font-style: italic;
    color: var(--ink-muted);
    font-size: 1rem;
}

.roster-status {
    display: inline-block;
    font-size: .95rem;
    color: var(--ink-muted);
}

a.roster-status {
    color: var(--armband);
    font-weight: 600;
}

.reel {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    gap: 3rem;
    align-items: start;
}

/* ---------- How we're engaged ---------- */
.work {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 3rem;
    align-items: center;
    padding: 2.5rem 0;
}

    .work img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        border-radius: 2px;
    }

.work-flip img {
    order: 2;
}

.work-flip .work-copy {
    order: 1;
}

/* ---------- Gallery ---------- */
#gallery .rg-gallery {
    margin-top: 1.5rem;
}

#gallery .rg-caption p {
    color: #fff;
    font-family: var(--font-body);
}

/* The site-wide "img { display:block }" rule stopped the gallery's own
   text-align:center from working, so center the large image explicitly. */
#gallery .rg-image {
    text-align: center;
}

    #gallery .rg-image img {
        display: block;
        margin: 0 auto;
    }

#gallery .rg-caption-wrapper,
#gallery .rg-caption {
    text-align: center;
}

    #gallery .rg-caption p {
        max-width: none;
        margin: 0 auto;
    }

/* ---------- Footer ---------- */
.site-footer {
    background-color: #141F31;
    background-image: linear-gradient(rgba(20,31,49,.9), rgba(20,31,49,.96)), url("../img/st1.jpg");
    background-size: cover;
    background-position: center;
    color: rgba(255,255,255,.85);
    padding: 4.5rem 0 3rem;
    font-size: 1rem;
}

.footer-quote {
    margin: 0 0 3rem;
    padding: 0 0 2.5rem;
    border-bottom: 1px solid rgba(255,255,255,.18);
}

    .footer-quote p {
        font-size: clamp(1.25rem, 2.2vw, 1.6rem);
        font-style: italic;
        line-height: 1.45;
        color: #fff;
        max-width: 52ch;
    }

    .footer-quote cite {
        font-style: normal;
        font-family: var(--font-display);
        font-size: 1.15rem;
        color: var(--granite-deep);
    }

.site-footer a {
    color: #fff;
}

.footer-small {
    color: rgba(255,255,255,.55);
    font-size: .9rem;
    margin-top: 1.5rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 800px) {
    .intro, .pillar, .pillar-media, .reel, .work, .mov-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

        .pillar-media .pillar-video {
            grid-column: auto;
        }

    .work-flip img, .work-flip .work-copy {
        order: 0;
    }

    .roster {
        padding: 1.75rem 1.5rem .75rem;
    }

    .hero {
        min-height: 0;
        background-image: linear-gradient(to top, rgba(27,41,64,.95) 0%, rgba(27,41,64,.75) 60%, rgba(27,41,64,.45) 100%), url("../images/hoh/hero-memorial-wall.jpg");
        background-position: 70% 30%;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Gallery + footer: one shared photo background ----------
   Lower the rgba numbers to show more of the photo. */
.photo-tail {
    background-color: #141F31;
    background-image: linear-gradient(rgba(20,31,49,.7) 0%, rgba(20,31,49,.5) 45%, rgba(20,31,49,.78) 100%), url("../img/st1.jpg");
    background-size: cover;
    background-position: center;
}

    .photo-tail .band-navy,
    .photo-tail .site-footer {
        background: transparent;
    }

    .photo-tail h2, .photo-tail p, .photo-tail cite {
        text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.35);
    }

    .photo-tail .footer-small {
        color: rgba(255,255,255,.75);
    }