/* FONTS */
@font-face {
    font-family: "Geist";
    src: url("fonts/Geist-Bold.woff") format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("fonts/Geist-SemiBold.woff") format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("fonts/Geist-Regular.woff") format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("fonts/Geist-Light.woff") format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
	--spacing: 1rem;
	font-family: 'Geist', sans-serif;
    font-weight: 300;
	font-size: 115%;
    scroll-behavior: smooth;

    /* neutral base */
    --off-white: #FAFAFA; 
    --charcoal: #2d2d2d;
    --neutral-grey: #898989;

    /* main accent colors */
    --light-blue: #009FF0; 
    --rich-pink: #D8007B;
    --sun-yellow: #EDE248;

    /* transparrent accent colors */
    --transparrent-rich-pink: rgba(216, 0, 130, 0.8); 
    --transparrent-sun-yellow: rgba(237, 226, 72, 0.8);
    --transparrent-light-blue: rgba(0, 159, 240, 0.8); 
}

@media print {
        :root {
        /* neutral base */
        --off-white: #FFFFFF; 
        --charcoal: #2d2d2d;
        --neutral-grey: #898989;

        /* main accent colors */
        --light-blue: #ECECEC; 
        --rich-pink: #DADADA;
        --sun-yellow: #C5C5C5;

        /* transparrent accent colors */
        --transparrent-light-blue: #ECECEC;
        --transparrent-rich-pink: #DADADA;
        --transparrent-sun-yellow: #C5C5C5;

        --background: initial;
    }
}

@media print {
    .hide {
        display: none;
    }
}

/* WRAPPER TYPES */
body {
    display: flex;
    flex-direction: column;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; 
    letter-spacing: 0rem;
    color: var(--neutral-grey);
    gap: 6rem;
    background-color: var(--off-white);

    @media (width > 600px) {
		font-size: 1.125rem;
        letter-spacing: 0rem;
        gap: 6rem;
	}

    @media (width > 900px) {
		font-size: 1.5rem;
        letter-spacing: -0.018rem;
        gap: 10rem;
	}

    @media print {
        font-size: 1.125rem;
        letter-spacing: 0rem;
        gap: 6rem;
    }
}

header {
    width: 100%;
    font-size: 2.125rem;
    position: fixed;
    z-index: 10;
    padding-block: 1rem;
    padding-inline: 1rem;

    @media (width > 600px) {
        padding-block: 1.2rem;
        padding-inline: 1.2rem;
    }

    @media (width > 900px) {
        padding-block: 1.5rem;
        padding-inline: 1.5rem;
    }

    @media print {
        position: static;
        padding-block: 0rem;
        padding-inline: 0rem;
    }
}

nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.logo { 
    color: var(--charcoal);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; 
    letter-spacing: 0rem;
    text-transform: uppercase;

    @media (width > 600px) {
        font-size: 1.5rem;
        line-height: 130%; 
         letter-spacing: -0.025rem;
    }

    @media (width > 900px) {
        font-size: 1rem;
        line-height: 130%; 
        letter-spacing: 0rem;
    }

    @media (width > 1200px) {
        font-size: 1.5rem;
        line-height: 130%; 
        letter-spacing: -0.025rem;
    }
}

main {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6rem;

    @media (width > 600px) {
        gap: 6rem;
    }

    @media (width > 900px) {
        gap: 10rem;
    }

    @media print {
        gap: 4.5rem;
    }
}

article {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3rem;
    width: 100%;
    padding-inline: 1rem;

    @media (width > 600px) {
        gap: 3rem;
        padding-inline: 1.2rem;
    }

    @media (width > 900px) {
        gap: 5rem;
        padding-inline: 1.5rem;
    }

    @media print {
        padding-inline: 0rem;
        gap: 3rem;
    }
}

.hero {
    overflow: hidden;
    min-height: 98svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: start;
    padding-inline: 0rem;

     @media (width > 600px) {
            min-height: 100svh;
        }

    @media (width > 900px) {
            min-height: 100svh;
        }

    @media (width > 1200px) {
            min-height: 100svh;
        }

    @media print {
            min-height: auto;
            gap: 24.5rem;
        }  
}

.display {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    inline-size: 100%;
}


.display span.h1 {
    display: block;
    mix-blend-mode: multiply;
}

.display span.h1:nth-child(1),
.display span.h1:nth-child(5),
.display span.h1:nth-child(9) { color: var(--charcoal); }

.display span.h1:nth-child(2),
.display span.h1:nth-child(8) { color: var(--transparrent-rich-pink); }

.display span.h1:nth-child(3),
.display span.h1:nth-child(6) { color: var(--transparrent-sun-yellow); }

.display span.h1:nth-child(4),
.display span.h1:nth-child(7) { color: var(--transparrent-light-blue); }


section {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 3rem;

    @media (width > 600px) {
        gap: 3rem;
        padding-inline-start: 18%;
    }

    @media (width > 900px) {
        gap: 5rem;
        padding-inline: 20%;
    }

    @media print {
        gap: 2rem;
    }
}

.intro-line {
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    @media (width > 600px) {
        padding-inline-start: 0%;
    }   

    @media (width > 900px) {
        padding-inline-start: 20%;
    }
}

.duo {
    align-items: flex-start;
    margin-block: 0.35rem;


    @media (width > 600px) {
        margin-block: 1rem;
    }

    @media (width > 900px) {
        margin-block: 1.8rem;
    }
} 

.duo-intro { /* UPDATED */
    align-items: flex-start;
    margin-block: 0.35rem;


    @media (width > 600px) {
        align-items: flex-end; 
        margin-block: 1rem;
    }

    @media (width > 900px) {
        align-items: flex-end; 
        margin-block: 1.8rem;
    }
} 

.duo-nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.duo,
.duo-intro {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;

    @media (width > 600px) {
        flex-direction: row;
        justify-content: space-between;
        
    }

    @media (width > 900px) {
        flex-direction: row;
        justify-content: space-between;
        
    }
}

.group {
    display: flex;
    flex-direction: row;

    @media (width > 600px) {
        flex-direction: column;
    }

    @media (width > 900px) {
        flex-direction: column;
    }
}

.group .square:nth-child(1) { background: var(--light-blue); }
.group .square:nth-child(2) { background: var(--rich-pink); }
.group .square:nth-child(3) { background: var(--sun-yellow); }
.group .square:nth-child(4) { background: var(--charcoal); }

.square {
    width: 1.5rem;
    height: 1.5rem;
}

.sub-wrapper {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    padding-inline: 1rem;

    @media (width > 600px) {
        inline-size: 88%;
        padding-inline: 1.2rem;
    }

    @media (width > 900px) {
        inline-size: 80.75%;
        padding-inline: 1.5rem;
    }

    @media print {
        padding-inline: 0rem;
    }
}

.vertical,
.date {
    align-self: stretch;
    text-align: right;
    font-weight: 400;
    color: var(--neutral-grey);
    text-transform: uppercase;
    
    @media (width > 600px) {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        transform-origin: center;
    }

    @media (width > 900px) {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        transform-origin: center;
    }
}

.vertical {
    font-size: 0.75rem;
    order: 2;
    
    
    @media (width > 600px) {
        font-size: 0.875rem;
        order: 1;
        padding-inline-end: 0.5rem;
    }

    @media (width > 900px) {
        font-size: 1.25rem;
        order: 1;
        padding-inline-end: 0.75rem;
    }
}

.date {
    font-size: 1rem;
    text-align: left;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transform-origin: center;
    
    @media (width > 600px) {
        font-size: 1.2rem;
    }

    @media (width > 900px) {
        font-size: 1.5rem;
    }
}

.citation { /* UPDATED */
    display: flex;
    inline-size: 100%;
    order: 1;
    position: relative;

    @media (width > 600px) {
        inline-size: 82%;
        order: 2;
    }

    @media (width > 900px) {
        inline-size: 80%;
        order: 2;
    }
}

/* CONTENT TYPES */
h1 {
    height: 5rem;
    overflow: visible;
    display: flex;
    flex-direction: column;
    font-weight: 700;
    font-size: 5rem;
    line-height: 1.75rem;
    color: var(--charcoal);
    margin-block-start: 5.5rem;
    margin-inline-start: -0.5rem;
    letter-spacing: -0.15rem;

    @media (width > 600px) {
        height: 8rem;
        font-size: 7.5rem;
        line-height: 2rem;
        margin-block-start: 8rem;
        margin-inline-start: -0.75rem;
        letter-spacing: -0.25rem;
    }

    @media (width > 900px) {
        height: 15rem;
        font-size: 9rem;
        line-height: 2.75rem;
        margin-block-start: 1.75rem;
        margin-inline-start: -0.75rem;
        letter-spacing: -0.25rem;
        margin-inline-start: 20%;
    }

    @media (width > 1200px) {
        height: 20rem;
        font-size: 11rem;
        line-height: 3rem;
        margin-block-start: 2.25rem;
        letter-spacing: -0.25rem;
        margin-inline-start: 20%;
    }

    @media print {
        margin-block-start: 1.65rem;
        letter-spacing: 0rem;
        margin-inline-start: 0%;
        font-size: 7.5rem;
    }
}

h2 {
    font-size: 2.25rem;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: -0.023rem;
    text-transform: uppercase;
    color: var(--off-white);
    padding-inline-start: 0.4rem;

    @media (width > 600px) {
        font-size: 3.25rem;
        line-height: 100%;
        letter-spacing: -0.083rem;
        color: var(--charcoal);
        background-color: var(--off-white);
        padding-inline-start: 0.8rem;
        padding-inline-end: 1rem;
        margin-inline-start: -0.8rem;
    }

    @media (width > 900px) {
        font-size: 4.5rem;
        line-height: 100%;
        letter-spacing: -0.083rem;
        color: var(--charcoal);
        background-color: var(--off-white);
        padding-inline-start: 1rem;
        padding-inline-end: 1.2rem;
        margin-inline-start: -1rem;
    }

    @media (width > 1200px) {
        font-size: 6rem;
        line-height: 100%;
        letter-spacing: -0.083rem;
        color: var(--charcoal);
        background-color: var(--off-white);
        padding-inline-start: 1rem;
        padding-inline-end: 1.2rem;
        margin-inline-start: -1rem;
    }

    @media print {
        color: var(--off-white);
        font-size: 3.25rem;
        line-height: 100%;
        letter-spacing: -0.083rem;
    }
}

blockquote { 
    font-weight: 700;
    font-size: 1.575rem;
    line-height: 115%;
    mix-blend-mode: multiply;
    letter-spacing: -0.025rem;
    color: var(--light-blue);

    @media (width > 600px) {
        font-size: 2.75rem;
        line-height: 105%;
        letter-spacing: -0.083rem;
    }

    @media (width > 900px) {
        font-size: 4.6rem;
        line-height: 100%;
        letter-spacing: -0.083rem;
    }

    @media print {
        font-size: 2.15rem;
        line-height: 110%;
        letter-spacing: -0.083rem;
        color: var(--sun-yellow);
    }
}

blockquote::before { 
    content: '“';
    
}

blockquote::after {  
    content: '”';
    }

@media (width > 600px) { 
    blockquote::before {
    content: '“';
    margin-inline-start: -0.5em;
    }

    blockquote::after{ 
    content: '”';
    }
}

@media (width > 900px) { 
    blockquote::before { 
    content: '“';
    margin-inline-start: -0.5em;
    }

    blockquote::after{ 
    content: '”';
    }
}

.lvl-01, 
.lvl-02 {
    position: absolute;

    @media print {
        display: none;
    }
}

.lvl-01 { 
    margin-block-start: 0.12rem;
    color: var(--rich-pink);

    @media (width > 600px) {
        margin-block-start: 0.24rem;
        color: var(--rich-pink);
    }

    @media (width > 900px) {
        margin-block-start: 0.35rem;
        color: var(--rich-pink);
    }
}

.lvl-02 { 
    margin-block-start: 0.24rem;
    color: var(--sun-yellow);


    @media (width > 600px) {
        margin-block-start: 0.48rem;
        color: var(--sun-yellow);
    }

    @media (width > 900px) {
        margin-block-start: 0.7rem;
        color: var(--sun-yellow);
    }
}

p { 
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; 
    letter-spacing: 0rem;
    color: var(--charcoal);
    gap: 6rem;

    @media (width > 600px) {
		font-size: 1.125rem;
        letter-spacing: 0rem;
	}

    @media (width > 900px) {
		font-size: 1.5rem;
        letter-spacing: -0.018rem;
	}

    @media print {
        font-size: 1rem;
        letter-spacing: 0rem;
        line-height: 150%; 
    }
}

.subtitle { 
    width: 85%;
    font-size: 1.15rem;
    font-style: normal;
    font-weight: 400;
    line-height: 125%; 
    letter-spacing: 0rem;
    color: var(--charcoal);
    text-transform: uppercase;
    margin-block-end: -0.24rem;

    @media (width > 600px) {
        width: 85%;
        font-size: 1.5rem;
        letter-spacing: -0.02rem;
        line-height: 115%; 
        margin-block-end: -0.3rem;
	}

    @media (width > 900px) {
        width: 80%;
        font-size: 2rem;
        letter-spacing: -0.023rem;
        line-height: 115%;
        margin-block-end: -0.3rem;
	}

    @media (width > 1200px) {
        width: 60%;
        font-size: 2rem;
        letter-spacing: -0.023rem;
        line-height: 115%;
        margin-block-end: -0.3rem;
	}

    @media print {
        width: 60%;
    }
}

.intro { 
    color: var(--neutral-grey);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; 
    letter-spacing: 0rem;

    @media (width > 600px) {
        font-size: 1.75rem;
        font-weight: 400;
        line-height: 125%; 
        letter-spacing: -0.04rem;
    }

    @media (width > 900px) {
        font-size: 2.5rem;
        font-weight: 400;
        line-height: 120%; 
        letter-spacing: -0.065rem;
    }

    @media print {
        color: var(--neutral-grey);
        font-size: 1.55rem;
        font-style: normal;
        font-weight: 400;
        line-height: 120%; 
        letter-spacing: 0rem;
        }
}

.italics {
    text-transform: uppercase;
}

a {      
    color: var(--charcoal);
    text-decoration: underline;
    text-decoration-color: var(--sun-yellow);
    text-decoration-thickness: 0.375rem;
    text-underline-offset: -0.12rem;
    text-decoration-skip-ink: none;
}

@media (width > 900px) {
    a { 
        text-decoration-thickness: 0.625rem;
        text-underline-offset: -0.25rem;
    }
}

@media print {
    a {
        font-weight: 600;
        color: var(--charcoal);
        text-decoration: none;
    }
}


a:hover {
    color: var(--charcoal);
}

@media (width > 900px) {
    a:hover {
        color: var(--off-white);
        text-decoration: underline;
        text-decoration-color: var(--light-blue);
        text-decoration-thickness: 1.8rem;
        text-underline-offset: -1.4rem;
        text-decoration-skip-ink: none;
    }
}

a.button:link {
    text-decoration: none;
}

.button .logo:not(:first-child) {
    font-weight: 400;
}

/* ACCORDION STYLING */
/* <REFS>  */
    /* https://www.youtube.com/watch?v=fSkhTd4rpDo&t=392s
    https://www.builder.io/blog/animated-css-accordions
    https://developer.mozilla.org/en-US/docs/Web/CSS/::details-content
<FOR THE + & -> 
    https://developer.mozilla.org/en-US/docs/Web/CSS/::selection */

ul {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.accordian {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    @media (width > 600px) {
        gap: 3rem;
        }

    @media (width > 900px) {
        gap: 4rem;
        }

    @media print {
        gap: 4rem;
    }
}

.accordian li:nth-child(1) summary, 
.accordian li:nth-child(4) summary { background: var(--light-blue); }

.accordian li:nth-child(2) summary,
.accordian li:nth-child(5) summary { background: var(--rich-pink); }

.accordian li:nth-child(3) summary,
.accordian li:nth-child(6) summary { background: var(--sun-yellow); }

@media print {
    .accordian li:nth-child(1) summary, 
    .accordian li:nth-child(4) summary { background: var(--transparrent-sun-yellow); }

    .accordian li:nth-child(2) summary,
    .accordian li:nth-child(5) summary { background: var(--transparrent-sun-yellow); }

    .accordian li:nth-child(3) summary,
    .accordian li:nth-child(6) summary { background: var(--transparrent-sun-yellow); }
}

@media (width > 600px) {
    .accordian li:nth-child(1) h2,
    .accordian li:nth-child(4) h2 { color: var(--light-blue); }
}

@media (width > 900px) {
    .accordian li:nth-child(1) h2,
    .accordian li:nth-child(4) h2 { color: var(--light-blue); }
}

@media print {
    .accordian li:nth-child(1) h2,
    .accordian li:nth-child(4) h2 { color: var(--transparrent-sun-yellow); }
}

@media (width > 600px) {
    .accordian li:nth-child(2) h2,
    .accordian li:nth-child(5) h2 { color: var(--rich-pink); }
}

@media (width > 900px) {
    .accordian li:nth-child(2) h2,
    .accordian li:nth-child(5) h2 { color: var(--rich-pink); }
}

@media print {
    .accordian li:nth-child(2) h2,
    .accordian li:nth-child(5) h2 { color: var(--transparrent-sun-yellow); }
}

@media (width > 600px) {
    .accordian li:nth-child(3) h2,
    .accordian li:nth-child(6) h2 { color: var(--sun-yellow); }
}

@media (width > 900px) {
    .accordian li:nth-child(3) h2,
    .accordian li:nth-child(6) h2 { color: var(--sun-yellow); }
}

@media print {
    .accordian li:nth-child(3) h2,
    .accordian li:nth-child(6) h2 { color: var(--transparrent-sun-yellow); }
}

summary {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: row;
    padding-inline-start: 0.5rem;

    @media (width > 600px) {
        padding-inline-start: 18.5%;
        }

    @media (width > 900px) {
        justify-content: space-between;
        padding-inline-start: 20.5%;
        }
}

summary::after {
    content: '+';
    display: flex;
    position: absolute;
    text-align: center;
    padding-inline-end: 1rem;
    inset-inline-end: 0;
    inset-block-start: 45%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
    font-size: 2.25rem;
    color: var(--off-white);

    @media (width > 600px) {
        padding-inline-end: 1.2rem;
        font-size: 3.25rem;
    }

    @media (width > 900px) {
        padding-inline-end: 1.5rem;
        font-size: 4.5rem;
    }

    @media (width > 1200px) {
        padding-inline-end: 1.5rem;
        font-size: 6rem;
    }

    @media print {
        content: none;
    }
}

details[open] summary::after {
    content: '−';

    @media print {
        content: none;
    }
}

details { 
    display: flex;
    flex-direction: column;
    gap: 0.4rem;

    @media (width > 600px) {
        padding-block-start: 1rem;
    }

    @media (width > 900px) {
        padding-block-start: 2.5rem;
    }
}

@media print {
    details > summary + article {
        margin-top: 3.5rem;
    }
}


details article {
    opacity: 0%;
    overflow: hidden;
    transition: all 0.5s ease;

    @media print {
        opacity: 100%;
    }
}
/* <REF>: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Printing */
details[open] article { 
    opacity: 1;
    padding-block-start: 4rem;
    padding-block-end: 1.5rem;

    @media (width > 600px) {
        padding-block-start: 6rem;
        padding-block-end: 3rem;
    }

    @media (width > 900px) {
        padding-block-start: 8rem;
        padding-block-end: 3rem;
    }
}

@media print {
	::details-content { content-visibility: visible;}
}

/* FOOTER */
/* <FLEX COLUMNS> https://www.youtube.com/watch?v=WkVOt53wK6k */
.footer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 2rem;
    margin-block-end: 1rem;

    @media (width > 600px) {
        flex-direction: row; 
    }

@media (width > 900px) {
        padding: 4rem;
        gap: 3rem;
    }
    
@media print {
        display: none;
    }
}

.footer .columns {
    flex: 1;
}

.misc-wap{
    background: var(--off-white)
}

.color {
    display: flex;
    align-items: center;
    background: var(--charcoal);
    color: var(--off-white);
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline-start: 0.5rem;

    @media (width > 600px) {
        padding-inline-start: 18.5%;
        }

    @media (width > 900px) {
        padding-inline-start: 21%;
        }

    @media print {
        color: var(--charcoal);
        display: none;
    }
}

.ftr {
    overflow: hidden;
    min-height: 98svh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    text-align: start;
    padding-inline: 0rem;
    margin-block-end: 1rem;

     @media (width > 600px) {
            min-height: 100svh; 
            margin-block-end: 0rem;
        }

    @media (width > 900px) {
            min-height: 100svh;
             margin-block-end: 0rem;
        }

    @media (width > 1200px) {
            min-height: 100svh;
            margin-block-end: 0rem;
        }

    @media print {
            min-height: auto;
            margin-block-end: 0rem;
        }  
}