/*
Theme Name: Naomi Lisner Portfolio
Theme URI: https://naomilisner.com
Author: Chris (Web Administrator)
Author URI: https://naomilisner.com
Description: A sophisticated, cinematic WordPress theme for Naomi Lisner's professional portfolio. Features dark moody aesthetics, hero imagery, and seamless navigation for showcasing her extensive filmography and creative work.
Version: 1.1.0
Requires at least: 5.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: naomi-lisner
Domain Path: /languages
Tags: portfolio, dark, cinematic, actress, filmmaker, responsive, custom-logo, featured-images
*/

/* ========================================
   CSS Variables & Root Styles
   ======================================== */

:root {
    /* Color Palette */
    --color-dark: #1a1a1a;
    --color-dark-secondary: #2d2d2d;
    --color-light: #f5f5f5;
    --color-light-secondary: #e0e0e0;
    --color-gold: #d4a05a;
    --color-gold-dark: #a67a3d;
    --color-accent: #c9302c;
    --color-text: #f5f5f5;
    --color-text-secondary: #b0b0b0;
    --color-overlay: rgba(26, 26, 26, 0.85);
    
    /* Typography */
    --font-display: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;
    --font-size-4xl: 64px;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-weight-heavy: 900;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 6rem;
    
    /* Z-Index */
    --z-below: -1;
    --z-base: 1;
    --z-nav: 100;
    --z-modal: 200;
    
    /* Line Height */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.6s ease;
}

/* ========================================
   Reset & Base Styles
   ======================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-dark);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ========================================
   Typography
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-heavy);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--font-size-2xl);
}

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

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

h6 {
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

p {
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-relaxed);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-gold);
    text-decoration: none;
    transition: var(--transition-fast);
    border-bottom: 1px solid transparent;
}

a:hover {
    color: var(--color-gold-dark);
    border-bottom-color: var(--color-gold);
}

strong {
    font-weight: var(--font-weight-bold);
}

em {
    font-style: italic;
}

/* ========================================
   Images
   ======================================== */

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.wp-post-image {
    margin: 0;
}

/* ========================================
   Forms
   ======================================== */

input,
textarea,
select {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background-color: var(--color-dark-secondary);
    border: 1px solid var(--color-light-secondary);
    padding: var(--spacing-sm);
    border-radius: 2px;
    transition: var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-gold);
    background-color: var(--color-dark);
}

button,
.button,
input[type="submit"],
input[type="button"] {
    background-color: var(--color-gold);
    color: var(--color-dark);
    border: none;
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: var(--transition-fast);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--font-size-small);
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--color-gold-dark);
}

/* ========================================
   Header & Navigation
   ======================================== */

.site-header {
    background-color: var(--color-dark-secondary);
    padding: var(--spacing-md) var(--spacing-lg);
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    border-bottom: 2px solid var(--color-gold);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    gap: var(--spacing-lg);
}

.site-branding {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.site-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-heavy);
    margin: 0;
}

.site-title a {
    color: var(--color-text);
    border: none;
}

.site-title a:hover {
    color: var(--color-gold);
    border: none;
}

.custom-logo {
    height: 50px;
    width: auto;
}

/* Main Navigation */
.main-navigation {
    flex: 1 1 auto;
    margin-left: 30px; /* Default, overridden by customizer */
}

.main-navigation ul {
    display: flex;
    gap: var(--spacing-lg);
    list-style: none;
    flex-wrap: wrap;
    align-items: center;
}

.main-navigation.hidden ul {
    display: none;
}

.main-navigation li {
    position: relative;
}

.main-navigation a {
    color: var(--color-text);
    font-weight: var(--font-weight-regular);
    border: none;
    position: relative;
    padding-bottom: 2px;
}

.main-navigation a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-gold);
    transition: width 0.3s ease;
}

.main-navigation a:hover {
    color: var(--color-gold);
}

.main-navigation a:hover::after {
    width: 100%;
}

.main-navigation a.current {
    color: var(--color-gold);
}

.main-navigation a.current::after {
    width: 100%;
}

/* Mobile Menu Toggle Button */

.menu-toggle {
    display: none;
    background: none;
    border: 2px solid var(--color-gold);
    color: var(--color-gold);
    padding: 0;
    cursor: pointer;
    border-radius: 2px;
    width: 45px;
    height: 45px;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.menu-toggle-icon {
    display: block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}





.menu-toggle:hover {
    background-color: var(--color-gold);
    color: var(--color-dark);
}

.menu-toggle.active {
    background-color: var(--color-gold);
    color: var(--color-dark);
}



/* Social Icons */
.social-icons {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
}

.imdb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-gold);
    color: var(--color-dark);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-weight: bold;
    font-size: 8px;
    letter-spacing: -0.02em;
    margin-left: var(--spacing-md);
    border: none;
    white-space: normal;
    word-spacing: -0.1em;
    transition: var(--transition-fast);
    line-height: 1;
    text-align: center;
    padding: 0;
    overflow: hidden;
}

.imdb-badge:hover {
    background-color: var(--color-gold-dark);
    border: none;
    opacity: 1;
}

/* Social Icons */
.social-icons a.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: transparent;
    border: 2px solid var(--color-gold);
    border-radius: 50%;
    color: var(--color-gold);
    transition: var(--transition-fast);
    flex-shrink: 0;
}

.social-icons a.social-icon .icon-svg {
    width: 85%;
    height: 85%;
    padding: 7.5%;
    fill: var(--color-gold);
    transition: fill var(--transition-fast);
}

/* IMDb - full size, no padding */
.social-icons a.imdb-icon .icon-svg {
    width: 100%;
    height: 100%;
    padding: 0;
}

.social-icons a.social-icon:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
}

.social-icons a.social-icon:hover .icon-svg {
    fill: var(--color-dark);
}
/* ========================================
   Hero Section
   ======================================== */

.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(26, 26, 26, 0.7) 0%,
        rgba(26, 26, 26, 0.4) 50%,
        rgba(26, 26, 26, 0.2) 100%
    );
    z-index: var(--z-base);
}

.hero-content {
    position: relative;
    z-index: calc(var(--z-base) + 1);
    text-align: right;
    padding: var(--spacing-3xl);
    max-width: 600px;
}

.hero-title {
    font-size: var(--font-size-4xl);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
    animation: fadeInUp 0.8s ease 0.2s both;
}

.hero-tagline {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-regular);
    margin: 0;
    letter-spacing: 0.05em;
    animation: fadeInUp 0.8s ease 0.4s both;
    line-height: var(--line-height-relaxed);
}

.hero-tagline span {
    display: block;
    color: var(--color-gold);
    font-weight: var(--font-weight-bold);
}

/* ========================================
   Animations
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ========================================
   Main Content Area
   ======================================== */

.site-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-3xl) var(--spacing-lg);
}

.content {
    flex: 1;
}

.page-title {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-lg);
    border-bottom: 2px solid var(--color-gold);
}

/* ========================================
   Portfolio/Grid Sections
   ======================================== */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin: var(--spacing-2xl) 0;
}

.portfolio-item {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background-color: var(--color-dark-secondary);
    border: 1px solid var(--color-light-secondary);
    transition: var(--transition);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.5) 0%, rgba(26, 26, 26, 0) 100%);
    z-index: 2;
    transition: var(--transition);
}

.portfolio-item:hover {
    border-color: var(--color-gold);
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

.portfolio-item:hover::before {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(26, 26, 26, 0.3) 100%);
}

.portfolio-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-lg);
    background: linear-gradient(to top, rgba(26, 26, 26, 0.95), transparent);
    z-index: 3;
    transform: translateY(20px);
    transition: var(--transition);
}

.portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
}

.portfolio-overlay h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
    color: var(--color-gold);
}

.portfolio-overlay p {
    margin: 0;
    font-size: var(--font-size-small);
    color: var(--color-light-secondary);
}

/* ========================================
   Post/Page Styles
   ======================================== */

.post,
.page {
    margin-bottom: var(--spacing-3xl);
}

.post-meta {
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

.post-meta-item {
    display: inline-block;
    margin-right: var(--spacing-md);
}

.post-content,
.page-content {
    line-height: var(--line-height-relaxed);
}

.post-content img,
.page-content img {
    margin: var(--spacing-lg) 0;
    border-radius: 2px;
}

/* ========================================
   Sidebar
   ======================================== */

.sidebar {
    flex: 0 0 300px;
}

.widget {
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid var(--color-light-secondary);
}

.widget:last-child {
    border-bottom: none;
}

.widget-title {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-lg) 0;
    padding-bottom: var(--spacing-sm);
    border-bottom: 2px solid var(--color-gold);
}

.widget ul {
    list-style: none;
}

.widget ul li {
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-dark-secondary);
}

.widget ul li:last-child {
    border-bottom: none;
}

/* ========================================
   Footer
   ======================================== */

.site-footer {
    background-color: var(--color-dark-secondary);
    padding: var(--spacing-3xl) var(--spacing-lg);
    margin-top: var(--spacing-3xl);
    border-top: 2px solid var(--color-gold);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
}

.footer-section h3 {
    margin-top: 0;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: var(--spacing-sm);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-light-secondary);
    font-size: var(--font-size-small);
    color: var(--color-text-secondary);
}

/* ========================================
   Utility Classes
   ======================================== */

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

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

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

.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.p-0 { padding: 0; }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 36px;
        --font-size-3xl: 28px;
        --font-size-2xl: 24px;
        --spacing-3xl: 3rem;
    }

    .header-content {
        flex-wrap: wrap;
    }

    .main-navigation {
        flex: 0 0 100%;
        order: 3;
    }

    .main-navigation.hidden {
        display: none;
    }

    .main-navigation ul {
        gap: var(--spacing-sm);
        font-size: var(--font-size-small);
        flex-direction: column;
        width: 100%;
    }

    .main-navigation li {
        width: 100%;
    }

    .main-navigation a {
        display: block;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--color-dark-secondary);
    }

    .main-navigation li:last-child a {
        border-bottom: none;
    }

    .menu-toggle {
        display: flex;
        order: 2;
    }

    .social-icons {
        width: 100%;
        justify-content: center;
        order: 4;
        margin-left: 0 !important;
        margin-top: var(--spacing-sm);
    }

    .hero-content {
        padding: var(--spacing-lg);
        text-align: center;
    }

    .hero-title {
        font-size: var(--font-size-3xl);
    }

    .portfolio-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .site-content {
        padding: var(--spacing-2xl) var(--spacing-sm);
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    :root {
        --font-size-4xl: 28px;
        --font-size-3xl: 24px;
        --font-size-2xl: 20px;
        --spacing-2xl: 2rem;
        --spacing-3xl: 2rem;
    }

    .site-header {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .header-content {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .main-navigation ul {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .main-navigation li {
        width: 100%;
    }

    .main-navigation a {
        display: block;
        padding: var(--spacing-md) 0;
        border-bottom: 1px solid var(--color-dark-secondary);
    }

    .main-navigation li:last-child a {
        border-bottom: none;
    }

    .social-icons {
        width: 100%;
        justify-content: center;
    }

    .hero-content {
        justify-content: center;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    .sidebar {
        flex: 1;
        margin-top: var(--spacing-2xl);
    }
}

/* Tablet/Medium Screens (600px - 768px) */
@media (min-width: 601px) and (max-width: 768px) {
    .site-header {
        padding: var(--spacing-md) var(--spacing-md);
    }

    .header-content {
        gap: var(--spacing-sm);
    }

    .main-navigation {
        margin-left: 15px !important;
    }

    .main-navigation ul {
        gap: var(--spacing-sm);
    }

    .menu-toggle {
        display: flex;
    }

    .main-navigation a {
        padding: var(--spacing-md) var(--spacing-sm);
        font-size: var(--font-size-base);
    }

    .social-icons {
        gap: var(--spacing-sm);
        margin-left: 0 !important;
    }

    .social-icons a {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .imdb-badge {
        width: 40px;
        height: 40px;
        font-size: 7px;
    }
}

@media print {
    .site-header,
    .site-footer,
    .sidebar,
    .hero {
        display: none;
    }

    body {
        background-color: white;
        color: black;
    }

    a {
        color: black;
    }
}


/* ========================================
   Art Gallery
   Append to style.css. Uses the theme's existing colour, spacing and
   type variables; the fallback values in var() only apply if a variable
   is missing.
   ======================================== */

/* --- Page header ------------------------------------------------------ */

.art-gallery-header {
    max-width: 720px;
    margin: 0 auto var(--spacing-2xl, 4rem);
    text-align: center;
}

.art-gallery-title {
    margin-bottom: var(--spacing-md, 1.5rem);
}

.art-gallery-intro {
    color: var(--color-text-muted, #b8b8b8);
    font-size: var(--font-size-base, 16px);
    line-height: 1.7;
}

.art-gallery-empty {
    padding: var(--spacing-2xl, 4rem) 0;
    text-align: center;
    color: var(--color-text-muted, #b8b8b8);
}

/* --- Masonry grid ------------------------------------------------------
   Multi-column rather than uniform tiles: the works run from 150x60
   panoramas to 46x122 portraits, and cropping them all to one shape would
   throw away the proportions of the canvas. Each piece keeps its true
   shape and the columns absorb the difference.
   ---------------------------------------------------------------------- */

.art-gallery {
    column-count: 3;
    column-gap: var(--spacing-lg, 2rem);
    margin-bottom: var(--spacing-3xl, 6rem);
}

@media (max-width: 1024px) {
    .art-gallery {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .art-gallery {
        column-count: 1;
    }
}

.art-piece {
    /* Stops a work being split across two columns. */
    break-inside: avoid;
    page-break-inside: avoid;
    margin: 0 0 var(--spacing-lg, 2rem);
    /* Nudges Safari into respecting break-inside inside columns. */
    display: inline-block;
    width: 100%;
}

.art-piece-link {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: var(--color-dark-secondary, #222);
    /* Hairline that becomes a frame on hover — a gallery wall, not a card. */
    box-shadow: 0 0 0 1px rgba(212, 160, 90, 0.25);
    transition: box-shadow var(--transition-fast, 0.25s ease);
}

.art-piece-link:hover,
.art-piece-link:focus-visible {
    box-shadow: 0 0 0 2px var(--color-gold, #d4a05a);
    outline: none;
}

.art-piece-image {
    display: block;
    width: 100%;
    height: auto;
    transition: transform var(--transition-fast, 0.25s ease),
                opacity var(--transition-fast, 0.25s ease);
}

.art-piece-link:hover .art-piece-image,
.art-piece-link:focus-visible .art-piece-image {
    transform: scale(1.02);
    opacity: 0.92;
}

/* --- Availability badge ------------------------------------------------
   Only sold and not-for-sale works carry a badge. Marking every available
   work would turn the grid into a wall of labels.
   ---------------------------------------------------------------------- */

.art-piece-badge {
    position: absolute;
    top: var(--spacing-sm, 0.75rem);
    right: var(--spacing-sm, 0.75rem);
    padding: 0.3em 0.75em;
    background-color: rgba(26, 26, 26, 0.85);
    border: 1px solid rgba(212, 160, 90, 0.5);
    color: var(--color-gold, #d4a05a);
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

/* --- Wall label --------------------------------------------------------
   Set like a museum caption: title in the display face, materials and
   measurements below in small letterspaced caps.
   ---------------------------------------------------------------------- */

.art-piece-caption {
    padding-top: var(--spacing-sm, 0.75rem);
}

.art-piece-name {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: var(--font-size-base, 16px);
    line-height: 1.35;
    color: var(--color-text, #f0f0f0);
}

.art-piece-detail {
    display: block;
    margin-top: 0.35em;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold-dark, #a67a3d);
}

/* --- Lightbox ---------------------------------------------------------- */

body.art-lightbox-open {
    overflow: hidden;
}

.art-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1.5rem);
    padding: var(--spacing-lg, 2rem);
    background-color: rgba(12, 12, 12, 0.96);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.art-lightbox.is-open {
    opacity: 1;
}

.art-lightbox[hidden] {
    display: none;
}

.art-lightbox-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 1.5rem);
    margin: 0;
    max-width: 100%;
    max-height: 100%;
}

.art-lightbox-image {
    display: block;
    max-width: 100%;
    /* Leaves room for the caption below the image. */
    max-height: 76vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.art-lightbox-caption {
    text-align: center;
    max-width: 60ch;
}

.art-lightbox-name {
    display: block;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: var(--font-size-large, 20px);
    color: var(--color-text, #f0f0f0);
}

.art-lightbox-detail {
    display: block;
    margin-top: 0.4em;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold, #d4a05a);
}

.art-lightbox-count {
    display: block;
    margin-top: 0.6em;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--color-text-muted, #8a8a8a);
}

/* --- Lightbox controls ------------------------------------------------- */

.art-lightbox-close,
.art-lightbox-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 44px keeps these comfortably tappable on a phone. */
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: none;
    border: 1px solid rgba(212, 160, 90, 0.4);
    border-radius: 50%;
    color: var(--color-gold, #d4a05a);
    cursor: pointer;
    transition: background-color var(--transition-fast, 0.25s ease),
                color var(--transition-fast, 0.25s ease);
}

.art-lightbox-close:hover,
.art-lightbox-nav:hover,
.art-lightbox-close:focus-visible,
.art-lightbox-nav:focus-visible {
    background-color: var(--color-gold, #d4a05a);
    color: var(--color-dark, #1a1a1a);
    outline: none;
}

.art-lightbox-close svg,
.art-lightbox-nav svg {
    width: 20px;
    height: 20px;
}

.art-lightbox-close {
    position: absolute;
    top: var(--spacing-lg, 2rem);
    right: var(--spacing-lg, 2rem);
}

.art-lightbox-nav[hidden] {
    display: none;
}

/* On phones the arrows sit below the caption rather than either side, so
   the image gets the full width. */
@media (max-width: 600px) {
    .art-lightbox {
        flex-wrap: wrap;
        padding: var(--spacing-md, 1.5rem);
    }

    .art-lightbox-stage {
        order: 1;
        width: 100%;
    }

    .art-lightbox-image {
        max-height: 62vh;
    }

    .art-lightbox-prev {
        order: 2;
    }

    .art-lightbox-next {
        order: 3;
    }

    .art-lightbox-close {
        top: var(--spacing-sm, 0.75rem);
        right: var(--spacing-sm, 0.75rem);
    }
}

/* --- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .art-lightbox,
    .art-piece-image,
    .art-piece-link,
    .art-lightbox-close,
    .art-lightbox-nav {
        transition: none;
    }

    .art-piece-link:hover .art-piece-image,
    .art-piece-link:focus-visible .art-piece-image {
        transform: none;
    }
}