/* Impressum footer, laid out as a typical site footer: columns (impressum with the company details, then order) under plain column
   titles, then a bottom bar with the copyright and the font licenses; on the colour the contact section ends on (--glow-side over --glow-2, tokens.css), with
   the closing darkening carried on from the contact section's bottom edge down to full dark red. */
.imp {
  position: relative;
  z-index: 2;
  background: var(--glow-side), var(--glow-2);
  /* laps the contact section's last pixel row: where the two sections meet on a fraction of a pixel, Safari can leave that row out of
     both darkening layers (.contact::after, .imp::before), which shows as a bright line across the page */
  margin-top: -1px;
  padding: 48px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  color: var(--mute);
  font-size: 14px;
  line-height: 1.5;
}

/* the closing darkening (--dark-sweep), taken over from the contact section's (contact.css) over the 20px above the footer, where it
   fades in as that one fades out (stops set so the two together stay at --dark-seam strength), then run to full by the bottom */
.imp::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -20px 0 0;
  pointer-events: none;
  background: var(--dark-sweep);
  mask: linear-gradient(transparent, rgb(0 0 0 / .273) 5px, rgb(0 0 0 / .429) 10px, rgb(0 0 0 / .529) 15px, var(--dark-seam) 20px, #000 80%);
}

/* columns and bottom bar share the width of the sections above */
.imp :is(.cols, .imp-copy) {
  max-width: 1680px;
  margin-inline: auto;
}

/* a hairline opens the footer, across the same width as the bottom bar's */
.imp .cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}

/* column titles in the body font, small and quiet */
.imp :is(h2, h3) {
  margin: 0 0 12px;
  font: 500 12px/1.4 var(--font-body);
  color: var(--ink);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.imp p {
  margin: 0 0 8px;
  max-width: 48ch;
}

.imp .imp-company {
  color: var(--ink);
  font-weight: 500;
}

.imp a { color: var(--ink); }

/* bottom bar: a hairline across, the copyright under it on the left and the font licenses on the right, wrapping under it when narrow */
.imp .imp-copy {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
}

/* the bar's text is quieter, its hairline the same as the one opening the footer */
.imp .imp-copy small { opacity: .7; }

@media (min-width: 761px) {
  .imp { padding-top: 64px; }
  .imp .cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}