:root{color-scheme:dark;--night:#0b0e10;--ink:#eee7dc;--muted:#b7b7b2;--gold:#c5ac83;--line:#eee7dc38;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth;scroll-padding-top:6rem}
body{margin:0;background:var(--night);color:var(--ink);font:1rem/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}:focus-visible{outline:2px solid var(--gold);outline-offset:6px}::selection{background:var(--gold);color:var(--night)}[hidden]{display:none!important}
.skip-link{position:fixed;z-index:100;left:1.5rem;top:1rem;background:var(--ink);color:var(--night);padding:.75rem 1.25rem;transform:translateY(-200%)}.skip-link:focus{transform:translateY(0)}
.language-switch{display:flex;align-items:center;gap:.1rem;flex:none}
.language-switch button{position:relative;border:0;background:none;font-size:.875rem;letter-spacing:.08em;min-width:44px;min-height:44px;color:var(--muted)}
.language-switch button[aria-pressed=true]{color:var(--ink)}
.language-switch button[aria-pressed=true]:after{content:'';position:absolute;left:15px;right:15px;bottom:7px;height:1px;background:var(--gold)}
.language-switch>span{opacity:.35;font-size:.875rem}
/* A single, uninterrupted cinematic brand entrance. */
.brand-stage{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;background:#0b0e10}
.brand-scenery{position:absolute;inset:0;z-index:-2;overflow:hidden}
.brand-photo{width:100%;height:100%;object-fit:cover;object-position:50% 61%;filter:saturate(.62) brightness(.7);animation:night-arrives 2.6s ease-out both}
.brand-atmosphere{position:absolute;inset:0;background:linear-gradient(180deg,#070c10c9 0%,#080d1099 27%,#090d104d 53%,#090d10b3 74%,#090d10f0 100%),linear-gradient(90deg,#09101480,transparent 43%,#090e112b)}
.brand-header{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:clamp(1.25rem,3vw,2.75rem) clamp(1.5rem,5vw,5rem);animation:ink-arrives .8s ease-out both}
.brand-signature{font:1.3rem var(--serif);letter-spacing:.11em;color:var(--ink)}
.brand-signature>span{font-size:.8rem;color:var(--gold);padding:0 .22rem}
.brand-main{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:clamp(3rem,6svh,5rem) clamp(1.25rem,5vw,5rem) clamp(2rem,4svh,3.5rem)}
.brand-identity{text-align:center;width:100%;animation:ink-arrives 1.1s .12s ease-out both}
.brand-title{margin:0;font-weight:400;font-family:var(--serif);line-height:1}
.brand-name{display:block;font-size:clamp(3.55rem,16vw,15rem);font-weight:400;letter-spacing:.045em;text-indent:.045em;text-shadow:0 4px 50px #0006}
.brand-books{display:flex;justify-content:center;align-items:center;gap:clamp(1.5rem,3vw,3rem);font:clamp(.875rem,1.25vw,1.1rem) var(--sans);letter-spacing:.65em;text-indent:.65em;margin-top:clamp(1rem,2.4vw,2rem)}
.brand-books:before,.brand-books:after{content:'';height:1px;width:clamp(2rem,5vw,5rem);background:linear-gradient(90deg,transparent,var(--gold));opacity:.65}
.brand-books:after{transform:rotate(180deg)}
.brand-invitation{margin:clamp(2.6rem,6svh,4.5rem) 0 0;font:clamp(1.5rem,3vw,2.5rem)/1.3 var(--serif);letter-spacing:.015em;text-shadow:0 2px 15px #0009}
.brand-invitation em{font-weight:400;color:#e0c6a2}
.world-invite{display:flex;align-items:center;justify-content:space-between;gap:2rem;width:min(100%,35rem);padding:1.5rem .5rem 1.5rem 0;margin-top:clamp(4rem,11svh,8rem);position:relative;animation:ink-arrives 1s .3s ease-out both}
.world-invite:before{content:'';position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,#eee7dc0a,var(--gold),#eee7dc0a);opacity:.55}
.world-invite-text{display:flex;flex-direction:column;gap:.2rem}
.world-invite-title{font:clamp(2rem,4vw,3.3rem)/1.2 var(--serif);letter-spacing:.025em}
.world-invite-action{font-size:.875rem;letter-spacing:.09em;color:#d0ccc4;margin-top:.45rem}
.enter-circle{width:4rem;height:4rem;display:grid;place-items:center;border:1px solid #c5ac836b;border-radius:50%;transition:background .3s,border-color .3s,transform .35s;flex:none}
.enter-circle svg{transition:transform .3s}
.brand-footer{display:flex;align-items:center;justify-content:center;gap:1rem;padding:0 1.5rem 1.5rem;color:#aaa9a3;font-size:.75rem;letter-spacing:.1em}
.footer-rule{height:1px;width:2rem;background:#c5ac8352}
@media(hover:hover){.world-invite:hover .enter-circle{background:#c5ac831f;border-color:var(--gold);transform:scale(1.05)}.world-invite:hover svg{transform:translateX(3px)}.world-invite:hover .world-invite-action{color:var(--ink)}}
@keyframes ink-arrives{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes night-arrives{from{opacity:.65;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
/* Uccellina — the menu is part of the place. */
.world-header{position:fixed;inset:0 0 auto;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.2rem clamp(1.25rem,4vw,4rem);background:linear-gradient(#090b0eee,#090b0e80,transparent)}
.back-link{font-size:.875rem;min-height:44px;display:inline-flex;align-items:center;gap:.7rem;letter-spacing:.06em;text-shadow:0 1px 10px #000}
.header-controls{display:flex;align-items:center;gap:1.75rem}
.persistent-menu{display:flex;align-items:center;gap:.65rem;min-height:44px;padding:.4rem .85rem;border:1px solid #e5d6ba6b;border-radius:2px;background:#10101077;font-size:.875rem;letter-spacing:.05em}
.menu-lines{width:15px;height:9px;border-top:1px solid currentColor;border-bottom:1px solid currentColor;position:relative}
.menu-lines:after{content:'';position:absolute;top:3px;left:0;width:10px;height:1px;background:currentColor}
.cafe-entrance{position:relative;isolation:isolate;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;background:#10100f}
.cafe-haze{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,#0c0e10ef,#0c0e10a3),url('/assets/caffe-sofia.jpg') center/cover;filter:blur(12px);transform:scale(1.03)}
.cafe-scene{position:absolute;top:0;right:0;width:70%;height:100%;z-index:-2;mask-image:linear-gradient(90deg,transparent,#000 15%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 15%)}
.cafe-scene img{width:100%;height:100%;object-fit:cover;object-position:50% 44%}
.cafe-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#0003,transparent 28%,transparent 58%,#06090cc9 100%),linear-gradient(90deg,#080b0d66,transparent 50%)}
.cafe-title{padding:9rem clamp(1.5rem,6vw,6rem) clamp(3rem,7vw,6rem);pointer-events:none}
.eyebrow{font-size:.8125rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 1.1rem}
.cafe-title h1{font:clamp(4rem,11vw,10rem)/1.1 var(--serif);letter-spacing:-.035em;margin:0;text-shadow:0 3px 30px #0009}
.cafe-title .place-name{font-size:.9375rem;letter-spacing:.1em;margin:1rem 0 0}
/* Highlight the original photographed letters; the hit area has no visible surface. */
.menu-hotspot{position:absolute;z-index:5;transform:translate(-50%,-50%);border:0;padding:0;min-width:44px;min-height:44px;background:transparent;box-shadow:none;border-radius:0}
.menu-ink{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--ink-width);height:var(--ink-height);max-width:none;overflow:hidden;pointer-events:none;opacity:.72;filter:drop-shadow(0 0 2px #ffdc9cad) drop-shadow(0 0 7px #edbf7266);transition:opacity .3s,filter .3s}
.menu-hotspot:focus-visible{outline:1px dotted #f2dcad;outline-offset:1px}
.menu-hotspot:focus-visible .menu-ink,.menu-hotspot:active .menu-ink{opacity:1;filter:drop-shadow(0 0 3px #ffe5ab) drop-shadow(0 0 10px #f1c57a)}
@media(hover:hover){.menu-hotspot:hover .menu-ink{opacity:1;filter:drop-shadow(0 0 3px #ffe5ab) drop-shadow(0 0 10px #f1c57a)}}
.world-section{padding:clamp(4rem,8vw,8rem) clamp(1.5rem,6vw,6rem);max-width:1450px;margin:0 auto;scroll-margin-top:2rem}
.world-section h2{font:clamp(2.5rem,5vw,5rem)/1.12 var(--serif);font-weight:400;letter-spacing:-.025em;margin:.6rem 0 1.7rem}
.place-section{display:grid;grid-template-columns:.8fr 1fr;gap:clamp(2rem,7vw,7rem);align-items:center}
.place-copy{max-width:26rem}.place-copy p:not(.eyebrow){color:#c8c5bd;font-size:1.0625rem;line-height:1.8;margin:0}
.place-copy p:not(.eyebrow)+p{margin-top:1.1rem}
.place-image{width:100%;max-height:780px;object-fit:cover;object-position:50% 38%;aspect-ratio:4/5}
.place-media{position:relative;min-width:0;background:#080c0d}
.place-media .place-image{display:block;height:auto;object-fit:contain;aspect-ratio:676/910}
.place-motion{position:absolute;right:1rem;bottom:1rem;min-width:44px;min-height:44px;border:1px solid #ffffff45;background:#080c0dd9;color:#eee7dc;cursor:pointer;font-size:1.1rem}
.characters-section{padding-top:3rem}.section-heading{border-top:1px solid var(--line);padding-top:3rem}
.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);margin-top:2.5rem}
.character{margin:0}.character-image{aspect-ratio:4/5;overflow:hidden;background:#080b0d}
.character-image img{width:100%;height:100%;object-fit:cover}
.character-lina img{object-position:50% 25%}
.character-nico img{object-position:32% 0%}
.character-mandy img{object-position:50% 5%}
.character-lucian img{object-position:50% 20%}
.character-brad img{object-position:50% 5%}
.character-fat-ricky img{object-position:50% 10%}
.character-romano img{object-position:50% 20%}
.character-severo img{object-position:50% 50%}
.character figcaption,.character-name{margin:0;font:clamp(1.8rem,3vw,2.6rem)/1.2 var(--serif);padding:1.1rem 0;border-bottom:1px solid var(--line)}
.world-footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2rem clamp(1.5rem,6vw,6rem);border-top:1px solid var(--line);font-size:.875rem;color:var(--muted)}
.world-footer a{min-height:44px;display:inline-flex;align-items:center}
.text-menu-button{border:0;background:none;padding:.6rem 0;min-height:44px;color:var(--ink)}
/* A readable, aged café menu; semantic dialog supplies focus containment. */
.cafe-menu{color-scheme:light;color:#322b23;border:0;padding:0;width:min(92vw,31rem);max-height:88svh;margin:auto;background:#d4c5a8;box-shadow:0 30px 120px #000b;overflow:auto;overscroll-behavior:contain}
.cafe-menu::backdrop{background:#05080bbb;backdrop-filter:blur(7px)}
.cafe-menu[open]{animation:menu-arrives .32s ease-out both}
.menu-paper{position:relative;padding:3.4rem clamp(1.5rem,5vw,3rem) 2rem;min-height:34rem;background:radial-gradient(ellipse at 5% 90%,#6c4a2224,transparent 34%),radial-gradient(ellipse at 95% 3%,#78532730,transparent 28%),linear-gradient(94deg,#99826035,transparent 3%,transparent 97%,#99826045),#d4c5a8}
.menu-paper:before{content:'';position:absolute;inset:.65rem;border:1px solid #66503860;pointer-events:none}
.menu-close{position:absolute;top:.75rem;right:.75rem;z-index:1;background:none;border:0;width:44px;height:44px;font:2rem/1 var(--serif);color:#4d4235}
.menu-brand{text-align:center;font:2.2rem/1.2 var(--serif);margin:0;letter-spacing:-.02em}
.menu-subtitle{text-align:center;text-transform:uppercase;font-size:.8125rem;letter-spacing:.24em;margin:1rem 0 2.3rem;padding-bottom:1.5rem;border-bottom:3px double #65523c8c}
.paper-nav{display:flex;flex-direction:column}
.paper-link,.paper-pending{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.25rem 0;border-bottom:1px solid #65523c50;font:1.8rem/1.15 var(--serif);min-height:72px}
.paper-link:focus-visible,.menu-close:focus-visible,.paper-home:focus-visible{outline-color:#4f3c29}
.paper-link:hover{color:#000}.paper-link span:last-child{font:1.15rem var(--sans);transition:transform .2s}.paper-link:hover span:last-child{transform:translateX(4px)}
.paper-pending{align-items:flex-start;flex-direction:column;gap:.5rem;color:#6b5c49}
.paper-pending small{font:.8125rem/1.4 var(--sans);letter-spacing:.04em}
.paper-home{display:block;text-align:center;font-size:.875rem;margin-top:1.8rem;padding:.65rem;color:#544737}
.spotify-link{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:44px;margin-top:1rem;padding:.7rem 1rem;border:1px solid #65523c70;border-radius:4px;color:#322b23;font-size:.9375rem;text-align:center}
.spotify-link:hover{background:#65523c12}.spotify-link:focus-visible{outline:2px solid #4f3c29;outline-offset:3px}
body.menu-is-open{overflow:hidden}
@keyframes menu-arrives{from{opacity:0;transform:translateY(24px) rotate(-1deg) scale(.96)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s}
@media(min-width:1500px){.cafe-scene{width:65%}.brand-main{padding-top:4rem}.brand-name{font-size:15rem}}
@media(max-width:760px){
.brand-photo{object-position:50% 52%;filter:saturate(.7) brightness(.75)}
.brand-atmosphere{background:linear-gradient(180deg,#071015ce,#080e1080 30%,#090e1052 56%,#090e10dc 80%,#090e10fa)}
.brand-header{padding:1.3rem 1.5rem}.brand-signature{font-size:1.1rem}
.brand-main{justify-content:center;padding:3rem 1.5rem 2rem}
.brand-name{font-size:clamp(3.55rem,16.2vw,7rem);letter-spacing:.018em;text-indent:.018em}
.brand-books{margin-top:1.2rem;font-size:.875rem;gap:1.75rem;letter-spacing:.5em;text-indent:.5em}
.brand-invitation{font-size:clamp(1.4rem,5.4vw,2rem);margin-top:3rem}
.world-invite{margin-top:clamp(5rem,15svh,10rem);padding-top:1.5rem;max-width:32rem}
.world-invite-title{font-size:2.25rem}.enter-circle{width:3.5rem;height:3.5rem}
.world-header{padding:1rem 1.2rem;align-items:flex-start}.header-controls{gap:.3rem;flex-wrap:wrap;justify-content:flex-end}
.world-header .back-link{font-size:.75rem;letter-spacing:.02em;white-space:nowrap;gap:.4rem}
.world-header .language-switch button{min-width:36px}.world-header .language-switch button[aria-pressed=true]:after{left:11px;right:11px}
.persistent-menu{padding:.35rem .6rem;gap:.45rem}
.cafe-scene{width:100%;mask-image:none;-webkit-mask-image:none}.cafe-scene img{object-position:50% 50%}
.cafe-title{padding:9rem 1.5rem 3.5rem}.cafe-title h1{font-size:clamp(3.3rem,13vw,6rem)}
.place-section{grid-template-columns:1fr;gap:2.5rem}.place-copy{max-width:32rem}.place-image{aspect-ratio:4/5;max-height:660px}
.world-section{padding:4rem 1.5rem}.characters-section{padding-top:0}.character-grid{gap:1rem;margin-top:1.8rem}.character-image{aspect-ratio:3/4}
.character-nico img{object-position:33% 0%}
.character-fat-ricky img{object-position:50% 15%}
.character-romano img{object-position:50% 30%}
.world-footer{padding:1.5rem;font-size:.8125rem}.cafe-menu{max-height:90svh}.menu-paper{min-height:0}
}
@media(max-width:360px){.brand-main{padding-inline:1.1rem}.brand-header{padding-inline:1.1rem}.brand-name{font-size:3.45rem}.world-header{padding:1rem}.header-controls{gap:0}.persistent-menu .menu-lines{display:none}.world-header .back-link{font-size:.7rem}.cafe-title{padding-inline:1.2rem}.character-grid{grid-template-columns:1fr}.character-image{aspect-ratio:4/5}.menu-paper{padding-top:3.5rem}}
@media(max-height:650px) and (min-width:761px){.brand-main{padding-top:1rem;padding-bottom:1rem}.brand-name{font-size:clamp(4rem,12vw,10rem)}.brand-invitation{margin-top:1.5rem}.world-invite{margin-top:2rem;padding-block:1rem}.brand-header{padding-block:1rem}.brand-footer{padding-bottom:1rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
@media(prefers-contrast:more){:root{--muted:#e0dfd8;--line:#eee7dc88}.brand-atmosphere{background:#050a0bc4}.world-invite-action{color:var(--ink)}}