:root {
  color-scheme: light;
  --paper: #f3efe5;
  --ink: #242320;
  --ochre: #ad7b30;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: "Source Sans 3", "Source Sans Pro", Arial, sans-serif;
}
main {
  width: min(100% - 3rem, 850px);
  margin: auto;
  padding: 4rem 0 3rem;
}
.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .15em;
}
.eyebrow span { padding: 0 .65em; color: var(--ochre); }
h1 {
  margin: 1.4rem 0 1.25rem;
  font-family: Roboto, "Arial Black", Arial, sans-serif;
  font-size: clamp(3.35rem, 10.3vw, 7.4rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: .98;
}
.ochre, .punct { color: var(--ochre); }
.subtitle {
  margin: 0;
  font-family: "Libertinus Serif", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.25rem, 3.6vw, 2rem);
}
.rule { width: 72px; height: 3px; margin: 2.5rem 0 1.5rem; background: var(--ochre); }
.details { font-size: 1.14rem; max-width: 34rem; }
.status { margin: 1rem 0 1.6rem; font-size: .94rem; }
.pending { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.buy {
  display: inline-block;
  padding: .8rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-weight: 700;
}
.buy:hover, .buy:focus-visible { background: var(--ochre); color: white; }
footer { padding: 1.5rem; text-align: center; font-size: .78rem; }
@media (max-width: 480px) {
  main { width: calc(100% - 2rem); padding: 3rem 0; }
  h1 { font-size: clamp(2.6rem, 11vw, 4rem); }
  .eyebrow { font-size: .7rem; }
}