/* Bun Voyage on a phone, from the shipped site's own phone layout (showroom/demos/bun-voyage/styles.css);
   the menu is the phone-menu-rise part dressed in the site's cocoa sheet and Mouse Memoirs links. */
:root {
  --cream: #FFF0E0; --cocoa: #4A2E17; --tomato: #CC4A3B; --butter: #FFE480; --pale: #FCEDB4;
  --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;
  --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");
  --wave-cocoa: 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='%234A2E17' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 500 17px/1.4 var(--ui); letter-spacing: -.01em; overflow: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
p, h1 { margin: 0; font-weight: 400; }

/* the stage: the phone centred on the bakery's cream, a faint cocoa tide behind it */
.stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; }
.stage::before { content: ""; position: absolute; inset: 0; background: var(--wave-cocoa) 0 0/120px 36px repeat; opacity: .05; }
.phone { --s: 1.32; position: relative; width: 414px; height: 824px; flex: none; padding: 12px; border-radius: 60px; background: #24160B;
  box-shadow: inset 0 0 0 2px #3a2615, 0 calc(30px * var(--s)) calc(60px * var(--s)) -20px rgba(74, 46, 23, .45);
  scale: var(--s); }
.screen { position: relative; width: 390px; height: 800px; border-radius: 48px; overflow: hidden; contain: paint; background: var(--cocoa); isolation: isolate; }

.status { position: relative; z-index: 60; height: 46px; padding: 14px 30px 0 34px; display: flex; align-items: center; gap: 6px; color: var(--cream); font: 600 15px/1 var(--ui); }
.status b { margin-right: auto; font-weight: 600; }
.sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.sig i { width: 3px; background: currentColor; border-radius: 1px; }
.sig i:nth-child(1) { height: 4px; } .sig i:nth-child(2) { height: 6px; } .sig i:nth-child(3) { height: 8.5px; } .sig i:nth-child(4) { height: 11px; }
.bat { width: 24px; height: 12px; border: 1.5px solid rgba(255, 240, 224, .6); border-radius: 4px; position: relative; margin-left: 4px; }
.bat::after { content: ""; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: currentColor; border-radius: 1.5px; }

/* the phone homepage (the site at 390) */
.hero { position: relative; background: var(--cocoa); padding: 0 16px 16px; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--wave) 0 0/120px 36px repeat; opacity: .06; pointer-events: none; }
.nav { position: relative; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 4px 10px; }
.wordmark { font: 400 34px/1 var(--mark); color: var(--cream); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }

/* the burger: the site's pill button, its bars morphing to an X (the part's "morph" burger) */
.pmr-burger.menu-btn { width: auto; height: 44px; display: inline-flex; align-items: center; gap: 0; padding: 0 4px 0 18px; border-radius: 100px;
  border: 1.5px solid rgba(255, 240, 224, .35); color: var(--cream); font: 600 15px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em; }
.menu-btn .lbl { display: grid; }
.menu-btn .lbl > span { grid-area: 1 / 1; transition: opacity .2s; }
.menu-btn .close, .menu-btn[aria-expanded="true"] .open { opacity: 0; }
.menu-btn[aria-expanded="true"] .close { opacity: 1; }
.menu-btn .ico { position: relative; width: 40px; height: 40px; }
.menu-btn[aria-expanded="true"] { border-color: rgba(255, 240, 224, .6); }

.pass-main { position: relative; z-index: 2; height: 674px; border-radius: 32px; background: var(--cream); padding: 26px 22px 0; overflow: hidden; }
.route { display: flex; align-items: center; gap: 12px; }
.route small { display: block; font: 600 11px/1 var(--ui); text-transform: uppercase; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 6px; }
.route b { font: 600 16px/1.1 var(--ui); letter-spacing: -.02em; white-space: nowrap; }
.route-line { flex: 1; position: relative; height: 2px; background: repeating-linear-gradient(90deg, var(--cocoa) 0 8px, transparent 8px 14px); min-width: 56px; }
.ferry { position: absolute; left: 50%; top: 50%; width: 46px; height: 36px; transform: translate(-50%, -62%); animation: sail 5.25s ease-in-out infinite; }
.ferry > i { position: absolute; inset: 0; }
.ferry-fill { background: var(--cream); -webkit-mask: var(--ferry-fill) center/contain no-repeat; mask: var(--ferry-fill) center/contain no-repeat; }
.ferry-ink { background: var(--tomato); -webkit-mask: var(--ferry-ink) center/contain no-repeat; mask: var(--ferry-ink) center/contain no-repeat; }
@keyframes sail { 0%, 100% { transform: translate(-80%, -62%) rotate(-2deg); } 50% { transform: translate(-20%, -66%) rotate(2deg); } }
.hero-title { margin-top: 24px; font: 400 80px/.86 var(--display); text-transform: uppercase; letter-spacing: -.02em; }
.hero-title span { display: block; white-space: nowrap; }
.hero-title .l1 { color: var(--tomato); }
.hero-lede { margin-top: 18px; font: 600 17px/1.35 var(--ui); }
.sticker { position: absolute; z-index: 4; right: 18px; bottom: 236px; padding: 10px 16px 12px; background: var(--butter); border-radius: 14px; font: 400 30px/.86 var(--display); text-align: center; color: var(--cocoa);
  box-shadow: 0 0 0 4px var(--cream), 0 12px 24px -12px rgba(74, 46, 23, .5); transform: rotate(9deg); }
.hero-bun { position: absolute; z-index: 2; width: 88%; right: -12%; bottom: -30px; height: auto; filter: drop-shadow(0 30px 40px rgba(74, 46, 23, .28)); }

/* the menu sheet: the part, in the site's cocoa with its tide texture */
.pmr { --pmr-bg: var(--cocoa); --pmr-line: rgba(255, 240, 224, .3); --pmr-top: 124px; --pmr-side: 28px; --pmr-gap: 12px; --pmr-rise: 26px; padding-bottom: 28px; }
.pmr::before { content: ""; position: absolute; inset: 0; background: var(--wave) 0 0/120px 36px repeat; opacity: .06; pointer-events: none; }
.pmr__links { position: relative; padding-bottom: 24px; }
.pmr__link { font: 400 60px/.95 var(--display); text-transform: uppercase; color: var(--cream); text-decoration: none; letter-spacing: .005em; }
.pmr__link.is-hot { color: var(--butter); }
.pmr__card { position: relative; display: grid; gap: 6px; padding: 18px 20px 20px; border-radius: 22px; background: var(--butter); color: var(--cocoa); }
.pmr__card .k { font: 600 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .14em; color: rgba(74, 46, 23, .7); }
.pmr__card a { font: 400 42px/1 var(--display); text-decoration: none; }
.pmr__card .where { font: 500 15px/1.3 var(--ui); color: rgba(74, 46, 23, .8); }

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