@font-face {
  font-family:"Instrument Serif";
  src:url("assets/fonts/instrument-serif.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:"Instrument Serif";
  src:url("assets/fonts/instrument-serif-italic.woff") format("woff");
  font-style:italic;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:"DM Sans";
  src:url("assets/fonts/dm-sans.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root {
  --bg:#10100f;
  --surface:#191917;
  --ink:#e8e5dc;
  --muted:#b3b0a5;
  --line:#383833;
  --accent:#c3c9a4;
  --display:"Instrument Serif",Georgia,serif;
  --body:"DM Sans",Arial,sans-serif;
  --gutter:clamp(20px,4.5vw,64px);
  --ease:cubic-bezier(.23,1,.32,1);
  --ink-soft:#56544d;
  color-scheme:dark;
}

* {
  box-sizing:border-box;
}

html {
  scrollbar-color:var(--line) var(--bg);
}

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* Film grain. Sits above the page, below dialogs. */
body::after {
  content:"";
  position:fixed;
  inset:-80px;
  z-index:30;
  background:url("assets/grain.png");
  opacity:.06;
  pointer-events:none;
}

::selection {
  background:var(--accent);
  color:var(--bg);
}

a {
  color:inherit;
  text-decoration:none;
  text-underline-offset:6px;
  touch-action:manipulation;
}

button {
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  touch-action:manipulation;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px;
}

img,video {
  display:block;
  max-width:100%;
  height:auto;
}

svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4;
  flex:none;
}

h1,h2,h3,p,figure {
  margin:0;
}

h1,h2,h3 {
  font-family:var(--display);
  font-weight:400;
}

em {
  font-style:italic;
  color:var(--muted);
}

[hidden] {
  display:none!important;
}

.wrap {
  width:min(100%,1408px);
  padding-inline:var(--gutter);
  margin-inline:auto;
}

.sr-only {
  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;
  left:16px;
  top:16px;
  z-index:40;
  padding:12px 24px;
  background:var(--ink);
  color:var(--bg);
  transform:translateY(-180%);
}

.skip-link:focus {
  transform:none;
}

/* Header */

.site-header {
  position:fixed;
  inset:0 0 auto;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px var(--gutter);
  transition:transform 280ms var(--ease);
}

.site-header::before {
  content:"";
  position:absolute;
  inset:0 0 -36px;
  z-index:-1;
  background:linear-gradient(rgb(16 16 15 / .86),rgb(16 16 15 / 0));
  pointer-events:none;
}

.site-header.is-hidden:not(:focus-within) {
  transform:translateY(-170%);
}

.brand {
  display:flex;
  align-items:center;
  gap:14px;
  min-height:48px;
  font-size:12px;
  letter-spacing:.19em;
  line-height:1.5;
}

.brand img {
  width:32px;
  height:41px;
  object-fit:cover;
}

.brand-sub {
  display:block;
  letter-spacing:.24em;
  color:var(--muted);
  margin-top:3px;
}

nav {
  display:flex;
  align-items:center;
  gap:clamp(18px,2.4vw,32px);
  font-size:13px;
}

nav a {
  position:relative;
  display:flex;
  align-items:center;
  min-height:44px;
}

nav a:not(.nav-cta)::after {
  content:"";
  position:absolute;
  bottom:8px;
  left:0;
  width:100%;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 180ms var(--ease);
}

.nav-cta svg {
  width:16px;
  height:16px;
}

.nav-cta {
  gap:9px;
  padding-inline:14px 16px;
  border:1px solid var(--muted);
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease;
}

/* Buttons and links */

.button {
  min-height:54px;
  display:inline-flex;
  align-items:center;
  gap:14px;
  background:var(--ink);
  color:var(--bg);
  padding:13px 22px;
  border:1px solid var(--ink);
  font-size:14px;
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 160ms var(--ease);
}

.button-outline {
  background:rgb(16 16 15 / .35);
  color:var(--ink);
  border-color:var(--muted);
}

.sprite {
  position:absolute;
  width:0;
  height:0;
}

.icon-steam {
  fill:currentColor;
  stroke:none;
}

.button .arrow {
  margin-left:22px;
}

.button svg,.back-top svg,.text-link svg {
  transition:transform 180ms var(--ease);
}

.button:active {
  transform:scale(.98);
}

.text-link {
  display:inline-flex;
  gap:22px;
  align-items:center;
  min-height:48px;
  border-bottom:1px solid var(--line);
  font-size:14px;
}

/* Stone chips, echoing the debris in the logo */

.shard {
  position:absolute;
  background:var(--muted);
  clip-path:polygon(20% 0,100% 8%,81% 100%,0 75%);
  opacity:var(--o,.5);
  pointer-events:none;
}


/* Intro: studio hero, then the crack that opens onto the game */

.intro {
  position:relative;
}

.hero {
  min-height:100svh;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  column-gap:24px;
  padding-block:88px 56px;
}

h1 {
  position:relative;
  z-index:1;
  font-size:clamp(60px,7.4vw,118px);
  line-height:.99;
  letter-spacing:-.025em;
}

h1 em {
  margin-left:.34em;
}

.hero-identity {
  position:relative;
  justify-self:center;
  width:min(100%,70vh);
  background:var(--bg);
}

.studio-logo {
  width:100%;
  mix-blend-mode:lighten;
}

.game {
  position:relative;
  min-height:100svh;
  display:grid;
  align-items:end;
  overflow:hidden;
}

.game-window {
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--bg);
}

.game-video {
  width:100%;
  height:100%;
  object-fit:cover;
}

.game-shade {
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgb(16 16 15 / .92) 0%,rgb(16 16 15 / .42) 32%,rgb(16 16 15 / 0) 60%,rgb(16 16 15 / .34) 100%);
}

/* A soft-edged hole in darkness. Moved with transform only; scaled up so one small layer covers the screen. */
.torch {
  position:absolute;
  left:0;
  top:0;
  width:60vmax;
  height:60vmax;
  margin:-30vmax 0 0 -30vmax;
  background:radial-gradient(circle closest-side,rgb(8 8 7 / 0) 10%,rgb(8 8 7 / .62) 27%);
  opacity:0;
  transition:opacity 500ms ease;
  will-change:transform;
  pointer-events:none;
}

.torch.is-on {
  opacity:1;
}

.shatter {
  display:none;
}

.game-copy {
  position:relative;
  padding-top:120px;
  padding-bottom:clamp(32px,7vh,80px);
}

.game-copy h2 {
  font-size:clamp(68px,13.2vw,216px);
  line-height:.86;
  letter-spacing:-.035em;
  margin:18px 0 clamp(22px,3vw,40px) -.04em;
}

.game-description {
  max-width:44ch;
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:28px;
}

/* Nights and days: two scenes in one place. A diagonal edge sweeps the day across the night. */

.shift {
  position:relative;
}

.scene {
  display:grid;
  align-items:center;
  padding-block:clamp(56px,8vw,96px);
  background:var(--bg);
}

.scene-day {
  background:var(--ink);
  color:var(--bg);
}

.scene-inner {
  display:grid;
  gap:clamp(18px,2.4vw,30px);
  width:min(100% - 2 * var(--gutter),1280px,(100dvh - 250px) * 2.0109);
  margin-inline:auto;
}

.scene-media {
  overflow:hidden;
  background:var(--surface);
}

.scene-media video {
  width:100%;
  aspect-ratio:1110/552;
  object-fit:cover;
}

.scene-copy {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,34ch);
  gap:16px clamp(24px,4vw,64px);
  align-items:end;
}

.scene h3 {
  font-size:clamp(36px,4.6vw,72px);
  line-height:1;
  letter-spacing:-.02em;
}

.scene-line {
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;
  color:var(--muted);
}

.scene-day .scene-line {
  color:var(--ink-soft);
}

.scene-day :focus-visible {
  outline-color:var(--bg);
}

.scene-day ::selection {
  background:var(--bg);
  color:var(--ink);
}

/* Screenshot reel */

.reel {
  display:grid;
  gap:clamp(10px,1.3vw,20px);
  padding-block:clamp(56px,7vw,104px) clamp(72px,10vw,150px);
  overflow:hidden;
  overflow:clip;
}

.reel-row {
  display:flex;
  gap:inherit;
  padding-inline:var(--gutter);
  overflow-x:auto;
  scrollbar-width:none;
}

.shot {
  position:relative;
  flex:none;
  width:clamp(260px,38vw,640px);
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--surface);
  cursor:zoom-in;
}

.reel-row+.reel-row .shot {
  width:clamp(220px,29vw,480px);
}

.shot img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 700ms var(--ease);
}

.shot:focus-visible {
  outline-offset:-4px;
}

/* Studio */

.studio {
  position:relative;
  padding-block:clamp(110px,16vw,230px) clamp(72px,9vw,130px);
}

.statement {
  max-width:24ch;
  font-family:var(--display);
  font-size:clamp(34px,5.4vw,88px);
  line-height:1.1;
  letter-spacing:-.02em;
}

.tuned {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,34ch);
  gap:24px clamp(24px,4vw,64px);
  align-items:end;
  margin-top:clamp(28px,3.6vw,56px);
}

.tuned h3 {
  font-size:clamp(34px,5.4vw,88px);
  line-height:1.1;
  letter-spacing:-.02em;
}

.tuned p {
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;
  color:var(--muted);
}

.tuned .button {
  margin-top:22px;
}

.motion .tuned-action {
  transition-delay:260ms;
}

/* Kept beside the statement, clear of the row below it even at the far end of their drift. */
.shard-a { right:12%; top:13%; width:34px; height:42px; --o:.3; }
.shard-b { right:24%; top:33%; width:13px; height:15px; background:var(--ink); --o:.55; }
.shard-c { right:7%; top:38%; width:58px; height:44px; clip-path:polygon(8% 12%,92% 0,100% 70%,30% 100%); --o:.12; }

/* Footer */

.site-footer {
  overflow:hidden;
}

.site-footer::before {
  content:"";
  display:block;
  width:calc(min(100%,1408px) - 2 * var(--gutter));
  height:1px;
  margin:0 auto clamp(64px,9vw,130px);
  background:var(--line);
}

.wordmark {
  display:flex;
  justify-content:center;
  padding-left:.16em;
  overflow:hidden;
  font-family:var(--display);
  font-size:clamp(40px,12.4vw,232px);
  line-height:.86;
  letter-spacing:.16em;
  white-space:nowrap;
}

.wordmark-sub {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(14px,2vw,28px);
  margin-top:clamp(14px,2vw,30px);
  padding-left:.6em;
  font-size:clamp(11px,1.25vw,18px);
  letter-spacing:.6em;
  color:var(--muted);
}

.wordmark-sub::before,.wordmark-sub::after {
  content:"";
  width:clamp(28px,5vw,84px);
  height:1px;
  background:var(--line);
}

.wordmark-sub::after {
  margin-left:-.6em;
}

.footer-baseline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:clamp(28px,4vw,56px);
  padding-block:44px;
  color:var(--muted);
  font-size:15px;
}

.footer-note {
  display:grid;
  gap:2px;
}

.footer-note span:first-child {
  color:var(--ink);
}

.footer-links {
  gap:clamp(20px,2.6vw,36px);
  font-size:inherit;
}

.footer-links a {
  gap:9px;
}

.footer-links svg {
  width:16px;
  height:16px;
}

.footer-baseline a {
  display:flex;
  gap:16px;
  align-items:center;
  min-height:52px;
}

/* Dialogs */

dialog {
  max-width:none;
  max-height:none;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  overflow:visible;
}

dialog::backdrop {
  background:rgb(8 8 7 / .94);
}

.dialog {
  width:min(100vw - 32px,1280px,(100dvh - 150px) * 16 / 9);
}

.dialog[open] {
  animation:dialog-in 240ms var(--ease);
}

.dialog video,.dialog img {
  width:100%;
  aspect-ratio:16/9;
  background:var(--bg);
}

.dialog-close {
  position:fixed;
  right:16px;
  top:16px;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--line);
  background:var(--bg);
  transition:border-color 160ms ease,transform 160ms var(--ease);
}

.dialog-close:active,.lightbox-bar button:active {
  transform:scale(.94);
}

.lightbox-bar {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:14px;
  font-size:12px;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
}

.lightbox-bar button {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border:1px solid var(--line);
  color:var(--ink);
  transition:border-color 160ms ease,transform 160ms var(--ease);
}

.lightbox-bar span {
  min-width:6ch;
  text-align:center;
}

@keyframes dialog-in {
  from {
    opacity:0;
    transform:scale(.98);
  }
}

/* 404 */

.notfound {
  min-height:100svh;
  display:grid;
  align-content:center;
  justify-items:start;
  gap:20px;
}

.notfound p {
  color:var(--muted);
}

/* Motion. Everything below only applies once boot.js has confirmed motion is welcome. */

.motion {
  scroll-behavior:smooth;
}

.motion body::after {
  animation:grain 800ms steps(1) infinite;
}

@keyframes grain {
  0% { transform:translate(0,0); }
  17% { transform:translate(-34px,22px); }
  33% { transform:translate(18px,-41px); }
  50% { transform:translate(-52px,-12px); }
  67% { transform:translate(40px,36px); }
  83% { transform:translate(-16px,54px); }
}

.motion .intro {
  height:300vh;
}

.motion .intro-pin {
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.motion .hero,.motion .game {
  position:absolute;
  inset:0;
  min-height:0;
}

.motion .game {
  pointer-events:none;
}

.motion .game.is-open {
  pointer-events:auto;
}

/* Bottom to top inside the pin: footage, the canvas that covers and reveals it, the headline, the game copy. */
.motion .game-window {
  z-index:1;
  visibility:hidden;
}

.motion .shatter {
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  width:100%;
  height:100%;
  opacity:0;
  scale:.97;
  filter:blur(8px);
  transition:opacity 1200ms ease 150ms,scale 1600ms var(--ease) 150ms,filter 1200ms ease 150ms;
  pointer-events:none;
}

.motion-ready .shatter {
  opacity:1;
  scale:1;
  filter:none;
}

.motion .hero {
  z-index:3;
}

.motion .game-copy {
  z-index:4;
}

/* Once WebGL has taken over the logo, the image only holds its place in the layout. */
.gl .hero-identity {
  visibility:hidden;
}

.motion .shift {
  height:260vh;
}

.motion .shift-pin {
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

.motion .scene {
  position:absolute;
  inset:0;
  padding-block:0;
}

.motion .scene-night {
  clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);
  will-change:clip-path;
}

/* The header's light text cannot sit on the day scene. */
.on-day .site-header:not(:focus-within) {
  transform:translateY(-170%);
}

/* Words rise out of a mask. Padding keeps descenders and italics from being clipped. */
.w {
  display:inline-block;
  vertical-align:top;
  padding:.12em .09em .22em;
  margin:-.12em -.09em -.22em;
  overflow:hidden;
}

.wi {
  display:inline-block;
}

.motion [data-split] .wi {
  transform:translateY(160%);
  transition:transform 300ms var(--ease);
}

.motion [data-split].is-in .wi,.motion .game.is-open [data-split] .wi {
  transform:none;
  transition-duration:950ms;
  transition-delay:calc(var(--i,0) * 55ms);
}

.motion .studio-logo {
  opacity:0;
  transform:scale(.94);
  filter:blur(10px);
  transition:opacity 1200ms ease 150ms,transform 1600ms var(--ease) 150ms,filter 1200ms ease 150ms;
}


.motion-ready .studio-logo {
  opacity:1;
  transform:none;
  filter:none;
}

.motion .game-description,.motion .actions {
  opacity:0;
  transform:translateY(16px);
  transition:opacity 260ms ease,transform 260ms var(--ease);
}

.motion .game.is-open .game-description,.motion .game.is-open .actions {
  opacity:1;
  transform:none;
  transition-duration:800ms;
}

.motion .game.is-open .game-description { transition-delay:180ms; }
.motion .game.is-open .actions { transition-delay:280ms; }

.motion .reel-row {
  width:max-content;
  overflow:visible;
  will-change:transform;
}

.motion [data-scrub] .w {
  overflow:visible;
}

.motion [data-scrub] .wi {
  opacity:.16;
  transition:opacity 260ms ease;
}

.motion [data-reveal=""] {
  opacity:0;
  transform:translateY(18px);
  transition:opacity 800ms ease,transform 800ms var(--ease);
}

.motion [data-reveal=""].is-in {
  opacity:1;
  transform:none;
}

.motion [data-letters] .wi {
  transform:translateY(160%);
  transition:transform 1100ms var(--ease);
  transition-delay:calc(var(--i,0) * 50ms);
}

.motion [data-letters].is-in .wi {
  transform:none;
}

.motion .wordmark-sub {
  transition-delay:600ms;
}

@media(hover:hover) and (pointer:fine) {
  nav a:hover::after {
    transform:scaleX(1);
  }
  .nav-cta:hover,.button:hover {
    background:var(--accent);
    color:var(--bg);
    border-color:var(--accent);
  }
  .button.wishlist:hover .arrow {
    transform:translate(2px,-2px);
  }
  .text-link:hover svg,.back-top:hover svg {
    transform:translateY(-3px);
  }
  .footer-baseline a:hover {
    color:var(--ink);
  }
  .shot:hover img {
    transform:scale(1.04);
  }
  .dialog-close:hover,.lightbox-bar button:hover {
    border-color:var(--muted);
  }
}

a:focus-visible,a:focus-visible svg {
  transition:none;
}

@media(max-width:700px) {
  .site-header {
    padding-block:10px;
  }
  .brand {
    gap:10px;
  }
  .brand img {
    width:27px;
    height:35px;
  }
  nav {
    font-size:12px;
  }
  .nav-cta {
    padding-inline:10px 12px;
  }
  .hero {
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    padding-block:84px 32px;
  }
  h1 {
    font-size:clamp(46px,13.4vw,80px);
    line-height:1.01;
  }
  .hero-identity {
    width:min(100%,46vh,360px);
  }
  .game-copy h2 {
    font-size:clamp(64px,21.5vw,120px);
  }
  .actions {
    margin-top:22px;
  }
  .button .arrow {
    margin-left:10px;
  }
  .scene-inner {
    width:calc(100% - 2 * var(--gutter));
  }
  .scene-media video {
    aspect-ratio:1/1;
    max-height:46dvh;
  }
  .scene-copy,.tuned {
    grid-template-columns:1fr;
  }
  .scene h3 {
    font-size:clamp(34px,10vw,48px);
  }
  .shot {
    width:78vw;
  }
  .reel-row+.reel-row .shot {
    width:62vw;
  }
  .shard-a,.shard-c {
    display:none;
  }
  .footer-baseline {
    flex-wrap:wrap;
    gap:14px 20px;
    padding-block:32px;
    font-size:14px;
  }
  .footer-note,.footer-links {
    flex-basis:100%;
  }
  .footer-links {
    flex-wrap:wrap;
    gap:0 22px;
  }
}

@media(max-width:350px) {
  .brand>span {
    display:none;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    transition-duration:.01ms!important;
    animation:none!important;
  }
  .button:active,.dialog-close:active,.lightbox-bar button:active {
    transform:none;
  }
}

@media(forced-colors:active) {
  .button,.nav-cta {
    border:1px solid ButtonText;
  }
  body::after,.shard,.torch,.shatter {
    display:none;
  }
}