:root {
  --mill-ink: #14110e;
  --plate: #d4c4ae;
  --brass: #c4a35a;
  --slag: #3a3228;
  --spark: #f3ead9;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  color-scheme: dark;
}

body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(20, 17, 14, 0.35), transparent 42%),
    repeating-linear-gradient(
      90deg,
      #1c1814 0 1px,
      #161310 1px 48px
    );
  color: var(--spark);
  font-family: "IBM Plex Sans Condensed", sans-serif;
  letter-spacing: 0.04em;
}

.stamp {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 8vw 0;
  border-bottom: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
}

.mill,
.heat {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--brass);
}

main {
  padding: 18vh 8vw 4rem;
  max-width: 42rem;
}

h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.8rem, 8vw, 5.2rem);
  font-weight: 600;
  line-height: 0.92;
  font-style: italic;
  color: var(--plate);
}

.lede {
  margin-top: 1.5rem;
  max-width: 36ch;
  font-size: 1.05rem;
  line-height: 1.45;
  color: color-mix(in srgb, var(--spark) 82%, var(--slag));
}

dl {
  display: grid;
  gap: 1.1rem;
  margin-top: 3rem;
}

dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--brass);
}

dd {
  margin: 0.2rem 0 0;
  font-size: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}