/* Comic Court — generated by comic-court's build.ts. */

.cc-kicker { margin: 0 0 .35rem; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; }
.cc-kicker a { color: var(--text-subtle); text-decoration: none; }
.cc-kicker a:hover { color: var(--neon-teal); }
.cc-date, .cc-tagline { margin: .2rem 0 0; color: var(--text-subtle); font-size: .95rem; }

.cc-strip { margin: 1.6rem 0; }
.cc-strip img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--border-soft); border-radius: 6px;
  background: #f4f4f0;
}
.cc-strip figcaption { margin-top: .6rem; color: var(--text-subtle); font-size: .9rem; }
.cc-strip figcaption a { color: var(--text-main); }

.cc-navbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.cc-nav {
  padding: .45rem .9rem; border: 1px solid var(--border-soft); border-radius: 4px;
  color: var(--text-main); text-decoration: none; font-size: .9rem;
}
.cc-nav:hover { border-color: var(--border-glow); color: var(--neon-teal); }
.cc-nav.is-off { opacity: .35; }

.cc-archive { list-style: none; margin: 0; padding: 0; }
.cc-archive a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .7rem .2rem; text-decoration: none; color: var(--text-main);
  border-bottom: 1px solid var(--border-soft);
}
.cc-archive a:hover { color: var(--neon-teal); }
.cc-archive time { color: var(--text-subtle); font-size: .85rem; white-space: nowrap; }

/* The homepage module. Lives here rather than in the site's core.css so the
   strip's styling stays in one generated file and cannot drift from the pages
   it belongs to. index.php loads this stylesheet for the same reason. */
/* The homepage module: a paper clipping pinned to a very dark page.
 *
 * The strip is black ink on cream and the site is neon on near-black, so it can
 * never blend — dropped in flat it reads as a white rectangle someone forgot to
 * style. The way out is to make the paper deliberate: give it a slight tilt, a
 * real shadow, and a strip of tape, so it reads as something pinned to the wall
 * rather than something that failed to load. On an evidence archive that also
 * says the right thing about what it is.
 */
.home-strip {
  --tilt: -0.8deg;
  margin: 2.4rem auto 0;
  max-width: 760px;
  position: relative;
  transform: rotate(var(--tilt));
  transition: transform .25s ease;
}
.home-strip:hover { --tilt: 0deg; }

.home-strip a { display: block; position: relative; }

.home-strip img {
  display: block; width: 100%; height: auto;
  background: #f4f1ea;
  padding: 14px 14px 10px;
  border: 0; border-radius: 2px;
  /* Two shadows: a tight one for the sheet's own edge, a long soft one for the
     distance between the paper and the page behind it. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .55),
    0 18px 40px -12px rgba(0, 0, 0, .75);
}

/* A torn strip of tape across the top-left corner. Deliberately off-centre and
   counter-rotated, because tape applied straight looks like a UI element. */
.home-strip::before {
  content: "";
  position: absolute;
  top: -11px; left: 8%;
  width: 128px; height: 26px;
  background: rgba(238, 232, 205, .30);
  border-left: 1px dashed rgba(238, 232, 205, .22);
  border-right: 1px dashed rgba(238, 232, 205, .22);
  transform: rotate(calc(var(--tilt) * -3.4));
  pointer-events: none;
  z-index: 1;
}

.home-strip figcaption {
  margin-top: .9rem; color: var(--text-subtle); font-size: .9rem;
  text-align: center; transform: rotate(calc(var(--tilt) * -1));
}
.home-strip figcaption a { color: var(--text-main); display: inline; }
.home-strip figcaption a:hover { color: var(--neon-teal); }

/* Nobody wants a tilted comic on a phone, and the tape has nowhere to go. */
@media (max-width: 640px) {
  .home-strip { --tilt: 0deg; max-width: none; }
  .home-strip::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-strip { transition: none; }
}