/*
 * AVFD Public Site — "Station House Modern" design system
 * Loaded by public_base.html for every public page, on top of
 * avfd-modern.css. Primitives are namespaced .home-* (the system debuted on
 * the homepage); interior public pages opt in by using the classes.
 *
 * Design language:
 *   - Display type: Barlow Condensed — tall, industrial, apparatus-lettering.
 *   - Deep navy surfaces (night bay), fire red as structural color, brass
 *     gold hairlines from badge hardware.
 *   - Signature motif: the red/gold chevron rule, echoing the reflective
 *     chevrons on apparatus rears.
 */

:root {
    --home-display: 'Barlow Condensed', 'Montserrat', system-ui, sans-serif;
    --home-navy-deep: #0B0F16;
    --home-navy: #121A26;
    --home-gold-hairline: rgba(212, 168, 67, 0.38);
    --home-paper: #F4F6F9;
}

/* base.html renders a legacy <hr> between the content block and the footer;
   on the full-bleed homepage it paints a stray white sliver between the CTA
   photo and the navy footer. Hidden here (home-only stylesheet) so interior
   pages keep their existing rhythm. */
.content + hr {
    display: none;
}

/* ================================================== */
/* SIGNATURE: CHEVRON RULE                             */
/* ================================================== */

.chevron-rule {
    height: 8px;
    background: repeating-linear-gradient(
        -45deg,
        #B22C2C 0, #B22C2C 14px,
        #C9A03C 14px, #C9A03C 28px
    );
    /* Keep it a quiet stripe, not a warning sign. */
    opacity: 0.85;
}

/* ================================================== */
/* SHARED HOME PRIMITIVES                              */
/* ================================================== */

.home-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    font-family: var(--home-display);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--avfd-red);
}

.home-eyebrow::before {
    content: '';
    width: 26px;
    height: 3px;
    background: var(--avfd-red);
    flex-shrink: 0;
}

/* Gold variant for dark surfaces */
.home-eyebrow-gold {
    color: var(--avfd-gold);
}

.home-eyebrow-gold::before {
    background: var(--avfd-gold);
}

/* Big condensed display heading. Explicit colors are required everywhere:
   fireman.css sets a global h1/h2 color that would otherwise leak in. */
.home-display {
    font-family: var(--home-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.94;
    letter-spacing: 0.005em;
    color: var(--avfd-navy);
    margin: 0.75rem 0 1.25rem;
}

.home-display .accent {
    color: var(--avfd-red);
}

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

/* Taller, editorial, left-anchored on desktop. Keeps .hero-section for the
   shared scrim + photo plumbing; .home-hero layers the composition. */
.home-hero {
    min-height: 640px;
    height: 88vh;
    max-height: 900px;
    text-align: left;
    justify-content: flex-start;
}

/* Steer the shared scrim darker on the left where the copy sits, letting the
   right side (bay doors, trucks) breathe. */
.home-hero::before {
    background:
        linear-gradient(90deg,
            rgba(11, 15, 22, 0.82) 0%,
            rgba(11, 15, 22, 0.55) 42%,
            rgba(11, 15, 22, 0.18) 78%,
            rgba(11, 15, 22, 0.32) 100%),
        linear-gradient(180deg,
            rgba(11, 15, 22, 0.55) 0%,
            rgba(11, 15, 22, 0.08) 35%,
            rgba(11, 15, 22, 0.05) 62%,
            rgba(11, 15, 22, 0.78) 100%);
}

.home-hero .hero-content {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 7rem 2rem 3.5rem;
}

.home-hero-inner {
    max-width: 700px;
}

.home-hero .home-eyebrow {
    color: var(--avfd-gold);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.home-hero .home-eyebrow::before {
    background: var(--avfd-red);
}

.home-hero h1 {
    font-family: var(--home-display);
    font-size: clamp(3.4rem, 8.5vw, 6.5rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.92;
    letter-spacing: 0.005em;
    color: var(--avfd-white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    margin: 1.1rem 0 0;
}

/* Second headline line sits in a red slab — legible on any photo, and it is
   the page's strongest brand mark. */
.home-hero h1 .hero-mark {
    display: inline-block;
    background: var(--avfd-red);
    color: #fff;
    padding: 0.06em 0.22em 0.1em;
    margin-top: 0.12em;
    box-shadow: 0 10px 30px rgba(178, 44, 44, 0.45);
}

.home-hero .lead {
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    max-width: 34em;
    margin: 1.5rem 0 2.25rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.home-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.9rem;
}

.home-hero-ctas .btn {
    margin: 0;
    font-family: var(--home-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 1.25rem;
    padding: 0.7rem 1.9rem;
}

/* Quiet third action: free CPR class. */
.home-hero-alt {
    display: inline-block;
    margin-top: 1.4rem;
    font-family: var(--home-display);
    font-size: 1.1rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--avfd-gold);
    text-decoration: none;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    border-bottom: 1px solid var(--home-gold-hairline);
    padding-bottom: 0.2rem;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.home-hero-alt:hover,
.home-hero-alt:focus {
    color: #fff;
    border-color: #fff;
}

.home-hero-alt .fa-arrow-right {
    font-size: 0.85em;
    transition: transform 0.2s ease;
}

.home-hero-alt:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* Staggered reveal for the hero stack (rides the existing .fade-in-section
   IntersectionObserver — pure CSS delays, no new JS). */
html.js .home-hero .fade-in-section:nth-child(2) { transition-delay: 0.12s; }
html.js .home-hero .fade-in-section:nth-child(3) { transition-delay: 0.24s; }
html.js .home-hero .fade-in-section:nth-child(4) { transition-delay: 0.36s; }

/* ================================================== */
/* STATS BAND (fused to hero via chevron rule)         */
/* ================================================== */

.home-stats {
    background: linear-gradient(180deg, var(--home-navy) 0%, var(--home-navy-deep) 100%);
    border-top: 1px solid var(--home-gold-hairline);
    color: var(--avfd-white);
    padding: 3.25rem 0 2.5rem;
}

.home-stats .stat-item {
    text-align: center;
    padding: 0.5rem 1rem;
    position: relative;
}

/* Brass hairline separators between stats on desktop */
@media (min-width: 768px) {
    .home-stats .col-md-3 + .col-md-3 .stat-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 15%;
        height: 70%;
        width: 1px;
        background: var(--home-gold-hairline);
    }
}

.home-stats .stat-number {
    font-family: var(--home-display);
    font-size: clamp(3.2rem, 5vw, 4.5rem);
    font-weight: 700;
    color: #E0574F;
    display: block;
    line-height: 1;
    margin-bottom: 0.4rem;
    font-variant-numeric: tabular-nums;
}

.home-stats .stat-label {
    font-family: var(--home-display);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.66);
}

/* ================================================== */
/* HERITAGE — "since 1941" editorial block             */
/* ================================================== */

.home-heritage {
    background: var(--home-paper);
    padding: 6rem 0;
    overflow: hidden;
}

.home-heritage .home-display {
    font-size: clamp(2.6rem, 4.5vw, 4rem);
}

.home-heritage p {
    color: #45505E;
    font-size: 1.08rem;
    line-height: 1.75;
    max-width: 34em;
}

.home-heritage-link {
    display: inline-block;
    margin-top: 0.75rem;
    font-family: var(--home-display);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--avfd-red);
    text-decoration: none;
    border-bottom: 2px solid rgba(204, 51, 51, 0.35);
    padding-bottom: 0.15rem;
    transition: border-color 0.2s ease;
}

.home-heritage-link:hover,
.home-heritage-link:focus {
    color: var(--avfd-red);
    border-color: var(--avfd-red);
}

/* Photo composition: modern bay shot with a red base bar, the 1940s
   "Future Home" sign photo overlapping like a kept snapshot. */
.home-heritage-photos {
    position: relative;
    padding: 0 1rem 3.25rem 0;
}

.home-heritage-photos .photo-now {
    width: 88%;
    margin-left: auto;
    display: block;
    border-bottom: 6px solid var(--avfd-red);
    box-shadow: 0 18px 40px rgba(15, 20, 25, 0.28);
}

.home-heritage-photos .photo-now img {
    width: 100%;
    height: auto;
    display: block;
}

.home-heritage-photos .photo-then {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 46%;
    max-width: 250px;
    background: #fff;
    padding: 0.55rem 0.55rem 0.8rem;
    box-shadow: 0 14px 30px rgba(15, 20, 25, 0.3);
    transform: rotate(-3.5deg);
}

.home-heritage-photos .photo-then img {
    width: 100%;
    height: auto;
    display: block;
}

.home-heritage-photos .photo-then figcaption {
    font-size: 0.72rem;
    color: #6B7684;
    padding-top: 0.5rem;
    line-height: 1.35;
    text-align: center;
}

/* ================================================== */
/* INLINE VIDEO CARD — small ambient clip in content   */
/* ================================================== */

/* Same frame language as .photo-now (red keel line + deep shadow); the poster
   still stands in wherever the loop doesn't run (no-JS, reduced motion). */
.inline-video-card {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.inline-video-card .inline-video {
    width: 100%;
    height: auto;
    display: block;
    border-bottom: 6px solid var(--avfd-red);
    box-shadow: 0 18px 40px rgba(15, 20, 25, 0.28);
}

.inline-video-card figcaption {
    margin-top: 0.9rem;
    font-size: 0.9rem;
    color: #6B7684;
}

/* ================================================== */
/* MISSION CARDS — three ways to answer the call       */
/* ================================================== */

.home-missions {
    background:
        radial-gradient(ellipse at 20% -20%, rgba(204, 51, 51, 0.14), transparent 55%),
        linear-gradient(180deg, var(--home-navy-deep) 0%, var(--home-navy) 100%);
    padding: 6rem 0;
}

.home-missions .home-display {
    color: var(--avfd-white);
}

.home-missions-sub {
    color: rgba(255, 255, 255, 0.6);
    max-width: 40em;
    margin-bottom: 3rem;
}

.mission-card {
    position: relative;
    display: block;
    min-height: 430px;
    overflow: hidden;
    border-radius: 6px;
    background: var(--home-navy);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.mission-card:hover,
.mission-card:focus-within {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px rgba(0, 0, 0, 0.5);
}

.mission-card .mission-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mission-card:hover .mission-photo,
.mission-card:focus-within .mission-photo {
    transform: scale(1.06);
}

.mission-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(11, 15, 22, 0.18) 0%,
        rgba(11, 15, 22, 0.42) 45%,
        rgba(11, 15, 22, 0.94) 100%);
}

/* Red ignition line along the base on hover */
.mission-card::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 5px;
    width: 100%;
    background: var(--avfd-red);
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

.mission-card:hover::before,
.mission-card:focus-within::before {
    transform: scaleX(1);
}

.mission-card-body {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 1.75rem 1.75rem 1.9rem;
}

.mission-num {
    font-family: var(--home-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--avfd-gold);
    display: block;
    margin-bottom: 0.4rem;
}

.mission-card h3 {
    font-family: var(--home-display);
    font-size: 2.1rem;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.95;
    color: var(--avfd-white);
    margin-bottom: 0.6rem;
}

.mission-card p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 0.9rem;
}

.mission-cta {
    font-family: var(--home-display);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--avfd-gold);
    text-decoration: none;
}

.mission-cta .fa-arrow-right {
    font-size: 0.85em;
    margin-left: 0.35rem;
    transition: transform 0.25s ease;
}

.mission-card:hover .mission-cta,
.mission-card:focus-within .mission-cta {
    color: #fff;
}

.mission-card:hover .mission-cta .fa-arrow-right,
.mission-card:focus-within .mission-cta .fa-arrow-right {
    transform: translateX(5px);
}

/* Stagger the three cards' reveal */
html.js .home-missions .row > .fade-in-section:nth-child(2) { transition-delay: 0.12s; }
html.js .home-missions .row > .fade-in-section:nth-child(3) { transition-delay: 0.24s; }

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

.home-events {
    background: var(--home-paper);
    padding: 6rem 0;
}

.home-events .event-card {
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(15, 20, 25, 0.08);
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.home-events .event-date-badge {
    background: var(--home-navy);
    color: var(--avfd-white);
    min-width: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem;
    border-bottom: none;
    border-right: 4px solid var(--avfd-red);
}

.home-events .event-day {
    font-family: var(--home-display);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}

.home-events .event-month {
    font-family: var(--home-display);
    font-size: 1rem;
    letter-spacing: 0.24em;
    color: var(--avfd-gold);
}

.home-events .event-title {
    font-family: var(--home-display);
    text-transform: uppercase;
    font-size: 1.45rem;
    letter-spacing: 0.02em;
}

.home-events-more {
    font-family: var(--home-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 1.15rem;
    /* Re-skin Bootstrap's blue outline-primary into the brand navy */
    --bs-btn-color: var(--avfd-navy);
    --bs-btn-border-color: var(--avfd-navy);
    --bs-btn-hover-bg: var(--avfd-navy);
    --bs-btn-hover-border-color: var(--avfd-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--avfd-navy);
    --bs-btn-active-border-color: var(--avfd-navy);
    --bs-btn-active-color: #fff;
}

/* ================================================== */
/* VOICES — testimonial                                */
/* ================================================== */

.home-voices {
    background: #fff;
    padding: 6rem 0 5rem;
}

.home-voices .testimonial-item {
    padding: 1.5rem 3rem 2rem;
}

.home-voices .quote-mark {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 6rem;
    line-height: 0.6;
    color: var(--avfd-gold);
    display: block;
    margin-bottom: 1.25rem;
}

.home-voices .testimonial-quote {
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    line-height: 1.65;
    color: #232B36;
}

.home-voices .testimonial-attribution {
    border-top: none;
    padding-top: 0;
}

.home-voices .testimonial-author {
    font-family: var(--home-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 1.2rem;
}

.home-voices .testimonial-author::before {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    background: var(--avfd-red);
    margin: 0 auto 0.9rem;
}

/* Visible, tasteful carousel controls */
.home-voices .carousel-control-prev,
.home-voices .carousel-control-next {
    width: 44px;
    height: 44px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--home-navy);
    border-radius: 50%;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.home-voices .carousel-control-prev { left: -6px; }
.home-voices .carousel-control-next { right: -6px; }

.home-voices .carousel-control-prev:hover,
.home-voices .carousel-control-next:hover {
    opacity: 1;
}

.home-voices .carousel-control-prev-icon,
.home-voices .carousel-control-next-icon {
    width: 1.1rem;
    height: 1.1rem;
}

/* ================================================== */
/* FINAL CTA — photo-backed, replaces the red slab     */
/* ================================================== */

.home-cta {
    position: relative;
    overflow: hidden;
    background-color: var(--home-navy-deep);
    color: var(--avfd-white);
    text-align: center;
    padding: 6.5rem 2rem;
}

.home-cta .cta-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Portrait source (hose-line crew): bias the crop band toward the
       firefighters' helmets/spray rather than the bright sky above them. */
    object-position: center 42%;
}

.home-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(11, 15, 22, 0.9) 0%, rgba(11, 15, 22, 0.72) 50%, rgba(11, 15, 22, 0.9) 100%),
        linear-gradient(115deg, rgba(204, 51, 51, 0.32) 0%, rgba(204, 51, 51, 0) 60%);
}

/* Centered context: drop the eyebrow's leading tick */
.home-cta .home-eyebrow::before {
    display: none;
}

.home-cta .home-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

.home-cta h2 {
    font-family: var(--home-display);
    font-size: clamp(2.8rem, 6vw, 4.75rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.94;
    color: var(--avfd-white);
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
    margin-bottom: 1rem;
}

.home-cta h2 .accent {
    color: var(--avfd-gold);
}

.home-cta .lead {
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 2.25rem;
}

.home-cta .btn {
    font-family: var(--home-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: 1.25rem;
    padding: 0.7rem 2.2rem;
    margin: 0.4rem;
}

/* Compact social row folded into the CTA (replaces the old filler section) */
.home-cta-social {
    margin-top: 3rem;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.9rem;
}

.home-cta-social .social-label {
    font-family: var(--home-display);
    font-size: 0.95rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    margin-right: 0.4rem;
}

.home-cta-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: var(--avfd-white);
    font-size: 1.1rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.home-cta-social a:hover,
.home-cta-social a:focus {
    background: var(--avfd-red);
    border-color: var(--avfd-red);
    transform: translateY(-3px);
    color: #fff;
}

/* ================================================== */
/* SECTION HEADERS (shared home layout)                */
/* ================================================== */

.home-section-head {
    margin-bottom: 2.75rem;
}

.home-section-head.centered {
    text-align: center;
}

.home-section-head.centered .home-eyebrow {
    justify-content: center;
}

.home-section-head.centered .home-eyebrow::before {
    display: none;
}

.home-section-head .home-display {
    font-size: clamp(2.4rem, 4vw, 3.6rem);
}

/* ================================================== */
/* INTERIOR PAGE PRIMITIVES                            */
/* ================================================== */

/* Interior hero: same editorial voice as the homepage, shorter so the page's
   content leads. Used with the base .hero-section (scrim, cover photo). */
.pub-hero {
    min-height: 440px;
    height: 54vh;
    max-height: 640px;
    text-align: left;
    justify-content: flex-start;
}

.pub-hero .hero-content {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 6.5rem 2rem 3rem;
}

.pub-hero-inner {
    max-width: 780px;
}

.pub-hero .home-eyebrow {
    color: var(--avfd-gold);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.pub-hero .home-eyebrow::before {
    background: var(--avfd-red);
}

.pub-hero h1 {
    font-family: var(--home-display);
    font-size: clamp(2.9rem, 6.5vw, 5rem);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.94;
    color: var(--avfd-white);
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55);
    margin: 1rem 0 0;
}

.pub-hero .lead {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    max-width: 36em;
    margin: 1.25rem 0 1.9rem;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

/* Framed photo treatment for content imagery (history, featurettes). */
.home-photo-frame {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    border-bottom: 5px solid var(--avfd-red);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 14px 32px rgba(15, 20, 25, 0.18);
}

/* Join-segment photo strip: mixed portrait/landscape sources crop to an even
   row (the frame treatment comes from .home-photo-frame). */
.join-gallery-photo {
    height: 280px;
    object-fit: cover;
}

/* "Photo coming soon" placeholder (replaces the dead holder.js stub). */
.pub-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 8 / 5;
    background:
        repeating-linear-gradient(-45deg,
            rgba(26, 35, 50, 0.05) 0 18px,
            rgba(26, 35, 50, 0.1) 18px 36px),
        var(--home-paper);
    border-bottom: 5px solid var(--avfd-red);
    border-radius: 3px 3px 0 0;
    color: #6B7684;
    font-family: var(--home-display);
    font-size: 1.05rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Apparatus featurette headings (About page loop) pick up the display voice. */
.featurette-heading {
    font-family: var(--home-display);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 0.96;
    color: var(--avfd-navy);
}

.featurette-heading .text-muted {
    display: block;
    font-size: 0.45em;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--avfd-red) !important;
    margin-top: 0.35rem;
}

/* From the Archive — scrapbook grid of historical photos. Each card gets the
   kept-snapshot treatment from the homepage heritage block: white mat,
   caption, a whisper of rotation that squares up on hover. */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.75rem 1.5rem;
    align-items: start;
}

.archive-card {
    background: #fff;
    padding: 0.55rem 0.55rem 0.75rem;
    box-shadow: 0 10px 24px rgba(15, 20, 25, 0.16);
    transform: rotate(-0.8deg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.archive-grid .archive-card:nth-child(even) {
    transform: rotate(0.8deg);
}

.archive-card:hover {
    transform: rotate(0deg) translateY(-4px);
    box-shadow: 0 18px 36px rgba(15, 20, 25, 0.24);
}

.archive-card img {
    width: 100%;
    height: auto;
    display: block;
}

.archive-card figcaption {
    padding-top: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.45;
    color: #4A5462;
}

.archive-card .archive-year {
    display: block;
    font-family: var(--home-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--avfd-red);
    margin-bottom: 0.15rem;
}

/* Provenance line under a sourced narrative */
.source-note {
    font-size: 0.85rem;
    font-style: italic;
    color: #6B7684;
    border-left: 3px solid var(--home-gold-hairline);
    padding-left: 0.9rem;
}

@media (prefers-reduced-motion: reduce) {
    .archive-card,
    .archive-grid .archive-card:nth-child(even) {
        transform: none;
        transition: none;
    }
}

/* /history archive page */
.history-hero {
    /* Type-only hero: brand navy with a soft red ember glow, no photo —
       the archive photos below are the show. */
    background:
        radial-gradient(ellipse at 78% 18%, rgba(204, 51, 51, 0.22), transparent 55%),
        linear-gradient(180deg, var(--home-navy) 0%, var(--home-navy-deep) 100%);
    min-height: 380px;
    height: 44vh;
    max-height: 520px;
}

.history-hero::before {
    /* No scrim needed over a flat surface. */
    display: none;
}

.history-decade {
    padding: 4.5rem 0;
}

.history-decade .home-section-head .lead {
    max-width: 44em;
}

/* Anchor targets: leave room for the fixed navbar when jumping to #ph-… */
.archive-card {
    scroll-margin-top: 96px;
}

/* Brief highlight when a memoriam link lands on a photo */
.archive-card:target {
    outline: 3px solid var(--avfd-gold);
    outline-offset: 3px;
}

.history-contribute {
    background:
        radial-gradient(ellipse at 20% -20%, rgba(204, 51, 51, 0.16), transparent 55%),
        linear-gradient(180deg, var(--home-navy-deep) 0%, var(--home-navy) 100%);
    color: var(--avfd-white);
    padding: 5rem 1.5rem;
}

.history-contribute .home-display {
    color: var(--avfd-white);
}

.history-contribute .lead {
    color: rgba(255, 255, 255, 0.78);
    max-width: 38em;
    margin: 0 auto 1.75rem;
}

/* In Memoriam → archive photo cross-links */
.memorial-names a {
    color: var(--avfd-navy);
    text-decoration: none;
    border-bottom: 1px dotted var(--avfd-gold);
}

.memorial-names a:hover,
.memorial-names a:focus {
    color: var(--avfd-red);
    border-bottom-color: var(--avfd-red);
}

.memorial-names a .fa-image {
    font-size: 0.7em;
    color: var(--avfd-gold);
    margin-left: 0.3rem;
    vertical-align: 0.15em;
}

/* Memorial roll — dignified, condensed, gold-ruled. */
.memorial-names {
    max-width: 420px;
    margin: 0 auto;
}

.memorial-names p {
    font-family: var(--home-display);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--avfd-navy);
    padding: 0.55rem 0;
    margin: 0;
    border-bottom: 1px solid var(--home-gold-hairline);
}

.memorial-names p:last-child {
    border-bottom: none;
}

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

@media (max-width: 991.98px) {
    .home-heritage-photos {
        margin-top: 3rem;
    }
}

@media (max-width: 767.98px) {
    .home-hero {
        height: 82vh;
        min-height: 560px;
    }

    .pub-hero {
        height: 48vh;
        min-height: 380px;
    }

    .pub-hero .hero-content {
        padding: 5.5rem 1.25rem 2.5rem;
    }

    .home-hero .hero-content {
        padding: 6rem 1.25rem 3rem;
    }

    .home-stats {
        padding: 2.5rem 0 1.75rem;
    }

    .home-stats .stat-item {
        padding: 0.75rem 0.5rem;
        margin-bottom: 0.5rem;
    }

    .home-heritage,
    .home-missions,
    .home-events,
    .home-voices {
        padding: 4rem 0;
    }

    .home-cta {
        padding: 4.5rem 1.25rem;
    }

    .mission-card {
        min-height: 340px;
    }

    .home-voices .testimonial-item {
        padding: 1rem 2.25rem 1.5rem;
    }
}

@media (max-width: 575.98px) {
    /* Phones: swipe + auto-rotate carry the carousel; the side arrows would
       overlap the quote text at this width. */
    .home-voices .carousel-control-prev,
    .home-voices .carousel-control-next {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .home-hero-ctas {
        width: 100%;
    }

    /* Full-width tap targets one-handed at 375px */
    .home-hero-ctas .btn,
    .home-cta .btn {
        display: block;
        width: 100%;
        margin: 0.45rem 0;
    }

    .home-heritage-photos .photo-then {
        width: 52%;
    }
}

/* Respect reduced motion: kill the decorative transforms */
@media (prefers-reduced-motion: reduce) {
    .mission-card,
    .mission-card .mission-photo,
    .mission-card::before,
    .home-cta-social a {
        transition: none;
    }
}