/* The browser owns each swipe. Large reading sections stay in the main document. */
html.ei-section-scroll {
  --chapter-height: 100vh;
  --chapter-safe-height: 100vh;
  --chapter-reveal: 0px;
  --chapter-header: 104px;
  scroll-padding: 0;
  scroll-behavior: auto;
}
@supports (height: 100svh) {
  html.ei-section-scroll { --chapter-safe-height: 100svh; }
}
@supports (height: 100lvh) {
  html.ei-section-scroll {
    --chapter-height: 100lvh;
    --chapter-reveal: max(0px, calc(100lvh - 100svh));
  }
}
/* A stable full-height canvas covers retracted browser bars without moving snap points.
   Copy stays in the smaller always-visible area while only more imagery is revealed. */
.ei-section-scroll .opening { height: var(--chapter-height); }
.ei-section-scroll .opening-copy { height: var(--chapter-safe-height); }
.ei-section-scroll .opening-bottom { bottom: calc(30px + var(--chapter-reveal)); }
@media (max-width: 700px) {
  html.ei-section-scroll { --chapter-header: 90px; }
  .ei-section-scroll .opening .opening-copy { padding-top: 110px; padding-bottom: 84px; }
  .ei-section-scroll .opening-bottom { bottom: calc(12px + var(--chapter-reveal)); }
}
@media (prefers-reduced-motion: no-preference) and (min-height: 441px) {
  html.ei-section-scroll { scroll-snap-type: y mandatory; }
  .ei-section-scroll [data-scroll-stop] { scroll-snap-align: start; scroll-snap-stop: always; }
  .ei-section-scroll .site-footer[data-scroll-stop] { scroll-snap-align: end; }
  html.ei-section-scroll:has(dialog[open]),
  html.ei-section-scroll:is([data-ei-intro="pending"], [data-ei-intro="drawing"], [data-ei-intro="revealing"]) { scroll-snap-type: none; }
}
.ei-section-scroll #equipment-photos { padding: 0; background: #111519; }
.photo-stop { position: relative; isolation: isolate; height: var(--chapter-height); min-height: 425px; overflow: hidden; }
#equipment-photos .photo-stop > .image-link {
  display: block; width: 100%; height: 100%; max-height: none;
  background: #20262a; box-shadow: none;
}
.photo-stop .image-link::after {
  background: linear-gradient(180deg, #0b101640 0%, transparent 32%, #090b0d0a 46%, #080a0ce0 100%);
}
.photo-stop > .image-link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-stop .wide-image img { object-position: 50% 40%; }
.photo-stop .connections-image img { object-position: 50% 35%; }
.photo-stop .breaker-image img { object-position: 50% 40%; }
.photo-counter, .photo-steps, #equipment-photos .photo-stop .image-caption { left: clamp(24px, 6vw, 104px); right: clamp(24px, 6vw, 104px); }
.photo-counter {
  position: absolute; top: calc(var(--chapter-header) + clamp(18px, 3vh, 40px)); z-index: 2; pointer-events: none;
  display: flex; align-items: center; gap: .55em; color: #fff; text-shadow: 0 1px 5px #000b;
  font: 500 12px/1.5 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase;
}
.photo-counter b { margin-left: .7em; font-weight: 600; }
.photo-counter i { width: 26px; height: 3px; margin-right: 6px; background: #e62947; }
#equipment-photos .photo-stop .image-caption {
  bottom: calc(clamp(92px, 12vh, 148px) + env(safe-area-inset-bottom, 0px)); align-items: flex-end;
}
#equipment-photos .photo-stop .image-caption h2 { font-size: clamp(56px, 8.2vw, 140px); line-height: .94; }
#equipment-photos .photo-stop .image-caption .eyebrow { font-size: 11px; margin-bottom: 14px; }
#equipment-photos .photo-stop .image-arrow { align-self: flex-end; font-size: clamp(25px, 3vw, 48px); }
.photo-steps {
  position: absolute; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid #ffffff60;
  color: #fff; font: 500 12px/1.25 'IBM Plex Sans', Arial, sans-serif;
}
.photo-steps a { display: inline-flex; align-items: center; gap: 12px; padding-block: 11px; min-height: 46px; }
.photo-steps a:hover { text-decoration: underline; text-underline-offset: 4px; }
.photo-steps a:focus-visible, #equipment-photos .image-link:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
/* Below the photos, leave all of each original equipment section in normal flow. */
.catalog-stop:not(.catalog-dc) > .block {
  box-sizing: border-box; min-height: var(--chapter-height); display: grid; align-content: center;
  padding-top: calc(var(--chapter-header) + clamp(22px, 4.5vh, 58px)); padding-bottom: clamp(36px, 7vh, 84px);
}
.catalog-stop:not(.catalog-dc) > .block > .wrap { width: 100%; }
.ei-section-scroll .catalog-dc .catalog-intro { padding-top: calc(var(--chapter-header) + clamp(22px, 4.5vh, 58px)); }
/* Very tall or zoomed content can scroll beyond a single viewport. */
.ei-section-scroll .catalog-stop { overflow: visible; }
@media (max-width: 700px) {
  .photo-counter { font-size: 10px; }
  .photo-counter i { width: 19px; }
  #equipment-photos .photo-stop .image-caption h2 { font-size: clamp(54px, 15vw, 84px); }
  .photo-steps a { font-size: 13px; }
}
@media (max-height: 440px), (prefers-reduced-motion: reduce) {
  .photo-stop { height: min(78vh, 640px); min-height: 340px; }
  .photo-counter { top: 20px; }
  .catalog-stop:not(.catalog-dc) > .block { min-height: auto; padding-block: 48px; }
  .ei-section-scroll .catalog-dc .catalog-intro { padding-top: 48px; }
}