/* pinholegames.com. The Lumen & Leaf page wears the game's own look: its title painting, its lettering
   (Open Sans SemiBold, gold with a dark edge) and its colours (src/game/palette.gd). The privacy policy
   and the 404 page are plain pages. No scripts, nothing loaded from another site. */

@font-face {
  font-family: "Open Sans";
  src: url("/assets/fonts/open-sans-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --ground: #1b201d;
  --tray: #262e2a;
  --text: #ede6d1;
  --muted: #a6b0a1;
  --gold: #ffdb73;
  --edge: rgba(51, 33, 15, 0.85);
  --brown: #3d2b1a;
  --rule: #34403a;
  --game: "Open Sans", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  --gutter: clamp(16px, 5vw, 48px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--text); font: 1.0625rem/1.6 var(--body); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--gold); text-underline-offset: 0.18em; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
h2 { font: 600 1.3rem/1.3 var(--game); margin: 2.4em 0 0.7em; color: var(--text); }
p, ul { margin: 0 0 1em; }
ul { padding-left: 1.1em; }
li { margin-bottom: 0.5em; }

/* The title screen: the painted meadow and its greenhouse, the game's name lettered over the sky. */
.title {
  min-height: 100svh;
  padding: 16svh var(--gutter) 0;
  background: #b9d3e6 url("/assets/lumen-and-leaf/title.jpg") center 22% / cover no-repeat;
  text-align: center;
}
.title h1 {
  margin: 0;
  font: 600 min(6.4rem, 12vw)/1.05 var(--game);
  white-space: nowrap;
  color: var(--gold);
  -webkit-text-stroke: 0.15em var(--edge);
  paint-order: stroke fill;
}
/* Each line of the tagline on a line of its own, never wrapped, as the title screen has it. */
.title p {
  margin: 0.55em 0 0;
  font: 600 min(1.45rem, 4vw)/1.45 var(--game);
  color: var(--brown);
  white-space: nowrap;
}

.about { padding: 40px var(--gutter) 24px; max-width: 46rem; margin: 0 auto; }
.pricing { font: 600 clamp(1.25rem, 4vw, 1.6rem)/1.35 var(--game); color: var(--gold); margin-bottom: 0.4em; }
.status { color: var(--muted); margin-bottom: 1.8em; }

/* Screenshots: a row to swipe on a phone, a grid beside the painting on a wide screen. */
.shots {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 240px); gap: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  margin: 2em calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px;
}
.shots img { scroll-snap-align: start; border-radius: 10px; aspect-ratio: 540 / 960; width: 100%; }

.site-footer { border-top: 1px solid var(--rule); margin-top: 3em; padding: 20px 0 36px; color: var(--muted); font-size: 0.95rem; }
.site-footer p { margin: 0 0 0.4em; }

/* A wide screen: the title screen stays in view at the left, the rest scrolls beside it. */
@media (min-width: 960px) {
  .page { display: grid; grid-template-columns: minmax(420px, 42vw) 1fr; }
  .title { position: sticky; top: 0; height: 100vh; min-height: 0; padding: 14vh 32px 0; background-position: center 20%; }
  .title h1 { font-size: clamp(2.9rem, 4.9vw, 4.75rem); }
  .title p { font-size: min(1.35rem, 1.5vw); }
  .about { padding: 12vh clamp(32px, 5vw, 80px) 24px; margin: 0; max-width: 44rem; }
  .shots { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 2em 0; padding: 0; max-width: 34rem; }
}

/* Plain pages: the privacy policy and the 404. */
body.plain { background: #fdfcf8; color: #1f1f1c; }
body.plain a { color: #2d5a3c; }
body.plain a:focus-visible { outline-color: #2d5a3c; }
body.plain h1 { font: 600 clamp(1.7rem, 5vw, 2.2rem)/1.2 var(--game); margin: 0.4em 0 0.3em; }
body.plain h2 { color: inherit; font-size: 1.2rem; margin: 2em 0 0.5em; }
body.plain .doc { max-width: 42rem; margin: 0 auto; padding: 28px var(--gutter) 56px; }
body.plain .meta { color: #5a5a52; }
body.plain .back { display: inline-block; padding: 10px 0; font-size: 0.95rem; }
body.plain .site-footer { border-color: #e2ded3; color: #5a5a52; }
@media (prefers-color-scheme: dark) {
  body.plain { background: var(--ground); color: var(--text); }
  body.plain a { color: var(--gold); }
  body.plain a:focus-visible { outline-color: var(--gold); }
  body.plain .meta, body.plain .site-footer { color: var(--muted); }
  body.plain .site-footer { border-color: var(--rule); }
}