@font-face {
  font-family: "Manufacturing Consent";
  src: url("ManufacturingConsent-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

html[data-variant="metal"] {
  color-scheme: dark;
  --paper: #000;
  --ink: #fff;
  --muted: #fff;
  --rust: #fff;
  --line: #fff;
  --sage: #000;
  --serif: "Barlow Condensed", Impact, "Arial Narrow", system-ui, sans-serif;
  --metal-wordmark: "Manufacturing Consent", "Old English Text MT", Impact, system-ui, sans-serif;
}

html[data-variant="metal"] ::selection { color: #000; background: #fff; }

html[data-variant="metal"] .wordmark {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}

html[data-variant="metal"] .wordmark strong {
  padding: .08em .2em;
  color: #000;
  background: #fff;
}

html[data-variant="metal"] .campaign-kicker:not([hidden]) {
  display: inline-block;
  max-width: 100%;
  margin-bottom: .45rem;
  padding-block: .13em .2em;
  border-block: .08em solid #fff;
  color: #fff;
  font: 400 clamp(2.6rem, 5.4vw, 5rem)/.95 var(--metal-wordmark);
  letter-spacing: .035em;
  overflow-wrap: anywhere;
}

html[data-variant="metal"] .campaign-line:not([hidden]) {
  margin-bottom: 1.25rem;
  font-size: .9rem;
  font-weight: 650;
}

html[data-variant="metal"] .product-name {
  font-weight: 750;
  letter-spacing: .16em;
}

html[data-variant="metal"] #page-title {
  max-width: 12ch;
  font-size: clamp(2.65rem, 6.2vw, 5.5rem);
  font-weight: 850;
  line-height: .96;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

html[data-variant="metal"] h2 {
  font-weight: 800;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

html[data-variant="metal"] .button {
  border-width: 2px;
  border-radius: 0;
  font-weight: 800;
}

html[data-variant="metal"] .button-primary,
html[data-variant="metal"] .button-secondary:hover {
  color: #000;
  background: #fff;
}

html[data-variant="metal"] .button-primary:hover,
html[data-variant="metal"] .button-secondary {
  color: #fff;
  background: #000;
}

html[data-variant="metal"] .preview-surface {
  border: 2px solid #fff;
  border-radius: 0;
  background: radial-gradient(circle, #fff 0 .55px, transparent .7px) 0 0 / 8px 8px, #000;
}

html[data-variant="metal"] .preview-sheet {
  border: 1px solid #fff;
  box-shadow: .45rem .45rem 0 #000, .45rem .45rem 0 1px #fff;
  filter: grayscale(1);
}

html[data-variant="metal"] .example {
  border-block: 2px solid #fff;
}

html[data-variant="metal"] .repair,
html[data-variant="metal"] .repair div { border-color: #fff; }

html[data-variant="metal"] .repair dd { color: #fff; }

@media (max-width: 48rem) {
  html[data-variant="metal"] #page-title { max-width: 15ch; }
}