from raw to refined

Meadows Edge

Originally designed in 1966 by Aaron Green – a protégé of Frank Lloyd Wright and one of the most significant figures in American organic architecture – this mid-century residence is a piece of architectural history reimagined. Exposed CMU walls, warm wood ceilings and floor-to-ceiling glass set an unforgiving standard: every surface either disappears into the architecture or becomes part of it. It demands fluency in what the original architect intended. This is what it looks like when craft serves the vision completely.

Builder

Marrone & Marrone

Designer

Schwartz and Architecture

.smart-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.smart-gallery .bricks-layout-item {
  grid-column: span 1;
}

.smart-gallery .bricks-layout-item.is-landscape,
.smart-gallery .bricks-layout-item.force-wide {
  grid-column: span 2;
}

.smart-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.smart-gallery .bricks-layout-item.is-landscape img {
  aspect-ratio: 5 / 3;
}

document.addEventListener('DOMContentLoaded', () => {
  const galleries = document.querySelectorAll('.smart-gallery');

  galleries.forEach(gallery => {
    const items = Array.from(gallery.querySelectorAll('.bricks-layout-item'));

    const imagePromises = items.map(item => {
      const img = item.querySelector('img');

      if (!img) return Promise.resolve();

      const classifyImage = () => {
        const width = img.naturalWidth;
        const height = img.naturalHeight;

        item.classList.remove('is-landscape', 'is-square-portrait', 'force-wide');

        if (width > height) {
          item.classList.add('is-landscape');
        } else {
          item.classList.add('is-square-portrait');
        }
      };

      if (img.complete) {
        classifyImage();
        return Promise.resolve();
      }

      return new Promise(resolve => {
        img.addEventListener('load', () => {
          classifyImage();
          resolve();
        });
      });
    });

    Promise.all(imagePromises).then(() => {
      let portraitGroup = [];

      const processPortraitGroup = () => {
        if (portraitGroup.length % 2 !== 0) {
          portraitGroup[portraitGroup.length - 1].classList.add('force-wide');
        }

        portraitGroup = [];
      };

      items.forEach(item => {
        if (item.classList.contains('is-square-portrait')) {
          portraitGroup.push(item);
        } else {
          processPortraitGroup();
        }
      });

      processPortraitGroup();
    });
  });
});