/* Layout: practical route guide. Sticky top nav, reading column + fixed sidebar on desktop, stacked on mobile.
   Display face: Barlow Condensed (road-sign / race-number feel) for headings and numbers.
   Body: Noto Sans + Noto Sans TC so the Chinese place names render in a matching face. */
:root{
  --bg:#ffffff; --surface:#ffffff; --soft:#eef0eb; --ink:#18201a; --muted:#5a665d; --line:#d9ddd4;
  --A:#c43f2f; --B:#2d64a5; --C:#287a4b;
  --k-harder-bg:#f8e1dc; --k-harder:#9a2f22;
  --k-easier-bg:#dcefe2; --k-easier:#22663f;
  --k-shortcut-bg:#dde8f6; --k-shortcut:#24508a;
  --k-addition-bg:#ebe2f5; --k-addition:#62378f;
  --k-alternative-bg:#f6ecd2; --k-alternative:#7a5a12;
  --warn-bg:#fbf3dc; --warn-line:#e3c66f;
  --ph1:#eceee8; --ph2:#e4e7e0;
  --f-display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-body:"Noto Sans","Noto Sans TC",system-ui,-apple-system,"Segoe UI",sans-serif;
  --maxw:1180px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121613; --surface:#1a1f1b; --soft:#232a25; --ink:#e7ebe5; --muted:#9ca79f; --line:#2f3731;
  --A:#ea6b5b; --B:#6b9de2; --C:#5bb883;
  --k-harder-bg:#3a201c; --k-harder:#f2a497;
  --k-easier-bg:#1c3326; --k-easier:#95d5ad;
  --k-shortcut-bg:#1c2a3d; --k-shortcut:#a2c3ee;
  --k-addition-bg:#2c2238; --k-addition:#cdb2ec;
  --k-alternative-bg:#352c14; --k-alternative:#e6c977;
  --warn-bg:#2f2a17; --warn-line:#7a6526;
  --ph1:#20261f; --ph2:#262d26;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#121613; --surface:#1a1f1b; --soft:#232a25; --ink:#e7ebe5; --muted:#9ca79f; --line:#2f3731;
  --A:#ea6b5b; --B:#6b9de2; --C:#5bb883;
  --k-harder-bg:#3a201c; --k-harder:#f2a497;
  --k-easier-bg:#1c3326; --k-easier:#95d5ad;
  --k-shortcut-bg:#1c2a3d; --k-shortcut:#a2c3ee;
  --k-addition-bg:#2c2238; --k-addition:#cdb2ec;
  --k-alternative-bg:#352c14; --k-alternative:#e6c977;
  --warn-bg:#2f2a17; --warn-line:#7a6526;
  --ph1:#20261f; --ph2:#262d26;
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:16px/1.6 var(--f-body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--B);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:.005em;text-wrap:balance;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}

/* header */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;min-height:58px}
.brand{font-family:var(--f-display);font-weight:700;font-size:22px;text-decoration:none;margin-right:auto;white-space:nowrap;display:flex;align-items:baseline;gap:6px}
.brand span{font-family:var(--f-body);font-weight:400;font-size:15px;color:var(--muted)}
.nav{display:flex;gap:22px}
.nav a{text-decoration:none;font-size:15px;padding:18px 0 16px;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--line)}
.nav a.on{font-weight:700;border-bottom-color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink);font:600 14px var(--f-body);padding:6px 12px;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--surface);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:6px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
  .nav.open{display:flex}
  .nav a{padding:10px 0;border-bottom:1px solid var(--line)}
  .nav a.on{border-bottom-color:var(--line)}
}

main{padding-block:28px 64px;min-height:70vh}
.crumb{font-size:13px;color:var(--muted);margin-bottom:10px}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.page-title{font-size:clamp(34px,5vw,50px);line-height:1.05;margin:2px 0 8px}
.lede{font-size:18px;color:var(--muted);max-width:62ch;margin:0}
.section-title{font-size:26px;margin:44px 0 14px}
.sub-title{font-size:21px;margin:30px 0 8px}
.sub-title.small{font-size:18px;margin-top:22px}
.prose{max-width:68ch}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 16px;padding-left:20px}
.prose li{margin:4px 0}
.ext::after{content:"↗";font-size:.75em;margin-left:2px;color:var(--muted)}
.prose a,.tips a,.card-text a,.closure a{text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--muted)}
.prose a:hover{text-decoration-color:var(--ink)}

.tag{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;font:700 13px var(--f-display);letter-spacing:.03em;color:#fff;border-radius:4px;padding:0 6px;text-decoration:none}
.tag.A{background:var(--A)}.tag.B{background:var(--B)}.tag.C{background:var(--C)}
:root[data-theme="dark"] .tag,.tag{color:var(--surface)}
button.tag{border:0;cursor:pointer}
.tag.dim{opacity:.35}
.tags{display:inline-flex;gap:4px;vertical-align:middle}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:18px 0}
.stat{background:var(--soft);border-radius:10px;padding:10px 14px}
.stat b{display:block;font:700 28px/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.stat small{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
@media (max-width:560px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink);border-radius:8px;padding:8px 14px;font:600 14px var(--f-body);text-decoration:none;background:none;color:var(--ink);cursor:pointer}
.btn.solid{background:var(--ink);color:var(--surface)}
.btn.ghost{border-color:var(--line);color:var(--muted);cursor:default}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

.ph{background:repeating-linear-gradient(45deg,var(--ph1) 0 10px,var(--ph2) 10px 20px);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;text-align:center;padding:12px;min-height:120px}
.photos{display:grid;gap:8px;margin:6px 0 4px}
.photos.n1{grid-template-columns:1fr}.photos.n1 .ph{aspect-ratio:16/8;max-width:100%}
.photos.n2{grid-template-columns:1fr 1fr}.photos.n2 .ph{aspect-ratio:4/3}
.photos.n3{grid-template-columns:repeat(3,1fr)}.photos.n3 .ph{aspect-ratio:1}
.photos.n4{grid-template-columns:1fr 1fr}.photos.n4 .ph{aspect-ratio:4/3}
.cap{font-size:13px;color:var(--muted);margin:0 0 20px}
figure{margin:0}

/* two-column page layouts */
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.cols.route{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px)}
@media (max-width:900px){.cols,.cols.route{grid-template-columns:1fr;gap:24px}.sticky{position:static}}

.box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:14px;background:var(--surface)}
.box h4{font:600 12px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.box.mini-stats .stats{margin:0 0 4px;grid-template-columns:1fr 1fr}

/* tips */
.tips{display:grid;gap:8px;font-size:14px}
.tip{display:grid;grid-template-columns:92px minmax(0,1fr);gap:8px}
.tip .k{font:600 11px/1.9 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.tip.warn .k{color:var(--k-alternative)}

/* route day list */
.pace{display:inline-flex;background:var(--soft);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap}
.pace button{border:0;background:none;color:var(--ink);font:500 13px var(--f-body);padding:6px 12px;border-radius:7px;cursor:pointer}
.pace button.on{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.12);font-weight:700}
.days{list-style:none;margin:14px 0 0;padding:0}
.day{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px 6px;border-bottom:1px solid var(--line);text-decoration:none;border-radius:6px}
a.day:hover{background:var(--soft)}
.day .n{width:32px;height:32px;border-radius:50%;border:3px solid var(--rc);display:flex;align-items:center;justify-content:center;font:700 14px var(--f-display);background:var(--surface)}
.day .t{font-weight:600}
.day .via{font-size:13px;color:var(--muted)}
.day .m{font-size:14px;color:var(--muted);text-align:right;white-space:nowrap}
.day .chip{display:inline-block;font-size:11px;border:1px solid var(--line);border-radius:20px;padding:0 8px;margin-left:6px;color:var(--muted);font-weight:500;white-space:nowrap}
.day.rest{background:var(--soft);border-bottom-color:transparent;margin:4px 0}
.day.rest .n{border-style:dashed;border-color:var(--muted);color:var(--muted);font-size:12px}
.day.rest .t{font-weight:500}
.day.finish .n{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.split{border:2px solid var(--ink);border-radius:12px;padding:12px 14px;margin:12px 0;background:var(--warn-bg)}
.split b{font-family:var(--f-display);font-size:19px}
.split .s{font-size:13px;color:var(--muted)}
.split .opts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.split button{text-align:left;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:9px;padding:9px 11px;font:600 14px var(--f-body);cursor:pointer}
.split button span{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.split button.on{border:2px solid var(--ink);padding:8px 10px}

/* climb chart */
.climb{display:flex;align-items:flex-end;gap:4px;height:110px;padding:8px 10px 0;background:var(--soft);border-radius:10px;margin-top:10px}
.climb .bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;text-decoration:none}
.climb .bar i{display:block;width:100%;background:var(--rc);border-radius:3px 3px 0 0;min-height:2px}
.climb .bar span{font-size:10px;color:var(--muted);padding:3px 0 4px;font-variant-numeric:tabular-nums}
.climb .bar:hover i{opacity:.8}
.climb-cap{font-size:12px;color:var(--muted);margin:6px 0 0}

/* options (collapsibles) */
details.opt{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--surface)}
details.opt summary{list-style:none;padding:12px 16px;cursor:pointer;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
details.opt summary::-webkit-details-marker{display:none}
details.opt summary::after{content:"+";margin-left:auto;font-size:22px;line-height:1;color:var(--muted)}
details.opt[open] summary::after{content:"–"}
.kind{font:700 10px var(--f-body);letter-spacing:.08em;text-transform:uppercase;border-radius:4px;padding:3px 7px;flex:none}
.kind.harder{background:var(--k-harder-bg);color:var(--k-harder)}
.kind.easier{background:var(--k-easier-bg);color:var(--k-easier)}
.kind.shortcut{background:var(--k-shortcut-bg);color:var(--k-shortcut)}
.kind.addition{background:var(--k-addition-bg);color:var(--k-addition)}
.kind.alternative{background:var(--k-alternative-bg);color:var(--k-alternative)}
.opt .ot{font-weight:700}
.opt .om{font-size:13px;color:var(--muted);flex-basis:100%;padding-left:2px}
@media (min-width:700px){.opt .om{flex-basis:auto}}
.opt .body{padding:0 16px 6px}
.opt .route-line{font-size:13px;color:var(--muted);margin:0 0 10px}

.note-box{border-left:3px solid var(--muted);background:var(--soft);padding:10px 14px;border-radius:0 8px 8px 0;margin:16px 0;font-size:15px}
.warn-box{border:1px solid var(--warn-line);background:var(--warn-bg);border-radius:10px;padding:12px 14px;margin:16px 0;font-size:15px}
.finish-box{border:2px solid var(--ink);border-radius:12px;padding:16px 18px;margin:24px 0}
.finish-box h3{font-size:22px;margin-bottom:8px}

.pn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:32px}
.pn a,.pn div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;font-weight:600;background:var(--surface)}
.pn a:hover{border-color:var(--ink)}
.pn small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.pn .r{text-align:right}
.pn div{color:var(--muted);font-weight:400}

.mini{list-style:none;margin:0;padding:0;font-size:14px}
.mini li a{display:flex;gap:8px;align-items:center;padding:4px 0;text-decoration:none;color:var(--muted)}
.mini li a:hover{color:var(--ink)}
.mini .dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--rc);flex:none}
.mini .cur a{color:var(--ink);font-weight:700}.mini .cur .dot{background:var(--rc)}

/* map placeholder */
.mapph{min-height:300px;flex-direction:column;gap:6px}
.mapph b{font-family:var(--f-display);font-size:18px;color:var(--ink)}

/* cards & grids */
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.g3,.g4,.g2{grid-template-columns:1fr}}
.rcard{border:1px solid var(--line);border-top:5px solid var(--rc);border-radius:14px;overflow:hidden;text-decoration:none;background:var(--surface);display:flex;flex-direction:column}
.rcard:hover{border-color:var(--ink);border-top-color:var(--rc)}
.rcard .ph{border-radius:0;min-height:0;aspect-ratio:16/9}
.rcard .in{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.rcard h3{font-size:25px;line-height:1.1}
.rcard p{margin:0;font-size:14px;color:var(--muted)}
.rcard .meta{display:flex;gap:18px;margin-top:auto;padding-top:8px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.rcard .meta b{display:block;font:700 22px/1.1 var(--f-display);color:var(--ink);text-transform:none;letter-spacing:0}
.tile{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;text-decoration:none}
.tile:hover{border-color:var(--ink)}
.tile b{display:block;font:700 20px var(--f-display);margin-bottom:4px}
.tile span{font-size:14px;color:var(--muted)}
.tile.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.card .ph{border-radius:0;min-height:0;aspect-ratio:16/9}
.card .in{padding:12px 14px 14px;font-size:15px;display:flex;flex-direction:column;gap:4px}
.card .in b{font:700 19px var(--f-display)}
.card-kind{font:600 10px var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card-text{margin:0;color:var(--ink)}

/* tables */
.tbl-wrap{overflow-x:auto;margin:10px 0 18px}
table.t{border-collapse:collapse;width:100%;font-size:14px;min-width:520px}
table.t th{text-align:left;font:600 11px var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line)}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t td:first-child{font-weight:600}

/* stage index */
.sindex a.day{grid-template-columns:52px minmax(0,1fr)}
.sindex .n{border-color:var(--muted)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:10px 0 4px}

/* home */
.hero{position:relative;margin:-28px 0 0}
.hero .ph{border-radius:0;min-height:0;height:clamp(260px,42vw,440px);align-items:flex-start;padding-top:24px}
.hero .card-over{position:relative;margin:-110px auto 0;max-width:var(--maxw)}
.hero .panel{background:var(--surface);border-radius:14px;padding:22px 24px;max-width:600px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.hero h1{font-size:clamp(40px,6vw,60px);line-height:1}
.hero h1 span{font-family:var(--f-body);font-weight:300;color:var(--muted);font-size:.55em;margin-left:6px}
.hero p{margin:8px 0 0;font-size:17px;color:var(--muted)}
.bio{display:flex;gap:18px;align-items:center}
.bio .ph{width:96px;height:96px;min-height:0;border-radius:50%;flex:none;font-size:11px}
.links a{display:block}

.closure{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.closure .sym{width:22px;height:22px;margin-top:3px}
.closure .sym.area{background:var(--k-shortcut-bg);border:2px solid var(--k-shortcut);border-radius:4px}
.closure .sym.road{height:6px;margin-top:11px;background:var(--k-harder);border-radius:3px}
.closure .sym.spot{border:3px solid var(--k-alternative);border-radius:50%}
.closure b{display:block}
.closure p{margin:2px 0 0;font-size:15px}

.contact{display:grid;gap:8px;margin:12px 0}
.contact div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:8px;font-size:15px}
.contact span{color:var(--muted)}
.contact code{font:inherit;user-select:all}

footer{border-top:1px solid var(--line);padding-block:24px;color:var(--muted);font-size:13px}
@media (prefers-reduced-motion:no-preference){main{animation:fade .18s ease-out}}
@keyframes fade{from{opacity:.4}to{opacity:1}}

.day .kv{display:flex;width:max-content;max-width:100%;margin-top:6px;border:1px solid var(--line);border-radius:6px;font-size:13px;overflow:hidden}
.day .kv span{padding:2px 9px;white-space:nowrap}
.day .kv span+span{border-left:1px solid var(--line)}
.menu-btn{padding:8px;line-height:0}
.menu-btn svg{width:22px;height:22px;display:block}
.menu-btn .x{display:none}
.menu-btn[aria-expanded="true"] .bars{display:none}
.menu-btn[aria-expanded="true"] .x{display:block}

/* images */
img{max-width:100%}
figure.photos{margin:6px 0 20px}
.prow{display:flex;gap:8px;margin-bottom:8px}
.pcell{min-width:0;border-radius:10px;overflow:hidden;background:var(--soft)}
.pcell img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in}
figure.photos .cap{margin-top:-2px}
img.cover{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}
img.cover.r16{border-radius:12px}
img.wide{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:12px;cursor:zoom-in}
img.mapimg{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;background:#d1d5d6;margin-top:auto}
.rcard .in{flex:1 1 auto}
.routemap img,.overview img{display:block;width:100%;height:auto;max-height:72vh;object-fit:contain;background:#d1d5d6;border-radius:12px;cursor:zoom-in}
.overview{margin:20px 0 8px}
.hero{position:relative}
.hero-img{display:block;width:100%;height:clamp(260px,42vw,460px);object-fit:cover}
.bio .ph{background:var(--soft)}
#lightbox{position:fixed;inset:0;z-index:50;background:rgba(10,12,10,.88);display:flex;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));cursor:zoom-out}
#lightbox[hidden]{display:none}
#lightbox img{max-width:100%;max-height:calc(100% - 36px);object-fit:contain;border-radius:6px}
#lightbox{flex-direction:column;gap:10px}
#lightbox .lb-credit{margin:0;font-size:13px;color:rgba(255,255,255,.8);text-align:center}
#lightbox .lb-credit[hidden]{display:none}
@media (max-width:600px){.prow{gap:6px}}

/* interactive maps */
.lmap{height:420px;border-radius:12px;border:1px solid var(--line);background:#eef0ee;z-index:0}
.lmap.tall{height:min(72vh,640px)}
.lmap.nobase{background:repeating-linear-gradient(45deg,var(--ph1) 0 10px,var(--ph2) 10px 20px)}
@media (max-width:600px){.lmap{height:340px}.lmap.tall{height:420px}}
.prof{display:block;width:100%;height:150px;margin-top:10px;cursor:crosshair;touch-action:pan-y}
.prof .pg{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.prof .pt{font-size:11px;fill:var(--muted)}
.prof .pm{stroke:var(--ink);stroke-width:1.5;vector-effect:non-scaling-stroke}
.leaflet-tooltip.town{background:none;border:0;box-shadow:none;font:600 12px/1 var(--f-body);color:#18201a;text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;padding:0}
.leaflet-tooltip.town::before{display:none}
.leaflet-tooltip.hov{font:13px/1.3 var(--f-body)}
.leaflet-container{font-family:var(--f-body)}
#map-stage{margin-top:18px}#map-overview{margin-top:10px}

.about-me img.avatar.inl{float:left;width:112px;height:112px;border-radius:50%;object-fit:cover;margin:4px 20px 10px 0;cursor:zoom-in}
.about-me::after{content:"";display:block;clear:both}
.bio img.avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none;cursor:zoom-in}
.optToggle{display:inline-flex;gap:6px;align-items:center;font-size:14px;margin-top:8px;cursor:pointer}
.lmap.ride{height:360px;margin-top:6px}
.lmap.areas{height:440px;margin-top:6px}
@media (max-width:600px){.lmap.areas{height:360px}}
.leaflet-tooltip.area{background:transparent;border:0;box-shadow:none;color:#1d4677;font-weight:600;text-shadow:0 0 3px #fff,0 0 3px #fff}
.leaflet-tooltip.area:before{display:none}
.leaflet-div-icon.pin,.pin{background:none;border:0;cursor:pointer}
.closure .sym.rain{background:#86B9E6;border:0;border-radius:50%}
.closure .sym.quake{background:#F6D66F;border:0;border-radius:50%}
.closure .sym.islands{background:#00AF50;border:0;border-radius:50%}
.closure .sym.passes{background:#BD5015;border:0;border-radius:50%}
.closure .sym.crossings{background:#742E9F}
.closure .sym.taroko{background:#D96DC9}
.closure .sym.suao{background:#5CCBFD}
.stats-inline{display:none;margin:12px 0 0}
@media (max-width:900px){.stats-inline{display:block}.stats-side{display:none}}
.ovsvg{margin:10px 0 8px;background:var(--soft);border-radius:12px;padding:10px}
.ovsvg svg{display:block;width:100%;height:auto;max-height:72vh}
.ovsvg path{fill:none;stroke-linejoin:round;stroke-linecap:round}
.ovsvg .cas{stroke:var(--surface)}
.ovsvg .tw{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}.ovsvg .tw.start{fill:var(--ink)}
.ovsvg .twl{font:600 15px var(--f-body);fill:var(--ink);paint-order:stroke;stroke:var(--soft);stroke-width:3px}
#ovsvg[class^="only-"] .rl,#ovsvg[class^="only-"] .cas{opacity:.15}
#ovsvg.only-A .rA,#ovsvg.only-B .rB,#ovsvg.only-C .rC{opacity:1}

/* route summary: hide the link once opened, and keep it open */
details.sumx[open] .readmore{display:none}
details.sumx[open]>summary{pointer-events:none;cursor:default}