/* Le Baccanti public site — additions to the design mockup (loaded last on every page):
   the sticky site header, the footer, the language switcher, contact form states, the 404 page and multilingual typography. */

/* Chinese text set in the two brand families falls back to a matching system face. */
@font-face{font-family:'Playfair Display';src:local('Songti SC'),local('STSongti-SC-Regular'),local('Noto Serif CJK SC'),local('Noto Serif SC'),local('Source Han Serif SC'),local('SimSun');unicode-range:U+2E80-2FDF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}
@font-face{font-family:'DM Sans';src:local('PingFang SC'),local('Hiragino Sans GB'),local('Microsoft YaHei'),local('Noto Sans CJK SC'),local('Noto Sans SC'),local('Source Han Sans SC');unicode-range:U+2E80-2FDF,U+3000-303F,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FE30-FE4F,U+FF00-FFEF}

/* Longer words in other languages must wrap instead of overflowing the big headings, and a long
   word must never make a grid or flex column wider than the screen (:where keeps specificity at zero). */
h1,h2,h3,blockquote{overflow-wrap:break-word}
main{overflow-wrap:break-word}
main :where(div,section,article,aside,figure,figcaption,li,p,h1,h2,h3,dl,dd,dt,blockquote,form,a,span){min-width:0}
/* Headings were broken into lines by hand for the English copy: in the other languages let the
   browser balance them. German words are hyphenated only on the narrowest phones, where a long
   compound would otherwise not fit; elsewhere a hyphen in a heading only hurts. Only real compounds
   (14 letters or more, at least 6 on each side) are split: never a name or an everyday word.
   A browser that cannot apply those limits does not hyphenate at all (the @supports test). */
html:not([lang="en"]) h1,html:not([lang="en"]) h2{text-wrap:balance}
@media(max-width:359px){@supports (hyphenate-limit-chars:14 6 6) or (-webkit-hyphenate-limit-before:6){html[lang="de"] h1,html[lang="de"] h2{-webkit-hyphens:auto;hyphens:auto;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;hyphenate-limit-chars:14 6 6}}}
/* The two German display headings whose last word ("Unterschied.", "Verbindungen.") is a few pixels wider
   than a 320px screen: a slightly smaller size keeps the word whole, with its full stop. */
@media(max-width:359px){html[lang="de"] .page-lead h1{font-size:47px}html[lang="de"] .people-promise h2{font-size:38px}}
/* A long (translated) label on the closing band's button may take two lines on a phone instead of overflowing. */
@media(max-width:650px){.contact .button{white-space:normal;max-width:100%}}
/* Once the closing band is a single column, everything in it shares the heading's left edge,
   also on the pages that centre the two columns on wide screens. */
@media(max-width:900px){section.contact{align-items:flex-start}}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3{letter-spacing:0}
/* Chinese headings break between phrases where the browser can tell them apart (ignored elsewhere). */
html[lang^="zh"] h1,html[lang^="zh"] h2{word-break:auto-phrase}
/* Chinese never leaves one character alone on the last line: short texts are balanced, longer ones end on a fuller line. */
html[lang^="zh"] :is(h3,h4,blockquote,figcaption,dt,.section-title,.region-choice strong,.region-quick button){text-wrap:balance}
html[lang^="zh"] :is(p,li,dd,address,.detail-text,.custom-proof span){text-wrap:pretty}
/* A heading with a hand-made line break cannot be balanced by the browser: "pretty" keeps its last line from holding one character. */
html[lang^="zh"] :is(h1,h2,h3,h4,.section-title):has(br){text-wrap:pretty}
/* The contact page's second heading line is six characters: on the narrowest phones a slightly smaller size keeps them together. */
@media(max-width:359px){html[lang^="zh"] .contact-intro h1{font-size:44px}}
html[lang^="zh"] .eyebrow,html[lang^="zh"] .site-header .site-nav>a,html[lang^="zh"] .button{letter-spacing:.08em}

/* ---------------------------------------------------------------------------------------------
   Site header: sticky, logo on the left, navigation + language switcher, and the "Contact us"
   button that never hides. Everything is scoped to .site-header so that the bare "header" / "nav"
   rules still present in the page stylesheets cannot restyle it (every property they set is set here).
   --------------------------------------------------------------------------------------------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);display:flex;align-items:center;justify-content:flex-start;gap:clamp(14px,2vw,30px);padding:0 clamp(24px,5vw,86px);background:var(--paper);border-bottom:1px solid transparent;transition:box-shadow .25s,border-color .25s}
.site-header.is-scrolled{border-bottom-color:var(--line);box-shadow:0 8px 26px rgba(47,49,51,.1)}
.site-header .site-logo{display:block;flex:0 1 auto;min-width:0;line-height:0;text-decoration:none}
.site-header .site-logo img{display:block;width:182px;max-width:100%;height:auto}
.site-header .site-nav{display:flex;position:static;flex-direction:row;align-items:center;gap:16px;margin-left:auto;padding:0;background:none;box-shadow:none}
.site-header .site-nav>a{padding:8px 0 6px;border-bottom:2px solid transparent;color:var(--anthracite);text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;transition:border-color .2s}
.site-header .site-nav>a:hover,.site-header .site-nav>a[aria-current]{border-bottom-color:var(--yellow)}
.site-header .header-cta{flex:none;align-self:center;margin:0;padding:14px 24px;font-size:13px;line-height:1.35;letter-spacing:.1em;white-space:nowrap}
.site-header .header-cta:hover{transform:none}
.site-header .header-cta[aria-current]{box-shadow:inset 0 0 0 2px var(--anthracite)}
.site-header .site-menu{display:none;flex:none;width:44px;height:44px;margin-right:-10px;padding:0;border:0;border-radius:2px;background:none;color:var(--anthracite);cursor:pointer;align-items:center;justify-content:center}
.site-header .site-menu span,.site-header .site-menu span:before,.site-header .site-menu span:after{display:block;width:24px;height:2px;background:currentColor;transition:transform .2s,background .2s}
.site-header .site-menu span{position:relative}
.site-header .site-menu span:before,.site-header .site-menu span:after{content:'';position:absolute;left:0}
.site-header .site-menu span:before{top:-8px}
.site-header .site-menu span:after{top:8px}
.site-header .site-menu[aria-expanded="true"] span{background:transparent}
.site-header .site-menu[aria-expanded="true"] span:before{transform:translateY(8px) rotate(45deg)}
.site-header .site-menu[aria-expanded="true"] span:after{transform:translateY(-8px) rotate(-45deg)}

/* Language switcher (inside the navigation) */
.lang-switch{position:relative;font-size:13px;font-weight:600;letter-spacing:.04em}
.lang-switch summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--taupe);border-radius:2px;color:var(--anthracite);text-transform:uppercase;transition:border-color .2s,box-shadow .2s}
.lang-switch summary:hover,.lang-switch[open] summary{border-color:var(--anthracite);box-shadow:inset 0 0 0 1px var(--anthracite)}
/* The header is a light surface on every page: its focus ring is always the anthracite one
   (page stylesheets that restyle summary/a rings for their own sections must not reach it). */
.site-header a:focus-visible,.site-header button:focus-visible,.site-header summary:focus-visible{outline:2px solid var(--anthracite);outline-offset:4px}
.lang-switch summary::-webkit-details-marker{display:none}
.lang-switch summary:after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.lang-switch[open] summary:after{transform:translateY(2px) rotate(225deg)}
.lang-switch-list{position:absolute;right:0;top:calc(100% + 10px);min-width:170px;padding:8px 0;background:#fff;border:1px solid var(--line);border-top:3px solid var(--yellow);box-shadow:0 14px 28px rgba(47,49,51,.16);display:flex;flex-direction:column;z-index:5}
.site-header .lang-switch-list a{padding:9px 20px;color:var(--anthracite);text-decoration:none;text-transform:none;letter-spacing:0;font-size:15px;font-weight:500;white-space:nowrap}
.site-header .lang-switch-list a:hover{background:var(--cream)}
.site-header .lang-switch-list a[aria-current]{font-weight:700;box-shadow:inset 3px 0 0 var(--yellow)}

/* Tablets and phones: the navigation folds under the header bar; logo, "Contact us" and the menu button stay. */
@media(max-width:1100px){
.site-header{padding:0 24px;gap:12px}
/* In the markup the menu button precedes the navigation (keyboard order: button, then the menu's links);
   on screen it stays at the far right, after "Contact us". */
.site-header .site-menu{display:inline-flex;order:2}
.site-header .header-cta{order:1;margin-left:auto;padding:12px 18px}
.site-header .site-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 24px 26px;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 18px 26px rgba(47,49,51,.14);max-height:calc(100vh - var(--header-h));max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain}
.site-header .site-nav.open{display:flex}
.site-header .site-nav>a{padding:16px 0;border-bottom:1px solid var(--line);font-size:15px}
.site-header .site-nav>a:hover{border-bottom-color:var(--line)}
.site-header .site-nav>a[aria-current]{border-bottom-color:var(--line);box-shadow:inset 3px 0 0 var(--yellow);padding-left:14px}
.lang-switch{width:100%;margin-top:18px;font-size:14px;letter-spacing:.08em}
.lang-switch summary{display:inline-flex}
.lang-switch-list{position:static;border:0;box-shadow:none;background:none;padding:8px 0 0;min-width:0}
.site-header .lang-switch-list a{padding:9px 14px}
}
@media(max-width:650px){
.site-header{padding:0 16px;gap:8px}
.site-header .site-nav{padding-inline:16px}
/* Phones: the logo gets the room (its payoff line must stay readable), the button a tighter fit; it stays 40px tall. */
.site-header .site-logo{min-width:132px}
.site-header .site-logo img{width:160px}
.site-header .header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;font-size:12px;letter-spacing:.04em}
}
/* The narrowest phones: slimmer margins, so that the logo keeps its width and every language's label stays on one line. */
@media(max-width:380px){
.site-header{padding:0 12px;gap:6px}
.site-header .site-logo{margin-right:4px}
.site-header .site-nav{padding-inline:12px}
.site-header .header-cta{padding:8px 9px;letter-spacing:.02em}
}

/* ---------------------------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------------------------- */
/* As in the design: two blocks, the brand (logo, address, phone, VAT number) on the left and the links,
   the copyright line and the languages on the right, aligned right; one left-aligned column on phones. */
.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:25px;background:var(--anthracite-deep);color:#d5d5d2;padding:42px clamp(24px,6vw,100px);font-size:12px;line-height:1.6}
.site-footer a{color:inherit;text-decoration:none}
.site-footer p{margin:0}
.footer-brand,.footer-side{min-width:0}
.footer-logo{display:block;width:fit-content;max-width:100%;line-height:0}
.footer-logo img{display:block;width:208px;max-width:100%;height:auto}
.footer-contact{font-style:normal;margin-top:12px}
.footer-contact span,.footer-contact a{display:block}
.footer-contact .footer-part{display:inline-block;max-width:100%}
/* Chinese: a line never breaks inside the city name (it may only where nothing else fits). */
html[lang^="zh"] .footer-contact{word-break:keep-all;overflow-wrap:anywhere}
.footer-contact a{width:fit-content;transition:color .2s}
.footer-contact .footer-vat{color:#fff;font-weight:600;letter-spacing:.04em}
.footer-side{text-align:right}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links a{transition:color .2s}
.footer-contact a:hover,.footer-links a:hover{color:var(--yellow)}
.site-footer .footer-copy{margin-top:12px}
.site-footer .footer-languages{margin-top:6px;color:#b4b4b1}
.footer-languages a{white-space:nowrap;transition:color .2s}
.footer-languages a:hover{color:#fff}
.footer-languages a[aria-current]{color:var(--yellow);font-weight:600}
.site-footer .footer-legal{margin-top:6px}
.footer-legal a{transition:color .2s}
.footer-legal a:hover{color:var(--yellow)}
/* Home page only: the publicity line of the Tuscany Region grant, across the whole footer under the two blocks. */
.footer-funding{flex:1 0 100%;display:flex;align-items:center;gap:22px;margin-top:6px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.funding-logos{display:flex;align-items:center;gap:14px;flex:none;padding:6px 12px;background:#fff;border-radius:2px}
.funding-logos img{display:block;height:36px;width:auto}
.site-footer .footer-funding p{max-width:820px;font-size:11px;line-height:1.55;color:#b4b4b1}
@media(max-width:800px){.footer-funding{flex-direction:column;align-items:flex-start;gap:14px}.funding-logos{flex-wrap:wrap}}
@media(max-width:650px){.site-footer{flex-direction:column}.footer-funding{flex-basis:auto}.footer-side{text-align:left}.footer-logo img{width:180px}}
/* Touch screens: the stacked footer links get 24px rows (WCAG target size); with a mouse they keep the design's 12px/1.6 rhythm. */
@media(pointer:coarse){.footer-links a,.footer-contact a{display:inline-block;padding-block:2.4px}}

/* Form fields: a visible focus ring. Fields sit on light surfaces, so the ring is anthracite
   (dark yellow on paper is only about 2:1); page stylesheets may refine it. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--anthracite);outline-offset:2px}

/* Contact form: confirmation, errors and the hidden anti-spam field */
.form-trap{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-status{margin:0 0 26px;padding:18px 22px;border-left:3px solid var(--yellow);background:var(--cream);font-size:16px}
.form-status strong{display:block;font:400 24px/1.25 'Playfair Display',Georgia,serif;margin-bottom:6px}
.form-status.is-error{border-left-color:#a4432f}
.field-error{display:block;margin-top:7px;font-size:14px;color:#a4432f}
.field [aria-invalid="true"]{border-color:#a4432f}
.journey-context{margin:0 0 22px;font-size:15px;color:var(--grey)}
.journey-context strong{color:var(--ink);font-weight:600}

/* 404 */
.site-not-found{padding:120px clamp(24px,9vw,150px) 130px;max-width:900px}
.site-not-found h1{font:400 clamp(44px,5vw,76px)/1.08 'Playfair Display',Georgia,serif;letter-spacing:-.04em;margin:20px 0 22px}
.site-not-found p{font-size:18px;max-width:520px;color:var(--anthracite-soft)}

/* White text links on the olive and taupe bands stay white on hover (yellow is only about 3:1 there):
   the underline turns white and thicker instead. */
.tailor .text-link:hover,.people-promise .text-link:hover,.press-inquiry .email:hover,.on-olive .text-link:hover,.on-taupe .text-link:hover{color:#fff;border-bottom-color:#fff;box-shadow:0 1px 0 #fff}

/* Touch screens keep :hover on the last element tapped: there the buttons keep their resting colours. */
@media(hover:none){
html .button:not(.button-outline):hover{background:var(--yellow);color:var(--anthracite);transform:none;box-shadow:none}
html .button.button-outline:hover{background:transparent;color:inherit;transform:none;box-shadow:inset 0 0 0 1.5px currentColor}
html .site-header .header-cta[aria-current]:hover{box-shadow:inset 0 0 0 2px var(--anthracite)}
/* Two buttons of the journey page whose resting look differs from the plain button: they keep it too. */
html .button.enquire-button:not(.button-outline):hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}
html .gallery-more .button.button-outline:hover{color:var(--anthracite)}
}

/* Reduced motion: pseudo-elements too (the menu icon, the language arrow), and no lift on hover. */
@media(prefers-reduced-motion:reduce){*:before,*:after{transition:none!important;animation:none!important}.button:hover,.card:hover{transform:none}}
/* Repeated taps on the header controls must not trigger the double-tap zoom of iOS. */
.site-header .site-menu,.site-header .header-cta,.site-header summary{touch-action:manipulation}
/* Photo links that repeat a title link for the mouse (tabindex="-1", aria-hidden) are never reached with the keyboard:
   after a click they must not draw a focus ring around the photo. (A single :focus rule: an old Safari drops
   a whole selector list that contains :focus-visible.) */
a[tabindex="-1"]:focus{outline:0}

/* Story cards: a number and the word after it stay together, never hyphenated ("7 Restaurants"). */
.keep-num{white-space:nowrap;hyphens:manual}