@import url("fonts.css");

/*── RESET & BOX SIZING ─────────────────────────────────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

/*── BASE TYPOGRAPHY ───────────────────────────────────────────────────────*/
:root {
  --background: #fffef8;
  --foreground: #333;
  --background-secondary: #f7f1e5;
  --background-section: #fefefe;
  --accent-1: #d8232a;
  --accent-2: #1a1a1a;
  --accent-3: #525e3d;
  --highlight: #ea4271;
  --golden-ratio: 1.618;
  --block-space: 3.236rem;
  --page-width: calc(100vw / var(--golden-ratio));
  --font-size: clamp(13pt, 1.5vw, 1.3125rem);
  --heading-size: clamp(21pt, 3vw, 3rem);
  --discourse-font-size: clamp(13pt, 1.5vw, 1.125rem);
  --leading: calc(var(--font-size) * 1.6);
  --heading-leading: calc(var(--heading-size) * 1.3);
  --body-measure: clamp(45ch, 62ch, 75ch);

}

html {
  font-size: 100%;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Switzer";
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  margin: 0 auto;
  width: 89%;
  padding: calc(var(--golden-ratio) * .125rem);
}

strong, bold {
  font-weight: normal;
}

h1 {
  font-family: "VHS";
  font-weight: normal;
  font-size: var(--heading-size);
  color: #222;
}

p {
  font-family: "Vercetti";
  margin-left: calc(var(--block-space) / 8);
}