/* ==========================================================================
   Alex / — design system v1, built from the Garden Plot direction.
   One stylesheet. Section 01 is the token set; everything below reads from it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01 FOUNDATIONS — tokens
   -------------------------------------------------------------------------- */

:root {
  /* Colour ---------------------------------------------------------------- */
  --ground-a: #FFF9EE;          /* ground, top of the page gradient          */
  --ground-b: #F7EBD4;          /* ground, bottom                            */
  --surface-a: #FFFFFF;         /* card surface, top                         */
  --surface-b: #FFF7EA;         /* card surface, bottom                      */
  --control-a: #FFFFFF;         /* control surface, top                      */
  --control-b: #F5EAD6;         /* control surface, bottom                   */
  --control-hi: #FFFDF8;        /* control surface, hover and active         */
  --border: #E4D3B6;
  --rule: #E7D9BE;              /* hairline rules inside light blocks        */
  --ink: #2E2216;
  --meta: #7A6349;
  --green: #2F7A4F;
  --terracotta: #D6613C;
  --terracotta-lift: #E8734D;   /* top stop of the primary button gradient   */
  --gold: #A96C10;              /* gold on cream — 4.4:1                     */
  --gold-on-dark: #E8A317;      /* gold on green or near-black. Never swap.   */
  --meta-on-dark: #DFF0E6;
  --solo-a: #2C7049;            /* solo panel, top                           */
  --solo-b: #24603C;            /* solo panel, bottom                        */
  --chip: #F1E7D2;              /* selected menu row, language button hover  */
  --chip-hover: #F7EFDF;
  --disabled-face: #F3EADA;
  --disabled-border: #EADCC4;
  --disabled-ink: #B0A08C;
  --disabled-primary-face: #E8CFC2;
  --disabled-primary-ink: #A98D7E;
  --viewer-panel: rgba(20, 14, 8, 0.94);
  --viewer-scrim: rgba(20, 14, 8, 0.62);

  /* Shape and depth ------------------------------------------------------- */
  --r-card: 18px;
  --r-control: 999px;
  --r-thumb: 6px;
  --r-menu: 14px;
  --r-solo-icon: 26px;
  --r-mark: 17px;

  /* Shadows are always tinted to the surface they fall on. No black shadows. */
  --sh-rest: 0 6px 14px rgba(46, 34, 22, 0.08);
  --sh-hover: 0 12px 24px rgba(46, 34, 22, 0.13);
  --sh-control: 0 2px 6px rgba(46, 34, 22, 0.10);
  --sh-control-hover: 0 5px 12px rgba(46, 34, 22, 0.16);
  --sh-control-active: 0 1px 3px rgba(46, 34, 22, 0.14);
  --sh-pill-hover: 0 8px 18px rgba(46, 34, 22, 0.15);
  --sh-icon: 0 4px 10px rgba(46, 34, 22, 0.20);
  --sh-thumb-hover: 0 8px 16px rgba(46, 34, 22, 0.22);
  --sh-menu: 0 12px 28px rgba(46, 34, 22, 0.18);
  --sh-green: 0 4px 10px rgba(20, 48, 32, 0.16);
  --sh-green-hover: 0 14px 28px rgba(20, 48, 32, 0.30);
  --sh-on-green: 0 3px 8px rgba(0, 0, 0, 0.22);
  --sh-on-green-hover: 0 10px 20px rgba(0, 0, 0, 0.32);
  --sh-solo-icon: 0 6px 16px rgba(0, 0, 0, 0.32);
  --sh-primary: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 4px 10px rgba(214, 97, 60, 0.32);
  --sh-primary-hover: 0 1px 0 rgba(255, 255, 255, 0.45) inset, 0 8px 18px rgba(214, 97, 60, 0.42);
  --sh-primary-active: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 2px 5px rgba(214, 97, 60, 0.36);

  /* Spacing --------------------------------------------------------------- */
  --s-4: 4px;                   /* icon to label                             */
  --s-8: 8px;                   /* inside a button                           */
  --s-12: 12px;                 /* between cards                             */
  --s-16: 16px;                 /* card padding, inset                       */
  --s-22: 22px;                 /* between blocks                            */
  --s-32: 32px;                 /* page gutter                               */
  --s-44: 44px;                 /* above a section head                      */

  /* Motion ---------------------------------------------------------------- */
  --ease: cubic-bezier(.23, 1, .32, 1);    /* everything functional          */
  --back: cubic-bezier(.34, 1.56, .64, 1); /* the two playful moments only   */
  --t-press: 140ms;
  --t-pop: 180ms;
  --t-lift: 220ms;
  --t-row: 420ms;

  /* Type ------------------------------------------------------------------ */
  --display: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout ---------------------------------------------------------------- */
  --page: 900px;                /* the design system page width              */
  --header-h: 80px;             /* what section heads clear when jumped to   */
}

/* --------------------------------------------------------------------------
   Reset and base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground-b);
  background-image: linear-gradient(180deg, var(--ground-a) 0%, var(--ground-b) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

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

button {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* One focus ring for the whole site. */
:focus-visible {
  outline: 2.5px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--s-16);
  top: -100px;
  z-index: 100;
  padding: 11px 18px;
  border-radius: var(--r-control);
  background: var(--control-hi);
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-control);
  font-weight: 700;
  font-size: 15px;
  transition: top var(--t-pop) var(--ease);
}

.skip-link:focus { top: var(--s-16); }

/* --------------------------------------------------------------------------
   Type scale
   Display is Baloo 2 800 at -0.01em. Body is Nunito Sans, 400 for prose and
   700 for anything that must be scanned. Never Baloo 2 below 21px, never body
   above 17px.
   -------------------------------------------------------------------------- */

.display-xl,
.display-l,
.display-m,
.title {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.display-xl { font-size: clamp(30px, 6.2vw, 44px); line-height: 1.02; }
.display-l  { font-size: clamp(26px, 4.6vw, 32px); line-height: 1.02; }
.display-m  { font-size: clamp(23px, 4vw, 28px);   line-height: 1.05; }
.title      { font-size: 21px;                     line-height: 1.1;  }

.body-l { font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.body-s { font-size: 14px; line-height: 1.5; }

.meta {
  font-size: 13px;
  line-height: 1.5;
  color: var(--meta);
}

.meta-s {
  font-size: 12px;
  line-height: 1.5;
  color: var(--meta);
}

.label {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta);
}

/* The slash recolours per section: green in the wordmark, terracotta on
   games, gold on solo, green on contact. */
.slash { color: var(--green); }
.slash--games { color: var(--terracotta); }
.slash--solo { color: var(--gold); }
.slash--contact { color: var(--green); }

/* Unconfirmed detail. Every one of these is a fact still owed — fill it in
   and delete the element. Listed in CLAUDE.md. */
.check {
  display: inline-block;
  vertical-align: baseline;
  background: var(--gold-on-dark);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.6;
  padding: 1px 4px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   02 COMPONENTS — buttons
   -------------------------------------------------------------------------- */

/* Primary — one per view. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: var(--r-control);
  background: linear-gradient(180deg, var(--terracotta-lift) 0%, var(--terracotta) 100%);
  color: #FFF6E8;
  box-shadow: var(--sh-primary);
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition:
    transform var(--t-press) var(--ease),
    box-shadow var(--t-press) var(--ease);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-primary-hover);
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: var(--sh-primary-active);
}

.btn-primary[aria-disabled="true"],
.btn-primary:disabled {
  background: var(--disabled-primary-face);
  color: var(--disabled-primary-ink);
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* Secondary — stores, contact, everything else. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  padding: 11px 18px;
  border-radius: var(--r-control);
  background: linear-gradient(180deg, var(--control-a), var(--control-b));
  color: var(--ink);
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-control);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  cursor: pointer;
  transition:
    transform var(--t-press) var(--ease),
    box-shadow var(--t-press) var(--ease),
    background-color 160ms ease;
}

.btn:hover {
  background: var(--control-hi);
  transform: translateY(-1px);
  box-shadow: var(--sh-control-hover);
}

.btn:active {
  transform: scale(0.97);
  box-shadow: var(--sh-control-active);
}

.btn[aria-disabled="true"],
.btn:disabled {
  background: var(--disabled-face);
  border-color: var(--disabled-border);
  color: var(--disabled-ink);
  box-shadow: none;
  transform: none;
  cursor: default;
}

/* The contact channels sit a size up and lift further. */
.btn--contact {
  gap: 10px;
  padding: 12px 20px;
  font-size: 16px;
  white-space: nowrap;
}

.btn--contact:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-pill-hover);
}

/* Small pill, used inside a game row. */
.btn--small {
  gap: 7px;
  padding: 7px 12px;
  font-size: 13px;
  white-space: nowrap;
}

/* Brand glyphs (Apple, Google Play, Telegram, Discord) — solid, inherit ink. */
.brand-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: currentColor;
}

.brand-icon--lg { width: 17px; height: 17px; }

/* Icon button — 48px, never smaller. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: var(--r-control);
  background: linear-gradient(180deg, var(--control-a), var(--control-b));
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-control);
  cursor: pointer;
  transition:
    transform var(--t-press) var(--ease),
    box-shadow var(--t-press) var(--ease),
    background-color 160ms ease;
}

.btn-icon:hover {
  background: var(--control-hi);
  transform: translateY(-2px);
  box-shadow: var(--sh-pill-hover);
}

.btn-icon:active {
  transform: scale(0.97);
  box-shadow: var(--sh-control-active);
}

/* --------------------------------------------------------------------------
   02 COMPONENTS — header and navigation
   -------------------------------------------------------------------------- */

.page {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--s-32);
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-image: linear-gradient(180deg, var(--ground-a) 0%, var(--ground-a) 100%);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  max-width: var(--page);
  margin: 0 auto;
  padding: 22px var(--s-32);
}

/* The wordmark returns you to the top. Only its slash reacts on hover. */
.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wordmark .slash {
  display: inline-block;
  transition:
    transform 300ms var(--back),
    color var(--t-pop) ease;
}

.wordmark:hover .slash,
.wordmark:focus-visible .slash {
  transform: rotate(-14deg) scale(1.12);
  color: var(--terracotta);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

/* The three nav items are the three section heads. The pill marks the section
   you are currently in and follows the scroll; hover is ink, rest is meta. */
.nav {
  display: flex;
  gap: 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
}

.nav__link {
  padding: 7px 15px;
  border-radius: var(--r-control);
  color: var(--meta);
  line-height: 1.2;
  transition: color 160ms ease;
}

.nav__link:hover { color: var(--ink); }

.nav__link.is-current {
  background: linear-gradient(180deg, var(--terracotta-lift) 0%, var(--terracotta) 100%);
  color: #FFF6E8;
  box-shadow: var(--sh-primary);
}

/* Language — the button and the nav pills are both 36px. */
.lang { position: relative; }

.lang__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-control);
  cursor: pointer;
  transition: background-color 160ms ease;
}

.lang__button:hover,
.lang__button[aria-expanded="true"] { background: var(--chip); }

.lang__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  width: 180px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: var(--r-menu);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-menu);
  transform-origin: top right;
  transition:
    transform var(--t-pop) var(--ease),
    opacity var(--t-pop) var(--ease);
}

/* Popovers scale from their trigger. Nothing animates from scale(0). */
.lang__menu[hidden] {
  display: flex;
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  visibility: hidden;
}

.lang__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-8);
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease;
}

.lang__item:hover { background: var(--chip-hover); }

.lang__item[aria-current="true"] {
  background: var(--chip);
  font-weight: 700;
}

.lang__item[aria-disabled="true"] {
  color: var(--disabled-ink);
  cursor: default;
}

.lang__item[aria-disabled="true"]:hover { background: none; }

/* --------------------------------------------------------------------------
   02 COMPONENTS — section heads
   Every section head is the wordmark plus the section name, with the slash
   recoloured to that section. 44 above, 14 below.
   -------------------------------------------------------------------------- */

.section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-12);
  margin-top: var(--s-44);
  margin-bottom: 14px;
  scroll-margin-top: var(--header-h);
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

.main { padding-bottom: 34px; }

.hero {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  padding-top: 10px;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  flex: 0 0 190px;
}

.hero__photo {
  width: 190px;
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--sh-rest);
}

/* Ten years, five titles, one made alone — as figures, early enough to scan. */
.figures {
  width: 190px;
  padding: 0 var(--s-16);
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  font-size: 13px;
  color: var(--meta);
}

.figures__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-8);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
}

.figures__row:last-child { border-bottom: 0; padding-bottom: 0; }

.figures__row dt { margin: 0; }

.figures__row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.hero__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.hero__role {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--green);
}

/* An availability line, next to the one primary action on the page. */
.hero__cta {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-top: var(--s-4);
}

.hero__availability {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  max-width: 26ch;
}

.hero__download {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.hero__stamp {
  font-size: 12px;
  color: var(--meta);
  text-align: center;
}

/* --------------------------------------------------------------------------
   02 COMPONENTS — game row
   Team credits. Studio, years, platform and the one thing he owned.
   -------------------------------------------------------------------------- */

.games {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.game-row {
  display: grid;
  grid-template-columns: 6px 84px minmax(0, 1fr) auto 132px;
  grid-template-areas: "rail icon body shots aside";
  align-items: center;
  gap: var(--s-16);
  padding: 14px;
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-rest);
  transition:
    transform var(--t-lift) var(--ease),
    box-shadow var(--t-lift) var(--ease);
}

.game-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-hover);
}

/* The rail marks the kind of credit: green is a game he designed, terracotta
   is marketing work. */
.game-row__rail {
  grid-area: rail;
  align-self: stretch;
  width: 6px;
  border-radius: 3px;
  background: var(--green);
}

.game-row__rail--ads { background: var(--terracotta); }

.game-row__icon-btn {
  grid-area: icon;
  display: block;
  width: 84px;
  height: 84px;
  border-radius: var(--r-card);
  cursor: pointer;
}

.game-row__icon {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--sh-icon);
  transition: transform 260ms var(--back);
}

.game-row__icon-btn:hover .game-row__icon,
.game-row__icon-btn:focus-visible .game-row__icon {
  transform: scale(1.06) rotate(-2.5deg);
}

.game-row__body {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.game-row__shots { grid-area: shots; }

/* Store status, or a delisting stated in words. Plain inline flow, so the
   CHECK marker sits on the same line as the words it qualifies. */
.game-row__aside {
  grid-area: aside;
  width: 132px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--meta);
}

/* The ads variant stacks a real link above its marker instead. */
.game-row__aside--stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/* --------------------------------------------------------------------------
   02 COMPONENTS — screenshot thumbnails
   One crop and frame rule for every piece of art: 9:16, 6px corner, hairline.
   -------------------------------------------------------------------------- */

.shots {
  display: flex;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.shots--solo { gap: 5px; flex-wrap: wrap; }

/* A team credit shows three screenshots inline; the viewer still opens the
   full set of five, because the rest stay in the DOM. The solo card is the
   hero card and shows as many as fit. */
.game-row__shots li:nth-child(n + 4) { display: none; }

.thumb {
  display: block;
  width: 34px;
  border-radius: var(--r-thumb);
  cursor: pointer;
  transition:
    transform var(--t-pop) var(--ease),
    box-shadow var(--t-pop) var(--ease);
}

.thumb img {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  border-radius: var(--r-thumb);
  border: 1px solid #E0D2B7;
}

.thumb:hover,
.thumb:focus-visible {
  transform: translateY(-3px) scale(1.06);
  box-shadow: var(--sh-thumb-hover);
}

/* On the green panel the screenshots go pale mint so they read against it. */
.thumb--solo { width: 44px; }

.thumb--solo img {
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: var(--sh-on-green);
}

.thumb--solo:hover,
.thumb--solo:focus-visible { box-shadow: var(--sh-on-green-hover); }

/* --------------------------------------------------------------------------
   02 COMPONENTS — solo card
   The solo game gets its own treatment and more room. Same lift and shadow as
   a game row, tinted for the green panel.
   -------------------------------------------------------------------------- */

.solo {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 150px;
  grid-template-areas: "icon body aside";
  align-items: flex-start;
  gap: var(--s-22);
  padding: 26px;
  border-radius: var(--r-card);
  color: #FBF3E2;
  background-color: var(--solo-b);
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.06) 0 8px, transparent 8px 16px),
    linear-gradient(170deg, var(--solo-a) 0%, var(--solo-b) 100%);
  box-shadow: var(--sh-green);
  transition:
    transform var(--t-lift) var(--ease),
    box-shadow var(--t-lift) var(--ease);
}

.solo:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-green-hover);
}

.solo__icon-btn {
  grid-area: icon;
  display: block;
  width: 120px;
  height: 120px;
  border-radius: var(--r-solo-icon);
  cursor: pointer;
}

.solo__icon {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: var(--r-solo-icon);
  box-shadow: var(--sh-solo-icon);
  transition: transform 260ms var(--back);
}

.solo__icon-btn:hover .solo__icon,
.solo__icon-btn:focus-visible .solo__icon {
  transform: scale(1.06) rotate(-2.5deg);
}

.solo__body {
  grid-area: body;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.solo__meta { font-size: 12px; color: var(--meta-on-dark); }

.solo__text {
  font-size: 15px;
  line-height: 1.5;
  max-width: 46ch;
}

.solo__aside {
  grid-area: aside;
  width: 150px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--meta-on-dark);
}

/* On the green panel the focus ring flips to the cream side of the palette. */
.solo :focus-visible {
  outline-color: #FBF3E2;
}

/* --------------------------------------------------------------------------
   02 COMPONENTS — contact row and footer
   Text pills and icon buttons are both 48px so the row has one baseline.
   -------------------------------------------------------------------------- */

.contact {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.contact__place {
  font-size: 14px;
  color: var(--meta);
  padding-left: var(--s-4);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-12);
  padding-top: var(--s-22);
  margin-top: var(--s-22);
  border-top: 1px solid var(--rule);
  font-size: 12px;
  color: var(--meta);
}

.site-footer__links {
  display: flex;
  gap: var(--s-16);
}

.site-footer__links a { transition: color 160ms ease; }

.site-footer__links a:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   02 COMPONENTS — screenshot viewer
   Opens on any screenshot, anywhere on the page. Escape closes, arrow keys
   page through.
   -------------------------------------------------------------------------- */

.viewer {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  padding: 20px;
  border: 0;
  border-radius: var(--r-menu);
  background: var(--viewer-panel);
  color: #FFF6E8;
  overflow: visible;
}

.viewer::backdrop { background: var(--viewer-scrim); }

.viewer[open] { animation: viewerIn var(--t-lift) var(--ease); }

.viewer[open]::backdrop { animation: viewerFade 200ms var(--ease); }

.viewer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.viewer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.viewer__heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.viewer__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.viewer__count {
  font-size: 12px;
  color: #CDBBA0;
  white-space: nowrap;
}

.viewer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--r-control);
  border: 1.5px solid rgba(255, 246, 232, 0.4);
  cursor: pointer;
  transition:
    transform var(--t-press) var(--ease),
    background-color 160ms ease;
}

.viewer__close:hover { background: rgba(255, 246, 232, 0.14); }
.viewer__close:active { transform: scale(0.97); }

.viewer__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.viewer__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: var(--r-control);
  background: rgba(255, 246, 232, 0.12);
  border: 1.5px solid rgba(255, 246, 232, 0.3);
  cursor: pointer;
  transition:
    transform var(--t-press) var(--ease),
    background-color 160ms ease,
    border-color 160ms ease;
}

.viewer__arrow:hover {
  background: rgba(255, 246, 232, 0.24);
  border-color: rgba(255, 246, 232, 0.6);
}

.viewer__arrow:active { transform: scale(0.97); }

.viewer__figure {
  margin: 0;
  min-width: 0;
  flex: 0 1 auto;
}

.viewer__img {
  width: auto;
  height: min(58vh, 480px);
  max-width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255, 246, 232, 0.22);
}

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

/* Idle, current and hover. Hover previews the current state, so the
   affordance explains itself. */
.viewer__thumb {
  display: block;
  width: 30px;
  border-radius: 5px;
  opacity: 0.62;
  cursor: pointer;
  transition:
    transform var(--t-pop) var(--ease),
    opacity var(--t-pop) var(--ease);
}

.viewer__thumb img {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
  border: 1px solid rgba(255, 246, 232, 0.2);
}

.viewer__thumb:hover,
.viewer__thumb:focus-visible {
  opacity: 1;
  transform: translateY(-3px);
}

.viewer__thumb:hover img,
.viewer__thumb:focus-visible img { border-color: rgba(255, 246, 232, 0.5); }

.viewer__thumb[aria-current="true"] {
  opacity: 1;
  transform: none;
}

.viewer__thumb[aria-current="true"] img { border: 2px solid var(--gold-on-dark); }

.viewer :focus-visible { outline-color: #FFF6E8; }

/* --------------------------------------------------------------------------
   Motion — keyframes
   Modals scale from centre. Nothing animates from scale(0).
   -------------------------------------------------------------------------- */

@keyframes viewerIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes viewerFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Rows enter staggered 60ms apart, once, when they arrive. Gated on the `js`
   class so the rows are simply visible if scripting is off or main.js fails
   to load — the content never depends on the animation running. */
.js .js-reveal { opacity: 0; }

.js .js-reveal.is-in {
  animation: rowIn var(--t-row) var(--ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --s-32: 22px; --s-44: 36px; }
}

@media (max-width: 780px) {
  .hero {
    flex-direction: column;
    gap: var(--s-22);
  }

  .hero__aside {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-22);
    width: 100%;
  }

  .hero__photo { width: 150px; flex: 0 0 150px; }

  .figures {
    width: auto;
    flex: 1 1 auto;
    max-width: 320px;
    padding: 0;
  }

  /* Team credit: icon and text lead, art and store status fall underneath. */
  .game-row {
    grid-template-columns: 6px 84px minmax(0, 1fr);
    grid-template-areas:
      "rail icon body"
      "rail shots shots"
      "rail aside aside";
    align-items: start;
    row-gap: 14px;
  }

  .game-row__aside { width: auto; }

  /* Store buttons sit side by side once the row has the full width. */
  .game-row__aside--stack { flex-direction: row; flex-wrap: wrap; }

  .thumb { width: 44px; }

  .solo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "icon"
      "body"
      "aside";
    row-gap: var(--s-16);
  }

  .solo__aside { width: auto; }
}

@media (max-width: 560px) {
  .site-header__inner { padding: 16px var(--s-32); }

  .wordmark { font-size: 26px; }

  .nav { gap: var(--s-4); font-size: 13px; }

  .nav__link { padding: 7px 11px; }

  .hero__aside { flex-direction: column; }

  .hero__photo { width: 150px; }

  .figures { max-width: none; }

  .hero__cta { gap: var(--s-12); }

  .hero__availability { max-width: none; }

  .hero__download { align-items: flex-start; }

  .hero__stamp { text-align: left; }

  .game-row__icon-btn,
  .game-row__icon { width: 72px; height: 72px; }

  .game-row {
    grid-template-columns: 6px 72px minmax(0, 1fr);
    gap: var(--s-12);
  }

  .solo { padding: 20px; }

  .solo__icon-btn,
  .solo__icon { width: 96px; height: 96px; }

  .contact { gap: var(--s-8); }

  .btn--contact { font-size: 15px; padding: 12px 16px; }

  .site-footer { justify-content: flex-start; }

  .viewer { padding: 16px; }

  .viewer__stage { gap: var(--s-8); }
}

@media (max-width: 380px) {
  .wordmark { font-size: 23px; }
  .nav__link { padding: 7px 9px; }
  .btn--contact { white-space: normal; }
}

/* --------------------------------------------------------------------------
   Everything collapses under prefers-reduced-motion.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .js .js-reveal { opacity: 1; }
}

/* --------------------------------------------------------------------------
   03 PAGES — privacy and terms
   Branded now: same ground, same faces, same rules as the rest of the site.
   They carry the site header and footer like any other page.
   -------------------------------------------------------------------------- */

.doc {
  max-width: 78ch;
  padding-top: var(--s-22);
}

.doc__updated {
  font-size: 13px;
  color: var(--meta);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-16);
  margin-bottom: var(--s-22);
}

.doc h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-top: var(--s-32);
  margin-bottom: 10px;
}

.doc h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: var(--s-22);
  margin-bottom: var(--s-8);
}

.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.doc p { margin-bottom: 14px; }

.doc ul {
  margin: 0 0 14px;
  padding-left: var(--s-22);
}

.doc li { margin-bottom: 6px; }

.doc a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--terracotta);
  text-underline-offset: 2px;
  transition: color 160ms ease;
}

.doc a:hover { color: var(--terracotta); }

.doc__lead {
  font-size: 17px;
  line-height: 1.6;
}

/* Unresolved detail — same device as the rest of the site. */
.doc__check {
  display: inline-block;
  background: var(--gold-on-dark);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
}

/* Standing note at the foot of each document. */
.doc__note {
  background: linear-gradient(180deg, var(--surface-a) 0%, var(--surface-b) 100%);
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-rest);
  border-radius: var(--r-card);
  padding: 18px 20px;
  font-size: 14px;
  line-height: 1.6;
  margin-top: var(--s-32);
}

.doc__note p:last-child { margin-bottom: 0; }