/* POPHIES Case Study detail — page-specific rules only.
   Source: 网站规划.md §9 (lines 483–525, with §9.4 for the anonymous record and
   its publication threshold), §13 (lines 766–793) for the linked records and
   §18 (lines 926–939) for the photographs.
   Shared classes and tokens live in assets/css/tokens.css and style.css. */

/* ---------- How the project is classified ---------- */

.cs-facts { padding-top: var(--section-sm); }

.cs-facts__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
}

.cs-fact {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.cs-fact__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--graphite);
}

.cs-fact__value {
  font-size: var(--fs-small);
  color: var(--ink);
}

.cs-anon {
  max-width: var(--read);
  margin: 1.25rem 0 0;
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--graphite);
}

/* ---------- The parts of the record ---------- */

.cs-steps {
  display: grid;
  gap: 2.5rem;
  margin-top: 2.5rem;
}

.cs-step {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.5rem 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--stone);
}

.cs-step__number {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  color: var(--brass);
}

.cs-step h2 {
  margin: 0;
  font-size: var(--fs-h3);
  letter-spacing: var(--track-tight);
}

.cs-step__text {
  grid-column: 2;
  max-width: var(--read);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-soft);
}

.cs-step__text > * + * { margin-top: 1em; }

/* ---------- The verified result ---------- */

.cs-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2.5rem;
  margin: 2.5rem 0 0;
}

.cs-result {
  padding-top: 1rem;
  border-top: 1px solid var(--stone);
}

.cs-result dt {
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--graphite);
}

.cs-result dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink);
}

/* ---------- Photographs and linked records ---------- */

.cs-gallery { align-items: start; }

.cs-links__title {
  margin: 0 0 1rem;
  font-size: var(--fs-h4);
  letter-spacing: var(--track-tight);
}

.cs-feedback {
  max-width: var(--read);
  margin: 0;
  padding-left: 1.5rem;
  border-left: 3px solid var(--brass);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
}

.cs-feedback__note {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  color: var(--graphite);
}

.cs-locked { max-width: 34rem; }

/* ---------- Small screens ---------- */

@media (max-width: 660px) {
  .cs-step { grid-template-columns: 1fr; }
  .cs-step__text { grid-column: 1; }
  .cs-steps { gap: 2rem; }
  .cs-facts__grid { gap: 1.25rem 2rem; }
}