/* Case study template (plan §9). One structure for all three; each page sets its own
   world through these variables (see case-*.css) and loads its own display face.
   The site frame (nav, footer) stays light; the body runs in full-bleed bands. */

.case {
  --w-ground: #F2E7D3;
  --w-dark: #111111;
  --w-ink: #1A1A1A;
  --w-muted: #5A5248;
  --w-on-dark: #F2E7D3;
  --w-muted-on-dark: #B8AE9E;
  --w-accent: #E0322A;       /* large type and marks only */
  --w-accent-text: #B3221B;  /* small text in the accent */
  --w-line: rgb(26 26 26 / 0.18);
  --w-line-on-dark: rgb(242 231 211 / 0.22);
  --w-display: Georgia, serif;
  --w-display-weight: 600;

  margin-top: var(--space-5);
  background: var(--w-ground);
  color: var(--w-ink);
}

/* ---------- Bands ---------- */

.cs-band {
  padding-block: clamp(4rem, 2.5rem + 6vw, 8rem);
}

/* Continues the band above it (same ground), so no second gap. */
.cs-band--flush {
  padding-top: 0;
}

.cs-band--pager {
  padding-block: 0;
}

.cs-band--dark {
  background: var(--w-dark);
  color: var(--w-on-dark);
  --w-muted: var(--w-muted-on-dark);
  --w-line: var(--w-line-on-dark);
  /* The deep accent used for small text fails on dark grounds; swap in a light one. */
  --w-accent-text: var(--w-accent-on-dark, var(--w-muted-on-dark));
}

.cs-display {
  font-family: var(--w-display);
  font-weight: var(--w-display-weight);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---------- Header ---------- */

.cs-head {
  padding-block: clamp(4.5rem, 3rem + 8vw, 10rem) clamp(3.5rem, 2.5rem + 5vw, 7rem);
}

.cs-head__title {
  font-size: clamp(3.5rem, 1.5rem + 9vw, 9rem);
  line-height: 0.95;
}

.cs-head__sub {
  max-width: 30ch;
  margin-top: var(--space-4);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}

.cs-head__meta {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-7);
  color: var(--w-muted);
  font-size: var(--step-1);
}

/* Masked reveal: each line rises out of its own clipping box, once. */
.mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.mask > span {
  display: block;
}

.motion .mask > span {
  transform: translateY(105%);
  transition: transform 900ms var(--ease-out);
}

.motion .is-in .mask > span,
.motion .mask.is-in > span {
  transform: none;
}

.motion .is-in .mask:nth-child(2) > span { transition-delay: 120ms; }

/* ---------- Section heads ---------- */

.cs-eyebrow {
  color: var(--w-accent-text);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-band--dark .cs-eyebrow {
  color: var(--w-muted-on-dark);
}

.cs-h2 {
  max-width: 22ch;
  margin-top: var(--space-3);
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.cs-h3 {
  margin-bottom: var(--space-5);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
}

.cs-lead {
  max-width: 40rem;
  margin-top: var(--space-6);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.5;
}

.cs-prose {
  max-width: 40rem;
  font-size: var(--step-1);
}

.cs-prose p + p {
  margin-top: var(--space-4);
}

.cs-aside {
  max-width: 40rem;
  margin-top: var(--space-6);
  color: var(--w-muted);
  font-style: italic;
}

.cs-sub {
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}

/* ---------- Stat strip ---------- */

.cs-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-5);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--w-line);
}

.cs-stats > div {
  display: flex;
  flex-direction: column-reverse;   /* number above its label; the markup keeps dt before dd */
}

.cs-stats dd {
  margin: 0;
}

.cs-stat__n {
  font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
}

.cs-stat__l {
  margin-top: var(--space-2);
  color: var(--w-muted);
}

@media (min-width: 52rem) {
  .cs-stats {
    grid-template-columns: repeat(var(--stats, 5), minmax(0, 1fr));
  }
}

/* ---------- Definition table (scope) ---------- */

.cs-table {
  margin: var(--space-8) 0 0;
  border-top: 1px solid var(--w-line);
}

.cs-table > div {
  display: grid;
  gap: var(--space-1) var(--space-6);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--w-line);
}

.cs-table dt {
  color: var(--w-muted);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cs-table dd {
  margin: 0;
  font-size: var(--step-1);
}

@media (min-width: 52rem) {
  .cs-table > div {
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: baseline;
  }
}

/* ---------- Data tables (platforms, imprints, hypotheses) ---------- */

.cs-data {
  width: 100%;
  margin-top: var(--space-6);
  border-collapse: collapse;
  font-size: var(--step-0);
}

.cs-data th,
.cs-data td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--w-line);
  text-align: left;
  vertical-align: top;
}

.cs-data thead th {
  color: var(--w-muted);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cs-data tbody th {
  font-weight: 650;
  white-space: nowrap;
}

.cs-caption {
  max-width: 40rem;
  margin-top: var(--space-4);
  color: var(--w-muted);
  font-size: var(--step-0);
}

/* ---------- Survey instrument / codebook tables ---------- */

.instrument {
  width: 100%;
  margin-top: var(--space-5);
  border-collapse: collapse;
}

.instrument th,
.instrument td {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-bottom: 1px solid var(--w-line);
  text-align: left;
  vertical-align: top;
}

.instrument thead th {
  color: var(--w-muted);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.instrument td:first-child {
  width: 2.5rem;
  color: var(--w-accent-text);
  font-weight: 700;
}

.instrument__type,
.instrument__for {
  color: var(--w-muted);
  font-size: var(--step--1);
  white-space: nowrap;
}

/* Phones: question on its own line, type and purpose underneath. */
@media (max-width: 51.99rem) {
  .instrument thead {
    display: none;
  }

  .instrument tr {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--w-line);
  }

  .instrument td {
    padding: 0;
    border: 0;
  }

  .instrument td:first-child {
    grid-row: span 3;
  }

  .instrument__type,
  .instrument__for {
    white-space: normal;
  }
}

/* ---------- Figures ---------- */

.cs-figure {
  margin-top: var(--space-7);
}

.cs-figure img,
.cs-figure video {
  display: block;
  width: 100%;
  height: auto;
}

.cs-figure figcaption {
  max-width: 40rem;
  margin-top: var(--space-3);
  color: var(--w-muted);
  font-size: var(--step-0);
}

/* ---------- Notes: inset, fade only ---------- */

.cs-notes {
  max-width: 46rem;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  border-left: 4px solid var(--w-accent);
  background: rgb(255 255 255 / 0.45);
}

.cs-band--dark .cs-notes {
  background: rgb(255 255 255 / 0.05);
}

.cs-notes .cs-prose {
  margin-top: var(--space-5);
}

/* ---------- Pager ---------- */

.cs-pager {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-8);
  text-decoration: none;
}

.cs-pager__label {
  color: var(--w-muted);
  font-size: var(--step--1);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cs-pager__title {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 4rem);
}

.cs-pager__sub {
  color: var(--w-muted);
  font-size: var(--step-1);
}

.cs-pager:hover .cs-pager__title {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 0.12em;
}

/* ---------- Motion: fade and rise, once ---------- */

.motion .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity var(--dur-enter) var(--ease-out),
    transform var(--dur-enter) var(--ease-out);
}

.motion .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Notes: the quietest motion on the page. */
.motion .reveal--fade {
  transform: none;
}

/* The case body sits flush under the frame's rule and runs into the footer. */
.case + .site-footer {
  margin-top: 0;
}

/* ---------- Bar charts (plan §4 rule 12) ----------
   A value label on every bar and the response base in every caption; never colour alone.
   Bars grow from the left once, by transform. */

.chart {
  margin-top: var(--space-6);
}

.chart__q {
  max-width: 40rem;
  font-weight: 650;
}

.chart__base {
  display: block;
  margin-top: var(--space-1);
  color: var(--w-muted);
  font-weight: 400;
  font-size: var(--step--1);
}

.chart__bars {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
}

.chart__bars li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "track track";
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

.chart__label { grid-area: label; }

.chart__value {
  grid-area: value;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chart__track {
  grid-area: track;
  height: 0.9rem;
}

.chart__bar {
  display: block;
  height: 100%;
  background: var(--w-bar, var(--w-accent));
  transform: scaleX(calc(var(--v) / var(--max)));
  transform-origin: left center;
}

.chart__bars li.is-top .chart__label,
.chart__bars li.is-top .chart__value {
  font-weight: 750;
}

@media (min-width: 52rem) {
  .chart__bars li {
    grid-template-columns: 16rem minmax(0, 1fr) 3rem;
    grid-template-areas: "label track value";
  }

  .chart__value {
    text-align: right;
  }
}

.motion .chart .chart__bar {
  transform: scaleX(0);
  transition: transform 900ms var(--ease-out) calc(var(--i, 0) * 70ms);
}

.motion .chart.is-in .chart__bar {
  transform: scaleX(calc(var(--v) / var(--max)));
}