/* Mawimbi digital menu, A3 "Legend" (site/d3), round 2 */
:root {
  --ink: #0E0E10;
  --paper: #F2EFEA;
  --paper-2: rgba(242, 239, 234, .86);
  --paper-3: rgba(242, 239, 234, .72);
  --hair: rgba(242, 239, 234, .12);
  --sea: #5B8FD0;
  --crest: 40px;
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --pad: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --calm: cubic-bezier(.22, 1, .36, 1);          /* scroll reveals: 1100-1400ms */
  --s: 1;                                          /* text size: the one root variable */
  /* transitions-polish tokens, for taps and UI only */
  --duration-quick: 150ms;
  --duration-fast: 250ms;
  --ease-smooth-out: cubic-bezier(.22, 1, .36, 1);
  /* transitions-dev snippet variables (05 dropdown, 16 tabs, 21 accordion, 14 skeleton) */
  --dropdown-open-dur: 250ms;
  --dropdown-close-dur: 150ms;
  --dropdown-pre-scale: .97;
  --dropdown-closing-scale: .99;
  --dropdown-ease: cubic-bezier(.22, 1, .36, 1);
  --tabs-dur: 250ms;
  --tabs-ease: cubic-bezier(.22, 1, .36, 1);
  --tabs-text-muted: rgba(242, 239, 234, .5);
  --tabs-text-active: #F2EFEA;
  --tabs-bar-bg: rgba(242, 239, 234, .06);
  --tabs-pill-bg: rgba(242, 239, 234, .15);
  --acc-expand: 300ms;
  --acc-collapse: 250ms;
  --acc-chevron: 250ms;
  --acc-ease: cubic-bezier(.22, 1, .36, 1);
  --pulse-dur: 6s;
  --pulse-count: infinite;
  --pulse-min: .55;
  --reveal-dur: 900ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}
html[data-size="large"] { --s: 1.32; }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ink); font-size: calc(100% * var(--s));
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
body {
  position: relative; margin: 0; background: var(--ink); color: var(--paper);
  font-family: var(--serif); font-size: 1.125rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-kerning: normal; font-variant-numeric: lining-nums;
  overflow-x: clip;
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--sea); outline-offset: 4px; border-radius: 4px; }
h1, h2, h3, h4, h5 { text-wrap: balance; }
.nw { white-space: nowrap; }

/* ---------- The tide: the Mawimbi pattern rises from the bottom as you read ---------- */
.tide {
  position: fixed; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh;
  z-index: 0; pointer-events: none; overflow: hidden;
}
.water {
  position: absolute; left: 0; right: 0; top: 0;
  height: calc(100vh + var(--crest)); height: calc(100lvh + var(--crest));
  transform: translate3d(0, calc(-1 * var(--crest)), 0); /* default: fully risen (no support / reduced motion) */
  will-change: transform;
  background: rgba(91, 143, 208, .028);
  --crest-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='40' viewBox='0 0 360 40'%3E%3Cpath d='M0 22 Q90 6 180 22 T360 22 V40 H0 Z'/%3E%3C/svg%3E");
  --crest-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='230' height='40' viewBox='0 0 230 40'%3E%3Cpath d='M0 24 Q57.5 13 115 24 T230 24 V40 H0 Z'/%3E%3C/svg%3E");
  -webkit-mask-image: var(--crest-a), var(--crest-b), linear-gradient(#000, #000);
          mask-image: var(--crest-a), var(--crest-b), linear-gradient(#000, #000);
  -webkit-mask-size: 360px 40px, 230px 40px, 100% calc(100% - 38px);
          mask-size: 360px 40px, 230px 40px, 100% calc(100% - 38px);
  -webkit-mask-repeat: repeat-x, repeat-x, no-repeat;
          mask-repeat: repeat-x, repeat-x, no-repeat;
  -webkit-mask-position: 0 0, 0 2px, 0 38px;
          mask-position: 0 0, 0 2px, 0 38px;
}
/* The pattern is a mask: inside it, still ink lines and a moving light (effect 2, very faint here) */
.pattern {
  position: absolute; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh; overflow: hidden;
  transform: translate3d(0, var(--crest), 0);
  will-change: transform;
  -webkit-mask: url("../assets/wave-pattern.webp") center / cover no-repeat;
          mask: url("../assets/wave-pattern.webp") center / cover no-repeat;
}
.ink { position: absolute; inset: 0; background: var(--sea); opacity: .06; }
.sheen {
  position: absolute; top: 0; bottom: 0; left: -150%; width: 400%;
  opacity: .32;
  background: linear-gradient(100deg, transparent 38%,
    oklch(.84 .08 200 / .32) 43%, oklch(.82 .1 285 / .34) 47%,
    oklch(.85 .09 345 / .32) 51%, oklch(.9 .08 85 / .3) 55%, transparent 60%);
  transform: translate3d(0, 0, 0);           /* static fallback: a faint band across the middle */
  will-change: transform;
}
@media (min-width: 900px) { .ink { opacity: .055; } }
@media (prefers-reduced-motion: no-preference) {
  .water { animation: swell 30s linear infinite; }
}
@keyframes swell {
  to {
    -webkit-mask-position: 360px 0, -230px 2px, 0 38px;
            mask-position: 360px 0, -230px 2px, 0 38px;
  }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .water { animation: swell 30s linear infinite, tide linear both; animation-timeline: auto, scroll(root); }
    .pattern { animation: tide-p linear both; animation-timeline: scroll(root); }
    .sheen { animation: sheen linear both; animation-timeline: scroll(root); }
    .wave-roll { animation: roll linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}
@keyframes tide { 0%, 4% { transform: translate3d(0, 100lvh, 0); } 100% { transform: translate3d(0, calc(-1 * var(--crest)), 0); } }
@keyframes tide-p { 0%, 4% { transform: translate3d(0, -100lvh, 0); } 100% { transform: translate3d(0, var(--crest), 0); } }
@keyframes sheen { from { transform: translate3d(-24%, 0, 0); } to { transform: translate3d(22%, 0, 0); } }
@keyframes roll { to { transform: translate3d(16px, 10px, 0) scale(1.06); } }

/* ---------- The pencil line (effect 3): one SVG path drawn by app.js, under the words ---------- */
.pencil { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 1; pointer-events: none; overflow: visible; display: none; transition: opacity 120ms ease; }
.pl .pencil { display: block; }
.pencil path { fill: none; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.pencil circle { fill: var(--paper); opacity: .85; }
.mk {
  display: block; width: 66.2px; height: 16px; margin: 16px auto 0;
  background: var(--sea);
  -webkit-mask: var(--curl) center / contain no-repeat;
          mask: var(--curl) center / contain no-repeat;
}
.pl .mk { visibility: hidden; }        /* the line itself draws every mark */

/* Everything readable sits above the tide and the line */
.cover, .page, .end { position: relative; z-index: 2; transition: opacity 120ms ease; }
.sizing .page, .sizing .end, .sizing .pencil { opacity: .2; }
.page, .end { max-width: 640px; margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Cover ---------- */
.cover { text-align: center; padding-top: max(34px, env(safe-area-inset-top)); padding-bottom: 30px; overflow-x: clip; }
.wave-roll {
  width: min(122vw, 860px);
  margin-left: calc(50% - min(61vw, 430px));
  transform-origin: 50% 80%;
}
.great-wave {
  aspect-ratio: 249.3 / 100.4;
  background: var(--paper);
  -webkit-mask: url("../assets/great-wave.svg") center / contain no-repeat;
          mask: url("../assets/great-wave.svg") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .great-wave { animation: arrive 2.6s var(--calm) both; }
}
@keyframes arrive { from { opacity: 0; transform: translate3d(-14px, 12px, 0); } }
.masthead { margin: 34px 0 0; line-height: 0; }
.logo {
  display: block; width: min(68vw, 300px); margin: 0 auto; aspect-ratio: 308.9 / 57;
  background: var(--paper);
  -webkit-mask: url("../assets/logo-script.svg") center / contain no-repeat;
          mask: url("../assets/logo-script.svg") center / contain no-repeat;
}
.carte {
  margin: 18px 0 0; font-family: var(--sans); font-size: 11.5px; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase; color: var(--paper-2); padding-left: .32em;
}
.cover .mk { margin-top: 20px; }

/* ---------- Sticky bar: three links, More, text size ---------- */
.bar {
  position: sticky; top: 0; z-index: 6;
  background: rgba(14, 14, 16, .86);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(242, 239, 234, .08);
}
.bar-in {
  max-width: 640px; height: 50px; margin: 0 auto;
  padding: 0 max(8px, env(safe-area-inset-right)) 0 max(8px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 0;
}
.t-acc-chevron svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.4; }
/* 16 tabs sliding (transitions.dev): the small / large "A" switch */
.t-tabs {
  position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: 48px; background: var(--tabs-bar-bg); margin-left: auto; flex: none;
}
.t-tab {
  position: relative; z-index: 1; appearance: none; border: 0; background: transparent;
  width: 32px; height: 32px; padding: 0; border-radius: 48px; cursor: pointer;
  font-family: var(--serif); font-weight: 500; font-size: 15px; line-height: 1;
  color: var(--tabs-text-muted);
  transition: color var(--tabs-dur) var(--tabs-ease);
}
.t-tab.big { font-size: 21px; }
.t-tab:not([aria-pressed="true"]):hover, .t-tab[aria-pressed="true"] { color: var(--tabs-text-active); }
.t-tabs-pill {
  position: absolute; top: 4px; left: 0; height: 32px; width: 0; z-index: 0; pointer-events: none;
  background: var(--tabs-pill-bg); border-radius: 48px;
  transform: translateX(0);
  transition: transform var(--tabs-dur) var(--tabs-ease), width var(--tabs-dur) var(--tabs-ease);
  will-change: transform, width;
}
html:not(.js) .size { display: none; }

/* ---------- Sections ---------- */
.major { padding-top: 88px; scroll-margin-top: 30px; }
.mh { text-align: center; margin-bottom: 28px; }
.mh h2 { margin: 0; font-weight: 500; font-size: 2.75rem; line-height: 1.06; letter-spacing: .004em; }
.mh .mk { margin-top: 20px; }
.courses {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 2px;
  max-width: 30em; margin: -6px auto 4px;
}
.courses a {
  font-family: var(--sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; color: rgba(242, 239, 234, .62); padding: 10px 8px 10px 9px; white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-smooth-out);
}
.courses a:hover { color: var(--sea); }

/* Dinner chapters */
.chapter { padding-top: 64px; scroll-margin-top: 30px; }
.ch-head { text-align: center; margin-bottom: 30px; }
.num { display: block; font-size: 1rem; font-weight: 500; letter-spacing: .22em; color: var(--sea); padding-left: .22em; }
.ch-head h3, .bh {
  margin: 8px 0 0; font-family: var(--sans); font-weight: 400; font-size: 1.0625rem;
  letter-spacing: .34em; text-transform: uppercase; line-height: 1.35; padding-left: .34em;
}
.ch-head .mk { margin-top: 16px; }
.tagline { margin: 14px 0 0; font-style: italic; font-size: 1.3rem; color: var(--paper-2); }
.engraving { margin: 14px auto 0; }
.engraving img { display: block; margin: 0 auto; height: auto; filter: invert(.94) sepia(.12); opacity: .92; }
.engraving-crab img { width: 210px; aspect-ratio: 210 / 150; }
.engraving-lobster img { width: 160px; }
@media (prefers-reduced-motion: no-preference) {
  .engraving img { animation: float 9s ease-in-out infinite alternate; }
  .engraving-lobster img { animation-duration: 10s; animation-delay: -3s; }
}
@keyframes float {
  from { transform: translate3d(0, 2px, 0) rotate(-.8deg); }
  to { transform: translate3d(0, -4px, 0) rotate(.7deg); }
}
.section-price {
  margin: 14px 0 0; font-family: var(--sans); font-size: .875rem; letter-spacing: .12em;
  font-variant-numeric: tabular-nums; padding-left: .12em;
}
.served { margin: 12px auto 0; max-width: 24em; font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: var(--paper-3); text-wrap: balance; text-align: center; }

.dishes { list-style: none; margin: 0; padding: 0; }
.dish { padding: 0 0 26px; }
.line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; }
.dish h4 { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 1.4rem; font-weight: 500; line-height: 1.22; letter-spacing: .008em; }
.r { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.r > span { display: block; }
.price {
  margin-left: auto; flex: none; font-family: var(--sans); font-size: .875rem; letter-spacing: .06em;
  font-variant-numeric: tabular-nums; color: var(--paper-2);
}
.desc { margin: 5px 0 0; font-style: italic; font-size: 1.09rem; line-height: 1.45; color: var(--paper-3); max-width: 33em; }
.note {
  margin: 9px 0 0; font-family: var(--sans); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sea);
}

/* ---------- Breakfast ---------- */
.ph { position: relative; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #131820; }
.major > .ph { margin: 6px 0 8px; }
.bsec { padding-top: 46px; scroll-margin-top: 60px; }
.bsec > header { text-align: center; margin-bottom: 26px; }
.bsec .bh { margin-top: 0; }
.wrap-list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 26em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0;
  font-size: 1.3rem; line-height: 1.5; text-align: center;
}
.wrap-list li { white-space: nowrap; }
.wrap-list li:not(:last-child)::after { content: "\00b7"; color: var(--sea); margin: 0 .55em; }
.bnote { margin: 36px auto 0; max-width: 22em; text-align: center; font-style: italic; font-size: 1.0625rem; color: var(--paper-3); text-wrap: balance; }

/* 21 accordion (transitions.dev): Breakfast Sides; open when there is no JS */
.t-acc .bh { margin: 0; }
.t-acc-head {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  width: 100%; min-height: 48px; padding: 6px 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.t-acc-chevron { display: inline-flex; color: var(--sea); transform: scaleY(1); transform-origin: center; transition: transform var(--acc-chevron) var(--acc-ease); }
.t-acc-chevron path { vector-effect: non-scaling-stroke; }
.t-acc[data-open="true"] .t-acc-chevron { transform: scaleY(-1); }
.t-acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--acc-collapse) var(--acc-ease); }
.t-acc[data-open="true"] .t-acc-panel { grid-template-rows: 1fr; transition: grid-template-rows var(--acc-expand) var(--acc-ease); }
.t-acc-panel-inner {
  overflow: hidden; opacity: 0; filter: blur(2px);
  transition: opacity var(--acc-collapse) var(--acc-ease), filter var(--acc-collapse) var(--acc-ease);
}
.t-acc[data-open="true"] .t-acc-panel-inner {
  opacity: 1; filter: blur(0);
  transition: opacity var(--acc-expand) var(--acc-ease), filter var(--acc-expand) var(--acc-ease);
}
html:not(.js) .t-acc-panel { grid-template-rows: 1fr; }
html:not(.js) .t-acc-panel-inner { opacity: 1; filter: none; }
html:not(.js) .t-acc-chevron { display: none; }
.sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 24px; padding: 22px 4px 8px; }
.sg h5 { margin: 0 0 6px; font-family: var(--sans); font-weight: 400; font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sea); }
.sg ul { list-style: none; margin: 0; padding: 0; }
.sg li { font-size: 1.06rem; line-height: 1.4; padding: 2px 0; color: var(--paper-2); }

/* 14 skeleton reveal (transitions.dev): sea-glass placeholder, then the photo fades in */
.t-skel { position: relative; }
.t-skel-skeleton, .t-skel-content { position: absolute; inset: 0; }
.t-skel-skeleton {
  z-index: 1; opacity: 1; filter: blur(0);
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel-skeleton > i {
  position: absolute; inset: 0;
  background: linear-gradient(125deg, rgba(91, 143, 208, .08), rgba(132, 186, 196, .17) 46%, rgba(91, 143, 208, .07) 78%);
}
.t-skel-content {
  z-index: 2; opacity: 0; filter: blur(var(--reveal-blur));
  transition: opacity var(--reveal-dur) var(--reveal-ease), filter var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton { opacity: 0; filter: blur(var(--reveal-blur)); }
.t-skel.is-revealed .t-skel-content { opacity: 1; filter: blur(0); }
.t-skel-skeleton.is-pulsing > * { animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count); }
@keyframes t-skel-pulse { 0%, 100% { opacity: 1; } 50% { opacity: var(--pulse-min); } }
html:not(.js) .t-skel-content { opacity: 1; filter: none; }
.t-skel img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- Events ---------- */
.cards { display: grid; gap: 30px; }
.card { border: 1px solid var(--hair); border-radius: 16px; overflow: hidden; background: rgba(16, 16, 19, .9); }
.card .ph { border-radius: 0; }
.card-body { padding: 18px 18px 22px; }
.tag {
  display: inline-block; font-family: var(--sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sea); border: 1px solid rgba(91, 143, 208, .5); border-radius: 999px; padding: 4px 9px 4px 11px;
}
.card h3 { margin: 12px 0 0; font-weight: 500; font-size: 1.55rem; line-height: 1.15; }
.when { margin: 7px 0 0; font-family: var(--sans); font-size: .69rem; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-3); }
.ev-line { margin: 10px 0 0; font-style: italic; font-size: 1.12rem; line-height: 1.45; color: var(--paper-2); text-wrap: pretty; }

/* ---------- The Legend of the Wave ---------- */
.legend { text-align: center; }
.legend .mh { margin-bottom: 18px; }
.legend-title { font-weight: 500; font-size: calc(clamp(46px, 13.6vw, 78px) * var(--s)); line-height: 1.02; letter-spacing: .004em; }
.mh .legend-title { font-size: calc(clamp(46px, 13.6vw, 78px) * var(--s)); }
.legend-title .sm { font-style: italic; font-weight: 400; font-size: .5em; letter-spacing: .02em; color: var(--paper-2); }
.phon { margin: 0; font-size: 1.19rem; color: var(--paper-2); }
.phon .ipa { color: var(--sea); margin-right: .35em; font-weight: 500; }
.phon i { margin-right: .15em; }
.story { margin: 20px auto 0; max-width: 30em; font-style: italic; font-size: 1.22rem; line-height: 1.58; color: var(--paper-2); text-wrap: pretty; }

/* ---------- Social ---------- */
.socs { display: grid; gap: 12px; }
.soc {
  display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 14px 18px 14px 16px;
  border: 1px solid rgba(242, 239, 234, .14); border-radius: 18px; text-decoration: none;
  background: rgba(242, 239, 234, .025);
  transition: border-color var(--duration-fast) var(--ease-smooth-out), background-color var(--duration-fast) var(--ease-smooth-out);
}
.soc:hover { border-color: rgba(91, 143, 208, .6); background: rgba(91, 143, 208, .08); }
.ico { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(91, 143, 208, .14); }
.ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sn { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sn b { font-weight: 500; font-size: 1.4rem; line-height: 1.15; }
.sn small { font-family: var(--sans); font-size: .75rem; letter-spacing: .06em; color: var(--paper-3); overflow-wrap: anywhere; }
.go { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--sea); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ask { margin: 22px 0 0; text-align: center; font-style: italic; font-size: 1.3rem; color: var(--paper-2); }

/* ---------- Reviews ---------- */
#reviews { text-align: center; }
.rv-line { margin: 0 auto; max-width: 22em; font-style: italic; font-size: 1.22rem; line-height: 1.5; color: var(--paper-2); text-wrap: balance; }
.rv-btns { display: grid; gap: 12px; margin-top: 26px; }
.btn {
  display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 12px 18px;
  border-radius: 999px; text-decoration: none; text-align: center;
  font-family: var(--sans); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  transition: background-color var(--duration-fast) var(--ease-smooth-out), border-color var(--duration-fast) var(--ease-smooth-out), color var(--duration-fast) var(--ease-smooth-out);
}
.btn-p { background: var(--paper); color: var(--ink); }
.btn-p:hover { background: #fff; }
.btn-q { border: 1px solid rgba(242, 239, 234, .24); color: var(--paper-2); }
.btn-q:hover { border-color: var(--sea); color: var(--paper); }
@media (min-width: 560px) { .rv-btns { grid-template-columns: 1fr 1fr; } }

/* ---------- The end: the boat rests on the line ---------- */
.end { text-align: center; padding-top: 96px; padding-bottom: max(56px, calc(env(safe-area-inset-bottom) + 32px)); }
.sail { width: 104px; margin: 0 auto; }
.sailboat {
  aspect-ratio: 261.3 / 306.7; background: var(--paper); opacity: .92;
  -webkit-mask: url("../assets/sailboat.svg") center / contain no-repeat;
          mask: url("../assets/sailboat.svg") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .sailboat { animation: bob 10s ease-in-out infinite alternate; transform-origin: 50% 90%; }
}
@keyframes bob { from { transform: rotate(-1deg) translate3d(0, 1px, 0); } to { transform: rotate(.9deg) translate3d(0, -2px, 0); } }
.end .mk { margin-top: 2px; }
.site, .tel {
  display: block; width: fit-content; margin: 0 auto; padding: 10px 6px 10px calc(6px + .3em);
  font-family: var(--sans); font-size: min(.75rem, 3.4vw); letter-spacing: .3em; text-transform: uppercase; text-decoration: none;
  max-width: 100%; overflow-wrap: anywhere;
}
.site { margin-top: 22px; }
.tel { letter-spacing: .16em; padding-left: calc(6px + .16em); color: var(--paper-2); }
.site:hover, .tel:hover { color: var(--sea); }
.price-note { margin: 8px 0 0; font-style: italic; font-size: .97rem; color: var(--paper-3); }

/* ---------- Calm reveals: once, 1100-1400ms, 8-14px, one group at a time ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0; transform: translate3d(0, 12px, 0);
    transition: opacity 1200ms var(--calm), transform 1300ms var(--calm);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  .js .reveal.in { opacity: 1; transform: none; }
  /* heads and dishes stay put; their parts move instead */
  .js .dish.reveal, .js .mh.reveal, .js .ch-head.reveal, .js .bsec > header.reveal { opacity: 1; transform: none; }

  /* 18 texts reveal (transitions.dev), slowed: heading words come into focus one after another */
  .js .fx .w {
    display: inline-block; opacity: 0; transform: translate3d(0, 10px, 0) scale(.985); filter: blur(3px);
    transition: opacity 1200ms var(--calm), transform 1300ms var(--calm), filter 1100ms var(--calm);
    transition-delay: calc(var(--w) * 110ms);
  }
  .js .in .fx .w { opacity: 1; transform: none; filter: blur(0); }
  .js .ch-head > :not(h3):not(.mk), .js .bsec > header > .served {
    opacity: 0; transform: translate3d(0, 8px, 0);
    transition: opacity 1200ms var(--calm) 260ms, transform 1300ms var(--calm) 260ms;
  }
  .js .ch-head > .num { transition-delay: 0s; }
  .js .ch-head.in > :not(h3):not(.mk), .js .bsec > header.in > .served { opacity: 1; transform: none; }

  /* names rise from behind a line */
  .js .dish .r > span { transform: translate3d(0, 108%, 0); transition: transform 1250ms var(--calm); transition-delay: calc(var(--i) * 100ms); }
  .js .dish .price, .js .dish .desc, .js .dish .note {
    opacity: 0; transform: translate3d(0, 8px, 0);
    transition: opacity 1200ms var(--calm), transform 1200ms var(--calm);
    transition-delay: calc(var(--i) * 100ms + 180ms);
  }
  .js .dish.in .r > span, .js .dish.in .price, .js .dish.in .desc, .js .dish.in .note { opacity: 1; transform: none; }
}

/* ---------- Reduced motion: still, fully revealed, everything visible ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .wave-roll { transform: none !important; }
}

@media (min-width: 700px) {
  .cards { grid-template-columns: 1fr 1fr; gap: 26px; }
  .story { font-size: 1.31rem; }
  .desc { font-size: 1.16rem; }
  .dish h4 { font-size: 1.5rem; }
  .chapter { padding-top: 80px; }
  .major { padding-top: 110px; }
}

/* Round 3: Compass. Native dialog + transitions.dev 06 modal and 34 text swap. */
:root { --tide-bg:#161618; --tide-ink:var(--paper); --tide-soft:var(--paper-3); --tide-accent:#8DB4E2; --tide-line:var(--hair); --tide-display:var(--serif); --tide-sans:var(--sans); --modal-open-dur:250ms; --modal-close-dur:150ms; --modal-scale:.96; --modal-scale-close:.96; --modal-ease:var(--ease-smooth-out); --text-soft-dur:150ms; --text-soft-ease:ease-in-out; --acc-expand:250ms; }
html { scroll-behavior:auto; scroll-padding-block:104px 120px; timeline-scope:--gull,--octopus,--catch,--dhow,--school; }
.bar { transition:transform var(--duration-fast) var(--ease-smooth-out); }
.bar-hidden { transform:translateY(-110%); }
.bar:focus-within { transform:none; }
.bar-in { padding-inline:12px; gap:12px; height:52px; }
.bar-logo { display:grid; align-items:center; min-height:44px; padding:4px; }
.bar-logo .logo { width:94px; }
.bar-tide { margin-left:auto; min-height:44px; padding:8px 14px; }
.size { margin-left:0; padding:4px; gap:0; background:none; }
.t-tab { width:44px; height:44px; }
.t-tabs-pill { width:44px; height:44px; transition:transform var(--duration-fast) var(--ease-smooth-out); will-change:transform; }
.cover-tide { margin-top:26px; min-height:48px; padding:12px 22px; border-color:rgba(141,180,226,.55); }
.cover-tide span { margin-left:14px; }
.end { padding-bottom:calc(148px + env(safe-area-inset-bottom)); }
.chapter,.bsec,.major { scroll-margin-top:104px; }
.section-drawing { display:block; width:80px; height:68px; margin:0 auto 16px; background:var(--paper); mask:var(--drawing) center / contain no-repeat; -webkit-mask:var(--drawing) center / contain no-repeat; opacity:.8; }
.engraving img { animation:none; }
.chapter:is(#crab,#lobster) .section-drawing { display:none; }
.allergen-detail { display: block; }
.allergen-detail>div { overflow: visible; }
.allergen-detail p { margin:6px 0 2px; color:#8DB4E2; font:400 .65rem/1.6 var(--sans); letter-spacing:.08em; text-transform:uppercase; white-space:normal; }
.allergen-note { display:block; color:var(--paper-3); text-transform:none; letter-spacing:0; }
.allergy-guest { text-align:center; font-style:italic; color:var(--paper-3); font-size:1rem; margin:28px 0 0; }
.wrap-list { gap:8px 14px; }
.wrap-list li { white-space:normal; max-width:100%; }
.wrap-list li:not(:last-child)::after { content:none; }
html:not(.js) .compass,html:not(.js) [data-tide-open] { display:none; }
html:not(.js) .allergen-detail { grid-template-rows:1fr; opacity:1; }
.compass { position:fixed; z-index:12; right:max(16px,env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:44px 58px 44px; align-items:center; gap:5px; padding:6px; border-radius:40px; background:var(--ink); }
.compass button,.index-close { display:grid; place-items:center; width:44px; height:44px; padding:6px; cursor:pointer; background:none; border:0; color:var(--paper); font:28px var(--serif); border-radius:50%; }
.compass button:disabled { opacity:.25; cursor:default; }
.compass .compass-open { width:58px; height:58px; border:1px solid rgba(242,239,234,.4); background:#161618; }
.compass-open svg { width:32px; height:32px; fill:none; stroke:var(--paper); stroke-width:1; }
.current-section { position:absolute; bottom:100%; right:6px; width:220px; padding:6px 10px; background:var(--ink); text-align:right; font:400 .65rem/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; }
.t-text-soft { display:inline-grid; justify-items:end; }
.t-text-soft>span { grid-area:1/1; transition:opacity var(--text-soft-dur) var(--text-soft-ease); }
.t-text-soft-new,.t-text-soft.is-swapping .t-text-soft-old { opacity:0; }
.t-text-soft.is-swapping .t-text-soft-new { opacity:1; }
.td-lock .compass,.td-lock .sky-band,.td-lock .sea-band { visibility:hidden; }
.index-lock { overflow:hidden; }
#section-index { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)); border:0; background:var(--ink); color:var(--paper); overflow:auto; }
#section-index::backdrop { background:rgba(0,0,0,.7); }
#section-index>header { display:flex; align-items:center; justify-content:space-between; max-width:600px; margin:0 auto 10px; }
#index-title { margin:0; font-size:1.9rem; font-weight:400; }
#section-index nav { max-width:600px; margin:auto; display:grid; }
#section-index a { display:grid; grid-template-columns:44px 1fr 26px; gap:14px; align-items:center; min-height:48px; padding:5px 8px; text-decoration:none; border-bottom:1px solid var(--hair); font-size:1.2rem; line-height:1.18; }
#section-index a[aria-current] { color:#8DB4E2; }
#section-index a .section-drawing,#section-index a .mk { width:38px; height:34px; margin:0; visibility:visible; }
#section-index a small { font:10px var(--sans); color:var(--paper-3); }
.t-modal { transform-origin:center; transform:scale(var(--modal-scale)); opacity:0; pointer-events:none; transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease); will-change:transform,opacity; }
.t-modal.is-open { transform:scale(1); opacity:1; pointer-events:auto; }
.t-modal.is-closing { transform:scale(var(--modal-scale-close)); opacity:0; pointer-events:none; transition:transform var(--modal-close-dur) var(--modal-ease),opacity var(--modal-close-dur) var(--modal-ease); }
@media(prefers-reduced-motion:no-preference) { #section-index.is-open a { animation:index-in 250ms var(--ease-smooth-out) both; animation-delay:calc(var(--order)*40ms); } }
@keyframes index-in { from { opacity:0; transform:translateY(8px); } }
/* Fixed engraved edge scenes. Reading surfaces sit above the drawings, never vice versa. */
.sky-band,.sea-band { position:fixed; pointer-events:none; z-index:1; left:0; right:0; overflow:hidden; }
.sky-band { top:56px; height:90px; }
.sea-band { bottom:calc(4px + env(safe-area-inset-bottom)); height:120px; }
.scene-piece { position:absolute; display:block; background:var(--paper); mask:var(--drawing) center/contain no-repeat; -webkit-mask:var(--drawing) center/contain no-repeat; opacity:0; }
.gull { width:44px; height:38px; left:20px; top:6px; }
.dhow { width:72px; height:70px; right:26px; top:8px; }
.octopus { width:90px; height:84px; left:26px; bottom:4px; }
.school { width:100px; height:62px; left:30px; bottom:10px; }
.catch { position:absolute; width:160px; height:120px; left:8px; bottom:0; opacity:0; }
.fisherman { width:120px; height:64px; top:0; left:0; opacity:1; }
.fish-hooked { width:30px; height:38px; left:115px; top:74px; opacity:1; }
.fishing-line { position:absolute; inset:0; width:160px; height:120px; }
.fishing-line path { fill:none; stroke:var(--paper); stroke-width:.7; stroke-dasharray:1; stroke-dashoffset:0; }
/* Opaque text surfaces preserve legibility when a scene passes behind the column. */
.dish,.ch-head,.bsec>header,.mh,.story,.phon,.ask,.rv-line,.allergy-guest,.sg,.wrap-list { background:var(--ink); }
#beginnings { view-timeline:--gull block; } #raws { view-timeline:--octopus block; } #sea { view-timeline:--catch block; } #events { view-timeline:--dhow block; } #social { view-timeline:--school block; }
@supports(animation-timeline:view()) { @media(prefers-reduced-motion:no-preference) {
 .gull { animation:glide linear both; animation-timeline:--gull; }
 .octopus { animation:swim linear both; animation-timeline:--octopus; }
 .dhow { animation:glide linear both; animation-timeline:--dhow; }
 .school { animation:swim-back linear both; animation-timeline:--school; }
 .catch { animation:catch-visible linear both; animation-timeline:--catch; }
 .fish-hooked { animation:hook linear both; animation-timeline:--catch; }
 .fishing-line path { animation:cast linear both; animation-timeline:--catch; }
} }
@keyframes glide { 0% { opacity:0; transform:translateX(-12px); } 15%,85% { opacity:.5; } 100% { opacity:0; transform:translateX(50px); } }
@keyframes swim { 0% { opacity:0; transform:translateX(-20px) rotate(-5deg); } 15%,85% { opacity:.45; } 100% { opacity:0; transform:translateX(28px) rotate(5deg); } }
@keyframes swim-back { 0% { opacity:0; transform:translateX(30px); } 15%,85% { opacity:.45; } 100% { opacity:0; transform:translateX(-22px); } }
@keyframes catch-visible { 0%,100% { opacity:0; } 10%,90% { opacity:.55; } }
@keyframes cast { 0% { stroke-dashoffset:1; } 35%,45% { stroke-dashoffset:0; } 90%,100% { stroke-dashoffset:1; } }
@keyframes hook { 0%,35% { transform:translate(0,0); opacity:0; } 45% { opacity:1; transform:translate(0,0); } 90%,100% { transform:translate(-26px,-73px); opacity:0; } }
@media(min-width:800px) { .sky-band .gull { left:calc(50% - 370px); } .dhow { right:calc(50% - 375px); } .sea-band { left:max(0px,calc(50% - 510px)); } .section-drawing { width:100px; height:80px; } }
@media(prefers-reduced-motion:reduce) { .scene-piece { opacity:0; transform:none!important; } .gull,.octopus { opacity:.4; } .catch { opacity:0; } .t-modal,.t-text-soft>span { transition:none!important; } }
/* New result-card engravings, inherited from the same ink. */
.td-reel:nth-child(3)::before,.td-reel:nth-child(4)::before { content:""; width:38px; height:26px; background:var(--paper); mask:var(--result-art) center/contain no-repeat; -webkit-mask:var(--result-art) center/contain no-repeat; opacity:.65; }
.td-reel:nth-child(3) { --result-art:url('../assets/illus/sections/wine.webp'); }
.td-reel:nth-child(4) { --result-art:url('../assets/illus/sections/dessert.webp'); }
/* Only transform/opacity on large surfaces; the accordion is the requested height exception. */
.t-skel-content,.t-skel-skeleton,.t-acc-panel-inner { filter:none!important; transition-property:opacity; }
.water { animation:none; }
@supports(animation-timeline:scroll()) { @media(prefers-reduced-motion:no-preference) { .water { animation:tide linear both; animation-timeline:scroll(root); } } }
/* Text sinks softly under the compass instead of running into it (Dion's review, 16 Oct). */
.compass::before { content:''; position:fixed; left:0; right:0; bottom:0; height:calc(132px + env(safe-area-inset-bottom)); z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom, rgba(14,14,16,0) 0%, rgba(14,14,16,.82) 55%, var(--ink) 100%); }
/* Dion 16 Oct: no plates behind the text; one fluid black page. Drawings go faint where they cross words. */
.dish,.ch-head,.bsec>header,.mh,.story,.phon,.ask,.rv-line,.allergy-guest,.sg,.wrap-list { background:none; }
.compass { background:none; }
.current-section { background:none; }
:root { --scene-max:.16; }
@media(min-width:900px) { :root { --scene-max:.4; } }
@keyframes glide { 0% { opacity:0; transform:translateX(-12px); } 15%,85% { opacity:var(--scene-max); } 100% { opacity:0; transform:translateX(50px); } }
@keyframes swim { 0% { opacity:0; transform:translateX(-20px) rotate(-5deg); } 15%,85% { opacity:var(--scene-max); } 100% { opacity:0; transform:translateX(28px) rotate(5deg); } }
@keyframes swim-back { 0% { opacity:0; transform:translateX(30px); } 15%,85% { opacity:var(--scene-max); } 100% { opacity:0; transform:translateX(-22px); } }
@keyframes catch-visible { 0%,100% { opacity:0; } 10%,90% { opacity:calc(var(--scene-max) + .1); } }
/* Dion 16 Oct: the rising sea had a hard top line; it now fades in from nothing, like mist on water. */
.water { background:none; -webkit-mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 90px, #000 220px); mask-image:linear-gradient(to bottom, transparent 0, rgba(0,0,0,.35) 90px, #000 220px);
  -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-position:0 0; mask-position:0 0; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
/* The section name sits beside the compass, inside the dark fade, never over a price. */
.current-section { bottom:auto; top:50%; right:100%; transform:translateY(-50%); width:auto; max-width:calc(100vw - 210px); margin-right:6px; padding:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }