/* serendipity.fyi — VoltAgent design system tokens, flattened for static hosting */
:root {
  --n-0:#ffffff; --n-25:#fafafa; --n-50:#f2f2f2; --n-100:#e4e4e4; --n-200:#cfcfcf;
  --n-400:#969696; --n-500:#767676; --n-700:#3b3b3b; --n-900:#1a1a1a; --n-1000:#000000;
  --tile-1:#202020; --tile-2:#232323; --tile-3:#1c1c1c;
  --accent:#8c1d18; --accent-focus:#a52822; --accent-on-dark:#c4544c; --accent-wash:#f7eceb;
  --canvas:var(--n-0); --canvas-alt:var(--n-50); --surface-card:var(--n-0);
  --surface-dark:var(--tile-1); --surface-dark-alt:var(--tile-2); --surface-dark-deep:var(--tile-3);
  --surface-void:var(--n-1000); --surface-frost:rgba(242,242,242,.8);
  --text-heading:var(--n-900); --text-body:var(--n-900); --text-muted:var(--n-700);
  --text-faint:var(--n-500); --text-on-dark:var(--n-0); --text-on-dark-muted:#cccccc;
  --hairline:var(--n-100); --hairline-soft:rgba(0,0,0,.06); --hairline-on-dark:rgba(255,255,255,.14);
  --focus-ring:var(--accent-focus);

  --font-display:"Playfair Display","Noto Serif SC","Songti SC",serif;
  --font-text:"Work Sans","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-mono:"IBM Plex Mono","SFMono-Regular",Menlo,monospace;

  --fs-hero:56px; --fs-display-lg:40px; --fs-display-md:34px; --fs-lead-airy:24px;
  --fs-tagline:21px; --fs-body:17px; --fs-caption:14px; --fs-fine:12px; --fs-micro:10px;
  --fw-light:300; --fw-regular:400; --fw-semibold:600; --fw-bold:700;
  --ls-hero:-.028em; --ls-display:-.018em; --ls-body:-.008em; --ls-wide:.08em;

  --sp-xxs:4px; --sp-xs:8px; --sp-sm:12px; --sp-lg:24px; --sp-xl:32px; --sp-xxl:48px;
  --sp-section:80px; --gutter:24px; --page-margin:32px;
  --measure-text:720px; --measure-prose:980px; --measure-grid:1440px;

  --r-xs:5px; --r-sm:8px; --r-lg:18px; --r-pill:9999px;
  --shadow-object:3px 5px 30px 0 rgba(0,0,0,.22);
  --blur-frost:saturate(180%) blur(20px);
  --dur-instant:100ms; --dur-fast:180ms; --ease-standard:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0; background:var(--canvas); color:var(--text-body);
  font:var(--fw-regular) var(--fs-body)/1.47 var(--font-text); letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3 { font-family:var(--font-display); font-weight:var(--fw-semibold); color:inherit; margin:0; letter-spacing:var(--ls-display); text-wrap:balance }
h1 { font-size:var(--fs-hero); line-height:1.07; letter-spacing:var(--ls-hero); max-width:18ch }
h2 { font-size:var(--fs-display-lg); line-height:1.1; max-width:20ch }
p { margin:0; text-wrap:pretty }
img { display:block; max-width:100%; height:auto }
a { color:var(--accent); text-decoration:none; transition:opacity var(--dur-fast) var(--ease-standard) }
a:hover { opacity:.7 }
a:active { opacity:.55 }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px }
button { font-family:inherit; cursor:pointer }
button:active,.chip:active,.btn:active { transform:scale(.95) }
button,.chip,.btn { transition:transform var(--dur-instant) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard) }
::selection { background:var(--accent-wash); color:var(--text-heading) }

/* bilingual */
html[data-lang="en"] .lang-zh,
html[data-lang="zh"] .lang-en { display:none }

.skip { position:absolute; left:-9999px; top:0; background:var(--n-0); color:var(--accent); padding:8px 16px; z-index:60 }
.skip:focus { left:8px; top:52px }

/* nav */
.nav {
  position:sticky; top:0; z-index:30; min-height:44px;
  background:var(--surface-void); color:var(--text-on-dark);
  display:flex; align-items:center; gap:20px; padding:0 var(--sp-lg);
}
.wordmark { font:var(--fw-bold) 15px/1 var(--font-display); letter-spacing:-.01em; color:var(--text-on-dark); flex-shrink:0 }
.nav-links { display:flex; align-items:center; gap:18px; flex:1; overflow-x:auto; scrollbar-width:none }
.nav-links::-webkit-scrollbar { display:none }
.nav-links a { font-size:var(--fs-fine); color:var(--text-on-dark); opacity:.82; white-space:nowrap; flex-shrink:0 }
.nav-btn { background:none; border:0; color:var(--text-on-dark); padding:0; display:flex; align-items:center; flex-shrink:0 }
.lang { display:flex; border:1px solid var(--hairline-on-dark); border-radius:var(--r-pill); overflow:hidden; flex-shrink:0 }
.lang button { background:none; border:0; color:var(--text-on-dark); font-size:var(--fs-micro); letter-spacing:.06em; padding:4px 10px }
.lang button[aria-pressed="true"] { background:var(--accent) }
.crumb { font:var(--fw-regular) var(--fs-micro)/1.3 var(--font-mono); color:var(--text-on-dark-muted); white-space:nowrap; flex-shrink:0 }

/* search overlay */
.search { position:fixed; inset:44px 0 0 0; z-index:40; overflow-y:auto;
  background:var(--surface-frost); -webkit-backdrop-filter:var(--blur-frost); backdrop-filter:var(--blur-frost); padding:var(--sp-xxl) var(--page-margin) var(--sp-section) }
.search-inner { max-width:var(--measure-text); margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-xl) }
.search-row { display:flex; align-items:center; gap:var(--sp-lg) }
.search-row input { flex:1; height:44px; border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:0 20px; font-size:var(--fs-body); font-family:inherit; color:var(--text-heading); background:var(--surface-card); outline:none }
.search-row button { background:none; border:0; font-size:var(--fs-caption); color:var(--text-muted) }
.sr-group { display:flex; flex-direction:column; gap:var(--sp-sm); margin-bottom:var(--sp-xl) }
.sr-hit { display:flex; justify-content:space-between; gap:var(--sp-lg); border-top:1px solid var(--hairline); padding-top:10px; color:var(--text-heading); font-size:var(--fs-body) }
.sr-hit span:last-child { font-size:var(--fs-caption); color:var(--text-faint); white-space:nowrap }

/* tiles */
.tile { padding:var(--sp-section) var(--page-margin); background:var(--canvas) }
.tile-alt { background:var(--canvas-alt) }
.tile-dark { background:var(--surface-dark); color:var(--text-on-dark) }
.tile-dark-alt { background:var(--surface-dark-alt); color:var(--text-on-dark) }
.tile-deep { background:var(--surface-dark-deep); color:var(--text-on-dark) }
.tile-void { background:var(--surface-void); color:var(--text-on-dark) }
.tile-tight { padding-bottom:var(--sp-xxl) }
.tile-top-none { padding-top:0 }
.tile-flush { padding:0 0 var(--sp-section) }
.tile-strip { padding:var(--sp-xxl) var(--page-margin); border-bottom:1px solid var(--hairline) }
.tile-404 { min-height:60vh; display:grid; align-items:center }
.wrap { max-width:var(--measure-grid); margin:0 auto; width:100% }
.tile-flush .wrap { padding:0 var(--page-margin) }
.cruise-head { padding-top:var(--sp-xxl) }
.prose { max-width:var(--measure-prose) }
.text-measure { max-width:var(--measure-text) }
.split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-xxl); align-items:center }
.hero .split { grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:64px }
.stack { display:flex; flex-direction:column; gap:var(--sp-md,17px); align-items:flex-start }
.stack > .btn { margin-top:var(--sp-xs) }

.eyebrow { font:var(--fw-semibold) var(--fs-fine)/1 var(--font-text); letter-spacing:var(--ls-wide); text-transform:uppercase; color:var(--text-on-dark-muted) }
.tile:not(.tile-dark):not(.tile-void):not(.tile-deep):not(.tile-dark-alt) .eyebrow { color:var(--text-faint) }
.eyebrow-accent { color:var(--accent) !important; text-transform:none; letter-spacing:var(--ls-wide) }
.host { font:var(--fw-regular) var(--fs-caption)/1.6 var(--font-mono); color:var(--accent) }
.host-dark { color:var(--accent-on-dark) }
.break { word-break:break-all }
.mono { font:var(--fw-regular) var(--fs-caption)/1.6 var(--font-mono); color:var(--text-faint) }
.lead { font:var(--fw-light) var(--fs-lead-airy)/1.5 var(--font-text); max-width:46ch }
.tile-dark .lead,.tile-void .lead,.tile-deep .lead,.tile-dark-alt .lead { color:var(--text-on-dark-muted) }
.tile-dark .lead.lead-plain,.tile-dark #costs .lead { color:var(--text-on-dark) }
#costs .lead { color:var(--text-on-dark) }
.body { max-width:42ch; color:var(--text-muted) }
.body-dark { color:var(--text-on-dark-muted); max-width:48ch }
.meta { font-size:var(--fs-caption); color:var(--text-faint) }
.meta-dark { color:var(--text-on-dark-muted) }

.media { overflow:hidden }
.media img { width:100%; height:100%; object-fit:cover }
.media.shadowed { box-shadow:var(--shadow-object) }
.split .media { aspect-ratio:4/3 }
.hero-media { aspect-ratio:4/5; min-height:420px }
.cruise-media { aspect-ratio:21/7; overflow:hidden }
.cruise-media img { width:100%; height:100%; object-fit:cover }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px;
  padding:0 var(--sp-lg); border-radius:var(--r-pill); font-size:var(--fs-body); border:1px solid transparent }
.btn-primary { background:var(--accent); color:var(--n-0) }
.btn-ghost { background:transparent; color:var(--text-on-dark); border-color:var(--hairline-on-dark) }

/* cards */
.row-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-lg); flex-wrap:wrap; margin-bottom:var(--sp-xl) }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--gutter) }
.card { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:var(--sp-lg); display:flex; flex-direction:column; gap:var(--sp-xs); color:var(--text-heading) }
.card-title { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-tagline); letter-spacing:var(--ls-display) }
.card-claim { font-size:var(--fs-caption); color:var(--text-muted) }
.card .meta { margin-top:var(--sp-xs) }
.card-action { margin-top:auto; padding-top:var(--sp-sm); font-size:var(--fs-caption); color:var(--accent) }
.cards-lg { grid-template-columns:repeat(auto-fill,minmax(400px,1fr)) }
.cards-lg .card { gap:var(--sp-md,17px) }
.cards-lg .card-title { font-size:var(--fs-display-md); line-height:1.1 }
.cards-lg .card-claim { font-size:var(--fs-body); color:var(--text-muted); max-width:38ch }
.cards-lg .card .meta { margin-top:auto; padding-top:var(--sp-xs) }
.card-media { aspect-ratio:16/10; border-radius:var(--r-sm) }
@media (max-width:640px) { .cards-lg { grid-template-columns:minmax(0,1fr) } }
.trip { min-height:240px }
.trip[data-status="archive"] .card-action { color:var(--text-faint) }

/* subnav */
.subnav { position:sticky; top:44px; z-index:20; min-height:52px; display:flex; align-items:center;
  background:var(--surface-frost); -webkit-backdrop-filter:var(--blur-frost); backdrop-filter:var(--blur-frost);
  border-bottom:1px solid var(--hairline-soft); padding:0 var(--page-margin) }
.subnav-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-lg); flex-wrap:wrap; padding:8px 0 }
.subnav-cat { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-tagline); letter-spacing:var(--ls-display) }
.subnav-filters { display:flex; gap:var(--sp-xs); flex-wrap:wrap }
.chip { background:transparent; border:1px solid var(--hairline); border-radius:var(--r-pill);
  padding:6px 14px; font-size:var(--fs-caption); color:var(--text-muted) }
.chip.is-on { border-width:2px; border-color:var(--accent); color:var(--accent); padding:5px 13px }

/* feed */
.feed-photos { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gutter); margin:var(--sp-xl) 0 var(--sp-xxl) }
.photo-item { display:flex; flex-direction:column; gap:10px; color:var(--text-on-dark) }
.photo-item .media { aspect-ratio:3/2 }
.photo-title { font-weight:var(--fw-semibold); line-height:1.24 }
.feed-list { display:flex; flex-direction:column }
.feed-row { display:grid; grid-template-columns:210px minmax(0,1fr) auto; gap:var(--sp-lg); align-items:baseline;
  border-top:1px solid var(--hairline-on-dark); padding:16px 0; color:var(--text-on-dark) }
.feed-title { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }
.badge { font-size:var(--fs-micro); letter-spacing:.06em; border:1px solid var(--hairline-on-dark);
  border-radius:var(--r-pill); padding:2px 8px; color:var(--text-on-dark-muted) }
.badge-light { border-color:var(--hairline); color:var(--text-faint) }

/* specs + days */
.specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-xl) }
.spec { display:flex; flex-direction:column; gap:6px; border-top:2px solid var(--accent); padding-top:var(--sp-sm) }
.spec-val { font-family:var(--font-display); font-weight:var(--fw-semibold); font-size:var(--fs-display-md); letter-spacing:var(--ls-display) }
.days { display:flex; flex-direction:column; margin-top:var(--sp-xl) }
.day { display:grid; grid-template-columns:56px minmax(0,1fr) 132px minmax(0,1.6fr); gap:20px;
  padding:18px 0; border-bottom:1px solid var(--hairline); align-items:baseline }
.day-port { font-weight:var(--fw-semibold); line-height:1.24 }
.day-plan { color:var(--text-muted) }
.entry-list { display:flex; flex-direction:column; margin-top:var(--sp-xl); margin-bottom:var(--sp-lg) }
.entry { display:grid; grid-template-columns:190px minmax(0,1fr); gap:var(--sp-lg); align-items:baseline;
  padding:16px 0; border-top:1px solid var(--hairline) }
.entry-title { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap }

/* footer */
.footer { background:var(--canvas-alt); padding:var(--sp-xxl) var(--page-margin); border-top:1px solid var(--hairline) }
.foot-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--sp-xl) }
.foot-col { display:flex; flex-direction:column }
.foot-col h3 { font-size:var(--fs-fine); font-family:var(--font-text); font-weight:var(--fw-semibold); color:var(--text-heading); margin-bottom:var(--sp-xs) }
.foot-col a { font-size:var(--fs-fine); line-height:2.41; color:var(--text-muted) }
.foot-legal { display:flex; align-items:baseline; gap:var(--sp-lg); flex-wrap:wrap;
  margin-top:var(--sp-xl); padding-top:var(--sp-lg); border-top:1px solid var(--hairline); font-size:var(--fs-fine); color:var(--text-faint) }
.foot-mark { font:var(--fw-bold) var(--fs-caption)/1 var(--font-display); color:var(--text-heading) }

@media (max-width:1068px) {
  :root { --fs-hero:44px; --fs-display-lg:34px; --fs-display-md:28px }
  .split,.hero .split { grid-template-columns:minmax(0,1fr); gap:var(--sp-xl) }
  .hero-media { aspect-ratio:16/10; min-height:0 }
  .feed-row { grid-template-columns:minmax(0,1fr) auto }
  .feed-row .host { grid-column:1/-1 }
}
@media (max-width:833px) {
  :root { --fs-hero:36px; --sp-section:48px; --page-margin:24px }
  .day { grid-template-columns:44px minmax(0,1fr); row-gap:6px }
  .day-hours { grid-column:2 }
  .day-plan { grid-column:2 }
  .entry { grid-template-columns:minmax(0,1fr); gap:4px }
  .crumb { display:none }
}