/* ============================================================
   SILICA WORKS - footer
   ------------------------------------------------------------
   The parallax is pure CSS. The footer is position: sticky at
   bottom: 0 with z-index: 0, so it parks at the base of the
   viewport while the page's own sections - which sit at a
   higher z-index over an opaque background - scroll up and
   over it. No JS, no ScrollTrigger.
   ============================================================ */

/* The sections above need an opaque background and a layer of
   their own, or the footer shows through them instead of being
   covered. */
.page {
  position: relative;
  z-index: 1;
  background: var(--sw-paper);
  /* The parallax means .page's bottom edge travels down over the
     footer as you scroll, and an opaque white edge reads as a hard
     line sweeping across the green. Softening it has to be done to
     the white itself - painting a white-to-transparent gradient on
     top of an already-white surface shows nothing - so the last
     stretch of the layer is masked out, letting the footer bleed
     up through it.

     The mask is on .page rather than a pseudo-element because it
     is .page's own background that needs to go transparent.
     Percentages are of .page's full height, which is many
     viewports tall, so the ramp is given in absolute units to keep
     it the same length whatever the page grows to. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 16rem),
    rgba(0, 0, 0, 0.85) calc(100% - 11rem),
    rgba(0, 0, 0, 0.4) calc(100% - 5rem),
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 16rem),
    rgba(0, 0, 0, 0.85) calc(100% - 11rem),
    rgba(0, 0, 0, 0.4) calc(100% - 5rem),
    rgba(0, 0, 0, 0) 100%
  );
}

.footer {
  --fg: #14140f;
  /* The page's accent green - the same token the draggable pills,
     the CTA underline and the thread's pulse use. The foreground
     stays full ink: the accent is a light yellow-green, so dark
     type on it reads at a stronger contrast than the white
     background it replaces, and every rule below that paints in
     var(--fg) follows automatically. */
  background-color: var(--sw-accent);
  color: var(--fg);
  width: 100%;
  padding: 4em 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  position: sticky;
  bottom: 0;
  z-index: 0;
}

/* Still under .page, nowhere near being uncovered: not painted at
   all. js/menu.js sets this from .page's bottom edge, a good margin
   before any of the footer can show. See the note there. */
.footer.is-buried {
  visibility: hidden;
}

/* White wash on the footer's own top edge, working with the mask
   on .page above. The mask clears .page's white so the footer
   shows through it; this softens the green on the footer's side
   of that join too, so the top of the footer reads as white
   settling into accent rather than accent starting at full
   strength the moment the page clears it.

   Painted on the footer rather than on .page because .page is
   masked out here - anything drawn in that strip would be masked
   away with it. Absolutely positioned so it stays out of the
   footer's flex flow and cannot push the rows down. */
.footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  /* Roughly the length of .page's mask ramp, so the two sides of
     the join resolve over the same distance. */
  height: 16rem;
  /* The paper spelled out at zero alpha for the far stop - a bare
     `transparent` interpolates through transparent black in some
     engines and greys the middle of the ramp. */
  background: linear-gradient(
    to bottom,
    #f4f4f2 0%,
    rgba(244, 244, 242, 0.6) 35%,
    rgba(244, 244, 242, 0.2) 68%,
    rgba(244, 244, 242, 0) 100%
  );
  /* Decorative, and it lies over the contact row - it must not
     swallow clicks on the mail link beneath it. */
  pointer-events: none;
  z-index: 0;
}

/* The footer's rows sit above the wash rather than under it, or
   the top row would read as washed out. */
.footer-row {
  position: relative;
  z-index: 1;
}

.footer ::selection {
  background: #14140f;
  color: #fff;
}

.footer ::-moz-selection {
  background: #14140f;
  color: #fff;
}

/* ------------------------------------------------------------
   Row 1 - contact left, nav right
   ------------------------------------------------------------ */
.footer-row--top {
  display: flex;
  justify-content: space-between;
  gap: 4em;
}

.footer-contact,
.footer-nav {
  flex: 1;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  justify-content: space-between;
}

.footer-contact h3 {
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: 4vw;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  text-transform: uppercase;
}

.footer-tagline {
  /* The page's display accent, the same hand the hero blurb and the
     "Who we are" mark set (css/intro.css, css/slider.css). The footer
     heading above it is the only other display type on this panel, so
     the tagline joining that hand ties the two together rather than
     dropping to body copy under a display heading. */
  font-family: "Shadows Into Light", "Inter Tight", cursive;
  /* A light handwriting face reads small at a given size, so this runs
     larger than the body copy it replaced. */
  font-size: clamp(17px, 1.65vw, 23px);
  /* Positive tracking and a hair of stroke, as on every other setting
     of this face: the face ships one weight, so the stroke is what
     carries any weight at all - font-weight would synthesize a fake
     bold. Matching .sw-intro-blurb's running-text values, not the
     heavier ones the one-line marks use. */
  letter-spacing: 0.035em;
  -webkit-text-stroke: 0.018em currentColor;
  /* Tighter than the 1.8 body copy wanted: the face swings descenders
     low, so 1.8 opened the two lines into separate thoughts. */
  line-height: 1.55;
  font-weight: 400;
  /* A softened ink rather than the old #55554e grey. That grey was
     mixed toward a white background; on the accent green it reads
     as washed-out and muddy rather than quiet. Taking the footer's
     own ink down to 72% keeps the tagline subordinate to the
     heading while staying in the same colour family as everything
     else on this panel. */
  color: color-mix(in srgb, var(--fg) 72%, var(--sw-accent));
  margin-bottom: 0.5em;
}

/* The cursor's trailing label, in white. That tag cuts TWO opposite
   corners - top-left and bottom-right - rather than bevelling all
   four the way the nav bar does, which gives it its diagonal lean.
   The same polygon is used here, at the same 11px, so the button
   and the label read as the same object.

   A flat fill with no outline, again like the label: the shape is
   what identifies it, so a border would only blunt the corners. */
.footer-btn {
  --btn-notch: 11px;

  text-decoration: none;
  text-transform: uppercase;
  display: block;
  width: max-content;
  padding: 0.9em 1.5em;
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background-color: #fff;
  color: var(--fg);

  clip-path: polygon(
    var(--btn-notch) 0,
    100% 0,
    100% calc(100% - var(--btn-notch)),
    calc(100% - var(--btn-notch)) 100%,
    0 100%,
    0 var(--btn-notch)
  );

  /* Only colour moves. The old lift animated transform and
     box-shadow, but a clipped box cannot carry a drop shadow - the
     clip removes it along with everything else outside the path. */
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Inverts to solid ink, the way the cursor label inverts to the
   accent when it goes active. */
.footer-btn:hover {
  background-color: var(--fg);
  color: #fff;
}

/* Nav right */
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.footer-nav-item {
  width: 50%;
  padding: 1em 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px dashed var(--fg);
  color: var(--fg);
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.footer-nav-item:last-child {
  border-bottom: 2px dashed var(--fg);
}

/* ------------------------------------------------------------
   Row 2 - giant name, then the copyright rule
   ------------------------------------------------------------ */
.footer-row--bottom {
  display: flex;
  flex-direction: column;
}

.footer-name {
  width: 100%;
  padding: 2em 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.footer-name h1 {
  position: relative;
  /* Matches the section titles and the rest of the footer rather than
     standing alone in Rader, which nothing else on the page sets. The
     Söhne faces are declared as separate FAMILIES in styles.css
     (sohne-normal / -medium / -bold) rather than as weights of one
     family, so the family has to be named here - font-weight alone
     would leave this on Inter Tight and synthesize a fake bold. */
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  /* Söhne is a wider face than the Rader this was set in, so it ran
     heavier at the old 15vw than the wordmark wants to. */
  font-size: 12vw;
  font-weight: 800;
  line-height: 0.9;
  color: var(--fg);
  text-transform: uppercase;
  user-select: none;
}

/* The first word looks inset against the padding because of the face's
   left side bearing, so it is nudged back to the optical edge. Söhne
   sits closer to flush than the Rader this used to be set in, so the
   correction is smaller than the -0.5vw that face needed. */
.footer-name h1:first-child {
  left: -0.15vw;
}

/* ------------------------------------------------------------
   The mark standing in for the O of "Works"
   ------------------------------------------------------------
   The span is the letter slot: an inline-block sized in em, so it
   scales with the 12vw wordmark and needs no separate breakpoint.
   Its width is the O's advance, so "W_rks" stays spaced as the
   face set it. */
.footer-name-o {
  display: inline-block;
  /* Cap height of Söhne Bold, so the slot's top and bottom sit level
     with the flat-topped W and k beside it. */
  height: 0.72em;
  /* The O's advance, plus a little extra that is spent entirely on the
     right via the margin below. The mark's artwork is wider and more
     angular than the round glyph it stands in for, and its top-right
     corner is the part that pushes closest to the R.

     The 3d file's box is 89.6 x 73.1, but that includes shadow bleed -
     4 units left/top and 8 right/bottom around the same 81.6 x 61.1 ink.
     So the box is scaled up by 89.6/81.6 to keep the MARK itself at the
     advance, and the bleed is allowed to hang outside the slot, which is
     what the shadow should do anyway. */
  width: calc(0.70em * 1.098);
  margin-right: 0.06em;
  position: relative;
}

.footer-name-mark {
  position: absolute;
  /* Centred in the advance rather than filling it, so the letter
     spacing either side stays even. */
  left: 50%;
  top: 50%;
  /* The bleed is asymmetric - 4 units left/top against 8 right/bottom -
     so centring the BOX would leave the mark itself sitting 2 units up
     and left of centre. Scaled to the em box, that is about 0.02em back
     the other way. */
  transform: translate(calc(-50% + 0.022em), calc(-50% + 0.022em));
  /* The artwork is LANDSCAPE - its ink box is 81.6 x 61.1, about 4:3.
     So width is what has to be constrained: sizing by height instead
     would render it ~0.96em wide and run it into the W and the R.
     Width fills the advance, height follows, and the result sits a
     little under cap height - which is right for a round-ish letter
     anyway, the same way a true O overshoots less than a flat cap. */
  width: 100%;
  height: auto;
  display: block;
}

.footer-copyright-line {
  width: 100%;
  padding: 0.5em 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-top: 2px dashed var(--fg);
}

.footer-copyright-line p {
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: clamp(0.55rem, 2vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
  white-space: nowrap;
}

.footer-copyright-line p:last-child {
  text-align: right;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1000px) {
  .footer {
    padding: 4em 1.5rem 1.5rem;
    gap: 2em;
  }

  .footer-row--top {
    flex-direction: column;
    gap: 0;
  }

  .footer-contact {
    padding-bottom: 2.5em;
  }

  .footer-contact h3 {
    font-size: 8vw;
    line-height: 1.1;
  }

  .footer-nav {
    align-items: flex-start;
  }

  .footer-nav-item {
    width: 100%;
  }

  .footer-name {
    padding: 1em 0;
  }
}

/* The parallax relies on the footer sitting still while the page
   travels over it, which is motion the user did not ask for. Drop
   it to a plain block for anyone who prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .footer {
    position: static;
  }
}