/* Share the Fishing Pier artwork and control treatment across attraction films. */
body.attractions-page .atx{--sp-film-rail:calc((100vw - min(100vw,1900px))/2 + 170px);--sp-film-size:clamp(64px,calc((100vw - 2 * var(--sp-film-rail)) * .058),90px);--sp-film-gap:clamp(14px,calc((100vw - 2 * var(--sp-film-rail)) * .0125),20px);--sp-film-label:clamp(12px,calc((100vw - 2 * var(--sp-film-rail)) * .0103),16px)}
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand:is(.st-reference,.stm-sec),#pleasure-pier.ppr-coaster) .sp-film-control[type=button]{display:flex;align-items:center;justify-content:flex-start;gap:var(--sp-film-gap);width:max-content;height:auto;min-width:0;min-height:0;max-width:calc(100% - 24px);padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:#073b57;text-align:left;cursor:pointer;transition:color .2s}
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand:is(.st-reference,.stm-sec),#pleasure-pier.ppr-coaster) .sp-film-art{display:block;flex:none;width:var(--sp-film-size);height:var(--sp-film-size);border-radius:50%;background:url('../img/fishing-pier-watercolor-20261012/reference.png') 5.13% 84.04%/1466.67% 825.44% no-repeat;transition:transform .2s}
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand:is(.st-reference,.stm-sec),#pleasure-pier.ppr-coaster) .sp-film-label{font:400 var(--sp-film-label)/1.4 "Univers Next",Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand:is(.st-reference,.stm-sec),#pleasure-pier.ppr-coaster) .sp-film-arrow{flex:none;width:clamp(23px,1.7vw,27px);height:18px;fill:none;stroke:#a7652e;stroke-width:1.5;transform:none}
/* A soft paper backing keeps labels readable where the controls overlay photos. */
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand.st-reference) .sp-film-label{padding:5px 7px;border-radius:4px;background:#faf7efed}
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand:is(.st-reference,.stm-sec),#pleasure-pier.ppr-coaster) .sp-film-control[type=button]:hover{background:none;box-shadow:none;color:#a7652e}
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand:is(.st-reference,.stm-sec),#pleasure-pier.ppr-coaster) .sp-film-control:hover .sp-film-art{transform:scale(1.05)}
body.attractions-page .atx :is(#elissa.er-reference,#bishops-palace.br-reference,#the-strand:is(.st-reference,.stm-sec),#pleasure-pier.ppr-coaster) .sp-film-control:focus-visible{outline:2px solid #073b57;outline-offset:6px}
#pleasure-pier.ppr-coaster .sp-film-control{margin-top:1.2cqw}
@media(max-width:1450px){body.attractions-page .atx{--sp-film-rail:clamp(80px,8.947vw,170px)}}
@media(max-width:1250px){body.attractions-page .atx{--sp-film-size:90px;--sp-film-gap:18px;--sp-film-label:14px}#pleasure-pier.ppr-coaster .sp-film-control{margin-top:20px}}
@media(max-width:900px){body.attractions-page .atx{--sp-film-rail:24px}}
@media(max-width:540px){body.attractions-page .atx{--sp-film-size:76px;--sp-film-gap:14px;--sp-film-label:12px}#pleasure-pier.ppr-coaster .sp-film-control{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.atx .sp-film-control,.atx .sp-film-art{transition:none!important}}

/* Place the smaller Palace film control directly after its description. */
body.attractions-page .atx #bishops-palace.br-reference .sp-film-control[type=button]{position:relative;inset:auto;transform:none;margin:34px 0 0;gap:calc(var(--sp-film-gap) * .85)}
body.attractions-page .atx #bishops-palace.br-reference .sp-film-art{width:calc(var(--sp-film-size) * .85);height:calc(var(--sp-film-size) * .85)}
body.attractions-page .atx #bishops-palace.br-reference .sp-film-label{font-size:calc(var(--sp-film-label) * .92);padding:0;border-radius:0;background:none}
body.attractions-page .atx #bishops-palace.br-reference .sp-film-arrow{width:clamp(20px,1.45vw,23px);height:16px}