/* Frames (2026-11-09, Brian and Eduardo): every painting on the wall is framed, except the one walking in the hero.
   Built like a real frame: dark wood moulding, a cream mat between the moulding and the painting, the moulding's
   shadow falling onto the mat, the canvas sitting on the mat with its own small shadow, and a strong shadow on the wall. */
:root { --fr-f: 12px; --fr-gap: 14px; --fr-t: calc(var(--fr-f) + var(--fr-gap)); --fr-mat: #efe9dc; --fr-liner: rgba(20,14,8,.45);
  --fr-wood: linear-gradient(135deg, #43362a 0%, #241b12 48%, #3a2d21 100%);
  --fr-face: linear-gradient(var(--fr-mat), var(--fr-mat)) padding-box, var(--fr-wood) border-box;
  --fr-lip: inset 0 2px 5px rgba(0,0,0,.42), inset 0 0 0 1px rgba(0,0,0,.28), inset 0 -1px 2px rgba(0,0,0,.14);
  --fr-canvas: 0 1px 2px rgba(0,0,0,.4), 0 5px 10px -2px rgba(0,0,0,.35);
  --fr-sh: inset 0 1px 0 rgba(255,255,255,.18), 0 0 0 1px rgba(0,0,0,.5), 0 3px 5px rgba(0,0,0,.4), 0 14px 18px -6px rgba(0,0,0,.42), 0 34px 46px -12px rgba(0,0,0,.5), 0 70px 90px -30px rgba(0,0,0,.55); }
@media (max-width: 900px) { :root { --fr-f: 7px; --fr-gap: 8px; } }

/* the generic frame: an element that holds exactly one painting. The moulding is the (transparent) border painted by the
   wood layer, the mat is the padding painted by the mat layer, and ::after lays the moulding's shadow over the mat. */
.fr, .hg .pic, .w-art { position: relative; box-sizing: border-box; border: var(--fr-f) solid transparent; padding: var(--fr-gap);
  background: var(--fr-face); box-shadow: var(--fr-sh); }
.fr::after, .hg .pic::after, .w-art::after { content: ""; position: absolute; inset: 0; box-shadow: var(--fr-lip); pointer-events: none; z-index: 2; }
.fr { display: inline-block; vertical-align: top; max-width: 100%; }
.fr > img { display: block; box-sizing: border-box; border: 1px solid var(--fr-liner); background: #cfc6b2; box-shadow: var(--fr-canvas); max-width: 100%; }

/* home, the long wall: the hang */
.hg .pic { aspect-ratio: auto; }
.hg .pic img { aspect-ratio: var(--ar); width: 100%; height: auto; box-sizing: border-box; border: 1px solid var(--fr-liner); background: #cfc6b2; box-shadow: var(--fr-canvas); }
.hg a:hover .pic, .hg a:focus-visible .pic { box-shadow: var(--fr-sh), 0 40px 50px -16px rgba(0,0,0,.45); }

/* art, the long walk: one framed painting a screen. The painting is sized from its aspect ratio before it loads,
   so the frame is already the right size while the image is still on its way (lazy images have no natural size yet). */
.bay-art { container-type: inline-size; }
.bay-art .fr { transform: scale(var(--bs, 1)); transform-origin: 50% 70%; will-change: transform; }
.bay-art .fr > img { --hcap: calc(var(--vh) - 76px - var(--capH) - 6px - 2 * var(--fr-t)); --wcap: 100cqw;
  aspect-ratio: var(--ar); height: auto; max-height: none; transform: none;
  width: min(calc(var(--wcap) - 2 * var(--fr-t)), calc(var(--hcap) * var(--ar))); }
.bay.lowres .bay-art .fr > img { --wcap: min(100cqw, 520px + 2 * var(--fr-t)); }
@media (max-width: 900px) { .bay-art .fr > img { --hcap: calc(var(--vh) - 58px - var(--capH) - 20px - 2 * var(--fr-t)); } }

/* work, one painting: the button is the frame, the living paint covers only the canvas inside the liner */
.w-live { display: block; position: relative; border: 1px solid var(--fr-liner); background: #cfc6b2; box-shadow: var(--fr-canvas); }
.w-art img { max-height: calc(var(--vh) - 106px - 2 * var(--fr-t) - 2px); }
@media (max-width: 900px) { .w-art img { max-height: calc(var(--vh) * 0.76 - 2 * var(--fr-t) - 2px); } }
.w-nav img { padding: 4px; background: var(--fr-wood); outline: 1px solid rgba(20,14,8,.6); outline-offset: -4px; box-shadow: 0 2px 3px rgba(0,0,0,.35), 0 10px 14px -6px rgba(0,0,0,.55); }

/* merch, robot, about: the single paintings */
.m-art .fr > img { max-height: calc(var(--vh) - 170px - 2 * var(--fr-t)); }
.ab-art .fr > img { max-height: calc(var(--vh) - 170px - 2 * var(--fr-t)); }
.r-p25 .fr > img { max-height: calc(var(--vh) - 130px - 2 * var(--fr-t)); }
.r-r1 .fr > img { max-height: min(calc(var(--vh) - 130px - 2 * var(--fr-t)), 640px); max-width: min(100%, 440px); }
.ab-wide .fr { display: block; }
.ab-wide .fr > img { width: 100%; }
@media (max-width: 900px) {
  .m-art .fr > img, .ab-art .fr > img { max-height: calc(var(--vh) * 0.64 - 2 * var(--fr-t)); }
  .r-p25 .fr > img { max-height: calc(var(--vh) * 0.7 - 2 * var(--fr-t)); }
  .r-r1 .fr > img { max-width: min(100%, 360px); max-height: none; }
}