/* Booking artwork from the supplied reference, with live copy and a real CTA. */
@font-face{font-family:"Booking Reference Bodoni";src:url("../fonts/library/bauer-bodoni/bauer-bodoni-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Booking Reference Italic";src:url("../fonts/hero/newsreader-italic-var.woff2") format("woff2");font-weight:200 800;font-style:italic;font-display:swap}
@font-face{font-family:"Booking Reference Text";src:url("../fonts/library/univers-next-paneuropean/univers-next-paneuropean-400.woff2") format("woff2");font-weight:400;font-display:swap}
.bkr{--bkr-rail:170px;position:relative;padding:150px 0;background:#faf6ef;color:#0b4b69}
.bkr__frame{max-width:1900px;margin-inline:auto;padding-inline:var(--bkr-rail)}
.bkr__canvas{container-type:inline-size;position:relative}
.bkr__card{position:relative;isolation:isolate;aspect-ratio:1829/711;margin:0;overflow:hidden;border:1px solid #dfd7c954;border-radius:1.55cqw;background:#faf6ef;box-shadow:0 9px 20px -12px #39413b66}
.bkr__art{position:absolute;z-index:-1;inset:0;display:block;width:100%;height:100%;max-width:none;pointer-events:none;user-select:none}
.bkr__photo{display:none}
.bkr__copy{position:absolute;left:58.6%;top:16.3%;width:35.8%}
.bkr__kicker{margin:0 0 1.1cqw;color:#b17a49;font:400 .99cqw/1.25 "Booking Reference Text",Arial,sans-serif;letter-spacing:.29em;text-transform:uppercase}
.bkr__title{margin:0;color:#084966;font:400 5.35cqw/.94 "Booking Reference Bodoni",Georgia,serif;letter-spacing:-.02em}
.bkr__title>span{display:block;white-space:nowrap}
.bkr__title em{color:#ad784b;font:400 1.12em/1 "Booking Reference Italic",Georgia,serif;font-style:italic;letter-spacing:-.015em}
.bkr__lead{max-width:32.4cqw;margin:.6cqw 0 0;color:#0b5375;font:400 1.23cqw/1.42 "Booking Reference Text",Arial,sans-serif;letter-spacing:-.01em}
.bkr__phone{color:inherit;text-decoration:none;white-space:nowrap}
.bkr__phone:hover{text-decoration:underline}
.bkr__button{display:flex;align-items:center;justify-content:center;gap:2.15cqw;width:15.7cqw;min-height:3.65cqw;max-width:100%;margin-top:1.07cqw;padding:.8cqw 1.65cqw;border:0;border-radius:999px;background:#a9723e;color:#fffaf5;box-shadow:0 3px 8px #5f432f35;font:400 1.25cqw/1.2 "Booking Reference Text",Arial,sans-serif;text-decoration:none;transition:background .2s,box-shadow .2s}
.bkr__button svg{width:1.32cqw;height:.95cqw;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.bkr__button:hover{background:#946031;box-shadow:0 5px 12px #5f432f40}
.bkr__button:focus-visible,.bkr__phone:focus-visible{outline:3px solid #084966;outline-offset:5px}
@media(max-width:1450px){.bkr{--bkr-rail:clamp(80px,8.947vw,170px)}}
@media(max-width:1100px) and (min-width:901px){.bkr__card{aspect-ratio:1829/805}.bkr__copy{top:14%}.bkr__lead{font-size:1.5cqw;line-height:1.45;margin-top:2cqw}.bkr__button{width:18cqw;min-height:4.5cqw;font-size:1.5cqw;margin-top:1.5cqw}}
@media(max-width:900px){
  .bkr{--bkr-rail:24px}
  .bkr__card{aspect-ratio:auto;border-radius:24px}
  .bkr__art{inset:auto -12px 0 auto;width:220%;height:260px;opacity:.48;-webkit-mask-image:linear-gradient(to right,transparent 55%,#000 62%),linear-gradient(to bottom,transparent 20%,#000 70%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent 55%,#000 62%),linear-gradient(to bottom,transparent 20%,#000 70%);mask-composite:intersect}
  .bkr__photo{position:relative;display:block;height:clamp(230px,75cqw,440px);overflow:hidden;background:#f5edde}
  .bkr__photo img{position:absolute;display:block;left:0;top:0;width:220%;height:auto;max-width:none;pointer-events:none;user-select:none}
  .bkr__photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 78%,#faf6ef)}
  .bkr__copy{position:relative;inset:auto;width:auto;padding:30px 34px 68px}
  .bkr__kicker{font-size:12px;letter-spacing:.24em;margin-bottom:21px}
  .bkr__title{font-size:clamp(38px,9.2cqw,69px);line-height:.99}
  .bkr__lead{font-size:18px;line-height:1.55;margin-top:25px;max-width:none}
  .bkr__button{width:238px;min-height:58px;font-size:20px;gap:28px;margin-top:24px;padding:14px 26px}
  .bkr__button svg{width:24px;height:17px}
}
@media(max-width:540px){
  .bkr__card{border-radius:22px}
  .bkr__copy{padding:26px 24px 60px}
  .bkr__kicker{font-size:10px;letter-spacing:.22em;margin-bottom:20px}
  .bkr__title{font-size:clamp(32px,11.1cqw,52px)}
  .bkr__lead{font-size:16px;line-height:1.55;margin-top:23px}
  .bkr__button{width:210px;min-height:54px;font-size:18px;gap:26px;margin-top:23px}
  .bkr__art{height:210px;opacity:.4}
}
@media(prefers-reduced-motion:reduce){.bkr__button{transition:none}}

/* "Sandpiper RV Resort" label removed from "Book your site by the sea." (client, 2026-10-07). It was 1.25 x .99cqw tall + a 1.1cqw gap = ~2.34cqw at the top of the copy block,
   so on the desktop card the block starts half of that (1.17cqw) lower to stay where it was optically centred. Stacked layout (<=900px) keeps its own padding. */
@media(min-width:901px){.bkr__copy{top:calc(16.3% + 1.17cqw)}}
@media(min-width:901px) and (max-width:1100px){.bkr__copy{top:calc(14% + 1.17cqw)}}