/* The about page (/about), on /pages.css's sky and card: the studio, its games as stickers on the page, how it uses AI,
   the work for clients, the founder and the company. Plain HTML, readable without the town (or without scripts) */
.about .head { max-width: 40em; }
.about .lede + .lede { margin-top: -0.2em; }

.section { margin-top: 44px; }
.section > .pill { margin-bottom: 0.7em; }
.section-title {
  margin: 0 0 0.5em;
  font: 900 clamp(1.4rem, 4.6cqi, 1.9rem)/1 'Ginto', 'gg sans', system-ui, sans-serif;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.section p { max-width: 40em; }
.card a:not(.sticker-button):not(.shot-link) { color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 2px; }

/* ---- The games: each a sticker on the page, a little crooked ---- */
.games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 28px;
  margin: 22px 0 0;
  padding: 6px;
  list-style: none;
}
@container page (max-width: 640px) {
  .games { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
.game {
  --tilt: -0.8deg;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 6px var(--paper), 4px 6px 0 6px rgba(28, 28, 28, 0.2);
  overflow: hidden;
  rotate: var(--tilt);
}
.game:nth-child(2n) { --tilt: 0.8deg; }
.game .shot-link { display: block; border-bottom: 2.5px solid var(--ink); }
.game img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--not-white); }
.game .body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.game .kicker {
  margin: 0 0 0.4em;
  color: var(--orange);
  font: 900 0.66rem/1.2 'Ginto', 'gg sans', system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.game h3 { margin: 0 0 0.3em; font: 900 1.3rem/1 'Ginto', 'gg sans', system-ui, sans-serif; text-transform: uppercase; }
.game p { margin: 0 0 0.8em; font-size: 0.95rem; line-height: 1.5; }
.stats { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 0.9em; padding: 0; list-style: none; font-size: 0.85rem; line-height: 1.3; }
.stats strong { display: block; font: 900 1.05rem/1.1 'Ginto', 'gg sans', system-ui, sans-serif; }
.game .links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: auto; font-weight: 700; font-size: 0.95rem; }

.also { margin-top: 26px; font-size: 0.95rem; }

/* ---- AI and client work: plain lists ---- */
.points { margin: 0.6em 0 0; padding-left: 1.25em; max-width: 40em; }
.points li { margin: 0.45em 0; padding-left: 0.2em; }
.points li::marker { color: var(--orange); }

/* ---- The founder: a name card with the outside links that show who runs the studio ---- */
.person {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 0 0 2.5px var(--ink), 0 0 0 6px var(--paper), 4px 6px 0 6px rgba(28, 28, 28, 0.2);
  rotate: -0.6deg;
}
.person + .person { margin-top: 26px; rotate: 0.6deg; }
.person h3 { margin: 0 0 0.2em; font: 900 1.5rem/1 'Ginto', 'gg sans', system-ui, sans-serif; }
.person p { margin: 0; }
.person .role { color: var(--orange); font: 900 0.7rem/1.2 'Ginto', 'gg sans', system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5em; }
.person .actions { display: flex; flex-wrap: wrap; gap: 18px; padding: 6px; }
.person .sticker-button { height: 40px; padding: 0 15px; font-size: 0.75rem; }

/* ---- The company: the small print, in full ---- */
.company { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 22px; margin: 0.8em 0 0; }
.company dt { font-weight: 700; }
.company dd { margin: 0; }
@container page (max-width: 420px) {
  .company { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .company dd { margin-bottom: 8px; }
}