/* 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; }

/* Archive heading row: the "Archive" title with the feed link pulled to the
   opposite edge, so following by RSS is discoverable without a banner. */
.cc-archive-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; }
.cc-archive-links { display: flex; gap: 1.1rem; align-items: baseline; flex-wrap: wrap; }
.cc-feed-link { color: var(--text-subtle); text-decoration: none; font-size: .85rem;
  letter-spacing: .04em; white-space: nowrap; }
.cc-feed-link:hover, .cc-feed-link:focus-visible { color: var(--neon-teal); outline: none; }

/* --- Cast page (R6) -----------------------------------------------------
   A who's-who card per member: the headless figure on a paper card (the ink
   would vanish on the dark page), the name, a one-line note, and the strips
   they appear in. */
.cc-cast-list { list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: 1rem; }
.cc-cast-member { display: flex; gap: 1.1rem; align-items: stretch;
  border: 1px solid var(--border-soft); border-radius: 8px; padding: 1rem;
  background: rgba(127,127,127,.04); }
.cc-cast-portrait {
  flex: 0 0 108px; width: 108px; align-self: stretch;
  display: grid; place-items: end center; padding: 8px 8px 0;
  background: #f4f1ea; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.cc-cast-fig { display: block; width: auto; height: 132px; max-width: 100%; }
.cc-cast-body { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.cc-cast-name { margin: 0; font-size: 1.15rem; }
.cc-cast-blurb { margin: 0; color: var(--text-subtle); }
.cc-cast-apps { margin: .25rem 0 0; font-size: .9rem; }
.cc-cast-apps-label { color: var(--text-subtle); letter-spacing: .04em;
  text-transform: uppercase; font-size: .74rem; margin-right: .2rem; }
.cc-cast-apps a { color: var(--text-main); text-decoration: none;
  border-bottom: 1px solid var(--border-soft); }
.cc-cast-apps a:hover, .cc-cast-apps a:focus-visible { color: var(--neon-teal);
  border-color: var(--border-glow); outline: none; }
/* A cast member the run has not reached yet: listed, but with no strips to
   link. Reads as a quiet "coming up" rather than a gap. */
.cc-cast-soon { color: var(--text-subtle); font-style: italic; }

@media (max-width: 480px) {
  .cc-cast-member { flex-direction: column; align-items: center; text-align: center; }
  .cc-cast-portrait { width: 132px; flex-basis: auto; }
  .cc-cast-apps-label { display: block; margin: 0 0 .1rem; }
}

/* 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; }

  /* Touch-target parity with the rest of the site (WCAG 2.5.5, 44×44 min).
     .45rem × .9rem left the archive/prev/next chips ~30px tall on a phone. */
  .cc-nav {
    min-height: 44px;
    padding: .7rem 1rem;
    display: inline-flex; align-items: center;
    line-height: 1.2;
  }
  .cc-navbar { gap: .5rem .6rem; }

  /* Narrow-screen archive rows: give the title room to wrap without the
     "space-between" flex pinning the date to the far edge on its own line. */
  .cc-archive a { column-gap: .8rem; }
  .cc-archive .cc-archive-title { min-width: 0; }

  /* The 2026-08-02 note here flagged that a wide strip scales to ~154px
     tall on a 360px viewport, unreadable, and "would need … a
     mobile-optimised SVG variant". It exists now: <picture> serves
     <date>.m.svg — the same panels tiled one per row — to screens 700px
     and under. Fixed 2026-08-06. */
}
@media (prefers-reduced-motion: reduce) {
  .home-strip { transition: none; }
}

/* The transcript disclosure under each strip — the sidecar's text, out where
   a reader (or a search engine, or someone on a slow connection waiting for
   750KB of SVG) can actually reach it. */
.cc-transcript { margin: 1rem 0 1.4rem; }
.cc-transcript summary {
  cursor: pointer; color: var(--text-subtle); font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.cc-transcript summary:hover, .cc-transcript summary:focus-visible { color: var(--text-main); }
.cc-transcript pre {
  white-space: pre-wrap; overflow-wrap: anywhere; font: inherit;
  margin: .7rem 0 0; padding: .9rem 1.1rem;
  border-left: 3px solid var(--text-subtle); background: rgba(127,127,127,.06);
}

/* --- Tap-to-zoom lightbox (R1) -----------------------------------------
   The strip is wrapped in a link to its own SVG; with JS that link opens a
   native <dialog> instead, and without JS it still opens the raw image, so
   "zoom" degrades to the browser's own picture view. */
.cc-strip-zoom { display: block; cursor: zoom-in; }
.cc-strip-zoom:focus-visible { outline: 2px solid var(--neon-teal); outline-offset: 3px; }

.cc-lightbox {
  padding: 0; border: 0; background: transparent; color: inherit;
  width: 96vw; max-width: 96vw; height: 96vh; max-height: 96vh;
  overflow: hidden;
}
.cc-lightbox::backdrop { background: rgba(8, 8, 10, .86); }

.cc-lightbox-stage {
  width: 100%; height: 100%; overflow: auto;
  display: grid; place-items: center;
  -webkit-overflow-scrolling: touch;
}
.cc-lightbox-stage img {
  display: block; max-width: 100%; max-height: 96vh; width: auto; height: auto;
  background: #f4f1ea; border-radius: 4px; cursor: zoom-in;
}
/* Zoomed: drop the fit constraint so the art paints at its own pixel size and
   the stage scrolls/pans. Touch users can also pinch. */
.cc-lightbox-stage.is-zoomed { place-items: start; }
.cc-lightbox-stage.is-zoomed img {
  max-width: none; max-height: none; cursor: zoom-out;
}

.cc-lightbox-close {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--border-soft); background: rgba(20, 20, 24, .92);
  color: var(--text-main); font-size: 1.6rem; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cc-lightbox-close:hover, .cc-lightbox-close:focus-visible {
  border-color: var(--neon-teal); color: var(--neon-teal); outline: none;
}

@media (max-width: 640px) {
  .cc-lightbox {
    width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  }
  .cc-lightbox-stage img { max-height: 100vh; }
}