/* Little Polo's visual identity, sampled from its printed menus and mascot. */
:root {
  --ink: #694336;
  --espresso: #60392d;
  --coffee: #805448;
  --caramel: #c78c4c;
  --terracotta: #c8737d;
  --terracotta-dark: #935048;
  --cream: #f7eedc;
  --cream-warm: #f1e4cf;
  --sand: #e6d3b4;
  --white: #fffaf0;
  --muted: #9b7d70;
  --ink-soft: #80665a;
  --success: #7e916e;
  --pink: #efc1c2;
  --pink-deep: #d98d98;
  --matcha: #a5ae88;
  --line: rgba(96, 57, 45, .17);
  --shadow-sm: 0 5px 16px rgba(96, 57, 45, .08);
  --shadow-md: 0 14px 32px rgba(96, 57, 45, .12);
  --shadow-lg: 0 24px 58px rgba(96, 57, 45, .15);
}

body {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 8% 0%, rgba(230, 166, 174, .17), transparent 27rem),
    radial-gradient(ellipse at 94% 8%, rgba(159, 169, 130, .13), transparent 24rem),
    repeating-linear-gradient(0deg, rgba(96, 57, 45, .014) 0 1px, transparent 1px 5px);
  color: var(--ink);
}

::selection {
  background: var(--pink);
  color: var(--espresso);
}

.announcement {
  background: var(--espresso);
  color: var(--cream);
}

.announcement a:hover,
.footer a:hover {
  color: var(--pink);
}

.site-header,
.site-header.scrolled {
  border-color: var(--line);
  background: rgba(248, 240, 222, .94);
}

.site-header .brand-logo-circle {
  background: #000;
  box-shadow: 0 0 0 2px rgba(96, 57, 45, .12), 0 5px 14px rgba(96, 57, 45, .14);
}

.site-header .brand-logo-circle img {
  object-position: 50% 82%;
}

.brand-wordmark small {
  color: var(--terracotta-dark);
}

.hero {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(231, 164, 174, .27), transparent 19rem),
    radial-gradient(ellipse at 89% 15%, rgba(166, 176, 136, .17), transparent 18rem),
    linear-gradient(145deg, #fbf3e3, #f4e7d2);
}

.hero-logo {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  box-shadow: 0 0 0 5px rgba(217, 141, 152, .55), 0 12px 24px rgba(96, 57, 45, .16);
  transform: none;
}

.hero-logo img,
.hero-logo img:hover {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 82%;
  transform: none;
}

.page-hero::before,
.little-story::before,
.menu-page .order-hero::before {
  position: absolute;
  display: block;
  width: clamp(10rem, 20vw, 17rem);
  height: clamp(10rem, 20vw, 17rem);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 15% 29% at 50% 17%, rgba(219, 145, 155, .76) 70%, transparent 74%),
    radial-gradient(ellipse 15% 29% at 50% 83%, rgba(219, 145, 155, .76) 70%, transparent 74%),
    radial-gradient(ellipse 29% 15% at 17% 50%, rgba(219, 145, 155, .76) 70%, transparent 74%),
    radial-gradient(ellipse 29% 15% at 83% 50%, rgba(219, 145, 155, .76) 70%, transparent 74%),
    radial-gradient(ellipse 19% 29% at 27% 27%, rgba(230, 169, 174, .68) 70%, transparent 74%),
    radial-gradient(ellipse 19% 29% at 73% 27%, rgba(230, 169, 174, .68) 70%, transparent 74%),
    radial-gradient(ellipse 19% 29% at 27% 73%, rgba(230, 169, 174, .68) 70%, transparent 74%),
    radial-gradient(ellipse 19% 29% at 73% 73%, rgba(230, 169, 174, .68) 70%, transparent 74%),
    radial-gradient(circle at 50% 50%, #c88083 0 7%, transparent 8%);
  content: "";
  opacity: .38;
  pointer-events: none;
}

.hero::before {
  z-index: 0;
  top: -3rem;
  right: 3vw;
  transform: rotate(14deg);
}

.hero::after {
  bottom: -6rem;
  left: -4rem;
  width: 12rem;
  height: 12rem;
  opacity: .24;
  transform: rotate(-12deg);
}

.hero-meta span::before,
.trust-strip span::before {
  display: inline-block;
  width: .48rem;
  height: .48rem;
  margin-right: .45rem;
  border-radius: 50%;
  background: var(--pink-deep);
  content: "";
  vertical-align: .05em;
}

.page-hero {
  background:
    radial-gradient(ellipse at 86% 12%, rgba(226, 162, 172, .27), transparent 21rem),
    linear-gradient(120deg, #f8eedb, #f3e1d2);
}

.page-hero::before {
  z-index: 0;
  top: -5rem;
  right: 3%;
  opacity: .24;
}

.page-hero .shell {
  z-index: 1;
}

.little-story {
  background: linear-gradient(140deg, #f1e4cf, #f7efdf);
}

.little-story::before {
  z-index: -1;
  top: 2rem;
  right: -4rem;
  width: 20rem;
  height: 20rem;
  opacity: .18;
}

.mood-card {
  border: 1px solid rgba(96, 57, 45, .11);
  background: linear-gradient(145deg, #fff8eb, #f1e4cf);
}

.mood-card::before {
  border-color: rgba(96, 57, 45, .12);
  background: radial-gradient(circle, rgba(231, 164, 174, .48), transparent 70%);
}

.mood-card:nth-child(2) {
  background: linear-gradient(145deg, #fff8eb, #e8ead9);
}

.mood-card:nth-child(2)::before {
  background: radial-gradient(circle, rgba(166, 176, 136, .46), transparent 70%);
}

.mood-card:nth-child(3) {
  background: linear-gradient(145deg, #fff8eb, #f0dfc8);
}

.mood-card:nth-child(3)::before {
  background: radial-gradient(circle, rgba(199, 140, 76, .28), transparent 70%);
}

.mood-card .mood-index,
.story-card::after,
.story-points li::before {
  color: var(--terracotta-dark);
}

.gallery,
.gallery-card.story-card-text {
  background: linear-gradient(145deg, #fbf2df, #f2e4d1);
}

.gallery-card.story-card-text {
  border: 1px solid rgba(96, 57, 45, .13);
  box-shadow: var(--shadow-sm);
}

.split-feature {
  background: var(--cream-warm);
}

.visit-wrap,
.info-card,
.story-card {
  border-color: var(--line);
}

.visit-wrap {
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.visit-intro {
  background: linear-gradient(145deg, #f0c8c6, #f5dcd0);
}

.footer {
  background: #543126;
}

.footer-heading,
.footer-bottom strong {
  color: #efc1c2;
}

.btn-primary,
.button.primary,
.nav-cta,
.menu-item-add {
  background: var(--espresso);
  color: var(--white) !important;
  box-shadow: 0 8px 17px rgba(96, 57, 45, .2);
}

.btn-primary:hover,
.button.primary:hover,
.nav-cta:hover,
.menu-item-add:hover:not(:disabled) {
  background: var(--terracotta-dark);
}

.btn-secondary,
.button.outline {
  border-color: var(--espresso);
  color: var(--espresso);
}

.btn-secondary:hover,
.button.outline:hover {
  background: var(--pink);
  color: var(--espresso);
}

.menu-page {
  background-color: var(--cream);
  background-image:
    radial-gradient(ellipse at 8% 0%, rgba(230, 166, 174, .17), transparent 27rem),
    radial-gradient(ellipse at 94% 8%, rgba(159, 169, 130, .13), transparent 24rem),
    repeating-linear-gradient(0deg, rgba(96, 57, 45, .014) 0 1px, transparent 1px 5px);
}

.menu-page .site-header {
  background: rgba(248, 240, 222, .96);
}

.menu-page .order-hero {
  position: relative;
  background:
    radial-gradient(ellipse at 86% 16%, rgba(227, 163, 171, .32), transparent 17rem),
    radial-gradient(ellipse at 10% 85%, rgba(165, 174, 136, .2), transparent 19rem),
    linear-gradient(145deg, #fbf3e3, #f2e4d0);
}

.menu-page .order-hero::before {
  top: -3rem;
  right: 4%;
  display: block;
  content: "";
}

.order-hero-content,
.menu-showcase,
.preorder-banner-grid,
.menu-help-card,
.detail-panel {
  color: var(--ink);
}

.menu-range span,
.category-tab,
.menu-category-heading > div > span,
.checkout-plan-label {
  border-color: rgba(96, 57, 45, .18);
  background-color: #fff8eb;
  color: var(--coffee);
}

.category-tab.active,
.category-tab[aria-pressed="true"] {
  border-color: var(--espresso);
  background: var(--espresso);
  color: var(--white);
}

.menu-browser-intro {
  background:
    radial-gradient(ellipse at 90% 8%, rgba(227, 163, 171, .35), transparent 11rem),
    linear-gradient(145deg, #f3ddda, #f5e9d4);
}

.preorder-banner-grid,
.menu-help-card,
.order-guide-grid article,
.detail-content,
.checkout-panel,
.cart-panel {
  border-color: var(--line);
  background-color: var(--white);
  box-shadow: var(--shadow-sm);
}

.menu-category-heading {
  border-color: rgba(96, 57, 45, .22);
}

.menu-category-heading h3 {
  color: var(--espresso);
  font-family: var(--font-display);
  letter-spacing: .025em;
}

.menu-item-card {
  border-bottom: 1px dashed rgba(96, 57, 45, .22);
}

.menu-item-card:hover {
  background: rgba(239, 193, 194, .22);
}

.menu-item-index {
  border-color: rgba(201, 115, 125, .35);
  background: #f5dfe0;
}

.menu-item-add {
  border-radius: 999px;
}

.menu-range span,
.category-tab,
.menu-item-index,
.menu-item-card,
.preorder-banner-grid,
.menu-browser-intro,
.menu-help-card,
.order-guide-grid article {
  transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

@media (max-width: 720px) {
  .hero-logo {
    width: 88px;
    height: 88px;
  }

  .hero::before {
    top: -2rem;
    right: -4rem;
    width: 10rem;
    height: 10rem;
  }

  .page-hero::before {
    right: -4rem;
    width: 11rem;
    height: 11rem;
  }
}