/* The studio's pages, /about, /press and /privacy (platform/235): what only they need, on
   catalog.css's tokens and nothing else. No new colour and no shadow; the only
   glows are the two 0049 allows everywhere (a primary button hovered or focused,
   the rail's current page). The hero is graphite like the Party capsule but
   without its glow: 0049's list of glowing surfaces is the whole list. Loaded by
   those two pages only, so the front page carries none of it. */
.studio-section {
  scroll-margin-top: 92px;
}
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.crumbs a:hover {
  color: var(--text);
}
.crumbs .ico {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}
.crumbs [aria-current] {
  color: var(--text);
}

/* ---- the hero: the capsule's graphite and scrim, a still per game behind it ---- */
.studio-hero {
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background: #161616;
  color: #f4f4f2;
  padding: 44px 44px 40px;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 18px;
}
.studio-hero.compact {
  min-height: 300px;
}
.studio-hero-art {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.studio-hero-art img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Sized against a pure-white pixel of art, like the capsule's: the copy column
   holds 4.5:1 or better, and what is right of it is left to the games. */
.studio-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      0deg,
      rgba(18, 18, 18, 0.88) 0%,
      rgba(18, 18, 18, 0.3) 55%,
      rgba(18, 18, 18, 0.5) 100%
    ),
    linear-gradient(
      90deg,
      rgba(18, 18, 18, 0.92) 0,
      rgba(18, 18, 18, 0.84) 560px,
      rgba(18, 18, 18, 0.4) 85%,
      rgba(18, 18, 18, 0.25) 100%
    );
}
.studio-hero h1 {
  font-size: clamp(48px, 6vw, 92px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #f4f4f2;
}
.studio-hero h1 span {
  color: var(--point);
}
.studio-kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e2e2de;
}
.studio-lede {
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.55;
  color: #e2e2de;
}
.studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
/* A second button on graphite: the ghost's shape, the glass's ground. */
.btn-on-dark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  color: #f4f4f2;
}
.btn-on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
}
@container (max-width: 680px) {
  .studio-hero-art {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-hero-art img:nth-child(n + 5) {
    display: none;
  }
  .studio-hero-art::after {
    background: rgba(18, 18, 18, 0.84);
  }
}

/* ---- prose and panels ---- */
.prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 66ch;
  font-size: 16px;
  line-height: 1.65;
}
.prose a,
.text-link {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent-edge);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
/* The privacy policy: numbered headings over plain paragraphs, in the prose column. */
.policy h2 {
  margin-top: 14px;
  font-size: 20px;
}
.policy h2:first-child {
  margin-top: 0;
}
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.split-even {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--card);
}
.panel h3 {
  font-size: 20px;
}
.panel p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
}
.eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 44px;
  font-size: 15px;
}
.text-link .ico {
  width: 16px;
  height: 16px;
}

/* ---- the cast: the bear and friends, on the page's own graphite ---- */
.cast {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cast img {
  width: min(100%, 560px);
  height: auto;
}
.cast figcaption {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- the games: a compact list, not a second shelf ---- */
.game-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.game-group + .game-group {
  margin-top: 8px;
}
.game-group .side-label {
  padding: 0;
}
.game-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 10px;
}
.game-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--card);
}
.game-thumb {
  flex: none;
  width: 104px;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--card-2);
}
.game-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.game-name {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
}
.game-tagline {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ---- facts (the fact sheet, the company) ---- */
.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 24px;
  margin: 4px 0 0;
}
.facts dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}
.facts dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.facts dd small {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

/* ---- the press kit: logos and screenshots ---- */
.sub-head {
  font-size: 17px;
  font-weight: 700;
  margin-top: 8px;
}
.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 16px;
}
.asset {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--card);
}
/* The art's own ground, fixed: a logo is judged on the colour it will be printed
   on, not on whatever this page happens to wear. */
.asset-art {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}
.asset-art.on-light {
  background: #f6f4ef;
}
.asset-art.on-dark {
  background: #121212;
}
.asset-art img {
  max-width: 78%;
  max-height: 100%;
  object-fit: contain;
}
.asset-foot,
.shot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
}
.asset-name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
}
.asset-name small {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.shot-foot h3 {
  font-size: 16px;
}
.shot-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.kit-size {
  font-size: 13px;
  color: var(--muted);
}

/* ---- work with us: the band, the one change of room ---- */
.cta-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin: 0 -32px;
  padding: 26px 32px;
  background: var(--sky);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band h2 {
  font-size: 22px;
}
.cta-band p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--muted);
  max-width: 60ch;
}

.mail {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .split,
  .split-even {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 720px) {
  .studio-hero {
    padding: 28px 22px 24px;
    min-height: 340px;
  }
  .studio-hero.compact {
    min-height: 260px;
  }
  .studio-kicker {
    font-size: 12px;
    letter-spacing: 0.18em;
  }
  .studio-actions .btn {
    flex: 1 1 100%;
  }
  .cta-band {
    margin: 0 -16px;
    padding: 22px 16px;
  }
  .cta-band .btn {
    flex: 1 1 100%;
  }
  .game-thumb {
    width: 88px;
  }
  .panel {
    padding: 20px;
  }
}
/* Stacked, a fact's label sits over its value instead of beside it. */
@media (max-width: 460px) {
  .facts {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .facts dd + dt {
    margin-top: 12px;
  }
  .crumbs .crumb-home,
  .crumbs .ico {
    display: none;
  }
}