@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");
:root { --archive-ink:#111; --archive-paper:#f4f3ef; --archive-caption-height:126px; }
html,body.painter-archive-page { margin:0; background:var(--archive-paper); color:var(--archive-ink); overflow:hidden; }
html.painter-archive-grid-mode,
body.painter-archive-page.painter-archive-grid-mode { height:auto; overflow-y:auto; scroll-snap-type:none; }
.painter-archive-page #wpadminbar { display:none; }
.painter-archive,.painter-archive * { box-sizing:border-box; }
.painter-archive { position:relative; min-height:100svh; font-family:'Montserrat',Arial,Helvetica,sans-serif; letter-spacing:0; }
.painter-archive__chrome { position:fixed; inset:22px 24px auto; z-index:30; display:flex; justify-content:space-between; align-items:flex-start; pointer-events:none; }
.painter-archive__toolbar { pointer-events:auto; border:1px solid #111; background:rgba(247,246,242,.94); backdrop-filter:blur(12px); }
.painter-archive__left-controls { pointer-events:auto; display:flex; align-items:center; gap:20px; height:58px; border:0; background:transparent; backdrop-filter:none; }
.painter-archive__brand { width:48px; height:48px; padding:0; display:grid; place-items:center; border:0; background:transparent; color:#111; cursor:pointer; }
.painter-archive__hamburger { width:32px; display:grid; gap:7px; }
.painter-archive__hamburger i { display:block; width:100%; height:3px; background:currentColor; }
.painter-archive__toolbar { display:flex; align-items:center; height:58px; padding:0 16px; gap:17px; }
.painter-archive__view-switch { align-self:stretch; display:flex; align-items:center; gap:20px; padding:0; border:0; }
.painter-archive__view-switch button { width:48px; height:48px; display:grid; place-items:center; padding:0; border:0; background:transparent; color:#777; cursor:pointer; }
.painter-archive__view-switch button.is-active { color:#00a85a; background:transparent; outline:0; }
.painter-view-icon { position:relative; display:block; width:24px; height:24px; }
.painter-view-icon--single { border:3px solid currentColor; }
.painter-view-icon--grid { background:currentColor; box-shadow:10px 0 currentColor,0 10px currentColor,10px 10px currentColor; width:7px; height:7px; margin:-10px 0 0 -10px; }
.painter-archive__actions { display:flex; align-items:center; gap:22px; }
.painter-archive__actions a { color:inherit; font-size:13px; text-transform:uppercase; text-decoration:none; }
.painter-archive__viewport { position:absolute; inset:0 0 var(--archive-caption-height); overflow:hidden; background:#e9e6df; }
.painter-archive__scene,.painter-archive__shop { position:absolute; inset:0; width:100%; height:100%; min-height:0; overflow:hidden; visibility:hidden; transform:translateY(100%); transition:transform 560ms cubic-bezier(.76,0,.24,1); will-change:transform; }
.painter-archive__scene.is-active { z-index:3; visibility:visible; transform:translateY(0); }
.painter-archive__scene.is-before { z-index:1; visibility:visible; transform:translateY(-100%); }
.painter-archive__scene.is-after { z-index:1; visibility:visible; transform:translateY(100%); }
.painter-archive__scene.is-entering { z-index:4; visibility:visible; transform:translateY(0); }
.painter-archive__scene.is-leaving-up { z-index:3; visibility:visible; transform:translateY(-100%); }
.painter-archive__scene.is-leaving-down { z-index:3; visibility:visible; transform:translateY(100%); }
.painter-archive__visual { position:absolute; inset:0; display:grid; place-items:center; background:linear-gradient(92deg,rgba(255,255,255,.38),rgba(221,217,208,.22)),repeating-linear-gradient(90deg,rgba(90,77,57,.025) 0,rgba(90,77,57,.025) 1px,transparent 1px,transparent 7px),#e9e6df; }
.painter-archive__art-link { display:block; width:min(54vw,820px); height:min(70vh,700px); transform:translateX(-8vw) scale(.94); transition:transform 680ms cubic-bezier(.2,.8,.2,1); }
.painter-archive__art { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 15px 14px rgba(43,35,24,.2)); }
.painter-archive__wear { position:absolute; right:15vw; bottom:max(36px,calc((100% - min(70vh,700px)) / 2)); width:clamp(145px,16vw,245px); aspect-ratio:1/1; background:transparent; padding:0; transform:translate3d(0,0,0); opacity:0; transition:520ms cubic-bezier(.2,.8,.2,1) 80ms; filter:drop-shadow(0 14px 16px rgba(43,35,24,.18)); color:#111; text-decoration:none; }
.painter-archive__wear-image { display:block; width:100%; height:100%; color:inherit; text-decoration:none; }
.painter-archive__wear img { width:100%; height:100%; object-fit:contain; }
.painter-archive__wear-actions { position:absolute; left:50%; top:calc(100% + 12px); display:flex; gap:8px; transform:translateX(-50%); white-space:nowrap; }
.painter-archive__cart-action { display:inline-flex; align-items:center; justify-content:center; min-height:31px; padding:0 12px; border:1px solid #111; background:#111; color:#fff; font-size:10px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; text-decoration:none; }
.painter-archive__cart-action.is-secondary { background:rgba(247,246,242,.92); color:#111; }
.painter-archive__wear.is-single-image { display:none; }
.painter-archive__scene.is-active .painter-archive__art-link { transform:translateX(-7vw) scale(1); }
.painter-archive__scene.is-active .painter-archive__wear { opacity:1; transform:translate3d(0,0,0); }
.painter-archive__caption { position:fixed; z-index:24; inset:auto 0 0; height:var(--archive-caption-height); overflow:hidden; border-top:1px solid var(--caption-accent); background:#f4f3ef; transition:border-color 220ms ease; }
.painter-archive__caption-copy { height:100%; display:grid; grid-template-columns:78px minmax(230px,1fr) minmax(260px,1.15fr) minmax(180px,.7fr) 135px; align-items:center; gap:22px; padding:17px 152px 17px 30px; clip-path:inset(0); }
.painter-archive__caption-copy.is-wiping { animation:caption-wipe-out 180ms cubic-bezier(.7,0,.3,1) forwards; }
.painter-archive__caption-copy.is-revealing { animation:caption-wipe-in 360ms cubic-bezier(.2,.8,.2,1) forwards; }
.painter-archive__sku { font-size:13px; font-weight:700; color:var(--caption-accent); transition:color 220ms ease; }
.painter-archive__caption p { margin:0 0 5px; font-size:11px; text-transform:uppercase; }
.painter-archive__caption h1 { margin:0; font-size:clamp(22px,2.2vw,38px); line-height:1; font-weight:500; }
.painter-archive__caption .painter-archive__story { margin:0; max-width:540px; font-size:13px; line-height:1.5; text-transform:none; }
.painter-archive__size { font-size:12px; line-height:1.35; color:#555; }
.painter-archive__year { text-align:right; padding-left:12px; border-left:1px solid var(--caption-accent); }
.painter-archive__year small { display:block; margin-bottom:5px; font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#666; }
.painter-archive__year strong { display:block; font-size:17px; line-height:1.05; color:#111; }
.painter-archive__coverflow { position:fixed; z-index:22; right:18px; top:50%; width:112px; height:min(72vh,610px); transform:translateY(-50%); pointer-events:none; }
.painter-archive__rail { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; gap:7px; padding:88px 7px; overflow-y:auto; scrollbar-width:none; pointer-events:auto; }
.painter-archive__rail::-webkit-scrollbar { display:none; }
.painter-archive__rail button { position:relative; flex:0 0 58px; width:82px; height:58px; padding:4px; border:1px solid rgba(17,17,17,.34); background:rgba(244,243,239,.8); overflow:hidden; cursor:pointer; pointer-events:auto; transform:none; transform-origin:center; transition:180ms ease; }
.painter-archive__rail button:hover { transform:scale(1.08); border-color:#111; background:#fff; }
.painter-archive__rail button.is-active { width:92px; height:66px; flex-basis:66px; border-color:#111; background:#fff; box-shadow:0 8px 16px rgba(30,24,18,.16); }
.painter-archive__rail img { width:100%; height:100%; object-fit:contain; }
.painter-archive__menu { position:fixed; z-index:50; inset:0 auto 0 0; width:min(480px,92vw); padding:38px; display:flex; flex-direction:column; background:#111; color:#fff; transform:translateX(-102%); transition:transform 500ms cubic-bezier(.2,.8,.2,1); }
.painter-archive__menu.is-open { transform:translateX(0); }
.painter-archive__menu button { align-self:flex-end; border:0; background:none; color:#fff; font-size:36px; cursor:pointer; }
.painter-archive__menu p { margin:0 0 42px; font-size:11px; letter-spacing:.13em; }
.painter-archive__menu a { padding:16px 0; border-top:1px solid #555; color:#fff; text-decoration:none; }
.painter-archive__menu a:hover { color:#fff; background:transparent; }
.painter-archive__shop { display:flex; flex-direction:column; align-items:center; justify-content:center; background:#111; color:#fff; text-align:center; }
.painter-archive__shop p { font-size:12px; text-transform:uppercase; }
.painter-archive__shop h2 { margin:8px 0 42px; font-size:clamp(52px,9vw,150px); font-weight:500; line-height:.9; }
.painter-archive__shop a { padding:16px 22px; border:1px solid #fff; color:#fff; text-decoration:none; text-transform:uppercase; font-size:12px; }
.painter-archive__grid-view { display:none; min-height:100vh; padding:116px 4vw 80px; background:#f2f0eb; }
.painter-archive[data-current-view="grid"] .painter-archive__viewport,
.painter-archive[data-current-view="grid"] .painter-archive__caption,
.painter-archive[data-current-view="grid"] .painter-archive__coverflow { display:none; }
.painter-archive[data-current-view="grid"] { height:auto; min-height:100vh; }
.painter-archive[data-current-view="grid"] .painter-archive__grid-view { display:block; }
.painter-archive__grid-head { display:flex; justify-content:space-between; align-items:flex-end; margin:0 0 42px; padding-bottom:18px; border-bottom:1px solid #aaa; }
.painter-archive__grid-head p { margin:0; font-size:11px; text-transform:uppercase; }
.painter-archive__grid-head h1 { margin:0; font-size:clamp(38px,6vw,84px); font-weight:500; line-height:.9; }
.painter-archive__masonry { column-count:4; column-gap:18px; }
.painter-archive__product-card { display:inline-block; width:100%; margin:0 0 30px; break-inside:avoid; color:#111; text-decoration:none; }
.painter-archive__product-image { position:relative; overflow:hidden; background:transparent; box-shadow:0 10px 24px rgba(48,40,28,.12); }
.painter-archive__product-image img { display:block; width:100%; height:auto; transition:opacity 320ms ease,transform 500ms ease; }
.painter-archive__product-image img.is-hover { position:absolute; inset:0; height:100%; object-fit:contain; opacity:0; background:transparent; }
.painter-archive__product-card:hover .painter-archive__product-image img:first-child { opacity:0; transform:scale(1.02); }
.painter-archive__product-card:hover .painter-archive__product-image img.is-hover { opacity:1; }
.painter-archive__product-card > span { display:block; margin-top:13px; font-size:10px; font-weight:700; color:#777; }
.painter-archive__product-card h2 { margin:4px 0 7px; font-size:19px; line-height:1.08; font-weight:500; }
.painter-archive__product-card p,.painter-archive__product-card small { display:block; margin:0; font-size:11px; color:#666; }
@keyframes caption-wipe-out {
from { clip-path:inset(0 0 0 0); transform:translateX(0); }
to { clip-path:inset(0 100% 0 0); transform:translateX(-24px); }
}
@keyframes caption-wipe-in {
from { clip-path:inset(0 0 0 100%); transform:translateX(24px); }
to { clip-path:inset(0 0 0 0); transform:translateX(0); }
}
@media (max-width:767px) {
.painter-archive__chrome { inset:12px 12px auto; }
.painter-archive__left-controls { height:42px; }
.painter-archive__brand { width:48px; height:42px; }
.painter-archive__toolbar { height:42px; padding:0 7px; gap:7px; }
.painter-archive__toolbar a { padding:5px 4px; font-size:11px; }
.painter-archive__view-switch { gap:10px; padding:0; }
.painter-archive__view-switch button { width:38px; height:38px; }
.painter-archive__actions { gap:9px; }
.painter-archive__actions a { font-size:9px; }
.painter-archive__art-link { width:88vw; height:53vh; transform:translateY(-6vh) scale(.94); }
.painter-archive__scene.is-active .painter-archive__art-link { transform:translateY(-6vh) scale(1); }
.painter-archive__wear { right:7vw; bottom:max(88px,calc((100% - 53vh) / 2)); width:29vw; min-width:108px; }
.painter-archive__wear-actions { top:calc(100% + 8px); gap:5px; }
.painter-archive__cart-action { min-height:27px; padding:0 8px; font-size:9px; }
.painter-archive { --archive-caption-height:158px; }
.painter-archive__caption-copy { grid-template-columns:54px 1fr auto; gap:10px; padding:12px 12px 58px; }
.painter-archive__sku { font-size:10px; }
.painter-archive__caption h1 { font-size:21px; }
.painter-archive__caption .painter-archive__story { display:none; }
.painter-archive__size { display:none; }
.painter-archive__year { padding-left:8px; }
.painter-archive__year strong { font-size:13px; }
.painter-archive__coverflow { z-index:26; top:auto; right:0; bottom:8px; left:0; width:auto; height:44px; transform:none; }
.painter-archive__rail { inset:0 10px; height:44px; padding:0; flex-direction:row; justify-content:flex-start; align-items:center; gap:5px; overflow-x:auto; overflow-y:hidden; }
.painter-archive__rail button,.painter-archive__rail button.is-active { flex:0 0 42px; width:42px; height:38px; transform:none; }
.painter-archive__rail button.is-active { border:2px solid #111; }
.painter-archive__grid-view { padding:96px 14px 54px; }
.painter-archive__grid-head { display:block; }
.painter-archive__grid-head h1 { margin-top:10px; }
.painter-archive__masonry { column-count:2; column-gap:12px; }
.painter-archive__product-card { margin-bottom:22px; }
.painter-archive__product-card h2 { font-size:15px; }
}
@media (min-width:768px) and (max-width:1100px) {
.painter-archive__masonry { column-count:3; }
}
@media (prefers-reduced-motion:reduce) {
.painter-archive *,.painter-archive *::before,.painter-archive *::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
}