:root {
  color-scheme: dark;
  --bg: #101012;
  --fg: #f8f6ef;
  --muted: #b8b4c2;
  --rule: #333039;
  --acid: #eeff70;
  --violet: #d0c1fb;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1rem/1.55 system-ui, sans-serif;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--acid); outline-offset: 5px; }
.shell { width: min(100% - 3rem, 77rem); margin-inline: auto; }
.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
}
.site-header { border-bottom: 1px solid var(--rule); }
.wordmark {
  display: inline-flex;
  align-items: center;
  font-size: 1.45rem;
  font-weight: 760;
  letter-spacing: -.055em;
  text-decoration: none;
}
.wordmark img { margin-right: .65rem; }
.wordmark span { color: var(--acid); }
.edition, .eyebrow, .badge, .art-top, .art-bottom, .site-footer {
  font: .72rem/1.45 var(--mono);
  letter-spacing: .105em;
}
.edition, .eyebrow, .site-footer { color: var(--muted); }
.hero {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 5rem);
  padding-block: clamp(2.5rem, 6vw, 5.75rem);
}
.badge {
  display: inline-flex;
  gap: .65rem;
  align-items: center;
  margin: 0 0 1.25rem;
  border: 1px solid #454b2a;
  border-radius: 99px;
  padding: .46rem .7rem;
  color: var(--acid);
}
.badge span { width: .48rem; height: .48rem; border-radius: 50%; background: var(--acid); }
h1, h2, h3, p { margin-block: 0; }
h1 {
  font-size: clamp(4rem, 8.5vw, 8.25rem);
  font-weight: 800;
  line-height: .93;
  letter-spacing: -.055em;
}
h1 em { color: var(--acid); font-style: normal; }
.intro {
  max-width: 28rem;
  margin-top: 1.5rem;
  font-size: clamp(1.07rem, 2vw, 1.3rem);
  color: var(--muted);
}
.jump {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1.65rem;
  padding: .7rem .95rem;
  border: 1px solid var(--rule);
  border-radius: .3rem;
  font-weight: 650;
  text-decoration: none;
}
.jump:hover { border-color: var(--acid); color: var(--acid); }
.jump span { color: var(--acid); }
.art {
  position: relative;
  display: grid;
  margin: 0;
  overflow: hidden;
  border: 1px solid #433c51;
  border-radius: .45rem;
  background: #17141e;
}
.art img { display: block; width: 100%; height: auto; }
.art-top, .art-bottom {
  position: absolute;
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  inset-inline: 1rem;
  color: var(--violet);
}
.art-top { top: .9rem; }
.art-bottom { bottom: .9rem; }
.preview {
  display: grid;
  grid-template-columns: .94fr .58fr .58fr;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding-block: 1.65rem 2.2rem;
  border-block: 1px solid var(--rule);
}
.preview h2 {
  margin-top: .25rem;
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  line-height: 1;
  letter-spacing: -.06em;
}
.preview h3 { margin-block: .25rem; line-height: 1.25; }
.preview-item p:last-child { color: var(--muted); font-size: .95rem; }
.item-index { color: var(--violet); }
@media (max-width: 48rem) {
  .hero { grid-template-columns: 1fr; }
  .art { width: min(100%, 32rem); }
  .preview { grid-template-columns: 1fr 1fr; }
  .preview-heading { grid-column: 1 / -1; }
}
@media (max-width: 30rem) {
  .shell { width: calc(100% - 2rem); }
  .edition { display: none; }
  .preview { grid-template-columns: 1fr; }
  .art-top, .art-bottom { font-size: .6rem; inset-inline: .65rem; }
  .art-top { top: .6rem; }
  .art-bottom { bottom: .6rem; }
}