@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700&family=DM+Mono:wght@300;400;500&display=swap');

:root {
  --ink: #070708;
  --paper: #f7f6f2;
  --red: #e61627;
  --line: rgba(247, 246, 242, 0.18);
  --muted: #9d9d99;
  --display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --mono: 'DM Mono', Consolas, monospace;
  --pad: clamp(1.25rem, 3.5vw, 4rem);
  --progress: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  overflow-x: hidden;
}

::selection { background: var(--red); color: var(--paper); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--ink);
  background: var(--paper);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

.noise {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");
}

.scroll-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: calc(var(--progress) * 100%);
  height: 3px;
  background: var(--red);
}

.site-header {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  width: 100%;
  height: 78px;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, height .35s ease;
}
.site-header.scrolled {
  height: 64px;
  background: rgba(7, 7, 8, .84);
  border-color: var(--line);
  backdrop-filter: blur(16px);
}
.brand-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.brand-link img { width: auto; height: 46px; }
.brand-link span { color: var(--muted); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }
.site-nav { display: flex; gap: clamp(1rem, 2.5vw, 2.7rem); align-items: center; }
.site-nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  text-transform: uppercase;
  font-size: .67rem;
  letter-spacing: .12em;
  transition: color .2s ease;
}
.site-nav a b { display: none; }
.site-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.45rem;
  height: 2px;
  background: var(--red);
  transition: right .25s ease;
}
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.active { color: var(--paper); }
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.active::after { right: 0; }
.menu-toggle { display: none; }

.section { position: relative; padding: 8rem var(--pad); }
.ruled { border-top: 1px solid var(--line); }
.eyebrow {
  margin: 0 0 1.2rem;
  color: var(--red);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.section-index {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: clamp(5rem, 10vw, 10rem);
  color: var(--muted);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.section-index span:first-child { color: var(--paper); }

.hero {
  min-height: 100svh;
  padding: 7.25rem var(--pad) 2rem;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
}
.hero-background {
  position: absolute;
  inset: -5vh -2vw;
  z-index: -5;
  overflow: hidden;
}
.hero-background img {
  width: 100%;
  height: 110%;
  object-fit: cover;
  object-position: 50% 52%;
  filter: contrast(1.07) brightness(.88);
  transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.035);
}
.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5), transparent 25%, transparent 68%, rgba(0,0,0,.72)),
    radial-gradient(circle at 50% 40%, transparent 12%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.72) 100%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .07;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 12.5vw 12.5vw;
  mask-image: linear-gradient(to bottom, black, transparent 38%);
}
.hero-meta {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  color: var(--muted);
  font-size: .63rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.hero-meta p { margin: 0; }
.hero-meta span { color: var(--red); }
.hero-logo-lockup {
  position: relative;
  z-index: 2;
  grid-column: 1;
  grid-row: 2;
  justify-self: center;
  width: clamp(390px, 47vw, 760px);
  margin-top: 3vh;
  transform: translate3d(0, var(--parallax-y, 0), 0);
}
.hero-logo-lockup img {
  width: 100%;
  filter: drop-shadow(0 1rem 2.4rem rgba(0,0,0,.52));
  animation: logo-apparition 1.25s cubic-bezier(.2,.72,.18,1) both;
}
@keyframes logo-apparition {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(2rem) scale(.98); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0) scale(1); }
}
.hero-tagline {
  position: absolute;
  z-index: 3;
  left: var(--pad);
  bottom: 4.2rem;
}
.hero-tagline p {
  margin: 0;
  font-size: clamp(.68rem, .9vw, .88rem);
  letter-spacing: .16em;
  line-height: 1.8;
  text-transform: uppercase;
}
.scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  color: var(--paper);
  font-size: .63rem;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.scroll-cue i { width: 1px; height: 58px; background: linear-gradient(var(--red) 0 50%, rgba(247,246,242,.65) 50%); transform-origin: top; animation: scroll-line 1.8s ease-in-out infinite; }
@keyframes scroll-line { 50% { transform: scaleY(.68); } }
.hero-corner { position: absolute; z-index: 3; width: 24px; height: 24px; border-color: var(--red); }
.corner-top { right: var(--pad); top: 2.6rem; border-top: 2px solid var(--red); border-right: 2px solid var(--red); }
.corner-bottom { left: var(--pad); bottom: 2.6rem; border-bottom: 2px solid var(--red); border-left: 2px solid var(--red); }

.studio { min-height: 100vh; background: var(--paper); color: var(--ink); }
.studio .section-index { color: #666; }
.studio .section-index span:first-child { color: var(--ink); }
.studio-statement { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); gap: 5vw; align-items: end; }
.studio-statement h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 9.2vw, 10rem);
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.studio-statement h2 em { color: var(--red); font-style: italic; }
.studio-statement p { max-width: 34rem; margin: 0; font-size: clamp(.9rem, 1.25vw, 1.12rem); }
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: clamp(5rem, 12vw, 10rem); background: rgba(7, 7, 8, .2); border: 1px solid rgba(7, 7, 8, .2); }
.principle { min-height: 280px; padding: 2rem; background: var(--paper); transition: background .25s, color .25s; }
.principle > span { font-size: .62rem; color: var(--red); }
.principle h3 { margin: 4rem 0 1rem; font-family: var(--display); font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: .92; text-transform: uppercase; }
.principle p { margin: 0; color: #666; font-size: .75rem; }
.principle:hover { background: var(--ink); color: var(--paper); }
.principle:hover p { color: var(--muted); }

.identity { min-height: 100vh; }
.identity-intro { display: grid; grid-template-columns: .65fr 1.15fr .7fr; gap: 4vw; align-items: end; }
.identity-intro .eyebrow { align-self: start; }
.identity-intro h2, .games-heading h2, .contact-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.5rem, 10vw, 11rem);
  line-height: .78;
  letter-spacing: -.05em;
  text-transform: uppercase;
}
.identity-intro h2 span, .games-heading h2 span, .contact-copy h2 span { color: var(--red); }
.identity-intro > p:last-child { margin: 0; color: var(--muted); }
.identity-board { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1px; margin-top: 7rem; background: var(--line); border: 1px solid var(--line); }
.identity-board > * { margin: 0; background: var(--ink); }
.identity-board figcaption, .type-specimen > span {
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .61rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.specimen-stage {
  min-height: 520px;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 4vw, 4.5rem);
  background-color: #111113;
  background-image: linear-gradient(45deg, #141416 25%, transparent 25%), linear-gradient(-45deg, #141416 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #141416 75%), linear-gradient(-45deg, transparent 75%, #141416 75%);
  background-size: 24px 24px;
  background-position: 0 0, 0 12px, 12px -12px, -12px 0;
}
.specimen-stage img { width: auto; max-width: 100%; height: min(430px, 50vw); filter: drop-shadow(0 1rem 2.5rem rgba(0,0,0,.45)); }
.logo-specimen > a { display: flex; justify-content: space-between; padding: 1rem 1.2rem; color: var(--paper); text-decoration: none; text-transform: uppercase; font-size: .62rem; letter-spacing: .11em; background: var(--red); }
.logo-specimen > a span { font-size: 1rem; transition: transform .2s ease; }
.logo-specimen > a:hover span { transform: translateY(.25rem); }
.mark-specimen { display: flex; flex-direction: column; }
.mark-specimen img { width: 62%; margin: auto; padding: 3rem 0; }
.merch-specimen { grid-column: 1 / -1; }
.merch-stage {
  position: relative;
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,.1), transparent 50%),
    linear-gradient(130deg, #1b1b1d, #070708 70%);
}
.merch-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.32), transparent 20% 80%, rgba(0,0,0,.32));
}
.merch-stage img { width: min(100%, 1500px); }
.palette { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 250px; }
.swatch { display: flex; flex-direction: column; justify-content: space-between; padding: 1.2rem; font-size: .62rem; text-transform: uppercase; }
.swatch + .swatch { border-left: 1px solid var(--line); }
.swatch code { font: inherit; }
.swatch.white { background: var(--paper); color: var(--ink); }
.swatch.red { background: var(--red); color: var(--paper); }
.swatch.black { background: var(--ink); color: var(--paper); }
.type-specimen { overflow: hidden; }
.type-specimen p { margin: 0; padding: 1.4rem; font-family: var(--display); font-size: clamp(3rem, 5.3vw, 6rem); font-weight: 800; line-height: .74; letter-spacing: -.04em; white-space: nowrap; }
.type-specimen small { display: block; padding: 1rem 1.2rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }

.games { min-height: 100vh; }
.games-heading { display: grid; grid-template-columns: .45fr 1.25fr .6fr; gap: 4vw; align-items: end; }
.games-heading .eyebrow { align-self: start; }
.games-heading > p:last-child { margin: 0; color: var(--muted); }
.featured-game {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr);
  min-height: 700px;
  margin-top: 7rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #090a0b;
}
.featured-game-visual { position: relative; min-width: 0; overflow: hidden; }
.featured-game-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 65%, rgba(5,6,7,.42)), linear-gradient(to top, rgba(5,6,7,.5), transparent 32%);
  pointer-events: none;
}
.featured-game-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
  filter: saturate(.82) contrast(1.06);
  transition: transform 1.1s cubic-bezier(.2,.72,.18,1), filter .6s ease, opacity .22s ease;
}
.featured-game:hover .featured-game-art { transform: scale(1.025); filter: saturate(1) contrast(1.08); }
.featured-game-art.is-switching { opacity: .08; transform: scale(1.015); }
.featured-game-index {
  position: absolute;
  z-index: 2;
  top: 1.2rem;
  left: 1.2rem;
  padding: .5rem .7rem;
  color: var(--paper);
  background: rgba(7,7,8,.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(8px);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.featured-game-frame {
  position: absolute;
  z-index: 2;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 28px;
  height: 28px;
  border-right: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
}
.unbound-art-switcher {
  position: absolute;
  z-index: 4;
  left: 1.2rem;
  bottom: 1.2rem;
  display: flex;
  gap: .5rem;
}
.unbound-art-switcher button {
  position: relative;
  width: 92px;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(247,246,242,.28);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.unbound-art-switcher button:hover, .unbound-art-switcher button:focus-visible { border-color: var(--paper); transform: translateY(-3px); }
.unbound-art-switcher button[aria-pressed="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.unbound-art-switcher button img { width: 100%; height: 100%; object-fit: cover; opacity: .58; transition: opacity .2s ease; }
.unbound-art-switcher button:hover img, .unbound-art-switcher button:focus-visible img, .unbound-art-switcher button[aria-pressed="true"] img { opacity: 1; }
.unbound-art-switcher button span { position: absolute; right: .25rem; bottom: .15rem; padding: .08rem .2rem; background: rgba(7,7,8,.78); font-size: .5rem; letter-spacing: .08em; }
.featured-game-panel {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.5rem, 3vw, 3rem);
  border-left: 1px solid var(--line);
  background:
    radial-gradient(circle at 50% 24%, rgba(63,139,158,.12), transparent 34%),
    linear-gradient(145deg, #0d1113, #060708 76%);
}
.featured-game-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .12;
  pointer-events: none;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, black, transparent 65%);
}
.featured-game-logo {
  position: relative;
  z-index: 1;
  width: min(88%, 390px);
  max-height: 430px;
  margin: 0 auto 2rem;
  object-fit: contain;
  filter: drop-shadow(0 0 30px rgba(138,210,228,.12));
  mix-blend-mode: screen;
}
.unbound-banner-mobile { display: none; }
.featured-game-copy { position: relative; z-index: 1; }
.featured-game-copy > p:first-child { margin: 0 0 1rem; color: var(--red); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.featured-game-copy > p:nth-child(2) { margin: 0 0 2rem; color: var(--muted); font-size: .75rem; }
.featured-game-copy dl { margin: 0; border-top: 1px solid var(--line); }
.featured-game-copy dl div { display: grid; grid-template-columns: .62fr 1.38fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.featured-game-copy dt, .featured-game-copy dd { margin: 0; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.featured-game-copy dt { color: var(--muted); }
.featured-game-copy dd { text-align: right; }
.featured-game-copy dd i { display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(230,22,39,.12); }
.game-reserve-heading { display: flex; justify-content: space-between; margin-top: 5.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; }
.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 7rem; }
.game-grid--reserve { grid-template-columns: repeat(2, 1fr); margin-top: 1rem; }
.game-card { min-height: 520px; perspective: 900px; }
.game-grid--reserve .game-card { min-height: 430px; }
.game-card-inner {
  position: relative;
  height: 100%;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0e0e10;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transform-style: preserve-3d;
  transition: transform .15s ease, border-color .25s ease;
}
.game-card:hover .game-card-inner { border-color: var(--red); }
.game-card-inner::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(230,22,39,.22), transparent 35%); opacity: 0; transition: opacity .3s; }
.game-card:hover .game-card-inner::after { opacity: 1; }
.game-number { align-self: flex-end; color: var(--muted); font-size: .65rem; }
.game-card p { margin: 0 0 .6rem; color: var(--red); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.game-card h3 { margin: 0; font-family: var(--display); font-size: clamp(3rem, 5vw, 5.5rem); line-height: .78; text-transform: uppercase; }
.status { width: max-content; padding: .45rem .7rem; border: 1px solid var(--line); color: var(--muted); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.game-signal { position: absolute; top: 19%; left: 10%; right: 10%; height: 28%; display: flex; gap: 5%; align-items: center; transform: rotate(-7deg); opacity: .55; }
.game-signal i { display: block; flex: 1; height: 80%; border: 1px solid var(--line); background: linear-gradient(130deg, transparent 48%, var(--red) 49% 51%, transparent 52%); }
.game-signal i:nth-child(2) { height: 120%; }
.game-signal.broken i { clip-path: polygon(0 0, 100% 0, 100% 42%, 72% 42%, 76% 56%, 100% 56%, 100% 100%, 0 100%); }
.game-signal.quiet { opacity: .2; transform: rotate(90deg) scale(.55); }

.contact { min-height: 100svh; display: flex; flex-direction: column; overflow: hidden; background: var(--red); }
.contact .section-index { color: rgba(247,246,242,.65); }
.contact .section-index span:first-child { color: var(--paper); }
.contact-copy { position: relative; z-index: 2; width: min(75%, 1050px); }
.contact-copy .eyebrow { color: var(--ink); }
.contact-copy h2 { font-size: clamp(6rem, 13vw, 14rem); }
.contact-copy h2 span { color: var(--ink); }
.contact-copy > p:not(.eyebrow) { max-width: 38rem; margin: 2.2rem 0; }
.contact-status { display: inline-flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem; border: 1px solid rgba(247,246,242,.65); font-size: .65rem; letter-spacing: .11em; text-transform: uppercase; }
.contact-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 5px rgba(247,246,242,.15); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.social-directory { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: clamp(4rem, 9vw, 9rem); padding: 1px; background: rgba(247,246,242,.35); }
.social-link { position: relative; display: flex; min-height: 210px; flex-direction: column; justify-content: space-between; padding: 1.4rem; overflow: hidden; color: var(--paper); background: var(--ink); text-decoration: none; transition: color .35s ease, background .35s ease, transform .35s ease; }
.social-link::before { content: ''; position: absolute; inset: auto -15% -75% 45%; aspect-ratio: 1; border: 1px solid rgba(231,28,36,.5); border-radius: 50%; transition: transform .5s cubic-bezier(.22,.75,.2,1); }
.social-link > * { position: relative; z-index: 1; }
.social-link .social-index, .social-link > span:last-child { font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; }
.social-link .social-index { color: var(--red); }
.social-link strong { font-family: var(--display); font-size: clamp(2.8rem, 4.5vw, 5rem); font-weight: 800; line-height: .82; letter-spacing: -.03em; text-transform: uppercase; }
.social-link > span:last-child { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); }
.social-link b { color: var(--paper); font-size: .9rem; font-weight: 400; }
.social-link:not(.social-link--soon):hover, .social-link:not(.social-link--soon):focus-visible { z-index: 2; color: var(--ink); background: var(--paper); transform: translateY(-5px); outline: 2px solid var(--ink); outline-offset: -2px; }
.social-link:not(.social-link--soon):hover::before, .social-link:not(.social-link--soon):focus-visible::before { transform: scale(1.8); }
.social-link:not(.social-link--soon):hover > span:last-child, .social-link:not(.social-link--soon):focus-visible > span:last-child { color: rgba(7,7,8,.65); }
.social-link:not(.social-link--soon):hover b, .social-link:not(.social-link--soon):focus-visible b { color: var(--red); }
.social-link--soon { grid-column: 1 / -1; min-height: 175px; color: var(--ink); background: transparent; border: 1px solid rgba(7,7,8,.4); }
.social-link--soon::before { inset: -100% auto auto 65%; width: 360px; border-color: rgba(7,7,8,.25); }
.social-link--soon .social-index, .social-link--soon > span:last-child { color: var(--ink); }
.social-link--soon strong { font-size: clamp(3rem, 7vw, 7rem); }
.contact-email { display: inline-flex; align-items: center; gap: 1rem; width: fit-content; margin-top: 1.5rem; padding-bottom: .45rem; border-bottom: 1px solid var(--red); color: var(--paper); font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; transition: color .25s ease, border-color .25s ease; }
.contact-email b { color: var(--red); font-size: 1rem; font-weight: 400; transition: transform .25s ease; }
.contact-email:hover, .contact-email:focus-visible { color: var(--red); border-color: var(--paper); outline: none; }
.contact-email:hover b, .contact-email:focus-visible b { transform: translate(3px, -3px); }
.contact-mark { position: absolute; right: -9vw; bottom: -19vw; width: 60vw; opacity: .12; transform: rotate(-12deg); }
.contact-orbit { position: absolute; top: 18%; right: 10%; width: 28vw; aspect-ratio: 1; border: 1px solid rgba(7,7,8,.3); border-radius: 50%; transform: translate3d(0,var(--parallax-y,0),0); }
.contact-orbit::before, .contact-orbit::after { content: ''; position: absolute; inset: 14%; border: inherit; border-radius: inherit; }
.contact-orbit::after { inset: 38%; background: var(--ink); }

.site-footer { padding: 2.2rem var(--pad); border-top: 1px solid var(--line); background: var(--ink); }
.site-footer > img { width: auto; height: min(220px, 34vw); margin-bottom: 3rem; }
.footer-socials { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; padding: 1.5rem 0; margin-bottom: 1.5rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.footer-socials a { color: var(--paper); font-family: var(--display); font-size: clamp(1.5rem, 2.6vw, 2.8rem); font-weight: 700; letter-spacing: -.01em; text-transform: uppercase; transition: color .25s ease; }
.footer-socials a:hover, .footer-socials a:focus-visible { color: var(--red); }
.footer-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: .6rem; letter-spacing: .11em; text-transform: uppercase; }
.site-footer a { color: var(--paper); text-decoration: none; }

.reveal { opacity: 1; transform: none; }
.js .reveal, html:not(.no-js) .reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s cubic-bezier(.22,.75,.2,1), transform .8s cubic-bezier(.22,.75,.2,1); }
html:not(.no-js) .reveal.in-view { opacity: 1; transform: translateY(0); }

.cursor { display: none; }
@media (pointer: fine) {
  .cursor { position: fixed; z-index: 200; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(247,246,242,.55); border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: width .2s, height .2s, border-color .2s; mix-blend-mode: difference; }
  .cursor span { width: 3px; height: 3px; background: var(--paper); border-radius: 50%; }
  .cursor.active { width: 54px; height: 54px; border-color: var(--red); }
}

@media (max-width: 980px) {
  .menu-toggle { z-index: 2; display: flex; align-items: center; gap: .8rem; border: 0; color: var(--paper); background: transparent; text-transform: uppercase; font-size: .65rem; letter-spacing: .12em; cursor: pointer; }
  .menu-icon { display: flex; flex-direction: column; gap: 5px; }
  .menu-icon i { display: block; width: 22px; height: 1px; background: currentColor; transition: transform .25s ease; }
  .menu-toggle[aria-expanded="true"] .menu-icon i:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-icon i:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; padding: 7rem var(--pad) 3rem; background: var(--red); transform: translateX(100%); visibility: hidden; transition: transform .45s cubic-bezier(.22,.75,.2,1), visibility .45s; }
  .site-nav.open { transform: translateX(0); visibility: visible; }
  .site-nav a { display: flex; justify-content: space-between; padding: .25rem 0; color: var(--paper); font-family: var(--display); font-size: clamp(3.8rem, 12vw, 7rem); font-weight: 800; line-height: .95; letter-spacing: -.03em; }
  .site-nav a b { display: block; align-self: start; font-family: var(--mono); font-size: .6rem; font-weight: 400; letter-spacing: .1em; }
  .site-nav a::after { display: none; }
  body.menu-open { overflow: hidden; }
  body.menu-open .brand-link { z-index: 2; }
  .hero-logo-lockup { width: clamp(360px, 65vw, 660px); }
  .hero-background img { object-position: 50% 50%; }
  .studio-statement, .identity-intro, .games-heading { grid-template-columns: 1fr; }
  .studio-statement p, .identity-intro > p:last-child, .games-heading > p:last-child { margin-top: 2rem; }
  .principles { grid-template-columns: 1fr; }
  .principle { min-height: 220px; }
  .principle h3 { margin-top: 3rem; }
  .identity-board { grid-template-columns: 1fr; }
  .featured-game { grid-template-columns: 1fr; min-height: 0; }
  .featured-game-visual { aspect-ratio: 16 / 10; }
  .featured-game-panel { display: grid; grid-template-columns: minmax(210px, .7fr) 1.3fr; gap: 2.5rem; align-items: center; border-top: 1px solid var(--line); border-left: 0; }
  .featured-game-logo { max-height: 410px; margin-bottom: 0; }
  .game-grid { grid-template-columns: 1fr; }
  .game-grid--reserve { grid-template-columns: repeat(2, 1fr); }
  .game-card { min-height: 430px; }
  .game-card h3 { font-size: 5rem; }
  .contact-copy { width: 95%; }
  .social-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .site-header { height: 66px; }
  .brand-link img { width: auto; height: 40px; }
  .brand-link span { display: none; }
  .section { padding-top: 6rem; padding-bottom: 6rem; }
  .hero { min-height: 100svh; padding-top: 6rem; }
  .hero-meta p:nth-child(2) { display: none; }
  .hero-logo-lockup { width: min(82vw, 500px); margin-top: 0; }
  .hero-meta p:nth-child(2) { display: none; }
  .hero-meta p:last-child { text-align: right; }
  .hero-tagline { bottom: 5.2rem; }
  .hero-tagline p { font-size: .62rem; }
  .scroll-cue { bottom: 1.3rem; }
  .scroll-cue i { height: 42px; }
  .hero-corner { width: 18px; height: 18px; }
  .section-index { margin-bottom: 4rem; }
  .section-index span:last-child { display: none; }
  .studio-statement h2, .identity-intro h2, .games-heading h2 { font-size: 4.25rem; }
  .palette { grid-template-columns: 1fr; }
  .swatch { min-height: 130px; }
  .swatch + .swatch { border-left: 0; border-top: 1px solid var(--line); }
  .specimen-stage { min-height: 390px; }
  .specimen-stage img { height: 330px; }
  .merch-stage { min-height: 330px; }
  .featured-game { margin-top: 4rem; }
  .featured-game-visual { aspect-ratio: 4 / 3; }
  .featured-game-art { object-position: 54% 50%; }
  .featured-game-panel { display: flex; gap: 0; padding: 1.5rem; }
  .featured-game-logo { display: none; }
  .unbound-banner-mobile { display: block; width: 100%; margin: 0 auto 2.5rem; mix-blend-mode: screen; }
  .unbound-art-switcher { left: .75rem; bottom: .75rem; gap: .35rem; }
  .unbound-art-switcher button { width: 68px; }
  .featured-game-copy dl div { grid-template-columns: 1fr; gap: .15rem; }
  .featured-game-copy dd { text-align: left; }
  .game-reserve-heading { margin-top: 4rem; }
  .game-grid--reserve { grid-template-columns: 1fr; }
  .game-card { min-height: 400px; }
  .game-card h3 { font-size: 4.2rem; }
  .contact-copy h2 { font-size: clamp(5rem, 25vw, 8rem); }
  .contact-mark { width: 100vw; right: -30vw; }
  .social-directory { grid-template-columns: 1fr; }
  .social-link { min-height: 175px; }
  .social-link--soon { grid-column: auto; }
  .footer-socials { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
  .footer-meta { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-parallax] { transform: none !important; }
}