/* Kettlehum website styles.
   Source file: tools/build_site.py copies it into upload/assets/ with a
   content hash in its name, and swaps every asset placeholder for a picture or font
   reference for the real (fingerprinted) address of that file. Colours come only from Warm Static's palette
   (WarmStatic/scripts/core/pal.gd). Text colour pairs are all at least 4.5:1.
   No inline styles anywhere: the site's Content-Security-Policy forbids them. */

@font-face {
  font-family: "Static Mono";
  src: url("/assets/static-mono.0737bd302b.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm Static palette */
  --ink: #1A1830;
  --plum-dark: #2B2140;
  --plum: #3D2F57;
  --plum-light: #5B4778;
  --night-blue: #3A3A52;
  --rain-blue: #4A5D9E;
  --rain-light: #7B8FD1;
  --sky-haze: #A9B6E8;
  --amber: #FFB35C;
  --amber-light: #FFD08A;
  --amber-dark: #D9822B;
  --cream: #F4E4C1;
  --cream-dark: #E2CDA0;
  --paper-shadow: #C9B48A;
  --white-warm: #FFF8EC;
  --walnut: #7A4E35;
  --walnut-dark: #53331F;
  --walnut-light: #A0704D;
  --phosphor: #6EE7C8;
  --phosphor-dark: #2F8F7E;
  --neon-pink: #FF6FA3;
  --neon-pink-dark: #B8406E;

  /* roles */
  --page: var(--plum-dark);
  --text: var(--cream);
  --text-soft: var(--sky-haze);
  --link: var(--phosphor);
  --focus: var(--phosphor);
  --gutter: 16px;
  --body-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --pixel-font: "Static Mono", ui-monospace, Menlo, Consolas, monospace;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--body-font);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
}

/* Pixel art: scale by whole numbers, keep the pixels square and sharp. */
.px {
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

h1,
h2,
h3,
.pixel {
  font-family: var(--pixel-font);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  -webkit-font-smoothing: none;
}

h1,
h2,
h3 {
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p,
ul,
ol {
  margin: 0 0 1em;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 3px;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.narrow {
  max-width: 760px;
}

/* ---------- skip link ---------- */
.skip {
  position: absolute;
  left: 8px;
  top: -200px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 10px 16px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  text-decoration: none;
  border: 2px solid var(--ink);
}

.skip:focus {
  top: 8px;
  outline-color: var(--white-warm);
}

/* ---------- header ---------- */
.site-head {
  position: relative;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(to bottom, rgba(61, 47, 87, 0.35) 0 1px, transparent 1px 4px);
  border-bottom: 4px solid var(--walnut);
  box-shadow: 0 4px 0 var(--walnut-dark);
  margin-bottom: 4px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.site-nav li:first-child {
  margin-right: auto;
}

@media (max-width: 599px) {
  .site-nav ul {
    gap: 0 20px;
    padding: 6px 0 4px;
  }

  .site-nav li:first-child {
    flex-basis: 100%;
  }

  .site-nav a {
    padding-left: 0;
    padding-right: 0;
  }
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 4px 8px;
  color: var(--cream);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  text-decoration: none;
  -webkit-font-smoothing: none;
}

.site-nav a:hover {
  color: var(--amber-light);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--amber);
  text-underline-offset: 0.35em;
}

/* The 32 px kettle is always drawn at exactly 2x (whole pixels only). On
   phones the logo has its own row, so it fits at 320 px. */
.site-nav .brand {
  padding-left: 0;
  font-size: 30px;
}

.brand img {
  width: 64px;
  height: 64px;
}

.brand[aria-current="page"] {
  text-decoration: none;
}

.w1 {
  color: var(--amber);
}

.w2 {
  color: var(--phosphor);
}

/* ---------- shared panels ---------- */
.section {
  padding: 40px 0 8px;
}

.section-title {
  font-size: 30px;
  color: var(--amber);
  text-shadow: 0 3px 0 var(--walnut-dark);
  margin-bottom: 20px;
}

.kicker {
  display: block;
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  color: var(--phosphor);
  margin: 0 0 6px;
  -webkit-font-smoothing: none;
}

.lede {
  font-size: 1.125rem;
  max-width: 62ch;
}

.soft {
  color: var(--text-soft);
}

/* Postcard paper: warm white, an ink edge, a dashed inner line and a hard
   pixel shadow. Text on it is ink (16:1); links are rain blue (5.9:1). */
.paper {
  position: relative;
  background: var(--white-warm);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  padding: 24px 20px;
  --link: var(--rain-blue);
  --focus: var(--plum);
}

.paper::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 2px dashed var(--cream-dark);
  pointer-events: none;
}

.paper > * {
  position: relative;
}

.paper h2,
.paper h3 {
  color: var(--plum);
}

.paper .soft {
  color: var(--plum);
}

.paper a:not(.btn) {
  color: var(--rain-blue);
}

.prose {
  max-width: 68ch;
}

.prose h2 {
  font-size: 20px;
  margin-top: 1.4em;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose > :last-child {
  margin-bottom: 0;
}

/* ---------- buttons and the "coming soon" badge ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 16px 0 4px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px 18px;
  background: var(--amber);
  color: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: inset -4px -4px 0 var(--amber-dark), 4px 4px 0 var(--ink);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  -webkit-font-smoothing: none;
}

.btn:hover {
  background: var(--amber-light);
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: inset -4px -4px 0 var(--amber-dark), 2px 2px 0 var(--ink);
}

.btn .arrow {
  font-family: var(--pixel-font);
}

.btn--quiet {
  background: var(--white-warm);
  box-shadow: inset -4px -4px 0 var(--cream-dark), 4px 4px 0 var(--ink);
}

.btn--quiet:hover {
  background: var(--cream);
}

.btn--quiet:active {
  box-shadow: inset -4px -4px 0 var(--cream-dark), 2px 2px 0 var(--ink);
}

/* Not a link: a dashed, flat label, so it never looks pressable. */
.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 9px 16px;
  background: var(--cream);
  color: var(--ink);
  border: 2px dashed var(--plum);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  -webkit-font-smoothing: none;
}

.soon .lamp {
  align-self: flex-start;
  color: var(--walnut);
}

.soon .soon-text {
  text-wrap: balance;
}

.testers {
  margin: 8px 0 0;
}

.testers a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}

/* ---------- home hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: var(--plum-dark);
  background-image:
    radial-gradient(circle at 50% 38%, rgba(91, 71, 120, 0.55) 0, rgba(61, 47, 87, 0.45) 120px, rgba(43, 33, 64, 0) 260px),
    url("/assets/rain.e9d7bf0ae6.png");
  background-size: auto, 96px 96px;
  image-rendering: pixelated;
  text-align: center;
  padding: 36px 0 44px;
}

.hero-kettle {
  position: relative;
  width: 128px;
  height: 128px;
  margin: 0 auto 12px;
}

.hero-kettle img {
  display: block;
  width: 128px;
  height: 128px;
}

/* the steam: 3 frames in one strip, shown one at a time */
.steam {
  position: absolute;
  inset: 0;
  background-image: url("/assets/steam-sheet.838aacfadd.png");
  background-repeat: repeat-x;
  background-size: 300% 100%;
  background-position: 0 0;
  image-rendering: pixelated;
  animation: steam 1.5s steps(3, end) 0.3s 3 forwards;
}

@keyframes steam {
  from { background-position: 0 0; }
  to { background-position: 150% 0; }
}

.wordmark {
  font-size: 40px;
  margin: 0 0 8px;
  text-shadow: 0 4px 0 var(--walnut-dark);
}

.wordmark .w2 {
  text-shadow: 0 4px 0 var(--phosphor-dark);
}

.tagline {
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  color: var(--cream);
  margin: 0 auto 16px;
  max-width: 20ch;
  text-wrap: balance;
  -webkit-font-smoothing: none;
}

.hero .intro {
  max-width: 40ch;
  margin: 0 auto;
  color: var(--cream);
}

/* ---------- the games shelf ---------- */
.shelf {
  position: relative;
  list-style: none;
  margin: 0 0 72px;
  padding: 0 0 6px;
  border-bottom: 10px solid var(--walnut);
  box-shadow: 0 4px 0 var(--walnut-dark);
}

.shelf::before {
  /* the shelf's lit front edge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  background: var(--walnut-light);
}

.shelf::after {
  /* a cat is napping on the shelf: only its tail shows */
  content: "";
  position: absolute;
  right: 14%;
  top: 100%;
  margin-top: 14px;
  width: 36px;
  height: 66px;
  background-image: url("/assets/tail-sheet.0f2e9a328d.png");
  background-size: 200% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  animation: tail-flick 1.2s steps(1, end) 1.6s 2;
}

@keyframes tail-flick {
  0% { background-position: 0 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

.shelf > li + li {
  margin-top: 32px;
}

.game-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 28px 20px 24px;
}

.game-card .stamp {
  position: absolute;
  top: -14px;
  right: 14px;
  width: 40px;
  height: 48px;
  transform: rotate(4deg);
}

.game-icon {
  display: block;
  width: 128px;
  height: 128px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.game-name {
  font-size: 20px;
  margin: 0 0 8px;
  padding-right: 32px;
}

.paper .game-name a {
  color: var(--plum);
  text-decoration-color: var(--amber-dark);
}

.paper .game-name a:hover {
  color: var(--ink);
}

.game-card p {
  margin-bottom: 8px;
}

.game-card .blurb {
  max-width: 60ch;
}

.game-tagline {
  font-size: 1.125rem;
}

/* ---------- game page head ---------- */
.game-head {
  padding: 24px 0 8px;
}

/* 776 = the picture at exactly 3x (768) plus the 4 px border on each side,
   so on screens 824 px and wider every source pixel is 3x3 screen pixels.
   The bottom margin leaves room for the 16 px frame and shadow below it. */
.hero-frame {
  margin: 0 0 44px;
  max-width: 776px;
  border: 4px solid var(--ink);
  outline: 4px solid var(--walnut);
  outline-offset: 0;
  box-shadow: 0 0 0 8px var(--walnut-dark), 8px 8px 0 8px var(--ink);
  background: var(--ink);
  line-height: 0;
}

.hero-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 256 / 125;
}

.title-block {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* Below 360 px, "Warm Static:" (12 characters at 30 px = 216 px) doesn't fit
   beside the icon, so the icon sits above the title instead. */
@media (max-width: 359px) {
  .title-block {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}

.title-text > :last-child {
  margin-bottom: 0;
}

.head-actions .actions {
  margin-top: 20px;
}

.title-block .game-icon {
  width: 64px;
  height: 64px;
  box-shadow: 3px 3px 0 var(--ink);
}

.game-title {
  margin: 0 0 10px;
  color: var(--amber);
  text-shadow: 0 3px 0 var(--walnut-dark);
}

.game-title .l1 {
  display: block;
  font-size: 30px;
}

.game-title .l2 {
  display: block;
  font-size: 20px;
  color: var(--phosphor);
  text-shadow: 0 2px 0 var(--phosphor-dark);
  margin-top: 4px;
}

.title-block .game-tagline {
  font-size: 1.1875rem;
  margin: 0 0 4px;
}

.platforms {
  color: var(--text-soft);
  margin: 0;
}

.head-actions .btn--quiet {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--cream);
  box-shadow: inset -4px -4px 0 var(--plum-dark), 4px 4px 0 var(--ink);
}

.head-actions .soon {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--sky-haze);
}

.head-actions .soon .lamp {
  color: var(--neon-pink);
}

/* on-this-page links */
.toc {
  margin: 28px 0 0;
}

.toc ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  background: var(--plum);
  color: var(--cream);
  border: 2px solid var(--plum-light);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  text-decoration: none;
  -webkit-font-smoothing: none;
}

.toc a:hover {
  border-color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* ---------- promises ---------- */
.promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.promises li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--plum);
  color: var(--cream);
  border: 2px solid var(--plum-light);
  box-shadow: 4px 4px 0 var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
}

.promises img {
  flex: none;
  width: 30px;
  height: 30px;
}

/* ---------- features ---------- */
.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.features li {
  position: relative;
  padding-left: 26px;
}

.features li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 10px;
  height: 10px;
  background: var(--amber);
  border: 2px solid var(--walnut-dark);
}

.features strong {
  display: block;
  color: var(--plum);
}

/* ---------- screenshots ---------- */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shots figure {
  margin: 0;
}

.shots a {
  display: block;
  line-height: 0;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--ink);
}

.shots a:hover {
  border-color: var(--amber);
}

.shots img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
}

.shots figcaption {
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--cream);
}

.shots-note {
  margin-top: 16px;
}

/* ---------- updates (repair tickets) ---------- */
.updates {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 24px;
}

.paper.ticket {
  padding: 0;
}

.ticket-head {
  padding: 18px 20px 12px;
  border-bottom: 2px dashed var(--paper-shadow);
}

.ticket-head h3 {
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 6px;
}

.ver {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  background: var(--amber);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  -webkit-font-smoothing: none;
}

.ticket-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: 0;
  color: var(--plum);
  font-size: 0.9375rem;
}

.ticket ul {
  margin: 0;
  padding: 14px 20px 18px 40px;
  list-style: square;
}

.ticket li + li {
  margin-top: 6px;
}

.latest {
  display: inline-block;
  padding: 2px 8px;
  background: var(--plum);
  color: var(--cream);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  -webkit-font-smoothing: none;
}

.older {
  margin-top: 24px;
}

.older summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 16px;
  cursor: pointer;
  background: var(--plum);
  border: 2px solid var(--plum-light);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  list-style: none;
  -webkit-font-smoothing: none;
}

.older summary::-webkit-details-marker {
  display: none;
}

/* The arrow is decoration: the "/ ''" part gives it empty alt text, so
   screen readers say only "Older updates". The first line is a fallback for
   browsers that don't know that syntax. */
.older summary::before {
  content: "\2192";
  content: "\2192" / "";
  color: var(--amber);
}

.older[open] summary::before {
  content: "\2193";
  content: "\2193" / "";
}

.older summary:hover {
  border-color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.older[open] summary {
  margin-bottom: 24px;
}

/* ---------- coming next ---------- */
.peek-intro {
  max-width: 62ch;
}

.peek {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}

.peek-card {
  padding: 22px 20px 20px;
}

.peek-card h3 {
  font-size: 20px;
  margin: 12px 0 10px;
}

.peek-card ul {
  margin: 0;
  padding-left: 20px;
  list-style: square;
}

.peek-card p {
  margin: 0;
}

.label {
  display: inline-block;
  padding: 3px 10px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  -webkit-font-smoothing: none;
}

/* The first card is a blueprint, like the game's own Sneak Peek. */
.blueprint {
  background-color: var(--rain-blue);
  background-image:
    linear-gradient(rgba(169, 182, 232, 0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169, 182, 232, 0.22) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--white-warm);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
}

.blueprint::before {
  border-color: rgba(255, 248, 236, 0.45);
}

.blueprint h3 {
  color: var(--white-warm);
}

.blueprint .label {
  background: var(--amber);
}

.plans {
  text-wrap: balance;
  font-family: var(--pixel-font);
  font-size: 20px;
  line-height: 1.3;
  color: var(--amber);
  margin: 8px 0 6px;
  -webkit-font-smoothing: none;
}

/* ---------- links ---------- */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link-list li + li {
  margin-top: 4px;
}

.link-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}

/* ---------- plain pages (privacy, 404) ---------- */
.page-head {
  padding: 36px 0 20px;
}

.page-title {
  font-size: 30px;
  color: var(--amber);
  text-shadow: 0 3px 0 var(--walnut-dark);
  margin: 0;
}

.ticks {
  list-style: none;
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: 30px;
}

.ticks li + li {
  margin-top: 4px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 20px;
  height: 20px;
  background-image: url("/assets/check.6d2398ae07.png");
  background-size: 20px 20px;
  image-rendering: pixelated;
}

.updated {
  margin-top: 1.5em;
  color: var(--plum);
  font-size: 0.9375rem;
}

/* Top and bottom only, so .wrap keeps its side gutters on phones. */
.lost {
  text-align: center;
  padding-top: 40px;
  padding-bottom: 64px;
}

.lost .hero-kettle {
  margin-bottom: 20px;
}

.lost .page-title {
  margin-bottom: 16px;
}

.lost p {
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}

.lost .actions {
  justify-content: center;
}

.lost .btn--quiet {
  background: var(--plum);
  color: var(--cream);
  border-color: var(--cream);
  box-shadow: inset -4px -4px 0 var(--plum-dark), 4px 4px 0 var(--ink);
}

/* ---------- footer ---------- */
.site-foot {
  margin-top: 48px;
  background: var(--ink);
  border-top: 4px solid var(--walnut);
  box-shadow: 0 -4px 0 var(--walnut-dark);
  color: var(--cream);
  padding: 20px 0 28px;
  font-size: 1rem;
}

/* The copyright on the left, the links on the right. The links stay
   together on one line, so a separator dot is never left hanging when the
   footer wraps on a small phone. */
.site-foot p {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 24px;
}

.foot-links {
  display: inline-flex;
  align-items: center;
  gap: 0 10px;
  white-space: nowrap;
}

.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cream);
  text-decoration-color: var(--amber);
}

.site-foot a:hover {
  color: var(--amber-light);
}

.site-foot .sep {
  color: var(--sky-haze);
}

/* ---------- larger screens ---------- */
@media (min-width: 600px) {
  :root {
    --gutter: 24px;
  }

  body {
    font-size: 1.125rem;
  }

  .hero {
    padding: 40px 0 44px;
  }

  .hero-kettle,
  .hero-kettle img {
    width: 192px;
    height: 192px;
  }

  .wordmark {
    font-size: 60px;
    text-shadow: 0 6px 0 var(--walnut-dark);
  }

  .wordmark .w2 {
    text-shadow: 0 6px 0 var(--phosphor-dark);
  }

  .tagline {
    font-size: 30px;
    max-width: none;
  }

  .section-title,
  .page-title {
    font-size: 40px;
    text-shadow: 0 4px 0 var(--walnut-dark);
  }

  .paper {
    padding: 32px 32px;
  }

  .game-card {
    grid-template-columns: 128px 1fr;
    gap: 28px;
    padding: 32px;
  }

  .game-name {
    font-size: 30px;
  }

  .title-block {
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 24px;
  }

  .head-actions {
    padding-left: 152px;
  }

  .game-card .stamp {
    width: 60px;
    height: 72px;
    top: -20px;
  }

  .shelf::after {
    width: 48px;
    height: 88px;
  }

  .shelf {
    margin-bottom: 96px;
  }

  #games {
    padding-top: 28px;
  }

  .title-block .game-icon {
    width: 128px;
    height: 128px;
    box-shadow: 4px 4px 0 var(--ink);
  }

  .game-title .l1 {
    font-size: 50px;
  }

  .game-title .l2 {
    font-size: 30px;
    text-shadow: 0 3px 0 var(--phosphor-dark);
  }

  .promises {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ticket-head {
    padding: 22px 32px 14px;
  }

  .ticket ul {
    padding: 16px 32px 22px 52px;
  }

}

@media (min-width: 760px) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shots {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Wide screens: the hero sits on the left, with its outer wooden frame
   (8 px) lined up with the icon and title below it. 832 = 776 + 8 + 2 x 24. */
@media (min-width: 832px) {
  .hero-frame {
    margin-left: 8px;
  }
}

/* Tablets (760-1023 px) keep the 2-column promises and stacked Coming next
   cards; three or four columns would squeeze their words onto many lines.
   1024 is the narrowest width where the "In a future update" label fits on
   one line in a third-width card. */
@media (min-width: 1024px) {
  .peek {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .promises {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .promises li {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }
}

/* Short laptop and tablet-landscape screens: a smaller kettle, so the games
   shelf starts on the first screen. */
@media (min-width: 600px) and (max-height: 860px) {
  .hero .hero-kettle,
  .hero .hero-kettle img {
    width: 128px;
    height: 128px;
  }
}

/* Calm by request: no movement at all. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Windows high-contrast mode: keep edges and focus visible. */
@media (forced-colors: active) {
  .btn,
  .soon,
  .toc a,
  .label,
  .ver {
    border: 2px solid CanvasText;
  }

  .paper::before {
    display: none;
  }
}

@media print {
  .site-head,
  .site-foot,
  .toc,
  .skip,
  .steam,
  .shelf::after {
    display: none;
  }

  body,
  .paper {
    background: #FFF8EC;
    color: #1A1830;
    box-shadow: none;
  }
}