/* Meet Sable.

   Kept out of styles.css because it is one page's worth of rules. */

/* One wide photograph fills the complete hero, including the copy area. Sable
   and the lighthouse stay on the right while the open shoreline on the left
   carries the title without a split panel or edge fade.

   Doubled selector on purpose. The generator injects this file from the page's
   `head` field, which lands BEFORE styles.css in the document, so a single
   .guide-hero-sable ties with .guide-hero on specificity and loses on source
   order. Anything added here that collides with styles.css needs the same
   treatment. */
.guide-hero.guide-hero-sable {
  background:
    url(../images/hero-meet-sable-wide-v2.webp) 72% 44%/cover no-repeat,
    var(--lake);
  color: var(--white);
  text-shadow: 0 1px 2px rgba(6, 43, 59, .38);
}

.guide-hero.guide-hero-sable .shell {
  isolation: isolate;
}

.guide-hero.guide-hero-sable .shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -30px;
  bottom: -30px;
  left: -28px;
  width: min(460px, calc(100% + 28px));
  border-radius: 20px;
  background: rgba(6, 43, 59, .68);
  box-shadow: 0 0 42px 30px rgba(6, 43, 59, .58);
}

.guide-hero.guide-hero-sable .kicker,
.guide-hero.guide-hero-sable h1 {
  color: var(--white);
}

.guide-hero.guide-hero-sable p {
  color: rgba(255, 253, 248, .94);
}

@media (min-width: 900px) {
  .guide-hero.guide-hero-sable {
    background:
      url(../images/hero-meet-sable-wide-v2.webp) center 44%/cover no-repeat,
      var(--lake);
  }

  .guide-hero.guide-hero-sable p {
    max-width: 48ch;
  }
}

/* Each short chapter is followed immediately by the two scenes that belong to
   it, so the page reads as a magazine story rather than a text block followed
   by an image dump. */
.sable-story-flow {
  display: grid;
  gap: clamp(54px, 7vw, 92px);
}

.sable-story-group {
  margin: 0;
}

.sable-story-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  align-items: start;
}

.sable-story-pair figure {
  margin: 0;
}

.sable-story-pair img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(6, 43, 59, .14);
}

.sable-story-riding {
  grid-template-columns: 1fr;
}

@media (min-width: 561px) {
  .sable-story-waterline-rover img {
    height: clamp(420px, 50vw, 640px);
    object-fit: cover;
  }
}

.sable-story-pair figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(22, 48, 61, .78);
}

@media (max-width: 560px) {
  .sable-story-pair {
    grid-template-columns: 1fr;
  }
}