/* Live tag copy over the approved artwork; the paper and leaves remain images. */
.resort-reference-section{margin-top:var(--gap);}
.resort-reference{position:relative;width:100%;max-width:1706px;margin:0 auto;container-type:inline-size;}
.resort-reference__clips{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;}
.resort-reference__landscape{position:relative;}
/* Copy the upper-right and bottom brushwork from the supplied reference image. */
.resort-reference__landscape::before{
  content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:url('img/art/resort-reference-watercolor-border.svg?v=1') center/100% 100% no-repeat;
}
.resort-reference__visual{
  position:relative;
  /* Use the reference page's outline, wash and pigment fringe together. */
  -webkit-mask:url('../staying-resort-reference/watercolor-right-outline-v5.svg?v=3') center/100% 100% no-repeat;
  mask:url('../staying-resort-reference/watercolor-right-outline-v5.svg?v=3') center/100% 100% no-repeat;
  mask-mode:alpha;
}
.resort-reference__fringe{
  position:absolute;inset:0;pointer-events:none;opacity:.7;
  background:url('../staying-resort-reference/watercolor-right-fringe-v5.svg?v=3') center/100% 100% no-repeat;
}
.resort-reference__art{
  display:block;width:100%;height:auto;
  -webkit-mask:url('img/art/resort-photo-without-tag-v5.svg') center/100% 100% no-repeat;
  mask:url('img/art/resort-photo-without-tag-v5.svg') center/100% 100% no-repeat;
  mask-mode:alpha;
}
.resort-reference__frame{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  background:url('../staying-resort-reference/watercolor-layered-wash-v3.png?v=1') center/100% 100% no-repeat;
  opacity:.92;pointer-events:none;
  clip-path:polygon(38% 0,100% 0,100% 80%,88% 80%,88% 25%,38% 25%);
  -webkit-mask-image:linear-gradient(to right,transparent 38%,#000 52%),linear-gradient(to bottom,#000 70%,transparent 80%);
  -webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat;
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 38%,#000 52%),linear-gradient(to bottom,#000 70%,transparent 80%);
  mask-size:100% 100%;mask-repeat:no-repeat;mask-composite:intersect;
}
.resort-reference__landscape::after{
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(to left,#faf6ef,rgba(250,246,239,0)) right top/8px 100% no-repeat,
    linear-gradient(to bottom,#faf6ef,rgba(250,246,239,0)) right top/62% 8px no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 38%,#000 52%),linear-gradient(to bottom,#000 70%,transparent 80%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 38%,#000 52%),linear-gradient(to bottom,#000 70%,transparent 80%);
  mask-composite:intersect;
}
.resort-reference__tag{
  /* Make room for the town headline's full size while keeping the tag's height. */
  position:absolute;left:4.396249%;top:0;width:41%;height:91.32321%;
  pointer-events:auto;isolation:isolate;
}
.resort-reference__tag-art{
  display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(70,55,35,.14));
}
/* The rope carried on above the art (client, 2026-09-18): 44 more source rows of it,
   outpainted from the rope's own strands and faded to the page cream on a smootherstep,
   seated on the rope's column of the art (x 370..434 of the 640 viewBox) in the same
   stretched units as the SVG, so it joins the art's top edge at every width. */
.resort-reference__rope{
  position:absolute;left:46.09375%;top:-5.2257%;width:10%;height:5.2257%;
  display:block;object-fit:fill;pointer-events:none;
  filter:drop-shadow(0 8px 12px rgba(70,55,35,.14));
}
.resort-reference__emblem{
  position:absolute;left:33.117063%;top:19.951116%;width:32.520625%;height:8.32209%;
  display:flex;align-items:center;justify-content:center;gap:1cqw;color:#b58a4a;
}
.resort-reference__emblem span{height:1px;flex:1;background:currentColor;}
.resort-reference__emblem svg{width:4.1cqw;height:auto;flex:none;}
.resort-reference__heading{
  /* Centred on the tag (client, 2026-09-18): the box is seated so its middle sits on the
     emblem's centre line, 49.4% of the tag, and both lines centre inside it. */
  position:absolute;left:13.814%;top:30.167577%;width:71.172187%;margin:0;
  font-family:var(--disp);font-size:clamp(40px,4.4vw,62px);font-weight:400;line-height:.94;
  letter-spacing:-.026em;text-align:center;color:var(--navy);
  pointer-events:auto;transform:translateY(-5px);
}
.resort-reference__script{
  display:inline-block;position:relative;width:max-content;margin:0 0 0 .1em;transform:translateY(.04em);
  font-family:var(--script);font-size:1.08em;line-height:.86;letter-spacing:0;color:var(--teal);
}
.resort-reference__headline-line{display:block;}
.resort-reference__headline-line+.resort-reference__headline-line{margin-top:.12em;white-space:nowrap;}
.resort-reference__script::after{
  content:"";position:absolute;left:3%;right:4%;bottom:-.2em;
  height:.055em;border-top:.045em solid #b58a4a;border-radius:50%;transform:rotate(-4deg);
}
.resort-reference__copy{
  position:absolute;left:15.337344%;top:60.5%;width:74.104375%;
  font:400 16px/1.6 var(--text);color:var(--ink-soft);
  pointer-events:auto;
}
.resort-reference__copy p+p{margin-top:.5em;}
.resort-reference__book{
  position:absolute;left:15.337344%;top:84%;text-decoration:none;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;
}
.resort-reference__book.pill--solid{border-color:rgba(181,137,74,.78);}
.resort-reference__book.pill--solid:hover{border-color:#b58a4a;}
.resort-reference__book svg{flex:0 0 auto;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.resort-reference__book:hover svg{transform:translateX(3px);}
.resort-reference__book:focus-visible{
  outline:2px solid #143159;outline-offset:3px;
}
@media(prefers-reduced-motion:reduce){
  .resort-reference__book,.resort-reference__book svg{transition:background .22s ease;}
  .resort-reference__book:hover,.resort-reference__book:hover svg{transform:none;}
}
.resort-reference .sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/* Give the live copy a readable tag of its own when the two-column artwork is too narrow. */
@media(max-width:1150px){
  .resort-reference__copy{font-size:15px;}
}
/* Preserve the headline's placement and leave room for the full-size body copy. */
@media(min-width:1101px){
  .resort-reference__tag{height:calc(49.355216cqw + 30px);}
  .resort-reference__emblem{top:9.846917cqw;}
  .resort-reference__heading{top:14.889273cqw;}
  .resort-reference__copy{top:29cqw;}
  .resort-reference__book{top:auto;bottom:45px;}
}
@media(max-width:1100px){
  .resort-reference__landscape{
    max-width:720px;margin:0 auto;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 10%);
    mask-image:linear-gradient(to right,transparent,#000 10%);
  }
  .resort-reference__visual{width:173%;margin-left:-73%;}
  .resort-reference__landscape::before{left:-73%;right:auto;width:173%;}
  .resort-reference__fringe{left:-73%;width:173%;}
  .resort-reference__rope{display:none;}
  .resort-reference__tag{
    position:relative;inset:auto;width:min(100%,520px);height:auto;margin:20px auto 0;
    padding:clamp(104px,24cqw,140px) calc(min(100cqw,520px) * .11) 62px calc(min(100cqw,520px) * .13);
    display:flex;flex-direction:column;align-items:center;
  }
  .resort-reference__emblem,.resort-reference__heading,.resort-reference__copy,.resort-reference__book{position:relative;left:auto;top:auto;}
  .resort-reference__emblem{width:140px;height:42px;gap:14px;margin-bottom:12px;}
  .resort-reference__emblem svg{width:42px;}
  .resort-reference__heading{width:100%;}
  .resort-reference__copy{width:100%;margin-top:36px;}
  .resort-reference__copy p+p{margin-top:16px;}
  .resort-reference__book{align-self:flex-start;margin-top:7px;}
}
@media(max-width:900px){
  .resort-reference__heading{font-size:clamp(36px,10vw,48px);}
}