/* SPDX-License-Identifier: AGPL-3.0-or-later
 *
 * One stylesheet for the whole site. No web fonts and no third-party assets:
 * every page is self-contained, which is what lets the privacy notice say
 * truthfully that visiting sends nothing to anyone else.
 */

:root {
  --bg: #ffffff;
  --surface: #f6f8f7;
  --ink: #16201b;
  --ink-2: #4e5b54;
  --line: #e1e7e3;
  --accent: #1e4d2b;
  --accent-ink: #ffffff;
  --focus: #2d7a4a;
  --radius: 12px;
  --container: 1080px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1310;
    --surface: #151c18;
    --ink: #e9efeb;
    --ink-2: #a5b2aa;
    --line: #232d27;
    --accent: #7fc796;
    --accent-ink: #0e1310;
    --focus: #7fc796;
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* A keyboard visitor's first stop, hidden until it has focus. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 10px 16px;
  z-index: 10;
}
.skip:focus { left: 8px; top: 8px; }

/* ---------------------------------------------------------------- header */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-block: 18px;
}
.wordmark {
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
}
.wordmark .suffix { color: var(--ink-2); font-weight: 450; }

.site-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-size: 15.5px; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* ------------------------------------------------------------------ main */

main { flex: 1 0 auto; }

section { padding-block: 56px; }
section + section { border-top: 1px solid var(--line); }

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.02em; margin: 0 0 16px; }
h1 { font-size: clamp(30px, 5.2vw, 44px); font-weight: 650; }
h2 { font-size: clamp(22px, 3.4vw, 28px); font-weight: 620; }
h3 { font-size: 18px; font-weight: 620; }
p { margin: 0 0 18px; color: var(--ink-2); }
p.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--ink); max-width: 62ch; }

.eyebrow {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
}

.hero { padding-block: clamp(56px, 9vw, 92px); }
.hero h1 { max-width: 20ch; }

.prose { max-width: 70ch; }

/* On a page whose single wrapper is both, the container must keep its own
   width and centring, or the whole column shifts inward and stops lining up
   with the header and footer above and below it. Limit the lines instead. */
.container.prose { max-width: var(--container); }
.container.prose > * { max-width: 70ch; }
.prose h2 { margin-top: 40px; }
.prose h3 { margin-top: 28px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; color: var(--ink-2); }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--accent); }

/* ----------------------------------------------------------------- cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 32px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
}
.card h3 { margin-bottom: 8px; }
/* One card on its own would otherwise stretch to the full container, giving a
   line far too long to read comfortably. */
.cards--single { max-width: 720px; }
.card p:last-child { margin-bottom: 0; }

/* A definition list used for the company's registered details. */
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; }
.facts dt { color: var(--ink-2); font-size: 15px; }
.facts dd { margin: 0; color: var(--ink); }
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; gap: 2px; }
  .facts dd { margin-bottom: 14px; }
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 11px 20px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}
.btn:hover { text-decoration: underline; }

.cta { margin-top: 28px; }

.updated { font-size: 15px; color: var(--ink-2); margin-bottom: 32px; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding-block: 32px;
  font-size: 15px;
  color: var(--ink-2);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
}
.site-footer a { color: var(--ink-2); }
.site-footer address { font-style: normal; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }