/* ==========================================================================
   style-guide.css — only loaded by style-guide.html
   --------------------------------------------------------------------------
   Colour swatches, type specimen, spacing scale and grid demo.
   You can delete this file together with style-guide.html.
   ========================================================================== */

.sg-block {
  display: grid;
  gap: var(--s4);
  padding-block: var(--s5);
  border-top: var(--rule-thin) solid var(--ink);
}

.sg-block:first-of-type { border-top: 0; }

.swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  list-style: none;
}

.swatch {
  display: grid;
  gap: var(--s1);
  font-size: var(--fs-small);
}

.swatch__chip {
  aspect-ratio: 1;
  border: var(--rule-thin) solid var(--rule);
}

.swatch code { color: var(--muted-text); }

.specimen {
  display: grid;
  border-top: var(--rule-thin) solid var(--rule);
}

.specimen > div {
  display: grid;
  gap: var(--s1);
  padding-block: var(--s3);
  border-bottom: var(--rule-thin) solid var(--rule);
}

.specimen dt {
  color: var(--muted-text);
  font-size: var(--fs-small);
}

.specimen dd { margin: 0; }

.sample-h1,
.sample-h2,
.sample-h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-heading);
}

.sample-h1 { font-size: var(--fs-h1); }
.sample-h2 { font-size: var(--fs-h2); }
.sample-h3 { font-size: var(--fs-h3); }

.spacing-scale {
  display: grid;
  gap: var(--s2);
  list-style: none;
}

.spacing-scale li {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-small);
}

.spacing-scale span {
  display: block;
  height: var(--s2);
  background: var(--accent);
}

.columns-demo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
  list-style: none;
}

.columns-demo li {
  height: var(--s6);
  background: var(--surface);
  border: var(--rule-thin) solid var(--rule);
  color: var(--muted-text);
  font-size: var(--fs-small);
  text-align: center;
}

@media (min-width: 768px) {
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .sg-card { grid-column: 1 / 6; }
  .sg-accordion { grid-column: 7 / 13; }

  .specimen > div {
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--gutter);
  }
}

@media (min-width: 1024px) {
  .swatches { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}