/* B3 — Beer Mats, first version (the original B2 before its redesign).
   Type-led, light, hub-and-spoke: round bottle-green beer mats (drinks)
   and white plates (food). Tap one and the category opens out of it. */
:root {
  --bg: #eaf0d2; --ink: #12301f; --muted: #53684f; --line: rgb(18 48 31 / .2);
  --accent: #12301f; --on-accent: #eaf0d2; --surface: #f8f9ee; --lime: #d3de9b; --ruby: #8a2233;
  --sheet-bg: #f8f9ee; --sheet-ink: #12301f; --sheet-muted: #53684f;
  --logo-filter: brightness(0) opacity(.8);
}
.hm-tag--new { background: var(--ruby); color: #fff; }

.top { padding: 2rem 1.25rem .5rem; display: grid; gap: 1.1rem; justify-items: center; text-align: center; max-width: 40rem; margin: 0 auto; }
.logo { display: block; width: min(56vw, 15rem); aspect-ratio: 2000 / 580; background: var(--ink);
  -webkit-mask: url(/shared/logo.webp) center / contain no-repeat; mask: url(/shared/logo.webp) center / contain no-repeat; }
.top__title { font: 500 italic clamp(1.375rem, 5.6vw, 1.875rem)/1.15 var(--display); max-width: 18ch; text-wrap: balance; }
.find { width: 100%; }
.find input { width: 100%; font: 500 1rem/1 var(--body); color: var(--ink); padding: .85rem 1.1rem; border-radius: 99px; border: 1.5px solid var(--ink); background: transparent; appearance: none; -webkit-appearance: none; }
.find input::placeholder { color: var(--muted); }

main { max-width: 40rem; margin: 0 auto; padding: 0 1.25rem; }
.world__title { font: 600 clamp(3rem, 15vw, 5rem)/1 var(--display); letter-spacing: -.035em; margin: 2.5rem 0 1.25rem; display: flex; align-items: baseline; gap: .75rem; }
.world__title small { font: 500 .8125rem/1 var(--body); letter-spacing: 0; color: var(--muted); }
.mats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 3rem; }
.mats > :nth-child(even) { translate: 0 2.75rem; }
.mat {
  position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: .3rem;
  text-align: center; padding: 16%; background: var(--ink); color: var(--lime);
  box-shadow: 0 10px 0 -4px rgb(18 48 31 / .25), 0 18px 24px -10px rgb(18 48 31 / .45);
  transition: transform .5s var(--spring);
}
.mat::before {            /* the printed ring turns as the page scrolls */
  content: ""; position: absolute; inset: 6%; border-radius: 50%; border: 2px dashed currentColor; opacity: .55;
  rotate: calc(var(--p, .5) * var(--s, 1) * 140deg);
}
.mat:nth-child(even) { --s: -1; }
.mat:active { transform: scale(.94) rotate(-6deg); }
.mat--food { background: #fdfdf8; color: var(--ink); box-shadow: inset 0 0 0 1px rgb(18 48 31 / .12), 0 10px 0 -4px rgb(18 48 31 / .12), 0 18px 24px -10px rgb(18 48 31 / .35); }
.mat--food::before { border-style: solid; border-width: 1.5px; inset: 9%; opacity: .25; }
.mat__name { font: 600 clamp(1.15rem, 5.4vw, 1.6rem)/1.02 var(--display); letter-spacing: -.02em; text-wrap: balance; }
.mat__count { font-size: .75rem; font-weight: 600; opacity: .8; }
.mat__peek { position: absolute; right: -9%; bottom: -8%; width: 44%; aspect-ratio: 3 / 4; rotate: calc(10deg + var(--v) * 22deg); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .35)); transition: rotate .5s var(--spring); pointer-events: none; }
.mat:nth-child(even) .mat__peek { right: auto; left: -9%; rotate: calc(-10deg + var(--v) * -22deg); }
.mat.hm-reveal { transform: scale(.4) rotate(-40deg); }
.mat.hm-reveal.is-in { transform: none; }

/* rows: shared by search results and the category panel */
.rows { list-style: none; margin: 0; padding: 0; }
.rowb { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; align-items: center; width: 100%; text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--line); min-height: 5.5rem; }
.rowb__ph { display: block; height: 5.25rem; transition: transform .45s var(--spring); }
.rowb:active .rowb__ph { transform: scale(1.15) rotate(-6deg); }
.rowb__name { display: block; font: 600 1.25rem/1.15 var(--display); letter-spacing: -.01em; }
.rowb__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .875rem; line-height: 1.4; color: var(--muted); margin-top: .2rem; }
.rowb .hm-tags { margin-top: .4rem; }
.group { font: 600 italic 1.25rem/1.2 var(--display); margin: 1.75rem 0 .25rem; }
.results__none { padding: 2.5rem 0; text-align: center; }

/* the category opens out of the mat that was tapped */
.panel { position: fixed; inset: 0; z-index: 6; background: var(--bg); color: var(--ink);
  clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); transition: clip-path .65s var(--glide); }
.panel[hidden] { display: none; }
.panel.is-open { clip-path: circle(150% at var(--x, 50%) var(--y, 50%)); }
.panel--drinks { --bg: #12301f; --ink: #eaf0d2; --muted: #a8ba99; --line: rgb(234 240 210 / .2); --accent: #d3de9b; --on-accent: #12301f; --ruby: #f0b7a4; }
.panel--drinks .hm-tag--new { color: #12301f; }
.panel__in { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 0 1.25rem 3rem; }
.panel__body { max-width: 40rem; margin: 0 auto; }
.panel__back { position: sticky; top: .75rem; z-index: 2; margin: .75rem 0 0; padding: .7rem 1rem .7rem .8rem; border-radius: 99px; background: var(--ink); color: var(--bg); font-size: .875rem; font-weight: 600; display: inline-flex; gap: .4rem; align-items: center; }
.panel__back::before { content: "‹"; font-size: 1.2rem; line-height: .8; }
.panel__title { font: 600 clamp(2.8rem, 14vw, 5rem)/.93 var(--display); letter-spacing: -.035em; margin-top: 1.5rem; text-wrap: balance; }
.panel__note { font: 500 italic 1.0625rem/1.3 var(--display); color: var(--muted); margin: .6rem 0 1rem; }
.panel.is-open .rowb { animation: row-in .6s var(--spring) both; animation-delay: calc(.18s + min(var(--i), 10) * 45ms); }
@keyframes row-in { from { opacity: 0; transform: translateX(34px) rotate(1.5deg); } }
.next { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; margin-top: 2.5rem; padding: 1.1rem 1.4rem; border-radius: 99px; border: 1.5px solid var(--ink); text-align: left; }
.next small { display: block; font-size: .75rem; color: var(--muted); }
.next b { font: 600 1.375rem/1.1 var(--display); }
.next::after { content: "›"; font-size: 1.75rem; line-height: 1; }

@media (min-width: 720px) {
  .mats { grid-template-columns: repeat(4, 1fr); }
  .mats > :nth-child(even) { translate: 0 2rem; }
  main, .top { max-width: 56rem; }
  .mat__name { font-size: 1.5rem; }
}