/* ==========================================================================
   SupDucks — SupComics (comics.html)

   The shop wears the site: thick ink outlines and hard shadows on the
   bookcase. The reader opens over the shop -- the shelf dimmed and blurred
   behind the book -- in the site's own Sigmar, and turns its pages with a
   leaf that swings over the spine.
   ========================================================================== */

/* Paper Mono, (c) 2025 The Paper-Mono Project Authors
   (github.com/paper-design/paper-mono), under the SIL Open Font License --
   assets/fonts/paper-mono/OFL.txt. One variable file covers 100-900. It is
   the shop's small print: the access line, badges and list notes. */
@font-face {
  font-family: "Paper Mono";
  src: url("../fonts/paper-mono/PaperMono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-small: "Paper Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ---- the shop ------------------------------------------------------------ */
.comics-eyebrow { color: var(--sup-yellow); margin-bottom: 0.5rem; }

.comics-access {
  display: inline-block;
  margin: 0 0 1.5rem;
  padding: 0.45rem 0.95rem;
  font-family: var(--font-small);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--sup-ink);
  background: var(--sup-cream);
  border: 3px solid var(--sup-ink);
  border-radius: var(--radius-pill);
  box-shadow: var(--pop-sm);
}
.comics-access:empty { display: none; }

/* The bookcase is the drawing cut in three -- the frame along the top, a
   shelf's back wall, and its plank -- so each shelf can stand taller than
   the drawing's own and hold covers you can actually read. Everything is
   sized off the case's width (cqw), the way the drawing would scale. */
.bookcase {
  container-type: inline-size;
  border: var(--line) solid var(--sup-ink);
  border-radius: var(--radius);
  box-shadow: var(--pop-lg);
  overflow: hidden;
  background: #F4B21E;
}
.bookcase__cap {
  height: calc(100cqw * 55 / 1672);
  background: url("../img/comics/shelf-cap.webp") 0 0 / 100% 100% no-repeat;
}

.shelf {
  /* The drawing's own wall is 266 x 1672 (15.9cqw). Taller than that, so
     the covers read from across the room; the wood takes the stretch. */
  --wall-h: clamp(200px, 22cqw, 330px);
  --board-h: calc(100cqw * 47 / 1672);
  height: calc(var(--wall-h) + var(--board-h));
  display: flex;
  align-items: flex-end;
  column-gap: clamp(14px, 3.4cqw, 46px);
  padding: 0 6cqw calc(var(--board-h) - 0.3cqw);
  background:
    url("../img/comics/shelf-board.webp") left bottom / 100% var(--board-h) no-repeat,
    url("../img/comics/shelf-wall.webp") left top / 100% calc(100% - var(--board-h) + 1px) no-repeat;
}

/* A cover standing face-out on the plank. */
.book {
  position: relative;
  flex: none;
  height: calc(var(--wall-h) * 0.86);
  aspect-ratio: 2 / 3;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform-origin: 50% 100%;
  filter: drop-shadow(6px 5px 0 rgba(13, 13, 13, 0.35));
  transition: transform 0.18s var(--ease-out), filter 0.18s var(--ease-out);
}
.book:hover,
.book:focus-visible {
  transform: translateY(-4%) rotate(-2.5deg) scale(1.03);
  filter: drop-shadow(11px 10px 0 rgba(13, 13, 13, 0.35));
}
.book:focus-visible { outline: 4px solid var(--sup-purple); outline-offset: 4px; }

.book__cover,
.book__blank {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid var(--sup-ink);
  border-radius: 3px 7px 7px 3px;
}
.book__cover { object-fit: cover; background: var(--sup-cream); }

/* A title with no cover yet: a plain comic-coloured board with its name. */
.book__blank {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3em;
  padding: 10%;
  text-align: center;
  background:
    radial-gradient(circle, rgba(13, 13, 13, 0.12) 1px, transparent 1.5px) 0 0 / 7px 7px,
    linear-gradient(160deg, var(--sup-sky) 0%, var(--sup-purple) 100%);
  color: var(--sup-paper);
  overflow: hidden;
}
.book__blank-series { font-family: var(--font-small); font-size: clamp(0.55rem, 1.1cqw, 0.8rem); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.book__blank-title  { font-family: var(--font-display); font-size: clamp(0.85rem, 2cqw, 1.5rem); line-height: 1.05; -webkit-text-stroke: 1.5px var(--sup-ink); paint-order: stroke fill; }

.book--locked .book__cover,
.book--locked .book__blank { filter: saturate(0.55) brightness(0.82); }

.book__tag {
  position: absolute;
  top: -0.6em;
  right: -0.6em;
  padding: 0.15em 0.55em;
  font-family: var(--font-small);
  font-size: clamp(0.62rem, 1.1cqw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--sup-ink);
  background: var(--sup-yellow);
  border: 2px solid var(--sup-ink);
  border-radius: var(--radius-pill);
}

/* ---- the same titles, as a list ------------------------------------------ */
.comics-list__title {
  margin: 1.75rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  color: var(--sup-cream);
}
.comics-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.4rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.comics-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}
.comics-list__item a { font-weight: 900; color: var(--sup-yellow); text-decoration: none; }
.comics-list__item a:hover { text-decoration: underline; }
.comics-list__item--soon a { color: rgba(255, 255, 255, 0.7); }
.comics-list__note { font-family: var(--font-small); font-size: 0.78rem; color: rgba(255, 255, 255, 0.66); }

/* ---- the reader ----------------------------------------------------------

   Opens over the shop rather than replacing it: a dark wash and a blur, so
   the bookcase is still there behind the book you took off it. */
html.is-reading,
html.is-reading body { overflow: hidden; }

.reader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  color: var(--sup-cream);
  font-family: var(--font-display);
  background: rgba(20, 11, 42, 0.58);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation: reader-in 0.26s var(--ease-out);
}
.reader[hidden] { display: none; }
@keyframes reader-in { from { opacity: 0; } to { opacity: 1; } }

.reader__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem clamp(0.9rem, 3vw, 1.75rem) 0.4rem;
}
.reader__meta { min-width: 0; display: grid; gap: 0.15rem; }
.reader__series {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sup-yellow);
}
.reader__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.75rem);
  line-height: 1.05;
  color: var(--sup-paper);
  -webkit-text-stroke: 1.5px var(--sup-ink);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--sup-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader__count {
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  color: var(--sup-cream);
}

/* The site's pill buttons. */
.reader__btn {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--sup-ink);
  background: var(--sup-cream);
  border: 3px solid var(--sup-ink);
  border-radius: var(--radius-pill);
  padding: 0.6rem 1.05rem;
  box-shadow: var(--pop-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out);
}
.reader__btn:hover:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--sup-ink); }
.reader__btn:active:not(:disabled) { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--sup-ink); }
.reader__btn:disabled { opacity: 0.4; cursor: default; }
.reader__btn:focus-visible { outline: 3px solid var(--sup-yellow); outline-offset: 3px; }
#readerClose { background: var(--sup-yellow); }

.reader__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(0.6rem, 2.2vh, 1.6rem) clamp(0.6rem, 2vw, 1.6rem);
}

/* The book sits in here; comics.js sizes a page (--pw x --ph) to fit. */
.reader__pages {
  --pw: 300px;
  --ph: 450px;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: calc(var(--pw) * 4.5);
}

/* The open book. preserve-3d all the way down, and no filter on it: a filter
   flattens 3D and the leaf would swing as a flat card. */
.rv {
  position: relative;
  display: flex;
  transform-style: preserve-3d;
  will-change: transform;
}
.rv__slot {
  position: relative;
  width: var(--pw);
  height: var(--ph);
}
.rv__slot:not(.rv__slot--empty) {
  background: #fff;
  box-shadow: 0 22px 46px -14px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(0, 0, 0, 0.15);
}
.rv__page {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
/* The curve of the paper into the spine. */
.rv--spread .rv__slot:first-child:not(.rv__slot--empty)::after,
.rv--spread .rv__slot:last-child:not(.rv__slot--empty)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none;
}
.rv--spread .rv__slot:first-child::after { right: 0; background: linear-gradient(to left, rgba(0, 0, 0, 0.28), transparent); }
.rv--spread .rv__slot:last-child::after  { left: 0;  background: linear-gradient(to right, rgba(0, 0, 0, 0.28), transparent); }

/* The leaf being turned: two faces back to back, hinged on the spine. */
.rv__leaf {
  position: absolute;
  top: 0;
  width: var(--pw);
  height: var(--ph);
  transform-style: preserve-3d;
  z-index: 2;
}
.rv__leaf--right  { left: var(--pw); transform-origin: left center; }
.rv__leaf--left   { left: 0;         transform-origin: right center; }
.rv__leaf--single { left: 0;         transform-origin: left center; }
.rv__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 22px 46px -14px rgba(0, 0, 0, 0.6);
}
.rv__face--back { transform: rotateY(180deg); }
.rv__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
}
.rv__leaf--left .rv__face--front .rv__shade,
.rv__leaf--right .rv__face--back .rv__shade { background: linear-gradient(to left, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5)); }

/* Tap the left or right of the book to turn, the way an e-reader works. */
.reader__turn {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  z-index: 3;
}
.reader__turn--prev { left: 0; cursor: w-resize; }
.reader__turn--next { right: 0; cursor: e-resize; }
.reader__turn:disabled { pointer-events: none; }
.reader__turn:focus-visible { outline: 3px dashed var(--sup-yellow); outline-offset: -10px; }

.reader__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem clamp(0.9rem, 3vw, 1.75rem) 0.35rem;
}
.reader__progress {
  height: 6px;
  background: rgba(255, 247, 233, 0.22);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.reader__progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sup-yellow);
  border-radius: var(--radius-pill);
  transition: width 0.35s var(--ease-out);
}
/* Right to left (manga): the whole book mirrored, then each page mirrored
   back, so the cover opens from the left and leaves turn left to right while
   the art and lettering read as drawn. The tap zones, the buttons and the
   progress bar swap sides to match (comics.js swaps keys and swipes). */
.reader--rtl .reader__pages { transform: scaleX(-1); }
.reader--rtl .rv__page { transform: scaleX(-1); }
.reader--rtl .reader__turn--prev { left: auto; right: 0; cursor: e-resize; }
.reader--rtl .reader__turn--next { right: auto; left: 0; cursor: w-resize; }
.reader--rtl #readerFwd { grid-column: 1; grid-row: 1; }
.reader--rtl #readerBack { grid-column: 3; grid-row: 1; }
.reader--rtl .reader__progress span { margin-left: auto; }

.reader__hint {
  margin: 0;
  padding: 0 1rem 0.75rem;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 247, 233, 0.65);
}

/* ---- holders-only prompt ------------------------------------------------- */
.comics-gate {
  position: fixed;
  inset: 0;
  z-index: 310;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(13, 13, 13, 0.55);
}
.comics-gate[hidden] { display: none; }
.comics-gate__card {
  width: min(100%, 26rem);
  padding: clamp(1.4rem, 4vw, 2rem);
  text-align: center;
  background: var(--sup-cream);
  border: var(--line) solid var(--sup-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--pop-lg);
}
.comics-gate__lock { margin: 0 0 0.25rem; font-size: 2rem; line-height: 1; }
.comics-gate__title { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.75rem); margin-bottom: 0.5rem; }
.comics-gate__text { font-weight: 700; margin-bottom: 1.25rem; }
.comics-gate__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

@media (max-width: 560px) {
  .reader__hint { display: none; }
  .reader__btn { padding: 0.55rem 0.8rem; font-size: 0.78rem; }
  .reader__bar { gap: 0.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reader { animation: none; }
  .book { transition: none; }
}