:root {
  --midnight-ivy: #13251B;
  --amethyst-dusk: #6C5CE7;
  --pollen-gold: #F5C65B;
  --porcelain-cream: #FFF3DD;
  --garnet-rose: #A7264F;
  --emerald-leaf: #1F7A4D;
  --velvet-plum: #4B153E;
  --seam-x: 50%;
  --pointer-x: 0px;
  --pointer-y: 0px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--porcelain-cream);
  background:
    radial-gradient(circle at 50% 20%, rgba(108, 92, 231, 0.22), transparent 32rem),
    radial-gradient(circle at 18% 72%, rgba(167, 38, 79, 0.24), transparent 28rem),
    linear-gradient(135deg, var(--midnight-ivy), #0b1710 48%, var(--velvet-plum));
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

body::before {
  background-image:
    radial-gradient(circle at 12% 18%, rgba(245, 198, 91, 0.14) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 22%, rgba(255, 243, 221, 0.1) 0 1px, transparent 2px),
    linear-gradient(90deg, transparent 49.7%, rgba(255, 243, 221, 0.18) 50%, transparent 50.3%);
  background-size: 82px 82px, 124px 124px, 100% 100%;
  opacity: 0.7;
}

body::after {
  background:
    repeating-linear-gradient(115deg, transparent 0 17px, rgba(255, 243, 221, 0.025) 18px 19px),
    radial-gradient(circle at calc(50% + var(--pointer-x) * 0.025) calc(48% + var(--pointer-y) * 0.025), rgba(255, 243, 221, 0.08), transparent 28rem);
  mix-blend-mode: screen;
}

.field-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.23;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 243, 221, 0.1) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, rgba(19, 37, 27, 0), rgba(255, 243, 221, 0.03) 1px, rgba(19, 37, 27, 0) 2px);
}

.moon-aura {
  position: fixed;
  width: 46vmax;
  height: 46vmax;
  left: calc(50% - 23vmax + var(--pointer-x) * 0.02);
  top: calc(50% - 23vmax + var(--pointer-y) * 0.02);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 92, 231, 0.2), rgba(167, 38, 79, 0.12) 36%, transparent 68%);
  filter: blur(22px);
  pointer-events: none;
  z-index: 1;
}

.central-seam {
  position: fixed;
  top: 0;
  bottom: 0;
  left: var(--seam-x);
  width: 1px;
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(transparent, rgba(255, 243, 221, 0.35), rgba(245, 198, 91, 0.38), rgba(255, 243, 221, 0.18), transparent);
  box-shadow: 0 0 32px rgba(245, 198, 91, 0.18);
}

.central-seam span {
  position: absolute;
  inset: 0 -7px;
  background: repeating-linear-gradient(to bottom, transparent 0 24px, rgba(245, 198, 91, 0.42) 24px 30px, transparent 30px 52px);
}

.ribbon-nav {
  position: fixed;
  top: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
  z-index: 20;
  padding: 0.45rem;
  border: 1px solid rgba(255, 243, 221, 0.18);
  border-radius: 999px;
  background: rgba(75, 21, 62, 0.48);
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(14px);
}

.ribbon-nav a {
  color: var(--porcelain-cream);
  text-decoration: none;
  font: 600 0.72rem/1 "Noto Serif JP", serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.54rem 0.82rem;
  border-radius: 999px;
  transition: transform 260ms ease, background 260ms ease, color 260ms ease;
}

.ribbon-nav a:hover,
.ribbon-nav a.active {
  transform: translateY(-2px) rotate(-1deg);
  background: var(--porcelain-cream);
  color: var(--velvet-plum);
}

.storybook {
  position: relative;
  z-index: 3;
}

.scene {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(5.5rem, 9vw, 8rem) clamp(1rem, 4vw, 4rem);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  width: min(84vw, 920px);
  height: min(84vw, 920px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(31, 122, 77, 0.18), transparent 65%);
  z-index: -1;
  transform: translate(calc(var(--pointer-x) * -0.015), calc(var(--pointer-y) * -0.015));
}

.object-frame {
  position: relative;
  width: min(92vw, 860px);
  min-height: min(76vh, 720px);
  display: grid;
  place-items: center;
}

.gate-arch {
  border-radius: 48% 48% 2.5rem 2.5rem / 18% 18% 2.5rem 2.5rem;
  border: 1px solid rgba(255, 243, 221, 0.22);
  background:
    linear-gradient(90deg, rgba(75, 21, 62, 0.55), transparent 28%, transparent 72%, rgba(75, 21, 62, 0.55)),
    radial-gradient(circle at 50% 46%, rgba(108, 92, 231, 0.2), rgba(19, 37, 27, 0.64) 54%, rgba(19, 37, 27, 0.85));
  box-shadow: inset 0 0 84px rgba(0, 0, 0, 0.36), 0 36px 92px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.gate-bars {
  position: absolute;
  inset: 6% 16%;
  display: flex;
  justify-content: space-evenly;
  opacity: 0.55;
}

.gate-bars i {
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(var(--pollen-gold), var(--velvet-plum), var(--pollen-gold));
  transform-origin: top;
  animation: gatePins 7s ease-in-out infinite alternate;
}

.gate-bars i:nth-child(even) { animation-delay: -1.7s; }

.brooch {
  position: relative;
  width: min(84vw, 680px);
  aspect-ratio: 1.55;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  border: 2px solid rgba(245, 198, 91, 0.78);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 54%, rgba(167, 38, 79, 0.46), transparent 31%),
    radial-gradient(circle, rgba(255, 243, 221, 0.12), rgba(75, 21, 62, 0.66) 66%, rgba(19, 37, 27, 0.86));
  box-shadow: inset 0 0 0 12px rgba(255, 243, 221, 0.05), 0 0 58px rgba(245, 198, 91, 0.15), 0 26px 80px rgba(0, 0, 0, 0.44);
  transform: translate(calc(var(--pointer-x) * 0.012), calc(var(--pointer-y) * 0.012));
}

.brooch::before,
.brooch::after {
  content: "";
  position: absolute;
  width: 9rem;
  height: 9rem;
  border: 1px solid rgba(255, 243, 221, 0.22);
  border-radius: 54% 46% 52% 48%;
  background: rgba(31, 122, 77, 0.12);
  filter: drop-shadow(0 0 18px rgba(31, 122, 77, 0.25));
}

.brooch::before { left: -2.5rem; top: 12%; transform: rotate(-34deg); }
.brooch::after { right: -2.5rem; bottom: 12%; transform: rotate(34deg); }

.wordmark {
  margin: 0;
  font-family: Anybody, Inter, sans-serif;
  font-variation-settings: "wdth" var(--title-width, 76), "wght" var(--title-weight, 760);
  font-size: clamp(3.4rem, 11vw, 9.6rem);
  line-height: 0.82;
  letter-spacing: -0.085em;
  color: var(--porcelain-cream);
  text-shadow: 0 0 22px rgba(167, 38, 79, 0.65), 0 0 54px rgba(108, 92, 231, 0.33);
  animation: wordBloom 6.8s ease-in-out infinite alternate;
}

.curt-line {
  margin: 0 0 1.2rem;
  color: var(--pollen-gold);
  transform: rotate(-3deg);
}

.tagline {
  max-width: 31rem;
  margin: 1.25rem auto 0;
  font: 500 clamp(1rem, 2vw, 1.35rem)/1.45 Fraunces, Georgia, serif;
  color: rgba(255, 243, 221, 0.86);
}

.handwritten {
  font-family: Yomogi, "Comic Sans MS", cursive;
  letter-spacing: 0.02em;
}

.stamp {
  display: inline-block;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(245, 198, 91, 0.45);
  border-radius: 999px;
  background: rgba(75, 21, 62, 0.42);
  animation: stampIn 900ms cubic-bezier(.2,1.3,.3,1) both;
}

.thorn-marginalia {
  position: absolute;
  top: 42%;
  z-index: 4;
  color: rgba(255, 243, 221, 0.82);
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  transition: transform 300ms ease;
}

.left-note { left: clamp(1rem, 8vw, 8rem); transform: rotate(-10deg); }
.right-note { right: clamp(1rem, 7vw, 7rem); transform: rotate(9deg); }
.thorn-marginalia:hover { transform: rotate(0deg) scale(1.08); color: var(--pollen-gold); }

.vine {
  position: absolute;
  top: 6%;
  width: min(30vw, 220px);
  height: 80%;
  fill: rgba(31, 122, 77, 0.36);
  stroke: var(--emerald-leaf);
  stroke-width: 4;
  stroke-linecap: round;
  z-index: 2;
  filter: drop-shadow(0 0 16px rgba(31, 122, 77, 0.4));
}

.vine path {
  fill: none;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: growVine 5s ease forwards 300ms;
}

.vine-left { left: 3%; }
.vine-right { right: 3%; }
.leaves ellipse {
  transform-box: fill-box;
  transform-origin: center;
  animation: leafCurl 4.4s ease-in-out infinite alternate;
}
.leaves ellipse:nth-child(2n) { animation-delay: -1.2s; }
.vine:hover .leaves ellipse { transform: rotate(-34deg) scale(0.82); }

.scroll-hint {
  position: absolute;
  bottom: 2.2rem;
  color: rgba(255, 243, 221, 0.72);
  animation: bob 2.6s ease-in-out infinite;
}

.chapter-label {
  position: absolute;
  top: clamp(5rem, 10vw, 8rem);
  left: 50%;
  transform: translateX(-50%);
  font: 700 0.78rem/1 "Noto Serif JP", serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--pollen-gold);
}

.interactive-card {
  transition: transform 500ms ease, filter 500ms ease;
}
.interactive-card:hover { transform: translateY(-0.65rem); filter: saturate(1.12); }

.hem-stage {
  min-height: 590px;
}

.fabric-swatch {
  position: absolute;
  width: min(42vw, 350px);
  height: 68%;
  border: 1px solid rgba(255, 243, 221, 0.18);
  border-radius: 42% 42% 2rem 2rem / 12% 12% 2rem 2rem;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
}

.swatch-plum {
  left: 7%;
  background: linear-gradient(145deg, rgba(75, 21, 62, 0.96), rgba(167, 38, 79, 0.64));
  transform: rotate(-7deg);
}

.swatch-cream {
  right: 7%;
  background:
    linear-gradient(45deg, rgba(245, 198, 91, 0.14) 25%, transparent 25% 50%, rgba(245, 198, 91, 0.14) 50% 75%, transparent 75%),
    var(--porcelain-cream);
  background-size: 28px 28px;
  transform: rotate(6deg);
  opacity: 0.94;
}

.skirt-hem {
  position: relative;
  width: min(82vw, 620px);
  padding: clamp(2rem, 5vw, 4rem);
  text-align: center;
  color: var(--velvet-plum);
  border-radius: 2rem 2rem 46% 46% / 2rem 2rem 16% 16%;
  background: var(--porcelain-cream);
  box-shadow: inset 0 -18px 0 rgba(245, 198, 91, 0.2), 0 28px 90px rgba(0, 0, 0, 0.38);
  z-index: 2;
}

.skirt-hem h2,
.pressed-card h2,
.mirror-surface h2 {
  margin: 0 0 1rem;
  font: 800 clamp(2.7rem, 8vw, 6.6rem)/0.9 Fraunces, Georgia, serif;
  font-variation-settings: "SOFT" 60, "WONK" 1;
}

.skirt-hem p,
.pressed-card p,
.mirror-surface p {
  margin: 0 auto 1.4rem;
  max-width: 32rem;
  font: 500 clamp(1.03rem, 2vw, 1.24rem)/1.62 Fraunces, Georgia, serif;
}

.scallop-lace {
  position: absolute;
  left: 50%;
  bottom: 13%;
  width: min(86vw, 720px);
  height: 38px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 19px -2px, transparent 23px, rgba(255, 243, 221, 0.78) 24px 27px, transparent 28px) 0 0/38px 38px repeat-x;
  z-index: 4;
}

.stitch-vine {
  position: absolute;
  width: min(86vw, 760px);
  z-index: 3;
  stroke: var(--emerald-leaf);
  stroke-width: 5;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 12 16;
  filter: drop-shadow(0 0 10px rgba(31, 122, 77, 0.38));
}

.pin {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--pollen-gold);
  box-shadow: 0 0 18px rgba(245, 198, 91, 0.8);
  animation: sparkle 2.4s ease-in-out infinite;
}
.pin::after { content: ""; position: absolute; width: 1px; height: 64px; left: 7px; top: 10px; background: rgba(75, 21, 62, 0.45); }
.pin-one { left: 16%; top: 10%; }
.pin-two { right: 19%; top: 12%; animation-delay: -0.8s; }
.pin-three { left: 50%; top: 6%; animation-delay: -1.4s; }

.pearl-button {
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  color: var(--velvet-plum);
  background: radial-gradient(circle at 32% 28%, white, var(--porcelain-cream) 45%, var(--pollen-gold));
  font: 700 0.82rem/1 "Noto Serif JP", serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 0 12px 24px rgba(75, 21, 62, 0.22);
  cursor: pointer;
}
.pearl-button:hover { animation: pearlGlint 850ms ease; }

.garment-tag {
  position: absolute;
  padding: 0.7rem 1rem;
  border-radius: 0.4rem;
  color: var(--velvet-plum);
  background: var(--porcelain-cream);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.26);
}
.tag-left { left: clamp(1rem, 8vw, 8rem); bottom: 24%; transform: rotate(9deg); }
.tag-right { right: clamp(1rem, 7vw, 7rem); top: 34%; transform: rotate(-7deg); font-family: "Noto Serif JP", serif; }

.cloche {
  width: min(92vw, 760px);
  min-height: 680px;
  border-radius: 50% 50% 2.2rem 2.2rem / 20% 20% 2.2rem 2.2rem;
  background: linear-gradient(145deg, rgba(255, 243, 221, 0.18), rgba(108, 92, 231, 0.16) 44%, rgba(19, 37, 27, 0.18));
  border: 1px solid rgba(255, 243, 221, 0.34);
  box-shadow: inset 0 0 80px rgba(255, 243, 221, 0.06), 0 34px 90px rgba(0, 0, 0, 0.36);
  overflow: hidden;
}

.glass-glow {
  position: absolute;
  inset: 8% 14%;
  border-radius: 50% 50% 1.5rem 1.5rem / 25% 25% 1.5rem 1.5rem;
  background: linear-gradient(100deg, transparent 12%, rgba(255, 243, 221, 0.18) 18%, transparent 29% 100%);
}

.fog {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 52%, rgba(255, 243, 221, 0.48), rgba(108, 92, 231, 0.18) 34%, transparent 68%);
  opacity: 0.65;
  transition: opacity 900ms ease, transform 900ms ease;
}
.cloche:hover .fog, .fog.clear { opacity: 0.16; transform: translateY(-2rem); }

.pressed-card {
  position: relative;
  z-index: 2;
  width: min(78vw, 540px);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  color: var(--velvet-plum);
  background: rgba(255, 243, 221, 0.88);
  border: 1px solid rgba(245, 198, 91, 0.62);
  border-radius: 1.4rem;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
}
.label { color: var(--garnet-rose); }

.botanical-sprig {
  position: absolute;
  width: 9rem;
  height: 19rem;
  border-left: 3px solid var(--emerald-leaf);
  border-radius: 50%;
  z-index: 2;
}
.botanical-sprig::before,
.botanical-sprig::after {
  content: "";
  position: absolute;
  width: 3.4rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--emerald-leaf);
  box-shadow: 0 0 0 1px rgba(255, 243, 221, 0.18), 0 0 20px rgba(31, 122, 77, 0.45);
}
.botanical-sprig::before { top: 22%; left: 0.6rem; transform: rotate(-30deg); }
.botanical-sprig::after { top: 48%; left: -2.8rem; transform: rotate(32deg); background: var(--garnet-rose); }
.sprig-a { left: 10%; bottom: 12%; transform: rotate(-18deg); }
.sprig-b { right: 10%; top: 13%; transform: rotate(164deg); }

.annotation-cluster {
  position: absolute;
  right: clamp(1rem, 8vw, 8rem);
  bottom: 13%;
  display: grid;
  gap: 0.5rem;
}
.annotation {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  color: var(--porcelain-cream);
  background: rgba(75, 21, 62, 0.58);
  border: 1px solid rgba(255, 243, 221, 0.18);
  transform: rotate(var(--r, -3deg));
}
.annotation:nth-child(2) { --r: 5deg; color: var(--pollen-gold); }
.crossed { text-decoration: line-through; text-decoration-color: var(--garnet-rose); text-decoration-thickness: 3px; }

.mirror {
  width: min(92vw, 760px);
  min-height: 690px;
}

.mirror-surface {
  position: relative;
  width: min(78vw, 560px);
  aspect-ratio: 0.82;
  display: grid;
  place-content: center;
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 50% 50% 8% 8% / 34% 34% 8% 8%;
  border: 2px solid rgba(245, 198, 91, 0.85);
  color: var(--porcelain-cream);
  background:
    radial-gradient(circle at 50% 40%, rgba(108, 92, 231, 0.36), rgba(167, 38, 79, 0.26) 36%, rgba(75, 21, 62, 0.72)),
    linear-gradient(135deg, rgba(255, 243, 221, 0.14), transparent 40%);
  box-shadow: inset 0 0 65px rgba(255, 243, 221, 0.1), 0 34px 90px rgba(0, 0, 0, 0.38);
}

.mirror-surface h2 {
  font-family: Anybody, Inter, sans-serif;
  font-variation-settings: "wdth" 104, "wght" 770;
  letter-spacing: -0.07em;
  text-shadow: 0 0 34px rgba(255, 243, 221, 0.28);
}

.mirror-ribbons span {
  position: absolute;
  top: 11%;
  width: 9rem;
  height: 19rem;
  background: linear-gradient(var(--garnet-rose), var(--velvet-plum));
  border-radius: 999px 999px 2rem 2rem;
  transform-origin: top center;
  transition: transform 300ms ease;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.28);
}
.mirror-ribbons span:first-child { left: 16%; transform: rotate(-24deg) translateX(calc(var(--pointer-x) * -0.012)); }
.mirror-ribbons span:last-child { right: 16%; transform: rotate(24deg) translateX(calc(var(--pointer-x) * 0.012)); }

.floral-frame i {
  position: absolute;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 60% 40% 58% 42%;
  background: radial-gradient(circle at 34% 30%, var(--porcelain-cream), var(--garnet-rose) 45%, var(--velvet-plum));
  box-shadow: 0 0 22px rgba(167, 38, 79, 0.45);
  animation: petalPulse 3.8s ease-in-out infinite alternate;
}
.floral-frame i:nth-child(1) { left: 17%; top: 20%; }
.floral-frame i:nth-child(2) { right: 17%; top: 24%; animation-delay: -0.6s; }
.floral-frame i:nth-child(3) { left: 13%; bottom: 25%; animation-delay: -1.1s; }
.floral-frame i:nth-child(4) { right: 13%; bottom: 25%; animation-delay: -1.8s; }
.floral-frame i:nth-child(5) { left: 47%; top: 7%; animation-delay: -2.3s; }
.floral-frame i:nth-child(6) { left: 48%; bottom: 7%; animation-delay: -3s; }

.final-tags {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.final-tags span {
  padding: 0.55rem 0.8rem;
  border: 1px solid rgba(255, 243, 221, 0.18);
  border-radius: 999px;
  background: rgba(19, 37, 27, 0.56);
  color: var(--porcelain-cream);
  font: 600 0.72rem/1 "Noto Serif JP", serif;
  letter-spacing: 0.1em;
}

.petal {
  position: fixed;
  top: -4rem;
  width: 1.25rem;
  height: 0.8rem;
  border-radius: 70% 30% 70% 30%;
  background: var(--garnet-rose);
  pointer-events: none;
  z-index: 5;
  opacity: 0.8;
  animation: drift var(--duration, 9s) linear forwards;
}

@keyframes wordBloom {
  0%, 18% { font-variation-settings: "wdth" 72, "wght" 820; letter-spacing: -0.095em; }
  58% { font-variation-settings: "wdth" 116, "wght" 640; letter-spacing: -0.045em; }
  100% { font-variation-settings: "wdth" 94, "wght" 780; letter-spacing: -0.065em; }
}

@keyframes growVine { to { stroke-dashoffset: 0; } }
@keyframes leafCurl { from { transform: rotate(28deg) scale(0.78); } to { transform: rotate(-9deg) scale(1.04); } }
@keyframes gatePins { from { transform: scaleY(1) rotate(0deg); } to { transform: scaleY(0.93) rotate(3deg); } }
@keyframes stampIn { from { opacity: 0; transform: scale(1.8) rotate(-10deg); } to { opacity: 1; transform: scale(1) rotate(-3deg); } }
@keyframes bob { 50% { transform: translateY(-0.55rem); } }
@keyframes sparkle { 50% { transform: scale(1.35); filter: brightness(1.25); } }
@keyframes pearlGlint { 50% { box-shadow: 0 0 0 8px rgba(245, 198, 91, 0.22), 0 0 28px rgba(255, 243, 221, 0.88); } }
@keyframes petalPulse { to { transform: rotate(18deg) scale(1.12); filter: brightness(1.15); } }
@keyframes drift {
  to { transform: translate3d(var(--drift-x, 2rem), 110vh, 0) rotate(540deg); opacity: 0; }
}

@media (max-width: 760px) {
  .ribbon-nav { width: calc(100% - 1rem); justify-content: center; top: 0.5rem; }
  .ribbon-nav a { padding: 0.5rem 0.52rem; font-size: 0.62rem; }
  .object-frame { min-height: 620px; }
  .gate-arch { border-radius: 44% 44% 1.6rem 1.6rem / 12% 12% 1.6rem 1.6rem; }
  .brooch { aspect-ratio: 0.95; border-radius: 42%; }
  .thorn-marginalia, .garment-tag, .annotation-cluster { display: none; }
  .vine { width: 32vw; opacity: 0.7; }
  .fabric-swatch { width: 54vw; height: 58%; }
  .swatch-plum { left: -10%; }
  .swatch-cream { right: -10%; }
  .mirror-ribbons span { width: 5rem; }
  .final-tags { width: 92vw; }
}