.site-navigation { position: sticky; top: 0; z-index: 40; }
.site-navigation .site-header.discovery-header { position: relative; top: auto; }
html { scroll-padding-top: 148px; }
.frame-promo { --promo-rule: #b7bda6; box-sizing: border-box; color: #343e2b; background: #e6e8dc; font-family: 'Manrope', sans-serif; }
.frame-promo-kicker { margin: 0 0 10px; color: #687153; font-size: 8px; font-weight: 600; letter-spacing: .16em; line-height: 1.5; text-transform: uppercase; }
.frame-promo-kicker span { margin-inline: 7px; color: #929b7b; }
.frame-promo-title { margin: 0; font: 400 30px/1.12 Georgia, serif; letter-spacing: -.035em; }
.frame-promo-description { margin: 12px 0; color: #646d57; font: 400 13px/1.65 'DM Sans', sans-serif; }
.frame-promo-artwork { display: block; margin-bottom: 8px; font: italic 13px/1.5 Georgia, serif; }
.frame-promo-status { display: block; color: #6e765e; font-size: 10px; line-height: 1.5; }
.frame-promo-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 42px; color: #39462d; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.frame-promo-link svg { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .2s; }
.frame-promo-link:hover svg { transform: translateX(3px); }
.frame-promo-link:hover { color: #77834f; }
.frame-promo a:focus-visible, .frame-promo button:focus-visible { outline: 2px solid #687153; outline-offset: 4px; }
.frame-promo-art { display: flex; align-items: center; justify-content: center; padding: 20px; background: #d8ddcb; text-decoration: none; }
.frame-promo-frame { display: inline-flex; padding: 8px; background: #33352b; outline: 1px solid #787966; outline-offset: -3px; box-shadow: 4px 6px 0 #6f785329; }
.frame-promo-frame img { display: block; width: auto; height: auto; max-width: 150px; max-height: 160px; object-fit: contain; }
.frame-promo-header { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 4px 5vw; border-bottom: 1px solid #cbd0bc; }
.frame-promo-header .frame-promo-copy { display: flex; align-items: center; gap: 22px; }
.frame-promo-header .frame-promo-kicker { margin: 0; font-size: 8px; }
.frame-promo-header .frame-promo-title { font-size: 15px; letter-spacing: 0; }
.frame-promo-header .frame-promo-link { min-height: 30px; font-size: 9px; padding-left: 22px; border-left: 1px solid var(--promo-rule); }
.frame-promo-collection { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(160px, .5fr) 1fr auto; align-items: center; gap: 30px; padding: 24px 34px; border-block: 1px solid var(--promo-rule); }
.frame-promo-collection .frame-promo-art { min-height: 170px; }
.frame-promo-collection .frame-promo-link { border-bottom: 1px solid #8c9770; }
.frame-promo-collection .frame-promo-title { font-size: clamp(28px, 3vw, 40px); }
.artwork-detail-page .reading-intro { position: relative; top: auto; align-self: stretch; }
.frame-promo-rail { position: sticky; top: 154px; display: grid; grid-template-columns: 100px 1fr; gap: 16px; padding: 20px 0; margin-top: 32px; max-width: 370px; border-block: 1px solid var(--promo-rule); background: transparent; }
.frame-promo-rail .frame-promo-art { grid-row: span 2; padding: 12px; align-self: start; min-height: 118px; }
.frame-promo-rail .frame-promo-frame { padding: 5px; }
.frame-promo-rail .frame-promo-frame img { max-width: 62px; max-height: 100px; }
.frame-promo-rail .frame-promo-title { font-size: 25px; }
.frame-promo-rail .frame-promo-kicker { font-size: 7px; }
.frame-promo-rail .frame-promo-link { grid-column: 2; min-height: 30px; justify-self: start; border-bottom: 1px solid #8c9770; }
.frame-promo-rail .frame-promo-description { margin: 10px 0; font-size: 12px; }
.frame-promo-rail .frame-promo-artwork { display: none; }
.frame-promo-dock { display: none; }
#framed-editions { scroll-margin-top: 148px; }
@media (max-width: 900px) {
    .frame-promo-header .frame-promo-title { display: none; }
    .frame-promo-header { gap: 18px; }
    .frame-promo-collection { grid-template-columns: 120px 1fr; gap: 20px; padding: 20px; }
    .frame-promo-collection .frame-promo-link { grid-column: 2; justify-self: start; }
    .frame-promo-collection .frame-promo-art { grid-row: span 2; min-height: 160px; padding: 12px; }
    .frame-promo-collection .frame-promo-frame img { max-width: 80px; max-height: 130px; }
}
@media (max-width: 760px) {
    .frame-promo-header { display: none; }
    .frame-promo-header.shop-promo-header { display: flex; }
    html { scroll-padding-top: 164px; }
    #framed-editions { scroll-margin-top: 164px; }
    .frame-promo-rail { position: static; margin-block: 26px 0; max-width: none; }
    .frame-promo-dock:not([hidden]) { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 24px; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #aab493; background: #f3f0e8; box-shadow: 0 5px 22px #17191422; }
    .frame-promo-dock .frame-promo-art { padding: 0; background: transparent; }
    .frame-promo-dock .frame-promo-frame { padding: 3px; box-shadow: none; }
    .frame-promo-dock .frame-promo-frame img { max-width: 28px; max-height: 40px; }
    .frame-promo-dock .frame-promo-kicker { font-size: 7px; margin-bottom: 3px; }
    .frame-promo-dock .frame-promo-kicker span { margin-inline: 2px; }
    .frame-promo-dock .frame-promo-title { font-size: 17px; }
    .frame-promo-dock .frame-promo-status { display: none; }
    .frame-promo-dock .frame-promo-link { min-height: 42px; gap: 7px; font-size: 10px; white-space: nowrap; }
    .frame-promo-dismiss { width: 26px; height: 32px; display: grid; place-items: center; padding: 4px; background: transparent; border: 0; color: #798166; cursor: pointer; }
    .frame-promo-dismiss svg { width: 16px; height: 16px; }
    body:has([data-cookie-banner]:not([hidden])) .frame-promo-dock,
    body:has(.cart-dialog[open]) .frame-promo-dock { display: none; }
}
@media (max-width: 380px) {
    .frame-promo-dock:not([hidden]) { grid-template-columns: minmax(0, 1fr) auto 24px; gap: 8px; }
    .frame-promo-dock .frame-promo-art { display: none; }
    .frame-promo-collection { grid-template-columns: 80px 1fr; gap: 14px; padding: 18px 14px; }
    .frame-promo-collection .frame-promo-frame img { max-width: 48px; max-height: 100px; }
    .frame-promo-collection .frame-promo-title { font-size: 25px; }
}
.frame-promo .frame-promo-hanger { position: relative; padding: 0; border: 0; background: transparent; box-shadow: none; }
.frame-promo-hanger::before, .frame-promo-hanger::after { content: ''; position: absolute; left: -2%; width: 104%; height: 5px; background: #b79265; z-index: 1; box-shadow: 0 1px 2px #0004; }
.frame-promo-hanger::before { top: 0; }
.frame-promo-hanger::after { bottom: 0; }

/* Product campaigns share the listing model and saved artwork placement. */
.promo-product { width: 100%; min-width: 0; max-width: 310px; }
.promo-product .product-webgl-card, .promo-product .product-mockup { width: 100%; }
.promo-product .product-mockup-caption { display: none; }
.promo-product .product-webgl-reset, .promo-product .product-webgl-hint { display: none; }
.promo-product .product-image-gallery .product-webgl-reset { display: block; }
.frame-promo-art .promo-product { pointer-events: auto; }
.frame-promo-rail .promo-product { width: 78px; }
.frame-promo-dock .promo-product { width: 34px; }
.article-print-promo .promo-product { pointer-events: auto; }