/* The jack-in-the-box menu: a lithographed tin box with a crank, and a menu card on a steel spring inside it.
   The whole drawing is measured in units (--u, set by the script from the size of the screen): the frame is 380 units
   wide and 620 tall, the box sits at its bottom. The box, the lid and the spring are SVG drawn by the script in the
   same units; the card is HTML, moved by the script. */
:root {
  --page: #ffffff;          /* the page */
  --tin-red: #cf3b2c;       /* the front of the box */
  --tin-red-dark: #b02f22;  /* the diamonds printed on it */
  --tin-blue: #2f6299;      /* the side of the box */
  --tin-blue-dark: #244e7c; /* the stripes on the side */
  --tin-yellow: #f1b63b;    /* the lid and the bands */
  --tin-yellow-dark: #c8891b;
  --lining: #e7d3a3;        /* the inside of the lid, bare tin */
  --inside: #2a1610;        /* the dark inside of the box */
  --steel: #c3c9d0;         /* the spring and the crank */
  --steel-dark: #59606a;
  --knob: #f3e2bf;          /* the wooden knob of the crank */
  --card: #fff4de;          /* the menu card */
  --card-edge: #cf3b2c;     /* its tin border */
  --ink: #2a1712;           /* the words */
  --accent: #cf3b2c;        /* the section under the pointer, and the one you are on */
  --focus: #1d1a17;         /* the ring of the keyboard focus */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 16px;
}

/* ---------------------------------------------------------------- the frame */
.jack__frame {
  --u: 1px;                 /* set by the script */
  position: relative;
  width: calc(var(--u) * 380);
  height: calc(var(--u) * 620);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.jack__back,
.spring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* the jack lives inside the box: the script clips this layer at the front edge of the box */
.jack__out {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the box, the lid, the inside */
.tin-red { fill: var(--tin-red); }
.tin-red-dark { fill: var(--tin-red-dark); }
.tin-blue { fill: var(--tin-blue); }
.tin-blue-dark { fill: var(--tin-blue-dark); }
.tin-yellow { fill: var(--tin-yellow); }
.tin-yellow-dark { fill: var(--tin-yellow-dark); }
.stop-inside-lit { stop-color: color-mix(in oklab, var(--inside) 70%, var(--tin-red)); }
.stop-inside { stop-color: var(--inside); }
.stop-lining-lit { stop-color: color-mix(in oklab, var(--lining) 60%, #ffffff); }
.stop-lining { stop-color: var(--lining); }
.stop-lining-dark { stop-color: color-mix(in oklab, var(--lining) 70%, var(--tin-yellow-dark)); }

.box-rim {
  fill: none;
  stroke: color-mix(in oklab, var(--tin-yellow) 70%, var(--tin-yellow-dark));
  stroke-width: 3;
  stroke-linejoin: round;
}

.lid-top {
  fill: var(--tin-yellow);
  stroke: var(--tin-yellow-dark);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.lid-under {
  stroke: color-mix(in oklab, var(--lining) 60%, var(--tin-yellow-dark));
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.lid-lip {
  fill: var(--tin-yellow-dark);
  stroke: color-mix(in oklab, var(--tin-yellow-dark) 80%, #000000);
  stroke-width: 1;
  stroke-linejoin: round;
}

.lid-line {
  fill: none;
  stroke: var(--tin-red);
  stroke-width: 2.4;
  stroke-linejoin: round;
}

.box {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.box__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.face-front {
  fill: url(#jack-diamonds);
}

.face-side {
  fill: url(#jack-stripes);
}

.face-band {
  fill: var(--tin-yellow);
}

.face-band-dark {
  fill: var(--tin-yellow-dark);
}

.face-edge {
  fill: none;
  stroke: color-mix(in oklab, var(--tin-red-dark) 70%, #000000);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.face-focus {
  fill: none;
  stroke: var(--focus);
  stroke-width: 3.5;
  stroke-linejoin: round;
  opacity: 0;
}

.box:focus-visible .face-focus {
  opacity: 1;
}

.crank-arm {
  fill: none;
  stroke: var(--steel-dark);
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crank-arm-shine {
  fill: none;
  stroke: var(--steel);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.crank-knob {
  fill: none;
  stroke: color-mix(in oklab, var(--knob) 55%, #7a4b22);
  stroke-width: 12;
  stroke-linecap: round;
}

.crank-knob-face {
  fill: none;
  stroke: var(--knob);
  stroke-width: 8.5;
  stroke-linecap: round;
}

.crank-boss {
  fill: var(--steel-dark);
}

/* the plate printed on the front with the word on it */
.box__plate {
  position: absolute;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--u) * 24);
  background: var(--card);
  box-shadow:
    inset 0 0 0 calc(var(--u) * 2.5) var(--tin-yellow),
    inset 0 0 0 calc(var(--u) * 4) var(--tin-yellow-dark),
    0 calc(var(--u) * 1.5) 0 color-mix(in oklab, var(--tin-red-dark) 60%, #000000);
}

.box__words {
  display: grid;
  height: 100%;
  width: 100%;
}

.box__word {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  font-size: calc(var(--u) * 25);
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0.005em;
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
  color: var(--ink);
}

/* Close waits under the plate (the script takes it over from here) */
.box__word + .box__word {
  transform: translateY(110%);
}


/* ---------------------------------------------------------------- the spring */
.spring__back,
.spring__edge,
.spring__front,
.spring__shine {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.spring__back {
  stroke: var(--steel-dark);
  stroke-width: 4;
}

.spring__edge {
  stroke: color-mix(in oklab, var(--steel-dark) 70%, #000000);
  stroke-width: 6;
}

.spring__front {
  stroke: var(--steel);
  stroke-width: 4;
}

.spring__shine {
  stroke: #ffffff;
  stroke-width: 1.2;
  opacity: 0.85;
}

/* ---------------------------------------------------------------- the card */
.card {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u) * 228);
  height: calc(var(--u) * 300);
  transform-origin: 50% 100%;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  visibility: hidden;
}

.card.is-out {
  visibility: visible;
}

.card.is-held {
  cursor: grabbing;
}

.card__body {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--u) * 282);
  border-radius: calc(var(--u) * 22);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .5 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / calc(var(--u) * 240),
    radial-gradient(120% 70% at 30% 0%, color-mix(in oklab, var(--card) 70%, #ffffff), var(--card) 60%, color-mix(in oklab, var(--card) 88%, var(--tin-yellow-dark)));
  box-shadow:
    inset 0 0 0 calc(var(--u) * 6) var(--card-edge),
    inset 0 0 0 calc(var(--u) * 8) var(--tin-yellow),
    inset 0 0 0 calc(var(--u) * 9.5) var(--tin-yellow-dark),
    0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(40, 18, 8, 0.16),
    0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(40, 18, 8, 0.18);
}

.card__list {
  position: absolute;
  inset: calc(var(--u) * 21) calc(var(--u) * 18);
  display: grid;
  grid-template-rows: repeat(5, 1fr);
}

.card__list li {
  display: grid;
  position: relative;
}

.card__list li + li::before {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 0;
  height: calc(var(--u) * 1.5);
  border-radius: 2px;
  background: color-mix(in oklab, var(--card) 70%, var(--tin-yellow-dark));
}

.item {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 12);
  outline: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.item__label {
  display: block;
  font-size: calc(var(--u) * 25);
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: 0.005em;
  white-space: nowrap;
  font-variation-settings: 'opsz' 48, 'SOFT' 100, 'WONK' 1;
  color: var(--ink);
  transition: color 0.18s ease;
}

.item__label .ch {
  display: inline-block;
  white-space: pre;
}

.item__here {
  display: none;
  font-size: calc(var(--u) * 9.5);
  font-weight: 640;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variation-settings: 'opsz' 9, 'SOFT' 50, 'WONK' 0;
  color: var(--accent);
}

.item[aria-current='page'] .item__here {
  display: block;
}

.item[aria-current='page'] .item__label {
  color: var(--accent);
}

@media (hover: hover) {
  .item:hover .item__label {
    color: var(--accent);
  }
}

.item:focus-visible {
  box-shadow: inset 0 0 0 calc(var(--u) * 2.5) var(--focus);
}

.item:focus-visible .item__label {
  color: var(--accent);
}

.ruff {
  position: absolute;
  left: calc(50% - var(--u) * 60);
  bottom: 0;
  width: calc(var(--u) * 120);
  height: calc(var(--u) * 30);
  overflow: visible;
}

.ruff .pleat-a { fill: var(--tin-red); }
.ruff .pleat-b { fill: var(--card); }
.ruff .pleat-line {
  fill: none;
  stroke: color-mix(in oklab, var(--tin-red-dark) 70%, #000000);
  stroke-width: 1;
  stroke-linejoin: round;
}