:root {
  --gold: #c7a16b;
  --gold-bright: #f1c989;
  --ink: #080b0e;
  --panel: rgba(12, 12, 11, .95);
  --line: rgba(221, 181, 124, .5);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  margin: 0;
  background: #030607;
  color: #f6ead7;
  font-family: var(--sans);
}
button, input, textarea { font: inherit; }
button, a { color: inherit; }
.skip-link {
  position: fixed;
  z-index: 100;
  top: -80px;
  left: 1rem;
  padding: .8rem 1rem;
  background: #fff;
  color: #111;
}
.skip-link:focus { top: 1rem; }

.arrival {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #030607;
}
.scene-frame {
  position: relative;
  width: min(100vw, 150vh);
  aspect-ratio: 3 / 2;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  opacity: 1;
  transition: opacity .55s ease;
}
.scene-frame[hidden] { display: none; }
.scene-frame.scene-leaving { opacity: 0; }
.back-button {
  position: absolute;
  z-index: 9;
  top: 3.1%;
  left: 2.3%;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 46px;
  min-height: 46px;
  padding: .6rem .85rem;
  border: 1px solid rgba(231, 193, 139, .55);
  border-radius: 2rem;
  background: rgba(6, 7, 7, .68);
  color: #f2d2a4;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: background .25s, border-color .25s, transform .25s;
}
.back-button b { font-size: 1.2rem; font-weight: 400; line-height: 1; }
.back-button span {
  font-size: clamp(.62rem, .78vw, .84rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.back-button:hover,
.back-button:focus-visible {
  outline: none;
  border-color: var(--gold-bright);
  background: rgba(22, 15, 10, .9);
  transform: translateX(-2px);
}
.scene-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 8vw rgba(0, 0, 0, .27);
}
.arrival-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
  -webkit-user-drag: none;
}

.hotspot {
  --glow-x: 50%;
  --glow-y: 50%;
  position: absolute;
  z-index: 4;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 48%;
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(237, 181, 100, 0) 0 28%, rgba(237, 181, 100, 0) 62%);
  cursor: pointer;
  transition: border-color .35s, background .35s, filter .35s;
}
.hotspot::before {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color .35s, box-shadow .35s, transform .35s;
}
.hotspot::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 7px;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: background .35s, box-shadow .35s;
}
.hotspot > span {
  position: absolute;
  left: 50%;
  bottom: 8%;
  max-width: 14rem;
  padding: .45rem .7rem;
  border: 1px solid rgba(231, 193, 139, .34);
  border-radius: 2rem;
  background: rgba(6, 7, 7, .76);
  color: #f5d4a3;
  font-size: clamp(.62rem, .78vw, .84rem);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity .3s, transform .3s;
  pointer-events: none;
}
.hotspot:hover,
.hotspot:focus-visible {
  outline: none;
  border-color: rgba(231, 179, 101, .2);
  background: radial-gradient(circle at var(--glow-x) var(--glow-y), rgba(245, 185, 98, .23) 0, rgba(226, 159, 73, .06) 35%, transparent 70%);
  filter: drop-shadow(0 0 12px rgba(235, 166, 74, .28));
}
.hotspot:hover::before,
.hotspot:focus-visible::before {
  border-color: rgba(247, 202, 138, .42);
  box-shadow: 0 0 18px rgba(232, 168, 84, .22), inset 0 0 18px rgba(232, 168, 84, .12);
  transform: scale(1.03);
}
.hotspot:hover::after,
.hotspot:focus-visible::after {
  background: var(--gold-bright);
  box-shadow: 0 0 14px var(--gold-bright);
}
.hotspot:hover > span,
.hotspot:focus-visible > span {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Percentages are relative to the original 1536 × 1024 artwork. */
.hotspot-villa { left: 34.5%; top: 35%; width: 17%; height: 23%; --glow-y: 68%; }
.hotspot-mustang { left: 20%; top: 52%; width: 28%; height: 25%; --glow-y: 54%; }
.hotspot-bedford { left: 46%; top: 47%; width: 26%; height: 25%; }
.hotspot-workshop { left: 60%; top: 34%; width: 19%; height: 29%; }
.hotspot-crate { left: 37.5%; top: 68%; width: 19%; height: 21%; }
.hotspot-bell { left: 82.8%; top: 43%; width: 12%; height: 29%; border-radius: 16px; --glow-x: 64%; --glow-y: 58%; }
.hotspot-bell > span { left: 10%; bottom: -17%; transform: translate(-50%, 8px); }
.hotspot-bell:hover > span,
.hotspot-bell:focus-visible > span { transform: translate(-50%, 0); }

.hotspot-radio { left: 47.4%; top: 56.2%; width: 15%; height: 13%; border-radius: 20px; --glow-y: 56%; }
.hotspot-mustang-terrace { left: 2%; top: 13%; width: 44%; height: 31%; --glow-x: 58%; }
.hotspot-mustang-bedford { left: 75%; top: 16%; width: 24%; height: 25%; }
.hotspot-mustang-villa { left: 56%; top: 8%; width: 22%; height: 31%; --glow-y: 65%; }
.hotspot-radio > span { bottom: -33%; }

.hotspot-bedford-bell {
  left: 30.2%;
  top: 27.2%;
  width: 11%;
  height: 18%;
  border-radius: 42%;
  --glow-x: 50%;
  --glow-y: 51%;
}
.hotspot-bedford-flavors {
  left: 23.4%;
  top: 45.5%;
  width: 24.4%;
  height: 52.5%;
  border-radius: 6%;
  --glow-y: 48%;
}
.hotspot-bedford-terrace {
  left: 0;
  top: 23%;
  width: 24%;
  height: 48%;
  --glow-x: 44%;
}
.hotspot-bedford-workshop {
  left: 80.5%;
  top: 0;
  width: 19.5%;
  height: 60%;
  border-radius: 8%;
  --glow-y: 36%;
}
.hotspot-bedford-bell > span { bottom: -22%; }
.hotspot-bedford-flavors > span { bottom: 5%; }

.hotspot-villa-terrace {
  left: 39%;
  top: 31%;
  width: 23%;
  height: 36%;
  --glow-y: 65%;
}
.hotspot-villa-cellar {
  left: 70%;
  top: 70%;
  width: 22%;
  height: 29%;
  border-radius: 10%;
  --glow-x: 52%;
}
.hotspot-villa-kitchen {
  left: 0;
  top: 28%;
  width: 20%;
  height: 49%;
  border-radius: 8%;
  --glow-x: 42%;
}
.hotspot-villa-lounge {
  left: 84%;
  top: 28%;
  width: 16%;
  height: 48%;
  border-radius: 8%;
  --glow-x: 42%;
  --glow-y: 63%;
}
.hotspot-villa-museum {
  left: 8%;
  top: 6%;
  width: 30%;
  height: 27%;
  border-radius: 8%;
  --glow-x: 46%;
}
.hotspot-villa-office {
  left: 66%;
  top: 6%;
  width: 24%;
  height: 27%;
  border-radius: 8%;
}
.hotspot-villa-terrace > span { bottom: 9%; }
.hotspot-villa-cellar > span { bottom: 13%; }
.hotspot-villa-kitchen > span { bottom: 18%; }
.hotspot-villa-lounge > span { bottom: 15%; }

.mobile-text-button { display: none; }
.workshop-story {
  position: absolute;
  z-index: 5;
  left: 64.7%;
  top: 11.2%;
  bottom: 11.1%;
  width: 28.75%;
  overflow: auto;
  padding: clamp(1rem, 1.55vw, 1.6rem);
  border: 1px solid rgba(177, 130, 70, .72);
  border-radius: 10px;
  background: rgba(15, 13, 9, .95);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .36);
  color: #cdb38c;
  scrollbar-color: rgba(221, 181, 124, .62) transparent;
}
.workshop-story-copy {
  font: clamp(.98rem, 1.2vw, 1.25rem)/1.58 var(--sans);
}
.workshop-story-copy p {
  margin: 0 0 clamp(1rem, 1.5vh, 1.3rem);
}
.workshop-story h1 {
  margin: .15rem 0 1rem;
  color: #f4c783;
  font: 700 clamp(1.65rem, 2.3vw, 2.35rem)/1 var(--serif);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.workshop-story .panel-kicker { margin-top: 0; }
.workshop-story-copy em,
.workshop-text-copy em {
  color: #d8b889;
}
.workshop-text-copy strong,
.workshop-story-copy strong {
  color: #f0c98f;
}
.workshop-text-panel h1 { color: #f4c783; }
.workshop-text-panel { width: min(92vw, 620px); }
.workshop-text-copy {
  color: #d1bea2;
  font: 1.05rem/1.68 var(--sans);
}
.workshop-text-copy p { margin: 0 0 1.3rem; }

.museum-story {
  position: absolute;
  z-index: 6;
  top: 3.4%;
  right: 2.4%;
  bottom: 3.4%;
  width: min(35%, 520px);
  overflow: auto;
  padding: clamp(1.2rem, 2vw, 2rem);
  border: 1px solid rgba(221, 181, 124, .48);
  background: linear-gradient(145deg, rgba(12, 9, 6, .94), rgba(17, 11, 7, .82));
  box-shadow: 0 22px 70px rgba(0, 0, 0, .5);
  backdrop-filter: blur(7px);
  scrollbar-color: rgba(221, 181, 124, .55) transparent;
}
.museum-story h1,
.museum-text-panel h1 {
  margin: .15rem 0 1rem;
  color: #e3bb82;
  font: 700 clamp(2.2rem, 4.2vw, 4.2rem)/.82 var(--serif);
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.museum-story .panel-kicker { margin-top: 0; }
.museum-story-copy {
  color: #ead8bd;
  font: clamp(.78rem, 1vw, 1.06rem)/1.5 var(--sans);
}
.museum-story-copy p { margin: 0 0 clamp(.75rem, 1.4vh, 1.15rem); }
.museum-text-panel { width: min(92vw, 680px); }
.museum-text-panel .museum-story-copy {
  font-size: 1.06rem;
  line-height: 1.62;
}

.lounge-stories {
  position: absolute;
  z-index: 6;
  inset: 13% 2.4% 5%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}
.lounge-story {
  position: relative;
  width: min(25.5%, 380px);
  height: 66%;
  overflow: visible;
  color: #e8d9c4;
  pointer-events: auto;
}
.lounge-story-scroll {
  height: 100%;
  overflow: auto;
  padding: clamp(.9rem, 1.25vw, 1.35rem);
  border: 2px solid rgba(78, 47, 22, .9);
  border-radius: 36px;
  background: rgba(247, 226, 191, .94);
  box-shadow: 7px 9px 0 rgba(32, 17, 8, .7), 0 18px 50px rgba(0, 0, 0, .38);
  color: #24170f;
  scrollbar-color: rgba(100, 61, 30, .55) transparent;
}
.lounge-story::after {
  content: "";
  position: absolute;
  bottom: -16px;
  width: 0;
  height: 0;
  border-top: 26px solid rgba(247, 226, 191, .96);
  filter: drop-shadow(0 8px 5px rgba(0, 0, 0, .25));
}
.lounge-story-first::after {
  right: 18%;
  border-left: 18px solid transparent;
  transform: rotate(-9deg);
}
.lounge-story-second::after {
  left: 18%;
  border-right: 18px solid transparent;
  transform: rotate(9deg);
}
.lounge-story-second { margin-top: 5%; }
.lounge-interview-question {
  position: absolute;
  z-index: 7;
  top: 4.5%;
  left: 50%;
  width: min(38%, 530px);
  margin: 0;
  padding: .65rem 1rem;
  border: 2px solid rgba(236, 202, 151, .82);
  border-radius: 32px;
  background: rgba(18, 12, 8, .91);
  color: #f1ddc0;
  font: italic clamp(.78rem, 1.05vw, 1.05rem)/1.42 var(--serif);
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 5px 7px 0 rgba(0, 0, 0, .48);
  backdrop-filter: blur(4px);
}
.lounge-interview-question::after {
  content: "";
  position: absolute;
  left: 58%;
  bottom: -14px;
  border-top: 18px solid rgba(9, 7, 5, .78);
  border-right: 14px solid transparent;
  transform: rotate(7deg);
}
.lounge-story h2,
.lounge-dialog-copy h1,
.lounge-dialog-copy h2 {
  margin: 0 0 .9rem;
  color: #6f3e18;
  font: 700 clamp(1.15rem, 1.8vw, 1.7rem)/1.1 var(--serif);
}
.lounge-story p,
.lounge-dialog-copy p {
  margin: 0 0 clamp(.65rem, 1.25vh, 1rem);
  font-size: clamp(.72rem, .84vw, .92rem);
  line-height: 1.5;
}
.lounge-text-panel { width: min(92vw, 720px); }
.interview-question-mobile {
  position: relative;
  margin: 1rem 0 1.8rem !important;
  padding: 1rem;
  border: 2px solid rgba(236, 202, 151, .72);
  border-radius: 30px;
  background: rgba(18, 12, 8, .94);
  color: #f1ddc0;
  font: italic 1.05rem/1.5 var(--serif) !important;
}
.interview-question-mobile::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -14px;
  border-top: 17px solid rgba(18, 12, 8, .94);
  border-left: 14px solid transparent;
}
.lounge-dialog-copy section {
  position: relative;
  padding: 1.25rem;
  border: 2px solid rgba(78, 47, 22, .9);
  border-radius: 32px;
  background: #f3dfbd;
  box-shadow: 6px 8px 0 rgba(0, 0, 0, .34);
  color: #24170f;
}
.lounge-dialog-copy section::after {
  content: "";
  position: absolute;
  bottom: -14px;
  border-top: 20px solid #f3dfbd;
}
.lounge-dialog-copy section:first-of-type::after {
  right: 18%;
  border-left: 14px solid transparent;
}
.lounge-dialog-copy section:last-of-type::after {
  left: 18%;
  border-right: 14px solid transparent;
}
.lounge-dialog-copy section + section {
  margin-top: 2.4rem;
}
.lounge-dialog-copy h1,
.lounge-dialog-copy h2 {
  color: #6f3e18;
  font-size: clamp(1.7rem, 5vw, 2.4rem);
}
.lounge-dialog-copy p { font-size: 1.06rem; line-height: 1.68; }

.kitchen-story {
  position: absolute;
  z-index: 6;
  top: 6%;
  right: 2.4%;
  bottom: 6%;
  width: min(30%, 455px);
  overflow: visible;
  color: #e9d9c2;
}
.kitchen-story-copy {
  color: #24170f;
  font: clamp(.74rem, .9vw, 1rem)/1.52 var(--sans);
}
.kitchen-story > .kitchen-story-copy {
  height: 100%;
  overflow: auto;
  padding: 0 .6rem 1rem 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  scrollbar-color: rgba(221, 181, 124, .55) transparent;
}
.kitchen-story-copy p {
  position: relative;
  margin: 0 0 clamp(1rem, 1.8vh, 1.35rem);
  padding: clamp(.8rem, 1.1vw, 1.1rem);
  border: 2px solid rgba(78, 47, 22, .9);
  border-radius: 28px;
  background: rgba(247, 226, 191, .95);
  box-shadow: 6px 7px 0 rgba(32, 17, 8, .56);
}
.kitchen-story-copy p::after {
  content: "";
  position: absolute;
  bottom: -15px;
  border-top: 18px solid rgba(247, 226, 191, .98);
}
.kitchen-story-copy p:nth-child(odd)::after {
  left: 18%;
  border-right: 14px solid transparent;
}
.kitchen-story-copy p:nth-child(even)::after {
  right: 18%;
  border-left: 14px solid transparent;
}
.kitchen-story-copy strong { color: #7b4318; }
.kitchen-text-panel { width: min(92vw, 690px); }
.kitchen-text-panel .kitchen-story-copy {
  position: relative;
  margin: .8rem 0 1rem;
  padding: 0 .4rem 0 0;
  border: 0;
  background: transparent;
  font-size: 1.06rem;
  line-height: 1.68;
}

.office-story {
  position: absolute;
  z-index: 6;
  top: 10%;
  left: 2.4%;
  bottom: 5%;
  width: min(31%, 470px);
  overflow: visible;
}
.office-story::after {
  content: "";
  position: absolute;
  top: 45%;
  right: -23px;
  border-top: 17px solid transparent;
  border-bottom: 17px solid transparent;
  border-left: 26px solid rgba(16, 12, 7, .94);
  filter: drop-shadow(7px 5px 6px rgba(0, 0, 0, .28));
}
.office-story-copy {
  color: #eadbc6;
  font: clamp(.7rem, .86vw, .96rem)/1.56 var(--sans);
}
.office-story > .office-story-copy {
  height: 100%;
  overflow: auto;
  padding: clamp(1rem, 1.45vw, 1.5rem);
  border: 2px solid rgba(221, 181, 124, .58);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(10, 8, 5, .95), rgba(27, 18, 9, .88));
  box-shadow: 7px 9px 0 rgba(0, 0, 0, .36), 0 20px 60px rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px);
  scrollbar-color: rgba(221, 181, 124, .55) transparent;
}
.office-story-copy p { margin: 0 0 clamp(.75rem, 1.35vh, 1.1rem); }
.office-story-copy strong { color: #f0c98f; }
.office-story-copy em { color: #d9bc91; }
.office-text-panel { width: min(92vw, 700px); }
.office-text-panel .office-story-copy {
  margin: .8rem 0 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(221, 181, 124, .4);
  border-radius: 28px;
  background: rgba(199, 161, 107, .06);
  font-size: 1.06rem;
  line-height: 1.68;
}

.terrace-story {
  position: absolute;
  z-index: 6;
  top: 10%;
  left: 2.4%;
  width: min(32%, 485px);
  height: 48%;
  overflow: visible;
}
.terrace-story::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: -24px;
  border-top: 28px solid rgba(16, 10, 6, .94);
  border-left: 22px solid transparent;
  filter: drop-shadow(5px 7px 5px rgba(0, 0, 0, .26));
  transform: rotate(-7deg);
}
.terrace-story-copy {
  color: #f0dfc7;
  font: clamp(.72rem, .86vw, .96rem)/1.56 var(--sans);
}
.terrace-story > .terrace-story-copy {
  height: 100%;
  overflow: auto;
  padding: clamp(1rem, 1.45vw, 1.5rem);
  border: 2px solid rgba(239, 188, 113, .65);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(12, 8, 5, .95), rgba(39, 18, 7, .86));
  box-shadow: 7px 9px 0 rgba(0, 0, 0, .34), 0 22px 65px rgba(0, 0, 0, .46);
  backdrop-filter: blur(6px);
  scrollbar-color: rgba(239, 188, 113, .58) transparent;
}
.terrace-story-copy h1 {
  margin: 0 0 .25rem;
  color: #f4c783;
  font: 700 clamp(1.45rem, 2.15vw, 2.15rem)/1.02 var(--serif);
  letter-spacing: -.02em;
  text-transform: none;
}
.terrace-story-copy p { margin: 0 0 clamp(.75rem, 1.35vh, 1.1rem); }
.terrace-story-copy strong { color: #ffd49a; }
.terrace-tagline {
  color: #d8b889;
  letter-spacing: .03em;
}
.terrace-text-panel { width: min(92vw, 720px); }
.terrace-text-panel .terrace-story-copy {
  margin: .8rem 0 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(221, 181, 124, .4);
  border-radius: 28px;
  background: rgba(199, 161, 107, .06);
  font-size: 1.06rem;
  line-height: 1.68;
}
.terrace-text-panel .terrace-story-copy h1 {
  font-size: clamp(2rem, 7vw, 3.6rem);
}

.cellar-story {
  position: absolute;
  z-index: 6;
  top: 10%;
  right: 2.4%;
  width: min(32%, 485px);
  height: 48%;
  overflow: visible;
}
.cellar-story::after {
  content: "";
  position: absolute;
  left: 18%;
  bottom: -24px;
  border-top: 28px solid rgba(18, 7, 5, .95);
  border-right: 22px solid transparent;
  filter: drop-shadow(-5px 7px 5px rgba(0, 0, 0, .28));
  transform: rotate(7deg);
}
.cellar-story-copy {
  color: #f2ded2;
  font: clamp(.72rem, .86vw, .96rem)/1.56 var(--sans);
}
.cellar-story > .cellar-story-copy {
  height: 100%;
  overflow: auto;
  padding: clamp(1rem, 1.45vw, 1.5rem);
  border: 2px solid rgba(234, 116, 73, .7);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(15, 6, 4, .96), rgba(50, 12, 7, .88));
  box-shadow: -7px 9px 0 rgba(0, 0, 0, .36), 0 22px 65px rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  scrollbar-color: rgba(235, 114, 72, .68) transparent;
}
.cellar-story-copy h1 {
  margin: 0 0 .25rem;
  color: #ffad82;
  font: 700 clamp(1.4rem, 2.05vw, 2.05rem)/1.02 var(--serif);
  letter-spacing: -.02em;
  text-transform: none;
}
.cellar-story-copy p { margin: 0 0 clamp(.75rem, 1.35vh, 1.1rem); }
.cellar-story-copy strong { color: #ffc09f; }
.cellar-tagline,
.cellar-signature {
  color: #dfa586;
  letter-spacing: .03em;
}
.cellar-text-panel { width: min(92vw, 720px); }
.cellar-text-panel .cellar-story-copy {
  margin: .8rem 0 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(234, 116, 73, .42);
  border-radius: 28px;
  background: rgba(159, 54, 25, .08);
  font-size: 1.06rem;
  line-height: 1.68;
}
.cellar-text-panel .cellar-story-copy h1 {
  font-size: clamp(2rem, 7vw, 3.6rem);
}

.scene-status {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  margin: 0;
  padding: .7rem 1rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: rgba(6, 7, 7, .86);
  color: #f0d1a4;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .3s, transform .3s;
}
.scene-status.visible { opacity: 1; transform: translate(-50%, 0); }

.panel {
  width: min(92vw, 500px);
  max-height: min(90vh, 760px);
  overflow: auto;
  margin: auto;
  padding: clamp(1.5rem, 4vw, 3.2rem);
  border: 1px solid var(--line);
  background: var(--panel);
  color: #f2e5d2;
  box-shadow: 0 30px 100px #000;
}
.panel::backdrop {
  background: rgba(0, 0, 0, .68);
  backdrop-filter: blur(8px);
}
.panel[open] { animation: panel-in .38s ease-out; }
.close-button {
  position: absolute;
  top: .8rem;
  right: .9rem;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}
.panel-kicker {
  color: var(--gold);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.panel h1 {
  margin: 1.5rem 0;
  color: #e3bd85;
  font: normal clamp(2.5rem, 7vw, 4.8rem)/.88 var(--serif);
  text-transform: uppercase;
}
.panel-intro, #bonus-meta {
  color: #bfb3a1;
  font-size: 1rem;
  line-height: 1.65;
}
.contact-panel form { display: grid; gap: 1rem; margin-top: 2rem; }
.contact-panel label {
  color: #bda887;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.contact-panel input,
.contact-panel textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .8rem 0;
  border: 0;
  border-bottom: 1px solid rgba(223, 189, 139, .35);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: #fff;
  resize: vertical;
}
.contact-panel input:focus,
.contact-panel textarea:focus { border-bottom-color: var(--gold-bright); }
.primary-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: .5rem;
  padding: .95rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  background: transparent;
  color: #e7c18e;
  cursor: pointer;
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .12em;
}
.primary-action:hover { background: #d2a86f; color: #111; }
.contact-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: .8rem;
  margin-top: 1.5rem;
}
.contact-options a {
  display: flex;
  justify-content: space-between;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.25);
  color: #e6c18c;
  font-size: .8rem;
  letter-spacing: .1em;
  text-decoration: none;
  text-transform: uppercase;
}

.audio-panel {
  width: min(92vw, 430px);
  padding: 2.8rem 1.5rem 1.5rem;
}
#track-title {
  display: block;
  margin-top: .35rem;
  color: #f0d2a7;
  font: 700 clamp(1.15rem, 4vw, 1.55rem)/1.2 var(--serif);
  letter-spacing: .025em;
}
#bonus-meta {
  margin: .55rem 0 0;
  color: #aa9d8a;
  font-size: .92rem;
  line-height: 1.45;
}
.audio-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 1.25rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,.18);
}
#play-bonus {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: #e7c18e;
  cursor: pointer;
}
.timeline { flex: 1; min-width: 0; }
.timeline > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#audio-progress { width: 100%; accent-color: var(--gold); }
.audio-panel.broadcast-player .panel-kicker,
.audio-panel.broadcast-player #bonus-meta,
.audio-panel.broadcast-player #bonus-duration-label {
  display: none;
}
.audio-panel.broadcast-player #track-title { margin-top: 0; }
.audio-panel.broadcast-player .timeline > div { justify-content: flex-end; }

.flavor-panel {
  width: min(94vw, 900px);
  max-height: min(92vh, 820px);
}
.flavor-tabs {
  display: flex;
  gap: .55rem;
  margin: 1.4rem 0 2rem;
  padding: 0 0 .8rem;
  overflow-x: auto;
  scrollbar-color: var(--gold) rgba(255,255,255,.08);
}
.flavor-tab {
  flex: 0 0 auto;
  padding: .65rem .85rem;
  border: 1px solid rgba(221, 181, 124, .25);
  border-radius: 2rem;
  background: rgba(255,255,255,.025);
  color: #bdae97;
  cursor: pointer;
  font-size: .78rem;
  letter-spacing: .07em;
  white-space: nowrap;
}
.flavor-tab:hover,
.flavor-tab:focus-visible,
.flavor-tab.active {
  outline: none;
  border-color: var(--gold-bright);
  background: rgba(199, 161, 107, .14);
  color: #f3d4a7;
}
.flavor-sheet {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: .4rem 3rem;
  align-items: start;
}
.flavor-heading {
  display: flex;
  grid-column: 1;
  gap: 1.1rem;
  align-items: center;
}
#flavor-emoji {
  display: grid;
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  place-items: center;
  border: 1px solid rgba(221, 181, 124, .28);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,161,107,.18), transparent 70%);
  font-size: 2.4rem;
}
.flavor-panel h1 {
  margin: 0 0 .35rem;
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}
#flavor-origin {
  margin: 0;
  color: var(--gold);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.flavor-description {
  grid-column: 1;
  margin: 1.3rem 0 .7rem;
  color: #d5c8b5;
  font-size: 1.06rem;
  line-height: 1.65;
  white-space: pre-line;
}
.flavor-taste {
  grid-column: 1;
  margin: .4rem 0 0;
  color: #e7bd83;
  font-size: .94rem;
  line-height: 1.5;
}
.flavor-player {
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 1rem;
  align-items: center;
  align-self: center;
  padding: 1.25rem;
  border: 1px solid rgba(221, 181, 124, .28);
  border-radius: 16px;
  background: rgba(255,255,255,.025);
}
#play-flavor {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: #e7c18e;
  cursor: pointer;
}
#flavor-progress { width: 100%; accent-color: var(--gold); }
.flavor-audio-note {
  grid-column: 2;
  margin: .4rem 0 0;
  color: #887d6d;
  font-size: .8rem;
  line-height: 1.45;
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes touch-hint {
  0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.75); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
}

/* Une seule grammaire visuelle pour tous les récits : panneau de la terrasse. */
.museum-story,
.lounge-stories,
.kitchen-story,
.office-story,
.terrace-story,
.cellar-story {
  top: 10%;
  bottom: auto;
  width: min(32%, 485px);
  height: 48%;
}
.museum-story,
.kitchen-story,
.cellar-story {
  right: 2.4%;
  left: auto;
}
.lounge-stories,
.office-story,
.terrace-story {
  right: auto;
  left: 2.4%;
}
.lounge-stories {
  top: 10%;
  right: 2.4%;
  bottom: auto;
  left: auto;
  display: block;
  pointer-events: none;
}
.lounge-story {
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: auto;
}
.workshop-story,
.museum-story,
.lounge-story-scroll,
.kitchen-story > .kitchen-story-copy,
.office-story > .office-story-copy,
.terrace-story > .terrace-story-copy,
.cellar-story > .cellar-story-copy {
  overflow: auto;
  padding: clamp(1.15rem, 1.55vw, 1.65rem);
  border: 2px solid rgba(239, 188, 113, .65);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(12, 8, 5, .95), rgba(39, 18, 7, .86));
  box-shadow: 7px 9px 0 rgba(0, 0, 0, .34), 0 22px 65px rgba(0, 0, 0, .46);
  color: #f0dfc7;
  backdrop-filter: blur(6px);
  scrollbar-color: rgba(239, 188, 113, .68) transparent;
  scrollbar-width: thin;
}
.lounge-story-scroll,
.kitchen-story > .kitchen-story-copy,
.office-story > .office-story-copy,
.terrace-story > .terrace-story-copy,
.cellar-story > .cellar-story-copy {
  height: 100%;
  font: clamp(.92rem, 1.08vw, 1.18rem)/1.64 var(--sans);
}
.museum-story {
  font: clamp(.86rem, .98vw, 1.06rem)/1.6 var(--sans);
}
.workshop-story-copy {
  font: clamp(1rem, 1.22vw, 1.3rem)/1.64 var(--sans);
}
.museum-story-copy,
.lounge-story p,
.kitchen-story-copy p,
.office-story-copy p,
.terrace-story-copy p,
.cellar-story-copy p {
  font-size: inherit;
  line-height: inherit;
}
.museum-story h1,
.lounge-story h2,
.terrace-story-copy h1,
.cellar-story-copy h1 {
  color: #f4c783;
}
.museum-story h1 {
  margin: .15rem 0 1rem;
  font-size: clamp(1.65rem, 2.3vw, 2.35rem);
  line-height: 1;
}
.lounge-story h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.45rem, 2.05vw, 2.05rem);
}
.lounge-story-scroll h2:not(:first-child) {
  margin-top: 1.7rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(239, 188, 113, .35);
}
.kitchen-story-copy p {
  position: static;
  margin: 0 0 clamp(.8rem, 1.35vh, 1.15rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
}
.kitchen-story-copy p::after { content: none; }
.workshop-story-copy strong,
.kitchen-story-copy strong,
.office-story-copy strong,
.terrace-story-copy strong,
.cellar-story-copy strong { color: #ffd49a; }
.lounge-story-scroll strong,
.lounge-dialog-copy strong { color: #ffd49a; }
.lounge-story-scroll em,
.lounge-dialog-copy em,
.kitchen-story-copy em,
.office-story-copy em,
.terrace-tagline,
.cellar-tagline,
.cellar-signature { color: #d8b889; }
.lounge-story-scroll .dj-room,
.kitchen-story-copy .dj-room,
.office-story-copy .dj-room {
  margin: 0 0 .65rem;
  color: var(--gold);
  font: 500 .72rem/1.4 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.dj-heading,
.panel .dj-heading {
  margin: 0 0 1.3rem;
  color: #f4c783;
  font: 700 clamp(1.65rem, 2.3vw, 2.35rem)/1.08 var(--serif);
  letter-spacing: -.025em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.lounge-story-scroll .dj-heading + h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.lounge-story-scroll h3,
.lounge-dialog-copy h3 {
  color: #d8b889;
  font: italic 500 1.1em/1.35 var(--serif);
}
.lounge-story::after,
.kitchen-story::after,
.office-story::after,
.terrace-story::after,
.cellar-story::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: -24px;
  width: 0;
  height: 0;
  border: 0;
  border-top: 28px solid rgba(16, 10, 6, .94);
  filter: drop-shadow(5px 7px 5px rgba(0, 0, 0, .26));
}
.lounge-story::after,
.office-story::after,
.terrace-story::after {
  right: 18%;
  left: auto;
  border-left: 22px solid transparent;
  transform: rotate(-7deg);
}
.kitchen-story::after,
.cellar-story::after {
  right: auto;
  left: 18%;
  border-right: 22px solid transparent;
  transform: rotate(7deg);
}

@media (max-aspect-ratio: 3 / 2) {
  .scene-frame { width: 100vw; height: auto; }
}
@media (min-aspect-ratio: 3 / 2) {
  .scene-frame { width: auto; height: 100vh; }
}
@media (max-width: 680px) {
  .hotspot > span { display: none; }
  .hotspot:hover::after,
  .hotspot:focus-visible::after { width: 10px; height: 10px; }
  .hotspot-crate::after,
  .hotspot-bell::after {
    width: 8px;
    height: 8px;
    background: rgba(241, 201, 137, .74);
    box-shadow: 0 0 12px rgba(241, 201, 137, .74);
    animation: touch-hint 2.4s ease-in-out infinite;
  }
  .scene-frame::before {
    content: "Touchez les lumières et les objets du domaine";
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 2%;
    padding: .45rem .7rem;
    border: 1px solid rgba(231, 193, 139, .25);
    border-radius: 2rem;
    background: rgba(6, 7, 7, .68);
    color: #e9c896;
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    transform: translateX(-50%);
    pointer-events: none;
    white-space: nowrap;
  }
  .panel { padding-top: 2.8rem; }
  .back-button {
    top: 4%;
    left: 3%;
    min-width: 38px;
    min-height: 38px;
    padding: .5rem .7rem;
  }
  .back-button span { display: none; }
  [data-scene="workshop"] .mobile-text-button,
  [data-scene="african-museum"] .mobile-text-button,
  [data-scene="lounge"] .mobile-text-button,
  [data-scene="kitchen"] .mobile-text-button,
  [data-scene="office"] .mobile-text-button,
  [data-scene="terrace"] .mobile-text-button,
  [data-scene="cellar"] .mobile-text-button {
    position: absolute;
    z-index: 8;
    right: 3%;
    bottom: 4%;
    display: block;
    padding: .65rem .9rem;
    border: 1px solid rgba(231, 193, 139, .6);
    border-radius: 2rem;
    background: rgba(6, 7, 7, .82);
    color: #f2d2a4;
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(5px);
  }
  .workshop-text-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.35rem 2rem;
  }
  .workshop-story { display: none; }
  .workshop-text-panel h1 {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }
  .workshop-text-copy {
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .museum-story { display: none; }
  .museum-text-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.35rem 2rem;
  }
  .museum-text-panel h1 {
    font-size: clamp(2.2rem, 12vw, 3.5rem);
  }
  .museum-text-panel .museum-story-copy {
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .lounge-stories { display: none; }
  .lounge-interview-question {
    top: 7%;
    width: min(72%, 360px);
    padding: .5rem .7rem;
    font-size: .72rem;
  }
  .lounge-text-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.35rem 2rem;
  }
  .lounge-dialog-copy h1,
  .lounge-dialog-copy h2 {
    font-size: clamp(1.8rem, 9vw, 2.7rem);
  }
  .lounge-dialog-copy p {
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .kitchen-story { display: none; }
  .kitchen-text-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.35rem 2rem;
  }
  .kitchen-text-panel .kitchen-story-copy {
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .office-story { display: none; }
  .office-text-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.35rem 2rem;
  }
  .office-text-panel .office-story-copy {
    padding: 1rem;
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .terrace-story { display: none; }
  .terrace-text-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.35rem 2rem;
  }
  .terrace-text-panel .terrace-story-copy {
    padding: 1rem;
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .terrace-text-panel .terrace-story-copy h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .cellar-story { display: none; }
  .cellar-text-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.35rem 2rem;
  }
  .cellar-text-panel .cellar-story-copy {
    padding: 1rem;
    font-size: 1.06rem;
    line-height: 1.7;
  }
  .cellar-text-panel .cellar-story-copy h1 {
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .workshop-text-copy,
  .museum-text-panel .museum-story-copy,
  .lounge-dialog-copy .lounge-dialog-story,
  .kitchen-text-panel .kitchen-story-copy,
  .office-text-panel .office-story-copy,
  .terrace-text-panel .terrace-story-copy,
  .cellar-text-panel .cellar-story-copy {
    margin: .8rem 0 1rem;
    padding: 1.2rem;
    border: 2px solid rgba(239, 188, 113, .65);
    border-radius: 30px;
    background: linear-gradient(145deg, rgba(12, 8, 5, .96), rgba(39, 18, 7, .9));
    box-shadow: 6px 8px 0 rgba(0, 0, 0, .3), 0 18px 48px rgba(0, 0, 0, .4);
    color: #f0dfc7;
    font-size: 1.16rem;
    line-height: 1.72;
    scrollbar-color: rgba(239, 188, 113, .68) transparent;
  }
  .lounge-dialog-copy .lounge-dialog-story::after { content: none; }
  .lounge-dialog-copy h1,
  .lounge-dialog-copy h2,
  .museum-text-panel h1,
  .terrace-text-panel .terrace-story-copy h1,
  .cellar-text-panel .cellar-story-copy h1 {
    color: #f4c783;
  }
  .lounge-dialog-copy h2 {
    margin-top: 1.7rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(239, 188, 113, .35);
  }
  .lounge-dialog-copy p,
  .kitchen-text-panel .kitchen-story-copy p,
  .office-text-panel .office-story-copy p,
  .terrace-text-panel .terrace-story-copy p,
  .cellar-text-panel .cellar-story-copy p {
    font-size: inherit;
    line-height: inherit;
  }
  .hotspot-bedford-bell::after,
  .hotspot-bedford-flavors::after,
  .hotspot-villa-terrace::after,
  .hotspot-villa-lounge::after {
    width: 8px;
    height: 8px;
    background: rgba(241, 201, 137, .74);
    box-shadow: 0 0 12px rgba(241, 201, 137, .74);
    animation: touch-hint 2.4s ease-in-out infinite;
  }
  .flavor-panel {
    width: calc(100vw - 1.2rem);
    max-height: calc(100vh - 1.2rem);
    padding: 3.2rem 1.2rem 1.5rem;
  }
  .flavor-tabs {
    margin: .9rem 0 1.3rem;
  }
  .flavor-sheet {
    display: block;
  }
  #flavor-emoji {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
    font-size: 1.8rem;
  }
  .flavor-panel h1 {
    font-size: clamp(1.8rem, 9vw, 3rem);
  }
  .flavor-description {
    margin-top: 1rem;
    font-size: 1.02rem;
    line-height: 1.65;
  }
  .flavor-player {
    margin-top: 1.25rem;
    padding: .9rem;
  }
  .flavor-audio-note { margin-top: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}