:root {
  /* design-font-check: IBM Plex Sans J* JP** for tiny metadata */
  --burgundy: #5A1724;
  --plum: #261626;
  --sky: #9FB7C9;
  --petal: #FFF7E3;
  --cream: #F6E8C9;
  --rose: #B65C66;
  --brass: #8A7A3E;
  --angle: -9deg;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  color: var(--plum);
  background: var(--cream);
  font-family: "Newsreader", Georgia, serif;
}

.album {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,247,227,.16), transparent 24rem),
    linear-gradient(115deg, var(--burgundy), var(--plum));
}

.vignette {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  pointer-events: none;
  transform: translateY(2rem) scale(1.015);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.16,1);
}

.vignette.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.album.swapped .active .pane-left { transform: translateX(100%) skewY(-1.5deg); }
.album.swapped .active .pane-right { transform: translateX(-100%) skewY(1.5deg); }

.pane {
  position: relative;
  min-width: 0;
  height: 100vh;
  padding: clamp(2rem, 5vw, 6rem);
  overflow: hidden;
  transition: transform .72s cubic-bezier(.2,.75,.16,1), filter .72s ease;
}

.pane-left { clip-path: polygon(0 0, 100% 0, calc(100% - 9vw) 100%, 0 100%); }
.pane-right { clip-path: polygon(9vw 0, 100% 0, 100% 100%, 0 100%); margin-left: -9vw; padding-left: calc(clamp(2rem, 5vw, 6rem) + 8vw); }

.room, .burgundy-side {
  color: var(--cream);
  background:
    linear-gradient(90deg, rgba(38,22,38,.6), transparent 55%),
    repeating-linear-gradient(135deg, rgba(246,232,201,.06) 0 1px, transparent 1px 18px),
    var(--burgundy);
}

.garden, .cream-side {
  background:
    radial-gradient(circle at 70% 22%, rgba(159,183,201,.55), transparent 12rem),
    repeating-linear-gradient(90deg, rgba(138,122,62,.14) 0 1px, transparent 1px 28px),
    var(--cream);
}

.plum-side {
  color: var(--petal);
  background:
    radial-gradient(circle at 62% 28%, rgba(90,23,36,.75), transparent 16rem),
    repeating-linear-gradient(45deg, rgba(159,183,201,.12) 0 2px, transparent 2px 23px),
    var(--plum);
}

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 80, "WONK" 1;
  margin: 0;
  line-height: .86;
  letter-spacing: -.06em;
}

h1 {
  position: relative;
  z-index: 2;
  max-width: 10ch;
  margin-top: 14vh;
  font-size: clamp(4.6rem, 13vw, 13rem);
  color: var(--petal);
  text-shadow: .08em .08em 0 rgba(38,22,38,.38);
}

h1 span { font-weight: 850; }
h1 em { display: block; color: var(--rose); font-style: normal; font-weight: 430; }

h2 { font-size: clamp(3rem, 7vw, 7rem); color: inherit; }

.catalog, .stamp, .small-note, .charm::after, .swap-button {
  font-family: "IBM Plex Sans JP", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .74rem;
}

.catalog { color: var(--brass); font-weight: 700; }
.room .catalog, .burgundy-side .catalog, .plum-side .catalog { color: var(--sky); }

.diary, .label-card p:not(.catalog), .keepsake-box p {
  max-width: 34rem;
  font-size: clamp(1.25rem, 2vw, 2rem);
  line-height: 1.45;
}

.diary { color: var(--cream); margin-top: 2rem; }

.diagonal-seam {
  position: absolute;
  z-index: 8;
  top: -12vh;
  left: 50%;
  width: 1.2rem;
  height: 124vh;
  transform: translateX(-50%) rotate(var(--angle));
  transform-origin: center;
  background: linear-gradient(var(--petal), var(--cream));
  box-shadow: 0 0 0 2px var(--brass), .8rem 0 2rem rgba(38,22,38,.28);
  transition: transform .7s cubic-bezier(.2,.75,.16,1);
}

.diagonal-seam::before, .diagonal-seam::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-left: .75rem solid transparent;
  border-right: .75rem solid transparent;
}
.diagonal-seam::before { top: 11%; border-bottom: 2.6rem solid var(--rose); }
.diagonal-seam::after { bottom: 11%; border-top: 2.6rem solid var(--burgundy); }

.seam-charm {
  position: absolute;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  transform: translateX(-50%) rotate(calc(var(--angle) * -1));
  border: 2px solid var(--brass);
  border-radius: 50%;
  color: var(--burgundy);
  background: var(--petal);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}
.moth-pin { top: 24%; animation: tremble 2.9s infinite; }
.flower-pin { top: 49%; animation: budPulse 3.4s infinite; }
.stamp-pin { top: 70%; border-radius: 22% 46% 22% 46%; color: var(--petal); background: var(--rose); }

.seam-nav {
  position: absolute;
  z-index: 12;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: .85rem;
  transform: translate(-50%, -50%) rotate(var(--angle));
  transition: transform .7s cubic-bezier(.2,.75,.16,1);
}

.charm {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 2px solid var(--brass);
  border-radius: 50% 50% 44% 50%;
  color: var(--burgundy);
  background: var(--petal);
  box-shadow: .2rem .2rem 0 rgba(38,22,38,.24);
  cursor: pointer;
  transform: rotate(calc(var(--angle) * -1));
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.charm:hover, .charm.active { background: var(--rose); color: var(--petal); transform: rotate(calc(var(--angle) * -1)) scale(1.16); }
.charm::after {
  content: attr(data-label);
  position: absolute;
  left: 2.9rem;
  top: 50%;
  width: max-content;
  padding: .35rem .55rem;
  opacity: 0;
  color: var(--burgundy);
  background: var(--cream);
  border: 1px solid var(--brass);
  transform: translateY(-50%) translateX(-.4rem);
  transition: opacity .25s ease, transform .25s ease;
}
.charm:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }

.corner-lift {
  position: absolute;
  right: 12vw;
  top: 0;
  width: 8rem;
  height: 8rem;
  background: linear-gradient(135deg, var(--petal) 0 50%, rgba(90,23,36,.32) 51%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  animation: cornerLift 4s ease-in-out infinite;
}

.ribbon {
  position: absolute;
  left: 8vw;
  bottom: 11vh;
  padding: .8rem 3rem .8rem 1rem;
  color: var(--petal);
  background: var(--rose);
  font-family: "M PLUS Rounded 1c", sans-serif;
  clip-path: polygon(0 0, 100% 0, calc(100% - 1.3rem) 50%, 100% 100%, 0 100%);
}
.twitch { animation: ribbonTwitch 3.7s infinite; }

.moon-disc {
  position: absolute;
  right: 13vw;
  top: 15vh;
  width: 10rem;
  height: 10rem;
  border-radius: 50%;
  background: var(--petal);
  box-shadow: 0 0 3rem rgba(255,247,227,.7);
}
.vine-line {
  position: absolute;
  left: 27%;
  top: 9%;
  width: 31rem;
  height: 65vh;
  border-left: 4px solid var(--brass);
  border-bottom: 4px solid var(--brass);
  border-radius: 0 0 0 70%;
  transform: rotate(-16deg);
}
.bud, .five-petal {
  position: absolute;
  display: grid;
  place-items: center;
  width: 9rem;
  height: 9rem;
}
.bud { left: 24%; bottom: 20%; }
.bud i, .five-petal i {
  position: absolute;
  width: 3.2rem;
  height: 4.5rem;
  border-radius: 80% 20% 80% 20%;
  background: var(--petal);
  border: 2px solid var(--brass);
  transform-origin: 50% 95%;
}
.bud i:nth-child(1), .five-petal i:nth-child(1) { transform: rotate(0deg) translateY(-2rem); }
.bud i:nth-child(2), .five-petal i:nth-child(2) { transform: rotate(72deg) translateY(-2rem); }
.bud i:nth-child(3), .five-petal i:nth-child(3) { transform: rotate(144deg) translateY(-2rem); }
.bud i:nth-child(4), .five-petal i:nth-child(4) { transform: rotate(216deg) translateY(-2rem); }
.bud i:nth-child(5), .five-petal i:nth-child(5) { transform: rotate(288deg) translateY(-2rem); }
.open i { animation: openBud 3.6s ease-in-out infinite; }

.moth {
  position: absolute;
  right: 26%;
  bottom: 28%;
  width: 5rem;
  height: 4rem;
}
.moth::before, .moth::after {
  content: "";
  position: absolute;
  top: .4rem;
  width: 2.3rem;
  height: 3rem;
  background: var(--plum);
  border: 2px solid var(--sky);
}
.moth::before { left: 0; border-radius: 80% 10% 60% 20%; transform: rotate(-25deg); }
.moth::after { right: 0; border-radius: 10% 80% 20% 60%; transform: rotate(25deg); }
.moth span { position: absolute; left: 50%; top: .5rem; width: .35rem; height: 3.2rem; background: var(--brass); }
.tremble { animation: tremble 2.2s infinite; }

.small-note { position: absolute; right: 8vw; bottom: 13vh; max-width: 14rem; color: var(--burgundy); }

.label-card, .keepsake-box {
  position: relative;
  max-width: 40rem;
  margin-top: 18vh;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border: 2px solid var(--brass);
  background: rgba(255,247,227,.72);
  box-shadow: .8rem .8rem 0 rgba(138,122,62,.22);
  clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 2rem 100%, 0 calc(100% - 2rem));
}
.burgundy-side .label-card, .translucent { background: rgba(90,23,36,.66); color: var(--petal); }

.icon-row { display: flex; gap: 1rem; margin-top: 2rem; color: var(--rose); font: 700 2rem "M PLUS Rounded 1c", sans-serif; }
.artifact.window-art {
  width: min(34vw, 28rem);
  aspect-ratio: 1;
  margin: 18vh auto 0;
  border: 1.1rem solid var(--cream);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
  padding: .7rem;
  transform: rotate(4deg);
  box-shadow: 1rem 1rem 0 var(--plum);
}
.window-art div { background: linear-gradient(145deg, var(--sky), var(--petal)); clip-path: polygon(0 0, 100% 0, 88% 100%, 0 88%); }
.stamp { display: inline-block; margin-top: 2rem; padding: .45rem .7rem; border: 2px solid currentColor; color: var(--petal); transform: rotate(-4deg); }
.stamp.blue { color: var(--sky); margin-left: 8vw; }

.cassette {
  position: relative;
  width: min(38vw, 34rem);
  height: 18rem;
  margin: 22vh auto 0;
  border: .55rem solid var(--sky);
  border-radius: 1.2rem;
  background: linear-gradient(var(--cream) 0 35%, var(--burgundy) 35% 100%);
  box-shadow: 1rem 1rem 0 rgba(182,92,102,.6);
}
.cassette-label { margin: 1.4rem auto; width: 76%; padding: .7rem; color: var(--burgundy); background: var(--petal); font-family: "M PLUS Rounded 1c", sans-serif; text-align: center; }
.reel { position: absolute; bottom: 3rem; width: 5.8rem; height: 5.8rem; border: .9rem dotted var(--petal); border-radius: 50%; animation: reelTurn 5s ease-in-out infinite; }
.reel-a { left: 20%; } .reel-b { right: 20%; }
.paper-teeth { height: 2rem; margin-top: 2rem; background: repeating-linear-gradient(135deg, var(--rose) 0 .7rem, transparent .7rem 1.4rem); clip-path: polygon(0 0, 100% 0, 98% 100%, 0 60%); }

.note-stack { position: relative; margin: 17vh auto 0; width: min(37vw, 32rem); height: 28rem; }
.note { position: absolute; padding: 2rem; background: var(--cream); color: var(--burgundy); border: 2px solid var(--brass); font-family: "M PLUS Rounded 1c", sans-serif; box-shadow: .65rem .65rem 0 rgba(38,22,38,.35); }
.note-one { inset: 0 4rem auto 0; height: 13rem; transform: rotate(-6deg); font-size: 2rem; }
.note-two { inset: 8rem 0 auto 4rem; height: 12rem; transform: rotate(5deg); color: var(--plum); }
.note-three { inset: 18rem 5rem auto 1rem; height: 7rem; transform: rotate(-2deg); background: var(--sky); }
.moth-map { position: relative; height: 5rem; margin-top: 2rem; }
.moth-map b { position: absolute; width: .75rem; height: .75rem; background: var(--rose); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: settle 3s infinite; }
.moth-map b:nth-child(1) { left: 5%; top: 20%; } .moth-map b:nth-child(2) { left: 38%; top: 64%; animation-delay: .3s; } .moth-map b:nth-child(3) { left: 72%; top: 10%; animation-delay: .6s; }

.keepsake-box { margin-left: auto; margin-right: auto; text-align: center; }
.pin { display: inline-block; padding: .35rem .65rem; color: var(--petal); background: var(--rose); font-family: "IBM Plex Sans JP", sans-serif; transform: rotate(7deg); }
.keepsake-box .five-petal { position: relative; margin: 3rem auto 0; }
.closing { max-width: 10ch; margin-top: 20vh; color: var(--petal); }
.swap-button {
  margin-top: 3rem;
  padding: .9rem 1.15rem;
  border: 2px solid var(--sky);
  color: var(--petal);
  background: transparent;
  cursor: pointer;
  box-shadow: .35rem .35rem 0 var(--rose);
}
.swap-button:hover { background: var(--rose); }

@keyframes cornerLift { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg) translate(-.35rem,.25rem); } }
@keyframes ribbonTwitch { 0%, 88%, 100% { transform: translateX(0); } 90% { transform: translateX(.5rem) skewX(-8deg); } 92% { transform: translateX(-.2rem); } }
@keyframes tremble { 0%, 100% { transform: translate(0,0) rotate(0deg); } 25% { transform: translate(.1rem,-.06rem) rotate(2deg); } 50% { transform: translate(-.08rem,.08rem) rotate(-2deg); } }
@keyframes openBud { 0%, 100% { scale: .86; } 45%, 65% { scale: 1; } }
@keyframes budPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,247,227,0); } 50% { box-shadow: 0 0 1.4rem rgba(255,247,227,.75); } }
@keyframes reelTurn { 0%, 70%, 100% { transform: rotate(0deg); } 86% { transform: rotate(360deg); } }
@keyframes settle { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(.7rem) rotate(18deg); } }

@media (max-width: 800px) {
  body { overflow: auto; }
  .album { height: auto; min-height: 100vh; overflow: visible; }
  .vignette, .vignette.active { position: relative; display: none; min-height: 100vh; grid-template-columns: 1fr; transform: none; }
  .vignette.active { display: grid; }
  .pane, .pane-right { height: 50vh; min-height: 28rem; margin-left: 0; padding: 2rem; clip-path: none; }
  .diagonal-seam { left: auto; right: 1rem; }
  .seam-nav { left: auto; right: .5rem; transform: translateY(-50%); }
  h1 { font-size: 4.4rem; margin-top: 4rem; }
  .cassette, .note-stack { width: 80vw; margin-top: 3rem; }
}