/* The header and footer every built page shares (docs/plans/site-revamp.md), drawn by scripts/build.mjs.
   The build puts this file first in both stylesheets it writes: site.css (the learning pages) and bridge.css
   (the pages whose content is still styled by styles.css). So every rule here names header.site or footer.site,
   and sets everything styles.css would otherwise set for a nav, a brand or a button. */
:root {
  /* The header is a dark room in both themes: the videos are filmed by a fire. */
  --night: #131110;
  --night-ink: #f3ede2;
  --night-muted: #b9b1a4;
  --night-rule: #3a352f;
  --night-edge: #756c5f;
  --glow: #f5a524;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --header-h: 72px;
}
header.site { background: var(--night); color: var(--night-ink); font: 17px/1.6 var(--sans); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
header.site .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--night-ink); font: 600 19px/1 var(--serif); letter-spacing: 0; text-decoration: none; white-space: nowrap; }
header.site .brand img { width: 32px; height: 32px; border-radius: 50%; }
header.site .brand:focus-visible, header.site nav a:focus-visible { outline: 2px solid var(--night-ink); outline-offset: 3px; }
header.site nav { display: flex; align-items: center; gap: 26px; }
header.site nav a { margin: 0; }
/* :not(.brand) is always true here. It lifts these above the rule in styles.css that hides a nav's text links
   under 960px until account.js has built its menu, which this header does not have. */
header.site nav a:not(.button):not(.brand) { display: inline-flex; align-items: center; min-height: 24px; color: var(--night-muted); font-size: 15px; text-decoration: none; white-space: nowrap; }
header.site nav a:not(.button):not(.brand):hover, header.site nav a:not(.button):not(.brand)[aria-current] { color: var(--night-ink); }
header.site nav .button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border: 1px solid var(--night-edge); border-radius: 999px; background: transparent; color: var(--night-ink); font: 600 14px/1 var(--sans); text-decoration: none; white-space: nowrap; }
header.site nav .button:hover { border-color: var(--night-muted); color: var(--night-ink); }

footer.site { position: static; margin-top: auto; padding: 28px 0; background: transparent; border-top: 1px solid var(--rule); color: var(--muted); font: 14px/1.6 var(--sans); }
footer.site .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
footer.site .links, footer.site .account { display: flex; flex-wrap: wrap; gap: 6px 20px; }
footer.site a { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); }
footer.site .unread-dot { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: #c0392b; }
footer.site [hidden] { display: none; }
/* While the consent banner (track.js) shows, the page ends above it, so the footer's links are never under it. */
body:has(> #consent) footer.site { padding-bottom: calc(28px + var(--consent-h, 0px)); }

@media (max-width: 560px) {
  :root { --header-h: 60px; }
  header.site nav { gap: 16px; }
  header.site nav a.wide:not(.button):not(.brand) { display: none; }
}
/* The smallest phones: the header's three things on one line. */
@media (max-width: 380px) {
  header.site .wrap, header.site nav { gap: 12px; }
  header.site .brand { gap: 8px; font-size: 17px; }
  header.site nav a:not(.button):not(.brand) { font-size: 14px; }
  header.site nav .button { padding: 0 12px; }
}
@media (max-width: 350px) {
  header.site .brand img { display: none; }
}

/* The pages whose content styles.css still styles (the demo, the stories, the legal and client pages), in the
   learning site's colours and type (docs/plans/site-revamp.md). The build writes it after chrome.css into
   bridge.css, and each of those pages links it after styles.css, which is not edited: /admin links it alone. */
:root {
  --bg: #fbf8f2;
  --surface: #f1ecdf;
  --paper: #fffdf9;
  --ink: #1a1c1e;
  --muted: #5b6168;
  --rule: #e4dfd3;
  --accent: #1a1c1e;
  --accent-ink: #fff;
  --link: #9a4409;
  --sage: #f6ecd9;
  --sage-rule: #e3d2b0;
  --forest: #131110;
  --forest-rule: #756c5f;
  --field-rule: #7b756b;
}
body { font-family: var(--sans); }
h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; }
.eyebrow { color: var(--link); }
.wrap { width: 100%; max-width: 1180px; padding: 0 32px; }
/* The header scrolls with the page and the footer is not pinned, so nothing needs room kept under them. */
html { scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--consent-h, 0px) + 16px); }
#consent { bottom: 16px; }
/* chrome.css keeps the footer's links above the banner at every height, so styles.css's room for it on a short screen goes. */
body:has(> #consent) { padding-bottom: 0; }
.button { border-radius: 999px; }
.button.try { background: var(--sage); color: var(--ink); border-color: var(--sage-rule); }
@media (max-width: 900px) {
  .wrap { padding: 0 24px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
}
/* Dark, when the visitor's device asks for it, as the learning pages are (site.css): the same tokens, darker. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #1a1816;
    --surface: #221f1c;
    --paper: #221f1c;
    --ink: #efe9de;
    --muted: #aea699;
    --rule: #35312c;
    --accent: #efe9de;
    --accent-ink: #1a1816;
    --link: #f5a524;
    --sage: #2b2721;
    --sage-rule: #4a4236;
    --forest: #0f0e0d;
    --forest-rule: #5d554a;
    --field-rule: #8a8275;
    --error: #ff8a80;
  }
  .projects .agreement-text { background: var(--paper); color: var(--ink); }
  /* A drawn diagram keeps its light ground, so its lines and labels stay legible. */
  figure.diagram svg, figure.diagram .mermaid { background: #fbf8f2; border-radius: 8px; }
  img { color-scheme: light; }
}

/* The comments under a blog post (comments.js), in both looks: the build adds this file to site.css and bridge.css. */
section.comments { margin: 56px 0 0; padding: 32px 0 64px; border-top: 1px solid var(--rule); }
section.comments h2 { margin: 0 0 16px; font: 600 26px/1.2 var(--serif); }
section.comments h3 { margin: 24px 0 8px; font: 600 19px/1.25 var(--serif); }
.comment-list, .comment-list .replies { list-style: none; margin: 0; padding: 0; }
.comment-list .replies { margin-left: 28px; border-left: 2px solid var(--rule); padding-left: 16px; }
.comment { padding: 14px 0; }
.comment .by { margin: 0 0 4px; color: var(--muted); font-size: 14px; }
.comment .by strong { color: var(--ink); }
.comment .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--link); color: var(--paper, #fff); font: 600 12px/1.6 sans-serif; }
.comment.is-hidden > .body, .comment.is-held > .body { opacity: .6; }
.comment .body p { margin: 0 0 8px; overflow-wrap: anywhere; }
.comment .body pre { margin: 0 0 8px; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--rule); border-radius: 8px; font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.comment .deleted { margin: 0; color: var(--muted); font-style: italic; }
.comment .tools { display: flex; gap: 12px; margin: 0; }
.comment .tools:empty { display: none; }
.comment .tools button { min-height: 28px; padding: 0; border: 0; background: none; color: var(--link); font: 600 14px/1 sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.comment.marked { outline: 3px solid var(--link); outline-offset: 4px; border-radius: 4px; }
section.comments .none { color: var(--muted); }
.comment-form { margin: 12px 0 0; max-width: 640px; }
.comment-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.comment-form label { display: block; margin: 0 0 8px; font: 600 14px/1.4 sans-serif; }
.comment-form .hint { color: var(--muted); font-weight: 400; font-size: 13px; }
.comment-form input[type="text"], .comment-form input:not([type]), .comment-form input[type="email"], .comment-form textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card, var(--paper)); color: var(--ink); font: 16px/1.4 sans-serif; }
.comment-form .check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.comment-form .actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.comment-form .status { margin: 0; color: var(--muted); font-size: 14px; }
.comment-form .sent { margin: 0; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; }
@media (max-width: 560px) {
  .comment-form .row { grid-template-columns: 1fr; gap: 0; }
  .comment-list .replies { margin-left: 12px; padding-left: 12px; }
}