/* Bun Voyage's departures page, from the shipped site (showroom/demos/bun-voyage/styles.css + site.js board rows):
   the cocoa header, a popping display headline, and the split-flap departures board. */
:root {
  --cream: #FFF0E0; --cocoa: #4A2E17; --tomato: #CC4A3B; --butter: #FFE480;
  --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;
  --gutter: clamp(16px, 2vw, 28px); --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%; overflow-x: clip; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 500 18px/1.4 var(--ui); letter-spacing: -.01em; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1 { margin: 0; font-weight: 400; }
p { margin: 0; }

.btn { display: inline-flex; align-items: center; height: 56px; padding: 0 24px; border-radius: 100px; background: var(--cocoa); color: var(--cream); font: 600 17px/1 var(--ui); text-transform: uppercase; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.btn--butter { background: var(--butter); color: var(--cocoa); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 15px; }

/* header: the site's cocoa bar with its tide texture */
.top { position: relative; background: var(--cocoa); padding: 0 var(--gutter) 8px; border-radius: 0 0 40px 40px; overflow: hidden; }
.top::before { content: ""; position: absolute; inset: 0; background: var(--wave) 0 0/120px 36px repeat; opacity: .06; pointer-events: none; }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 96px; padding: 0 clamp(4px, 1.5vw, 24px); }
.wordmark { display: inline-block; padding: 6px 0; font: 400 44px/1 var(--mark); color: var(--cream); text-decoration: none; letter-spacing: -.02em; white-space: nowrap; }
.nav-links { display: flex; gap: clamp(20px, 3vw, 40px); margin: 0 0 0 auto; padding: 0; list-style: none; }
.nav-links a { position: relative; display: block; padding: 8px 0; color: var(--cream); text-decoration: none; font: 600 16px/1 var(--ui); text-transform: uppercase; letter-spacing: .02em; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 3px; border-radius: 3px; background: var(--butter); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a[aria-current]::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-btn { display: none; align-items: center; gap: 10px; height: 44px; padding: 0 16px 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 i { position: relative; width: 18px; height: 12px; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; right: 0; height: 2.4px; border-radius: 2px; background: currentColor; }
.menu-btn i::before { top: 1px; } .menu-btn i::after { top: 8px; }

/* page head: tag + the popping headline + the board's own note */
.departures { padding: 56px var(--gutter) 60px; }
.page-head { display: grid; justify-items: start; gap: 16px; max-width: 1386px; margin: 0 auto; padding: 0 clamp(4px, 2vw, 28px); }
.tag { display: inline-block; padding: 6px 16px 8px; border-radius: 12px; background: var(--tomato); color: var(--cream); font: 400 34px/1 var(--display); transform: rotate(-3deg); }
.page-head h1 { font: 400 clamp(64px, 16.2vw, 190px)/.84 var(--display); text-transform: uppercase; letter-spacing: -.01em; }
.page-head .ln { display: block; white-space: nowrap; }
.page-head .l2 { color: var(--tomato); padding-left: clamp(0px, 7vw, 110px); }
.lede { max-width: 30em; font: 500 18px/1.4 var(--ui); color: var(--ink-soft); }

/* the board (the site's signature split-flap board, settled) */
.board { max-width: 1386px; margin: 36px auto 0; border-radius: 40px; background: #2E1C0D; color: var(--cream); padding: 28px clamp(18px, 3vw, 44px) 26px; position: relative; overflow: hidden; }
.board::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 30%); pointer-events: none; }
.board-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.board-gate { font: 400 34px/1 var(--display); text-transform: uppercase; color: var(--butter); }
.board-clock { display: flex; align-items: center; gap: 14px; font: 500 14px/1 var(--ui); text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 240, 224, .7); }
.board-clock b { font: 700 28px/1 var(--mono); letter-spacing: .04em; color: var(--butter); padding: 9px 12px; border-radius: 10px; background: #1E1208; }
.board-cols, .board-rows li { display: grid; grid-template-columns: 120px 1fr 90px 170px; gap: 16px; align-items: center; }
.board-cols { padding: 0 14px 10px; font: 600 12px/1 var(--ui); text-transform: uppercase; letter-spacing: .14em; color: rgba(255, 240, 224, .55); border-bottom: 1.5px solid rgba(255, 240, 224, .14); }
.board-rows { margin: 0; padding: 0; list-style: none; }
.board-rows li { padding: 11px 14px; border-bottom: 1.5px solid rgba(255, 240, 224, .1); }
.board-rows li:last-child { border-bottom: 0; }
.flap { display: inline-flex; gap: 2px; flex-wrap: nowrap; }
.flap span { position: relative; display: inline-grid; place-items: center; width: 1.02em; height: 1.36em; border-radius: 4px; background: #1E1208; font: 700 20px/1 var(--mono); color: var(--cream); text-transform: uppercase; overflow: hidden; }
.flap span:not(.sp)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .55); }
.flap span.sp { background: transparent; width: .5em; }
.t-time .flap span { color: var(--butter); }
.status { justify-self: start; display: inline-flex; white-space: nowrap; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 100px; font: 700 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .5s var(--spring); }
.status.show { opacity: 1; transform: none; }
.status--baked { background: rgba(255, 240, 224, .12); color: var(--cream); }
.status--ontime { background: var(--butter); color: var(--cocoa); }
.status--boarding { background: var(--tomato); color: var(--cream); }
.status--boarding::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--butter); }
.status--sold { background: transparent; color: rgba(255, 240, 224, .45); box-shadow: inset 0 0 0 1.5px rgba(255, 240, 224, .25); text-decoration: line-through; }

/* narrower screens: the site's own steps */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .board-cols, .board-rows li { grid-template-columns: 96px 1fr 150px; }
  .board-cols span:nth-child(3), .t-gate { display: none; }
}
@media (max-width: 560px) {
  .wordmark { font-size: 34px; }
  .nav { height: 80px; }
  .nav-actions .btn { display: none; }
  .departures { padding-top: 40px; }
  .page-head h1 { font-size: 19vw; }
  .page-head .l2 { padding-left: 0; }
  .board { border-radius: 28px; }
  .board-head { flex-direction: column; align-items: flex-start; }
  .board-cols { display: none; }
  .board-rows li { grid-template-columns: 1fr auto; row-gap: 10px; padding: 14px 2px; }
  .board-rows .t-time { grid-column: 1; grid-row: 1; }
  .board-rows li > div:last-child { grid-column: 2; grid-row: 1; }
  .board-rows .t-bake { grid-column: 1 / -1; grid-row: 2; }
  .flap span { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .status { transition: none; } }