/* The ensostudio.net footer (design-brief 2.11) on a public piece page.
   A piece page wears Direction A (enso.css), whose own footer is the sheet's
   umber band; on the site it closes with the site's walnut footer instead, so
   the doors are one tap away. These are site.css's footer rules at their
   final, cascaded values, scoped to the footer so nothing reaches the piece
   above it. The site tokens it needs ride on the footer itself. */

.footer {
  --espresso: #482D23;
  --light: #FAF6ED;
  --walnut-base: #3B2619;
  --focus: var(--gold);
  position: relative;
  /* The torn edge rises 23 px above the footer: keep it clear of the plates
     navigation that ends a piece page. */
  margin-top: 56px;
  padding: 42px 0 30px;
  background-color: var(--walnut-base);
  background-image: url("site/img/walnut-ground-1280.jpg");
  background-image: image-set(url("site/img/walnut-ground-1280.avif") type("image/avif"), url("site/img/walnut-ground-1280.jpg") type("image/jpeg"));
  background-position: center;
  background-size: cover;
  color: var(--light);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
}
.footer p { margin: 0; }
.footer a { color: inherit; text-underline-offset: 6px; }
.footer a:hover { text-decoration-thickness: 2px; }
.footer a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.footer img { display: block; max-width: 100%; }
.footer .wrap { width: min(100% - 48px, 1180px); margin-inline: auto; }
.footer .torn-top { position: absolute; top: -23px; left: 0; width: 100%; height: 24px; fill: var(--espresso); }
.footer-top { display: flex; justify-content: space-between; align-items: start; gap: 28px; }
.footer-mark { width: 110px; height: 110px; object-fit: contain; }
.footer-links { display: grid; grid-template-columns: 1fr; gap: 12px; font-family: var(--sans); font-size: 14px; }
.footer-links a { padding: 8px 0; min-height: 44px; text-decoration: none; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 25px;
  border-top: 1px solid rgb(249 245 236 / .28);
  margin-top: 36px;
  padding-top: 20px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: .05em;
}
.footer-quiet a { text-decoration: none; }
.footer-quiet a:hover { text-decoration: underline; }

@media (min-width: 760px) {
  .footer { padding-top: 55px; }
  .footer-mark { width: 130px; height: 130px; }
  .footer-links { grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
}
@media (min-width: 1280px) {
  .footer { background-image: url("site/img/walnut-ground-2000.jpg"); background-image: image-set(url("site/img/walnut-ground-2000.avif") type("image/avif"), url("site/img/walnut-ground-2000.jpg") type("image/jpeg")); }
}
@media print { .footer { display: none; } }