/* v10 — compact bars in the spirit of an island map UI */
body .topbar{min-height:0;height:64px;padding:0 18px;gap:14px;flex-wrap:nowrap;background:#fffaf2f2;backdrop-filter:blur(10px)}
body .brand{gap:10px}
body .brand img{width:40px;height:40px;border-width:2px}
body .brand small{display:block;font:600 11px/1 'Noto Sans TC',sans-serif;letter-spacing:2.5px;color:#3e5a5f;margin:0 0 4px}
body .brand strong{font-size:14px;font-weight:500;letter-spacing:3px;color:#556e66}
body .area-nav{order:0;width:auto;margin:0 auto;padding:4px;border-radius:24px;background:#f1ecdc;gap:2px;justify-content:center}
body .area-nav button{font-size:13.5px;padding:7px 14px;font-weight:500;color:#3f5c5e}
body .area-nav button em{font-style:normal;font-size:11px;margin-left:5px;opacity:.6}
body .area-nav button[aria-pressed=true]{background:#e8956b;color:#fff}
body .area-nav button[aria-pressed=true] em{opacity:.85}
.top-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.clock{display:flex;flex-direction:column;padding:5px 12px;border-radius:12px;background:#eef3e2;border:1px solid #dfe6cf;line-height:1.15}
.clock span{font-size:10px;color:#6f8b66;letter-spacing:.5px}.clock b{font-weight:500}
.clock strong{font:600 16px/1.2 ui-monospace,'SFMono-Regular',Menlo,monospace;color:#3c5a4e;letter-spacing:1.5px}
body #toggle-list{font-size:13.5px;padding:7px 8px;color:#3f5c5e}
.round-btn{width:34px;height:34px;border-radius:50%;border:1px solid #e3dccb;background:#fffdf7;font:italic 600 15px Georgia,serif;color:#3f5c5e;padding:0;flex-shrink:0}
.round-btn:hover{background:#fbe9dc}
body #hint{top:76px;left:18px;font-size:13px;line-height:1.7;padding:9px 15px}
#hint .hint-sub{font-size:11px;color:#7d8b80}
body footer,body #sound-panel{display:none!important}
/* bottom bar */
body nav{bottom:14px;padding:6px 8px;gap:4px;align-items:center;border-radius:30px;background:#fffaf2f5;box-shadow:0 4px 20px #3d5e5a1f;max-width:calc(100vw - 20px)}
body nav button{font-size:13px;padding:8px 12px;border-radius:20px;color:#3f5c5e}
nav .stat{font-size:12.5px;color:#6b7c74;padding:0 8px;white-space:nowrap;flex-shrink:0}
nav .stat b{font:600 15px ui-monospace,Menlo,monospace;color:#3c5a4e;margin-left:3px}
nav .stat+.stat{border-left:1px solid #e6dfcf}
body nav #home{margin-left:4px}
body nav .oracle-btn{background:#2a62b0;color:#fffaf1}
body nav .oracle-btn:hover{background:#214f91}
#motion,#music-toggle{background:#fbeedd!important;border:1px solid #f1dcc2!important}
#music-toggle[aria-pressed=true]{background:#e2efe6!important;border-color:#c9e0d0!important}
nav .seg{display:flex;background:#f1ecdc;border-radius:20px;padding:2px;flex-shrink:0}
nav .seg button{padding:6px 10px;font-size:14px;color:#8a8a74}
nav .seg button[aria-pressed=true]{background:#fff;color:#d48a3c;box-shadow:0 1px 4px #0000001a}
nav .zoom-controls{display:flex;align-items:center;border:1px solid #e6dfcf;border-radius:20px;padding:0 4px;flex-shrink:0;background:#fffdf7}
nav .zoom-controls button{font-size:17px;padding:5px 10px}
nav .zoom-label{font-size:11px;color:#9a9a86}
body nav #help-btn{width:32px;height:32px;padding:0;font-size:14px}
body[data-time=night] .topbar,body[data-time=night] nav{background:#fffaf2eb}
@media(max-width:1180px){.clock{display:none}body .area-nav button{padding:7px 10px}}
@media(max-width:899px){
 body .topbar{height:auto;min-height:0;padding:8px 12px;flex-wrap:wrap;row-gap:6px}
 body .area-nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto;margin:0;background:none;padding:0}
 body .area-nav button{font-size:13px;padding:6px 11px}
 body #hint{top:122px;left:12px}
 body nav{justify-content:flex-start;overflow-x:auto;bottom:10px;border-radius:22px}
 nav .zoom-controls{display:none}
 #mobile-zoom{top:auto!important;bottom:72px!important}
}
@media(max-width:550px){
 body .brand small{font-size:10px;letter-spacing:2px}
 body .brand strong{font-size:13px}
 body #toggle-list{font-size:0;width:38px}
 nav .stat{font-size:11.5px;padding:0 5px}
 body nav button{font-size:12px;padding:7px 9px}
}
.round-btn{min-width:34px;min-height:34px;max-width:34px;max-height:34px;line-height:32px;text-align:center}body nav #help-btn{min-width:32px;max-width:32px;min-height:32px;max-height:32px}nav .seg button{font-size:13px;filter:saturate(.8)}nav .seg button[aria-pressed=false]{opacity:.55}
/* numbered place tags with leader lines */
body .place-tag{transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;min-height:0;padding:6px 11px;border-radius:5px;border:1px solid #efe6d2;background:#fffbf2f2;color:#3a5552;font-size:13.5px;font-weight:500;letter-spacing:.5px;box-shadow:0 2px 10px #33544b1c;line-height:1.3}
body .place-tag .num{font:600 11px ui-monospace,Menlo,monospace;color:#d07b4e;margin:0}
body .place-tag .leader{position:absolute;left:50%;top:100%;width:1.2px;background:#5e7a6f8c;pointer-events:none}
body .place-tag:hover{background:#fff0e3}
@media(max-width:899px){body .place-tag{font-size:12px;padding:5px 8px;gap:5px}body .place-tag .num{font-size:10px}}
/* wide reading panel for articles and services */
body.journal-open #intro,body.services-open #intro{width:min(880px,64vw)}
body.journal-open #gallery{display:none!important}
.jr{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:20px;align-items:start}
body #journal-list.jr-list{display:flex;flex-direction:column;gap:10px;margin:0}
body #journal-list.jr-list button{display:flex;align-items:center;gap:12px;text-align:left;padding:8px;border-radius:14px;border:1.5px solid #ece4d2;background:#fffdf8;font-size:15px;line-height:1.45;color:#3f5c5a}
#journal-list.jr-list button img{width:76px;height:56px;object-fit:cover;border-radius:9px;flex-shrink:0;background:#f1eadb}
#journal-list.jr-list button[aria-pressed=true]{border-color:#e39a72;background:#fff3ea;box-shadow:0 3px 12px #d9855a22}
#journal-list.jr-list button:hover{background:#fff6ee}
.jr-preview{position:sticky;top:70px}
.jr-photo{display:block;border-radius:16px;overflow:hidden;background:#f1eadb;box-shadow:0 6px 22px #3c5b5222}
.jr-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.jr-photo:hover img{transform:scale(1.03)}
.jr-preview #entry-title{font:500 19px/1.5 'Noto Serif TC',serif;color:#2f5560;margin:14px 0 6px}
.jr-preview #entry-summary{font-size:15px;line-height:1.85;color:#647467;margin:0}
.jr-preview #entry-link{display:inline-block;margin-top:12px;padding:8px 16px;border-radius:20px;background:#2a62b0;color:#fffaf1;text-decoration:none;font-size:14px}
/* services */
body.services-open #intro-content{font-size:inherit}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svc-card{display:flex;flex-direction:column;gap:8px;padding:16px 15px;border-radius:16px;background:#fffdf8;border:1.5px solid #ece4d2;box-shadow:0 3px 14px #3c5b520f}
.svc-card:nth-child(1){border-top:4px solid #e8956b}.svc-card:nth-child(2){border-top:4px solid #2a62b0}.svc-card:nth-child(3){border-top:4px solid #8fb39a}
.svc-top{display:flex;align-items:center;gap:9px}
.svc-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#f4eee0;font-size:19px;flex-shrink:0}
.svc-card h3{margin:0;font:500 16px/1.4 'Noto Serif TC',serif;color:#2f5560}
.svc-lead{margin:0;font-size:14px;line-height:1.6;color:#44605c;font-weight:500}
.svc-what{margin:0;font-size:13px;line-height:1.6;color:#7a887f}
.svc-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;padding-top:4px}
.svc-chips span{font-size:11.5px;padding:3px 9px;border-radius:12px;background:#eef3e6;color:#4f6b55}
.svc-cta{display:block;width:fit-content;margin:18px auto 4px;padding:11px 30px;border-radius:24px;background:#e8956b;color:#fff;text-decoration:none;font-size:15px;letter-spacing:1px;box-shadow:0 4px 14px #d9855a40}
.svc-cta:hover{background:#d9845a}
@media(max-width:899px){body.journal-open #intro,body.services-open #intro{width:auto}.jr{grid-template-columns:1fr}.jr-preview{position:static;order:-1}.svc-grid{grid-template-columns:1fr}#journal-list.jr-list button img{width:64px;height:48px}}
/* work cards — one look, everything visible */
body.journal-open #intro,body #intro:has(#gallery.as-grid:not([hidden])){width:min(900px,66vw)}
.work-heading{font:500 19px/1.4 'Noto Serif TC',serif;color:#3d6a55;margin:6px 0 14px;letter-spacing:1px}
#gallery.as-grid #artwork-open,#gallery.as-grid #image-error{display:none!important}
body #gallery.as-grid #thumbnails,body #journal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin:0;flex-wrap:unset}
.work-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:16px;border:1.5px solid #ece4d2!important;background:#fffdf8;text-align:left;text-decoration:none;color:#2f4f4f;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 3px 12px #3c5b520d}
.work-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px #3c5b521f}
body .work-card img{width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:10px;background:#f1eadb;display:block}
#gallery.as-grid .work-card img{object-fit:contain;background:#f6f0e4}
.work-card strong{font:600 16px/1.45 'Noto Sans TC',sans-serif;color:#26443f}
.work-tag{font-size:12px;padding:3px 10px;border-radius:10px;background:#fbe3d4;color:#b4603c}
#journal-list .work-card:nth-child(even) .work-tag{background:#e5efdf;color:#4e7350}
.work-card p{margin:0;font-size:13px;line-height:1.7;color:#6c7a72;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.work-card em{font-style:normal;font-size:12.5px;color:#2a62b0;margin-top:auto}
#journal #entry-title,#journal #entry-summary,#journal #entry-link,#journal .jr-preview{display:none!important}
@media(max-width:899px){body #gallery.as-grid #thumbnails,body #journal-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.work-card{padding:9px}.work-card strong{font-size:14px}}
body #gallery.as-grid #thumbnails .work-card{padding:12px!important;border:1.5px solid #ece4d2!important;border-radius:16px!important;background:#fffdf8!important;width:auto;height:auto}
body #gallery.as-grid .work-card img{aspect-ratio:4/3;object-fit:cover;background:#f1eadb}
#about-banner{display:block;margin:16px 0 4px;border-radius:16px;overflow:hidden;box-shadow:0 6px 22px #c9835a2e}
#about-banner[hidden]{display:none}
#about-banner img{display:block;width:100%;height:auto}
body:has(#about-banner:not([hidden])) #intro{width:min(820px,62vw)}
@media(max-width:899px){body:has(#about-banner:not([hidden])) #intro{width:auto}}