/* Breakwater Sauna lockup: wordmark + rock mark. Scale the whole thing with font-size. */
.brand { display: inline-flex; align-items: center; gap: 0.8em; color: inherit; text-decoration: none; font-size: 16px; line-height: 1; white-space: nowrap; }
.brand-mark { height: 2.1em; width: auto; aspect-ratio: 90 / 40; flex: none; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* A. Marcellus, horizontal */
.brand-a .brand-word { font-family: "Marcellus", Georgia, serif; font-size: 0.95em; letter-spacing: 0.2em; margin-right: -0.2em; }

/* B. Tenor Sans, vertical: SAUNA spread to the width of BREAKWATER */
.brand-b .brand-word { font-family: "Tenor Sans", Georgia, sans-serif; display: inline-grid; row-gap: 0.45em; }
.brand-b .l1 { letter-spacing: 0.24em; margin-right: -0.24em; }
.brand-b .l2 { display: flex; justify-content: space-between; font-size: 0.6em; }
.brand-b .brand-mark { height: 2.3em; }

/* Contact link in the header: a white outlined box so it stands out */
.site-header nav { align-items: center; }
.site-header nav a.nav-cta {
  border: 1.5px solid currentColor; border-radius: 4px; padding: 7px 14px; font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
}
.site-header nav a.nav-cta:hover { background: var(--head-ink, #eef1f1); color: var(--storm-bg, #1b2d3b); border-bottom-color: currentColor; }
@media (max-width: 720px) {
  .site-header nav a.nav-cta { padding: 5px 10px; }
}
@media (max-width: 360px) {
  .site-header nav { gap: 11px; }
  .site-header nav a.nav-cta { padding: 4px 8px; }
}