/* ==========================================================================
   ByteOnyx — home page styles
   Led by type on one warm ivory ground with one gold, the same family as
   the game pages. Projects sit on white cards, screenshots are the real
   ones shown straight, and the only flourish is a faint gold wash behind
   the hero. No glass, no mock-up phone, no web fonts from a CDN
   (self-hosted below), no JS framework, no trackers.
   ========================================================================== */

/* Both files are variable fonts, so one face each covers every weight the
   page asks for and the browser never has to fake a bold. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/space-grotesk-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;

  --bg:       #f4ecd9;
  --raise:    #fdf8ec;

  --text:     #211f1a;
  --text-2:   #534d3f;   /* 7.5 : 1 on --bg */
  --text-3:   #6e6650;   /* 5 : 1 on --bg — small print, still AA */

  /* Gold is a fill, never small text: on this ground it is too pale to
     read. Links and other small gold text use the deep gold instead. */
  --gold:      #e6bb55;
  --gold-hi:   #f0cc78;
  --gold-deep: #826217;  /* 5 : 1 on --bg */
  --on-gold:   #1a1305;

  --line:        rgba(63, 54, 30, .16);
  --line-strong: rgba(63, 54, 30, .32);

  --pad:  clamp(20px, 5vw, 48px);
  --maxw: 1080px;

  /* One card language for the whole page: projects, profile, policies. */
  --card-pad: clamp(18px, 3vw, 30px);
  --radius:   20px;

  --gap: 56px;

  --sans:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

/* A link looks like a link: underlined, everywhere it sits in a sentence. */
a {
  color: var(--gold-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(138, 106, 29, .45);
  transition: text-decoration-color .15s ease, color .15s ease;
}
a:hover { text-decoration-color: currentColor; }

b, strong { font-weight: 600; color: var(--text); }

::selection { background: var(--gold); color: var(--on-gold); }

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 16px; top: 16px;
  z-index: 100;
  background: var(--gold);
  color: var(--on-gold);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------- type --- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 9.5vw, 6rem);
  line-height: .98;
  letter-spacing: -.045em;
}
h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
h3 {
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -.02em;
}

p { margin: 0 0 1em; }

.lead {
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 52ch;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- header --- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 8px 24px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--text);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.brand img.wordmark { width: auto; height: 18px; border-radius: 0; position: relative; top: 2px; }

.nav {
  display: flex;
  gap: 4px;
  margin-left: auto;
  margin-right: -12px;
  font-size: .95rem;
}
.nav a {
  color: var(--text-2);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 999px;
}
.nav a:hover { color: var(--text); background: rgba(63, 54, 30, .07); }

/* On a phone the four links will not fit beside the logo, so they take a
   row of their own — and the header stops sticking, because two rows of
   it would cover a fifth of the screen. */
@media (max-width: 620px) {
  .site-head { position: static; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-head .wrap { flex-wrap: wrap; padding-top: 14px; padding-bottom: 6px; }
  .nav { width: calc(100% + 24px); margin: 0 -12px; flex-wrap: wrap; justify-content: flex-start; }
  html { scroll-padding-top: 16px; }
}

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: 600;
  font-size: .97rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}

.btn-primary {
  background: var(--gold);
  color: var(--on-gold);
  box-shadow: inset 0 0 0 1px rgba(63, 54, 30, .18);
}
.btn-primary:hover { background: var(--gold-hi); }

.btn-quiet { border-color: var(--line-strong); color: var(--text); }
.btn-quiet:hover { border-color: var(--text-3); background: rgba(63, 54, 30, .05); }

.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------------- hero --- */

.hero {
  padding: clamp(60px, 10vw, 128px) 0 clamp(40px, 6vw, 72px);
}

.hero .lead { margin: clamp(22px, 3vw, 34px) 0 0; }
.hero .actions { margin-top: clamp(24px, 3vw, 34px); }

/* The proof line: the three app icons, the count, and the three promises. */
.hero-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: clamp(40px, 6vw, 68px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-apps { display: flex; flex: 0 0 auto; }
.hero-apps img {
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 2px solid var(--bg);
  background: var(--raise);
  box-shadow: 0 1px 4px rgba(63, 54, 30, .18);
}
.hero-apps img + img { margin-left: -12px; }
.hero-count { margin: 0; color: var(--text-2); font-size: .95rem; }

.promises {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px .55em;
  margin: 0 0 0 auto;
  padding: 0;
  color: var(--text-2);
  font-size: .92rem;
}
.promises li { white-space: nowrap; }
.promises li:not(:last-child)::after { content: "·"; margin-left: .55em; }
@media (max-width: 620px) {
  .promises { margin-left: 0; }
}

/* ------------------------------------------------------------ sections --- */

.section {
  border-top: 1px solid var(--line);
  padding: clamp(52px, 8vw, 100px) 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 28px;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.section-head .lead { margin: 0; font-size: 1.05rem; }

.prose { max-width: 62ch; color: var(--text-2); }
.prose > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ projects --- */
/* One project, one card: name and status on top, one line of what it is,
   the real screens across the middle, the buttons at the bottom. */

.project {
  margin-top: clamp(20px, 3vw, 28px);
  padding: var(--card-pad);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(63, 54, 30, .05), 0 8px 28px rgba(63, 54, 30, .06);
}
.project:first-of-type { margin-top: 0; }

.project-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}
.project-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  flex: 0 0 auto;
  box-shadow: 0 1px 4px rgba(63, 54, 30, .18);
}
.project-name { min-width: 0; flex: 1 1 14em; }
.project-name h3 a { color: var(--text); text-decoration: none; }
.project-name h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.project-meta { margin: 2px 0 0; font-size: .9rem; color: var(--text-3); }

/* Live or not is the first thing anyone wants to know, so it is said in
   words, not a colour alone. */
.status {
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-3);
  white-space: nowrap;
}
.status.is-live { color: var(--gold-deep); }

.project-line {
  margin: 14px 0 0;
  color: var(--text-2);
  max-width: 60ch;
}

/* The store's own feature art, where a project has no store button yet —
   the picture does the talking until the listing can. */
.project-banner {
  display: block;
  margin-top: 16px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .15s ease;
}
.project-banner:hover { box-shadow: 0 0 0 1px var(--line-strong); }
.project-banner img { width: 100%; aspect-ratio: 1024 / 500; object-fit: cover; }

.project-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 6px;
}
.link-privacy { margin-left: auto; font-size: .95rem; }
@media (max-width: 620px) {
  .link-privacy { margin-left: 0; }
}

.after-projects {
  margin: clamp(24px, 4vw, 36px) 0 0;
  color: var(--text-3);
  font-size: .95rem;
  text-align: center;
}

/* -------------------------------------------------------- screenshots --- */
/* The screens are the real ones, shown flat and in a row. No phone is drawn
   round them: a drawn phone is decoration, and it makes the picture smaller. */

.rail { min-width: 0; margin-top: 16px; }

.shots {
  list-style: none;
  display: flex;
  gap: 12px;
  /* 4px all round so a focus ring is not cut off by the scroller's edge. */
  margin: -4px -4px 0;
  padding: 4px 4px 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
  -webkit-overflow-scrolling: touch;
}
.shots li {
  flex: 0 0 auto;
  width: min(56vw, 200px);
  scroll-snap-align: start;
}

.shot {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: var(--raise);
  box-shadow: 0 0 0 1px var(--line);
  cursor: zoom-in;
  transition: box-shadow .15s ease, transform .18s ease;
}
.shot:hover {
  box-shadow: 0 0 0 1px var(--line-strong), 0 10px 26px rgba(63, 54, 30, .18);
  transform: translateY(-3px);
}
.shot:focus-visible { outline-offset: 2px; border-radius: 12px; }
.shot img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }

/* The arrows for a mouse with no trackpad; site.js shows them only when
   the row can scroll. */
.rail-foot { display: flex; justify-content: flex-end; }
.rail-foot:has(.rail-nav[hidden]) { display: none; }

.rail-nav { display: flex; gap: 8px; }
.rail-nav[hidden] { display: none; }
.rail-nav button {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--text);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.rail-nav button:hover { border-color: var(--text-3); background: rgba(63, 54, 30, .05); }
.rail-nav button[aria-disabled="true"] {
  color: var(--text-3);
  border-color: var(--line);
  background: none;
  cursor: default;
}
.rail-nav svg, .viewer svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- viewer --- */
/* One screenshot, large. A native <dialog>, so Esc, the focus trap and the
   return of focus are the browser's, not ours. Built by site.js on first
   use; with no JS the link just opens the picture. Its own dark ground
   whatever the page's palette: a lightbox is a cinema, not a page. */

html:has(.viewer[open]) { overflow: hidden; }

.viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #0c0c0e;
  color: #ededf0;
}
.viewer::backdrop { background: #0c0c0e; }
.viewer[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px var(--pad);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.viewer-title { margin: 0; font-size: .95rem; color: #b6b6c0; }
/* The page's <b> is ink-dark now; in here the ground is dark, so say it. */
.viewer-title b { font-family: var(--display); font-weight: 600; color: #ededf0; }

.viewer button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 8px;
  background: none;
  color: #ededf0;
  font: 600 .95rem/1 var(--sans);
  cursor: pointer;
}
.viewer button:hover { border-color: #b6b6c0; background: rgba(255, 255, 255, .06); }
.viewer-arrow { padding: 0 !important; }

.viewer-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px var(--pad);
  min-height: 0;
}
.viewer-stage img {
  margin: auto;
  width: auto;
  height: auto;
  /* Never larger than the file: 540 px of picture stretched is a blur. */
  max-width: min(100%, 540px);
  max-height: calc(100vh - 190px);
  max-height: calc(100dvh - 190px);
  border-radius: 10px;
}

.viewer-cap {
  margin: 0 auto;
  padding: 0 var(--pad) 22px;
  max-width: 64ch;
  min-height: 3.2em;
  text-align: center;
  color: #b6b6c0;
  font-size: .95rem;
  line-height: 1.5;
}

/* On a phone the arrows move under the picture, where a thumb is. */
@media (max-width: 620px) {
  .viewer-stage { grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px var(--pad); }
  .viewer-stage img { grid-column: 1 / -1; grid-row: 1; max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); }
  .viewer-arrow { grid-row: 2; width: 100%; }
}

/* --------------------------------------------------------------- about --- */
/* A profile card with the identity, and the story beside it. */

.profile { display: grid; gap: 24px var(--gap); align-items: start; }
@media (min-width: 900px) {
  .profile { grid-template-columns: 340px minmax(0, 1fr); }
}

.profile-card {
  padding: var(--card-pad);
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(63, 54, 30, .05), 0 8px 28px rgba(63, 54, 30, .06);
}
.profile-mark { width: 56px; height: 56px; border-radius: 13px; }
.profile-studio {
  margin: 16px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: -.02em;
}
.profile-tag { margin: 4px 0 0; color: var(--text-2); }

.chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px .55em;
  margin: 18px 0 0;
  padding: 0;
  color: var(--text-2);
  font-size: .92rem;
}
.chips li { white-space: nowrap; }
.chips li:not(:last-child)::after { content: "·"; margin-left: .55em; }

.profile-facts {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: .95rem;
}
.profile-facts p { margin: 0 0 6px; }
.profile-link { display: inline-block; margin-top: 12px; font-size: .95rem; }

/* ------------------------------------------------------------- privacy --- */
/* The list a store reviewer comes here for: one app, one line, its links. */

.policies {
  list-style: none;
  margin: clamp(20px, 3vw, 28px) 0;
  padding: 0 var(--card-pad);
  max-width: 680px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(63, 54, 30, .05), 0 8px 28px rgba(63, 54, 30, .06);
}
.policies li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.policies li:last-child { border-bottom: 0; }
.policies img { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }
.policy-app {
  flex: 1 1 12em;
  min-width: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
}
.policy-links { display: flex; gap: 20px; }
@media (max-width: 620px) {
  .policy-links { width: 100%; padding-left: 52px; }
}

/* ------------------------------------------------------------- contact --- */

.contact-mail {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.35rem, 4.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.contact-mail a { color: var(--text); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.contact-mail a:hover { color: var(--gold-deep); }
.contact-note { margin: 16px 0 0; color: var(--text-2); }
.contact-links {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}

/* -------------------------------------------------------------- footer --- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 28px 0 44px;
  color: var(--text-3);
  font-size: .9rem;
}
.site-foot .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
}
.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
}
.foot-brand:hover { color: var(--text); text-decoration: none; }
.foot-brand img { width: 22px; height: 22px; border-radius: 6px; }
.foot-brand img.wordmark { width: auto; height: 15px; border-radius: 0; opacity: .72; position: relative; top: 2px; }
.foot-brand:hover img.wordmark { opacity: 1; }
.site-foot nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}
.site-foot nav a { color: var(--text-2); text-decoration: none; padding: 8px 0; display: inline-block; }
.site-foot nav a:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 620px) {
  .site-foot nav { margin-left: 0; width: 100%; }
}