@font-face {
  font-family:TC Sans;
  src:url('brand/heading.woff') format('woff');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
:root {
  --paper:#f5eedc;
  --ink:#20251f;
  --red:#c73622;
  --yellow:#f1be38;
  --green:#61765b;
  --muted:#565b4e;
  --line:#c3bfac;
  --heading:'TC Sans','Arial',sans-serif;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem;
}
body {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font:17px/1.65 Arial,Helvetica,sans-serif;
  background-image:radial-gradient(#20251f0a .65px,transparent .65px);
  background-size:5px 5px;
}
body.viewer-open {
  overflow:hidden;
}
a {
  color:inherit;
  text-underline-offset:.24em;
}
a:hover {
  color:var(--red);
}
button,a {
  -webkit-tap-highlight-color:transparent;
}
button {
  font:inherit;
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--red);
  outline-offset:6px;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
figure {
  margin:0;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  line-height:1.05;
}
h1,h2 {
  font-family:var(--heading);
  font-weight:700;
  letter-spacing:-.055em;
}
h1 {
  font-size:clamp(3.3rem,7vw,7rem);
}
h2 {
  font-size:clamp(2.4rem,4vw,3.8rem);
}
h3 {
  font-size:1.3rem;
}
em {
  font-style:normal;
  color:var(--red);
}
.wrap {
  width:calc(100% - 112px);
  max-width:1328px;
  margin-inline:auto;
}
.eyebrow,.platform-line,.hero-platform,.fine-print,.screen-caption,.cover-top,.cover-bottom,.breadcrumb,.platform-status {
  font-family:'Courier New',monospace;
  font-size:.76rem;
  letter-spacing:.065em;
  text-transform:uppercase;
}
.eyebrow {
  margin-bottom:1.4rem;
  font-weight:700;
}
.lead {
  font-size:1.4rem;
  line-height:1.5;
  max-width:42ch;
}
.small {
  font-size:.85rem;
  color:var(--muted);
  line-height:1.6;
}
.text-link {
  font-size:.9rem;
  font-weight:700;
  text-decoration-thickness:1px;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
  background:var(--red);
  color:#fff;
  padding:1rem 1.5rem;
  text-decoration:none;
  font-size:.91rem;
  font-weight:700;
  min-height:54px;
  transition:background .15s,transform .15s;
}
.button:hover {
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-2px);
}
.skip-link {
  position:fixed;
  top:0;
  left:16px;
  padding:12px 20px;
  background:var(--ink);
  color:white;
  z-index:10;
  transform:translateY(-120%);
}
.skip-link:focus {
  transform:translateY(0);
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  min-height:128px;
  border-bottom:2px solid var(--ink);
}
.brand {
  width:180px;
  flex-shrink:0;
}
.site-header nav {
  display:flex;
  gap:2rem;
  margin-left:auto;
}
.site-header nav a {
  font-size:.78rem;
  letter-spacing:.055em;
  font-weight:700;
  text-transform:uppercase;
  text-decoration:none;
  padding:12px 0;
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.13fr;
  gap:2.5rem;
  align-items:center;
  padding-block:58px 50px;
}
.hero h1 {
  font-size:clamp(5rem,8.5vw,8rem);
  line-height:.9;
  margin:0 0 2rem;
  letter-spacing:-.07em;
}
.hero .lead {
  font-size:1.3rem;
  max-width:28ch;
}
.hero-description {
  margin:12px 0 28px;
  max-width:36ch;
  font-size:1rem;
  color:var(--muted);
}
.hero-platform {
  margin-top:1.5rem;
  font-size:.66rem;
  font-weight:700;
}
.hero-platform span {
  margin-inline:.4rem;
  color:var(--red);
}
.hero-machine {
  padding-top:30px;
}
.monitor {
  position:relative;
  filter:drop-shadow(0 20px 16px #20251f17);
}
.monitor-body {
  padding:26px 78px 43px 26px;
  border-radius:28px;
  background:linear-gradient(140deg,#42483d,#20251f);
  position:relative;
  box-shadow:inset 0 2px 2px #ffffff15,inset 0 -5px 10px #0004;
}
.monitor-screen {
  padding:16px 8px;
  border-radius:26px;
  background:#11150f;
  box-shadow:inset 0 0 15px #000;
}
.monitor-screen a {
  display:block;
}
.monitor-screen img {
  width:100%;
  aspect-ratio:5/4;
  object-fit:contain;
  image-rendering:pixelated;
}
/* CRT copies (site/crt/) are high-resolution renders of MAME's CRT shader,
   not pixel art: scale them smoothly so the mask and scanlines do not alias.
   The linked originals and the lightbox stay pixelated. */
.monitor-screen img.crt,.screenshot-grid img.crt {
  image-rendering:auto;
}
/* Renders of 3D scenes (the Dreamcast) are not pixel art either. */
.screenshot-grid img.smooth,.teaser-shot img,dialog img.smooth {
  image-rendering:auto;
}
.monitor-controls {
  position:absolute;
  right:24px;
  top:34px;
  bottom:40px;
  width:28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:17px;
}
.speaker {
  height:96px;
  width:30px;
  margin-bottom:auto;
  background:repeating-linear-gradient(to bottom,#6b7260 0px,#6b7260 2px,transparent 2px,transparent 9px);
  border:5px solid #1c2119;
  border-radius:4px;
}
.monitor-controls i {
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid #79816e;
  background:#20251f;
  box-shadow:2px 3px 6px #0004;
}
.monitor-controls b {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#b6d087;
  box-shadow:0 0 7px #b6d08740;
}
.monitor-label {
  position:absolute;
  bottom:13px;
  left:40px;
  color:#dfe3d6;
  font-weight:700;
  letter-spacing:2px;
  font-size:.69rem;
}
.monitor-label small {
  font-family:monospace;
  letter-spacing:.5px;
  margin-left:1.5rem;
  font-size:.5rem;
  color:#b6baad;
}
.monitor-neck {
  height:39px;
  width:35%;
  margin:auto;
  background:#30372c;
  clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);
}
.monitor-foot {
  height:14px;
  width:52%;
  margin:auto;
  border-radius:5px;
  background:var(--ink);
}
.screen-caption {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-top:20px;
  font-size:.63rem;
}
.screen-caption>span:last-child {
  color:var(--muted);
  margin-left:8px;
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  flex-shrink:0;
}
.machine-note {
  font-size:.73rem;
  color:var(--muted);
  text-align:center;
  margin:9px auto 0;
  max-width:40ch;
}
.platform-strip {
  border-block:1px solid var(--line);
  margin-top:8px;
}
.platform-strip .wrap {
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:16px;
  font:700 .65rem/1.5 'Courier New',monospace;
  letter-spacing:.09em;
}
.platform-strip span::before {
  content:'+';
  color:var(--red);
  margin-right:13px;
}
.catalogue {
  padding-block:76px;
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:2rem;
  margin-bottom:36px;
}
.section-heading p:not(.eyebrow) {
  font-size:.92rem;
  color:var(--muted);
}
.section-heading .eyebrow {
  margin-bottom:14px;
}
.game-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.cover {
  display:flex;
  flex-direction:column;
  background:var(--red);
  color:var(--paper);
  text-decoration:none;
  box-shadow:4px 5px 0 #20251f20;
  border:1px solid #20251f20;
  overflow:hidden;
}
.cover:hover {
  color:var(--paper);
}
.cover-top {
  display:flex;
  justify-content:space-between;
  padding:10px 14px;
  align-items:center;
  font-size:.6rem;
  font-weight:700;
}
.cover-top>span:first-child {
  text-transform:none;
  font-style:italic;
  font-family:Arial,sans-serif;
  font-size:.95rem;
  letter-spacing:-.05em;
}
.cover img {
  width:100%;
  aspect-ratio:11/13;
  object-fit:cover;
  transition:transform .4s;
}
.cover:hover img {
  transform:scale(1.015);
}
.cover-name {
  font:700 clamp(1.9rem,3.1vw,3.1rem)/1 var(--heading);
  letter-spacing:-.055em;
  padding:15px 14px 3px;
  text-transform:uppercase;
}
.cover-bottom {
  font-size:.54rem;
  padding:7px 14px 14px;
  letter-spacing:.07em;
}
.scarab .cover {
  background:var(--ink);
  color:var(--yellow);
}
.cubit .cover {
  background:var(--yellow);
  color:var(--ink);
}
.wyrm .cover {
  background:#1b2347;
  color:var(--yellow);
}
.game-card h3 {
  margin-top:24px;
  font:700 .94rem/1.4 Arial,sans-serif;
  letter-spacing:-.02em;
}
.game-card h3 a {
  text-decoration:none;
  display:block;
}
.platform-line {
  margin-top:9px;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:0;
}
.art-note {
  margin-top:29px;
  color:var(--muted);
  font-size:.72rem;
}
.catalogue-page h1 {
  margin-bottom:1.5rem;
}
.catalogue-page>.lead {
  margin-bottom:3rem;
}
.formats-band {
  background:var(--ink);
  color:var(--paper);
  padding:52px 0;
}
.formats-band h2 {
  font-size:2.6rem;
}
.formats-band .text-link {
  color:var(--paper);
}
.format-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:42px;
  margin-top:40px;
}
.format-grid .eyebrow {
  color:var(--yellow);
  font-size:.69rem;
  margin-bottom:16px;
}
.format-grid h3 {
  font-family:var(--heading);
  font-size:2.4rem;
  letter-spacing:-.04em;
  margin-bottom:15px;
}
.format-grid p:not(.eyebrow) {
  font-size:.9rem;
  color:#d4d6c9;
  max-width:35ch;
}
.formats-band .fine-print {
  font-size:.61rem;
  margin-top:32px;
  color:#d4d6c9;
}
.bespoke-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding-block:78px;
}
.bespoke-section h2 {
  font-size:clamp(2.5rem,4.2vw,4rem);
}
.bespoke-section .lead {
  margin-bottom:16px;
}
.bespoke-section .button {
  margin-top:25px;
}
.bespoke-section>div:last-child {
  padding-top:15px;
}
.studio-note {
  border-top:1px solid var(--line);
  padding-block:65px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:80px;
}
.studio-note>.eyebrow {
  grid-column:1/-1;
}
.studio-note h2 {
  grid-row:2/4;
  font-size:2.7rem;
}
.studio-note p:not(.eyebrow) {
  max-width:45ch;
  margin-bottom:17px;
}
.studio-note .text-link {
  justify-self:start;
}
.site-footer {
  border-top:2px solid var(--ink);
  padding-block:32px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px 32px;
  align-items:center;
}
.footer-brand {
  width:140px;
}
.site-footer>p {
  font-size:.8rem;
  color:var(--muted);
  justify-self:end;
}
.site-footer nav {
  display:flex;
  gap:24px;
  font-size:.76rem;
  grid-column:1/-1;
}
.site-footer .legal {
  grid-column:1/-1;
  justify-self:start;
  max-width:90ch;
  font-size:.72rem;
}
.site-footer .legal a {
  color:inherit;
}
.owner-input {
  background:var(--yellow);
  color:var(--ink);
  font-weight:700;
  padding:0 .3em;
}
.company-details {
  display:grid;
  grid-template-columns:max-content 1fr;
  gap:8px 24px;
  margin:20px 0 0;
}
.company-details dt {
  font-weight:700;
}
.company-details dd {
  margin:0;
}
.site-footer small {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:15px;
  font: .65rem 'Courier New',monospace;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
}
.breadcrumb {
  display:flex;
  gap:16px;
  padding-top:32px;
  font-size:.69rem;
}
.game-intro {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:100px;
  align-items:center;
  padding-block:40px 60px;
}
.game-intro h1 {
  font-size:clamp(5rem,8vw,8rem);
  text-transform:uppercase;
  margin-bottom:18px;
}
.game-intro .game-tagline {
  font-family:var(--heading);
  font-size:1.9rem;
  letter-spacing:-.035em;
  margin-bottom:23px;
  line-height:1.2;
}
.game-intro .lead {
  font-size:1.18rem;
  color:var(--muted);
  max-width:36ch;
}
.game-intro .platform-line {
  margin-block:22px;
  font-size:.74rem;
}
.game-poster {
  max-width:400px;
  justify-self:center;
  transform:rotate(2deg);
  width:100%;
}
.game-poster .cover {
  box-shadow:12px 15px 0 #20251f1a;
}
.game-poster .cover-name {
  font-size:3.4rem;
  padding:20px 20px 0;
}
.game-poster .cover-bottom {
  padding:10px 20px 20px;
}
.game-poster figcaption {
  font-size:.65rem;
  text-align:center;
  margin-top:22px;
  transform:rotate(-2deg);
  color:var(--muted);
}
.game-detail {
  display:grid;
  grid-template-columns:1.25fr 1fr;
  gap:100px;
  border-top:1px solid var(--line);
  padding-top:50px;
}
.prose {
  font-size:1.04rem;
  max-width:65ch;
}
.prose h2 {
  font-size:2.35rem;
  margin:2.5rem 0 1.1rem;
  letter-spacing:-.035em;
}
.prose h2:first-child {
  margin-top:0;
}
.prose h3 {
  font-size:1.24rem;
  margin:2rem 0 .8rem;
  line-height:1.3;
}
.prose p {
  margin-bottom:1.25rem;
}
.prose ul {
  padding-left:1.3rem;
  margin-block:1.25rem;
}
.prose li {
  margin-block:.7rem;
}
.prose em {
  font-style:italic;
  color:var(--muted);
  font-size:.9rem;
}
.editions {
  align-self:start;
  background:#e9e2cf;
  border:1px solid #d4cdb8;
  padding:30px;
  position:sticky;
  top:24px;
}
.editions>.eyebrow {
  font-size:.64rem;
}
.editions h2 {
  font-size:2rem;
  margin-bottom:20px;
}
.edition-row {
  display:flex;
  gap:15px;
  justify-content:space-between;
  border-top:1px solid #c8c2ae;
  padding-block:17px;
  align-items:start;
}
.edition-row h3 {
  font-size:1rem;
}
.edition-row p {
  font-size:.72rem;
  margin-top:5px;
  color:var(--muted);
}
.edition-row strong {
  font-size:.9rem;
  white-space:nowrap;
}
.availability {
  font-weight:700;
  font-size:.9rem;
  display:flex;
  gap:10px;
  align-items:center;
  margin-block:16px;
}
.editions .small {
  font-size:.76rem;
  margin-bottom:16px;
}
.editions .text-link {
  font-size:.8rem;
}
.gameplay {
  padding-block:70px 35px;
}
.platform-panel {
  border:1px solid var(--line);
  padding:28px;
  margin-top:26px;
}
.platform-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
}
.platform-heading h3 {
  font-size:1.6rem;
  font-family:var(--heading);
  letter-spacing:-.035em;
}
.platform-status {
  font-size:.58rem;
  padding:5px 8px;
  background:#e5dfcc;
}
.platform-panel>p {
  margin-top:13px;
  font-size:.9rem;
  color:var(--muted);
}
.screenshot-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
  margin-top:26px;
}
.screenshot-grid figure {
  display:flex;
  flex-direction:column;
}
.screenshot-grid a {
  display:grid;
  place-items:center;
  background:#12150f;
  padding:18px;
  flex-grow:1;
}
.screenshot-grid img {
  width:100%;
  height:auto;
  image-rendering:pixelated;
  max-width:480px;
}
.screenshot-grid figcaption {
  font:.65rem 'Courier New',monospace;
  text-transform:uppercase;
  margin-top:13px;
  letter-spacing:.05em;
}
.controls strong {
  display:block;
  color:var(--ink);
  margin-block:12px 5px;
}
.platform-panel>.small {
  font-size:.76rem;
}
.preview-lead {
  font-weight:700;
}
.preview-features {
  margin:14px 0 0 1.1em;
  font-size:.9rem;
  color:var(--muted);
}
.cheat-card {
  display:grid;
  grid-template-columns:120px 1fr;
  gap:20px;
  align-items:center;
  margin:22px 0 4px;
  padding:16px;
  border:2px solid var(--line);
}
.cheat-card img {
  display:block;
  width:120px;
  height:auto;
  box-shadow:4px 5px 0 var(--ink);
}
.cheat-card p {
  font-size:.9rem;
  color:var(--muted);
}
.cheat-card .cheat-card-title {
  font-family:var(--heading);
  font-weight:700;
  font-size:1.15rem;
  color:var(--ink);
  margin-bottom:4px;
}
.cheat-card-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:10px;
}
.cheat-card-links a {
  color:var(--red);
  font-weight:700;
}
.preview-grid .media-placeholder:last-child:nth-child(odd) {
  grid-column:1 / -1;
}
.preview-grid .preview-video {
  grid-column:1 / -1;
}
.preview-grid .preview-feature {
  grid-column:1 / -1;
}
.preview-grid .preview-feature img {
  max-width:640px;
}
.preview-video video {
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  margin-inline:auto;
  background:#12150f;
}
.preview-video figcaption {
  font:.65rem 'Courier New',monospace;
  text-transform:uppercase;
  margin-top:13px;
  letter-spacing:.05em;
}
.media-placeholder {
  display:grid;
  place-items:center;
  min-height:180px;
  border:2px dashed var(--line);
  padding:18px;
  text-align:center;
}
.teaser {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:center;
  padding-block:20px 76px;
}
.teaser h2 {
  font-size:clamp(2.2rem,4vw,3.6rem);
  line-height:1;
  margin-block:10px 18px;
}
.teaser-copy p:not(.eyebrow) {
  max-width:46ch;
  margin-bottom:18px;
}
.teaser-shot {
  background:#12150f;
  padding:18px;
}
.teaser-shot a {
  display:block;
  cursor:zoom-in;
}
.teaser-shot img {
  display:block;
  width:100%;
  height:auto;
}
.teaser-shot figcaption {
  font:.65rem 'Courier New',monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#c9c3b0;
  margin-top:12px;
}
@media (max-width:760px) {
  .teaser {
    grid-template-columns:1fr;
    gap:24px;
  }
}
.coming-soon {
  padding:25px;
  background:#e9e2cf;
}
/* A bonus game that comes with a page's editions (game.html, extra.bonus):
   deliberately quieter than the platform panels above it, with smaller
   screenshots and no price. */
.bonus {
  margin-top:38px;
  padding:26px 28px 28px;
  border:1px dashed #b2ad98;
  background:#ece6d4;
}
.bonus-heading .eyebrow {
  margin-bottom:10px;
  color:var(--muted);
  font-size:.62rem;
}
.bonus-badge {
  display:inline-block;
  padding:3px 7px;
  margin-right:6px;
  background:var(--ink);
  color:var(--paper);
}
.bonus-heading h3 {
  font:700 1.25rem/1.25 var(--heading);
  letter-spacing:-.025em;
}
.bonus-included {
  margin-top:10px;
  font-size:.86rem;
  font-weight:700;
}
.bonus-body {
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:30px;
  margin-top:18px;
  align-items:start;
}
.bonus-note {
  font-size:.86rem;
  color:var(--muted);
}
.bonus-note p {
  margin-bottom:.8rem;
}
.bonus-note strong {
  color:var(--ink);
}
.bonus-note em {
  color:inherit;
  font-style:italic;
}
.bonus-note .small,.bonus-note .controls {
  font-size:.76rem;
}
.bonus-shots {
  gap:14px;
  margin-top:0;
}
.bonus-shots a {
  padding:10px;
}
.bonus-shots img {
  max-width:240px;
}
.bonus-shots figcaption {
  font-size:.56rem;
  margin-top:8px;
}
.next-game {
  display:flex;
  justify-content:space-between;
  gap:22px;
  border-top:1px solid var(--line);
  padding-block:30px 60px;
}
.editorial {
  padding-block:65px 90px;
  max-width:960px;
}
.editorial>h1 {
  font-size:clamp(3.3rem,6vw,5.7rem);
  max-width:16ch;
  margin-bottom:25px;
}
.editorial>.lead {
  max-width:52ch;
  margin-bottom:45px;
}
.editorial .prose {
  max-width:65ch;
}
.editorial .prose h2 {
  border-top:1px solid var(--line);
  padding-top:28px;
}
.commission-note {
  max-width:65ch;
  margin:40px 0 0;
  padding:20px 24px;
  border-left:4px solid var(--red);
  background:rgba(255,255,255,.35);
}
.contact-panel {
  margin-top:25px;
  background:#e9e2cf;
  padding:30px;
  max-width:65ch;
}
.contact-panel p:not(.eyebrow) {
  margin-bottom:20px;
}
dialog {
  border:0;
  max-width:min(95vw,1100px);
  max-height:94dvh;
  padding:55px 25px 20px;
  background:var(--paper);
  color:var(--ink);
  overflow:auto;
  box-shadow:0 20px 90px #0008;
}
dialog::backdrop {
  background:#11180feb;
  backdrop-filter:blur(5px);
}
dialog img {
  display:block;
  width:auto;
  height:min(73dvh,768px);
  max-width:min(90vw,960px);
  max-height:73dvh;
  object-fit:contain;
  image-rendering:pixelated;
  margin:auto;
}
dialog p {
  font-size:.85rem;
  margin-top:14px;
  text-align:center;
}
/* The CRT / Clean switch: two radio buttons and plain CSS. site.js only says
   whether the opened picture has a CRT copy (.has-crt), loads it, and selects
   CRT on each opening. */
.viewer-mode-input {
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.viewer-mode,#viewer-crt,.viewer-note,
#image-viewer:not(.has-crt) .viewer-mode-input {
  display:none; /* no CRT copy: no switch, and no invisible stop in the Tab order */
}
#image-viewer.has-crt .viewer-mode {
  display:flex;
  justify-content:center;
  gap:0;
  margin:-30px auto 14px;
  width:max-content;
  border:1px solid var(--ink);
  font:.7rem 'Courier New',monospace;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.viewer-mode label {
  padding:5px 14px;
  cursor:pointer;
}
#viewer-mode-crt:checked ~ .viewer-mode label[for=viewer-mode-crt],
#viewer-mode-clean:checked ~ .viewer-mode label[for=viewer-mode-clean] {
  background:var(--ink);
  color:var(--paper);
}
#viewer-mode-crt:focus-visible ~ .viewer-mode label[for=viewer-mode-crt],
#viewer-mode-clean:focus-visible ~ .viewer-mode label[for=viewer-mode-clean] {
  outline:2px solid var(--ink);
  outline-offset:3px;
}
#image-viewer.has-crt .viewer-note {
  display:block;
  margin-top:4px;
  font-size:.75rem;
  opacity:.75;
}
#image-viewer.has-crt #viewer-mode-crt:checked ~ #viewer-crt {
  display:block;
  image-rendering:auto;
}
#image-viewer.has-crt #viewer-mode-crt:checked ~ #viewer-image,
#viewer-mode-crt:checked ~ .viewer-note .viewer-note-clean,
#viewer-mode-clean:checked ~ .viewer-note .viewer-note-crt {
  display:none;
}
.viewer-close {
  position:absolute;
  right:20px;
  top:14px;
  background:none;
  border:0;
  padding:4px 6px;
  cursor:pointer;
  font-weight:700;
}
@media(min-width:1500px) {
  .hero {
    padding-block:75px 65px;
  }
  .hero-machine {
    padding-left:20px;
  }
}
@media(max-width:1100px) {
  .wrap {
    width:calc(100% - 64px);
  }
  .site-header {
    gap:1.5rem;
  }
  .site-header nav {
    gap:1.2rem;
  }
  .brand {
    width:155px;
  }
  .hero {
    gap:1.5rem;
  }
  .hero h1 {
    font-size:6.3rem;
  }
  .hero .lead {
    font-size:1.1rem;
  }
  .monitor-body {
    padding:19px 57px 38px 19px;
    border-radius:23px;
  }
  .monitor-controls {
    right:16px;
    width:24px;
    gap:12px;
  }
  .monitor-controls i {
    width:24px;
    height:24px;
  }
  .speaker {
    width:24px;
    height:65px;
  }
  .game-grid {
    gap:18px;
  }
  .cover-name {
    font-size:2rem;
  }
  .game-card h3 {
    font-size:.85rem;
  }
  .game-intro,.game-detail {
    gap:50px;
  }
  .format-grid {
    gap:26px;
  }
  .format-grid h3 {
    font-size:1.9rem;
  }
  .formats-band h2 {
    font-size:2.2rem;
  }
  .bespoke-section,.studio-note {
    column-gap:40px;
  }
}
@media(max-width:760px) {
  .wrap {
    width:calc(100% - 40px);
  }
  .site-header {
    min-height:0;
    flex-wrap:wrap;
    padding-block:19px 14px;
    gap:13px;
  }
  .brand {
    width:150px;
  }
  .site-header nav {
    order:2;
    flex-basis:100%;
    justify-content:space-between;
    margin:0;
    gap:8px;
    border-top:1px solid var(--line);
    padding-top:4px;
  }
  .site-header nav a {
    font-size:.65rem;
    padding-block:9px;
  }
  .hero {
    grid-template-columns:1fr;
    padding-block:35px;
    gap:20px;
  }
  .hero-copy>.eyebrow {
    font-size:.62rem;
    margin-bottom:20px;
  }
  .hero h1 {
    font-size:5.8rem;
    line-height:.92;
    max-width:6ch;
    margin-bottom:24px;
  }
  .hero .lead {
    font-size:1.16rem;
    max-width:30ch;
  }
  .hero-description {
    font-size:.95rem;
    max-width:37ch;
  }
  .hero .button {
    min-width:190px;
  }
  .hero-platform {
    font-size:.57rem;
    margin-top:18px;
  }
  .hero-machine {
    padding-top:7px;
    max-width:540px;
    width:100%;
    margin:auto;
  }
  .monitor-body {
    padding:18px 58px 35px 18px;
  }
  .monitor-screen {
    padding:8px 4px;
    border-radius:16px;
  }
  .monitor-label {
    left:27px;
    bottom:10px;
    font-size:.6rem;
  }
  .monitor-label small {
    font-size:.41rem;
    margin-left:12px;
  }
  .monitor-controls {
    top:27px;
    bottom:32px;
  }
  .monitor-neck {
    height:25px;
  }
  .monitor-foot {
    height:11px;
  }
  .screen-caption {
    font-size:.55rem;
    margin-top:18px;
    gap:7px;
  }
  .screen-caption>span:last-child {
    margin-left:0;
  }
  .machine-note {
    font-size:.66rem;
    max-width:35ch;
  }
  .platform-strip .wrap {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    font-size:.53rem;
    padding-block:15px;
  }
  .platform-strip span::before {
    margin-right:6px;
  }
  .catalogue {
    padding-block:43px;
  }
  .section-heading {
    display:block;
    margin-bottom:25px;
  }
  .section-heading h2 {
    font-size:2.6rem;
  }
  .section-heading>p {
    margin-top:17px;
    font-size:.85rem;
  }
  .section-heading .text-link {
    display:inline-block;
    margin-top:20px;
  }
  .game-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 16px;
  }
  .cover-top {
    padding:7px 9px;
    font-size:.5rem;
  }
  .cover-top>span:first-child {
    font-size:.75rem;
  }
  .cover-name {
    font-size:clamp(1.4rem,6vw,2.6rem);
    padding:11px 9px 2px;
  }
  .cover-bottom {
    font-size:.44rem;
    padding:5px 9px 10px;
    letter-spacing:0;
  }
  .game-card h3 {
    margin-top:16px;
    font-size:.83rem;
    line-height:1.4;
  }
  .game-card .platform-line {
    font-size:.52rem;
    line-height:1.7;
  }
  .art-note {
    font-size:.66rem;
    margin-top:25px;
  }
  .formats-band {
    padding-block:38px;
  }
  .format-grid {
    grid-template-columns:1fr;
    gap:25px;
    margin-top:25px;
  }
  .format-grid>div+div {
    padding-top:24px;
    border-top:1px solid #ffffff30;
  }
  .format-grid .eyebrow {
    margin-bottom:11px;
  }
  .format-grid h3 {
    font-size:2.2rem;
    margin-bottom:10px;
  }
  .format-grid p:not(.eyebrow) {
    font-size:.85rem;
  }
  .formats-band .fine-print {
    font-size:.55rem;
    line-height:1.8;
  }
  .bespoke-section {
    grid-template-columns:1fr;
    padding-block:43px;
    gap:15px;
  }
  .bespoke-section h2 {
    font-size:2.8rem;
  }
  .bespoke-section .lead {
    font-size:1.18rem;
  }
  .bespoke-section>div:last-child {
    padding-top:5px;
  }
  .bespoke-section p {
    font-size:.97rem;
  }
  .studio-note {
    display:block;
    padding-block:40px;
  }
  .studio-note h2 {
    font-size:2.4rem;
    margin-bottom:24px;
  }
  .studio-note p:not(.eyebrow) {
    font-size:.95rem;
  }
  .site-footer {
    gap:15px;
    padding-block:24px;
  }
  .site-footer>p {
    font-size:.67rem;
    max-width:14ch;
    text-align:right;
  }
  .footer-brand {
    width:125px;
  }
  .site-footer nav {
    font-size:.7rem;
    gap:18px;
    flex-wrap:wrap;
  }
  .site-footer small {
    font-size:.53rem;
    gap:10px;
    line-height:1.7;
  }
  .game-intro {
    grid-template-columns:1fr;
    gap:38px;
    padding-block:30px 40px;
  }
  .game-intro h1 {
    font-size:4.5rem;
    overflow-wrap:anywhere;
  }
  .game-intro .eyebrow {
    font-size:.61rem;
  }
  .game-intro .game-tagline {
    font-size:1.6rem;
  }
  .game-intro .lead {
    font-size:1.12rem;
  }
  .game-poster {
    max-width:300px;
    width:85%;
  }
  .game-poster .cover-name {
    font-size:3rem;
  }
  .game-detail {
    grid-template-columns:1fr;
    gap:25px;
    padding-top:32px;
  }
  .prose {
    font-size:.97rem;
  }
  .prose h2 {
    font-size:2rem;
  }
  .editions {
    position:static;
    padding:24px;
  }
  .gameplay {
    padding-block:43px 22px;
  }
  .platform-panel {
    padding:18px;
    margin-top:20px;
  }
  .platform-heading {
    display:block;
  }
  .platform-heading h3 {
    font-size:1.4rem;
  }
  .platform-status {
    display:inline-block;
    margin-top:12px;
    font-size:.52rem;
  }
  .platform-panel>p {
    font-size:.84rem;
  }
  .screenshot-grid {
    grid-template-columns:1fr;
    gap:23px;
    margin-top:20px;
  }
  .screenshot-grid a {
    padding:12px;
  }
  .screenshot-grid figcaption {
    font-size:.58rem;
  }
  .bonus {
    padding:18px;
  }
  .bonus-body {
    grid-template-columns:1fr;
    gap:18px;
  }
  .bonus-shots {
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .bonus-shots a {
    padding:6px;
  }
  .next-game {
    flex-direction:column;
    padding-bottom:40px;
  }
  .editorial {
    padding-block:40px 50px;
  }
  .editorial>h1 {
    font-size:3.2rem;
    overflow-wrap:anywhere;
  }
  .editorial>.lead {
    font-size:1.18rem;
    margin-bottom:30px;
  }
  .contact-panel {
    padding:22px;
  }
  .catalogue-page h1 {
    font-size:3.5rem;
  }
  dialog {
    padding-inline:15px;
    max-width:95vw;
  }
  dialog img {
    width:100%;
    height:auto;
    max-height:73dvh;
  }
  dialog p {
    font-size:.72rem;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}
.game-clip {
  max-width:680px;
  margin:30px auto 40px;
}
.game-clip video {
  display:block;
  width:100%;
  height:auto;
  background:#12150f;
  image-rendering:pixelated;
}
.game-clip figcaption {
  font:.65rem/1.7 "Courier New",monospace;
  text-transform:uppercase;
  margin-top:12px;
  color:var(--muted);
}

.cover .cover-logo {
  width: 68px;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
}
.cubit .cover .cover-logo {
  filter: none;
}
.cover:hover .cover-logo {
  transform: none;
}