/* ingather website styles. Design tokens from the app's design handoff:
   warm neutrals, one teal accent, one typeface (Bricolage Grotesque). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque_400Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque_700Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #FAF9F6;             /* page background */
  --text: #1C1B1A;           /* text */
  --text-secondary: #5F5C57; /* secondary text */
  --hairline: #E9E6E0;       /* hairline borders */
  --card: #FFFFFF;           /* card background */
  --accent: #1F6E75;         /* teal: links */
  --accent-strong: #185A60;  /* teal on hover and focus */
  --wordmark: #5F5D57;       /* the wordmark's warm grey, sampled from the app icon */
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

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

body {
  margin: 0;
  padding: 0 20px;               /* side gutters */
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;          /* 17px */
  line-height: 1.5rem;           /* 24px */
  font-weight: 400;
  overflow-wrap: break-word;
}

/* One centred column that reads like a letter. */
.site-header,
main,
.site-footer {
  width: 100%;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.site-header {
  padding-top: 3.25rem;          /* 52px */
}

.wordmark {
  margin: 0;
  font-size: 2.125rem;           /* 34px */
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wordmark);
}

main {
  padding-top: 3rem;             /* hero 48px below the header */
}

h1 {
  margin: 0 0 1rem;
  font-size: 2.125rem;           /* 34px */
  line-height: 1.15;
  font-weight: 700;
  text-wrap: balance;
}

h2 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;           /* 22px */
  line-height: 1.2;
  font-weight: 700;
  text-wrap: balance;
}

p {
  margin: 0;
}

.lead {
  color: var(--text-secondary);
}

.hero {
  margin-bottom: 2.5rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 20px 22px;
}

.card + .card {
  margin-top: 1.75rem;           /* 28px between sections */
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

a:hover,
a:focus-visible {
  color: var(--accent-strong);
  text-decoration: underline;
}

/* Visible focus for keyboard users. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.site-footer {
  margin-top: 3rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-secondary);
  font-size: 0.9375rem;          /* 15px */
  line-height: 1.375rem;         /* 22px */
}

.site-footer p + p {
  margin-top: 0.5rem;
}

@media (max-width: 479.98px) {
  h1 {
    font-size: 1.75rem;          /* 28px */
  }
}