/**
 * /case-studies/ — the dark "case file" theme.
 *
 * Sean asked for its own layout and colour scheme, similar to /blog/ but its own thing
 * (2026-10-05). /blog/ is a cream gallery of image cards; this page is the opposite: an ink-dark
 * dossier — deep brown ground (the site's own #3B2F26 family, pushed darker), cream Playfair
 * headings, gold hairlines, method-coloured chips, and a featured band over a typographic index
 * that carries no card images on purpose (see the page header for why).
 *
 * ⚠️ src/layouts/Journal.astro sets --msc-nav-height and the page sits under the fixed navbar;
 * the hero pads itself clear of it instead of relying on the body offset.
 * ⚠️ shared.css clamps h1–h6 sizes with !important sitewide; every heading size here is
 * therefore deliberate and !important too, so the two cannot half-apply.
 */

.cs {
  --cs-ink: #211a14;
  --cs-ink-2: #2a221b;
  --cs-ink-3: #362c22;
  --cs-cream: #f5eed8;
  --cs-dim: #c9bca2;
  --cs-faint: #9c8f78;
  --cs-gold: #d6ad60;
  --cs-copper: #c98354;
  --cs-sage: #9aa88c;
  --cs-plum: #b18a9c;
  --cs-line: rgba(214, 173, 96, 0.22);
  background: var(--cs-ink);
  color: var(--cs-cream);
  font-family: var(--msc-font-body, 'Public Sans', sans-serif);
  overflow: clip;
}

.cs-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── hero ─────────────────────────────────────────────────────────────────────────────── */
.cs-hero {
  position: relative;
  padding: calc(var(--msc-nav-height, 5.125rem) + 4.5rem) 0 4.25rem;
  background:
    radial-gradient(ellipse 90% 70% at 15% -10%, rgba(214, 173, 96, 0.16), transparent 60%),
    linear-gradient(180deg, var(--cs-ink-3), var(--cs-ink) 78%);
  border-bottom: 1px solid var(--cs-line);
}
.cs-eyebrow {
  font-family: var(--msc-font-accent, 'Jost', sans-serif);
  font-size: 0.6875rem !important;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cs-gold);
  margin: 0 0 1.1rem;
}
.cs-title {
  font-family: var(--msc-font-heading, serif);
  font-size: clamp(2.75rem, 6vw, 4.5rem) !important;
  font-weight: 400;
  line-height: 1.05 !important;
  color: var(--cs-cream);
  margin: 0 0 1.4rem;
}
.cs-lede {
  max-width: 62ch;
  font-size: 1.125rem;
  line-height: 1.75 !important;
  color: var(--cs-dim);
  margin: 0 0 1.75rem;
}
.cs-stat {
  font-family: var(--msc-font-accent, 'Jost', sans-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs-faint);
  margin: 0;
}
.cs-stat strong { color: var(--cs-gold); font-weight: 600; }

/* ── featured band ────────────────────────────────────────────────────────────────────── */
.cs-featured { padding: 3.5rem 0 1rem; }
.cs-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.75rem;
  margin-top: 1.6rem;
}
.cs-feat { display: flex; flex-direction: column; }
.cs-feat-img {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cs-ink-3);
  border: 1px solid var(--cs-line);
}
.cs-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.cs-feat:hover .cs-feat-img img { transform: scale(1.035); }
.cs-feat-body { padding-top: 1.1rem; }
.cs-feat-title {
  font-family: var(--msc-font-heading, serif);
  font-size: 1.375rem !important;
  font-weight: 500;
  line-height: 1.3 !important;
  margin: 0.55rem 0 0.6rem;
}
.cs-feat-title a { color: var(--cs-cream); text-decoration: none; }
.cs-feat-title a:hover { color: var(--cs-gold); }
.cs-feat-ex {
  color: var(--cs-dim);
  font-size: 0.95rem;
  line-height: 1.65 !important;
  margin: 0 0 0.9rem;
}

/* ── chips — the blog's own chip style: Public Sans 600, uppercase, slight tracking ─────── */
.cs-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cs-chip {
  font-family: var(--msc-font-body, 'Public Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-gold);
  border: 1px solid var(--cs-line);
  padding: 0.24rem 0.55rem;
  white-space: nowrap;
}
.cs-chip[data-method='financial'] { color: var(--cs-copper); border-color: rgba(201, 131, 84, 0.35); }
.cs-chip[data-method='qimen']     { color: var(--cs-sage);   border-color: rgba(154, 168, 140, 0.35); }
.cs-chip[data-method='zwds']      { color: var(--cs-plum);   border-color: rgba(177, 138, 156, 0.35); }
.cs-chip[data-method='technicals'],
.cs-chip[data-method='western'],
.cs-chip[data-method='fengshui'],
.cs-chip[data-method='other']     { color: var(--cs-faint);  border-color: rgba(156, 143, 120, 0.3); }

/* ── most popular — the Must-Reads signal, on a tinted band ───────────────────────────── */
.cs-popular {
  padding: 3.25rem 0 3.5rem;
  background: var(--cs-ink-2);
  border-top: 1px solid var(--cs-line);
  border-bottom: 1px solid var(--cs-line);
}
.cs-pop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 2.5rem;
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--cs-line);
}
.cs-pop { display: flex; gap: 1.1rem; padding: 1.15rem 0; border-bottom: 1px solid var(--cs-line); }
.cs-pop-num {
  font-family: var(--msc-font-body, 'Public Sans', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--cs-gold);
  min-width: 1.4rem;
  padding-top: 0.3rem;
}
.cs-pop-title {
  font-family: var(--msc-font-heading, serif);
  font-size: 1.05rem !important;
  font-weight: 500;
  line-height: 1.35 !important;
  margin: 0 0 0.35rem;
}
.cs-pop-title a { color: var(--cs-cream); text-decoration: none; }
.cs-pop-title a:hover { color: var(--cs-gold); }
.cs-pop-meta { display: flex; align-items: center; gap: 0.6rem; margin: 0; flex-wrap: wrap; }
.cs-pop-meta time {
  font-family: var(--msc-font-body, 'Public Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--cs-faint);
}
.cs-pop-meta .cs-chip { font-size: 0.625rem; padding: 0.16rem 0.45rem; }

/* ── the full case log ────────────────────────────────────────────────────────────────── */
.cs-all { padding: 3rem 0 4rem; }
.cs-h2 {
  font-family: var(--msc-font-heading, serif);
  font-size: clamp(1.75rem, 3.2vw, 2.4rem) !important;
  font-weight: 400;
  line-height: 1.2 !important;
  color: var(--cs-cream);
  margin: 0 0 1.6rem;
}
.cs-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cs-line); }
/* The pills need the inline script to do anything; without it they are hidden rather than
   offered dead. The rows themselves are all visible without JS, so the page reads and
   crawls the same either way. */
.cs-pills { display: none; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.1rem; }
.cs.cs-js .cs-pills { display: flex; }
.cs-pill {
  font-family: var(--msc-font-body, 'Public Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cs-dim);
  background: transparent;
  border: 1px solid var(--cs-line);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.cs-pill:hover { color: var(--cs-gold); border-color: var(--cs-gold); }
.cs-pill.is-active { background: var(--cs-gold); border-color: var(--cs-gold); color: var(--cs-ink); }
.cs-pill-n { opacity: 0.65; font-weight: 500; margin-inline-start: 0.3rem; }
.cs-count {
  font-family: var(--msc-font-body, 'Public Sans', sans-serif);
  font-size: 0.8125rem;
  color: var(--cs-faint);
  margin: 0 0 1.1rem;
}
.cs-row[hidden] { display: none; }
.cs-row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 2rem;
  padding: 1.7rem 0;
  border-bottom: 1px solid var(--cs-line);
}
.cs-date {
  font-family: var(--msc-font-body, 'Public Sans', sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--cs-faint);
  padding-top: 0.35rem;
}
.cs-row-title {
  font-family: var(--msc-font-heading, serif);
  font-size: 1.2rem !important;
  font-weight: 500;
  line-height: 1.35 !important;
  margin: 0.55rem 0 0.45rem;
}
.cs-row-title a { color: var(--cs-cream); text-decoration: none; }
.cs-row-title a:hover { color: var(--cs-gold); }
.cs-row-ex {
  color: var(--cs-dim);
  font-size: 0.9375rem;
  line-height: 1.65 !important;
  margin: 0;
  max-width: 78ch;
}
.cs-row { transition: background-color 0.25s ease; }
.cs-row:hover { background: rgba(214, 173, 96, 0.045); }

/* ── closing CTA ──────────────────────────────────────────────────────────────────────── */
.cs-cta {
  padding: 4.5rem 0 5.5rem;
  background: linear-gradient(180deg, var(--cs-ink), #3b2f26);
  border-top: 1px solid var(--cs-line);
  text-align: center;
}
.cs-cta .cs-h2 { margin-bottom: 0.9rem; }
.cs-cta-lede {
  color: var(--cs-dim);
  max-width: 52ch;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.7 !important;
}
.cs-cta-links { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; margin: 0; }
.cs-btn {
  display: inline-block;
  font-family: var(--msc-font-accent, 'Jost', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cs-ink);
  background: var(--cs-gold);
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--cs-gold);
  transition: background-color 0.25s ease, color 0.25s ease;
}
.cs-btn:hover { background: #e4c580; border-color: #e4c580; }
.cs-btn-ghost { background: transparent; color: var(--cs-gold); }
.cs-btn-ghost:hover { background: rgba(214, 173, 96, 0.12); color: var(--cs-gold); }

.cs :is(a, button):focus-visible { outline: 2px solid var(--cs-gold); outline-offset: 3px; }

/* ── responsive ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .cs-feat-grid { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .cs-pop-list { grid-template-columns: minmax(0, 1fr); }
  .cs-row { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .cs-date { padding-top: 0; }
}
@media (max-width: 560px) {
  .cs-hero { padding-top: calc(var(--msc-nav-height, 5.125rem) + 3rem); }
  .cs-lede { font-size: 1.05rem; }
  .cs-row { padding: 1.4rem 0; }
}