/* ============================================================
   FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --white: #FFFFFF;
  --ink: #0B0B0B;
  --text: #1A1A1A;
  --text-muted: #6B6B6B;
  --rule: #E5E5E5;
  --rule-strong: #1A1A1A;
  --accent-warm: #C8A882;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'Libre Franklin', -apple-system, BlinkMacSystemFont, sans-serif;

  --gutter: 64px;
  --max-width: 1200px;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
}

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

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

ul {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  height: 80px;
  padding: 0 var(--gutter);
  /* Liquid glass */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.38) 100%
  );
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  transition: background 300ms ease, box-shadow 300ms ease;
}

.site-nav.scrolled {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.70) 0%,
    rgba(255, 255, 255, 0.56) 100%
  );
  box-shadow:
    0 4px 32px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* Logo lockup: image + text */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo {
  height: 36px;
  width: auto;
  display: block;
}

.nav-logo-text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--text);
  white-space: nowrap;
}

/* Invert logo for dark backgrounds (footer, dark overlays) */
.site-logo--inverted {
  filter: invert(1);
}

/* Primary nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  margin-right: 32px;
}

.nav-links a {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text-muted);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 150ms ease;
}

.nav-links a:hover::after {
  transform: scaleX(1);
}

/* Right zone: social icons + lang toggle */
.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-social a {
  display: flex;
  align-items: center;
  color: var(--text);
  transition: opacity 150ms ease;
}

.nav-social a:hover {
  opacity: 0.6;
}

.nav-social svg {
  width: 16px;
  height: 16px;
}

.lang-toggle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.lang-toggle .active {
  opacity: 1;
}

.lang-toggle .inactive {
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.lang-toggle .inactive:hover {
  opacity: 0.7;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  color: var(--text);
}

.nav-hamburger svg {
  width: 22px;
  height: 22px;
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 0 24px 48px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease;
}

.mobile-menu.open {
  opacity: 1;
  pointer-events: all;
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  flex-shrink: 0;
}

.mobile-menu-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mobile-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.mobile-close svg {
  width: 20px;
  height: 20px;
}

.mobile-nav-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  padding: 32px 0;
}

.mobile-nav-links li {
  height: 56px;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.mobile-menu.open .mobile-nav-links li:nth-child(1) { transition-delay: 30ms; opacity: 1; transform: none; }
.mobile-menu.open .mobile-nav-links li:nth-child(2) { transition-delay: 60ms; opacity: 1; transform: none; }
.mobile-menu.open .mobile-nav-links li:nth-child(3) { transition-delay: 90ms; opacity: 1; transform: none; }
.mobile-menu.open .mobile-nav-links li:nth-child(4) { transition-delay: 120ms; opacity: 1; transform: none; }
.mobile-menu.open .mobile-nav-links li:nth-child(5) { transition-delay: 150ms; opacity: 1; transform: none; }
.mobile-menu.open .mobile-nav-links li:nth-child(6) { transition-delay: 180ms; opacity: 1; transform: none; }
.mobile-menu.open .mobile-nav-links li:nth-child(7) { transition-delay: 210ms; opacity: 1; transform: none; }

.mobile-nav-links a {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
  text-decoration: none;
  width: 100%;
}

.mobile-menu-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}

.mobile-social {
  display: flex;
  gap: 20px;
}

.mobile-social a {
  color: var(--text);
  display: flex;
}

.mobile-social svg {
  width: 18px;
  height: 18px;
}

.mobile-lang-toggle {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text);
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 85vh;
  overflow: hidden;
  background: #111;
}

.hero-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
}

.hero-slide.active {
  opacity: 1;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: scale(1.0);
  transition: transform 8s linear;
}

.hero-slide-bottom img {
  object-position: center bottom;
}

.hero-slide.active img {
  transform: scale(1.06);
  transition: transform 8s ease-out;
}

/* Pagination dots */
.hero-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 10;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 200ms ease, opacity 200ms ease;
}

.hero-dot.active {
  background: rgba(255, 255, 255, 1);
}

/* Hero progress bar */
.hero-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.15);
  z-index: 10;
}

.hero-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent-warm);
  transition: width 100ms linear;
}

/* ============================================================
   SELECTED PROJECTS
   ============================================================ */
.projects {
  padding: 96px var(--gutter);
}

.section-header {
  text-align: center;
  margin-bottom: 64px;
}

.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
}

.section-title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text);
  margin-top: 16px;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.project-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.card-image-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #F5F5F4;
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease-out;
}

.project-card:hover .card-image-wrap img {
  transform: scale(1.04);
}

.project-card:hover .card-image-wrap {
  box-shadow: inset 0 0 0 1px var(--accent-warm);
}

.card-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
  margin-top: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-meta {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.projects-footer {
  max-width: var(--max-width);
  margin: 64px auto 0;
  text-align: right;
}

.view-all {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 150ms ease;
}

.view-all:hover {
  opacity: 0.6;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--white);
  color: var(--text);
  border-top: 1px solid var(--rule);
}

/* Band 1 — Main content */
.footer-main {
  padding: 96px var(--gutter) 64px;
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Shared column heading (all three columns) */
.footer-col-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}

/* Shared description line under each heading */
.footer-col-desc {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 12px;
}

/* Column 1 — Newsletter */
.newsletter-form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.newsletter-form input[type="email"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color 200ms ease;
}

.newsletter-form input[type="email"]::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.newsletter-form input[type="email"]:focus {
  border-bottom-color: var(--ink);
}

.newsletter-form button[type="submit"] {
  align-self: flex-end;
  margin-top: 16px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 12px 28px;
  border-radius: 0;
  cursor: pointer;
  border: 1px solid var(--ink);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.newsletter-form button[type="submit"]:hover {
  background: var(--white);
  color: var(--ink);
  border-color: var(--ink);
}

/* Column 2 — Connect */
.footer-connect a {
  display: block;
  font-size: 15px;
  color: var(--text-muted);
  margin-top: 14px;
  text-decoration: none;
  position: relative;
  transition: color 150ms ease;
}

.footer-connect a::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 150ms ease;
}

.footer-connect a:hover {
  color: var(--ink);
}

.footer-connect a:hover::after {
  transform: scaleX(1);
}

/* Column 3 — Studio */
.footer-email {
  display: block;
  font-size: 16px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  margin-top: 24px;
  transition: text-decoration-thickness 150ms ease;
}

.footer-email:hover {
  text-decoration-thickness: 2px;
}

.footer-locations {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 14px;
}

/* Band 2 — Bottom bar */
.footer-bottom {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 24px var(--gutter);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
}

.footer-legal {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.footer-legal a {
  color: var(--text-muted);
  transition: color 150ms ease;
}

.footer-legal a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.footer-credit {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
}

.footer-credit a {
  color: inherit;
  transition: color 150ms ease;
}

.footer-credit a:hover {
  color: var(--text-muted);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), 
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: all;
}
.reveal-up.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE — TABLET (760px–1280px)
   ============================================================ */
@media (max-width: 1280px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (<900px)
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --gutter: 24px;
  }

  /* Nav: hide links and right zone, show hamburger */
  .nav-links,
  .nav-right {
    display: none;
  }

  .nav-hamburger {
    display: flex;
  }

  /* Hero height */
  .hero {
    height: 75vh;
  }

  /* Projects: single column */
  .projects {
    padding: 64px var(--gutter);
  }

  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .section-title {
    font-size: 36px;
  }

  /* Footer: single column with hairline dividers */
  .footer-main {
    padding: 64px var(--gutter) 48px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .footer-col {
    padding: 48px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .footer-col:first-child {
    border-top: none;
    padding-top: 0;
  }

  .footer-col:last-child {
    padding-bottom: 0;
  }

  /* Newsletter button full-width on mobile */
  .newsletter-form button[type="submit"] {
    align-self: stretch;
    text-align: center;
  }

  /* Bottom bar stacks vertically, centered */
  .footer-bottom {
    padding: 24px var(--gutter);
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
  }
}

@media (max-width: 760px) {
  .projects-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================================================
   INNER PAGE — SHARED HEADER PATTERN
   ============================================================ */
.page-header {
  padding: 96px var(--gutter) 0;
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin: 0 auto;
}

.page-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.page-title {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}

.page-lead {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--text);
  max-width: 720px;
  margin-top: 24px;
}

.page-content {
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 80px var(--gutter) 120px;
}

/* ============================================================
   FILTER PILLS (shared across Work, Exhibitions, News)
   ============================================================ */




/* Ghost button (used in Exhibitions, Press CTAs) */
.btn-ghost {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
  cursor: pointer;
}

.btn-ghost:hover {
  background: var(--ink);
  color: var(--white);
}

/* Year anchor header (shared: Exhibitions, Press) */
.year-anchor {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  padding: 48px 0 24px;
  width: 100%;
}

/* The history is grouped by kind of exhibition, in the CV's own order, so the
   page and the CV read the same way. Years run newest-first inside each group. */
.type-anchor {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  width: 100%;
  padding: 56px 0 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--accent-warm);
}

.type-anchor:first-child {
  padding-top: 8px;
}

/* ============================================================
   WORK PAGE
   ============================================================ */
.work-series {
  border-top: 1px solid var(--accent-warm);
  padding-top: 80px;
  margin-bottom: 96px;
}

.series-header {
  margin-bottom: 48px;
}

.series-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
}

.series-desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--text);
  line-height: 1.6;
  max-width: 640px;
  margin-top: 12px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

/* Work cards use NATIVE aspect ratio (not forced) */
.work-card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  position: relative;
}

.work-card__image {
  width: 100%;
  overflow: hidden;
  background: #F5F5F4;
  max-height: 560px;
}

.work-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 300ms ease;
}

.work-card__image img.loaded {
  opacity: 1;
}

.work-card:hover::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--accent-warm);
  pointer-events: none;
  transition: opacity 200ms ease;
}

.work-card__caption {
  margin-top: 16px;
}

.work-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}

.work-card__meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
}

/* ============================================================
   EXHIBITIONS PAGE
   ============================================================ */
.exhibitions-section {
  margin-bottom: 80px;
}

.section-h2 {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 32px;
}

.exhibitions-table {
  border-top: 1px solid var(--accent-warm);
}

.exhibition-row {
  display: grid;
  /* year first, mirroring the CV layout on the About page */
  /* The 4th column MUST be a fixed width, not auto. Each row is its own
     grid, so with `auto` the CTA-less rows collapsed that column to zero
     and the fr columns absorbed the space -- which is why the venue
     column sat at a different x on rows without a Learn More button. */
  grid-template-columns: 150px minmax(0, 1.2fr) minmax(0, 1fr) 150px;
  gap: 32px;
  /* top-aligned so the year, title and venue share a baseline row even when
     a title wraps to two lines; centring made the columns look staggered */
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease;
}

.exhibition-row:hover {
  background: #FAFAFA;
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.exh-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}

.exh-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 4px;
}

.exh-venue {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
}

.exh-city {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Lead photo of the Exhibitions page: a room with visitors in it, landscape. */
.exhibition-featured-image.is-landscape {
  max-width: 880px;
  margin: 0 auto 64px;
}

.exhibition-featured-image.is-landscape img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.exhibition-featured-image.is-landscape .about-photo-caption {
  text-align: right;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
}

/* Years of each body of work, under its name (home cards, Work tabs, the
   Work menu). The current series runs to "Present", as a CV would write it. */
.series-years {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 6px;
}

.project-card .series-years { font-size: 12px; }
.series-nav-btn .series-years { margin-top: 4px; font-size: 10px; letter-spacing: 0.1em; }

/* The gallery that took Ana to a fair, credited under the venue. */
.exh-gallery {
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 2px;
}

.exh-date {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text);
}

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

/* ============================================================
   PROJECTS INDEX PAGE
   ============================================================ */
/* Reuses .projects-grid, .project-card, .card-image-wrap etc. from homepage */
/* Only override: 3-col desktop instead of 4 */
.projects-index-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ============================================================
   NEWS PAGE
   ============================================================ */
.news-feed {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px;
  align-items: start;
}

.post-block {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-date {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 16px;
}

.post-image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #F5F5F4;
  margin-bottom: 16px;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms ease-out;
}

.post-block:hover .post-image img {
  transform: scale(1.03);
}

.post-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tag-chip {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  border: 1px solid var(--rule);
  padding: 4px 10px;
}

.post-excerpt {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 14px;
}

.post-read-more {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.news-load-more {
  text-align: center;
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid var(--rule);
}

/* Individual post */
.post-hero {
  width: 100%;
  height: 60vh;
  overflow: hidden;
  background: #111;
}

.post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px var(--gutter);
}

.post-header {
  text-align: center;
  margin-bottom: 96px;
}

.post-header .post-tags {
  justify-content: center;
}

.post-header-date {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.post-header-title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 16px;
}

.post-header-dek {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 600px;
  margin: 0 auto;
}

.post-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}

.post-body h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  margin-top: 48px;
  margin-bottom: 16px;
}

.post-body h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  margin-top: 32px;
  margin-bottom: 12px;
}

.post-body blockquote {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.35;
  padding: 64px 0;
  border: none;
}

.post-body blockquote cite {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 16px;
  font-family: var(--font-ui);
}

.post-footer-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--accent-warm);
  max-width: 720px;
  margin: 0 auto;
}

.post-back {
  font-size: 14px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-share {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 16px;
}

.post-share a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   PRESS PAGE
   ============================================================ */
/* The page opens straight on the coverage (Cristina's note, Sept 2026): one
   article per row, the outlet's logo beside it, long write-ups folded behind
   "Read more" so the headlines lead. */
.press-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--rule);
}

.press-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  column-gap: 40px;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  text-decoration: none;
  position: relative;
}

.press-card > * { grid-column: 2; }

/* buttons and links keep their own width instead of stretching across the column */
.press-card > .press-cta,
.press-card > .press-secondary { justify-self: start; }

.press-body.is-folded {
  max-height: 5.2em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}

.press-more {
  justify-self: start;
  margin: 6px 0 14px;
  padding: 6px 0;
  background: none;
  border: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.press-outlet {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.press-headline {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 8px;
  max-width: 34em;
}

.press-body { max-width: 44em; }

.press-date {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

/* ============================================================
   ABOUT PAGE
   ============================================================ */
.about-header {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: 64px;
  align-items: start;
  padding: 96px var(--gutter) 0;
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin: 0 auto;
}

.about-header-left {
  padding-top: 8px;
}

.about-title {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.05;
  color: var(--text);
  letter-spacing: -0.01em;
}

.about-tagline {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 24px;
}

.about-photo-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #F5F5F4;
}

.about-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-photo-caption {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 12px;
}

/* Curator credit, closing the biography column. The rule sits BELOW the name on
   purpose: with it above, the credit read as the opening of the CV section
   rather than as the sign-off of the biography it belongs to. */
.about-credit {
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.about-content {
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 96px var(--gutter) 120px;
}

.about-section {
  max-width: 720px;
  margin-bottom: 96px;
}

.about-h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 32px;
}

.about-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}

.about-body p + p {
  margin-top: 24px;
}

/* CV Accordion */
.cv-section {
  max-width: var(--max-width);
  margin-bottom: 96px;
}

.accordion-item {
  border-top: 1px solid var(--rule);
}

.accordion-item:last-child {
  border-bottom: 1px solid var(--rule);
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 64px;
  padding: 0;
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  text-align: left;
}

.accordion-label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
}

.accordion-icon {
  font-size: 20px;
  color: var(--text);
  transition: transform 250ms ease;
  flex-shrink: 0;
  line-height: 1;
}

.accordion-item.open .accordion-icon {
  transform: rotate(45deg);
}

.accordion-body {
  display: none;
  padding: 24px 0 32px;
}

.accordion-item.open .accordion-body {
  display: block;
}

.cv-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cv-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 16px;
  align-items: start;
}

.cv-year {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-align: right;
  padding-top: 2px;
}

.cv-detail {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
}

/* Sub-group label inside a section, as the CV's "Selected Art Studies". */
.cv-row.cv-subhead .cv-detail {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cv-row.cv-subhead:not(:first-child) {
  margin-top: 12px;
}

/* Download button, then "Full CV available upon request", which opens a short
   form. Native <details>, so it opens and closes with no script. */
.cv-download {
  text-align: center;
  margin-bottom: 96px;
}

.cv-download-note {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 16px;
}

.cv-request {
  margin-top: 28px;
}

.cv-request summary {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  padding: 12px 0 4px;          /* 44px-ish tap target on phones */
  border-bottom: 1px solid var(--ink);
  transition: color 150ms ease, border-color 150ms ease;
}

.cv-request summary::-webkit-details-marker {
  display: none;
}

.cv-request summary:hover,
.cv-request[open] summary {
  color: var(--text-muted);
  border-color: var(--accent-warm);
}

.cv-request summary:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 4px;
}

.cv-request-panel {
  max-width: 460px;
  margin: 22px auto 0;
  padding: 28px 32px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-align: left;
}

.cv-request-intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 24px;
}

.cv-request-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cv-request-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  background: var(--ink);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: opacity 150ms ease;
}

.cv-request-btn:hover { opacity: 0.85; }
.cv-request-btn:disabled { opacity: 0.5; cursor: progress; }

.cv-request-btn:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 3px;
}

/* honeypot: out of sight and out of the tab order */
.cv-request-bot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.cv-request-status {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
}

.cv-request-status:empty { display: none; }
.cv-request-status[data-kind="ok"] { color: var(--text); }
.cv-request-status[data-kind="error"] { color: #9B2C2C; }

.cv-request-alt {
  font-size: 12px;
  color: var(--text-muted);
  margin: 18px 0 0;
}

.cv-request-alt a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .cv-request-panel {
    padding: 22px 20px;
  }
}

.about-signoff {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 96px;
  padding: 0 var(--gutter);
}

.about-signoff p {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.5;
}

.about-signoff a {
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 24px;
}

/* ============================================================
   CONTACT PAGE
   ============================================================ */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: calc(100vh - 80px);
}

.contact-split-left {
  position: relative;
  background: #111;
}

.contact-split-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-split-right {
  display: flex;
  align-items: center;
  padding: 120px 10%;
}

.contact-split-content {
  max-width: 600px;
  width: 100%;
}

.contact-personal {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 48px;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact-email-link {
  font-size: 16px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness 150ms ease;
}

.contact-email-link:hover {
  text-decoration-thickness: 2px;
}

.contact-detail-sm {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

.contact-social-links {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.contact-social-links a {
  font-size: 14px;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Contact form column */
.form-header {
  margin-bottom: 48px;
}

.form-eyebrow {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 12px;
}

.form-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-muted);
}

.form-input,
.form-select,
.form-textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 12px 0;
  width: 100%;
  outline: none;
  transition: border-color 200ms ease, border-width 200ms ease;
  border-radius: 0;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-bottom: 2px solid var(--ink);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.form-select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.form-select-wrap {
  position: relative;
}

.form-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 0;
  bottom: 12px;
  font-size: 14px;
  color: var(--text-muted);
  pointer-events: none;
}

.form-submit {
  align-self: flex-start;
  margin-top: 24px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 14px 32px;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: opacity 200ms ease;
}

.form-submit:hover {
  opacity: 0.85;
}

.form-micro {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
}

.form-success {
  display: none;
  text-align: left;
}

.form-success h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 16px;
}

.form-success p {
  font-size: 16px;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 24px;
}

.form-reset {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* ============================================================
   INNER PAGE RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .work-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .page-title { font-size: 40px; }
  .page-lead { font-size: 18px; }
  .about-title { font-size: 38px; }

  /* Exhibitions: collapse to stacked */
  .exhibition-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .exh-cta { text-align: left; }
  .exhibition-row:hover {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* About two-col header → single col */
  .about-header {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* Phone order: Ana's photo, then the text, then the video */
  .about-header-right { display: contents; }
  .about-media-photo { order: -1; }
  .about-media-video { order: 1; }
  .about-media-photo .about-photo-caption { margin-bottom: 0 !important; }

  /* Contact split to vertical stack */
  .contact-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .contact-split-left {
    height: 55vh;
  }
  .contact-split-image {
    position: relative;
    height: 100%;
  }
  .contact-split-right {
    padding: 64px var(--gutter);
  }
  .about-photo-wrap { max-width: 100%; }


  /* Work/Archive grid */
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* Projects index */
  .projects-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

  /* Press grid */
  .press-card { grid-template-columns: 68px minmax(0, 1fr); column-gap: 18px; padding: 22px 0; }
  .press-card > .press-logo { width: 64px; height: 30px; }
  .press-headline { font-size: 21px; }

  /* News feed */
  .news-feed { grid-template-columns: 1fr; gap: 48px; }

  /* Post article */
  .post-header-title { font-size: 32px; }
  .post-hero { height: 40vh; }
}

@media (max-width: 640px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .projects-index-grid { grid-template-columns: minmax(0, 1fr); }
  .accordion-trigger { height: 56px; }
  /* 60px forced ranges like "2008 - Pres." onto two lines, which read
     as a zigzag down the column. Wide enough for the longest range,
     and nowrap so every entry stays on one line. */
  .cv-row { grid-template-columns: 76px 1fr; gap: 12px; }
  .cv-year { white-space: nowrap; font-size: 12px; }
  .form-submit { align-self: stretch; text-align: center; }
}

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

/* ============================================================
   ARTWORK DETAIL MODAL
   ============================================================ */
.artwork-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 11, 11, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms cubic-bezier(0.16,1,0.3,1);
}

.artwork-modal-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.artwork-modal {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 1100px;
  width: calc(100% - 48px);
  max-height: 90vh;
  background: #FFFFFF;
  overflow: hidden;
  transform: translateY(24px) scale(0.98);
  transition: transform 350ms cubic-bezier(0.16,1,0.3,1);
}

.artwork-modal-overlay.is-open .artwork-modal {
  transform: translateY(0) scale(1);
}

/* Close button */
.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 150ms ease;
}
.modal-close:hover { background: #fff; }
.modal-close svg { width: 16px; height: 16px; }

/* Left: image panel */
.modal-image-panel {
  position: relative;
  background: #0B0B0B;
  overflow: hidden;
  cursor: crosshair;
  min-height: 480px;
}

.modal-image-panel > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 300ms ease;
  user-select: none;
  pointer-events: none;
}

/* View toggle tabs inside modal */
.modal-view-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
}

.modal-tab {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 10px 20px 10px 0;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 150ms, border-color 150ms;
  margin-bottom: -1px;
}

.modal-tab.active {
  color: var(--text);
  border-bottom-color: var(--accent-warm);
}

/* Right: info panel */
.modal-info-panel {
  padding: 48px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-series {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent-warm);
  margin-bottom: 12px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 6px;
}

.modal-year {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 28px;
}

.modal-divider {
  width: 32px;
  height: 1px;
  background: var(--accent-warm);
  margin-bottom: 24px;
}

.modal-medium,
.modal-dimensions {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 8px;
}

.modal-dimensions span {
  font-style: italic;
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--text);
}

.modal-inquiry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 32px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text);
  border-bottom: 1px solid var(--text);
  padding-bottom: 2px;
  text-decoration: none;
  transition: color 150ms, border-color 150ms;
  width: fit-content;
}
.modal-inquiry:hover {
  color: var(--accent-warm);
  border-color: var(--accent-warm);
}

/* ============================================================
   MAGNIFIER LENS
   ============================================================ */
.magnifier-lens {
  position: absolute;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border: 2px solid rgba(200, 168, 130, 0.7);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.15);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 20;
  background-size: 300% 300%;
  background-repeat: no-repeat;
}

.magnifier-lens.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ============================================================
   VIEW ON WALL SIMULATOR
   ============================================================ */
.wall-panel {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding: 0;
  background: #F5F0EA;
  position: relative;
  overflow: hidden;
}

.wall-panel.is-active {
  display: flex;
}

.modal-image-panel.wall-mode > img {
  display: none;
}

/* Wall scene */
.wall-scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-left: 28%;
  padding-bottom: 0;
  overflow: hidden;
}

/* The wall surface (floor-to-top gradient) */
.wall-scene::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #EDE6DA 0%, #F5F0EA 60%, #DDD6C9 100%);
  z-index: 0;
}

/* Floor line */
.wall-scene::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #C0B8AE, #A8A098, #C0B8AE);
  z-index: 1;
}

.wall-artwork {
  position: absolute;
  z-index: 3;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22), 0 2px 8px rgba(0,0,0,0.12);
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wall-artwork img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Human silhouette */
.wall-silhouette {
  position: absolute;
  bottom: 0;
  z-index: 2;
  left: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wall-silhouette svg {
  display: block;
}

.wall-scale-badge {
  position: absolute;
  bottom: 8px;
  right: 12px;
  z-index: 10;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  background: rgba(255,255,255,0.85);
  padding: 4px 10px;
  border-radius: 20px;
  text-transform: uppercase;
}

/* Wall panel right side */
.wall-info {
  padding: 48px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   MODAL RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .artwork-modal {
    grid-template-columns: 1fr;
    max-height: 95vh;
    overflow-y: auto;
  }
  .modal-image-panel {
    min-height: 300px;
    max-height: 45vh;
  }
  .modal-info-panel,
  .wall-info {
    padding: 32px 24px;
  }
  .wall-scene {
    min-height: 260px;
    padding-left: 22%;
  }
}

/* ============================================================
   PHASE 2 DESIGN UPGRADES
   ============================================================ */

/* 1. FIXED NAVIGATION & HEADER SPACING */
.site-nav {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

body:not(.home-page) .page-header,
body:not(.home-page) .about-header {
  padding-top: 140px !important;
}

/* Homepage-specific header overlay */
.home-page .site-nav {
  background: transparent;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.home-page .site-nav:not(.scrolled) .nav-links a {
  color: #FFFFFF;
}

.home-page .site-nav:not(.scrolled) .nav-links a::after {
  background: #FFFFFF;
}

.home-page .site-nav:not(.scrolled) .nav-logo-text {
  color: #FFFFFF;
}

.home-page .site-nav:not(.scrolled) .lang-toggle {
  color: #FFFFFF;
}

.home-page .site-nav:not(.scrolled) .nav-social svg {
  color: #FFFFFF;
}

.home-page .site-nav:not(.scrolled) .site-logo {
  filter: brightness(0) invert(1);
}

.home-page .site-nav:not(.scrolled) .nav-hamburger svg {
  color: #FFFFFF;
}

/* Homepage scrolled header state */
.home-page .site-nav.scrolled {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.70) 100%
  ) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.home-page .site-nav.scrolled .nav-links a {
  color: var(--text);
}

.home-page .site-nav.scrolled .nav-links a::after {
  background: var(--ink);
}

.home-page .site-nav.scrolled .nav-logo-text {
  color: var(--ink);
}

.home-page .site-nav.scrolled .lang-toggle {
  color: var(--text);
}

.home-page .site-nav.scrolled .nav-social svg {
  color: var(--text);
}

.home-page .site-nav.scrolled .site-logo {
  filter: none;
}

.home-page .site-nav.scrolled .nav-hamburger svg {
  color: var(--ink);
}

/* 2. RICH DROPDOWN SUBMENU FOR "WORK" */
.nav-item-has-dropdown {
  position: relative;
}

.work-dropdown-menu {
  position: absolute;
  top: 100%;
  left: -40px;
  width: 420px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 300ms ease, transform 300ms ease, visibility 300ms;
  z-index: 1100;
  backdrop-filter: blur(20px);
}

.nav-item-has-dropdown:hover .work-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.work-dropdown-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.work-dropdown-item {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  padding: 10px;
  border-radius: 6px;
  transition: background 200ms ease;
  color: inherit;
  text-align: left;
}

.work-dropdown-item:hover {
  background: rgba(200, 168, 130, 0.08); /* light warm gold highlight */
}

.work-dropdown-thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

.work-dropdown-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.work-dropdown-title {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
}

.work-dropdown-desc {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 400;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile Work Dropdown Accordion styling */
/* Every other nav item is a fixed 56px flex ROW. Left as one, the submenu
   became a column beside "Work", overflowed the 56px box, and spilled down
   over the items below it -- which, being later in the DOM, painted on top
   and swallowed the taps: Jaguar opened Exhibitions, AMA-ZONE opened Press.
   This item has to be a column that grows with its submenu. */
.mobile-nav-links li.mobile-nav-item-has-dropdown {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: auto;
  min-height: 56px;
  padding: 8px 0;
}

.mobile-work-submenu {
  display: none;
  list-style: none;
  width: 100%;
  padding-left: 20px;
  margin-top: 8px;
  flex-direction: column;
  gap: 2px;
}

.mobile-nav-item-has-dropdown.active .mobile-work-submenu {
  display: flex;
}

.mobile-work-submenu li {
  height: auto;
  min-height: 0;
  display: block;
  opacity: 1;
  transform: none;
}

.mobile-work-submenu a {
  font-size: 16px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 400;
  /* 44px minimum tap target */
  display: flex;
  align-items: center;
  min-height: 44px;
  transition: color 200ms ease;
}

.mobile-work-submenu a:hover {
  color: var(--accent-warm);
}

/* 3. HERO FULL-SCREEN UPGRADE */
.home-page .hero {
  height: 100vh !important;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background: rgba(0, 0, 0, 0.22); /* Subtle dim to highlight text */
  text-align: center;
  padding: 0 var(--gutter);
}

.hero-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 650px;
  color: #FFFFFF;
}

.hero-logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.hero-logo-symbol {
  height: 64px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.hero-title {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 300;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.15;
}

.hero-subtitle {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.hero-cta {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 14px 36px;
  margin-top: 20px;
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-cta:hover {
  background: #FFFFFF;
  color: var(--ink);
  border-color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
}

/* 4. INTERACTIVE WORK VIEWER LAYOUT */
.work-viewer-layout {
  max-width: calc(var(--max-width) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}

.viewer-series-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 20px;
  /* the page lead sat right on top of these tabs */
  margin-top: 56px;
  margin-bottom: 48px;
}

.series-nav-btn {
  background: none;
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 0;
  position: relative;
  transition: color 250ms ease;
}

.series-nav-btn::after {
  content: '';
  position: absolute;
  bottom: -21px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-warm);
  transform: scaleX(0);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.series-nav-btn.active {
  color: var(--ink);
  font-weight: 600;
}

.series-nav-btn.active::after {
  transform: scaleX(1);
}

/* The thumbnails run in a row under the artwork (Ana chose it over a column
   beside it, Sept 2026). The image box has a fixed height, so the row costs the
   artwork nothing, and wide works gain the column's width -- up to ~19% larger. */
/* A few lines on the body of work, between its tabs and its works */
.series-description {
  max-width: 44em;
  margin: 0 auto 48px;
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.55;
  color: var(--text);
  text-align: center;
  text-wrap: pretty;
}

.series-description:empty { display: none; }

@media (max-width: 768px) {
  .series-description { font-size: 18px; margin-bottom: 32px; text-align: left; }
}

.viewer-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  min-height: 520px;
}

/* Thumbnail strip */
.viewer-thumbs-col {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
}

/* Scrollbar styling for thumbs strip */
.viewer-thumbs-col::-webkit-scrollbar {
  height: 4px;
}
.viewer-thumbs-col::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 2px;
}

.viewer-thumb-item {
  background: none;
  border: 1px solid transparent;
  padding: 0;
  cursor: pointer;
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  opacity: 0.65;
  transition: all 250ms ease;
}

.viewer-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.viewer-thumb-item:hover,
.viewer-thumb-item.active {
  opacity: 1;
  border-color: var(--accent-warm);
}

/* Placement by named areas, tablet and up only: phones order the same pieces
   with display: contents and `order`, which named areas would override. */
@media (min-width: 769px) {
  .viewer-main-grid {
    grid-template-areas:
      "preview meta"
      "thumbs  meta";
    row-gap: 16px;
  }
  .viewer-preview-col { grid-area: preview; }
  .viewer-meta-col    { grid-area: meta; }
  .viewer-thumbs-col  { grid-area: thumbs; }
}

/* Center Column: Preview & Navigation */
.viewer-preview-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.preview-navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  order: 2;
}

.nav-arrow {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  transition: background 200ms ease, color 200ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-arrow:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink);
}

.nav-arrow svg {
  width: 18px;
  height: 18px;
}

.preview-counter {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.viewer-image-container {
  position: relative;
  background: #F8F8F8;
  height: 550px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
  order: 1;
}

.viewer-image-container img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
  display: block;
  user-select: none;
  pointer-events: none;
}

/* Magnifier lens for viewer */
.viewer-magnifier-lens {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1px solid var(--accent-warm);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 10;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), inset 0 0 12px rgba(0,0,0,0.08);
}

.viewer-magnifier-lens.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Right Column: Alt Views & Details */
.viewer-meta-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.viewer-alt-views {
  display: flex;
  gap: 12px;
}

.alt-view-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
  border-radius: 6px;
  cursor: pointer;
  transition: all 250ms ease;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.alt-view-btn img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 2px;
}

.alt-view-wall-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.alt-view-wall-icon svg {
  width: 20px;
  height: 20px;
}

.alt-view-btn:hover {
  border-color: var(--accent-warm);
  color: var(--ink);
}

.alt-view-btn.active {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}

.alt-view-btn.active .alt-view-wall-icon {
  color: var(--ink);
}

.viewer-details {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.viewer-series-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 12px;
}

.viewer-artwork-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px 0;
}

.viewer-artwork-year {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

.viewer-divider {
  height: 1px;
  background: var(--rule);
  margin-bottom: 20px;
}

.viewer-artwork-medium {
  font-family: var(--font-ui);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 8px;
}

.viewer-artwork-dimensions {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.viewer-inquiry-btn {
  display: block;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--ink);
  text-decoration: none;
  padding: 14px;
  border-radius: 6px;
  transition: all 250ms ease;
  border: 1px solid var(--ink);
}

.viewer-inquiry-btn:hover {
  background: transparent;
  color: var(--ink);
}

/* Responsive viewer adjustments */
@media (max-width: 1024px) {
  .viewer-main-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* Tablets: one column -- artwork, thumbnails, then the details. */
@media (min-width: 769px) and (max-width: 1024px) {
  .viewer-main-grid {
    grid-template-areas:
      "preview"
      "thumbs"
      "meta";
    row-gap: 20px;
  }
}

@media (max-width: 768px) {
  .viewer-main-grid {
    grid-template-columns: 1fr;
  }
  .viewer-thumbs-col {
    flex-direction: row;
    grid-row: 2;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: auto;
    width: 100%;
    padding-bottom: 8px;
  }
  .viewer-thumb-item {
    width: 60px;
    height: 60px;
  }
  .viewer-meta-col {
    grid-column: span 1;
  }
  .viewer-image-container {
    height: 380px;
  }
  .work-viewer-layout {
    padding-bottom: 64px;
  }
  .viewer-series-nav {
    flex-wrap: wrap;
    gap: 22px 28px;
    padding-bottom: 28px;
  }
  /* the tabs wrap onto two rows here: keep each underline tight under its own
     tab, or the first row's line lands on top of the second row */
  .series-nav-btn::after { bottom: 0; }
  .series-nav-btn { padding-bottom: 12px; }

  /* Homepage Hero overlay scaling for mobile */
  .hero-title {
    font-size: 30px !important;
    letter-spacing: 0.12em !important;
  }
  .hero-subtitle {
    font-size: 11px !important;
    letter-spacing: 0.2em !important;
  }
  .hero-logo-symbol {
    height: 48px !important;
  }
  .hero-overlay-content {
    gap: 16px !important;
  }
  .hero-cta {
    padding: 12px 28px !important;
    margin-top: 10px !important;
  }
}

/* Touch devices magnifier support */
@media (hover: none) {
  .viewer-magnifier-lens {
    display: none !important;
  }
  .viewer-image-container {
    cursor: default !important;
  }
}

/* ============================================================
   PRIVACY & TERMS PAGES
   ============================================================ */
.privacy-container,
.terms-container {
  max-width: 800px;
  margin: 64px auto 96px;
  padding: 0 var(--gutter);
}

.privacy-container h2,
.terms-container h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--ink);
}

.privacy-container p,
.terms-container p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}

.privacy-container a,
.terms-container a {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--ink);
  transition: color 150ms ease;
}

.privacy-container a:hover,
.terms-container a:hover {
  color: var(--text-muted);
}

.privacy-container ul,
.terms-container ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 24px;
}

.privacy-container li,
.terms-container li {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 8px;
}

/* Language Switcher Styling */
html[lang="en"] .lang-es {
  display: none !important;
}
html[lang="es"] .lang-en {
  display: none !important;
}
.lang-btn {
  cursor: pointer;
  transition: opacity 150ms ease;
}
.lang-btn.active {
  opacity: 1;
  font-weight: 600;
}
.lang-btn.inactive {
  opacity: 0.4;
}
.lang-btn.inactive:hover {
  opacity: 0.7;
}

/* Fullscreen Button */
.fullscreen-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.6;
  transition: opacity 150ms ease, color 150ms ease;
  margin-left: 8px;
}
.fullscreen-btn:hover {
  opacity: 1;
}
.fullscreen-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}
@media (max-width: 768px) {
  .fullscreen-btn {
    display: none !important;
  }
}

/* Viewer and Modal Fullscreen Toggle Buttons */
.viewer-fullscreen-btn,
.modal-fullscreen-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 4px;
  color: #111;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 250ms ease, background 150ms ease;
  z-index: 60;
}
.viewer-image-container:hover .viewer-fullscreen-btn,
.modal-image-panel:hover .modal-fullscreen-btn {
  opacity: 1;
}
.viewer-fullscreen-btn:hover,
.modal-fullscreen-btn:hover {
  background: #FFFFFF;
}
.viewer-fullscreen-btn svg,
.modal-fullscreen-btn svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Exit and close buttons in fullscreen mode */
.viewer-fullscreen-exit,
.viewer-fullscreen-close,
.modal-fullscreen-exit,
.modal-fullscreen-close {
  display: none;
  position: absolute;
  top: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 4px;
  color: #111;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: background 150ms ease;
}
.viewer-fullscreen-exit:hover,
.viewer-fullscreen-close:hover,
.modal-fullscreen-exit:hover,
.modal-fullscreen-close:hover {
  background: #ffffff;
}
.viewer-fullscreen-exit svg,
.viewer-fullscreen-close svg,
.modal-fullscreen-exit svg,
.modal-fullscreen-close svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: #111;
}
.viewer-fullscreen-exit,
.modal-fullscreen-exit {
  left: 20px;
}
.viewer-fullscreen-close,
.modal-fullscreen-close {
  right: 20px;
}

/* Overlay arrows for next/prev inside the viewer-image-container */
.viewer-overlay-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 80px;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 250ms ease, background 200ms ease;
  z-index: 50;
}
.viewer-overlay-arrow svg {
  width: 24px;
  height: 24px;
  stroke: #fff;
}
.viewer-overlay-arrow:hover {
  background: rgba(0, 0, 0, 0.4);
}
.viewer-image-container:hover .viewer-overlay-arrow {
  opacity: 1;
}
.viewer-overlay-arrow.prev {
  left: 20px;
}
.viewer-overlay-arrow.next {
  right: 20px;
}

/* Fullscreen pseudo-class styles */
.viewer-image-container:fullscreen,
.viewer-image-container:-webkit-full-screen,
.viewer-image-container.is-pseudo-fullscreen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: #1a1a1a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}
.viewer-image-container:fullscreen img,
.viewer-image-container:-webkit-full-screen img,
.viewer-image-container.is-pseudo-fullscreen img {
  max-width: 90vw !important;
  max-height: 90vh !important;
}
.viewer-image-container:fullscreen .viewer-fullscreen-exit,
.viewer-image-container:fullscreen .viewer-fullscreen-close,
.viewer-image-container:-webkit-full-screen .viewer-fullscreen-exit,
.viewer-image-container:-webkit-full-screen .viewer-fullscreen-close,
.viewer-image-container.is-pseudo-fullscreen .viewer-fullscreen-exit,
.viewer-image-container.is-pseudo-fullscreen .viewer-fullscreen-close {
  display: flex !important;
}
.viewer-image-container:fullscreen .viewer-overlay-arrow,
.viewer-image-container:-webkit-full-screen .viewer-overlay-arrow,
.viewer-image-container.is-pseudo-fullscreen .viewer-overlay-arrow {
  opacity: 1 !important;
  width: 56px !important;
  height: 120px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 6px !important;
}
.viewer-image-container:fullscreen .viewer-overlay-arrow:hover,
.viewer-image-container:-webkit-full-screen .viewer-overlay-arrow:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.modal-image-panel:fullscreen,
.modal-image-panel:-webkit-full-screen {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  background: #1a1a1a !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
}
.modal-image-panel:fullscreen img,
.modal-image-panel:-webkit-full-screen img {
  max-width: 90vw !important;
  max-height: 90vh !important;
}
.modal-image-panel:fullscreen .modal-fullscreen-exit,
.modal-image-panel:fullscreen .modal-fullscreen-close,
.modal-image-panel:-webkit-full-screen .modal-fullscreen-exit,
.modal-image-panel:-webkit-full-screen .modal-fullscreen-close {
  display: flex !important;
}



/* ============================================================
   COMPUTED WALL VIEWS
   A photographed gallery wall (images/site/wall-bg-v4.jpg, wall/floor
   junction at 87.9% of its height) with the artwork composited on top
   at true scale. Sizes come from each work's catalogued dimensions
   measured against a 5'10" figure, so nothing is stretched.
   ============================================================ */
.wall-view {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  /* Anchored bottom: when the container is wider than the image's 3:2 the
     crop is taken off the top, keeping the floor line where the figure
     expects it rather than sliding it down under his feet. */
  background: #E7E7E7 url("images/site/wall-bg-v4.jpg") center bottom / cover no-repeat;
}

.wall-view.is-active { display: block; }

/* Sized and positioned inline from the artwork's real dimensions.
   object-fit stays `contain` so a photo that is not a tight crop
   letterboxes inside the true footprint rather than distorting. */
.wall-view .wall-art {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  object-fit: contain;
  width: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.13), 0 14px 30px rgba(0, 0, 0, 0.11);
}

.wall-view .wall-person {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: auto;
  max-width: none;
  max-height: none;
  pointer-events: none;
}

/* Miniature of the same scene inside an alt-view button */
.wall-view.is-thumb {
  position: relative;
  inset: auto;
  display: block;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 2px;
}

.alt-view-btn .wall-view.is-thumb .wall-art { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }

/* The magnifier is meaningless over a composed scene */
.viewer-image-container.is-wall { cursor: default; }
.viewer-image-container.is-wall > #viewer-main-img { visibility: hidden; }

/* Fallback for browsers with no Element.requestFullscreen (iPhone Safari,
   which only fullscreens <video>). Visually identical to the real thing. */
.viewer-image-container.is-pseudo-fullscreen {
  position: fixed !important;
  inset: 0;
  z-index: 9999;
  /* dvh, so the iOS address bar doesn't crop the bottom of the artwork */
  height: 100dvh !important;
  border-radius: 0 !important;
}

.viewer-image-container.is-pseudo-fullscreen img {
  max-width: 100%;
  max-height: 100%;
}

/* ============================================================
   PRESS PAGE
   ============================================================ */
/* The outlet's logo, in the left column beside its article */
.press-card > .press-logo {
  grid-column: 1;
  grid-row: 1 / span 12;
  display: block;
  width: 132px;
  height: 52px;
  object-fit: contain;
  object-position: left top;
  margin-top: 4px;
}

.press-kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 10px;
}

.press-body p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 12px;
  text-wrap: pretty;
}

.press-cta {
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
  background: none;
}

.press-secondary {
  display: block;
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  width: fit-content;
}
.press-secondary:hover { color: var(--text); border-color: currentColor; }

/* Media player overlay */
.press-player {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(11, 11, 11, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.press-player[hidden] { display: none !important; }

.press-player-stage {
  width: min(1100px, 100%);
  max-height: 84vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.press-player-stage video {
  width: 100%;
  max-height: 84vh;
  border-radius: 4px;
  background: #000;
}

.press-player-stage audio { width: min(640px, 100%); }

.press-player-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.press-player-close svg { width: 20px; height: 20px; }
.press-player-close:hover { border-color: #FFFFFF; }

@media (max-width: 640px) {
  .press-player { padding: 12px; }
  .press-player-close { top: 12px; right: 12px; }
}

/* ============================================================
   EXHIBITION DETAIL PANELS
   ============================================================ */
.exhibition-item { border-bottom: 1px solid var(--rule); }
.exhibition-item .exhibition-row { border-bottom: none; }

.exhibition-row.is-static { cursor: default; }
.exhibition-row.is-static:hover { background: none; margin-left: 0; }

.exh-detail {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 32px;
  padding: 8px 0 40px;
  align-items: start;
}
.exh-detail[hidden] { display: none; }

.exh-detail-img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.exh-detail-text p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 14px;
  text-wrap: pretty;
}
.exh-detail-text p:last-child { margin-bottom: 0; }

/* Place and dates, above the write-up. */
.exh-detail-text .exh-detail-dateline {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* keyboard focus ring for the row, which is a div acting as a button */
.exhibition-row[role="button"]:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: -2px;
}

@media (max-width: 860px) {
  .exh-detail { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .exh-detail-img { max-width: 420px; }
}

/* Touch targets: btn-ghost is ~33px tall from its padding, under the 44px
   minimum. Only raise it on touch devices so the desktop look is unchanged. */
@media (hover: none) {
  .exh-cta .btn-ghost,
  .press-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .press-secondary { min-height: 44px; display: inline-flex; align-items: center; }
  /* work viewer: series tabs measured 31px and the prev/next arrows 30px */
  .series-nav-btn { min-height: 44px; }
  .press-more { min-height: 44px; }
  .nav-arrow { min-width: 44px; min-height: 44px; }
}

/* The detail image and press media must never widen the page */
.exh-detail-img,
.press-player-stage video { max-width: 100%; }

/* Mobile reading order in the work viewer: the artwork, then what it is,
   then the ways to look at it. The alt-view buttons precede the details in
   the DOM for the desktop side column, which stacked them above the title. */
@media (max-width: 768px) {
  .viewer-meta-col { display: contents; }
  .viewer-preview-col { order: 1; }
  .viewer-alt-views { order: 2; margin-top: 4px; }   /* the open work's other views, right under it */
  .viewer-details { order: 3; margin-top: 8px; }
  .viewer-thumbs-col { order: 4; grid-row: auto; margin-top: 8px; }
  .page-lead { margin-bottom: 8px; }
}

/* Works on paper hang framed. The mat and moulding are drawn as a border on
   the image, so the photograph keeps its own proportions rather than being
   letterboxed inside a fixed box. Widths are in cqh (a share of the scene's
   height), which is the same unit the hanging maths uses, so the frame
   scales with the wall. The px values are the fallback where cqh is
   unsupported. */
.wall-view { container-type: size; }

.wall-view .wall-art.is-framed {
  /* content-box so the height stays the ARTWORK's true size and the frame is
     added outside it, rather than the border eating into the piece */
  box-sizing: content-box;
  /* The earlier, quieter frame -- a mount, a white frame face, a hairline and
     the shadow on the wall -- with the mount in a warm cream so a pale sheet
     still stands apart from it. (A version with drawn bevels and inner shadows
     looked artificial and was dropped.) cqh = 1% of the scene height, the unit
     the hanging maths uses, so it scales with the wall. */
  border: 7px solid #EFEBE4;
  border-width: 2.08cqh;
  box-shadow:
    0 0 0 3px #FFFFFF,
    0 0 0 0.83cqh #FFFFFF,
    0 0 0 calc(0.83cqh + 1px) rgba(0, 0, 0, 0.13),
    0 1cqh 2.2cqh rgba(0, 0, 0, 0.20);
}

/* An exhibition panel that has a photograph but no text yet */
.exh-detail.is-image-only { grid-template-columns: minmax(0, 1fr); }
.exh-detail.is-image-only .exh-detail-img { max-width: 520px; }

/* Press headlines run in English on the English site with the outlet's own
   Spanish headline kept underneath, so the original is still credited. */
.press-original {
  font-family: var(--font-ui);
  font-size: 12px;
  font-style: italic;
  line-height: 1.45;
  color: var(--text-muted);
  margin-top: 6px;
}