/* Hallmark · illustrated feature and a production field guide · P4 H5 E4 S5 R5 V4 */
html:has(.suzhou-guide), body:has(.suzhou-guide) { overflow-x: clip; }
.suzhou-guide h1, .suzhou-guide h2, .suzhou-guide h3 { font-family: var(--font-display); overflow-wrap: anywhere; }
.suzhou-guide .rh-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.suzhou-guide .rh-hero img { border-radius: 0.5rem; }
.suzhou-guide .suzhou-anatomy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.suzhou-guide .suzhou-split { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.suzhou-guide .suzhou-split .rh-formats { margin-block: 0; }
.suzhou-guide .suzhou-sources { padding-inline-start: 1.25rem; }
.suzhou-guide .suzhou-sources li { margin-block: 0.5rem; }
@media (max-width: 800px) {
  .suzhou-guide .rh-hero, .suzhou-guide .suzhou-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .suzhou-guide .rh-hero figure { justify-self: start; }
}
@media (max-width: 580px) {
  .suzhou-guide .suzhou-anatomy { grid-template-columns: minmax(0, 1fr); }
}

.suzhou-guide .suzhou-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
  padding: 0;
  list-style: none;
  counter-reset: suzhou-step;
}
.suzhou-guide .suzhou-flow li {
  counter-increment: suzhou-step;
  border-top: 2px solid #b58c4b;
  padding-top: 0.875rem;
}
.suzhou-guide .suzhou-flow li::before {
  content: counter(suzhou-step, decimal-leading-zero);
  display: block;
  color: #795522;
  font-size: 0.8rem;
  margin-bottom: 0.4rem;
}
.suzhou-guide .suzhou-flow li p { margin: 0.4rem 0 0; }
.suzhou-guide .suzhou-profiles {
  max-width: 35rem;
  margin: 1.75rem 0;
  padding: 0.75rem 1rem 1rem;
  background: #f5efe3;
  border: 1px solid #e5d9c1;
}
.suzhou-guide .suzhou-profiles svg { display: block; width: 100%; height: auto; }
.suzhou-guide .suzhou-profiles figcaption {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  text-align: center;
}
.suzhou-guide .suzhou-toppings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
@media (max-width: 680px) {
  .suzhou-guide .suzhou-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .suzhou-guide .suzhou-toppings { grid-template-columns: minmax(0, 1fr); }
}