/* Latest Strand reference: live typography, image artwork and hero content rails. */
body.attractions-page .atx #the-strand.st-reference{
 padding:150px var(--at-content-rail) 50px;background:var(--paper);color:#073b57
}
#the-strand .st__inner{position:relative;container-type:inline-size;isolation:isolate}
#the-strand .st__header{position:relative;z-index:2;text-align:center}
#the-strand .st__kicker{
 display:flex;justify-content:center;align-items:center;gap:1.8cqw;margin:0;
 font:400 max(11px,1.015572cqw)/1.4 var(--hp-text);letter-spacing:.3em;text-transform:uppercase;color:#073b57
}
#the-strand .st__kicker::before,#the-strand .st__kicker::after{
 content:'';width:4cqw;height:1px;flex:none;background:linear-gradient(90deg,transparent,#ba8e43)
}
#the-strand .st__kicker::after{transform:rotate(180deg)}
body.attractions-page .atx #the-strand .st__title{
 margin:0;
 color:#073b57
}
#the-strand .st__title>span{display:block}
#the-strand .st__title>span+span{color:#917658}
#the-strand .st__title em{font:inherit;font-style:normal;letter-spacing:inherit;color:inherit}
#the-strand .st__stage{
 display:grid;grid-template-columns:25.45% minmax(0,1fr) 12.4%;gap:2cqw;
 position:relative;margin-top:2cqw;min-height:49.019608cqw;align-items:center
}
#the-strand .st__copy{position:relative;z-index:2;min-width:0;grid-column:1;grid-row:1;align-self:start;margin-top:7.5cqw}
#the-strand .st__lead{margin:0;font:400 max(16px,1.733150cqw)/1.26 var(--hp-text);letter-spacing:0;color:#073b57}
#the-strand .st__ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:2cqw 0 0;color:#bd944e}
#the-strand .st__ornament::before,#the-strand .st__ornament::after{content:'';width:35%;height:1px;background:linear-gradient(90deg,transparent,#bd944e)}
#the-strand .st__ornament::after{transform:rotate(180deg)}
#the-strand .st__ornament span{font:400 36px/1 Georgia,serif}
#the-strand .st__media{position:relative;min-width:0;grid-column:2;grid-row:1;padding-bottom:3cqw}
#the-strand .st__art{position:relative;width:100%;aspect-ratio:1050/750;pointer-events:none}
#the-strand .st__art img{
 position:absolute;left:-33.428571%;top:-22.666667%;width:159.238095%;height:auto;max-width:none;max-height:none;
 mask:url('../img/strand-reference-20261009-133550/photo-mask.svg?v=4') 0 0/100% 100% no-repeat;
 -webkit-mask:url('../img/strand-reference-20261009-133550/photo-mask.svg?v=4') 0 0/100% 100% no-repeat
}
#the-strand .st__badge{
 position:absolute;left:0;bottom:7.5cqw;z-index:2;width:14.117647cqw;aspect-ratio:216/207;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45cqw;padding:1cqw;
 border:1px solid #e7d7bc;background:#fcf8ef;color:#073b57;text-align:center;
 box-shadow:0 10px 24px #57443126;font:400 max(14px,1.581843cqw)/1.15 var(--hp-text)
}
#the-strand .st__badge p{margin:0;white-space:nowrap;text-transform:uppercase;font:inherit;letter-spacing:-.025em}
#the-strand .st__badge h3{margin:0;font:700 1em/1.12 var(--hp-display);letter-spacing:-.025em;text-transform:uppercase;color:#073b57}
#the-strand .st__badge-flourish{width:100%;height:1.7cqw;min-height:18px;flex:none}
#the-strand .st__badge-flourish:last-child{transform:rotate(180deg)}
#the-strand .st__features{
 position:relative;z-index:2;grid-column:3;grid-row:1;align-self:stretch;min-width:0;
 display:flex;flex-direction:column;justify-content:space-between;gap:2cqw;padding:2cqw 0 4cqw;margin:0;list-style:none;text-align:center
}
#the-strand .st__features li{min-width:0}
#the-strand .st__icon{
 display:grid;place-items:center;width:7.427785cqw;aspect-ratio:1;max-width:100%;margin:0 auto 1cqw;
 border:1px solid #c8a06e;border-radius:50%;background:#f5ecdb;color:#073b57
}
#the-strand .st__icon svg{width:54%;height:54%;fill:currentColor;stroke:none}
body.attractions-page .atx #the-strand .st__features h3{margin:0;font:400 max(14px,1.581843cqw)/1.15 var(--hp-text);letter-spacing:0;color:#073b57}
/* Match the Pleasure Pier circular film control. */
#the-strand .st__play{
 position:absolute;z-index:3;right:10%;bottom:5.5cqw;
 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
}
#the-strand .st__play > svg{width:36px;height:36px;fill:currentColor}
#the-strand .st__play:hover{background:#16796a;box-shadow:0 0 0 9px #ecd3a433}
#the-strand .st__play:focus-visible{outline:3px solid #7c5936;outline-offset:4px}
#the-strand :focus-visible{outline:3px solid #7c5936;outline-offset:5px}
@media(max-width:1250px){
 #the-strand .st__kicker{font-size:12px;gap:14px}
 #the-strand .st__stage{display:flex;flex-direction:column;min-height:0;margin-top:32px;gap:28px;align-items:stretch}
 #the-strand .st__copy{margin-top:0}
 #the-strand .st__lead{max-width:580px;font-size:24px;line-height:1.3}
 #the-strand .st__ornament{margin-top:24px;max-width:240px}
 #the-strand .st__media{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding:0;width:100%;max-width:1050px;margin:0 auto}
 #the-strand .st__art{grid-column:1 / -1;grid-row:1}
 #the-strand .st__badge{position:relative;left:auto;bottom:auto;grid-column:1;grid-row:2;width:220px;padding:16px;gap:6px;font-size:clamp(16px,3.5cqw,23px)}
 #the-strand .st__badge-flourish{height:28px}
 #the-strand .st__play{position:relative;right:auto;bottom:auto;grid-column:2;grid-row:2;justify-self:center;margin-bottom:16px}
 #the-strand .st__features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:12px 0 0}
 #the-strand .st__icon{width:clamp(62px,12cqw,92px);margin-bottom:16px}
 body.attractions-page .atx #the-strand .st__features h3{font-size:clamp(16px,3.5cqw,23px);line-height:1.2}
}
@media(max-width:700px){
 #the-strand .st__media{grid-template-columns:minmax(0,1fr);gap:24px}
 #the-strand .st__badge{grid-column:1;grid-row:2;justify-self:center;width:185px}
 #the-strand .st__play{grid-column:1;grid-row:3;justify-self:center;margin-bottom:0}
}
@media(max-width:540px){
 #the-strand .st__kicker{font-size:11px;letter-spacing:.16em;gap:9px}
 #the-strand .st__kicker::before,#the-strand .st__kicker::after{width:16px}
 #the-strand .st__lead{font-size:22px;line-height:1.35}
 #the-strand .st__badge{font-size:18px}
 #the-strand .st__features{gap:12px}
 #the-strand .st__icon{width:60px}
 body.attractions-page .atx #the-strand .st__features h3{font-size:18px}
}
@media(max-width:360px){
 #the-strand .st__lead{font-size:21px}
 #the-strand .st__features{grid-template-columns:1fr;gap:20px}
 #the-strand .st__features li{display:grid;grid-template-columns:60px minmax(0,1fr);gap:18px;align-items:center;text-align:left}
 #the-strand .st__icon{margin:0}
}
@media(prefers-reduced-motion:reduce){#the-strand .st__play{transition:none}}

/* Local background repairs preserve the supplied photograph outside its baked controls. */
#the-strand .st__art .st__repair{position:absolute;left:-33.428571%;top:-22.666667%;width:159.238095%;height:auto;max-width:none;max-height:none;pointer-events:none}

/* Preserve the reference's full watercolor composition on the hero rails.
   Heading, description, feature labels and film type retain Moody Gardens' scales. */
@media(min-width:1251px){
 #the-strand .st__stage{display:block;aspect-ratio:1523/741;min-height:0;margin-top:0}
 #the-strand .st__copy{position:absolute;left:0;top:5.5cqw;width:22%;margin:0}
 #the-strand .st__ornament{max-width:19cqw}
 #the-strand .st__media{position:absolute;inset:0;width:100%;padding:0}
 #the-strand .st__art{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
 #the-strand .st__art img,#the-strand .st__art .st__repair{
  left:-4.727512%;top:-26.990553%;width:109.783322%;height:auto
 }
 #the-strand .st__features{position:absolute;left:auto;right:0;top:.525279cqw;width:12.4%;height:37cqw;padding:0;gap:2cqw}
 #the-strand .st__badge{left:19.566645%;top:27.77413cqw;bottom:auto;width:14.117647cqw}
 #the-strand .st__play{left:65.873%;right:auto;top:40.68cqw;bottom:auto;transform:translate(-50%,-50%)}
}
/* The illustrated festival placard is retained directly from the supplied design. */
#the-strand .st__badge{
 padding:0;border:0;background:#fcf8ef url('../img/strand-reference-20261009-133550/reference.png') 25.425% 84.877%/774.074074% auto no-repeat
}
#the-strand .st__badge>*{visibility:hidden}
