/* The site, in the app's colours: the ink ramp, linen, juniper and ember, matching the admin
   panel's tokens so the two published surfaces are recognisably one app. Dark first, light from the
   system. No JavaScript anywhere, and no web font: the app's own face is not licensed for the web
   and a system stack reads better than a wrong one. See D-300. */

:root {
  --ink-900: #0a0c0e;
  --ink-800: #14171a;
  --linen: #fbf8f2;
  --juniper: #5dcdbf;
  --juniper-deep: #018d87;
  --ember: #f68c53;

  --page: var(--ink-900);
  --card: var(--ink-800);
  --line: rgba(251, 248, 242, 0.12);
  --text: var(--linen);
  /* The quiet ink at the opacity E-049 settled on, not the 0.38 the boards used to give it. */
  --muted: rgba(251, 248, 242, 0.62);
  --accent: var(--juniper);
  --mark: var(--linen);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
  :root {
    --page: #f2efe8;
    --card: #ffffff;
    --line: rgba(23, 24, 26, 0.14);
    --text: #17181a;
    --muted: rgba(23, 24, 26, 0.62);
    --accent: var(--juniper-deep);
    --mark: #22262a;
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The bar */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 44rem;
  margin: 0 auto;
  padding: 20px 22px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mark {
  width: 28px;
  height: 28px;
  flex: none;
}

.bar nav {
  display: flex;
  gap: 18px;
  font-size: 15px;
}

.bar nav a {
  color: var(--muted);
  text-decoration: none;
}

.bar nav a:hover,
.bar nav a:focus-visible {
  color: var(--text);
}

.bar nav a[aria-current="page"] {
  color: var(--text);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The page */

main {
  max-width: 44rem;
  margin: 0 auto;
  padding: 10px 22px 8px;
}

h1 {
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 28px 0 6px;
}

h2 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 2.1em 0 0.35em;
}

h3 {
  font-size: 1rem;
  margin: 1.5em 0 0.3em;
}

p {
  margin: 0.75em 0;
  color: var(--muted);
}

p.note {
  color: var(--muted);
  font-size: 0.86rem;
  margin-top: 0;
}

strong {
  color: var(--text);
  font-weight: 600;
}

article ul {
  margin: 0.7em 0;
  padding-left: 1.1em;
  list-style: none;
}

article li {
  position: relative;
  margin: 0.55em 0;
  color: var(--muted);
}

/* The bullet is the beam: a short juniper capsule, as the app draws one. */
article li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.72em;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
}

a {
  color: var(--accent);
}

/* The front page */

.hero {
  padding: 8vh 0 6vh;
}

.hero h1 {
  font-size: 2.6rem;
  margin-top: 0;
}

.lede {
  font-size: 1.16rem;
  max-width: 34rem;
}

.badge {
  display: inline-block;
  margin: 1.6em 0 0;
  padding: 11px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}

.links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 2.4em;
}

.links .link {
  color: var(--text);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line);
  padding-bottom: 2px;
}

.links .link:hover,
.links .link:focus-visible {
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* The foot */

footer {
  max-width: 44rem;
  margin: 0 auto;
  padding: 40px 22px 56px;
  border-top: 1px solid var(--line);
  margin-top: 48px;
  color: var(--muted);
  font-size: 0.88rem;
}

footer p {
  margin: 0.3em 0;
}

@media (max-width: 30rem) {
  body {
    font-size: 16px;
  }
  .hero h1 {
    font-size: 2.1rem;
  }
}