* {
  box-sizing: border-box
}

:root {
  --font-size--normal: 16px;
  --font-size--huge: 42px;
  --color--dark: #222;
  --color--light: #eeedea;
  --color--orange: #f7ceb8;
  --back-color: var(--color--light);
  --front-color: var(--color--dark);
  --hover-color: #7e481c;
  --font-size--small: 16px;
  --font-size--medium: 28px;
  --font-size--large: 32px;
  --font-size--x-large: 50px;
  --font-size--normal: 20px;
  --font-size--huge: 100px;
  --font-family--fraunces: "Fraunces", serif;
  --font-family--source-serif-pro: "Source Serif Pro", serif;
  --font-family--figtree: "Figtree", sans-serif;
  --font-family--outfit: "Outfit", sans-serif;
  --font-family--lora: "Lora", serif;
  --spacing--baseline: 16px;
  --spacing--block: 3rem;
  --spacing--text: 1rem;
  --block-gap: 24px;
  --global--content-size: 740px;
  --global--wide-size: 1140px;
}

body {
  background-color: var(--back-color);
  color: var(--front-color);
  font-family: var(--font-family--fraunces);
  font-size: var(--font-size--normal);
  font-weight: 400;
  line-height: 1.7;
  padding: 0;
  margin: 0;
}
.negative {
  --front-color: var(--color--light);
  --back-color: var(--color--dark);
}
.studio {
  --global--wide-size: 1400px;
}

html {
  height: 100%
}

a {
  text-decoration: none;
  color: var(--front-color)
}
a:hover {
  color: var(--hover-color);
}

ul {
  padding: 0;
}
li {
  list-style: none;
}
h2 {
  text-align: center;
  line-height: 100%;
  font-size: var(--font-size--x-large);
}
h3 {
  text-align: left;
  line-height: 100%;
}
.studio h2 {
    font-size: var(--font-size--huge);
    text-align: left;
}
.studio h3 {
    font-size: var(--font-size--x-large);
}
figure {
  margin: 0;
}
.button {
    background-color: var(--front-color);
    color: var(--back-color);
    padding: 0 10px;
    border-radius: 2px;
}
.button:hover {
    color: var(--color--orange);
}
.studio .button {
    background-color: var(--back-color);
    color: var(--front-color);
}

@font-face {
    font-family: Fraunces;
    font-style: normal;
    font-weight: 160 600;
    font-display: swap;
    src: url('/assets/fonts/fraunces/Fraunces-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
    font-stretch: normal;
}

@font-face {
    font-family: Fraunces;
    font-style: italic;
    font-weight: 160 600;
    font-display: swap;
    src: url('/assets/fonts/fraunces/Fraunces-Italic-VariableFont_SOFT,WONK,opsz,wght.ttf') format('truetype');
    font-stretch: normal;
}

@font-face {
    font-family: "Source Serif Pro";
    font-style: normal;
    font-weight: 200 900;
    font-display: fallback;
    src: url('/assets/fonts/source-serif-pro/SourceSerif4Variable-Roman.ttf.woff2') format('woff2');
    font-stretch: normal;
}

@font-face {
    font-family: "Source Serif Pro";
    font-style: italic;
    font-weight: 200 900;
    font-display: fallback;
    src: url('/assets/fonts/source-serif-pro/SourceSerif4Variable-Italic.ttf.woff2') format('woff2');
    font-stretch: normal;
}

@font-face {
    font-family: Figtree;
    font-style: normal;
    font-weight: 300 900;
    font-display: fallback;
    src: url('/assets/fonts/figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-stretch: normal;
}

@font-face {
    font-family: Figtree;
    font-style: italic;
    font-weight: 300 900;
    font-display: fallback;
    src: url('/assets/fonts/figtree/Figtree-Italic-VariableFont_wght.ttf') format('truetype');
    font-stretch: normal;
}

@font-face {
    font-family: Outfit;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/assets/fonts/outfit/Outfit-VariableFont_wght.ttf') format('truetype');
    font-stretch: normal;
}

@font-face {
    font-family: Lora;
    font-style: normal;
    font-weight: 400 700;
    font-display: fallback;
    src: url('/assets/fonts/lora/Lora-VariableFont_wght.ttf') format('truetype');
    font-stretch: normal;
}

@font-face {
    font-family: Lora;
    font-style: italic;
    font-weight: 400 700;
    font-display: fallback;
    src: url('/assets/fonts/lora/Lora-Italic-VariableFont_wght.ttf') format('truetype');
    font-stretch: normal;
}