:root {
  --ink: #24242c;
  --paper: #f5f0e5;
}

@font-face {
  font-family: "Gloria Hallelujah";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/gloria-hallelujah.woff2") format("woff2");
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: "Gloria Hallelujah", "Segoe Print", "Comic Sans MS", cursive;
}

/* Full-viewport crumpled paper, behind everything. */
.paper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* One fixed-proportion sheet that scales to fit the viewport. */
.sheet {
  width: min(640px, 100vw - 2rem, (100vh - 2rem) * 300 / 380);
  aspect-ratio: 300 / 380;
  display: grid;
  grid-template-rows: 30% 45% 25%;
  container-type: inline-size;
}

.sheet h1 {
  margin: 0;
  align-self: center;
  justify-self: center;
  font-weight: 400;
  font-size: 13vw;
  font-size: 13cqw;
  line-height: 1;
  transform: rotate(-2deg);
}

.arrows {
  display: block;
  width: 100%;
  height: 100%;
}

.arrows path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#wobble);
}

.sheet nav {
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding: 0 6%;
}

.sheet nav a {
  position: relative;
  display: inline-block;
  padding: 0 0.55em;
  font-size: 5.5vw;
  font-size: 5.5cqw;
  line-height: 1.5;
  color: inherit;
  text-decoration: none;
  outline: none;
}

.sheet nav a:nth-child(1) { transform: rotate(-2deg); }
.sheet nav a:nth-child(2) { transform: rotate(1.5deg); margin-top: 0.25em; }
.sheet nav a:nth-child(3) { transform: rotate(-1deg); }

.sheet nav a svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sheet nav a path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5px;
  stroke-width: 0.87cqw;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: url(#wobble);
}

/* Hover and keyboard focus scribble the box in. No transition. */
.sheet nav a:not([aria-disabled]):hover path,
.sheet nav a:focus-visible path {
  fill: url(#hatch);
  stroke-width: 6px;
  stroke-width: 1.05cqw;
}

.sheet nav a[aria-disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.availability {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  white-space: nowrap;
}