@font-face {
  font-family: "Grandstander";
  src: url(assets/fonts/grandstander-semibold.woff) format("woff");
  font-weight: 600; font-display: swap;
}
/* Penny Studios — shared site styles */
:root {
  --bg: #f7f5ef;
  --surface: #ffffff;
  --surface-2: #f0ede4;
  --ink: #2a2620;
  --ink-soft: #5c554a;
  --rule: #e6e1d6;
  --accent: #2e9e5b;      /* Morpho green */
  --accent-ink: #1f7a45;
  --coin-a: #d99a4e;      /* penny copper */
  --coin-b: #b06a2c;
  --max: 760px;
  --shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 30px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16140f;
    --surface: #1e1b15;
    --surface-2: #242017;
    --ink: #ece6d8;
    --ink-soft: #a89f8d;
    --rule: #2c2820;
    --accent: #4bc47e;
    --accent-ink: #6fd497;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Header + nav */
header.site { border-bottom: 1px solid var(--rule); }
header.site .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 22px; flex-wrap: wrap;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--ink); font-weight: 700; letter-spacing: .2px;
}
/* Logotype in Grandstander, the display face from the Morpho app and store art */
.brand > span:last-child { font-family: "Grandstander", system-ui, sans-serif; font-weight: 600; font-size: 21px; letter-spacing: .3px; }
.brand .mark { display: block; width: 38px; height: 38px; }   /* mascot-cat line drawing; dark-mode version swaps in via <picture> */
.brand .mark img { display: block; width: 38px; height: 38px; }
nav.site-nav { display: flex; gap: 20px; }
nav.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-size: 15px; font-weight: 600;
}
nav.site-nav a:hover { color: var(--ink); }

main.wrap { padding-top: 40px; padding-bottom: 64px; }   /* .wrap alone would reset this to 0 */

/* Type */
h1 { font-size: 32px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -0.3px; }
h2 { font-size: 21px; margin: 36px 0 10px; letter-spacing: -0.1px; }
h3 { font-size: 17px; margin: 0 0 4px; }
p, li { color: var(--ink); }
p { margin: 12px 0; }
a { color: var(--accent-ink); text-underline-offset: 2px; }
ul { padding-left: 22px; }
li { margin: 6px 0; }
.muted { color: var(--ink-soft); }
.updated { color: var(--ink-soft); font-size: 15px; margin: 0 0 8px; }
.lede {
  font-size: 18px; color: var(--ink-soft);
  border-left: 3px solid var(--accent); padding-left: 16px; margin: 18px 0 8px;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; text-decoration: none;
  padding: 12px 20px; border-radius: 12px;
  background: var(--accent); color: #fff; border: 0;
}
.btn.secondary { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink-soft);
  font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--rule);
}

/* App hero (Morpho page) */
.store-badge { display: inline-block; line-height: 0; }
.store-badge img { height: 54px; width: auto; }
.app-hero { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; padding: 12px 0 8px; }
.app-hero .app-icon {
  width: 132px; height: 132px; border-radius: 28px;
  box-shadow: var(--shadow); flex: none;
}
.app-hero .app-title { flex: 1 1 260px; }
.app-hero h1 { margin-bottom: 4px; }
.app-hero .tagline { font-size: 19px; color: var(--ink-soft); margin: 0 0 16px; }

/* Home hero */
.home-hero { padding: 52px 0 30px; }
.home-hero h1 { font-size: 42px; }

/* Feature grid */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.feature {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow);
}
/* Emoji works as a bullet: it sits beside the title, and the description hangs under the title */
.feature { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; align-content: start; }
.feature .ico { font-size: 22px; line-height: 1; }
.feature h3 { margin: 0; }
.feature p { grid-column: 2; margin: 4px 0 0; font-size: 15px; color: var(--ink-soft); }

/* Game card (home) */
.game-card {
  display: flex; gap: 18px; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 18px;
  padding: 20px; box-shadow: var(--shadow); text-decoration: none; color: inherit;
}
.game-card img { width: 84px; height: 84px; border-radius: 18px; flex: none; }
.game-card h3 { font-size: 20px; }
.game-card .arrow { margin-left: auto; color: var(--ink-soft); font-size: 22px; }

/* Screenshot strip */
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 8px 0 14px; }
.shots .shot {
  flex: none; width: 200px; aspect-ratio: 9 / 19.5;
  border-radius: 22px; background: var(--surface-2);
  border: 1px solid var(--rule); box-shadow: var(--shadow);
  display: grid; place-items: center; color: var(--ink-soft); font-size: 13px; text-align: center; padding: 12px;
}
.shots img.shot { display: block; height: auto; padding: 0; object-fit: cover; }
.shots .shot { width: 100%; }
/* Phones: too narrow for four across, so swipe through them instead */
@media (max-width: 640px) {
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .shots .shot { width: 200px; scroll-snap-align: start; }
}

/* FAQ */
.faq { margin: 8px 0; }
.faq h3 { margin-top: 22px; }

footer.site {
  border-top: 1px solid var(--rule);
  color: var(--ink-soft); font-size: 14px; padding: 26px 0 46px;
}
footer.site .wrap { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
footer.site a { color: var(--ink-soft); }
footer.site nav { display: flex; gap: 16px; flex-wrap: wrap; }

@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 34px; }
}