.substrate-mask {
  /* was `url()` — an empty url() resolves to the CURRENT DOCUMENT URL, so the
     browser was fetching this page's HTML and trying to decode it as an image,
     once per .substrate-mask element. */
  background-image: none;
  background-size: 200%;
  background-position: 12px 12px;
  background-repeat: no-repeat;
}

.frame-thumbnail-artwork-container {
  position: absolute;
}

/* All four frame sides paint the same moulding image; only the box geometry
   and the bottom rotation differ. */
.frame-top::before,
.frame-bottom::before,
.frame-right::before,
.frame-left::before {
  content: "";
  position: absolute;
  background-image: var(--frame-image);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.frame-top::before,
.frame-bottom::before {
  top: 0%;
  width: 100%;
  height: 100%;
}

.frame-right::before,
.frame-left::before {
  /* `top: 0px` was here too, but `inset` sets all four sides and came after it,
     so it was dead. */
  inset: 0;
  z-index: -1;
}

.frame-bottom::before {
  transform: rotate(180deg);
}

/* While the newly-picked frame's moulding image is still being preloaded
   (JS/frame-substrate-var-updates.js toggles this on <html>), dim the
   currently-showing frame instead of leaving a blank gap. --frame-image
   itself isn't swapped until the new file is ready, so this always fades
   back up into the correct frame rather than flashing old-then-new. */
.frame-top::before,
.frame-bottom::before,
.frame-right::before,
.frame-left::before {
  opacity: 1;
  transition: opacity 220ms ease;
}

html[data-frame-loading='1'] .frame-top::before,
html[data-frame-loading='1'] .frame-bottom::before,
html[data-frame-loading='1'] .frame-right::before,
html[data-frame-loading='1'] .frame-left::before {
  opacity: 0.35;
}

/* ---------------------------------------------------------------------------
   SUPERSEDED — now handled on the Webflow CSS side. Kept only as a record of
   why it can't live here; safe to delete once you're sure you won't want it.

   HEADS UP — this rule cannot work from this file.
   `{{wf:...}}` is a Webflow CMS field binding. Webflow only interpolates it
   inside an HTML Embed on the page; in a static file served from the Cloudflare
   worker it is emitted literally, which makes the value invalid CSS and the
   whole declaration is dropped. .frame-right / .frame-left get no width from
   here.

   Keep this one rule in a Webflow code embed (it's the only binding in the
   repo). Left in place rather than deleted so it doesn't get lost.
   --------------------------------------------------------------------------- */

.reflection-img {
  /* not an image */
  will-change: auto;
}

.big-reflection {
  /* not an element */
  will-change: auto !important;
  contain: strict;
}