/* Island Hopper: young and energetic speedboat island hopping. Big grotesque type, colour blocks, badges, tickets, stickers. */
:root {
  --paper: #fff8ec; --surface: #ffffff; --k-surface: #ffffff; --ink: #121826; --ink-2: #4b5468; --line: rgb(18 24 38 / .12);
  --font-display: "Bricolage Grotesque", "Noto Sans Thai", system-ui, sans-serif; --font-body: "Figtree", "Noto Sans Thai", system-ui, sans-serif;
  --r: 20px; --k-radius: 20px; --k-radius-media: 18px; --k-title-size: clamp(34px, 5vw, 66px);
}
h1, h2, h3 { font-weight: 800; letter-spacing: -.035em; }
.k-head h2 { display: inline-block; position: relative; isolation: isolate; }
.k-head h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .28em; background: color-mix(in srgb, var(--accent) 45%, transparent); z-index: -1; transform: skewX(-12deg); }
.k-header-pill .brand-name { font-weight: 800; }
.k-acts { background: var(--ink); color: #fff; }
.k-acts .section-head h2, .k-acts .k-subtitle { color: #fff; }
.k-acts .k-dest span { color: #fff; }
.k-gallery { background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.k-about .k-splitabout-media { border-radius: 30px; transform: rotate(1.5deg); }
.review-card { border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.faq-item { border: 2px solid var(--ink); }
.site-footer { background: var(--accent); color: var(--accent-ink); border: 0; --ink-2: color-mix(in srgb, var(--accent-ink) 80%, transparent); }
.site-footer a { color: inherit; }