/* EntryLane case studies — components layered on top of guide.css.
   Loads AFTER guide.css and inherits its carbon tokens (--bg / --panel /
   --accent / --ink / --body-copy / --muted / --line), so a case study reads
   as the same long-form surface as an organizer guide and only adds the
   pieces a case study needs: a stat band, a year-by-year spine, a
   before/after clock, a pull quote, and a scrollable comparison table.

   Kinetic-industrial per DESIGN.md: square 0px corners, Archivo Black
   numerals and headings, Archivo 700 tracked caps for labels, JetBrains Mono
   for data, one accent, stamped 0 6px 0 offsets and no soft blur. */

/* ── Stat band ────────────────────────────────────────────────────────────
   The headline numbers, straight off the show archive. Hairline grid built
   from a 1px gap over a dark line color — borders do the structural work,
   so there is no shadow here at all. Mirrors the archive page's stat strip
   (lib/showMetricsPage.js) on purpose: same show, same voice. */
.cs-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin: 0 0 var(--sp-32, 2rem);
}
.cs-stat { background: var(--panel); padding: 1.1rem 0.9rem; text-align: center; }
.cs-stat b {
  display: block;
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 400;
  font-size: 1.9rem; line-height: 1; letter-spacing: 0;
  color: var(--ink);
}
.cs-stat span {
  display: block;
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin-top: 0.5rem;
}

/* ── Year spine ───────────────────────────────────────────────────────────
   2024 / 2025 / 2026 side by side — the shape of the whole story before
   anyone reads a paragraph. Accent top stripe is the same grammar as
   .g-card and .g-cta so the three surfaces agree. */
.cs-years {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 2.5rem;
}
.cs-year {
  background: var(--panel); border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  padding: 1.2rem 1.3rem 1.3rem;
}
.cs-year-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.14em; color: var(--accent);
  margin: 0 0 0.5rem;
}
.cs-year-head {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 1.05rem; letter-spacing: 0.07em; text-transform: uppercase;
  line-height: 1.2; color: var(--ink); margin: 0 0 0.5rem;
}
.cs-year p { color: var(--body-copy); font-size: 0.93rem; margin: 0; }
/* All three years carry the accent stripe — each one was a working show, and
   a greyed-out stripe would read as a verdict on the earlier two. The current
   year is separated by the stamped offset instead, which is emphasis rather
   than ranking. */
.cs-year--now { box-shadow: 0 6px 0 var(--accent-press); }

/* Lead-in above the strip. */
.cs-years-lead {
  color: var(--body-copy); margin: 2rem 0 0;
  font-size: 1rem; line-height: 1.6;
}
.cs-years-lead + .cs-years { margin-top: 1.1rem; }

/* ── Before / after clock ─────────────────────────────────────────────────
   The single number this whole case study turns on: how long tabulation
   took. Two blocks, one stamped in the accent. */
.cs-clock {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem; margin: 2rem 0 2.5rem;
}
.cs-clock-cell {
  background: var(--panel); border: 1px solid var(--line);
  padding: 1.4rem 1.3rem; text-align: center;
}
.cs-clock-cell--now { border-color: var(--accent); box-shadow: 0 6px 0 var(--accent-press); }
.cs-clock-label {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.7rem;
}
.cs-clock-cell--now .cs-clock-label { color: var(--accent); }
.cs-clock-big {
  font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 400;
  font-size: clamp(2rem, 6vw, 2.9rem); line-height: 0.95; letter-spacing: 0;
  text-transform: uppercase; color: var(--ink); margin: 0 0 0.5rem;
}
.cs-clock-sub { font-size: 0.88rem; color: var(--muted); margin: 0; }

/* ── Pull quote ───────────────────────────────────────────────────────────
   Accent rule on the left, display face, no quotation-mark decoration. */
.cs-quote {
  margin: 2.2rem 0; padding: 0.3rem 0 0.3rem 1.4rem;
  border-left: 3px solid var(--accent);
}
.cs-quote p {
  font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 1.15rem; line-height: 1.45; color: var(--ink); margin: 0;
}
.cs-quote cite {
  display: block; margin-top: 0.6rem; font-style: normal;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}

/* ── Comparison table ─────────────────────────────────────────────────────
   Inherits article table styling; this only makes it survive a phone and
   lets the EntryLane row carry the accent. */
.cs-table-wrap { overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }
.cs-table-wrap table { margin: 0; min-width: 620px; }
.cs-table-wrap tr.cs-row-ours td { background: rgba(88, 160, 216, 0.08); color: var(--ink); }
.cs-table-wrap tr.cs-row-ours td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.cs-scroll-hint {
  font-family: 'JetBrains Mono', monospace; font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  margin: 0.5rem 0 0;
}
@media (min-width: 761px) { .cs-scroll-hint { display: none; } }

/* ── Disclosure / provenance notes ────────────────────────────────────────
   A case study about our own show has to say so out loud. Flag-styled with
   the accent rule on top rather than a colored fill — it is information,
   not a warning. */
.cs-note {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1.1rem 1.3rem; margin: 2rem 0;
}
.cs-note-head {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent);
  margin: 0 0 0.4rem;
}
.cs-note p { margin: 0 0 0.6rem; color: var(--body-copy); font-size: 0.93rem; }
.cs-note p:last-child { margin-bottom: 0; }

/* ── Field-detail grid (the roster facts, as data not prose) ─────────────── */
.cs-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  margin: 1.6rem 0;
}
.cs-fact { background: var(--panel); padding: 0.9rem 1.1rem; }
.cs-fact-key {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 0.25rem;
}
.cs-fact-val { font-size: 0.95rem; color: var(--ink); margin: 0; }
.cs-fact-val .mono {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 0.95rem;
}

/* ── Index cards (/case-studies) ─────────────────────────────────────────── */
.cs-index-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem; margin-top: 2.5rem;
}

@media (max-width: 480px) {
  .cs-stats { grid-template-columns: repeat(2, 1fr); }
  .cs-stat b { font-size: 1.6rem; }
  /* Odd count would strand an empty cell in the last row. */
  .cs-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-clock-cell--now, .cs-year--now { box-shadow: none; }
}