:root {
  --black: #0d0d0d;
  --cream: #f2ede2;
  --red: #c8321e;
  --grey: #8a857c;
  --pad: clamp(16px, 2.2vw, 32px);
  --sans: "Switzer", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --num: "Anton", Impact, "Arial Narrow", sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--black); color: var(--cream); font: 400 18px/1.4 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--cream); }

/* Header: the departures-board logo and one link */
.top { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--pad); }
.top nav { margin-left: auto; }
.top nav a { font-size: 17px; }
.top nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Logo: a departures-board row. Flight 219, destination Pictures & small shows. */
.board { --s: clamp(11px, 3vw, 21px); --g: calc(var(--s) * .1); display: flex; gap: calc(var(--s) * .5); }
.num, .row { display: flex; gap: var(--g); }
.dest { display: grid; gap: calc(var(--s) * .14); }
.flap { --fw: var(--s); --fh: calc(var(--s) * 1.4); position: relative; width: var(--fw); height: var(--fh); perspective: 600px; font: 600 calc(var(--fh) * .7)/var(--fh) var(--sans); text-align: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.num .flap { --fw: calc(var(--s) * 2.05); --fh: calc(var(--s) * 2.94); font-weight: 700; letter-spacing: -.04em; }
.half { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; backface-visibility: hidden; }
.half span { position: absolute; left: 0; width: 100%; height: var(--fh); }
.flap .t { top: 0; border-radius: calc(var(--fw) * .09) calc(var(--fw) * .09) 0 0; background: linear-gradient(#262626, #1f1f1f); }
.flap .t span { top: 0; }
.flap .b { bottom: 0; border-radius: 0 0 calc(var(--fw) * .09) calc(var(--fw) * .09); background: linear-gradient(#181818, #141414); }
.flap .b span { bottom: 0; }
.num .flap .t { background: linear-gradient(#d23a25, var(--red)); }
.num .flap .b { background: linear-gradient(#b72d1b, #a82918); }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: max(1px, calc(var(--fh) * .02)); background: #000; z-index: 9; }
.fold-t { transform-origin: bottom; z-index: 5; animation: ft var(--d) ease-in forwards; }
.fold-b { transform-origin: top; z-index: 5; transform: rotateX(90deg); animation: fb var(--d) ease-out var(--d) forwards; }
@keyframes ft { to { transform: rotateX(-90deg); filter: brightness(.55); } }
@keyframes fb { from { transform: rotateX(90deg); filter: brightness(1.4); } to { transform: rotateX(0); } }

/* Shows */
.shows { padding: clamp(40px, 6vw, 100px) var(--pad) 0; }
.shows h2 { font: 500 clamp(44px, 8.4vw, 150px)/.88 var(--sans); letter-spacing: -.055em; margin-bottom: clamp(28px, 4vw, 60px); }
.posters { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 22px); }
.poster { aspect-ratio: 2 / 3; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(16px, 2vw, 28px); font: 400 clamp(48px, 7.4vw, 136px)/.86 var(--num); text-transform: uppercase; }
.poster.p1 { background: var(--red); color: var(--cream); }
.poster.p2 { background: var(--cream); color: var(--black); }
.poster.p3 { background: #1c3a2b; color: var(--cream); }
.show h3 { font: 500 22px/1.2 var(--sans); letter-spacing: -.02em; margin-top: 14px; }
.show p { color: var(--grey); font-size: 16px; }
@media (max-width: 760px) { .posters { grid-template-columns: 1fr; gap: 40px; } .poster { font-size: clamp(64px, 20vw, 120px); } }

/* Contact */
.say { padding: clamp(90px, 14vw, 240px) var(--pad) 0; }
.say p { color: var(--grey); font-size: clamp(18px, 1.6vw, 24px); margin-bottom: 12px; }
.mail { display: inline-block; font: 500 clamp(30px, 6.2vw, 112px)/1 var(--sans); letter-spacing: -.05em; word-break: break-word; }
.mail:hover { color: var(--red); }

footer { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: clamp(80px, 10vw, 160px) var(--pad) 24px; font-size: 15px; color: var(--grey); }
footer a:hover { color: var(--cream); }

/* 404 */
.lost { padding: clamp(60px, 10vw, 160px) var(--pad) 0; }
.lost h1 { font: 500 clamp(44px, 13.6vw, 250px)/.88 var(--sans); letter-spacing: -.055em; }
.lost a { display: inline-block; margin-top: 32px; font-size: clamp(22px, 2.4vw, 36px); text-decoration: underline; text-underline-offset: 6px; }