/* Cross-browser corrections that belong to the repo, not the canvas.
   Kept out of assets/site.css so a canvas republish cannot wipe them. */

/* Safari inflates text inside blocks it considers wide, and re-runs that
   calculation when scrolling settles — so headings appear to zoom in as you
   stop on a section. The marquee tracks on this site use width:max-content,
   which is exactly the kind of wide block that triggers it. Chrome does not do
   this on desktop, which is why it only shows in Safari. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* The marquee rows are meant to overflow their own strip, not influence the
   width of the section around them. clip stops that leaking into layout
   without creating a scroll container the way hidden can. */
.sig-strip, .ts-strip, .marquee, .newev, .adven { overflow-x: clip; }

/* The tax / fees / total line goes under the price rather than beside it.
   Both price blocks are styled inside the pages' own <style> blocks, which the
   canvas owns — overriding here keeps the change safe from a republish.
   Uppercase and wide letter-spacing suited a two-word label, not a breakdown,
   so those are relaxed for legibility at this length. */
.pp-price span {
  display: block;
  margin-left: 0;
  margin-top: 4px;
  letter-spacing: .04em;
  text-transform: none;
}
.pk-price .per {
  flex-basis: 100%;
  margin-top: 4px;
  letter-spacing: .04em;
  text-transform: none;
}

/* The heading already turns orange on hover; the price now follows it. */
.pk:hover .pk-price .amt,
.pp:hover .pp-price { color:#b8442f; }

/* ------------------------------------------------------------------
   Safari: pass cards growing without limit

   The pass card art is a box with `aspect-ratio:4/3` and no width of its
   own, holding an <img> sized `width:100%; height:100%`. That is a circular
   measurement: the box's height comes from its width, the image's height
   comes from the box, and the image's own natural width then feeds back into
   how wide the box wants to be. Chrome cuts the loop; Safari re-runs it on
   every layout pass, so the card creeps wider and taller and never settles.

   Taking the image out of the flow settles it — it fills the box exactly as
   before, but no longer reports a width back to it. Nothing changes visually.

   `min-width:0` on the grid children is the belt to that braces: a `1fr`
   column will otherwise stretch to fit its widest content rather than hold
   its share, which is what let the cards push out past the page. */
.pk-art, .pp-art { position: relative; overflow: hidden; }
.pk-art > img, .pp-art > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pk-grid > *, .pp-grid > * { min-width: 0; }