@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200 900;
  font-display: fallback;
  src: url("../fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype");
}

/* Design tokens taken from the original WordPress global styles. */
:root {
  --base: #202124;
  --contrast: #e8eaed;
  --primary: #c29de1;
  --secondary: #876c3a;
  --tertiary: #303134;

  --content-size: 800px;
  --wide-size: 90vw;

  --spacing-20: calc(8px + 1.5625vw);
  --spacing-30: calc(12px + 1.5625vw);
  --spacing-40: calc(16px + 1.5625vw);
  --spacing-50: calc(20px + 1.5625vw);
  --spacing-60: calc(24px + 1.5625vw);
  --spacing-70: calc(28px + 1.5625vw);
  --spacing-80: calc(32px + 1.5625vw);

  --font-size-small: clamp(0.85rem, 0.85rem + ((1vw - 0.2rem) * 0.188), 1rem);
  --font-size-medium: clamp(1.1rem, 1.1rem + ((1vw - 0.2rem) * 0.375), 1.4rem);
  --font-size-large: clamp(1.999rem, 1.999rem + ((1vw - 0.2rem) * 1.035), 2.827rem);
  --font-size-x-large: clamp(2.827rem, 2.827rem + ((1vw - 0.2rem) * 1.464), 3.998rem);
  --font-size-xx-large: clamp(3.2rem, 3.2rem + ((1vw - 0.2rem) * 2.5), 5.2rem);
  --font-size-post-title: clamp(1.039rem, 1.039rem + ((1vw - 0.2rem) * 0.701), 1.6rem);
}

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

body {
  margin: 0;
  background-color: var(--base);
  color: var(--contrast);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-size-medium);
  line-height: 1.7;
  padding: var(--spacing-40) var(--spacing-70);
}

a {
  color: var(--contrast);
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
}

a:active {
  color: var(--secondary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--contrast);
  font-weight: 500;
  line-height: 1.4;
}

h1 {
  font-size: var(--font-size-xx-large);
  line-height: 1.1;
}

h2 {
  font-size: var(--font-size-x-large);
  line-height: 1.1;
}

h3,
h4 {
  font-size: var(--font-size-large);
}

h5 {
  font-size: var(--font-size-medium);
  font-weight: 700;
  line-height: 1.5;
}

h6 {
  font-size: var(--font-size-medium);
  text-transform: uppercase;
}

img {
  max-width: 100%;
  height: auto;
}

.svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Header ------------------------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-40);
  max-width: var(--wide-size);
  margin: 0 auto;
  padding-bottom: var(--spacing-40);
}

.site-header__logo img {
  display: block;
  width: 80px;
  height: auto;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--spacing-30);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-small);
}

.site-nav a {
  text-decoration: none;
}

.site-nav a:hover {
  text-decoration: underline;
}

/* Layout ------------------------------------------------------------------------- */
.site-main {
  max-width: var(--wide-size);
  margin: var(--spacing-50) auto var(--spacing-70);
}

.page-title {
  margin: 0 0 var(--spacing-60);
  font-size: var(--font-size-x-large);
  line-height: 1.1;
}

/* Post grid ---------------------------------------------------------------------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-card__image-link {
  display: block;
}

.post-card__image {
  display: block;
  width: 100%;
  height: clamp(15vw, 30vh, 400px);
  object-fit: cover;
  filter: url("#duotone");
}

.post-card__title {
  margin: 1.25rem 0;
  font-size: var(--font-size-post-title);
  font-weight: 400;
  line-height: 1.4;
}

.post-card__title a {
  text-decoration: none;
}

.post-card__title a:hover {
  text-decoration: underline;
}

.post-card__excerpt {
  font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.391), 19px);
}

.post-card__more {
  margin: 0;
  font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.391), 19px);
}

.post-card__date {
  margin: var(--spacing-20) 0 0;
  font-size: var(--font-size-small);
  font-weight: 400;
}

.post-card__date a {
  text-decoration: none;
}

.post-card__date a:hover {
  text-decoration: underline;
}

/* Pagination --------------------------------------------------------------------- */
.pagination {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-60);
  font-size: 1.5rem;
}

.pagination__link {
  text-decoration: none;
}

.pagination__link.is-disabled {
  visibility: hidden;
}

/* Single post -------------------------------------------------------------------- */
.post__image {
  display: block;
  width: 100%;
  max-width: var(--content-size);
  margin: calc(-1 * var(--spacing-50)) auto var(--spacing-50);
}

.post__title {
  max-width: var(--content-size);
  margin: 1.25rem auto var(--spacing-40);
  font-size: var(--font-size-large);
  font-weight: 400;
  line-height: 1.4;
}

.post__content {
  max-width: var(--content-size);
  margin: 0 auto;
  font-size: clamp(0.984rem, 0.984rem + ((1vw - 0.2rem) * 0.645), 1.5rem);
}

.post__content h2,
.post__content h3,
.post__content h4 {
  margin: var(--spacing-50) 0 var(--spacing-30);
}

.post__content p {
  margin: 0 0 1.4em;
}

.post__content figure {
  margin: var(--spacing-50) 0;
}

.post__content figcaption {
  font-size: var(--font-size-small);
  text-align: center;
}

.post__content hr {
  width: 100px;
  border: none;
  border-top: 2px solid var(--tertiary);
  margin: var(--spacing-60) auto;
}

.post__content ul,
.post__content ol {
  margin: 0 0 1.4em;
  padding-left: 1.3em;
}

.post__content li {
  margin-bottom: 0.4em;
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-30);
  max-width: var(--content-size);
  margin: var(--spacing-60) auto 0;
  font-size: var(--font-size-small);
}

/* Page --------------------------------------------------------------------------- */
.page__title {
  max-width: var(--content-size);
  margin: 0 auto var(--spacing-40);
  font-size: var(--font-size-x-large);
  font-weight: 400;
  line-height: 1.1;
}

.page__content {
  max-width: var(--content-size);
  margin: 0 auto;
}

.page__content p {
  margin: 0 0 1.4em;
}

/* Term / archive lists ------------------------------------------------------------ */
.term-list,
.archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.term-list li {
  margin-bottom: var(--spacing-20);
}

.archive-list dt {
  font-size: var(--font-size-small);
  opacity: 0.75;
}

.archive-list dd {
  margin: 0 0 var(--spacing-30);
}

/* Footer ------------------------------------------------------------------------- */
.site-footer {
  background-color: #00000008;
  margin: 0 calc(-1 * var(--spacing-70));
  padding: var(--spacing-50) var(--spacing-70);
}

.site-footer__inner {
  max-width: var(--wide-size);
  margin: 0 auto;
}

.site-footer__col {
  margin-bottom: var(--spacing-60);
}

.site-footer__heading {
  margin: 0 0 var(--spacing-20);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.site-footer__social {
  margin: 0;
  font-size: var(--font-size-small);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-30);
}

.site-footer__title {
  font-size: var(--font-size-small);
  font-weight: 600;
  text-decoration: none;
}

.site-footer__title:hover {
  text-decoration: underline;
}

.site-footer__feed {
  font-size: var(--font-size-small);
}

/* Responsive --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  body {
    padding: var(--spacing-40) var(--spacing-40);
  }

  .site-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .site-nav ul {
    justify-content: flex-start;
  }

  .post-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer {
    margin: 0 calc(-1 * var(--spacing-40));
    padding: var(--spacing-50) var(--spacing-40);
  }
}