/* ==========================================================================
   Montenegroni Boat Tours — site styles (home, sub-pages, 404)
   Design: "Riva / aperitivo" — mahogany, sand & ivory, Fraunces + Jost
   ========================================================================== */

/* ---------- Fonts ----------
   Self-hosted, so a visit sends nothing to Google: the same woff2 files and unicode-range as the Google Fonts CSS
   (Fraunces, Jost, Mrs Saint Delafield; SIL Open Font License, the licence is in each font's metadata). Only the latin and
   latin-ext subsets: nothing on the site uses cyrillic or vietnamese. */
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/fraunces-italic-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 300 600; font-display: swap; src: url("../fonts/fraunces-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/fraunces-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/fraunces-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/jost-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300 600; font-display: swap; src: url("../fonts/jost-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mrs-saint-delafield-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Mrs Saint Delafield"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mrs-saint-delafield-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --ivory: #F8F3EC;
  --paper: #F1E8DC;
  --paper-2: #E9DCCB;
  --sand: #DBA581;            /* logo accent */
  --sand-2: #EBC6A6;
  --sand-deep: #8E5A39;      /* copper — AA-compliant for small text on ivory/paper */
  --mahogany: #67352C;        /* logo primary */
  --mahogany-2: #7B4134;
  --mahogany-deep: #4A241D;
  --espresso: #22120E;
  --espresso-2: #2E1914;
  --chart-sea: #1A0F0C;
  --ink: #2A1A15;
  --ink-2: #664F46;
  --ink-3: #776059;
  --line: rgba(103, 53, 44, .15);
  --line-strong: rgba(103, 53, 44, .3);
  --on-dark: #F6EEE4;
  --on-dark-2: rgba(246, 238, 228, .68);
  --on-dark-3: rgba(246, 238, 228, .45);
  --line-dark: rgba(219, 165, 129, .2);
  --wa: #25D366;
  --live: #86DB97;

  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-script: "Mrs Saint Delafield", "Snell Roundhand", cursive;

  --ease: cubic-bezier(.2, .75, .15, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --radius: 24px;
  --radius-sm: 14px;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1380px;
  /* spacing scale — 8px rhythm, airy but compact */
  --section-y: clamp(72px, 8.5vw, 128px);   /* section padding (top & bottom) */
  --space-head: clamp(40px, 4.5vw, 72px);   /* section heading → content */
  --space-grid: clamp(40px, 6vw, 96px);     /* two-column layouts */
  --space-group: clamp(48px, 5vw, 72px);    /* between content groups */
  --space-cards: clamp(16px, 1.7vw, 24px);  /* card gutters */
  --header-h: 86px;

  --noise: 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .16 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--ivory) var(--noise);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; }
::selection { background: var(--sand); color: var(--espresso); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.skip-link {
  position: fixed; left: 16px; top: 16px; z-index: 200; padding: .7em 1.2em; border-radius: 999px;
  background: var(--espresso); color: var(--on-dark); transform: translateY(-160%); transition: transform .3s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- Type ---------- */
.h2 {
  font-family: var(--font-display);
  font-weight: 340;
  font-size: clamp(2.5rem, 1.5rem + 3.7vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -.024em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
  text-wrap: balance;
}
.h2 em, .hero-title em, .finale-title em {
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.h2 em { color: var(--mahogany); }
.section--dark .h2 em, .section--mahogany .h2 em { color: var(--sand); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .9em;
  margin: 0 0 1.25rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase;
  color: var(--mahogany);
}
.eyebrow--light { color: var(--sand); }
.eyebrow-num {
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.08rem; letter-spacing: 0; text-transform: none; color: var(--sand-deep);
  display: inline-flex; align-items: center; gap: .9em;
}
.eyebrow--light .eyebrow-num { color: var(--sand-2); }
.eyebrow-num::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.eyebrow-line { width: 34px; height: 1px; background: currentColor; opacity: .7; }

.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.28rem); line-height: 1.6; color: var(--ink-2); font-weight: 300; max-width: 36rem; }
.prose p { color: var(--ink-2); font-size: 1.06rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-weight: 500; color: var(--mahogany);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px; transition: background-size .5s var(--ease);
}
.link-arrow:hover { background-size: 100% 1px; }
.link-arrow .icon:last-child { transition: transform .4s var(--ease); }
.link-arrow:hover .icon:last-child { transform: translate(2px, -2px); }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--mahogany); --fg: var(--on-dark); --hover: rgba(255, 255, 255, .14);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  height: 52px; padding: 0 1.55em; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font-weight: 500; font-size: .97rem; letter-spacing: .01em; white-space: nowrap;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), color .3s, background-color .3s;
  -webkit-tap-highlight-color: transparent;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--hover); transform: translateY(102%);
  transition: transform .55s var(--ease);
}
.btn:hover::before { transform: none; }
.btn:active { transform: scale(.98); }
.btn .icon { width: 1.2em; height: 1.2em; }
.btn--sand { --bg: var(--sand); --fg: var(--espresso); --hover: #EABF9B; box-shadow: 0 14px 30px -16px rgba(176, 118, 80, .8); }
.btn--dark { --bg: var(--espresso); --fg: var(--on-dark); --hover: var(--mahogany); }
.btn--glass {
  --bg: rgba(255, 255, 255, .08); --fg: #fff; --hover: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.btn--outline-light { --bg: transparent; --fg: var(--on-dark); --hover: rgba(246, 238, 228, .08); box-shadow: inset 0 0 0 1px rgba(246, 238, 228, .32); }
.btn--line { --bg: transparent; --fg: var(--ink); --hover: rgba(103, 53, 44, .07); box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--icon { --bg: var(--espresso); --fg: var(--on-dark); padding: 0; width: 56px; }
.btn--sm { height: 42px; padding: 0 1.15em; font-size: .9rem; }
.btn--lg { height: 60px; padding: 0 1.95em; font-size: 1.02rem; }
.btn--block { width: 100%; }

/* ---------- Live status ---------- */
.live-status { display: inline-flex; align-items: center; gap: .6em; font-size: .86rem; line-height: 1.2; }
.live-status i {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--live); box-shadow: 0 0 0 0 rgba(134, 219, 151, .6); animation: livePulse 2.2s infinite;
}
.live-status.is-closed i { background: var(--sand); animation: none; }
.live-status--dark { color: var(--ink-2); font-family: var(--font-sans); font-size: .9rem; }
.live-status--dark i { background: #2FA352; box-shadow: 0 0 0 0 rgba(47, 163, 82, .5); }
.live-status--dark.is-closed i { background: var(--sand-deep); }
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(134, 219, 151, .55); }
  70% { box-shadow: 0 0 0 9px rgba(134, 219, 151, 0); }
  100% { box-shadow: 0 0 0 0 rgba(134, 219, 151, 0); }
}

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 3px; color: var(--sand); }
.stars svg { width: 15px; height: 15px; }
.stars--lg svg { width: 22px; height: 22px; }

/* ==========================================================================
   Header — multi-page navigation (v1.2.0)
   States: transparent over a dark photo hero (home) · .is-scrolled ·
   .is-solid (pages without a dark hero) · .has-panel (a dropdown is open) · .is-hidden
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h);
  color: #fff; --logo-main: #fff;
  transition: transform .55s var(--ease), background-color .4s, box-shadow .4s, height .45s var(--ease), color .3s;
}
.site-header.is-scrolled, .site-header.is-solid, .site-header.has-panel {
  color: var(--ink); --logo-main: var(--mahogany);
  background: rgba(248, 243, 236, .84);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.has-panel { background: var(--ivory); -webkit-backdrop-filter: none; backdrop-filter: none; }
.site-header.is-scrolled { height: 72px; }
.site-header.is-hidden { transform: translateY(-105%); }
.header-inner {
  height: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: clamp(16px, 2.4vw, 40px);
}
.brand { display: block; flex: none; }
.brand-logo { width: 148px; height: 55px; transition: width .45s var(--ease), height .45s var(--ease); }
.is-scrolled .brand-logo { width: 122px; height: 45px; }

/* Top level: page link + (for sections with sub-pages) a chevron button that opens the panel */
.nav { display: flex; align-self: stretch; margin-left: auto; }
.nav-list { display: flex; gap: clamp(16px, 2vw, 30px); margin: 0; padding: 0; list-style: none; }
.nav-item { display: flex; align-items: center; }
.nav-link {
  position: relative; font-size: .9rem; font-weight: 450; letter-spacing: .02em; padding: .45em 0; opacity: .9; transition: opacity .3s;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease);
}
.nav-link:hover, .nav-item.is-open > .nav-link, .nav-item.is-current > .nav-link { opacity: 1; }
.nav-link:hover::after, .nav-item.is-open > .nav-link::after, .nav-item.is-current > .nav-link::after { transform: scaleX(1); transform-origin: left; }
.nav-toggle { display: grid; place-items: center; width: 24px; height: 32px; margin: 0 -6px 0 1px; border-radius: 6px; opacity: .75; transition: opacity .3s; }
.nav-toggle:hover, .nav-item.is-open > .nav-toggle { opacity: 1; }
.nav-toggle .icon { width: 14px; height: 14px; transition: transform .45s var(--ease); }
.nav-item.is-open > .nav-toggle .icon { transform: rotate(180deg); }

/* Dropdown panels — disclosure pattern: main.js toggles [hidden] + .is-open on the item */
.nav-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  max-height: calc(100vh - 100%); overflow-y: auto; overscroll-behavior: contain;
  color: var(--ink);
  background: var(--ivory) var(--noise);
  box-shadow: inset 0 1px 0 var(--line), 0 50px 80px -50px rgba(34, 18, 14, .55);
  visibility: hidden; clip-path: inset(0 0 100% 0);
  transition: clip-path .45s var(--ease-io), visibility 0s .45s;
}
.nav-item.is-open > .nav-panel { visibility: visible; clip-path: inset(0 0 -140px 0); transition: clip-path .7s var(--ease); }
.site-header.is-switching .nav-panel { transition: none; }
/* no JS: panels still open on hover / keyboard focus */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .nav-item:hover > .nav-panel[hidden], html:not(.js) .nav-item:focus-within > .nav-panel[hidden] { display: block; visibility: visible; clip-path: none; }

.np-inner {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(36px, 3.4vw, 52px) var(--gutter) clamp(40px, 3.8vw, 60px);
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 3.1fr); gap: clamp(32px, 4vw, 72px);
}
.np-inner > * { opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.nav-item.is-open .np-inner > * { opacity: 1; transform: none; transition: opacity .7s var(--ease) .12s, transform .8s var(--ease) .12s; }
.nav-item.is-open .np-inner > * + * { transition-delay: .2s; }
html:not(.js) .np-inner > * { opacity: 1; transform: none; }

.np-intro { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.np-eyebrow { margin: 0 0 1rem; font-size: .7rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--sand-deep); }
.np-title {
  margin: 0; font-family: var(--font-display); font-weight: 340; font-size: clamp(1.75rem, 1.2rem + 1vw, 2.4rem);
  line-height: 1.04; letter-spacing: -.022em; font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; text-wrap: balance;
}
.np-title em { display: block; color: var(--mahogany); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.np-links { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; gap: .7rem; }
.np-links .link-arrow { font-size: .95rem; }
.np-note { margin: auto 0 0; padding-top: 1.6rem; font-size: .86rem; color: var(--ink-2); }
.np-note a { color: var(--mahogany); font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }

/* Tours / About: image cards */
.np-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-cards); align-content: start; }
.np-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np-card { display: flex; flex-direction: column; }
.np-media { order: -1; position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: 1rem; border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-2); isolation: isolate; }
.np-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.np-card:hover .np-media img { transform: scale(1.06); }
.np-dur {
  position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: .4em; height: 28px; padding: 0 .75em;
  border-radius: 999px; background: rgba(248, 243, 236, .93); color: var(--espresso); font-size: .74rem; font-weight: 500;
}
.np-dur .icon { width: 14px; height: 14px; }
.np-kicker { margin-bottom: .3rem; font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.np-name {
  order: 1; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
  font-family: var(--font-display); font-weight: 380; font-size: clamp(1.1rem, .9rem + .4vw, 1.3rem); line-height: 1.2; letter-spacing: -.01em;
  font-variation-settings: "opsz" 48, "SOFT" 40; transition: color .3s;
}
.np-name .icon { align-self: center; width: 1em; height: 1em; color: var(--mahogany); opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.np-card:hover .np-name, .np-card[aria-current="page"] .np-name { color: var(--mahogany); }
.np-card:hover .np-name .icon, .np-card:focus-visible .np-name .icon { opacity: 1; transform: none; }

/* Destinations: numbered list */
.np-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-cards); align-content: start; }
.np-place { position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: baseline; padding: 1.05rem 1.8rem 1.1rem 0; border-top: 1px solid var(--line); }
.np-places li:nth-last-child(-n+3) .np-place { border-bottom: 1px solid var(--line); }
.np-num { grid-row: span 2; font-family: var(--font-display); font-style: italic; font-size: .95rem; color: var(--sand-deep); }
.np-place b { font-family: var(--font-display); font-weight: 380; font-size: 1.28rem; line-height: 1.2; letter-spacing: -.01em; font-variation-settings: "opsz" 48, "SOFT" 40; transition: color .3s; }
.np-place small { grid-column: 2; margin-top: .25rem; font-size: .84rem; line-height: 1.4; color: var(--ink-3); }
.np-go { position: absolute; right: .2rem; top: 1.4rem; width: 1rem; height: 1rem; color: var(--mahogany); opacity: 0; transform: translateX(-6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.np-place:hover b, .np-place[aria-current="page"] b { color: var(--mahogany); }
.np-place:hover .np-go, .np-place:focus-visible .np-go { opacity: 1; transform: none; }

/* About: key facts */
.np-facts { width: 100%; margin: 1.8rem 0 0; }
.np-facts div { display: flex; align-items: baseline; gap: .8rem; padding: .55rem 0; border-top: 1px solid var(--line); }
.np-facts dt { order: 1; font-size: .84rem; color: var(--ink-3); }
.np-facts dd {
  min-width: 4.6rem; margin: 0; font-family: var(--font-display); font-weight: 320; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em;
  color: var(--mahogany); font-variation-settings: "opsz" 144; font-variant-numeric: lining-nums;
}
.np-facts sup { font-family: var(--font-sans); font-size: .45em; vertical-align: top; position: relative; top: .35em; margin-left: .1em; color: var(--sand-deep); }

/* Page dimmer behind an open panel */
.nav-scrim {
  position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: rgba(34, 18, 14, .34); opacity: 0; transition: opacity .5s var(--ease);
}
.nav-scrim.is-visible { opacity: 1; pointer-events: auto; }

.header-tools { display: flex; align-items: center; gap: 14px; }
.lang {
  display: inline-flex; padding: 3px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 32%, transparent);
}
/* EN / CG: links to the same page in the other language (aria-current = the page's own language) */
.lang-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 38px; padding: 0 .65em; border-radius: 999px;
  font-size: .76rem; font-weight: 500; letter-spacing: .08em; line-height: 1; opacity: .75; transition: background-color .3s, color .3s, opacity .3s;
}
.lang-btn:hover { opacity: 1; }
.lang-btn[aria-current="page"] { opacity: 1; color: var(--espresso); background: #fff; }
.site-header:is(.is-scrolled, .is-solid, .has-panel) .lang-btn[aria-current="page"] { color: var(--ivory); background: var(--mahogany); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; place-items: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent); }
.burger .icon { width: 22px; height: 22px; }

/* Mobile menu — sections with sub-pages open as accordions */
.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--espresso) var(--noise); color: var(--on-dark);
  --logo-main: var(--on-dark);
  opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.menu[hidden] { display: block; }
.menu-inner { height: 100%; display: flex; flex-direction: column; padding: 18px var(--gutter) max(24px, env(safe-area-inset-bottom)); overflow-y: auto; }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-logo { width: 116px; height: 43px; }
.menu-close { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-dark); }
.menu-close .icon { width: 22px; height: 22px; }
.menu-nav { margin: auto 0; padding: 2rem 0; }
.menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.menu-item { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.menu.is-open .menu-item { opacity: 1; transform: none; }
.menu.is-open .menu-item:nth-child(2) { transition-delay: .05s; }
.menu.is-open .menu-item:nth-child(3) { transition-delay: .1s; }
.menu.is-open .menu-item:nth-child(4) { transition-delay: .15s; }
.menu.is-open .menu-item:nth-child(5) { transition-delay: .2s; }
.menu.is-open .menu-item:nth-child(6) { transition-delay: .25s; }
.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.menu-link {
  display: flex; align-items: baseline; gap: 1rem; min-width: 0; padding: .3rem 0;
  font-family: var(--font-display); font-size: clamp(2rem, 8.6vw, 3.1rem); line-height: 1.1; font-weight: 320;
}
.menu-link b { font-weight: inherit; transition: color .3s; }
.menu-num { font-size: .9rem; font-style: italic; color: var(--sand); }
.menu-link[aria-current="page"] b, .menu-item.is-current .menu-link b { color: var(--sand-2); }
.menu-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--line-dark); color: var(--sand);
  transition: transform .5s var(--ease), background-color .3s, color .3s, box-shadow .3s;
}
.menu-toggle .icon { width: 18px; height: 18px; }
.menu-item.is-open .menu-toggle { transform: rotate(180deg); background: var(--sand); color: var(--espresso); box-shadow: none; }
.menu-sub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease), visibility 0s .5s; }
.menu-item.is-open .menu-sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .6s var(--ease); }
.menu-sub > ul { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 0 0 0 2.1rem; }
.menu-sub li:first-child { margin-top: .45rem; }
.menu-sub li:last-child { margin-bottom: 1rem; }
.menu-sub a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .68rem 0;
  border-top: 1px solid var(--line-dark); font-size: 1.04rem; line-height: 1.35; color: var(--on-dark-2); transition: color .3s;
}
.menu-sub a:hover, .menu-sub a[aria-current="page"] { color: var(--on-dark); }
.menu-sub small { flex: none; font-family: var(--font-display); font-style: italic; font-size: .98rem; color: var(--sand); }
.menu-sub .menu-sub-more { justify-content: flex-start; gap: .5rem; color: var(--sand-2); }
.menu-sub-more .icon { width: 1em; height: 1em; align-self: center; }
.menu-sub--cols > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
.menu-sub--cols li:nth-child(2) { margin-top: .45rem; }
.menu-foot { display: grid; gap: 1.2rem; }
.menu-meta { margin: 0; color: var(--on-dark-2); }
.lang--menu { justify-self: start; }
.lang--menu .lang-btn { height: 36px; padding: 0 1em; font-size: .82rem; letter-spacing: .04em; }
.lang--menu .lang-btn[aria-current="page"] { background: var(--sand); color: var(--espresso); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; background: var(--espresso); overflow: hidden; isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%;
  transform: scale(1.14); animation: heroZoom 3.2s var(--ease) .05s forwards;
}
@keyframes heroZoom { to { transform: scale(1.02); } }
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(34, 18, 14, .62) 0%, rgba(34, 18, 14, 0) 24%),
    linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .5) 30%, rgba(34, 18, 14, 0) 62%),
    radial-gradient(90% 70% at 0% 100%, rgba(34, 18, 14, .5), transparent 70%);
}
/* phones: the client's promo reel over the intro photo (its first frame) — main.js "Hero video" plays it and fades it in
   once it really plays; the round button (top right, under the header) pauses it */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  opacity: 0; transition: opacity .9s ease; transform: scale(1.14); animation: heroZoom 3.2s var(--ease) .05s forwards;
}
.hero-video.is-on { opacity: 1; }
.hero-video-btn {
  position: absolute; right: var(--gutter); top: calc(var(--header-h) + 12px); z-index: 3;
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(34, 18, 14, .34); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transition: background-color .3s;
}
.hero-video-btn[hidden] { display: none; }
.hero-video-btn:hover { background: rgba(34, 18, 14, .52); }
.hero-video-btn:focus-visible { outline: 2px solid var(--sand-2); outline-offset: 3px; }
.hero-video-btn .icon { width: 18px; height: 18px; }
.hero-video-play, .hero-video-btn[aria-pressed="true"] .hero-video-pause { display: none; }
.hero-video-btn[aria-pressed="true"] .hero-video-play { display: block; }
/* the home intro: computers and landscape tablets show the client's photo of Negroni off Perast (a little more of the
   water), phones and upright tablets the promo reel; a soft shadow keeps the light text clear of the wake */
@media (min-width: 761px) {
  #top .hero-eyebrow, #top .hero-title, #top .hero-sub { text-shadow: 0 2px 22px rgba(20, 10, 8, .4); }
}
@media (min-width: 1101px), (min-width: 761px) and (orientation: landscape) {
  .hero-video, .hero-video-btn { display: none; }
  #top .hero-img { object-position: 50% 64%; }
}
.hero-content { position: relative; padding-top: clamp(104px, 15vh, 150px); padding-bottom: clamp(124px, 18vh, 210px); }
.hero-eyebrow { margin-bottom: 1.8rem; }
.hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: min(clamp(3.1rem, 1.2rem + 7vw, 8.6rem), 15.5vh); line-height: 1; letter-spacing: -.032em;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  margin: 0 0 1.7rem; max-width: 11.5ch;
}
.hero-title em { color: var(--sand-2); }
.ln { display: block; overflow: hidden; padding: 0 0 .15em; margin-bottom: -.12em; }
.ln > * { display: inline-block; transform: translateY(112%); animation: lineUp 1.3s var(--ease) .3s forwards; }
.ln + .ln > * { animation-delay: .44s; }
@keyframes lineUp { to { transform: none; } }
.hero-sub { text-wrap: pretty; max-width: 40rem; font-size: clamp(1.06rem, .96rem + .45vw, 1.32rem); line-height: 1.55; color: rgba(255, 255, 255, .86); font-weight: 300; margin-bottom: 2.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

[data-hero-in] { opacity: 0; transform: translateY(20px); animation: heroIn 1.3s var(--ease) forwards; }
.hero-eyebrow[data-hero-in] { animation-delay: .2s; }
.hero-sub[data-hero-in] { animation-delay: .75s; }
.hero-actions[data-hero-in] { animation-delay: .9s; }
.hero-review[data-hero-in] { animation-delay: 1.15s; }
.hero-bar[data-hero-in] { animation-delay: 1.25s; transform: none; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

.hero-review {
  position: absolute; right: var(--gutter); bottom: clamp(124px, 18vh, 210px); z-index: 2;
  display: grid; gap: .35rem; padding: 1.1rem 1.4rem 1.2rem; width: 270px;
  border-radius: 20px; background: rgba(34, 18, 14, .28);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  transition: background-color .4s, transform .5s var(--ease);
}
.hero-review:hover { background: rgba(34, 18, 14, .42); transform: translateY(-3px); }
.hero-review-score { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; font-weight: 340; }
.hero-review-score small { font-family: var(--font-sans); font-size: .8rem; letter-spacing: .08em; color: rgba(255, 255, 255, .7); margin-left: .25em; }
.hero-review-quote { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; color: rgba(255, 255, 255, .9); }
.hero-review-quote small { font-family: var(--font-sans); font-style: normal; font-size: .78rem; color: rgba(255, 255, 255, .62); }

.hero-coords {
  position: absolute; right: calc(var(--gutter) * .45); top: 50%; z-index: 2; margin: 0;
  writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg);
  font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
}
.hero-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; border-top: 1px solid rgba(255, 255, 255, .16); }
.hero-bar-inner { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 1rem; padding-block: 1.35rem; }
.hb-item { display: inline-flex; align-items: center; gap: .65em; font-size: .88rem; letter-spacing: .02em; color: rgba(255, 255, 255, .82); }
.hb-item .icon { color: var(--sand-2); width: 1.25em; height: 1.25em; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; padding-block: var(--section-y); }
.section--paper { background: var(--paper) var(--noise); }
.section--dark { background: var(--espresso) var(--noise); color: var(--on-dark); }
.section--mahogany { background: var(--mahogany-deep) var(--noise); color: var(--on-dark); }
.section-head {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 2.5rem 4rem; align-items: end;
  margin-bottom: var(--space-head);
}
.section-head-aside p { margin: 0; color: var(--ink-2); max-width: 30rem; }
.section-head--light .section-head-aside p { color: var(--on-dark-2); }

/* ---------- 01 Recipe ---------- */
.recipe-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-grid); align-items: start; }
.recipe .h2 em { display: block; }
.recipe .lead { margin: 1.5rem 0 0; }
.ingredients { list-style: none; padding: 0; margin: 2.25rem 0 0; border-top: 1px solid var(--line); counter-reset: ing; }
.ingredient { display: grid; grid-template-columns: 6.6rem 1fr; column-gap: 1.4rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.ingredient-part { grid-row: span 2; padding-top: .45rem; font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--sand-deep); }
.ingredient-name { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400; line-height: 1.2; font-variation-settings: "opsz" 48, "SOFT" 50; }
.ingredient p { margin: .3rem 0 0; color: var(--ink-2); font-size: .98rem; }
/* tagline under the glass, aligned with the glass edge and the "Montenegroni" title (x = 70 of the 640-unit SVG) */
.recipe-stir { margin: .25rem 0 0; padding-left: calc(70 / 640 * 100%); font-family: var(--font-display); font-style: italic; font-size: 1.55rem; line-height: 1.3; color: var(--mahogany); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
.recipe-stir::before { content: ""; display: block; width: 40px; height: 1px; margin-bottom: 1rem; background: var(--sand-deep); opacity: .55; }
.recipe-stir small { display: block; margin-top: .2rem; font-family: var(--font-sans); font-style: normal; font-size: .9rem; color: var(--ink-3); letter-spacing: .02em; }

.recipe-visual { position: sticky; top: 104px; align-self: start; }
.recipe-glass { margin: 0; }
.glass-svg { width: 100%; height: auto; overflow: visible; }
.g-title { font-family: var(--font-display); font-size: 34px; font-weight: 340; fill: var(--mahogany); letter-spacing: -.01em; }
.g-phon { font-family: var(--font-display); font-style: italic; font-size: 15px; fill: var(--ink-3); }
.glass-line { fill: none; stroke: var(--mahogany); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.glass-spoon path { stroke: var(--mahogany); stroke-width: 3; stroke-linecap: round; fill: none; }
.glass-spoon circle { fill: var(--ivory); stroke: var(--mahogany); stroke-width: 2.2; }
.glass-ice { fill: rgba(255, 255, 255, .26); stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.glass-tags path { fill: none; stroke: var(--mahogany); stroke-width: 1; stroke-dasharray: 2 4; opacity: .55; }
.glass-peel { --logo-accent: #DE8F57; overflow: visible; }
.g-part { font-family: var(--font-display); font-style: italic; font-size: 16px; fill: var(--sand-deep); }
.g-name { font-family: var(--font-display); font-size: 25px; fill: var(--ink); font-weight: 380; }
.layer { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); transition: transform 1.5s var(--ease); }
.js [data-glass].is-in .layer { transform: none; }
.js [data-glass].is-in .layer-2 { transition-delay: .4s; }
.js [data-glass].is-in .layer-3 { transition-delay: .8s; }
html:not(.js) .layer { transform: none; }
.glass-wave { animation: wave 5s linear infinite; }
@keyframes wave { to { transform: translateX(-140px); } }
.glass-ice { animation: bob 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bob { 50% { translate: 0 4px; } }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(56px, 6vw, 88px) 0 0;
  border-top: 1px solid var(--line);
}
.stat { padding: 2rem 1.5rem 0 0; display: flex; flex-direction: column-reverse; gap: .4rem; }
.stat + .stat { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.stat dt { color: var(--ink-2); font-size: .92rem; }
.stat dd { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.8rem, 1.8rem + 3vw, 4.6rem); line-height: 1; letter-spacing: -.03em; color: var(--mahogany); font-variation-settings: "opsz" 144; font-variant-numeric: lining-nums; }
.stat sup { font-family: var(--font-sans); font-weight: 400; font-size: .4em; vertical-align: top; position: relative; top: .35em; margin-left: .1em; color: var(--sand-deep); }

/* ---------- 02 Tours ---------- */
.tour-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-cards); }
.tour {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius);
  background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -42px rgba(60, 28, 20, .45);
  transition: transform .8s var(--ease), box-shadow .8s var(--ease);
}
.tour:hover { transform: translateY(-6px); box-shadow: 0 1px 0 var(--line), 0 50px 80px -42px rgba(60, 28, 20, .55); }
.tour-media { position: relative; aspect-ratio: 1 / 1.06; overflow: hidden; background: var(--paper-2); }
.tour-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.tour:hover .tour-media img { transform: scale(1.06); }
.tour-media::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(0deg, rgba(34, 18, 14, .45), transparent); pointer-events: none; }
.tour-dur {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  display: inline-flex; align-items: center; gap: .45em; height: 34px; padding: 0 .95em; border-radius: 999px;
  background: rgba(248, 243, 236, .93); color: var(--espresso); font-size: .82rem; font-weight: 500;
}
.tour-flag {
  position: absolute; right: 16px; top: 16px; z-index: 1; height: 34px; padding: 0 .95em; border-radius: 999px;
  display: inline-flex; align-items: center; background: var(--sand); color: var(--espresso); font-size: .78rem; font-weight: 500; letter-spacing: .04em;
}
.tour-num {
  position: absolute; right: 18px; bottom: 6px; z-index: 1;
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 4.4rem; line-height: 1;
  color: rgba(255, 255, 255, .95); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.tour-body { display: flex; flex-direction: column; flex: 1; padding: 1.6rem 1.65rem 1.5rem; container: tour-body / inline-size; }
.tour-kicker { margin: 0 0 .55rem; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-deep); }
.tour-title {
  font-family: var(--font-display); font-weight: 380; font-size: clamp(1.6rem, 1.2rem + .9vw, 2.05rem);
  line-height: 1.08; letter-spacing: -.012em; margin-bottom: .8rem; font-variation-settings: "opsz" 72, "SOFT" 40;
}
.tour-title--xl { font-size: clamp(2.2rem, 1.5rem + 2vw, 3.4rem); }
.tour-text { margin: 0 0 1.25rem; color: var(--ink-2); font-size: .98rem; }
.tour-stops { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0 0 1.5rem; }
.tour-stops li { padding: .28em .8em; border-radius: 999px; background: var(--paper); color: var(--mahogany); font-size: .8rem; }
/* no prices on the site (client, v1.3.0): route link left, WhatsApp booking right */
.tour-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.tour-route {
  display: inline-flex; align-items: center; gap: .5em; text-align: left;
  font-size: .86rem; font-weight: 500; color: var(--mahogany);
}
.tour-route .icon { transition: transform .45s var(--ease); }
.tour-route:hover .icon { transform: translateX(5px); }
.tour-route--light { color: var(--sand-2); }

.custom-tour {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--space-group);
  border-radius: var(--radius); overflow: hidden; background: var(--mahogany-deep) var(--noise); color: var(--on-dark);
  box-shadow: 0 50px 90px -50px rgba(60, 28, 20, .6);
}
.custom-media { position: relative; min-height: 440px; overflow: hidden; }
.custom-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.custom-tour:hover .custom-media img { transform: scale(1.04); }
.custom-body { padding: clamp(28px, 4vw, 60px); display: flex; flex-direction: column; container: custom-body / inline-size; }
.custom-body .tour-kicker { color: var(--sand); }
.custom-body .tour-text { color: var(--on-dark-2); max-width: 34rem; min-height: 4.8em; }
.seg {
  position: relative; align-self: flex-start; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 4px; margin: .4rem 0 1.5rem; border-radius: 999px; background: rgba(246, 238, 228, .08); box-shadow: inset 0 0 0 1px var(--line-dark);
}
.seg button { position: relative; z-index: 1; height: 40px; padding: 0 1.4em; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--on-dark-2); transition: color .35s; }
.seg button[aria-checked="true"] { color: var(--espresso); }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--sand); transition: transform .55s var(--ease); }
.seg[data-active="8"] .seg-thumb { transform: translateX(100%); }
.ideas-label { margin: .4rem 0 .7rem; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-3); }
.ideas { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0 0 2rem; }
.ideas li { padding: .38em .95em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-dark); font-size: .84rem; }
.tour-foot--light { border-top-color: var(--line-dark); }
/* narrow cards (phones): the booking button goes full width, above the route link */
@container tour-body (max-width: 299px) {
  .tour-foot { flex-direction: column-reverse; align-items: stretch; }
  .tour-foot .tour-route { align-self: flex-start; }
}
@container custom-body (max-width: 419px) {
  .tour-foot { flex-direction: column-reverse; align-items: stretch; }
  .tour-foot .tour-route { align-self: flex-start; }
}

/* ---------- 03 Routes / chart ---------- */
.explorer { display: grid; grid-template-columns: minmax(290px, 370px) minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.explorer-panel { display: flex; flex-direction: column; min-width: 0; }
.chart-frame, .tour-grid, .m-rows { min-width: 0; }
.chart-tabs { display: grid; gap: 8px; }
.chart-tab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
  padding: 1rem 1.2rem; border-radius: 16px; text-align: left; color: var(--on-dark-2);
  box-shadow: inset 0 0 0 1px var(--line-dark); transition: background-color .35s, color .35s, box-shadow .35s;
}
.chart-tab:hover { color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(219, 165, 129, .45); }
.chart-tab[aria-selected="true"] { background: var(--sand); color: var(--espresso); box-shadow: none; }
.ct-name { font-family: var(--font-display); font-size: 1.18rem; font-weight: 400; }
.ct-dur { flex: none; font-size: .78rem; letter-spacing: .08em; opacity: .85; }

.timeline { list-style: none; margin: 1.9rem 0 1.8rem; padding: 0 0 0 1.75rem; position: relative; }
.timeline::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; border-left: 1px dashed rgba(219, 165, 129, .38); }
.timeline li { position: relative; padding: .42rem 0; transition: opacity .5s; }
.timeline li::before {
  content: ""; position: absolute; left: calc(-1.75rem + 2px); top: .95rem; width: 9px; height: 9px; border-radius: 50%;
  background: var(--espresso); box-shadow: inset 0 0 0 1.5px var(--sand); transition: background-color .4s, transform .4s var(--ease);
}
.timeline li.is-on::before { background: var(--sand); transform: scale(1.25); }
.timeline .tl-start::before, .timeline .tl-end::before { width: 13px; height: 13px; left: calc(-1.75rem); top: .82rem; background: var(--sand); box-shadow: 0 0 0 4px rgba(219, 165, 129, .18); }
.timeline b { display: block; font-weight: 500; color: var(--on-dark); line-height: 1.35; }
.timeline span { display: block; font-size: .87rem; color: var(--on-dark-2); line-height: 1.4; }
.timeline.is-swapping { opacity: 0; }
.timeline { transition: opacity .3s; }
.explorer-cta { align-self: flex-start; }

.chart-frame {
  position: relative; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: 1000 / 776; background: var(--chart-sea);
  box-shadow: inset 0 0 0 1px var(--line-dark), 0 60px 100px -60px rgba(0, 0, 0, .8);
}
.bk-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }
.bk-sea { fill: var(--chart-sea); }
.bk-grat { fill: none; stroke: rgba(219, 165, 129, .075); stroke-width: .7; vector-effect: non-scaling-stroke; }
.bk-contours use { fill: none; stroke-linejoin: round; }
.ct-a { stroke: rgba(219, 165, 129, .12); }
.ct-b { stroke: var(--chart-sea); }
.ct-a.ct-3 { stroke-width: 26; } .ct-b.ct-3 { stroke-width: 24.9; }
.ct-a.ct-2 { stroke-width: 15; } .ct-b.ct-2 { stroke-width: 13.9; }
.ct-a.ct-1 { stroke-width: 6.4; } .ct-b.ct-1 { stroke-width: 5.2; }
.bk-landfill { fill: #3B2319; }
.bk-landhatch { fill: url(#bk-hatch); }
.bk-hatch-line { stroke: rgba(219, 165, 129, .075); stroke-width: .7; }
.bk-coast { fill: none; stroke: rgba(219, 165, 129, .6); stroke-width: .9; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.bk-ghost { fill: none; stroke: rgba(219, 165, 129, .32); stroke-width: 1.3; stroke-dasharray: 1.5 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .6s; }
/* route widths are in chart units, kept constant on screen via --u (chart units per CSS pixel, set by main.js) */
.bk-chart { --u: 1.1; }
.bk-route { fill: none; stroke: var(--sand); stroke-width: calc(var(--u) * 2.6px); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bk-glow { fill: none; stroke: rgba(219, 165, 129, .22); stroke-width: calc(var(--u) * 9px); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.bk-route.is-active, .bk-glow.is-active { opacity: 1; }
[data-active-route="custom"] .bk-ghost { opacity: 1; }
.bk-ghost.is-ghosted { opacity: .9; }

.bk-label {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 450; letter-spacing: .05em; fill: var(--on-dark);
  paint-order: stroke; stroke: var(--chart-sea); stroke-width: 3.5px; stroke-linejoin: round;
}
.bk-label--start { font-size: 14px; font-weight: 500; fill: #fff; }
.bk-kicker { font-family: var(--font-sans); font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase; fill: var(--sand); paint-order: stroke; stroke: var(--chart-sea); stroke-width: 3px; }
.bk-water { font-family: var(--font-display); font-style: italic; fill: rgba(219, 165, 129, .5); font-size: 15px; letter-spacing: .12em; }
.bk-water--xl { font-size: 19px; transition: opacity .6s; }
.bk-chart.is-zoomed .bk-water--xl { opacity: 0; }
.bk-land-l { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: .55em; text-transform: uppercase; fill: rgba(246, 238, 228, .22); }
.bk-town { font-family: var(--font-sans); font-size: 10px; letter-spacing: .08em; fill: rgba(246, 238, 228, .42); }

.bk-stop { opacity: .32; transition: opacity .6s; }
.bk-stop .bk-label { opacity: .7; transition: opacity .5s; }
.bk-stop.is-route { opacity: .6; }
.bk-stop.is-on, .bk-stop.bk-start { opacity: 1; }
.bk-stop.is-on .bk-label { opacity: 1; }
.bk-dot { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.bk-stop:not(.is-on):not(.bk-start) .bk-dot { fill: var(--chart-sea); stroke: var(--sand); stroke-width: 1.4; }
.bk-ring { fill: none; stroke: var(--sand); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.bk-stop.is-on .bk-ring { animation: ping 2.6s var(--ease) infinite; }
.bk-start .bk-ring { animation: ping 2.6s var(--ease) infinite; }
@keyframes ping { 0% { opacity: .9; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.7); } }
.bk-pin { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.bk-pin-in { fill: var(--chart-sea); }
.bk-boat { opacity: 0; transition: opacity .4s; pointer-events: none; }
.bk-boat.is-visible { opacity: 1; }
.bk-hull { fill: var(--ivory); stroke: var(--chart-sea); stroke-width: 1; }
.bk-deck { fill: var(--mahogany); }
.bk-wake { fill: rgba(246, 238, 228, .35); }

.chart-compass { position: absolute; left: 18px; top: 18px; width: 70px; height: 70px; pointer-events: none; }
.chart-compass svg { width: 100%; height: 100%; overflow: visible; }
.chart-compass circle { fill: none; stroke: rgba(219, 165, 129, .38); stroke-width: 1; }
.chart-compass .cc-in { stroke-dasharray: 1 3; }
.chart-compass .cc-n { fill: var(--sand); }
.chart-compass .cc-s { fill: rgba(219, 165, 129, .35); }
.chart-compass .cc-ew { fill: rgba(219, 165, 129, .18); }
.chart-compass text { font-family: var(--font-display); font-size: 13px; fill: var(--on-dark); font-style: italic; }
.chart-scale { position: absolute; left: 20px; bottom: 18px; display: grid; gap: 4px; font-size: .7rem; letter-spacing: .14em; color: var(--on-dark-2); pointer-events: none; }
.chart-scale i { display: block; height: 6px; width: 84px; border: 1px solid rgba(219, 165, 129, .6); border-top: 0; transition: width .6s var(--ease); }
.chart-reset {
  position: absolute; right: 16px; top: 16px; display: inline-flex; align-items: center; gap: .5em; height: 38px; padding: 0 1em; border-radius: 999px;
  font-size: .8rem; color: var(--on-dark); background: rgba(26, 15, 12, .7); box-shadow: inset 0 0 0 1px var(--line-dark);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.chart-reset[hidden] { display: none; }
.chart-credit { position: absolute; right: 10px; bottom: 8px; margin: 0; padding: .15em .6em; border-radius: 999px; background: rgba(26, 15, 12, .72); font-size: .64rem; color: var(--on-dark-3); }
.chart-credit a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 04 Skipper ---------- */
.skipper-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: var(--space-grid); align-items: center; }
.skipper-media { position: relative; padding: 0 13% 14% 0; }
.arch { margin: 0; overflow: hidden; border-radius: 999px 999px 26px 26px; background: var(--paper-2); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch--main { aspect-ratio: 3 / 4.05; }
.arch--small {
  position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5;
  border: 8px solid var(--ivory); border-radius: 999px 999px 22px 22px; box-shadow: 0 30px 60px -30px rgba(60, 28, 20, .5);
}
.skipper-badge {
  position: absolute; left: -28px; top: 9%; width: 138px; height: 138px; border-radius: 50%;
  display: grid; place-items: center; background: var(--sand); color: var(--espresso);
  box-shadow: 0 20px 40px -20px rgba(60, 28, 20, .6);
}
.badge-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 30s linear infinite; }
.badge-ring text { font-family: var(--font-sans); font-size: 14.2px; font-weight: 500; fill: var(--espresso); }
.badge-mark { width: 64px; height: 17px; --logo-main: var(--espresso); --logo-accent: var(--mahogany); }
@keyframes spin { to { transform: rotate(360deg); } }
.skipper-copy .prose { margin-top: 1.75rem; }
.creds { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.4rem; padding: 1.6rem 0; margin: 1.2rem 0 2rem; border-block: 1px solid var(--line); }
.creds li { display: flex; align-items: center; gap: .65rem; font-weight: 450; }
.creds .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--sand); color: var(--espresso); }
.skipper-quote { margin: 0 0 2.2rem; padding-left: 1.4rem; border-left: 2px solid var(--sand); }
.skipper-quote p { margin: 0 0 .45rem; font-family: var(--font-display); font-style: italic; font-size: 1.38rem; line-height: 1.35; color: var(--mahogany); font-variation-settings: "opsz" 72, "SOFT" 100; }
.skipper-quote footer { font-size: .85rem; color: var(--ink-3); }
.skipper-quote cite { font-style: normal; font-weight: 500; color: var(--ink-2); }
.signature { display: flex; align-items: flex-end; gap: 1.4rem; flex-wrap: wrap; }
.signature-name { font-family: var(--font-script); font-size: clamp(4rem, 3rem + 3vw, 5.6rem); line-height: .62; color: var(--mahogany); padding-top: .3em; transform: rotate(-4deg); }
.signature-role { font-size: .88rem; color: var(--ink-2); line-height: 1.4; padding-bottom: .2rem; }
.signature-role b { display: block; color: var(--ink); font-weight: 500; }
.skipper-more { margin: 2.2rem 0 0; }

/* ---------- 05 Why ---------- */
.why { overflow: hidden; }
.why-deco { position: absolute; right: -10%; bottom: -4%; width: 78%; height: auto; opacity: .06; pointer-events: none; --logo-main: var(--sand); --logo-accent: var(--sand); }
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.pillar { position: relative; padding: 2.4rem 2rem .5rem 0; }
.pillar + .pillar { padding-left: 2rem; border-left: 1px solid var(--line-dark); }
.pillar-icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: var(--sand); box-shadow: inset 0 0 0 1px var(--line-dark); margin-bottom: 2rem; transition: background-color .5s, color .5s; }
.pillar:hover .pillar-icon { background: var(--sand); color: var(--mahogany-deep); }
.pillar-icon .icon { width: 26px; height: 26px; }
.pillar-num { position: absolute; top: 2.9rem; right: 1.6rem; font-family: var(--font-display); font-style: italic; color: var(--sand); opacity: .6; }
.pillar h3 { margin-bottom: .8rem; font-family: var(--font-display); font-weight: 360; font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); font-variation-settings: "opsz" 72, "SOFT" 50; }
.pillar p { margin: 0; color: var(--on-dark-2); font-size: .98rem; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; padding: clamp(24px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--line); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee-track span {
  white-space: nowrap; padding-right: .5em;
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.8rem); line-height: 1.1;
  color: var(--mahogany); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.marquee-track i { font-style: normal; color: var(--sand); font-size: .42em; vertical-align: middle; margin: 0 .55em; position: relative; top: -.15em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 06 Moments ---------- */
.moments { overflow: hidden; }
.m-rows { display: grid; gap: clamp(12px, 1.4vw, 20px); }
.m-row { display: flex; gap: clamp(12px, 1.4vw, 20px); width: max-content; padding-left: var(--gutter); will-change: transform; }
.m-row[data-drift="1"] { margin-left: -18vw; }
.m-item { position: relative; flex: none; margin: 0; height: clamp(220px, 25vw, 380px); overflow: hidden; border-radius: 20px; background: var(--paper-2); }
.m-item--w { aspect-ratio: 900 / 620; }
.m-item--t { aspect-ratio: 600 / 780; }
.m-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.m-item:hover img { transform: scale(1.05); }
.m-item figcaption {
  position: absolute; left: 14px; bottom: 14px; padding: .35em .9em; border-radius: 999px;
  background: rgba(34, 18, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; font-size: .8rem; letter-spacing: .03em;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.m-item:hover figcaption { opacity: 1; transform: none; }
@media (hover: none) { .m-item figcaption { opacity: 1; transform: none; } }
.moments-links { display: grid; justify-items: start; gap: .7rem; }

/* ---------- 07 Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-grid); align-items: start; }
.rating { position: sticky; top: 120px; }
.rating-box { display: flex; align-items: center; gap: 1.4rem; margin: 2rem 0 1.75rem; }
.rating-num { font-family: var(--font-display); font-weight: 300; font-size: clamp(5rem, 3rem + 6vw, 8.6rem); line-height: .8; letter-spacing: -.045em; color: var(--mahogany); font-variation-settings: "opsz" 144; }
.rating-box .stars { color: var(--sand-deep); }
.rating-meta { display: flex; align-items: center; gap: .5em; margin: .6rem 0 0; font-size: .9rem; color: var(--ink-2); }
.review-list { display: grid; gap: var(--space-cards); }
.review { margin: 0; padding: clamp(24px, 2.6vw, 36px); border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5); }
.review .stars { color: var(--sand-deep); }
.review blockquote { margin: 1rem 0 1.5rem; }
.review blockquote p { margin: 0; font-family: var(--font-display); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.35; font-weight: 360; font-variation-settings: "opsz" 48, "SOFT" 50; }
.review--feature { background: var(--mahogany-deep) var(--noise); color: var(--on-dark); }
.review--feature .stars { color: var(--sand); }
.review--feature blockquote p { font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.18; font-weight: 320; }
.review-list > .review:nth-child(3) { margin-left: clamp(0px, 8%, 80px); }
.review figcaption { display: flex; align-items: center; gap: .85rem; }
.review figcaption b { display: block; font-weight: 500; }
.review figcaption small { display: block; font-size: .8rem; color: var(--ink-3); }
.review--feature figcaption small { color: var(--on-dark-3); }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--mahogany); font-family: var(--font-display); font-size: 1.1rem; }
.review--feature .avatar { background: var(--sand); color: var(--espresso); }

/* ---------- 08 Booking ---------- */
.booking-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-grid); align-items: center; }
.steps { list-style: none; padding: 0; margin: 2.25rem 0 2rem; }
.step { display: grid; grid-template-columns: 62px 1fr; gap: 1.1rem; padding: 1.45rem 0; border-top: 1px solid var(--line-dark); }
.step:last-child { border-bottom: 1px solid var(--line-dark); }
.step-num { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 2.8rem; line-height: .9; color: var(--sand); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.step h3 { margin-bottom: .35rem; font-family: var(--font-display); font-weight: 380; font-size: 1.42rem; font-variation-settings: "opsz" 48, "SOFT" 50; }
.step p { margin: 0; color: var(--on-dark-2); }
.booking-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.booking .h2 em { display: block; }

.booking-visual { position: relative; display: grid; justify-items: center; }
.phone {
  position: relative; width: min(350px, 100%); aspect-ratio: 9 / 18.4; display: flex; flex-direction: column;
  padding: 12px; border-radius: 48px; background: #0D0705;
  box-shadow: 0 0 0 1px rgba(219, 165, 129, .28), inset 0 0 0 2px #2A1B16, 0 70px 120px -50px rgba(0, 0, 0, .8);
  transform: rotate(-2.5deg);
}
.phone-notch { position: absolute; left: 50%; top: 22px; width: 92px; height: 26px; border-radius: 20px; background: #000; transform: translateX(-50%); z-index: 2; }
.chat-head { display: flex; align-items: center; gap: .7rem; padding: 52px 16px 14px; border-radius: 36px 36px 0 0; background: #2A1814; }
.chat-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sand); --logo-main: var(--espresso); --logo-accent: var(--mahogany); }
.chat-avatar svg { width: 30px; height: 8px; }
.chat-who b { display: block; font-size: .9rem; font-weight: 500; }
.chat-who small { font-size: .74rem; color: var(--live); }
.chat-body {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 16px 14px; overflow: hidden;
  background: #1A0F0C radial-gradient(rgba(219, 165, 129, .06) 1px, transparent 1.4px) 0 0 / 18px 18px;
}
.bubble {
  max-width: 84%; margin: 0; padding: .6rem .85rem; border-radius: 16px; font-size: .84rem; line-height: 1.45;
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.bubble--out { align-self: flex-end; background: var(--sand); color: var(--espresso); border-bottom-right-radius: 5px; }
.bubble--in { align-self: flex-start; background: #3A231B; color: var(--on-dark); border-bottom-left-radius: 5px; }
.bubble--loc { align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; background: #3A231B; color: var(--sand-2); font-size: .78rem; }
.bubble--typing { align-self: flex-start; display: inline-flex; gap: 4px; background: #3A231B; padding: .75rem .9rem; }
.bubble--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark-2); animation: typing 1.2s infinite; }
.bubble--typing i:nth-child(2) { animation-delay: .15s; }
.bubble--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.bubble.is-shown { opacity: 1; transform: none; }
.bubble--typing.is-gone { display: none; }
html:not(.js) .bubble { opacity: 1; transform: none; }
.chat-input { display: flex; align-items: center; justify-content: space-between; margin: 0 6px 6px; padding: .8rem 1rem; border-radius: 999px; background: #2A1814; color: rgba(246, 238, 228, .62); font-size: .82rem; }
.chat-input .icon { color: var(--wa); width: 20px; height: 20px; }
.phone-note { margin: 1.4rem 0 0; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-3); }
.qr-card {
  position: absolute; left: -10%; top: 30%; display: flex; align-items: center; gap: 1rem; width: 300px; padding: 1rem 1.2rem 1rem 1rem;
  border-radius: 20px; background: var(--ivory); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65);
  transform: rotate(2deg);
}
.qr-img { width: 104px; height: 104px; flex: none; padding: 6px; border-radius: 10px; background: #fff; }
.qr-card b { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 400; margin-bottom: .2rem; }
.qr-card p { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--ink-2); }

/* ---------- 09 FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-grid); align-items: start; }
.faq-aside { position: sticky; top: 120px; }
.faq-more { margin: 2rem 0 0; display: grid; gap: .5rem; justify-items: start; color: var(--ink-2); }
.faq-list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .45vw, 1.42rem); font-weight: 380; line-height: 1.3;
  font-variation-settings: "opsz" 48, "SOFT" 50; transition: color .3s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--mahogany); }
.qa summary .icon { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--mahogany); transition: transform .5s var(--ease), background-color .4s, color .4s; }
.qa[open] summary .icon { transform: rotate(45deg); background: var(--mahogany); color: var(--ivory); box-shadow: none; }
.qa-a { padding: 0 4rem 1.6rem 0; }
.qa-a p { margin: 0; color: var(--ink-2); }
@supports (interpolate-size: allow-keywords) {
  .qa { interpolate-size: allow-keywords; }
  .qa::details-content { height: 0; overflow: clip; transition: height .55s var(--ease), content-visibility .55s allow-discrete; }
  .qa[open]::details-content { height: auto; }
}

/* ---------- 10 Visit ---------- */
.visit-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-cards); }
.visit-card { padding: clamp(28px, 3.2vw, 48px); border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5); }
.visit-list { display: grid; gap: 1.5rem; margin: 0 0 2.2rem; }
.visit-list dt { display: flex; align-items: center; gap: .55rem; margin-bottom: .35rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.visit-list dd { margin: 0; font-family: var(--font-display); font-size: 1.32rem; line-height: 1.4; font-variation-settings: "opsz" 48, "SOFT" 50; }
.visit-list dd a { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.visit-list dd .live-status { margin-top: .5rem; }
.getting-title { margin: 0 0 .6rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.getting ul { list-style: none; padding: 0; margin: 0 0 2.2rem; }
.getting li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.getting li:last-child { border-bottom: 1px solid var(--line); }
.getting .icon { color: var(--sand-deep); }
.getting b { font-weight: 500; font-variant-numeric: tabular-nums; }
.visit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.map-frame { position: relative; min-height: 520px; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.75) sepia(.12) contrast(1.02); transition: filter .6s; }
.map-frame:hover iframe { filter: none; }
.map-tag {
  position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: .5em; height: 38px; padding: 0 1em;
  border-radius: 999px; background: var(--espresso); color: var(--on-dark); font-size: .82rem; pointer-events: none;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .6);
}
.map-tag .icon { color: var(--sand); }

/* ---------- Finale ---------- */
.finale { position: relative; isolation: isolate; min-height: clamp(520px, 80vh, 840px); display: grid; place-items: center; overflow: hidden; text-align: center; color: #fff; background: var(--espresso); }
.finale-media { position: absolute; inset: -12% 0; z-index: -2; will-change: transform; }
.finale-media img { width: 100%; height: 100%; object-fit: cover; }
.finale-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(75% 65% at 50% 55%, rgba(34, 18, 14, .2), rgba(34, 18, 14, .72)), linear-gradient(0deg, rgba(34, 18, 14, .55), transparent 40%); }
.finale-inner { padding-block: clamp(88px, 9vw, 120px); display: grid; justify-items: center; }
.finale-mark { width: 128px; height: 33px; --logo-main: #fff; margin-bottom: 1.8rem; }
.finale-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.7rem, 1.3rem + 5.2vw, 6.6rem); line-height: .98; letter-spacing: -.028em; max-width: 13.5ch; margin: 0 auto 2.6rem; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; text-wrap: balance; }
.finale-title em { display: block; color: var(--sand-2); }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.finale-note { margin: 1.8rem 0 0; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

/* ---------- Footer ---------- */
.site-footer { background: var(--espresso) var(--noise); color: var(--on-dark-2); padding: clamp(56px, 6.5vw, 96px) 0 calc(28px + env(safe-area-inset-bottom)); --logo-main: var(--on-dark); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line-dark); }
.footer-brand svg { width: clamp(210px, 22vw, 300px); height: auto; aspect-ratio: 500 / 186; }
.footer-tagline { margin: 0; max-width: 24rem; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--on-dark); font-variation-settings: "opsz" 48, "SOFT" 100; }
/* sitemap: 3 navigation columns + contact & follow (equal column widths) */
.footer-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; padding: 2.75rem 0; }
.footer-nav, .footer-info { display: grid; gap: 2rem; min-width: 0; }
.footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-h { margin: 0 0 1.2rem; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.footer-cols a, .footer-cols span { display: inline-flex; align-items: center; gap: .6em; transition: color .3s; }
.footer-cols a:hover, .footer-cols a[aria-current="page"] { color: var(--on-dark); }
.footer-cols .icon { color: var(--sand); }
.footer-cols .footer-all { color: var(--sand-2); }
.footer-all .icon { width: 1em; height: 1em; transition: transform .4s var(--ease); }
.footer-all:hover .icon { transform: translateX(3px); }
/* the solid Google "G" fills the whole 24px grid; scaled so its size and visual weight match the outline Instagram icon */
.footer-social .icon--google { transform: scale(.84); }
.lang--footer { margin-top: 1.6rem; color: var(--on-dark-2); }
.lang--footer .lang-btn[aria-current="page"] { background: var(--sand); color: var(--espresso); }
/* wrap-reverse: u jednom redu copyright lijevo i linkovi desno, a kad se prelomi, copyright je zadnji (tekst nije u redosljedu fokusa) */
.footer-bottom { display: flex; flex-wrap: wrap-reverse; justify-content: space-between; gap: .6rem 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line-dark); font-size: .84rem; }
.footer-bottom p { margin: 0; }
.footer-bottom a:hover, .footer-bottom a[aria-current="page"] { color: var(--on-dark); }
.footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; padding: 0; }

/* ---------- Floating CTA ---------- */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 55;
  display: flex; align-items: center; gap: .75rem; padding: 7px 20px 7px 7px; border-radius: 999px;
  background: var(--espresso); color: var(--on-dark);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--line-dark);
  transform: translateY(150%); transition: transform .7s var(--ease);
}
.wa-float.is-visible { transform: none; }
.wa-float:hover .wa-float-icon { transform: rotate(-10deg) scale(1.05); }
.wa-float-icon { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--wa); color: #fff; transition: transform .5s var(--ease); }
.wa-float-icon .icon { width: 25px; height: 25px; }
.wa-float-text b { display: block; font-size: .92rem; font-weight: 500; line-height: 1.2; }
.live-status--mini { font-size: .74rem; color: var(--on-dark-2); gap: .45em; }
.live-status--mini i { width: 6px; height: 6px; }
.mobile-bar { display: none; }

/* ==========================================================================
   Sub-pages (v1.4.0) — pages without a dark photo hero start below the solid
   header: <header class="site-header is-solid"> + <main class="main--solid">
   ========================================================================== */
.main--solid { padding-top: var(--header-h); }

/* ---------- Sub-page intro: breadcrumb (styled like an eyebrow) + page title ---------- */
.page-hero { position: relative; padding-block: clamp(40px, 5vw, 80px) clamp(64px, 7vw, 112px); }
.crumbs { margin: 0 0 1.5rem; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; row-gap: .5em; margin: 0; padding: 0; list-style: none;
  font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--mahogany);
}
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: ""; width: 34px; height: 1px; margin: 0 .9em 0 .65em; background: currentColor; opacity: .6; }
.crumbs a { color: var(--ink-3); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .3s, background-size .45s var(--ease); }
.crumbs a:hover { color: var(--mahogany); background-size: 100% 1px; }
.page-title {
  margin: 0 0 1.6rem; font-family: var(--font-display); font-weight: 340;
  font-size: clamp(2.7rem, 1.5rem + 3.3vw, 4.9rem); line-height: 1.02; letter-spacing: -.026em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0;
}
.page-title em { font-style: italic; font-weight: 300; color: var(--mahogany); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
/* headroom in the line mask for carons on capitals (Š, Ž, Č, Ć) */
.page-title .ln { padding-top: .08em; margin-top: -.08em; }
.page-lead { margin: 0 0 2.2rem; max-width: 34rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.page-hero .crumbs[data-hero-in] { animation-delay: .1s; }
.page-hero .page-lead[data-hero-in] { animation-delay: .62s; }
.page-hero .page-actions[data-hero-in] { animation-delay: .76s; }

/* ---------- Contact ---------- */
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: var(--space-grid); align-items: center; }
.ch-qr {
  display: flex; align-items: center; gap: 1rem; width: fit-content; max-width: 100%; margin-top: 2rem;
  padding: .7rem 1.3rem .7rem .7rem; border-radius: 18px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
}
.ch-qr .qr-img { width: 76px; height: 76px; padding: 5px; border-radius: 10px; }
.ch-qr p { margin: 0; max-width: 17rem; font-size: .88rem; line-height: 1.45; color: var(--ink-2); }
.ch-qr b { display: block; margin-bottom: .1rem; font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; color: var(--ink); }
.page-hero .ch-qr[data-hero-in] { animation-delay: .9s; }

/* Local time in Tivat: clock, the 09–23 day with a "now" marker, difference to the visitor's time */
.ch-clock {
  position: relative; padding: clamp(28px, 3vw, 44px); border-radius: var(--radius); color: var(--on-dark);
  background: radial-gradient(120% 80% at 100% 0%, rgba(219, 165, 129, .16), transparent 62%), var(--espresso) var(--noise);
  box-shadow: 0 50px 90px -50px rgba(34, 18, 14, .75);
}
.page-hero .ch-clock[data-hero-in] { animation-delay: .5s; }
.ch-clock-label { display: flex; align-items: center; gap: .6em; margin: 0; font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--sand); }
.ch-clock-label .icon { width: 1.15em; height: 1.15em; }
.ch-time {
  margin: 1.3rem 0 .6rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(4.4rem, 2.8rem + 4.4vw, 7.4rem);
  line-height: .86; letter-spacing: -.045em; font-variation-settings: "opsz" 144, "SOFT" 30; font-variant-numeric: lining-nums tabular-nums;
}
.ch-tz { margin: 0; font-size: .92rem; color: var(--on-dark-2); }
.ch-hours { margin: 1.9rem 0 0; padding-top: 1.4rem; border-top: 1px solid var(--line-dark); font-family: var(--font-display); font-size: 1.28rem; line-height: 1.3; font-variation-settings: "opsz" 48, "SOFT" 50; }
.ch-day { margin-top: 1.15rem; }
.ch-bar { position: relative; height: 6px; border-radius: 99px; background: rgba(246, 238, 228, .14); }
.ch-open { position: absolute; top: 0; bottom: 0; left: 37.5%; right: 4.1667%; border-radius: inherit; background: var(--sand); }
.ch-now {
  position: absolute; top: 50%; left: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--on-dark); box-shadow: 0 0 0 3px var(--espresso), 0 0 0 4px rgba(246, 238, 228, .45);
}
.ch-scale { position: relative; height: 1.3em; margin-top: .55rem; font-size: .72rem; line-height: 1.3; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.ch-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.ch-scale span:nth-child(1) { left: 0; transform: none; }
.ch-scale span:nth-child(2) { left: 37.5%; }
.ch-scale span:nth-child(3) { left: 95.8333%; }
.ch-live { margin: 1.3rem 0 0; }

/* contact facts: meeting point, Instagram, Google, languages (like the stats row on the home page) */
.ch-facts { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; border-top: 1px solid var(--line); }
.ch-facts > li { min-width: 0; }
.ch-facts > li + li { border-left: 1px solid var(--line); }
.ch-fact { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; height: 100%; padding: 1.7rem 1.5rem .3rem; }
.ch-facts > li:first-child .ch-fact { padding-left: 0; }
.ch-fact-label { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.ch-fact-label .icon { width: 1.2em; height: 1.2em; }
.ch-fact-label .icon--google { transform: scale(.84); }
.ch-fact-value { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; font-variation-settings: "opsz" 48, "SOFT" 50; overflow-wrap: anywhere; transition: color .3s; }
.ch-fact-value .stars { margin-left: .3em; vertical-align: -.05em; color: var(--sand-deep); }
.ch-fact-hint { display: inline-flex; align-items: center; gap: .45em; margin-top: auto; padding-top: .25rem; font-size: .88rem; color: var(--ink-3); }
.ch-fact-hint .icon { width: 1em; height: 1em; transition: transform .4s var(--ease); }
a.ch-fact:hover .ch-fact-value { color: var(--mahogany); }
a.ch-fact:hover .ch-fact-hint .icon { transform: translate(2px, -2px); }
a.ch-fact[href^="#"]:hover .ch-fact-hint .icon { transform: translateY(3px); }

/* meeting point: map + address card, then "getting here" */
.cm-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-cards); }
.cm-map { min-height: clamp(420px, 36vw, 520px); }
.cm-card { display: flex; flex-direction: column; justify-content: space-between; }
.gh { margin-top: var(--space-group); }
.gh-title { margin: 0 0 1.3rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.gh-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-cards); margin: 0; padding: 0; }
.gh-item {
  display: flex; flex-direction: column; align-items: flex-start; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--radius);
  background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5);
}
.gh-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.5rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--sand-deep); }
.gh-time { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 1.2vw, 2.9rem); line-height: 1; letter-spacing: -.03em; color: var(--mahogany); font-variation-settings: "opsz" 144; font-variant-numeric: lining-nums; }
.gh-place { margin: .75rem 0 .35rem; font-weight: 500; }
.gh-tip { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-2); }
div.faq-more > p { margin: .9rem 0 0; }

/* sub-page intro with the lead beside the title (FAQ …), like the section heads of the home page */
.page-hero-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 1.6rem 4rem; align-items: end; }
.page-hero-head .page-title { margin: 0; }
.page-hero-aside .page-lead { margin-bottom: 1.6rem; }

/* ---------- FAQ page: topic index (sticky on desktop, chips on small screens) + questions by topic ---------- */
.faqp-grid { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: var(--space-grid); align-items: start; }
.faq-index { position: sticky; top: 112px; }
.faq-index-title { margin: 0 0 1rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.faq-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.faq-index li a {
  position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); align-items: baseline; padding: .85rem 0;
  border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.14rem; line-height: 1.3;
  font-variation-settings: "opsz" 48, "SOFT" 50; transition: color .3s;
}
.fi-num { font-style: italic; font-size: .9rem; color: var(--sand-deep); }
.faq-index li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--mahogany); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.faq-index li a:hover, .faq-index li a[aria-current] { color: var(--mahogany); }
.faq-index li a[aria-current]::after { transform: none; }
.faq-index-ask { display: grid; justify-items: start; gap: .7rem; margin-top: 1.8rem; }
.faqp-groups { min-width: 0; }
.faq-group + .faq-group { margin-top: var(--space-group); }
.faq-group-title {
  display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.1rem; font-family: var(--font-display); font-weight: 340;
  font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem); line-height: 1.1; letter-spacing: -.018em; font-variation-settings: "opsz" 144, "SOFT" 40;
}
.faq-group-num { font-style: italic; font-weight: 300; font-size: .6em; color: var(--sand-deep); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.qa-a a { color: var(--mahogany); font-weight: 500; background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.qa-a a:hover { background-size: 0 1px; }

/* ---------- Reviews page: Google rating, review excerpts, numbers, leave a review ---------- */
.rating-links { display: grid; justify-items: start; gap: .7rem; }
.rv-lead { margin: 1.6rem 0 0; }
.rv-score .rating-box { margin: 0 0 1.3rem; }
.rv-wall { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--space-cards); }
.rv-wall .review--feature { position: relative; isolation: isolate; overflow: hidden; grid-row: span 2; display: flex; flex-direction: column; }
/* a large quotation mark as a watermark; the quote sits in the middle of the card */
.rv-wall .review--feature::before {
  content: "\201C"; position: absolute; z-index: -1; right: .04em; top: -.08em; font-family: var(--font-display); font-style: normal; font-weight: 300;
  font-size: clamp(18rem, 12rem + 14vw, 30rem); line-height: 1; color: var(--sand); opacity: .09; pointer-events: none;
}
.rv-wall .review--feature blockquote { margin: auto 0 2.4rem; padding-top: 1.6rem; }
.rv-wall .review--feature blockquote p { font-size: clamp(2rem, 1.2rem + 2.2vw, 3.3rem); line-height: 1.08; letter-spacing: -.015em; }
.rv-wall .review--feature figcaption { margin-top: auto; }
.rv-tag { margin: 0 0 1.3rem; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-deep); }
.review--feature .rv-tag { color: var(--sand); }
.rv-card blockquote p + p { margin-top: .7rem; }
.rv-note { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; margin: 2.2rem 0 0; font-size: .92rem; color: var(--ink-3); }
.rv-numbers .stats { margin-top: 0; }
.rv-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-cards); }
.rv-action {
  display: flex; flex-direction: column; align-items: flex-start; padding: clamp(28px, 3vw, 44px); border-radius: var(--radius);
  background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5);
}
.rv-action-icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.6rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--mahogany); }
.rv-action-icon .icon { width: 24px; height: 24px; }
.rv-action-icon .icon--google { transform: scale(.84); }
.rv-action h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 360; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); line-height: 1.2; font-variation-settings: "opsz" 72, "SOFT" 50; }
.rv-action p { max-width: 30rem; margin: 0 0 1.8rem; color: var(--ink-2); }
.rv-action .btn { margin-top: auto; }
@media (max-width: 960px) {
  .rv-wall, .rv-actions { grid-template-columns: minmax(0, 1fr); }
  .rv-wall .review--feature { grid-row: auto; }
}

/* ---------- About page: the skipper, the story, values, a guest's word, the name & the company ---------- */
/* intro: copy + a portrait arch (placeholder photo until Boris's portrait arrives), the rotating badge and a home-port plate */
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: var(--space-grid); align-items: center; }
.ab-creds { max-width: 36rem; margin: 2.4rem 0 0; padding-bottom: 0; border-bottom: 0; }
.page-hero .ab-creds[data-hero-in] { animation-delay: .9s; }
.ab-hero-media { position: relative; justify-self: end; width: min(100%, 480px); padding-bottom: 9%; }
.page-hero .ab-hero-media[data-hero-in] { animation-delay: .35s; }
.ab-portrait { aspect-ratio: 3 / 4; box-shadow: 0 50px 90px -60px rgba(34, 18, 14, .7); }
.ab-badge { left: -52px; top: 14%; }
.ab-port {
  position: absolute; right: -32px; bottom: 0; display: grid; gap: .15rem; margin: 0; padding: 1rem 1.35rem 1.1rem;
  border-radius: 18px; background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 34px 70px -30px rgba(60, 28, 20, .55);
}
.ab-port-label { display: inline-flex; align-items: center; gap: .5em; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-deep); }
.ab-port b { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.01em; font-variation-settings: "opsz" 72, "SOFT" 50; }
.ab-port-ll { font-size: .72rem; letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* our story: a photo of the bay beside the story, then the numbers */
.ab-story-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-grid); align-items: center; }
.ab-story-media { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius); background: var(--paper-2); }
.ab-story-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ab-story-media:hover img { transform: scale(1.04); }
.ab-story-media figcaption {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: .5em; height: 38px; padding: 0 1em;
  border-radius: 999px; background: rgba(34, 18, 14, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; font-size: .82rem;
}
.ab-story-media figcaption .icon { color: var(--sand-2); }
.ab-story-lead, .ds-story-lead {
  margin: 1.9rem 0 1.5rem; font-family: var(--font-display); font-weight: 340; font-size: clamp(1.35rem, 1.1rem + .75vw, 1.8rem);
  line-height: 1.36; letter-spacing: -.008em; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 50;
}
.ab-story .h2 em, .ab-meta .h2 em { display: block; }
.ab-story-copy .prose { max-width: 38rem; }
.ab-story .signature { margin-top: 2.2rem; }

/* values: one editorial row per value — numeral, name, text, icon */
.ab-values-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.ab-value {
  position: relative; isolation: isolate; display: grid; grid-template-columns: 6rem minmax(0, .75fr) minmax(0, 1.25fr) 58px;
  align-items: baseline; gap: 1rem 2.5rem; padding: clamp(26px, 2.8vw, 40px) 0; border-bottom: 1px solid var(--line);
}
.ab-value::before {
  content: ""; position: absolute; inset: 0 calc(var(--gutter) * -.5); z-index: -1; border-radius: 20px;
  background: var(--paper); opacity: 0; transition: opacity .5s var(--ease);
}
.ab-value:hover::before { opacity: 1; }
.ab-value-num { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 1.6rem + 1.5vw, 3.3rem); line-height: 1; color: var(--sand-deep); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.ab-value h3 { font-family: var(--font-display); font-weight: 360; font-size: clamp(1.7rem, 1.25rem + 1.2vw, 2.5rem); line-height: 1.1; letter-spacing: -.014em; font-variation-settings: "opsz" 72, "SOFT" 50; }
.ab-value p { margin: 0; max-width: 34rem; color: var(--ink-2); }
.ab-value-icon {
  align-self: center; justify-self: end; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: var(--mahogany); box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .5s, color .5s, box-shadow .5s;
}
.ab-value-icon .icon { width: 26px; height: 26px; }
.ab-value:hover .ab-value-icon { background: var(--mahogany); color: var(--ivory); box-shadow: none; }

/* a guest's word: one large quote on espresso, the boat mark as a watermark */
.ab-quote { overflow: hidden; text-align: center; }
.ab-quote-deco { position: absolute; left: 50%; bottom: -6%; width: min(1100px, 120%); height: auto; transform: translateX(-50%); opacity: .05; pointer-events: none; --logo-main: var(--sand); --logo-accent: var(--sand); }
.ab-quote-inner { position: relative; display: grid; justify-items: center; }
.ab-quote-eyebrow { margin-bottom: 2.4rem; }
.ab-quote-fig { display: grid; justify-items: center; margin: 0; }
.ab-quote-fig blockquote { margin: 0 0 2.4rem; }
.ab-quote-fig blockquote p {
  max-width: 19ch; margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(2.3rem, 1.2rem + 3.6vw, 5.2rem); line-height: 1.04; letter-spacing: -.024em; color: var(--on-dark);
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; text-wrap: balance;
}
.ab-quote-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.1rem; font-size: .95rem; color: var(--on-dark-2); }
.ab-quote-fig figcaption b { font-weight: 500; color: var(--on-dark); }
.ab-quote-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem 2.4rem; width: min(100%, 640px); margin-top: 2.6rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.ab-quote .link-arrow { color: var(--sand-2); }

/* behind the name (Montenegro + Negroni) + the company card */
.ab-meta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-grid); align-items: center; }
.ab-eq {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .3em; margin: 2.2rem 0 .55rem;
  font-family: var(--font-display); font-weight: 340; font-size: clamp(1.6rem, 1.2rem + 1.05vw, 2.2rem); line-height: 1.15;
  letter-spacing: -.012em; font-variation-settings: "opsz" 72, "SOFT" 50;
}
.ab-eq > span { white-space: nowrap; }
.ab-eq i { margin: 0 .12em; font-style: normal; font-weight: 300; color: var(--sand-deep); }
.ab-eq b { font-weight: 360; font-style: italic; color: var(--mahogany); font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1; }
.ab-phon { margin: 0 0 1.6rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: var(--ink-3); font-variation-settings: "opsz" 24, "SOFT" 100; }
.ab-name-lead { margin: 0; }
.ab-recipe { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 2rem 0 0; padding: 0; }
.ab-recipe li { display: inline-flex; align-items: baseline; gap: .45em; padding: .6rem 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .95rem; }
.ab-recipe span { font-family: var(--font-display); font-style: italic; color: var(--sand-deep); }
.ab-recipe b { font-weight: 500; }
.ab-company { padding: clamp(28px, 3.2vw, 48px); border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5); }
.ab-company-logo { width: 168px; height: auto; aspect-ratio: 500 / 186; margin-bottom: 1.9rem; }
.ab-company-title { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 360; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.9rem); line-height: 1.2; font-variation-settings: "opsz" 72, "SOFT" 50; }
.ab-company > p { margin: 0 0 1.8rem; color: var(--ink-2); }
/* rows share one label column (subgrid), as wide as the longest label; without subgrid the label sits above the value */
.ab-co-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.6rem; margin: 0 0 2rem; border-top: 1px solid var(--line); }
.ab-co-list > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; row-gap: .25rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.ab-co-list dt { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.ab-co-list dd { margin: 0; font-family: var(--font-display); font-size: 1.16rem; line-height: 1.35; font-variation-settings: "opsz" 48, "SOFT" 50; text-wrap: balance; }

@media (max-width: 1100px) {
  .ab-value { grid-template-columns: 4.6rem minmax(0, .8fr) minmax(0, 1.2fr) 52px; gap: 1rem 1.8rem; }
  .ab-value-icon { width: 52px; height: 52px; }
}
@media (max-width: 960px) {
  .ab-hero-grid, .ab-story-grid, .ab-meta-grid { grid-template-columns: minmax(0, 1fr); }
  .ab-hero-media { justify-self: center; width: min(100%, 460px); margin-top: .5rem; }
  .ab-port { right: 16px; }
  .ab-story-media { order: 2; aspect-ratio: 4 / 3.4; }
  .ab-value { grid-template-columns: 3.4rem minmax(0, 1fr) 48px; gap: .55rem 1.1rem; align-items: start; }
  .ab-value-num { grid-column: 1; grid-row: 1 / span 2; padding-top: .15rem; }
  .ab-value h3 { grid-column: 2; grid-row: 1; align-self: center; }
  .ab-value p { grid-column: 2 / -1; grid-row: 2; }
  .ab-value-icon { grid-column: 3; grid-row: 1; width: 48px; height: 48px; }
  .ab-value-icon .icon { width: 22px; height: 22px; }
}
@media (max-width: 560px) {
  .ab-value { grid-template-columns: 2.6rem minmax(0, 1fr) 44px; }
  .ab-value-num { font-size: 1.9rem; }
  .ab-value-icon { width: 44px; height: 44px; }
  .ab-co-list { grid-template-columns: minmax(0, 1fr); }
  .ab-quote-links { flex-direction: column; align-items: center; }
}

/* ---------- Destinations overview: the nine places as cards beside a sticky chart (a course from Tivat to each) ---------- */
.dp-stats { margin-top: clamp(48px, 5vw, 72px); }
.dp-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--space-grid); align-items: start; }
.dp-list { list-style: none; display: grid; gap: var(--space-cards); margin: 0; padding: 0; }
.dp-card {
  position: relative; display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); min-height: 270px; overflow: hidden;
  border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5);
  transition: box-shadow .5s var(--ease);
}
.dp-card.is-active { box-shadow: 0 0 0 1.5px var(--sand), 0 34px 70px -40px rgba(60, 28, 20, .6); }
.dp-media { position: relative; overflow: hidden; background: var(--paper-2); }
.dp-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.dp-card:hover .dp-media img { transform: scale(1.05); }
.dp-body { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px, 2.2vw, 32px); }
.dp-meta { display: flex; align-items: center; gap: .8rem; margin: 0 0 .85rem; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-deep); }
.dp-n { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: 0; text-transform: none; color: var(--mahogany); }
.dp-n::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .5; }
.dp-name { font-family: var(--font-display); font-weight: 360; font-size: clamp(1.6rem, 1.25rem + 1vw, 2.2rem); line-height: 1.1; letter-spacing: -.014em; font-variation-settings: "opsz" 72, "SOFT" 50; }
/* the name is the card's link (stretched over the card); the tour chips sit above it */
.dp-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.dp-name a:focus-visible { outline: none; }
.dp-name a:focus-visible::after { outline: 2px solid var(--sand-deep); outline-offset: -3px; }
.dp-kicker { margin: .35rem 0 .9rem; font-family: var(--font-display); font-style: italic; font-size: 1.05rem; line-height: 1.35; color: var(--mahogany); font-variation-settings: "opsz" 24, "SOFT" 100; }
.dp-text { margin: 0 0 1.3rem; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.dp-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; margin-top: auto; }
.dp-tours { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.dp-tours a {
  position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; padding: .3rem .85rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong); font-size: .8rem; font-weight: 500; line-height: 1.25; transition: background-color .3s, color .3s, box-shadow .3s;
}
.dp-tours a:hover { background: var(--mahogany); color: var(--ivory); box-shadow: none; }
.dp-km { margin: 0; font-size: .82rem; color: var(--ink-3); white-space: nowrap; }
.dp-km b { font-weight: 500; color: var(--ink-2); }
/* cards without a photo yet: a locator chart (generated, reuses the land of the big chart) */
.dp-media--chart { background: var(--chart-sea); }
.dp-locator { position: absolute; inset: 0; width: 100%; height: 100%; }
.dp-locator .m-sea { fill: var(--chart-sea); }
.dp-locator .m-grat { fill: none; stroke: rgba(219, 165, 129, .08); stroke-width: .7; vector-effect: non-scaling-stroke; }
.dp-locator .m-land { fill: #3B2319; }
.dp-locator .m-hatch { fill: url(#dm-hatch); }
.dp-locator .m-coast { fill: none; stroke: rgba(219, 165, 129, .6); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.dp-locator .m-course { fill: none; stroke: var(--sand); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.dp-locator .m-start circle { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.dp-locator .m-start .m-start-in { fill: var(--chart-sea); stroke: none; }
.dp-locator .m-dot { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.dp-locator .m-num { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; fill: var(--espresso); }
.dp-locator .m-ring { fill: none; stroke: var(--sand); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ping 2.6s var(--ease) infinite; }
.dp-coords { position: absolute; left: 14px; bottom: 12px; font-size: .64rem; letter-spacing: .16em; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }

/* the chart: numbered markers keep their size on screen (main.js scales .bk-s), courses drawn on demand */
.dp-map { position: sticky; top: 104px; }
.dm-chart .bk-landhatch { fill: url(#dm-hatch); }
.dm-ghost { fill: none; stroke: rgba(219, 165, 129, .32); stroke-width: 1.2; stroke-dasharray: 1.5 4.5; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: opacity .5s; }
.dm-chart.has-active .dm-ghost { opacity: .4; }
.dm-chart .dm-ghost.is-active { opacity: 0; }
.dm-course { fill: none; stroke: var(--sand); stroke-width: calc(var(--u) * 2.4px); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dm-glow { fill: none; stroke: rgba(219, 165, 129, .22); stroke-width: calc(var(--u) * 9px); stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.dm-course.is-active, .dm-glow.is-active { opacity: 1; }
.dm-dest { cursor: pointer; transition: opacity .4s; }
.dm-chart.has-active .dm-dest:not(.is-active) { opacity: .62; }
.dm-hit { fill: transparent; }
.dm-dot { fill: var(--chart-sea); stroke: var(--sand); stroke-width: 1.4; transition: fill .3s, stroke .3s; }
.dm-num { font-family: var(--font-sans); font-size: 9.5px; font-weight: 500; fill: var(--sand); pointer-events: none; transition: fill .3s; }
.dm-ring { fill: none; stroke: var(--sand); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.dm-dest:hover .dm-dot, .dm-dest.is-active .dm-dot { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.dm-dest:hover .dm-num, .dm-dest.is-active .dm-num { fill: var(--espresso); }
.dm-dest.is-active .dm-ring { animation: ping 2.6s var(--ease) infinite; }
.dm-label, .dm-start text { pointer-events: none; }
/* names only for the place in focus (the cards name them all); none at all on a small chart */
.dm-label { opacity: 0; transition: opacity .35s; }
.dm-dest.is-active .dm-label, .dm-dest:hover .dm-label { opacity: 1; }
.dm-chart.is-small .dm-label, .dm-chart.is-small .dm-sea, .dm-chart.is-small .bk-kicker { display: none; }
.dp-frame .chart-scale { left: auto; right: 20px; top: 22px; bottom: auto; justify-items: end; }
.dp-caption { display: flex; align-items: center; gap: 1rem; min-height: 3.4rem; margin: 1rem 0 0; }
.dp-cap-num {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--espresso); color: var(--sand);
  font-family: var(--font-display); font-style: italic; font-size: 1.05rem; transition: background-color .3s, color .3s;
}
.dp-caption.is-active .dp-cap-num { background: var(--sand); color: var(--espresso); }
.dp-cap-text { display: grid; gap: .1rem; line-height: 1.3; min-width: 0; }
.dp-cap-text b { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; font-variation-settings: "opsz" 48, "SOFT" 50; }
.dp-cap-text span { font-size: .86rem; color: var(--ink-3); }
.section-head-aside .routes-more { margin-top: 1.3rem; }
.routes .link-arrow { color: var(--sand-2); }

@media (max-width: 1100px) {
  .dp-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .dp-map { position: static; order: -1; }
  .dp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
  .dp-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 1100px) and (hover: none) {
  .dp-caption { display: none; }
}
@media (max-width: 700px) {
  .dp-list { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Destination page (template, phases 7–15): photo intro · story · course chart · tours · to do · tips · nearby ---------- */
/* intro: the home page's photo hero (.hero) with a breadcrumb, the place's number and area, quick facts in the bar */
.ds-hero-img { object-position: 50% 64%; }
.hero-media picture { display: contents; } /* a photo with another crop on phones (<picture>) fills the intro like a plain <img> */
.crumbs--light ol { color: var(--sand-2); }
.crumbs--light a { color: rgba(255, 255, 255, .72); }
.crumbs--light a:hover { color: #fff; }
.ds-hero .crumbs[data-hero-in] { animation-delay: .1s; }
.ds-place {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4em .9em; margin: 0 0 1.4rem;
  font-size: .74rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: rgba(255, 255, 255, .86);
}
.ds-place[data-hero-in] { animation-delay: .2s; }
.ds-place-n {
  display: inline-flex; align-items: center; gap: .9em; font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1.08rem; letter-spacing: 0; text-transform: none; color: var(--sand-2);
}
.ds-place-n::after { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6; }
.ds-place-sep { color: var(--sand-2); }
.ds-hero .ds-title { max-width: none; font-size: min(clamp(3rem, 1.4rem + 5.4vw, 7rem), 13.5vh); }
.ds-hero .ds-lead { max-width: 38rem; }
/* 02 · Our Lady of the Rocks: a long name over the island — the title a size smaller, the left side a shade darker so the
   bright island on the right carries the photo. Since v1.28.0 computers show the client's photo of the island with its
   lighthouse (16:9): on screens squarer than 16:9 its left edge shows, so the church sits right of the title */
.ds-hero--olr .ds-hero-img { object-position: 50% 50%; }
@media (min-width: 761px) { .ds-hero--olr .ds-hero-img { object-position: 0% 50%; } }
.ds-hero--olr .ds-title { font-size: min(clamp(3rem, 1.4rem + 4.8vw, 6.2rem), 12.5vh); }
.ds-hero--olr .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .6) 0%, rgba(20, 12, 10, .36) 38%, rgba(20, 12, 10, 0) 62%),
    linear-gradient(180deg, rgba(34, 18, 14, .62) 0%, rgba(34, 18, 14, 0) 24%),
    linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .5) 30%, rgba(34, 18, 14, 0) 62%);
}
/* 01 · Perast: over the rooftops to the islands, the bell tower at the right edge. The whole 4:3 frame on computers
   (wide screens lose a strip of sky, 4:3 screens see it all), the title a size smaller so it ends before the islands;
   the bright orange roofs under the title get a deeper veil on the left. Upright tablets: the bell tower stays in view */
.ds-hero--per .ds-hero-img { object-position: 74% 64%; }
.ds-hero--per .ds-title { font-size: min(clamp(3rem, 1.4rem + 4.8vw, 6.2rem), 12.5vh); }
@media (max-aspect-ratio: 1/1) { .ds-hero--per .ds-hero-img { object-position: 81% 50%; } }
/* 03 · Kotor: the old town and the harbour from the walls — the whole 3:2 frame on computers, the roofs of the old town
   kept in view (they fill the lower right); the title sits over the bay on the left, under a deeper veil */
.ds-hero--kot .ds-hero-img { object-position: 62% 70%; }
.ds-hero--kot .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .64) 0%, rgba(20, 12, 10, .36) 42%, rgba(20, 12, 10, 0) 68%),
    linear-gradient(180deg, rgba(34, 18, 14, .6) 0%, rgba(34, 18, 14, 0) 24%),
    linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .55) 30%, rgba(34, 18, 14, 0) 62%);
}
.ds-hero--per .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .62) 0%, rgba(20, 12, 10, .34) 40%, rgba(20, 12, 10, 0) 66%),
    linear-gradient(180deg, rgba(34, 18, 14, .62) 0%, rgba(34, 18, 14, 0) 24%),
    linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .55) 30%, rgba(34, 18, 14, 0) 62%);
}
/* 05 · Mamula: the island seen through agave leaves. Computers: a 16:9 crop from the bottom of the frame puts the island
   high in the upper middle, above the title (top-anchored, so very wide screens lose agave, not the island); the dark
   leaves under the title carry the text. Phones: see the mobile block (the centre crop zoomed from the bottom edge) */
.ds-hero--mam .ds-hero-img { object-position: 50% 0%; }
/* screens narrower than 3:2 (4:3 laptops, tablets): the island would sit right on the breadcrumb — a slight zoom from the
   bottom edge lifts it */
@media (min-width: 761px) and (max-aspect-ratio: 3/2) { .ds-hero--mam .hero-img { transform-origin: 50% 100%; animation-name: heroZoomMamS; } }
@keyframes heroZoomMamS { from { transform: scale(1.16); } to { transform: scale(1.06); } }
/* 06 · Luštica: sunset over the quay of Rose — the 16:9 centre band of an upright frame: palm fronds and the low sun on
   the left (behind the title, under a deeper veil), the stone houses and the boats of Rose on the right. Upright
   tablets keep the houses and the boats in view */
.ds-hero--lus .ds-hero-img { object-position: 50% 50%; }
@media (max-aspect-ratio: 1/1) { .ds-hero--lus .ds-hero-img { object-position: 74% 50%; } }
.ds-hero--lus .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .62) 0%, rgba(20, 12, 10, .34) 40%, rgba(20, 12, 10, 0) 66%),
    linear-gradient(180deg, rgba(34, 18, 14, .6) 0%, rgba(34, 18, 14, 0) 24%),
    linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .55) 30%, rgba(34, 18, 14, 0) 62%);
}
/* 07 · Herceg Novi: the old town and Forte Mare from the sea, Mount Orjen behind — the whole 3:2 frame on computers:
   the title over the houses and the beach on the left (under a deeper veil), Forte Mare to its right; on 4:3 screens
   the frame keeps its right-hand part, so the fortress stays clear of the title; upright tablets keep the fortress in
   the middle */
.ds-hero--hn .ds-hero-img { object-position: 30% 70%; }
@media (max-aspect-ratio: 1/1) { .ds-hero--hn .ds-hero-img { object-position: 80% 50%; } }
.ds-hero--hn .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .66) 0%, rgba(20, 12, 10, .4) 40%, rgba(20, 12, 10, 0) 64%),
    linear-gradient(180deg, rgba(34, 18, 14, .62) 0%, rgba(34, 18, 14, 0) 26%),
    linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .55) 30%, rgba(34, 18, 14, 0) 62%);
}
/* 08 · Island of Flowers: no photo of the island exists yet, so the intro is an illustration (assets/img/island-of-flowers.svg,
   _dev/site/art-flowers.js) shown like a photo — the island at dusk in the right third, the night sky and the dark hills
   on the left carry the text; the long name takes the smaller title (as Our Lady of the Rocks). Screens narrower than
   16:9 keep the right-hand part of the picture (the island), upright ones show the island in the middle */
.ds-hero--fl .ds-hero-img { object-position: 100% 50%; }
@media (max-aspect-ratio: 3/2) { .ds-hero--fl .ds-hero-img { object-position: 92% 50%; } }
@media (max-aspect-ratio: 1/1) { .ds-hero--fl .ds-hero-img { object-position: 90% 50%; } }
.ds-hero--fl .ds-title { font-size: min(clamp(3rem, 1.4rem + 4.8vw, 6.2rem), 12.5vh); }
.ds-hero--fl .ds-lead { max-width: 34rem; }
.ds-hero--fl .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .5) 0%, rgba(20, 12, 10, .22) 40%, rgba(20, 12, 10, 0) 60%),
    linear-gradient(180deg, rgba(34, 18, 14, .5) 0%, rgba(34, 18, 14, 0) 22%),
    linear-gradient(0deg, rgba(34, 18, 14, .86) 0%, rgba(34, 18, 14, .4) 26%, rgba(34, 18, 14, 0) 52%);
}
/* 09 · Risan: the Bay of Risan still as a mirror — the whole 4:3 frame on computers (as Perast): the title, a size
   smaller, over the pink sky and its reflection on the left, under a deeper veil, the bare mountain and its mirror
   image on the right; upright tablets keep the mountain in view. Phones: a crop round the mountain and its reflection (<picture>) */
.ds-hero--ris .ds-hero-img { object-position: 72% 56%; }
.ds-hero--ris .ds-title { font-size: min(clamp(3rem, 1.4rem + 4.8vw, 6.2rem), 12.5vh); }
@media (max-aspect-ratio: 1/1) { .ds-hero--ris .ds-hero-img { object-position: 78% 50%; } }
.ds-hero--ris .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .64) 0%, rgba(20, 12, 10, .36) 40%, rgba(20, 12, 10, 0) 66%),
    linear-gradient(180deg, rgba(34, 18, 14, .6) 0%, rgba(34, 18, 14, 0) 24%),
    linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .55) 30%, rgba(34, 18, 14, 0) 62%);
}

/* the story: copy beside a cross-section of the cave (schematic), then the numbers */
.ds-story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-grid); align-items: center; }
.ds-story .h2 em, .ds-course .h2 em, .ds-do .h2 em, .ds-tips .h2 em, .ds-near .h2 em { display: block; }
.ds-story-copy .prose { max-width: 38rem; }
.ds-stats { margin-top: clamp(56px, 6vw, 88px); }
.ds-stats dd > span { white-space: nowrap; }

.cv {
  margin: 0; overflow: hidden; border-radius: var(--radius); color: var(--on-dark);
  background: radial-gradient(90% 70% at 70% 40%, rgba(42, 179, 192, .14), transparent 70%), var(--espresso) var(--noise);
  box-shadow: 0 50px 90px -50px rgba(34, 18, 14, .75);
}
.cv-svg { display: block; width: 100%; height: auto; }
.cv-sea-top { stop-color: #134A50; }
.cv-sea-bottom { stop-color: #0A2326; }
.cv-glow-in { stop-color: #8AF2F2; stop-opacity: .95; }
.cv-glow-mid { stop-color: #2AB3C0; stop-opacity: .5; }
.cv-glow-out { stop-color: #1A7F8C; stop-opacity: 0; }
.cv-glow { animation: cvGlow 5.5s ease-in-out infinite; }
@keyframes cvGlow { 50% { opacity: .72; } }
.cv-surface { fill: none; stroke: rgba(246, 238, 228, .5); stroke-width: 1.4; }
.cv-rock { fill: #3B2319; }
.cv-hatch { fill: url(#cv-hatch); }
.cv-edge { fill: none; stroke: rgba(219, 165, 129, .6); stroke-width: 1.2; stroke-linejoin: round; }
.cv-hatch-line { stroke: rgba(219, 165, 129, .1); stroke-width: 1; }
.cv-sand { fill: none; stroke: #F1E8DC; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 10; opacity: .7; }
.cv-ray { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 3 9; animation: cvFlow 1.5s linear infinite; }
.cv-ray--sun { stroke: var(--sand-2); }
.cv-ray--sea { stroke: rgba(191, 243, 242, .7); }
.cv-ray--blue { stroke: #79ECEE; stroke-width: 2.8; }
@keyframes cvFlow { to { stroke-dashoffset: -24; } }
.cv-sun-core { fill: var(--sand); }
.cv-sun-rays path { fill: none; stroke: var(--sand-2); stroke-width: 2.2; stroke-linecap: round; }
.cv-sun-rays { transform-box: fill-box; transform-origin: center; animation: cvSpin 40s linear infinite; }
@keyframes cvSpin { to { rotate: 360deg; } }
.cv-anchor { fill: none; stroke: rgba(246, 238, 228, .3); stroke-width: 1.2; stroke-dasharray: 3 4; }
.cv-boat, .cv-swimmer { animation: cvBob 4.2s ease-in-out infinite; }
.cv-swimmer { animation-delay: -1.6s; }
@keyframes cvBob { 50% { translate: 0 3px; } }
.cv-hull { fill: var(--ivory); stroke: var(--espresso); stroke-width: 1.5; stroke-linejoin: round; }
.cv-cabin { fill: var(--mahogany); }
.cv-swim { fill: none; stroke: rgba(246, 238, 228, .55); stroke-width: 1.6; stroke-dasharray: 1 7; stroke-linecap: round; }
.cv-head { fill: var(--ivory); }
.cv-arms { fill: none; stroke: var(--ivory); stroke-width: 2.4; stroke-linecap: round; }
.cv-marks circle { fill: var(--sand); stroke: var(--espresso); stroke-width: 2.5; }
.cv-marks text { font-family: var(--font-sans); font-size: 13px; font-weight: 600; fill: var(--espresso); }
.cv-cap { padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 32px) clamp(22px, 2.4vw, 30px); border-top: 1px solid var(--line-dark); }
.cv-cap-title { display: block; margin-bottom: .8rem; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.cv-legend { list-style: none; counter-reset: cv; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.4rem; margin: 0; padding: 0; }
.cv-legend li { counter-increment: cv; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: .7rem; align-items: baseline; font-size: .9rem; line-height: 1.4; color: var(--on-dark-2); }
.cv-legend li::before {
  content: counter(cv); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; transform: translateY(5px);
  background: var(--sand); color: var(--espresso); font-size: .72rem; font-weight: 600; line-height: 1;
}
.cv-legend li:last-child { grid-column: 1 / -1; }

/* 02 · Our Lady of the Rocks: how the island grew — the same figure (.cv) at dusk: the natural reef at the core, rubble
   laid over five centuries (deeper = older), a ship sunk full of stones, the church on top, the Fašinada boats */
.cv--isl { background: radial-gradient(80% 60% at 84% 24%, rgba(219, 165, 129, .2), transparent 70%), var(--espresso) var(--noise); }
.isl-sun { fill: var(--sand); }
.isl-hills { fill: #2C1712; stroke: rgba(219, 165, 129, .3); stroke-width: 1.2; stroke-linejoin: round; }
.isl-town { fill: rgba(239, 229, 216, .26); }
.isl-glint { fill: none; stroke: var(--sand-2); stroke-width: 2; stroke-linecap: round; opacity: .55; }
.isl-mound { fill: #3B2319; }
.isl-stones { fill: url(#isl-stones); }
.isl-stone { fill: rgba(219, 165, 129, .16); stroke: rgba(26, 13, 10, .75); stroke-width: 1.3; stroke-linejoin: round; }
.isl-age--old { fill: rgba(20, 10, 8, .4); }
.isl-age--mid { fill: rgba(20, 10, 8, .2); }
.isl-strata { fill: none; stroke: rgba(219, 165, 129, .3); stroke-width: 1; stroke-dasharray: 2 5; }
.isl-reef { fill: #4A2A1D; }
.isl-reef-edge { fill: none; stroke: rgba(243, 201, 142, .7); stroke-width: 1.3; stroke-dasharray: 4 3; stroke-linejoin: round; }
.isl-edge { fill: none; stroke: rgba(219, 165, 129, .6); stroke-width: 1.2; stroke-linejoin: round; }
.isl-hull { fill: rgba(34, 18, 14, .78); stroke: rgba(246, 238, 228, .65); stroke-width: 1.4; stroke-linejoin: round; }
.isl-ribs { fill: none; stroke: rgba(246, 238, 228, .38); stroke-width: 1.2; stroke-linecap: round; }
.isl-glow-in { stop-color: #F3C98E; stop-opacity: .8; }
.isl-glow-out { stop-color: #F3C98E; stop-opacity: 0; }
.isl-glow { transform-box: fill-box; transform-origin: center; animation: islGlow 3.6s ease-in-out infinite; }
@keyframes islGlow { 50% { opacity: .45; transform: scale(.8); } }
.isl-icon { fill: #F3C98E; stroke: var(--espresso); stroke-width: 1; }
.isl-wall { fill: #EFE5D8; stroke: var(--espresso); stroke-width: 1.2; stroke-linejoin: round; }
.isl-roof { fill: #B4613F; stroke: var(--espresso); stroke-width: 1.2; stroke-linejoin: round; }
.isl-dome { fill: #7FB0AA; stroke: var(--espresso); stroke-width: 1.2; }
.isl-win { fill: var(--espresso); }
.isl-cross, .isl-pole { fill: none; stroke: var(--sand-2); stroke-width: 1.5; stroke-linecap: round; }
.isl-light { fill: #F3C98E; animation: islBlink 3s steps(1) infinite; }
@keyframes islBlink { 50% { opacity: .15; } }
.isl-rope { fill: none; stroke: rgba(246, 238, 228, .6); stroke-width: 1.2; }
.isl-boat > g { animation: cvBob 4.2s ease-in-out infinite; }
.isl-boat--2 > g { animation-delay: -1.4s; }
.isl-boat--3 > g { animation-delay: -2.8s; }
.isl-cargo { fill: var(--sand-2); stroke: var(--espresso); stroke-width: .8; }
.isl-drop { fill: var(--sand-2); animation: islDrop 3.6s cubic-bezier(.5, 0, .9, .6) infinite; }
.isl-drop:nth-child(2) { animation-delay: 1.2s; }
.isl-drop:nth-child(3) { animation-delay: 2.4s; }
@keyframes islDrop { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: 1; } 85% { opacity: .9; } 100% { opacity: 0; transform: translateY(92px); } }

/* 01 · Perast: the town seen from the sea, as on an old coastal view — a hand-tinted print on paper (the light .cv):
   St. Elijah behind, the Fortress of the Holy Cross on the slope, palaces with their towers, Bujović Palace, the bell
   tower of St. Nicholas, the quay, a gajeta moored and our speedboat cruising along the waterfront */
.cv--per {
  color: var(--ink);
  background: radial-gradient(70% 60% at 14% 18%, rgba(219, 165, 129, .2), transparent 70%), var(--paper) var(--noise);
  box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -56px rgba(60, 28, 20, .55);
}
.cv--per .cv-cap { border-top-color: var(--line); }
.cv--per .cv-cap-title { color: var(--sand-deep); }
.cv--per .cv-legend li { color: var(--ink-2); }
.per-plate { fill: none; stroke: rgba(74, 36, 29, .5); stroke-width: 1; }
.per-plate--in { stroke: rgba(74, 36, 29, .22); }
.per-sun { fill: #EBC29B; }
.per-sun-ring { fill: none; stroke: rgba(142, 90, 57, .3); stroke-width: 1; }
.per-cloud { fill: none; stroke: rgba(74, 36, 29, .2); stroke-width: 1.2; stroke-linecap: round; }
.per-gull { fill: none; stroke: rgba(34, 18, 14, .6); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.per-gulls { animation: perGull 10s ease-in-out infinite alternate; }
@keyframes perGull { to { translate: -14px -6px; } }
.per-range { fill: #E9DCCB; stroke: rgba(74, 36, 29, .3); stroke-width: 1; stroke-linejoin: round; }
.per-mount { fill: #E2CDB4; }
.per-hatch { fill: url(#per-hatch); }
.per-hatch-line { stroke: rgba(74, 36, 29, .13); stroke-width: 1; }
.per-ridge { fill: none; stroke: rgba(74, 36, 29, .7); stroke-width: 1.3; stroke-linejoin: round; }
.per-contour { fill: none; stroke: rgba(74, 36, 29, .2); stroke-width: 1; stroke-linecap: round; }
.per-terrace { fill: none; stroke: rgba(74, 36, 29, .26); stroke-width: 1; stroke-dasharray: 3 4; }
.per-olive { fill: #9A9A72; stroke: rgba(74, 36, 29, .45); stroke-width: .8; }
.per-cypress { fill: #5D6146; stroke: rgba(34, 18, 14, .6); stroke-width: .8; }
.per-fort { fill: #EBDDCA; stroke: var(--mahogany-deep); stroke-width: 1.2; stroke-linejoin: round; }
.per-merlon { fill: none; stroke: var(--mahogany-deep); stroke-width: 3; stroke-dasharray: 2.6 2.4; }
.per-slit { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.4; stroke-linecap: round; }
.per-gate, .per-win, .per-arch, .per-bollard { fill: var(--mahogany-deep); }
.per-path { fill: none; stroke: rgba(74, 36, 29, .42); stroke-width: 1; stroke-dasharray: 2 3; }
.per-wall { fill: #FBF6EE; stroke: var(--mahogany-deep); stroke-width: 1.1; stroke-linejoin: round; }
.per-wall--sand { fill: #F1DCC1; }
.per-wall--back { fill: #F2E7D8; stroke: rgba(74, 36, 29, .5); }
.per-roof { fill: #C27A57; stroke: var(--mahogany-deep); stroke-width: 1.1; stroke-linejoin: round; }
.per-roof--back { fill: #D9A486; stroke: rgba(74, 36, 29, .5); }
.per-line { fill: none; stroke: var(--mahogany-deep); stroke-width: 1; }
.per-line--bold { stroke-width: 2.2; }
.per-balusters { fill: none; stroke: var(--mahogany-deep); stroke-width: 6; stroke-dasharray: 1.2 2.6; }
.per-spire { fill: #5A4038; stroke: var(--mahogany-deep); stroke-width: 1.1; stroke-linejoin: round; }
.per-spire-lit { fill: none; stroke: rgba(246, 238, 228, .42); stroke-width: 1.2; }
.per-clock { fill: #FBF6EE; stroke: var(--mahogany-deep); stroke-width: 1; }
.per-cross { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.4; stroke-linecap: round; }
.per-bell { fill: var(--sand); transform-box: fill-box; transform-origin: 50% 0; animation: perBell 4.5s ease-in-out infinite; }
@keyframes perBell { 0%, 60%, 100% { rotate: 0deg; } 70% { rotate: 16deg; } 80% { rotate: -12deg; } 90% { rotate: 6deg; } }
.per-quay { fill: #E4D2BB; }
.per-quay-top { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.2; }
.per-joints { fill: none; stroke: rgba(74, 36, 29, .3); stroke-width: 11; stroke-dasharray: 1 17; }
.per-sea { fill: url(#per-sea); }
.per-sea-top { stop-color: #B9CEC7; }
.per-sea-bottom { stop-color: #8FB0A9; }
.per-wave { fill: none; stroke: rgba(34, 18, 14, .28); stroke-width: 1; stroke-linecap: round; }
.per-waves { animation: perWave 7s ease-in-out infinite alternate; }
.per-waves--b { animation-duration: 9s; animation-direction: alternate-reverse; }
@keyframes perWave { to { translate: 6px 0; } }
.per-refl { fill: none; stroke: rgba(74, 36, 29, .35); stroke-width: 1.6; stroke-linecap: round; }
.per-refl-soft { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linecap: round; }
.per-rope { fill: none; stroke: rgba(74, 36, 29, .55); stroke-width: 1; }
.per-buoy { fill: #D9774F; stroke: var(--mahogany-deep); stroke-width: 1; }
.per-buoys { animation: cvBob 5s ease-in-out infinite; animation-delay: -2.6s; }
.per-gajeta { fill: #A86F48; stroke: var(--mahogany-deep); stroke-width: 1.1; stroke-linejoin: round; }
.per-mast { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.4; }
.per-yard { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.6; stroke-linecap: round; }
.per-sail { fill: none; stroke: #F6ECDD; stroke-width: 3.4; stroke-linecap: round; }
.per-boat > g, .per-speed > g { animation: cvBob 4.2s ease-in-out infinite; }
.per-speed > g { animation-delay: -1.8s; }
.per-wake { fill: none; stroke: #FFFDF8; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 7 9; animation: cvFlow 1.6s linear infinite; }

/* 03 · Kotor: the walls by night — the hill of St. John hatched as in the other figures, the walls in stone; when the
   figure comes into view (.is-in from data-reveal) their lamps come on from the town up to the fortress (clip-path from
   the bottom), then flicker softly. Without JS, or with reduced motion, the lamps are simply on */
.cv--kot { background: radial-gradient(70% 55% at 86% 8%, rgba(243, 201, 142, .14), transparent 62%), radial-gradient(80% 50% at 50% 100%, rgba(42, 179, 192, .1), transparent 70%), var(--espresso) var(--noise); }
.kot-stars circle { fill: #F6EEE4; animation: kotTwinkle 3.2s ease-in-out infinite; }
.kot-stars circle:nth-child(3n) { animation-delay: -1.1s; }
.kot-stars circle:nth-child(3n+1) { animation-duration: 4.2s; animation-delay: -2.3s; }
@keyframes kotTwinkle { 50% { opacity: .3; } }
.kot-moon { fill: var(--sand-2); }
.kot-range { fill: #2A1611; stroke: rgba(219, 165, 129, .22); stroke-width: 1.1; stroke-linejoin: round; }
.kot-path { fill: none; stroke: rgba(219, 165, 129, .45); stroke-width: 1.3; stroke-dasharray: 2 3; stroke-linejoin: round; }
.kot-wall, .kot-fort, .kot-seawall { fill: #4A2A1D; stroke: rgba(219, 165, 129, .7); stroke-width: 1.1; stroke-linejoin: round; }
.kot-stone { fill: none; stroke: #6B4434; stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.kot-merlon { fill: none; stroke: rgba(219, 165, 129, .7); stroke-width: 3; stroke-dasharray: 2.4 2.2; }
.kot-glow { fill: none; stroke: #F3C98E; stroke-opacity: .2; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.kot-lamps { fill: none; stroke: #FBE3B5; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0 6.5; }
.kot-lights { animation: kotFlicker 5s ease-in-out infinite; }
.js .cv--kot .kot-lights { clip-path: inset(100% 0 0 0); }
.js .cv--kot.is-in .kot-lights { animation: kotOn 3.2s .4s cubic-bezier(.45, 0, .2, 1) forwards, kotFlicker 5s 3.6s ease-in-out infinite; }
@keyframes kotOn { to { clip-path: inset(0 0 0 0); } }
@keyframes kotFlicker { 50% { opacity: .8; } }
.kot-house { fill: #3E2318; stroke: rgba(219, 165, 129, .5); stroke-width: 1; stroke-linejoin: round; }
.kot-roof { fill: #5A3424; stroke: rgba(219, 165, 129, .5); stroke-width: 1; stroke-linejoin: round; }
.kot-win, .kot-lit, .kot-gate { fill: #F3C98E; }
.kot-win { animation: kotTwinkle 6s ease-in-out infinite; }
.kot-clock { fill: #F3C98E; stroke: var(--espresso); stroke-width: .8; }
.kot-rose { fill: #F3C98E; opacity: .85; }
.kot-cross { fill: none; stroke: var(--sand-2); stroke-width: 1.3; stroke-linecap: round; }
.kot-gate--sea { filter: drop-shadow(0 0 4px rgba(243, 201, 142, .7)); }
.kot-river { fill: none; stroke: #1E4C52; stroke-width: 2.2; stroke-linecap: round; opacity: .75; }
.kot-sea { fill: url(#kot-sea); }
.kot-sea-top { stop-color: #123236; }
.kot-sea-bottom { stop-color: #081719; }
.kot-refl path { fill: none; stroke: #F3C98E; stroke-width: 2; stroke-linecap: round; opacity: .55; }
.kot-refl .kot-refl--far { opacity: .3; }
.kot-refl { animation: kotShimmer 3.6s ease-in-out infinite alternate; }
@keyframes kotShimmer { to { translate: 2px 0; opacity: .7; } }
.kot-swell { fill: none; stroke: rgba(246, 238, 228, .14); stroke-width: 1.2; }

/* 05 · Mamula: the gate of the bay as a plan at dusk — the coastline traced from the OSM data of the site map (Prevlaka
   on the left, Luštica on the right), the island drawn by hand, depth lines along the shores (a wide light stroke cut
   back by a slightly narrower one in the sea colour) and rhumb lines from the island, as on an old sea chart. When the
   figure comes into view (.is-in from data-reveal) the reach of the three forts' guns opens one after another
   (schematic); the boat sails the Blue Cave course through the gate (translate + rotate keyframes sampled from the
   curve). Without JS the ranges are simply drawn; with reduced motion the boat rests in the gate (its transform attribute) */
.cv--mam { background: var(--espresso); }
.mam-sea { fill: #0F3539; }
.mam-d { fill: none; stroke-linejoin: round; }
.mam-d--a2 { stroke: rgba(219, 165, 129, .1); stroke-width: 34; }
.mam-d--b2 { stroke: #0F3539; stroke-width: 32; }
.mam-d--a1 { stroke: rgba(219, 165, 129, .16); stroke-width: 17; }
.mam-d--b1 { stroke: #0F3539; stroke-width: 15; }
.mam-glow-in { stop-color: #2AB3C0; stop-opacity: .22; }
.mam-glow-out { stop-color: #2AB3C0; stop-opacity: 0; }
.mam-rhumbs { fill: none; stroke: rgba(219, 165, 129, .1); stroke-width: 1; }
.mam-range { fill: rgba(243, 201, 142, .05); stroke: rgba(243, 201, 142, .45); stroke-width: 1.2; stroke-dasharray: 2 5; transform-box: fill-box; transform-origin: center; }
.js .cv--mam .mam-range { transform: scale(0); opacity: 0; }
.js .cv--mam.is-in .mam-range { animation: mamRange 1.6s .3s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .cv--mam.is-in .mam-range:nth-child(2) { animation-delay: .75s; }
.js .cv--mam.is-in .mam-range:nth-child(3) { animation-delay: 1.2s; }
@keyframes mamRange { to { transform: scale(1); opacity: 1; } }
.mam-gate { fill: none; stroke: var(--sand-2); stroke-width: 1.6; stroke-dasharray: 1 6; stroke-linecap: round; }
.mam-wall { fill: #4A2A1D; stroke: var(--sand); stroke-width: 1.3; }
.mam-merlon { fill: none; stroke: var(--sand); stroke-width: 2.4; stroke-dasharray: 1.5 2.2; }
.mam-keep { fill: var(--sand-2); }
.mam-course { fill: none; stroke: rgba(246, 238, 228, .55); stroke-width: 1.6; stroke-dasharray: 1 7; stroke-linecap: round; }
.mam-boat { animation: mamSail 16s linear infinite; }
.mam-wake { fill: none; stroke: rgba(255, 253, 248, .75); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 5 6; animation: cvFlow 1.4s linear infinite; }
@keyframes mamSail {
  0% { transform: translate(226.6px, -29.8px) rotate(87.4deg); opacity: 0; }
  4.17% { transform: translate(228.1px, -.3px) rotate(86.1deg); opacity: 1; }
  8.33% { transform: translate(231.4px, 29.1px) rotate(79.6deg); }
  12.5% { transform: translate(240.3px, 57.2px) rotate(66.6deg); }
  16.67% { transform: translate(254.5px, 83.1px) rotate(55.7deg); }
  20.83% { transform: translate(273.6px, 105.6px) rotate(43deg); }
  25% { transform: translate(297.5px, 122.9px) rotate(29.2deg); }
  29.17% { transform: translate(324.5px, 134.9px) rotate(17.7deg); }
  33.33% { transform: translate(353.6px, 139.9px) rotate(5.9deg); }
  37.5% { transform: translate(382.9px, 143.5px) rotate(10.9deg); }
  41.67% { transform: translate(410px, 154.8px) rotate(34.7deg); }
  45.83% { transform: translate(430.7px, 175.7px) rotate(55.1deg); }
  50% { transform: translate(442.7px, 202.5px) rotate(79.4deg); }
  54.17% { transform: translate(445.6px, 231.9px) rotate(83.7deg); }
  58.33% { transform: translate(451.2px, 260.9px) rotate(78.4deg); }
  62.5% { transform: translate(458.1px, 289.7px) rotate(72.8deg); }
  66.67% { transform: translate(470.9px, 316.1px) rotate(52.8deg); }
  70.83% { transform: translate(492.2px, 336.5px) rotate(37.2deg); }
  75% { transform: translate(516.4px, 353.5px) rotate(34.7deg); }
  79.17% { transform: translate(541.1px, 369.8px) rotate(31.6deg); }
  83.33% { transform: translate(566.6px, 384.8px) rotate(29.6deg); }
  87.5% { transform: translate(592.3px, 399.3px) rotate(29.3deg); }
  91.67% { transform: translate(618.2px, 413.6px) rotate(28.5deg); }
  95.83% { transform: translate(644.3px, 427.6px) rotate(28.2deg); opacity: 1; }
  100% { transform: translate(670.4px, 441.5px) rotate(28.1deg); opacity: 0; }
}
.mam-water { font-family: var(--font-display); font-style: italic; font-size: 17px; letter-spacing: .1em; fill: rgba(219, 165, 129, .6); }
.mam-compass circle { fill: none; stroke: rgba(219, 165, 129, .45); stroke-width: 1; stroke-dasharray: 1 3; }
.mam-cn { fill: var(--sand); }
.mam-cs { fill: rgba(219, 165, 129, .35); }
.mam-compass text { font-family: var(--font-display); font-style: italic; font-size: 13px; fill: var(--on-dark); }
.mam-scale path { fill: none; stroke: rgba(219, 165, 129, .7); stroke-width: 1.2; }
.mam-scale text { font-family: var(--font-sans); font-size: 10px; letter-spacing: .12em; fill: var(--on-dark-2); }
.mam-neat { fill: none; stroke: rgba(219, 165, 129, .35); stroke-width: 1; }
.mam-ticks { fill: none; stroke: rgba(219, 165, 129, .22); stroke-width: 3; stroke-dasharray: 11.68 11.68; }
/* a figure traced from map data credits it under its legend */
.cv-credit { margin: 1rem 0 0; font-size: .66rem; color: var(--on-dark-2); }
.cv-credit a { text-decoration: underline; text-underline-offset: 2px; }

/* 06 · Luštica: the peninsula in cross-section on a summer day (a light .cv, like Perast) — from the calm Bay of Tivat
   (left, north) over the olive terraces, a hilltop village and Obosnik down the steep sea side to the open sea (right),
   heights exaggerated. When the figure comes into view (.is-in from data-reveal) the olive trees come up the terraces
   one after another (the individual `scale` property, so the tree keeps its transform attribute); the swell, the light
   in the clear water, the fish, the spray and the glow in the cave move on their own. Without JS the trees stand */
.cv--lus {
  color: var(--ink);
  background: var(--paper) var(--noise);
  box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -56px rgba(60, 28, 20, .55);
}
.cv--lus .cv-cap { border-top-color: var(--line); }
.cv--lus .cv-cap-title { color: var(--sand-deep); }
.cv--lus .cv-legend li { color: var(--ink-2); }
.lus-sky-top { stop-color: #EFD9BF; }
.lus-sky-low { stop-color: #FAF2E7; }
.lus-sun-core { fill: #EDB77E; }
.lus-sun-rays path { fill: none; stroke: #DFA06A; stroke-width: 2; stroke-linecap: round; }
.lus-sun-rays { transform-box: fill-box; transform-origin: center; animation: cvSpin 40s linear infinite; }
.lus-cloud { fill: rgba(255, 255, 255, .6); stroke: rgba(74, 36, 29, .16); stroke-width: 1; stroke-linejoin: round; }
.lus-gull { fill: none; stroke: rgba(34, 18, 14, .55); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.lus-gulls { animation: perGull 10s ease-in-out infinite alternate; }
.lus-far { fill: #E3D2BD; }
.lus-far-ridge { fill: none; stroke: rgba(74, 36, 29, .25); stroke-width: 1; }
.lus-town { fill: rgba(74, 36, 29, .3); }
.lus-bay-top { stop-color: #8FB8B1; }
.lus-bay-deep { stop-color: #4B7B79; }
.lus-sea-top { stop-color: #56B9C4; }
.lus-sea-deep { stop-color: #17596A; }
.lus-calm { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1.2; }
.lus-refl { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.4; stroke-linecap: round; animation: lusShimmer 4s ease-in-out infinite alternate; }
@keyframes lusShimmer { to { opacity: .35; translate: 3px 0; } }
.lus-grass { fill: none; stroke: #5D8063; stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 100%; animation: lusSway 5s ease-in-out infinite alternate; }
@keyframes lusSway { from { transform: skewX(-5deg); } to { transform: skewX(5deg); } }
.lus-ray { fill: none; stroke: rgba(255, 255, 255, .42); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3 9; animation: cvFlow 1.8s linear infinite; }
.lus-fish path { fill: #1E4F5B; }
.lus-fish { animation: lusFish 7s ease-in-out infinite alternate; }
@keyframes lusFish { to { translate: -10px 2px; } }
.lus-rock { fill: #E7D5BD; }
.lus-under { fill: rgba(74, 36, 29, .07); }
.lus-strata { fill: none; stroke: rgba(74, 36, 29, .2); stroke-width: 1; stroke-dasharray: 5 4; }
.lus-cliff { fill: none; stroke: rgba(74, 36, 29, .45); stroke-width: 1.2; stroke-linecap: round; }
.lus-hatch-line { stroke: rgba(74, 36, 29, .12); stroke-width: 1; }
.lus-edge { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.2; stroke-linejoin: round; }
.lus-pebbles { fill: none; stroke: #F4EBDD; stroke-width: 4.2; stroke-linecap: round; }
.lus-wall { fill: none; stroke: #8F7A60; stroke-width: 4; stroke-dasharray: 2.4 1.2; }
.lus-house { fill: #FBF6EE; stroke: var(--mahogany-deep); stroke-width: 1; stroke-linejoin: round; }
.lus-roof { fill: #C27A57; stroke: var(--mahogany-deep); stroke-width: 1; stroke-linejoin: round; }
.lus-win { fill: var(--mahogany-deep); }
.lus-rope { fill: none; stroke: rgba(74, 36, 29, .5); stroke-width: 1; }
.lus-gajeta > g { animation: cvBob 4.6s ease-in-out infinite; animation-delay: -1s; }
.lus-hull { fill: #A86F48; stroke: var(--mahogany-deep); stroke-width: 1.1; stroke-linejoin: round; }
.lus-mast { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.4; }
.lus-trunk { fill: none; stroke: #6B4A36; stroke-width: 2; stroke-linecap: round; }
.lus-crown { fill: #9EA47C; stroke: rgba(74, 36, 29, .45); stroke-width: .9; stroke-linejoin: round; }
.lus-olive--back .lus-crown { fill: #BFC2A1; stroke: rgba(74, 36, 29, .3); }
.lus-olive--back .lus-trunk { stroke: #8A6A55; }
.lus-leaf { fill: none; stroke: #DCE0C6; stroke-width: 1.6; stroke-linecap: round; opacity: .8; animation: lusLeaf 3.4s ease-in-out infinite alternate; }
.lus-grove > g:nth-child(2n) .lus-leaf { animation-delay: -1.7s; }
.lus-grove > g:nth-child(3n) .lus-leaf { animation-delay: -.9s; }
@keyframes lusLeaf { to { opacity: .2; } }
.lus-olive { transform-box: fill-box; transform-origin: 50% 100%; }
.js .cv--lus .lus-olive { scale: 0; }
.js .cv--lus.is-in .lus-olive { animation: lusGrow .9s .3s cubic-bezier(.2, .8, .3, 1.25) forwards; }
.js .cv--lus.is-in .lus-grove > g:nth-child(2) .lus-olive { animation-delay: .48s; }
.js .cv--lus.is-in .lus-grove > g:nth-child(3) .lus-olive { animation-delay: .66s; }
.js .cv--lus.is-in .lus-grove > g:nth-child(4) .lus-olive { animation-delay: .84s; }
.js .cv--lus.is-in .lus-grove > g:nth-child(5) .lus-olive { animation-delay: 1.02s; }
.js .cv--lus.is-in .lus-grove > g:nth-child(6) .lus-olive { animation-delay: 1.2s; }
@keyframes lusGrow { to { scale: 1; } }
.lus-cypress { fill: #5D6146; stroke: rgba(34, 18, 14, .55); stroke-width: .8; }
.lus-bell { fill: var(--sand); }
.lus-cross { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.2; stroke-linecap: round; }
.lus-cairn { fill: var(--sand-deep); stroke: var(--mahogany-deep); stroke-width: 1; stroke-linejoin: round; }
.lus-maquis { fill: #75825A; stroke: rgba(34, 18, 14, .35); stroke-width: .8; }
.lus-scrub { fill: none; stroke: #7E8B5C; stroke-width: 6.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 6 2.5 10 3 4 2; }
.lus-cave { fill: #183E46; stroke: var(--mahogany-deep); stroke-width: 1; stroke-linejoin: round; }
.lus-cave-in { stop-color: #8AF2F2; stop-opacity: .9; }
.lus-cave-out { stop-color: #2AB3C0; stop-opacity: 0; }
.lus-cave-light { animation: cvGlow 4.5s ease-in-out infinite; }
.lus-wave { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1.6; stroke-linecap: round; }
.lus-wave--b { stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; }
.lus-waves { animation: lusSwell 3.6s ease-in-out infinite alternate; }
@keyframes lusSwell { to { translate: -8px 1.5px; } }
.lus-spray circle { fill: #fff; opacity: 0; animation: lusSpray 2.8s ease-out infinite; }
.lus-spray circle:nth-child(2) { animation-delay: .7s; }
.lus-spray circle:nth-child(3) { animation-delay: 1.4s; }
@keyframes lusSpray { 0% { opacity: 0; translate: 0 6px; } 30% { opacity: .95; } 100% { opacity: 0; translate: 3px -8px; } }
.lus-wind { fill: none; stroke: rgba(74, 36, 29, .3); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 16 9; animation: lusWind 2.6s linear infinite; }
@keyframes lusWind { to { stroke-dashoffset: 25; } }
.lus-anchor { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.1; stroke-dasharray: 3 4; }
.lus-water { font-family: var(--font-display); font-style: italic; font-size: 13.5px; letter-spacing: .06em; fill: rgba(251, 246, 238, .94); }

/* 07 · Herceg Novi: the old town climbing from the sea, a travel poster at golden hour (.cv on mahogany) — Mount Orjen
   in two ranges behind, Španjola on the hilltop, Kanli Kula on the slope, the houses, the church of St Michael on
   Belavista, the clock tower (the gate to the old town), Forte Mare on its rock at the water, the quay of the old
   harbour, palms, cypresses and mimosa. When the figure comes into view (.is-in from data-reveal) our walk climbs the
   stairways from the harbour to Španjola (stroke-dashoffset over pathLength 1) and the mimosa opens (the individual
   `scale` property on the inner group, so each tree keeps its transform attribute); the sun glitter, the gulls, the
   flag, the clock and the boats move on their own. Without JS the walk is drawn and the mimosa in bloom */
.cv--hn { background: radial-gradient(80% 60% at 86% 14%, rgba(219, 165, 129, .18), transparent 70%), var(--mahogany-deep) var(--noise); }
.hn-sky-top { stop-color: #E3A98A; }
.hn-sky-mid { stop-color: #F2CDA4; }
.hn-sky-low { stop-color: #F8E2BF; }
.hn-halo-in { stop-color: #FFF0CF; stop-opacity: .9; }
.hn-halo-out { stop-color: #FBE0B4; stop-opacity: 0; }
.hn-sun { fill: #FFF6E0; }
.hn-sun-halo { animation: cvGlow 6s ease-in-out infinite; }
.hn-gull { fill: none; stroke: rgba(74, 36, 29, .6); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hn-gulls { animation: perGull 10s ease-in-out infinite alternate; }
.hn-far { fill: #D8A994; }
.hn-far-ridge { fill: none; stroke: rgba(255, 244, 228, .55); stroke-width: 1.2; stroke-linejoin: round; }
.hn-mid { fill: #B88473; }
.hn-hill { fill: #8B8559; }
.hn-trees circle { fill: #6E6F45; }
.hn-cypress { fill: #4E5636; }
.hn-wall { fill: #F6E7CF; stroke: #4A241D; stroke-width: .9; stroke-linejoin: round; }
.hn-wall--ochre { fill: #EDCB98; }
.hn-wall--rose { fill: #EFC3A8; }
.hn-wall--yellow { fill: #F0C76A; }
.hn-wall--church { fill: #FBF3E4; }
.hn-wall--tower { fill: #E9D6B6; }
.hn-roof { fill: #C2603B; stroke: #4A241D; stroke-width: .9; stroke-linejoin: round; }
.hn-win { fill: #4A241D; }
.hn-dome { fill: #9FA6A0; stroke: #4A241D; stroke-width: .9; }
.hn-cross { fill: none; stroke: #4A241D; stroke-width: 1.2; stroke-linecap: round; }
.hn-fort-wall { fill: #D9C09C; stroke: #4A241D; stroke-width: .9; stroke-linejoin: round; }
.hn-fort-top { fill: #D9C09C; stroke: #4A241D; stroke-width: .9; stroke-linejoin: round; }
.hn-fort-slit { fill: #4A241D; }
.hn-gate { fill: #3A1C16; }
.hn-clock-face { fill: #FFF6E0; stroke: #4A241D; stroke-width: .9; }
.hn-clock-hands, .hn-clock-hand { fill: none; stroke: #4A241D; stroke-width: 1.1; stroke-linecap: round; }
.hn-clock-hand { transform-box: view-box; transform-origin: 240px 214px; animation: cvSpin 12s linear infinite; }
.hn-steps { fill: none; stroke: rgba(74, 36, 29, .55); stroke-width: 1; stroke-linejoin: round; }
.hn-palm-trunk { fill: none; stroke: #7A5B42; stroke-width: 2.2; stroke-linecap: round; }
.hn-palm-leaf { fill: none; stroke: #5C6E43; stroke-width: 2.6; stroke-linecap: round; }
.hn-mimosa-trunk { fill: none; stroke: #6B4A36; stroke-width: 2; stroke-linecap: round; }
.hn-mimosa-puff { fill: #F3BE2C; stroke: rgba(74, 36, 29, .35); stroke-width: .8; }
.hn-mimosa-dots { fill: none; stroke: #FFE58A; stroke-width: 2.4; stroke-linecap: round; }
.hn-mimosa { transform-box: fill-box; transform-origin: 50% 100%; }
.hn-rock { fill: #A88A6C; stroke: #4A241D; stroke-width: .9; stroke-linejoin: round; }
.hn-tower { fill: url(#hn-stone); stroke: #4A241D; stroke-width: .9; }
.hn-stone-lit { stop-color: #EBD8B8; }
.hn-stone-mid { stop-color: #D3B790; }
.hn-stone-shade { stop-color: #B39370; }
.hn-tower-band { fill: none; stroke: rgba(74, 36, 29, .3); stroke-width: 1; }
.hn-pole { fill: none; stroke: #4A241D; stroke-width: 1.2; }
.hn-flag { fill: #C2603B; transform-box: fill-box; transform-origin: 0 50%; animation: hnFlag 2.4s ease-in-out infinite alternate; }
@keyframes hnFlag { to { scale: .82 1; } }
.hn-quay { fill: #E6D3B4; stroke: #4A241D; stroke-width: .9; }
.hn-bollards { fill: none; stroke: #4A241D; stroke-width: 2.4; stroke-linecap: round; }
.hn-walk-halo { fill: none; stroke: rgba(74, 36, 29, .55); stroke-width: 4.6; stroke-linejoin: round; stroke-linecap: round; }
.hn-walk { fill: none; stroke: #FFF4DC; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.js .cv--hn .hn-walk, .js .cv--hn .hn-walk-halo { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .cv--hn.is-in .hn-walk, .js .cv--hn.is-in .hn-walk-halo { animation: hnWalk 3.2s .4s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes hnWalk { to { stroke-dashoffset: 0; } }
.js .cv--hn .hn-mimosa { scale: 0; }
.js .cv--hn.is-in .hn-mimosa { animation: hnBloom .8s 1s cubic-bezier(.2, .8, .3, 1.3) forwards; }
.js .cv--hn.is-in .hn-grove > g:nth-child(2) .hn-mimosa { animation-delay: 1.35s; }
.js .cv--hn.is-in .hn-grove > g:nth-child(3) .hn-mimosa { animation-delay: 1.7s; }
.js .cv--hn.is-in .hn-grove > g:nth-child(4) .hn-mimosa { animation-delay: 2.05s; }
.js .cv--hn.is-in .hn-grove > g:nth-child(5) .hn-mimosa { animation-delay: 2.4s; }
@keyframes hnBloom { to { scale: 1; } }
.hn-sea-top { stop-color: #3F8790; }
.hn-sea-deep { stop-color: #173E48; }
.hn-refl { fill: none; stroke: rgba(23, 62, 72, .55); stroke-width: 3; stroke-linecap: round; }
.hn-refl--town { fill: none; stroke: rgba(255, 236, 205, .3); stroke-width: 1.4; stroke-dasharray: 14 9 4 9; }
.hn-glint { fill: none; stroke: #FFE6B6; stroke-width: 1.8; stroke-linecap: round; animation: hnGlint 3.2s ease-in-out infinite alternate; }
@keyframes hnGlint { to { opacity: .35; translate: -4px 0; } }
.hn-gajeta > g { animation: cvBob 4.6s ease-in-out infinite; animation-delay: -1.2s; }
.hn-hull { fill: #A86F48; stroke: #4A241D; stroke-width: 1.1; stroke-linejoin: round; }
.hn-mast { fill: none; stroke: #4A241D; stroke-width: 1.4; }
.hn-wake { fill: none; stroke: rgba(255, 246, 228, .75); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 10 6; animation: lusWind 1.6s linear infinite; }
.hn-wave { fill: none; stroke: rgba(255, 246, 228, .3); stroke-width: 1.3; stroke-linecap: round; animation: lusSwell 4.2s ease-in-out infinite alternate; }
.hn-sail > g { animation: cvBob 5.2s ease-in-out infinite; animation-delay: -2.4s; }
.hn-sail-hull { fill: #F6E7CF; stroke: #4A241D; stroke-width: 1.1; stroke-linejoin: round; }
.hn-sail-cloth { fill: #FFF8EC; stroke: #4A241D; stroke-width: 1; stroke-linejoin: round; }

/* 08 · Island of Flowers: the island from above as an old garden plan on paper (the light .cv), after OpenStreetMap —
   the shores of the island, St. Mark's Island and the mainland with depth lines, the roads, paths and houses, the
   monastery precinct, the foundations of St. Michael's and the church of the Holy Trinity, the bridge over Malo Vratlo,
   a garden of olives, umbrella pines, cypresses and palms with flower beds (made by _dev/site/fig-flowers.js). When the
   figure comes into view (.is-in from data-reveal) the foundations draw themselves (stroke-dashoffset over pathLength 1),
   the flower beds open one after another, from the monastery out to the shore (the individual `scale` property), and
   our boat glides in from Tivat; without JS everything is drawn and in bloom */
.cv--fl {
  color: var(--ink);
  background: radial-gradient(70% 60% at 80% 16%, rgba(219, 165, 129, .18), transparent 70%), var(--paper) var(--noise);
  box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -56px rgba(60, 28, 20, .55);
}
.cv--fl .cv-cap { border-top-color: var(--line); }
.cv--fl .cv-cap-title { color: var(--sand-deep); }
.cv--fl .cv-legend li { color: var(--ink-2); }
.cv--fl .cv-credit { color: var(--ink-3); }
.fl-sea { fill: #DCE5DF; }
.fl-d-line, .fl-d-sea { fill: none; stroke-linejoin: round; }
.fl-d-line { stroke: rgba(74, 112, 110, .22); }
.fl-d-sea { stroke: #DCE5DF; }
.fl-land { fill: #EADFC9; }
.fl-land-hatch { fill: url(#fl-hatch); }
.fl-hatch-line { stroke: rgba(103, 53, 44, .12); stroke-width: 1; }
.fl-isle { fill: #F4EAD6; }
.fl-lawn { fill: #D3D9B0; stroke: #F4EAD6; stroke-width: 12; }
.fl-coast { fill: none; stroke: #6B4A3A; stroke-width: 1; stroke-linejoin: round; }
.fl-coast--isle { stroke-width: 1.4; }
.fl-road-edge { fill: none; stroke: rgba(107, 74, 58, .45); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.fl-road { fill: none; stroke: #FBF5EA; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.fl-path { fill: none; stroke: rgba(107, 74, 58, .55); stroke-width: 1; stroke-dasharray: 2.4 2.2; stroke-linecap: round; }
.fl-bridge { fill: none; stroke: #6B4A3A; stroke-width: 5.4; stroke-linecap: butt; }
.fl-pier { fill: none; stroke: #6B4A3A; stroke-width: 2.4; stroke-linecap: square; }
.fl-house { fill: rgba(234, 220, 199, .9); stroke: rgba(107, 74, 58, .42); stroke-width: .7; stroke-linejoin: round; }
.fl-precinct { fill: none; stroke: var(--sand-deep); stroke-width: 1; stroke-dasharray: 4 3; opacity: .8; }
.fl-olive circle { fill: #A9B087; stroke: rgba(78, 86, 52, .7); stroke-width: .6; }
.fl-olive-hi circle { fill: rgba(246, 240, 220, .45); }
.fl-pine circle { fill: #7D8C5A; stroke: rgba(60, 70, 38, .75); stroke-width: .7; }
.fl-pine-rays { fill: none; stroke: rgba(48, 58, 30, .45); stroke-width: .7; stroke-linecap: round; }
.fl-cypress ellipse { fill: #4E5C38; }
.fl-palm { fill: none; stroke: #6E7A45; stroke-width: 1.1; stroke-linecap: round; }
.fl-palm-heart circle { fill: #8A6A44; }
.fl-fa { fill: #D9497F; } .fl-fb { fill: #F28CB0; } .fl-fc { fill: #FFF6EC; stroke: rgba(160, 80, 100, .4); stroke-width: .4; } .fl-fd { fill: #E87A55; } .fl-fe { fill: #F1C24B; }
.fl-bed circle { transform-box: fill-box; transform-origin: center; }
.fl-ruin-fill { fill: url(#fl-stone); }
.fl-stone-line { stroke: rgba(122, 59, 46, .35); stroke-width: .8; }
.fl-found { fill: none; stroke: #7A3B2E; stroke-width: 1.8; stroke-linejoin: round; }
.fl-church { fill: var(--mahogany); stroke: var(--mahogany-deep); stroke-width: .8; }
.fl-cross { fill: none; stroke: var(--mahogany); stroke-width: 1.4; stroke-linecap: round; }
.fl-light circle { fill: var(--sand-deep); }
.fl-light path { fill: none; stroke: var(--sand-deep); stroke-width: 1; stroke-linecap: round; }
.fl-course { fill: none; stroke: var(--mahogany); stroke-width: 1.4; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .7; }
.fl-water { font-family: var(--font-display); font-style: italic; font-size: 15px; letter-spacing: .06em; fill: rgba(52, 84, 84, .75); }
.fl-name { font-family: var(--font-sans); font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; fill: rgba(74, 36, 29, .78); }
.fl-name--sm { font-size: 9.5px; }
.fl-strait { font-family: var(--font-display); font-style: italic; font-size: 11.5px; fill: rgba(52, 84, 84, .85); }
.fl-north path { fill: var(--mahogany); }
.fl-north text, .fl-scale text { font-family: var(--font-sans); font-size: 10px; font-weight: 500; letter-spacing: .1em; fill: var(--mahogany-deep); }
.fl-scale path { fill: none; stroke: var(--mahogany-deep); stroke-width: 1.2; }
.fl-neat { fill: none; stroke: rgba(103, 53, 44, .35); stroke-width: 1; }
.js .cv--fl .fl-found { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .cv--fl.is-in .fl-found { animation: hnWalk 2.2s .3s cubic-bezier(.45, .05, .35, 1) forwards; }
.js .cv--fl .fl-bed circle { scale: 0; }
.js .cv--fl.is-in .fl-bed circle { animation: hnBloom .8s 1.2s cubic-bezier(.2, .8, .3, 1.4) forwards; }
.js .cv--fl.is-in .fl-bed:nth-child(2) circle { animation-delay: 1.55s; }
.js .cv--fl.is-in .fl-bed:nth-child(3) circle { animation-delay: 1.9s; }
.js .cv--fl.is-in .fl-bed:nth-child(4) circle { animation-delay: 2.25s; }
.js .cv--fl.is-in .fl-bed:nth-child(5) circle { animation-delay: 2.6s; }
.js .cv--fl .fl-boat { translate: -46px 0; opacity: 0; }
.js .cv--fl.is-in .fl-boat { animation: flBoat 2.6s .2s cubic-bezier(.3, .6, .25, 1) forwards; }
@keyframes flBoat { to { translate: 0 0; opacity: 1; } }

/* 09 · Risan: the mosaic floor with Hypnos from the Roman villa, redrawn stone by stone (the light .cv, made by
   _dev/site/fig-risan.js — the colours of the stones are in the SVG: a mosaic keeps its own palette). When the figure
   comes into view (.is-in from data-reveal) the medallion is laid ring by ring from the centre, then its black frame
   (the individual `scale` property on each ring, round the centre of the medallion), the flowers grow along the
   diagonals out to the corners (stroke-dashoffset over pathLength 1, the sprigs opening one after another), the small
   flowers and the rosettes of the side panels open; without JS the floor is laid */
.cv--ris {
  color: var(--ink);
  background: radial-gradient(70% 60% at 50% 40%, rgba(219, 165, 129, .14), transparent 70%), var(--paper) var(--noise);
  box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -56px rgba(60, 28, 20, .55);
}
.cv--ris .cv-cap { border-top-color: var(--line); }
.cv--ris .cv-cap-title { color: var(--sand-deep); }
.cv--ris .cv-legend li { color: var(--ink-2); }
.ris-band { transform-box: view-box; transform-origin: 320px 220px; }
.ris-sprig > g, .ris-rosette > g, .ris-bud4 { transform-box: fill-box; transform-origin: center; }
.js .cv--ris .ris-band { opacity: 0; scale: .9; }
.js .cv--ris.is-in .ris-band { animation: risLay .8s .2s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .cv--ris.is-in .ris-band:nth-child(2) { animation-delay: .38s; }
.js .cv--ris.is-in .ris-band:nth-child(3) { animation-delay: .56s; }
.js .cv--ris.is-in .ris-band:nth-child(4) { animation-delay: .74s; }
.js .cv--ris.is-in .ris-band:nth-child(5) { animation-delay: .92s; }
.js .cv--ris.is-in .ris-band:nth-child(6) { animation-delay: 1.1s; }
.js .cv--ris.is-in .ris-band:nth-child(7) { animation-delay: 1.3s; }
@keyframes risLay { to { opacity: 1; scale: 1; } }
.js .cv--ris .ris-stem { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .cv--ris.is-in .ris-stem { animation: hnWalk 1.6s 1.5s cubic-bezier(.45, .05, .35, 1) forwards; }
.js .cv--ris .ris-sprig > g, .js .cv--ris .ris-bud4 { scale: 0; }
.js .cv--ris.is-in .ris-sprig > g { animation: hnBloom .7s 1.65s cubic-bezier(.2, .8, .3, 1.3) forwards; }
.js .cv--ris.is-in .ris-sprig:nth-child(2) > g { animation-delay: 1.9s; }
.js .cv--ris.is-in .ris-sprig:nth-child(3) > g { animation-delay: 2.15s; }
.js .cv--ris.is-in .ris-sprig:nth-child(4) > g { animation-delay: 2.4s; }
.js .cv--ris.is-in .ris-sprig:nth-child(5) > g { animation-delay: 2.65s; }
.js .cv--ris.is-in .ris-sprig:nth-child(6) > g { animation-delay: 2.9s; }
.js .cv--ris.is-in .ris-bud4 { animation: hnBloom .7s 1.4s cubic-bezier(.2, .8, .3, 1.3) forwards; }
.js .cv--ris .ris-rosette > g { scale: 0; rotate: -45deg; }
.js .cv--ris.is-in .ris-rosette > g { animation: risBloom .9s 2.2s cubic-bezier(.2, .8, .3, 1.15) forwards; }
/* the rosettes open in pairs, left and right, from the top down (1–3: the left panel, 4–6: the right) */
.js .cv--ris.is-in .ris-rosette:nth-child(4) > g { animation-delay: 2.35s; }
.js .cv--ris.is-in .ris-rosette:nth-child(2) > g { animation-delay: 2.5s; }
.js .cv--ris.is-in .ris-rosette:nth-child(5) > g { animation-delay: 2.65s; }
.js .cv--ris.is-in .ris-rosette:nth-child(3) > g { animation-delay: 2.8s; }
.js .cv--ris.is-in .ris-rosette:nth-child(6) > g { animation-delay: 2.95s; }
@keyframes risBloom { to { scale: 1; rotate: 0deg; } }

/* the course: stops beside the generated chart (main.js draws it when it comes into view) */
.ds-course-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: var(--space-grid); align-items: center; }
.ds-stops { position: relative; list-style: none; margin: 0; padding: 0; }
.ds-stops::before { content: ""; position: absolute; left: 19px; top: 30px; bottom: 30px; border-left: 1px dashed var(--line-strong); }
.ds-stop { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 1.1rem; padding: .8rem 0; }
.ds-stop-mark {
  position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--sand-deep); color: var(--sand-deep);
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; transition: background-color .45s, color .45s, box-shadow .45s, transform .45s var(--ease);
}
.ds-stop--start .ds-stop-mark::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sand-deep); }
.ds-stop--end .ds-stop-mark { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: .95rem; }
.ds-stop.is-on .ds-stop-mark { background: var(--sand); color: var(--espresso); box-shadow: inset 0 0 0 1.5px var(--sand); }
.ds-stop--start.is-on .ds-stop-mark::after { background: var(--espresso); }
.ds-stop--end.is-on .ds-stop-mark { background: var(--mahogany); color: var(--ivory); box-shadow: 0 0 0 6px rgba(103, 53, 44, .12); }
.ds-stop.is-hl .ds-stop-mark { transform: scale(1.1); }
.ds-stop-text { display: grid; gap: .1rem; min-width: 0; }
.ds-stop-text b { font-family: var(--font-display); font-weight: 380; font-size: 1.22rem; line-height: 1.25; font-variation-settings: "opsz" 48, "SOFT" 50; transition: color .3s; }
.ds-stop-text b a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.ds-stop-text b a:hover { background-size: 100% 1px; }
.ds-stop.is-hl .ds-stop-text b { color: var(--mahogany); }
.ds-stop-text > span { font-size: .9rem; line-height: 1.4; color: var(--ink-3); }
.ds-stop-km { font-size: .88rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ds-stop--end .ds-stop-text b { color: var(--mahogany); }

.ds-map { min-width: 0; }
.ds-frame { aspect-ratio: auto; }
.pc-chart { position: relative; inset: auto; height: auto; }
.pc-chart .bk-landhatch { fill: url(#pc-hatch); }
.pc-ghost { fill: none; stroke: rgba(219, 165, 129, .32); stroke-width: 1.2; stroke-dasharray: 1.5 4.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pc-course { fill: none; stroke: var(--sand); stroke-width: calc(var(--u) * 2.4px); stroke-linecap: round; stroke-linejoin: round; }
.pc-stop .bk-label { opacity: .72; transition: opacity .5s; }
.pc-dot { fill: var(--chart-sea); stroke: var(--sand); stroke-width: 1.4; transition: fill .4s, stroke .4s; }
.pc-num { font-family: var(--font-sans); font-size: 9.5px; font-weight: 600; fill: var(--sand); pointer-events: none; transition: fill .4s; }
.pc-ring { fill: none; stroke: var(--sand); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pc-stop.is-on .pc-dot { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.pc-stop.is-on .pc-num { fill: var(--espresso); }
.pc-stop.is-on .bk-label, .pc-stop.is-hl .bk-label { opacity: 1; }
.pc-stop.is-hl .pc-ring { animation: ping 2.2s var(--ease) infinite; }
.pc-pin { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.pc-pin-num { font-family: var(--font-display); font-style: italic; font-size: 10px; fill: var(--espresso); pointer-events: none; }
.pc-end-label { font-size: 15px; font-weight: 500; fill: #fff; }
.pc-chart.is-small .pc-end-label { font-size: 13px; } /* a long name (Our Lady of the Rocks) still fits a 320 px phone */
.pc-chart.is-small .pc-end-label--small { text-anchor: var(--sa); translate: var(--sx) var(--sy); } /* a place at the edge of the base map: its name moves (gen_place.js endSmall) */
.pc-end.is-on .bk-ring, .pc-end.is-hl .bk-ring { animation: ping 2.6s var(--ease) infinite; }
/* phones: numbers only (the list names every stop) */
.pc-chart.is-small .bk-water, .pc-chart.is-small .bk-land-l, .pc-chart.is-small .pc-stop .bk-label, .pc-chart.is-small .bk-kicker, .pc-chart.is-small .bk-isl { display: none; }
.ds-frame .chart-scale { left: auto; right: 20px; top: 22px; bottom: auto; justify-items: end; }
.ds-frame .pc-chart.is-small ~ .chart-scale { display: none; }
.ds-frame .pc-chart.is-small ~ .chart-compass { width: 40px; height: 40px; left: 10px; top: 10px; }
.ds-frame--cr .pc-chart.is-small ~ .chart-compass { left: auto; right: 10px; } /* the place sits in the top-left corner (Herceg Novi): on a small chart the compass takes the free top-right corner */
.ds-map-more { margin: 1.1rem 0 0; }

/* tours that go there: ticket cards (duration | name, text, booking) */
.ds-sub { margin: var(--space-group) 0 1.3rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.ds-tour-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-cards); margin: 0; padding: 0; }
.ds-tour {
  --pad: clamp(22px, 2.4vw, 34px); --dur-w: 5.6rem;
  position: relative; display: grid; grid-template-columns: var(--dur-w) minmax(0, 1fr); column-gap: 2.6rem; align-items: start;
  padding: var(--pad); border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5);
}
/* the perforation between the stub and the ticket, with a notch at each end */
.ds-tour::before { content: ""; position: absolute; top: 14px; bottom: 14px; left: calc(var(--pad) + var(--dur-w) + 1.3rem); border-left: 1.5px dashed var(--line-strong); }
.ds-tour::after {
  content: ""; position: absolute; top: -9px; bottom: -9px; left: calc(var(--pad) + var(--dur-w) + 1.3rem - 9px); width: 18px; pointer-events: none;
  background: radial-gradient(circle at 50% 9px, var(--paper) 8.5px, transparent 9px) top / 18px 18px no-repeat, radial-gradient(circle at 50% 9px, var(--paper) 8.5px, transparent 9px) bottom / 18px 18px no-repeat;
}
.ds-tour-dur { display: grid; justify-items: start; gap: .35rem; margin: 0; }
.ds-tour-dur b { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.5rem, 2rem + 1.2vw, 3.2rem); line-height: .95; letter-spacing: -.03em; color: var(--mahogany); white-space: nowrap; font-variation-settings: "opsz" 144; }
.ds-tour-dur span { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.ds-tour-body { min-width: 0; }
.ds-tour-name { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 380; font-size: clamp(1.45rem, 1.2rem + .7vw, 1.85rem); line-height: 1.12; letter-spacing: -.012em; font-variation-settings: "opsz" 72, "SOFT" 40; }
.ds-tour-name a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.ds-tour-name a:hover { color: var(--mahogany); background-size: 100% 1px; }
.ds-tour-text { margin: 0 0 1.3rem; font-size: .95rem; color: var(--ink-2); }
.ds-tour-book { grid-column: 2; justify-self: start; }
.ds-custom { display: flex; align-items: center; gap: .7rem; margin: 1.6rem 0 0; color: var(--ink-2); }
.ds-custom .icon { color: var(--sand-deep); }
.ds-custom a { color: var(--mahogany); font-weight: 500; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.ds-custom a:hover { background-size: 0 1px; }

/* what to do: four numbered cards */
.ds-do-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-cards); margin: 0; padding: 0; }
.ds-do-item {
  display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 34px); border-radius: var(--radius); background: var(--paper);
  transition: background-color .5s var(--ease), transform .7s var(--ease);
}
.ds-do-item:hover { background: var(--paper-2); }
.ds-do-num { margin-bottom: 1.6rem; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(2.2rem, 1.7rem + 1.2vw, 3rem); line-height: 1; color: var(--sand-deep); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.ds-do-item h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 380; font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); line-height: 1.15; letter-spacing: -.01em; font-variation-settings: "opsz" 72, "SOFT" 50; }
.ds-do-item p { margin: 0; font-size: .96rem; color: var(--ink-2); }

/* good to know: a sticky head beside the list of tips */
.ds-tips-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-grid); align-items: start; }
.ds-tips-head { position: sticky; top: 120px; }
.ds-tips-more { display: grid; justify-items: start; gap: .7rem; margin-top: 2rem; }
.ds-tips .link-arrow { color: var(--sand-2); }
.ds-tips-list { margin: 0; border-top: 1px solid var(--line-dark); }
.ds-tip { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); align-items: start; gap: .5rem 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line-dark); }
.ds-tip dt { display: flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-size: 1.3rem; line-height: 1.3; color: var(--on-dark); font-variation-settings: "opsz" 48, "SOFT" 50; }
.ds-tip dt .icon { width: 1.3em; height: 1.3em; color: var(--sand); }
.ds-tip dd { margin: 0; color: var(--on-dark-2); }

/* nearby: the next places of the menu (cards as on the Destinations page, upright) + previous / next */
.ds-near-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-cards); margin: 0; padding: 0; }
.ds-near .dp-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
.ds-near .dp-media { aspect-ratio: 4 / 3; }
.ds-near .dp-km { margin-top: auto; }
.ds-near .dp-locator .m-hatch { fill: url(#pc-hatch); }
.ds-pager { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 1rem 2rem; margin-top: var(--space-group); padding-top: 1.8rem; border-top: 1px solid var(--line); }
.ds-pager-link { display: inline-flex; align-items: center; gap: 1rem; justify-self: start; }
.ds-pager-link--next { justify-self: end; text-align: right; }
.ds-pager-link .icon { flex: none; width: 46px; height: 46px; padding: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--mahogany); transition: background-color .4s, color .4s, box-shadow .4s, transform .5s var(--ease); }
.ds-pager-link--prev .icon { rotate: 180deg; }
.ds-pager-link:hover .icon { background: var(--mahogany); color: var(--ivory); box-shadow: none; }
.ds-pager-link--prev:hover .icon { transform: translateX(-3px); }
.ds-pager-link--next:hover .icon { transform: translateX(3px); }
.ds-pager-link small { display: block; font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.ds-pager-link b { display: block; font-family: var(--font-display); font-weight: 380; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); line-height: 1.25; font-variation-settings: "opsz" 48, "SOFT" 50; transition: color .3s; }
.ds-pager-link:hover b { color: var(--mahogany); }
.ds-pager-n { font-style: italic; font-size: .8em; color: var(--sand-deep); }
.ds-pager-all { font-size: .74rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--mahogany); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .45s var(--ease); }
.ds-pager-all:hover { background-size: 100% 1px; }

@media (max-width: 1100px) {
  .ds-do-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-course-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .ds-map { order: -1; }
  .ds-stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; }
  .ds-stops::before { content: none; }
  .ds-stop { border-bottom: 1px solid var(--line); }
}
@media (max-width: 960px) {
  .ds-story-grid, .ds-tips-grid { grid-template-columns: minmax(0, 1fr); }
  .ds-tips-head { position: static; }
  .ds-tour-list { grid-template-columns: minmax(0, 1fr); }
  .ds-near-list { grid-template-columns: minmax(0, 1fr); }
  .ds-near .dp-card { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); grid-template-rows: none; }
  .ds-near .dp-media { aspect-ratio: auto; min-height: 240px; }
}
@media (max-width: 760px) {
  .ds-hero .hero-content { padding-bottom: 150px; }
  .ds-hero .hero-bar-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-hero .hb-item:nth-child(n+3) { display: inline-flex; }
  .ds-hero .ds-title { font-size: clamp(2.5rem, 10.6vw, 3.3rem); }
  .ds-place { font-size: .66rem; letter-spacing: .2em; }
  .ds-hero .crumbs, .ds-place, .ds-title, .ds-lead { text-shadow: 0 2px 18px rgba(20, 10, 8, .45); }
  /* phones: the crop of the island sits behind the text — a deeper veil over the middle keeps it readable */
  .ds-hero--olr .hero-shade { background: linear-gradient(180deg, rgba(20, 12, 10, .62) 0%, rgba(20, 12, 10, .26) 20%, rgba(20, 12, 10, .5) 40%, rgba(20, 12, 10, .62) 64%, rgba(20, 12, 10, .92) 100%); }
  /* Kotor: the bay behind the title, the roofs of the old town below it */
  .ds-hero--kot .hero-shade { background: linear-gradient(180deg, rgba(20, 12, 10, .6) 0%, rgba(20, 12, 10, .2) 20%, rgba(20, 12, 10, .46) 40%, rgba(20, 12, 10, .62) 64%, rgba(20, 12, 10, .92) 100%); }
  /* Perast: the bell tower and the island behind the text, the roofs below it */
  .ds-hero--per .hero-shade { background: linear-gradient(180deg, rgba(20, 12, 10, .6) 0%, rgba(20, 12, 10, .2) 20%, rgba(20, 12, 10, .46) 40%, rgba(20, 12, 10, .62) 64%, rgba(20, 12, 10, .92) 100%); }
  /* Luštica: the stone houses of Rose at the top, the boats behind the text */
  .ds-hero--lus .hero-shade { background: linear-gradient(180deg, rgba(20, 12, 10, .6) 0%, rgba(20, 12, 10, .14) 15%, rgba(20, 12, 10, .44) 27%, rgba(20, 12, 10, .56) 44%, rgba(20, 12, 10, .66) 64%, rgba(20, 12, 10, .92) 100%); }
  /* Herceg Novi: the right-hand crop of the frame (crop=right) shown from its left edge — Forte Mare in the middle, the
     old town above it, the fortress behind the title under a deeper veil */
  .ds-hero--hn .ds-hero-img { object-position: 0% 50%; }
  .ds-hero--hn .hero-shade { background: linear-gradient(180deg, rgba(20, 12, 10, .6) 0%, rgba(20, 12, 10, .18) 18%, rgba(20, 12, 10, .48) 34%, rgba(20, 12, 10, .62) 60%, rgba(20, 12, 10, .92) 100%); }
  /* Island of Flowers: the right-hand part of the illustration — the island in the middle, the oleander above it */
  .ds-hero--fl .ds-hero-img { object-position: 94% 50%; }
  .ds-hero--fl .hero-shade { background: linear-gradient(180deg, rgba(20, 12, 10, .5) 0%, rgba(20, 12, 10, .1) 18%, rgba(20, 12, 10, .36) 36%, rgba(20, 12, 10, .56) 60%, rgba(20, 12, 10, .9) 100%); }
  /* Mamula: in the centre crop the island sits at a third of the height, behind the breadcrumb. The photo covers at most
     two screen widths of the intro (so the island's size follows the width, not the height of the intro) and fades into
     the dark below; it zooms in from its bottom edge, lifting the island into the sky above the text (from a third of the
     width, which centres the island). On short phones the text starts below the island (the intro grows a little taller than the
     screen, as intros with long texts already do there) */
  .ds-hero--mam .hero-img {
    height: min(100%, 200vw); object-position: 0% 0%; transform-origin: 33% 100%; animation-name: heroZoomMam;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
  }
  .ds-hero--mam .hero-content { padding-top: max(clamp(104px, 15vh, 150px), calc(42.6vw + 20px)); }
}
@keyframes heroZoomMam { from { transform: scale(1.32); } to { transform: scale(1.2); } }
@media (max-width: 640px) {
  .ds-stops { grid-template-columns: minmax(0, 1fr); }
  .cv-legend { grid-template-columns: minmax(0, 1fr); }
  .ds-tip { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ds-do-list { grid-template-columns: minmax(0, 1fr); }
  .ds-near .dp-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .ds-near .dp-media { aspect-ratio: 4 / 3; min-height: 0; }
  /* the OSM credit goes under the chart, clear of the place's name */
  .ds-frame .chart-credit { position: static; margin: 0; padding: .45rem .9rem .55rem; border-radius: 0; background: none; text-align: right; color: var(--on-dark-2); } /* on the frame itself: the lighter text keeps AA contrast */
  /* the ticket turns: the stub on top, the perforation across */
  .ds-tour { --perf: calc(var(--pad) + 2.45rem + .9rem); grid-template-columns: minmax(0, 1fr); row-gap: 1.8rem; }
  .ds-tour::before { top: var(--perf); bottom: auto; left: 14px; right: 14px; border-left: 0; border-top: 1.5px dashed var(--line-strong); }
  .ds-tour::after {
    top: calc(var(--perf) - 9px); bottom: auto; left: -9px; right: -9px; width: auto; height: 18px;
    background: radial-gradient(circle at 9px 50%, var(--paper) 8.5px, transparent 9px) left / 18px 18px no-repeat, radial-gradient(circle at 9px 50%, var(--paper) 8.5px, transparent 9px) right / 18px 18px no-repeat;
  }
  .ds-tour-dur { display: flex; align-items: baseline; gap: .9rem; height: 2.45rem; }
  .ds-tour-dur b { font-size: 2.5rem; }
  .ds-tour-book { grid-column: 1; justify-self: stretch; margin-top: -.4rem; }
  .ds-pager { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ds-pager-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* ---------- Gallery page (phase 16): three prints in the intro · moods (filters) · the grid in justified rows · the
   photo viewer (a native <dialog>, main.js "Gallery") · Instagram. The photos are one list in _dev/site/gallery.js ---------- */
.gl-hero { overflow-x: clip; }
.gl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--space-grid); align-items: center; }
.gl-hero .page-lead { max-width: 33rem; }

/* the prints: three photos with a white border laid on the paper, a little turned — they settle one after another and
   fan out under the pointer (decorative: aria-hidden; the same photos open from the grid) */
.gl-prints { position: relative; justify-self: end; width: min(100%, 540px); aspect-ratio: 1.16; }
.gl-print {
  position: absolute; margin: 0; padding: 9px 9px 0; border-radius: 4px; background: #FCFAF6;
  box-shadow: 0 1px 1px rgba(60, 28, 20, .12), 0 30px 50px -26px rgba(34, 18, 14, .55);
  animation: glDrop 1.2s var(--ease) backwards; transition: rotate .9s var(--ease), translate .9s var(--ease);
}
.gl-print img { width: 100%; height: auto; border-radius: 2px; background: var(--paper-2); }
.gl-print figcaption {
  padding: .5rem .2rem .62rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-display); font-style: italic; font-weight: 340; font-size: .92rem; line-height: 1.2; color: var(--ink-2);
  font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
.gl-print--1 { left: 0; top: 12%; width: 64%; rotate: -6deg; animation-delay: .3s; }
.gl-print--2 { right: 3%; top: 4%; z-index: 3; width: 34%; rotate: 5deg; animation-delay: .66s; }
.gl-print--3 { left: 27%; bottom: 0; z-index: 2; width: 54%; rotate: -1.5deg; animation-delay: .48s; }
@keyframes glDrop { from { opacity: 0; translate: 0 -34px; scale: 1.06; } }
@media (hover: hover) and (pointer: fine) {
  .gl-prints:hover .gl-print--1 { rotate: -9deg; translate: -18px 6px; }
  .gl-prints:hover .gl-print--2 { rotate: 8deg; translate: 16px -8px; }
  .gl-prints:hover .gl-print--3 { rotate: 1deg; translate: 6px 12px; }
}

/* moods: toggle buttons (aria-pressed) with the number of photos; the line beside them counts what is shown */
.gl-section { padding-top: 0; }
.gl-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: clamp(20px, 2.4vw, 36px); padding-bottom: clamp(18px, 2vw, 26px); border-bottom: 1px solid var(--line);
}
.gl-filters { display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .gl-filters, html:not(.js) .gl-status { display: none; }
.gl-chip {
  display: inline-flex; align-items: center; gap: .45rem; height: 46px; padding: 0 1.1rem 0 1.25rem; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line-strong); font-family: var(--font-display); font-size: 1.1rem; line-height: 1; color: var(--ink);
  font-variation-settings: "opsz" 48, "SOFT" 50; transition: background-color .35s, color .35s, box-shadow .35s; -webkit-tap-highlight-color: transparent;
}
.gl-chip:hover { box-shadow: inset 0 0 0 1px var(--mahogany); }
.gl-chip[aria-pressed="true"] { background: var(--mahogany); color: var(--ivory); box-shadow: none; }
.gl-chip-n { position: relative; top: -.45em; vertical-align: baseline; font-family: var(--font-sans); font-size: .66rem; font-weight: 500; letter-spacing: .06em; color: var(--sand-deep); }
.gl-chip[aria-pressed="true"] .gl-chip-n { color: var(--sand-2); }
.gl-status { display: flex; align-items: baseline; gap: .55em; margin: 0; font-size: .72rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.gl-status-n {
  font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.9rem; line-height: 1; letter-spacing: -.02em; text-transform: none;
  color: var(--mahogany); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-variant-numeric: lining-nums;
}

/* the grid: justified rows in plain CSS — every photo grows from (ratio × row height) in proportion to its ratio, so a
   row fills the line at one height and no photo is cropped; the last row keeps its height (::after takes the rest).
   --r (ratio) is written on every photo by gallery.js; a filtered-out photo is [hidden] and the rows close up */
.gl-grid {
  --gl-h: clamp(200px, 17vw, 260px); --gl-gap: clamp(8px, .9vw, 14px);
  display: flex; flex-wrap: wrap; gap: var(--gl-gap); margin: 0; padding: 0; list-style: none; transition: opacity .3s;
}
.gl-grid::after { content: ""; flex-grow: 1e4; }
.gl-grid.is-leaving { opacity: 0; transition-duration: .18s; }
.gl-item { position: relative; flex: var(--r) 1 calc(var(--r) * var(--gl-h)); min-width: 0; }
.gl-item[hidden] { display: none; }
.gl-item.is-dealt { animation: glDeal .75s var(--ease) var(--d, 0ms) backwards; }
@keyframes glDeal { from { opacity: 0; translate: 0 24px; } }
.gl-link { position: relative; isolation: isolate; display: block; overflow: hidden; aspect-ratio: var(--r); border-radius: 14px; background: var(--paper-2); cursor: zoom-in; }
.gl-img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.3s var(--ease); }
.gl-link:hover .gl-img { transform: scale(1.045); }
.gl-cap {
  position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: .35em .9em; overflow: hidden; border-radius: 999px;
  background: rgba(34, 18, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff;
  font-size: .8rem; letter-spacing: .03em; white-space: nowrap; text-overflow: ellipsis;
  opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.gl-zoom {
  position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; padding: 9px; border-radius: 50%;
  background: rgba(248, 243, 236, .92); color: var(--mahogany); opacity: 0; transform: scale(.7); transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.gl-item.is-lifted .gl-link { visibility: hidden; } /* the photo is open in the viewer (it flies back here on close) */
.gl-link:hover .gl-cap, .gl-link:focus-visible .gl-cap { opacity: 1; transform: none; }
.gl-link:hover .gl-zoom, .gl-link:focus-visible .gl-zoom { opacity: 1; transform: none; }
@media (hover: none) { .gl-cap { opacity: 1; transform: none; } }

/* the photo viewer: full screen over the page — the count and close button, the photo (positioned by main.js inside the
   stage: it grows out of the thumbnail, slides when browsing, follows a finger), previous/next, the caption with the
   destination and a WhatsApp message about the photo */
.lb {
  position: fixed; inset: 0; isolation: isolate; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  overflow: hidden; overscroll-behavior: contain; background: transparent; color: var(--on-dark);
}
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lb::backdrop { background: transparent; }
.lb::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s var(--ease);
  background: radial-gradient(90% 70% at 50% 42%, rgba(74, 36, 29, .5), transparent 72%), #140B09;
}
.lb.is-open::before { opacity: var(--lb-fade, .985); }
.gl-viewing .quick-contact { visibility: hidden; } /* the floating WhatsApp button and the phone bar, while the viewer is open */
.lb.is-dragging::before { transition: none; }
.lb-top, .lb-info, .lb-nav { opacity: 0; transition: opacity .45s var(--ease) .12s; }
.lb.is-open .lb-top, .lb.is-open .lb-info, .lb.is-open .lb-nav { opacity: 1; }
.lb.is-closing .lb-top, .lb.is-closing .lb-info, .lb.is-closing .lb-nav { opacity: 0; transition-delay: 0s; transition-duration: .2s; }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(12px, 2vw, 22px) clamp(14px, 2.6vw, 32px) 8px; }
.lb-count { display: flex; align-items: baseline; gap: .35em; margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.05rem; color: var(--on-dark-3); font-variant-numeric: lining-nums tabular-nums; }
.lb-count b { font-weight: 300; font-size: 1.85rem; line-height: 1; color: var(--on-dark); }
.lb-btn {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--on-dark);
  background: rgba(246, 238, 228, .07); box-shadow: inset 0 0 0 1px rgba(246, 238, 228, .22);
  transition: background-color .3s, color .3s, box-shadow .3s, opacity .45s var(--ease) .12s; -webkit-tap-highlight-color: transparent;
}
.lb-btn:hover { background: var(--sand); color: var(--espresso); box-shadow: none; }
.lb-btn .icon { width: 22px; height: 22px; }
.lb-main { position: relative; min-height: 0; }
.lb-stage { position: absolute; inset: 0; touch-action: none; -webkit-user-select: none; user-select: none; }
.lb-frame {
  position: absolute; left: 0; top: 0; overflow: hidden; border-radius: 10px; background: #2B1813;
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .75); transform-origin: 0 0; will-change: transform;
}
.lb-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.lb-hi { opacity: 0; transition: opacity .5s ease; }
.lb-hi.is-loaded { opacity: 1; }
.lb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #1E110D; } /* a video tile: over its poster, with controls */
/* a video tile in the grid: the play mark is always there */
.gl-item--video .gl-zoom { opacity: 1; transform: none; padding: 10px 9px 10px 11px; }
.lb-nav { position: absolute; top: 50%; z-index: 2; translate: 0 -50%; }
.lb-prev { left: clamp(10px, 2.2vw, 30px); }
.lb-next { right: clamp(10px, 2.2vw, 30px); }
.lb-prev .icon { rotate: 180deg; }
/* the caption is as wide as the photo (at least 760 px) and always the same height — one line of title, two of text —
   so browsing never moves the photo */
.lb-info {
  display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem 2.5rem;
  width: min(max(var(--lb-w, 100%), 760px), 100% - 2 * clamp(14px, 2.6vw, 32px)); margin: 0 auto;
  padding: clamp(14px, 1.8vw, 22px) 0 max(clamp(16px, 2.4vw, 28px), env(safe-area-inset-bottom));
}
.lb-text { flex: 1 1 auto; min-width: 0; transition: opacity .3s, transform .45s var(--ease); }
.lb-info.is-swapping .lb-text { opacity: 0; transform: translateY(6px); transition-duration: .15s; }
.lb-mood { margin: 0 0 .45rem; font-size: .7rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--sand); }
.lb-title {
  margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--font-display); font-weight: 340; font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem); line-height: 1.15; letter-spacing: -.015em; font-variation-settings: "opsz" 72, "SOFT" 50;
}
.lb-desc {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 3em; max-width: 44rem;
  margin: .45rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--on-dark-2);
}
.lb-actions { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .7rem 1.5rem; }
.lb-place { color: var(--sand-2); }
.lb-place .icon:first-child { width: 1.05em; height: 1.05em; }
.lb-place[hidden], .lb-btn[hidden] { display: none; }

/* Instagram: the call to tag the account beside a turning badge with the handle */
.gl-insta-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--space-grid); align-items: center; }
.gl-insta .h2 em { display: block; }
.gl-insta-text { max-width: 30rem; margin: 1.6rem 0 2rem; font-size: 1.06rem; color: var(--ink-2); }
.gl-insta-art { display: grid; justify-items: center; gap: 1.5rem; }
.gl-insta-badge {
  position: relative; display: grid; place-items: center; width: clamp(200px, 21vw, 270px); aspect-ratio: 1; border-radius: 50%;
  background: var(--sand); color: var(--mahogany-deep); box-shadow: 0 40px 70px -40px rgba(60, 28, 20, .7);
}
.gl-insta-badge .badge-ring { animation-duration: 40s; }
.gl-insta-icon { width: 34%; height: 34%; }
.gl-insta-handle { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; color: var(--mahogany); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }

@media (max-width: 1100px) {
  .gl-grid { --gl-h: 21vw; }
}
@media (max-width: 960px) {
  .gl-hero-grid, .gl-insta-grid { grid-template-columns: minmax(0, 1fr); }
  .gl-prints { justify-self: center; width: min(100%, 470px); margin-top: .5rem; }
  .gl-insta-art { grid-auto-flow: column; justify-content: start; align-items: center; }
}
@media (max-width: 760px) {
  .lb-top { padding: 10px 12px 6px; }
  .lb-btn { width: 44px; height: 44px; }
  .lb-btn .icon { width: 20px; height: 20px; }
  .lb-nav { top: auto; bottom: 10px; translate: none; background: rgba(20, 11, 9, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .lb-prev { left: 12px; }
  .lb-next { right: 12px; }
  .lb-info { flex-direction: column; align-items: stretch; gap: .9rem; width: auto; margin: 0 16px; }
  .lb-actions { justify-content: space-between; }
  .lb-desc { font-size: .9rem; }
}
@media (max-width: 560px) {
  .gl-grid { --gl-h: 30vw; --gl-gap: 6px; }
  .gl-grid::after { content: none; } /* phones: the last row fills the width too (often one photo, as wide as the screen) */
  .gl-link { border-radius: 10px; }
  .gl-cap, .gl-zoom { display: none; }
  .gl-item--video .gl-zoom { display: block; width: 30px; height: 30px; right: 8px; top: 8px; padding: 8px 7px 8px 9px; }
  .gl-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); scrollbar-width: none; }
  .gl-filters::-webkit-scrollbar { display: none; }
  .gl-chip { flex: none; height: 42px; padding: 0 .95rem 0 1.05rem; font-size: 1rem; }
  .gl-print figcaption { font-size: .8rem; }
  .gl-insta-art { grid-auto-flow: row; justify-items: start; }
}

/* ---------- Our boats (phase 17): an intro arch with both boats from above · the seat planner · each boat with its
   photos, numbers and a builder's drawing from the side · on board (a flat lay on teak) · safety · questions.
   The drawings come from _dev/site/boat.js with their colours in the SVG; here only the frames, the motion and the
   planner's states ---------- */
/* intro: the About layout (copy + arch + badge + plate) — the arch holds the illustration */
.bt-arch { aspect-ratio: 3 / 4; background: #3D8A86; box-shadow: 0 50px 90px -60px rgba(34, 18, 14, .7); }
.bt-arch svg { width: 100%; height: 100%; }
.bt-port b { white-space: nowrap; }
.bt-bob { transform-box: fill-box; transform-origin: 50% 50%; animation: btBob 5.2s ease-in-out infinite; }
.bt-cruise--s .bt-bob { animation-duration: 4.4s; animation-delay: -2.1s; }
@keyframes btBob { 50% { translate: 0 -2.4px; rotate: .5deg; } }
.bt-ripples { animation: btDrift 16s ease-in-out infinite alternate; }
.bt-ripples--dark { animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes btDrift { to { translate: -14px 4px; } }
.bt-foam, .bt-feathers { animation: btFoam 2.8s ease-in-out infinite alternate; }
.bt-feathers { animation-duration: 3.6s; }
@keyframes btFoam { to { opacity: .72; } }
.bt-glints path { transform-box: fill-box; transform-origin: center; animation: btGlint 4.4s ease-in-out var(--d, 0s) infinite backwards; }
@keyframes btGlint { 0%, 100% { opacity: 0; scale: .3; } 45%, 55% { opacity: 1; scale: 1; } }

/* the seat planner: − / + beside both boats moored at the promenade */
.bt-pick-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--space-grid); align-items: center; }
.bt-pick .h2 em { display: block; }
.bt-pick-text { max-width: 31rem; margin: 1.6rem 0 0; font-size: 1.06rem; color: var(--ink-2); }
.bt-count { display: grid; justify-items: start; gap: .8rem; margin: 2.4rem 0 0; }
.bt-count[hidden], .bt-verdict[hidden] { display: none; }
.bt-count-label { font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-deep); }
.bt-stepper { display: flex; align-items: center; gap: 1rem; padding: 8px; border-radius: 999px; background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 24px 50px -34px rgba(60, 28, 20, .55); }
.bt-step {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--paper); color: var(--mahogany);
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .3s, color .3s, transform .3s var(--ease);
}
.bt-step .icon { width: 24px; height: 24px; }
.bt-step:hover { background: var(--mahogany); color: var(--ivory); box-shadow: none; }
.bt-step:active { transform: scale(.94); }
.bt-step[aria-disabled="true"] { opacity: .35; cursor: default; background: var(--paper); color: var(--mahogany); box-shadow: inset 0 0 0 1px var(--line-strong); transform: none; }
.bt-count-out { display: grid; justify-items: center; min-width: 5.8rem; line-height: 1; }
.bt-count-num { font-family: var(--font-display); font-weight: 340; font-size: 3.1rem; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144, "SOFT" 50; }
.bt-count-unit { margin-top: .35rem; font-size: .8rem; letter-spacing: .06em; color: var(--ink-3); }
.bt-verdict {
  max-width: 31rem; min-height: 4.3em; margin: 1.5rem 0 1.7rem; font-family: var(--font-display); font-weight: 340;
  font-size: clamp(1.18rem, 1.05rem + .45vw, 1.42rem); line-height: 1.42; color: var(--ink-2); font-variation-settings: "opsz" 48, "SOFT" 50;
}
.bt-verdict b { font-weight: 420; color: var(--mahogany); }
.bt-pick:not(.is-live) .bt-pick-actions { margin-top: 2.2rem; }
.bt-dock { justify-self: end; width: min(100%, 480px); margin: 0; padding: clamp(14px, 1.8vw, 24px); border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 40px 80px -56px rgba(60, 28, 20, .6); }
.bt-dock-pic { overflow: hidden; border-radius: var(--radius-sm); }
.bt-dock-svg { display: block; width: 100%; height: auto; }
.bt-dock-cap { display: grid; gap: 1rem; padding: 1rem .25rem 0; }
/* the names sit under their boats (centres at 29.5 % and 71.6 % of the plan's width) */
.bt-dock-names { position: relative; display: block; min-height: 2.9rem; }
.bt-dock-name { position: absolute; top: 0; left: 29.5%; display: grid; justify-items: center; width: 44%; translate: -50% 0; text-align: center; line-height: 1.3; transition: color .3s; }
.bt-dock-name[data-bt-name="s"] { left: 71.6%; }
.bt-dock-name b { font-family: var(--font-display); font-weight: 400; font-size: 1.08rem; transition: color .3s; font-variation-settings: "opsz" 48, "SOFT" 50; }
.bt-dock-name > span { font-size: .8rem; color: var(--ink-3); }
.bt-dock-name b { padding: 0 .2em; border-radius: 4px; transition: color .3s, background-color .3s; }
.bt-dock-name.is-pick b { color: var(--mahogany); background: rgba(219, 165, 129, .32); }
.bt-legend { display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--ink-2); }
.bt-legend > span { display: inline-flex; align-items: center; gap: .5rem; }
.bt-key { flex: none; width: 15px; height: 15px; border-radius: 50%; }
.bt-key--free { background: var(--ivory); box-shadow: inset 0 0 0 2px var(--sand-deep); }
.bt-key--taken { background: var(--sand); box-shadow: inset 0 0 0 2px var(--mahogany); }
.bt-key--crew { background: var(--mahogany); }
.bt-key--canopy { width: 22px; height: 12px; border-radius: 3px; border: 1.5px dashed var(--sand-deep); }
.bt-dock-note { font-size: .78rem; line-height: 1.45; color: var(--ink-3); }
.bt-seat { transition: fill .35s var(--ease), stroke .35s var(--ease); }
.bt-seat.is-taken { fill: var(--sand); stroke: var(--mahogany); transform-box: fill-box; transform-origin: center; animation: btSeat .5s var(--ease); }
@keyframes btSeat { 0% { scale: .4; } 60% { scale: 1.18; } 100% { scale: 1; } }
.bt-dock-glow, .bt-dock-full { pointer-events: none; transition: opacity .45s var(--ease); }
.bt-dock-boat.is-pick .bt-dock-glow { opacity: .8; }
.bt-dock-boat.is-over .bt-dock-full { opacity: .6; }

/* the two boats: photos beside the copy and the numbers, the builder's drawing below */
.bt-boat-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: var(--space-grid); align-items: center; }
.bt-boat--l .bt-boat-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.bt-boat--l .bt-photos { order: 2; }
.bt-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-cards); }
.bt-photo { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius-sm); background: var(--paper-2); }
.bt-photo--main { grid-column: 1 / -1; border-radius: var(--radius); box-shadow: 0 40px 80px -56px rgba(34, 18, 14, .7); }
.bt-photos--one .bt-photo--main { aspect-ratio: 4 / 5; max-height: 720px; }
.bt-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.bt-photo:hover img { transform: scale(1.04); }
/* since v1.28.0 each boat: its reel (upright video) beside two of the client's photos stacked */
.bt-photos--reel .reel { grid-row: span 2; }
.bt-photos--reel .bt-photo { aspect-ratio: 9 / 8; }
/* a reel: an upright video with its poster; main.js "Reels" plays it while it is on screen (muted) — pause and sound
   buttons at the bottom; without JS the browser's own controls */
.reel { position: relative; margin: 0; min-height: 100%; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--radius); background: #1E110D; box-shadow: 0 40px 80px -56px rgba(34, 18, 14, .7); }
.bt-photos--reel .reel { aspect-ratio: auto; }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel::after { content: ""; position: absolute; inset: 62% 0 0; background: linear-gradient(0deg, rgba(20, 10, 8, .5), transparent); pointer-events: none; }
.reel-ui { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; gap: 8px; }
.reel-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: #fff; background: rgba(34, 18, 14, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: background-color .3s, color .3s;
}
.reel-btn[hidden] { display: none; }
.reel-btn:hover { background: var(--sand); color: var(--espresso); }
.reel-btn:focus-visible { outline: 2px solid var(--sand-2); outline-offset: 3px; }
.reel-btn .icon { width: 18px; height: 18px; }
.reel-btn .icon + .icon, .reel-btn[aria-pressed="true"] .icon:first-of-type { display: none; }
.reel-btn[aria-pressed="true"] .icon + .icon { display: block; }
.reel-tag {
  position: absolute; right: 12px; top: 12px; z-index: 2; padding: .3em .8em; border-radius: 999px; pointer-events: none;
  background: rgba(34, 18, 14, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
}
/* the larger boat: an illustration in the photo's place (at anchor in a cove) — the light on the sand ripples, the surf
   runs along the rocks, the swimmers and the boat bob */
.bt-photo--art { background: #3FA3A0; }
.bt-photo--art svg { display: block; width: 100%; height: 100%; }
.bt-caustics { animation: btCaustics 7s ease-in-out infinite alternate; }
@keyframes btCaustics { to { translate: 9px 6px; opacity: .26; } }
.bt-surf { animation: btSurf 6s linear infinite; }
@keyframes btSurf { to { stroke-dashoffset: -108; } }
.bt-rings { transform-box: fill-box; transform-origin: center; animation: btRings 5s ease-in-out infinite; }
@keyframes btRings { 50% { scale: 1.05; opacity: .3; } }
.bt-bob--slow { animation-duration: 7s; }
.bt-swimmer > * { animation: btBob 3.4s ease-in-out infinite; }
.bt-swimmer:nth-of-type(2n) > * { animation-delay: -1.2s; }
.bt-boat .h2 { font-size: clamp(2.3rem, 1.35rem + 2.9vw, 4.1rem); }
.bt-boat .h2 em, .bt-board .h2 em { display: block; }
.bt-num { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.08rem; letter-spacing: 0; text-transform: none; color: var(--sand-deep); }
.bt-boat-lead {
  margin: 1.8rem 0 1rem; font-family: var(--font-display); font-weight: 340; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.7rem);
  line-height: 1.36; letter-spacing: -.008em; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 50;
}
.bt-boat-text { max-width: 36rem; margin: 0 0 1.6rem; font-size: 1.04rem; color: var(--ink-2); }
/* the numbers: rows share one label column (subgrid), as on the About company card */
.bt-specs { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.6rem; max-width: 36rem; margin: 0; border-top: 1px solid var(--line); }
.bt-specs > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; row-gap: .2rem; padding: .78rem 0; border-bottom: 1px solid var(--line); }
.bt-specs dt { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.bt-specs dd { margin: 0; font-family: var(--font-display); font-size: 1.14rem; line-height: 1.35; font-variation-settings: "opsz" 48, "SOFT" 50; }
.bt-boat-actions { margin-top: 2rem; }
.bt-side { margin-top: clamp(48px, 6vw, 88px); }
.bt-side-svg, .bt-board-svg { display: block; width: 100%; height: auto; }
/* the light figure (as Perast's): paper, ink, the legend in four columns */
.cv--bt {
  color: var(--ink);
  background: radial-gradient(70% 60% at 86% 14%, rgba(219, 165, 129, .16), transparent 70%), var(--paper) var(--noise);
  box-shadow: inset 0 0 0 1px var(--line), 0 50px 90px -56px rgba(60, 28, 20, .55);
}
.section--paper .cv--bt { background: radial-gradient(70% 60% at 86% 14%, rgba(219, 165, 129, .14), transparent 70%), var(--ivory); }
.cv--bt .cv-cap { border-top-color: var(--line); }
.cv--bt .cv-cap-title { color: var(--sand-deep); }
.cv--bt .cv-legend { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cv--bt .cv-legend li { color: var(--ink-2); }
.cv--bt .cv-legend li:last-child { grid-column: auto; }
.cv--bt .cv-credit { color: var(--ink-3); }
/* the drawing comes to life when it scrolls into view: the numbered marks pop in (the inner .bt-mk, which has no
   transform attribute of its own — a CSS scale on the positioned <g> would scale its position too), the waterline laps */
.bt-mk { transform-box: fill-box; transform-origin: center; }
.js .cv--bt .bt-mk { scale: 0; transition: scale .7s cubic-bezier(.3, 1.5, .5, 1) .4s; }
.cv--bt.is-in .bt-mk { scale: 1; }
.cv--bt .bt-marks > g:nth-of-type(2) .bt-mk { transition-delay: .55s; }
.cv--bt .bt-marks > g:nth-of-type(3) .bt-mk { transition-delay: .7s; }
.cv--bt .bt-marks > g:nth-of-type(4) .bt-mk { transition-delay: .85s; }
.cv--bt .bt-marks > g:nth-of-type(n+5) .bt-mk { transition-delay: 1s; }
.bt-wl { animation: btWl 3.2s linear infinite; }
@keyframes btWl { to { stroke-dashoffset: -30; } }
.bt-dim { paint-order: stroke; stroke: var(--paper); stroke-width: 7px; stroke-linejoin: round; }
.section--paper .bt-dim { stroke: var(--ivory); }

/* on board: a flat lay on teak — the items drop onto the deck one after another */
.cv--deck { background: #B07A4D; }
.bt-flat-cap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 3rem; background: var(--ivory); }
.cv--bt .bt-flat-cap .cv-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cv-legend--from5 { counter-reset: cv 4; }
.bt-flat-note { margin: .9rem 0 0; font-family: var(--font-display); font-style: italic; color: var(--ink-3); font-variation-settings: "opsz" 24, "SOFT" 100; }
.js .bt-flat .bt-item { opacity: 0; translate: 0 -16px; scale: 1.05; transform-box: fill-box; transform-origin: center; transition: opacity .6s var(--ease), translate .9s var(--ease), scale .9s var(--ease); }
.bt-flat.is-in .bt-item { opacity: 1; translate: 0 0; scale: 1; }
.bt-flat .bt-item--1 { transition-delay: .15s; }
.bt-flat .bt-item--2 { transition-delay: .25s; }
.bt-flat .bt-item--3 { transition-delay: .35s; }
.bt-flat .bt-item--4 { transition-delay: .45s; }
.bt-flat .bt-item--5 { transition-delay: .6s; }
.bt-flat .bt-item--6 { transition-delay: .7s; }
.bt-flat .bt-item--7 { transition-delay: .8s; }
.bt-flat .bt-item--8 { transition-delay: .9s; }
.ab-co-list dd a { text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .3s, text-decoration-color .3s; }
.ab-co-list dd a:hover { color: var(--mahogany); text-decoration-color: currentColor; }

@media (max-width: 1100px) {
  .cv--bt .cv-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bt-pick-grid, .bt-boat-grid, .bt-boat--l .bt-boat-grid { grid-template-columns: minmax(0, 1fr); }
  .bt-boat--l .bt-photos { order: 0; }
  /* one column: the plan goes between the text and the stepper, so the seats that fill first (at the stern) stay in
     view next to − / + */
  .bt-pick-grid { row-gap: 0; }
  .bt-pick-copy { display: contents; }
  .bt-dock { order: 1; justify-self: center; width: min(100%, 560px); margin-top: 2.2rem; }
  .bt-count, .bt-verdict, .bt-pick-actions { order: 2; }
  .bt-photos--one .bt-photo--main { aspect-ratio: 4 / 3.4; }
  .bt-flat-cap { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  /* phones: the drawings shrink to a third — their marks and the measure grow back, the title block goes */
  .cv--bt .bt-mk, .js .cv--bt.is-in .bt-mk { scale: 2; }
  .bt-title { display: none; }
  .bt-dim { font-size: 34px; }
  .bt-dock-name { width: 52%; }
  .bt-dock-name b { font-size: .92rem; white-space: nowrap; }
  .bt-dock-name > span { font-size: .74rem; }
}
@media (max-width: 560px) {
  .cv--bt .cv-legend, .cv--bt .bt-flat-cap .cv-legend { grid-template-columns: minmax(0, 1fr); }
  .bt-photos { gap: 10px; }
  .bt-stepper { gap: .6rem; }
  .bt-step { width: 50px; height: 50px; }
}

/* ---------- Privacy policy & Terms (phases 18–19): plain text pages — the intro with the date, "in short" in four
   cards, then the contents (they follow the scroll) beside one readable column of numbered sections; no figures and
   no motion beyond the intro. .lg-todo marks company details still to come (README §9): fill them in and remove the
   draft note (.lg-draft) before publishing ---------- */
.page-hero .lg-meta[data-hero-in] { animation-delay: .74s; }
.page-hero .lg-draft[data-hero-in] { animation-delay: .86s; }
.lg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem 1.8rem; margin: 0; font-size: .95rem; color: var(--ink-2); }
.lg-updated { display: inline-flex; align-items: center; gap: .6em; }
.lg-updated .icon { color: var(--sand-deep); }
.lg-draft { display: flex; align-items: flex-start; gap: .7em; max-width: 34rem; margin: 1.2rem 0 0; font-size: .86rem; line-height: 1.5; color: var(--ink-3); }
.lg-draft::before { content: ""; flex: none; width: 1.9em; height: 1.1em; margin-top: .12em; border: 1px dashed var(--sand-deep); border-radius: 5px; background: rgba(219, 165, 129, .22); }
.lg-todo {
  display: inline-block; padding: 0 .5em; border: 1px dashed var(--sand-deep); border-radius: 6px;
  background: rgba(219, 165, 129, .22); color: var(--mahogany); font-style: italic; line-height: 1.45;
}
.lg-note { font-size: .86em; color: var(--ink-3); }

/* in short: four cards across the page (like "getting here" on the Contact page) */
.lg-short { margin-bottom: var(--space-group); }
.lg-short-title { margin: 0 0 1.2rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.lg-short-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-cards); margin: 0; padding: 0; }
.lg-short-item {
  padding: clamp(22px, 2.2vw, 30px); border-radius: var(--radius); background: var(--ivory);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5);
}
.lg-short-icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 1.3rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--sand-deep); }
.lg-short-item h3 { margin: 0 0 .5rem; font-family: var(--font-display); font-weight: 400; font-size: 1.26rem; line-height: 1.25; font-variation-settings: "opsz" 48, "SOFT" 50; }
.lg-short-item p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }

/* the contents beside the text (as the FAQ topics); the padding keeps focus rings inside the scrolling box */
.lg-grid { display: grid; grid-template-columns: minmax(0, .5fr) minmax(0, 1.5fr); gap: var(--space-grid); align-items: start; }
.lg-index {
  position: sticky; top: 112px; max-height: calc(100vh - 136px); max-height: calc(100dvh - 136px); overflow-y: auto;
  margin: -6px; padding: 6px; overscroll-behavior: contain; scrollbar-width: thin;
}
.lg-index-title { margin: 0 0 .9rem; font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.lg-index ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.lg-index li a {
  position: relative; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: baseline; padding: .6rem 0;
  border-bottom: 1px solid var(--line); font-family: var(--font-display); font-size: 1.02rem; line-height: 1.3;
  font-variation-settings: "opsz" 48, "SOFT" 50; transition: color .3s;
}
.lg-index-num { font-style: italic; font-size: .86rem; color: var(--sand-deep); }
.lg-index li a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--mahogany); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.lg-index li a:hover, .lg-index li a[aria-current] { color: var(--mahogany); }
.lg-index li a[aria-current]::after { transform: none; }
.lg-index-ask { display: grid; justify-items: start; gap: .7rem; margin-top: 1.6rem; }

/* the text: one readable column, numbered sections */
.lg-body { min-width: 0; max-width: 44rem; }
.lg-sec + .lg-sec { margin-top: clamp(44px, 4.6vw, 64px); padding-top: clamp(44px, 4.6vw, 64px); border-top: 1px solid var(--line); }
.lg-h {
  display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.2rem; font-family: var(--font-display); font-weight: 340;
  font-size: clamp(1.6rem, 1.25rem + 1vw, 2.15rem); line-height: 1.15; letter-spacing: -.016em; font-variation-settings: "opsz" 144, "SOFT" 40;
}
.lg-num { font-style: italic; font-weight: 300; font-size: .62em; color: var(--sand-deep); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.lg-sec p, .lg-list li { color: var(--ink-2); font-size: 1.05rem; line-height: 1.72; }
.lg-sec p:last-child { margin-bottom: 0; }
.lg-sec b { font-weight: 500; color: var(--ink); }
.lg-sec p a:not(.link-arrow), .lg-list a { color: var(--mahogany); font-weight: 500; background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.lg-sec p a:not(.link-arrow):hover, .lg-list a:hover { background-size: 0 1px; }
.lg-list { list-style: none; margin: 0 0 1.1em; padding: 0; }
.lg-list:last-child { margin-bottom: 0; }
.lg-list li { position: relative; padding-left: 1.6em; }
.lg-list li + li { margin-top: .5em; }
.lg-list li::before { content: ""; position: absolute; left: 0; top: .86em; width: .8em; height: 1px; background: var(--sand-deep); }
.lg-also { margin-top: 2rem; }
/* key facts (the company) and periods (how long we keep it): rows share one label column (subgrid), as on the About
   company card; without subgrid the label sits above the value */
.lg-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 2rem; margin: 1.6rem 0; border-top: 1px solid var(--line); }
.lg-dl > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: baseline; row-gap: .25rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.lg-dl dt { font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.lg-dl dd { margin: 0; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.4; font-variation-settings: "opsz" 48, "SOFT" 50; }
.lg-dl dd a { text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .3s, text-decoration-color .3s; }
.lg-dl dd a:hover { color: var(--mahogany); text-decoration-color: currentColor; }
.lg-dl--wide { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.lg-dl--wide dt { font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--ink); }
.lg-dl--wide dd { font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--ink-2); font-variation-settings: normal; }

@media (max-height: 820px) {
  .lg-index-ask { display: none; }
}
@media (max-width: 1100px) {
  .lg-short-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-group); }
  /* the contents become a card above the text, in two columns */
  .lg-index {
    position: static; max-height: none; overflow: visible; margin: 0; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius);
    background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5);
  }
  .lg-index ol { columns: 2; column-gap: 2.4rem; border-top: 0; }
  .lg-index li { break-inside: avoid; }
  .lg-index-ask { display: none; }
}
@media (max-width: 560px) {
  .lg-short-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lg-short-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; padding: 20px; }
  .lg-short-icon { grid-row: span 2; margin: 0; }
  .lg-short-item h3 { align-self: center; }
  .lg-index ol { columns: 1; }
  .lg-dl, .lg-dl--wide { grid-template-columns: minmax(0, 1fr); }
  .lg-sec p, .lg-list li { font-size: 1rem; }
}
/* printed (or saved as PDF): only the text — no header, footer, contents or call to action; web addresses spelled out */
@media print {
  body:has(.lg-page) { background: #fff; color: #000; }
  body:has(.lg-page) .site-header, body:has(.lg-page) .site-footer, body:has(.lg-page) .quick-contact, body:has(.lg-page) .skip-link,
  .lg-page .cta-band, .lg-page .lg-index, .lg-page .crumbs, .lg-page .lg-meta .link-arrow { display: none !important; }
  .lg-page.main--solid { padding-top: 0; }
  .lg-page .section { padding-block: 0; background: none; }
  .lg-page .page-hero { padding-block: 0 24pt; }
  .lg-page [data-hero-in], .lg-page .ln > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .lg-grid { display: block; }
  .lg-body { max-width: none; }
  .lg-short-item { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .lg-h { break-after: avoid; }
  .lg-dl > div { break-inside: avoid; }
  .lg-sec p a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: .85em; }
}

/* ---------- Tour page (phase 20 — the template of the tour pages 21–23): the destination photo intro · at a glance with a
   boarding pass · the voyage: the stops beside a chart that follows the scroll · included / bring / paid ashore · tips
   (.ds-tips) · reviews (as on the home page) · the other tours (.tour cards) ---------- */
/* intro: 01 · Boka Bay Tour — the calm bay off Perast with St. George and Our Lady of the Rocks to the right of the title.
   The whole 3:2 frame on computers; the islands sit low in the frame, so the bottom veil is shorter than on the
   destination pages (the left veil carries the text). Phones: a band at the top (see the mobile block below) */
.tr-hero--boka .ds-hero-img { object-position: 60% 72%; }
@media (max-aspect-ratio: 1/1) { .tr-hero--boka .ds-hero-img { object-position: 74% 50%; } }
.tr-hero--boka .hero-shade {
  background:
    linear-gradient(90deg, rgba(20, 12, 10, .62) 0%, rgba(20, 12, 10, .32) 40%, rgba(20, 12, 10, 0) 62%),
    linear-gradient(180deg, rgba(34, 18, 14, .6) 0%, rgba(34, 18, 14, 0) 24%),
    linear-gradient(0deg, rgba(34, 18, 14, .88) 0%, rgba(34, 18, 14, .36) 17%, rgba(34, 18, 14, 0) 36%);
}

/* intro: 02 · Blue Cave Tour (phase 21) — an illustration from inside the cave (art-cave.js), shown like a photo: the arch
   in the right half, the title over the dark rock and water on the left; narrower screens keep the arch (object-position
   to the right). A cool, navy veil instead of the warm one (it would muddy the blue). Since v1.26.0 the same for the
   intro of the Blue Cave destination page (.ds-hero--bc: its own picture from art-cave.js, the tour's band on phones) */
.tr-hero--cave, .ds-hero--bc { background: #04101C; }
.tr-hero--cave .ds-hero-img, .ds-hero--bc .ds-hero-img { object-position: 100% 50%; }
@media (max-aspect-ratio: 3/2) { .tr-hero--cave .ds-hero-img, .ds-hero--bc .ds-hero-img { object-position: 84% 50%; } }   /* the whole arch, clear of the title */
@media (max-aspect-ratio: 4/3) { .tr-hero--cave .ds-hero-img, .ds-hero--bc .ds-hero-img { object-position: 55% 50%; } }   /* the title first; the arch's right side runs off */
@media (max-aspect-ratio: 1/1) { .tr-hero--cave .ds-hero-img, .ds-hero--bc .ds-hero-img { object-position: 100% 50%; } }  /* upright: the arch above the title */
/* the destination page's picture has its arch further left: on squarer screens the picture moves less, so the lead stays
   on the dark rock (qa/hero_sizes.js: the lead ends before the arch from 1024×768 to 1366×1024) */
@media (max-aspect-ratio: 3/2) { .ds-hero--bc .ds-hero-img { object-position: 66% 50%; } }
@media (max-aspect-ratio: 4/3) { .ds-hero--bc .ds-hero-img { object-position: 38% 50%; } }
@media (max-aspect-ratio: 1/1) { .ds-hero--bc .ds-hero-img { object-position: 100% 50%; } }
@media (min-width: 761px) { .tr-hero--cave .ds-title, .ds-hero--bc .ds-title { font-size: min(clamp(3rem, 1.4rem + 4.8vw, 6.2rem), 12.5vh); } } /* phones keep the size of every intro */
.tr-hero--cave .ds-title .ln > *, .ds-hero--bc .ds-title .ln > * { text-wrap: balance; } /* a phone breaks the long second line evenly, not "… the / blue." */
.tr-hero--cave .hero-shade, .ds-hero--bc .hero-shade {
  background:
    linear-gradient(90deg, rgba(2, 10, 22, .58) 0%, rgba(2, 10, 22, .26) 40%, rgba(2, 10, 22, 0) 62%),
    linear-gradient(180deg, rgba(2, 10, 22, .55) 0%, rgba(2, 10, 22, 0) 22%),
    linear-gradient(0deg, rgba(2, 10, 22, .86) 0%, rgba(2, 10, 22, .32) 16%, rgba(2, 10, 22, 0) 34%);
}

/* intro: 03 · Boka Bay + Blue Cave (phase 22) — St. George from straight above, a speedboat's wake curving past it (the
   home card's photo, TEMPORARY): the left 72 % of the frame (Unsplash rect), so the island sits in the right third and
   the title over open water; narrower screens keep the island (object-position right). The title a size smaller, as on
   the Blue Cave Tour, so its long first line ends before the island. A deep sea-green veil — a warm one would turn the
   turquoise grey. Phones and upright tablets: a band round the island (the band block below) */
.tr-hero--combo { background: #04222E; }
.tr-hero--combo .ds-hero-img { object-position: 100% 50%; }
@media (min-width: 761px) { .tr-hero--combo .ds-title { font-size: min(clamp(3rem, 1.4rem + 4.8vw, 5.6rem), 12.5vh); } } /* capped lower: on wide screens the island starts where a bigger first line would end */
/* squarer screens held sideways (≤ 3:2 — tablets, 4:3 laptops): the island would sit behind the lead — a zoom from the left
   edge moves it to the right (its far end runs off the screen, as the arch does on the Blue Cave Tour); a narrower lead */
@media (min-width: 761px) and (max-aspect-ratio: 3/2) and (orientation: landscape) {
  .tr-hero--combo .hero-img { transform-origin: 0% 50%; animation-name: heroZoomComboS; }
  .tr-hero--combo .ds-lead { max-width: 32rem; }
}
@keyframes heroZoomComboS { from { transform: scale(1.4); } to { transform: scale(1.28); } }
.tr-hero--combo .hero-shade {
  background:
    linear-gradient(90deg, rgba(2, 24, 34, .62) 0%, rgba(2, 24, 34, .34) 42%, rgba(2, 24, 34, 0) 64%),
    linear-gradient(180deg, rgba(2, 24, 34, .55) 0%, rgba(2, 24, 34, 0) 22%),
    linear-gradient(0deg, rgba(2, 24, 34, .86) 0%, rgba(2, 24, 34, .32) 16%, rgba(2, 24, 34, 0) 34%);
}

/* intro: 04 · Custom Tour (phase 23) — the whole bay from the mountain road above Kotor (TEMPORARY photo, Unsplash rect
   without most of the sky): Kotor and its bay on the right, the ridge of Vrmac in the middle, the Bay of Tivat and the
   open sea on the left under the title. A deep sea-blue veil, stronger on the left (the daylight blues behind the title
   are bright); phones and upright tablets: a band round Vrmac and the Bay of Kotor (the band block below) */
.tr-hero--custom { background: #06202C; }
.tr-hero--custom .ds-hero-img { object-position: 50% 58%; }
.tr-hero--custom .hero-shade {
  background:
    linear-gradient(90deg, rgba(4, 22, 32, .74) 0%, rgba(4, 22, 32, .46) 40%, rgba(4, 22, 32, 0) 66%),
    linear-gradient(180deg, rgba(4, 22, 32, .55) 0%, rgba(4, 22, 32, 0) 24%),
    linear-gradient(0deg, rgba(4, 22, 32, .88) 0%, rgba(4, 22, 32, .34) 17%, rgba(4, 22, 32, 0) 36%);
}

/* at a glance: the copy beside the boarding pass, then the numbers */
.tr-glance-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: var(--space-grid); align-items: center; }
.tr-glance .h2 em, .tr-voyage .h2 em, .tr-pack .h2 em, .tr-more .h2 em { display: block; }
.tr-glance-copy .prose { max-width: 38rem; }
.tr-stats { margin-top: clamp(56px, 6vw, 88px); }
.tr-stats dd > span { white-space: nowrap; }

/* the boarding pass: the facts | a stub (duration, hours, booking), a perforation with a notch at each end between them;
   it sits a little askew and straightens under the pointer */
.tr-pass {
  --stub: 11rem; --pad: clamp(24px, 2.6vw, 36px);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); border-radius: var(--radius); color: var(--on-dark);
  background: radial-gradient(110% 80% at 0% 0%, rgba(219, 165, 129, .16), transparent 62%), var(--mahogany-deep) var(--noise);
  box-shadow: 0 50px 90px -50px rgba(60, 28, 20, .75); rotate: -1.4deg;
}
.js .tr-pass[data-reveal] { transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), rotate .9s var(--ease), translate .9s var(--ease); }
.tr-pass:hover { rotate: 0deg; translate: 0 -4px; }
.tr-pass-main { min-width: 0; padding: var(--pad); }
.tr-pass-kicker { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.1rem; font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--sand); }
.tr-pass-logo { width: 54px; height: 14px; flex: none; --logo-main: var(--sand-2); }
.tr-pass-title { margin: 0 0 1.3rem; font-family: var(--font-display); font-weight: 320; font-size: clamp(2rem, 1.5rem + 1.3vw, 2.8rem); line-height: 1.02; letter-spacing: -.022em; font-variation-settings: "opsz" 144, "SOFT" 40; }
.tr-pass-route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: 1rem; margin: 0 0 1.3rem; padding: 1rem 0 1.15rem; border-block: 1px solid var(--line-dark); }
.tr-pass-end small { display: block; margin-bottom: .2rem; font-size: .62rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-3); }
.tr-pass-end b { display: block; font-family: var(--font-display); font-weight: 340; font-size: clamp(1.45rem, 1.2rem + .7vw, 1.95rem); line-height: 1.05; color: var(--ivory); font-variation-settings: "opsz" 72; }
.tr-pass-end--to { text-align: right; }
.tr-pass-line { position: relative; align-self: center; height: 28px; }
.tr-pass-line > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tr-pass-path { fill: none; stroke: var(--sand); stroke-width: 1.4; stroke-dasharray: 2.5 5; stroke-linecap: round; vector-effect: non-scaling-stroke; animation: trFlow 2.8s linear infinite; }
@keyframes trFlow { to { stroke-dashoffset: -15; } }
.tr-pass-boat { position: absolute; left: 50%; top: -3px; width: 30px; height: 12px; translate: -50% 0; fill: var(--ivory); animation: cvBob 4.2s ease-in-out infinite; }
.tr-pass-cabin { fill: var(--sand); }
/* a connecting ticket (Boka Bay + Blue Cave): from Tivat via the Blue Cave to Perast — two legs of the line, the stop
   between them centred and a size smaller than the two ends; on a narrow pass a long name breaks over two lines */
.tr-pass-route--via { grid-template-columns: auto minmax(34px, 1fr) auto minmax(16px, 1fr) auto; gap: .7rem; }
.tr-pass-route--via .tr-pass-end b { font-size: clamp(1.2rem, 1rem + .55vw, 1.6rem); }
.tr-pass-route--via .tr-pass-end--via b { font-size: clamp(1rem, .82rem + .45vw, 1.32rem); }
.tr-pass-end--via { text-align: center; }
@media (max-width: 420px) {
  .tr-pass-route--via { gap: .5rem; }
  .tr-pass-route--via .tr-pass-end b { font-size: 1.1rem; }
  .tr-pass-route--via .tr-pass-end--via b { font-size: .98rem; }
}
@media (max-width: 380px) {
  /* the narrowest passes: the stop between moves under the line as a note ("via the Blue Cave"); the CG labels
     ("Polazište", "Odredište") would not fit five columns */
  .tr-pass-route--via { grid-template-columns: auto minmax(34px, 1fr) auto; grid-template-areas: "from line to" "via via via"; row-gap: .7rem; }
  .tr-pass-route--via > :first-child { grid-area: from; }
  .tr-pass-route--via > :nth-child(2) { grid-area: line; }
  .tr-pass-route--via > :nth-child(4) { display: none; }
  .tr-pass-route--via .tr-pass-end--to { grid-area: to; }
  .tr-pass-route--via .tr-pass-end--via { grid-area: via; display: flex; justify-content: center; align-items: baseline; gap: .6em; }
  .tr-pass-route--via .tr-pass-end--via small { margin: 0; }
}
.tr-pass-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .75rem 1.3rem; margin: 0; }
.tr-pass-list > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: baseline; }
.tr-pass-list dt { font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.tr-pass-list dd { margin: 0; font-size: .94rem; line-height: 1.45; color: var(--on-dark-2); }
.tr-pass-list a { color: var(--sand-2); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.tr-pass-list a:hover { background-size: 0 1px; }
.tr-pass-stub { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem; min-width: 0; padding: var(--pad) calc(var(--pad) * .75); }
.tr-pass-stub::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 0; border-left: 1.5px dashed rgba(219, 165, 129, .32); }
.tr-pass-stub::after {
  content: ""; position: absolute; top: -10px; bottom: -10px; left: -10px; width: 20px; pointer-events: none;
  background: radial-gradient(circle at 50% 10px, var(--ivory) 9.5px, transparent 10px) top / 20px 20px no-repeat, radial-gradient(circle at 50% 10px, var(--ivory) 9.5px, transparent 10px) bottom / 20px 20px no-repeat;
}
.tr-pass-dur { display: grid; justify-items: start; gap: .35rem; margin: 0; }
.tr-pass-dur b { font-family: var(--font-display); font-weight: 300; font-size: clamp(3rem, 2.4rem + 1.6vw, 4.2rem); line-height: .9; letter-spacing: -.035em; color: var(--sand-2); white-space: nowrap; font-variation-settings: "opsz" 144; }
.tr-pass-dur span { font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--on-dark-3); }
.tr-pass-when { margin: 0; font-size: .84rem; line-height: 1.45; color: var(--on-dark-2); }
.tr-pass-when b { display: block; font-weight: 500; color: var(--on-dark); font-variant-numeric: tabular-nums; }
.tr-pass-book { width: 100%; padding-inline: .8em; }

/* the voyage: the stops (a timeline of cards) beside the chart; wide screens: the chart stays in view and main.js sails
   the boat to the stop in the middle of the screen */
.tr-voyage-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-grid); align-items: start; }
.tr-map { position: sticky; top: 104px; min-width: 0; }
.tr-map-inner { max-width: calc((100vh - 250px) * 1.25); } /* a short screen: the chart (5:4) and its log stay in view */
.tr-stops { position: relative; list-style: none; margin: 0; padding: 0; }
.tr-stops::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; border-left: 1.5px dashed var(--line-strong); }
.tr-stop { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: clamp(16px, 1.8vw, 26px); align-items: start; }
.tr-stop + .tr-stop { margin-top: clamp(28px, 3vw, 44px); }
.tr-stop-mark {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px; margin-top: 16px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--sand-deep); color: var(--sand-deep); font-size: .86rem; font-weight: 600;
  transition: background-color .45s, color .45s, box-shadow .45s, transform .45s var(--ease);
}
.tr-stop--start .tr-stop-mark, .tr-stop--end .tr-stop-mark { margin-top: 2px; }
.tr-stop--start .tr-stop-mark::after, .tr-stop--end .tr-stop-mark::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sand-deep); transition: background-color .45s; }
.tr-stop.is-on .tr-stop-mark { background: var(--sand); color: var(--espresso); box-shadow: inset 0 0 0 1.5px var(--sand); }
.tr-stop.is-on .tr-stop-mark::after { background: var(--espresso); }
.tr-stop.is-current .tr-stop-mark { box-shadow: inset 0 0 0 1.5px var(--sand), 0 0 0 7px rgba(219, 165, 129, .28); transform: scale(1.06); }
.tr-stop-card {
  display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--radius); background: var(--ivory);
  box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5); transition: box-shadow .6s var(--ease);
}
.tr-stop.is-current .tr-stop-card, .tr-stop.is-hl .tr-stop-card { box-shadow: 0 0 0 1.5px rgba(219, 165, 129, .75), 0 40px 70px -46px rgba(60, 28, 20, .6); }
.tr-stop--pass .tr-stop-card { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.tr-stop--pass.is-current .tr-stop-card, .tr-stop--pass.is-hl .tr-stop-card { box-shadow: inset 0 0 0 1.5px var(--sand); }
.tr-stop-media { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); }
.tr-stop-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tr-stop-card:hover .tr-stop-media img { transform: scale(1.04); }
.tr-stop-body { min-width: 0; padding: clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px); }
.tr-stop--start .tr-stop-body, .tr-stop--end .tr-stop-body { padding: 0 0 .2rem; }
.tr-stop-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .8rem; }
.tr-chip {
  display: inline-flex; align-items: center; gap: .45em; min-height: 30px; padding: .25em .9em; border-radius: 999px;
  background: var(--paper); color: var(--mahogany); font-size: .78rem; font-weight: 500; line-height: 1.25;
}
.tr-stop--start .tr-chip, .tr-stop--end .tr-chip, .tr-stop--pass .tr-chip { background: var(--paper-2); }
.tr-chip .icon { width: 1.1em; height: 1.1em; color: var(--sand-deep); }
.tr-chip--ashore, .tr-chip--swim { background: var(--sand); color: var(--espresso); }
.tr-chip--ashore .icon, .tr-chip--swim .icon { color: var(--espresso); }
.tr-chip--in { background: var(--mahogany-deep); color: var(--on-dark); }
.tr-chip--in .icon { color: var(--sand); }
.tr-stop-km { font-size: .86rem; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-stop-name { margin: 0 0 .55rem; font-family: var(--font-display); font-weight: 380; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.95rem); line-height: 1.12; letter-spacing: -.012em; font-variation-settings: "opsz" 72, "SOFT" 40; }
.tr-stop--start .tr-stop-name, .tr-stop--end .tr-stop-name { font-size: clamp(1.35rem, 1.15rem + .5vw, 1.6rem); }
.tr-stop-text { margin: 0; font-size: .98rem; color: var(--ink-2); }
.tr-stop-link { margin-top: 1.1rem; }

/* the chart: the way home is a lighter, thinner line; the stop of the moment pings; below it the boat's place on the
   loop (the stop, its kilometre and a progress rail with a tick per stop) */
.pc-course--back { stroke: var(--sand-2); stroke-width: calc(var(--u) * 1.6px); opacity: .9; }
.pc-stop.is-current .pc-ring { animation: ping 2.2s var(--ease) infinite; }
.pc-stop.is-current .bk-label { opacity: 1; }
.tr-chart .pc-stop { cursor: pointer; }
.tr-log { margin-top: 1.1rem; }
.tr-log[hidden] { display: none; }
.tr-log-now { display: flex; align-items: center; gap: .75rem; min-height: 28px; margin: 0 0 .75rem; font-size: .9rem; color: var(--ink-2); }
.tr-log-n { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--sand); color: var(--espresso); font-size: .74rem; font-weight: 600; }
.tr-log-n:empty { background: var(--paper-2); }
.tr-log-n:empty::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sand-deep); }
.tr-log-now b { overflow: hidden; font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; font-variation-settings: "opsz" 48, "SOFT" 50; }
.tr-log-km { margin-left: auto; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-rail { position: relative; height: 14px; }
.tr-rail::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--line-strong); }
.tr-rail-fill { position: absolute; left: 0; top: 6px; height: 2px; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--sand-deep); }
.tr-rail-fill::after { content: ""; position: absolute; right: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--sand-deep); box-shadow: 0 0 0 4px rgba(142, 90, 57, .18); }
.tr-rail-tick { position: absolute; top: 2px; left: calc(var(--at) * 100%); width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--line-strong); transition: background-color .4s; }
.tr-rail-tick.is-on { background: var(--sand-deep); }

/* included · bring · paid ashore */
.tr-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-cards); }
.tr-pack-card { padding: clamp(26px, 2.6vw, 38px); border-radius: var(--radius); background: var(--paper); }
.tr-pack-card--in { background: radial-gradient(90% 70% at 100% 0%, rgba(219, 165, 129, .16), transparent 66%), var(--mahogany-deep) var(--noise); color: var(--on-dark); }
.tr-pack-title { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.3rem; font-family: var(--font-display); font-weight: 380; font-size: clamp(1.45rem, 1.2rem + .6vw, 1.8rem); line-height: 1.15; font-variation-settings: "opsz" 72, "SOFT" 40; }
.tr-pack-title .icon { width: 1.15em; height: 1.15em; color: var(--sand-deep); }
.tr-pack-card--in .tr-pack-title .icon { color: var(--sand); }
.tr-pack-list { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.tr-pack-list li { position: relative; padding-left: 1.5rem; line-height: 1.5; color: var(--ink-2); }
.tr-pack-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.tr-pack-card--in .tr-pack-list li { color: var(--on-dark-2); }
.tr-pack-card--in .tr-pack-list li::before { background: var(--sand); box-shadow: none; }

/* links inside a tip (the dark section) */
.ds-tip dd a { color: var(--sand-2); background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease), color .3s; }
.ds-tip dd a:hover { color: var(--on-dark); background-size: 0 1px; }
/* reviews (the home page's block) on an ivory section: the plain cards on paper */
.tr-reviews .review:not(.review--feature) { background: var(--paper); box-shadow: none; }
.tr-reviews .review:not(.review--feature) .avatar { background: var(--ivory); }
/* tour cards (home page, the other tours): a name that links to the tour's page makes the card's text a link too (the
   overlay stops at .tour-body — its container query contains it); the route button and booking stay on top */
.tour-title a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.tour-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tour-title a:hover, .tour-body:hover .tour-title a { color: var(--mahogany); background-size: 100% 1px; }
.tour-body { position: relative; }
.tour-foot { position: relative; z-index: 2; }
/* the Custom Tour card of the home page (dark, with the 5 h / 8 h switch): only its name is the link, in sand */
.custom-tour .tour-title a::after { content: none; }
.custom-tour .tour-title a:hover { color: var(--sand-2); }
.tr-more-all { margin: 0; }

@media (max-width: 1100px) {
  .tr-glance-grid { grid-template-columns: minmax(0, 1fr); }
  .tr-pass { max-width: 660px; }
  .tr-voyage-grid { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .tr-map { position: static; order: -1; }
  .tr-map-inner { max-width: none; }
  .tr-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-pack-card--ashore { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  /* tablets: the photo beside the text */
  .tr-stop-card { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); }
  .tr-stop--pass .tr-stop-card { grid-template-columns: minmax(0, 1fr); }
  .tr-stop-media { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 760px) {
  /* Boka Bay Tour on phones: the frame as a band at the top of the intro — the two islands (the lower right of the frame,
     Unsplash rect) between the header and the text, the band fading into the dark below; the text starts under the
     islands (the intro grows a little taller than a short phone, as intros with long texts already do) */
  .tr-hero--boka .hero-img {
    height: min(100%, 84vw); object-position: 50% 50%; transform-origin: 56% 52%;
    -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent); mask-image: linear-gradient(180deg, #000 64%, transparent);
  }
  .tr-hero--boka .hero-shade { background: linear-gradient(180deg, rgba(20, 12, 10, .55) 0%, rgba(20, 12, 10, 0) 20%), linear-gradient(0deg, rgba(34, 18, 14, .9) 0%, rgba(34, 18, 14, .3) 40%, rgba(34, 18, 14, 0) 62%); }
  .tr-hero--boka .hero-content { padding-top: max(clamp(104px, 15vh, 150px), calc(58vw + 8px)); }
}
@media (max-width: 760px), (max-width: 1100px) and (orientation: portrait) {
  /* Blue Cave Tour on phones and upright tablets: the same band — its own picture (the arch in the middle, the water
     darkening where the text begins; the <source> and the preload use the same media), fading into the navy of the
     intro. On an upright tablet the wide picture would put the bright arch right behind the title */
  .tr-hero--cave .hero-img, .ds-hero--bc .hero-img {
    height: min(100%, 84vw); object-position: 50% 50%; transform-origin: 50% 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent); mask-image: linear-gradient(180deg, #000 64%, transparent);
  }
  .tr-hero--cave .hero-shade, .ds-hero--bc .hero-shade { background: linear-gradient(180deg, rgba(2, 10, 22, .5) 0%, rgba(2, 10, 22, 0) 20%), linear-gradient(0deg, rgba(2, 10, 22, .9) 0%, rgba(2, 10, 22, .3) 40%, rgba(2, 10, 22, 0) 62%); }
  .tr-hero--cave .hero-content, .ds-hero--bc .hero-content { padding-top: max(clamp(104px, 15vh, 150px), calc(58vw + 8px)); }
  /* Boka Bay + Blue Cave: the same band — St. George in the middle (Unsplash rect round the island), the boat's wake
     above it, fading into the deep sea-green of the intro */
  .tr-hero--combo .hero-img {
    height: min(100%, 84vw); object-position: 50% 50%; transform-origin: 50% 55%;
    -webkit-mask-image: linear-gradient(180deg, #000 64%, transparent); mask-image: linear-gradient(180deg, #000 64%, transparent);
  }
  .tr-hero--combo .hero-shade { background: linear-gradient(180deg, rgba(2, 24, 34, .5) 0%, rgba(2, 24, 34, 0) 20%), linear-gradient(0deg, rgba(2, 24, 34, .9) 0%, rgba(2, 24, 34, .3) 40%, rgba(2, 24, 34, 0) 62%); }
  .tr-hero--combo .hero-content { padding-top: max(clamp(104px, 15vh, 150px), calc(58vw + 8px)); }
  /* Custom Tour: the same band — Vrmac and both bays (Unsplash rect), fading into the deep sea-blue of the intro a little
     sooner than the other bands and under a deeper veil: the bottom of the photo (green slopes, the roofs of Kotor) is
     bright where the breadcrumb begins */
  .tr-hero--custom .hero-img {
    height: min(100%, 84vw); object-position: 50% 50%; transform-origin: 62% 60%;
    -webkit-mask-image: linear-gradient(180deg, #000 54%, transparent 96%); mask-image: linear-gradient(180deg, #000 54%, transparent 96%);
  }
  .tr-hero--custom .hero-shade { background: linear-gradient(180deg, rgba(4, 22, 32, .5) 0%, rgba(4, 22, 32, 0) 20%), linear-gradient(0deg, rgba(4, 22, 32, .92) 0%, rgba(4, 22, 32, .44) 42%, rgba(4, 22, 32, 0) 66%); }
  .tr-hero--custom .hero-content { padding-top: max(clamp(104px, 15vh, 150px), calc(58vw + 8px)); }
}
@media (max-width: 640px) {
  .tr-stops::before { left: 17px; }
  .tr-stop { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; }
  .tr-stop-mark { width: 36px; height: 36px; margin-top: 10px; font-size: .8rem; }
  .tr-stop--start .tr-stop-mark, .tr-stop--end .tr-stop-mark { margin-top: 0; }
  .tr-pack-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* the pass turns: the stub below, the perforation across */
  .tr-pass { grid-template-columns: minmax(0, 1fr); rotate: -.8deg; }
  .tr-pass-stub { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .9rem 1.2rem; padding: 1.3rem var(--pad) var(--pad); }
  .tr-pass-stub::before { top: 0; bottom: auto; left: 16px; right: 16px; border-left: 0; border-top: 1.5px dashed rgba(219, 165, 129, .32); }
  .tr-pass-stub::after {
    top: -10px; bottom: auto; left: -10px; right: -10px; width: auto; height: 20px;
    background: radial-gradient(circle at 10px 50%, var(--ivory) 9.5px, transparent 10px) left / 20px 20px no-repeat, radial-gradient(circle at 10px 50%, var(--ivory) 9.5px, transparent 10px) right / 20px 20px no-repeat;
  }
  .tr-pass-dur b { font-size: 3rem; }
  .tr-pass-book { grid-column: 1 / -1; }
  .tr-pass-list { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
  .tr-pass-list > div { grid-template-columns: minmax(0, 1fr); padding-bottom: .55rem; }
  .tr-pass-list > div + div { padding-top: .2rem; }
}
/* a touch screen has no pointer to straighten the pass: it stayed askew, and a tap on Book straightened and lifted it
   until the next tap elsewhere, so there it stands straight */
@media (hover: none), (pointer: coarse) {
  .tr-pass, .tr-pass:hover { rotate: 0deg; translate: none; }
}

/* ---------- Custom Tour page (phase 23): the day planner — ideas (ready-made days) and the places to tick, in the four
   parts of the bay, beside the chart of the whole bay (sticky on wide screens); under the chart the day: the hours, km
   and stops, the day bar (sailing and stops on a scale of 0–9 hours, five and eight hours marked), the route in order,
   a hint and the message to Boris. Narrow screens: the chart and the day first, the list below, a dock with the hours
   and the message under the list (main.js "Custom Tour page"). Without JS: the list of places and the chart ---------- */
.pl-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-grid); align-items: start; }
.pl-pick { min-width: 0; }
.pl-map { position: sticky; top: 96px; min-width: 0; }
.pl-map-inner { max-width: calc((100vh - 380px) * 1.289); min-width: min(100%, 420px); margin-left: auto; } /* a short screen: the chart (1000 × 776) shrinks so the day under it stays in view */

/* ideas: ready-made days with their hours (worked out on the page) */
.pl-ideas { margin: 0 0 1.8rem; }
.pl-ideas[hidden] { display: none; }
.pl-ideas-label, .pl-legend { margin: 0 0 .75rem; padding: 0; font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sand-deep); }
.pl-ideas-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.pl-idea {
  display: inline-flex; align-items: baseline; gap: .55em; min-height: 40px; padding: .5em 1.05em; border-radius: 999px;
  background: var(--ivory); color: var(--mahogany); font-size: .88rem; font-weight: 500; line-height: 1.25; text-align: left;
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color .3s, color .3s, box-shadow .3s;
}
.pl-idea small { font-size: .78rem; font-weight: 400; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-idea:hover { box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.pl-idea[aria-pressed="true"] { background: var(--mahogany-deep); color: var(--on-dark); box-shadow: none; }
.pl-idea[aria-pressed="true"] small { color: var(--sand-2); }
.pl-clear { display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: .5em .9em; border-radius: 999px; font-size: .84rem; color: var(--ink-2); transition: color .3s; }
.pl-clear:hover { color: var(--mahogany); }
.pl-clear .icon { width: 1em; height: 1em; }

/* the places: a card per place (picture, name, what you do there, a tick that turns into the stop's number) */
.pl-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.pl-group + .pl-group { margin-top: 1.6rem; }
.pl-list { list-style: none; display: grid; gap: .55rem; margin: 0; padding: 0; }
.pl-opt {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) 36px; align-items: center; gap: .95rem;
  padding: .55rem .75rem .55rem .55rem; border-radius: 18px; background: var(--ivory); cursor: pointer;
  box-shadow: 0 1px 0 var(--line); transition: box-shadow .35s var(--ease), background-color .35s;
}
.pl-opt:hover, .pl-opt.is-hl { box-shadow: 0 0 0 1.5px rgba(219, 165, 129, .75), 0 18px 34px -26px rgba(60, 28, 20, .45); }
.pl-opt.is-on { background: #fff; box-shadow: 0 0 0 1.5px var(--sand), 0 18px 34px -26px rgba(60, 28, 20, .45); }
.pl-opt:has(.pl-input:focus-visible) { outline: 2px solid var(--mahogany); outline-offset: 3px; }
.pl-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pl-thumb { width: 56px; height: 56px; overflow: hidden; border-radius: 12px; background: var(--paper-2); }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-thumb img[src*="island-of-flowers"] { object-position: 82% 50%; }
.pl-thumb--icon { display: grid; place-items: center; background: radial-gradient(90% 90% at 30% 20%, rgba(219, 165, 129, .22), transparent 70%), var(--mahogany-deep); color: var(--sand); }
.pl-thumb--icon .icon { width: 26px; height: 26px; }
.pl-body { display: grid; gap: .12rem; min-width: 0; }
.pl-name { font-family: var(--font-display); font-weight: 400; font-size: 1.12rem; line-height: 1.22; color: var(--ink); font-variation-settings: "opsz" 48, "SOFT" 50; }
.pl-meta { display: flex; align-items: center; gap: .45em; font-size: .84rem; line-height: 1.35; color: var(--ink-3); }
.pl-meta .icon { width: 1.05em; height: 1.05em; color: var(--sand-deep); }
.pl-tick {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--sand-deep);
  box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: background-color .35s, box-shadow .35s, color .35s, transform .45s var(--ease);
}
.pl-tick .icon { width: 18px; height: 18px; }
.pl-tick-n { display: none; font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.pl-opt.is-on .pl-tick { background: var(--sand); color: var(--espresso); box-shadow: none; transform: scale(1.05); }
.pl-opt.is-on .pl-tick-plus { display: none; }
.pl-opt.is-on .pl-tick-n { display: block; }
html:not(.js) .pl-tick { display: none; } /* without JS a tick changes nothing */

/* the chart: a chosen place = a numbered marker; the lunch rides on the Žanjice marker as a small plate; the route is
   drawn from the promenade (main.js), a broad glow under it */
.pl-chart .pl-mark { cursor: pointer; }
.pl-mark.is-on .pc-dot { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.pl-mark.is-on .pc-num { fill: var(--espresso); }
.pl-mark.is-on .bk-label { opacity: 1; }
.pl-mark.is-hl .pc-ring, .pl-mark.is-now .pc-ring { animation: ping 2.2s var(--ease) infinite; }
.pl-plate { display: none; }
.pl-chart.has-lunch .pl-plate { display: inline; }
.pl-plate circle { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 1.5; }
.pl-plate path { fill: none; stroke: var(--espresso); stroke-width: 1.1; stroke-linecap: round; }
.pl-glow { fill: none; stroke: rgba(219, 165, 129, .2); stroke-width: calc(var(--u) * 8px); stroke-linecap: round; stroke-linejoin: round; }
.pl-course { stroke-linejoin: round; }
.pl.is-empty .bk-boat { opacity: 0; }

/* the day under the chart */
.pl-sum { margin-top: 1rem; padding: 1.15rem 1.3rem 1.25rem; border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .5); }
.pl-sum[hidden] { display: none; }
.pl-sum-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.3rem; }
.pl-sum-h { display: flex; align-items: baseline; gap: .7rem; margin: 0; }
.pl-sum-h small { font-size: .66rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.pl-sum-h b { font-family: var(--font-display); font-weight: 340; font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem); line-height: 1; letter-spacing: -.02em; color: var(--mahogany); white-space: nowrap; font-variant-numeric: tabular-nums; font-variation-settings: "opsz" 144; }
.pl-sum-meta { display: flex; gap: .45rem 1rem; flex-wrap: wrap; margin: 0; font-size: .9rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.pl-sail {
  display: inline-flex; align-items: center; gap: .5em; height: 38px; margin-left: auto; padding: 0 1.05em; border-radius: 999px;
  font-size: .84rem; font-weight: 500; color: var(--mahogany); box-shadow: inset 0 0 0 1.5px var(--line-strong); transition: box-shadow .3s, background-color .3s, color .3s;
}
.pl-sail .icon { width: 1em; height: 1em; }
.pl-sail:hover { box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.pl-sail:disabled { opacity: .45; pointer-events: none; }
.is-sailing .pl-sail { background: var(--sand); color: var(--espresso); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .pl-sail { display: none; } } /* the route is drawn whole at once; nothing to sail */
/* the day bar: a dashed thread while sailing, a block per stop (sand; the swims lighter, the lunch dark), the 5–8 hour
   range of a Custom Tour shaded, the hours beyond eight hatched; a line follows the boat while it sails */
.pl-day { margin: 1.05rem 0 .2rem; }
.pl-day-bar { position: relative; height: 24px; border-radius: 7px; background: var(--paper); }
.pl-day-bar::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--h8, 88.89%); right: 0; border-radius: 0 7px 7px 0; background: repeating-linear-gradient(-45deg, rgba(103, 53, 44, .1) 0 2px, transparent 2px 6px); }
.pl-range { position: absolute; top: 0; bottom: 0; background: rgba(219, 165, 129, .22); box-shadow: inset 1.5px 0 0 rgba(142, 90, 57, .55), inset -1.5px 0 0 rgba(142, 90, 57, .55); }
.pl-seg { position: absolute; z-index: 1; top: 3px; bottom: 3px; }
.pl-seg--sail { top: 11px; bottom: 11px; background: repeating-linear-gradient(90deg, var(--sand-deep) 0 3px, transparent 3px 6px); opacity: .7; }
.pl-seg--stop { display: grid; place-items: center; min-width: 4px; border-radius: 5px; background: var(--sand); box-shadow: 0 0 0 1.5px var(--ivory); }
.pl-seg--swim { background: var(--sand-2); }
.pl-seg--lunch { background: var(--mahogany); }
.pl-seg i { font-size: .66rem; font-style: normal; font-weight: 600; line-height: 1; color: var(--espresso); }
.pl-seg--lunch i { color: var(--on-dark); }
.pl-now { position: absolute; z-index: 2; top: -4px; bottom: -4px; left: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--mahogany); opacity: 0; transition: opacity .3s; }
.pl-now.is-on { opacity: 1; }
.pl-day-scale { position: relative; height: 1.25rem; margin-top: .3rem; font-size: .7rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.pl-day-scale span { position: absolute; top: 0; width: 1px; height: 5px; background: var(--line-strong); }
.pl-day-scale span.is-key { display: flex; justify-content: center; width: 0; height: auto; padding-top: 9px; background: none; color: var(--sand-deep); font-weight: 500; white-space: nowrap; }
.pl-day-scale span.is-key::before { content: ""; position: absolute; top: 0; left: -1px; width: 2px; height: 7px; border-radius: 1px; background: var(--sand-deep); }
/* the route in order: Tivat → 1 … → Tivat */
.pl-steps { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .86rem; line-height: 1.3; color: var(--ink-2); }
.pl-step { display: inline-flex; align-items: center; gap: .4em; }
.pl-step + .pl-step::before { content: "→"; margin-right: .1em; color: var(--sand-deep); }
.pl-step i { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--sand); color: var(--espresso); font-size: .78em; font-style: normal; font-weight: 600; }
.pl-step b { font-weight: 500; color: var(--ink); }
.pl-step--end b { color: var(--ink-2); font-weight: 400; }
.pl-hint { margin: .8rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--ink-2); }
.pl-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.pl-note { margin: .8rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-3); }
/* narrow screens: the dock (hours, stops, the way to the chart and the message) under the list, while the day is off screen */
.pl-dock { display: none; }

@media (max-width: 1100px) {
  .pl-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
  .pl-map { position: static; order: -1; }
  .pl-map-inner { max-width: none; min-width: 0; }
  .pl-dock {
    position: sticky; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: .5rem;
    margin-top: 1.4rem; padding: .5rem .5rem .5rem 1.15rem; border-radius: 999px; background: var(--espresso); color: var(--on-dark);
    box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .55); visibility: hidden; opacity: 0; translate: 0 14px;
    transition: opacity .4s, translate .5s var(--ease), visibility 0s .5s;
  }
  .pl-dock.is-on { visibility: visible; opacity: 1; translate: 0 0; transition: opacity .4s, translate .5s var(--ease), visibility 0s; }
  .pl-dock[hidden] { display: none; } /* without JS */
  .pl-dock-sum { display: flex; align-items: baseline; gap: .7rem; min-width: 0; margin: 0 auto 0 0; font-size: .86rem; color: var(--on-dark-2); white-space: nowrap; }
  .pl-dock-sum b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; color: var(--sand-2); }
  .pl-dock-map { display: inline-flex; align-items: center; gap: .4em; height: 40px; padding: 0 .9em; border-radius: 999px; font-size: .84rem; color: var(--on-dark); box-shadow: inset 0 0 0 1px var(--line-dark); }
  .pl-dock-map .icon { width: 1.05em; height: 1.05em; color: var(--sand); }
  /* while the dock is up, the phone's booking bar and the floating button step aside */
  .pl-docked .mobile-bar.is-visible { transform: translateY(170%); }
  .pl-docked .wa-float.is-visible { transform: translateY(150%); }
}
@media (max-width: 640px) {
  .pl-opt { grid-template-columns: 48px minmax(0, 1fr) 32px; gap: .8rem; padding: .5rem .6rem .5rem .5rem; border-radius: 16px; }
  .pl-thumb { width: 48px; height: 48px; border-radius: 10px; }
  .pl-tick { width: 32px; height: 32px; }
  .pl-name { font-size: 1.04rem; }
  .pl-meta { font-size: .8rem; }
  .pl-sum { padding: 1rem 1rem 1.1rem; }
  .pl-sail { margin-left: 0; }
  .pl-dock { padding-left: .95rem; }
  .pl-dock-map { padding: 0 .75em; }
}

/* ---------- Tours overview (phase 24): the four tours as cards · "help me choose" — three questions beside the chart of
   all four tours (a colour per tour; where two tours share the water their lines run side by side; the legend under the
   chart shows one tour with its way home) · the tours side by side in a table (a column per tour; on narrow screens
   the row names stay put while the tours scroll sideways) · what every tour shares. main.js "Tours overview" ---------- */
.to-tours, .to-find, .to-cmp { --t-boka: var(--sand); --t-cave: #7CC9D2; --t-combo: var(--on-dark); --t-custom: var(--sand-2); }
[data-tour="boka"], [data-tc-key="boka"], [data-tf-pick="boka"] { --c: var(--t-boka); }
[data-tour="cave"], [data-tc-key="cave"], [data-tf-pick="cave"] { --c: var(--t-cave); }
[data-tour="combo"], [data-tc-key="combo"], [data-tf-pick="combo"] { --c: var(--t-combo); }
[data-tour="custom"], [data-tc-key="custom"], [data-tf-pick="custom"] { --c: var(--t-custom); }

/* the four cards: four in a row on wide screens, two on tablets, a sideways row on phones (as on the home page); the
   Custom Tour is a card like the others here (the home page's last-card rule doesn't apply) */
.to-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tour-grid.to-grid > .tour:last-child { grid-column: auto; display: flex; }
.to-grid .tour-media, .tour-grid.to-grid > .tour:last-child .tour-media { aspect-ratio: 1 / 1.02; min-height: 0; }
.to-grid .tour-body { padding: 1.4rem 1.45rem 1.35rem; }
.to-grid .tour-title { font-size: clamp(1.5rem, 1.15rem + .65vw, 1.85rem); }
.to-grid .tour-num { font-size: 3.7rem; }
.to-grid .tour.is-pick { box-shadow: 0 0 0 2px var(--sand), 0 40px 70px -42px rgba(60, 28, 20, .55); }
@media (max-width: 1279px) and (min-width: 761px) {
  .to-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .to-grid .tour-media, .tour-grid.to-grid > .tour:last-child .tour-media { aspect-ratio: 16 / 10; }
}

/* help me choose: the questions (left) beside the chart (right, in view while the questions scroll) */
.tf-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-grid); align-items: start; }
.tf-quiz { min-width: 0; }
.tf-map { position: sticky; top: 96px; min-width: 0; }
.tf-form[hidden], .tf-result[hidden], .tf-pick[hidden], .tf-empty[hidden], .tf-alt[hidden], .tf-reset[hidden] { display: none; }
.tf-q { min-width: 0; margin: 0; padding: 0; border: 0; }
.tf-q + .tf-q { margin-top: 1.8rem; }
.tf-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; margin: 0 0 .9rem; padding: 0;
  font-family: var(--font-display); font-weight: 380; font-size: clamp(1.18rem, 1.05rem + .35vw, 1.36rem); line-height: 1.25; color: var(--on-dark);
  font-variation-settings: "opsz" 48, "SOFT" 50;
}
.tf-legend small { font-family: var(--font-sans); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-2); }
.tf-n { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--sand); color: var(--espresso); font-family: var(--font-sans); font-size: .78rem; font-weight: 600; }
.tf-opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.tf-opt {
  position: relative; display: inline-flex; align-items: center; gap: .55em; min-height: 44px; padding: .5em 1.1em; border-radius: 999px;
  color: var(--on-dark-2); font-size: .92rem; line-height: 1.3; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line-dark); transition: background-color .3s, color .3s, box-shadow .3s;
}
.tf-opt:hover { color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(219, 165, 129, .6); }
.tf-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.tf-opt:has(.tf-input:checked) { background: var(--sand); color: var(--espresso); box-shadow: none; }
.tf-opt:has(.tf-input:focus-visible) { outline: 2px solid var(--sand); outline-offset: 3px; }
.tf-opts--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tf-opt--card { min-height: 62px; padding: .7em 1em; border-radius: 16px; }
.tf-opt--card .icon { width: 22px; height: 22px; color: var(--sand); transition: color .3s; }
.tf-opt--card:has(.tf-input:checked) .icon { color: var(--espresso); }
.tf-tick { width: 18px; height: 18px; padding: 2px; border-radius: 5px; color: transparent; box-shadow: inset 0 0 0 1.5px var(--on-dark-2); transition: color .3s, box-shadow .3s; }
.tf-opt--check:has(.tf-input:checked) .tf-tick { color: var(--espresso); box-shadow: inset 0 0 0 1.5px var(--espresso); }
.tf-reset { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; margin-top: 1.2rem; padding: 0 .2em; font-size: .86rem; color: var(--on-dark-2); transition: color .3s; }
.tf-reset:hover { color: var(--sand-2); }
.tf-reset .icon { width: 1em; height: 1em; }

/* the answer: a prompt until the first two questions are answered, then the tour (its colour on top) with notes */
.tf-result { margin-top: 2rem; }
.tf-empty { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--line-dark); color: var(--on-dark-2); font-size: .94rem; line-height: 1.5; }
.tf-empty .icon { flex: none; width: 28px; height: 28px; color: var(--sand); }
.tf-empty p { margin: 0; }
.tf-empty b { display: block; margin-bottom: .2rem; font-weight: 500; color: var(--on-dark); }
.tf-pick {
  position: relative; padding: clamp(24px, 2.4vw, 34px) clamp(22px, 2.4vw, 34px) clamp(22px, 2.2vw, 30px); border-radius: var(--radius);
  background: var(--mahogany-deep) var(--noise); box-shadow: inset 0 0 0 1px var(--line-dark), 0 40px 80px -50px rgba(0, 0, 0, .8);
}
.tf-pick::before { content: ""; position: absolute; left: clamp(22px, 2.4vw, 34px); top: 0; width: 64px; height: 4px; border-radius: 0 0 4px 4px; background: var(--c); }
.tf-pick.is-new { animation: tfIn .7s var(--ease) both; }
@keyframes tfIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.tf-pick-kicker { margin: 0 0 .5rem; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand); }
.tf-pick-name { margin: 0 0 .75rem; font-family: var(--font-display); font-weight: 360; font-size: clamp(1.9rem, 1.4rem + 1.3vw, 2.6rem); line-height: 1.05; letter-spacing: -.016em; font-variation-settings: "opsz" 144, "SOFT" 50; }
.tf-pick-name a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease); }
.tf-pick-name a:hover { background-size: 100% 1px; }
.tf-pick-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin: 0 0 1rem; font-size: .88rem; color: var(--on-dark-2); }
.tf-pick-meta > span { display: inline-flex; align-items: center; gap: .45em; }
.tf-pick-meta .icon { color: var(--sand); }
.tf-pick-text { margin: 0 0 1.1rem; font-size: .98rem; color: var(--on-dark-2); }
.tf-notes { display: grid; gap: .55rem; margin: 0 0 1.3rem; padding: 0; list-style: none; }
.tf-notes:empty { display: none; }
.tf-notes li { position: relative; padding-left: 1.45rem; font-size: .9rem; line-height: 1.5; color: var(--on-dark); }
.tf-notes li::before { content: ""; position: absolute; left: 2px; top: .52em; width: 8px; height: 8px; border-radius: 50%; background: var(--sand); }
.tf-notes a, .tf-alt a { color: var(--sand-2); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tf-notes a:hover, .tf-alt a:hover { color: var(--on-dark); }
.tf-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.tf-alt { margin: 1rem 0 0; padding-left: .2rem; font-size: .9rem; line-height: 1.5; color: var(--on-dark-2); }

/* the chart of all four tours: a line per set tour (its colour over a dark casing, so lines side by side stay apart),
   the Custom Tour (Boris's day, dotted) and the ways home only with their tour; a tour on show comes forward and the
   rest step back. Widths in chart units — they shrink with the chart, so the bundles keep their shape on a phone */
.tc-frame { margin: 0; }
.tc-tour { transition: opacity .5s; }
.tc-case { fill: none; stroke: var(--chart-sea); stroke-width: 6.2; stroke-linecap: round; stroke-linejoin: round; }
.tc-line { fill: none; stroke: var(--c); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .4s; }
.tc-tour[data-tour="custom"] { opacity: 0; }
.tc-tour[data-tour="custom"] .tc-case { display: none; }
.tc-tour[data-tour="custom"] .tc-line { stroke-width: 3; stroke-dasharray: 1 5.5; }
.tc-back { fill: none; stroke: var(--sand-2); stroke-width: 1.8; stroke-dasharray: 4 5; stroke-linecap: round; opacity: 0; transition: opacity .5s; }
.tc-chart.has-show .tc-tour:not(.is-shown) { opacity: .14; }
.tc-chart.has-show .tc-tour.is-shown { opacity: 1; }
.tc-tour.is-shown .tc-line { stroke-width: 4.2; }
.tc-tour[data-tour="custom"].is-shown .tc-line { stroke-width: 3.4; }
.tc-back.is-shown { opacity: .9; }
.tc-mark { transition: opacity .5s; }
.tc-dot { fill: var(--on-dark); stroke: var(--chart-sea); stroke-width: 2; transition: fill .4s; }
.tc-mark--custom .tc-dot { fill: var(--chart-sea); stroke: var(--sand-2); stroke-width: 1.6; }
.tc-mark .bk-label { opacity: .82; transition: opacity .4s; }
.tc-chart.has-show .tc-mark:not(.is-on) { opacity: .3; }
.tc-mark.is-on .tc-dot { fill: var(--sand); stroke: var(--chart-sea); stroke-width: 2; }
.tc-mark.is-on .bk-label { opacity: 1; }
.tc-mark.is-now .pc-ring { animation: ping 2.2s var(--ease) infinite; }
/* phones: the names only for a set tour on show (the legend and the table name everything; the Custom Tour's twelve
   places would crowd a small chart) */
.pc-chart.is-small .tc-mark .bk-label { display: none; }
.pc-chart.is-small.has-show:not(.is-custom) .tc-mark.is-on .bk-label { display: inline; }

/* the legend: a button per tour (its colour, name and hours); the pressed one is on show */
.tc-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 1rem; }
.tc-key {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; column-gap: .7rem; min-height: 58px; padding: .6rem .85rem;
  border-radius: 14px; text-align: left; color: var(--on-dark-2); box-shadow: inset 0 0 0 1px var(--line-dark);
  transition: background-color .3s, box-shadow .3s, color .3s;
}
.tc-key > span { font-family: var(--font-display); font-weight: 400; font-size: .96rem; line-height: 1.2; color: var(--on-dark); font-variation-settings: "opsz" 48, "SOFT" 50; }
.tc-key small { grid-column: 2; font-size: .74rem; letter-spacing: .08em; color: var(--on-dark-2); }
.tc-swatch { grid-row: 1 / span 2; width: 26px; height: 4px; border-radius: 2px; background: var(--c); }
.tc-key[data-tc-key="custom"] .tc-swatch { height: 3px; background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 7px); }
.tc-key:hover, .tc-key.is-hl { color: var(--on-dark); box-shadow: inset 0 0 0 1px rgba(219, 165, 129, .6); }
.tc-key[aria-pressed="true"] { background: rgba(246, 238, 228, .07); box-shadow: inset 0 0 0 1.5px var(--c); }
.tc-note { margin: .9rem 0 0; font-size: .82rem; line-height: 1.55; color: var(--on-dark-2); }
.tc-note-key { display: inline-flex; align-items: center; gap: .5em; margin-left: .5em; white-space: nowrap; }
.tc-note-ring { flex: none; width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px var(--sand-2); }

/* side by side: a column per tour (its colour on a dark chip, as in the legend), the row names in the first column;
   the finder's pick is marked; pointing at a column lights it */
.cmp-scroll { border-radius: var(--radius); background: var(--ivory); box-shadow: 0 1px 0 var(--line), 0 30px 60px -46px rgba(60, 28, 20, .45); }
.cmp-scroll:focus-visible { outline: 2px solid var(--mahogany); outline-offset: 4px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp th, .cmp td { padding: 1rem 1.15rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: .94rem; line-height: 1.45; color: var(--ink-2); transition: background-color .35s; }
.cmp thead th, .cmp thead td { padding-top: 1.7rem; padding-bottom: 1.2rem; vertical-align: bottom; }
.cmp tr > :first-child { width: 17%; }
.cmp tbody th { font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.cmp tbody th .icon { display: block; width: 20px; height: 20px; margin-bottom: .45rem; color: var(--sand-deep); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp-tour { position: relative; }
.cmp-tour::before { content: ""; position: absolute; left: 1.15rem; top: .9rem; width: 34px; height: 12px; border-radius: 999px; background: linear-gradient(var(--c), var(--c)) 50% 50% / 20px 3px no-repeat, var(--chart-sea); }
.cmp-tour[data-tour="custom"]::before { background: repeating-linear-gradient(90deg, var(--c) 0 3px, transparent 3px 6px) 50% 50% / 20px 2.5px no-repeat, var(--chart-sea); }
.cmp-num { display: block; margin: .2rem 0 .5rem; font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.7rem; line-height: 1; color: var(--sand-deep); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.cmp-name { display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.18rem, 1rem + .4vw, 1.4rem); line-height: 1.15; color: var(--ink); font-variation-settings: "opsz" 48, "SOFT" 50; transition: color .3s; }
.cmp-name:hover { color: var(--mahogany); }
.cmp-kicker { display: block; margin-top: .35rem; font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--sand-deep); }
.cmp-pick { display: none; position: absolute; right: .9rem; top: .75rem; padding: .25em .75em; border-radius: 999px; background: var(--mahogany-deep); color: var(--on-dark); font-size: .68rem; font-weight: 500; letter-spacing: .06em; }
.cmp .is-pick { background: rgba(219, 165, 129, .16); }
.cmp-tour.is-pick .cmp-pick { display: inline-flex; }
.cmp .is-col-hl { background: rgba(219, 165, 129, .09); }
.cmp .is-pick.is-col-hl { background: rgba(219, 165, 129, .22); }
.cmp-big { font-family: var(--font-display); font-weight: 380; font-size: 1.3rem; line-height: 1.2; color: var(--mahogany); font-variation-settings: "opsz" 48, "SOFT" 50; }
.cmp-route { position: relative; display: grid; gap: .32rem; margin: 0; padding: 0 0 0 1.15rem; list-style: none; font-size: .9rem; line-height: 1.35; color: var(--ink); }
.cmp-route::before { content: ""; position: absolute; left: 3px; top: .55em; bottom: .55em; border-left: 1.5px dotted var(--sand-deep); }
.cmp-route li { position: relative; }
.cmp-route li::before { content: ""; position: absolute; left: calc(-1.15rem + .5px); top: .42em; width: 7px; height: 7px; border-radius: 50%; background: var(--ivory); box-shadow: inset 0 0 0 1.5px var(--sand-deep); }
.cmp-route li:last-child::before { background: var(--sand-deep); }
.cmp-text { margin: 0; }
.cmp td a:not(.btn):not(.tour-route) { color: var(--mahogany); font-weight: 500; background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.cmp td a:not(.btn):not(.tour-route):hover { background-size: 0 1px; }
.cmp-yes, .cmp-no { display: inline-flex; align-items: flex-start; gap: .5em; }
.cmp-yes .icon, .cmp-no .icon { flex: none; width: 18px; height: 18px; margin-top: .1em; }
.cmp-yes .icon { color: var(--sand-deep); }
.cmp-no { color: var(--ink-3); }
.cmp tfoot td { padding-top: 1.2rem; padding-bottom: 1.4rem; border-bottom: 0; border-top: 1px solid var(--line); }
.cmp-foot { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.cmp-corner { position: relative; }
.cmp-swipe { display: none; }

/* what every tour shares */
.cmp-same { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.4rem; margin-top: var(--space-cards); padding: 1.2rem 1.6rem; border-radius: var(--radius); background: var(--paper); }
.cmp-same-title { margin: 0; font-size: .7rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--sand-deep); }
.cmp-same-list { display: flex; flex-wrap: wrap; gap: .7rem 2rem; margin: 0; padding: 0; list-style: none; }
.cmp-same-list li { display: inline-flex; align-items: center; gap: .55em; font-size: .92rem; color: var(--ink-2); }
.cmp-same-list .icon { color: var(--sand-deep); }
.cmp-same-list a { color: var(--mahogany); font-weight: 500; background: linear-gradient(currentColor, currentColor) 100% 100% / 100% 1px no-repeat; transition: background-size .45s var(--ease); }
.cmp-same-list a:hover { background-size: 0 1px; }

@media (max-width: 1100px) {
  .tf-grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .tf-map { position: static; }
  .tc-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the table scrolls sideways: the row names stay put, two tours at a time (one on a phone) */
  .cmp-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 150px; overscroll-behavior-x: contain; }
  .cmp { width: calc(150px + 4 * 40vw); }
  .cmp tr > :first-child { position: sticky; left: 0; z-index: 2; width: 150px; background: var(--ivory); box-shadow: 1px 0 0 var(--line); }
  .cmp tr > :not(:first-child) { scroll-snap-align: start; }
  .cmp-swipe { display: inline-flex; align-items: center; gap: .4em; font-size: .7rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
  .cmp-swipe .icon { width: 1em; height: 1em; color: var(--sand-deep); }
}
@media (max-width: 760px) {
  .tf-opts--cards { grid-template-columns: minmax(0, 1fr); }
  .tf-opt--card { min-height: 54px; }
  .tc-legend { gap: 6px; }
  .tc-key { min-height: 52px; padding: .5rem .7rem; column-gap: .55rem; grid-template-columns: 20px minmax(0, 1fr); }
  .tc-swatch { width: 20px; }
  .tc-key > span { font-size: .92rem; }
  .cmp-scroll { margin-inline: calc(var(--gutter) * -.5); border-radius: 18px; scroll-padding-left: 112px; }
  .cmp { width: calc(112px + 4 * 62vw); } /* the next tour peeks in at the edge */
  .cmp tr > :first-child { width: 112px; }
  .cmp th, .cmp td { padding: .9rem .9rem; font-size: .9rem; }
  .cmp-tour::before { left: .9rem; }
  .cmp tbody th { font-size: .64rem; letter-spacing: .12em; }
  .cmp-same { padding: 1.1rem 1.2rem; }
  .cmp-same-list { flex-direction: column; gap: .6rem; }
}

/* ---------- CTA band — closing call to action on sub-pages ---------- */
.cta-band {
  position: relative; padding-block: clamp(72px, 8vw, 128px); text-align: center; color: var(--on-dark);
  background: radial-gradient(70% 100% at 50% 0%, rgba(219, 165, 129, .16), transparent 66%), var(--mahogany-deep) var(--noise);
}
.cta-band-inner { display: grid; justify-items: center; }
.cta-band-mark { width: 116px; height: 30px; margin-bottom: 1.7rem; --logo-main: var(--on-dark); }
.cta-band-title {
  max-width: 15ch; margin: 0 auto 1.4rem; font-family: var(--font-display); font-weight: 300; font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.6rem);
  line-height: 1; letter-spacing: -.026em; font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0; text-wrap: balance;
}
.cta-band-title em { display: block; font-style: italic; color: var(--sand-2); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.cta-band-note { margin: 0 0 2.2rem; color: var(--on-dark-2); }
.cta-band-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

@media (max-width: 1100px) {
  .faqp-grid { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .faq-index { position: static; }
  .faq-index ol { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter) * -1); padding: 2px var(--gutter); border: 0; scrollbar-width: none; }
  .faq-index ol::-webkit-scrollbar { display: none; }
  .faq-index li a { display: inline-flex; gap: .55rem; padding: .6rem 1.05rem; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); white-space: nowrap; font-size: 1rem; }
  .faq-index li a::after { content: none; }
  .faq-index li a[aria-current] { background: var(--mahogany); color: var(--ivory); box-shadow: none; }
  .faq-index li a[aria-current] .fi-num { color: var(--sand-2); }
  .faq-index-ask { display: none; }
}
@media (max-width: 960px) {
  .page-hero-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .cta-band-actions .btn { flex: 1 1 100%; }
}

@media (max-width: 1100px) {
  .ch-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ch-facts > li:nth-child(3) { border-left: 0; }
  .ch-facts > li:nth-child(3) .ch-fact { padding-left: 0; }
  .ch-facts > li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .ch-fact { padding-bottom: 1.5rem; }
  .gh-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px), (hover: none) and (pointer: coarse) {
  .ch-qr { display: none; }
}
@media (max-width: 960px) {
  .ch-grid, .cm-grid { grid-template-columns: minmax(0, 1fr); }
  .ch-clock { max-width: 560px; }
  .cm-map { min-height: 380px; order: 2; }
}
@media (max-width: 560px) {
  .page-actions .btn { flex: 1 1 100%; }
  .ch-facts { grid-template-columns: minmax(0, 1fr); }
  .ch-facts > li + li { border-left: 0; border-top: 1px solid var(--line); }
  .ch-fact, .ch-facts > li:nth-child(3) .ch-fact { padding: 1.3rem 0; }
  .gh-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .gh-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 1rem; padding: 20px; }
  .gh-icon { grid-row: span 3; margin: 0; }
  .gh-time { font-size: 1.9rem; }
  .gh-place { margin: .35rem 0 .2rem; }
}

/* ---------- 404 — page not found: "4 (compass) 4" + the way back ---------- */
.nf {
  display: flex; align-items: center;
  min-height: calc(100vh - var(--header-h)); min-height: calc(100svh - var(--header-h));
  padding-block: clamp(56px, 7vw, 112px);
}
.nf-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: var(--space-grid); }
.nf-art { min-width: 0; }
.nf-code {
  display: flex; align-items: center; margin: 0 0 0 -.025em;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(8.5rem, 2.5rem + 14vw, 17.5rem); line-height: .82; letter-spacing: -.04em;
  color: var(--mahogany); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; font-variant-numeric: lining-nums;
}
.nf-compass { width: .74em; height: .74em; margin: 0 .05em 0 .02em; overflow: visible; }
.nf-ring { fill: none; stroke: var(--mahogany); stroke-width: 3.2; }
.nf-ring-in { fill: none; stroke: var(--sand-deep); stroke-width: 1; stroke-dasharray: 1.2 3.4; }
.nf-ticks { fill: none; stroke: var(--mahogany); stroke-width: 1.6; stroke-linecap: round; }
.nf-ew { fill: var(--sand); opacity: .5; }
.nf-n { fill: var(--mahogany); }
.nf-s { fill: var(--sand); }
.nf-pin { fill: var(--ivory); stroke: var(--mahogany); stroke-width: 1.6; }
/* the needle swings while it "searches", settles on north, then breathes; main.js takes over on pointer move */
.nf-sway { transform-box: fill-box; transform-origin: center; animation: nfSearch 3.4s var(--ease-io) .45s both, nfSway 7s ease-in-out 3.85s infinite; }
.nf-compass.is-following .nf-sway { animation: none; }
@keyframes nfSearch {
  0% { transform: rotate(128deg); }
  22% { transform: rotate(-62deg); }
  42% { transform: rotate(38deg); }
  60% { transform: rotate(-21deg); }
  76% { transform: rotate(10deg); }
  90% { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}
@keyframes nfSway { 0%, 100% { transform: rotate(0deg); } 30% { transform: rotate(5deg); } 70% { transform: rotate(-4deg); } }
.nf-coords { margin: 1.6rem 0 0; font-size: .7rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-3); }
.nf-ll { white-space: nowrap; }
.nf-ll::before { content: "·"; margin: 0 .55em; }

.nf-copy { min-width: 0; max-width: 40rem; }
.nf-title {
  margin: 0 0 1.5rem; font-family: var(--font-display); font-weight: 340;
  font-size: clamp(2.3rem, 1.4rem + 2.6vw, 4.1rem); line-height: 1.04; letter-spacing: -.024em;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 0; text-wrap: balance;
}
.nf-title em { display: block; font-style: italic; font-weight: 300; color: var(--mahogany); font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
.nf-lead { margin-bottom: 2.2rem; }
.nf-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.nf-help { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 2.2rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line); color: var(--ink-2); }
.nf-help .link-arrow .icon:first-child { color: #1F9E4D; }

@media (max-width: 960px) {
  .nf-inner { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .nf-code { font-size: clamp(8.5rem, 4rem + 16vw, 12rem); }
}
@media (max-width: 480px) {
  .nf-ll { display: block; margin-top: .55em; }
  .nf-ll::before { content: none; }
  .nf-copy .eyebrow-line { display: none; }
  .nf-links li { flex: 1 1 0; }
  .nf-links li:first-child { flex-basis: 100%; }
  .nf-links .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-sway { animation: none; }
}

/* ==========================================================================
   Reveal
   ========================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 95ms); }
.js [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
.js .tour-grid[data-reveal-stagger].is-in > .tour:hover { transform: translateY(-6px); transition-delay: 0s; }

/* ==========================================================================
   Scroll motion — what moves with the page (main.js: "scroll motion" in onScroll, "Smooth scroll").
   With reduced motion main.js sets none of this and everything stays at rest.
   ========================================================================== */
/* how far down the page you are: a line along the top edge, over the header and under the menu */
.scroll-line { position: fixed; inset: 0 0 auto; z-index: 61; height: 2px; background: var(--sand); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
/* leaving an intro with a photo (--out 0 → 1 on .hero): the text lifts off and fades, the photo pushes in and dims */
.hero-content { translate: 0 calc(var(--out, 0) * -10vh); opacity: calc(1 - var(--out, 0) * 1.35); }
.hero-review, .hero-coords { filter: opacity(calc(1 - var(--out, 0) * 1.35)); } /* not opacity: their entrance animation holds it */
.hero-media { scale: calc(1 + var(--out, 0) * .08); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--espresso); opacity: calc(var(--out, 0) * .55); }
/* photo frames: the photo is larger than its frame by more than its way through it (DRIFT in main.js) and moves slower
   than the frame; when the frame comes into view (.is-in) it settles from larger still */
.has-drift img { scale: 1.2; transition: transform 1.6s var(--ease), scale 1.6s var(--ease) calc(var(--i, 0) * 95ms); }
.has-drift.is-in img { scale: 1.12; }
.has-drift.is-near img { will-change: translate; }
@media print { .scroll-line { display: none; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .nav, .nav-scrim { display: none; }
  .burger { display: grid; }
  .header-tools { margin-left: auto; }
  .hero-review { display: none; }
}
@media (max-width: 1100px) {
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 2.6rem; }
  .tour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-grid > .tour:last-child { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; }
  .tour-grid > .tour:last-child .tour-media { aspect-ratio: auto; min-height: 100%; }
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(3) { padding-left: 0; border-left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
  .explorer { grid-template-columns: minmax(0, 1fr); }
  .explorer-panel { order: 2; }
  .chart-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .chart-tab { flex-direction: column; align-items: flex-start; gap: .2rem; }
  .timeline { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .2rem 1.6rem; }
}
@media (max-width: 960px) {
  :root { --header-h: 74px; }
  .section-head { grid-template-columns: 1fr; gap: 1.6rem; }
  .recipe-grid, .skipper-grid, .reviews-grid, .booking-grid, .faq-grid, .visit-grid { grid-template-columns: 1fr; }
  .recipe-visual { position: static; max-width: 560px; }
  .skipper-media { max-width: 560px; }
  .skipper-badge { left: 8px; }
  .rating, .faq-aside { position: static; }
  .custom-tour { grid-template-columns: 1fr; }
  .custom-media { min-height: 320px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { margin-top: 1.6rem; }
  .booking-visual { margin-top: 1rem; }
  .qr-card { display: none; }
  .map-frame { min-height: 380px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .header-cta { display: none; }
  .header-tools .lang { display: none; }
  .brand-logo { width: 118px; height: 44px; }
  .hero-content { padding-bottom: 128px; }
  .hero-title { max-width: none; font-size: clamp(2.6rem, 11.4vw, 3.4rem); }
  .hero-eyebrow { font-size: .66rem; letter-spacing: .22em; gap: .7em; }
  .hero-eyebrow .eyebrow-line { display: none; }
  .hero-eyebrow, .hero-title, .hero-sub { text-shadow: 0 2px 18px rgba(20, 10, 8, .45); }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-coords { display: none; }
  .hero-bar-inner { grid-template-columns: 1fr 1fr; gap: .7rem 1rem; padding-block: 1rem; }
  .hb-item { font-size: .8rem; }
  .hb-item:nth-child(n+3) { display: none; }
  .hero-img { object-position: 46% 50%; }

  .tour-grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 24px; scrollbar-width: none;
  }
  .tour-grid::-webkit-scrollbar { display: none; }
  .tour-grid > .tour, .tour-grid > .tour:last-child { flex: 0 0 84%; scroll-snap-align: center; display: flex; grid-column: auto; }
  .tour-grid > .tour:last-child .tour-media { aspect-ratio: 1 / 1.06; min-height: 0; }
  .tour:hover { transform: none; }
  .ingredient { grid-template-columns: 1fr; }
  .ingredient-part { grid-row: auto; padding: 0 0 .1rem; }
  .chart-tabs { display: flex; overflow-x: auto; gap: 8px; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .chart-tabs::-webkit-scrollbar { display: none; }
  .chart-tab { flex: none; width: auto; padding: .8rem 1rem; }
  .ct-name { font-size: 1.02rem; white-space: nowrap; }
  .chart-frame { border-radius: 18px; margin-inline: calc(var(--gutter) * -.5); }
  .chart-compass { width: 48px; height: 48px; left: 12px; top: 12px; }
  .chart-credit { font-size: .56rem; }
  .phone { width: min(300px, 86%); }
  .timeline { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar + .pillar { padding: 2rem 0 1.4rem; border-left: 0; }
  .pillar + .pillar { border-top: 1px solid var(--line-dark); }
  .pillar-icon { margin-bottom: 1.4rem; }
  .creds { grid-template-columns: 1fr; }
  .skipper-badge { width: 112px; height: 112px; left: 6px; }
  .review-list > .review:nth-child(3) { margin-left: 0; }
  .qa-a { padding-right: 0; }
  .wa-float { display: none; }
  .mobile-bar {
    position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 55;
    display: grid; grid-template-columns: 1fr 56px; gap: 8px;
    transform: translateY(170%); transition: transform .6s var(--ease);
  }
  .mobile-bar.is-visible { transform: none; }
  .mobile-bar .btn { height: 56px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
  .site-footer { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .footer-top { flex-direction: column; align-items: flex-start; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .footer-info { grid-template-columns: 1fr; }
  /* full-width buttons; a long label (CG "Otvorite u Google mapama" @320 px) wraps instead of overflowing */
  .visit-actions .btn { flex: 1 1 100%; height: auto; min-height: 52px; padding-block: .7em; white-space: normal; text-align: center; line-height: 1.25; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .hero-img, .hero-video { transform: none; }
  .ln > *, [data-hero-in] { transform: none; opacity: 1; }
  .js [data-reveal], .js [data-reveal-stagger] > * { opacity: 1; transform: none; }
  .marquee-track { animation: none; }
}