@charset "UTF-8";
/* Away Chapter public site. Ticket direction (v2, 2026-10-15).
   Tokens live in the :root blocks below; components read only these names.
   Reference: westjr.co.jp via Dembrandt 0.36.0, recorded in redesign/2026-10-12/README.md. */

/* Tokens */
:root {
  color-scheme: light dark;
  --paper: #f6f7f6;
  --paper-raised: #fdfdfc;
  --stock: #e6edf2;
  --stub: #10263d;
  --on-stub: #f3f6f9;
  --on-stub-muted: #a9bacb;
  --ink: #111417;
  --ink-2: #3c434a;
  --ink-3: #636b73;
  --rule: #d8dcde;
  --rule-strong: #111417;
  --accent: #0b5aa6;
  --accent-hover: #084682;
  --on-accent: #ffffff;
  --focus: #0b5aa6;

  --font: 'Wanted Sans Variable', 'Wanted Sans', 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --text-xs: 12.5px;
  --text-sm: 14.5px;
  --text-base: 18px;
  --text-lede: 20px;
  --text-h3: 21px;
  --text-h2: 30px;
  --text-ticket: 30px;
  --text-display: clamp(44px, 6.4vw, 96px);
  --text-title: clamp(36px, 4.8vw, 66px);
  --leading-body: 1.85;
  --leading-heading: 1.22;
  --tracking-display: -0.04em;
  --tracking-heading: -0.03em;
  --tracking-label: 0.08em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-strong: 700;
  --weight-display: 800;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;
  --s12: 48px; --s14: 56px; --s16: 64px; --s20: 80px; --s24: 96px; --s28: 112px;

  --container: 1240px;
  --gutter: 48px;
  --measure: 46rem;
  --wide: 60rem;
  --masthead: 72px;
  --stub-width: 220px;
  --notch: 11px;

  --radius-sm: 3px;
  --radius: 6px;
  --shadow-ticket: drop-shadow(0 1px 1px rgb(17 20 23 / 0.06)) drop-shadow(0 18px 28px rgb(16 38 61 / 0.12));
  --shadow-menu: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 24px rgb(0 0 0 / 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-issue: 900ms;
}

/* Photo attribution sits at the page end, separated from scene captions. */
.photo-credits {
  width: min(calc(100% - 40px), var(--measure));
  margin: var(--s10) auto var(--s12);
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: var(--text-xs);
  line-height: 1.65;
}
.photo-credits > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 44px;
  padding-block: var(--s2);
  color: var(--ink-2);
  cursor: pointer;
  list-style: none;
}
.photo-credits > summary::-webkit-details-marker { display: none; }
.photo-credits > summary::after { content: '+'; color: var(--ink-3); font-size: 18px; line-height: 1; }
.photo-credits[open] > summary::after { content: '−'; }
.photo-credits-list { display: grid; gap: var(--s3); margin: 0; padding: 0 0 var(--s4); list-style: none; }
.photo-credit-item { padding-top: var(--s2); }
.photo-credit-scene { color: var(--ink-2); }
.photo-credit-meta { margin-top: var(--s1); }
.photo-credit-meta a { color: var(--ink-2); text-decoration-color: var(--rule); text-underline-offset: 2px; }
.photo-credit-meta a:hover { color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1317;
    --paper-raised: #151a1f;
    --stock: #1a2531;
    --stub: #dbe6f1;
    --on-stub: #0f1d2c;
    --on-stub-muted: #4c6178;
    --ink: #eef1f2;
    --ink-2: #bcc3c9;
    --ink-3: #8f989f;
    --rule: #283037;
    --rule-strong: #eef1f2;
    --accent: #79b4ee;
    --accent-hover: #a3cbf3;
    --on-accent: #0b1a29;
    --focus: #79b4ee;
    --shadow-ticket: drop-shadow(0 1px 1px rgb(0 0 0 / 0.4)) drop-shadow(0 18px 28px rgb(0 0 0 / 0.35));
    --shadow-menu: 0 1px 2px rgb(0 0 0 / 0.4), 0 10px 24px rgb(0 0 0 / 0.4);
  }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --text-base: 17px; --text-lede: 18px; --text-h2: 26px; --text-ticket: 24px; --masthead: 60px; }
}
:lang(ja) { --font: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', Meiryo, system-ui, sans-serif; }
:lang(zh-CN) { --font: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif; }
:lang(ko) .stop-en, :lang(ja) .stop-en, :lang(zh-CN) .stop-en { font-family: 'Wanted Sans Variable', 'Wanted Sans', -apple-system, system-ui, sans-serif; }

/* Base and browser surfaces */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--masthead) + 24px); scrollbar-color: var(--ink-3) var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--weight-regular) var(--text-base) / var(--leading-body) var(--font); word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased; caret-color: var(--accent); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; }
:lang(ja) :is(h1, h2, h3, .title-sub, .ticket-sub) { word-break: auto-phrase; }
img { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.28em; transition: color var(--dur-fast); }
a:hover { color: var(--accent-hover); }
strong { font-weight: var(--weight-strong); }
time, dd, table { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nowrap { white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); }
.skip-link:focus, .skip-link:hover { top: 12px; color: var(--paper); }

/* Drawn arrow, matched to the ticket's route line */
.arrow { position: relative; display: inline-block; flex: none; width: 14px; height: 1px; margin-left: var(--s2); vertical-align: 0.32em; background: currentColor; transition: transform var(--dur) var(--ease-out); }
.arrow::after { content: ''; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
a:hover .arrow { transform: translateX(3px); }

.site-header-inner, .site-footer-inner, .site-main > *, .article > *, .info-main { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }

/* Masthead */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--rule); }
.site-header-inner { display: flex; align-items: center; gap: var(--s8); height: var(--masthead); }
.brand { white-space: nowrap; color: var(--ink); font-size: 20px; font-weight: var(--weight-display); letter-spacing: -0.045em; text-decoration: none; font-family: 'Wanted Sans Variable', 'Wanted Sans', -apple-system, system-ui, sans-serif; }
.brand:hover { color: var(--ink); }
.header-controls { display: flex; align-items: center; gap: var(--s8); margin-left: auto; }
.primary-nav { display: flex; gap: var(--s6); }
.primary-nav a { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
.primary-nav a:hover { color: var(--ink); }
.language-menu { position: relative; font-size: var(--text-sm); }
.language-menu summary { white-space: nowrap; display: flex; align-items: center; min-height: 44px; color: var(--ink-2); font-weight: var(--weight-medium); cursor: pointer; list-style: none; }
.language-menu summary::-webkit-details-marker { display: none; }
.language-menu summary::after { content: ''; width: 6px; height: 6px; margin: -3px 0 0 var(--s2); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
.language-menu summary:hover { color: var(--ink); }
.language-menu nav { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; min-width: 180px; padding: var(--s2) 0; background: var(--paper-raised); border-radius: var(--radius); box-shadow: var(--shadow-menu); }
.language-menu nav a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--s4); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.language-menu nav a:hover { background: var(--paper); color: var(--ink); }
.language-menu nav a[aria-current] { color: var(--ink); font-weight: var(--weight-strong); }

/* Ticket. Notches are real cut-outs (mask), so the drop shadow follows them. */
.ticket-wrap { filter: var(--shadow-ticket); }
.ticket { --cut: calc(100% - var(--stub-width)); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub-width); border-radius: var(--radius);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle at var(--cut) 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat, radial-gradient(circle at var(--cut) 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat; }
.ticket::after { content: ''; position: absolute; top: calc(var(--notch) + 6px); bottom: calc(var(--notch) + 6px); left: calc(var(--cut) - 1px); width: 2px; background: radial-gradient(circle, var(--paper) 1.1px, #0000 1.5px) center top / 2px 7px repeat-y; }
.ticket-main { position: relative; display: flex; flex-direction: column; gap: var(--s5); padding: var(--s8) var(--s10) var(--s10); overflow: hidden; background: url("/assets/ticket-print.svg") 0 0 / 240px 60px, var(--stock); color: var(--ink); }
.ticket-top { display: flex; justify-content: space-between; gap: var(--s4); font-size: var(--text-xs); color: var(--ink-3); }
.issuer { font-weight: var(--weight-strong); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-2); }
.route { display: flex; align-items: flex-end; gap: var(--s5); }
.stop { display: grid; }
.stop-label { font-size: var(--text-xs); color: var(--ink-3); }
.stop-name { font-size: 24px; font-weight: var(--weight-strong); letter-spacing: -0.02em; line-height: 1.25; }
.stop-en { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-3); }
.route-line { position: relative; flex: 1; max-width: 220px; height: 1px; margin-bottom: 26px; background: var(--ink); }
.route-line::after { content: ''; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); transform: rotate(45deg); }
.ticket-title { font-size: var(--text-ticket); font-weight: var(--weight-display); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.ticket-title a { color: var(--ink); text-decoration: none; }
.ticket-sub { display: block; font-weight: var(--weight-regular); color: var(--ink-2); }
.ticket-title a:hover .ticket-sub { color: var(--accent); }
.ticket-text { max-width: 44em; font-size: var(--text-sm); line-height: 1.75; color: var(--ink-2); }
.fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 640px; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule-strong); }
.fields dt { font-size: var(--text-xs); color: var(--ink-3); }
.fields dd { font-weight: var(--weight-strong); line-height: 1.45; }
.microtext { position: absolute; left: var(--s10); right: var(--s10); bottom: 10px; overflow: hidden; white-space: nowrap; font-size: 6.5px; font-weight: var(--weight-medium); letter-spacing: 0.12em; color: var(--ink-3); opacity: 0.55; }
.stub { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s6); padding: var(--s8) var(--s6); background: var(--stub); color: var(--on-stub); text-decoration: none; }
.stub-fields { display: grid; gap: var(--s5); }
.stub-field { display: grid; }
.stub-field + .stub-field { padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--on-stub) 18%, transparent); }
.stub-label { font-size: var(--text-xs); color: var(--on-stub-muted); }
.stub-value { font-size: 26px; font-weight: var(--weight-strong); letter-spacing: -0.03em; line-height: 1.3; overflow-wrap: anywhere; hyphens: auto; }
.stub-field + .stub-field .stub-value { font-size: 22px; }
.stub-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid color-mix(in srgb, var(--on-stub) 30%, transparent); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.stub-note { font-size: var(--text-xs); color: var(--on-stub-muted); }
a.stub:hover { color: var(--on-stub); }
.stub:focus-visible { outline-color: var(--on-stub); outline-offset: -6px; }
@media (prefers-reduced-motion: no-preference) {
  .ticket-wrap { animation: issue var(--dur-issue) var(--ease-out) 120ms both; }
  @keyframes issue { from { transform: translateY(20px) rotate(-0.7deg); } }
}

/* Home */
.hero { padding-block: var(--s20) var(--s16); }
.hero h1 { max-width: 11em; font-size: var(--text-display); font-weight: var(--weight-display); line-height: 1.04; letter-spacing: var(--tracking-display); }
.hero-copy p { max-width: 26em; margin-top: var(--s6); font-size: var(--text-lede); color: var(--ink-2); }
.hero .ticket-wrap { margin-top: var(--s14); }

.decide { padding-block: var(--s24); }
.decide-top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s12); align-items: end; }
.decide-top figure { justify-self: end; width: 100%; max-width: 800px; }
.decide-top img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); }
.decide h2, .places h2, .read h2, .feature-title { font-size: var(--text-h2); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.fare { margin-top: var(--s12); border-bottom: 1px solid var(--rule); }
.fare li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; gap: var(--s2) var(--s12); align-items: baseline; padding-block: var(--s6); border-top: 1px solid var(--rule); }
.fare li:first-child { border-top-color: var(--rule-strong); }
.fare h3 { font-size: 19px; font-weight: var(--weight-strong); letter-spacing: -0.02em; }
.fare p { max-width: 34em; line-height: 1.75; color: var(--ink-2); }
.more { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--text-sm); font-weight: var(--weight-strong); text-decoration: none; }
.fare .more { justify-self: end; }

figcaption { margin-top: var(--s3); font-size: var(--text-xs); line-height: 1.6; color: var(--ink-3); }
figcaption a { color: inherit; text-decoration-color: var(--rule); }
figcaption .credit { margin-left: var(--s2); }

.places { padding-block: var(--s8) var(--s24); }
.places-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--s12); align-items: start; margin-top: var(--s10); }
.place img { width: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.place-wide img { aspect-ratio: 16 / 10; }
.place-tall { margin-top: var(--s24); }
.place-tall img { aspect-ratio: 3 / 4; max-width: 380px; }
.place-copy { margin-top: var(--s6); max-width: 34em; }
.place h3 { font-size: var(--text-h3); font-weight: var(--weight-strong); letter-spacing: -0.02em; line-height: 1.4; }
.place h3 a { color: var(--ink); text-decoration: none; }
.place h3 a:hover { color: var(--accent); }
.place p { margin-top: var(--s2); color: var(--ink-2); }
.place .more { margin-top: var(--s2); }

.read { padding-block: 0 var(--s28); }
.tools { padding-block: 0 var(--s20); }
.tools h2 { font-size: var(--text-h2); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.tools .reading-row { margin-top: var(--s6); border-top-color: var(--rule-strong); }
.tool-text { font-size: var(--text-sm); color: var(--ink-2); }
.trips-link { margin-top: var(--s3); }
.trips-main > * { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.trips-head { padding-block: var(--s16) var(--s10); }
.trips-head h1 { font-size: var(--text-title); font-weight: var(--weight-display); line-height: 1.1; letter-spacing: var(--tracking-display); }
.trips-section { padding-block: var(--s6) var(--s16); }
.trips-section h2 { padding-top: var(--s4); border-top: 1px solid var(--rule-strong); font-size: var(--text-h2); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.trips-groups { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); margin-top: var(--s8); }
.trips-groups { align-items: start; row-gap: 0; }
.trips-group { border-top: 1px solid var(--rule-strong); scroll-margin-top: 80px; }
.trips-group h3 { font-size: var(--text-h3); font-weight: var(--weight-strong); }
.trips-group ul { list-style: none; margin: 0; padding: 0 0 var(--s6); }
.trips-group li { padding-block: var(--s3); border-top: 1px solid var(--rule); }
.trips-group a { display: block; font-weight: var(--weight-strong); color: var(--ink); text-decoration: none; }
.trips-group a:hover { color: var(--accent); }
.trips-meta { display: block; margin-top: var(--s1); font-size: var(--text-xs); color: var(--ink-3); }
.log { margin-top: var(--s8); border-bottom: 1px solid var(--rule); }
.log a { display: grid; grid-template-columns: 7rem minmax(0, 1fr) auto auto; gap: var(--s6); align-items: baseline; padding-block: var(--s6); border-top: 1px solid var(--rule-strong); color: var(--ink); text-decoration: none; }
.log time { font-size: var(--text-sm); color: var(--ink-3); }
.log-title { font-size: 19px; font-weight: var(--weight-strong); letter-spacing: -0.02em; }
.log-meta { font-size: var(--text-sm); color: var(--ink-3); }
.log a:hover .log-title { color: var(--accent); }

/* Home fallbacks: another featured topic, or no articles yet */
.home-intro { padding-block: var(--s20) var(--s12); }
.home-intro h1 { max-width: 11em; font-size: var(--text-display); font-weight: var(--weight-display); line-height: 1.04; letter-spacing: var(--tracking-display); }
.home-intro p { max-width: 26em; margin-top: var(--s6); font-size: var(--text-lede); color: var(--ink-2); }
.feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s12); align-items: end; padding-bottom: var(--s16); }
.feature img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.feature-copy { display: grid; gap: var(--s4); }
.feature-meta { font-size: var(--text-sm); color: var(--ink-3); }
.feature-title a { color: var(--ink); text-decoration: none; }
.feature-copy > p:not(.feature-meta) { color: var(--ink-2); }
.text-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--weight-strong); }
.home-section { padding-block: var(--s12); border-top: 1px solid var(--rule); }
.home-section h2 { font-size: var(--text-h2); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); }
.feature-sections { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin-top: var(--s6); }
.reading-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: var(--s6); align-items: baseline; padding-block: var(--s6); border-top: 1px solid var(--rule); }
.reading-row .place-label, .reading-row time { font-size: var(--text-sm); color: var(--ink-3); }
.reading-row h3 { font-size: 19px; }
.reading-row h3 a { color: var(--ink); text-decoration: none; }

/* Home index: title, destinations, recent guides. All guides page groups every guide by country. */
.home-index .home-hero { padding-block: var(--s16) var(--s10); }
.home-block { padding-block: var(--s10) var(--s16); border-top: 1px solid var(--rule-strong); }
.home-block h2 { font-size: var(--text-h2); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.home-block-lead { margin-top: var(--s2); font-size: var(--text-sm); color: var(--ink-3); }
.dest-grid { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s8) var(--s5); margin: var(--s8) 0 0; padding: 0; }
.dest-grid a { display: grid; gap: var(--s1); color: var(--ink); text-decoration: none; }
.dest-grid img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--s2); background: var(--rule); transition: opacity .2s; }
.dest-name { min-width: 0; font-size: 19px; font-weight: var(--weight-strong); letter-spacing: -0.02em; }
.dest-meta { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.dest-grid a:hover .dest-name { color: var(--accent); }
.dest-grid a:hover img, .card-grid a:hover img, .recent-lead-photo:hover img { opacity: .86; }
.home-block > .more { margin-top: var(--s8); }
.card-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s10) var(--s6); margin: var(--s4) 0 0; padding: var(--s8) 0 0; border-top: 1px solid var(--rule); }
.card-grid a { display: grid; gap: var(--s3); align-content: start; color: var(--ink); text-decoration: none; }
.card-grid img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-sm); background: var(--rule); transition: opacity .2s; }
.card-copy { display: grid; gap: var(--s1); }
.card-meta { font-size: var(--text-sm); color: var(--ink-3); }
.card-title { font-size: 18px; font-weight: var(--weight-strong); line-height: 1.4; letter-spacing: -0.02em; }
.card-grid a:hover .card-title { color: var(--accent); }
.recent-lead-photo { display: block; }
.recent-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s10); align-items: center; margin-top: var(--s8); padding-bottom: var(--s8); }
.recent-lead img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }
.recent-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--text-sm); color: var(--ink-3); }
.recent-lead h3 { margin-top: var(--s3); font-size: 26px; font-weight: var(--weight-display); line-height: 1.35; letter-spacing: var(--tracking-heading); }
.recent-lead h3 a { color: var(--ink); text-decoration: none; }
.recent-lead h3 a:hover { color: var(--accent); }
.recent-lead-copy > p:last-child { margin-top: var(--s3); color: var(--ink-2); }
.guides-main > * { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.guides-main { padding-bottom: var(--s20); }
.guides-head { padding-block: var(--s16) var(--s10); }
.guides-head h1 { font-size: var(--text-title); font-weight: var(--weight-display); line-height: 1.1; letter-spacing: var(--tracking-display); }
.guides-jump { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s8); font-size: var(--text-sm); }
.guides-jump a { color: var(--ink-2); text-decoration: none; }
.guides-jump a:hover { color: var(--accent); }
.guides-folds { border-bottom: 1px solid var(--rule-strong); }
.guides-country { border-top: 1px solid var(--rule-strong); scroll-margin-top: 80px; }
.guides-country > summary, .trips-group > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); padding-block: var(--s5); padding-right: var(--s8); position: relative; list-style: none; cursor: pointer; }
.guides-country > summary::-webkit-details-marker, .trips-group > summary::-webkit-details-marker { display: none; }
.guides-country > summary::after, .trips-group > summary::after { content: ""; position: absolute; right: var(--s2); top: 50%; width: 9px; height: 9px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-75%) rotate(45deg); transition: transform .2s; }
.guides-country[open] > summary::after, .trips-group[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.guides-country > summary:hover h2, .trips-group > summary:hover h3 { color: var(--accent); }
.guides-count { font-size: var(--text-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.guides-preview { flex-basis: 100%; font-size: var(--text-sm); color: var(--ink-3); }
.guides-country[open] .guides-preview { display: none; }
.guides-country > .guides-list, .guides-country > .guides-destinations { margin-top: 0; padding-bottom: var(--s8); }
.guides-country h2 { font-size: 24px; font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
.guides-destinations { display: grid; gap: var(--s6); margin-top: var(--s4); }
.guides-dest { scroll-margin-top: 80px; }
.guides-dest h3 { font-size: 17px; font-weight: var(--weight-strong); color: var(--ink-2); }
.guides-list { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.guides-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s1) var(--s6); align-items: baseline; padding-block: var(--s3); border-top: 1px solid var(--rule); }
.guides-list a { font-weight: var(--weight-strong); color: var(--ink); text-decoration: none; }
.guides-list a:hover { color: var(--accent); }
.guides-list time { font-size: var(--text-xs); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* About, privacy, 404 */
.info-main { max-width: var(--measure); padding-block: var(--s20) var(--s28); }
.info-main h1 { font-size: var(--text-title); font-weight: var(--weight-display); line-height: 1.12; letter-spacing: var(--tracking-display); margin-bottom: var(--s10); }
.info-main h2 { font-size: 24px; font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); margin: var(--s12) 0 var(--s4); }
.info-main p + p { margin-top: var(--s4); }
.info-main .return-link { margin-top: var(--s10); }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); }
.site-footer-inner { display: flex; justify-content: space-between; gap: var(--s8); padding-block: var(--s12) var(--s16); }
.site-footer p { margin-top: var(--s2); font-size: var(--text-sm); color: var(--ink-3); }
.site-footer nav { display: flex; gap: var(--s6); }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink-2); font-size: var(--text-sm); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }

/* Article */
.article > .article-head, .article > .lead-photo { max-width: 760px; }
.article-head { padding-block: var(--s16) var(--s12); }
.article-head h1 { max-width: 16em; font-size: var(--text-title); font-weight: var(--weight-display); line-height: 1.1; letter-spacing: var(--tracking-display); }
.title-sub { display: block; font-weight: var(--weight-regular); color: var(--ink-2); }
.lede { max-width: 34em; margin-top: var(--s6); font-size: var(--text-lede); line-height: 1.7; color: var(--ink-2); }
.article-meta { margin-top: var(--s6); color: var(--ink-2); font-size: var(--text-xs); }
.article-byline { margin-bottom: var(--s2); }
.article-facts { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
.article-facts > div { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.article-facts dt { color: var(--ink-3); }
.article-facts dd { margin: 0; overflow-wrap: anywhere; }
.lead-photo img { width: 100%; max-width: 800px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-sm); }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: var(--s16); padding-block: var(--s20) var(--s28); }
.toc { position: sticky; top: calc(var(--masthead) + var(--s8)); align-self: start; }
.toc-title { padding-bottom: var(--s3); font-size: var(--text-xs); color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); }
.toc a { display: flex; align-items: center; gap: var(--s3); min-height: 40px; color: var(--ink-3); font-size: var(--text-sm); text-decoration: none; transition: color var(--dur-fast); }
.toc a::before { content: ''; flex: none; width: 14px; height: 1.5px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); }
.toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); font-weight: var(--weight-strong); }
.toc a[aria-current]::before { transform: scaleX(1); }

/* Reading column: text at a reading measure, tables and cards wider up to the TOC. */
.article-body { min-width: 0; }
.article-body > :not(section), .article-body section > *, .hotel-editorial > *, .day-plan > * { max-width: var(--measure); margin-inline: auto; }
.article-body .table-wrap, .article-body .area-comparison, .article-body .punch-wrap, .article-body .route-alternative { max-width: var(--wide); }
.article-body figure { max-width: 800px; margin-block: var(--s8); }
.article-body figure img { width: 100%; border-radius: var(--radius-sm); }
.article-body .photo-umeda { max-width: 320px; }
.article-body p + p { margin-top: var(--s5); }
.article-intro { font-size: var(--text-lede); line-height: 1.75; }
.article-body section { margin-top: var(--s28); }
.article-body h2 { font-size: var(--text-h2); font-weight: var(--weight-display); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.article-body section > h2 + * { margin-top: var(--s6); }
.article-body section > p { margin-top: var(--s5); }
.article-body h3 { font-size: var(--text-h3); font-weight: var(--weight-strong); line-height: 1.4; letter-spacing: -0.02em; }

.table-scroll-hint { display: none; margin-top: var(--s8); font-size: var(--text-xs); color: var(--ink-3); }
.table-wrap { overflow-x: auto; margin-block: var(--s8); }
.table-scroll-hint + .table-wrap { margin-top: var(--s2); }
.table-wrap:focus-visible { outline-offset: 4px; }
.table-wrap table { min-width: 600px; font-size: 15px; line-height: 1.6; }
caption { padding-bottom: var(--s4); font-size: var(--text-xs); color: var(--ink-3); text-align: left; }
thead th { padding: 0 var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rule-strong); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-3); text-align: left; }
tbody th, tbody td { padding: var(--s4) var(--s4) var(--s4) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
tbody th { font-weight: var(--weight-strong); }

.area-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); margin-top: var(--s10); }
.area-comparison > div { padding-top: var(--s4); border-top: 1px solid var(--rule-strong); }
.area-comparison h3 { font-size: 18px; margin-bottom: var(--s2); }
.area-comparison p { font-size: var(--text-sm); line-height: 1.75; color: var(--ink-2); }

.hotel-editorial { margin-top: var(--s16); }
.hotel-location { font-size: var(--text-xs); color: var(--ink-3); }
.hotel-editorial h3 { margin: var(--s1) 0 var(--s4); font-size: 24px; }
.source-line { margin-top: var(--s5); font-size: var(--text-xs); line-height: 1.7; color: var(--ink-3); }
.source-line a { color: var(--ink-2); }
.booking-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); margin-top: var(--s6); }
.booking-links a { display: inline-flex; align-items: center; min-height: 46px; color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-strong); text-decoration: underline; text-decoration-color: var(--rule); }
.booking-links a:hover { text-decoration-color: var(--ink); color: var(--ink); }
.booking-links a:first-child { padding: 0 var(--s5); background: var(--ink); color: var(--paper); border-radius: var(--radius-sm); text-decoration: none; transition: background var(--dur-fast); }
.booking-links a:first-child:hover { background: var(--accent); color: var(--on-accent); }
.booking-links a:active { transform: translateY(1px); }

.day-plan { margin-top: var(--s16); padding-top: var(--s4); border-top: 1px solid var(--rule-strong); }
.day-number { display: block; font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--accent); }
.day-plan h3 { margin: var(--s2) 0 var(--s4); }
.route-alternative { margin-top: var(--s16); padding: var(--s8); background: var(--paper-raised); border: 1px solid var(--rule); border-radius: var(--radius); }
.route-alternative h3 { margin-bottom: var(--s4); }
.route-alternative p + p { margin-top: var(--s4); }

/* Stay picker on where-to-stay pages: radio answers filter the result list via :has(); with no answer every result stays visible. Lines and type only, no ticket motif. */
.stay-tool > * { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.stay-tool-head { padding-block: var(--s16) var(--s10); }
.stay-tool-head h1 { font-size: var(--text-title); font-weight: var(--weight-display); line-height: 1.1; letter-spacing: var(--tracking-display); }
.stay-tool .stay-picker { padding-top: var(--s4); border-top: 1px solid var(--rule-strong); }
.stay-tool .stay-picker > h2 { font-size: var(--text-h2); font-weight: var(--weight-display); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.stay-tool-body { padding-block: var(--s20) var(--s28); }
.stay-tool-body section + section { margin-top: var(--s20); }
.stay-tool-body h2 { font-size: var(--text-h2); font-weight: var(--weight-display); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.stay-tool-body h2 + * { margin-top: var(--s6); }
.stay-areas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10) var(--s8); }
.stay-area { padding-top: var(--s4); border-top: 1px solid var(--rule-strong); }
.stay-area figure { margin-bottom: var(--s4); }
.stay-area dl + figure { margin: var(--s4) 0 0; }
.stay-area figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.stay-area figcaption { margin-top: var(--s2); font-size: var(--text-xs); color: var(--ink-3); }
.stay-area h3 { font-size: var(--text-h3); font-weight: var(--weight-strong); }
.stay-area dl, .stay-party { margin: var(--s3) 0 0; }
.stay-area dt, .stay-party dt { margin-top: var(--s3); font-size: var(--text-xs); color: var(--ink-3); }
.stay-area dd, .stay-party dd { margin: 0; font-size: var(--text-sm); line-height: 1.75; color: var(--ink-2); }
.stay-tool-body > p, .stay-tool-body section > p { max-width: var(--measure); }
.stay-result p + p { margin-top: 0; }
.stay-picker-intro { margin-top: var(--s2); font-size: var(--text-sm); color: var(--ink-2); }
.stay-picker-questions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s8); margin-top: var(--s6); }
.stay-question { margin: 0; padding: 0; border: 0; min-width: 0; }
.stay-question legend { padding: 0; margin-bottom: var(--s2); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--ink-3); }
.stay-question label { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--rule); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
.stay-question label + label { margin-top: var(--s2); }
.stay-question label:has(:checked) { border-color: var(--accent); color: var(--accent); font-weight: var(--weight-strong); }
.stay-question input { accent-color: var(--accent); margin: 0; }
.stay-question label:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.stay-reset { grid-column: 1 / -1; justify-self: start; padding: 0; background: none; border: 0; font: inherit; font-size: var(--text-xs); color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.stay-results { list-style: none; margin: var(--s6) 0 0; padding: 0; }
.stay-result { display: grid; grid-template-columns: 13rem 1fr; gap: var(--s1) var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.stay-result:first-child { border-top: 1px solid var(--rule); }
.stay-condition { grid-row: span 3; font-size: var(--text-xs); color: var(--ink-3); }
.stay-pick { font-weight: var(--weight-strong); }
.stay-why { font-size: var(--text-sm); line-height: 1.75; color: var(--ink-2); }
.stay-result a { justify-self: start; font-size: var(--text-sm); color: var(--accent); }
.stay-picker:has(.q1 .o1:checked) .stay-result:not(.q1-1), .stay-picker:has(.q1 .o2:checked) .stay-result:not(.q1-2), .stay-picker:has(.q1 .o3:checked) .stay-result:not(.q1-3), .stay-picker:has(.q1 .o4:checked) .stay-result:not(.q1-4), .stay-picker:has(.q2 .o1:checked) .stay-result:not(.q2-1), .stay-picker:has(.q2 .o2:checked) .stay-result:not(.q2-2), .stay-picker:has(.q2 .o3:checked) .stay-result:not(.q2-3), .stay-picker:has(.q2 .o4:checked) .stay-result:not(.q2-4), .stay-picker:has(.q3 .o1:checked) .stay-result:not(.q3-1), .stay-picker:has(.q3 .o2:checked) .stay-result:not(.q3-2), .stay-picker:has(.q3 .o3:checked) .stay-result:not(.q3-3), .stay-picker:has(.q3 .o4:checked) .stay-result:not(.q3-4) { display: none; }

/* Punch card: the second ticket object. Checked items are punched through. */
.punch-wrap { margin-top: var(--s8); filter: var(--shadow-ticket); }
.punch-card { padding: var(--s6) var(--s8) var(--s4); background: url("/assets/ticket-print.svg") 0 0 / 240px 60px, var(--stock); border-radius: var(--radius);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; }
.punch-head { display: flex; justify-content: space-between; gap: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--rule-strong); font-size: var(--text-xs); }
.punch-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.punch-list li + li { border-top: 1px dashed color-mix(in srgb, var(--ink-3) 45%, transparent); }
.punch-list label { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s4); align-items: start; padding-block: var(--s4); cursor: pointer; }
.punch-list input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.punch-hole { width: 22px; height: 22px; margin-top: 4px; border-radius: 50%; border: 1.5px solid var(--accent); transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.punch-list label:hover .punch-hole { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.punch-list input:checked + .punch-hole { background: var(--paper); border-color: var(--paper); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.28); }
@media (prefers-reduced-motion: no-preference) {
  .punch-list input:checked + .punch-hole { animation: punch 260ms var(--ease-out); }
  @keyframes punch { 40% { transform: scale(0.82); } }
}
.punch-list input:focus-visible + .punch-hole { outline: 2px solid var(--focus); outline-offset: 3px; }
.punch-list input:checked ~ .punch-text { color: var(--ink-3); }
.punch-note { margin-top: var(--s4); font-size: var(--text-xs); color: var(--ink-3); }

@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .decide-top, .places-grid, .feature { grid-template-columns: 1fr; gap: var(--s10); }
  .place-tall { margin-top: 0; }
  .fare li { grid-template-columns: 1fr; }
  .fare .more { justify-self: start; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: var(--s6); }
  .site-header { position: static; }
  .site-header-inner { flex-wrap: wrap; height: auto; min-height: var(--masthead); gap: 0 var(--s4); padding-block: var(--s2); }
  .header-controls { flex-wrap: wrap; justify-content: flex-end; gap: 0 var(--s4); }
  .primary-nav { flex-wrap: wrap; gap: 0 var(--s4); }
  .hero { padding-block: var(--s12) var(--s10); }
  .hero .ticket-wrap { margin-top: var(--s10); }
  /* Stacked ticket: each half carries its own notch, so the stub can grow with long labels. */
  .ticket, .article-head .ticket { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .ticket::after { display: none; }
  .ticket-main { border-radius: var(--radius) var(--radius) 0 0;
    -webkit-mask: radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; }
  .stub { position: relative; border-radius: 0 0 var(--radius) var(--radius);
    -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat;
            mask: radial-gradient(circle at 0 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--notch), #000 calc(var(--notch) + 0.5px)) right / 51% 100% no-repeat; }
  .stub::before { content: ''; position: absolute; top: -1px; left: calc(var(--notch) + 6px); right: calc(var(--notch) + 6px); height: 2px; background: radial-gradient(circle, var(--paper) 1.1px, #0000 1.5px) left center / 7px 2px repeat-x; }
  .ticket-main { padding: var(--s6) var(--s5) var(--s8); gap: var(--s4); }
  .route { gap: var(--s3); }
  .stop-name { font-size: 18px; }
  .route-line { min-width: 24px; }
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stub { flex-direction: row; align-items: center; min-height: 84px; padding: var(--s4) var(--s5); }
  .stub-cta { text-align: end; }
  .stub-fields { min-width: 0; }
  .stub-value { font-size: 22px; white-space: normal; }
  .stub-field + .stub-field { display: none; }
  .stub-cta { padding-top: 0; border-top: 0; }
  .microtext { left: var(--s5); right: var(--s5); }
  .log a, .reading-row { grid-template-columns: 1fr; gap: var(--s1); }
  .log a > .arrow { display: none; }
  .area-comparison { grid-template-columns: 1fr; }
  .stay-picker-questions { grid-template-columns: 1fr; gap: var(--s6); }
  .stay-areas { grid-template-columns: 1fr; }
  .trips-groups { grid-template-columns: 1fr; }
  .recent-lead, .guides-list li { grid-template-columns: 1fr; }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
  .card-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .card-grid a { grid-template-columns: 112px minmax(0, 1fr); gap: var(--s4); align-items: center; }
  .card-grid img { aspect-ratio: 1; }
  .card-title { font-size: 16px; }
  .recent-lead { gap: var(--s5); }
  .recent-lead h3 { font-size: 22px; }
  .stay-result { grid-template-columns: 1fr; gap: var(--s1); }
  .stay-condition { grid-row: auto; }
  .table-scroll-hint { display: block; }
  .site-footer-inner { flex-direction: column; }
  .punch-card { padding-inline: var(--s5); }
  .route-alternative { padding: var(--s6) var(--s5); }
}