/* La Piccola Bottega Onirica: colours and fonts taken from the original Base44 site */
:root {
  --bg: 30 8% 8%;
  --fg: 38 25% 94%;
  --card: 30 10% 11%;
  --primary: 38 55% 62%;
  --primary-fg: 30 8% 8%;
  --muted: 30 10% 14%;
  --muted-fg: 38 15% 65%;
  --accent: 280 25% 28%;
  --accent-fg: 38 25% 88%;
  --destructive: 0 62% 45%;
  --border: 30 12% 20%;
  --copper: 22 65% 52%;
  --copper-light: 26 70% 62%;
  --font-cinzel: "Cinzel Decorative", Georgia, serif;
  --font-crimson: "Crimson Text", Georgia, serif;
  --font-fell: "IM Fell English", Georgia, serif;
  --font-josefin: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
  --font-caveat: "Caveat", "Comic Sans MS", cursive;
  --font-kalam: "Kalam", "Comic Sans MS", cursive;
  --paper-ink: #2c2420;
  --paper-label: #5c4a3a;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: hsl(var(--bg));
  color: hsl(var(--fg));
  font-family: var(--font-crimson);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.no-scroll { overflow: hidden; }

/* Fonts */
.f-cinzel { font-family: var(--font-cinzel); }
.f-fell { font-family: var(--font-fell); }
.f-josefin { font-family: var(--font-josefin); }
.f-caveat { font-family: var(--font-caveat); }
.f-kalam { font-family: var(--font-kalam); }
.italic { font-style: italic; }

/* Colours */
.c-primary { color: hsl(var(--primary)); }
.c-primary-70 { color: hsl(var(--primary) / .7); }
.c-primary-60 { color: hsl(var(--primary) / .6); }
.c-primary-50 { color: hsl(var(--primary) / .5); }
.c-primary-40 { color: hsl(var(--primary) / .4); }
.c-fg-85 { color: hsl(var(--fg) / .85); }
.c-fg-80 { color: hsl(var(--fg) / .8); }
.c-fg-75 { color: hsl(var(--fg) / .75); }
.c-fg-60 { color: hsl(var(--fg) / .6); }
.c-fg-50 { color: hsl(var(--fg) / .5); }
.c-fg-40 { color: hsl(var(--fg) / .4); }
.c-fg-30 { color: hsl(var(--fg) / .3); }
.c-muted { color: hsl(var(--muted-fg)); }

/* Layout */
.wrap { position: relative; z-index: 10; padding: 7rem 1.5rem 5rem; margin: 0 auto; }
.w-3xl { max-width: 48rem; }
.w-4xl { max-width: 56rem; }
.w-5xl { max-width: 64rem; }
.w-6xl { max-width: 72rem; }
.w-7xl { max-width: 80rem; }
.center { text-align: center; }
.page-head { text-align: center; margin-bottom: 4rem; display: grid; gap: 1rem; justify-items: center; }
.page-head h1 { margin: 0; font-family: var(--font-cinzel); font-weight: 400; font-size: clamp(1.875rem, 5vw, 3rem); color: hsl(var(--primary)); line-height: 1.15; }
.page-head p { margin: 0; }
.eyebrow { font-family: var(--font-fell); font-style: italic; color: hsl(var(--primary) / .5); letter-spacing: .1em; font-size: .875rem; }
.subtitle { font-family: var(--font-fell); font-style: italic; color: hsl(var(--fg) / .5); }
.h2 { font-family: var(--font-cinzel); font-weight: 400; font-size: 1.25rem; color: hsl(var(--primary)); text-align: center; margin: 0 0 2rem; }
.panel { border: 1px solid hsl(var(--primary) / .1); background: hsl(var(--bg) / .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mb-16 { margin-bottom: 4rem; }
.flex-center { display: flex; justify-content: center; }

/* Ornament (line, gears and stars) */
.ornament { display: inline-flex; align-items: center; gap: .5rem; }
.ornament .line { height: 1px; width: 2rem; background: linear-gradient(to right, transparent, hsl(var(--primary) / .6)); }
.ornament .line.r { background: linear-gradient(to left, transparent, hsl(var(--primary) / .6)); }
.ornament .star { color: hsl(var(--primary) / .7); font-size: .75rem; }
.spin { animation: spin 10s linear infinite; }
.spin-rev { animation: spin 14s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin, .spin-rev, .bg-deco svg { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Fixed background decoration */
.bg-deco { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.bg-deco > * { position: absolute; }
.bg-deco .heart { inset: 0; background: url("/assets/cuore.jpg") center / 55% no-repeat; }
.bg-deco .heart.a { opacity: .07; mix-blend-mode: luminosity; filter: sepia(60%) hue-rotate(330deg) saturate(120%); }
.bg-deco .heart.b { opacity: .05; mix-blend-mode: color-dodge; filter: sepia(100%) hue-rotate(10deg) saturate(200%); }
.bg-deco .vignette { inset: 0; background: radial-gradient(ellipse 60% 75% at center, transparent 30%, rgba(0, 0, 0, .85) 100%); }
.bg-deco .pattern { inset: 0; opacity: .015; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4a853' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.bg-deco .hl { left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, hsl(var(--primary) / .3), transparent); }
.bg-deco .hl.c { background: linear-gradient(to right, transparent, hsl(var(--copper) / .2), transparent); }
.bg-deco .vl { top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, transparent, hsl(var(--primary) / .3), transparent); }
.bg-deco .vl.c { background: linear-gradient(to bottom, transparent, hsl(var(--copper) / .2), transparent); }

/* Navigation */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: all .5s; padding-top: env(safe-area-inset-top, 0px); border-bottom: 1px solid transparent; }
.nav.scrolled { background: hsl(var(--bg) / .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: hsl(var(--primary) / .2); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .4); }
.nav-inner { max-width: 72rem; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.nav-back { color: hsl(var(--muted-fg)); margin-right: .75rem; display: inline-flex; transition: color .3s; }
.nav-back:hover { color: hsl(var(--primary)); }
.brand { display: flex; flex-direction: column; align-items: flex-start; margin-right: auto; }
.brand .small { font-family: var(--font-cinzel); font-size: .75rem; letter-spacing: .3em; color: hsl(var(--primary) / .6); text-transform: uppercase; line-height: 1.3; }
.brand .big { font-family: var(--font-cinzel); font-size: 1.125rem; letter-spacing: .05em; color: hsl(var(--primary)); line-height: 1.25; }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-link { position: relative; font-family: var(--font-fell); font-size: .875rem; letter-spacing: .05em; color: hsl(var(--fg) / .7); transition: color .3s; }
.nav-link:hover, .nav-link.active { color: hsl(var(--primary)); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: -.25rem; height: 1px; width: 0; background: hsl(var(--primary)); transition: width .3s; }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.admin-pill { font-family: var(--font-fell); font-size: .75rem; letter-spacing: .1em; color: hsl(var(--accent-fg)); background: hsl(var(--accent) / .4); border: 1px solid hsl(var(--accent)); padding: .25rem .75rem; border-radius: .25rem; transition: background .3s; }
.admin-pill:hover { background: hsl(var(--accent) / .6); }
.nav-user { display: flex; align-items: center; gap: .75rem; border-left: 1px solid hsl(var(--primary) / .2); padding-left: 1rem; font-family: var(--font-josefin); font-size: .75rem; color: hsl(var(--muted-fg)); }
.icon-btn { color: hsl(var(--muted-fg)); display: inline-flex; transition: color .3s; }
.icon-btn:hover { color: hsl(var(--primary)); }
.nav-toggle { color: hsl(var(--primary)); display: inline-flex; }
.mobile-menu { position: fixed; left: 0; right: 0; top: calc(60px + env(safe-area-inset-top, 0px)); background: hsl(var(--bg)); z-index: 40; border-bottom: 1px solid hsl(var(--primary) / .2); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .4); padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; animation: drop .25s ease-out; }
.mobile-menu a { font-family: var(--font-fell); font-size: 1rem; letter-spacing: .05em; color: hsl(var(--fg) / .7); }
.mobile-menu a.active { color: hsl(var(--primary)); }
.mobile-menu .user-row { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid hsl(var(--primary) / .1); padding-top: 1rem; font-family: var(--font-josefin); font-size: .75rem; color: hsl(var(--muted-fg)); }
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
@media (min-width: 768px) {
  .nav-links { display: flex; }
  .nav-toggle, .mobile-menu { display: none !important; }
  .brand { margin-right: 0; }
  .nav-inner { gap: 1rem; }
}

/* Footer */
.footer { position: relative; z-index: 10; border-top: 1px solid hsl(var(--primary) / .1); padding: 2.5rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); margin-top: 5rem; text-align: center; display: grid; gap: .75rem; justify-items: center; }
.footer p { margin: 0; }
.footer .name { font-family: var(--font-cinzel); font-size: .75rem; letter-spacing: .3em; color: hsl(var(--primary) / .5); text-transform: uppercase; }
.footer .by { font-family: var(--font-fell); font-style: italic; color: hsl(var(--muted-fg)); font-size: .875rem; }
.footer .copy { font-family: var(--font-josefin); font-size: .75rem; color: hsl(var(--muted-fg) / .4); }
.footer .secret { opacity: .1; transition: opacity .5s; margin-top: .5rem; display: inline-flex; }
.footer .secret:hover { opacity: .25; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-fell); letter-spacing: .1em; font-size: .875rem; padding: .75rem 2rem; border: 1px solid; transition: all .3s; }
.btn-gold { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); }
.btn-gold:hover { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); }
.btn-ghost { border-color: hsl(var(--fg) / .2); color: hsl(var(--fg) / .6); }
.btn-ghost:hover { border-color: hsl(var(--primary) / .4); color: hsl(var(--fg) / .8); }
.btn-solid { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); border-color: hsl(var(--primary)); padding: .5rem 1.5rem; letter-spacing: .05em; }
.btn-solid:hover { background: hsl(var(--primary) / .8); }
.btn-copper { border-color: hsl(var(--copper) / .4); color: hsl(var(--copper-light)); }
.btn-copper:hover { background: hsl(var(--copper) / .1); }
.btn-plain { border-color: hsl(var(--border)); color: hsl(var(--muted-fg)); padding: .5rem 1rem; letter-spacing: 0; }
.btn-plain:hover { border-color: hsl(var(--fg) / .3); }
.btn:disabled { opacity: .45; cursor: default; }
.link-under { font-family: var(--font-fell); font-style: italic; color: hsl(var(--primary) / .7); font-size: .875rem; letter-spacing: .05em; text-decoration: underline; text-underline-offset: 4px; transition: color .3s; }
.link-under:hover { color: hsl(var(--primary)); }

/* Filter chips (gallery categories, admin tabs) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chips.centered { justify-content: center; margin-bottom: 3rem; }
.chip { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-fell); letter-spacing: .05em; font-size: .75rem; padding: .625rem 1rem; border: 1px solid hsl(var(--fg) / .1); color: hsl(var(--fg) / .4); transition: all .3s; }
.chip:hover { border-color: hsl(var(--primary) / .3); color: hsl(var(--fg) / .7); }
.chip.on { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: hsl(var(--primary) / .1); }
@media (min-width: 640px) { .chip { padding: .5rem 1rem; } }

/* Scroll-in animation */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Home */
.hero { position: relative; z-index: 10; min-height: 88vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 1.5rem; }
@media (min-width: 640px) { .hero { min-height: 100vh; } }
.hero-inner { max-width: 48rem; display: grid; gap: 1.5rem; justify-items: center; animation: rise 1.2s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
.hero .opere-di { font-family: var(--font-fell); font-style: italic; color: hsl(var(--primary) / .6); font-size: .875rem; letter-spacing: .4em; text-transform: uppercase; margin: 0; }
.hero-title { position: relative; width: 100%; }
.hero-title h1 { position: relative; z-index: 1; margin: 0; padding: 0 3rem; font-family: var(--font-cinzel); font-weight: 400; color: hsl(var(--primary)); line-height: 1.2; font-size: clamp(2.25rem, 8vw, 4.5rem); }
.hero-title .g { position: absolute; }
.hero-title .rivets { position: absolute; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: .5rem; opacity: .4; }
.rivets .rv { width: 10px; height: 10px; border-radius: 50%; border: 3px solid currentColor; }
.rivets .ln { width: 1px; height: 2rem; }
.hero .shop { font-family: var(--font-fell); font-style: italic; color: hsl(var(--fg) / .6); font-size: clamp(1.125rem, 2.5vw, 1.25rem); letter-spacing: .05em; margin: 0; }
.hero .tagline { font-family: var(--font-josefin); color: hsl(var(--fg) / .5); max-width: 36rem; line-height: 1.625; margin: 0; }
.hero .ctas { display: flex; flex-direction: column; gap: 1rem; justify-content: center; margin-top: 2rem; }
@media (min-width: 640px) { .hero .ctas { flex-direction: row; } }
.scroll-hint { position: absolute; bottom: 2.5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; animation: fade 1s 2s both; }
.scroll-hint span { color: hsl(var(--muted-fg) / .3); font-size: .75rem; font-family: var(--font-fell); letter-spacing: .1em; }
.scroll-hint i { width: 1px; height: 2.5rem; background: linear-gradient(to bottom, hsl(var(--primary) / .3), transparent); }
@keyframes fade { from { opacity: 0; } }
.featured { position: relative; z-index: 10; max-width: 72rem; margin: 0 auto; padding: 5rem 1.5rem; }
.featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .featured-grid { gap: 1.5rem; } }
@media (min-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; overflow: hidden; aspect-ratio: 1; border: 1px solid hsl(var(--primary) / .1); transition: border-color .5s; display: block; }
.tile:hover { border-color: hsl(var(--primary) / .3); }
.tile img:not(.stamp) { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: transform .7s, filter .7s; }
.tile:hover img:not(.stamp) { transform: scale(1.05); filter: brightness(.9); }
.tile .cap { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 1rem; background: linear-gradient(to top, hsl(var(--bg) / .9), transparent 50%); opacity: 0; transition: opacity .5s; }
.tile:hover .cap, .tile:focus-visible .cap { opacity: 1; }
.cap .t { font-family: var(--font-cinzel); font-size: .875rem; color: hsl(var(--primary)); margin: 0; }
.cap .c { font-family: var(--font-fell); font-style: italic; color: hsl(var(--fg) / .6); font-size: .75rem; margin: 0; }
.quote-box { position: relative; z-index: 10; max-width: 48rem; margin: 0 auto; padding: 5rem 1.5rem; text-align: center; }
.quote-box .inner { border: 1px solid hsl(var(--primary) / .1); padding: 2.5rem; position: relative; }
.quote-box .mark { position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: hsl(var(--bg)); padding: 0 1rem; color: hsl(var(--primary) / .4); font-size: 1.5rem; font-family: var(--font-fell); }
.signature { font-family: var(--font-cinzel); font-size: .75rem; color: hsl(var(--primary) / .5); letter-spacing: .1em; margin: 1.5rem 0 0; }

/* TV intro on the home page */
.intro { position: fixed; inset: 0; z-index: 9999; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity .25s; }
.intro.gone { opacity: 0; pointer-events: none; }
.intro .scan { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .45) 2px, rgba(0, 0, 0, .45) 4px); pointer-events: none; z-index: 2; }
.intro .noise { position: absolute; background: rgba(255, 255, 255, .6); animation: noise .2s linear infinite alternate; }
@keyframes noise { 0% { transform: translateX(0); } 33% { transform: translateX(-8px); opacity: 0; } 66% { transform: translateX(12px); } 100% { transform: translateX(-4px); opacity: .1; } }
.intro .title { position: relative; text-align: center; user-select: none; animation: jitter .3s infinite alternate; }
.intro.shrink .title { animation: shrink .45s ease-in forwards; }
@keyframes jitter { 0% { transform: translateX(0); } 25% { transform: translateX(-3px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } 100% { transform: translateX(3px); } }
@keyframes shrink { 60% { opacity: 1; } to { transform: scale(1.1, 0); opacity: 0; } }
.intro .title p { margin: 0; font-family: var(--font-cinzel); font-size: clamp(1.5rem, 4vw, 2.25rem); letter-spacing: .25em; text-transform: uppercase; }
.intro .title .r { position: absolute; inset: 0; color: rgba(239, 68, 68, .6); transform: translate(-4px, 1px); mix-blend-mode: screen; }
.intro .title .b { position: absolute; inset: 0; color: rgba(96, 165, 250, .5); transform: translate(4px, -1px); mix-blend-mode: screen; }
.intro .title .w { position: relative; color: rgba(255, 255, 255, .9); }
.intro .title .s { font-family: var(--font-fell); font-style: italic; color: rgba(255, 255, 255, .4); font-size: .875rem; margin-top: .75rem; letter-spacing: .1em; text-transform: none; }
.intro .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 80% at center, transparent 40%, rgba(0, 0, 0, .85) 100%); }

/* Gallery */
.masonry { columns: 2; column-gap: .75rem; max-width: 80rem; margin: 0 auto; }
@media (min-width: 768px) { .masonry { columns: 3; } }
@media (min-width: 1024px) { .masonry { columns: 4; } }
.piece { break-inside: avoid; margin-bottom: .75rem; position: relative; overflow: hidden; border: 1px solid hsl(var(--primary) / .05); transition: border-color .5s; display: block; width: 100%; text-align: left; }
.piece:hover { border-color: hsl(var(--primary) / .25); }
.piece img:not(.stamp) { width: 100%; height: auto; filter: brightness(.8); transition: transform .7s, filter .7s; }
.piece:hover img:not(.stamp) { transform: scale(1.05); filter: brightness(.95); }
.piece .cap { position: absolute; inset: 0; background: linear-gradient(to top, hsl(var(--bg) / .8), transparent 50%); opacity: 0; transition: opacity .5s; }
.piece:hover .cap, .piece:focus-visible .cap { opacity: 1; }
.piece .cap .txt { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem; }
.piece .cap .t { font-size: .75rem; }
.piece .cap .zoom { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: hsl(var(--primary) / .6); }
.stamp { height: auto; position: absolute; z-index: 20; pointer-events: none; user-select: none; }
.piece .stamp { bottom: .75rem; right: .75rem; width: 5rem; transform: rotate(-8deg); }
@media (min-width: 640px) { .piece .stamp { width: 6rem; } }
.spinner { width: 2rem; height: 2rem; border: 2px solid hsl(var(--primary) / .3); border-top-color: hsl(var(--primary)); border-radius: 50%; animation: spin 1s linear infinite; margin: 5rem auto; }
.empty { text-align: center; padding: 5rem 0; font-family: var(--font-fell); font-style: italic; color: hsl(var(--muted-fg)); font-size: 1.125rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .95); display: flex; align-items: center; justify-content: center; padding: 1rem; overflow-y: auto; animation: fade .3s; }
.lb-tools { position: absolute; top: calc(1rem + env(safe-area-inset-top, 0px)); right: 1rem; z-index: 10; display: flex; gap: .5rem; }
.round-btn { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); color: #fff; transition: background .3s, color .3s; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.round-btn:hover { background: hsl(var(--primary)); color: hsl(var(--primary-fg)); }
.lb-prev, .lb-next { position: fixed; top: 50%; transform: translateY(-50%); z-index: 10; width: 2.75rem; height: 2.75rem; }
.lb-prev { left: .75rem; }
.lb-next { right: .75rem; }
.lb-body { display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 64rem; margin: auto 0; animation: pop .35s; }
@keyframes pop { from { transform: scale(.93); opacity: 0; } }
.lb-img { flex: 1; display: flex; align-items: center; justify-content: center; }
.lb-img img { max-height: 50vh; max-width: 100%; object-fit: contain; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); }
.lb-side { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; justify-content: center; }
.lb-side .desc-img { width: 100%; height: auto; object-fit: contain; max-height: 85vh; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5); }
@media (min-width: 768px) {
  .lb-body { flex-direction: row; }
  .lb-img img { max-height: 85vh; }
  .lb-side { width: 24rem; }
}
@media (min-width: 1024px) { .lb-side { width: 26rem; } }
.paper { background: url("/assets/sfondo-descrizioni.jpg") center / cover no-repeat; box-shadow: inset 0 0 60px rgba(90, 60, 20, .35), 4px 4px 24px rgba(0, 0, 0, .5); color: var(--paper-ink); position: relative; overflow: hidden; }
.paper-desc { padding: 2rem 3rem; }
.paper-desc h2 { font-family: var(--font-kalam); font-size: 1.5rem; font-weight: 700; line-height: 1.25; margin: 0; }
.paper-desc .rule { height: 1px; margin: 1rem .5rem 0; background: rgba(140, 69, 69, .4); }
.paper-desc p { font-family: var(--font-caveat); font-size: 1.15rem; line-height: 32px; margin: 1rem 0 0; white-space: pre-line; }
.paper-card { margin-top: 1.25rem; padding: 1.25rem; }
.paper-sep { display: flex; align-items: center; gap: .5rem; }
.paper-sep i { height: 1px; flex: 1; background: linear-gradient(to right, transparent, rgba(120, 80, 30, .4), transparent); }
.paper-sep span { color: rgba(120, 80, 30, .5); font-size: .6rem; }
.paper-rows { display: flex; gap: 1rem; align-items: center; margin: .75rem 0; }
.paper-rows dl { flex: 1; margin: 0; display: grid; gap: .375rem; }
.paper-rows dl div { display: flex; gap: .75rem; }
.paper-rows dt { font-family: var(--font-cinzel); font-weight: 700; white-space: nowrap; color: var(--paper-label); font-size: .7rem; letter-spacing: .12em; padding-top: .15rem; }
.paper-rows dd { margin: 0; font-family: var(--font-kalam); font-size: .85rem; line-height: 1.4; }
.paper-rows .stamp { position: static; width: 8rem; flex-shrink: 0; transform: rotate(-12deg); }
@media (min-width: 640px) { .paper-rows .stamp { width: 10rem; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 200; background: hsl(var(--card)); border: 1px solid hsl(var(--primary) / .3); padding: .75rem 1.25rem; font-family: var(--font-josefin); font-size: .875rem; max-width: calc(100% - 2rem); animation: fade .3s; }
.toast strong { display: block; color: hsl(var(--primary)); font-weight: 600; }

/* Cards (Artista, Commissioni) */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .cards { gap: 1rem; } }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card { border: 1px solid hsl(var(--primary) / .1); padding: 1rem; transition: border-color .3s; }
.card:hover { border-color: hsl(var(--primary) / .3); }
@media (min-width: 640px) { .card { padding: 1.25rem; } }
.card .ico { font-size: 1.5rem; margin-bottom: .5rem; }
.card .lbl { font-family: var(--font-cinzel); font-size: .75rem; color: hsl(var(--primary)); margin: 0 0 .25rem; }
.card .d { font-family: var(--font-josefin); color: hsl(var(--fg) / .75); line-height: 2; margin: 0; }
.bio { display: grid; gap: 1.5rem; padding: 1.25rem; }
@media (min-width: 640px) { .bio { padding: 2rem; } }
.bio p { margin: 0; line-height: 2; }
.bio .intro-q { border-left: 2px solid hsl(var(--primary) / .3); padding: .5rem 0 .5rem 1.5rem; }
.closing { text-align: center; padding: 2.5rem; }
.closing p { margin: 0 0 1rem; line-height: 2; }

/* Esperienze */
.exp-paper { padding: 1.25rem; min-height: 300px; max-width: 48rem; margin: 0 auto; animation: rise .6s; }
@media (min-width: 640px) { .exp-paper { padding: 2rem; } }
@media (min-width: 768px) { .exp-paper { padding: 3rem; } }
.exp-paper .txt { font-family: var(--font-caveat); white-space: pre-line; line-height: 1.7em; margin: 0; }
.exp-pager { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgba(120, 80, 30, .25); color: var(--paper-label); font-family: var(--font-fell); font-size: .875rem; }
.exp-pager button { padding: .5rem; color: var(--paper-label); display: inline-flex; }
.exp-pager button:disabled { opacity: .25; cursor: default; }
.exp-none { font-family: var(--font-fell); font-style: italic; text-align: center; padding: 2.5rem 0; color: var(--paper-label); margin: 0; }

/* Contatti */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 640px) { .contact-grid { gap: 2.5rem; } }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.col { display: grid; gap: 2rem; align-content: start; }
.col.tight { gap: 1.5rem; }
.box { border: 1px solid hsl(var(--primary) / .15); padding: 1.25rem; transition: border-color .3s; background: hsl(var(--bg) / .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.box:hover { border-color: hsl(var(--primary) / .3); }
@media (min-width: 640px) { .box { padding: 2rem; } }
.row-ico { display: flex; align-items: flex-start; gap: 1rem; }
.row-ico > svg { color: hsl(var(--primary) / .6); margin-top: .25rem; flex-shrink: 0; }
.box h3 { font-family: var(--font-cinzel); font-weight: 400; font-size: .875rem; color: hsl(var(--primary)); margin: 0 0 .5rem; }
.box .sep { height: 1px; background: hsl(var(--primary) / .1); margin: 1.5rem 0; }
.contact-link { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; }
.contact-link svg { color: hsl(var(--primary) / .5); transition: color .3s; flex-shrink: 0; }
.contact-link:hover svg { color: hsl(var(--primary)); }
.contact-link .v { font-family: var(--font-josefin); color: hsl(var(--fg) / .85); margin: 0; word-break: break-word; }
.contact-link .k { font-family: var(--font-fell); font-style: italic; color: hsl(var(--fg) / .3); font-size: .75rem; margin: 0; }
.map { border: 1px solid hsl(var(--primary) / .15); overflow: hidden; }
.map iframe { display: block; width: 100%; height: 256px; border: 0; filter: grayscale(60%) sepia(30%) contrast(90%); }
.map a { display: flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-fell); font-style: italic; color: hsl(var(--primary) / .6); font-size: .875rem; padding: .75rem 0; border-top: 1px solid hsl(var(--primary) / .1); background: hsl(var(--bg) / .6); }
.map a:hover { color: hsl(var(--primary)); }
.note-box { border: 1px solid hsl(var(--primary) / .1); padding: 1.25rem; }
.special { background: hsl(var(--accent) / .2); border: 1px solid hsl(var(--accent) / .3); padding: 1.5rem; }
.special .h { font-family: var(--font-cinzel); font-size: .75rem; color: hsl(var(--primary) / .7); margin: 0 0 .5rem; letter-spacing: .05em; }
.special .t { font-family: var(--font-josefin); color: hsl(var(--fg) / .85); font-size: .875rem; line-height: 2; margin: 0; }

/* Commissioni */
.lead { border-left: 2px solid hsl(var(--primary) / .3); padding: .5rem 1.25rem; background: hsl(var(--bg) / .5); backdrop-filter: blur(4px); }
@media (min-width: 640px) { .lead { padding: .5rem 1.5rem; } }
.lead p { margin: 0; line-height: 2; }
.steps { display: grid; }
.step { display: flex; gap: 1.5rem; padding-bottom: 2rem; position: relative; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 19px; top: 2.5rem; bottom: 0; width: 1px; background: hsl(var(--primary) / .1); }
.step .num { flex-shrink: 0; width: 2.5rem; height: 2.5rem; border: 1px solid hsl(var(--primary) / .3); display: flex; align-items: center; justify-content: center; font-family: var(--font-cinzel); font-size: .75rem; color: hsl(var(--primary)); }
.step .tt { font-family: var(--font-cinzel); font-size: .875rem; color: hsl(var(--primary)); margin: .25rem 0; }
.step .dd { font-family: var(--font-josefin); color: hsl(var(--fg) / .8); line-height: 2; margin: 0; }
.cta { text-align: center; padding: 1.5rem; display: grid; gap: 1.5rem; justify-items: center; }
@media (min-width: 640px) { .cta { padding: 2.5rem; } }
.cta p { margin: 0; }
.cta .btns { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
@media (min-width: 640px) { .cta .btns { flex-direction: row; } }

/* Admin */
.login { max-width: 24rem; margin: 0 auto; padding: 2rem; display: grid; gap: 1rem; }
.field label, .lbl-sm { display: block; font-family: var(--font-fell); font-size: .75rem; color: hsl(var(--muted-fg)); margin-bottom: .25rem; letter-spacing: .05em; }
.input { width: 100%; background: hsl(var(--muted) / .3); border: 1px solid hsl(var(--border)); padding: .5rem .75rem; font-family: var(--font-crimson); color: hsl(var(--fg) / .8); outline: none; transition: border-color .2s; font-size: 1rem; }
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 2.75rem; }
.pw-eye { position: absolute; top: 0; right: 0; bottom: 0; width: 2.75rem; display: flex; align-items: center; justify-content: center; color: hsl(var(--muted-fg)); transition: color .2s; }
.pw-eye:hover, .pw-eye:focus-visible { color: hsl(var(--primary)); }
.input:focus { border-color: hsl(var(--primary) / .5); }
textarea.input { resize: vertical; }
.input.sm { font-size: .875rem; }
.input.xs { font-size: .75rem; padding: .25rem .5rem; }
.err { font-family: var(--font-fell); font-size: .875rem; color: hsl(0 70% 60%); margin: 0; }
.ok { font-family: var(--font-fell); font-style: italic; font-size: .875rem; color: #4ade80; margin: 0; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; border-bottom: 1px solid hsl(var(--primary) / .1); padding-bottom: 1rem; }
.admin-tabs .chip { padding: .5rem 1.25rem; }
.admin-tabs .stats-link { margin-left: auto; }
.admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
@media (min-width: 640px) { .admin-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .admin-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .admin-grid { grid-template-columns: repeat(5, 1fr); } }
.a-item { position: relative; border: 1px solid hsl(var(--primary) / .1); overflow: hidden; transition: border-color .3s; }
.a-item:hover { border-color: hsl(var(--primary) / .3); }
.a-item .im { aspect-ratio: 1; overflow: hidden; position: relative; }
.a-item .im img:not(.stamp) { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); transition: transform .5s; }
.a-item:hover .im img:not(.stamp) { transform: scale(1.05); }
.a-item .im .stamp { bottom: .5rem; right: .5rem; width: 3.5rem; transform: rotate(-8deg); }
.a-item .meta { padding: .5rem; }
.a-item .meta .t { font-family: var(--font-cinzel); font-size: .75rem; color: hsl(var(--primary)); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-item .meta .c { font-family: var(--font-fell); font-style: italic; font-size: .75rem; color: hsl(var(--fg) / .4); margin: 0; }
.a-actions { position: absolute; top: .5rem; right: .5rem; display: flex; flex-direction: column; gap: .25rem; opacity: 0; transition: opacity .2s; }
.a-item:hover .a-actions, .a-item:focus-within .a-actions { opacity: 1; }
@media (hover: none) { .a-actions { opacity: 1; } }
.a-actions button { padding: .375rem; border-radius: 2px; background: hsl(var(--bg) / .7); color: hsl(var(--muted-fg)); display: inline-flex; backdrop-filter: blur(4px); transition: all .2s; }
.a-actions button:hover { color: hsl(var(--primary)); }
.a-actions button.del:hover { color: hsl(var(--destructive)); }
.a-actions button.feat-on { background: hsl(var(--primary) / .8); color: hsl(var(--primary-fg)); }
.a-actions button.sold-on { background: rgba(127, 29, 29, .9); color: #fecaca; }
.form-box { border: 1px solid hsl(var(--primary) / .2); padding: 2rem; display: grid; gap: 1.5rem; animation: drop .3s; }
@media (max-width: 640px) { .form-box { padding: 1.25rem; } }
.form-box .head { display: flex; align-items: center; justify-content: space-between; }
.form-box h2 { font-family: var(--font-cinzel); font-weight: 400; font-size: .875rem; color: hsl(var(--primary)); margin: 0; }
.two { display: grid; gap: 1.5rem; }
@media (min-width: 768px) { .two { grid-template-columns: 1fr 1fr; } }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.stack { display: grid; gap: 1rem; }
.drop { display: flex; align-items: center; justify-content: center; overflow: hidden; border: 2px dashed hsl(var(--primary) / .2); transition: border-color .2s; cursor: pointer; text-align: center; padding: 1.5rem; }
.drop:hover, .drop.over { border-color: hsl(var(--primary) / .4); }
.drop.has { padding: 0; }
.drop img { width: 100%; height: 100%; object-fit: cover; }
.drop.contain img { object-fit: contain; background: hsl(var(--bg) / .5); }
.drop .hint { display: grid; gap: .5rem; justify-items: center; color: hsl(var(--primary) / .3); }
.drop .hint p { font-family: var(--font-fell); font-style: italic; color: hsl(var(--muted-fg)); font-size: .875rem; margin: 0; }
.drop .hint small { font-family: var(--font-josefin); color: hsl(var(--muted-fg) / .4); font-size: .75rem; }
.check { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-family: var(--font-fell); font-size: .75rem; color: hsl(var(--muted-fg)); letter-spacing: .05em; }
.check input { accent-color: #f59e0b; }
.small-link { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; font-family: var(--font-fell); font-size: .75rem; color: hsl(var(--muted-fg)); }
.small-link:hover { color: hsl(var(--destructive)); }
.helper { font-family: var(--font-fell); font-style: italic; color: hsl(var(--muted-fg) / .5); font-size: .75rem; margin: 0 0 .5rem; }
.count { font-family: var(--font-fell); font-style: italic; color: hsl(var(--muted-fg) / .4); font-size: .75rem; text-align: center; margin-top: 2rem; }
.batch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 640px) { .batch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .batch-grid { grid-template-columns: repeat(4, 1fr); } }
.b-item { border: 1px solid hsl(var(--primary) / .1); overflow: hidden; position: relative; }
.b-item .im { aspect-ratio: 1; position: relative; overflow: hidden; }
.b-item .im img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.b-item .over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: hsl(var(--bg) / .55); }
.b-item .over.e { background: hsl(var(--destructive) / .3); color: hsl(var(--destructive)); }
.b-item .over.d { color: #4ade80; }
.b-item .rm { position: absolute; top: .25rem; right: .25rem; background: hsl(var(--bg) / .7); padding: .25rem; display: inline-flex; }
.b-item .rm:hover { color: hsl(var(--destructive)); }
.b-item .fields { padding: .5rem; display: grid; gap: .375rem; }
.set-box { border: 1px solid hsl(var(--primary) / .15); padding: 1.5rem; display: grid; gap: 1.25rem; }
.set-box h3 { font-family: var(--font-cinzel); font-weight: 400; font-size: .75rem; color: hsl(var(--primary)); letter-spacing: .05em; margin: 0; padding-bottom: 1.25rem; border-bottom: 1px solid hsl(var(--primary) / .1); }
.set-size { display: flex; align-items: center; gap: .75rem; }
.set-size label { margin: 0; white-space: nowrap; }
.set-size select { width: auto; }
.actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.save-bar { position: sticky; bottom: 0; padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, hsl(var(--bg)) 60%, transparent); z-index: 5; }
.spin-ico { animation: spin 1s linear infinite; }

/* Statistics */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .kpis { gap: 1rem; } }
@media (min-width: 768px) { .kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi { padding: 1.25rem; text-align: center; }
.kpi svg { color: hsl(var(--primary) / .5); margin: 0 auto .5rem; }
.kpi .v { font-family: var(--font-cinzel); font-size: 1.25rem; color: hsl(var(--primary)); margin: 0; overflow-wrap: anywhere; }
.kpi .l { font-family: var(--font-fell); font-style: italic; color: hsl(var(--fg) / .4); font-size: .75rem; margin: .25rem 0 0; }
.stat-box { padding: 1.5rem; margin-bottom: 2.5rem; }
@media (min-width: 640px) { .stat-box { padding: 2.5rem; } }
.stat-box h2 { font-family: var(--font-cinzel); font-weight: 400; font-size: 1.125rem; color: hsl(var(--primary)); margin: 0; }
.stat-box .sub { font-family: var(--font-fell); font-style: italic; color: hsl(var(--fg) / .4); font-size: .875rem; margin: .25rem 0 1.5rem; }
.stat-box .sub .down { color: #f87171; }
.stat-box .sub .up { color: #4ade80; }
.chart { overflow-x: auto; }
.chart svg { display: block; width: 100%; min-width: 480px; height: auto; }
.chart .bar { fill: hsl(var(--primary)); }
.chart .bar.copper { fill: hsl(var(--copper)); }
.chart .bar:hover { opacity: .8; }
.chart text { fill: rgba(216, 203, 170, .5); font-size: 10px; font-family: var(--font-crimson); }
.chart .grid { stroke: rgba(212, 168, 83, .1); stroke-dasharray: 3 3; }
.chart .axis { stroke: rgba(216, 203, 170, .3); }
.rank { display: grid; gap: 1rem; }
.rank .r { display: grid; grid-template-columns: 1fr minmax(6rem, 40%) 3rem; align-items: center; gap: 1rem; font-family: var(--font-josefin); color: hsl(var(--fg) / .85); }
.rank .r span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank .track { height: 6px; background: hsl(var(--primary) / .12); }
.rank .fill { height: 100%; background: hsl(var(--primary) / .6); }
.rank .n { text-align: right; color: hsl(var(--primary)); font-family: var(--font-cinzel); font-size: .875rem; }
.two-stats { display: grid; gap: 2.5rem; margin-bottom: 2.5rem; }
.two-stats .stat-box { margin: 0; }
@media (min-width: 768px) { .two-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.stats-note { font-family: var(--font-fell); font-style: italic; color: hsl(var(--muted-fg) / .6); font-size: .8rem; text-align: center; }