/* ==========================================================================
   Voltix Studios
   Palette is taken off the studio mark: electric blue into violet, on black.
   Each game section overrides --accent so the shared components (status pill,
   glow, feature headings, rules) pick up that game's colour automatically.
   ========================================================================== */

:root {
  --ink:        #05060a;
  --ink-1:      #090b12;
  --ink-2:      #0e111a;
  --ink-3:      #141824;
  --line:       rgba(255, 255, 255, .09);
  --line-soft:  rgba(255, 255, 255, .05);

  --text:       #e9edf6;
  --text-dim:   #b3bccd;
  --muted:      #8792a8;

  --volt:       #35a3ff;
  --volt-2:     #a06bff;

  --accent:     var(--volt);
  --accent-2:   var(--volt-2);

  --display: "Chakra Petch", "Segoe UI Semibold", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --r: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 400 16px/1.7 var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

::selection { background: color-mix(in srgb, var(--volt) 45%, transparent); }

:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 22px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  background: var(--volt);
  color: #04060d;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
}
.skip:focus { left: 12px; }

/* ── type ────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0;
}

.h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  margin-bottom: 18px;
}

.eyebrow {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}

.lead {
  font-size: 1.08rem;
  color: var(--text-dim);
  max-width: 62ch;
  margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ── buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  text-decoration: none;
  /* the contact button carries a full email address — let it fold rather than
     push the page sideways on a narrow phone */
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px);
}

.btn--primary {
  background: linear-gradient(100deg, var(--volt), var(--volt-2));
  border-color: transparent;
  color: #05070e;
  box-shadow: 0 8px 30px -10px color-mix(in srgb, var(--volt) 70%, transparent);
}
.btn--primary:hover {
  background: linear-gradient(100deg, var(--volt), var(--volt-2));
  box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--volt) 80%, transparent);
}

/* Brand icons keep their own colours, so this sets size only. The 18px cap is
   what stops a <use> reference from drawing at the symbol's natural size. */
.btn__icon {
  width: 18px;
  height: 18px;
  flex: none;
}

.btn--sm { padding: 9px 18px; font-size: .86rem; }
.btn--lg { padding: 16px 34px; font-size: 1.02rem; }

/* ── header ──────────────────────────────────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease),
              backdrop-filter .3s var(--ease);
}
.nav.is-stuck {
  background: rgba(5, 6, 10, .82);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--line-soft);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  height: 72px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  flex: none;
}
.brand img { width: 34px; height: 34px; }
.brand span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.brand em {
  font-style: normal;
  font-weight: 500;
  color: var(--muted);
  margin-left: .38em;
  letter-spacing: .18em;
  font-size: .72em;
}

.nav__links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: .92rem;
}
.nav__links a {
  color: var(--text-dim);
  text-decoration: none;
  position: relative;
  padding: 4px 0;
  transition: color .2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: linear-gradient(90deg, var(--volt), var(--volt-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after,
.nav__links a.is-current::after { transform: scaleX(1); }
.nav__links a.is-current { color: var(--text); }

.nav .btn--sm { flex: none; }

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: clamp(56px, 9vw, 104px) 0 clamp(72px, 10vw, 128px);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}

.hero__glow {
  position: absolute;
  inset: -30% -10% auto;
  height: 900px;
  z-index: -2;
  background:
    radial-gradient(58% 46% at 50% 34%, rgba(53, 163, 255, .20), transparent 70%),
    radial-gradient(40% 34% at 68% 20%, rgba(160, 107, 255, .16), transparent 72%);
  filter: blur(6px);
}

/* faint technical grid, faded out toward the edges */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(62% 58% at 50% 42%, #000 20%, transparent 78%);
          mask-image: radial-gradient(62% 58% at 50% 42%, #000 20%, transparent 78%);
}

.hero__fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  background: linear-gradient(to bottom, transparent, var(--ink));
  z-index: -1;
}

/* build_assets.py keys the black matte out of this file, so it composites onto
   the hero glow directly — no blend mode, no rectangle. */
.hero__lockup {
  width: min(400px, 74vw);
  margin: 0 auto clamp(26px, 4vw, 40px);
  filter: drop-shadow(0 16px 44px rgba(53, 163, 255, .3));
}

.hero__title {
  font-size: clamp(2.3rem, 6.4vw, 4.1rem);
  letter-spacing: -.02em;
  margin-bottom: 22px;
}

.hero__lead {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  color: var(--text-dim);
  max-width: 58ch;
  margin: 0 auto;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 34px;
}


/* ── generic section ─────────────────────────────────────────────────────── */

.section { padding: clamp(64px, 8vw, 104px) 0; }
.section--tight { padding-bottom: clamp(20px, 3vw, 34px); }

/* ── game section ────────────────────────────────────────────────────────── */

.game {
  position: relative;
  padding: clamp(56px, 7vw, 92px) 0;
  border-top: 1px solid var(--line-soft);
  isolation: isolate;
  overflow: hidden;
}
.game--ps { --accent: #ff5a52; --accent-2: #4a91ea; }
.game--cw { --accent: #ff8a2b; --accent-2: #ffc04d; }
.game--dg { --accent: #e8a33a; --accent-2: #5fb6e0; }
.game--loom { --accent: #3b8bf0; --accent-2: #f2d9a6; }

/* Loom's cloth, drawn rather than photographed: the game is a 4x4 grid of three
   thread colours, so the section can show a real day's plain cloth and pattern
   in the game's own palette without a screenshot. */
/* The figures lose their default 40px side margins, and the cloths shrink with
   the screen: either one pushes the column wider than a phone. */
.cloths { display: flex; align-items: center; justify-content: center; gap: 22px; margin: 26px 0 8px; }
.cloths figure { margin: 0; }
.cloth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 9px;
  width: min(132px, 30vw); aspect-ratio: 1; border-radius: 22px; background: #f2e1cc;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.cloth i { display: block; border-radius: 7px; }
.cloth .t0 { background: #5bc4c0; } .cloth .t1 { background: #ff8c8c; } .cloth .t2 { background: #ffd46b; }
.cloths__arrow { color: var(--muted); font-size: 28px; }
.cloths figcaption { font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); text-align: center; margin-top: 8px; font-weight: 600; }

/* Screenshots. On a phone they are a shelf you push sideways, which is the one
   layout that shows a portrait screenshot at a readable size on a portrait
   screen; from tablet width up there is room to lay them out flat. The row is
   allowed to bleed past the text column so the first image is not marooned in
   the middle of the page. */
.shots { margin: 34px 0 6px; }
.shots__row {
  display: flex; gap: 14px; list-style: none; margin: 0; padding: 4px 0 14px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.shots__row li { flex: 0 0 auto; scroll-snap-align: center; }
.shots__row img {
  display: block; width: 210px; height: auto; border-radius: 16px;
  border: 1px solid var(--line); background: var(--ink-2);
}
@media (min-width: 760px) {
  .shots__row { flex-wrap: wrap; justify-content: center; overflow: visible; }
  .shots__row img { width: 236px; }
}

.game__glow {
  position: absolute;
  inset: -20% -20% auto;
  height: 700px;
  z-index: -1;
  background: radial-gradient(46% 50% at 50% 0%,
              color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%);
}

.game__head {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(30px, 4.5vw, 62px);
  align-items: center;
}
.game__head--flip .game__art { order: 2; }

.game__art {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 70px -34px color-mix(in srgb, var(--accent) 60%, transparent);
}
/* The two key arts have different native ratios — one wide, one square. A fixed
   frame with `contain` gives both games an identically sized card, and the art
   is already matted on black so the letterboxing is invisible. */
.game__art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 15px 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  color: color-mix(in srgb, var(--accent) 82%, white);
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.status__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: pulse 2.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.game__name {
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  letter-spacing: -.015em;
}

.game__tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 12px 0 22px;
}

.game__pitch {
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 16px;
}

.game__intro p { color: var(--text-dim); }
.game__intro .game__pitch { color: var(--text); }

/* store call to action */

.cta-play {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
}

/* No card, no shadow. The SVG already carries the white ground and the
   four-module quiet zone a scanner needs, so wrapping it in anything else is
   just chrome around a thing that is already a white square. */
.qr {
  margin: 0;
  text-align: center;
}
/* 136px over 45 viewBox units is ~3px a module, which is about where phones
   stop needing to be held at point-blank range to read a version-5 grid. */
.qr img {
  display: block;
  width: 136px;
  height: 136px;
  border-radius: 8px;
}
.qr figcaption {
  margin-top: 8px;
  font-size: .72rem;
  color: var(--muted);
}

/* game cards: the home page's index of the games, and the three "other games"
   at the foot of each game's page. A card is a way into games/<slug>/; the
   per-game accent comes from the same .game--xx class the game pages use. */

.cards {
  list-style: none;
  margin: clamp(28px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 18px;
}
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  transform: translateY(-3px);
}
/* The key arts have different ratios; a fixed frame and `contain` on black give
   every card the same shape, as .game__art does on the game pages. */
.card__art {
  display: block;
  background: #000;
  border-bottom: 1px solid var(--line-soft);
}
.card__art img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}
.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px 22px 24px;
}
.card .status { align-self: flex-start; margin-bottom: 12px; }
.card__name {
  font-size: 1.45rem;
  letter-spacing: -.01em;
  margin: 0;
}
.card__name a { text-decoration: none; }
.card__name a:hover { color: var(--accent); }
.card__tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: .76rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 6px 0 12px;
}
.card__pitch {
  margin: 0;
  color: var(--text-dim);
  font-size: .97rem;
}
.card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

/* a game's own page: the article is the page, so it starts under the header
   with a way back above it, and the "other games" block sits tighter. */
.page-game { border-top: 0; padding-top: clamp(24px, 3.5vw, 44px); }
.crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: clamp(22px, 3vw, 34px);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.crumb::before { content: "\2190"; }
.crumb:hover { color: var(--text); }
.more { border-top: 1px solid var(--line-soft); }

/* feature cards */

.features {
  list-style: none;
  margin: clamp(44px, 5.5vw, 66px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}
.features li {
  padding: 24px 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-1));
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.features li:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-3px);
}
.features h3 {
  font-size: 1.06rem;
  letter-spacing: .01em;
  margin-bottom: 9px;
  color: var(--text);
}
.features h3::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  margin-bottom: 13px;
}
.features p {
  margin: 0;
  color: var(--muted);
  font-size: .94rem;
  line-height: 1.62;
}

/* small section heading used inside a game block */

.roster__title {
  font-size: 1.28rem;
  margin-bottom: 20px;
  letter-spacing: .01em;
}

/* aircraft roster */

.roster { margin-top: clamp(44px, 5.5vw, 62px); }
.roster__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(98px, 1fr));
  gap: 12px;
}
.roster__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: rgba(255, 255, 255, .022);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.roster__grid li:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  background: rgba(255, 255, 255, .05);
}
.roster__grid img { width: 54px; height: 54px; }
.roster__grid span {
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* two-column split — a wide table beside a narrow companion: CoreWard puts a
   phone shot there, Dungeon Gourmand a stage ladder */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, .8fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  margin-top: clamp(44px, 5.5vw, 62px);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}
.data-table th,
.data-table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: baseline;
}
.data-table thead th {
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom-color: var(--line);
}
.data-table tbody th {
  font-family: var(--display);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}
.data-table td { color: var(--muted); }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }

.chip {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent);
  margin-right: 10px;
}

/* A phone screenshot at full column width towers over the table beside it. */
.shot { margin: 0 auto; max-width: 276px; }
.shot img {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .9);
}
.shot figcaption {
  margin-top: 11px;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* strata */

.strata { margin-top: clamp(44px, 5.5vw, 62px); }
.strata__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  counter-reset: stratum;
}
.strata__grid li {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink-1);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.strata__grid li:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  transform: translateY(-4px);
}
.strata__grid img {
  width: 100%;
  aspect-ratio: 1 / 2.4;
  object-fit: cover;
}
.strata__grid h4 {
  font-size: .92rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 14px 14px 0;
}
.strata__grid span {
  display: block;
  padding: 4px 14px 15px;
  font-size: .8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* stage ladder — a short ordered progression with no art of its own. The
   counter is drawn rather than listed so the numbers keep the display face and
   survive a list-style reset. */

.ladder { margin: 0; padding: 0; list-style: none; counter-reset: rung; }
.ladder li {
  position: relative;
  counter-increment: rung;
  padding: 14px 0 14px 44px;
  border-bottom: 1px solid var(--line-soft);
}
.ladder li:last-child { border-bottom: 0; }
.ladder li::before {
  content: counter(rung);
  position: absolute;
  left: 0;
  top: 13px;
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--accent) 80%, white);
}
.ladder h4 {
  font-size: .95rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ladder span {
  display: block;
  margin-top: 3px;
  font-size: .84rem;
  color: var(--muted);
}

/* fact strip */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 1px;
  margin: clamp(44px, 5.5vw, 62px) 0 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--line);
  overflow: hidden;
}
.facts > div {
  background: var(--ink-1);
  padding: 20px 22px;
}
.facts dt {
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.facts dd {
  margin: 0;
  font-size: .96rem;
  color: var(--text);
}

/* ── studio ──────────────────────────────────────────────────────────────── */

.studio {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  gap: clamp(30px, 4.5vw, 62px);
  align-items: start;
  margin-top: 10px;
}
.studio__points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.studio__points li {
  padding-left: 22px;
  border-left: 2px solid color-mix(in srgb, var(--volt) 45%, transparent);
}
.studio__points h3 {
  font-size: 1.04rem;
  margin-bottom: 7px;
}
.studio__points p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

/* ── contact ─────────────────────────────────────────────────────────────── */

.contact {
  border-top: 1px solid var(--line-soft);
  background:
    radial-gradient(52% 100% at 50% 0%, rgba(53, 163, 255, .10), transparent 70%),
    radial-gradient(36% 80% at 72% 10%, rgba(160, 107, 255, .09), transparent 72%);
}
.contact__inner { text-align: center; }
.contact .lead { margin: 0 auto 32px; }

/* ── social ──────────────────────────────────────────────────────────────── */

/* The sprite is markup, not a picture — it must occupy no space and stay out
   of the accessibility tree, but `display:none` would kill the <use> refs. */
.sprite {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.social__icon {
  width: 20px; height: 20px;
  flex: none;
  fill: currentColor;
}

.follow {
  margin-top: clamp(44px, 6vw, 66px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--line-soft);
}
.follow__label {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 20px;
}
.follow__note {
  margin: 22px 0 0;
  font-size: .88rem;
  color: var(--muted);
}

.social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* labelled pill — used in the contact block */
.social__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.social__link:hover {
  border-color: color-mix(in srgb, var(--brand, var(--volt)) 55%, transparent);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -14px color-mix(in srgb, var(--brand, var(--volt)) 70%, transparent);
}
.social__link:hover .social__icon { color: var(--brand, var(--volt)); }
.social__link .social__icon {
  width: 22px; height: 22px;
  color: var(--text);
  transition: color .25s var(--ease);
}
.social__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--text);
}
.social__handle {
  font-size: .82rem;
  color: var(--muted);
  padding-left: 12px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}

/* icon-only button — used in the footer */
.social--compact { gap: 10px; }
.social__btn {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-dim);
  background: rgba(255, 255, 255, .025);
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), transform .25s var(--ease);
}
.social__btn:hover {
  color: var(--brand, var(--volt));
  border-color: color-mix(in srgb, var(--brand, var(--volt)) 50%, transparent);
  background: rgba(255, 255, 255, .06);
  transform: translateY(-2px);
}

/* Each network keeps its own colour on hover only, so the resting row stays
   monochrome and the brand palette still owns the page. */
.social__link--x,  .social__btn--x  { --brand: #e9edf6; }
.social__link--yt, .social__btn--yt { --brand: #ff3d3d; }
.social__link--tt, .social__btn--tt { --brand: #25f4ee; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.foot {
  border-top: 1px solid var(--line-soft);
  padding: 40px 0 46px;
}
.foot__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line-soft);
}
.foot .brand img { width: 30px; height: 30px; opacity: .9; }

.foot__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  flex-wrap: wrap;
  padding-top: 24px;
}
.foot__copy {
  margin: 0;
  font-size: .84rem;
  color: var(--muted);
  max-width: 62ch;
}
.foot__links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: .84rem;
}
.foot__links a {
  text-decoration: none;
  color: var(--text-dim);
  transition: color .2s var(--ease);
}
.foot__links a:hover { color: var(--volt); }

/* ── scroll reveal ───────────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .game__head,
  .split,
  .studio { grid-template-columns: 1fr; }
  .game__head--flip .game__art { order: 0; }
  .shot { max-width: 320px; margin-inline: auto; }
  .strata__grid { grid-template-columns: repeat(5, 1fr); gap: 8px; }
  .strata__grid h4 { font-size: .8rem; padding-inline: 10px; }
  .strata__grid span { font-size: .72rem; padding-inline: 10px; }
}

/* The nav is two links - Games, Studio - and stays that way at every width
   rather than collapsing into a menu: a hamburger would cost more than it saves. */
@media (max-width: 860px) {
  .nav__links { gap: 18px; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 78px; }
  .nav__inner { gap: 14px; }
  /* You cannot scan a code with the screen showing it. Below this width the
     reader is holding the device they would have scanned it with, so the QR is
     dropped and the button carries the section on its own. */
  .qr { display: none; }
  .strata__grid { grid-template-columns: repeat(2, 1fr); }
  .strata__grid img { aspect-ratio: 1 / 1.5; }
}

/* The two handles are long enough to push a pill wider than a small phone, so
   the row becomes a column before that happens. */
@media (max-width: 560px) {
  .social { flex-direction: column; align-items: stretch; }
  .social__link { justify-content: center; }
  .social--compact { flex-direction: row; justify-content: center; }
}

@media (max-width: 460px) {
  .foot__top,
  .foot__bar { justify-content: center; text-align: center; }
  .foot__links { width: 100%; justify-content: center; }
}

/* Narrow phones: the wordmark's "STUDIOS" is the first thing to go, so the one
   remaining nav link and the contact button still fit on one row at 320px. */
@media (max-width: 420px) {
  .wrap { padding-inline: 16px; }
  .brand em { display: none; }
  .brand img { width: 30px; height: 30px; }
  .brand span { font-size: .98rem; }
  .btn--sm { padding: 8px 14px; font-size: .82rem; }
  .btn--lg { padding: 14px 20px; font-size: .9rem; }
  /* the network name alone is enough this narrow */
  .social__handle { display: none; }
}

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