.nav-wrap,
footer {
  background: #222326;
}
.social-section {
  background: #111112;
  color: #fff;
  padding: 82px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.logo-link {
  height: 76px;
  gap: 12px;
}
.logo-mark-frame {
  position: relative;
  display: block;
  flex: 0 0 78px;
  width: 78px;
  height: 50px;
  overflow: hidden;
}
.logo-mark-frame img {
  position: absolute;
  width: 250px;
  height: 250px;
  max-width: none;
  left: -87px;
  top: -61px;
}
.brand-wordmark {
  display: grid;
  line-height: 1;
}
.brand-wordmark strong {
  color: #edc881;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .035em;
  white-space: nowrap;
}
.brand-wordmark small {
  margin-top: 7px;
  color: #edc881;
  font-size: .57rem;
  font-weight: 500;
  letter-spacing: .25em;
  white-space: nowrap;
}
.social-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: center;
}
.social-layout h2 {
  margin: 14px 0 0;
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.social-links {
  display: grid;
  gap: 12px;
}
.social-links a {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 78px;
  padding: 13px 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.035);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.social-links a:hover,
.social-links a:focus-visible {
  border-color: #c9a65c;
  background: rgba(201,166,92,.08);
  transform: translateX(4px);
}
.social-links a:focus-visible { outline: 2px solid #ead49c; outline-offset: 3px; }
.social-links a > span:last-child { display: grid; }
.social-links strong { font-size: 1rem; }
.social-links small { color: #9f9a91; font-size: .8rem; }
.social-icon {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border: 1px solid #c9a65c;
  color: #ead49c;
  font-family: "DM Sans", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}
@media (max-width: 850px) {
  .social-layout { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 560px) {
  .logo-link { height: 66px; gap: 8px; }
  .logo-mark-frame { flex-basis: 60px; width: 60px; height: 39px; }
  .logo-mark-frame img { width: 196px; height: 196px; left: -68px; top: -48px; }
  .brand-wordmark strong { font-size: .82rem; }
  .brand-wordmark small { font-size: .46rem; letter-spacing: .19em; margin-top: 5px; }
  .social-section { padding: 65px 0; }
  .social-links a { min-height: 72px; }
}