/* Full footer scene: original camellias behind the content, at their natural colors. */
.site-footer {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 0;
  padding: 0;
  overflow: visible;
  background: #000;
  border: 0;
  color: var(--paper, #f5f0e7);
}

.site-footer > .footer-flowers {
  position: relative;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  inset: auto;
  display: block;
  width: 100%;
  max-width: 1920px;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: #000;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  mask-image: none;
  -webkit-mask-image: none;
  transform: none;
  pointer-events: none;
  z-index: 0;
}

.site-footer > .footer-flowers > img {
  position: static;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1280 / 731;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
  mix-blend-mode: normal;
  mask-image: none;
  -webkit-mask-image: none;
  transform: none;
}

.site-footer > .footer-shade {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, #0009 0%, #0006 28%, #0002 58%, #0009 100%);
  pointer-events: none;
  z-index: 1;
}

.site-footer > .footer-main {
  position: relative;
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
  width: calc(100% - var(--gutter) * 2);
  padding: clamp(80px, 7vw, 120px) 0 45px;
  color: var(--paper, #f5f0e7);
  z-index: 2;
}

.footer-main > .eyebrow {
  color: var(--paper, #f5f0e7);
  text-shadow: 0 1px 15px #0009;
}

.site-footer .footer-goodbye {
  max-width: 1000px;
  margin: 0;
  color: var(--paper, #f5f0e7);
  font-size: clamp(72px, 8.2vw, 132px);
  line-height: 1.12;
  letter-spacing: -.055em;
  text-shadow: 0 2px 24px #0008;
}

.site-footer .footer-goodbye .pink {
  color: inherit;
}

.site-footer .footer-main > .eyebrow {
  text-transform: none;
  letter-spacing: .06em;
}
.site-footer .footer-note {
  max-width: 48ch;
  margin: 24px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--paper);
  text-shadow: 0 2px 15px #000c;
}
.site-footer .footer-note:empty { display: none; }
.footer-copyright-note:not(:empty)::before { content: " "; white-space: pre; }

.site-footer .footer-navigation {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding-block: clamp(48px, 5vw, 76px) 38px;
}

.site-footer .footer-navigation a {
  color: var(--paper, #f5f0e7);
  border: 0;
  border-bottom: 1px solid #ffffff40;
  font-size: 13px;
  line-height: 1.65;
  text-shadow: 0 1px 12px #000b;
}

.site-footer .footer-navigation a:hover,
.site-footer .back-top:hover {
  color: #b3c79b;
}

.site-footer .footer-bottom {
  padding-block: 26px 0;
  border: 0;
  color: var(--paper, #f5f0e7);
  font-size: 11px;
  text-shadow: 0 1px 12px #000b;
}

.site-footer .back-top {
  color: var(--paper, #f5f0e7);
  font-size: 11px;
}

@media (min-width: 1200px) {
  .site-footer > .footer-flowers {
    width: 84%;
    max-width: 1440px;
  }
  .site-footer > .footer-main { max-width: 1440px; }
}

@media (min-width: 810px) and (max-width: 1199px),
       (min-width: 1200px) and (max-width: 1439px) and (hover: none) and (pointer: coarse) {
  .site-footer > .footer-flowers { width: 100%; max-width: 1920px; }
  .site-footer > .footer-main {
    max-width: none;
    padding: 64px 0 30px;
  }

  .footer-main > .eyebrow { margin-bottom: 32px; }

  .site-footer .footer-goodbye {
    font-size: clamp(68px, 7.7vw, 94px);
  }

  .site-footer .footer-navigation {
    gap: 24px;
    padding-block: 40px 24px;
  }

  .site-footer .footer-navigation a {
    font-size: 12px;
  }

  .site-footer .footer-bottom { padding-top: 18px; }
}

@media (max-width: 809px) {
  .site-footer > .footer-flowers {
    align-self: start;
    margin-top: 58px;
  }

  .site-footer > .footer-main {
    padding: 44px 0 24px;
  }

  .site-footer > .footer-shade {
    background: linear-gradient(180deg, #0004 0%, #0002 35%, #0003 72%, #000a 100%);
  }

  .footer-main > .eyebrow {
    max-width: 300px;
    margin-bottom: 24px;
    font-size: 8px;
    line-height: 1.8;
  }

  .site-footer .footer-goodbye {
    font-size: clamp(49px, 12vw, 85px);
    line-height: 1.16;
    letter-spacing: -.05em;
  }

  .site-footer .footer-navigation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    padding-block: 32px 20px;
  }

  .site-footer .footer-navigation a {
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 14px;
    font-size: 12px;
    line-height: 1.65;
  }

  .site-footer .footer-navigation .icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 3px;
  }

  .site-footer .footer-bottom {
    align-items: flex-start;
    gap: 22px;
    padding-top: 18px;
    font-size: 9px;
    line-height: 1.8;
  }

  .site-footer .footer-bottom p {
    max-width: 240px;
  }

  .site-footer .back-top {
    gap: 8px;
    font-size: 10px;
    white-space: nowrap;
  }
}

/* Avoid stacking a large section exit with the footer's own entrance space. */
@media (max-width: 1199px) {
  main > .archive-content { padding-bottom: 44px; }
  main > .about-next, main > .back-to-journal,
  main > .latest-section:last-child { padding-bottom: 40px; }
}

/* Match the section exit on wider tablets in landscape. */
@media (min-width: 1200px) and (max-width: 1439px) and (hover: none) and (pointer: coarse) {
  main > .archive-content, main > .collection-content { padding-bottom: 44px; }
  main > .about-next, main > .back-to-journal,
  main > .collection-home, main > .collection-back { padding-bottom: 40px; }
}