/* The public site's one stylesheet (site/template.mjs; copied to
   dist-site/site.css by scripts/build-site.mjs). Atlas's own paper, ink and
   type, so the site and the app read as one place: the colours are the app's
   index.css tokens by value (--bg, --text, --text-h, --text-faint, --border),
   the families the app's (Inter for reading, Zilla Slab for titles). Copied
   rather than shared: the app's stylesheet is a hashed file of another
   Worker's build. If the app's paper or ink changes, change them here too, and
   in the Docs' docs.css.

   Dark follows the reader's choice when one is stored on this origin (the
   template sets data-theme before the first paint) and the system's when not. */
:root {
  --bg: #fdfcf9;
  --text: #6b6557;
  --text-h: #1f1c17;
  --text-faint: #837c6e;
  --border: #e3ded0;
  --line: #f2efe7;
  --wash: #f6f3ec;
  --button: #3d362c;
  --on-button: #fdfcf9;
  --shadow: rgba(31, 28, 23, 0.35);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #272623;
    --text: #aea99c;
    --text-h: #efece4;
    --text-faint: #888376;
    --border: #545149;
    --line: #3b3934;
    --wash: #302f2b;
    --button: #efece4;
    --on-button: #272623;
    --shadow: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #272623;
  --text: #aea99c;
  --text-h: #efece4;
  --text-faint: #888376;
  --border: #545149;
  --line: #3b3934;
  --wash: #302f2b;
  --button: #efece4;
  --on-button: #272623;
  --shadow: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

a {
  color: var(--text-h);
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

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

h1,
h2 {
  color: var(--text-h);
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 700;
}

/* A picture taken in both themes (the Docs' captures: docs-site/render.mjs,
   and the home page's): both are in the page, and the reader's theme hides
   one. The same two conditions as the dark tokens above, so a picture never
   disagrees with the paper around it. Hiding only, never showing, so each
   keeps its own display. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .theme-dark-only {
    display: none;
  }
}

:root[data-theme='light'] .theme-dark-only {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-light-only {
    display: none;
  }
}

:root[data-theme='dark'] .theme-light-only {
  display: none;
}

/* The bar: the wordmark home on the left; Docs and the way into the app on
   the right. Pinned on every page (2026-11-07; it was the Docs' alone before):
   its button is the site's one way into the app, so it has to be there at
   every point of a page. Full width on its own paper, with its content kept in
   the site's 1200px column by the padding. The Docs' contents row stands
   under it on a phone at `top: 64px` (docs.css), which is this height. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
  padding: 0 max(24px, calc((100% - 1200px) / 2 + 24px));
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

@media (max-width: 839px) {
  .site-header {
    padding: 0 16px;
  }
}

.site-header a {
  text-decoration: none;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}

.site-header nav a:not(.button) {
  color: var(--text);
}

.wordmark {
  color: var(--text-h);
  font: 700 21px/1 'Zilla Slab', Georgia, serif;
  letter-spacing: 0.04em;
  text-decoration: none;
}

/* The one statement, and right under it the picture (.shot), with nothing
   between: no buttons and no status line (home.mjs). */
.hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 40px;
  text-align: center;
}

.hero h1 {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 64px);
  line-height: 1.08;
}

.hero .lede {
  max-width: 36ch;
  margin: 22px auto 0;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.5;
  text-wrap: balance;
}

.hero--small {
  padding-bottom: 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 32px;
}

.button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 10px;
  background: var(--button);
  color: var(--on-button);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

/* The bar's "Go to app": the same button, sized to the bar. */
.button--bar {
  padding: 9px 18px;
  font-size: 15px;
}

/* The app itself, as the picture: a laptop's window on a wide screen, the
   phone's own sheet on a phone (the <source> in home.mjs). Light stills on
   both themes for now; dark captures would be one more capture run. */
.shot {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.shot img {
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px -30px var(--shadow);
}

.shot figcaption {
  margin-top: 10px;
  color: var(--text-faint);
  font-size: 12px;
  text-align: right;
}

@media (max-width: 640px) {
  .shot img {
    max-width: 300px;
    margin: 0 auto;
    border-radius: 28px;
    aspect-ratio: 390 / 844;
  }

  .shot figcaption {
    text-align: center;
  }
}

/* Three screens, one map: a panel each, a name, two lines. Quiet columns, not
   a feature grid. */
.screens {
  max-width: 1120px;
  margin: 112px auto 0;
  padding: 0 24px;
}

.screens h2 {
  margin: 0 0 8px;
  font-size: 32px;
  line-height: 1.2;
  text-align: center;
}

.screens__sub {
  max-width: 46ch;
  margin: 0 auto 48px;
  text-align: center;
}

.screens__columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

.screens__columns figure {
  margin: 0;
}

.screens__columns img {
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  aspect-ratio: 768 / 1100;
  object-fit: cover;
  object-position: top;
}

.screens__columns figcaption {
  max-width: 280px;
  margin: 0 auto;
}

.screens__columns h3 {
  margin: 22px 0 6px;
  color: var(--text-h);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}

.screens__columns p {
  margin: 0;
  font-size: 16px;
}

@media (max-width: 760px) {
  .screens__columns {
    grid-template-columns: 1fr;
    gap: 56px;
  }
}

.prose {
  max-width: 600px;
  margin: 120px auto 0;
  padding: 0 24px;
}

.prose h2 {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.25;
}

.prose p {
  margin: 0 0 14px;
}

.closing {
  margin: 112px auto 0;
  padding: 0 24px;
  text-align: center;
}

.closing h2 {
  margin: 0 0 22px;
  font-size: 32px;
  line-height: 1.2;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1200px;
  margin: 112px auto 0;
  padding: 28px 24px 40px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.site-footer nav a {
  color: var(--text);
  text-decoration: none;
}

.site-footer .wordmark {
  font-size: 16px;
}

/* Light, System, Dark (site/template.mjs, THEME_SWITCH): three small words,
   each after the app's own icon for it, in one rounded group, the chosen one
   on the page's wash in ink. */
.theme-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
}

.theme-switch button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.theme-switch button:hover {
  color: var(--text-h);
}

.theme-switch button[aria-pressed='true'] {
  background: var(--wash);
  color: var(--text-h);
  font-weight: 600;
}

.theme-switch button:focus-visible {
  outline: 2px solid var(--text-h);
  outline-offset: 1px;
}