.shop-page { --color-paper:#e9e6df; --color-ink:#272923; --shop-paper:#e9e6df; --shop-ink:#272923; --shop-muted:#67695f; --shop-rule:rgba(39,41,35,.2); background:var(--shop-paper); color:var(--shop-ink); color-scheme:light; }
.shop-page [hidden] { display:none!important; }
.shop-page :focus-visible { outline:2px solid #626e55; outline-offset:5px; }
.shop-masthead { position:sticky; top:0; z-index:10; background:var(--shop-paper); min-height:72px; padding:20px clamp(24px,5vw,76px); display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--shop-rule); font:400 15px/1.3 var(--title-face); letter-spacing:.04em; }
.shop-masthead a { text-decoration:none; }
.cart-count { margin-left:9px; color:var(--shop-muted); }
.shop-main { max-width:1450px; margin:auto; padding:0 clamp(24px,5vw,76px); }
.shop-intro { padding:44px 0 35px; }
.shop-eyebrow { font:.63rem/1.4 var(--title-face); letter-spacing:.13em; text-transform:uppercase; color:var(--shop-muted); margin:0 0 12px; }
.shop-intro h1 { font:400 clamp(42px,5vw,64px)/1 var(--title-face); margin:0 0 17px; }
.shop-intro>p:last-child { font-size:.94rem; margin:0; color:var(--shop-muted); }
.shop-gallery { padding:0; }
.shop-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:70px clamp(28px,5vw,72px); align-items:start; }
.shop-work { min-width:0; }
.artwork-visual { position:relative; width:fit-content; max-width:100%; margin:0 auto; }
.artwork-focus { position:relative; display:block; width:auto; max-width:100%; margin:0; padding:0; border:0; background:transparent; color:inherit; line-height:0; }
button.artwork-focus { cursor:pointer; }
.sharp-layer { display:block; width:auto; max-width:100%; height:auto; max-height:600px; }
.optical-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:var(--shop-paper); opacity:0;  }
.show-optical .optical-layer { opacity:1; }
/* Keep the base opaque: fading both layers exposes the page and dims the image.
   The proof background covers any difference in the two source aspect ratios. */
.sharp-inset-wrap { position:absolute; right:14px; bottom:14px; width:clamp(82px,30%,148px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:2px solid rgba(255,255,255,.8); box-shadow:0 2px 15px #0005; pointer-events:none; }
.sharp-inset { display:block; width:100%; height:100%; object-fit:cover; object-position:var(--inset-position,50% 50%); transform:scale(var(--inset-zoom,1)); transform-origin:var(--inset-position,50% 50%); }
.focus-caption { margin:10px 0 0; font-size:.65rem; color:var(--shop-muted); }
.work-caption { padding-top:23px; }
.work-caption .shop-eyebrow { margin-bottom:8px; }
.work-caption h2 { font:400 clamp(22px,2vw,28px)/1.2 var(--body-serif); margin:0 0 12px; }
.work-description { font-size:.86rem; line-height:1.6; margin:0 0 10px; max-width:53ch; }
.work-availability { color:var(--shop-muted); font-size:.73rem; line-height:1.5; margin:0 0 19px; }
.work-order { display:flex; flex-direction:column; gap:12px; align-items:stretch; }
.work-size { position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.cart-quantity input { padding:12px; background:transparent; color:var(--shop-ink); border:1px solid #73736b; border-radius:0; font:.78rem var(--body-serif); color-scheme:dark; }
.add-to-cart { flex:1; background:transparent; color:var(--shop-ink); border:1px solid #73736b; padding:12px 15px; font:400 15px/1.2 var(--title-face); cursor:pointer; display:flex; justify-content:center; align-items:center; gap:15px; }
.add-to-cart:hover { background:rgba(236,237,233,.08); border-color:var(--shop-ink); }
.work-credit { color:var(--shop-muted); font-size:.63rem; line-height:1.5; margin:13px 0 0; }
.work-credit:empty,.work-availability:empty { display:none; }
.focus-video { display:block; width:100%; height:auto; margin-top:15px; }
.size-guide,.shop-cart { margin-top:90px; padding:40px 0; border-top:1px solid var(--shop-rule); display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,72px); }
.size-guide h2,.shop-cart h2 { font:400 29px/1.2 var(--title-face); margin:0 0 18px; }
.size-guide p { font-size:.83rem; line-height:1.6; max-width:53ch; }
.size-guide summary { cursor:pointer; font-size:.77rem; color:var(--shop-muted); text-decoration:underline; text-underline-offset:4px; }
.size-guide .fine-print { color:var(--shop-muted); font-size:.68rem; margin:19px 0 0; }
.paper-sizes { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; padding:12px 0 30px; }
.paper-sizes figure { margin:0; flex:1; display:flex; flex-direction:column; align-items:center; gap:15px; }
.paper-outline { display:block; width:calc(120px * var(--paper-width)); max-width:none; aspect-ratio:var(--paper-ratio); border:1px solid #aaa9a3; background:#ffffff04; }
.paper-sizes figcaption { white-space:nowrap; font-size:.72rem; color:var(--shop-muted); }
.shop-cart { margin-top:30px; }
.cart-item { display:flex; align-items:center; gap:20px; padding:18px 0; border-top:1px solid var(--shop-rule); }
.cart-item-copy { flex:1; }
.cart-item h3 { margin:0 0 7px; font:400 18px var(--title-face); }
.cart-item p { margin:0; color:var(--shop-muted); font-size:.67rem; }
.cart-quantity { color:var(--shop-muted); font-size:.62rem; display:flex; flex-direction:column; gap:6px; }
.cart-quantity input { width:64px; padding:7px; }
.cart-remove { background:none; border:0; color:var(--shop-muted); cursor:pointer; padding:8px 0; font:.65rem var(--body-serif); text-decoration:underline; }
.cart-email { display:inline-block; font:.84rem var(--title-face); text-decoration:none; padding:16px 0; margin-top:14px; border-bottom:1px solid var(--shop-ink); }
.cart-empty,.cart-note,.discount-note { color:var(--shop-muted); font-size:.77rem; line-height:1.55; }
.discount-note { font-size:.69rem; }
.visually-hidden,.shop-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media(max-width:700px) { .shop-masthead { min-height:62px; font-size:15px; } .shop-intro { padding:32px 0; } .shop-grid { grid-template-columns:1fr; gap:48px; } .sharp-layer { max-height:70svh; } .size-guide,.shop-cart { grid-template-columns:1fr; margin-top:55px; gap:24px; } .paper-sizes { max-width:440px; padding-bottom:5px; } .paper-outline { width:calc(86px * var(--paper-width)); } .shop-cart { margin-top:5px; } .cart-item { gap:12px; } }
@media(prefers-reduced-motion:reduce) { .optical-layer,.sharp-layer { transition:none; } }

#cart, #guide { scroll-margin-top:90px; }

.work-group { grid-column:1 / -1; display:grid; grid-template-columns:repeat(var(--group-columns,3),minmax(0,1fr)); gap:70px clamp(28px,4vw,56px); align-items:start; }
@media(max-width:1000px) and (min-width:701px) { .work-group { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .work-group { grid-template-columns:1fr; gap:48px; } }

.work-sizes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; border:0; padding:0; margin:0; min-width:0; }
.size-choice { position:relative; cursor:pointer; }
.size-tile { display:flex; flex-direction:column; gap:6px; padding:13px 16px; min-height:65px; border:1px solid #b2b2a6; background:rgba(255,255,255,.2); transition:background .18s,border-color .18s; }
.size-name { font:.6rem/1.3 var(--title-face); letter-spacing:.1em; text-transform:uppercase; color:var(--shop-muted); }
.size-dimensions { font:.92rem/1.3 var(--body-serif); color:var(--shop-ink); }
.size-choice:hover .size-tile { background:rgba(255,255,255,.42); border-color:#727969; }
.work-size:checked + .size-tile { background:#d5dacb; border-color:#65725a; box-shadow:inset 0 0 0 1px #65725a; }
.work-size:checked + .size-tile .size-name { color:#414e35; }
.work-size:focus-visible { outline:0; }
.work-size:focus-visible + .size-tile { outline:2px solid #626e55; outline-offset:4px; }
.add-to-cart { background:#303b2c; color:#f3f1e9; border-color:#303b2c; flex:auto; min-height:45px; }
.add-to-cart:hover { background:#46543e; border-color:#46543e; }
.cart-quantity input { background:rgba(255,255,255,.3); color:var(--shop-ink); border:1px solid #a5a79a; color-scheme:light; }
.paper-outline { border-color:#8c9182; background:rgba(255,255,255,.28); }
@media(prefers-reduced-motion:reduce) { .size-tile { transition:none; } }

.cart-item { align-items:flex-start; gap:18px; }
.cart-thumbnail { width:78px; height:98px; object-fit:contain; background:rgba(255,255,255,.3); flex-shrink:0; }
.cart-item-controls { display:flex; align-items:flex-end; gap:14px; margin-top:12px; }
.cart-size { display:flex; flex-direction:column; gap:6px; color:var(--shop-muted); font-size:.62rem; }
.cart-size select { padding:7px 9px; min-height:34px; border:1px solid #a5a79a; background:rgba(255,255,255,.3); color:var(--shop-ink); font:.75rem var(--body-serif); border-radius:0; }
.cart-item .cart-line-price { margin-top:8px; color:var(--shop-ink); }
.discount-eligibility { position:relative; display:flex; align-items:center; gap:12px; margin:22px 0; min-height:44px; font:.85rem/1.5 var(--body-serif); cursor:pointer; }
.discount-eligibility input { position:absolute; width:1px; height:1px; padding:0; margin:0; opacity:0; }
.discount-toggle { position:relative; width:36px; height:22px; flex-shrink:0; border:1px solid #8c9182; border-radius:999px; background:rgba(255,255,255,.3); }
.discount-toggle::after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#73796b; }
.discount-eligibility input:checked + .discount-toggle { background:#303b2c; border-color:#303b2c; }
.discount-eligibility input:checked + .discount-toggle::after { transform:translateX(14px); background:#f3f1e9; }
.discount-eligibility input:focus-visible + .discount-toggle { outline:2px solid #626e55; outline-offset:4px; }
.cart-discount-row > span:first-child { min-width:0; overflow-wrap:anywhere; }
.cart-discount { flex-shrink:0; }
.discount-percent { white-space:nowrap; color:#415837; }
.cart-summary { padding:16px 0; border-top:1px solid var(--shop-rule); border-bottom:1px solid var(--shop-rule); }
.cart-summary p { display:flex; justify-content:space-between; gap:20px; margin:0 0 12px; font-size:.8rem; color:var(--shop-muted); }
.cart-summary p:last-child { margin-bottom:0; color:var(--shop-ink); font-size:.93rem; }
.cart-total { font-weight:400; }
@media(max-width:420px) { .cart-thumbnail { width:60px; height:80px; } .cart-item-controls { gap:10px; flex-wrap:wrap; } }
.size-price { font:.65rem/1.4 var(--body-serif); color:var(--shop-muted); }

.motion-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; visibility:hidden; }
.motion-ready .motion-layer { visibility:visible; }

/* Keep the single chart size as a full-width choice. */
.work-sizes:has(.size-choice:only-child) { grid-template-columns:1fr; }

.cart-checkout { display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:45px; margin-top:20px; padding:12px 16px; background:#303b2c; color:#f3f1e9; font:400 15px/1.2 var(--title-face); text-decoration:none; }
.cart-checkout:hover { background:#46543e; }