/* =============================================================================
   The flat pages: about, terms, privacy, contact.

   NOT THE APP AND NOT THE FRONT DOOR. These are documents. They load none of
   the editor, no WebGL, no catalogue -- opening the terms should not cost
   twenty thousand items and fifteen seconds -- so they get their own small
   stylesheet rather than pulling in 360sona.css to use four rules of it.

   They keep the front page's ground and its type so they do not read as a
   different website, and that is the whole of what they borrow.
   ============================================================================= */

:root {
  --ink: #1E1E1E;
  --ink-body: #333333;
  --ink-dim: #666666;
  --rule: #D9D9D9;
  --green-ink: #336600;
  --green-brand: #76B900;
  --ui: 'Segoe UI', Frutiger, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: linear-gradient(to bottom, #cccccc 0, #e2e2e2 18%, #f2f2f2 42%,
                              #eaeaea 64%, #dcdcdc 100%);
  background-attachment: fixed;
  color: var(--ink-body);
  font: 400 15px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
}

/* --- the bar, the front page's own ---------------------------------------- */

/* THE BAR IS THE SAME BAR ON EVERY SCREEN.
   Three copies of it exist because the front door, the flat pages and the
   editor load three different stylesheets and always have -- a document should
   not pull in the editor's CSS to use four rules of it. What they must not do
   is drift, and they had: the flat pages ruled their bar in #D9D9D9 while the
   front door used the measured #BCBCBC, the gaps were 18px against var(--sp-9),
   and the editor's bar had no ground, no rule and no shadow at all, so it read
   as a different site. These five declarations are the bar; change them in all
   three places or in none. */
.pbar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 30px;
  background: linear-gradient(#ffffff, #f5f5f5 54%, #ececec);
  border-bottom: 1px solid #BCBCBC;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
.pbrand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.pbrand img { display: block; height: 34px; width: auto; }
/* The wordmark, baked in by tools/build-pages.mjs rather than assembled at
   runtime: these pages run no JavaScript, which is the point of them. */
.pbrand .pmark { display: block; width: auto; }
.pword { font: 700 19px/1 var(--ui); }
.pfoot .pmark { display: block; width: auto; opacity: .8; }
.psp { flex: 1; }
.pbar a.plink {
  color: var(--green-ink); text-decoration: none;
  font: 600 14px/1 var(--ui);
}
.pbar a.plink:hover { text-decoration: underline; }

/* --- the document --------------------------------------------------------- */

main {
  max-width: 720px;          /* about 70 characters at this size */
  margin: 0 auto;
  padding: 46px 30px 90px;
}
h1 {
  margin: 0 0 6px;
  font: 700 34px/1.15 var(--ui);
  color: var(--ink);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.plede { margin: 0 0 34px; font-size: 17px; color: var(--ink-dim); }
h2 {
  margin: 34px 0 8px;
  font: 700 19px/1.25 var(--ui);
  color: var(--ink);
}
p { margin: 0 0 14px; }
ul { margin: 0 0 14px; padding-left: 20px; }
li { margin: 0 0 6px; }
a { color: var(--green-ink); }
strong { color: var(--ink); }
code {
  font: 13px/1.4 Consolas, 'SF Mono', Menlo, monospace;
  background: rgb(0 0 0 / .05);
  padding: 1px 5px; border-radius: 3px;
}
.pnote {
  margin: 28px 0 0;
  padding: 14px 16px;
  background: rgb(255 255 255 / .55);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--green-brand);
  border-radius: 4px;
  font-size: 14px;
}
.pdate { margin-top: 40px; font-size: 13px; color: var(--ink-dim); }

/* --- the footer, matching the front page's ---------------------------------- */

/* The other copy of .ffoot. Same rule, same gap, same size, same alignment. */
.pfoot {
  max-width: 720px; margin: 22px auto 0;
  padding: 22px 30px 40px;
  border-top: 1px solid #E2E2E2;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  justify-content: center; text-align: center;
  font-size: 13px; color: var(--ink-dim);
}
.pfoot a { color: var(--green-ink); text-decoration: none; }
.pfoot a:hover { text-decoration: underline; }
.pfoot .psp { flex: 1; min-width: 20px; }

@media (max-width: 640px) {
  main { padding: 30px 20px 60px; }
  h1 { font-size: 27px; }
}