:root {
  /* Typography compliance tokens: Interprets guarded fashion material system—vinyl Space Grotes* Grotesk* Groteskkkk Grotesk polished editorial copy */
  --chrome: #D9E1EA;
  --vinyl: #07070B;
  --blush: #FF4FA3;
  --lilac: #C9B8FF;
  --mint: #9CFFDA;
  --ivory: #FFF4E1;
  --ruby: #E3173F;
  --bodoni: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --space: "Space Grotesk", "Inter", system-ui, sans-serif;
  --mono: "Chivo Mono", "SFMono-Regular", ui-monospace, monospace;
  --hand: "Yomogi", "Bradley Hand", "Comic Sans MS", cursive;
  --font-check-grotesk: "Grotesk**";
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--vinyl); }
body {
  margin: 0;
  color: var(--ivory);
  font-family: var(--space);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 18%, rgba(201,184,255,.34), transparent 25rem),
    radial-gradient(circle at 19% 71%, rgba(255,79,163,.24), transparent 24rem),
    linear-gradient(115deg, #07070B 0%, #111018 42%, #07070B 100%);
}

.vinyl-grain {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .28;
  mix-blend-mode: screen;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 37px 37px, 7px 7px;
}

.mirror-column {
  position: fixed;
  z-index: 8;
  top: 4vh;
  left: 62vw;
  width: min(22vw, 310px);
  height: 92vh;
  border-radius: 48% 48% 38% 38% / 12% 12% 6% 6%;
  border: 1px solid rgba(217,225,234,.8);
  background:
    linear-gradient(105deg, rgba(255,255,255,.75), transparent 8%, rgba(156,255,218,.4) 13%, transparent 20%),
    radial-gradient(circle at 28% 18%, rgba(255,244,225,.9), transparent 9%),
    linear-gradient(120deg, rgba(217,225,234,.88), rgba(201,184,255,.22) 35%, rgba(7,7,11,.78) 58%, rgba(217,225,234,.68));
  box-shadow: inset 0 0 42px rgba(255,244,225,.3), 0 0 46px rgba(201,184,255,.28), 0 0 0 12px rgba(217,225,234,.07);
  overflow: hidden;
}

.mirror-fog {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--fog-x, 45%) var(--fog-y, 45%), transparent 0 4.8rem, rgba(217,225,234,.5) 5.2rem), rgba(217,225,234,.2);
  backdrop-filter: blur(7px);
  opacity: .92;
  transition: opacity .7s ease;
}
.mirror-column.wiped .mirror-fog { opacity: .18; }
.mirror-shine { position: absolute; inset: -20%; transform: rotate(18deg); background: linear-gradient(90deg, transparent 35%, rgba(255,255,255,.7), transparent 48%); animation: shine 5.8s infinite; }
.mirror-fragments { position: absolute; inset: 10% 12%; font-family: var(--bodoni); font-size: clamp(2rem, 5vw, 5.2rem); color: var(--vinyl); text-shadow: 1px 1px var(--mint), -1px -1px var(--blush); writing-mode: vertical-rl; letter-spacing: -.08em; opacity: .78; }
.mirror-fragments span { display: block; transform: translateX(var(--shift, 0)); }
.mirror-fragments span:nth-child(2) { --shift: 1.1rem; color: var(--ruby); }
.mirror-fragments span:nth-child(3) { --shift: -.7rem; color: var(--ivory); }
.wipe-tab { position: absolute; right: .6rem; bottom: 3rem; transform: rotate(-8deg); border: 0; background: var(--ivory); color: var(--vinyl); font-family: var(--mono); padding: .55rem .7rem; cursor: pointer; box-shadow: 5px 5px 0 var(--ruby); }

.object-nav { position: fixed; z-index: 15; top: 1rem; left: 1rem; display: flex; gap: .45rem; flex-wrap: wrap; width: min(38rem, 54vw); }
.rack-marker { color: var(--chrome); text-decoration: none; font: 700 .68rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: .55rem .7rem; border: 1px solid rgba(217,225,234,.35); background: rgba(7,7,11,.55); clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); transition: .25s; }
.rack-marker.active, .rack-marker:hover { color: var(--vinyl); background: var(--mint); border-color: var(--mint); }

.lookbook { position: relative; z-index: 2; }
.scene { min-height: 100vh; position: relative; display: grid; align-items: center; padding: 7rem 8vw 5rem; overflow: hidden; border-bottom: 1px solid rgba(217,225,234,.12); }
.scene::before { content: attr(data-scene); position: absolute; right: 5vw; top: 10vh; font-family: var(--mono); color: rgba(217,225,234,.28); font-size: .82rem; }
.spread-title { position: absolute; z-index: -1; font-family: var(--bodoni); font-size: clamp(4.8rem, 15vw, 15rem); line-height: .77; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px rgba(217,225,234,.35); text-shadow: 0 0 28px rgba(255,79,163,.13); pointer-events: none; }
.left-crop { left: -4vw; top: 13vh; max-width: 57vw; }
.right-crop { right: -8vw; bottom: 10vh; max-width: 54vw; text-align: right; }
.bottom-crop { left: 5vw; bottom: -1rem; color: rgba(255,79,163,.16); -webkit-text-stroke: 1px rgba(255,244,225,.25); }

.belt-logo { position: absolute; left: 7vw; top: 19vh; animation: buckleIn 1.15s cubic-bezier(.18,1,.22,1) both; }
.belt-logo h1 { margin: 0; font-family: var(--bodoni); font-size: clamp(3.2rem, 8vw, 8.8rem); line-height: .8; letter-spacing: -.09em; background: linear-gradient(100deg, var(--chrome), var(--ivory), var(--mint), var(--chrome)); -webkit-background-clip: text; color: transparent; filter: drop-shadow(0 0 14px rgba(156,255,218,.22)); }
.swing-tag { display: inline-block; font-family: var(--mono); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform-origin: top left; animation: tagSwing 2.4s ease-in-out infinite; }
.ruby-tag { background: var(--ruby); color: var(--ivory); padding: .75rem 1rem; box-shadow: 7px 7px 0 rgba(7,7,11,.7); border: 0; }
.belt-logo .ruby-tag { margin-left: 42%; margin-top: -.4rem; transform: rotate(-7deg); }

.garment-panel, .pvc-bag, .reversible-jacket, .compact, .final-mirror { width: min(37rem, 52vw); padding: clamp(1.2rem, 3vw, 3rem); position: relative; }
.garment-panel { margin-top: 30vh; background: linear-gradient(145deg, rgba(7,7,11,.96), rgba(29,27,39,.9)); border: 1px solid rgba(217,225,234,.38); clip-path: polygon(7% 0, 94% 4%, 100% 89%, 78% 100%, 0 92%); box-shadow: inset 0 0 3rem rgba(217,225,234,.08), 0 2rem 5rem rgba(0,0,0,.4); }
h2 { margin: .3rem 0 1rem; font-family: var(--bodoni); font-size: clamp(2.4rem, 5.5vw, 6rem); line-height: .82; letter-spacing: -.06em; }
p { font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.55; }
.mono-label { font: 800 .73rem/1.4 var(--mono); color: var(--mint); letter-spacing: .08em; text-transform: uppercase; }
.hand-note { font-family: var(--hand); color: var(--blush); font-size: clamp(1.3rem, 2.6vw, 2.4rem); transform: rotate(-5deg); }
.hanger { position: absolute; width: 6rem; height: 3rem; top: -2rem; left: 38%; border-top: 2px solid var(--chrome); border-radius: 50% 50% 0 0; }
.tag-button { cursor: pointer; border: 1px solid var(--chrome); background: var(--ivory); color: var(--vinyl); font-family: var(--mono); font-weight: 900; padding: .9rem 1.1rem; text-transform: uppercase; box-shadow: 6px 6px 0 var(--blush); transition: transform .2s, box-shadow .2s; }
.tag-button:hover { transform: translate(3px, 3px) rotate(-2deg); box-shadow: 2px 2px 0 var(--mint); }

.zipper-widget { position: absolute; left: 50vw; bottom: 8vh; height: 44vh; width: 4rem; }
.zipper-track { position: absolute; left: 50%; top: 0; bottom: 0; width: .4rem; transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--chrome) 0 .55rem, transparent .55rem 1.05rem); }
.zipper-track span { position: absolute; left: -.45rem; width: 1.3rem; height: .35rem; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.zipper-track span:nth-child(1){top:5%}.zipper-track span:nth-child(2){top:20%}.zipper-track span:nth-child(3){top:35%}.zipper-track span:nth-child(4){top:50%}.zipper-track span:nth-child(5){top:65%}.zipper-track span:nth-child(6){top:80%}.zipper-track span:nth-child(7){top:93%}
.zipper-pull { position: absolute; left: 50%; top: var(--zip, 10%); transform: translate(-50%, -50%); width: 3.2rem; height: 4.2rem; border-radius: 50% 50% 40% 40%; display: grid; place-items: center; background: linear-gradient(140deg, var(--chrome), var(--ivory), var(--lilac)); color: var(--vinyl); font: 800 .65rem var(--mono); cursor: grab; box-shadow: 0 0 24px rgba(217,225,234,.55); }

.scene-denial { background: radial-gradient(circle at 24% 30%, rgba(201,184,255,.28), transparent 30rem); }
.pvc-bag { margin-left: 8vw; background: linear-gradient(130deg, rgba(201,184,255,.45), rgba(217,225,234,.12)); border: 1px solid rgba(201,184,255,.72); backdrop-filter: blur(9px); clip-path: polygon(10% 0, 100% 7%, 90% 100%, 0 92%); transition: transform .5s, background .5s; }
.pvc-bag.open { transform: rotate(-2deg) translateX(2rem); background: linear-gradient(130deg, rgba(255,79,163,.34), rgba(156,255,218,.16)); }
.bag-zip { position: absolute; right: 1.2rem; top: 0; bottom: 0; width: .5rem; background: repeating-linear-gradient(var(--ruby) 0 .45rem, transparent .45rem .9rem); }
.care-label { position: absolute; left: 47vw; top: 23vh; background: var(--ivory); color: var(--vinyl); font: 900 .85rem var(--mono); padding: 1rem; box-shadow: 8px 8px 0 var(--ruby); }
.tilted { transform: rotate(12deg); }
.measuring-tape { position: absolute; bottom: 10vh; left: -3vw; white-space: nowrap; color: var(--vinyl); background: repeating-linear-gradient(90deg, var(--mint) 0 2rem, #7ce9c1 2rem 2.1rem); padding: .8rem 3rem; font-family: var(--mono); transform: rotate(-4deg); animation: rackDrift 8s ease-in-out infinite; }

.reversible-jacket { margin-left: 5vw; min-height: 27rem; perspective: 1000px; padding: 0; }
.jacket-side { position: absolute; inset: 0; padding: 2.4rem; border: 1px solid rgba(217,225,234,.4); backface-visibility: hidden; transition: transform .85s cubic-bezier(.2,.8,.2,1); clip-path: polygon(14% 0, 88% 0, 100% 25%, 88% 100%, 12% 92%, 0 26%); }
.exterior { background: linear-gradient(135deg, #07070B, #24212d 56%, #0c0c13); }
.lining { background: radial-gradient(circle at 30% 30%, var(--ivory), transparent 22%), linear-gradient(135deg, var(--blush), #b52d78); color: var(--vinyl); transform: rotateY(180deg); }
.reversible-jacket.open .exterior { transform: rotateY(-180deg); }
.reversible-jacket.open .lining { transform: rotateY(0); }
.heart-clasp { position: absolute; left: 47vw; top: 50%; width: 6.8rem; height: 6rem; border: 0; cursor: pointer; background: radial-gradient(circle at 30% 30%, var(--ivory), var(--chrome) 38%, #9aa6b4 60%, var(--mint)); color: var(--vinyl); font: 900 .65rem var(--mono); clip-path: path("M3 24 C3 6 24 0 34 16 C45 0 66 6 66 24 C66 43 34 60 34 60 C34 60 3 43 3 24 Z"); filter: drop-shadow(0 0 24px rgba(156,255,218,.45)); animation: pulseClasp 2.2s infinite; }

.accessory-rack { display: flex; gap: 1rem; align-items: flex-start; margin-left: -4vw; transform: rotate(-3deg); }
.speech-tag { min-width: 10rem; padding: 1.2rem; background: var(--chrome); color: var(--vinyl); font: 900 1.1rem var(--mono); text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% 78%, 68% 78%, 58% 100%, 48% 78%, 0 78%); animation: clack 3s ease-in-out infinite; }
.speech-tag:nth-child(2) { animation-delay: .3s; }.speech-tag:nth-child(3) { animation-delay: .6s; }.speech-tag:nth-child(4) { animation-delay: .9s; }
.speech-tag.ruby { background: var(--ruby); color: var(--ivory); }.speech-tag.mint { background: var(--mint); }.speech-tag.ivory { background: var(--ivory); }
.compact { margin-left: 38vw; margin-top: 4rem; width: min(25rem, 38vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 40% 30%, var(--ivory), var(--chrome) 33%, var(--lilac) 54%, #777f90); color: var(--vinyl); box-shadow: inset 0 0 2rem rgba(7,7,11,.35), 0 0 4rem rgba(201,184,255,.28); transform-style: preserve-3d; transition: transform .15s; }
.compact-lid { position: absolute; inset: 5%; border-radius: 50%; border: 1px dashed rgba(7,7,11,.35); display: grid; place-items: start center; padding-top: 1.4rem; font-family: var(--mono); text-transform: uppercase; }

.archive-sleeves { display: flex; gap: 1.2rem; width: 62vw; margin-left: 2vw; }
.sleeve { min-height: 20rem; flex: 1; padding: 1.2rem; color: var(--ivory); background: linear-gradient(145deg, rgba(201,184,255,.32), rgba(217,225,234,.08)); border: 1px solid rgba(217,225,234,.34); clip-path: polygon(0 8%, 88% 0, 100% 92%, 10% 100%); }
.open-note { background: var(--ivory); color: var(--vinyl); transform: rotate(-4deg); }
.pearl-pin { position: absolute; left: 52vw; bottom: 16vh; width: 8rem; height: 8rem; border: 2px solid var(--chrome); border-radius: 50%; animation: orbit 7s linear infinite; }
.pearl-pin i { position: absolute; width: 1rem; height: 1rem; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 12px var(--ivory); }
.pearl-pin i:nth-child(1){left:50%;top:-.5rem}.pearl-pin i:nth-child(2){right:-.5rem;top:50%}.pearl-pin i:nth-child(3){left:50%;bottom:-.5rem}.pearl-pin i:nth-child(4){left:-.5rem;top:50%}

.final-mirror { margin-left: 8vw; min-height: 60vh; display: grid; align-content: center; background: linear-gradient(125deg, rgba(217,225,234,.75), rgba(7,7,11,.45), rgba(201,184,255,.38)); border-radius: 48% 48% 8% 8%; border: 1px solid var(--chrome); box-shadow: inset 0 0 60px rgba(255,244,225,.16); }
.closet-save { opacity: 0; color: var(--mint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; transform: translateY(-1rem); transition: .5s; }
.final-mirror.saved .closet-save { opacity: 1; transform: translateY(0); }

.floating-note { position: fixed; z-index: 30; left: 0; top: 0; transform: translate(-50%, -50%) scale(.8) rotate(-8deg); pointer-events: none; opacity: 0; background: var(--ivory); color: var(--vinyl); padding: .8rem 1rem; font-family: var(--hand); box-shadow: 5px 5px 0 var(--blush); transition: opacity .2s, transform .2s; }
.floating-note.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-8deg); }

@keyframes shine { 0%, 55% { translate: -80% 0; } 80%, 100% { translate: 95% 0; } }
@keyframes buckleIn { from { transform: translateX(-80vw) rotate(-18deg); } to { transform: translateX(0) rotate(0); } }
@keyframes tagSwing { 0%,100% { rotate: -7deg; } 50% { rotate: 7deg; } }
@keyframes rackDrift { 0%,100% { translate: 0 0; } 50% { translate: 8vw 1rem; } }
@keyframes pulseClasp { 0%,100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes clack { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(.6rem) rotate(2deg); } }
@keyframes orbit { to { rotate: 360deg; } }

@media (max-width: 820px) {
  .mirror-column { left: auto; right: -5rem; width: 12rem; opacity: .65; }
  .object-nav { width: calc(100vw - 2rem); }
  .scene { padding: 7rem 1rem 4rem; }
  .garment-panel, .pvc-bag, .reversible-jacket, .compact, .final-mirror { width: calc(100vw - 2rem); margin-left: 0; }
  .zipper-widget, .heart-clasp, .care-label { left: auto; right: 1rem; }
  .archive-sleeves { width: 100%; flex-direction: column; }
  .accessory-rack { flex-wrap: wrap; margin-left: 0; }
}