/* Specimen-only layout and demo styles. Everything reusable lives in dist/dinsor.css. */

.display { max-width: 12ch; }

h3 { margin: var(--space-32) 0 var(--space-16); }
.section-head h3,
.card h3 { margin-top: 0; }

.quote { margin-top: var(--space-32); }
.metrics { margin-top: var(--space-48); }
.field { max-width: 360px; margin-top: var(--space-32); }
.plain { margin-top: var(--space-16); }
pre { margin-top: var(--space-32); }
.card { margin-top: var(--space-32); }
.menu { margin-top: var(--space-16); }
.dark { margin-top: var(--space-96); }
.dark .lede { margin-top: var(--space-16); }

.meta {
  margin: 0 0 var(--space-8);
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--stone);
}

.swatches {
  list-style: none;
  margin: var(--space-16) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
}

.swatches li {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  min-height: var(--layout-hit-target);
}

.chip {
  width: 32px;
  height: 32px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-chip);
}

.swatch-name { display: block; font-size: var(--text-body); line-height: 1.35; }
.swatch-meta { display: block; margin: 0; color: var(--stone); }

.c-bg { background: var(--bg); }
.c-surface { background: var(--surface); }
.c-sand { background: var(--sand); }
.c-ink { background: var(--ink); }
.c-ink-soft { background: var(--ink-soft); }
.c-olive { background: var(--olive); }
.c-stone { background: var(--stone); }
.c-line { background: var(--line); }
.c-accent { background: var(--accent); }
.c-accent-ink { background: var(--accent-ink); }
.c-accent-hover { background: var(--accent-hover); }
.c-tag-quiet { background: var(--tag-quiet); }
.c-tag { background: var(--tag); }
.c-danger { background: var(--danger); }
.c-dark { background: var(--dark); }
.c-dark-surface { background: var(--dark-surface); }
.c-accent-on-dark { background: var(--accent-on-dark); }
.c-scrim { background: var(--scrim); }

.table { margin-top: var(--space-16); }
.notice { margin-top: var(--space-32); }

.shot { margin-top: var(--space-32); }
.shot img { display: block; width: 100%; max-width: var(--layout-measure); height: auto; }
.shot figcaption { margin-top: var(--space-8); }

.type-sample + .type-sample { margin-top: var(--space-32); }

.role-display { margin: 0; font-family: var(--serif); font-size: var(--text-display); font-weight: 500; line-height: 1.1; }
.role-h1 { margin: 0; font-family: var(--serif); font-size: var(--text-h1); font-weight: 500; line-height: 1.2; }
.role-h2 { margin: 0; font-family: var(--serif); font-size: var(--text-h2); font-weight: 500; line-height: 1.25; }
.role-h3 { margin: 0; font-family: var(--serif); font-size: var(--text-h3); font-weight: 500; line-height: 1.3; }
.role-body { margin: 0; max-width: var(--layout-measure); }
.role-caption { margin: 0; font-size: var(--text-caption); line-height: 1.45; color: var(--olive); }
.role-label {
  margin: 0;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.shapes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32);
  margin-top: var(--space-16);
}

.shape {
  height: var(--layout-hit-target);
  background: var(--sand);
}

.shape.r2 { width: 64px; border-radius: var(--radius-chip); }
.shape.r4 { width: 96px; border-radius: var(--radius-control); }
.shape.r8 { width: 128px; border-radius: var(--radius-card); }

@media (min-width: 768px) {
  .swatches { grid-template-columns: 1fr 1fr; column-gap: var(--space-32); }
}

@media (max-width: 767px) {
  .role-display { font-size: var(--text-display-mobile); }
}