@font-face {
  font-family: Inter;
  src: url('../fonts/inter-latin-variable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url('../fonts/inter-latin-italic-variable.woff2') format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* Typography, colour values, column width, and spacing from Feint.me. */
:root {
  color-scheme: light;
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --color-background: #faf9f8;
  --color-text: #595857;
  --color-heading: #1b1a1a;
  --color-light-text: #7b7a79;
  --color-muted: #dfdedc;
  --color-link: #2254f5;
  --color-link-hover: #153cc9;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --content-width: 600px;
  --font-body: clamp(.9375rem, .9rem + .15vw, 1rem);
  --font-page-title: clamp(1.5rem, 1.35rem + .6vw, 1.875rem);
  --font-heading-1: clamp(1.375rem, 1.25rem + .5vw, 1.6875rem);
  --font-heading-2: clamp(1.1875rem, 1.1rem + .35vw, 1.375rem);
  --font-heading-3: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --space-1: clamp(.375rem, .34rem + .15vw, .5rem);
  --space-2: clamp(.625rem, .57rem + .2vw, .75rem);
  --space-3: clamp(1rem, .9rem + .4vw, 1.25rem);
  --space-4: clamp(1.5rem, 1.3rem + .8vw, 2rem);
  --space-5: clamp(2rem, 1.65rem + 1.4vw, 2.875rem);
}

@supports (color: lab(0% 0 0)) {
  :root {
    --color-background: lab(97.918% .111163 .751436);
    --color-text: lab(37.3659% .112504 .752282);
    --color-heading: lab(9.52577% .115313 .754073);
    --color-light-text: lab(51.286% .111997 .751948);
    --color-muted: lab(88.406% .111252 .751495);
  }
}

* { box-sizing: border-box; }

body {
  min-height: 100vh;
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.site-shell {
  width: min(var(--content-width), calc(100% - (var(--gutter) * 2)));
  min-width: 0;
  margin-inline: auto;
}

.site-header { display: flex; align-items: center; padding-block: clamp(1.5rem, 3vw, 2.5rem); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--color-heading);
  font-size: clamp(.95rem, .9rem + .2vw, 1.05rem);
  font-weight: 620;
  line-height: 1;
  white-space: nowrap;
}

.brand-dot {
  display: block;
  flex: none;
  width: 1em;
  height: 1em;
}

.brand:hover { color: var(--color-heading); text-decoration-line: none; }

main.site-shell { padding-block: clamp(2.5rem, 6vw, 5rem); }
.introduction { margin-bottom: var(--space-5); }

h1 {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--font-page-title);
  font-weight: 620;
  line-height: 1.15;
}

.intro-text { margin: .7rem 0 0; color: var(--color-light-text); line-height: 1.6; }
.intro-text > * { margin: 0; }
.intro-text > * + * { margin-top: var(--space-3); }

.game { line-height: 1.6; }
.game + .game { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-muted); }
.game-copy { overflow-wrap: anywhere; }
.game-title, .game-description, .game-description > p:first-child { display: inline; }
.game-title { margin: 0; color: var(--color-heading); font: inherit; font-weight: 620; }
.game-description > * { margin: 0; }
.game-description > * + * { margin-top: var(--space-3); }

.game-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  padding: 0;
  list-style: none;
  color: var(--color-text);
  font-size: .9em;
  line-height: 1.6;
}

.game-image-link { display: block; border-radius: .625rem; }
.game-image {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-background);
  border-radius: .625rem;
}
.game-copy + .game-image-link, .game-copy + .game-image { margin-top: var(--space-3); }

.page-content > h1 { margin-bottom: var(--space-4); }
.prose { line-height: 1.6; overflow-wrap: anywhere; }
.prose > * { margin: 0; }
.prose > * + * { margin-top: var(--space-3); }
.prose :is(h1, h2, h3, h4, h5, h6), .game-description :is(h1, h2, h3, h4, h5, h6) {
  color: var(--color-heading);
  font-weight: 620;
  line-height: 1.25;
}
.prose h1, .game-description h1 { font-size: var(--font-heading-1); }
.prose h2, .game-description h2 { font-size: var(--font-heading-2); }
.prose h3, .game-description h3 { font-size: var(--font-heading-3); }
.prose :is(h4, h5, h6), .game-description :is(h4, h5, h6) { font-size: 1em; }
.prose :is(ul, ol), .game-description :is(ul, ol) { padding-left: 1.5rem; }
.prose li + li, .game-description li + li { margin-top: var(--space-1); }
.prose :is(figure, blockquote), .game-description :is(figure, blockquote) { margin-inline: 0; }
.prose img, .game-description img { display: block; max-width: 100%; height: auto; border-radius: .625rem; }
.prose blockquote, .game-description blockquote { padding: .2rem 0 .2rem 1.25rem; border-left: 2px solid var(--color-muted); font-style: italic; }
.prose :is(video, iframe), .game-description :is(video, iframe) { width: 100%; aspect-ratio: 16 / 9; border: 0; }
.prose pre, .game-description pre { max-width: 100%; overflow-x: auto; }
.prose table, .game-description table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }

a {
  color: var(--color-link);
  text-decoration-line: none;
  text-decoration-style: wavy;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--color-link-hover); text-decoration-line: underline; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.skip-link { position: absolute; left: 1.25rem; top: -5rem; padding: .75rem 1rem; background: var(--color-background); z-index: 10; }
.skip-link:focus { top: 1rem; }