/* 
Style Package Imports

i know it's not conventional, but i think they should be here. this allows for better templating and reusability across sites|apps, and increased separation of the functional layers of HTML/CSS/JS (web) design. the html remains uncluttered, with a single primary style import, while the main style page becomes the only page needed for altering the styling, adding 3rd party packages, etc. the only reason i can see changing this policy is a security concern, but static file management via CDN should still be secure if done right.
*/
@import url('/orbit/orbit.css');
@import url('/css/fonts.css');
/* Global Styling:
Universal, root, document, element, 
data, class, and helpful tool structures */
*,
*::before,
*,::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* sizes */
    font-size: 62.5%;
    /* fonts */
    --font-hero-title: 'Montserrat Medium';
    --font-hero-caption: 'Montserrat SemiBold';
    --font-hero-caption-small: 'Montserrat SemiBold';
    --font-site-default: 'Montserrat Regular';
    --font-site-default-bold: 'Montserrat Medium';
    --font-verbose: 'Nixie One';
    --font-invitation-heading: 'Raleway';
    --font-invitation-body: 'Raleway Medium';
    --font-label-serif: 'Shippori Mincho 500';
    --font-label-allcaps: 'Cinzel';
    /* colors */
    --color-primary: #546D92;
    --color-secondary: #C8A379;
    --color-dark-pop: #3d1f11;
    --color-neutral-off-white: #E7DECD;
    --color-neutral-mid: #595B67;
    --color-neutral-off-black: #232221;
    --color-ext-palette-1: #838F77;
    --color-ext-palette-2: #A8C4CF;
    --color-ext-palette-3: #CBBE87;
    --color-ext-palette-1-dark: #495444;
    --tint-white: rgba(255,255,255,0.2);
    --tint-black: rgba(0, 0, 0, 0.5);
    --tint-black-faint: rgba(0, 0, 0, 0.1);
    --tint-off-white: rgba(231,222,205,0.4);
    --tint-ext-pal-2: rgba(168,196,207,0.5);
    --tint-ext-pal-2-faint: rgba(168,196,207,0.3);
    /* global style parameters and defaults */
    --line-color: var(--color-ext-palette-2);
    --focus-line-color: var(--color-ext-palette-3);
    --focus-border: 1px solid var(--focus-line-color);
    --hover-border: 1px solid var(--line-color);
}    

html,
body {
    /* font-family: 'Open Sans', sans-serif; */
    scroll-behavior: smooth;
    /* background-color: var(--color-neutral-off-black); */
    font-family: var(--font-site-default), sans-serif;
    font-size: 1.6rem;
    line-height: 1.6;
}    

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

ul {
    list-style: none;
}    

img {
    max-width: 100%;
}    
    
/* Global Region, Panel, and Section Classes */
.site-landing {
    --bg-color: var(--color-neutral-off-white);
    --text-color: var(--color-neutral-off-black);
    --hero-panel-size: 95vh;
    --hero-panel-min-size: 540px;
    --font-size-hero-title: 4.5rem;
    --font-size-hero-caption: 3.2rem;
    overflow: hidden;
    min-height: var(--hero-panel-min-size);
    height: var(--hero-panel-size);
    background-color: var(--bg-color);
    .hero-image-wrapper {
        width: 100vw;
        min-height: var(--hero-panel-min-size);
        height: var(--hero-panel-size);
    }
    .hero-text {
        color: var(--text-color);
        h1 {
            font-family: var(--font-hero-title);
            font-size: var(--font-size-hero-title);
        }
        p {
            font-family: var(--font-hero-caption);
            font-size: var(--font-size-hero-caption);
            line-height: 2;
        }
    }
}

.landing-section {
    container-type: size;
    --landing-section-min-size: 720px;
    --landing-section-size: 100vh;
    --panel-dark-color: var(--color-neutral-off-black);
    --panel-light-color: var(--color-neutral-off-white);
    --bg-color: var(--panel-dark-color);
    --text-color: var(--panel-light-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    min-height: var(--landing-section-min-size);
    height: var(--landing-section-size);
    &:nth-child(even) {
        --bg-color: var(--panel-light-color);
        --text-color: var(--panel-dark-color);
        background-color: var(--bg-color);
        color: var(--text-color);
    }
}

.invitation-panel {
    /* mcllc design schema: section elements are size containers containing div.[panelType]-panels */
    --header-height: 21vh;
    --option-height: 25vh;
    --padding: 3vh 12vw 0 3vw;
    --padding-center: 3vh 8vw;
    --padding-flipped: 3vh 3vw 0 12vw;
    --subhead-padding: var(--padding-center);
    --description-padding: var(--padding);
    --description-font-size: 2.2rem;
    --heading-font-size: 3rem;
    --option-link-font-size: 2.1rem;
    height: auto;
    width: 100cqw;
    .invitation-header {
        height: var(--header-height);
        font-family: var(--font-invitation-heading);
        font-size: var(--heading-font-size);
        p {
            font-family: var(--font-invitation-body);
            font-size: var(--description-font-size);
            padding: var(--subhead-padding);
        }
    }
    .invitation-option-set {
        width: 100%;
        height: calc(100% - var(--header-height));
        position: absolute;
        bottom: 0;
        .invitation-option {
            width: 100%;
            height: var(--option-height);
            padding: var(--description-padding);
            font-family: var(--font-invitation-body);
            font-size: var(--description-font-size);
            .invitation-option-link {
                --link-width: 280px;
                --link-height: 80px;
                display: block;
                position: absolute;
                bottom: 0;
                left: calc(50cqw - (var(--link-width) / 2));
                width: var(--link-width);
                height: var(--link-height);
                border: 1px solid var(--line-color);
                border-radius: calc(var(--link-height) / 4);
                margin: 0 auto calc(var(--link-height) / 8);
                overflow: hidden;
                font-size: var(--option-link-font-size);
                background-color: transparent;
                color: var(--line-color);
                transition: 
                    outline-color 0.5s ease,
                    border-color 0.5s ease,
                    color 0.5s ease,
                    scale 0.25s linear,
                    outline-offset 0.25s linear;
                i {
                    translate: 0 -15px;
                }
                &:hover {
                    outline: var(--hover-border);
                    outline-offset: 6px;
                }
                &:focus {
                    outline: var(--focus-border);
                    outline-offset: 9px;
                    border-color: var(--focus-border);
                    color: var(--focus-line-color);
                    scale: 1.03;
                }
            }
            &:nth-of-type(2) {
                --description-padding: var(--padding-flipped);
                text-align: right;
                .invitation-option-link {
                    text-align: center;
                }
            }
            &:nth-of-type(3) {
                --description-padding: var(--padding-center);
                text-align: center;
                .invitation-option-link {
                    text-align: left;
                }
            }
            &:nth-of-type(4) {
                --description-padding: var(--padding);
                text-align: left;
                .invitation-option-link {
                    text-align: right;
                }
            }
        }
    }
}

.info-panel {
    --font-size-header-title: 3.6rem;
    --font-size-header-description: 3.3rem;
    .info-header {
        text-align: center;
        margin: 0 auto;
        h2 {
            font-size: var(--font-size-header-title);
            line-height: 1.2;
        }
        p {
            font-size: var(--font-size-header-description);
            line-height: 1.3;
        }
    }
}

.solo-section {
    --panel-light-color: white;
    --panel-dark-color: var(--color-dark-pop);
    --vert-pos: 27vh;
    --heading-width: 50vw;
    --heading-font-size: 4rem;
    --heading-line-height: 1.7;
    --button-width: 25vw;
    --button-padding: 3vh 0;
    --button-font-size: 2.8rem;
    --gap: 5vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--panel-dark-color);
    color: var(--panel-light-color);
    .solo-panel {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--gap);
        margin-top: var(--vert-pos);
        .solo-heading {
            display: block;
            width: var(--heading-width);
            text-align: center;
            font-size: var(--heading-font-size);
            line-height: var(--heading-line-height);
        }
        .solo-btn {
            display: block;
            width: var(--button-width);
            height: fit-content;
            padding: var(--button-padding);
            text-align: center;
            font-size: var(--button-font-size);
            color: var(--panel-dark-color);
            background-color: var(--panel-light-color);
            border-radius: calc(var(--button-width) / 20);
            &:hover,
            &:focus {
                outline: 2px solid var(--color-primary);
                color: var(--color-primary);
            }
        }
    }
}

.navbar {
    --bg-color: transparent;
    --text-color: white;
    --highlight: var(--color-primary);
    --filter: blur(10px);
    --navbar-height: 48px;
    --navbar-font: var(--font-site-default);
    --navbar-font-size: 2.5rem;
    padding: 0.5vh 1vw;
    background: var(--bg-color);
    color: var(--text-color);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--navbar-height);
    z-index: 3;
    transition: background-color 0.4s ease-out;

    /* default visibility style change after scrolling */
    &[data-at-origin="false"] {
        --bg-color: var(--tint-black-faint);
        backdrop-filter: var(--filter);
    }
    
    .navbar-content-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        
        
        /* general link styling */
        a {
            color: var(--text-color);
            transition: all 0.2s;
            font-size: var(--navbar-font-size);
            font-family: var(--navbar-font);
            
            > i {
                color: var(--highlight);
            }
            
            &:hover,
            &:focus {
                border: none;
                outline: none;
                color: var(--highlight);
                i {
                    color: unset;
                }
            }
        }
        /* logo/home-link styling */
        a:has(img) {
            display: block;
            height: 48px;
            min-height: 42px;
            img {
                width: 100%;
                height: 100%;
            }
        }
 
        .navbar-menu {
            
            /* hide menu toggle button on larger screens (see @media:768px) */
            > i {
                display: none;
                cursor: block;
                cursor: pointer;
                padding: 0 5px;
                &:focus {
                    border: none;
                    outline: none;
                    text-shadow: 3px 5px 5px rgba(0,0,0,0.8);
                }
            }
            
            /* default display as flex row of links opposite the logo */
            .navbar-menu-items {
                position: static;
                .navbar-menu-list {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    gap: 2vw;
                    font-weight: 500;
                }
            }
        }

    }
}

/* Footer */
footer {
    --bg-color: var(--color-ext-palette-1-dark);
    --text-color: white;
    --font-size: 1.9rem;
    padding: 4vh 3vw;
    background: var(--bg-color);
    color: var(--text-color);
    border-top: 1px solid var(--color-neutral-mid);
    position: relative;
    
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: start;
        font-size: var(--font-size);
        
        .footer-links {
            display: flex;
            justify-content: center;
            gap: 1.6vw;
            a {
                color: var(--text-color);
                &:hover,
                &:focus {
                    color: var(--color-ext-palette-2);
                }
            }
        }
    }
}


/* Global Content Object Classes */
.timeline {
    --scaling-factor: 1.1;
    /* note:
        container query units will be derived from ***section*** size, not the timeline container.
        technically, this is a bug rn, but i think i might like it that way and so haven't fixed it.
        the size can be tweaked with the scaling factor, this keeps the page from being bogged down
        with extra container queries on each object.
    */
    --scaled-w-h-avg: calc(var(--scaling-factor) * (25cqw + 25cqh));
    --cent-rad: calc(0.01 * var(--scaled-w-h-avg));
    --line-color: black;
    --border-width: 6px;
    --line-width: calc(var(--border-width) / 2);
    --time-step-width: 8px;
    --time-line-width: calc(var(--time-step-width) / 2);
    --node-border: var(--border-width) solid var(--line-color);
    --vector-border: var(--line-width) solid var(--line-color);
    --time-line: var(--time-line-width) solid var(--line-color);
    --timeline-step-border: var(--time-step-width) solid var(--line-color);
    --label-font-size: 3rem;
    --description-font-size: 2.7rem;
    --timeline-font: inherit;
    font-family: var(--timeline-font);
    font-size: var(--description-font-size);
    /* global size tensor */
    .gravity-spot {
        --o-force: var(--scaled-w-h-avg);
    }
    /* the base timeline */
    .time-line {
        border: var(--time-line);
    }
    /* branches (node edges) */
    .timeline-branch-vector,
    .branch-line {
        border: var(--vector-border);
    }
    /* timeline nodes. step 1, 2, ... */
    .timeline-step {
        border: var(--timeline-step-border);
        font-size: var(--label-font-size);    
        font-family: var(--font-site-default-bold);
    }
    /* branch description and child branches */
    .timeline-branch {
        .timeline-step-description {
            --text-color: var(--line-color);
            color: var(--text-color);
            border: var(--node-border);
            border-radius: calc(5 * var(--cent-rad));
            width: calc(54 * var(--cent-rad));
            height: calc(23 * var(--cent-rad));
            /* z-index: 1; */
            .capsule {
                width: 100%;
                height: 100%;
                &:has(> p) {
                    text-align: left;
                    padding: calc(3 * var(--cent-rad)) calc(4 * var(--cent-rad));
                    p {
                        font-size: var(--label-font-size);
                    }
                }
            }
        }
        .branch-node {
            background-color: var(--bg-color);
            border: var(--node-border);
        }
    }
    /* extra rules for nodes with just a label and a link */
    .node-link {
        display: block;
        width: 100%;
        height: 100%;
        align-content: center;
        text-align: center;
        font-size: var(--label-font-size);
    }
}

.cardbox {
    --container-height: 80cqh;
    --card-size: 200px;
    --scaling-factor: 1.4;
    --scaled-card-size: calc(var(--scaling-factor) * var(--card-size));
    --card-aspect: 1.33;
    --num-col: 2;
    --gap: calc(var(--container-height) / 7);
    --card-title-font-size: 3.5rem;
    --card-bg-tint: var(--tint-black);
    display: grid;
    grid-template-columns: repeat(var(--num-col), var(--scaled-card-size));
    align-items: center;
    justify-items: center;
    justify-content: center;
    gap: var(--gap);
    height: var(--container-height);
    min-height: calc(var(--scaled-card-size) / var(--card-aspect));
    font-family: inherit;
    .category-card {
        position: relative;
        width: var(--scaled-card-size);
        height: calc(var(--scaled-card-size) / var(--card-aspect));
        border-radius: 25px;
        transition: 
            outline-color 0.5s ease,
            scale 0.25s linear;
        .category-card-bg {
            position: absolute;
            margin: 5px;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border-radius: 25px;
            box-shadow: inset 0 0 100vw var(--card-bg-tint);
        }
        .category-card-title {
            position: absolute;
            font-size: var(--card-title-font-size);
            bottom: 10px;
            left: calc(0.19 * var(--scaled-card-size));
            width: calc(0.62 * var(--scaled-card-size));
            color: var(--line-color);
            border-top: 1px solid var(--line-color);
            text-align: center;
            transition: all 0.5s ease;
        }
        .category-card-link {
            position: absolute;
            --card-inner-border: calc(0.03 * var(--scaled-card-size));
            bottom: var(--card-inner-border);
            left: var(--card-inner-border);
            top: var(--card-inner-border);
            right: var(--card-inner-border);
            border: 1px solid var(--line-color);
            border-radius: 25px;
            transition: all 0.5s ease;
            &:focus {
                border-color: var(--focus-line-color);
                outline: none;
            }
        }
        &:hover {
            outline: 1px solid var(--line-color);
            outline-offset: 1px;
        }
        &:focus-within {
            outline: 1px solid var(--focus-line-color);
            scale: 1.03;
            transform-origin: center;
            .category-card-title {
                color: var(--focus-line-color);
                border-top: 1px solid var(--focus-line-color);
                box-shadow: 0 -3px 0 var(--focus-line-color);
            }
        }
    }
}

.tab-heading {
    --section-tab-order: 1;
    --tab-margin: 5vw;
    --tab-width: 375px;
    --side-padding: 20px;
    cursor: pointer;
    position: sticky;
    padding: 0 var(--side-padding);
    top: 40px;
    left: calc(var(--tab-margin) + ((var(--tab-width) / 5) * (var(--section-tab-order) - 1)));
    width: var(--tab-width);
    translate: 0 -99%;
    border-radius: 7px 7px 0 0;
    a {
        display: block;
        width: 99%;
        line-height: 1.3;
        text-align: center;
        &:focus {
            outline: var(--focus-border);
            border-radius: 6px;    
        }
    }
}

.emphasized-line {
    --text-color: var(--color-secondary);
    color: var(--text-color);
    display: block;
    scale: 1.07;
    padding: 25px 0;
    translate: 7vh;
    line-height: 1;
}

.emphasized-text {
    --text-color: var(--color-ext-palette-1);
    color: var(--text-color);
    display: inline;
}

/* Global Data Classes */
[data-hero-type="fixed"] {
    position: relative;
    .hero-image-wrapper {
        position: fixed;
    }
    .hero-text {
        position: relative;
        margin: auto;
        padding: 14vh 0 0;
        height: 100%;
    }
}

[data-container-type="visually-hidden"] {
    clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
}

[data-container-type="expanding-link"] {
    --origin: center;
    --abbr-text-size: 2.7rem;
    --detailed-text-size: 2.3rem;
    --content-padding: 5vh 3vw;
    --gap: 0;
    --idle-font-color: var(--text-color);
    --select-font-color: var(--color-primary);
    overflow: hidden;
    .expanding-link-content {
        font-family: inherit;
        width: 100%;
        height: 100%;
        a {
            color: var(--idle-font-color);
            display: flex;
            justify-content: center;
            width: 100%;
            height: 100%;
            padding: var(--content-padding);
            .abbr-txt {
                font-size: var(--abbr-text-size);
                width: fit-content;
                line-height: 1.1;
            }
        }
    }
    &[data-state="idle"] .expanding-link-content a {
        align-items: center;
        .abbr-txt {
            transform-origin: var(--origin);
            transform: scale(1.07);
        }
        .detailed-text {
            display: none;
        }
    }
    &[data-state="selected"] .expanding-link-content a {
        color: var(--select-font-color);
        flex-direction: column-reverse;
        align-items: end;
        gap: var(--gap);
        text-align: right;
        .abbr-txt {
            transform: scale(1);
            border-top: 1px solid var(--select-font-color);
        }
        .detailed-text {
            display: block;
            font-size: var(--detailed-text-size);
            text-wrap: pretty;
        }
    }
}


/* 
    Local Classes: header, main content sections, & footer of landing page
*/

#site-landing-navbar {
    --navbar-font: var(--font-site-default-bold);
    --text-color: var(--color-ext-palette-1);
    --highlight: var(--color-ext-palette-3);
    --filter: blur(3px);
    transition: color 0.4s ease-out;
    
    &:not([data-at-origin="true"]) {
        --bg-color: transparent;
        backdrop-filter: none;
        .navbar-content-flex {
            a {
                &:hover,
                &:focus {
                    color: unset;
                }
            }
            .navbar-menu {
                > i {
                    display: block;
                }
                .navbar-menu-items {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    padding: 3vh 2vw;
                    backdrop-filter: var(--filter);
                    text-align: center;
                    box-shadow: 0 2px 5px var(--tint-black-faint);
                    border-top: 1px solid var(--tint-off-white);
                    transform: translateX(-100%);
                    transition: transform 0.3s ease-out;
            
                    &[data-toggled="true"] {
                        transform: translateX(0);
                    }
                    
                    .navbar-menu-list {
                        display: flex;
                        flex-direction: column;
                        line-height: 2.3;
                        gap: 5px;
                        transition: all 0.5s ease-out;
                        
                        li {
                            width: 100%;
                            &:hover,
                            &:focus-within {
                                text-shadow: 3px 5px 5px rgba(0,0,0,0.8);
                                box-shadow: 0 2px 5px rgba(0,0,0,0.4);
                            }
                        }
                    }
                }
            }
        }
        &[data-section="from-here"] {
            --text-color: white;
            .navbar-content-flex {
                flex-direction: row-reverse;
            }
        }
        &[data-section="new-visitors"] {
            --text-color: var(--color-neutral-off-black);
        }
    }
    &[data-at-origin="true"] {
        display: none;
    }
}

/* Header Section */
#welcome-hero {
    --bg-color: var(--color-primary);
    .hero-image-wrapper {
        background-image: url(/images/welcome_hero_img.jpg);
        background-size: cover;
        background-position: 10% 10%;
        box-shadow: inset 0 0 0 100vw var(--tint-off-white);
    }
    .hero-text {
        width: 780px;
        margin: 0 auto;
        text-shadow: 3px 4px 5px var(--tint-ext-pal-2);
        h1 {
            text-align: center;
            margin-bottom: 3.8vh;
        }
        p {
            width: 100%;
            .emphasized-line {
                --text-color: var(--color-dark-pop);
                width: 920px;
            }
        }
    }
}

/* 
    Main Content Sections
*/
/* From Here Section */
#from-here {
    --landing-section-size: 140vh;
    /* --landing-section-min-size: 1100px; */
    --panel-light-color: white;
    --gradient-bg: linear-gradient(180deg, rgba(35,34,33,0)5%, rgba(35,34,33,0.8)20%, rgba(35,34,33,1)100%);
    line-height: 1.4;
    .invitation-panel {
        --header-height: 17cqh;
        --subhead-padding: var(--padding);
        position: relative;
        height: 100cqh;
        background: var(--bg-color);
        .invitation-header {
            position: sticky;
            top: 0;
            background: var(--bg-color);
            padding-bottom: 3vh;
            .tab-heading {
                font-size: var(--heading-font-size);
                background: var(--bg-color);
            }
            p {
                position: sticky;
                top: 10vh;
            }
        }
        .invitation-option-set {
            .invitation-option {
                --bg-color: var(--gradient-bg);
                background: var(--bg-color);
                position: sticky;
            }
            #subdirectory-options {
                /* use page-viewport to size card, card to size option, pass card size to cardbox */
                --option-height: calc(var(--card-height) + 8vh - 3vw);
                --option-card-scaling-factor: 1.4;
                --option-card-base-size: calc(((0.95 * 23cqw) + 23vh) / 2);
                --option-card-scaled-size: calc(var(--option-card-scaling-factor) * var(--option-card-base-size));
                --option-card-aspect: 1.18;
                --card-height: calc(var(--option-card-scaled-size) / var(--option-card-aspect));
                --description-padding: 0;
                top: calc((var(--header-height) + 3vh) - 2vw);
                .cardbox {
                    --container-height: var(--option-height);
                    --scaling-factor: var(--option-card-scaling-factor);
                    --card-size: var(--option-card-base-size);
                    --card-aspect: var(--option-card-aspect);
                    /* i know.. but there was an issue
                    the card size needs to be rigorously controlled
                    */
                    --min-card-width: calc(var(--card-height) * var(--card-aspect));
                    width: 100%;
                    min-height: var(--option-height);
                    backdrop-filter: blur(1px);
                    .category-card {
                        min-width: var(--min-card-width);
                        min-height: var(--card-height);
                        backdrop-filter: blur(1px);
                        /* set initial card backgrounds */
                        &[id='activities-card'] {
                            .category-card-bg {
                                background: url('/images/activities_card/noah-buscher-x8ZStukS2PM-unsplash.jpg') center/cover no-repeat;
                            }
                        }
                        &[id='thoughts-card'] {
                            .category-card-bg {
                                background: url('/images/thoughts_card/aaron-burden-y02jEX_B0O0-unsplash.jpg') center/cover no-repeat;
                            }
                        }
                    }
                }
            }
            #visitors-option {
                --option-height: calc(34vh - 3vw);
                top: calc(69vh - 3vw);
                backdrop-filter: blur(1px);
            }
            #helpful-option {
                --bg-color: transparent;
                --option-height: 5cqh;
                --description-padding: 0;
                --description-font-size: 1.8rem;
                position: absolute;
                bottom: 0;
                .invitation-option-description {
                    position: absolute;
                    bottom: 0;
                    padding: 0 7vw;
                    background: var(--gradient-bg);
                }
            }
        }
    }
}

/* New Visitors Section */
#new-visitors {
    --landing-section-size: 110vh;
    overflow: hidden;
    .info-panel {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: var(--bg-color);
        .info-header {
            position: absolute;
            top: 8vh;
            width: 100%;
            padding: 0 12vw;
            z-index: 1;
        }
        .timeline-container {
            position: absolute;
            top: 0;
            width: 100%;
            min-height: var(--landing-section-min-size);
            height: 100cqh;
            padding: 2vh 2vw 10vh 12vw;
            background-color: var(--bg-color);
            .timeline {
                line-height: 1.3;
                .timeline-step {
                    --label-font-size: 3.6rem;
                    background-color: var(--bg-color);
                }
                .timeline-branch {
                    .timeline-step-description {
                        --text-color: var(--color-ext-palette-1);
                        background-color: var(--bg-color);
                    }
                    /* pass timeline variables to expanding-link styling */
                    .branch-node {
                        --abbr-text-size: var(--label-font-size);
                        --detailed-text-size: var(--description-font-size);
                        --content-padding: 4vh 3vw;
                        --idle-font-color: var(--text-color);
                        --gap: var(--cent-rad);
                    }
                    /* selected node restyling based on ID */
                    &:has(#who-node[data-state="selected"]) {
                        --expanding-node-color: var(--color-ext-palette-1);
                        #step-1-branch-vectors .branch-line:nth-child(1) {
                            border: var(--time-line);
                            border-color: var(--expanding-node-color);
                            background-color: var(--expanding-node-color);
                        }
                        #who-node {
                            --select-font-color: var(--expanding-node-color);
                            border: var(--timeline-step-border);
                            border-color: var(--expanding-node-color); 
                            box-shadow: 1px 1px 2px var(--tint-black),
                                inset 1px 1px 2px var(--tint-black);
                        }
                    }
                    &:has(#what-node[data-state="selected"]) {
                        --expanding-node-color: var(--color-secondary);
                        #step-1-branch-vectors .branch-line:nth-child(2) {
                            border: var(--time-line);
                            border-color: var(--expanding-node-color);
                            background-color: var(--expanding-node-color);
                        }
                        #what-node {
                            --select-font-color: var(--expanding-node-color);
                            border: var(--timeline-step-border);
                            border-color: var(--expanding-node-color); 
                            box-shadow: 1px 1px 2px var(--tint-black),
                                inset 1px 1px 2px var(--tint-black);
                        }
                    }
                    &:has(#why-node[data-state="selected"]) {
                        --expanding-node-color: var(--color-primary);
                        #step-1-branch-vectors .branch-line:nth-child(3) {
                            border: var(--time-line);
                            border-color: var(--expanding-node-color);
                            background-color: var(--expanding-node-color);
                        }
                        #why-node {
                            --select-font-color: var(--expanding-node-color);
                            border: var(--timeline-step-border);
                            border-color: var(--expanding-node-color); 
                            box-shadow: 1px 1px 2px var(--tint-black),
                                inset 1px 1px 2px var(--tint-black);
                            z-index: 2;
                        }
                    }
                }
                #target-node {
                    width: calc(39 * var(--cent-rad));
                    height: calc(17 * var(--cent-rad));
                    border-radius: calc(7 * var(--cent-rad));
                    &:hover {
                        border-color: var(--color-primary);
                        box-shadow: 1px 1px 2px var(--tint-black),
                            inset 1px 1px 2px var(--tint-black);
                        a {
                            color: black;
                            text-shadow: 1px 1px 2px var(--tint-black);
                        }
                    }
                }
                #step-2-node .timeline-step {
                    animation: beacon 7s infinite linear;
                }
            }
        }
    }
}


/* Animations */
@keyframes beacon {
    0% {
        border-color: black;
    }
    36% {
        border-color: black;
    }
    39% {
        border-color: var(--color-primary);
    }
    40% {
        border-color: var(--color-primary);
    }
    43% {
        border-color: black;
    }
    100% {
        border-color: black;
    }
}


/* Media Queries */
@media screen and (max-width: 1200px) {
    .site-landing {
        --font-size-hero-title: 4.3rem;
        --font-size-hero-caption: 3.1rem;
    }
    #welcome-hero {
        .hero-text {
            width: 700px;
        }
    }
    .invitation-panel {
        --description-font-size: 2.1rem;
        --heading-font-size: 2.9rem;
    }
    .timeline {
        --label-font-size: 2.9rem;
        --description-font-size: 2.6rem;
    }
    #new-visitors {
        .timeline-container {
            .timeline {
                .timeline-step {
                    --label-font-size: 3.5;
                }
            }
        }
    }
    footer {
        --font-size: 1.8rem;
    }
}
  
@media screen and (max-width: 992px) {
    /* hero section */
    .site-landing {
        --font-size-hero-title: 4rem;
        --font-size-hero-caption: 2.5rem;
        .hero-text {
            p {
                font-family: var(--font-hero-caption-small);
            }
        }
    }
    #welcome-hero {
        .hero-text {
            width: 580px;
            p {
                .emphasized-line {
                    width: 700px;
                    padding: 20px 0;
                }
            }
        }
    }
    /* from here section */
    .invitation-panel {
        --padding: 0 9vw 0 3vw;
        --padding-center: 0 5vw;
        --padding-flipped: 0 3vw 0 9vw;
        /* --description-font-size: 2.2rem; */
        /* --heading-font-size: 2.7rem; */
        .invitation-option-set {
            .invitation-option {
                .invitation-option-link {
                    transform: scale(0.8);
                }
            }
        }
    }
    .cardbox {
        --card-title-font-size: 3.2rem;
    }
    #from-here {
        .invitation-panel {
            .invitation-header {
                p {
                    top: 13vh;
                }
            }
            .invitation-option-set {
                #subdirectory-options {
                    --option-card-scaling-factor: 1.6;
                    top: calc((var(--header-height) + 5vh) - 5vw);
                }
                #helpful-option {
                    --description-font-size: 1.6rem;
                    .invitation-option-description {
                        padding: 0 5vw;
                    }
                }
            }
        }
    }
    /* new visitors section */
    .timeline {
        --label-font-size: 2.5rem;
        --description-font-size: 2.2rem;
    }
    .info-panel {
        --font-size-header-title: 3.3rem;
        --font-size-header-description: 3rem;
    }
    #new-visitors {
        .info-panel {
            .timeline-container {
                padding-left: 13vw;
                .timeline {
                    --scaling-factor: 1.07;
                    --border-width: 5px;
                    --time-step-width: 7px;
                    .timeline-step {
                        --label-font-size: 3.1rem;
                    }                
                }
            }
        }
    }
    /* footer */
    footer {
        --font-size: 1.7rem;
        padding: 1vh 0;
        .footer-content {
            flex-direction: column-reverse;
            justify-content: start;
            align-items: center;
            gap: 5px;
            .footer-links {
                --font-size: 1.5rem;
                flex-direction: column;
                gap: 0;
                a {
                    font-size: var(--font-size);
                    line-height: 1.2;
                }
            }
            p {
                border-bottom: var(--hover-border);
                line-height: 1.2;
            }
        }
    }
}

@media screen and (max-width: 768px) {
    .navbar {
        .navbar-content-flex {
            .navbar-menu {
                > i {
                    display: block;
                }
                .navbar-menu-items {
                    position: absolute;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    padding: 3vh 2vw;
                    backdrop-filter: blur(3px);
                    background: var(--tint-off-white);
                    text-align: center;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                    border-top: 1px solid rgba(255,255,255,0.1);
                    transform: translateX(100%);
                    transition: transform 0.3s ease-out;
            
                    &[data-toggled="true"] {
                        transform: translateX(0);
                    }
                    
                    .navbar-menu-list {
                        display: flex;
                        flex-direction: column;
                        font-size: 2.5rem;
                        line-height: 2.5;
                        gap: 5px;
                        
                        li {
                            transition: all 0.5s ease-out;
                            width: 100%;
                            &:hover,
                            &:focus {
                                text-shadow: 3px 5px 5px rgba(0,0,0,0.8);
                                box-shadow: 0 2px 5px rgba(0,0,0,0.4);
                            }
                        }
                        a {
                            i {
                                font-size: 3.3rem;
                                color: var(--highlight);
                                &:hover {
                                    color: unset;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .site-landing {
        --font-size-hero-title: 3.3rem;
        --font-size-hero-caption: 2.3rem;
    }
    .emphasized-line {
        translate: 5vw;
    }
    #welcome-hero {
        .hero-text {
            width: 570px;
        }
    }
    .tab-heading {
        top: 4vh;
    }
    .invitation-panel {
        --heading-font-size: 2.5rem;
        --description-font-size: 2rem;
        .invitation-option-set {
            .invitation-option {
                .invitation-option-link {
                    transform: scale(0.7);
                }
            }
        }
    }
    .cardbox {
        --card-title-font-size: 3rem;
    }
    #from-here {
        .invitation-panel {
            .invitation-header {
                .tab-heading {
                    --tab-width: 325px;
                }
            }
        }
    }
    .info-panel {
        --font-size-header-title: 2.7rem;
        --font-size-header-description: 2.5rem;
    }
    .timeline {
        --label-font-size: 2.3rem;
        --description-font-size: 1.9rem;
    }
    #new-visitors {
        --landing-section-size: 95vh;
        .info-panel {
            .timeline-container {
                padding-left: 10vw;
                padding-top: 0;
                .timeline {
                    --scaling-factor: 1.05;
                    --border-width: 5px;
                    --time-step-width: 6px;
                    .timeline-step {
                        --label-font-size: 2.7rem;
                    }
                }
            }
        }
    }
    footer {
        --font-size: 1.6rem;
        .footer-content {
            .footer-links {
                --font-size: 1.4rem;
            }
        }
    }
    .solo-section {
        --vert-pos: 24vh;
        --heading-width: 70vw;
        --button-width: 33vw;
        --button-padding: 1vh 0;
        --gap: 12vh;
        .solo-panel {
            flex-direction: column;
        }
    }
}

@media screen and (max-width: 576px) {
    .site-landing {
        --font-size-hero-title: 3rem;
        --font-size-hero-caption: 2.1rem;
        .hero-text {
            text-align: center;
            p {
                line-height: 1.4;
            }
        }
    }
    #welcome-hero {
        .hero-text {
            width: 92vw;
            p {
                .emphasized-line {
                    text-align: justify;
                    width: 210px;
                    margin: 15px auto;
                    padding: 0;
                    translate: 0;
                    border-top: var(--hover-border);
                    border-bottom: var(--hover-border);
                }
            }
        }
    }
    .invitation-panel {
        --description-font-size: 1.6rem;
        --heading-font-size: 2rem;
        --padding: 0 3vw;
        --padding-center: var(--padding);
        --padding-flipped: var(--padding);
        .invitation-option-set {
            .invitation-option {
                .invitation-option-link {
                    transform: scale(0.6);
                }
            }
        }
    }
    .cardbox {
        --card-title-font-size: 2.5rem;
        --gap: calc(var(--container-height) / 12);
    }
    #from-here {
        .invitation-panel {
            .invitation-header {
                .tab-heading {
                    --tab-margin: 3vw;
                    --tab-width: 250px;
                    --side-padding: 10px;
                }
                p {
                    text-align: justify;
                }
            }
            .invitation-option-set {
                #subdirectory-options {
                    --option-card-scaling-factor: 1.8;
                    --option-card-aspect: 1.40;
                    --option-height: auto;
                    top: var(--header-height);
                    .cardbox {
                        --num-col: 1;
                    }
                }
                #visitors-option {
                    --option-height: calc(32vh - 9vw);
                    top: calc(75vh - 9vw);
                    min-height: 190px;
                    text-align: justify;
                }
                #helpful-option {
                    --description-font-size: 1.2rem;
                    .invitation-option-description {
                        padding: 0 5vw;
                    }
                }
            }
        }
    }
    .timeline {
        --label-font-size: 2rem;
        --description-font-size: 1.6rem;
    }
    #new-visitors {
        --landing-section-size: 95vh;
        .info-panel {
            .timeline-container {
                translate: 0 -3vh;
                height: 100cqh;
                /* padding-bottom: 9vh; */
                .timeline {
                    --scaling-factor: 1.15;
                    --border-width: 4px;
                    --time-step-width: 5px;
                    .timeline-step {
                        --label-font-size: 2.3rem;
                    }
                    .timeline-branch {
                        &:has(#who-node[data-state="selected"]) {
                            #who-node {
                                .expanding-link-content {
                                    translate: -5px 0;
                                }
                            }
                        }
                    }                    
                }
            }
        }
    }
    footer {
        --font-size: 1.3rem;
        .footer-content {
            .footer-links {
                --font-size: inherit;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;
            }
            p {
                max-width: 96vw;
                text-align: center;
                padding-bottom: 5px;
            }
        }
    }
    .solo-section {
        --heading-width: 80vw;
        --heading-font-size: 3.2rem;
        --heading-line-height: 1.4;
        --button-width: 48vw;
        --button-font-size: 2.4rem;
    }
}

/* mobile phone widescreen */
@media screen and (max-height: 430px) {
    .site-landing {
        --font-size-hero-title: 4rem;
        --font-size-hero-caption: 2.5rem;
        .hero-text {
            p {
                font-family: var(--font-hero-caption-small);
                line-height: 1.7;
            }
        }
    }
    .emphasized-line {
        translate: 5vw;
    }
    #welcome-hero {
        .hero-image-wrapper {
            background-position: 10% 100%;
        }
        .hero-text {
            width: 580px;
            p {
                .emphasized-line {
                    width: 700px;
                    padding: 20px 0;
                }
            }
        }
    }
    .tab-heading {
        --tab-margin: 10vw;
        position: static;
        translate: 0;
        margin-left: var(--tab-margin);
    }
    #from-here {
        --landing-section-size: 80vw;

        .invitation-panel {
            --header-height: 20cqh;
            --option-height: 35cqh;
            position: relative;
            .invitation-header {
                position: relative;
                p {
                    position: static;
                    margin-top: 15px;
                }
            }
            .invitation-option-set {
                position: static;
                .invitation-option {
                    --bg-color: inherit;
                    position: inherit;
                }
                #subdirectory-options {
                    --option-height: inherit;
                    --option-card-scaling-factor: 1.95;
                    .cardbox {
                        background: var(--bg-color);
                    }
                }
                #visitors-option {
                    --option-height: inherit;
                }
                #helpful-option {
                    position: inherit;
                }
            }
        }
    }
    .timeline {
        --description-font-size: 1.8rem;
    }
    footer {
        .footer-content {
            .footer-links {
                --font-size: inherit;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 2vw;
            }
        }
    }
    .navbar {
        --navbar-font-size: 2.2rem;
        --navbar-height: 39px;
    }
    .solo-section {
        --heading-line-height: 1.4;
    }
}

/* HD monitors and above */
@media screen and (min-height: 1080px) {
    main {
        position: relative;
        background-color: var(--color-ext-palette-1);
        &:has(.solo-section) {
            position: static;
        }
    }
    .landing-section {
        width: 80vw;
        max-width: 2400px;
        margin: 0 auto;
    }
    .tab-heading {
        --tab-margin: 2vw;
        margin-left: var(--tab-margin);
    }
    .solo-section {
        --heading-line-height: 2.1;
    }
}

/* 4K */
@media screen and (min-height: 1600px) {
    .site-landing {
        --font-size-hero-title: 10rem;
        --font-size-hero-caption: 8rem;
        .hero-text {
            p {
                line-height: 1.7;
            }
        }
    }
    #welcome-hero {
        .hero-text {
            width: 1800px;
            p {
                .emphasized-line {
                    width: 1920px;
                }
            }
        }
    }
    .tab-heading {
        top: 100px;
    }
    .invitation-panel {
        --padding: 5cqh 7cqw 0 3cqw;
        --padding-center: 5cqh 8cqw;
        --padding-flipped: 5cqh 3cqw 0 7cqw;
        --description-font-size: 5.4rem;
        --heading-font-size: 8rem;
        .invitation-option-set {
            .invitation-option {
                .invitation-option-link {
                    transform: scale(2.3);
                }
            }
        }
    }
    .cardbox {
        --card-title-font-size: 8.5rem;
    }
    #from-here {
        .invitation-panel {
            .invitation-header {
                .tab-heading {
                    --tab-width: 1100px;
                    border-radius: 23px 23px 0 0;
                }
            }
            .invitation-option-set {
                #subdirectory-options {
                    --option-card-scaling-factor: 1.6;
                    top: calc((var(--header-height) + 5vh) - 2vw);
                }
                #visitors-option {
                    --option-height: calc(34vh - 2vw);
                    top: calc(66vh - 3vw);
                }
                #helpful-option {
                    --description-font-size: 5rem;
                    .invitation-option-description {
                        padding: 0 5cqw;
                    }    
                }
            }
        }
    }
    /* new visitors section */
    .timeline {
        --label-font-size: 7rem;
        --description-font-size: 5.8rem;
    }
    .info-panel {
        --font-size-header-title: 9rem;
        --font-size-header-description: 8rem;
    }
    #new-visitors {
        .info-panel {
            .timeline-container {
                padding-left: 13cqw;
                .timeline {
                    --scaling-factor: 1;
                    --border-width: 12px;
                    --time-step-width: 15px;
                    .timeline-step {
                        --label-font-size: 10rem;
                    }                
                }
            }
        }
    }
    footer {
        --font-size: 4rem;
    }
    .navbar {
        --navbar-font-size: 5rem;
        .navbar-content-flex {
            a:has(img) {
                height: 88px;
            }
        }
    }
    #site-landing-navbar {
        --navbar-font-size: 6.5rem;
        --navbar-height: 112px;
    }
    .solo-section {
        --heading-font-size: 11rem;
        --button-font-size: 8rem;
    }
}