/* The same inset positions the compact logo and the right-hand navigation. */
.home-navigation {
  position: fixed;
  z-index: 4;
  top: var(--hero-home-inset);
  right: var(--hero-home-inset);
  display: flex;
  flex-direction: column;
  gap: .425em;
  align-items: flex-end;
  color: var(--color-hero-text);
  text-align: right;
  font: 300 clamp(1rem, 1.04167vw, 1.25rem)/1.1 var(--font-body);
}
.home-navigation a { color: inherit; text-decoration: none; letter-spacing: .04em; }
.home-navigation a:hover { text-decoration: underline; text-underline-offset: .2em; }
.home-navigation a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.home-navigation .home-navigation__apartments { text-transform: uppercase; font: 400 clamp(1.1rem, 1.14583vw, 1.375rem)/1.1 'Bodoni Moda', Georgia, serif; }

/* Inner pages start with the homepage logo at its compact size. */
.compact-header { --hero-home-inset: clamp(1rem, 2vw, 1.5rem); --hero-home-width: clamp(7rem, 11vw, 10rem); }
.compact-header__brand { position: fixed; z-index: 4; top: var(--hero-home-inset); left: var(--hero-home-inset); display: block; width: var(--hero-home-width); }
.compact-header__brand img { display: block; width: 100%; height: auto; filter: brightness(0) invert(28%); }
/* Offset the serif font's space above its capitals to align with the logo artwork. */
.compact-header .home-navigation { top: calc(var(--hero-home-inset) - .15em); color: var(--color-header-text-dark); }
.compact-header.is-on-image .compact-header__brand img { filter: brightness(0) invert(1); }
.compact-header.is-on-image .home-navigation { color: var(--color-hero-text); }

/* Shared mobile navigation; the native dialog contains focus and sits above page layers. */
.mobile-menu-toggle { display: none; }
.mobile-menu { border: 0; padding: 0; }
:where(.uses-mobile-navigation) {
  .home-navigation.has-mobile-menu { display: none; }
  .mobile-menu-toggle {
    position: fixed;
    z-index: 9;
    top: var(--space-mobile-menu-inset);
    right: var(--space-mobile-menu-inset);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    min-height: 2.75rem;
    margin-top: -.65rem;
    padding: .5rem 0 .5rem .5rem;
    border: 0;
    background: transparent;
    color: var(--color-header-text-dark);
    font: 400 1rem/1.2 var(--font-body);
    cursor: pointer;
  }
  .hero .mobile-menu-toggle, .compact-header.is-on-image .mobile-menu-toggle { color: var(--color-hero-text); }
  .hero:has(.hero__brand.is-on-light:not(.is-on-gray):not(.is-on-photo):not(.is-on-scenes)) .mobile-menu-toggle { color: var(--color-header-text-dark); }
  .mobile-menu-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .mobile-menu-toggle__bars { position: relative; display: block; width: 1.5rem; height: 1rem; }
  .mobile-menu-toggle__bars span { position: absolute; left: 0; top: calc(50% - 1px); width: 100%; height: 2px; background: currentColor; transition: transform .3s ease; }
  .mobile-menu-toggle__bars span:first-child { transform: translateY(-4px); }
  .mobile-menu-toggle__bars span:last-child { transform: translateY(4px); }
  .mobile-menu-toggle[aria-expanded='true'] .mobile-menu-toggle__bars span:first-child { transform: rotate(45deg); }
  .mobile-menu-toggle[aria-expanded='true'] .mobile-menu-toggle__bars span:last-child { transform: rotate(-45deg); }
  .mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    background: var(--color-surface-page);
    color: var(--color-text-primary);
    overflow-y: auto;
  }
  .mobile-menu[open] { display: grid; place-items: center; }
  .mobile-menu::backdrop { background: var(--color-surface-page); }
  .mobile-menu__brand { position: fixed; top: var(--space-mobile-menu-inset); left: var(--space-mobile-menu-inset); display: block; width: clamp(7rem, 11vw, 10rem); }
  .mobile-menu__brand img { display: block; width: 100%; height: auto; filter: brightness(0) invert(28%); }
  .mobile-menu__brand:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 4px; }
  .mobile-menu .home-navigation {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    padding: 6rem 1.5rem;
    color: var(--color-text-primary);
    text-align: center;
    font: 400 clamp(1.5rem, 5vw, 2.5rem)/1.2 'Bodoni Moda', Georgia, serif;
  }
  .mobile-menu .home-navigation__apartments { font: inherit; text-transform: none; }
  .mobile-menu .home-navigation__apartments br { display: none; }
  .has-mobile-menu-open { overflow: hidden; }
}
@media (prefers-reduced-motion: no-preference) {
  .uses-mobile-navigation .mobile-menu[open], .uses-mobile-navigation .mobile-menu[open]::backdrop { animation: mobile-menu-fade .3s ease both; }
  .uses-mobile-navigation .mobile-menu[open] .home-navigation { animation: mobile-menu-enter .3s ease both; }
}
@keyframes mobile-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mobile-menu-enter { from { opacity: 0; transform: translateY(1rem); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-toggle__bars span { transition: none; }
}