/* === @font-face Definitions (Local Fonts) === */
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-Thin.ttf') format('truetype');font-weight: 100;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-ThinItalic.ttf') format('truetype');font-weight: 100;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-ExtraLight.ttf') format('truetype');font-weight: 200;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-ExtraLightItalic.ttf') format('truetype');font-weight: 200;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-Light.ttf') format('truetype');font-weight: 300;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-LightItalic.ttf') format('truetype');font-weight: 300;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-Regular.ttf') format('truetype');font-weight: 400;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-Italic.ttf') format('truetype');font-weight: 400;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-Medium.ttf') format('truetype');font-weight: 500;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-MediumItalic.ttf') format('truetype');font-weight: 500;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-SemiBold.ttf') format('truetype');font-weight: 600;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-SemiBoldItalic.ttf') format('truetype');font-weight: 600;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-Bold.ttf') format('truetype');font-weight: 700;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Sans Local';src: url('../fonts/IBMPlexSans-BoldItalic.ttf') format('truetype');font-weight: 700;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-Thin.ttf') format('truetype');font-weight: 100;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-ThinItalic.ttf') format('truetype');font-weight: 100;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-ExtraLight.ttf') format('truetype');font-weight: 200;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-ExtraLightItalic.ttf') format('truetype');font-weight: 200;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-Light.ttf') format('truetype');font-weight: 300;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-LightItalic.ttf') format('truetype');font-weight: 300;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-Regular.ttf') format('truetype');font-weight: 400;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-Italic.ttf') format('truetype');font-weight: 400;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype');font-weight: 500;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-MediumItalic.ttf') format('truetype');font-weight: 500;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-SemiBold.ttf') format('truetype');font-weight: 600;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-SemiBoldItalic.ttf') format('truetype');font-weight: 600;font-style: italic;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-Bold.ttf') format('truetype');font-weight: 700;font-style: normal;font-display: swap;}
@font-face {font-family: 'IBM Plex Mono Local';src: url('../fonts/IBMPlexMono-BoldItalic.ttf') format('truetype');font-weight: 700;font-style: italic;font-display: swap;}

/* === Universal Box Sizing === */
*, *::before, *::after {
    box-sizing: border-box;
}

/* === CSS Variables === */
:root {
    /* KEYCHAIN DISABLED: Uncomment below to restore 3D keychain column width */
    /* --keychain-column-width: 500px; */
    --keychain-column-width: 0px; /* Set to 0 to hide keychain column */
    --column-gap: 0px;
    --font-primary: 'IBM Plex Sans Local', sans-serif;
    --font-mono: 'IBM Plex Mono Local', monospace;
    --color-dark-grey: #333333;
    --color-grey: #757575;
    --color-light-grey: #CBCBCB;
    --color-eggshell: #ECECEC;
    --color-off-white: #F8F8F8;
    --color-blood-red: #AF0100;
    --color-peach: #F0ECE5;
    --color-yolk: #F7A303;
    --color-off-black: #0D0D0D;
    --color-link-telegram: #0088cc;
    --tag-blue-bg: #E3F2FD;
    --tag-blue-text: #1967D2;
    --footer-quote-max-width: 400px; /* Max width before quote wraps to multiple lines */
    --tag-green-bg: #E6F4EA;
    --tag-green-text: #188038;
    --tag-red-bg: #FCE8E6;
    --tag-red-text: #C5221F;
    --tag-yellow-bg: #FEF7E0;
    --tag-yellow-text: #EA8600;
    --tag-purple-bg: #F3E8FD;
    --tag-purple-text: #6A1B9A;
    --color-link-email: #D9534F;
    --color-link-linkedin: #0275D8;
    --color-link-instagram: #E65100;
    --sidebar-width: 225px; /* 75% of 300px */
    --content-padding-sides: 50px;
    /* Separator thickness - change these values to adjust all separator lines */
    --separator-thickness: 1.5px; /* Horizontal separator lines (project-separator-line, article-separator-line, etc.) */
    --separator-vertical-thickness: 1.5px; /* Vertical separators (meta-separator, etc.) */
    --standard-content-max-width: 1000px;
    --standard-presentation-max-width: 960px;
    --content-max-width: 2160px;
    --content-padding-top: 30px;
    --content-padding-sides: 50px; /* Default for desktop */
    --project-card-text-max-width: 550px;
    --project-card-image-area-ideal-width:950px;
    --nav-link-font-size-active-hover: 1.3rem;
    --nav-link-font-weight-active-hover: 700;
    --nav-link-font-size-tier1: 1.25rem;
    --nav-link-font-weight-tier1: 700;
    --nav-link-font-size-tier2: 0.82rem;
    --nav-link-font-weight-tier2: 600;
    --nav-link-font-size-tier3: 0.75rem;
    --nav-link-font-weight-tier3: 500;
    --nav-link-color-active: #333333;
    --nav-link-color-inactive: #757575;
    --nav-link-transition-duration: 0.20s;

    /* Vars for intermediate desktop/large tablet */
    --sidebar-width-large-tablet: 187.5px; /* 75% of 250px */ 
    --content-padding-sides-large-tablet: 30px;

    --sidebar-width-tablet: 165px; /* 75% of 220px */
    --content-padding-sides-tablet: 20px;

    /* Mobile specific variables (these are fine) */
    --mobile-header-height: 60px;
    --mobile-logo-height: 35px; 
    --content-padding-sides-mobile: 20px; 
}

/* === Resets & Base === */
*,*::before,*::after {box-sizing: border-box;margin: 0;padding: 0;}
html {scroll-behavior: smooth;font-size: 16px;overflow-x: hidden;}
body {font-family: var(--font-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 400;line-height: 1.6;background-color: var(--color-off-white);color: var(--color-grey);-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;min-height: 100vh;display: flex;flex-direction: column;overflow-x: hidden;}
a {color: var(--color-dark-grey);text-decoration: none;}
a:hover {text-decoration: underline;}
img {max-width: 100%;height: auto;display: block;}

/* === Site Wrapper & Desktop Sidebar === */
/* Max width for entire layout (sidebar + content) to prevent awkward ultra-wide layouts */
.site-wrapper {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    width: 100%;
    max-width: calc(var(--sidebar-width) + var(--standard-content-max-width) + var(--content-padding-sides) * 2);
    margin: 0 auto; /* Center the entire layout on wide screens */
}
.sidebar {
    width: var(--sidebar-width);
    background-color: var(--color-off-white);
    border-right: var(--separator-thickness) solid var(--color-eggshell);
    height: 100vh;
    position: fixed;
    top: 0;
    /* On ultra-wide screens, offset sidebar to align with centered content max-width */
    /* On normal/narrow screens (< max layout width), sidebar stays at left: 0 */
    left: max(0px, calc((100vw - var(--sidebar-width) - var(--standard-content-max-width) - var(--content-padding-sides) * 2) / 2));
    padding: 40px 35px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    flex-shrink: 0;
}
.sidebar-content { flex-grow: 1; }
.sidebar-footer-content {
    margin-top: auto;
    padding-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.sidebar-footer {
    margin-top: 0;
    padding-top: 25px;
    border-top: var(--separator-thickness) solid var(--color-eggshell);
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    color: var(--color-light-grey) !important;
    line-height: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.sidebar .logo #lottie-logo-container {
    width: 85px;
    height: 85px;
    cursor: pointer;
    margin-top: -17.5px;
    margin-left: -10px;
    /* Static logo fallback while Lottie loads */
    background-image: url('/SVG/logo.svg');
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
}

.sidebar .logo #lottie-logo-container:not(:empty) {
    /* Hide background once Lottie content loads */
    background-image: none;
}

.main-nav a {
    display: block;
    font-family: var(--font-primary);
    font-weight: var(--nav-link-font-weight-tier3);
    font-size: var(--nav-link-font-size-tier3);
    color: var(--nav-link-color-inactive);
    padding: 10px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-decoration: none !important;
    transition: color var(--nav-link-transition-duration) ease, font-size var(--nav-link-transition-duration) ease, font-weight var(--nav-link-transition-duration) ease;
}

.main-nav a:hover {
    text-decoration: none !important;
}

.main-nav a.nav-link-active {
    color: var(--nav-link-color-active);
    font-size: var(--nav-link-font-size-tier1);
    font-weight: var(--nav-link-font-weight-tier1);
}

.main-content-area {
    margin-left: var(--sidebar-width);
    padding: var(--content-padding-top) var(--content-padding-sides) 0 var(--content-padding-sides);
    flex: 1;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Center content on large screens */
    align-items: center;
    /* Ensure content area fills available width and doesn't overflow */
    width: calc(100% - var(--sidebar-width));
    max-width: calc(100vw - var(--sidebar-width));
    box-sizing: border-box;
}

.main-content-area>*:not(.site-footer):not(.project-detail) {
    flex: 0 0 auto;
    width: 100%;
    max-width: 1400px;
}
.main-content-area > .site-footer {
    margin-top: auto;
    width: 100%;
    max-width: 1400px;
}


/* === Content Styles (Presentation Card, Section Separator, Project Cards, Category Page, etc.) === */
/* ... (These are from your provided CSS, assumed correct for desktop) ... */
.presentation-card { max-width: var(--standard-presentation-max-width); }
.presentation-card h1 { font-family: var(--font-primary); font-weight: 700; font-style: italic; font-size: 2.5rem; color: var(--color-dark-grey); margin-bottom: 5px; line-height: 1.2; letter-spacing: -0.04em; }
.presentation-card .name-subtitle { font-family: var(--font-primary); font-weight: 700; font-style: italic; font-size: 1.1rem; color: var(--color-light-grey); margin-left: 8px; vertical-align: baseline; letter-spacing: -0.01em; }
.presentation-card .roles { font-family: var(--font-primary); font-weight: 700; font-size: .9rem; color: var(--color-grey); text-transform: uppercase; letter-spacing: 0.2em; margin-top: 10px; margin-bottom: 30px; max-width: 900px; }
.presentation-card .bio { font-family: var(--font-primary); font-weight: 400; font-size: 0.9rem; line-height: 1.7; color: var(--color-grey); margin-bottom: 12px; }
.presentation-card .bio strong, .presentation-card .bio .bio-semibold { font-weight: 600; color: var(--color-grey); }
.presentation-card .bio .bio-link-external { font-weight: 600; font-style: italic; color: var(--color-grey); text-decoration: underline; text-underline-offset: 2px; }
.presentation-card .bio .bio-link-external:hover { color: var(--color-grey); }
.presentation-card .bio .bio-medium-italic { font-weight: 500; font-style: italic; color: var(--color-grey); }
.presentation-card .bio.bio-clients { font-weight: 500; }
.presentation-card .bio.bio-italic { font-style: italic; }
.contact-sentence { margin-top: 20px; }
.bio-link-telegram { color: var(--color-link-telegram); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.bio-link-telegram:hover { color: #0077b5; }
.bio-link { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding: 0.1em; }
.bio-link .emoji { margin-right: 0.3em; font-style: normal; }
.bio-link-email { color: var(--color-link-email); }
.bio-link-linkedin { color: var(--color-link-linkedin); }
.bio-link-instagram { color: var(--color-link-instagram); }
.emoji-with-shadow { text-shadow: 0px 2px 6.5px rgba(0, 0, 0, 0.15); }
.section-separator { display: flex; align-items: center; max-width: var(--standard-content-max-width); padding-top: 20px; padding-bottom: 10px; margin-bottom: 0; }
.section-separator>span { font-family: var(--font-mono); font-weight: 500; font-style: italic; font-size: 1rem; text-transform: none; letter-spacing: normal; padding-right: 15px; color: var(--color-grey); white-space: nowrap; }
.section-separator .separator-name { font-family: var(--font-mono); font-weight: 700; font-style: italic; color: var(--color-grey); }
.section-separator::before { content: none; }
.section-separator::after { content: ''; flex-grow: 1; height: var(--separator-thickness); background-color: var(--color-eggshell); }
.latest-work-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
    max-width: var(--standard-content-max-width);
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Clip carousel overflow */
}

/* === PROJECT CARD === */
.project-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 32px;
    padding: 20px 0;
    margin: 0;
    border-bottom: var(--separator-thickness) solid var(--color-eggshell);
    max-width: var(--standard-content-max-width);
    /* Ensure card doesn't overflow viewport on narrow screens */
    width: 100%;
    box-sizing: border-box;
}

.project-card:first-child,
.latest-work-grid > :first-child .project-card {
    padding-top: 0;
}

.project-card:last-child {
    border-bottom: none;
}

/* Article card variant - horizontal layout matching Figma */
.article-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-card.article-card {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 20px 0;
    border-bottom: var(--separator-thickness) solid var(--color-eggshell);
    max-width: var(--standard-content-max-width);
}

/* Author Avatar */
.article-card-avatar {
    width: 51px;
    height: 51px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.article-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Main Content Section (Title + Meta) */
.article-card-main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}
.article-card-title {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--color-dark-grey);
    margin: 0;
    line-height: 1.3;
}

/* Meta Row (Tags + Reading Time) */
.article-card-meta {
    display: flex;
    align-items: center;
    gap: 15px;
}
.article-card-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.article-tag {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.675rem;
    letter-spacing: 0.05em;
    padding: 6px 6px;
    border-radius: 18px;
    line-height: normal;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    background-color: rgba(117, 117, 117, 0.2);
    color: #757575;
}
.article-card-reading-time {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 300;
    color: var(--color-dark-grey);
    white-space: nowrap;
}

/* Vertical Separator */
.article-card-separator {
    width: 0.5px;
    align-self: stretch;
    background-color: var(--color-eggshell);
    flex-shrink: 0;
}

/* Description - matches .project-description styling */
.article-card-description {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-grey);
    margin: 0;
    flex: 1;
}

/* Content Area - Left Side */
.project-card-content {
    flex: 0 0 var(--project-card-text-max-width);
    max-width: var(--project-card-text-max-width);
    min-width: 300px;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.project-category-tag {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.075rem;
    padding: 4px 10px;
    border-radius: 15px;
    line-height: 1.2;
    text-transform: uppercase;
    background-color: #ECECEC;
    color: #757575;
    margin-right: 12px;
    min-width: 70px;
    text-align: center;
    vertical-align: top; /* Keep tag aligned to top when title wraps */
}

.project-card-content h3 {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1.05rem;
    color: #333333;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.project-card-content h3 a {
    display: inline; /* Ensure link flows inline with tag */
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease;
    vertical-align: top; /* Align with tag baseline */
}

.project-card-content h3 a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

.project-card-content .project-description {
    font-family: var(--font-primary);
    font-weight: 300;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--color-grey);
    margin: 0 0 16px 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: calc(1.05rem * 1.6 * 3);
}

.project-card-content .project-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
    padding: 0;
}

.project-card-content .project-meta-info {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.project-card-content .project-role-meta,
.project-card-content .project-read-time-meta {
    font-family: var(--font-primary);
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-grey);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
}

.project-card-content .project-role-meta .role-text-wrapper {
    display: inline-block;
    overflow: hidden;
    max-width: 200px;
    vertical-align: bottom;
}

.project-card-content .project-role-meta .role-text {
    display: inline-block;
    animation: scroll-text 12s linear infinite;
    will-change: transform;
}

@keyframes scroll-text {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.project-card-content .project-role-meta:hover .role-text {
    animation-play-state: paused;
}

.project-card-content .project-meta-info .meta-label {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.5em;
    color: var(--color-light-grey);
}

.project-card-content .project-tags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.project-card-content .project-tags .tag {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.075rem;
    padding: 4px 10px;
    border-radius: 15px;
    margin: 0;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Image Placeholder - Right Side */
.project-card > .project-card-image-placeholder {
    flex: 1 1 auto;
    min-width: 0;
    /* No max-width - let it fill remaining space after text content */
    height: 158px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* Carousel Track - Inner wrapper for animation */
.project-card > .project-card-image-placeholder > .carousel-track {
    display: flex;
    flex-direction: row;
    gap: 8px;
    animation: scroll-left 20s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Disable animation when only 1 image (no carousel needed) */
.project-card > .project-card-image-placeholder > .carousel-track.no-animate {
    animation: none;
    justify-content: flex-start;
}

/* Staggered animation delays for visual offset */
.project-card:nth-child(1) .carousel-track {
    animation-delay: 0s;
}

.project-card:nth-child(2) .carousel-track {
    animation-delay: -4s;
}

.project-card:nth-child(3) .carousel-track {
    animation-delay: -8s;
}

.project-card:nth-child(4) .carousel-track {
    animation-delay: -12s;
}

.project-card:nth-child(5) .carousel-track {
    animation-delay: -16s;
}

/* Carousel Animation */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly 3 items + 3 gaps: (3 * item-width) + (3 * 8px gap) */
        transform: translateX(calc(-3 * ((158px * 4) / 3) - 3 * 8px));
    }
}

/* Carousel Animation for vertical layout (below 1300px) */
@keyframes scroll-left-vertical {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Move exactly 3 items + 3 gaps with larger item size */
        transform: translateX(calc(-3 * (250px * 4 / 3) - 3 * 8px));
    }
}

.project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item {
    flex: 0 0 auto;
    width: calc((158px * 4) / 3);
    height: 158px;
    background-color: #F0F0F0;
    border: 0.5px solid #D0D0D0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04);
    position: relative;
}

.project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item.placeholder {
    background-color: #F8F8F8;
}

.project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.contact-icon { display: inline; height: 1em; width: auto; vertical-align: -0.125em; margin-right: 0.25em; filter: drop-shadow(0px 2px 10px rgba(0, 0, 0, 0.35)); }
.latest-work-text-section { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 30px; }
.project-text-content { border-bottom: var(--separator-thickness) solid var(--color-eggshell); padding-bottom: 20px; }
.latest-work-text-section > article:last-of-type .project-text-content { border-bottom: none; padding-bottom: 0; }
.project-text-content h3 { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: #333333; margin-top: 0; margin-bottom: 8px; line-height: 1.3; }
.project-text-content h3 a { color: inherit; text-decoration: none; }
.project-text-content h3 a:hover { text-decoration: underline; }
.project-text-content .project-description { font-family: var(--font-primary); font-weight: 300; font-size: 1.05rem; line-height: 1.6; color: var(--color-grey); margin-bottom: 20px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; }
.project-text-content .project-tags { line-height: 1; }
.project-text-content .project-tags .tag { display: inline-block; font-family: var(--font-mono); font-weight: 700; font-style: italic; font-size: 0.75rem; padding: 4px 10px; border-radius: 15px; margin-right: 8px; margin-bottom: 8px; line-height: 1.2; text-transform: none; background-color: #ECECEC; color: #757575; }
.project-text-content .project-tags .tag.tag-motion, .project-text-content .project-tags .tag.tag-motion-graphics, .project-text-content .project-tags .tag.tag-animation, .project-text-content .project-tags .tag.tag-short-film, .project-text-content .project-tags .tag.tag-ads { background-color: var(--tag-blue-bg); color: var(--tag-blue-text); }
/* ... (other .project-text-content tag colors) ... */
.latest-work-image-carousel { display: flex; overflow-x: auto; overflow-y: hidden; gap: 15px; padding: 10px 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; }
.latest-work-image-carousel::-webkit-scrollbar { display: none; }
.project-card-image-placeholder.carousel-item { width: 280px; aspect-ratio: 3 / 2; flex-shrink: 0; background-color: #FBFBFB; border: 1px solid #D0D0D0; border-radius: 3px; overflow: hidden; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.04); position: relative; }
.project-card-image-placeholder.carousel-item a, .project-card-image-placeholder.carousel-item img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.project-card-image-placeholder.carousel-item img { object-fit: cover; }
/* KEYCHAIN DISABLED: Uncomment below to restore keychain canvas styles */
/* #keychain-canvas { display: block; width: 100%; height: 100%; border-radius: inherit; } */
.category-header { max-width: var(--standard-content-max-width); margin-bottom: 15px; }
.category-header .category-title-block { margin-bottom: 10px; line-height: 1.2; }
.category-header .category-main-title { font-family: var(--font-primary); font-weight: 700; font-style: italic; font-size: 2.5rem; color: var(--color-dark-grey); letter-spacing: -0.04em; margin-right: 8px; display: inline; vertical-align: baseline; }
.category-header .category-name-subtitle { font-family: var(--font-primary); font-weight: 700; font-style: italic; font-size: 1.1rem; color: var(--color-light-grey); letter-spacing: -0.01em; display: inline; vertical-align: baseline; }
.category-header .category-related { font-family: var(--font-primary); font-size: .9rem; color: var(--color-grey); text-transform: uppercase; margin-top: 10px; margin-bottom: 30px; }
.category-header .related-label { font-weight: 400; letter-spacing: 0.1em; margin-right: 0.5em; }
.category-header .related-terms { font-weight: 700; letter-spacing: 0.2em; }
.category-header .category-description { font-family: var(--font-primary); font-size: 0.95rem; font-weight: 400; line-height: 1.7; color: var(--color-grey); margin-bottom: 20px; }
.category-header .category-description p { margin-bottom: 1em; }
.category-header .category-description strong { font-weight: 600; }
.category-header .category-description em { font-style: italic; font-weight: 600; }
.category-header .category-goal-quote { font-family: var(--font-primary); font-size: 0.95rem; font-style: italic; font-weight: 600; color: var(--color-dark-grey); line-height: 1.7; margin-top: 10px; margin-bottom: 20px; }
hr.category-separator { border: none; border-top: var(--separator-thickness) solid var(--color-eggshell); max-width: var(--standard-content-max-width); margin: 0 0 10px 0; }
/* KEYCHAIN DISABLED: Category page columns - keychain column is hidden */
.category-page-columns-wrapper { display: flex; align-items: flex-start; max-width: calc(var(--standard-content-max-width) + var(--column-gap) + var(--keychain-column-width)); }
.category-content-column { width: var(--standard-content-max-width); max-width: var(--standard-content-max-width); flex-shrink: 0; min-width: 0; padding-right: 0; }
/* KEYCHAIN DISABLED: Uncomment below to restore keychain column styles */
/* .keychain-column { width: var(--keychain-column-width); flex-shrink: 0; padding-left: calc(var(--column-gap) / 2); padding-top: 0; } */
/* #keychain-canvas-container { width: 100%; aspect-ratio: 1 / 1; position: sticky; top: 20px; background-color: var(--color-off-white); } */
.keychain-column { display: none; } /* Hide keychain column */
.category-project-list-container { margin-top: 0; max-width: var(--standard-content-max-width); width: 100%; }
.category-project-list { display: grid; grid-template-columns: 1fr; gap: 0; }
.category-project-card { display: flex; background-color: var(--color-off-white); padding: 25px 0; gap: 25px; border-bottom: var(--separator-thickness) solid var(--color-eggshell); }
.category-project-list article:last-of-type.category-project-card { border-bottom: none; }
.category-project-card-thumbnail { width: 300px; max-width: 40%; flex-shrink: 0; aspect-ratio: 3 / 2; background-color: #EAEAEA; border-radius: 3px; overflow: hidden; }
.category-project-card-thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.category-project-card-thumbnail .placeholder-link { display: block; width: 100%; height: 100%; text-decoration: none; }
.category-project-card-thumbnail .thumbnail-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--font-mono); font-size: 0.8rem; color: var(--color-grey); background-color: #F0F0F0; padding: 10px; line-height: 1.3; }
.category-project-card-content { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }
.category-project-card-content h3 { font-family: var(--font-primary); font-weight: 600; font-size: 1.25rem; color: var(--color-dark-grey); margin-top: 0; margin-bottom: 10px; line-height: 1.3; }
.category-project-card-content h3 a { color: inherit; text-decoration: none; }
.category-project-card-content h3 a:hover { text-decoration: underline; }
.category-project-card-content .project-description { font-family: var(--font-primary); font-weight: 400; font-size: 1.05rem; line-height: 1.6; color: var(--color-grey); margin-bottom: 15px; max-width: 700px; }
.category-project-card-content .project-meta { margin-bottom: 10px; }
.category-project-card-content .project-meta .meta-label { display: block; font-family: var(--font-primary); font-size: 0.7rem; font-weight: 500; color: var(--color-light-grey); text-transform: uppercase; margin-bottom: 2px; letter-spacing: 0.05em; }
.category-project-card-content .project-meta .roles-label { letter-spacing: 0.2em; }
.category-project-card-content .project-meta p, .category-project-card-content .project-meta span:not(.meta-date):not(.meta-client-separator):not(.client-label):not(.client-name) { font-family: var(--font-primary); font-size: .95rem; color: var(--color-light-grey); line-height: 1.5; }
.category-project-card-content .project-meta.project-roles p { font-weight: 500; color: var(--color-grey); }
.category-project-card-content .project-date-client { display: flex; gap: 0; margin-top: auto; padding-top: 10px; align-items: center; flex-wrap: nowrap; white-space: nowrap; }
.category-project-card-content .meta-date { font-family: var(--font-primary); font-weight: 400; font-size: .9rem; color: var(--color-grey); text-transform: uppercase; letter-spacing: 0.075em; white-space: nowrap; }
.category-project-card-content .meta-client-separator { display: inline-block; width: 1.5px; height: 0.9em; background-color: var(--color-light-grey); margin-left: 10px; margin-right: 10px; }
.category-project-card-content .meta-client { font-family: var(--font-primary); font-size: 0.8rem; color: var(--color-grey); display: flex; align-items: baseline; white-space: nowrap; flex-shrink: 0; }
.category-project-card-content .client-label { font-weight: 500; text-transform: uppercase; letter-spacing: 0.075em; margin-right: 0.4em; flex-shrink: 0; }
.category-project-card-content .client-name { color: var(--color-grey); font-weight: 500; }

/* === ARTICLES PAGE STYLES === */
.articles-page { max-width: var(--standard-content-max-width); }
.articles-list { display: flex; flex-direction: column; gap: 0; }
.article-card { padding: 25px 0; border-bottom: var(--separator-thickness) solid var(--color-eggshell); }
.articles-list article:last-of-type.article-card { border-bottom: none; }
.article-content { display: flex; flex-direction: column; gap: 12px; }
.article-title { font-family: var(--font-primary); font-weight: 600; font-size: 1.5rem; color: var(--color-dark-grey); margin: 0; line-height: 1.3; }
.article-title a { color: inherit; text-decoration: none; }
.article-title a:hover { text-decoration: underline; }
.article-excerpt { font-family: var(--font-primary); font-weight: 400; font-size: 1rem; line-height: 1.6; color: var(--color-grey); margin: 0; }
.article-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.article-meta-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.article-author-inline { display: flex; align-items: center; gap: 8px; }
.article-author-avatar-inline { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.article-author-avatar-inline img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-author-name-inline { font-family: var(--font-primary); font-size: 0.9rem; font-weight: 500; color: var(--color-grey); }
.article-meta-separator { color: var(--color-light-grey); font-size: 0.9rem; }
.article-date, .article-reading-time { font-family: var(--font-primary); font-size: 0.85rem; color: var(--color-light-grey); }
.article-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.article-tag { font-family: var(--font-primary); font-size: 0.7rem; font-weight: 500; padding: 3px 8px; border-radius: 12px; background-color: #ECECEC; color: #757575; text-transform: uppercase; letter-spacing: 0.05em; }
.articles-empty { font-family: var(--font-primary); font-size: 1rem; color: var(--color-grey); padding: 40px 0; text-align: center; }

/* === PHOTOGRAPHY PAGE STYLES === */
.photography-page { max-width: 1400px; }
.photography-grid-container { width: 100%; margin-top: 30px; }
.photography-grid {
    column-count: 4;
    column-gap: 30px;
    padding: 20px;
}
.photography-grid-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
    position: relative;
    transition: transform 0.15s ease;
}

/* Responsive column count */
@media (max-width: 1200px) {
    .photography-grid { column-count: 3; }
}
@media (max-width: 768px) {
    .photography-grid { column-count: 2; }
}
@media (max-width: 480px) {
    .photography-grid { column-count: 1; }
}
.photography-image-link {
    display: block;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}
.photography-grid-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
}

.photography-empty { font-family: var(--font-primary); font-size: 1rem; color: var(--color-grey); padding: 40px 0; text-align: center; }

/* Photography Lightbox */
.photography-lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; align-items: center; justify-content: center; }
.photography-lightbox.active { display: flex; }
.photography-lightbox-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); cursor: pointer; }
.photography-lightbox-content { position: relative; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 60px; max-width: 100%; max-height: 100%; }
.photography-lightbox-image { max-width: calc(100vw - 120px); max-height: calc(100vh - 120px); object-fit: contain; display: block; }
.photography-lightbox-close { position: absolute; top: 30px; right: 30px; background: transparent; border: none; color: white; font-size: 3rem; line-height: 1; cursor: pointer; z-index: 10001; padding: 10px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s ease; }
.photography-lightbox-close:hover { opacity: 0.7; }

/* === ARTICLE DETAIL PAGE STYLES === */
.article-detail { max-width: var(--standard-content-max-width); margin: 0; padding: 0; align-self: center; }
.article-header { margin-bottom: 30px; }
.article-header .article-title { font-family: var(--font-primary); font-weight: 700; font-style: italic; font-size: 2.5rem; color: var(--color-dark-grey); margin: 0 0 15px 0; line-height: 1.2; letter-spacing: -0.04em; }
.article-header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; font-family: var(--font-primary); font-size: 0.9rem; color: var(--color-grey); }
.article-tags-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.article-tags-inline .tag { display: inline-block; font-family: var(--font-primary); font-weight: 500; font-size: 0.7rem; padding: 3px 8px; border-radius: 12px; background-color: #ECECEC; color: #757575; text-transform: uppercase; letter-spacing: 0.05em; }
.article-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 20px; padding-top: 20px; border-top: var(--separator-thickness) solid var(--color-eggshell); }
.article-info-section { display: flex; flex-direction: column; gap: 15px; }
.article-info-item { display: flex; flex-direction: column; gap: 5px; }
.article-author-with-image { display: flex; align-items: center; gap: 12px; }
.article-author-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.article-author-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-author-text-wrapper { display: flex; flex-direction: column; gap: 2px; }
.article-author-text { font-family: var(--font-primary); font-size: 0.95rem; font-weight: 500; color: var(--color-grey); margin: 0; }
.article-author-bio-text { font-family: var(--font-primary); font-size: 0.8rem; font-weight: 400; color: var(--color-light-grey); margin: 0; font-style: italic; }
.article-description-text { font-family: var(--font-primary); font-size: 0.95rem; font-weight: 400; color: var(--color-grey); line-height: 1.6; margin: 0; }
.article-hero-image { width: 100%; margin: 20px 0; border-radius: 3px; overflow: hidden; }
.article-hero-image img { width: 100%; height: auto; display: block; }
.article-separator-line { width: 100%; height: var(--separator-thickness); background-color: var(--color-eggshell); margin: 20px 0; }
.article-transmission-start, .article-transmission-end { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 150%; color: var(--color-eggshell); text-align: center; margin: 20px 0; letter-spacing: 0.2em; text-transform: lowercase; }
.article-body { font-family: var(--font-primary); font-size: 0.95rem; line-height: 1.7; color: var(--color-grey); margin-top: 20px; }
.article-body h1, .article-body h2, .article-body h3 { font-family: var(--font-primary); font-weight: 600; color: var(--color-dark-grey); margin-top: 30px; margin-bottom: 15px; text-align: left; }
.article-body h1 { font-size: 1.5rem; }
.article-body h2 { font-size: 1.3rem; }
.article-body h3 { font-size: 1.1rem; }
.article-body p { margin-bottom: 1em; text-align: left; }
.article-body hr { border: none; border-top: var(--separator-thickness) solid var(--color-eggshell); margin: 2em 0; width: 100%; }

/* === MOBILE HEADER & NAVIGATION STYLES === */
.mobile-header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: var(--mobile-header-height); 
    background-color: var(--color-off-white); 
    border-bottom: var(--separator-thickness) solid var(--color-eggshell);
    z-index: 1001; /* Make header itself highest, or at least same as toggle */
    display: flex; /* Will be set in media query */
    align-items: center;
    justify-content: space-between; 
    padding: 0 var(--content-padding-sides-mobile); 
    /* display: none; /* This will be controlled by GENERAL DISPLAY STATES */
}
.mobile-logo {
    flex-shrink: 0;
    display: flex; 
    align-items: center;
    height: 100%; 
}
.mobile-logo a {
    display: inline-flex; 
    align-items: center;
    height: 100%;
}
.mobile-logo img { /* For static SVG logo */
    height: var(--mobile-logo-height); 
    width: auto;  
    display: block; 
    max-height: calc(var(--mobile-header-height) - 10px); 
    /* If SVG is white, you need to edit the SVG or use a dark version */
    /* For example, if your SVG paths use currentColor: */
    /* color: var(--color-dark-grey); */
}
.mobile-nav-toggle {
    position: static; 
    background: transparent;
    border: none;
    padding: 10px; 
    cursor: pointer;
    flex-shrink: 0;
    z-index: 1001; /* Ensure it's clickable */
    /* display: none; /* This will be controlled by GENERAL DISPLAY STATES */
}
.mobile-nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: var(--color-dark-grey);
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}
.mobile-nav-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-nav-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile Header Actions Container */
.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Mobile Language Toggle */
.mobile-lang-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    text-decoration: none;
    padding: 6px;
    border-radius: 4px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}
.mobile-lang-toggle:hover {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.05);
}

.mobile-nav {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0; 
    right: -100%; 
    width: 100%;
    height: 100vh;
    background-color: var(--color-off-white);
    transition: right 0.3s ease-in-out;
    z-index: 1000; 
    padding: 20px;
    overflow-y: auto;
    /* display: none; /* This will be controlled by GENERAL DISPLAY STATES */
}
.mobile-nav-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.mobile-nav-footer {
    width: 100%;
    padding: 20px;
    text-align: left;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--color-grey);
    line-height: 1.4;
    border-top: var(--separator-thickness) solid var(--color-eggshell);
    margin-top: auto;
}
.mobile-nav-footer p {
    margin: 0;
}
.mobile-nav.active {
    right: 0; 
    /* display: flex; /* This will be controlled by GENERAL DISPLAY STATES */
}
.mobile-nav a {
    font-family: var(--font-primary);
    font-size: 1.8rem; 
    font-weight: 600;
    color: var(--color-dark-grey);
    text-decoration: none;
    padding: 15px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    text-align: center;
}
.mobile-nav a:hover,
.mobile-nav a.nav-link-active-mobile { 
    color: var(--color-yolk); 
}

/* === PROJECT DETAIL PAGE STYLES === */
.project-detail {
    width: 100%;
    max-width: var(--standard-content-max-width);
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
    /* Ensure centering in flex container - align-self overrides parent's align-items */
    align-self: center;
}
.project-header {
    margin-bottom: 20px;
}
.project-title {
    font-family: var(--font-primary);
    font-weight: 700;
    font-style: italic;
    font-size: 2.5rem;
    color: var(--color-dark-grey);
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -0.04em;
}
.project-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: var(--color-grey);
}
.project-date {
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.075em;
}
.meta-separator {
    display: inline-block;
    width: var(--separator-vertical-thickness);
    min-width: var(--separator-vertical-thickness);
    max-width: var(--separator-vertical-thickness);
    height: 12px;
    min-height: 12px;
    max-height: 12px;
    background-color: var(--color-light-grey);
    margin: 0 5px;
    vertical-align: middle;
    /* Hide the text content but keep element size */
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    /* Ensure element doesn't collapse and maintains exact size */
    flex-shrink: 0;
    align-self: center;
    /* Prevent any subpixel rendering differences */
    box-sizing: border-box;
    border: none;
    padding: 0;
}
.project-client {
    font-weight: 500;
}
.project-tags-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.project-tags-inline .tag {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.075rem;
    padding: 4px 10px;
    border-radius: 15px;
    line-height: 1.2;
    text-transform: uppercase;
    background-color: #ECECEC;
    color: #757575;
}

/* Share Buttons */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: transparent;
    border: 1.5px solid var(--color-light-grey);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--color-grey);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}
.share-btn:hover {
    background-color: var(--color-dark-grey);
    border-color: var(--color-dark-grey);
    color: var(--color-off-white);
}
.share-btn:active {
    transform: scale(0.97);
}
.share-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.share-label {
    white-space: nowrap;
}
.share-btn.share-copy.copied {
    background-color: var(--color-yolk);
    border-color: var(--color-yolk);
    color: white;
}
.share-btn.share-story {
    border-color: var(--color-yolk);
    color: var(--color-yolk);
}
.share-btn.share-story:hover {
    background-color: var(--color-yolk);
    color: white;
}

/* Story Modal */
.story-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.story-modal-overlay.active {
    display: flex;
    opacity: 1;
}
.story-modal {
    background-color: var(--color-off-white);
    border-radius: 12px;
    padding: 32px;
    max-width: 340px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}
.story-modal-overlay.active .story-modal {
    transform: scale(1);
}
.story-modal-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: var(--color-yolk);
}
.story-modal-title {
    font-family: var(--font-primary);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark-grey);
    margin: 0 0 8px;
}
.story-modal-text {
    font-family: var(--font-primary);
    font-size: 0.9rem;
    color: var(--color-grey);
    margin: 0 0 24px;
    line-height: 1.5;
}
.story-modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.story-modal-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}
.story-modal-btn.primary {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}
.story-modal-btn.primary:hover {
    opacity: 0.9;
    transform: scale(1.02);
}
.story-modal-btn.secondary {
    background-color: var(--color-eggshell);
    color: var(--color-grey);
}
.story-modal-btn.secondary:hover {
    background-color: var(--color-light-grey);
}
.story-modal-btn svg {
    width: 18px;
    height: 18px;
}

.project-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: var(--separator-thickness) solid var(--color-eggshell);
}
.project-info-section {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.project-info-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.info-label {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-light-grey);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.project-description-text,
.project-roles-text,
.project-software-text {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--color-grey);
    line-height: 1.5;
    margin: 0;
}
.project-separator-line {
    width: 100%;
    height: var(--separator-thickness);
    background-color: var(--color-eggshell);
    margin: 20px 0;
}
.project-transmission-start,
.project-transmission-end {
    font-family: var(--font-mono);
    font-weight: 700; /* Bold */
    font-size: 12px; /* 12px as specified */
    line-height: 150%; /* 150% as specified */
    color: var(--color-eggshell);
    text-align: center;
    margin: 20px 0;
    letter-spacing: 0.2em; /* 20% as specified */
    text-transform: lowercase;
}
.project-body {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--color-grey);
    margin-top: 20px;
}
.project-body h1,
.project-body h2,
.project-body h3 {
    font-family: var(--font-primary);
    font-weight: 600;
    color: var(--color-dark-grey);
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: left;
}
.project-body h1 { font-size: 1.5rem; }
.project-body h2 { font-size: 1.3rem; }
.project-body h3 { font-size: 1.1rem; }
.project-body p {
    margin-bottom: 1em;
    text-align: left;
}
.project-body hr {
    border: none;
    border-top: var(--separator-thickness) solid var(--color-eggshell);
    margin: 2em 0;
    width: 100%;
}
.project-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}
.project-body table th,
.project-body table td {
    padding: 8px 12px;
    border: var(--separator-thickness) solid var(--color-eggshell);
    text-align: left;
}
.project-body table th {
    background-color: var(--color-off-white);
    font-weight: 600;
}
.project-gallery-item {
    margin: 30px auto;
    width: 80%; /* Default to 80% width */
    text-align: left;
}
.project-gallery-item.full-width {
    width: 100%;
}
.project-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 3px;
}
.project-gallery-caption {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--color-light-grey);
    margin-top: 8px;
    font-style: italic;
    text-align: left;
}

/* === CONTENT BLOCKS (New Admin Panel Format) === */
.content-block {
    margin: 30px 0;
    width: 100%;
}
.content-block-text {
    text-align: left;
}
.content-block-text p {
    margin-bottom: 1em;
}
.content-block-image {
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Full width on mobile/tablet */
}
.content-block-image img {
    width: var(--image-scale, 100%);
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
}
.content-block-image figcaption,
.content-block-video figcaption {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--color-light-grey);
    margin-top: 8px;
    font-style: italic;
    text-align: left;
}
.content-block-grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns, 2), 1fr);
    gap: 15px;
    margin: 30px auto;
    width: 100%; /* Full width on mobile/tablet */
}
.content-block-grid .grid-item {
    margin: 0;
    position: relative;
    overflow: visible; /* Allow 3D tilt to extend beyond bounds */
}
.content-block-grid .grid-item img,
.content-block-grid .grid-item video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: contain; /* Show full image/video without cropping */
}
.grid-caption {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--color-light-grey);
    margin-top: 8px;
    font-style: italic;
    text-align: left;
    grid-column: 1 / -1;
}
.content-block-video {
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Full width on mobile/tablet */
}

.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}
/* Fallback for browsers without aspect-ratio support */
.video-wrapper:not([style*="aspect-ratio"]) {
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* Self-hosted uploaded videos */
.video-wrapper video.uploaded-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Twitter/X embed styling */
.content-block-tweet {
    margin: 30px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 550px;
}
.tweet-embed-wrapper {
    width: 100%;
    min-height: 200px; /* Prevent layout shift while loading */
    display: flex;
    justify-content: center;
}
.tweet-embed-wrapper .twitter-tweet {
    margin: 0 !important; /* Override Twitter's default margins */
}
.content-block-tweet figcaption {
    font-family: var(--font-primary);
    font-size: 0.75rem;
    color: var(--color-light-grey);
    margin-top: 8px;
    font-style: italic;
    text-align: center;
}

/* === SITE FOOTER STYLES === */
.main-content-area > .site-footer {
    margin-top: auto;
}
.site-footer {
    max-width: var(--standard-presentation-max-width);
    background-color: var(--color-eggshell); /* #ececec - eggshell background */
    padding: 40px 0;
    margin-top: auto;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}
.footer-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.footer-social-icons {
    display: flex;
    gap: 11px; /* 11.008px from Figma */
    align-items: center;
    justify-content: center;
}
.sidebar .footer-social-icons {
    justify-content: center; /* Center in sidebar for equal spacing */
    gap: 8px; /* Tighter gap for sidebar */
}
.footer-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
}
.sidebar .footer-icon {
    width: 38px; /* Smaller in sidebar to fit */
    height: 38px;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}
.footer-icon:hover {
    opacity: 0.7;
}
.footer-icon img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* === Language Toggle === */
.language-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
}
.sidebar .language-toggle {
    justify-content: center;
}
.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    background-color: transparent;
    border: 1.5px solid var(--color-light-grey);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-grey);
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}
.lang-switch-btn:hover {
    background-color: var(--color-dark-grey);
    border-color: var(--color-dark-grey);
    color: var(--color-off-white);
}
.lang-flag {
    font-weight: 600;
}

.footer-credits {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 100%;
}
.sidebar .footer-credits {
    width: 100%;
    align-items: flex-start;
    text-align: left;
}
.footer-credits-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    flex-wrap: wrap;
    line-height: 0;
}
.sidebar .footer-credits-container {
    justify-content: flex-start;
}
.footer-credits-line {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 0;
    white-space: nowrap;
    line-height: 0;
}
.footer-credits-line span {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 12px;
    color: var(--color-grey);
    text-transform: none;
    line-height: normal;
}
.footer-credits-line strong {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 12px;
    color: var(--color-grey);
    text-transform: none;
    line-height: normal;
    margin-left: 3px;
}
.footer-quote-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    line-height: 0;
    text-align: center;
    width: 100%;
}
.sidebar .footer-quote-section {
    align-items: flex-start;
    text-align: left;
}
.footer-quote-film {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    color: var(--color-light-grey);
    text-transform: none;
    white-space: normal;
    max-width: var(--footer-quote-max-width);
    word-wrap: break-word;
    text-align: center;
}
.sidebar .footer-quote-film {
    text-align: left;
}
.footer-quote-text {
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 12px;
    line-height: normal;
    color: var(--color-light-grey);
    text-transform: none;
    white-space: normal;
    max-width: var(--footer-quote-max-width);
    word-wrap: break-word;
    text-align: center;
    text-wrap: balance;
    -webkit-text-wrap: balance;
    margin: 0 auto;
}
.sidebar .footer-quote-text {
    text-align: left;
    margin: 0;
}
.footer-copyright {
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: normal !important;
    color: var(--color-light-grey) !important;
    text-align: center;
    margin-top: 0;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.footer-copyright-mobile {
    display: none;
}
/* ===================================
   RESPONSIVE STYLES
   =================================== */
.footer-copyright p {
    margin: 0;
    font-family: var(--font-primary) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: normal !important;
    color: var(--color-light-grey) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* === GENERAL DISPLAY STATES FOR NAVIGATION ELEMENTS (CRITICAL) === */
.mobile-header, 
.mobile-nav-toggle, /* Hide toggle by default (it's inside mobile-header, which is also hidden by default) */
.mobile-nav { 
    display: none; 
}
.mobile-nav.active { /* This makes the panel visible */
    display: flex; 
}
/* Desktop sidebar is display:flex by default (from its own rule) */


/* ===================================
   CLEAN RESPONSIVE BREAKPOINTS
   
   Breakpoint Strategy:
   - Desktop (>1300px): Full sidebar (225px), horizontal project cards with carousel on right
   - Large Tablet (≤1300px): Smaller sidebar, VERTICAL cards (stacked)
   - Tablet (≤992px): Even smaller sidebar, VERTICAL cards
   - Mobile (≤768px): No sidebar, hamburger menu, VERTICAL cards
   - Small Mobile (≤576px): Tighter spacing
   =================================== */

/* === STACKED CARDS (≤1300px) === */
@media (max-width: 1300px) {
    /* Content containers - keep 1400px max for centering */
    .section-separator {
        width: 100%;
        max-width: 1400px;
    }

    .latest-work-grid {
        width: 100%;
        max-width: 1400px;
    }

    /* Category pages */
    hr.category-separator {
        width: 100%;
        max-width: 1400px;
    }

    .category-content-column {
        width: 100%;
        max-width: 1400px;
    }

    .category-project-list-container {
        width: 100%;
        max-width: 1400px;
    }

    /* Project cards go VERTICAL */
    .project-card {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        max-width: 1400px;
    }

    .project-card.article-card {
        width: 100%;
        max-width: 1400px;
        padding: 18px 30px;
    }
    .article-card-avatar { width: 45px; height: 45px; }
    .article-card-title { font-size: 1.15rem; }
    .article-card-description { font-size: 1rem; }

    .project-card-content {
        order: 1;
        flex: 1 1 auto; /* Allow to grow/shrink naturally */
        max-width: 100%;
        width: 100%;
        min-width: 0; /* Reset desktop constraint */
    }
    
    .project-card > .project-card-image-placeholder {
        order: 2;
        flex: 0 0 auto; /* Don't allow it to grow */
        width: 100%;
        max-width: 100%;
        min-width: 0; /* Allow shrinking */
        /* Calculate height based on 1/3 of available width at 4:3 aspect ratio */
        height: calc(((100vw - var(--sidebar-width) - var(--content-padding-sides) * 2) / 3 - 6px) * 3 / 4);
        overflow: hidden;
        position: relative;
    }
    
    /* Keep carousel animated in vertical layout - responsive sizing */
    .project-card > .project-card-image-placeholder > .carousel-track {
        display: flex;
        gap: 8px;
        height: 100%;
        /* Important: Allow track to be wider than container but don't affect parent size */
        position: absolute;
        left: 0;
        top: 0;
        animation: scroll-left-responsive 20s linear infinite;
    }
    
    .project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item {
        /* Calculate size based on viewport - ensures exactly 3 items fit in the visible area */
        width: calc((100vw - var(--sidebar-width) - var(--content-padding-sides) * 2 - 16px) / 3);
        height: 100%;
        flex: 0 0 auto;
    }
    
    .project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Responsive carousel animation - moves exactly 3 items + gaps */
    @keyframes scroll-left-responsive {
        0% {
            transform: translateX(0);
        }
        100% {
            /* Move exactly 3 items + 3 gaps (8px each) = half the track */
            transform: translateX(calc(-3 * ((100vw - var(--sidebar-width) - var(--content-padding-sides) * 2 - 16px) / 3) - 24px));
        }
    }
}

/* === LARGE TABLET (≤1200px) === */
@media (max-width: 1200px) {
    /* Adjust sidebar and padding */
    :root { 
        --nav-link-font-size-tier1: 1.1rem;    
        --nav-link-font-size-tier3: 0.7rem;   
        --sidebar-width: var(--sidebar-width-large-tablet); 
        --content-padding-sides: var(--content-padding-sides-large-tablet); 
    }
    
    .sidebar { 
        width: var(--sidebar-width); 
        padding: 30px 25px; 
    }
    
    .main-content-area {
        padding-left: var(--content-padding-sides);
        padding-right: var(--content-padding-sides);
        min-height: calc(100vh - 150px);
        /* Keep centering on large tablets */
        align-items: center;
    }

    .main-nav a { font-size: var(--nav-link-font-size-tier3) !important; }
    .main-nav a.nav-link-active { font-size: var(--nav-link-font-size-tier1) !important; }

    /* Content widths - keep max-width for centering */
    .section-separator {
        width: 100%;
        max-width: 1400px;
    }
    .latest-work-grid {
        width: 100%;
        max-width: 1400px;
    }
    .project-card {
        width: 100%;
        max-width: 1400px;
        margin: 0;
    }
    .project-card.article-card {
        width: 100%;
        max-width: 1400px;
        padding: 16px 0;
        gap: 20px;
    }
    .article-card-avatar { width: 38px; height: 38px; }
    .article-card-title { font-size: 1.05rem; }
    .article-tag { font-size: 0.6rem; padding: 5px 5px; }
    .article-card-reading-time { font-size: 0.85rem; }
    .article-card-description { font-size: 0.95rem; }

    /* Category pages - match section-separator width behavior */
    hr.category-separator {
        width: 100%;
        max-width: 1400px;
    }

    .category-content-column {
        width: 100%;
        max-width: 1400px;
    }

    .category-project-list-container {
        width: 100%;
        max-width: 100%;
    }
    .project-detail { 
        max-width: 100%; 
        padding: 0 var(--content-padding-sides); 
    }
    
    /* Project cards already vertical (from 1300px breakpoint) */
    
    /* Typography adjustments */
    .presentation-card h1 { font-size: 2.2rem; }
    .presentation-card .name-subtitle { font-size: 1rem; }
    .project-title { font-size: 2rem; }
    .article-title { font-size: 1.75rem; }
    
    /* Category page */
    .keychain-column { display: none; }
    .category-content-column { width: 100%; border-right: none; padding-right: 0; }
    .category-project-card { 
        gap: 20px; 
        padding: 20px 0; 
    }
    .category-project-card-thumbnail { width: 280px; max-width: 38%; }
    
    /* Articles */
    .articles-list { gap: 0; }
    .article-card { padding-top: 20px; padding-bottom: 20px; }
    
    /* Photography */
    .photography-grid { column-gap: 20px; }
    
    /* Footer */
    .site-footer { padding: 40px var(--content-padding-sides); }
    .project-info-grid { grid-template-columns: 1fr; }
}

/* === DESKTOP ONLY: Text blocks use variable width centered (above iPad landscape) === */
@media (min-width: 1201px) {
    .content-block-text {
        width: var(--text-block-width, 65%);
        margin-left: auto;
        margin-right: auto;
    }
}

/* === TABLET (≤992px) === */
@media (max-width: 992px) {
    /* Further adjust sidebar and padding */
    :root { 
        --sidebar-width: var(--sidebar-width-tablet);
        --content-padding-sides: var(--content-padding-sides-tablet);
    }
    
    .sidebar { 
        width: var(--sidebar-width); 
        padding: 25px 20px; 
    }
    .sidebar .logo #lottie-logo-container { 
        width: 70px; 
        margin-top: -12px; 
        margin-left: -8px; 
    }
    
    .main-content-area {
        padding-left: var(--content-padding-sides);
        padding-right: var(--content-padding-sides);
        min-height: calc(100vh - 150px);
        /* Keep centering for project-detail pages */
        align-items: center;
    }

    .main-content-area>*:not(.site-footer),
    .main-content-area > .site-footer {
        max-width: 100%;
    }

    /* Content widths */
    .section-separator { width: 100%; max-width: 100%; }
    .latest-work-grid { width: 100%; max-width: 100%; }
    .project-card { width: 100%; max-width: 100%; }
    
    /* Category pages - match section-separator width behavior */
    hr.category-separator { width: 100%; max-width: 100%; }
    .category-content-column { width: 100%; max-width: 100%; }
    .category-project-list-container { width: 100%; max-width: 100%; }
    
    /* Typography adjustments */
    .presentation-card h1 { font-size: 2rem; }
    .presentation-card .roles { font-size: 0.85rem; letter-spacing: 0.15em; }
    .presentation-card .bio { font-size: 0.85rem; }
    .article-title { font-size: 1.6rem; }
    .article-excerpt { font-size: 1rem; }
    .article-title-main { font-size: 2.5rem; }
    .article-subtitle { font-size: 1.2rem; }
    
    /* Category */
    .category-header .category-main-title { font-size: 2rem; }
    .category-header .category-name-subtitle { font-size: 1rem; }
    .category-header .category-related { font-size: 0.85rem; }
    .category-header .category-description, 
    .category-header .category-goal-quote { font-size: 0.9rem; }
    .category-project-card { 
        gap: 18px; 
        padding: 18px 0; 
    }
    .category-project-card-thumbnail { width: 250px; max-width: 35%; }
    .category-project-card-content h3 { font-size: 1.05rem; }
    .category-project-card-content .project-description { font-size: 0.95rem; }
    .category-project-card-content .project-meta .meta-label { font-size: 0.65rem; }
    .category-project-card-content .project-meta p, 
    .category-project-card-content .project-meta span:not(.meta-date):not(.meta-client-separator):not(.client-label):not(.client-name) { 
        font-size: 0.9rem; 
    }
    .category-project-card-content .meta-date, 
    .category-project-card-content .meta-client { font-size: 0.85rem; }
    
    /* Carousel */
    .project-card-image-placeholder.carousel-item { width: 240px; } 
    .latest-work-image-carousel { justify-content: center; }
    
    /* Articles */
    .articles-list { gap: 0; }
    .article-card { padding-top: 20px; padding-bottom: 20px; }
    
    /* Footer */
    .site-footer { padding: 25px var(--content-padding-sides); margin-top: 40px; }
    .footer-content { gap: 25px; }
    
    /* Photography lightbox */
    .photography-lightbox-content { padding: 40px; }
    .photography-lightbox-image {
        max-width: calc(100vw - 80px);
        max-height: calc(100vh - 80px);
    }
}

/* === TRANSITION TO MOBILE (≤820px) === */
@media (max-width: 820px) {
    /* Ensure all containers stay within bounds */
    .section-separator {
        width: 100%;
        max-width: 100%;
    }
    
    .latest-work-grid {
        width: 100%;
        max-width: 100%;
    }
    
    .project-card {
        width: 100%;
        max-width: 100%;
    }
    
    .project-card.article-card {
        width: 100%;
        max-width: 100%;
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 0;
        gap: 15px;
    }
    .article-card-avatar { width: 34px; height: 34px; }
    .article-card-main { width: 100%; }
    .article-card-title { font-size: 1.1rem; }
    .article-card-meta { flex-wrap: wrap; gap: 10px; }
    .article-tag { font-size: 0.55rem; padding: 4px 5px; }
    .article-card-reading-time { font-size: 0.85rem; }
    .article-card-separator { display: none; }
    .article-card-description { font-size: 0.9rem; }

    .project-card-content {
        width: 100%;
        max-width: 100%;
    }

    /* Keep carousel animated, just ensure it stays within bounds */
    .project-card > .project-card-image-placeholder {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Category pages - match section-separator width behavior */
    hr.category-separator { width: 100%; max-width: 100%; }
    .category-content-column { width: 100%; max-width: 100%; }
    .category-project-list-container { width: 100%; max-width: 100%; }
}

/* === MOBILE (≤768px) === */
@media (max-width: 768px) {
    /* Force everything to fit within viewport */
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overflow-y: auto; /* Ensure body can scroll */
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch; /* Smooth momentum scrolling on iOS */
        min-height: auto; /* Remove 100vh constraint that causes double scroll */
        height: auto;
        touch-action: pan-y; /* Allow vertical panning/scrolling */
    }
    
    *, *::before, *::after {
        box-sizing: border-box;
        max-width: 100%;
    }
    
    /* Hide sidebar, show mobile navigation */
    .sidebar { display: none; }
    .sidebar-footer { display: none; }
    .mobile-header { display: flex; } 
    .mobile-nav-toggle { display: block; }
    .footer-copyright-mobile { display: block; text-align: center; }
    
    /* Full width content area */
    .site-wrapper {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        flex: none; /* Remove flex: 1 which causes it to stretch to fill body */
        min-height: auto;
    }
    
    .main-content-area {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
        padding-top: calc(var(--content-padding-top) + var(--mobile-header-height));
        padding-left: var(--content-padding-sides-mobile);
        padding-right: var(--content-padding-sides-mobile);
        padding-bottom: 30px;
        min-height: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    
    /* Mobile-specific project card adjustments (already vertical from 1300px) */
    .project-card {
        padding: 20px 0;
        gap: 12px;
    }
    
    .project-card-content {
        gap: 8px;
    }
    
    .project-card-content h3 { 
        margin-bottom: 8px; 
    }
    
    .project-card-content .project-description { 
        margin-bottom: 10px;
        min-height: 0; /* Remove forced 3-line height on mobile */
    }
    
    /* Allow meta row to wrap on mobile screens (fixes overlap at ~550px) */
    .project-card-content .project-meta-row { 
        flex-wrap: wrap;
        gap: 8px 15px;
        margin-top: 10px; 
    }
    
    .project-card-content .project-meta-info {
        flex: 1 1 auto;
        min-width: 120px;
    }
    
    .project-card-content .project-tags {
        flex: 0 1 auto;
        flex-wrap: wrap;
        gap: 6px;
        margin-left: auto; /* Push tags to the right */
        justify-content: flex-end;
    }

    /* Ensure tag stays aligned at top when title wraps on mobile */
    .project-card-content h3 {
        display: block;
        line-height: 1.4;
    }
    
    .project-category-tag {
        vertical-align: top;
        line-height: 1.4; /* Match h3 line height */
    }
    
    .project-card-content h3 a {
        display: inline;
        vertical-align: top;
        line-height: 1.4; /* Match h3 line height */
    }
    
    /* Ensure ALL containers and cards stay within bounds */
    .presentation-card,
    .section-separator,
    .latest-work-grid,
    .project-card,
    .project-card.article-card,
    .project-card-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Article card small mobile */
    .project-card.article-card { padding: 15px 0; gap: 12px; }
    .article-card-avatar { width: 29px; height: 29px; }
    .article-card-title { font-size: 1rem; }
    .article-tag { font-size: 0.5rem; padding: 3px 4px; }
    .article-card-reading-time { font-size: 0.8rem; }
    .article-card-description { font-size: 0.85rem; line-height: 1.5; }

    /* Category pages - match section-separator width behavior */
    hr.category-separator,
    .category-content-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* CRITICAL: Remove inner scroll container on mobile - let page scroll naturally */
    .category-project-list-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
        max-height: none !important;
        overflow-y: visible !important;
        padding-right: 0;
    }
    .category-project-list-container::-webkit-scrollbar { display: none; }

    .project-card > .project-card-image-placeholder { 
        margin: 12px 0 0 0;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; /* Let grid determine height */
        overflow: hidden !important; /* Hide any overflow */
        position: relative !important; /* Reset absolute positioning from responsive breakpoint */
        box-sizing: border-box;
    }
    
    /* MOBILE: Disable carousel animation, show static grid */
    .project-card > .project-card-image-placeholder > .carousel-track {
        animation: none !important; /* Disable scrolling */
        display: grid !important; /* Switch to grid layout */
        grid-template-columns: repeat(3, 1fr) !important; /* 3 equal columns on mobile */
        gap: 6px;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: static !important; /* Override absolute positioning */
        left: auto !important;
        top: auto !important;
        box-sizing: border-box;
    }
    
    .project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item {
        width: 100% !important; /* Fill grid cell */
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 3 / 2;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    .project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    
    /* Hide duplicate images (carousel uses 6 items for animation, show only 3 in grid) */
    .project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item:nth-child(n+4) {
        display: none !important;
    }
    
    /* Content widths */
    .section-separator { width: 100%; max-width: 100%; }
    .latest-work-grid { width: 100%; max-width: 100%; }
    
    /* Category pages - match section-separator width behavior */
    hr.category-separator { width: 100%; max-width: 100%; }
    .category-content-column { width: 100%; max-width: 100%; }
    .category-project-list-container { width: 100%; max-width: 100%; }
    
    /* Typography */
    .presentation-card h1 { font-size: 1.8rem; }
    .presentation-card .name-subtitle { font-size: 0.9rem; }
    .category-header .category-main-title { font-size: 1.8rem; }
    .category-header .category-name-subtitle { font-size: 0.9rem; }
    .article-title { font-size: 1.4rem; line-height: 1.3; }
    .article-excerpt { font-size: 0.9rem; line-height: 1.6; }
    .article-title-main { font-size: 1.8rem; }
    .article-subtitle { font-size: 1rem; }
    .article-author-name-inline { font-size: 0.8rem; }
    .article-meta-left { font-size: 0.8rem; }
    .article-tag { font-size: 0.7rem; padding: 3px 10px; }
    .article-body { font-size: 0.95rem; }
    .article-body h1 { font-size: 1.6rem; }
    .article-body h2 { font-size: 1.3rem; }
    .article-body h3 { font-size: 1.1rem; }
    
    /* Category page */
    .category-project-card { 
        flex-direction: column; 
        padding: 20px 0; 
        gap: 15px; 
    }
    .category-project-card-thumbnail {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
        aspect-ratio: 21 / 9; /* Banner style on mobile */
    }

    /* Articles */
    .articles-list { gap: 0; }
    .article-card { gap: 12px; padding-top: 10px; padding-bottom: 10px; }
    .article-author-avatar-inline { width: 1em; height: 1em; }
    .article-header-author { gap: 12px; }
    .article-author-avatar-large { width: 36px; height: 36px; }
    .article-footer-avatar { width: 36px; height: 36px; }
    .article-footer-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    
    /* Photography */
    .photography-grid {
        column-gap: 15px;
    }
    .photography-lightbox-content { padding: 20px; }
    .photography-lightbox-image {
        max-width: calc(100vw - 40px);
        max-height: calc(100vh - 40px);
    }
    .photography-lightbox-close {
        top: 20px;
        right: 20px;
        font-size: 2rem;
        width: 35px;
        height: 35px;
    }
    
    /* Project Detail */
    .project-title { font-size: 1.8rem; }
    .project-header-meta { font-size: 0.85rem; flex-direction: column; align-items: flex-start; gap: 8px; }
    .project-info-grid { grid-template-columns: 1fr; gap: 20px; }
    .project-body { font-size: 0.85rem; }
    .project-body h1 { font-size: 1.3rem; }
    .project-body h2 { font-size: 1.1rem; }
    .project-body h3 { font-size: 1rem; }

    /* Content Blocks - Mobile */
    .content-block { margin: 20px 0; }
    .content-block-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    .content-block-image figcaption,
    .content-block-video figcaption,
    .grid-caption { font-size: 0.7rem; }

    /* Meta separator hidden on mobile column layout */
    .project-header-meta .meta-separator { display: none; }

    /* Share buttons - Mobile */
    .share-buttons { gap: 6px; margin-top: 12px; }
    .share-btn { padding: 5px 10px; font-size: 10px; }
    .share-icon { width: 12px; height: 12px; }

    /* Footer */
    .site-footer { 
        padding: 30px var(--content-padding-sides-mobile); 
        margin-top: 30px; 
    }
    .footer-content { gap: 30px; }
    .footer-credits-line span { font-size: 13px; }
    .footer-credits-line strong { font-size: 18.2px; margin-left: 3px; }
    .footer-credits-line { 
        flex-direction: row; 
        gap: 0; 
        flex-wrap: wrap;
    }
    
    /* Carousel */
    .latest-work-image-carousel {
        justify-content: flex-start; 
        padding-left: var(--content-padding-sides-mobile); 
        padding-right: var(--content-padding-sides-mobile); 
        box-sizing: border-box; 
    }
}

/* === SMALL MOBILE (≤576px) === */
@media (max-width: 576px) {
    :root { 
        --content-padding-top: 15px; 
        --content-padding-sides-mobile: 15px; 
        --mobile-header-height: 50px; 
        --mobile-logo-height: 30px; 
    }
    
    .mobile-nav a { font-size: 1.6rem; }
    
    .main-content-area {
        min-height: auto;
        overflow-x: hidden;
    }
    
    /* Project cards */
    .project-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-left: 0;
        padding-right: 0;
        gap: 8px;
    }
    
    .project-card-content {
        width: 100%;
        max-width: 100%;
        gap: 5px;
    }
    
    .project-card-content h3 { 
        font-size: 0.95rem; 
        margin-bottom: 5px;
    }
    
    .project-card-content .project-description { 
        font-size: 0.9rem; 
        -webkit-line-clamp: 4; 
        margin-bottom: 8px;
        min-height: 0; /* Remove forced height constraint on small mobile */
    }
    
    /* Allow meta row to wrap on small screens */
    .project-card-content .project-meta-row { 
        flex-wrap: wrap;
        gap: 8px 12px;
        margin-top: 8px; 
        margin-bottom: 0; 
    }
    
    .project-card-content .project-meta-info {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .project-card-content .project-tags {
        flex: 1 1 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .project-card-content .project-tags .tag { 
        font-size: 0.65rem; 
        padding: 3px 8px; 
        margin-right: 5px; 
        margin-bottom: 5px; 
    }
    
    .project-card > .project-card-image-placeholder { 
        width: 100%;
        max-width: 100%;
        margin-top: 10px;
        height: auto;
    }
    
    .project-card > .project-card-image-placeholder > .carousel-track { 
        gap: 8px;
        grid-template-columns: repeat(3, 1fr) !important; /* Ensure 3 columns */
        width: 100% !important;
    }
    
    .project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item {
        width: 100% !important; /* Fill grid cell completely */
        height: auto;
    }
    
    /* Hide duplicate images (show only first 3) */
    .project-card > .project-card-image-placeholder > .carousel-track > .gallery-thumbnail-item:nth-child(n+4) {
        display: none !important;
    }
    
    /* Typography */
    .presentation-card h1 { font-size: 1.6rem; }
    .presentation-card .name-subtitle { font-size: 0.85rem; margin-left: 4px; }
    .presentation-card .roles { font-size: 0.75rem; letter-spacing: 0.1em; margin-bottom: 20px; }
    .presentation-card .bio { font-size: 0.96rem; line-height: 1.6; }
    .contact-sentence { margin-top: 15px; font-size: 0.8rem; }
    .section-separator { padding-top: 20px; padding-bottom: 10px; width: 100%; max-width: 100%; }
    .section-separator > span { font-size: 0.85rem; padding-right: 10px; }
    .latest-work-grid { width: 100%; max-width: 100%; }
    .project-category-tag { font-size: 0.65rem; padding: 3px 8px; margin-right: 8px; min-width: 60px; text-align: center; }
    
    /* Category pages - match section-separator width behavior */
    hr.category-separator { width: 100%; max-width: 100%; }
    .category-content-column { width: 100%; max-width: 100%; }
    .category-project-list-container { 
        width: 100%; 
        max-width: 100%; 
        max-height: none; 
        overflow-y: visible; 
        padding-right: 0; 
    }
    .category-project-list-container::-webkit-scrollbar { display: none; }
    .category-project-list-container { scrollbar-width: none; }
    
    /* Category */
    .category-header { margin-bottom: 20px; }
    .category-header .category-main-title { font-size: 1.6rem; }
    .category-header .category-name-subtitle { font-size: 0.85rem; }
    .category-header .related-label { letter-spacing: 0.05em; }
    .category-header .related-terms { letter-spacing: 0.1em; }
    .category-header .category-related { font-size: 0.8rem; margin-bottom: 20px; }
    .category-header .category-description, 
    .category-header .category-goal-quote { font-size: 0.85rem; line-height: 1.6; }
    .category-project-list-container { max-height: none; overflow-y: visible; padding-right: 0; }
    .category-project-list-container::-webkit-scrollbar { display: none; }
    .category-project-list-container { scrollbar-width: none; }
    .category-project-card { 
        padding: 18px 0; 
        gap: 12px; 
    }
    .category-project-card-thumbnail { 
        width: 100%; 
        max-width: 100%; 
    }
    .category-project-card-content h3 { font-size: 1rem; }
    .category-project-card-content .project-description { font-size: 0.9rem; max-width: 100%; }
    .category-project-card-content .project-meta .meta-label { font-size: 0.6rem; }
    .category-project-card-content .project-meta p, 
    .category-project-card-content .project-meta span:not(.meta-date):not(.meta-client-separator):not(.client-label):not(.client-name) { 
        font-size: 0.85rem; 
    }
    .category-project-card-content .meta-date, 
    .category-project-card-content .meta-client { font-size: 0.8rem; }
    .category-project-card-content .meta-client-separator { margin-left: 8px; margin-right: 8px; }
    
    /* Articles */
    .articles-list { gap: 0; }
    .article-card { padding-top: 10px; padding-bottom: 10px; }
    .article-header-medium { gap: 8px; margin-bottom: 6px; }
    .article-author-avatar { width: 24px; height: 24px; }
    .article-author-name { font-size: 0.75rem; }
    .article-title { font-size: 1.25rem; line-height: 1.3; margin-bottom: 10px; }
    .article-excerpt { font-size: 0.85rem; line-height: 1.5; margin-bottom: 12px; }
    .article-footer-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .article-meta-left { font-size: 0.75rem; }
    .article-tag { font-size: 0.65rem; padding: 2px 8px; }
    .article-title-main { font-size: 1.6rem; }
    .article-subtitle { font-size: 0.95rem; }
    .article-header-author { gap: 10px; margin-bottom: 20px; }
    .article-author-avatar-large { width: 33px; height: 33px; }
    .article-author-name-large { font-size: 0.9rem; }
    .article-author-bio { font-size: 0.8rem; }
    .article-footer-avatar { width: 44px; height: 44px; }
    
    /* Carousel */
    .project-text-content h3 { font-size: 0.95rem; }
    .project-text-content .project-description { font-size: 0.9rem; }
    .project-text-content .project-tags .tag { font-size: 0.65rem; }
    .latest-work-image-carousel { gap: 10px; padding-left: var(--content-padding-sides-mobile); padding-right: var(--content-padding-sides-mobile); }
    .project-card-image-placeholder.carousel-item { width: 200px; }
    
    /* Footer */
    .site-footer { 
        padding: 30px var(--content-padding-sides-mobile); 
        margin-top: 30px;
    }
    .footer-content { gap: 30px; }
    .footer-social-icons { gap: 8px; }
    .footer-icon { width: 36px; height: 36px; }
    .footer-credits { gap: 3px; }
    .footer-credits-line span { font-size: 11.7px; }
    .footer-credits-line strong { font-size: 15.6px; margin-left: 3px; }
    .footer-credits-line { gap: 0; }
    
    /* Project Detail */
    .project-transmission-start,
    .project-transmission-end { 
        font-size: 11px;
        letter-spacing: 0.15em;
    }
}