/* Dion, 18-19 Oct: still backgrounds, one calm scroll down, an illustrated contents list and a bar that jumps
   anywhere. Shared by A1-A4. */
/* 1. The background stays still: no drift, no moving light, no edge scenes, no lines across the screen. */
.sea-drift, .sheen, .cover-waves, .water, .tide .pattern, .crest, .boat, .boat-wrap, .halo { animation: none !important; }
.scene-band, .sky-band, .sea-band, .scene, .catch, .pencil { display: none !important; }
/* A3: the still sea sits behind every line, so it stays soft. */
.tide { opacity: .55; }

/* 2. In the menu: every course as its drawing, breakfast and the rest as plain words. Replaces the menus' own lists. */
.cmp-toc-on nav[aria-label="Dinner courses"]:not(.cmp-toc) { display: none !important; }
.cmp-toc { position: relative; z-index: 1; width: min(100%, 520px); margin: 0 auto; padding: 22px 18px 6px; box-sizing: border-box; text-align: center; }
.cmp-label { margin: 0 0 14px; font: 500 calc(10.5px * var(--fs, var(--s, 1))) var(--tide-sans, "Jost", system-ui, sans-serif);
  letter-spacing: .26em; text-transform: uppercase; opacity: .6; }
.cmp-label:not(:first-child) { margin-top: 30px; }
.cmp-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 0; }
.cmp-tiles a { flex: 0 0 33.333%; box-sizing: border-box; }
.cmp-tiles a { display: grid; justify-items: center; align-content: start; gap: 8px; min-height: 44px; padding: 4px; border-radius: 12px;
  color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.cmp-tiles i { display: block; width: 46px; height: 40px; background: var(--tide-accent, currentColor); opacity: .82;
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; transition: opacity 220ms ease, translate 220ms ease; }
.cmp-tiles span { font: 500 calc(10px * var(--fs, var(--s, 1))) / 1.35 var(--tide-sans, "Jost", system-ui, sans-serif); letter-spacing: .12em;
  text-transform: uppercase; text-wrap: balance; }
.cmp-tiles a:hover i, .cmp-tiles a[aria-current="true"] i { opacity: 1; translate: 0 -2px; }
.cmp-tiles a[aria-current="true"] span { color: var(--tide-accent, inherit); }
.cmp-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cmp-words a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 15px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); border-radius: 999px; color: inherit; text-decoration: none; box-sizing: border-box;
  font: 400 calc(17px * var(--fs, var(--s, 1))) / 1.2 var(--tide-display, "Cormorant Garamond", Georgia, serif); font-style: italic; opacity: .86;
  -webkit-tap-highlight-color: transparent; }
.cmp-words a:hover, .cmp-words a[aria-current="true"] { opacity: 1; color: var(--tide-accent, inherit); border-color: color-mix(in srgb, var(--tide-accent, currentColor) 55%, transparent); }
.cmp-tiles a:focus-visible, .cmp-words a:focus-visible, .cmp-dock button:focus-visible, .cmp-sheet button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
@media (min-width: 700px) { .cmp-tiles a { flex-basis: 20%; } .cmp-tiles i { width: 54px; height: 46px; } }

/* The choice under the cover: Dinner, Breakfast, Drinks. Only the chosen menu shows; the bar below switches. */
.cmp-off, .cmp-closed { display: none !important; }
.cmp-pick [hidden], .cmp-dock [hidden] { display: none !important; }
.cmp-pick { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 10px; width: min(100% - 32px, calc(var(--n, 3) * 140px)); margin: 26px auto 10px; }
.cover .cmp-pick { margin-top: 22px; }
.cmp-pick button { display: grid; justify-items: center; gap: 9px; min-height: 104px; padding: 16px 6px 13px; border-radius: 18px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tide-ink, currentColor) 14%, transparent); background: color-mix(in srgb, var(--tide-ink, #fff) 4%, transparent);
  color: var(--tide-ink, inherit); -webkit-tap-highlight-color: transparent; transition: border-color 220ms ease, background-color 220ms ease; }
.cmp-pick i { display: block; width: 50px; height: 46px; background: currentColor; opacity: .78;
  -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; transition: opacity 220ms ease; }
.cmp-pick span { font: 500 calc(10.5px * min(var(--fs, var(--s, 1)), 1.2)) var(--tide-sans, "Jost", system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.cmp-pick button[aria-current="true"] { border-color: color-mix(in srgb, var(--tide-accent, currentColor) 70%, transparent);
  background: color-mix(in srgb, var(--tide-accent, currentColor) 12%, transparent); }
.cmp-pick button[aria-current="true"] i { opacity: 1; background: var(--tide-accent, currentColor); }
.cmp-pick button:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

/* 3. Descriptions stay in view, quiet under the dish name. */
.cmp .dish > .desc { display: block !important; opacity: .74; }

/* 4. Events: two up, the rest behind one button. The legend: three lines, then Read more. */
.cmp-hidden { display: none !important; }
.cmp-more { display: block; margin: 20px auto 0; min-height: 44px; padding: 10px 22px; border: 1px solid currentColor; border-radius: 999px; background: none; color: inherit;
  opacity: .8; font: 500 calc(11px * var(--fs, var(--s, 1))) var(--tide-sans, "Jost", system-ui, sans-serif); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.cmp-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* 5. One bar at the bottom: Dinner, Breakfast, More, each opening its list. The menus' own bottom bars step aside. */
.cmp .dock, .cmp .bottom-nav, .cmp .compass, .cmp .current-section { display: none !important; }
.cmp-dock { position: fixed; z-index: 60; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); translate: -50% 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: min(calc(var(--n, 3) * 114px), calc(100vw - 32px)); padding: 4px; border-radius: 999px; box-sizing: border-box;
  background: color-mix(in srgb, var(--tide-bg, #10213a) 86%, transparent); color: var(--tide-ink, #f3eee4);
  border: 1px solid color-mix(in srgb, var(--tide-ink, #f3eee4) 12%, transparent);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.45); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0; transition: opacity 300ms ease; }
.cmp-dock.ready { opacity: 1; }
.cmp-dock button { position: relative; z-index: 1; min-height: 44px; padding: 0 8px; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer;
  font: 500 calc(11px * min(var(--fs, var(--s, 1)), 1.15)) var(--tide-sans, "Jost", system-ui, sans-serif); letter-spacing: .14em; text-transform: uppercase;
  opacity: .66; transition: opacity 220ms ease; -webkit-tap-highlight-color: transparent; }
.cmp-dock button[aria-current="true"] { opacity: 1; }
.cmp-pill { position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: 999px; background: color-mix(in srgb, var(--tide-accent, #8fc9c4) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--tide-accent, #8fc9c4) 45%, transparent); box-sizing: border-box;
  transition: translate 320ms cubic-bezier(.22,1,.36,1), width 320ms cubic-bezier(.22,1,.36,1); }

.cmp-sheet { position: fixed; inset: auto 0 0 0; margin: 0 auto; width: min(520px, 100vw); max-width: 100vw; max-height: 80vh; padding: 0; border: 0;
  border-radius: 22px 22px 0 0; background: var(--tide-bg, #10213a); color: var(--tide-ink, #f3eee4); box-shadow: 0 -12px 40px -18px rgba(0,0,0,.5); }
.cmp-sheet::backdrop { background: rgba(0,0,0,.38); }
.cmp-sheet[open] { animation: cmp-up 280ms cubic-bezier(.22,1,.36,1) both; }
.cmp-sheet-in { display: grid; gap: 6px; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); }
.cmp-sheet .cmp-tiles { padding: 8px 0 4px; }
.cmp-sheet .cmp-words { padding: 4px 0; }
.cmp-grab { justify-self: center; width: 36px; height: 4px; border-radius: 4px; background: currentColor; opacity: .22; margin: 0 0 8px; }
.cmp-sheet .cmp-tide { display: inline-flex; align-items: center; justify-content: center; gap: 2px; justify-self: center; min-height: 46px; margin-top: 10px; padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--tide-accent, currentColor) 55%, transparent); border-radius: 999px; background: none; color: var(--tide-accent, inherit);
  font: 500 calc(11px * var(--fs, var(--s, 1))) var(--tide-sans, "Jost", system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
@keyframes cmp-up { from { opacity: 0; translate: 0 24px; } }

/* 6. Let the Tide Decide carries a small drawn wave instead of an arrow. */
.tide-ico { display: inline-block; width: 1.35em; height: 1.35em; margin-left: .4em; vertical-align: -.36em; fill: none; stroke: currentColor;
  stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .cmp-sheet[open] { animation: none; } .cmp-pill, .cmp-tiles i { transition: none; } }