@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Montserrat:wght@400;600;700&display=swap');

:root{--bg:#0f0f12;--card:#17171b;--gold:#f6b24a;--text:#f3f3f3;--muted:#a7a7a7}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:#fff;text-decoration:none}
header.site{position:sticky;top:0;z-index:9;background:#0f0f12ee;border-bottom:1px solid #222;backdrop-filter:saturate(120%) blur(6px)}
.navbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.08em}
.brand img{height:28px}.brand span{font-size:18px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;border:1px solid #333;background:var(--card);color:#fff}
.btn.gold{background:var(--gold);color:#111;font-weight:700}
.badge{display:inline-block;min-width:22px;padding:2px 6px;border-radius:10px;background:#333;color:#fff;font-size:12px;text-align:center}
.hero{position:relative;overflow:hidden}
.hero img{width:100%;height:44vh;object-fit:cover;object-position:center}
@media(min-width:900px){.hero img{height:48vh}}

.main{padding:22px;max-width:1200px;margin:0 auto}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.card{background:var(--card);border-radius:12px;border:1px solid #242427;overflow:hidden;padding-bottom:10px}
.thumb{position:relative;width:100%;padding-top:100%;overflow:hidden;background:#0d0d0f}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.title{padding:10px 12px 2px;text-align:center;font-size:16px;font-weight:700;letter-spacing:.03em}

.footer-cta{margin:40px auto 80px;display:flex;flex-direction:column;gap:12px;max-width:820px}
.footer-cta a{display:block;text-align:center;padding:16px 18px;border-radius:10px;border:1px solid #333;font-weight:700}
.footer-cta a.review{background:#d9d9d9;color:#000}
.footer-cta a.request{background:var(--gold);color:#111}

/* Art pages */
.art{display:grid;grid-template-columns:1fr;gap:24px;padding:20px;max-width:1200px;margin:0 auto}
@media(min-width:980px){.art{grid-template-columns:520px 1fr}}
.art .image{background:var(--card);border:1px solid #2a2a2e;border-radius:12px;overflow:hidden}
.art .image img{width:100%;height:auto;display:block}
.art h1{margin:.2em 0 .4em;font-size:34px;letter-spacing:.06em;text-transform:uppercase}
.table{width:100%;border-collapse:collapse;font-size:15px}
.table th,.table td{border-bottom:1px solid #2d2d2f;padding:10px 8px;text-align:left}
.qty{display:inline-flex;align-items:center;border:1px solid #333;border-radius:8px;overflow:hidden}
.qty input{width:50px;background:#121214;border:0;color:#fff;padding:8px;text-align:center}
.add{background:var(--gold);color:#111;border:0;border-radius:999px;padding:10px 14px;font-weight:700}
.back{display:inline-block;margin:16px 0 0;color:#cfcfcf}

/* Cart */
.cart{max-width:1100px;margin:0 auto;padding:20px}
.cart table{width:100%;border-collapse:collapse}
.cart th,.cart td{border-bottom:1px solid #2a2a2d;padding:12px 8px}
.cart .total{font-size:18px;font-weight:800;text-align:right;padding-top:12px}

/* Focal tweaks for three thumbnails */
.thumb img.focal-giallo{object-position:72% 50%}
.thumb img.focal-vice{object-position:40% 40%}
.thumb img.focal-imposter{object-position:50% 45%}

.small{color:var(--muted);font-size:14px}

/* Typography recovery */
h1,h2,h3,.title,.brand span{ font-family: 'Cinzel', serif; }

/* Thumbnail zoom helpers */
.thumb img{ transform: scale(1.08); }       /* default slight zoom to reduce canvas borders */
.thumb img.zoom120{ transform: scale(1.20); }
.thumb img.zoom115{ transform: scale(1.15); }
.thumb img.zoom110{ transform: scale(1.10); }


/* === PDF-style strict square gallery === */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.card{background:#17171b;border:1px solid #242427;border-radius:10px;overflow:hidden;box-shadow:0 1px 0 #101012 inset}
.thumb{position:relative;width:100%;padding-top:100%;background:#0d0d0f;overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.12)}

.caption{border-top:1px solid #242427;padding:10px 12px 12px;text-align:center;background:#17171b}
.caption .title{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:16px;line-height:1.2;color:#f3f3f3;margin:2px 0 6px}
.caption .stock-pill{display:inline-block;padding:4px 10px;border-radius:999px;background:#1f2b22;border:1px solid #2e3f33;color:#cfead6;font-size:12px}

button,.btn,.caption .stock-pill,.navbar,.drawer a,.badge{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.brand span,.caption .title{font-family:"Cinzel",serif}

/* Per-art zoom/focal to kill negative space */
.thumb img[src*="scanner.jpg"]{transform:scale(1.32);object-position:50% 45%}
.thumb img[src*="shanghai-sally.jpg"]{transform:scale(1.30);object-position:50% 55%}
.thumb img[src*="the-shunting.jpg"]{transform:scale(1.35);object-position:50% 60%}
.thumb img[src*="giallo-i.jpg"]{transform:scale(1.18);object-position:72% 50%}
.thumb img[src*="visiting-hour.jpg"]{transform:scale(1.25);object-position:50% 45%}
.thumb img[src*="strange-vice-giallo-ii.jpg"]{transform:scale(1.18);object-position:40% 42%}
.thumb img[src*="imposter-i.jpg"]{transform:scale(1.18);object-position:50% 45%}

/* Drawer (Categories) */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:.2s;z-index:30}
.drawer{position:fixed;top:0;left:-280px;width:260px;height:100%;background:#141418;border-right:1px solid #232327;box-shadow:2px 0 8px rgba(0,0,0,.35);transition:.25s;z-index:31;padding:16px}
.drawer.open{left:0}
.drawer h3{margin:0 0 12px;font-family:"Cinzel",serif;font-size:18px}
.drawer a{display:block;color:#fff;padding:10px 8px;border-radius:8px;border:1px solid #25252a;background:#1a1a20;margin-bottom:8px;text-decoration:none}
.drawer a:hover{background:#22222a}
.drawer-show{opacity:1;pointer-events:auto}
.cat-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid #333;background:#1a1a20;color:#fff}

/* === v5 enforce fonts === */
html,body,button,.btn, input, textarea, select, .navbar, .badge, .caption .stock-pill { 
  font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; 
}
.brand span, h1,h2,h3, .caption .title { font-family: "Cinzel", serif; }

/* === v5 thumbnail tuning (remove bars) === */
.thumb img{ transform:scale(1.18); object-position:center; }
.thumb img[src*="scanner.jpg"]{ transform:scale(1.36); object-position:50% 45%; }
.thumb img[src*="shanghai-sally.jpg"]{ transform:scale(1.34); object-position:50% 58%; }
.thumb img[src*="the-shunting.jpg"]{ transform:scale(1.38); object-position:50% 60%; }
.thumb img[src*="giallo-i.jpg"]{ transform:scale(1.22); object-position:72% 50%; }
.thumb img[src*="visiting-hour.jpg"]{ transform:scale(1.28); object-position:50% 45%; }
.thumb img[src*="strange-vice-giallo-ii.jpg"]{ transform:scale(1.22); object-position:42% 42%; }
.thumb img[src*="imposter-i.jpg"]{ transform:scale(1.22); object-position:50% 46%; }

/* === v6 hover and no-underline === */
a, a:visited, .card a{ text-decoration:none }
.card:hover .caption .title{ color:#d6af60; }    /* gold on hover */
.btn{text-decoration:none}

/* stronger square crop tuning per user's note */
.thumb img[src*="giallo-i"]{ transform:scale(1.24); object-position:50% 50%; } /* center glove */
.thumb img[src*="shanghai-sally"]{ transform:scale(1.36); object-position:50% 55%; } /* fill bottom gap */
.thumb img[src*="the-shunting"]{ transform:scale(1.38); object-position:50% 60%; }
.thumb img[src*="scanner"]{ transform:scale(1.36); object-position:50% 50%; }
.thumb img[src*="imposter-i"]{ transform:scale(1.24); object-position:50% 56%; } /* lower focal point for goat face */

/* v8.6 Cinzel buttons */
button, .btn, .button, .cta, .pill, .bar-button, .home-cta, .home-cta .btn, .footer-cta .btn, .cart .btn, .cart button,
#home-review-bar, #home-commission-bar, .fullwidth-button {
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
}

/* v8.6 thumbnails (square, cover) */
.grid .card .thumb, .cards .card .thumb, .card .thumb {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
}
.grid .card .thumb img, .cards .card .thumb img, .card .thumb img, .card img.thumb, .gallery img.thumb {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
/* Per-artwork focal */
.grid img[src*="Giallo I"], .card img[src*="Giallo I"] { object-position: 50% 60% !important; }  /* lower glove */
.grid img[src*="Imposter"], .card img[src*="Imposter"] { object-position: 50% 68% !important; } /* show goat face */
.grid img[src*="Strange Vice"], .card img[src*="Strange Vice"],
.grid img[src*="Giallo II"], .card img[src*="Giallo II"] { object-position: 50% 40% !important; } /* raise woman's face */
/* Filename varies? also match ALT text */
.card img[alt*="GIALLO I"], .card img[alt*="Giallo I"] { object-position: 50% 60% !important; }
.card img[alt*="Imposter"] { object-position: 50% 68% !important; }
.card img[alt*="Strange Vice"], .card img[alt*="Giallo II"] { object-position: 50% 40% !important; }