body {
    min-height: 100vh;
    background: linear-gradient(180deg,#383D42,#2F3438) fixed;
}

.nav-link:hover {

    color:#87c98a !important;

}

.navbar-brand {

    color:white !important;

}

.nav-link.active{

    color:#87c98a !important;

}

.hero {

    position: relative;

    min-height: 320px;      /* or whatever height you settled on */

    border-radius: 18px;

    overflow: hidden;

    display: flex;

    align-items: stretch;

}


.hero-content {

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

    height: 100%;
    max-width: 50%;
    padding: 3rem;
    color: #f5f4ee;
}

.hero-content h1 {
    color: #f5f4ee;
}

.hero-lead {
    color: rgba(245,244,238,0.90);

    font-size: 1.35rem;

    line-height: 1.6;

    max-width: 32rem;

    opacity: .92;
}

.hero h1 {

    font-size: clamp(3rem,7vw,5rem);

    line-height: 1;

    margin-bottom: 1rem;

    font-family: Georgia, serif;
}

.hero-kicker {

    display: inline-block;

    margin-bottom: 1rem;

    font-size: 0.95rem;

    font-weight: 700;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: var(--accent);
}


@media (max-width: 768px){

    .hero {
    
        min-height: 320px;
    
    }
    
    .hero-content {
    
        max-width: 100%;
    
        padding: 2rem;
    
    }
    
    .hero h1 {
    
        font-size: clamp(3rem,12vw,4rem);
    
    }
    
    .hero-lead {
    
        max-width: none;
    
        font-size: 1.15rem;
    
    }
}

.section-introduction {
    padding: clamp(3rem, 7vw, 6rem) 0;
}

.section-introduction h2,
.section-heading h2 {
    margin-bottom: 1.25rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    color: #f1f0e8;
}

.section-introduction p {
    color: rgba(241, 240, 232, 0.78);
    font-size: 1.05rem;
    line-height: 1.85;
}

.section-introduction .lead {
    color: rgba(241, 240, 232, 0.94);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
}

.section-kicker,
.hero-kicker {
    margin-bottom: 0.65rem;
    color: #9caf94;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.radio-topics {
    padding: 0 0 clamp(4rem, 8vw, 7rem);
}

.section-heading {
    margin-bottom: 2rem;
}

/*
.topic-list {
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    border-left: 1px solid rgba(255, 255, 255, 0.11);
}

.topic-list > div {
    border-right: 1px solid rgba(255, 255, 255, 0.11);
    border-bottom: 1px solid rgba(255, 255, 255, 0.11);
}
*/


.topic-link {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;

    min-height: 150px;
    padding: 1.75rem;

    color: inherit;
    text-decoration: none;

    background: rgba(255, 255, 255, 0.025);

    transition:
        background-color 180ms ease,
        transform 180ms ease;
}

.topic-link:hover,
.topic-link:focus-visible {
    color: inherit;
    background: rgba(126, 151, 118, 0.11);
}

.topic-link:focus-visible {
    outline: 2px solid #9caf94;
    outline-offset: -2px;
}

.topic-icon {
    display: grid;
    place-items: center;

    width: 3.5rem;
    height: 3.5rem;

    color: #a9bda2;
    font-size: 1.55rem;

    border: 1px solid rgba(169, 189, 162, 0.36);
    border-radius: 50%;
}

.topic-copy {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.topic-copy strong {
    color: #f1f0e8;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.35rem;
    font-weight: 500;
}

.topic-copy small {
    max-width: 32rem;
    color: rgba(241, 240, 232, 0.66);
    font-size: 0.96rem;
    line-height: 1.55;
}

.topic-arrow {
    color: rgba(169, 189, 162, 0.65);
    font-size: 1.25rem;

    transition: transform 180ms ease;
}



.topic-link:hover .topic-arrow {
    transform: translateX(0.3rem);
}

@media (max-width: 575.98px) {
    .topic-link {
        grid-template-columns: auto 1fr;
        min-height: auto;
        padding: 1.35rem 1rem;
    }

    .topic-icon {
        width: 3rem;
        height: 3rem;
        font-size: 1.3rem;
    }

    .topic-arrow {
        display: none;
    }
}



.content-panel {

    padding: 2.5rem 0;

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


}

.heading-bar {

    display:block;

    width:100%;

    margin:0 0 1.25rem 0;

    padding:.5rem 1rem;

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

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

}

.content-panel h2 {

    font-family: Georgia, serif;

    font-size: 2rem;

    margin-bottom: .75rem;

    color: var(--text-main);

    color: #ffffff;
    
}

.content-panel .lead {

    color: var(--accent);

    font-size: 1.15rem;

    margin-bottom: 1rem;
    
    color: #ffffff;

}

.content-body {
    color: #ffffff;
}