/* ═══════════════════════════════════════════════════════════
   TFN PORTFOLIO — MASTER STYLESHEET
   ═══════════════════════════════════════════════════════════
   
   Rules from design.txt:
   - Helvetica Neue, Regular, 28px, #000, 1.2em line-height
   - No gradients, no shadows, no different fonts/colours
   - All elements same corner radius (8px)
   - No separating lines unless specified
   - Background: #FFFFFF  Text: #000000  Cursor: #FFAF38
   ═══════════════════════════════════════════════════════════ */


/* ── RESET & TOKENS ─────────────────────────────────────── */

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

:root {
    --bg: #FFFFFF;
    --fg: #000000;
    --cursor: #FFAF38;
    --blue: #4A7AFF;
    --red: #C41E1E;

    --font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --text-size: 28px;
    --text-weight: 400;
    --text-lh: 1.2em;
    --radius: 8px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --speed-fast: 0.3s;
    --speed: 0.5s;
    --speed-slow: 0.8s;

    --nav-pad: 2.5rem;
    --sidebar-width: 10rem;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    line-height: var(--text-lh);
    color: var(--fg);
    background: var(--bg);
    cursor: none;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

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

::selection {
    background: var(--fg);
    color: var(--bg);
}

/* Hide custom cursor on touch */
@media (hover: none) and (pointer: coarse) {

    .cursor-dot,
    .cursor-bubble,
    .cursor-line {
        display: none !important;
    }

    body,
    a {
        cursor: auto;
    }
}


/* ── CUSTOM CURSOR ──────────────────────────────────────── */

.cursor-dot,
.cursor-bubble,
.cursor-line {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
}

/* Default: yellow circle */
.cursor-dot {
    width: 20px;
    height: 20px;
    background: var(--cursor);
    border-radius: 50%;
    transition: opacity var(--speed-fast) ease,
        transform var(--speed-fast) ease;
    opacity: 1;
}

/* Nav hover: pill bubble with text */
.cursor-bubble {
    background: var(--cursor);
    border-radius: 100px;
    padding: 8px 20px;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
    transition: opacity var(--speed-fast) var(--ease),
        transform var(--speed-fast) var(--ease);
}

#cursor-bubble-text {
    font-family: var(--font);
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    color: var(--fg);
    text-transform: lowercase;
}

/* Smaller label text in cursor bubble only when hovering artwork/photos */
body.cursor-artwork #cursor-bubble-text {
    font-size: 20px;
}

/* Paragraph hover: translucent coloured line */
.cursor-line {
    width: 2px;
    height: 28px;
    background: rgba(255, 175, 56, 0.6);
    border-radius: 1px;
    opacity: 0;
    mix-blend-mode: multiply;
    transition: opacity var(--speed-fast) ease;
}

/* ─ Cursor states ─ */

body.cursor-nav .cursor-dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
}

body.cursor-nav .cursor-bubble {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

body.cursor-text .cursor-dot {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
}

body.cursor-text .cursor-line {
    opacity: 1;
}

body.cursor-pressed .cursor-dot {
    transform: translate(-50%, -50%) scale(0.75);
}

body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-bubble,
body.cursor-hidden .cursor-line {
    opacity: 0 !important;
}

/* Darkroom hover in bottom nav — cursor turns red */
body.cursor-darkroom .cursor-dot {
    background: var(--red);
}


/* ── TOP NAVIGATION ─────────────────────────────────────── */

.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem var(--nav-pad);
    z-index: 500;
    /* Springy transition matching cursor feel */
    transition: width 0.6s var(--ease),
        flex-direction 0.6s var(--ease),
        padding 0.6s var(--ease),
        gap 0.6s var(--ease),
        right 0.6s var(--ease);
}

.top-nav-link {
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    line-height: var(--text-lh);
    color: var(--fg);
    text-transform: lowercase;
    /* Springy transition for position changes during morph */
    transition: opacity var(--speed-fast) ease,
        transform 0.6s var(--ease);
    white-space: nowrap;
    cursor: none;
    position: relative;
}

/* No underline animation — cursor handles hover feedback */
.top-nav-link::after {
    display: none;
}

/* Active page indicator — small yellow dot to the right of the link */
.top-nav-link.active::after {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--cursor);
    border-radius: 50%;
}

/* No separators */
.nav-sep {
    display: none;
}

/* ─ Sidebar mode (scrolled) ─ */

body.scrolled .top-nav {
    right: auto;
    width: var(--sidebar-width);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.3em;
    padding: 2rem 2rem;
    top: 0;
}

body.scrolled .top-nav-link {
    font-size: var(--text-size);
}

/* Sidebar mode: dot moves to left of text */
body.scrolled .top-nav-link.active::after {
    bottom: auto;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
}


/* ── BOTTOM NAVIGATION (footer, not fixed) ───────────── */

.bottom-nav {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem var(--nav-pad);
    z-index: 500;
    margin-top: auto;
}

.bottom-nav-item {
    position: relative;
    cursor: none;
    padding: 0.5rem 0;
}

/* Darkroom active indicator — red dot above the darkroom label */
body[data-page="darkroom"] #darkroom-item .bottom-nav-label::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--red);
    border-radius: 50%;
}

.bottom-nav-label {
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    line-height: var(--text-lh);
    color: var(--fg);
    text-transform: lowercase;
    transition: opacity var(--speed-fast) ease;
}

/* ─ Hover Bubbles ─ */

.hover-bubble {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    padding: 12px 22px;
    border-radius: var(--radius);
    font-size: var(--text-size);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    /* Delay hide so user can move cursor into the bubble */
    transition: opacity 0.25s var(--ease) 0.15s,
        transform 0.25s var(--ease) 0.15s;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

/* Bridge the gap between label and bubble so cursor can reach it */
.hover-bubble::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 0;
    right: 0;
    height: 16px;
}

.bottom-nav-item:hover .hover-bubble {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: all;
    /* Show immediately, no delay */
    transition-delay: 0s;
}

/* Grey bubble (name) */
.bubble-grey {
    background: #E8E8E8;
    color: #666;
    font-size: 16px;
}

/* Blue bubble (contact) — replaces text in-place, expands left */
.bubble-blue {
    background: var(--blue);
    color: #ffffff;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    bottom: auto;
    top: 50%;
    left: auto;
    right: 0;
    transform-origin: center right;
    transform: translateY(-50%) scale(0.85);
    border-radius: 100px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.bubble-blue .bubble-link {
    font-size: 28px;
}

#contact-item:hover .contact-label {
    opacity: 0;
}

#contact-item:hover .bubble-blue {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    pointer-events: all;
}

.bubble-link {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    transition: color var(--speed-fast) ease;
    cursor: none;
    /* Prevent width jump when email text expands */
    white-space: nowrap;
}

.bubble-link:hover {
    color: #ffffff;
}

/* Dark bubble (darkroom) — replaces text in-place */
.bubble-dark {
    background: #1a1a1a;
    color: var(--red);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.85);
    border-radius: 100px;
    padding: 10px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#darkroom-item:hover .darkroom-label {
    opacity: 0;
}

#darkroom-item:hover .bubble-dark {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: all;
}


/* ── HOME PAGE ──────────────────────────────────────────── */

.home {
    flex: 1;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 6rem var(--nav-pad);
}

.home-inner {
    display: flex;
    align-items: center;
    gap: 5rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    transition: transform var(--speed-slow) var(--ease);
}

.home-text {
    flex: 1;
    max-width: 580px;
    transition: transform var(--speed-slow) var(--ease);
}

.home-intro {
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    line-height: var(--text-lh);
    color: var(--fg);
}

.home-image {
    flex: 0 0 auto;
    width: 340px;
}

.home-image-inner {
    width: 100%;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

.home-image-placeholder {
    width: 100%;
    height: 100%;
    background: #F2F2F2;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-size);
    color: #CCC;
}

.home-photo {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
}

/* Scroll offset — text slides right to accommodate sidebar */
body.scrolled .home-inner {
    transform: translateX(calc(var(--sidebar-width) - var(--nav-pad)));
}


/* ── CV PAGE ────────────────────────────────────────────── */

.cv-page {
    flex: 1;
    padding: 7rem 0 6rem;
    max-width: 750px;
    margin: 0 auto;
    position: relative;
}

.cv-section {
    margin-bottom: 3rem;
}

.cv-section-title {
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    color: var(--fg);
    margin-bottom: 0.6rem;
    text-transform: none;
    letter-spacing: normal;
    border: none;
    padding: 0;
}

.cv-item {
    padding: 0.5rem 1.2rem;
    margin-bottom: 0;
    position: relative;
    border-radius: var(--radius);
    cursor: none;
    display: flex;
    gap: 2.5rem;
    align-items: baseline;
    /* NO padding in transition — padding changes cause layout reflow */
    transition: transform 0.35s var(--ease),
        background 0.35s var(--ease),
        color 0.35s var(--ease);
    transform-origin: center center;
    transform: perspective(800px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}

/* Items render ON TOP — don't shift other content.
   NO padding change here — only transform + background + color */
.cv-item.hovered {
    z-index: 100;
    position: relative;
    color: #fff;
}

.cv-item-date {
    font-size: 20px;
    font-weight: var(--text-weight);
    color: var(--fg);
    flex-shrink: 0;
    min-width: 5rem;
}

.cv-item-content {
    display: flex;
    flex-direction: column;
}

.cv-item-title {
    font-size: 20px;
    font-weight: var(--text-weight);
    color: var(--fg);
}

.cv-item-sub {
    font-size: 20px;
    font-weight: var(--text-weight);
    color: var(--fg);
}

/* ── 3D Pop-out ──
   Transforms rotate arbitrarily down the page.
   NO padding changes — only CSS transform. */

.cv-item:nth-of-type(11n+1).hovered { transform: perspective(400px) rotateZ(-8deg) rotateY(14deg) rotateX(5deg) scale(1.08); }
.cv-item:nth-of-type(11n+2).hovered { transform: perspective(400px) rotateZ(6deg) rotateY(-12deg) rotateX(-6deg) scale(1.07); }
.cv-item:nth-of-type(11n+3).hovered { transform: perspective(350px) rotateZ(-4deg) rotateY(-16deg) rotateX(8deg) scale(1.09); }
.cv-item:nth-of-type(11n+4).hovered { transform: perspective(400px) rotateZ(9deg) rotateY(10deg) rotateX(-4deg) scale(1.08); }
.cv-item:nth-of-type(11n+5).hovered { transform: perspective(350px) rotateZ(-7deg) rotateY(-8deg) rotateX(10deg) scale(1.1); }
.cv-item:nth-of-type(11n+6).hovered { transform: perspective(400px) rotateZ(10deg) rotateY(6deg) rotateX(-7deg) scale(1.08); }
.cv-item:nth-of-type(11n+7).hovered { transform: perspective(300px) rotateZ(-5deg) rotateY(18deg) rotateX(6deg) scale(1.09); }
.cv-item:nth-of-type(11n+8).hovered { transform: perspective(400px) rotateZ(7deg) rotateY(-14deg) rotateX(-8deg) scale(1.07); }
.cv-item:nth-of-type(11n+9).hovered { transform: perspective(350px) rotateZ(-10deg) rotateY(12deg) rotateX(4deg) scale(1.1); }
.cv-item:nth-of-type(11n+10).hovered { transform: perspective(400px) rotateZ(5deg) rotateY(-10deg) rotateX(9deg) scale(1.08); }
.cv-item:nth-of-type(11n+11).hovered { transform: perspective(350px) rotateZ(-6deg) rotateY(15deg) rotateX(-5deg) scale(1.09); }

/* Override text colour inside hovered item */
.cv-item.hovered .cv-item-date,
.cv-item.hovered .cv-item-title,
.cv-item.hovered .cv-item-sub {
    color: inherit;
}

/* ── CV Description Box ── */

.cv-description-box {
    position: fixed;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    padding: 1.5rem;
    border-radius: var(--radius);
    font-size: 16px;
    font-weight: var(--text-weight);
    line-height: 1.5;
    color: #fff;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease),
        transform 0.3s var(--ease),
        background 0.3s var(--ease);
    z-index: 50;
}

.cv-description-box.visible {
    opacity: 1;
    pointer-events: all;
}


/* ── WORKSHOP PAGE ──────────────────────────────────────── */

.workshop-page {
    flex: 1;
    padding: 12vh 0 10vh;
    position: relative;
    background: var(--bg);
}

/* Left-aligned project list */
.workshop-list {
    width: min(36vw, 420px);
    padding: 0 2rem 0 4rem;
    position: relative;
    z-index: 2;
}

.workshop-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding: 1rem 1.2rem;
    border-radius: var(--radius);
    cursor: none;
    position: relative;
    transition: transform 0.5s var(--ease),
        background 0.35s var(--ease),
        color 0.35s var(--ease);
}

.workshop-item.hovered {
    background: var(--fg);
    color: var(--bg);
    transform: translateX(8px);
    z-index: 5;
}

.workshop-item-title {
    font-size: 20px;
    font-weight: var(--text-weight);
    color: inherit;
}

.workshop-item-date {
    font-size: 20px;
    font-weight: var(--text-weight);
    color: inherit;
    opacity: 0.6;
    flex-shrink: 0;
}

/* ── Workshop Hover Preview (cover + tags, top-aligned to list) ── */

.workshop-preview {
    position: fixed;
    top: 12vh;
    left: min(36vw, 420px);
    right: auto;
    transform: translateX(16px);
    width: min(52vw, 780px);
    max-height: calc(88vh - 4rem);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease),
        transform 0.5s var(--ease);
    z-index: 40;
}

.workshop-preview.visible {
    opacity: 1;
    transform: translateX(0);
}

.workshop-preview-cover {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    border-radius: var(--radius);
    object-fit: contain;
    display: block;
    background: #F5F5F5;
}

.workshop-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.workshop-preview-tag {
    font-size: 14px;
    padding: 6px 14px;
    border-radius: 100px;
    background: #F2F2F2;
    color: var(--fg);
}

/* ── Workshop Lightbox (click-through) ── */

.workshop-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
    display: flex;
    flex-direction: column;
    padding: 5rem 2rem 2rem;
}

.workshop-lightbox.visible {
    opacity: 1;
    pointer-events: all;
}

.workshop-lightbox-close {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 32px;
    line-height: 1;
    color: var(--fg);
    cursor: none;
    border-radius: 50%;
    transition: background 0.3s var(--ease);
}

.workshop-lightbox-close:hover {
    background: #F0F0F0;
}

.workshop-lightbox-inner {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    flex: 1;
    overflow: hidden;
    transform: translateY(16px);
    transition: transform 0.5s var(--ease);
}

.workshop-lightbox.visible .workshop-lightbox-inner {
    transform: translateY(0);
}

.workshop-lightbox-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    flex: 1;
    min-height: 0;
}

.workshop-lightbox-strip::-webkit-scrollbar {
    display: none;
}

.workshop-lightbox-strip img {
    height: 100%;
    width: auto;
    max-height: 60vh;
    object-fit: contain;
    border-radius: var(--radius);
    scroll-snap-align: center;
    flex-shrink: 0;
    display: block;
    -webkit-user-select: none;
    user-select: none;
}

.workshop-lightbox-body {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    width: 100%;
}

.workshop-lightbox-title {
    font-size: var(--text-size);
    font-weight: var(--text-weight);
    margin: 0 0 0.6rem;
    color: var(--fg);
    text-transform: lowercase;
}

.workshop-lightbox-desc {
    font-size: 18px;
    line-height: 1.55;
    color: var(--fg);
    white-space: pre-line;
    margin: 0;
    opacity: 0.85;
}


/* ── MUSEUM PAGE ────────────────────────────────────────── */

.museum-page {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg);
    position: relative;
}

.gallery {
    display: flex;
    align-items: center;
    height: 100vh;
    padding: 0 calc(50vw - 175px);
    gap: 5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    perspective: 1200px;
    cursor: none;
    position: relative;
}

.gallery::-webkit-scrollbar {
    display: none;
}


.artwork-frame {
    flex-shrink: 0;
    width: 350px;
    background: #F2F2F2;
    border-radius: var(--radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    scroll-snap-align: center;
    transition: transform var(--speed-slow) var(--ease), opacity var(--speed-slow) var(--ease);
    cursor: none;
    opacity: 0.4;
    transform: scale(0.9);
}

.artwork-frame.active {
    opacity: 1;
    transform: scale(1);
}

.artwork-frame.active:hover {
    transform: scale(1) translateZ(30px) rotateY(-2deg);
}

.artwork-image {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    display: block;
    -webkit-user-select: none;
    user-select: none;
}

.artwork-space {
    flex: 1;
    background: #E8E8E8;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-size);
    color: #CCC;
}

.artwork-frame {
    -webkit-user-select: none;
    user-select: none;
}



@keyframes hintSlide {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(6px);
    }
}


/* ── DARKROOM PAGE ──────────────────────────────────────── */

body[data-page="darkroom"] {
    --bg: #0a0a0a;
    --fg: #f0f0f0;
    --cursor: var(--red);
    background: var(--bg);
    color: var(--fg);
}

body[data-page="darkroom"] ::selection {
    background: var(--red);
    color: #fff;
}

body[data-page="darkroom"] .cursor-dot {
    background: var(--red);
}

body[data-page="darkroom"] .cursor-bubble {
    background: var(--red);
}

body[data-page="darkroom"] .cursor-line {
    background: rgba(196, 30, 30, 0.5);
}

.darkroom-page {
    flex: 1;
    padding: 7rem var(--nav-pad) 6rem;
    background: var(--bg);
}

.darkroom-page .cv-header h1 {
    color: var(--fg);
    text-transform: lowercase;
}

.darkroom-page .cv-header h1 em {
    color: var(--red);
    font-style: normal;
}

/* Carousel Container */
.coverflow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 60vh;
    margin-top: 4rem;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 4rem;
    cursor: none;
    perspective: 1200px;
    transform-style: preserve-3d;
}

.coverflow::-webkit-scrollbar {
    display: none;
}

/* Base Carousel Item */
.cover-item {
    flex-shrink: 0;
    background: #1a1a1a;
    border-radius: var(--radius);
    margin: 0 -40px;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), z-index 0s, border-color 0.6s ease, margin 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(196, 30, 30, 0.1);
    transform: rotateY(-40deg) scale(0.9);
    overflow: hidden;
}

/* Fixed height = same as landscape width (300px) so portrait images
   never tower above landscape ones. Width is auto to preserve ratio. */
.cover-image {
    height: 300px;
    width: auto;
    display: block;
    border-radius: var(--radius);
}

.cover-placeholder {
    height: 300px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-size);
    color: #444;
}

/* Hovered Item */
.cover-item:hover {
    transform: rotateY(0deg) scale(1) translateY(-40px) translateZ(30px);
    z-index: 100;
    margin: 0 40px;
    border-color: var(--red);
    border-width: 3px;
}

/* Darkroom nav overrides */
body[data-page="darkroom"] .top-nav-link {
    color: rgba(255, 255, 255, 0.5);
}

body[data-page="darkroom"] .top-nav-link:hover {
    color: var(--red);
}

body[data-page="darkroom"] .bottom-nav-label {
    color: rgba(255, 255, 255, 0.3);
}

body[data-page="darkroom"] .bottom-nav-item:hover .bottom-nav-label {
    color: var(--red);
}

body[data-page="darkroom"] .bubble-dark {
    background: var(--red);
    color: #fff;
}

/* Darkroom: antigravity hover box → dark red */
body[data-page="darkroom"] .bubble-grey {
    background: #3a0a0a;
    color: var(--red);
}

/* Darkroom: contact bubble → dark red */
body[data-page="darkroom"] .bubble-blue {
    background: #3a0a0a;
    color: var(--red);
}

body[data-page="darkroom"] .bubble-link {
    color: rgba(196, 30, 30, 0.7);
}

body[data-page="darkroom"] .bubble-link:hover {
    color: var(--red);
}


/* ── PAGE LOAD ──────────────────────────────────────────── */

body {
    opacity: 0;
    animation: pageIn 0.5s ease 0.1s forwards;
}

@keyframes pageIn {
    to {
        opacity: 1;
    }
}


/* ── BURGER MENU (mobile only) ──────────────────────────── */

.burger {
    display: none;
    position: fixed;
    top: 1.2rem;
    right: 1.2rem;
    width: 48px;
    height: 48px;
    background: transparent;
    border: none;
    padding: 12px;
    z-index: 600;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
}

.burger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--fg);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background 0.3s var(--ease);
    transform-origin: center;
}

/* Burger X when open */
body.nav-open .burger span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
body.nav-open .burger span:nth-child(2) {
    opacity: 0;
}
body.nav-open .burger span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* Darkroom: red burger */
body[data-page="darkroom"] .burger span {
    background: var(--red);
}


/* ── RESPONSIVE ─────────────────────────────────────────── */

@media (max-width: 768px) {
    :root {
        --text-size: 20px;
        --nav-pad: 1.2rem;
    }

    /* Burger visible, desktop nav morphs into full-screen overlay */
    .burger {
        display: flex;
    }

    .top-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 5rem 2rem 2.5rem;
        background: var(--bg);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        transform: translateY(-100%);
        transition: transform 0.4s var(--ease);
        z-index: 550;
    }

    body.nav-open .top-nav {
        transform: translateY(0);
    }

    /* Disable the scrolled→sidebar morph on mobile */
    body.scrolled .top-nav {
        width: 100%;
        flex-direction: column;
        padding: 5rem 2rem 2.5rem;
        right: 0;
    }

    .top-nav-link {
        font-size: 28px;
    }

    /* In the mobile overlay the nav is a column of left-aligned rows,
       so the dot sits to the right of each label just like desktop. */
    .top-nav-link.active::after {
        right: -18px;
        top: 50%;
        transform: translateY(-50%);
    }

    /* Darkroom mobile nav: dark overlay, red links */
    body[data-page="darkroom"] .top-nav {
        background: #0a0a0a;
    }

    /* Hide custom cursor entirely on touch */
    .cursor-dot, .cursor-bubble, .cursor-line {
        display: none !important;
    }


    /* ── HOME (mobile) ── */
    .home-inner {
        flex-direction: column;
        gap: 3rem;
    }
    .home-text { max-width: 100%; }
    .home-image { width: 100%; }
    body.scrolled .home-inner { transform: none; }


    /* ── CV (mobile — scroll-triggered instead of hover) ── */
    .cv-page {
        padding: 8rem 1.2rem 4rem;
    }

    .cv-section {
        margin-bottom: 2rem;
    }

    .cv-item {
        flex-direction: column;
        gap: 0.3rem;
        padding: 1rem 1.2rem;
        /* Transition kept same as desktop so scroll-in animation feels identical */
    }

    /* Hide the fixed side description box — use inline description instead */
    .cv-description-box {
        display: none !important;
    }


    /* ── MUSEUM (mobile — vertical stack) ── */
    .museum-page {
        overflow: visible;
    }

    .gallery {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        height: auto;
        padding: 7rem 1.2rem 4rem;
        overflow: visible;
        scroll-snap-type: none;
        perspective: none;
    }

    .artwork-frame {
        width: 100%;
        max-width: 560px;
        opacity: 1;
        transform: none;
        padding: 1rem;
        height: auto;
    }

    .artwork-frame.active,
    .artwork-frame.active:hover,
    .artwork-frame:hover {
        transform: none;
    }

    .artwork-image {
        width: 100%;
        height: auto;
    }

    /* Show labels under images on mobile (no hover cursor bubble) */
    .artwork-frame::after {
        content: attr(data-artwork-label);
        display: block;
        font-size: 14px;
        color: var(--fg);
        opacity: 0.7;
        margin-top: 0.8rem;
        text-align: left;
    }


    /* ── DARKROOM (mobile — vertical stack) ── */
    .darkroom-page {
        padding: 7rem 1.2rem 4rem;
    }

    .coverflow {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        height: auto;
        padding: 0;
        margin-top: 0;
        overflow: visible;
        perspective: none;
        transform-style: flat;
    }

    .cover-item {
        margin: 0;
        transform: none;
        border: none;
        background: transparent;
        max-width: 560px;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
        display: block;
    }

    .cover-item:hover {
        transform: none;
        margin: 0;
        border: none;
    }

    .cover-image {
        height: auto;
        width: 100%;
        border-radius: var(--radius);
    }

    /* Labels under photos — like museum */
    .cover-item::after {
        content: attr(data-photo-label);
        display: block;
        font-size: 14px;
        color: var(--fg);
        opacity: 0.7;
        margin-top: 0.8rem;
        text-align: left;
    }


    /* ── WORKSHOP (mobile — tap-to-expand inline) ── */
    .workshop-page {
        padding: 8rem 1.2rem 4rem;
        display: block;
    }

    .workshop-list {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .workshop-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
        padding: 1rem 1.2rem;
        transition: background 0.35s var(--ease), color 0.35s var(--ease);
    }

    .workshop-item.hovered,
    .workshop-item.expanded {
        background: var(--fg);
        color: var(--bg);
        transform: none;
    }

    /* Hide fixed side preview; use inline mobile expansion instead */
    .workshop-preview {
        display: none !important;
    }

    /* Expanded content lives as a sibling div injected by JS */
    .workshop-item-expanded {
        display: none;
        padding: 1rem 1.2rem 2rem;
        border-radius: var(--radius);
    }

    .workshop-item.expanded + .workshop-item-expanded {
        display: block;
    }

    .workshop-item-expanded img {
        width: 100%;
        height: auto;
        border-radius: var(--radius);
        display: block;
        margin-bottom: 1rem;
    }

    .workshop-item-tags-inline {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .workshop-item-tags-inline .workshop-preview-tag {
        font-size: 13px;
        padding: 5px 12px;
    }


    /* ── LIGHTBOX (mobile — vertical scroll) ── */
    .workshop-lightbox {
        padding: 4rem 1rem 1rem;
        overflow-y: auto;
    }

    .workshop-lightbox-inner {
        flex-direction: column;
        height: auto;
    }

    .workshop-lightbox-strip {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: visible;
        height: auto;
        width: 100%;
        gap: 1rem;
    }

    .workshop-lightbox-strip img {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .workshop-lightbox-title {
        font-size: 22px;
    }

    .workshop-lightbox-desc {
        font-size: 15px;
    }


    /* ── BOTTOM NAV (mobile — stacked list, no hover bubbles) ── */
    .bottom-nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem 1.2rem 2rem;
        gap: 0.8rem;
    }

    .bottom-nav-item {
        width: 100%;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    .bottom-nav-label {
        font-size: 18px;
    }

    /* Drop the floating-bubble behaviour — show children inline, always.
       Selectors below are bumped to :not(:hover) plus :hover so they
       win against `.bottom-nav-item:hover .hover-bubble` (0,2,1). */
    .bottom-nav-item .hover-bubble,
    .bottom-nav-item:hover .hover-bubble {
        position: static;
        transform: none !important;
        opacity: 1;
        pointer-events: auto;
        padding: 0;
        background: transparent;
        color: inherit;
        white-space: normal;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.3rem;
        transition: none !important;
    }

    /* No movement or fades anywhere in the mobile footer. */
    .bottom-nav,
    .bottom-nav *,
    .bottom-nav-item,
    .bottom-nav-label,
    .hover-bubble,
    .bubble-link {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Kill the bubble backgrounds on mobile (dark-red squircle on darkroom
       page was leaking through due to higher-specificity rules). */
    .hover-bubble,
    body[data-page="darkroom"] .hover-bubble {
        background: transparent !important;
    }

    /* Darkroom page: name + "made with antigravity" share the same red,
       and the "enter darkroom" item is hidden since you're already here. */
    body[data-page="darkroom"] .bottom-nav-label,
    body[data-page="darkroom"] #name-bubble {
        color: var(--red) !important;
        opacity: 1 !important;
    }

    body[data-page="darkroom"] #darkroom-item {
        display: none;
    }

    .hover-bubble::after {
        display: none;
    }

    /* Name "made with antigravity" shown inline, muted */
    #name-bubble {
        font-size: 13px;
        opacity: 0.55;
    }

    /* Darkroom: label becomes the tappable link target */
    #darkroom-item .darkroom-label {
        display: none;
    }
    #darkroom-bubble {
        font-size: 18px;
        text-decoration: none;
        color: var(--fg);
    }
    #darkroom-bubble span {
        font-size: 18px;
    }

    /* Contact: each social is a plain, always-visible tap target */
    #contact-item .contact-label {
        display: none;
    }
    #contact-bubble .bubble-link {
        font-size: 18px;
        padding: 0.2rem 0;
        color: var(--fg);
        text-decoration: none;
    }
}


/* ── TOUCH-ONLY OVERRIDES (no hover, coarse pointer) ────── */

@media (hover: none) and (pointer: coarse) {
    /* Custom cursor disabled (already in mobile block but also applies to tablets) */
    .cursor-dot, .cursor-bubble, .cursor-line {
        display: none !important;
    }

    /* CV items: remove hover-dependent transforms */
    .cv-item:hover { transform: none; }

    /* Workshop: no hover preview on touch even at desktop width */
    .workshop-item:hover { background: transparent; color: inherit; transform: none; }
}