/* header */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem max(1.25rem, calc((100% - 1080px) / 2));
  background: rgba(14, 42, 28, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream);
  border-bottom: 1px solid rgba(245, 166, 35, .25);
}
.brand { font-family: Mitr, Georgia, serif; font-weight: 500; font-size: 1.75rem; text-decoration: none; letter-spacing: 0; }
.top nav { display: none; gap: 1.8rem; margin-left: auto; margin-right: .5rem; }
.top nav a { text-decoration: none; font-weight: 500; font-size: .95rem; opacity: .85; }
.top nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--mango); }
.top .btn { min-height: 2.6rem; padding: .45rem 1.1rem; font-size: .9rem; }
@media (min-width: 720px) { .top nav { display: flex; } }
@media (max-width: 420px) { .brand { font-size: 1.5rem; } }