/* The offer pop-up (js/offer.js): a centred native <dialog> over a dark scrim, black panel, 1px line, the site's own button.
   Sizes come from --ofr-ar (picture width / height), --ofr-ar-m (phone picture) and --ofr-rest (height the text and button
   need), so the picture is shown whole and the panel always fits the screen, no scrolling, from a 390 x 844 phone up. */
.ofr{
  --ofr-ar:1.7778; --ofr-ar-m:1.7778; --ofr-rest:150px; --ofr-use:var(--ofr-ar);
  position:fixed;inset:0;margin:auto;padding:0;border:1px solid var(--line);background:var(--raise);color:var(--ink);
  width:min(calc(100vw - 2*var(--gut) - var(--sal) - var(--sar)), 880px, calc((100dvh - var(--ofr-rest) - var(--sat) - var(--sab)) * var(--ofr-use)));
  min-width:min(300px, calc(100vw - 32px));
  height:fit-content;max-height:calc(100dvh - 24px);max-width:none;overflow:hidden;overscroll-behavior:contain}
@media (max-width:640px){.ofr{--ofr-use:var(--ofr-ar-m)}}
.ofr::backdrop{background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ofr[open]{animation:ofr-in .5s var(--ease) both}
.ofr[open]::backdrop{animation:ofr-fade .4s ease both}
.ofr.out{animation:ofr-out .22s ease both}
.ofr.out::backdrop{animation:ofr-fade-out .22s ease both}
@keyframes ofr-in{from{opacity:0;transform:translateY(14px) scale(.965)}to{opacity:1;transform:none}}
@keyframes ofr-out{to{opacity:0;transform:translateY(6px) scale(.985)}}
@keyframes ofr-fade{from{opacity:0}to{opacity:1}}
@keyframes ofr-fade-out{to{opacity:0}}
html.offer-open,html.offer-open body{overflow:hidden}

.ofr-pic{display:block;background:var(--ground)}
.ofr-img{display:block;width:100%;height:auto}
.ofr-h{margin:0;padding:20px 24px 0;font-family:var(--serif);font-stretch:125%;text-transform:uppercase;font-weight:800;font-size:clamp(18px,2.2vw,26px);line-height:1.05;letter-spacing:.06em;text-align:center}
.ofr-t{margin:10px auto 0;padding:0 24px;max-width:56ch;font-size:16px;line-height:1.45;color:var(--soft);text-align:center}
.ofr-act{display:flex;justify-content:center;padding:20px 24px 22px}
.ofr .ofr-cta{width:auto;min-width:200px;min-height:48px;padding:0 28px;font-size:16px}
.ofr-x{position:absolute;top:10px;right:10px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);border:1px solid rgba(252,252,252,.35);border-radius:50%;color:var(--ink);cursor:pointer;
  font-family:var(--sans);font-size:28px;font-weight:300;line-height:1;transition:background .15s,border-color .15s}
.ofr-x span{transform:translateY(-1px)}
@media (hover:hover){.ofr-x:hover{background:rgba(0,0,0,.8);border-color:var(--ink)}}
.ofr:focus,.ofr:focus-visible{outline:none}
.ofr-x:focus-visible,.ofr-cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .ofr[open]{animation:ofr-fade .3s ease both}
  .ofr.out{animation:ofr-fade-out .15s ease both}
  .ofr[open]::backdrop{animation:ofr-fade .3s ease both}
  .ofr-x{transition:none}
}
html.rm .ofr[open]{animation:ofr-fade .3s ease both}