:root {
  --pink: #b84d85;      /* sampled from the artwork's background */
  --pink-deep: #a8417a;
  --ink: #231f20;       /* woodcut ink */
  --type: "American Typewriter", "Courier New", Courier, monospace;
  /* Artwork fills ~22% of the image's width and ~74% of its height.
     Size the image so the art fits ~88% of the width and ~80% of the
     height, whichever is tighter. The flat pink around it blends into
     the page colour, so no cropping is ever needed. */
  --art: min(390vw, 206vh);
}
@supports (height: 1dvh) {
  :root { --art: min(390vw, 206dvh); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--pink);
  color: var(--ink);
  font-family: var(--type);
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: fixed;
  inset: 0;
  background: var(--pink) url("bg.webp") center / var(--art) auto no-repeat;
}

/* ---------- burger ---------- */
.burger {
  position: fixed;
  z-index: 30;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 6px;
  -webkit-tap-highlight-color: transparent;
}
.burger span {
  display: block;
  width: 30px;
  height: 3px;
  background: var(--ink);
  border-radius: 1px;
  transition: transform .25s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.burger:focus-visible { outline: 2px dashed var(--ink); outline-offset: 2px; }

/* ---------- side menu ---------- */
.menu {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  width: min(320px, 82vw);
  padding: calc(max(16px, env(safe-area-inset-top)) + 72px) 32px 32px max(32px, env(safe-area-inset-left));
  background: var(--pink-deep);
  border-right: 3px solid var(--ink);
  display: flex;
  flex-direction: column;
  transform: translateX(-105%);
  transition: transform .3s ease;
}
.menu[hidden] { display: flex; visibility: hidden; }
.menu.open { transform: none; visibility: visible; }

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li + li { margin-top: 18px; }
.tba {
  font-size: 1.6rem;
  letter-spacing: .04em;
  opacity: .55;
}
.menu-foot {
  margin: auto 0 0;
  font-size: .85rem;
  opacity: .7;
}

.scrim {
  position: fixed;
  z-index: 10;
  inset: 0;
  background: rgba(35, 31, 32, .25);
  opacity: 0;
  transition: opacity .3s ease;
}
.scrim[hidden] { display: block; visibility: hidden; }
.scrim.open { opacity: 1; visibility: visible; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .menu, .scrim, .burger span { transition: none; }
}