/* Site footer, the same on every page (base, Studio and Talks layouts). Loaded after each layout's own stylesheet.
   One row: the year on the left, the name drawn as dots in the centre (site-footer.js; the dots move away from the
   pointer and take the accent colour, like the metal sheen of the headlines), the profiles on the right.
   The line along the top lights up as the pointer comes near the footer and follows it. */
.site-footer {
  --footer-ink: #fafafa;
  --footer-ink-2: rgba(250, 250, 250, 0.42);
  --footer-ink-3: rgba(250, 250, 250, 0.3);
  --footer-rule: rgba(250, 250, 250, 0.1);
  /* The site's accent (crimson unless a visitor picks another, see accent.js) as the headlines' metal sheen:
     mixed with black, plain, mixed with white. */
  --footer-accent: var(--accent, #d64553);
  --footer-accent-deep: color-mix(in oklab, var(--accent, #d64553) 72%, #000);
  --footer-accent-light: color-mix(in oklab, var(--accent, #d64553) 78%, #fff);
  --footer-gap: 1.5rem;
  position: relative;
  padding-block: clamp(2.2rem, 3.6vw, 2.75rem) calc(clamp(2.2rem, 3.6vw, 2.75rem) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: #080808;
  color: var(--footer-ink-2);
  font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.84rem;
  line-height: 1.4;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--footer-rule);
  pointer-events: none;
}

/* The lit line: a bright core on the hairline and a soft bloom under it. site-footer.js sets --footer-near (0 to 1)
   as the pointer comes within reach of the footer, and --footer-x to follow it. */
.site-footer .footer-lit {
  position: absolute;
  top: 0;
  left: 0;
  width: 34rem;
  height: 4rem;
  margin-left: -17rem;
  pointer-events: none;
  opacity: var(--footer-near, 0);
  transform: translateX(var(--footer-x, 50vw));
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 300ms ease;
}

.site-footer .footer-lit::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--footer-accent-deep) 22%, var(--footer-accent) 38%, var(--footer-accent-light) 50%, var(--footer-accent) 62%, var(--footer-accent-deep) 78%, transparent);
  box-shadow: 0 0 10px 1px color-mix(in srgb, var(--footer-accent) 50%, transparent);
}

.site-footer .footer-lit::after {
  content: "";
  position: absolute;
  top: -2rem;
  left: 20%;
  right: 20%;
  height: 4rem;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--footer-accent) 14%, transparent), transparent);
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer :focus-visible {
  outline: 2px solid var(--footer-ink);
  outline-offset: 4px;
}

.site-footer .footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 1rem var(--footer-gap);
}

/* The year and the profiles sit on the name's baseline: the grid aligns the bottoms, and each pulls its own text
   down by the depth of DM Sans under its baseline (--footer-descent, at line-height 1). */
.site-footer .footer-copy,
.site-footer .footer-links {
  --footer-descent: 0.16em;
  line-height: 1;
}

.site-footer .footer-copy {
  justify-self: start;
  margin-bottom: calc(var(--footer-descent) * -1);
  color: var(--footer-ink-3);
}

/* The name as dots, in the centre. */
.site-footer .footer-mark {
  position: relative;
  max-width: 100%;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.site-footer .footer-mark-text {
  display: block;
  color: rgba(250, 250, 250, 0.3);
  font-family: "STIX Two Text", Georgia, serif;
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  line-height: 1;
  white-space: nowrap;
}

.site-footer .footer-mark canvas {
  position: absolute;
  display: block;
  pointer-events: none;
}

.site-footer .footer-mark.is-live {
  cursor: crosshair;
}

.site-footer .footer-mark.is-live .footer-mark-text {
  visibility: hidden;
}

/* Profiles, on the right, close together, grey and underlined. On hover the word lights up and a line in the
   accent's sheen draws over the grey one. Each link has 0.5em of padding above and below, so it is a comfortable target. */
.site-footer .footer-links {
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.1rem;
  margin: 0 0 calc((var(--footer-descent) + 0.5em) * -1);
  padding: 0;
  list-style: none;
}

.site-footer .footer-links a {
  position: relative;
  display: inline-block;
  padding-block: 0.5em;
  color: var(--footer-ink-2);
  transition: color 300ms ease;
}

.site-footer .footer-links a::before,
.site-footer .footer-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.44em;
  height: 1px;
}

.site-footer .footer-links a::before {
  background: rgba(250, 250, 250, 0.16);
}

.site-footer .footer-links a::after {
  background: linear-gradient(90deg, var(--footer-accent-deep), var(--footer-accent), var(--footer-accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .site-footer .footer-links a:hover,
  .site-footer .footer-links a:focus-visible {
    color: var(--footer-ink);
  }

  .site-footer .footer-links a:hover::after,
  .site-footer .footer-links a:focus-visible::after {
    transform: scaleX(1);
  }
}

/* Narrow screens: the name, then the profiles, then the year, centred. */
@media (max-width: 760px) {
  .site-footer .footer-inner {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.1rem;
  }

  .site-footer .footer-mark {
    order: -1;
  }

  .site-footer .footer-copy {
    order: 1;
    justify-self: center;
  }

  .site-footer .footer-links {
    justify-self: center;
    justify-content: center;
    margin-bottom: 0;
  }

  .site-footer .footer-copy {
    margin-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after {
    transition-duration: 1ms !important;
  }
}