@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --canela-blue: #4164ff;
  --canela-blue-dark: #0829c9;
  --canela-flame: #fe6237;
  --canela-gold: #ffb62e;
  --canela-soft: #f7f5f2;
  --canela-paper: #fffdf8;
  --canela-ink: #0b0d16;
  --canela-muted: #4b5164;
  --canela-line: rgba(8, 41, 201, 0.13);
}

html {
  background: var(--canela-soft);
}

body {
  background: var(--canela-soft) !important;
  color: var(--canela-ink) !important;
  font-family: 'Fraunces', Georgia, serif !important;
}

body::before {
  content: '';
  display: block;
  width: min(214px, 48vw);
  height: 76px;
  margin: 28px auto 0;
  background: url('/assets/brand/svg/symbol_primary.svg') center / contain no-repeat;
}

.wrap,
article.wrap {
  max-width: 780px !important;
  padding-top: clamp(56px, 8vw, 96px) !important;
}

.meta,
h3,
.caption,
.footer,
button,
input,
select,
textarea {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
}

.meta {
  color: var(--canela-blue-dark) !important;
  letter-spacing: 0.12em !important;
}

h1,
h2 {
  color: var(--canela-ink) !important;
  letter-spacing: 0 !important;
}

h1 {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: clamp(2.4rem, 7vw, 4.8rem) !important;
  line-height: 0.98 !important;
  font-weight: 500 !important;
}

h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif !important;
  font-size: clamp(1.7rem, 4vw, 2.6rem) !important;
  line-height: 1.05 !important;
  margin-top: clamp(64px, 10vw, 104px) !important;
}

p,
li {
  color: var(--canela-ink);
}

a {
  color: var(--canela-blue-dark) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.28em !important;
  transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1), text-underline-offset 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

a:hover {
  color: var(--canela-flame) !important;
  text-underline-offset: 0.42em !important;
}

.lede,
.pull,
blockquote {
  color: var(--canela-blue-dark) !important;
}

.pull,
blockquote {
  border-left-color: var(--canela-flame) !important;
}

.rule,
hr {
  border-color: var(--canela-line) !important;
}

.infographic,
.notice,
.footer {
  background: var(--canela-paper) !important;
  border-color: var(--canela-line) !important;
  box-shadow: 0 24px 78px rgba(11, 13, 22, 0.045);
}

.footer::after {
  content: '';
  display: block;
  width: 148px;
  height: 44px;
  margin-top: 32px;
  background: url('/assets/brand/visual-library/svg/motion/line_dashed_curve.svg') left center / contain no-repeat;
}