/* ========================================
   INVITED - OCEAN
======================================== */

:root{
    --navy:#021018;
    --white:#ffffff;
}

body{
    background:var(--navy);
    color:var(--white);
}



/* ===========================
   Navigation
=========================== */

nav{
    background:transparent;
}

nav .logo a,
nav ul li a{
    color:#fff;
}



/* ===========================
   Hero
=========================== */

.hero-ocean{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.hero-ocean video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-ocean::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.45)),
    radial-gradient(circle at top,rgba(255,255,255,.08),transparent 65%);
}

.hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    padding:20px;
}

.hero-overlay span{
    font-family:"Inter",sans-serif;
    letter-spacing:8px;
    font-size:.85rem;
    opacity:.7;
}

.hero-overlay h1{
    margin-top:18px;
    font-family:"Cormorant Garamond",serif;
    font-size:7rem;
    font-weight:500;
    letter-spacing:12px;
}

.hero-overlay p{
    margin-top:28px;
    font-size:1.15rem;
    line-height:2;
    opacity:.9;
}



/* ===========================
   Story
=========================== */

.ocean-story{
    max-width:1300px;
    margin:180px auto;
    padding:0 80px;

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;
    align-items:center;
}

.story-text span{
    letter-spacing:6px;
    font-size:.8rem;
    opacity:.5;
}

.story-text h2{
    margin:20px 0 40px;
    font-family:"Cormorant Garamond",serif;
    font-size:4rem;
    font-weight:500;
}

.story-text p{
    font-size:1.1rem;
    line-height:2.2;
    opacity:.85;
}

.story-image img{
    width:100%;
    border-radius:4px;
}



/* ===========================
   Full Image
=========================== */

.full-image{
    position:relative;
    margin:180px 0;
}

.full-image img{
    width:100%;
    height:85vh;
    object-fit:cover;
}

.full-image::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.35);
}

.overlay-text{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:2;

    font-family:"Cormorant Garamond",serif;
    font-size:4rem;
    text-align:center;
    letter-spacing:3px;
}



/* ===========================
   Marine Life
=========================== */

.marine-life{
    max-width:1400px;
    margin:180px auto;
    padding:0 70px;
}

.section-title{
    text-align:center;
    margin-bottom:80px;
}

.section-title span{
    letter-spacing:7px;
    opacity:.55;
    font-size:.8rem;
}

.section-title h2{
    margin:20px 0;
    font-family:"Cormorant Garamond",serif;
    font-size:4rem;
    font-weight:500;
}

.section-title p{
    font-size:1.05rem;
    opacity:.8;
}

.gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.gallery img{
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    transition:.6s;
}

.gallery img:hover{
    transform:scale(1.03);
}



/* ===========================
   Conservation
=========================== */

.conservation{
    padding:200px 20px;
    text-align:center;
}

.conservation span{
    letter-spacing:7px;
    opacity:.5;
    font-size:.8rem;
}

.conservation h2{
    margin:22px 0 35px;
    font-family:"Cormorant Garamond",serif;
    font-size:4rem;
    font-weight:500;
}

.conservation p{
    font-size:1.1rem;
    line-height:2.4;
    opacity:.85;
}



/* ===========================
   Ending
=========================== */

.ending{
    padding:180px 20px 220px;
    text-align:center;
}

.ending h2{
    font-family:"Cormorant Garamond",serif;
    font-size:4rem;
    font-weight:500;
    margin-bottom:25px;
}

.ending p{
    opacity:.75;
    margin-bottom:60px;
}

.cta{
    display:inline-block;
    padding:18px 46px;
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    letter-spacing:2px;
    transition:.35s;
}

.cta:hover{
    background:#fff;
    color:#021018;
}



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

@media (max-width:900px){

    .hero-overlay h1{
        font-size:4rem;
    }

    .ocean-story{
        grid-template-columns:1fr;
        gap:60px;
        padding:0 30px;
        margin:120px auto;
    }

    .story-text h2,
    .section-title h2,
    .conservation h2,
    .ending h2,
    .overlay-text{
        font-size:2.7rem;
    }

    .marine-life{
        padding:0 30px;
    }

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

    .full-image img{
        height:60vh;
    }

}