.footer-home,
.site-credit {
  position: relative;
  z-index: 1;
}

.site-credits {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 14px;
  margin-left: auto;
}

.site-credits .site-credit {
  align-self: auto;
}

:root {
  --wwc-footer-height: 33px;
  --wwc-floating-nav-clearance: 14px;
  --wwc-floating-nav-left: 14px;
  --wwc-floating-nav-top-width: 66px;
  --wwc-floating-nav-gap: 14px;
  --wwc-header-granite: #d5c6dc;
  --wwc-hero-granite-mid: #d3c5db;
}

html {
  height: 100%;
  overflow-x: clip;
}

html:not(.theme-dark):not(.theme-contrast) body > nav,
html:not(.theme-dark):not(.theme-contrast) body > nav.header-scrolled {
  background: var(--wwc-header-granite);
}

.credit-mark {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 5px;
  align-items: center;
  justify-content: center;
  vertical-align: baseline;
  flex: 0 0 14px;
}

.chatgpt-mark {
  border-radius: 3px;
  background: #fff;
  color: #171717;
  font: 700 9px/1 Arial, sans-serif;
  position: relative;
  top: -3px;
}

.vercel-mark {
  width: 0;
  height: 0;
  margin-right: 7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #fff;
  vertical-align: baseline;
}

footer {
  position: relative;
  box-sizing: border-box;
  min-height: 33px;
  height: 33px;
  margin: 0 !important;
  padding: 4px 6vw !important;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  background: var(--footer-granite, #280d4f);
  border-top: 0 !important;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding-bottom: calc(var(--wwc-footer-height) + env(safe-area-inset-bottom));
  overflow-x: clip;
}

body > main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-block: 0;
  padding-top: 0;
}

body > main > :first-child {
  margin-top: 0 !important;
}

body > footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  margin: 0 !important;
}

body > .back-to-top,
.category-back {
  bottom: calc(var(--wwc-footer-height) + var(--wwc-floating-nav-clearance) + env(safe-area-inset-bottom)) !important;
  z-index: 1200;
}

body > .back-to-top {
  left: max(var(--wwc-floating-nav-left), env(safe-area-inset-left)) !important;
}

.category-back {
  left: calc(max(var(--wwc-floating-nav-left), env(safe-area-inset-left)) + var(--wwc-floating-nav-top-width) + var(--wwc-floating-nav-gap)) !important;
}

body.lightbox-open > .back-to-top,
body.lightbox-open .category-back {
  z-index: 10 !important;
  pointer-events: none;
}


.footer-home {
  display: inline-flex;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 0 !important;
  line-height: 0;
  text-decoration: none !important;
}

.footer-home::before {
  content: none !important;
  display: none !important;
}

.footer-home img {
  display: block;
  width: 28px;
  height: 28px;
  object-fit: contain;
  border-radius: 4px;
}

.site-credit {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  align-self: center;
  color: rgba(243, 240, 245, 0.74) !important;
  -webkit-text-stroke: 0;
  text-shadow: none;
  text-decoration: none;
  font: 500 10px/1.3 'DM Mono', monospace;
  letter-spacing: .08em;
  white-space: nowrap;
  opacity: .82;
}

.site-credit:hover,
.site-credit:focus-visible {
  color: var(--paper) !important;
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 800px) {
  footer {
    min-height: 33px;
    height: 33px;
    padding: 4px 7vw !important;
  }

  .footer-home,
  .footer-home img {
    width: 26px;
    height: 26px;
  }

  .footer-home {
    flex-basis: 26px;
  }

  .site-credit {
    margin: 0 !important;
    max-width: calc(100% - 84px);
    text-align: right;
    font-size: 9px;
  }

  .site-credits {
    max-width: calc(100% - 84px);
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
    text-align: right;
  }


  :root {
    --wwc-floating-nav-clearance: 10px;
    --wwc-floating-nav-left: 9px;
    --wwc-floating-nav-top-width: 72px;
    --wwc-floating-nav-gap: 12px;
  }

  .site-credits .site-credit {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  :root {
    --wwc-floating-nav-top-width: 58px;
    --wwc-floating-nav-gap: 12px;
  }
}

/* Consistent separation between every major page section, including About and Follow. */
body main > section + section:not(.site-cta) { margin-top: 0 !important; }
body main > section:last-of-type { margin-bottom: 0 !important; }
body main > .top-panels > section + section { margin-top: 0 !important; }

/* Keep the first content surface attached to the header without a blank band. */
body main > .top-panels > .about,
body main > .top-panels > .follow,
body.about-page main > .about-hero > .about-hero-copy,
body.follow-page main > .follow-page-hero,
body.gallery-page main > .gallery-placeholder-hero {
  padding-top: clamp(18px, 2vw, 28px) !important;
}

/* About and Follow use their own page layouts; keep their transitions explicit. */
body.about-page main > section + section:not(.site-cta),
body.follow-page main > section + section:not(.site-cta) { margin-top: 0 !important; }
body.about-page main > section:last-of-type,
body.follow-page main > section:last-of-type { margin-bottom: 0 !important; }

/* Wide desktop guardrail: preserve the narrower desktop proportions once the
   centered main column has reached its 1440px reading measure. */
@media (min-width: 801px) {
  main,
  .about-page main,
  .follow-page main,
  .gallery-page main {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
  }

  .hero {
    padding: clamp(80px, 8vw, 115px) clamp(72px, 9vw, 130px) clamp(60px, 6vw, 86px);
  }

  .gallery {
    padding: clamp(42px, 4vw, 58px) clamp(60px, 6vw, 86px);
  }

  .top-panels .about,
  .top-panels .follow {
    padding: clamp(34px, 3vw, 44px) clamp(60px, 5vw, 72px) clamp(38px, 3.5vw, 50px);
  }

  .about-hero-copy {
    padding: clamp(44px, 4.5vw, 64px) clamp(60px, 6vw, 86px);
  }

  .about-narrative {
    gap: clamp(38px, 5vw, 72px);
    padding: clamp(44px, 4.5vw, 64px) clamp(60px, 7vw, 101px);
  }

  .about-values article {
    padding: clamp(34px, 3.5vw, 50px) clamp(40px, 4vw, 58px);
  }

  .follow-page-hero {
    padding: clamp(44px, 4.5vw, 64px) clamp(60px, 7vw, 101px) clamp(38px, 4vw, 58px);
  }

  .follow-directory {
    padding: clamp(30px, 3vw, 44px) clamp(60px, 7vw, 101px) clamp(44px, 4.5vw, 64px);
  }
}

/* About's content sections should use the shared 24px transition, not viewport-sized gaps. */
body.about-page main > .about-narrative,
body.about-page main > .about-values { padding-top: 24px !important; padding-bottom: 24px !important; }

/* Follow's hero and directory use the same compact section rhythm. */
body.follow-page main > .follow-page-hero { padding-bottom: 24px !important; }
body.follow-page main > .follow-directory { padding-top: 24px !important; padding-bottom: 24px !important; }

/* Full-bleed section backgrounds keep content centered while the surface spans the viewport. */
html:not(.theme-dark):not(.theme-contrast) .hero,
html:not(.theme-dark):not(.theme-contrast) .top-panels,
html:not(.theme-dark):not(.theme-contrast) .about-hero,
html:not(.theme-dark):not(.theme-contrast) .follow-page-hero,
html:not(.theme-dark):not(.theme-contrast) .gallery-placeholder-hero {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

html:not(.theme-dark):not(.theme-contrast) .hero::before,
html:not(.theme-dark):not(.theme-contrast) .top-panels::before,
html:not(.theme-dark):not(.theme-contrast) .about-hero::before,
html:not(.theme-dark):not(.theme-contrast) .follow-page-hero::before,
html:not(.theme-dark):not(.theme-contrast) .gallery-placeholder-hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
}

html:not(.theme-dark):not(.theme-contrast) .hero::before,
html:not(.theme-dark):not(.theme-contrast) .top-panels::before,
html:not(.theme-dark):not(.theme-contrast) .about-hero::before,
html:not(.theme-dark):not(.theme-contrast) .follow-page-hero::before,
html:not(.theme-dark):not(.theme-contrast) .gallery-placeholder-hero::before {
  background: linear-gradient(180deg, var(--wwc-header-granite) 0%, var(--wwc-hero-granite-mid) 58%, var(--paper) 100%);
}


/* Quiet footer credits. Keep the links, remove the decorative clutter. */
.site-credits {
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
}

.credit-mark {
  display: none !important;
}

.site-credit {
  color: rgba(243, 240, 245, 0.74) !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  font: 500 10px/1.3 'DM Mono', monospace !important;
  letter-spacing: .08em !important;
  opacity: .82;
  white-space: nowrap;
}

.site-credit:hover,
.site-credit:focus-visible {
  color: var(--paper) !important;
  opacity: 1;
}

@media (max-width: 800px) {
  .site-credits {
    flex-direction: column !important;
    gap: 2px !important;
  }

  .site-credit {
    font-size: 9px !important;
  }
}