/* Identity remains loaded when Settings switches presentation stylesheets. */
.hearth-logo {
  position: relative;
  display: inline-block;
  width: 10rem;
  max-width: 100%;
  aspect-ratio: 2038 / 771;
  vertical-align: middle;
  background: var(--ink);
  mask: url('/assets/hearth-logo.svg') center / contain no-repeat;
}
/* The vector silhouette preserves the approved artwork; this region contains only
   the flame, never the arch. No regenerated artwork or fixed palette needed. */
.hearth-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--clay);
  clip-path: inset(38% 77% 22% 12%);
}
.onboarding-brand .hearth-logo { width: min(21rem, 75vw); }
.household-brand-copy { width: 100%; }
.household-brand-copy .hearth-logo {
  display: block;
  width: 11rem;
  /* Align the artwork, not its transparent canvas, with the household name. */
  transform: translateX(-5.79%);
}
.household-brand-copy strong { display: block; }
.mobile-head .hearth-logo { width: 8rem; }
.home-logo-stage { align-content: center; gap: 2.5rem; }
.home-ember {
  position: relative;
  display: block;
  width: min(19rem, 65vw);
  aspect-ratio: 1;
}
.home-ember::before,
.home-ember::after {
  content: "";
  position: absolute;
  inset: 0;
  mask: url('/assets/hearth-mark.png') center / contain no-repeat;
}
.home-ember::before {
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 64% 100%, 64% 42%, 36% 42%, 36% 100%, 0 100%);
}
.home-ember::after {
  background: var(--clay);
  clip-path: inset(42% 36% 20% 36%);
  transform-origin: 50% 78%;
}
@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .home-ember::after {
    animation: ember-flicker 4.7s ease-in-out infinite;
  }
}
@keyframes ember-flicker {
  0%, 100% { transform: scale(1) skewX(0deg); }
  22% { transform: scale(.98, 1.025) skewX(-1deg); }
  43% { transform: scale(1.015, .99) skewX(.7deg); }
  67% { transform: scale(.985, 1.035) skewX(-.6deg); }
  84% { transform: scale(1.01, 1.005) skewX(.5deg); }
}
@media (forced-colors: active) {
  .hearth-logo,
  [data-appearance] .hearth-logo { background: CanvasText; mask: url('/assets/hearth-logo.svg') center / contain no-repeat; }
  .hearth-logo::after { background: CanvasText; }
  .home-ember::before, .home-ember::after { background: CanvasText; }
}