/* One deliberate paper look (travel magazine), painted explicitly so it reads the same on any host theme. */
:root{
  --paper:#F5F1E8; --paper-2:#EDE6D6; --card:#FBF8F1; --ink:#1E211E; --ink-2:#4A4E47; --ink-3:#817F74; --rule:#D9D0BD;
  --forest:#2F4F3A; --forest-2:#DDE5DA; --ochre:#9A7432; --night-2:#2A2E29;
  --indigo:#2E4A78; --sky:#B9CFE0; --mist:#E8E6DF;
  --sea:#1F5F8B; --sea-deep:#12324A; --sea-pale:#E3EEF5; --camellia:#C23B3B; --sand:#D8C39A;
  --night:color-mix(in srgb, var(--sea-deep) 70%, var(--ink)); --night-ink:var(--paper-2);
  --dim-1:color-mix(in srgb, var(--paper-2) 72%, var(--ink));
  --dim-2:color-mix(in srgb, var(--paper-2) 58%, var(--ink));
  --dim-rule:color-mix(in srgb, var(--paper-2) 20%, var(--ink));
  --gold:color-mix(in srgb, var(--ochre) 62%, var(--paper-2));
  --ember:color-mix(in srgb, var(--sea) 45%, var(--paper-2));
  --shade:color-mix(in srgb, var(--ink) 35%, transparent);
  --en:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --serif:"Noto Serif TC","Noto Serif KR","Songti TC",serif;
  --sans:"Noto Sans TC","Noto Sans KR","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --navh:62px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-variant-numeric:lining-nums;font-size:16px;line-height:1.8;margin:0;padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom,0px));overflow-x:clip}
h1,h2,h3,h4{margin:0;font-family:var(--serif);text-wrap:balance;line-height:1.25;font-weight:700}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px;border-radius:2px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.lbl{font:500 11px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.en{font-family:var(--en)}
.col{max-width:640px;margin:0 auto;padding-inline:20px}
.fine{font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.7}
.ph{font-size:12px;color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule);transition:color .3s,border-color .3s}
.ph:hover{color:var(--sea);border-color:var(--sea)}
img.photo{width:100%;height:100%;object-fit:cover;display:block}
.credit{font-size:10.5px;color:var(--ink-3)}

/* progress: a thin railway line of the five stops */
.prog{position:fixed;left:0;right:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);background:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);transform:translateY(-110%);transition:transform .6s var(--ease)}
.prog.show{transform:none}
.prog .in{max-width:640px;margin:0 auto;padding:8px 20px 9px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.prog .d{font:700 12px var(--sans);letter-spacing:.14em;white-space:nowrap}
.prog .d b{color:var(--sea)}
.stops{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.stops::before{content:"";position:absolute;left:4px;right:4px;top:4px;height:1.5px;background:var(--rule)}
.stops .fill{position:absolute;left:4px;top:4px;height:1.5px;background:var(--sea);width:0;transition:width 1.2s var(--ease)}
.stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;font:500 8.5px var(--sans);letter-spacing:.08em;color:var(--ink-3);width:10px}
.stop i{width:9px;height:9px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink-3)}
.stop span{white-space:nowrap}
.stop.on i{background:var(--sea-deep);border-color:var(--sea-deep)}
.stop.here i{background:var(--sea);border-color:var(--sea);box-shadow:0 0 0 3px var(--sea-pale)}
.stop.here{color:var(--ink)}
.prog .pc{font:500 12px var(--mono);color:var(--ink-3)}

/* page body */
.page{min-height:100svh}
.pg-body{position:relative;z-index:2;padding-bottom:8px}
/* 紅葉 fall between the paper and the plan; cards stay opaque so text keeps its contrast */
.leaves{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#view{position:relative;z-index:1}
body.dark{background:var(--night)}
.page.dark{color:var(--night-ink)}
.ch-title{padding-top:36px}
.ch-title .dd{font:700 12px var(--sans);letter-spacing:.24em;color:var(--sea)}
.ch-title h2{font:900 clamp(40px,11vw,60px)/1.1 var(--serif);letter-spacing:.06em;margin-top:6px}
.ch-title h2 .mask{display:block}
.ch-title h2 .en{display:block;margin-top:4px;font:italic 500 .5em var(--en);letter-spacing:.12em;color:var(--ink-2)}
.ch-title .theme{font:500 12px var(--sans);letter-spacing:.24em;color:var(--ink-2);margin-top:10px;text-transform:uppercase}
.ch-title p.body{margin-top:18px;font-size:16.5px;max-width:31em}
.lead-photo{margin-top:28px}
.lead-photo figcaption{flex-direction:row!important;justify-content:space-between;align-items:baseline;gap:12px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:26px;border-top:1px solid var(--rule);padding-top:14px}
.tri{display:flex;flex-direction:column;gap:6px}
.tri b{font:700 15.5px/1.35 var(--serif)}
.tri small{font:italic 500 14px/1.2 var(--en);color:var(--ink-3)}
.chip{display:inline-flex;align-items:center;gap:5px;font:700 10px/1 var(--sans);letter-spacing:.16em;padding:4px 7px 4px 6px;border-radius:2px;color:var(--card);white-space:nowrap}
.chip svg{width:12px;height:12px}
.chip.see{background:var(--forest)} .chip.eat{background:var(--camellia)} .chip.ride{background:var(--ink)} .chip.stay{background:var(--ochre)} .chip.view{background:var(--indigo)}

.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin-top:34px;padding-top:8px;position:relative}
.sec-h::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1.5px solid currentColor;transform-origin:left;transition:transform 1.4s var(--ease)}
.sec-h small{color:var(--ink-3);font-size:12px}
.flow{list-style:none;margin:0;padding:4px 0 10px}
.flow li{position:relative}
.flow li+li::before{content:"";position:absolute;left:28px;top:-8px;height:12px;border-left:1.5px dotted var(--ink-3)}
.flow summary{list-style:none;display:grid;grid-template-columns:58px 1fr auto;gap:10px;align-items:center;padding:10px 0;cursor:pointer}
.flow summary::-webkit-details-marker{display:none}
.flow .t{font:500 14px var(--mono);color:var(--ink-2)}
.flow .w{font:700 16px/1.4 var(--serif)}
.flow .w small{display:block;font:italic 500 14px var(--en);color:var(--ink-3)}
.flow .pm{width:22px;height:22px;border-radius:50%;border:1px solid var(--rule);display:grid;place-items:center;font:500 14px var(--sans);color:var(--ink-3);transition:transform .4s var(--ease)}
.flow details[open] .pm{transform:rotate(45deg);border-color:var(--ink-3)}
.flow .dx{margin:0 0 12px 68px;font-size:14.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:8px}
.flow .dx .chip{align-self:flex-start}
/* Korean name first (pastes into Naver Map), Chinese in brackets */
.ko [lang="ko"]{user-select:all}
.flow .w .ko{display:inline}
.flow .addr{display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--ink-3)}
.flow .addr span{user-select:all}
.flow .addr .ph{align-self:flex-start;color:var(--sea);border-color:color-mix(in srgb, var(--sea) 40%, transparent)}
.page.dark .flow .addr .ph{color:var(--sky)}
.flow .dx .price,.leg .price{display:flex;flex-wrap:wrap;gap:6px}
.pill{font:500 12.5px var(--sans);padding:2px 9px;border-radius:999px;background:var(--forest-2);color:var(--ink);font-variant-numeric:tabular-nums}
.pill.d{background:var(--sea-pale)}

/* editorial photo spreads */
.spread{margin-top:30px;display:flex;flex-direction:column;gap:30px}
.fig{margin:0}
.fig .pic{overflow:hidden;background:var(--paper-2)}
.fig.full .pic{aspect-ratio:4/3;margin-inline:-20px}
.fig.half{width:64%}
.fig.half.r{align-self:flex-end}
.fig.half .pic{aspect-ratio:4/5}
.fig.wide .pic{aspect-ratio:16/9}
.fig figcaption{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.fig figcaption b{font:600 13px var(--sans);letter-spacing:.22em;text-transform:uppercase}
.fig figcaption em{font:italic 500 19px/1.35 var(--en);color:var(--ink-2)}
.fig figcaption span{font-size:14px;color:var(--ink-2)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pair .pic{aspect-ratio:1/1}
.pullquote{font:500 22px/1.6 var(--serif);letter-spacing:.04em;padding:6px 0 6px 16px;border-left:3px solid var(--sea);max-width:18em}
.poem{font:500 22px/2 var(--serif);letter-spacing:.1em;margin-top:22px}
.poem span{display:block}
.poem .gap{height:14px}
.strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 6px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .fig{flex:0 0 58%;scroll-snap-align:start}
.strip .pic{aspect-ratio:3/4}
.index{margin-top:10px;border-top:1.5px solid currentColor;padding-top:12px}
.index h4{font:600 22px var(--en);letter-spacing:.2em}
.index dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:14px 0 0;align-items:start}
.index dd{margin:0;font-size:15px;line-height:1.6}
.more{display:inline-flex;gap:8px;align-items:center;margin-top:18px;background:none;border:0;padding:0 0 2px;cursor:pointer;font:700 13px var(--sans);letter-spacing:.1em;color:var(--forest);background:linear-gradient(currentColor,currentColor) left bottom/100% 1px no-repeat;transition:background-size .5s var(--ease)}
.more:hover{background-size:40% 1px}
.postcard{background:var(--card);border:1px solid var(--rule);box-shadow:0 10px 28px -18px var(--shade);transform:rotate(-1.2deg);padding:12px;display:grid;gap:12px}
.postcard .pic{aspect-ratio:3/2;overflow:hidden}
.postcard .pc-body{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
.postcard .lbl{color:var(--sea)}
.postcard h3{font:600 34px/1 var(--en);letter-spacing:.1em;margin-top:4px}
.postcard ul{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.postcard ul li{display:flex;gap:8px;align-items:center}
.postcard .route{font:500 11px var(--sans);letter-spacing:.18em;color:var(--ink-3);margin-top:10px}
.stamp{width:76px;height:88px;border:2px dotted var(--camellia);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--sea);transform:rotate(4deg)}
.stamp b{font:600 22px/1 var(--en)}
.stamp span{font:700 8.5px var(--sans);letter-spacing:.14em}

/* ride details */
.tkd{margin-top:8px;border-top:1.5px solid currentColor;padding-top:14px;display:flex;flex-direction:column;gap:14px}
.tkd>.lbl{color:var(--sea)}
.cars{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cars .pic{aspect-ratio:5/3;overflow:hidden}
.cars small{font-size:11.5px;color:var(--ink-3)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14.5px}
.facts dt{font:700 10.5px/2.1 var(--sans);letter-spacing:.16em;color:var(--ink-3);white-space:nowrap}
.facts dd{margin:0}
.why{background:var(--forest-2);padding:12px 14px;border-radius:2px;font-size:14.5px}
.why b{display:block;font:700 10.5px var(--sans);letter-spacing:.2em;color:var(--forest);margin-bottom:2px}
.warn{background:color-mix(in srgb, var(--camellia) 12%, var(--card));padding:12px 14px;border-radius:2px;font-size:14.5px}
.warn b{color:var(--camellia)}
.srcs{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px}
.srcs a{color:var(--forest)}
.cond{border:1.5px solid currentColor;border-radius:2px;overflow:hidden}
.cond button{width:100%;background:none;border:0;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;cursor:pointer}
.cond .t b{display:block;font:600 21px/1.1 var(--en);letter-spacing:.08em}
.cond .t span{font-size:13px;color:var(--ink-2)}
.cond .status{border:1.5px dashed var(--sea);color:var(--sea);font:700 10px/1.5 var(--sans);letter-spacing:.16em;padding:6px 8px;text-align:center;border-radius:2px}
.cond .body{padding:0 16px 16px;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.cond .pic{aspect-ratio:16/9;overflow:hidden}
.vcard{display:block;color:inherit;overflow:hidden;background:var(--ink);color:var(--paper-2)}
.vframe{position:relative;aspect-ratio:16/9;background:var(--ink)}
.vframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vcard .vtx{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px}
.vcard .vtx .lbl,.vcard .vtx a{color:var(--gold)}
.vcard .vtx a{font-size:12px}
.vcard .vtx b{font:700 15px/1.4 var(--serif)}

/* departure row: restrained timetable, hover only nudges the vehicle and the rule */
.go{position:relative;width:100%;text-align:left;background:none;border:0;border-top:1.5px solid currentColor;border-bottom:1px solid var(--rule);padding:16px 0 14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;margin-top:48px}
.go .lbl{color:var(--forest)}
.hint{font:700 11px var(--sans);letter-spacing:.14em;color:var(--sea)}
.hint span{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;padding-bottom:2px;transition:background-size .6s var(--ease)}
.go:hover .hint span{background-size:100% 1px}
.hint span::after{content:" →"}
/* next-leg buttons as real travel paper: boarding pass (flights), JR マルス券 (trains), futon (nights) */
.go.pass,.go.jr,.go.bed{border:0;padding:0;gap:0;color:var(--ink);box-shadow:0 6px 18px color-mix(in srgb, var(--ink) 18%, transparent);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
/* torn: the stub leaves along the perforation; the notch mask would clip it, so it drops */
.go.pass.torn{-webkit-mask:none;mask:none;box-shadow:none}
.go.jr.torn{box-shadow:none}
.go.pass:hover,.go.jr:hover,.go.bed:hover,.go.pass:focus-visible,.go.jr:focus-visible,.go.bed:focus-visible{box-shadow:0 10px 24px color-mix(in srgb, var(--ink) 24%, transparent)}
.go.pass{--stub:92px;flex-direction:row;background:none;border-radius:10px;
  -webkit-mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 9px,var(--ink) 9.5px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 9px,var(--ink) 9.5px) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle at calc(100% - var(--stub)) 0,transparent 9px,var(--ink) 9.5px) top/100% 51% no-repeat,radial-gradient(circle at calc(100% - var(--stub)) 100%,transparent 9px,var(--ink) 9.5px) bottom/100% 51% no-repeat}
.pass .pmain{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--card);border-radius:10px 0 0 10px;overflow:hidden}
.pass .phead{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--sea-deep);color:var(--paper);padding:8px 16px;font:500 11px var(--sans);letter-spacing:.2em}
.pass .phead b{font:700 13px var(--serif);letter-spacing:.3em}
.pass .proute{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 16px 6px}
.pass .pc b{display:block;font:500 30px/1 var(--mono);letter-spacing:.04em}
.pass .pc small{font:500 12px var(--sans);color:var(--ink-3);letter-spacing:.2em}
.pass .pc.r{text-align:right}
.pass .pfly{position:relative;height:20px;color:var(--sea)}
.pass .pfly::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--rule)}
.pass .pfly svg{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);background:var(--card);transition:left .9s var(--ease)}
.pass .pfields{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px;padding:6px 16px 12px}
.pass .pfields small{display:block;font:500 10px var(--sans);letter-spacing:.2em;color:var(--ink-3)}
.pass .pfields b{font:500 13px var(--mono)}
.pass .pstub{width:var(--stub);flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 8px;border-left:1.5px dashed var(--rule);background:var(--sea-pale);border-radius:0 10px 10px 0}
.pass .pstub b{font:700 15px var(--serif);letter-spacing:.2em;color:var(--sea-deep)}
.pass .pstub small{font:500 9.5px var(--mono);color:var(--ink-3)}
.pass .bar{width:52px;height:30px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px)}

.go.jr{position:relative;padding:0;gap:0;--jr-paper:repeating-linear-gradient(45deg,transparent 0 6px,color-mix(in srgb, var(--sky) 40%, transparent) 6px 7px),repeating-linear-gradient(-45deg,transparent 0 6px,color-mix(in srgb, var(--sky) 40%, transparent) 6px 7px),color-mix(in srgb, var(--sky) 38%, var(--card));}
.jr .jtop{display:flex;justify-content:space-between;font:700 12px var(--serif);letter-spacing:.2em}
.jr .jrmark{font:700 11px var(--sans);letter-spacing:.08em;color:var(--sea-deep);border:1.5px solid currentColor;border-radius:3px;padding:0 6px}
.jr .jmain{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:4px}
.jr .jdate{font:500 13px var(--mono)}
.jr .jst{font:900 26px/1.2 var(--serif);letter-spacing:.06em}
.jr .jst i{font-style:normal;font-weight:500;margin:0 .35em;font-size:.8em}
.jr .jtime{display:flex;gap:14px;font:500 13px var(--mono);padding-left:calc(13px * 3.6 + 14px)}
.jr .jbody,.jr .jstub{display:flex;flex-direction:column;gap:4px;background:var(--jr-paper)}
.jr .jbody{border-radius:4px 4px 0 0;padding:12px 16px 8px}
.jr .jstub{border-radius:0 0 4px 4px;padding:8px 16px 12px;border-top:1px dashed color-mix(in srgb, var(--ink) 35%, transparent)}
.jr .jtrain{font:700 15px var(--serif);letter-spacing:.06em}
.jr .jfoot{display:flex;align-items:center;gap:14px}
.jr .jprice{font:500 15px var(--mono)}
.jr .jdur{font:500 12px var(--sans);color:var(--ink-2)}
.jr .hint{margin-left:auto}

.go.bed{position:relative;flex-direction:row;align-items:center;gap:14px;border-radius:10px;padding:16px;overflow:hidden;color:var(--paper-2);background:radial-gradient(1.5px 1.5px at 18% 30%,var(--card),transparent),radial-gradient(1px 1px at 36% 18%,var(--card),transparent),radial-gradient(1.5px 1.5px at 72% 26%,var(--card),transparent),radial-gradient(1px 1px at 88% 60%,var(--card),transparent),radial-gradient(1px 1px at 54% 70%,var(--card),transparent),linear-gradient(160deg,var(--ink),var(--indigo))}
.bed .bsky{position:absolute;right:18px;top:12px;width:60px;height:40px}
.bed .moon{position:absolute;right:0;top:0;width:26px;height:26px;border-radius:50%;box-shadow:-7px 4px 0 0 var(--card);transition:transform .8s var(--ease)}
.bed .zz{position:absolute;left:0;top:14px;font:700 14px var(--serif);font-style:normal;color:var(--sea-pale);opacity:.8}
.bed .zz i{font-style:normal;display:inline-block;animation:zz 3s var(--ease) infinite}
.bed .zz i:last-child{animation-delay:.6s}
@keyframes zz{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-5px);opacity:1}}
.bed .futon{width:112px;flex:none;align-self:flex-end}
.bed .btx{display:flex;flex-direction:column;gap:2px;min-width:0}
.bed .btx .lbl{color:var(--sea-pale)}
.bed .btx b{font:700 19px var(--serif);color:var(--paper)}
.bed .btx small{font-size:12.5px;color:var(--dim-1)}
.bed .hint{color:var(--sea-pale);margin-top:4px}
.back{display:block;margin-top:14px;background:none;border:0;color:var(--ink-3);font:500 13px var(--sans);cursor:pointer;padding:8px 0 28px}

/* dark pages (Kumamoto evenings) */
.page.dark .ch-title .theme,.page.dark .fig figcaption em,.page.dark .fig figcaption span,.page.dark .flow .t,.page.dark .sec-h small,.page.dark .credit,.page.dark .ph{color:var(--dim-1)}
.page.dark .ch-title h2 .en,.page.dark .flow .dx{color:var(--dim-1)}
.page.dark .flow .w small,.page.dark .tri small,.page.dark .back,.page.dark .cars small,.page.dark .facts dt{color:var(--dim-2)}
.page.dark .flow .pm{border-color:var(--dim-rule);color:var(--dim-1)}
.page.dark .flow li+li::before{border-color:var(--dim-2)}
.page.dark .pill{background:color-mix(in srgb, var(--forest) 45%, var(--ink));color:var(--paper-2)}
.page.dark .pill.d{background:color-mix(in srgb, var(--sea) 40%, var(--ink))}
.page.dark .trio,.page.dark .go,.page.dark .ph{border-color:var(--dim-rule)}
.page.dark .go .lbl,.page.dark .srcs a,.page.dark .more{color:var(--gold)}
.page.dark .pullquote{border-color:var(--ember)}
.page.dark .fig .pic{background:var(--night-2)}
.page.dark .why{background:color-mix(in srgb, var(--forest) 40%, var(--ink))}
.page.dark .why b{color:var(--gold)}
.page.dark .warn{background:color-mix(in srgb, var(--sea) 30%, var(--ink))}
.page.dark .warn b{color:var(--ember)}
.page.dark .hint{color:var(--ember)}

/* end page */
.endpg{display:flex;align-items:center;justify-content:center}
.endin{max-width:560px;padding:40px 24px;text-align:center}
.endin .lbl{color:var(--sea)}
.endin h1{font:700 clamp(30px,8vw,44px)/1.3 var(--serif);margin:10px 0}
.endin .sum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:26px 0}
.endin .sum b{display:block;font:500 40px/1 var(--serif);color:var(--forest)}
.endin .sum span{font:500 10px var(--sans);letter-spacing:.16em;color:var(--ink-2)}

/* bottom nav */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sea-deep);color:var(--paper);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav .in{max-width:640px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);height:var(--navh)}
.nav button{background:none;border:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:700 10px var(--sans);letter-spacing:.22em;cursor:pointer;color:color-mix(in srgb, var(--paper-2) 68%, var(--sea-deep));transition:color .3s}
.nav button svg{width:20px;height:20px}
.nav button:hover,.nav button[aria-pressed="true"]{color:var(--paper)}
.nav button[aria-pressed="true"] svg{color:var(--ember)}

/* sheets */
.sheet{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end;background:color-mix(in srgb, var(--ink) 45%, transparent)}
.sheet .panel{background:var(--paper);max-height:calc(100% - 40px - env(safe-area-inset-top,0px));border-radius:14px 14px 0 0;display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;animation:up .6s var(--ease)}
@keyframes up{from{transform:translateY(40px)}to{transform:none}}
.sheet .sh{flex:none;display:flex;justify-content:space-between;align-items:center;padding:14px 20px 10px;border-bottom:1px solid var(--rule)}
.sheet .sh h3{font:600 24px var(--en);letter-spacing:.14em}
.x{background:none;border:1px solid var(--rule);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;font-size:18px}
.sheet .sb{overflow:auto;padding:16px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.tabs{flex:none;display:flex;gap:6px;overflow-x:auto;padding:10px 20px 0;scrollbar-width:none}
.tabs button{flex:0 0 auto;border:1px solid var(--rule);background:var(--card);border-radius:999px;padding:5px 12px;font:500 13px var(--sans);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* MAP sheet: satellite canvas with the trail drawn in the same projection on top */
.satmap{position:relative;border-radius:2px;overflow:hidden;background:var(--indigo)}
.satmap canvas{display:block;width:100%}
#mapsvg{position:absolute;inset:0;width:100%;height:100%;display:block}
#mapsvg .shore{stroke:var(--rule);stroke-width:1}
#mapsvg .leg-line{fill:none;stroke:var(--card);opacity:.7;stroke-width:1.5;stroke-dasharray:3 5;stroke-linecap:round}
#mapsvg .leg-line.done{stroke:var(--sea-pale);opacity:1;stroke-width:3;stroke-dasharray:none}
#mapsvg .leg-line.done.k-return{stroke:var(--sky)}
#mapsvg .leg-line.done.k-daytrip{stroke:var(--sand)}
#mapsvg .leg-line.k-local{stroke-width:1.5}
#mapsvg .node{cursor:pointer}
#mapsvg .node .dot{fill:var(--ink);stroke:var(--card);stroke-width:2}
#mapsvg .node .ring{fill:none;stroke:var(--card);stroke-width:1.5;opacity:0;transform:scale(.5);transition:opacity .5s,transform .5s var(--ease)}
#mapsvg .node text{font:700 11.5px var(--sans);fill:var(--card);stroke:var(--ink);stroke-opacity:.6;stroke-width:3;paint-order:stroke}
#mapsvg .node:hover .ring,#mapsvg .node:focus-visible .ring,#mapsvg .node.here .ring{opacity:1;transform:none}
#mapsvg .node.here .dot{fill:var(--camellia)}
.here-card{margin-bottom:12px}
.here-card .lbl{color:var(--sea)}
.here-card b{font:600 28px var(--en);letter-spacing:.1em}
.maplist{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.maplist button,.daypick button,.check,.tot div{background:var(--card);border:1px solid var(--rule);border-radius:2px;padding:10px 12px;cursor:pointer;text-align:left}
.maplist button b{display:block;font:600 18px var(--en);letter-spacing:.1em}
.maplist button span{font-size:12.5px;color:var(--ink-3)}
.maplist button.cur,.daypick button.cur{border-color:var(--sea);box-shadow:inset 3px 0 0 var(--sea)}
.daypick{display:flex;flex-direction:column;gap:6px}
.daypick button{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.daypick .n{font:500 24px/1 var(--serif);color:var(--sea)}
.daypick b{font:700 15px var(--serif)}
.daypick small{display:block;color:var(--ink-3);font-size:12px}
.daypick .dt{font:500 12px var(--mono);color:var(--ink-3)}
.leg{border-top:1px solid var(--rule);padding:14px 0}
.leg:first-of-type{border-top:0;padding-top:0}
.leg .top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.leg .top .lbl{color:var(--sea)}
.leg h4{font:700 17px var(--serif);margin-top:4px}
.leg .tr,.leg .alt{font-size:13px;color:var(--ink-2)}
.leg .tt{font:500 20px var(--mono);margin:4px 0}
.leg .tt small{font-size:12px;color:var(--ink-3);margin-left:8px}
.leg .alt{margin-top:8px}
.leg .srcs{margin-top:8px}
.leg .srcs a .tg{font:700 9.5px var(--sans);letter-spacing:.1em;border:1px solid var(--rule);border-radius:2px;padding:0 3px;margin-right:4px;color:var(--ink-3)}
.tot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 16px}
.tot div{cursor:default}
.tot b{display:block;font:500 22px var(--mono)}
.tot small{font-size:12px;color:var(--ink-3)}
.checks{display:flex;flex-direction:column;gap:6px}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.check input{width:17px;height:17px;margin:3px 0 0;accent-color:var(--forest)}
.check b{display:block;font-size:15px}
.check small{display:block;color:var(--ink-2);font-size:13px}
.check .when{font:500 12px var(--mono);color:var(--sea)}
.check.done b{text-decoration:line-through;color:var(--ink-3)}
.grp{font:600 20px var(--en);letter-spacing:.16em;margin:18px 0 8px}
.grp:first-child{margin-top:0}
.grp.count{font:500 14px var(--mono);letter-spacing:0}
.notes p{font-size:14.5px;margin-bottom:12px}
.notes ul{padding-left:18px;font-size:13.5px;margin:6px 0 0}

@media (min-width:760px){
  .fig.full .pic{margin-inline:0}
  .strip{margin-inline:0;padding-inline:0}
  .strip .fig{flex-basis:36%}
}
@media (max-width:380px){.trio{grid-template-columns:1fr 1fr}.trio .tri:last-child{grid-column:span 2}}

@media (prefers-reduced-motion:reduce){
  .bed .zz i{animation:none}
}
/* 出發前準備: checklists sit on the leaf background, each group with its own tally */
.prep .checks{margin-top:12px}
.prep .sec-h small{font:500 13px var(--mono);color:var(--ink-2)}
.prep .fine{margin-top:20px}
.prep .go.pass{margin-top:24px}