/*======================================================

Prince & Michael Jackson
Two Different Paths to Pop Greatness

Master Stylesheet

======================================================*/


/*======================================================

GOOGLE FONTS

======================================================*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap');



/*======================================================

ROOT

======================================================*/

:root{

    --background:#090909;

    --surface:#111111;

    --surface-light:#1b1b1b;

    --text:#f2f2f2;

    --muted:#bcbcbc;

    --gold:#c4a55d;

    --line:#2f2f2f;

    --max-width:1400px;

    --reading-width:760px;

    --transition:.35s ease;

}



/*======================================================

RESET

======================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--background);

    color:var(--text);

    font-family:"Source Sans 3",sans-serif;

    overflow-x:hidden;

}

img{

    display:block;

    width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    font:inherit;

}



/*======================================================

TYPOGRAPHY

======================================================*/

h1{

    font-family:"Cormorant Garamond",serif;

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

    font-weight:600;

    line-height:.95;

    letter-spacing:-2px;

}

h2{

    font-family:"Cormorant Garamond",serif;

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

    font-weight:500;

    line-height:1.05;

}

h3{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    font-weight:500;

}

p{

    font-size:1.1rem;

    line-height:1.9;

    color:#dddddd;

}



/*======================================================

GLOBAL CONTAINER

======================================================*/

section{

    padding:120px 50px;

}

.section-heading{

    margin-bottom:70px;

}

.section-tag{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.35em;

    font-size:.8rem;

    margin-bottom:18px;

}

.intro-grid,

.artist-panels,

.timeline-home,

.why-wrapper,

.footer-content{

    width:min(var(--max-width),100%);

    margin:auto;

}

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

.site-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:999;

    padding:24px 0;

    transition:var(--transition);

    background:rgba(9,9,9,.25);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

}

.site-header.scrolled{

    background:rgba(9,9,9,.94);

    border-bottom:1px solid var(--line);

}

.nav-container{

    width:min(95%, var(--max-width));

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    display:flex;

    flex-direction:column;

}

.logo-title{

    font-family:"Cormorant Garamond", serif;

    font-size:2rem;

    font-weight:500;

    line-height:1;

    letter-spacing:0;

}

.logo-subtitle{

    margin-top:6px;

    font-size:.72rem;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--muted);

}

.navigation{

    display:flex;

    align-items:center;

    gap:36px;

    list-style:none;

    margin:0;

    padding:0;

}

.navigation > li{

    position:relative;

}

.navigation a{

    display:block;

    font-size:.92rem;

    font-weight:500;

    text-transform:uppercase;

    letter-spacing:.16em;

    color:inherit;

    transition:color var(--transition);

}

.navigation a:hover{

    color:var(--gold);

}

.navigation .active{

    color:var(--gold);

}

/*======================================================
Dropdown
======================================================*/

.dropdown-menu{

    position:absolute;

    top:42px;

    left:0;

    width:260px;

    padding:14px 0;

    background:#111;

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

    list-style:none;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:var(--transition);

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    list-style:none;

}

.dropdown-menu a{

    display:block;

    padding:10px 20px;

    font-size:.82rem;

    letter-spacing:.03em;

    text-transform:none;

}

.dropdown-menu a:hover{

    background:#1c1c1c;

    color:var(--gold);

}

/*======================================================

DROPDOWN

======================================================*/

.dropdown-menu{

    position:absolute;

    top:42px;

    left:0;

    background:#111;

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

    width:260px;

    opacity:0;

    visibility:hidden;

    transform:translateY(12px);

    transition:var(--transition);

    padding:14px 0;

}

.dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-menu li{

    list-style:none;

}

.dropdown-menu a{

    display:block;

    padding:10px 20px;

    font-size:.82rem;

    text-transform:none;

    letter-spacing:.03em;

}

.dropdown-menu a:hover{

    background:#1c1c1c;

}



/*======================================================

HERO

======================================================*/

.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

}

.hero-photo{

    position:absolute;

    inset:0;

    object-fit:cover;

    height:100%;

    filter:brightness(.38);

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to bottom,

        rgba(0,0,0,.15),

        rgba(9,9,9,.92)

    );

}

.hero-content{

    position:relative;

    z-index:10;

    width:min(900px,90%);

    margin:auto;

    height:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.eyebrow{

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:.32em;

    margin-bottom:18px;

}

.hero h2{

    margin:22px 0;

}

.hero-text{

    max-width:650px;

    color:#d8d8d8;

    margin-bottom:40px;

}

/*======================================================

BUTTONS

======================================================*/

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:10px;

}

.button-primary,
.button-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:210px;

    padding:16px 32px;

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

    transition:var(--transition);

    font-size:.9rem;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.button-primary{

    background:var(--gold);

    color:#111;

    font-weight:600;

}

.button-primary:hover{

    background:#d5b26b;

    transform:translateY(-2px);

}

.button-secondary{

    color:white;

    border-color:rgba(255,255,255,.3);

}

.button-secondary:hover{

    border-color:white;

    background:rgba(255,255,255,.06);

}



/*======================================================

INTRODUCTION

======================================================*/

.intro-section{

    background:#0d0d0d;

}

.intro-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:90px;

    align-items:center;

}

.intro-text h2{

    margin-bottom:40px;

}

.intro-text p{

    max-width:700px;

    margin-bottom:28px;

}

.intro-image{

    display:flex;

    flex-direction:column;

}

.intro-image img{

    aspect-ratio:4/5;

    object-fit:cover;

}

.intro-image figcaption{

    margin-top:18px;

    color:var(--muted);

    font-size:.92rem;

    line-height:1.7;

}



/*======================================================

ARTIST PANELS

======================================================*/

.artist-selection{

    background:#090909;

}

.artist-panels{

    display:grid;

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

    gap:34px;

    margin-top:55px;

}

.artist-panel{

    position:relative;

    overflow:hidden;

    min-height:720px;

    background:#111;

}

.artist-panel img{

    position:absolute;

    inset:0;

    height:100%;

    object-fit:cover;

    transition:1s ease;

}

.artist-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        to top,

        rgba(9,9,9,.94),

        rgba(9,9,9,.15)

    );

}

.artist-panel:hover img{

    transform:scale(1.04);

}

.artist-content{

    position:absolute;

    bottom:0;

    left:0;

    padding:55px;

    z-index:10;

    max-width:520px;

}

.artist-years{

    color:var(--gold);

    letter-spacing:.25em;

    text-transform:uppercase;

    margin-bottom:12px;

}

.artist-content h3{

    font-size:3rem;

    margin-bottom:20px;

}

.artist-content p{

    margin-bottom:32px;

}

.artist-content a{

    display:inline-block;

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

    padding-bottom:6px;

    transition:.3s;

}

.artist-content a:hover{

    color:var(--gold);

}



/*======================================================

TIMELINE

======================================================*/

.timeline-home{

    background:#0f0f0f;

    text-align:center;

}

.timeline-intro{

    width:min(720px,90%);

    margin:0 auto 70px;

}

.timeline-strip{

    display:grid;

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

    gap:18px;

    margin-bottom:55px;

}

.year{

    padding:28px 18px;

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

    transition:.3s;

}

.year:hover{

    background:#181818;

}

.year span{

    display:block;

    margin-bottom:12px;

    color:var(--gold);

    font-size:.9rem;

    letter-spacing:.15em;

}

.year p{

    font-size:.98rem;

    line-height:1.6;

}



/*======================================================

GENERAL IMAGE TREATMENT

======================================================*/

figure{

    overflow:hidden;

}

figure img{

    transition:.8s ease;

}

figure:hover img{

    transform:scale(1.03);

}



/*======================================================

SPACING HELPERS

======================================================*/

.mt-small{

    margin-top:30px;

}

.mt-medium{

    margin-top:60px;

}

.mt-large{

    margin-top:100px;

}

.text-center{

    text-align:center;

}

/*======================================================

WHY THEY MATTER

======================================================*/

.why-section{

    background:#090909;

}

.why-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.why-image{

    overflow:hidden;

}

.why-image img{

    width:100%;

    aspect-ratio:4/5;

    object-fit:cover;

    transition:1.1s ease;

}

.why-image:hover img{

    transform:scale(1.04);

}

.why-text{

    max-width:620px;

}

.why-text h2{

    margin:24px 0 36px;

}

.why-text p{

    margin-bottom:28px;

}



/*======================================================

ICONIC MOMENTS

======================================================*/

.moments{

    background:#101010;

}

.moment-grid{

    display:grid;

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

    gap:30px;

    margin-top:55px;

}

.moment-card{

    position:relative;

    overflow:hidden;

    background:#111;

    aspect-ratio:16/9;

}

.moment-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s ease;

}

.moment-card:hover img{

    transform:scale(1.05);

}

.moment-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        transparent,

        rgba(9,9,9,.92)

    );

}

.moment-info{

    position:absolute;

    left:30px;

    bottom:28px;

    z-index:20;

}

.moment-info span{

    display:block;

    color:var(--gold);

    font-size:.82rem;

    letter-spacing:.22em;

    margin-bottom:8px;

    text-transform:uppercase;

}

.moment-info h3{

    font-size:2rem;

}



/*======================================================

EDITORIAL IMAGE

======================================================*/

.editorial-photo{

    padding:160px 0;

}

.editorial-photo figure{

    width:min(1600px,94%);

    margin:auto;

}

.editorial-photo img{

    width:100%;

    object-fit:cover;

}

.editorial-photo figcaption{

    max-width:720px;

    margin:24px auto 0;

    text-align:center;

    color:var(--muted);

    font-size:.95rem;

    line-height:1.8;

}



/*======================================================

HOW TO EXPLORE

======================================================*/

.explore-guide{

    background:#0d0d0d;

}

.guide-grid{

    display:grid;

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

    gap:60px;

    margin-top:65px;

}

.guide-grid article{

    padding-right:20px;

}

.guide-number{

    display:block;

    color:var(--gold);

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    margin-bottom:18px;

}

.guide-grid h3{

    margin-bottom:18px;

}

.guide-grid p{

    color:#d4d4d4;

}



/*======================================================

CLOSING HERO

======================================================*/

.closing-banner{

    position:relative;

    min-height:85vh;

    overflow:hidden;

    display:flex;

    align-items:center;

}

.closing-banner img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:brightness(.38);

}

.closing-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        rgba(0,0,0,.25),

        rgba(9,9,9,.96)

    );

}

.closing-content{

    position:relative;

    z-index:10;

    width:min(820px,90%);

    margin:auto;

    text-align:center;

}

.closing-content h2{

    margin:28px 0;

}

.closing-content p{

    max-width:680px;

    margin:0 auto 45px;

}



/*======================================================

FOOTER

======================================================*/

.site-footer{

    background:#090909;

    border-top:1px solid var(--line);

}

.footer-content{

    padding:80px 0;

    text-align:center;

}

.footer-title h3{

    font-size:2.3rem;

}

.footer-title{

    display:flex;

    flex-direction:column;

    align-items:center;

}

.footer-title h3{

    margin:0;

}

.footer-title p{

    margin-top:.8rem;

    width:100%;

    text-align:center;

    color:var(--text-muted);

    font-size:1rem;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.footer-nav{

    display:flex;

    justify-content:center;

    gap:34px;

    margin:45px 0;

}

.footer-nav a{

    text-transform:uppercase;

    letter-spacing:.16em;

    font-size:.85rem;

}

.footer-nav a:hover{

    color:var(--gold);

}

.copyright{

    max-width:760px;

    margin:auto;

    color:#888;

    font-size:.9rem;

}

.footer-content{

    width:min(var(--max-width),100%);

    margin:auto;

}


/*======================================================

SMOOTH FADE

======================================================*/

.fade-in{

    opacity:0;

    transform:translateY(40px);

    transition:1s ease;

}

.fade-in.visible{

    opacity:1;

    transform:none;

}

/*======================================================

EDITORIAL COMPOSITION

======================================================*/

.editorial-grid{

    display:grid;

    grid-template-columns:1.4fr .8fr;

    gap:70px;

    align-items:start;

}

.editorial-grid.reverse{

    grid-template-columns:.8fr 1.4fr;

}

.editorial-copy{

    max-width:640px;

}

.editorial-copy p{

    margin-bottom:28px;

}

.editorial-copy .lead{

    font-size:1.45rem;

    line-height:1.7;

    color:white;

}

.editorial-copy h2{

    margin:26px 0 40px;

}



/*======================================================

IMAGE TREATMENT

======================================================*/

.large-photo{

    width:100%;

    overflow:hidden;

}

.large-photo img{

    width:100%;

    object-fit:cover;

    transition:1.2s ease;

}

.large-photo:hover img{

    transform:scale(1.03);

}

.tall-photo{

    aspect-ratio:4/5;

}

.wide-photo{

    aspect-ratio:16/9;

}

.square-photo{

    aspect-ratio:1;

}



/*======================================================

FULL BLEED IMAGE

======================================================*/

.full-bleed{

    width:100%;

    margin:160px 0;

}

.full-bleed img{

    width:100%;

    max-height:900px;

    object-fit:cover;

}



/*======================================================

CAPTIONS

======================================================*/

figcaption{

    margin-top:18px;

    color:#a8a8a8;

    font-size:.92rem;

    line-height:1.8;

    max-width:620px;

}

.caption-right{

    margin-left:auto;

    text-align:right;

}



/*======================================================

FEATURED QUOTES

======================================================*/

.quote-wall{

    padding:200px 60px;

    text-align:center;

}

.quote-wall blockquote{

    max-width:1100px;

    margin:auto;

    font-family:"Cormorant Garamond",serif;

    font-size:clamp(2.5rem,5vw,4.8rem);

    font-weight:400;

    line-height:1.2;

    color:white;

}

.quote-wall cite{

    display:block;

    margin-top:35px;

    font-size:.95rem;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:var(--gold);

    font-style:normal;

}

/* ======================================================
   EXPLORE THE CAREER
====================================================== */

.explore-career {

    padding: 140px 8%;
    background: #0b0b0b;

}

.explore-career .section-heading {

    max-width: 900px;
    margin: 0 auto 70px;
    text-align: center;

}

.explore-career .section-intro {

    max-width: 760px;
    margin: 28px auto 0;
    font-size: 1.15rem;
    line-height: 1.9;
    color: rgba(255,255,255,.72);

}

.career-grid {

    display: grid;
    grid-template-columns: repeat(2, minmax(320px,1fr));
    gap: 40px;
    max-width: 1450px;
    margin: 0 auto;

}

.career-card {

    position: relative;
    overflow: hidden;
    border-radius: 18px;
    min-height: 520px;
    border: 1px solid rgba(255,255,255,.08);
    background: #111;
    transition: .45s ease;

}

.career-card:hover {

    transform: translateY(-8px);
    border-color: rgba(207,170,89,.45);
    box-shadow: 0 30px 70px rgba(0,0,0,.45);

}

.career-card img {

    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s ease;

}

.career-card:hover img {

    transform: scale(1.06);

}

.career-card .artist-overlay {

    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(0,0,0,.93) 10%,
            rgba(0,0,0,.55) 55%,
            rgba(0,0,0,.15) 100%);

}

.career-content {

    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 46px;

    z-index: 5;

}

.career-label {

    color: #caa34a;
    text-transform: uppercase;
    letter-spacing: .28em;
    font-size: .82rem;
    margin-bottom: 18px;
    font-weight: 600;

}

.career-content h3 {

    font-family: "Cormorant Garamond", serif;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1;

}

.career-content p {

    color: rgba(255,255,255,.82);
    line-height: 1.85;
    max-width: 500px;
    margin-bottom: 28px;
    font-size: 1.03rem;

}

.career-content a {

    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: #fff;
    text-decoration: none;

    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .85rem;

    transition: .3s ease;

}

.career-content a:hover {

    color: #caa34a;

}

.career-content a::after {

    content: "→";
    transition: transform .3s ease;

}

.career-content a:hover::after {

    transform: translateX(6px);

}


/* ==========================================
   Responsive
========================================== */

@media (max-width:1000px){

    .career-grid{

        grid-template-columns:1fr;

    }

}

@media (max-width:700px){

    .explore-career{

        padding:90px 6%;

    }

    .career-card{

        min-height:430px;

    }

    .career-content{

        padding:30px;

    }

    .career-content h3{

        font-size:2.4rem;

    }

}

/*======================================================

PHOTO WALL

======================================================*/

.photo-wall{

    columns:3;

    column-gap:24px;

    margin-top:70px;

}

.photo-wall figure{

    margin-bottom:24px;

    break-inside:avoid;

}

.photo-wall img{

    width:100%;

    transition:.8s;

}

.photo-wall img:hover{

    transform:scale(1.02);

}



/*======================================================

SECTION DIVIDERS

======================================================*/

.section-divider{

    width:min(1600px,94%);

    margin:120px auto;

    border-top:1px solid rgba(255,255,255,.08);

}



/*======================================================

SUBTLE HOVER

======================================================*/

a{

    transition:.28s ease;

}

a:hover{

    opacity:.94;

}



/*======================================================

READING WIDTH

======================================================*/

.reading-column{

    width:min(760px,90%);

    margin:auto;

}

.reading-column p{

    margin-bottom:30px;

}



/*======================================================

LISTS

======================================================*/

.editorial-list{

    margin:40px 0;

}

.editorial-list li{

    list-style:none;

    margin-bottom:16px;

    padding-left:18px;

    position:relative;

}

.editorial-list li::before{

    content:"";

    position:absolute;

    left:0;

    top:13px;

    width:6px;

    height:6px;

    background:var(--gold);

}



/*======================================================

SCROLLBAR

======================================================*/

::-webkit-scrollbar{

    width:11px;

}

::-webkit-scrollbar-track{

    background:#090909;

}

::-webkit-scrollbar-thumb{

    background:#2d2d2d;

}

::-webkit-scrollbar-thumb:hover{

    background:#555;

}



/*======================================================

TEXT SELECTION

======================================================*/

::selection{

    background:var(--gold);

    color:#111;

}

/* ==========================================
   WORKS CITED
========================================== */

/* ---------- Hero ---------- */

.works-hero{
    position:relative;
    overflow:hidden;
    padding:10rem 0 5rem;
}

.works-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top,
        rgba(199,167,90,.09),
        transparent 60%);
    pointer-events:none;
}

.works-hero .hero-content{
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: left;
}

.works-hero h1{
    margin: 0 0 2rem;
    line-height: .88;
}

.works-hero .hero-description{
    max-width: 760px;
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.9;
    color: #d0d0d0;
}

.works-hero .section-label{
    margin-bottom:1.25rem;
}


/* ---------- Divider ---------- */

.works-divider{
    width:140px;
    height:1px;
    margin:0 auto;
    background:linear-gradient(
        to right,
        transparent,
        rgba(199,167,90,.8),
        transparent
    );
}



/* ---------- Intro ---------- */

.works-intro{
    padding:2rem 0 6rem;
}

.works-overview{
    display:flex;
    justify-content:center;
    gap:5rem;
    margin-top:4rem;
    flex-wrap:wrap;
}

.works-stat{
    text-align:center;
}

.works-stat .number{
    display:block;
    font-family:var(--font-display);
    font-size:clamp(2.8rem,4vw,4rem);
    color:var(--gold);
    line-height:1;
    margin-bottom:.4rem;
}

.works-stat .label{
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#bfbfbf;
}



/* ---------- Cards ---------- */

.works-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(370px,1fr));
    gap:2.5rem;
}

.credit-card{
    background:#111;
    border:1px solid rgba(255,255,255,.08);
    border-radius:24px;
    padding:2.8rem;
    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.credit-card:hover{
    transform:translateY(-6px);
    border-color:rgba(199,167,90,.45);
    box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.credit-label{
    display:block;
    margin-bottom:1rem;
    color:var(--gold);
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.credit-card h2{
    margin-bottom:1.75rem;
    font-size:clamp(2.6rem,4vw,4.2rem);
    line-height:.92;
}

.credit-card p{
    margin-bottom:1.75rem;
    color:#d0d0d0;
    line-height:1.85;
}

.credit-card ul{
    margin:0;
    padding-left:1.2rem;
}

.credit-card li{
    margin-bottom:.95rem;
    line-height:1.75;
}

.credit-card em{
    font-style:italic;
}



/* ---------- Copyright ---------- */

.copyright-note{
    padding:6rem 0 5rem;
}

.copyright-note .works-divider{
    margin-bottom:3rem;
}

.copyright-note p{
    max-width:760px;
    margin:auto;
    text-align:center;
    line-height:1.9;
    color:#b8b8b8;
    opacity:.85;
}



/* ---------- Responsive ---------- */

@media (max-width:900px){

    .works-overview{
        gap:3rem;
    }

    .works-grid{
        grid-template-columns:1fr;
    }

    .credit-card{
        padding:2.2rem;
    }

    .works-hero{
        padding:8rem 0 4rem;
    }

    .works-intro{
        padding:2rem 0 5rem;
    }

}

/* ==========================================
   TIMELINE
========================================== */

.timeline-hero{
    padding:10rem 0 8rem;
}

.timeline-section{
    position:relative;
    padding:3rem 0 8rem;
}

.timeline-section .container{
    position:relative;
}

.timeline-line{

    position:absolute;

    left:50%;
    top:0;
    bottom:0;

    width:2px;

    transform:translateX(-50%);

    background:linear-gradient(
        to bottom,
        transparent,
        rgba(199,167,90,.25) 5%,
        rgba(199,167,90,.55) 50%,
        rgba(199,167,90,.25) 95%,
        transparent
    );

}



/* ==========================================
   ITEMS
========================================== */

.timeline-item{

    position:relative;

    margin:8rem 0;

}

.timeline-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:6rem;

}

.timeline-item.reverse .timeline-image{

    order:2;

}

.timeline-item.reverse .timeline-text{

    order:1;

}



/* ==========================================
   YEAR
========================================== */

.timeline-year{

    position:absolute;

    left:50%;

    top:-2.8rem;

    transform:translateX(-50%);

    width:92px;

    height:92px;

    border-radius:50%;

    background:#0d0d0d;

    border:2px solid rgba(199,167,90,.45);

    display:flex;

    align-items:center;

    justify-content:center;

    font-family:var(--font-heading);

    font-size:1.1rem;

    color:var(--gold);

    box-shadow:
        0 0 0 8px #090909,
        0 18px 40px rgba(0,0,0,.45);

    z-index:50;

}



/* ==========================================
   IMAGE
========================================== */

.timeline-image{

    width:85%;
    max-width:720px;

    margin:0 auto;

    aspect-ratio:16 / 9;

    overflow:hidden;

    border-radius:24px;

    background:#111;

    box-shadow:
        0 20px 60px rgba(0,0,0,.35);

}

.timeline-image img{

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;

    transition:
        transform .55s ease,
        filter .35s ease;

}

.timeline-item:hover .timeline-image img{

    transform:scale(1.04);

}

.timeline-item:hover .timeline-image{

    box-shadow:
        0 25px 70px rgba(0,0,0,.45);

}



/* ==========================================
   TEXT
========================================== */

.timeline-text{

    max-width:560px;

}

.timeline-item.reverse .timeline-text{

    margin-left:auto;

}

.timeline-text .section-label{

    margin-bottom:1rem;

}

.timeline-text h2{

    margin-bottom:1.5rem;

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

    line-height:.92;

}

.timeline-text p{

    color:#d2d2d2;

    font-size:1.05rem;

    line-height:1.9;

}



/* ==========================================
   LEGACY
========================================== */

.section-intro{

    max-width:860px;

    margin:2rem auto 0;

    line-height:2;

    font-size:1.15rem;

    color:#d2d2d2;

}



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

@media(max-width:1100px){

.timeline-line{

    left:45px;

}

.timeline-year{

    left:45px;

    transform:none;

}

.timeline-content{

    grid-template-columns:1fr;

    gap:2rem;

    padding-left:95px;

}

.timeline-item.reverse .timeline-image{

    order:1;

}

.timeline-item.reverse .timeline-text{

    order:2;

    margin-left:0;

}

.timeline-text{

    max-width:none;

}

.timeline-image img{

    height:360px;

}

}



@media(max-width:700px){

.timeline-hero{

    padding:8rem 0 6rem;

}

.timeline-item{

    margin:6rem 0;

}

.timeline-content{

    padding-left:70px;

}

.timeline-year{

    width:72px;

    height:72px;

    font-size:.95rem;

}

.timeline-image img{

    height:240px;

}

.timeline-text h2{

    font-size:2.3rem;

}

.timeline-text p{

    font-size:1rem;

}

}
/* ==========================================
   ABOUT HERO
========================================== */

.about-hero{
    position:relative;
    overflow:hidden;
    padding:9rem 0 7rem;
}

.about-hero::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 80% 25%,
        rgba(199,167,90,.08),
        transparent 45%);
}

.about-hero-grid{

    max-width:1320px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.5rem;
    align-items:center;

    position:relative;
    z-index:2;
}

.about-hero .hero-content{
    max-width:540px;
}

.about-hero h1{
    margin:.75rem 0 2rem;
    font-size:clamp(4rem,6vw,6.25rem);
    line-height:.9;
}

.about-hero p{
    max-width:650px;
    font-size:1.15rem;
    line-height:1.9;
    color:#d5d5d5;
}

.about-hero-image{

    max-width:440px;
    margin:0 auto;

}

.about-hero-image img{

    width:100%;
    aspect-ratio:4/5;

    object-fit:cover;

    border-radius:28px;

    display:block;

    box-shadow:
        0 35px 90px rgba(0,0,0,.45);

    transition:
        transform .5s ease;

}

.about-hero-image:hover img{
    transform:scale(1.02);
}



/* ==========================================
   STORY SECTIONS
========================================== */

.story-section{
    padding:7rem 0;
}

.story-section.alternate{
    background:#0c0c0c;
}

.story-section .container{

    max-width:1320px;

    margin:0 auto;

}

.split-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:3.5rem;

}

.split-grid.reverse .image-column{
    order:1;
}

.split-grid.reverse .text-column{
    order:2;
}



/* ==========================================
   TEXT
========================================== */

.text-column{

    max-width:540px;

    width:100%;

    margin:0 auto;

}

.text-column h2{

    margin:1rem 0 2rem;

    font-size:clamp(3rem,5vw,5rem);

    line-height:.92;

}

.text-column p{

    max-width:58ch;

    margin-bottom:1.8rem;

    color:#d3d3d3;

    line-height:2;

    font-size:1.08rem;

}



/* ==========================================
   IMAGES
========================================== */

.image-column{

    display:flex;

    justify-content:center;

    align-items:center;

}

.image-column img{

    width:100%;

    max-width:600px;

    height:400px;

    object-fit:cover;

    object-position:center;

    display:block;

    border-radius:24px;

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

    transition:
        transform .55s ease,
        filter .55s ease;

}

.image-column:hover img{

    transform:scale(1.025);

    filter:brightness(1.03);

}

/* Optional individual positioning */

.artist{
    object-position:center 42%;
}

.creativity{
    object-position:center;
}

.humanitarian{
    object-position:center 28%;
}

.project{
    object-position:center;
}



/* ==========================================
   DEVELOPMENT
========================================== */

.stats-grid{

    margin-top:4rem;

    display:grid;

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

    gap:2rem;

}

.stat-card{

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    border-radius:22px;

    padding:2.75rem;

    transition:.3s ease;

}

.stat-card:hover{

    transform:translateY(-5px);

    border-color:rgba(199,167,90,.45);

}

.stat-card h3{

    margin-bottom:1rem;

    font-size:1.8rem;

}

.stat-card p{

    color:#d0d0d0;

    line-height:1.8;

}



/* ==========================================
   CENTER CONTENT
========================================== */

.center{
    text-align:center;
}

.section-intro{

    max-width:900px;

    margin:2rem auto 0;

    font-size:1.15rem;

    line-height:2;

    color:#d5d5d5;

}



/* ==========================================
   SECTION LABEL
========================================== */

.section-label{

    display:inline-block;

    color:var(--gold);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}



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

@media (max-width:1100px){

.about-hero-grid{

    grid-template-columns:1fr;

    gap:3rem;

    text-align:center;

}

.about-hero-image{

    margin:auto;

}

.split-grid{

    grid-template-columns:1fr;

    gap:3rem;

}

.split-grid.reverse .image-column,
.split-grid.reverse .text-column{

    order:unset;

}

.text-column{

    max-width:700px;

}

.text-column p{

    max-width:none;

}

.image-column img{

    max-width:700px;

    height:420px;

}

.stats-grid{

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

}

}



@media (max-width:700px){

.about-hero{

    padding:8rem 0 6rem;

}

.about-hero h1{

    font-size:3.5rem;

}

.story-section{

    padding:5rem 0;

}

.text-column h2{

    font-size:2.7rem;

}

.image-column img{

    height:320px;

}

.stats-grid{

    grid-template-columns:1fr;

}

}