/* Artwork page ordering options (print.js). Kept apart from ChatGPT's stylesheet, which is left as it was,
   and built from its own colours (--ink, --line, --rust). */
fieldset label { align-items: center; cursor: pointer; }
fieldset label input { accent-color: var(--ink); }
.rk-name { display: grid; gap: 2px; font-weight: normal; }
.rk-name small { font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .02em; opacity: .65; }
fieldset label.rk-off { opacity: .42; cursor: not-allowed; }
.rk-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 14px; padding-top: 22px; border-top: 1px solid var(--line); }
.rk-total strong { font-family: Georgia, serif; font-size: 30px; font-weight: normal; color: var(--ink); }
/* "Watch Stuart make this one" (video.js), under the artwork */
.rk-video { width: min(560px, 100%); margin: 44px 0 0; }
.rk-video figcaption { text-transform: uppercase; letter-spacing: .13em; font-size: 10px; font-weight: 700; color: var(--rust); margin-bottom: 12px; }
.rk-video-frame { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0;
  background: var(--ink); cursor: pointer; overflow: hidden; box-shadow: 0 18px 40px #17312633; }
.rk-video-frame img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; box-shadow: none; max-height: none; }
.rk-video-frame:hover img, .rk-video-frame:focus-visible img { transform: scale(1.03); }
.rk-play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 6px 20px #0005; }
.rk-play::after { content: ""; position: absolute; left: 27px; top: 21px; border-style: solid; border-width: 13px 0 13px 21px;
  border-color: transparent transparent transparent #fff; }
.rk-video small { display: block; margin-top: 12px; font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.rk-video small a { color: inherit; }
/* thank-you page */
.rk-thanks { max-width: 760px; margin: 0 auto; }
.rk-thanks .testing-banner span + span { opacity: .75; }
.rk-thanks-back { margin-top: 40px; }
/* order button, once ordering is switched on */
.rk-buy { opacity: 1 !important; cursor: pointer; }
.rk-buy:hover { background: var(--rust); }
.rk-buy[disabled] { opacity: .65 !important; cursor: wait; }
.rk-buy-error { color: var(--rust); font-size: 12px; margin: 10px 0 0; }
.rk-total small { font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
