/* ── THE READER ────────────────────────────────────────────────────────────
   A published post opened as a book. Everything here is dark on purpose: the
   app is cream paper, but artwork reads best against something that gets out of
   its way, and a reader is the one screen where the app should disappear. */

.rd {
  position: fixed; inset: 0; z-index: 120;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background:
    radial-gradient(120% 90% at 50% 0%, #2b2620 0%, #17140f 55%, #100e0a 100%);
  opacity: 0;
  transition: opacity 0.18s ease-out;
  /* The page turn is 3D; without a scene depth it is a flat wipe. */
  perspective: 2400px;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.rd.is-in { opacity: 1; }
.rd.is-leaving { opacity: 0; }

/* ── top bar ── */
.rd-bar {
  display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t, 0px) + 10px) 14px 10px;
  color: #efe7d8;
}
.rd-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.rd-titles strong {
  font-family: var(--f-head); font-weight: 700; font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-titles em { font-style: normal; font-size: 11px; opacity: 0.6; }
.rd-count { font-size: 12px; opacity: 0.72; flex: none; }
.rd-x, .rd-chip {
  flex: none;
  min-width: 36px; height: 36px; padding: 0 12px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 2px solid rgba(239, 231, 216, 0.32);
  background: rgba(239, 231, 216, 0.07);
  color: #efe7d8;
  font-family: var(--f-head); font-weight: 700; font-size: 12px; letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.rd-x { padding: 0; font-size: 14px; }
.rd-x:hover, .rd-chip:hover { background: rgba(239, 231, 216, 0.16); border-color: rgba(239, 231, 216, 0.6); }

/* ── stage ── */
.rd-stage {
  position: relative;
  display: grid; place-items: center;
  min-height: 0;                       /* lets the grid row actually shrink */
  padding: 6px 10px 10px;
  transform-style: preserve-3d;
}

/* ── a single page ── */
.rd-leaf {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--paper-2, #FDF7EA);
  border-radius: 3px;
  overflow: hidden;
}
.rd-leaf.is-blank { background: rgba(255, 255, 255, 0.03); }
/* position:relative + an absolutely-placed image is not decoration here. With
   the picture in normal flow, `height: 100%` on a grid item whose row is sized
   BY that same item is circular: the browser falls back to the natural height,
   .rd-art grows past its flex basis, and the picture runs down behind the
   caption band. Taking it out of flow means the art area can never be sized by
   its own contents. */
.rd-art { flex: 1; min-height: 0; position: relative; }
/* Fill the leaf, then `contain` inside it: the picture scales UP to the page as
   well as down. max-width/max-height alone would leave a 360px source floating
   in the middle of an 800px page — a reader is not a thumbnail grid.
   contain, never cover: a cropped manga page is an unreadable manga page. */
.rd-art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; display: block;
}

/* The author's words for this page. Sits ON the page, under the picture, the
   way a caption sits under a plate in a printed book. */
.rd-cap {
  flex: none;
  padding: 9px 14px 11px;
  border-top: 1.5px solid rgba(26, 23, 18, 0.14);
  background: rgba(26, 23, 18, 0.035);
  color: var(--ink, #101010);
  font-family: var(--f-body, inherit);
  font-size: 13.5px; line-height: 1.5;
  max-height: 30%; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
.rd-folio {
  position: absolute; bottom: 5px; right: 9px;
  font-size: 9px; opacity: 0.34; color: var(--ink, #101010);
  pointer-events: none;
}
.rd-leaf:has(.rd-cap) .rd-folio { display: none; }

/* ── phone: one page, dragged ── */
.rd-book { display: none; }
.rd-track {
  display: flex;
  width: 300%; height: 100%;
  /* justify-self: start is LOAD-BEARING. .rd-stage is a centring grid, and a
     grid item three times wider than its area gets centred — which already
     parks the middle cell on screen. The transform then shifted it a second
     time and the reader showed page 2 while the counter said page 1. Pinning
     the track to the left edge makes translate3d(-33.3333%) the only thing
     deciding which page is in view. */
  justify-self: start;
  align-self: stretch;
  will-change: transform;
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.rd-cell {
  width: 33.3333%; height: 100%;
  padding: 0 5px;
  display: grid; place-items: center;
}
.rd-cell .rd-leaf {
  width: auto; max-width: 100%; height: auto; max-height: 100%;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* On the phone the leaf has no fixed size, so the picture drives it — here the
   image goes BACK into normal flow and max-* is right, because there is no page
   shape to fill. The cap is in dvh so a phone's collapsing address bar does not
   crop the page it was reading. */
.rd-cell .rd-art { flex: 0 1 auto; position: static; }
.rd-cell .rd-art img {
  position: static;
  width: auto; height: auto; max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
}
.rd-cell .rd-leaf:has(.rd-cap) .rd-art img {
  max-height: calc(100vh - 262px);
  max-height: calc(100dvh - 262px);
}

/* ── nav arrows ── */
.rd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 68px;
  display: grid; place-items: center;
  border: none; border-radius: 8px;
  background: rgba(239, 231, 216, 0.06);
  color: #efe7d8; font-size: 26px; line-height: 1;
  cursor: pointer; z-index: 3;
  transition: background 0.12s, opacity 0.12s;
}
.rd-nav:hover { background: rgba(239, 231, 216, 0.16); }
.rd-nav:disabled { opacity: 0.16; cursor: default; }
.rd-nav--prev { left: 6px; }
.rd-nav--next { right: 6px; }

/* ── progress ── */
.rd-progress {
  height: 3px; margin: 0 0 calc(var(--safe-b, 0px));
  background: rgba(239, 231, 216, 0.12);
}
.rd-progress-fill {
  display: block; height: 100%; width: 0;
  background: var(--riso-pink, #FF4D6D);
  transition: width 0.25s ease-out;
}

/* ═══ DESKTOP ≥900px — the spread ═══════════════════════════════════════ */
@media (min-width: 900px) {
  .rd.is-spread .rd-track { display: none; }
  .rd.is-spread .rd-book { display: block; }

  /* Sized in JS from page one's own proportions — see fit() in reader.js. These
     are only the values before the first picture has decoded. */
  .rd-book {
    position: relative;
    width: min(1180px, 96vw);
    height: min(78vh, calc(96vw * 0.66));
    transform-style: preserve-3d;
  }
  .rd-slot {
    position: absolute; top: 0; height: 100%; width: 50%;
    background: var(--paper-2, #FDF7EA);
    overflow: hidden;
  }
  .rd-slot--l {
    left: 0; border-radius: 4px 0 0 4px;
    /* The gutter: paper curving into the binding. */
    box-shadow: inset -22px 0 26px -22px rgba(26, 23, 18, 0.55),
                -14px 12px 40px rgba(0, 0, 0, 0.5);
  }
  .rd-slot--r {
    right: 0; border-radius: 0 4px 4px 0;
    box-shadow: inset 22px 0 26px -22px rgba(26, 23, 18, 0.55),
                14px 12px 40px rgba(0, 0, 0, 0.5);
  }
  .rd-slot.is-blank { background: rgba(255, 255, 255, 0.025); box-shadow: none; }

  /* A hairline down the middle so the two halves read as one bound object
     rather than two floating rectangles. */
  .rd-spine {
    position: absolute; top: 0; bottom: 0; left: 50%;
    width: 2px; margin-left: -1px;
    background: linear-gradient(180deg, rgba(26,23,18,0.05), rgba(26,23,18,0.5) 12%, rgba(26,23,18,0.5) 88%, rgba(26,23,18,0.05));
    pointer-events: none; z-index: 2;
  }

  /* The turning sheet. Hinged on the spine, which is its LEFT edge, so
     rotateY sweeps it across the left page exactly like paper. */
  .rd-sheet {
    position: absolute; top: 0; right: 0;
    width: 50%; height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    transition: transform 0.62s cubic-bezier(0.42, 0.02, 0.24, 1);
    z-index: 4;
    pointer-events: none;
  }
  .rd-sheet.hidden { display: none; }
  .rd-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    background: var(--paper-2, #FDF7EA);
    overflow: hidden;
    box-shadow: 0 0 46px rgba(0, 0, 0, 0.42);
  }
  .rd-face--front { border-radius: 0 4px 4px 0; }
  /* The back of a sheet faces the other way and reads right-to-left, hence the
     pre-rotation; without it the reverse page arrives mirrored. */
  .rd-face--back { transform: rotateY(180deg); border-radius: 4px 0 0 4px; }

  .rd-nav { width: 52px; height: 92px; }
  .rd-nav--prev { left: 14px; }
  .rd-nav--next { right: 14px; }
  .rd-bar { padding: 14px 18px 12px; }
  .rd-titles strong { font-size: 17px; }
  .rd-cap { font-size: 14px; padding: 11px 18px 13px; }
}

/* A book with one page is not a spread — centre it instead of pinning it to
   the left half with a dead slot beside it. */
@media (min-width: 900px) {
  .rd-book:has(.rd-slot--r.is-blank) .rd-slot--l { left: 25%; border-radius: 4px; box-shadow: 0 14px 44px rgba(0,0,0,0.5); }
  .rd-book:has(.rd-slot--r.is-blank) .rd-spine { display: none; }
}

/* ── zoom: one page, as big as the screen allows ── */
.rd-zoom {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: rgba(10, 9, 6, 0.94);
  cursor: zoom-out;
  overflow: auto;
}
.rd-zoom.hidden { display: none; }
.rd-zoom-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain; display: block;
}
/* Turning pages under a zoomed page would be disorienting — the arrows go away
   until it is dismissed. */
.rd.is-zoomed .rd-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rd, .rd-track, .rd-sheet, .rd-progress-fill { transition: none; }
  .rd-sheet { display: none !important; }
}