/* ==========================================================
   RESET & BASE STRUCTURE
   ========================================================== */

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  background: #fff;
  color: #111;
}

.page,
.white-page-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 1em;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================
   PRINT STYLES
   ========================================================== */

@media print {

  @page {
    size: portrait;
    margin: 0.5in;
  }

  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    counter-reset: page;
  }

  .page {
    page-break-after: always;
  }

  .page:last-child {
    page-break-after: auto;
  }

  table,
  tr,
  td,
  th {
    page-break-inside: avoid;
  }

  /* Hide UI Elements */
  .comic-actions,
  .site-header,
  .breadcrumbs,
  .hamburger,
  .side-menu,
  .white-nav,
  .download-box,
  footer {
    display: none !important;
  }
}

/* ==========================================================
   MOBILE ROTATION PROMPT
   ========================================================== */

#rotatePrompt {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 1.5em;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2em;
}

#rotatePrompt.visible {
  display: flex;
}

@media (orientation: portrait) and (max-width: 800px) {
  #rotatePrompt {
    display: flex;
  }
}

/* ==========================================================
   CREATOR VOICE BOX
   ========================================================== */

.creator-voice-box {
  margin: 60px 0 40px;
}

.creator-voice-box p,
.creator-voice-box li {
  margin: 0 0 12px;
}

.creator-voice-box h2 {
  margin: 1.6em 0 0.6em;
}

.creator-voice-box ul {
  margin: 0 0 1.5em 1.2em;
  padding: 0;
}

/* ==========================================================
   META TEXT BLOCKS
   ========================================================== */

.page-orientation,
.authorship-note {
  margin: 24px 0;
  font-size: 0.95em;
  line-height: 1.6;
  opacity: 0.9;
}

.authorship-note {
  opacity: 0.75;
  font-style: italic;
}

/* ==========================================================
   ALERT BOX
   ========================================================== */

.red-alert-box {
  margin: 2em 0;
  padding: 1.2em 1.5em;
  border-left: 4px solid #cc0000;
  border-radius: 4px;
  background: #ffe6e6;
  color: #330000;
  font-size: 1.05em;
  line-height: 1.5em;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

/* ==========================================================
   WHITE NAV WRAPPER (SAFE BASE)
   ========================================================== */

.white-nav {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}