/* ============================================================================
   Site chrome — the footer that every page shares.

   This exists because the footer had drifted into two versions. The main pages
   used .site-footer from styles.css; the case-study pages, which are
   self-contained and don't link styles.css, had a hand-rolled copy with a much
   larger serif headline, no "Let's talk" button and an extra Experience link.
   They looked like two different sites.

   Every page links THIS file and uses the markup in the block comment below.
   Nothing else defines footer styles. Colours are literal rather than var()
   references so the file works on a page with its own unrelated token set.

   Canonical markup:

     <footer class="site-footer">
       <div class="wrap">
         <div class="footer-top">
           <h2>Complex product problem?<br>Let's make it clearer.</h2>
           <a class="btn" href="/contact.html">Let's talk &rarr;</a>
         </div>
         <div class="footer-links">
           <a href="/work.html">Work</a>
           <a href="/about.html">About</a>
           <a href="/contact.html">Contact</a>
           <a href="https://www.linkedin.com/in/grace-folorunsho-aa196017"
              target="_blank" rel="noopener">LinkedIn &#8599;</a>
         </div>
         <div class="footer-bottom">
           <span>Grace Folorunsho &middot; Senior Product Designer</span>
           <span>Greater London &middot; 2026</span>
         </div>
       </div>
     </footer>
   ========================================================================= */

footer.site-footer {
  background: #173f31;
  color: #eaf3ec;
  padding: 56px 0 34px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

footer.site-footer .wrap {
  width: auto;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 5vw;
}

footer.site-footer h2 {
  margin: 0;
  color: #ffffff;
  font-family: "Fraunces", serif;
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  max-width: 16ch;
}

footer.site-footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 34px;
}

footer.site-footer .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 13px 22px;
  background: #5b3c30;
  color: #ffffff;
  font-family: "DM Sans", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

footer.site-footer .btn:hover {
  background: #315b47;
  transform: translateY(-1px);
}

footer.site-footer .btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

footer.site-footer .footer-links {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  font-size: 14px;
}

footer.site-footer .footer-links a {
  color: #eaf3ec;
  text-decoration: none;
  opacity: 0.85;
}

footer.site-footer .footer-links a:hover {
  opacity: 1;
  text-decoration: underline;
}

footer.site-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-top: 22px;
  margin-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12.5px;
  opacity: 0.7;
}

@media (max-width: 560px) {
  footer.site-footer { padding: 42px 0 28px; }
  footer.site-footer .footer-top { padding-bottom: 26px; }
  footer.site-footer .footer-bottom { display: block; line-height: 1.9; }
  footer.site-footer .footer-bottom span { display: block; }
}

/* ---------- Figure zoom overlay (see assets/zoom.js) ---------- */

.zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vmin;
  background: rgba(18, 20, 18, 0.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow: auto;
  cursor: zoom-out;
}

.zoom-overlay[hidden] { display: none !important; }

.zoom-overlay img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  margin: auto;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  cursor: default;
}

.zoom-close {
  position: fixed;
  top: 18px;
  right: 20px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  font: 400 26px/1 "DM Sans", sans-serif;
  cursor: pointer;
}

.zoom-close:hover { background: rgba(255, 255, 255, 0.26); }
.zoom-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }