/* B · Horky: split-flap departure board (signature). Real table underneath; flaps are decoration. */
.board-sec { padding: clamp(80px, 10vw, 140px) 0; background: var(--ink); }
.board-sec .intro { font-size: 20px; max-width: 40em; color: #E4DED9; }
.board { margin: 28px 0 18px; background: #0B0A0C; border: 10px solid var(--ink-4); border-radius: 12px; padding: clamp(12px, 2vw, 28px); box-shadow: inset 0 0 40px rgba(0, 0, 0, .8), 0 30px 80px rgba(0, 0, 0, .45); }
.board-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 2px solid var(--ink-3); }
.board-title { font: 700 clamp(18px, 2.4vw, 34px)/1 var(--f-mono); color: var(--yellow); letter-spacing: .04em; }
.board-clock { font: 700 clamp(18px, 2.4vw, 34px)/1 var(--f-mono); color: var(--orange-hi); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filters button { min-height: 44px; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 6px; background: transparent; color: var(--white); font: 700 14px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
@media (hover: hover) { .filters button:hover:not([aria-pressed="true"]) { border-color: var(--yellow); color: var(--yellow); } }
.dep-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; --fz: clamp(15px, 1.75vw, 25px); }
.dep-table caption { caption-side: top; text-align: left; font: 400 14px/1.4 var(--f-mono); color: var(--mist); padding-bottom: 6px; }
.dep-table thead th { font: 500 12px/1.2 var(--f-mono); color: var(--mist); text-transform: uppercase; letter-spacing: .1em; text-align: left; padding: 4px 10px; }
.dep-table thead th.pr { text-align: right; }
.dep-table thead small { display: block; font-size: 11px; color: #8E8783; color: var(--mist); text-transform: none; letter-spacing: .04em; }
.dep td, .dep th { background: #17141A; padding: 8px 10px; vertical-align: middle; text-align: left; font-weight: 400; }
.dep td:first-child { border-radius: 4px 0 0 4px; }
.dep td:last-child { border-radius: 0 4px 4px 0; }
.dep .no { width: 3em; font: 500 14px/1 var(--f-mono); color: var(--orange-hi); }
.dep .pr { width: 5.4em; text-align: right; font: 700 var(--fz)/1.2 var(--f-mono); color: var(--yellow); white-space: nowrap; }
.dep .nm .real { font: 800 calc(var(--fz) * 1.15)/1.1 var(--f-disp); text-transform: uppercase; letter-spacing: .03em; color: var(--white); }
.dep.open td, .dep.open th { background: #241F22; }
.dep.open td:first-child { box-shadow: inset 4px 0 0 var(--orange); }
.nm-btn { display: block; width: 100%; min-height: 44px; padding: 4px 0; margin: 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.nm-btn:focus-visible { outline-offset: 2px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.tag { font: 700 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 4px 6px; border-radius: 3px; border: 1px solid; }
.tag.veg { color: #8BE09A; }
.tag.hot { color: #FF9A80; }
.tag.pick { color: var(--yellow); }
.det td { background: #1E1A1F; padding: 14px 16px; border-radius: 4px; }
.det-in { display: flex; gap: 18px; align-items: center; }
.det-in img { width: 96px; height: 96px; flex: none; border-radius: 50%; object-fit: cover; background: var(--white); }
.det-in p { margin: 0; font-size: 19px; }
.det-in .via { font: 700 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--yellow); margin-right: 6px; }
.det-in .base { font: 400 14px/1.3 var(--f-mono); color: var(--mist); margin-top: 6px; }
.det-in > p:first-of-type { flex: 1; }
html.js .det:not([hidden]) .det-in { animation: detIn .35s var(--ease) both; }
@keyframes detIn { from { opacity: 0; translate: 0 -8px; } }
@media (min-width: 701px) { .det-in { display: grid; grid-template-columns: 96px 1fr; } .det-in .base { grid-column: 2; margin-top: -10px; } }

/* flap layer */
.dep-table.flaps .real { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fl { display: flex; flex-wrap: wrap; row-gap: 3px; }
.dep .pr .fl { justify-content: flex-end; }
.w { display: inline-flex; gap: 2px; margin-right: .42em; }
.w:last-child { margin-right: 0; }
.w i { display: inline-grid; place-items: center; width: .82em; height: 1.28em; font: 700 var(--fz)/1 var(--f-mono); font-style: normal; color: var(--yellow); border-radius: 2px; background: linear-gradient(#2C2729 0 49%, #050405 49% 52%, #231F21 52%); box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset; }
.nm .w i { color: var(--white); }
.w i.a { animation: fa .11s ease-out; }
.w i.b { animation: fb .11s ease-out; }
@keyframes fa { from { transform: perspective(160px) rotateX(75deg); filter: brightness(.5); } }
@keyframes fb { from { transform: perspective(160px) rotateX(75deg); filter: brightness(.5); } }
.board-title .w i, .board-clock .w i { font-size: inherit; }
@media (max-width: 700px) {
  .board { border-width: 6px; }
  .dep-table { --fz: 14px; }
  .dep-table .no { display: none; }
  .board-title, .board-clock { font-size: 14px; }
  .w { gap: 1px; }
  .w { flex-wrap: wrap; row-gap: 3px; }
  .dep .no { width: 2.2em; padding-inline: 6px; }
  .dep .pr { width: 4.2em; padding-inline: 6px; }
  .dep .nm { padding-inline: 6px; }
  .det-in img { width: 72px; height: 72px; }
  .det-in { flex-wrap: wrap; }
  .det-in .base { width: 100%; }
}