:root{
  --accent:#1f6f8b; --accent-dark:#14607a; --sand:#e7e2cf; --sand-soft:#f3efe2;
  --sea:#d9eef5; --ink:#22303a; --muted:#6b7178; --line:#e6e6e6; --card:#ffffff;
  --r1:#e8543f; --r2:#c0392b; --r3:#f0a03a; --r4:#7bab54; --r5:#3f88c5; --r6:#7b5ea7; --r7:#14607a;
  --maxw:680px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",Segoe UI,Roboto,sans-serif;
  color:var(--ink); background:#f6f4ec; line-height:1.75; font-size:16px;
}
a{color:var(--accent-dark)}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 16px}

/* top bar */
.topbar{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex; align-items:center; gap:10px; height:52px}
.topbar a.home{font-weight:700; color:var(--accent-dark); text-decoration:none; font-size:15px}
.topbar .sep{color:var(--muted)}
.topbar .cur{color:var(--muted); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* region toggle bar */
.region-bar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:#eef4f6;
  border-bottom:1px solid var(--line); padding:7px 14px; font-size:12px; color:var(--muted)}
.region-bar .rl{margin-right:2px}
.region-bar button{font-family:inherit; font-size:12px; border:1px solid var(--line); background:#fff;
  color:#555; border-radius:999px; padding:4px 10px; cursor:pointer}
.region-bar button.on{background:#14607a; color:#fff; border-color:#14607a}

/* login location choice */
.gate-loc{font-size:13px; opacity:.95; margin-bottom:14px; line-height:1.8}
.gate-loc button{font-family:inherit; font-size:13px; margin:8px 4px 0; border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.12); color:#fff; border-radius:999px; padding:7px 13px; cursor:pointer}
.gate-loc button.on{background:#fff; color:#14607a; border-color:#fff; font-weight:600}

/* hero */
.hero{background:linear-gradient(135deg,#1f6f8b,#14607a); color:#fff; padding:26px 0 22px}
.hero .kicker{font-size:13px; opacity:.85; letter-spacing:.05em}
.hero h1{margin:.15em 0 .1em; font-size:26px; line-height:1.25}
.hero .sub{opacity:.92; font-size:14px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); color:#fff;
  padding:5px 11px; border-radius:999px; font-size:13px}

/* generic sections */
section{padding:20px 0}
h2.sec{font-size:19px; margin:0 0 12px; color:var(--accent-dark); display:flex; align-items:center; gap:8px}
h2.sec::before{content:""; width:5px; height:19px; background:var(--accent); border-radius:3px; display:inline-block}
.lead{color:#333}
.map-cap{font-size:13px; color:var(--muted); margin-top:8px; text-align:center}
figure{margin:0}
figure img{border-radius:14px; border:1px solid var(--line); box-shadow:0 2px 10px rgba(0,0,0,.05)}

/* tips card */
.tips{background:var(--sand-soft); border:1px solid #e3ddc8; border-radius:14px; padding:14px 16px}
.tips ul{margin:0; padding-left:2px; list-style:none}
.tips li{padding:7px 0; border-bottom:1px dashed #ddd6bf}
.tips li:last-child{border-bottom:0}
.tips b{color:var(--accent-dark)}

/* stop cards */
.stop{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:0 0 14px;
  margin:16px 0; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.04)}
.stop .head{display:flex; align-items:center; gap:12px; padding:14px 16px 8px}
.badge{flex:0 0 auto; width:38px; height:38px; border-radius:50%; color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:18px}
.b1{background:var(--r1)} .b2{background:var(--r2)} .b3{background:var(--r3)} .b4{background:var(--r4)}
.b5{background:var(--r5)} .b6{background:var(--r6)} .b7{background:var(--r7)}
.stop .title{font-size:18px; font-weight:700; line-height:1.25}
.stop .title small{display:block; font-weight:400; color:var(--muted); font-size:12.5px}
.stop .body{padding:0 16px}
.stop p{margin:10px 0}
.stop p .lbl{font-weight:700; color:var(--accent-dark); margin-right:4px}
.tag-opt{display:inline-block; background:#fdf0e6; color:#b3671b; font-size:11px; padding:2px 8px;
  border-radius:999px; margin-left:6px; vertical-align:middle}

/* top action row (routes + map) */
.top-actions{display:flex; flex-wrap:wrap; gap:8px; padding:12px 14px 4px}
.route-hint{font-size:11.5px; color:#2c7a4b; padding:0 14px 2px}
.btns.refs{border-top:1px dashed #efece1; margin-top:10px; padding-top:10px}

/* session photos — drop files into assets/images/, auto-shows on load */
figure.ph{margin:12px 16px 4px}
figure.ph img{width:100%; display:none; aspect-ratio:16/10; object-fit:cover; object-position:center; border-radius:12px; border:1px solid var(--line); box-shadow:0 2px 10px rgba(0,0,0,.05)}
figure.ph.hasimg img{display:block}
figure.ph .phcap{display:block; border:1px dashed #dcd6c4; background:#faf8ef; border-radius:10px; padding:8px 12px; text-align:center; color:#9a9382; font-size:12px; line-height:1.7}
figure.ph.hasimg .phcap{display:none}
figure.ph .phname{font-size:11px; color:#b0a98f}
figure.ph .phname code{background:#f0ebda; padding:0 4px; border-radius:4px}
figure.ph.hero{margin:0 0 6px}
figure.ph.hero img{aspect-ratio:16/9; border-radius:14px}

/* image placeholder */
.imgph{margin:12px 16px 4px; border:1.5px dashed #c9c2ab; background:#faf8ef; border-radius:12px;
  padding:16px; text-align:center; color:#8a8266; font-size:13.5px}
.imgph .ico{font-size:22px}
.imgph a{font-size:13px}

/* read-more expansion */
details.more{margin:2px 16px 0; border-top:1px dashed #ece8da}
details.more>summary{cursor:pointer; list-style:none; user-select:none; color:var(--accent-dark);
  font-size:14px; font-weight:700; padding:11px 2px 6px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"▾"; float:right; color:var(--muted); font-weight:400}
details.more[open]>summary::after{content:"▴"}
.more-body{font-size:14.5px; color:#333; padding:2px 2px 6px; line-height:1.85}
.more-body p{margin:10px 0}
.more-body b{color:var(--accent-dark)}

/* link buttons */
.btns{display:flex; flex-wrap:wrap; gap:8px; padding:10px 16px 2px}
.btn{display:inline-flex; align-items:center; gap:5px; text-decoration:none; font-size:13.5px;
  padding:8px 12px; border-radius:10px; border:1px solid var(--line); background:#fafafa; color:#333}
.btn.map{background:#eef7fb; border-color:#cfe6f0; color:var(--accent-dark); font-weight:600}
.btn.cn{background:#fbf0ed; border-color:#f1d5cc; color:#b23c2a; font-weight:600}
.btn.dir{background:#eaf6ee; border-color:#cfe8d6; color:#2c7a4b; font-weight:600}
.leg-note{font-size:13px; color:#6b7178; background:#eef7fb; border:1px solid #d7ebf3;
  border-radius:10px; padding:9px 12px; margin:0 0 12px}
.btn:active{transform:translateY(1px)}

/* weather card */
.wx-card{background:linear-gradient(135deg,#2b7ea0,#14607a); color:#fff; border-radius:14px; padding:14px 16px}
.wx-load{font-size:14px; opacity:.9; padding:6px 0}
.wx-top{display:flex; align-items:center; gap:12px}
.wx-ico{font-size:38px; line-height:1}
.wx-mid{flex:1}
.wx-temp{font-size:26px; font-weight:600}
.wx-temp span{font-size:16px; font-weight:400; opacity:.85}
.wx-desc{font-size:14px; opacity:.92}
.wx-place{text-align:right; font-size:12.5px; opacity:.9; line-height:1.5}
.wx-row{margin-top:10px; font-size:13.5px; opacity:.95}
.wx-note{margin-top:8px; font-size:11.5px; opacity:.75}
.wx-soon{display:flex; align-items:center; gap:12px}
.wx-soon .wx-ico{font-size:32px}
.wx-note2{font-size:12.5px; opacity:.9; margin-top:2px}
.wx-src{display:inline-block; margin-top:12px; font-size:13px; color:#fff; background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35); border-radius:999px; padding:6px 13px; text-decoration:none}

/* region deep-dive cards */
.deep{background:#fff; border:1px solid var(--line); border-radius:12px; margin:10px 0; overflow:hidden}
.deep>summary{cursor:pointer; list-style:none; padding:13px 15px; font-weight:700; color:var(--accent-dark); font-size:15px}
.deep>summary::-webkit-details-marker{display:none}
.deep>summary::after{content:"▾"; float:right; color:var(--muted); font-weight:400}
.deep[open]>summary::after{content:"▴"}
.deep .dc{padding:0 15px 14px; font-size:14.5px; line-height:1.9; color:#333}
.deep .dc b{color:var(--accent-dark)}
.wlink{color:#14607a; font-weight:700; text-decoration:none; border-bottom:1px dotted #8fb9c6}
.wlink::after{content:"\2197"; font-size:.72em; vertical-align:super; color:#8fb9c6; margin-left:1px}
.wlink:active{opacity:.6}
.deep .dc ul{margin:6px 0 0; padding-left:18px}
.deep .dc li{margin:6px 0}

/* meals & wine pairing */
.meal{background:#fff; border:1px solid var(--line); border-radius:14px; margin:12px 0; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.04)}
.meal-h{background:#f3efe2; padding:11px 15px; font-weight:700; color:var(--accent-dark); font-size:15px}
.meal-h .meal-t{float:right; font-weight:400; font-size:12px; color:var(--muted)}
.meal-b{padding:6px 15px 12px; font-size:14.5px; line-height:1.9; color:#333}
.meal-b p{margin:9px 0}
.meal-b .ml{font-weight:700; color:var(--accent-dark); margin-right:6px}
.meal-b .ml.w{color:#8a3b52}
.meal-b .ml.pair{color:#2c7a4b}

/* best-photo-spot line */
.photo-spot{margin:2px 14px 0; background:#fbf7ef; border:1px solid #ede0c6; border-radius:10px;
  padding:8px 11px; font-size:12.5px; color:#7a5a12; line-height:1.7}
.photo-spot b{color:#7a5a12}
.photo-spot a{color:#14607a; font-weight:600; white-space:nowrap}

/* schedule table */
details.sched{background:#fff; border:1px solid var(--line); border-radius:14px; margin-top:12px; overflow:hidden}
details.sched>summary{cursor:pointer; padding:13px 16px; font-weight:700; color:var(--accent-dark); list-style:none}
details.sched>summary::-webkit-details-marker{display:none}
details.sched>summary::after{content:"▾"; float:right; color:var(--muted)}
details.sched[open]>summary::after{content:"▴"}
table.sc{width:100%; border-collapse:collapse; font-size:13.5px}
table.sc th,table.sc td{text-align:left; padding:8px 10px; border-top:1px solid var(--line); vertical-align:top}
table.sc th{background:#f3efe2; color:#555; font-weight:600}
table.sc td.time{white-space:nowrap; color:var(--accent-dark); font-variant-numeric:tabular-nums}

/* glossary */
.gloss{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.gloss .row{display:flex; gap:10px; padding:11px 14px; border-top:1px solid var(--line)}
.gloss .row:first-child{border-top:0}
.gloss .w{flex:0 0 34%; font-weight:700}
.gloss .d{flex:1; font-size:14px; color:#333}

/* reading list */
.reads a{display:block; padding:11px 14px; background:#fff; border:1px solid var(--line);
  border-radius:11px; margin:8px 0; text-decoration:none}
.reads a::after{content:"↗"; float:right; color:var(--muted)}

/* day cards (home) */
.daycard{display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:10px 0;
  box-shadow:0 1px 8px rgba(0,0,0,.03)}
.daycard .d{flex:0 0 auto; width:52px; height:52px; border-radius:12px; background:var(--accent);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1}
.daycard .d .n{font-weight:700; font-size:17px}
.daycard .d .t{font-size:10px; opacity:.85}
.daycard .m{flex:1; min-width:0}
.daycard .m .city{font-weight:700}
.daycard .m .meta{color:var(--muted); font-size:13px}
.daycard.soon{opacity:.62}
.daycard.soon .d{background:#b8bcc0}
.daycard .go{color:var(--muted)}
.pill{display:inline-block; font-size:11px; padding:1px 8px; border-radius:999px; background:#eaf5f9; color:var(--accent-dark); margin-left:6px}

footer{padding:26px 0 40px; color:var(--muted); font-size:13px; text-align:center}
footer .note{background:#fbfaf5; border:1px solid var(--line); border-radius:12px; padding:12px 14px; margin-bottom:14px; text-align:left}
.backtop{display:block; text-align:center; padding:10px; color:var(--accent-dark); text-decoration:none; font-size:14px}

/* more-content menu + bottom-sheet drawer */
.more-menu-sec .panel-menu{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.panel-menu button{font-family:inherit; font-size:14px; font-weight:700; color:var(--accent-dark); background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:13px 12px; cursor:pointer; text-align:left;
  box-shadow:0 1px 6px rgba(0,0,0,.04); display:flex; align-items:center; gap:7px}
.panel-menu .pm-ic{font-size:17px}
.panel-menu .pm-t{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.panel-menu .arw{margin-left:auto; color:var(--muted); font-weight:400}
.drawer-ov{position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:200; opacity:0; pointer-events:none; transition:opacity .2s}
.drawer-ov.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; left:0; right:0; bottom:0; z-index:201; background:#f6f4ec; border-radius:16px 16px 0 0;
  max-height:86vh; transform:translateY(100%); transition:transform .25s ease; display:flex; flex-direction:column;
  max-width:680px; margin:0 auto; box-shadow:0 -6px 24px rgba(0,0,0,.2)}
.drawer.open{transform:translateY(0)}
.drawer-head{position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between; border-radius:16px 16px 0 0}
.drawer-title{font-weight:700; color:var(--accent-dark); font-size:16px}
.drawer-close{border:0; background:#eef0ee; border-radius:50%; width:30px; height:30px; font-size:15px; cursor:pointer; color:#555}
.drawer-body{overflow:auto; padding:2px 16px 28px; -webkit-overflow-scrolling:touch}
.drawer-body > section{padding:8px 0}
.drawer-body > section > h2.sec{display:none}