from raw to refined

The Oak House

A California estate that earns its warmth. The standing seam roof, board and batten facade, and walls of glass feel less designed than inevitable — as if the house grew here alongside the oak that anchors it. Inside, the finishing work had to match that same sense of ease: nothing overwrought, nothing unfinished, every surface holding up under the kind of light that makes everything visible. That’s a harder standard than it looks.

Builder

Lencioni Construction

Designer

Pacific Peninsula 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();
    });
  });
});