:root {
  --wall: #dfe6ea;
  --rod: #9aa6ad;
  --coral: #c9463a;
  --coral-deep: #9e3027;
  --thread: #fff7f2;
  --ink: #26323a;
  --link: #9e3027;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wall: #1b2328;
    --rod: #56636b;
    --coral: #c24437;
    --coral-deep: #8a2920;
    --ink: #dfe6ea;
    --link: #ee8a7f;
  }
}
:root[data-theme="dark"] {
  --wall: #1b2328; --rod: #56636b; --coral: #c24437; --coral-deep: #8a2920; --ink: #dfe6ea; --link: #ee8a7f;
}
:root[data-theme="light"] {
  --wall: #dfe6ea; --rod: #9aa6ad; --coral: #c9463a; --coral-deep: #9e3027; --ink: #26323a; --link: #9e3027;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--wall);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
}

.closet {
  min-height: 100vh;
  min-height: 100dvh;
  --w: min(520px, 100vw - 32px, (100dvh - 36px) * 0.625);
  padding: 12px 16px 24px;
  background:
    linear-gradient(var(--rod), var(--rod)) left 0 top calc(9px + var(--w) * 0.0475) / 100% 6px no-repeat,
    var(--wall);
}

.stage {
  position: relative;
  width: min(var(--w), 100%);
  margin: 0 auto;
  container-type: inline-size;
  transform-origin: 50% 3%;
  animation: settle 2.8s ease-out both;
}
@keyframes settle {
  0% { transform: rotate(4deg); }
  25% { transform: rotate(-2.5deg); }
  50% { transform: rotate(1.2deg); }
  75% { transform: rotate(-.4deg); }
  100% { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage { animation: none; }
}

.dress { display: block; width: 100%; height: auto; }
.hanger path { fill: none; stroke: var(--rod); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fabric { fill: var(--coral); }
.pleats path { stroke: var(--coral-deep); stroke-width: 2; opacity: .35; }
.sash { fill: var(--coral-deep); }

.skirt {
  position: absolute;
  left: 22%;
  width: 56%;
  top: 47%;
  text-align: center;
  color: var(--thread);
}
.skirt h1 {
  margin: 0;
  font-size: 13cqw;
  font-weight: normal;
  font-style: italic;
  letter-spacing: .01em;
}
.skirt p {
  margin: 2cqw 0 6cqw;
  font-size: 4.1cqw;
  line-height: 1.45;
  text-wrap: balance;
}

.tag {
  position: relative;
  display: inline-block;
  padding: 2.4cqw 3.6cqw 2.4cqw 7cqw;
  background: var(--thread);
  color: var(--coral-deep);
  font-size: 3.6cqw;
  text-decoration: none;
  clip-path: polygon(4cqw 0, 100% 0, 100% 100%, 4cqw 100%, 0 50%);
  transition: transform .15s;
}
.tag::before {
  content: "";
  position: absolute;
  left: 3.2cqw;
  top: 50%;
  width: 1.6cqw;
  height: 1.6cqw;
  margin-top: -.8cqw;
  border-radius: 50%;
  background: var(--coral);
}
.tag:hover { transform: rotate(-3deg); }
.tag:focus-visible, .skirt nav a:focus-visible { outline: 2px solid var(--thread); outline-offset: 3px; }

.skirt nav {
  margin-top: 7cqw;
  font-size: 3.4cqw;
}
.skirt nav a { color: var(--thread); }

/* legal pages */
.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 32px 16px 64px;
  line-height: 1.6;
}
.page a { color: var(--link); }
.page .back { display: inline-block; margin-bottom: 24px; }
.page h1 { font-weight: normal; font-style: italic; font-size: 2.2rem; margin: 0 0 4px; }
.page h2 { font-size: 1.2rem; margin: 2.2em 0 .4em; }
.page h3 { font-size: 1rem; margin: 1.6em 0 .3em; }
.page hr { border: 0; border-top: 1px solid var(--rod); margin: 2em 0; }
.page .table { overflow-x: auto; }
.page table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.page th, .page td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--rod); }