/* ============================================================================
   Case File — standalone comic-book pages.
   Everything is scoped under .cf so it cannot affect the rest of the site.
   Loaded only by layouts/casefile.njk (not by base.njk).
   ============================================================================ */

.cf {
  --ink: #14110f;
  --paper: #f3e9d2;
  --paper-2: #efe2c4;
  --pop: #ffd23f;
  --pop-ink: #1a1407;
  --brass: #b08d2d;
  --crimson: #b3372b;
  --navy: #16233f;
  --sky: #cfe3f2;

  color: var(--ink);
  background-color: var(--paper);
  /* Ben-Day halftone dot field */
  background-image: radial-gradient(rgba(20, 17, 15, 0.10) 1.2px, transparent 1.4px);
  background-size: 9px 9px;
  font-family: Inter, system-ui, sans-serif;
  min-height: 100vh;
  padding: 0 0 6rem;
  -webkit-font-smoothing: antialiased;
}

.cf *,
.cf *::before,
.cf *::after { box-sizing: border-box; }

.cf__wrap { width: min(1100px, 92vw); margin-inline: auto; }

/* ---- Display type (comic lettering) ---------------------------------- */
.cf h1, .cf h2, .cf h3,
.cf .cf-num, .cf .cf-sfx, .cf .cf-kicker {
  font-family: "Bangers", Impact, "Haettenschweiler", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 0.98;
}

/* ============================ TOP BAR ================================= */
.cf-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 4vw;
  border-bottom: 5px solid var(--ink);
}
.cf-bar a { color: var(--paper); text-decoration: none; }
.cf-bar__home {
  font-family: "Bangers", Impact, sans-serif; font-size: 1.25rem; letter-spacing: .04em;
  color: var(--pop);
}
.cf-bar__back {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .12em;
  border: 2px solid var(--paper); border-radius: 999px; padding: .28rem .8rem;
}
.cf-bar__back:hover { background: var(--pop); color: var(--ink); border-color: var(--pop); }

/* ============================ COVER / HUB ============================= */
.cf-cover { text-align: center; padding: 3.5rem 0 1.5rem; position: relative; }
.cf-cover__kicker {
  display: inline-block; background: var(--crimson); color: #fff;
  font-family: "Bangers", Impact, sans-serif; font-size: 1.1rem; letter-spacing: .12em;
  padding: .25rem 1rem; transform: rotate(-2deg); border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.cf-cover__title {
  font-size: clamp(2.8rem, 9vw, 6.5rem);
  color: var(--ink);
  margin: 1.2rem 0 .4rem;
  text-shadow: 5px 5px 0 var(--pop), 8px 8px 0 var(--ink);
}
.cf-cover__sub {
  max-width: 46ch; margin: 1.2rem auto 0; font-size: 1.05rem; line-height: 1.5;
  font-family: "Libre Baskerville", Georgia, serif;
}
.cf-cover__meta {
  margin-top: 1rem; font-family: "IBM Plex Mono", monospace; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brass);
}

/* SFX burst */
.cf-burst {
  display: inline-block; background: var(--pop); color: var(--pop-ink);
  font-family: "Bangers", Impact, sans-serif; font-size: 1.1rem; letter-spacing: .08em;
  padding: .5rem .9rem; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(3deg);
}

/* ---- Chapter cover grid (table of contents) -------------------------- */
.cf-toc {
  display: grid; gap: 1.6rem; margin: 2.5rem 0 0;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.cf-cardlink { text-decoration: none; color: inherit; display: block; }
.cf-card {
  background: #fff; border: 5px solid var(--ink); box-shadow: 9px 9px 0 var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
  height: 100%; display: flex; flex-direction: column;
}
.cf-cardlink:hover .cf-card { transform: translate(-3px, -3px); box-shadow: 12px 12px 0 var(--ink); }
.cf-cardlink:focus-visible .cf-card { outline: 4px solid var(--crimson); outline-offset: 3px; }
.cf-card__art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 5px solid var(--ink); }
.cf-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-card__chip {
  position: absolute; top: 0; left: 0;
  background: var(--ink); color: var(--pop);
  font-family: "Bangers", Impact, sans-serif; font-size: 1.35rem; letter-spacing: .06em;
  padding: .1rem .7rem; border-bottom-right-radius: 4px;
}
.cf-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.cf-card__title { font-size: 1.7rem; color: var(--ink); }
.cf-card__syn { font-size: .92rem; line-height: 1.45; color: #2c2620; }
.cf-card__count {
  margin-top: auto; font-family: "IBM Plex Mono", monospace; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brass);
}

/* ============================ CHAPTER HEADER ========================= */
.cf-chead { padding: 2.6rem 0 1rem; }
.cf-chead__num {
  display: inline-block; background: var(--navy); color: var(--pop);
  font-family: "Bangers", Impact, sans-serif; font-size: 1.05rem; letter-spacing: .14em;
  padding: .2rem .9rem; border: 3px solid var(--ink); transform: rotate(-2deg);
}
.cf-chead__title { font-size: clamp(2.2rem, 6vw, 4rem); margin: .8rem 0 .5rem; }
.cf-chead__syn {
  max-width: 60ch; font-family: "Libre Baskerville", Georgia, serif;
  font-size: 1.02rem; line-height: 1.55; color: #2c2620;
}

/* ============================ PANELS ================================= */
.cf-strip { display: flex; flex-direction: column; gap: 2.4rem; margin-top: 1.6rem; }

.cf-panel {
  background: #fff; border: 5px solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
  position: relative; scroll-margin-top: 1.5rem;
}
.cf-panel:nth-child(even) { transform: rotate(-0.5deg); }
.cf-panel:nth-child(odd)  { transform: rotate(0.4deg); }

.cf-panel__art { position: relative; border-bottom: 5px solid var(--ink); overflow: hidden; }
.cf-panel__art img { display: block; width: 100%; height: auto; }

/* numbered badge */
.cf-num {
  position: absolute; top: -18px; left: -18px; z-index: 3;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--crimson); color: #fff; border: 4px solid var(--ink);
  display: grid; place-items: center; font-size: 1.5rem;
  box-shadow: 3px 3px 0 var(--ink); transform: rotate(-6deg);
}

/* caption box holding the pulled quote */
.cf-cap {
  background: var(--pop); color: var(--pop-ink); border-top: 5px solid var(--ink);
  padding: 1.1rem 1.3rem 1.2rem; position: relative;
}
.cf-cap__quote {
  font-family: "Libre Baskerville", Georgia, serif; font-size: 1.15rem; line-height: 1.45;
  font-style: italic; margin: 0;
}
.cf-cap__quote::before { content: "\201C"; }
.cf-cap__quote::after  { content: "\201D"; }
.cf-cap__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: .9rem; flex-wrap: wrap;
}
.cf-cap__tag {
  font-family: "IBM Plex Mono", monospace; font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: #5a4a14;
}
.cf-cta {
  text-decoration: none; background: var(--ink); color: var(--paper);
  font-family: "Bangers", Impact, sans-serif; letter-spacing: .06em; font-size: 1.05rem;
  padding: .35rem 1rem; border: 3px solid var(--ink); white-space: nowrap;
  box-shadow: 3px 3px 0 rgba(0,0,0,.35);
}
.cf-cta:hover { background: var(--crimson); }
.cf-cta:focus-visible { outline: 3px solid var(--crimson); outline-offset: 2px; }

/* draft / no-art panel */
.cf-panel--draft .cf-panel__art {
  aspect-ratio: 16 / 7; background:
    repeating-linear-gradient(45deg, var(--paper-2) 0 14px, #e6d6b2 14px 28px);
  display: grid; place-items: center;
}
.cf-draft-stamp {
  font-family: "Bangers", Impact, sans-serif; font-size: clamp(1.6rem, 5vw, 3rem);
  color: var(--crimson); border: 4px dashed var(--crimson); padding: .4rem 1.4rem;
  transform: rotate(-7deg); letter-spacing: .08em; background: rgba(255,255,255,.55);
}

/* ============================ CHAPTER NAV =========================== */
.cf-chnav {
  display: flex; gap: 1rem; justify-content: space-between; margin-top: 3rem; flex-wrap: wrap;
}
.cf-chnav a, .cf-chnav span {
  flex: 1 1 240px; text-decoration: none; color: var(--ink);
  background: #fff; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: .8rem 1rem; transition: transform .1s ease, box-shadow .1s ease;
}
.cf-chnav a:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--ink); }
.cf-chnav .cf-chnav--next { text-align: right; }
.cf-chnav span { opacity: .4; box-shadow: none; }
.cf-chnav__lab {
  font-family: "IBM Plex Mono", monospace; font-size: .68rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brass); display: block;
}
.cf-chnav__name { font-family: "Bangers", Impact, sans-serif; font-size: 1.35rem; }

/* ============================ DISPATCH INDEX (TOC) ================== */
.cf-index { margin-top: 3.5rem; border-top: 5px solid var(--ink); padding-top: 1.6rem; }
.cf-index__h { font-size: 1.8rem; margin: 0 0 1rem; }
.cf-index__chapter { margin-bottom: 1.3rem; }
.cf-index__ctitle {
  font-family: "Bangers", Impact, sans-serif; font-size: 1.2rem; letter-spacing: .04em;
}
.cf-index__ctitle a { color: var(--navy); text-decoration: none; }
.cf-index__ctitle a:hover { color: var(--crimson); }
.cf-index ol { list-style: none; margin: .4rem 0 0; padding: 0; }
.cf-index li { display: flex; gap: .6rem; padding: .18rem 0; font-size: .92rem; align-items: baseline; }
.cf-index__no {
  font-family: "IBM Plex Mono", monospace; font-size: .72rem; color: var(--brass);
  min-width: 2.4rem;
}
.cf-index a.cf-index__link { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(20,17,15,.25); }
.cf-index a.cf-index__link:hover { color: var(--crimson); border-color: var(--crimson); }
.cf-index__here { color: var(--crimson); font-weight: 600; }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 620px) {
  .cf-num { top: -14px; left: -14px; width: 44px; height: 44px; font-size: 1.2rem; }
  .cf-panel:nth-child(even),
  .cf-panel:nth-child(odd) { transform: none; }
  .cf-cap__quote { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-panel, .cf-card { transform: none !important; transition: none !important; }
}