/* fonts */
@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-Black.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-Black.otf") format("opentype"),
    url("fonts/Metropolis-Black.woff") format("woff"),
    url("fonts/Metropolis-Black.ttf") format("truetype"),
    url("fonts/Metropolis-Black.svg#Metropolis-Black") format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-BlackItalic.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/Metropolis-BlackItalic.otf") format("opentype"),
    url("fonts/Metropolis-BlackItalic.woff") format("woff"),
    url("fonts/Metropolis-BlackItalic.ttf") format("truetype"),
    url("fonts/Metropolis-BlackItalic.svg#Metropolis-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-Bold.otf") format("opentype"),
    url("fonts/Metropolis-Bold.woff") format("woff"),
    url("fonts/Metropolis-Bold.ttf") format("truetype"),
    url("fonts/Metropolis-Bold.svg#Metropolis-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-BoldItalic.otf") format("opentype"),
    url("fonts/Metropolis-BoldItalic.woff") format("woff"),
    url("fonts/Metropolis-BoldItalic.ttf") format("truetype"),
    url("fonts/Metropolis-BoldItalic.svg#Metropolis-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-Regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/Metropolis-Regular.otf") format("opentype"),
    url("fonts/Metropolis-Regular.woff") format("woff"),
    url("fonts/Metropolis-Regular.ttf") format("truetype"),
    url("fonts/Metropolis-Regular.svg#Metropolis-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Metropolis";
  src: url("fonts/Metropolis-RegularItalic.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/Metropolis-RegularItalic.otf") format("opentype"),
    url("fonts/Metropolis-RegularItalic.woff") format("woff"),
    url("fonts/Metropolis-RegularItalic.ttf") format("truetype"),
    url("fonts/Metropolis-RegularItalic.svg#Metropolis-RegularItalic")
      format("svg");
  font-weight: normal;
  font-style: italic;
}

/* page-specific */
/* Small admin pill, fixed to the bottom-right corner: it replaces the
   old full-width preview bar. Shows the view state (Admin view,
   Public view, or Preview with the scheduled date) and the toggle
   link, so the admin can switch views without logging out. */
.cc-adminpill {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1b3b57;
  color: white;
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.cc-adminpill a {
  color: #c6e5a3;
  text-decoration: underline;
  white-space: nowrap;
}

/* Multi-image comics: all panels sit in the DOM, stacked in a single
   grid cell, so the browser loads them all up front. Panels rest off
   to the right until seen, and off to the left once passed; the active
   panel sits in place. Switching slides the new panel in from the
   side it comes from (right going forward, left going back) and the
   old one out the other side. The grid sizes to the tallest panel, so
   switching never moves the page. overflow: hidden keeps the sliding
   panels inside the comic box. (Panels are full container width via
   the site's #comic img rule, so a 100% slide clears them fully.) */
.cc-panels {
  display: grid;
  overflow: hidden;
}

.cc-panel {
  grid-area: 1 / 1;
  transform: translateX(100%);
  transition: transform 0.45s ease;
  z-index: 1;
}

.cc-panel.active {
  transform: translateX(0);
  z-index: 2;
}

.cc-panel.before {
  transform: translateX(-100%);
}

.cc-carousel-nav {
  text-align: center;
  padding-top: 10px;
}

/* No looping: at the first panel there is no Prev, at the last panel
   there is no Next. */
.cc-carousel-nav.at-start #carousel-prev,
.cc-carousel-nav.at-end #carousel-next {
  display: none;
}

.cc-fullscreen-overlay {
  display: none;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000;
  top: 0;
  cursor: pointer;
}

.cc-fullscreen-center {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.cc-fullscreen-overlay img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

#cc-comic {
  margin: 0 auto;
  margin-top: 0px;
}

#cc-comicbody {
  position: relative;
}

#cc-transcriptclick {
  padding: 10px;
  border: 1px dashed black;
  text-align: center;
}

.cc-storyline-contain {
  clear: both;
  margin-bottom: 10px;
}

.cc-storyline-thumb {
  float: left;
  margin-bottom: 10px;
}

.cc-storyline-text {
  float: left;
  margin-left: 10px;
  margin-bottom: 10px;
}

.cc-storyline-header {
  font-size: 1.5em;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 1px solid #999;
}

.cc-storyline-caption {
  font-style: italic;
  font-size: 0.9em;
  padding: 10px 0;
}

.cc-thumbcontain {
  float: left;
}

.cc-newsheader {
  font-size: 2em;
  font-weight: bold;
}

.cc-publishtime {
  padding-bottom: 5px;
  font-size: 0.8em;
  padding-top:10px;
}

.cc-newsbody {
  padding: 10px 0px;
}

.cc-transcript {
  padding: 10px 0px;
}

.cc-tagline {
  padding: 5px 0px;
}

.cc-commentlink {
  padding-top: 10px;
}

.cc-commentheader {
  padding-top: 10px;
  font-weight: bold;
  font-size: 2em;
}

.cc-chapterrow {
  font-size: 1.5em;
  font-weight: bold;
  padding: 10px 0px;
  border-bottom: 1px solid #000;
}

.cc-chapterrow a {
  text-decoration: none;
}

.cc-searchheader {
  font-size: 2em;
  padding-bottom: 10px;
  font-weight: bold;
}

.cc-searchbox {
  width: 200px;
  padding: 10px;
  float: left;
}

.cc-searchbox a {
  text-decoration: none;
}

.cc-searchcomicname {
  text-align: center;
  font-weight: bold;
  padding-bottom: 5px;
}

.cc-searchcomicimgbox {
  text-align: center;
  height: 200px;
}

.cc-searchcomicimgbox img {
  max-width: 200px;
  max-height: 200px;
  width: auto;
  height: auto;
}

.cc-searchprevnext {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 16px;
}

.cc-searchpages {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 16px;
}

.cc-blogtitle {
  font-size: 2em;
  font-weight: bold;
}

.cc-blogpublishtime {
  padding-bottom: 5px;
  font-size: 0.8em;
}

.cc-blogcontent {
  padding: 10px 0px;
}

.cc-transcript {
  padding: 10px 0px;
}

.cc-tagline {
  padding: 5px 0px;
}

.cc-blogcommentlink {
  padding-top: 10px;
}

.cc-blogcommentheader {
  padding-top: 10px;
  font-weight: bold;
  font-size: 2em;
}

.cc-postdivider {
  clear: both;
  height: 20px;
}

.cc-blogprevnext {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
}

.cc-blogpages {
  padding: 5px 0px;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
}

.cc-searchblogtitle {
  padding: 10px;
  border-bottom: 1px solid #000;
}

#contentwarningimg {
  background: #fff;
  top: 10px;
  left: 160px;
  position: absolute;
  width: 400px;
  padding: 15px;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}

#cc-comicbody {
  position: relative;
}

#cc-hoverdiv {
  position: absolute;
  width: 74%;
  padding: 3%;
  background: #fff;
  color: #000;
  z-index: 1001;
  font-size: 1.5em;
  border-radius: 10px;
}

.cc-storyline-pagetitles {
  margin-top: 10px;
  clear: both;
}

.cc-gallery,
.cc-storyline-thumbwrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: distribute;
  justify-content: space-around;
  clear: both;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.cc-gallery a,
.cc-storyline-pagethumb {
  margin: 10px;
  padding: 5px;
}

.cc-gallery a img,
.cc-storyline-pagethumb a img {
  width: 120px;
  max-height: 200px;
  -o-object-fit: contain;
  object-fit: contain;
}

.customHtml {
  font-size: 1em;
}

.customHtml a {
  color: #fff;
}

.cc-showbig {
  list-style: none outside none;
  padding: 0;
  margin: 0;
}

.cc-showbig li {
  display: block;
}

.cc-showbig li a {
  cursor: pointer;
}

.cc-blur {
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -o-filter: blur(20px);
  -ms-filter: blur(20px);
  filter: blur(20px);
}

.cc-contentwarning {
  position: absolute;
  width: 70%;
  padding: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  left: 15%;
  font-weight: bold;
  background: white;
  z-index: 20;
  top: 50px;
}

/* Archive calendar grid (v23): 5 columns, one per weekday (Mon–Fri).
   Each month is its own grid; a comic sits in its weekday column and
   empty placeholder cells keep the alignment. Thumbnails fill their
   cell (they are generated 200px wide, so they stay sharp at this
   size). The date wraps under the thumbnail; on narrow screens the
   text and gaps shrink so the 5-column grid still fits. */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 512px;
}

.archive-grid li a {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  text-align: center;
  color: var(--green-dark);
  text-decoration: none;
}

.archive-grid li a .comic-thumb {
  padding: 8px 5px 0;
  border: var(--border);
  box-shadow: 0 2px 0 var(--green-medium);
  border-radius: var(--border-radius);
  background: #fff;
  transition: transform 150ms ease-in-out;
}

.archive-grid li a:hover .comic-thumb {
  transform: rotate(2deg);
}

.archive-grid li a .comic-thumb img {
  display: block;
  width: 100%;
  height: auto;
}

.archive-grid li a .date {
  padding: 7px 0;
}

/* Empty weekday placeholder: invisible, just holds the column so the
   comics around it stay in their weekday. */
.archive-grid li.empty {
  min-height: 0;
}

/* Headings after a grid need the same gap the old list had. */
#page.archives #page-content .archive-grid + h2,
#page.archives #page-content .archive-grid + h3 {
  margin-top: 20px;
}

/* Sort toggle: two links, the current one marked. */
.archive-sort {
  text-align: center;
  margin: 0 0 20px;
  font-size: 16px;
  color: var(--green-dark);
}

.archive-sort a {
  color: var(--green-dark);
  text-decoration: none;
  padding: 0 4px;
}

.archive-sort a[aria-current="true"] {
  font-weight: 700;
  text-decoration: underline;
}

@media screen and (width < 545px) {
  .archive-grid {
    gap: 6px;
  }
  .archive-grid li a {
    font-size: 11px;
  }
  .archive-grid li a .comic-thumb {
    padding: 4px 3px 0;
  }
}

/* Admin page (v25): the posting form's fields, file list, news
   fieldset and buttons get a consistent gap. The site's generic rules
   zero out <p> margins and add 15px top padding between paragraphs,
   so without this the form's non-<p> children (file list, fieldset,
   buttons after the fieldset) sat tight against each other. */
#page.admin_page #post-form > * {
  margin-bottom: 18px;
}

#page.admin_page #post-form > *:last-child {
  margin-bottom: 0;
}

/* Inside the form the margin above already covers the gap, so the
   generic paragraph-to-paragraph top padding does not double it. */
#page.admin_page #post-form > p + p {
  padding-top: 0;
}

#page.admin_page #post-form {
  margin-bottom: 24px;
}

/* Upload previews + drag reorder (v26): each chosen file shows a
   preview thumbnail (click to toggle full width, so the comic text is
   readable while typing the transcript) with its name and the
   reorder/remove buttons below it. Dragging a row dims it, and a line
   at the top or bottom of the row it is over shows where it will land. */
#file-list li {
  border: 2px solid var(--green-medium);
  border-radius: var(--border-radius);
  background: #fff;
  padding: 8px;
  margin-bottom: 10px;
}

#file-list li .upload-preview {
  display: block;
  max-width: 320px;
  width: 100%;
  height: auto;
  border: 1px solid #ccc;
  cursor: zoom-in;
}

#file-list li .upload-preview.expanded {
  max-width: 100%;
  cursor: zoom-out;
}

#file-list li .upload-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
}

#file-list li.dragging {
  opacity: 0.4;
}

#file-list li.drop-before {
  box-shadow: inset 0 3px 0 var(--green-vibrant-dark);
}

#file-list li.drop-after {
  box-shadow: inset 0 -3px 0 var(--green-vibrant-dark);
}