/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

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

@font-face {
    font-family  : "Affairs";
    src          : url('fonts/Affairs-Italic.woff2') format('woff2');
    font-style   : italic;
    font-weight  : 400;
    font-display : swap;
}

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

:root {
    
    /* Colors */
    --background : #FFFFFC;
    --text       : #000000;
    --hover      : #ADADAD;

    --bg-cream      : rgba(255, 255, 235, 0.97);
    --bg-black      : #000000E6;
    --bg-gray-dark  : #ADADAD;
    --bg-gray-light : #F4F4EF;

    /* Font Settings */
    --font-family      : "Affairs", serif;
    --font-family-mono : "Affairs Mono", monospace;
    --font-size        : 17px;
    --font-height      : 30px;
    --font-weight      : 400;

    /* Font Families */
    --mono-small : 400 13px/15px var(--font-family-mono);
    --mono-base  : 400 17px/24px var(--font-family-mono);
    
    --serif-small  : 400 13px/15px var(--font-family);
    --serif-base   : 400 17px/24px var(--font-family);
    --serif-medium : 400 20px/24px var(--font-family);
    --serif-large  : 400 25px/30px var(--font-family);
    --serif-xlarge : 400 35px/40px var(--font-family);

    /* Header and Footer */
    --font-header       : 400 17px/30px var(--font-family-mono);
    --font-footer-big   : 400 17px/30px var(--font-family-mono);
    --font-footer-small : 400 13px/30px var(--font-family-mono);

    /* Popup banner font sizes */
    --popup-small  : 400 13px/15px var(--font-family-mono);
    --popup-medium : 400 20px/24px var(--font-family-mono);
    --popup-large  : 400 35px/40px var(--font-family);

    /* Sub 1200px we enter mobile type size */
    @media (width < 1600px) {
        --font-size   : 15px;
        --font-height : 20px;

        --mono-small : 400 10px/14px var(--font-family-mono);
        --mono-base  : 400 15px/20px var(--font-family-mono);
    
        --serif-small  : 400 11px/13px var(--font-family);
        --serif-base   : 400 15px/20px var(--font-family);
        --serif-medium : 400 17px/23px var(--font-family);
        --serif-large  : 400 20px/23px var(--font-family);
        --serif-xlarge : 400 25px/30px var(--font-family);

        /* Header and Footer */
        --font-header       : 400 15px/20px var(--font-family-mono);
        --font-footer-big   : 400 15px/20px var(--font-family-mono);
        --font-footer-small : 400 12px/20px var(--font-family-mono);

        /* Popup banner font sizes */
        --popup-small  : 400 11px/13px var(--font-family-mono);
        --popup-medium : 400 15px/22px var(--font-family-mono);
        --popup-large  : 400 25px/30px var(--font-family);
    }

    /* We need to shrink the banner when the screen is too short */
    @media (height < 1000px) {

        /* Popup banner font sizes */
        --popup-small  : 400 11px/13px var(--font-family-mono);
        --popup-medium : 400 15px/22px var(--font-family-mono);
        --popup-large  : 400 25px/30px var(--font-family);
    }

    /* Vertical Stack */
    --z-header      : 8000;
    --z-mobile-menu : 4000;
    --z-overlay     : 6000;
    --z-footer      : 8000;


    /* Set the defaults */
    font-size   : var(--font-size);
    line-height : var(--font-height);
    font-family : var(--font-family);
    font-weight : var(--font-weight);
    background  : var(--background);
    color       : var(--text);

}

html,body {
    width      : 100%;
    min-height : 100%;
}

body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
}
}/* Global Settings *//* Content Goes Here */
body {
    position : relative;
}/* The Website Preloader */
#preload {
    position   : fixed;
    inset      : 0;
    background : white;
    font       : var(--serif-medium);
    display    : flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 999999;
    transition-property: opacity;
}
#preload.removed {
    opacity : 0;
}
#preloading {
    overflow : hidden;
}/* UI Elements *//* Site's Header and Navigation */
.header {
    padding               : 1rlh;
    display               : grid;
    grid-template-columns : auto 1fr;
    gap                   : 1.5rlh;
    position              : absolute;
    inset                 : 0;
    pointer-events        : none;
    font                  : var(--font-header);
    z-index               : var(--z-header);
}/* Site's Title */
.header-title {
    position       : sticky;
    top            : 1rlh;
    align-self     : start;
    pointer-events : all;
    cursor         : pointer;
}/* Site's Main Navigation */
.header-nav {
    display     : flex;
    gap         : 1.5rlh;
    align-items : flex-start;
    position    : relative;
}
.header-nav-link {
    text-align     : left;
    cursor         : pointer;
    border         : none;
    pointer-events : all;
}
.header-nav-link:first-child {
    margin-right : auto;
}
.header-nav-link::before {
    content     : "( ) ";
    white-space : pre;
    font        : var(--mono-base);
}
.header-nav-link:hover::before {
    content : "(+) ";
}
a.header-nav-link:hover::before {
    content : "(…) ";
}/* Hide Both button and mobile menu on big screens */
.header-mobile-buttons,
.mobile-nav-container,
.header-mobile-overlay-button {
    display : none;
}/* Styles for the whole mobile menu content */
.mobile-nav-container {
    display            : none;
    position           : fixed;
    inset              : 0;
    padding            : 2.1rlh 1rlh 1rlh;
    font               : var(--mono-base);
    grid-template-rows : auto 1fr 1fr;
    z-index            : var(--z-mobile-menu);
    background         : rgba(255,255,255,0.2);
    backdrop-filter    : blur(5px);
    pointer-events     : none;
    opacity            : 0;
}
a.header-nav-link::after {
    content        : attr(data-hover);
    display        : block;
    font           : var(--serif-base);
    position       : absolute;
    line-height    : 0.8rlh;
    padding : 0.2rlh 0;
    top            : 1rlh;
    right          : 0;
    max-width      : 28.8rlh;
    pointer-events : none;
    opacity        : 0;
}
a.header-nav-link:hover::after {
    opacity : 1;
}
@media (width < 1350px) {
    a.header-nav-link::after {
        max-width : 26.5rlh;
    }
}
@media (width < 1200px) {
    a.header-nav-link::after {
        max-width : 35.7rlh;
    }
}
@media (width < 1100px) {
    a.header-nav-link::after {
        position  : static;
        font      : var(--serif-small);
        max-width : unset;
        opacity   : 1;
    }
}
.mobile-social-links,
.mobile-legal {
    align-self: center;
}/* Mobile Navigation */
.mobile-nav {
    display : grid;
}/* Mobile Social Media navigation */
.mobile-social-links {
    display         : grid;
    justify-content : start;
    gap             : 0.25rlh;
}
.mobile-social-link {
    font : var(--mono-small);
}/* Mobile Legal Block */
.mobile-legal {
    font : var(--mono-small);
}/* On small-ish desk screens reduce the spacing between items */
@media (width < 1350px) {
    .header, .header-nav { gap : 0.75rlh; }
}/* Sub 1100px we can enter mobile mode */
@media (width < 1100px) {

    /* Display the mobile menu button */
    .header-mobile-buttons {
        display : block;
        order   : 1;
    } 

    .header-mobile-overlay-button::before,
    .header-mobile-overlay-button:hover::before {
        content : "(×) ";
    }

    /* Hide the desk navigation */
    .header-nav {
        display : none;
    }

    /* Make the header a flex container */
    .header {
        grid-template-columns : auto auto;
        justify-content       : space-between;
        grid-template-areas   : "button title";
        position              : fixed;
        inset                 : 0 0 auto 0;
    }

    .header-title {
        position  : static;
        grid-area : title;
    }
}/* Homepage Top section, Above the fold */
.opening-container {
    width   : 100%;
    height  : 100dvh;
    padding : 1rlh;
}/* Site's Gallery Section */
#gallery {
    padding             : 1rlh 0 3rlh;
    position            : relative;
    min-height          : 100dvh;
    display             : grid;
    grid-template-rows  : auto 1fr;
    grid-template-areas : "header" "gallery";
    grid-gap            : 1.5rlh;
}/* The Gallery navigation buttons */
.gallery-header {
    position        : sticky;
    top             : 1rlh;
    display         : flex;
    justify-content : flex-end;
    padding         : 0 1rlh;
}
.gallery-buttons {
    display : flex;
}/* Nav Buttons */
.gallery-button {
    appearance : none;
    border     : none;
    font       : var(--font-header);
    cursor     : pointer;
}
.gallery-button::before {
    content     : "( ) ";
    white-space : pre;
}
.gallery-button:hover::before {
    content     : "(+) ";
}
#gallery[data-style="slider"] .gallery-button:first-child::before,
#gallery[data-style="grid"] .gallery-button:last-child::before {
    content : "(○) ";
}
.gallery-button:first-child::after {
    content     : " — ";
    white-space : pre;
}/* Grid Version Of The Gallery */
#gallery-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill , minmax(6rlh,1fr));
    gap                   : 3rlh 1.5rlh;
    align-items           : start;
    padding               : 0 1rlh;
}
.gallery-grid-item {
    font     : var(--mono-small);
    position : relative;
}
.gallery-grid-item-index {
    position       : absolute;
    top            : -0.75rlh;
    pointer-events : none;
}
.gallery-grid-item-overlay {
    position            : absolute;
    inset               : 0;
    display             : flex;
    justify-content     : center;
    align-items         : center;
    background          : rgba(0,0,0,0.35);
    color               : var(--background);
    text-align          : center;
    padding             : 0.25rlh;
    opacity             : 0;
    transition-property : opacity;
    pointer-events      : none;
}/* Styles based on which view is active */
#gallery[data-style="slider"] #gallery-grid {
    display : none;
}
#gallery[data-style="grid"] #gallery-slider {
    display : none;
}/* Slider Styles */
#gallery-slider {
    overflow            : hidden;
    width               : 100vw;
    scroll-padding-left : 1rlh;
}
.gallery-slider-container {
    display               : grid;
    grid-template-columns : repeat(var(--slides) , auto);
}
.gallery-slide-item {
    position      : relative;
    padding-right : 0.25rlh;
}
.gallery-slide:first-child {
    padding-left : 1rlh;
}
.gallery-slide:last-child {
    padding-right : 0.75rlh;
}
.gallery-slide[data-size="tall"] {
    height : calc(100svh - 6.5rlh);
}
.gallery-slide[data-size="short"] {
    height : calc(100svh - 14rlh);
}
.gallery-slide-item {
    display            : grid;
    grid-template-rows : 1rlh minmax(0, 1fr);
    height             : 100%;
}
.gallery-slide-item-image {
    height : 100%;
    width  : auto;
}
.gallery-slide-item-overlay {
    position            : absolute;
    inset               : 1rlh 0.25rlh 0 0;
    background          : rgba(0,0,0,0.35);
    color               : var(--background);
    display             : flex;
    justify-content     : center;
    align-items         : center;
    text-align          : center;
    padding             : 1rlh;
    pointer-events      : none;
    opacity             : 0;
    transition-property : opacity;
}
.gallery-slide-item-index {
    font        : var(--mono-small);
    line-height : 1rlh;
}/* Mobile Version of the gallery with navigation at the bottom */
@media (width < 1100px) {
    #gallery {
        grid-template-rows  : 1fr auto;
        grid-template-areas : "gallery" "header";
        padding             : 3rlh 0 1rlh;
        grid-gap            : 1.25rlh;

        grid-template-rows  : 1fr;
        grid-template-areas : "gallery";

    }

    .gallery-header {
        grid-area       : header;
        justify-content : flex-start;
        display         : none;
    }

    .gallery-slide {
        align-self: start;
    }

    .gallery-slide-item-image {
        max-width : calc(100vw - 2.25rlh);
        height    : auto;
    }

    .gallery-slide[data-size="tall"] {
        max-height : 100%;
        height : auto;
    }

    .gallery-slide[data-size="short"] {
        max-height : 100%;
        height : auto;
    }

    #gallery-grid {
        gap : 3rlh 1rlh;
    }
}
@media (hover:hover) {    
    .gallery-slide-item:hover .gallery-slide-item-overlay,
    .gallery-grid-item:hover .gallery-grid-item-overlay {
        opacity : 1;
    }
}
@media (hover:none) {
    .caption-overlay-is-visible .gallery-slide-item-overlay,
    .caption-overlay-is-visible .gallery-grid-item-overlay {
        opacity : 1;
    }
}/* Homepage Intro Block */
.opening-intro-container {
    margin     : 0 auto;
    padding    : 4rlh 0 3rlh;
    text-align : center;
    font       : var(--serif-large);
    max-width  : 55ch;
}/* The Opening random Image */
.opening-picture-container {
    text-align : center;
}
.opening-picture-container:first-child {
    padding-top : 5rlh;
}
.opening-picture-figure {
    margin          : 0 auto;
    display         : grid;
    justify-content : center;
    justify-items   : center;
}
.opening-picture-image-holder {
    position   : relative;
    text-align : left;
}
.opening-picture-image-holder::before {
    content             : attr(data-index) ".";
    margin-bottom       : 0.5rlh;
    font                : var(--mono-small);
    pointer-events      : none;
    opacity             : 0;
    transition-property : opacity;
}
.opening-picture-image {
    height : 32.5vh;
    width  : auto;
    margin : 0 auto;
}
.opening-picture-caption {
    font                : var(--mono-small);
    margin-top          : 0.5rlh;
    pointer-events      : none;
    opacity             : 0;
    transition-property : opacity;
}
.opening-picture-image-holder:hover::before,
.opening-picture-image-holder:hover + figcaption {
    opacity : 1;
}
@media (width < 1100px) {
    .opening-picture-image {
        height : 25vh;
    }
}/* On touch devices make the information visible by default */
@media (hover : none) {
    .opening-picture-image-holder::before,
    .opening-picture-image-holder + figcaption {
        opacity : 1;
    }
}/* Popup banner news */
#news {
    position       : absolute;
    inset          : 0;
    pointer-events : none;
    overflow       : hidden;
}
.news-container {
    position : absolute;
    left     : 0;
}/* Top button */
.news-header {
    padding : 0 0 0.5rlh 1rlh;
}
.news-button {
    border         : none;
    text-align     : left;
    font           : var(--mono-base);
    cursor         : pointer;
    pointer-events : all;
}
.news-button::before {
    content     : "(×) ";
    white-space : pre;
}/* The Actual card content container */
.news-content {
    background          : var(--bg-gray-light);
    aspect-ratio        : 2/3;
    max-width           : 14rlh;
    display             : grid;
    grid-template-rows  : auto auto 1fr auto auto;
    box-shadow          : 0px 3px 6px #00000030;
    pointer-events      : all;
    padding             : 0 1rlh;
    grid-template-areas : "date" "title" "text" "link" "etad";
}/* The Two Dates */
.news-date {
    font            : var(--popup-small);
    display         : flex;
    justify-content : space-between;
    grid-area       : date;
}
.news-date:last-child {
    transform  : rotate(180deg);
    grid-area  : etad;
}/* Primary News Title */
.news-title {
    font       : var(--popup-large);
    text-align : center;
    text-wrap  : balance;
    grid-area  : "title";
    margin-top : 0.75rlh;
}/* Secondary News Title */
.news-subtitle {
    font       : var(--popup-large);
    text-align : center;
    text-wrap  : balance;
    margin-bottom : 0.25em;
}
.news-texts {
    align-self : center;
    grid-area  : text;
    margin     : 0.5rlh 0;
}
.news-description {
    font : var(--popup-medium);
}
.news-link {
    font          : var(--popup-medium);
    grid-area     : link;
    margin-bottom : 0.5rlh;
}
.news-link a {
    text-decoration : underline;
}/* The Optional banner image */
.news-image {
    position            : absolute;
    bottom              : 0;
    right               : 0;
    width               : 65%;
    height              : 65%;
    filter              : drop-shadow(0px 3px 6px #00000030);
    transition-property : transform;
    pointer-events      : none;
    object-fit          : contain;
    object-position     : bottom right;
}
.news-content:hover + .news-image {
    transform : translateX(100%);
}/* On short but wide screens we need to make the banner smaller */
@media (height < 1000px) {
    .news-content {
        max-width : 11rlh;
    }
}
@media (width < 1200px) {
    .news-content {
        max-width : 18rlh;
    }
}
@media (height < 1000px) and (width < 1100px) {
    .news-content {
        aspect-ratio: 3/4;
    }
}
@media (width < 1100px) {

    .has-popup {
        overflow : hidden;
    }

    /* If we have a banner on mobile we need a backdrop */
    #news {
        background      : rgba(255,255,255,0.2);
        backdrop-filter : blur(5px);
    }
}/* On Mobile we need a smaller banner */
@media (width < 550px) {
    .news-container {
        max-width : calc(100% - 2rlh);
    }
}/* On Touch devices, automatically move the image aside after a couple of seconds */
@media (hover : none) {

    /* Create the animation */
    @keyframes moveImageAside {
        from { transform : translateX(0%); }
        to   { transform : translateX(100%); }
    }
    .news-image {
        animation : moveImageAside 350ms 1500ms forwards 1;
        filter : none;
    }
}/* The Bio Section */
#bio {
    position  : fixed;
    inset     : 0;
    z-index   : var(--z-overlay);
    background: rgba(0,0,0,0.9);
    color     : var(--background);
    overflow  : auto;
    display   : none;
}
.bio-content {
    display              : grid;
    grid-template-columns: repeat(7,1fr);
    gap                  : 1rlh;
    grid-template-areas  : "picture picture text text text list list";
    position             : relative;
    align-items          : start;
    align-content        : start;
    min-height           : 100%;
    padding              : 1rlh;
}/* Add two subtle gradients to improve readability */
.bio-content::before {
    content    : "";
    position   : fixed;
    inset      : 0 0 auto 0;
    height     : 5rlh;
    background : linear-gradient(to bottom , rgba(0,0,0,0.9) , rgba(0,0,0,0));
}
.bio-content::after {
    content    : "";
    position   : fixed;
    inset      : auto 0 0 0;
    height     : 5rlh;
    background : linear-gradient(to top , rgba(0,0,0,0.9) , rgba(0,0,0,0));
}/* The Profile Picture */
.bio-picture {
    grid-area : picture;
    position  : sticky;
    top       : 0;
}/* The Main text section */
.bio-text-container {
    grid-area : text;
}/* The Section Titles */
.bio-text-title {
    position : sticky;
    top      : 1rlh;
    font     : var(--mono-base);
}
.bio-text {
    padding-top : 2rlh;
    padding-bottom : 2rlh;
    font        : var(--serif-large);
}
.bio-text p:not(:last-child) {
    margin-bottom : 0.5em;
}/* The List Section */
.bio-experiences-container {
    grid-area : list;
    position  : sticky;
    top       : 1rlh;
}/* The Section Titles */
.bio-experiences-title {
    font : var(--mono-base);
}
.bio-experiences {
    list-style  : none;
    padding-top : 2rlh;
}
.bio-experience:not(:last-child) {
    border-bottom : 1px solid currentColor;
}
.bio-experience a {
    display : block;
}
.bio-experience a::after {
    content : "→";
    float : right;
}
.bio-experience a:hover {
    color : var(--hover);
}/* Mobile Version of the bio section */
@media (width < 1100px) {
    .bio-content {
        grid-template-columns : 1fr;
        gap                   : 1rlh;
        grid-template-areas   : "picture" "text" "list";
    }

    .bio-picture {
        position    : static;
        padding-top : 5rlh;
        margin      : 0 auto;
        max-width   : 80%;
    }
    .bio-text-title {
        font     : var(--mono-small);
        position : static;
    }
    .bio-text {
        padding-top    : 0.25rlh;
        padding-bottom : 4rlh;
    }
    .bio-experiences-container {
        position       : static;
        padding-bottom : 15rlh;
    }
    .bio-experiences-title {
        font : var(--mono-small);
    }
    .bio-experiences {
        padding-top : 0.25rlh;
    }
    .bio-experience {
        font : var(--serif-medium);
        padding : 0.25rlh 0;
    }
}/* The Advisory Section */
#advisory {
    position              : fixed;
    inset                 : 0;
    z-index               : var(--z-overlay);
    overflow              : hidden;
    display               : none;
    grid-template-columns : 1fr 1fr;
    pointer-events        : none;
}/* Adds two overlay gradient */
#advisory::before {
    content    : "";
    position   : fixed;
    inset      : 0 0 auto 50%;
    height     : 5rlh;
    background : linear-gradient(to bottom, var(--bg-cream) 60% , transparent);
    z-index    : 5000;
}
#advisory::after {
    content    : "";
    position   : fixed;
    inset      : auto 0 0 50%;
    height     : 5rlh;
    background : linear-gradient(to top, var(--bg-cream) 60% , transparent);
    z-index    : 5000;
}/* Content Container */
.advisory-content {
    background     : var(--bg-cream);
    padding        : 5rlh 2rlh;
    overflow       : auto;
    position       : relative;
    pointer-events : all;
}
@media (width >= 1100px) {
    .advisory-content {
        grid-column : -1;
    }
}/* Add optional gradients */
.advisory-content::before {
    content : "";
    position : sticky;
}/* Advisory Blocks */
.advisory-content-blocks {
    display : grid;
    gap     : 2rlh;
}
.advisory-content-block-entry {
    position    : relative;
    display     : flex;
    flex-wrap   : wrap;
    align-items : baseline;
    gap         : 0 0.25rlh;
}
.advisory-content-block-entry:not(:last-child) {
    margin-bottom : 2px;
}
.advisory-content-block-entry::before {
    content  : "•";
    font     : var(--serif-xlarge);
    position : absolute;
    left     : -1rlh;
}/* List Title */
.advisory-content-block-title {
    font : var(--mono-base);
}
.advisory-content-block-big {
    font : var(--serif-xlarge);
}
.advisory-content-block-small {
    font : var(--mono-base);
}/* Mobile Version */
@media (width < 1100px) {
    #advisory {
        grid-template-columns : 1fr;
        background            : var(--bg-cream);
        grid-template-rows    : auto 1fr;
        overflow              : auto;
        pointer-events        : all;
    }
    #advisory::before {
        inset : 0 0 auto 0;
    }

    #advisory::after {
        inset : auto 0 0 0;
    }

    .advisory-content {
        overflow : unset;
    }
}/* The Press Section */
#press {
    position              : fixed;
    inset                 : 0;
    z-index               : var(--z-overlay);
    overflow              : hidden;
    display               : none;
    grid-template-columns : 1fr var(--column-width);
    pointer-events        : none;
}/* Adds two overlay gradient */
#press::before {
    content       : "";
    position      : fixed;
    inset         : 0 0 auto 0;
    height        : 5rlh;
    background    : linear-gradient(to bottom, var(--bg-cream) 60% , transparent);
    z-index       : 5000;
    max-width     : var(--column-width);
    margin-left   : auto;
    pointer-events: none;
}
#press::after {
    content       : "";
    position      : fixed;
    inset         : auto 0 0 0;
    height        : 5rlh;
    background    : linear-gradient(to top, var(--bg-cream) 60% , transparent);
    z-index       : 5000;
    max-width     : var(--column-width);
    margin-left   : auto;
    pointer-events: none;
}/* Content Container */
.press-content {
    background     : var(--bg-cream);
    padding        : 5rlh 1rlh;
    overflow       : auto;
    position       : relative;
    pointer-events : all;
}
@media (width >= 1100px) {
    .press-content {
        grid-column : -1;
    }
}/* Advisory Blocks */
.press-content-blocks {
    display : grid;
    gap     : 1rlh;
}/* List Title */
.press-content-block-title {
    font          : var(--mono-base);
    margin-bottom : 0.5em;
}
.press-content-block-entry {
    font : var(--serif-base);
    padding : 2px 0;
    text-wrap: balance;
    text-wrap: pretty;
}
.press-content-block-entry:not(:last-child) {
    border-bottom : 1px solid var(--text);
}
.press-content-block-entry-link {
    display : inline-block;
}
.press-content-block-entry-link:hover {
    color : var(--hover);
}
@media (width < 1100px) {
    #press {
        grid-template-columns : 1fr;
        background            : var(--bg-cream);
        grid-template-rows    : auto 1fr;
        overflow              : auto;
        pointer-events        : all;
    }
    #press::before {
        inset : 0 0 auto 0;
    }

    #press::after {
        inset : auto 0 0 0;
    }

    .press-content {
        overflow : unset;
    }
}/* Website Footer */
.footer {
    position              : fixed;
    inset                 : auto 0 0 0;
    padding               : 1rlh;
    font                  : var(--font-footer-small);
    display               : grid;
    grid-template-columns : 1fr auto auto;
    align-items           : baseline;
    gap                   : 1rlh;
    z-index               : var(--z-footer);
}/* Email Link */
.footer-email-container {
    justify-self          : start;
    display               : grid;
    grid-template-columns : auto 1fr;
    align-items           : last baseline;
    gap                   : 0 0.5rlh;
    font                  : var(--font-footer-big);
}
.footer-email {
    display : block;
}
.footer-email:hover {
    color : var(--hover);
}
.footer-email:hover + .footer-email-text {
    opacity : 1;
}
.footer-email-text {
    color          : var(--text);
    pointer-events : none;
    text-wrap      : balance;
    text-wrap      : pretty;
    font-family    : var(--font-family);
    opacity        : 0;
    pointer-events : none;
}/* Social Media Links */
.footer-social-links {
    display      : flex;
    margin-right : 4rlh;
}/* Single Link Container */
.footer-social-link-container {
    display : flex;
}
.footer-social-link-container:not(:last-child)::after {
    content     : ", ";
    white-space : pre;
}/* Single Link Hover State */
.footer-social-link {
    display : block;
}
.footer-social-link:hover {
    color : var(--hover);
}/* Legal Section */
.footer-legal {
    font : var(--font-footer-small);
}
.footer-legal a:hover {
    color : var(--hover);
}/* We don't have enough space for the text displayed on hover so we move it above the link */
@media (width < 1500px) and (width >= 1100px) {

    .footer-email-text {
        position : absolute;
        bottom   : 2rlh;
        width    : 100%;
    }
}/* Reduce the spacing a little bit */
@media (width < 1350px) {
    .footer-social-links {
        margin-right : 2rlh;
    }   
}/* Mobile version we hide most of the content */
@media (width < 1100px) {

    .footer-social-links,
    .footer-legal {
        display : none;
    }
    .footer {
        display : block;
        position : absolute;
        inset : 100dvh 0 auto;
        transform: translateY(-100%);
    }
}/* There's an extra spacer we need to use in order to size a bunch of stuff within js */
#spacer {
    width          : 1rlh;
    height         : 1rlh;
    position       : fixed;
    bottom         : 0;
    left           : 0;
    pointer-events : none;
    z-index        : -1;
}/* Reusable Components *//* Nothing to see here *//* Default Image Styles */
img {
    display : block;
    width   : 100%;
    height  : auto;
}/* The Optional Picture */
.overlay-picture-container {
    padding-left: 1rlh;
    position    : relative;
    padding-top : 360px;
    justify-self: start;
}
.overlay-picture {
    position       : relative;
    pointer-events : all;
}
.overlay-picture::before {
    content             : attr(data-index) ".";
    font                : var(--mono-small);
    position            : absolute;
    top                 : -0.75rlh;
    opacity             : 0;
    pointer-events      : none;
    transition-property : opacity;
}
.overlay-picture:hover::before {
    opacity : 1;
}
.overlay-picture-img {
    height : 37.5vh;
    width  : auto;
}
.overlay-picture-caption {
    display : none;
}
@media (width < 1100px) {
    .overlay-picture-container {
        padding-top  : 5rlh;
        padding-left : 0;
        justify-self : center;
    }
    .overlay-picture::before {
        opacity : 1;
    }
    .overlay-picture-img {
        padding : 0 10%;
        height  : 30vh;
    }
}/* Interaction Styles *//* Mobile Menu is Open */
@media (width < 1100px) {
    
    .mobile-menu-is-open {
        overflow : hidden;
    }

    .mobile-menu-is-open .header-mobile-menu-button::before {
        content : "(×) ";
    }

    .mobile-menu-is-open .mobile-nav-container {
        opacity        : 1;
        pointer-events : all;
        display        : grid;
    }

}/* Bio section is open */
.bio-is-open {
    overflow : hidden;
}
.bio-is-open #bio {
    display : block;
}/* Change the color of the header and footer */
.bio-is-open .header,
.bio-is-open .footer,
.bio-is-open .footer-email:hover::after {
    color : var(--background);
}/* Hide a few items from the menu */
.bio-is-open .header-nav  .header-nav-link:not(:first-child) {
    display : none;
}/* Update the hover state on the bio button */
.bio-is-open .header-nav-link:first-child::before {
    content : "(×) ";
}
.bio-is-open .header-mobile-menu-button {
    display : none;
}
.bio-is-open .header-mobile-overlay-button {
    display : block;
    opacity : 1;
}/* Hide the popup news */
.bio-is-open #news {
    display : none;
}/* Advisory section is open */
.advisory-is-open {
    overflow : hidden;
}
.advisory-is-open #advisory {
    display : grid;
}/* Hide a few items from the menu */
.advisory-is-open .header-nav .header-nav-link:not([value="advisory"]) {
    opacity        : 0;
    pointer-events : none;
}/* Update the hover state on the bio button */
.advisory-is-open .header-nav-link[value="advisory"]::before {
    content : "(×) ";
}
.advisory-is-open .header-mobile-menu-button {
    display : none;
}
.advisory-is-open .header-mobile-overlay-button {
    display : block;
    opacity : 1;
}/* Hide the popup news */
.advisory-is-open #news {
    display : none;
}/* Press section is open */
.press-is-open {
    overflow : hidden;
}
.press-is-open #press {
    display : grid;
}/* Hide a few items from the menu */
.press-is-open .header-nav  .header-nav-link:not([value="press"]) {
    opacity        : 0;
    pointer-events : none;
}/* Update the hover state on the bio button */
.press-is-open .header-nav-link[value="press"]::before {
    content : "(×) ";
}
.press-is-open .header-mobile-menu-button {
    display : none;
}
.press-is-open .header-mobile-overlay-button {
    display : block;
    opacity : 1;
}/* Hide the popup news */
.press-is-open #news {
    display : none;
}