@font-face {
  font-family: "Traiano";
  src: url("assets/fonts/Traiano.woff2") format("woff2");
  font-display: swap;
}

:root {
  --studiolo-gold: #edc86f;
  --studiolo-blue: #263d77;
  --studiolo-ink: #292219;
  --frieze-height: clamp(120px, 16.5vh, 176px);
  --skirting-height: clamp(59px, 8vh, 92px);
  --skirting-overlap: calc(var(--skirting-height) * .2814);
  --stage-y: max(12px, calc((100svh - 1000px) / 2));
  --nameplate-band: clamp(92px, 12.5vh, 112px);
  --content-group-offset-y: 14px;
  --globe-lift: clamp(30px, calc((100svh - 980px) * .68), 295px);
  --wall-texture: url("assets/materials/renaissance-studiolo-wall-finegrain-organic-v2.png");
  --wall-texture-size: auto 100%;
  --wall-hue-shift: -2.9deg;
  --frame-rail: clamp(18px, 1.65vw, 28px);
  --wood-scale: 1024px 1024px;
  --wood-saturation: .93;
  --wood-contrast: 1.04;
  --wood-hue-shift: 0deg;
  --wood-p02-gpt: url("assets/frames/wood-p02-gpt-image-2-l50-h058.png");
  --wood-p02-nano: url("assets/frames/wood-p02-nano-banana-pro-l51-h057.webp");
  --wood-p03-gpt: url("assets/frames/wood-p03-gpt-image-2-l29-h066.png");
  --wood-p04-nano: url("assets/frames/wood-p04-nano-banana-pro-l57-h061.webp");
  --wood-p06-nano: url("assets/frames/wood-p06-nano-banana-pro-l38-h060.webp");
  --wood-p09-nano: url("assets/frames/wood-p09-nano-banana-pro-l56-h066.webp");
  --wood-image: var(--wood-p03-gpt);
  --wall-pan-x: 0px;
  --globe-parallax-x: 0px;
}

html, body { width: 100%; height: 100%; min-height: 100%; overflow: hidden; }

.room {
  position: fixed;
  inset: 0;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  perspective: 1800px;
  background: #251207;
}

.ambient {
  z-index: 0;
  top: calc(var(--frieze-height) - 1px);
  right: -64px;
  bottom: 0;
  left: -64px;
  background:
    linear-gradient(90deg, rgba(7, 3, 1, .22), transparent 12% 88%, rgba(7, 3, 1, .22)) center / 100% 100% no-repeat,
    radial-gradient(ellipse at 50% 22%, rgba(255, 219, 159, .065), transparent 47%) center / 100% 100% no-repeat,
    var(--wall-texture) center top / var(--wall-texture-size) repeat-x,
    #251207;
  filter: hue-rotate(var(--wall-hue-shift));
  transform: translate3d(var(--wall-pan-x), 0, 0);
}

.wall-viewport {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.studiolo-stage {
  position: relative;
  flex: none;
  width: min(1680px, calc(100vw - 24px));
  height: min(1000px, calc(100svh - 24px));
  transform: translate3d(var(--wall-pan-x), 0, 0);
}

.room.is-parallaxing .ambient,
.room.is-parallaxing .studiolo-stage,
.room.is-parallaxing .name-frieze,
.room.is-parallaxing .floor-skirting,
.room.is-parallaxing .object-art--globe,
.room.is-parallaxing .object-label { will-change: transform; }
.room.is-parallaxing .object-art--globe { transition: none; }
.studiolo { position: relative; width: 100%; height: 100%; isolation: isolate; }

/* Full-height Gubbio pilasters close the display wall between the frieze and
   skirting. The windows sit behind their outer edges as partial decoration.
   Every piece stays on one shadowless plane, like the original intarsia. */
.studiolo-columns {
  position: absolute;
  z-index: 5;
  top: calc(var(--frieze-height) - var(--stage-y));
  right: 0;
  bottom: calc(var(--skirting-height) - var(--stage-y));
  left: 0;
  pointer-events: none;
}

.studiolo-side {
  position: absolute;
  top: 0;
  height: 100%;
}

.studiolo-side--left {
  left: 0;
  aspect-ratio: 534 / 3621;
}

.studiolo-side--right {
  right: 0;
  aspect-ratio: 520 / 3649;
}

.studiolo-column {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
  image-rendering: auto;
  filter: none;
  box-shadow: none;
}

.studiolo-column--left { left: 0; }
.studiolo-column--right { right: 0; }

.studiolo-window {
  position: absolute;
  z-index: 0;
  top: 0;
  display: block;
  width: auto;
  height: 60%;
  max-width: none;
  object-fit: contain;
  object-position: top;
  filter: none;
  box-shadow: none;
}

/* Each window begins immediately outside its pilaster: edge-to-edge, without
   overlap. Their remaining width can disappear naturally beyond the page. */
.studiolo-window--left { right: 100%; }
.studiolo-window--right { left: 100%; }

/* Restored from the earlier Cabinet of Errata composition. It occupies a
   dedicated band below the architectural frieze, before the paintings begin. */
.studiolo-nameplate {
  z-index: 8;
  top: calc(var(--frieze-height) - var(--stage-y) + 10px);
  width: min(1050px, 78%);
  min-height: 90px;
  padding: 7px clamp(30px, 4vw, 64px) 6px;
  transform: translate(-50%, var(--content-group-offset-y));
}

/* Every architectural and wall-mounted layer uses the same wall-plane offset. */
.name-frieze {
  position: fixed;
  z-index: 300;
  top: 0;
  right: -12px;
  left: -12px;
  height: var(--frieze-height);
  overflow: hidden;
  transform: translate3d(var(--wall-pan-x), 0, 0);
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55));
  pointer-events: none;
}

.frieze-tiles {
  position: absolute;
  inset: 0;
  left: 50%;
  display: flex;
  width: max-content;
  transform: translateX(-50%);
}

.frieze-tiles span {
  width: calc(var(--frieze-height) * 4.4643);
  height: 100%;
  flex: none;
  background-image: url("assets/studiolo/gubbio-frieze-plain.png");
  background-repeat: no-repeat;
  background-size: 200% 100%;
}

.frieze-tiles span:nth-child(odd) { background-position: left center; }
.frieze-tiles span:nth-child(even) { background-position: right center; }

.frieze-tiles span + span {
  margin-left: -48px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px);
}

.frieze-inscription {
  position: absolute;
  top: 40.5%;
  left: 50%;
  display: flex;
  align-items: center;
  width: max-content;
  height: 31%;
  transform: translateX(-50%);
  color: var(--studiolo-gold);
  font-family: "Traiano", "Fell Pica", Georgia, serif;
  font-size: clamp(1.28rem, 2.55vw, 2.95rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .072em;
  text-shadow: 0 1px #fff0a8, 0 3px 3px rgba(32, 17, 5, .72);
  text-transform: uppercase;
  white-space: nowrap;
}

.frieze-inscription span { padding: 0 .22em; }
.frieze-inscription i { padding: 0 .24em; font-style: normal; }

/* The original Gubbio skirting closes the wall at floor level. It is mounted
   between the wall texture and the exhibits so the globe can stand before it. */
.floor-skirting {
  position: fixed;
  z-index: 3;
  right: -12px;
  bottom: 0;
  left: -12px;
  height: var(--skirting-height);
  overflow: hidden;
  transform: translate3d(var(--wall-pan-x), 0, 0);
  filter: none;
  pointer-events: none;
}

.skirting-tiles {
  position: absolute;
  inset: 0;
  left: 50%;
  display: flex;
  width: max-content;
  transform: translateX(-50%);
}

.skirting-tiles span {
  width: calc(var(--skirting-height) * 12.8643);
  height: 100%;
  flex: none;
  background: url("assets/studiolo/gubbio-skirting-2560.webp") center / 100% 100% no-repeat;
}

.skirting-tiles span + span {
  margin-left: calc(-1 * var(--skirting-overlap));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--skirting-overlap));
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--skirting-overlap));
}

.collection {
  position: absolute;
  z-index: 4;
  top: calc(var(--frieze-height) - var(--stage-y) + var(--nameplate-band));
  right: 8.2%;
  bottom: 2.7%;
  left: 8.2%;
  display: block;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0;
  background: transparent;
  transform: translateY(var(--content-group-offset-y));
}

.compartment {
  position: absolute;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.collection > .compartment { transform: none; }
.compartment::after { content: none; }
.slot-schedule { top: 5%; left: 2%; width: 27.5%; height: 43%; }
.slot-date { top: 7%; left: 31%; width: 13%; height: auto; }
.slot-rsvp { top: 5%; left: 45.5%; width: 31%; height: 85%; }
.slot-questions { top: 7%; left: 78%; width: 20%; height: 43%; }
.slot-location { right: auto; bottom: -10%; left: 9%; width: 21%; height: 58%; }
.slot-alibaba { right: auto; bottom: 3%; left: 79%; width: 15%; height: 38%; }
.centre-snap { display: none; }

.exhibit {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 44px;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--studiolo-ink);
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: zoom-in;
}

.compartment > .exhibit { background: transparent; box-shadow: none; }
.slot-rsvp .exhibit, .slot-alibaba .exhibit { cursor: pointer; }
.exhibit-well { position: absolute; inset: 0 0 48px; display: block; perspective: 1100px; }

.wood-frame {
  position: relative;
  overflow: visible;
  background: #140b06;
  box-shadow: 0 12px 21px rgba(0, 0, 0, .58), 0 2px 3px rgba(0, 0, 0, .78);
}

.exhibit-well.wood-frame { position: absolute; }

/* Frame presets own their moulding width and grain calibration.  The source
   textures depict grain at different apparent scales, so each preset corrects
   that independently instead of stretching the texture with the frame. */
.frame-honey {
  --frame-rail: clamp(22px, 1.9vw, 32px);
  --frame-rail-mobile: 18px;
  --frame-rail-landscape: 14px;
  --wood-image: var(--wood-p04-nano);
  --wood-saturation: .84;
  --wood-contrast: 1;
  --wood-hue-shift: -6.2deg;
  --wood-scale: 820px 820px;
}

.frame-dark {
  --frame-rail: clamp(16px, 1.35vw, 22px);
  --frame-rail-mobile: 14px;
  --frame-rail-landscape: 11px;
  --wood-image: var(--wood-p03-gpt);
  --wood-hue-shift: -7.5deg;
  --wood-scale: 720px 720px;
}

.frame-walnut {
  --frame-rail: clamp(24px, 2vw, 34px);
  --frame-rail-mobile: 20px;
  --frame-rail-landscape: 15px;
  --wood-image: var(--wood-p06-nano);
  --wood-scale: 520px 520px;
}

.frame-amber {
  --frame-rail: clamp(19px, 1.55vw, 27px);
  --frame-rail-mobile: 16px;
  --frame-rail-landscape: 12px;
  --wood-image: var(--wood-p02-gpt);
  --wood-saturation: .82;
  --wood-contrast: 1;
  --wood-hue-shift: -3.2deg;
  --wood-scale: 1080px 1080px;
}

.frame-maple {
  --frame-rail: clamp(14px, 1.15vw, 20px);
  --frame-rail-mobile: 13px;
  --frame-rail-landscape: 10px;
  --wood-image: var(--wood-p09-nano);
  --wood-scale: 680px 680px;
}

/* Sixth approved finish, ready for any future framed exhibit. */
.frame-copper {
  --frame-rail: clamp(18px, 1.45vw, 25px);
  --frame-rail-mobile: 15px;
  --frame-rail-landscape: 12px;
  --wood-image: var(--wood-p02-nano);
  --wood-scale: 760px 760px;
}

.wood-rail {
  --outer-bevel-color: rgba(255, 226, 163, .26);
  --inner-bevel-color: rgba(19, 8, 3, .58);
  position: absolute;
  z-index: 5;
  display: block;
  overflow: hidden;
  background-image:
    linear-gradient(var(--bevel-angle), var(--outer-bevel-color), transparent 18%, transparent 65%, var(--inner-bevel-color)),
    var(--wood-image);
  background-repeat: no-repeat, repeat;
  background-size: 100% 100%, var(--wood-scale);
  pointer-events: none;
  filter: saturate(var(--wood-saturation)) contrast(var(--wood-contrast)) hue-rotate(var(--wood-hue-shift));
}

.wood-rail--top {
  --bevel-angle: 180deg;
  top: 0; right: 0; left: 0; height: var(--frame-rail);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--frame-rail)) 100%, var(--frame-rail) 100%);
  background-position: 0 0, -84px -264px;
}

.wood-rail--right {
  --bevel-angle: 270deg;
  --outer-bevel-color: rgba(19, 8, 3, .58);
  --inner-bevel-color: rgba(255, 226, 163, .22);
  top: 0; right: 0; bottom: 0; width: var(--frame-rail);
  clip-path: polygon(0 var(--frame-rail), 100% 0, 100% 100%, 0 calc(100% - var(--frame-rail)));
  background-position: 0 0, -502px -112px;
}

.wood-rail--bottom {
  --bevel-angle: 0deg;
  --outer-bevel-color: rgba(19, 8, 3, .58);
  --inner-bevel-color: rgba(255, 226, 163, .24);
  right: 0; bottom: 0; left: 0; height: var(--frame-rail);
  clip-path: polygon(var(--frame-rail) 0, calc(100% - var(--frame-rail)) 0, 100% 100%, 0 100%);
  background-position: 0 0, -238px -704px;
}

.wood-rail--left {
  --bevel-angle: 90deg;
  top: 0; bottom: 0; left: 0; width: var(--frame-rail);
  clip-path: polygon(0 0, 100% var(--frame-rail), 100% calc(100% - var(--frame-rail)), 0 100%);
  background-position: 0 0, -752px -376px;
}

.frame-window {
  position: absolute;
  z-index: 2;
  inset: var(--frame-rail);
  display: block;
  overflow: hidden;
  isolation: isolate;
  background: #17100d;
  box-shadow: none;
}

/* The moulding sits above the print: this overlay falls across the artwork,
   never out from the artwork onto the timber. With light arriving from the
   upper left, only the top and left sides shade the print; the bottom and
   right edges leave the artwork colour untouched. */
.frame-window::after {
  position: absolute;
  z-index: 20;
  inset: 0;
  content: "";
  box-shadow:
    inset 10px 0 12px -7px rgba(9, 4, 2, .8),
    inset 0 11px 13px -7px rgba(9, 4, 2, .86);
  pointer-events: none;
}

.print-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  transform-style: preserve-3d;
  transition: transform 650ms cubic-bezier(.2, .72, .16, 1);
}

.print-card--portrait { width: 100%; height: 100%; }
.print-face { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 0; background: #d9cba7; backface-visibility: hidden; }
.print-front { transition: transform 220ms ease, filter 220ms ease; }

.print-front img, .rsvp-art img, .slot-alibaba .frame-window img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.collection > .slot-date .exhibit { height: auto; }
.collection > .slot-date .exhibit-well {
  position: relative;
  inset: auto;
  height: auto;
  aspect-ratio: .69;
}
.collection > .slot-date .wall-label {
  position: relative;
  bottom: auto;
  left: auto;
  display: block;
  margin: 10px auto 0;
  transform: rotate(-.45deg);
}
.slot-date .print-front img { object-fit: contain; object-position: 50% 50%; background: #e9dfc5; }
.slot-questions .print-front img {
  object-position: 54% 56%;
  transform: scale(1.12);
  transform-origin: 54% 74%;
}
.slot-alibaba .frame-window img { object-position: 50% 45%; }

.exhibit:hover .print-front,
.exhibit:focus-visible .print-front,
.exhibit--rsvp:hover .rsvp-art img,
.exhibit--rsvp:focus-visible .rsvp-art img,
.alibaba-trigger:hover .frame-window img,
.alibaba-trigger:focus-visible .frame-window img {
  transform: scale(1.018);
  filter: saturate(1.04) brightness(1.025);
}

.print-back {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: .6rem;
  padding: clamp(14px, 2.2vw, 28px);
  transform: rotateY(180deg);
  background: radial-gradient(circle at 82% 18%, rgba(132, 84, 40, .11), transparent 18%), repeating-linear-gradient(90deg, transparent 0 7px, rgba(59, 44, 26, .014) 8px), #eee4c9;
  text-align: left;
  box-shadow: none;
}

.print-back strong, .object-detail strong { color: #2a2117; font-size: clamp(1.05rem, 1.8vw, 2rem); font-weight: 400; line-height: 1.02; }
.print-back > span:last-child, .print-back > span:nth-last-child(2), .object-detail > span { color: #433a2c; font-size: var(--font-body); line-height: 1.35; }
.print-back a { color: #77251e; text-underline-offset: .2em; }

/* Labels sit below the art like independent museum cards. */
.wall-label {
  position: absolute;
  z-index: 9;
  bottom: 0;
  left: 50%;
  width: max-content;
  max-width: 94%;
  padding: 5px 11px 6px;
  overflow: hidden;
  transform: translateX(-50%) rotate(-.45deg);
  color: #2d271e;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(73, 49, 24, .025) 7px), #e9dfc7;
  border: 1px solid rgba(63, 45, 27, .52);
  box-shadow: 2px 4px 7px rgba(0, 0, 0, .38);
  transition: opacity 180ms ease, transform 180ms ease, background-color 180ms ease;
  line-height: 1.04;
  text-align: center;
  pointer-events: none;
}

.wall-label strong, .wall-label em { display: block; }
.wall-label strong { font-size: clamp(var(--font-body), .96vw, 1.08rem); font-weight: 400; }
.wall-label em { margin-top: 2px; color: #675e4d; font-size: var(--font-secondary); }

.slot-rsvp .exhibit {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 8px;
}

.slot-rsvp .exhibit-well {
  position: relative;
  inset: auto;
  min-width: 0;
}

.slot-rsvp .wall-label {
  position: relative;
  bottom: auto;
  left: auto;
  justify-self: center;
}

.wall-label--rsvp { transform: rotate(-.45deg); }

.wall-label--rsvp-deadline {
  top: auto;
  width: min(94%, 320px);
  max-width: none;
  padding: 7px 12px 8px;
  transform: rotate(.35deg);
  font-size: clamp(var(--font-secondary), .78vw, .86rem);
  line-height: 1.2;
}

.rsvp-art { transition: none; }
.rsvp-art img { object-position: 50% 50%; transition: transform 220ms ease, filter 220ms ease; }
.compartment--object .exhibit { overflow: visible; background: transparent; box-shadow: none; }
.compartment--object .exhibit-well { inset: 0; overflow: visible; pointer-events: none; }
.compartment.compartment--object::after { content: none; }

.object-art--globe {
  position: absolute;
  top: auto;
  bottom: -56%;
  left: -50%;
  width: 200%;
  height: 232%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: 50% 100%;
  transform: translate3d(var(--globe-parallax-x), calc(25% - var(--globe-lift)), 0);
  filter: drop-shadow(10px 16px 9px rgba(0, 0, 0, .58));
  transition: transform 600ms cubic-bezier(.2, .72, .16, 1), opacity 300ms ease, filter 300ms ease;
}

.object-detail {
  position: absolute;
  inset: 4% -42% 2%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .55rem;
  padding: clamp(16px, 2vw, 26px);
  opacity: 0;
  transform: translateX(-20%) rotate(-1deg);
  color: #2a2117;
  background: #eee4c9;
  border: 1px solid #8f7953;
  box-shadow: 7px 12px 18px rgba(0, 0, 0, .48);
  transition: opacity 260ms ease, transform 620ms cubic-bezier(.2, .72, .16, 1);
}

.object-label {
  position: absolute;
  z-index: 8;
  top: 53%;
  left: 82%;
  width: max-content;
  padding: 6px 10px;
  transform: translate3d(var(--globe-parallax-x), 0, 0);
  color: #2d271e;
  background: #e9dfc7;
  border: 1px solid rgba(63, 45, 27, .5);
  box-shadow: 2px 4px 7px rgba(0, 0, 0, .4);
  font-family: "Fell Pica", Georgia, serif;
  pointer-events: none;
}

.object-label strong, .object-label em { display: block; }
.object-label strong { font-size: clamp(var(--font-body), 1vw, 1.05rem); font-weight: 400; }
.object-label em { margin-top: 1px; color: #675e4d; font-size: var(--font-secondary); }

.compartment.is-active { z-index: 30; }
.compartment.is-active .exhibit { cursor: zoom-out; }
.compartment.is-active .wall-label, .compartment.is-active .object-label { opacity: 0; pointer-events: none; }
.compartment.is-active .print-card { transform: rotateY(180deg); }
.compartment.is-active .object-art--globe { opacity: .16; transform: translateX(44%) rotate(8deg) scale(.72); }
.compartment.is-active .object-detail { opacity: 1; transform: translateX(0) rotate(-1deg); }

/* Width/height animate on the mount so rail thickness and grain scale never stretch. */
.inspection-mount {
  transition: left 520ms cubic-bezier(.2, .76, .18, 1), top 520ms cubic-bezier(.2, .76, .18, 1), width 520ms cubic-bezier(.2, .76, .18, 1), height 520ms cubic-bezier(.2, .76, .18, 1);
  will-change: left, top, width, height;
}

.inspection-mount > .compartment {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  transform: none;
  transition: none;
  will-change: auto;
}

.inspection-mount .print-card, .inspection-mount .print-card--portrait { width: 100%; height: 100%; }
.inspection-mount .print-back strong { font-size: clamp(1.35rem, 2.15vw, 2.45rem); }
.inspection-mount .print-back > span:last-child, .inspection-mount .print-back > span:nth-last-child(2) { font-size: var(--font-body); }
.inspection-mount .print-back,
.inspection-mount .object-detail { cursor: text; user-select: text; }
.inspection-placeholder { position: absolute; opacity: .18; }
.wall-pan-controls { display: none; }

.alibaba-dialog {
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: clamp(14px, 2.5vw, 34px);
  overflow: hidden;
  border: 0;
  color: #f2e4c4;
  background: transparent;
}

.alibaba-dialog::backdrop {
  background: radial-gradient(circle at 50% 28%, rgba(119, 78, 45, .23), transparent 45%), rgba(8, 5, 3, .93);
  backdrop-filter: blur(8px);
}

.alibaba-stage {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  width: min(840px, 100%);
  height: 100%;
  margin: 0 auto;
}

.alibaba-heading { display: flex; justify-content: flex-end; padding: 0 2px 10px; }

.alibaba-close {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(229, 196, 129, .48);
  color: #f1dfb8;
  background: rgba(23, 12, 8, .82);
  cursor: pointer;
}

.alibaba-close { width: 44px; padding: 0; font-size: 1.6rem; }
.wood-frame--gallery {
  align-self: center;
  justify-self: center;
  width: min(100%, calc(100svh - clamp(150px, 20svh, 190px)), 840px);
  height: auto;
  min-height: 0;
  aspect-ratio: 1;
}
.alibaba-slide { margin: 0; touch-action: pan-y; }
.alibaba-slide img { width: 100%; height: 100%; display: block; object-fit: contain; opacity: 1; transition: opacity 160ms ease; }
.alibaba-slide.is-changing img { opacity: .12; }

.alibaba-status { padding: 10px 2px 0; text-align: center; }
.alibaba-counter { margin: 0; color: #dcc28c; font-family: "Fell Pica", Georgia, serif; font-size: var(--font-secondary); }

@media (min-width: 1700px) {
  :root { --content-group-offset-y: 20px; }
}

@media (max-width: 820px) {
  :root { --frieze-height: clamp(116px, 15vh, 136px); --skirting-height: clamp(45px, 6vh, 56px); --stage-y: 0px; --nameplate-band: clamp(96px, 13vh, 112px); --content-group-offset-y: 27px; --frame-rail: 18px; --globe-lift: clamp(30px, calc(30px + (100svh - 664px) * .66), 230px); }
  .wood-frame { --frame-rail: var(--frame-rail-mobile, 18px); }
  .room { position: fixed; min-height: 0; padding: 0; }
  .wall-viewport { display: block; align-items: normal; justify-items: normal; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
  .wall-viewport::-webkit-scrollbar { display: none; }
  .studiolo-stage { width: max(980px, 245vw); height: 100svh; min-height: 0; transform: none; }
  .frieze-inscription { font-size: clamp(1rem, 5.2vw, 1.5rem); letter-spacing: .04em; }
  .studiolo-nameplate { top: calc(var(--frieze-height) + 7px); left: 51.02%; width: min(760px, 74%); min-height: 85px; padding: 6px 42px 5px; }
  .studiolo-nameplate h1 { font-size: clamp(1.65rem, 4vw, 2.35rem); }
  .studiolo-nameplate .nameplate-rsvp { display: none; }
  .collection { top: calc(var(--frieze-height) + var(--nameplate-band)); right: 7.5%; bottom: 7%; left: 7.5%; }
  .slot-schedule { top: 6%; left: 2%; width: 27%; height: 42%; scroll-snap-align: center; }
  .slot-date { top: 8%; left: 30%; width: 13%; height: auto; }
  .slot-rsvp { top: 5%; left: 44%; width: 28.5%; height: 84%; }
  .slot-questions { top: 8%; left: 74.5%; width: 19.5%; height: 42%; scroll-snap-align: center; }
  .slot-location { bottom: -11%; left: 12%; width: 23%; height: 57%; }
  .object-art--globe { bottom: -72%; }
  .slot-alibaba { bottom: 3%; left: 72%; width: 16%; height: 36%; }
  .centre-snap { position: absolute; top: 0; left: 51.2%; display: block; width: 1px; height: 1px; scroll-snap-align: center; pointer-events: none; }
  .exhibit-well { bottom: 42px; }
  .wall-label { padding: 4px 8px 5px; }
  .wall-label strong { font-size: var(--font-body); }
  .object-label { top: 50%; left: 78%; }
  .object-label strong { font-size: var(--font-body); }

  .wall-pan-controls {
    position: fixed;
    z-index: 90;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    display: flex;
    gap: clamp(52px, 18vw, 92px);
    transform: translateX(-50%);
    pointer-events: none;
  }

  .wall-pan {
    width: 54px;
    height: 54px;
    padding: 0;
    border: 2px solid rgba(231, 205, 151, .78);
    border-radius: 50%;
    color: #f0dfb9;
    background: rgba(25, 14, 9, .84);
    box-shadow: 0 6px 15px rgba(0, 0, 0, .42), inset 0 0 0 2px rgba(202, 161, 92, .16);
    font-size: 1.45rem;
    cursor: pointer;
    pointer-events: auto;
  }

  .wall-pan:disabled { cursor: default; opacity: .3; }
  .sound { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  body.is-inspecting .wall-pan-controls { opacity: 0; pointer-events: none; }
  .inspection-mount .print-back { overflow-y: auto; }
  .inspection-mount .print-back strong { font-size: clamp(1.2rem, 6vw, 1.75rem); }
  .inspection-mount .print-back > span:last-child, .inspection-mount .print-back > span:nth-last-child(2) { font-size: var(--font-body); }
  .alibaba-dialog { padding: 10px; }
  .alibaba-stage { width: 100%; }
  .alibaba-heading { padding-top: 2px; }
}

body.is-inspecting .sound { opacity: 0; pointer-events: none; }

@media (max-width: 430px) { .studiolo-stage { width: 980px; } }

@media (max-width: 820px) and (max-height: 560px) and (orientation: landscape) {
  :root { --frieze-height: 86px; --skirting-height: 41px; --nameplate-band: 82px; --content-group-offset-y: clamp(2px, calc(3vw - 18px), 7px); --frame-rail: 14px; --globe-lift: 30px; }
  .wood-frame { --frame-rail: var(--frame-rail-landscape, 14px); }
  .frieze-inscription { font-size: clamp(.8rem, 3vw, 1.15rem); }
  .studiolo-nameplate { top: calc(var(--frieze-height) + 4px); min-height: 73px; padding-block: 3px; }
  .studiolo-nameplate .names, .studiolo-nameplate .subtitle { display: none; }
  .collection { top: calc(var(--frieze-height) + var(--nameplate-band)); bottom: 4%; }
  .slot-schedule, .slot-questions { top: 2%; height: 68%; }
  .slot-date { top: 2%; width: 10%; height: auto; }
  .slot-rsvp { top: 2%; height: 84%; }
  .slot-location { bottom: -22%; height: 55%; }
  .slot-alibaba { bottom: -2%; height: 50%; }
  .exhibit-well { bottom: 34px; }
  .slot-rsvp .exhibit { display: block; }
  .slot-rsvp .exhibit-well { position: absolute; inset: 0 0 34px; }
  .slot-rsvp .wall-label { position: absolute; left: 50%; }
  .slot-rsvp .wall-label--rsvp { bottom: 58px; transform: translateX(-50%) rotate(-.45deg); }
  .slot-rsvp .wall-label--rsvp-deadline { bottom: 0; transform: translateX(-50%) rotate(.35deg); }
  .wall-label { padding-block: 3px 4px; }
}

@media (min-width: 821px) and (max-height: 560px) and (orientation: landscape) {
  :root { --content-group-offset-y: clamp(2px, calc(3vw - 18px), 7px); }
}

@media (prefers-reduced-motion: reduce) {
  .wall-viewport { scroll-behavior: auto; }
  .studiolo-stage, .ambient, .name-frieze, .floor-skirting { transform: none !important; }
  .inspection-mount { transition: none; }
  .alibaba-slide img { transition: none; }
}

@media (forced-colors: active) {
  .name-frieze, .floor-skirting, .compartment, .wall-label, .wood-frame, .alibaba-slide, .wall-pan { border: 1px solid CanvasText; }
}