/* ========================================
   VULCA ART-CENTRIC IMMERSIVE REDESIGN
   styles/main.css - v3.0.0
   ======================================== */

/* ==================== COMPONENT IMPORTS ==================== */

@import url('/styles/components/unified-navigation.css');

/* ==================== CSS CUSTOM PROPERTIES ==================== */

:root {
  /* --- Color Palette --- */
  --color-bg: #F9F8F6;
  --color-text: #2D2D2D;
  --color-text-light: #666666;
  --color-border: #E0E0E0;
  --color-shadow: rgba(0, 0, 0, 0.1);

  /* --- Persona Colors --- */
  --color-persona-suShi: #B85C3C;      /* Warm terracotta */
  --color-persona-guoXi: #2D5F4F;      /* Deep forest green */
  --color-persona-ruskin: #6B4C8A;     /* Rich plum */
  --color-persona-zola: #D4A574;       /* Vibrant gold */
  --color-persona-petrova: #4A5568;    /* Cool steel */
  --color-persona-aiReviewer: #808080; /* Neutral silver */

  /* --- Typography --- */
  --font-serif: 'Crimson Text', serif;
  --font-sans: 'Inter', sans-serif;

  --size-title-hero: clamp(32px, 8vw, 72px);
  --size-title-artwork: clamp(18px, 4vw, 32px);
  --size-title-section: clamp(20px, 3vw, 36px);
  --size-body: clamp(12px, 1.6vw, 16px);
  --size-small: clamp(10px, 1.2vw, 13px);

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing --- */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 60px;

  /* --- Layout --- */
  --max-width-container: 1440px;
  --viewport-mobile: 375px;
  --viewport-tablet: 768px;
  --viewport-desktop: 1024px;
  --viewport-large: 1440px;

  /* --- Z-Index --- */
  --z-sticky: 100;
  --z-menu: 200;
  --z-overlay: 300;

  /* --- Shadows --- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.15);

  /* --- Transitions --- */
  --transition-fast: 150ms ease-out;
  --transition-base: 300ms ease-out;
  --transition-slow: 500ms ease-out;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
  }
}

/* --- Dark Mode Support --- */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #e0e0e0;
    --color-text-light: #a0a0a0;
    --color-border: #333333;
  }
}

/* --- High Contrast Mode --- */
@media (prefers-contrast: more) {
  :root {
    --color-text: #000000;
    --color-bg: #FFFFFF;
    --color-border: #000000;
  }
}

/* ==================== RESET & BASE STYLES ==================== */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  font-family: var(--font-sans);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  font-weight: var(--weight-regular);
  overflow-x: hidden;
}

/* Remove default link styling */
a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

a:hover {
  opacity: 0.7;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--size-title-hero);
}

h2 {
  font-size: var(--size-title-section);
}

h3 {
  font-size: var(--size-title-artwork);
}

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

ul, ol {
  margin-left: var(--spacing-lg);
}

/* ==================== SKIP LINK ==================== */

.skip-to-main {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.skip-to-main:focus {
  top: 0;
  left: 0;
  background: var(--color-persona-suShi);
  color: white;
  padding: var(--spacing-md);
  z-index: var(--z-overlay);
}

/* ==================== HEADER (MINIMAL) ==================== */

.header-minimal {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: rgba(249, 248, 246, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-md) var(--spacing-lg);
}

@media (prefers-color-scheme: dark) {
  .header-minimal {
    background-color: rgba(26, 26, 26, 0.95);
  }
}

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

/* Hamburger Menu */
.hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  width: 28px;
  height: 28px;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 1px;
  transition: all var(--transition-base);
}

.hamburger:hover span {
  opacity: 0.7;
}

/* Language Toggle */
.lang-toggle {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--spacing-xs) var(--spacing-sm);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--size-small);
  color: var(--color-text);
  transition: all var(--transition-base);
}

.lang-toggle:hover {
  background-color: var(--color-border);
}

/* Scroll Indicator */
.scroll-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-border);
  overflow: hidden;
}

.scroll-progress {
  height: 100%;
  background-color: var(--color-persona-suShi);
  width: 0%;
  transition: width var(--transition-fast);
}

/* ==================== FLOATING MENU ==================== */

.floating-menu {
  /* Positioning - full height sidebar */
  position: fixed;
  top: 0;
  left: 0;
  width: min(300px, 90vw);
  height: 100vh;

  /* Layering */
  z-index: var(--z-menu);

  /* Appearance */
  background: white;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);

  /* Animation - slide from left */
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Layout */
  overflow-y: auto;
  padding: var(--spacing-lg) 0;

  /* Hide initially */
  opacity: 0;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  .floating-menu {
    background: #2a2a2a;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.3);
  }
}

.floating-menu:not([hidden]) {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* Menu Overlay */
.menu-overlay {
  /* Positioning - full viewport coverage */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* Layering - below sidebar */
  z-index: calc(var(--z-menu) - 1);

  /* Appearance */
  background: rgba(0, 0, 0, 0.5);

  /* Animation */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Active state (when menu is open) */
.menu-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.menu-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 4px;
  font-family: var(--font-sans);
  color: var(--color-text);
  transition: background-color var(--transition-base);
}

.menu-item:hover {
  background-color: var(--color-border);
}

.menu-label {
  font-size: var(--size-small);
}

/* ==================== HERO SECTION (MINIMAL) ==================== */

.hero-minimal {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero-content {
  z-index: 1;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: var(--size-title-hero);
  font-weight: var(--weight-bold);
  margin-bottom: var(--spacing-lg);
  letter-spacing: -1px;
}

.hero-subtitle {
  font-family: var(--font-serif);
  font-size: clamp(18px, 3vw, 28px);
  color: var(--color-text-light);
  font-weight: var(--weight-regular);
  font-style: italic;
}

/* Scroll Prompt */
.scroll-prompt {
  position: absolute;
  bottom: var(--spacing-xl);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  animation: bounce 2s infinite;
  cursor: pointer;
}

.scroll-prompt span {
  font-size: var(--size-small);
  color: var(--color-text-light);
}

.scroll-icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
  color: var(--color-text-light);
}

@keyframes bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(8px);
  }
}

/* ==================== GALLERY LAYOUT ==================== */

.gallery {
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

/* CRITICAL FIX: Respect inline display:none on gallery element (for homepage immersive mode) */
#gallery[style*="display: none"] {
  display: none !important;
}

/* Artwork Section */
.artwork-section {
  display: grid;
  gap: var(--spacing-xl);
  scroll-margin-top: var(--spacing-xl);
}

/* Mobile (1 column) */
@media (max-width: 767px) {
  .artwork-section {
    grid-template-columns: 1fr;
  }

  .gallery {
    padding: 0 var(--spacing-md);
    gap: var(--spacing-xl);
  }
}

/* Tablet (2 columns) */
@media (min-width: 768px) and (max-width: 1023px) {
  .artwork-section {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .artwork-header {
    grid-column: 1;
  }

  .critiques-container {
    grid-column: 2;
    grid-row: 1;
  }

  .visualization-container {
    grid-column: 1 / -1;
  }
}

/* Desktop (3+ columns) */
@media (min-width: 1024px) {
  .artwork-section {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--spacing-lg);
  }

  .artwork-header {
    grid-column: 1;
  }

  .critiques-container {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-content: start;
  }

  .visualization-container {
    grid-column: 1 / -1;
  }
}

/* Large Display (4+ columns) */
@media (min-width: 2560px) {
  .artwork-section {
    grid-template-columns: 3fr 1fr 1fr 1fr;
  }

  .critiques-container {
    grid-column: 2 / -1;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ==================== ARTWORK HEADER ==================== */

.artwork-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.artwork-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  animation: ghostAppear 1.2s ease-in-out forwards;
  opacity: 0;
}

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

.artwork-metadata {
  text-align: left;
}

.artwork-title {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  font-family: var(--font-serif);
  font-size: var(--size-title-artwork);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--spacing-sm);
}

.artwork-title span {
  display: block;
}

.artwork-title [lang="en"] {
  font-size: 0.9em;
  color: var(--color-text-light);
  font-weight: var(--weight-regular);
}

.artwork-year {
  display: block;
  font-size: var(--size-small);
  color: var(--color-text-light);
  font-family: var(--font-sans);
}

/* ==================== CRITIQUE PANELS ==================== */

.critiques-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.critique-panel {
  border-left: 3px solid var(--color-persona-suShi);
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(8px);
  border-radius: 0;
  box-shadow: none;
  border: 1px solid rgba(128, 128, 128, 0.1);
  animation: ghostAppear 1.2s ease-in-out forwards;
  opacity: 0;
}

/* Persona-specific border colors */
.critique-panel[data-persona-id="su-shi"] {
  border-left-color: var(--color-persona-suShi);
}

.critique-panel[data-persona-id="guo-xi"] {
  border-left-color: var(--color-persona-guoXi);
}

.critique-panel[data-persona-id="john-ruskin"] {
  border-left-color: var(--color-persona-ruskin);
}

.critique-panel[data-persona-id="mama-zola"] {
  border-left-color: var(--color-persona-zola);
}

.critique-panel[data-persona-id="professor-petrova"] {
  border-left-color: var(--color-persona-petrova);
}

.critique-panel[data-persona-id="ai-ethics"] {
  border-left-color: var(--color-persona-aiReviewer);
}

@keyframes ghostAppear {
  from {
    opacity: 0;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes ghostDisappear {
  from {
    opacity: 1;
    filter: blur(0);
  }
  to {
    opacity: 0;
    filter: blur(12px);
  }
}

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

/* Auto-play animation delays - no stagger, all visible then hidden together */
.critique-panel:nth-child(1) { animation-delay: 0s; }
.critique-panel:nth-child(2) { animation-delay: 0s; }
.critique-panel:nth-child(3) { animation-delay: 0s; }
.critique-panel:nth-child(4) { animation-delay: 0s; }
.critique-panel:nth-child(5) { animation-delay: 0s; }
.critique-panel:nth-child(6) { animation-delay: 0s; }

.critique-header {
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.persona-name {
  font-family: var(--font-serif);
  font-size: var(--size-title-artwork);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.persona-era {
  display: block;
  font-size: var(--size-small);
  color: var(--color-text-light);
  font-family: var(--font-sans);
  margin-left: auto;
}

.persona-color-indicator {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  flex-shrink: 0;
}

.critique-body {
  margin-bottom: var(--spacing-md);
}

.critique-text {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: 1.8;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.critique-text:last-child {
  margin-bottom: 0;
}

/* Image reference links (Phase 3: implement-multi-image-artwork-series) */
.critique-text .image-reference-link {
  color: #2196F3;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.critique-text .image-reference-link:hover {
  color: #0b7dda;
  text-decoration-style: solid;
  background: rgba(33, 150, 243, 0.1);
  padding: 0 2px;
  border-radius: 2px;
}

.critique-text .image-reference-link:active {
  transform: translateY(1px);
}

/* Language-specific visibility */
[data-lang="zh"] .critique-text[lang="en"],
[data-lang="en"] .critique-text[lang="zh"] {
  display: none;
}

.critique-footer {
  border-top: 1px solid var(--color-border);
  padding-top: var(--spacing-md);
  font-size: var(--size-small);
  color: var(--color-text-light);
}

.rpait-scores {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.rpait-label {
  font-weight: var(--weight-semibold);
  margin-right: var(--spacing-sm);
}

/* ==================== VISUALIZATION CONTAINER ==================== */

.visualization-container {
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(6px);
  border-radius: 0;
  box-shadow: none;
  border: 1px solid rgba(128, 128, 128, 0.1);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ghostAppear 1.5s ease-in-out forwards;
  opacity: 0;
}

@media (prefers-color-scheme: dark) {
  .visualization-container {
    background-color: rgba(42, 42, 42, 0.7);
  }
}

canvas {
  max-width: 100%;
  height: auto;
}

/* ==================== FOOTER (MINIMAL) ==================== */

.footer-minimal {
  margin-top: var(--spacing-2xl);
  padding: var(--spacing-xl) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  text-align: center;
}

.footer-content {
  max-width: var(--max-width-container);
  margin: 0 auto;
}

.footer-text {
  font-size: var(--size-small);
  color: var(--color-text-light);
  margin-bottom: var(--spacing-sm);
}

.footer-contact a {
  color: var(--color-persona-suShi);
  text-decoration: underline;
}

/* ==================== ABOUT SECTION ==================== */

.about-section {
  max-width: var(--max-width-container);
  margin: var(--spacing-2xl) auto;
  padding: 0 var(--spacing-lg);
}

.about-content {
  font-family: var(--font-serif);
  font-size: var(--size-body);
  line-height: 1.8;
}

.about-content ul {
  list-style: none;
  margin-left: 0;
}

.about-content li {
  margin-bottom: var(--spacing-lg);
  padding-left: var(--spacing-lg);
  position: relative;
}

.about-content li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--color-persona-suShi);
}

/* ==================== UTILITIES ==================== */

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

/* Display helpers */
[hidden] {
  display: none !important;
}

/* Responsive utilities */
@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none;
  }
}

/* ==================== ACCESSIBILITY ==================== */

/* Focus visible for keyboard navigation */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--color-persona-suShi);
  outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: more) {
  .critique-panel,
  .visualization-container {
    border: 2px solid var(--color-text);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* ==================== PRINT STYLES ==================== */

@media print {
  .header-minimal,
  .floating-menu,
  .footer-minimal,
  .scroll-prompt {
    display: none;
  }

  .artwork-section {
    page-break-inside: avoid;
  }
}

/* ==================== DETAIL PAGES (Critics, About, Process) ==================== */

.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
}

.page-header h1 {
  font-size: 3rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--color-text);
}

.page-header .subtitle {
  font-size: 1.25rem;
  color: var(--color-text-light);
  margin: 0;
}

.page-footer {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-light);
  font-size: 0.9rem;
  border-top: 1px solid var(--color-border);
  margin-top: 3rem;
}

.page-footer a {
  color: var(--color-text);
  text-decoration: underline;
}

.page-footer a:hover {
  color: var(--color-primary);
}

/* ==================== CRITICS PAGE ==================== */

.critics-section {
  margin: 3rem 0;
}

.critics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

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

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

/* Critic Card */
.critic-card {
  background: rgba(255, 255, 255, 0.95);
  border-left: 4px solid var(--critic-color, #999);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.3s ease;
}

.critic-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.critic-card-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.critic-name-zh {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.25rem 0;
  color: var(--color-text);
}

.critic-name-en {
  font-size: 0.9rem;
  font-weight: 400;
  font-style: italic;
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
  color: #666;
}

.critic-period {
  font-size: 0.85rem;
  color: #999;
  margin: 0;
  font-style: italic;
}

.critic-card-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.critic-bio {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #333;
  margin-bottom: 1.5rem;
}

/* RPAIT Grid */
.rpait-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.rpait-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.rpait-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-align: center;
  color: var(--color-text);
}

.rpait-label abbr {
  text-decoration: none;
  cursor: help;
  border-bottom: 1px dotted var(--color-text-light);
}

.rpait-label .score {
  display: block;
  font-size: 0.65rem;
  color: var(--color-text-light);
}

.rpait-bar-bg {
  height: 60px;
  background: #f0f0f0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.rpait-bar-fill {
  height: 100%;
  background: linear-gradient(180deg, var(--critic-color, #4a90a4) 0%, rgba(74, 144, 164, 0.6) 100%);
  width: 100%;
  transition: width 0.3s ease;
}

/* RPAIT Framework Info */
.rpait-info {
  background: rgba(255, 255, 255, 0.8);
  border-left: 4px solid var(--color-primary);
  padding: 2rem;
  margin: 3rem 0;
  border-radius: 2px;
}

.rpait-info h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.rpait-info p {
  margin: 0 0 1rem 0;
}

.rpait-dimensions {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rpait-dimensions li {
  padding: 0.75rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
  border-bottom: 1px solid var(--color-border);
}

.rpait-dimensions li:last-child {
  border-bottom: none;
}

.rpait-dimensions strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Error Messages */
.error-message,
.no-critics {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-light);
  font-size: 1.1rem;
}

.loading-message {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-light);
}

/* ==================== ABOUT & PROCESS PAGES ==================== */

.content-section {
  margin: 3rem 0;
  padding: 0;
}

.content-section h2 {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 2rem 0 1rem 0;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.5rem;
}

.content-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text);
  margin: 1rem 0;
}

.process-list,
.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
}

.process-list li,
.feature-list li {
  padding: 0.75rem 0 0.75rem 2rem;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text);
  border-left: 3px solid var(--color-primary);
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.process-list li:before,
.feature-list li:before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

.process-list strong,
.feature-list strong {
  color: var(--color-text);
  font-weight: 700;
}

/* Framework Cards (About Page) */
.framework-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 2rem 0;
}

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

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

.framework-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(245,245,245,0.9) 100%);
  border-left: 4px solid var(--color-primary);
  padding: 1.5rem;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s ease;
}

.framework-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.framework-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: var(--color-text);
}

.framework-card p {
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.6;
  color: var(--color-text);
}

/* ==================== RESPONSIVE DETAIL PAGES ==================== */

@media (max-width: 767px) {
  .page-content {
    padding: 1.5rem 1rem;
  }

  .page-header h1 {
    font-size: 2rem;
  }

  .page-header .subtitle {
    font-size: 1rem;
  }

  .critics-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .rpait-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .content-section h2 {
    font-size: 1.4rem;
  }

  .framework-cards {
    grid-template-columns: 1fr;
  }

  .process-list li,
  .feature-list li {
    padding-left: 1.5rem;
  }
}

/* ==================== GALLERY HERO SECTION (NEW CAROUSEL) ==================== */

.gallery-hero {
  display: flex;
  flex-direction: column;
  /* Removed min-height: 100vh for mobile scrollability */
  padding: 70px 20px 100px 20px;
  gap: 20px;
}

/* Hero Title Section - Main exhibition title */
.hero-title-section {
  text-align: center;
  padding: var(--spacing-xl) 0 var(--spacing-lg) 0;
  max-width: 1200px;
  margin: 0 auto;
}

.artwork-display {
  display: flex;
  flex: 1;
  gap: 20px;
  align-items: flex-start; /* Allow natural height based on content */
}

/* Unified Navigation Container (replaces artwork-image-container) */
.unified-navigation-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 500px; /* Ensure minimum height for navigation */
  overflow: visible; /* Allow component to manage overflow */
  border-radius: 8px;
  background: transparent; /* Component manages its own background */
  position: relative;
}

/* Legacy artwork-image-container (kept for backwards compatibility) */
.artwork-image-container {
  flex: 1;
  aspect-ratio: 16 / 9; /* Maintain aspect ratio across viewports */
  overflow: hidden;
  border-radius: 8px;
  background: var(--color-bg);
  position: relative;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
  .artwork-image-container {
    min-height: 400px;
  }

  .artwork-image-container::before {
    content: '';
    display: block;
    padding-bottom: 56.25%; /* 16:9 ratio */
  }
}

.artwork-image-container figure {
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.artwork-image-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Artwork Header Section - Title, year, and artist metadata */
.artwork-header-section {
  text-align: center;
  padding: var(--spacing-lg) 0;
  max-width: 900px;
  margin: 0 auto;
}

.artwork-header-section .artwork-title {
  font-family: var(--font-serif);
  font-size: var(--size-title-artwork);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--spacing-sm);
  line-height: 1.3;
}

.artwork-header-section .artwork-title span {
  display: block;
}

.artwork-header-section .artwork-title [lang="en"] {
  font-size: 0.85em;
  color: var(--color-text-light);
  font-weight: var(--weight-regular);
  margin-top: 4px;
}

.artwork-meta {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-sm);
  font-size: 0.95rem;
  color: var(--color-text-light);
  font-family: var(--font-sans);
}

.artwork-artist {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.critiques-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto; /* Default: allow scrolling */
  padding-right: 8px;
}

.critique-panel {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  padding: 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-left: 4px solid var(--color-text-light);
  transition: all var(--transition-base);
}

.critique-panel:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow: var(--shadow-sm);
}

.critique-header {
  margin-bottom: 12px;
}

.critique-author {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: var(--weight-semibold);
  margin: 0 0 8px 0;
}

.critique-period {
  font-size: 0.95rem;
  color: var(--color-text-light);
  margin: 0;
}

.critique-text {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0 0 12px 0;
  max-height: 150px;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.critique-panel.expanded .critique-text {
  max-height: 2000px; /* Large enough for longest critique */
}

.critique-toggle-btn {
  display: inline-block;
  background: none;
  border: none;
  color: #1976d2;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  margin-top: 8px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.critique-toggle-btn:hover {
  background-color: rgba(25, 118, 210, 0.08);
  color: #1565c0;
}

.critique-toggle-btn:focus {
  outline: 2px solid #1976d2;
  outline-offset: 2px;
}

.critique-toggle-btn:active {
  background-color: rgba(25, 118, 210, 0.16);
}

.critique-rpait {
  font-size: 0.85rem;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.rpait-label {
  font-weight: var(--weight-semibold);
}

.rpait-score {
  background: rgba(0, 0, 0, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* ==================== GALLERY NAVIGATION BAR ==================== */

/* ==================== OLD NAVIGATION BAR (DEPRECATED) ====================
   Replaced by UnifiedNavigation component
   Keep commented for reference / rollback
   ======================================================================== */

/*
.gallery-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: rgba(255, 255, 255, 0.95);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 0 20px;
  z-index: var(--z-sticky);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

@media (min-width: 600px) {
  .gallery-nav.show,
  .gallery-nav:focus-within {
    transform: translateY(0);
  }
}

.nav-hint {
  position: fixed;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
  transition: opacity 300ms;
  pointer-events: none;
  z-index: calc(var(--z-sticky) - 1);
}

@media (max-width: 599px) {
  .nav-hint {
    display: none;
  }
}

.gallery-nav.show ~ .nav-hint {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-nav {
    transition: none;
  }

  .nav-hint {
    transition: none;
  }
}

.nav-button {
  background: none;
  border: 1px solid var(--color-border);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 18px;
  font-weight: var(--weight-semibold);
  border-radius: 6px;
  transition: all var(--transition-base);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-button:hover {
  background: var(--color-bg);
  border-color: var(--color-text);
}

.nav-button:active {
  transform: scale(0.95);
}

.artwork-indicator {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  min-width: 80px;
  text-align: center;
}

.artwork-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all var(--transition-base);
  font-size: 0.75rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text-light);
}

.dot:hover {
  background: var(--color-border);
}

.dot.active {
  background: var(--color-text);
  color: white;
  border-color: var(--color-text);
}
*/

/* ==================== RESPONSIVE HERO LAYOUT ==================== */

/* Tablet: 600px - 1023px - 2 columns, 35:65 ratio */
@media (min-width: 600px) and (max-width: 1023px) {
  .artwork-display {
    flex-direction: row;
  }

  .artwork-image-container {
    flex: 0 0 60%; /* Image-first ratio for tablet */
    min-height: auto;
  }

  .critiques-panel {
    flex: 0 0 40%;
    max-height: calc(100vh - 180px); /* More generous vertical space */
    overflow-y: auto;
    gap: 16px;
  }
}

/* Desktop: 1024px - 1365px - 3 columns, constrained width */
@media (min-width: 1024px) and (max-width: 1365px) {
  .gallery-hero {
    max-width: 1400px; /* Constrain for readability */
    margin: 0 auto; /* Center horizontally */
    padding: 80px 60px 120px 60px;
  }

  .artwork-display {
    gap: 48px;
  }

  .artwork-image-container {
    flex: 0 0 60%; /* Image-first ratio */
  }

  .critiques-panel {
    flex: 0 0 40%;
    max-height: calc(100vh - 220px);
    gap: 16px;
  }

  /* OLD NAVIGATION (DEPRECATED)
  .gallery-nav {
    height: 100px;
    gap: 40px;
  }

  .nav-button {
    padding: 12px 20px;
    font-size: 20px;
  }

  .dot {
    width: 40px;
    height: 40px;
  }
  */
}

/* Large Desktop: 1366px - 1919px - 4 columns */
@media (min-width: 1366px) and (max-width: 1919px) {
  .gallery-hero {
    max-width: 1600px; /* Wider constraint for large displays */
    margin: 0 auto;
    padding: 100px 60px 140px 60px;
  }

  .artwork-display {
    gap: 48px; /* More spacious */
  }

  .artwork-image-container {
    flex: 0 0 60%; /* Image-first ratio */
  }

  .critiques-panel {
    flex: 0 0 40%;
    max-height: calc(100vh - 240px);
    gap: 16px;
  }

  /* OLD NAVIGATION (DEPRECATED)
  .gallery-nav {
    height: 100px;
    gap: 40px;
  }

  .nav-button {
    padding: 12px 20px;
    font-size: 20px;
  }

  .dot {
    width: 40px;
    height: 40px;
  }
  */
}

/* Ultra-Wide: 1920px+ - 4 columns, max-width constraint */
@media (min-width: 1920px) {
  .gallery-hero {
    max-width: 1600px; /* Cap to prevent excessive line length */
    margin: 0 auto;
    padding: 100px max(60px, calc((100vw - 1600px) / 2)) 140px max(60px, calc((100vw - 1600px) / 2));
  }

  .artwork-display {
    gap: 48px;
  }

  .artwork-image-container {
    flex: 0 0 60%;
  }

  .critiques-panel {
    flex: 0 0 40%;
    max-height: calc(100vh - 240px);
    gap: 16px;
  }

  /* OLD NAVIGATION (DEPRECATED)
  .gallery-nav {
    height: 100px;
    gap: 40px;
  }

  .nav-button {
    padding: 12px 20px;
    font-size: 20px;
  }

  .dot {
    width: 40px;
    height: 40px;
  }
  */
}

/* Mobile: ≤599px - Single column, natural scrolling */
@media (max-width: 599px) {
  /* OLD NAVIGATION (DEPRECATED)
  .artwork-dots {
    display: none;
  }

  .gallery-nav {
    height: 70px;
    gap: 15px;
    padding: 0 10px;
    transform: translateY(0) !important;
    transition: none;
  }

  .artwork-indicator {
    font-size: 0.9rem;
    min-width: 70px;
  }

  .nav-button {
    padding: 6px 12px;
    font-size: 16px;
  }
  */

  .gallery-hero {
    padding: 60px 15px 90px 15px;
    /* min-height removed - allow natural content height */
  }

  .artwork-display {
    flex-direction: column;
    gap: 15px;
  }

  .artwork-image-container {
    /* Use aspect-ratio from base styles, no fixed height */
    flex: 0 0 auto;
  }

  .critiques-panel {
    flex: 1;
    /* max-height removed - allow full scrollability */
    overflow-y: visible; /* Mobile: use document scroll instead of panel scroll */
  }

  .critique-panel {
    padding: 12px;
  }

  .critique-text {
    font-size: 0.9rem;
  }
}

/* ==================== SCROLL REVEAL ANIMATIONS ==================== */

/**
 * Scroll-triggered fade-in animations using Intersection Observer
 * - GPU-accelerated (opacity + transform only)
 * - Respects prefers-reduced-motion
 * - Staggered delays for multiple elements
 */

/* Base transition for all reveal elements */
[data-reveal] {
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

/* Initial state: hidden and slightly below */
.reveal-pending {
  opacity: 0;
  transform: translateY(30px);
}

/* Revealed state: fully visible in original position */
.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for multiple critique panels */
.critique-panel[data-reveal]:nth-child(1) { transition-delay: 0s; }
.critique-panel[data-reveal]:nth-child(2) { transition-delay: 0.1s; }
.critique-panel[data-reveal]:nth-child(3) { transition-delay: 0.15s; }
.critique-panel[data-reveal]:nth-child(4) { transition-delay: 0.2s; }
.critique-panel[data-reveal]:nth-child(5) { transition-delay: 0.25s; }
.critique-panel[data-reveal]:nth-child(6) { transition-delay: 0.3s; }

/* Accessibility: Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none !important;
    transition-delay: 0s !important;
    will-change: auto;
  }

  .reveal-pending {
    opacity: 1;
    transform: none;
  }

  /* Ensure content is immediately visible */
  [data-reveal].reveal-pending {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==================== ARTWORK IMAGE PLACEHOLDERS ==================== */

/**
 * Placeholder System for Missing Artwork Images
 * Displays artwork metadata when image files are not available
 * Phase 1 implementation of fix-artwork-image-display-system
 */

/* Base placeholder styles */
.artwork-placeholder {
  aspect-ratio: 3/2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  border-radius: 8px;
  color: white;
  position: relative;
  overflow: hidden;
}

/* Unique gradients per artwork */
.artwork-placeholder.artwork-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.artwork-placeholder.artwork-2 {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.artwork-placeholder.artwork-3 {
  background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%);
}

.artwork-placeholder.artwork-4 {
  background: linear-gradient(135deg, #d66d75 0%, #e29587 100%);
}

/* Content container */
.placeholder-content {
  max-width: 500px;
  z-index: 1;
}

/* Artwork title (Chinese) */
.placeholder-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

/* Artwork title (English) */
.placeholder-title-en {
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 1rem;
  opacity: 0.95;
  line-height: 1.4;
}

/* Artist and year metadata */
.placeholder-meta {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 0.5rem;
}

/* Pending acquisition status */
.placeholder-status {
  font-size: 0.875rem;
  opacity: 0.8;
  font-style: italic;
  margin-top: 1rem;
}

/* Responsive adjustments for placeholders */
@media (max-width: 768px) {
  .artwork-placeholder {
    padding: 1.5rem;
  }

  .placeholder-title {
    font-size: 1.2rem;
  }

  .placeholder-title-en {
    font-size: 1rem;
  }

  .placeholder-meta {
    font-size: 0.875rem;
  }

  .placeholder-status {
    font-size: 0.75rem;
  }
}

@media (max-width: 480px) {
  .artwork-placeholder {
    padding: 1rem;
  }

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

  .placeholder-title-en {
    font-size: 0.875rem;
  }

  .placeholder-meta {
    font-size: 0.75rem;
  }

  .placeholder-status {
    font-size: 0.7rem;
  }
}

/* ==========================================================================
   ARTWORK IMAGE CAROUSEL COMPONENT
   Component: js/components/artwork-carousel.js
   Part of: implement-multi-image-artwork-series OpenSpec change
   ========================================================================== */

/* Carousel Container */
.artwork-carousel {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Edge gradient hints (show interactive areas on hover) */
.artwork-carousel::before,
.artwork-carousel::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
  z-index: 9;
}

.artwork-carousel::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.08), transparent);
}

.artwork-carousel::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.08), transparent);
}

@media (hover: hover) and (pointer: fine) {
  .artwork-carousel:hover::before,
  .artwork-carousel:hover::after {
    opacity: 1;
  }
}

.carousel-wrapper {
  position: relative;
  background: var(--color-bg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px var(--color-shadow);
}

/* Viewport */
.carousel-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2; /* Maintain 1200x800 aspect ratio */
  overflow: hidden;
  background: #f0f0f0;
}

.carousel-image-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Slide */
.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fade transition */
.carousel-slide.fade {
  animation: fadeIn 300ms ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Slide transition */
.carousel-slide.slide {
  animation: slideIn 300ms ease-in-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Image */
.carousel-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.carousel-image.loaded {
  opacity: 1;
}

/* Loading State */
.carousel-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-text-light);
}

.carousel-loading .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.carousel-loading p {
  font-size: var(--size-small);
  margin: 0;
}

/* Error State */
.carousel-error {
  color: #d32f2f;
}

.carousel-error .error-detail {
  font-size: var(--size-small);
  color: var(--color-text-light);
  margin-top: 8px;
}

/* Empty State */
.carousel-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-text-light);
  font-size: var(--size-body);
}

/* Navigation Controls */
.carousel-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  pointer-events: none;
  z-index: 10;
}

.carousel-btn {
  pointer-events: auto;
  width: 48px;
  height: 48px;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-text);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 200ms ease, transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 2px 8px var(--color-shadow);
  opacity: 0; /* Default: hidden */
}

/* Desktop: Show on carousel hover */
@media (hover: hover) and (pointer: fine) {
  .artwork-carousel:hover .carousel-btn {
    opacity: 1;
  }

  .carousel-btn:hover:not(:disabled) {
    opacity: 1;
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--color-shadow);
  }

  /* Show metadata elements on hover */
  .artwork-carousel:hover .category-badge,
  .artwork-carousel:hover .image-counter,
  .artwork-carousel:hover .carousel-metadata {
    opacity: 1;
  }
}

/* Mobile/Touch: Always semi-visible */
@media (hover: none) {
  .carousel-btn {
    opacity: 0.5;
  }

  .carousel-btn:active:not(:disabled) {
    opacity: 1;
    background: white;
  }

  /* Metadata elements semi-visible on mobile */
  .category-badge,
  .image-counter,
  .carousel-metadata {
    opacity: 0.7;
  }
}

/* Common states */
.carousel-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.carousel-btn:disabled {
  opacity: 0.2 !important;
  cursor: not-allowed;
}

/* Keyboard focus (accessibility) */
.carousel-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

.carousel-btn svg {
  width: 24px;
  height: 24px;
}

/* Indicators (dots) */
.carousel-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.05));
}

.carousel-indicator {
  width: 10px;
  height: 10px;
  border: none;
  background: var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition: all 200ms ease;
  padding: 0;
}

.carousel-indicator:hover {
  background: var(--color-text-light);
  transform: scale(1.2);
}

.carousel-indicator.active {
  background: var(--color-text);
  width: 24px;
  border-radius: 5px;
}

.carousel-indicator.highlighted {
  background: #FFD700; /* Gold for highlighted images */
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.carousel-indicator.active.highlighted {
  background: linear-gradient(90deg, var(--color-text) 0%, #FFD700 100%);
}

/* Metadata Overlay */
.carousel-metadata {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: white;
  padding: var(--spacing-lg) var(--spacing-md);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  opacity: 0; /* Default: hidden */
  transition: opacity 200ms ease;
}

.carousel-metadata-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Category Badge */
.category-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: var(--spacing-sm);
  opacity: 0; /* Default: hidden */
  transition: opacity 200ms ease;
}

.category-badge.category-sketch {
  background: #4A90E2;
  color: white;
}

.category-badge.category-process {
  background: #F5A623;
  color: white;
}

.category-badge.category-installation {
  background: #7ED321;
  color: white;
}

.category-badge.category-detail {
  background: #BD10E0;
  color: white;
}

.category-badge.category-final {
  background: #D0021B;
  color: white;
}

.category-badge.category-context {
  background: #8B572A;
  color: white;
}

/* Image Counter */
.image-counter {
  float: right;
  font-size: var(--size-small);
  font-weight: var(--weight-semibold);
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: var(--spacing-sm);
  opacity: 0; /* Default: hidden */
  transition: opacity 200ms ease;
}

/* Titles */
.carousel-metadata .image-title {
  font-family: var(--font-serif);
  font-size: var(--size-title-artwork);
  font-weight: var(--weight-bold);
  margin: 0 0 var(--spacing-xs) 0;
  line-height: 1.3;
}

.carousel-metadata .image-title-en {
  font-family: var(--font-sans);
  font-size: var(--size-body);
  font-weight: var(--weight-regular);
  margin: 0 0 var(--spacing-sm) 0;
  opacity: 0.9;
}

/* Caption */
.carousel-metadata .image-caption {
  font-size: var(--size-small);
  line-height: 1.6;
  margin: var(--spacing-sm) 0 0 0;
  opacity: 0.8;
  max-width: 600px;
}

/* Responsive: Tablet */
@media (max-width: 768px) {
  .carousel-btn {
    width: 40px;
    height: 40px;
  }

  .carousel-btn svg {
    width: 20px;
    height: 20px;
  }

  .carousel-controls {
    padding: 0 var(--spacing-sm);
  }

  .carousel-metadata {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .carousel-metadata .image-caption {
    display: none; /* Hide caption on tablets to save space */
  }
}

/* Responsive: Mobile */
@media (max-width: 480px) {
  .carousel-viewport {
    aspect-ratio: 4 / 3; /* Slightly taller on mobile */
  }

  .carousel-btn {
    width: 36px;
    height: 36px;
  }

  .carousel-btn svg {
    width: 18px;
    height: 18px;
  }

  .carousel-indicators {
    gap: 6px;
    padding: var(--spacing-sm);
  }

  .carousel-indicator {
    width: 8px;
    height: 8px;
  }

  .carousel-indicator.active {
    width: 20px;
  }

  .carousel-metadata .image-title {
    font-size: 1.25rem;
  }

  .carousel-metadata .image-title-en {
    font-size: 0.875rem;
  }

  .category-badge,
  .image-counter {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}

/* Accessibility: Focus States */
.carousel-btn:focus,
.carousel-indicator:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .carousel-slide.fade,
  .carousel-slide.slide {
    animation: none;
  }

  .carousel-image {
    transition: none;
  }

  .carousel-btn,
  .carousel-indicator {
    transition: none;
  }
}

/* ==================== DATA VISUALIZATION SECTION ==================== */

:root {
  /* RPAIT Dimension Colors */
  --rpait-r: #E8998D;
  --rpait-p: #A3A8C5;
  --rpait-a: #B8D8BE;
  --rpait-i: #F4C2C2;
  --rpait-t: #D4A574;

  /* Heatmap Gradient */
  --heatmap-low: hsl(0, 70%, 75%);
  --heatmap-mid: hsl(40, 70%, 75%);
  --heatmap-high: hsl(120, 70%, 75%);
}

.visualization-section {
  padding: var(--spacing-2xl) 0;
  background: linear-gradient(180deg, #f9f9f9 0%, #ffffff 100%);
}

.viz-header {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.viz-header h2 {
  font-size: 2rem;
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
}

.viz-header p {
  font-size: 1.125rem;
  color: var(--color-text-light);
}

.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-xl);
}

.viz-panel {
  background: white;
  border-radius: 12px;
  padding: var(--spacing-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.3s ease;
}

.viz-panel:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.viz-panel h3 {
  font-size: 1.25rem;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-border);
}

/* Canvas sizing */
.viz-panel canvas {
  width: 100% !important;
  height: auto !important;
  max-height: 400px;
}

/* SVG sizing */
.viz-panel svg {
  width: 100%;
  height: 500px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* Visualization Controls */
.viz-controls {
  margin-top: var(--spacing-md);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.viz-btn {
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: var(--weight-medium);
}

.viz-btn:hover {
  background: var(--color-bg-alt);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.viz-btn:active {
  transform: translateY(0);
}

.viz-btn.active {
  background: var(--color-text);
  color: white;
  border-color: var(--color-text);
}

.viz-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

#dimension-selector {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: white;
  color: var(--color-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

#dimension-selector:hover {
  border-color: var(--color-text-light);
}

#dimension-selector:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Persona Selector */
.persona-selector-wrapper {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.persona-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  justify-content: center;
}

.persona-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  border: 2px solid var(--color-border);
  border-radius: 6px;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.85rem;
  line-height: 1.2;
  user-select: none;
}

.persona-badge .badge-name {
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.persona-badge .badge-name-en {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin-top: 2px;
}

.persona-badge:hover {
  border-color: var(--color-text-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.persona-badge:active {
  transform: translateY(0);
}

.persona-badge:focus {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Active state - color coded by persona */
.persona-badge.active {
  font-weight: var(--weight-semibold);
  border-width: 2px;
}

.persona-badge[data-persona="su-shi"].active {
  background: rgba(184, 92, 60, 0.15);
  border-color: rgb(184, 92, 60);
}

.persona-badge[data-persona="guo-xi"].active {
  background: rgba(74, 124, 126, 0.15);
  border-color: rgb(74, 124, 126);
}

.persona-badge[data-persona="john-ruskin"].active {
  background: rgba(232, 193, 154, 0.2);
  border-color: rgb(232, 193, 154);
}

.persona-badge[data-persona="mama-zola"].active {
  background: rgba(139, 195, 74, 0.15);
  border-color: rgb(139, 195, 74);
}

.persona-badge[data-persona="professor-petrova"].active {
  background: rgba(121, 85, 72, 0.15);
  border-color: rgb(121, 85, 72);
}

.persona-badge[data-persona="ai-ethics"].active {
  background: rgba(100, 181, 246, 0.15);
  border-color: rgb(100, 181, 246);
}

/* Help text */
.help-text {
  font-size: 0.75rem;
  color: var(--color-text-light);
  margin: 0;
  text-align: center;
}

/* Screen reader only */
.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;
}

/* Responsive Design */
@media (max-width: 768px) {
  .persona-selector-wrapper {
    padding: var(--spacing-sm);
  }

  .persona-badges {
    gap: 6px;
  }

  .persona-badge {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .persona-badge .badge-name-en {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .persona-badges {
    justify-content: center;
  }

  .persona-badge {
    padding: 4px 8px;
    font-size: 0.75rem;
  }

  .persona-badge .badge-name-en {
    display: none;
  }

  .help-text {
    font-size: 0.7rem;
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .viz-grid {
    grid-template-columns: 1fr;
  }

  .viz-panel canvas {
    max-height: 350px;
  }

  .viz-panel svg {
    height: 400px;
  }
}

@media (max-width: 768px) {
  .visualization-section {
    padding: var(--spacing-xl) 0;
  }

  .viz-header h2 {
    font-size: 1.5rem;
  }

  .viz-header p {
    font-size: 1rem;
  }

  .viz-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .viz-panel {
    padding: var(--spacing-md);
  }

  .viz-panel canvas {
    max-height: 280px;
  }

  .viz-panel svg {
    height: 300px;
  }

  .viz-controls {
    flex-direction: column;
  }

  .viz-btn {
    width: 100%;
  }

  .heatmap-matrix {
    gap: 1px;
  }

  .heatmap-cell {
    font-size: 12px;
  }

  .heatmap-label {
    font-size: 10px;
  }

  .heatmap-x-labels .heatmap-label {
    height: 30px;
  }

  .legend-items {
    gap: 8px;
  }

  .legend-swatch {
    width: 20px;
    height: 20px;
  }

  .legend-label {
    font-size: 11px;
  }

  .legend-gradient {
    width: 150px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .viz-header h2 {
    font-size: 1.25rem;
  }

  .viz-header p {
    font-size: 0.875rem;
  }

  .viz-panel h3 {
    font-size: 1.125rem;
  }

  .heatmap-cell {
    font-size: 9px;
  }
}

/* Accessibility: Focus States */
.viz-btn:focus-visible,
#dimension-selector:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

canvas:focus-visible,
svg:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .viz-panel,
  .viz-btn,
  .heatmap-cell {
    transition: none;
  }

  .heatmap-cell:hover {
    transform: none;
  }
}

/* Loading State */
.viz-panel.loading {
  opacity: 0.6;
  pointer-events: none;
}

.viz-panel.loading::after {
  content: 'Loading...';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  color: var(--color-text-light);
}

/* ==================== IMAGE REFERENCE LINKS ==================== */
/* Clickable links within critique text that navigate to specific images */
/* Part of: fix-image-references-in-gallery-hero OpenSpec change */

.image-reference-link {
  color: var(--color-primary, #007bff);
  text-decoration: none;
  font-weight: 500;
  padding: 0 2px;
  border-bottom: 1px dotted currentColor;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline;
}

.image-reference-link:hover {
  color: var(--color-primary-dark, #0056b3);
  border-bottom-style: solid;
  background-color: rgba(0, 123, 255, 0.05);
}

.image-reference-link:focus {
  outline: 2px solid var(--color-focus, #0056b3);
  outline-offset: 2px;
  border-radius: 2px;
}

.image-reference-link:focus-visible {
  outline: 2px solid var(--color-focus, #0056b3);
  outline-offset: 2px;
}

.image-reference-link:active {
  transform: translateY(1px);
}

/* Invalid image references (ID not found in artwork) */
.image-reference-invalid {
  color: var(--color-error, #dc3545);
  text-decoration: line-through;
  cursor: not-allowed;
  font-style: italic;
  opacity: 0.7;
}

.image-reference-invalid::before {
  content: "⚠️ ";
  font-style: normal;
}

/* Ensure links don't break critique card layout */
.critique-text .image-reference-link {
  vertical-align: baseline;
  line-height: inherit;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .image-reference-link {
    font-weight: 600;
    padding: 2px 4px;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .image-reference-link {
    border-bottom-width: 2px;
    font-weight: 700;
  }

  .image-reference-link:focus {
    outline-width: 3px;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .image-reference-link {
    color: #4dabf7;
  }

  .image-reference-link:hover {
    color: #74c0fc;
    background-color: rgba(77, 171, 247, 0.1);
  }
}

/* ==================== PAPER CITATION STYLING ==================== */

/* Paper citation container */
.paper-citation {
  background: #f9f9f9;
  border-left: 4px solid #B85C3C;
  padding: 1.5rem;
  margin: 1.5rem 0;
  border-radius: 4px;
}

/* Paper title */
.paper-title {
  font-size: 1.1rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  line-height: 1.4;
}

.paper-title a {
  color: #B85C3C;
  text-decoration: none;
  transition: color 0.2s ease;
}

.paper-title a:hover {
  color: #8B4513;
  text-decoration: underline;
}

/* Paper authors */
.paper-authors {
  font-size: 0.95rem;
  color: #555;
  margin: 0.25rem 0;
}

/* Paper venue */
.paper-venue {
  font-size: 0.9rem;
  color: #666;
  margin: 0.25rem 0;
}

/* BibTeX collapsible section */
.paper-bibtex {
  margin-top: 1rem;
}

.paper-bibtex summary {
  cursor: pointer;
  font-size: 0.9rem;
  color: #B85C3C;
  font-weight: 500;
  user-select: none;
  transition: color 0.2s ease;
}

.paper-bibtex summary:hover {
  color: #8B4513;
  text-decoration: underline;
}

.paper-bibtex pre {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  line-height: 1.5;
  border: 1px solid #e0e0e0;
}

.paper-bibtex code {
  font-family: 'Courier New', Monaco, monospace;
  color: #333;
}

/* Homepage paper link styling */
.paper-link {
  font-size: 0.95rem;
  margin: 0.5rem 0;
}

.paper-link a {
  color: #B85C3C;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.paper-link a:hover {
  color: #8B4513;
  text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .paper-citation {
    padding: 1rem;
    margin: 1rem 0;
  }

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

  .paper-bibtex pre {
    font-size: 0.75rem;
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .paper-citation {
    padding: 0.75rem;
    border-left-width: 3px;
  }

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

  .paper-authors,
  .paper-venue {
    font-size: 0.85rem;
  }
}

/* ==================== LANGUAGE SWITCHING ==================== */

/* Hide inactive language content */
[data-lang="zh"] [lang="en"],
[data-lang="en"] [lang="zh"] {
  display: none;
}

/* Show active language content */
[data-lang="zh"] [lang="zh"],
[data-lang="en"] [lang="en"] {
  display: inline;
}

/* Block-level elements should remain block */
[data-lang="zh"] h1 [lang="zh"],
[data-lang="en"] h1 [lang="en"],
[data-lang="zh"] h2 [lang="zh"],
[data-lang="en"] h2 [lang="en"],
[data-lang="zh"] h3 [lang="zh"],
[data-lang="en"] h3 [lang="en"],
[data-lang="zh"] p [lang="zh"],
[data-lang="en"] p [lang="en"],
[data-lang="zh"] li [lang="zh"],
[data-lang="en"] li [lang="en"] {
  display: block;
}

/* Inline elements */
[data-lang="zh"] span[lang="zh"],
[data-lang="en"] span[lang="en"] {
  display: inline;
}

/* ========== END OF STYLESHEET ========== */