@charset "UTF-8";

/* =========================
   HEADINGS
========================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
}

h1:not(:first-of-type), h2, h3, h4, h5, h6 {
	margin: 2em 0 1em 0;
	margin-block-start: 2em!important;
	margin-block-end: 1em!important;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }
h5 { font-size: var(--text-h5); }
h6 { font-size: var(--text-h6); }

/* =========================
   PARAGRAPH
========================== */
p {
  font-size: var(--text-paragraph);
  line-height: 1.7;
  margin: 0 0 1em 0;
}

/* =========================
   LINKS
========================== */
a, ul li a, ul li a span {
  text-decoration: none;
  transition: opacity 0.2s ease;
}

a:hover, ul li:hover a, ul li:hover a span {
	color: var(--color-red);
	text-decoration: underline;
}

/* =========================
   BLOCKQUOTE
========================== */
blockquote {
  font-family: var(--font-body);
  font-size: var(--text-h4);
  color: var(--color-brown-dark);
  border-left: 4px solid var(--color-red);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: rgba(217, 175, 139, 0.15);
}

/* =========================
   CODE / MONO
========================== */
code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}

pre {
  background: var(--color-brown-dark);
  color: var(--color-cream);
  padding: 1rem;
  overflow-x: auto;
  border-radius: 6px;
}

/* =========================
   SMALL / META
========================== */
small,
.meta,
.label {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-brown);
}