/* =====================================================
   CENTAUR PRODUCTIONS
   PROJECT PAGES
===================================================== */


/* ================= GLOBAL ================= */


* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}



html {

    scroll-behavior:smooth;

}



body {

    width:100%;

    min-height:100vh;

    margin:0;

    padding:0;

    background:#0b0b0b;

    color:#e8dfcf;

    font-family:"Inter",sans-serif;

    line-height:1.7;

    overflow-x:hidden;

}



:root {

    --gold:#c6a15b;

    --gold-light:#e4c98b;

    --text-soft:#cfc5b5;

}





/* ================= GLOBAL PROJECT PAGE ================= */


.project-page {

    width:100%;

    max-width:1180px;

    margin:0 auto;

    padding:45px 60px 120px;

}





/* ================= BACK TO PROJECTS ================= */


.project-back {

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 18px;

    border:1px solid var(--gold);

    background:rgba(198,161,91,.04);

    color:var(--gold-light);

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.68rem;

    line-height:1;

    transition:.3s ease;

}



.project-back:hover {

    background:rgba(198,161,91,.12);

    color:#f0dca8;

}



.project-back-arrow {

    color:var(--gold);

    font-size:1.15rem;

    line-height:1;

}





/* =====================================================
   ORIGINAL INDIVIDUAL PROJECT STRUCTURE
===================================================== */


/* ================= ORIGINAL PROJECT HEADER ================= */


.project-header {

    width:100%;

    padding:35px 60px 10px;

    background:#0b0b0b;

}





/* ================= ORIGINAL PROJECT INTRO ================= */


.project-intro {

    width:100%;

    display:grid;

    grid-template-columns:minmax(0,1fr) 300px;

    column-gap:70px;

    align-items:center;

    margin:45px 0 110px;

}



.project-intro-content {

    min-width:0;

    max-width:650px;

}



.project-intro .section-label {

    display:block;

    margin-bottom:25px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.3em;

    font-size:.72rem;

}



.project-intro h1 {

    margin:0 0 30px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(4rem,6vw,6.2rem);

    font-weight:300;

    line-height:.92;

    letter-spacing:.01em;

}



.project-lead {

    max-width:590px;

    margin:0;

    font-family:"Cormorant Garamond",serif;

    font-size:1.65rem;

    line-height:1.5;

    color:#d8cdb9;

}





/* ================= ORIGINAL PROJECT IMAGE ================= */


.project-hero {

    width:300px;

    height:300px;

    justify-self:end;

    overflow:hidden;

}



.project-hero img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}





/* ================= ORIGINAL STORY ================= */


.project-story {

    width:100%;

    max-width:720px;

    margin:0 auto;

}



.project-story p {

    margin:0 0 32px;

    color:var(--text-soft);

    font-size:1rem;

    line-height:1.95;

}



.project-story strong {

    color:#e8dfcf;

    font-weight:500;

}



.project-emphasis {

    margin-top:75px !important;

    margin-bottom:12px !important;

    padding-top:35px;

    border-top:1px solid rgba(198,161,91,.35);

    font-family:"Cormorant Garamond",serif;

    font-size:1.55rem !important;

    line-height:1.5 !important;

    color:#d8cdb9 !important;

}



.project-emphasis-final {

    margin-top:0 !important;

    font-family:"Cormorant Garamond",serif;

    font-size:2rem !important;

    line-height:1.35 !important;

    color:var(--gold-light) !important;

}





/* ================= ORIGINAL DETAILS ================= */


.project-details {

    width:100%;

    max-width:720px;

    margin:100px auto 0;

    padding-top:38px;

    border-top:1px solid rgba(198,161,91,.35);

    display:grid;

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

    gap:45px;

}



.project-detail {

    min-width:0;

}



.project-detail-label {

    display:block;

    margin:0 0 15px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.22em;

    font-size:.68rem;

    line-height:1.3;

}



.project-detail p {

    margin:0;

    color:#d1c7b7;

    font-size:.9rem;

    line-height:1.8;

}



.project-detail ul {

    display:block;

    margin:0;

    padding:0 0 0 18px;

    list-style-type:disc;

}



.project-detail li {

    display:list-item;

    margin:0 0 7px;

    padding:0;

    color:#d1c7b7;

    font-size:.9rem;

    line-height:1.65;

}



.project-detail li::marker {

    color:var(--gold);

    font-size:.7em;

}





/* ================= YOUTUBE ================= */


.project-listen {

    width:100%;

    max-width:720px;

    margin:105px auto 0;

    padding-top:42px;

    border-top:1px solid rgba(198,161,91,.35);

}



.project-listen h2 {

    margin:0 0 15px;

    font-family:"Cormorant Garamond",serif;

    font-size:2.8rem;

    font-weight:400;

}



.project-listen > p {

    margin:0 0 30px;

    color:var(--text-soft);

}





/* ================= YOUTUBE BUTTON ================= */


.youtube-button,
.project-youtube {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:13px 24px;

    border:1px solid var(--gold);

    background:rgba(198,161,91,.04);

    color:var(--gold-light);

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.15em;

    font-size:.72rem;

    transition:.3s ease;

}



.youtube-button:hover,
.project-youtube:hover {

    background:rgba(198,161,91,.12);

    color:#f0dca8;

}



.youtube-icon {

    width:21px;

    height:21px;

    display:block;

    flex:none;

}



.youtube-icon rect {

    fill:#ff0000 !important;

}



.youtube-icon path {

    fill:#ffffff !important;

}





/* =====================================================
   CATEGORY PAGES
===================================================== */


/* ================= CATEGORY HEADER ================= */


.project-category-header {

    width:100%;

    max-width:850px;

    margin:80px 0 95px;

}



.project-label {

    display:block;

    margin-bottom:25px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.3em;

    font-size:.72rem;

}



.project-category-header h1 {

    margin:0 0 30px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(4rem,7vw,6.5rem);

    font-weight:300;

    line-height:.95;

    letter-spacing:.01em;

    color:#e8dfcf;

}



.project-category-header .project-intro {

    display:block;

    width:auto;

    max-width:760px;

    margin:0;

    font-family:"Inter",sans-serif;

    font-size:1.05rem;

    line-height:1.9;

    color:var(--text-soft);

}





/* ================= CATEGORY STORIES ================= */


.project-stories {

    width:100%;

    margin:0;

}



.project-story-card {

    width:100%;

    display:grid;

    grid-template-columns:minmax(0,440px) minmax(0,1fr);

    gap:70px;

    align-items:center;

    padding:55px 0 80px;

    border-top:1px solid rgba(198,161,91,.25);

}



.project-story-image {

    position:relative;

    display:block;

    width:100%;

    max-width:440px;

    aspect-ratio:1/1;

    overflow:hidden;

    text-decoration:none;

    background:#111;

}



.project-story-image img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:

        transform .8s ease,

        filter .7s ease;

}



.project-image-overlay {

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(0,0,0,.28);

    opacity:0;

    transition:opacity .5s ease;

}



.project-view {

    padding:13px 26px;

    border:1px solid var(--gold);

    color:var(--gold-light);

    background:rgba(11,11,11,.2);

    text-transform:uppercase;

    letter-spacing:.18em;

    font-size:.72rem;

    transform:translateY(15px);

    transition:

        transform .5s ease,

        background .3s ease;

}



.project-story-image:hover img {

    transform:scale(1.06);

    filter:brightness(.62);

}



.project-story-image:hover .project-image-overlay {

    opacity:1;

}



.project-story-image:hover .project-view {

    transform:translateY(0);

}



.project-view:hover {

    background:rgba(198,161,91,.12);

}





/* ================= CATEGORY STORY TEXT ================= */


.project-story-content {

    min-width:0;

}



.project-story-type {

    display:block;

    margin-bottom:18px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.24em;

    font-size:.68rem;

}



.project-story-content h2 {

    margin:0 0 20px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.4rem,4vw,3.5rem);

    font-weight:400;

    line-height:1.05;

    color:#e8dfcf;

}



.project-story-content p {

    max-width:520px;

    margin:0 0 28px;

    color:var(--text-soft);

    font-size:.98rem;

    line-height:1.85;

}



.project-story-link {

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:var(--gold-light);

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.17em;

    font-size:.7rem;

    border-bottom:1px solid rgba(198,161,91,.4);

    padding-bottom:5px;

    transition:.3s ease;

}



.project-story-link span {

    color:var(--gold);

    font-size:1rem;

    transition:transform .3s ease;

}



.project-story-link:hover {

    color:#f0dca8;

    border-color:var(--gold);

}



.project-story-link:hover span {

    transform:translateX(5px);

}





/* =====================================================
   INDIVIDUAL STORY STRUCTURE
===================================================== */


/* ================= STORY HEADER ================= */


.project-header-content {

    max-width:650px;

}



.project-header-content .project-label {

    margin-bottom:25px;

}



.project-header-content h1 {

    margin:0 0 15px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(4rem,6vw,6rem);

    font-weight:300;

    line-height:.95;

    color:#e8dfcf;

}



.project-subtitle {

    margin:0;

    color:#cfc5b5;

    font-family:"Cormorant Garamond",serif;

    font-size:1.45rem;

    line-height:1.5;

}





/* ================= INDIVIDUAL STORY DETAILS ================= */


.project-detail-block {

    min-width:0;

}



.project-detail-block h2 {

    margin:0 0 18px;

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-weight:400;

    color:#e8dfcf;

}



.project-detail-block p {

    margin:0 0 25px;

    color:var(--text-soft);

    font-size:.95rem;

    line-height:1.9;

}



.project-detail-block ul {

    margin:0;

    padding:0 0 0 20px;

    list-style-type:disc;

}



.project-detail-block li {

    margin:0 0 8px;

    color:#d1c7b7;

    font-size:.9rem;

    line-height:1.7;

}



.project-detail-block li::marker {

    color:var(--gold);

}





/* ================= PROJECT MEDIA ================= */


.project-media {

    width:100%;

    max-width:720px;

    margin:105px auto 0;

    padding-top:42px;

    border-top:1px solid rgba(198,161,91,.35);

}



.project-media-content {

    width:100%;

}



.project-media h2 {

    margin:0 0 15px;

}



.project-media p {

    margin:0 0 30px;

    color:var(--text-soft);

}





/* ================= PROJECT HIGHLIGHT ================= */


.project-highlight {

    width:100%;

    max-width:720px;

    margin:105px auto 0;

    padding:55px 0;

    border-top:1px solid rgba(198,161,91,.35);

    border-bottom:1px solid rgba(198,161,91,.35);

}



.project-highlight-inner {

    max-width:650px;

}



.project-highlight h2 {

    margin:0 0 25px;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.5rem,4vw,3.5rem);

    font-weight:400;

    line-height:1.1;

    color:#e8dfcf;

}



.project-highlight p {

    margin:0;

    color:var(--text-soft);

    font-size:1rem;

    line-height:1.9;

}





/* ================= BOTTOM BACK LINK ================= */


.project-bottom-back {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:max-content;

    margin:90px auto 0;

    padding:13px 22px;

    border:1px solid var(--gold);

    background:rgba(198,161,91,.04);

    color:var(--gold-light);

    text-decoration:none;

    text-transform:uppercase;

    letter-spacing:.17em;

    font-size:.7rem;

    transition:.3s ease;

}



.project-bottom-back:hover {

    background:rgba(198,161,91,.12);

    color:#f0dca8;

}





/* =====================================================
   RESPONSIVE
===================================================== */


@media(max-width:900px) {


    .project-page {

        padding:35px 7% 90px;

    }



    .project-header {

        padding:25px 7% 10px;

    }



    .project-category-header {

        margin:60px 0 65px;

    }



    .project-category-header h1 {

        font-size:4.5rem;

    }



    .project-story-card {

        grid-template-columns:1fr;

        gap:40px;

        padding:45px 0 65px;

    }



    .project-story-image {

        width:100%;

        max-width:600px;

    }



    .project-story-content {

        max-width:650px;

    }



    .project-intro {

        grid-template-columns:minmax(0,1fr) 280px;

        column-gap:45px;

    }



    .project-intro h1 {

        font-size:4.5rem;

    }



    .project-lead {

        font-size:1.45rem;

    }



    .project-hero {

        width:280px;

        height:280px;

    }



    .project-story {

        max-width:none;

    }



    .project-story p {

        font-size:.96rem;

        line-height:1.85;

    }



    .project-details {

        grid-template-columns:1fr;

        gap:32px;

        margin-top:70px;

    }



    .project-listen {

        margin-top:75px;

    }



    .project-media {

        margin-top:75px;

    }



    .project-highlight {

        margin-top:75px;

    }



    .project-listen h2 {

        font-size:2.4rem;

    }



}





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


@media(max-width:600px) {


    .project-page {

        padding:25px 7% 70px;

    }



    .project-back {

        padding:10px 15px;

        font-size:.62rem;

    }



    .project-header {

        padding:20px 7% 10px;

    }



    .project-category-header {

        margin:55px 0 50px;

    }



    .project-category-header h1 {

        font-size:3.5rem;

        line-height:.98;

    }



    .project-category-header .project-intro {

        font-size:.95rem;

        line-height:1.75;

    }



    .project-story-card {

        gap:30px;

        padding:35px 0 55px;

    }



    .project-story-image {

        width:100%;

        max-width:100%;

    }



    .project-image-overlay {

        opacity:1;

        align-items:flex-end;

        padding-bottom:22px;

        background:
            linear-gradient(
                to top,
                rgba(0,0,0,.65),
                transparent 50%
            );

    }



    .project-view {

        transform:translateY(0);

        padding:10px 20px;

        font-size:.65rem;

    }



    .project-story-type {

        font-size:.62rem;

        letter-spacing:.2em;

    }



    .project-story-content h2 {

        font-size:2.5rem;

    }



    .project-story-content p {

        font-size:.9rem;

        line-height:1.75;

    }



    .project-intro {

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:40px;

        margin:35px 0 70px;

    }



    .project-intro-content {

        max-width:none;

    }



    .project-intro h1 {

        font-size:3.6rem;

    }



    .project-lead {

        font-size:1.35rem;

    }



    .project-hero {

        width:100%;

        max-width:320px;

        height:auto;

        aspect-ratio:1/1;

        align-self:flex-end;

        justify-self:auto;

    }



    .project-details {

        display:grid;

        grid-template-columns:1fr;

        gap:38px;

        margin-top:60px;

        padding-top:30px;

    }



    .project-detail-block h2 {

        font-size:1.8rem;

    }



    .project-detail-block p {

        font-size:.9rem;

        line-height:1.8;

    }



    .project-media {

        margin-top:65px;

        padding-top:32px;

    }



    .project-highlight {

        margin-top:65px;

        padding:40px 0;

    }



    .project-highlight h2 {

        font-size:2.5rem;

    }



    .project-bottom-back {

        width:auto;

        justify-content:center;

        text-align:center;

        margin-top:65px;

    }



}