/* moving between pages (a row's "See all", the way back): one quick crossfade, the posters you were looking at gliding
   into their new places (wall.js names them for the change); no white flash */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-old(root) { animation: vt-out .16s ease-out both; }
::view-transition-new(root) { animation: vt-in .3s ease-out .34s both; }
::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(*), ::view-transition-new(*) { mix-blend-mode: normal; }
::view-transition-old(*):only-child, ::view-transition-new(*):only-child { animation-duration: .2s; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation: none !important; } }
:root { color-scheme: light; --gap: clamp(16px, 3vw, 40px); }
[hidden] { display: none !important; }
/* index: the page is covered in posters, edge to edge, with a slim sticky filter bar */
body.wall, body.poster { max-width: none; padding: 0; background: #000; color: #ececee; color-scheme: dark; }
.bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  padding: 6px max(10px, env(safe-area-inset-right, 0px)) 6px max(10px, env(safe-area-inset-left, 0px));
  background: rgba(0,0,0,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 13px; }
.bar h1 { font-size: 14px; font-weight: 700; margin: 0 6px 0 0; white-space: nowrap; }
.bar input, .bar select { font: inherit; font-size: 13px; color: inherit; background: #17171a; border: 1px solid #2b2b30;
  border-radius: 6px; padding: 3px 8px; height: 28px; min-width: 0; }
.bar input { flex: 1 1 160px; max-width: 280px; }
.bar select { flex: 0 1 auto; max-width: 200px; }
.bar input:focus, .bar select:focus { outline: 1px solid #8fa0ff; outline-offset: 0; }
#count { margin-left: auto; font-variant-numeric: tabular-nums; }
.wall-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .wall-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wall-grid { grid-template-columns: repeat(2, 1fr); } }
.wall-grid li[hidden] { display: none; }
.wall-grid a { position: relative; display: block; aspect-ratio: 5637 / 8037; overflow: hidden; background: #0b0b0c; }
.wall-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.wall-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; font-size: 14px; line-height: 1.3;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.wall-grid a:hover span, .wall-grid a:focus-visible span { opacity: 1; }
.wall-grid a:focus-visible { outline: 2px solid #8fa0ff; outline-offset: -2px; }
.empty { padding: 40px 16px; text-align: center; }
.head { position: fixed; top: 0; left: 0; right: 0; z-index: 6; background: rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.head .bar { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bar input { flex: 1 1 260px; max-width: 520px; }
.hint { font-size: 12px; color: #9fb0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.strip { display: flex; gap: 4px; padding: 0 max(10px, env(safe-area-inset-left, 0px)) 6px; overflow-x: auto;
  scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
.strip button { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; cursor: pointer;
  background: #1a1a1d; opacity: .62; transition: opacity .15s, outline-color .15s; outline: 2px solid transparent; outline-offset: -2px; }
.strip button img { display: block; width: 100%; height: 100%; object-fit: cover; }
.strip button:hover, .strip button:focus-visible { opacity: 1; }
.strip button.on { opacity: 1; outline-color: #fff; }
.strip button.txt { color: #ccc; font-size: 16px; }
.strip button.sw { opacity: .8; }
.tile.flash::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #fff; animation: flash 1.4s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.ov { position: fixed; inset: 0; z-index: 15; background: #000; display: grid; place-items: center; padding: 4px; overflow: auto; }
.ovgrid { display: grid; gap: 0; }
.ovgrid button { padding: 0; border: 0; background: #0b0b0c; aspect-ratio: 5637 / 8037; cursor: pointer; display: block; }
.ovgrid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ovgrid button:hover img, .ovgrid button:focus-visible img { filter: brightness(1.15); }
.ovgrid button:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.plain { padding: 16px; columns: 3 14rem; }
/* sideways rail: columns of three posters filling the screen under the header, looping forever */
.track { position: absolute; top: 0; left: 0; height: 100%; display: flex; will-change: transform; backface-visibility: hidden; }
.col { flex: none; height: 100%; display: flex; flex-direction: column; }
.col .tile, .cell-empty { height: calc(100% / 3); width: 100%; aspect-ratio: auto; }
.cell-empty { background: #000; }
.sep { flex: none; height: 100%; display: grid; place-items: center; background: #000; border-left: 1px solid #1c1c1f; border-right: 1px solid #1c1c1f; }
.sep span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: clamp(13px, 1.3vw, 20px); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #d8d8dc; white-space: nowrap; }
.sep.swatch { background: var(--sw); }
.sep.swatch span { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.bar button { font: inherit; font-size: 13px; color: inherit; background: #17171a; border: 1px solid #2b2b30;
  border-radius: 6px; padding: 3px 10px; height: 28px; cursor: pointer; }
.rail { display: none; }
.js body.wall { overflow-x: hidden; }
/* four-row brick rail under the header */
.rail4 { display: none; }
.js .rail4 { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--top, 96px); overflow: hidden;
  touch-action: none; cursor: default; user-select: none; -webkit-user-select: none; }
.js .rail4.drag { cursor: default; }
.row4 { position: absolute; left: 0; display: flex; will-change: transform; backface-visibility: hidden; contain: layout style; }
.rail4 .empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.tile.lifted { visibility: hidden; }
/* infinite gallery: tiles are placed absolutely and recycled as you pan */
.rail4 .layer { position: absolute; inset: 0; }
.rail4 .layer .tile { position: absolute; left: 0; top: 0; width: var(--tw); height: var(--th); aspect-ratio: auto; will-change: transform; }

/* an opened poster: full wall height, in place; the tiles beside it slide over to make room */
.big { position: absolute; z-index: 5; transform-origin: 0 0; will-change: transform; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 70px rgba(0,0,0,.7); background: #0b0b0c; }
.big .zbox { width: 100%; height: 100%; aspect-ratio: auto; cursor: ew-resize; }
.big:not(.ready) .cmp-bar, .big:not(.ready) .side { opacity: 0; }
.big .cmp-bar, .big .side { transition: opacity .25s ease; }
.bigbar { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity .3s ease .2s; }
.big.on .bigbar { opacity: 1; }
.bigbar .pill { border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.bigbar .ztitle { margin-right: auto; font-weight: 600; cursor: default; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* an opened poster: grows from its tile to the full window height over a blurred copy of itself */
.zoom { position: fixed; inset: 0; z-index: 30; }
.zoom .zbg { position: absolute; inset: -10%; background-size: cover; background-position: center; cursor: zoom-out;
  filter: blur(42px) saturate(1.5) brightness(.55); opacity: 0; transition: opacity .42s ease; }
.zoom.on .zbg { opacity: 1; }
.zoom .zstage { position: fixed; transform-origin: 0 0; will-change: transform; box-shadow: 0 20px 90px rgba(0,0,0,.65); }
.zoom .zbox { width: 100%; height: 100%; aspect-ratio: auto; cursor: ew-resize; }
.zoom:not(.ready) .cmp-bar, .zoom:not(.ready) .side { opacity: 0; }
.zoom .cmp-bar, .zoom .side { transition: opacity .25s ease; }
.zoom .zbar { position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px)); display: flex; gap: 8px; align-items: center; z-index: 2; opacity: 0;
  transition: opacity .3s ease .15s; pointer-events: none; }
.zoom.on .zbar { opacity: 1; }
.zoom .zbar .pill { pointer-events: auto; border: 0; cursor: pointer; font: inherit; font-size: 13px; }
.zoom .ztitle { margin-right: auto; font-weight: 600; cursor: default; }
.zoom .pnav { position: fixed; opacity: 0; transition: opacity .3s ease .15s; border: 0; cursor: pointer; }
.zoom.on .pnav { opacity: 1; }
.zoom .zprev { left: max(10px, env(safe-area-inset-left, 0px)); } .zoom .znext { right: max(10px, env(safe-area-inset-right, 0px)); }
/* shelves: one per part; each row holds three posters across the screen and scrolls sideways */
.shelves { padding-top: var(--top, 96px); }
.shelf { position: relative; margin: 0 0 clamp(18px, 2.5vw, 36px); }
.shelf-title { margin: 0; padding: 14px max(14px, env(safe-area-inset-left, 0px)) 10px; font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 700; letter-spacing: .02em; }
.shelf-title .quiet { font-weight: 500; font-size: .75em; margin-left: .35em; }
.shelf.swatch .shelf-title { border-left: 8px solid var(--sw); }
.shelf-row { display: flex; align-items: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: auto;
  scrollbar-width: none; overscroll-behavior-x: contain; cursor: default; }
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-row.drag { cursor: default; scroll-snap-type: none; }
.shelf-row .tile { flex: none; width: auto; height: 75vh; height: 75svh; aspect-ratio: 26 / 38; scroll-snap-align: center;
  transition: height .45s cubic-bezier(.2,.8,.2,1); }
.shelf-row .tile.open { height: calc(100vh - var(--top, 96px)); height: calc(100svh - var(--top, 96px)); cursor: default; z-index: 2;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 14px 60px rgba(0,0,0,.7); }
.shelf-row .tile.open > span { display: none; }
.shelf-row .tile.open > img { object-fit: contain; }
.tov { position: absolute; inset: 0; }
.tov .zbox { width: 100%; height: 100%; aspect-ratio: auto; cursor: ew-resize; }
.tov:not(.ready) .cmp-bar, .tov:not(.ready) .side { opacity: 0; }
.tov .cmp-bar, .tov .side { transition: opacity .25s ease; }
.tov .bigbar { opacity: 1; }
/* light mode only. No frames or borders: posters sit on white, spaced as if each had a RODALM mat around it
   (18.79 x 26.79 in art in a 24 x 36 in mat: 2.6 in each side, 4.6 in above and below). The art is 75% of the screen
   height, so a tile (art + its share of mat) is 75vh x 36/26.79 tall. */
html, body.wall, body.poster { color-scheme: light; }
body.wall, body.poster { background: #fff; color: #1d1d1f; }
.head { background: rgba(255,255,255,.94) !important; border-bottom: 1px solid #ececec; }
.bar h1, .shelf-title { color: #1d1d1f; }
.quiet { color: #6c6b68; opacity: 1; }
.bar input, .bar select, .bar button { background: #f6f6f5 !important; color: #1d1d1f !important; border-color: #dcdcda !important; }
.hint { color: #3d4fbf; }
.strip button { background: #f2f2f0; outline-color: transparent; }
.strip button.on { outline-color: #1d1d1f; }
.shelf { margin: 0; }
.shelf-title { padding-bottom: 0; }
.shelf-row { gap: 0; padding: 0 0 0 max(0px, env(safe-area-inset-left, 0px)); }
.shelf-row .tile { background: transparent; padding: 0; container-type: inline-size; box-shadow: none; overflow: visible;
  height: calc(75vh * 36 / 26.79); height: calc(75svh * 36 / 26.79); aspect-ratio: 24 / 36; }
.shelf-row .tile .mat { position: absolute; inset: 0; background: transparent; padding: 19.17cqw 10.83cqw; box-shadow: none; }
.shelf-row .tile .art { position: relative; width: 100%; height: 100%; overflow: hidden; }
.shelf-row .tile .art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.shelf-row .tile > span { left: 10.83cqw; right: 10.83cqw; bottom: 7cqw; padding: 0; background: none; color: #555; font-size: 14px;
  text-align: center; z-index: 1; }
.shelf-row .tile:hover img { filter: none; }
.shelf-row .tile.open { height: calc(100vh - var(--top, 96px)); height: calc(100svh - var(--top, 96px)); aspect-ratio: 5637 / 8037; box-shadow: none; }
.shelf-row .tile.open .mat { padding: 0; }
.nav { background: rgba(255,255,255,.9) !important; color: #1d1d1f !important; box-shadow: 0 1px 8px rgba(0,0,0,.15); }
.ov { background: #fff !important; }
.info-card { background: #fff !important; color: #1d1d1f; border-color: #e2e2e0 !important; }
body.wall footer, body.poster footer { color: #55544f; }
body.poster .bg { filter: blur(46px) saturate(1.2) brightness(1.15); opacity: .55; }
/* minimal design: frosted bar with the wordmark and a search field; categories as centred small caps; exactly three
   posters across each row, each with its share of a RODALM mat (24 x 36 in around 18.79 x 26.79 in of art) */
.head { border-bottom: 1px solid rgba(0,0,0,.08) !important; background: rgba(255,255,255,.78) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.head .bar { height: 52px; padding: 0 max(22px, env(safe-area-inset-right, 0px)) 0 max(22px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; }
.head h1 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0; color: #1d1d1f; }
.head input { flex: 0 1 220px; max-width: 220px; height: 32px; border-radius: 9px; border: 0 !important; padding: 0 12px;
  background: rgba(0,0,0,.06) !important; color: #1d1d1f; font-size: 14px; }
.head input::placeholder { color: #86868b; }
.head input:focus { outline: none; background: rgba(0,0,0,.09) !important; box-shadow: 0 0 0 3px rgba(0,113,227,.25); }
.head input::-webkit-search-cancel-button { -webkit-appearance: none; }
.strip, .hint, #count, #sortbtn, #ovbtn, #infobtn, .nav { display: none !important; }
.shelves { padding-top: var(--top, 53px); }
.shelf-title { padding: 44px 16px 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; color: #1d1d1f; }
.shelf-row { scroll-snap-type: x mandatory; scrollbar-width: none; }
.shelf-row .tile { flex: 0 0 calc(100% / 3); width: auto; height: auto; aspect-ratio: 24 / 36; scroll-snap-align: start; cursor: pointer; }
/* caption: one quiet line in the mat under each poster */
.shelf-row .tile > span.cap { position: absolute; left: 10.83cqw; right: 10.83cqw; top: auto; bottom: auto; padding: 0; background: none;
  top: calc(100% - 19.17cqw + 2.6cqw); color: #6e6e73; font-size: clamp(11px, 2.05cqw, 14px); line-height: 1.35; letter-spacing: 0;
  text-align: center; opacity: 1; display: flex; flex-direction: column; gap: 1px; }
.shelf-row .tile > span.cap b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shelf-row .tile > span.cap b.c0 { color: #1d1d1f; font-weight: 600; white-space: normal; overflow: visible; text-overflow: clip; text-wrap: balance; }
.shelf-row .tile > span.cap b.c0 .ln { display: block; }   /* a comma or semicolon starts the second line; nothing is cut off */
.shelf-row .tile > span.cap b.c2 { color: #86868b; }
.shelf-row .tile.open > span.cap { display: none; }
/* tighter: the category name sits just above the posters' tops */
.shelf-title { padding: 30px 16px 0 !important; position: relative; z-index: 1; }
main.shelves .shelf:not(:first-child) .shelf-title { padding-top: 96px !important; }   /* more air above each part's title */
.shelf-row { margin-top: -4.9vw; }
.shelf-row .tile .art > img { transition: none; }
/* hover: the whole poster grows (nothing inside it is cropped), drawn over its neighbours so nothing else moves */
.shelf-row .tile .mat { transition: transform .45s cubic-bezier(.2,.8,.2,1); transform-origin: 50% 50%; }
.shelf-row .tile:not(.open):hover { z-index: 3; }
.shelf-row .tile.open { flex: 0 0 auto; height: calc(100vh - var(--top, 53px)); height: calc(100svh - var(--top, 53px)); cursor: default; }
.shelf-row .tile.open:hover .art > img { transform: none; }
main.shelves a.tile, main.shelves a.tile *, main.shelves a.tile:hover, main.shelves a.tile:hover * { cursor: pointer !important; }   /* the pointing hand over a poster: it opens */
main.shelves .shelf-row.drag a.tile, main.shelves .shelf-row.drag a.tile * { cursor: default !important; }   /* not while dragging a row */
/* room for the grown poster inside the rows (which clip what overflows), with no change to where anything sits */
main.shelves .shelf.capped .shelf-row, main.shelves .shelf.every .shelf-row { padding-top: 22px !important; padding-bottom: 22px !important; margin-top: -22px !important; margin-bottom: -22px !important; }
/* home rows show each part's first three; "See all" opens that part's own page (?part=N) with every poster in a grid */
.shelf.capped .shelf-row { overflow: hidden; scroll-snap-type: none; }
body.partview .hero, body.partview .shelf-title { display: none; }
.partbar { display: grid; justify-items: center; gap: 9px; text-align: center;
  padding: 40px max(22px, env(safe-area-inset-right, 0px)) 20px max(22px, env(safe-area-inset-left, 0px)); }
.partbar .back { font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: #86868b; text-decoration: none; }
.partbar .back::before { content: "← "; letter-spacing: 0; }
.partbar .back:hover { color: #1d1d1f; }
.partbar h1 { margin: 0; font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-weight: 400; font-size: clamp(17px, 1.5vw, 25px);
  letter-spacing: .07em; line-height: 1.15; color: #1d1d1f; text-wrap: balance; }
.partbar .pcount { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #86868b; }
.shelf.every .shelf-row { flex-wrap: wrap; overflow: visible; margin-top: 0; scroll-snap-type: none; }
/* part titles: the part's emblem in pen ink, then its Roman numeral and name in Cinzel, like the wordmark */
.shelf { --embh: clamp(24px, 2.2vw, 36px); }
.shelf-title.ptitle { display: flex; flex-direction: column; align-items: center; gap: 9px; text-transform: none;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-weight: 400; font-size: clamp(17px, 1.5vw, 25px); letter-spacing: .07em;
  line-height: 1.15; text-wrap: balance; }
.shelf-title .pemb { height: var(--embh); display: flex; align-items: flex-end; justify-content: center; color: #1d1d1f; }
.shelf-title .pemb svg { height: 100%; width: auto; overflow: visible; }
.shelf-title .pemb path { fill: currentColor; stroke: none; }
/* the Collaborations emblem is a bottle (Araki's Yebisu bottle, from the Yebisu art): tall and narrow, so it stands
   taller than the roundels to read at all */
.shelf-title .pemb[data-key="20"], .partbar .pemb[data-key="20"] { height: calc(var(--embh) * 1.9); }
/* the steel ball that spins (Steel Ball Run's emblem) */
/* the emblems' easter eggs (wall.js): drawn on twos with pen strokes; The World inverts the screen in a sphere */
.pemb.fx { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pemb.fx:focus { outline: none; }
.pemb.fx:focus-visible { outline: 1px solid #d2d2d7; outline-offset: 4px; }
.pemb .fxo path { fill: currentColor; stroke: none; }
.pemb .fxo path.sil, .pemb .fxo path[fill="#fff"] { fill: #fff; }   /* Killer Queen's skull: white face */
.zw-veil { position: fixed; inset: 0; z-index: 2147483000; -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); clip-path: circle(0 at 50% 50%); }
.zw-ring { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 2147483001; pointer-events: none; overflow: visible; }
.zw-ring path { fill: #1d1d1f; }
html.zw, html.zw * { cursor: none !important; }
.zw-cursor { position: fixed; z-index: 2147482999; width: 32px; height: 32px; max-width: none; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.zw-cursor.win { filter: none; }
.pemb.spinball { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pemb.spinball svg { transform-origin: 50% 50%; }
.pemb.spinball:focus { outline: none; }
.pemb.spinball:focus-visible { outline: 1px solid #d2d2d7; outline-offset: 4px; border-radius: 50%; }
.pemb .spinring { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border: 1.5px solid currentColor; border-radius: 50%;
  pointer-events: none; opacity: 0; transform: translate(-50%,-50%); }
.shelf-title .pemb .spinarcs, .partbar .pemb .spinarcs, .pemb .spinarcs { position: absolute; left: 50%; top: 50%; width: 190% !important; height: auto !important; aspect-ratio: 1; pointer-events: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; opacity: 0; transform: translate(-50%,-50%); }
.pemb .spinarcs circle { fill: none !important; stroke: currentColor !important; }
.shelf-title .ptname { display: block; }
.shelf .seeall { display: inline-flex; align-items: center; gap: 12px; margin-top: 1px; padding: 2px 10px;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-size: 11.5px; font-weight: 400; letter-spacing: .2em;
  text-transform: none; color: #8e8e93; text-decoration: none; transition: color .25s ease; }
.shelf .seeall:hover, .shelf .seeall:focus-visible { color: #1d1d1f; }
.shelf .seeall .ln { display: none; }   /* just the words */
.shelf .seeall .ln.l { background: linear-gradient(270deg, currentColor, transparent); }   /* fading out, away from the words */
.shelf .seeall .ln.r { background: linear-gradient(90deg, currentColor, transparent); }
.shelf .seeall:hover .ln { width: 40px; }
/* "See all N" and a Stand Arrow after it (the manga Beetle Arrow, the same one as the search line's): a short hairline
   shaft into the arrowhead, so it reads as a way on; the arrow steps right on hover */
.shelf .seeall { color: #6e6e73; gap: 9px; }
.shelf .seeall::after { content: ""; flex: none; width: 30px; height: 13px; margin-top: -2px; background: currentColor;
  -webkit-mask: url("img/stand_arrow_manga.svg") right center / auto 13px no-repeat, linear-gradient(#000, #000) left center / 18px 1px no-repeat;
          mask: url("img/stand_arrow_manga.svg") right center / auto 13px no-repeat, linear-gradient(#000, #000) left center / 18px 1px no-repeat;
  transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.shelf .seeall:hover::after, .shelf .seeall:focus-visible::after { transform: translateX(4px); }
.shelf-title .ptnum, .partbar h1 .ptnum { display: inline; color: #a1a1a6; margin-right: .45em; }
.partbar { --embh: clamp(24px, 2.2vw, 36px); }
.partbar .back { margin-bottom: 14px; }
/* a character's row or page: their portrait where a part has its emblem */
.pemb.face { height: calc(var(--embh) * 1.6) !important; aspect-ratio: 1; }
.pemb.face img { height: 100%; width: 100%; object-fit: cover; border-radius: 50%; display: block; }
/* Parts / Characters: two words between Most Popular and the rows, the chosen one in ink */
.modebar { display: flex; justify-content: center; gap: 28px; padding: 44px 16px 0; }
.modebar button { appearance: none; background: none; border: 0; padding: 4px 0 6px; cursor: pointer;
  font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: #a1a1a6; border-bottom: 1px solid transparent; transition: color .15s ease, border-color .15s ease; }
.modebar button:hover { color: #1d1d1f; }
.modebar button[aria-pressed="true"] { color: #1d1d1f; border-bottom-color: #1d1d1f; }
.modebar button:focus { outline: none; }
.modebar button:focus-visible { outline: 1px solid #d2d2d7; outline-offset: 4px; }
.partbar .pemb { height: var(--embh); color: #1d1d1f; }
.partbar .pemb svg { height: 100%; width: auto; overflow: visible; }
.partbar .pemb path { fill: currentColor; stroke: none; }

/* museum hanging instead of a frame mat: no mat; the posters in a row share one centre line, with the same space
   between them as at the window edges, and a small label under each (title, source, date) */
.shelf { --gut: clamp(16px, 3.4vw, 64px); --cols: 5; }
.shelf.every { --cols: 4; }
@media (min-width: 1100px) { .shelf.every { --cols: 5; } }
@media (max-width: 760px) { .shelf { --gut: 14px; --cols: 3; } .shelf.every { --cols: 2; } }
.shelf.capped .shelf-row, .shelf.every .shelf-row { gap: var(--gut); padding: 0 var(--gut) !important; margin-top: 0 !important; align-items: flex-start; }
.shelf.capped .shelf-row .tile:not(.open), .shelf.every .shelf-row .tile:not(.open) {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gut)) / var(--cols)); height: auto; aspect-ratio: auto; }
.shelf.capped .shelf-row .tile:not(.open) .mat, .shelf.every .shelf-row .tile:not(.open) .mat {
  position: relative; inset: auto; padding: 0; aspect-ratio: 5637 / 8037; }
/* a front-and-back spread in a row's middle: as tall as the posters beside it and exactly as wide as the spread itself
   (--ar, its width/height), with the usual gaps either side and the three centred in the row */
.shelf.capped .shelf-row { justify-content: center; }
.shelf.capped .shelf-row .tile.spread:not(.open) { flex-basis: calc((100% - (var(--cols) - 1) * var(--gut)) / var(--cols) * 1.425847 * var(--ar)); }
.shelf.capped .shelf-row .tile.spread:not(.open) .mat { aspect-ratio: auto; height: calc(100cqw / var(--ar)); }
.shelf.capped .shelf-row .tile:not(.open) > span.cap, .shelf.every .shelf-row .tile:not(.open) > span.cap {
  position: static; margin-top: 14px; font-size: 12.5px; line-height: 1.4; gap: 1px; }
.shelf.capped .shelf-title, .shelf.every .shelf-title { padding-bottom: 26px !important; }
.shelf-row .tile, .shelf-row .tile:hover { text-decoration: none; }
/* the poster popup: clicking a poster offers its two downloads and a close look at what the upscale changed */
html { scrollbar-gutter: stable; }
body.popopen { overflow: hidden; }   /* the gutter stays, so locking the scroll moves nothing */
.pop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: transparent; }
/* the rows behind fade back under a thin white veil: an opacity fade the compositor runs (no blur, which would have to
   be redrawn every frame of the flight) */
.pop::before { content: ""; position: fixed; inset: 0; background: rgba(255,255,255,.62); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.pop.in::before { opacity: 1; }
/* the in-place presentation: the card arrives whole, so it needs a little lift off the dimmed page and a quick veil */
.pop.lb::before { background: rgba(255,255,255,.7); transition-duration: .26s; }
.pop.lb .pop-card { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 24px 80px -20px rgba(0,0,0,.2); will-change: transform, opacity; }
.pop.lb .pop-x { transition-duration: .15s; }
/* the instant presentation (default): no veil over the page, nothing fades; the posters beside stay as they are */
.pop.flat::before { display: none; }
.pop.flat .pop-x, .pop.flat .pop-side, .pop.flat .pop-card { transition: none; }
/* the open card sits above the row: a soft, wide shadow (no dimming of the posters beside it) plus the hairline edge */
.pop.flat .pop-card { box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 12px 48px rgba(0,0,0,.14), 0 2px 10px rgba(0,0,0,.06); }
/* the label on the poster's left (a tile near the right edge): the close button moves to that side too */
.pop-card.flip { flex-direction: row-reverse; }
.pop-card.flip .pop-x { right: auto; left: 18px; }
.pop-card { z-index: 1; }
/* while the poster flies in, the card is there but bare (no paper, no shadow, poster hidden under the flying copy) */
.pop.zoom .pop-card { background: transparent; box-shadow: none; }
.pop.zoom .pop-thumb { opacity: 0; }
/* the poster flying between its row and the full-height view, above everything (the rows underneath never move) */
.pop-fly { position: fixed; z-index: 60; margin: 0; overflow: hidden; pointer-events: none; transform-origin: 0 0; will-change: transform; }
.pop-fly img { display: block; width: 100%; height: 100%; object-fit: fill; transform-origin: 0 0; will-change: transform; }   /* the flight sets its exact placement */   /* cropped like the tile at the start, whole at the end: never stretched */
/* the panel sits under the flying poster while it slides out from behind it */
.pop-side { position: relative; z-index: 0; }
/* the label column's white backing while the poster flies: glued to its right edge, scaled with it; the panel's own
   white is off until the hand-off so the backing is the one surface */
.pop-slab { position: fixed; z-index: 0; background: #fff; transform-origin: 0 0; will-change: transform, opacity; pointer-events: none; }
.pop.zoom .pop-side { background: transparent; }

.pop-card { position: relative; display: flex; max-width: 100vw;
  height: 100vh; height: 100svh; overflow: hidden; background: #fff; border-radius: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);   /* a hairline edge, no haze over the rows beside it */ }
.pop-thumb { display: block; flex: none; height: 100vh; height: 100svh; width: auto; max-width: calc(100vw - var(--pw, 400px)); object-fit: contain; background: #fff; }
/* the label: a museum wall label beside the work. It fades in as a whole and its lines settle in one after another,
   a few pixels upward, never sliding in from the side */
/* the label: words at the top with room to breathe, the downloads in the middle, the four close-ups filling the
   rest edge to edge. Two thirds as wide as the poster (wall.js sets --pw). It fades in as a whole, once. */
.pop-side { flex: none; width: var(--pw, 400px); min-width: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  background: #fff; opacity: 0; }   /* shown by the reveal animation in wall.js, not a CSS fade */
.pop.ready .pop-side { opacity: 1; }
.pop-side .pop-info { flex: none; padding: clamp(48px, 9vh, 96px) 40px 0; }
.pop-mid { flex: none; padding: clamp(28px, 4.5vh, 44px) 40px clamp(24px, 3.5vh, 36px); display: grid; gap: 14px; }
.pop-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 22px; }
.pop-meta p.credit { margin: 0 !important; }
.pop-meta .likerow { margin: 0 !important; flex: none; }
.pop-x { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px; border: 0; border-radius: 0; background: transparent;
  font: 300 26px/1 "Geist Serif", Georgia, serif; color: #86868b; cursor: pointer; opacity: 0; transition: opacity .3s ease, color .2s ease; }
.pop-x:hover { color: #1d1d1f; }
.pop.ready .pop-x { opacity: 1; }
.pop-info { color: #1d1d1f; }
.pop-info h2, .pop-info p.story { max-width: 400px; }
.pop-info p { margin: 0; }
.pop-info .kicker { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; font: 500 10.5px/1 system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #86868b; }
.pop-info .kicker .no { font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.pop-info h2 { margin: 0 32px 14px 0; font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-weight: 400; font-size: 25px;
  letter-spacing: .05em; line-height: 1.22; text-wrap: balance; }
.pop-info p.work { font: 400 15.5px/1.5 "Geist Serif", Georgia, serif; color: #3a3a3c; text-wrap: balance; }
.pop-info p.when { margin-top: 6px; font: 400 13.5px/1.45 "Geist Serif", Georgia, serif; color: #86868b; font-variant-numeric: tabular-nums; }
/* the like: a small heart under the date; filled once you've liked it, with how many people have */
.pop-side .likerow { display: grid; justify-items: start; gap: 6px; margin-top: 14px; }
.pop-side .likerow .like { margin: 0; padding: 0; }
.pop-side .likerow .dlcount { margin: 0; }
.pop-side .likerow .dlcount:empty { display: none; }
.pop-side .dlcount { font: 500 10.5px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.pop-side .like { display: inline-flex; align-items: center; gap: 7px; margin: 12px 0 0; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 500 10.5px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #86868b; transition: color .2s ease; }
.pop-side .like svg { width: 15px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .25s cubic-bezier(.2,.8,.2,1), fill .2s ease; }
.pop-side .like:hover { color: #1d1d1f; }
.pop-side .like.on { color: #c4122f; }
.pop-side .like.on svg { fill: currentColor; transform: scale(1.1); }
.pop-info p.story { margin-top: 28px; font: 400 15px/1.65 "Geist Serif", Georgia, serif;
  color: #3a3a3c; text-wrap: pretty; hyphens: auto; }
.pop-info .fact-src { font: 500 10px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #a1a1a6;
  text-decoration: none; vertical-align: 1px; margin-left: 2px; }
.pop-info .fact-src:hover { color: #1d1d1f; }
/* the scan's credit: one quiet line, like the small print at the foot of a label */
.pop-side p.credit { margin: 0; padding: 0; font: 400 12px/1.5 "Geist Serif", Georgia, serif; color: #a1a1a6; }
/* the original-scan box: its download, and under it who scanned it */
.pop-dl .scanbox { border: 1px solid #d2d2d7; transition: border-color .2s ease; }
.pop-dl .scanbox:hover { border-color: #1d1d1f; }
.pop-dl .scanbox > a { border: 0 !important; }
.pop-dl .scanbox p.credit a { display: inline; padding: 0; border: 0; border-bottom: 1px solid rgba(110,110,115,.25); background: none; color: #6e6e73; }
.pop-dl .scanbox p.credit a:hover { color: #1d1d1f; border-bottom-color: currentColor; }
.pop-info p.prints { margin-top: 12px; font: 400 11.5px/1.5 system-ui, sans-serif; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.pop-side p.credit a { white-space: nowrap; color: #6e6e73; text-decoration: none; border-bottom: 1px solid rgba(110,110,115,.25); transition: color .2s ease, border-color .2s ease; }
.pop-side p.credit a:hover { color: #1d1d1f; border-bottom-color: currentColor; }
.pop-dl { display: grid; gap: 8px; }
.pop-x:focus { outline: none; }
.pop-x:focus-visible { outline: 1px solid #d2d2d7; outline-offset: -2px; }
.pop-dl a { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 14px 16px; border: 1px solid #d2d2d7;
  border-radius: 0; text-decoration: none; color: #1d1d1f; transition: border-color .2s ease, background-color .2s ease, color .2s ease; }
.pop-dl a:hover { border-color: #1d1d1f; }
.pop-dl a b { font: 500 11px/1.2 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
/* the icon on the left, centred against the label and size beside it (which sit on one line, or two when narrow) */
.pop-dl a { align-items: center; flex-wrap: nowrap; gap: 12px; }
.pop-dl a .t { flex: 1 1 auto; min-width: 0; color: inherit; opacity: 1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 5px 12px; }
.pop-dl a.main .t { color: inherit; opacity: 1; }
.pop-dl a .dli { flex: none; display: block; width: 14px; height: 16px; margin-right: 2px; }
.pop-dl a .dli svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1;
  stroke-linecap: butt; stroke-linejoin: miter; }
.pop-dl a span { color: #86868b; font: 400 12px/1.2 system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pop-dl a.main { background: var(--acc, #1d1d1f); border-color: var(--acc, #1d1d1f); color: var(--acc-ink, #fff); transition: filter .2s ease; }
.pop-dl a.main span { color: inherit; opacity: .68; }
.pop-dl a.main:hover { filter: brightness(.92); }
.pop-cmp { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 10px; padding: 0 40px clamp(32px, 5vh, 48px); }   /* the four close-ups sit inside the same margins as the words */
.pop-cmp:empty { display: none; }
/* a before/after close-up: the upscale underneath, the original scan over it clipped to the left of the line */
.sl { position: relative; margin: 0; overflow: hidden; min-height: 0; background: #f5f5f7; cursor: ew-resize; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; --p: 50%; }
.sl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.sl img.o { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.sl i { position: absolute; top: 0; bottom: 0; left: var(--p); width: 1px; margin-left: -.5px; background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 .5px rgba(0,0,0,.18); pointer-events: none; }
.sl i::after { content: ""; position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.sl:focus { outline: none; }
.sl:focus-visible { outline: 2px solid #0071e3; outline-offset: -2px; }
.pop-cmp h3 { margin: 36px 0 4px; padding-top: 22px; border-top: 1px solid #e5e5ea; font: 500 10.5px/1 system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #86868b; }
.pop-cmp .sub { margin: 6px 0 14px; color: #86868b; font: 400 12.5px/1.5 "Geist Serif", Georgia, serif; }
.pairs-key { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin: 0 0 6px; font: 500 9.5px/1 system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: #a1a1a6; }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 10px; }   /* the four close-ups, two by two */
.pair { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.pair img { width: 100%; aspect-ratio: 1; height: auto; display: block; background: #f5f5f7; image-rendering: auto; }
.pair figcaption { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 11px; color: #86868b;
  letter-spacing: .06em; text-transform: uppercase; }
/* the locator: the whole poster, small, with the close-up's spot outlined, left of the pair */
.pair:has(.loc) { grid-template-columns: 52px 1fr 1fr; align-items: start; }
.pair:has(.loc) figcaption { grid-column: 2 / -1; }
.pair .loc { position: relative; display: block; width: 52px; max-width: 100%; overflow: hidden; background: #f5f5f7; }
.pair .loc img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.pair .loc i { position: absolute; outline: 1.5px solid #ff2d55; outline-offset: 1px; min-width: 3px; min-height: 3px;
  box-shadow: 0 0 0 999px rgba(255,255,255,.35); }
.pop-cmp .none { color: #86868b; font-size: 13px; }
/* the details panel: a compact control column beside the poster (the poster stays the focus). One type system:
   Cinzel for the name only, Geist Serif for words, the system sans in spaced capitals for labels; two greys; an 8px
   rhythm; one filled button, everything else quiet. The column scrolls on its own; the poster never moves. */
.pop-side { --ink: #1d1d1f; --grey: #86868b; --faint: #a1a1a6; --rule: #e8e8ed; --wash: #f5f5f7;
  --serif: "Geist Serif", Georgia, serif; --sans: system-ui, -apple-system, sans-serif;
  overflow: hidden; }
.pop-side .pop-info { padding: clamp(40px, 8vh, 80px) 32px 0; }
.pop-side .pop-info .kicker { display: block; margin: 0 0 16px; font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.pop-side .pop-info h2 { margin: 0 24px 10px 0; font-size: 28px; line-height: 1.15; letter-spacing: .04em; color: var(--ink); }
.pop-side .pop-info p.work { font: 400 15px/1.45 var(--serif); color: #48484a; }
.pop-side .pop-info p.when { margin-top: 8px; font: 400 13px/1.5 var(--serif); color: var(--grey); font-variant-numeric: tabular-nums; }
.pop-side .pop-info p.when .date + .dlcount:not(:empty)::before { content: " · "; }
.pop-side .pop-info p.when:empty { display: none; }
.pop-side .pop-info p.story { margin-top: 24px; font: 400 14.5px/1.6 var(--serif); color: #3a3a3c; }
.pop-side .pop-info .fact-src { font: 400 13px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--grey); }
/* the downloads: one filled primary button with the heart beside it, the original scan as a quiet second option */
.pop-mid { padding: 32px 32px 0; display: block; }
.pop-side .pop-dl { display: grid; gap: 8px; }
.pop-side .dl-row { display: flex; gap: 8px; align-items: stretch; }
.pop-side .pop-dl a { flex: 1 1 auto; min-width: 0; padding: 13px 16px; gap: 12px; border: 0; }
.pop-side .pop-dl a b { font: 500 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; }
.pop-side .pop-dl a .t > span { font: 400 12px/1.3 var(--sans); letter-spacing: .02em; color: var(--grey); }
.pop-side .pop-dl a.main .t > span { color: inherit; opacity: .72; }
/* both buttons alike: the label on the left, its size on the right, on one line */
.pop-side .pop-dl a .t { flex-wrap: nowrap; justify-content: space-between; align-items: baseline; }
.pop-side .pop-dl a.alt { background: var(--wash); color: var(--ink); transition: background-color .2s ease; }
.pop-side .pop-dl a.alt:hover { background: #ebebf0; }
.pop-side .pop-dl a.alt b { font-weight: 500; color: #48484a; }
/* the download notice: a quiet card in the buttons' place, in the label's own type; its button in the poster's colour */
/* the download notice: a small dialog over the open poster view, in the label's own type, its button in the
   poster's colour; the view behind it dims a little */
.dl-veil { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(255,255,255,.28); }
.dl-notice { width: min(420px, 100%); display: grid; gap: 14px; padding: 26px 28px 24px; background: #fff; min-width: 0; overflow-wrap: anywhere;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 60px rgba(0,0,0,.18), 0 2px 10px rgba(0,0,0,.06); }
.dl-notice .k { margin: 0; font: 500 10px/1 system-ui, -apple-system, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #a1a1a6; }
.dl-notice p { margin: 0; font: 400 14px/1.55 "Geist Serif", Georgia, serif; color: #3a3a3c; }
.dl-notice p a { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit;
  text-decoration: none; border-bottom: 1px solid rgba(110,110,115,.35); overflow-wrap: anywhere; }
/* under the warning, Jotaro asks: his head from the Volume 24 cover, in ink like the part emblems */
.dl-notice .ask { display: flex; align-items: center; gap: 6px; margin-top: 2px; font: italic 400 15px/1.3 "Geist Serif", Georgia, serif; color: #1d1d1f; }
.dl-notice .ask .face { width: 48px; height: auto; flex: none; }
/* YES! / NO!, lettered like the anime: wide rounded capitals (Comfortaa) as a thick outline, no box; green and the
   anime's pink-red; upright. While the pointer rests on one, copies of it appear one at a time in spots around it and
   fade (compositor-only transforms and opacity) */
.dl-notice .acts { display: flex; justify-content: center; align-items: center; gap: 56px; margin-top: 6px; padding: 14px 0 6px; }
.dl-notice .acts button { position: relative; background: none; border: 0; padding: 10px 12px; cursor: pointer; overflow: visible;
  font: 700 32px/1 "Comfortaa", "Varela Round", "Arial Rounded MT Bold", sans-serif; letter-spacing: .04em; text-transform: none; }
/* the "!" leans right and sits a touch apart, as in the anime */
.dl-notice .acts .bang { display: inline-block; font-weight: inherit; margin-left: -.12em; transform: skewX(-18deg) rotate(8deg); transform-origin: 50% 100%; }
.dl-notice .acts .w { position: relative; display: inline-block; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.dl-notice .acts .e { position: absolute; left: 12px; top: 10px; font-style: normal; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  opacity: 0; pointer-events: none; }
/* one copy at a time, each in its own spot around the word: six copies take turns on a 2.4 s cycle (each lives 0.4 s),
   popping in at a place, holding a beat, and fading; the word itself stays put */
/* copies of the word appear around it, each living about 1.5 s, a new one every 0.5 s, so two or three show at once */
@keyframes yes-spot { 0% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.75); } 8% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
  38% { opacity: .85; transform: translate(var(--dx), var(--dy)) scale(1.03); } 50% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.08); } 100% { opacity: 0; } }
.dl-notice .acts .e0 { --dx: -46px; --dy: -40px; }
.dl-notice .acts .e1 { --dx: 52px; --dy: -30px; }
.dl-notice .acts .e2 { --dx: 40px; --dy: 30px; }
.dl-notice .acts .e3 { --dx: -54px; --dy: 24px; }
.dl-notice .acts .e4 { --dx: 6px; --dy: -52px; }
.dl-notice .acts .e5 { --dx: -10px; --dy: 44px; }
.dl-notice .acts button:hover .e0, .dl-notice .acts button:focus-visible .e0 { animation: yes-spot 3s ease-in-out 0s infinite; }
.dl-notice .acts button:hover .e1, .dl-notice .acts button:focus-visible .e1 { animation: yes-spot 3s ease-in-out 0.5s infinite; }
.dl-notice .acts button:hover .e2, .dl-notice .acts button:focus-visible .e2 { animation: yes-spot 3s ease-in-out 1s infinite; }
.dl-notice .acts button:hover .e3, .dl-notice .acts button:focus-visible .e3 { animation: yes-spot 3s ease-in-out 1.5s infinite; }
.dl-notice .acts button:hover .e4, .dl-notice .acts button:focus-visible .e4 { animation: yes-spot 3s ease-in-out 2s infinite; }
.dl-notice .acts button:hover .e5, .dl-notice .acts button:focus-visible .e5 { animation: yes-spot 3s ease-in-out 2.5s infinite; }
.dl-notice .go { --ink: #22b14c; }
.dl-notice .no { --ink: #e5307a; }
@media (prefers-reduced-motion: reduce) { .dl-notice .acts button:hover .e { animation: none; } }
.dl-notice button:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
/* the heart: likes the piece, so it sits with the piece's details, on its own line under the date; no box */
.pop-side .like { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0 -4px; padding: 4px; border: 0; background: none;
  cursor: pointer; color: var(--grey); font: 400 13px/1 var(--serif); letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums;
  transition: color .2s ease; }
.pop-side .like span:empty { display: none; }
.pop-side .like svg { width: 16px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.pop-side .like:hover { color: var(--ink); }
.pop-side .like.on { color: #c4122f; }
.pop-side .like.on svg { fill: currentColor; transform: scale(1.08); }
.pop-side .like:focus-visible, .pop-side .pop-dl a:focus-visible, .pop-more .sum:focus-visible { outline: 2px solid #0071e3; outline-offset: 2px; }
/* the close-ups, folded behind one quiet line; opened, they fill what's left of the column (it never scrolls) */
.pop-more { flex: none; display: flex; flex-direction: column; min-height: 0; margin: 32px 32px 0; }
.pop-more.open { flex: 1 1 0; }
.pop-more .sum { margin: 0; padding: 0 0 12px; text-align: left; font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); transition: color .2s ease; }
.pop-more .pop-cmp { display: none; }
.pop-more.open .pop-cmp { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 0; }
.pop-more.open .pop-cmp:empty { display: none; }
/* the scan's credit, small print at the foot of the column */
.pop-foot { flex: none; margin-top: auto; padding: 24px 32px 28px; }
.pop-foot p.credit { margin: 0; padding-top: 0; font: 400 12.5px/1.5 var(--serif); color: var(--grey); }
.pop-side p.credit a { color: var(--grey); border-bottom-color: rgba(134,134,139,.35); }
.pop-side p.credit a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .pop-card { display: block; height: auto; max-height: calc(100svh - 28px); overflow: auto; }
  .pop-thumb { width: 100%; height: auto; max-width: none; }
  .pop-side { width: auto; height: auto; overflow: visible; }
  .pop-side .pop-info { overflow: visible; padding: 28px 20px 0; }
  .pop-mid { padding: 24px 20px 0; }
  .pop-more { margin: 24px 20px 0; }
  .pop-more.open .pop-cmp { grid-template-rows: none; }
  .pop-more .sl { aspect-ratio: 1; }
  .pop-foot { padding: 28px 20px 24px; }
  .sl { aspect-ratio: 1; }
  .pop-info, .pop-cmp { max-width: none; }
  .pop-info h2 { font-size: 21px; }
  .pop-x { top: 10px; right: 10px; background: rgba(255,255,255,.88); color: #1d1d1f; }   /* sits over the poster here */
  .pairs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .shelf.capped .shelf-row .tile:not(.open) > span.cap, .shelf.every .shelf-row .tile:not(.open) > span.cap { font-size: 11px; margin-top: 8px; }
  .shelf.capped .shelf-row .tile:not(.open) > span.cap b.c2 { display: none; }
}
@media (max-width: 760px) { .shelf.every .shelf-row .tile { flex-basis: 50%; } }
.tov .side { display: none; }
.tov .bigbar { position: absolute; top: auto; bottom: 14px; left: 0; right: 0; justify-content: center; gap: 22px; }
.tov .bigbar .pill { background: rgba(255,255,255,.86); color: #1d1d1f; border-radius: 980px; padding: 7px 16px; font-size: 13px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 6px rgba(0,0,0,.15); margin: 0; }
.tov .bigbar .ztitle { display: none; }
.tov .bigbar .zlink { color: #0066cc; }
.credits-foot { max-width: 720px; margin: 80px auto 0; padding: 28px 22px 48px; border-top: 1px solid #e5e5e7; }
.credits-foot footer { margin: 0 !important; padding: 0 !important; font-size: 12px; line-height: 1.6; color: #86868b !important; }
.credits-foot footer p { margin: 0 0 .6rem; }
.credits-foot a { color: #6e6e73; }
.empty { padding: 120px 16px; text-align: center; color: #86868b; font-size: 17px; }
/* hero: two lithograph cut-outs facing in toward the wordmark and search field; no header bar */
.hero { position: relative; z-index: 3; height: 84vh; height: 84svh; min-height: 520px; overflow: visible; background: #fff; }
.hero-in { position: absolute; inset: 0; }   /* phones: the whole hero (desktop sizes it below) */
.hero-art { position: absolute; inset: 0; overflow: hidden; }   /* the drawings are clipped to the hero; the Thanks panel may hang below it */
/* each drawing fills the whole white space beside the title column (min(560px, 44vw) wide, centred), as large as it
   fits, flush with the outer edge of the window; v-top / v-mid / v-bottom say where it sits when it runs out of height */
/* the script then scales each drawing so every character's head comes out the same height; a drawing that ends up
   wider or taller than its space runs off the outer edge / the bottom (never toward the title), clipped by .hero */
.hero-art .hl, .hero-art .hr { position: absolute; top: 0; height: 100%; width: calc(50% - min(280px, 22vw) - 2vw); }
.hero-art .hl { left: 0; }
.hero-art .hr { right: 0; }
.hero-art img { position: absolute; top: 0; max-width: none; opacity: 0; transition: opacity .5s ease; }
.hero-art .hl img { left: 0; }
.hero-art .hr img { right: 0; }
.hero-art img.in { opacity: 1; }
.hero-copy { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(560px, 44vw);
  display: flex; flex-direction: column; align-items: center; gap: 22px; }
@font-face { font-family: "Geist Serif"; src: url("fonts/GeistSerifVF.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
/* the wordmark: Cinzel, Roman inscription capitals */
.hero-copy h1 { margin: 0; font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-size: clamp(32px, 4.6vw, 62px);
  font-weight: 400; letter-spacing: .06em; color: #1d1d1f; white-space: nowrap; }
/* emblem O's: the real Cinzel O (its counter spans x .145-.705em, y .02-.685em above the baseline), with the
   emblem centred in the counter: an inline graphic raised from the baseline and pulled back over its O, drawn at
   the weight of Cinzel's thin strokes so it belongs to the letter */
.hero-copy h1 .emb { display: inline-block; overflow: visible; }
.hero-copy h1 .emb.so { width: 0.4350em; height: 0.3726em; vertical-align: 0.1662em; margin-left: -0.6905em; margin-right: 0.2555em; }
.hero-copy h1 .emb.gw { width: 0.3900em; height: 0.4292em; vertical-align: 0.1379em; margin-left: -0.6680em; margin-right: 0.2780em; }
.hero-copy h1 .emb path { fill: currentColor; stroke: none; }   /* pen-drawn ink: thick on the verticals, hairline across */
/* search: a gallery-catalogue line, not an app field: Cinzel on a single hairline that ends in a Stand Arrow head
   at each side; the line is the arrow's shaft. No box, no glow; the line and arrows darken while typing. */
.search { position: relative; width: min(400px, 86%); margin-top: 4px; color: rgba(29,29,31,.3);
  transition: color .3s ease, width .4s ease; }
/* the line: full strength where it leaves each arrowhead, fading to nothing under the words */
.search::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, currentColor 0%, transparent 42%, transparent 58%, currentColor 100%); }
.search:hover { color: rgba(29,29,31,.5); }
.search:focus-within { color: #1d1d1f; width: min(460px, 92%); }
/* arrowheads: 15px tall, centred on the 1.5px line, drawn at the line's own weight so line and head read as one stroke */
.search .sa { position: absolute; bottom: -7.25px; width: 18px; height: 16px; pointer-events: none; overflow: visible; }
.search .sa.r { right: -17px; }
.search .sa.l { left: -17px; transform: scaleX(-1); }
.hero-copy .search input { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 46px; border: 0; border-radius: 0;
  padding: 0 4px; background: transparent; font-family: "Cinzel", "Trajan Pro", Georgia, serif; font-size: 16px; font-weight: 400;
  letter-spacing: .12em; text-align: center; color: #1d1d1f; caret-color: #1d1d1f; }
/* the credit, on the byline over the title: "Scans from the JoJo Wiki" opens the thanks card */
.hero-copy .byline .dot { color: #c7c7cc; font-style: normal; }
.hero-copy .byline .thanks { position: relative !important; top: auto !important; left: auto !important; transform: none !important;
  width: auto !important; margin: 0 !important; font: inherit !important; color: inherit; }
.hero-copy .thanks { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content;   /* hangs below; title and search stay put */
  max-width: calc(100vw - 32px); margin: 14px 0 0; z-index: 5; font: italic 400 12px/1.6 "Geist Serif", Georgia, serif; color: #86868b; }
.hero-copy .thanks summary { list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 1px; user-select: none; -webkit-tap-highlight-color: transparent; }
.hero-copy .thanks summary::-webkit-details-marker { display: none; }
.hero-copy .thanks summary:focus { outline: none; }
.hero-copy .thanks summary:focus-visible .tg { outline: 1px solid #d2d2d7; outline-offset: 3px; }
.hero-copy .thanks .tg { color: #6e6e73; padding-bottom: 1px; border-bottom: 1px solid rgba(110,110,115,.3); transition: color .2s ease, border-color .2s ease; }
.hero-copy .thanks[open] .tg { color: #1d1d1f; border-bottom-color: currentColor; }
/* a small circled "i" after the credit: it opens the thanks card. Hairline ring, italic serif i, the credit's grey;
   it darkens with the words on hover */
.hero-copy .thanks .tgw { display: inline-flex; align-items: center; gap: 6px; }
.hero-copy .thanks .inf { flex: none; position: relative; display: inline-block; width: 11px; height: 11px; border: 1px solid currentColor;
  border-radius: 50%; color: inherit; font: italic 400 8.5px/1 "Geist Serif", Georgia, serif; transition: color .2s ease; }
.hero-copy .thanks .inf::before { content: "i"; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-48%); text-align: center; }
.hero-copy .thanks summary:hover .inf, .hero-copy .thanks[open] .inf { color: #1d1d1f; }
/* only the little i opens the thanks card: the credit itself is just words */
.hero-copy .thanks, .hero-copy .thanks summary { pointer-events: none; cursor: default; }
.hero-copy .thanks .thanks-panel { pointer-events: auto; }
.hero-copy .thanks summary .inf { pointer-events: auto; cursor: pointer; }
.hero-copy .thanks .inf::before { text-transform: none; font-style: normal; font-family: system-ui, -apple-system, sans-serif; letter-spacing: 0; }
/* the visually optimal hero (.opt, desktop): the composition box fills the hero; type is sized from --f, the wordmark's
   font size set by the script. One quiet credit line, the wordmark, a search field two-thirds its width */
@media (min-width: 761px) {
  .hero.opt .hero-in { width: 100%; height: 100%; aspect-ratio: auto; }
  /* ?weights=1: see what the layout sees, every piece blurred into its mass */
  .hero.weights .hero-art img, .hero.weights .hero-copy { filter: blur(calc(var(--f) * .45)); }
}
/* the wordmark's O's: two of the part emblems, picked at random on each visit, fitted to the O's counter */
/* the symbols stand in for the O's themselves: each in a box the size of a Cinzel capital O, on the baseline */
/* each symbol sits inside an O's counter, sized to fill it; the script measures the counter for the title's font */
.hero-copy h1 .o { position: relative; display: inline-block; line-height: 1; }
.hero-copy h1 .o .emb.pick { position: absolute; left: var(--ox, 15%); top: var(--oy, 25%); width: var(--ow, 70%); height: var(--oh, 52%); margin: 0; }
@media (min-width: 761px) {
  .hero.opt .hero-art { left: 0; transform: none; width: 100%; }
  .hero.opt .hero-copy { width: auto; top: var(--mid, 50%); gap: calc(var(--f) * .34); }
  .hero.opt .hero-copy h1 { font-size: var(--f); line-height: 1; white-space: nowrap; }
  .hero.opt .hero-copy .byline { margin: 0; gap: 7px; flex-direction: column; align-items: center; font: 500 max(10px, calc(var(--f) * .15))/1 system-ui, sans-serif; letter-spacing: .2em;
    text-transform: uppercase; font-style: normal; color: #a1a1a6; }
  .hero.opt .hero-copy .byline .thanks .tg { color: inherit; border-bottom: 0; }   /* the same light grey as the line above */
  .hero.opt .hero-copy .byline .thanks[open] .tg { color: #6e6e73; }
  .hero.opt .hero-copy .byline .thanks summary:hover .inf, .hero.opt .hero-copy .byline .thanks[open] .inf { color: #6e6e73; }
  .hero.opt .hero-copy .byline .thanks-panel { text-transform: none; letter-spacing: normal; font-weight: 400; }   /* the card keeps its own type */
  .hero.opt .search { width: calc(var(--f) * 7.2); margin-top: calc(var(--f) * .12); }
  .hero.opt .search:focus-within { width: calc(var(--f) * 8.2); }
  .hero.opt .hero-copy .search input { height: calc(var(--f) * .78); font-size: max(13px, calc(var(--f) * .21)); letter-spacing: .2em; }
  .hero.opt .search .sa { width: calc(var(--f) * .24); height: calc(var(--f) * .21); bottom: calc(var(--f) * -.1); }
  .hero.opt .search .sa.r { right: calc(var(--f) * -.23); } .hero.opt .search .sa.l { left: calc(var(--f) * -.23); }
}
/* "Art by Hirohiko Araki", small, right above the title */
.hero-copy .byline { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 0 -1cqh; font: italic 400 max(12px, 2.4cqh)/1.2 "Geist Serif", Georgia, serif; color: #86868b; letter-spacing: .01em; }
/* the panel: a small card that drops below the line, over the art, never pushing the page */
.hero-copy .thanks-panel { position: absolute; top: calc(100% + 12px); left: 50%; width: 288px; max-width: calc(100vw - 32px);
  transform: translateX(-50%); padding: 20px 22px 18px; background: #fff; border: 1px solid #e5e5ea; box-shadow: 0 18px 50px rgba(0,0,0,.08);
  font-style: normal; text-align: left; animation: thanks-in .35s cubic-bezier(.2,.8,.2,1); }
@keyframes thanks-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hero-copy .thanks-panel .k { margin: 0 0 12px; font: 500 9.5px/1 system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: #86868b; }
.hero-copy .thanks-panel ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hero-copy .thanks-panel li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font: 400 14px/1.3 "Geist Serif", Georgia, serif; }
.hero-copy .thanks-panel li a { color: #1d1d1f; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.hero-copy .thanks-panel li a:hover { border-bottom-color: currentColor; }
.hero-copy .thanks-panel li span { flex: 1; text-align: right; font: 400 11.5px/1 system-ui, sans-serif; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.hero-copy .thanks-panel .thx-more { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #e5e5ea; font: italic 400 12px/1.55 "Geist Serif", Georgia, serif;
  color: #86868b; }
.hero-copy .thanks-panel .thx-more a { color: #48484a; text-decoration: none; border-bottom: 1px solid rgba(72,72,74,.25); }
.search .mg { position: absolute; top: 50%; left: calc(50% - 7.6em); width: 1em; height: 1em; transform: translateY(-41.7%);   /* the lens (not the handle) on the words' middle */
  color: #a1a1a6; pointer-events: none; transition: opacity .3s ease; }
.search:has(input:focus) .mg { opacity: .45; }
.hero-copy .search input:placeholder-shown { padding-left: calc(4px + var(--mgpad, 0px)); }
.search:has(input:not(:placeholder-shown)) .mg { opacity: 0; }
.hero-copy .search input::placeholder { color: #a1a1a6; letter-spacing: .14em; transition: opacity .3s ease; }
.hero-copy .search input:focus { outline: none; }
.hero-copy .search input:focus::placeholder { opacity: .45; }
.hero-copy .search input:focus-visible { outline: none; }
.hero-copy .search input::-webkit-search-cancel-button, .hero-copy input::-webkit-search-decoration { -webkit-appearance: none; }
/* desktop: the hero is one fixed composition, a stage 2.4x as wide as it is high, scaled as a whole. Every size in it
   (drawings, title, search line) is measured in the hero's height (cqh), and the drawings sit against the stage's
   outer edges, so any desktop window shows the same picture at a different size. Windows squarer than 2.4:1 get a
   shorter hero (the stage fills the width); ultra-wide ones get white beyond the stage's edges. */
@media (min-width: 761px) {
  /* the hero is as tall as the script says (half the first row's posters show at the bottom of the first screen);
     inside it the composition keeps the shape the drawings were placed in (4.2 : 1) at the largest size that fits,
     centred. Everything in it is measured in the composition's height (cqh) */
  .hero { width: 100%; height: var(--hh, 42vh); min-height: 0; display: grid; place-items: center; }
  .hero-in { position: relative; container-type: size; width: min(100%, calc(var(--hh, 42vh) * 4.2)); aspect-ratio: 4.2; }   /* width less the scrollbar, not 100vw */
  .hero-art { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 420cqh); }   /* a wide, low strip: the drawings stand at its ends */
  .hero-art .hl, .hero-art .hr { width: 50%; }
  /* display-size wordmark (about 87px on a 1080p screen; the whole hero was scaled 1.15x to fill the sides); search text never under 15px so it stays readable */
  /* the lettering keeps its size as the hero got lower: 1.6x the old cqh values */
  .hero-copy { width: 184cqh; gap: 5.5cqh; }
  .hero-copy h1 { font-size: 17.5cqh; }
  .search { width: 107cqh; margin-top: .93cqh; }
  .search:focus-within { width: 121cqh; }
  .search .sa { bottom: -1.94cqh; width: 4.78cqh; height: 4.24cqh; }
  .search .sa.r { right: -4.51cqh; }
  .search .sa.l { left: -4.51cqh; }
  .hero-copy .search input { height: 12cqh; font-size: max(15px, 4.05cqh); }
  .hero-copy .thanks { font-size: max(11.5px, 2.6cqh); margin-top: 3.4cqh; }
}
@media (max-width: 760px) {
  /* phones: a single lithograph, centred, standing just above the title */
  .hero { height: 58vh; height: 58svh; min-height: 430px; }
  .hero-art .hl { top: 4%; bottom: auto; left: 0; height: 49%; width: 100%; }
  .hero-art .hr { display: none; }
  .hero-copy { width: calc(100% - 40px); top: 71%; }
}
.shelves { padding-top: 0 !important; }
/* SF Pro on Apple devices (the system font there), the closest system face elsewhere */
body.wall, body.poster, body.wall input, body.wall select, body.wall button {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif; }
.shelf-title { text-align: center; text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: .16em;
  padding: 26px 16px 0; color: #1d1d1f; margin: 0; }
.shelf.swatch .shelf-title { border-left: 0; }
.nav { position: absolute; top: calc(50% + 22px); transform: translateY(-50%); z-index: 3; width: 52px; height: 52px;
  border-radius: 50%; border: 0; font-size: 30px; line-height: 1; color: #fff; cursor: pointer;
  background: rgba(0,0,0,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.nav.prev { left: 12px; } .nav.next { right: 12px; }
.nav:hover { background: rgba(0,0,0,.75); }
@media (hover: none) { .nav { display: none; } }
.js .wall-grid { display: none; }
.js .rail-unused { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--top, 96px); overflow: hidden;
  touch-action: none; cursor: default; user-select: none; -webkit-user-select: none; }
.js .rail.drag { cursor: default; }
.row { position: absolute; left: 0; height: calc(100% / 3); display: flex; will-change: transform;
  backface-visibility: hidden; contain: layout style; }
#r0 { top: 0; } #r1 { top: calc(100% / 3); } #r2 { top: calc(200% / 3); }
.tile { position: relative; flex: none; display: block; height: 100%; aspect-ratio: 5637 / 8037; overflow: hidden; background: #0b0b0c; }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none;
  transition: filter .2s ease; }
.tile span { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; font-size: 14px; line-height: 1.3;
  background: linear-gradient(transparent, rgba(0,0,0,.85)); opacity: 0; transition: opacity .2s; pointer-events: none; }
.tile:hover span, .tile:focus-visible span { opacity: 1; }
.tile:hover img { filter: brightness(1.1); }
.tile:focus-visible { outline: 2px solid #8fa0ff; outline-offset: -2px; }
.rail .empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
.info { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.7); display: grid; place-items: center; padding: 16px; }
.info-card { position: relative; max-width: 40rem; background: #121214; border: 1px solid #26262a; border-radius: 12px; }
.info-card footer { padding: 22px 24px 12px !important; opacity: .85; }
#infoclose { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: inherit; font-size: 16px; cursor: pointer; }
body.wall footer, body.poster footer { margin: 0; padding: 18px max(16px, env(safe-area-inset-left, 0px)) 26px; position: relative; }
/* poster page: the cover fills the screen height on a blurred, saturated copy of itself */
.bg { position: fixed; inset: -12%; z-index: -1; background-size: cover; background-position: center;
  filter: blur(46px) saturate(1.5) brightness(.7); transform: scale(1.08); }
.bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.45)); }
.ptop { position: fixed; top: max(10px, env(safe-area-inset-top, 0px)); left: max(10px, env(safe-area-inset-left, 0px));
  right: max(10px, env(safe-area-inset-right, 0px)); z-index: 6; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.pill { pointer-events: auto; background: rgba(0,0,0,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; text-decoration: none; color: #fff; }
.ptop h1.pill { margin: 0; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage { position: relative; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
body.poster .cmp { margin: 0; width: min(100vw, calc(100vh * var(--ar))); width: min(100vw, calc(100svh * var(--ar))); }
body.poster .cmp-box { box-shadow: 0 10px 60px rgba(0,0,0,.55); }
.side { position: absolute; bottom: 12px; font-size: 12px; color: #fff; background: rgba(0,0,0,.5); padding: 2px 8px;
  border-radius: 5px; pointer-events: none; }
.side.l { left: 12px; } .side.r { right: 12px; }
.pnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 28px; line-height: 1; color: #fff; text-decoration: none;
  background: rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pnav.prev { left: max(10px, env(safe-area-inset-left, 0px)); } .pnav.next { right: max(10px, env(safe-area-inset-right, 0px)); }
.pnav:hover, .pill:hover { background: rgba(0,0,0,.65); }
.more { position: absolute; bottom: max(12px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 4; }
.info { position: relative; max-width: 46rem; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-left, 0px)) 0 max(16px, env(safe-area-inset-right, 0px)); }
@media (max-width: 600px) { .pnav { width: 38px; height: 38px; font-size: 22px; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0 auto; max-width: 1280px; padding: var(--gap);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: Canvas; color: CanvasText;
}
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .5rem; }
h2 { font-size: 1rem; font-weight: 600; margin: 4rem 0 1.25rem; }
p { margin: 0 0 1rem; max-width: 42rem; }
.quiet { opacity: .62; }
.intro { margin: 2rem 0 1rem; }
.grid {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap) calc(var(--gap) * .75);
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 40%), 1fr));
}
.grid a { display: block; text-decoration: none; }
.grid img { display: block; width: 100%; height: auto; }
.grid span { display: block; margin-top: .4rem; font-size: .875rem; opacity: .75; }
.grid a:hover span, .grid a:focus-visible span { opacity: 1; text-decoration: underline; }
footer { margin-top: 6rem; font-size: .8125rem; opacity: .62; }
footer p { margin-bottom: .6rem; }
.top { margin-bottom: 2rem; font-size: .9375rem; }
.detail h1 { margin-bottom: .1rem; }
.detail > .quiet { margin-bottom: 1.5rem; }
.cmp { margin: 0 0 1.5rem; width: min(100%, calc(85vh * var(--ar))); width: min(100%, calc(85svh * var(--ar))); }
.cmp-box {
  position: relative; aspect-ratio: var(--ar); overflow: hidden;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
  --p: 50%;
}
.cmp-box img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cmp-orig { clip-path: inset(0 calc(100% - var(--p)) 0 0); }
.cmp-bar { position: absolute; top: 0; bottom: 0; left: var(--p); width: 0; pointer-events: none; }
.cmp-bar::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px;
  background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.cmp-bar span {
  position: absolute; top: 50%; left: -18px; width: 36px; height: 36px; margin-top: -18px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25);
}
.cmp-bar span::before, .cmp-bar span::after {
  content: ""; position: absolute; top: 13px; border: 5px solid transparent;
}
.cmp-bar span::before { left: 4px; border-right: 6px solid #333; }
.cmp-bar span::after { right: 4px; border-left: 6px solid #333; }
.cmp-range {
  position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); pointer-events: none;
}
.cmp-box:has(.cmp-range:focus-visible) { outline: 2px solid Highlight; outline-offset: 3px; }
.cmp figcaption { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .875rem; opacity: .62; }
.links { line-height: 1.9; }
.credits { font-size: .875rem; margin-top: 2rem; }
.pn { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; font-size: .9375rem; }
.pn a[rel=next] { text-align: right; }

.pop-dl { display: none !important; }