/* Option 6 · Galerie + Vitrine */
:root {
  --bg: #0F1814; --panel: #15201B; --ink: #EEE8DB; --muted: #A3AD9F;
  --rule: rgba(238, 232, 219, 0.14);
  --brass: #C9A254; --brass-lit: #DDB86A; --brass-pressed: #AE8B3D; --brass-deep: #8C6B22;
  --ember: #E0A070; --lampx: 50%;
  --display: "Cormorant Garamond", "EB Garamond", serif;
}
.room {
  background:
    radial-gradient(34% 30% at var(--lampx) 3%, rgba(255, 222, 160, 0.17), rgba(15, 24, 20, 0) 74%),
    radial-gradient(70% 60% at var(--lampx) 42%, rgba(38, 62, 51, 0.6), rgba(15, 24, 20, 0) 72%),
    linear-gradient(180deg, #14211B 0%, #0F1814 55%, #0B120F 100%);
}
.mark { font-family: var(--display); font-size: 1.32rem; font-weight: 500; }

.v6 {
  max-width: 1320px; margin: 0 auto;
  padding: clamp(2.6rem, 6vh, 4rem) var(--edge) clamp(3rem, 8vh, 5rem);
  display: flex; flex-direction: column; gap: 2.8rem;
}
.v6-object { position: relative; padding-top: 1.6rem; }
.v6-hung { position: relative; animation: v6rise 1.3s var(--ease) 0.25s both; }
@keyframes v6rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* The glass in the frame: a soft diagonal reflection that follows the pointer
   and drifts across once by itself when the page opens. */
.v6-glass {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) calc(var(--gx, -20%) - 14%),
    rgba(255, 250, 238, 0.13) var(--gx, -20%), rgba(255, 255, 255, 0) calc(var(--gx, -20%) + 12%));
}

.v6-text { display: grid; gap: 0.85rem; align-content: end; }
.v6 h1 {
  margin: 0 0 0.6rem; font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.6rem); line-height: 1.02; letter-spacing: -0.01em;
  text-wrap: balance;
}
.v6-rule { width: 3.5rem; height: 1px; background: var(--brass); margin: 0.6rem 0 0.4rem; }
.v6-text .v-price b { font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 2.4rem + 2vw, 4.2rem); }
.v6-text .btn { margin-top: 0.6rem; }
.v6-text .v-ex { animation: v6fade 0.5s ease both; }
@keyframes v6fade { from { opacity: 0.2; } to { opacity: 1; } }

@media (min-width: 1000px) {
  :root { --lampx: 62%; }
  .v6 {
    display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 720px);
    column-gap: clamp(4rem, 8vw, 8rem); justify-content: center; align-items: end;
    padding-inline: clamp(4.4rem, 5vw, 5rem);
  }
  .v6-object { grid-column: 2; grid-row: 1; }
  .v6-text { grid-column: 1; grid-row: 1; padding-bottom: 2.4rem; position: sticky; bottom: 2rem; }
}
/* On a phone the line of wall text comes first, so the visitor reads what the
   sheet is before seeing it; the price and the button follow the sheet. */
@media (max-width: 999px) {
  .v6-text { display: contents; }
  .v6 h1 { order: -1; margin: 0 0 -0.6rem; font-size: clamp(2.1rem, 8.6vw, 2.8rem); }
  .v6 .v-ex { margin-top: -0.4rem; }
  .v6 > * { margin-block: 0; }
  .v6 { gap: 1rem; }
  .v6-object { margin-bottom: 1.8rem; padding-top: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) { .v6-hung { animation: none; } }