:root {
  --black: #080706;
  --ink: #0d0c0b;
  --charcoal: #151311;
  --ivory: #eadcc1;
  --muted: #b6a78d;
  --gold: #b88b46;
  --bright-gold: #d4aa64;
  --antique-gold: #c6a15b;
  --burgundy: #321015;
  --deep-burgundy: #1f0a0d;
  --line: rgba(198, 161, 91, 0.42);
  --ease-cinematic: cubic-bezier(0.42, 0, 0.18, 1);
  --gallery-light-ease: cubic-bezier(0.42, 0, 0.58, 1);
}

/* v3.1 — matched cinematic room dissolve and strictly center-out mark lighting. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .phase-opening .room-focus-stage,
  .phase-closing .room-focus-stage,
  .phase-opening .focused-room-link img,
  .phase-closing .focused-room-link img,
  .phase-opening .studio-resting-scene,
  .phase-closing .studio-resting-scene {
    animation-duration: 1450ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .phase-opening .room-focus-stage {
    animation-name: gallery-dissolve-in;
  }

  .phase-closing .room-focus-stage {
    animation-name: gallery-dissolve-in;
    animation-direction: reverse;
  }

  .phase-opening .focused-room-link img {
    animation-name: gallery-resolve;
  }

  .phase-closing .focused-room-link img {
    animation-name: gallery-resolve;
    animation-direction: reverse;
  }

  .phase-opening .studio-resting-scene {
    animation-name: studio-fade-to-black;
  }

  .phase-closing .studio-resting-scene {
    animation-name: studio-fade-to-black;
    animation-direction: reverse;
  }

  @keyframes gallery-dissolve-in {
    0% {
      left: 50%;
      top: 50%;
      opacity: 0;
      clip-path: inset(0 round 0);
      transform: translate(-50%, -50%) scale(1.018);
    }
    38% {
      opacity: 0;
    }
    58% {
      opacity: 0.42;
    }
    100% {
      left: 50%;
      top: 50%;
      opacity: 1;
      clip-path: inset(0 round 0);
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes gallery-resolve {
    0%,
    34% {
      filter: blur(10px) brightness(0.42) saturate(0.72);
      transform: scale(1.025);
    }
    100% {
      filter: none;
      transform: scale(1);
    }
  }

  @keyframes studio-fade-to-black {
    0% {
      opacity: 1;
      filter: none;
      transform: none;
    }
    58% {
      opacity: 0.08;
      filter: blur(1.5px) brightness(0.2) saturate(0.55);
    }
    100% {
      opacity: 0;
      filter: blur(2px) brightness(0.12) saturate(0.45);
      transform: none;
    }
  }

  .is-medallion-focused .floor-reflection,
  .is-mark-entering .floor-reflection {
    opacity: 0 !important;
    transition: opacity 120ms linear !important;
  }

  .is-medallion-focused .studio-medallion::before,
  .is-mark-entering .studio-medallion::before,
  .is-medallion-focused .studio-medallion::after,
  .is-mark-entering .studio-medallion::after,
  .is-medallion-focused .medallion-halo,
  .is-mark-entering .medallion-halo,
  .is-medallion-focused .medallion-sweep,
  .is-mark-entering .medallion-sweep {
    transform-origin: 50% 50% !important;
  }
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--ivory);
  font-family: Lora, Georgia, "Times New Roman", serif;
}

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

button,
summary {
  font: inherit;
}

img {
  max-width: 100%;
}

.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;
}

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  padding: 0.8rem 1rem;
  background: var(--ivory);
  color: var(--ink);
}

.skip-link:focus {
  top: 1rem;
}

.studio-shell {
  min-height: 100vh;
  overflow: hidden;
  background: var(--black);
}

/* Shared controls */

.studio-menu {
  position: relative;
  z-index: 60;
}

.studio-menu summary {
  width: 46px;
  height: 46px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  list-style: none;
  background: rgba(8, 7, 6, 0.24);
  transition:
    border-color 360ms ease,
    background 360ms ease;
}

.studio-menu summary::-webkit-details-marker {
  display: none;
}

.studio-menu summary span {
  display: block;
  height: 1px;
  background: var(--antique-gold);
}

.studio-menu summary:hover,
.studio-menu summary:focus-visible,
.studio-menu[open] summary {
  border-color: var(--line);
  background: rgba(50, 16, 21, 0.82);
  outline: none;
}

.studio-menu nav {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: 0;
  width: min(290px, calc(100vw - 2rem));
  padding: 1.15rem;
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(8, 7, 6, 0.97), rgba(12, 10, 9, 0.97)),
    radial-gradient(circle at top, rgba(104, 59, 30, 0.2), transparent 55%);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
}

.studio-menu nav a {
  display: block;
  padding: 0.7rem 0.35rem;
  border-bottom: 1px solid rgba(198, 161, 91, 0.13);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 260ms ease;
}

.studio-menu nav a:hover,
.studio-menu nav a:focus-visible {
  color: var(--bright-gold);
  outline: none;
}

/* Studio floor */

.studio-viewport {
  --focus-origin: 50% 55%;
  position: relative;
  height: calc(100svh - 118px);
  min-height: 700px;
  overflow: hidden;
  isolation: isolate;
  background: #080706;
  border-bottom: 1px solid rgba(198, 161, 91, 0.54);
}

.studio-camera {
  position: absolute;
  inset: -1px;
  overflow: hidden;
  transform: scale(1);
  transform-origin: var(--focus-origin);
  transition: transform 720ms var(--ease-cinematic);
  will-change: transform;
}

.studio-environment {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(91, 56, 31, 0.18), transparent 37%),
    radial-gradient(ellipse at 18% 42%, rgba(115, 54, 31, 0.1), transparent 27%),
    radial-gradient(ellipse at 84% 42%, rgba(115, 54, 31, 0.1), transparent 27%),
    linear-gradient(to bottom, #0b0a09 0 63%, #0b0908 63% 100%);
}

.studio-environment::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.3;
  background:
    repeating-radial-gradient(
      circle at 25% 40%,
      rgba(255, 255, 255, 0.012) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(90deg, transparent 49.9%, rgba(198, 161, 91, 0.08) 50%, transparent 50.1%);
  mix-blend-mode: screen;
}

.studio-environment::after {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  top: 62%;
  bottom: -20%;
  opacity: 0.72;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(185, 139, 70, 0.32) 50%, transparent 50.15%),
    repeating-linear-gradient(
      16deg,
      transparent 0 109px,
      rgba(184, 139, 70, 0.23) 110px,
      transparent 112px 220px
    ),
    repeating-linear-gradient(
      -16deg,
      transparent 0 109px,
      rgba(184, 139, 70, 0.23) 110px,
      transparent 112px 220px
    ),
    radial-gradient(ellipse at 50% 100%, rgba(123, 80, 39, 0.21), transparent 52%),
    #0c0a09;
  border-top: 1px solid rgba(198, 161, 91, 0.22);
  transform: perspective(780px) rotateX(49deg);
  transform-origin: top;
}

.scene-header {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}

.scene-menu {
  position: absolute;
  left: 1.8%;
  top: 2.4%;
  pointer-events: auto;
}

.scene-signature {
  position: absolute;
  left: 50%;
  top: 1.7%;
  width: clamp(340px, 38vw, 620px);
  height: clamp(74px, 9.5vh, 122px);
  display: block;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 14px rgba(198, 161, 91, 0.08));
}

.scene-header > p {
  position: absolute;
  left: 50%;
  top: 14.5%;
  margin: 0;
  color: var(--antique-gold);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: clamp(0.55rem, 0.85vw, 0.82rem);
  letter-spacing: 0.26em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}

.scene-header > p span {
  padding: 0 0.72rem;
}

.studio-rooms {
  position: absolute;
  inset: 0;
  z-index: 10;
}

.studio-room {
  position: absolute;
  overflow: hidden;
  border: 1px solid rgba(184, 139, 70, 0.5);
  border-bottom-color: rgba(198, 161, 91, 0.74);
  border-radius: 48% 48% 1px 1px / 17% 17% 1px 1px;
  background: #090807;
  box-shadow:
    0 0 0 5px rgba(11, 10, 9, 0.85),
    0 0 0 6px rgba(184, 139, 70, 0.21),
    inset 0 0 50px rgba(0, 0, 0, 0.65),
    0 24px 46px rgba(0, 0, 0, 0.48);
  outline: none;
}

.studio-room > .room-background {
  width: 100%;
  height: 122%;
  display: block;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.75) saturate(0.82);
  transition: filter 680ms var(--ease-cinematic);
  user-select: none;
}

.room-character {
  left: 2.7%;
  top: 18%;
  width: 22%;
  height: 58%;
}

.room-character > .room-background {
  object-position: 29% top;
}

.room-story {
  left: 25.6%;
  top: 24%;
  width: 16.4%;
  height: 51.5%;
}

.room-story > .room-background {
  object-position: 38% top;
}

.room-process {
  left: 57.9%;
  top: 24%;
  width: 16.4%;
  height: 51.5%;
}

.room-process > .room-background {
  object-position: 48% top;
}

.room-graphic {
  left: 75.3%;
  top: 18%;
  width: 22%;
  height: 58%;
}

.room-graphic > .room-background {
  object-position: 47% top;
}

.room-heading {
  position: absolute;
  left: 0;
  right: 0;
  top: 8.5%;
  z-index: 5;
  min-height: 16%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.4rem;
  color: var(--bright-gold);
  background: linear-gradient(
    to bottom,
    rgba(32, 9, 13, 0.92),
    rgba(46, 13, 18, 0.94) 72%,
    rgba(30, 10, 13, 0.86)
  );
  border-top: 1px solid rgba(198, 161, 91, 0.22);
  border-bottom: 1px solid rgba(198, 161, 91, 0.58);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: clamp(0.58rem, 1.05vw, 1.05rem);
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.86);
  pointer-events: none;
}

.room-heading i {
  position: relative;
  width: 48px;
  height: 1px;
  display: block;
  margin-top: 0.48rem;
  background: rgba(198, 161, 91, 0.76);
}

.room-heading i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border: 1px solid var(--antique-gold);
  background: var(--burgundy);
  transform: translate(-50%, -50%) rotate(45deg);
}

.studio-room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(3, 3, 3, 0);
  transition: background 680ms var(--ease-cinematic);
  pointer-events: none;
}

.room-light {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.16;
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 199, 117, 0.32), transparent 32%),
    linear-gradient(to bottom, rgba(112, 54, 31, 0.07), transparent 60%);
  mix-blend-mode: screen;
  transition: opacity 680ms var(--ease-cinematic);
  pointer-events: none;
}

.room-entry {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.is-room-focused .studio-camera {
  transform: scale(1.09);
}

.is-room-focused .studio-room:not(.is-active)::after {
  background: rgba(2, 2, 2, 0.18);
}

.studio-room.is-active > .room-background,
.studio-room:hover > .room-background,
.studio-room:focus-visible > .room-background {
  filter: brightness(0.98) saturate(1.02);
}

.studio-room.is-active .room-light,
.studio-room:hover .room-light,
.studio-room:focus-visible .room-light,
.studio-room.is-returning .room-light {
  opacity: 0.48;
}

.studio-room.is-returning {
  animation: returned-room 1.4s var(--ease-cinematic) both;
}

@keyframes returned-room {
  0%,
  72% {
    filter: brightness(1.18);
    box-shadow:
      0 0 0 5px rgba(11, 10, 9, 0.85),
      0 0 0 6px rgba(214, 170, 100, 0.72),
      0 0 44px rgba(214, 170, 100, 0.26);
  }
  100% {
    filter: none;
  }
}

.studio-welcome {
  position: absolute;
  left: 43.2%;
  top: 27%;
  z-index: 14;
  width: 13.6%;
  color: var(--gold);
  text-align: center;
  transition:
    color 620ms var(--ease-cinematic),
    filter 620ms var(--ease-cinematic);
}

.studio-welcome .eyebrow {
  margin: 0 0 0.5rem;
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: clamp(0.46rem, 0.68vw, 0.68rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.studio-welcome h1 {
  margin: 0.65rem 0 1.1rem;
  color: var(--bright-gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.1vw, 3.9rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.9;
}

.studio-welcome h1 small {
  font-size: 0.4em;
  font-weight: 400;
  letter-spacing: 0;
}

.studio-welcome > p:last-of-type {
  margin: 0;
  font-size: clamp(0.55rem, 0.78vw, 0.82rem);
  line-height: 1.58;
}

.ornament {
  width: 52px;
  height: 1px;
  display: block;
  position: relative;
  margin: 0 auto;
  background: rgba(198, 161, 91, 0.74);
}

.ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border: 1px solid var(--antique-gold);
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--ink);
}

.ornament-bottom {
  margin-top: 1.15rem;
}

.studio-medallion {
  position: absolute;
  left: 50%;
  bottom: 1.2%;
  z-index: 18;
  width: clamp(240px, 23vw, 370px);
  height: clamp(92px, 8.5vw, 138px);
  padding: 0;
  border: 0;
  cursor: default;
  background: transparent;
  transform: translateX(-50%);
  outline: none;
}

.studio-medallion img {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 44%;
  height: auto;
  display: block;
  object-fit: contain;
  opacity: 0.74;
  filter:
    brightness(0.8)
    sepia(0.1)
    drop-shadow(0 5px 7px rgba(0, 0, 0, 0.7));
  transform: translate(-50%, -50%) scaleY(0.52);
  transition:
    opacity 560ms var(--ease-cinematic),
    filter 560ms var(--ease-cinematic);
}

.medallion-ring {
  position: absolute;
  inset: 6% 8%;
  z-index: 2;
  border: 2px solid rgba(198, 161, 91, 0.4);
  border-radius: 50%;
  box-shadow:
    0 0 0 6px rgba(4, 4, 3, 0.78),
    0 0 0 7px rgba(184, 139, 70, 0.26),
    inset 0 0 26px rgba(198, 161, 91, 0.08);
  transition:
    border-color 560ms var(--ease-cinematic) 120ms,
    box-shadow 560ms var(--ease-cinematic) 120ms;
}

.medallion-inlays {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 185%;
  height: 1px;
  opacity: 0.28;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(198, 161, 91, 0.7) 21%,
    transparent 42% 58%,
    rgba(198, 161, 91, 0.7) 79%,
    transparent
  );
  transform: translate(-50%, -50%);
  transition:
    opacity 620ms var(--ease-cinematic) 260ms,
    filter 620ms var(--ease-cinematic) 260ms;
}

.medallion-inlays::before,
.medallion-inlays::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 1px;
  background: inherit;
}

.medallion-inlays::before {
  transform: translate(-50%, -50%) rotate(15deg);
}

.medallion-inlays::after {
  transform: translate(-50%, -50%) rotate(-15deg);
}

.medallion-sweep {
  position: absolute;
  inset: 12% 16%;
  z-index: 4;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: none;
}

.medallion-sweep::after {
  content: "";
  position: absolute;
  left: -65%;
  top: -50%;
  width: 22%;
  height: 210%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 224, 158, 0.34),
    transparent
  );
  transform: rotate(18deg);
  animation: medallion-sweep 18s ease-in-out infinite;
}

@keyframes medallion-sweep {
  0%,
  82% {
    left: -65%;
    opacity: 0;
  }
  85% {
    opacity: 0.4;
  }
  91% {
    left: 145%;
    opacity: 0.16;
  }
  94%,
  100% {
    left: 145%;
    opacity: 0;
  }
}

.is-medallion-focused .studio-camera {
  transform: scale(1.04);
}

.is-medallion-focused .studio-room::after {
  background: rgba(2, 2, 2, 0.16);
}

.is-medallion-focused .studio-welcome {
  color: var(--bright-gold);
  filter: brightness(1.16) drop-shadow(0 0 13px rgba(198, 161, 91, 0.13));
}

.is-medallion-focused .studio-medallion img,
.studio-medallion:focus-visible img {
  opacity: 1;
  filter:
    brightness(1.16)
    sepia(0)
    drop-shadow(0 0 12px rgba(214, 170, 100, 0.36))
    drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
  animation: medallion-breathe 5s ease-in-out infinite 600ms;
}

.is-medallion-focused .medallion-ring,
.studio-medallion:focus-visible .medallion-ring {
  border-color: rgba(224, 184, 109, 0.92);
  box-shadow:
    0 0 0 6px rgba(4, 4, 3, 0.78),
    0 0 0 7px rgba(224, 184, 109, 0.72),
    0 0 28px rgba(214, 170, 100, 0.2),
    inset 0 0 32px rgba(214, 170, 100, 0.16);
}

.is-medallion-focused .medallion-inlays,
.studio-medallion:focus-visible .medallion-inlays {
  opacity: 0.76;
  filter: drop-shadow(0 0 5px rgba(214, 170, 100, 0.36));
}

@keyframes medallion-breathe {
  0%,
  100% {
    filter:
      brightness(1.12)
      drop-shadow(0 0 10px rgba(214, 170, 100, 0.3))
      drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
  }
  50% {
    filter:
      brightness(1.2)
      drop-shadow(0 0 15px rgba(214, 170, 100, 0.42))
      drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7));
  }
}

.scene-fade {
  position: absolute;
  inset: 0;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  background: #090807;
  transition: opacity 700ms var(--ease-cinematic) 170ms;
}

.studio-viewport.is-entering .studio-camera {
  transform: scale(1.17);
  transition-duration: 820ms;
}

.studio-viewport.is-entering .scene-fade {
  opacity: 1;
}

/* Standard interior header and gallery */

.site-header {
  position: relative;
  z-index: 50;
  width: min(1400px, calc(100% - 64px));
  min-height: 118px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.site-header .studio-menu {
  justify-self: start;
}

.header-signature {
  justify-self: center;
}

.header-signature img {
  width: clamp(260px, 29vw, 470px);
  max-height: 82px;
  display: block;
}

.interior-shell {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(92, 29, 35, 0.31), transparent 31%),
    radial-gradient(circle at 18% 30%, rgba(109, 68, 37, 0.07), transparent 28%),
    #11100f;
}

.gallery-interior {
  width: min(1320px, calc(100% - 64px));
  margin: 0 auto;
  padding: 42px 0 112px;
  transition:
    opacity 680ms var(--ease-cinematic),
    transform 680ms var(--ease-cinematic),
    filter 680ms var(--ease-cinematic);
}

.return-link {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 52px;
  min-height: 54px;
  padding: 0.82rem 1.35rem 0.78rem;
  border: 1px solid rgba(214, 170, 100, 0.72);
  border-radius: 2px;
  color: var(--antique-gold);
  background:
    linear-gradient(180deg, rgba(88, 30, 37, 0.94), rgba(42, 13, 18, 0.97)),
    radial-gradient(circle at 50% 0%, rgba(214, 170, 100, 0.18), transparent 58%);
  box-shadow:
    0 9px 24px rgba(0, 0, 0, 0.35),
    0 0 0 4px rgba(13, 12, 11, 0.82),
    0 0 0 5px rgba(184, 139, 70, 0.24),
    inset 0 1px rgba(255, 222, 158, 0.12),
    inset 0 0 20px rgba(0, 0, 0, 0.34);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.73rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition:
    color 300ms ease,
    border-color 420ms var(--ease-cinematic),
    box-shadow 420ms var(--ease-cinematic),
    transform 420ms var(--ease-cinematic);
}

.return-link::before,
.return-link::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--antique-gold);
  box-shadow: 0 0 5px rgba(214, 170, 100, 0.34);
  opacity: 0.72;
}

.return-link::before {
  left: 8px;
}

.return-link::after {
  right: 8px;
}

.return-link span {
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid rgba(214, 170, 100, 0.5);
  border-radius: 50%;
  background: rgba(8, 7, 6, 0.38);
  font-size: 1rem;
  line-height: 1;
}

.return-link:hover,
.return-link:focus-visible {
  color: var(--bright-gold);
  border-color: var(--bright-gold);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.42),
    0 0 0 4px rgba(13, 12, 11, 0.86),
    0 0 0 5px rgba(214, 170, 100, 0.46),
    0 0 24px rgba(198, 161, 91, 0.12),
    inset 0 1px rgba(255, 222, 158, 0.16),
    inset 0 0 22px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
  outline: none;
}

.interior-heading {
  margin: 0 auto 28px;
  color: var(--bright-gold);
  text-align: center;
}

.interior-heading p {
  margin: 0 0 0.8rem;
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.76rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.interior-heading h1 {
  margin: 0;
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: clamp(3.1rem, 6.5vw, 6.1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.heading-ornament {
  position: relative;
  width: 150px;
  height: 1px;
  display: block;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, var(--antique-gold), transparent);
}

.heading-ornament::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--antique-gold);
  background: var(--charcoal);
  transform: translate(-50%, -50%) rotate(45deg);
}

.gallery-introduction {
  max-width: 850px;
  margin: 0 auto;
  color: var(--ivory);
  font-size: clamp(0.96rem, 1.35vw, 1.16rem);
  line-height: 1.75;
  text-align: center;
}

.gallery-divider {
  position: relative;
  height: 1px;
  margin: 54px 0 34px;
  background: linear-gradient(90deg, transparent, var(--gold) 10% 90%, transparent);
}

.gallery-divider span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid var(--antique-gold);
  background: var(--charcoal);
  transform: translate(-50%, -50%) rotate(45deg);
}

.art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 2.7vw, 42px);
}

.art-card {
  opacity: 0;
  transform: translateY(7px);
  animation: artwork-reveal 620ms var(--ease-cinematic) forwards;
  animation-delay: calc(var(--reveal-index) * 34ms + 90ms);
  transition:
    opacity 420ms ease,
    filter 420ms ease;
}

@keyframes artwork-reveal {
  to {
    opacity: 1;
    transform: none;
  }
}

.art-placeholder,
.art-card > a {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(184, 139, 70, 0.78);
  background:
    radial-gradient(circle at 48% 35%, rgba(198, 161, 91, 0.06), transparent 38%),
    linear-gradient(135deg, rgba(198, 161, 91, 0.04), transparent 36%),
    #191816;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.3),
    inset 0 0 38px rgba(0, 0, 0, 0.22);
  transition:
    transform 520ms var(--ease-cinematic),
    border-color 520ms var(--ease-cinematic),
    box-shadow 520ms var(--ease-cinematic),
    filter 520ms var(--ease-cinematic);
}

.art-lightbox-trigger {
  width: 100%;
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: zoom-in;
}

.art-lightbox-trigger:focus-visible {
  outline: 1px solid var(--bright-gold);
  outline-offset: 6px;
}

.art-placeholder span {
  color: rgba(198, 161, 91, 0.6);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.63rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.art-card:hover .art-placeholder,
.art-card:focus-within .art-placeholder,
.art-card:hover > a,
.art-card:focus-within > a {
  z-index: 2;
  border-color: var(--bright-gold);
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.42),
    0 0 21px rgba(198, 161, 91, 0.12);
  transform: translateY(-4px) scale(1.04);
}

.art-grid:has(.art-card:hover) .art-card:not(:hover) {
  opacity: 0.78;
  filter: brightness(0.92);
}

.art-lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 72px);
  background:
    radial-gradient(circle at 50% 42%, rgba(62, 31, 25, 0.2), transparent 38%),
    rgba(5, 4, 4, 0.94);
  backdrop-filter: blur(8px);
  animation: art-lightbox-backdrop-in 320ms var(--ease-cinematic) both;
  cursor: zoom-out;
}

.art-lightbox-panel {
  position: relative;
  width: min(82vw, calc(100svh - 96px), 920px);
  max-height: calc(100svh - 48px);
  aspect-ratio: 1;
  padding: clamp(12px, 1.6vw, 20px);
  border: 1px solid rgba(214, 170, 100, 0.72);
  background: #0c0b0a;
  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.72),
    0 0 0 5px rgba(8, 7, 6, 0.88),
    0 0 0 6px rgba(184, 139, 70, 0.22);
  animation: art-lightbox-panel-in 420ms var(--ease-cinematic) both;
  cursor: default;
}

.art-lightbox-placeholder {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 48% 35%, rgba(198, 161, 91, 0.055), transparent 38%),
    linear-gradient(135deg, rgba(198, 161, 91, 0.035), transparent 36%),
    #191816;
}

.art-lightbox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(214, 170, 100, 0.78);
  border-radius: 50%;
  color: var(--bright-gold);
  background: #17100f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.48);
  cursor: pointer;
  transition:
    color 260ms ease,
    border-color 260ms ease,
    transform 260ms ease;
}

.art-lightbox-close span {
  transform: translateY(-1px);
  font-family: Georgia, serif;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
}

.art-lightbox-close:hover,
.art-lightbox-close:focus-visible {
  color: #f1d79f;
  border-color: #f1d79f;
  outline: none;
  transform: scale(1.06);
}

@keyframes art-lightbox-backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes art-lightbox-panel-in {
  from {
    opacity: 0;
    transform: scale(0.975);
  }
}

.interior-transition {
  position: fixed;
  inset: 0;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 42%, transparent 0 22%, rgba(8, 7, 6, 0.82) 68%),
    #080706;
  transition: opacity 700ms var(--ease-cinematic);
}

.interior-shell.is-leaving .gallery-interior,
.interior-shell.is-leaving .site-header,
.interior-shell.is-leaving .site-footer {
  opacity: 0;
  filter: blur(1px);
  transform: perspective(1200px) translateZ(-150px) scale(0.94);
}

.interior-shell.is-leaving .interior-transition {
  opacity: 1;
}

/* Footer */

.site-footer {
  position: relative;
  z-index: 30;
  min-height: 118px;
  padding: 18px 24px 10px;
  overflow: hidden;
  border-top: 1px solid rgba(198, 161, 91, 0.46);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(101, 44, 36, 0.25), transparent 44%),
    linear-gradient(90deg, #19080b, #300f15 50%, #19080b);
  background-color: #240c11;
}

.site-footer nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 4vw, 4rem);
}

.site-footer nav a {
  color: var(--antique-gold);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.78rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  transition: color 280ms ease;
}

.site-footer nav a:hover,
.site-footer nav a:focus-visible {
  color: var(--bright-gold);
  outline: none;
}

.site-footer nav span {
  color: var(--gold);
  opacity: 0.74;
}

.dachshund-art {
  width: min(230px, 52vw);
  height: 54px;
  display: block;
  margin: 0 auto -7px;
  object-fit: contain;
  opacity: 0.9;
}

.site-footer p {
  margin: 0;
  color: #846e4c;
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.48rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .studio-viewport {
    height: auto;
    min-height: 1220px;
  }

  .studio-camera {
    min-height: 1220px;
    inset: 0;
  }

  .studio-environment::after {
    top: 74%;
  }

  .scene-signature {
    top: 3%;
    width: min(68vw, 510px);
  }

  .scene-header > p {
    top: 12.8%;
    font-size: 0.58rem;
  }

  .scene-menu {
    top: 2%;
    left: 2.5%;
  }

  .studio-welcome {
    left: 18%;
    top: 17%;
    width: 64%;
  }

  .studio-welcome h1 {
    font-size: clamp(2.8rem, 8vw, 4.6rem);
  }

  .studio-welcome > p:last-of-type {
    max-width: 480px;
    margin: 0 auto;
    font-size: 0.84rem;
  }

  .studio-rooms {
    left: 4%;
    right: 4%;
    top: 36%;
    bottom: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
  }

  .studio-room {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    aspect-ratio: 0.9;
  }

  .studio-medallion {
    bottom: 1.5%;
    width: min(44vw, 330px);
    height: min(18vw, 125px);
  }

  .is-room-focused .studio-camera,
  .is-medallion-focused .studio-camera {
    transform: none;
  }

  .studio-room:hover {
    transform: translateY(-3px);
  }

  .site-header {
    width: calc(100% - 36px);
  }

  .gallery-interior {
    width: calc(100% - 40px);
  }
}

/* Optional WordPress-managed notice sign beneath the art definition. It is
 * absolutely anchored to the definition, so it never changes the approved
 * Studio Floor geometry. No markup is rendered while the field is empty. */
.studio-homepage-sign {
  position: absolute;
  left: 50%;
  top: calc(100% + clamp(10px, 1.1vw, 20px));
  z-index: 2;
  display: block;
  width: min(150%, 260px);
  transform: translateX(-50%);
  pointer-events: none;
}

.studio-homepage-sign img {
  display: block;
  width: 100%;
  max-height: clamp(52px, 8svh, 108px);
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.72));
}

@media (max-width: 980px) {
  .studio-homepage-sign {
    top: calc(100% + 14px);
    width: min(72%, 280px);
  }

  .studio-homepage-sign img {
    max-height: 104px;
  }
}

@media (max-width: 680px) {
  .studio-homepage-sign {
    top: calc(100% + 12px);
    width: min(76%, 250px);
  }

  .studio-homepage-sign img {
    max-height: 88px;
  }
}

@media (max-width: 680px) {
  .studio-viewport {
    min-height: 1420px;
  }

  .studio-camera {
    min-height: 1420px;
  }

  .scene-signature {
    top: 2.2%;
    width: 65vw;
    height: 82px;
  }

  .scene-header > p {
    top: 8.9%;
    font-size: 0.46rem;
    letter-spacing: 0.12em;
  }

  .scene-header > p span {
    padding: 0 0.26rem;
  }

  .studio-menu summary {
    width: 40px;
    height: 40px;
  }

  .studio-welcome {
    left: 9%;
    top: 12%;
    width: 82%;
  }

  .studio-welcome .eyebrow {
    font-size: 0.55rem;
  }

  .studio-welcome > p:last-of-type {
    font-size: 0.78rem;
  }

  .studio-rooms {
    left: 5%;
    right: 5%;
    top: 31%;
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .studio-room {
    aspect-ratio: 1.48;
    border-radius: 46% 46% 1px 1px / 22% 22% 1px 1px;
  }

  .studio-room > .room-background {
    object-position: center top;
  }

  .studio-room::after {
    background: rgba(2, 2, 2, 0.04);
  }

  .studio-medallion {
    bottom: 0.4%;
    width: 62vw;
    height: 34vw;
  }

  .site-header {
    min-height: 94px;
    grid-template-columns: 44px 1fr 52px;
  }

  .header-signature img {
    width: min(61vw, 300px);
  }

  .gallery-interior {
    width: calc(100% - 32px);
    padding: 30px 0 80px;
  }

  .return-link {
    margin-bottom: 46px;
    min-height: 50px;
    padding: 0.72rem 1rem 0.68rem;
    font-size: 0.62rem;
    letter-spacing: 0.1em;
  }

  .interior-heading h1 {
    font-size: clamp(2.55rem, 13.5vw, 4.2rem);
    letter-spacing: 0.035em;
  }

  .gallery-introduction {
    font-size: 0.94rem;
  }

  .gallery-divider {
    margin: 42px 0 28px;
  }

  .art-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .art-lightbox {
    padding: 22px;
  }

  .art-lightbox-panel {
    width: min(88vw, calc(100svh - 68px));
    max-height: calc(100svh - 44px);
    padding: 10px;
  }

  .art-lightbox-close {
    top: -15px;
    right: -10px;
    width: 38px;
    height: 38px;
  }

  .site-footer {
    min-height: 126px;
    padding-inline: 12px;
  }

  .site-footer nav {
    gap: 0.75rem;
  }

  .site-footer nav a {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }

  .site-footer nav span {
    font-size: 0.55rem;
  }

  .site-footer p {
    font-size: 0.42rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  .studio-camera {
    transform: none !important;
  }
}

/* Locked Gallery Floor refinement: preserve complete rooms and deepen the scene. */

.studio-environment {
  background:
    linear-gradient(90deg, rgba(198, 161, 91, 0.08) 1px, transparent 1px) 0 0 / 20% 100%,
    radial-gradient(ellipse at 50% 18%, rgba(123, 75, 38, 0.2), transparent 39%),
    radial-gradient(ellipse at 12% 43%, rgba(142, 72, 39, 0.12), transparent 24%),
    radial-gradient(ellipse at 88% 43%, rgba(142, 72, 39, 0.12), transparent 24%),
    linear-gradient(to bottom, #0c0b0a 0 62%, #090807 62% 100%);
}

.studio-environment::after {
  opacity: 0.92;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(214, 170, 100, 0.42) 50%, transparent 50.15%),
    repeating-linear-gradient(
      16deg,
      transparent 0 109px,
      rgba(184, 139, 70, 0.3) 110px,
      transparent 112px 220px
    ),
    repeating-linear-gradient(
      -16deg,
      transparent 0 109px,
      rgba(184, 139, 70, 0.3) 110px,
      transparent 112px 220px
    ),
    radial-gradient(ellipse at 50% 82%, rgba(152, 96, 48, 0.27), transparent 52%),
    linear-gradient(135deg, #14110e, #090807 48%, #16120f);
  box-shadow: inset 0 24px 42px rgba(0, 0, 0, 0.64);
}

.studio-room,
.scene-header,
.studio-welcome,
.studio-medallion {
  transition:
    transform 760ms var(--ease-cinematic),
    filter 760ms var(--ease-cinematic),
    opacity 760ms var(--ease-cinematic),
    box-shadow 760ms var(--ease-cinematic);
}

.studio-room > .room-atmosphere,
.studio-room > .room-background {
  position: absolute;
  display: block;
  user-select: none;
  pointer-events: none;
  transition:
    opacity 760ms var(--ease-cinematic),
    filter 760ms var(--ease-cinematic),
    transform 760ms var(--ease-cinematic);
}

.studio-room > .room-atmosphere {
  inset: -5%;
  z-index: 0;
  width: 110%;
  max-width: none;
  height: 110%;
  object-fit: cover;
  object-position: center;
  opacity: 0.92;
  filter: blur(9px) brightness(0.52) saturate(0.78);
  transform: scale(1.05);
}

.studio-room > .room-background {
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 0.46;
  background: transparent;
  filter: blur(3.6px) brightness(0.65) saturate(0.82);
  transform: scale(1.014);
}

.studio-room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.62;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 17%, rgba(4, 4, 3, 0.22) 64%, rgba(4, 4, 3, 0.52) 100%),
    linear-gradient(to bottom, rgba(16, 8, 7, 0.08), rgba(5, 4, 3, 0.2));
  transition: opacity 760ms var(--ease-cinematic);
}

.studio-room .room-light {
  z-index: 2;
}

.studio-room.is-active > .room-atmosphere,
.studio-room:hover > .room-atmosphere,
.studio-room:focus-within > .room-atmosphere {
  opacity: 0.08;
  filter: blur(13px) brightness(0.48) saturate(0.84);
  transform: scale(1.02);
}

.studio-room.is-active > .room-background,
.studio-room:hover > .room-background,
.studio-room:focus-within > .room-background {
  opacity: 1;
  filter: blur(0) brightness(1.06) saturate(1.03);
  transform: scale(1);
}

.studio-room.is-active::before,
.studio-room:hover::before,
.studio-room:focus-within::before {
  opacity: 0.08;
}

.studio-medallion img {
  width: 43%;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: screen;
}

@media (min-width: 981px) {
  .studio-viewport {
    height: calc(100svh - 118px);
    min-height: 560px;
  }

  .studio-room {
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 46% 46% 2px 2px / 14% 14% 2px 2px;
    transform-origin: center;
  }

  .room-character {
    left: 1.8%;
    top: 24%;
    width: 26%;
  }

  .room-story {
    left: 28.8%;
    top: 31%;
    width: 18.8%;
  }

  .room-process {
    left: 52.4%;
    top: 31%;
    width: 18.8%;
  }

  .room-graphic {
    left: 72.2%;
    top: 24%;
    width: 26%;
  }

  .room-character > .room-background,
  .room-story > .room-background,
  .room-process > .room-background,
  .room-graphic > .room-background {
    object-position: center;
  }

  .studio-welcome {
    left: 43.4%;
    top: 28%;
    width: 13.2%;
  }

  .is-room-focused .studio-camera {
    transform: none;
  }

  .is-room-focused .studio-room:not(.is-active),
  .is-room-focused .scene-header,
  .is-room-focused .studio-welcome,
  .is-room-focused .studio-medallion {
    opacity: 0.68;
    filter: blur(2.5px) brightness(0.72);
  }

  .studio-room.is-active {
    z-index: 28;
    filter: brightness(1.08) saturate(1.05);
    box-shadow:
      0 0 0 5px rgba(11, 10, 9, 0.9),
      0 0 0 6px rgba(214, 170, 100, 0.62),
      0 0 52px rgba(214, 170, 100, 0.2),
      0 34px 70px rgba(0, 0, 0, 0.64);
    transform: scale(1.15);
  }

  .studio-room.room-character.is-active {
    transform: translateX(3.2vw) scale(1.15);
  }

  .studio-room.room-graphic.is-active {
    transform: translateX(-3.2vw) scale(1.15);
  }

  .studio-room.room-story.is-active {
    transform: translateX(1.2vw) scale(1.17);
  }

  .studio-room.room-process.is-active {
    transform: translateX(-1.2vw) scale(1.17);
  }

  .studio-viewport.is-entering .studio-room.is-active {
    transform: scale(1.28);
  }

  .studio-viewport.is-entering .studio-room.room-character.is-active {
    transform: translateX(4.2vw) scale(1.28);
  }

  .studio-viewport.is-entering .studio-room.room-graphic.is-active {
    transform: translateX(-4.2vw) scale(1.28);
  }
}

/* Continuous studio architecture and animation-state lock. */

.studio-environment {
  background:
    radial-gradient(ellipse at 50% 17%, rgba(120, 72, 36, 0.2), transparent 38%),
    radial-gradient(ellipse at 13% 48%, rgba(111, 58, 33, 0.11), transparent 25%),
    radial-gradient(ellipse at 87% 48%, rgba(111, 58, 33, 0.11), transparent 25%),
    linear-gradient(to bottom, #0d0c0b 0 71.2%, #0a0807 71.2% 100%);
}

.studio-environment::before {
  opacity: 0.46;
  background:
    linear-gradient(
      to bottom,
      rgba(220, 176, 97, 0.12),
      transparent 1.2% 68.5%,
      rgba(0, 0, 0, 0.34) 71.2%,
      transparent 73%
    ),
    repeating-radial-gradient(
      circle at 22% 38%,
      rgba(255, 255, 255, 0.014) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(90deg, transparent 49.9%, rgba(198, 161, 91, 0.055) 50%, transparent 50.1%);
  mix-blend-mode: screen;
}

.studio-environment::after {
  left: -8%;
  right: -8%;
  top: 70.9%;
  bottom: -13%;
  opacity: 1;
  border-top: 1px solid rgba(214, 170, 100, 0.42);
  background:
    radial-gradient(ellipse at 50% 5%, rgba(208, 156, 79, 0.12), transparent 38%),
    linear-gradient(90deg, transparent 49.86%, rgba(214, 170, 100, 0.42) 50%, transparent 50.14%),
    repeating-linear-gradient(
      14deg,
      transparent 0 118px,
      rgba(184, 139, 70, 0.25) 119px,
      transparent 121px 238px
    ),
    repeating-linear-gradient(
      -14deg,
      transparent 0 118px,
      rgba(184, 139, 70, 0.25) 119px,
      transparent 121px 238px
    ),
    radial-gradient(ellipse at 50% 105%, rgba(129, 80, 39, 0.24), transparent 57%),
    linear-gradient(135deg, #17130f, #090807 47%, #15110e);
  box-shadow:
    inset 0 24px 44px rgba(0, 0, 0, 0.76),
    0 -16px 34px rgba(0, 0, 0, 0.32);
  transform: perspective(920px) rotateX(43deg) scale(1.16);
  transform-origin: top;
}

.studio-architecture {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  transition:
    opacity 760ms var(--ease-cinematic),
    filter 760ms var(--ease-cinematic),
    transform 760ms var(--ease-cinematic);
}

.studio-cornice,
.studio-baseboard,
.studio-center-panel,
.studio-pilaster,
.studio-sconce {
  position: absolute;
  display: block;
}

.studio-cornice {
  left: -2%;
  right: -2%;
  top: 16.4%;
  height: 12px;
  border-top: 1px solid rgba(198, 161, 91, 0.32);
  border-bottom: 1px solid rgba(198, 161, 91, 0.16);
  background: linear-gradient(
    to bottom,
    rgba(4, 4, 3, 0.96),
    rgba(32, 25, 18, 0.94) 44%,
    rgba(5, 5, 4, 0.98)
  );
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.64),
    0 -5px 12px rgba(0, 0, 0, 0.34);
}

.studio-baseboard {
  left: -2%;
  right: -2%;
  top: 70.45%;
  height: 17px;
  border-top: 1px solid rgba(210, 168, 94, 0.28);
  border-bottom: 1px solid rgba(210, 168, 94, 0.42);
  background: linear-gradient(
    to bottom,
    rgba(18, 15, 12, 0.98),
    rgba(6, 6, 5, 0.98) 58%,
    rgba(40, 29, 19, 0.94)
  );
  box-shadow:
    0 14px 24px rgba(0, 0, 0, 0.72),
    0 -10px 24px rgba(0, 0, 0, 0.4);
}

.studio-center-panel {
  left: 41.6%;
  top: 21%;
  width: 16.8%;
  height: 45%;
  border: 1px solid rgba(198, 161, 91, 0.09);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(127, 74, 35, 0.08), transparent 46%),
    rgba(8, 8, 7, 0.16);
  box-shadow:
    inset 0 0 58px rgba(0, 0, 0, 0.38),
    0 0 0 7px rgba(5, 5, 4, 0.18),
    0 0 0 8px rgba(198, 161, 91, 0.045);
}

.studio-pilaster {
  top: 18.1%;
  bottom: 29.2%;
  width: clamp(8px, 0.72vw, 13px);
  border-left: 1px solid rgba(198, 161, 91, 0.12);
  border-right: 1px solid rgba(198, 161, 91, 0.1);
  background: linear-gradient(
    90deg,
    rgba(4, 4, 3, 0.94),
    rgba(39, 30, 21, 0.72) 48%,
    rgba(5, 5, 4, 0.95)
  );
  box-shadow:
    -8px 0 18px rgba(0, 0, 0, 0.42),
    8px 0 18px rgba(0, 0, 0, 0.42);
}

.pilaster-one {
  left: 24.35%;
}

.pilaster-two {
  left: 41.1%;
}

.pilaster-three {
  right: 41.1%;
}

.pilaster-four {
  right: 24.35%;
}

.studio-sconce {
  top: 39%;
  width: 7px;
  height: 48px;
  border: 1px solid rgba(214, 170, 100, 0.56);
  border-radius: 45% 45% 12% 12%;
  background: linear-gradient(to right, #392414, #d0a35b 45%, #4b301a);
  box-shadow:
    0 0 16px rgba(224, 173, 89, 0.25),
    0 0 34px rgba(224, 173, 89, 0.11);
}

.studio-sconce::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 23px;
  height: 34px;
  border-radius: 50%;
  opacity: 0.34;
  background: radial-gradient(ellipse, rgba(246, 199, 112, 0.74), transparent 70%);
  transform: translateX(-50%);
}

.sconce-left {
  left: 40.45%;
}

.sconce-right {
  right: 40.45%;
}

.room-threshold {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  height: 9px;
  border-top: 1px solid rgba(232, 193, 118, 0.62);
  background: linear-gradient(
    to bottom,
    rgba(77, 53, 31, 0.94),
    rgba(10, 9, 8, 0.98) 58%,
    rgba(174, 129, 66, 0.58)
  );
  box-shadow:
    0 -10px 24px rgba(0, 0, 0, 0.42),
    0 9px 20px rgba(211, 158, 79, 0.13);
  pointer-events: none;
}

.studio-room > .room-atmosphere,
.studio-room > .room-background {
  border-radius: inherit;
}

/* Raw pointer hover never drives the moving room; the locked state does. */
.studio-room:not(.is-active) > .room-atmosphere {
  opacity: 0.98;
  filter: blur(11px) brightness(0.48) saturate(0.76);
  transform: scale(1.08);
}

.studio-room:not(.is-active) > .room-background {
  opacity: 0.2;
  filter: blur(5px) brightness(0.58) saturate(0.76);
  transform: scale(1.04);
}

.studio-room:not(.is-active)::before {
  opacity: 0.88;
}

.studio-room:not(.is-active) .room-light {
  opacity: 0.16;
}

@media (min-width: 981px) {
  .studio-room {
    bottom: auto;
  }

  .room-character {
    left: 2.3%;
    top: 18.9%;
    width: 22%;
    height: 52%;
  }

  .room-story {
    left: 25.7%;
    top: 24.3%;
    width: 14.8%;
    height: 46.6%;
  }

  .room-process {
    left: 59.5%;
    top: 24.3%;
    width: 14.8%;
    height: 46.6%;
  }

  .room-graphic {
    left: 75.7%;
    top: 18.9%;
    width: 22%;
    height: 52%;
  }

  .studio-room.is-active {
    left: 50%;
    top: 52%;
    width: min(78vw, calc(132svh - 156px), 1240px);
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 50% 50% 2px 2px / 18% 18% 2px 2px;
    transform: translate(-50%, -50%);
  }

  .studio-room.room-character.is-active,
  .studio-room.room-story.is-active,
  .studio-room.room-process.is-active,
  .studio-room.room-graphic.is-active {
    transform: translate(-50%, -50%);
  }

  .studio-room.is-active > .room-background {
    object-fit: contain;
  }

  .is-room-focused .studio-architecture {
    opacity: 0.5;
    filter: blur(5px) brightness(0.56);
  }

  .phase-closing .studio-room,
  .phase-closing .studio-architecture,
  .phase-closing .scene-header,
  .phase-closing .studio-welcome,
  .phase-closing .studio-medallion,
  .phase-closing .studio-environment {
    pointer-events: none;
  }

  .studio-viewport.is-entering .studio-room.is-active,
  .studio-viewport.is-entering .studio-room.room-character.is-active,
  .studio-viewport.is-entering .studio-room.room-story.is-active,
  .studio-viewport.is-entering .studio-room.room-process.is-active,
  .studio-viewport.is-entering .studio-room.room-graphic.is-active {
    width: min(84vw, calc(142svh - 168px), 1420px);
    height: auto;
    transform: translate(-50%, -50%) scale(1.015);
  }
}

@media (max-width: 980px) {
  .studio-architecture {
    display: none;
  }
}

@media (max-width: 980px) {
  .studio-room > .room-atmosphere {
    filter: blur(6px) brightness(0.56) saturate(0.8);
  }

  .studio-room > .room-background {
    opacity: 0.58;
    filter: blur(2.4px) brightness(0.7) saturate(0.86);
  }

  .studio-room > .room-background {
    object-fit: contain;
    object-position: center;
  }
}

/* Gallery architecture pass: deeper resting arches and a true centered approach. */

.dachshund-art {
  width: min(190px, 45vw);
  height: 48px;
}

@media (min-width: 981px) {
  .studio-room {
    height: 52%;
    aspect-ratio: auto;
    border: 1px solid rgba(206, 164, 91, 0.62);
    border-bottom-color: rgba(225, 187, 112, 0.82);
    border-radius: 50% 50% 2px 2px / 23% 23% 2px 2px;
    background:
      radial-gradient(ellipse at 50% 16%, rgba(119, 69, 34, 0.16), transparent 38%),
      #080706;
    box-shadow:
      0 0 0 4px rgba(6, 6, 5, 0.96),
      0 0 0 5px rgba(198, 161, 91, 0.48),
      0 0 0 11px rgba(20, 17, 14, 0.96),
      0 0 0 12px rgba(198, 161, 91, 0.2),
      inset 18px 0 32px rgba(0, 0, 0, 0.72),
      inset -18px 0 32px rgba(0, 0, 0, 0.72),
      inset 0 22px 42px rgba(0, 0, 0, 0.68),
      0 35px 58px rgba(0, 0, 0, 0.7);
    transition:
      left 760ms var(--ease-cinematic),
      top 760ms var(--ease-cinematic),
      width 760ms var(--ease-cinematic),
      height 760ms var(--ease-cinematic),
      transform 760ms var(--ease-cinematic),
      filter 760ms var(--ease-cinematic),
      opacity 760ms var(--ease-cinematic),
      border-radius 760ms var(--ease-cinematic),
      box-shadow 760ms var(--ease-cinematic);
  }

  .studio-room::before {
    inset: 2.2% 2% 1.5%;
    border: 1px solid rgba(198, 161, 91, 0.23);
    border-radius: inherit;
    opacity: 0.88;
    background:
      linear-gradient(
        to right,
        rgba(1, 1, 1, 0.5),
        transparent 8% 92%,
        rgba(1, 1, 1, 0.5)
      ),
      linear-gradient(to bottom, rgba(5, 4, 3, 0.18), transparent 68%, rgba(0, 0, 0, 0.36));
    box-shadow:
      inset 12px 0 22px rgba(0, 0, 0, 0.62),
      inset -12px 0 22px rgba(0, 0, 0, 0.62),
      inset 0 15px 25px rgba(0, 0, 0, 0.55);
  }

  .studio-room::after {
    background:
      linear-gradient(to top, rgba(3, 3, 2, 0.34), transparent 24%),
      rgba(2, 2, 2, 0.06);
  }

  .studio-room > .room-atmosphere {
    inset: -7%;
    width: 114%;
    height: 114%;
    opacity: 0.98;
    filter: blur(11px) brightness(0.48) saturate(0.76);
    transform: scale(1.08);
  }

  .studio-room > .room-background {
    object-fit: cover;
    opacity: 0.2;
    filter: blur(5px) brightness(0.58) saturate(0.76);
    transform: scale(1.04);
  }

  .room-character {
    left: 2.3%;
    top: 20.5%;
    width: 22%;
    height: 55%;
  }

  .room-story {
    left: 25.7%;
    top: 25%;
    width: 14.8%;
    height: 50.5%;
  }

  .room-process {
    left: 59.5%;
    top: 25%;
    width: 14.8%;
    height: 50.5%;
  }

  .room-graphic {
    left: 75.7%;
    top: 20.5%;
    width: 22%;
    height: 55%;
  }

  .room-heading {
    top: 7%;
    min-height: 15%;
  }

  .studio-welcome {
    left: 42.5%;
    top: 27%;
    width: 15%;
  }

  .is-room-focused .studio-room:not(.is-active),
  .is-room-focused .scene-header,
  .is-room-focused .studio-welcome,
  .is-room-focused .studio-medallion,
  .is-room-focused .studio-environment {
    opacity: 0.5;
    filter: blur(5px) brightness(0.56);
  }

  .studio-room.is-active {
    left: 50%;
    top: 52%;
    width: min(72vw, 1240px);
    height: min(74%, 780px);
    z-index: 40;
    border-radius: 50% 50% 2px 2px / 18% 18% 2px 2px;
    filter: brightness(1.08) saturate(1.05);
    transform: translate(-50%, -50%);
    box-shadow:
      0 0 0 5px rgba(7, 6, 5, 0.96),
      0 0 0 6px rgba(224, 184, 109, 0.72),
      0 0 0 15px rgba(17, 14, 12, 0.94),
      0 0 0 16px rgba(214, 170, 100, 0.3),
      0 0 72px rgba(214, 170, 100, 0.24),
      inset 22px 0 38px rgba(0, 0, 0, 0.58),
      inset -22px 0 38px rgba(0, 0, 0, 0.58),
      0 42px 82px rgba(0, 0, 0, 0.76);
  }

  .studio-room.room-character.is-active,
  .studio-room.room-story.is-active,
  .studio-room.room-process.is-active,
  .studio-room.room-graphic.is-active {
    transform: translate(-50%, -50%);
  }

  .studio-room.is-active > .room-atmosphere {
    opacity: 0.04;
    filter: blur(15px) brightness(0.42);
    transform: scale(1.01);
  }

  .studio-room.is-active > .room-background {
    object-fit: contain;
    opacity: 1;
    background: #090807;
    filter: blur(0) brightness(1.07) saturate(1.03);
    transform: scale(1);
  }

  .studio-room.is-active::before {
    inset: 1.4%;
    opacity: 0.34;
  }

  .studio-viewport.is-entering .studio-room.is-active,
  .studio-viewport.is-entering .studio-room.room-character.is-active,
  .studio-viewport.is-entering .studio-room.room-story.is-active,
  .studio-viewport.is-entering .studio-room.room-process.is-active,
  .studio-viewport.is-entering .studio-room.room-graphic.is-active {
    width: min(82vw, 1450px);
    height: min(82%, 850px);
    transform: translate(-50%, -50%) scale(1.02);
  }
}

/* Final cascade ordering for the continuous-room geometry. */

@media (min-width: 981px) {
  .room-character {
    left: 2.3%;
    top: 18.9%;
    width: 22%;
    height: 52%;
  }

  .room-story {
    left: 25.7%;
    top: 24.3%;
    width: 14.8%;
    height: 46.6%;
  }

  .room-process {
    left: 59.5%;
    top: 24.3%;
    width: 14.8%;
    height: 46.6%;
  }

  .room-graphic {
    left: 75.7%;
    top: 18.9%;
    width: 22%;
    height: 52%;
  }

  .studio-room.is-active {
    left: 50%;
    top: 52%;
    width: min(78vw, calc(132svh - 156px), 1240px);
    height: auto;
    aspect-ratio: 3 / 2;
    transform: translate(-50%, -50%);
  }

  .studio-room.room-character.is-active,
  .studio-room.room-story.is-active,
  .studio-room.room-process.is-active,
  .studio-room.room-graphic.is-active {
    transform: translate(-50%, -50%);
  }

  .is-room-focused .studio-architecture {
    opacity: 0.5;
    filter: blur(5px) brightness(0.56);
  }

  .studio-viewport.is-entering .studio-room.is-active,
  .studio-viewport.is-entering .studio-room.room-character.is-active,
  .studio-viewport.is-entering .studio-room.room-story.is-active,
  .studio-viewport.is-entering .studio-room.room-process.is-active,
  .studio-viewport.is-entering .studio-room.room-graphic.is-active {
    width: min(84vw, calc(142svh - 168px), 1420px);
    height: auto;
    transform: translate(-50%, -50%) scale(1.015);
  }
}
/* v2.5 — panoramic Studio Floor, locked room approaches, and Behind the Mark. */

.studio-viewport {
  min-height: 690px;
}

.studio-camera,
.studio-viewport.is-entering .studio-camera,
.is-room-focused .studio-camera,
.is-medallion-focused .studio-camera {
  transform: none;
  transform-origin: center;
  transition: none;
}

.studio-resting-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 1400px;
  transform: translateZ(0);
  transition:
    opacity 1150ms var(--ease-cinematic),
    filter 1150ms var(--ease-cinematic);
  will-change: opacity, filter;
}

.studio-environment {
  background:
    radial-gradient(ellipse at 50% 11%, rgba(150, 92, 45, 0.17), transparent 36%),
    radial-gradient(ellipse at 7% 48%, rgba(125, 61, 34, 0.13), transparent 29%),
    radial-gradient(ellipse at 93% 48%, rgba(125, 61, 34, 0.13), transparent 29%),
    repeating-radial-gradient(
      circle at 22% 35%,
      rgba(255, 255, 255, 0.013) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(to bottom, #0e0d0c 0 70.6%, #090807 70.6% 100%);
}

.studio-environment::before {
  opacity: 0.54;
  background:
    linear-gradient(
      to bottom,
      rgba(214, 170, 100, 0.1),
      transparent 1.5% 67%,
      rgba(0, 0, 0, 0.56) 70.7%,
      transparent 72%
    ),
    linear-gradient(90deg, transparent 49.9%, rgba(198, 161, 91, 0.04) 50%, transparent 50.1%);
}

.studio-environment::after {
  display: none;
}

.studio-floor {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 70.4%;
  bottom: -13%;
  z-index: 8;
  overflow: hidden;
  border-top: 1px solid rgba(226, 184, 104, 0.43);
  background:
    radial-gradient(ellipse at 50% -2%, rgba(208, 151, 76, 0.17), transparent 34%),
    radial-gradient(ellipse at 28% 90%, rgba(149, 91, 42, 0.18), transparent 38%),
    radial-gradient(ellipse at 72% 90%, rgba(149, 91, 42, 0.18), transparent 38%),
    repeating-linear-gradient(
      16deg,
      transparent 0 124px,
      rgba(198, 161, 91, 0.16) 125px,
      transparent 127px 250px
    ),
    repeating-linear-gradient(
      -16deg,
      transparent 0 124px,
      rgba(198, 161, 91, 0.16) 125px,
      transparent 127px 250px
    ),
    linear-gradient(135deg, #1a1511, #090807 47%, #17120f);
  box-shadow:
    inset 0 30px 52px rgba(0, 0, 0, 0.78),
    0 -18px 36px rgba(0, 0, 0, 0.52);
  transform: perspective(900px) rotateX(42deg) scale(1.18);
  transform-origin: top;
}

.floor-marble,
.floor-reflection {
  position: absolute;
  display: block;
  pointer-events: none;
}

.floor-marble {
  inset: 0;
  opacity: 0.72;
  background:
    conic-gradient(
      from 225deg at 50% -10%,
      transparent 0 8deg,
      rgba(218, 174, 93, 0.52) 8.15deg 8.35deg,
      transparent 8.5deg 21deg,
      rgba(218, 174, 93, 0.42) 21.15deg 21.35deg,
      transparent 21.5deg 42deg,
      rgba(218, 174, 93, 0.38) 42.15deg 42.35deg,
      transparent 42.5deg 74deg,
      rgba(218, 174, 93, 0.42) 74.15deg 74.35deg,
      transparent 74.5deg 87deg,
      rgba(218, 174, 93, 0.52) 87.15deg 87.35deg,
      transparent 87.5deg 100%
    ),
    radial-gradient(circle at 50% 8%, transparent 0 22%, rgba(198, 161, 91, 0.25) 22.3% 22.6%, transparent 22.9%);
  mix-blend-mode: screen;
}

.floor-reflection {
  top: -7%;
  width: 26%;
  height: 90%;
  opacity: 0.38;
  filter: blur(15px);
  background: linear-gradient(to bottom, rgba(226, 171, 88, 0.32), transparent 72%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}

.floor-reflection-left {
  left: 2%;
  transform: rotate(2deg);
}

.floor-reflection-right {
  right: 2%;
  transform: rotate(-2deg);
}

.studio-architecture {
  overflow: visible;
}

.studio-baseboard {
  top: 69.85%;
  z-index: 14;
}

.studio-cornice {
  top: 16.2%;
}

.studio-center-panel {
  left: 41.5%;
  top: 20%;
  width: 17%;
  height: 47.5%;
  border-color: rgba(198, 161, 91, 0.11);
  background:
    radial-gradient(ellipse at 50% 13%, rgba(135, 76, 35, 0.09), transparent 44%),
    linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent 18% 82%, rgba(0, 0, 0, 0.3)),
    rgba(8, 8, 7, 0.25);
  box-shadow:
    inset 0 0 72px rgba(0, 0, 0, 0.46),
    0 0 0 9px rgba(4, 4, 3, 0.3),
    0 0 0 10px rgba(198, 161, 91, 0.06);
}

.studio-wing {
  position: absolute;
  top: 16.7%;
  bottom: 29.3%;
  width: 31%;
  display: block;
  border-top: 1px solid rgba(198, 161, 91, 0.12);
  border-bottom: 1px solid rgba(198, 161, 91, 0.1);
  background:
    repeating-radial-gradient(
      circle at 30% 30%,
      rgba(255, 255, 255, 0.012) 0 1px,
      transparent 1px 4px
    ),
    linear-gradient(to bottom, rgba(44, 32, 22, 0.16), rgba(4, 4, 3, 0.28)),
    #0c0b0a;
  box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.46);
}

.studio-wing-left {
  left: -4%;
  clip-path: polygon(0 5%, 100% 0, 94% 100%, 0 88%);
  transform: perspective(1050px) rotateY(7deg);
  transform-origin: left center;
}

.studio-wing-right {
  right: -4%;
  clip-path: polygon(0 0, 100% 5%, 100% 88%, 6% 100%);
  transform: perspective(1050px) rotateY(-7deg);
  transform-origin: right center;
}

.studio-pilaster {
  top: 17.7%;
  bottom: 29.4%;
}

.pilaster-one {
  left: 25.4%;
}

.pilaster-two {
  left: 41%;
}

.pilaster-three {
  right: 41%;
}

.pilaster-four {
  right: 25.4%;
}

.sconce-left {
  left: 40.2%;
}

.sconce-right {
  right: 40.2%;
}

.studio-room,
.studio-room:hover,
.studio-room:focus-visible {
  overflow: hidden;
  border: 1px solid rgba(209, 168, 95, 0.64);
  border-bottom-color: rgba(229, 190, 113, 0.85);
  border-radius: 50% 50% 2px 2px / 22% 22% 2px 2px;
  background: #080706;
  outline: none;
  box-shadow:
    0 0 0 4px rgba(5, 5, 4, 0.98),
    0 0 0 5px rgba(198, 161, 91, 0.44),
    0 0 0 12px rgba(19, 16, 13, 0.98),
    0 0 0 13px rgba(198, 161, 91, 0.18),
    inset 18px 0 36px rgba(0, 0, 0, 0.78),
    inset -18px 0 36px rgba(0, 0, 0, 0.78),
    inset 0 24px 42px rgba(0, 0, 0, 0.68),
    0 34px 58px rgba(0, 0, 0, 0.7);
  transition:
    border-color 650ms var(--ease-cinematic),
    box-shadow 650ms var(--ease-cinematic),
    filter 650ms var(--ease-cinematic);
}

.studio-room::before {
  inset: 1.8%;
  z-index: 4;
  border: 1px solid rgba(198, 161, 91, 0.23);
  border-radius: inherit;
  opacity: 0.9;
  background:
    linear-gradient(to right, rgba(1, 1, 1, 0.58), transparent 10% 90%, rgba(1, 1, 1, 0.58)),
    linear-gradient(to bottom, rgba(2, 2, 2, 0.28), transparent 68%, rgba(0, 0, 0, 0.42));
  box-shadow:
    inset 14px 0 26px rgba(0, 0, 0, 0.64),
    inset -14px 0 26px rgba(0, 0, 0, 0.64),
    inset 0 18px 28px rgba(0, 0, 0, 0.58);
}

.studio-room::after {
  z-index: 5;
  background:
    radial-gradient(ellipse at 50% 46%, transparent 8%, rgba(2, 2, 2, 0.18) 65%, rgba(2, 2, 2, 0.55)),
    linear-gradient(to top, rgba(1, 1, 1, 0.36), transparent 28%);
}

.studio-room > .room-atmosphere,
.studio-room > .room-background,
.studio-room:hover > .room-atmosphere,
.studio-room:hover > .room-background,
.studio-room:focus-visible > .room-atmosphere,
.studio-room:focus-visible > .room-background {
  position: absolute;
  inset: -6%;
  width: 112%;
  max-width: none;
  height: 112%;
  object-fit: cover;
  object-position: center;
  opacity: 0.95;
  filter: blur(10px) brightness(0.52) saturate(0.78);
  transform: scale(1.06);
  transition:
    filter 720ms var(--ease-cinematic),
    opacity 720ms var(--ease-cinematic);
}

.studio-room > .room-background,
.studio-room:hover > .room-background,
.studio-room:focus-visible > .room-background {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.26;
  filter: blur(4.5px) brightness(0.62) saturate(0.78);
  transform: scale(1.03);
}

.studio-room:hover,
.studio-room:focus-visible {
  border-color: rgba(232, 191, 113, 0.82);
  box-shadow:
    0 0 0 4px rgba(5, 5, 4, 0.98),
    0 0 0 5px rgba(221, 178, 99, 0.62),
    0 0 0 12px rgba(19, 16, 13, 0.98),
    0 0 0 13px rgba(198, 161, 91, 0.24),
    inset 18px 0 36px rgba(0, 0, 0, 0.74),
    inset -18px 0 36px rgba(0, 0, 0, 0.74),
    inset 0 24px 42px rgba(0, 0, 0, 0.64),
    0 36px 62px rgba(0, 0, 0, 0.74);
}

.studio-room:hover .room-light,
.studio-room:focus-visible .room-light {
  opacity: 0.34;
}

.room-heading {
  z-index: 7;
  top: 7%;
  min-height: 15%;
}

.room-threshold {
  z-index: 8;
  height: 11px;
}

.studio-medallion {
  cursor: pointer;
  transition:
    opacity 520ms var(--ease-cinematic),
    filter 520ms var(--ease-cinematic);
}

.studio-medallion::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 160%;
  height: 135%;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    ellipse,
    rgba(199, 146, 68, 0.23),
    rgba(153, 99, 44, 0.09) 42%,
    transparent 72%
  );
  filter: blur(13px);
  transform: translate(-50%, -50%) scale(0.72);
  transition:
    opacity 780ms var(--ease-cinematic) 260ms,
    transform 1050ms var(--ease-cinematic) 260ms;
}

.medallion-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 230%;
  height: 190%;
  display: block;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(ellipse, transparent 0 25%, rgba(199, 146, 68, 0.11) 44%, transparent 72%),
    conic-gradient(
      from 0deg,
      transparent,
      rgba(207, 157, 78, 0.12),
      transparent 22% 50%,
      rgba(207, 157, 78, 0.1),
      transparent 72%
    );
  filter: blur(10px);
  transform: translate(-50%, -50%) scale(0.76);
  transition:
    opacity 900ms var(--ease-cinematic) 420ms,
    transform 1150ms var(--ease-cinematic) 420ms;
}

.medallion-label {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 9;
  padding-top: 0.45rem;
  color: var(--antique-gold);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: clamp(0.52rem, 0.75vw, 0.7rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 5px);
  transition:
    opacity 600ms var(--ease-cinematic) 560ms,
    transform 600ms var(--ease-cinematic) 560ms;
}

.is-medallion-focused .studio-room::after,
.is-medallion-focused .studio-welcome {
  background: initial;
  color: inherit;
  filter: none;
}

.is-medallion-focused .studio-welcome {
  color: var(--gold);
}

.is-medallion-focused .studio-medallion::before,
.studio-medallion:focus-visible::before,
.is-mark-entering .studio-medallion::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.is-medallion-focused .medallion-halo,
.studio-medallion:focus-visible .medallion-halo,
.is-mark-entering .medallion-halo {
  opacity: 0.86;
  transform: translate(-50%, -50%) scale(1);
}

.is-medallion-focused .studio-medallion img,
.studio-medallion:focus-visible img,
.is-mark-entering .studio-medallion img {
  opacity: 1;
  filter:
    contrast(1.12)
    saturate(1.1)
    drop-shadow(0 0 10px rgba(205, 151, 75, 0.32))
    drop-shadow(0 7px 9px rgba(0, 0, 0, 0.74));
  animation: medallion-depth-breathe 5.5s ease-in-out infinite 900ms;
}

.is-medallion-focused .medallion-ring,
.studio-medallion:focus-visible .medallion-ring,
.is-mark-entering .medallion-ring {
  border-color: rgba(224, 184, 109, 0.9);
  box-shadow:
    0 0 0 6px rgba(4, 4, 3, 0.78),
    0 0 0 7px rgba(224, 184, 109, 0.7),
    0 0 38px rgba(180, 123, 53, 0.22),
    inset 0 0 36px rgba(200, 145, 67, 0.17);
}

.is-medallion-focused .medallion-inlays,
.studio-medallion:focus-visible .medallion-inlays,
.is-mark-entering .medallion-inlays {
  width: 248%;
  opacity: 0.82;
  filter: blur(0.2px) drop-shadow(0 0 7px rgba(185, 128, 58, 0.42));
}

.is-medallion-focused .medallion-label,
.studio-medallion:focus-visible .medallion-label,
.is-mark-entering .medallion-label {
  opacity: 1;
  transform: translate(-50%, 0);
}

@keyframes medallion-depth-breathe {
  0%,
  100% {
    filter:
      contrast(1.1)
      saturate(1.08)
      drop-shadow(0 0 8px rgba(205, 151, 75, 0.27))
      drop-shadow(0 7px 9px rgba(0, 0, 0, 0.74));
  }
  50% {
    filter:
      contrast(1.16)
      saturate(1.12)
      drop-shadow(0 0 16px rgba(205, 151, 75, 0.34))
      drop-shadow(0 7px 9px rgba(0, 0, 0, 0.74));
  }
}

.room-focus-stage {
  position: absolute;
  left: 50%;
  top: 51.5%;
  z-index: 80;
  width: min(84vw, calc(132svh - 128px), 1380px);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid rgba(222, 180, 103, 0.72);
  background: #080706;
  box-shadow:
    0 0 0 6px rgba(6, 5, 4, 0.96),
    0 0 0 7px rgba(218, 174, 98, 0.46),
    0 0 76px rgba(198, 136, 60, 0.2),
    0 46px 100px rgba(0, 0, 0, 0.82);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -48%) scale(0.68);
  transform-origin: center;
  transition:
    transform 1450ms cubic-bezier(0.22, 0.72, 0.16, 1),
    opacity 760ms ease;
  will-change: transform, opacity;
}

.focused-room-link {
  position: absolute;
  inset: 0;
  display: block;
}

.focused-room-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.focused-room-entry {
  position: absolute;
  right: 1.2rem;
  bottom: 1rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(214, 170, 100, 0.5);
  color: var(--antique-gold);
  background: rgba(17, 10, 9, 0.78);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 480ms ease 1050ms,
    transform 480ms ease 1050ms,
    border-color 280ms ease,
    color 280ms ease;
}

.focused-room-link:hover .focused-room-entry,
.focused-room-link:focus-visible .focused-room-entry {
  color: var(--bright-gold);
  border-color: var(--bright-gold);
}

.focus-return-sign {
  position: absolute;
  left: 50%;
  bottom: 1.15rem;
  z-index: 95;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.78rem 1.25rem 0.72rem;
  border: 1px solid rgba(222, 180, 103, 0.78);
  border-radius: 2px;
  color: var(--antique-gold);
  background:
    linear-gradient(180deg, rgba(90, 29, 37, 0.96), rgba(42, 13, 18, 0.98)),
    radial-gradient(circle at 50% 0%, rgba(214, 170, 100, 0.17), transparent 58%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.54),
    0 0 0 4px rgba(9, 8, 7, 0.9),
    0 0 0 5px rgba(184, 139, 70, 0.3),
    inset 0 1px rgba(255, 222, 158, 0.13);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition:
    opacity 520ms ease 1020ms,
    transform 520ms var(--ease-cinematic) 1020ms,
    border-color 280ms ease,
    color 280ms ease,
    box-shadow 280ms ease;
}

.focus-return-sign span {
  width: 1.55rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214, 170, 100, 0.48);
  border-radius: 50%;
}

.focus-return-sign:hover,
.focus-return-sign:focus-visible {
  color: var(--bright-gold);
  border-color: var(--bright-gold);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.6),
    0 0 0 4px rgba(9, 8, 7, 0.94),
    0 0 0 5px rgba(214, 170, 100, 0.5),
    0 0 26px rgba(198, 161, 91, 0.14);
  outline: none;
}

.is-room-focused .studio-resting-scene {
  opacity: 0.44;
  filter: blur(2.2px) brightness(0.58) saturate(0.78);
  pointer-events: none;
}

.is-room-focused .studio-medallion {
  opacity: 0;
}

.is-room-focused .room-focus-stage {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.phase-open .room-focus-stage,
.phase-entering .room-focus-stage {
  pointer-events: auto;
}

.phase-open .focused-room-entry {
  opacity: 1;
  transform: translateY(0);
}

.phase-open .focus-return-sign {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.phase-closing .studio-resting-scene {
  opacity: 1;
  filter: none;
}

.phase-closing .room-focus-stage {
  opacity: 0;
  transform: translate(-50%, -48%) scale(0.78);
  pointer-events: none;
  transition:
    transform 1200ms cubic-bezier(0.42, 0, 0.22, 1),
    opacity 760ms ease 180ms;
}

.phase-closing .focus-return-sign {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition-delay: 0ms;
}

.studio-viewport.is-entering .room-focus-stage {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.035);
  transition-duration: 920ms;
}

.studio-viewport.is-entering .focus-return-sign {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0ms;
}

.studio-viewport.is-entering .scene-fade,
.studio-viewport.is-mark-entering .scene-fade {
  opacity: 1;
  transition-duration: 760ms;
}

.behind-mark-page {
  width: min(1320px, calc(100% - 64px));
  min-height: calc(100svh - 236px);
  margin: 0 auto;
  padding: 42px 0 100px;
}

.behind-mark-panel {
  position: relative;
  max-width: 880px;
  min-height: 470px;
  margin: 8px auto 0;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: clamp(48px, 8vw, 96px);
  border: 1px solid rgba(198, 161, 91, 0.28);
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 25%, rgba(103, 35, 42, 0.38), transparent 52%),
    repeating-radial-gradient(
      circle at 22% 30%,
      rgba(255, 255, 255, 0.012) 0 1px,
      transparent 1px 4px
    ),
    #11100f;
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.42),
    0 34px 80px rgba(0, 0, 0, 0.36);
}

.behind-mark-panel::before,
.behind-mark-panel::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: rgba(214, 170, 100, 0.58);
  border-style: solid;
}

.behind-mark-panel::before {
  left: 13px;
  top: 13px;
  border-width: 1px 0 0 1px;
}

.behind-mark-panel::after {
  right: 13px;
  bottom: 13px;
  border-width: 0 1px 1px 0;
}

.behind-mark-eyebrow {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.behind-mark-emblem {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 1rem;
  filter:
    contrast(1.08)
    saturate(1.05)
    drop-shadow(0 0 16px rgba(198, 144, 67, 0.18));
}

.behind-mark-panel h1 {
  margin: 0;
  color: var(--bright-gold);
  font-family: Cinzel, "Trajan Pro", Georgia, serif;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  font-weight: 400;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}

.behind-mark-placeholder {
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.25vw, 1.08rem);
  line-height: 1.7;
}

@media (min-width: 981px) {
  .studio-viewport {
    height: calc(100svh - 118px);
    min-height: 690px;
  }

  .room-character {
    left: -1.5%;
    top: 18.5%;
    width: 28%;
    height: 52.2%;
    transform: perspective(1150px) rotateY(9deg) translateZ(-18px);
    transform-origin: right bottom;
  }

  .room-story {
    left: 27%;
    top: 27.1%;
    width: 15.6%;
    height: 43.6%;
    transform: perspective(1150px) rotateY(4.5deg) translateZ(-48px);
    transform-origin: right bottom;
  }

  .room-process {
    left: 57.4%;
    top: 27.1%;
    width: 15.6%;
    height: 43.6%;
    transform: perspective(1150px) rotateY(-4.5deg) translateZ(-48px);
    transform-origin: left bottom;
  }

  .room-graphic {
    left: 73.5%;
    top: 18.5%;
    width: 28%;
    height: 52.2%;
    transform: perspective(1150px) rotateY(-9deg) translateZ(-18px);
    transform-origin: left bottom;
  }

  .studio-welcome {
    left: 42.5%;
    top: 27%;
    width: 15%;
  }
}

@media (max-width: 980px) {
  .studio-resting-scene {
    min-height: inherit;
  }

  .studio-floor,
  .studio-wing {
    display: none;
  }

  .studio-room,
  .studio-room:hover,
  .studio-room:focus-visible {
    transform: none;
  }

  .room-focus-stage {
    position: fixed;
    top: 50%;
    width: calc(100vw - 28px);
    max-height: calc(100svh - 150px);
  }

  .focus-return-sign {
    position: fixed;
    bottom: 1rem;
  }

  .behind-mark-page {
    width: calc(100% - 32px);
    padding: 30px 0 80px;
  }
}

@media (max-width: 680px) {
  .room-focus-stage {
    width: calc(100vw - 20px);
  }

  .focus-return-sign {
    width: calc(100vw - 40px);
    justify-content: center;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
  }

  .behind-mark-panel {
    min-height: 420px;
    padding: 44px 24px;
  }

  .behind-mark-panel h1 {
    font-size: clamp(2.25rem, 12vw, 3.6rem);
  }
}

/* v2.6 — the user-rendered architectural shell becomes the Studio Floor. */

.studio-architecture-shell,
.studio-room-labels {
  display: none;
}

@media (min-width: 981px) {
  .studio-viewport {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    background: #050403;
  }

  .studio-camera,
  .studio-resting-scene {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .studio-environment {
    background:
      radial-gradient(ellipse at 50% 43%, rgba(102, 57, 27, 0.16), transparent 46%),
      #050403;
  }

  .studio-floor,
  .studio-architecture {
    display: none;
  }

  .studio-rooms {
    inset: 0;
    z-index: 10;
  }

  .studio-room,
  .studio-room:hover,
  .studio-room:focus-visible {
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background: #040302;
    box-shadow: none;
    outline: none;
    transform: none;
    transition:
      filter 720ms var(--ease-cinematic),
      opacity 720ms var(--ease-cinematic);
  }

  .studio-room::before {
    inset: 0;
    z-index: 3;
    border: 0;
    border-radius: 0;
    opacity: 1;
    background:
      radial-gradient(ellipse at 50% 48%, transparent 12%, rgba(0, 0, 0, 0.2) 75%),
      linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 38%);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
  }

  .studio-room::after {
    inset: 0;
    z-index: 4;
    background: rgba(3, 2, 2, 0.1);
  }

  .studio-room > .room-atmosphere,
  .studio-room:hover > .room-atmosphere,
  .studio-room:focus-visible > .room-atmosphere {
    position: absolute;
    inset: -16%;
    width: 132%;
    max-width: none;
    height: 132%;
    display: block;
    object-fit: cover;
    object-position: center 64%;
    opacity: 0.88;
    filter: blur(8px) brightness(0.62) saturate(0.8);
    transform: translateZ(0);
    transition:
      filter 900ms var(--ease-cinematic),
      opacity 900ms var(--ease-cinematic);
  }

  .studio-room > .room-background,
  .studio-room > .room-heading,
  .studio-room > .room-threshold {
    display: none;
  }

  .studio-room .room-light,
  .studio-room:hover .room-light,
  .studio-room:focus-visible .room-light {
    z-index: 2;
    opacity: 0.23;
    background:
      radial-gradient(ellipse at 50% 4%, rgba(255, 194, 109, 0.3), transparent 37%),
      linear-gradient(to bottom, rgba(104, 52, 27, 0.06), transparent 70%);
  }

  .room-character {
    left: 4%;
    top: 28.9%;
    width: 15%;
    height: 42.6%;
  }

  .room-story {
    left: 26%;
    top: 31.7%;
    width: 12.15%;
    height: 37.25%;
  }

  .room-process {
    left: 61.7%;
    top: 31.7%;
    width: 12.15%;
    height: 37.25%;
  }

  .room-graphic {
    left: 80.9%;
    top: 28.9%;
    width: 15%;
    height: 42.6%;
  }

  .studio-architecture-shell {
    position: absolute;
    inset: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    pointer-events: none;
    user-select: none;
  }

  .studio-room-labels {
    position: absolute;
    inset: 0;
    z-index: 32;
    display: block;
    pointer-events: none;
  }

  .studio-room-label {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--bright-gold);
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: clamp(0.56rem, 0.92vw, 1.08rem);
    letter-spacing: 0.09em;
    line-height: 1.15;
    text-align: center;
    text-shadow:
      0 2px 10px rgba(0, 0, 0, 0.96),
      0 0 15px rgba(198, 145, 67, 0.16);
    text-transform: uppercase;
  }

  .studio-room-label i {
    position: relative;
    width: clamp(30px, 3.3vw, 64px);
    height: 1px;
    display: block;
    margin-top: clamp(5px, 0.55vw, 10px);
    background: linear-gradient(90deg, transparent, rgba(214, 170, 100, 0.9), transparent);
  }

  .studio-room-label i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 4px;
    height: 4px;
    border: 1px solid var(--antique-gold);
    background: #24140d;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .room-character-label {
    left: 3.2%;
    top: 21.7%;
    width: 17%;
  }

  .room-story-label {
    left: 25%;
    top: 24.3%;
    width: 14%;
  }

  .room-process-label {
    left: 60.8%;
    top: 24.3%;
    width: 14%;
  }

  .room-graphic-label {
    left: 80%;
    top: 21.7%;
    width: 17%;
  }

  .scene-header {
    z-index: 42;
  }

  .scene-signature {
    top: 1.15%;
    width: clamp(330px, 34vw, 700px);
    height: clamp(64px, 8.1vw, 150px);
  }

  .scene-header > p {
    top: 11.9%;
  }

  .studio-welcome {
    left: 41.8%;
    top: 25.5%;
    z-index: 34;
    width: 16.4%;
  }

  .studio-welcome h1 {
    font-size: clamp(2.35rem, 4.15vw, 5.4rem);
  }

  .studio-welcome > p:last-of-type {
    font-size: clamp(0.68rem, 0.82vw, 1rem);
    line-height: 1.56;
  }

  .studio-medallion {
    left: 50%;
    top: 85.8%;
    bottom: auto;
    z-index: 36;
    width: 29.2%;
    height: 13.8%;
    transform: translate(-50%, -50%);
  }

  .studio-medallion img {
    width: 34%;
    transform: translate(-50%, -50%) scaleY(0.54);
  }

  .medallion-ring {
    inset: 7% 8%;
  }

  .room-focus-stage {
    top: 50%;
    width: min(88vw, calc(170svh - 150px), 1500px);
    aspect-ratio: 7 / 4;
  }

  .focused-room-link img {
    object-fit: contain;
  }

  .is-room-focused .studio-resting-scene {
    opacity: 0.36;
    filter: blur(2px) brightness(0.5) saturate(0.72);
  }
}

@media (max-width: 980px) {
  .studio-architecture-shell,
  .studio-room-labels {
    display: none;
  }
}

/* v2.7 — alignment polish, hover intent, and the completed maker's-mark sequence. */

.studio-opening-shadows,
.studio-floor-glow {
  display: none;
}

.studio-placeholder-panel h1 {
  max-width: 100%;
  font-size: clamp(2.35rem, 5.2vw, 4.9rem);
}

@media (min-width: 981px) {
  .scene-header {
    z-index: 46;
  }

  .scene-signature {
    top: 1.35%;
    width: clamp(360px, 37vw, 740px);
    height: clamp(70px, 8.8vw, 156px);
    filter:
      drop-shadow(0 2px 7px rgba(0, 0, 0, 0.92))
      drop-shadow(0 0 16px rgba(198, 161, 91, 0.2));
  }

  .scene-header > p {
    top: 11.2%;
    color: #d2aa63;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
  }

  .studio-room-label {
    font-size: clamp(0.62rem, 0.98vw, 1.12rem);
  }

  .room-character-label {
    left: 3.4%;
    top: 21.9%;
    width: 16.6%;
  }

  .room-story-label {
    left: 25.1%;
    top: 24.5%;
    width: 13.9%;
  }

  .room-process-label {
    left: 60.8%;
    top: 24.5%;
    width: 14%;
  }

  .room-graphic-label {
    left: 80.1%;
    top: 21.9%;
    width: 16.7%;
  }

  .studio-welcome {
    left: 41%;
    top: 26.2%;
    width: 18%;
  }

  .studio-welcome .eyebrow {
    font-size: clamp(0.55rem, 0.73vw, 0.82rem);
  }

  .studio-welcome h1 {
    font-size: clamp(2.65rem, 4.55vw, 5.8rem);
  }

  .studio-welcome > p:last-of-type {
    font-size: clamp(0.74rem, 0.92vw, 1.08rem);
    line-height: 1.62;
    text-shadow: 0 2px 9px rgba(0, 0, 0, 0.94);
  }

  .studio-opening-shadows {
    position: absolute;
    inset: 0;
    z-index: 31;
    display: block;
    pointer-events: none;
  }

  .opening-shadow {
    position: absolute;
    display: block;
    box-shadow:
      inset 0 0 10px 4px rgba(0, 0, 0, 0.9),
      inset 0 -9px 14px rgba(0, 0, 0, 0.78);
  }

  .room-character-shadow {
    left: 3.75%;
    top: 28.65%;
    width: 15.45%;
    height: 43.1%;
  }

  .room-story-shadow {
    left: 25.75%;
    top: 31.45%;
    width: 12.55%;
    height: 37.65%;
  }

  .room-process-shadow {
    left: 61.5%;
    top: 31.45%;
    width: 12.55%;
    height: 37.65%;
  }

  .room-graphic-shadow {
    left: 80.65%;
    top: 28.65%;
    width: 15.55%;
    height: 43.1%;
  }

  .studio-floor-glow {
    position: absolute;
    inset: 0;
    z-index: 35;
    display: block;
    overflow: hidden;
    pointer-events: none;
  }

  .floor-glow-line {
    --line-angle: 0deg;
    position: absolute;
    height: 2px;
    display: block;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(
      90deg,
      rgba(198, 143, 65, 0.06),
      rgba(228, 181, 94, 0.76) 76%,
      rgba(244, 207, 132, 0.96)
    );
    box-shadow:
      0 0 4px rgba(214, 155, 72, 0.62),
      0 0 12px rgba(184, 119, 45, 0.32);
    transform: rotate(var(--line-angle)) scaleX(0);
    transform-origin: left center;
  }

  .floor-glow-left-outer {
    --line-angle: 10deg;
    left: 12.2%;
    top: 72.5%;
    width: 38.2%;
  }

  .floor-glow-left-inner {
    --line-angle: 24deg;
    left: 32.4%;
    top: 70.4%;
    width: 19.2%;
  }

  .floor-glow-right-inner {
    --line-angle: -24deg;
    left: 48.4%;
    top: 84%;
    width: 19.2%;
    transform-origin: right center;
  }

  .floor-glow-right-outer {
    --line-angle: -10deg;
    left: 49.6%;
    top: 84%;
    width: 38.2%;
    transform-origin: right center;
  }

  .is-medallion-focused .floor-glow-line {
    animation: floor-line-charge 1.18s cubic-bezier(0.2, 0.66, 0.2, 1) both;
  }

  .is-medallion-focused .floor-glow-left-inner {
    animation-delay: 120ms;
  }

  .is-medallion-focused .floor-glow-right-inner {
    animation-delay: 230ms;
  }

  .is-medallion-focused .floor-glow-right-outer {
    animation-delay: 350ms;
  }

  @keyframes floor-line-charge {
    0% {
      opacity: 0;
      transform: rotate(var(--line-angle)) scaleX(0);
    }
    18% {
      opacity: 1;
    }
    72% {
      opacity: 0.96;
    }
    100% {
      opacity: 0.5;
      transform: rotate(var(--line-angle)) scaleX(1);
    }
  }

  .studio-medallion {
    top: 84.15%;
    width: 28.8%;
    height: 15.5%;
  }

  .studio-medallion img {
    width: 68%;
    opacity: 0.72;
    transform: translate(-50%, -50%) scaleY(0.48);
  }

  .studio-medallion .medallion-ring,
  .studio-medallion .medallion-inlays {
    display: none;
  }

  .studio-medallion::before {
    width: 190%;
    height: 168%;
    transition-delay: 1280ms;
  }

  .medallion-halo {
    width: 286%;
    height: 220%;
    transition-delay: 1420ms;
  }

  .is-medallion-focused .studio-camera {
    transform: none;
  }

  .is-medallion-focused .studio-welcome {
    color: var(--gold);
    filter: none;
  }

  .is-medallion-focused .studio-medallion img,
  .studio-medallion:focus-visible img,
  .is-mark-entering .studio-medallion img {
    animation:
      mark-awaken 1.05s var(--ease-cinematic) 1250ms both,
      medallion-depth-breathe 5.5s ease-in-out 2350ms infinite;
  }

  @keyframes mark-awaken {
    from {
      opacity: 0.72;
      filter:
        contrast(1)
        saturate(0.92)
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.74));
    }
    to {
      opacity: 1;
      filter:
        contrast(1.16)
        saturate(1.13)
        drop-shadow(0 0 18px rgba(205, 151, 75, 0.38))
        drop-shadow(0 8px 10px rgba(0, 0, 0, 0.78));
    }
  }

  .medallion-label,
  .is-medallion-focused .medallion-label,
  .studio-medallion:focus-visible .medallion-label,
  .is-mark-entering .medallion-label {
    top: 108%;
    padding: 0.68rem 1rem 0.62rem;
    border: 1px solid rgba(222, 180, 103, 0.72);
    border-radius: 2px;
    color: var(--antique-gold);
    background: linear-gradient(180deg, rgba(86, 27, 35, 0.97), rgba(39, 12, 16, 0.98));
    box-shadow:
      0 9px 24px rgba(0, 0, 0, 0.58),
      0 0 0 3px rgba(7, 6, 5, 0.9),
      0 0 0 4px rgba(184, 139, 70, 0.27);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 7px);
    transition:
      opacity 480ms ease,
      transform 560ms var(--ease-cinematic),
      color 260ms ease,
      border-color 260ms ease;
  }

  .is-medallion-ready .medallion-label {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .is-medallion-ready .studio-medallion:hover .medallion-label,
  .is-medallion-ready .studio-medallion:focus-visible .medallion-label {
    color: var(--bright-gold);
    border-color: var(--bright-gold);
  }
}

/* v2.8 — desktop architectural refinement. Mobile remains intentionally unchanged. */

@media (min-width: 981px) {
  .scene-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: 13.6%;
    border-bottom: 1px solid rgba(222, 178, 96, 0.74);
    background:
      radial-gradient(ellipse at 50% -20%, rgba(157, 68, 52, 0.24), transparent 56%),
      linear-gradient(90deg, #19080b 0%, #351017 31%, #45151d 50%, #351017 69%, #19080b 100%);
    box-shadow:
      0 1px 0 rgba(10, 7, 5, 0.92),
      0 4px 0 rgba(126, 83, 39, 0.22),
      0 16px 34px rgba(0, 0, 0, 0.5);
  }

  .scene-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 12.9%;
    z-index: -1;
    height: 0.45%;
    min-height: 3px;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(117, 75, 31, 0.55) 5%,
        rgba(222, 178, 96, 0.82) 50%,
        rgba(117, 75, 31, 0.55) 95%,
        transparent
      );
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.74);
  }

  .scene-menu {
    left: 1.9%;
    top: 3.1%;
  }

  .scene-signature {
    top: 0.55%;
    width: clamp(330px, 31vw, 650px);
    height: 8.35%;
    object-fit: contain;
    filter:
      contrast(1.06)
      saturate(1.02)
      drop-shadow(0 2px 5px rgba(0, 0, 0, 0.92))
      drop-shadow(0 0 11px rgba(198, 151, 72, 0.14));
  }

  .scene-header > p {
    top: 9.55%;
    font-size: clamp(0.5rem, 0.68vw, 0.76rem);
    letter-spacing: 0.28em;
  }

  .studio-room-label {
    width: auto;
    font-size: clamp(0.55rem, 0.78vw, 0.96rem);
    letter-spacing: 0.12em;
    transform: translateX(-50%);
  }

  .room-character-label {
    left: 11.5%;
    top: 21.85%;
    width: 15%;
  }

  .room-story-label {
    left: 32.1%;
    top: 24.45%;
    width: 12.2%;
  }

  .room-process-label {
    left: 67.8%;
    top: 24.45%;
    width: 12.2%;
  }

  .room-graphic-label {
    left: 88.45%;
    top: 21.85%;
    width: 15%;
  }

  .studio-welcome {
    left: 42.45%;
    top: 27.1%;
    width: 15.1%;
  }

  .studio-welcome .eyebrow {
    font-size: clamp(0.48rem, 0.6vw, 0.72rem);
    letter-spacing: 0.2em;
  }

  .studio-welcome h1 {
    margin: clamp(8px, 0.85vw, 16px) 0 clamp(6px, 0.7vw, 13px);
    font-size: clamp(2.15rem, 3.65vw, 4.7rem);
  }

  .studio-welcome h1 small {
    font-size: 0.2em;
  }

  .studio-welcome > p:last-of-type {
    font-size: clamp(0.62rem, 0.69vw, 0.86rem);
    line-height: 1.5;
  }

  .studio-room {
    background: #050403;
  }

  .room-character {
    left: 3.55%;
    top: 28.45%;
    width: 15.9%;
    height: 43.55%;
  }

  .room-story {
    left: 25.55%;
    top: 31.2%;
    width: 13%;
    height: 38.15%;
  }

  .room-process {
    left: 61.2%;
    top: 31.2%;
    width: 13%;
    height: 38.15%;
  }

  .room-graphic {
    left: 80.45%;
    top: 28.45%;
    width: 15.95%;
    height: 43.55%;
  }

  .opening-shadow {
    border: clamp(3px, 0.26vw, 6px) solid rgba(4, 3, 2, 0.82);
    background:
      linear-gradient(to right, rgba(1, 1, 1, 0.34), transparent 11% 89%, rgba(1, 1, 1, 0.34)),
      linear-gradient(to bottom, rgba(1, 1, 1, 0.36), transparent 14% 78%, rgba(1, 1, 1, 0.4));
    box-shadow:
      inset 13px 0 20px rgba(0, 0, 0, 0.94),
      inset -13px 0 20px rgba(0, 0, 0, 0.94),
      inset 0 12px 18px rgba(0, 0, 0, 0.92),
      inset 0 -11px 16px rgba(0, 0, 0, 0.84),
      0 0 8px rgba(0, 0, 0, 0.75);
  }

  .room-character-shadow {
    left: 3.82%;
    top: 28.55%;
    width: 15.35%;
    height: 43.25%;
  }

  .room-story-shadow {
    left: 25.82%;
    top: 31.3%;
    width: 12.45%;
    height: 37.85%;
  }

  .room-process-shadow {
    left: 61.47%;
    top: 31.3%;
    width: 12.45%;
    height: 37.85%;
  }

  .room-graphic-shadow {
    left: 80.72%;
    top: 28.55%;
    width: 15.4%;
    height: 43.25%;
  }

  .studio-floor-glow,
  .floor-glow-line {
    display: none !important;
    animation: none !important;
  }

  .studio-medallion {
    left: 50%;
    top: 84.05%;
    width: 28%;
    height: 15.2%;
    transform: translate(-50%, -50%);
  }

  .studio-medallion img {
    left: 50%;
    top: 50%;
    width: 67%;
    transform: translate(-50%, -50%) scaleY(0.46);
    transform-origin: center;
  }

  .studio-medallion::before {
    width: 176%;
    height: 150%;
    transition-delay: 260ms;
  }

  .medallion-halo {
    width: 250%;
    height: 198%;
    transition-delay: 420ms;
  }

  .is-medallion-focused .studio-medallion img,
  .studio-medallion:focus-visible img,
  .is-mark-entering .studio-medallion img {
    animation:
      mark-awaken 1.15s var(--ease-cinematic) 160ms both,
      medallion-depth-breathe 5.5s ease-in-out 1310ms infinite;
  }

  .medallion-label,
  .is-medallion-focused .medallion-label,
  .studio-medallion:focus-visible .medallion-label,
  .is-mark-entering .medallion-label {
    top: 111%;
  }

  .dachshund-art {
    width: min(132px, 30vw);
    height: 39px;
    margin-bottom: -4px;
  }
}

/* v2.9 — individual arch perspective and a mark-only bonus-page trigger. */

@media (min-width: 981px) {
  .studio-room {
    overflow: hidden;
    background: #040302;
  }

  .room-character {
    left: 3.86%;
    top: 28.78%;
    width: 15.28%;
    height: 42.8%;
    clip-path: polygon(0 0, 100% 8%, 100% 91%, 0 100%);
  }

  .room-story {
    left: 25.88%;
    top: 31.56%;
    width: 12.4%;
    height: 37.5%;
    clip-path: polygon(0 0, 100% 4.8%, 100% 98%, 0 100%);
  }

  .room-process {
    left: 61.58%;
    top: 31.56%;
    width: 12.4%;
    height: 37.5%;
    clip-path: polygon(0 4.8%, 100% 0, 100% 100%, 0 98%);
  }

  .room-graphic {
    left: 80.86%;
    top: 28.78%;
    width: 15.28%;
    height: 42.8%;
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 91%);
  }

  .studio-room > .room-atmosphere,
  .studio-room:hover > .room-atmosphere,
  .studio-room:focus-visible > .room-atmosphere {
    inset: -13%;
    width: 126%;
    height: 126%;
    max-width: none;
    object-fit: cover;
    opacity: 0.91;
    filter: blur(7px) brightness(0.66) saturate(0.82);
    backface-visibility: hidden;
  }

  .room-character > .room-atmosphere {
    object-position: 37% 58%;
    transform: scale(1.07) skewY(1.7deg) translateX(1.2%);
    transform-origin: right center;
  }

  .room-story > .room-atmosphere {
    object-position: 43% 58%;
    transform: scale(1.045) skewY(0.7deg) translateX(0.6%);
    transform-origin: right center;
  }

  .room-process > .room-atmosphere {
    object-position: 55% 58%;
    transform: scale(1.045) skewY(-0.7deg) translateX(-0.6%);
    transform-origin: left center;
  }

  .room-graphic > .room-atmosphere {
    object-position: 59% 58%;
    transform: scale(1.07) skewY(-1.7deg) translateX(-1.2%);
    transform-origin: left center;
  }

  .opening-shadow {
    border: 0;
    background:
      linear-gradient(to right, rgba(0, 0, 0, 0.52), transparent 12% 88%, rgba(0, 0, 0, 0.52)),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.58), transparent 15% 79%, rgba(0, 0, 0, 0.54));
    box-shadow:
      inset 12px 0 22px rgba(0, 0, 0, 0.94),
      inset -12px 0 22px rgba(0, 0, 0, 0.94),
      inset 0 12px 20px rgba(0, 0, 0, 0.92),
      inset 0 -13px 20px rgba(0, 0, 0, 0.9);
  }

  .room-character-shadow {
    left: 4%;
    top: 29.08%;
    width: 14.99%;
    height: 42.1%;
    clip-path: polygon(0 0, 100% 8%, 100% 91%, 0 100%);
  }

  .room-story-shadow {
    left: 26.03%;
    top: 31.86%;
    width: 12.11%;
    height: 36.9%;
    clip-path: polygon(0 0, 100% 4.8%, 100% 98%, 0 100%);
  }

  .room-process-shadow {
    left: 61.72%;
    top: 31.86%;
    width: 12.11%;
    height: 36.9%;
    clip-path: polygon(0 4.8%, 100% 0, 100% 100%, 0 98%);
  }

  .room-graphic-shadow {
    left: 81.01%;
    top: 29.08%;
    width: 14.99%;
    height: 42.1%;
    clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 91%);
  }

  .studio-medallion {
    cursor: default;
  }

  .studio-medallion::before,
  .studio-medallion::after,
  .studio-medallion img,
  .medallion-halo,
  .medallion-inlays,
  .medallion-ring,
  .medallion-sweep,
  .medallion-sweep::after {
    pointer-events: none;
  }

  .studio-medallion::before {
    width: 220%;
    height: 178%;
    opacity: 0;
    transition: none;
  }

  .studio-medallion::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 270%;
    height: 220%;
    border-radius: 50%;
    opacity: 0;
    background:
      conic-gradient(
        from 35deg,
        transparent 0 10%,
        rgba(195, 131, 54, 0.09) 18%,
        transparent 29% 48%,
        rgba(225, 177, 87, 0.1) 58%,
        transparent 70% 100%
      ),
      radial-gradient(ellipse, rgba(185, 121, 48, 0.08), transparent 67%);
    filter: blur(15px);
    transform: translate(-50%, -50%);
  }

  .medallion-halo {
    width: 310%;
    height: 238%;
    transition: none;
  }

  .studio-medallion img {
    width: 59%;
    transform: translate(-50%, -50%) scaleY(0.46);
  }

  .is-medallion-focused .studio-medallion::before,
  .is-mark-entering .studio-medallion::before {
    animation: mark-halo-bloom 2.25s cubic-bezier(0.2, 0.72, 0.18, 1) both;
  }

  .is-medallion-focused .studio-medallion::after,
  .is-mark-entering .studio-medallion::after {
    animation: mark-aura-flow 5.8s ease-in-out 350ms infinite;
  }

  .is-medallion-focused .medallion-halo,
  .is-mark-entering .medallion-halo {
    animation: mark-halo-flow 4.8s ease-in-out 520ms infinite;
  }

  .is-medallion-focused .studio-medallion img,
  .is-mark-entering .studio-medallion img {
    animation:
      mark-awaken-fluid 2.2s cubic-bezier(0.18, 0.72, 0.18, 1) both,
      medallion-depth-breathe 5.8s ease-in-out 2.2s infinite;
  }

  .is-medallion-focused .medallion-sweep::after,
  .is-mark-entering .medallion-sweep::after {
    animation: mark-liquid-sweep 2.2s cubic-bezier(0.2, 0.68, 0.22, 1) both;
  }

  .medallion-label,
  .is-medallion-focused .medallion-label,
  .is-mark-entering .medallion-label {
    pointer-events: none;
    cursor: pointer;
  }

  .is-medallion-ready .medallion-label {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translate(-50%, 0) !important;
  }

  @keyframes mark-halo-bloom {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.58);
    }
    48% {
      opacity: 0.84;
    }
    72% {
      opacity: 0.56;
      transform: translate(-50%, -50%) scale(1.06);
    }
    100% {
      opacity: 0.46;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes mark-aura-flow {
    0%,
    100% {
      opacity: 0.5;
      transform: translate(-50%, -50%) rotate(-5deg);
      filter: blur(16px);
    }
    50% {
      opacity: 0.9;
      transform: translate(-50%, -50%) rotate(18deg);
      filter: blur(22px);
    }
  }

  @keyframes mark-halo-flow {
    0%,
    100% {
      opacity: 0.58;
      transform: translate(-50%, -50%);
      filter: blur(10px);
    }
    50% {
      opacity: 0.93;
      transform: translate(-50%, -50%);
      filter: blur(17px);
    }
  }

  @keyframes mark-awaken-fluid {
    0% {
      opacity: 0.68;
      filter:
        contrast(0.98)
        saturate(0.86)
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
    36% {
      opacity: 0.9;
      filter:
        contrast(1.08)
        saturate(1.02)
        drop-shadow(0 0 9px rgba(190, 126, 53, 0.28))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
    72% {
      opacity: 1;
      filter:
        contrast(1.17)
        saturate(1.13)
        drop-shadow(0 0 25px rgba(207, 151, 72, 0.52))
        drop-shadow(0 0 8px rgba(239, 197, 115, 0.22))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
    100% {
      opacity: 1;
      filter:
        contrast(1.14)
        saturate(1.1)
        drop-shadow(0 0 18px rgba(207, 151, 72, 0.42))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
  }

  @keyframes mark-liquid-sweep {
    0% {
      left: -62%;
      opacity: 0;
    }
    20% {
      opacity: 0.14;
    }
    62% {
      opacity: 0.58;
    }
    100% {
      left: 148%;
      opacity: 0;
    }
  }
}

/* v3.0 — continuous room-camera travel, centered mark bloom, and crown seam cleanup. */

@media (min-width: 981px) {
  .room-focus-stage {
    --room-shift-x: 0px;
    --room-shift-y: 0px;
    --room-start-scale: 0.45;
    --room-clip-x: 32%;
    top: 50%;
    opacity: 0;
    clip-path: inset(0 round 0);
    transform: translate(-50%, -50%) scale(1);
    transform-origin: center;
    transition: none !important;
    will-change: left, top, transform, opacity, clip-path;
  }

  .phase-open .room-focus-stage,
  .phase-entering .room-focus-stage {
    left: 50%;
    top: 50%;
    opacity: 1;
    clip-path: inset(0 round 0);
    transform: translate(-50%, -50%) scale(1);
  }

  .focused-room-link img {
    filter: none;
    transform: scale(1);
    transition: none;
    will-change: filter, transform;
  }

  .phase-open .studio-resting-scene {
    opacity: 0.36;
    filter: blur(2px) brightness(0.5) saturate(0.72);
    transform: translate3d(var(--scene-pan-x, 0), var(--scene-pan-y, 0), 0) scale(1.08);
  }

  .room-character {
    left: 3.55%;
    top: 28.02%;
    width: 15.92%;
    height: 43.92%;
    clip-path: polygon(-2% -3%, 102% 4.5%, 102% 96%, -2% 103%);
  }

  .room-story {
    left: 25.68%;
    top: 30.88%;
    width: 12.78%;
    height: 38.52%;
    clip-path: polygon(-2% -3%, 102% 1.8%, 102% 102%, -2% 103%);
  }

  .room-process {
    left: 61.5%;
    top: 30.88%;
    width: 12.78%;
    height: 38.52%;
    clip-path: polygon(-2% 1.8%, 102% -3%, 102% 103%, -2% 102%);
  }

  .room-graphic {
    left: 80.58%;
    top: 28.02%;
    width: 15.92%;
    height: 43.92%;
    clip-path: polygon(-2% 4.5%, 102% -3%, 102% 103%, -2% 96%);
  }

  .studio-room > .room-atmosphere,
  .studio-room:hover > .room-atmosphere,
  .studio-room:focus-visible > .room-atmosphere {
    inset: -19% -16% -15%;
    width: 132%;
    height: 134%;
  }

  .opening-shadow {
    border-radius: 46% 46% 0 0 / 13% 13% 0 0;
    background:
      linear-gradient(to right, rgba(0, 0, 0, 0.54), transparent 13% 87%, rgba(0, 0, 0, 0.54)),
      linear-gradient(to bottom, rgba(0, 0, 0, 0.74), transparent 18% 78%, rgba(0, 0, 0, 0.55));
    box-shadow:
      inset 13px 0 23px rgba(0, 0, 0, 0.95),
      inset -13px 0 23px rgba(0, 0, 0, 0.95),
      inset 0 18px 25px rgba(0, 0, 0, 0.96),
      inset 0 -13px 20px rgba(0, 0, 0, 0.9);
  }

  .room-character-shadow {
    top: 28.92%;
    height: 42.35%;
  }

  .room-story-shadow {
    top: 31.7%;
    height: 37.15%;
  }

  .room-process-shadow {
    top: 31.7%;
    height: 37.15%;
  }

  .room-graphic-shadow {
    top: 28.92%;
    height: 42.35%;
  }

  .studio-resting-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(
      ellipse 11% 8% at 50% 84%,
      rgba(3, 2, 2, 0) 0 18%,
      rgba(3, 2, 2, 0.38) 46%,
      rgba(3, 2, 2, 0.74) 75%,
      rgba(2, 1, 1, 0.88) 100%
    );
    transition: opacity 1300ms cubic-bezier(0.24, 0.66, 0.2, 1);
  }

  .is-medallion-focused .studio-resting-scene::after,
  .is-mark-entering .studio-resting-scene::after {
    opacity: 1;
  }

  .floor-reflection {
    transition: opacity 320ms ease;
  }

  .is-medallion-focused .floor-reflection,
  .is-mark-entering .floor-reflection {
    opacity: 0;
  }

  .studio-medallion {
    z-index: 52;
  }

  .medallion-label,
  .is-medallion-focused .medallion-label,
  .is-mark-entering .medallion-label {
    opacity: 0 !important;
    pointer-events: none;
    transform: translate(-50%, 7px) !important;
  }

  .is-medallion-ready .medallion-label {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translate(-50%, 0) !important;
  }

  .studio-medallion::before {
    width: 205%;
    height: 172%;
    opacity: 0;
    background: radial-gradient(
      ellipse,
      rgba(244, 204, 127, 0.45) 0,
      rgba(212, 159, 79, 0.26) 16%,
      rgba(173, 111, 44, 0.11) 38%,
      transparent 70%
    );
    filter: blur(10px);
    transform: translate(-50%, -50%) scale(0.06);
  }

  .studio-medallion::after {
    width: 292%;
    height: 232%;
    opacity: 0;
    background: radial-gradient(
      ellipse,
      rgba(230, 181, 94, 0.17) 0,
      rgba(193, 132, 55, 0.12) 28%,
      rgba(159, 93, 33, 0.06) 48%,
      transparent 72%
    );
    filter: blur(18px);
    transform: translate(-50%, -50%) scale(0.08);
  }

  .medallion-halo {
    width: 320%;
    height: 248%;
    opacity: 0;
    background: radial-gradient(
      ellipse,
      transparent 0 25%,
      rgba(231, 184, 99, 0.13) 39%,
      rgba(190, 126, 49, 0.09) 53%,
      transparent 72%
    );
    filter: blur(11px);
    transform: translate(-50%, -50%) scale(0.12);
  }

  .medallion-sweep {
    left: 50%;
    top: 50%;
    inset: auto;
    width: 82%;
    height: 150%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(
      circle at center,
      rgba(255, 226, 164, 0.46) 0,
      rgba(222, 173, 90, 0.22) 28%,
      transparent 66%
    );
    clip-path: circle(0 at 50% 50%);
    filter: blur(4px);
    transform: translate(-50%, -50%) scaleY(0.42);
  }

  .medallion-sweep::after {
    display: none;
    animation: none;
  }

  .is-medallion-focused .studio-medallion::before,
  .is-mark-entering .studio-medallion::before {
    animation:
      mark-center-bloom 2.45s cubic-bezier(0.18, 0.72, 0.18, 1) both,
      mark-core-breathe 5.2s ease-in-out 2.45s infinite;
  }

  .is-medallion-focused .studio-medallion::after,
  .is-mark-entering .studio-medallion::after {
    animation:
      mark-aura-bloom 2.45s cubic-bezier(0.2, 0.68, 0.2, 1) both,
      mark-aura-breathe 5.2s ease-in-out 2.45s infinite;
  }

  .is-medallion-focused .medallion-halo,
  .is-mark-entering .medallion-halo {
    animation:
      mark-ring-bloom 2.45s cubic-bezier(0.18, 0.7, 0.18, 1) both,
      mark-ring-breathe 5.2s ease-in-out 2.45s infinite;
  }

  .is-medallion-focused .medallion-sweep,
  .is-mark-entering .medallion-sweep {
    animation: mark-center-reveal 2.35s cubic-bezier(0.16, 0.7, 0.18, 1) both;
  }

  .is-medallion-focused .studio-medallion img,
  .is-mark-entering .studio-medallion img {
    animation:
      mark-awaken-center 2.4s cubic-bezier(0.18, 0.72, 0.18, 1) both,
      mark-letter-breathe 5.2s ease-in-out 2.4s infinite;
  }

  @keyframes mark-center-bloom {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.06);
    }
    22% {
      opacity: 0.9;
    }
    72% {
      opacity: 0.7;
      transform: translate(-50%, -50%) scale(1.04);
    }
    100% {
      opacity: 0.58;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes mark-aura-bloom {
    0%,
    18% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.08);
    }
    66% {
      opacity: 0.68;
    }
    100% {
      opacity: 0.46;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes mark-ring-bloom {
    0%,
    26% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.12);
    }
    74% {
      opacity: 0.74;
    }
    100% {
      opacity: 0.56;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes mark-center-reveal {
    0% {
      opacity: 0;
      clip-path: circle(0 at 50% 50%);
    }
    16% {
      opacity: 0.72;
    }
    78% {
      opacity: 0.44;
      clip-path: circle(72% at 50% 50%);
    }
    100% {
      opacity: 0.2;
      clip-path: circle(86% at 50% 50%);
    }
  }

  @keyframes mark-awaken-center {
    0% {
      opacity: 0.68;
      filter:
        contrast(0.98)
        saturate(0.86)
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
    34% {
      opacity: 0.84;
      filter:
        contrast(1.04)
        saturate(0.96)
        drop-shadow(0 0 7px rgba(194, 130, 54, 0.22))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
    78% {
      opacity: 1;
      filter:
        contrast(1.17)
        saturate(1.13)
        drop-shadow(0 0 24px rgba(215, 161, 78, 0.5))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
    100% {
      opacity: 1;
      filter:
        contrast(1.13)
        saturate(1.1)
        drop-shadow(0 0 17px rgba(207, 151, 72, 0.4))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
  }

  @keyframes mark-core-breathe {
    0%,
    100% {
      opacity: 0.5;
      transform: translate(-50%, -50%) scale(0.97);
      filter: blur(10px);
    }
    50% {
      opacity: 0.7;
      transform: translate(-50%, -50%) scale(1.06);
      filter: blur(14px);
    }
  }

  @keyframes mark-aura-breathe {
    0%,
    100% {
      opacity: 0.38;
      transform: translate(-50%, -50%) scale(0.96);
      filter: blur(18px);
    }
    50% {
      opacity: 0.58;
      transform: translate(-50%, -50%) scale(1.06);
      filter: blur(23px);
    }
  }

  @keyframes mark-ring-breathe {
    0%,
    100% {
      opacity: 0.48;
      transform: translate(-50%, -50%) scale(0.98);
      filter: blur(10px);
    }
    50% {
      opacity: 0.68;
      transform: translate(-50%, -50%) scale(1.04);
      filter: blur(15px);
    }
  }

  @keyframes mark-letter-breathe {
    0%,
    100% {
      transform: translate(-50%, -50%) scaleY(0.46) scale(0.99);
      filter:
        contrast(1.12)
        saturate(1.08)
        drop-shadow(0 0 14px rgba(207, 151, 72, 0.36))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
    50% {
      transform: translate(-50%, -50%) scaleY(0.46) scale(1.02);
      filter:
        contrast(1.16)
        saturate(1.12)
        drop-shadow(0 0 23px rgba(215, 161, 78, 0.5))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
  }
}

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .phase-opening .room-focus-stage {
    animation: room-camera-approach 1750ms cubic-bezier(0.2, 0.74, 0.16, 1) both;
  }

  .phase-closing .room-focus-stage {
    animation: room-camera-approach 1750ms cubic-bezier(0.2, 0.74, 0.16, 1) reverse both;
    pointer-events: none;
    transition: none !important;
  }

  .phase-opening .focused-room-link img {
    animation: room-image-resolve 1750ms cubic-bezier(0.2, 0.72, 0.16, 1) both;
  }

  .phase-closing .focused-room-link img {
    animation: room-image-resolve 1750ms cubic-bezier(0.2, 0.72, 0.16, 1) reverse both;
  }

  .phase-opening .studio-resting-scene {
    animation: studio-camera-approach 1750ms cubic-bezier(0.2, 0.74, 0.16, 1) both;
    pointer-events: none;
  }

  .phase-closing .studio-resting-scene {
    animation: studio-camera-approach 1750ms cubic-bezier(0.2, 0.74, 0.16, 1) reverse both;
    pointer-events: none;
    transition: none !important;
  }

  @keyframes room-camera-approach {
    0% {
      left: calc(50% + var(--room-shift-x));
      top: calc(50% + var(--room-shift-y));
      opacity: 0.12;
      clip-path: inset(
        0 var(--room-clip-x) 0 var(--room-clip-x)
        round 48% 48% 0 0 / 15% 15% 0 0
      );
      transform: translate(-50%, -50%) scale(var(--room-start-scale));
    }
    10% {
      opacity: 0.94;
    }
    68% {
      clip-path: inset(0 6% round 7px);
    }
    100% {
      left: 50%;
      top: 50%;
      opacity: 1;
      clip-path: inset(0 round 0);
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes room-image-resolve {
    0% {
      filter: blur(7px) brightness(0.68) saturate(0.82);
      transform: scale(1.055);
    }
    54% {
      filter: blur(2.5px) brightness(0.84) saturate(0.92);
    }
    100% {
      filter: none;
      transform: scale(1);
    }
  }

  @keyframes studio-camera-approach {
    0% {
      opacity: 1;
      filter: none;
      transform: translate3d(0, 0, 0) scale(1);
    }
    100% {
      opacity: 0.36;
      filter: blur(2px) brightness(0.5) saturate(0.72);
      transform: translate3d(var(--scene-pan-x, 0), var(--scene-pan-y, 0), 0) scale(1.08);
    }
  }
}

/* Final v3.1 cascade overrides. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .phase-opening .room-focus-stage {
    animation: gallery-dissolve-in 1450ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .phase-closing .room-focus-stage {
    animation: gallery-dissolve-in 1450ms cubic-bezier(0.4, 0, 0.2, 1) reverse both;
  }
  .phase-opening .focused-room-link img {
    animation: gallery-resolve 1450ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .phase-closing .focused-room-link img {
    animation: gallery-resolve 1450ms cubic-bezier(0.4, 0, 0.2, 1) reverse both;
  }
  .phase-opening .studio-resting-scene {
    animation: studio-fade-to-black 1450ms cubic-bezier(0.4, 0, 0.2, 1) both;
  }
  .phase-closing .studio-resting-scene {
    animation: studio-fade-to-black 1450ms cubic-bezier(0.4, 0, 0.2, 1) reverse both;
  }
}

/* v3.1.1 — remove the independent floor-light overlays.
   The architectural shell already contains its own reflections; these CSS
   cones became artificially prominent as the studio dimmed, creating a
   lower-left flash before the centered KNR bloom. */
.floor-reflection {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
  transition: none !important;
}

/* v3.1.2 — only the visible floor medallion starts the glow. */
.studio-medallion {
  pointer-events: none;
}

.medallion-trigger {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: 66%;
  height: 76%;
  border-radius: 50%;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.is-medallion-ready .medallion-label {
  pointer-events: auto;
}

/* Current gallery invitation: static arch art, lighting-only selection, and a
   prompt that appears only after the room has settled into darkness. */
.room-preview-prompt {
  display: none;
}

.mobile-room-link {
  position: absolute;
  inset: 0;
  z-index: 9;
}

.room-static-preview {
  position: absolute;
  inset: -2%;
  z-index: 0;
  width: 104%;
  height: 104%;
  display: none;
  object-fit: cover;
  object-position: center top;
  opacity: 1;
  pointer-events: none;
  user-select: none;
}

.room-character > .room-static-preview {
  object-position: 29% top;
}

.room-story > .room-static-preview {
  object-position: 38% top;
}

.room-process > .room-static-preview {
  object-position: 48% top;
}

.room-graphic > .room-static-preview {
  object-position: 47% top;
}

.room-selection-light {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  opacity: 0;
  background: none;
  mix-blend-mode: screen;
  pointer-events: none;
}

.room-preview-trigger {
  position: absolute;
  inset: 0;
  z-index: 13;
}

@media (min-width: 981px) {
  .mobile-room-link,
  .room-mobile-preview {
    display: none !important;
  }

  .room-static-preview {
    display: block;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto;
  }

  .studio-room,
  .studio-room:hover,
  .studio-room:focus-within,
  .studio-room.is-room-primed {
    opacity: 1;
    filter: none;
    transition: opacity var(--gallery-light-duration) var(--gallery-light-ease);
  }

  .room-selection-light {
    display: block;
    opacity: 0;
    transition: opacity var(--gallery-light-duration) var(--gallery-light-ease);
  }

  .has-room-preview .studio-room.is-room-primed {
    opacity: 1;
    filter: none;
  }

  .room-preview-trigger .mobile-room-link {
    pointer-events: none;
  }

  .studio-resting-scene::before {
    display: none;
  }

  .studio-environment::before,
  .studio-environment::after {
    display: none;
  }

  .studio-environment,
  .studio-architecture-shell,
  .studio-room-labels,
  .scene-header,
  .studio-welcome,
  .studio-medallion {
    transition:
      opacity var(--gallery-light-duration) var(--gallery-light-ease),
      filter var(--gallery-light-duration) var(--gallery-light-ease);
  }

  .room-preview-prompt {
    position: absolute;
    left: 50%;
    top: 57%;
    z-index: 12;
    width: min(86%, 190px);
    display: grid;
    gap: 0.62rem;
    padding: clamp(0.7rem, 1vw, 1rem);
    border: 1px solid rgba(222, 180, 103, 0.7);
    border-radius: 2px;
    color: var(--ivory);
    background:
      linear-gradient(180deg, rgba(52, 16, 21, 0.96), rgba(17, 10, 9, 0.97)),
      radial-gradient(circle at 50% 0%, rgba(214, 170, 100, 0.15), transparent 62%);
    box-shadow:
      0 12px 28px rgba(0, 0, 0, 0.62),
      0 0 0 3px rgba(7, 6, 5, 0.78),
      0 0 24px rgba(198, 145, 67, 0.14);
    text-align: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none !important;
    transform: translate(-50%, -50%);
    transition:
      opacity var(--gallery-prompt-duration) var(--gallery-light-ease),
      border-color 260ms ease,
      box-shadow 260ms ease;
  }

  .room-preview-prompt span {
    font-size: clamp(0.55rem, 0.72vw, 0.78rem);
    line-height: 1.4;
  }

  .room-preview-prompt strong {
    color: var(--bright-gold);
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: clamp(0.5rem, 0.66vw, 0.7rem);
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .has-room-preview .room-preview-prompt.is-visible {
    opacity: 1;
    pointer-events: auto !important;
    transform: translate(-50%, -50%);
  }

  .has-room-preview .room-preview-prompt:not(.is-visible) {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .room-preview-prompt:hover,
  .room-preview-prompt:focus-visible {
    border-color: var(--bright-gold);
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.68),
      0 0 0 3px rgba(7, 6, 5, 0.82),
      0 0 28px rgba(214, 170, 100, 0.24);
    outline: none;
  }

  /*
   * KNR sequence
   * The whole Studio Floor darkens evenly. One centered radial pseudo-element
   * provides both the opening bloom and the later breath.
   */
  .studio-resting-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 50;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(2, 1, 1, 0.72);
    transition: opacity 1450ms cubic-bezier(0.24, 0.66, 0.2, 1);
  }

  .is-medallion-focused .studio-resting-scene::after,
  .is-mark-entering .studio-resting-scene::after {
    opacity: 1;
  }

  .studio-medallion {
    z-index: 52;
  }

  .studio-medallion::after,
  .medallion-halo,
  .medallion-inlays,
  .medallion-sweep {
    display: none !important;
    opacity: 0 !important;
    animation: none !important;
  }

  .studio-medallion::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 0;
    width: 250%;
    height: 205%;
    display: block;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(
      ellipse at 50% 50%,
      rgba(255, 225, 161, 0.58) 0%,
      rgba(224, 174, 91, 0.34) 15%,
      rgba(190, 125, 48, 0.17) 36%,
      rgba(139, 78, 27, 0.07) 55%,
      transparent 72%
    );
    filter: blur(12px);
    transform: translate(-50%, -50%) scale(0.025);
    transform-origin: 50% 50%;
    transition: none;
  }

  .is-medallion-focused .studio-medallion::before,
  .is-mark-entering .studio-medallion::before {
    animation:
      knr-centered-bloom 2400ms cubic-bezier(0.2, 0.7, 0.18, 1) both,
      knr-centered-breathe 5600ms ease-in-out 2400ms infinite;
  }

  .studio-medallion img,
  .is-medallion-focused .studio-medallion img,
  .is-mark-entering .studio-medallion img {
    animation: none;
  }

  .is-medallion-focused .studio-medallion img,
  .is-mark-entering .studio-medallion img {
    animation:
      knr-mark-awaken 2400ms cubic-bezier(0.2, 0.7, 0.18, 1) both,
      knr-mark-breathe 5600ms ease-in-out 2400ms infinite;
  }

  .medallion-label,
  .is-medallion-focused .medallion-label,
  .is-mark-entering .medallion-label {
    opacity: 0 !important;
    pointer-events: none;
    transform: translate(-50%, 5px) !important;
    transition:
      opacity 450ms ease,
      transform 550ms cubic-bezier(0.24, 0.66, 0.2, 1);
  }

  .is-medallion-ready .medallion-label {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translate(-50%, 0) !important;
  }

  @keyframes knr-centered-bloom {
    0% {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.025);
    }
    18% {
      opacity: 0.84;
    }
    70% {
      opacity: 0.68;
      transform: translate(-50%, -50%) scale(1.025);
    }
    100% {
      opacity: 0.58;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @keyframes knr-centered-breathe {
    0%,
    100% {
      opacity: 0.56;
      filter: blur(12px);
      transform: translate(-50%, -50%) scale(0.98);
    }
    50% {
      opacity: 0.68;
      filter: blur(16px);
      transform: translate(-50%, -50%) scale(1.055);
    }
  }

  @keyframes knr-mark-awaken {
    0% {
      opacity: 0.72;
      filter:
        contrast(1)
        saturate(0.92)
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.74));
    }
    42% {
      opacity: 0.78;
      filter:
        contrast(1.02)
        saturate(0.94)
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.74));
    }
    100% {
      opacity: 1;
      filter:
        contrast(1.14)
        saturate(1.1)
        drop-shadow(0 0 13px rgba(205, 151, 75, 0.32))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
  }

  @keyframes knr-mark-breathe {
    0%,
    100% {
      opacity: 0.98;
      filter:
        contrast(1.12)
        saturate(1.08)
        drop-shadow(0 0 10px rgba(205, 151, 75, 0.28))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.76));
    }
    50% {
      opacity: 1;
      filter:
        contrast(1.16)
        saturate(1.12)
        drop-shadow(0 0 17px rgba(205, 151, 75, 0.36))
        drop-shadow(0 7px 9px rgba(0, 0, 0, 0.78));
    }
  }
}

/* v4.1.12 — one restrained desktop lighting system.
   The selected arch receives a warm architectural wash and a faint floor
   spill. Everything else eases down with brightness only, so the approved
   shell never becomes transparent and the invitation stays perfectly sharp. */
.studio-arch-highlights {
  display: none;
}

@media (min-width: 981px) {
  .studio-viewport {
    --gallery-dim-delay: 180ms;
    --gallery-dim-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .studio-arch-highlights {
    --arch-left: 50%;
    --arch-top: 18%;
    --arch-width: 17%;
    --arch-height: 53%;
    --arch-crown-radius: 27%;
    --floor-center: 50%;
    --floor-top: 71%;
    --floor-width: 19%;
    position: absolute;
    inset: 0;
    z-index: 31;
    display: block;
    overflow: visible;
    pointer-events: none;
  }

  .preview-character-art .studio-arch-highlights {
    --arch-left: 2.25%;
    --arch-top: 12.55%;
    --arch-width: 20.15%;
    --arch-height: 61.25%;
    --arch-crown-radius: 29%;
    --floor-center: 12.3%;
    --floor-top: 73.2%;
    --floor-width: 24%;
  }

  .preview-story-projects .studio-arch-highlights {
    --arch-left: 24.85%;
    --arch-top: 17.85%;
    --arch-width: 16.55%;
    --arch-height: 52.1%;
    --arch-crown-radius: 27%;
    --floor-center: 33.1%;
    --floor-top: 69.45%;
    --floor-width: 19%;
  }

  .preview-process .studio-arch-highlights {
    --arch-left: 58.65%;
    --arch-top: 17.85%;
    --arch-width: 16.55%;
    --arch-height: 52.1%;
    --arch-crown-radius: 27%;
    --floor-center: 66.9%;
    --floor-top: 69.45%;
    --floor-width: 19%;
  }

  .preview-graphic-design .studio-arch-highlights {
    --arch-left: 77.45%;
    --arch-top: 12.55%;
    --arch-width: 21.35%;
    --arch-height: 61.25%;
    --arch-crown-radius: 29%;
    --floor-center: 88.1%;
    --floor-top: 73.2%;
    --floor-width: 25%;
  }

  .studio-arch-highlight,
  .preview-character-art .studio-arch-highlight,
  .preview-story-projects .studio-arch-highlight,
  .preview-process .studio-arch-highlight,
  .preview-graphic-design .studio-arch-highlight {
    position: absolute;
    left: var(--arch-left);
    top: var(--arch-top);
    width: var(--arch-width);
    height: var(--arch-height);
    display: block;
    border-radius: 50% 50% 3px 3px / var(--arch-crown-radius) var(--arch-crown-radius) 3px 3px;
    opacity: 0;
    background:
      radial-gradient(
        ellipse 96% 78% at 50% 12%,
        rgba(255, 222, 164, 0.18) 0%,
        rgba(238, 187, 112, 0.115) 34%,
        rgba(210, 143, 72, 0.05) 68%,
        transparent 100%
      ),
      linear-gradient(
        to bottom,
        rgba(244, 196, 124, 0.07) 0%,
        rgba(210, 145, 75, 0.04) 48%,
        rgba(174, 102, 51, 0.014) 82%,
        transparent 100%
      );
    box-shadow:
      inset 0 22px 34px rgba(255, 211, 143, 0.045),
      inset 12px 0 28px rgba(214, 153, 78, 0.02),
      inset -12px 0 28px rgba(214, 153, 78, 0.02);
    filter: blur(7px);
    mix-blend-mode: screen;
    pointer-events: none;
    transform: none;
    transition: opacity var(--gallery-light-duration) var(--gallery-light-ease);
  }

  .studio-arch-highlights::after {
    content: "";
    position: absolute;
    left: var(--floor-center);
    top: var(--floor-top);
    width: var(--floor-width);
    height: 20%;
    display: block;
    opacity: 0;
    background: radial-gradient(
      ellipse 80% 58% at 50% 0%,
      rgba(255, 211, 140, 0.16),
      rgba(224, 164, 91, 0.072) 42%,
      rgba(174, 104, 55, 0.024) 68%,
      transparent 88%
    );
    filter: blur(12px);
    mix-blend-mode: screen;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity var(--gallery-light-duration) var(--gallery-light-ease);
  }

  .room-selection-light,
  .has-room-preview .studio-room.is-room-primed .room-selection-light {
    z-index: 3;
    display: block;
    opacity: 0;
    background:
      radial-gradient(
        ellipse 90% 62% at 50% 5%,
        rgba(255, 213, 145, 0.1),
        rgba(224, 164, 91, 0.038) 56%,
        transparent 92%
      ),
      linear-gradient(to bottom, rgba(168, 93, 46, 0.022), transparent 78%);
    filter: none;
    mix-blend-mode: screen;
    transition: opacity var(--gallery-light-duration) var(--gallery-light-ease);
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-arch-highlight {
    opacity: 0.68;
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-arch-highlights::after {
    opacity: 0.48;
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-room.is-room-primed .room-selection-light {
    opacity: 0.26;
  }

  .studio-architecture-shell,
  .studio-room,
  .studio-room-label,
  .studio-welcome,
  .studio-medallion,
  .scene-header > .scene-menu,
  .scene-header > p {
    transition-property: opacity, filter;
    transition-duration: var(--gallery-light-duration);
    transition-timing-function: var(--gallery-dim-ease);
    transition-delay: 0ms;
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-architecture-shell,
  .has-room-preview:not(.is-room-preview-exiting) .studio-welcome,
  .has-room-preview:not(.is-room-preview-exiting) .studio-medallion,
  .has-room-preview:not(.is-room-preview-exiting) .studio-room:not(.is-room-primed),
  .has-room-preview:not(.is-room-preview-exiting) .studio-room-label,
  .has-room-preview:not(.is-room-preview-exiting) .scene-header > .scene-menu,
  .has-room-preview:not(.is-room-preview-exiting) .scene-header > p {
    transition-delay: var(--gallery-dim-delay);
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-architecture-shell,
  .has-room-preview:not(.is-room-preview-exiting) .studio-welcome,
  .has-room-preview:not(.is-room-preview-exiting) .studio-medallion,
  .has-room-preview:not(.is-room-preview-exiting) .scene-header > .scene-menu,
  .has-room-preview:not(.is-room-preview-exiting) .scene-header > p {
    opacity: 1;
    filter: brightness(0.9) saturate(0.97);
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-room:not(.is-room-primed) {
    opacity: 1;
    filter: brightness(0.88) saturate(0.96);
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-room-labels {
    opacity: 1;
    filter: none;
  }

  .has-room-preview:not(.is-room-preview-exiting) .studio-room-label {
    opacity: 1;
    filter: brightness(0.88) saturate(0.95);
  }

  .preview-character-art.has-room-preview:not(.is-room-preview-exiting) .room-character-label,
  .preview-story-projects.has-room-preview:not(.is-room-preview-exiting) .room-story-label,
  .preview-process.has-room-preview:not(.is-room-preview-exiting) .room-process-label,
  .preview-graphic-design.has-room-preview:not(.is-room-preview-exiting) .room-graphic-label {
    opacity: 1;
    filter: brightness(1.04) saturate(1.01);
  }

  .has-room-preview.is-room-preview-exiting .studio-arch-highlight,
  .has-room-preview.is-room-preview-exiting .studio-arch-highlights::after,
  .has-room-preview.is-room-preview-exiting .room-selection-light {
    opacity: 0;
  }

  .room-preview-prompt,
  .room-preview-prompt * {
    filter: none !important;
    backdrop-filter: none !important;
  }
}

/* Current Studio Floor: stable frame, one reversible lighting state, and Gift Shop. */

.site-footer {
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(48px, 1fr) auto minmax(48px, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.55rem 1rem;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(101, 44, 36, 0.25), transparent 44%),
    linear-gradient(90deg, #19080b, #300f15 50%, #19080b);
}

.site-footer nav {
  grid-column: 2;
  grid-row: 1;
}

.site-footer p {
  grid-column: 1 / -1;
  grid-row: 2;
}

.footer-social {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 161, 91, 0.72);
  border-radius: 50%;
  color: var(--antique-gold);
  font-family: Arial, sans-serif;
  font-size: 1.08rem;
  line-height: 1;
  transition:
    color 280ms ease,
    border-color 280ms ease,
    box-shadow 280ms ease;
}

.footer-social:hover,
.footer-social:focus-visible {
  color: var(--bright-gold);
  border-color: var(--bright-gold);
  box-shadow: 0 0 22px rgba(198, 161, 91, 0.16);
  outline: none;
}

.footer-facebook {
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  font-weight: 700;
}

.footer-instagram {
  grid-column: 3;
  grid-row: 1;
  justify-self: center;
}

.footer-instagram::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 5px;
}

.footer-instagram::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.gift-shop-store-link {
  pointer-events: none;
}

.phase-open .gift-shop-store-link {
  pointer-events: auto;
}

@media (min-width: 981px) {
  .studio-viewport {
    width: 100%;
    height: calc(100svh - 118px);
    min-height: 620px;
    aspect-ratio: auto;
  }

  .scene-header,
  .site-footer {
    opacity: 1;
  }

  .gift-shop-sign {
    position: absolute;
    right: 2.15%;
    top: 2.35%;
    z-index: 4;
    width: clamp(172px, 13.2vw, 220px);
    height: 7.4%;
    min-height: 58px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.12rem;
    padding: 0.7rem 1rem 0.5rem;
    border: 1px solid rgba(195, 151, 82, 0.7);
    border-radius: 4px 4px 7px 7px;
    color: var(--antique-gold);
    background:
      radial-gradient(ellipse at 45% 4%, rgba(164, 115, 55, 0.13), transparent 43%),
      radial-gradient(circle at 18% 78%, rgba(207, 158, 84, 0.055), transparent 19%),
      linear-gradient(102deg, #18130f 0%, #2b2119 47%, #1a1511 100%);
    box-shadow:
      inset 0 1px rgba(227, 185, 111, 0.12),
      inset 0 0 24px rgba(0, 0, 0, 0.76),
      0 0 0 3px rgba(8, 6, 4, 0.84),
      0 0 0 4px rgba(156, 113, 61, 0.31),
      0 7px 16px rgba(0, 0, 0, 0.56);
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    text-transform: uppercase;
    cursor: pointer;
    pointer-events: auto;
    transition:
      color 360ms ease,
      filter 500ms ease,
      box-shadow 500ms ease;
  }

  .gift-shop-sign::before,
  .gift-shop-sign::after {
    content: "";
    position: absolute;
    bottom: calc(100% + 4px);
    width: 2px;
    height: clamp(18px, 2.7vh, 29px);
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(187, 148, 83, 0.82) 0 2px,
        rgba(61, 43, 27, 0.95) 2px 4px
      );
    box-shadow:
      1px 0 rgba(0, 0, 0, 0.76),
      0 0 3px rgba(198, 161, 91, 0.14);
    transform-origin: bottom center;
  }

  .gift-shop-sign::before {
    left: 20%;
    transform: rotate(1.5deg);
  }

  .gift-shop-sign::after {
    right: 20%;
    transform: rotate(-1.5deg);
  }

  .gift-shop-sign i {
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(198, 161, 91, 0.24);
    border-radius: 2px 2px 5px 5px;
    box-shadow:
      inset 0 0 8px rgba(0, 0, 0, 0.42),
      0 1px rgba(228, 187, 113, 0.05);
    pointer-events: none;
  }

  .gift-shop-sign i::before,
  .gift-shop-sign i::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #6d5332;
    box-shadow:
      inset 1px 1px rgba(233, 191, 116, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.92);
  }

  .gift-shop-sign i::before {
    left: 5px;
  }

  .gift-shop-sign i::after {
    right: 5px;
  }

  .gift-shop-glint {
    position: absolute;
    inset: 4px;
    z-index: 0;
    overflow: hidden;
    border-radius: 2px 2px 5px 5px;
    pointer-events: none;
  }

  .gift-shop-glint::before {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: 0;
    width: 28%;
    opacity: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(231, 194, 126, 0.04) 34%,
      rgba(255, 226, 166, 0.22) 50%,
      rgba(231, 194, 126, 0.04) 66%,
      transparent
    );
    filter: blur(0.4px);
    transform: translateX(-180%) skewX(-18deg);
    animation: gift-shop-sign-glint 8.5s ease-in-out infinite;
  }

  @keyframes gift-shop-sign-glint {
    0%,
    72% {
      opacity: 0;
      transform: translateX(-180%) skewX(-18deg);
    }
    75% {
      opacity: 0.5;
    }
    82% {
      opacity: 0.5;
      transform: translateX(460%) skewX(-18deg);
    }
    85%,
    100% {
      opacity: 0;
      transform: translateX(460%) skewX(-18deg);
    }
  }

  .gift-shop-sign > span,
  .gift-shop-sign > small,
  .gift-shop-sign > strong,
  .gift-shop-sign > b {
    position: relative;
    z-index: 1;
  }

  .gift-shop-sign span {
    font-size: clamp(0.7rem, 0.9vw, 0.98rem);
    letter-spacing: 0.095em;
    line-height: 1;
    text-shadow:
      0 1px rgba(0, 0, 0, 0.94),
      0 -1px rgba(222, 176, 102, 0.08);
  }

  .gift-shop-sign small,
  .gift-shop-sign strong {
    font-size: clamp(0.34rem, 0.41vw, 0.46rem);
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1.15;
    opacity: 0.86;
  }

  .gift-shop-sign b {
    font-family: Georgia, serif;
    font-size: clamp(0.72rem, 0.9vw, 1rem);
    font-weight: 400;
    line-height: 0.68;
    text-shadow:
      1px 1px rgba(0, 0, 0, 0.94),
      -1px -1px rgba(232, 188, 113, 0.09);
  }

  .gift-shop-sign:hover,
  .gift-shop-sign:focus-visible {
    color: var(--bright-gold);
    filter: brightness(1.1);
    box-shadow:
      inset 0 1px rgba(235, 194, 119, 0.14),
      inset 0 0 24px rgba(0, 0, 0, 0.7),
      0 0 0 3px rgba(8, 6, 4, 0.84),
      0 0 0 4px rgba(214, 170, 100, 0.47),
      0 0 26px rgba(198, 161, 91, 0.2),
      0 7px 16px rgba(0, 0, 0, 0.56);
    outline: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .gift-shop-glint::before {
      animation: none;
    }
  }

  /* The header panel stays opaque; only its contents recede with the room. */
  .has-room-preview .scene-header {
    opacity: 1;
  }

  .scene-header > .scene-menu,
  .scene-header > p {
    transition:
      opacity var(--gallery-light-duration) var(--gallery-light-ease),
      filter var(--gallery-light-duration) var(--gallery-light-ease);
  }

  /*
   * Exit is a real state, not a frame-by-frame handoff. Every element reaches
   * its resting value before the preview class is removed, eliminating the
   * final cleanup pop.
   */
  .has-room-preview.is-room-preview-exiting .studio-environment,
  .has-room-preview.is-room-preview-exiting .studio-architecture-shell,
  .has-room-preview.is-room-preview-exiting .studio-welcome,
  .has-room-preview.is-room-preview-exiting .studio-medallion,
  .has-room-preview.is-room-preview-exiting .studio-room:not(.is-room-primed) {
    opacity: 1;
    filter: none;
  }

  .has-room-preview.is-room-preview-exiting .studio-arch-highlight {
    opacity: 0;
  }

  .has-room-preview.is-room-preview-exiting .studio-room-label {
    opacity: 1;
    filter: none;
  }

  .has-room-preview.is-room-preview-exiting .scene-header > .scene-menu,
  .has-room-preview.is-room-preview-exiting .scene-header > p {
    opacity: 1;
    filter: none;
  }

  /*
   * Keep the brand and shop plaque physically attached to the header. They are
   * page-shell fixtures, not participants in the Studio Floor lighting cue.
   */
  .scene-header > .scene-signature,
  .scene-header > .gift-shop-sign {
    opacity: 1 !important;
    filter: none;
    animation: none;
  }

  /*
   * Restore the original floor composition without reducing the arches. The
   * architecture, openings, labels, and their lighting masks move together so
   * hover registration remains exact; the KNR sits nearer the footer as in the
   * original artwork.
   */
  .studio-rooms,
  .studio-architecture-shell,
  .studio-arch-highlights,
  .studio-room-labels {
    transform: translateY(4.25%);
  }

  .studio-welcome {
    top: 31%;
  }

  .studio-welcome .eyebrow {
    color: var(--bright-gold);
    font-weight: 600;
    text-shadow: 0 0 14px rgba(212, 170, 100, 0.18);
  }

  .studio-medallion {
    top: 88.13%;
  }

  .studio-medallion img {
    width: 56%;
  }

  .medallion-label,
  .is-medallion-focused .medallion-label,
  .is-mark-entering .medallion-label {
    top: 91%;
  }

}

@media (max-width: 980px) {
  .gift-shop-sign {
    display: none;
  }

  .site-footer {
    grid-template-columns: 52px 1fr 52px;
  }

  .site-footer nav {
    gap: clamp(0.65rem, 3vw, 1.2rem);
  }

  .footer-social {
    width: 36px;
    height: 36px;
  }
}

@media (max-width: 680px) {
  .site-footer {
    padding-inline: 10px;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }

  .site-footer nav a {
    font-size: 0.5rem;
  }

}

/* Final shell polish: keep the approved scene geometry and use the master hound SVG. */
.site-footer {
  min-height: 118px;
  height: 118px;
  grid-template-rows: 42px 42px 12px;
  gap: 0 1rem;
  padding: 10px 24px 7px;
}

.dachshund-art {
  grid-column: 2;
  grid-row: 2;
  width: 120px;
  height: 42px;
  margin: 0 auto;
  object-fit: contain;
  opacity: 0.82;
  filter: drop-shadow(0 0 7px rgba(198, 161, 91, 0.1));
}

.site-footer p {
  grid-row: 3;
  align-self: end;
}

@media (max-width: 980px) {
  .site-footer {
    height: auto;
    min-height: 118px;
    grid-template-rows: auto 34px auto;
    padding-block: 12px 8px;
  }

  .dachshund-art {
    width: 96px;
    height: 34px;
  }
}
/* v4.1 mobile experience — a dedicated touch-first Studio Floor that leaves
   the approved desktop gallery geometry untouched. */
.mobile-home-header,
.mobile-studio-home,
.mobile-studio-skip {
  display: none;
}

@media (max-width: 980px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .desktop-studio-skip {
    display: none;
  }

  .mobile-studio-skip {
    display: block;
  }

  .studio-viewport {
    display: none;
  }

  .mobile-home-header {
    display: block;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(88, 35, 31, 0.24), transparent 70%),
      #0b0a09;
  }

  .site-header.mobile-home-header {
    display: grid;
  }

  .mobile-home-header .site-header,
  .site-header.mobile-home-header,
  .site-header {
    width: calc(100% - 32px);
    min-height: 100px;
    padding-top: env(safe-area-inset-top, 0px);
    background: transparent;
  }

  .mobile-home-header .header-signature img,
  .site-header.mobile-home-header .header-signature img,
  .site-header .header-signature img {
    width: min(58vw, 360px);
    max-height: 72px;
  }

  .studio-menu summary {
    width: 46px;
    height: 46px;
    padding-inline: 11px;
    background: rgba(29, 13, 13, 0.74);
  }

  .studio-menu nav {
    width: min(320px, calc(100vw - 32px));
    max-height: calc(100dvh - 128px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.9rem 1rem;
  }

  .studio-menu nav a,
  .studio-menu-list a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0.76rem 0.4rem;
    font-size: 0.7rem;
  }

  .mobile-studio-home {
    display: block;
    padding: clamp(26px, 5vw, 54px) clamp(20px, 4vw, 40px)
      calc(clamp(52px, 8vw, 84px) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(198, 161, 91, 0.2);
    border-bottom: 1px solid rgba(198, 161, 91, 0.44);
    background:
      radial-gradient(ellipse at 50% 0%, rgba(91, 38, 35, 0.24), transparent 28%),
      radial-gradient(circle at 12% 42%, rgba(123, 76, 39, 0.08), transparent 24%),
      repeating-radial-gradient(
        circle at 28% 30%,
        rgba(255, 255, 255, 0.01) 0 1px,
        transparent 1px 4px
      ),
      #0d0c0b;
  }

  .mobile-welcome-card {
    position: relative;
    max-width: 680px;
    margin: 0 auto clamp(30px, 5vw, 46px);
    padding: clamp(28px, 5vw, 48px) clamp(22px, 5vw, 54px);
    border: 1px solid rgba(198, 161, 91, 0.24);
    color: var(--gold);
    text-align: center;
    background:
      radial-gradient(ellipse at 50% 5%, rgba(102, 36, 41, 0.3), transparent 60%),
      rgba(12, 11, 10, 0.72);
    box-shadow:
      inset 0 0 52px rgba(0, 0, 0, 0.28),
      0 22px 58px rgba(0, 0, 0, 0.28);
  }

  .mobile-welcome-card::before,
  .mobile-welcome-card::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: rgba(214, 170, 100, 0.48);
    border-style: solid;
  }

  .mobile-welcome-card::before {
    left: 10px;
    top: 10px;
    border-width: 1px 0 0 1px;
  }

  .mobile-welcome-card::after {
    right: 10px;
    bottom: 10px;
    border-width: 0 1px 1px 0;
  }

  .mobile-welcome-card .eyebrow {
    margin: 0 0 0.75rem;
    color: var(--bright-gold);
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .mobile-welcome-card h1 {
    margin: 0.75rem 0 1rem;
    color: var(--bright-gold);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 10vw, 4.8rem);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 0.9;
  }

  .mobile-welcome-card h1 small {
    font-size: 0.38em;
    letter-spacing: 0;
  }

  .mobile-welcome-card > p:last-of-type {
    max-width: 430px;
    margin: 0 auto;
    color: var(--ivory);
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .mobile-homepage-sign {
    width: min(76%, 310px);
    display: block;
    margin: 24px auto 0;
  }

  .mobile-homepage-sign img {
    width: 100%;
    max-height: 120px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.72));
  }

  .mobile-shop-link {
    position: relative;
    width: min(100%, 440px);
    min-height: 126px;
    margin: 0 auto clamp(34px, 6vw, 54px);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 0.22rem;
    padding: 1.15rem 2rem 1rem;
    border: 1px solid rgba(195, 151, 82, 0.72);
    border-radius: 5px;
    color: var(--antique-gold);
    text-align: center;
    text-transform: uppercase;
    background:
      radial-gradient(ellipse at 45% 4%, rgba(164, 115, 55, 0.13), transparent 43%),
      linear-gradient(102deg, #18130f 0%, #2b2119 47%, #1a1511 100%);
    box-shadow:
      inset 0 1px rgba(227, 185, 111, 0.12),
      inset 0 0 28px rgba(0, 0, 0, 0.76),
      0 0 0 3px rgba(8, 6, 4, 0.84),
      0 0 0 4px rgba(156, 113, 61, 0.3),
      0 14px 30px rgba(0, 0, 0, 0.42);
  }

  .mobile-shop-link::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(198, 161, 91, 0.22);
    pointer-events: none;
  }

  .mobile-shop-link > * {
    position: relative;
    z-index: 1;
  }

  .mobile-shop-link > span {
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: 1.12rem;
    letter-spacing: 0.1em;
  }

  .mobile-shop-link > small,
  .mobile-shop-link > strong {
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: 0.55rem;
    font-weight: 500;
    letter-spacing: 0.11em;
    line-height: 1.35;
    opacity: 0.9;
  }

  .mobile-shop-link > b {
    margin-top: 0.45rem;
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.12em;
  }

  .mobile-gallery-list {
    max-width: 1040px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 4vw, 38px);
  }

  .mobile-gallery-card {
    min-width: 0;
    display: block;
    border: 1px solid rgba(198, 161, 91, 0.46);
    color: var(--ivory);
    background: #11100f;
    box-shadow:
      0 18px 42px rgba(0, 0, 0, 0.38),
      0 0 0 4px rgba(7, 6, 5, 0.8),
      0 0 0 5px rgba(198, 161, 91, 0.14);
    transition:
      border-color 260ms ease,
      box-shadow 260ms ease,
      transform 260ms ease;
  }

  .mobile-gallery-image {
    position: relative;
    aspect-ratio: 3 / 2;
    display: block;
    overflow: hidden;
    background: #050403;
  }

  .mobile-gallery-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border: 1px solid rgba(229, 190, 113, 0.18);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.34);
    pointer-events: none;
  }

  .mobile-gallery-image > img {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
  }

  .mobile-gallery-copy {
    min-height: 78px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background:
      linear-gradient(180deg, rgba(58, 18, 24, 0.96), rgba(30, 11, 14, 0.98)),
      #240d12;
  }

  .mobile-gallery-copy strong {
    min-width: 0;
    color: var(--bright-gold);
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: clamp(0.78rem, 2.2vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.09em;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .mobile-gallery-copy small {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--antique-gold);
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: 0.58rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
    text-transform: uppercase;
  }

  .mobile-gallery-card:hover,
  .mobile-gallery-card:focus-visible,
  .mobile-shop-link:hover,
  .mobile-shop-link:focus-visible,
  .mobile-mark-link:hover,
  .mobile-mark-link:focus-visible {
    border-color: var(--bright-gold);
    box-shadow:
      0 20px 48px rgba(0, 0, 0, 0.44),
      0 0 0 4px rgba(7, 6, 5, 0.84),
      0 0 0 5px rgba(214, 170, 100, 0.34),
      0 0 26px rgba(198, 161, 91, 0.12);
    outline: none;
  }

  .mobile-mark-link {
    width: min(100%, 620px);
    min-height: 112px;
    margin: clamp(38px, 7vw, 68px) auto 0;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 32px;
    align-items: center;
    gap: clamp(12px, 3vw, 22px);
    padding: 0.9rem 1.25rem 0.9rem 0.75rem;
    border: 1px solid rgba(198, 161, 91, 0.36);
    color: var(--ivory);
    background:
      radial-gradient(circle at 14% 50%, rgba(198, 143, 66, 0.13), transparent 30%),
      rgba(15, 13, 12, 0.88);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
  }

  .mobile-mark-link > img {
    width: 84px;
    height: 84px;
    display: block;
    object-fit: contain;
    filter:
      contrast(1.08)
      saturate(1.04)
      drop-shadow(0 0 12px rgba(198, 144, 67, 0.18));
  }

  .mobile-mark-link > span {
    display: grid;
    gap: 0.35rem;
  }

  .mobile-mark-link strong {
    color: var(--bright-gold);
    font-family: Cinzel, "Trajan Pro", Georgia, serif;
    font-size: clamp(0.86rem, 2.4vw, 1.08rem);
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .mobile-mark-link small {
    color: var(--muted);
    font-size: 0.82rem;
    line-height: 1.45;
  }

  .mobile-mark-link > b {
    color: var(--antique-gold);
    font-family: Georgia, serif;
    font-size: 1.25rem;
    font-weight: 400;
  }

  .gallery-interior {
    width: calc(100% - 40px);
    padding: 30px 0 82px;
  }

  .return-link {
    margin-bottom: 42px;
  }

  .interior-heading h1 {
    overflow-wrap: anywhere;
  }

  .gallery-introduction {
    max-width: 720px;
  }

  .art-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .behind-mark-page {
    width: calc(100% - 40px);
    min-height: calc(100dvh - 218px);
    padding: 30px 0 82px;
  }

  .behind-mark-panel {
    padding: clamp(40px, 7vw, 72px);
  }

  .site-footer {
    min-height: 190px;
    height: auto;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    grid-template-rows: 44px auto 36px auto;
    gap: 10px 8px;
    padding: 16px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .footer-facebook {
    grid-column: 1;
    grid-row: 1;
  }

  .footer-instagram {
    grid-column: 3;
    grid-row: 1;
  }

  .site-footer nav {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .site-footer nav,
  .site-footer .footer-menu {
    flex-wrap: wrap;
    gap: 0.7rem 1rem;
  }

  .site-footer nav a,
  .site-footer .footer-menu a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
  }

  .dachshund-art {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 104px;
    height: 36px;
  }

  .site-footer p {
    grid-column: 1 / -1;
    grid-row: 4;
    font-size: 0.46rem;
    line-height: 1.5;
  }

  .art-lightbox {
    padding:
      calc(18px + env(safe-area-inset-top, 0px))
      18px
      calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .art-lightbox-panel {
    max-width: calc(100vw - 36px);
    max-height: calc(100dvh - 36px);
  }
}

@media (max-width: 680px) {
  .mobile-home-header .site-header,
  .site-header.mobile-home-header,
  .site-header {
    width: 100%;
    min-height: calc(88px + env(safe-area-inset-top, 0px));
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    padding-inline: 12px;
  }

  .mobile-home-header .header-signature img,
  .site-header.mobile-home-header .header-signature img,
  .site-header .header-signature img {
    width: min(62vw, 260px);
    max-height: 64px;
  }

  .studio-menu nav {
    left: -2px;
    width: calc(100vw - 24px);
  }

  .mobile-studio-home {
    padding-inline: 16px;
  }

  .mobile-welcome-card {
    padding: 30px 20px;
  }

  .mobile-welcome-card h1 {
    font-size: clamp(3rem, 17vw, 4.4rem);
  }

  .mobile-homepage-sign {
    width: min(88%, 280px);
  }

  .mobile-shop-link {
    width: calc(100% - 10px);
    min-height: 120px;
  }

  .mobile-gallery-list {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mobile-gallery-copy {
    min-height: 74px;
    padding: 0.85rem 1rem;
  }

  .mobile-gallery-copy strong {
    font-size: 0.88rem;
  }

  .mobile-gallery-copy small {
    font-size: 0.56rem;
  }

  .mobile-mark-link {
    grid-template-columns: 74px minmax(0, 1fr) 24px;
    min-height: 102px;
    padding: 0.75rem 0.9rem 0.75rem 0.55rem;
  }

  .mobile-mark-link > img {
    width: 70px;
    height: 70px;
  }

  .gallery-interior,
  .behind-mark-page {
    width: calc(100% - 32px);
    padding-top: 24px;
    padding-bottom: 70px;
  }

  .return-link {
    width: 100%;
    min-height: 50px;
    justify-content: center;
    margin-bottom: 38px;
    padding: 0.72rem 0.9rem 0.68rem;
    font-size: 0.61rem;
    letter-spacing: 0.085em;
  }

  .interior-heading {
    margin-bottom: 24px;
  }

  .interior-heading p {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
  }

  .interior-heading h1,
  .behind-mark-panel h1 {
    font-size: clamp(2rem, 10.5vw, 3.35rem);
    letter-spacing: 0.025em;
    line-height: 1.08;
  }

  .gallery-introduction {
    font-size: 0.95rem;
    line-height: 1.72;
  }

  .gallery-divider {
    margin: 38px 0 26px;
  }

  .art-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .behind-mark-panel {
    min-height: 0;
    padding: 38px 20px;
  }

  .behind-mark-eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    line-height: 1.55;
  }

  .behind-mark-placeholder {
    width: 100%;
  }

  .site-footer {
    min-height: 214px;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    padding-inline: 10px;
  }

  .site-footer nav,
  .site-footer .footer-menu {
    gap: 0.35rem 0.7rem;
  }

  .site-footer nav a,
  .site-footer .footer-menu a {
    padding-inline: 0.15rem;
    font-size: 0.54rem;
    letter-spacing: 0.075em;
  }

  .site-footer nav > span {
    display: none;
  }

  .footer-social {
    width: 40px;
    height: 40px;
  }

  .art-lightbox {
    padding:
      calc(14px + env(safe-area-inset-top, 0px))
      12px
      calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .art-lightbox-panel {
    width: calc(100vw - 24px);
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 28px);
    padding: 8px;
  }

  .art-lightbox-close,
  .lightbox-close {
    width: 44px;
    height: 44px;
  }
}

@media (hover: none) and (pointer: coarse) {
  .mobile-gallery-card:hover,
  .mobile-shop-link:hover,
  .mobile-mark-link:hover,
  .return-link:hover,
  .art-placeholder:hover,
  .art-card > a:hover {
    transform: none;
  }

  .mobile-gallery-card:active,
  .mobile-shop-link:active,
  .mobile-mark-link:active {
    filter: brightness(1.08);
  }
}

/* v4.1.5 — keep the desktop header panel solid while a room closes.
   Earlier focus rules dimmed the entire scene header; the room covered that
   change while open, but exposed a translucent panel during the return. */
@media (min-width: 981px) {
  .is-room-focused .scene-header,
  .phase-opening .scene-header,
  .phase-open .scene-header,
  .phase-closing .scene-header {
    opacity: 1;
    filter: none;
  }
}