:root {
  color-scheme: light;
  font-family: Arial, Helvetica, sans-serif;
  background: #737772;
  color: #0b0b0d;
  --ink: #08090b;
  --paper: #f7f6ef;
  --workbench: #075aa9;
  --yellow: #fff000;
  --red: #ed2939;
  --orange: #ef7b18;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  display: grid;
  place-items: center;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .08), transparent 18%, rgba(0, 0, 0, .12) 72%, transparent),
    repeating-linear-gradient(90deg, transparent 0 7rem, rgba(27, 31, 29, .11) 7rem calc(7rem + 2px)),
    #7d817c;
}

body::before {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    repeating-linear-gradient(7deg, transparent 0 3px, rgba(255, 255, 255, .024) 3px 4px),
    radial-gradient(circle, rgba(0, 0, 0, .12) 0 .7px, transparent 1px) 0 0 / 5px 5px;
  mix-blend-mode: multiply;
}

.catalog {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: min(55rem, calc(100% - 2rem), calc((100svh - 3rem) * .735));
  aspect-ratio: .735;
  margin: 1.5rem auto;
  overflow: hidden;
  border: .22rem solid var(--paper);
  outline: .12rem solid var(--ink);
  background: var(--workbench);
  box-shadow:
    1rem 1.25rem 0 rgba(18, 19, 20, .7),
    1.4rem 1.7rem 2.2rem rgba(0, 0, 0, .34);
}

.catalog::before,
.catalog::after {
  position: absolute;
  z-index: 1;
  content: "";
  pointer-events: none;
}

/* Registration bars and the dense footer furniture of a printed cover. */
.catalog::before {
  inset: auto 0 0;
  height: 4.8cqw;
  border-top: .6cqw solid var(--ink);
  background:
    repeating-linear-gradient(90deg, var(--paper) 0 .8cqw, var(--ink) .8cqw 1.15cqw, var(--paper) 1.15cqw 1.6cqw, var(--red) 1.6cqw 2.5cqw);
}

.catalog::after {
  inset: 0;
  z-index: 8;
  background:
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, .025) 2px 3px),
    radial-gradient(circle, rgba(255, 255, 255, .09) 0 .55px, transparent .85px) 0 0 / 4px 4px;
  mix-blend-mode: screen;
  opacity: .58;
}

.magazine-header {
  position: relative;
  z-index: 6;
  padding: 3.4cqw 4.4cqw 0;
}

.magazine-header::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.5cqw;
  content: "";
  border-bottom: .65cqw solid var(--ink);
  background: var(--paper);
}

.magazine-header h1 {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin: 0;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  font-style: italic;
  line-height: .72;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.magazine-header h1 span:first-child {
  color: var(--yellow);
  font-size: 18.3cqw;
  -webkit-text-stroke: .022em var(--ink);
  paint-order: stroke fill;
  text-shadow: .07em .075em 0 var(--ink);
  transform: scaleX(1.06);
  transform-origin: left bottom;
}

.magazine-header h1 span:last-child {
  margin: 0 1cqw .6cqw 0;
  padding: .08em .16em .03em .08em;
  color: var(--paper);
  font-size: 7.1cqw;
  line-height: .82;
  background: var(--red);
  border: .38cqw solid var(--ink);
  box-shadow: .65cqw .65cqw 0 var(--yellow);
  transform: skew(-8deg);
}

.workbench-art {
  position: absolute;
  z-index: 2;
  inset: 24cqw 3.5cqw 7cqw;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 72%, var(--orange) 72% 74%, transparent 74%),
    var(--workbench);
}

.workbench-art::before,
.workbench-art::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

/* Pixel icons, reduced to authentic four-colour Workbench geometry. */
.workbench-art::before {
  z-index: 1;
  top: 15%;
  right: 8%;
  width: 10cqw;
  height: 8cqw;
  border: .55cqw solid var(--ink);
  background:
    linear-gradient(var(--paper), var(--paper)) 18% 25% / 64% 12% no-repeat,
    linear-gradient(var(--paper), var(--paper)) 18% 53% / 64% 12% no-repeat,
    linear-gradient(var(--orange), var(--orange)) 63% 77% / 20% 12% no-repeat,
    var(--workbench);
  box-shadow:
    -17cqw 8cqw 0 -.5cqw var(--paper),
    -17cqw 8cqw 0 0 var(--ink),
    -24cqw 33cqw 0 -.5cqw var(--orange),
    -24cqw 33cqw 0 0 var(--ink);
}

.workbench-art::after {
  z-index: 6;
  right: 2.4cqw;
  bottom: 1.5cqw;
  width: 15cqw;
  height: 4.2cqw;
  border: .55cqw solid var(--paper);
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 .55cqw, var(--paper) .55cqw .9cqw, var(--ink) .9cqw 1.2cqw, var(--paper) 1.2cqw 1.8cqw);
}

.workbench-window {
  position: absolute;
  display: block;
  border: .62cqw solid var(--paper);
  outline: .38cqw solid var(--ink);
  background: var(--workbench);
  box-shadow: .85cqw .85cqw 0 var(--ink);
}

.workbench-window::before,
.workbench-window::after {
  position: absolute;
  content: "";
}

.workbench-window::before {
  top: 0;
  left: 0;
  right: 0;
  height: 2.5cqw;
  border-bottom: .42cqw solid var(--ink);
  background:
    repeating-linear-gradient(0deg, var(--paper) 0 .34cqw, var(--workbench) .34cqw .68cqw);
}

.workbench-window::after {
  top: .35cqw;
  right: .35cqw;
  width: 1.55cqw;
  height: 1.55cqw;
  border: .3cqw solid var(--ink);
  background: var(--paper);
  box-shadow: -2.3cqw 0 0 -.15cqw var(--paper), -2.3cqw 0 0 .15cqw var(--ink);
}

.workbench-window-back {
  top: 4%;
  right: 4%;
  width: 68%;
  height: 52%;
}

.workbench-window-front {
  bottom: 7%;
  left: 4%;
  width: 68%;
  height: 43%;
  background:
    linear-gradient(var(--ink), var(--ink)) 7% 34% / 74% .7cqw no-repeat,
    linear-gradient(var(--ink), var(--ink)) 7% 48% / 57% .7cqw no-repeat,
    linear-gradient(var(--ink), var(--ink)) 7% 62% / 66% .7cqw no-repeat,
    linear-gradient(var(--orange), var(--orange)) 76% 73% / 9% 8% no-repeat,
    var(--paper);
}

.workbench-window-front::before {
  background:
    repeating-linear-gradient(0deg, var(--paper) 0 .34cqw, var(--workbench) .34cqw .68cqw);
}

.games {
  position: absolute;
  z-index: 5;
  inset: 30cqw 4.5cqw 8cqw;
}

.game-card {
  position: absolute;
  display: block;
  width: 48%;
  color: inherit;
  text-decoration: none;
  transition: transform 150ms ease;
}

.game-card:first-child {
  top: 10%;
  left: 0;
  transform: rotate(-1deg);
}

.game-card:nth-child(even) {
  right: 1.2cqw;
  bottom: 8%;
  transform: rotate(1deg);
}

.game-card:hover {
  transform: translate(-.45cqw, -.7cqw) rotate(-1.8deg);
}

.game-card:nth-child(even):hover {
  transform: translate(-.45cqw, -.7cqw) rotate(1.8deg);
}

.game-card:focus-visible {
  outline: .55cqw solid var(--paper);
  outline-offset: .8cqw;
}

.card-copy {
  display: grid;
  grid-template-rows: auto auto auto;
}

.card-year {
  grid-row: 1;
  justify-self: start;
  margin: 0 0 1cqw 1cqw;
  padding: .28em .5em .2em;
  color: var(--paper);
  font-size: clamp(.68rem, 2.45cqw, 1.1rem);
  font-weight: 900;
  font-style: normal;
  line-height: 1;
  letter-spacing: .1em;
  background: var(--ink);
  border: .3cqw solid var(--paper);
}

.game-card h2 {
  grid-row: 2;
  margin: 0;
  padding: .18em .16em .11em .1em;
  color: var(--yellow);
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: clamp(2.1rem, 6.6cqw, 4rem);
  font-weight: 900;
  font-style: italic;
  line-height: .79;
  letter-spacing: -.018em;
  text-transform: uppercase;
  text-wrap: balance;
  -webkit-text-stroke: .025em var(--ink);
  paint-order: stroke fill;
  text-shadow: .07em .075em 0 var(--ink);
  background: rgba(7, 8, 10, .84);
  border-left: 1.2cqw solid var(--red);
  box-shadow: .85cqw .85cqw 0 var(--red);
}

.card-creators {
  grid-row: 3;
  justify-self: start;
  max-width: 90%;
  margin: 1.2cqw 0 0 1.5cqw;
  padding: .35em .48em .28em;
  color: var(--ink);
  font-size: clamp(.68rem, 2.4cqw, 1.05rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  background: var(--yellow);
  box-shadow: .55cqw .55cqw 0 var(--ink);
}

.card-creators span {
  display: inline;
}

.game-card:nth-child(even) .card-year {
  justify-self: end;
  margin-right: 1cqw;
  color: var(--ink);
  background: var(--paper);
  border-color: var(--ink);
}

.game-card:nth-child(even) h2 {
  color: var(--paper);
  background: var(--red);
  border-left-color: var(--yellow);
  box-shadow: -.85cqw .85cqw 0 var(--ink);
}

.game-card:nth-child(even) .card-creators {
  justify-self: end;
  margin-right: 1.5cqw;
  color: var(--paper);
  text-align: right;
  background: var(--ink);
  box-shadow: -.55cqw .55cqw 0 var(--yellow);
}

@media (max-width: 34rem) {
  .catalog {
    width: calc(100% - 1rem);
    margin: .5rem auto 1.25rem;
    box-shadow:
      .55rem .7rem 0 rgba(18, 19, 20, .7),
      .8rem 1rem 1.2rem rgba(0, 0, 0, .3);
  }

  .game-card {
    width: 52%;
  }

  .game-card:first-child {
    top: 8%;
  }

  .game-card:nth-child(even) {
    bottom: 5%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .game-card {
    transition: none;
  }
}