/* Jamaica Beach: original card artwork with live left caption, center copy and CTA. */
@font-face{
  font-family:'Reserve Caslon';src:url('fonts/library/caslon-old-face/caslon-old-face-400.woff2') format('woff2');
  font-weight:400;font-display:swap;
}
/* Use the Club Car background treatment across the whole section, beyond the shell. */
.reserve-together{
  position:relative;isolation:isolate;
  --reserve-background-fade:linear-gradient(to bottom,transparent 0%,#000 16%,#000 50%,rgba(0,0,0,.777778) 84%,transparent 100%);
  --reserve-background-edges:linear-gradient(to right,#000 0%,#000 18%,transparent 32%,transparent 68%,#000 82%,#000 100%);
}
.reserve-together > .reserve-reference__bgobj,.reserve-together::before{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('img/reserve-reference-beach-background-v1.png') center 40%/cover no-repeat;
}
.reserve-together > .reserve-reference__bgobj{
  opacity:.04;
  /* Keep the lower wash softer before its edge fades out. */
  -webkit-mask-image:var(--reserve-background-fade);
  mask-image:var(--reserve-background-fade);
}
/* Add a little depth at the sides, with a completely clear mask across the copy. */
.reserve-together::before{
  content:"";opacity:.02;
  -webkit-mask-image:var(--reserve-background-fade),var(--reserve-background-edges);
  -webkit-mask-composite:source-in;
  mask-image:var(--reserve-background-fade),var(--reserve-background-edges);
  mask-composite:intersect;
}
@media(max-width:1050px){
  .reserve-together{--reserve-background-edges:linear-gradient(to right,#000 0%,transparent 20%,transparent 80%,#000 100%);}
}
@media(max-width:650px){
  .reserve-together{--reserve-background-edges:linear-gradient(to right,#000 0%,transparent 20px,transparent calc(100% - 20px),#000 100%);}
}
.reserve-together > .shell{position:relative;z-index:1;}
.reserve-reference{
  --reserve-gold:#BC9D6B;
  position:relative;isolation:isolate;display:grid;
  grid-template-columns:minmax(0,.96fr) minmax(0,1.08fr) minmax(0,.96fr);
  gap:clamp(24px,3vw,40px);align-items:center;width:100%;margin:0;
}
.reserve-reference__photo{
  position:relative;min-width:0;margin:0;
}
.reserve-reference__photo,.reserve-reference__stay{
  filter:drop-shadow(0 18px 20px rgba(65,58,42,.18)) drop-shadow(0 3px 5px rgba(65,58,42,.09));
}
/* Crop the unchanged reference artwork to show each complete original card. */
.reserve-reference__photo-window{position:relative;aspect-ratio:490/732;overflow:hidden;}
.reserve-reference__photo-window,.reserve-reference__photo-caption{
  -webkit-mask-image:url('img/art/reserve-reference-photo-mask.svg?v=2');
  mask-image:url('img/art/reserve-reference-photo-mask.svg?v=2');
}
.reserve-reference__photo-window,.reserve-reference__photo-caption,.reserve-reference__stay-window{
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.reserve-reference__photo-window img{
  position:absolute;max-width:none;width:calc(100% * 1774 / 490);height:auto;
  left:calc(-100% * 70 / 490);top:calc(-100% * 98 / 732);
  filter:saturate(.95); /* 5% quieter (client, 2026-09-18); the artwork file is untouched */
}
/* Repair only the baked label letters; keep the original photograph and navy fade. */
.reserve-reference__photo-window::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url('img/art/reserve-reference-photo-label-repair-v1.png');
  background-size:calc(100% * 1774 / 490) calc(100% * 887 / 732);
  background-position:calc(100% * 70 / 1284) calc(100% * 98 / 155);
  background-repeat:no-repeat;
  -webkit-mask-image:url('img/art/reserve-reference-photo-label-repair-mask-v1.svg');
  mask-image:url('img/art/reserve-reference-photo-label-repair-mask-v1.svg');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.reserve-reference__photo-caption{
  position:absolute;inset:0;container-type:inline-size;color:#fff;
  /* Lighten the navy area by at most 5%, following its original fade toward the right. */
  background:radial-gradient(ellipse 105% 42% at 0% 100%,rgba(255,255,255,.05) 0%,rgba(255,255,255,.05) 35%,rgba(255,255,255,0) 100%);
}
.reserve-reference__photo-name{
  position:absolute;z-index:1;left:9.6%;top:75.7%;margin:0;user-select:text;
  font:400 4.8cqw/1.2 var(--disp);letter-spacing:.12em;text-transform:uppercase;
}
.reserve-reference__photo-name span{
  display:block;margin-top:.35em;font:400 3.9cqw/1.2 var(--text);letter-spacing:.13em;
}
.reserve-reference__photo-rule{
  position:absolute;left:9.6%;top:85.6%;width:13.8%;height:1px;background:#fff;
}
.reserve-reference__photo-tagline{
  position:absolute;left:calc(100% * 134 / 490);top:calc(100% * 611 / 732);
  width:calc(100% * 206 / 490);aspect-ratio:206/89;overflow:hidden;
}
/* Reuse the original script pixels; isolate white lettering from its blue ground. */
.reserve-reference__photo-tagline img{
  position:absolute;max-width:none;width:calc(100% * 1774 / 206);height:auto;
  left:calc(-100% * 204 / 206);top:calc(-100% * 709 / 89);
  filter:url(#reserve-reference-tagline-ink);pointer-events:none;
}
.reserve-reference__photo-filters{
  position:absolute;width:0;height:0;overflow:hidden;pointer-events:none;
}
/* The original artwork supplies the divider and script over its textured navy fade. */
.reserve-reference__photo-rule,.reserve-reference__photo-tagline{display:none;}
.reserve-reference__copy{min-width:0;text-align:center;}
.reserve-reference__eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:24px;
  font:400 10px/1.6 var(--text);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
}
.reserve-reference__eyebrow::before,.reserve-reference__eyebrow::after{
  content:"";flex:1 0 22px;height:1px;background:var(--reserve-gold);opacity:.65;
}
/* Reuse the town headline's type; retain the centered two-line arrangement. */
.reserve-reference__copy h2{margin:0;}
.reserve-reference__copy h2 .script{
  display:block;width:max-content;max-width:100%;margin:10px auto 0;
}
.reserve-reference__descriptions{
  position:relative;isolation:isolate;display:flow-root;margin:26px auto 0;
}
/* A feathered cream veil softens the photo wash behind the descriptions. */
.reserve-reference__descriptions::before{
  content:"";position:absolute;inset:-20px -12px;z-index:-1;pointer-events:none;
  background:var(--cream);opacity:.333333;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 12px,#000 calc(100% - 12px),transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 20px,#000 calc(100% - 20px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 12px,#000 calc(100% - 12px),transparent 100%),
    linear-gradient(to bottom,transparent 0%,#000 20px,#000 calc(100% - 20px),transparent 100%);
  mask-composite:intersect;
}
.reserve-reference__description{
  max-width:42ch;margin:0 auto;font:400 16px/1.6 var(--text);color:var(--ink-soft);
}
.reserve-reference__description+.reserve-reference__description{margin-top:22px;}
.reserve-reference__reservation{
  max-width:100%;margin-top:30px;text-decoration:none;
  border-color:rgba(181,137,74,.78);
}
.reserve-reference__reservation:hover{border-color:#b58a4a;}
.reserve-reference__reservation svg{flex:0 0 auto;transition:transform .3s cubic-bezier(.22,.61,.36,1);}
.reserve-reference__reservation:hover svg{transform:translateX(3px);}
.reserve-reference__reservation:focus-visible{outline:2px solid #143159;outline-offset:3px;}
@media(prefers-reduced-motion:reduce){
  .reserve-reference__reservation,.reserve-reference__reservation svg{transition:background .22s ease;}
  .reserve-reference__reservation:hover,.reserve-reference__reservation:hover svg{transform:none;}
}
.reserve-reference__divider{display:flex;align-items:center;gap:12px;max-width:220px;margin:24px auto 0;color:var(--navy);}
.reserve-reference__divider::before,.reserve-reference__divider::after{content:"";height:1px;flex:1;background:var(--reserve-gold);opacity:.7;}
.reserve-reference__divider svg{width:40px;height:14px;flex:none;}
.reserve-reference__note{margin:16px auto 0;max-width:42ch;font:400 16px/1.5 'Reserve Caslon',Georgia,serif;color:#63809B;}
.reserve-reference__stay{
  position:relative;min-width:0;width:100%;
}
.reserve-reference__stay-window{
  position:relative;aspect-ratio:508/774;overflow:hidden;
  -webkit-mask-image:url('img/art/reserve-reference-stay-mask.svg?v=2');
  mask-image:url('img/art/reserve-reference-stay-mask.svg?v=2');
}
.reserve-reference__stay img{
  position:absolute;max-width:none;width:calc(100% * 1774 / 508);height:auto;
  left:calc(-100% * 1256 / 508);top:calc(-100% * 60 / 774);
}
/* One border overlay per card keeps the footer's translucent gold color consistent. */
.reserve-reference__photo-caption::after,.reserve-reference__stay-window::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-position:center;background-size:100% 100%;background-repeat:no-repeat;
}
.reserve-reference__photo-caption::after{
  background-image:url('img/art/reserve-reference-photo-border.svg?v=5');
}
.reserve-reference__stay-window::after{
  background-image:url('img/art/reserve-reference-stay-border.svg?v=5');
}
/* Give the side cards more height while preserving the artwork's proportions. */
@media(min-width:1051px){
  .reserve-reference__photo,.reserve-reference__stay{width:112%;justify-self:center;}
}
@media(max-width:1150px){
  .reserve-reference__description{font-size:15px;}
}
@media(max-width:1050px){
  .reserve-reference{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;}
  .reserve-reference__copy{grid-column:1/-1;order:-1;max-width:600px;justify-self:center;}
  .reserve-reference__eyebrow{max-width:460px;margin-inline:auto;}
  .reserve-reference__photo{max-width:430px;width:100%;justify-self:start;}
  .reserve-reference__stay{max-width:430px;justify-self:end;}
}
@media(max-width:650px){
  .reserve-reference{grid-template-columns:minmax(0,1fr);gap:32px;}
  .reserve-reference__eyebrow{font-size:9px;gap:8px;margin-bottom:22px;}
  .reserve-reference__eyebrow::before,.reserve-reference__eyebrow::after{flex-basis:16px;}
  .reserve-reference__photo{max-width:none;}
  .reserve-reference__stay{max-width:none;}
}