/* Mawimbi birthday menu, three styles. Drawn by bday.js. */
.bm { --bg: #0E1F35; --ink: #F3EEE4; --soft: #CFC9BE; --acc: #C9A96E; --line: rgba(243,238,228,.14);
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Jost", system-ui, sans-serif;
  background: radial-gradient(120% 50% at 50% 0%, #15294A 0%, var(--bg) 55%); color: var(--ink); text-align: center; overflow: hidden; }
.bm-ivory { --bg: #F4EEE2; --ink: #0E1F35; --soft: #4F5A6B; --acc: #A6844E; --line: rgba(14,31,53,.14); background: var(--bg); }
.bm-noir { --bg: #0B0B0B; --ink: #F2F0EC; --soft: #B9B6B0; --acc: #F2F0EC; --line: rgba(242,240,236,.16); background: var(--bg); }
.bm * { box-sizing: border-box; }
.bm-cover { min-height: min(86svh, 760px); display: grid; align-content: center; justify-items: center; padding: 64px 24px 40px; }
.bm-logo { display: block; width: min(62vw, 250px); aspect-ratio: 308.9/57; background: var(--acc);
  -webkit-mask: url(../assets/logo-script.svg) center/contain no-repeat; mask: url(../assets/logo-script.svg) center/contain no-repeat; }
.bm-tide .bm-logo, .bm-noir .bm-logo { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--acc) 60%, transparent)) drop-shadow(0 0 26px color-mix(in srgb, var(--acc) 28%, transparent)); }
@media (prefers-reduced-motion: no-preference) { .bm-tide .bm-cover .bm-logo, .bm-noir .bm-cover .bm-logo { animation: bm-glow 4.5s ease-in-out infinite; } }
@keyframes bm-glow { 50% { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--acc) 80%, transparent)) drop-shadow(0 0 40px color-mix(in srgb, var(--acc) 40%, transparent)); } }
.bm-logo.small { width: 120px; margin: 0 auto; opacity: .85; }
.bm-k { margin: 34px 0 0; font: 500 11px var(--sans); letter-spacing: .34em; text-transform: uppercase; color: var(--acc); padding-left: .34em; }
.bm-name { margin: 10px 0 0; font: italic 400 clamp(46px, 14vw, 72px)/1 var(--serif); overflow-wrap: anywhere; }
.bm-age { margin: 12px 0 0; font: italic 400 22px var(--serif); color: var(--soft); }
.bm-date { margin: 18px 0 0; font: 500 11px var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--soft); padding-left: .26em; }
.bm-sec { max-width: 560px; margin: 0 auto; padding: 40px 22px 8px; }
.bm-h { margin: 0 0 20px; font: 500 12px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--acc); padding-left: .3em; }
.bm-ph { margin: 0; }
.bm-img { border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); padding: 8px; }
.bm-ivory .bm-img { background: #fff; box-shadow: 0 8px 24px rgba(14,31,53,.12); border-color: transparent; }
.bm-img { position: relative; }
.bm-img img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.bm-img video { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.bm-pair .bm-img video { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
.bm-img video.on { opacity: 1; }
.bm-bw .bm-img video { filter: grayscale(1) contrast(1.05); }
.bm-bw .bm-img img { filter: grayscale(1) contrast(1.05); }
.bm-ph.big { width: min(82%, 340px); margin: 0 auto; }
.bm-ph.wide .bm-img img { aspect-ratio: 5/4; }
.bm-ph figcaption { margin: 14px 4px 0; }
.bm-ph q { display: block; font: italic 400 19px/1.35 var(--serif); quotes: "“" "”"; text-wrap: balance; }
.bm-ph figcaption span { display: block; margin-top: 8px; font: 500 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.bm-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; margin-top: 30px; align-items: start; }
.bm-pair .bm-img { padding: 5px; }
.bm-pair q { font-size: 16px; }
.bm-quote { margin: 26px auto 0; max-width: 17em; font: italic 400 28px/1.25 var(--serif); text-wrap: balance; }
.bm-course { padding: 22px 0; border-top: 1px solid var(--line); }
.bm-course:last-child { border-bottom: 1px solid var(--line); }
.bm-course h3 { margin: 0 0 12px; font: 500 11px var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--soft); padding-left: .3em; }
.bm-dish { margin: 0; font: italic 400 24px/1.2 var(--serif); }
.bm-dish small { display: block; margin: 5px auto 0; max-width: 24em; font: 400 13px/1.45 var(--sans); color: var(--soft); font-style: normal; letter-spacing: .02em; }
.bm-or { display: block; margin: 10px 0; font: italic 400 15px var(--serif); color: var(--acc); }
.bm-us p { margin: 0; font: italic 400 22px/1.35 var(--serif); text-wrap: balance; }
.bm-us span { display: block; margin-top: 10px; font: 500 10px var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); }
.bm-end { padding: 48px 0 56px; }
@supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) {
  .bm-sec > *, .bm-pair > * { animation: bm-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 22%; } } }
@keyframes bm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }