:root {
    --page-bgcolor: darkgray;
    --screen-bgcolor: #050505;
    --page-fgcolor: white;
    --page-fontsize: clamp(1rem, 3vmin, 2rem);
    --hmaxwidth: calc(78vw / 25);
    --h1-fontsize: clamp(1em, 1.6em, var(--hmaxwidth));
    --h2-fontsize: clamp(1em, 1.5em, var(--hmaxwidth));
    --h3-fontsize: clamp(1em, 1.4em, var(--hmaxwidth));
    --h4-fontsize: clamp(1em, 1.3em, var(--hmaxwidth));
    --h5-fontsize: clamp(1em, 1.2em, var(--hmaxwidth));
    --h6-fontsize: clamp(1em, 1.1em, var(--hmaxwidth));
    /* Glassmorphic Box Specs */
    --glass-bg: oklch(100% 0 0 / 0.06);
    --glass-border: oklch(100% 0 0 / 0.15);
    --glass-blur: 1.25rem;
    --glass-shadow: oklch(0% 0 0 / 0.4);
    --glass-inset-highlight: oklch(100% 0 0 / 0.2);
    /* Additional TV tuned tones */
    --tv-bezel: rgba(12,12,14,0.85);
    --tv-screen-edge: rgba(255,255,255,0.08);
    --tv-glare: rgba(255,255,255,0.12);
    /* Typography */
    --text-white: oklch(100% 0 0);
    --text-body: oklch(100% 0 0 / 0.75);
    --h1-gradient-end: oklch(88% 0 0);
}

h1, h2, h3, h4, h5, h6 {
    white-space: nowrap;
    overflow: clip;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
    margin: 0;
    padding: 0;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
    color: var(--text-white);
}

h1 {
    font-size: var(--h1-fontsize);
}

h2 {
    font-size: var(--h2-fontsize);
}

h3 {
    font-size: var(--h3-fontsize);
}

h4 {
    font-size: var(--h4-fontsize);
}

h5 {
    font-size: var(--h5-fontsize);
}

h6 {
    font-size: var(--h6-fontsize);
}

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

nav a, nav a:link, nav a:active, nav a:visited, nav a:hover { /* ensure all link states are styled consistently */
    font-family: 'Papyrus', Courier, monospace;
    font-size: 1rem;
    text-decoration: none;
    color: var(--text-white);
}

/* ==========================================================================
   Old TV: fixed 4:3 aspect ratio main block
   - centers the article in the viewport
   - enforces a responsive 4:3 aspect-ratio
   - provides a subtle bezel/edge treatment while keeping existing glass look
   ============================================================ ============== */
/* TV screen sizing (computed vars used for precise overlay positioning) */

html {
    background-color: var(--page-bgcolor);
    color: var(--page-fgcolor);
    font-family: 'Press Start 2P', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--page-fontsize);
    scrollbar-width: none; /* Firefox */
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

    html::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Edge, Opera */
    }

body {
    display: block;
    max-height: 90%;
    max-width: 90%;
    aspect-ratio: 4 / 3;
    margin: auto;
    margin-top: 5vh;
    background-color: var(--screen-bgcolor);
    border-radius: 25px / 30px;
    padding: 1rem;
    border: 0.25rem;
    border-style: inset;
    border-color: var(--page-bgcolor);
}

    body > main {
        position: relative;
        top: -7.5rem;
        width: 100%;
        height: 100%;
        overflow: hidden;
        box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
    }

        body > main::before {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient( rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50% );
            background-size: 100% 4px;
            z-index: 2;
            pointer-events: none;
        }

        body > main::after {
            content: " ";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            /* Creates a curved, sweeping light reflection from the top-left */
            background: radial-gradient( circle at 50% 15%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 70% );
            z-index: 3;
            pointer-events: none;
        }

        body > header > nav {
            position: absolute;
            display: flex;
            gap: 1rem;
            padding: 0.5rem;
        }