/* Colors and type */

.kit + .kit { padding-top: 0; }
.kit-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; padding-block: 20px 28px; }
.kit-nav a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }
.kit .section-head p, .kit-subnote { max-width: 30em; }
.kit-roles { display: grid; gap: 40px 20px; }
.kit-role { --count: 1; }
.kit-role h3 { margin-bottom: 16px; font-size: var(--fs-h3); color: var(--cobalt); }
.swatches { display: grid; gap: 28px 16px; }
/* Tablets and up: each role keeps three equal columns, so swatches stay one size. */
@media (min-width: 720px) { .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; } }
@media (min-width: 1200px) {
  .kit-roles { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .kit-role { grid-column: span 3; }
  .kit-role[data-count="2"] { grid-column: span 2; }
  .kit-role .swatches { grid-template-columns: repeat(var(--count), minmax(0, 1fr)); }
  .kit-role[data-count="3"] { --count: 3; }
  .kit-role[data-count="2"] { --count: 2; }
}
.swatch { display: grid; gap: 8px; align-content: start; }
.swatch-chip {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 3;
  padding: 16px 18px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent);
  font: 400 clamp(18px, 1.5vw, 26px)/1 var(--display);
  letter-spacing: -.02em;
}
.swatch p { font-size: 16px; }
.swatch .copy-button { white-space: nowrap; font-variant-numeric: tabular-nums; }
.swatch { min-width: 0; }
.kit-dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 20%, transparent); vertical-align: -3px; margin-right: 10px; }
.kit-grounds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 16px; }
/* Shorter comparison rows: at most four pairings and three warnings side by side. */
@media (min-width: 900px) { .kit-grounds { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kit-failures { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
.kit-ground { padding: 22px 22px 18px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.kit-ground h3 { font-size: var(--fs-body); margin-bottom: 12px; }
.kit-ground ul { display: grid; gap: 8px; }
.kit-ground li { display: flex; align-items: baseline; gap: 10px; font-weight: 600; }
.kit-aa { font-family: var(--display); font-size: 28px; line-height: 1; }
.kit-subhead { margin-top: 56px; font-family: var(--display); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); color: var(--cobalt); letter-spacing: -.02em; }
.kit-subnote { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); }
.kit-failures { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 16px; margin-top: 24px; }
.kit-failures li { display: grid; gap: 8px; font-size: var(--fs-small); font-weight: 600; }
.kit-failures li > span:last-child { display: flex; gap: 8px; }
.kit-failure-chip { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent); }
.kit-cross { color: var(--ink); }
.specimens { display: grid; gap: 24px; }
.specimen { display: grid; gap: 14px; align-content: start; padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-l); }
.specimen-display { background: var(--pink); color: var(--cobalt); }
.specimen-body { background: var(--butter); }
.specimen-big { font-family: var(--display); font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.02em; }
.specimen-mid { font-family: var(--display); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.02em; }
.specimen-text { font-size: 19px; line-height: 1.55; max-width: 30em; }
.specimen-weights { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 22px; }
.specimen-weights span:nth-child(2) { font-weight: 600; }
.specimen-weights span:nth-child(3) { font-weight: 800; }
.specimen figcaption { margin-top: 8px; padding-top: 14px; border-top: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent); color: var(--ink); font-size: var(--fs-small); }
/* The rule spans the card; the words keep the site's reading measure. */
.specimen figcaption { padding-inline-end: max(0px, 100% - min(var(--measure), 30em)); }
.specimen figcaption strong { display: block; color: var(--cobalt); font-size: var(--fs-body); }
@media (min-width: 900px) { .specimens { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }

@media (max-width: 560px) {
  .swatch-chip { aspect-ratio: 2 / 1; padding: 14px 16px; }
  .kit-grounds { gap: 10px; }
  .kit-ground { padding: 16px 18px 12px; }
  .kit-ground h3 { margin-bottom: 6px; }
  .kit-failures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .kit-failures li > span:last-child { flex-wrap: wrap; gap: 0 8px; }
}
@media (max-width: 719px) {
  .swatches { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .swatch { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto; gap: 6px 16px; padding-block: 14px; border-top: 1px solid var(--line); }
  .swatch-chip { grid-row: span 2; aspect-ratio: 1; padding: 10px; font-size: 14px; align-items: flex-end; }
  .swatch .copy-button { justify-self: start; }
}