@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/chivo-light.ttf") format("truetype");
}

@font-face {
  font-family: "Chivo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/chivo-regular.ttf") format("truetype");
}

@font-face {
  font-family: "Chivo";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/chivo-light-italic.ttf") format("truetype");
}

@font-face {
  font-family: "Volkhov";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/volkhov-italic.ttf") format("truetype");
}

:root {
  /* Original palette retained for the foundation review. Contrast is the next design task. */
  --color-background: #f9f7e8;
  --color-text: #222;
  --color-intro: #61bfad;
  --color-muted: #bfbda9;
  --color-link: #045a5b;
  --color-focus: #4f3a4b;
  --color-greeting: #ea6a69;
  --page-gutter: 1.40625rem;
  font-family: "Chivo", sans-serif;
  font-weight: 300;
  color: var(--color-text);
  background: var(--color-background);
}

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

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}

a { color: var(--color-link); text-underline-offset: 0.12em; }
a:hover { color: var(--color-focus); }
a:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 5px; }

.skip-link {
  position: absolute;
  inset-block-start: 0.75rem;
  inset-inline-start: var(--page-gutter);
  z-index: 1;
  padding: 0.5rem 0.75rem;
  color: var(--color-background);
  background: var(--color-link);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; color: var(--color-background); }

.intro-screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

.site-header {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 1.875rem var(--page-gutter);
}
.site-name {
  margin: 0 0 0.3125rem;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.15;
  text-transform: uppercase;
}
.site-name a { color: var(--color-intro); text-decoration: none; }
.site-tagline {
  margin: 0 0 0.1875rem;
  color: var(--color-muted);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.15;
}

.intro {
  flex-shrink: 0;
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.intro p { margin: 0 0 0.9375rem; color: var(--color-intro); }
.intro a { font-weight: 400; }
.intro .greeting {
  color: var(--color-greeting);
  font-family: "Volkhov", Georgia, serif;
  font-size: 1.75rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}
.intro-statement {
  margin: 0 0 0.9375rem;
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1.4;
}
.intro-emphasis {
  display: inline-block;
  max-inline-size: 100%;
  color: var(--color-link);
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 1.875rem var(--page-gutter);
}
.copyright { margin: 1rem 0; color: var(--color-muted); opacity: 0.5; }
.social-links { display: flex; flex-wrap: wrap; }
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: var(--color-muted);
  opacity: 0.5;
}
.social-links a:hover, .social-links a:focus-visible { color: var(--color-focus); opacity: 1; }
.social-links svg { fill: currentColor; }

@media (min-width: 37.5rem) {
  :root { --page-gutter: 5.625rem; }
  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-block-size: 9.375rem;
  }
  .site-name { margin-block-end: 0; }
  .site-tagline { font-size: 1.125rem; }
  .intro { max-inline-size: 55rem; }
  .intro p, .intro-statement { margin-block-end: 1.875rem; }
  .intro .greeting, .intro-statement { font-size: 2.25rem; }
}