/* The menu to leaf through: a cream paper menu with a green cover, on a white page. */
:root {
  --page: #ffffff;          /* the page of the site */
  --paper: #fbf6ec;         /* the menu's paper */
  --ink: #2b2420;
  --muted: #8a7e72;
  --cover: #1f3a2e;         /* the cover */
  --gold: #d9b46a;
  --w: min(300px, calc((100vw - 48px) / 2));   /* one page's width */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
}

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

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

.menu {
  display: grid;
  justify-items: center;
  gap: 22px;
}

/* ---------------------------------------------------------------- the book */
/* open on two pages: the spine is in the middle; the sheets hang from it and turn round it */
.book {
  position: relative;
  width: calc(var(--w) * 2);
  height: calc(var(--w) * 1.4);
  perspective: 1900px;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

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

.sheet {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--w);
  height: 100%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}

.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--paper);
  border-radius: 2px 8px 8px 2px;
  box-shadow: 0 14px 30px -20px rgba(43, 36, 32, 0.45);
}

/* the paper curves into the spine */
.face::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(60, 40, 20, 0.12), rgba(60, 40, 20, 0) 14%);
  pointer-events: none;
}

.face--back {
  transform: rotateY(180deg);
  border-radius: 8px 2px 2px 8px;
}

.face--back::before {
  background: linear-gradient(to left, rgba(60, 40, 20, 0.12), rgba(60, 40, 20, 0) 14%);
}

/* the light on a page as it turns: it darkens towards the edge-on moment */
.face__light {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(30, 20, 10, 0.5), rgba(30, 20, 10, 0.1));
  opacity: 0;
  pointer-events: none;
}

.face--back .face__light {
  background: linear-gradient(to right, rgba(30, 20, 10, 0.5), rgba(30, 20, 10, 0.1));
}

/* the shadow a turning page throws on the page below */
.book__shade {
  position: absolute;
  top: 0;
  width: var(--w);
  height: 100%;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}

.book__shade--right {
  left: 50%;
  background: linear-gradient(to right, rgba(40, 25, 10, 0.4), rgba(40, 25, 10, 0) 55%);
}

.book__shade--left {
  left: 0;
  background: linear-gradient(to left, rgba(40, 25, 10, 0.4), rgba(40, 25, 10, 0) 55%);
}

/* ---------------------------------------------------------------- the pages */
.page {
  position: relative;
  height: 100%;
  padding: calc(var(--w) * 0.09) calc(var(--w) * 0.085);
  font-size: calc(var(--w) * 0.05);
}

.page__kicker {
  margin: 0;
  color: var(--muted);
  font-size: 0.78em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.page__title {
  margin: 0.15em 0 0.6em;
  font-size: 2.1em;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.dish {
  margin: 0 0 0.85em;
}

.dish__line {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
  margin: 0;
  font-size: 1.12em;
  font-weight: 600;
}

.dish__line span:first-child {
  flex: 1;
}

.dish__what {
  margin: 0.1em 0 0;
  color: var(--muted);
  font-style: italic;
}

.page__foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--w) * 0.05);
  margin: 0;
  color: var(--muted);
  font-size: 0.8em;
  font-style: italic;
  text-align: center;
}

/* the cover and the last page */
.face--cover {
  background: var(--cover);
  color: var(--gold);
}

.face--cover::before {
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0) 12%);
}

.cover {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 0.4em;
  padding: 0 1em;
  font-size: calc(var(--w) * 0.05);
  text-align: center;
}

.cover svg {
  width: 34%;
  height: auto;
  margin-bottom: 0.6em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cover__small {
  margin: 0;
  font-size: 0.85em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.cover__name {
  margin: 0;
  font-size: 2.6em;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.thanks {
  display: grid;
  height: 100%;
  place-content: center;
  justify-items: center;
  gap: 0.5em;
  padding: 0 1.4em;
  font-size: calc(var(--w) * 0.05);
  text-align: center;
}

.thanks__big {
  margin: 0;
  font-size: 3em;
  font-style: italic;
  line-height: 1;
}

.thanks p {
  margin: 0;
}

/* ---------------------------------------------------------------- under the book */
.leaf {
  display: flex;
  align-items: center;
  gap: 18px;
}

.leaf__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #e3dbcf;
  border-radius: 50%;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.3s, background-color 0.2s;
}

.leaf__btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.leaf__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

@media (hover: hover) {
  .leaf__btn:not(:disabled):hover {
    background: #f6f1e9;
  }
}

.leaf__where {
  min-width: 9em;
  margin: 0;
  font-size: 17px;
  font-style: italic;
  text-align: center;
}

.roll {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}

.roll > span {
  display: inline-block;
}

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

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

html[data-using='pointer'] .book:focus-visible,
html[data-using='pointer'] .leaf__btn:focus-visible {
  outline: none;
}

/* on a phone one page at a time: the spine is on the left edge */
@media (max-width: 639px) {
  :root {
    --w: min(360px, calc(100vw - 40px));
  }

  .book {
    width: var(--w);
  }

  .sheet,
  .book__shade--right {
    left: 0;
  }

  .book__shade--left {
    display: none;
  }
}

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