/* The Strand: balanced artwork and readable copy on the Attractions hero rails. */
body.attractions-page .atx #the-strand.stm-sec {
  --stm-ink: #073b57;
  --stm-tan: #917658;
  --stm-gold: #b6895d;
  --stm-rail: 170px;
  --stm-right-rail: calc((100vw - min(100vw, 1900px)) / 2 + 170px);
  padding: 150px var(--stm-right-rail) 60px var(--stm-rail);
  background: var(--paper);
  color: var(--stm-ink);
}
#the-strand .stm { container-type: inline-size; }
#the-strand .stm__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(48px, 4.2vw, 80px);
}
#the-strand .stm__art {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  pointer-events: none;
}
#the-strand .stm__art img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
#the-strand .stm__copy { position: relative; width: 100%; min-width: 0; z-index: 1; }
body.attractions-page .atx #the-strand .stm__title {
  margin: 0;
  font: 400 clamp(46px, 4vw, 72px)/1.08 var(--hp-display);
  letter-spacing: -.03em;
  color: var(--stm-ink);
  -webkit-text-stroke: .0086em currentColor;
}
#the-strand .stm__title > span { display: block; white-space: normal; }
#the-strand .stm__title > span + span { color: var(--stm-tan); }
#the-strand .stm__lead {
  margin: 24px 0 0;
  max-width: none;
  font: 400 clamp(21px, 1.45vw, 26px)/1.45 var(--hp-text);
  letter-spacing: 0;
  color: var(--stm-ink);
}
#the-strand .stm__ornament {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(100%, 420px);
  margin: 26px 0 0;
  color: var(--stm-gold);
}
#the-strand .stm__ornament span { flex: 1; height: 1px; background: #d4b898; }
#the-strand .stm__ornament svg { flex: none; width: 38px; height: 42px; }
#the-strand .stm__play {
  margin: 22px 0 0;
  cursor: pointer;
}
body.attractions-page .atx #the-strand.stm-sec .stm__play.sp-film-control { max-width: 100%; }
#the-strand .stm__play:focus-visible { outline: 2px solid var(--stm-ink); outline-offset: 5px; }

@media (max-width: 1450px) {
  body.attractions-page .atx #the-strand.stm-sec { --stm-right-rail: clamp(80px, 8.947vw, 170px); }
}
/* Stack before either column becomes cramped. */
@media (max-width: 1199px) {
  #the-strand .stm__stage { grid-template-columns: minmax(0, 1fr); row-gap: 44px; }
  #the-strand .stm__copy { grid-row: 1; }
  #the-strand .stm__art { grid-row: 2; max-width: 660px; justify-self: center; }
  body.attractions-page .atx #the-strand .stm__title { font-size: clamp(44px, 5.8vw, 64px); }
  #the-strand .stm__lead { font-size: 22px; }
}
/* The hero uses its flexible header rails between 901px and 1100px. */
@media (min-width: 901px) and (max-width: 1100px) {
  body.attractions-page .atx #the-strand.stm-sec { --stm-rail: clamp(80px, 8.947vw, 170px); }
}
@media (max-width: 900px) {
  body.attractions-page .atx #the-strand.stm-sec { --stm-rail: 24px; --stm-right-rail: 24px; }
}
@media (max-width: 540px) {
  body.attractions-page .atx #the-strand.stm-sec {
    --sp-film-size: 64px;
    --sp-film-gap: 12px;
    --sp-film-label: 11px;
  }
  body.attractions-page .atx #the-strand .stm__title { font-size: clamp(38px, 10vw, 50px); }
  #the-strand .stm__lead { margin-top: 22px; font-size: 20px; line-height: 1.45; }
  #the-strand .stm__stage { row-gap: 36px; }
}