/* ============================================================
   Kekova Island Boat
   Direction: "waterline" — the page is split by the surface of
   the sea. Above it: air, stone, clarity. Below it: depth.
   ============================================================ */

:root {
  /* palette */
  --deep:        #062a3d;   /* deep sea — primary dark ground */
  --deeper:      #041c2a;   /* trench — footer, overlays */
  --aegean:      #1c7b93;   /* mid water */
  --shallow:     #4fc3d9;   /* sunlit shallow — accent, links */
  --shallow-dim: #2e93ae;
  --stone:       #c9b28a;   /* Lycian limestone — secondary accent */
  --stone-deep:  #a68a5e;
  --terracotta:  #d4664a;   /* CTA warmth, sunset */
  --hull:        #f7f4ed;   /* hull white — light ground */
  --hull-warm:   #efe9dd;
  --ink:         #0d1f28;
  --ink-soft:    #46606c;

  /* type */
  --display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* metrics */
  --measure: 68ch;
  --shell: 1240px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --radius: 3px;

  /* spacing scale */
  --s1: 0.5rem;
  --s2: 0.875rem;
  --s3: 1.25rem;
  --s4: 2rem;
  --s5: 3rem;
  /* the lower bounds are deliberately below the vw term: at 390px, 8vw is 31px
     and 12vw is 47px, so a taller floor would pin every section to it and mobile
     would inherit desktop's breathing room. the vw factors and upper bounds are
     unchanged, so layouts above ~940px are untouched. */
  --s6: clamp(2.25rem, 8vw, 6.5rem);
  --s7: clamp(3rem, 12vw, 9rem);

  --header-h: 68px;
  --tap: 44px;          /* WCAG 2.5.8 minimum target */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hull);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
/* <picture> is inline by default, which breaks the percentage-height chain
   in .hero-media and .gallery-item — make it transparent to layout. */
picture { display: contents; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 600; line-height: 1.08; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--shallow);
  outline-offset: 3px;
  border-radius: 2px;
}

.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100px; left: var(--gutter); z-index: 200;
  background: var(--deep); color: var(--hull);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0.75rem; }

/* ---------------------------------------------------------- type helpers */
.eyebrow {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--aegean);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: var(--s3);
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 1px;
  background: var(--stone-deep);
  flex: none;
}
.on-dark .eyebrow { color: var(--shallow); }
.on-dark .eyebrow::before { background: var(--stone); }

.section-title {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem);
  letter-spacing: -0.022em;
  max-width: 22ch;
}
.section-lede {
  margin-top: var(--s3);
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}
.on-dark .section-lede { color: rgba(247, 244, 237, 0.72); }

section { padding-block: var(--s7); }

/* the header is fixed, so anchored sections must clear it */
section[id], [id='top'] { scroll-margin-top: calc(var(--header-h) + var(--s3)); }

/* ---------------------------------------------------------- header */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(4, 28, 42, 0.62), rgba(4, 28, 42, 0));
  opacity: 1;
  transition: opacity 0.35s var(--ease);
  pointer-events: none;
}
.header.is-stuck {
  background: rgba(6, 42, 61, 0.94);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 rgba(201, 178, 138, 0.22);
}
.header.is-stuck::before { opacity: 0; }

.header-inner {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: var(--s4);
  position: relative;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--hull);
  flex: none;
  margin-right: auto;
}
/* The logo's own box is 28px tall, below the 44px touch minimum in both the
   header and the footer. Growing the hit area only, so the mark and wordmark
   stay put; desktop keeps the tight header. */
@media (pointer: coarse) { .brand { min-height: var(--tap); } }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-mark path, .brand-mark line { vector-effect: non-scaling-stroke; }
.brand-text { display: flex; flex-direction: column; line-height: 1.06; }
.brand-name {
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.brand-sub {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight: 500;
}

.nav { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.7rem); }
.nav a {
  text-decoration: none;
  color: rgba(247, 244, 237, 0.86);
  font-size: 0.855rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.35rem 0;
  position: relative;
  white-space: nowrap;
  transition: color 0.2s;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--shallow);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a.is-active::after { transform: scaleX(1); }
.nav a.is-active { color: #fff; }

.header-actions { display: flex; align-items: center; gap: 0.6rem; flex: none; }

/* ---------------------------------------------------------- language widget */
.lang {
  position: relative;
  flex: none;
}
.lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  background: rgba(247, 244, 237, 0.1);
  border: 1px solid rgba(201, 178, 138, 0.38);
  color: var(--hull);
  padding: 0.44rem 0.7rem;
  min-height: var(--tap);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
}
.lang-toggle:hover { background: rgba(247, 244, 237, 0.19); border-color: var(--stone); }
.lang-flag { font-size: 1rem; line-height: 1; }
.lang-code { text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.72rem; font-weight: 600; }
.lang-caret {
  width: 9px; height: 9px;
  transition: transform 0.28s var(--ease);
  opacity: 0.75;
}
.lang.is-open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 194px;
  background: var(--hull);
  border: 1px solid rgba(6, 42, 61, 0.14);
  border-radius: var(--radius);
  box-shadow: 0 18px 44px -12px rgba(4, 28, 42, 0.44);
  padding: 0.3rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
  z-index: 120;
}
.lang.is-open .lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.lang-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  min-height: var(--tap);
  padding: 0.55rem 0.65rem;
  background: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
  color: var(--ink);
  transition: background 0.15s;
}
.lang-option:hover { background: var(--hull-warm); }
.lang-option[aria-selected='true'] { background: rgba(28, 123, 147, 0.11); font-weight: 600; }
.lang-native { flex: 1; }
.lang-check { width: 13px; height: 13px; color: var(--aegean); opacity: 0; flex: none; }
.lang-option[aria-selected='true'] .lang-check { opacity: 1; }

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.82rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.012em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 16px; height: 16px; flex: none; }

.btn-primary { background: var(--terracotta); color: #fff; }
.btn-primary:hover { background: #c0563c; }

.btn-ghost {
  background: transparent;
  border-color: rgba(247, 244, 237, 0.42);
  color: var(--hull);
}
.btn-ghost:hover { border-color: var(--hull); background: rgba(247, 244, 237, 0.1); }

.btn-solid { background: var(--deep); color: var(--hull); }
.btn-solid:hover { background: var(--deeper); }

.btn-outline { background: transparent; border-color: rgba(6, 42, 61, 0.28); color: var(--deep); }
.btn-outline:hover { border-color: var(--deep); background: rgba(6, 42, 61, 0.05); }

.btn-wa { background: #25d366; color: #06301a; }
.btn-wa:hover { background: #1fb857; }

.btn-sm { padding: 0.56rem 1rem; font-size: 0.82rem; }
@media (pointer: coarse) { .btn-sm { min-height: var(--tap); } }

/* one "Book a tour" per breakpoint: drawer below 940px, header actions above */
.nav-book { display: none; }
.header-actions .btn-primary { display: none; }
@media (min-width: 940px) { .header-actions .btn-primary { display: inline-flex; } }

/* ---------------------------------------------------------- burger */
.burger {
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  background: rgba(247, 244, 237, 0.1);
  border: 1px solid rgba(201, 178, 138, 0.38);
  border-radius: var(--radius);
  cursor: pointer;
  flex: none;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  background: var(--hull);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s;
}
.burger span + span { margin-top: 4px; }
body.nav-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 940px) { .burger { display: none; } }

/* ---------------------------------------------------------- hero */
.hero {
  position: relative;
  /* just under a full screen, so the section boundary below peeks in and the
     page reads as scrollable; svh already accounts for mobile browser chrome */
  min-height: min(92svh, 940px);
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + var(--s6)) 0 var(--s6);
  background: var(--deep);
  overflow: hidden;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.06);
  animation: heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.4%, -1.6%, 0); }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(to top, rgba(4, 28, 42, 0.96) 0%, rgba(4, 28, 42, 0.72) 32%, rgba(6, 42, 61, 0.3) 62%, rgba(6, 42, 61, 0.5) 100%),
    linear-gradient(to right, rgba(4, 28, 42, 0.6), transparent 62%);
}

/* the signature: an animated waterline crossing the hero */
.waterline {
  position: absolute;
  left: 0; right: 0;
  bottom: 30%;
  height: 2px;
  z-index: -1;
  pointer-events: none;
}
.waterline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent, rgba(79, 195, 217, 0.85) 12%, rgba(201, 178, 138, 0.72) 50%, rgba(79, 195, 217, 0.85) 88%, transparent);
  filter: blur(0.3px);
}
.waterline-svg {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 200%;
  height: 34px;
  color: rgba(79, 195, 217, 0.4);
  animation: swell 13s linear infinite;
}
@keyframes swell { to { transform: translateX(-50%); } }

.hero-content { position: relative; }
.hero-title {
  font-size: clamp(2.7rem, 1.4rem + 6vw, 6.2rem);
  color: var(--hull);
  letter-spacing: -0.035em;
  font-weight: 600;
  max-width: 15ch;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span {
  display: block;
  animation: riseIn 1s var(--ease) backwards;
}
.hero-title .line:nth-child(1) > span { animation-delay: 0.15s; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.28s; }
.hero-title .sunk {
  font-style: italic;
  color: var(--shallow);
}
@keyframes riseIn { from { transform: translateY(105%); } to { transform: translateY(0); } }

.hero .eyebrow {
  color: var(--stone);
  animation: fadeUp 0.9s var(--ease) 0.05s backwards;
}
.hero .eyebrow::before { background: var(--stone); }

.hero-lede {
  margin-top: var(--s4);
  max-width: 52ch;
  color: rgba(247, 244, 237, 0.86);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  animation: fadeUp 0.9s var(--ease) 0.42s backwards;
}
.hero-cta {
  margin-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  animation: fadeUp 0.9s var(--ease) 0.55s backwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

.hero-scroll {
  position: absolute;
  right: var(--gutter);
  bottom: var(--s5);
  display: none;
  align-items: center;
  gap: 0.7rem;
  writing-mode: vertical-rl;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.6);
  text-decoration: none;
}
.hero-scroll::after {
  content: '';
  width: 1px; height: 48px;
  background: linear-gradient(to bottom, var(--stone), transparent);
  animation: dropline 2.4s ease-in-out infinite;
}
@keyframes dropline { 0%, 100% { transform: scaleY(0.4); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } }
@media (min-width: 1100px) { .hero-scroll { display: flex; } }

/* ---------------------------------------------------------- stats bar */
.stats {
  background: var(--deeper);
  color: var(--hull);
  padding-block: var(--s5);
  border-bottom: 1px solid rgba(201, 178, 138, 0.16);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s4);
}
.stat { display: flex; flex-direction: column; gap: 0.3rem; }
.stat-value {
  font-family: var(--display);
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.7rem);
  font-weight: 600;
  color: var(--stone);
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-label {
  font-size: 0.82rem;
  color: rgba(247, 244, 237, 0.62);
  max-width: 24ch;
  line-height: 1.45;
}

/* ---------------------------------------------------------- intro */
.intro { background: var(--hull); }
.intro-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 920px) {
  .intro-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--s7); }
}
.intro-body { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s4); }
.intro-body p { color: var(--ink-soft); max-width: 54ch; }
.intro-pull {
  margin-top: var(--s3);
  padding-left: var(--s3);
  border-left: 2px solid var(--stone);
  font-family: var(--display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--deep);
  max-width: 30ch;
}
.intro-figure { position: relative; margin: 0; }
.intro-figure img {
  width: 100%;
  /* the width/height attributes reserve space before the image lands, but they
     also resolve a used height — without height:auto that wins and the
     aspect-ratio below is silently ignored, stretching the figure to the
     attribute's 852px. same applies to .boat-figure. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.intro-figure::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(6, 42, 61, 0.55), transparent);
  border-radius: var(--radius);
  pointer-events: none;
}
.figure-caption {
  position: absolute;
  left: var(--s3);
  bottom: var(--s3);
  z-index: 2;
  color: var(--hull);
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- tours */
.tours { background: var(--deep); color: var(--hull); }
.tours-head { max-width: var(--measure); margin-bottom: var(--s6); }
.tours-head .section-title { color: var(--hull); }

.tour-list { display: flex; flex-direction: column; }
.tour {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  padding-block: var(--s5);
  border-top: 1px solid rgba(201, 178, 138, 0.24);
  position: relative;
}
.tour:last-child { border-bottom: 1px solid rgba(201, 178, 138, 0.24); }
@media (min-width: 860px) {
  .tour {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr) auto;
    gap: var(--s5);
    align-items: start;
  }
}
.tour-head { display: flex; flex-direction: column; gap: 0.6rem; }
.tour-name {
  font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--hull);
}
.tour-dur {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shallow);
}
.tour-dur svg { width: 14px; height: 14px; }
.tour-tag {
  align-self: flex-start;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--terracotta);
  color: #fff;
  padding: 0.24rem 0.55rem;
  border-radius: 2px;
}
.tour-desc { color: rgba(247, 244, 237, 0.72); margin-bottom: var(--s3); max-width: 46ch; }
.tour-includes {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.7rem;
}
.tour-stops { display: flex; flex-direction: column; gap: 0.4rem; }
.tour-stops li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.94rem;
  color: rgba(247, 244, 237, 0.9);
}
.tour-stops li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border: 1px solid var(--shallow);
  border-radius: 50%;
}
.tour-action { display: flex; align-items: flex-start; }
@media (max-width: 859px) {
  .tour-action .btn { width: 100%; }
  /* stacked, four cards run 2000px+ on a phone. the border-top separators stay —
     they are the only thing marking where one tour ends and the next begins. */
  .tour { padding-block: var(--s4); }
  .tour-desc { margin-bottom: var(--s2); }
}

/* ---------------------------------------------------------- boat */
.boat { background: var(--hull-warm); }
.boat-top {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  align-items: center;
  margin-bottom: var(--s6);
}
@media (min-width: 920px) { .boat-top { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.boat-figure { margin: 0; }
.boat-figure img {
  width: 100%;
  height: auto;          /* see .intro-figure img — attribute height beats aspect-ratio */
  aspect-ratio: 16 / 11;
  object-fit: cover;
  border-radius: var(--radius);
}
.boat-copy p { margin-top: var(--s3); color: var(--ink-soft); max-width: 50ch; }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 1px;
  background: rgba(6, 42, 61, 0.14);
  border: 1px solid rgba(6, 42, 61, 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}
.feature {
  background: var(--hull);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: background 0.25s;
}
/* 248px never fits twice in a 350px content box, so all six features stack into
   a single column. two-up halves that; the padding comes down with it because
   --s4 is generous for a ~175px card. */
@media (max-width: 620px) {
  /* minmax(0, ...) not 1fr: a grid item's automatic minimum size is its longest
     unbreakable word, so German ("Schnorchelausrüstung", 186px) would push its
     track past the 175px share and the grid's overflow:hidden would silently
     clip it — scrollWidth stays clean, so only a screenshot shows it. The 0
     floor lets the track shrink; overflow-wrap then breaks the word instead. */
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature { padding: var(--s3); }
  .feature h3 { overflow-wrap: anywhere; hyphens: auto; }
}
.feature:hover { background: #fff; }
.feature svg { width: 22px; height: 22px; color: var(--aegean); margin-bottom: 0.35rem; }
.feature h3 { font-size: 1.08rem; letter-spacing: -0.01em; }
.feature p { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------------------------------------------------------- route */
.route { background: var(--hull); }
.route-head { margin-bottom: var(--s6); }
.route-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding-left: 2.4rem;
  list-style: none;
  margin: 0;
}
.route-list > li { list-style: none; }
.route-list > li::marker { content: none; }
.route-list::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom, var(--shallow), var(--aegean) 40%, var(--stone-deep));
}
.route-item { position: relative; }
.route-item::before {
  content: '';
  position: absolute;
  left: -2.4rem;
  top: 3px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--hull);
  border: 2px solid var(--aegean);
  transition: background 0.25s, border-color 0.25s, transform 0.25s var(--ease);
}
.route-item:hover::before { background: var(--shallow); border-color: var(--shallow); transform: scale(1.2); }
.route-num {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone-deep);
  display: block;
  margin-bottom: 0.2rem;
}
.route-item h3 { font-size: 1.2rem; letter-spacing: -0.012em; }
.route-item p { margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.94rem; max-width: 52ch; }

/* wide screens: run the itinerary in two columns so it fills the measure */
@media (min-width: 1040px) {
  .route-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s7);
    row-gap: var(--s5);
    align-items: start;
  }
  /* the single spine no longer tracks a single column — drop it */
  .route-list::before { display: none; }
  .route-item::before { background: var(--hull); border-color: var(--stone-deep); }
  .route-item p { max-width: 44ch; }
}

/* ---------------------------------------------------------- gallery */
.gallery { background: var(--deeper); color: var(--hull); }
/* --s5 is a fixed 3rem, so unlike the other section heads this one did not
   follow the spacing scale down on narrow screens */
.gallery-head { margin-bottom: var(--s5); }
@media (max-width: 620px) { .gallery-head { margin-bottom: var(--s4); } }
.gallery-head .section-title { color: var(--hull); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 10px;
  grid-auto-flow: dense;
}
.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--deep);
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 1;
}
.gallery-item.is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-item.is-tall { grid-row: span 2; aspect-ratio: 1 / 2; }
@media (max-width: 620px) {
  /* auto-fill collapses to a single column here, stacking 12 squares into ~2400px
     of scrolling. two columns halves that; the grid is a preview and the lightbox
     still opens each photo full size. keep GALLERY_SIZES in main.js in step —
     it advertises 50vw below 620px on the strength of this rule. */
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-item.is-wide { grid-column: span 2; }
  .gallery-item.is-tall { grid-row: span 1; aspect-ratio: 1; }
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease), filter 0.4s;
  filter: saturate(0.94);
}
.gallery-item:hover img { transform: scale(1.06); filter: saturate(1.08); }
.gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(201, 178, 138, 0.24);
  border-radius: var(--radius);
  pointer-events: none;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(4, 20, 30, 0.96);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: rgba(247, 244, 237, 0.1);
  border: 1px solid rgba(247, 244, 237, 0.24);
  color: var(--hull);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lb-btn:hover { background: rgba(247, 244, 237, 0.22); transform: scale(1.06); }
.lb-btn svg { width: 18px; height: 18px; }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev { left: clamp(0.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(0.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform: translateY(-50%) scale(1.06); }
.lb-count {
  position: absolute;
  bottom: clamp(1rem, 3vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: rgba(247, 244, 237, 0.66);
}

/* ---------------------------------------------------------- faq */
.faq { background: var(--hull-warm); }
.faq-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .faq-grid { grid-template-columns: 0.75fr 1.25fr; gap: var(--s7); } }
.faq-list { border-top: 1px solid rgba(6, 42, 61, 0.16); }
.faq-item { border-bottom: 1px solid rgba(6, 42, 61, 0.16); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s3) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem);
  font-weight: 600;
  color: var(--deep);
  letter-spacing: -0.01em;
  line-height: 1.32;
}
.faq-icon {
  flex: none;
  width: 18px; height: 18px;
  margin-top: 0.22em;
  position: relative;
  color: var(--aegean);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 0.3s var(--ease), opacity 0.3s;
}
.faq-icon::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.faq-icon::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.faq-item.is-open .faq-icon::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 62ch;
  padding-bottom: var(--s3);
}

/* ---------------------------------------------------------- contact */
.contact { background: var(--deep); color: var(--hull); position: relative; overflow: hidden; }
.contact::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 260px;
  background: radial-gradient(120% 100% at 50% 100%, rgba(28, 123, 147, 0.4), transparent 70%);
  pointer-events: none;
}
.contact-grid {
  position: relative;
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: var(--s7); } }
.contact-head .section-title { color: var(--hull); }
.contact-actions { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: 0.75rem; }

.contact-details { display: flex; flex-direction: column; }
.detail {
  display: flex;
  flex-direction: column;
  gap: 0.24rem;
  padding-block: var(--s3);
  border-bottom: 1px solid rgba(201, 178, 138, 0.22);
}
.detail:first-child { border-top: 1px solid rgba(201, 178, 138, 0.22); }
.detail-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
}
.detail-value {
  font-family: var(--display);
  font-size: clamp(1.08rem, 1rem + 0.5vw, 1.35rem);
  color: var(--hull);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color 0.2s;
  word-break: break-word;
}
a.detail-value:hover { color: var(--shallow); }

/* ---------------------------------------------------------- footer */
.footer {
  background: var(--deeper);
  color: rgba(247, 244, 237, 0.66);
  /* Bottom padding clears the floating WhatsApp bubble (54px tall, offset
     from the bottom edge) so the last line is never underneath it. main.js
     also hides the bubble here, but this keeps the page safe when
     IntersectionObserver is missing or JS is off. */
  padding-block: var(--s6) calc(var(--s4) + 54px + clamp(1rem, 3vw, 2rem));
  border-top: 1px solid rgba(201, 178, 138, 0.16);
  font-size: 0.9rem;
}
.footer-grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: 1fr;
  padding-bottom: var(--s5);
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s4); } }
.footer .brand { color: var(--hull); margin-right: 0; margin-bottom: var(--s3); }
.footer-tagline { max-width: 32ch; font-size: 0.88rem; }
.footer h4 {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: var(--s3);
}
.footer-links { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-links a, .footer-lang button {
  color: rgba(247, 244, 237, 0.7);
  text-decoration: none;
  transition: color 0.2s;
  font-size: 0.88rem;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  width: fit-content;
}
.footer-links a:hover, .footer-lang button:hover { color: var(--shallow); }
/* Touch pointers get the full 44px target; mice keep the tighter column. */
@media (pointer: coarse) {
  .footer-links a, .footer-lang button, .detail-value {
    min-height: var(--tap);
    display: flex;
    align-items: center;
  }
  /* The 44px height above made the rows touch at 0px, so the tel and mailto
     links sat edge to edge with nothing between them. */
  .footer-links { gap: 8px; }
  /* width: fit-content leaves short labels narrow — in Chinese the footer
     nav links and "中文" all measured 29px wide. Height was already 44px;
     only the horizontal axis was short. Desktop keeps the tight column. */
  .footer-links a { min-width: var(--tap); }
  .footer-lang button { min-width: var(--tap); justify-content: center; }
}
/* Plain facts, not links: same column rhythm as .footer-links but no hover,
   no cursor and no 44px tap target — nothing here is tappable. */
.footer-facts { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-facts span {
  color: rgba(247, 244, 237, 0.7);
  font-size: 0.88rem;
  line-height: 1.5;
}
.footer-lang { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.footer-lang button[aria-current='true'] { color: var(--stone); font-weight: 600; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem var(--s4);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s4);
  border-top: 1px solid rgba(201, 178, 138, 0.16);
  font-size: 0.8rem;
  color: rgba(247, 244, 237, 0.46);
}

/* ---------------------------------------------------------- floating whatsapp */
.wa-float {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  background: #25d366;
  color: #06301a;
  border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgba(4, 28, 42, 0.6);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
              visibility 0.25s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 27px; height: 27px; }
/* is-hidden: over #contact and the footer, where the same action is already
   on the page as a labelled button, so the bubble is only clutter.
   is-away: while the reader scrolls down, so it stops landing on the text
   and buttons under it; it returns on the first upward scroll.
   pointer-events go with both, so it cannot be tapped while fading out. */
.wa-float.is-hidden,
.wa-float.is-away {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

/* ---------------------------------------------------------- back to top */
/* Sits directly above the WhatsApp bubble in the same right-hand column.
   The bubble is 54px, so the offset is its bottom + its height + a gap;
   the two never overlap and the column stays put when the bubble fades,
   because this button's position does not depend on the bubble's state. */
.to-top {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: calc(clamp(1rem, 3vw, 2rem) + 54px + var(--s2));
  z-index: 90;
  display: grid;
  place-items: center;
  width: var(--tap); height: var(--tap);
  padding: 0;
  /* Solid sand on the dark page: a translucent dark fill sank into the
     background and the arrow read as a smudge. The circle has to carry its
     own contrast, since it often shows alone — the WhatsApp bubble hides
     while the reader scrolls down, which is exactly when this appears. */
  background: var(--stone);
  color: var(--deeper);
  border: none;
  border-radius: 50%;
  box-shadow: 0 12px 30px -8px rgba(4, 28, 42, 0.75);
  cursor: pointer;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease),
              visibility 0.25s var(--ease), background 0.25s var(--ease);
}
.to-top:hover { transform: translateY(-2px); background: var(--hull); }
.to-top svg { width: 20px; height: 20px; }
/* Hidden near the top of the page, where it has nothing to do. Same
   opacity + visibility + pointer-events set as the bubble, so it cannot be
   tapped while fading out. */
.to-top.is-away {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

/* ---------------------------------------------------------- mobile nav */
@media (max-width: 939px) {
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    /* Measured 0px between links: six full-width targets in one unbroken
       strip, separated only by a hairline. The thumb has no margin for
       error. 8px is the acceptance floor; the divider stays, and the gap
       makes it read as a boundary. */
    gap: 8px;
    background: rgba(6, 42, 61, 0.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: var(--s3) var(--gutter) var(--s4);
    border-bottom: 1px solid rgba(201, 178, 138, 0.22);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
  }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(201, 178, 138, 0.14);
    font-size: 1rem;
  }
  .nav a::after { display: none; }
  /* The menu already ends with the "ask about a date" button, which goes to
     #contact. Keeping the plain Contact link above it offers the same
     destination twice, 86px apart. Desktop keeps it: there nav-book is
     hidden, so the text link is the only way into the section. */
  .nav a[href="#contact"]:not(.nav-book) { display: none; }
  .nav a.nav-book {
    display: inline-flex;
    margin-top: var(--s4);
    border-bottom: 0;
    justify-content: center;
  }
  /* class-based lock, so it cannot fight the lightbox's inline style.overflow.
     <html> is the scrolling element here, so locking only <body> lets the
     background keep scrolling behind the open menu — both need the rule.
     main.js mirrors .nav-open onto <html> for browsers without :has(). */
  html.nav-open, html:has(body.nav-open), body.nav-open { overflow: hidden; }
}

/* ---------------------------------------------------------- reveal */
/* Gated behind .js, which head.js writes onto <html> before first paint.
   Only JavaScript can add .is-in, so without it these rules would leave ~90%
   of the page permanently at opacity 0 — the content is still in the markup
   and still read by crawlers, but a visitor with JS off would see a blank
   page. Unstyled by default, hidden only once we know we can reveal it. */
.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }

/* ---------------------------------------------------------- cookie consent */
/* Sits above the WhatsApp bubble and the back-to-top button (z-index 90) so
   neither can be tapped through it, but below the lightbox (300) and the open
   mobile menu (120) — those take over the screen and the strip has no business
   floating on top of them. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 110;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s3) var(--gutter);
  background: var(--deeper);
  border-top: 1px solid rgba(201, 178, 138, 0.22);
  box-shadow: 0 -12px 30px -12px rgba(4, 28, 42, 0.55);
  color: rgba(247, 244, 237, 0.9);
  /* translateY rather than display:none — the strip slides in, and an inert
     element cannot be reached by tab or screen reader while it is off. */
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 0.32s var(--ease), visibility 0.32s var(--ease);
}
.consent.is-open { transform: translateY(0); visibility: visible; }

.consent-text {
  flex: 1 1 32ch;
  max-width: 68ch;
  font-size: 0.85rem;
  line-height: 1.55;
}
.consent-actions { display: flex; gap: var(--s2); flex: none; }
.consent-btn { min-height: var(--tap); padding-block: 0.6rem; }
/* Sand, not terracotta: the page already spends terracotta on "ask about a
   date", and a cookie prompt must not compete with the booking CTA. */
.consent-accept { background: var(--stone); color: var(--deeper); }
.consent-accept:hover { background: var(--stone-deep); }

/* While the strip is up it owns the bottom of the screen, so the two floating
   controls step above it instead of sitting underneath. --consent-h is written
   by main.js from the strip's measured height, because the text wraps to a
   different number of lines in each of the seven languages. */
.consent-open .wa-float { bottom: calc(clamp(1rem, 3vw, 2rem) + var(--consent-h, 0px)); }
.consent-open .to-top {
  bottom: calc(clamp(1rem, 3vw, 2rem) + 54px + var(--s2) + var(--consent-h, 0px));
}

@media (max-width: 640px) {
  .consent { gap: var(--s2); padding: var(--s3) var(--s3); }
  .consent-text { flex-basis: 100%; font-size: 0.8rem; }
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1; }
}

/* ---------------------------------------------------------- CJK tuning */
html[lang='zh'] body { font-family: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }
html[lang='zh'] h1, html[lang='zh'] h2, html[lang='zh'] h3, html[lang='zh'] .stat-value,
html[lang='zh'] .detail-value, html[lang='zh'] .faq-q, html[lang='zh'] .intro-pull {
  font-family: 'Fraunces', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', serif;
  letter-spacing: 0;
}
/* CJK glyphs are full-width: the Latin measure overflows, so cap it tighter
   and step the display size down to keep both lines above the waterline. */
html[lang='zh'] .hero-title {
  letter-spacing: 0;
  line-height: 1.2;
  max-width: 11ch;
  font-size: clamp(2.1rem, 1.2rem + 3.6vw, 4.1rem);
}
html[lang='zh'] .hero-title .line { overflow: visible; }
@media (max-width: 520px) {
  html[lang='zh'] .hero-title { font-size: clamp(1.85rem, 1.1rem + 3.4vw, 2.3rem); }
}
html[lang='zh'] .section-title { line-height: 1.28; }
html[lang='ru'] .hero-title, html[lang='de'] .hero-title { font-size: clamp(2.3rem, 1.2rem + 5vw, 5.2rem); }
html[lang='de'] .section-title, html[lang='ru'] .section-title { hyphens: auto; }

/* Türkçe sözcükler uzun: başlığı biraz küçültüp ölçüyü genişletiyoruz ki
   iki satır su hattının üstünde kalsın. */
html[lang='tr'] .hero-title {
  font-size: clamp(2.2rem, 1.2rem + 4.6vw, 4.8rem);
  max-width: 18ch;
}
html[lang='tr'] .section-title { hyphens: auto; }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  /* must out-specify `.js .reveal` above, or reduced motion loses the cascade */
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .hero-media img { animation: none; transform: scale(1.02); }
}

/* ---------------------------------------------------------- print */
@media print {
  .header, .wa-float, .hero-scroll, .lightbox { display: none !important; }
  body { background: #fff; color: #000; }
  section { padding-block: 1.5rem; }
}