:root {
  --sans-serif:
    var(--font-manrope), 'Franklin Gothic Medium', 'Arial Narrow', Arial,
    sans-serif;
  --serif:
    var(--font-domine), Cambria, Cochin, Georgia, Times, 'Times New Roman',
    serif;
  --fs-body: 1em;
  --fs-subtle: 0.8em;
  --fs-heading: 2em;
  --fs-subheading: 1.5em;
  --font-color: #010121;
  --background-color: #fff8e7;
  --highlight-color: #f1e9d2;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  font-size: 18px;
}

nav {
  margin: 1em;
  padding-bottom: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 2px solid var(--highlight-color);
}

.bar {
  display: flex;
  align-items: center;
  border-right: 1px solid var(--highlight-color);
}

.nav--title {
  font-family: var(--sans-serif);
  font-size: var(--fs-heading);
  color: var(--font-color);
  text-decoration: none;
  margin-bottom: 0;
}

.nav--pronouns {
  font-family: var(--sans-serif);
  font-size: var(--fs-body);
  color: grey;
  margin-bottom: 0.5em;
}

.nav--links {
  display: flex;
}

.nav--link {
  margin-left: 1em;
  margin-right: 1em;
  font-family: var(--sans-serif);
  font-size: var(--fs-body);
  color: var(--font-color);
  text-decoration: none;
}

.nav--title:hover,
.nav--title:focus,
.nav--link:hover,
.nav--link:focus {
  text-decoration: underline;
}

.grid {
  display: grid;
  grid-template-columns: 10% 5% auto 5% 10%;
}

.grid * {
  grid-column: 3;
}

.breakout {
  grid-column: 2 / -2;
}

.card {
  border: 1px solid var(--highlight-color);
  box-shadow: 5px 20px 20px var(--highlight-color);
  padding: 1em;
}

.card--title {
  font-family: var(--sans-serif);
  font-size: var(--fs-subheading);
  font-weight: 400;
  margin-bottom: 0.5em;
  text-decoration: none;
  color: var(--font-color);
}

.card--title:hover,
.card--title:focus {
  text-decoration: underline;
}

.card--description {
  display: flex;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.card--description > .bar {
  margin-left: 1em;
  margin-right: 1em;
}

.card--subtitle {
  font-family: var(--sans-serif);
  font-size: var(--fs-subtle);
}

.card--tags {
  display: flex;
}

.card--tag {
  font-family: var(--sans-serif);
  font-size: var(--fs-subtle);
  font-style: italic;
}

.card--content {
  font-family: var(--serif);
  font-size: var(--fs-subtle);
}

.article--date {
  font-family: var(--sans-serif);
  font-size: var(--fs-subtle);
}

.article h1,
.article--title {
  font-family: var(--sans-serif);
  font-size: var(--fs-heading);
  font-weight: 400;
  display: flex;
  justify-content: center;
  color: var(--font-color);
}

.article h2 {
  font-family: var(--sans-serif);
  font-size: var(--fs-subheading);
  font-weight: 400;
  display: flex;
  justify-content: center;
  color: var(--font-color);
}

.article p,
p,
a,
li {
  font-family: var(--serif);
  line-height: 1.9;
  color: var(--font-color);
  text-wrap-style: pretty;
}

.article p {
  text-indent: 2em;
}

.article blockquote p {
  font-style: italic;
  font-size: var(--fs-subtle);
}