@font-face {
  font-family: "Rubik";
  src: url("/assets/fonts/rubik.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --flint: #262424;
  --ash: #FDF8F5;
  --flame: #FB7714;
  --spark: #FDB62D;
  --page: #FFFFFF;
  --text: #262424;
  --muted: #6B6461;
  --link: #B04A0A;
  --focus: #B04A0A;
  --line: #D9D3CF;
  --band: #262424;
  --band-muted: #B8ADA6;
  --panel: #EEEAE7;
  --panel-muted: #5E5755;
  --footer: #262424;
  --stone: #262424;
  --stone-top: #3B3737;
  --stone-left: #332F2F;
  --glow: none;
  --board-bg: #FFFFFF;
  --board-line: #262424;
  --cell-line: #D9D3CF;
  --peer: #FFF4E3;
  --typed: #B04A0A;
  --ink: #262424;
  --on-light: block;
  --on-dark: none;
}

/* The dark tokens appear twice: for visitors who picked dark with the switch, and for
   visitors whose system is dark and who made no choice. Keep both blocks identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #262424;
  --text: #FDF8F5;
  --muted: #B8ADA6;
  --link: #FDB62D;
  --focus: #FDB62D;
  --line: #554E4C;
  --band: #3D3837;
  --panel: #3D3837;
  --panel-muted: #B8ADA6;
  --footer: #3D3837;
  --stone: #403B3A;
  --stone-top: #554E4C;
  --stone-left: #4A4442;
  --glow: radial-gradient(closest-side, rgba(251, 119, 20, .22), rgba(251, 119, 20, .07) 55%, rgba(251, 119, 20, 0));
  --board-bg: #262424;
  --board-line: #B8ADA6;
  --cell-line: #4A4442;
  --peer: rgba(253, 248, 245, .06);
  --typed: #FB7714;
  --ink: #FDF8F5;
  --on-light: none;
  --on-dark: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #262424;
    --text: #FDF8F5;
    --muted: #B8ADA6;
    --link: #FDB62D;
    --focus: #FDB62D;
    --line: #554E4C;
    --band: #3D3837;
    --panel: #3D3837;
    --panel-muted: #B8ADA6;
    --footer: #3D3837;
    --stone: #403B3A;
    --stone-top: #554E4C;
    --stone-left: #4A4442;
    --glow: radial-gradient(closest-side, rgba(251, 119, 20, .22), rgba(251, 119, 20, .07) 55%, rgba(251, 119, 20, 0));
    --board-bg: #262424;
    --board-line: #B8ADA6;
    --cell-line: #4A4442;
    --peer: rgba(253, 248, 245, .06);
    --typed: #FB7714;
    --ink: #FDF8F5;
    --on-light: none;
    --on-dark: block;
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "Rubik", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.6;
}

img { display: block; max-width: 100%; height: auto; }

.on-light { display: var(--on-light); }
.on-dark { display: var(--on-dark); }

a { color: var(--link); }
a:hover { color: var(--text); }

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

h1, h2, h3 { margin: 0; line-height: 1; text-wrap: balance; overflow-wrap: break-word; }
h2 { font-weight: 800; font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.02em; }
h3 { font-weight: 700; font-size: 24px; line-height: 1.2; }
p { margin: 0; }

.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.page > main { flex: 1 0 auto; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 24px); }

.skip {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--text);
  color: var(--page);
  font-weight: 700;
}
.skip:focus { top: 16px; color: var(--page); }

/* Header */

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  padding-block: 20px;
}
.site-header .brand { margin-right: auto; }

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: auto; }
.brand .brand-mark { height: 48px; }
.brand .brand-word { height: 30px; }

.site-nav { display: flex; gap: 28px; font-weight: 500; font-size: 17px; }
.site-nav a { color: var(--text); text-decoration: none; padding: 10px 2px; }
.site-nav a:hover { color: var(--link); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: none;
  color: var(--text);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--link); border-color: var(--link); }
.theme-toggle[hidden] { display: none; }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle .icon-moon { display: var(--on-light); }
.theme-toggle .icon-sun { display: var(--on-dark); }

/* Buttons */

.button {
  display: inline-block;
  padding: 16px 28px;
  border-radius: 12px;
  background: var(--flame);
  color: var(--flint);
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.button:hover { background: var(--spark); color: var(--flint); }

.button-dark { background: var(--flint); color: var(--ash); }
.button-dark:hover { background: var(--ash); color: var(--flint); }

.text-link {
  color: var(--text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.text-link:hover { color: var(--link); }

/* Hero */

/* Full width, so the ember glow and the sparks are clipped at the screen edge, never mid-page. */
.hero { overflow-x: clip; }

.hero-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  padding-top: 48px;
  padding-bottom: 112px;
}

.hero-text { flex: 1 1 520px; min-width: 0; }
.hero h1 { font-weight: 800; font-size: clamp(56px, 8.2vw, 124px); line-height: .92; letter-spacing: -0.035em; word-spacing: .05em; }
.lead { margin-top: 28px; max-width: 30em; font-size: 20px; color: var(--muted); }
.actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }

.hero-art { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: center; }

.stone { --focus: var(--spark); position: relative; width: min(470px, 100%); aspect-ratio: 1; }
.stone::before {
  content: "";
  position: absolute;
  inset: -24%;
  background: var(--glow);
  pointer-events: none;
}

.facet { position: absolute; inset: 0; }
.facet-base { background: var(--stone); clip-path: polygon(10% 16%, 46% 0, 90% 8%, 100% 52%, 86% 96%, 28% 100%, 0 62%); }
.facet-top { background: var(--stone-top); clip-path: polygon(46% 0, 90% 8%, 62% 30%); }
.facet-left { background: var(--stone-left); clip-path: polygon(0 62%, 10% 16%, 22% 52%); }
.facet-edge { background: var(--flame); clip-path: polygon(90% 8%, 100% 52%, 95% 28%); }

.mascot { position: absolute; left: 16%; top: 20%; width: 68%; }

.flint {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  transition: transform .2s ease;
}
.flint:enabled { cursor: pointer; }
.flint:enabled:hover { transform: translateY(-4px); }
.flint:enabled:active { transform: translateY(2px) scale(.98); }

.sparks { position: absolute; inset: 0; pointer-events: none; }
.sparks span {
  position: absolute;
  left: 46%;
  top: 30%;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.sparks .spark-s { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
.sparks .spark-m { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.sparks .spark-l { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.sparks .spark-orange { background: var(--flame); }
.sparks .spark-yellow { background: var(--spark); }

/* The hint only makes sense once the script has armed the flame. */
.hint { margin-top: 16px; font-size: 14px; color: var(--muted); visibility: hidden; }
.sparks-ready .hint { visibility: visible; }
.hint-touch { display: none; }
@media (hover: none) {
  .hint-hover { display: none; }
  .hint-touch { display: inline; }
}

/* How we make games */

.band {
  background: var(--band);
  color: var(--ash);
  clip-path: polygon(0 40px, 22% 0, 51% 32px, 79% 0, 100% 40px, 100% calc(100% - 40px), 76% 100%, 47% calc(100% - 32px), 21% 100%, 0 calc(100% - 40px));
  padding-block: 136px;
}

.promises { margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px; }
.promise h3 { margin: 24px 0 8px; }
.promise p { color: var(--band-muted); }

.promise-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.promise-icon svg { width: 30px; height: 30px; }
.icon-play { background: var(--flame); clip-path: polygon(18% 0, 100% 12%, 88% 100%, 0 84%); }
.icon-offline { background: var(--spark); clip-path: polygon(0 10%, 86% 0, 100% 82%, 12% 100%); }
.icon-fair { background: var(--ash); clip-path: polygon(10% 0, 100% 0, 90% 90%, 0 100%); }

/* Our first game */

.games {
  display: flex;
  flex-wrap: wrap-reverse;
  align-items: center;
  gap: 72px;
  padding-block: 128px;
}

.games-art { flex: 1 1 400px; min-width: 0; display: flex; justify-content: center; }
.games-text { flex: 1 1 400px; min-width: 0; }
.games-text .muted { margin-top: 24px; max-width: 32em; color: var(--muted); }
.status { margin-top: 28px; font-weight: 700; }

.board-wrap { position: relative; width: min(440px, 100% - 48px); }
.board-facet {
  inset: -7% -6% -8% -9%;
  background: var(--flame);
  clip-path: polygon(6% 0, 100% 7%, 94% 100%, 0 91%);
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  aspect-ratio: 1;
  border: 3px solid var(--board-line);
  background: var(--board-bg);
  color: var(--ink);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 26px);
  line-height: 1;
}
.board span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--cell-line);
  border-bottom: 1px solid var(--cell-line);
}
.board span:nth-child(9n+3), .board span:nth-child(9n+6) { border-right: 3px solid var(--board-line); }
.board span:nth-child(9n) { border-right: 0; }
.board span:nth-child(n+19):nth-child(-n+27), .board span:nth-child(n+46):nth-child(-n+54) { border-bottom: 3px solid var(--board-line); }
.board span:nth-child(n+73) { border-bottom: 0; }
.board .p { background: var(--peer); }
.board .t { color: var(--typed); }
.board .s { background: var(--spark); color: var(--flint); }

/* Studio and contact */

.studio { display: flex; flex-wrap: wrap; gap: 28px; padding-bottom: 128px; }
.studio h2 { font-size: clamp(32px, 4vw, 48px); line-height: 1.05; }

.panel {
  flex: 3 1 420px;
  min-width: 0;
  padding: 56px 48px;
  background: var(--panel);
  clip-path: polygon(0 0, 95% 0, 100% 20%, 100% 100%, 5% 100%, 0 80%);
}
.panel p { margin-top: 20px; max-width: 32em; color: var(--panel-muted); }

.contact {
  --focus: var(--flint);
  flex: 2 1 300px;
  min-width: 0;
  padding: 56px 48px;
  background: var(--flame);
  color: var(--flint);
  clip-path: polygon(0 9%, 9% 0, 100% 0, 100% 91%, 91% 100%, 0 100%);
}
.contact p { margin-top: 16px; }
.contact .button { margin-top: 28px; }
.contact-address { font-weight: 500; overflow-wrap: anywhere; }

/* Footer */

.site-footer {
  --focus: var(--spark);
  background: var(--footer);
  color: var(--band-muted);
  clip-path: polygon(0 32px, 28% 0, 63% 24px, 100% 0, 100% 100%, 0 100%);
  padding: 72px 0 28px;
  font-size: 15px;
}
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.site-footer .brand { gap: 10px; }
.site-footer .brand-mark { height: 36px; }
.site-footer .brand-word { height: 22px; }
.site-footer nav { display: flex; gap: 24px; }
.site-footer nav a { color: var(--band-muted); text-decoration: none; }
.site-footer nav a:hover { color: var(--spark); }

/* Legal pages and 404 */

.prose { max-width: 46rem; padding-block: 48px 112px; }
.prose h1 { font-weight: 800; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; }
.prose h2 { margin-top: 56px; font-size: clamp(28px, 3.4vw, 36px); line-height: 1.1; }
.prose h3 { margin-top: 32px; font-size: 20px; }
.prose p, .prose address { margin-top: 16px; }
.prose address { font-style: normal; }
.prose .meta { margin-top: 20px; color: var(--muted); }
.prose .translation { margin-top: 72px; padding-top: 8px; border-top: 3px solid var(--text); }

@media (max-width: 640px) {
  .hero-inner { padding-top: 24px; padding-bottom: 88px; gap: 40px; }
  .band { padding-block: 104px; }
  .games { padding-block: 96px; gap: 64px; }
  .studio { padding-bottom: 96px; }
  .panel, .contact { padding: 44px 28px; }
  .site-nav { order: 1; flex-basis: 100%; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}