/* Debrartist site: full-screen portrait home. Menu items push the portrait back and open each section in place. Font is self-hosted (no Google requests). */
@font-face{font-family:"Inter Tight";src:url("../fonts/inter-tight-var.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
body.dbs-page{margin:0;background:#16120f}
#db{isolation:isolate;--db-bg:#16120f;--db-ink:#f2ece4;--db-mute:rgba(242,236,228,.62);--db-line:rgba(242,236,228,.22);--db-ease:cubic-bezier(.2,.75,.15,1);--db-pad:clamp(18px,3vw,40px);--db-foot:56px;position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--db-bg);color:var(--db-ink);font-family:"Inter Tight","Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body.admin-bar #db{height:calc(100svh - 32px)}
@media (max-width:782px){body.admin-bar #db{height:calc(100svh - 46px)}}
#db *,#db *::before,#db *::after{box-sizing:border-box}
#db a{color:inherit;text-decoration:none}
#db h1,#db h2,#db p,#db ul,#db figure{margin:0;padding:0}
#db ul{list-style:none}
#db :focus-visible{outline:2px solid var(--db-ink);outline-offset:4px}
/* Section titles get focus by script when a section opens (for screen readers): never draw an outline on them */
#db .db-title:focus,#db .db-title:focus-visible{outline:none}

/* Background layers: the home portrait, plus one optional layer per section */
#db .db-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background-color:var(--db-bg);background-size:cover;background-position:center;opacity:0;transform:scale(1.04);transition:opacity 1s var(--db-ease),transform 1.2s var(--db-ease),filter 1.2s var(--db-ease)}
#db .db-bg.is-home{background-image:radial-gradient(ellipse at 50% 38%,#6b4a38 0%,#2a1f19 55%,#16120f 100%);background-position:center 30%}
/* Background image sits in an inner layer that fades in from black once the file has loaded (front.js) */
#db .db-bg-img{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0;transition:opacity 1.4s ease}
#db .db-bg-img.is-loaded{opacity:1}
#db .db-bg.is-home.has-img{background-image:none}
#db .db-bg.is-home.has-img .db-bg-img{background-image:var(--db-hero);background-position:var(--db-pos,center 30%)}
#db .db-bg.has-sec .db-bg-img{background-image:var(--db-sec)}
@media (max-width:820px){#db .db-bg.is-home.has-m .db-bg-img{background-image:var(--db-hero-m);background-position:var(--db-pos-m,center 30%)}}
#db .db-bg.is-on{opacity:1;transform:scale(1)}
#db .db-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,18,15,.55) 0%,rgba(22,18,15,0) 32%,rgba(22,18,15,0) 68%,rgba(22,18,15,.6) 100%);transition:background 1.2s var(--db-ease)}
#db:not([data-view="home"]) .db-bg::after{background:rgba(22,18,15,.62)}
#db:not([data-view="home"]) .db-bg.is-home.is-on{transform:scale(1.14);filter:blur(22px)}
#db:not([data-view="home"]) .db-bg.is-home.is-on::after{background:rgba(22,18,15,.72)}
#db.no-shade[data-view="home"] .db-bg::after{background:none}

/* Top bar */
#db .db-top{position:absolute;z-index:6;top:0;left:0;right:0;display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);padding:22px var(--db-pad)}
#db .db-logo{margin-right:auto}
#db .db-logo{font-weight:600;font-size:20px;letter-spacing:-.02em}
#db .db-nav ul{display:flex;gap:clamp(14px,2.2vw,32px)}
#db .db-nav a{position:relative;font-size:15px;padding:6px 0;opacity:.78;transition:opacity .3s}
#db .db-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--db-ease)}
#db .db-nav a:hover,#db .db-nav a[aria-current="page"]{opacity:1}
#db .db-nav a:hover::after,#db .db-nav a[aria-current="page"]::after{transform:scaleX(1)}
/* Language switcher: EN DE IT, current one at full colour */
#db .db-langs{display:flex;gap:10px;padding-left:clamp(12px,1.6vw,24px);border-left:1px solid var(--db-line);position:relative;z-index:8}
#db .db-lang{font-size:13px;letter-spacing:.06em;opacity:.55;transition:opacity .3s;padding:6px 0}
#db .db-lang:hover,#db .db-lang[aria-current="true"]{opacity:1}
#db .db-burger{display:none;background:none;border:0;color:inherit;font:inherit;font-size:15px;cursor:pointer;padding:6px 0}

/* Home layer */
#db .db-home{position:absolute;inset:0 0 var(--db-foot) 0;z-index:2;padding:clamp(76px,10vh,104px) var(--db-pad) clamp(10px,2vh,20px);display:grid;grid-template-rows:auto 1fr auto 1fr auto;grid-template-columns:minmax(0,1fr);transition:opacity .7s var(--db-ease),transform .9s var(--db-ease),visibility 0s linear 0s}
#db:not([data-view="home"]) .db-home{opacity:0;transform:translateY(-36px);visibility:hidden;pointer-events:none;transition:opacity .6s var(--db-ease),transform .9s var(--db-ease),visibility 0s linear .9s}
/* Visually hidden heading: kept in the page for search engines and screen readers */
#db .db-sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
#db .db-intro{grid-row:1;text-align:justify;text-transform:uppercase;font-weight:500;font-size:clamp(15px,2.3vw,31px);line-height:1.04;letter-spacing:-.012em;hyphens:none;max-width:none}
#db .db-tag{grid-row:3;justify-self:center;text-align:center;text-transform:uppercase;font-weight:600;font-size:clamp(15px,1.9vw,26px);line-height:1.1}
#db .db-tag span{display:block;font-weight:500;letter-spacing:.9em;margin-right:-.9em;font-size:.95em}
#db .db-cities{grid-row:5;display:flex;justify-content:space-between;font-weight:500;font-size:clamp(14px,1.8vw,24px);letter-spacing:.9em;text-transform:uppercase}
#db .db-cities span:last-child{margin-right:-.9em}
/* Swapped home: cities on top, intro paragraph at the bottom (the booking link stays between the centre line and the bottom block) */
#db.is-swapped .db-cities{grid-row:1}
#db.is-swapped .db-intro{grid-row:5;align-self:end}
/* Booking link: centred in the space between the centre line and the bottom row */
#db .db-cta{grid-row:4;align-self:center;justify-self:center;display:inline-block;text-transform:uppercase;font-weight:500;font-size:clamp(13px,1.3vw,18px);letter-spacing:.6em;margin-right:-.6em;padding:10px 0 8px;border-bottom:1px solid var(--db-line);transition:border-color .4s,opacity .4s}
#db .db-cta:hover{border-bottom-color:var(--db-ink)}

/* Section panels: fade and rise into place (no clip-path, which Firefox does not always repaint on scrolling panels) */
#db .db-panel{position:absolute;inset:0;z-index:4;overflow-y:auto;padding:clamp(84px,12vh,120px) var(--db-pad) calc(var(--db-foot) + 48px);opacity:0;transform:translateY(48px);visibility:hidden;pointer-events:none;transition:opacity .6s var(--db-ease),transform .9s var(--db-ease),visibility 0s linear .9s;overscroll-behavior:contain}
#db .db-panel.is-active{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity .7s var(--db-ease) .1s,transform .9s var(--db-ease),visibility 0s linear 0s}
#db .db-inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,80px);opacity:0;transform:translateY(28px);transition:opacity .7s var(--db-ease),transform .9s var(--db-ease)}
#db .db-panel.is-active .db-inner{opacity:1;transform:none;transition-delay:.35s}
#db .db-title{font-weight:500;font-size:clamp(34px,5.4vw,84px);line-height:.98;letter-spacing:-.035em}
#db .db-body{display:flex;flex-direction:column;gap:22px;max-width:60ch;font-size:clamp(17px,1.5vw,21px);line-height:1.4}
#db .db-body p+p{color:var(--db-mute)}
/* Bold inside section text: full colour and the heaviest weight of the self-hosted font, so it stands out from muted paragraphs */
#db .db-body strong,#db .db-body b{font-weight:600;color:var(--db-ink)}
#db .db-body em,#db .db-body i{font-style:italic}
/* Images placed in section text: never wider than the column, keep their proportions */
#db .db-body img{display:block;max-width:100%;height:auto;margin:6px 0}
/* Instagram card inside section text: keep its own look, not the text link and image rules */
#db .db-body a.db-ig{text-decoration:none;color:#f2ece4}
#db .db-body .db-ig img{margin:0}
#db .db-body a:not(.db-btn):not(.db-read):not(.db-ig){text-decoration:underline;text-underline-offset:3px}
#db .db-wide{grid-column:1 / -1}

/* Numbers */
#db .db-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;border-top:1px solid var(--db-line);padding-top:22px;margin-top:8px}
#db .db-stats strong{display:block;font-weight:500;font-size:clamp(28px,3.4vw,48px);letter-spacing:-.03em;line-height:1}
#db .db-stats span{display:block;margin-top:8px;font-size:14px;color:var(--db-mute)}

/* List rows */
#db .db-list{display:flex;flex-direction:column;border-top:1px solid var(--db-line)}
#db .db-row{display:flex;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid var(--db-line);font-size:clamp(18px,1.8vw,26px);letter-spacing:-.015em}
#db .db-row span:last-child{color:var(--db-mute);text-align:right}
/* Link list (e.g. Press): same rows as the cities list, the right side is a short "Read ↗" link that opens a new tab */
#db .db-press{margin-top:16px}
#db .db-sub{margin:0 0 12px;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--db-mute)}
#db .db-row a.db-read{flex:0 0 auto;color:var(--db-ink);text-decoration:none;text-transform:uppercase;font-size:.8em;letter-spacing:.1em;padding-bottom:2px;border-bottom:1px solid var(--db-line);transition:border-color .3s}
#db .db-row a.db-read:hover{border-bottom-color:var(--db-ink)}
#db .db-row a.db-read span{color:inherit}

/* Image grid */
#db .db-grid{display:grid;grid-template-columns:repeat(var(--db-cols,3),minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
#db .db-tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:rgba(242,236,228,.05)}
#db .db-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
#db .db-tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;font-size:13px;color:var(--db-ink);background:linear-gradient(transparent,rgba(22,18,15,.7))}

/* Horizontal parallax gallery: full-width strip, wheel or drag moves it sideways, each image drifts against the movement.
   Based on the CSS/JS version of "Horizontal Parallax Gallery" by David Faure for Codrops (MIT). */
#db .db-panel{overflow-x:hidden}
#db .db-hpg{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;user-select:none;-webkit-user-select:none;outline-offset:-2px}
#db .db-hpg::-webkit-scrollbar{display:none}
#db .db-hpg.is-dragging{cursor:grabbing}
#db .db-hpg-track{display:flex;gap:calc(var(--db-hpg-gap,32) * 1px);width:max-content;padding:0 var(--db-pad)}
#db .db-hpg-item{position:relative;flex:0 0 auto;height:calc(var(--db-hpg-h,60) * 1vh);overflow:hidden;margin:0;background:rgba(242,236,228,.05)}
#db .db-hpg-img{position:absolute;top:0;left:calc((100 - var(--db-hpg-w,125)) / 2 * 1%);width:calc(var(--db-hpg-w,125) * 1%);max-width:none;height:100%;object-fit:cover;display:block;will-change:transform;pointer-events:none}
#db .db-hpg-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;font-size:13px;background:linear-gradient(transparent,rgba(22,18,15,.7))}

/* Focus carousel: small thumbnails in a row, the selected painting large in the centre with its title and description */
#db .db-fc{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;touch-action:pan-y;outline-offset:-2px;user-select:none;-webkit-user-select:none}
#db .db-fc-track{display:flex;align-items:center;width:max-content;will-change:transform;transition:transform .8s var(--db-ease)}
#db .db-fc-item{position:relative;flex:0 0 auto;padding:0;margin:0;border:0;background:rgba(242,236,228,.05);cursor:pointer;overflow:hidden;opacity:.75;transition:width .8s var(--db-ease),height .8s var(--db-ease),opacity .5s}
#db .db-fc-item:hover,#db .db-fc-item.is-active{opacity:1}
#db .db-fc-item.is-active{cursor:default}
#db .db-fc-img{width:100%;height:100%;max-width:none;object-fit:cover;display:block;pointer-events:none}
#db .db-fc-cap{position:absolute;z-index:2;max-width:320px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s;pointer-events:none}
#db .db-fc-cap.is-on{opacity:1;transform:none}
#db .db-fc-num{font-size:11px;letter-spacing:.12em;color:var(--db-mute);margin-bottom:10px}
#db .db-fc-title{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}
#db .db-fc-desc{font-size:13px;line-height:1.45;color:var(--db-mute);margin-top:4px}
#db .db-fc.is-static .db-fc-track,#db .db-fc.is-static .db-fc-item{transition:none}

/* Button */
#db .db-btn{display:inline-block;align-self:flex-start;border:1px solid var(--db-ink);padding:13px 26px;border-radius:999px;font-size:16px;transition:background .3s,color .3s}
#db .db-btn:hover{background:var(--db-ink);color:var(--db-bg)}

/* Fluent Forms skin. Class names may need a tweak once the form is built. */
#db .db-form{max-width:640px}
#db .db-form .ff-el-input--label label{color:var(--db-ink);font-weight:500}
#db .db-form .ff-el-form-control{background:transparent;color:var(--db-ink);border:0;border-bottom:1px solid var(--db-line);border-radius:0;padding:12px 0;font:inherit}
/* Form fields: no white box on focus, the underline turns solid and thicker instead (still visible for keyboard users) */
#db .db-form .ff-el-form-control:focus,#db .db-form .ff-el-form-control:focus-visible{outline:none;border-bottom-color:var(--db-ink);box-shadow:inset 0 -1px 0 var(--db-ink);background:transparent}
#db .db-form select:focus,#db .db-form textarea:focus,#db .db-form input:focus{outline:none}
#db .db-form .ff-el-form-control::placeholder{color:var(--db-mute)}
#db .db-form .ff-btn-submit{background:transparent !important;color:var(--db-ink) !important;border:1px solid var(--db-ink) !important;border-radius:999px;padding:13px 30px;font:inherit;cursor:pointer}
#db .db-form .ff-btn-submit:hover{background:var(--db-ink) !important;color:var(--db-bg) !important}
#db .db-form .ff-el-form-check-label{color:var(--db-mute)}
#db .db-form a{text-decoration:underline}

/* Footer: always visible, sits above panels */
#db .db-foot{position:absolute;z-index:5;left:0;right:0;bottom:0;min-height:var(--db-foot);display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:12px var(--db-pad);font-size:12px;line-height:1.35;color:var(--db-mute);background:linear-gradient(transparent,var(--db-fade,rgba(22,18,15,.85)) 45%)}
#db .db-foot-links{display:flex;gap:18px;flex-wrap:wrap}
#db .db-foot a{color:var(--db-ink);transition:opacity .3s}
#db .db-foot a:hover{opacity:.7}

/* Maintenance page: centred title over the home background */
#db.dbs-maint .db-bg::after{background:rgba(22,18,15,.5)}
#db .db-maint{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;padding:var(--db-pad)}
#db .db-maint .db-logo{position:absolute;top:22px;left:var(--db-pad)}
#db .db-maint-title{margin:0;font-weight:500;text-transform:uppercase;font-size:clamp(34px,6vw,92px);line-height:.95;letter-spacing:-.02em}
#db .db-maint-text{max-width:42ch;font-size:clamp(16px,1.5vw,20px);color:var(--db-mute)}
#db .db-maint .db-cta{margin-top:8px}
#db .db-maint-code{font-size:13px;letter-spacing:.3em;color:var(--db-mute);margin-right:-.3em}

/* Mobile */
@media (max-width:820px){
#db{--db-foot:72px}
#db .db-burger{display:block;position:relative;z-index:8}
#db .db-nav{position:fixed;inset:0;z-index:7;background:rgba(22,18,15,.96);display:flex;align-items:center;padding:0 24px;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s linear .4s}
#db .db-nav.is-open{opacity:1;visibility:visible;transition:opacity .4s}
#db .db-nav ul{flex-direction:column;gap:6px}
#db .db-nav a{font-size:34px;letter-spacing:-.03em;opacity:1}
#db .db-inner{grid-template-columns:1fr}
#db .db-grid{grid-template-columns:repeat(var(--db-cols-m,2),minmax(0,1fr))}
#db .db-hpg-item{height:min(calc(var(--db-hpg-h,60) * 1svh),110vw)}
#db .db-hpg-track{gap:calc(var(--db-hpg-gap-m,12) * 1px)}
#db .db-stats{grid-template-columns:1fr}
#db .db-tag span,#db .db-cities{letter-spacing:.5em}
#db .db-cta{letter-spacing:.4em;margin-right:-.4em}
#db .db-tag span,#db .db-cities span:last-child{margin-right:-.5em}
#db .db-foot{flex-direction:column;align-items:flex-start;justify-content:center}
/* Mobile: sections scroll only between header and footer (heights measured by front.js), edges fade instead of cutting */
#db .db-home{bottom:var(--db-foot-h,var(--db-foot))}
#db .db-panel{top:var(--db-head-h,68px);bottom:var(--db-foot-h,var(--db-foot));padding:20px var(--db-pad) 64px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 20px,#000 calc(100% - 20px),transparent 100%)}
}
@media (prefers-reduced-motion:reduce){
#db *,#db *::before,#db *::after{transition-duration:.01ms !important;transition-delay:0s !important}
}