/* Pleasure Pier: supplied watercolor composition with live text, gallery and film. */
body.attractions-page .atx #pleasure-pier.pp-reference{
 --pp-rail:var(--at-content-rail);padding:clamp(40px,3.947368vw,75px) var(--pp-rail);
 background:var(--paper);color:#071c35
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__design{
 position:relative;container-type:inline-size;isolation:isolate;aspect-ratio:1477/941
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__copy{
 position:absolute;z-index:2;left:0;top:26.673751%;width:40%;user-select:text
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__kicker{
 display:flex;align-items:center;gap:1.489506cqw;margin:0;
 font:400 max(11px,1.489506cqw)/1.25 var(--hp-text);letter-spacing:.34em;
 text-transform:uppercase;color:#ab783d;white-space:nowrap
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__kicker::before{
 content:'';width:4.062289cqw;height:1px;flex:none;background:#b58a54
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__title{
 display:grid;grid-template-columns:max-content max-content;align-items:baseline;column-gap:.16em;margin:0;
 font:400 7.2cqw/.89 var(--hp-display);letter-spacing:-.025em;color:#073b57;white-space:nowrap
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__title > span{display:block}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__title em{
 display:block;margin:0;font:700 1em/.95 var(--hp-display);
 font-style:normal;letter-spacing:-.025em;color:#917658
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__travel{
 margin:1.624915cqw 0 0;font:400 max(14px,1.581843cqw)/1.15 var(--hp-text);
 letter-spacing:0;color:#6381a0
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__lead{
 max-width:34.732566cqw;margin:2.234259cqw 0 0;
 font:400 max(16px,1.733150cqw)/1.26 var(--hp-text);
 letter-spacing:0;color:#152c45
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__media{position:absolute;inset:0}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__art{
 position:absolute;left:-5.077860%;top:0;width:113.202438%;height:100%;pointer-events:none
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__scene{
 position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__scene.is-on{opacity:1;visibility:visible}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__scene--reference img{
 display:block;width:100%;height:100%;object-fit:fill;
 mask:url('../img/pleasure-pier-reference-20261009/design-mask.svg') 0 0/100% 100% no-repeat;
 -webkit-mask:url('../img/pleasure-pier-reference-20261009/design-mask.svg') 0 0/100% 100% no-repeat
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__scene--photo{
 inset:3% 0 auto 34%;width:66%;height:84%;
 mask:url('../img/pleasure-pier-reference-20261009/photo-mask.svg') 0 0/100% 100% no-repeat;
 -webkit-mask:url('../img/pleasure-pier-reference-20261009/photo-mask.svg') 0 0/100% 100% no-repeat
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__scene--photo img{display:block;width:100%;height:100%;object-fit:cover}
/* Match the Bishop’s Palace circular play button. */
body.attractions-page .atx #pleasure-pier.pp-reference .pr__play{
 position:absolute;z-index:3;left:73.324306%;top:68.331675%;transform:translate(-50%,-50%);
 display:grid;place-items:center;width:65px;height:65px;min-height:0;max-width:none;padding:0;
 border:4px solid #fffdf5;border-radius:50%;background:#1e8c73;color:#fff;
 box-shadow:0 0 0 6px #ecd3a455;cursor:pointer;transition:background .25s,box-shadow .25s
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__play > svg{width:36px;height:36px;fill:currentColor}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__play:hover{background:#16796a;box-shadow:0 0 0 9px #ecd3a433}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__play:focus-visible{outline:3px solid #7c5936;outline-offset:4px}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__gallery{
 position:absolute;z-index:3;left:55.045396%;top:80.765143%;width:38.050102%;
 display:grid;grid-template-columns:3.520650cqw minmax(0,1fr) 3.520650cqw;
 align-items:center;gap:1.354096cqw
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__arrow{
 display:grid;place-items:center;width:100%;aspect-ratio:1;min-height:36px;padding:0;
 border:1px solid #d3d8dd;border-radius:50%;background:#fffdf8;color:#071c35;cursor:pointer
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__arrow svg{width:35%;height:35%}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__window{min-width:0;overflow:hidden;padding:10px 4px;margin:-10px -4px;touch-action:pan-y}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__track{display:flex;gap:1.354096cqw;min-width:0}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__thumb{
 position:relative;flex:0 0 calc((100% - 2.708192cqw)/3);aspect-ratio:126/110;
 min-width:0;display:block;overflow:hidden;padding:0;
 border:3px solid #fffdf8;border-radius:1.015572cqw;background:#e3e8e5;cursor:pointer;
 transition:border-color .2s ease,box-shadow .2s ease
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__thumb[aria-pressed="true"]{
 border-color:#fff;box-shadow:0 4px 12px #174b6960
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__thumb img{width:100%;height:100%;object-fit:cover}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__thumb--reference img{
 position:absolute;left:-100%;top:-5%;width:210%;height:auto;object-fit:fill
}
body.attractions-page .atx #pleasure-pier.pp-reference :is(.pr__arrow,.pr__thumb):focus-visible{
 outline:3px solid #b48d50;outline-offset:4px
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__thumb:focus-visible{outline-offset:-5px}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__status{
 position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip-path:inset(50%);white-space:nowrap
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__credits{
 margin-top:16px;text-align:right;font:400 11px/1.6 var(--hp-text);color:#7f8795
}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__credits summary{display:inline-block;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__credits p{margin:10px 0 0 auto;max-width:700px}
body.attractions-page .atx #pleasure-pier.pp-reference .pr__credits a{color:inherit;text-decoration:underline}
.pr__film-dialog{width:min(1100px,calc(100vw - 48px));max-height:calc(100dvh - 48px);margin:auto;padding:0;border:1px solid #c7ad83;border-radius:18px;background:#faf7ef;overflow:auto;box-shadow:0 30px 100px #0006}
.pr__film-dialog::backdrop{background:#051d30d9;backdrop-filter:blur(5px)}
.pr__film-head{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 30px}
.pr__film-head h3{font:400 30px/1 var(--hp-display);color:#073b57}
.pr__film-close{display:inline-flex;gap:12px;align-items:center;padding:10px 0;border:0;background:none;color:#073b57;font:400 16px/1 var(--hp-text);cursor:pointer}
.pr__film-close svg{width:18px;height:18px}
.pr__film-video{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 145px);background:#062540}
.pr__film-close:focus-visible{outline:2px solid #b48d50;outline-offset:4px}
body.attractions-page .atx #pleasure-pier.pp-reference.pr-enhanced :is(.pr__copy,.pr__media){opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s ease}
body.attractions-page .atx #pleasure-pier.pp-reference.pr-enhanced.is-revealed :is(.pr__copy,.pr__media){opacity:1;transform:none}
@media(max-width:1250px){
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__design{display:flex;flex-direction:column;gap:30px;aspect-ratio:auto}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__copy{position:relative;left:auto;top:auto;width:100%}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__kicker{font-size:14px;gap:20px;letter-spacing:.3em}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__kicker::before{width:54px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__title{margin:0;font-size:clamp(48px,12.5cqw,96px);line-height:.92}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__title::after{content:'';display:block;grid-column:1 / -1;width:84px;height:1px;margin:25px 0 0;background:linear-gradient(90deg,#ba8e43,transparent)}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__travel{margin-top:22px;font-size:21px;line-height:1.3}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__lead{max-width:660px;margin-top:24px;font-size:24px;line-height:1.3}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__media{position:relative;inset:auto;width:100%;max-width:900px;margin:0 auto}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__art{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1020/850;overflow:hidden}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__scene--reference img{position:absolute;left:-63.921569%;top:0;width:163.921569%;height:auto}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__scene--photo{inset:0;width:100%;height:100%}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__play{left:auto;right:16%;top:calc(min(100cqw,900px) * .833333333 - 110px);bottom:auto;transform:none}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__gallery{position:relative;left:auto;top:auto;width:min(100%,640px);margin:-26px auto 0;grid-template-columns:44px minmax(0,1fr) 44px;gap:10px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__arrow{min-height:44px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__track{gap:10px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__thumb{flex-basis:calc((100% - 20px)/3);border-radius:12px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__credits{text-align:left;font-size:10px}
}
@media(max-width:540px){
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__design{gap:24px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__kicker{font-size:12px;gap:14px;letter-spacing:.25em}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__kicker::before{width:40px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__travel{font-size:18px;margin-top:18px}
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__lead{font-size:22px;line-height:1.35;margin-top:20px}
 .pr__film-dialog{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:12px}
 .pr__film-head{padding:16px;gap:16px}
 .pr__film-head h3{font-size:25px}
 .pr__film-close{font-size:14px;gap:8px}
}
@media(prefers-reduced-motion:reduce){
 body.attractions-page .atx #pleasure-pier.pp-reference :is(.pr__scene,.pr__thumb,.pr__play){transition:none}
 body.attractions-page .atx #pleasure-pier.pp-reference.pr-enhanced :is(.pr__copy,.pr__media){opacity:1;transform:none;transition:none}
}

/* Use the same small-screen type sizes as Moody Gardens. */
@media(max-width:360px){
 body.attractions-page .atx #pleasure-pier.pp-reference .pr__lead{font-size:21px}
}