@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0&display=swap");

.material-symbols,
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    "opsz" 24,
    "wght" 400,
    "FILL" 0,
    "GRAD" 0;
}

:root {
  --display: "Archivo Black", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-zine: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Source Serif 4", Georgia, Cambria, "Times New Roman", serif;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:
    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    monospace;
  --logo: var(--display);
  --type-root: 1;
  --type-scale-base: calc(1rem * var(--type-root));
  --type-line-tight: 1.08;
  --type-line-normal: 1.55;
  --type-line-relaxed: 1.72;
  --step--1: clamp(0.86rem, 0.82rem + 0.2vw, 0.94rem);
  --step-0: clamp(1rem, 0.95rem + 0.28vw, 1.12rem);
  --step-1: clamp(1.18rem, 1.08rem + 0.55vw, 1.42rem);
  --step-2: clamp(1.4rem, 1.22rem + 0.9vw, 1.86rem);
  --step-3: clamp(1.72rem, 1.42rem + 1.35vw, 2.5rem);
  --step-4: clamp(2.1rem, 1.7rem + 2.1vw, 3.45rem);
  --step-5: clamp(2.6rem, 1.95rem + 3.2vw, 4.9rem);
}

body,
button,
input,
select,
textarea {
  font-family: var(--ui);
}

.entry-content,
.prose,
.archive-description,
.comment-content,
.wp-block-post-content {
  font-family: var(--body);
}

.site-title,
.entry-title,
.page-title,
.zine-title-compact11,
.zine-title-compact115,
.zine-e-cal-title,
.related-posts-title,
.section-title,
.home-panel__title {
  font-family: var(--display);
  letter-spacing: -0.03em;
}

.caption,
.entry-meta,
.topnav a,
.section-switcher__item,
.chip,
button,
.btn {
  font-family: var(--ui);
}