:root {
  --paper:#f4f1e9;
  --ink:#292820;
  --muted:#6d6b61;
  --line:#d6d2c6;
  --accent:#b7472d;
  --display:'Manrope',Arial,sans-serif;
  --body:'DM Sans','Segoe UI',sans-serif;
  --gutter:clamp(22px,5.5vw,88px)}

*,*::before,*::after {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:30px;
  background:var(--paper);
  color-scheme:light}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased}
button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
button {
  font:inherit;
  cursor:pointer}
a {
  color:inherit;
  text-decoration:none}
img {
  display:block;
  max-width:100%}
button svg,a svg {
  width:24px;
  height:24px;
  flex-shrink:0}
[hidden] {
  display:none!important}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:6px}
.game-card :focus-visible {
  outline-color:#fff}
::selection {
  color:var(--paper);
  background:var(--accent)}
.wrap {
  width:min(100% - var(--gutter)*2,1312px);
  margin-inline:auto}
.skip-link {
  position:fixed;
  z-index:100;
  top:12px;
  left:12px;
  transform:translateY(-180%);
  background:var(--ink);
  color:white;
  padding:14px 20px}
.skip-link:focus {
  transform:translateY(0)}

.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:102px;
  border-bottom:1px solid var(--line);
  gap:24px}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px}
.brand-symbol {
  display:block;
  width:48px;
  height:54px;
  overflow:hidden}
.brand-symbol img {
  width:70px;
  height:70px;
  max-width:none;
  margin:-8px 0 0 -11px;
  filter:brightness(0)}
.brand-name {
  font-family:'Tektur',var(--display);
  font-size:23px;
  font-weight:500;
  letter-spacing:-1px;
  line-height:1}
.brand-name>span {
  display:block;
  font-size:12px;
  font-weight:600;
  letter-spacing:4px;
  margin-top:5px}
nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:14px;
  font-weight:550}
nav>a {
  padding-block:13px}
nav>a:hover {
  color:var(--accent)}
nav .nav-contact {
  border:1px solid var(--ink);
  padding:11px 19px;
  border-radius:100px;
  transition:color .18s,background .18s}
.nav-contact>span {
  margin-left:18px;
  font-size:20px}
nav .nav-contact:hover {
  background:var(--ink);
  color:var(--paper)}

.intro {
  padding-top:48px;
  padding-bottom:53px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:40px}
.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:650;
  letter-spacing:.13em;
  text-transform:uppercase;
  margin:0 0 20px}
.intro-identity {
  display:flex;
  align-items:center;
  gap:clamp(20px,2.4vw,36px)}
.hero-mark {
  width:clamp(80px,8.4vw,125px);
  height:auto;
  flex-shrink:0;
  filter:brightness(0)}
h1,h2,h3,p {
  margin-top:0}
h1 {
  font-family:var(--display);
  font-size:clamp(44px,5.4vw,82px);
  font-weight:750;
  line-height:1.04;
  letter-spacing:-.065em;
  margin-bottom:0}
.period {
  color:var(--accent)}
.play-word {
  position:relative;
  display:inline-block;
  color:var(--accent)}
.play-word svg {
  position:absolute;
  width:105%;
  height:15px;
  bottom:-10px;
  left:-2px;
  fill:none;
  stroke:var(--accent);
  stroke-width:3;
  stroke-linecap:round}
.intro-aside {
  justify-self:end;
  width:272px;
  padding-bottom:5px}
.intro-aside>p {
  font-size:19px;
  font-weight:450;
  line-height:1.6;
  letter-spacing:-.025em;
  margin-bottom:23px}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:33px;
  font-size:14px;
  font-weight:600}
.text-link>span {
  display:grid;
  place-items:center;
  border:1px solid #bbb6a8;
  width:32px;
  height:32px;
  border-radius:50%;
  transition:transform .18s,background .18s}
.text-link:hover>span {
  transform:translateY(3px);
  background:#e8e3d8}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:17px}
.section-heading h2 {
  margin:0;
  font-size:14px;
  font-weight:650}
.section-index {
  color:var(--muted);
  font-size:12px;
  margin-right:12px}
.section-note {
  font-size:12px;
  color:var(--muted)}
.games-list {
  display:grid;
  gap:24px}
.game-card {
  display:grid;
  grid-template-columns:43% 57%;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:484px;
  background:var(--game-surface);
  color:#fff;
  border-radius:18px}
.game-info {
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:45px 0 45px 46px}
.game-meta {
  display:flex;
  align-items:center;
  gap:13px;
  color:#e6e3e9;
  font-size:12px;
  font-weight:500;
  letter-spacing:.025em;
  margin-bottom:35px}
.game-meta img {
  width:46px;
  height:46px;
  border-radius:10px;
  border:1px solid #ffffff26}
.meta-dot {
  padding-inline:5px}
.game-info h3 {
  font-family:var(--display);
  font-size:clamp(36px,3.65vw,54px);
  line-height:1.08;
  letter-spacing:-.05em;
  font-weight:750;
  margin-bottom:18px}
.game-description {
  max-width:330px;
  font-size:16px;
  line-height:1.7;
  color:#e1dfe6;
  margin-bottom:29px}
.game-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 20px;
  margin-top:0}
.store-button {
  display:inline-flex;
  align-items:center;
  gap:11px;
  background:#f5f3ef;
  color:#222122;
  border:1px solid #f5f3ef;
  border-radius:8px;
  padding:12px 14px;
  transition:transform .18s,background .18s}
.store-button>span:not(:last-child) {
  font-size:19px;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.035em}
.store-button small {
  display:block;
  font-size:9px;
  font-weight:650;
  letter-spacing:.11em;
  margin-bottom:2px}
.store-button>span:last-child {
  font-size:23px;
  margin-left:9px}
.store-button:hover {
  background:#fff;
  transform:translateY(-2px)}

.game-art {
  position:relative;
  align-self:stretch;
  min-width:0;
  background:radial-gradient(ellipse at 53% 50%,var(--game-glow),transparent 68%)}
.art-ring {
  position:absolute;
  width:400px;
  height:400px;
  border:1px solid #ffffff16;
  border-radius:50%;
  top:50%;
  left:51%;
  transform:translate(-50%,-50%)}
.art-ring::after {
  content:'';
  position:absolute;
  inset:-50px;
  border-radius:50%;
  border:1px solid #ffffff0b}
.game-screen {
  position:absolute;
  width:207px;
  height:auto;
  border:3px solid #ffffff55;
  border-radius:18px;
  box-shadow:5px 20px 35px #100c3b88;
  transition:transform .45s cubic-bezier(.2,.6,.3,1)}
.screen-1 {
  z-index:2;
  left:13%;
  top:45px;
  transform:rotate(-9deg)}
.screen-2 {
  z-index:1;
  right:10%;
  top:75px;
  transform:rotate(10deg);
  border-color:#ffffff38}
.game-card:hover .screen-1 {
  transform:translateY(-4px) rotate(-7deg)}
.game-card:hover .screen-2 {
  transform:translateY(-5px) rotate(8deg)}
.art-caption {
  position:absolute;
  bottom:17px;
  width:100%;
  text-align:center;
  color:#ddd9e4;
  font-size:10px;
  letter-spacing:.08em}

.about-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:90px;
  padding-top:76px;
  padding-bottom:74px}
.about-label .eyebrow {
  color:var(--muted);
  margin-bottom:22px}
.about-label h2 {
  font-family:var(--display);
  font-size:clamp(29px,3vw,41px);
  line-height:1.22;
  letter-spacing:-.055em;
  font-weight:650;
  margin-bottom:0}
.about-copy {
  padding-top:4px}
.about-copy p {
  font-size:16px;
  line-height:1.75;
  max-width:460px;
  margin-bottom:10px}
.about-copy p+p {
  color:var(--muted)}
.disciplines {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:20px}
.disciplines>span {
  font-size:12px;
  font-weight:500;
  border:1px solid #cec8ba;
  border-radius:100px;
  padding:7px 12px}

.contact-section {
  background:#e8e3d8;
  border-top:1px solid #d9d2c4;
  border-bottom:1px solid #d9d2c4}
.contact-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:35px;
  padding-block:49px}
.contact-inner .eyebrow {
  color:var(--muted);
  margin-bottom:14px}
.contact-inner h2 {
  font-family:var(--display);
  font-size:clamp(32px,3.7vw,51px);
  font-weight:650;
  line-height:1.1;
  letter-spacing:-.06em;
  margin-bottom:14px}
.contact-inner h2>span {
  color:var(--accent)}
.contact-copy {
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
  margin-bottom:0}
.contact-link {
  display:flex;
  align-items:center;
  gap:21px;
  font-size:clamp(15px,1.5vw,21px);
  font-weight:500;
  letter-spacing:-.03em}
.contact-link>span:first-child {
  border-bottom:1px solid #9c9586;
  padding-block:4px}
.contact-arrow {
  background:var(--accent);
  color:var(--paper);
  display:grid;
  place-items:center;
  font-size:32px;
  width:57px;
  height:57px;
  border-radius:50%;
  flex-shrink:0;
  transition:transform .2s}
.contact-link:hover .contact-arrow {
  transform:rotate(45deg)}
.site-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:92px;
  color:var(--muted);
  font-size:12px}
.footer-brand {
  color:var(--ink);
  font-family:'Tektur',var(--display);
  font-size:17px;
  font-weight:500;
  letter-spacing:-.045em}
.footer-brand>span {
  color:var(--accent);
  font-size:18px;
  margin-left:3px}

.error-page {
  min-height:75svh;
  padding-block:100px}
.error-page h1 {
  margin-bottom:25px}
.error-page>p {
  font-size:17px;
  margin-bottom:30px}

@media(min-width:1500px) {
  .game-screen {
  width:229px}
.game-card {
  min-height:520px}
}

@media(max-width:1100px) {
  .game-card {
  grid-template-columns:46% 54%;
  min-height:470px}
.game-info {
  padding:33px 0 33px 32px}
.game-screen {
  width:180px}
.screen-1 {
  left:6%;
  top:49px}
.screen-2 {
  right:6%;
  top:91px}
.game-actions {
  flex-direction:column;
  align-items:flex-start;
  gap:7px}
.game-meta {
  margin-bottom:24px}
.game-description {
  padding-right:20px}
.about-section {
  gap:50px}
.contact-inner {
  gap:28px}
.contact-link {
  gap:15px}
.contact-arrow {
  width:45px;
  height:45px;
  font-size:26px}
}

@media(max-width:760px) {
  :root {
  --gutter:24px}
.site-header {
  min-height:85px}
nav {
  gap:21px}
.brand-symbol {
  display:none}
.brand-name {
  font-size:23px}
nav .nav-contact {
  border:0;
  padding-inline:0}
.nav-contact>span {
  margin-left:5px}
.intro {
  padding-top:37px;
  padding-bottom:36px;
  grid-template-columns:1fr;
  gap:27px}
h1 {
  font-size:clamp(30px,7.8vw,54px)}
.intro-identity {
  gap:clamp(14px,3vw,23px)}
.hero-mark {
  width:clamp(50px,12vw,80px)}
.intro-aside {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  justify-self:stretch;
  width:auto;
  padding:0}
.intro-aside>p {
  font-size:15px;
  line-height:1.5;
  margin:0}
.text-link {
  font-size:12px;
  gap:13px}
.text-link>span {
  width:29px;
  height:29px;
  flex-shrink:0}
.eyebrow {
  font-size:12px;
  margin-bottom:19px}
.game-card {
  grid-template-columns:1fr}
.game-info {
  padding:28px 28px 0}
.game-meta {
  margin-bottom:20px}
.game-meta img {
  width:39px;
  height:39px;
  border-radius:9px}
.game-info h3 {
  font-size:42px;
  margin-bottom:12px}
.game-description {
  max-width:460px;
  font-size:16px;
  line-height:1.65;
  padding:0;
  margin-bottom:22px}
.game-actions {
  flex-direction:row;
  align-items:center;
  gap:12px 20px}
.store-button {
  padding:10px 12px}
.store-button>span:not(:last-child) {
  font-size:17px}
.store-button>span:last-child {
  font-size:21px;
  margin-left:5px}
.game-art {
  height:370px;
  width:min(100%,440px);
  margin:8px auto 0}
.game-screen {
  width:164px;
  border-radius:14px;
  border-width:2px}
.screen-1 {
  left:14%;
  top:30px}
.screen-2 {
  right:13%;
  top:47px}
.art-ring {
  width:295px;
  height:295px}
.art-caption {
  bottom:12px;
  font-size:10px}
.about-section {
  padding-block:45px;
  grid-template-columns:1fr;
  gap:24px}
.about-label h2 {
  font-size:34px}
.about-label .eyebrow {
  margin-bottom:17px}
.about-copy {
  padding:0}
.about-copy p {
  font-size:16px;
  max-width:100%}
.contact-inner {
  align-items:flex-start;
  flex-direction:column;
  padding-block:36px;
  gap:25px}
.contact-inner h2 {
  font-size:39px}
.contact-copy {
  font-size:14px}
.contact-link {
  font-size:18px;
  width:100%;
  justify-content:space-between}
.site-footer {
  padding-block:25px;
  min-height:100px;
  flex-wrap:wrap;
  font-size:12px;
  gap:12px}
.site-footer>span:nth-child(2) {
  display:none}
}

@media(max-width:390px) {
  :root {
  --gutter:18px}
nav {
  gap:14px;
  font-size:12px}
.brand-name {
  font-size:21px}
.brand-name>span {
  font-size:10px}
.intro-aside {
  align-items:flex-start}
.intro-aside>p {
  font-size:13px}
.text-link {
  font-size:12px;
  gap:8px}
.section-note {
  font-size:12px}
.game-info {
  padding:24px 22px 0}
.game-info h3 {
  font-size:36px}
.game-actions {
  gap:7px}
.game-art {
  height:340px}
.game-screen {
  width:148px}
.screen-1 {
  left:9%}
.screen-2 {
  right:9%}
.contact-inner h2 {
  font-size:33px}
.contact-link {
  font-size:16px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  transition:none!important;
  animation:none!important}
}