/* The Comix: the game's comic, page after page, one chapter per realm. */
.comix{background:var(--navy)}
.comix .intro{padding:44px 16px 10px}
.chapter{padding:34px 0 50px;border-bottom:6px solid var(--navy-d)}
.chapter .wrap{max-width:1000px}
.ch{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:26px}
.ch .num{background:var(--rc);border:4px solid var(--rd);border-radius:12px;padding:5px 14px 2px;font:400 17px/1.2 Luckiest,Impact,sans-serif;letter-spacing:.6px;color:var(--white);-webkit-text-stroke:4px var(--rd);paint-order:stroke fill}
.ch h2{--c:var(--rc);--d:var(--rd);font-size:clamp(34px,6.4vw,58px);--sw:7px}
.page{margin:0 0 22px;background:#000;border:5px solid #000;border-radius:14px;overflow:hidden}
.page img{width:100%;height:auto}
.chapter.people{--rc:var(--people);--rd:var(--people-d)}.chapter.media{--rc:var(--media);--rd:var(--media-d)}
.chapter.compute{--rc:var(--compute);--rd:var(--compute-d)}.chapter.power{--rc:var(--power);--rd:var(--power-d)}
@media (max-width:600px){.page{margin-bottom:14px;border-width:3px;border-radius:10px}}
.page img{cursor:zoom-in}
#zoom{position:fixed;inset:0;z-index:50;background:#000;display:flex;align-items:center;justify-content:center;cursor:zoom-out}
#zoom[hidden]{display:none}
#zoom img{max-width:100vw;max-height:100vh;object-fit:contain}