/* ================================
HIGH SPEED PLANE WEBSITE
Purdue Black and Gold Theme
================================ */

/* ================================
GENERAL PAGE STYLING
================================ */

* {
    box-sizing: border-box;
}

body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #f4f4f4;
color: #1a1a1a;
}

/* ================================
CUSTOM FONT: UNISON PRO
Add the actual font files to a /fonts folder
next to style.css for this to take effect.
================================ */

@font-face {
font-family: "Unison Pro";
src: url("fonts/UnisonPro-BoldItalic.woff2") format("woff2"),
     url("fonts/UnisonPro-BoldItalic.woff") format("woff");
font-weight: 700;
font-style: italic;
font-display: swap;
}

/* ================================
SITE TITLE
================================ */

.site-title {
color: #CFB991;
font-size: 42px;
margin-left: 50px;
}

/* "High Speed Plane" hero title on the home page only */
body.home-page .site-title {
font-family: "Unison Pro", Arial, Helvetica, sans-serif;
font-weight: 700;
font-style: italic;
}

/* ================================
BANNER
================================ */

.logo-banner {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;


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

/* Give the banner its own compositor layer so it scrolls without
   forcing a repaint of the video/image every frame. */
transform: translateZ(0);
contain: layout paint;

}

/* Banner image / video */

.logo-banner img,
.logo-banner video {
position: absolute;


top: 0;
left: 0;

width: 100%;
height: 100%;

object-fit: cover;
object-position: center;

display: block;

z-index: 0;

/* Hint the browser to composite this on the GPU instead of repainting
   it on scroll - this is the main fix for scroll lag with the video. */
will-change: transform;
transform: translateZ(0);

}

/* Dark overlay */

.logo-banner::after {
content: "";


position: absolute;

top: 0;
right: 0;
bottom: 0;
left: 0;

background-color: rgba(0, 0, 0, 0.35);

z-index: 1;


}

/* Centered title */

.logo-banner .site-title {
position: relative;


z-index: 2;

width: 100%;

margin: 0 !important;
padding: 0 !important;

color: #CFB991;
font-size: 64px;

text-align: center;

text-shadow: 3px 3px 8px black;


}

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

@media (max-width: 600px) {

.logo-banner .site-title {
    font-size: 40px;
}

}


/* ================================
NAVIGATION BAR (full-width fixed top bar)
================================ */

.site-nav {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;

background-color: rgba(17, 17, 17, 0.97);
border-bottom: 2px solid #CFB991;

will-change: transform;
transform: translate3d(0, 0, 0);

transition: transform 0.35s ease,
            background-color 0.35s ease,
            border-bottom-color 0.35s ease;
}

/* Over the hero image: no bar, no line */
.site-nav.nav-transparent {
background-color: transparent;
border-bottom-color: transparent;
}

/* Scrolling down: slide the whole bar up out of view */
.site-nav.nav-hidden {
transform: translate3d(0, -100%, 0);
}

.nav-container {
max-width: none;
margin: 0 auto;
padding: 12px 16px;

display: flex;
align-items: center;
gap: 30px;
}

/* Logo */

.nav-logo {
display: flex;
align-items: center;
gap: 12px;

text-decoration: none;
flex-shrink: 0;
}

.nav-logo img {
height: 92px;
width: auto;

object-fit: contain;
}

/* Links */

.nav-links {
display: flex;
align-items: center;
gap: 26px;

margin-left: 6px;
flex: 1;
}

.nav-links a {
color: #e6e6e6;
text-decoration: none;
font-weight: bold;
font-size: 15px;
transition: 0.3s;
white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus-visible {
color: #CFB991;
}

.nav-links a:focus-visible {
outline: 2px solid #CFB991;
outline-offset: 3px;
}

.nav-links a.nav-cta {
background-color: #CFB991;
color: #000000;

padding: 10px 22px;

margin-left: 6px;
}

.nav-links a.nav-cta:hover,
.nav-links a.nav-cta:focus-visible {
background-color: #ffffff;
color: #000000;
outline: none;
}

/* Socials */

.nav-socials {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
margin-right: 12px;
}

.nav-socials a {
display: flex;
color: #cccccc;
transition: 0.3s;
}

.nav-socials a:hover,
.nav-socials a:focus-visible {
color: #CFB991;
}

.nav-socials svg {
width: 18px;
height: 18px;
fill: currentColor;
}

/* Mobile toggle */

.nav-toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}

.nav-toggle-label {
display: none;
align-items: center;

color: #CFB991;
font-size: 26px;
line-height: 1;

cursor: pointer;
user-select: none;

margin-left: auto;
}

.nav-toggle:focus-visible ~ .nav-toggle-label {
outline: 2px solid #CFB991;
outline-offset: 3px;
}

/* Push page content below the fixed bar on pages with no full-height banner */

body.no-banner main {
padding-top: 130px;
}

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

main {
max-width: 1100px;
margin: auto;
padding: 50px 25px;
}

section {
background-color: white;
padding: 35px;
margin-bottom: 35px;

border-left: 6px solid #CFB991;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

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

h1 {
color: #CFB991;
font-size: 42px;
}

h2 {
color: #000000;
border-bottom: 3px solid #CFB991;
padding-bottom: 10px;
}

h3 {
color: #000000;
}

p {
line-height: 1.6;
font-size: 17px;
}

/* ================================
OFFICER CARDS
================================ */

.officer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 25px;
margin-top: 30px;
}

.officer-card {
display: flex;
align-items: center;
gap: 20px;

background-color: #ffffff;

padding: 20px;

border: 2px solid #CFB991;

transition: 0.3s;

}

.officer-card {
transform: translateY(-5px);

box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

}

.officer-card img {
width: 110px;
height: 110px;

object-fit: cover;

border-radius: 50%;

border: 4px solid #CFB991;

}

.officer-info h3 {
margin: 0;
font-size: 22px;
}

.officer-info p {
margin-top: 8px;
}

/* ================================
BUTTONS
================================ */

button,
.button {
display: inline-block;

background-color: #CFB991;
color: #000000;

border: none;

padding: 14px 25px;

font-size: 16px;
font-weight: bold;

text-decoration: none;

cursor: pointer;

transition: 0.3s;

}

button,
.button {
background-color: #000000;
color: #CFB991;
}

/* ================================
CONTACT PAGE
================================ */

.contact-link {
display: inline-block;

margin-top: 15px;

padding: 15px 25px;

background-color: #CFB991;
color: black;

text-decoration: none;

font-weight: bold;

}

.contact-link {
background-color: black;
color: #CFB991;
}

/* ================================
MISSION SECTION
================================ */

.mission-grid {
display: grid;
grid-template-columns: 1.6fr 1fr;
gap: 35px;
align-items: start;
}

.spec-list {
border-left: 3px solid #CFB991;
padding-left: 22px;
}

.spec-list dt {
font-weight: bold;
color: #000000;
margin-top: 14px;
}

.spec-list dt:first-child {
margin-top: 0;
}

.spec-list dd {
margin: 4px 0 0;
color: #444444;
}

/* ================================
EVENT SECTION
================================ */

.event-head {
display: flex;
align-items: baseline;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}

.event-tag {
background-color: #CFB991;
color: #000000;
font-weight: bold;
font-size: 14px;
padding: 6px 14px;
border-radius: 3px;
}

.event-details {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin: 20px 0 25px;
}

.event-details div {
border: 2px solid #CFB991;
padding: 14px 18px;
}

.event-details dt {
font-weight: bold;
font-size: 14px;
color: #000000;
margin: 0 0 6px;
}

.event-details dd {
margin: 0;
font-size: 17px;
}

@media (max-width: 600px) {

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

.spec-list {
    border-left: none;
    border-top: 3px solid #CFB991;
    padding-left: 0;
    padding-top: 18px;
}

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

}

/* ================================
PROJECT CARDS
================================ */

.project-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
margin-top: 30px;
}

.project-card {
background-color: #ffffff;
border: 2px solid #CFB991;
overflow: hidden;
}

.project-card img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}

.project-card-body {
padding: 20px;
}

.project-specs {
list-style: none;
margin: 14px 0 0;
padding: 0;
font-size: 15px;
}

.project-specs li {
display: flex;
justify-content: space-between;
gap: 10px;
padding: 6px 0;
border-bottom: 1px solid #e5e5e5;
}

.project-specs li:last-child {
border-bottom: none;
}

.project-specs span:first-child {
font-weight: bold;
}

/* ================================
ACHIEVEMENTS / STATS
================================ */

.stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 25px;
}

.stat-card {
border: 2px solid #CFB991;
padding: 18px 20px;
text-align: center;
}

.stat-card .stat-number {
display: block;
color: #CFB991;
font-size: 32px;
font-weight: bold;
}

.stat-card .stat-label {
display: block;
margin-top: 6px;
font-size: 15px;
}

/* ================================
SUBTEAM CARDS (JOIN PAGE)
================================ */

.subteam-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 25px;
margin-top: 30px;
}

.subteam-card {
border: 2px solid #CFB991;
padding: 20px;
background-color: #ffffff;
}

.subteam-card h3 {
border-bottom: 2px solid #CFB991;
padding-bottom: 8px;
margin-top: 0;
}

/* ================================
SPONSOR CARDS
================================ */

.sponsor-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-top: 25px;
}

.sponsor-card {
border: 2px solid #CFB991;
background-color: #ffffff;
padding: 25px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: bold;
min-height: 100px;
}

.sponsor-card {
flex-direction: column;
}

.sponsor-card-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
}

.sponsor-card img {
max-width: 100%;
max-height: 80px;
object-fit: contain;
}

.sponsor-name {
font-weight: bold;
}

.sponsor-link {
color: #000000;
font-size: 14px;
font-weight: bold;
text-decoration: underline;
}

/* ================================
GALLERY
================================ */

.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 15px;
margin-top: 25px;
}

.gallery-grid img {
width: 100%;
height: 220px;
object-fit: cover;
border: 2px solid #CFB991;
display: block;
}

/* ================================
EVENT LIST (PAST EVENTS)
================================ */

.event-list {
list-style: none;
margin: 25px 0 0;
padding: 0;
}

.event-list li {
border-left: 4px solid #CFB991;
padding: 10px 0 10px 18px;
margin-bottom: 14px;
}

.event-list .event-date {
display: block;
font-weight: bold;
font-size: 14px;
color: #666666;
}

.event-list .event-name {
display: block;
font-size: 18px;
margin-top: 2px;
}

/* ================================
FAQ
================================ */

.faq-list {
margin-top: 25px;
}

.faq-item {
border: 2px solid #CFB991;
padding: 14px 20px;
margin-bottom: 14px;
background-color: #ffffff;
}

.faq-item summary {
cursor: pointer;
font-weight: bold;
font-size: 17px;
}

.faq-item p {
margin: 12px 0 0;
}

@media (max-width: 600px) {

.project-grid,
.subteam-grid,
.sponsor-grid,
.gallery-grid,
.stat-grid {
    grid-template-columns: 1fr;
}

}

/* ================================
404 PAGE
================================ */

.error-page {
text-align: center;
padding: 60px 25px;
}

.error-page .error-code {
color: #CFB991;
font-size: 90px;
font-weight: bold;
margin: 0;
}

.error-page p {
font-size: 19px;
}

/* ================================
HOME PAGE — DISTINCT LANDING LAYOUT
================================ */

body.home-page main {
max-width: none;
padding: 0;
margin: 0;
}

/* Hero content layered over the video */
.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 20px;
}

.hero-tagline {
color: #ffffff;
font-size: 20px;
max-width: 560px;
margin: 18px auto 30px;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
}

.hero-actions {
display: flex;
justify-content: center;
gap: 18px;
flex-wrap: wrap;
}

.button-outline {
display: inline-block;
padding: 14px 25px;
font-size: 16px;
font-weight: bold;
text-decoration: none;
border: 2px solid #CFB991;
color: #CFB991;
background: transparent;
transition: 0.3s;
}

.button-outline:hover,
.button-outline:focus-visible {
background-color: #CFB991;
color: #000000;
}

/* Stat highlight band, angled top edge for a bit of motion */
.stats-band {
background-color: #000000;
padding: 90px 25px 60px;
}

.stats-band-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 25px;
text-align: center;
}

.stat-block .stat-num {
display: block;
color: #CFB991;
font-size: 44px;
font-weight: bold;
}

.stat-block .stat-word {
display: block;
margin-top: 6px;
color: #ffffff;
font-size: 15px;
}

/* Mission, presented as a large asymmetric feature instead of a boxed card */
.mission-feature {
background-color: #ffffff;
padding: 80px 25px;
}

.mission-feature-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 50px;
align-items: start;
}

.mission-feature-inner h2 {
font-size: 40px;
line-height: 1.15;
border-bottom: none;
padding-bottom: 0;
}

.mission-lede {
font-size: 22px;
font-weight: bold;
color: #1a1a1a;
line-height: 1.5;
margin-top: 0;
}

.feature-link {
display: inline-block;
margin-top: 8px;
color: #000000;
font-weight: bold;
text-decoration: none;
border-bottom: 3px solid #CFB991;
padding-bottom: 2px;
}

.feature-link:hover,
.feature-link:focus-visible {
color: #CFB991;
}

/* Featured project teaser, image split against copy */
.project-teaser {
background-color: #f4f4f4;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}

.project-teaser-media img {
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
display: block;
}

.project-teaser-youtube {
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 320px;
    overflow: hidden;
    background-color: #000000;
}

.project-teaser-youtube iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.project-teaser-content {
padding: 60px 50px;
display: flex;
flex-direction: column;
justify-content: center;
}

.project-teaser-content h3 {
font-size: 28px;
margin-top: 4px;
}

.project-teaser-content .event-tag {
display: inline-block;
margin-bottom: 14px;
align-self: flex-start;
}

/* ================================
SITREP (HOME PAGE PROGRESS UPDATE)
================================ */

.sitrep-band {
background-color: #f4f4f4;
padding: 60px 25px 20px;
}

.sitrep-inner {
max-width: 1100px;
margin: 0 auto;

display: grid;
grid-template-columns: 1fr 1fr;
gap: 70px;

align-items: start;
}

.sitrep-heading h2 {
color: #000000;
font-size: 40px;

border-bottom: none;
padding-bottom: 0;

margin: 0 0 18px;
}

.sitrep-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;

color: #999999;
font-size: 14px;

margin: 0 0 22px;
}

.sitrep-status {
background-color: #CFB991;
color: #000000;

font-size: 12px;
font-weight: bold;
letter-spacing: 0.08em;
text-transform: uppercase;

padding: 5px 12px;
}

.sitrep-summary {
color: #444444;
line-height: 1.7;

max-width: 480px;
margin-bottom: 28px;
}

.sitrep-featured-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.sitrep-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sitrep-log {
list-style: none;
margin: 0;
padding: 0;

border-left: 2px solid #2a2a2a;
}

.sitrep-log-item {
position: relative;
display: flex;
gap: 18px;

padding: 0 0 30px 26px;
}

.sitrep-log-item:last-child {
padding-bottom: 0;
}

.sitrep-log-marker {
position: absolute;
left: -6px;
top: 4px;

width: 11px;
height: 11px;
border-radius: 50%;

background-color: #2a2a2a;
border: 2px solid #2a2a2a;
}

.sitrep-log-item.done .sitrep-log-marker {
background-color: #CFB991;
border-color: #CFB991;
}

.sitrep-log-item.active .sitrep-log-marker {
background-color: #000000;
border-color: #CFB991;
box-shadow: 0 0 0 3px rgba(207, 185, 145, 0.25);
}

.sitrep-log-date {
display: block;

font-family: "Courier New", monospace;
color: #CFB991;
font-size: 13px;
font-weight: bold;
letter-spacing: 0.05em;
text-transform: uppercase;

margin-bottom: 6px;
}

.sitrep-log-item p {
color: #e6e6e6;
font-size: 16px;
line-height: 1.5;
margin: 0;
}

@media (max-width: 900px) {

.sitrep-inner {
    grid-template-columns: 1fr;
    gap: 40px;
}

}

@media (max-width: 600px) {

.sitrep-band {
    padding: 50px 20px 15px;
}

.sitrep-featured-image {
    aspect-ratio: 16 / 9;
}

.sitrep-heading h2 {
    font-size: 30px;
}

}

/* Event banner, high-contrast gold strip */
.event-banner {
background-color: #CFB991;
padding: 35px 25px;
}

.event-banner-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}

.event-banner h2 {
color: #000000;
font-size: 16px;
letter-spacing: 0.02em;
border-bottom: none;
padding-bottom: 0;
margin: 0 0 6px;
}

.event-banner h3 {
color: #000000;
font-size: 28px;
border-bottom: none;
padding-bottom: 0;
margin: 0;
}

.event-banner p {
margin: 8px 0 0;
color: #1a1a1a;
font-weight: bold;
}

.event-banner .button {
background-color: #000000;
color: #CFB991;
}

.event-banner .button:hover,
.event-banner .button:focus-visible {
background-color: #ffffff;
color: #000000;
}

/* Closing CTA band */
.cta-band {
background-color: #000000;
color: #ffffff;
text-align: center;
padding: 80px 25px;
}

.cta-band h2 {
color: #ffffff;
font-size: 34px;
border-bottom: none;
padding-bottom: 0;
}

.cta-band p {
max-width: 540px;
margin: 14px auto 26px;
color: #cccccc;
}

@media (max-width: 900px) {

.stats-band-inner {
    grid-template-columns: repeat(2, 1fr);
}

.mission-feature-inner {
    grid-template-columns: 1fr;
}

.project-teaser {
    grid-template-columns: 1fr;
}

.project-teaser-media img {
    min-height: 240px;
}

.project-teaser-youtube {
    min-height: 0;
}

}

@media (max-width: 600px) {

.stats-band-inner {
    grid-template-columns: 1fr;
    gap: 30px;
}

.mission-feature-inner h2 {
    font-size: 30px;
}

.mission-lede {
    font-size: 19px;
}

.cta-band h2 {
    font-size: 26px;
}

}

/* ================================
ABOUT PAGE — MODERN LANDING LAYOUT
================================ */

body.about-page main {
max-width: none;
margin: 0;
padding: 0;
}

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

.hero-eyebrow,
.section-eyebrow {
color: #CFB991;
font-size: 13px;
font-weight: bold;
letter-spacing: 0.15em;
margin: 0 0 16px;
}

.about-hero .hero-content {
max-width: 850px;
}

.about-hero .site-title {
font-size: 64px;
}

.about-hero .hero-tagline {
max-width: 680px;
font-size: 20px;
}

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

.about-intro {
background-color: #ffffff;
padding: 100px 25px;
}

.about-intro-inner {
max-width: 1100px;
margin: 0 auto;

display: grid;
grid-template-columns: 0.9fr 1.1fr;

gap: 80px;

align-items: start;

}

.about-intro-heading h2 {
font-size: 40px;
line-height: 1.1;

margin: 0;

border-bottom: none;
padding-bottom: 0;

}

.about-intro-content {
max-width: 620px;
}

.about-lede {
font-size: 23px;
font-weight: bold;

line-height: 1.5;

margin-top: 0;

}

/* ================================
WHAT WE DO
================================ */

.about-values {
background-color: #000000;
padding: 100px 25px;
}

.about-values-inner {
max-width: 1100px;
margin: 0 auto;
}

.values-heading {
max-width: 650px;

margin-bottom: 55px;

}

.values-heading h2 {
color: #ffffff;

font-size: 40px;

border-bottom: none;
padding-bottom: 0;

margin-top: 0;

}

.values-heading > p {
color: #cccccc;
line-height: 1.6;
}

.values-grid {
display: grid;

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

gap: 1px;

background-color: #2a2a2a;

}

.value-card {
background-color: #111111;

padding: 40px 30px;

border-top: 3px solid transparent;

transition: transform 0.3s ease,
            background-color 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease;

}

.value-card:hover {
transform: translateY(-8px);

background-color: #181818;

border-top-color: #CFB991;

box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);

}

.value-number {
display: inline-flex;
align-items: center;
justify-content: center;

width: 42px;
height: 42px;

margin-bottom: 28px;

border: 1px solid #CFB991;
border-radius: 50%;

color: #CFB991;

font-size: 14px;
font-weight: bold;

}

.value-card h3 {
color: #ffffff;

font-size: 24px;

margin-bottom: 12px;

}

.value-card p {
color: #b3b3b3;

font-size: 16px;
line-height: 1.6;

margin-bottom: 0;

}

/* ================================
TEAM SECTIONS
================================ */

.team-section {
background-color: #f4f4f4;
padding: 100px 25px;
}

.team-section-heading {
max-width: 1100px;

margin: 0 auto 55px;

display: flex;

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

gap: 50px;

}

.team-section-heading h2,
.subteam-heading h2 {
font-size: 40px;

border-bottom: none;
padding-bottom: 0;

margin: 0;

}

.team-section-heading > p {
max-width: 450px;

margin: 0;

}

.team-grid {
max-width: 1100px;

margin: 0 auto;

display: grid;

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

gap: 25px;

}

/* ================================
TEAM CARDS
================================ */

.team-card {
background-color: #ffffff;

overflow: hidden;

box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);

transition: transform 0.3s,
            box-shadow 0.3s;

}

.team-card {
transform: translateY(-8px);

box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);

}

.team-card-image {
width: 100%;

aspect-ratio: 1 / 1;

overflow: hidden;

background-color: #dddddd;

}

.team-card-image img {
width: 100%;
height: 100%;

object-fit: cover;

display: block;

transition: transform 0.4s;

}

.team-card .team-card-image img {
transform: scale(1.05);
}

.team-card-info {
padding: 22px 20px 25px;

border-top: 4px solid #CFB991;

}

.team-role {
color: #777777;

font-size: 12px;

font-weight: bold;

letter-spacing: 0.1em;

margin: 0 0 8px;

}

.team-card-info h3 {
font-size: 22px;

margin: 0;

}

/* ================================
SUBTEAM LEADERS
================================ */

.subteam-leaders-section {
background-color: #ffffff;
padding: 100px 25px;
}

.subteam-leaders-inner {
max-width: 1100px;

margin: 0 auto;

}

.subteam-heading {
max-width: 620px;

margin-bottom: 55px;

}

.subteam-heading > p {
margin-top: 20px;
}

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

.about-cta {
background-color: #CFB991;
padding: 100px 25px;
text-align: center;
}

.about-cta > div {
max-width: 700px;

margin: 0 auto;

}

.about-cta .section-eyebrow {
color: #000000;
}

.about-cta h2 {
font-size: 40px;

color: #000000;

border-bottom: none;
padding-bottom: 0;

}

.about-cta p:not(.section-eyebrow) {
    max-width: 600px;
    margin: 20px auto 30px;
    color: #1a1a1a;
}

.about-cta .button {
background-color: #000000;

color: #CFB991;

margin-top: 5px;

}

.about-cta .button,
.about-cta .button {
background-color: #ffffff;

color: #000000;

}

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

@media (max-width: 1000px) {

.about-intro-inner {
    grid-template-columns: 1fr;

    gap: 35px;
}

.values-grid {
    grid-template-columns: repeat(2, 1fr);
}

.team-grid {
    grid-template-columns: repeat(2, 1fr);
}

}

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

@media (max-width: 600px) {

.about-hero .site-title {
    font-size: 40px;
}

.about-hero .hero-tagline {
    font-size: 18px;
}

.about-intro,
.about-values,
.team-section,
.subteam-leaders-section,
.about-cta {
    padding: 70px 20px;
}

.about-intro-heading h2,
.values-heading h2,
.team-section-heading h2,
.subteam-heading h2,
.about-cta h2 {
    font-size: 30px;
}

.about-lede {
    font-size: 20px;
}

.team-section-heading {
    flex-direction: column;

    align-items: flex-start;

    gap: 20px;
}

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

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

.value-card {
    padding: 30px 25px;
}

}

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

footer {
background-color: #000000;
color: white;

text-align: center;

padding: 30px;

border-top: 5px solid #CFB991;

}

footer p {
margin: 0;
}

.footer-inner {
max-width: 1100px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}

.footer-social {
display: flex;
gap: 20px;
}

.footer-social a {
color: #CFB991;
text-decoration: none;
font-weight: bold;
font-size: 15px;
transition: 0.3s;
}

.footer-social a:hover,
.footer-social a:focus-visible {
color: white;
}

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

@media (max-width: 600px) {

.site-title {
    font-size: 32px;
    margin-left: 20px;
}

.nav-container {
    padding: 10px 18px;
    flex-wrap: wrap;
}

.nav-toggle-label {
    display: flex;
    margin-left: auto;
}

.nav-links,
.nav-socials {
    display: none;
    width: 100%;
}

.nav-toggle:checked ~ .nav-links,
.nav-toggle:checked ~ .nav-socials {
    display: flex;
}

.nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin: 16px 0 0;
}

.nav-links a.nav-cta {
    margin-left: 0;
}

.nav-socials {
    justify-content: flex-start;
    gap: 18px;
    margin: 14px 0 4px;
}

body.no-banner main {
    padding-top: 100px;
}

main {
    padding: 30px 15px;
}

section {
    padding: 25px;
}

.officer-container {
    grid-template-columns: 1fr;
}

.officer-card {
    flex-direction: column;
    text-align: center;
}

.footer-social {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

}
/* ================================
CMS-DYNAMIC CONTENT
================================ */
#projects-list > .project-teaser {
    margin: 0;
}

.sitrep-featured-image {
    aspect-ratio: 16 / 9;
    min-height: 0;
}

.sitrep-featured-image img {
    aspect-ratio: 16 / 9;
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 700px) {
    .sitrep-featured-image,
    .sitrep-featured-image img {
        min-height: 0;
    }
}

/* ================================
SUBTEAM CMS IMAGE
================================ */

.subteam-card-image {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
margin: -20px -20px 20px;
width: calc(100% + 40px);
}


/* ================================
   EVENTS + GOOGLE CALENDAR
   ================================ */

.event-card,
.upcoming-event-card {
    margin-bottom: 1.5rem;
}

.event-card-content {
    padding: 1.5rem;
}

/* Uses the site's existing .button hero/action styling. */
.google-calendar-button {
    margin-top: 1rem;
}

/* ================================
   POSTS + YOUTUBE
   ================================ */

/* YouTube replaces the featured photo while keeping the same media position.
   Videos must remain a true 16:9 player rather than inheriting the photo's
   square dimensions. */
.latest-post-youtube {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    background: #000000;
}

.latest-post-youtube iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border: 0;
}

@media (max-width: 900px) {
    .latest-post-youtube {
        width: 100%;
        aspect-ratio: 16 / 9;
        height: auto;
    }

    .latest-post-youtube iframe {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }
}