/* UNIVERSAL STYLES */
:root {
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-s: 12px;
    --spacing-m: 20px;
    --spacing-l: 40px;
    --spacing-xl: 80px;
    --spacing-xxl: 100px;
    --spacing-xxxl: 140px;
    --spacing-4xl: 200px;
    --spacing-5xl: 600px;

    --bodyMargin: var(--spacing-l);

    --fontSize-xxs: 12px;
    --fontSize-xs: 15px;
    --fontSize-s: 18px;
    --fontSize-m: 20px;
    --fontSize-l: 48px;
    --fontSize-xl: 72px;
    --fontSize-xxl: 92px;

    --maxWidth:2200px;
    --textColor: #B0FF9E;
    --tagColor: #9F090C;
    --bgColor: black;

    /* ASCII character size - adjust based on baseSampleRate in main.js
       Formula: 12px * (baseSampleRate / 8)
       baseSampleRate=8 → 12px, baseSampleRate=6 → 9px, baseSampleRate=4 → 6px */
    --ascii-unit: 10px;
    
    /* ASCII title font size - uses min(0.11vw, 1000px) to cap at 1000px effective width
       Embeds the vmin calculation directly: min of 11% of viewport and capped width */
    --ascii-title-size: min(11vw, 110px);
}

/* FONTS */
/* Modern Gothic */
    @font-face {
        font-family: 'Modern Gothic';
        src: url('../fonts/ModernGothic/ModernGothic-Regular.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'Modern Gothic';
        src: url('../fonts/ModernGothic/ModernGothic-Italic.woff2') format('woff2');
        font-weight: 500;
        font-style: italic;
    }

    @font-face {
        font-family: 'Modern Gothic';
        src: url('../fonts/ModernGothic/ModernGothic-Bold.woff2') format('woff2');
        font-weight: 700;
        font-style: normal;
    }

    @font-face {
        font-family: 'Modern Gothic';
        src: url('../fonts/ModernGothic/ModernGothic-BoldItalic.woff2') format('woff2');
        font-weight: 700;
        font-style: italic;
    }

    @font-face {
        font-family: 'Modern Gothic Mono';
        src: url('../fonts/ModernGothic/ModernGothicMono-Regular.woff2') format('woff2');
        font-weight: 500;
        font-style: normal;
    }

    @font-face {
        font-family: 'Modern Gothic Mono';
        src: url('../fonts/ModernGothic/ModernGothicMono-Italic.woff2') format('woff2');
        font-weight: 500;
        font-style: italic;
    }



    /* ASCII title font */
    @font-face {
        font-family: 'Modern Gothic';
        src: url('../fonts/ModernGothic/ModernGothic-Black-trial.otf') format('opentype');
        font-weight: 800;
        font-style: normal;
    }

    /* FRANCESCO */
    @font-face {
        font-family: 'Francesco';
        src: url('../fonts/Francesco/FrancescoWeb-Regular.woff2') format('woff2'), url('../fonts/Francesco/FrancescoWeb-Regular.woff') format('woff');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'Francesco';
        src: url('../fonts/Francesco/FrancescoWeb-Italic.woff2') format('woff2'), url('../fonts/Francesco/FrancescoWeb-Italic.woff') format('woff');
        font-weight: normal;
        font-style: italic;
    }

body {
    margin: 0;
    padding: var(--bodyMargin) var(--bodyMargin) var(--spacing-xl) var(--bodyMargin);

    color: var(--textColor);

    font-family: 'Modern Gothic', Arial, sans-serif;
    font-size: var(--fontSize-m);
    font-weight: 500;
    line-height: 1.3em;
    font-style: normal;

    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;

    background: var(--bgColor, black);
    overflow-x: hidden;
}

/* SCROLLBAR */
    ::-webkit-scrollbar {
        width: 12px;
    }

    ::-webkit-scrollbar-track {
        background: var(--bgColor);
    }

    ::-webkit-scrollbar-thumb {
        background: var(--textColor);
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--tagColor);
    }

* {
    box-sizing: border-box;

    /* Firefox */
        scrollbar-color: var(--textColor) var(--bgColor);
        scrollbar-width: thin;
}

button {
    all: unset;
    cursor: pointer;
}

/* TYPOGRAPHIC STYLING */
    strong, b {
        font-weight: 700;
    }

    i, em {
        font-style: italic;
    }

    p, h1, h2, h5, h6 {
        margin: 0;
        padding: 0;
        max-width:100%;
        font-weight: 500;
    }

    /* This makes sure extra line breaks will still render on the site */
    p:empty, h5:empty, h6:empty {
        min-height: 1.3em;
    }

    h1 {
        color: var(--bgColor);

        -webkit-text-stroke-width: 2px;
        -webkit-text-stroke-color: var(--textColor);
        font-size: var(--fontSize-xxl);
        font-style: normal;
        line-height: 100%;

        /* Prevent text from overflowing container */
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-word;
    }

    h2 /* Used for about page .overview*/ {
        text-align: center;
        font-size: var(--fontSize-l);
        line-height: 115%;
        letter-spacing: 0.48px;
    }

    h5 { /* Used for markdown headings*/
        font-size: var(--fontSize-xxs);
        font-weight: 700;
        text-transform: uppercase;
    }

    h5.metadata-label {
        line-height: 130%;
    }

    h6 {
        /* font-size: 0.75em; */
        /* font-family: Courier, monospace; */

        font-size: 0.6em;
        font-family: 'Modern Gothic Mono', monospace;

        line-height: 1.4em;
    }

    p, h5, h6 {
        /* Adds a black stroke so that text is more legible against the ascii background */
        background: var(--bgColor);
        -webkit-background-clip: text;
        -webkit-text-stroke: .75em transparent;

        hyphens:none;
    }

    /* Add spacing between text elements */
    p + p, h5 + h5, h6 + h6, p + h5, p + h6 {
        margin-top: 1em;
    }
    
    /* Targets an h5 that immediately follows a paragraph */ 
    p + h5 {
        margin-top: 2em;
    }

    p *, h5 *, h6 * {
        /* Must be applied separately with box-decoration-break for inline elements */
        background: var(--bgColor);
        -webkit-background-clip: text;
        -webkit-text-stroke: .75em transparent;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    blockquote {
        margin: 1em 2em;
    }

/* HIDDEN & INVISIBLE */
    .hidden {
        display:none !important;
    }

    .invisible {
        opacity: 0;
    }

/* IMAGES & LINKS */
img {
    width:100%;
    height:auto;
    display:block;
}

nav a, .index a {
    color: inherit;
    text-decoration: none;
}

nav a:hover, .index a:hover, nav button:hover, .index button:hover {
   color: var(--tagColor);
}

main a {
    text-decoration: underline;
    color: var(--tagColor);
}

main a:hover {
    text-decoration: none;
}

/* ASCII hover effect for text links */
a[data-ascii-hover] {
    position: relative;
    transition: color 0.3s ease;
}

a[data-ascii-hover].flickering {
    color: var(--tagColor);
}

.current {
    color: var(--tagColor);
}

/* IFRAMES */
.vimeo-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: auto;
    max-height: none;
}

.vimeo-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* NAV */
nav {
    position:fixed;
    z-index:100;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    width: 100%;
    max-width: calc(var(--maxWidth) + 2 * var(--bodyMargin)); /* This is so that it matches main, which has the same maxWidth and inherits bodyMargin from body */
    padding: var(--spacing-m) var(--bodyMargin);
    box-sizing: border-box;
    background: var(--bgColor, black);

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "home menu about";
    align-items: center;
}

.nav-home {
    grid-area: home;
}

.menu {
    grid-area: menu;
}

.nav-about {
    grid-area: about;
}

/* Menu filter buttons */
.menu {
    font-size: var(--fontSize-xs);
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-xxs) var(--spacing-m);
}

.menu-buttons {
    display: flex;
    flex-flow: row wrap;
    gap: var(--spacing-m);
}

/* Filter status icon */
.filter-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.filter-status-icon svg {
    display: block;
    width: calc(var(--fontSize-xs) * .8 + 4px); /* diameter + padding */
    height: calc(var(--fontSize-xs) * .8 + 4px);
}

.filter-status-icon circle {
    r: calc(var(--fontSize-xs) * .4);
    /* Center the circle: half of (diameter + padding) = (fontSize-xs * .8 + 4px) / 2 */
    cx: calc((var(--fontSize-xs) * .8 + 4px) / 2);
    cy: calc((var(--fontSize-xs) * .8 + 4px) / 2);
    fill: none;
    stroke: var(--textColor, #9F090C);
    stroke-width: 2;
}

/* FILTER */
/* Fill the circle when active */
.filter.active .filter-status-icon circle {
    fill: var(--tagColor);
}

/* MAIN */
main {
    position: relative;
    z-index: 10;

    max-width: var(--maxWidth);
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    pointer-events: none; /* Allow clicks to pass through to ASCII background, so that when the mouse hovers over the ascii bg, the cursor displays as pointer */

    /* background:yellow; */
}

/* TAGS */
.tags {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    gap: var(--spacing-xs);
}

.tag {
    color: var(--tagColor);
    font-size: var(--fontSize-xxs);
    text-transform: uppercase;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: var(--spacing-xxs);
    border: 1.5px solid var(--tagColor);
    line-height: 1em;

    background: var(--bgColor, black);
}

/* ASCII */
/* Fixed container for ASCII art */
.ascii-bg {
    position: fixed;
    top: 0;
    left: 50%;
    max-width: calc(var(--maxWidth) + 2 * var(--bodyMargin));
    width: 100%;
    height: 100svh; /* Use small viewport height for stable mobile sizing */
    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    overflow: hidden;
    cursor: pointer;

    /* Padding to inset ASCII grid from viewport edges */
    /* Top: just nav height. Sides/bottom: bodyMargin */
    padding: var(--nav-height, 1.5em) var(--bodyMargin) var(--bodyMargin) var(--bodyMargin); /* This is so that it matches main, which has the same maxWidth and inherits bodyMargin from body */
    box-sizing: border-box;

    /* Performance optimizations - combine transforms */
    will-change: contents;
    backface-visibility: hidden;
    transform: translateX(-50%) translateZ(0);

    /* background: pink; */
}

/* ASCII art display */
.ascii-unit-measure {
    font-family: "Courier Prime", Courier, monospace;
    font-weight: 400;
    font-size: var(--ascii-unit);
    line-height: 1;
    white-space: pre;
}

.ascii-art-background {
    font-family: "Courier Prime", Courier, monospace;
    font-weight: 400;
    font-size: var(--ascii-unit);
    line-height: var(--ascii-unit);
    white-space: pre;
    color: #000;
    text-align: center;

    /* GPU acceleration */
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

/* ASCII character color classes - use CSS variables for duotone */
.ascii-dark {
    color: var(--tagColor);
}

.ascii-light {
    color: var(--textColor);
}

/* Hidden images for processing */
.ascii-hidden-images, .ascii-unit-measure {
    position: absolute;
    visibility: hidden;
}

.ascii-hidden-images {
    pointer-events: none;
    width: 0;
    height: 0;
    overflow: hidden;
}

.ascii-source-img {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}


/* MEDIA QUERIES */
/* Note: ASCII unit sizing is handled by setAsciiUnitSize() JavaScript function
   which calculates based on total viewport area (width × height) for better performance control */

@media (max-width: 1200px) {
    :root {
        --ascii-title-size: min(10vw, 100px);
    }
}

@media (max-width: 1000px) {
    :root {
        --fontSize-xxl: 64px; /* This is for the h1 .title on work pages */
    }
}

@media (max-width: 800px) {
    :root {
        --maxWidth: none;

        --spacing-xl: 40px;
        --bodyMargin: var(--spacing-m);

        --fontSize-xxs: 12px;
        --fontSize-xs: 15px;
        --fontSize-s: 15px;
        --fontSize-m: 18px;
        --fontSize-l: 25px;
        --fontSize-xl: 38px;
        --fontSize-xxl: 48px;
    }

    p {
        /* Make black stroke thinner */
        -webkit-text-stroke: .5em transparent;
    }

    nav {
        /* Stack navigation on mobile */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "home about"
            "menu menu";
        gap: var(--spacing-xs);
    }

    .nav-about {
        justify-self: end;
    }
}

@media (max-width: 480px) and (orientation: portrait) {
    :root {
        --ascii-title-size: 8.2vh;
    }
}

@media (max-width: 480px) {
    blockquote {
        margin: 1em 0 1em 1.5em;
    }
}