/* Shared chrome of every vetrina: the author's signature over any client world.
   The page above belongs to the client; from the seam down it is Luca's studio: black room, violet glass,
   amber light, Instrument Serif that speaks, Geist that explains, Geist Mono that proves.
   Same block on all sites: that recurrence is the thread that tells the visitor who made them. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:cubic-bezier(.2,.8,.1,1)}

/* ---------- the signature pill: always the studio, whatever the page ---------- */
.vk-pill{position:fixed;left:max(12px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom));z-index:2147483000;display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 24px);min-height:44px;padding:0 16px 0 14px;border-radius:999px;background:#050409e8;color:#f3ecf7;font:500 13px/1.2 "VK Sans",Geist,system-ui,sans-serif;text-decoration:none;white-space:nowrap;view-transition-name:vk-pill;box-shadow:0 0 0 1px #ffffff26,0 10px 30px -12px #000;transition:background .25s,box-shadow .25s}
.vk-pill:hover{background:#050409;box-shadow:0 0 0 1px #ffb87766,0 10px 30px -12px #000}
.vk-pill .vk-node{flex:none;width:8px;height:8px;border-radius:50%;background:#fff4e6;box-shadow:0 0 0 3px #050409,0 0 0 4px #ffb877aa,0 0 10px 3px #ffb87799}
.vk-pill[data-kind=demo] .vk-node{background:transparent;box-shadow:inset 0 0 0 1.25px #b9adc6}
.vk-pill b{font:italic 400 17px/1 "VK Serif","Iowan Old Style",Georgia,serif;letter-spacing:0}
.vk-pill i{font-style:normal;color:#b9adc6}
.vk-pill i::before{content:"·";margin-right:8px;color:#8a7f96}
@media (max-width:560px){.vk-pill .vk-long{display:none}}
.vk-pill:focus-visible,.vk-case a:focus-visible{outline:2px solid #ffb877;outline-offset:4px}

/* ---------- Dietro le quinte ---------- */
.vk-case{--ink:#f3ecf7;--muted:#b9adc6;--faint:#8a7f96;--amber:#ffb877;--violet:#b99bff;--glass:#c9b3ff;--room:#050409;
  position:relative;z-index:1;isolation:isolate;overflow:hidden;background:var(--room);color:var(--ink);
  padding:clamp(96px,16vh,190px) clamp(20px,5vw,64px) clamp(104px,14vh,160px);font:400 17px/1.6 "VK Sans",Geist,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.vk-case::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 40% at 78% 0%,#2a1d4d66,transparent 70%),radial-gradient(50% 35% at 10% 100%,#1b143366,transparent 70%)}
.vk-case>.vk-wrap{max-width:1180px;margin:0 auto}
/* the seam: where the client's world ends, a thread of light enters the studio */
.vk-seam{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,#b99bff00 0%,#b99bff 38%,#ffb877 72%,#fff1de 74%,#ffb87700 100%);box-shadow:0 0 10px #ffb87788,0 0 30px #b99bff44}
.vk-case>.vk-wrap{position:relative}
/* from the seam a single thread drops to the signature */
.vk-wrap::before{content:"";position:absolute;left:3px;bottom:calc(100% - 4px);height:calc(clamp(96px,16vh,190px) + 4px);width:1px;background:linear-gradient(180deg,#b99bff00,#b99bff 40%,#ffb877);box-shadow:0 0 8px #ffb87777}
.vk-eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#fff6ea;box-shadow:0 0 0 3px var(--room),0 0 0 4px #ffb877aa,0 0 12px 4px #ffb87799}
.vk-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.vk-eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 22px;font:500 12px/1 "VK Mono","Geist Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.vk-eyebrow em{font:italic 400 19px/1 "VK Serif",Georgia,serif;letter-spacing:0;text-transform:none;color:var(--ink)}
.vk-case h2{margin:0;max-width:16ch;font:400 clamp(44px,6.4vw,92px)/.94 "VK Serif","Iowan Old Style",Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
.vk-note{max-width:58ch;margin:22px 0 0;color:#ddd3e6}
.vk-note+.vk-note{color:var(--muted)}
.vk-world{display:flex;align-items:center;gap:12px;margin:28px 0 0;font:500 11px/1.4 "VK Mono","Geist Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vk-world i{width:18px;height:18px;border-radius:50%;margin-right:-8px;box-shadow:0 0 0 1px #ffffff40,0 0 0 3px var(--room)}
.vk-world span{margin-left:14px}
/* proof rail: the thread is solid as far as the evidence goes, dashed beyond it */
.vk-proof{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.vk-proof li{position:relative;padding:26px 12px 0 0;font:500 11px/1.35 "VK Mono","Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.vk-proof li::before{content:"";position:absolute;left:0;right:0;top:6px;border-top:1px dashed #8a7f9688}
.vk-proof li::after{content:"";position:absolute;left:0;top:1px;width:11px;height:11px;border-radius:50%;box-sizing:border-box;background:var(--room);border:1.25px solid var(--faint)}
.vk-proof li.on{color:var(--ink)}
.vk-proof li.on::before{border:0;height:1.5px;top:6px;background:linear-gradient(90deg,var(--violet),var(--amber));box-shadow:0 0 8px #ffb87777}
.vk-proof li.on::after{border:0;background:var(--ink)}
.vk-proof li.here::after{background:#fff4e6;box-shadow:0 0 0 3px var(--room),0 0 0 4px #ffb877,0 0 14px 4px #ffb877aa}
.vk-proof li.here::before{background:linear-gradient(90deg,var(--amber) 0 30%,transparent 30%);box-shadow:none}
.vk-proof li span{display:block;margin-top:8px;font:400 13px/1.45 "VK Sans",Geist,system-ui,sans-serif;letter-spacing:0;text-transform:none;color:var(--muted)}
.vk-proof li:not(.here) span{display:none}
.vk-proof-label{margin:0 0 16px;font:500 11px/1 "VK Mono","Geist Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* facts as glass plates: value in the serif, origin in mono */
.vk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:16px;margin:clamp(56px,9vh,96px) 0 0;padding:0}
.vk-grid>div{display:flex;flex-direction:column;justify-content:flex-end;min-height:190px;padding:24px 24px 22px;border-radius:14px;border:1px solid #b99bff4d;background:linear-gradient(160deg,#ffffff0d,#ffffff03 60%),#0b0915;box-shadow:inset 0 0 40px #8f72ff14,0 30px 60px -40px #000}
.vk-grid dd{order:-1;margin:0 0 10px;font:400 clamp(34px,3.6vw,52px)/1 "VK Serif",Georgia,serif;letter-spacing:-.01em;font-variant-numeric:lining-nums;color:var(--ink)}
.vk-grid dt{font-size:15px;line-height:1.45;color:#ddd3e6}
.vk-grid dd.vk-src{order:0;margin:14px 0 0;font:500 11px/1.4 "VK Mono","Geist Mono",ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.vk-grid dd.vk-src::before{content:"↳ "}
.vk-lists{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:32px clamp(28px,4vw,64px);margin:clamp(48px,7vh,80px) 0 0}
.vk-lists h3{margin:0 0 12px;font:500 11px/1 "VK Mono","Geist Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.vk-lists ul{margin:0;padding:0;list-style:none}
.vk-lists li{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid #ffffff1a;font-size:16px}
.vk-lists li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.vk-ask{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(56px,8vh,88px) 0 0}
.vk-ask a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;font:500 16px/1 "VK Sans",Geist,system-ui,sans-serif;text-decoration:none;color:var(--ink);box-shadow:inset 0 0 0 1px #ffffff40;transition:box-shadow .25s,background .25s}
.vk-ask a:hover{box-shadow:inset 0 0 0 1px #ffffff80}
.vk-ask a.vk-primary{background:var(--amber);color:#1c0d03;box-shadow:0 0 34px -8px #ffb877cc}
.vk-ask a.vk-primary:hover{background:#ffcd9c}
.vk-ask a.vk-primary::after{content:"→"}
/* next site: its own poster, held as a plate of glass */
.vk-next{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,80px);align-items:center;margin:clamp(88px,14vh,150px) 0 0;padding-top:clamp(40px,6vh,64px);border-top:1px solid #ffffff1a;color:inherit;text-decoration:none}
.vk-next-plate{display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--glass);box-shadow:0 0 40px -6px #8f72ff88,inset 0 0 30px #b99bff33,0 50px 90px -50px #000;transform:perspective(1400px) rotateY(14deg);transform-origin:100% 50%;transition:transform .7s cubic-bezier(.2,.8,.1,1),box-shadow .7s}
.vk-next-plate img{display:block;width:100%;height:100%;object-fit:cover}
.vk-next:hover .vk-next-plate{transform:perspective(1400px) rotateY(4deg);box-shadow:0 0 50px -4px #8f72ffaa,inset 0 0 30px #b99bff33,0 50px 90px -50px #000}
.vk-next small{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:500 11px/1 "VK Mono","Geist Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.vk-next small::after{content:"";width:64px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.vk-next strong{display:block;max-width:14ch;font:400 clamp(44px,6.4vw,96px)/.95 "VK Serif",Georgia,serif;letter-spacing:-.025em;text-wrap:balance;transition:translate .6s cubic-bezier(.2,.8,.1,1)}
.vk-next-text>span{display:block;max-width:40ch;margin-top:16px;font:italic 400 22px/1.3 "VK Serif",Georgia,serif;color:var(--muted)}
.vk-next:hover strong{translate:8px 0}
@media (max-width:820px){
  .vk-head{grid-template-columns:1fr;align-items:start}
  .vk-proof{grid-template-columns:1fr}
  .vk-proof li{padding:0 0 18px 28px}
  .vk-proof li::before,.vk-proof li.on::before,.vk-proof li.here::before{left:5px;right:auto;top:12px;bottom:0;width:0;height:auto;border-top:0;border-left:1px dashed #8a7f9688;background:none;box-shadow:none}
  .vk-proof li.on::before{border-left:1.5px solid var(--amber)}
  .vk-proof li.here::before{border-left:1px dashed #8a7f9688}
  .vk-proof li:last-child::before{display:none}
  .vk-proof li::after{top:0}
  .vk-next{grid-template-columns:1fr}
  .vk-next-plate{transform:none}
  .vk-next:hover .vk-next-plate{transform:none}
}
@media (prefers-reduced-motion:reduce){.vk-next-plate,.vk-next strong{transition:none}}
@media print{.vk-pill{display:none}.vk-case{background:#fff;color:#000}}
.vk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
