.brand-entry-intro {
  --intro-progress: 0%;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  padding: 0;
  margin: 0;
  border: 0;
  color: var(--color-ivory);
  background: #442d1d;
  overflow-y: auto;
}
.brand-entry-intro[hidden], .brand-entry-intro:not([open]) { display: none; }
.brand-entry-intro::backdrop { background: #442d1d; }
.brand-entry-intro__content {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  justify-items: center;
  min-height: 100%;
  box-sizing: border-box;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.brand-entry-intro__monogram {
  grid-row: 2;
  position: relative;
  width: min(34vw, 28rem);
  aspect-ratio: 275 / 200;
}
.brand-entry-intro__monogram img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: .28; }
.brand-entry-intro__monogram .brand-entry-intro__fill {
  position: absolute;
  inset: 0;
  opacity: 1;
  clip-path: inset(0 calc(100% - var(--intro-progress)) 0 0);
  transition: clip-path 120ms linear;
}
.brand-entry-intro .brand-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.brand-entry-intro__recovery { grid-row: 3; align-self: start; max-width: 32rem; text-align: center; font: 1.125rem/1.5 var(--font-interface, Georgia, serif); }
.brand-entry-intro__recovery[hidden] { display: none; }
.brand-entry-intro__recovery button {
  color: inherit; background: transparent; border: 1px solid currentColor;
  border-radius: 4rem; padding: .8rem 1.6rem; font: inherit; cursor: pointer;
}
.brand-entry-intro__recovery button:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
/* The modal covers the page; explicitly hide chrome without shifting layout. */
.brand-intro-open .brand-header, .brand-intro-open .brand-skip-link { visibility: hidden; }
@media (max-width: 40rem) { .brand-entry-intro__monogram { width: min(72vw, 22rem); } }
@media (prefers-reduced-motion: reduce) { .brand-entry-intro__monogram .brand-entry-intro__fill { transition: none; } }