/* --- Canto Crudo: FINAL MASTER Theme --- */

.project-page {
    background-color: #e8e4db; /* Sun-Bleached Stone */
}

/* RE-ARCHITECTED Bottom-Aligned Overlay Hero */
.project-hero-overlay {
    height: 90vh;
    background-size: cover;
    background-position: center;
    color: var(--white-color);
    display: flex;
    /* Aligns content to the bottom */
    align-items: flex-end; 
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 60px 40px;
}
.project-hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 40%, transparent 100%);
}
.hero-content-overlay {
    position: relative;
    z-index: 2;
}
.hero-content-overlay .hero-logo-container {
    max-width: 250px;
    margin: 0 auto 2rem auto;
    filter: brightness(0) invert(1);
}
.hero-content-overlay h1 {
    font-family: 'Cormorant Garamond', var(--font-serif);
    font-size: 4.5rem;
    color: var(--white-color);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    margin: 0;
}
/* REFINED HERO SUB-HEADLINE WITH CENTER ALIGNMENT */
.hero-content-overlay p {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    max-width: 45ch;
    margin-top: 1rem;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
    margin-left: auto; /* This and the next line center the block itself */
    margin-right: auto;
}

/* --- Identity Showcase --- */
.identity-section-bg { background-color: #f5f2ec; }
.identity-showcase { padding: 2rem; border-radius: 5px; text-align: center; }
.logo-showcase { max-width: 150px; margin: 0 auto 2rem auto; }
.palette { display: flex; justify-content: center; gap: 10px; }
.swatch { width: 50px; height: 50px; border-radius: 50%; }

/* --- Shared & Minor Styles --- */
.image-duo { padding-top: 0; }
.duo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.duo-grid figure { margin: 0; }
.duo-grid img { width: 100%; border-radius: 5px; }
.duo-grid figcaption { font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; text-align: center; color: #888; margin-top: 1rem; }
.cinematic-break { height: 42.55vw; max-height: 600px; overflow: hidden; }
.cinematic-break img { width: 100%; height: 100%; object-fit: cover; }
.inline-image { width: 100%; border-radius: 5px; margin: 3rem 0; }
.project-main { padding-top: 80px; }
.project-section { padding: 100px 0; }
.container { max-width: 1200px; margin: 0 auto; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 20px; }
.text-manifesto { text-align: center; }
.text-manifesto h2 { font-size: 2.8rem; margin-bottom: 2rem; font-family: 'Cormorant Garamond', var(--font-serif); }
.text-manifesto p { font-size: 1.25rem; line-height: 1.8; max-width: 60ch; margin-left: auto; margin-right: auto; }
.reflection-bg { background-color: var(--white-color); }
.full-width-container { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.project-image-break img { width: 100%; height: auto; display: block; }
.text-image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 100px; }
.text-image-grid.reverse { grid-template-columns: 1fr 1fr; }
.text-image-grid.reverse .text-content { order: 2; }
.text-image-grid h2 { font-size: 2.5rem; margin-bottom: 1.5rem; }
.text-image-grid p { font-size: 1.1rem; line-height: 1.8; }
.text-image-grid img { border-radius: 5px; width: 100%; height: auto; }
.project-nav { display: flex; justify-content: space-between; align-items: center; padding: 40px; border-top: 1px solid #ddd; }
.nav-link { font-weight: 500; color: var(--text-color); }
.cta-button-dark { display: inline-block; font-family: var(--font-sans); font-weight: 500; font-size: 1rem; color: var(--white-color); background-color: var(--text-color); border: 1px solid var(--text-color); padding: 14px 35px; text-decoration: none; border-radius: 50px; transition: background-color 0.3s ease, color 0.3s ease; }
.cta-button-dark:hover { background-color: transparent; color: var(--text-color); }

/* Responsive */
@media (max-width: 768px) {
    .hero-content-overlay h1 { font-size: 2.5rem; }
    .duo-grid { grid-template-columns: 1fr; }
    .text-image-grid, .text-image-grid.reverse { grid-template-columns: 1fr; }
    .text-image-grid.reverse .text-content { order: 0; }
}