/* 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(23, 16, 16, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--cream);
  border-bottom: 1px solid rgba(232, 168, 95, .25);
}
.brand { font-family: Fraunces, Georgia, serif; font-weight: 650; font-size: 1.3rem; text-decoration: none; letter-spacing: -.01em; }
.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(--gold); }
.top .btn { min-height: 2.6rem; padding: .45rem 1.1rem; font-size: .9rem; }
@media (min-width: 720px) { .top nav { display: flex; } }