/* Photographic scenes shared by both Speedex sites.
   Pages supply the palette (--navy, --navy-d, --red, --pad, --maxw, --book).
   Text never sits on a veil lighter than 0.72 navy, which keeps white type
   above WCAG AA contrast even where the photo underneath is pure white. */

/* reading progress */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:400;background:var(--red);
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* a photo layer that fills its section; the img is taller than the frame so it can drift */
.photo{position:absolute;inset:0;overflow:hidden;z-index:0;background:var(--navy-d)}
.photo img{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;display:block;will-change:transform}
.photo .veil{position:absolute;inset:0}

/* full-bleed statement band between sections */
.band{position:relative;isolation:isolate;overflow:hidden;color:#fff;
  min-height:clamp(300px,54vh,520px);display:grid;align-items:center}
.band .veil{background:linear-gradient(100deg,rgba(2,22,64,.93) 0%,rgba(2,22,64,.82) 48%,rgba(2,22,64,.72) 100%)}
.band-in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(48px,7vw,90px) var(--pad)}
.band-kicker{font-family:var(--book);font-weight:700;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:#F7A3AF;display:flex;align-items:center;gap:12px;margin-bottom:18px}
.band-kicker::before{content:'';width:30px;height:2px;background:currentColor;flex:none}
.band-line{font-family:var(--book);font-weight:700;font-size:clamp(26px,4vw,48px);line-height:1.15;max-width:22ch;letter-spacing:-.01em}
.band-line em{font-style:italic;color:#F7A3AF}
.band-sub{margin-top:18px;max-width:52ch;font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:rgba(255,255,255,.86)}
/* the brand's diagonal, carried into every band */
.band::after{content:'';position:absolute;z-index:1;right:0;bottom:0;width:min(34vw,420px);height:100%;pointer-events:none;
  background:linear-gradient(to top left,var(--red) 0 31%,transparent 31.2% 35%,rgba(255,255,255,.85) 35.2% 36.6%,transparent 36.8%)}

/* photo strip that travels sideways as the page scrolls */
.filmstrip{position:relative;padding:clamp(56px,7vw,96px) 0;overflow:hidden}
.film-head{max-width:var(--maxw);margin:0 auto clamp(26px,3.5vw,40px);padding:0 var(--pad)}
.film-viewport{overflow-x:auto;scrollbar-width:none;padding:6px 0 18px;-webkit-overflow-scrolling:touch}
.film-viewport::-webkit-scrollbar{display:none}
.motion-ready .film-viewport{overflow:hidden}
.film-track{display:flex;gap:clamp(12px,1.4vw,18px);list-style:none;padding:0 var(--pad);width:max-content;will-change:transform}
.film-track li{flex:none;width:clamp(230px,28vw,400px);height:clamp(190px,24vw,320px);overflow:hidden;position:relative;background:var(--navy-d)}
.film-track li:nth-child(even){margin-top:clamp(22px,3vw,44px)}
.film-track li.tall{width:clamp(170px,19vw,280px)}
.film-track img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.film-track li:hover img{transform:scale(1.06)}

@media (prefers-reduced-motion:reduce){
  .photo img{top:0;height:100%;transform:none!important}
  .film-track{transform:none!important}
  .motion-ready .film-viewport{overflow-x:auto}
  .scroll-progress{display:none}
}
@media print{.scroll-progress,.photo,.band::after{display:none!important}.band{color:#000;min-height:0}}