/* Studio composition. Shared typography, palette and navigation: brand.css. */
.studio-intro { display: grid; grid-template-columns: 1.5fr 1fr; align-items: end; gap: 70px; padding-block: 74px 66px; }
.studio-intro h1 { margin-top: 25px; font-size: clamp(3.1rem, 6.1vw, 5.5rem); }
.studio-intro h1 .tone-secondary { color: var(--ink-secondary); }
.intro-aside { max-width: 340px; border-left: 1px solid var(--line); padding-left: 28px; margin-bottom: 7px; }
.intro-aside p { font-size: .95rem; line-height: 1.85; }
.intro-aside .text-link { margin-top: 19px; }
.collection { padding-bottom: 76px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-block: 22px; }
.section-heading h2 { font: .68rem / 1.7 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.section-note { color: var(--ink-secondary); font: .64rem / 1.7 var(--mono); }
.flagship { display: grid; grid-template-columns: .94fr 1.25fr; border: 1px solid var(--line); background: var(--surface); }
.flagship-copy { display: flex; flex-direction: column; justify-content: center; align-items: start; min-width: 0; padding: 42px; }
.flagship-copy .eyebrow { font-size: .61rem; }
.flagship-copy h3 { margin-top: 22px; font-size: 3.65rem; letter-spacing: -.065em; }
.flagship-description { margin-top: 18px; font-size: .97rem; max-width: 350px; }
.game-details { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 23px 0 29px; list-style: none; color: #c8c9d0; font: .68rem / 1.7 var(--mono); }
.game-details li { border-bottom: 1px solid #484a54; padding-bottom: 5px; }
.feature-actions { display: flex; align-items: start; flex-direction: column; gap: 12px; }
.flagship-art { position: relative; min-width: 0; min-height: 495px; background: #1b1c20; overflow: hidden; }
.world-art { position: absolute; height: 100%; width: 100%; object-fit: cover; object-position: 50% 50%; }
.world-label { position: absolute; top: 20px; right: 20px; max-width: calc(100% - 40px); border: 1px solid #ffffff80; padding: 7px 12px; background: #111214ed; color: #fff; font: .63rem / 1.6 var(--mono); }
.project-caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 17px; border-bottom: 1px solid var(--line); color: var(--ink-secondary); font: .65rem / 1.7 var(--mono); }
.next-chapter { display: grid; grid-template-columns: .65fr 1.35fr; gap: 50px; padding: 46px 0 0; }
.next-chapter h3 { font-size: 1.75rem; letter-spacing: -.045em; }
.next-chapter p:not(.eyebrow) { max-width: 600px; margin-top: 13px; font-size: .94rem; }
.approach { padding-block: 76px 79px; border-bottom: 1px solid var(--line); }
.approach-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 70px; }
.approach h2 { margin-top: 22px; font-size: clamp(2rem, 3.5vw, 3rem); }
.principles { display: grid; gap: 26px; }
.principle { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.principle > span { color: var(--ink-secondary); font: .66rem / 1.7 var(--mono); padding-top: 3px; }
.principle h3 { font-size: 1.1rem; letter-spacing: -.025em; }
.principle p { font-size: .88rem; margin-top: 10px; }
@media (max-width: 1000px) {
  .studio-intro { gap: 35px; }
  .flagship-copy { padding: 32px; }
  .flagship-art { min-height: 510px; }
  .approach-inner { gap: 38px; }
}
@media (max-width: 760px) {
  .studio-intro { grid-template-columns: 1fr; gap: 28px; padding-block: 45px 36px; }
  .studio-intro h1 { font-size: clamp(2.85rem, 9.7vw, 4.5rem); margin-top: 23px; }
  .intro-aside { border-left: 0; padding-left: 0; max-width: 510px; margin: 0; }
  .intro-aside p { font-size: .96rem; }
  .intro-aside .text-link { margin-top: 10px; }
  .collection { padding-bottom: 49px; }
  .section-heading { padding-block: 20px; gap: 16px; flex-wrap: wrap; }
  .section-heading h2 { font-size: .63rem; }
  .section-note { font-size: .6rem; }
  .flagship { grid-template-columns: 1fr; }
  .flagship-art { grid-row: 1; min-height: 0; aspect-ratio: 16 / 11; }
  .flagship-copy { padding: 29px 26px; }
  .flagship-copy h3 { font-size: 3rem; margin-top: 17px; }
  .flagship-description { max-width: 500px; }
  .world-label { top: 14px; right: 14px; padding: 6px 10px; }
  .game-details { margin-block: 21px 25px; }
  .project-caption { font-size: .6rem; }
  .next-chapter { grid-template-columns: 1fr; gap: 18px; padding-top: 30px; }
  .next-chapter h3 { font-size: 1.6rem; }
  .approach { padding-block: 53px; }
  .approach-inner { grid-template-columns: 1fr; gap: 33px; }
  .approach h2 { font-size: 2.3rem; }
}