/* RESET */
* { box-sizing: border-box; }

body, html {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    color: #fff;
    font-family: 'Times New Roman', Times, serif; 
    text-align: center;
    padding-top: 20px; 
    background-color: #000;
}

/* --- FIXED BACKGROUND LAYER (MOBILE ONLY) --- */
/* By default (Desktop), we hide this layer */
.fixed-bg {
    display: none;
}

/* 1. NAV BAR */
nav {
    background: #000;
    padding: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 50;
}

.hamburger {
    display: none;
    font-size: 1.8rem;
    color: #fff;
    cursor: pointer;
    padding: 10px 20px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.nav-container {
    display: inline-flex;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    align-items: center; 
}

nav a {
    color: #fff;
    text-decoration: none;
    margin: 0; 
    font-family: 'Times New Roman', Times, serif;
    font-size: 18px; 
    font-weight: normal; 
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 4px 50px; 
    display: block;
    transition: all 0.2s ease;
}

nav a.active {
    background-color: #fff;
    color: #000;
}

nav a:hover {
    text-decoration: none;
}

/* 2. MAIN CONTAINER (DESKTOP CONFIG) */
.poster-container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 60px;

    /* DESKTOP BACKGROUND: Gradient 50% -> 85% */
    background-image: 
        linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 85%),
        url('adam-bg.jpg');
        
    background-size: 85% auto; 
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #000;
}

/* 3. LOGO */
.header-content {
    margin-top: 25px; 
    margin-bottom: 30px;
    width: 100%;
    display: block; 
    text-align: center;
}

.main-logo {
    width: 450px; 
    max-width: 95%; 
    height: auto;
    margin: 0 auto; 
    display: block;
}

/* 4. QUOTES & SCULPTING */
.content-grid {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 1600px;
    padding: 0 20px;
    margin-bottom: 60px;
}

.quotes-column {
    width: 35%; 
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.quote, .award {
    text-align: center;
}

.quotes-column.left { 
    align-items: flex-end; 
}
.quotes-column.right { 
    align-items: flex-start;
}

.face-column {
    width: 18%; 
}

/* --- SCULPTING MARGINS (Desktop Only) --- */
/* Left Column: Pushing RIGHT margin moves text LEFT (Outward) */
.quotes-column.left .quote:nth-child(1) { margin-right: -20px; }
.quotes-column.left .quote:nth-child(2) { margin-right: 15px; }
.quotes-column.left .quote:nth-child(3) { margin-right: 45px; }
.quotes-column.left .quote:nth-child(4) { margin-right: 40px; }

/* FIX: Increased to 85px (Outward +10px) */
.quotes-column.left .award { margin-right: 85px; }

/* Right Column: Pushing LEFT margin moves text RIGHT (Outward) */
.quotes-column.right .quote:nth-child(1) { margin-left: -55px; }
.quotes-column.right .quote:nth-child(2) { margin-left: -5px; }
.quotes-column.right .quote:nth-child(3) { margin-left: 20px; }
.quotes-column.right .quote:nth-child(4) { margin-left: 25px; }

/* FIX: Increased to 100px (Outward +10px) */
.quotes-column.right .award { margin-left: 100px; }


/* TYPOGRAPHY */
.quote p, .award p {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 5px 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,1);
    font-family: 'Times New Roman', Times, serif;
}

.quote cite, .award cite {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ddd;
    display: block;
    font-family: 'Times New Roman', Times, serif;
    font-style: normal; 
}

/* 5. PILLS */
.shows-row {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    width: 100%;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.show-pill {
    border: 3px solid #fff;
    border-radius: 25px; 
    padding: 10px 10px; 
    width: 270px; 
    background-color: transparent;
    text-align: center; 
    text-decoration: none; 
    display: block;
    transition: background-color 0.2s, color 0.2s;
    outline: none; 
}

.show-pill:hover {
    background-color: #fff;
    cursor: pointer;
}

.show-pill:hover h3, 
.show-pill:hover p {
    color: #000 !important;
}

.show-pill h3 {
    margin: 0;
    font-size: 2rem; 
    font-weight: normal; 
    text-transform: uppercase;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    white-space: nowrap; 
    line-height: 1.1; 
    text-align: center;
    width: 100%;
}

.show-pill p:nth-of-type(1) {
    margin: 4px 0 0; 
    text-transform: uppercase;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 1.3rem;
}

.show-pill p:nth-of-type(2) {
    margin: 3px 0 0; 
    text-transform: uppercase;
    color: #fff;
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    font-size: 1.3rem;
}

/* 6. FOOTER */
.footer-links {
    position: relative;
    z-index: 2;
    margin-top: 0px; 
}

.credits {
    color: #ddd; /* Desktop default: Light Grey */
    margin: 5px 0;
    text-shadow: 1px 1px 2px #000;
    font-family: 'Times New Roman', Times, serif; 
    font-style: normal;
    font-size: 21px; 
    line-height: 1.2;
}

.credits a {
    color: inherit;
    text-decoration: underline;
}
.credits a:hover {
    color: #fff;
}

.developed-line { margin-bottom: 5px; }

/* SOCIAL ICONS */
.social-icons {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.social-icons a {
    color: #fff;
    text-decoration: none;
    font-size: 1.4rem; 
    display: inline-block;
    margin: 0;
    text-shadow: none;
    margin-bottom: 0;
}
.social-icons a:hover {
    color: #ddd;
}

/* =========================================
   MOBILE & TABLET RESPONSIVENESS
   ========================================= */

@media (max-width: 900px) {
    /* 1. FIXED BACKGROUND: ACTIVATE */
    .fixed-bg {
        display: block; 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        
        /* MOBILE GRADIENT: 50% -> 85% */
        background-image: 
            linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 85%),
            url('adam-bg.jpg');
            
        background-size: auto 70vh; /* Portrait Crop */
        
        /* 25px offset from top */
        background-position: center 25px; 
        
        background-repeat: no-repeat;
    }

    /* Remove background from the container so fixed-bg shows */
    .poster-container {
        background: transparent;
    }

    /* 2. HAMBURGER & NAV */
    .hamburger {
        display: block; 
    }
    
    .nav-container {
        display: none; 
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #000;
        border-bottom: 1px solid #fff;
    }
    
    .nav-container.active {
        display: flex;
    }

    nav a {
        width: 100%;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px solid #333; 
        font-size: 1.2rem;
    }
    
    nav a.active {
        background-color: #333;
        color: #fff;
    }

    /* 3. REORDERING */
    .header-content { order: 1; } 
    .shows-row { order: 2; }      
    .content-grid { order: 3; }   
    .footer-links { order: 4; }   

    /* 4. PILLS LAYOUT */
    .shows-row {
        flex-direction: column;
        align-items: center; 
        gap: 20px;
        margin-top: 35vh; 
        margin-bottom: 40px;
    }

    .show-pill {
        background-color: rgba(0,0,0,0.3); 
    }

    /* 5. QUOTES LAYOUT & READABILITY */
    .content-grid {
        flex-direction: column;
        align-items: center;
        padding: 0 15px;
        width: 100%;
    }

    .quotes-column {
        width: 100%;
        align-items: center !important;
        gap: 30px;
    }
    
    .face-column { display: none; }

    /* Reset Nudges */
    .quotes-column.left .quote, .quotes-column.right .quote, .quotes-column .award {
        margin: 0 !important;
    }

    /* TEXT SHADOW for Quotes, Citations, AND Footer */
    .quotes-column .quote p, 
    .quotes-column .award p,
    .quotes-column .quote cite, 
    .quotes-column .award cite,
    .credits {
        /* Heavy shadow makes them look "bold" and readable over the shirt */
        text-shadow: 0px 2px 8px rgba(0,0,0,0.9), 0px 0px 4px rgba(0,0,0,1);
    }
    
    /* 6. LOGO SIZE */
    .main-logo {
        width: 90%;
        max-width: 350px;
    }
    
    /* 7. FOOTER FONT MATCHING */
    .credits {
        font-size: 1.15rem;
        color: #fff; /* Match quotes (Pure White) */
    }
}
/* =========================================
   UPDATED ABOUT PAGE STYLES (Final Polish V3)
   ========================================= */

.about-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    /* FIX: Top Padding reduced by 30% (40px -> 28px) */
    /* FIX: Bottom Padding reduced by 50% (20px -> 10px) */
    padding: 28px 20px 10px 20px;
}

/* 1. BIO SECTION (Vertical) */
.bio-section-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.bio-quote-headline {
    font-size: 1.8rem;
    font-family: 'Times New Roman', serif;
    font-weight: bold;
    line-height: 1.3;
    margin-bottom: 30px;
    color: #fff;
    max-width: 900px;
    position: relative;
    z-index: 5;
}

.bio-image-wrapper {
    width: 100%;
    max-width: 600px;
    margin-bottom: 30px;
    margin-top: -50px; 
    position: relative;
    z-index: 1;
}

.bio-photo-large {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

.about-text-centered {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.about-text-centered p {
    font-size: 1.35rem; 
    line-height: 1.6;
    margin-bottom: 20px;
    color: #eee;
}

.about-text-centered a {
    color: #fff !important;
    text-decoration: underline;
}

.divider {
    display: none;
}

.section-title {
    font-size: 1.8rem;
    text-transform: uppercase;
    margin-bottom: 40px;
    font-weight: normal;
    letter-spacing: 2px;
    text-align: center;
}

/* 2. PRESS GRID (3 Columns) */
.press-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    align-items: flex-start;
    /* FIX: Bottom margin reduced by 50% (20px -> 10px) */
    margin-bottom: 10px; 
    position: relative;
    z-index: 5;
}

.press-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.press-quote {
    font-size: 1.15rem; 
    margin: 0 0 10px 0;
    line-height: 1.4;
    font-family: 'Times New Roman', Times, serif;
}

/* 3. GOLD ACCENTS */
.accent-gold {
    color: #ffd700;
    font-weight: bold;
    font-style: normal;
    font-size: 1.1rem; 
}

.accent-gold a {
    color: #ffd700 !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}
.accent-gold a:hover {
    border-bottom: 1px solid #ffd700;
}

/* 4. MID-PAGE IMAGE (Desktop) */
.press-break-image {
    margin: 30px auto 60px auto;
    width: 100%;
    max-width: 900px;
    margin-top: -180px;
    position: relative;
    z-index: 1;
}
.press-break-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    opacity: 0.9;
}

/* =========================================
   MOBILE RESPONSIVENESS (Final Polish V3)
   ========================================= */

@media (max-width: 900px) {
    .about-container {
        /* FIX: Top Padding reduced by 30% (20px -> 14px) */
        padding-top: 14px;
        /* FIX: Bottom Padding reduced by 50% (20px -> 10px) */
        padding-bottom: 10px; 
    }

    /* Stack Grid */
    .press-grid {
        grid-template-columns: 1fr;
        gap: 30px; 
        /* FIX: Reduce margin below last item */
        margin-bottom: 5px; 
    }

    .bio-quote-headline {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 1.4rem; 
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .about-text-centered p {
        font-size: 1.25rem; 
    }

    .bio-image-wrapper {
        margin-bottom: 10px;
    }

    .press-break-image {
        margin-top: -80px; 
        margin-bottom: 40px;
    }

    .press-quote {
        font-size: 1.15rem;
        margin-bottom: 2px;
    }
    
    .accent-gold {
        font-size: 1rem;
    }
    
    .footer-links .social-icons a {
        font-size: 1.5rem;
    }

    nav a.active {
        background-color: #fff !important;
        color: #000 !important;
    }
}
/* =========================================
   OCD HELP PAGE STYLES
   ========================================= */

.ocd-text-container {
    max-width: 800px;
    margin: 0 auto;
    /* FIX: Force text to Left Align */
    text-align: left; 
    padding: 0 10px;
}

.ocd-text-container p {
    /* FIX: Set font size to match Reviews (1.15rem) instead of Bio */
    font-size: 1.15rem; 
    line-height: 1.6;
    margin-bottom: 25px;
    color: #eee;
}

.ocd-text-container a {
    color: #fff;
    text-decoration: underline;
}
/* =========================================
   JOIN LIST FORM STYLES (Updated V2)
   ========================================= */

/* FIX: Specific headline style for Join page */
.join-headline {
    text-align: center;
    font-family: 'Times New Roman', serif;
    font-size: 1.45rem; /* ~20% smaller than About page */
    font-weight: normal; /* Not bold */
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.join-form {
    max-width: 450px; 
    margin: 0 auto 20px auto; 
    text-align: left;
}

.form-row {
    display: flex;
    gap: 20px;
}

.form-row .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 1.2rem;
    color: #fff;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: transparent;
    border: 1px solid #fff;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #ffd700;
    background-color: rgba(255,255,255,0.05);
}

.submit-btn {
    background-color: #fff;
    color: #000;
    border: 2px solid #fff;
    padding: 12px 40px;
    font-size: 1.2rem;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Times New Roman', Times, serif;
    transition: all 0.3s ease;
    display: block;
    margin: 0 auto;
    border-radius: 30px;
}

.submit-btn:hover {
    background-color: transparent;
    color: #fff;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
}