/* ==========================================================================
   FAÇADE by Sara Bensalem - Stitch Design Tokens and CSS Architecture
   Authoritative Reference: Stitch Project 9841893354773356987
   Strictly Zero Em Dashes (unicode 8212). Universal 0px Sharp Geometry.
   ========================================================================== */

:root {
  --color-surface: #F9F9F9;
  --color-on-surface: #1A1C1C;
  --color-brass-plate: #C5A059;
  --grid-columns: 12;
  --grid-columns-desktop: 12;
  --radius-none: 0px;
  --color-surface-dim: #DADADA;
  --color-surface-bright: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F4F4F4;
  --color-surface-container: #EEEEEE;
  --color-surface-container-high: #E8E8E8;
  --color-surface-container-highest: #E2E2E2;

  /* ------------------------------------------------------------------------
     2. Ink and Typography Tokens (WCAG AAA Compliance > 7:1)
     ------------------------------------------------------------------------ */
  --color-on-surface: #1A1C1C;                /* Jet Black Ink (Contrast 14.8:1 against #F9F9F9) */
  --color-on-surface-variant: #4C4546;        /* Secondary curatorial text (Contrast 7.6:1) */
  --color-outline: #7E7576;                  /* Subtle borders */
  --color-outline-variant: #CFC4C5;          /* Hairline dividers */
  --color-hairline: #E2E2E6;                 /* Calibrated 1px architectural grid lines */

  /* ------------------------------------------------------------------------
     3. Architectural Ink and Brand Action
     ------------------------------------------------------------------------ */
  --color-primary: #000000;                  /* Pure Black action buttons */
  --color-on-primary: #FFFFFF;               /* Crisp White button text */
  --color-primary-hover: #262626;            /* Hover black */
  --color-primary-container: #1B1B1B;        /* Dark container */
  --color-on-primary-container: #848484;

  /* ------------------------------------------------------------------------
     4. Curatorial and Satin Brass Accents
     ------------------------------------------------------------------------ */
  --color-brass-plate: #C5A059;              /* Brushed satin architectural brass */
  --color-brass-plate-hover: #D4AF37;        /* Polished gold highlight */
  --color-brass-plate-dark: #9A7B39;         /* Beveled edge brass shadow */
  --color-brass-text: #2A210D;               /* Deep etched typography ink */
  --color-brass-border: #8C6F34;

  /* ------------------------------------------------------------------------
     5. European White Oak Floater Frame and Trough
     ------------------------------------------------------------------------ */
  --oak-highlight: #FAE1C2;                  /* Top sunlit edge */
  --oak-natural-light: #F2D7B9;              /* Fine wood grain */
  --oak-natural-face: #D6B187;               /* Calibrated European white oak */
  --oak-natural-tone: #CEAA88;               /* Honey amber grain */
  --oak-inner-bevel: #987557;                /* Return frame profile */
  --oak-bevel-deep: #8D6949;                 /* Shadowed interior bevel */
  --oak-recess-trough: #250E00;              /* 5mm deep floater reveal shadow */

  /* ------------------------------------------------------------------------
     6. Dark Titanium Theater Mode (Zoom Loupe and Modals)
     ------------------------------------------------------------------------ */
  --color-titanium-void: #0B0F17;            /* True deep titanium black */
  --color-titanium-surface: #111317;         /* Elevated modal surface */
  --color-titanium-elevated: #1A1C23;        /* Toolbars and telemetry */
  --color-titanium-text: #F1F5F9;            /* High-contrast cool white */
  --color-titanium-muted: #94A3B8;           /* Muted telemetry */
  --color-titanium-border: rgba(255, 255, 255, 0.12);

  /* ------------------------------------------------------------------------
     7. Material Pigment Signatures (Lab Colorimetry Analysis)
     ------------------------------------------------------------------------ */
  --mat-marrakech-solid: #C87549;
  --mat-marrakech-relief: #AD6942;
  --mat-marrakech-shadow: #8F5233;

  --mat-strasbourg-solid: #B2827E;
  --mat-strasbourg-relief: #AE827C;
  --mat-strasbourg-shadow: #9A6D68;

  --mat-majorelle-solid: #032FA8;
  --mat-majorelle-relief: #03289B;
  --mat-majorelle-shadow: #313F4C;

  --mat-casablanca-solid: #E5DED4;
  --mat-casablanca-relief: #ECEDE7;
  --mat-casablanca-shadow: #B1ADA4;

  --mat-chefchaouen-solid: #6192B3;
  --mat-chefchaouen-relief: #637B9D;
  --mat-chefchaouen-shadow: #2E4C70;

  /* ------------------------------------------------------------------------
     8. Typographic Stacks and Scales
     ------------------------------------------------------------------------ */
  --font-display: "Geist", "Space Grotesk", "Neue Haas Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Source Serif 4", "Editorial Serif", "EB Garamond", Georgia, serif;
  --font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", monospace;

  /* Fluid Display Headline Scale (Clamped for zero overflow) */
  --text-display-hero: clamp(48px, 7.5vw, 84px);
  --text-display-lg: clamp(36px, 5vw, 64px);
  --text-headline-lg: clamp(28px, 3.2vw, 44px);
  --text-headline-md: clamp(20px, 2.2vw, 32px);
  --text-headline-sm: clamp(16px, 1.6vw, 22px);

  /* Body and Editorial Scales */
  --text-body-lead: clamp(16px, 1.25vw, 20px);
  --text-body-lg: 18px;
  --text-body-md: 15px;
  --text-body-sm: 13px;
  --text-caption: 12px;
  --text-label-caps: 11px;
  --text-mono-meta: 11px;

  /* ------------------------------------------------------------------------
     9. Modular Spacing Scale
     ------------------------------------------------------------------------ */
  --space-unit: 8px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --section-gap: clamp(70px, 8vw, 120px);

  /* ------------------------------------------------------------------------
     10. Swiss Modular Grid System Variables
     ------------------------------------------------------------------------ */
  --grid-columns: 12;
  --grid-gutter: clamp(16px, 2.5vw, 32px);
  --grid-margin: clamp(20px, 4vw, 64px);
  --container-max: 1440px;

  /* ------------------------------------------------------------------------
     11. Sharp Geometry Rules
     ------------------------------------------------------------------------ */
  --radius-none: 0px;

  /* ------------------------------------------------------------------------
     12. Gallery Lighting and Shadow Elevations
     ------------------------------------------------------------------------ */
  --shadow-resting: 0 10px 30px -8px rgba(0, 0, 0, 0.08), 0 20px 45px -12px rgba(0, 0, 0, 0.05);
  --shadow-hover: 0 25px 60px -12px rgba(0, 0, 0, 0.16), 0 40px 80px -18px rgba(0, 0, 0, 0.10);
  --shadow-trough-inset: inset 0 0 8px rgba(37, 14, 0, 0.85), inset 2px 2px 4px rgba(0, 0, 0, 0.95);
  --shadow-plaque: 0 3px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);

  /* ------------------------------------------------------------------------
     13. Motion Easing Transitions
     ------------------------------------------------------------------------ */
  --ease-curatorial: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-curatorial);
  --transition-medium: 300ms var(--ease-curatorial);
  --transition-slow: 500ms var(--ease-curatorial);
}

/* ==========================================================================
   Base Resets and Architecture
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-radius: 0 !important; /* Sharp architectural aesthetic */
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overflow-x: hidden;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.75;
}

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

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* ==========================================================================
   Swiss 12-Column Grid Framework
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-margin);
  padding-right: var(--grid-margin);
}

.swiss-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
}

.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .col-span-7, .col-span-8, .col-span-9 { grid-column: span 12; }
  .col-span-4, .col-span-5 { grid-column: span 12; }
  .col-span-3 { grid-column: span 6; }
}

@media (max-width: 768px) {
  .col-span-3, .col-span-6 { grid-column: span 12; }
  :root {
    --grid-margin: 20px;
    --grid-gutter: 20px;
  }
}

/* ==========================================================================
   Header and Fixed Horizon
   ========================================================================== */
.gallery-horizon {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #C5A059 0%, #D6B187 50%, #1A1C1C 100%);
  z-index: 200;
}

.gallery-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: rgba(249, 249, 249, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-hairline);
  z-index: 100;
  transition: background-color var(--transition-medium);
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 72px;
}

.brand-block {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
  letter-spacing: 0.06em;
}

.brand-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-on-surface);
  letter-spacing: 0.12em;
}

.brand-divider {
  color: var(--color-brass-plate);
  font-weight: 300;
  font-size: 16px;
}

.brand-author {
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-on-surface-variant);
}

.gallery-nav {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 32px;
}

.nav-link {
  font-family: var(--font-mono);
  font-size: var(--text-label-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-on-surface);
  padding: 6px 0;
  position: relative;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-brass-plate);
  transition: width var(--transition-medium);
}

.nav-link:hover::after {
  width: 100%;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

#header-auth-container {
  display: flex;
  align-items: center;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 14px;
  background: transparent;
  color: var(--color-on-surface);
  border: 1px solid var(--color-outline-variant);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nav-btn:hover {
  background: var(--color-surface-container-high);
  border-color: var(--color-on-surface);
}

.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: var(--color-surface-bright);
  border: 1px solid var(--color-outline-variant);
  cursor: pointer;
  transition: border-color var(--transition-fast);
}

.user-chip:hover {
  border-color: var(--color-brass-plate);
}

.user-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50% !important;
  object-fit: cover;
}

.user-name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-on-surface);
  letter-spacing: 0.04em;
}

.order-badge {
  background: var(--color-brass-plate);
  color: #000000;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
}

.mobile-menu-toggle {
  display: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 6px;
}

.toggle-bar {
  width: 22px;
  height: 1.5px;
  background-color: var(--color-on-surface);
  transition: transform var(--transition-fast);
}

@media (max-width: 900px) {
  .gallery-nav { display: none; }
  .mobile-menu-toggle { display: flex; }
}

/* Mobile Drawer Overlay */
.mobile-drawer {
  position: fixed;
  inset: 72px 0 0 0;
  background-color: var(--color-surface);
  z-index: 90;
  padding: 32px 24px;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-medium), opacity var(--transition-medium), visibility var(--transition-medium);
  border-bottom: 1px solid var(--color-outline-variant);
}

.mobile-drawer.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.mobile-nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-on-surface);
  display: block;
}

/* ==========================================================================
   Buttons and Controls
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--text-label-caps);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 12px 22px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-sm {
  padding: 8px 14px;
  font-size: 10px;
}

.btn-block {
  width: 100%;
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  opacity: 1;
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-on-surface);
  border-color: var(--color-outline);
}

.btn-secondary:hover {
  background-color: var(--color-surface-container-high);
  border-color: var(--color-on-surface);
  opacity: 1;
}

.btn-whatsapp {
  background-color: #128C7E;
  color: #FFFFFF;
  border-color: #128C7E;
}

.btn-whatsapp:hover {
  background-color: #075E54;
  border-color: #075E54;
  opacity: 1;
}

/* Segmented Control (View Mode Switcher) */
.segmented-control {
  display: inline-flex;
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface-bright);
}

.segment-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 7px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: all var(--transition-fast);
}

.segment-btn.active {
  background-color: var(--color-on-surface);
  color: var(--color-surface-bright);
  font-weight: 500;
}

/* ==========================================================================
   Section Layout & Typography
   ========================================================================== */
.section {
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  border-bottom: 1px solid var(--color-hairline);
  position: relative;
}

.section-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label-caps);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-brass-plate-dark);
  margin-bottom: 12px;
}

.section-heading {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-on-surface);
  margin-bottom: 12px;
}

.section-subtext {
  font-family: var(--font-serif);
  font-size: var(--text-body-lead);
  line-height: 1.6;
  color: var(--color-on-surface-variant);
  max-width: 680px;
}

/* ==========================================================================
   Hero Section (Whispered Architectural Presence)
   ========================================================================== */
.hero-section {
  padding-top: clamp(80px, 12vw, 140px);
  padding-bottom: clamp(60px, 9vw, 110px);
  background: radial-gradient(circle at 50% 30%, rgba(214, 177, 135, 0.08) 0%, transparent 65%);
}

.hero-container {
  display: flex;
  justify-content: center;
}

.hero-center-stage {
  max-width: 860px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-label-whisper {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-brass-plate-dark);
  margin-bottom: 18px;
}

.hero-display-title {
  font-family: var(--font-display);
  font-size: var(--text-display-hero);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 0.92;
  color: var(--color-on-surface);
  margin-bottom: 20px;
}

.hero-artist-tagline {
  font-family: var(--font-mono);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-outline);
  margin-bottom: 24px;
}

.hero-whisper-lead {
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.65;
  color: var(--color-on-surface-variant);
  max-width: 680px;
  margin-bottom: 36px;
}

.hero-action-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ==========================================================================
   Curatorial Statement Section (Radical Restraint)
   ========================================================================== */
.statement-section {
  padding-top: clamp(60px, 8vw, 90px);
  padding-bottom: clamp(60px, 8vw, 90px);
  background-color: var(--color-surface);
}

.statement-container {
  display: flex;
  justify-content: center;
}

.statement-whisper-card {
  max-width: 780px;
  text-align: center;
  padding: 0 16px;
}

.curatorial-quote {
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.5vw, 32px);
  line-height: 1.5;
  font-style: italic;
  color: var(--color-on-surface);
  margin-bottom: 20px;
}

.statement-attribution {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brass-plate-dark);
}

/* ==========================================================================
   Collection Section & Visual-First 3-Part Presentation
   ========================================================================== */
.collection-section {
  padding-top: clamp(80px, 10vw, 120px);
  padding-bottom: clamp(80px, 10vw, 120px);
}

.collection-toolbar {
  margin-bottom: clamp(40px, 6vw, 64px);
  text-align: center;
}

.collection-toolbar .section-heading {
  margin-top: 4px;
  margin-bottom: 12px;
}

.collection-toolbar .section-subtext {
  margin-left: auto;
  margin-right: auto;
}

.gallery-collection {
  display: flex;
  flex-direction: column;
  gap: clamp(70px, 9vw, 120px);
}

/* --------------------------------------------------------------------------
   Artwork Card Container
   -------------------------------------------------------------------------- */
.artwork-card {
  position: relative;
  background-color: var(--color-surface-bright);
  border: 1px solid var(--color-hairline);
  padding: clamp(24px, 3.5vw, 44px);
  box-shadow: var(--shadow-resting);
  transition: box-shadow var(--transition-medium);
}

.artwork-card:hover {
  box-shadow: var(--shadow-hover);
}

/* --------------------------------------------------------------------------
   The 3-Part Visual Triptych: Full View | Tectonic Grain | On The Wall
   -------------------------------------------------------------------------- */
.mobile-triptych-nav {
  display: none;
}

.artwork-visual-triptych {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: stretch;
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.triptych-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

.panel-header-tag {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-outline);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-hairline);
}

.panel-step {
  font-weight: 700;
  color: var(--color-brass-plate-dark);
}

.panel-tag-label {
  color: var(--color-on-surface-variant);
}

/* Panel 1: Full View Stage */
.panel-full-view .artwork-frame-stage {
  width: 100%;
  position: relative;
}

/* Panel 2: Tectonic Macro Grain Stage */
.macro-preview-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 896 / 1200;
  background-color: #111317;
  border: 1px solid var(--color-outline-variant);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast);
}

.macro-preview-stage:hover {
  border-color: var(--color-brass-plate);
}

.macro-crop-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.macro-crop-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(2.6);
  filter: contrast(1.05);
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.macro-preview-stage:hover .macro-crop-image {
  transform: scale(2.95);
}

.macro-crop-reticle {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reticle-target-ring {
  width: 68px;
  height: 68px;
  border: 1px dashed rgba(197, 160, 89, 0.75);
  border-radius: 50% !important;
  box-shadow: 0 0 12px rgba(197, 160, 89, 0.3);
}

.reticle-axis-h {
  position: absolute;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.reticle-axis-v {
  position: absolute;
  height: 90px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.6), transparent);
}

.reticle-tag-chip {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(11, 15, 23, 0.88);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(197, 160, 89, 0.5);
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reticle-scale {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--color-brass-plate);
}

.reticle-material {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  color: #E2E8F0;
}

/* Panel 3: On The Wall In Situ Stage */
.insitu-thumbnail-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 896 / 1200;
  background-color: #0B0F17;
  border: 1px solid var(--color-outline-variant);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-fast);
}

.insitu-thumbnail-stage:hover {
  border-color: var(--color-brass-plate);
}

.insitu-thumb-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.insitu-thumb-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  filter: brightness(0.98);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.insitu-thumbnail-stage:hover .insitu-thumb-bg {
  transform: scale(1.04);
}

.insitu-thumb-mount {
  position: absolute;
  top: 25%;
  left: 32%;
  width: 36%;
  aspect-ratio: 896 / 1200;
  background: var(--oak-face-color, #D6B187);
  padding: 2.5px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.70), 0 2px 6px rgba(0, 0, 0, 0.50);
  transform: rotate(-1.5deg);
  transition: transform 0.4s ease;
}

.insitu-thumbnail-stage:hover .insitu-thumb-mount {
  transform: rotate(-1.5deg) translateY(-2px);
}

.insitu-thumb-box {
  width: 100%;
  height: 100%;
  background: #250E00;
  padding: 1.5px;
  overflow: hidden;
}

.insitu-thumb-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.insitu-thumb-datum {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(11, 15, 23, 0.88);
  border: 1px solid var(--color-brass-plate);
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.10em;
  color: var(--color-brass-plate);
}

/* Interaction Hint Footer on Panels */
.panel-interaction-hint {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(17, 19, 23, 0.92);
  backdrop-filter: blur(6px);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #F1F5F9;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(100%);
  transition: transform var(--transition-fast);
}

.macro-preview-stage:hover .panel-interaction-hint,
.insitu-thumbnail-stage:hover .panel-interaction-hint {
  transform: translateY(0);
}

.hint-symbol {
  color: var(--color-brass-plate);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   Museum Placard (Radical Architectural Restraint: Less is More)
   -------------------------------------------------------------------------- */
.artwork-museum-placard {
  display: grid;
  grid-template-columns: 1.6fr 1.4fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--color-hairline);
}

.placard-edition-code {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-brass-plate-dark);
}

.placard-title {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-on-surface);
  margin: 4px 0 6px 0;
}

.placard-medium {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--color-on-surface-variant);
}

.placard-geography {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-outline);
  margin-top: 4px;
}

.placard-geo-coords {
  color: var(--color-outline-variant);
  font-size: 10px;
}

.placard-specs {
  display: flex;
  gap: clamp(16px, 2vw, 28px);
}

.placard-spec-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.spec-dim-label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-outline);
}

.spec-dim-val {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-on-surface);
}

.spec-dim-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-outline);
}

.placard-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn-placard-reserve {
  padding: 11px 18px;
  font-size: 11px;
  letter-spacing: 0.10em;
}

.placard-actions-secondary {
  display: flex;
  gap: 6px;
}

.placard-actions-secondary .btn {
  flex: 1;
  padding: 7px 10px;
  font-size: 10px;
}

.btn-ghost {
  border: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  background: transparent;
}

.btn-ghost:hover {
  border-color: var(--color-on-surface);
  color: var(--color-on-surface);
  background: var(--color-surface-container-high);
}

/* --------------------------------------------------------------------------
   Geological Provenance Discrete Block
   -------------------------------------------------------------------------- */
.materials-curatorial-card {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 24px;
}

.materials-curatorial-text {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
  margin-top: 12px;
  margin-bottom: 24px;
}

.materials-actions {
  display: flex;
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Responsive Layout Adaptations
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .artwork-visual-triptych {
    grid-template-columns: 1fr 1fr;
  }
  .panel-full-view {
    grid-column: span 2;
    margin-bottom: 12px;
  }
  .artwork-museum-placard {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .mobile-triptych-nav {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    background: rgba(26, 28, 28, 0.04);
    padding: 4px;
    border: 1px solid var(--color-hairline);
  }

  .mobile-nav-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-on-surface-variant);
    background: transparent;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-tab .tab-num {
    font-weight: 700;
    color: var(--color-brass-plate-dark);
  }

  .mobile-nav-tab.active {
    background: #FFFFFF;
    color: #1A1C1C;
    border-color: var(--color-outline-variant);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }

  .artwork-visual-triptych {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding-bottom: 12px;
    scrollbar-width: none;
  }

  .artwork-visual-triptych::-webkit-scrollbar {
    display: none;
  }

  .triptych-panel {
    flex: 0 0 100%;
    min-width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .panel-full-view {
    grid-column: auto;
    margin-bottom: 0;
  }

  .artwork-museum-placard {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px 20px;
  }

  .placard-specs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .placard-actions-secondary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .placard-actions-secondary {
    grid-template-columns: 1fr;
  }

  .artwork-card {
    padding: 16px 14px 24px;
  }
}

/* ==========================================================================
   Materials Research Matrix Table
   ========================================================================== */
.materials-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface-bright);
}

.materials-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}

.materials-table th {
  background-color: var(--color-surface-container);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--color-on-surface);
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-outline-variant);
  border-right: 1px solid var(--color-hairline);
  white-space: nowrap;
}

.materials-table th:last-child {
  border-right: none;
}

.materials-table td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--color-hairline);
  border-right: 1px solid var(--color-hairline);
  vertical-align: top;
  line-height: 1.5;
}

.materials-table td:last-child {
  border-right: none;
}

.materials-table tr:last-child td {
  border-bottom: none;
}

.materials-table tr:hover td {
  background-color: var(--color-surface-container-low);
}

.tone-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.tone-dot {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Dossier Banner Card
   ========================================================================== */
.dossier-card {
  background: linear-gradient(135deg, #1A1C1C 0%, #0B0F17 100%);
  color: #F1F5F9;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--shadow-hover);
}

.dossier-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--color-brass-plate);
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 12px;
}

.dossier-title {
  font-family: var(--font-display);
  font-size: var(--text-headline-lg);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #FFFFFF;
  margin-bottom: 16px;
}

.dossier-text {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: 1.7;
  color: #CBD5E1;
  max-width: 680px;
  margin-bottom: 28px;
}

.dossier-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.dossier-actions .btn-secondary {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
}

.dossier-actions .btn-secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #FFFFFF;
}

/* ==========================================================================
   Colophon Footer
   ========================================================================== */
.gallery-footer {
  background-color: #111317;
  color: #F1F5F9;
  padding-top: clamp(60px, 8vw, 96px);
  padding-bottom: clamp(40px, 6vw, 64px);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #FFFFFF;
  margin-bottom: 14px;
}

.footer-bio {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  color: #94A3B8;
  margin-bottom: 16px;
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  color: var(--color-brass-plate);
  text-transform: uppercase;
}

.footer-subheading {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #FFFFFF;
  margin-bottom: 18px;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 13px;
  color: #94A3B8;
  transition: color var(--transition-fast);
}

.footer-links a:hover {
  color: #FFFFFF;
}

.footer-detail {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #64748B;
}

.footer-legal {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.6;
  color: #64748B;
  margin-bottom: 14px;
}

.footer-copy {
  font-family: var(--font-mono);
  font-size: 10px;
  color: #475569;
  letter-spacing: 0.06em;
}