/* ==========================================================================
   wosh.productions — shared site footer
   --------------------------------------------------------------------------
   This is the ONLY definition of the black wordmark footer. It used to be
   copy-pasted into every page, which is how the footer drifted: pages ended
   up with the wordmark in a fallback font, a blank copyright year, link rows
   at three different heights, and a footer inset by the article gutter.
   Change footer styling here and nowhere else.

   Linked immediately before </head> so it wins over any older footer rules
   still sitting in a page's inline <style>.

   --------------------------------------------------------------------------
   Two things a page may need to declare for itself:

   1. --footer-bleed
      If the page's <body> has horizontal padding, the footer would be inset
      by it and show gutters instead of spanning the viewport. Set this to
      that padding and the footer bleeds back out to the edges:

          :root { --footer-bleed: 5vw; }

      Prefer putting the gutter on a content wrapper instead of <body>; then
      nothing is needed here.

   2. The footer markup itself, which lives in each page's HTML. Keep the
      structure below intact:

          footer.site-footer
            .footer-brand-container > .footer-brand
            .footer-grid
              .footer-col.tagline-col > .footer-tagline
                                      > .footer-contact-info > .contact-location
              .footer-col.links-col   > .footer-col-title
                                      > .footer-links-list > li > a
            .footer-bottom > .footer-copy-text  (with <span id="current-year">)
                           > .footer-back-to-top

      #current-year needs one line of script on the page, or the year renders
      blank:  document.getElementById('current-year').textContent =
              new Date().getFullYear();

   --------------------------------------------------------------------------
   A warning before you tidy up. Around a dozen pages still carry an older
   `.site-footer` or `.footer-brand` rule in their inline <style> — leftovers
   from a previous centred footer design. They LOOK dead because this file
   overrides them, but they are not: they also set font-size, color, border-top
   and margin, which this file does not declare, so those values still inherit
   into the footer. Deleting them changes rendering on those pages (verified:
   /blog/ footer text goes 13.6px -> 16px, 30% white -> white). If you want
   them gone, decide what the footer's inherited font-size and color should be,
   set them here, and re-check the pages that had the old rule.
   ========================================================================== */

@font-face {
  font-family: 'Google Sans';
  src: url('/Google_Sans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.site-footer {
  /* The footer owns its typography. Article pages set body line-height to
     1.6-1.8 and some tool pages use a different typeface entirely; without
     these two the footer inherits them and stops matching the rest of the
     site. */
  font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: normal;

  text-align: left;
  position: relative;
  /* width:auto (not 100%) so the negative bleed margins widen the box rather
     than just shifting it. With no bleed this is identical to width:100%. */
  width: auto;
  margin-left: calc(-1 * var(--footer-bleed, 0px));
  margin-right: calc(-1 * var(--footer-bleed, 0px));
  background-color: #000000;
  padding: 100px 8vw 40px 8vw;
  padding-bottom: calc(40px + env(safe-area-inset-bottom));
  scroll-snap-align: start;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-brand-container {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 60px;
}

.footer-brand {
  font-size: clamp(3.5rem, 9vw, 12rem);
  font-weight: 500;
  color: #ffffff;
  letter-spacing: -0.03em;
  text-transform: lowercase;
  line-height: 0.9;
  user-select: none;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 80px;
}

.footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.footer-tagline {
  font-size: 1.15rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 24px;
  font-weight: 300;
  max-width: 480px;
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-email {
  font-size: 1.1rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s ease;
  position: relative;
  display: inline-block;
}

.contact-email::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: bottom right;
  /* fallback: --transition-ease is only defined on some pages */
  transition: transform 0.3s var(--transition-ease, ease);
}

.contact-email:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.contact-location {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.footer-col-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 20px 0;
  font-weight: 600;
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links-list li {
  /* article CSS sets li margin/font-size for prose; the footer must not
     inherit either, or the link rows grow taller on those pages */
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: normal;
}

.footer-links-list a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 350;
  transition: color 0.3s ease, transform 0.3s ease;
  display: inline-block;
}

.footer-links-list a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-copy-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  font-weight: 300;
}

.footer-back-to-top {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.3s ease;
  display: flex;
  align-items: center;
}

.footer-back-to-top:hover {
  color: #ffffff;
}

@media (max-width: 1024px) {
  .site-footer {
    padding: 60px 6vw 30px 6vw;
    min-height: auto;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
  }

  .footer-col.tagline-col {
    grid-column: span 2;
    margin-bottom: 20px;
  }

  /* floor kept low enough that the wordmark still fits a 320px viewport */
  .footer-brand {
    font-size: clamp(2rem, 10vw, 6rem);
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 50px 5vw 30px 5vw;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-col.tagline-col {
    grid-column: span 1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
