@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Libre+Caslon+Display&display=swap');

:root { --paper:#f6f3eb; --ink:#344334; --muted:#77796c; --line:#deded1; --rust:#ad583b; --serif:'Libre Caslon Display',Georgia,serif; --sans:'DM Sans','Segoe UI',sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:14px; -webkit-font-smoothing:antialiased; }
h1:focus { outline:none; }
button,input,a { -webkit-tap-highlight-color:transparent; }
button,input { font:inherit; }
button { cursor:pointer; color:inherit; }
button { border:0; background:none; }
button:disabled { cursor:default; opacity:.55; }
button:not(:disabled),a { transition:background .18s,color .18s,box-shadow .18s,transform .18s; }
button:focus-visible,a:focus-visible,input:focus-visible { outline:3px solid #af6544; outline-offset:4px; }
button:not(:disabled):hover { color:var(--rust); }
a { color:inherit; }
.icon { width:21px; height:21px; flex-shrink:0; vertical-align:middle; }
.travel-app { max-width:2000px; margin:auto; }
.app-header { height:98px; margin:0 42px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:13px; align-items:center; text-decoration:none; width:250px; }
.brand img { width:43px; height:43px; }
.brand>span { font-family:var(--serif); font-size:41px; line-height:.8; letter-spacing:-1.6px; }
.brand-sub { display:block; font:8px var(--sans); letter-spacing:2.5px; margin-top:10px; }
.header-center { font:italic 18px Georgia,serif; color:#7a7c6c; display:flex; gap:13px; align-items:center; }
.tiny-star { color:#a08150; font-size:29px; font-style:normal; }
.edition { display:flex; gap:10px; align-items:center; font-size:9px; font-weight:600; letter-spacing:1.8px; }
.status-dot { display:inline-block; width:6px; height:6px; background:#6f805d; border-radius:50%; flex-shrink:0; }
.edition-number { font:24px var(--serif); margin-left:17px; padding-left:24px; border-left:1px solid var(--line); }
.workspace { display:grid; grid-template-columns:326px minmax(0,1fr); gap:38px; padding:30px 32px 0 42px; min-height:760px; height:calc(100dvh - 151px); max-height:1100px; }
.journal-panel { min-width:0; overflow:auto; scrollbar-width:thin; scrollbar-color:#d2d0c1 transparent; display:flex; flex-direction:column; padding-right:2px; }
.eyebrow { font-size:9px; font-weight:600; letter-spacing:2px; }
.trip-heading { padding-top:7px; }
.eyebrow span { margin:0 8px; color:#aaa68e; }
h1 { font-family:var(--serif); font-weight:400; font-size:61px; line-height:1.08; margin:19px 0 14px; letter-spacing:-2px; }
h1>span { color:var(--rust); }
.trip-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.85; }
.search-section { position:relative; margin-top:30px; }
.search-section label { display:block; margin-bottom:10px; font-size:13px; font-weight:600; }
.search-box { height:52px; display:flex; align-items:center; border:1px solid #cccdbf; border-radius:7px; padding:5px 5px 5px 13px; background:#fbfaf5; gap:10px; transition:border-color .2s; }
.search-box:focus-within { border-color:#78866b; box-shadow:0 0 0 3px #78866b15; }
.search-box>.icon { color:#858877; width:18px; }
.search-box input { width:0; flex:1; border:0; background:transparent; outline:none; font-size:12px; color:var(--ink); }
.search-box input::placeholder { color:#8a8c7f; }
.search-submit { display:grid; place-items:center; border-radius:4px; width:39px; height:39px; background:var(--ink); color:#fff; }
.search-submit:not(:disabled):hover { background:#506046; color:white; }
.search-caption { display:flex; align-items:center; gap:6px; font-size:10px; color:#898b7d; margin-top:9px; }
.search-caption .icon { width:12px; height:12px; }
.panel-tabs { display:flex; gap:27px; border-bottom:1px solid var(--line); margin-top:27px; }
.panel-tabs button { position:relative; padding:0 0 13px; font-size:12px; color:#858779; }
.panel-tabs button.active { font-weight:600; color:var(--ink); }
.panel-tabs button.active::after { content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; background:var(--ink); }
.panel-tabs button span { font-size:9px; padding:2px 6px; margin-left:5px; background:#e8e9df; border-radius:4px; }
.section-kicker { font-size:9px; letter-spacing:1.8px; color:#878979; margin:24px 0 13px; }
.inspiration-card { width:100%; border:1px solid #d9d7c9; border-radius:7px; padding:0; overflow:hidden; text-align:left; background:#f9f7f0; }
.inspiration-card:not(:disabled):hover { box-shadow:0 5px 14px #414b3610; }
.temple-art { height:164px; position:relative; overflow:hidden; background:#d4c7a9; }
.temple-illustration { width:100%; height:100%; object-fit:cover; }
.art-tag { position:absolute; top:14px; left:15px; font-size:7px; color:#4f5948; letter-spacing:1.5px; z-index:1; }
.art-coordinates { position:absolute; bottom:9px; right:12px; font-size:7px; letter-spacing:1px; color:#46553f; }
.inspiration-caption { display:flex; align-items:center; justify-content:space-between; padding:14px 15px; gap:6px; }
.inspiration-caption strong { display:block; font:22px var(--serif); letter-spacing:-.4px; }
.inspiration-caption small { display:block; font-size:10px; color:var(--muted); margin-top:5px; }
.circle-arrow { width:30px; height:30px; border:1px solid #d3d6c6; border-radius:50%; display:grid; place-items:center; flex-shrink:0; }
.circle-arrow .icon { width:15px; }
.suggestion-list { margin-top:6px; }
.suggestion-list button { display:flex; align-items:center; gap:11px; padding:13px 0; width:100%; text-align:left; border-bottom:1px solid #e4e3d8; }
.suggestion-list button:last-child { border-bottom:0; }
.suggestion-icon { width:35px; height:35px; border-radius:6px; background:#eaece2; display:grid; place-items:center; }
.suggestion-icon .icon { width:18px; color:#7b856d; }
.suggestion-list button>span:nth-child(2) { flex:1; }
.suggestion-list strong { display:block; font-size:12px; font-weight:550; }
.suggestion-list small { display:block; font-size:10px; margin-top:3px; color:#838676; }
.suggestion-list button>.icon { width:15px; margin-right:5px; color:#939582; }
.panel-footer { display:flex; align-items:center; gap:13px; margin-top:auto; padding:22px 0 13px; }
.little-spark { font-size:33px; color:#8c967c; }
.panel-footer p { font-size:10px; line-height:1.9; margin:0; color:#878b7c; }
.panel-footer em { font:italic 11px Georgia,serif; }
.map-section { position:relative; overflow:hidden; border:1px solid #ccc9b6; border-radius:10px; isolation:isolate; background:#dfd4b6; box-shadow:0 3px 12px #51574008; }
#travel-map { position:absolute; inset:0; background:#e0d6ba; z-index:0; font-family:var(--sans); }
.paper-texture { position:absolute; inset:0; z-index:400; pointer-events:none; box-shadow:inset 0 0 100px #8d642332,inset 0 0 4px #80652e33; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2389794a' opacity='.17' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); opacity:.65; mix-blend-mode:multiply; }
.natural-style .paper-texture { opacity:.15; }
.map-topline { position:absolute; top:22px; left:24px; right:24px; z-index:500; display:flex; justify-content:space-between; align-items:center; gap:10px; pointer-events:none; }
.map-label { padding:11px 13px; background:#f9f5e9ed; border:1px solid #c9c7b45c; border-radius:5px; display:flex; align-items:center; gap:9px; font-size:8px; font-weight:600; letter-spacing:1.4px; box-shadow:0 2px 8px #54472208; }
.map-label-divider { opacity:.35; margin:0 2px; }
.style-switch { pointer-events:auto; display:flex; align-items:center; gap:8px; background:#f9f5e9f2; border:1px solid #c9c7b482; border-radius:5px; padding:10px 13px; font-size:10px; box-shadow:0 2px 8px #54472208; }
.style-switch .icon { width:16px; height:16px; }
.map-title { position:absolute; top:97px; left:34px; z-index:450; pointer-events:none; color:#6a654e; text-shadow:0 1px 5px #eee5ce; }
.map-title>div { font-size:8px; letter-spacing:3.5px; margin-left:3px; }
.map-title>span { display:block; font:64px var(--serif); letter-spacing:-1.5px; margin-top:0; }
.map-title>small { font:italic 12px Georgia,serif; opacity:.8; }
.map-zoomed .map-title { opacity:0; }
.map-title { transition:opacity .4s; }
.map-controls { position:absolute; z-index:500; right:24px; top:89px; width:41px; padding:4px; background:#faf6eaed; border:1px solid #c9c7b499; border-radius:6px; box-shadow:0 3px 8px #54472210; }
.map-controls button { width:32px; height:36px; display:grid; place-items:center; font-size:24px; font-weight:400; border-radius:4px; }
.map-controls button:not(:disabled):hover { background:#e7dfca; }
.map-controls .icon { width:17px; }
.control-divider { height:1px; margin:3px 3px; background:#ddd6c2; }
.compass-rose { position:absolute; z-index:450; pointer-events:none; right:28px; bottom:96px; width:84px; color:#756a4b; opacity:.75; text-align:center; }
.compass-rose>span { display:block; font:12px Georgia,serif; margin-bottom:1px; }
.compass-rose svg { width:84px; height:84px; stroke:currentColor; stroke-width:.7; fill:none; }
.compass-rose .compass-fill { fill:currentColor; }
.map-note { position:absolute; z-index:500; left:27px; bottom:61px; display:flex; align-items:center; gap:14px; padding:18px 20px; background:#faf7eeed; border:1px solid #d6d0b9; border-radius:6px; box-shadow:0 5px 18px #57492e0d; max-width:calc(100% - 140px); pointer-events:none; }
.note-icon { width:34px; height:40px; display:grid; place-items:center; color:var(--rust); transform:rotate(-10deg); }
.note-icon .icon { width:29px; height:29px; }
.map-note strong { font:23px var(--serif); font-weight:400; letter-spacing:-.3px; }
.map-note p { margin:5px 0 0; font-size:10px; color:#87816c; }
.note-flourish { font-size:33px; color:#8e9376; margin-left:15px; }
.map-bottom-label { position:absolute; z-index:450; bottom:22px; left:27px; font-size:7px; letter-spacing:1.8px; color:#736d56; pointer-events:none; }
.map-bottom-label span { margin:0 8px; }
.leaflet-control-attribution { font-size:9px!important; background:#f8f4e7e6!important; padding:3px 6px!important; color:#626854; border-radius:3px 0 0 0; }
.leaflet-control-attribution a { color:#5b644d!important; }
.leaflet-control-scale { margin-bottom:40px!important; margin-left:27px!important; }
.leaflet-control-scale-line { border-color:#817a61!important; background:#f5efdc99!important; font-size:8px!important; color:#68644e!important; line-height:1!important; }
.travel-marker { background:none; border:none; }
.pin-head { position:absolute; top:0; left:4px; width:32px; height:32px; display:grid; place-items:center; border:3px solid #f9f1df; background:var(--rust); color:#fff8ea; border-radius:50%; font:600 10px var(--sans); box-shadow:0 2px 5px #553c3260; z-index:2; }
.pin-stem { position:absolute; top:25px; left:18px; width:4px; height:21px; border-radius:0 0 3px 3px; background:#714d36; box-shadow:2px 2px 4px #4c371842; transform-origin:top; }
.preview-marker .pin-head { background:#3b513d; font-size:16px; }
.place-tooltip { font:500 11px var(--sans); background:#fbf7ec; color:var(--ink); border:1px solid #c9c5b3; box-shadow:0 2px 8px #514d2920; border-radius:4px; padding:7px 12px; }
.place-detail { position:absolute; bottom:62px; left:27px; z-index:500; display:flex; align-items:flex-start; gap:15px; width:380px; max-width:calc(100% - 100px); padding:23px; background:#fcf9f0f5; border:1px solid #d4ceb8; border-radius:7px; box-shadow:0 8px 30px #5c4f3522; }
.detail-pin { background:#f1e6d5; border-radius:50%; width:42px; height:42px; display:grid; place-items:center; color:var(--rust); flex-shrink:0; }
.detail-content { min-width:0; }
.detail-content .eyebrow { font-size:8px; letter-spacing:1.5px; color:#8d896e; }
.detail-content h2 { font:34px/1.1 var(--serif); margin:9px 0; overflow-wrap:anywhere; }
.detail-content p { margin:0 0 8px; font-size:10px; color:#807b66; }
.detail-content p span { margin:0 7px; }
.detail-content>small { display:block; font-size:10px; line-height:1.6; color:#807e70; max-height:48px; overflow:auto; }
.close-detail { position:absolute; top:7px; right:7px; width:32px; height:32px; font-size:24px; color:#8a8979; }
.save-button { margin-top:16px; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px 15px; background:var(--ink); color:#faf8ef; font-size:11px; border-radius:4px; }
.save-button:not(:disabled):hover { background:#506046; color:white; }
.save-button:disabled { background:#e8edde; color:#526146; opacity:1; }
.save-button .icon { width:15px; height:15px; }
.search-results { position:absolute; z-index:700; top:103px; left:0; right:0; background:#fcfaf3; box-shadow:0 6px 25px #444b3426; border:1px solid #d4d6c7; border-radius:6px; padding:5px; max-height:325px; overflow:auto; }
.results-heading { display:flex; justify-content:space-between; align-items:center; padding:4px 8px; font-size:10px; color:#8a8b79; }
.results-heading button { width:30px; height:30px; font-size:21px; }
.result-row { display:flex; align-items:center; gap:10px; padding:12px 8px; width:100%; text-align:left; border-radius:3px; }
.result-row:hover { background:#edf0e3; }
.result-row>.icon { width:16px; color:#8c917c; }
.result-row>span { min-width:0; flex:1; }
.result-row strong { display:block; font-size:12px; }
.result-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; margin-top:5px; color:#8b8c7d; }
.feedback { font-size:12px; color:#915137; line-height:1.65; padding:10px 12px; background:#eee7d8; border-radius:4px; }
.empty-places { padding:26px 17px; text-align:center; border:1px dashed #cbd0be; border-radius:6px; background:#edeee355; }
.empty-places>.icon { width:32px; height:32px; color:#899679; }
.empty-places h3 { font:27px var(--serif); margin:15px 0 8px; }
.empty-places p { color:#858876; line-height:1.8; font-size:12px; }
.text-button { font-size:11px; text-decoration:underline; text-underline-offset:4px; padding:10px; }
.text-button span { padding-left:10px; }
.saved-row { display:flex; border-bottom:1px solid var(--line); padding:12px 0; align-items:center; }
.saved-row>button:first-child { display:flex; align-items:center; gap:12px; text-align:left; flex:1; min-width:0; padding:6px 0; }
.number-pin { flex-shrink:0; background:#eee3d4; border:1px solid #d6bfaa; width:33px; height:33px; border-radius:50%; color:var(--rust); display:grid; place-items:center; font-size:10px; font-weight:600; }
.saved-row strong { display:block; font-size:13px; overflow-wrap:anywhere; }
.saved-row small { display:block; margin-top:6px; color:#888875; font-size:9px; }
.remove-place { padding:10px; opacity:.6; }
.remove-place .icon { width:16px; }
.app-footer { height:53px; display:flex; align-items:center; justify-content:space-between; margin:0 42px; color:#91917f; }
.app-footer>span:first-child { font-size:7px; letter-spacing:1.5px; }
.footer-star { margin:0 10px; font-size:16px; vertical-align:middle; color:#9b987e; }
.app-footer>span:last-child { font-size:9px; }
.footer-divider { margin:0 17px; color:#b3b19c; }
.map-loading,.map-error { position:absolute; z-index:600; left:50%; top:45%; transform:translate(-50%,-50%); width:max-content; max-width:85%; padding:20px; background:#faf7ecf5; border:1px solid #c6bea7; border-radius:6px; font-size:12px; box-shadow:0 7px 30px #4b442924; }
.map-loading { display:flex; align-items:center; gap:13px; }
.map-error { line-height:1.8; }
.map-error button { display:block; text-decoration:underline; padding:10px 0 0; }
.spinner { display:inline-block; width:17px; height:17px; border:2px solid currentColor; border-right-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
.storage-notice { position:fixed; z-index:2000; bottom:20px; left:50%; transform:translateX(-50%); width:90%; max-width:600px; padding:15px 20px; background:#344334; color:#faf7ed; box-shadow:0 5px 25px #0003; border-radius:6px; font-size:12px; }
.storage-notice button { float:right; color:inherit; }
@keyframes spin { to { transform:rotate(360deg); } }
@media(min-width:1600px) { .workspace { grid-template-columns:360px minmax(0,1fr); gap:45px; } .temple-art { height:200px; } .trip-heading { padding-top:20px; } h1 { font-size:68px; } .search-section { margin-top:38px; } }
@media(max-height:880px) and (min-width:1001px) { .workspace { min-height:650px; } .trip-heading h1 { margin-top:13px; font-size:55px; } .search-section { margin-top:22px; } .panel-tabs { margin-top:20px; } .section-kicker { margin-top:19px; } .temple-art { height:136px; } .panel-footer { padding-top:12px; } }
@media(max-width:1100px) { .app-header { margin:0 25px; } .workspace { grid-template-columns:290px minmax(0,1fr); gap:25px; padding-left:25px; padding-right:22px; } h1 { font-size:54px; } .header-center { font-size:16px; } .brand { width:210px; } .edition { letter-spacing:1px; font-size:8px; } .map-label { font-size:7px; letter-spacing:1px; } .map-label-divider { display:none; } .map-note { left:18px; padding:14px; max-width:calc(100% - 95px); gap:8px; } .map-note strong { font-size:21px; } .map-note p { line-height:1.7; } .note-flourish { display:none; } .compass-rose { width:60px; right:18px; } .compass-rose svg { width:60px; height:60px; } .inspiration-caption strong { font-size:20px; } .map-topline { left:18px; right:18px; } .map-title { left:24px; } .map-controls { right:18px; } .app-footer { margin:0 25px; } }
@media(max-width:850px) and (min-width:701px) { .workspace { grid-template-columns:260px minmax(0,1fr); gap:20px; padding-left:20px; } h1 { font-size:48px; } .header-center { display:none; } .map-label { display:none; } .map-topline { justify-content:flex-end; } .map-title { top:70px; } .map-title>span { font-size:50px; } .map-title>small { font-size:10px; } .map-controls { top:180px; } .map-note { max-width:calc(100% - 36px); bottom:70px; } .map-note .note-icon { display:none; } .compass-rose { bottom:180px; } .place-detail { left:15px; padding:18px; max-width:calc(100% - 30px); gap:10px; } .detail-pin { display:none; } .map-bottom-label { font-size:6px; letter-spacing:1px; left:18px; } }
@media(max-width:700px) {
    .app-header { height:76px; margin:0 21px; } .brand { width:auto; gap:10px; } .brand img { width:35px; height:35px; } .brand>span { font-size:34px; } .brand-sub { font-size:6px; letter-spacing:2px; margin-top:8px; } .header-center { display:none; } .edition { font-size:7px; letter-spacing:1px; gap:7px; } .edition-number { display:none; }
    .workspace { display:flex; flex-direction:column; height:auto; max-height:none; min-height:0; padding:24px 16px 0; gap:20px; } .journal-panel { overflow:visible; padding:0 7px; display:contents; } .trip-heading { padding:0 7px; } .eyebrow { font-size:8px; } h1 { font-size:57px; margin:11px 0 7px; } .trip-heading p { font-size:12px; line-height:1.6; } .trip-heading p br { display:none; }
    .search-section { margin:2px 7px 0; order:1; } .search-section label { font-size:12px; } .search-box { height:53px; } .search-box input { font-size:16px; } .search-box input::placeholder { font-size:12px; } .search-caption { font-size:9px; } .map-section { order:2; height:570px; height:73svh; min-height:470px; max-height:690px; scroll-margin-top:12px; }
    .panel-tabs { order:3; margin:0 7px; gap:28px; } .discover,.saved-section { order:4; padding:0 7px; } .section-kicker { margin-top:0; } .inspiration-card { display:flex; align-items:stretch; } .temple-art { width:43%; height:145px; flex-shrink:0; } .temple-illustration { width:245px; max-width:none; position:absolute; left:50%; transform:translateX(-50%); } .art-tag { display:none; } .art-coordinates { font-size:5px; right:8px; } .inspiration-caption { flex:1; padding:15px; gap:8px; } .inspiration-caption strong { font-size:25px; line-height:1.05; } .inspiration-caption small { font-size:9px; margin-top:9px; } .circle-arrow { display:none; } .suggestion-list { display:flex; gap:18px; } .suggestion-list button { width:50%; border-bottom:0; gap:8px; } .suggestion-list button>.icon { display:none; } .suggestion-list strong { font-size:11px; } .suggestion-list small { font-size:8px; } .suggestion-icon { width:30px; flex-shrink:0; }
    .panel-footer { display:none; } .map-topline { top:14px; left:13px; right:13px; gap:5px; } .map-label { padding:10px; font-size:6px; letter-spacing:.8px; gap:6px; } .map-label-divider { display:inline; margin:0; } .style-switch { padding:9px; font-size:9px; gap:5px; } .style-switch .icon { width:14px; height:14px; } .map-title { top:76px; left:20px; } .map-title>div { font-size:6px; letter-spacing:2.5px; } .map-title>span { font-size:47px; } .map-title>small { font-size:10px; } .map-controls { top:72px; right:13px; width:41px; } .map-controls button { min-height:40px; } .compass-rose { width:54px; right:17px; bottom:145px; } .compass-rose svg { width:54px; height:54px; } .compass-rose>span { font-size:10px; }
    .map-note { left:13px; right:13px; max-width:none; bottom:61px; padding:15px 13px; gap:8px; } .map-note strong { font-size:22px; } .map-note p { font-size:9px; } .note-icon { width:28px; } .note-icon .icon { width:24px; } .map-bottom-label { bottom:29px; left:16px; font-size:6px; letter-spacing:1.3px; } .leaflet-control-scale { margin-left:16px!important; margin-bottom:45px!important; } .leaflet-control-attribution { font-size:8px!important; }
    .place-detail { bottom:62px; left:13px; max-width:calc(100% - 26px); padding:19px 17px; gap:13px; } .detail-pin { width:34px; height:34px; } .detail-content h2 { font-size:31px; } .detail-content .eyebrow { font-size:7px; } .detail-content>small { max-height:32px; } .detail-content p { font-size:9px; } .save-button { min-height:42px; } .search-results { top:101px; }
    .search-results { position:relative; top:auto; margin-top:12px; max-height:230px; }
    .app-footer { height:66px; padding:14px 0; margin:0 23px; border-top:1px solid var(--line); align-items:flex-start; flex-direction:column; justify-content:center; gap:6px; } .app-footer>span:first-child { font-size:6px; letter-spacing:1px; } .app-footer>span:last-child { font-size:8px; } .footer-star { font-size:11px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }