/* Comics: the index (series and standalone books) and the page reader. Colors
   fall back to the site plugin's --rd-* tokens. */

.rd73-comics-head { font-family: var(--rd-head, Cinzel, serif) !important; color: var(--rd-gold, #d4a017) !important; font-size: 1.2rem !important; letter-spacing: .12em; text-transform: uppercase; margin: 2rem 0 1rem !important; border-bottom: 1px solid #262220; padding-bottom: .5rem; }
.rd73-comic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem; margin: 1rem 0 1.5rem; }
.rd73-comic-card { display: block; text-decoration: none !important; color: inherit !important; }
.rd73-comic-card img, .rd73-comic-series summary img {
  display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; background: #141110;
  border: 1px solid rgba(212, 160, 23, .3); border-radius: 2px; transition: border-color .2s, box-shadow .2s;
}
.rd73-comic-card:hover img, .rd73-comic-card:focus-visible img { border-color: var(--rd-gold, #d4a017); box-shadow: 0 0 22px rgba(212, 160, 23, .18); }
.rd73-comic-card strong { display: block; margin-top: .5rem; font-family: var(--rd-head, Cinzel, serif); font-size: .85rem; line-height: 1.3; color: #e8dcc0; }
.rd73-comic-card span { font-family: var(--rd-ui, Inter, sans-serif); font-size: .72rem; color: #8a7d64; }

.rd73-comic-series-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1.2rem; }
.rd73-comic-series { grid-column: span 1; }
.rd73-comic-series[open] { grid-column: 1 / -1; }
.rd73-comic-series summary { list-style: none; cursor: pointer; display: block; }
.rd73-comic-series summary::-webkit-details-marker { display: none; }
.rd73-comic-series[open] summary { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid #262220; padding-bottom: .8rem; }
.rd73-comic-series[open] summary img { width: 72px; }
.rd73-comic-series-name { display: block; margin-top: .5rem; font-family: var(--rd-head, Cinzel, serif); font-size: .92rem; color: var(--rd-gold, #d4a017); }
.rd73-comic-series[open] .rd73-comic-series-name { margin: 0; font-size: 1.15rem; }
.rd73-comic-series-count { font-family: var(--rd-ui, Inter, sans-serif); font-size: .72rem; color: #8a7d64; }
.rd73-comic-series summary:hover img { border-color: var(--rd-gold, #d4a017); }

/* ---- the reader ---- */
.rd73-comic { margin: 0 0 1.5rem; }
.rd73-reader-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 0; margin-bottom: .6rem;
  border-bottom: 1px solid #262220; font-family: var(--rd-ui, Inter, sans-serif); font-size: .85rem; color: #cbbd9c;
}
.rd73-reader-bar .rd73-reader-count { min-width: 6.5em; text-align: center; font-variant-numeric: tabular-nums; }
.rd73-reader-bar .rd73-reader-spacer { flex: 1; }
.rd73-comic button, .rd73-comic .rd73-reader-resume {
  -webkit-appearance: none; appearance: none; background: transparent !important; color: var(--rd-gold, #d4a017) !important;
  border: 1px solid rgba(212, 160, 23, .45) !important; border-radius: 2px !important; box-shadow: none !important;
  font-family: var(--rd-head, Cinzel, serif) !important; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .45rem .8rem !important; cursor: pointer; line-height: 1.2; transition: background .2s, color .2s;
}
.rd73-comic button:hover, .rd73-comic button[aria-pressed="true"] { background: var(--rd-gold, #d4a017) !important; color: #0a0807 !important; }
.rd73-comic button:disabled { opacity: .35; cursor: default; }
.rd73-reader-stage { position: relative; display: flex; justify-content: center; align-items: center; background: #050404; user-select: none; touch-action: pan-y; }
.rd73-reader-stage img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; }
.rd73-reader-stage .rd73-reader-zone { position: absolute; top: 0; bottom: 0; cursor: pointer; }
.rd73-reader-stage .rd73-reader-zone.is-prev { left: 0; width: 33%; }
.rd73-reader-stage .rd73-reader-zone.is-next { right: 0; width: 67%; }
.rd73-reader-scroll img { display: block; max-width: min(100%, 900px); height: auto; margin: 0 auto 6px; }
.rd73-comic:fullscreen { background: #050404; overflow: auto; padding: 0 1rem; }
.rd73-comic:fullscreen .rd73-reader-stage img { max-height: calc(100vh - 70px); }

.rd73-comic-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0 1.5rem; font-family: var(--rd-head, Cinzel, serif); font-size: .85rem; }
.rd73-comic-nav a { color: var(--rd-gold, #d4a017) !important; text-decoration: none; }
.rd73-comic-nav a:hover { text-decoration: underline; }
.rd73-comic-of { color: #8a7d64; text-align: center; }
.rd73-comic-nft a { color: var(--rd-gold, #d4a017) !important; font-family: var(--rd-head, Cinzel, serif); letter-spacing: .06em; }

@media (max-width: 600px) {
  .rd73-comic-grid, .rd73-comic-series-list { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .rd73-reader-stage img { max-height: none; width: 100%; }
  .rd73-comic-nav { flex-direction: column; text-align: center; }
}