/**
 * Crosby Carter Widget by Jag - Styles
 * Jag Journey LLC - https://jagjourney.ai/
 */

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

.gallery-96-container {
  position: relative;
  width: 100%;
}

/* ========================================
   CURTAINS
======================================== */

.gallery-96-curtain-container {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #1a0808;
}

.gallery-96-curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  background:
    linear-gradient(90deg,
      #4a0808 0%,
      #6b0a0a 15%,
      #8b1010 30%,
      #6b0a0a 50%,
      #8b1010 70%,
      #6b0a0a 85%,
      #4a0808 100%
    );
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

.gallery-96-curtain::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    rgba(0, 0, 0, 0.12) 4px,
    transparent 8px,
    rgba(255, 255, 255, 0.02) 12px,
    transparent 16px
  );
}

.gallery-96-curtain-left {
  left: 0;
}

.gallery-96-curtain-right {
  right: 0;
}

.gallery-96-curtain-content {
  position: relative;
  z-index: 10;
  text-align: center;
}

.gallery-96-curtain-title {
  font-family: 'Cinzel', serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
  margin: 0 0 0.5rem 0;
}

.gallery-96-curtain-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-style: italic;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.7);
  margin: 0 0 3rem 0;
}

.gallery-96-enter-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.9rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 1.2rem 3.5rem;
  cursor: pointer;
  transition: all 0.4s ease;
}

.gallery-96-enter-btn:hover {
  background: #fff;
  color: #8b0000;
  border-color: #fff;
}

/* ========================================
   ROTATE HINT (portrait mobile only)
   - .gallery-96-rotate-hint  = inside curtain content
   - .gallery-96-rotate-overlay = standalone, always available
======================================== */

.gallery-96-rotate-hint {
  display: none;
  margin-top: 2rem;
  opacity: 0;
  animation: gallery96FadeInOut 6s ease forwards;
}

.gallery-96-rotate-icon {
  display: block;
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.4rem;
  animation: gallery96RotatePhone 2s ease-in-out infinite;
}

.gallery-96-rotate-text {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
}

/* Standalone rotate overlay — fixed position, above gallery */
.gallery-96-rotate-overlay {
  display: none;
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  padding: 1.2rem 2.5rem;
  border-radius: 12px;
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: gallery96OverlayFade 12s ease forwards;
  cursor: pointer;
}

@keyframes gallery96RotatePhone {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(90deg); }
  75% { transform: rotate(0deg); }
}

@keyframes gallery96FadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}

/* Overlay version — slower fade, stays visible longer */
@keyframes gallery96OverlayFade {
  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
  8% { opacity: 1; transform: translateX(-50%) translateY(0); }
  83% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(20px); visibility: hidden; }
}

/* Show on portrait mobile + tablet (up to 1024px covers iPad, iPad Air, etc.) */
@media (max-width: 1024px) and (orientation: portrait) {
  .gallery-96-rotate-hint {
    display: block;
  }
  .gallery-96-rotate-overlay {
    display: block;
  }
}

/* Fallback: aspect-ratio check catches Chrome DevTools responsive mode */
@media (max-aspect-ratio: 3/4) and (max-width: 1024px) {
  .gallery-96-rotate-hint {
    display: block;
  }
  .gallery-96-rotate-overlay {
    display: block;
  }
}

/* Always hide in landscape — gallery looks great there */
@media (orientation: landscape) {
  .gallery-96-rotate-hint {
    display: none !important;
  }
  .gallery-96-rotate-overlay {
    display: none !important;
  }
}

@media (min-aspect-ratio: 4/3) {
  .gallery-96-rotate-overlay {
    display: none !important;
  }
}

/* ========================================
   GALLERY WRAPPER
======================================== */

.gallery-96-wrapper {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
  overflow: hidden;
}

.gallery-96-wrapper.visible {
  opacity: 1;
}

/* Re-enable pointer events only on interactive children — scroll passes through wrapper */
.gallery-96-wrapper.visible .gallery-96-hotspot,
.gallery-96-wrapper.visible .gallery-96-logo-plaque,
.gallery-96-wrapper.visible .gallery-96-placard {
  pointer-events: auto;
}

/* Background Image */
/* v1.7.6 (May 17 2026): full-viewport wrapper + cover-crop + bg shifted to
   `center 30%` so the image's frames-row aligns with the hotspots' saved
   top%-values. Without this shift, cover-crop on a wide viewport renders
   the frames lower than where the Elementor editor positioned the hotspots
   (the editor canvas is shorter aspect, so the same hotspots appeared on
   the frames there). transform-origin stays at 50% 75% so the walk-in zoom
   keeps the marble floor in frame as it scales up. See
   memory/feedback_crosby_aesthetic.md → "Hero gallery walk-in zoom". */
.gallery-96-bg {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1a0a0a;
  transform-origin: 50% 75%;
  will-change: transform;
}

/* Smoke Overlay — must track the bg so it doesn't desync */
.gallery-96-smoke-overlay {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  transform-origin: 50% 75%;
  will-change: transform;
  pointer-events: none;
}

/* Top Gallery Title */
.gallery-96-logo-plaque {
  position: fixed;
  top: clamp(72px, 10vh, 132px);
  bottom: auto;
  left: 50%;
  width: min(82vw, 1320px);
  max-width: calc(100vw - 2rem);
  transform: translateX(-50%) perspective(900px) rotateX(7deg);
  transform-origin: center;
  z-index: 60;
  padding: clamp(8px, 1vw, 14px) clamp(20px, 4vw, 72px);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(255, 225, 126, 0.26), rgba(255, 225, 126, 0) 62%),
    linear-gradient(180deg, rgba(255, 249, 215, 0.13), rgba(96, 67, 21, 0.08));
  border: 1px solid rgba(221, 176, 78, 0.44);
  border-radius: 2px;
  box-shadow:
    0 0 34px rgba(218, 169, 74, 0.18),
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  pointer-events: auto;
  transition: opacity 0.5s ease, filter 0.35s ease, transform 0.35s ease;
}

.gallery-96-logo-plaque.hidden {
  opacity: 0;
  pointer-events: none;
}

.gallery-96-logo-text {
  font-family: 'Cinzel', serif;
  font-size: clamp(0.82rem, 2.15vw, 2.05rem);
  font-weight: 700;
  letter-spacing: clamp(0.10em, 0.42vw, 0.24em);
  text-transform: uppercase;
  color: #d8ab55;
  -webkit-text-fill-color: #d8ab55;
  text-shadow:
    0 1px 0 rgba(255, 244, 186, 0.88),
    0 2px 0 rgba(95, 66, 18, 0.88),
    0 5px 10px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(255, 208, 99, 0.46);
  white-space: nowrap;
}

/* Hotspots container — must match .gallery-96-bg transform-origin so the
   artist hotspots stay locked to their painted frames during the walk-in zoom. */
.gallery-96-hotspots {
  position: absolute;
  inset: 0;
  transform-origin: 50% 75%;
  will-change: transform;
}

/* ========================================
   HOTSPOTS
======================================== */

.gallery-96-hotspot {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-96-hotspot:hover {
  transform: scale(1.02);
}

.gallery-96-hotspot:hover .gallery-96-hotspot-label {
  opacity: 1;
  transform: translateX(-50%) translateY(calc(100% + 6px));
}

/* Label — anchored directly below hotspot */
.gallery-96-hotspot-label {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + 6px));
  background: rgba(0, 0, 0, 0.85);
  padding: 6px 10px;
  text-align: center;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.2);
  pointer-events: none;
}

/* Always-visible name labels below each piece — GOLD-FRAMED with BLACK lettering
   per Crosby's May 4 meeting ask: "the names to be gold and black" + "make the
   box like a little bit bigger so there's a little bit more gold space". */
.gallery-96-label-always {
  opacity: 0.95;
  transform: translateX(-50%) translateY(calc(100% + 2px));
  /* Brushed gold plaque (matches the placard / back-wall logo palette) */
  background: linear-gradient(135deg, #c4a265 0%, #d4b87a 50%, #a88b4a 100%);
  /* Thin dark-gold frame around the plaque */
  border: 1px solid rgba(40, 24, 8, 0.45);
  border-radius: 2px;
  padding: 5px 12px;
  /* Subtle drop shadow + inner-bevel highlights so it reads as a real placard */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.gallery-96-hotspot:hover .gallery-96-label-always {
  opacity: 1;
  /* Slightly brighter gold + a touch larger shadow on hover */
  background: linear-gradient(135deg, #d4b378 0%, #e6c98a 50%, #b89a5a 100%);
  border-color: rgba(40, 24, 8, 0.65);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

/* Black lettering on the gold plaque (label-always wraps the artist-name span) */
.gallery-96-label-always .gallery-96-artist-name {
  color: #1a0a0a;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.gallery-96-label-always .gallery-96-artist-title {
  color: rgba(26, 10, 10, 0.78);
}

/* Per Crosby (May 5 evening): the gold nameplates and hover overlays should
   show ONLY the artist's name. No subtitle ("Salon Owner" / "Educator" /
   etc.) and no "Enter Room" CTA. Hide both globally. */
.gallery-96-artist-title,
.gallery-96-hover-preview-cta,
.gallery-96-placard-title,
.gallery-96-placard-desc {
  display: none !important;
}

.gallery-96-hotspot-label-center {
  bottom: auto;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

.gallery-96-hotspot-label-center.gallery-96-label-always {
  opacity: 0.8;
  transform: translateX(-50%) translateY(-50%);
}

.gallery-96-hotspot:hover .gallery-96-hotspot-label-center {
  transform: translateX(-50%) translateY(-50%);
}

.gallery-96-artist-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #fff;
  text-transform: uppercase;
}

.gallery-96-artist-title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  margin-top: 2px;
}

/* Hover effects */
.gallery-96-hotspot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.3s ease;
}

.gallery-96-hotspot:hover::before {
  background: rgba(255, 255, 255, 0.08);
}

.gallery-96-hotspot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.gallery-96-hotspot:hover::after {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.2);
}

/* =================================================================
   HOMEPAGE HOVER-PREVIEW OVERLAY — REMOVED v1.7.0 (May 10 2026)
   Per Crosby May 7: "I want you to go to the room", not "show popup".
   The markup that fed these rules was removed in widgets/gallery-widget.php.
   The rules below are now dead code with no DOM to target — kept here as
   a blame trail. The kill-switch immediately below ensures any stale
   cached markup (older browser session, CDN, etc.) ALSO renders invisibly.
   ================================================================= */

/* Kill-switch: hide any lingering .gallery-96-hover-preview from cached
   v1.6.x and earlier HTML. Safe to remove once we're confident no caches
   are serving the old markup (~2-4 weeks post v1.7.0 deploy). */
.gallery-96-hover-preview { display: none !important; }

/* === Original v1.4.8 rules (DEAD — no markup left to match) === */

.gallery-96-hover-preview {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 6%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
  /* Sit above the frame photo and frame overlay, below the always-visible label */
  z-index: 3;
  /* Gold-tinted spotlight wash from bottom up — matches Crosby gold palette
     used in placards (#c4a265 → #d4b87a → #a88b4a) */
  background: linear-gradient(
    to top,
    rgba(196, 162, 101, 0.78) 0%,
    rgba(212, 184, 122, 0.45) 28%,
    rgba(168, 139, 74, 0.18) 55%,
    rgba(0, 0, 0, 0) 80%
  );
}

.gallery-96-hover-preview-inner {
  text-align: center;
  padding: 0 0 calc(6% + 4px);
  /* Subtle drop shadow for legibility against varied artist photos */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.55));
}

.gallery-96-hover-preview-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #1a0a0a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.gallery-96-hover-preview-cta {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 10px;
  font-style: italic;
  letter-spacing: 0.12em;
  color: #2a1a08;
  margin-top: 3px;
  opacity: 0.92;
}

/* Activate ONLY on real hover-capable pointers (desktop mouse / trackpad).
   Touch devices (hover: none) skip this rule entirely so the overlay never
   appears on tap. Also excludes Elementor editor previews and the contact
   hotspot (mailto, not a room). */
@media (hover: hover) and (pointer: fine) {
  .gallery-96-hotspot:not(.gallery-96-hotspot-preview):not(.gallery-96-hotspot-contact):hover .gallery-96-hover-preview,
  .gallery-96-hotspot:not(.gallery-96-hotspot-preview):not(.gallery-96-hotspot-contact):focus-visible .gallery-96-hover-preview {
    opacity: 1;
  }
}

/* Reduced motion: keep the overlay but drop the fade transition */
@media (prefers-reduced-motion: reduce) {
  .gallery-96-hover-preview {
    transition: none;
  }
}

/* Smaller type at narrow breakpoints so the CTA still fits inside the frame.
   Belt-and-braces — most narrow viewports already have (hover: none) so the
   rules above never fire, but this covers narrow desktop / Surface Studio. */
@media (max-width: 768px) {
  .gallery-96-hover-preview-name { font-size: 11px; }
  .gallery-96-hover-preview-cta { font-size: 9px; }
}

@media (max-width: 480px) {
  .gallery-96-hover-preview-name { font-size: 10px; letter-spacing: 0.12em; }
  .gallery-96-hover-preview-cta { font-size: 8px; }
}

/* ========================================
   MUSEUM PLACARDS
   Small text labels beside each frame.
   Hover/tap to zoom in and read, then
   they shrink back (lose focus).
======================================== */

.gallery-96-placard {
  position: absolute;
  pointer-events: auto;
  z-index: 10;
}

/* =================================================================
   ARTIST NAMEPLATES (v1.4.6 — May 4 2026 meeting)
   Gold plaque + black lettering, bigger box for readability.
   Crosby's quote: "the names to be gold and black" + "make the box
   like a little bit bigger so there's a little bit more gold space"
   ================================================================= */

/* Position the placard to the right of left-wall frames */
.gallery-96-placard-right .gallery-96-placard-inner {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) scale(0.62);
  transform-origin: left center;
  width: 148px;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.4s ease,
              box-shadow 0.4s ease;
}

/* Position the placard to the left of right-wall frames */
.gallery-96-placard-left .gallery-96-placard-inner {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) scale(0.62);
  transform-origin: right center;
  width: 148px;
  transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
              opacity 0.4s ease,
              box-shadow 0.4s ease;
}

.gallery-96-placard-inner {
  /* Gold plaque background (brushed-gold gradient) — matches the back-wall logo plaque palette */
  background: linear-gradient(135deg, #c4a265 0%, #d4b87a 50%, #a88b4a 100%);
  border: 1px solid rgba(40, 24, 8, 0.35);
  /* Slightly bigger box — extra gold space around the text per Crosby ask */
  padding: 14px 18px;
  cursor: pointer;
  border-radius: 2px;
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.gallery-96-placard-name {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Black lettering on gold per May 4 meeting */
  color: #1a0a0a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  margin-bottom: 3px;
}

.gallery-96-placard-title {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 8px;
  font-style: italic;
  color: rgba(26, 10, 10, 0.78);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}

.gallery-96-placard-desc {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 8px;
  line-height: 1.55;
  color: rgba(26, 10, 10, 0.65);
  letter-spacing: 0.02em;
}

/* Hover/focus state — zoom in to read */
.gallery-96-placard:hover .gallery-96-placard-inner,
.gallery-96-placard.placard-active .gallery-96-placard-inner {
  transform: translateY(-50%) scale(1);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(212, 184, 122, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.gallery-96-placard:hover .gallery-96-placard-name,
.gallery-96-placard.placard-active .gallery-96-placard-name {
  color: #000;
}

.gallery-96-placard:hover .gallery-96-placard-desc,
.gallery-96-placard.placard-active .gallery-96-placard-desc {
  color: rgba(26, 10, 10, 0.88);
}

/* Nameplates removed — will revisit later */

/* ========================================
   SCROLL HINT
======================================== */

.gallery-96-scroll-hint {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.gallery-96-scroll-hint.visible {
  opacity: 1;
}

.gallery-96-hint-text {
  display: block;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0.5rem;
}

.gallery-96-hint-arrow {
  display: block;
  font-size: 1.5rem;
  color: #fff;
  animation: gallery96Bounce 2s ease-in-out infinite;
}

@keyframes gallery96Bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* ========================================
   SCROLL SPACER
======================================== */

.gallery-96-scroll-spacer {
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* ========================================
   EDITOR PREVIEW
======================================== */

.gallery-96-editor-preview .gallery-96-wrapper {
  position: relative;
  height: 500px;
}

.gallery-96-editor-preview .gallery-96-curtain-container {
  position: absolute;
  height: 500px;
}

.gallery-96-editor-preview .gallery-96-scroll-spacer {
  display: none;
}

.gallery-96-editor-preview .gallery-96-logo-plaque {
  position: absolute;
}

.gallery-96-hotspot-preview {
  /* Editor-only dashed outline so the hotspot rectangle is visible while
     the user calibrates positions. The white tint was washing out any
     frame_overlay_image; keep only the dashed border. */
  background: transparent;
  border: 2px dashed rgba(255, 255, 255, 0.5);
}

/* Frame overlay images (the per-artist photo that replaces the painted
   frame's content) should always sit ABOVE the hotspot's editor-mode
   tint and any debugging UI. */
.gallery-96-frame-overlay {
  z-index: 2;
}

.gallery-96-hotspot-preview .gallery-96-hotspot-label {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(calc(100% + 6px)) !important;
}

/* ========================================
   RESPONSIVE
======================================== */

/* ========================================
   TABLET (portrait)
======================================== */

@media (max-width: 768px) {
  .gallery-96-curtain-title {
    letter-spacing: 0.3em;
  }

  .gallery-96-enter-btn {
    padding: 1rem 2rem;
    font-size: 0.8rem;
  }

  .gallery-96-hotspot-label {
    padding: 5px 8px;
  }

  .gallery-96-artist-name {
    font-size: 9px;
  }

  .gallery-96-artist-title {
    font-size: 8px;
  }

  .gallery-96-logo-plaque {
    padding: 8px 18px;
  }

  .gallery-96-logo-text {
    letter-spacing: 0.12em;
  }

  /* Gold nameplates: shrink so they don't crop on tablet portrait (v1.4.6) */
  .gallery-96-placard-right .gallery-96-placard-inner,
  .gallery-96-placard-left .gallery-96-placard-inner {
    width: 124px;
    transform: translateY(-50%) scale(0.55);
  }
  .gallery-96-placard-inner {
    padding: 11px 14px;
  }
}

/* ========================================
   MOBILE (portrait) — square gallery
======================================== */

@media (max-width: 480px) {
  .gallery-96-curtain-title {
    letter-spacing: 0.2em;
  }

  /* Force gallery to square aspect matching the 1:1 image */
  .gallery-96-wrapper {
    height: 100vw !important;
    top: calc((100vh - 100vw) / 2) !important;
    bottom: auto !important;
  }

  .gallery-96-bg {
    background-size: 100% 100%;
  }

  .gallery-96-hotspot-label {
    padding: 4px 6px;
    white-space: nowrap;
  }

  .gallery-96-artist-name {
    font-size: 8px;
    letter-spacing: 0.08em;
  }

  .gallery-96-artist-title {
    font-size: 7px;
    margin-top: 1px;
  }

  .gallery-96-scroll-hint {
    bottom: 15px;
  }

  .gallery-96-hint-text {
    font-size: 0.6rem;
  }

  /* Gold nameplates: tighter on phone portrait so they don't crop the 1:1 frame (v1.4.6) */
  .gallery-96-placard-right .gallery-96-placard-inner,
  .gallery-96-placard-left .gallery-96-placard-inner {
    width: 104px;
    transform: translateY(-50%) scale(0.5);
  }
  .gallery-96-placard-inner {
    padding: 9px 11px;
  }
  .gallery-96-placard-name {
    font-size: 9px;
    letter-spacing: 0.14em;
  }
  .gallery-96-placard-title,
  .gallery-96-placard-desc {
    font-size: 7px;
  }
}

/* ========================================
   TOUCH: tap-to-reveal labels
======================================== */

@media (hover: none) and (pointer: coarse) {
  .gallery-96-hotspot .gallery-96-hotspot-label {
    transition: opacity 0.3s ease;
  }

  .gallery-96-hotspot.tapped .gallery-96-hotspot-label {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(calc(100% + 6px)) !important;
  }
}

/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {
  .gallery-96-hint-arrow {
    animation: none;
  }

  .gallery-96-wrapper,
  .gallery-96-hotspot,
  .gallery-96-hotspot-label,
  .gallery-96-bg {
    transition: none;
  }
}

/* =================================================================
   CLICKABLE PLAQUE + BIO POP-UP (v1.4.1)
   Back-wall "Stylists & Innovators Gallery" hover/click → modal
   ================================================================= */

button.gallery-96-logo-plaque {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    text-align: center;
}

.gallery-96-logo-plaque.is-clickable {
    cursor: pointer;
}

.gallery-96-logo-plaque.is-clickable:hover,
.gallery-96-logo-plaque.is-clickable:focus-visible {
    transform: translateX(-50%) perspective(900px) rotateX(7deg) scale(1.02);
    filter: brightness(1.08) drop-shadow(0 0 20px rgba(212, 160, 84, 0.32));
}

.gallery-96-logo-plaque-hint {
    display: none;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 8px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(212, 160, 84, 0.6);
    margin-top: 6px;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.gallery-96-logo-plaque.is-clickable:hover .gallery-96-logo-plaque-hint,
.gallery-96-logo-plaque.is-clickable:focus-visible .gallery-96-logo-plaque-hint {
    opacity: 0;
}

/* Modal */
.gallery-96-plaque-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.gallery-96-plaque-modal.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease, visibility 0s linear 0s;
}

.gallery-96-plaque-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 8, 14, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    cursor: pointer;
}

.gallery-96-plaque-shell {
    position: relative;
    width: min(92vw, 700px);
    max-height: 88vh;
    background: linear-gradient(180deg, rgba(22, 16, 12, 0.98) 0%, rgba(12, 8, 6, 0.99) 100%);
    border: 1px solid rgba(212, 160, 84, 0.3);
    border-radius: 3px;
    overflow-y: auto;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.7),
        0 0 80px rgba(212, 160, 84, 0.08);
    transform: translateY(20px) scale(0.97);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-96-plaque-modal.is-open .gallery-96-plaque-shell {
    transform: translateY(0) scale(1);
}

.gallery-96-plaque-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #d4a054;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    transition: transform 0.25s ease, background 0.25s ease;
}

.gallery-96-plaque-close:hover {
    transform: rotate(90deg);
    background: rgba(255, 255, 255, 0.12);
}

.gallery-96-plaque-content {
    padding: 52px 46px 40px;
    text-align: center;
    color: #fff;
}

.gallery-96-plaque-eyebrow {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: #d4a054;
    margin-bottom: 18px;
}

.gallery-96-plaque-heading {
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 26px;
    line-height: 1.2;
}

.gallery-96-plaque-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 28px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.gallery-96-plaque-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.gallery-96-plaque-video-poster {
    position: absolute;
    inset: 0;
    background: #111 center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.gallery-96-plaque-video-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

.gallery-96-plaque-video-play {
    position: relative;
    z-index: 2;
    width: 72px;
    height: 72px;
    background: rgba(212, 160, 84, 0.95);
    border: 0;
    border-radius: 50%;
    color: #0a0804;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.gallery-96-plaque-video-play:hover {
    transform: scale(1.08);
    background: #e5b565;
}

.gallery-96-plaque-body {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 28px;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

.gallery-96-plaque-body p + p {
    margin-top: 14px;
}

.gallery-96-plaque-body em {
    color: #d4a054;
}

.gallery-96-plaque-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: transparent;
    border: 1px solid rgba(212, 160, 84, 0.5);
    border-radius: 2px;
    color: #d4a054;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.gallery-96-plaque-contact-btn:hover {
    background: #d4a054;
    color: #0a0804;
    border-color: #d4a054;
    transform: translateY(-2px);
}

@media (max-width: 640px) {
    .gallery-96-plaque-content {
        padding: 48px 24px 32px;
    }
    .gallery-96-plaque-video-wrap {
        margin-bottom: 22px;
    }
}

body.gallery-96-plaque-open {
    overflow: hidden;
}

/* =================================================================
   HEADER CATEGORY NAVIGATION (v1.4.2 — April 27 meeting)
   Top-of-page filter buttons: Salon Owner / Stylist / Product Line / Ambassador
   ================================================================= */

.gallery-96-header-nav {
    width: 100%;
    background: var(--nav-bg, rgba(0, 0, 0, 0.7));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.gallery-96-header-nav--top {
    position: relative;
}

.gallery-96-header-nav--sticky {
    position: sticky;
    top: 0;
}

.gallery-96-header-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 24px;
}

.gallery-96-header-nav-list li {
    margin: 0;
}

.gallery-96-header-nav-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--nav-text, #ffffff);
    font-family: 'Cinzel', Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 8px 18px;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
    white-space: nowrap;
}

.gallery-96-header-nav-btn:hover {
    border-color: var(--nav-active, #d4a054);
    color: var(--nav-active, #d4a054);
    transform: translateY(-1px);
}

.gallery-96-header-nav-btn.is-active {
    background: var(--nav-active, #d4a054);
    border-color: var(--nav-active, #d4a054);
    color: #0a0804;
}

/* Hide artist hotspots/placards filtered out by category */
.gallery-96-hotspot.is-filtered-out,
.gallery-96-placard.is-filtered-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.gallery-96-hotspot.is-filtered-in,
.gallery-96-placard.is-filtered-in {
    opacity: 1;
    transition: opacity 0.4s ease;
}

@media (max-width: 640px) {
    .gallery-96-header-nav {
        padding: 10px 12px;
    }
    .gallery-96-header-nav-list {
        gap: 6px 12px;
    }
    .gallery-96-header-nav-btn {
        font-size: 9px;
        letter-spacing: 0.16em;
        padding: 6px 12px;
    }
}

/* =================================================================
   FRAME STYLE: brass_acrylic — Acrylic Box w/ Interior Lighting
   May 4 2026 meeting: Tracey's Vogue cover display.
   Implementation per docs/5-5-2026/tracey-acrylic-box-design-needs.md
   ================================================================= */

.gallery-96-hotspot[data-frame-style="brass_acrylic"],
.gallery-96-hotspot-preview[data-frame-style="brass_acrylic"] {
    border: 2px solid rgba(196, 162, 101, 0.55);
    border-radius: 4px;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 224, 168, 0.28) 0%,
        rgba(255, 200, 140, 0.12) 45%,
        rgba(20, 14, 8, 0.4) 100%
    );
    box-shadow:
        0 8px 28px rgba(0, 0, 0, 0.55),
        0 0 18px rgba(212, 172, 102, 0.22),
        inset 1px 1px 0 rgba(255, 240, 210, 0.35),
        inset -1px -2px 4px rgba(0, 0, 0, 0.35),
        inset 0 0 32px rgba(255, 220, 160, 0.18);
    padding: 4%;
    overflow: hidden;
    isolation: isolate;
}

.gallery-96-hotspot[data-frame-style="brass_acrylic"]::before,
.gallery-96-hotspot-preview[data-frame-style="brass_acrylic"]::before {
    content: '';
    position: absolute;
    inset: 8% 12%;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 230, 180, 0.55) 0%,
        rgba(255, 200, 140, 0.18) 55%,
        rgba(255, 200, 140, 0) 80%
    );
    filter: blur(14px);
    z-index: 0;
    pointer-events: none;
    animation: g96-acrylic-breathe 5.5s ease-in-out infinite;
}

@keyframes g96-acrylic-breathe {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

.gallery-96-hotspot[data-frame-style="brass_acrylic"] > .gallery-96-frame-overlay,
.gallery-96-hotspot[data-frame-style="brass_acrylic"] > .gallery-96-frame-photo,
.gallery-96-hotspot-preview[data-frame-style="brass_acrylic"] > .gallery-96-frame-overlay,
.gallery-96-hotspot-preview[data-frame-style="brass_acrylic"] > .gallery-96-frame-photo {
    position: relative;
    z-index: 1;
    box-shadow:
        0 0 0 1px rgba(255, 240, 210, 0.18),
        0 6px 18px rgba(0, 0, 0, 0.45);
    border-radius: 2px;
}

.gallery-96-hotspot[data-frame-style="brass_acrylic"]::after,
.gallery-96-hotspot-preview[data-frame-style="brass_acrylic"]::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 28%;
    background: linear-gradient(
        to bottom,
        rgba(255, 240, 210, 0.18) 0%,
        rgba(255, 240, 210, 0) 100%
    );
    z-index: 2;
    pointer-events: none;
    border-radius: 4px 4px 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .gallery-96-hotspot[data-frame-style="brass_acrylic"]::before,
    .gallery-96-hotspot-preview[data-frame-style="brass_acrylic"]::before {
        animation: none;
        opacity: 0.85;
    }
}

/* =================================================================
   FRAME STYLE: ipad_frame — iPad / Tablet (sleek black bezel)
   May 4 2026 meeting: Bianca Hillier nameplate frame.
   "Bianca = an iPad-style still frame above Jeremy's"
   ================================================================= */

.gallery-96-hotspot[data-frame-style="ipad_frame"],
.gallery-96-hotspot-preview[data-frame-style="ipad_frame"] {
    /* Sleek matte black aluminum bezel */
    background: linear-gradient(135deg, #1c1c1e 0%, #2c2c2e 50%, #1c1c1e 100%);
    border-radius: 14px;
    padding: 8% 6%;
    box-shadow:
        /* Outer drop — tablet sits in space */
        0 6px 20px rgba(0, 0, 0, 0.5),
        /* Inner top specular */
        inset 1px 1px 0 rgba(255, 255, 255, 0.12),
        /* Inner bottom shadow — fakes thin bezel depth */
        inset -1px -1px 0 rgba(0, 0, 0, 0.4),
        /* Subtle outer rim glow */
        0 0 12px rgba(180, 200, 220, 0.08);
    overflow: hidden;
    isolation: isolate;
}

/* The screen content (artist photo) sits inside the bezel with rounded corners */
.gallery-96-hotspot[data-frame-style="ipad_frame"] > .gallery-96-frame-photo,
.gallery-96-hotspot[data-frame-style="ipad_frame"] > .gallery-96-frame-overlay,
.gallery-96-hotspot-preview[data-frame-style="ipad_frame"] > .gallery-96-frame-photo,
.gallery-96-hotspot-preview[data-frame-style="ipad_frame"] > .gallery-96-frame-overlay {
    border-radius: 4px;
    /* Subtle screen reflection — top-down highlight */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    z-index: 1;
    position: relative;
}

/* iPad home-button indicator dot at bottom center (small, optional) */
.gallery-96-hotspot[data-frame-style="ipad_frame"]::after,
.gallery-96-hotspot-preview[data-frame-style="ipad_frame"]::after {
    content: '';
    position: absolute;
    bottom: 2.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 18%;
    height: 2px;
    background: rgba(120, 120, 120, 0.4);
    border-radius: 1px;
    z-index: 2;
    pointer-events: none;
}

/* Subtle screen-on glow — the screen looks alive */
.gallery-96-hotspot[data-frame-style="ipad_frame"]::before,
.gallery-96-hotspot-preview[data-frame-style="ipad_frame"]::before {
    content: '';
    position: absolute;
    inset: 8% 6%;
    border-radius: 4px;
    background: radial-gradient(
        ellipse at top,
        rgba(180, 220, 255, 0.05) 0%,
        rgba(180, 220, 255, 0) 60%
    );
    z-index: 0;
    pointer-events: none;
}

/* ============================================================
   2026-05-06 Sharon punch-list (live meeting fixes)
   ------------------------------------------------------------
   Items 1, 1b, 2, 6 from Sharon's Slack list. CSS-only.
   Items 3, 4, 5 require direction and are NOT addressed here.
   These rules use !important to win over Elementor's auto-
   generated per-page CSS (post-22.css) which has higher
   selector specificity.
   ============================================================ */

/* #1 — Name plates must be GOLD background with BLACK lettering.
   Elementor's post-22.css was rendering them with rgba(0,0,0,0.85)
   which won by specificity. Force the brushed-gold palette here. */
.gallery-96-label-always {
    background: linear-gradient(135deg, #c4a265 0%, #d4b87a 50%, #a88b4a 100%) !important;
    background-color: #c4a265 !important;
    border: 1px solid rgba(40, 24, 8, 0.45) !important;
}
.gallery-96-label-always .gallery-96-artist-name {
    color: #1a0a0a !important;
    -webkit-text-fill-color: #1a0a0a !important;
}
.gallery-96-hotspot:hover .gallery-96-label-always {
    background: linear-gradient(135deg, #d4b378 0%, #e6c98a 50%, #b89a5a 100%) !important;
}

/* #1b — Philip B (and any artist) was showing TWO name tags on hover:
   the always-visible plaque PLUS the hover-preview's floating name.
   Hide the floating name globally — the always-plaque is the canonical
   display. The hover-preview overlay still fades in (image cue) but
   without a duplicate text label. */
.gallery-96-hover-preview-name {
    display: none !important;
}

/* #2 — Tracey's Vogue cover (brass_acrylic frame style) is portrait
   (885×1077, aspect 0.82) rendered into a slightly-landscape container
   (aspect ~1.10). object-fit:cover was cropping the top "VOGUE" header
   and bottom credits. Switch to contain so the full magazine cover is
   visible without cropping. Scoped to brass_acrylic only — other frames
   keep their fill behavior. */
.gallery-96-hotspot[data-frame-style="brass_acrylic"] .gallery-96-frame-overlay,
.gallery-96-hotspot-preview[data-frame-style="brass_acrylic"] .gallery-96-frame-overlay {
    object-fit: contain !important;
    object-position: center !important;
}

/* === Universal plaque safety: lift z-index so other gallery layers
   (bg image, reflections, etc) cannot occlude the always-visible
   nameplates. Pointer-events explicit so clicks always register. === */
.gallery-96-label-always {
    z-index: 50 !important;
    pointer-events: auto !important;
}

/* === Sharon item #7 (Tracey plaque): the plaque is JS-hoisted out of
   Tracey's brass_acrylic hotspot at page load (see hoistTraceyPlaque
   in gallery.js). Once hoisted it lives as a sibling of the hotspots,
   free of the matrix3d 3D inheritance, so it actually renders visibly.
   The base .gallery-96-label-always styling already gives it the same
   gold + black look as the other 6 artist plaques. This rule just
   ensures the hoisted instance pops above the baked-mode background. */
.gallery-96-tracey-plaque-hoisted {
    z-index: 50 !important;
    pointer-events: auto !important;
}

/* May 19 title direction: the gallery title is the top .gallery-96-logo-plaque.
   The old bottom-banner hoist is retired so the modal heading stays in the modal
   and no separate floor plaque appears on the homepage. */
.gallery-96-bottom-banner {
    display: none !important;
}

@media (max-width: 600px) {
    .gallery-96-logo-plaque {
        top: clamp(54px, 8vh, 86px);
        width: min(92vw, 720px);
        padding: 7px 10px;
    }

    .gallery-96-logo-text {
        font-size: clamp(0.58rem, 2.4vw, 0.85rem);
        letter-spacing: 0.08em;
    }
}

/* Keep the top title gold in late-loading Elementor/widget CSS order. */
.gallery-96-logo-text {
    color: #d8ab55 !important;
    -webkit-text-fill-color: #d8ab55 !important;
}

/* Homepage contact/title plaque. Keep this late in the file so Elementor's
   page CSS cannot turn the contact hotspot back into an invisible outline. */
.gallery-96-wrapper.visible .gallery-96-hotspots a.gallery-96-hotspot.gallery-96-hotspot-contact {
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1.1vw !important;
    background: linear-gradient(135deg, #c4a265 0%, #d4b87a 50%, #a88b4a 100%) !important;
    background-color: #c4a265 !important;
    border: 1px solid rgba(40, 24, 8, 0.52) !important;
    border-radius: 2px !important;
    box-shadow:
        0 2px 10px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
    overflow: visible !important;
}

.gallery-96-wrapper.visible .gallery-96-hotspots a.gallery-96-hotspot.gallery-96-hotspot-contact::before {
    content: 'STYLISTS & INNOVATORS GALLERY' !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    font-family: 'Cinzel', serif !important;
    font-size: clamp(0.44rem, 0.9vw, 1rem) !important;
    font-weight: 700 !important;
    letter-spacing: clamp(0.08em, 0.2vw, 0.15em) !important;
    line-height: 1 !important;
    color: #1a0a0a !important;
    -webkit-text-fill-color: #1a0a0a !important;
    text-align: center !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

.gallery-96-wrapper.visible .gallery-96-hotspots a.gallery-96-hotspot.gallery-96-hotspot-contact::after {
    content: '' !important;
    position: absolute !important;
    inset: -3px !important;
    border: 1px solid rgba(221, 176, 78, 0.36) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 16px rgba(218, 169, 74, 0.16) !important;
}

.gallery-96-wrapper.visible .gallery-96-hotspots a.gallery-96-hotspot.gallery-96-hotspot-contact:hover,
.gallery-96-wrapper.visible .gallery-96-hotspots a.gallery-96-hotspot.gallery-96-hotspot-contact:focus-visible {
    background: linear-gradient(135deg, #d4b378 0%, #e6c98a 50%, #b89a5a 100%) !important;
}

/* Mobile portrait: the hallway is a preview, not the full walkthrough.
   Keep the art visible, hide crowded name/title plaques, and ask users to
   rotate for the polished interactive experience. */
@media (hover: none) and (pointer: coarse) and (orientation: portrait),
       (max-width: 600px) and (orientation: portrait) {
    .gallery-96-wrapper.visible .gallery-96-hotspots .gallery-96-hotspot-label,
    .gallery-96-wrapper.visible .gallery-96-hotspots .gallery-96-label-always,
    .gallery-96-wrapper.visible .gallery-96-hotspots .gallery-96-tracey-plaque-hoisted,
    .gallery-96-wrapper.visible .gallery-96-hotspots a.gallery-96-hotspot.gallery-96-hotspot-contact {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .gallery-96-wrapper.visible .gallery-96-scroll-hint {
        display: none !important;
    }

    .gallery-96-rotate-overlay {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.55rem;
        left: 50%;
        right: auto;
        bottom: max(22px, env(safe-area-inset-bottom));
        width: min(82vw, 320px);
        min-height: 132px;
        padding: 18px 20px;
        transform: translateX(-50%) !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        background: rgba(3, 3, 3, 0.88);
        border: 1px solid rgba(212, 160, 84, 0.36);
        border-radius: 8px;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 10020;
    }

    .gallery-96-rotate-overlay .gallery-96-rotate-icon {
        margin: 0;
        font-size: clamp(2rem, 10vw, 2.8rem);
        line-height: 1;
        color: rgba(255, 255, 255, 0.88);
    }

    .gallery-96-rotate-overlay .gallery-96-rotate-text {
        max-width: 13rem;
        font-family: 'Cormorant Garamond', Georgia, serif;
        font-size: clamp(0.94rem, 4.1vw, 1.12rem);
        line-height: 1.3;
        letter-spacing: 0.14em;
        color: rgba(255, 255, 255, 0.78);
        text-align: center;
    }
}

/* Phone landscape: keep nameplates visible, but use a compact treatment so
   adjacent artists do not collide in the short 16:9/19.5:9 viewport. */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 600px),
       (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
    .gallery-96-wrapper.visible .gallery-96-hotspots .gallery-96-label-always {
        padding: 3px 6px !important;
        transform: translateX(-50%) translateY(calc(100% + 1px)) !important;
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.42),
            inset 0 1px 0 rgba(255, 255, 255, 0.26),
            inset 0 -1px 0 rgba(0, 0, 0, 0.16) !important;
    }

    .gallery-96-wrapper.visible .gallery-96-hotspots .gallery-96-label-always .gallery-96-artist-name {
        font-size: clamp(7px, 0.86vw, 8px) !important;
        letter-spacing: 0.055em !important;
        line-height: 1 !important;
    }

    .gallery-96-wrapper.visible .gallery-96-hotspots .gallery-96-tracey-plaque-hoisted {
        transform: translateX(-50%) translateY(4px) !important;
    }
}