@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. Reset & Base Styles
   2. Typography
   3. Layout & Grid
   4. Components
      4.1 Header & Navigation
      4.2 Footer
      4.3 Buttons
      4.4 Forms
      4.5 Artwork Cards
      4.6 Blog & Exhibition Cards
      4.7 Modals
   5. Page-Specific Styles
      5.1 Home Page
      5.2 Gallery Page
      5.3 Blog Page
      5.4 Contact Page
      5.5 Artwork Detail Page
   6. Featured Artwork Section
   7. Utilities
   ========================================================================== */

/* Skip-to-content accessibility link */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 1rem;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: #000;
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
}
.skip-to-content:focus {
    left: 1rem;
}

/* 1. Reset & Base Styles */
body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, figcaption, ul, ol, li, a, button, input, form, section, header, footer, main, nav, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
}

body {
    font-family: 'Inter', sans-serif; /* Use Inter font with a generic sans-serif fallback */
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8; /* Moved from inline style, was bg-[#f8f8f8] */
}

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

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

/* Copied from app/globals.css - General Purpose Styles */

/* Paper texture backgrounds */
.bg-texture {
  background-color: #f8f8f8; /* This was also set inline on body, can be centralized here */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.02'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Anti-banding techniques for gradients */
.smooth-gradient {
  /* Increase color depth */
  -webkit-filter: contrast(1.05);
  filter: contrast(1.05);
  /* Add subtle noise to break up banding */
  background-blend-mode: overlay;
  /* Force hardware acceleration */
  transform: translateZ(0);
  will-change: transform;
}

.bg-watercolor-light {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(255, 240, 245, 0.8) 0%,
    rgba(240, 248, 255, 0.8) 20%,
    rgba(245, 255, 250, 0.8) 40%,
    rgba(250, 252, 245, 0.8) 60%,
    rgba(255, 250, 240, 0.8) 80%,
    rgba(255, 245, 238, 0.8) 100%
  );
  /* Add more color stops to make gradient smoother */
  background-size: 200% 200%; /* Larger background size for smoother rendering */
  /* Apply anti-banding class */
  -webkit-filter: contrast(1.05);
  filter: contrast(1.05);
  transform: translateZ(0);
  will-change: transform;
}

.bg-watercolor-dark {
  background-image: radial-gradient(
    circle at 50% 50%,
    rgba(30, 30, 30, 0.8) 0%,
    rgba(25, 25, 25, 0.8) 25%,
    rgba(20, 20, 20, 0.8) 50%,
    rgba(15, 15, 15, 0.8) 75%,
    rgba(10, 10, 10, 0.8) 100%
  );
  /* Add more color stops to make gradient smoother */
  background-size: 200% 200%; /* Larger background size for smoother rendering */
  /* Apply anti-banding class */
  -webkit-filter: contrast(1.05);
  filter: contrast(1.05);
  transform: translateZ(0);
  will-change: transform;
}

@keyframes float {
  0%   { transform: translateY(0px)   translateZ(0); }
  50%  { transform: translateY(-10px) translateZ(0); }
  100% { transform: translateY(0px)   translateZ(0); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

/* Base transition classes (can be expanded) */
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms; /* Default duration, can be overridden */
}

.duration-500 { transition-duration: 500ms; }

.hover\:scale-\[1\.02\]:hover {
  transform: scale(1.02);
}

html, body {
  overflow-y: scroll;
  overflow-x: hidden;
}

/* .prose styles for blog/rich text content */
.prose .lead {
  font-size: 1.2em;
  line-height: 1.6;
  margin-bottom: 2em;
  color: #4b5563;
}

.prose blockquote {
  border-left: 4px solid #000;
  padding-left: 1.5rem;
  font-style: italic;
  margin: 2rem 0;
  color: #4b5563;
}

.prose figure {
  margin: 2rem 0;
}

.prose figure img {
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
}

.prose figure figcaption {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.75rem;
}

/* 3. Unified Grid System */
:root {
    --grid-gap: 0.5rem;
    --grid-min-item: 250px;
    --grid-padding: 1rem 0;
    --grid-hover-elevation: -3px;
    --grid-shadow-intensity: 0.08;
}

.unified-grid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-item), 1fr));
    padding: var(--grid-padding);
}

/* Grid Variants */
.unified-grid--gallery {
    --grid-min-item: 220px; /* Further reduced to fit more items */
    --grid-gap: 0.25rem; /* Minimal gap for gallery */
    --grid-shadow-intensity: 0.08; /* Reduced shadow intensity */
    --grid-padding: 0.5rem 0; /* Minimal padding */
}

.unified-grid--blog {
    --grid-min-item: 280px;
    --grid-gap: 1.5rem;
    --grid-shadow-intensity: 0.08;
}

.unified-grid--exhibitions {
    --grid-min-item: 350px;
    --grid-padding: 3rem 0;
}

/* Grid Item Styles */
.unified-grid-item {
    display: flex;
    flex-direction: column;
    overflow: visible;
    padding: 0;
    margin: 0;
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1);
    will-change: transform;
}

.unified-grid-item:hover {
    transform: translateY(var(--grid-hover-elevation));
}

/* Artwork Card Styles */
.artwork-card-wrapper {
    display: flex;
    flex-direction: column;
    position: relative;
    contain: layout style;
}

.artwork-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1); /* exit: fast drop-back */
    position: relative;
    will-change: transform;
}

.artwork-card-link:hover {
    transform: translateY(-5px);
    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1); /* enter: snappy lift */
}

.artwork-image-container {
    position: relative;
    overflow: visible; /* Changed from hidden to allow text container to be visible */
    border-radius: 2px;
    width: 100%;
    height: 100%;
}

.artwork-shadow {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1);
    margin: 0; /* Remove margin */
    background: transparent; /* Remove white background */
    padding: 0; /* Remove padding */
    width: 100%;
    height: 100%;
    /* Add subtle noise texture to break up banding */
    position: relative;
}

/* Add a subtle noise overlay to break up gradient banding */
.artwork-shadow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.02; /* Very subtle effect */
    pointer-events: none; /* Don't interfere with interactions */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    z-index: 2; /* Lower than the text container (z-index: 10) */
    mix-blend-mode: overlay;
}

/* Ensure containers don't clip shadows */
.artwork-image-container,
.artwork-card-wrapper,
.artwork-card-link,
.artwork-gallery-grid > *,
.artwork-frame-wrapper,
.artwork-frame,
.artwork-detail-image-column {
    overflow: visible !important; /* Prevent shadow clipping */
    padding: 0; /* Removed padding completely */
    margin: 0; /* Ensure no margins */
}

/* Hover animation for artwork detail pages */
.artwork-detail-image-column .artwork-shadow {
    transition: all 0.3s ease;
    transform: translateY(0);
    background: transparent !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
}

/* Enhance hover effect for detail pages */
.artwork-detail-image-column:hover .artwork-shadow {
    transform: none !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.1) !important;
}

.artwork-card-link:hover .artwork-shadow {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.artwork-image-container img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    /* Apply anti-banding techniques for smoother gradients */
    -webkit-filter: contrast(1.05);
    filter: contrast(1.05);
    transform: translateZ(0);
    will-change: transform;
    /* Add subtle noise texture to break up banding */
    background-blend-mode: overlay;
    /* Increase bit depth perception */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    /* Remove any borders */
    border: none !important;
    outline: none !important;
}

/* Text container hover effect */
.artwork-text-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.75) 0%,
        rgba(255, 255, 255, 0.85) 20%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.95) 100%
    );
    padding: 0.4rem; /* Reduced from 0.75rem for more compact display */
    transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.15s cubic-bezier(0.4, 0, 1, 1); /* exit */
    opacity: 0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    text-align: center;
    font-size: 0.85rem; /* Added smaller font size for more compact display */
    /* Apply anti-banding techniques */
    -webkit-filter: contrast(1.05);
    filter: contrast(1.05);
    transform: translateZ(0) translateY(100%);
    will-change: transform, opacity;
    /* Fix z-index to ensure text appears above other elements */
    z-index: 10;
}

.artwork-card-link:hover .artwork-text-container {
    transform: translateZ(0) translateY(0);
    opacity: 1;
    transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s cubic-bezier(0, 0, 0.2, 1); /* enter */
}

/* Add a subtle glow effect on hover */
.artwork-card-link:hover .artwork-shadow {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media (max-width: 768px) {
    .unified-grid {
        grid-template-columns: repeat(3, 1fr); /* Show 3 columns on mobile instead of 2 */
        gap: 0.25rem; /* Minimal gap on mobile */
    }
    
    /* Update gallery grid mobile styles */
    .artwork-gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* Show 3 columns on mobile instead of 2 */
        gap: 0.25rem; /* Minimal gap on mobile */
    }
}

/* Medium small screens get 2 columns */
@media (max-width: 600px) {
    .unified-grid,
    .artwork-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.25rem;
    }
}

/* Very small screens still get 1 column */
@media (max-width: 400px) {
    .unified-grid,
    .artwork-gallery-grid {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
}

.prose .unified-grid--blog {
    composes: unified-grid;
    margin: 2rem 0;
}

/* Preserve existing image gallery styles */
.prose .image-gallery {
    composes: unified-grid--blog;
}

.prose .gallery-item img {
  border-radius: 0.5rem;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.prose .gallery-item p {
  font-size: 0.875rem;
  color: #6b7280;
  margin-top: 0.5rem;
  text-align: center;
}

.prose .workshop-info {
  background-color: #f9fafb;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 2rem 0;
}

.prose .workshop-info h3 {
  margin-top: 0;
}

@media (max-width: 768px) {
  .unified-grid--exhibitions {
    --grid-min-item: 280px;
  }
  
  /* Preserve existing gallery behavior */
  .prose .image-gallery {
    grid-template-columns: 1fr;
  }
}

/* Ribbon glare animation */
@keyframes ribbonGlare {
  0% { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); }
  25% { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%); }
  50% { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); }
  100% { background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 100%); }
}

.ribbon-glare { position: relative; overflow: hidden; }
.ribbon-glare::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%; /* Start off-screen to the left */
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); /* Adjusted opacity */
  animation: ribbonGlare 4s ease-in-out infinite; /* Adjusted timing, and ensure it loops */
}

.artwork-box-shadow {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

/* Simple Button Style (can be refined) */
.button {
    display: inline-flex; /* Changed for better internal alignment */
    align-items: center; /* Vertically align icon and text */
    justify-content: center; /* Horizontally center icon and text */
    gap: 0.5em; /* Space between icon and text */
    padding: 0.75rem 1.5rem;
    border: 1px solid #333;
    background-color: #fff;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.button:hover {
    background-color: #333;
    color: #fff;
}

.button-light {
    border-color: #fff;
    background-color: #333; /* Or transparent, depending on original style */
    color: #fff;
}

.button-light:hover {
    background-color: #fff;
    color: #333;
}

/* Placeholder Section Styling (Temporary) */
#site-header-placeholder, #site-footer-placeholder {
    /* background-color: #eee; /* From inline style */
    /* padding: 1rem; /* From inline style */
    /* text-align: center; /* From inline style */
}

#parallax-hero-placeholder {
    /* min-height: 70vh; /* From inline style */
    /* background-color: #ddd; /* From inline style */
    /* display: flex; /* From inline style */
    /* align-items: center; /* From inline style */
    /* justify-content: center; /* From inline style */
}

/* This is a commented-out placeholder, actual styles defined below */
#artwork-gallery-placeholder {
    /* Placeholder - see consolidated styles below */
}

/* Utility for italic quote if needed elsewhere */
.italic-quote {
    font-style: italic;
    color: #555;
    margin: 1rem 0;
}

/* Progress Bar Styles */
.scroll-progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.6); /* Match header background */
    backdrop-filter: blur(8px); /* Match header blur */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    z-index: 1001;
}

.scroll-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(
        90deg,
        #a8c0e0 0%,
        #b0b8e0 20%,
        #c8b0d8 40%,
        #e0b0c8 60%,
        #e0b8a8 80%,
        #c8d0a8 100%
    ); /* Soft but more visible watercolor gradient */
    background-size: 200% 100%;
    animation: watercolorFlow 3s ease infinite;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: width 0.1s ease;
}

@keyframes watercolorFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Site Header Styles */
.site-header {
    position: fixed;
    top: 4px; /* Make room for the progress bar */
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: rgba(255, 255, 255, 0.6); /* bg-white/60 - Keep semi-transparent */
    backdrop-filter: blur(8px); /* Add blur effect */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    padding: 1.5rem 0; /* py-3 sm:py-4 md:py-6 - using a mid value for now */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Slight bottom shadow added */
    transition: background-color 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease; /* Added backdrop-filter transition */
}

.site-header--scrolled {
    background-color: rgba(255, 255, 255, 0.9); /* py-2 sm:py-3 md:py-4 bg-white/90 */
    /* Increase blur slightly when scrolled? Optional. */
    /* backdrop-filter: blur(12px); */
    /* -webkit-backdrop-filter: blur(12px); */
    padding: 0.75rem 0; /* Reduced padding */
    box-shadow: 0 2px 5px rgba(0,0,0,0.07); /* shadow-sm */
}

.header-container {
    max-width: 1280px; /* Example, adjust as needed */
    margin: 0 auto;
    padding: 0 1rem; /* Corresponds to px-4 or sm:px-6 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-title {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-title h1 {
    font-size: 1.5rem;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: transform 0.3s ease;
    margin: 0;
    line-height: 1;
}

/* Styles for scrolled site title */
.site-title--scrolled h1 {
    transform: scale(0.95); /* Corresponds to md:scale-95. Can use scale(0.9) for smaller screens via media query if needed */
}

.desktop-navigation .nav-list {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.desktop-navigation .nav-list li {
    margin-left: 2rem; /* space-x-4 lg:space-x-8 */
}

.desktop-navigation .nav-link {
    font-size: 0.875rem; /* text-xs lg:text-sm */
    text-transform: uppercase;
    letter-spacing: 0.1em; /* tracking-wider lg:tracking-widest */
    font-weight: 300; /* font-light */
    color: #555; /* text-neutral-500 */
    transition: color 0.3s ease;
}

.desktop-navigation .nav-link:hover,
.desktop-navigation .nav-link.active {
    color: #000; /* hover:text-black, active: text-black */
}

.search-button,
.mobile-menu-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.search-button svg,
.mobile-menu-button svg,
.mobile-menu-close-button svg {
    width: 20px;
    height: 20px;
}

/* Mobile Menu Styles */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1001; /* Above header */
    display: none; /* Initially hidden */
    flex-direction: column;
    padding: 1rem;
}

.mobile-menu.open {
    display: flex;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.site-title-mobile h2 {
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mobile-menu-close-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mobile-navigation .mobile-nav-list {
    list-style: none;
    text-align: center;
    margin-top: 3rem;
}

.mobile-navigation .mobile-nav-list li {
    margin-bottom: 1.5rem;
}

.mobile-navigation .mobile-nav-link {
    font-size: 1.5rem; /* text-2xl sm:text-3xl */
    font-weight: 300; /* font-light */
    letter-spacing: 0.05em; /* tracking-wide */
    color: #333; /* text-neutral-600 */
    transition: color 0.3s ease;
}

.mobile-navigation .mobile-nav-link:hover,
.mobile-navigation .mobile-nav-link.active {
    color: #777; /* hover:text-neutral-400, active: text-black (simplified) */
}

.mobile-menu-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #eee;
    text-align: center;
}

.mobile-menu-footer a {
    margin: 0 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
}

/* Search Modal Styles */

/* Screen-reader-only utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Modal overlay — animated open/close via opacity + visibility (no display snap) */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(248, 248, 248, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1002;
    padding-top: 5vh;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.25s;
}

.search-modal.open {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0s;
}

/* Content panel — rises into view */
.search-modal-content {
    background-color: #fff;
    max-width: 720px;
    width: 90%;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity   0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.search-modal.open .search-modal-content {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Header */
.search-modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.search-modal-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #aaa;
    margin-right: auto;
}

.search-modal-header-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.search-result-count {
    font-size: 0.75rem;
    color: #999;
    min-width: 4ch;
    text-align: right;
    white-space: nowrap;
}

.search-keyboard-hint {
    font-family: inherit;
    font-size: 0.7rem;
    color: #aaa;
    background: #f3f3f3;
    border: 1px solid #ddd;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0.15rem 0.4rem;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
}

.search-modal-close-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.4rem;
    color: #888;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}

.search-modal-close-button:hover {
    background-color: #f0f0f0;
}

.search-modal-close-button svg {
    width: 20px;
    height: 20px;
}

/* Body */
.search-modal-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    padding-bottom: 0.5rem;
}

/* Search form + input */
.search-form {
    flex-shrink: 0;
    padding: 1.25rem 1.25rem 0;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-input-icon {
    position: absolute;
    left: 0.85rem;
    color: #bbb;
    pointer-events: none;
    flex-shrink: 0;
}

.search-input {
    width: 100%;
    padding: 0.85rem 1rem 0.85rem 2.75rem;
    font-size: 1rem;
    font-family: inherit;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fafafa;
    color: #222;
    transition:
        border-color 0.2s ease,
        box-shadow   0.2s ease,
        background   0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.search-input:focus {
    outline: none;
    border-color: #999;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* Results container */
.search-results-container {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem 1.25rem 1rem;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.search-results-container::-webkit-scrollbar {
    width: 4px;
}

.search-results-container::-webkit-scrollbar-track {
    background: transparent;
}

.search-results-container::-webkit-scrollbar-thumb {
    background: #ddd;
    border-radius: 2px;
}

/* Group headers */
.search-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #bbb;
    padding: 0.85rem 0 0.35rem;
    border-top: 1px solid #f0f0f0;
    user-select: none;
}

.search-group:first-child .search-group-header {
    border-top: none;
    padding-top: 0.35rem;
}

.search-group-count {
    font-weight: 400;
    color: #d0d0d0;
    letter-spacing: 0;
}

/* Result items */
.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.5rem;
    border-radius: 7px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        transform       0.15s ease;
    animation: searchResultFadeIn 0.2s ease both;
    animation-delay: calc(var(--result-index, 0) * 0.03s);
}

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

.search-result-item:hover,
.search-result-item:focus {
    background-color: #f5f5f5;
    outline: none;
    transform: translateX(2px);
}

.search-result-item.is-focused {
    background-color: #f0f0f0;
    outline: 2px solid rgba(0, 0, 0, 0.1);
    outline-offset: -2px;
}

/* Thumbnails */
.search-result-thumb {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 6px;
    object-fit: cover;
    background-color: #f0f0f0;
}

.search-result-thumb-placeholder {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 6px;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #ccc;
}

/* Text block */
.search-result-text {
    flex-grow: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
    line-height: 1.35;
}

.search-result-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.775rem;
    color: #888;
    line-height: 1.3;
}

.search-result-detail {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 18ch;
}

.search-result-meta-sep {
    color: #ccc;
    flex-shrink: 0;
    font-size: 0.6rem;
}

/* Color-coded type badges */
.result-type-badge {
    display: inline-block;
    font-size: 0.63rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.result-type-badge--artwork {
    background-color: #fdf0ec;
    color: #b05a3a;
}

.result-type-badge--exhibition {
    background-color: #eef4f0;
    color: #3a7a50;
}

.result-type-badge--blog {
    background-color: #eef0f8;
    color: #3a4d8a;
}

/* Highlighted matched text */
.search-result-title mark {
    background-color: #fff3b0;
    color: inherit;
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 600;
    font-style: normal;
}

/* Recent searches section */
.search-recent {
    padding: 0.75rem 1.25rem 0;
    flex-shrink: 0;
}

.search-section-label {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #c0c0c0;
    margin-bottom: 0.35rem;
    user-select: none;
}

.search-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.search-recent-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.875rem;
    color: #555;
    transition: background-color 0.15s ease;
}

.search-recent-item:hover {
    background-color: #f5f5f5;
}

.search-recent-icon {
    color: #ccc;
    flex-shrink: 0;
    width: 13px;
    height: 13px;
}

/* Prompt + no-results */
.search-prompt {
    text-align: center;
    padding: 2rem 0 1rem;
    color: #bbb;
    font-size: 0.875rem;
    font-style: italic;
}

.search-no-results {
    display: none;
    text-align: center;
    padding: 1.5rem 1.25rem;
    color: #888;
}

.search-no-results.is-visible {
    display: block;
}

.search-no-results-hint {
    display: block;
    font-size: 0.8rem;
    color: #bbb;
    margin-top: 0.25rem;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .search-modal {
        padding-top: 0;
    }

    .search-modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 10px 10px;
    }

    .search-keyboard-hint {
        display: none;
    }

    .search-result-thumb,
    .search-result-thumb-placeholder {
        width: 42px;
        height: 42px;
    }
}

/* Responsive: Show mobile menu button, hide desktop nav on smaller screens */
.mobile-menu-button {
    display: none; /* Hidden by default, shown in media query */
}

/* Tablet: tighten nav link spacing (769px–1024px) */
@media (max-width: 1024px) {
    .desktop-navigation .nav-list li {
        margin-left: 1.5rem;
    }
    .desktop-navigation .nav-link {
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }
}

@media (max-width: 768px) {
    .desktop-navigation {
        display: none;
    }
    .mobile-menu-button {
        display: flex; /* keep inline-flex centering behavior */
    }
    .site-title {
        flex-grow: 1;
        text-align: center;
        margin: 0 0.5rem;
    }
    .site-title h1 {
        font-size: 1.2rem;
        letter-spacing: 0.1em;
    }
    .header-container {
        padding: 0 1.25rem;
    }
}

/* Page Section Styling */
.page-section {
    padding: 3rem 1rem; /* Common padding from sections like featured-artworks */
    /* text-align: center; /* Often sections are centered, but can be per-section */
}

/* Specific styling for Featured Artworks Section */
.section-featured-artworks {
    padding-top: 8rem; /* py-32 (32 * 0.25rem = 8rem) */
    padding-bottom: 8rem;
    /* background-color: #fff; is handled by .section-bg-white */
}

.container { /* General container, can be reused */
    max-width: 1280px; /* Default max-width, adjust as needed for project consistency */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* px-6 from original section container */
    padding-right: 1.5rem;
}

.featured-artworks-header {
    max-width: 64rem; /* max-w-4xl (4 * 16rem = 64rem, assuming 1rem = 16px base) */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5rem; /* mb-20 (20 * 0.25rem = 5rem) */
    text-align: center;
}

.featured-artworks-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 300; /* font-light */
    margin-bottom: 1.5rem; /* mb-6 (6 * 0.25rem = 1.5rem) */
    letter-spacing: 0.025em; /* tracking-wide (approx) */
    color: #1f2937; /* Default dark text, adjust if needed */
}

@media (min-width: 768px) { /* md breakpoint */
    .featured-artworks-title {
        font-size: 2.25rem; /* text-4xl (36px) */
    }
}

.featured-artworks-subtitle {
    font-size: 1.125rem; /* text-lg */
    color: #4b5563; /* text-neutral-600 */
    line-height: 1.75; /* Common for text-lg */
}

.featured-artworks-cta {
    text-align: center;
    margin-top: 4rem; /* mt-16 (16 * 0.25rem = 4rem) */
}

/* Artist Statement Section Styles */
.section-artist-statement {
    padding-top: 8rem; /* py-32 */
    padding-bottom: 8rem;
    /* background-color is handled by .section-bg-neutral-light */
}

.artist-statement-content {
    max-width: 48rem; /* max-w-3xl (3 * 16rem = 48rem). Original was max-w-3xl */
    margin-left: auto;
    margin-right: auto;
}

.artist-statement-header {
    text-align: center;
    margin-bottom: 4rem; /* mb-16 */
}

.artist-statement-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 300; /* font-light */
    margin-bottom: 1.5rem; /* mb-6 - this was on original h2, might be redundant if header has mb */
    letter-spacing: 0.025em; /* tracking-wide (approx) */
    color: #1f2937;
}

@media (min-width: 768px) { /* md breakpoint for title */
    .artist-statement-title {
        font-size: 2.25rem; /* text-4xl */
    }
}

.artist-statement-prose {
    /* .prose and .prose-lg are global. Specific overrides if needed can go here */
    /* The original had text-neutral-700 on the prose div */
    color: #374151; /* text-neutral-700 */
}

.artist-statement-quote {
    font-size: 1.25rem; /* text-xl */
    font-style: italic;
    font-weight: 300; /* font-light */
    margin-bottom: 2rem; /* mb-8 */
    text-align: center;
    /* color is inherited from .artist-statement-prose or can be set specifically */
}

.artist-statement-cta {
    text-align: center;
    margin-top: 4rem; /* mt-16 */
}

.section-bg-white {
    background-color: #fff;
}

.section-bg-neutral-light {
    background-color: #f9f9f9; /* Was on artist-statement */
}

.section-bg-dark {
    background-color: #333;
    color: #fff;
}

.section-content-centered {
    max-width: 800px; /* From artist-statement inner div */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

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

/* Placeholder Styles (can be gradually removed as components are built) */
#parallax-hero-placeholder {
    /* min-height: 70vh;
    background-color: #ddd;
    display: flex;
    align-items: center;
    justify-content: center; */
}

/* Featured Artwork Gallery - Main Container */
#artwork-gallery-placeholder {
    min-height: 300px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Media queries for responsive grid */
@media (max-width: 1024px) {
    #artwork-gallery-placeholder {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    #artwork-gallery-placeholder {
        grid-template-columns: 1fr;
    }
}

#newsletter-form-placeholder input[type="email"] {
    padding: 0.5rem;
    margin-right: 0.5rem; /* From inline style */
}

#site-footer-placeholder {
    /* text-align: center; /* From inline style */
    /* padding: 2rem; /* From inline style */
    /* background-color: #eee; /* From inline style */
}

/* Site Footer Styles */
.site-footer {
    padding-top: 3rem; /* py-12 (12 * 0.25rem = 3rem) */
    padding-bottom: 3rem;
    background-color: #fff; /* bg-white */
    border-top: 1px solid #e5e7eb; /* border-t border-neutral-200 (Tailwind's neutral-200) */
}

.footer-container {
    /* Uses the general .container styles if defined, or define specific max-width here */
    /* For now, assuming a general .container class might be like .header-container */
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem; /* px-6 from original, 1.5rem. Using 1rem to match other containers for now */
}

.footer-content {
    display: flex;
    flex-direction: column; /* Default: flex-col */
    justify-content: space-between;
    align-items: center;
}

.copyright-text {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-neutral-500 */
    margin-bottom: 1rem; /* mb-4 */
}

.footer-nav {
    display: flex;
    gap: 2rem; /* gap-8 (8 * 0.25rem = 2rem) */
}

.footer-link {
    font-size: 0.875rem; /* text-sm */
    color: #6b7280; /* text-neutral-500 */
    transition: color 0.3s ease; /* transition-colors */
}

.footer-link:hover,
.footer-link.active { /* Add active state */
    color: #000; /* hover:text-black */
}

/* Responsive styles for footer (md breakpoint from original) */
@media (min-width: 768px) { /* md: breakpoint */
    .footer-content {
        flex-direction: row;
    }
    .copyright-text {
        margin-bottom: 0; /* md:mb-0 */
    }
}

/* Newsletter Section Styles */
.section-newsletter {
    padding-top: 8rem; /* py-32 */
    padding-bottom: 8rem;
    /* background-color and text color handled by .section-bg-dark */
}

.newsletter-content {
    max-width: 36rem; /* max-w-xl (36rem, original was max-w-xl) */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.newsletter-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 300; /* font-light */
    margin-bottom: 1.5rem; /* mb-6 */
    letter-spacing: 0.025em; /* tracking-wide (approx) */
    /* Color is inherited from .section-bg-dark */
}

@media (min-width: 768px) { /* md breakpoint for title */
    .newsletter-title {
        font-size: 2.25rem; /* text-4xl */
    }
}

.newsletter-subtitle {
    font-size: 1.125rem; /* text-lg */
    color: #d1d5db; /* text-neutral-300 */
    margin-bottom: 2.5rem; /* mb-10 */
    line-height: 1.75;
}

.newsletter-form {
    display: flex;
    flex-direction: column; /* default: flex-col */
    gap: 1rem; /* gap-4 */
}

.newsletter-input {
    flex-grow: 1; /* flex-1 */
    background-color: transparent; /* bg-transparent */
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3); /* border-b border-white/30 */
    padding: 0.75rem 1rem; /* py-3 px-4 */
    color: #fff; /* text-white */
    line-height: inherit; /* Ensure consistent line height with button */
}

.newsletter-input::placeholder {
    color: #a3a3a3; /* placeholder:text-neutral-400 (approx) */
}

.newsletter-input:focus {
    outline: none;
    border-bottom-color: #fff; /* focus:border-white */
}

.newsletter-button {
    /* .button class provides base styles */
    background-color: #fff; /* bg-white */
    color: #000; /* text-black */
    border-radius: 0; /* rounded-none */
    text-transform: uppercase; /* uppercase */
    letter-spacing: 0.05em; /* tracking-widest (approx) */
    font-size: 0.875rem; /* text-sm */
    font-weight: 300; /* font-light */
    padding: 0.75rem 2rem; /* px-8 py-6 (py-3, but original button has py-6, let's use 0.75rem to match input padding better for vertical alignment) */
                                /* The original px-8 py-6 implies a taller button. Let's try padding: 1.5rem 2rem; for that explicitly */
    padding: 1.5rem 2rem; /* px-8 py-6 from original button component. This will make it taller than input */
    line-height: 1; /* Adjust to align text if padding makes it look off */
}

.newsletter-button:hover {
    background-color: rgba(255, 255, 255, 0.9); /* hover:bg-white/90 */
    color: #000;
}

/* Responsive form layout */
@media (min-width: 640px) { /* sm breakpoint */
    .newsletter-form {
        flex-direction: row;
    }
}

/* Parallax Hero Section Styles */
.parallax-hero-section {
    position: relative;
    height: 100vh; /* Full viewport height */
    overflow: hidden; /* Important for parallax and positioning */
    display: flex; /* To help center content wrapper */
    align-items: center;
    justify-content: center;
}

.parallax-hero-bg-image {
    position: absolute;
    top: -15%; /* Adjust to keep centered with increased height */
    left: 0;
    width: 100%;
    height: 130%; /* Make taller for parallax effect */
    background-size: cover;
    background-position: center center;
    z-index: 0; /* Ensure it's behind overlay and content */
    will-change: transform; /* Performance hint */
}

/* Styles for Firefox to disable parallax and show a static image */
.firefox-no-parallax .parallax-hero-bg-image {
    transform: none !important;
    top: 0 !important;
    height: 100% !important;
}

.parallax-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* bg-black/20 */
    z-index: 1;
}

.parallax-hero-content-wrapper {
    position: relative; /* To sit above overlay */
    z-index: 2;
    width: 100%; /* Takes full width of parent for container inside to center */
    display: flex; /* For centering .container if it has no auto margins */
    align-items: center;
    justify-content: center;
}

.parallax-hero-content-wrapper .container {
    text-align: center;
    color: #fff;
}

.parallax-hero-title {
    font-size: 2.25rem; /* text-4xl (base for mobile) */
    font-weight: 300;
    letter-spacing: 0.025em;
    margin-bottom: 1.5rem;
}

.parallax-hero-subtitle {
    max-width: 42rem;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.125rem; /* text-lg */
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    line-height: 1.75;
}

.hero-button {
    background-color: #fff;
    color: #000;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    font-size: 0.875rem;
    font-weight: 300;
    padding: 1.5rem 2rem;
    display: inline-flex;
    align-items: center;
    text-decoration: none; /* Ensure it behaves like a button from .button class */
    border: 1px solid transparent; /* From .button class, make it transparent if not desired */
}

.hero-button:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000;
}

.hero-button .icon-arrow-right {
    margin-left: 0.5rem;
    width: 16px;
    height: 16px;
}

.scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
}

.scroll-indicator-text {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.075em;
    font-weight: 300;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.scroll-indicator-mouse {
    width: 1.5rem;
    height: 2.5rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    padding-top: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.scroll-indicator-wheel {
    width: 0.25rem;
    height: 0.5rem;
    background-color: #fff;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    animation: bounce-wheel 2s infinite ease-in-out;
}

@keyframes bounce-wheel {
    0%, 100% { transform: translateY(0)   translateZ(0); opacity: 1; }
    50%       { transform: translateY(8px) translateZ(0); opacity: 0.5; }
}

/* Responsive title sizes for Hero */
@media (min-width: 768px) { /* md breakpoint */
    .parallax-hero-title {
        font-size: 3.75rem; /* md:text-6xl */
    }
    .parallax-hero-subtitle {
        font-size: 1.25rem; /* md:text-xl */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .parallax-hero-title {
        font-size: 4.5rem; /* lg:text-7xl */
    }
}

/* Artwork Gallery Styles */
/* This section is now handled by the main definition at line 736 */

/* These styles are for the gallery page, not the featured section */
/* Consolidated Artwork Gallery Grid Styles */
.artwork-gallery-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default: 1 column for mobile */
    gap: 3rem; /* gap-12 (12 * 0.25rem = 3rem) */
    margin-top: 3rem; /* mt-12 */
}

/* Responsive breakpoints */
@media (min-width: 640px) { /* sm breakpoint */
    .artwork-gallery-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (min-width: 768px) { /* md breakpoint */
    .artwork-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem; /* md:gap-16 (16 * 0.25rem = 4rem) */
    }
}

@media (min-width: 1024px) { /* lg breakpoint */
    .artwork-gallery-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

@media (min-width: 1280px) { /* xl breakpoint */
    .artwork-gallery-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns for extra large screens */
    }
}

/* Set portrait aspect ratio for gallery artwork cards */
.artwork-gallery-grid .artwork-card-wrapper {
    width: 100%;
}

.artwork-gallery-grid .artwork-image {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    aspect-ratio: 3 / 4; /* Portrait aspect ratio (taller than wide) */
    object-fit: cover;
}

/* Artwork card link styles consolidated below at lines 1171-1175 */

/* Artwork Frame Wrapper - Part of the artwork card component */
.artwork-frame-wrapper {
    display: inline-block; /* From original style */
    position: relative; /* For hover effects and highlight positioning */
}

.artwork-card {
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    margin: 5% 0;
}



.group:hover .artwork-frame-wrapper {
    transform: scale(1.03); /* group-hover:scale-[1.03] */
}

/* Artwork frame styles consolidated below at lines 1196-1213 */

/* Artwork frame highlight styles consolidated below at lines 1216-1227 */

/* Artwork image container styles consolidated below at lines 1230-1235 */

/* Artwork image styles consolidated below at lines 1238-1248 */

/* === Artwork Card Styling (Based on User Description) === */

/* Artwork Grid - see consolidated styles above */

/* Artwork Link Container */
.artwork-card-link { /* Applied to the <a> tag */
    display: block; /* block */
    position: relative; /* Needed for absolute children like ribbon */
    /* group class is applied in JS to the card div */
}

/* Frame Container (Now the main card div) */
.artwork-card { /* Applied to the outer <div> - Now includes base styles */
    position: relative; /* relative */
    display: inline-block; /* inline-block */
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1); /* transition-transform duration-700 */
    width: 100%; /* Ensure it takes grid width */
    /* Base styles from description */
    overflow: hidden; /* overflow-hidden */
    
    /* border-radius: 0.75rem; /* rounded-xl - Ensuring REMOVED */
    border: none; /* Removed border */
    box-shadow: none; /* Removed shadow */
    background-color: transparent; /* Made background transparent */
}

/* === Artwork Card Component Styles === */
.artwork-card.group:hover { /* group-hover:scale-[1.03] */
    transform: scale(1.03);
}

/* Artwork Frame (Acts as Frame + Mat) */
.artwork-frame {
    position: relative; /* relative */
    overflow: hidden; /* overflow-hidden */
    padding: 0; /* Removed inner mat padding */
    border-width: 0; /* Removed frame thickness */
    border-style: none;
    /* Removed complex border colors */
    background: transparent; /* Removed mat color */
    background-image: none; /* Removed mat texture */
    /* Removed inner and outer shadows */
    box-shadow: none;
    box-sizing: border-box;
    /* Aspect ratio is controlled by the link container now */
    width: 100%;
    height: 100%;
    display: flex; /* To contain image container */
}

/* Frame Highlight Effect - Hidden since frame is removed */
.artwork-frame-highlight {
    display: none; /* Hide the highlight since there's no frame */
}

/* Artwork Image Container */
.artwork-image-container {
    position: relative; /* relative */
    width: 100%; /* Fill frame padding */
    height: 100%;
    z-index: 2; /* Above highlight */
}

/* Artwork Image */
.artwork-image {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    width: 100%; /* w-full */
    height: 100%; /* Fill container */
    object-fit: cover; /* object-cover */
    /* Removed complex border and shadow for image */
    border: none;
    box-shadow: none;
    display: block; /* Remove extra space */
    /* Default aspect ratio - can be overridden by specific contexts */
    aspect-ratio: 3 / 4; /* Portrait orientation (taller than wide) */
}

/* Artwork Title and Details Container */
.artwork-text-container {
    margin-top: 1.5rem; /* mt-6 */
}

/* Artwork Title */
.artwork-title {
    font-size: 0.95rem; /* Reduced from 1.125rem */
    font-weight: 300; /* font-light */
    color: #333; /* Slightly darker than before */
    margin: 0;
}

/* Artwork Details */
.artwork-details {
    font-size: 0.8rem; /* Reduced from 0.875rem */
    color: #777; /* Slightly darker than before */
    margin-top: 0.25rem; /* mt-1 */
    font-weight: 300;
}

/* Override rule removed */

/* === End Artwork Card Styling === */
/* Incorrect block removed */
/* Incorrect block removed */

/* Artwork text styles consolidated above at lines 1251-1267 */

/* Responsive Grid for Gallery */
/* Media queries for .artwork-gallery-grid consolidated above */

/* BASIC PAGE CONTENT LAYOUT - Styles below are the primary definitions */
/* The following `.page-content`, `.page-header-container`, `.page-title`, and `.page-subtitle` were duplicated further down. */
/* Those duplicates (around old lines 1377-1411) have been REMOVED. */

.page-content { /* THIS IS THE PRIMARY DEFINITION */
    padding-top: 6rem; /* Adjust as needed to clear fixed header */
    padding-bottom: 4rem;
}

/* Page Header Styles */
.page-header {
    margin-bottom: 2rem;
    text-align: center;
}

.page-header-container { /* THIS IS THE PRIMARY DEFINITION */
    text-align: center;
    margin-bottom: 3rem;
}

.page-title { /* THIS IS THE PRIMARY DEFINITION - with responsive sizes */
    /* Slightly reduced base size */
    font-size: 2.1rem; /* Was 2.25rem */
    font-weight: 300;
    letter-spacing: 0.025em;
    margin-bottom: 1rem;
}

/* Add media query for smaller screens */
@media (max-width: 640px) {
    .page-title {
        font-size: 1.8rem; /* Further reduce on small screens */
        line-height: 1.3; /* Adjust line height for smaller size */
    }
}

.page-subtitle { /* THIS IS THE PRIMARY DEFINITION */
    font-size: 1.125rem; /* text-lg */
    color: #6b7280; /* text-gray-500 / neutral-500 */
    max-width: 45rem; /* max-w-[700px] */
    margin-left: auto;
    margin-right: auto;
}

/* Artwork Card Styles consolidated above */

/* Artwork frame link styles consolidated with .artwork-card-link */

/* Sold Ribbon Styles */
.artwork-sold-ribbon {
    position: absolute;
    top: 10px; /* Adjust as needed */
    left: -35px; /* Adjust to position diagonally */
    background-color: #c00; /* Example red color */
    color: white;
    padding: 5px 30px;
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    transform: rotate(-45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 3; /* Above frame highlight and image container */
    white-space: nowrap; /* Prevent wrapping */
    overflow: hidden; /* Ensure glare effect is contained if applied */
}

/* Glare animation class (controlled by JS later if implemented) */
/* .artwork-sold-ribbon.animate-glare::after {
    animation: ribbonGlare 4s ease-in-out infinite;
} */

/* Filter Controls Styles */
.filter-controls-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    align-items: center; /* Vertically center items within the container */
    justify-content: flex-start; /* Align items to the start */
    gap: 1.5rem; /* Maintain existing gap */
    padding: 1.5rem 1.5rem; /* Add horizontal padding */
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    /* If this element also has .container class, max-width/margins are inherited */
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.filter-group label {
    font-size: 0.875rem;
    color: #555;
    font-weight: 500;
}

.filter-group select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    font-size: 0.875rem;
    cursor: pointer;
}

.filter-group select:focus {
    outline: none;
    border-color: #888;
    box-shadow: 0 0 0 2px rgba(150, 150, 150, 0.2);
}

.filter-group select.is-active {
    border-color: var(--color-accent, #8b6f47);
    background-color: rgba(139, 111, 71, 0.06);
    font-weight: 600;
}

.gallery-reset-btn {
    padding: 0.5rem 1rem;
    background: none;
    border: 1px solid var(--color-accent, #8b6f47);
    color: var(--color-accent, #8b6f47);
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.gallery-reset-btn:hover {
    background-color: var(--color-accent, #8b6f47);
    color: #fff;
}

.gallery-result-count {
    text-align: center;
    font-size: 0.875rem;
    color: #777;
    margin: 0.5rem 0 1.5rem;
    min-height: 1.25rem;
}

/* --- Contact Page --- */
.contact-section .container {
    /* Using a class for the grid container if more specific control is needed than general .container */
}

.contact-container-grid {
    display: grid;
    gap: 3rem; /* Default gap */
}

@media (min-width: 1024px) { /* lg: breakpoint from original */
    .contact-container-grid {
        grid-template-columns: 1fr 1fr; /* lg:grid-cols-2 */
        gap: 5rem; /* lg:gap-10, but 5rem might be more visually distinct */
        align-items: flex-start; /* Align items to the top of their grid areas */
    }
}

.contact-info-column .contact-title {
    /* Uses .page-title styles, can add specifics if needed */
    margin-bottom: 0.5rem; /* Reduced margin for tighter grouping with subtitle */
}

.contact-info-column .contact-subtitle {
    /* Uses .page-subtitle styles */
    margin-bottom: 2.5rem; /* Space before contact details */
    max-width: 100%; /* Override max-width from page-subtitle if it's too narrow here */
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 2rem; /* space-y-6 equivalent */
}

.contact-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem; /* gap-4 */
}

.contact-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--text-secondary, #6b7280); /* text-gray-500 */
    margin-top: 0.125rem; /* Adjust to vertically align with the first line of text better */
}

.contact-icon svg {
    width: 100%;
    height: 100%;
}

.contact-detail-title {
    font-weight: 500; /* font-medium */
    color: var(--text-primary, #111827);
    margin-bottom: 0.25rem;
}

.contact-detail-text {
    font-size: 0.9rem; /* text-sm */
    color: var(--text-secondary, #6b7280);
}

.contact-detail-text a {
    color: var(--accent-color, #007bff);
    text-decoration: none;
}
.contact-detail-text a:hover {
    text-decoration: underline;
}

.contact-detail-note {
    font-size: 0.8rem; /* text-sm */
    color: var(--text-tertiary, #6b7280); /* text-gray-500 */
    margin-top: 0.25rem; /* mt-1 */
}

.contact-form-column {
    /* The original had rounded-lg border bg-card p-6 shadow-sm */
    background-color: var(--background-card, #fff);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 8px;
    padding: 2rem; /* p-6 or similar */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.03);
}

.contact-form-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* space-y-6 */
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* space-y-2 for label and input */
}

.form-label {
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;
    color: var(--text-primary, #333);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem; /* px-4 py-2 or py-3 from original Input/Textarea */
    border: 1px solid var(--border-color-medium, #ccc);
    border-radius: 4px;
    font-size: 1rem;
    background-color: var(--background-input, #fff);
    color: var(--text-input, #333);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-placeholder, #999);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent-color, #007bff);
    box-shadow: 0 0 0 2px var(--accent-color-translucent, rgba(0,123,255,0.25));
}

.form-textarea {
    min-height: 120px; /* min-h-[150px] was original, adjust as preferred */
    resize: vertical;
}

.contact-submit-button {
    /* Uses .button base style */
    width: 100%;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    font-size: 1rem;
    background-color: var(--accent-color, #007bff);
    color: #fff;
    border-color: var(--accent-color, #007bff);
}

.contact-submit-button:hover {
    background-color: var(--accent-color-dark, #0056b3);
    border-color: var(--accent-color-dark, #0056b3);
    color: #fff;
}

.form-submit-note {
    font-size: 0.8rem;
    color: var(--text-tertiary, #6b7280);
    text-align: center;
    margin-top: 1rem;
}

/* Blog post error message */
.error-message {
    text-align: center;
    padding: 2rem;
    margin: 2rem 0;
    background-color: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
}

.error-message h2 {
    color: #b91c1c;
    margin-bottom: 1rem;
}

.error-message .button {
    margin-top: 1.5rem;
    display: inline-block;
}

/* Form status messages */
.form-status {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
}

.form-status-success {
    background-color: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: #065f46;
}

.form-status-error {
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #b91c1c;
}

/* --- Legal Pages (Terms, Privacy) --- */
.legal-content-wrapper {
    max-width: 75ch; /* Limit width for readability, similar to blog content */
    margin-left: auto;
    margin-right: auto;
}

/* --- Exhibitions Page --- */
.exhibitions-section {
    margin-bottom: 3rem;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
}

.exhibitions-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .exhibitions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .exhibitions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* === Base Card Styles === */
/* Common styles for .blog-post-card and .exhibition-card */
.base--card {
    background-color: var(--background-card, #fff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04); /* Base shadow */
    transition: box-shadow 0.3s ease; /* Base transition for shadow */
}
/* Exhibition Card Styling - Matching Blog Post Card Style */
.exhibition-card {
    transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 1, 1); /* exit */
    will-change: transform;
}

.exhibition-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    transform: translateY(-3px);
    transition: box-shadow 0.3s cubic-bezier(0, 0, 0.2, 1), transform 0.25s cubic-bezier(0, 0, 0.2, 1); /* enter */
}

.exhibition-image-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.exhibition-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--neutral-200, #f0f0f0);
    position: relative;
}

.exhibition-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0, 0, 0.2, 1);
    will-change: transform;
}

.exhibition-card:hover .exhibition-image {
    transform: scale(1.05);
}

.exhibition-content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.exhibition-status-badge {
    margin-bottom: 0.75rem;
}

.status-indicator {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.status-current {
    background-color: #dcfce7;
    color: #166534;
}

.status-upcoming {
    background-color: #e0f2fe;
    color: #0369a1;
}

.exhibition-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary, #111827);
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.exhibition-info-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary, #4b5563);
    margin-bottom: 0.5rem;
}

.exhibition-info-line svg {
    flex-shrink: 0;
    color: var(--text-tertiary, #6b7280);
}

.exhibition-description {
    font-size: 0.9rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
    margin: 0.75rem 0;
    flex-grow: 1;
}

.exhibition-button {
    align-self: flex-start;
    margin-top: 1rem;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: 1px solid var(--border-color-medium, #d1d5db);
    color: var(--text-primary, #111827);
    border-radius: 4px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.exhibition-button:hover {
    background-color: var(--neutral-100, #f3f4f6);
    border-color: var(--text-secondary, #4b5563);
}

/* Exhibition Modal Styling */
.exhibition-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 2rem 1rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0, 0, 0.2, 1), visibility 0.25s;
}

.exhibition-modal.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.exhibition-modal-content {
    background-color: #fff;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    margin: 2rem auto;
    overflow: hidden;
}

.exhibition-modal-close-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}

.exhibition-modal-close-button:hover {
    background-color: #fff;
}

.exhibition-modal-body {
    padding: 2rem;
}

.exhibition-modal-image {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

#exhibition-modal-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary, #111827);
}

.exhibition-modal-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.exhibition-modal-info p {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: var(--text-secondary, #4b5563);
}

.exhibition-modal-description {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-secondary, #4b5563);
}

/* --- Blog Page --- */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Responsive grid */
    gap: 2rem;
    margin-bottom: 4rem; /* Space before newsletter or footer */
}

.blog-post-card-link {
    text-decoration: none;
    color: inherit;
    display: block; /* Ensures the link takes up the full card space for clicking */
}

.blog-post-card {
    /* Inherits common styles and transition from .base--card */
    /* No unique base styles needed here after refactoring */
}

.blog-post-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.blog-post-card .group:hover & { /* If link is group */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.blog-post-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--neutral-200, #f0f0f0); /* Placeholder bg */
    position: relative; /* For pseudo-element */
    display: flex; /* To center potential text/icon */
    align-items: center;
    justify-content: center;
}

/* Add a visual indicator if the image fails to load */
.blog-post-image-wrapper::before {
    content: "Image Missing";
    position: absolute;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    display: none; /* Hidden by default */
}

.blog-post-image:error + .blog-post-image-wrapper::before {
    display: block; /* Show if image has error - doesn't work reliably */
}
/* More reliable: Hide the broken image icon itself */
.blog-post-image[src=""]:not([srcset]), /* If src is empty */
.blog-post-image:not([src]) /* If src attribute is missing */
{
   /* Styles to apply when image src is likely missing/invalid */
   /* We can't directly hide the browser's broken image icon easily,
      but the background color provides some fallback */
}
.blog-post-image:error {
    /* Attempt to hide the actual broken image icon - browser support varies */
    visibility: hidden;
    /* Show the placeholder text */
    display: block; /* Ensure it takes space to show ::before */
}
.blog-post-image:error::before {
     content: "Image Missing";
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: var(--text-secondary, #6b7280);
     font-size: 0.9rem;
     visibility: visible; /* Make sure the text is visible */
}

.blog-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-content-wrapper {
    padding: 1.25rem; /* 20px */
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Allows content to fill card height */
}

.blog-post-category {
    display: inline-block;
    background-color: var(--neutral-100, #f3f4f6);
    color: var(--neutral-700, #374151);
    font-size: 0.75rem; /* 12px */
    font-weight: 500;
    padding: 0.25rem 0.6rem;
    border-radius: 9999px; /* pill shape */
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-post-title {
    font-size: 1.25rem; /* 20px */
    font-weight: 700; /* bold */
    color: var(--text-primary, #111827);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.blog-post-card-link:hover .blog-post-title {
    color: var(--accent-color, #007bff); /* Example hover color */
}

.blog-post-excerpt {
    font-size: 0.9rem; /* 14px */
    color: var(--text-secondary, #4b5563);
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1; /* Pushes meta info and read more to bottom */
}

.blog-post-meta {
    font-size: 0.8rem; /* 13px */
    color: var(--text-tertiary, #6b7280);
    margin-bottom: 0.75rem;
    display: flex;
    justify-content: space-between;
}

.blog-post-read-time {
    /* display: inline-block; */
}

.blog-post-read-more {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--accent-color, #007bff);
    text-decoration: none;
    margin-top: auto; /* Pushes to bottom if excerpt is short */
    align-self: flex-start;
}

.blog-post-card-link:hover .blog-post-read-more {
    text-decoration: underline;
}

#blog-newsletter-section {
    margin-top: 4rem; /* Add some space above newsletter on blog page */
}

/* Individual Blog Post Page Styles (blog-post-[slug].html) */
.blog-post-full-content .page-header-container {
    /* Specific adjustments if needed for post pages */
    text-align: left;
    margin-bottom: 2rem;
}

.blog-post-full-content .page-title {
    font-size: 2.5rem; /* Larger title for single post */
    margin-bottom: 0.75rem;
}

.blog-post-full-content .post-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem; /* row and column gap */
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.blog-post-full-content .post-meta-item {
    display: flex;
    align-items: center;
}

.blog-post-full-content .post-meta-item svg {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    color: var(--text-tertiary);
}

.blog-post-cover-image-container {
    width: 100%;
    max-height: 500px; /* Or aspect-ratio like on cards */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 2.5rem;
    background-color: var(--neutral-200);
    position: relative; /* For pseudo element */
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-post-cover-image-container::before {
    content: "Cover Image Missing";
    position: absolute;
    font-size: 0.9rem;
    color: var(--text-secondary, #6b7280);
    display: none; /* Hidden by default */
}

.blog-post-cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-post-cover-image:error {
    visibility: hidden;
}
.blog-post-cover-image:error::before {
    content: "Cover Image Missing";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--text-secondary, #6b7280);
    font-size: 1rem;
    visibility: visible; /* Make sure the text is visible */
}

.blog-article-content {
    max-width: 75ch; /* Optimal reading width */
    margin-left: auto;
    margin-right: auto;
}

.blog-back-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: 2rem 0;
    color: var(--accent-color);
    text-decoration: none;
    border: 1px solid var(--accent-color-translucent, rgba(0,123,255,0.3));
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.blog-back-link:hover {
    background-color: var(--accent-color-light, rgba(0,123,255,0.1));
    border-color: var(--accent-color, #007bff);
}

.blog-back-link svg {
    margin-right: 0.5rem;
}

/* --- Artwork Detail Page Styles --- */

.artwork-detail-page {
    padding-top: 120px; /* Adjust based on final header height */
    padding-bottom: 4rem;
}

.artwork-detail-back-link {
    margin-bottom: 2rem;
}

.artwork-detail-back-link .button-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-color: #ccc;
    color: #666;
}
.artwork-detail-back-link .button-outline:hover {
    border-color: #333;
    background-color: #f0f0f0;
    color: #333;
}

.artwork-detail-grid {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 2rem 3rem; /* Row gap, Column gap */
}

@media (min-width: 768px) { /* md breakpoint */
    .artwork-detail-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
    }
}

/* Unified Artwork Detail Styles */
.artwork-detail-image-column {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    overflow: visible !important;
}

.artwork-detail-image-container {
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    position: relative !important;
}

.artwork-detail-image {
    width: 100%;
    height: auto;
    display: block !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    /* Apply anti-banding techniques for smoother gradients */
    -webkit-filter: contrast(1.05);
    filter: contrast(1.05);
    transform: translateZ(0);
    will-change: transform;
    /* Add subtle noise texture to break up banding */
    background-blend-mode: overlay;
    /* Increase bit depth perception */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.artwork-detail-dimensions {
    font-size: 0.7rem;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #666 !important;
    position: absolute !important;
    bottom: 5px !important;
    right: 5px !important;
    opacity: 0.8 !important;
    z-index: 10 !important;
    text-align: right;
    display: inline-block !important;
    pointer-events: none !important; /* Prevent it from interfering with clicks */
    font-weight: 300;
}

.artwork-detail-info-column {
    /* Styles for the right column */
    padding-top: 1rem; /* Add some space above on mobile when it stacks */
}

@media (min-width: 768px) { /* md breakpoint */
     .artwork-detail-info-column {
        padding-top: 0; /* Reset padding */
    }
}


.artwork-detail-title {
    font-size: 1.75rem; /* Reduced from 2.25rem */
    font-weight: 400; /* Reduced from 600 */
    margin-bottom: 0.5rem;
    line-height: 1.2;
    color: #555; /* Slightly muted color */
}

.artwork-detail-year {
    font-size: 0.9rem;
    color: #999;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

.artwork-meta-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.artwork-meta-label {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    font-weight: 300;
}

.artwork-meta-value {
    font-size: 0.9rem;
    color: #555;
    font-weight: 400;
}

.artwork-description {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.artwork-description p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #666;
    font-weight: 300;
}

.artwork-price-availability {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}

.artwork-price {
    font-size: 1rem;
    font-weight: 400;
    color: #555;
}

.artwork-availability {
    font-size: 0.9rem;
    font-weight: 400;
}

.artwork-available {
    color: #16a34a; /* Green */
}

.artwork-sold {
    color: #dc2626; /* Red */
}

.artwork-actions {
    /* Styles for the action area (button or sold text) */
}

.artwork-inquire-button {
    width: 100%;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #333;
    color: #fff;
    border-color: #333;
}
.artwork-inquire-button:hover {
    background-color: #111;
    border-color: #111;
    color: #fff;
}

.artwork-sold-text {
    font-style: italic;
    color: #666;
    text-align: center;
    padding: 1rem 0;
    border: 1px dashed #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.artwork-placeholder-actions {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px dashed #ccc; /* Add visual separation */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #f0f0f0;
    border-color: #ddd;
    color: #999;
}

.button-disabled:hover {
    /* Override default hover styles */
    background-color: #f0f0f0;
    border-color: #ddd;
    color: #999;
}

.button-disabled svg {
    margin-right: 0.5rem;
}

/* Adjust frame wrapper margin if needed on detail page */
.artwork-detail-image-column .artwork-frame-wrapper {
     margin: 0 0 1rem 0; /* Remove side margins, keep bottom */
     /* Ensure it's block or inline-block as needed */
     display: block;
}

/* Adjust frame highlight if needed - might be too intense on large image */
.artwork-detail-image-column .artwork-frame-highlight {
   /* Example: Less intense highlight */
   /* background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0)); */
}

/* Ensure inquire button and placeholder buttons look good together */
.artwork-actions .artwork-inquire-button {
    margin-bottom: 1.5rem; /* Add space below inquire button if placeholders follow */
}
.artwork-actions .artwork-sold-text + .artwork-placeholder-actions {
     margin-top: 0; /* Remove top margin if following sold text */
     padding-top: 0;
     border-top: none; /* Remove border if following sold text */
}
.artwork-actions .artwork-sold-text {
    margin-bottom: 1.5rem; /* Add space below sold text */
}


/* Optional: Style placeholder buttons more distinctly */
.artwork-placeholder-actions .button-disabled {
    font-size: 0.85rem;
    display: inline-flex; /* Align icon and text */
    align-items: center;
    justify-content: center; /* Center content */
    width: 100%; /* Make them full width */
}

/* Scroll to Top Button Styles */
#scroll-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(51, 51, 51, 0.7); /* Semi-transparent dark */
    color: #fff;
    border: none;
    border-radius: 50%; /* Make it circular */
    width: 45px;  /* Size */
    height: 45px;
    font-size: 18px; /* Icon size */
    line-height: 45px; /* Center icon vertically */
    text-align: center; /* Center icon horizontally */
    cursor: pointer;
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.3s ease;
    z-index: 999; /* Below header/modals but above most content */
}

#scroll-to-top-button.visible {
    opacity: 1;
    visibility: visible;
}

#scroll-to-top-button:hover {
    background-color: rgba(0, 0, 0, 0.9); /* Darken on hover */
}

/* Simple upward arrow icon using borders */
#scroll-to-top-button i {
    display: inline-block;
    border: solid white;
    border-width: 0 3px 3px 0;
    padding: 4px;
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    margin-top: 6px; /* Adjust vertical position slightly */
}
/* === Featured Artworks Section Styles === */
/* These styles ensure all featured artwork cards have consistent dimensions */
/* Make all artwork card wrappers the same size */
#artwork-gallery-placeholder .artwork-card-wrapper {
    width: 100%;
    height: 300px; /* Fixed height for all cards */
    margin-bottom: 1rem;
}

/* Make the link fill the wrapper */
#artwork-gallery-placeholder .artwork-card-link {
    display: block;
    width: 100%;
    height: 100%;
}

/* Make the card fill the link */
#artwork-gallery-placeholder .artwork-card {
    width: 100%;
    height: 100%;
}

/* Make the frame fill the card */
#artwork-gallery-placeholder .artwork-frame {
    width: 100%;
    height: 100%;
}
/* --- End Featured Artworks Section --- */

/* === End of CSS File === */

/* === Artwork Lightbox Styles === */
.artwork-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.artwork-lightbox-overlay.open {
    opacity: 1;
    visibility: visible;
}

.artwork-lightbox-content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.artwork-lightbox-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10000;
    padding: 8px;
}

.artwork-lightbox-close-btn svg {
    stroke: white;
    stroke-width: 2;
}

.artwork-lightbox-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.artwork-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* === View in Room Modal Styles === */
.view-in-room-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent backdrop */
    z-index: 1100; /* Above most content */
    overflow-y: auto; /* Allow scrolling if content is too tall */
    align-items: center; /* Vertically center content box */
    justify-content: center; /* Horizontally center content box */
}

.view-in-room-modal.open {
    display: flex; /* Show the modal */
}

.view-in-room-modal-content {
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 95%;
    max-width: 1200px; /* Set max width to 1200px */
    position: relative;
    height: 90vh; /* Aim for 90% of viewport height */
    max-height: 1200px; /* But do not exceed 1200px in height */
    display: flex;
    flex-direction: column;
}

.view-in-room-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.view-in-room-modal-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.view-in-room-modal-close-button {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
    padding: 0.5rem;
}
.view-in-room-modal-close-button:hover {
    color: #333;
}

.view-in-room-modal-body {
    display: flex;
    gap: 1.5rem;
    flex-grow: 1; /* Allow body to take available space */
    overflow: hidden; 
}

.room-selector {
    flex: 0 0 200px; /* Fixed width for room selector */
    padding-right: 1.5rem;
    border-right: 1px solid #eee;
    overflow-y: auto; /* Allow scrolling for room options if many */
}

.room-selector p {
    font-weight: 500;
    margin-bottom: 1rem;
}

.room-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.room-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    background-color: #f9f9f9;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    text-align: left;
}

.room-option:hover {
    background-color: #f0f0f0;
    border-color: #ddd;
}

.room-option.selected {
    background-color: var(--accent-color-light, #e6f2ff);
    border-color: var(--accent-color, #007bff);
    font-weight: 500;
}

.room-option img {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 3px;
    border: 1px solid #eee;
}

.room-option span {
    font-size: 0.9rem;
}

.room-display-area {
    flex-grow: 1;
    position: relative;
    background-color: #e0e0e0; /* Placeholder background */
    background-size: 100% auto; /* Make image width 100% of container, height auto. May clip vertically. */
    background-position: center center;
    background-repeat: no-repeat;
    /* min-height: 300px; /* Removed to allow more flexible height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
    border-radius: 4px;
}

.artwork-in-room-image-overlay {
    position: absolute;
    width: 300px; /* Base width for scale(1.0) calculations */
    height: auto; /* Will be determined by content aspect ratio */
    top: 0;       /* Positioned from top-left of parent by transform */
    left: 0;      /* Positioned from top-left of parent by transform */
    transform-origin: center center; /* Crucial for scaling from center */
    /* cursor: grab; /* Removed as per new feedback */
    /* transform: translate(0px, 0px) scale(1); /* Initial state if needed, JS will override */
}

/* Responsive adjustments for the modal */
@media (max-width: 768px) {
    .view-in-room-modal-body {
        flex-direction: column;
    }
    .room-selector {
        flex: 0 0 auto; 
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-bottom: 1px solid #eee;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
    .room-options {
        flex-direction: row; 
        flex-wrap: wrap; 
        justify-content: center;
    }
    .room-option {
        flex-direction: column; 
        align-items: center;
        width: 100px; 
    }
    .room-option img {
        width: 80px;
        height: 50px;
    }
    .room-option span {
        font-size: 0.8rem;
        margin-top: 0.25rem;
    }
    .room-display-area {
        /* min-height: 250px; /* Removed to allow more flexible height */
    }
    .view-in-room-modal-content {
        padding: 1rem;
        width: 95%;
        max-height: 95vh;
    }
}
/* === New View In Room Modal (VIR) Styles === */
.vir-modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1200; /* Higher than existing modals like search */
    display: none; /* Hidden by default, JS will toggle */
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.8); /* .bg-black/80 */
    backdrop-filter: blur(4px); /* .backdrop-blur-sm (adjust blur amount as needed) */
    -webkit-backdrop-filter: blur(4px);
}

.vir-modal-overlay.open {
    display: flex;
}

.vir-modal-content {
    background-color: #fff; /* .bg-white */
    border-radius: 0.5rem; /* .rounded-lg (0.5rem is a common value for lg) */
    /* Example for .shadow-xl - from https://tailwindcss.com/docs/box-shadow */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    max-width: 1200px; /* Set max width to 1200px for desktop */
    width: calc(100% - 2rem); /* .w-full with some margin for small screens */
    height: 1200px; /* Attempt to be 1200px tall */
    max-height: 90vh;  /* But ensure it fits within 90% of viewport height */
    overflow: hidden; /* .overflow-hidden - important for overall modal shape */
    display: flex;
    flex-direction: column;
}

.vir-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem; /* .p-4 */
    border-bottom: 1px solid #e5e7eb; /* .border-b .border-gray-200 */
    flex-shrink: 0; /* Prevent header from shrinking */
}

.vir-modal-title {
    font-size: 1.25rem; /* .text-xl */
    font-weight: 600; /* .font-semibold */
    color: #1f2937; /* Darker gray for title */
}

.vir-modal-close-btn {
    background-color: transparent;
    border: none;
    border-radius: 9999px; /* .rounded-full */
    padding: 0.25rem; /* .p-1 */
    cursor: pointer;
    transition: background-color 0.2s ease-in-out; /* .transition-colors */
    display: flex; /* For centering SVG if needed */
    align-items: center;
    justify-content: center;
}

.vir-modal-close-btn:hover {
    background-color: #f3f4f6; /* .hover:bg-gray-100 */
}

.vir-modal-close-btn svg {
    width: 24px;
    height: 24px;
    color: #6b7280; /* A medium gray for the icon */
}

.vir-modal-body-wrapper {
    flex-grow: 1; /* Takes up remaining space */
    display: flex; 
    overflow: hidden; /* Key for managing internal scroll/layout */
    /* Example: Desktop layout with preview on left, controls on right */
    /* On mobile, these might stack. This will be handled by child element styles or media queries. */
}

/* Placeholder styles for children of body-wrapper, will be detailed later */
.vir-room-preview-placeholder { /* Temporary */
    flex-grow: 1; 
    background-color: #f0f0f0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    min-height: 300px; /* Ensure it has some height */
}
.vir-controls-panel-placeholder { /* Temporary */
    width: 300px; /* Fixed width for controls panel */
    background-color: #f9f9f9; 
    padding: 1rem; 
    min-height: 300px; /* Ensure it has some height */
    flex-shrink: 0; /* Prevent controls panel from shrinking */
    overflow-y: auto; /* If controls exceed height */
}


.vir-modal-actions {
    display: flex;
    justify-content: flex-end; /* .justify-end */
    gap: 0.5rem; /* .gap-2 */
    padding: 1rem; /* .p-4 (consistent padding) */
    border-top: 1px solid #e5e7eb; /* .border-t .border-gray-200 */
    flex-shrink: 0; /* Prevent footer from shrinking */
}

/* Base button styles (can be expanded and made more generic later) */
.vir-btn {
    padding: 0.5rem 1rem; /* .px-4 .py-2 */
    font-size: 0.875rem; /* .text-sm */
    font-weight: 500; /* .font-medium */
    border-radius: 0.375rem; /* .rounded-md */
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.25rem; /* Ensure text is vertically centered */
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.vir-btn-secondary {
    border-color: #d1d5db; /* .border-gray-300 */
    color: #374151; /* .text-gray-700 */
    background-color: #fff;
}

.vir-btn-secondary:hover {
    background-color: #f9fafb; /* .hover:bg-gray-50 */
    border-color: #adb5bd;
}

.vir-btn-primary {
    background-color: #111827; /* .bg-black */
    color: #fff; /* .text-white */
    border-color: #111827; /* .border-black */
}

.vir-btn-primary:hover {
    background-color: #1f2937; /* .hover:bg-black/90 (approx) */
    border-color: #1f2937;
}

/* Responsive: On smaller screens, modal content might need adjustments */
@media (max-width: 768px) {
    .vir-modal-content {
        max-width: 100%; 
        width: calc(100% - 1rem); /* Slightly less than full for small gap */
        max-height: 95vh; /* Allow a bit more height on mobile */
        margin: 0.5rem; /* Ensure it doesn't touch edges */
    }

    .vir-modal-body-wrapper {
        flex-direction: column; /* Stack preview and controls */
    }

    .vir-controls-panel-placeholder { /* Temporary */
        width: 100%; /* Full width on mobile */
        max-height: 40vh; /* Limit height of controls panel */
        border-top: 1px solid #e5e7eb;
    }

    .vir-modal-title {
        font-size: 1.125rem; /* Slightly smaller title on mobile */
    }
    .vir-modal-actions {
        padding: 0.75rem;
    }
    .vir-btn {
        padding: 0.5rem 0.75rem; /* Slightly smaller buttons */
        font-size: 0.8rem;
    }
}
/* VIR Controls Panel & Room Selection Grid */
.vir-controls-panel {
    width: 300px; /* Fixed width for controls panel on desktop */
    padding: 1rem; 
    flex-shrink: 0; /* Prevent controls panel from shrinking */
    overflow-y: auto; /* If controls exceed height */
    background-color: #f9fafb; /* Light gray background like .bg-gray-50 */
    border-left: 1px solid #e5e7eb; /* Separator from preview on desktop */
}

.vir-control-group {
    margin-bottom: 1.5rem; 
}
.vir-control-group:last-child {
    margin-bottom: 0;
}

.vir-control-label {
    display: block; 
    font-size: 0.875rem; /* .text-sm */
    font-weight: 500; /* .font-medium */
    color: #374151; /* text-gray-700 */
    margin-bottom: 0.75rem; /* Adjusted from 0.5rem for a bit more space */
}

.vir-room-selection-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for a stacked layout */
    gap: 0.75rem; /* .gap-2 (adjusted from 0.5rem) */
}

.vir-room-thumb-btn {
    aspect-ratio: 16 / 9; /* .aspect-video */
    position: relative; /* .relative */
    overflow: hidden; /* .overflow-hidden */
    border-radius: 0.375rem; /* .rounded-md */
    border: 2px solid transparent; /* .border-2 .border-transparent */
    cursor: pointer;
    transition: border-color 0.2s ease-in-out; /* .transition-colors (simplified) */
    background-color: #e0e0e0; /* Fallback if image doesn't load, darker than preview bg */
    padding: 0; /* Remove button default padding */
}

.vir-room-thumb-btn:hover {
    border-color: #d1d5db; /* .hover:border-gray-300 */
}

.vir-room-thumb-btn.selected { /* For active tab/button */
    border-color: #111827; /* .border-black */
}

.vir-room-thumb-img {
    width: 100%; /* .w-full */
    height: 100%; /* .h-full */
    object-fit: cover; /* .object-cover */
    display: block; /* Remove any extra space under image */
    filter: brightness(0.9); /* .brightness-90 */
    transition: filter 0.3s ease-in-out; /* .transition-all (simplified to filter) */
}

.vir-room-thumb-btn:hover .vir-room-thumb-img {
    filter: brightness(1); /* .hover:brightness-100 */
}

.vir-room-thumb-label {
    position: absolute; /* .absolute */
    bottom: 0.375rem; /* .bottom-2 (0.5rem was a bit large for small thumbs) */
    left: 0.375rem; /* .left-2 */
    font-size: 0.75rem; /* .text-xs */
    font-weight: 500; /* .font-medium */
    color: #fff; /* .text-white */
    background-color: rgba(0, 0, 0, 0.6); /* .bg-black/50 (slightly more opacity) */
    padding: 0.125rem 0.375rem; /* .px-2 .py-1 (adjusted) */
    border-radius: 0.25rem; /* .rounded */
    line-height: 1.2;
}

/* Responsive adjustments for controls panel (already have some for .vir-modal-body-wrapper) */
@media (max-width: 768px) {
    .vir-controls-panel {
        width: 100%; /* Full width on mobile */
        max-height: none; /* Was 40vh, let it take natural height or be scrollable */
        border-left: none;
        border-top: 1px solid #e5e7eb; /* Separator when stacked */
        /* overflow-y: visible; /* Let content determine height, parent .vir-modal-body-wrapper handles scroll */
    }
    .vir-room-selection-grid {
        /* Could change to 3 columns if space allows and more rooms */
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); 
        gap: 0.5rem; /* Slightly smaller gap on mobile */
    }
}
/* VIR Room Preview Area */
.vir-room-preview {
    position: relative; /* .relative */
    flex-grow: 1; /* Take available space from .vir-modal-body-wrapper */
    background-color: #f3f4f6; /* .bg-gray-100 */
    overflow: hidden; /* Ensure artwork overlay doesn't spill if mispositioned */
    
    /* Attempt to maintain a 16:9 aspect ratio for the preview area itself */
    /* This might be constrained by flex parent's height. */
    aspect-ratio: 16 / 9;

    /* Styles for the background room image (applied via JS to this element) */
    background-size: cover; /* Corresponds to .object-cover for background */
    background-position: center center;
    background-repeat: no-repeat;

    /* Flex properties to help if direct children were being centered,
       but artwork is absolutely positioned so these are less critical for it. */
    display: flex; 
    align-items: center;
    justify-content: center;
}

/* Responsive adjustments for preview area */
@media (max-width: 768px) {
    .vir-room-preview {
        aspect-ratio: auto; /* Let flexbox determine aspect ratio on mobile when stacked */
        min-height: 250px; /* Ensure it has some height when stacked */
        width: 100%; /* Take full width when stacked under controls */
    }
}
/* VIR Size Controls */
.vir-size-slider {
    width: 100%; /* .w-full */
    margin-top: 0.25rem; 
    accent-color: #111827; /* Match primary button color for thumb/track */
    height: 20px; /* Makes the track and thumb a bit easier to interact with */
}

/* Basic cross-browser styling for range input track and thumb can be added here if needed,
   but it's often complex. `accent-color` is the modern approach for simple color changes. */

#vir-size-value-display {
    font-weight: normal;
    color: #6b7280; /* text-gray-500 */
}

.vir-size-presets {
    display: flex; /* .flex */
    gap: 0.5rem; /* .gap-2 */
    margin-top: 0.5rem; /* Matches .mt-2 if base spacing is 0.25rem */
}

.vir-size-preset-btn {
    font-size: 0.75rem; /* .text-xs */
    padding: 0.25rem 0.75rem; /* .py-1 .px-3 */
    border-radius: 9999px; /* .rounded-full */
    border: 1px solid #d1d5db; /* .border .border-gray-300 */
    background-color: #fff;
    color: #374151; /* Default text color */
    cursor: pointer;
    line-height: 1.25rem;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out; /* .transition-colors */
}

.vir-size-preset-btn:hover {
    background-color: #f3f4f6; /* .hover:bg-gray-100 */
    border-color: #adb5bd;
}

.vir-size-preset-btn.selected { /* For active preset */
    background-color: #111827; /* .bg-black */
    color: #fff; /* .text-white */
    border-color: #111827; /* .border-black */
}

.vir-size-preset-btn.selected:hover {
    background-color: #1f2937; /* .hover:bg-black/90 */
    border-color: #1f2937;
}
/* VIR Modal Instructions */
.vir-instructions {
    padding: 0.5rem 0.25rem; /* A bit of padding */
    margin-bottom: 1rem; /* Space before the first control group */
    border-bottom: 1px solid #e5e7eb; /* Separator */
    padding-bottom: 1rem;
}

.vir-instructions p {
    font-size: 0.8rem; /* Smaller text */
    color: #6b7280; /* Muted text color (gray-500) */
    line-height: 1.5;
    margin: 0;
}
/* VIR Draggable Hint Animation */
@keyframes vir-frame-wiggle-hint {
    0%, 100% { transform: translateX(0)    translateZ(0); }
    25%       { transform: translateX(-4px) translateZ(0); }
    50%       { transform: translateX(4px)  translateZ(0); }
    75%       { transform: translateX(-2px) translateZ(0); }
}

.vir-apply-frame-wiggle .artwork-frame { /* Target the inner frame */
    animation: vir-frame-wiggle-hint 0.6s ease-in-out 2; /* 0.6s duration, play twice */
}
/* VIR Drag Hint Styles */
.vir-drag-hint {
    position: absolute;
    top: 50%; /* Centered on the artwork initially */
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Above artwork, below any modal-level popups if any */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background-color: rgba(0, 0, 0, 0.75);
    color: #fff;
    border-radius: 0.375rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    pointer-events: none; /* So it doesn't interfere with dragging the artwork itself */
}

.vir-drag-hint.visible {
    opacity: 1;
    visibility: visible;
    animation: vir-drag-hint-pulse 1.5s ease-in-out 2 forwards; /* Pulse twice, then stay for fade out via JS */
}

.vir-drag-hint.fade-out {
    opacity: 0;
    visibility: hidden;
}

.vir-drag-hint-finger {
    font-size: 2rem; /* Adjust size of 👆 */
    display: inline-block;
}

.vir-drag-hint-tooltip {
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

@keyframes vir-drag-hint-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}
/* VIR Section Specific Instructions */
.vir-section-instruction {
    font-size: 0.8rem;
    color: #4b5563; /* text-gray-600, slightly darker than previous for better readability */
    line-height: 1.4;
    margin-bottom: 0.75rem; /* Space before the next control group's label */
    padding: 0.25rem; /* Small padding around text */
}
/* Styles for floated bio images removed as per layout change. */
/* New styles for about page grid layout will be added below if this was the end of the file, or in a new block. */
/* About Page - New Grid Layout (as per screenshot) */
.about-grid-layout {
    display: grid;
    grid-template-columns: 1fr; /* Mobile-first: single column */
    gap: 2rem; 
    align-items: flex-start; /* Align content to the top of their grid area */
    margin-top: 2rem; /* Add some space above the grid */
    margin-bottom: 2rem; /* Add some space below the grid */
}

/* Page/Section Titles (like "About Regina Nein" now above the grid) */
.section-title, /* Generic class for main section titles */
.about-title {   /* Specific existing class, ensuring it's styled */
    font-size: 2.25rem; /* text-4xl or similar, adjust as needed */
    font-weight: 600; /* semibold */
    line-height: 1.2;
    margin-bottom: 2rem; /* Space after the title, before the grid/content */
    /* text-center class handles alignment if applied in HTML */
}
/* Ensure .about-title specifically if it's not using .section-title and needs these */
.about-title {
    /* Inherits from .section-title if both classes are used, or define specifics here */
    /* If .text-center is on the h1 in HTML, no need for text-align here */
}


.about-text-content .about-bio {
    /* .prose styling will apply for paragraphs */
}

.about-text-content .about-cta {
    /* .mt-large class (defined below or globally) will provide top margin */
    /* Button itself is styled by .button class */
}

.about-image-gallery-container {
    /* Container for the right-column image gallery */
}

.about-image-gallery-container img,
.about-gallery-main-image,
.about-gallery-small-image {
    display: block;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 0.75rem; /* approx 12px, matches screenshot */
    object-fit: cover; /* Ensures images fill their containers nicely */
}

.about-gallery-main-image {
    margin-bottom: 1rem; /* Space between the large image and the two smaller ones */
}

.about-gallery-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns for the smaller images */
    gap: 1rem; /* Gap between the two smaller images */
}

/* Responsive adjustments for the grid layout */
@media (min-width: 768px) { /* Tablet and larger */
    .about-grid-layout {
        grid-template-columns: 1fr 1fr; /* Make text and image columns equal width */
        gap: 3rem; /* Larger gap for wider screens */
    }
}

/* Utility classes (ensure these are defined, or adjust HTML if using different utilities) */
/* .text-center was removed with the floated image CSS, re-adding if needed, though prose might handle title */
/* The HTML currently doesn't use text-center on the title with the new structure */

.mt-large { /* Re-adding if it was removed, used by .about-cta */
    margin-top: 2.5rem;
}


/* About Page: Ensure paragraph spacing in bio */
.about-section .about-bio.prose p {
    margin-top: 0; /* Avoid double margin if prose adds its own margin-top */
    margin-bottom: 1.25em; /* Standard spacing after a paragraph */
}

/* Ensure the last paragraph in the bio doesn't add extra margin if followed by CTA */
.about-section .about-bio.prose p:last-child {
    margin-bottom: 0;
}

/* Add space after the entire bio block if needed, before the CTA */
.about-section .about-bio.prose {
    margin-bottom: 1.5rem; /* Space before the .about-cta which has mt-large */
}

/* Artwork Shadow - Consolidated */
.artwork-shadow {
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px !important;
  display: inline-block;
  background: transparent; /* Remove white background */
  padding: 0; /* Remove padding */
  margin: 0; /* Remove margin */
  transition: all 0.3s ease; /* Add transition for hover effects */
}

/* === Artwork Lightbox Styles === */
.artwork-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    cursor: pointer; /* Add cursor pointer to indicate clickable area */
}

.artwork-lightbox-overlay.open {
    opacity: 1;
    visibility: visible;
}

.artwork-lightbox-content {
    position: relative;
    width: 90%;
    height: 90%;
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.artwork-lightbox-close-btn {
    position: absolute;
    top: -40px;
    right: 0;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    z-index: 10000;
    padding: 8px;
}

.artwork-lightbox-close-btn svg {
    stroke: white;
    stroke-width: 2;
}

.artwork-lightbox-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.artwork-lightbox-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    cursor: default; /* Reset cursor for the image */
}

/* Mobile-specific styles */
@media (max-width: 768px) {
    .artwork-lightbox-overlay {
        background-color: rgba(0, 0, 0, 0.95); /* Darker background on mobile */
    }
    
    .artwork-lightbox-content {
        width: 95%;
        height: 95%;
    }
    
    .artwork-lightbox-close-btn {
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        padding: 10px;
    }
}

/* Hide artwork dimensions on individual artwork pages */
.artwork-detail-dimensions {
    display: none !important;
}

.section-cta {
    margin-top: 4rem;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   WordPress Theme Additions
   - Inline styles moved to CSS (no visual change)
   - WordPress nav active state
   ========================================================================== */

/* Search no-results is now managed via .is-visible class in the search modal CSS block */

/* 2. Artwork detail image — anti-banding, performance, cursor (was inline on all 17 detail pages) */
.artwork-detail-image {
    -webkit-filter: contrast(1.05);
    filter: contrast(1.05);
    transform: translateZ(0);
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    border: none;
    outline: none;
    cursor: zoom-in;
}

/* 3. Artwork shadow wrapper resets (was inline on all 17 detail pages) */
.artwork-detail-image-column .artwork-shadow {
    background: transparent;
    border: none;
    outline: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 4. Artwork dimensions badge positioning (was inline on all 17 detail pages) */
.artwork-detail-dimensions {
    margin: 0;
    padding: 0;
    background: transparent;
    color: #666;
    position: absolute;
    bottom: 5px;
    right: 5px;
    font-size: 0.7rem;
    opacity: 0.8;
}

/* 5. About page prose section (was inline style on <section>) */
.about-prose-section {
    max-width: 700px;
    margin: auto;
    line-height: 1.6;
    color: #333;
}

/* 6. Parallax hero background image (was inline style="background-image: url(...)") */
.parallax-hero-bg-image {
    background-image: url('../images/hero/ethereal-wash.png');
}

/* 7. WordPress nav active state (.current-menu-item maps to static .active) */
.current-menu-item .nav-link,
.current-menu-item .mobile-nav-link {
    font-weight: 600;
    color: #111827;
}

/* 8. WordPress nav menu reset (wp_nav_menu wraps in <ul class="menu">) */
.desktop-navigation .menu,
.mobile-navigation .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* 9. VIR room-selection separator (was inline style on the <p class="vir-room-separator">) */
.vir-room-separator {
    margin-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 1rem;
}

/* 10. Footer nav: WordPress wp_nav_menu wraps links in <li>, target the <a> */
.footer-nav .menu {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav .menu a {
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
}