:root {
  /* Compliance note: annotation. Use CSS grain overlays with IBM Plex Mono** numbers for tab artifacts. */
  --mahogany: #17100D;
  --cream: #F2D8A7;
  --burgundy: #7A2E2A;
  --amber: #C47A2C;
  --olive: #5F6742;
  --rose: #D69A8A;
  --display: "Cormorant Garamond", Georgia, serif;
  --body: "Libre Baskerville", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-marker: "Mono**";
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--mahogany);
  color: var(--cream);
  font-family: var(--body);
}

button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .22;
  background-image:
    radial-gradient(circle at 18% 27%, rgba(242,216,167,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 41%, rgba(214,154,138,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 43% 83%, rgba(95,103,66,.18) 0 1px, transparent 1px),
    linear-gradient(115deg, rgba(255,255,255,.04), transparent 42%, rgba(0,0,0,.08));
  background-size: 17px 19px, 23px 21px, 29px 31px, 100% 100%;
  mix-blend-mode: screen;
}

.room-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 19;
  background: radial-gradient(ellipse at 50% 42%, transparent 0 38%, rgba(23,16,13,.45) 70%, rgba(23,16,13,.92) 100%);
}

.bar-reel {
  height: 100vh;
  width: 100vw;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  background:
    linear-gradient(90deg, rgba(122,46,42,.18), transparent 18%, rgba(95,103,66,.12) 55%, rgba(196,122,44,.12)),
    var(--mahogany);
}

.bar-reel::-webkit-scrollbar { display: none; }

.seat {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: 8vh 9vw;
}

.counter-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 68%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber) 15%, var(--cream) 50%, var(--amber) 85%, transparent);
  box-shadow: 0 18px 45px rgba(196,122,44,.24), 0 1px 0 rgba(242,216,167,.22);
}

.counter-line i {
  position: absolute;
  inset: 2px 0 auto;
  height: 28vh;
  display: block;
  background: linear-gradient(180deg, rgba(196,122,44,.12), rgba(23,16,13,.2) 55%, rgba(23,16,13,.82));
}

.chapter-label, .receipt-top, .coaster small, .receipt em, .tag, .matchbook small {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--rose);
  font-size: clamp(.62rem, .9vw, .82rem);
}

.wordmark {
  position: absolute;
  left: 11vw;
  top: 23vh;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(6rem, 16vw, 16rem);
  font-weight: 500;
  letter-spacing: -.06em;
  color: var(--cream);
  text-shadow: 0 0 35px rgba(242,216,167,.18), 0 13px 0 rgba(122,46,42,.18);
}

.aside {
  position: absolute;
  left: 17vw;
  top: 55vh;
  max-width: 31rem;
  color: rgba(242,216,167,.78);
  font-style: italic;
  line-height: 1.8;
}

.chapter-copy {
  position: absolute;
  z-index: 5;
  max-width: 36rem;
}

.chapter-copy h2, .closing-tab h2 {
  margin: .35rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(3.6rem, 7vw, 8rem);
  line-height: .86;
  font-weight: 600;
  color: var(--cream);
}

.chapter-copy p, .closing-tab p {
  margin: 0;
  color: rgba(242,216,167,.8);
  font-size: clamp(1rem, 1.45vw, 1.28rem);
  line-height: 1.85;
}

.blob {
  position: absolute;
  border-radius: 42% 58% 61% 39% / 48% 31% 69% 52%;
  filter: blur(1px);
  opacity: .42;
  mix-blend-mode: screen;
  animation: breathe 8s ease-in-out infinite alternate;
}

.blob-cream { background: radial-gradient(circle, rgba(242,216,167,.72), rgba(242,216,167,.12) 56%, transparent 72%); }
.blob-burgundy { background: radial-gradient(circle, rgba(122,46,42,.82), rgba(122,46,42,.28) 55%, transparent 73%); }
.blob-amber { background: radial-gradient(circle, rgba(196,122,44,.82), rgba(196,122,44,.2) 58%, transparent 75%); }
.blob-olive { background: radial-gradient(circle, rgba(95,103,66,.72), rgba(95,103,66,.2) 55%, transparent 75%); }
.blob-rose { background: radial-gradient(circle, rgba(214,154,138,.5), rgba(214,154,138,.14) 55%, transparent 74%); }

.spill-one { width: 48vw; height: 30vh; left: 18vw; top: 43vh; transform: rotate(-4deg); }
.smoke-one { width: 30vw; height: 45vh; right: -8vw; top: 2vh; animation-duration: 13s; }
.smoke-two { width: 42vw; height: 46vh; left: 8vw; top: 6vh; }
.stain-one { width: 54vw; height: 56vh; right: 4vw; top: 20vh; animation-duration: 10s; }
.smoke-three { width: 64vw; height: 36vh; left: 6vw; top: 15vh; }
.spill-two { width: 46vw; height: 50vh; right: 5vw; top: 28vh; }
.closing-light { width: 62vw; height: 42vh; left: 18vw; top: 22vh; }

.bottles {
  position: absolute;
  right: 7vw;
  bottom: 32%;
  display: flex;
  gap: 1.2rem;
  opacity: .22;
}

.bottles span {
  display: block;
  width: clamp(2rem, 4vw, 4rem);
  height: clamp(11rem, 25vh, 18rem);
  border-radius: 45% 45% 8% 8%;
  background: linear-gradient(180deg, rgba(242,216,167,.12), rgba(196,122,44,.34), rgba(23,16,13,.9));
  border: 1px solid rgba(242,216,167,.18);
}

.artifact {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s, box-shadow .45s;
}

.artifact:hover {
  transform: scale(1.08) rotate(var(--hover-rotate, -1deg));
  filter: saturate(1.12) brightness(1.08);
}

.coaster {
  --hover-rotate: 7deg;
  position: absolute;
  z-index: 6;
  right: 15vw;
  top: 38vh;
  width: clamp(13rem, 22vw, 20rem);
  aspect-ratio: 1;
  border: 2px solid rgba(242,216,167,.5);
  border-radius: 50%;
  color: var(--cream);
  background:
    radial-gradient(circle at 50% 50%, rgba(242,216,167,.1) 0 35%, transparent 36%),
    repeating-radial-gradient(circle, rgba(196,122,44,.24) 0 2px, transparent 2px 10px),
    var(--burgundy);
  box-shadow: 0 22px 70px rgba(0,0,0,.42), inset 0 0 42px rgba(23,16,13,.42);
  cursor: pointer;
}

.coaster span {
  display: block;
  font-family: var(--display);
  font-size: clamp(5rem, 10vw, 9rem);
  line-height: .9;
}

.coaster small { display: block; color: var(--cream); }
.coaster.revealed small { color: var(--rose); padding: 0 1.2rem; line-height: 1.5; }

.ring {
  position: absolute;
  border: 2px solid rgba(196,122,44,.38);
  border-radius: 50%;
  width: 17rem;
  height: 17rem;
  left: 13vw;
  top: 59vh;
  transform: rotate(-16deg) scaleY(.72);
}

.price-mark {
  position: absolute;
  left: 16vw;
  top: 20vh;
  font-family: var(--mono);
  color: rgba(214,154,138,.55);
  font-size: clamp(1.2rem, 2vw, 2rem);
  transform: rotate(-8deg);
}

.seat-coaster .chapter-copy { left: 10vw; top: 30vh; }
.seat-ledger .ledger-copy { right: 9vw; top: 26vh; }
.seat-mirror .mirror-copy { left: 11vw; top: 47vh; }
.seat-round .round-copy { left: 9vw; top: 24vh; }

.receipt {
  position: absolute;
  z-index: 7;
  width: clamp(18rem, 28vw, 25rem);
  padding: 2rem 1.7rem;
  background: linear-gradient(145deg, rgba(242,216,167,.96), rgba(214,154,138,.72));
  color: var(--mahogany);
  box-shadow: 0 28px 70px rgba(0,0,0,.5), inset 0 0 0 1px rgba(23,16,13,.12);
  transform: rotate(-3deg);
  clip-path: polygon(0 0, 100% 0, 100% 96%, 94% 100%, 88% 96%, 82% 100%, 76% 96%, 70% 100%, 64% 96%, 58% 100%, 52% 96%, 46% 100%, 40% 96%, 34% 100%, 28% 96%, 22% 100%, 16% 96%, 10% 100%, 4% 96%, 0 100%);
}

.receipt-main { left: 13vw; top: 18vh; }
.receipt-row, .receipt-total {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px dashed rgba(23,16,13,.38);
  font-family: var(--mono);
  font-size: .88rem;
}
.receipt-total { margin-top: .8rem; font-weight: 600; }
.receipt em { display: block; margin-top: 1rem; color: var(--burgundy); font-style: normal; }
.receipt.rewritten .receipt-total strong { color: var(--burgundy); }

.mirror-panel {
  position: absolute;
  right: 8vw;
  top: 14vh;
  width: 54vw;
  height: 40vh;
  border: 1px solid rgba(242,216,167,.24);
  background: linear-gradient(135deg, rgba(242,216,167,.1), rgba(95,103,66,.18), rgba(23,16,13,.2));
  box-shadow: inset 0 0 80px rgba(242,216,167,.06), 0 25px 80px rgba(0,0,0,.32);
}

.mirror-panel span {
  position: absolute;
  left: 9%;
  top: 28%;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 7rem);
  color: rgba(242,216,167,.18);
  font-style: italic;
}
.mirror-panel b {
  position: absolute;
  right: 8%;
  bottom: 18%;
  font-family: var(--mono);
  color: rgba(214,154,138,.52);
  font-weight: 400;
}

.glass-silhouette {
  position: absolute;
  right: 19vw;
  bottom: 31%;
  width: 11vw;
  height: 28vh;
  border: 2px solid rgba(242,216,167,.2);
  border-top: 9vh solid rgba(196,122,44,.22);
  border-radius: 0 0 42% 42%;
  transform: perspective(7rem) rotateX(-12deg);
}

.matchbook {
  position: absolute;
  right: 14vw;
  top: 38vh;
  z-index: 7;
  width: clamp(15rem, 24vw, 23rem);
  min-height: 12rem;
  padding: 1.4rem;
  background: var(--olive);
  color: var(--cream);
  border-left: 1.2rem solid var(--amber);
  transform: rotate(5deg);
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
}
.matchbook strong {
  display: block;
  margin-top: 1.1rem;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 4.2rem);
  line-height: .9;
  font-weight: 600;
}

.tag {
  position: absolute;
  right: 32vw;
  top: 24vh;
  padding: .8rem 1rem;
  color: var(--mahogany);
  background: var(--amber);
  transform: rotate(-11deg);
}

.closing-tab {
  left: 50%;
  top: 20vh;
  width: min(38rem, 58vw);
  transform: translateX(-50%) rotate(1deg);
}
.closing-tab h2, .closing-tab p { color: var(--mahogany); }
.closing-tab h2 { font-size: clamp(3.2rem, 6vw, 7rem); }
.final-stamp {
  position: absolute;
  left: 13vw;
  bottom: 19vh;
  font-family: var(--display);
  font-size: clamp(7rem, 15vw, 14rem);
  color: rgba(122,46,42,.72);
  transform: rotate(-18deg);
}

.coaster-nav {
  position: fixed;
  left: 50%;
  bottom: 5vh;
  z-index: 25;
  display: flex;
  gap: .7rem;
  transform: translateX(-50%);
}
.coaster-nav button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid rgba(242,216,167,.38);
  background: rgba(23,16,13,.72);
  color: var(--cream);
  font-family: var(--mono);
  font-size: .7rem;
  cursor: pointer;
  transition: transform .3s, background .3s, color .3s;
}
.coaster-nav button.active, .coaster-nav button:hover {
  transform: scale(1.18) rotate(-6deg);
  background: var(--cream);
  color: var(--mahogany);
}

.slow-layer, .mid-layer { will-change: transform; }

@keyframes breathe {
  from { transform: translate3d(0,0,0) rotate(-4deg) scale(1); border-radius: 42% 58% 61% 39% / 48% 31% 69% 52%; }
  to { transform: translate3d(1.5vw,-1vh,0) rotate(5deg) scale(1.08); border-radius: 61% 39% 42% 58% / 36% 57% 43% 64%; }
}

@media (max-width: 760px) {
  .seat { padding: 7vh 7vw; }
  .chapter-copy { max-width: 82vw; }
  .coaster { right: 8vw; top: 55vh; width: 14rem; }
  .receipt-main { left: 7vw; top: 43vh; }
  .seat-ledger .ledger-copy, .seat-round .round-copy { left: 7vw; right: auto; top: 12vh; }
  .mirror-panel { width: 82vw; right: 7vw; }
  .matchbook { right: 7vw; top: 52vh; }
  .coaster-nav { bottom: 2vh; }
}