:root {
  /* -- variables for colors -- */
  --background: #14110c;
  --text--header: #f5e7d7;
  --text--meta1: #c2b3a3;
  --text--meta2: #7a6f62;
  --text--meta3: #7a6f62;
  --text--highligt: #f5e7d7;
  --text: #c2b3a3;
}

@font-face {
  font-family: NeueHaasGrotDisp;
  font-weight: normal;
  src: local("NeueHaasGrotDisp")
    url("assets/fonts/NeueHaasGrotDisp-45Light.otf") format("opentype");
}

@font-face {
  font-family: NeueHaasGrotDisp;
  font-weight: bold;
  src: local("NeueHaasGrotDisp") url("assets/fonts/NeueHaasGrotDisp-75Bold.otf")
    format("opentype");
}

@font-face {
  font-family: NeueHaasGrotDisp;
  font-weight: 300;
  src: local("NeueHaasGrotDisp") url("assets/fonts/NeueHaasGrotDisp-35Thin.otf")
    format("opentype");
}

@font-face {
  font-family: NeueHaasGrotTextR;
  font-weight: normal;
  src: local("NeueHaasGrotTextR")
    url("assets/fonts/NeueHaasGrotTextRound-55Roman.otf") format("opentype");
}

@font-face {
  font-family: NeueHaasGrotTextR;
  font-weight: medium;
  src: local("NeueHaasGrotTextR")
    url("assets/fonts/NeueHaasGrotTextRound-65Medium.otf") format("opentype");
}

body,
html {
  background-color: var(--background);
  font-size: 17px;
  font-family: "NeueHaasGrotTextR", sans-serif;
  margin: 0;
  padding: 0;
}

img,
picture {
  max-width: 100%;
  display: block;
}

ul > li,
ol > li,
p {
  color: var(--text);
  font-family: "NeueHaasGrotTextR", sans-serif;
  font-weight: 400;
  line-height: 1.5rem;
  margin: 0;
  opacity: 0.8;
}

p + p {
  margin-top: 0.75rem;
}

p > b,
p > a {
  color: var(--text--highligt);
}

h1,
h2,
h3,
h4,
h5 {
  color: var(--text--header);
  font-family: "NeueHaasGrotDisp", sans-serif;
  margin: 0;
}

h1 {
  font-weight: 600;
  font-size: 2rem;
  line-height: 112%;
}

h2 {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 117%;
}

h2 + p {
  margin-top: 1.25rem;
}

.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
}

.container {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 67.75em;
  padding: 0 1.25rem;
  position: relative;
  width: 100%;
}

header {
  padding: 2.5625rem 0;
}

.logo-container {
  align-items: center;
  display: flex;
  gap: 0.375rem;
}

.logo-container > h2 {
  color: #7a6f62;
}

.logo {
  height: 1.875rem;
}

.page__hero {
  border-radius: 0.5rem;
  width: 100%;
}

.page__content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2.5rem;
  max-width: 44.75rem;
  width: 100%;
}

.page__content img {
  max-width: 44.75rem;
  width: 100%;
}

.page__details {
  align-items: center;
  display: flex;
}

.page__details > p + p {
  margin-top: 0;
}

p + img,
img + img {
  margin-top: 1.25rem;
}

img + .meta2 {
  margin-top: 0.75rem;
}

.meta1,
.meta2 {
  color: var(--text--meta1);
  font-family: "NeueHaasGrotTextR", sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0px;
}

.meta2 {
  color: var(--text--meta2);
  font-weight: 400;
}

.meta3 {
  color: var(--text--meta3);
  font-family: "NeueHaasGrotTextR", sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1rem;
  letter-spacing: 0px;
}

footer {
  align-items: flex-start;
  border-top: 0.5px solid #524a41;
  display: flex;
  gap: 1.25rem;
  margin-top: 7rem;
  padding: 1.5rem 0;
}