/* The seasonal offer dialog.
   -----------------------------------------------------------------------
   The poster is the whole thing. The dialog carries no chrome of its own —
   no box, no border, no padding — so what a visitor sees is the artwork and
   nothing else, over a softly dimmed page. */

/* Big enough to read at a glance, small enough to stay an offer rather than
   take the page over. */
.promo{
  background:transparent; border:0; padding:0; overflow:visible;
  width:min(640px,88vw); max-width:88vw; max-height:86svh;
}
.promo::backdrop{background:#0d241bb3}
@supports (backdrop-filter:blur(1px)){.promo::backdrop{backdrop-filter:blur(3px)}}
.promo:focus{outline:none}

.promo[open]{
  display:block; position:relative; line-height:0;
  animation:promo-in .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes promo-in{from{opacity:0;transform:translateY(14px) scale(.985)}}

/* The poster, as supplied. Whole, never cropped, and never taller than the
   window it has to fit inside. */
.promo-poster{display:block;border-radius:14px;overflow:hidden;box-shadow:0 40px 120px #0a1f17a6}
.promo-poster img{display:block;width:100%;height:auto;max-height:86svh;object-fit:contain}
.promo-poster:focus-visible{outline:3px solid #f8f4e8;outline-offset:4px}

/* The poster draws its own close mark in the top right. This sits over it:
   a real button with a real hit area, invisible until it is wanted. */
/* Placed by its own centre, measured off the artwork: the mark sits 3.5% in
   from the right edge and 4.8% down. The half-size translate keeps the
   button centred on that point whatever size the poster is drawn at. */
.promo-close{
  position:absolute; top:4.8%; right:3.5%; transform:translate(50%,-50%);
  /* Exactly twice the mark's inset, so a button centred on it finishes
     flush with the poster's edge instead of hanging over it. */
  width:7%; aspect-ratio:1; min-width:44px;
  border:0; border-radius:50%; background:transparent; cursor:pointer;
  transition:background .2s;
}
.promo-close:hover{background:#17322540}
.promo-close:focus-visible{outline:3px solid #f8f4e8;outline-offset:2px}

@media(max-width:720px){.promo{width:min(400px,90vw);max-width:90vw}}
@media(prefers-reduced-motion:reduce){.promo[open]{animation:none}}