:root {
  color-scheme: light;
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: #211d19;
  background: #f7f2e8;
  --muted: #575047;
  --line: #c8bfae;
  --wine: #682d3e;
}
* { box-sizing: border-box; }
body { margin: 0; }
.sheet { width: min(100% - 3rem, 62rem); margin-inline: auto; }
.game {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2.75rem;
  align-items: center;
  min-height: 31rem;
  padding-block: 4.5rem;
}
.eyebrow {
  margin: 0 0 .55rem;
  color: var(--wine);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
h1 {
  margin: 0 0 1.3rem;
  font: 400 clamp(6rem, 12vw, 10rem)/.9 "Instrument Serif", Georgia, serif;
  letter-spacing: -.075em;
}
.description {
  max-width: 24em;
  margin: 0 0 1.8rem;
  color: var(--muted);
  font-size: 1.12rem;
  line-height: 1.6;
}
.rulebook {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 1rem;
  border: 1px solid var(--wine);
  border-radius: .3rem;
  color: var(--wine);
  font-weight: 650;
  text-decoration: none;
}
.rulebook span { font-size: .7rem; letter-spacing: .08em; }
.rulebook:hover { background: var(--wine); color: #fff8ed; }
.rulebook:focus-visible { outline: 3px solid var(--wine); outline-offset: 4px; }
.illustration {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 21rem;
  overflow: hidden;
  border-radius: 1rem;
  background: radial-gradient(ellipse at 50% 42%, #376154, #183c34 82%);
}
.card {
  grid-area: 1 / 1;
  width: 8.6rem;
  aspect-ratio: 5 / 7;
  border-radius: .65rem;
  box-shadow: 0 .75rem 1.6rem #10251e73;
}
.back {
  transform: translateX(-2.15rem) rotate(-15deg);
  border: .45rem solid #e6cbb1;
  background: repeating-linear-gradient(45deg, #692c3b 0 .3rem, #7d3a49 .3rem .5rem);
}
.face {
  position: relative;
  display: grid;
  place-items: center;
  transform: translateX(2rem) rotate(12deg);
  border: 1px solid #ded2bc;
  background: #fcf4df;
  color: #24463b;
  font-family: Georgia, serif;
}
.pip { font-size: 4.75rem; }
.corner { position: absolute; font-size: 1.35rem; }
.top { inset: .45rem auto auto .65rem; }
.bottom { inset: auto .65rem .45rem auto; transform: rotate(180deg); }
.availability {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  align-items: baseline;
  padding-block: 1.5rem;
  border-block: 1px solid var(--line);
}
.availability h2 { margin: 0; font: 400 1.75rem Georgia, serif; }
.availability p, footer { margin: 0; color: var(--muted); line-height: 1.5; }
footer { padding-block: 1.25rem 2rem; font-size: .9rem; }
@media (max-width: 42rem) {
  .sheet { width: min(100% - 2.25rem, 29rem); }
  .game { grid-template-columns: 1fr; gap: 1.75rem; padding-block: 2.75rem 1.75rem; }
  .illustration { min-height: 14rem; }
  .card { width: 6.3rem; }
  .pip { font-size: 3.4rem; }
  .availability { grid-template-columns: 1fr; gap: .4rem; }
}