/* menu-book.css: menu books. Keep menu.css for the hero styles. */

/* Position settings. Change the numbers and refresh. */
.bk-stage {
  --cover-title-left: 19%;
  --cover-title-top: 50%;
  --menu-top: 11%;
  --menu-right: 8%;
  --rule-top: 34%;
  --rule-right: 8%;
  --tag-top: 38%;
  --tag-right: 8%;
  --head-align: left;
  --dish-pad: 5%;
}


/* Shelf */

.bk-shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 48px);
  padding: clamp(28px, 5vw, 60px) 16px;
  background: radial-gradient(ellipse 85% 70% at 50% 38%, #33251a 0%, #160f0a 68%, #070707 100%);
}

.bk-shelf-hint {
  width: 100%;
  margin: 0;
  text-align: center;
  color: #e9dfca;
  font-family: var(--font-heading);
  letter-spacing: .06em;
}

.bk-shelf-book {
  width: clamp(150px, 24vw, 230px);
  aspect-ratio: 1 / 1.39;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.bk-shelf-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1em;
  width: 100%;
  height: 100%;
  padding: 12%;
  box-sizing: border-box;
  text-align: center;
  border-radius: 3px 10px 10px 3px;
  background: linear-gradient(135deg, #232323, #0a0a0a);
  color: #fbcc05;
  box-shadow:
    inset 6px 0 0 rgba(255, 255, 255, .06),
    inset 8px 0 10px -6px #000,
    0 18px 30px -10px rgba(0, 0, 0, .8);
}

.bk-shelf-cover::before {
  content: "";
  position: absolute;
  inset: 5%;
  border: 1px solid rgba(251, 204, 5, .55);
  pointer-events: none;
}

.bk-shelf-cover img {
  width: 56%;
  height: auto;
}

.bk-shelf-title {
  font: 400 clamp(1rem, 2vw, 1.3rem)/1.2 var(--font-heading);
}

.bk-shelf-sub {
  font: 400 .75rem var(--font-heading);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #f5e6b0;
}


/* Full screen book */

.bk-stage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 4px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  background: radial-gradient(ellipse 85% 70% at 50% 38%, #33251a 0%, #160f0a 68%, #070707 100%);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.bk-stage.open {
  display: flex;
  animation: bk-in .35s ease;
}

@keyframes bk-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-stage.open {
    animation: none;
  }
}

.bk {
  position: relative;
  flex: none;
  width: calc(var(--W) * 2);
  height: var(--H);
  --tl: 0px;
  --tr: 0px;
  will-change: transform;
}

.bk.single {
  width: var(--W);
}

.bk-slot {
  position: absolute;
  top: 0;
  width: var(--W);
  height: var(--H);
}

.bk-slot:empty {
  visibility: hidden;
}

.bk-slot.l {
  left: 0;
  box-shadow:
    calc(var(--tl) * -1) 1px 0 #4a4a4a,
    calc(var(--tl) * -1 - 1px) 2px 0 #1c1c1c,
    0 22px 34px -12px rgba(0, 0, 0, .8);
}

.bk-slot.r {
  left: var(--W);
  box-shadow:
    var(--tr) 1px 0 #4a4a4a,
    calc(var(--tr) + 1px) 2px 0 #1c1c1c,
    0 22px 34px -12px rgba(0, 0, 0, .8);
}

.bk.single .bk-slot.r {
  left: 0;
}


/* Top nav and close button */

.bk-nav {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 60px 0;
  font-family: var(--font-heading);
  color: #e9dfca;
}

.bk-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.bk-tab {
  padding: 7px 14px;
  border-radius: 999px;
  
  
  color: #e9dfca;
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.bk-tab:hover,
.bk-tab[aria-current="true"] {
  color: var(--color-yellow);
  text-decoration: underline;
}

.bk-tab[aria-current="true"] {
  background: transparent;
}

.bk-jump {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
}

.bk-jump select {
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .3);
  background: #160f0a;
  color: #e9dfca;
  font: inherit;
}

.bk-close {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10;
  background: rgba(0, 0, 0, .35);
}


/* Pages: one flat grey, no patches or texture */

.page {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--W);
  height: var(--H);
  overflow: hidden;
  font-size: calc(var(--W) / 32);
  line-height: 1.3;
  color: #f2f2f2;
  font-family: var(--font-body);
  background: #2b2b2b;
}

.page::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pr {
  border-radius: 1px 6px 6px 1px;
}

.pl {
  border-radius: 6px 1px 1px 6px;
}

.pr::after {
  background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 4%, transparent 10%);
}

.pl::after {
  background: linear-gradient(to left, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 4%, transparent 10%);
}

.pg-in {
  position: absolute;
  top: 3.5%;
  bottom: 6.5%;
  overflow: hidden;
  background: none;
  box-shadow: none;
}

.pr .pg-in {
  left: 6%;
  right: 3.5%;
}

.pl .pg-in {
  left: 3.5%;
  right: 6%;
}

.pg-no {
  position: absolute;
  bottom: 2%;
  left: 0;
  right: 0;
  text-align: center;
  font: .8em var(--font-heading);
  color: #9a9a9a;
}

.ghost {
  opacity: .12;
}


/* Menu text */

.pg-h {
  margin: 0 0 .6em;
  padding: .25em 5%;
  font: 700 1.4em/1.15 var(--font-heading);
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: var(--head-align);
  color: #1c1c1c;
  background: #e9b44c;
}

.pg-rule {
  display: none;
}

.pg-note,
.pg-txt {
  padding: 0 5%;
  font-size: .9em;
  color: #d6d6d6;
  text-align: center;
  margin-bottom: .7em;
}

.pg-txt {
  text-align: left;
}

/* Dishes: slightly larger text and more space between dishes so they are easier to read.
   .45em is the tightest gap, used when deciding how many dishes fit on a page.
   --gx is extra space that menu-book.js adds to each page with height to spare
   (GAP_EXTRA in menu-book.js sets the most it can add). */
.dish {
  padding: 0 var(--dish-pad);
  margin-bottom: calc(.45em + var(--gx, 0px));
}

.dish .row {
  display: flex;
  align-items: baseline;
  gap: .5em;
}

.dish h4 {
  font: 600 1.06em/1.3 var(--font-heading);
  color: #f5f5f5;
}

.dish .dots {
  flex: 1;
  min-width: .6em;
  border-bottom: 1px dashed rgba(255, 255, 255, .5);
  transform: translateY(-.25em);
}

.dish .price {
  font: 700 1.08em var(--font-heading);
  color: #ffffff;
  white-space: nowrap;
}

.dish p {
  font-size: .9em;
  line-height: 1.35;
  color: #d9d9d9;
  margin-top: .2em;
}

.pg-end {
  text-align: center;
  padding-top: 22%;
}

.pg-end a {
  color: #e9b44c;
  font: 600 1.5em var(--font-heading);
}


/* Covers */

.cover {
  background: linear-gradient(135deg, #232323, #0a0a0a);
  color: #fbcc05;
}

.cover::before {
  content: "";
  position: absolute;
  inset: 3%;
  border: 1px solid rgba(251, 204, 5, .55);
  z-index: 1;
  pointer-events: none;
}

.cover .pg-in {
  inset: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6em;
  text-align: center;
}

.cover img {
  width: 64%;
  height: auto;
}

.cover .bk-title {
  font: 400 1.5em/1.2 var(--font-heading);
  color: #fbcc05;
  margin: 0;
}

.cover .ct {
  font: 400 1.05em var(--font-heading);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: #f5e6b0;
}

.cover.pl,
.cover.pr {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .04);
}


/* Front cover */

.cover.front {
  color: #2a2a2a;
  background-color: #e9b44c;
  background-image:
    linear-gradient(90deg, transparent 0, transparent 35%, #e9b44c 35%, #e9b44c 100%),
    linear-gradient(135deg, #2b2b2b, #161616);
  box-shadow: none;
}

.cover.front::before {
  display: none;
}

.cover.front::after {
  content: "ME\A NU";
  white-space: pre;
  inset: var(--menu-top) var(--menu-right) auto auto;
  font: 800 4.6em/.95 var(--font-heading);
  text-align: left;
  color: #2a2a2a;
  background: none;
}

.cover.front .pg-in {
  inset: 0;
  display: block;
  padding: 0;
  overflow: visible;
}

.cover.front .ct {
  display: none;
}

/* Book name up the side. Move it with --cover-title-left and --cover-title-top. */
.cover.front .bk-title {
  position: absolute;
  top: var(--cover-title-top);
  left: var(--cover-title-left);
  margin: 0;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  font: 800 1em/1 var(--font-heading);
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e9b44c;
}

.cover.front .pg-in::before {
  content: "";
  position: absolute;
  top: var(--rule-top);
  right: var(--rule-right);
  width: 16%;
  height: 2px;
  background: #2a2a2a;
}

.cover.front .pg-in::after {
  content: "Authentic Cantonese,\A Szechuan Style and\A North East Mainland\A of China Cuisine";
  white-space: pre;
  position: absolute;
  top: var(--tag-top);
  right: var(--tag-right);
  text-align: right;
  font: 700 1.05em/1.5 var(--font-heading);
  color: #2a2a2a;
}

.cover.front img {
  position: absolute;
  right: 9%;
  bottom: 9%;
  width: 20%;
  height: auto;
}

/* Chinese cover text, used when the language toggle is on Chinese */
:lang(zh-CN) .cover.front::after {
  content: "菜\A 单";
}

:lang(zh-CN) .cover.front .pg-in::after {
  content: "正宗粤菜、川菜\A 及中国东北菜";
}


/* Page turn layers */

.bk-turn {
  position: absolute;
  top: 0;
  width: var(--W);
  height: var(--H);
  z-index: 5;
  pointer-events: none;
}

.bk-base,
.bk-fw,
.bk-flap,
.bk-fc {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--W);
  height: var(--H);
}

.bk-fw {
  z-index: 2;
  filter: drop-shadow(-3px 5px 7px rgba(0, 0, 0, .4));
}

.bk-flap {
  transform-origin: 0 0;
  will-change: transform, clip-path;
}

.bk-fc {
  background: #262626;
  transform: scaleX(-1);
}

.bk-sh,
.bk-fsh {
  position: absolute;
  left: 0;
  top: -1600px;
  height: 3200px;
  width: calc(var(--W) * .2);
  transform-origin: 0 1600px;
  pointer-events: none;
  will-change: transform;
}

.bk-sh {
  background: linear-gradient(to right, rgba(0, 0, 0, .55), rgba(0, 0, 0, .18) 45%, transparent);
}

.bk-fsh {
  width: calc(var(--W) * .32);
  background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(255, 255, 255, .14) 30%, rgba(0, 0, 0, .08) 75%, transparent);
}


/* Edge grab zones */

.bk-edge {
  position: absolute;
  top: 0;
  z-index: 8;
  display: none;
  width: var(--es);
  height: var(--H);
  cursor: grab;
  touch-action: none;
}

.bk-edge.on {
  display: block;
}

.bk-edge:active {
  cursor: grabbing;
}

.bk.busy .bk-edge {
  pointer-events: none;
}


/* Corner grab zones */

.bk-corner {
  position: absolute;
  z-index: 9;
  display: none;
  width: var(--cs);
  height: var(--cs);
  cursor: grab;
  touch-action: none;
}

.bk-corner.on {
  display: block;
}

.bk-corner:active {
  cursor: grabbing;
}

.bk-corner::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  transition: transform .2s, opacity .2s;
  background: linear-gradient(135deg, transparent 48%, rgba(0, 0, 0, .35) 50%, #e9b44c 52%, #f4cf7d 100%);
  box-shadow: -2px -2px 5px rgba(0, 0, 0, .25);
}

.bk-corner[data-side="r"][data-cy="1"]::after {
  right: 0;
  bottom: 0;
}

.bk-corner[data-side="r"][data-cy="0"]::after {
  right: 0;
  top: 0;
  transform: scaleY(-1);
}

.bk-corner[data-side="l"][data-cy="1"]::after {
  left: 0;
  bottom: 0;
  transform: scaleX(-1);
}

.bk-corner[data-side="l"][data-cy="0"]::after {
  left: 0;
  top: 0;
  transform: scale(-1, -1);
}

.bk-corner:hover::after {
  filter: brightness(1.05);
}

.bk.busy .bk-corner {
  pointer-events: none;
}

.bk.busy .bk-corner::after {
  opacity: 0;
}


/* Controls */

.bk-ctrl {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e9dfca;
  font-family: var(--font-heading);
}

.bk-ctrl span {
  min-width: 8em;
  text-align: center;
  font-size: .9rem;
}

.bk-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: color .2s, border-color .2s, opacity .2s;
}

.bk-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bk-btn:hover:not(:disabled) {
  color: var(--color-yellow);
  border-color: var(--color-yellow);
}

.bk-btn:disabled {
  opacity: .28;
  cursor: default;
}


/* Phones */

@media (max-width: 700px) {
  .bk-stage {
    gap: 8px;
    padding: 0 2px 8px;
  }

  .bk-nav {
    padding: 8px 56px 0 10px;
    gap: 6px 10px;
  }

  .bk-tab {
    padding: 6px 11px;
    font-size: .8rem;
  }

  .bk-jump {
    display: none;
  }

  .pr .pg-in {
    left: 5%;
    right: 2.5%;
  }

  .pl .pg-in {
    left: 2.5%;
    right: 5%;
  }

  .cover.front .pg-in {
    inset: 0;
  }
}


/* BROWSE button (all screens): says Browse in plain body text, translucent, no icon, no border.
   Only the button changes. The menu panel that opens is untouched.
   The !important flags are needed because menu-book.js sets styles inline. */
.bk-menu {
  width: auto !important;
  min-width: 56px;
  height: 42px !important;
  padding: 0 16px !important;
  border-radius: 0 !important;
  border: 0 !important;
  background: rgba(0, 0, 0, .38) !important;
  transition: background .2s;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.bk-menu svg {
  display: none;
}

.bk-menu::before {
  content: "Browse";
  font: 400 .9rem/1 var(--font-body);
  letter-spacing: normal;
  text-transform: none;
}

:lang(zh-CN) .bk-menu::before {
  content: "浏览";
  letter-spacing: normal;
}

/* Hover: slightly darker, text stays white (no yellow) */
.bk-menu:hover:not(:disabled) {
  background: rgba(0, 0, 0, .6) !important;
  color: #fff !important;
  border: 0 !important;
}


/* BROWSE button position on phones and portrait tablets (single page layout).
   The button sits directly above the page number, in the middle of the page.
   Content pages leave room for it at the bottom, so no dish sits under the button.
   menu-book.js measures pages with this same CSS, so a dish that no longer fits
   moves to the next page by itself.

   To move the button up or down, change the 24px in --nb-bottom.
   To change how much room the pages leave, change the 66px in the .pg-in rule.
   Keep the 66px at least 42px bigger than the 24px so the writing stays clear.
   (Literal values are used in the .pg-in rule because the measuring box sits
   outside .bk-stage and cannot read variables set on it.) */
@media (max-width: 899px) {
  .bk-stage {
    --nb-bottom: calc(2% + 24px);
  }

  .bk-menu {
    height: 34px !important;
    padding: 0 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: var(--nb-bottom) !important;
  }

  /* The panel opens upward from the button. Its own styling is unchanged. */
  .bk-nav {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    top: auto !important;
    bottom: calc(var(--nb-bottom) + 42px) !important;
    max-height: calc(100% - 140px);
    overflow-y: auto;
  }

  /* Room for the button at the bottom of every content page (covers are left alone) */
  .page:not(.cover) .pg-in {
    bottom: calc(2% + 66px);
  }

  .pg-no {
    left: 0;
    right: 0;
    text-align: center;
  }
}


/* Helpers */

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

.bk-measure {
  position: absolute;
  left: -9999px;
  top: 0;
  visibility: hidden;
  --W: 400px;
  --H: 556px;
  --dish-pad: 5%;
}

.bk-measure .page {
  position: relative;
}