@font-face {
  font-family: Manrope;
  src: url('./font-3ae11c49db04.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0b090b;
  --paper: #e7ded3;
  --rose: #b76579;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); }
body { color: var(--paper); font-family: Manrope, 'Avenir Next', Avenir, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2 { margin: 0; }
img { display: block; width: 100%; height: auto; }
::selection { background: var(--rose); color: var(--ink); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 14px 20px;
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; outline: 2px solid var(--rose); outline-offset: 4px; }
.visual-story:focus { outline: none; }

.opening, .wardrobe { position: relative; }
.opening-image, .glass-image, .wardrobe-image { aspect-ratio: 3 / 2; }
.paper-image { aspect-ratio: 3; }
.closing { position: relative; }
.closing-image { aspect-ratio: 1; }
.anchor-alias { position: absolute; top: 0; }