/* Edition II — preserve the supplied ink atlas, improve its reading surface. */
@font-face {
  font-family: 'Atlas WenKai';
  src: url('assets/fonts/wenkai-subset.woff2') format('woff2');
  font-display: swap;
  font-weight: 100 900;
}
:root { --ink: #242424; --muted: #656565; --paper: #fafafa; --line: #c7c7c7; }
html { color-scheme: light; }
body { font-family: 'Atlas WenKai', 'Noto Serif SC', 'Songti SC', serif; }
button, input { font-family: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #202020;
  outline-offset: 4px;
}
button:disabled { opacity: .4; cursor: default; }
.topbar { padding-inline: 26px; background: #fafafa; }
.brand { font-size: 17px; }
.brand small { font-family: Georgia, serif; font-size: 9px; }
.header-actions .textbutton, .header-actions .outlinebutton { min-height: 44px; font-size: 13px; }
.sidebar { width: 290px; padding: 26px 24px 16px; }
.sidebar h1 { font-family: 'Atlas WenKai', 'Songti SC', serif; font-weight: 400; font-size: 44px; letter-spacing: 3px; }
.sidebar h1 span { font-size: 13px; }
.eyebrow { font-family: Georgia, serif; font-size: 9px; }
.intro { font-size: 12px; line-height: 1.95; margin-block: 20px; }
.statrow span { font-size: 11px; }
.journeyheading h2, .small-link { font-size: 13px; }
.phase-button { min-height: 58px; gap: 12px; padding-block: 10px; }
.phase-number { font-family: Georgia, serif; font-size: 19px; width: 29px; min-width: 29px; height: 29px; line-height: 27px; }
.phase-button b { font-size: 14px; font-weight: 500; }
.phase-button small { font-size: 10px; line-height: 1.8; }
.itinerary-link { min-height: 64px; }
.itinerary-link b { font-size: 13px; }
.itinerary-link small { font-size: 10px; }
.sidebar-bottom p { font-size: 10px; line-height: 1.8; }
.sidebar-bottom button { width: 36px; height: 36px; }
.map-stage { background: #dddddd; }
.map-title { min-height: 44px; padding: 10px 14px; }
.map-title b { font-size: 13px; }
#phase-ref { font-size: 11px; }
.view-controls button { min-width: 44px; min-height: 38px; font-size: 12px; padding: 8px 11px; }
.map-note { pointer-events: none; }
.map-note > span:nth-child(2) { font-size: 13px; line-height: 1.9; }
.map-note small { font-size: 9px; }
.map-tools { bottom: 125px; }
.map-tools button { width: 40px; height: 40px; }
.map-marker .pin-label { font: 13px 'Atlas WenKai', serif; color: #242424; text-shadow: 0 1px 3px white, 0 -1px 3px white, 1px 0 3px white; }
.map-marker .pin-label small { font: 9px Georgia, serif; letter-spacing: .2px; color: #626262; }
.map-marker.selected .pin-label { font-size: 16px; font-weight: 500; }
.map-marker.selected .pin-dot { animation: ink-pulse 3s ease-out infinite; }
.map-marker:focus { outline: none; }
.map-marker:focus-visible .pin-dot { outline: 2px solid #111; outline-offset: 6px; }
.route-main.route-migration { stroke: #242424; stroke-width: 2.4; stroke-dasharray: 9 8; opacity: .85; }
.route-main.route-campaign { stroke: #636363; stroke-width: 1.8; stroke-dasharray: 2 6; opacity: .72; }
.route-main.route-scout { stroke: #454545; stroke-width: 2; stroke-dasharray: 15 5 3 5; opacity: .8; }
.route-main.route-recap { stroke: #777777; stroke-width: 2; stroke-dasharray: 4 9; opacity: .8; }
.map-legend { left: 76px; bottom: 125px; gap: 9px; max-width: 262px; padding: 12px 14px; }
.map-legend div, .map-legend label { font-size: 11px; line-height: 1.55; }
.map-legend label { min-height: 25px; align-items: center; cursor: pointer; }
.map-legend small { font-size: 9px; line-height: 1.7; }
.legend-line { width: 27px; height: 0; border-top: 2px dashed #242424; background: none !important; }
.legend-line.campaign { border-top: 2px dotted #636363; }
.legend-line.scout { height: 2px; border: 0; background: repeating-linear-gradient(90deg,#454545 0 12px,transparent 12px 16px,#454545 16px 18px,transparent 18px 22px) !important; }
.legend-line.recap { border-top: 1px dashed #777; }
.detail-card { width: 340px; top: 88px; max-height: calc(100% - 216px); right: 22px; background: #fcfcfc; transition: width .25s ease, max-height .25s ease; }
.detail-cover { height: 92px; min-height: 92px; }
.detail-close { width: 36px; height: 36px; top: 7px; right: 8px; font-size: 24px; line-height: 30px; }
.detail-scroll { padding: 20px 22px 17px; overscroll-behavior: contain; }
.place-category { font-size: 10px; letter-spacing: 1px; }
.place-name { font-family: 'Atlas WenKai', serif; font-size: 33px; font-weight: 500; letter-spacing: 1px; }
.place-en { font-family: Georgia, serif; font-size: 12px; line-height: 1.5; }
.place-summary { color: #414141; font-size: 14px; line-height: 1.9; }
.detail-actions { display: flex; gap: 8px; margin-block: 14px 6px; }
.detail-actions button { min-height: 38px; border: 1px solid #c4c4c4; border-radius: 3px 7px 3px 5px; padding: 7px 12px; background: transparent; color: #333; font-size: 12px; }
.detail-actions button:hover, .detail-actions button[aria-pressed='true'] { color: #fafafa; background: #303030; border-color: #303030; }
.detail-tabs { gap: 25px; }
.detail-tabs button { min-height: 44px; font-size: 13px; }
.ref-picker { gap: 6px; padding-top: 13px; }
.ref-picker button { min-height: 33px; font-size: 11px; padding: 7px 8px; }
.verse-box { border-left: 1px solid #aaa; padding-left: 12px; }
.verse-box p { font-family: 'Atlas WenKai','Songti SC',serif; font-size: 15px; line-height: 2.05; color: #303030; margin-bottom: 12px; }
.verse-box sup { color: #888; font-size: 10px; margin-right: 8px; }
.version-note { font-size: 10px; line-height: 1.9; color: #717171; }
.geo-pill { font-size: 12px; line-height: 1.7; padding: 9px 10px; }
.geo-text { font-size: 14px; line-height: 1.95; color: #414141; }
.source-links a { font-size: 12px; line-height: 1.7; padding-block: 9px; }
.detail-footer { font-size: 10px; gap: 8px; margin-top: 15px; }
.detail-footer button { min-height: 38px; font-size: 12px; padding-inline: 4px; }
.detail-card.is-reading { width: min(530px, calc(100% - 125px)); top: 78px; max-height: calc(100% - 191px); box-shadow: 6px 7px 0 #2222,0 20px 80px #2222; }
.detail-card.is-reading .detail-scroll { padding: 23px 29px; }
.detail-card.is-reading .verse-box p { font-size: 18px; line-height: 2.15; }
.detail-card.is-reading .place-summary { font-size: 15px; }
.journey-dock { min-height: 76px; bottom: 24px; padding: 12px 16px; }
.dock-label { min-width: 145px; }
.dock-label > span { font-size: 9px; }
.dock-label b { font-size: 12px; }
.dock-stops { scroll-behavior: smooth; scrollbar-width: none; }
.dock-stop { min-height: 46px; min-width: 64px; font-size: 12px; }
.play-button { min-width: 42px; min-height: 42px; }
.search-box { width: min(420px,calc(100% - 32px)); border: 1px solid #444; box-shadow: 4px 5px 0 #2222; }
.search-box label { font-size: 14px; }
.search-input input { font-size: 16px; min-height: 44px; }
.search-input button { min-width: 40px; min-height: 40px; }
.search-result { min-height: 52px; padding: 12px 9px; }
.search-result > span { font-size: 15px; }
.search-result > small { font-size: 11px; }
.empty-result { font-size: 13px; line-height: 1.8; }
dialog { max-height: 86dvh; scrollbar-width: thin; }
dialog h2 { font-family: 'Atlas WenKai', serif; font-size: 34px; }
.dialog-close { min-width: 44px; min-height: 44px; font-size: 27px; }
.dialog-intro { font-size: 15px; line-height: 1.9; }
.guide-grid b { font-size: 15px; }
.guide-grid p { font-size: 13px; line-height: 1.95; }
.guide-source { font-size: 12px; line-height: 1.9; }
.guide-source a { font-size: 14px; }
.fineprint { font-size: 12px; line-height: 1.9; }
.station-row { min-height: 65px; }
.station-row b { font-size: 16px; }
.station-row small, .station-status { font-size: 12px; line-height: 1.7; }
.station-index { font-size: 20px; }
.itinerary-note { font-size: 13px; line-height: 1.85; }
#toast { z-index: 3000; font-size: 14px; line-height: 1.7; max-width: min(390px,calc(100vw - 32px)); padding: 13px 19px; }
@keyframes ink-pulse { 0% { box-shadow: 0 0 0 0 #20202055; } 80%,100% { box-shadow: 0 0 0 13px #20202000; } }
@media (max-width:1200px) and (min-width:901px) {
  .sidebar { width: 260px; padding-inline: 19px; }
  .sidebar h1 { font-size: 39px; }
  .detail-card { width: 306px; right: 15px; }
  .detail-scroll { padding-inline: 18px; }
  .map-note { display: none; }
  .map-legend { max-width: 218px; left: 66px; }
  .dock-label { display: none; }
}
@media (max-height:820px) and (min-width:901px) {
  .sidebar { padding-top: 17px; }
  .sidebar h1 { font-size: 36px; margin-block: 7px; }
  .intro { margin-block: 12px; }
  .phase-button { min-height: 51px; padding-block: 7px; }
  .statrow { margin-bottom: 18px; }
  .detail-cover { height: 65px; min-height: 65px; }
  .detail-scroll { padding: 16px 20px; }
  .detail-card { max-height: calc(100% - 204px); top: 78px; }
}
@media (max-width:900px) {
  .topbar { height: 64px; padding-inline: 16px; }
  .header-actions { gap: 12px; }
  .header-actions .textbutton { font-size: 0; min-width: 44px; }
  .header-actions .outlinebutton { font-size: 12px; }
  .sidebar { width: 100%; padding: 13px 16px 9px; }
  .sidebar h1 { font-size: 28px; margin: 0 0 10px; }
  .sidebar h1 span { font-size: 11px; }
  .phase-list { padding-right: 37px; gap: 8px; }
  .phase-button { min-height: 42px; padding: 7px 9px; gap: 6px; }
  .phase-button b { font-size: 12px; white-space: nowrap; }
  .phase-number { font-size: 12px; width: 22px; min-width: 22px; height: 22px; line-height: 20px; }
  .itinerary-link { min-height: 42px; min-width: 37px; top: 49px; right: 7px; }
  .map-note { display: none; }
  .map-top { top: 12px; left: 12px; right: 12px; }
  .map-title { min-height: 42px; padding: 7px 10px; }
  .map-title b { font-size: 12px; }
  #phase-ref { font-size: 10px; }
  .view-controls button { min-height: 35px; min-width: 37px; font-size: 11px; padding-inline: 7px; }
  .detail-card { width: 320px; top: 70px; max-height: calc(100% - 182px); right: 12px; }
  .detail-cover { height: 58px; min-height: 58px; }
  .detail-scroll { padding: 16px 18px; }
  .place-name { font-size: 29px; }
  .detail-card.is-reading { top: 64px; max-height: calc(100% - 170px); }
  .map-legend { bottom: 115px; }
  .map-tools { bottom: 118px; }
  .journey-dock { bottom: 22px; min-height: 70px; height: auto; }
  .dock-label { display: none; }
  .dock-stop { font-size: 11px; min-width: 61px; }
}
@media (max-width:580px) {
  .brand { font-size: 15px; letter-spacing: 2px; }
  .brandmark { font-size: 30px; }
  .brand small { font-size: 8px; }
  .header-actions { gap: 5px; }
  .topbar .outlinebutton { padding: 7px 10px; }
  .sidebar { padding: 11px 12px 8px; }
  .sidebar h1 { font-size: 27px; margin-bottom: 8px; }
  .sidebar h1 span { font-size: 10px; margin-left: 10px; }
  .phase-button { padding: 7px 8px; }
  .phase-button b { font-size: 11px; }
  .itinerary-link { top: 46px; }
  .map-title { gap: 5px; }
  #phase-ref { font-size: 9px; }
  .detail-card { top: auto; bottom: 103px; left: 13px; right: 13px; width: auto; max-height: 48%; }
  .detail-cover { height: 35px; min-height: 35px; }
  .detail-close { height: 34px; width: 36px; top: 0; right: 4px; }
  .detail-cover .cover-coord { font-size: 8px; right: 46px; bottom: 12px; }
  .detail-scroll { padding: 15px 17px; }
  .place-category { font-size: 10px; }
  .place-name { font-size: 29px; margin-block: 7px 3px; }
  .place-en { font-size: 11px; }
  .place-summary { font-size: 14px; line-height: 1.9; }
  .detail-tabs button { font-size: 13px; }
  .ref-picker button { min-height: 35px; font-size: 11px; }
  .verse-box p { font-size: 15px; }
  .version-note { font-size: 10px; }
  .detail-actions { margin-block: 11px 5px; }
  .detail-actions button { min-height: 38px; font-size: 12px; }
  .detail-card.is-reading { width: auto; top: 64px; bottom: 103px; max-height: none; left: 12px; right: 12px; }
  .detail-card.is-reading .detail-scroll { padding: 17px 20px; }
  .detail-card.is-reading .verse-box p { font-size: 17px; }
  .map-tools { left: 12px; bottom: 118px; }
  .map-tools button { width: 37px; height: 40px; }
  .map-legend.is-open { top: 64px; right: 12px; max-width: calc(100% - 24px); bottom: auto; }
  .map-legend.is-open div,.map-legend.is-open label { font-size: 12px; }
  .map-legend.is-open label { min-height: 34px; }
  .map-legend.is-open small { font-size: 11px; }
  .journey-dock { left: 12px; right: 12px; gap: 9px; padding: 9px 11px; }
  .play-button { width: 40px; height: 40px; }
  .pin-label small { display: none; }
  .map-marker .pin-label { font-size: 11px; }
  .map-marker.selected .pin-label { font-size: 14px; }
  .search-box { top: 66px; left: 12px; max-height: calc(100% - 83px); }
  dialog { padding: 28px 21px; max-width: calc(100% - 26px); }
  dialog h2 { font-size: 29px; }
  .station-row { padding-block: 13px; gap: 9px; }
  .station-row b { font-size: 15px; }
  .station-row small { font-size: 11px; }
  .station-status { font-size: 10px; max-width: 78px; }
  .guide-grid { grid-template-columns: 1fr; gap: 16px; }
  .guide-grid p { font-size: 13px; }
  .guide-actions { gap: 13px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .sidebar { padding: 5px 12px; }
  .sidebar h1 { display: none; }
  .phase-button { min-height: 35px; padding-block: 5px; }
  .itinerary-link { top: 5px; }
  .detail-card { top: 55px; bottom: 77px; max-height: none; width: 310px; left: auto; }
  .detail-cover { display: none; }
  .detail-card.is-reading { top: 55px; bottom: 77px; left: auto; width: min(500px,calc(100% - 80px)); }
  .detail-scroll { padding-block: 12px; }
  .journey-dock { min-height: 53px; bottom: 18px; }
  .map-tools { bottom: 83px; }
  .map-tools button { height: 30px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}