/* ===================================================================
   CASE STUDY PAGE
   A long-form report layout: a gradient hero with the deck in a device,
   a story block with the facts beside it, then numbered chapters.
   Everything is prefixed cs- so nothing here can collide with the
   site components in style.css.
   =================================================================== */

/* the back link, floating over the hero and repeated at the foot */
.cs-back { position: fixed; z-index: 60; top: 1.5rem; left: 1.5rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  text-decoration: none; font-size: 0.85rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.82); transition: color 0.15s ease; }
.cs-back:hover { color: #fff; }
.cs-back span { font-size: 1rem; line-height: 1; }
@media (max-width: 52rem) { .cs-back { top: 1rem; left: 1rem; } }

.cs-backfoot { display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
  color: rgba(255, 255, 255, 0.7); border: 1px solid var(--whair);
  border-radius: var(--r-pill); padding: 0.6rem 1.2rem;
  transition: background 0.15s ease, color 0.15s ease; }
.cs-backfoot:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.cs-foot { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cs-foot .nextcase { flex: 1 1 24rem; }

/* --- hero ---------------------------------------------------------- */
.cs-hero { position: relative; overflow: hidden; color: #fff;
  padding: 8.5rem 0 5rem;
  background: linear-gradient(135deg, var(--court) 0%,
    var(--court-deep) 46%, var(--ink) 100%); }
.cs-hero-glow { position: absolute; inset: 0; opacity: 0.5;
  background:
    radial-gradient(48% 46% at 18% 22%, rgba(255, 255, 255, 0.32), transparent 60%),
    radial-gradient(42% 40% at 82% 78%, rgba(127, 179, 232, 0.35), transparent 55%); }
.cs-hero .wrap { position: relative; }
.cs-kicker { display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.35rem 0.7rem; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68); margin-bottom: 1.6rem; }
.cs-kicker .sep { opacity: 0.4; }
.cs-hero h1 { color: #fff; max-width: 17ch;
  font-size: clamp(2.6rem, 7vw, 5.6rem); line-height: 0.98;
  letter-spacing: -0.035em; margin: 0; }
.cs-lead { margin-top: 1.6rem; max-width: 44ch;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.5;
  color: rgba(255, 255, 255, 0.86); }
@media (max-width: 52rem) { .cs-hero { padding: 6.5rem 0 3.5rem; } }

/* the deck, shown in a device */
.cs-device { margin: 4.5rem auto 0; max-width: 68rem; }
.cs-device-body { position: relative; background: #0a0a0a;
  border-radius: 1.6rem; padding: 0.75rem;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.1); }
.cs-notch { position: absolute; left: 50%; top: 0.75rem; z-index: 2;
  width: 6rem; height: 0.8rem; transform: translateX(-50%);
  border-radius: 0 0 0.5rem 0.5rem; background: #0a0a0a; }
.cs-screen { overflow: hidden; border-radius: 1rem; background: #000; }
.cs-screen img { display: block; width: 100%; height: auto; }
.cs-device-foot { height: 0.75rem; width: 100%; margin: -1px auto 0;
  max-width: 104%; border-radius: 0 0 1rem 1rem;
  background: linear-gradient(to bottom, #1a1a1a, #0a0a0a); }
@media (max-width: 52rem) {
  .cs-device { margin-top: 3rem; }
  .cs-device-body { border-radius: 1.1rem; padding: 0.45rem; }
  .cs-screen { border-radius: 0.75rem; }
}

/* --- the deck bar -------------------------------------------------- */
.cs-deckband { background: var(--cream); padding: 1.5rem 0;
  border-bottom: 1px solid var(--hair); }
.cs-deckbar { display: flex; align-items: center; gap: 1.2rem;
  text-decoration: none; background: #fff; border: 1px solid var(--hair);
  border-radius: 0.9rem; padding: 1.1rem 1.4rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.cs-deckbar:hover { border-color: rgba(45, 106, 181, 0.45);
  box-shadow: 0 12px 30px -18px rgba(23, 57, 95, 0.4); }
.cs-deckicon { display: grid; place-items: center; flex: 0 0 auto;
  width: 2.6rem; height: 2.6rem; border-radius: 999px; font-size: 1rem;
  background: rgba(45, 106, 181, 0.1); color: var(--court); }
.cs-decktext { display: flex; flex-direction: column; gap: 0.2rem;
  min-width: 0; flex: 1 1 auto; }
.cs-decktext .k { font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; color: var(--ink); }
.cs-decktext .t { font-size: 0.88rem; color: var(--mut); }
.cs-deckcta { flex: 0 0 auto; font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--court); }
@media (max-width: 40rem) {
  .cs-deckbar { flex-wrap: wrap; }
  .cs-deckcta { width: 100%; }
}

/* --- the story block ----------------------------------------------- */
.cs-story { display: grid; grid-template-columns: 1.35fr 1fr; gap: 4.5rem; }
.cs-rule { display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brick); margin-bottom: 1.2rem; }
.cs-rule span { display: inline-block; width: 1.6rem; height: 1px;
  background: var(--brick); }
.cs-big { font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 2.3vw, 1.95rem); line-height: 1.32;
  letter-spacing: -0.012em; color: var(--ink); margin: 0; }
.cs-details { margin-top: 2.4rem; border-top: 1px solid var(--hair);
  padding-top: 1.4rem; }
.cs-details summary { display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; cursor: pointer;
  list-style: none; font-family: var(--mono); font-size: 0.64rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mut); }
.cs-details summary::-webkit-details-marker { display: none; }
.cs-details summary:hover { color: var(--ink); }
.cs-plus { display: grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--hair); border-radius: 999px; font-size: 0.85rem;
  color: var(--mut); transition: transform 0.2s ease, color 0.2s ease; }
.cs-details[open] .cs-plus { transform: rotate(45deg); color: var(--brick); }
.cs-details ul { list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: grid; gap: 0.9rem; }
.cs-details li { position: relative; padding-left: 1.3rem;
  font-size: 0.95rem; line-height: 1.6; color: var(--text); }
.cs-details li::before { content: ""; position: absolute; left: 0;
  top: 0.62rem; width: 6px; height: 6px; border-radius: 999px;
  background: var(--brick); }

.cs-facts { display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem; margin: 0; }
.cs-facts dt, .cs-facts-lab { font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mut); }
.cs-facts dd { margin: 0.3rem 0 0; font-size: 0.95rem; line-height: 1.35; }
.cs-scope { margin-top: 1.8rem; }
.cs-scope ul { list-style: none; margin: 0.7rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cs-scope li { border: 1px solid var(--hair); border-radius: var(--r-pill);
  padding: 0.3rem 0.8rem; font-size: 0.8rem; color: var(--text); }
.cs-stats { margin-top: 2rem; border-top: 1px solid var(--hair);
  padding-top: 1.8rem; display: grid; gap: 1.4rem; }
.cs-stats .v { font-family: var(--display); font-weight: 600;
  font-size: 1.9rem; letter-spacing: -0.025em; color: var(--ink);
  line-height: 1; }
.cs-stats .k { margin-top: 0.4rem; font-size: 0.82rem; line-height: 1.45;
  color: var(--mut); }
@media (max-width: 64rem) {
  .cs-story { grid-template-columns: 1fr; gap: 3rem; }
  .cs-stats { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
}
@media (max-width: 40rem) { .cs-stats { grid-template-columns: 1fr; } }

/* --- chapters ------------------------------------------------------ */
.cs-chapter { max-width: 56rem; margin: 0 auto 4rem; text-align: center; }
.cs-chapno { font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mut);
  margin-bottom: 1.2rem; }
.cs-chapter h2 { font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.04;
  letter-spacing: -0.03em; margin: 0; }
.cs-chapter p { margin: 1.6rem auto 0; max-width: 60ch; font-size: 1.02rem;
  line-height: 1.6; color: var(--mut); }
.cs-narrow { max-width: 48rem; }

.cs-frame { overflow: hidden; border-radius: 1.1rem;
  border: 1px solid var(--hair); background: #fff;
  box-shadow: 0 30px 60px -40px rgba(23, 57, 95, 0.35); }
.cs-frame img { display: block; width: 100%; height: auto; }
.cs-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; }
.cs-figs figure, .cs-wide { margin: 0; }
.cs-wide { max-width: 62rem; margin: 0 auto; }
.cs-figs figcaption, .cs-wide figcaption { margin-top: 1.1rem;
  font-size: 0.92rem; line-height: 1.55; color: var(--mut);
  text-align: center; }
.cs-figs figcaption b, .cs-wide figcaption b { color: var(--ink); }
.cs-wide figcaption { max-width: 62ch; margin-inline: auto; }
@media (max-width: 64rem) { .cs-figs { grid-template-columns: 1fr; } }

.cs-callout { max-width: 62rem; margin: 2.6rem auto 0;
  border-left: 2px solid var(--brick); background: #fff;
  border-radius: 0 0.8rem 0.8rem 0; padding: 1.5rem 1.8rem;
  font-size: 0.98rem; line-height: 1.62; color: var(--text); }
.cs-callout b { color: var(--ink); }
.cs-note { max-width: 62rem; margin: 2.4rem auto 0; text-align: center;
  font-size: 0.9rem; line-height: 1.6; color: var(--mut); }

/* --- the three evidence levels ------------------------------------- */
.cs-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cs-tier { background: #fff; border: 1px solid var(--hair);
  border-radius: var(--r); padding: 1.8rem 1.9rem; border-top-width: 3px; }
.cs-tier.t1 { border-top-color: var(--court); }
.cs-tier.t2 { border-top-color: #b98a2a; }
.cs-tier.t3 { border-top-color: var(--brick); }
.cs-tierlab { font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase; }
.cs-tier.t1 .cs-tierlab { color: var(--court); }
.cs-tier.t2 .cs-tierlab { color: #b98a2a; }
.cs-tier.t3 .cs-tierlab { color: var(--brick); }
.cs-tierval { margin-top: 0.7rem; font-family: var(--display);
  font-weight: 600; font-size: 1.4rem; letter-spacing: -0.02em;
  color: var(--ink); }
.cs-tier p { margin: 1.1rem 0 0; font-size: 0.92rem; line-height: 1.6;
  color: var(--mut); }
.cs-tier p b { color: var(--ink); font-weight: 600; }
@media (max-width: 64rem) { .cs-tiers { grid-template-columns: 1fr; } }

/* --- the store test, as numbered steps ----------------------------- */
.cs-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.cs-step .n { font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.16em; color: var(--brick); padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--hair); margin-bottom: 1.1rem; }
.cs-step h3 { font-size: 1.08rem; margin: 0 0 0.5rem; }
.cs-step p { margin: 0; font-size: 0.92rem; line-height: 1.6;
  color: var(--mut); }
@media (max-width: 64rem) { .cs-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40rem) { .cs-steps { grid-template-columns: 1fr; } }

/* --- limits -------------------------------------------------------- */
.cs-limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cs-limit { background: #fff; border: 1px solid var(--hair);
  border-radius: var(--r); padding: 1.7rem 1.8rem; }
.cs-limit h3 { font-size: 1.08rem; margin: 0 0 0.6rem; }
.cs-limit p { margin: 0; font-size: 0.92rem; line-height: 1.6;
  color: var(--mut); }
@media (max-width: 64rem) { .cs-limits { grid-template-columns: 1fr; } }

/* --- reflection ---------------------------------------------------- */
.cs-learnhead { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.028em;
  margin: 0 0 2.8rem; }
.cs-learn { display: grid; gap: 2.6rem; }
.cs-learn h3 { font-size: 1.2rem; margin: 0 0 0.6rem;
  letter-spacing: -0.015em; }
.cs-learn p { margin: 0; font-size: 1rem; line-height: 1.65;
  color: var(--mut); }

/* formulas on the method chapter */
.cs-formula { display: block; margin: 0.7rem 0 0; padding: 0.55rem 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; line-height: 1.55;
  color: var(--court); background: #fff; border: 1px solid var(--hair);
  border-radius: 0.5rem; white-space: normal; overflow-wrap: anywhere; }
.cs-formulas { max-width: 62rem; margin: 2.6rem auto 0; background: #fff;
  border: 1px solid var(--hair); border-radius: 1rem; padding: 1.6rem 1.8rem; }
.cs-formulas-head { font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--mut);
  margin-bottom: 1.2rem; }
.cs-formulas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.cs-formulas h4 { font-size: 0.95rem; margin: 0 0 0.6rem; }
.cs-formulas code { display: block; font-family: var(--mono); font-size: 0.7rem;
  line-height: 1.5; color: var(--ink); padding: 0.35rem 0;
  border-bottom: 1px solid var(--hair); overflow-wrap: anywhere; }
.cs-formulas code.check { color: var(--court); font-weight: 600; border-bottom: 0; }
.cs-formulas-note { margin: 1.2rem 0 0; font-size: 0.86rem; line-height: 1.6;
  color: var(--mut); }
@media (max-width: 64rem) { .cs-formulas-grid { grid-template-columns: 1fr; } }