/* The site footer for the pages that don't load site.css (Insider List, the
   guides, Henry, Introduction). Those pages have their own type and resets, so
   this stands alone and only styles .site-footer. Keep it matching .footer in
   site.css. It is a div so the pages' own footer{} rules can't reach it. */

.site-footer {
  background: #1c1512 url(/assets/footer-boucle.jpg) center / cover no-repeat;
  color: rgba(247, 245, 242, 0.82);
  padding: clamp(56px, 6vw, 88px) 0 40px;
  font-family: 'Jost', system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  text-align: left;
}
/* Insider pages pad the body, so the footer steps back out to reach the edges. */
.site-footer--inset {
  margin: 72px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) -72px calc(-1 * max(16px, env(safe-area-inset-left, 0px)));
}
.site-footer__shell { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 64px); }
.site-footer a { color: rgba(247, 245, 242, 0.82); text-decoration: none; }
.site-footer a:hover { color: #F7F5F2; }
.site-footer__lockup { display: block; line-height: 1; }
.site-footer__name { display: block; font-size: 19px; letter-spacing: 0.42em; text-transform: uppercase; font-weight: 300; color: #F7F5F2; }
.site-footer__sub { display: block; margin-top: 6px; font-size: 8px; letter-spacing: 0.34em; text-transform: uppercase; font-weight: 400; color: #9C8A73; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 26px; margin: 30px 0; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.site-footer__base { border-top: 1px solid rgba(247, 245, 242, 0.32); padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 30px; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; }
.site-footer__trading { margin: 14px 0 0; font-size: 12px; color: rgba(247, 245, 242, 0.6); }

@media (pointer: coarse) {
  .site-footer__nav a, .site-footer__base a { position: relative; }
  .site-footer__nav a::after, .site-footer__base a::after { content: ""; position: absolute; inset: -12px -10px; }
}

/* These pages also print as documents; the footer stays on screen. */
@media print {
  .site-footer { display: none; }
}