:root {
    --text-color: #000;
    --background-color: #fff;
    --arrow-color: #FFD700; 
    --font-family: "BBH Sans Hegarty", sans-serif; 
    --padding-sides: 40px;
    --max-content-width: 1400px;
    
    /* Define colors for the dark theme (used by body.about-page) */
    --dark-bg: #000;
    --dark-text: #fff;
}

/* --- Global Reset and Core Height --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CRITICAL: Ensure HTML height is strictly 100% of the viewport */
html {
    height: 100%;
}

body {
    min-height: 100%; 
    font-family: var(--font-family); 
    color: var(--text-color);
    background-color: var(--background-color);
    line-height: 1.4;
    padding: var(--padding-sides);
    font-size: 16px; 
    position: relative;
    overflow-y: auto; 
}

/* --- Global Typography and Font Weights --- */
a, p, h1, h2, h3, div, span, .studio-title, .project-number, .highlight {
    font-family: var(--font-family) !important; 
    color: var(--text-color) !important; 
    text-decoration: none !important; 
    font-weight: 400 !important; 
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.title_link a, 
.studio-title, 
.project-number, 
.highlight {
    font-weight: 700 !important; 
}

/* --- Slideshow Page (index.html) Specific Layout --- */

.home__grid {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%; 
    max-width: var(--max-content-width);
    margin: 0 auto;
    overflow-y: hidden; 
}

.home__header {
    padding-top: 10px; 
    padding-bottom: 30px; 
    flex-shrink: 0; 
}

.title_link a {
    font-size: 1.2em;
    display: inline-block;
}

/* --- Slideshow Layout and Image Shrinking (DESKTOP/DEFAULT) --- */

.home__slider {
    display: flex;
    justify-content: flex-start; 
    width: 100%;
    height: 100%;
    flex-grow: 1; 
    min-height: 0; 
}

.slider__container {
    width: 100%;
    display: flex; 
    align-items: flex-start; 
    justify-content: flex-start;
    height: 100%; 
    min-height: 0; 
}

.slider__wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start; 
    width: 100%;
    height: 100%; 
    max-height: 100%; 
    overflow: hidden;
    min-height: 0; 
}

.slider__slide {
    display: flex;
    flex-direction: column;
    align-items: flex-start; 
    width: 100%;
    height: 100%; 
    min-height: 0; 
    max-height: 100%; 
}

.slide__img {
    width: 100%; 
    display: flex;
    justify-content: center;
    flex-shrink: 1; 
    height: 100%; 
    min-height: 0;
    max-width: 600px; 
    max-height: 600px; 
}

.slide__img img {
    display: block;
    object-fit: contain;
    max-height: 600px; 
    max-width: 600px; 
    height: auto; 
    width: auto; 
    min-height: 0; 
    flex-shrink: 1;
    margin-bottom: 20px; 
}

.slide__txt {
    width: 80%; 
    max-width: 700px;
    text-align: left; 
    font-size: 1em; 
    line-height: 1.6;
    flex-shrink: 0; 
}
.slide__txt p {
    margin: 0;
    padding: 0;
}

/* --- ARROW STYLING --- */

.slider__prev, .slider__next {
    position: fixed; 
    top: 50%;
    transform: translateY(-50%);
    background: none; 
    border: none;
    padding: 0; 
    cursor: pointer;
    font-size: 3em; 
    color: var(--arrow-color);
    opacity: 0.8; 
    transition: opacity 0.2s;
    z-index: 99; 
    width: 50px; 
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-family: inherit; 
    font-weight: 700;
}

.slider__prev:before { content: '<'; }
.slider__next:before { content: '>'; }

.slider__prev { left: var(--padding-sides); }
.slider__next { right: var(--padding-sides); }

.slider__prev:hover, .slider__next:hover { opacity: 1; }

/* --- About Page Specifics --- */

body.about-page {
    background-color: var(--dark-bg) !important;
    min-height: 100vh !important; 
    overflow-y: scroll !important; 
    padding: var(--padding-sides); 
}

body.about-page a, 
body.about-page p, 
body.about-page h1, 
body.about-page h2, 
body.about-page h3, 
body.about-page div, 
body.about-page span {
    color: var(--dark-text) !important;
}



/* --- ABOUT.HTML: CONTACT/LIST LAYOUT --- */

.about__content {
    display: flex !important; 
    flex-direction: row !important;
    gap: 80px; 
    padding-bottom: 50px;
    max-width: 1000px; 
    margin: 0 auto; 
    padding-top: 50px; 
}

.about__contact {
    flex: 0 0 300px;
    width: 300px;
    display: flex !important;
    flex-direction: column !important;
}

.about__photo {
    width: 100%;
    max-width: 300px;
    height: auto;
    display: block !important;
    margin-bottom: 1.5rem;
}

.studio-title { font-size: 1.2em; margin-bottom: 5px; }
.studio-subtitle { margin-bottom: 30px; }
.address-line, .phone-number { margin-bottom: 2px; }
.phone-number { margin-top: 25px; }

.links { margin-top: 10px; }
.links .link-item { margin-top: 5px; }

/* Projects List (Right Column) */
.projects-list-section {
    flex: 1 1 auto;
    max-width: 800px; 
}

.section-title {
    font-size: 1.2em;
    font-weight: 400 !important;
    margin-bottom: 20px;
}

.project-entry {
    margin-bottom: 35px; 
    line-height: 1.4;
    font-size: 1em;
}

.project-number { display: inline; }
.highlight { font-style: italic; }

/* ======================================================= */
/* MOBILE SPECIFIC FIXES (MAX-WIDTH: 768PX)                */
/* ======================================================= */

@media (max-width: 768px) {
    
    body {
        padding: 10px;
    }
    .slider__prev { left: 10px; }
    .slider__next { right: 10px; }
    
    .slide__img, .slide__img img {
        max-width: calc(100vw - 20px) !important; 
        max-height: 80vh !important;
        height: auto !important; 
        width: 100% !important;
    }
    
    .about__content {
        flex-direction: column !important; 
        gap: 40px;
    }
    .about__contact {
        flex: auto !important;
        width: 100% !important;
    }
    .about__photo {
        max-width: 100%;
    }
    .projects-list-section {
        max-width: 100%;
    }
}
