/* The studio landing page; shared game and policy layouts remain in site.css. */
.studio-site { background: #fafbf8; }
.studio-site .site-header { background: rgba(250,251,248,.95); }
.studio-site .nav-shell { min-height: 88px; }
.studio-site .brand { font-size: 1.12rem; }
.studio-site .nav-links { gap: 32px; }
.studio-site .button { border-radius: 8px; padding: 16px 22px; box-shadow: none; }
.studio-site .button-primary { background: #0877d1; }
.studio-site .button-primary:hover { background: #045ca7; }
.studio-hero { padding: 0 0 26px; }
.studio-intro { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0 42px; color: #637183; font-size: .76rem; letter-spacing: .11em; text-transform: uppercase; }
.flagship-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(34px,6vw,82px); align-items: center; }
.flagship-copy { padding: 15px 0 24px; }
.flagship-copy .eyebrow { font-size: .72rem; margin-bottom: 24px; }
.flagship-copy h1 { margin: 0; font-size: clamp(3.5rem,5.9vw,5.5rem); line-height: 1.03; letter-spacing: -.065em; font-weight: 750; }
.flagship-copy h1 em { color: #0877d1; font-weight: inherit; font-style: normal; }
.flagship-name { display: flex; align-items: center; gap: 13px; margin-top: 34px; }
.project-number { font: 12px/1 ui-monospace,monospace; padding: 5px 7px; border: 1px solid #d5dde5; color: #637183; border-radius: 4px; }
.flagship-name h2 { margin: 0; font-size: 1.32rem; letter-spacing: -.03em; }
.flagship-description { font-size: 1.04rem; color: #637183; max-width: 450px; margin-top: 12px; line-height: 1.75; }
.flagship-website { margin-top: 22px; }
.flagship-website .button { min-height: 56px; padding-inline: 26px; }
.flagship-website p { max-width: 360px; color: #637183; font-size: .82rem; margin: 10px 0 0; }
.flagship-details { max-width: 450px; color: #637183; font-size: .85rem; line-height: 1.7; margin: 24px 0 0; }
.flagship-copy .hero-actions { align-items: center; gap: 18px; margin-top: 25px; }
.flagship-test-guide { max-width: 450px; color: #637183; font-size: .85rem; line-height: 1.65; margin: 12px 0 0; }
.studio-text-link { font-weight: 650; color: #15324a; text-decoration: none; font-size: .9rem; }
.studio-text-link span { margin-left: 7px; }
.release-note { display: flex; align-items: center; gap: 8px; font-size: .75rem; color: #637183; margin: 18px 0 0; }
.release-note > span { width: 6px; height: 6px; background: #8d6d21; border-radius: 50%; }
.lumen-stage { min-height: 530px; align-self: stretch; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; background: #0d2540; border-radius: 4px; }
.lumen-stage { text-decoration: none; transition: background-color 160ms ease, box-shadow 160ms ease; }
.lumen-stage:hover { color: white; background: #123451; box-shadow: 0 14px 36px #0d254026; }
.lumen-stage:focus-visible { outline: 3px solid #0877d1; outline-offset: 5px; }
.lumen-stage::before, .lumen-stage::after { pointer-events: none; }
.lumen-stage::before { content: ''; position: absolute; width: 390px; height: 390px; border: 1px solid #3a4e60; border-radius: 50%; opacity: .65; }
.lumen-stage::after { content: ''; position: absolute; width: 530px; height: 530px; border: 1px solid #263e54; border-radius: 50%; }
.stage-caption { position: absolute; top: 25px; left: 26px; right: 26px; display: flex; justify-content: space-between; color: #8da9c0; font: 9px/1.3 ui-monospace,monospace; letter-spacing: .11em; }
.lumen-emblem { position: relative; z-index: 1; width: 180px; height: 180px; border-radius: 38px; overflow: hidden; box-shadow: 0 22px 50px #020d2180; }
.lumen-emblem img { width: 100%; height: 100%; object-fit: cover; }
.stage-title { position: relative; z-index: 1; font-size: 3.2rem; line-height: 1; letter-spacing: -.06em; font-weight: 650; margin: 26px 0 0; }
.stage-title span { font-weight: 350; color: #96afc2; margin-left: 7px; }
.stage-visit { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 28px; margin-top: 34px; padding: 14px 21px; border-radius: 8px; color: #0d2540; background: #fff; font-size: .92rem; font-weight: 750; }
.stage-domain { position: relative; z-index: 1; margin-top: 12px; color: #b4c5d3; font-size: .78rem; }
.stage-platforms { position: absolute; bottom: 25px; left: 26px; right: 26px; display: flex; justify-content: space-between; color: #b4c5d3; font: 10px/1.3 ui-monospace,monospace; letter-spacing: .08em; }
.project-strip { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 25px 0; margin-top: 30px; border-top: 1px solid #dce3e8; font-size: .8rem; color: #637183; }
.project-strip p { margin: 0; }
.project-strip strong { color: #304557; font-weight: 650; }
.project-strip a { white-space: nowrap; color: #15324a; text-decoration: none; font-weight: 650; }
.project-strip a span { margin-left: 6px; }
.studio-projects { padding: 65px 0 80px; background: #eef2f3; }
.project-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 27px; }
.project-section-heading .eyebrow { margin: 0; font-size: .72rem; }
.studio-index { color: #788894; font: 10px/1.3 ui-monospace,monospace; letter-spacing: .1em; }
.succi-feature { display: grid; grid-template-columns: 1.25fr 1fr; gap: 60px; align-items: center; }
.succi-feature-image { position: relative; overflow: hidden; display: grid; min-height: 360px; align-content: center; background: #081221; padding: 32px; border-radius: 4px; text-decoration: none; }
.succi-feature-image img { width: 100%; border-radius: 4px; }
.succi-feature-image > span { display: flex; justify-content: space-between; margin-top: 24px; color: #9daec0; font: 10px/1.3 ui-monospace,monospace; letter-spacing: .12em; }
.available-tag { display: flex; gap: 8px; align-items: center; color: #4f6e5b; font-size: .72rem; font-weight: 650; }
.available-tag span { width: 5px; height: 5px; background: #4f6e5b; border-radius: 50%; }
.succi-feature-copy h2 { font-size: clamp(2.3rem,4vw,3.5rem); letter-spacing: -.06em; line-height: 1.08; margin: 18px 0 22px; }
.succi-name { display: flex; align-items: center; gap: 11px; }
.succi-name img { border-radius: 10px; width: 37px; height: 37px; }
.succi-name strong { font-size: 1.05rem; letter-spacing: .08em; }
.succi-feature-copy p { color: #637183; font-size: .94rem; max-width: 390px; }
.succi-feature-copy .button { min-height: 45px; padding: 12px 18px; margin-top: 4px; }
.store-text-links { display: flex; gap: 22px; margin-top: 18px; font-size: .74rem; font-weight: 600; }
.store-text-links a { color: #455a6b; text-decoration: none; }
.studio-about { padding: 90px 0; }
.studio-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; }
.studio-about h2 { font-size: clamp(2.1rem,3.6vw,3.3rem); letter-spacing: -.055em; line-height: 1.13; margin: 0; }
.studio-about .eyebrow { font-size: .7rem; }
.studio-about-copy p { color: #637183; margin: 0 0 16px; font-size: .98rem; }
.studio-about-copy .studio-text-link { display: inline-block; margin-top: 6px; }
.trademark-note { font-size: .72rem; line-height: 1.6; color: #99a8b4; max-width: 820px; margin-top: 24px; }
@media (max-width: 980px) {
 .flagship-grid { gap: 35px; }
 .lumen-stage { min-height: 510px; }
 .flagship-copy .hero-actions { gap: 20px; }
 .flagship-copy h1 { font-size: clamp(3rem,6vw,4rem); }
 .succi-feature { gap: 32px; }
 .studio-about-grid { gap: 45px; }
 .project-strip { align-items: flex-start; }
}
@media (max-width: 760px) {
 .flagship-grid,.succi-feature,.studio-about-grid { grid-template-columns: 1fr; }
 .studio-site .nav-shell { min-height: 76px; }
 .studio-site .nav-links { gap: 20px; }
 .studio-intro { padding-bottom: 24px; font-size: .65rem; }
 .flagship-copy h1 { font-size: clamp(3.5rem,10vw,5rem); }
 .flagship-description { max-width: 520px; }
 .lumen-stage { min-height: 430px; }
 .flagship-copy { padding-bottom: 0; }
 .project-strip { flex-direction: column; gap: 12px; margin-top: 25px; }
 .studio-projects { padding: 50px 0 60px; }
 .succi-feature-image { min-height: 310px; }
 .succi-feature-copy p { max-width: 520px; }
 .studio-about { padding: 65px 0; }
 .studio-about-grid { gap: 28px; }
 .studio-site .nav-links li:first-child { display: block; }
 .studio-site .nav-links li:nth-child(3) { display: none; }
}
@media (max-width: 420px) {
 .studio-site .nav-links { gap: 15px; }
 .studio-site .nav-links a { font-size: .8rem; }
 .studio-intro { font-size: .6rem; letter-spacing: .05em; }
 .flagship-copy h1 { font-size: 3.35rem; }
 .lumen-stage { min-height: 390px; }
 .succi-feature-image { padding: 22px; min-height: 250px; }
 .project-section-heading { gap: 10px; }
 .studio-index { font-size: 9px; }
}