/* indieappstudios.com. One stylesheet, no framework, no web fonts (nothing is loaded from another company).
   Calm and neutral on purpose: this site has to sit behind several different games and apps over time, so it
   borrows no single product's look. Paper, ink, one teal. Each product brings its own colour on its own card. */
:root {
  --paper: #f7f5f0;
  --paper-2: #efece4;
  --card: #ffffff;
  --ink: #17181c;
  --soft: #55585f;
  --line: #dcd8cd;
  --teal: #0c6f66;
  --teal-dark: #094f49;
  --teal-tint: #dff1ee;
  --radius: 16px;
  --wrap: 1080px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--font); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-underline-offset: 0.18em; }
a:hover { color: var(--teal-dark); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.3rem, 6.4vw, 4.2rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 750; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2.4rem, var(--wrap)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 0.6em 1em; z-index: 100; font-weight: 700; }
.skip:focus { left: 0.5rem; top: 0.5rem; }
.eyebrow { color: var(--teal); font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; margin: 0 0 0.8em; }
.lede { font-size: clamp(1.15rem, 2.3vw, 1.4rem); line-height: 1.5; color: var(--soft); max-width: 38ch; }
.soft { color: var(--soft); }

/* ---- top bar */
.top { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 240, 0.93); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.12rem; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.brand:hover { color: var(--teal-dark); }
/* the mark: three stacked blocks, an app, a game, a studio. Drawn in CSS so there is no logo file to keep in step. */
.mark { width: 1.5rem; height: 1.5rem; border-radius: 6px; background:
    linear-gradient(var(--teal), var(--teal)) left 4px top 4px / 7px 7px no-repeat,
    linear-gradient(#e8862a, #e8862a) right 4px top 4px / 7px 7px no-repeat,
    linear-gradient(var(--paper), var(--paper)) left 4px bottom 4px / 16px 6px no-repeat,
    var(--ink); flex: none; }
#nav { display: flex; align-items: center; gap: 1.6rem; }
#nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem; padding: 0.4em 0; border-bottom: 2px solid transparent; }
#nav a:hover, #nav a[aria-current="page"] { border-bottom-color: var(--teal); color: var(--teal-dark); }
.menu { display: none; background: none; color: var(--ink); border: 2px solid var(--line); border-radius: 10px; font: 700 0.95rem var(--font); padding: 0.5em 0.9em; min-height: 44px; }
@media (max-width: 720px) {
  .menu { display: inline-block; }
  .js #nav { display: none; }
  .js #nav.open { display: flex; }
  #nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 0.3rem 1.2rem 1rem; }
  #nav a { padding: 0.9em 0; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  html:not(.js) .menu { display: none; }
  html:not(.js) #nav { position: static; padding: 0 0 0.6rem; border: 0; }
  html:not(.js) .top-in { flex-wrap: wrap; }
}

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0.7em 1.4em; border-radius: 12px; font: 750 1.02rem/1.1 var(--font); text-decoration: none; border: 2px solid transparent; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-ghost { border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: #fff; }
.row { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; }

/* ---- hero */
.hero { padding-block: clamp(3rem, 9vw, 6.5rem) clamp(2rem, 6vw, 4rem); }
.hero h1 { max-width: 14ch; }
.hero h1 em { font-style: normal; color: var(--teal); }

/* ---- sections */
section { padding-block: clamp(2.4rem, 6vw, 4.5rem); }
.tint { background: var(--paper-2); border-block: 1px solid var(--line); }
.head { max-width: 44rem; margin-bottom: clamp(1.2rem, 3.5vw, 2.2rem); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 3vw, 1.8rem); }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 2.4vw, 1.4rem); }
@media (max-width: 900px) { .grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .grid2 { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .grid4 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; }
.card p:last-child { margin-bottom: 0; }
.card h3 { margin-bottom: 0.35em; }
.num { font-weight: 800; color: var(--teal); font-size: 0.9rem; letter-spacing: 0.08em; margin-bottom: 0.6em; }

/* a product: its own picture and colour inside a neutral frame */
.product { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--card); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.product-art { background: #14161b; display: grid; place-items: center; }
/* contain, not cover: in a tall cell, cover cut the game's name off at both sides */
.product-art img { width: 100%; height: auto; object-fit: contain; }
.product-body { padding: clamp(1.3rem, 3.5vw, 2.2rem); }
.status { display: inline-flex; align-items: center; gap: 0.5em; background: var(--teal-tint); color: var(--teal-dark); font-weight: 700; font-size: 0.86rem; padding: 0.35em 0.8em; border-radius: 999px; margin-bottom: 0.9rem; }
.status::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--teal); }
.status.quiet { background: var(--paper-2); color: var(--soft); }
.status.quiet::before { background: #a9a59b; }
@media (max-width: 820px) { .product { grid-template-columns: 1fr; } }
.shots3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin-top: 1.2rem; }
.shots3 img { border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 9 / 16; object-fit: cover; width: 100%; }

.band { background: var(--ink); color: #f4f2ec; text-align: center; }
.band a:not(.btn) { color: #8fe0d6; }
.band .btn-primary { background: #fff; color: var(--ink); }
.band .btn-primary:hover { background: var(--teal-tint); color: var(--ink); }
.band p { max-width: 40rem; margin-inline: auto; color: #cfcbc0; }

/* ---- text pages */
.doc { max-width: 44rem; }
.doc h1 { font-size: clamp(2rem, 5.4vw, 3.1rem); }
.doc h2 { font-size: 1.35rem; margin-top: 2.1em; }
.doc ul, .doc ol { padding-left: 1.25rem; }
.doc li { margin: 0.35em 0; }
.note { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin: 1.4rem 0; }
.note p:last-child { margin-bottom: 0; }
table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.6rem; }
th, td { text-align: left; padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--soft); font-weight: 650; width: 34%; }
[hidden] { display: none !important; }

/* ---- footer */
.foot { border-top: 1px solid var(--line); padding-block: 2.4rem 1.6rem; color: var(--soft); font-size: 0.96rem; background: var(--paper-2); }
.foot-in { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; }
.foot-brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; color: var(--ink); font-size: 1.1rem; margin-bottom: 0.6em; }
.foot nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.5rem; align-content: start; }
.foot a { color: var(--ink); }
.foot-small { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: 0.86rem; }
.foot-small p { margin-bottom: 0.4em; }
@media (max-width: 700px) { .foot-in { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}
@media print { .top, .foot nav { display: none; } body { background: #fff; } }