/* Keep the original decorative frame independent from the original park photo. */
.pdh-coast__watercolor{position:absolute;inset:0;z-index:1;pointer-events:none;user-select:none}
.pdh-coast__watercolor svg{position:absolute;left:0;width:100%;display:block;overflow:hidden}
.pdh-coast__paper-top{top:0;height:clamp(163px,20.2svh,211px)}
.pdh-coast__paper-bottom{bottom:0;height:clamp(170px,24svh,270px)}
.pdh-coast .pdh-coast__copy{z-index:2}
/* The paper now sits beneath the controls, so use the Attractions page's dark ink. */
body.park-home-header .pdh-coast .pha__menu{color:#244d61;filter:none}
body.park-home-header .pdh-coast .pha__menu-label{background-image:linear-gradient(#244d61,#244d61)}
body.park-home-header .pdh-coast .pha__menu-lines i{background-image:linear-gradient(#477b90,#244d61);background-color:#244d61}
body.park-home-header .pdh-coast .pha__menu-lines i:nth-child(2){background-image:linear-gradient(#8baab7,#477b90)}
body.park-home-header .pdh-coast .pha__menu:focus-visible{outline-color:#477b90}
/* Retain the painted border, then ease its final edge into the page canvas. */
body.pd-coastal-canvas .pdh.pdh-coast::after{z-index:3;height:clamp(32px,5svh,54px)}
@media(max-width:900px){.pdh-coast__paper-top{height:163px}.pdh-coast__paper-bottom{height:200px}}
@media(max-width:700px){.pdh-coast__paper-top{height:154px}.pdh-coast__paper-bottom{height:165px}}
@media(max-width:600px) and (max-height:700px){.pdh-coast__paper-top{height:114px}.pdh-coast__paper-bottom{height:120px}body.pd-coastal-canvas .pdh.pdh-coast::after{height:25px}}
@media(max-height:540px) and (min-width:601px){.pdh-coast__paper-top{height:101px}.pdh-coast__paper-bottom{height:110px}body.pd-coastal-canvas .pdh.pdh-coast::after{height:25px}}
/* Let the painted shoreline continue beyond the hero, as on the homepage. */
body.park-home-header main>.pdh.pdh-coast{
 --pd-shore-height:clamp(170px,24svh,270px);
 --pd-shore-bleed:clamp(64px,8svh,90px);
 --pd-shore-fade:clamp(96px,12svh,130px);
 overflow:visible;clip-path:inset(0 0 calc(-1 * var(--pd-shore-bleed)) 0);
}
.pdh-coast .pdh-coast__paper-bottom{
 bottom:calc(-1 * var(--pd-shore-bleed));
 height:calc(var(--pd-shore-height) * 1.15 + var(--pd-shore-bleed));
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--pd-shore-fade)),rgba(0,0,0,.99) calc(100% - var(--pd-shore-fade) * .9),rgba(0,0,0,.94) calc(100% - var(--pd-shore-fade) * .8),rgba(0,0,0,.84) calc(100% - var(--pd-shore-fade) * .7),rgba(0,0,0,.68) calc(100% - var(--pd-shore-fade) * .6),rgba(0,0,0,.5) calc(100% - var(--pd-shore-fade) * .5),rgba(0,0,0,.32) calc(100% - var(--pd-shore-fade) * .4),rgba(0,0,0,.16) calc(100% - var(--pd-shore-fade) * .3),rgba(0,0,0,.06) calc(100% - var(--pd-shore-fade) * .2),rgba(0,0,0,.01) calc(100% - var(--pd-shore-fade) * .1),transparent 100%);
 mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - var(--pd-shore-fade)),rgba(0,0,0,.99) calc(100% - var(--pd-shore-fade) * .9),rgba(0,0,0,.94) calc(100% - var(--pd-shore-fade) * .8),rgba(0,0,0,.84) calc(100% - var(--pd-shore-fade) * .7),rgba(0,0,0,.68) calc(100% - var(--pd-shore-fade) * .6),rgba(0,0,0,.5) calc(100% - var(--pd-shore-fade) * .5),rgba(0,0,0,.32) calc(100% - var(--pd-shore-fade) * .4),rgba(0,0,0,.16) calc(100% - var(--pd-shore-fade) * .3),rgba(0,0,0,.06) calc(100% - var(--pd-shore-fade) * .2),rgba(0,0,0,.01) calc(100% - var(--pd-shore-fade) * .1),transparent 100%);
}
/* Fade the photograph underneath the artwork, without painting over the border. */
body.pd-coastal-canvas .pdh.pdh-coast::after{z-index:0;height:26%}
@media(max-width:900px){body.park-home-header main>.pdh.pdh-coast{--pd-shore-height:200px;--pd-shore-bleed:72px;--pd-shore-fade:110px}}
@media(max-width:700px){body.park-home-header main>.pdh.pdh-coast{--pd-shore-height:165px;--pd-shore-bleed:64px;--pd-shore-fade:96px}}
@media(max-width:600px) and (max-height:700px){body.park-home-header main>.pdh.pdh-coast{--pd-shore-height:120px;--pd-shore-bleed:48px;--pd-shore-fade:80px}}
@media(max-height:540px) and (min-width:601px){body.park-home-header main>.pdh.pdh-coast{--pd-shore-height:110px;--pd-shore-bleed:48px;--pd-shore-fade:80px}}