/* venicetaxi.boats — "Carta della laguna" design system */
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: 'Unbounded'; src: url('/fonts/unbounded-latin-ext-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-ext-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-ext-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0100-02AF, U+1E00-1EFF; }
@font-face { font-family: 'Instrument Sans'; src: url('/fonts/instrument-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('/fonts/martian-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Martian Mono'; src: url('/fonts/martian-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --paper: #eef2ee;
  --paper-2: #e2e9e4;
  --card: #fbfcfa;
  --ink: #15201c;
  --ink-2: #34443e;
  --mute: #5f6f69;
  --rule: #c5d1ca;
  --rule-2: #dbe3de;
  --sea: #d3e4e3;
  --sea-2: #a9c9cb;
  --land: #ebe2cb;
  --coast: #8c7c57;
  --chart: #1e4f8c;
  --port: #c2352b;
  --stbd: #14784a;
  --taxi: #f3c318;
  --taxi-ink: #15201c;
  --win: #dff0e5;
  --warn: #fff4cf;
  --shadow: 4px 4px 0 var(--ink);
  --r: 4px;
  --font-d: 'Unbounded', 'Arial Black', system-ui, sans-serif;
  --font-b: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-m: 'Martian Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --wrap: 1180px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1513; --paper-2: #151d1a; --card: #18211d; --ink: #e6ede8; --ink-2: #c3cec8; --mute: #92a39c;
    --rule: #2d3a35; --rule-2: #222c28; --sea: #13272a; --sea-2: #1d3b40; --land: #2a291f; --coast: #6f6546;
    --chart: #7fb0ec; --port: #ff7a6b; --stbd: #56c68d; --taxi: #f3c318; --win: #173326; --warn: #2e2710;
    --shadow: 4px 4px 0 #000; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--font-b); overflow-x: hidden; }
.loc-zh { --font-b: 'Instrument Sans', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; --font-d: 'Unbounded', 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', sans-serif; }
.loc-ja { --font-b: 'Instrument Sans', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif; --font-d: 'Unbounded', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', sans-serif; }
.loc-zh body, .loc-ja body { line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--chart); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--taxi); outline-offset: 2px; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--taxi); color: var(--taxi-ink); padding: 8px 14px; z-index: 50; font-weight: 600; }
.skip:focus { top: 8px; }
.fine { font-size: 0.8rem; color: var(--mute); margin: 0.6rem 0 0; line-height: 1.5; }

/* ── top bar ─────────────────────────────── */
.topbar { background: var(--ink); color: var(--paper); font: 400 0.68rem/1 var(--font-m); letter-spacing: 0.04em; }
@media (prefers-color-scheme: dark) { .topbar { background: #070a09; color: var(--ink-2); } }
.topbar-in { display: flex; align-items: center; gap: 16px; min-height: 34px; }
.coords { margin: 0; opacity: 0.7; }
.indep { position: relative; margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 7px; cursor: help; padding: 5px 0; }
.indep-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--taxi); box-shadow: 0 0 0 2px rgba(243, 195, 24, 0.25); }
.indep-tip { position: absolute; right: 0; top: calc(100% + 6px); width: min(320px, 80vw); background: var(--card); color: var(--ink); font: 400 0.8rem/1.45 var(--font-b); letter-spacing: 0; padding: 12px 14px; border: 1.5px solid var(--ink); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: 0.15s; z-index: 40; }
.indep:hover .indep-tip, .indep:focus .indep-tip, .indep:focus-within .indep-tip { opacity: 1; visibility: visible; transform: none; }
.lang { position: relative; }
.lang summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 6px 0; }
.lang summary::-webkit-details-marker { display: none; }
.lang svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lang ul { position: absolute; right: 0; top: calc(100% + 4px); list-style: none; margin: 0; padding: 6px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: var(--shadow); z-index: 45; min-width: 150px; }
.lang a { display: block; padding: 7px 10px; color: var(--ink); text-decoration: none; font: 500 0.85rem/1.2 var(--font-b); letter-spacing: 0; }
.lang a:hover, .lang a[aria-current] { background: var(--paper-2); }
.lang a[aria-current]::before { content: '● '; color: var(--stbd); }

/* ── masthead ─────────────────────────────── */
.masthead { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--ink); }
.mast-in { display: flex; align-items: center; gap: 22px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 600 1.02rem/1 var(--font-d); letter-spacing: -0.02em; white-space: nowrap; }
.brand b { font-weight: 600; color: var(--port); }
.logo-mark { width: 34px; height: 34px; }
.logo-mark rect { fill: var(--coast); }
.logo-mark .lm-band { fill: var(--taxi); }
.logo-mark .lm-wave { fill: none; stroke: var(--chart); stroke-width: 2.2; stroke-linecap: round; }
.nav { margin-left: auto; }
.nav > ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
.nav summary, .nav-a { list-style: none; display: block; cursor: pointer; padding: 9px 12px; font: 600 0.92rem/1 var(--font-b); color: var(--ink); text-decoration: none; border-radius: var(--r); }
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.6px solid; border-bottom: 1.6px solid; transform: translateY(-3px) rotate(45deg); }
.nav summary:hover, .nav-a:hover, .nav details[open] summary { background: var(--paper-2); }
.nav-a[aria-current] { box-shadow: inset 0 -3px 0 var(--taxi); }
.nav-g { position: relative; }
.nav-drop { position: absolute; top: calc(100% + 10px); left: -10px; width: 290px; background: var(--card); border: 1.5px solid var(--ink); box-shadow: var(--shadow); padding: 14px; z-index: 35; }
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-desc { margin: 0 0 8px; font: 400 0.7rem/1.3 var(--font-m); color: var(--mute); text-transform: uppercase; letter-spacing: 0.05em; }
.nav-drop ul { list-style: none; margin: 0; padding: 0; }
.nav-drop a { display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; font-weight: 500; border-left: 3px solid transparent; }
.nav-drop a:hover { background: var(--paper-2); border-left-color: var(--stbd); }
.nav-drop a[aria-current] { border-left-color: var(--port); background: var(--paper-2); }
.mast-cta { white-space: nowrap; }
.burger { display: none; }

@media (max-width: 960px) {
  .mast-in { gap: 12px; }
  .burger { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; cursor: pointer; border: 1.5px solid var(--ink); border-radius: var(--r); order: 3; }
  .burger span, .burger span::before, .burger span::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: 0.2s; }
  .burger span::before, .burger span::after { content: ''; position: absolute; left: 0; }
  .burger span::before { top: -6px; } .burger span::after { top: 6px; }
  .nav-toggle:checked ~ .burger span { background: transparent; }
  .nav-toggle:checked ~ .burger span::before { top: 0; transform: rotate(45deg); }
  .nav-toggle:checked ~ .burger span::after { top: 0; transform: rotate(-45deg); }
  .mast-cta { margin-left: auto; order: 2; padding: 9px 12px; font-size: 0.8rem; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--card); border-bottom: 1.5px solid var(--ink); padding: 8px 16px 16px; max-height: calc(100vh - 100px); overflow-y: auto; }
  .nav-toggle:checked ~ .nav { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; }
  .nav details[open] summary { background: none; }
  .nav summary, .nav-a { padding: 13px 4px; border-bottom: 1px solid var(--rule-2); border-radius: 0; font-size: 1rem; }
  .nav-drop { position: static; width: auto; border: 0; box-shadow: none; padding: 4px 0 8px 8px; background: none; }
  .nav-desc { display: none; }
}
@media (max-width: 420px) { .brand span { font-size: 0.86rem; } .logo-mark { width: 28px; height: 28px; } .mast-cta { display: none; } }

/* ── buttons ─────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 18px; border-radius: var(--r); font: 600 0.95rem/1.15 var(--font-b); text-decoration: none; cursor: pointer; border: 1.5px solid var(--ink); transition: transform 0.12s, box-shadow 0.12s; }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.btn-go { background: var(--taxi); color: var(--taxi-ink); box-shadow: 3px 3px 0 var(--ink); }
.btn-go:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn-go:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
@media (prefers-color-scheme: dark) { .btn { border-color: #000; } .btn-go { box-shadow: 3px 3px 0 #000; } }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; border-color: var(--ink); }
.btn-ghost:hover { background: var(--taxi); color: var(--taxi-ink); transform: none; box-shadow: none; }
.btn-sm { padding: 8px 12px; font-size: 0.85rem; }
.btn-lg { padding: 15px 22px; font-size: 1.02rem; }
.btn-block { width: 100%; }
button.btn { font-family: var(--font-b); }

/* ── hero ─────────────────────────────── */
.hero { position: relative; overflow: hidden; border-bottom: 1.5px solid var(--ink); background: var(--paper); }
.hero-chart { position: absolute; inset: 0; opacity: 0.55; pointer-events: none;
  background-image:
    radial-gradient(ellipse 60% 70% at 88% 30%, var(--sea) 0 30%, transparent 31%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='360' viewBox='0 0 520 360'%3E%3Cg fill='none' stroke='%239fbfc2' stroke-width='1'%3E%3Cpath d='M0 60c80-30 150 30 240 0s170-40 280-5'/%3E%3Cpath d='M0 120c90-25 160 35 250 5s160-35 270 0'/%3E%3Cpath d='M0 185c70-20 170 30 260 0s150-30 260 5' stroke-dasharray='4 5'/%3E%3Cpath d='M0 250c100-35 150 25 245-5s175-25 275 10'/%3E%3Cpath d='M0 315c80-15 170 25 255-5s165-30 265 0' stroke-dasharray='2 6'/%3E%3C/g%3E%3Cg fill='%237d9ea1' font-family='monospace' font-size='9'%3E%3Ctext x='60' y='95'%3E0.8%3C/text%3E%3Ctext x='300' y='160'%3E1.4%3C/text%3E%3Ctext x='420' y='230'%3E2%3C/text%3E%3Ctext x='150' y='285'%3E0.6%3C/text%3E%3Ctext x='470' y='60'%3E3%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, 520px 360px; }
@media (prefers-color-scheme: dark) { .hero-chart { opacity: 0.18; } }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; padding-block: 40px 44px; align-items: start; }
.hero-plain .hero-grid { grid-template-columns: minmax(0, 820px); }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0 0 22px; padding: 0; font: 400 0.72rem/1.4 var(--font-m); color: var(--mute); }
.crumbs li + li::before { content: '→'; margin-right: 8px; color: var(--rule); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
.kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; font: 600 0.74rem/1 var(--font-m); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.k-port, .k-stbd { width: 9px; height: 16px; display: inline-block; }
.k-port { background: var(--port); }
.k-stbd { background: var(--stbd); margin-right: 6px; clip-path: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%); }
h1 { font: 650 clamp(2rem, 1.2rem + 3.3vw, 3.5rem)/1.04 var(--font-d); letter-spacing: -0.035em; margin: 0 0 18px; text-wrap: balance; }
.loc-zh h1, .loc-ja h1 { font-weight: 800; letter-spacing: 0; line-height: 1.25; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.9rem); }
.lede { font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: var(--ink-2); margin: 0 0 24px; max-width: 42em; }
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; margin: 0 0 18px; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.glance div { padding: 12px 14px; border-left: 1px dashed var(--rule); }
.glance div:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 640px) {
  .glance { grid-template-columns: 1fr 1fr; }
  .glance div { padding: 10px 12px; }
  .glance div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .glance div:nth-child(n+3) { border-top: 1px dashed var(--rule); }
  .coords { display: none; }
  .indep { margin-left: 0; }
  .topbar-in { justify-content: space-between; }
  .hero-chart { background-image: none; }
}
.glance dt { font: 400 0.66rem/1.3 var(--font-m); letter-spacing: 0.05em; text-transform: uppercase; color: var(--mute); margin-bottom: 6px; }
.glance dd { margin: 0; font: 600 1.14rem/1.2 var(--font-d); letter-spacing: -0.02em; }
.loc-zh .glance dd, .loc-ja .glance dd { font-weight: 700; letter-spacing: 0; }
.stamp { font: 400 0.7rem/1.4 var(--font-m); color: var(--mute); margin: 0; }

/* booking card — yellow licence band on top */
.book { position: relative; background: var(--card); border: 1.5px solid var(--ink); box-shadow: var(--shadow); padding: 30px 20px 18px; }
.book::before { content: 'TAXI'; position: absolute; left: -1.5px; right: -1.5px; top: -1.5px; height: 14px; background: repeating-linear-gradient(90deg, var(--taxi) 0 46px, var(--ink) 46px 50px); font: 700 0.55rem/14px var(--font-m); letter-spacing: 0.3em; color: transparent; }
.book-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; font: 400 0.68rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.04em; color: var(--mute); }
.book-title { font: 600 1.1rem/1.3 var(--font-b); margin: 0 0 10px; }
.book-meta { margin: 0 0 16px; font-size: 0.9rem; line-height: 1.7; }
.book-live { margin-top: 16px; min-height: 40px; }
.book-live iframe { max-width: 100%; }
.consent { background: var(--paper-2); padding: 12px; border-radius: var(--r); font-size: 0.85rem; line-height: 1.45; }
.consent p { margin: 0 0 10px; }
.consent .fine { margin: 10px 0 0; }
.pf { display: inline-block; padding: 3px 7px 2px; border-radius: 3px; font: 600 0.62rem/1.2 var(--font-m); letter-spacing: 0.04em; text-transform: none; }
.pf-gyg { background: #ff5533; color: #fff; }
.pf-tiqets { background: #0a4a8f; color: #fff; }
.pt small { font-size: 0.78em; color: var(--mute); }
.pt b { font: 600 1.3em/1 var(--font-m); letter-spacing: -0.03em; }
.rt { font-size: 0.86rem; color: var(--ink-2); }
.rt b { font-family: var(--font-m); font-weight: 600; }
.rt-low b { color: var(--port); }
.rt-new { font: 400 0.7rem/1.3 var(--font-m); color: var(--mute); text-transform: uppercase; letter-spacing: 0.04em; }

.band .photo { margin: 0; }
.band img { width: 100%; height: clamp(200px, 32vw, 440px); object-fit: cover; }
.band figcaption { position: relative; }
.band .credit { position: absolute; right: 12px; bottom: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; padding: 3px 8px; border-radius: 3px; font: 400 0.6rem/1.3 var(--font-m); }
.band { border-bottom: 1.5px solid var(--ink); }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; padding-block: 28px 32px; }
  .book { max-width: 520px; }
}

/* ── body grid ─────────────────────────────── */
.body-grid { display: grid; grid-template-columns: minmax(0, 740px) 260px; justify-content: space-between; gap: 56px; padding-block: 48px 64px; }
.body-grid.no-rail { grid-template-columns: minmax(0, 780px); }
.rail-in { position: sticky; top: 92px; display: grid; gap: 18px; }
.toc { border-left: 2px solid var(--ink); padding-left: 16px; }
.toc p { margin: 0 0 10px; font: 600 0.68rem/1 var(--font-m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: t; }
.toc li { counter-increment: t; margin-bottom: 8px; font-size: 0.86rem; line-height: 1.35; display: grid; grid-template-columns: 26px 1fr; }
.toc li::before { content: counter(t, decimal-leading-zero); font: 400 0.68rem/1.9 var(--font-m); color: var(--mute); }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--chart); text-decoration: underline; }
.rail-book { background: var(--card); border: 1.5px solid var(--ink); padding: 16px; display: grid; gap: 10px; }
.rail-t { margin: 0; font-weight: 600; font-size: 0.9rem; line-height: 1.35; }
@media (max-width: 1060px) { .body-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } .rail { display: none; } }

/* ── prose ─────────────────────────────── */
.prose { counter-reset: leg; min-width: 0; }
:where(.prose) > * + * { margin-top: 1.1em; }
:where(.prose) :where(p, li) { max-width: 68ch; }
.prose h2 { counter-increment: leg; position: relative; font: 620 clamp(1.4rem, 1.1rem + 1vw, 1.85rem)/1.18 var(--font-d); letter-spacing: -0.03em; margin: 2.6em 0 0.7em; padding-top: 18px; border-top: 1.5px solid var(--ink); text-wrap: balance; }
.prose h2::before { content: counter(leg, decimal-leading-zero); position: absolute; top: -1px; left: 0; transform: translateY(-50%); background: var(--paper); padding-right: 10px; font: 600 0.72rem/1 var(--font-m); color: var(--port); letter-spacing: 0.06em; }
.prose > h2:first-child, .dossier + h2 { margin-top: 0.4em; }
.loc-zh .prose h2, .loc-ja .prose h2 { font-weight: 800; letter-spacing: 0; line-height: 1.35; }
.prose h3 { font: 600 1.18rem/1.3 var(--font-b); margin: 1.9em 0 0.5em; }
:where(.prose) :where(ul, ol) { padding-left: 1.3em; }
:where(.prose) :where(li + li) { margin-top: 0.35em; }
:where(.prose) :where(ul > li)::marker { color: var(--port); }
.prose strong { font-weight: 650; }
.prose blockquote { margin-left: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--taxi); color: var(--ink-2); }
.prose code { font: 0.85em var(--font-m); background: var(--paper-2); padding: 1px 5px; border-radius: 3px; }
mark.verify { background: var(--port); color: #fff; border-radius: 3px; padding: 0 4px; font-size: 0.75em; cursor: help; }

.tbl { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1.5px solid var(--ink); background: var(--card); max-width: 100%; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 0.92rem; line-height: 1.45; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule-2); }
.tbl thead th { background: var(--ink); color: var(--paper); font: 600 0.68rem/1.3 var(--font-m); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .tbl thead th { background: #070a09; color: var(--ink); } }
.tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--paper-2) 55%, transparent); }
.tbl tbody tr:last-child td, .tbl tbody tr:last-child th { border-bottom: 0; }
.tbl td:has(> strong:only-child) { white-space: nowrap; }

/* ── blocks: common ─────────────────────────── */
.blk { margin-block: 2em !important; }
.blk-title { font: 600 0.74rem/1.3 var(--font-m) !important; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px !important; display: flex; align-items: center; gap: 10px; }
.blk-title::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* route legs */
.legs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.leg { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; padding: 14px 16px 14px 0; background: var(--card); border: 1.5px solid var(--ink); max-width: none !important; margin: 0 !important; }
.leg-n { grid-row: 1 / span 3; align-self: stretch; display: grid; place-items: center; font: 600 0.72rem/1 var(--font-m); color: var(--mute); border-right: 1px dashed var(--rule); }
.leg-ends { display: grid; grid-template-columns: minmax(0, max-content) minmax(48px, 1fr) minmax(0, max-content); align-items: center; gap: 12px; font-weight: 650; font-size: 1.02rem; line-height: 1.25; }
.leg-from, .leg-to { min-width: 0; }
.leg-line { position: relative; height: 12px; min-width: 48px; }
.leg-line::before { content: ''; position: absolute; left: 0; right: 8px; top: 50%; border-top: 2px solid var(--port); }
.leg-line::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-left: 8px solid var(--port); border-right: 0; }
.leg-line i { position: absolute; left: calc(50% - 5px); top: 1px; width: 10px; height: 10px; background: linear-gradient(90deg, var(--coast) 0 2px, transparent 2px 4px, var(--coast) 4px 6px, transparent 6px 8px, var(--coast) 8px 10px); }
.leg-shared .leg-line::before { border-top: 3px dotted var(--port); }
.leg.leg-line .leg-line::before { border-top: 2px dashed var(--chart); }
.leg.leg-line .leg-line::after { border-left-color: var(--chart); }
.leg.leg-land .leg-line::before { border-top: 2px dashed var(--ink-2); }
.leg.leg-land .leg-line::after { border-left-color: var(--ink-2); }
.leg-data { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.leg-data div { display: contents; }
.leg-data dd { margin: 0; font: 400 0.72rem/1.25 var(--font-m); padding: 6px 8px; border-radius: 3px; background: var(--paper-2); }
.leg-data .leg-price { background: var(--ink); color: var(--paper); font-weight: 600; }
@media (prefers-color-scheme: dark) { .leg-data .leg-price { background: var(--taxi); color: var(--taxi-ink); } }
.leg-data .leg-mode { background: transparent; border: 1px solid var(--rule); }
.leg-note { margin: 0 !important; font-size: 0.86rem; color: var(--mute); line-height: 1.45; }
@media (max-width: 640px) {
  .leg { grid-template-columns: 34px minmax(0, 1fr); padding-right: 12px; }
  .leg-ends { grid-template-columns: 1fr; gap: 4px; }
  .leg-line { width: 60px; }
}

/* price ladder — soundings */
.rungs { list-style: none; margin: 0; padding: 0 0 0 26px !important; position: relative; }
.rungs::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: repeating-linear-gradient(var(--ink) 0 8px, transparent 8px 12px); }
.rungs li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 16px; margin: 0 0 8px !important; max-width: none !important; background: linear-gradient(90deg, var(--sea) calc((var(--i) + 1) / var(--n) * 100%), var(--card) 0); border: 1.5px solid var(--ink); }
.rungs li::before { content: ''; position: absolute; left: -24px; top: 50%; width: 16px; height: 2px; background: var(--ink); }
.rungs li::after { content: ''; position: absolute; left: -22px; top: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.rung-depth { display: none; }
.rung-label { margin: 0 !important; font-weight: 600; line-height: 1.3; }
.rung-note { margin: 2px 0 0 !important; font-size: 0.84rem; color: var(--ink-2); line-height: 1.4; }
.rung-price { margin: 0 !important; text-align: right; line-height: 1.15; }
.rung-price b { display: block; font: 600 1.05rem/1.2 var(--font-m); letter-spacing: -0.03em; white-space: nowrap; }
.rung-price small { font-size: 0.74rem; color: var(--mute); }
.rungs .btn { grid-column: 1 / -1; justify-self: start; }
@media (max-width: 560px) { .rungs li { grid-template-columns: 1fr; } .rung-price { text-align: left; } .rung-price b { display: inline; margin-right: 6px; } }

/* split — per-person maths */
.split-chart { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 170px; padding: 12px 12px 26px; box-sizing: border-box; border: 1.5px solid var(--ink); border-bottom-width: 3px; background: var(--card); margin-bottom: 10px; }
.split-chart > span:not(.split-alt) { position: relative; flex: 1; height: var(--h); background: var(--sea-2); border: 1.5px solid var(--ink); border-bottom: 0; min-height: 4px; }
.split-chart > span.win { background: var(--stbd); }
.split-chart > span i { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font: 600 0.7rem/1 var(--font-m); font-style: normal; }
.split-alt { position: absolute; left: 12px; right: 12px; bottom: calc(26px + 127px * var(--y) / 100); border-top: 2px dashed var(--port); pointer-events: none; }
.split-alt em { position: absolute; right: 0; bottom: 4px; background: var(--card); padding: 1px 6px; font: 600 0.66rem/1.3 var(--font-m); font-style: normal; color: var(--port); white-space: nowrap; }
.split .tbl td, .split .tbl th { font-family: var(--font-m); font-size: 0.78rem; white-space: nowrap; }
.split tr.win { background: var(--win) !important; }
.split td.w { font-family: var(--font-b); font-weight: 600; }
.split-sum { font-weight: 600; margin: 10px 0 0 !important; padding-left: 12px; border-left: 4px solid var(--stbd); }

/* facts */
.facts dl { margin: 0; border: 1.5px solid var(--ink); background: var(--card); display: grid; grid-template-columns: 1fr 1fr; }
.facts dl div { padding: 12px 16px; border-bottom: 1px solid var(--rule-2); }
.facts dl div:nth-child(odd) { border-right: 1px solid var(--rule-2); }
.facts dt { font: 400 0.68rem/1.35 var(--font-m); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); margin-bottom: 4px; }
.facts dd { margin: 0; font-weight: 600; line-height: 1.35; }
@media (max-width: 560px) { .facts dl { grid-template-columns: 1fr; } .facts dl div:nth-child(odd) { border-right: 0; } }

/* steps */
.steps ol { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 2px; }
.steps li { counter-increment: s; position: relative; padding: 14px 16px 14px 64px; background: var(--card); border: 1.5px solid var(--ink); max-width: none !important; margin: 0 0 8px !important; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; bottom: 0; width: 46px; display: grid; place-items: center; background: var(--taxi); color: var(--taxi-ink); font: 700 1.1rem/1 var(--font-d); border-right: 1.5px solid var(--ink); }
.step-t { margin: 0 !important; font-weight: 650; }
.step-d { margin: 4px 0 0 !important; color: var(--ink-2); font-size: 0.95rem; }

/* notes */
.note { position: relative; padding: 16px 18px 16px 58px; border: 1.5px solid var(--ink); background: var(--card); }
.note::before { position: absolute; left: 16px; top: 15px; width: 26px; height: 26px; display: grid; place-items: center; font: 700 0.9rem/1 var(--font-m); }
.note-warn { background: var(--warn); }
.note-warn::before { content: '!'; background: var(--taxi); color: var(--taxi-ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 6px; }
.note-tip::before { content: '↗'; background: var(--stbd); color: #fff; border-radius: 50%; }
.note-info::before { content: 'i'; background: var(--chart); color: #fff; border-radius: 50%; font-style: italic; }
.note-t { margin: 0 0 4px !important; font-weight: 700; }
.note p { margin: 0.4em 0 0; }

/* product cards */
.pgrid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pgrid-1, .pgrid-2, .pgrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .pgrid { grid-template-columns: 1fr !important; } }
.pcard { display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--card); border: 1.5px solid var(--ink); }
.pcard-kind { margin: 0 !important; font: 400 0.66rem/1.4 var(--font-m); color: var(--mute); text-transform: uppercase; letter-spacing: 0.04em; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pcard-title { margin: 0 !important; font: 600 1rem/1.3 var(--font-b) !important; }
.pcard-meta { margin: 0 !important; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.du { font: 400 0.7rem/1 var(--font-m); color: var(--mute); }
.pcard-foot { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--rule); display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

.cta-row { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 18px; background: var(--paper-2); border-left: 6px solid var(--taxi); }
.cta-meta { margin: 0 !important; font-size: 0.9rem; }

/* verdict */
.verdict ul { list-style: none; margin: 0; padding: 0; border: 1.5px solid var(--ink); background: var(--card); }
.v-head { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 16px; padding: 8px 16px; background: var(--ink); color: var(--paper); font: 600 0.66rem/1.3 var(--font-m); letter-spacing: 0.05em; text-transform: uppercase; }
@media (prefers-color-scheme: dark) { .v-head { background: #070a09; color: var(--ink); } }
.verdict li { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 6px 16px; padding: 14px 16px; border-bottom: 1px solid var(--rule-2); max-width: none !important; margin: 0 !important; }
.verdict li:last-child { border-bottom: 0; }
.verdict li p { margin: 0 !important; }
.v-who { font-weight: 600; }
.v-pick { font-weight: 700; color: var(--stbd); }
.v-why { font-size: 0.92rem; color: var(--ink-2); }
.verdict li .btn { grid-column: 3; justify-self: start; }
@media (max-width: 640px) { .v-head { display: none; } .verdict li { grid-template-columns: 1fr; } .verdict li .btn { grid-column: 1; } .v-pick::before { content: '→ '; } }

/* faq */
.faq h2 { counter-increment: none !important; }
.faq h2::before { content: '?' !important; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { list-style: none; cursor: pointer; padding: 16px 40px 16px 0; font-weight: 600; position: relative; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 12px; font: 400 1.4rem/1 var(--font-m); color: var(--port); transition: transform 0.15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 0 16px; color: var(--ink-2); }
.faq details > div p { margin: 0 0 0.6em; }

/* map */
.lagoon-map { margin: 0; border: 1.5px solid var(--ink); background: var(--sea); }
.lagoon-map svg { display: block; width: 100%; height: auto; max-height: 520px; }
.lm-water { fill: var(--sea); }
.lm-land { fill: var(--land); stroke: var(--coast); stroke-width: 0.8; vector-effect: non-scaling-stroke; }
.lm-hatch { stroke: var(--coast); opacity: 0.3; }
.lm-canal { fill: none; stroke: var(--sea-2); stroke-linecap: round; }
.lm-sound { fill: var(--chart); opacity: 0.45; font-family: var(--font-m); }
.lm-r { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.lm-taxi { stroke: var(--port); }
.lm-line { stroke: var(--chart); }
.lm-land.lm-r, .lm-r.lm-land { stroke: var(--ink-2); fill: none; }
.lm-pl circle { fill: var(--card); stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.lm-pl text { fill: var(--ink); font-family: var(--font-b); font-weight: 600; paint-order: stroke; stroke: var(--sea); stroke-width: 3px; stroke-linejoin: round; }
.lm-big text { font-family: var(--font-d); font-weight: 600; }
.lm-big circle { fill: var(--ink); }
.lm-compass circle { fill: var(--card); stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lm-compass path { fill: var(--port); }
.lm-compass text { fill: var(--ink); font-family: var(--font-m); font-weight: 600; }
.lagoon-map figcaption { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px; background: var(--card); border-top: 1.5px solid var(--ink); font: 400 0.7rem/1.4 var(--font-m); color: var(--ink-2); }
.lg::before { content: ''; display: inline-block; width: 22px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 3px solid var(--port); }
.lg-line::before { border-top: 3px dashed var(--chart); }
.lg-land::before { border-top: 3px dashed var(--ink-2); }
.lg-note { margin-left: auto; color: var(--mute); }

/* photos */
.photo { margin-inline: 0; }
.photo img { width: 100%; border: 1.5px solid var(--ink); aspect-ratio: 3 / 2; object-fit: cover; background: var(--paper-2); }
.photo figcaption { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 0.84rem; color: var(--ink-2); padding-top: 8px; }
.photo .credit { font: 400 0.62rem/1.4 var(--font-m); color: var(--mute); }
.band .photo img { border: 0; aspect-ratio: auto; }

/* tariff — posted sheet */
.tariff { border: 1.5px solid var(--ink); background: var(--card); padding: 0 0 14px; }
.tariff .blk-title { margin: 0 !important; padding: 12px 16px; background: var(--taxi); color: var(--taxi-ink); border-bottom: 1.5px solid var(--ink); }
.tariff .blk-title::after { background: var(--taxi-ink); opacity: 0.3; }
.tariff .blk-title::before { content: 'TAXI'; font: 800 0.8rem/1 var(--font-d); background: var(--taxi-ink); color: var(--taxi); padding: 4px 6px; letter-spacing: 0.08em; }
.tf-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; }
.tf-col { padding: 14px 16px 0; }
.tf-col + .tf-col { border-left: 1px dashed var(--rule); }
.tf-h { margin: 0 0 8px !important; font: 600 0.66rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); }
.tf-col dl { margin: 0; }
.tf-col dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--rule); font-size: 0.86rem; line-height: 1.35; }
.tf-col dd { margin: 0; font: 600 0.84rem/1.3 var(--font-m); white-space: nowrap; }
.tariff > .fine { padding: 0 16px; }
@media (max-width: 760px) { .tf-grid { grid-template-columns: 1fr; } .tf-col + .tf-col { border-left: 0; border-top: 1px dashed var(--rule); margin-top: 12px; } }

/* review dossier */
.dossier { border: 1.5px solid var(--ink); background: var(--card); margin-bottom: 2.4em; }
.dossier-id { display: flex; flex-wrap: wrap; margin: 0; border-bottom: 1px solid var(--rule); }
.dossier-id div { padding: 12px 16px; flex: 1 1 200px; }
.dossier-id div + div { border-left: 1px dashed var(--rule); }
.dossier-id dt { font: 400 0.64rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); }
.dossier-id dd { margin: 4px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.dossier-verdict { margin: 0 !important; padding: 16px; font: 500 1.08rem/1.5 var(--font-b); border-bottom: 1px solid var(--rule); max-width: none !important; }
.dossier-verdict span { display: block; font: 600 0.66rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.06em; color: var(--port); margin-bottom: 6px; }
.dossier-pc { display: grid; grid-template-columns: 1fr 1fr; }
.dossier-pc > div { padding: 14px 16px; }
.dossier-pc > div + div { border-left: 1px dashed var(--rule); }
.dossier-pc p { margin: 0 0 6px; font: 600 0.68rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.05em; }
.pros p { color: var(--stbd); } .cons p { color: var(--port); }
.dossier-pc ul { margin: 0; padding-left: 1.1em; font-size: 0.93rem; }
.pros li::marker { content: '+ '; color: var(--stbd); } .cons li::marker { content: '− '; color: var(--port); }
.dossier-via { padding: 14px 16px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dossier-via p { margin: 0 8px 0 0; font: 600 0.68rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.05em; color: var(--mute); width: 100%; }
.dossier > .fine { padding: 0 16px 14px; }
@media (max-width: 600px) { .dossier-pc { grid-template-columns: 1fr; } .dossier-pc > div + div { border-left: 0; border-top: 1px dashed var(--rule); } }

.sources { margin-top: 3em !important; font-size: 0.86rem; }
.sources h2 { font-size: 1rem !important; }
.sources h2::before { content: '§' !important; }
.sources ul { padding-left: 1.1em; }
.credits img { width: 110px; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--rule); }
.credits .photo { margin: 0; }
.list-404 { columns: 2; }

/* next routes */
.next { padding-block: 0 64px; }
.next-h { font: 600 0.74rem/1.3 var(--font-m); letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 14px; display: flex; gap: 10px; align-items: center; }
.next-h::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.next-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.next-grid a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px; background: var(--card); border: 1.5px solid var(--ink); color: var(--ink); text-decoration: none; transition: transform 0.12s, box-shadow 0.12s; }
.next-grid a:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow); }
.next-k { font: 600 0.66rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.06em; color: var(--port); }
.next-t { font: 620 1.12rem/1.2 var(--font-d); letter-spacing: -0.02em; }
.loc-zh .next-t, .loc-ja .next-t { font-weight: 800; letter-spacing: 0; }
.next-l { font-size: 0.86rem; color: var(--ink-2); line-height: 1.45; }
@media (max-width: 860px) { .next-grid { grid-template-columns: 1fr; } }

/* footer */
.foot { background: var(--ink); color: #dfe7e2; padding: 56px 0 24px; position: relative; }
@media (prefers-color-scheme: dark) { .foot { background: #070a09; } }
.foot::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-linear-gradient(90deg, var(--taxi) 0 60px, #15201c 60px 66px); }
.foot a { color: #dfe7e2; text-decoration: none; }
.foot a:hover { color: var(--taxi); text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.foot .brand { color: #fff; }
.foot-brand p { font-size: 0.9rem; color: #aebcb5; max-width: 30ch; }
.f-h { font: 600 0.66rem/1.3 var(--font-m); text-transform: uppercase; letter-spacing: 0.07em; color: var(--taxi); margin: 0 0 12px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 0.9rem; }
.foot-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid #34443e; font-size: 0.78rem; color: #9fb0a8; line-height: 1.55; }
.foot-legal p { margin: 0 0 8px; max-width: 100ch; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }

/* mobile booking bar */
.mobar { display: none; }
@media (max-width: 760px) {
  .mobar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1.5px solid var(--ink); }
  body { padding-bottom: 68px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print { .topbar, .masthead, .mobar, .book, .rail, .next { display: none; } }
.loc-ja h1, .loc-ja .prose h2, .loc-zh h1 { word-break: auto-phrase; line-break: strict; }