/* Loving Jewels (env D) only: the Worker links this stylesheet on a site with
 * BRAND_NAME and THEMES set. The A, B and C showcases never load it.
 *
 * The wordmark: Cormorant Garamond, the site's display face. "Loving" in the
 * upright medium, "Jewels" in the italic, so the name reads as one line set
 * by hand, the italic in the accent colour as the site's headlines set their
 * italic endings. Tight, slightly negative tracking at this size;
 * the studio line underneath stays in the spaced Manrope capitals the site
 * already uses for small labels.
 */
.brand .wordmark { display: block; }
.brand .wordmark .wm {
  display: block;
  font: 500 1.75rem/.92 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -.012em; text-transform: none;
  font-kerning: normal; font-feature-settings: "kern", "liga";
}
.brand .wordmark .wm i { font-style: italic; font-weight: 400; letter-spacing: 0; margin-left: -.04em; color: var(--accent); }
.brand .wordmark small { margin-top: 6px; letter-spacing: .22em; }
/* Over the 3D scene (header not yet solid) the name keeps a soft halo in the
   page colour, as the hero's words do on a phone, so it reads over any part
   of the backdrop without a box behind it. */
.site-head:not(.solid) .brand .wordmark {
  text-shadow: 0 0 10px var(--bg), 0 0 22px var(--bg), 0 0 36px color-mix(in srgb, var(--bg) 70%, transparent);
}
.site-head:not(.solid) .brand .wordmark small { opacity: .9; }
.auth-brand .wordmark .wm { font-size: 2rem; }

/* Light / dark, in the header. */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; padding: 0;
  border-radius: 50%; border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  background: transparent; color: var(--hero-ink); cursor: pointer; transition: border-color .2s, background .2s;
}
.site-head.solid .theme-toggle { color: var(--ink); }
.theme-toggle:hover { border-color: var(--accent); background: color-mix(in srgb, currentColor 8%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 17px; height: 17px; }
html[data-theme="dark"] .theme-toggle .tt-moon, html:not([data-theme="dark"]) .theme-toggle .tt-sun { display: none; }

@media (max-width: 820px) {
  .nav { gap: 12px; }
}
@media (max-width: 480px) {
  .brand .wordmark .wm { font-size: 1.38rem; }
  .brand .wordmark small { font-size: .52rem; letter-spacing: .14em; margin-top: 5px; }
  .theme-toggle { width: 36px; height: 36px; }
}