:root {
  --tar: #2a2a2b;
  --card: #f6f2e9;
  --ink: #1e1c1a;
  --muted: #6b655c;
  --vinyl: #2c1d57;
  --rim: #e8306f;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--tar); color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { font: 16px/1.5 Archivo, system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }

#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; cursor: default; outline: none; }
#gl.can-grab { cursor: grab; }
#gl.grabbing { cursor: grabbing; }
#gl.can-open { cursor: pointer; }
#dof { position: fixed; left: 0; right: 0; top: 0; height: 30%; pointer-events: none; backdrop-filter: blur(2.6px); -webkit-backdrop-filter: blur(2.6px);
  -webkit-mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%); mask-image: linear-gradient(#000 0%, rgba(0, 0, 0, .6) 45%, transparent 100%); }
@media (max-width: 760px) { #dof { height: 13%; backdrop-filter: blur(1.6px); -webkit-backdrop-filter: blur(1.6px); } }
#vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 95% at 50% 46%, transparent 55%, rgba(0, 0, 0, .34) 100%); }

.sr-only { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sr-only button:focus-visible { position: fixed; left: 16px; top: 16px; width: auto; height: auto; clip-path: none; padding: 10px 14px; background: var(--card); border: 0; border-radius: 6px; z-index: 50; }

/* ---------- the loading screen: caps dropping onto the stack, one per file that arrives */
#loader { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 45%, #3a3a3b, #222223 80%); transition: opacity .55s ease .1s, visibility 0s linear .7s; }
#loader.gone { opacity: 0; visibility: hidden; }
.ld-stack { position: relative; width: 150px; height: 190px; }
.ld-stack i { position: absolute; left: 0; bottom: 0; width: 150px; height: 50px; border-radius: 50%;
  background: var(--c); box-shadow: 0 3px 0 #d9d1c3, 0 4px 0 rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 255, 255, .55);
  transform: translate(var(--x), calc(var(--y) * -1)); animation: drop .32s cubic-bezier(.5, 0, .75, 0) both; }
.ld-stack i::after { content: ""; position: absolute; inset: 6px 17px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; background: radial-gradient(70% 70% at 35% 30%, rgba(255, 255, 255, .45), transparent 60%), var(--p, #888) center / 100% 100%; }
@keyframes drop { from { transform: translate(var(--x), calc(var(--y) * -1 - 140px)); opacity: 0; } 30% { opacity: 1; } to { transform: translate(var(--x), calc(var(--y) * -1)); } }

/* ---------- shared: the round close button, like a cap */
.shut { position: fixed; z-index: 3; top: calc(12px + var(--safe-t)); right: calc(12px + var(--safe-r)); width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
  background: radial-gradient(circle at 50% 50%, #fff 0 58%, transparent 59%), var(--rim);
  box-shadow: 0 0 0 2px #fff, 0 6px 14px rgba(0, 0, 0, .45), inset 0 -3px 0 rgba(0, 0, 0, .18);
  display: grid; place-items: center; transition: transform .15s; }
.shut span { font: 34px/1 Archivo, sans-serif; font-weight: 700; color: var(--ink); margin-top: -3px; }
.shut:hover { transform: rotate(-12deg) scale(1.05); }
.kbd .shut:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- the binder: clear vinyl sleeve pages, nine pockets a page */
#binder { position: fixed; inset: 0; z-index: 20; background: rgba(16, 15, 15, .66); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
#binder[hidden], #sheet[hidden] { display: none; }
.binder-scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(28px + var(--safe-t)) 16px calc(40px + var(--safe-b)); }
.binder-book { margin: 0 auto; max-width: 1180px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-radius: 14px;
  background: linear-gradient(90deg, #22164a 0 49.2%, #170f33 49.6% 50.4%, #22164a 50.8%), var(--vinyl);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), inset 0 0 0 3px rgba(255, 255, 255, .06), inset 0 2px 0 rgba(255, 255, 255, .12);
  padding: 18px; animation: open .35s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes open { from { transform: translateY(28px) scale(.97); opacity: 0; } }
.leaf { position: relative; padding: 22px 22px 22px 46px; }
.leaf:nth-child(even) { padding: 22px 46px 22px 22px; }
.leaf .rings { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; flex-direction: column; justify-content: space-around; padding: 40px 0; }
.leaf:nth-child(even) .rings { left: auto; right: 12px; }
.leaf .rings i { width: 18px; height: 18px; border-radius: 50%; background: #120b28; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .12); }
.sleeve { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-radius: 6px; overflow: hidden;
  background: rgba(255, 255, 255, .05); box-shadow: 0 0 0 2px rgba(255, 255, 255, .16), 0 10px 22px rgba(0, 0, 0, .35); }
.sleeve::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 6px;
  background: linear-gradient(115deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 22%, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .12) 70%, rgba(255, 255, 255, 0) 84%); }
.pocket { position: relative; aspect-ratio: 1; border: 0; padding: 9%; margin: 0; background: transparent; cursor: pointer; display: grid; place-items: center;
  box-shadow: inset -1px -1px 0 rgba(255, 255, 255, .22), inset 1px 1px 0 rgba(0, 0, 0, .25); }
.pocket img { width: 100%; height: 100%; display: block; border-radius: 50%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); transition: transform .18s; }
.pocket:hover img, .kbd .pocket:focus-visible img { transform: translateY(-4px) rotate(-4deg); }
.pocket:focus { outline: none; }
.kbd .pocket:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.pocket.empty { cursor: default; }
.pocket .slam { width: 100%; height: 100%; border-radius: 50%; }
.leaf.spare .sleeve { opacity: .8; }

@media (max-width: 760px) {
  .binder-scroll { top: calc(72px + var(--safe-t)); padding: 0 10px calc(28px + var(--safe-b)); }
  .binder-book { grid-template-columns: minmax(0, 1fr); padding: 8px; background: var(--vinyl); }
  .leaf, .leaf:nth-child(even) { padding: 14px 12px 14px 34px; }
  .leaf .rings, .leaf:nth-child(even) .rings { left: 8px; right: auto; padding: 30px 0; }
  .leaf .rings i { width: 14px; height: 14px; }
  .leaf.spare { display: none; }
}

/* ---------- a cap's page: a white insert in the binder, the cap in its pocket, then the work */
#sheet { position: fixed; inset: 0; z-index: 45; background: rgba(14, 13, 13, .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.sheet-scroll { position: absolute; inset: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: calc(24px + var(--safe-t)) 16px calc(48px + var(--safe-b)); }
.page { position: relative; margin: 0 auto; max-width: 900px; background: var(--card); border-radius: 6px; padding: 40px 48px 48px 84px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .05);
  background-image: linear-gradient(90deg, transparent 63px, rgba(232, 48, 111, .28) 63px 65px, transparent 65px);
  animation: open .35s cubic-bezier(.2, .8, .2, 1) both; --ab-fg: var(--ink); --ab-muted: var(--muted); --ab-accent: var(--rim); --ab-chrome: 150px; }
.holes { position: absolute; left: 20px; top: 70px; bottom: 30px; width: 22px; pointer-events: none;
  background: radial-gradient(circle at 11px 11px, #1b1a1a 0 10px, rgba(0, 0, 0, .18) 10.5px 11px, transparent 11.5px) 0 0 / 22px 290px repeat-y; }
.holes i { display: none; }
.cs-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 26px; margin-bottom: 30px; }
.cs-cap { flex: 0 0 auto; width: 150px; height: 150px; border-radius: 50%; transform: rotate(-6deg);
  background: center / cover no-repeat; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 10px 16px rgba(0, 0, 0, .28); }
.cs-names { min-width: 0; }
#csTitle { margin: 0; font: 46px/1.02 "Titan One", Archivo, sans-serif; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; }
.cs-client { margin: 8px 0 0; font: 700 13px/1.2 Archivo, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--rim); }
.cs-whole { margin: 0; display: grid; justify-items: center; }
.cs-zoom { all: unset; display: block; cursor: zoom-in; transform: rotate(2deg); transition: transform .2s; }
.cs-zoom:hover { transform: rotate(0deg) scale(1.02); }
.kbd .cs-zoom:focus-visible { outline: 3px solid var(--rim); outline-offset: 4px; }
.cs-whole img { display: block; max-width: 220px; width: auto; height: auto; max-height: 220px; object-fit: contain; border: 6px solid #fff; border-bottom-width: 6px; border-radius: 2px; box-shadow: 0 8px 18px rgba(0, 0, 0, .25); }
.cs-body { font-size: 17px; }
.cs-body .ab-lede { font-size: 1.12em; }
.cs-body .ab-heading { font: 22px/1.15 "Titan One", Archivo, sans-serif; margin-top: 10px; }
.cs-body .ab-credits { white-space: pre-line; padding-top: 14px; border-top: 2px dashed rgba(0, 0, 0, .14); }
.cs-body .ab-image img { border-radius: 3px; }

@media (max-width: 760px) {
  .sheet-scroll { top: calc(72px + var(--safe-t)); padding: 0 8px calc(32px + var(--safe-b)); }
  .page { padding: 24px 16px 32px 40px; background-image: linear-gradient(90deg, transparent 31px, rgba(232, 48, 111, .28) 31px 33px, transparent 33px); --ab-chrome: 110px; }
  .holes { left: 8px; top: 40px; width: 16px; background: radial-gradient(circle at 8px 8px, #1b1a1a 0 7px, transparent 7.5px) 0 0 / 16px 240px repeat-y; }
  .cs-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; }
  .cs-whole { grid-column: 1 / -1; justify-items: start; }
  .cs-whole img { max-width: 100%; max-height: 32vh; max-height: 32svh; }
  .cs-cap { width: 96px; height: 96px; }
  #csTitle { font-size: 30px; }
  .cs-body { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .binder-book, .page, .ld-stack i { animation: none; } }