:root {
  --ink-navy: #17233B;
  --parchment-cream: #F3E3C3;
  --brass-gold: #B8893B;
  --absinthe-green: #7A8B55;
  --vellum-ivory: #FFF7E7;
  --mahogany-black: #24150F;
  --oxide-red: #9D2F25;
  --display: "Cormorant Garamond", serif;
  --letter: "Newsreader", serif;
  --mono: "IBM Plex Mono", monospace;
  --progress: 0;
  --pointer-x: 50%;
  --pointer-y: 30%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--mahogany-black); }

body {
  margin: 0;
  color: var(--ink-navy);
  font-family: var(--letter);
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), rgba(255, 247, 231, 0.14), transparent 22rem),
    radial-gradient(circle at 82% 18%, rgba(184, 137, 59, 0.15), transparent 23rem),
    linear-gradient(135deg, #24150F 0%, #160d0a 48%, #2d1b12 100%);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .34;
  mix-blend-mode: overlay;
  background-image:
    repeating-radial-gradient(circle at 12% 20%, rgba(255,247,231,.22) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(87deg, rgba(243,227,195,.07) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(177deg, rgba(23,35,59,.08) 0 1px, transparent 1px 9px);
}

.lamp-glow {
  position: fixed;
  width: 54vw;
  height: 54vw;
  left: 12vw;
  top: -20vw;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 247, 231, .24), rgba(184, 137, 59, .12) 32%, transparent 68%);
  filter: blur(18px);
  z-index: 0;
}

.stamp-rail {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 30;
  display: flex;
  gap: .45rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(184, 137, 59, .65);
  background: rgba(36, 21, 15, .72);
  box-shadow: 0 18px 50px rgba(0,0,0,.36);
  backdrop-filter: blur(6px);
}

.passport-stamp {
  color: rgba(255, 247, 231, .72);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-family: var(--mono);
  font-size: clamp(.55rem, .8vw, .78rem);
  padding: .42rem .65rem;
  border: 1px dashed rgba(184, 137, 59, .55);
  transition: color .35s ease, border-color .35s ease, background .35s ease, transform .35s ease;
}

.passport-stamp.active {
  color: var(--vellum-ivory);
  border-color: var(--oxide-red);
  background: rgba(157, 47, 37, .34);
  transform: rotate(-2deg);
}

.letter-opener-track {
  position: fixed;
  right: 1.15rem;
  top: 8vh;
  bottom: 8vh;
  width: 20px;
  z-index: 29;
  border-left: 1px solid rgba(184, 137, 59, .38);
}

.letter-opener {
  position: absolute;
  top: calc(var(--progress) * 1%);
  right: -4px;
  width: 18px;
  height: 118px;
  transform: translateY(-50%) rotate(8deg);
  transition: top .16s linear;
}

.opener-blade, .opener-handle { display: block; margin: 0 auto; }
.opener-blade { width: 7px; height: 78px; background: linear-gradient(90deg, #7d622f, #B8893B, #f0d289); clip-path: polygon(50% 0, 100% 16%, 70% 100%, 30% 100%, 0 16%); }
.opener-handle { width: 15px; height: 38px; border-radius: 12px; background: linear-gradient(#7A8B55, #415028); border: 1px solid rgba(255,247,231,.28); }

.dossier { position: relative; z-index: 1; }

.table-scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: 7rem clamp(1.2rem, 5vw, 5rem) 4rem;
  isolation: isolate;
  overflow: hidden;
}

.table-scene::before {
  content: "";
  position: absolute;
  inset: 6vh 5vw;
  border: 1px solid rgba(184, 137, 59, .12);
  background: linear-gradient(115deg, rgba(255,247,231,.045), transparent 44%, rgba(157,47,37,.06));
  transform: rotate(var(--scene-tilt, 1deg));
  z-index: -1;
}

h1, h2 { font-family: var(--display); font-weight: 600; line-height: .93; margin: 0; color: var(--ink-navy); }
h1 { font-size: clamp(4.2rem, 13vw, 12.5rem); letter-spacing: -.055em; }
h2 { font-size: clamp(3rem, 7vw, 7.4rem); letter-spacing: -.04em; }
p { font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.55; margin: 0; }

.telegram-code, .stamp-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oxide-red);
  margin-bottom: 1rem;
}

.parchment-card, .telegram-strip, .passport-page, .folded-map, .note-card {
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.35), transparent 16rem),
    repeating-linear-gradient(92deg, rgba(23,35,59,.035) 0 1px, transparent 1px 8px),
    linear-gradient(145deg, var(--vellum-ivory), var(--parchment-cream));
  box-shadow: 0 28px 80px rgba(0,0,0,.42), inset 0 0 34px rgba(184,137,59,.13);
  border: 1px solid rgba(184, 137, 59, .35);
}

.scene-invitation { --scene-tilt: -2deg; }
.envelope { width: min(78vw, 980px); height: min(58vh, 520px); position: relative; transform: rotate(-4deg); filter: drop-shadow(0 35px 65px rgba(0,0,0,.55)); transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.envelope.open { transform: rotate(-1deg) translateY(-2vh); }
.envelope-back, .envelope-paper, .envelope-flap { position: absolute; inset: 0; }
.envelope-back { background: linear-gradient(145deg, var(--parchment-cream), #d8be88); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); border: 1px solid rgba(184,137,59,.45); }
.envelope-back::before, .envelope-back::after { content:""; position:absolute; inset:0; background: linear-gradient(32deg, transparent 49.7%, rgba(23,35,59,.16) 50%, transparent 50.4%); }
.envelope-back::after { transform: scaleX(-1); }
.envelope-paper { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1.2rem; text-align:center; padding:3rem 8vw; transform: translateY(0); transition: transform .8s ease .12s; }
.envelope.open .envelope-paper { transform: translateY(-22%); }
.envelope-copy { max-width: 680px; color: rgba(23,35,59,.86); }
.envelope-flap { transform-origin: top center; background: linear-gradient(165deg, #e8d2a8, var(--parchment-cream)); clip-path: polygon(0 0, 100% 0, 50% 58%); transition: transform .85s cubic-bezier(.2,.8,.15,1); z-index:2; }
.envelope.open .envelope-flap { transform: rotateX(72deg); }

.wax-seal, .final-seal { position:absolute; width: 112px; height:112px; border-radius:50%; background: conic-gradient(from 25deg, #6e1712, var(--oxide-red), #c54a3d, #7a1e18, var(--oxide-red)); box-shadow: inset -10px -10px 22px rgba(0,0,0,.23), inset 9px 8px 18px rgba(255,247,231,.18), 0 16px 30px rgba(0,0,0,.35); }
.wax-seal { left:50%; top:50%; transform:translate(-50%,-18%); z-index:4; transition: transform .6s ease, filter .6s ease; }
.wax-seal span, .final-seal span { position:absolute; inset:18px; border-radius:50%; border:2px solid rgba(255,247,231,.38); display:grid; place-items:center; }
.wax-seal span::before { content:"olive"; font-family:var(--mono); font-size:.62rem; color:rgba(255,247,231,.72); letter-spacing:.16em; text-transform:uppercase; }
.envelope.open .wax-seal { transform: translate(-50%, -18%) scale(.92) rotate(22deg); filter: saturate(1.25); }
.envelope.open .wax-seal::before, .envelope.open .wax-seal::after { content:""; position:absolute; background:#5d120f; height:3px; width:68px; left:22px; top:53px; transform:rotate(23deg); opacity:.75; }
.envelope.open .wax-seal::after { transform:rotate(-35deg); width:52px; left:30px; }
.revealed-sheet { position:absolute; right:8vw; bottom:9vh; width:min(46vw, 560px); padding:2.2rem; transform:rotate(5deg) translateY(18px); opacity:.12; transition: opacity .8s ease, transform .8s ease; }
.envelope.open ~ .revealed-sheet, .revealed-sheet.visible { opacity:1; transform:rotate(3deg) translateY(0); }
.route-ribbon { position:absolute; width:44vw; height:3px; background:var(--oxide-red); left:16vw; bottom:18vh; transform:rotate(-13deg); box-shadow:0 0 0 1px rgba(157,47,37,.24); }

.scene-neutral { --scene-tilt: 2deg; grid-template-columns: 1fr 1.1fr; gap:4vw; }
.bar-mat { width: min(45vw, 460px); aspect-ratio: 1; border-radius: 50%; display:grid; place-items:center; position:relative; background: radial-gradient(circle, #3b261b 0 40%, #24150F 41% 63%, #140b08 64%); border: 2px solid rgba(184,137,59,.5); box-shadow:0 34px 90px rgba(0,0,0,.45); transform:rotate(-5deg); }
.bar-mat p { font-family:var(--display); font-size:clamp(2.2rem,5vw,5.6rem); color:var(--vellum-ivory); text-align:center; }
.coaster-ring { position:absolute; inset:10%; border-radius:50%; border:1px dashed rgba(243,227,195,.5); }
.telegram-strip { max-width: 740px; padding: 2.8rem 3rem; transform: rotate(3deg); position:relative; }
.torn-left::before { content:""; position:absolute; left:-13px; top:0; bottom:0; width:24px; background:linear-gradient(180deg, transparent 0 8%, var(--vellum-ivory) 8% 15%, transparent 15% 24%, var(--vellum-ivory) 24% 36%, transparent 36% 46%, var(--vellum-ivory) 46% 64%, transparent 64% 76%, var(--vellum-ivory) 76% 100%); }
.translation-stack { position:absolute; right:8vw; bottom:8vh; width:280px; height:160px; }
.translation-slip { position:absolute; padding:.9rem 1.3rem; background:var(--vellum-ivory); border:1px solid rgba(184,137,59,.32); font-family:var(--mono); color:var(--ink-navy); box-shadow:0 15px 38px rgba(0,0,0,.28); }
.slip-one { transform:rotate(-8deg); top:0; left:0; }
.slip-two { transform:rotate(4deg); top:48px; left:38px; }
.slip-three { transform:rotate(-2deg); top:96px; left:12px; }
.brass-ruler { position:absolute; left:6vw; bottom:12vh; width:54vw; height:12px; transform:rotate(-6deg); background: repeating-linear-gradient(90deg, #B8893B 0 2px, #795923 2px 4px, #B8893B 4px 22px); opacity:.74; }

.scene-map { --scene-tilt: -1deg; }
.folded-map { width:min(88vw, 1180px); min-height:66vh; display:grid; grid-template-columns: .9fr 1.15fr .78fr; transform:rotate(2deg); transform-origin:center; transition: transform .7s ease; }
.folded-map.unfolded { transform:rotate(0deg) scale(1.02); }
.map-panel { padding: clamp(1.5rem,3vw,3rem); border-right:1px solid rgba(23,35,59,.18); position:relative; overflow:hidden; }
.map-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(23,35,59,.08), transparent 15%, transparent 85%, rgba(23,35,59,.08)); pointer-events:none; }
.panel-b { background:rgba(122,139,85,.18); }
.route-map { width:100%; height:70%; margin-top:1.5rem; }
.coastline { fill:rgba(122,139,85,.25); stroke:#17233B; stroke-width:3; stroke-linejoin:round; }
.map-route { fill:none; stroke:#9D2F25; stroke-width:4; stroke-dasharray:9 10; stroke-linecap:round; }
.pin { fill:#9D2F25; stroke:#FFF7E7; stroke-width:3; }
.marginalia { font-family:var(--display); color:var(--oxide-red); transform:rotate(-4deg); font-size:1.25rem; }
.treaty-clause { margin-top:30vh; border-left:7px solid var(--brass-gold); padding-left:1.2rem; }

.scene-pour { --scene-tilt: 3deg; grid-template-columns: 1fr .85fr; gap:5vw; }
.passport-page { width:min(58vw, 720px); padding:3rem; transform:rotate(-3deg); border-radius:10px; background-image: radial-gradient(circle at 78% 24%, rgba(122,139,85,.23), transparent 13rem), repeating-radial-gradient(ellipse at center, rgba(23,35,59,.06) 0 1px, transparent 1px 8px), linear-gradient(145deg, var(--vellum-ivory), var(--parchment-cream)); }
.censor-lines { margin-top:2rem; display:grid; gap:.8rem; }
.censor-lines span { height:18px; background:var(--mahogany-black); display:block; }
.censor-lines span:nth-child(2) { width:75%; background:var(--oxide-red); }
.censor-lines span:nth-child(3) { width:48%; }
.coupe-scene { position:relative; width:320px; height:410px; transform:rotate(5deg); }
.coupe-bowl { width:260px; height:150px; border:3px solid rgba(255,247,231,.72); border-top:0; border-radius:0 0 150px 150px; position:absolute; left:30px; top:40px; overflow:hidden; background:linear-gradient(rgba(255,247,231,.1), rgba(255,247,231,.02)); }
.liquid { position:absolute; left:-10%; right:-10%; bottom:0; height:56%; background:linear-gradient(#B8893B, #8b5d1d); border-radius:50% 50% 0 0; animation: pourSway 4s ease-in-out infinite; }
.coupe-stem { position:absolute; top:190px; left:154px; width:12px; height:142px; background:rgba(255,247,231,.7); }
.coupe-base { position:absolute; left:88px; bottom:40px; width:150px; height:20px; border-radius:50%; background:rgba(255,247,231,.68); }
.amber-shadow { position:absolute; width:280px; height:80px; border-radius:50%; background:rgba(184,137,59,.28); filter:blur(13px); left:16px; bottom:18px; }
.ink-blot { position:absolute; right:20vw; bottom:18vh; width:62px; height:54px; border-radius:45% 55% 60% 40%; background:rgba(23,35,59,.72); transform:scale(var(--ink-scale, 1)); transition:transform .5s ease; box-shadow: 18px -8px 0 -18px #17233B, -14px 10px 0 -13px #17233B; }

.scene-accord { --scene-tilt: -3deg; }
.accord-letter { width:min(72vw, 860px); padding: clamp(2rem,5vw,5rem); transform:rotate(2deg); text-align:left; }
.reply-slip { margin-top:2.2rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.12em; color:var(--oxide-red); background:var(--vellum-ivory); border:2px dashed var(--brass-gold); padding:1rem 1.2rem; cursor:pointer; box-shadow:0 15px 34px rgba(0,0,0,.22); transform:rotate(-1deg); }
.final-seal { right:19vw; bottom:19vh; display:grid; place-items:center; transform:rotate(-14deg) scale(.92); transition: transform .6s ease; }
.scene-accord.sealed .final-seal { transform:rotate(4deg) scale(1.12); }
.final-seal span { color:rgba(255,247,231,.78); font-size:2rem; }
.note-card { position:absolute; right:9vw; top:22vh; width:310px; padding:1.4rem; transform:rotate(8deg) translateY(-20px); opacity:0; transition:opacity .45s ease, transform .45s ease; }
.note-card.visible { opacity:1; transform:rotate(4deg) translateY(0); }

@keyframes pourSway { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(5px); } }

@media (max-width: 820px) {
  .stamp-rail { width: calc(100vw - 1.2rem); overflow-x: auto; justify-content:flex-start; }
  .letter-opener-track { display:none; }
  .scene-neutral, .scene-pour { grid-template-columns:1fr; }
  .folded-map { grid-template-columns:1fr; }
  .map-panel { border-right:0; border-bottom:1px solid rgba(23,35,59,.18); }
  .passport-page, .accord-letter, .revealed-sheet { width: min(92vw, 720px); position:relative; right:auto; bottom:auto; }
  .envelope { width:92vw; height:56vh; }
  .wax-seal { width:84px; height:84px; }
  .bar-mat { width:78vw; }
  .translation-stack, .brass-ruler, .route-ribbon { display:none; }
}