/* Cafe Ukha: a vintage nautical chart of the Black Sea coast by Batumi.
   Chart paper, deep ink blue, coral red for routes and markers, a sea-green tint for the shallows.
   The page is one chart sheet: neat lines with a degree scale frame it, a faint graticule lies under the text,
   depth contours divide the sections and grow deeper as you scroll, down to the deep water of the footer.
   Motion: the compass rose spins and settles on north, rhumb lines shoot out, a dotted route draws from the sea
   to the cafe's marker and the pin drops; fish swim along the isobaths; contours ripple as sections arrive;
   hover makes the bowl of ukha steam and the marker hop; pages unroll like a chart (View Transitions).
   Rule: the base style is always the FINAL state; animations only describe the way there,
   so reduced motion (and no JS) shows a complete, static page. */

@font-face { font-family: "Old Standard TT"; src: url("/fonts/old-standard.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2010-2033, U+2039-203A, U+20BD, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Old Standard TT"; src: url("/fonts/old-standard-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2010-2033, U+2039-203A, U+20BD, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Old Standard TT"; src: url("/fonts/old-standard-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0400-045F, U+0490-0491, U+2010-2033, U+2039-203A, U+20BD, U+2116, U+2122, U+2190-2193, U+2212; }
@font-face { font-family: "Noto Serif Georgian"; src: url("/fonts/noto-serif-georgian.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F; }

:root {
  --paper: #f1e7cf; --paper-hi: #f7f0de; --paper-2: #e9dcbc; --land: #ebdcb4;
  --ink: #1c3553; --ink-2: #2b4a6f; --muted: #4a5d74; --deep: #16304e;
  --rule: rgba(28, 53, 83, .2); --rule-2: rgba(28, 53, 83, .42);
  --coral: #d2553f; --coral-ink: #a83c29; --btn: #b5452f; --btn-hi: #973522;
  --shoal: #cfe0d6; --shoal-2: #dfe6d3;
  --text: "Old Standard TT", "Noto Serif Georgian", Georgia, "Times New Roman", serif;
  --wrap: 1180px; --gutter: clamp(16px, 4vw, 40px); --band: 7px;
  --ease: cubic-bezier(.2, .7, .2, 1); --swing: cubic-bezier(.55, 0, .15, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .32 0 0 0 0 .16 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 1rem; }
body {
  margin: 0; color: var(--ink); font: 400 1.1875rem/1.6 var(--text); overflow-x: clip;
  background-color: var(--paper);
  background-image: var(--grain),
    radial-gradient(110% 70% at 0% 0%, rgba(150, 110, 50, .12), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(150, 110, 50, .14), transparent 60%),
    linear-gradient(90deg, rgba(28, 53, 83, .05) 1px, transparent 1px),
    linear-gradient(rgba(28, 53, 83, .05) 1px, transparent 1px);
  background-size: 180px 180px, auto, auto, 160px 160px, 160px 160px;
  background-attachment: scroll;
}
.lang-ka { font-size: 1.0625rem; line-height: 1.7; }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--coral); transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--coral-ink); }
:focus-visible { outline: 2.5px solid var(--coral); outline-offset: 3px; border-radius: 2px; }
.site-footer :focus-visible { outline-color: #f1c6b6; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: .6rem 1rem; z-index: 50; }
.skip:focus { top: 8px; }
.nw { white-space: nowrap; }

h1, h2, h3 { font-weight: 400; line-height: 1.05; margin: 0; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.4vw, 4.9rem); letter-spacing: -.012em; }
h2 { font-size: clamp(2rem, 3.8vw, 3.1rem); letter-spacing: -.005em; }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.25; }
.lang-ka h1, .lang-ka h2 { font-weight: 600; line-height: 1.25; letter-spacing: 0; }
.lang-ka h1 { font-size: clamp(2rem, 3.9vw, 3.3rem); }
.lang-ka h2 { font-size: clamp(1.55rem, 2.8vw, 2.2rem); }
.lang-ka h3 { letter-spacing: .02em; text-transform: none; font-size: 1.05rem; }
p { margin: 0 0 1rem; }

/* ---------- the chart sheet: neat lines with a degree scale ---------- */
.sheet {
  position: relative; margin: 12px 12px 0; padding: calc(var(--band) + 6px) 0 0; border: 1.5px solid var(--ink); border-bottom: 0;
  background:
    repeating-linear-gradient(to bottom, var(--ink) 0 48px, transparent 48px 96px) left top / var(--band) 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 48px, var(--ink) 48px 96px) right top / var(--band) 100% no-repeat,
    repeating-linear-gradient(to right, var(--ink) 0 48px, transparent 48px 96px) left top / 100% var(--band) no-repeat;
}
.sheet::before { content: ""; position: absolute; inset: var(--band) var(--band) 0; border: 1px solid var(--ink); border-bottom: 0; pointer-events: none; }
.page-chooser .sheet, .page-404 .sheet { margin-bottom: 12px; border-bottom: 1.5px solid var(--ink); padding-bottom: calc(var(--band) + 6px); background:
    repeating-linear-gradient(to bottom, var(--ink) 0 48px, transparent 48px 96px) left top / var(--band) 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 48px, var(--ink) 48px 96px) right top / var(--band) 100% no-repeat,
    repeating-linear-gradient(to right, var(--ink) 0 48px, transparent 48px 96px) left top / 100% var(--band) no-repeat,
    repeating-linear-gradient(to right, transparent 0 48px, var(--ink) 48px 96px) left bottom / 100% var(--band) no-repeat; }
.page-chooser .sheet::before, .page-404 .sheet::before { inset: var(--band); border-bottom: 1px solid var(--ink); }
@media (max-width: 760px) { :root { --band: 5px; } .sheet { margin: 6px 6px 0; } .page-chooser .sheet, .page-404 .sheet { margin-bottom: 6px; } }

.site-header, .section, .hero, .page-head, .footer-inner, .band-inner, .chooser { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------- header ---------- */
.site-header { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.8rem; padding: 1rem 0 .9rem; border-bottom: 1px solid var(--rule); view-transition-name: header; }
/* the cafe's own lockup, as on its menus: კაფე „უხა“, the pot, CAFE “UKHA” */
.logo { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; }
.logo-art { display: block; width: auto; height: 50px; overflow: visible; }
.logo-mark { flex: none; overflow: visible; }
.nav { display: flex; gap: 1.7rem; margin-inline-start: auto; font-size: .86rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.lang-ka .nav { letter-spacing: .02em; text-transform: none; font-size: 1rem; font-weight: 600; }
.nav a { position: relative; color: var(--ink); text-decoration: none; padding: .35rem 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: radial-gradient(circle, var(--coral) 1.5px, transparent 1.8px) left center / 8px 4px repeat-x; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: none; }
.lang { display: flex; gap: .15rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.lang a { color: var(--muted); text-decoration: none; padding: .3rem .45rem; border: 1px solid transparent; }
.lang a:hover { border-color: var(--rule-2); color: var(--ink); }
.lang a[aria-current="true"] { color: var(--paper); background: var(--ink); }
@media (max-width: 760px) {
  .site-header { column-gap: .5rem; padding: .7rem 0 .55rem; }
  .site-header .head-call { display: none; }
  .logo { flex: 1 1 auto; }
  .logo-art { height: 40px; }
  .lang { order: 2; }
  .nav { order: 3; flex: 1 0 100%; margin: 0; gap: 1.2rem; font-size: .78rem; letter-spacing: .12em; }
  .lang-ka .nav { font-size: .95rem; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 50px;
  padding: .7rem 1.4rem; font: 700 1.02rem/1.2 var(--text); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  color: #fff8ec; background: var(--btn); border: 1.5px solid var(--btn); border-radius: 3px;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { color: #fff8ec; background: var(--btn-hi); border-color: var(--btn-hi); transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgba(28, 53, 83, .8); }
.btn:active { transform: none; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--shoal); color: var(--ink); border-color: var(--ink); }
.btn-sm { min-height: 42px; padding: .4rem 1.1rem; font-size: .95rem; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin: 1.8rem 0; }
.cta-row.center { justify-content: center; }

/* ---------- hero ---------- */
.hero { display: grid; gap: 2.2rem 4rem; align-items: center; padding: clamp(1.6rem, 4vw, 3.2rem) 0 clamp(2rem, 4vw, 3rem); }
@media (min-width: 940px) { .hero { grid-template-columns: 1.04fr .96fr; } }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.2rem; font-weight: 700; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--coral-ink); }
.eyebrow::before, .eyebrow::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.lang-ka .eyebrow { letter-spacing: .04em; text-transform: none; font-size: .95rem; }
.lede { font-style: italic; font-size: 1.28rem; line-height: 1.55; max-width: 31em; margin-top: 1.4rem; color: var(--muted); }
.lang-ka .lede { font-style: normal; font-size: 1.1rem; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem 2.2rem; padding: .9rem 0 0; margin: 0; border-top: 1px solid var(--rule-2); }
.facts li { display: grid; gap: .1rem; font-size: 1rem; line-height: 1.3; white-space: nowrap; }
.facts-k { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--coral-ink); }
.lang-ka .facts-k { letter-spacing: .02em; text-transform: none; font-size: .8rem; }
@media (max-width: 640px) {
  .facts { flex-direction: column; gap: .7rem; }
  .facts li { white-space: normal; }
  .hero .cta-row .btn { flex: 1 1 100%; }
}
.hero-visual { justify-self: center; width: min(100%, 560px); }
.map-credit { margin: .45rem 0 0; font-size: .78rem; line-height: 1.3; text-align: end; color: var(--muted); }
.map-credit a { color: var(--muted); text-decoration-color: var(--rule-2); }
.hero-art { position: relative; }
.chart { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 30px rgba(28, 53, 83, .22)); }
.chart text { font-family: var(--text); }
.chart .cart-sub { font-size: 13px; font-style: italic; fill: var(--ink-2); }
.lang-ka .chart .cart-sub { font-size: 9.5px; font-style: normal; letter-spacing: 0; }
/* the maps from OpenStreetMap (hero chart and plans): land names upright, water names in italic, as on old charts.
   Labels are placed at build time at the size set on their group (the phone size); wide screens letter them smaller. */
.chart .names text, .plan .names text { font-family: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--paper-hi); stroke-width: 3.6px; stroke-linejoin: round; }
.chart .osm-st text, .plan .osm-st text { dominant-baseline: central; fill: var(--ink-2); letter-spacing: .01em; }
.chart .osm-lm text, .plan .osm-lm text { fill: var(--ink); letter-spacing: .02em; }
.chart .osm-lm .pk, .plan .osm-lm .pk { font-style: italic; fill: #46562f; }
.chart .osm-lm .pr, .plan .osm-lm .pr { dominant-baseline: central; fill: var(--ink-2); letter-spacing: .25em; }
.chart .osm-wt text, .plan .osm-wt text { font-style: italic; fill: var(--ink-2); stroke: var(--shoal); }
.chart .sea-name, .plan .sea-name { dominant-baseline: central; font-style: italic; fill: var(--ink-2); letter-spacing: .3em; stroke: var(--paper) !important; stroke-width: 5px !important; }
.chart .cafe-tag rect, .plan .cafe-tag rect { fill: var(--paper-hi); stroke: var(--coral); stroke-width: 1.5px; }
.chart .cafe-tag text, .plan .cafe-tag text { font-family: var(--text); font-weight: 700; fill: var(--ink); text-anchor: middle; letter-spacing: .03em; }
.chart .iso-l, .plan .iso-l { font-style: normal; font-weight: 700; font-size: 10px; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.chart .sbar text, .plan .sbar text { font-family: var(--text); font-size: 10px; fill: var(--ink); }
.chart .sbar, .plan .sbar { fill: var(--ink); stroke: var(--ink); stroke-width: .8px; }
.chart .sbar text, .plan .sbar text { stroke: none; }
.chart .osm-credit { font-family: var(--text); font-size: 10px; fill: var(--ink); }
.lang-ka .chart .names text, .lang-ka .plan .names text { font-style: normal; letter-spacing: 0; }
@media (min-width: 761px) {
  .chart .osm-st { font-size: 14px; }
  .chart .osm-lm { font-size: 14.5px; }
  .chart .osm-wt { font-size: 15px; }
  .plan .osm-st { font-size: 13.5px; }
  .plan .osm-lm, .plan .osm-wt { font-size: 14px; }
  .lang-ka .chart .osm-st, .lang-ka .plan .osm-st { font-size: 12.5px; }
  .lang-ka .chart .osm-lm, .lang-ka .chart .osm-wt, .lang-ka .plan .osm-lm, .lang-ka .plan .osm-wt { font-size: 13px; }
}
.chart .rh { stroke: var(--ink); stroke-width: .7; stroke-opacity: .26; stroke-dasharray: 1; }
.chart .rh-main { stroke: var(--coral); stroke-opacity: .6; stroke-width: .9; }
.chart .route-mask, .plan .route-mask { stroke-dasharray: 1; }
.rose-spin, .rose-scroll { transform-box: fill-box; transform-origin: center; }
.pin, .pin-hop { transform-box: fill-box; transform-origin: 50% 100%; }
.swim { offset-rotate: auto; }
.s1 { offset-distance: 22%; } .s2 { offset-distance: 64%; } .s3 { offset-distance: 38%; offset-rotate: reverse; } .s4 { offset-distance: 82%; }
.fish-body { transform-box: fill-box; transform-origin: 65% 50%; }
.ship-bob { transform-box: fill-box; transform-origin: 50% 90%; }
.steam { transform-box: fill-box; transform-origin: 50% 100%; }

/* hero intro: the rose spins and settles on north, rhumb lines shoot out, the route draws, the pin drops */
.hero .eyebrow { animation: fade-up .7s .05s var(--ease) backwards; }
.w { display: inline-block; animation: word-rise .9s var(--ease) backwards; animation-delay: calc(var(--i) * .08s + .15s); }
.hero .lede, .page-head .lede { animation: fade-up .8s .5s var(--ease) backwards; }
.hero .cta-row { animation: fade-up .8s .65s var(--ease) backwards; }
.hero .facts { animation: fade-up .8s .8s var(--ease) backwards; }
.hero-art .chart { animation: sheet-in 1s .05s var(--ease) backwards; }
.hero-art .rose-spin, .head-rose .rose-spin { animation: rose-spin 2.6s .2s cubic-bezier(.2, .65, .25, 1) backwards; }
.hero-art .rh, .head-rose .rh { animation: draw 1.5s var(--swing) backwards; animation-delay: calc(1.1s + var(--i) * .07s); }
.hero-art .route-mask { animation: draw 2s 2.1s var(--swing) backwards; }
.hero-art .pin { animation: pin-drop .9s 3.6s cubic-bezier(.3, .7, .4, 1) backwards; }
.hero-art .pin-label, .hero-art .names { animation: fade 1s 3.9s backwards; }
.hero-art .swim { animation: swim 52s linear infinite, fade 1.2s 2.4s backwards; }
.hero-art .s1 { animation-delay: -11s, 2.4s; } .hero-art .s2 { animation-delay: -33s, 2.6s; animation-duration: 64s, 1.2s; }
.hero-art .s3 { animation-delay: -20s, 2.8s; animation-duration: 70s, 1.2s; animation-direction: reverse, normal; } .hero-art .s4 { animation-delay: -42s, 3s; animation-duration: 58s, 1.2s; }
.hero-art .fish-body { animation: wiggle .9s ease-in-out infinite alternate; }
.hero-art .ship-bob { animation: bob 5s ease-in-out infinite; }
@supports (animation-timeline: scroll()) {
  .hero-art .rose-scroll { animation: rose-turn linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
}
@media (hover: hover) {
  .hero-visual:hover .pin-hop, .hero:has(.btn-route:hover) .pin-hop, .where:has(.btn-route:hover) .pin-hop, .where-plan:hover .pin-hop, .map:hover .pin-hop { animation: pin-hop .9s var(--ease); }
  .logo:hover .steam, .hero-visual:hover .steam, .footer-brand:hover .steam { animation: steam 1.4s ease-in-out infinite; }
}
/* endless motion rests when nobody can see it */
.hero-art.off *, .tab-hidden .hero-art * { animation-play-state: paused !important; }

@keyframes fade { from { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes word-rise { from { opacity: 0; transform: translateY(.4em); } }
@keyframes sheet-in { from { opacity: 0; transform: translateY(12px) rotate(-.8deg); } }
@keyframes draw { from { stroke-dashoffset: 1; } }
@keyframes rose-spin { 0% { transform: rotate(-320deg) scale(.55); opacity: 0; } 12% { opacity: 1; } 68% { transform: rotate(16deg) scale(1.02); } 84% { transform: rotate(-6deg) scale(1); } 94% { transform: rotate(2deg); } 100% { transform: none; } }
@keyframes rose-turn { to { transform: rotate(45deg); } }
@keyframes pin-drop { 0% { transform: translateY(-70px); opacity: 0; } 30% { opacity: 1; } 62% { transform: translateY(0) scale(1.08, .86); } 80% { transform: translateY(-9px) scale(.97, 1.04); } 100% { transform: none; } }
@keyframes pin-hop { 35% { transform: translateY(-14px); } 62% { transform: translateY(0) scale(1.06, .9); } 80% { transform: translateY(-4px); } }
@keyframes swim { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes wiggle { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes bob { 0%, 100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(2px); } }
@keyframes steam { 50% { transform: translateY(-8%) scaleY(1.08); opacity: .55; } }

/* ---------- isobaths between sections ---------- */
.isobath { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin: 0 auto; height: 60px; overflow: hidden; }
.isobath svg { display: block; width: 100%; height: 60px; }
.isobath text { font: italic 400 14px var(--text); fill: var(--coral-ink); paint-order: stroke; stroke: var(--paper); stroke-width: 9px; stroke-linejoin: round; }
.isobath .s { stroke-dasharray: 1; transition: stroke-dashoffset 1.7s var(--swing); transition-delay: calc(var(--i) * .2s); }
.isobath text { transition: opacity .8s .6s; }
html.js:not(.no-hide) .isobath:not(.in) .s { stroke-dashoffset: 1; }
html.js:not(.no-hide) .isobath:not(.in) text { opacity: 0; }

/* ---------- sections ---------- */
.section { padding: clamp(2.6rem, 6vw, 4.6rem) 0; }
.sec-head { text-align: center; max-width: 46rem; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.kicker { margin: 0 0 .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--coral-ink); }
.lang-ka .kicker { letter-spacing: .04em; text-transform: none; font-size: .95rem; }
.ornament { display: block; width: 150px; height: 9px; margin: 1rem auto 0; background:
  linear-gradient(var(--ink), var(--ink)) left center / 62px 1px no-repeat,
  linear-gradient(var(--ink), var(--ink)) right center / 62px 1px no-repeat,
  linear-gradient(45deg, transparent 35%, var(--coral) 35% 65%, transparent 65%) center / 9px 9px no-repeat,
  linear-gradient(-45deg, transparent 35%, var(--coral) 35% 65%, transparent 65%) center / 9px 9px no-repeat; }
.section-intro { font-style: italic; font-size: 1.2rem; color: var(--muted); margin: 1.1rem auto 0; max-width: 38em; text-wrap: pretty; }
.lang-ka .section-intro { font-style: normal; font-size: 1.05rem; }
.more { margin-top: 2.2rem; font-weight: 700; }
.center { text-align: center; }

/* soundings: the share of positive reviews printed like a depth on a chart, ringed by contours */
.soundings { list-style: none; padding: 0; margin: 0 auto; max-width: 980px; display: grid; gap: clamp(1rem, 3vw, 2.4rem) clamp(.6rem, 2vw, 1.6rem); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .soundings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sounding h3 { font-size: .92rem; letter-spacing: .08em; }
  .sounding p { font-size: .85rem; }
}
.sounding { display: grid; justify-items: center; text-align: center; align-content: start; }
.sounding-mark { position: relative; width: min(196px, 100%); aspect-ratio: 1; display: grid; place-items: center; }
.rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rg { transform-box: fill-box; transform-origin: center; transition: transform 1.3s var(--ease), opacity 1s var(--ease); transition-delay: calc(var(--i, 0) * .1s + var(--k) * .16s); }
.sounding-num { position: relative; font-style: italic; font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1; color: var(--ink); white-space: nowrap; }
.sounding h3 { margin-top: .2rem; }
.sounding p { margin: .25rem 0 0; font-size: .95rem; font-style: italic; color: var(--muted); }
.lang-ka .sounding p { font-style: normal; font-size: .9rem; }
html.js:not(.no-hide) .sounding:not(.in) .rg { transform: scale(.35); opacity: 0; }
html.js:not(.no-hide) .sounding:not(.in) .sounding-num { opacity: 0; }
.sounding-num { transition: opacity .6s .3s; }

/* plates: dishes as numbered figures, the way a chart's margin shows the local fish */
.plates { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .plates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .plates { grid-template-columns: 1fr; } }
.plate { position: relative; display: flex; flex-direction: column; padding: .7rem .7rem 1.3rem; background: var(--paper-hi); border: 1px solid var(--rule-2); box-shadow: inset 0 0 0 4px var(--paper-hi), inset 0 0 0 5px var(--rule); transition: transform .4s var(--ease), box-shadow .4s var(--ease), clip-path 1.1s var(--swing); transition-delay: 0s, 0s, calc(var(--i) * .12s); }
.plate-fig { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin-bottom: 1rem; background: var(--shoal-2); border-bottom: 1px solid var(--rule); }
.plate-fig .ill { width: 82%; height: auto; overflow: visible; }
.fig-no { position: absolute; left: .55rem; top: .35rem; font-style: italic; font-size: .82rem; color: var(--muted); }
.lang-ka .fig-no { font-style: normal; font-size: .78rem; }
.plate h3 { padding: 0 .6rem; }
.plate h3 a { color: inherit; text-decoration: none; }
.plate h3 a::after { content: ""; position: absolute; inset: 0; } /* the whole teaser card is the link */
.plate p { margin: .5rem 0 0; padding: 0 .6rem; font-size: 1rem; line-height: 1.5; color: var(--muted); }
@media (hover: hover) {
  .plate:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 4px var(--paper-hi), inset 0 0 0 5px var(--rule), 0 22px 34px -26px rgba(28, 53, 83, .7); }
  .plate:hover .ill { animation: drift 1.6s ease-in-out infinite alternate; }
  .plate:hover h3 a { color: var(--coral-ink); }
}
@keyframes drift { from { transform: translateX(-3px) rotate(-1.5deg); } to { transform: translateX(3px) rotate(1.5deg); } }
.ill .s { stroke-dasharray: 1; transition: stroke-dashoffset 1.4s var(--swing); transition-delay: calc(.35s + var(--i, 0) * .12s); }
.ill .thin { stroke-width: 1; }
.ill .f { transition: opacity .7s; transition-delay: calc(1.1s + var(--i, 0) * .12s); }
/* a plate surfaces from the bottom, then its figure is inked */
html.js:not(.no-hide) .plate:not(.in) { clip-path: inset(96% 0 0 0); }
html.js:not(.no-hide) .plate:not(.in) .ill .s, html.js:not(.no-hide) .dish:not(.in) .ill .s { stroke-dashoffset: 1; }
html.js:not(.no-hide) .plate:not(.in) .ill .f, html.js:not(.no-hide) .dish:not(.in) .ill .f { opacity: 0; }

/* legend: services as chart symbols */
.legend-sec { display: grid; gap: 2rem 4rem; align-items: start; }
@media (min-width: 900px) { .legend-sec { grid-template-columns: .9fr 1.1fr; } }
.legend-copy .section-intro { margin-inline: 0; }
.legend-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.legend-row { display: grid; grid-template-columns: 92px 1fr; gap: 1.1rem; align-items: center; padding: .9rem 0; border-bottom: 1px dashed var(--rule-2); }
.sym { display: grid; place-items: center; width: 92px; height: 66px; border: 1px solid var(--rule-2); background: var(--paper-hi); }
.ill-sym { width: 84px; height: auto; }
.legend-text { line-height: 1.45; }
@media (max-width: 520px) { .legend-row { grid-template-columns: 70px 1fr; gap: .9rem; } .sym { width: 70px; height: 52px; } .ill-sym { width: 64px; } }
.legend-text strong { display: block; font-size: .92rem; letter-spacing: .14em; text-transform: uppercase; }
.lang-ka .legend-text strong { letter-spacing: .02em; text-transform: none; font-size: 1rem; }

/* ratings band: the shallows, with a ship's compass bezel behind each mark */
.band { position: relative; margin-inline: calc(var(--band) + 1px); background: var(--shoal); border-block: 1px solid var(--rule-2); padding: clamp(2.6rem, 6vw, 4.4rem) 0; }
.band::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-32deg, transparent 0 22px, rgba(28, 53, 83, .045) 22px 23px); pointer-events: none; }
.band-inner { position: relative; }
.band .section-intro { color: #3e5169; }
.ratings { display: grid; gap: 1.6rem 3rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 300px)); justify-content: center; }
.rating { position: relative; display: grid; justify-items: center; align-content: center; gap: .2rem; aspect-ratio: 1; padding: 2rem; text-align: center; color: var(--ink); text-decoration: none; }
.rating .bezel { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); transition: transform 1.4s var(--swing), opacity .8s; transition-delay: calc(var(--i) * .15s); }
.rating::before { content: ""; position: absolute; inset: 15%; border-radius: 50%; background: var(--paper-hi); box-shadow: 0 0 0 1px var(--rule-2); transition: transform .4s var(--ease); }
.rating > span { position: relative; }
.rating-src { font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--coral-ink); }
.lang-ka .rating-src { letter-spacing: .03em; }
.rating-num { font-style: italic; font-size: clamp(3.6rem, 7vw, 4.6rem); line-height: .95; }
.rating-count { font-size: .98rem; }
.rating-open { margin-top: .3rem; font-size: .85rem; font-weight: 700; text-decoration: underline; text-decoration-color: var(--coral); text-underline-offset: 4px; }
.count { font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .rating:hover { color: var(--ink); }
  .rating:hover .bezel { transform: rotate(45deg); transition-delay: 0s; }
  .rating:hover::before { transform: scale(1.04); }
}
html.js:not(.no-hide) .rating:not(.in) .bezel { transform: rotate(-150deg); opacity: 0; }

/* where: a log entry and a plan of the spot */
.where { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 900px) { .where { grid-template-columns: 1fr 1fr; } }
.where-copy .section-intro { margin-inline: 0; }
.logbook { font-style: normal; margin: 1.6rem 0 0; border-top: 1px solid var(--rule-2); }
.logbook p { display: grid; grid-template-columns: minmax(7.5rem, 30%) 1fr; gap: .2rem 1rem; margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--rule); }
.lbl { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--coral-ink); padding-top: .3rem; }
.lang-ka .lbl { letter-spacing: .02em; text-transform: none; font-size: .85rem; padding-top: .1rem; }
@media (max-width: 480px) { .logbook p { grid-template-columns: 1fr; } }
.coords { font-style: italic; font-variant-numeric: tabular-nums; }
.tel { font-weight: 700; white-space: nowrap; color: var(--ink); }
.where-map { margin: 0; }
.where-plan { border: 1px solid var(--ink); padding: 6px; background: var(--paper-hi); box-shadow: 0 24px 36px -30px rgba(28, 53, 83, .7); }
.plan { display: block; width: 100%; height: auto; border: 1px solid var(--rule-2); }
.plan .cross { transform-box: fill-box; transform-origin: center; transition: transform 1.6s var(--swing), opacity 1s; }
.where-plan .pin { transition: transform .9s cubic-bezier(.3, .7, .4, 1.3) .5s, opacity .5s .5s; }
.where-plan .route-mask, .map-fig .route-mask { transition: stroke-dashoffset 1.8s var(--swing) .9s; }
html.js:not(.no-hide) .where-plan:not(.in) .cross { transform: rotate(-90deg) scale(1.6); opacity: 0; }
html.js:not(.no-hide) .where-plan:not(.in) .pin { transform: translateY(-50px); opacity: 0; }
html.js:not(.no-hide) .where-plan:not(.in) .route-mask, html.js:not(.no-hide) .map-fig:not(.in) .route-mask { stroke-dashoffset: 1; }
/* the walk line under a map echoes the dotted route on it */
.walk { position: relative; margin: 1rem 0 0; padding-inline-start: 2.6rem; font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); }
.walk::before { content: ""; position: absolute; left: 0; top: .72em; width: 2rem; height: 4px; background: radial-gradient(circle, var(--coral) 1.7px, transparent 2px) left center / 7px 4px repeat-x; }
.lang-ka .walk { font-size: 1rem; }

/* FAQ */
.qa-list { max-width: 50rem; margin: 0 auto; border-top: 1px solid var(--rule-2); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.1rem .2rem; font-size: 1.35rem; line-height: 1.25; }
.lang-ka .qa summary { font-size: 1.1rem; font-weight: 600; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; flex: none; width: 26px; height: 26px; background:
  linear-gradient(45deg, transparent 42%, var(--coral) 42% 58%, transparent 58%) center / 11px 11px no-repeat,
  linear-gradient(-45deg, transparent 42%, var(--coral) 42% 58%, transparent 58%) center / 11px 11px no-repeat,
  radial-gradient(circle, transparent 11.5px, var(--ink) 12px 12.6px, transparent 13px); transform: rotate(45deg); transition: transform .45s var(--ease); }
.qa[open] summary::after { transform: rotate(0deg); }
.qa summary:hover { color: var(--coral-ink); }
.qa p { padding: 0 .2rem 1.2rem; margin: 0; color: var(--muted); max-width: 44em; }
.qa[open] p { animation: fade-up .45s var(--ease); }
.faq-list { display: grid; gap: 0; max-width: 54rem; counter-reset: q; padding-top: 1rem; }
.qa-full { position: relative; counter-increment: q; padding: 1.3rem 0 1.3rem 3.6rem; border-bottom: 1px solid var(--rule); }
.qa-full::before { content: "§\00a0" counter(q); position: absolute; left: 0; top: 1.45rem; font-style: italic; font-size: 1.05rem; color: var(--coral-ink); }
.qa-full h2 { font-size: clamp(1.45rem, 2.6vw, 1.85rem); line-height: 1.2; }
.lang-ka .qa-full h2 { font-size: 1.2rem; }
.qa-full p { margin: .5rem 0 0; color: var(--muted); }

/* page head (inner pages): a rose with its rhumb lines behind the title */
.page-head { position: relative; display: grid; align-items: center; min-height: clamp(220px, 30vw, 340px); padding: clamp(1.6rem, 5vw, 3.2rem) 0 clamp(1rem, 2vw, 1.6rem); overflow: hidden; }
.page-head-copy { position: relative; z-index: 1; max-width: 40rem; }
.head-rose { position: absolute; right: -2%; top: 50%; width: min(620px, 62%); height: auto; transform: translateY(-50%); opacity: .95; }
.head-rose .rh { stroke: var(--ink); stroke-width: .8; stroke-opacity: .2; stroke-dasharray: 1; }
.head-rose .rh-main { stroke: var(--coral); stroke-opacity: .5; }
@media (max-width: 760px) { .head-rose { width: 120%; right: -48%; opacity: .32; } }
.crumbs { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--coral-ink); margin-bottom: 1rem; }
.lang-ka .crumbs { letter-spacing: .03em; text-transform: none; font-size: .92rem; }
.crumbs a { color: var(--coral-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* menu: one framed chart sheet, sections as numbered areas, dishes as figures */
.chart-sheet { width: min(1080px, 100% - 2 * var(--gutter)); margin: clamp(1.4rem, 4vw, 2.6rem) auto 0; padding: clamp(1.6rem, 5vw, 3.4rem) clamp(1rem, 4vw, 3.4rem); background: var(--paper-hi); border: 1px solid var(--ink); box-shadow: inset 0 0 0 6px var(--paper-hi), inset 0 0 0 7px var(--rule-2), 0 30px 50px -44px rgba(28, 53, 83, .8); }
.menu-section + .menu-section { margin-top: clamp(2.2rem, 5vw, 3.4rem); }
.menu-section h2 { display: flex; align-items: baseline; gap: .8rem; padding-bottom: .6rem; border-bottom: 1px solid var(--rule-2); font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.sec-no { font-style: italic; font-size: .55em; color: var(--coral-ink); }
.menu-list { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; gap: 0 3rem; }
@media (min-width: 860px) { .menu-list { grid-template-columns: 1fr 1fr; } }
.dish { display: grid; grid-template-columns: 132px 1fr; gap: 1.2rem; align-items: center; padding: 1.2rem 0; border-bottom: 1px dashed var(--rule-2); scroll-margin-top: 1.5rem; }
.dish-fig { display: grid; place-items: center; aspect-ratio: 16 / 11; background: var(--shoal-2); border: 1px solid var(--rule); }
.dish-fig .ill { width: 90%; height: auto; }
.dish .fig-no { position: static; margin: 0 0 .2rem; }
.dish p { margin: .35rem 0 0; color: var(--muted); font-size: 1.02rem; line-height: 1.5; }
.vignette { display: none; }
@media (min-width: 860px) { .vignette { display: grid; place-items: center; padding: 1rem; } .vignette .ill { width: 150px; height: auto; opacity: .85; } }
.dish:target .dish-fig { outline: 2px solid var(--coral); outline-offset: 3px; }
@media (max-width: 480px) { .dish { grid-template-columns: 96px 1fr; gap: .9rem; } }

/* contacts */
.contact-grid { display: grid; gap: 1.5rem; }
@media (min-width: 840px) { .contact-grid { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.contact-card { padding: clamp(1.3rem, 3vw, 2.2rem); background: var(--paper-hi); border: 1px solid var(--ink); box-shadow: inset 0 0 0 5px var(--paper-hi), inset 0 0 0 6px var(--rule); }
.contact-card h2 { font-size: clamp(1.8rem, 3vw, 2.3rem); margin-bottom: .4rem; }
.contact-card h2.mt { margin-top: 2rem; }
.contact-card .logbook { margin-top: 1rem; }
.delivery-line { display: flex; align-items: center; gap: .9rem; margin: 1.1rem 0 0; }
.delivery-line .ill-sym { flex: none; width: 64px; }
.dish-text a[href$="#delivery"] { white-space: nowrap; }
.hours { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.hours th, .hours td { text-align: start; padding: .5rem 0; border-bottom: 1px dashed var(--rule-2); font-weight: 400; }
.hours td { text-align: end; font-style: italic; font-variant-numeric: tabular-nums; }
.link-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .1rem; }
.link-list a { display: inline-block; padding-block: .3rem; }
.map-fig { margin: 0; }
.map-fig figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1.5rem; }
.map-fig .walk { margin-top: .9rem; }
.map { position: relative; display: flex; flex-wrap: wrap; align-content: flex-end; align-items: flex-end; justify-content: center; gap: .9rem; aspect-ratio: 2 / 1; min-height: 380px; padding: 1.5rem 1.5rem 2rem; overflow: hidden; border: 1px solid var(--ink); background: var(--paper-hi); }
@media (max-width: 760px) { .map { aspect-ratio: auto; min-height: 460px; } }
.map .plan { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; overflow: hidden; }
.map > .btn { position: relative; }
.map > .btn-ghost { background: var(--paper-hi); }
.map iframe { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; }
.map iframe[hidden] { display: none; }
/* Yandex | Google: one segmented control; the pressed tab is the map on show */
.map-tabs { position: relative; display: inline-flex; }
.map-tabs .btn { border-radius: 0; white-space: nowrap; }
@media (max-width: 480px) { .map-tabs .btn { padding-inline: .9rem; } }
.map-tabs .btn:first-child { border-radius: 3px 0 0 3px; }
.map-tabs .btn:last-child { border-radius: 0 3px 3px 0; border-left-color: rgba(255, 248, 236, .5); }
.map-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
html:not(.js) .map-tabs { display: none; }
.map.loaded > .map-tabs { position: absolute; left: 14px; top: 14px; z-index: 2; }
.map.loaded > a.btn { position: absolute; right: 14px; bottom: 14px; z-index: 2; }
.map-open { display: flex; flex-wrap: wrap; gap: .6rem .8rem; margin: 1.2rem 0 0; }
.map-fig + .map-open { margin-top: 1rem; }

/* footer: deep water */
.site-footer { position: relative; overflow: hidden; color: rgba(241, 231, 207, .88); background: var(--ink); padding: 0 0 2.4rem; }
.footer-sea { position: absolute; inset: 0; width: 100%; height: 100%; }
.footer-sea path { vector-effect: non-scaling-stroke; }
.site-footer a { color: var(--paper); text-decoration-color: rgba(241, 198, 182, .6); }
.site-footer a:hover { color: #fff; text-decoration-color: var(--coral); }
.footer-inner { position: relative; padding-top: 2.8rem; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1.1fr 1fr; } }
.footer-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; font-weight: 700; font-size: 1.5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); }
.lang-ka .footer-brand { text-transform: none; letter-spacing: .02em; font-size: 1.35rem; }
.footer-brand .logo-mark { width: 56px; height: 52px; }
.site-footer .coords { color: rgba(241, 231, 207, .75); }
.site-footer address { font-style: normal; }
.site-footer address p { margin: 0 0 .45rem; }
.site-footer .tel { color: var(--paper); }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.footer-links a, .footer-meta a { display: inline-block; padding-block: .3rem; }
.footer-meta { margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(241, 231, 207, .2); font-size: .95rem; }

/* mobile call bar slides up after the first screen */
.cta-bar { display: none; }
@media (max-width: 760px) {
  .cta-bar { position: fixed; z-index: 20; inset: auto 0 0 0; display: flex; gap: .7rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom)); background: rgba(241, 231, 207, .97); border-top: 1.5px solid var(--ink); box-shadow: 0 -10px 30px -22px rgba(28, 53, 83, .6); transition: transform .45s var(--ease); }
  .cta-bar .btn { flex: 1; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: translateY(110%); }
  html.js .cta-bar:not(.show):focus-within { transform: none; }
  html { scroll-padding-bottom: 6rem; }
  .site-footer { padding-bottom: 6.5rem; }
}

/* root language chooser and 404 */
.chooser { display: grid; gap: 1.5rem 4rem; align-items: center; min-height: calc(100svh - 40px); padding: clamp(1.2rem, 4vw, 3rem) 0; }
@media (min-width: 900px) { .chooser { grid-template-columns: 1fr 1fr; } }
.chooser-art { justify-self: center; width: min(100%, 520px); }
@media (max-width: 899px) { .chooser-copy { order: -1; } .chooser-art { width: min(100%, 360px); } .chooser { min-height: 0; } }
.chooser-copy { text-align: center; }
.chooser h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.15; }
.chooser h1 span { display: block; }
.chooser h1 span[lang="ka"] { font-weight: 600; font-size: .82em; }
.chooser-sub { font-style: italic; color: var(--muted); margin: 1rem 0 0; }
.chooser-sub > span, .chooser .lede > span { white-space: nowrap; }
.chooser .lede { font-style: normal; margin: 1.4rem auto 0; font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--coral-ink); }
.lang-btn { min-width: 9.5rem; }
@media (max-width: 520px) { .lang-btn { min-width: 0; flex: 1 1 28%; padding-inline: .6rem; } }
.lost { grid-template-columns: 1fr !important; justify-items: center; text-align: center; align-content: center; gap: .6rem; }
.lost-art { width: min(100%, 420px); }
.lost-art .head-rose { position: static; width: 100%; transform: none; opacity: 1; }
.big-404 { margin: 0; font-style: italic; font-size: clamp(5rem, 14vw, 9rem); line-height: 1; color: var(--coral-ink); }
.page-404 h1 { font-size: clamp(1.4rem, 3vw, 2rem); }

/* ---------- scroll reveals ---------- */
.reveal { transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * .08s); }
html.js:not(.no-hide) .reveal:not(.in) { opacity: 0; transform: translateY(16px); }

/* failsafe (app.js never started): show everything at once instead of animating the way there */
html.no-hide .reveal, html.no-hide .plate, html.no-hide .rg, html.no-hide .isobath *, html.no-hide .ill *, html.no-hide .bezel { transition: none; }

/* page transitions (Chromium and Safari): the next page unrolls like a chart, the header stays put */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .5s var(--ease) both; }
::view-transition-new(root) { animation: vt-unroll .85s var(--swing) both; }
@keyframes vt-unroll { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes vt-out { to { opacity: .35; transform: scale(.985); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html.js:not(.no-hide) .reveal:not(.in) { opacity: 1; transform: none; }
  html.js:not(.no-hide) .plate:not(.in) { clip-path: none; }
  html.js:not(.no-hide) .plate:not(.in) .ill .s, html.js:not(.no-hide) .dish:not(.in) .ill .s, html.js:not(.no-hide) .isobath:not(.in) .s { stroke-dashoffset: 0; }
  html.js:not(.no-hide) .plate:not(.in) .ill .f, html.js:not(.no-hide) .dish:not(.in) .ill .f, html.js:not(.no-hide) .isobath:not(.in) text { opacity: 1; }
  html.js:not(.no-hide) .sounding:not(.in) .rg { transform: none; opacity: 1; }
  html.js:not(.no-hide) .sounding:not(.in) .sounding-num { opacity: 1; }
  html.js:not(.no-hide) .rating:not(.in) .bezel { transform: none; opacity: 1; }
  html.js:not(.no-hide) .where-plan:not(.in) .cross, html.js:not(.no-hide) .where-plan:not(.in) .pin { transform: none; opacity: 1; }
  html.js:not(.no-hide) .where-plan:not(.in) .route-mask, html.js:not(.no-hide) .map-fig:not(.in) .route-mask { stroke-dashoffset: 0; }
  html.js:not(.no-hide) .cta-bar:not(.show) { transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}