/* 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:var(--wide);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}

/* Phones: the close button gets its own bar above the picture (it used to sit on the artwork), the panel runs nearly
   edge to edge, and the height budget counts the bar. .ofr-crop (js/offer.js, known artwork with no mobile picture):
   the picture is cropped to its headline and the fine print is set as text (.ofr-note) under it. */
.ofr-note{display:none}
@media (max-width:640px){
  .ofr{--ofr-bar:56px;--ofr-more:0px;padding-top:var(--ofr-bar);min-width:0;
    width:min(calc(100vw - 24px - var(--sal) - var(--sar)), calc((100dvh - var(--ofr-rest) - var(--ofr-bar) - var(--ofr-more) - 24px - var(--sat) - var(--sab)) * var(--ofr-use)))}
  .ofr-x{top:6px;right:6px}
  .ofr.ofr-crop{--ofr-more:56px}
  .ofr-crop .ofr-pic{position:relative;overflow:hidden;aspect-ratio:var(--ofr-ar-m)}
  .ofr-crop .ofr-img{position:absolute;max-width:none;width:var(--ofr-cs);height:auto;left:var(--ofr-cl);top:var(--ofr-ct)}
  .ofr-crop .ofr-note{display:block;margin:0;padding:14px 20px 0;font-size:13px;line-height:1.4;color:var(--soft);text-align:center;text-wrap:balance}
}