<style>
/* BENTMON EDITORIAL COLLAGE */
.bm-editorial-one {
  --cream: #f8f7f2;
  --ink: #28271f;
  --muted: #777469;
  background: var(--cream);
  color: var(--ink);
  padding: 35px 4% 65px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}
.bm-editorial-one *,
.bm-editorial-one *::before,
.bm-editorial-one *::after {
  box-sizing: border-box;
}
/* TOP BRAND LINE */
.bm-editorial-top {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1450px;
  margin: 0 auto 40px;
}
.bm-editorial-brand {
  font-family: Georgia, serif;
  font-size: clamp(27px, 3vw, 40px);
  letter-spacing: 2px;
  white-space: nowrap;
}
.bm-editorial-top-line {
  height: 1px;
  background: #aaa79c;
  flex: 1;
}
.bm-editorial-top-note {
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 2.5px;
  white-space: nowrap;
}
/* MAIN LAYOUT */
.bm-editorial-layout {
  max-width: 1450px;
  margin: auto;
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: center;
  min-height: 700px;
}
/* LEFT TEXT */
.bm-editorial-copy {
  position: relative;
  z-index: 5;
  padding: 35px 0 60px;
}
.bm-editorial-eyebrow {
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 35px;
}
.bm-editorial-eyebrow::after {
  content: "";
  display: block;
  width: 85%;
  height: 1px;
  background: #aaa79c;
  margin-top: 12px;
}
.bm-editorial-title {
  font-family: Georgia, serif;
  font-size: clamp(42px, 5.4vw, 88px);
  line-height: .94;
  letter-spacing: -3px;
  font-weight: 400;
  margin: 0 0 35px;
}
.bm-editorial-description {
  font-family: Georgia, serif;
  font-size: clamp(18px, 1.8vw, 25px);
  line-height: 1.5;
  max-width: 440px;
  margin: 0;
}
.bm-editorial-signature {
  margin-top: 115px;
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
/* PHOTO COLLAGE */
.bm-editorial-collage {
  position: relative;
  width: 100%;
  height: 720px;
}
.bm-editorial-collage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* MAIN PORTRAIT */
.bm-editorial-main-photo {
  position: absolute;
  left: 15%;
  top: 0;
  width: 73%;
  height: 100%;
  z-index: 1;
}
/* LOWER LEFT DETAIL */
.bm-editorial-detail-photo {
  position: absolute;
  left: -6%;
  bottom: 4%;
  width: 39%;
  height: 46%;
  z-index: 3;
  border: 5px solid var(--cream);
}
/* RIGHT PRODUCT PHOTO */
.bm-editorial-product-photo {
  position: absolute;
  right: -2%;
  top: 26%;
  width: 36%;
  height: 44%;
  z-index: 4;
  border: 5px solid var(--cream);
}
/* SIDE NOTES */
.bm-editorial-side-note {
  position: absolute;
  right: 0;
  top: 13%;
  z-index: 5;
  background: var(--cream);
  padding: 10px;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 3px;
  line-height: 1.9;
}
.bm-editorial-bottom-note {
  position: absolute;
  right: 0;
  bottom: 4%;
  z-index: 5;
  font-family: Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 2px;
  line-height: 2;
}
/* SCROLL ANIMATIONS */
.bm-editorial-one .bm-reveal {
  opacity: 0;
  transform: translateY(38px);
  transition:
    opacity 1s ease,
    transform 1s cubic-bezier(.2,.7,.2,1);
}
.bm-editorial-one .bm-reveal.bm-visible {
  opacity: 1;
  transform: translateY(0);
}
.bm-editorial-one .bm-delay-1 {
  transition-delay: 120ms;
}
.bm-editorial-one .bm-delay-2 {
  transition-delay: 260ms;
}
.bm-editorial-one .bm-delay-3 {
  transition-delay: 400ms;
}
.bm-editorial-one .bm-delay-4 {
  transition-delay: 520ms;
}
/* TABLET */
@media (max-width: 1024px) {
  .bm-editorial-top-note {
    display: none;
  }
  .bm-editorial-layout {
    grid-template-columns: 43% 57%;
    min-height: 550px;
  }
  .bm-editorial-collage {
    height: 550px;
  }
  .bm-editorial-signature {
    margin-top: 65px;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .bm-editorial-one {
    padding: 30px 20px 55px;
  }
  .bm-editorial-top {
    margin-bottom: 40px;
  }
  .bm-editorial-brand {
    font-size: 30px;
  }
  .bm-editorial-layout {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .bm-editorial-copy {
    padding: 0 0 35px;
  }
  .bm-editorial-eyebrow {
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 24px;
  }
  .bm-editorial-title {
    font-size: clamp(39px, 9.7vw, 64px);
    letter-spacing: -2px;
    margin-bottom: 25px;
  }
  .bm-editorial-description {
    font-size: 18px;
    max-width: 100%;
  }
  .bm-editorial-signature {
    margin-top: 30px;
    font-size: 9px;
  }
  .bm-editorial-collage {
    height: 480px;
    margin-top: 10px;
  }
  .bm-editorial-main-photo {
    left: 13%;
    width: 77%;
    height: 91%;
  }
  .bm-editorial-detail-photo {
    left: 0;
    bottom: 0;
    width: 43%;
    height: 40%;
  }
  .bm-editorial-product-photo {
    right: 0;
    top: 31%;
    width: 40%;
    height: 35%;
  }
  .bm-editorial-side-note,
  .bm-editorial-bottom-note {
    display: none;
  }
}
@media (max-width: 400px) {
  .bm-editorial-collage {
    height: 380px;
  }
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
  .bm-editorial-one .bm-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
</style>
<section class="bm-editorial-one">
  <!-- TOP BRAND HEADER -->
  <div class="bm-editorial-top bm-reveal">
  
    <div class="bm-editorial-top-line"></div>
    <div class="bm-editorial-top-note">
      NATURAL MATERIALS / THOUGHTFUL DESIGN
    </div>
  </div>
  <!-- MAIN CONTENT -->
  <div class="bm-editorial-layout">
    <!-- LEFT COLUMN -->
    <div class="bm-editorial-copy">
      <div class="bm-editorial-eyebrow bm-reveal">
        THE THERMAL SCARF WRAP
      </div>
      <h2 class="bm-editorial-title bm-reveal bm-delay-1">
        COMFORT,<br>
        REIMAGINED
      </h2>
      <p class="bm-editorial-description bm-reveal bm-delay-2">
        A refined everyday scarf with a practical
        purpose. Designed to hold removable hot
        or cold inserts, and tie comfortably
        where you need it.
      </p>
      <div class="bm-editorial-signature bm-reveal bm-delay-3">
        PATENT PENDING
      </div>
    </div>
    <!-- RIGHT PHOTO COLLAGE -->
    <div class="bm-editorial-collage">
      <!-- MAIN LIFESTYLE PHOTOGRAPH -->
      <div class="bm-editorial-main-photo bm-reveal">
        <img
          src="{{ 'Sommer_Bentmon_scarf_2_copy_scmall_cropped.jpg' | file_url }}"
          alt="Bentmon thermal scarf lifestyle photograph"
          loading="lazy"
        >
      </div>
      <!-- LOWER LEFT DETAIL -->
      <div class="bm-editorial-detail-photo bm-reveal bm-delay-2">
        <img
          src="{{ 'SommerKnitHatcroppedandsmall.jpg' | file_url }}"
          alt="Bentmon thermal scarf fabric detail"
          loading="lazy"
        >
      </div>
      <!-- RIGHT PRODUCT PHOTOGRAPH -->
      <div class="bm-editorial-product-photo bm-reveal bm-delay-3">
        <img
          src="{{ 'Sommer_Bentmon_scarf_2_csmall.jpg' | file_url }}"
          alt="Bentmon scarf and removable thermal insert"
          loading="lazy"
        >
      </div>
      <!-- SIDE DETAIL -->
      <div class="bm-editorial-side-note bm-reveal bm-delay-4">
        VERSATILE<br>
        BY DESIGN.
      </div>
     
    </div>
  </div>
</section>
<script>
(function () {
  function initBentmonEditorial() {
    document.querySelectorAll('.bm-editorial-one')
      .forEach(function (section) {
        if (section.dataset.bmEditorialReady) return;
        section.dataset.bmEditorialReady = 'true';
        var elements = section.querySelectorAll(
          '.bm-reveal'
        );
        if (
          !('IntersectionObserver' in window) ||
          window.matchMedia(
            '(prefers-reduced-motion: reduce)'
          ).matches
        ) {
          elements.forEach(function (element) {
            element.classList.add('bm-visible');
          });
          return;
        }
        var observer = new IntersectionObserver(
          function (entries) {
            entries.forEach(function (entry) {
              if (entry.isIntersecting) {
                entry.target.classList.add(
                  'bm-visible'
                );
                observer.unobserve(entry.target);
              }
            });
          },
          {
            threshold: 0.08,
            rootMargin: '0px 0px -20px 0px'
          }
        );
        elements.forEach(function (element) {
          observer.observe(element);
        });
      });
  }
  if (document.readyState === 'loading') {
    document.addEventListener(
      'DOMContentLoaded',
      initBentmonEditorial
    );
  } else {
    initBentmonEditorial();
  }
  document.addEventListener(
    'shopify:section:load',
    initBentmonEditorial
  );
})();
</script>