/* The brand on the website's own pages (about, support, privacy, terms, offers): a terracotta
   band at the top with the globe (curved meridians and wide lines across, as in the share
   image, scripts/og-image.html) and the logo (the icon, then the name) in cream. The
   page itself is cream, with white cards. Linked after each page's own styles. */
:root {
  --cream: #fff3e0;
  --cream-bg: #fdf3e4;
  --cream-line: #ecdcc3;
  --globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M12 0C-6 35-6 65 12 100M38 0C30 35 30 65 38 100M62 0C70 35 70 65 62 100M88 0C106 35 106 65 88 100' fill='none' stroke='%23fff3e0' stroke-opacity='.13' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"), linear-gradient(rgba(255, 243, 224, .11) 1.5px, transparent 1.5px);
}
body { background: var(--cream-bg); }

.top { position: relative; padding: 16px 24px; background-color: #b4442f; background-image: var(--globe); background-size: 100% 640px, 100% 60px; background-position: 0 50%, 0 -1px; background-repeat: no-repeat, repeat; color: var(--cream); }
/* In bars the logo is the footprints in front of the name (no tile); the footprints above the name are for
   places with room, such as the share image and the emails. */
.wordmark { color: var(--cream); }
.wordmark svg.feet { width: 42px; height: 32px; fill: currentColor; }
@media (max-width: 640px) { .wordmark svg.feet { width: 36px; height: 28px; } }
@media (max-width: 640px) {
  .top { padding: 12px 16px 14px; }
}

/* Headings in the brand's deep terracotta; lines and cards warm, to sit on cream. */
h1 { color: #b4442f; }
section { border-top-color: var(--cream-line) !important; }
footer { border-top-color: var(--cream-line) !important; }
.contents ol { border-left-color: var(--cream-line) !important; }