body { background: var(--background); color: var(--text); font: 1rem/1.65 var(--sans); }
a { color: inherit; text-underline-offset: .24em; }
a:hover { color: var(--accent); }
:focus-visible { outline: .16rem solid var(--accent); outline-offset: .18rem; }
h1, h2, h3 { font-family: var(--display); line-height: 1.12; }
h2 { font-size: clamp(1.65rem, 3vw, 2.65rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p { max-inline-size: var(--reading); }
.site-header, .panel { background: var(--header); color: var(--inverse); }
.site-header { position: sticky; inset-block-start: 0; z-index: 2; padding-block: var(--step-1); }
.site-header a, .panel a { text-decoration: none; color: var(--inverse-muted); }
.site-header :focus-visible, .panel :focus-visible { outline-color: var(--accent-light); }
.site-header a[aria-current], .panel a[aria-current] { color: var(--inverse); font-weight: 700; }
.site-header a:hover, .panel a:hover { color: var(--accent-light); }
[data-role="language-trigger"] { font-weight: 700; }
.brand { display: grid; place-items: center; min-block-size: var(--target); inline-size: var(--logo-desktop); }
.brand span { inline-size: 100%; aspect-ratio: 304 / 130; background: var(--logo-color); mask: url('../images/svg/logo.svg') center / contain no-repeat; }
.brand:hover span { background: var(--accent-light); }
.page-links, .language-links { display: flex; align-items: center; }
.page-links { column-gap: var(--menu-gap); }
.language-links { column-gap: var(--language-gap); }
.page-links a, .language-links a { display: inline-flex; align-items: center; min-block-size: var(--target); }
.desktop-header .page-links { font-size: .875rem; }
.desktop-header .language-links { font-size: .75rem; }
.desktop-header .language-links li + li::before { content: '|'; margin-inline-end: var(--language-gap); color: var(--inverse-muted); }
.desktop-header .page-links li + li::before { content: var(--menu-separator); margin-inline-end: var(--menu-gap); }
.desktop-header .language-links img, .desktop-header .language-name, .language-panel .language-code { display: none; }
.site-footer { padding-block: var(--step-3); background: var(--footer); color: var(--inverse-muted); text-align: end; font-size: .85rem; }
.site-footer p { max-inline-size: none; }
.divider { display: flex; align-items: center; justify-content: center; text-align: center; gap: var(--step-3); color: var(--divider-text); font: italic 700 clamp(1.65rem, 3vw, 2.25rem)/1.12 var(--display); }
.divider::before, .divider::after { content: ''; flex: 1; border-block-start: 1px solid var(--line); }
.button, .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; box-shadow: var(--framed-link-shadow); transition: background-color var(--duration), box-shadow var(--duration); }
.button { display: inline-block; margin-block-start: var(--step-2); padding: var(--step-1) var(--step-2); }
.card { display: grid; align-content: start; gap: var(--step-1); padding: var(--step-3); }
.button:hover, .card:hover { background: var(--accent-surface); color: var(--text); }
.button:active, .card:active { box-shadow: var(--framed-link-pressed-shadow); }
.card p, .intro, .media-row p { color: var(--muted); }
.rounded-media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.square-media img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); }
.media-row h2 + p, .media-row h3 + p, address h2 + p { margin-block-start: var(--step-1); }
.vertical-list article + article { border-block-start: 1px solid var(--line); padding-block-start: var(--step-3); }
.table-wrap { overflow: auto; background: var(--surface); border-radius: var(--radius); }
table { border-collapse: collapse; inline-size: 100%; text-align: start; }
caption, th, td { padding: var(--step-2); text-align: start; }
caption { font: 700 1.4rem var(--display); }
thead th, tbody tr { border-block-start: 1px solid var(--line); }
td span { display: block; white-space: nowrap; }
address { font-style: normal; }
.booking { display: block; inline-size: min(100%, 80%); min-block-size: 38rem; margin-inline: auto; border: 5px solid var(--line); border-radius: var(--radius); }
.panel { position: fixed; border: 0; padding: 0; max-inline-size: none; max-block-size: 100dvh; }
.panel::backdrop { background: var(--backdrop); backdrop-filter: blur(.2rem); }
html:has(.panel[open]) { overflow: hidden; }
.panel[open] { animation: enter var(--duration) ease-out; }
@keyframes enter { from { transform: translate(var(--enter-x, 0), var(--enter-y, 0)); } }
.menu-panel { inset: 0 0 0 auto; inline-size: min(88%, 26rem); block-size: 100dvh; --enter-x: 100%; }
.language-panel { inset: auto 0 0; inline-size: 100%; max-block-size: 85dvh; border-radius: var(--radius) var(--radius) 0 0; --enter-y: 100%; }
.panel-body { padding: var(--step-3); padding-block-end: max(var(--step-3), env(safe-area-inset-bottom)); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--step-2); padding-block-end: var(--step-2); }
.language-panel .panel-heading { touch-action: none; }
.panel button, .mobile-header button { display: inline-flex; justify-content: center; align-items: center; gap: var(--step-1); min-inline-size: var(--target); min-block-size: var(--target); padding: var(--step-1); background: transparent; color: inherit; border: 0; border-radius: var(--radius); cursor: pointer; }
.panel button { font-size: 1.5rem; }
.panel button:active, .mobile-header button:active { color: var(--accent-light); }
.panel ul { display: grid; gap: var(--step-1); }
.panel a { display: flex; gap: var(--step-2); padding-inline: var(--step-1); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; }
}
.language-panel .language-links img { flex: none; aspect-ratio: 3 / 2; border-radius: .13rem; }
.visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}