:root {
  /* Mediterranean Light & Lecce Limestone Palette */
  --bg-color: #F6F1E7;
  --bg-section: #EEE6D8;
  --text-primary: #2E2B27;
  --text-secondary: #6E665B;
  --border-color: #DDD3C4;

  /* Accents */
  --accent-blue: #2F5D8C;
  --accent-red: #9C3A2E;
  --accent-orange: #C56A2D;

  /* Fonts */
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Source Sans 3', sans-serif;

  /* House of Art Specifics */
  --museum-bg: #EFE5D4;
  --museum-text: #3A332C;
  --museum-heading: #2A241F;
  --museum-line: #C8B59A;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg-color);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  line-height: 1.7;
}

a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--accent-blue);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  color: var(--text-primary);
  margin-top: 0;
}

h1 {
  font-size: 3rem;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

/* Header */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 60px 0 40px;
  border-bottom: 1px solid transparent;
  /* Cleaner loop */
}

.logo a {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-primary);
}

.main-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav li {
  margin-left: 40px;
}

.main-nav a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

.main-nav a:hover {
  color: var(--accent-blue);
}

.main-nav a.active {
  color: var(--accent-red);
}

.language-selector {
  margin-left: 40px;
  display: flex;
  gap: 15px;
  align-items: center;
}

.language-selector a.lang-link {
  display: flex;
  align-items: center;
  opacity: 0.4;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-left: 0;
}

.language-selector a.lang-link svg {
  display: block;
  border-radius: 2px;
  /* Slight rounding for elegance */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.language-selector a.lang-link:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.language-selector a.lang-link.active {
  opacity: 1;
  cursor: default;
  pointer-events: none;
  transform: scale(1.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  /* Lift effective active item */
}

/* No Separator for icons */
.language-selector a.lang-link:not(:last-child)::after {
  content: none;
}

/* Main Content */
.main-content {
  flex: 1;
  padding: 60px 0;
}

/* Hero (Homepage) */
/* Hero (Homepage) */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 0;
  gap: 60px;
  min-height: 60vh;
  /* Ensure it takes up good screen space */
}

.hero-content {
  flex: 1;
  text-align: left;
}

.hero h1 {
  font-size: 4.5rem;
  /* Larger title */
  margin-bottom: 30px;
  color: var(--text-primary);
  line-height: 1.1;
}

.hero .content {
  font-size: 1.3rem;
  /* Slightly larger text */
  color: var(--text-secondary);
  max-width: 500px;
}

.hero-image {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-image img {
  max-width: 100%;
  height: auto;
  max-height: 600px;
  /* Prevent being too tall */
  box-shadow: 20px 20px 0 var(--bg-section);
  /* Decorative shadow/offset */
  filter: sepia(0.1) contrast(1.05);
  /* Subtle warmth */
  transition: transform 0.5s ease;
}

.hero-image:hover img {
  transform: scale(1.02);
}

@media (max-width: 900px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 60px 0;
    gap: 40px;
  }

  .hero-content {
    text-align: center;
    order: 2;
    /* Image first on mobile? Or text? Let's keep text first for now */
  }

  .hero .content {
    margin: 0 auto;
  }

  .hero-image {
    width: 100%;
    order: 1;
  }

  .hero h1 {
    font-size: 3rem;
  }
}

/* Gallery Base (Artworks) */
.artworks-gallery h1,
.section-list h1 {
  text-align: center;
  margin-bottom: 60px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 60px;
}

.gallery-item {
  display: block;
  border: 1px solid var(--border-color);
  padding: 20px;
  background-color: transparent;
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.gallery-item:hover {
  border-color: var(--accent-orange);
  transform: translateY(-5px);
}

.gallery-item .image-wrapper {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: var(--bg-section);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Maintain artwork aspect ratio */
  display: block;
}

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

.artwork-info h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  margin-bottom: 5px;
  color: var(--text-primary);
}

.artwork-info p {
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}

/* Single Page (General) */
.single-page {
  max-width: 800px;
  margin: 0 auto;
}

.single-page header {
  text-align: center;
  margin-bottom: 60px;
}

.single-page h1 {
  font-size: 3rem;
  margin-bottom: 10px;
}

.single-page .meta {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.artwork-image {
  margin-bottom: 60px;
  text-align: center;
}

.artwork-image img {
  max-width: 100%;
  height: auto;
  box-shadow: none;
  /* No strong shadows */
}

/* Press List */
.press-list {
  max-width: 800px;
  margin: 0 auto;
}

.press-items {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

.press-item {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 30px;
}

.press-item h3 {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.press-item h3 a {
  border-bottom: 1px solid transparent;
}

.press-item h3 a:hover {
  border-bottom-color: var(--accent-blue);
}

.press-item .publication-meta {
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-orange);
  margin-bottom: 15px;
}

.press-item .read-more {
  display: inline-block;
  margin-top: 15px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-blue);
  font-weight: 600;
}

/* La Casa dell’Arte (Special Layout) */
.page-museum {
  background-color: var(--museum-bg);
  color: var(--museum-text);
  /* Break out of container for full width background if needed, 
     but here we apply it to the main block or ensure body adapts.
     Since .container constrains us, we'll style the inner blocks strictly. 
     For a truly full-page feel, we might need to adjust the baseof, 
     but for now we style the content block distinctively. */
  padding: 60px;
  margin: -40px -20px -40px;
  /* Negative margin to expand within container padding */
  border-top: 1px solid var(--museum-line);
  border-bottom: 1px solid var(--museum-line);
}

.museum-hero {
  text-align: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--museum-line);
  margin-bottom: 60px;
}

.museum-hero h1 {
  font-family: var(--font-heading);
  color: var(--museum-heading);
  font-size: 4rem;
  font-style: italic;
}

.architectural-text {
  max-width: 700px;
  margin: 0 auto;
  font-size: 1.3rem;
  line-height: 1.9;
  color: var(--museum-text);
  text-align: justify;
}

.architectural-text p:first-of-type::first-letter {
  font-family: var(--font-heading);
  font-size: 3.5em;
  float: left;
  line-height: 0.8;
  padding-right: 15px;
  color: var(--museum-heading);
}

/* Footer */
.site-footer {
  padding: 60px 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-color);
}

/* Responsive */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    padding: 30px 0;
  }

  .logo {
    margin-bottom: 30px;
  }

  .main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  .main-nav li {
    margin: 0;
  }

  .language-selector {
    margin: 30px 0 0;
  }

  .hero h1,
  .museum-hero h1 {
    font-size: 2.5rem;
  }

  .page-museum {
    padding: 30px;
    margin: -20px -20px;
  }
}

/* Exhibitions List */
.exhibitions-list {
  max-width: 800px;
  margin: 0 auto;
}

.exhibition-items {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 40px;
}

.exhibition-item {
  display: flex;
  gap: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--border-color);
}

.exhibition-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 60px;
  text-align: center;
  font-family: var(--font-heading);
  color: var(--accent-red);
}

.exhibition-date .year {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.exhibition-date .month {
  font-size: 1rem;
  text-transform: uppercase;
  margin-top: 5px;
}

.exhibition-details h3 {
  margin-bottom: 5px;
  font-size: 1.5rem;
}

.exhibition-details .location {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}