/* Homepage: swipeable strip of recent Serra House photo galleries */
.shp{background:var(--teal);color:var(--white);padding-block:clamp(56px,8vw,104px);overflow:hidden}
.shp .shp-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px;margin-bottom:clamp(24px,4vw,40px)}
.shp .shp-head>div:first-child{display:grid;gap:12px;max-width:60ch}
.shp h2 em{font-style:italic;font-weight:400;color:var(--gold)}
.shp .eyebrow{color:var(--gold)}
.shp h2{color:var(--white)}
.shp .lede{color:#C9D5DD}
.shp-nav{display:flex;gap:10px}
.shp-nav button{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:transparent;color:var(--white);font-size:1.25rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s,opacity .2s}
.shp-nav button:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.shp-nav button:disabled{opacity:.35;cursor:default;background:transparent}
.shp-track{list-style:none;margin:0;padding:4px max(16px,calc((100vw - var(--wrap))/2 + clamp(16px,4vw,40px))) 8px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(16px,calc((100vw - var(--wrap))/2 + clamp(16px,4vw,40px)));scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.shp-track::-webkit-scrollbar{display:none}
.shp-track>li{flex:0 0 clamp(260px,30vw,380px);scroll-snap-align:start}
.shp-slide{position:relative;display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:var(--teal-2);color:var(--white);text-decoration:none;box-shadow:0 10px 24px rgba(0,0,0,.25)}
.shp-slide img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.shp-slide:hover img,.shp-slide:focus-visible img{transform:scale(1.05)}
.shp-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,20,30,.88) 0%,rgba(10,20,30,.35) 45%,rgba(10,20,30,0) 70%)}
.shp-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:18px 20px;display:grid;gap:6px}
.shp-cap small{font:600 .7rem/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.shp-cap b{font:600 1.2rem/1.2 var(--f-display)}
.shp-all{display:grid;place-content:center;gap:12px;text-align:center;background:var(--gold);color:var(--ink);padding:24px}
.shp-all::after{display:none}
.shp-all b{font:600 1.5rem/1.15 var(--f-display)}
.shp-all span{font:800 .78rem/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase}
.shp-foot{margin-top:clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.shp-hint{font-size:.9rem;color:#C9D5DD}
@media (hover:hover) and (pointer:fine){.shp-hint{display:none}}
@media (max-width:640px){.shp-nav{display:none}.shp-track>li{flex-basis:80vw}}
@media (prefers-reduced-motion:reduce){.shp-slide img{transition:none}.shp-slide:hover img{transform:none}.shp-track{scroll-behavior:auto}}