/* Bun Voyage: the menu cards, each photo leaning in inside its frame under the pointer.
   Colours, type, chips and buttons from ~/Dev/showroom/demos/bun-voyage/styles.css */
:root {
  --cream: #FFF0E0; --cocoa: #4A2E17; --tomato: #CC4A3B; --butter: #FFE480; --pale: #FCEDB4; --card: #F7E3CD;
  --ink: #4A2E17; --ink-soft: rgba(74, 46, 23, .74);
  --display: "Mouse Memoirs", sans-serif; --mark: "Erica One", sans-serif; --ui: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cpath d='M0 18 Q15 6 30 18 T60 18 T90 18 T120 18' fill='none' stroke='%23FCEDB4' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  position: relative; margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden;
  background: var(--cocoa); color: var(--ink); font: 500 18px/1.4 var(--ui); letter-spacing: -.01em; -webkit-font-smoothing: antialiased;
  padding: 0 20px 20px;
}
body::before { content: ""; position: fixed; inset: 0; background: var(--wave) 0 0 / 120px 36px repeat; opacity: .06; pointer-events: none; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; font-weight: 400; }
p { margin: 0; }

/* nav (site .nav / .wordmark / pills) */
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 84px; padding: 0 8px; }
.wordmark { font: 400 40px/1 var(--mark); color: var(--cream); letter-spacing: -.02em; white-space: nowrap; }
.nav-actions { display: flex; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 100px; font: 600 15px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em; }
.pill--butter { background: var(--butter); color: var(--cocoa); }
.pill--line { border: 1.5px solid rgba(255, 240, 224, .35); color: var(--cream); }
.pill--line i { position: relative; width: 18px; height: 10px; border-top: 2.4px solid; border-bottom: 2.4px solid; }

/* the sheet: the cream page the menu sits on */
.sheet {
  position: relative; flex: 1; width: 100%; max-width: 1010px; margin: 0 auto;
  background: var(--cream); border-radius: 32px; padding: 30px 32px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
.sec-head { text-align: center; display: grid; justify-items: center; gap: 14px; }
.tag { display: inline-block; padding: 5px 14px 7px; border-radius: 12px; background: var(--tomato); color: var(--cream); font: 400 30px/1 var(--display); transform: rotate(-3deg); }
.sec-head h1 { font: 400 72px/.9 var(--display); text-transform: uppercase; letter-spacing: -.01em; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; gap: 18px; border-radius: 32px; background: var(--card); padding: 14px 14px 20px; }

/* the frame: a product shot on paper; the whole shot (paper + bun) is what leans in */
.fzh { --fzh-radius: 22px; --fzh-scale: 1.18; aspect-ratio: 16 / 9.6; }
.fzh__media { position: relative; background: radial-gradient(120% 90% at 50% 38%, #FFF6E2 0%, var(--pale) 62%, #F5DF9C 100%); }
.fzh--b .fzh__media { background: radial-gradient(120% 90% at 50% 38%, #FFF4EA 0%, #F9DCC4 64%, #F0C9A8 100%); }
.fzh--c .fzh__media { background: radial-gradient(120% 90% at 50% 38%, #FFF6EE 0%, #F6E1E4 62%, #E9C7CF 100%); }
.fzh--d .fzh__media { background: radial-gradient(120% 90% at 50% 38%, #FFF8E8 0%, #F6E7C8 62%, #EBD3A4 100%); }
.fzh__media img { position: absolute; left: 50%; top: 54%; width: 82%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 20px rgba(74, 46, 23, .26)); }
.fzh--b .fzh__media img { width: 74%; top: 52%; }
.fzh--c .fzh__media img { width: 70%; top: 53%; }
.fzh--d .fzh__media img { width: 76%; }

.chip { position: absolute; top: 28px; left: 28px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: 100px; background: var(--cream); font: 700 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tomato); }

.card-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 0 10px; }
.card h2 { font: 600 26px/1.05 var(--ui); letter-spacing: -.03em; }
.card p { margin-top: 6px; font: 500 15px/1.3 var(--ui); color: var(--ink-soft); }
.card-foot b { font: 600 24px/1 var(--ui); letter-spacing: -.02em; }
.add { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 17px; border: 0; border-radius: 100px; background: var(--cocoa); color: var(--cream); font: 600 15px/1 var(--ui); text-transform: uppercase; cursor: pointer; transition: transform .35s var(--spring), background .3s; }
.add i { position: relative; width: 14px; height: 14px; color: var(--butter); }
.add i::before, .add i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); transition: transform .45s var(--spring); }
.add i::after { transform: translate(-50%, -50%) rotate(90deg); }
.add:hover, .add.is-hover { transform: translateY(-2px); }
.add:hover i::before, .add.is-hover i::before { transform: translate(-50%, -50%) rotate(180deg); }
.add:hover i::after, .add.is-hover i::after { transform: translate(-50%, -50%) rotate(270deg); }
.add:active, .add.is-press { transform: scale(.96); }
.add.added { background: var(--tomato); }

@media (max-width: 760px) {
  body { padding: 0 10px 10px; }
  .nav { height: 72px; padding: 0 6px; }
  .wordmark { font-size: 28px; }
  .pill--butter { display: none; }
  .sheet { padding: 32px 14px 18px; border-radius: 24px; gap: 26px; }
  .sec-head h1 { font-size: clamp(44px, 13vw, 64px); }
  .cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card { border-radius: 26px; padding: 10px 10px 16px; }
  .chip { top: 22px; left: 22px; }
  .card-foot { grid-template-columns: minmax(0, 1fr) auto; padding: 0 6px; }
  .card-foot .add { grid-column: 2; grid-row: 1 / span 2; }
  .card-foot b { grid-column: 1; }
  .card h2 { font-size: 22px; }
}