/* --- Base Styles (User Provided) --- */
@font-face {
    font-family: 'Eau';
    font-style: normal;
    font-weight: 200;
    src: local('Eau'), url('https://fonts.cdnfonts.com/s/23876/eau_sans_book_lng.woff') format('woff');
}


@layer base {
    * {
        box-sizing: border-box;
    }

    :root {
        --clr-bg: #717171;
        --clr-primary: #E9E8F6;
        /* Changed to text color for monochrome */
        --clr-secondary: #A8A8B3;
        --clr-cta: #A8A8B3;
        --clr-heading: #e8e8f6;
        --clr-text: #E9E8F6;
        --clr-text-muted: #A8A8B3;
        --clr-border: #a8a8b3ad;
        --clr-surface: rgba(255, 255, 255, 0.05);
    }

    html {
        background-color: var(--clr-bg);
        font-family: 'Eau', 'Outfit', sans-serif;
        font-size: 0.85rem;
        /* Fallback to Outfit if Eau not available */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'EB Garamond', 'Garamond', serif;
        font-weight: 100;
        font-size: 1.5rem;
        color: var(--clr-heading);
    }

    body {
        min-height: 100svh;
        color: var(--clr-text);
        padding: 0;
        margin: 0;
        /* Keeping the radial gradient as requested in previous step, but ensuring bg color matches */
        /* User requested to remove the pattern */
        background-image: none;
        background-size: 40px 40px;
        background-attachment: fixed;
        line-height: 1.5;

        /* Logo removed as per user request */
    }

    code {
        color: var(--clr-cta);
        text-transform: lowercase;
    }

    a {
        color: var(--clr-text);
        text-decoration: none;
        transition: opacity 0.2s;
    }

    a:hover {
        opacity: 0.7;
    }

    #canvas-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        pointer-events: none;
        /* Let clicks pass through to content */
        background: radial-gradient(circle at center, #2b2b2e 0%, #1a1a1a 100%);
        /* Fallback/Base gradient */
    }

    hgroup {
        h1 {
            font-size: 1.4rem;
            font-weight: 100;
            margin: 0;
            /*text-transform: uppercase;*/
            line-height: 1;
        }

        h1>span {
            font-size: 1rem;
            text-transform: lowercase;
        }

        p {
            font-size: 1rem;
            max-width: 72ch;
            text-wrap: balance;
        }

        p>a {
            color: var(--clr-text);
            text-decoration: none;
            padding: 0.25rem 0.5rem;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            transition: all 0.3s ease;
            display: inline-block;

            &:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
        }
    }
}

/* --- Admin Layout & Utilities --- */
.admin-container {
    max-width: 1200px;
    margin: 6rem auto;
    padding: 0 2rem;
}

.admin-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}


.admin-grid {
    display: flex;
    flex-direction: column-reverse;
    gap: 2rem;
}

@media (min-width: 768px) {
    .admin-grid {
        display: grid;
        grid-template-columns: 250px 1fr;
    }
}

.admin-sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nav-link {
    padding: 1rem;
    color: var(--clr-text);
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.2s;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, 0.1);
}

.admin-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.projects-list,
.blocks-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.project-item,
.block-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border: 0.25px solid var(--clr-border);
    border-radius: 4px;
}

.item-info h3 {
    margin: 0;
}

.item-meta {
    font-size: 0.9rem;
    opacity: 0.7;
}

.item-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* --- Forms --- */
.form-container {
    max-width: 600px;
    margin: 6rem auto;
    padding: 2rem;
    border: 0.25px solid var(--clr-border);
    border-radius: 8px;
}

.form-container.wide {
    max-width: 800px;
}

.login-container {
    max-width: 400px;
    margin: 10rem auto;
    padding: 2rem;
    border: 0.25px solid var(--clr-border);
    border-radius: 8px;
    background: rgba(22, 22, 29, 0.8);
}

.form-title {
    text-align: center;
    margin-bottom: 2rem;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.form-input,
.form-textarea {
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 0.25px solid var(--clr-border);
    color: var(--clr-text);
    border-radius: 4px;
    font-family: inherit;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--clr-text);
    background: rgba(255, 255, 255, 0.1);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.flex-1 {
    flex: 1;
}

.text-center {
    text-align: center;
}

.error-message {
    color: #ff6b6b;
    margin-bottom: 1rem;
    text-align: center;
}

.inline-form {
    display: inline;
}

.ml-1 {
    margin-left: 1rem;
}

.add-block-actions {
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn-primary {
    background: var(--clr-heading);
    color: var(--clr-bg);
    border: none;
    font-weight: bold;
}

/* --- Unified Audio Player --- */
.unified-player {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(30, 30, 30, 0.8);
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
}

.unified-player .play-pause-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--clr-text);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.unified-player .play-pause-btn:hover {
    transform: scale(1.1);
}

.unified-player .track-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    /* For text truncation */
}

.unified-player .track-title {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--clr-text);
}

.unified-player .progress-container {
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
    width: 100%;
}

.unified-player .progress-bar {
    height: 100%;
    background: var(--clr-text);
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.unified-player .time-display {
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    color: var(--clr-text);
    min-width: 70px;
    text-align: right;
    opacity: 0.8;
}

.unified-player .volume-control {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.unified-player .mute-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    font-size: 0.9rem;
    color: var(--clr-text);
    opacity: 0.7;
    background: none;
    border: none;
}

.unified-player .mute-btn:hover {
    opacity: 1;
    background: none;
}

.unified-player .volume-slider-container {
    width: 0;
    overflow: hidden;
    transition: width 0.2s ease;
    display: flex;
    align-items: center;
}

.unified-player .volume-control:hover .volume-slider-container {
    width: 60px;
}

.unified-player .volume-slider {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.unified-player .volume-level {
    height: 100%;
    background: var(--clr-text);
    border-radius: 2px;
    width: 100%;
    /* Default 100% */
}

/* --- Admin UI Components --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 0.25px solid var(--clr-border);
    color: var(--clr-text);
    text-decoration: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--clr-text);
    border-color: var(--clr-text);
}

.icon-btn {
    background: none;
    border: none;
    color: var(--clr-text);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem;
    transition: opacity 0.2s;
    display: inline-flex;
    align-items: center;
}

.icon-btn:hover {
    opacity: 0.8;
}

/* Remove specific color overrides for icons inside buttons if any */
.btn i,
.icon-btn i {
    color: inherit;
}

/* --- Custom Modal --- */
.custom-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.custom-modal {
    background: var(--clr-bg);
    padding: 2rem;
    border-radius: 8px;
    border: 0.25px solid var(--clr-border);
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.custom-modal h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--clr-heading);
}

.custom-modal p {
    margin-bottom: 2rem;
    color: var(--clr-text);
}

.modal-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* --- Quill Editor Overrides --- */
.ql-toolbar.ql-snow {
    border-color: var(--clr-border) !important;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px 4px 0 0;
}

.ql-container.ql-snow {
    border-color: var(--clr-border) !important;
    background: rgba(255, 255, 255, 0.05);
    /* Match input background */
    color: var(--clr-text) !important;
    border-radius: 0 0 4px 4px;
    font-family: inherit !important;
    font-size: 1rem !important;
}

.ql-editor {
    min-height: 300px;
}

.ql-snow .ql-stroke {
    stroke: var(--clr-text) !important;
}

.ql-snow .ql-fill {
    fill: var(--clr-text) !important;
}

.ql-snow .ql-picker {
    color: var(--clr-text) !important;
}

/* Link color in editor */
.ql-snow a {
    color: var(--clr-text) !important;
    text-decoration: underline;
}

/* --- File Uploader --- */
.drop-zone {
    border: 2px dashed var(--clr-border);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    margin-bottom: 1rem;
    border-radius: 4px;
    transition: border-color 0.2s, background-color 0.2s;
    background: rgba(255, 255, 255, 0.02);
}

.drop-zone:hover,
.drop-zone.dragover {
    border-color: var(--clr-text);
    background: rgba(255, 255, 255, 0.05);
}

.file-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    background: var(--clr-surface, rgba(255, 255, 255, 0.05));
    margin-bottom: 0.5rem;
    border-radius: 4px;
    border: 0.25px solid var(--clr-border);
}

.file-item img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 4px;
}

.file-info {
    flex: 1;
}

.file-info input {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.9rem;
    padding: 0.25rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--clr-border);
    color: var(--clr-text);
}

.file-info input:focus {
    outline: none;
    border-color: var(--clr-text);
}

.remove-btn {
    color: var(--clr-text);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.2rem;
    transition: opacity 0.2s;
    opacity: 0.7;
}

.remove-btn:hover {
    opacity: 1;
}

.progress-bar {
    height: 4px;
    background: var(--clr-text);
    width: 0%;
    transition: width 0.2s;
    border-radius: 2px;
}

/* --- Block List & Grid --- */
.blocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.add-block-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 8px;
    text-decoration: none;
    color: var(--clr-text);
    border: 0.25px solid var(--clr-border);
    transition: transform 0.2s, border-color 0.2s;
}

.add-block-card:hover {
    transform: translateY(-2px);
    border-color: var(--clr-text);
}

.add-block-card .material-icons {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: var(--clr-text);
}

.block-item {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 4px;
    border: 0.25px solid var(--clr-border);
    margin-bottom: 0.5rem;
}


.drag-handle {
    cursor: grab;
    padding: 0.5rem;
    margin-right: 1rem;
    color: var(--clr-text);
    opacity: 0.5;
    font-size: 1.5rem;
}

.drag-handle:hover {
    opacity: 1;
}

.block-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.block-type {
    font-size: 0.8rem;
    color: var(--clr-text);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

.block-preview {
    color: var(--clr-text);
    opacity: 0.7;
    font-size: 0.9rem;
}

.block-actions {
    display: flex;
    gap: 0.5rem;
}




/* --- Timeline CSS (User Provided) --- 
@import "https://codepen.io/cbolson/pen/rNEdgKo.css" layer(template);*/
@layer demo;

@layer demo {

    /* Hide radio buttons */
    input[type="radio"] {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
    }

    .cards-container {
        --base-rotation: 0deg;
        --full-circle: 360deg;
        --radius: 40vw;
        --duration: 200ms;

        --cards-container-size: calc(var(--radius) * 2);
        --cards-container-padding: 2rem;

        --border-color: var(--clr-border);

        --label-offset: calc(var(--radius) * -1 - 1rem);
        --label-size: 30px;
        --label-color: var(--clr-border);
        --label-color-hover: var(--clr-text);
        --label-line-h: 0;
        --label-line-h-current: 2rem;
        --label-dot-size: 10px;

        --title-top: 1.5rem;
        --title-offset-y: 30px;

        --info-top: 5rem;
        --info-width: min(70%, 500px);
        --info-offset-y: 30px;

        box-sizing: content-box;
        position: fixed;
        inset: 0;
        margin: 5rem auto;
        width: var(--cards-container-size);
        height: var(--cards-container-size);
        padding: var(--cards-container-padding);




        @media (min-width: 800px) {
            --radius: 30vw;
            --label-size: 40px;
            --label-dot-size: 15px;
            --label-line-h-current: 4rem;
            --title-top: 4rem;
            --info-top: 8rem;
        }


        @media (min-width: 1200px) {
            --label-size: 50px;
            --border-color: var(--clr-border);
        }

    }

    .cards {
        position: absolute;
        inset: var(--cards-container-padding);
        aspect-ratio: 1;
        border-radius: 50%;
        border: 0.25px solid var(--border-color);
        transition: transform 0.3s ease-in-out var(--duration);
        list-style: none;
    }



    .cards li {
        position: absolute;
        inset: 0;
        margin: 0;
        padding: 0;
        transform-origin: center;
        display: grid;
        place-content: center;
        transform: rotate(calc(var(--i) * 360deg / var(--items)));
        pointer-events: none;
    }

    .cards li>label {
        position: absolute;
        inset: 0;
        margin: auto;
        transform: translateY(var(--label-offset));
        width: var(--label-size);
        height: var(--label-size);
        cursor: pointer;
        pointer-events: initial;
        text-align: center;
        color: var(--label-color);
        font-size: clamp(.8rem, 2.5vw + .25rem, 1rem);
        font-weight: 200;
        transition: var(--duration) ease-in-out;

    }

    .cards li>label::before {
        content: '';
        position: absolute;
        top: var(--cards-container-padding);
        left: 50%;
        translate: -50% 0;
        width: var(--label-dot-size);
        height: var(--label-dot-size);
        aspect-ratio: 50%;
        border-radius: 50%;
        background-color: var(--label-color);
        transition: background-color var(--duration) ease-in-out;
    }

    .cards li>label::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        translate: -50% 5px;
        width: 2px;
        height: var(--label-line-h);
        background-color: var(--label-color);
        transition: height 300ms ease-in-out var(--label-line-delay, 0ms);
    }

    .cards li>label:hover {
        --label-color: var(--label-color-hover);
    }

    .year-projects {
        position: absolute;
        left: 50%;
        top: var(--title-top);
        transform: translate(-50%, 0);
        text-align: center;
        opacity: 0;
        translate: 0 30px;
        transition: var(--duration) ease-in-out 0ms;
        pointer-events: none;
        z-index: 100;
        max-height: 60vh;
        overflow-y: auto;
        border-radius: 50%;
        /* background-color: rgba(113, 113, 113, 0.3); */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        padding: 10% 1rem;
    }

    /* Show projects when year is selected */
    li:has(input:checked) .year-projects {
        opacity: 1;
        translate: 0 0;
        transition: var(--duration) ease-in-out calc(var(--duration) * 3);
        pointer-events: initial;
    }

    .year-projects h2 {
        font-size: 1.35rem;
        color: var(--clr-text);
        margin: 0.5rem 0;
        cursor: pointer;
        z-index: 5;

    }

    .year-projects h2:hover,
    .year-projects h2:active {
        font-weight: 500;
    }

    .year-projects h2 a {
        color: var(--clr-text);
        text-decoration: none;
        padding-bottom: 0.5rem;
    }

    .cards>li>h2,
    .cards>li>p {
        position: absolute;
        left: 50%;
        text-align: center;
        transform: translate(-50%, 0);
        transform-origin: center;
    }

    .cards>li>p {
        top: var(--info-top);
        margin: 0 auto;
        width: var(--info-width);
        z-index: 2;
        font-size: clamp(.8rem, 2.5vw + 0.05rem, .9rem);
        text-align: left;
        text-wrap: pretty;
        opacity: var(--info-opacity, 0);
        /*translate: 0 var( --info-offset-y);*/
        transition: var(--duration) ease-in-out var(--info-delay, 0ms);
    }

    /* update custom properties for checked item */
    li:has(input:checked) {
        z-index: 999;
        --label-opacity: 1;
        --label-color: var(--label-color-hover);
        --label-line-h: var(--label-line-h-current);
        --label-line-delay: calc(var(--duration) * 2);

        --title-opacity: 1;
        --title-offset-y: 0;
        --title-delay: calc(var(--duration) * 3);

        --info-opacity: 1;
        --info-offset-y: 0;
        --info-delay: calc(var(--duration) * 4);
        /*outline: 1px dashed red;*/
    }

    /* rotate container based on checked radio */
    .cards:has(input:checked) {
        transform: rotate(calc(var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))));
    }

    /*
  this would be so much simpler if we could use counter values as custom property values
  */
    .cards:has(li:nth-child(1)>input:checked) {
        --index: 0;
    }

    .cards:has(li:nth-child(2)>input:checked) {
        --index: 1;
    }

    .cards:has(li:nth-child(3)>input:checked) {
        --index: 2;
    }

    .cards:has(li:nth-child(4)>input:checked) {
        --index: 3;
    }

    .cards:has(li:nth-child(5)>input:checked) {
        --index: 4;
    }

    .cards:has(li:nth-child(6)>input:checked) {
        --index: 5;
    }

    .cards:has(li:nth-child(7)>input:checked) {
        --index: 6;
    }

    .cards:has(li:nth-child(8)>input:checked) {
        --index: 7;
    }

    .cards:has(li:nth-child(9)>input:checked) {
        --index: 8;
    }

    .cards:has(li:nth-child(10)>input:checked) {
        --index: 9;
    }

    .cards:has(li:nth-child(11)>input:checked) {
        --index: 10;
    }

    .cards:has(li:nth-child(12)>input:checked) {
        --index: 11;
    }

    .cards:has(li:nth-child(13)>input:checked) {
        --index: 12;
    }

    .cards:has(li:nth-child(14)>input:checked) {
        --index: 13;
    }

    .cards:has(li:nth-child(15)>input:checked) {
        --index: 14;
    }

    .cards:has(li:nth-child(16)>input:checked) {
        --index: 15;
    }

    .cards:has(li:nth-child(17)>input:checked) {
        --index: 16;
    }

    .cards:has(li:nth-child(18)>input:checked) {
        --index: 17;
    }

    .cards:has(li:nth-child(19)>input:checked) {
        --index: 18;
    }

    .cards:has(li:nth-child(20)>input:checked) {
        --index: 19;
    }

    .cards:has(li:nth-child(21)>input:checked) {
        --index: 20;
    }

    .cards:has(li:nth-child(22)>input:checked) {
        --index: 21;
    }

    .cards:has(li:nth-child(23)>input:checked) {
        --index: 22;
    }

    .cards:has(li:nth-child(24)>input:checked) {
        --index: 23;
    }

    .cards:has(li:nth-child(25)>input:checked) {
        --index: 24;
    }

    .cards:has(li:nth-child(26)>input:checked) {
        --index: 25;
    }
}



/* --- Circular Nav Menu (Converted & Adapted) --- */

:root {
    --menu-toggle-size: 120px;
    /* Reduced size for better fit */
    --arrow-size: 20px;
    --menu-whole-size: calc(var(--menu-toggle-size) * 3 + var(--arrow-size) * 2);
    --hamburger-width: 20px;
    --hamburger-height: 1px;
    --hamburger-animation-duration: 1s;
    --li-count: 10;
    --li-angle: 36deg;
    /* 360 / 10 */
    --skew-angle: -54deg;
    /* -(90 - 36) */
    --skew-angle-content: 54deg;
    --li-angle-content: 18deg;
    /* 36 / 2 */
}

.icon {
    position: absolute;
    top: 70%;
    left: 70%;
    transform: translateX(-50%) translateY(-50%);
}

.hamburger {
    content: ' ';
    position: relative;
    width: var(--hamburger-width);
    border: var(--hamburger-height) solid var(--clr-text);
    border-radius: 5px;
    transition: all calc(var(--hamburger-animation-duration) / 3) ease;
}

.hamburger:after,
.hamburger:before {
    content: ' ';
    position: absolute;
    left: 50%;
    width: 100%;
    border: var(--hamburger-height) solid var(--clr-text);
    border-radius: 5px;
    transition-property: top, bottom, transform;
    transition-duration: calc(var(--hamburger-animation-duration) / 1), calc(var(--hamburger-animation-duration) / 1), calc(var(--hamburger-animation-duration) / 4);
}

.hamburger:after {
    top: calc(var(--hamburger-height) * -4);
}

.hamburger:before {
    bottom: calc(var(--hamburger-height) * -4);
}

.menu {
    pointer-events: none;
    position: fixed;
    /* Fixed position for nav */
    top: 1.5rem;
    left: 1.5rem;
    z-index: 1000;
}

.menu--circle {
    position: absolute;
    z-index: 13;
    width: calc(var(--menu-whole-size) / 3 + var(--arrow-size) + 10px);
    height: calc(var(--menu-whole-size) / 3 + var(--arrow-size) + 10px);
}

.menu__active {
    position: relative;
}

.menu__toggle {
    z-index: 11;
    position: absolute;
    top: calc(var(--menu-toggle-size) / -2);
    left: calc(var(--menu-toggle-size) / -2);
    width: var(--menu-toggle-size);
    height: var(--menu-toggle-size);
    /* background: rgba(255, 255, 255, 0.05); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 50%;
    transition: transform calc(var(--hamburger-animation-duration) * 1.3), border-color 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    filter: brightness(0.8);
}

.menu__toggle:hover {
    border-color: var(--clr-text);
}

.menu__listings {
    z-index: 10;
    position: absolute;
    top: calc(var(--menu-toggle-size) * -1);
    left: calc(var(--menu-toggle-size) * -1);
    width: calc(var(--menu-toggle-size) * 2);
    height: calc(var(--menu-toggle-size) * 2);
    border-radius: 50%;
    transform: scale(.1) rotate(180deg);
    transition: transform var(--hamburger-animation-duration);
}

.menu__arrow {
    visibility: hidden;
    position: absolute;
}

.menu__arrow input[type="radio"] {
    position: fixed;
    top: -99999px;
    left: -99999px;
}

.menu__arrow ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.menu__arrow--top {
    top: 0.5em;
    left: calc(var(--menu-toggle-size) + var(--arrow-size));
}

.menu__arrow--top .arrow {
    transform: rotate(-45deg);
}

.arrow {
    width: var(--arrow-size);
    height: var(--arrow-size);
    border-right: calc(var(--arrow-size) / 3) solid var(--clr-heading);
    border-top: calc(var(--arrow-size) / 3) solid var(--clr-heading);
    border-radius: 3px;
    transition: border-color .3s;
    cursor: pointer;
    pointer-events: auto;
}

.arrow:hover {
    border-color: var(--clr-text);
}

.circle {
    position: relative;
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    /* background-color: rgba(113, 113, 113, 0.3); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Dark semi-transparent bg for list */
    border-radius: 50%;
    transform: rotate(calc(var(--li-angle) * (var(--li-count) / 2 - 2)));
    overflow: hidden;
    list-style: none;
}

.circle li {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0 100%;
    background: transparent;
}

.circle li .placeholder {
    position: absolute;
    left: -100%;
    padding-top: 1.5em;
    width: 200%;
    height: 200%;
    text-align: center;
    transform: skewY(var(--skew-angle-content)) rotate(var(--li-angle-content));
}

.circle li .placeholder .upside {
    transform: rotate(180deg);
}

.circle li .placeholder a {
    text-decoration: none;
    pointer-events: auto;
}

.circle li .placeholder .button {
    font-size: 1.5em;
    /* Adjusted size */
    background-color: transparent;
    border: none;
    color: var(--clr-text);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.circle li .placeholder .button:active {
    transform: scale(1.2);
}

.circle li .placeholder .button:hover {
    color: var(--clr-text);
}

/* Unrolled loop for li rotation */
.circle li:nth-child(1) {
    transform: rotate(0deg) skewY(var(--skew-angle));
}

.circle li:nth-child(2) {
    transform: rotate(36deg) skewY(var(--skew-angle));
}

.circle li:nth-child(3) {
    transform: rotate(72deg) skewY(var(--skew-angle));
}

.circle li:nth-child(4) {
    transform: rotate(108deg) skewY(var(--skew-angle));
}

.circle li:nth-child(5) {
    transform: rotate(144deg) skewY(var(--skew-angle));
}

.circle li:nth-child(6) {
    transform: rotate(180deg) skewY(var(--skew-angle));
}

.circle li:nth-child(7) {
    transform: rotate(216deg) skewY(var(--skew-angle));
}

.circle li:nth-child(8) {
    transform: rotate(252deg) skewY(var(--skew-angle));
}

.circle li:nth-child(9) {
    transform: rotate(288deg) skewY(var(--skew-angle));
}

.circle li:nth-child(10) {
    transform: rotate(324deg) skewY(var(--skew-angle));
}

#menu__active {
    position: fixed;
    top: -99999px;
    left: -99999px;
}

#menu__active:checked~label .menu__listings {
    transform: rotate(-25deg) scale(1);
}

#menu__active:checked~label .menu__toggle {
    /* background-color: var(--clr-bg); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
}

#menu__active:checked~label .hamburger {
    border-color: transparent;
}

#menu__active:checked~label .hamburger:after {
    top: calc(var(--hamburger-height) * -1);
    border-color: var(--clr-text);
    transform: translateX(-50%) rotate(45deg);
}

#menu__active:checked~label .hamburger:before {
    bottom: calc(var(--hamburger-height) * -1);
    border-color: var(--clr-text);
    transform: translateX(-50%) rotate(-45deg);
}

#menu__active:checked~label .menu__arrow {
    visibility: visible;
    transition: all var(--hamburger-animation-duration) calc(var(--hamburger-animation-duration) / 0.9);
}

#menu__active:checked~label .menu__arrow--top label {
    display: none;
}

#menu__active:checked~label .menu__arrow--top label[for="degree--up-0"] {
    display: block;
}

#degree--up-0:checked~.menu__listings {
    transform: rotate(116deg);
}

#degree--up-0:checked~.menu__arrow--top label {
    display: none;
}

#degree--up-0:checked~.menu__arrow--top label[for="degree--up-1"] {
    display: block;
}

#degree--up-1:checked~.menu__listings {
    transform: rotate(224deg);
}

#degree--up-1:checked~.menu__arrow--top label {
    display: none;
}

#degree--up-1:checked~.menu__arrow--top label[for="degree--up-2"] {
    display: block;
}

/* --- Project Details CSS (Preserved) --- */
.project-header {
    margin-top: 4rem;
    text-align: center;
    margin-bottom: 4rem;
}

.project-header h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: var(--clr-heading);
}

.project-meta {
    font-size: 1.2rem;
    opacity: 0.8;
}

.content-blocks {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.blocks-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.content-block {
    width: 100%;
    margin-bottom: 2rem;
    padding: 0.5rem 0;
}



.block-text {
    max-width: 800px;
    margin: 0 auto;
    overflow-wrap: break-word;
    word-break: break-word;
}

.block-text .text-content {
    font-size: 1.1rem;
    line-height: 1.8;
}

.block-gallery {
    width: 100%;
    margin: 0;
    padding: 0;
}

.block-gallery .gallery-item {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: none;
    display: block;
}

.block-gallery .gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    border-radius: 0;
    filter: brightness(0.8) saturate(0.75);
}



.block-video .video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
}

.block-video .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.block-audio audio {
    width: 100%;
}

.block-file .file-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 4px;
    text-decoration: none;
    color: var(--clr-text);
}




/* Global Button Styles */
button,
.button {
    border: 0.25px solid var(--clr-heading);
    color: var(--clr-text);
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: border-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

button:hover,
.button:hover,
button:active,
.button:active {
    border-color: var(--clr-text);
}

/* ================================================
   PROJECT PAGE STYLES
   ================================================ */

/* Project Container & Header */
.project-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: 100vh;
}

.project-header {
    margin-bottom: 3rem;
    text-align: center;
}

.project-header h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 1rem;
    color: var(--clr-heading);
}

/* Project Navigation */
.project-nav {
    /* Container doesn't need layout as buttons are fixed */
    pointer-events: none;
    padding: 2rem 0rem;
}

.nav-btn {
    display: inline-flex;
    position: fixed;
    bottom: 2rem;
    z-index: 100;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    width: 50px;
    height: 50px;
    border: 1px groove var(--clr-border);
    border-radius: 50%;
    color: var(--clr-text);
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    filter: brightness(0.8);
    pointer-events: auto;
    /* Ensure clicks work */
}

.project-nav .nav-btn:first-child {
    left: 2rem;
}

.project-nav .nav-btn:last-child {
    right: 2rem;
}

.nav-btn:hover:not(.disabled) {
    border-color: var(--clr-text);
    transform: scale(1.1);
}

.nav-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.nav-btn .material-icons {
    font-size: 24px;
}

.project-meta {
    color: var(--clr-text);
}

.project-meta .date {
    font-size: 0.7rem;
    color: var(--clr-secondary);
    display: inline;
    margin-bottom: 1rem;
}

.project-meta .date-separator {
    font-size: 0.7rem;
    color: var(--clr-secondary);
    display: inline;
}

.project-meta .description {
    font-size: 1rem;
    max-width: 60ch;
    margin: 0 auto;
    line-height: 1.6;
}

/* Content Blocks */
.blocks-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.content-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    /* Mobile: 1 column */
    box-sizing: border-box;
}

.text-content {
    max-width: 72ch;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 1rem;
    color: var(--clr-text);
}

.text-content * {
    color: var(--clr-text);
}

.text-content p {
    margin-bottom: 1rem;
}

.text-content h2,
.text-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--clr-heading);
}

.text-content a {
    color: var(--clr-secondary);
    letter-spacing: -0.03rem;
    text-decoration: none;
    padding: 0rem 0.01rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: inline-block;
}

.text-content a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--clr-text);
}




/* Video Embed */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 0;
}

.video-wrapper iframe,
.video-wrapper mux-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Audio Player */
.audio-player {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.audio-player audio {
    width: 100%;
    max-width: 600px;
}

/* File Download */
.file-download {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 0.25px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: var(--clr-text);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.file-download:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--clr-text);
}

.file-download .material-icons {
    color: var(--clr-text);
    font-size: 1.25rem;
}


/* --- Site Footer --- */
.site-footer {
    text-align: center;
    padding: 0.2rem 1rem;
    margin-top: auto;
    color: var(--clr-text-muted);
    font-size: 0.9rem;
    border-top: 0.25px inset var(--clr-border);
}

.site-footer p {
    margin: 0.2rem 0;
    font-size: 0.7rem;
}

.site-footer a {
    color: var(--clr-text);
    text-decoration: none;
}


/* Ensure body uses flexbox to push footer to bottom */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}


/* --- Lightbox Styles --- */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(48, 48, 48, 0.2);
    /* Dark backdrop for focus */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.lightbox-overlay.active img {
    transform: scale(1);
}

/* Ensure gallery images show zoom cursor */
.gallery-item img {
    cursor: zoom-in;
    transition: transform 0.2s ease;
}

.gallery-item img:hover {
    transform: scale(1.02);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .project-container {
        padding: 1rem;
    }

}

@media (min-width: 768px) {
    .content-block {
        width: calc(50% - 1rem);
        /* Tablet: 2 columns */
    }
}

@media (min-width: 1200px) {
    .content-block {
        width: calc(33.333% - 1.34rem);
        /* Desktop: 3 columns */
    }
}