/* reset */

*{
margin:0;
box-sizing:border-box;
font-family:Helvetica, Arial, sans-serif;
}

body{
color:white;
background:#000;
}

/* landing section */

.landing-extra{
position:relative;
height:80vh;
overflow:hidden;
padding-top:70px;
}
.landing{
position:relative;
height:100vh;
overflow:hidden;
padding-top:70px;
}
/* header */

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

border-bottom:1px solid rgba(160,160,160,0.2);
}

.site-header::before{
content:"";
position:absolute;
inset:0;

background:linear-gradient(
to bottom,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.50) 50%,
rgba(0,0,0,0.25) 80%,
transparent 100%
);

backdrop-filter:blur(8px);
z-index:-1;
}

.site-header::after{
content:"";
position:absolute;
left:0;
bottom:0;
width:100%;
height:1px;

background:linear-gradient(
to right,
transparent,
rgba(255,255,255,0.35),
transparent
);
}

.header-inner{
max-width:1200px;
margin:auto;

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

padding:1rem 2rem;
}

.nav-links a{
color:white;
text-decoration:none;
margin-left:1.5rem;
}

/* background */

.background{
width:100%;
position:absolute;
inset:0;

background:url("background.jpg") center/cover no-repeat;

filter:brightness(.6);
transform:scale(1.1);

z-index:-1;

/* fade toward bottom */

mask-image:linear-gradient(
to bottom,
black 0%,
black 25%,
transparent 100%
);

-webkit-mask-image:linear-gradient(
to bottom,
black 0%,
black 25%,
transparent 100%
);
}

/* blur appears gradually lower on screen */

.background::after{
content:"";
position:absolute;
inset:0;

backdrop-filter:blur(16px);

mask-image:linear-gradient(
to bottom,
transparent 0%,
transparent 20%,
black 60%,
black 100%
);

-webkit-mask-image:linear-gradient(
to bottom,
transparent 0%,
transparent 20%,
black 60%,
black 100%
);
}

/* emblem */
#scroll-next {
    background: rgba(255, 255, 255, 0.593); /* White fill */
    border: none;
    color: black; /* Text color changed to black for contrast against white fill */
    
    padding: 8px 12px;
    margin-left: 2rem;
    
    /* The Squircle Look */
    border-radius: 12px; 
    
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    
    transition: all 0.2s ease;
}

#scroll-next:hover {
    background: rgba(255, 255, 255, 0.85); /* Slight fade on hover */
    transform: translateY(2px); /* Subtle physical feedback */
}
.main-emblem{
width:100%;
max-width:280px;

aspect-ratio:1 / 1;
object-fit:contain;

flex-shrink:0;
}

/* horizontal section layout */
.page-heading{
font-size:6vw;
font-weight:900;
line-height:0.9;
letter-spacing:-0.04em;

text-align:center;


margin:0 auto;

padding:4rem 2rem;
}
#horizontal{
margin:auto;

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

gap:4rem;
padding:6rem 2rem;
}

#horizontal p{

line-height:1.6;
}

/* landing grid */

.layout{
position:relative;

height:100%;

margin:auto;

display:grid;
grid-template-columns:1fr;
grid-template-rows:auto 1fr auto;

padding:2rem;
}

/* navigation */

.nav{
font-weight:700;
font-size:14px;
letter-spacing:.15em;
}

/* hero */

.hero{
align-self:end;

}

/* hero title */

.hero h1{
font-size:12vw;
font-weight:900;
line-height:.82;
letter-spacing:-0.05em;
display:inline-block;

opacity:0;
animation:fadeIn 1.4s ease forwards;
animation-delay:.4s;
}
.hero h2{
font-size:10vw;
font-weight:900;
line-height:.82;
letter-spacing:-0.05em;
display:inline-block;

opacity:0;
animation:fadeIn 1.4s ease forwards;
animation-delay:.4s;
}
.committee-button{
display:inline-block;

margin-right:12px;
margin-top:10px;

padding:6px 14px;

font-size:0.9rem;
text-decoration:none;
color:white;

border:1px solid rgba(255,255,255,0.35);

transition:all .2s ease;
}

.committee-button:hover{
background:rgba(255,255,255,0.15);
border-color:white;
}
.register-container{

margin:4rem auto;
padding:0 2rem;
}

.register-form{
display:flex;
flex-direction:column;
gap:1rem;
}

.register-form label{
font-size:0.85rem;
opacity:.75;
}

.register-form input,
.register-form select{
background:transparent;
border:1px solid rgba(255,255,255,0.35);
color:white;

padding:10px;
font-size:0.9rem;
}

.register-form input::placeholder{
color:rgba(255,255,255,0.5);
}

.register-form button{
margin-top:1rem;

background:transparent;
border:1px solid rgba(255,255,255,0.5);
color:white;

padding:10px 14px;
cursor:pointer;

transition:all .2s;
}

.register-form button:hover{
background:rgba(255,255,255,0.15);
}
/* animation */

@keyframes fadeIn{

from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
hr{
border:none;
height:1px;

margin:4rem auto;

background:linear-gradient(
to right,
transparent,
rgba(255,255,255,0.35),
transparent
);
}
/* footer */

.footer{
font-size:12px;
opacity:.7;
}
.footnote {
    
    /* Margin: Top 6rem, Left/Right Auto, Bottom 3rem (keeps space below the line) */
    margin: 6rem auto 1rem auto;

    /* Padding: Top 2rem, Right 2rem, Bottom 0, Left 2rem */
    padding: 2rem 2rem 0 2rem;

    font-size: 0.9rem;
    line-height: 1.6;

    opacity: 0.7;
    color: #ddd;
}
.team-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:4rem;
}

.team-row.reverse{
flex-direction:row-reverse;
}

.team-image{
width:220px;
aspect-ratio:3 / 4;
object-fit:cover;
opacity:0.8;
}

.contact-container{

margin:4rem auto;
padding:0 2rem;
}

.contact-container h3{
margin-bottom:1.5rem;
}

.contact-block{
margin-bottom:2rem;
}

.contact-label{
font-size:0.9rem;
letter-spacing:.05em;
opacity:0.7;
margin-bottom:0.5rem;
}

.contact-block p{
line-height:1.6;
margin-bottom:0.4rem;
}

.contact-block a{
color:white;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.3);
}

.contact-block a:hover{
border-color:white;
}
/* hamburger */

.hamburger{
display:none;
flex-direction:column;
gap:4px;

background:none;
border:none;
cursor:pointer;
}

.hamburger span{
width:22px;
height:2px;
background:white;
display:block;
}

/* nav default (desktop) */

.nav-links{
display:flex;
align-items:center;
}

/* mobile styles */

@media (max-width: 768px){

.nav-links{
position:absolute;
top:80px;
left:50%;
transform:translateX(-50%) translateY(-20px);

width:90%;
max-width:400px;

display:flex;
flex-direction:column;
align-items:flex-start;

padding:1.2rem 1.5rem;

/* glass card */

background:rgba(0,0,0,0.55);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

/* floating look */

border-radius:12px;
box-shadow:0 10px 30px rgba(0,0,0,0.4);
border:1px solid rgba(255,255,255,0.1);

/* hidden state */

opacity:0;
pointer-events:none;

transition:all 0.3s ease;
}

/* visible state */

.nav-links.show{
transform:translateX(-50%) translateY(0);
opacity:1;
pointer-events:auto;
}

.nav-links a{
margin:0.6rem 0;
width:100%;
}

.hamburger{
display:flex;
}

#scroll-next{
display:none;
}

}
/* animate hamburger into X */

.hamburger span{
transition:all 0.3s ease;
}

.hamburger.active span:nth-child(1){
transform:translateY(6px) rotate(45deg);
}

.hamburger.active span:nth-child(2){
opacity:0;
}

.hamburger.active span:nth-child(3){
transform:translateY(-6px) rotate(-45deg);
}
.form-wrapper{
max-width:1200px;
margin:4rem auto;
padding:1.5rem;

/* glass effect */
background:rgba(0,0,0,0.45);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);

/* structure */
border-radius:16px;
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 20px 50px rgba(0,0,0,0.5);

/* spacing + containment */
overflow:hidden;
}

/* iframe */

.form-wrapper iframe{
width:100%;
height:950px;
border:none;
background:transparent;
}
.register-options{
display:flex;
flex-direction:column;
gap:1rem;
margin-top:2rem;
}

.register-card{
display:block;

padding:1.5rem;
text-decoration:none;
color:white;

border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.03);

transition:all .2s ease;
}

.register-card:hover{
background:rgba(255,255,255,0.08);
border-color:white;
}
/* --- Universal Mobile Refinements --- */

@media (max-width: 768px) {
    
    /* 1. Standardize Content Spacing */
    #horizontal, 
    .team-row, 
    .team-row.reverse {
        flex-direction: column !important; /* Force vertical stack */
        text-align: center;
        gap: 2rem;
        padding: 3rem 1.5rem; /* Reduced padding for mobile */
    }

    /* 2. Responsive Hero Text */
    .hero h1 {
        font-size: 18vw; /* Scales better on narrow screens */
        line-height: 0.9;
    }

    .page-heading {
        font-size: 12vw;
        padding: 2rem 1rem;
    }

    /* 3. Image Handling */
    .main-emblem, 
    .team-image {
        max-width: 200px; /* Prevent images from eating the whole screen */
        margin: 0 auto;
    }

    #horizontal p {
        max-width: 100%; /* Let text breathe */
        font-size: 0.95rem;
        margin: 0 auto;
    }

    /* 4. Button Groups */
    .committee-button {
        display: block; /* Stack buttons for easier thumb-tapping */
        margin: 10px 0;
        width: 100%;
        text-align: center;
    }

    /* 5. Compact Containers */
    .register-container, 
    .contact-container, 
    .form-wrapper {
        margin: 2rem auto;
        padding: 0 1.2rem;
        width: 95%;
    }

    /* 6. Footer Adjustments */
    .footnote {
        text-align: center;
        margin-top: 4rem;
        padding: 2rem 1rem 0 1rem;
    }

    .footnote a {
        justify-content: center; /* Center the GitHub link */
    }

    /* 7. Landing Section height fix */
    .landing {
        height: 85vh; /* Prevents the "bottomless" feel on mobile browsers with address bars */
    }
}
/* Container for the team section */
.bullcrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Base row styling - Straight alignment */
.team-row {
    display: flex;
    justify-content: space-between; /* Pushes text left, image right */
    align-items: center;
    padding: 2rem 0;
    gap: 3rem; /* Space between text and image */
}

.about-text {
    flex: 1; /* Takes up remaining space */
}

.about-text h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-text p {
    font-size: 1.1rem;
    opacity: 0.8;
    color: #ccc;
}

.team-image {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 12px; /* Smooth corners */
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

/* Stylized horizontal line */
hr {
    border: 0;
    height: 1px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
    margin: 0;
}

/* Mobile Responsiveness - Stack them on small screens */
@media (max-width: 600px) {
    .team-row {
        flex-direction: column-reverse;
        text-align: center;
        gap: 1.5rem;
    }
}
@media (max-width: 768px) {
    /* 1. Set the main container to column */
    #horizontal {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* 2. Turn the text wrapper into a flex container to control the button */
    .about-text {
        display: flex;
        flex-direction: column;
    }

    /* 3. Assign Orders */
    /* Text content stays at the top */
    .about-text h3, 
    .about-text p:first-of-type {
        order: 1;
    }

    /* The Emblem (Logo) moves to middle */
    .main-emblem {
        order: 2;
        margin: 2rem 0; /* Add spacing above/below logo */
    }

    /* The paragraph containing the button moves to bottom */
    .about-text p:last-of-type {
        order: 3;
        width: 100%;
    }

    /* Make the button look better as a standalone element on mobile */
    .committee-button {
        display: block;
        width: 100%;
        margin: 0;
    }
}