/* ========== The opening sequence ========== */

/* The door is a steel plug, not a sticker: stacked slabs behind the face give it real thickness as it swings. */
.gate .swing .slab { position: absolute; left: 27.93%; top: 14.06%; width: 43.75%; height: 65.625%; border-radius: 50%;
  transform: translateZ(calc(var(--i) * -7px * var(--f)));
  background: radial-gradient(closest-side, #1a1612 70%, #4a3e2c 88%, #8c7650 95%, #2b241a 100%);
  box-shadow: inset 0 0 calc(18px * var(--f)) rgba(0,0,0,.8); }
.gate .swing .spin { opacity: 0; }
.gate:not(.granted) .swing .slab { visibility: hidden; }
.gate .swing .sheen { position: absolute; left: 27.93%; top: 14.06%; width: 43.75%; height: 65.625%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,236,190,.0) 42%, rgba(255,236,190,.28) 50%, rgba(255,236,190,0) 58%, transparent 70%) -120% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen; opacity: 0; }
.gate.granted .swing .sheen { animation: gate-sheen 3.4s 2.6s ease-in-out forwards; }
@keyframes gate-sheen { 0% { opacity: 0; background-position: -120% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: 220% 0; } }

/* Inside the vault is light: a hot core with soft rings that give depth as you move toward it. */
.gate .inside { background: #120c05; }
.gate .inside .core { position: absolute; inset: 0; background:
  radial-gradient(7% 10.5% at 49.8% 46.9%, #ffffff 0%, #fffaf0 45%, rgba(255,244,220,0) 100%),
  radial-gradient(14% 21% at 49.8% 47.5%, rgba(255,236,190,1) 0%, rgba(246,208,130,.9) 45%, rgba(190,140,60,0) 100%),
  radial-gradient(21.6% 32.4% at 49.8% 46.875%, #d8a955 0%, #9c7230 40%, #4d3413 70%, #1b1207 88%, #070402 100%);
  animation: gate-breathe 3.2s ease-in-out infinite; }
.gate .inside::after { content: ''; position: absolute; inset: 0; pointer-events: none; background:
  repeating-radial-gradient(21.6% 32.4% at 49.8% 46.875%, rgba(255,220,150,0) 0 7%, rgba(255,220,150,.08) 7.4%, rgba(255,220,150,0) 8% 14%); mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(21.6% 32.4% at 49.8% 46.875%, transparent 30%, #000 60%, transparent 98%); mask-image: radial-gradient(21.6% 32.4% at 49.8% 46.875%, transparent 30%, #000 60%, transparent 98%); }
.gate .inside .halo { position: absolute; left: 49.8%; top: 46.9%; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.gate .inside .h1 { width: 26%; height: 44%; box-shadow: 0 0 calc(40px * var(--f)) calc(8px * var(--f)) rgba(255,236,190,.45), inset 0 0 calc(40px * var(--f)) rgba(255,236,190,.4); }
.gate .inside .h2 { width: 19%; height: 28%; box-shadow: 0 0 calc(30px * var(--f)) calc(6px * var(--f)) rgba(255,246,220,.55), inset 0 0 calc(30px * var(--f)) rgba(255,246,220,.5); }
.gate .inside .h3 { width: 10%; height: 15%; background: radial-gradient(closest-side, #fff, rgba(255,255,255,0)); }
.gate .inside .burst { opacity: .55; background: radial-gradient(12% 18% at 49.8% 46.9%, rgba(255,250,235,.9), rgba(255,230,170,.15) 60%, rgba(0,0,0,0) 100%); }
@keyframes gate-breathe { 50% { opacity: .75; } }

/* Light pouring out over the lobby, and rays through the dust. Screen blend so it lights the photo instead of covering it. */
.gate .spill { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: 0; background:
  radial-gradient(26% 38% at 49.8% 47%, rgba(255,236,190,.55), rgba(255,236,190,0) 70%),
  radial-gradient(34% 16% at 49.8% 83%, rgba(255,222,160,.55), rgba(255,222,160,0) 75%),
  radial-gradient(60% 30% at 49.8% 92%, rgba(230,180,100,.30), rgba(230,180,100,0) 80%),
  linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(255,210,140,.10) 100%); }
.gate .rays { position: absolute; left: 49.8%; top: 46.9%; width: 240%; height: 240%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: repeating-conic-gradient(from 0deg, rgba(255,232,180,.13) 0deg 1.6deg, rgba(255,232,180,0) 2.4deg 7deg, rgba(255,232,180,.07) 7.6deg 8.5deg, rgba(255,232,180,0) 9.4deg 13deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0,0,0,.5) 22%, transparent 48%); mask-image: radial-gradient(closest-side, #000 6%, rgba(0,0,0,.5) 22%, transparent 48%);
  filter: blur(calc(5px * var(--f))); animation: gate-rays 60s linear infinite; }
@keyframes gate-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Lens: dust canvas, an anamorphic streak, the white bloom, and film grain over everything. */
.gate .motes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.gate .flare { position: absolute; left: 50%; top: calc(50% + (0.469 - 0.5) * 1024px * var(--f)); width: 130vw; height: 3px; transform: translate(-50%, -50%) scaleX(.2); opacity: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255,210,140,0), rgba(255,220,160,.35) 30%, #fffaf0 50%, rgba(255,220,160,.35) 70%, rgba(255,210,140,0));
  box-shadow: 0 0 12px 2px rgba(255,220,160,.45); filter: blur(.6px); mix-blend-mode: screen; }
.gate .white { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 2; background: radial-gradient(60% 60% at 50% 50%, #ffffff, #fff4dc 60%, #f3dca4); }
.gate .grain, .chamber .grain { position: absolute; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 3; opacity: .07; mix-blend-mode: overlay; animation: grain 1s steps(6) infinite; }
@keyframes grain { 0% { transform: translate(0,0) } 20% { transform: translate(-6%,4%) } 40% { transform: translate(5%,-7%) } 60% { transform: translate(-3%,8%) } 80% { transform: translate(7%,2%) } 100% { transform: translate(-4%,-5%) } }
.gate.gone { transition: opacity 1.5s cubic-bezier(.4,0,.2,1), visibility 1.5s; }

/* Controls that live over the film */
.gate .skip { position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 4; font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,244,220,.85); background: rgba(3,6,12,.4); border: 1px solid rgba(255,244,220,.25); padding: 9px 14px; border-radius: 999px; cursor: pointer; backdrop-filter: blur(6px); opacity: 0; animation: fade-in .6s 1.2s forwards; }
.gate .skip:hover { border-color: rgba(255,244,220,.7); }
.snd { position: absolute; left: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 4; width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  background: rgba(3,6,12,.45); border: 1px solid rgba(242,213,140,.35); backdrop-filter: blur(6px); display: grid; place-items: center; padding: 0; }
.snd:hover { border-color: #f2d58c; }
.snd i { width: 16px; height: 16px; background: #f2d58c; -webkit-mask: var(--spk) center / contain no-repeat; mask: var(--spk) center / contain no-repeat;
  --spk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H3v6h3l5 4z' fill='%23000'/%3E%3Cpath d='M15.5 8.5a5 5 0 010 7M18.5 5.5a9 9 0 010 13'/%3E%3C/svg%3E"); }
.snd.off i { --spk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5L6 9H3v6h3l5 4z' fill='%23000'/%3E%3Cpath d='M16 9l6 6M22 9l-6 6'/%3E%3C/svg%3E"); opacity: .6; }
.gate .snd { bottom: calc(18px + env(safe-area-inset-bottom)); }
.gate:not(.granted) .snd { bottom: calc(66px + env(safe-area-inset-bottom)); }
@media (min-width: 700px) { .gate:not(.granted) .snd { bottom: calc(18px + env(safe-area-inset-bottom)); } }
@keyframes fade-in { to { opacity: 1; } }

/* ========== Inside the Vault: the chamber ========== */
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 30%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 18%; }

.chamber-page .bar { position: absolute; left: 0; right: 0; top: 0; z-index: 6; }
.chamber { position: relative; z-index: 1; min-height: 100vh; min-height: 100svh; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto; align-items: center; padding: 96px 0 34px; background: #030406; }

/* The room: dark stone and bronze, lit only where the lamps point. */
.chamber .room { position: absolute; inset: -3%; z-index: 0; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.chamber .room > * { position: absolute; inset: 0; transition: opacity 1.4s ease; }
.chamber .wall { background:
  radial-gradient(70% 55% at 50% 42%, #2a2014 0%, #15100a 45%, #07060a 80%),
  #050507; }
.chamber .panels { opacity: .9; background:
  repeating-linear-gradient(90deg, rgba(255,214,150,.045) 0 1px, rgba(0,0,0,0) 1px 11.5%, rgba(0,0,0,.35) 11.5% calc(11.5% + 2px), rgba(0,0,0,0) calc(11.5% + 2px) 12.5%),
  repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 24%, rgba(255,214,150,.03) 24% calc(24% + 1px));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.2), #000 30%, #000 62%, transparent 70%); mask-image: linear-gradient(180deg, rgba(0,0,0,.2), #000 30%, #000 62%, transparent 70%); }
.chamber .floor { top: 64%; background:
  linear-gradient(180deg, rgba(255,210,140,.10), rgba(0,0,0,0) 8%),
  repeating-linear-gradient(90deg, rgba(255,220,160,.035) 0 1px, rgba(0,0,0,0) 1px 16.66%),
  linear-gradient(180deg, #0f0b07, #050406 70%);
  transform: perspective(500px) rotateX(58deg); transform-origin: 50% 0; }
.chamber .lamps { mix-blend-mode: screen; opacity: 0; background:
  radial-gradient(18% 70% at 20% -8%, rgba(255,214,150,.20), rgba(255,214,150,0) 70%),
  radial-gradient(18% 70% at 50% -8%, rgba(255,222,165,.26), rgba(255,214,150,0) 70%),
  radial-gradient(18% 70% at 80% -8%, rgba(255,214,150,.20), rgba(255,214,150,0) 70%),
  radial-gradient(45% 22% at 50% 70%, rgba(255,205,130,.16), rgba(255,205,130,0) 75%); }
.chamber .haze { opacity: 0; background: radial-gradient(40% 30% at 50% 58%, rgba(240,190,110,.12), rgba(0,0,0,0) 70%); filter: blur(20px); animation: haze 12s ease-in-out infinite alternate; }
@keyframes haze { to { transform: translateX(3%) scale(1.06); } }
.chamber.lit-room .lamps, .chamber.lit-room .haze { opacity: 1; }
.chamber .vig { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 80%, rgba(0,0,0,.85)); }
.chamber .dust { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }

/* Far wall: more plaques deep in the vault, out of focus. Products everywhere. */
.chamber .far { opacity: .0; }
.chamber.lit-far .far { opacity: 1; }
.chamber .far i { position: absolute; width: var(--w); aspect-ratio: 3 / 4; left: var(--x); top: var(--y); border-radius: 3px;
  background: linear-gradient(160deg, #4b3510, #b8913f 35%, #f1d68e 45%, #9a7430 60%, #3f2c0c); filter: blur(var(--b)) brightness(var(--l));
  box-shadow: 0 0 30px rgba(230,180,90,.18); animation: bob 7s ease-in-out infinite; animation-delay: var(--d); }

/* Copy */
.chamber .ch-copy { position: relative; z-index: 5; text-align: center; padding: 0 20px; opacity: 0; transform: translateY(14px); transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.chamber.lit-copy .ch-copy { opacity: 1; transform: none; }
.chamber .ch-copy .eyebrow { color: #e6c878; }
.chamber .ch-copy h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; letter-spacing: -.01em; font-size: clamp(36px, 5vw, 64px); line-height: 1.02; margin: 14px 0 12px; color: #f6efe2; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.chamber .ch-copy h1 .g { font-style: italic; }
.chamber .ch-copy p { color: rgba(236,228,212,.72); max-width: 560px; margin: 0 auto; font-size: 17px; }
.chamber .ch-cta { position: relative; z-index: 5; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 0 20px; opacity: 0; transition: opacity 1.2s ease .3s; }
.chamber.lit-copy .ch-cta { opacity: 1; }
.chamber .ch-cta .btn.ghost { background: rgba(3,4,6,.5); backdrop-filter: blur(6px); }
.chamber .hint-line { position: relative; z-index: 5; text-align: center; margin-top: 14px; font: 500 10.5px var(--mono); letter-spacing: .26em; text-transform: uppercase; color: rgba(236,228,212,.45); }

/* ========== The gold plaques ========== */
.gallery { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2vw, 30px); padding: 40px 20px 70px;
  perspective: 1300px; perspective-origin: 50% 40%; transform-style: preserve-3d; }
.plq { position: relative; width: clamp(150px, 13vw, 205px); flex: none; transform-style: preserve-3d;
  transform: translate3d(0, var(--oy, 0px), var(--oz, 0px)) rotateY(var(--ry, 0deg)); }
.plq-float { transform-style: preserve-3d; animation: bob 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
@keyframes bob { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
.plq-tilt { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: center;
  transform-style: preserve-3d; transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(var(--tz, 0px));
  transition: transform .5s cubic-bezier(.2,.7,.2,1); -webkit-tap-highlight-color: transparent; }
.plq-tilt:focus-visible { outline: none; }
.plq-tilt:focus-visible .plq-face { box-shadow: var(--bevel), 0 0 0 2px #f2d58c, 0 0 40px rgba(242,213,140,.6); }
.plq:hover .plq-tilt, .plq-tilt:focus-visible { --tz: 34px; }

.plq-face { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; transform: translateZ(0.1px);
  --bevel: inset 0 0 0 1px rgba(255,246,214,.75), inset 0 0 0 3px rgba(122,86,26,.55), inset 0 0 0 5px rgba(255,232,170,.35), inset 0 0 22px rgba(60,38,8,.55);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, rgba(0,0,0,.05) 1px 2px, rgba(255,255,255,0) 2px 3px),
    linear-gradient(162deg, #3d2a0c 0%, #8a6424 14%, #e2bf6c 30%, #fff0c0 39%, #d7ad52 47%, #8c6726 62%, #c29a45 76%, #f0d48a 88%, #6b4c1a 100%);
  box-shadow: var(--bevel);
  filter: brightness(var(--lum, .16)) saturate(var(--sat, .7)); transition: filter 1.1s ease; }
.plq.lit .plq-face { --lum: 1; --sat: 1; }
.plq-edge { position: absolute; inset: 0; border-radius: 6px; transform: translateZ(-7px); background: linear-gradient(162deg, #2b1d07, #6d4f1a 40%, #3a280a); filter: brightness(var(--lum, .16)); transition: filter 1.1s ease; }
.plq.lit .plq-edge { --lum: 1; }
.plq-spec { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,252,236,.85), rgba(255,236,190,.28) 16%, rgba(255,236,190,0) 46%); opacity: 0; transition: opacity 1s ease; }
.plq.lit .plq-spec { opacity: .9; }
.plq-sweep { position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen; transform: translateX(-120%) rotate(18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 35%, rgba(255,250,230,.75) 50%, rgba(255,255,255,0) 65%); }
.plq.sweep .plq-sweep { animation: sweep 1.3s cubic-bezier(.4,0,.2,1); }
@keyframes sweep { to { transform: translateX(120%) rotate(18deg); } }

.plq-in { position: absolute; inset: 9px; border-radius: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10% 8%;
  border: 1px solid rgba(92,64,18,.55); box-shadow: 0 1px 0 rgba(255,241,200,.45), inset 0 1px 0 rgba(255,241,200,.35);
  color: #4a3410; text-shadow: 0 1px 0 rgba(255,241,200,.55), 0 -1px 0 rgba(40,26,6,.3); }
.plq-mark { margin-bottom: auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid rgba(74,52,16,.8); box-shadow: 0 1px 0 rgba(255,241,200,.5), inset 0 1px 0 rgba(255,241,200,.4); display: grid; place-items: center; }
.plq-mark::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(74,52,16,.85); box-shadow: 0 1px 0 rgba(255,241,200,.5); }
.plq-tier { font: 600 9px/1.2 'Cinzel', Georgia, serif; letter-spacing: .28em; text-transform: uppercase; margin-top: 10px; }
.plq-title { font: 600 clamp(16px, 1.45vw, 21px)/1.12 'Cormorant Garamond', Georgia, serif; margin: 6px 0 0; letter-spacing: 0; }
.plq-rule { width: 38%; height: 1px; background: rgba(74,52,16,.6); box-shadow: 0 1px 0 rgba(255,241,200,.5); margin: 8px 0; }
.plq-tag { font: 500 10px/1.35 var(--sans); margin: 0; opacity: .85; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gallery .plq-tag { display: none; }
.plq-foot { margin-top: auto !important; display: flex; align-items: center; gap: 6px; font: 600 8.5px/1 'Cinzel', Georgia, serif; letter-spacing: .22em; text-transform: uppercase; margin-top: 8px; }
.plq-foot svg { width: 10px; height: 10px; }

/* Free: pale champagne gold. High: black glass set in gold, the premium wall. */
.plq.t-free .plq-face { background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.04) 1px 2px, rgba(255,255,255,0) 2px 3px),
    linear-gradient(162deg, #4e3f24 0%, #9a8158 16%, #d9c79c 32%, #f4e9cc 40%, #c6b085 50%, #8b7350 64%, #bda577 78%, #e6d6ad 90%, #5f4e30 100%); }
.plq.t-high .plq-face { background:
    radial-gradient(120% 80% at 30% 0%, rgba(255,230,170,.10), rgba(0,0,0,0) 60%),
    linear-gradient(162deg, #16120c, #070605 55%, #1c160d);
  --bevel: inset 0 0 0 1px rgba(255,236,180,.9), inset 0 0 0 3px #a37a2c, inset 0 0 0 5px rgba(255,226,150,.55), inset 0 0 0 6px rgba(0,0,0,.8), inset 0 0 26px rgba(0,0,0,.9); }
.plq.t-high .plq-in { color: #f0d386; text-shadow: 0 0 10px rgba(240,200,110,.35), 0 -1px 0 rgba(0,0,0,.8); border-color: rgba(240,211,134,.35); box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }
.plq.t-high .plq-mark { border-color: #e6c878; box-shadow: 0 0 8px rgba(230,200,120,.4); }
.plq.t-high .plq-mark::after { background: #e6c878; box-shadow: 0 0 8px #e6c878; }
.plq.t-high .plq-rule { background: rgba(240,211,134,.55); box-shadow: none; }
.plq.t-high .plq-spec { background: radial-gradient(circle at var(--mx) var(--my), rgba(255,246,220,.45), rgba(255,236,190,.12) 18%, rgba(255,236,190,0) 45%); }
.plq.t-high .plq-edge { background: linear-gradient(162deg, #6b4c1a, #c79d45 45%, #5a3f12); }

/* Shadow and gold glow on the floor under each plaque */
.plq-beam { display: none; }
.plq-shadow { position: absolute; left: 8%; right: 8%; top: calc(100% + 34px); height: 22px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); animation: shadow 6.5s ease-in-out infinite; animation-delay: calc(var(--i) * -1.1s); }
.plq-shadow::after { content: ''; position: absolute; inset: -60% -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(240,190,100,.22), rgba(240,190,100,0)); opacity: 0; transition: opacity 1.4s; }
.plq.lit .plq-shadow::after { opacity: 1; }
@keyframes shadow { 0%, 100% { transform: scale(.86); opacity: .65; } 50% { transform: scale(1); opacity: 1; } }

/* Idle light drift on touch screens, where there is no cursor to follow */
.gallery.auto .plq-face { animation: drift 7s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.9s); }
@keyframes drift { 0% { --mx: 12%; --my: 8%; } 100% { --mx: 88%; --my: 42%; } }

/* Phones: a swipeable wall of plaques that turn as they pass the center */
@media (max-width: 899px) {
  .chamber { padding-top: 84px; }
  .gallery { justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; padding: 34px 18vw 60px; gap: 18px; scrollbar-width: none; perspective: 900px; }
  .gallery::-webkit-scrollbar { display: none; }
  .plq { width: 62vw; max-width: 260px; scroll-snap-align: center; transform: rotateY(var(--ry, 0deg)) scale(var(--sc, 1)); transition: transform .2s linear; }
  .plq-tag { font-size: 11.5px; }
  .plq-title { font-size: 21px; }
  .plq-tier, .plq-foot { font-size: 10px; }
  .chamber .far i:nth-child(n+6) { display: none; }
}

/* ========== A plaque picked up ========== */
.focus { position: fixed; inset: 0; z-index: 80; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 5vh 7vw; perspective: 1400px; }
.focus-bg { position: absolute; inset: 0; background: radial-gradient(60% 70% at 35% 50%, rgba(40,28,10,.72), rgba(2,2,4,.94)); backdrop-filter: blur(8px); opacity: 0; transition: opacity .5s ease; }
.focus.on .focus-bg { opacity: 1; }
.focus-stage { position: relative; justify-self: end; width: min(34vw, 380px); transform-style: preserve-3d; }
.focus-stage .plq { width: 100%; }
.focus-stage .plq-float { animation-duration: 8s; }
.focus-stage .plq-title { font-size: clamp(22px, 2.6vw, 32px); }
.focus-stage .plq-tag { font-size: 13px; -webkit-line-clamp: 5; }
.focus-stage .plq-tier, .focus-stage .plq-foot { font-size: 11px; }
.focus-stage .plq-shadow { display: none; }
.focus-info { position: relative; max-width: 440px; opacity: 0; transform: translateX(20px); transition: opacity .6s ease .25s, transform .6s cubic-bezier(.2,.7,.2,1) .25s; }
.focus.on .focus-info { opacity: 1; transform: none; }
.focus-info h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 500; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.04; color: #f6efe2; margin: 12px 0 12px; }
.focus-info p { color: rgba(236,228,212,.75); }
.focus-info .price { font: 600 15px var(--sans); color: #f2d58c; margin: 18px 0 20px; }
.focus-info .price small { color: rgba(236,228,212,.6); font-weight: 400; margin-left: 6px; }
.focus-info .row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.focus-x { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(242,213,140,.35); background: rgba(3,4,6,.5); color: #f2d58c; font-size: 22px; line-height: 1; cursor: pointer; z-index: 2; }
@media (max-width: 760px) {
  .focus { grid-template-columns: 1fr; align-content: center; gap: 22px; padding: 70px 22px 30px; overflow-y: auto; }
  .focus-stage { justify-self: center; width: min(62vw, 280px); }
  .focus-info { text-align: center; margin: 0 auto; transform: translateY(14px); }
  .focus-info .row-btns { justify-content: center; }
}

.chamber .snd { position: absolute; z-index: 6; }
@media (prefers-reduced-motion: reduce) {
  .plq-float, .plq-shadow, .chamber .far i, .chamber .haze, .gallery.auto .plq-face, .gate .grain, .chamber .grain { animation: none !important; }
}
.chamber-page .nav .btn { white-space: nowrap; }
@media (max-width: 480px) { .chamber-page .brand { font-size: 10.5px; letter-spacing: .2em; } }
.gate .open-vault { position: absolute; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; animation: fade-in .8s ease both, pulse-gold 2.4s ease-in-out 1s infinite; opacity: 0; }
@keyframes pulse-gold { 50% { box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 0 40px 4px rgba(230,200,120,.55); } }
.gate .open-vault:hover { transform: translateX(-50%) translateY(-1px); }