:root {
    color-scheme: dark;
    --ink: #171916;
    --paper: #f0eee4;
    --muted: #b0b3a6;
    --lime: #d4ee85;
    --line: #41453b;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
::selection { color: var(--ink); background: var(--lime); }
a { color: inherit; text-decoration: none; text-underline-offset: 5px; }
a:hover { text-decoration: underline; }
a:focus-visible, video:focus-visible { outline: 3px solid var(--lime); outline-offset: 6px; }
img, video { display: block; max-width: 100%; }
button, a, video { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p, figure { margin: 0; }
.shell { width: min(1360px, calc(100% - 112px)); margin-inline: auto; }
.eyebrow, .release-label, .section-label, .original-genre, figcaption, .image-index { font: 500 11px/1.5 var(--mono); letter-spacing: .09em; }
.skip-link { position: absolute; z-index: 2; top: -80px; left: 16px; padding: 14px 20px; color: var(--ink); background: var(--lime); }
.skip-link:focus { top: 12px; }
.site-header { min-height: 116px; display: flex; justify-content: space-between; align-items: center; gap: 28px; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 13px; flex-shrink: 0; }
.wordmark:hover { text-decoration: none; }
.wordmark > span { font-size: 18px; font-weight: 750; line-height: 1.05; letter-spacing: -.045em; }
.wordmark small { display: block; font: 500 10px/1.1 var(--mono); letter-spacing: .25em; margin-top: 6px; }
.site-header nav { display: flex; gap: 37px; align-items: center; }
.site-header nav a { display: inline-flex; min-height: 44px; align-items: center; gap: 20px; font-size: 13px; }
.site-header nav a:last-child { color: var(--lime); }
.hero { padding-top: 43px; }
.hero-kicker { display: flex; align-items: center; justify-content: space-between; color: var(--muted); }
.hero-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 52px; align-items: end; padding: 43px 0 55px; }
h1 { font-size: clamp(78px, 8.8vw, 132px); line-height: .96; font-weight: 600; letter-spacing: -.065em; }
h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--lime); letter-spacing: -.055em; }
.period { color: var(--lime); }
.hero-aside { padding-bottom: 8px; }
.hero-aside > p { font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; letter-spacing: -.02em; margin: 24px 0 28px; }
.sound-bars { display: flex; align-items: center; height: 82px; gap: 6px; }
.sound-bars i { display: block; flex: 1; max-width: 8px; height: 20%; background: var(--lime); }
.sound-bars i:nth-child(3n) { height: 54%; }
.sound-bars i:nth-child(4n) { height: 76%; }
.sound-bars i:nth-child(5n) { height: 93%; }
.sound-bars i:nth-child(7n) { height: 40%; }
.sound-bars i:nth-child(9n) { height: 100%; }
.text-link { display: inline-flex; align-items: center; gap: 25px; min-height: 44px; font-size: 13px; font-weight: 500; }
.hero-aside .text-link { color: var(--lime); }
.hero-foot { display: flex; justify-content: space-between; padding: 20px 0; border-block: 1px solid var(--line); color: var(--muted); }
.games { padding-top: 82px; }
.section-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; color: var(--muted); }
.section-label h2 { font: inherit; }
.game-heading { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 50px; align-items: end; margin-bottom: 34px; }
.release-label { color: var(--lime); display: flex; align-items: center; gap: 9px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
.game-series { display: block; font-size: clamp(20px, 2.1vw, 30px); font-weight: 450; line-height: 1.3; letter-spacing: -.03em; margin-top: 23px; }
.game-name { display: block; font-size: clamp(48px, 6vw, 88px); line-height: 1.06; font-weight: 550; letter-spacing: -.06em; }
.feature-intro { padding-bottom: 5px; }
.game-hook { font-size: clamp(23px, 2.3vw, 32px); font-weight: 500; letter-spacing: -.035em; margin-bottom: 12px; }
.feature-intro > p:last-child { color: var(--muted); font-size: 15px; line-height: 1.65; max-width: 385px; }
.trailer { background: #0b0d0a; border: 1px solid var(--line); }
.trailer video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #050705; }
figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 17px 22px; color: var(--muted); background: #20231d; font-size: 10px; }
figcaption > span:first-child { color: var(--paper); }
.caption-divider { margin-inline: 10px; color: #727969; }
.game-details { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 30px 0 50px; }
.game-notes { display: flex; padding: 0; list-style: none; margin: 0; gap: 32px; }
.game-notes li { padding-right: 30px; border-right: 1px solid var(--line); }
.game-notes li:last-child { border: 0; padding: 0; }
.game-notes strong { display: block; font-size: 24px; line-height: 1.3; font-weight: 500; letter-spacing: -.045em; }
.game-notes span { display: block; margin-top: 5px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.game-action { flex-shrink: 0; max-width: 100%; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 50px; padding: 15px 20px; font-size: 13px; font-weight: 650; line-height: 1.4; border: 1px solid transparent; transition: background-color .16s ease, color .16s ease; }
.button:hover { text-decoration: none; }
.button-lime { background: var(--lime); color: var(--ink); }
.button-lime:hover { background: var(--paper); }
.game-action p { margin-top: 12px; text-align: center; color: var(--muted); font-size: 11px; }
.original-game { padding: 54px 0 96px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 58px; align-items: center; }
.original-image { position: relative; align-self: stretch; min-height: 400px; background: #0c100d; border: 1px solid var(--line); }
.original-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.image-index { position: absolute; top: 16px; left: 16px; padding: 7px 12px; background: var(--paper); color: var(--ink); }
.original-copy { padding-block: 16px; }
.original-copy .release-label { font-size: 10px; }
.original-copy h3 { font-size: clamp(46px, 5.6vw, 80px); font-weight: 500; line-height: .99; letter-spacing: -.055em; margin: 22px 0; }
.original-genre { color: var(--muted); margin-bottom: 20px; font-size: 10px; }
.original-copy > p:not(.release-label, .original-genre) { color: var(--muted); font-size: 15px; line-height: 1.7; margin-top: 12px; max-width: 430px; }
.original-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 26px; }
.button-outline { border-color: #737c68; }
.button-outline:hover { background: var(--paper); color: var(--ink); }
.original-links .text-link { font-size: 12px; gap: 12px; }
.studio-band { background: var(--paper); color: var(--ink); }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding-block: 93px 100px; }
.studio-heading > .eyebrow { color: #525b46; }
.studio-heading h2 { margin: 33px 0 27px; font-size: clamp(52px, 6.5vw, 93px); line-height: 1.01; letter-spacing: -.055em; font-weight: 550; }
.studio-heading h2 > span { color: #71843e; }
.studio-heading .text-link { border-bottom: 1px solid #a6ad99; gap: 40px; }
.studio-band a:focus-visible { outline-color: #4f621d; }
.studio-story { padding-top: 48px; }
.story-lead { font-size: clamp(21px, 2.1vw, 29px); line-height: 1.45; letter-spacing: -.03em; }
.studio-story > p:not(.story-lead), .composer-credit > p:last-child { font-size: 15px; color: #53594b; line-height: 1.8; margin-top: 21px; }
.composer-credit { border-top: 1px solid #c5c9b9; margin-top: 35px; padding-top: 29px; }
.composer-credit .eyebrow { color: #53594b; font-size: 10px; }
.composer-names { font-size: clamp(21px, 2.2vw, 31px); letter-spacing: -.035em; line-height: 1.4; margin-top: 16px; }
.composer-names span { color: #657149; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; padding-block: 95px 92px; }
.contact-heading .eyebrow { color: var(--muted); }
.contact-heading h2 { font-size: clamp(54px, 6.2vw, 90px); font-weight: 550; line-height: 1.1; letter-spacing: -.055em; margin-block: 25px 18px; }
.contact-heading > p:last-child { font-size: 16px; line-height: 1.6; color: var(--muted); }
.contact-links { padding-top: 6px; }
.contact-links > a { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 102px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.contact-links > a:first-child { border-top: 1px solid var(--line); }
.contact-links small { display: block; font: 10px/1.5 var(--mono); letter-spacing: .08em; color: var(--muted); margin-bottom: 9px; }
.contact-links a > span:first-child { font-size: clamp(16px, 1.55vw, 23px); letter-spacing: -.025em; overflow-wrap: anywhere; }
.contact-arrow { color: var(--lime); font-size: 24px; flex-shrink: 0; }
.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); min-height: 130px; padding-block: 28px; }
.site-footer .wordmark > span { font-size: 15px; }
.site-footer .wordmark small { font-size: 8px; }
.site-footer > p { font-size: 11px; line-height: 1.8; color: var(--muted); }
.site-footer > p span { color: #959b8a; }
.site-footer nav { display: flex; align-items: center; gap: 28px; }
.site-footer nav a { font-size: 11px; display: inline-flex; align-items: center; min-height: 44px; }
.information { max-width: 820px; padding-block: 70px 85px; }
.information > .eyebrow { color: var(--lime); }
.information h1 { font-size: clamp(52px, 8vw, 84px); line-height: 1.05; margin-block: 23px 35px; }
.information h2 { font-size: 24px; line-height: 1.35; letter-spacing: -.025em; font-weight: 550; margin-block: 36px 14px; }
.information p, .information ul { font-size: 16px; line-height: 1.8; color: var(--muted); margin-block: 14px; }
.information .information-intro { font-size: 21px; color: var(--paper); line-height: 1.6; }
.information .eyebrow { font: 500 11px/1.5 var(--mono); letter-spacing: .09em; }
.information a { color: var(--lime); text-decoration: underline; overflow-wrap: anywhere; }
.information li { margin-block: 7px; }
.information ul { padding-left: 22px; }
@media (min-width: 1600px) { .hero-layout { padding-block: 60px 70px; } }
@media (max-width: 1100px) {
    .shell { width: calc(100% - 64px); }
    .hero-layout { gap: 34px; grid-template-columns: minmax(0, 2.7fr) minmax(0, 1fr); }
    h1 { font-size: clamp(76px, 9.2vw, 108px); }
    .game-heading { gap: 32px; }
    .game-name { font-size: clamp(48px, 6.2vw, 70px); }
    .game-details { gap: 24px; }
    .game-notes { gap: 20px; }
    .game-notes li { padding-right: 20px; }
    .game-notes strong { font-size: 21px; }
    .game-notes span { max-width: 110px; }
    .original-game { gap: 36px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .studio-layout, .contact { gap: 48px; }
}
@media (max-width: 800px) {
    .site-header { min-height: 100px; }
    .site-header nav { gap: 22px; }
    .site-header nav a { font-size: 12px; gap: 7px; }
    .hero { padding-top: 30px; }
    .hero-layout { grid-template-columns: minmax(0, 1fr); padding-block: 34px 30px; gap: 32px; }
    h1 { font-size: clamp(80px, 13vw, 104px); }
    .hero-aside { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 0; }
    .sound-bars { display: none; }
    .hero-aside > p { font-size: 16px; margin: 0; }
    .hero-aside .text-link { gap: 22px; }
    .games { padding-top: 58px; }
    .game-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 24px; }
    .game-name { font-size: clamp(52px, 9vw, 76px); }
    .feature-intro { padding: 0; }
    .feature-intro > p:last-child { max-width: 550px; }
    .game-hook { font-size: 25px; margin-bottom: 9px; }
    .game-details { flex-wrap: wrap; padding-bottom: 38px; }
    .game-notes { gap: 30px; width: 100%; justify-content: space-between; }
    .game-notes li { padding-right: 30px; flex: 1; }
    .game-notes li:last-child { flex: 1.8; }
    .game-notes span { max-width: none; }
    .game-action { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; }
    .game-action p { margin: 0; }
    .original-game { grid-template-columns: 1fr; gap: 24px; padding-block: 38px 60px; }
    .original-image { min-height: 0; aspect-ratio: 16 / 10; }
    .original-copy { padding: 0; }
    .original-copy h3 { font-size: 61px; }
    .original-copy > p:not(.release-label, .original-genre) { max-width: 580px; }
    .studio-layout { gap: 40px; padding-block: 64px; }
    .studio-heading h2 { font-size: 54px; }
    .studio-story { padding-top: 42px; }
    .contact { gap: 36px; padding-block: 65px; }
    .contact-heading h2 { font-size: 58px; }
    .contact-links a > span:first-child { font-size: 15px; }
    .site-footer { flex-wrap: wrap; gap: 14px 32px; }
    .site-footer nav { width: 100%; gap: 24px; }
}
@media (max-width: 540px) {
    html { scroll-padding-top: 16px; }
    .shell { width: calc(100% - 40px); }
    .site-header { min-height: 88px; gap: 16px; }
    .wordmark { gap: 9px; }
    .wordmark img { width: 34px; height: 34px; }
    .wordmark > span { font-size: 15px; }
    .wordmark small { font-size: 8px; margin-top: 5px; }
    .site-header nav { gap: 15px; }
    .site-header nav a { font-size: 11px; }
    .site-header nav a:last-child { display: none; }
    .hero-kicker .eyebrow { font-size: 9px; letter-spacing: .04em; }
    .hero-location { display: none; }
    h1 { font-size: clamp(50px, 15.8vw, 85px); line-height: 1; }
    .hero-layout { padding-top: 30px; }
    .hero-aside { gap: 14px; }
    .hero-aside > p { font-size: 14px; }
    .hero-aside .text-link { font-size: 11px; gap: 10px; }
    .hero-foot { padding-block: 17px; gap: 12px; }
    .hero-foot .eyebrow { font-size: 8px; letter-spacing: .025em; }
    .games { padding-top: 43px; }
    .section-label { margin-bottom: 25px; font-size: 10px; }
    .release-label { font-size: 10px; letter-spacing: .055em; }
    .game-series { font-size: 23px; margin-top: 18px; }
    .game-name { font-size: clamp(42px, 11.6vw, 61px); }
    .game-heading { gap: 20px; }
    .feature-intro > p:last-child { font-size: 14px; }
    .game-hook { font-size: 23px; }
    figcaption { padding: 12px 14px; gap: 5px; font-size: 8px; }
    .game-notes { gap: 13px; }
    .game-notes li { padding-right: 13px; }
    .game-notes strong { font-size: 19px; }
    .game-notes li:last-child strong { font-size: 16px; line-height: 1.55; }
    .game-notes span { font-size: 10px; }
    .game-details { padding-top: 24px; }
    .button { padding-inline: 17px; gap: 28px; }
    .game-action { gap: 14px; }
    .game-action p { font-size: 10px; }
    .original-image { aspect-ratio: 16 / 11; }
    .original-copy h3 { font-size: clamp(42px, 11vw, 60px); }
    .original-copy > p:not(.release-label, .original-genre) { font-size: 14px; }
    .original-links { gap: 8px 20px; }
    .studio-layout { grid-template-columns: 1fr; gap: 30px; padding-block: 52px; }
    .studio-heading h2 { font-size: 64px; margin-block: 24px 22px; }
    .studio-story { padding: 0; }
    .story-lead { font-size: 24px; }
    .studio-story > p:not(.story-lead), .composer-credit > p:last-child { font-size: 14px; }
    .composer-names { font-size: 27px; }
    .contact { grid-template-columns: 1fr; gap: 29px; padding-block: 52px; }
    .contact-heading h2 { font-size: 66px; margin-block: 20px 10px; }
    .contact-heading > p:last-child { font-size: 14px; }
    .contact-links { padding: 0; }
    .contact-links > a { min-height: 94px; }
    .contact-links a > span:first-child { font-size: 18px; }
    .site-footer { gap: 24px 16px; }
    .site-footer > p { font-size: 9px; margin-left: auto; }
    .site-footer .wordmark > span { font-size: 13px; }
    .site-footer nav { gap: 28px; }
    .information { padding-block: 45px 60px; }
    .information p, .information ul { font-size: 15px; }
    .information .information-intro { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .button { transition: none; } }