/* say.church header logo — inline SVG cross + real web text.
   Pair with the snippet in snippet.html. No animation, so nothing to gate behind
   prefers-reduced-motion; the media query at the end just guarantees it. */

.brand {
  --brand-h: 44px;                 /* overall logo height (cross SVG box) */
  --brand-fs: 47px;                /* wordmark size: 'h' ascender to 'y' descender ≈ visible cross height */
  display: inline-flex;
  align-items: center;
  /* the crossbar stops ~22% short of the viewBox edge (room for the glow),
     so a tiny gap still gives a clear visual gap */
  gap: calc(var(--brand-h) * 0.06);
  height: var(--brand-h);
  line-height: 1;
  text-decoration: none;
  /* deliberately no background / border / padding box */
}

.brand:focus-visible {
  outline: 2px solid #E9C46A;
  outline-offset: 4px;
  border-radius: 4px;
}

.brand__cross {
  display: block;
  height: var(--brand-h);
  width: var(--brand-h);           /* viewBox is square (0 0 64 64); cross spans y 2..62 */
  flex: none;
  overflow: visible;               /* glow, rays and halo spill a little past the top edge */
}

.brand__text {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: var(--brand-fs);
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* gold gradient clipped to the glyphs */
  background: linear-gradient(180deg, #FFF4C8 0%, #F3D88A 38%, #E9C46A 58%, #B8862B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* text-shadow would paint *under* the transparent fill and show through it,
     so the glow is a filter on the already-clipped result instead */
  filter: drop-shadow(0 0 6px rgba(233, 196, 106, 0.28));
  /* optical nudge: centre the ink (ascender..descender) rather than the line box on the cross */
  transform: translateY(-0.07em);
}

/* the '.' becomes a round gold dot: the glyph stays in the DOM (copy/paste and screen
   readers still get "say.church") but is transparent and clipped inside the dot's box */
.brand__dot {
  display: inline-block;
  width: 0.13em;                   /* ≈ Playfair's stem width */
  height: 0.13em;
  margin: 0 0.07em 0 0.06em;       /* breathing room each side ('y' has a wide right serif already) */
  border-radius: 50%;
  overflow: hidden;                /* makes the inline-block's baseline its bottom edge -> dot sits on the baseline */
  vertical-align: baseline;
  background: radial-gradient(circle at 35% 30%, #FFF4C8 0%, #E9C46A 50%, #B8862B 100%);
}

@media (max-width: 600px) {
  .brand {
    --brand-h: 32px;
    --brand-fs: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand, .brand * { animation: none !important; transition: none !important; }
}