/* Signature background surfaces. The doodle tile is cropped from the real menu poster. */
:root {
  --pattern-doodles: url("../assets/pattern-doodles.png"); /* @kind other */
  --pattern-doodles-alt: url("../assets/pattern-doodles-2.png"); /* @kind other */
  --pattern-tile-size: 380px;
  --pattern-opacity: 0.55; /* @kind other */
}

.px-surface-doodle {
  background-color: var(--ink-900);
  background-image: var(--pattern-doodles);
  background-repeat: repeat;
  background-size: var(--pattern-tile-size) auto;
}

.px-surface-doodle-soft {
  background-color: var(--ink-900);
  background-image: linear-gradient(rgba(9, 9, 9, 0.55), rgba(9, 9, 9, 0.55)), var(--pattern-doodles);
  background-repeat: repeat;
  background-size: auto, var(--pattern-tile-size) auto;
}

.px-surface-brand {
  background: var(--orange-500);
  color: var(--text-on-brand);
}

.px-protect-bottom::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: var(--gradient-protect);
  pointer-events: none;
}