/* Memors studio site. One stylesheet for every page.
   The look comes from the two games: Chomp Swap's plum ink, cream paper and candy colours (Lilita One + Fredoka),
   and One Logic's starry navy, white brain and gold dot (Nunito). Light and dark follow the visitor's system setting. */

@font-face {
  font-family: 'Lilita One';
  src: url('/fonts/lilita-one-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/fredoka-latin-wght-normal.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-latin-800-normal.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Nunito';
  src: url('/fonts/nunito-latin-900-normal.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  /* Chomp Swap's palette (docs/ART_DIRECTION.md) */
  --ink: #2b1b2e;
  --cream: #fff3dc;
  --cream-hi: #fffaf0;
  --cream-lo: #e9d3ab;
  --banana: #ffb703;
  --banana-hi: #ffdc5e;
  --banana-lo: #d98a00;
  --tomato: #e63946;
  --tomato-hi: #ff6f73;
  --tomato-lo: #a81f2d;
  --mint: #2ec4b6;
  --mint-hi: #74eadc;
  --mint-lo: #14897e;
  --grape: #6a4c93;
  --grape-hi: #9a7cc7;
  --grape-lo: #46306a;
  --green: #3ccb5a;
  --green-lo: #1f8f3a;
  --flame: #ff7a18;

  /* One Logic's palette */
  --space: #0b1020;
  --space-2: #18203d;
  --moon: #f4efe6;
  --gold: #f7c548;
  --gold-hi: #fff1b8;
  --gold-lo: #c98a12;

  /* the page */
  --paper: #fff6e6;
  --panel: #fffaf0;
  --text: #2b1b2e;
  --muted: #6b5670;
  --line: #2b1b2e;
  --drop: #2b1b2e;
  --glow: rgba(255, 196, 61, 0.42);
  --foot: #2b1b2e;
  --foot-text: #fff3dc;

  --shout: 'Lilita One', 'Arial Rounded MT Bold', 'Trebuchet MS', sans-serif;
  --read: 'Fredoka', 'Arial Rounded MT Bold', 'Trebuchet MS', system-ui, sans-serif;
  --logic: 'Nunito', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --bw: 3px;
  --r: 28px;
  --wrap: 1120px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --pop: cubic-bezier(0.2, 1.5, 0.4, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1120;
    --panel: #261a2c;
    --text: #fff3dc;
    --muted: #cdb8cf;
    --line: #0c060f;
    --drop: #0c060f;
    --glow: rgba(255, 183, 3, 0.16);
    --foot: #100913;
    --foot-text: #fff3dc;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--read);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1,
h2,
h3 {
  font-family: var(--shout);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--banana);
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
a:hover {
  text-decoration-color: var(--tomato);
}

:focus-visible {
  outline: 3px solid var(--banana);
  outline-offset: 3px;
  border-radius: 10px;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus {
  top: 12px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

/* ---------- the studio mark: a gold dot (One Logic) with a bite out of it (Chomp Swap) ---------- */

.mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  flex: none;
}

/* ---------- top bar ---------- */

.topbar {
  position: relative;
  z-index: 10;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
}
.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.08em;
  font-family: var(--shout);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}
.brand .mark {
  width: 0.8em;
  height: 0.8em;
  margin: 0 0.02em;
  transform: translateY(-0.02em);
}
.nav {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 14px 4px 4px;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 4px 0 var(--drop);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: var(--text);
  text-decoration: none;
  transition: transform 0.15s var(--pop), box-shadow 0.15s;
}
.nav a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--drop);
}
.nav a:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--drop);
}
.nav a[aria-current='page'] {
  background: var(--banana-hi);
  color: var(--ink);
}
.nav img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--line);
}
.nav .nav-mail {
  padding: 4px 16px;
}
@media (max-width: 719px) {
  .nav a {
    padding: 4px;
  }
  .nav .label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .nav .nav-mail {
    padding: 4px 14px;
  }
  .nav .nav-mail .label {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
  }
}

/* ---------- buttons, pills ---------- */

.btn {
  --f: var(--banana);
  --f-hi: var(--banana-hi);
  --t: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 24px;
  border: var(--bw) solid var(--ink);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--f-hi) 0%, var(--f) 48%);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14), 0 5px 0 var(--ink);
  color: var(--t);
  font-family: var(--shout);
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform 0.15s var(--pop), box-shadow 0.15s;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.14), 0 7px 0 var(--ink);
}
.btn:active {
  transform: translateY(4px);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14), 0 1px 0 var(--ink);
}
.btn svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.btn--cream {
  --f: var(--cream);
  --f-hi: var(--cream-hi);
}
.btn--mint {
  --f: var(--mint);
  --f-hi: var(--mint-hi);
}
.btn--gold {
  --f: var(--gold);
  --f-hi: var(--gold-hi);
  border-color: var(--space);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12), 0 5px 0 #05070f;
  font-family: var(--logic);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn--gold:hover {
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.12), 0 7px 0 #05070f;
}
.btn--ghost-night {
  --f: rgba(255, 255, 255, 0.06);
  --f-hi: rgba(255, 255, 255, 0.12);
  --t: var(--moon);
  border-color: rgba(244, 239, 230, 0.7);
  box-shadow: none;
  font-family: var(--logic);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.btn--ghost-night:hover,
.btn--ghost-night:active {
  box-shadow: none;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.25;
}
.status .dot {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(60, 203, 90, 0.3);
  animation: pulse 2.2s ease-in-out infinite;
}
.status--night {
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(244, 239, 230, 0.32);
  color: var(--moon);
  font-family: var(--logic);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.status--night .dot {
  background: var(--gold);
  box-shadow: 0 0 10px 2px rgba(247, 197, 72, 0.7);
}
@keyframes pulse {
  50% {
    transform: scale(0.8);
    opacity: 0.75;
  }
}

/* ---------- home hero ---------- */

.hero {
  position: relative;
  padding: 40px 0 56px;
  text-align: center;
  isolation: isolate;
  overflow-x: clip;
}
.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -180px;
  width: min(1100px, 170vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--glow) 0%, transparent 62%);
  pointer-events: none;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--shout);
  font-size: clamp(68px, 19vw, 168px);
  line-height: 0.9;
  letter-spacing: 0.015em;
  color: var(--text);
}
.wordmark .mark {
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.035em;
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  50% {
    transform: translateY(-0.04em) rotate(-8deg);
  }
}
.hero .lead {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: clamp(20px, 4.8vw, 26px);
  font-weight: 500;
  line-height: 1.35;
}
.hero .sub {
  max-width: 560px;
  margin: 12px auto 0;
  color: var(--muted);
  font-size: 17px;
}
.hero-games {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}
.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 6px 20px 6px 6px;
  border: var(--bw) solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: 0 5px 0 var(--drop);
  color: var(--text);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  transition: transform 0.15s var(--pop), box-shadow 0.15s;
}
.chip-link img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 2px solid var(--line);
}
.chip-link:hover {
  transform: translateY(-2px) rotate(-1.5deg);
  box-shadow: 0 7px 0 var(--drop);
}

/* ---------- sections ---------- */

.section {
  padding: 48px 0;
}
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.section-title {
  font-size: clamp(36px, 8vw, 54px);
}
.section-title .tilt {
  display: inline-block;
  transform: rotate(-2deg);
}
.kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- game showcase cards (home) ---------- */

.games {
  display: grid;
  gap: 40px;
}
.game {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  padding: 28px 22px 0;
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 8px 0 var(--drop);
  overflow: hidden;
  isolation: isolate;
}
.game__text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.game__id {
  display: flex;
  align-items: center;
  gap: 14px;
}
.game__icon {
  width: 76px;
  height: 76px;
  border-radius: 22%;
  flex: none;
}
.game__pitch {
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  max-width: 34em;
}
.features {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.features li {
  position: relative;
  padding-left: 32px;
  font-size: 17px;
  line-height: 1.4;
}
.features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--banana) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%232b1b2e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat;
}
.features b {
  font-weight: 600;
}
.game__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

/* phones: real screenshots in a simple rounded frame */
.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 1170 / 2532;
  border: var(--bw) solid var(--ink);
  border-radius: 13% / 6%;
  background: var(--ink);
  overflow: hidden;
  box-shadow: 0 8px 0 rgba(43, 27, 46, 0.55);
}
.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game__phones {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 8px 0 0;
  margin: 0 -8px;
}
.game__phones .phone {
  width: min(42%, 196px);
  flex: none;
  margin: 0 -7%;
  margin-bottom: -18%;
}
.game__phones .phone:nth-child(1) {
  transform: rotate(-8deg) translateY(4%);
}
.game__phones .phone:nth-child(2) {
  z-index: 2;
  width: min(46%, 214px);
  transform: translateY(-4%);
}
.game__phones .phone:nth-child(3) {
  transform: rotate(8deg) translateY(4%);
}

/* Chomp Swap: the real game's living room, a warm wooden floor and its red rug with the diamond border */
.world-chomp {
  --text: var(--ink);
  --rug: 92px;
  color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 18'%3E%3Crect width='36' height='18' fill='%231f3c88'/%3E%3Cpath d='M18 2l9 7-9 7-9-7z' fill='%23fff3dc'/%3E%3Cpath d='M18 6l4 3-4 3-4-3z' fill='%23e63946'/%3E%3Ccircle cx='0' cy='9' r='2' fill='%23ffb703'/%3E%3Ccircle cx='36' cy='9' r='2' fill='%23ffb703'/%3E%3C/svg%3E") left 0 bottom calc(var(--rug) - 22px) / 44px 22px repeat-x,
    linear-gradient(180deg, transparent calc(100% - var(--rug) - 3px), #fff3dc calc(100% - var(--rug) - 3px) calc(100% - var(--rug)), #c8283a calc(100% - var(--rug))),
    repeating-linear-gradient(180deg, rgba(43, 27, 46, 0.1) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 230px, rgba(43, 27, 46, 0.04) 230px 460px),
    linear-gradient(180deg, #f0a865 0%, #e08d4f 55%, #d9824a 100%);
}
.world-chomp .phone {
  box-shadow: 0 8px 0 rgba(43, 27, 46, 0.45);
}
.world-chomp .game__icon {
  border: var(--bw) solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.world-chomp .status {
  background: var(--ink);
  color: var(--cream);
}
.game.world-chomp {
  border-color: var(--ink);
}

/* One Logic: deep space, stars, a white brain and a gold dot */
.world-logic {
  --text: var(--moon);
  color: var(--moon);
  font-family: var(--logic);
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 34%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(2px 2px at 78% 58%, rgba(255, 255, 255, 0.85) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 26%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 84%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 90%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 38% 94%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 66%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(ellipse 70% 60% at 22% 18%, rgba(84, 104, 190, 0.32), transparent 70%),
    radial-gradient(ellipse 60% 50% at 85% 90%, rgba(247, 197, 72, 0.1), transparent 70%),
    linear-gradient(180deg, #121a33 0%, #0b1020 55%, #070a15 100%);
  background-size: 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 100% 100%, 100% 100%, 100% 100%;
}
.game.world-logic {
  border-color: var(--line);
}
.world-logic .game__pitch,
.world-logic .features li {
  font-weight: 700;
}
.world-logic .features li::before {
  border: none;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi) 0%, var(--gold) 45%, var(--gold-lo) 100%);
  box-shadow: 0 0 10px 1px rgba(247, 197, 72, 0.6);
  width: 14px;
  height: 14px;
  left: 4px;
  top: 0.32em;
}
.world-logic .game__icon {
  border: 2px solid rgba(244, 239, 230, 0.35);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.world-logic .phone {
  border: 3px solid #e9e3d8;
  background: #f4f0ea;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.world-logic a:not(.btn) {
  text-decoration-color: var(--gold);
}

/* the ONE LOGIC wordmark: Nunito Black, two lines, the O of LOGIC a glowing gold dot */
.ol-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--logic);
  font-weight: 900;
  font-size: 54px;
  line-height: 0.98;
  letter-spacing: 0.035em;
  color: var(--moon);
}
.ol-word .ol-dot {
  display: inline-block;
  width: 0.74em;
  height: 0.74em;
  margin: 0 0.03em;
  border-radius: 50%;
  vertical-align: -0.04em;
  background: radial-gradient(circle at 36% 32%, #fffbe6 0%, var(--gold-hi) 18%, var(--gold) 50%, var(--gold-lo) 100%);
  box-shadow: 0 0 0.22em 0.04em rgba(247, 197, 72, 0.75), 0 0 0.7em 0.1em rgba(247, 197, 72, 0.3);
}
.ol-sub {
  font-family: var(--logic);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (min-width: 900px) {
  .game {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 48px 0 0 52px;
    min-height: 580px;
  }
  .game__text {
    padding-bottom: 48px;
  }
  .game__phones {
    align-self: end;
    margin: 0;
    padding-right: 24px;
  }
  .game__phones .phone {
    width: 190px;
    margin: 0 -26px -60px;
  }
  .game__phones .phone:nth-child(2) {
    width: 210px;
  }
  .game.flip {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    padding: 48px 52px 0 0;
  }
  .game.flip .game__phones {
    order: -1;
    padding: 0 0 0 24px;
  }
  .world-chomp {
    --rug: 128px;
  }
}

/* ---------- the CHOMP SWAP logo (the game's own, client/src/ui/logo.css) ---------- */

.cs-logo {
  --fs: 64px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--shout);
  font-size: var(--fs);
  line-height: 0.92;
  transform: rotate(-3deg);
  margin: 0.12em 0.18em 0.2em;
}
.cs-logo-word {
  position: relative;
  display: block;
}
.cs-logo-row {
  position: relative;
  display: block;
  white-space: nowrap;
}
.cs-logo-row.is-swap {
  margin-top: -0.03em;
  font-size: 1.06em;
}
.cs-logo-layer {
  display: flex;
  justify-content: center;
}
.cs-logo-layer + .cs-logo-layer {
  position: absolute;
  inset: 0;
}
.cs-lt {
  position: relative;
  display: inline-block;
  padding: 0.22em 0.25em;
  margin: -0.22em -0.235em;
  transform: translateY(var(--y)) rotate(var(--r));
  animation: csLtBob 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.11s);
}
.is-chomp .cs-lt:nth-child(1) { --i: 0; --r: -7deg; --y: 0.02em; }
.is-chomp .cs-lt:nth-child(2) { --i: 1; --r: 4deg; --y: -0.03em; }
.is-chomp .cs-lt:nth-child(3) { --i: 2; --r: -4deg; --y: 0.04em; }
.is-chomp .cs-lt:nth-child(4) { --i: 3; --r: 5deg; --y: -0.04em; }
.is-chomp .cs-lt:nth-child(5) { --i: 4; --r: -5deg; --y: 0.03em; }
.is-swap .cs-lt:nth-child(1) { --i: 5; --r: 5deg; --y: -0.02em; }
.is-swap .cs-lt:nth-child(2) { --i: 6; --r: -5deg; --y: 0.04em; }
.is-swap .cs-lt:nth-child(3) { --i: 7; --r: 4deg; --y: -0.03em; }
.is-swap .cs-lt:nth-child(4) { --i: 8; --r: -6deg; --y: 0.03em; }
@keyframes csLtBob {
  0%,
  100% {
    transform: translateY(var(--y)) rotate(var(--r)) scale(1, 1);
  }
  50% {
    transform: translateY(calc(var(--y) - 0.05em)) rotate(calc(var(--r) * 1.3)) scale(0.985, 1.025);
  }
}
.cs-logo-layer.is-sticker .cs-lt {
  color: var(--cream-hi);
  -webkit-text-stroke: 0.27em var(--cream-hi);
  text-shadow: 0 0.12em 0 var(--cream-hi);
}
.cs-logo-layer.is-ink .cs-lt {
  color: var(--ink);
  -webkit-text-stroke: 0.165em var(--ink);
  text-shadow: 0 0.095em 0 var(--ink);
}
.cs-logo-layer.is-fill .cs-lt {
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.is-chomp .cs-logo-layer.is-fill .cs-lt {
  background-image: linear-gradient(176deg, #fff4b0 8%, #ffd93d 30%, #ffb703 52%, #ff8f00 54%, #f57600 82%);
}
.is-swap .cs-logo-layer.is-fill .cs-lt {
  background-image: linear-gradient(176deg, #ffd0c4 8%, #ff7d7f 30%, #e63946 52%, #c81f35 54%, #a81630 82%);
}
.cs-lt.is-bitten {
  --bx: 73%;
  --by: 27%;
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect;
  -webkit-mask-image:
    radial-gradient(circle at calc(var(--bx) + 11%) calc(var(--by) + 10%), transparent var(--bite), #000 calc(var(--bite) + 1px)),
    radial-gradient(circle at calc(var(--bx) - 6%) calc(var(--by) - 7%), transparent var(--bite), #000 calc(var(--bite) + 1px)),
    radial-gradient(circle at calc(var(--bx) + 6%) calc(var(--by) - 3%), transparent var(--bite), #000 calc(var(--bite) + 1px));
  mask-image:
    radial-gradient(circle at calc(var(--bx) + 11%) calc(var(--by) + 10%), transparent var(--bite), #000 calc(var(--bite) + 1px)),
    radial-gradient(circle at calc(var(--bx) - 6%) calc(var(--by) - 7%), transparent var(--bite), #000 calc(var(--bite) + 1px)),
    radial-gradient(circle at calc(var(--bx) + 6%) calc(var(--by) - 3%), transparent var(--bite), #000 calc(var(--bite) + 1px));
}
.cs-logo-layer.is-sticker .cs-lt.is-bitten {
  --bite: 0.07em;
}
.cs-logo-layer.is-ink .cs-lt.is-bitten {
  --bite: 0.115em;
}
.cs-logo-layer.is-fill .cs-lt.is-bitten {
  --bite: 0.2em;
}
.cs-logo-crumbs {
  position: absolute;
  left: 55%;
  top: 0.04em;
  width: 0;
  height: 0;
}
.cs-logo-crumbs span {
  position: absolute;
  width: 0.09em;
  height: 0.09em;
  background: var(--banana);
  border: 0.022em solid var(--ink);
  border-radius: 30% 45% 40% 30%;
  animation: csCrumb 2.6s ease-in infinite;
}
.cs-logo-crumbs .c1 { --cx: 0.32em; --cy: -0.2em; animation-delay: 0s; }
.cs-logo-crumbs .c2 { --cx: 0.14em; --cy: -0.3em; animation-delay: 0.7s; width: 0.065em; height: 0.065em; }
.cs-logo-crumbs .c3 { --cx: 0.42em; --cy: -0.06em; animation-delay: 1.3s; width: 0.075em; height: 0.075em; }
.cs-logo-crumbs .c4 { --cx: 0.24em; --cy: -0.12em; animation-delay: 1.9s; width: 0.05em; height: 0.05em; }
@keyframes csCrumb {
  0% {
    transform: translate(0, 0.08em) scale(0.4) rotate(0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  55% {
    transform: translate(var(--cx), var(--cy)) scale(1) rotate(160deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(var(--cx) * 1.3), calc(var(--cy) + 0.34em)) scale(0.8) rotate(320deg);
    opacity: 0;
  }
}
.tagline-pill {
  display: inline-block;
  padding: 0.5em 1.1em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--cream);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  transform: rotate(-2.5deg);
  box-shadow: 0 4px 0 rgba(43, 27, 46, 0.35);
}

/* ---------- game pages ---------- */

.game-hero {
  position: relative;
  border-bottom: var(--bw) solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.game-hero .wrap {
  display: grid;
  gap: 26px;
  justify-items: center;
  text-align: center;
  padding-top: 34px;
}
.game-hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.game-hero .game__icon {
  width: 92px;
  height: 92px;
}
.game-hero .cs-logo {
  --fs: clamp(64px, 18vw, 132px);
}
.game-hero .ol-word {
  font-size: clamp(56px, 16vw, 96px);
}
.game-hero .ol-sub {
  font-size: clamp(15px, 3.8vw, 19px);
}
.game-hero__shots {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-top: 8px;
}
.game-hero__shots .phone {
  width: min(56vw, 250px);
  margin-bottom: -26%;
  transform: rotate(-3deg);
}
.world-logic.game-hero .game-hero__shots .phone {
  transform: rotate(3deg);
}
.game-hero__pad {
  height: 0;
}
@media (min-width: 900px) {
  .game-hero .wrap {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
    padding-top: 48px;
  }
  .game-hero__text {
    align-items: flex-start;
    padding-bottom: 56px;
  }
  .game-hero__shots {
    justify-content: center;
    align-self: end;
  }
  .game-hero__shots .phone {
    width: 270px;
    margin-bottom: -96px;
  }
}

.prose {
  max-width: 720px;
  font-size: 19px;
  line-height: 1.6;
}
.prose p + p {
  margin-top: 14px;
}

.steps {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.step {
  position: relative;
  padding: 22px 22px 22px 86px;
  border: var(--bw) solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 6px 0 var(--drop);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border: var(--bw) solid var(--ink);
  border-radius: 50%;
  background: var(--step, var(--banana));
  color: var(--ink);
  font-family: var(--shout);
  font-size: 28px;
  line-height: 1;
}
.step:nth-child(2) {
  --step: var(--tomato-hi);
}
.step:nth-child(3) {
  --step: var(--mint-hi);
}
.step h3 {
  font-size: 30px;
  margin-bottom: 6px;
}
.step p {
  font-size: 17px;
}
@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .step {
    padding: 86px 24px 26px;
  }
  .step::before {
    left: 22px;
    top: 22px;
  }
}

.tiles {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tile {
  position: relative;
  padding: 22px 22px 22px;
  border: var(--bw) solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  box-shadow: 0 6px 0 var(--drop);
  overflow: hidden;
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: var(--tile, var(--banana));
  border-bottom: var(--bw) solid var(--line);
}
.tile:nth-child(6n + 2) {
  --tile: var(--tomato);
}
.tile:nth-child(6n + 3) {
  --tile: var(--mint);
}
.tile:nth-child(6n + 4) {
  --tile: var(--grape-hi);
}
.tile:nth-child(6n + 5) {
  --tile: var(--green);
}
.tile:nth-child(6n + 6) {
  --tile: var(--flame);
}
.tile h3 {
  margin-top: 10px;
  margin-bottom: 8px;
  font-size: 25px;
}
.tile p {
  font-size: 16.5px;
  color: var(--text);
}

/* One Logic's tiles: night cards with a gold rule */
.page-logic .tile {
  background: linear-gradient(180deg, #151d38, #0e1428);
  border-color: #05070f;
  box-shadow: 0 6px 0 #05070f;
  color: var(--moon);
  font-family: var(--logic);
}
.page-logic .tile::before {
  height: 4px;
  border: 0;
  background: linear-gradient(90deg, var(--gold-lo), var(--gold), var(--gold-hi), var(--gold), var(--gold-lo));
}
.page-logic .tile h3 {
  font-family: var(--logic);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.page-logic .tile p {
  color: var(--moon);
  font-weight: 700;
  font-size: 16px;
  opacity: 0.9;
}
.page-logic .section-title {
  font-family: var(--logic);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: clamp(28px, 6.4vw, 42px);
}

/* screenshot gallery: swipe on a phone, a row on a desktop */
.gallery {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(64vw, 250px);
  gap: 18px;
  margin: 0 calc(-1 * var(--gutter-r)) 0 calc(-1 * var(--gutter));
  padding: 6px var(--gutter-r) 22px var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--gutter);
  scrollbar-width: thin;
}
.gallery figure {
  margin: 0;
  scroll-snap-align: start;
}
.gallery figcaption {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
}
.page-logic .gallery figcaption {
  font-family: var(--logic);
  font-weight: 800;
}
.page-logic .gallery .phone {
  border-color: #d9d2c4;
  background: #f4f0ea;
  box-shadow: 0 12px 28px rgba(11, 16, 32, 0.28);
}
@media (min-width: 1100px) {
  .gallery {
    grid-auto-flow: row;
    grid-template-columns: repeat(var(--n, 5), 1fr);
    grid-auto-columns: auto;
    margin: 0;
    padding: 6px 0 22px;
    overflow: visible;
  }
}

.panel {
  display: grid;
  gap: 16px;
  padding: 26px 24px;
  border: var(--bw) solid var(--line);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: 0 6px 0 var(--drop);
}
.panel h2 {
  font-size: clamp(30px, 6.6vw, 40px);
}
.panel .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.page-logic .panel {
  background: linear-gradient(180deg, #151d38, #0e1428);
  border-color: #05070f;
  box-shadow: 0 6px 0 #05070f;
  color: var(--moon);
  font-family: var(--logic);
  font-weight: 700;
}
.page-logic .panel h2 {
  font-family: var(--logic);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-logic .panel a:not(.btn) {
  text-decoration-color: var(--gold);
}
.page-logic .prose {
  font-family: var(--logic);
  font-weight: 700;
}

.links-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-weight: 600;
}

/* ---------- contact block (home) ---------- */

.hello {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: 40px 22px;
  border: var(--bw) solid var(--line);
  border-radius: var(--r);
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 220, 94, 0.55), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(116, 234, 220, 0.45), transparent 42%),
    var(--panel);
  box-shadow: 0 8px 0 var(--drop);
}
.hello h2 {
  font-size: clamp(38px, 9vw, 60px);
}
.hello p {
  max-width: 520px;
  font-size: 18px;
}
.mail {
  font-family: var(--shout);
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing: 0.01em;
  word-break: break-all;
}
@media (prefers-color-scheme: dark) {
  .hello {
    background:
      radial-gradient(circle at 15% 20%, rgba(255, 183, 3, 0.18), transparent 40%),
      radial-gradient(circle at 85% 80%, rgba(46, 196, 182, 0.16), transparent 42%),
      var(--panel);
  }
}

/* ---------- policy pages ---------- */

.policy {
  max-width: 760px;
  padding-top: 24px;
  padding-bottom: 64px;
}
.policy h1 {
  font-size: clamp(40px, 9vw, 60px);
}
.policy .updated {
  margin-top: 10px;
  color: var(--muted);
  font-size: 16px;
}
.policy h2 {
  margin: 36px 0 12px;
  font-size: clamp(26px, 5.6vw, 32px);
}
.policy p,
.policy li {
  font-size: 17.5px;
  line-height: 1.6;
}
.policy p + p {
  margin-top: 12px;
}
.policy ul {
  margin: 0;
  padding-left: 1.2em;
}
.policy li {
  margin: 8px 0;
}
.policy li::marker {
  color: var(--banana-lo);
}
.policy .note {
  margin-top: 28px;
  padding: 16px 18px;
  border: var(--bw) solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 5px 0 var(--drop);
  font-size: 16.5px;
}
.policy .note a {
  font-weight: 600;
}
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin-bottom: 18px;
  font-weight: 600;
  font-size: 16px;
}
.crumbs span[aria-hidden] {
  color: var(--muted);
}

/* ---------- footer: dark in both themes, so the white RM signature can be written on it ---------- */

.footer {
  margin-top: 56px;
  background: var(--foot);
  color: var(--foot-text);
  padding: 56px 0 max(28px, env(safe-area-inset-bottom, 0px));
}
.footer .wrap {
  display: grid;
  gap: 26px;
  justify-items: center;
  text-align: center;
}
.footer .wordmark {
  font-size: clamp(54px, 15vw, 84px);
  color: var(--cream);
}
.footer .wordmark .mark {
  animation: none;
}
.footer .foot-line {
  margin-top: -8px;
  font-size: 17px;
  font-weight: 500;
  opacity: 0.85;
}
.sig {
  position: relative;
  width: 150px;
  margin-top: 64px;
  aspect-ratio: 996 / 655;
}
.sig canvas {
  position: absolute;
  pointer-events: none;
}
.sig img {
  width: 100%;
  height: 100%;
}
.footer nav {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: 760px;
}
@media (min-width: 640px) {
  .footer nav {
    grid-template-columns: repeat(3, 1fr);
  }
}
.footer h2 {
  margin-bottom: 8px;
  font-size: 22px;
  color: var(--banana-hi);
}
.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}
.footer a {
  color: var(--foot-text);
  text-decoration-color: rgba(255, 183, 3, 0.7);
}
.fine {
  display: grid;
  gap: 6px;
  font-size: 14.5px;
  opacity: 0.75;
}

/* ---------- 404 ---------- */

.lost {
  display: grid;
  gap: 18px;
  justify-items: center;
  text-align: center;
  padding: 60px 0 20px;
}
.lost .big {
  font-family: var(--shout);
  font-size: clamp(110px, 34vw, 220px);
  line-height: 0.9;
  display: inline-flex;
  align-items: center;
}
.lost .big .mark {
  width: 0.78em;
  height: 0.78em;
  margin: 0 0.04em;
}

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

/* ---------- One Logic's pages wear One Logic's own cream and navy ---------- */

.page-logic {
  --paper: #f4f0ea;
  --panel: #fbf8f3;
  --text: #1f2638;
  --muted: #5d6478;
  --line: #1f2638;
  --drop: #1f2638;
  --glow: rgba(247, 197, 72, 0.35);
  --foot: #070a15;
  --foot-text: #f4efe6;
}
@media (prefers-color-scheme: dark) {
  .page-logic {
    --paper: #0b1020;
    --panel: #151d38;
    --text: #f4efe6;
    --muted: #b8bfd3;
    --line: #05070f;
    --drop: #05070f;
    --glow: rgba(247, 197, 72, 0.14);
  }
}
.page-logic .policy h1,
.page-logic .policy h2 {
  font-family: var(--logic);
  font-weight: 900;
  letter-spacing: 0.02em;
}
.page-logic .policy p,
.page-logic .policy li {
  font-family: var(--logic);
  font-weight: 800;
}
.page-logic .policy li::marker {
  color: var(--gold-lo);
}
.page-logic .policy a {
  text-decoration-color: var(--gold);
}
.page-logic .footer .foot-line,
.page-logic .footer .fine {
  font-family: var(--read);
}
.gallery--6 {
  --n: 6;
}

/* pills wrap into two even lines on a narrow phone, never one lonely word */
.tagline-pill,
.status {
  text-wrap: balance;
}
/* on a laptop the Chomp Swap text stands on the wooden floor, above the rug */
@media (min-width: 900px) {
  .world-chomp {
    --rug: 100px;
  }
  .game.world-chomp .game__text,
  .game-hero.world-chomp .game-hero__text {
    padding-bottom: calc(var(--rug) + 30px);
  }
}

/* the signature is a button: tapping it writes it again, with the quill's sound */
.sig {
  appearance: none;
  display: block;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sig:focus-visible {
  outline-offset: 10px;
}
.sig-hint {
  position: absolute;
  right: -40px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 243, 220, 0.1);
  color: var(--banana-hi);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s, transform 0.4s var(--pop);
}
.sig-hint svg {
  width: 17px;
  height: 17px;
}
.sig.is-signed .sig-hint {
  opacity: 0.8;
  transform: scale(1);
}
.sig:hover .sig-hint,
.sig:focus-visible .sig-hint {
  opacity: 1;
}
.sig.no-sound .sig-hint {
  display: none;
}