@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-300.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-italic-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-300.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-400.ttf) format('truetype');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/fraunces-normal-500.ttf) format('truetype');
}

:root { --serif: "Fraunces", Georgia, serif; }
:root h1, :root h2, :root h3, .world-title > strong, .resident-note strong {
  font-family: var(--serif);
  font-weight: 300;
}
/* Frame the supplied artwork without changing its pixels. */
a.wordmark.brand-logo, a.home-link.brand-logo {
  display: block;
  position: relative;
  width: 220px;
  height: auto;
  aspect-ratio: 1068 / 256;
  flex: 0 0 auto;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  mix-blend-mode: darken;
}
.brand-logo img {
  display: block;
  position: absolute;
  width: 115.9176%;
  max-width: none;
  height: auto;
  left: -8.2397%;
  top: -34.7656%;
}
a.home-link.brand-logo {
  mix-blend-mode: normal;
  background: #faf6ed;
  border-radius: 8px;
  backdrop-filter: none;
}
footer a.wordmark.brand-logo { width: 165px; }
@media (max-width: 1000px) {
  a.wordmark.brand-logo, a.home-link.brand-logo { width: 185px; }
}
@media (max-width: 720px) {
  a.wordmark.brand-logo, a.home-link.brand-logo { width: 160px; }
  .world-title { position: static; transform: none; margin-left: auto; }
  .world-title > strong { font-size: 20px; }
}
@media (max-width: 380px) {
  a.wordmark.brand-logo, a.home-link.brand-logo { width: 138px; }
  .world-title > strong { font-size: 18px; }
  .world-title > span { font-size: 6px; letter-spacing: 1px; }
}
footer .made-by {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 10px/1 'DM Sans', system-ui, sans-serif;
  color: #8c967f;
  white-space: nowrap;
}
footer .made-by-logo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #292f4c;
}
footer .made-by-mark { width: 21px; height: 13px; }
footer .made-by-mark path { fill: none; stroke-width: 5; stroke-linecap: round; }
footer .made-by-monday { font-weight: 500; letter-spacing: -0.2px; }
footer .made-by-logo b { font-weight: 800; margin-left: 2px; }
@media (max-width: 720px) {
  footer .made-by { width: 100%; order: 4; }
}
