/* Hallmark v2 · Component: editorial specimen · Material: approved copy, colour and type. */
/* The sample applies the choices on the board, so every colour and face has a visible role. */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&family=DM+Serif+Text&family=Source+Sans+3:wght@400;600&display=swap");

.kit-board {
  --kit-rule: var(--line);
  margin-block: 1.5rem;
  padding-block: 1.15rem;
  border-block: 1px solid var(--kit-rule);
  overflow-wrap: break-word;
}
.kit-board > h2 { margin: 0; font: 400 clamp(1.85rem, 4vw, 2.65rem)/1.06 var(--display); }
.kit-board .kit-rationale { max-width: 55ch; margin: .65rem 0 1rem; }
.kit-sample { margin: 0 0 1.25rem; }
.kit-sample-content {
  padding: clamp(1.2rem, 5vw, 3rem);
  background: var(--kit-paper);
  color: var(--kit-ink);
  border: 1px solid var(--kit-rule);
  border-inline-start: .45rem solid var(--kit-accent);
  font: 400 1rem/1.55 var(--kit-body);
}
.kit-sample-content h3 {
  margin: 0;
  max-width: 24ch;
  color: inherit;
  font: 400 clamp(1.75rem, 5vw, 3rem)/1.1 var(--kit-heading);
}
.kit-sample-content p { margin: .8rem 0; max-width: 42ch; color: inherit; }
.kit-sample-action {
  display: inline-block;
  padding: .55rem .75rem;
  font-weight: 600;
  background: var(--kit-action-bg);
  color: var(--kit-action-ink);
}
.kit-sample[data-layout="1"] .kit-sample-content { border-inline-start-width: 1px; border-block-start: .45rem solid var(--kit-accent); }
.kit-sample[data-layout="2"] .kit-sample-content { border-inline-start-width: 1px; border-block-end: .45rem solid var(--kit-accent); text-align: center; }
.kit-sample[data-layout="2"] :is(h3,p) { margin-inline: auto; }
.kit-sample figcaption { margin-top: .45rem; color: var(--muted); font-size: .875rem; }
.kit-guide { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: .65rem 1rem; }
.kit-guide dt { font: 600 1rem/1.5 var(--body); }
.kit-guide dd { margin: 0; }
.kit-color { display: inline-flex; gap: .4rem; align-items: center; margin: 0 .75rem .35rem 0; }
.kit-color i { display: inline-block; width: 1.2rem; height: 1.2rem; border: 1px solid var(--kit-rule); background: var(--kit-swatch); }
.kit-board button:focus-visible, .kit-editor :is(input,textarea,select,summary,button):focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.kit-editor { margin: 1rem 0; }
.kit-editor summary { cursor: pointer; font-weight: 600; }
.kit-editor .kit-preview[hidden] { display: none; }
@media(max-width: 34rem) {
  .kit-guide { grid-template-columns: minmax(0,1fr); gap: .25rem; }
  .kit-guide dd { margin-bottom: .65rem; }
}