/* ========== Magazine cover design system ==========
   Paper white / near-black ink / one warm accent.
   Strong CJK display titles, clean sans body, editorial rhythm.
   Replaces the parchment/kami look. Old token names kept as aliases
   so trip-page component selectors keep working. */

:root {
  --paper:       #ffffff;
  --paper-soft:  #f6f6f4;
  --ink:         #111111;
  --ink-soft:    #2e2e2e;
  --muted:       #6a6a6a;
  --hairline:    #e6e6e4;
  --line:        #d4d4d0;
  --accent:      #c4452d;
  --accent-soft: #f7ebe7;
  --shot-bg:     #0c0c0c;

  /* aliases — existing selectors still resolve */
  --parchment:   var(--paper);
  --ivory:       var(--paper-soft);
  --warm-sand:   #efefed;
  --brand:       var(--ink);
  --brand-light: #333333;
  --brand-tint:  var(--accent-soft);
  --near-black:  var(--ink);
  --dark-warm:   var(--ink-soft);
  --olive:       var(--ink-soft);
  --stone:       var(--muted);
  --border:      var(--hairline);
  --border-soft: var(--hairline);

  --display: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
             "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --ui: "PingFang SC", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: var(--ui);
  --serif: var(--display);
  --latin-ui: var(--ui);

  --page-max: 1120px;
  --gutter: 64px;
  --footer-safe: 160px;
  /* Landing trip list columns — shared by rows + section heads */
  --trip-badge-col: 7.5rem;
  --trip-date-col: 11rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.15s; }
a:hover { color: var(--accent); }

.page { max-width: var(--page-max); margin: 0 auto; padding: 48px var(--gutter) 0; }

/* ========== Buttons ========== */
.btn-primary, .btn-ghost, .btn, a.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ui); font-weight: 500; font-size: 14px;
  font-variant-numeric: lining-nums tabular-nums; letter-spacing: 0.02em;
  padding: 12px 22px; border-radius: 2px; border: 1.5px solid var(--ink);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  cursor: pointer; min-width: 132px; text-decoration: none;
}
.btn-primary, .btn.main, a.btn.main {
  background: var(--ink); color: var(--paper);
}
.btn-primary:hover, .btn.main:hover, a.btn.main:hover {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
}
.btn-ghost, .btn, a.btn {
  background: transparent; color: var(--ink);
}
.btn-ghost:hover, .btn:hover, a.btn:hover {
  background: var(--paper-soft); color: var(--ink);
}

/* ========== Sticky nav ========== */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.topnav-inner {
  max-width: var(--page-max); margin: 0 auto;
  padding: 0 var(--gutter); min-height: 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  overflow-x: auto; scrollbar-width: none;
}
.topnav-inner::-webkit-scrollbar { display: none; }
.topnav .brand {
  font-family: var(--ui); font-weight: 600; font-size: 13px;
  color: var(--ink); white-space: nowrap; letter-spacing: 0.04em;
  flex: 0 0 auto; text-decoration: none;
}
.topnav .navlinks { display: flex; gap: 0; flex: 0 0 auto; }
.topnav .navlinks a {
  font-family: var(--ui); font-size: 13px; color: var(--muted);
  padding: 8px 10px; border-radius: 2px; white-space: nowrap;
  text-decoration: none; transition: color 0.15s, background 0.15s;
}
.topnav .navlinks a:hover { color: var(--ink); }
.topnav .navlinks a.active { color: var(--ink); background: var(--paper-soft); }
.topnav .brand-row {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.site-back {
  font-family: var(--ui); font-size: 12px; color: var(--muted);
  letter-spacing: 0.02em; text-decoration: none;
}
.site-back:hover { color: var(--accent); }

/* ========== Trip hero — minimalist text masthead (no magazine cover) ========== */
.hero {
  padding-bottom: 0;
  border-bottom: 0;
  margin-bottom: 40px;
}
.cover, .hero.cover {
  position: relative;
  margin: 0 0 40px;
  width: auto;
  max-width: none;
  min-height: 0;
  max-height: none;
  height: auto;
  background: transparent;
  color: var(--ink);
  overflow: visible;
  padding: 56px var(--gutter) 36px;
  border-bottom: 1px solid var(--hairline);
}
/* Heroes already inside .page inherit page gutters — avoid double pad */
.page > .cover,
.page > .hero.cover {
  padding-left: 0;
  padding-right: 0;
}
.cover-media, .hero.cover .cover-media,
.cover-solid {
  display: none !important;
}
.cover-body, .hero.cover .cover-body {
  position: static;
  z-index: auto;
  max-width: 40rem;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  display: block;
  color: var(--ink);
}
.cover .eyebrow, .hero.cover .eyebrow {
  color: var(--muted);
  margin-bottom: 18px;
  justify-content: flex-start;
  gap: 12px;
}
.cover h1, .hero.cover h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: none;
  opacity: 1; transform: none; filter: none; animation: none;
}
.cover .tagline, .cover .subtitle,
.hero.cover .tagline, .hero.cover .subtitle {
  font-family: var(--body);
  font-size: 15px; line-height: 1.7;
  color: var(--ink-soft);
  max-width: 36em; margin: 0 0 22px;
  text-shadow: none;
}
.cover .hero-cta .btn-primary,
.hero.cover .hero-cta .btn-primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.cover .hero-cta .btn-primary:hover,
.hero.cover .hero-cta .btn-primary:hover {
  background: var(--accent); border-color: var(--accent); color: var(--paper);
}
.cover .hero-cta .btn-ghost,
.hero.cover .hero-cta .btn-ghost {
  color: var(--ink); border-color: var(--line);
  background: transparent;
}
.cover .hero-cta .btn-ghost:hover,
.hero.cover .hero-cta .btn-ghost:hover {
  background: var(--paper-soft); color: var(--ink);
}
.cover .holiday-badge, .hero.cover .holiday-badge {
  background: transparent; color: var(--muted);
  border-color: var(--line);
  font-size: 10px; font-weight: 500; padding: 2px 8px;
  letter-spacing: 0.08em;
}

/* Non-cover hero (text below / page-bound) */
.eyebrow {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--ui); font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 24px;
}
.hero h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 4.2vw, 40px); line-height: 1.2;
  letter-spacing: -0.025em; margin: 0 0 16px; color: var(--ink);
  text-wrap: balance;
  opacity: 1; transform: none; filter: none; animation: none;
}
@keyframes hero-rise { to { opacity: 1; transform: none; filter: none; } }
.hero .tagline, .hero .subtitle, .subtitle {
  font-family: var(--body); font-weight: 400;
  font-size: 17px; line-height: 1.7; letter-spacing: 0.01em;
  color: var(--ink-soft); margin: 0 0 26px; max-width: 720px;
}
.hero-cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Legacy split hero → stacked magazine when not .cover */
.hero-split { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
.hero-copy { min-width: 0; }
.hero-figure {
  margin: 0; position: relative; aspect-ratio: 16 / 10;
  background: var(--shot-bg); border: 0; border-radius: 0;
  overflow: hidden; box-shadow: none;
  opacity: 1; transform: none; filter: none; animation: none;
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }
.hero-figure figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 16px 14px;
  font-family: var(--ui); font-size: 12px; letter-spacing: 0.04em; color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
}
.hero-figure figcaption b { font-weight: 600; }

/* ========== Topline metrics ========== */
.topline { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 28px 0; margin: 0 0 12px; }
.metrics { display: flex; gap: 40px; flex-wrap: wrap; }
.metric { display: flex; flex-direction: column; gap: 6px; }
.metric-value {
  font-family: var(--display); font-weight: 700; font-size: 32px; line-height: 1;
  color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em;
}
.metric-label { font-family: var(--ui); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }

/* ========== Sections ========== */
section { margin-bottom: 64px; }
section[id] { scroll-margin-top: 72px; }
.section-head { margin-bottom: 24px; }
.section-num { font-family: var(--ui); font-weight: 500; font-size: 12px; color: var(--accent); letter-spacing: 0.1em; margin: 0 0 8px; text-transform: uppercase; }
.section-title, .section-head h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 40px); line-height: 1.15;
  color: var(--ink); margin: 0; letter-spacing: -0.02em;
}
.section-lede, .section-intro {
  font-family: var(--body); font-weight: 400;
  font-size: 16px; line-height: 1.7; letter-spacing: 0.01em;
  color: var(--ink-soft); margin: 14px 0 0; max-width: 720px;
}

/* ========== Collapsible ========== */
.more { margin: 9px 0 0; }
.more > summary {
  display: inline-flex; align-items: center; gap: 5px; width: fit-content; cursor: pointer;
  font-family: var(--ui); font-size: 12px; letter-spacing: 0.02em; color: var(--muted);
  padding: 4px 10px; border: 1px solid var(--hairline); border-radius: 2px;
  list-style: none; transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before { content: "▸"; font-size: 9px; line-height: 1; transition: transform 0.15s; }
.more[open] > summary::before { transform: rotate(90deg); }
.more > summary:hover { color: var(--ink); border-color: var(--line); background: var(--paper-soft); }
.more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more-body { margin: 10px 0 0; padding: 0 0 0 13px; border-left: 1.5px solid var(--hairline); font-size: 14px; line-height: 1.65; color: var(--muted); }
.more-body p { margin: 0 0 9px; }
.more-body p:last-child { margin-bottom: 0; }
.more-body b { color: var(--ink-soft); font-weight: 600; }

/* ========== Due badge ========== */
.due {
  display: inline-block; margin-right: 7px; padding: 2px 7px; border-radius: 2px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--ui); font-weight: 600; font-size: 11px; line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.04em; white-space: nowrap;
  vertical-align: 1px;
}
.due.now { background: var(--accent); color: #fff; }
.check input:checked ~ label .due { background: var(--warm-sand); color: var(--muted); }

/* ========== Gallery ========== */
.gallery { --enter-from-x: 44px; --exit-to-x: -34px; --sweep-angle: 100deg; --sweep-from: -45%; --sweep-to: 65%; --caption-shift: -2px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; margin: 0; padding: 0; }
.gallery[data-direction="prev"] { --enter-from-x: -44px; --exit-to-x: 34px; --sweep-angle: 260deg; --sweep-from: 65%; --sweep-to: -45%; --caption-shift: 2px; }
.gallery-frame { grid-column: 1 / -1; position: relative; aspect-ratio: 16 / 10; background: var(--shot-bg); border: 0; border-radius: 0; overflow: hidden; box-shadow: none; cursor: ew-resize; }
.gallery-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gallery-frame::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(var(--sweep-angle), rgba(255,255,255,0) 32%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 68%); opacity: 0; transform: translate3d(var(--sweep-from), 0, 0); transition: opacity 540ms ease, transform 920ms cubic-bezier(0.22, 1, 0.36, 1); }
.gallery.is-switching .gallery-frame::after { opacity: 1; transform: translate3d(var(--sweep-to), 0, 0); }
.gallery-panel { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; z-index: 1; transform: translate3d(var(--enter-from-x), 0, 0) scale(0.985); transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 880ms cubic-bezier(0.22, 1, 0.36, 1), visibility 620ms; will-change: opacity, transform; }
.gallery-panel.is-active { opacity: 1; visibility: visible; z-index: 2; transform: translate3d(0, 0, 0) scale(1); }
.gallery-panel.was-active { opacity: 0; visibility: visible; z-index: 3; transform: translate3d(var(--exit-to-x), 0, 0) scale(0.985); pointer-events: none; }
.gallery-panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.gallery-caption { grid-column: 1; grid-row: 2; min-height: 48px; padding: 12px 2px 0; display: flex; align-items: baseline; gap: 14px; transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1); }
.gallery.is-switching .gallery-caption { opacity: 0.72; transform: translate3d(var(--caption-shift), 0, 0); }
.gallery-caption .title { font-family: var(--display); font-weight: 600; font-size: 16px; color: var(--ink); margin: 0; flex: 0 0 auto; }
.gallery-caption .line { font-family: var(--body); font-size: 14px; color: var(--muted); font-style: normal; margin: 0; }
.gallery-tabs { grid-column: 2; grid-row: 2; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; justify-content: flex-end; }
.gallery-tabs button { appearance: none; border: 1px solid var(--hairline); border-radius: 2px; background: transparent; color: var(--muted); font-family: var(--ui); font-size: 12px; line-height: 1; padding: 8px 12px; cursor: pointer; transition: color 0.18s, border-color 0.18s, background 0.18s; }
.gallery-tabs button:hover { color: var(--ink); border-color: var(--line); }
.gallery-tabs button.is-active { color: var(--ink); background: var(--paper-soft); border-color: var(--line); }

/* ========== Tables ========== */
.table-wrap { overflow-x: auto; }
table.kami, table.score-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--body); font-size: 14.5px; margin: 0;
}
table.kami thead th, table.score-table thead th {
  text-align: left; font-weight: 600; color: var(--ink-soft);
  padding: 10px 12px; border-bottom: 1.5px solid var(--ink); letter-spacing: 0.02em; white-space: nowrap;
}
table.kami td, table.score-table td {
  padding: 11px 12px; border-bottom: 1px solid var(--hairline);
  color: var(--ink-soft); vertical-align: top; line-height: 1.55;
}
table.kami tr:last-child td { border-bottom: 0; }
table.kami .num { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--ink); }
table.kami .hl td { background: var(--accent-soft); }
table.kami tr.total td { border-top: 1.5px solid var(--ink); border-bottom: 0; color: var(--ink); font-weight: 600; font-size: 15.5px; }

/* ========== Day timeline ========== */
.days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.day { display: grid; grid-template-columns: 130px 1fr; column-gap: 32px; padding: 24px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.day .when { display: flex; flex-direction: column; gap: 8px; }
.day .date {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; width: fit-content; padding: 6px 12px; border-radius: 2px;
  background: var(--paper-soft); color: var(--ink);
  font-family: var(--ui); font-weight: 600; font-size: 13px;
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.day.dive .date { background: var(--ink); color: #fff; }
.day .dow { font-family: var(--ui); font-size: 12px; color: var(--muted); letter-spacing: 0.02em; padding-left: 2px; }
.day.is-today { background: var(--paper-soft); box-shadow: inset 3px 0 0 var(--accent); padding-left: 18px; margin-left: -18px; border-radius: 0; }
.day.is-today .date { outline: 2px solid var(--accent); outline-offset: 2px; }
.day .today-flag { display: none; }
.day.is-today .today-flag {
  display: inline-block; padding: 3px 8px; border-radius: 2px;
  background: var(--accent); color: #fff;
  font-family: var(--ui); font-weight: 600; font-size: 11px; line-height: 1.3;
  letter-spacing: 0.06em; width: fit-content;
}
.topnav .navlinks a.today-link { display: none; }
.day .body h3 {
  font-family: var(--display); font-weight: 700; font-size: 20px; line-height: 1.3;
  color: var(--ink); margin: 0; letter-spacing: -0.01em;
}

.tl { list-style: none; margin: 14px 0 0; padding: 0; }
.tl-item { display: grid; grid-template-columns: 68px 1fr; }
.tl-time { font-family: var(--ui); font-size: 11.5px; color: var(--accent); text-align: right; padding: 1px 13px 0 0; line-height: 1.55; font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; white-space: nowrap; }
.tl-body { position: relative; padding: 0 0 15px 18px; border-left: 1.5px solid var(--hairline); }
.tl-item:last-child .tl-body { border-left-color: transparent; padding-bottom: 2px; }
.tl-body::before { content: ""; position: absolute; left: -5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--ink); box-sizing: border-box; }
.tl-item.dive .tl-body::before { background: var(--accent); border-color: var(--accent); }
.tl-item.land .tl-body::before { background: var(--warm-sand); border-color: var(--muted); }
.tl-act { font-family: var(--body); font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.tl-act b { color: var(--ink); font-weight: 600; }
.tl-note { font-family: var(--body); font-size: 13px; line-height: 1.55; color: var(--muted); margin: 3px 0 0; }
.tl-note b { color: var(--accent); font-weight: 600; }

/* ========== Stay / callout / split ========== */
.stay { margin: 14px 0 0; padding: 14px 16px; background: var(--paper-soft); border: 1px solid var(--hairline); border-left: 3px solid var(--ink); border-radius: 0; }
.stay-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.stay-label { font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--warm-sand); padding: 3px 8px; border-radius: 2px; line-height: 1.25; }
.stay-name { font-family: var(--display); font-weight: 600; font-size: 15.5px; color: var(--ink); text-decoration: none; }
.stay-name:hover { color: var(--accent); text-decoration: underline; }
.stay-meta { font-family: var(--ui); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums lining-nums; }
.stay-why { font-family: var(--body); font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 9px 0 0; }
.stay-why b { color: var(--ink); font-weight: 600; }
.stay-alt { font-family: var(--body); font-size: 13px; line-height: 1.6; color: var(--muted); margin: 7px 0 0; }
.stay-alt em { font-style: normal; color: var(--ink-soft); font-weight: 600; }
.stay-alt a { color: var(--ink-soft); border-bottom: 1px solid var(--line); text-decoration: none; }
.stay-alt a:hover { color: var(--accent); border-color: var(--accent); }
.stay-cont { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px 9px; margin: 14px 0 0; font-family: var(--ui); font-size: 12.5px; color: var(--muted); }
.stay-cont a { color: var(--ink-soft); border-bottom: 1px solid var(--line); text-decoration: none; }
.stay-cont a:hover { color: var(--accent); border-color: var(--accent); }

.split { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 28px; align-items: start; }
.spec { list-style: none; margin: 0; padding: 0; }
.spec li { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-family: var(--body); font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.spec li:last-child { border-bottom: 0; }
.spec strong { font-weight: 600; color: var(--ink); }
.callout, .notice {
  background: var(--paper-soft); border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent); border-radius: 0; padding: 20px 22px;
  font-family: var(--body); font-size: 14.5px; line-height: 1.65; color: var(--ink-soft);
}
.callout h3 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 14px; }
.callout ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.callout li { font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--ink-soft); padding-left: 16px; position: relative; }
.callout li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.callout li b, .notice b { color: var(--ink); font-weight: 600; }

.stay-tel { display: grid; grid-template-columns: 52px 1fr; gap: 4px 10px; margin: 11px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-family: var(--ui); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.stay-tel dt { color: var(--muted); font-size: 11.5px; letter-spacing: 0.04em; }
.stay-tel dd { margin: 0; }
.tel { font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; color: var(--ink); border-bottom: 1px solid var(--line); text-decoration: none; }
.tel:hover { border-color: var(--accent); color: var(--accent); }
.addr { color: var(--ink-soft); }
.blank { display: inline-block; min-width: 108px; border-bottom: 1px dashed var(--muted); color: var(--muted); font-size: 11.5px; }
.blank::before { content: "待填"; }

/* ========== Emergency ========== */
.emergency { background: var(--paper-soft); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0; padding: 22px 26px; margin: 0 0 30px; }
.emergency h3 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); margin: 0 0 4px; }
.emergency .lede { font-family: var(--body); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; }
.emergency dl { display: grid; grid-template-columns: 86px 1fr; gap: 11px 18px; margin: 0; align-items: baseline; }
.emergency dt { font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--accent); letter-spacing: 0.04em; line-height: 1.5; }
.emergency dd { margin: 0; font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.emergency dd .addr { display: block; font-family: var(--ui); font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.emergency dd b { color: var(--ink); font-weight: 600; }
.emergency .stamp { margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--hairline); font-family: var(--ui); font-size: 11.5px; color: var(--muted); }

/* ========== Checklist ========== */
.check-group { margin: 0 0 30px; }
.check-group:last-child { margin-bottom: 0; }
.check-group h3 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 2px; }
.check-group .why { font-family: var(--body); font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0 0 10px; }
.check { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline); }
.check li { display: grid; grid-template-columns: 17px 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.check input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin: 3px 0 0; border: 1.5px solid var(--line); border-radius: 2px; background: var(--paper); cursor: pointer; position: relative; flex: 0 0 auto; transition: background 0.15s, border-color 0.15s; }
.check input:hover { border-color: var(--ink); }
.check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.check input:checked { background: var(--ink); border-color: var(--ink); }
.check input:checked::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.6px 1.6px 0; transform: rotate(43deg); }
.check label { font-family: var(--body); font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); cursor: pointer; }
.check label b { color: var(--ink); font-weight: 600; }
.check label .sub { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.check input:checked ~ label { color: var(--muted); }
.check input:checked ~ label b { color: var(--muted); font-weight: 400; }
.check li > .more { grid-column: 2; margin-top: 7px; }

.cash-note { margin-top: 18px; font-size: 14px; color: var(--muted); }

/* ========== FAQ ========== */
.faq { margin: 0; }
.faq-pair { padding: 22px 0; border-bottom: 1px solid var(--hairline); }
.faq-pair:first-child { border-top: 1px solid var(--hairline); }
.faq dt { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); margin: 0 0 7px; }
.faq dd { font-family: var(--body); font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.faq dd b { color: var(--ink); font-weight: 600; }

/* ========== Footer — clear of floating UI ========== */
footer.foot {
  position: relative;
  z-index: 5;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--footer-safe);
  clear: both;
  background: var(--paper);
}
.foot-inner {
  margin-top: 72px;
  padding-top: 32px;
  border-top: 1px solid var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
}
.foot .mark {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: start;
}
.foot .mark img { display: none; }
.foot .mark .wm-name {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--ink); line-height: 1.2; letter-spacing: -0.01em;
}
.foot .mark .wm-line { font-size: 13px; color: var(--muted); margin-top: 4px; }
.foot .credits {
  font-family: var(--ui); font-size: 12px; line-height: 1.7;
  color: var(--muted); letter-spacing: 0.01em; max-width: 320px;
}
.foot .credits a { color: var(--ink); }

/* ========== Holiday badges — quiet ========== */
.holiday-badge, .pill-holiday {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 2px;
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.06em; line-height: 1.4; white-space: nowrap;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line); text-transform: none;
}
.holiday-badge.long, .pill-holiday.long,
.holiday-badge.short, .pill-holiday.short,
.holiday-badge.weekend, .pill-holiday.weekend {
  background: transparent; color: var(--muted); border-color: var(--line);
}
.pill {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 2px;
  font-family: var(--ui); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--muted); background: var(--paper-soft); white-space: nowrap;
  border: 1px solid var(--hairline);
}

/* ========== Cards / grids ========== */
.card {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 0; padding: 22px;
}
.card h3 {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  line-height: 1.3; color: var(--ink); margin: 8px 0 10px; letter-spacing: -0.01em;
}
.card p {
  font-family: var(--body); font-size: 14.5px; line-height: 1.65;
  color: var(--ink-soft); margin: 0;
}
.card.primary { border-left: 3px solid var(--accent); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.tag {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 2px;
  font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; background: var(--paper-soft); color: var(--ink-soft);
  border: 1px solid var(--hairline);
}
.tag.food { background: #f7f1ea; color: #6b4f2a; border-color: #eadfce; }
.tag.night { background: #f0f0f0; color: #3a3a3a; border-color: #ddd; }
.tag.warn { background: #f7ebe7; color: #8a3e28; border-color: #e8cfc6; }
.tag.forest { background: #eaf1ea; color: #2f4f3a; border-color: #cfe0d2; }

.facts { display: grid; gap: 10px; margin: 14px 0 0; }
.fact strong {
  display: block; font-family: var(--ui); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; color: var(--accent); margin-bottom: 2px; text-transform: uppercase;
}
.fact div, .fact { font-family: var(--body); font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.menu {
  margin-top: 14px; padding: 12px 14px; background: var(--paper-soft);
  border-radius: 0; font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--ink-soft);
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.timeline { border-top: 1px solid var(--hairline); }
.event {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--hairline);
}
.event .time {
  font-family: var(--ui); font-size: 13px; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.event h3 {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  margin: 0 0 6px; color: var(--ink);
}
.event p { font-family: var(--body); font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }
.event .meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.branch-route { display: grid; gap: 10px; }
.route-step {
  display: grid; grid-template-columns: 140px 1fr; gap: 14px;
  padding: 14px 16px; background: var(--paper-soft); border: 1px solid var(--hairline);
  border-radius: 0; font-family: var(--body); font-size: 14.5px; line-height: 1.55; color: var(--ink-soft);
}
.route-step b {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.night-box, .hero-panel {
  background: var(--paper-soft); border: 1px solid var(--hairline);
  border-radius: 0; padding: 22px;
}
.night-grid, .stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; margin-top: 16px;
}
.night-stat, .stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; background: var(--paper); border: 1px solid var(--hairline); border-radius: 0;
}
.night-stat span, .stat span { font-family: var(--ui); font-size: 11.5px; color: var(--muted); }
.night-stat b, .stat b {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}

.checklist { border-top: 1px solid var(--hairline); }
.checklist .check {
  display: grid; grid-template-columns: 18px 1fr; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline); align-items: start;
}
.checklist .box {
  width: 15px; height: 15px; margin-top: 3px;
  border: 1.5px solid var(--line); border-radius: 2px; background: var(--paper);
}
.checklist .check b {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: 14.5px; color: var(--ink); margin-bottom: 2px;
}
.checklist .check span { font-family: var(--body); font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }

.source-list { display: grid; gap: 10px; }
.source-list a {
  font-family: var(--body); font-size: 14px; line-height: 1.5;
  color: var(--ink); border-bottom: 1px solid var(--hairline);
  padding-bottom: 10px; text-decoration: none;
}
.source-list a:hover { color: var(--accent); }
.source-list a:last-child { border-bottom: 0; padding-bottom: 0; }

.wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 18px; margin-top: 8px; }
.hero-main .date {
  font-family: var(--ui); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--accent); margin-bottom: 10px;
}
.hero-main .route {
  font-family: var(--display); font-size: 18px; line-height: 1.45;
  color: var(--ink); margin-bottom: 12px; font-weight: 600;
}
.hero-note { font-family: var(--body); font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ========== Landing — sparse typography list ========== */
body.landing {
  background: var(--paper);
  color: var(--ink);
}
body.landing .page {
  max-width: none; padding: 0; width: 100%;
}
.landing-masthead {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px var(--gutter) 64px;
}
.landing-masthead .eyebrow {
  display: flex; align-items: center; gap: 12px;
  justify-content: flex-start;
  font-family: var(--ui); font-weight: 500; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 28px;
}
.landing-masthead h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 5vw, 44px); line-height: 1.15;
  letter-spacing: -0.025em; margin: 0 0 18px; color: var(--ink);
}
.landing-masthead .lede {
  font-family: var(--body); font-size: 15px; line-height: 1.75;
  color: var(--ink-soft); max-width: 28em; margin: 0;
}
.landing-section {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter) 56px;
}
.landing-section .group-head {
  display: grid;
  grid-template-columns: var(--trip-badge-col) minmax(0, 1fr) var(--trip-date-col);
  column-gap: 20px;
  align-items: baseline;
  margin: 0 0 8px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--hairline);
}
.landing-section .group-title {
  font-family: var(--ui); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); margin: 0;
  grid-column: 1 / 3;
}
.landing-section .group-note {
  font-family: var(--ui); font-size: 12px; color: var(--muted);
  grid-column: 3;
  text-align: right;
  justify-self: end;
}

/* Text-only trip rows — fixed 3-col grid (badge | title | dates) */
.trip-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trip-list > li {
  border-bottom: 1px solid var(--hairline);
}
a.trip-row {
  display: grid;
  grid-template-columns: var(--trip-badge-col) minmax(0, 1fr) var(--trip-date-col);
  column-gap: 20px;
  align-items: baseline;
  padding: 22px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
a.trip-row:hover {
  color: inherit;
  opacity: 0.72;
}
a.trip-row .holiday-badge {
  align-self: baseline;
  justify-self: start;
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  color: var(--muted);
  border-color: var(--line);
  background: transparent;
}
/* Flatten wrapper so title + dates join the parent grid */
.trip-main {
  display: contents;
}
.trip-title {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 2.4vw, 22px); line-height: 1.35;
  letter-spacing: -0.015em; color: var(--ink);
  min-width: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.15s ease;
}
a.trip-row:hover .trip-title {
  text-decoration-color: var(--ink);
}
.trip-dates {
  font-family: var(--ui); font-size: 13px; line-height: 1.4;
  letter-spacing: 0.02em; color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  justify-self: end;
}

body.landing footer.foot {
  max-width: 720px;
  margin: 48px auto 0;
  padding: 32px var(--gutter) var(--footer-safe);
  border-top: 1px solid var(--hairline);
}

/* legacy magazine-spread selectors — inert on landing (no longer in HTML) */
.spread-list { display: none; }
a.spread { display: none; }

/* legacy landing aliases kept for safety */
.landing-hero { padding: 72px 0 40px; border-bottom: 1px solid var(--hairline); margin-bottom: 48px; }
.landing-hero h1 { font-family: var(--display); font-weight: 800; font-size: 64px; line-height: 1.05; margin: 0 0 14px; color: var(--ink); letter-spacing: -0.03em; }
.landing-hero .lede { font-family: var(--body); font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 640px; margin: 0; }
.holiday-group { margin-bottom: 48px; }
.holiday-group .group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.holiday-group .group-title { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); margin: 0; }
.holiday-group .group-note { font-family: var(--ui); font-size: 12px; color: var(--muted); }
.trip-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  padding: 20px 0; background: transparent; border: 0; border-bottom: 1px solid var(--hairline);
  border-radius: 0; text-decoration: none; color: inherit;
}
.trip-card:hover { color: inherit; box-shadow: none; transform: none; }
.trip-card .trip-title { font-family: var(--display); font-weight: 700; font-size: 22px; color: var(--ink); margin: 0 0 4px; }
.trip-card .trip-meta { font-family: var(--body); font-size: 14px; color: var(--muted); margin: 0; line-height: 1.55; }
.trip-card .trip-arrow { font-family: var(--ui); font-size: 18px; color: var(--ink); }


/* Crop helpers — favor water / horizon on wide seascape heroes */
.crop-horizon,
.spread-media img.crop-horizon,
.cover-media img.crop-horizon,
.hero.cover .cover-media img.crop-horizon {
  object-position: center 72%;
}

/* hard cap: never let raw hero/spread imgs blow past viewport */
.cover-media img,
.spread-media img,
.hero-figure img {
  max-height: min(75vh, 780px);
}

/* ========== Responsive ========== */
@media (max-width: 1000px) {
  .gallery { grid-template-columns: 1fr; }
  .gallery-caption, .gallery-tabs { grid-column: 1; grid-row: auto; }
  .gallery-tabs { justify-content: flex-start; gap: 6px; }
}
@media (max-width: 880px) {
  :root { --gutter: 22px; --footer-safe: 140px; }
  .page { padding: 36px var(--gutter) 0; }
  .topnav-inner { padding: 0 16px; }
  .topnav .brand { display: none; }
  .cover, .hero.cover { padding: 40px var(--gutter) 28px; }
  .page > .cover, .page > .hero.cover { padding-left: 0; padding-right: 0; }
  .metrics { gap: 24px 28px; }
  .metric-value { font-size: 26px; }
  .day { grid-template-columns: 1fr; row-gap: 12px; }
  .day .when { flex-direction: row; align-items: center; gap: 12px; }
  .split { grid-template-columns: 1fr; gap: 20px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; gap: 6px; }
  .route-step { grid-template-columns: 1fr; gap: 4px; }
  .hero-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 var(--gutter); }
  footer.foot { padding: 0 var(--gutter) var(--footer-safe); }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .landing-masthead { padding: 64px var(--gutter) 48px; }
  .landing-section { padding: 0 var(--gutter) 48px; }
  :root {
    --trip-badge-col: 5.75rem;
    --trip-date-col: 1fr;
  }
  a.trip-row {
    grid-template-columns: var(--trip-badge-col) minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 6px;
    padding: 18px 0;
  }
  .trip-dates {
    grid-column: 2;
    text-align: left;
    justify-self: start;
  }
  .landing-section .group-head {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .landing-section .group-title,
  .landing-section .group-note {
    grid-column: 1;
    text-align: left;
    justify-self: start;
  }
}
@media (max-width: 560px) {
  table.kami { font-size: 12.5px; }
  table.kami thead th, table.kami .num { white-space: normal; }
  table.kami th, table.kami td { padding: 9px 8px; }
}
@media (max-width: 480px) {
  .hero-cta { gap: 10px; }
  .btn-primary, .btn-ghost, .btn, a.btn { flex: 1; min-width: 0; padding: 12px 14px; }
  .gallery-caption { flex-direction: column; align-items: flex-start; gap: 4px; min-height: auto; }
  .metrics { gap: 16px 22px; }
  .metric-value { font-size: 24px; }
  .trip-card { grid-template-columns: 1fr; gap: 10px; }
  .trip-card .trip-arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1, .hero-figure, a.spread .spread-media img { animation: none; transition: none; opacity: 1; transform: none; filter: none; }
  .gallery-frame::after { display: none; }
  .gallery-panel, .gallery-caption { transition: none; }
  .more > summary::before { transition: none; }
}

@media print {
  @page { margin: 14mm; }
  html, body { background: #fff; color: #000; }
  body { font-size: 10.5pt; line-height: 1.5; letter-spacing: 0; }
  .topnav, #gallery, .hero-figure, .hero-cta, .foot .mark img, .cover-media { display: none; }
  .page { max-width: none; padding: 0; }
  footer.foot { max-width: none; padding: 0; }
  .cover, .hero.cover { min-height: 0; margin: 0 0 16pt; width: auto; max-width: none; background: #fff; color: #000; }
  .cover-body, .hero.cover .cover-body { min-height: 0; padding: 0; color: #000; }
  .cover h1, .hero.cover h1 { font-size: 22pt; color: #000; }
  .cover .tagline, .hero.cover .tagline { color: #333; }
  .hero h1 { font-size: 22pt; animation: none; opacity: 1; transform: none; filter: none; }
  .hero { padding-bottom: 14pt; margin-bottom: 16pt; }
  .hero .tagline { font-size: 11pt; }
  section { margin-bottom: 20pt; }
  .section-title, .section-head h2 { font-size: 14pt; }
  .section-lede, .section-intro { font-size: 10.5pt; }
  .metric-value { font-size: 16pt; }
  .day, .faq-pair, .stay, .emergency, .check li, .tl-item { break-inside: avoid; }
  section, .section-head { break-after: avoid-page; }
  .more > summary { display: none; }
  .more { margin-top: 6pt; }
  .more-body { border-left: 0.8pt solid #999; color: #000; font-size: 9.5pt; padding-left: 8pt; }
  details > *:not(summary) { display: block; }
  details::details-content { content-visibility: visible; }
  .day.is-today { box-shadow: none; background: transparent; padding-left: 0; margin-left: 0; }
  .stay-name[href^="http"]::after, .stay-alt a[href^="http"]::after, .credits a::after {
    content: " (" attr(href) ")"; font-size: 7.5pt; color: #555; word-break: break-all; font-weight: 400;
  }
  a { color: #000; }
  .tel, .stay-alt a, .stay-cont a { border-bottom: 0; }
  .emergency { border: 1.2pt solid #000; border-left-width: 3pt; background: #fff; break-inside: avoid; }
  .check input { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .table-wrap { overflow-x: visible; }
  a.trip-row { break-inside: avoid; color: #000; }
  .trip-title, .trip-dates { color: #000; }
  a.trip-row .holiday-badge { color: #333; border-color: #999; }
}

@media (hover: none) {
  a:hover { color: var(--ink); }
  .btn-primary:hover, .btn.main:hover, a.btn.main:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .btn-ghost:hover, .btn:hover, a.btn:hover { background: transparent; color: var(--ink); }
  .topnav .navlinks a:hover { color: var(--muted); }
  .topnav .navlinks a.active:hover { color: var(--ink); }
  .more > summary:hover { color: var(--muted); border-color: var(--hairline); background: transparent; }
  .gallery-tabs button:hover { color: var(--muted); border-color: var(--hairline); background: transparent; }
  .gallery-tabs button.is-active:hover { color: var(--ink); border-color: var(--line); background: var(--paper-soft); }
  .stay-name:hover { text-decoration: none; }
  .stay-alt a:hover, .stay-cont a:hover { color: var(--ink-soft); border-color: var(--line); }
  .tel:hover { border-color: var(--line); }
  .check input:hover { border-color: var(--line); }
  .check input:checked:hover { border-color: var(--ink); }
  a.trip-row:hover { opacity: 1; }
}