/* Decorative framing is separate from physical frame products and never modifies image files. */
body.website-frame-black,.frame-sample[data-frame="black"]{--art-frame-width:18px;--art-frame-image:none}
body.website-frame-ornate,.frame-sample[data-frame="ornate"]{--art-frame-width:32px;--art-frame-image:url('/assets/ornate-frame.svg')}
.frame-sample{padding:24px;background:#e8e4dc;border:1px solid #d9ded1;margin:16px 0 0;border-radius:4px}
.frame-sample .art-frame{border:1px solid #bdc5b5;background:#f8f5ec;padding:10px;aspect-ratio:auto;box-sizing:border-box;min-width:0}
.frame-sample .art-frame img{width:100%;height:auto;object-fit:contain;display:block}
body:is(.website-frame-black,.website-frame-ornate).website-style-gallery-paper .hero-visual,
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-visual,
body:is(.website-frame-black,.website-frame-ornate):is(.website-home,.website-artwork-page) .photo-cover,
body:is(.website-frame-black,.website-frame-ornate).website-artwork-page .portfolio-photo,
.frame-sample:is([data-frame="black"],[data-frame="ornate"]) .art-frame{border:var(--art-frame-width) solid #181915;border-image-source:var(--art-frame-image);border-image-slice:52;border-image-repeat:round;background:#f4f0e6;padding:20px;border-radius:0;outline:1px solid #55574c;box-shadow:inset 0 0 0 1px #c7c2b4,0 14px 32px #0005,0 2px 5px #0008;box-sizing:border-box}
body:is(.website-frame-black,.website-frame-ornate).website-style-gallery-paper .hero-photo{padding:0;border:1px solid #c2bcad;box-shadow:0 1px 3px #0004;background:#f4f0e6}
body:is(.website-frame-black,.website-frame-ornate).website-style-gallery-paper .image-credit{left:0;right:0;bottom:0}
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-layout{padding:65px 55px 80px;background:#f4f0e6}
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-visual{inset:14px;width:auto;height:auto}
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .image-credit{bottom:8px}
body:is(.website-frame-black,.website-frame-ornate):is(.website-home,.website-artwork-page) .photo-cover{height:auto;aspect-ratio:auto;overflow:visible;margin-bottom:24px}
body:is(.website-frame-black,.website-frame-ornate):is(.website-home,.website-artwork-page) .photo-cover img{display:block;height:auto;width:100%;object-fit:contain;background:#f4f0e6;transform:none}
body:is(.website-frame-black,.website-frame-ornate):is(.website-home,.website-artwork-page) .photo-protect{bottom:-23px;right:0;background:transparent;color:var(--muted);padding:0;font-size:10px;max-width:100%;text-align:right}
body:is(.website-frame-black,.website-frame-ornate).website-artwork-page .portfolio-photo img{width:100%;height:auto}
body:is(.website-frame-black,.website-frame-ornate).website-artwork-page .portfolio-photo>span{left:20px;right:20px;bottom:20px}
.frame-sample:is([data-frame="black"],[data-frame="ornate"]) .art-frame{padding:10px;--art-frame-width:22px;aspect-ratio:auto}
.frame-sample[data-frame="black"] .art-frame{--art-frame-width:12px}
@media(max-width:850px){body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-layout{padding:45px 26px 70px}}
@media(max-width:600px){body.website-frame-ornate{--art-frame-width:23px}body.website-frame-black{--art-frame-width:14px}body:is(.website-frame-black,.website-frame-ornate).website-style-gallery-paper .hero-visual{height:420px;padding:14px}body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-layout{padding:36px 20px 70px}body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-visual{inset:8px}body:is(.website-frame-black,.website-frame-ornate):is(.website-home,.website-artwork-page) .photo-cover{padding:12px}body:is(.website-frame-black,.website-frame-ornate).website-artwork-page .portfolio-photo{padding:8px;--art-frame-width:16px}.frame-sample{padding:20px}}
/* In a physical-frame presentation the artwork, rather than a fixed crop, sets the height. */
body:is(.website-frame-black,.website-frame-ornate):is(.website-style-gallery-paper,.website-style-afterlight) .hero-visual{height:auto;width:100%;min-width:0;overflow:visible}
body:is(.website-frame-black,.website-frame-ornate):is(.website-style-gallery-paper,.website-style-afterlight) .hero-photo{height:auto;padding:0;overflow:visible;background:#f4f0e6;border:0;box-shadow:none}
body:is(.website-frame-black,.website-frame-ornate):is(.website-style-gallery-paper,.website-style-afterlight) .hero-photo img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
body:is(.website-frame-black,.website-frame-ornate):is(.website-style-gallery-paper,.website-style-afterlight) .image-credit{position:static;display:block;color:#4c5146;background:transparent;padding:10px 0 0;max-width:100%;font-size:9px;overflow-wrap:anywhere}
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:center;min-height:0;padding:24px 0 35px;border:0;border-image:none;border-radius:0;outline:0;box-shadow:none;background:transparent;overflow:visible}
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-visual{position:relative;inset:auto;z-index:auto;isolation:auto;padding:20px}
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-photo:after{display:none}
body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-copy h1{font-size:clamp(3.1rem,5.6vw,5.5rem)}
@media(max-width:850px){body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-layout{grid-template-columns:1fr;gap:35px;padding:22px 0 35px}body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-copy h1{font-size:clamp(2.8rem,9vw,5rem)}}
@media(max-width:600px){body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-visual{padding:14px}body:is(.website-frame-black,.website-frame-ornate).website-style-afterlight .hero-copy h1{font-size:clamp(2.6rem,10vw,3.6rem)}}