:root {
  color-scheme: dark;
  --ink: #141012;
  --crimson: #d7263d;
  --gold: #c9a227;
  --paper: #f4efe8;
  --muted: #cbbfb3;
}
* { box-sizing: border-box; }
html { font-size: 112.5%; }
body {
  margin: 0;
  font: 1rem/1.5 system-ui, sans-serif;
  background: var(--ink);
  color: var(--paper);
}
header, main, footer { max-width: 42rem; margin: 0 auto; padding: 1.25rem; }
h1, h2, .brand {
  font-family: "Barlow Condensed", Impact, "Arial Narrow", sans-serif;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2rem, 6vw, 3.2rem); color: var(--gold); }
h2 { font-size: 1.25rem; color: var(--crimson); }
a { color: var(--gold); }
.hero { font-size: 1.15rem; }
.shots { display: grid; gap: 0.75rem; }
.shot {
  border: 1px solid #3a3230;
  border-radius: 0.75rem;
  padding: 1.25rem;
  min-height: 7rem;
  background: #1c1817;
}
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.cta {
  display: inline-block;
  background: var(--crimson);
  color: var(--paper);
  padding: 0.75rem 1.1rem;
  border-radius: 0.5rem;
  text-decoration: none;
  min-height: 2.75rem;
}
.path { display: none; }
.path.show { display: block; }
ol { padding-left: 1.25rem; }
@media (min-width: 900px) {
  .shots { grid-template-columns: 1fr 1fr; }
}