/* ==========================================================================
   Pages: inked art plates, the 3D volume, the home showcase, home sections
   (genre cloud), browse, series, library, 404
   ========================================================================== */

/* ---------------------------------------------------------------- art plate
   One piece of art. ink.js blooms it in (canvas .plate__ink) from a drop of ink,
   over whatever plate is showing, then the plain <img> takes over and drifts. */
.plate { position: absolute; inset: 0; overflow: hidden; visibility: hidden; }
.plate picture { display: contents; }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); opacity: 0; }
.plate--cover img { --pos: 50% 22%; }
.plate.is-shown { visibility: visible; z-index: 1; }
.plate.is-shown img { opacity: 1; animation: drift 16s linear both; }
.plate.is-blooming { visibility: visible; z-index: 2; }
.plate__ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* panels (ink.js panels()): pieces of the new picture slam in; white gutters with black frame lines between */
.plate__cut { position: absolute; inset: 0; will-change: transform, opacity; }
.plate .plate__cut img { opacity: 1; animation: none; }
.plate__gutters { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; }
.plate__frame, .plate__gutter { fill: none; stroke-linecap: butt; }
.plate__frame { stroke: #0B0A09; }
.plate__gutter { stroke: #FFF; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07) translate(-.8%, -.6%); } }

/* inked: the art printed onto the paper. It takes the ink filter and the brushed
   edge (art.svg: dry passes, flicked bits). Its host multiplies it into the paper
   (.print): blending needs a backdrop, so no ancestor between the host and the
   page may start a stacking context of its own (no isolation, transform, opacity). */
.inked {
  -webkit-mask: var(--brush-art) 0 0 / 100% 100% no-repeat; mask: var(--brush-art) 0 0 / 100% 100% no-repeat;
  filter: var(--art-filter);
}
.print { mix-blend-mode: var(--art-blend); }
/* splatter printed on the page (decoration; never over words) */
.spray {
  position: absolute; pointer-events: none; aspect-ratio: 1; background: var(--splat); opacity: var(--splat-o);
  -webkit-mask: var(--brush-spray) center / contain no-repeat; mask: var(--brush-spray) center / contain no-repeat;
  mix-blend-mode: var(--art-blend);
}

/* ---------------------------------------------------------------- the volume
   A manga volume as an object: front cover, a spine in the cover's colour on
   the right (Japanese binding), page edges, a laminate sheen that follows the
   pointer, a crease at the hinge, a shadow on the paper. */
.book {
  --w: 220px; --t: calc(var(--w) * .12);
  --ry: -24deg; --rx: 4deg; --gx: 60%;
  position: relative; width: var(--w); aspect-ratio: 2 / 3; perspective: 1400px;
}
.book__turn, .book__body { position: absolute; inset: 0; transform-style: preserve-3d; }
.book__body { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .9s var(--ease); }
.book.is-tracking .book__body { transition: transform .35s var(--ease); }
.book__face { position: absolute; backface-visibility: hidden; }
/* the lid: the jacketed front board, hinged at the spine (right). It swings open
   toward you when pointed at; its inside is the jacket's folded flap. */
.book__lid {
  backface-visibility: visible;
  inset: 0; transform-style: preserve-3d; transform-origin: 100% 50%;
  transform: translateZ(calc(var(--t) / 2)) rotateY(var(--open, 0deg));
  transition: transform .8s var(--ease);
}
.book__lid > * { position: absolute; inset: 0; backface-visibility: hidden; }
.book__front {
  overflow: hidden; border-radius: 1px 3px 3px 1px; background: var(--surface-2);
  box-shadow: var(--shadow-book); container-type: inline-size;
}
.book__front img { width: 100%; height: 100%; object-fit: cover; }
.book__front::before, .book__front::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; }
/* hinge crease near the spine, and a faint light along the top edge */
.book__front::before {
  background:
    linear-gradient(90deg, transparent 90.5%, rgba(0, 0, 0, .2) 92.5%, rgba(255, 255, 255, .22) 94%, transparent 96%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 18%);
}
/* laminate sheen: a band of light that slides with the pointer */
.book__front::after {
  background: linear-gradient(112deg, transparent 30%, rgba(255, 253, 245, .5) 46%, rgba(255, 253, 245, .12) 54%, transparent 64%) var(--gx) 0 / 260% 100% no-repeat;
  mix-blend-mode: soft-light; opacity: .9; transition: background-position .5s var(--ease);
}
/* the obi: a vermilion paper belt round the lower jacket, a separate sheet (its own
   shadow on the cover), brush word over a line of small print */
.book__obi {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 24%;
  display: flex; flex-direction: column; justify-content: center; gap: 3cqw; padding: 0 9% 1cqw;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 12%), var(--red); color: #F7F1E5;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .3), 0 -4px 7px -3px rgba(0, 0, 0, .45);
}
.book__obi b { font: 400 13.5cqw/.9 var(--f-brush); -webkit-text-stroke: .025em currentColor; paint-order: stroke fill; white-space: nowrap; }
.book__obi small { font: 700 5.2cqw/1.2 var(--f-ui); opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* inside the lid: plain paper, shaded toward the hinge */
.book__inside {
  transform: rotateY(180deg); border-radius: 3px 1px 1px 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 14%), #EDE6D8;
}
/* Opening: the cover swings over on the spine, four leaves riffle after it and fan
   onto a pile at the right, and the book lies open at the middle of chapter 1:
   the page before the middle on the right leaf, the middle page on the left.
   Closing runs back the other way (the delays turn round). --k = leaf, top first. */
/* closing: leaves and cover fold back together as one block (a hair of stagger, the top
   leaf first, the cover last), so the book shuts with its cover and obi at once */
.book__lid { transition: transform .6s cubic-bezier(.5, 0, .25, 1) 60ms; }
.book__sheet {
  top: .8%; bottom: .8%; left: 1%; right: 0; transform-style: preserve-3d; backface-visibility: visible;
  transform-origin: 100% 50%;
  transform: translateZ(calc(var(--t) / 2 - .7px - var(--k) * .5px)) rotateY(var(--open, 0deg));
  transition: transform .6s cubic-bezier(.5, 0, .25, 1) calc((3 - var(--k)) * 15ms);
}
.book__sheet > i { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: #F3EDE1; }
.book__sb { transform: rotateY(180deg); }
.book__sheet img, .book__leaf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .3s; }
.book__sheet img.is-loaded, .book__leaf img[src] { opacity: 1; }
/* paper: the gutter darkens toward the spine; a leaf in flight catches the light as it turns */
.book__sf::after, .book__sb::after, .book__leaf::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.book__sf::after { background: linear-gradient(270deg, rgba(0, 0, 0, .3), transparent 14%), linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 30%); }
.book__sb::after { background: linear-gradient(90deg, rgba(0, 0, 0, .34), transparent 16%), linear-gradient(270deg, rgba(255, 255, 255, .25), transparent 40%); }
.book__leaf {
  top: 1%; bottom: 1%; left: 1.5%; right: 0; overflow: hidden; background: #F4EFE4;
  transform: translateZ(calc(var(--t) / 2 - 3.2px));
}
.book__leaf::after { background: linear-gradient(270deg, rgba(0, 0, 0, .38), transparent 16%), linear-gradient(90deg, rgba(0, 0, 0, .1), transparent 6%); }
.book__leaf img.is-cover { filter: grayscale(1) contrast(1.7) brightness(1.12); mix-blend-mode: multiply; }
/* open, the volume turns to face you and moves half its width left, so the spread
   sits where the closed book stood; the cover and the turned leaves lie almost flat */
.book.is-open .book__body { transform: translateX(-48%) rotateX(6deg) rotateY(-4deg); transition: transform .95s cubic-bezier(.3, .1, .2, 1); }
.book.is-open .book__lid { --open: 168deg; transition: transform .9s cubic-bezier(.3, .1, .2, 1) 0s; }
.book.is-open .book__sheet { --open: calc(165deg - var(--k) * 3deg); transition: transform .85s cubic-bezier(.3, .05, .15, 1) calc(170ms + var(--k) * 90ms); }
@media (hover: hover) {
  .book:hover .book__body { transform: translateX(-48%) rotateX(6deg) rotateY(-4deg); transition: transform .95s cubic-bezier(.3, .1, .2, 1); }
  .book:hover .book__lid { --open: 168deg; transition: transform .9s cubic-bezier(.3, .1, .2, 1) 0s; }
  .book:hover .book__sheet { --open: calc(165deg - var(--k) * 3deg); transition: transform .85s cubic-bezier(.3, .05, .15, 1) calc(170ms + var(--k) * 90ms); }
}
.book__back { inset: 0; background: var(--spine, #1C1B19); border-radius: 3px 1px 1px 3px; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); }
/* the spine: the title runs down it, the drop sits at its foot, the obi wraps round it */
.book__spine {
  top: 0; bottom: 0; left: calc(50% - var(--t) / 2); width: var(--t); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; padding-top: calc(var(--t) * .5);
  background:
    linear-gradient(0deg, var(--red) 24%, rgba(0, 0, 0, .3) 24% calc(24% + 1px), transparent calc(24% + 1px)),
    linear-gradient(90deg, rgba(0, 0, 0, .28), rgba(255, 255, 255, .08) 40%, rgba(0, 0, 0, .18)), var(--spine, #1C1B19);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
}
.book__spine span {
  writing-mode: vertical-rl; max-height: 58%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: 400 calc(var(--t) * .5)/1 var(--f-brush); color: var(--spine-ink, #F4EFE4);
}
.book__mark {
  position: absolute; left: 30%; width: 40%; bottom: calc(24% + var(--t) * .3); aspect-ratio: 150 / 350;
  background: var(--spine-ink, #F4EFE4); -webkit-mask: url(/assets/brand/mark.png) center / contain no-repeat; mask: url(/assets/brand/mark.png) center / contain no-repeat;
}
.book__pages {
  top: 1.2%; bottom: 1.2%; left: calc(50% - var(--t) / 2); width: calc(var(--t) * .96);
  background: repeating-linear-gradient(90deg, #F4EFE4 0 1px, #D9D1C1 1px 2px);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 - 1px));
}
.book__edge {
  left: 1%; right: 1%; top: calc(50% - var(--t) / 2); height: calc(var(--t) * .96);
  background: repeating-linear-gradient(0deg, #F4EFE4 0 1px, #D9D1C1 1px 2px);
  transform: rotateX(90deg) translateZ(calc(var(--w) * .75 - 1px));
}
/* the shadow it casts on the paper */
.book::after {
  content: ""; position: absolute; z-index: -1; left: 4%; right: -14%; bottom: -7%; height: 16%;
  background: radial-gradient(closest-side, rgba(28, 20, 8, .5), transparent); filter: blur(7px);
  transform: translateX(var(--sx, 0px)); transition: transform .9s var(--ease);
}
/* at the page's left edge (series) the open book stays put and opens over the words */
.series-cover .book.is-open .book__body { transform: rotateX(6deg) rotateY(-4deg); }
.series-cover .book.is-open::after { transform: translateX(20%) scaleX(1.9); }
@media (hover: hover) {
  .series-cover .book:hover .book__body { transform: rotateX(6deg) rotateY(-4deg); }
  .series-cover .book:hover::after { transform: translateX(20%) scaleX(1.9); }
}
.series-cover { position: relative; z-index: 4; }
/* open, the shadow spreads under both pages */
.book.is-open::after { transform: translateX(-62%) scaleX(1.9); transition-duration: .95s; }
@media (hover: hover) { .book:hover::after { transform: translateX(-62%) scaleX(1.9); transition-duration: .95s; } }
/* Changing volumes, as objects: the old one topples over backwards onto the page
   (it falls like a weight, gathering speed, and is gone edge-on, never faded); the
   new one drops in from above, lands on a corner, settles flat as the red splash
   bursts under it. Its shadow grows as it falls. */
@keyframes book-topple {
  from { transform: none; animation-timing-function: cubic-bezier(.55, 0, .95, .5); }
  to { transform: translateY(3%) rotateX(88deg) rotateZ(5deg); }
}
@keyframes book-land {
  0% { transform: translateY(-165%) rotateZ(-11deg) rotateY(-28deg) rotateX(10deg); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  60% { transform: translateY(0) rotateZ(-4.5deg) rotateY(-5deg); animation-timing-function: cubic-bezier(.2, .75, .3, 1); }
  100% { transform: none; }
}
@keyframes book-shadow-land {
  0% { opacity: .15; transform: scale(.45); animation-timing-function: cubic-bezier(.5, 0, .9, .45); }
  60%, 100% { opacity: 1; transform: none; }
}
.book__turn { transform-origin: 50% 100%; }
:root[data-theme="dark"] .book::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .75), transparent); }

/* ---------------------------------------------------------------- home showcase
   Like the magazine cover: words on the paper at left, the art inked in the
   middle with the native title on a black band at its edge, the colour volume
   standing on it over a red splash, and the other featured titles at right. */
.show {
  --show-h: clamp(540px, calc(100svh - var(--nav-h) - 240px), 690px);
  --px: 0; --py: 0;
  position: relative; overflow: hidden;
}
.show__grid {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 35fr) minmax(0, 50fr) minmax(220px, 15fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "text art side" "ctrl art side";
  height: var(--show-h);
}
.show__grid::after { left: var(--gutter); right: var(--gutter); bottom: -2px; z-index: 6; --rule-c: var(--rule); }

.show__text { grid-area: text; align-self: center; position: relative; z-index: 4; min-width: 0; padding: 20px 40px 0 0; container-type: inline-size; }
/* a vermilion chop pressed above the title: brush letters, the red field bitten like wet ink */
.show__kicker {
  position: relative; display: inline-block; margin: 2px 0 22px 10px; padding: 8px 15px 7px;
  color: var(--on-accent); font: 400 21px/1 var(--f-brush); letter-spacing: .04em; white-space: nowrap;
  -webkit-text-stroke: .03em currentColor; paint-order: stroke fill;
  transform: rotate(-7deg); transform-origin: 0 70%;
}
.show__kicker::before {
  content: ""; position: absolute; z-index: -1; inset: -10px -22px -12px -18px; background: var(--accent);
  -webkit-mask: var(--brush-stroke) 0 0 / 100% 100% no-repeat; mask: var(--brush-stroke) 0 0 / 100% 100% no-repeat;
}
.show__title {
  margin: 0 0 0 -.02em; padding-block: .02em .06em;
  font: 400 min(var(--fs-hero), calc(100cqw / (var(--L, 7) * .6)), calc(300cqw / (var(--T, 12) * .64)))/.98 var(--f-brush);
  -webkit-text-stroke: var(--brush-weight) currentColor; paint-order: stroke fill;
  text-wrap: balance; overflow-wrap: normal; word-break: keep-all; hyphens: none;
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--p) - 25%), transparent var(--p)); mask: linear-gradient(90deg, #000 calc(var(--p) - 25%), transparent var(--p));
  --p: 130%;
}
.show__title a { color: inherit; }
/* a short red stroke after the last word, as if the brush flicked on */
.show__title .flick { white-space: nowrap; }
.show__title .flick::after {
  content: ""; display: inline-block; width: .9em; height: .2em; margin-left: .12em; vertical-align: .08em;
  background: var(--accent); transform: rotate(-12deg);
  -webkit-mask: var(--brush-under) 0 0 / 100% 100% no-repeat; mask: var(--brush-under) 0 0 / 100% 100% no-repeat;
}
.show__orig { margin-top: 18px; font: 700 13.5px/1.25 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
.show__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px; margin-top: 12px; font: 500 13px/1.4 var(--f-mono); color: var(--text-2); }
.show__meta i { font-style: normal; color: var(--muted); }
.show__desc { margin-top: 14px; max-width: 44ch; color: var(--text-2); font: 400 1.0625rem/1.6 var(--f-body); }
.show__text.is-tight .show__desc { display: none; }
.show__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.show__meta span { white-space: nowrap; }

/* the words leave, then the title is brushed back in from the left */
.show__text > * { transition: opacity .26s var(--ease), transform .26s var(--ease); }
.show__text.is-out > * { opacity: 0; transform: translateY(-10px); }
.show__text.is-in .show__title { animation: show-title 1.05s var(--ease) both; }
.show__text.is-in > :not(.show__title) { animation: rise .85s var(--ease) both; }
.show__text.is-in > :nth-child(3) { animation-delay: .14s; }
.show__text.is-in > :nth-child(4) { animation-delay: .2s; }
.show__text.is-in > :nth-child(5) { animation-delay: .26s; }
.show__text.is-in > :nth-child(6) { animation-delay: .32s; }
@keyframes show-title { from { --p: -25%; transform: translateX(-14px); } to { --p: 130%; transform: none; } }

/* the art */
.show__art { grid-area: art; position: relative; z-index: 1; margin: 0 -3% 0 -4%; mix-blend-mode: var(--art-blend); }
.show__stage { position: absolute; inset: 1.5% 0 2.5% 0; transform: translate(calc(var(--px) * -10px), calc(var(--py) * -8px)); transition: transform 1.2s var(--ease); }
/* ink thrown over the art's left edge */
.show__art .spray { left: -4%; bottom: -8%; width: 30%; transform: rotate(200deg); --splat-o: 1; background: var(--ink); mix-blend-mode: normal; }
:root[data-theme="dark"] .show__art .spray { background: var(--bg); }

/* the native title on a black band */
/* Out of flow: however long the title, it never sizes the art's row (it used to
   push the whole hero down on phones). It is clipped to the art, and home.js sets
   the type small enough to fit before that clip ever shows. */
.show__band {
  grid-area: art; justify-self: start; align-self: start; position: absolute; z-index: 3;
  max-height: calc(100% - clamp(26px, 4vw, 56px) - 12px); overflow: hidden;
  margin: clamp(26px, 4vw, 56px) 0 0 -1.5%;
  transform: translate(calc(var(--px) * -4px), calc(var(--py) * -4px)); transition: transform 1.2s var(--ease);
}
.show__band span {
  display: block; writing-mode: vertical-rl; text-orientation: upright;
  padding: 30px 16px 34px; font: 400 clamp(22px, 1.9vw, 32px)/1 var(--f-jp); letter-spacing: .06em; color: var(--on-accent);
  -webkit-text-stroke: .7px var(--accent); paint-order: stroke fill;
}
.show__band::before {
  content: ""; position: absolute; inset: 0 -3px; z-index: -1; background: var(--accent);
  -webkit-mask: var(--brush-vstroke) 0 0 / 100% 100% no-repeat; mask: var(--brush-vstroke) 0 0 / 100% 100% no-repeat;
}
.show__band.is-in span, .show__band.is-in::before { animation: band-in .8s var(--ease) both; }
.show__band.is-in span { animation-delay: .1s; }
.show__band.is-out span, .show__band.is-out::before { animation: band-out .3s var(--ease-in) both; }
@keyframes band-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes band-out { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }

/* the volume, standing on the art, over a red splash */
.show__book {
  grid-area: art; justify-self: end; align-self: center; position: relative; z-index: 5;
  width: clamp(158px, 13.2vw, 232px); aspect-ratio: 2 / 3; margin: 0 8% 2% 0;
  transform: translate(calc(var(--px) * 14px), calc(var(--py) * 10px)); transition: transform 1.2s var(--ease);
}
.show__book .book { --w: 100%; position: absolute; inset: 0; width: 100%; --t: clamp(18px, 1.6vw, 27px); }
.show__book .book__spine { transform: rotateY(90deg) translateZ(calc(clamp(158px, 13.2vw, 232px) / 2)); }
.show__book .book__pages { transform: rotateY(-90deg) translateZ(calc(clamp(158px, 13.2vw, 232px) / 2 - 1px)); }
.show__book .book__edge { transform: rotateX(90deg) translateZ(calc(clamp(158px, 13.2vw, 232px) * .75 - 1px)); }
.show__book .book { visibility: hidden; }
.show__book .book.is-on, .show__book .book.is-off { visibility: visible; }
.show__book .book.is-entering .book__turn { animation: book-land .78s .1s both; }
.show__book .book.is-entering::after { animation: book-shadow-land .78s .1s both; }
.show__book .book.is-off { z-index: -1; }
.show__book .book.is-off .book__turn { animation: book-topple .5s both; }
.show__book .book.is-off::after { opacity: 0; transition: opacity .3s; }
.show__book .book.is-dropping .book__turn { animation: book-land .95s .45s both; }
.show__book .book.is-dropping::after { animation: book-shadow-land .95s .45s both; }

.show__splash {
  grid-area: art; justify-self: end; align-self: center; position: relative; z-index: 2;
  width: clamp(180px, 14vw, 250px); aspect-ratio: 420 / 520; align-self: end; margin: 0 calc(8% + clamp(158px, 13.2vw, 232px) * .3) -3% 0;
  background: var(--accent); mix-blend-mode: var(--art-blend);
  -webkit-mask: var(--brush-drip) center / contain no-repeat; mask: var(--brush-drip) center / contain no-repeat;
  transform: translate(calc(var(--px) * 8px), calc(var(--py) * 6px)) rotate(var(--rot, -8deg));
  transition: transform 1.2s var(--ease);
}
.show__splash.is-in { animation: splash-in .7s var(--ease) var(--delay, 0s) both; }
@keyframes splash-in { from { opacity: 0; scale: .35; } 45% { opacity: 1; } to { opacity: 1; scale: 1; } }

/* the other featured titles: a numbered list, the chosen one in colour with its timer */
.show__side {
  grid-area: side; position: relative; z-index: 4; min-width: 0; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px;
  padding: 8px 0 12px clamp(18px, 1.6vw, 26px);
  background: var(--bg-tex) 0 0 / 512px 512px fixed, var(--bg);
}
.show__side::before {
  content: ""; position: absolute; left: -4px; top: 0; bottom: 0; width: 8px; pointer-events: none; background: var(--rule);
  -webkit-mask: var(--edge-v2) 0 0 / 100% 100% no-repeat; mask: var(--edge-v2) 0 0 / 100% 100% no-repeat;
}
/* how much there is to read in Georgian: it grows as the autopilot publishes */
.show__stat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 12px; margin-top: 10px; margin-bottom: 6px; min-width: 0; }
.show__stat b { font: 700 clamp(2.4rem, 1.5rem + 1.9vw, 3.6rem)/.8 var(--f-ui); letter-spacing: -.01em; }
.show__stat span { display: flex; flex-direction: column; gap: 4px; padding-bottom: 2px; min-width: 0; font: 700 var(--fs-sm)/1.15 var(--f-ui); }
.show__stat small { font: 500 11.5px/1.2 var(--f-mono); color: var(--muted); }
.show__index { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 4px; }
.show__stat, .show__all { flex: none; }
.show__tab {
  position: relative; display: grid; grid-template-columns: 22px 54px minmax(0, 1fr); gap: 12px; align-items: center;
  width: 100%; padding: 5px 0; text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.show__tab::after { bottom: -3px; }
.show__tab .n { font: 700 12.5px/1 var(--f-mono); color: var(--muted); transition: color var(--t); }
.show__tab img {
  width: 54px; height: 56px; object-fit: cover; border-radius: 1px; background: var(--surface-2);
  filter: var(--art-filter); mix-blend-mode: var(--art-blend); box-shadow: 0 0 0 1px var(--line-2);
  transition: filter .5s var(--ease), transform .5s var(--ease);
}
.show__tab b { display: block; font: 400 1rem/1.2 var(--f-body); color: var(--text-2); transition: color var(--t); overflow: hidden; text-overflow: ellipsis; }
.show__tab small { display: block; margin-top: 5px; font: 500 11.5px/1.2 var(--f-mono); color: var(--muted); }
.show__tab:hover b { color: var(--text); }
.show__tab:hover img { transform: rotate(-3deg); }
.show__tab[aria-selected="true"] .n { color: var(--accent); }
.show__tab[aria-selected="true"] b { color: var(--text); }
.show__tab[aria-selected="true"] img { filter: none; mix-blend-mode: normal; }
/* the timer is brushed along under the chosen title */
.show__tab .bar {
  position: absolute; z-index: 1; left: -2px; right: 0; bottom: -4px; height: 7px; background: var(--accent); clip-path: inset(0 100% 0 0);
  -webkit-mask: var(--brush-under) 0 0 / 100% 100% no-repeat; mask: var(--brush-under) 0 0 / 100% 100% no-repeat;
}
.show__tab[aria-selected="true"] .bar { clip-path: inset(0 0 0 0); }
.show__tab[aria-selected="true"] .bar.is-running { animation: timer var(--hero-t, 7s) linear both; }
.show.is-held .show__tab .bar.is-running { animation-play-state: paused; }
.show__tab:focus-visible { outline-offset: 2px; }
@keyframes timer { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.show__all {
  position: relative; isolation: isolate; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 16px; color: var(--paper); font: 700 var(--fs-sm)/1 var(--f-ui);
}
.show__all::before { content: ""; position: absolute; inset: 0 -4px; z-index: -1; background: var(--ink); -webkit-mask: var(--brush-stroke) 0 0 / 100% 100% no-repeat; mask: var(--brush-stroke) 0 0 / 100% 100% no-repeat; }
:root[data-theme="dark"] .show__all { color: var(--ink); }
:root[data-theme="dark"] .show__all::before { background: var(--paper); }
.show__all .ico { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.show__all:hover .ico { transform: translateX(4px); }

/* count, prev / next / pause */
.show__ctrl { grid-area: ctrl; position: relative; z-index: 4; display: flex; align-items: center; gap: 6px; padding: 0 20px 22px 0; }
.show__count { display: flex; align-items: baseline; gap: 5px; min-width: 64px; margin-right: 6px; color: var(--muted); font: 800 15px/1 var(--f-ui); font-stretch: 62.5%; }
.show__count b { font-size: 30px; color: var(--text); }
.show__ctrl .icon-btn { width: 38px; height: 38px; color: var(--text); }

@media (max-width: 1180px) {
  .show__grid { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); grid-template-areas: "text art" "ctrl art"; }
  .show__side { display: none; }
  .show__art { margin-right: calc(var(--gutter) * -1); }
}
@media (max-width: 860px) {
  .show__grid {
    height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto;
    grid-template-areas: "art" "text" "ctrl";
  }
  .show__art { height: min(72vw, 470px); margin: 0 calc(var(--gutter) * -1); }
  .show__stage { inset: 0; }
  .show__book { width: min(32vw, 172px); margin: 0 6% 10px 0; align-self: end; }
  .show__book .book__spine { transform: rotateY(90deg) translateZ(calc(min(32vw, 172px) / 2)); }
  .show__book .book__pages { transform: rotateY(-90deg) translateZ(calc(min(32vw, 172px) / 2 - 1px)); }
  .show__book .book__edge { transform: rotateX(90deg) translateZ(calc(min(32vw, 172px) * .75 - 1px)); }
  .show__splash { width: min(46vw, 260px); margin: 0 0 -4% 0; align-self: end; }
  .show__band { margin: 18px 0 0 -2px; max-height: calc(100% - 30px); }
  .show__band span { font-size: 18px; padding: 20px 11px 24px; }
  .show__text { padding: 26px 0 0; }
  .show__title { font-size: min(13vw, calc(100cqw / (var(--L, 7) * .6)), calc(300cqw / (var(--T, 12) * .64))); }
  .show__kicker { display: none; }
  .show__desc { display: none; }
  .show__cta { margin-top: 24px; }
  .show__cta .btn--primary { flex: 1 1 auto; }
  .show__ctrl { padding: 18px 0 20px; }
}

/* ---------------------------------------------------------------- genre cloud
   Genres set in brush type, sized by how many titles they hold. Point at one
   and a cover from it follows the pointer. */
.cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px clamp(18px, 2.2vw, 34px); }
.cloud a {
  position: relative; display: inline-flex; align-items: baseline; gap: 6px;
  font: 400 min(var(--sz, 2rem), calc((100vw - 2 * var(--gutter)) / 9.2))/1.25 var(--f-brush); -webkit-text-stroke: .03em currentColor; paint-order: stroke fill;
  color: var(--text); overflow-wrap: anywhere; transition: color var(--t-fast), transform .4s var(--ease);
}
.cloud a:nth-child(3n + 2) { color: var(--text-2); }
.cloud a:hover, .cloud a:focus-visible { color: var(--accent); transform: rotate(-2deg); }
.cloud a sup { font: 700 12px/1 var(--f-mono); -webkit-text-stroke: 0; color: var(--muted); vertical-align: super; }
.peek {
  position: fixed; left: 0; top: 0; z-index: 70; width: 150px; aspect-ratio: 2 / 3; pointer-events: none;
  border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-book);
  opacity: 0; transform: translate(var(--x, 0), var(--y, 0)) rotate(-5deg) scale(.9);
  transition: opacity .25s var(--ease), transform .35s var(--ease);
}
.peek.is-on { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)) rotate(-5deg) scale(1); }
.peek img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none) { .peek { display: none; } }

/* ---------------------------------------------------------------- page header (browse / library)
   A huge brush title and a red stroke under it, painted as the page opens. */
.page-head { position: relative; padding-top: clamp(40px, 5vw, 76px); }
.page-head h1 {
  position: relative; isolation: isolate; display: inline-block;
  font: 400 var(--fs-3xl)/1 var(--f-brush); -webkit-text-stroke: var(--brush-weight) currentColor; paint-order: stroke fill;
}
.page-head h1::before { left: -.04em; right: -4%; bottom: -.18em; height: .26em; color: var(--accent); --p: 118%; transition-duration: .9s; transition-delay: .1s; }
.page-head p { color: var(--text-2); margin-top: 26px; max-width: 60ch; font-size: 1.0625rem; }
.page-head .spray { right: 2%; top: -10px; width: 200px; transform: rotate(20deg); }

/* ---------------------------------------------------------------- browse */
.filters {
  position: sticky; top: var(--nav-h); z-index: 20; margin-top: clamp(26px, 3.6vw, 40px);
  background: var(--bg-tex) 0 0 / 512px 512px fixed, var(--bg);
}
.filters::after { bottom: -3px; }
.filters__panel { padding-block: 14px; }
.filters__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.filters__row .field { flex: 1 1 260px; }
.filters__tags {
  display: flex; gap: 6px; overflow-x: auto; margin-top: 12px; padding: 1px 1px 2px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.filters__tags::-webkit-scrollbar { display: none; }
.filters__count { color: var(--muted); font: 500 13px/1.3 var(--f-mono); margin: 30px 0 24px; display: flex; justify-content: space-between; align-items: center; min-height: 36px; }
.filters__count .num { font-size: 17px; color: var(--text-2); }
.load-sentinel { height: 1px; }
@media (max-width: 640px) {
  .filters .segmented { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
  .filters .segmented::-webkit-scrollbar { display: none; }
  .filters .segmented button { flex: 1 0 auto; padding: 0 12px; }
}

/* ---------------------------------------------------------------- series page
   The art inked across the top; the volume stands over its lower edge; the
   title is brushed beside it. */
.series-hero { position: relative; }
.series-art { position: relative; height: clamp(240px, 27vw, 400px); margin-inline: calc(var(--gutter) * -.5); mix-blend-mode: var(--art-blend); }
.series-art .plate-box { position: absolute; inset: 0; }
.series-art .spray { right: 8%; bottom: -16%; width: 210px; transform: rotate(-30deg); }
.series-hero > .show__band { position: absolute; right: calc(var(--gutter) + 4%); top: clamp(18px, 2.4vw, 36px); margin: 0; z-index: 3; transform: none; }
/* only the volume stands over the art; the words sit on clean paper below it */
.series-top {
  position: relative; z-index: 3; display: grid; grid-template-columns: clamp(180px, 17vw, 260px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: clamp(18px, 2vw, 30px);
}
.series-top .series-cover { margin-top: calc(clamp(180px, 17vw, 260px) * -.95); }
.series-cover { position: relative; width: clamp(180px, 17vw, 260px); aspect-ratio: 2 / 3; }
.series-cover .book { --w: clamp(180px, 17vw, 260px); --ry: 16deg; --rx: 3deg; }
.series-cover .book__spine { transform: rotateY(90deg) translateZ(calc(clamp(180px, 17vw, 260px) / 2)); }
.series-cover .book__pages { transform: rotateY(-90deg) translateZ(calc(clamp(180px, 17vw, 260px) / 2 - 1px)); }
.series-cover .book__edge { transform: rotateX(90deg) translateZ(calc(clamp(180px, 17vw, 260px) * .75 - 1px)); }
.series-cover .book__front img { view-transition-name: cover; }
.series-cover::before {
  content: ""; position: absolute; z-index: -1; left: -42%; top: 30%; width: 120%; aspect-ratio: 420 / 520;
  background: var(--accent); transform: rotate(-24deg);
  -webkit-mask: var(--brush-drip) center / contain no-repeat; mask: var(--brush-drip) center / contain no-repeat;
  animation: splash-in .8s var(--ease) .6s both;
}
.series-info { min-width: 0; padding-bottom: 6px; container-type: inline-size; }
.series-info .kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.series-info h1 {
  font: 400 min(var(--fs-3xl), calc(100cqw / (var(--L, 7) * .6)), calc(300cqw / (var(--T, 12) * .64)))/1 var(--f-brush);
  -webkit-text-stroke: var(--brush-weight) currentColor; paint-order: stroke fill; text-wrap: balance; overflow-wrap: break-word;
}
.series-info .orig { margin-top: 14px; font: 700 13.5px/1.3 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.series-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 11px; margin-top: 12px; font: 500 13px/1.4 var(--f-mono); color: var(--text-2); }
.series-facts i { font-style: normal; color: var(--muted); }
.series-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.series-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.series-cta .btn--primary { margin-right: 14px; }

.series-body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: clamp(40px, 5vw, 88px); margin-top: clamp(56px, 6vw, 96px); }
.series-body .section__head { margin-bottom: 22px; }
.series-desc { position: relative; font: 400 1.125rem/1.75 var(--f-body); color: var(--text-2); white-space: pre-line; max-width: 64ch; }
.series-desc.is-clamped { max-height: 10.6em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
.more-btn { margin-top: 10px; }
.series-body > aside { position: sticky; top: calc(var(--nav-h) + 24px); align-self: start; display: grid; gap: 16px; }
.side-card { position: relative; padding: 20px 22px 22px; --frame-c: var(--rule); border-radius: var(--r-sm); }
.side-card h3 { position: absolute; z-index: 1; top: -12px; left: 14px; padding: 0 8px; background: var(--bg); font: 400 1.2rem/1 var(--f-brush); -webkit-text-stroke: .03em currentColor; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin: 6px 0 0; }
.facts > div { min-width: 0; }
.facts dt { font: 600 var(--fs-xs)/1.3 var(--f-ui); color: var(--muted); }
.facts dd { margin: 5px 0 0; font: 700 .9375rem/1.3 var(--f-body); overflow-wrap: break-word; }
.facts dd.num { font: 800 22px/1 var(--f-ui); font-stretch: 62.5%; }
.scorecard { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; margin-top: 6px; }
.scorecard .enso { --size: 88px; }
.scorecard p { color: var(--muted); font: 500 var(--fs-xs)/1.45 var(--f-ui); margin-top: 4px; }
.scorecard p:first-child { margin-top: 0; color: var(--text-2); }
.scorecard a { position: relative; isolation: isolate; color: var(--text); font-weight: 700; }
.scorecard a::before { left: -3px; right: -6px; bottom: -5px; height: 8px; color: var(--accent); }
.scorecard a:hover::before { --p: 118%; }
.series-body .rail .container { padding-inline: 0; }
.series-body .rail .rail__track { margin-inline: 0; padding-inline: 0; }
@media (max-width: 1000px) {
  .series-body { grid-template-columns: 1fr; }
  .series-body > aside { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 8px; }
}
@media (max-width: 680px) {
  .series-art { height: 62vw; min-height: 220px; margin-inline: calc(var(--gutter) * -1); }
  .series-hero > .show__band, .series-art .spray { display: none; }
  .series-top { grid-template-columns: 1fr; gap: 22px; }
  .series-top .series-cover { margin-top: -30vw; }
  .series-cover, .series-cover .book { --w: 44vw; width: 44vw; max-width: 200px; }
  .series-cover .book__spine { transform: rotateY(90deg) translateZ(22vw); }
  .series-cover .book__pages { transform: rotateY(-90deg) translateZ(calc(22vw - 1px)); }
  .series-cover .book__edge { transform: rotateX(90deg) translateZ(calc(33vw - 1px)); }
  .series-cta .btn--primary { flex: 1 1 100%; margin-right: 0; }
  .series-cta .btn--line { flex: 1; }
}

/* chapter list: the numbers share one column (subgrid), as wide as the widest number, so
   "186.5" never runs into its title; the row you point at gets a red number and a wash */
.chapters-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.chapters-head .field { height: 40px; width: 210px; }
.chapters { display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: 20px; }
.chapters > .ch:first-child::before { top: -3px; --rule-c: var(--rule); }
.ch {
  position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 6px;
  padding: 13px 10px 13px 12px; transition: background-color var(--t-fast);
}
.ch::after { bottom: -3px; opacity: .75; }
@supports not (grid-template-columns: subgrid) { .ch { grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr) auto; column-gap: 20px; } }
.ch:hover { background: var(--hover); }
.ch__num { min-width: 1.4em; font: 800 2.1rem/1 var(--f-ui); text-align: right; white-space: nowrap; transition: color var(--t) var(--ease); }
.ch:hover .ch__num { color: var(--accent); }
.ch__title { display: block; font: 400 1.0625rem/1.3 var(--f-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch__sub { color: var(--muted); font: 500 12px/1.3 var(--f-mono); margin-top: 5px; display: flex; gap: 4px 14px; flex-wrap: wrap; }
.ch__right { display: flex; align-items: center; gap: 14px; color: var(--muted); font: 500 12px/1.3 var(--f-mono); white-space: nowrap; }
.ch.is-read .ch__num, .ch.is-read .ch__title { color: var(--muted); }
.ch.is-current { box-shadow: inset 3px 0 0 var(--accent); }
.ch.is-current .ch__num { color: var(--accent); }
.ch__check { width: 16px; height: 16px; color: var(--muted); }
.chapters > .chapters-more, .chapters > .empty { grid-column: 1 / -1; }
.chapters-more { display: flex; justify-content: center; padding: 22px; }
@media (max-width: 560px) {
  .chapters { grid-template-columns: max-content minmax(0, 1fr); column-gap: 14px; }
  .ch__num { font-size: 1.65rem; }
  .ch__right { grid-column: 2; }
}

/* characters: portraits in ink until pointed at */
.chars { --rail-col: clamp(140px, 11.5vw, 158px); }
.char { display: block; min-width: 0; }
.char__img { position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-2); }
.char__img img { width: 100%; height: 100%; object-fit: cover; filter: var(--art-filter); mix-blend-mode: var(--art-blend); transition: transform .7s var(--ease), filter .5s var(--ease); }
.char:hover .char__img img { transform: scale(1.06); filter: none; mix-blend-mode: normal; }
.char b { display: block; margin-top: 10px; font: 700 var(--fs-sm)/1.3 var(--f-ui); }
.char span { display: block; margin-top: 2px; font: 400 11px/1.3 var(--f-mono); color: var(--muted); overflow-wrap: break-word; }

/* ---------------------------------------------------------------- library */
.stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.stat { position: relative; min-width: 160px; padding: 16px 22px 18px; --frame-c: var(--rule); border-radius: var(--r-sm); }
.stat b { display: block; font: 900 clamp(2.5rem, 2rem + 1.6vw, 3.4rem)/1 var(--f-ui); font-stretch: 62.5%; }
.stat span { display: block; margin-top: 8px; color: var(--muted); font: 600 var(--fs-sm)/1.3 var(--f-ui); }
.tabs { position: relative; display: flex; gap: 22px; margin-top: 44px; align-items: center; flex-wrap: wrap; }
.tabs::after { bottom: -3px; }
.tabs [role="tab"] { position: relative; isolation: isolate; height: 46px; padding: 0 2px; font: 700 var(--fs-base)/1 var(--f-ui); color: var(--muted); transition: color var(--t) var(--ease); }
.tabs [role="tab"]::before { left: -4px; right: -8px; bottom: -4px; height: 10px; color: var(--accent); }
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"]:hover::before { --p: 118%; opacity: .45; }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); }
.tabs [role="tab"][aria-selected="true"]::before { --p: 118%; opacity: 1; }
.tabs .count { margin-left: 7px; font: 800 1.1em/1 var(--f-ui); font-stretch: 62.5%; opacity: .6; }

/* ---------------------------------------------------------------- 404: the zero is a drop of ink that falls in */
.notfound { display: grid; place-items: center; text-align: center; min-height: 72vh; padding: 40px 20px; }
.notfound__big { display: flex; align-items: center; justify-content: center; gap: .02em; font: 900 clamp(130px, 22vw, 280px)/.9 var(--f-ui); font-stretch: 62.5%; letter-spacing: -.02em; }
.notfound__drop { position: relative; isolation: isolate; width: .44em; height: .74em; }
.notfound__drop::before, .notfound__drop::after { content: ""; position: absolute; background: var(--text); }
.notfound__drop::before {
  inset: 0; -webkit-mask: url(/assets/brand/mark.png) center / contain no-repeat; mask: url(/assets/brand/mark.png) center / contain no-repeat;
  animation: nf-drop .8s cubic-bezier(.55, 0, .9, .4) .15s both;
}
.notfound__drop::after {
  left: 50%; bottom: -.16em; width: 1.2em; height: 1.2em; margin-left: -.6em; z-index: -1; background: var(--accent); opacity: .92;
  -webkit-mask: var(--brush-splat) center / contain no-repeat; mask: var(--brush-splat) center / contain no-repeat;
  transform: scale(0) rotate(-20deg); transform-origin: 50% 70%; animation: nf-splash .9s var(--ease) .9s both;
}
@keyframes nf-drop { from { transform: translateY(-120%); opacity: 0; } 30% { opacity: 1; } }
@keyframes nf-splash { to { transform: scale(1) rotate(0deg); } }
.notfound h1 { font: 400 var(--fs-2xl)/1.15 var(--f-brush); -webkit-text-stroke: .03em currentColor; margin-top: 34px; }
.notfound p { color: var(--text-2); margin: 12px 0 30px; }
.notfound__cta { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------------------------------------------------------------- error block */
.error-block { display: grid; place-items: center; gap: 14px; text-align: center; padding: 104px 20px; color: var(--muted); }
.error-block h2 { color: var(--text); font: 400 var(--fs-2xl)/1.15 var(--f-brush); -webkit-text-stroke: .03em currentColor; }
.error-block .empty__art { width: 30px; height: 30px; color: var(--muted); }
.error-block .btn { margin-top: 12px; }