/* The roll-up menu: a hotel menu on a deep green panel, covered by a sheet of thick cream paper with Menu printed on
   it, on a black page. The paper is drawn in WebGL: pressed, it rolls up from the bottom into a real roll. */
:root {
  --page: #000000;          /* the page */
  --panel: #173a31;         /* the menu under the paper */
  --panel-ink: #f2e8d2;     /* the words of the menu */
  --panel-muted: #9fb8a9;   /* the small lines under them */
  --brass: #d8b46e;         /* the voice pointed at, and the Book button */
  --paper: #f3ead6;         /* the front of the paper */
  --paper-back: #dcc497;    /* the back of the paper, seen on the roll */
  --print: #1d4237;         /* the word printed on the paper */
  --focus: #f2e8d2;         /* the focus ring */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--panel-ink);
  font-family: 'Figtree Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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;
  place-items: center;
  padding: 32px 16px;
}

.roll {
  position: relative;
  width: min(360px, 100%);
  height: 480px;
}

/* ---------------------------------------------------------------- the menu, under the paper */
.roll__menu {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: end;
  gap: 22px;
  padding: 0 30px 30px;
  border-radius: 12px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    var(--panel);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}

.roll__list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.item {
  display: grid;
  padding: 7px 0 8px;
  border-bottom: 1px solid rgba(242, 232, 210, 0.12);
  outline-offset: 4px;
}

.item__name {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  font-variation-settings: 'opsz' 72;
  line-height: 1.05;
  letter-spacing: -0.015em;
  transition: color 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.item__note {
  margin-top: 3px;
  color: var(--panel-muted);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (hover: hover) and (pointer: fine) {
  .item:hover .item__name {
    color: var(--brass);
    font-style: italic;
    transform: translateX(6px);
  }
}

.item:focus-visible {
  outline: 2px solid var(--focus);
  border-radius: 4px;
}

.item[aria-current='page'] .item__name {
  color: var(--brass);
  font-style: italic;
}

.book {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  padding: 0 18px 0 22px;
  border-radius: 25px;
  background: var(--brass);
  color: #1c2a22;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: background-color 0.25s ease;
}

.book svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@media (hover: hover) and (pointer: fine) {
  .book:hover {
    background: var(--panel-ink);
  }

  .book:hover svg {
    transform: translateX(3px);
  }
}

.book:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- the paper */
/* the canvas reaches a little beyond the panel: the roll, nearer the eye, looks a touch bigger */
.roll__paper {
  position: absolute;
  left: -24px;
  top: -24px;
  width: calc(100% + 48px);
  height: calc(100% + 48px);
  pointer-events: none;
}

/* without WebGL: a plain sheet that slides up */
.roll__plain {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border-radius: 12px;
  background: var(--paper);
  color: var(--print);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-size: 92px;
  font-style: italic;
  pointer-events: none;
}

.no-gl .roll__plain {
  display: grid;
}

.no-gl .roll__paper {
  display: none;
}

/* the grip: the whole sheet while it is down, the band of the roll once it is up */
.roll__grip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.roll__grip:active {
  cursor: grabbing;
}

.roll__grip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .item__name,
  .book,
  .book svg {
    transition: none;
  }
}