/* The Cache Chronicles comic reader.
   Book mode only switches on when <html> has .cr-on (set by the page's head script and
   cleared again if the reader cannot start). Without it, the issue is the normal
   scrolling article, so no-JS, failed loads, and reduced-motion visitors can read it. */

:root { --cr-loaded: 1; }

/* ---------- Scrolling version (default) ---------- */
html:not(.cr-on) .cp-art,
html:not(.cr-on) .cp-folio,
html:not(.cr-on) .cp-back,
html:not(.cr-on) .cr-bar { display: none; }

/* ---------- Book mode ---------- */
.cr-on main { max-width: none; padding: 0; }
.cr-on .reader {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 16px 10px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(45, 127, 249, 0.22), transparent 62%),
    radial-gradient(circle at 15% 85%, rgba(225, 29, 42, 0.18), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(34, 197, 94, 0.14), transparent 45%);
}
.cr-on .book-holder {
  --pw: 343px;
  position: relative;
  width: var(--pw);
  max-width: 100%;
}
.cr-on .book { position: relative; }

/* Before the library takes over: show the closed comic (cover only). */
.cr-on:not(.cr-ready) .cpage { display: none; }
.cr-on:not(.cr-ready) .cpage:first-child {
  display: block; position: relative;
  width: var(--pw); height: calc(var(--pw) * 1.5);
}
/* Measuring pass: lay every page out at its real size, invisibly. */
.cr-on.cr-measure .cpage {
  display: block !important; position: absolute; left: 0; top: 0;
  width: var(--pw); height: calc(var(--pw) * 1.5);
  visibility: hidden;
}

/* ---------- A comic page ---------- */
.cr-on .cpage { overflow: hidden; background: #f3ead2; }
.cr-on .cp-sheet {
  --ink: #111;
  --b: 0.17em;
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 0.6em;
  padding: 1.05em 1em 1.7em;
  overflow: hidden;
  color: var(--ink);
  font-family: "Comic Neue", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  font-weight: 700;
  font-size: calc(var(--pw) * 0.0415 * var(--fit, 1));
  line-height: 1.3;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Newsprint: warm paper, faint halftone, darker edges */
  background-color: #f3ead2;
  background-image:
    radial-gradient(rgba(70, 45, 10, 0.07) 22%, transparent 24%),
    radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(110, 80, 30, 0.2) 100%);
  background-size: 0.42em 0.42em, 100% 100%;
}
/* Binding shadow on the spine side of each page */
.cr-on .stf__item.--right .cp-sheet { box-shadow: inset 1.6em 0 1.4em -1.2em rgba(0, 0, 0, 0.4); }
.cr-on .stf__item.--left .cp-sheet { box-shadow: inset -1.6em 0 1.4em -1.2em rgba(0, 0, 0, 0.4); }

.cr-on .cp-sheet > * { flex-shrink: 0; margin: 0; }
.cr-on .cp-sheet p { color: var(--ink); font-size: 1em; line-height: 1.3; margin: 0; }
.cr-on .cp-sheet strong { color: #b5121b; }
.cr-on .cp-sheet a { color: #0a46c2; }

/* Panel title row */
.cr-on .cp-head { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.cr-on .cp-sheet .panel-label {
  margin: 0;
  font-family: Bangers, Impact, sans-serif; font-weight: 400;
  font-size: 1em; letter-spacing: 0.08em; line-height: 1.25;
  color: #fff; background: #e11d2a;
  border: var(--b) solid var(--ink);
  padding: 0.12em 0.5em 0.02em;
  box-shadow: 0.16em 0.16em 0 var(--ink);
  transform: rotate(-3deg);
}
.cr-on .cp-sheet h2 {
  margin: 0;
  font-family: Bangers, Impact, sans-serif; font-weight: 400;
  font-size: 2.05em; line-height: 1; letter-spacing: 0.035em;
  color: var(--ink);
  text-shadow: 0.06em 0.06em 0 #f5b82e;
}

/* Yellow caption boxes */
.cr-on .cp-cap {
  position: relative; z-index: 2;
  background: #ffe14d;
  border: var(--b) solid var(--ink);
  padding: 0.45em 0.6em;
  box-shadow: 0.18em 0.18em 0 var(--ink);
}
.cr-on .cp-cap--white { background: #fffdf5; }

/* Doug's speech bubble */
.cr-on .cp-bubble {
  position: relative; z-index: 3;
  margin: 0 0 0.5em;
  background: #fff;
  border: var(--b) solid var(--ink);
  border-radius: 1.5em;
  padding: 0.7em 0.95em;
}
.cr-on .cp-bubble p { font-style: normal; }
.cr-on .cp-bubble::before,
.cr-on .cp-bubble::after {
  content: ""; position: absolute; top: 100%; border-style: solid;
  border-color: var(--ink) transparent transparent transparent;
}
.cr-on .cp-bubble::before { left: 18%; border-width: 1.25em 0.95em 0 0; }
.cr-on .cp-bubble::after {
  left: calc(18% + 0.21em); margin-top: -0.3em;
  border-width: 1.02em 0.66em 0 0; border-color: #fff transparent transparent transparent;
}

/* Art panels: crops of the issue's own cover art */
.cr-on .cp-art,
.cr-on .cp-photo {
  position: relative;
  flex: 1 1 auto; min-height: 3.5em;
  border: var(--b) solid var(--ink);
  overflow: hidden;
  background: #142456;
}
.cr-on .cp-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; margin: 0; border: 0; border-radius: 0; max-width: none;
}
.cr-on .cp-art::after,
.cr-on .cp-photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(0, 0, 0, 0.22) 20%, transparent 23%);
  background-size: 0.36em 0.36em;
  mix-blend-mode: multiply; opacity: 0.55;
}
/* Each panel zooms into a different part of the cover */
.cr-on .cp-art img { transform: scale(var(--z, 1)); transform-origin: var(--o, 50% 50%); }
.cr-on .cp-art--team img { object-position: 50% 75%; --z: 1.15; --o: 50% 70%; }
.cr-on .cp-art--hero img { object-position: 20% 40%; --z: 2.1; --o: 22% 34%; }
.cr-on .cp-art--chest img { object-position: 46% 80%; --z: 1.9; --o: 48% 72%; }
.cr-on .cp-art--detective img { object-position: 84% 50%; --z: 2.3; --o: 80% 50%; }
.cr-on .cp-art--logo { background: #000; }
.cr-on .cp-art--logo img { object-fit: contain; }
.cr-on .cp-art--loot img { object-position: 52% 35%; --z: 1.9; --o: 55% 38%; }
/* Issue #2 ("What's It Worth?") crops of its own cover */
.cr-on .cp-art--w-team img { object-position: 50% 52%; --z: 1.05; --o: 50% 52%; }
.cr-on .cp-art--w-scale img { object-position: 50% 36%; --z: 1.5; --o: 50% 36%; }
.cr-on .cp-art--w-detective img { object-position: 82% 46%; --z: 2.3; --o: 80% 45%; }
.cr-on .cp-art--w-chest img { object-position: 42% 76%; --z: 1.5; --o: 42% 74%; }

/* Photo panels show the whole photo */
.cr-on .cp-photo {
  background-color: #0e1220;
  background-image: radial-gradient(rgba(45, 127, 249, 0.35) 22%, transparent 25%);
  background-size: 0.5em 0.5em;
}
.cr-on .cp-photo--red { background-color: #2a0b10; background-image: radial-gradient(rgba(225, 29, 42, 0.45) 22%, transparent 25%); }
.cr-on .cp-photo::after { display: none; }
.cr-on .cp-photo .panel-img {
  position: absolute; inset: 0.35em;
  width: calc(100% - 0.7em); height: calc(100% - 0.7em);
  object-fit: contain; margin: 0; border: 0; border-radius: 0;
}
.cr-on .cp-sheet .caption {
  position: relative; z-index: 2;
  align-self: flex-end;
  margin: -1.55em 0.5em 0 0;
  font-size: 0.8em; font-weight: 700;
  background: #fff; color: var(--ink);
  border: 0.14em solid var(--ink);
  padding: 0.12em 0.5em;
  transform: rotate(-1.5deg);
}

/* Splash page: intro caption overlaps the art */
.cr-on .cp-splash .cp-intro { margin: 0 1.6em -1.9em 0; }

/* Panel 4 call-out */
.cr-on .cp-sheet .card {
  margin: 0.2em 0 0;
  background: #e11d2a;
  border: var(--b) solid var(--ink);
  border-radius: 0;
  padding: 0.75em 0.7em 0.85em;
  box-shadow: 0.22em 0.22em 0 var(--ink);
  background-image: radial-gradient(rgba(0, 0, 0, 0.16) 22%, transparent 25%);
  background-size: 0.45em 0.45em;
}
.cr-on .cp-sheet .card h2 {
  color: #fff; font-size: 1.55em; margin: 0 0 0.35em;
  text-shadow: 0.07em 0.07em 0 var(--ink);
}
.cr-on .cp-sheet .card .button,
.cr-on .cp-sheet .cp-back-btn {
  display: inline-block; margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif; font-weight: 800;
  font-size: 0.95em; line-height: 1.2; text-decoration: none;
  color: var(--ink); background: #ffe14d;
  border: 0.15em solid var(--ink); border-radius: 999px;
  padding: 0.55em 1.1em;
  box-shadow: 0.14em 0.14em 0 var(--ink);
}

/* Next issue page */
.cr-on .cp-next .cp-sheet > h2 {
  align-self: flex-start;
  font-size: 2.5em; color: #fff;
  background: #1f5eff;
  border: var(--b) solid var(--ink);
  padding: 0.12em 0.35em 0.02em;
  text-shadow: 0.06em 0.06em 0 var(--ink);
  box-shadow: 0.09em 0.09em 0 var(--ink);
  transform: rotate(-2deg);
}
.cr-on .cp-signoff {
  position: relative; z-index: 2;
  align-self: flex-end;
  margin: -2.2em 0.6em 0 0 !important;
  background: #fffdf5;
  border: var(--b) solid var(--ink);
  padding: 0.4em 0.7em;
  text-align: right;
  box-shadow: 0.18em 0.18em 0 var(--ink);
}

/* Page numbers */
.cr-on .cp-folio {
  position: absolute; bottom: 0.45em; right: 1.1em;
  font-family: Bangers, Impact, sans-serif; font-size: 0.85em; letter-spacing: 0.1em;
  color: rgba(0, 0, 0, 0.55);
}
.cr-on .stf__item.--left .cp-folio { right: auto; left: 1.1em; }

/* Front cover: full-bleed art, the title stays in the page for search and screen readers */
.cr-on .cp-cover .cp-sheet { padding: 0; background: #000; box-shadow: none; }
.cr-on .cp-cover .cover {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; margin: 0; border: 0; border-radius: 0;
}
.cr-on .cp-cover .cp-sheet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0) 60%),
              linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 6%);
}
.cr-on .cp-cover .eyebrow,
.cr-on .cp-cover h1 {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0;
}

/* Back cover */
.cr-on .cp-back .cp-sheet {
  align-items: center; justify-content: center; text-align: center;
  gap: 0.8em; padding: 1.4em 1em;
  color: #fff;
  background-color: #07080c;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(45, 127, 249, 0.3), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(225, 29, 42, 0.3), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(34, 197, 94, 0.2), transparent 40%);
  background-size: auto;
  box-shadow: none;
}
.cr-on .cp-back-logo { width: 62%; height: auto; border-radius: 0.6em; }
.cr-on .cp-back .cp-back-slogan {
  color: #f5b82e;
  font-family: Bangers, Impact, sans-serif; font-weight: 400;
  font-size: 1.9em; letter-spacing: 0.06em; line-height: 1;
}
.cr-on .cp-back-qr { width: 34%; height: auto; border-radius: 0.4em; border: 0.25em solid #fff; }

/* ---------- Controls ---------- */
.cr-on .cr-bar { width: 100%; max-width: 640px; text-align: center; padding-top: 12px; }
.cr-on .cr-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cr-on .cr-btn {
  min-width: 84px; min-height: 44px; padding: 0 16px;
  font-family: Bangers, Impact, sans-serif; font-size: 20px; letter-spacing: 0.06em;
  color: #111; background: #f5b82e;
  border: 2px solid #111; border-radius: 999px;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
}
.cr-on .cr-btn:disabled { opacity: 0.35; cursor: default; }
.cr-on .cr-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cr-on .cr-count { min-width: 130px; color: #f3f4f6; font-weight: 700; font-size: 15px; }
.cr-on .cr-hint { margin: 8px 0 0; color: #a3a9b8; font-size: 13px; line-height: 1.4; }
@media (max-height: 640px) { .cr-on .cr-hint { display: none; } }