/* Shared page chrome for every holding page: the logo component and the footer (from the showcase
   design). Self-contained colours, so it works with brand.css and the showcase alike. */
.lockup {
  display: block;
  inline-size: clamp(150px, 15vw, 210px);
  color: #3a2723;
  text-decoration: none;
}
.lockup-mark {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.site-footer {
  position: relative;
  overflow: hidden;
  margin-block-start: clamp(72px, 9vw, 128px);
  padding: clamp(56px, 7vw, 104px) max(24px, env(safe-area-inset-right, 0px)) 0
    max(24px, env(safe-area-inset-left, 0px));
  background: #d7482d;
  color: #fffae9;
  font-family: 'Manrope Variable', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
}
.site-footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 32px clamp(48px, 10vw, 160px);
}
.site-footer-cols div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.35;
}
.site-footer-cols span {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
/* The brand stays lowercase: no uppercase in the copyright line. */
.site-footer-small {
  font-size: 13px;
  font-weight: 400;
  opacity: 0.8;
}
.site-footer-cols span {
  margin-block-end: 6px;
}
.site-footer-small {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-block-start: clamp(48px, 6vw, 88px);
}
.site-footer-word {
  display: block;
  margin: clamp(10px, 1.5vw, 20px) 0 -3.4vw;
}
.footer-word {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer-cols a:hover {
    opacity: 0.7;
  }
}

/* The logo never shrinks inside a header row. */
.top .lockup {
  flex-shrink: 0;
}