:root {

    --paper: #FBEED6;

    --blue: #0E3056;

    --blue-2: #397DA8;

    --gold: #DDA65C;

    --white: #FFF9ED;

    --ink-soft: rgba(14,48,86,.68);

    --line: rgba(14,48,86,.18);

    --serif: "Playfair Display", Georgia, serif;

    --serifq: "Times New Roman", Times, serif; 

    --sans: "DM Sans", Arial, sans-serif;
}


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


html {
    scroll-behavior: smooth;
}


body {

    background: var(--paper);

    color: var(--blue);

    font-family: var(--sans);

    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    max-width: 100%;
    display: block;
}


.container {

    width: min(1280px, calc(100% - 64px));

    margin: auto;
}


.serif {
    font-family: var(--serif);
}


.label {

    font-size: 10px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .2em;
}


.gold {
    color: var(--gold);
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav {

    position: fixed;

    z-index: 100;

    top: 0;
    left: 0;

    width: 100%;

    height: 76px;

    background: rgba(251,238,214,.92);

    backdrop-filter: blur(16px);

    border-bottom: 1px solid rgba(14,48,86,.1);
}


.nav-inner {

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.brand {

    display: flex;

    align-items: center;

    gap: 13px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: .04em;
}


.brand-mark {

    width: 20px;

    height: 20px;

    border: 1.5px solid var(--blue);

    border-radius: 50%;

    position: relative;

    display: grid;

    place-items: center;
}


.brand-mark::before {

    content: "";

    width: 8px;

    height: 8px;

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

    border-radius: 50%;
}


.nav-links {

    display: flex;

    align-items: center;

    gap: 30px;

    font-size: 11px;

    font-weight: 600;
}


.nav-links a {

    transition: color .25s ease;
}


.nav-links a:hover {

    color: var(--gold);
}


.nav-project {

    padding: 9px 16px;

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

    border-radius: 100px;
}


/* =========================================================
   HERO
========================================================= */

.hero {

    min-height: 100vh;

    padding-top: 76px;

    display: grid;

    grid-template-columns: 55% 45%;
}


/* LEFT */

.hero-content {

    padding:

        100px
        max(40px, calc((100vw - 1280px) / 2));

    padding-right: 90px;

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

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.project-label {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 28px;
}


.project-label::before {

    content: "";

    width: 38px;

    height: 1px;

    background: var(--gold);
}


.hero h1 {

    font-family: var(--serif);

    font-size: clamp(72px, 9vw, 145px);

    line-height: 1;

    letter-spacing: -.065em;

    font-weight: 500;
}


.hero h1 span {

    display: block;
}


.hero h1 .centennial {

    color: var(--gold);
}


.hero-intro {

    max-width: 600px;

    margin-top: 48px;

    font-family: var(--serif);

    font-size: 23px;

    line-height: 1.45;

    color: var(--blue);

    text-align: justify;

    }


.hero-small {

    font: var(--serif);

    max-width: 600px;

    margin-top: 25px;

    font-size: 20px;

    line-height: 1.45;

    color: var(--ink-soft);

    text-align: justify;
}


/* RIGHT */

.hero-visual {

    position: relative;

    background: var(--blue);

    overflow: hidden;
}


.hero-visual::before {

    content: "1947";

    position: absolute;

    z-index: 3;

    bottom: 475px;

    right: -35px;

    font-family: var(--serif);

    font-size: 190px;

    color: rgba(255,255,255,.2);

}


.hero-visual::after {

    content: "2047";

    position: absolute;

    z-index: 3;

    left: 35px;

    top: 190px;

    font-family: var(--serif);

    font-size: 190px;

    line-height: .8;

    color: rgba(255,255,255,.2);
}


.hero-image {

    position: absolute;

    inset: 0;
    
    background:

        linear-gradient(
            180deg,
            rgba(14,48,86,.12),
            rgba(14,48,86,.72)
        ),

        url(../assets/RBImage3.jpg)
        top / cover;

    opacity: .80;

    scale: 1;
}



/* hero message */

.hero-message {

    position: absolute;

    z-index: 5;

    left: 11%;

    right: 11%;

    bottom: 11%;
}


.hero-message .label {

    color: var(--gold);

    margin-bottom: 13px;
}


.hero-message h2 {

    max-width: 520px;

    font-family: var(--serif);

    color: white;

    font-size: clamp(35px, 4vw, 62px);

    line-height: .98;

    font-weight: 400;
}


.hero-message p {

    max-width: 430px;

    margin-top: 20px;

    color: rgba(255,255,255,.7);

    font-size: 12px;

    line-height: 1.7;
}



/* =========================================================
   POSITIONING STATEMENT
========================================================= */

.positioning {

    min-height: 90vh;

    display: grid;

    grid-template-columns: 35% 65%;
}


.positioning-aside {

    padding:

        120px
        max(40px, calc((100vw - 1280px) / 2));

    padding-right: 70px;

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


.positioning-aside .number {

    color: var(--gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .2em;
}


.positioning-aside h3 {

    margin-top: 25px;

    font-family: var(--serif);

    font-size: 42px;

    line-height: 1;
}


.positioning-main {

    padding: 120px 9vw;

    display: flex;

    align-items: center;
}


.positioning-main blockquote {

    max-width: 850px;

    font-family: var(--serif);

    font-size: clamp(32px, 4.5vw, 68px);

    line-height: 1;

    letter-spacing: -.035em;
}


.positioning-main blockquote em {

    color: var(--blue-2);

    font-style: normal;
}


.positioning-source {

    margin-top: 35px;

    padding-top: 18px;

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

    max-width: 600px;

    font-size: 20px;

    line-height: 1.45;

    color: var(--ink-soft);

    text-align: justify;
}


/* =========================================================
   THE CENTRAL QUESTION
========================================================= */

.question {

    min-height: 85vh;

    background: var(--blue);

    color: white;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;
}


.question::before {

    content: "?";

    position: absolute;

    right: 3%;

    bottom: -100px;

    font-family: var(--serif);

    font-size: 600px;

    line-height: .7;

    color: rgba(255,255,255,.035);
}


.question-inner {

    position: relative;

    z-index: 2;

    width: min(1100px, calc(100% - 64px));

    margin: auto;

    text-align: center;
}


.question .label {

    color: var(--gold);

    margin-bottom: 35px;
}


.question h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 8vw, 115px);

    line-height: 1;

    letter-spacing: -.06em;

    font-weight: 400;
}


.question h2 span {

    color: var(--gold);
}


.question p {

    max-width: 620px;

    margin: 38px auto 0;

    color: rgba(255,255,255,.65);

    font-size: 20px;

    line-height: 1.45;

}


/* =========================================================
   DIALOGUES INTRO
========================================================= */

.dialogues {

    padding: 130px 0;
}


.dialogues-header {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    margin-bottom: 80px;
}


.dialogues-title {

    font-family: var(--serif);

    font-size: clamp(58px, 7vw, 105px);

    line-height: 1;

    letter-spacing: -.065em;
}


.dialogues-description {

    align-self: end;

    max-width: 540px;

    font-size: 20px;

    line-height: 1.45;

    color: var(--ink-soft);

    text-align: justify;
}


/* =========================================================
   PODCAST FEATURE
========================================================= */

.dialogue-feature {

    display: grid;

    grid-template-columns: 52% 48%;

    min-height: 600px;

    background: var(--blue);
}


.dialogue-image {

    position: relative;

    min-height: 600px;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(14,48,86,.75)
        ),

        url("https://images.unsplash.com/photo-1485579149621-3123dd979885?q=80&w=1031&auto=format&fit=crop")
        center / cover;

        align-items: ;
    
}


.dialogue-image::after {

    content: "TICD";

    position: absolute;

    right: 25px;

    top: 25px;

    color: rgba(255,255,255,.75);

    font-size: 20px;

    font-weight: 700;

    letter-spacing: .2em;
}


.dialogue-image-caption {

    position: absolute;

    left: 35px;

    bottom: 35px;

    color: white;
}


.dialogue-image-caption .label {

    color: var(--gold);

    margin-bottom: 10px;
}


.dialogue-image-caption strong {

    font-family: var(--serif);

    font-size: 30px;

    font-weight: 400;
}


.dialogue-info {

    padding: 70px;

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.dialogue-info .label {

    color: var(--gold);

    margin-bottom: 20px;
}


.dialogue-info h3 {

    font-family: var(--serif);

    font-size: clamp(42px, 5vw, 68px);

    line-height: 1;

    letter-spacing: -.045em;

    font-weight: 400;
}


.dialogue-info p {

    margin-top: 25px;

    max-width: 480px;

    color: rgba(255,255,255,.68);

    font-size: 20px;

    line-height: 1.45;

    text-align: justify;
}


.watch {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 35px;

    padding-bottom: 9px;

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

    color: white;

    width: fit-content;

    font-size: 11px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .12em;
}

/* Section Divider */

.section-divider {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 50px 8%;
    background: var(--paper);
}

.section-divider::before,
.section-divider::after {
    content: "";
    height: 2px;
    flex: 1;
    background: linear-gradient(
        90deg,
        transparent,
       var(--blue),
        transparent
    );
}

.section-divider span {
    width: 10px;
    height: 10px;
    background: var(--blue);
    transform: rotate(45deg);
}

/* =========================================================
   WHAT MAKES THE DIALOGUES DIFFERENT
========================================================= */

.principles {

    padding: 130px 0;
}


.principles-header {

    display: flex;

    justify-content: space-between;

    align-items: end;

    gap: 50px;

    margin-bottom: 50px;
}


.principles-header h2 {

    font-family: var(--serif);

    font-size: clamp(48px, 6vw, 85px);

    line-height: 1;

    letter-spacing: -.055em;
}


.principles-header p {

    max-width: 420px;

    font-size: 20px;

    line-height: 1.45;

    color: var(--ink-soft);

    text-align: justify;
    }


.principle-grid {

    
    display: grid;

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

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

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


.principle {

    min-height: 50px;

    padding: 28px;

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

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.principle:last-child {

    border-right: 0;
}


.principle-number {

    font-family: var(--serif);

    font-size: 22px;

    color: var(--gold);
}


.principle h3 {

    font-family: var(--serif);

    font-size: 27px;

    line-height: 1;
}


.principle p {

    margin-top: 15px;

    font-size: 12px;

    line-height: 1.7;

    color: var(--ink-soft);
}


/* =========================================================
   EPISODES
========================================================= */

.episodes {

    padding: 130px 0;

    background: rgba(57,125,168,.07);
}


.episodes-header {

    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-bottom: 65px;
}


.episodes-header h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 7vw, 100px);

    line-height: 1;

    letter-spacing: -.06em;
}


.episodes-header p {

    max-width: 500px;

    align-self: end;

    font-size: 20px;

    line-height: 1.45;

    color: var(--ink-soft);

    text-align: justify;

}


.episode-grid {

    display: grid;

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

    gap: 35px;
}


.episode {

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

    padding-top: 17px;

    transition: transform .35s ease;
}


.episode:hover {

    transform: translateY(-8px);
}


.episode-image {

    aspect-ratio: 4 / 3;

    overflow: hidden;

    margin-bottom: 20px;

    background: var(--blue);
}

.episode-imagecu {

    aspect-ratio: 4 / 3;

    overflow: hidden;

    margin-bottom: 20px;

    background: var(--blue);
}


.episode-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

    opacity: 0.8;

    background:

        linear-gradient(
            180deg,
            rgba(14,48,86,.12),
            rgba(14,48,86,.72)
        ),

    
}


.episode-imagecu img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .8s ease;

    opacity: 0.3;

    background:

        linear-gradient(
            180deg,
            rgba(14,48,86,.12),
            rgba(14,48,86,.72)
        ),

        
}

.episode-imagecu::before {

    content: "Coming Soon";

    position: absolute;

    z-index: 3;

    top: 30px;

    left: 20px;
          
    font-family: var(--serif);

    font-size: 32px;

    color: rgba(255,255,255,.5);
}



.episode:hover img {

    transform: scale(1.05);
}


.episode-meta {

    color: var(--gold);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .15em;
}


.episode h4 {

    min-height: 65px;

    margin-top: 11px;

    font-family: var(--serif);

    font-size: 28px;

    line-height: 1;
}


.episode p {

    margin-top: 12px;

    font-size: 12px;

    line-height: 1.7;

    color: var(--ink-soft);

    text-align: justify;
}


/* =========================================================
   PEOPLE
========================================================= */

/* .people {

    padding: 130px 0;
}


.people-header {

    max-width: 750px;

    margin-bottom: 65px;
}


.people-header .label {

    color: var(--gold);
}


.people-header h2 {

    margin-top: 20px;

    font-family: var(--serif);

    font-size: clamp(52px, 6vw, 90px);

    line-height: .9;

    letter-spacing: -.06em;
}


.people-header p {

    margin-top: 25px;

    max-width: 600px;

    font-size: 14px;

    line-height: 1.8;

    color: var(--ink-soft);
}


.people-grid {

    display: grid;

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

    gap: 20px;
}


.person {

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

    padding-top: 15px;
}


.person-image {

    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: var(--blue);
}


.person-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter: saturate(.75);

    transition: transform .6s ease;
}


.person:hover img {

    transform: scale(1.05);
}


.person-name {

    margin-top: 16px;

    font-family: var(--serif);

    font-size: 21px;
}


.person-role {

    margin-top: 5px;

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: .12em;

    color: var(--blue-2);
} */


/* =========================================================
   WIDER TICP ECOSYSTEM
========================================================= */

.ecosystem {

    padding: 130px 0;

    background: var(--blue);

    color: white;
}


.ecosystem-header {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    margin-bottom: 70px;
}


.ecosystem-header h2 {

    font-family: var(--serif);

    font-size: clamp(55px, 7vw, 105px);

    line-height: 1;

    letter-spacing: -.06em;
}


.ecosystem-header p {

    max-width: 500px;

    align-self: end;

    color: rgba(255,255,255,.62);

    font-size: 20px;

    line-height: 1.45;

    text-align: justify;
}


.ecosystem-grid {

    display: grid;

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

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


.ecosystem-item {

    min-height: 100px;

    padding: 30px;

    border-right: 1px solid rgba(255,255,255,.18);

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.ecosystem-item:last-child {

    border-right: 0;
}


.ecosystem-number {

    color: var(--gold);

    font-family: var(--serif);

    font-size: 22px;
}


.ecosystem-item h3 {

    font-family: var(--serif);

    font-size: 31px;

    line-height: 1;
}


.ecosystem-item p {

    margin-top: 15px;

    color: rgba(255,255,255,.6);

    font-size: 12px;

    line-height: 1.7;
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.final {

    min-height: 90vh;

    display: grid;

    place-items: center;

    text-align: center;

    padding: 100px 30px;
}


.final-inner {

    max-width: 1000px;
}


.final .label {

    color: var(--gold);

    margin-bottom: 30px;
}


.final h2 {

    font-family: var(--serif);

    font-size: clamp(50px, 7vw, 105px);

    line-height: 1;

    letter-spacing: -.06em;
}


.final h2 span {

    color: var(--blue-2);
}


.final p {

    max-width: 620px;

    margin: 30px auto 0;

    font-size: 20px;

    line-height: 1.45;

    color: var(--ink-soft);
}


/* =========================================================
   FOOTER
========================================================= */

footer {

    background: var(--blue);

    color: white;

    padding: 60px 0 30px;
}


.footer-top {

    display: flex;

    justify-content: space-between;

    gap: 70px;

    padding-bottom: 45px;

    border-bottom: 1px solid rgba(255,255,255,.15);
}


.footer-brand {

    max-width: 400px;
}


.footer-brand .brand {

    color: white;
    font-family: var(--serif);
}


.footer-brand .brand-mark {

    border-color: white;
}


.footer-brand p {

    margin-top: 18px;

    color: rgba(255,255,255,.55);

    font-size: 12px;

    line-height: 1.8;
}


.footer-links {

    display: flex;

    gap: 70px;
}


.footer-column strong {

    display: block;

    margin-bottom: 15px;

    color: var(--gold);

    font-size: 9px;

    letter-spacing: .16em;

    text-transform: uppercase;
}


.footer-column a {

    display: block;

    margin: 8px 0;

    color: rgba(255,255,255,.6);

    font-size: 11px;
}


.footer-bottom {

    display: flex;

    justify-content: space-between;

    padding-top: 25px;

    color: rgba(255,255,255,.35);

    font-size: 9px;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2,.7,.2,1);
}


.reveal.visible {

    opacity: 1;

    transform: translateY(0);
}


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

@media(max-width: 950px) {

    .container {

        width: min(100% - 36px, 1280px);
    }


    .nav-links {

        display: none;
    }


    .hero {

        grid-template-columns: 1fr;
    }


    .hero-content {

        padding:

            120px
            28px
            80px;

        border-right: 0;
    }


    .hero-visual {

        min-height: 70vh;
    }


    .centennial-bar {

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


    .counter {

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


    .positioning {

        grid-template-columns: 1fr;
    }


    .positioning-aside {

        padding: 80px 28px;

        border-right: 0;

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


    .positioning-main {

        padding: 80px 28px;
    }


    .dialogues-header,
    .episodes-header,
    .ecosystem-header {

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .dialogue-feature {

        grid-template-columns: 1fr;
    }


    .dialogue-image {

        min-height: 500px;
    }


    .principle-grid {

        grid-template-columns: 1fr 1fr;
    }


    .principle {

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


    .episode-grid {

        grid-template-columns: 1fr 1fr;
    }


    .people-grid {

        grid-template-columns: 1fr 1fr;
    }


    .ecosystem-grid {

        grid-template-columns: 1fr;
    }


    .ecosystem-item {

        border-right: 0;

        border-bottom: 1px solid rgba(255,255,255,.18);
    }


    .footer-top {

        flex-direction: column;
    }

}


@media(max-width: 600px) {

    .hero h1 {

        font-size: 75px;
    }


    .hero-intro {

        font-size: 20px;
    }


    .hero-visual {

        min-height: 65vh;
    }


    .hero-message {

        left: 8%;

        right: 8%;
    }


    .centennial-bar {

        grid-template-columns: 1fr 1fr;
    }


    .counter {

        padding: 22px 16px;
    }


    .dialogue-info {

        padding: 45px 28px;
    }


    .dialogue-image {

        min-height: 400px;
    }


    .principles-header {

        display: block;
    }


    .principles-header p {

        margin-top: 25px;
    }


    .principle-grid {

        grid-template-columns: 1fr;
    }


    .episode-grid {

        grid-template-columns: 1fr;
    }


    .people-grid {

        grid-template-columns: 1fr 1fr;
    }


    .footer-links {

        gap: 35px;

        flex-wrap: wrap;
    }


    .footer-bottom {

        flex-direction: column;

        gap: 8px;
    }

}