/* Story Artist website: one shared stylesheet for every page.
   Plain and temporary on purpose. The real look comes from the Figma design stage.
   Uses the visitor's own system fonts, so the site loads nothing from anywhere else. */

:root {
  --bg: #ffffff;
  --bg-soft: #f4f4f2;
  --text: #1c1c1e;
  --text-soft: #5c5c60;
  --line: #dcdcd8;
  --accent: #1f5fbf;
  --todo-bg: #fff3c4;
  --todo-text: #6b4e00;
  --frame: #e8e8e4;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161618;
    --bg-soft: #202023;
    --text: #ececee;
    --text-soft: #a2a2a8;
    --line: #34343a;
    --accent: #6fa8ff;
    --todo-bg: #4a3b0c;
    --todo-text: #ffe28a;
    --frame: #2a2a2e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

a { color: var(--accent); }

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top bar */
header.site {
  border-bottom: 1px solid var(--line);
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  flex-wrap: wrap;
}
.brand {
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  text-decoration: none;
}
nav.site a {
  color: var(--text-soft);
  text-decoration: none;
  margin-left: 18px;
}
nav.site a:first-child { margin-left: 0; }
nav.site a:hover,
nav.site a[aria-current="page"] { color: var(--text); }

/* Page content */
main { padding: 48px 0 64px; }

h1 { font-size: 40px; line-height: 1.15; margin: 0 0 12px; }
h2 { font-size: 24px; margin: 40px 0 8px; }
h3 { font-size: 18px; margin: 24px 0 4px; }
p { margin: 0 0 14px; }
.lead { font-size: 21px; color: var(--text-soft); max-width: 640px; }
.small { font-size: 14px; color: var(--text-soft); }

/* Home page */
.hero { padding-bottom: 8px; }
.button {
  display: inline-block;
  background: var(--text);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  margin: 12px 0 6px;
}

/* A stand-in for the screenshot until there is a real one */
.screenshot {
  margin: 36px 0 8px;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 24px;
  align-content: start;
}
.screenshot span {
  aspect-ratio: 16 / 9;
  background: var(--frame);
  border-radius: 4px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 32px;
}

/* Wording or details still to be decided. Search the files for "TODO" to find them all. */
.todo {
  background: var(--todo-bg);
  color: var(--todo-text);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}

/* Bottom bar */
footer.site {
  border-top: 1px solid var(--line);
  padding: 24px 0 40px;
  font-size: 14px;
  color: var(--text-soft);
}
footer.site a { color: var(--text-soft); margin-right: 16px; }

@media (max-width: 560px) {
  h1 { font-size: 32px; }
  .lead { font-size: 19px; }
  .screenshot { grid-template-columns: repeat(3, 1fr); padding: 14px; gap: 8px; }
}