/* Shared accessibility and locale layout, preserving the botanical art direction. */
.language-switch{display:inline-flex;gap:5px;align-items:center;white-space:nowrap;pointer-events:auto}.language-switch a{padding:5px 7px;min-height:32px;display:inline-flex;align-items:center}.language-switch a[aria-current=true]{border-bottom:1px solid currentColor;font-weight:600}.skip-link{position:fixed;left:16px;top:-100px;z-index:2000;background:#eee5ce;color:#482d2a;padding:12px 20px}.skip-link:focus{top:12px}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
html[lang=el]{--serif:'Literata','Times New Roman',serif}html[lang=el] h1,html[lang=el] h2:not(.site-footer h2),html[lang=el] h3{line-height:1.16;letter-spacing:-.025em}html[lang=el] .eyebrow{letter-spacing:.08em}html[lang=el] .hero h1{font-size:clamp(43px,4.8vw,78px)}html[lang=el] .copy,html[lang=el] .chapter-copy{overflow-wrap:break-word}html[lang=el] .site-header #site-menu{gap:12px}html[lang=el] .shadow-messages,html[lang=el] .whisper{line-height:1.2}html[lang=el] .personal-letter h2{font-size:clamp(38px,4vw,64px)}
@media(max-width:1500px) and (min-width:1301px){html[lang=el] .site-header .brand{width:110px}html[lang=el] .site-header #site-menu{font-size:11px;gap:9px}}
@media(max-width:760px){.language-switch a{min-height:44px;min-width:44px;justify-content:center}html[lang=el] h1,html[lang=el] .hero h1{font-size:clamp(36px,9vw,62px)}html[lang=el] h2:not(.site-footer h2){font-size:clamp(30px,7.5vw,48px)}html[lang=el] .site-footer h3{font-size:17px}.reference-table,.nutrition-table{max-width:100%;overflow-x:auto}html[lang=el] .eyebrow{overflow-wrap:break-word}}

/* A little more life: separate translate/rotate preserve scroll transforms. */
@keyframes botanical-breathe{0%,100%{translate:0 4px;rotate:-.45deg}50%{translate:0 -9px;rotate:.65deg}}
.motion-allowed .motion-art{animation:botanical-breathe 6.5s ease-in-out infinite;animation-delay:var(--float-delay,0s);animation-play-state:paused}
.motion-allowed .motion-art.motion-in-view{animation-play-state:running}
.motion-page-hidden .motion-art{animation-play-state:paused!important}
.motion-allowed .motion-target.motion-seen{animation-duration:.9s;animation-delay:var(--arrival-delay,0ms)}
#approach .connection-base{opacity:.32}
#approach .connection-ink{stroke-width:2.5;stroke-linecap:round}
#approach .connection-light{r:5;filter:drop-shadow(0 0 6px #f3e8ce);display:none}
.motion-allowed:not(.motion-page-hidden) #approach.in-view .connection-light{display:block}
#approach .reasons article>span{transition:background .5s,box-shadow .5s,transform .5s}
.motion-allowed #approach .connection-active>span{background:#d5bd9130;box-shadow:0 0 0 7px #d5bd9112;transform:scale(1.12)}
.motion-allowed #approach .connection-active h3{color:#d5bd91}
body.still .motion-art{animation:none!important}
@media(max-width:850px){@keyframes botanical-breathe{0%,100%{translate:0 2px;rotate:-.25deg}50%{translate:0 -5px;rotate:.4deg}}#approach .connection-drawing{height:110px}}
@media(prefers-reduced-motion:reduce){.motion-art,.motion-target{animation:none!important}.connection-light{display:none!important}}
/* Desktop menu reads bigger (Kon 2026-10-02: «poly mikra grammata»): grows with the screen. EN/EL 13-16px; DE/FR/IT/ES (longer labels, at the limit at 1301px) stay 12px there and grow to 15px. Measured in Chromium: one row, no overlap with the logo, 1301-1920px, six languages. */
@media(min-width:1301px){html[lang] header.site-header #site-menu{font-size:clamp(13px,calc(1.2vw - 1.5px),16px)}html:is([lang=de],[lang=fr],[lang=it],[lang=es]) header.site-header #site-menu{font-size:clamp(12px,calc(1.5vw - 10.5px),15px)}}

/* Mobile/tablet: the language switch stays in the header bar next to the Menu button (menu closed). With more than two
   languages it collapses to the current one (a[aria-current=true] + \25BE); #site-menu in those selectors outranks
   the menu-link rule of nav.css (an id selector, display:block), which otherwise kept all six links open over the page. */
@media(max-width:1300px){header.site-header:not(.site-open) #site-menu{display:flex;position:static;order:1;margin:12px -14px 0 auto;padding:0;gap:0}header.site-header:not(.site-open) #site-menu>:not(.language-switch){display:none}header.site-header .brand{order:0}header.site-header .site-menu-toggle{order:2}header.site-header:not(.site-open) .language-switch{font:500 13px/1 'Fira Sans Condensed',sans-serif;color:#482d2a;gap:0}header.site-header:not(.site-open) .language-switch a{min-height:44px;min-width:40px;justify-content:center;padding:0 6px;color:#482d2a;text-decoration:none}header.site-header:not(.site-open) #site-menu .language-switch:has(a:nth-child(3)){display:flex;flex-direction:column;align-items:stretch;height:44px;position:relative}header.site-header:not(.site-open) #site-menu .language-switch:has(a:nth-child(3)) a{order:1;display:none;background:#eee5ce;border:1px solid #753d4833;border-top:0}header.site-header:not(.site-open) #site-menu .language-switch:has(a:nth-child(3)) a[aria-current=true]{order:0;display:flex;background:none;border:0;border-bottom:1px solid currentColor}header.site-header:not(.site-open) #site-menu .language-switch:has(a:nth-child(3)) a[aria-current=true]:after{content:"\25BE";margin-left:3px;font-size:10px}header.site-header:not(.site-open) #site-menu .language-switch:has(a:nth-child(3)):hover a,header.site-header:not(.site-open) #site-menu .language-switch:has(a:nth-child(3)):focus-within a{display:flex}}
@media(max-width:760px){header.site-header:not(.site-open) #site-menu{margin-top:0}}