/* The seat back, the card in its pocket, and the card itself: one fold-out strip of laminated leaves. */
:root {
  /* a print palette: two inks and a laminated off-white, the way the real cards are printed */
  --navy: #2c3a52;
  --navy-2: #34435c;
  --red: #b04a3e;
  --paper: #f2efe6;
  --paper-2: #e8e4d8;
  --back: #e2ded3;
  --ink: #2c3a52;
  --muted: #66707e;
  --print: saturate(.6) contrast(.9) brightness(1.04) sepia(.1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .17 0 0 0 0 .2 0 0 0 .9 -.28'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --w: 330px; --ph: 241px; --lw: 354px; --lh: 598px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #11151c; overflow: hidden; }
body { font: 500 15px/1.45 Barlow, system-ui, sans-serif; color: var(--ink); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

/* ------------------------------------------------------------- the seat in front of you */
#seat {
  position: fixed; inset: 0; background: #11151c url(art/seat.webp) no-repeat;
  background-size: cover; background-position: center bottom;
}
#seat::after { /* cabin light: a little vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(5, 7, 12, .45));
}

/* ------------------------------------------------------------- the scroller that holds the card */
#scroller { position: fixed; inset: 0; overflow: hidden; scrollbar-width: none; overscroll-behavior: contain; }
#scroller::-webkit-scrollbar { display: none; }
.h #scroller.out { overflow-x: auto; overflow-y: hidden; }
.v #scroller.out { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
#card { position: relative; }
.h #card { display: inline-block; white-space: nowrap; }
#hand { position: relative; width: var(--lw); height: var(--lh); will-change: transform; }
.v #hand { margin: 0 auto; }
#strip { position: relative; width: var(--lw); height: var(--lh); transform-origin: 50% 100%; }
#scroller:not(.out) #hand { cursor: pointer; }

/* ------------------------------------------------------------- a leaf of the card */
.leaf {
  position: absolute; left: 0; top: 0; width: var(--lw); height: var(--lh);
  transform-style: flat; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.h .leaf { transform-origin: 0 50%; }
.v .leaf { transform-origin: 50% 0; }
.leaf.folded { visibility: hidden; }
.face {
  position: absolute; inset: 0; overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column; white-space: normal;
}
/* the card's shadow on the seat: a box with no fill, so a clipped corner still shows the seat */
.leaf .drop { position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: 0 20px 26px -14px rgba(0, 0, 0, .62), 0 2px 5px rgba(0, 0, 0, .28); }
/* the outer corners of the whole card are rounded; the folds are square */
.h .leaf.first .face { border-radius: 0 0 0 11px; }
.h .leaf.last .face { border-radius: 0 11px 11px 0; }
.v .leaf.first .face { border-radius: 0 11px 0 0; }
.v .leaf.last .face { border-radius: 0 0 11px 11px; }
/* creases: alternate valley and mountain folds catch the cabin light differently */
.leaf .crease { position: absolute; pointer-events: none; z-index: 3; }
.h .leaf .crease { left: 0; top: 0; bottom: 0; width: 16px; }
.v .leaf .crease { left: 0; right: 0; top: 0; height: 16px; }
.h .leaf.valley .crease { background: linear-gradient(90deg, rgba(20, 28, 45, .22), rgba(20, 28, 45, .06) 40%, transparent); }
.h .leaf.mountain .crease { background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, rgba(20, 28, 45, .18) 0 1px, transparent 1px); }
.v .leaf.valley .crease { background: linear-gradient(180deg, rgba(20, 28, 45, .22), rgba(20, 28, 45, .06) 40%, transparent); }
.v .leaf.mountain .crease { background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%), linear-gradient(180deg, rgba(20, 28, 45, .18) 0 1px, transparent 1px); }
/* the swing: a shadow that lifts as the leaf comes flat */
.leaf .shade { position: absolute; inset: 0; background: #0b1220; opacity: 0; pointer-events: none; z-index: 4; }
/* laminate: a fixed sheen plus a soft glare that follows the pointer */
.leaf .gloss {
  position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: screen;
  background:
    radial-gradient(circle at var(--gx, 140%) var(--gy, -40%), rgba(255, 255, 255, .34), rgba(255, 255, 255, .08) 22%, transparent 42%),
    linear-gradient(118deg, transparent 18%, rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, .03) 38%, transparent 47%, transparent 70%, rgba(255, 255, 255, .07) 82%, transparent 92%);
}
.leaf .scuff { position: absolute; inset: 0; pointer-events: none; z-index: 5; opacity: .5; mix-blend-mode: multiply;
  background: linear-gradient(transparent 0 60%, rgba(120, 110, 90, .05) 61%, transparent 63%), radial-gradient(60% 40% at 70% 90%, rgba(120, 110, 90, .05), transparent); }

/* the band across the top of every leaf */
.band { position: relative; flex: 0 0 30px; background: var(--navy); border-bottom: 3px solid var(--red); display: flex; align-items: center; padding: 0 12px; }
.band .word { font: italic 700 18px/1 "Barlow Condensed", sans-serif; letter-spacing: .05em; color: #fff; text-transform: uppercase; }
.leaf.first .band .word { margin-left: 30px; }

/* two panels per leaf */
.panels { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 12px; }
.panel { all: unset; display: block; cursor: pointer; width: var(--w); border-radius: 5px; }
.panel:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.pimg { position: relative; display: block; width: var(--w); height: var(--ph); border: 1.5px solid var(--navy); border-radius: 3px; overflow: hidden; background: #dfe3e3; }
.pimg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.pimg svg.paint { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pimg img, .pimg svg.paint, .sheet-art img, .sheet-art svg.paint, .lift img, .lift svg.paint { filter: var(--print); }
/* ink on laminate: a fine grain over the printed pictures and, fainter, over the whole card */
.pimg::after, .sheet-art::after, .lift::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--grain); background-size: 180px; mix-blend-mode: multiply; opacity: .55; }
.face::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--grain); background-size: 180px; mix-blend-mode: multiply; opacity: .3; }
.panel.lifted .pimg img, .panel.lifted .pimg svg { opacity: 0; }
.panel.lifted .pimg { background: #e9ecef; box-shadow: inset 0 0 0 1px rgba(27, 45, 77, .15); }
.pnum {
  position: absolute; left: 6px; top: 6px; z-index: 2; min-width: 25px; height: 25px; padding: 0 5px; border-radius: 13px;
  background: var(--navy); color: #fff; font: 700 15px/25px "Barlow Semi Condensed", sans-serif; text-align: center;
  box-shadow: 0 0 0 2px var(--paper);
}
.ptitle { display: block; height: 26px; padding: 5px 2px 0; font: 700 13.5px/1.2 "Barlow Semi Condensed", sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .out .panel:hover .pimg { box-shadow: 0 0 0 3px rgba(198, 47, 43, .35); }
}

/* the dog-eared corner: the card turns over */
.dogear { all: unset; position: absolute; left: 0; top: 0; width: 44px; height: 44px; z-index: 6; cursor: pointer; }
.dogear::before { /* the folded-over corner, showing the card's back */
  content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  background: linear-gradient(135deg, transparent 50%, #d9d6cd 50%, #f4f2ec 80%);
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .35));
}
.dogear:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }
.leaf.first .face.front { clip-path: polygon(32px 0, 100% 0, 100% 100%, 0 100%, 0 32px); }
@media (hover: hover) { .dogear:hover::before { width: 37px; height: 37px; } .leaf.first .face.front:has(.dogear:hover) { clip-path: polygon(37px 0, 100% 0, 100% 100%, 0 100%, 0 37px); } }

/* the cover can turn over to show the back */
.leaf.first { transform-style: preserve-3d; backface-visibility: visible; -webkit-backface-visibility: visible; }
.h .leaf.first, .v .leaf.first { transform-origin: 50% 50%; }
.leaf.first .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf.first .face.back { transform: rotateY(180deg); }
.leaf.first .face.back .dogear { left: auto; right: 0; }
.leaf.first .face.back .dogear::before { left: auto; right: 0; background: linear-gradient(225deg, transparent 50%, #d9d6cd 50%, #f4f2ec 80%); filter: drop-shadow(-2px 2px 2px rgba(0, 0, 0, .35)); }
.leaf.first .face.back { clip-path: polygon(0 0, calc(100% - 32px) 0, 100% 32px, 100% 100%, 0 100%); }

/* ------------------------------------------------------------- the back: what's in this card */
.face:has(.contents) .gloss { opacity: .45; }
.contents { flex: 1; display: flex; flex-direction: column; padding: 10px 12px 10px; min-height: 0; }
.contents ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(13, auto); column-gap: 8px; }
.contents li { min-width: 0; border-bottom: 1px solid rgba(27, 45, 77, .14); }
.contents li button { all: unset; display: flex; align-items: center; gap: 6px; width: 100%; padding: 0 0; height: calc((var(--lh) - 190px) / 13); min-height: 22px; cursor: pointer; font: 600 12.5px/1.1 "Barlow Semi Condensed", sans-serif; letter-spacing: .02em; text-transform: uppercase; color: var(--navy); }
.contents li button:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }
.contents li b { flex: 0 0 21px; height: 19px; border-radius: 10px; background: var(--navy); color: #fff; font: 700 11.5px/19px "Barlow Semi Condensed", sans-serif; text-align: center; }
.contents li span { min-width: 0; line-height: 1.02; }
@media (hover: hover) { .contents li button:hover span { color: var(--red); } }
.colophon { margin-top: auto; padding-top: 10px; display: grid; gap: 2px; font: 500 12px/1.35 Barlow, sans-serif; color: var(--muted); }
.colophon .who { font: 700 13px/1.2 "Barlow Semi Condensed", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.colophon a { color: var(--navy); text-decoration: none; border-bottom: 1px solid rgba(27, 45, 77, .3); }
.colophon .keep { margin-top: 6px; padding-top: 6px; border-top: 2px solid var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 10.5px/1.2 "Barlow Semi Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--navy); }
.colophon .snd { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 13px; display: grid; place-items: center; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(27, 45, 77, .25); }
.colophon .snd svg { width: 16px; height: 16px; }
.h .colophon .snd { display: none; }

/* ------------------------------------------------------------- the rest of the card, still folded */
.flap { all: unset; position: absolute; z-index: 0; cursor: pointer; transition: width .25s, height .25s, opacity .2s; }
.flap::before, .flap::after { content: ""; position: absolute; }
.h .flap { top: 7px; height: calc(var(--lh) - 14px); width: 20px; }
.v .flap { left: 7px; width: calc(var(--lw) - 14px); height: 20px; }
.h .flap::before { inset: 0; clip-path: polygon(0 0, 100% 2.5%, 100% 97.5%, 0 100%); background: linear-gradient(90deg, #b9b6ad, var(--back) 35%, #f6f4ee); }
.h .flap::after { left: 0; right: 0; top: 0; height: 30px; clip-path: polygon(0 0, 100% 2.5%, 100% 100%, 0 100%); background: var(--navy-2); }
.v .flap::before { inset: 0; clip-path: polygon(0 0, 100% 0, 97.5% 100%, 2.5% 100%); background: linear-gradient(180deg, #b9b6ad, var(--back) 35%, #f6f4ee); }
.v .flap::after { top: 0; bottom: 0; left: 0; width: 6px; background: var(--navy-2); clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%); }
.flap { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
@media (hover: hover) { .h .flap:hover { width: 32px; } .v .flap:hover { height: 32px; } }
.flap.nudge { animation: nudge 1.4s ease-in-out 1; }
.h .flap.nudge { animation-name: nudgeh; }
.v .flap.nudge { animation-name: nudgev; }
@keyframes nudgeh { 0%, 100% { width: 20px; } 35% { width: 40px; } 60% { width: 18px; } 78% { width: 26px; } }
@keyframes nudgev { 0%, 100% { height: 20px; } 35% { height: 40px; } 60% { height: 18px; } 78% { height: 26px; } }
.flap[hidden] { display: none; }
.flap:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* ------------------------------------------------------------- sound: an overhead-panel button, in the pocket's corner */
#sound { position: fixed; right: 16px; bottom: 14px; z-index: 6; width: 40px; height: 40px; border-radius: 20px; border: 0; padding: 0; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #e9ebee, #b9bec6); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), inset 0 -2px 3px rgba(0, 0, 0, .2); display: grid; place-items: center; }
#sound svg, .colophon .snd svg { width: 20px; height: 20px; fill: none; stroke: #2a3445; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#sound .spk, .colophon .snd .spk { fill: #2a3445; }
#sound[aria-pressed="true"] .off, .snd[aria-pressed="true"] .off { display: none; }
#sound[aria-pressed="false"] .wave, .snd[aria-pressed="false"] .wave { display: none; }
#sound[hidden] { display: none; }
#sound:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.v #sound { display: none; }

/* ------------------------------------------------------------- a panel, lifted off the card */
#sheet { padding: 0; margin: 0; border: 0; background: transparent; width: 100%; height: 100%; max-width: none; max-height: none; overflow: hidden; }
#sheet::backdrop { background: rgba(7, 10, 16, .74); }
#sheet[open] { display: block; }
.sheet-card {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(920px, calc(100% - 32px)); height: calc(100% - 36px); border-radius: 16px; overflow: hidden;
  background: var(--paper); box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  border-top: 10px solid var(--navy);
}
.sheet-card::after { /* the laminate catches the light here too */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
  background: linear-gradient(118deg, transparent 12%, rgba(255, 255, 255, .14) 22%, transparent 32%);
}
.sheet-scroll { height: 100%; overflow: auto; overscroll-behavior: contain; padding: 22px 26px 48px; }
.sheet-top { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); grid-template-areas: "art head"; gap: 26px; align-items: start; margin-bottom: 26px; }
.sheet-head { grid-area: head; display: flex; align-items: flex-start; gap: 12px; margin: 4px 52px 0 0; }
.sheet-lede { margin: 16px 0 0 !important; font: 500 18px/1.45 Barlow, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--navy) !important; }
.sheet-lede:empty { display: none; }
.sheet-head .pnum { position: static; flex: 0 0 auto; height: 32px; min-width: 32px; border-radius: 16px; font-size: 19px; line-height: 32px; box-shadow: none; }
.sheet-head h2 { margin: 0; font: 700 26px/1.1 "Barlow Semi Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); }
.sheet-head p { margin: 4px 0 0; font: 600 13px/1.2 "Barlow Semi Condensed", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.sheet-art { grid-area: art; width: 100%; aspect-ratio: 1536 / 1120; border: 2px solid var(--navy); border-radius: 5px; overflow: hidden; position: relative; background: #dfe6eb; }
.sheet-art img { display: block; width: 100%; height: 100%; }
.sheet-art svg.paint { position: absolute; inset: 0; width: 100%; height: 100%; }
.sheet-body { --ab-fg: #1f2a3a; --ab-muted: #5d6b80; --ab-accent: var(--red); --ab-chrome: 110px; max-width: 840px; }
.sheet-body .ab-lede { font: 500 18px/1.45 Barlow, sans-serif; color: var(--navy); }
.sheet-body .ab-heading { font: 700 15px/1.2 "Barlow Semi Condensed", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); border-top: 2px solid var(--navy); padding-top: 10px; }
.sheet-body .ab-text { font: 400 15.5px/1.55 Barlow, sans-serif; }
.sheet-body .ab-credits { padding-top: 12px; border-top: 1px solid rgba(27, 45, 77, .2); }
.sheet-body figcaption { font: 600 13px/1.3 "Barlow Semi Condensed", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.sheet-close {
  position: absolute; right: 14px; top: 12px; z-index: 3; width: 44px; height: 44px; border-radius: 22px; border: 0; cursor: pointer;
  background: var(--navy); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--paper);
}
.sheet-close svg { width: 20px; height: 20px; stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none; }
.sheet-close:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.lift { position: fixed; z-index: 10; margin: 0; pointer-events: none; transform-origin: 0 0; border: 2px solid var(--navy); border-radius: 5px; overflow: hidden; background: #dfe6eb; box-shadow: 0 24px 50px rgba(0, 0, 0, .45); }
.lift img { display: block; width: 100%; height: 100%; }
.lift svg.paint { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 760px) {
  .sheet-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "art"; gap: 16px; margin-bottom: 20px; }
  .sheet-lede { font-size: 16px !important; margin-top: 10px !important; }
}
@media (max-width: 640px) {
  .sheet-card { width: calc(100% - 12px); height: calc(100% - 12px); border-radius: 14px; }
  .sheet-scroll { padding: 16px 14px 40px; }
  .sheet-head { margin-right: 48px; }
  .sheet-head h2 { font-size: 21px; }
  .sheet-close { right: 8px; top: 8px; }
}

/* ------------------------------------------------------------- loading: the overhead signs are on */
#loader { position: fixed; inset: 0; z-index: 20; display: grid; place-content: center; justify-items: center; gap: 26px;
  background: radial-gradient(80% 60% at 50% 40%, #1d2430, #0b0e14); transition: opacity .6s ease; }
#loader.done { opacity: 0; pointer-events: none; }
.psu { display: flex; gap: 18px; padding: 16px 22px; border-radius: 14px; background: linear-gradient(#cfd2d6, #a9aeb5); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .6), inset 0 -3px 6px rgba(0, 0, 0, .25), 0 10px 30px rgba(0, 0, 0, .6); }
.sign { width: 78px; height: 56px; border-radius: 6px; display: grid; place-items: center; background: #f6e9c4;
  box-shadow: inset 0 0 0 2px #7b7f86, 0 0 18px rgba(255, 214, 140, .75), 0 0 46px rgba(255, 200, 110, .35); animation: lit 2.4s ease-in-out infinite; }
.sign svg { width: 46px; height: 46px; fill: none; stroke: #2a2a2a; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sign .slash { stroke: #c62f2b; }
.sign .strap { stroke-width: 6; stroke-linecap: butt; }
@keyframes lit { 50% { box-shadow: inset 0 0 0 2px #7b7f86, 0 0 24px rgba(255, 214, 140, .9), 0 0 60px rgba(255, 200, 110, .45); } }
.bar { width: 150px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.bar i { display: block; width: 0; height: 100%; background: #f2d79c; transition: width .3s; }

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