:root {
  --support-gold: #d2b477;
  --support-ink: #14251f;
  --support-deep: #173a31;
  --support-serif: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
}

html { scroll-padding-bottom: 96px; }
body > footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.site-header nav { align-items: center; }
.hero-actions { flex-wrap: wrap; }
.reader-footer-center { display: flex; align-items: center; gap: 18px; }
.reader-support { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid #b99456; border-radius: 4px; background: #e8d4a5; color: #17352b; text-decoration: none; font-size: 13px; font-weight: 700; }
.reader-support:focus-visible { outline: 2px solid #316654; outline-offset: 3px; }
.zen-header nav a.nav-support { display: inline-flex; padding: 0 12px; color: #17352b; background: #e8d4a5; border: 1px solid #b99456; }
.zen-header nav { flex-wrap: wrap; }

.nav-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(185, 148, 86, 0.72);
  border-radius: 4px;
  background: #e8d4a5;
  color: #17352b !important;
  font-weight: 700;
}

.nav-support:hover,
.nav-support:focus-visible {
  border-color: #f0d89f;
  background: #f0d89f;
  color: #10281f !important;
  outline: none;
}

.support-button {
  border-color: var(--support-gold) !important;
  background: var(--support-gold) !important;
  color: var(--support-ink) !important;
  font-weight: 700;
}

.support-button:hover,
.support-button:focus-visible {
  border-color: #ead096 !important;
  background: #ead096 !important;
}

.site-support-cta {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 40;
  display: grid;
  grid-template-columns: 34px auto;
  gap: 9px;
  align-items: center;
  min-height: 58px;
  padding: 8px 15px 8px 9px;
  border: 1px solid rgba(255, 244, 210, 0.7);
  border-radius: 6px;
  background: var(--support-gold);
  color: var(--support-ink);
  box-shadow: 0 12px 32px rgba(5, 20, 15, 0.28);
  text-decoration: none;
  line-height: 1.15;
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.site-support-cta:hover,
.site-support-cta:focus-visible {
  transform: translateY(-2px);
  background: #ead096;
  box-shadow: 0 15px 38px rgba(5, 20, 15, 0.34);
  outline: 2px solid rgba(255, 250, 234, 0.92);
  outline-offset: 3px;
}

.site-support-cta-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(20, 37, 31, 0.45);
  font-family: var(--support-serif);
  font-size: 16px;
}

.site-support-cta strong,
.site-support-cta small {
  display: block;
  letter-spacing: 0;
}

.site-support-cta strong {
  font-family: var(--support-serif);
  font-size: 15px;
}

.site-support-cta small {
  margin-top: 4px;
  color: rgba(20, 37, 31, 0.76);
  font-size: 10px;
  white-space: nowrap;
}

body:has(dialog[open]) .site-support-cta {
  pointer-events: none;
  opacity: 0;
}

@media (max-width: 760px) {
  .reader-footer-center { flex-direction: column; gap: 2px; padding: 6px 0; }
  .reader-support { min-height: 36px; }
  .zen-header { flex-wrap: wrap; gap: 12px; }
  .zen-header nav { gap: 10px; }
  .zen-hero .scroll-cue { left: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); transform: none; }
  .nav-support {
    justify-content: flex-start;
    width: fit-content;
    min-height: 40px;
  }

  .site-support-cta {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    min-height: 54px;
    padding: 7px 12px 7px 8px;
  }
}

@media (max-width: 360px) {
  .site-support-cta {
    grid-template-columns: 30px auto;
    gap: 7px;
  }

  .site-support-cta-mark {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  .site-support-cta small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-support-cta {
    transition: none;
  }
}

@media print {
  .site-support-cta,
  .nav-support {
    display: none !important;
  }
}