/* ================================
   CSS VARIABLES & GLOBAL RESETS
   ================================ */

:root {
    --primary-bg: #43438E;
    --primary-text: #e8e8e8e0;
    --accent-color: #AB6E7E;
    --title-pink: #E3A8B8; /* lighter pink for large titles; about 4.3:1 on the purple */
    --title-muted: #c7b3ad; /* --title-color at 75% over the purple, but opaque so shadows read cleanly */
    --title-shadow: 0.25rem 0.25rem 0 rgba(20, 20, 60, 0.5);
    --accent-light: rgba(171, 110, 126, 0.3);
    --accent-medium: rgba(171, 110, 126, 0.5);
    --accent-hover: #8d5966;
    --title-color: #f3d8b7bf;
    --box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.5);
    --transition-standard: all 0.3s ease;
    
    --artist-color1: rgba(171, 110, 126, 0.15);
    --artist-border1: rgba(171, 110, 126, 0.3);
    --artist-color2: rgba(107, 142, 187, 0.15);
    --artist-border2: rgba(107, 142, 187, 0.3);
    --artist-color3: rgba(134, 124, 192, 0.15);
    --artist-border3: rgba(134, 124, 192, 0.3);
    
    --sidebar-width: 5%;
}

/* Global styles and resets */
body {
    margin: 0;
    padding: 0;
    background-color: var(--primary-bg);
    font-family: "Space Grotesk", serif;
    color: var(--primary-text);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow-x: hidden;
}

/* Hide scrollbars universally */
::-webkit-scrollbar { display: none; }
* { -ms-overflow-style: none; scrollbar-width: none; }

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-standard);
}
a:hover { color: var(--accent-color); }

/* ================================
   DESKTOP LAYOUT (Base Styles)
   ================================ */

.container {
    display: flex;
    width: 100%;
    min-height: 90vh;
    position: relative;
    align-items: flex-start;
}

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    padding: 1.25rem;
    background-color: #f5f5f5;
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
    z-index: 1000;
}

.sidebar ul {
    list-style: none;
    width: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}

.sidebar ul li {
    margin-bottom: 1.875rem;
}

.sidebar ul li:first-child {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    margin: 0;
}

.sidebar-logo {
    width: 2.8125rem;
    height: auto;
}

.sidebar ul li a {
    font-size: 1rem;
    color: #43438E;
}

/*
.about-image {
    position: fixed;
    top: 0;
    right: 0;
    width: 20%; 
    height: 100vh; /* Full height 
    object-fit: cover; /* Crop image to fit the area nicely 
    z-index: 1; /* Behind the sidebar but above background 

   */



/* Main content areas */
.content {
    width: 40%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    flex-shrink: 0;
    margin-left: calc(var(--sidebar-width) + 5%);
}

.about-content {
    width: 25%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    flex-shrink: 0;
    margin-left: calc(var(--sidebar-width) + 5%);
    padding-right: 2rem;
}

/* Content columns */
.about-column, 
.works-column, 
.essay-content,
.comic-column {
    width: 65%;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: scroll;
    margin-left: calc(var(--sidebar-width) + 5%);
}

.works-column {
    padding-top: 10vh;
}

.essay-content {
    padding-top: 5vh;
    padding-right: 5vh;
    text-align: justify;
    text-justify: inter-word;
}

.comic-column {
    align-items: flex-start;
    padding-left: 5%;
}

/* ================================
   TYPOGRAPHY
   ================================ */

h1, .about-title {
    font-size: 5em;
    line-height: 1.2;
    color: var(--accent-color);
    transform: scale(1);
    opacity: 1;
}

.about-title {
    color: var(--title-pink);
    text-shadow: var(--title-shadow);
    font-size: 4.5em !important;
    margin-bottom: 0.9375rem;
    letter-spacing: -0.02em;
    text-align: left;
    padding-left: 0;
}

.subtitle {
    font-size: 1em;
}

/* Essay content typography */
.essay-content h1 { 
    text-shadow: var(--title-shadow);
    font-size: 3.5rem; 
    color: var(--title-muted);
    margin-bottom: 1rem;
}

.essay-content .artist-name {
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    opacity: 1;
}

.essay-content .pdf-link {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 1;
}

.essay-content .pdf-link a {
    color: var(--accent-color);
    text-decoration: none;
    transition: var(--transition-standard);
}

.essay-content .pdf-link a:hover {
    color: var(--accent-hover);
}

.about-column h1 { 
    font-size: 3.5rem; 
    color: var(--title-color);
}

/* ================================
   HOMEPAGE ANIMATION
   ================================ */

.index-page h1 {
    transform: scale(0.8);
    opacity: 0;
    animation: zoomInFade 3s ease forwards;
}

@keyframes zoomInFade {
    from { transform: scale(0.2); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#animation-container {
    position: fixed;
    top: 50%;
    transform: translateY(-60%);
    right: -7%;
    width: 60vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    pointer-events: none; 
    z-index: 1;
}

/* ================================
   WORKS GRID
   ================================ */

.uniform-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.5625rem;
    width: 80%;
    margin-top: 0.9375rem;
    position: relative;
    padding-left: 5%;
    padding-top: 10%;
}

.artist-item {
    position: relative;
    min-height: 17.5rem;
    background-color: var(--artist-color1);
    border: 2px solid var(--artist-border1);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    cursor: pointer;
    transition: var(--transition-standard);
    box-shadow: var(--box-shadow);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
opacity: 0.7; /* 70% visible */
}

.artist-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--artist-color1);
    opacity: 0.85;
    z-index: 1;
    transition: var(--transition-standard);
}

.artist-item:hover::before {
    opacity: 0.7;
}

.artist-item > * {
    position: relative;
    z-index: 2;
}

.artist-item:hover {
    transform: scale(1.03);
    z-index: 10;
    box-shadow: 0 0.5rem 1.5625rem rgba(0, 0, 0, 0.5);
}

/* Color variations */
.artist-item:nth-child(even) {
    background-color: var(--artist-color2);
    border-color: var(--artist-border2);
}

.artist-item:nth-child(3n) {
    background-color: var(--artist-color3);
    border-color: var(--artist-border3);
}

/* Artist item text */
.artist-name {
    color: #000000 !important;
    background-color: rgba(255, 255, 255, 0.8) !important; /* Dark background box */
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.375rem !important;
    display: inline-block !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}

.artist-brief {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.7) !important; /* Slightly lighter background */
    padding: 0.375rem 0.625rem !important;
    border-radius: 0.25rem !important;
    display: inline-block !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
    font-size: 75%;
}

.artist-media {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.6) !important; /* Even lighter background */
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
    display: inline-block !important;
    font-size: 0.85rem !important;
    font-style: italic !important;
}

.artist-brief a:hover, 
.artist-name a:hover {
    text-decoration: underline;
}

/* ================================
   COMIC VIEWER
   ================================ */

.comic-title {
    text-shadow: var(--title-shadow);
    color: var(--title-muted);
    font-size: 3.5rem;
    font-family: "Space Grotesk", serif;
    font-weight: 500;
    margin-bottom: 2rem;
    width: 100%;
    line-height: 1.2;
    word-break: break-word;
    overflow-wrap: break-word;
}

.comic-viewer {
    width: 100%;
    max-width: 28.125rem;
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 0.3125rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 0;
    align-self: flex-start;
    margin-left: 0;
}

.comic-panel {
    display: none;
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

.comic-panel.active {
    display: block;
}

.panel-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.comic-panels {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Navigation buttons */
.nav-buttons {
    display: flex;
    justify-content: center;
    margin-top: 1.25rem;
    gap: 1.25rem;
    width: 100%;
}

.nav-button {
    background-color: var(--accent-color);
    color: var(--primary-text);
    border: none;
    padding: 0.625rem 1.25rem;
    border-radius: 0.3125rem;
    cursor: pointer;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    transition: background-color 0.3s ease;
    flex: 1;
    max-width: 7.5rem;
}

.nav-button:hover {
    background-color: var(--accent-hover);
}

.nav-button:disabled {
    background-color: var(--accent-light);
    cursor: not-allowed;
}

.panel-counter {
    text-align: center;
    margin: 0.9375rem 0 0.625rem 0;
    font-size: 0.875rem;
    color: var(--accent-hover);
    font-family: "Space Grotesk", sans-serif;
    width: 100%;
}

/* ================================
   BACK BUTTON
   ================================ */

.arrow-back {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1em;
    text-decoration: none;
    z-index: 10;
    text-align: right;
    margin-right: 20%;
}

.arrow-back span {
    display: inline-block;
    color: #ffffffbf;
    transition: all 0.5s ease;
    position: relative;
    transform: translateX(0);
}

.arrow-back:hover span {
    color: #b37a89;
}

.arrow-back .arrow::before {
    content: "←"; 
    margin-right: 0.3125rem;
}

/* Hover animation */
.arrow-back:hover span:nth-child(1) { transform: translateX(-2px); transition-delay: 0.1s; }
.arrow-back:hover span:nth-child(2) { transform: translateX(-4px); transition-delay: 0.15s; }
.arrow-back:hover span:nth-child(3) { transform: translateX(-6px); transition-delay: 0.2s; }
.arrow-back:hover span:nth-child(4) { transform: translateX(-4px); transition-delay: 0.25s; }
.arrow-back:hover span:nth-child(5) { transform: translateX(-2px); transition-delay: 0.3s; }
.arrow-back:hover span:nth-child(6) { transform: translateX(0); transition-delay: 0.35s; }
.arrow-back:hover span:nth-child(7) { transform: translateX(2px); transition-delay: 0.4s; }




/* About page specific text styling */
.about-text {
    width: 60% !important; /* Reduced from 65% to create more right margin */
    padding-right: 20% !important; /* Add significant right padding */
    text-align: justify !important; /* Justify the text */
    text-justify: inter-word !important; /* Better word spacing for justification */
}

/* Ensure paragraphs in about-text have proper spacing and justification */
.about-text p {
    text-align: justify;
    text-justify: inter-word;
    line-height: 1.6;
    margin-bottom: 1.2em;
}

/* Headings in about-text maintain their styling but get proper spacing */
.about-text h1,
.about-text h2,
.about-text h3 {
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.about-text h1:first-child {
    margin-top: 0;
}

/* Mobile responsive adjustments for about-text */
@media (max-width: 768px) {
    .about-text {
        width: 85% !important; /* Adjust for mobile */
        padding-right: 5% !important; /* Reduce right padding on mobile */
    }
}

@media (max-width: 480px) {
    .about-text {
        width: 90% !important;
        padding-right: 3% !important;
    }
    
    .about-text p {
        font-size: 1rem;
        line-height: 1.5;
    }
}

/* ================================
   VIDEO CONTAINER
   ================================ */

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-bottom: 2rem;
    max-width: 100%;
    box-shadow: var(--box-shadow);
    background-color: var(--accent-light);
    border-radius: 0.3125rem
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.3125rem;
    transition: var(--transition-standard);
}

/* ================================
   RESPONSIVE BREAKPOINTS
   ================================ */

/* Large desktop */
@media (min-width: 1200px) {
    .uniform-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet */
@media (max-width: 992px) {
    h1, .about-title {
        font-size: 4em;
    }
    
    .about-title {
        font-size: 3em;
        margin-right: 10%;
    }
    
    .content, .about-content {
        width: 50%;
    }
    
    .comic-viewer {
        max-width: 25rem;
    }
    
    .comic-title {
        font-size: 2.2rem;
        padding-left: 5%;
    }
}

/* Mobile */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 5%;
    }
    
    body {
        display: block;
        padding-top: 3.75rem;
    }
    
    .container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow-x: hidden;
        margin-bottom: 1.25rem;
    }
    
    /* Mobile sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3.75rem;
        padding: 0 1.25rem;
        background-color: #f5f5f5;
        z-index: 100;
        box-shadow: 0 2px 0.625rem rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
    }
    
    .sidebar ul {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .sidebar ul li {
        margin: 0 0.9375rem;
        display: flex;
        align-items: center;
    }
    
    .sidebar ul li:first-child {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .sidebar-logo {
        width: 1.875rem;
        height: auto;
    }
    
    /* Mobile content */
    .content, 
    .about-content,
    .about-column, 
    .works-column, 
    .essay-content, 
    .comic-column {
        width: 90%;
        margin: 1.25rem auto;
        height: auto;
        min-height: auto;
        padding: 0;
        overflow-y: visible;
    }
    
    .about-content {
        text-align: center;
        align-items: center;
        margin-bottom: 1.875rem;
    }
    
    h1, .about-title {
        font-size: 3
        em;
        text-align: center;
    }
    
    .subtitle {
        text-align: center;
    }
    
    .arrow-back {
        margin: 1.25rem auto;
        text-align: center;
        display: block;
    }
    
    .uniform-grid {
        grid-template-columns: 1fr;
        width: 90%;
        padding: 0;
        margin: 1.25rem auto;
        gap: 0.9375rem;
    }
    
    .comic-column {
        align-items: center;
    }
    
    .comic-title {
        font-size: 2rem;
        padding-left: 0;
        text-align: center;
        width: 90%;
        margin: 0 auto 1.25rem auto;
    }
    
    .comic-viewer {
        width: 90%;
        max-width: none;
        align-self: center;
        margin-bottom: 1.875rem;
    }
    
    #animation-container {
        display: none;
    }

    .artist-item {
        aspect-ratio: auto;
        min-height: 7.5rem;
        padding: 0.9375rem;
    }

    .artist-name {
        font-size: 1.2em;
        margin-bottom: 0.5em;
    }

    .artist-brief {
        font-size: 1em;
        line-height: 1.4;
        margin-bottom: 0.5em;
    }

    .artist-media {
        font-size: 0.9em;
    }
    
    .video-container {
        margin: 0 auto 1.5rem auto;
        width: 90%;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    body {
        padding-top: 3.125rem;
    }
    
    .sidebar ul li {
        margin: 0 0.625rem;
    }
    
    .sidebar ul li a {
        font-size: 0.875rem;
    }
    
    h1, .about-title {
        font-size: 2.5em;
    }
    
    .about-title {
        font-size: 2em;
        margin-right: 10%;
    }
    
    .subtitle {
        font-size: 0.9em;
    }
    
    .comic-title {
        font-size: 1.8rem;
    }
    
    .comic-viewer {
        padding: 0.625rem;
    }
    
    .nav-button {
        padding: 0.5rem 0.9375rem;
        font-size: 0.875rem;
        max-width: 6.25rem;
    }
    
    .panel-counter {
        font-size: 0.75rem;
    }
    
    .essay-content h1 {
        font-size: 2rem;
    }
    
    .essay-content p {
        font-size: 1rem;
        line-height: 1.5rem;
        text-align: justify;
        text-justify: inter-word;
    }
    
    .video-container {
        margin-bottom: 1rem;
    }
}

/* Extra small mobile */
@media (max-width: 375px) {
    body {
        padding-top: 2.8125rem;
    }
    
    .sidebar ul li {
        margin: 0 0.5rem;
    }
    
    .sidebar ul li a {
        font-size: 0.8125rem;
    }
    
    h1, .about-title {
        font-size: 2em;
    }
    
    .about-title {
        font-size: 1.8em;
    }
    
    .comic-title {
        font-size: 1.5rem;
    }
    
    .comic-viewer {
        padding: 0.5rem;
    }
    
    .nav-buttons {
        gap: 0.625rem;
    }
    
    .nav-button {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
        max-width: 5.625rem;
    }
}
/* By default, hide return button (will be shown by media queries) */
.return-button {
    display: none;
}

/* Show the return button only on mobile/tablet (when sidebar is horizontal) */
@media (max-width: 768px) {
    .return-button {
        display: flex;
        align-items: center;
    }
    
    /* Style for the return button on mobile */
    .return-button a {
        color: #AB6E7E !important;
        font-weight: 600 !important;
        padding: 0.1875rem 0.375rem;
        border-radius: 0.25rem;
        background: rgba(171, 110, 126, 0.1);
        transition: all 0.3s ease;
        font-size: 0.75rem !important;
    }
    
    .return-button a:hover {
        color: #8d5966 !important;
        background: rgba(171, 110, 126, 0.2);
    }
}

@media (max-width: 480px) {
    .return-button a {
        font-size: 0.6875rem !important;
        padding: 2px 0.25rem;
    }
}

@media (max-width: 768px) {
    .about-title {
        font-size: 2.8em !important;
        line-height: 1.3 !important;
        text-align: left !important;
    }
    
    .about-content {
        text-align: left !important;
    }
}

/* iPad and tablet-specific styles */
@media (max-width: 1024px) and (min-width: 769px) {
    :root {
        --sidebar-width: 5%;
    }
    
    body {
        display: block;
        padding-top: 3.75rem;
    }
    
    .container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow-x: hidden;
        margin-bottom: 1.25rem;
    }
    
    /* iPad sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 3.75rem;
        padding: 0 1.25rem;
        background-color: #f5f5f5;
        z-index: 100;
        box-shadow: 0 2px 0.625rem rgba(0, 0, 0, 0.3);
        display: flex;
        align-items: center;
    }
    
    .sidebar ul {
        width: 100%;
        flex-direction: row;
        justify-content: center;
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .sidebar ul li {
        margin: 0 1.25rem;
        display: flex;
        align-items: center;
    }
    
    .sidebar ul li:first-child {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        height: 100%;
        display: flex;
        align-items: center;
    }
    
    .sidebar-logo {
        width: 2.1875rem;
        height: auto;
    }
    
    /* iPad content */
    .content, 
    .about-content,
    .about-column, 
    .works-column, 
    .essay-content, 
    .comic-column {
        width: 85%;
        margin: 1.25rem auto;
        height: auto;
        min-height: auto;
        padding: 0;
        overflow-y: visible;
    }
    
    .about-content {
        text-align: center;
        align-items: center;
        margin-bottom: 1.875rem;
    }
    
    h1, .about-title {
        font-size: 4em;
        text-align: center;
    }
    
    .subtitle {
        text-align: center;
        font-size: 1.1em;
    }
    
    .arrow-back {
        margin: 1.25rem auto;
        text-align: center;
        display: block;
    }
    
    .uniform-grid {
        grid-template-columns: repeat(2, 1fr);
        width: 80%;
        padding: 0;
        margin: 1.25rem auto;
        gap: 1.25rem;
    }
    
    .return-button {
        display: flex;
        align-items: center;
    }
    
    .return-button a {
        color: #AB6E7E !important;
        font-weight: 600 !important;
        padding: 0.3125rem 0.625rem;
        border-radius: 0.25rem;
        background: rgba(171, 110, 126, 0.1);
        transition: all 0.3s ease;
        font-size: 0.875rem !important;
    }
    
    .return-button a:hover {
        color: #8d5966 !important;
        background: rgba(171, 110, 126, 0.2);
    }
    
    #animation-container {
        display: none;
    }
    
    .comic-column {
        align-items: center;
    }
    
    .comic-title {
        font-size: 2.5rem;
        padding-left: 0;
        text-align: center;
        width: 80%;
        margin: 0 auto 1.25rem auto;
    }
    
    .comic-viewer {
        width: 70%;
        max-width: 31.25rem;
        align-self: center;
        margin-bottom: 1.875rem;
    }
    
    .video-container {
        margin: 0 auto 1.5rem auto;
        width: 80%;
    }
}

/* Language Toggle Button */
.language-toggle {
    background-color: #AB6E7E;
    color: #f3d8b7bf;
    border: none;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    cursor: pointer;
    border-radius: 0.3125rem;
    margin-bottom: 1.875rem;
    transition: all 0.3s ease;
}

.language-toggle:hover {
    background-color: #8d5966;
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.language-toggle:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .language-toggle {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
}

/* Work Info Section - Museum Label Style */
.work-info {
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    padding-top: 2rem;
}

.work-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #f3d8b7bf;
    margin-bottom: 0.8rem;
    line-height: 1.4;
    font-family: 'EB Garamond', serif;
}

.work-description {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #000000;
    margin: 0 0 2rem 0;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 300;
    background-color: #ffffff;
    padding: 1.2rem;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.4);
}

.work-description b {
    font-weight: 300;
}

/* Responsive adjustments for work info */
@media (max-width: 1024px) {
    .work-info {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
        padding-top: 1.5rem;
    }

    .work-title {
        font-size: 1rem;
    }

    .work-description {
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .work-info {
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding-top: 1rem;
    }

    .work-title {
        font-size: 0.95rem;
    }

    .work-description {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* ================================
   ABOUT PAGE: readability
   Scoped to body.about-page so artist/essay pages are unaffected.
   ================================ */
.about-page .essay-content {
    text-align: left;
    padding-bottom: 12vh;
}

/* Comfortable reading column: ~65 characters per line */
.about-page .essay-body {
    max-width: 65ch;
}

.about-page .essay-body p {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #f2f2f2;
    text-align: left;
    hyphens: manual;
    margin: 0 0 1.4em;
}

/* Larger opening paragraph */
.about-page .essay-body p:first-child {
    font-size: 1.35rem;
}

/* Layered background: soft glow over the purple, plus faint grain */
.about-page {
    background-image: radial-gradient(ellipse 80% 70% at 60% 35%, #5a5aa8 0%, #4a4a9a 35%, #43438E 60%, #34346f 100%);
    background-attachment: fixed;
}

.about-page::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reading card: archival paper with dark ink */
.about-page .reading-card {
    flex-shrink: 0;
    align-self: flex-start;
    box-sizing: border-box;
    max-width: calc(65ch + 6rem);
    padding: 2rem 3rem 1.5rem;
    background: #f1e4d0;
    border: 1px solid #d9c6a8;
    border-radius: 0.1875rem;
    box-shadow: 0.5rem 0.5rem 0 rgba(20, 20, 60, 0.35);
}

.about-page .essay-body p {
    color: #2b2a5a;
}

/* EN | ID switch */
.about-page .lang-switch {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: 0.12em;
}

.about-page .lang-sep {
    color: rgba(43, 42, 90, 0.4);
}

.about-page .lang-btn {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 0.5rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: #55548a;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.about-page .lang-btn:hover {
    color: #2b2a5a;
}

.about-page .lang-btn[aria-pressed="true"] {
    color: #2b2a5a;
    border-bottom-color: #8d5966;
}

.about-page .lang-btn:focus-visible {
    outline: 0.1875rem solid #43438E;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .about-page .essay-body p {
        font-size: 1.125rem;
        line-height: 1.65;
    }
    .about-page .essay-body p:first-child {
        font-size: 1.2rem;
    }
    .about-page .reading-card {
        padding: 1.5rem 1.25rem;
        box-shadow: 0.3125rem 0.3125rem 0 rgba(20, 20, 60, 0.35);
    }
}


/* ================================
   ABOUT PAGE: stack + credits index card
   ================================ */
.about-page .about-stack {
    flex-shrink: 0;
    align-self: flex-start;
    box-sizing: border-box;
    max-width: calc(65ch + 6rem);
}

.about-page .credits-card {
    position: relative;
    box-sizing: border-box;
    width: min(100%, 31.25rem);
    margin: -0.6rem 0 0 auto;
    padding: 1.5rem 1.75rem 1.4rem;
    background: #e4def0;
    border: 1px solid #c7bedd;
    border-radius: 0.1875rem;
    box-shadow: 0.375rem 0.375rem 0 rgba(20, 20, 60, 0.35);
    color: #2b2a5a;
    transform: rotate(-1deg);
}

.about-page .credits-card[hidden] {
    display: none;
}

.about-page .credits-card::before {
    content: "re/";
    position: absolute;
    top: 0.7rem;
    right: 1.1rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #8d5966;
}

.about-page .credits-title {
    margin: 0 0 1rem;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    color: #2b2a5a;
}

.about-page .credits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.5rem;
}

.about-page .credits-grid h3 {
    margin: 0 0 0.35rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(43, 42, 90, 0.35);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8d5966;
}

.about-page .credits-grid ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.about-page .credits-grid li {
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.4;
    color: #2b2a5a;
}

@media (max-width: 768px) {
    .about-page .credits-card {
        transform: none;
        margin-top: 1rem;
        padding: 1.25rem 1.1rem 1.1rem;
        box-shadow: 0.3125rem 0.3125rem 0 rgba(20, 20, 60, 0.35);
    }
}

@media (max-width: 560px) {
    .about-page .credits-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================
   NAVIGATION: lean horizontal bar
   Replaces the old left sidebar / mobile strip on every page.
   Uses !important to override the older responsive sidebar rules and
   the inline per-page nav styles.
   ================================ */
{ --sidebar-width: 0%; }

.sidebar {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: auto !important;
    padding: 0 !important;
    display: block !important;
    z-index: 1000;
    box-shadow: none !important;
}

.sidebar ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.5rem;
    height: 3.25rem !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 1.5rem !important;
    list-style: none;
}

.sidebar ul li {
    position: static !important;
    margin: 0 !important;
}

/* logo on the left, links on the right */
.sidebar ul li:first-child {
    margin-right: auto !important;
    transform: none !important;
    height: auto !important;
    display: flex !important;
    align-items: center;
}
.sidebar-logo { width: 2.125rem !important; display: block; }

/* the back link duplicates Home; hide in the prototype */
.sidebar .return-button,
.sidebar .back-link { display: none !important; }

.sidebar ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.9rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: #43438E !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none;
    transition: color .2s ease;
}
.sidebar ul li a:hover { color: #8d5966 !important; }
.sidebar ul li a[aria-current="page"] {
    color: #2b2a5a !important;
    font-weight: 600;
    box-shadow: inset 0 -2px 0 #8d5966;
}
.sidebar ul li a:focus-visible { outline: 0.1875rem solid #43438E; outline-offset: -3px; }

/* give page content room under the fixed nav */
body { padding-top: 0 !important; }
.about-content,
.essay-content,
.about-column,
.works-column { scroll-padding-top: 3.75rem; }
.essay-content,
.works-column { padding-top: 4.375rem !important; }

/* The bar itself */
.sidebar {
    background: rgba(255, 255, 255, 0.78) !important;
    -webkit-backdrop-filter: blur(0.625rem);
    backdrop-filter: blur(0.625rem);
    border-bottom: 1px solid rgba(67, 67, 142, 0.15);
    box-shadow: 0 2px 0.625rem rgba(20, 20, 60, 0.12) !important;
}
.sidebar ul { height: 2.75rem !important; }
.sidebar-logo { width: 1.75rem !important; }

@media (max-width: 768px) {
    .sidebar ul { padding: 0 0.5rem !important; gap: 0; }
    .sidebar ul li a { padding: 0 0.6rem; font-size: 0.9rem; }
}

/* Room under the fixed nav on comic pages */
.comic-column {
    padding-top: 4rem !important;
}


/* ================================
   WORKS PAGE: tiles fill their column edge to edge
   The title block on the left is unchanged.
   Uses !important to override the older card styles.
   ================================ */
/* column: full height under the nav, tiles consume all of it */
.works-column {
    height: calc(100vh - 2.8125rem) !important;
    margin-top: 2.8125rem !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.uniform-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.artist-item {
    grid-column: span 3;
    position: relative;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 1.1rem 1.4rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background-size: cover !important;
    background-position: center !important;
    isolation: isolate;
}
.artist-item:nth-child(5) { grid-column: span 6; }

/* readable text over any image */
.artist-item::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to top, rgba(24, 24, 70, 0.92) 0%, rgba(24, 24, 70, 0.55) 50%, rgba(24, 24, 70, 0.1) 100%);
    transition: opacity .3s ease;
}
.artist-item:hover::before { opacity: 0.7; }

.artist-item .artist-name {
    margin: 0 0 .25rem !important;
    padding: 0 !important;
    background: none !important;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.4rem, 2.4vw, 2.2rem) !important;
    font-weight: 600;
    line-height: 1.1;
    color: #fff !important;
}
.artist-item .artist-brief {
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    max-width: 44ch;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem) !important;
    line-height: 1.35;
    color: #f3d8b7 !important;
}
.artist-item .artist-brief a { color: #fff !important; text-decoration: underline; text-underline-offset: 0.1875rem; }
.artist-item .artist-brief a:hover { color: #E3A8B8 !important; }

/* whole tile is clickable (except Hans, which has two works) */
.artist-item:not(:nth-child(4)) .artist-brief a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* tablet and phone: the page stacks, so tiles stack and the page scrolls */
@media (max-width: 1024px) {
    .works-column { height: auto !important; margin-top: 1.25rem !important; overflow: visible !important; }
    .uniform-grid { grid-template-rows: none !important; height: auto !important; }
    .artist-item { min-height: 38vh !important; }
}
@media (max-width: 768px) {
    .uniform-grid { grid-template-columns: 1fr !important; }
    .artist-item, .artist-item:nth-child(5) { grid-column: span 1; min-height: 50vh !important; }
}


/* ================================
   DESKTOP SCALE
   Sizes are in rem, so on desktop-width windows the whole design scales to 75%
   (the look it had at 75% browser zoom). Phones and tablets keep the 16px base.
   ================================ */
@media (min-width: 1025px) {
    html { font-size: 12px; }
}


/* ================================
   ESSAY PAGE (Qih): readable long-form text
   Scoped to body.essay-page. Same recipe as the About page: a paper reading
   card, a ~65 character column, EB Garamond at a comfortable size and spacing.
   ================================ */
.essay-page .essay-content {
    text-align: left;
    padding-bottom: 12vh;
}

/* the essay itself, on paper */
.essay-page .essay-body {
    box-sizing: border-box;
    max-width: none;
    /* card is as wide as the white box above; the text column stays ~65 characters */
    padding: 2rem max(3rem, calc((100% - 65ch) / 2)) 1.5rem;
    background: #f1e4d0;
    border: 0.0625rem solid #d9c6a8;
    border-radius: 0.1875rem;
    box-shadow: 0.5rem 0.5rem 0 rgba(20, 20, 60, 0.35);
    color: #2b2a5a;
}

.essay-page .essay-body p {
    margin: 0 0 1.4em;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 1.2rem;
    line-height: 1.7;
    color: #2b2a5a;
    text-align: left;
    hyphens: manual;
}

/* drop cap on the opening paragraph */
.essay-page .essay-body > p:first-child::first-letter {
    float: left;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 700;
    font-size: 5.6rem;
    line-height: 0.78;
    padding: 0.35rem 0.6rem 0 0;
    color: #8d5966;
}

.essay-page .essay-body h2 {
    position: relative;
    margin: 2.6rem 0 1rem;
    padding-top: 1.4rem;
    border-top: 0.0625rem solid rgba(43, 42, 90, 0.35);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.2;
    color: #2b2a5a;
    text-shadow: none;
    text-align: left;
}
.essay-page .essay-body h2::before {
    content: "";
    position: absolute;
    top: -0.1875rem;
    left: 0;
    width: 3.5rem;
    height: 0.3125rem;
    background: #8d5966;
}

/* download as a button, not a stray link */
.essay-page .pdf-download {
    margin-top: 2rem;
}
.essay-page .pdf-download a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    background: #f1e4d0;
    color: #2b2a5a;
    border: 0.0625rem solid #d9c6a8;
    border-radius: 0.125rem;
    box-shadow: 0.25rem 0.25rem 0 rgba(20, 20, 60, 0.4);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}
.essay-page .pdf-download a:hover { color: #8d5966; transform: translate(-0.0625rem, -0.0625rem); }
.essay-page .pdf-download a:focus-visible { outline: 0.1875rem solid #fff; outline-offset: 0.1875rem; }

@media (max-width: 768px) {
    .essay-page .essay-body { padding: 1.5rem 1.1rem 1.1rem; box-shadow: 0.3125rem 0.3125rem 0 rgba(20, 20, 60, 0.35); }
    .essay-page .essay-body p { font-size: 1.125rem; line-height: 1.65; }
    .essay-page .essay-body h2 { font-size: 1.5rem; margin-top: 2rem; }
    .essay-page .essay-body > p:first-child::first-letter { font-size: 4.6rem; padding-right: 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .essay-page .pdf-download a:hover { transform: none; }
}

/* The scrolling content column gets top padding for the nav, so shrink its height
   by the same amount. Otherwise it is taller than the window and the last part of
   the content (credits card, download button) cannot be scrolled into view. */
@media (min-width: 1025px) {
    .essay-content { height: calc(100vh - 4.375rem) !important; }
    /* these two also add 12vh of bottom padding, so take that off the height too */
    .about-page .essay-content,
    .essay-page .essay-content { height: calc(100vh - 4.375rem - 12vh) !important; }
}


/* ================================
   COMIC PAGES (Hans): a scrapbook deck
   Scoped to body.comic-page. Each comic page is a taped print in a tilted stack;
   the top one flicks away on "next". comic-script.js sets data-pos on each card
   (0 = top, 1-2 = peeking behind, far = hidden, gone = already turned).
   ================================ */
.comic-page .comic-column {
    overflow-x: hidden;
    padding-bottom: 4rem;
    padding-right: 1rem;
}

/* title: same treatment as the other artist pages (muted colour, hard shadow, underline).
   The comic-title rules further up already set that; just keep it left-aligned. */
.comic-page .comic-title { text-align: left; }
/* artist line: the same white box as the other pages, as wide as the comic */
.comic-page .work-description { width: min(100%, 40rem); box-sizing: border-box; margin: 0 0 1.75rem 0.25rem; }

/* the viewer is no longer a white box: the cards are the white things */
.comic-page .comic-viewer {
    width: min(100%, 40rem);
    max-width: none;
    padding: 0;
    background: none;
    box-shadow: none;
    margin-left: 0.25rem;
}

.comic-page .comic-panels {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0.25rem 0 2.5rem;
    touch-action: pan-y;
}

.comic-page .comic-panel {
    position: absolute;
    inset: 0;
    display: block;
    box-sizing: border-box;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.125rem;
    box-shadow: 0.4rem 0.4rem 0 rgba(20, 20, 60, 0.45);
    cursor: pointer;
    transition: transform 0.55s cubic-bezier(0.34, 1.35, 0.64, 1), opacity 0.35s ease, visibility 0s linear 0.55s;
    transform: rotate(var(--r, 0deg));
}
.comic-page .comic-panel .panel-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.comic-page .comic-panel[data-pos="0"],
.comic-page .comic-panel[data-pos="1"],
.comic-page .comic-panel[data-pos="2"] { visibility: visible; transition-delay: 0s; }
.comic-page .comic-panel[data-pos="0"] { z-index: 10; }
.comic-page .comic-panel[data-pos="1"] {
    z-index: 9;
    transform: translate(0.9rem, 0.7rem) rotate(calc(var(--r) * 1.6 + 1.5deg));
}
.comic-page .comic-panel[data-pos="2"] {
    z-index: 8;
    transform: translate(-0.8rem, 1.4rem) rotate(calc(var(--r) * -1.4 - 1.5deg));
}
.comic-page .comic-panel[data-pos="far"] {
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 1.4rem);
}
.comic-page .comic-panel[data-pos="gone"] {
    z-index: 11;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(calc(var(--dir) * 55%), -6%) rotate(calc(var(--dir) * 16deg));
}
.comic-page .comic-panel[data-pos="0"]:hover {
    transform: translateY(-0.3rem) rotate(calc(var(--r) * 0.4));
}

/* washi tape on whichever card is on top */
.comic-page .comic-panel[data-pos="0"]::before {
    content: "";
    position: absolute;
    top: -0.8rem;
    left: 50%;
    width: 6rem;
    height: 1.6rem;
    margin-left: -3rem;
    background: rgba(227, 168, 184, 0.88);
    transform: rotate(-3deg);
    clip-path: polygon(0 8%, 4% 0, 8% 8%, 12% 0, 100% 0, 96% 50%, 100% 100%, 12% 100%, 8% 92%, 4% 100%, 0 92%, 4% 50%);
}
.comic-page .comic-panel:nth-child(3n + 2)[data-pos="0"]::before { background: rgba(243, 216, 183, 0.9); transform: rotate(2deg); }
.comic-page .comic-panel:nth-child(3n)[data-pos="0"]::before { background: rgba(140, 172, 214, 0.88); transform: rotate(-1deg); }

/* counter and buttons */
.comic-page .panel-counter {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--primary-text);
    text-align: left;
}

.comic-page .nav-buttons {
    margin-top: 0;
    gap: 1rem;
    justify-content: flex-start;
}
.comic-page .nav-button {
    flex: 1 1 0;
    max-width: 11rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    background: #f1e4d0;
    color: #2b2a5a;
    border: 0.0625rem solid #d9c6a8;
    border-radius: 0.125rem;
    box-shadow: 0.25rem 0.25rem 0 rgba(20, 20, 60, 0.4);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease;
}
.comic-page #nextButton { background: var(--title-pink); border-color: var(--title-pink); }
.comic-page .nav-button:hover:not(:disabled) { transform: translate(-0.0625rem, -0.0625rem); background-color: #fff; }
.comic-page .nav-button:active:not(:disabled) { transform: translate(0.25rem, 0.25rem); box-shadow: 0 0 0 rgba(20, 20, 60, 0.4); }
.comic-page .nav-button:disabled { opacity: 0.45; box-shadow: none; cursor: not-allowed; background: #f1e4d0; }
.comic-page .nav-button:focus-visible { outline: 0.1875rem solid #fff; outline-offset: 0.1875rem; }

/* link to the artist's other comic */
.comic-page .other-comic { margin: 2rem 0 0 0.25rem; font-size: 1rem; }
.comic-page .other-comic a { color: var(--title-pink); font-weight: 600; text-underline-offset: 0.25em; }
.comic-page .other-comic a:hover { color: #fff; }
.comic-page .other-comic a:focus-visible { outline: 0.1875rem solid #fff; outline-offset: 0.1875rem; }

/* big screens: size the deck to the window so a whole page is visible */
@media (min-width: 1025px) {
    .comic-page .comic-column { height: calc(100vh - 4.375rem) !important; }
    .comic-page .comic-viewer { width: min(100%, 40rem, 68vh); }
    .comic-page .work-description { width: min(100%, 40rem, 68vh); }
}

@media (max-width: 768px) {
    .comic-page .comic-column { align-items: flex-start; width: 90%; padding-right: 0; overflow-x: visible; }
    .comic-page .comic-title { width: 100%; margin: 0 0 1rem; font-size: 2rem; text-align: left; }
    .comic-page .comic-viewer { width: calc(100% - 1.5rem); margin: 0 auto 1.5rem 0; align-self: flex-start; }
    .comic-page .nav-button { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
    .comic-page .comic-panel,
    .comic-page .nav-button { transition: opacity 0.2s ease; }
    .comic-page .comic-panel[data-pos="0"]:hover { transform: rotate(var(--r)); }
}

/* exhibition name beside the logo in the nav bar */
.sidebar ul li:first-child a { gap: 1.125rem; padding-left: 0; }
.sidebar-tagline {
    font-size: 0.9rem;
    font-style: italic;
    letter-spacing: 0.02em;
    line-height: 1.2;
}
@media (max-width: 560px) {
    .sidebar ul li:first-child a { gap: 0.625rem; }
    .sidebar-tagline { font-size: 0.7rem; max-width: 7rem; }
}

/* PROTOTYPE: on small screens the work title must stay smaller than the exhibition title
   (which is 2.8rem up to 768px). Fluid size, never above 2.25rem there. */
@media (max-width: 768px) {
    .essay-content h1,
    .about-column h1,
    .comic-page .comic-title {
        font-size: clamp(1.75rem, 6.5vw, 2.25rem);
        line-height: 1.15;
    }
}

/* ================================
   COPYRIGHT NOTE: sits under the "For optimal experience" note
   in the title block on every page.
   ================================ */
.site-credit {
    margin: 3.5rem 0 0;
    max-width: 38ch;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--primary-text);
}
.site-credit a {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}
.site-credit a:hover { color: var(--title-pink); }
.site-credit a:focus-visible { outline: 0.1875rem solid var(--title-pink); outline-offset: 0.125rem; }

/* Bottom-of-page copyright: shown instead of the in-title-block note
   once the layout stacks (1024px and narrower). Hidden above that. */
.site-footer { display: none; }

@media (max-width: 1024px) {
    .site-credit { display: none; }

    body {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
    }

    .site-footer {
        display: block;
        margin-top: auto;
        box-sizing: border-box;
        width: 100%;
        padding: 2.5rem 1.5rem 2rem;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 0.875rem;
        line-height: 1.6;
        color: var(--primary-text);
        text-align: center;
    }
    .site-footer p { max-width: 60ch; margin: 0 auto; }
    .site-footer a { text-decoration: underline; text-underline-offset: 0.15em; }
    .site-footer a:hover { color: var(--title-pink); }
    .site-footer a:focus-visible { outline: 0.1875rem solid var(--title-pink); outline-offset: 0.125rem; }
}

/* Stacked layout: keep the title block inside the window and give the
   "For optimal experience" note some breathing room at the sides. */
@media (max-width: 1024px) {
    .about-content { box-sizing: border-box; max-width: 100%; }
    .about-content .subtitle { padding: 0 1.5rem; box-sizing: border-box; max-width: 100%; }
}