@font-face {
  font-family: "Source Serif Pro";
  src: url("/assets/source-serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
}
:root {
  --outer: max(1.25rem, 5vw);
  --large-space: clamp(4rem, 10vw, 8rem);
  --gap: 1.5rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-underline-offset: .25ch; text-decoration-thickness: 1px; }
a:hover { text-decoration-style: dashed; }
img { display: block; max-width: 100%; height: auto; }
p, figure, h1, h2 { margin: 0; }
svg { fill: currentColor; display: block; }
.wide, .narrow { width: calc(100% - 2 * var(--outer)); margin-inline: auto; }
.wide { max-width: 1000px; }
.narrow { max-width: 650px; }
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap);
  padding-top: var(--outer);
  padding-bottom: var(--large-space);
}
.brand { display: flex; align-items: center; gap: var(--gap); text-decoration: none; }
.brand img { width: 64px; height: 64px; }
.brand span { font-size: 28px; font-style: italic; font-weight: 400; }
.navigation { display: flex; align-items: center; gap: var(--gap); }
.navigation a, dialog nav a { text-decoration: none; }
.navigation a:hover, dialog nav a:hover { text-decoration: underline; }
.home-content, .document-main { margin-top: var(--gap); }
.home-content > * + * { margin-top: var(--gap); }
.game-intro { display: flex; align-items: center; gap: var(--gap); }
.game-icon { flex: 0 1 340px; min-width: 0; }
.game-icon img { width: 340px; border-radius: 36px; }
.game-description { flex: 0 1 650px; min-width: 0; }
.game-description h1 {
  font: 400 clamp(2.75rem, 6vw, 3.25rem)/1.2 "Source Serif Pro", serif;
}
.game-description p { margin-top: var(--gap); }
.store-links { display: flex; gap: var(--gap); }
.store-links a { flex: 1; min-width: 0; }
.store-links img { width: 100%; }
.discord-banner { display: block; }
.discord-banner img { width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.gallery img { width: 100%; aspect-ratio: 2048 / 2732; object-fit: cover; }
.gallery img:last-child { grid-column: 1 / -1; }
.emoji { display: inline; width: 1em; height: 1em; margin: 0 .07em; vertical-align: -.1em; }
.studio-emoji { text-align: center; font: 300 clamp(2.75rem, 6vw, 3.25rem)/1.2 "Source Serif Pro", serif; }
.studio-note { text-align: center; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap); padding-block: 4rem; }
.home .site-footer { padding-block: 1.25em; }
.home .site-footer p { font-size: 16px; font-style: italic; margin-top: 4px; }
.social-links { display: flex; gap: var(--gap); align-items: center; }
.social-links a { display: block; padding: 6px; }
.social-links a:hover { transform: scale(1.1); }
.page-heading h1 { font: 300 52px/1.15 "Source Serif Pro", serif; margin-bottom: clamp(2rem, 8vw, 6rem); }
.page-heading hr { border: 0; border-top: 2px solid #808080; margin: 0; }
.prose { padding-top: 80px; }
.prose > * + * { margin-top: var(--gap); }
.prose h2 { font: 700 18px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
.prose ul { padding-left: 40px; margin-bottom: 0; }
.prose p:empty { height: 0; }
.prose a { text-decoration: none; }
.prose a:hover { text-decoration: underline; }
.document .site-footer { margin-top: var(--gap); padding-top: var(--large-space); }
.icon-button { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; }
.menu-open { display: none; }
dialog { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--outer); border: 0; background: #000; color: #fff; }
dialog::backdrop { background: #000; }
dialog nav { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; padding-top: 48px; }
.menu-close { position: absolute; top: var(--outer); right: var(--outer); }
html:has(dialog[open]) { overflow: hidden; }
:focus-visible { outline: 2px solid #9fb347; outline-offset: 5px; }
.skip-link { position: absolute; top: 5px; left: 5px; transform: translateY(-150%); padding: 12px 20px; background: #fff; color: #000; z-index: 10; }
.skip-link:focus { transform: none; }
@media (max-width: 599px) {
  .js .navigation { display: none; }
  .js .menu-open { display: block; }
}