/* Portfolio layout layer. Game-specific art direction lives in styles.css. */
:root { --studio-width: 1440px; --studio-gutter: clamp(20px, 5vw, 80px); }
html { scrollbar-gutter: stable; }
body { font-family: Inter, 'Microsoft YaHei', system-ui, sans-serif; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: 200; top: 8px; left: 8px; padding: 12px 20px; color: #080d16; background: #d1e0ff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.nav { min-height: 76px; padding: 16px var(--studio-gutter); gap: 20px; }
.nav .logo { color: var(--text); white-space: nowrap; font-size: .82rem; }
.nav-links { align-items: center; }
.nav-links a, .lang-toggle { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.nav a:hover { color: #fff; }
.studio-home { background: #080d15; }
.studio-home .hero { max-width: var(--studio-width); margin: auto; min-height: min(880px, 95svh); padding: 170px var(--studio-gutter) 100px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 64px; }
.hero-content { position: relative; z-index: 2; min-width: 0; }
.studio-home .hero h1 { font-size: clamp(3rem, 5.8vw, 5.8rem); letter-spacing: -.055em; line-height: 1.13; text-wrap: balance; }
.studio-home .hero-text { max-width: 35rem; font-size: 1.02rem; }
.studio-home .hero .cta { color: #080d15; background: #c7d8fc; border-color: #c7d8fc; border-radius: 2px; font-weight: 700; }
.studio-home .hero-gradient { z-index: -1; pointer-events: none; }
.hero-feature { position: relative; isolation: isolate; min-height: 430px; display: flex; justify-content: flex-end; flex-direction: column; gap: 12px; padding: 36px; overflow: hidden; text-decoration: none; color: #f3f6ff; background: radial-gradient(ellipse at 60% 30%, #27375c, #111b2c 50%, #090e19); border: 1px solid #43506b; border-radius: 120px 8px 8px 8px; transition: border-color .3s; }
.hero-feature:hover { border-color: #a9c5ff; }
.hero-feature-title { font-size: clamp(2.1rem, 3.1vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; }
.hero-feature-en { color: #a7bce2; font: .72rem/1.5 Consolas, monospace; letter-spacing: .17em; }
.hero-feature-link { margin-top: 20px; padding-top: 20px; border-top: 1px solid #61708d; font-size: .85rem; }
.hero-feature-orbit { position: absolute; inset: -80px -100px 130px 0; z-index: -1; transform: rotate(-30deg); }
.hero-feature-orbit i { position: absolute; inset: 14%; border: 1px solid #788fbf; border-radius: 50%; animation: orbit-turn 45s linear infinite; }
.hero-feature-orbit i:nth-child(2) { inset: 23%; border-color: #565d98; animation-duration: 65s; }
.hero-feature-orbit i:nth-child(3) { inset: 32%; border-color: #a3c9d2; animation-duration: 85s; }
.hero-feature-orbit i::before { content: ''; position: absolute; top: 50%; left: -4px; width: 8px; height: 8px; border-radius: 50%; background: #c9e5ff; box-shadow: 0 0 24px #93bfff; }
@keyframes orbit-turn { to { rotate: 360deg; } }
.studio-home main { max-width: var(--studio-width); margin: auto; }
.studio-home .section-title { padding: 64px var(--studio-gutter) 32px; border-top: 1px solid var(--line); }
.studio-home .filter-bar { padding: 0 var(--studio-gutter); align-items: center; gap: 8px; }
.filter-bar button { min-height: 44px; border-radius: 24px; padding: 10px 20px; transition: background .2s, border-color .2s; }
.filter-bar button.active { background: #1d2c46; }
.work-search { flex: 1 1 260px; margin-left: auto; max-width: 380px; }
.work-search input { width: 100%; height: 46px; padding: 0 16px; border: 1px solid #45516a; border-radius: 6px; background: #101825; color: #f3f6ff; }
.work-search input:focus-visible { outline: 2px solid #a8c3ff; outline-offset: 3px; }
.work-search input::placeholder { color: #a3afc4; }
.work-count { padding: 0 var(--studio-gutter); margin: 20px 0; color: #a0b0c8; font: .75rem/1.5 Consolas, monospace; }
.studio-home .project-grid { padding: 0 var(--studio-gutter) 90px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.project-card { min-width: 0; min-height: 0; border-radius: 8px; grid-template-rows: auto 1fr; transition: border-color .25s; }
.project-card:hover { border-color: #7085aa; }
.project-card-media { aspect-ratio: 16 / 10; min-height: 0; padding: 24px; }
.project-card-media img { max-height: none; min-height: 0; object-fit: contain; }
.project-card-content { min-height: 180px; padding: 28px; justify-content: flex-start; }
.project-card h3 { margin: 14px 0 0; font-size: clamp(1.35rem, 2.5vw, 2rem); letter-spacing: -.035em; }
.project-card p { font-size: .9rem; color: #abb9cf; line-height: 1.8; }
.studio-home .about { max-width: none; padding: 80px var(--studio-gutter); border-top: 1px solid var(--line); background: #0e1622; }
.about-copy { margin-top: 28px; }
.studio-meta { padding-top: 40px; }
.footer { gap: 16px; }
.project-wrapper { width: 100%; max-width: var(--studio-width); padding: 120px var(--studio-gutter) 80px; }
.project-wrapper > *, .feature-copy, .feature-art, .media-group { min-width: 0; }
.project-headline { overflow-wrap: anywhere; }
.project-headline h1 { line-height: 1.17; text-wrap: balance; }
.project-wrapper > .back-link { margin: 0 0 24px; }
.project-section-nav { width: 100%; max-width: 100%; top: 76px; scrollbar-width: thin; margin: 32px 0; overscroll-behavior-inline: contain; }
.project-section-nav a { padding: 16px; white-space: nowrap; }
.project-section-nav a:focus-visible { outline-offset: -4px; }
.web-feature, .project-video, .project-media { scroll-margin-top: 145px; }
.web-feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.feature-copy p, .feature-list li, .feature-facts dd { overflow-wrap: anywhere; }
.feature-facts { grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); }
.feature-art img { height: auto; }
.media-slide-frame img { height: auto; }
.theme-re-out-the-universe .project-visual::before { content: 'RE: / LOCAL NETWORK EDITION'; }
.theme-re-out-the-universe .web-feature::before { content: 'DESIGN / ' attr(data-index); }
.theme-the-way-home .feature-kicker { color: #a43a36; }
.theme-the-way-home .project-meta { color: #a43a36; }
body[data-project='the-way-home'] .lang-toggle { background: #f7efdf; border-color: #65837a; }
.theme-the-way-home .feature-art { border-radius: 20px; }
.lightbox { z-index: 150; padding: 72px 20px 28px; }
.lightbox img { max-width: 100%; max-height: calc(100svh - 110px); object-fit: contain; }
.close-btn { width: 48px; height: 48px; background: #162137; border-radius: 50%; }
.reveal { opacity: 1; transform: none; }
.reveal.show { animation: studio-reveal .55s ease both; }
@keyframes studio-reveal { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .studio-home .hero { min-height: 0; grid-template-columns: 1fr; gap: 36px; padding-top: 150px; }
  .hero-feature { min-height: 340px; }
  .web-feature { padding: 32px; gap: 28px; }
}
@media (max-width: 600px) {
  .nav { flex-direction: row; flex-wrap: wrap; gap: 4px 12px; padding: 12px 20px; }
  .nav .logo { max-width: none; font-size: .74rem; }
  .nav-links { gap: 12px; flex-wrap: wrap; }
  .studio-home .nav-links { width: 100%; justify-content: space-between; }
  .nav-links a { font-size: .68rem; }
  .nav-links a[href='#contact'] { display: none; }
  .hero-feature { padding: 26px; }
  .studio-home .hero h1 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .studio-home .project-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .work-search { max-width: none; flex-basis: 100%; margin-top: 12px; }
  .filter-bar button { padding: 10px 16px; }
  .project-wrapper { padding-top: 110px; }
  .project-headline { padding: 22px; margin-inline: 0; width: 100%; }
  .project-section-nav { top: 72px; }
  .web-feature { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; }
  .web-feature:nth-child(even) .feature-copy, .web-feature:nth-child(even) .feature-art { order: initial; }
  .feature-art { min-height: 180px; }
  .section-nav-label { display: none; }
  .feature-facts { grid-template-columns: minmax(0, 1fr); }
  .project-signal { position: static; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}