/* The public pages' shared frame: palette, page width, header and footer. Home, pricing, connect,
   privacy, terms and the docs all wear it, so nothing moves when you go from one to another.
   index.html carries this block inline (it is mirrored to the studio laptop, which serves no
   /site.css); test/site.test.mjs keeps the two identical. The Studio and account pages use app.css. */
@font-face { font-family: 'Caveat'; src: url(/fonts/Caveat.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Patrick Hand'; src: url(/fonts/PatrickHand-400.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/fonts/Inter.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --paper: #f7f2e7; --sheet: #fffdf8; --ink: #2a2521; --ink-soft: #6b625a; --rule: #e4dccb;
  --accent: #d9733f; --accent-ink: #fff; --accent-soft: #f6e0d2; --bad: #b3412e; --good: #3f7d4e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1d1a17; --sheet: #26221e; --ink: #f1ebe0; --ink-soft: #a89e92; --rule: #3a342e;
          --accent: #e58a58; --accent-ink: #1d1a17; --accent-soft: #3b2a20; --bad: #e07a66; --good: #7cc08c; color-scheme: dark; }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* a class that sets display would beat it */
html, body { margin: 0; }
html { scrollbar-gutter: stable; }  /* a short page and a long one centre on the same line */
body { background: var(--paper); color: var(--ink); font: 15px/1.5 Inter, system-ui, sans-serif; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 28px 20px 60px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.site-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; min-height: 42px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 700 40px/1 Caveat, cursive; letter-spacing: .3px; }
.brand img { width: 42px; height: 42px; border-radius: 10px; display: block; }
.brand .tld { color: var(--accent); }
.brand small { font: 600 14px/1 Inter, system-ui, sans-serif; color: var(--ink-soft); margin-left: 4px; letter-spacing: 0; }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.account img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.account form { display: inline; }
.account a.me { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--rule); }
.account a.me:hover { text-decoration-color: var(--accent); }
.site-head .account button, .site-head .account .button { display: inline-block; margin: 0; padding: 9px 14px; border-radius: 10px; border: 1.5px solid var(--rule);
  background: transparent; color: var(--ink); font: 600 14px/1 Inter, system-ui, sans-serif; letter-spacing: 0; text-decoration: none; cursor: pointer; }
.site-foot { border-top: 1.5px solid var(--rule); padding-top: 18px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; color: var(--ink-soft); font-size: 14px; }
.site-foot .brand { font-size: 28px; gap: 8px; }
.site-foot .brand img { width: 28px; height: 28px; border-radius: 7px; }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.site-foot a { color: var(--ink-soft); }
.site-foot a:hover { color: var(--accent); }
/* a page of reading (privacy, terms, connect): the frame stays full width, the text column does not */
.wrap.reading > :not(.site-head):not(.site-foot) { width: 100%; max-width: 800px; justify-self: center; }