/* wickhouse.games
   The studio is a dark house with one red light. Each game is a room that brings its own:
   a room (and a game's own page) re-points the same handful of variables at that game's
   palette and display face, and everything inside follows. */

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/ibm-plex-sans-condensed-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/cinzel-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/montserrat-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('/fonts/syne-latin-wght-normal.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}
@font-face {
  font-family: 'UnifrakturMaguntia';
  src: url('/fonts/unifrakturmaguntia-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  src: url('/fonts/im-fell-english-latin-400-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --wick: #e8202a;
  --wick-deep: #5c0f14;

  --bg: #0b0b0c;
  --bg-raised: #151517;
  --fg: #f2f2f2;
  --muted: #aaa6a6;
  --seam: #2a2a2e;
  --accent: var(--wick);
  --accent-ink: #ffffff;
  --radius: 2px;
  --display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --display-weight: 900;
  --display-spacing: -0.01em;

  --body: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wide: 76rem;
  --measure: 38rem;
}

/* Obligate: chartreuse on blood. Syne, rounded like a membrane. */
.theme-obligate,
.room--obligate {
  --bg: #0d0409;
  --bg-raised: #1c0a13;
  --fg: #ece6ee;
  --muted: #b9a4b0;
  --seam: #3d1526;
  --accent: #d1ff73;
  --accent-ink: #141a05;
  --radius: 14px;
  --display: 'Syne', 'Montserrat', sans-serif;
  --display-weight: 800;
  --display-spacing: 0.01em;
}

/* Five Cells: one green lamp in a painted-block warehouse. Condensed grotesque, squared off. */
.theme-cells,
.room--cells {
  --bg: #0a0b09;
  --bg-raised: #14160f;
  --fg: #ede6d6;
  --muted: #9a9c86;
  --seam: #2a2e22;
  --accent: #6fe0b0;
  --accent-ink: #06150f;
  --radius: 2px;
  --display: 'IBM Plex Sans Condensed', 'Montserrat', sans-serif;
  --display-weight: 700;
  --display-spacing: 0.01em;
}

/* Only Way Down: lamp amber on limestone. Inscription capitals, cut square. */
.theme-descent,
.room--descent {
  --bg: #0a0806;
  --bg-raised: #14100c;
  --fg: #efe6d3;
  --muted: #a2967f;
  --seam: #2b2418;
  --accent: #e9be62;
  --accent-ink: #14100c;
  --radius: 0px;
  --display: 'Cinzel', 'Montserrat', serif;
  --display-weight: 700;
  --display-spacing: 0.06em;
}

/* Night Rounds: sign yellow on a navy night shift. The room-sign condensed, squared off. */
.theme-rounds,
.room--rounds {
  --bg: #0a0c10;
  --bg-raised: #10141b;
  --fg: #eceae2;
  --muted: #9aa1ad;
  --seam: #232a37;
  --accent: #e2b21c;
  --accent-ink: #14100a;
  --radius: 2px;
  --display: 'Barlow Condensed', 'Montserrat', sans-serif;
  --display-weight: 800;
  --display-spacing: 0.02em;
}

/* The Broken Order: candle amber on cold stone. Blackletter, square-cut. */
.theme-order,
.room--order {
  --bg: #070608;
  --bg-raised: #12100f;
  --fg: #e9e0cf;
  --muted: #a89c88;
  --seam: #33291c;
  --accent: #e2b36a;
  --accent-ink: #160f05;
  --radius: 0px;
  --display: 'UnifrakturMaguntia', 'Montserrat', serif;
  --display-weight: 400;
  --display-spacing: 0;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 1.0625rem;
  font-weight: 450;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  line-height: 1.08;
  text-wrap: balance;
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
a:hover {
  color: var(--accent);
}

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

code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.92em;
}

.skip {
  position: absolute;
  left: -999rem;
  top: 0;
  z-index: 10;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--accent-ink);
}
.skip:focus {
  left: 0;
}

/* The field only a bot fills in. */
.trap {
  position: absolute;
  left: -999rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- masthead ---------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.25rem var(--gutter);
}

.masthead__home {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.masthead__home:hover {
  color: inherit;
}

.masthead__mark,
.footer__mark {
  display: block;
  width: 2.1rem;
  aspect-ratio: 900 / 936;
  background: var(--wick);
  -webkit-mask: url('/img/mark.png') center / contain no-repeat;
  mask: url('/img/mark.png') center / contain no-repeat;
}

.masthead__name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
  font-size: 0.98rem;
}
.masthead__nav a {
  display: inline-block;
  padding: 0.35rem 0;
  text-decoration: none;
}
.masthead__nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

/* ---------- hero: the wolf wakes ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--gutter);
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2rem, 7vw, 6rem) var(--gutter) clamp(3rem, 8vw, 7rem);
}

.hero__text {
  grid-column: 1;
  grid-row: 1;
}

.hero__title {
  font-size: clamp(2.7rem, 6.7vw, 6.3rem);
  letter-spacing: -0.015em;
  line-height: 0.95;
  text-transform: uppercase;
  padding-bottom: 0.18em;
  border-bottom: 0.07em solid var(--wick);
  width: fit-content;
}

.hero__tagline {
  margin: 1.1rem 0 1.6rem;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  color: var(--muted);
}

.hero__intro {
  max-width: var(--measure);
  margin: 0;
  font-size: 1.125rem;
}

/* A demo that is out: one line under the introduction, the first thing with a colour on it. */
.hero__news {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  max-width: var(--measure);
  margin: 1.8rem 0 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--seam);
  border-left: 4px solid var(--wick);
  background: var(--bg-raised);
  font-weight: 700;
}
.hero__news-tag {
  padding: 0.15rem 0.55rem;
  background: var(--wick);
  color: #ffffff;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero__news-play {
  margin-left: auto;
  font-weight: 600;
}

.hero__mark {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  width: 100%;
  max-width: 30rem;
  justify-self: end;
  aspect-ratio: 900 / 936;
  filter: drop-shadow(0 0 2.2rem rgba(232, 32, 42, 0.28));
}

.hero__head,
.hero__eyes,
.hero__head::after {
  position: absolute;
  inset: 0;
  display: block;
}

/* Unlit, the head is only just there. */
.hero__head {
  background: #1b1b1f;
  -webkit-mask: url('/img/mark-head.png') center / contain no-repeat;
  mask: url('/img/mark-head.png') center / contain no-repeat;
}

/* The light climbs from the jaw to the ears. */
.hero__head::after {
  content: '';
  background: linear-gradient(to top, var(--wick) 0%, var(--wick) 45%, #a3141c 100%);
  animation: catch 1.5s cubic-bezier(0.3, 0, 0.2, 1) 1s both;
}

.hero__eyes {
  background: #ff3640;
  -webkit-mask: url('/img/mark-eyes.png') center / contain no-repeat;
  mask: url('/img/mark-eyes.png') center / contain no-repeat;
  animation: eyes 0.9s linear 0.25s both;
}

@keyframes eyes {
  0% { opacity: 0; }
  30% { opacity: 1; }
  42% { opacity: 0.25; }
  55% { opacity: 1; }
  63% { opacity: 0.6; }
  100% { opacity: 1; }
}

@keyframes catch {
  from { clip-path: inset(100% 0 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* ---------- the games: one room each ---------- */

.rooms__title {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter) 1.5rem;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
}

.room {
  background: var(--bg);
  color: var(--fg);
}

.room--obligate {
  background:
    radial-gradient(60rem 30rem at 18% 40%, rgba(122, 22, 52, 0.55), transparent 70%),
    radial-gradient(40rem 26rem at 95% 90%, rgba(90, 18, 38, 0.5), transparent 70%),
    var(--bg);
}

.room--order {
  background:
    radial-gradient(46rem 26rem at 82% 100%, rgba(214, 138, 52, 0.2), transparent 70%),
    radial-gradient(30rem 20rem at 8% 0%, rgba(40, 52, 96, 0.22), transparent 70%),
    var(--bg);
}

.room__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4.5rem);
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) var(--gutter);
}

/* The second lit room is hung the other way round. */
.room--order .room__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.room--order .room__media {
  order: 2;
}

.clip {
  width: 100%;
  aspect-ratio: 552 / 310;
  object-fit: cover;
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  border-radius: var(--radius);
}

.room--obligate .clip,
.theme-obligate .clip {
  border-color: rgba(209, 255, 115, 0.35);
  box-shadow: 0 0 0 6px rgba(209, 255, 115, 0.05);
}

.room__title {
  font-size: clamp(2.3rem, 5vw, 4rem);
  color: var(--accent);
}
.room__title a {
  text-decoration: none;
}
.room__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.room--obligate .room__title,
.theme-obligate .game__title {
  /* Syne at 800 is very wide; it needs a smaller size than the other faces to fit the same column */
  font-size: clamp(1.9rem, 3.8vw, 3.1rem);
  text-transform: uppercase;
  text-shadow: 0 0 1.6rem rgba(209, 255, 115, 0.35);
}

.room--order .room__title,
.theme-order .game__title {
  color: #efe6d2;
  font-size: clamp(2.7rem, 5.8vw, 4.6rem);
  line-height: 1;
}

.room__tagline,
.game__tagline {
  margin: 0.7rem 0 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.room--cells .room__title,
.theme-cells .game__title {
  /* Condensed at 700 fits a lot on a line; give it the room the grotesque was drawn for */
  font-size: clamp(2.6rem, 5.6vw, 4.4rem);
  text-transform: uppercase;
  color: #ede6d6;
  text-shadow: 0 0 1.8rem rgba(111, 224, 176, 0.18);
}

.room--rounds .room__title,
.theme-rounds .game__title {
  /* the room signs in the wing: condensed capitals, off-white on navy */
  font-size: clamp(2.7rem, 5.8vw, 4.6rem);
  line-height: 1;
  text-transform: uppercase;
  color: #eceae2;
}

.room--descent .room__title,
.theme-descent .game__title {
  /* Cinzel is wide and all-caps by design; it needs a smaller size and room to breathe */
  font-size: clamp(1.9rem, 3.9vw, 3.1rem);
  line-height: 1.12;
  color: #efe6d3;
}

.room--descent .room__tagline,
.theme-descent .game__tagline {
  width: fit-content;
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--accent);
}

.room--order .room__tagline,
.theme-order .game__tagline {
  width: fit-content;
  margin-top: 1.1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--accent);
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  color: var(--accent);
}

.room__badge {
  width: fit-content;
  margin: 0 0 0.9rem;
  padding: 0.2rem 0.65rem;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius);
}

.room__genre {
  margin: 1.4rem 0 0.4rem;
  font-weight: 700;
  color: var(--muted);
}

.room__pitch {
  max-width: var(--measure);
}

.room__status,
.game__status {
  margin: 0;
  font-weight: 700;
}

.room__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.room--unlit {
  --fg: #8e8a8a;
  --muted: #6d6a6a;
  background: #080809;
  border-top: 1px solid #17171a;
}
.room--unlit .room__inner {
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(3rem, 6vw, 5rem);
}
.room--unlit .room__title {
  color: #55535a;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}
.room--unlit .room__genre {
  margin-top: 0.8rem;
}

/* ---------- buttons and forms ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.55rem 1.3rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button:hover {
  color: var(--accent-ink);
  filter: brightness(1.12);
}

.button--quiet {
  background: transparent;
  color: var(--fg);
}
.button--quiet:hover {
  background: var(--accent);
  color: var(--accent-ink);
  filter: none;
}

.signup__label,
.form label {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 700;
}

.signup__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.signup__input,
.form input:not([type='checkbox']),
.form textarea,
.form select {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  font: inherit;
}
.signup__input {
  flex: 1 1 15rem;
  width: auto;
}
.signup__input::placeholder {
  color: var(--muted);
  opacity: 0.7;
}
.signup__input:focus-visible,
.form input:focus-visible,
.form textarea:focus-visible,
.form select:focus-visible {
  outline-offset: 0;
  border-color: var(--accent);
}

.form {
  display: grid;
  gap: 0.2rem;
  max-width: 34rem;
}
.form--wide {
  max-width: 52rem;
}
.form label {
  margin-top: 1rem;
}
.form .button {
  justify-self: start;
  margin-top: 1.5rem;
}
.form textarea {
  resize: vertical;
  line-height: 1.5;
}
.form .check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}
.form .check input {
  width: 1.15rem;
  height: 1.15rem;
  accent-color: var(--accent);
}
.optional {
  font-weight: 450;
  color: var(--muted);
}
.form__hint {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.95rem;
}
/* What a game's report button sent along, shown before it is sent. */
.form__sent-with {
  margin: 1.2rem 0 0;
  padding: 0.7rem 0.9rem;
  border: 1px dashed var(--seam);
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.9rem;
}
.form__sent-with span {
  display: block;
  margin-top: 0.2rem;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.form-error,
.notice {
  margin: 1rem 0;
  padding: 0.8rem 1rem;
  border-left: 4px solid var(--accent);
  background: var(--bg-raised);
  font-weight: 600;
}

/* ---------- bands on the home page ---------- */

.band {
  border-top: 1px solid var(--seam);
  background: var(--bg-raised);
}
.band--plain {
  background: transparent;
}

.band__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
}
.band__inner--split,
.band__inner--columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.5rem clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.band__inner--split {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: end;
}
.band h2 {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  margin-bottom: 0.8rem;
}
.band p:last-child {
  margin-bottom: 0;
}

.prose {
  max-width: var(--measure);
}
.prose h2,
.prose h3 {
  margin: 2em 0 0.6em;
}
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.25rem; }
.prose img {
  margin: 1.5rem 0;
  border: 1px solid var(--seam);
}
.prose blockquote {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
.prose pre {
  overflow-x: auto;
  padding: 1rem;
  background: var(--bg-raised);
  border: 1px solid var(--seam);
}
.prose li {
  margin-bottom: 0.4em;
}

.postlist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.postlist__item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--seam);
}
.postlist__item:first-child {
  padding-top: 0;
  border-top: 0;
}
.postlist__item time {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
}
.postlist__item a {
  font-weight: 800;
  font-size: 1.25rem;
}
.postlist__item p {
  margin: 0.3rem 0 0;
  max-width: var(--measure);
}
.postlist--full {
  max-width: 46rem;
  margin-top: 2.5rem;
}

/* ---------- plain pages ---------- */

.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(4rem, 8vw, 7rem);
}
.page--narrow {
  max-width: 44rem;
}
.page h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: 1.2rem;
}
.page h2 {
  font-size: 1.6rem;
  margin: 3rem 0 1rem;
}
.page__lede {
  max-width: var(--measure);
  font-size: 1.2rem;
  color: var(--muted);
}
.page__lede a {
  color: var(--fg);
}
.empty {
  padding: 1.5rem;
  border: 1px dashed var(--seam);
  color: var(--muted);
}

/* The public list of known issues, under the feedback form. */
.board {
  padding-top: 0;
}
.board h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.2rem;
}
.issues {
  margin: 0;
  padding: 0;
  list-style: none;
}
.issues__item {
  padding: 1rem 0;
  border-top: 1px solid var(--seam);
}
.issues__status {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--seam);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.issues__status--looking {
  border-color: var(--wick);
  color: var(--fg);
}
.issues__status--next,
.issues__status--fixed {
  border-color: #3f8f4f;
  color: #8fd79c;
}
.issues__summary {
  margin: 0.5rem 0 0.2rem;
  font-weight: 600;
}
.issues__meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.post__meta {
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.post__back {
  margin-top: 3rem;
}

.facts {
  margin: 0;
  display: grid;
  gap: 0;
}
.facts > div {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--seam);
}
.facts dt {
  font-weight: 700;
  color: var(--muted);
}
.facts dd {
  margin: 0;
}

.pressgames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pressgames img {
  border: 1px solid var(--seam);
  margin-bottom: 0.9rem;
}
.pressgames h3 {
  font-size: 1.3rem;
  margin-bottom: 0.4rem;
}
.pressgames__status {
  font-weight: 700;
}
.downloads {
  padding-left: 1.2rem;
}
.downloads li {
  margin-bottom: 0.4rem;
}

/* ---------- a game's own page ---------- */

.theme-obligate {
  background:
    radial-gradient(70rem 40rem at 15% 12rem, rgba(122, 22, 52, 0.5), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.theme-order {
  background:
    radial-gradient(60rem 34rem at 85% 22rem, rgba(214, 138, 52, 0.16), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.theme-cells {
  /* the caged sodium bulb, high on the left, the way the wall is lit */
  background:
    radial-gradient(52rem 30rem at 10% 9rem, rgba(226, 179, 106, 0.13), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.theme-rounds {
  /* the strip light over the corridor, cold and high on the right */
  background:
    radial-gradient(56rem 30rem at 88% 10rem, rgba(24, 44, 84, 0.55), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.theme-descent {
  /* a headlamp pool, low and central, falling off fast */
  background:
    radial-gradient(44rem 26rem at 50% 26rem, rgba(233, 190, 98, 0.10), transparent 72%),
    var(--bg);
  background-repeat: no-repeat;
}

.game__hero-inner,
.game__trailer,
.game__demo,
.game__posts,
.game__sections,
.game__shots,
.game__facts,
.game__follow {
  max-width: var(--wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.game__hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: clamp(2rem, 6vw, 5rem);
}

.game__title {
  font-size: clamp(2.6rem, 6.4vw, 5.2rem);
  color: var(--accent);
}
.game__pitch {
  margin: 1.4rem 0 1.2rem;
  font-size: 1.125rem;
  max-width: var(--measure);
}

.beat {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.beat:nth-child(even) .beat__media {
  order: 2;
}
.beat h2,
.game__shots h2,
.game__facts h2,
.game__follow h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
}
.beat p {
  max-width: var(--measure);
}
.game__report {
  margin-top: 1.5rem;
  color: var(--muted);
}

.game__feedback {
  max-width: var(--wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-block: 0 clamp(4rem, 8vw, 6rem);
}
.game__feedback h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
}
.game__feedback p {
  max-width: var(--measure);
}

.game__trailer {
  padding-block: clamp(1rem, 3vw, 2rem) clamp(2rem, 5vw, 3.5rem);
}
.game__trailer h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
}
.trailer {
  display: block;
  width: 100%;
  max-width: 64rem;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: #000;
}
.game__trailer-note {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Play the demo: what it is and the button on the left, how to get it running on the right. */
.game__demo {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-block: 1px solid var(--seam);
}
.game__demo h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
  color: var(--accent);
}
.game__demo h3 {
  font-size: 1.2rem;
  margin-bottom: 0.8rem;
}
.game__demo-lede {
  max-width: var(--measure);
  margin-bottom: 1.4rem;
}
.game__demo-steps ol {
  margin: 0;
  padding-left: 1.3rem;
}
.game__demo-steps li {
  margin-bottom: 0.7rem;
}
.game__demo-note {
  margin-top: 1.2rem;
  padding-left: 1rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}
/* A second way to play (the Windows download) sits under the first: across both columns
   while it is only a line saying it is coming, and as a second row once it is out. */
.game__demo-soon {
  grid-column: 1 / -1;
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--seam);
}
.game__demo-soon p {
  max-width: var(--measure);
  color: var(--muted);
}
.game__demo-second {
  padding-top: clamp(1.5rem, 4vw, 2.5rem);
  border-top: 1px solid var(--seam);
}
/* Barlow Condensed is narrow; at the size the other faces use, these small headings get lost. */
.theme-rounds .game__demo h3 {
  font-size: 1.5rem;
}

.game__posts {
  padding-block: clamp(2rem, 5vw, 3.5rem) 0;
}
.game__posts h2 {
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  margin-bottom: 1rem;
}

.game__shots {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.shots a {
  display: block;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  overflow: hidden;
}
.shots a:hover,
.shots a:focus-visible {
  border-color: var(--accent);
}
.shots img {
  width: 100%;
}

.game__facts {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.game__follow {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2.5rem, 6vw, 4rem);
}
.game__follow .signup {
  max-width: 34rem;
}

/* ---------- footer: back in the studio's own colours ---------- */

.footer {
  --bg: #0b0b0c;
  --fg: #f2f2f2;
  --muted: #aaa6a6;
  --seam: #2a2a2e;
  --accent: var(--wick);
  border-top: 1px solid var(--seam);
  background: var(--bg);
  color: var(--fg);
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem;
  align-items: center;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2.5rem var(--gutter);
}
.footer__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.footer__line {
  margin: 0;
  font-weight: 700;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 600;
}
.footer__legal {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ---------- admin ---------- */

.admin__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  align-items: center;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--seam);
  background: var(--bg-raised);
}
.admin__bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-weight: 600;
}
.admin__main {
  max-width: 70rem;
  margin: 0 auto;
  padding: 2rem var(--gutter) 5rem;
}
.admin__main h1 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.admin__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin__stats a {
  display: block;
  padding: 1.2rem;
  border: 1px solid var(--seam);
  background: var(--bg-raised);
  text-decoration: none;
}
.admin__stats strong {
  display: block;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.1;
}
.admin__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.admin__table th,
.admin__table td {
  padding: 0.6rem 0.8rem 0.6rem 0;
  border-bottom: 1px solid var(--seam);
  text-align: left;
  vertical-align: top;
}
.admin__table th {
  color: var(--muted);
}
.admin__hint {
  margin-top: 1.5rem;
  color: var(--muted);
}
.admin__messages {
  margin: 0;
  padding: 0;
  list-style: none;
}
.admin__messages li {
  padding: 1.2rem 0 1.2rem 1rem;
  border-top: 1px solid var(--seam);
  border-left: 4px solid transparent;
}
.admin__messages .is-unread {
  border-left-color: var(--accent);
}
.admin__meta {
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.admin__body {
  white-space: pre-wrap;
  max-width: 46rem;
}
.admin__actions {
  display: flex;
  gap: 0.6rem;
}
.admin__step {
  margin: 2.5rem 0 0.6rem;
  font-size: 1.25rem;
}
.button[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.admin__context {
  max-width: 46rem;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}
.admin__kind {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  color: var(--fg);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin__kind--bug {
  border-color: var(--accent);
  color: var(--accent);
}
/* Where a report stands, and the small form under it that says so and puts it on the public list. */
.admin__status {
  margin-left: 0.5rem;
  padding: 0.1rem 0.45rem;
  border: 1px solid var(--seam);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.admin__status--looking {
  border-color: var(--wick);
  color: var(--fg);
}
.admin__status--next,
.admin__status--fixed,
.admin__status--public {
  border-color: #3f8f4f;
  color: #8fd79c;
}
.admin__board {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  max-width: 46rem;
  margin-top: 0.9rem;
  padding: 0.8rem;
  border: 1px solid var(--seam);
  background: var(--bg-raised);
  font-weight: 600;
}
.admin__board select,
.admin__board input[type='text'] {
  min-height: 2.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
}
.admin__board input[name='fixed_in'] {
  width: 6rem;
}
.admin__board .admin__board-wide {
  flex: 1 1 100%;
}
.admin__board .check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.admin__filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.8rem;
  margin-bottom: 1.5rem;
  font-weight: 600;
}
.admin__filter select {
  min-height: 2.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  font: inherit;
}
.admin__filter .check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.admin__filter .check input {
  accent-color: var(--accent);
}
.admin__danger {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--seam);
}

/* The creator directory and one creator's page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.admin__filter input[type='text'],
.admin__filter input[type='search'],
.admin__filter input[type='number'] {
  min-height: 2.9rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  font: inherit;
  font-weight: 500;
}
.admin__filter input[type='number'] {
  width: 6rem;
}
.admin__filter input[type='text'] {
  width: 9rem;
}
.admin__filter-search {
  flex: 1 1 14rem;
}
.admin__count {
  margin-bottom: 1rem;
  color: var(--muted);
}
.admin__count a {
  margin-left: 0.6rem;
}
.admin__none {
  color: var(--muted);
  font-weight: 450;
}
.admin__table--creators td:first-child {
  min-width: 10rem;
}
.admin__table--creators a {
  color: var(--fg);
}
.admin__table .is-flagged td:first-child {
  box-shadow: inset 4px 0 0 var(--wick);
  padding-left: 0.6rem;
}
.admin__flags {
  display: block;
  margin-top: 0.15rem;
  color: var(--wick);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* One small badge per channel: platform, its headline number, a check mark once verified. */
.admin__platforms {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}
.admin__platform {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.admin__platform.is-verified {
  border-color: #3f8f4f;
}
.admin__platform-n {
  color: var(--muted);
  font-weight: 500;
}
.admin__platform-check {
  color: #8fd79c;
}
.admin__creator-head .pill {
  margin-right: 0.4rem;
}
.admin__table--channels td:last-child {
  min-width: 18rem;
}
.admin__table--channels .admin__context {
  display: block;
  margin-top: 0.1rem;
}
.admin__verified,
.admin__unverified {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}
.admin__verified {
  color: #8fd79c;
}
.admin__unverified {
  color: var(--muted);
}
/* A small form inside a table cell: one field and a button or two, on one line while it fits. */
.admin__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.admin__inline input[type='text'] {
  flex: 1 1 12rem;
  min-height: 2.2rem;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
}
.admin__inline .button {
  min-height: 2.2rem;
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem;
}
/* The checklist beside the decision, so the reviewer reads it before pressing anything. */
.admin__decision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: start;
  max-width: 70rem;
}
.admin__checklist {
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--wick);
  background: var(--bg-raised);
}
.admin__checklist h3 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.admin__checklist ul {
  margin: 0;
  padding-left: 1.2rem;
}
.admin__checklist li {
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
}
.admin__decide {
  max-width: none;
}
.admin__decide p {
  margin: 0;
}
.admin__decide .admin__hint {
  margin-top: 0.8rem;
  font-size: 0.9rem;
}
.admin__actions--wrap {
  flex-wrap: wrap;
  margin: 1rem 0;
}
.admin__decide .button {
  margin-top: 0;
}
.admin__notes .button {
  margin-top: 1.2rem;
}
.admin__decide .check {
  margin-top: 0.2rem;
}
.admin__main .empty {
  max-width: 46rem;
}
@media (max-width: 52rem) {
  .admin__decision {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- narrow screens ---------- */

@media (max-width: 52rem) {
  .hero,
  .room__inner,
  .game__hero-inner,
  .beat,
  .game__facts,
  .band__inner--split,
  .band__inner--columns {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__mark {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    max-width: 11rem;
  }
  .hero__text {
    grid-row: 2;
  }
  .hero__title {
    font-size: clamp(2.5rem, 13.2vw, 5rem);
  }

  .room--order .room__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .room--order .room__media,
  .beat:nth-child(even) .beat__media {
    order: 0;
  }
  .game__hero-media {
    order: -1;
  }

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
  .facts > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }
  .game__demo {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero__news-play {
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero__head::after,
  .hero__eyes {
    animation: none;
  }
}

/* Blackletter reads a size smaller than it is set. */
.theme-order .beat h2,
.theme-order .game__demo h2,
.theme-order .game__posts h2,
.theme-order .game__shots h2,
.theme-order .game__facts h2,
.theme-order .game__follow h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
}

/* ---------- what has happened so far: a dated log, never a scorecard ---------- */

.devlog-log {
  max-width: var(--wide);
  margin: 3.5rem auto 0;
  padding: 0 1.25rem;
}
.devlog-log h2 {
  margin: 0 0 1.4rem;
}
.devlog-log__items {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--seam);
}
.devlog-log__items > li {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--seam);
}
.devlog-log__date {
  font-family: var(--display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-spacing);
  font-size: 0.95rem;
  color: var(--accent);
  padding-top: 0.1rem;
  font-variant-numeric: tabular-nums;
}
.devlog-log__what {
  margin: 0;
  max-width: var(--measure);
}
.devlog-log__link {
  margin: 0.4rem 0 0;
}
.devlog-log__link a {
  color: var(--accent);
}

@media (max-width: 40rem) {
  .devlog-log__items > li {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
}

/* ---------- the creator network ---------- */

.creators__signed-in {
  margin: 0 0 1rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
  font-size: 0.95rem;
}
.creators .room__actions {
  margin: 1.5rem 0 0;
}
.creators .prose ul {
  padding-left: 1.2rem;
}
.creators .prose li {
  margin-bottom: 0.5rem;
}
.creators__games li {
  margin-bottom: 0.4rem;
}
.creators__status {
  color: var(--muted);
}
.creators__aside {
  margin-top: 2rem;
  color: var(--muted);
}

/* Questions and answers, each a definition. */
.faq {
  margin: 0;
  max-width: var(--measure);
}
.faq > div {
  padding: 1rem 0;
  border-top: 1px solid var(--seam);
}
.faq > div:last-child {
  border-bottom: 1px solid var(--seam);
}
.faq dt {
  margin-bottom: 0.3rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
}
.faq dd {
  margin: 0;
  color: var(--muted);
}
.faq dd a {
  color: var(--fg);
}

/* Where an application stands: one small pill after the name. */
.pill {
  display: inline-block;
  vertical-align: middle;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--seam);
  border-radius: 1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.pill--pending {
  border-color: var(--wick);
  color: var(--fg);
}
.pill--approved {
  border-color: #3f8f4f;
  color: #8fd79c;
}

/* The application. Its sections are headed inside the form. */
.apply h2 {
  margin: 2.5rem 0 0.2rem;
  font-size: 1.4rem;
}
.apply h2:first-child {
  margin-top: 0.5rem;
}
.apply .form__hint {
  max-width: var(--measure);
}
.form-error ul {
  margin: 0;
  padding-left: 1.2rem;
  font-weight: 500;
}
.form-error p {
  margin-bottom: 0.4rem;
}

/* Short fields side by side on a wide screen; the media query below stacks them. */
.fields {
  display: grid;
  gap: 0 1.2rem;
}
.fields--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fields--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* One block per platform, two abreast on a wide screen. */
.channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.channel {
  margin: 0;
  padding: 0.9rem 1rem 1.1rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.channel legend {
  padding: 0 0.4rem;
  font-family: var(--display);
  font-weight: 800;
}
.channel label {
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.channel input {
  background: var(--bg);
}
.channel__counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 0.8rem;
}
.channel__counts label {
  font-weight: 600;
  color: var(--muted);
}

/* With mail switched off, the link that would have been emailed. Never seen in production. */
.notice--dev {
  border-left-style: dashed;
  overflow-wrap: anywhere;
}

@media (max-width: 52rem) {
  .channels,
  .fields--2,
  .fields--3 {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 30rem) {
  .channel__counts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- the creator dashboard ---------- */

/* The name and the status pill on one line. */
.dashboard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.dashboard__head h1 {
  margin-bottom: 0;
}
.dashboard__head .pill {
  font-size: 0.85rem;
}
.pill--waitlisted {
  border-color: var(--muted);
  color: var(--fg);
}
.pill--declined {
  color: var(--muted);
}

/* What the status means, under the name. The left edge takes the pill's colour. */
.dashboard__status {
  max-width: var(--measure);
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--seam);
  background: var(--bg-raised);
}
.dashboard__status p {
  margin: 0 0 0.6rem;
}
.dashboard__status p:last-child {
  margin-bottom: 0;
}
.dashboard__status--pending {
  border-left-color: var(--wick);
}
.dashboard__status--approved {
  border-left-color: #3f8f4f;
}

/* Each section is a heading and either a list or one .empty line. */
.dashboard__section .empty {
  margin: 0;
  max-width: 46rem;
  padding: 1rem 1.2rem;
}
.dashboard h3 {
  margin: 2rem 0 0.6rem;
  font-size: 1.15rem;
}
.dashboard__actions {
  margin: 1.5rem 0 0;
}
.dashboard__signout {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--seam);
}
.dashboard__signout .button {
  margin-top: 0;
}

/* The profile as it is stored: a term and its value per line. */
.summary {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 0 1.5rem;
  margin: 0;
  max-width: 46rem;
}
.summary > div {
  display: contents;
}
.summary dt,
.summary dd {
  padding: 0.55rem 0;
  border-top: 1px solid var(--seam);
}
.summary dt {
  font-weight: 700;
}
.summary dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.summary__lines {
  white-space: pre-line;
}
.summary__none {
  color: var(--muted);
  font-weight: 450;
}

/* One channel per row: platform, link, the numbers, and whether the studio has checked them. */
.channel-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 46rem;
}
.channel-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) auto;
  grid-template-areas:
    'platform link verified'
    'platform numbers verified';
  gap: 0.15rem 1rem;
  align-items: start;
  padding: 0.8rem 0;
  border-top: 1px solid var(--seam);
}
.channel-row:last-child {
  border-bottom: 1px solid var(--seam);
}
.channel-row__platform {
  grid-area: platform;
  font-family: var(--display);
  font-weight: 800;
}
.channel-row__link {
  grid-area: link;
  overflow-wrap: anywhere;
}
.channel-row__link a {
  color: var(--fg);
}
.channel-row__numbers {
  grid-area: numbers;
  color: var(--muted);
  font-size: 0.95rem;
}
.channel-row__verified {
  grid-area: verified;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.channel-row__verified--yes {
  color: #8fd79c;
}
.channel-row__verified--no {
  color: var(--muted);
}

/* The profile form: the address that cannot be changed, and the two buttons under the form. */
.form input[readonly] {
  color: var(--muted);
  border-style: dashed;
}
.form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.form__actions .button {
  margin-top: 0;
}

@media (max-width: 40rem) {
  .summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .summary dd {
    padding-top: 0;
    border-top: 0;
  }
  .channel-row {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'platform'
      'link'
      'numbers'
      'verified';
  }
  .channel-row__verified {
    white-space: normal;
  }
}


/* ---------- campaigns: the creator's side ---------- */

/* Where an assignment stands. The lifecycle's colours: waiting is muted, on the campaign is
   the approved green, done and paid are brighter, declined and withdrawn fade. */
.pill--a-invited,
.pill--a-applied {
  border-color: var(--wick);
  color: var(--fg);
}
.pill--a-waitlisted {
  border-color: var(--muted);
  color: var(--fg);
}
.pill--a-approved,
.pill--a-build_granted,
.pill--a-scheduled {
  border-color: #3f8f4f;
  color: #8fd79c;
}
.pill--a-completed,
.pill--a-submitted,
.pill--a-in_review,
.pill--a-approved_for_payment {
  border-color: #8fd79c;
  color: #c6f0cc;
}
.pill--a-paid,
.pill--a-closed {
  border-color: #8fd79c;
  background: rgba(63, 143, 79, 0.18);
  color: #e6ffe9;
}
.pill--a-declined_by_creator,
.pill--a-declined_by_studio,
.pill--a-withdrawn {
  color: var(--muted);
}
/* A campaign's own status, in the admin. */
.pill--c-open {
  border-color: #3f8f4f;
  color: #8fd79c;
}
.pill--c-invite_only {
  border-color: var(--wick);
  color: var(--fg);
}
.pill--c-closed,
.pill--c-complete {
  color: var(--muted);
}

/* The cards: one per campaign, two abreast on a wide screen. */
.campaigns h2,
.campaign h2 {
  margin-top: 2.5rem;
}
.campaign-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.campaign-card {
  display: flex;
  flex-direction: column;
  padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--seam);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.campaign-card h3 {
  margin: 0.1rem 0 0.4rem;
  font-size: 1.3rem;
}
.campaign-card h3 a {
  color: var(--fg);
  text-decoration: none;
}
.campaign-card h3 a:hover {
  text-decoration: underline;
}
.campaign-card__game {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.campaign-card__summary {
  margin: 0 0 0.8rem;
  color: var(--muted);
}
.campaign-card__facts {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  gap: 0 1rem;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}
.campaign-card__facts > div {
  display: contents;
}
.campaign-card__facts dt,
.campaign-card__facts dd {
  padding: 0.35rem 0;
  border-top: 1px solid var(--seam);
}
.campaign-card__facts dt {
  color: var(--muted);
  font-weight: 600;
}
.campaign-card__facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.campaign-card__state {
  margin: auto 0 0;
  padding-top: 0.4rem;
}
.campaign-card__state .button {
  margin-top: 0.2rem;
}
.campaign-card__state--no {
  color: var(--muted);
  font-weight: 600;
}
.campaign-card__state--no a,
.campaign-card__state a {
  color: var(--fg);
}

/* The creator's own campaigns, one line each. */
.assignment-rows,
.dashboard__campaigns {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 46rem;
}
.assignment-row,
.dashboard__campaign {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--seam);
}
.assignment-row:last-child,
.dashboard__campaign:last-child {
  border-bottom: 1px solid var(--seam);
}
.assignment-row__name a,
.dashboard__campaign a {
  color: var(--fg);
}
.assignment-row__game,
.dashboard__campaign-game {
  color: var(--muted);
  font-size: 0.9rem;
}
.assignment-row__facts,
.dashboard__campaign-rate {
  color: var(--muted);
  font-size: 0.95rem;
}
.dashboard__campaign-fit {
  color: #8fd79c;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard__campaign-nofit {
  color: var(--muted);
  font-size: 0.9rem;
}

/* One campaign's page. */
.campaign__game {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.campaign__state {
  max-width: var(--measure);
  margin: 1.5rem 0 0;
  padding: 1rem 1.2rem;
  border-left: 4px solid var(--seam);
  background: var(--bg-raised);
}
.campaign__state p {
  margin: 0 0 0.6rem;
}
.campaign__state p:last-child {
  margin-bottom: 0;
}
.campaign__state ul {
  margin: 0 0 0.6rem;
  padding-left: 1.2rem;
}
.campaign__state--invited {
  border-left-color: var(--wick);
}
.campaign__state--no {
  border-left-color: var(--muted);
  color: var(--muted);
}
.campaign__state--no a {
  color: var(--fg);
}
.campaign__state .form__actions {
  margin-top: 1rem;
}
.campaign__apply {
  margin-top: 1.5rem;
  max-width: 44rem;
}
.campaign__apply h2 {
  margin: 0 0 0.4rem;
}
.campaign__answer {
  margin-top: 2.5rem;
}

/* The one-page brief (spec section 14): a term and its value per line. */
.brief-terms {
  display: grid;
  grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr);
  gap: 0 1.5rem;
  margin: 0;
  max-width: 46rem;
}
.brief-terms > div {
  display: contents;
}
.brief-terms dt,
.brief-terms dd {
  padding: 0.6rem 0;
  border-top: 1px solid var(--seam);
}
.brief-terms > div:last-child dt,
.brief-terms > div:last-child dd {
  border-bottom: 1px solid var(--seam);
}
.brief-terms dt {
  font-weight: 700;
}
.brief-terms dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.brief-terms code,
.workspace__key code {
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}
.brief-terms__aside {
  color: var(--muted);
  font-weight: 450;
}

/* The workspace (spec section 8): six blocks, then the wide one with the done button. */
.workspace {
  margin-top: 2rem;
}
.workspace h2 {
  margin-top: 0;
}
.workspace__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 1.2rem;
}
.workspace__block {
  padding: 1.1rem 1.3rem 1.3rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
}
.workspace__block h3 {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.workspace__block p {
  margin: 0 0 0.6rem;
}
.workspace__block p:last-child {
  margin-bottom: 0;
}
.workspace__block--wide {
  margin-top: 1.2rem;
}
.workspace__block--wide h3 + h3,
.workspace__block--wide form + h3,
.workspace__block--wide p + h3 {
  margin-top: 1.6rem;
}
.workspace__big {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 900;
  line-height: 1.1;
}
.workspace__aside {
  color: var(--muted);
  font-size: 0.95rem;
}
.workspace__key {
  font-size: 1.1rem;
}
.workspace__key code {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  color: var(--fg);
}
.workspace__prose {
  margin-top: 0.8rem;
  font-size: 0.95rem;
}
.workspace__prose p {
  margin: 0 0 0.6rem;
}
.workspace__form {
  max-width: none;
  margin-top: 0.4rem;
}
.workspace__form label {
  margin-top: 0.4rem;
}
.workspace__form .button {
  margin-top: 0.8rem;
}
.workspace__form input {
  background: var(--bg);
}
.workspace .empty {
  margin: 0;
  padding: 1rem 1.2rem;
}

/* ---------- campaigns: the admin's side ---------- */

.admin__table--campaigns td:first-child {
  min-width: 12rem;
}
.admin__table--campaigns a {
  color: var(--fg);
}
.admin__form-head {
  margin: 2.2rem 0 0;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--seam);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin__campaign-form {
  max-width: 64rem;
}
/* The rate boxes with the guide beside them. */
.admin__rate {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0 2rem;
  align-items: start;
}
.admin__rate-guide {
  margin-top: 1rem;
  padding: 0.9rem 1.1rem 1rem;
  border-left: 4px solid var(--wick);
  background: var(--bg-raised);
  font-size: 0.9rem;
}
.admin__rate-guide h3 {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.admin__rate-guide table {
  width: 100%;
  border-collapse: collapse;
}
.admin__rate-guide th,
.admin__rate-guide td {
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--seam);
  text-align: left;
  vertical-align: top;
}
.admin__rate-guide th {
  color: var(--muted);
  font-weight: 600;
}
.admin__rate-guide p {
  margin: 0.6rem 0 0;
  color: var(--muted);
}
/* The assignment groups: a heading with a count, then one block per creator. */
.admin__group {
  margin-bottom: 1.6rem;
}
.admin__group h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}
.admin__group .empty {
  margin: 0;
  padding: 0.8rem 1rem;
}
.admin__group--applied h3 {
  color: var(--fg);
}
.admin__assignments {
  list-style: none;
  margin: 0;
  padding: 0;
}
.admin__assignment {
  padding: 1rem 1.2rem 1.1rem;
  margin-bottom: 0.8rem;
  border: 1px solid var(--seam);
  border-left: 4px solid var(--seam);
  background: var(--bg-raised);
}
.admin__group--applied .admin__assignment {
  border-left-color: var(--wick);
}
.admin__group--active .admin__assignment {
  border-left-color: #3f8f4f;
}
.admin__assignment-head {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}
.admin__assignment-head a {
  color: var(--fg);
}
.admin__assignment .admin__meta {
  margin-bottom: 0.3rem;
  font-size: 0.92rem;
}
.admin__assignment code {
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.admin__quote {
  margin: 0.4rem 0 0.6rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--seam);
  font-size: 0.95rem;
}
.admin__move {
  max-width: none;
  margin-top: 0.6rem;
  gap: 0;
}
.admin__move-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0 1rem;
}
.admin__move-note {
  grid-column: 1 / -1;
}
.admin__move label {
  margin-top: 0.5rem;
  font-size: 0.9rem;
}
.admin__move input:not([type='checkbox']),
.admin__move select {
  min-height: 2.4rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg);
  font-size: 0.95rem;
}
.admin__move .admin__actions {
  margin: 0.8rem 0 0.4rem;
}
.admin__move .button {
  min-height: 2.4rem;
  margin-top: 0;
  padding: 0.3rem 0.9rem;
  font-size: 0.9rem;
}
.admin__move .check {
  margin-top: 0.2rem;
  font-size: 0.9rem;
}
.admin__invite {
  max-width: 44rem;
}

@media (max-width: 52rem) {
  .admin__rate {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 40rem) {
  .brief-terms,
  .campaign-card__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .brief-terms dd,
  .campaign-card__facts dd {
    padding-top: 0;
    border-top: 0;
  }
  .brief-terms > div:last-child dt {
    border-bottom: 0;
  }
}

/* ---------- submissions, payments, the report ---------- */

/* Where a submission's review stands, and where a payment stands: the same pill. */
.pill--r-pending {
  border-color: var(--wick);
  color: var(--fg);
}
.pill--r-approved,
.pill--p-sent,
.pill--p-confirmed {
  border-color: #3f8f4f;
  color: #8fd79c;
}
.pill--r-changes_requested,
.pill--p-due {
  border-color: var(--muted);
  color: var(--fg);
}
.pill--r-rejected,
.pill--p-void {
  color: var(--muted);
}

/* The submission form: sections headed inside the form, the file box drawn like the others. */
.submit__form h2 {
  margin: 2.2rem 0 0.2rem;
  font-size: 1.3rem;
}
.submit__form h2:first-child {
  margin-top: 0.5rem;
}
.submit__form .form__hint {
  max-width: var(--measure);
}
.form input[type='file'] {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px dashed var(--seam);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--fg);
  font: inherit;
  font-size: 0.95rem;
}
.form input[type='file']::file-selector-button {
  margin-right: 0.8rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.submit__asked {
  max-width: var(--measure);
}
.submit__asked p {
  margin: 0 0 0.4rem;
}
.submit__asked p:last-child {
  margin-bottom: 0;
  white-space: pre-line;
}

/* One submission in the workspace: the words on the left, the screenshot thumbnail on the right. */
.submissions {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.submission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.8rem 1.2rem;
  align-items: start;
  padding: 0.9rem 0;
  border-top: 1px solid var(--seam);
}
.submission:last-child {
  border-bottom: 1px solid var(--seam);
}
.submission__text p {
  margin: 0 0 0.3rem;
}
.submission__head .pill {
  margin-right: 0.3rem;
}
.submission__numbers,
.submission__when {
  color: var(--muted);
  font-size: 0.95rem;
}
.submission__note {
  padding-left: 0.8rem;
  border-left: 2px solid var(--seam);
  font-size: 0.95rem;
  white-space: pre-line;
}
.submission__review {
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--wick);
  background: var(--bg);
  white-space: pre-line;
}
.workspace__paid {
  color: #8fd79c;
  font-weight: 700;
}

/* The screenshot thumbnail: a fixed box, the picture fitted inside, the whole thing a link. */
.shot {
  display: block;
  width: 9rem;
  max-width: 100%;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.shot img {
  display: block;
  width: 100%;
  height: 6rem;
  object-fit: cover;
  object-position: top left;
}
.shot:hover {
  border-color: var(--accent);
}
.shot--none {
  display: grid;
  place-items: center;
  height: 6rem;
  margin: 0;
  font-size: 0.85rem;
}

/* A note on a dashboard line, and what a finished assignment came to. */
.dashboard__line-note {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 0.9rem;
}
.dashboard__outcome {
  font-weight: 700;
}

/* ---------- the admin's review queue, payment record and report ---------- */

.admin__submissions {
  list-style: none;
  margin: 0.6rem 0;
  padding: 0;
}
.admin__submission {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 1.2rem;
  align-items: start;
  padding: 0.9rem 1rem;
  margin-bottom: 0.6rem;
  border: 1px solid var(--seam);
  border-left: 4px solid var(--seam);
  background: var(--bg);
}
.admin__submissions--queue .admin__submission {
  background: var(--bg-raised);
}
.admin__submission--pending {
  border-left-color: var(--wick);
}
.admin__submission--approved {
  border-left-color: #3f8f4f;
}
.admin__submission-text > .admin__meta {
  margin-bottom: 0.3rem;
}
.admin__ok {
  color: #8fd79c;
}
.admin__review {
  max-width: none;
  margin-top: 0.6rem;
  gap: 0;
}
.admin__review label {
  margin-top: 0.3rem;
  font-size: 0.9rem;
}
.admin__review textarea {
  min-height: 3.2rem;
  background: var(--bg-raised);
  font-size: 0.95rem;
}
.admin__submissions--queue .admin__review textarea {
  background: var(--bg);
}
.admin__review .admin__actions {
  margin: 0.6rem 0 0.3rem;
}
.admin__review .button {
  min-height: 2.4rem;
  margin-top: 0;
  padding: 0.3rem 0.9rem;
  font-size: 0.9rem;
}
.admin__review .check {
  margin-top: 0.2rem;
  font-size: 0.9rem;
}
.admin__review-outcome {
  margin-top: 0.4rem;
}
.admin__review-note {
  color: var(--fg);
  white-space: pre-line;
}
.shot--admin img {
  height: 7rem;
}

/* The payment block: the state in one line, then the form. */
.admin__payment {
  margin: 0.8rem 0 0.4rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--seam);
  border-left: 4px solid #3f8f4f;
  background: var(--bg);
}
.admin__payment-state {
  margin: 0 0 0.3rem;
}
.admin__payment-form .admin__hint {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
}
.admin__close {
  margin-top: 0.6rem;
}
.admin__close .button {
  margin-top: 0;
}

/* The report: numbers right-aligned in tabular figures, a totals row, a note column that wraps. */
.admin__table--report th.num,
.admin__table--report td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin__table--report tfoot td {
  border-top: 2px solid var(--seam);
  font-weight: 700;
}
.admin__table--report .admin__context {
  display: block;
  margin-top: 0.1rem;
  max-width: 18rem;
  white-space: normal;
}
.admin__table-note {
  max-width: 18rem;
  font-size: 0.9rem;
}
.admin__stats--report {
  margin-bottom: 1.5rem;
}
.admin__rehire {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.admin__rehire--yes {
  color: #8fd79c;
}
.admin__rehire--no {
  color: var(--wick);
}
.admin__rehire-form {
  max-width: 30rem;
  margin-top: 1rem;
}
.admin__rehire-form select {
  flex: 0 1 14rem;
  min-height: 2.4rem;
  padding: 0.35rem 0.6rem;
  background: var(--bg);
  font-size: 0.95rem;
}
.admin__rehire-form .button {
  margin-top: 0;
}

@media (max-width: 40rem) {
  .submission,
  .admin__submission {
    grid-template-columns: minmax(0, 1fr);
  }
  .shot {
    width: 100%;
  }
  .shot img {
    height: auto;
    max-height: 14rem;
  }
}

/* The rate card on /creators */
.rates { max-width: var(--measure); overflow-x: auto; margin: 0 0 1rem; }
.rates table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.rates th, .rates td { text-align: left; padding: 0.6rem 0.75rem 0.6rem 0; border-bottom: 1px solid var(--seam); vertical-align: top; }
.rates thead th { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }
.rates tbody th { font-weight: 600; }
.rates tbody td:nth-child(2) { color: var(--accent); font-weight: 700; white-space: nowrap; }
.rates__note { color: var(--muted); font-size: 0.9rem; }
/* A second condition in a cell, on its own line: "Affiliate, or 100 followers". */
.rates__also { display: block; margin-top: 0.2rem; color: var(--muted); font-size: 0.9rem; }
@media (max-width: 30rem) { .rates tbody td:nth-child(2) { white-space: normal; } }

/* The requirements table: the same rules as the rate card, but no column is a price, so none
   is picked out in the accent colour or kept on one line. */
.rates--requirements { max-width: 60rem; }
.rates--requirements tbody td:nth-child(2) { color: inherit; font-weight: inherit; white-space: normal; }
.rates--requirements tbody td:last-child { white-space: nowrap; }
.creators__more { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.95rem; }
.creators__more a { color: var(--fg); }

/* The creator terms. */
.terms__version { margin: -0.5rem 0 1rem; color: var(--muted); font-size: 0.9rem; letter-spacing: 0.04em; }
.terms__contents { max-width: var(--measure); margin: 0 0 2rem; padding: 0.75rem 1rem; border: 1px solid var(--seam); border-radius: var(--radius); background: var(--bg-raised); }
.terms__contents ol { margin: 0; padding-left: 1.4rem; columns: 2 16rem; column-gap: 2rem; }
.terms__contents li { margin: 0.2rem 0; break-inside: avoid; }
.terms h2 { scroll-margin-top: 1rem; }

/* The agreement box on a campaign's apply and accept forms: the wording wraps beside the box. */
.form .campaign__agree { align-items: flex-start; font-weight: 450; margin-top: 1rem; }
.form .campaign__agree input { flex: none; margin-top: 0.2rem; }
.form .check a { color: var(--fg); }
.notice--terms a { color: var(--fg); }

/* Admin: the payout beside the method, the tax-form warning, the tax-form form. */
.admin__payout { margin: 0.3rem 0 0; font-size: 0.85rem; }
.admin__taxwarn { margin: 0.5rem 0; }
.admin__taxform { max-width: 40rem; margin-bottom: 1.5rem; }

/* The deliverable rules on a campaign: what to deliver, how to disclose, what the game contains,
   the embargo. The paste lines wrap anywhere, since a tracking link is one long word. */
.rules { max-width: var(--measure); margin: 2rem 0 0; }
.workspace .rules { max-width: none; margin: 0; }
.rules__kind { font-weight: 600; }
.rules__list { margin: 0 0 1rem; padding-left: 1.2rem; }
.rules__list li { margin: 0.35rem 0; }
.rules__paste { display: block; margin: 0.4rem 0 0; padding: 0.4rem 0.7rem; background: var(--bg-raised); overflow-wrap: anywhere; }
.workspace .rules__paste { background: var(--bg); }
.rules__aside { color: var(--muted); font-size: 0.95rem; }
.rules__contains,
.rules__embargo,
.workspace__embargo { font-weight: 700; }

/* Content warnings: a plain line on the card; picked out when the creator asked to hear per game. */
.campaign-card__contains { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 600; }
.campaign-card__warning,
.campaign__warning { margin: 0.5rem 0; padding: 0.6rem 0.8rem; border-left: 4px solid var(--wick); background: var(--bg-raised); font-weight: 600; }
.campaign__warning { max-width: var(--measure); margin-top: 1.5rem; }
.campaign__notes { max-width: var(--measure); margin: 1rem 0 0; padding-left: 1.2rem; color: var(--muted); }

/* The submission's checklist: one fieldset per platform the creator could have used. */
.submit__checklist { margin: 0.5rem 0 1rem; padding: 0.6rem 1rem 0.8rem; border: 1px solid var(--seam); border-radius: var(--radius); }
.submit__checklist legend { padding: 0 0.3rem; font-weight: 700; }
.form .submit__checklist .check { align-items: flex-start; font-weight: 450; margin: 0.4rem 0; }
.form .submit__checklist .check input { flex: none; margin-top: 0.15rem; }
.submit__where { margin: 0; font-weight: 600; }

/* Admin: the campaign form's tick boxes, the numbers check before approving, the submission's
   ticked checklist and the late flag. */
.admin__checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0.3rem 0 0.8rem; }
.admin__checks--list { flex-direction: column; }
.form .admin__checks .check { font-weight: 450; }
.admin__numbers-check { margin: 0.5rem 0; padding: 0.5rem 0.8rem; border-left: 4px solid var(--wick); background: var(--bg-raised); font-size: 0.9rem; }
.admin__numbers-check p { margin: 0.2rem 0; }
.admin__check-links { display: block; margin-top: 0.2rem; font-size: 0.85rem; }
.admin__check-links a { color: var(--fg); }
.form .admin__checked-box { font-weight: 700; }
.admin__late { margin: 0.3rem 0; color: #f0b35a; }
.admin__checklist { margin: 0.3rem 0 0.5rem; padding-left: 1.2rem; font-size: 0.9rem; }
.admin__checklist .is-ticked { color: #8fd79c; }
.admin__checklist .is-unticked { color: #f0b35a; }

/* ---------- creator landing: the /creators sales page ----------
   Everything here is prefixed cl- and used by creatorsPage only. Mobile first: one column, then
   two at 45rem (720px), then the wide rows at 60rem. A game card carries its room--<theme> class,
   so its title, accent and corners are that game's own. */

.cl {
  --cl-scrim: 11, 11, 12;
  overflow-x: clip;
}

.cl-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.cl-eyebrow::before {
  content: '';
  width: 1.6rem;
  height: 3px;
  background: var(--wick);
}

.cl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.6rem 0 0;
}
.cl-actions .button {
  flex: 1 1 auto;
}
.cl-actions--center {
  justify-content: center;
}

/* The hero: four games' stills behind a scrim, the promise on top. */
.cl-hero {
  position: relative;
  isolation: isolate;
}
.cl-hero__art {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  aspect-ratio: 16 / 9;
  background: var(--bg-raised);
}
.cl-hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cl-hero__art::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, rgba(var(--cl-scrim), 0.15) 0%, rgba(var(--cl-scrim), 0.55) 55%, rgb(var(--cl-scrim)) 100%);
}
.cl-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wide);
  margin: -3.5rem auto 0;
  padding: 0 var(--gutter) 2.5rem;
}
.cl-hero__title {
  max-width: 13em;
  font-size: clamp(2.3rem, 5.4vw, 4.4rem);
  line-height: 1.02;
}
.cl-hero__lede {
  max-width: 34rem;
  margin: 1.2rem 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: #d6d2d2;
}
.cl-hero .creators__signed-in {
  max-width: 34rem;
  margin: 1.4rem 0 0;
}
.cl-hero__signin {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.cl-hero__signin a {
  color: var(--fg);
}

/* Four facts in place of counts and logos the studio does not have. */
.cl-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background: var(--seam);
  border-block: 1px solid var(--seam);
}
.cl-facts li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.2rem var(--gutter);
  background: var(--bg);
}
.cl-facts strong {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1;
  white-space: nowrap;
}
.cl-facts span {
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--muted);
}

/* A section: full-bleed background, content held to the wide measure. */
.cl-section {
  padding: clamp(3.5rem, 7vw, 6rem) max(var(--gutter), calc((100% - var(--wide)) / 2 + var(--gutter)));
}
.cl-section--raised {
  background: var(--bg-raised);
  border-block: 1px solid var(--seam);
}
.cl-section__head {
  max-width: 44rem;
  margin-bottom: 2rem;
}
.cl-section__head h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
}
.cl-section__head p {
  margin: 0.9rem 0 0;
  text-wrap: pretty;
  font-size: 1.12rem;
  color: var(--muted);
}
.cl-section h3 {
  font-size: 1.15rem;
  line-height: 1.25;
}
.cl-small {
  max-width: var(--measure);
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.cl-small a {
  color: var(--fg);
}
.cl-small--center {
  margin: 2rem auto 0;
  text-align: center;
}

/* The games: one card each, in the game's own colours. */
.cl-games {
  display: grid;
  gap: 1.25rem;
}
.cl-game {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-raised);
  color: var(--fg);
  border: 1px solid var(--seam);
  border-radius: var(--radius);
}
.cl-game__art {
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--bg);
}
.cl-game__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cl-badge {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 1px solid rgba(242, 242, 242, 0.45);
  border-radius: 2px;
  background: rgba(var(--cl-scrim), 0.8);
  color: #f2f2f2;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cl-game .cl-badge {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
}
.cl-badge--live {
  border-color: var(--wick);
  background: var(--wick);
  color: #fff;
}
.cl-game__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.4rem 1.4rem 1.2rem;
}
.cl-game__title {
  font-size: 2rem;
  color: var(--accent);
}
.room--obligate .cl-game__title {
  font-size: 1.6rem;
  text-transform: uppercase;
}
.room--order .cl-game__title {
  font-size: 2.4rem;
  color: #efe6d2;
  line-height: 1;
}
.room--cells .cl-game__title {
  font-size: 2.2rem;
  text-transform: uppercase;
  color: #ede6d6;
}
.room--descent .cl-game__title {
  font-size: 1.55rem;
  color: #efe6d3;
}
.room--rounds .cl-game__title {
  font-size: 2.3rem;
  line-height: 1;
  text-transform: uppercase;
  color: #eceae2;
}
.cl-game__genre {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.cl-game__tagline {
  margin: 0.8rem 0 0;
  font-weight: 700;
  color: var(--accent);
}
.cl-game__pitch {
  margin: 0.5rem 0 0;
  font-size: 0.98rem;
  color: var(--muted);
}
.cl-game__today {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--seam);
  font-size: 0.95rem;
}
.cl-game__more {
  margin: auto 0 0;
  padding-top: 1rem;
  font-size: 0.95rem;
  font-weight: 700;
}

/* The rate card as five tiers: rows on a phone, a line of cards on a wide screen. */
.cl-tiers {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cl-tier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'band price' 'for price';
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--seam);
  border-top: 3px solid var(--wick);
  border-radius: var(--radius);
}
.cl-tier__band {
  grid-area: band;
  font-weight: 800;
}
.cl-tier__price {
  grid-area: price;
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.7rem;
  line-height: 1;
  white-space: nowrap;
}
.cl-tier__for {
  grid-area: for;
  font-size: 0.88rem;
  color: var(--muted);
}

/* What that comes to: three receipts, then the video and short-form rates. */
.cl-money {
  display: grid;
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.cl-receipt {
  padding: 1.4rem;
  background: var(--bg);
  border: 1px dashed #4a4a50;
  border-radius: var(--radius);
}
.cl-receipt ul {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.cl-receipt li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px dotted #4a4a50;
}
.cl-receipt li span {
  flex: 1;
}
.cl-receipt li strong {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 900;
}
.cl-extras {
  display: grid;
  gap: 1.25rem;
}
.cl-extra {
  padding: 1.4rem;
  border: 1px solid var(--seam);
  border-radius: var(--radius);
}
.cl-extra p {
  margin: 0.5rem 0 0;
  color: var(--muted);
}
.cl-extra strong {
  color: var(--fg);
}
.cl-pay {
  display: grid;
  gap: 1.25rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.cl-pay li {
  padding-top: 0.9rem;
  border-top: 2px solid var(--wick);
  color: var(--muted);
}
.cl-pay strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--fg);
}
.cl-nowrap {
  white-space: nowrap;
}

/* How it works: a numbered timeline on a phone, four across on a wide screen. */
.cl-steps {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cl-step;
}
.cl-steps li {
  position: relative;
  padding: 0 0 1.8rem 3.4rem;
  counter-increment: cl-step;
}
.cl-steps li::before {
  content: counter(cl-step);
  position: absolute;
  top: -0.2rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 2px solid var(--wick);
  border-radius: 50%;
  background: var(--bg);
  font-weight: 900;
}
.cl-steps li::after {
  content: '';
  position: absolute;
  top: 2.3rem;
  bottom: 0.2rem;
  left: 1.1rem;
  width: 2px;
  background: var(--seam);
}
.cl-steps li:last-child {
  padding-bottom: 0;
}
.cl-steps li:last-child::after {
  display: none;
}
.cl-steps p {
  margin: 0.4rem 0 0;
  color: var(--muted);
}

/* Early is better here. */
.cl-why {
  display: grid;
  gap: 1.5rem 2.5rem;
}
.cl-why > div {
  padding-left: 1rem;
  border-left: 2px solid var(--wick);
}
.cl-why p {
  margin: 0.4rem 0 0;
  color: var(--muted);
}
.cl-why a {
  color: var(--fg);
}

/* We ask, we never ask. */
.cl-voice {
  display: grid;
  gap: 1.25rem;
}
.cl-voice__col {
  padding: 1.4rem;
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  border-radius: var(--radius);
}
.cl-voice__col ul {
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}
.cl-voice__col li {
  position: relative;
  margin: 0.7rem 0 0;
  padding-left: 1.7rem;
  color: var(--muted);
}
.cl-voice__col li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 0;
  color: #8fd79c;
  font-weight: 900;
}
.cl-voice__col--never li::before {
  content: '\2715';
  color: #ff7a80;
}

/* Requirements and questions, folded without script. */
.cl-fold {
  max-width: 52rem;
  border-bottom: 1px solid var(--seam);
}
.cl-fold details {
  border-top: 1px solid var(--seam);
}
.cl-fold summary {
  position: relative;
  padding: 1.05rem 2.5rem 1.05rem 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.cl-fold summary::-webkit-details-marker {
  display: none;
}
.cl-fold summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  color: var(--wick);
  font-size: 1.5rem;
  font-weight: 700;
}
.cl-fold details[open] summary::after {
  content: '\2212';
}
.cl-fold summary:hover {
  color: #fff;
}
.cl-fold__body {
  padding: 0 0 1.3rem;
  color: var(--muted);
}
.cl-fold__body p {
  max-width: var(--measure);
}
.cl-fold__body p:last-child {
  margin-bottom: 0;
}
.cl-fold__body ul:not(.cl-platforms) {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
}
.cl-fold__body li {
  margin-bottom: 0.4rem;
}
.cl-fold__body a {
  color: var(--fg);
}
.cl-platforms {
  display: grid;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.cl-platforms li {
  margin: 0;
  padding: 1rem 1.1rem;
  background: var(--bg);
  border: 1px solid var(--seam);
  border-radius: var(--radius);
}
.cl-platforms h4 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--fg);
}
.cl-platforms dl {
  margin: 0;
}
.cl-platforms dl div {
  padding: 0.35rem 0;
  border-top: 1px solid var(--seam);
}
.cl-platforms dt {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cl-platforms dd {
  margin: 0;
  color: var(--fg);
  font-size: 0.95rem;
}

/* The closing band: one more picture, a heavy scrim, one last ask. */
.cl-close {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  border-top: 1px solid var(--seam);
}
.cl-close__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cl-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgb(var(--cl-scrim)) 0%, rgba(var(--cl-scrim), 0.72) 30%, rgba(var(--cl-scrim), 0.72) 70%, rgb(var(--cl-scrim)) 100%);
}
.cl-close__inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(4.5rem, 10vw, 8rem) var(--gutter);
}
.cl-close h2 {
  font-size: clamp(1.8rem, 4vw, 2.9rem);
}
.cl-close__inner > p {
  margin: 1rem 0 0;
  font-size: 1.12rem;
  color: #d6d2d2;
}
.cl-close .cl-close__terms {
  margin-top: 1.2rem;
  font-size: 0.95rem;
}

@media (min-width: 45rem) {
  .cl-actions .button {
    flex: 0 0 auto;
  }
  .cl-hero {
    display: flex;
    align-items: flex-end;
    min-height: clamp(32rem, 78vh, 42rem);
  }
  .cl-hero__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .cl-hero__art::after {
    inset: 0;
    aspect-ratio: auto;
    background:
      linear-gradient(90deg, rgba(var(--cl-scrim), 0.94) 0%, rgba(var(--cl-scrim), 0.82) 38%, rgba(var(--cl-scrim), 0.35) 75%, rgba(var(--cl-scrim), 0.25) 100%),
      linear-gradient(180deg, rgba(var(--cl-scrim), 0) 55%, rgb(var(--cl-scrim)) 100%);
  }
  .cl-hero__inner {
    width: 100%;
    margin: 0 auto;
    padding: 6rem var(--gutter) 3.5rem;
  }
  .cl-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cl-facts li {
    padding: 1.5rem var(--gutter);
  }
  .cl-games,
  .cl-extras,
  .cl-voice,
  .cl-why,
  .cl-platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cl-games {
    gap: 1.5rem;
  }
  .cl-pay {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 60rem) {
  .cl-tiers {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .cl-tier {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'band' 'price' 'for';
    align-items: start;
    align-content: start;
    gap: 0.5rem;
    padding: 1.2rem 1.1rem 1.3rem;
  }
  .cl-tier__price {
    margin: 0.3rem 0 0.2rem;
    font-size: 2.3rem;
  }
  .cl-money {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: start;
  }
  .cl-extras {
    grid-template-columns: minmax(0, 1fr);
  }
  .cl-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
  .cl-steps li {
    padding: 3.4rem 0 0;
  }
  .cl-steps li::before {
    top: 0;
  }
  .cl-steps li::after {
    display: block;
    top: 1.15rem;
    bottom: auto;
    left: 3rem;
    right: -1.5rem;
    width: auto;
    height: 2px;
  }
  .cl-steps li:last-child::after {
    display: none;
  }
}

/* Task 11: copy buttons (shown by site.js only where the browser can copy), the chat command as
   two parts, the creator's time with UTC beside it, the jump to a form that sits after the brief,
   and the note that a file box is empty again after an error. */
.copy-button {
  margin: 0.3rem 0 0;
  padding: 0.25rem 0.8rem;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
.copy-button:hover,
.copy-button:focus-visible { background: var(--accent); color: var(--accent-ink); }
.copy-button[hidden] { display: none; }
.rules__command { margin: 0.6rem 0 0; }
.rules__command div { display: grid; grid-template-columns: 7rem 1fr; gap: 0.2rem 0.8rem; margin: 0.3rem 0; }
.rules__command dt { font-weight: 700; }
.rules__command dd { margin: 0; min-width: 0; }
.rules__command .rules__paste { margin: 0; }
.workspace__utc { display: block; color: var(--muted); font-size: 0.9rem; }
.campaign__jump { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; margin: 1rem 0; }
.campaign__jump span { color: var(--muted); }
.campaign__done p:last-child { margin-bottom: 0; }
.submit__again { margin: 0.3rem 0; color: var(--accent); font-weight: 700; }
.cl-hero__notice { margin-top: 0; }
.admin__due { margin: 0 0 1.5rem; padding-left: 1.2rem; }
.admin__due li { margin: 0.35rem 0; }
@media (max-width: 30rem) {
  .rules__command div { grid-template-columns: 1fr; }
}

/* ---------- the home page: the Creator Network's parts, the studio's front door ---------- */

.home .cl-game__title a {
  color: inherit;
  text-decoration: none;
}
.home .cl-game__today a {
  color: var(--accent);
}
.home-game__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: auto 0 0;
  padding-top: 1.2rem;
}
.home-game__actions .button {
  font-size: 0.9rem;
}

.home-posts {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.home-post {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--seam);
  border-radius: var(--radius);
}
.home-post__art {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-raised);
}
.home-post__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-post__mark {
  display: block;
  width: 100%;
  height: 100%;
  background: url('/img/mark.png') center / 26% no-repeat, radial-gradient(circle at 50% 45%, rgba(232, 32, 42, 0.18), transparent 60%);
}
.home-post__body {
  padding: 1.1rem 1.2rem 1.3rem;
}
.home-post__body time {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.home-post__body h3 {
  margin: 0.45rem 0 0;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0;
  font-size: 1.15rem;
  line-height: 1.25;
}
.home-post__body h3 a {
  color: var(--fg);
  text-decoration: none;
}
.home-post__body h3 a:hover {
  text-decoration: underline;
}
.home-post__body p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.home-follow__grid {
  display: grid;
  gap: 2.5rem;
}
.home-follow h2 {
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
}
.home-follow h3 {
  font-size: 1.15rem;
}
.home-follow h2 + p,
.home-follow h3 + p {
  margin-top: 0.8rem;
}
.home-follow p {
  max-width: 34rem;
  color: var(--muted);
}
.home-follow .cl-actions {
  margin-top: 1.4rem;
}

.home-more {
  display: grid;
  gap: 2rem;
}
.home-more > div {
  padding-top: 1.1rem;
  border-top: 1px solid var(--wick);
}
.home-more h3 {
  font-size: 1.1rem;
}
.home-more p {
  margin: 0.5rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}
.home-more p a {
  color: var(--fg);
  font-weight: 700;
}

@media (min-width: 45rem) {
  .home-posts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .home-follow__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(2rem, 6vw, 5rem);
  }
  .home-more {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ---------- a game's own page: its footage behind the title, like the Creator Network hero ---------- */

.game-hero {
  position: relative;
  isolation: isolate;
  --gh-scrim: 7, 6, 8;
}
.game-hero__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-raised);
}
.game-hero__media .clip {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.game-hero__media::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, transparent 45%, var(--bg) 100%);
  pointer-events: none;
}
.game-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wide);
  margin: -2.5rem auto 0;
  padding: 0 var(--gutter) 2.5rem;
}
.game-hero__badge {
  margin: 0 0 1rem;
}
.game-hero .game__title {
  line-height: 1;
}
.game-hero .game__tagline {
  margin: 0.8rem 0 0;
}
.game__genre-line {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.game-hero .game__pitch {
  margin: 1rem 0 0;
  max-width: 36rem;
}
.game-hero .cl-actions {
  margin-top: 1.4rem;
}
.game-hero .game__status {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  color: var(--muted);
}

@media (min-width: 45rem) {
  .game-hero {
    display: flex;
    align-items: flex-end;
    min-height: clamp(32rem, 80vh, 44rem);
  }
  .game-hero__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    aspect-ratio: auto;
  }
  .game-hero__media::after {
    inset: 0;
    aspect-ratio: auto;
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(0, 0, 0, 0.72) 36%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.1) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, var(--bg) 100%);
  }
  .game-hero__inner {
    width: 100%;
    margin: 0 auto;
    padding: 7rem var(--gutter) 4rem;
  }
}

/* The log as cards: each post with its still, newest first. */
.devlog-log {
  padding-inline: var(--gutter);
}
.devlog-log .devlog-log__items {
  display: grid;
  gap: 1.25rem;
  border-top: 0;
}
.devlog-log .devlog-log__items > li.devlog-log__card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-raised);
  border: 1px solid var(--seam);
  border-radius: var(--radius);
}
.devlog-log__art {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg);
}
.devlog-log__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.devlog-log__body {
  padding: 1rem 1.2rem 1.2rem;
}
.devlog-log .devlog-log__date {
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.devlog-log .devlog-log__what {
  margin: 0.45rem 0 0;
}
@media (min-width: 45rem) {
  .devlog-log .devlog-log__items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The Broken Order: blackletter stays the name (a wordmark, read once), the headings are set in
   inscription capitals so they read at a glance. */
.theme-order .game h2,
.theme-order .game h3 {
  font-family: 'Cinzel', 'Montserrat', serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.theme-order .beat h2,
.theme-order .game__demo h2,
.theme-order .game__posts h2,
.theme-order .game__shots h2,
.theme-order .game__facts h2,
.theme-order .game__follow h2,
.theme-order .devlog-log h2,
.theme-order .game__feedback h2 {
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

/* ---------------------------------------------------------------------------------------------
   The Lab: experiments between the games. Rat Jail is a room like the games: cheese on a night
   prison, Space Grotesk. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-wght.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
}

.theme-ratjail {
  --bg: #0a0b0f;
  --bg-raised: #13151c;
  --fg: #eef0f5;
  --muted: #a3a9b8;
  --seam: #262a36;
  --accent: #ffc845;
  --accent-ink: #1a1405;
  --radius: 12px;
  --display: 'Space Grotesk', 'Montserrat', sans-serif;
  --display-weight: 700;
  --display-spacing: -0.01em;
}

.lab__kicker {
  margin: 0 0 0.6rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wick);
}
.lab__kicker a {
  color: inherit;
  text-decoration: none;
}
.lab__kicker a:hover {
  text-decoration: underline;
}

.labcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}
.labcard__link {
  display: block;
  height: 100%;
  border: 1px solid var(--seam);
  border-radius: 12px;
  background: var(--bg-raised);
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.labcard__link:hover,
.labcard__link:focus-visible {
  border-color: #ffc845;
  transform: translateY(-2px);
}
.labcard__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.labcard__text {
  display: grid;
  gap: 0.35rem;
  padding: 1.1rem 1.25rem 1.3rem;
}
.labcard__title {
  font-family: 'Space Grotesk', var(--display);
  font-size: 1.6rem;
  font-weight: 700;
  color: #ffc845;
}
.labcard__tagline {
  font-weight: 700;
}
.labcard__status {
  font-size: 0.9rem;
  color: var(--muted);
}
.lab__more {
  margin-top: 3rem;
  color: var(--muted);
}
.lab__more a {
  color: var(--fg);
}

.labpage__hero,
.labpage__section {
  max-width: var(--wide);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.labpage__hero {
  padding-block: clamp(2rem, 6vw, 4.5rem) 1rem;
}
.labpage__title {
  margin: 0;
  font-size: clamp(2.8rem, 7vw, 5.4rem);
  color: var(--accent);
}
.labpage__tagline {
  margin: 0.4rem 0 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 700;
}
.labpage__pitch {
  max-width: var(--measure);
  margin: 1.2rem 0 1.4rem;
  font-size: 1.125rem;
  color: var(--muted);
}
.labpage__section {
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 1px solid var(--seam);
}
.labpage__section h2 {
  margin-top: 0;
}
.labpage__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.5rem, 5vw, 4rem);
}
.labpage__cols p {
  max-width: var(--measure);
}

.gameframe {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--seam);
  border-radius: 14px;
  background: #09090c;
  overflow: hidden;
}
.gameframe__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lab__note {
  max-width: var(--measure);
  margin-top: 0.9rem;
  font-size: 0.92rem;
  color: var(--muted);
}
.lab__note a,
.linkbutton {
  color: var(--fg);
}
.linkbutton {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.commands {
  display: grid;
  gap: 0.6rem;
  margin: 1.2rem 0 1.6rem;
}
.commands div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 1rem;
  border-radius: 10px;
  background: var(--bg-raised);
}
.commands dt {
  font-family: var(--display);
  font-weight: 700;
  color: var(--accent);
}
.commands dd {
  margin: 0;
}

.live {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 56rem;
  border: 1px solid var(--seam);
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 200, 69, 0.12), transparent 60%),
    var(--bg-raised);
  overflow: hidden;
}
.live__start {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 0.9rem;
  width: 100%;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-weight: 800;
  font-size: 1.1rem;
  cursor: pointer;
}
.live__play {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  background: var(--accent);
  clip-path: circle(50%);
  position: relative;
}
.live__play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 0.8rem 0 0.8rem 1.35rem;
  border-color: transparent transparent transparent var(--accent-ink);
}
.live__start:hover .live__play,
.live__start:focus-visible .live__play {
  filter: brightness(1.1);
}
.live__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 40rem) {
  .commands div {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}