/* This Way Games: studio link page. Mobile first; no third-party requests. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url(/assets/fonts/bricolage-latin.woff2) format("woff2");
  font-weight: 500 800;
  font-display: swap;
}

:root {
  --bg: #e1ac10;
  --ink: #0b0b0b;
  --accent: #24338f;
  --tw-field: #2b3a32;
  --tw-ink: #f3f6ef;
  --tw-hi: #8edb5a;
  --bx-field: #0b0b12;
  --bx-ink: #e8e6f0;
  --bx-hi: #22d3ee;

  --gutter: 16px;
  --sign-h: calc(15vw * 0.88 * 2 + 26px);

  --step-small: 0.875rem;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1rem + 1vw, 2rem);
  --step-head: clamp(2.75rem, 1.4rem + 5vw, 5.5rem);
  --step-sign: 15vw;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-padding-top: var(--sign-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 500 var(--step-body)/1.5 "Bricolage Grotesque", system-ui, sans-serif;
  letter-spacing: -0.01em;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }


/* The sign: the studio's name is a direction, held at the top while the games pass under it. */
.sign {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  padding: 14px var(--gutter) 12px;
}
.sign-title {
  margin: 0;
  font-size: var(--step-sign);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}
.sign-title span { display: block; white-space: nowrap; }
.arrow {
  display: inline-block;
  width: 0.62em;
  height: 0.62em;
  margin-left: 0.1em;
  fill: var(--ink);
  vertical-align: -0.02em;
}

/* First screen: what this is, and both games one tap away. */
.intro { padding: 12px var(--gutter) 40px; display: grid; gap: 22px; }
.intro-lead { font-size: var(--step-lead); font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; max-width: 26ch; }
.hello { margin-top: 10px; max-width: 34ch; }
.intro-games { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.intro-games li { display: grid; gap: 10px; align-content: start; }
.tile { display: grid; gap: 8px; text-decoration: none; }
.tile img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--ink); }
.tile-name { font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  font-size: inherit;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
}
.intro-games .btn { padding: 10px 8px; }

/* Game cards: one screen each, a field in the game's own colours. */
.game {
  min-height: calc(100svh - var(--sign-h));
  padding: 28px var(--gutter) 36px;
  display: grid;
  gap: 20px;
  align-content: center;
}
.game-tw { background: var(--tw-field); color: var(--tw-ink); --hi: var(--tw-hi); }
.game-bx { background: var(--bx-field); color: var(--bx-ink); --hi: var(--bx-hi); }

.game-text { display: contents; }
.game-head { display: flex; align-items: center; gap: 14px; order: -2; }
.icon { width: 56px; height: 56px; border-radius: 22%; }
.game h2 { margin: 0; font-size: var(--step-head); font-weight: 800; line-height: 0.9; letter-spacing: -0.045em; text-transform: uppercase; }
.pitch { font-size: var(--step-lead); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--hi); }
.facts { font-weight: 700; }

.game-media { order: -1; display: grid; grid-template-columns: 46% 1fr; gap: 16px; align-items: end; }
.clip { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.shot { display: none; }
.actions { display: grid; gap: 14px; justify-items: start; }
.game .btn { background: var(--bg); color: var(--ink); width: 100%; }
.more { font-weight: 700; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* Footer: a quiet close after the run releases. */
.foot {
  padding: 22svh var(--gutter) 28px;
  display: grid;
  gap: 8px;
  font-size: var(--step-small);
}
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 20px; font-weight: 700; }

/* ---------- Phone layout: clip left, pitch right ---------- */
@media (max-width: 899px) {
  /* On a phone the sign stays at the top of the first screen only: each game gets the whole screen. */
  .sign { position: relative; }
  :root { --sign-h: 0px; }
  .game {
    grid-template-columns: 46% 1fr;
    column-gap: 16px;
    row-gap: 18px;
  }
  .game-head { grid-column: 1 / -1; }
  .game-media { grid-column: 1; grid-row: 2 / span 2; display: block; }
  .pitch { grid-column: 2; grid-row: 2; align-self: end; }
  .facts { grid-column: 2; grid-row: 3; align-self: start; }
  .game-text > p:not(.pitch):not(.facts) { grid-column: 1 / -1; }
  .actions { grid-column: 1 / -1; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .intro-games { max-width: 520px; }
  .game { grid-template-columns: 40% 1fr; }
}

/* ---------- Wider screens ---------- */
@media (min-width: 900px) {
  :root {
    --gutter: 32px;
    --step-sign: clamp(90px, 9.4vw, 168px);
    --sign-h: calc(var(--step-sign) * 0.88 + 40px);
  }
  .sign { padding: 22px var(--gutter) 18px; }
  .sign-title { display: flex; gap: 0.25em; }
  .sign-title span + span { flex: 1; display: flex; justify-content: space-between; align-items: flex-end; }
  .arrow { width: 0.72em; height: 0.72em; margin-bottom: 0.04em; }

  .intro {
    min-height: calc(100svh - var(--sign-h));
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    align-items: end;
    padding-top: 8px;
    padding-bottom: 48px;
  }
  .intro-text { grid-column: 1 / span 4; padding-bottom: 6px; }
  .intro-games { grid-column: 5 / -1; display: flex; justify-content: space-evenly; gap: 32px; }
  .tile img { height: calc(100svh - var(--sign-h) - 190px); min-height: 360px; width: auto; max-width: 100%; }
  .intro-games .btn { justify-self: start; padding: 12px 18px; }

  .game {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 24px;
    padding: 48px var(--gutter);
  }
  .game-media { grid-column: 1 / span 6; grid-template-columns: 1fr 0.78fr; gap: 24px; align-items: end; }
  .clip { height: min(68svh, 620px); width: auto; justify-self: end; }
  .shot { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; max-height: min(52svh, 480px); width: auto; }
  .game-text { display: grid; grid-column: 7 / -1; gap: 22px; align-content: center; }
  .game-text > p { max-width: 40rem; }
  .game h2 { font-size: clamp(3rem, 1rem + 3.6vw, 5.5rem); }
  .game-head { order: 0; }
  .icon { width: 72px; height: 72px; }
  .actions { grid-auto-flow: column; justify-content: start; align-items: center; gap: 28px; }
  .game .btn { width: auto; }

  .foot { grid-template-columns: 1fr auto 1fr; align-items: baseline; padding-bottom: 30px; }
  .foot > :last-child { justify-self: end; }
}

/* ---------- Motion ---------- */
.btn, .tile img, .more { transition: transform 160ms var(--ease-out), background-color 160ms, color 160ms; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px) scale(0.98); }
.game .btn:hover { background: var(--tw-ink); }
.game-bx .btn:hover { background: var(--bx-hi); }
.intro-games .btn:hover { background: var(--accent); color: #fff; }
.tile:hover img { transform: scale(1.02); }
.more:hover { color: var(--hi); }

@media (prefers-reduced-motion: no-preference) {
  .arrow { animation: nudge 1.8s var(--ease-out) 1.2s infinite; }
  @keyframes nudge { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(0.12em); } }

  .sign-title span { animation: rise 640ms var(--ease-out) both; }
  .sign-title span + span { animation-delay: 80ms; }
  .intro-lead { animation: rise 640ms var(--ease-out) 160ms both; }
  .hello { animation: rise 640ms var(--ease-out) 230ms both; }
  .intro-games li { animation: rise 720ms var(--ease-out) 300ms both; }
  .intro-games li + li { animation-delay: 380ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(24px); } }

  /* Each game card's parts rise in turn as the card enters (the inline script adds .in). */
  .js .game :is(.game-head, .clip, .shot, .pitch, .game-text > p, .actions) {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 560ms var(--ease-out), transform 640ms var(--ease-out);
  }
  .js .game.in :is(.game-head, .clip, .shot, .pitch, .game-text > p, .actions) { opacity: 1; transform: none; }
  .js .game.in .clip { transition-delay: 70ms; }
  .js .game.in .shot { transition-delay: 150ms; }
  .js .game.in .pitch { transition-delay: 140ms; }
  .js .game.in .game-text > p:not(.pitch) { transition-delay: 210ms; }
  .js .game.in .actions { transition-delay: 280ms; }
}

/* 404 */
.lost-main { min-height: 100svh; padding: 24px var(--gutter); display: grid; align-content: center; gap: 28px; }