/* Flâneur — notebook direction (1a/3a). Design tokens from the mockup. */
:root{
  --paper:#faf6ef; --paper2:#f5efe4; --card:#fffdf7; --tile:#f2ebdd;
  --ink:#1f1b16; --text:#463f36; --muted:#7d7263; --muted2:#8a7f70;
  --line:#e4dccd; --line2:#ded5c6;
  --rust:#b4552f; --rust-dk:#8e3f20; --olive:#5f6f4a;
  --tan:#d9cdb8; --sage:#cdd6c4;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Karla",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--rust);text-decoration:none}
a:hover{color:var(--rust-dk)}
.mono{font:500 10px var(--mono);letter-spacing:.1em;color:var(--muted2);text-transform:uppercase}
.serif{font-family:var(--serif)}
.rule{height:1px;background:var(--line)}
.hidden{display:none!important}

/* ---------- top bar ---------- */
#topbar{position:sticky;top:0;z-index:40;height:60px;display:flex;align-items:center;gap:20px;
  padding:0 24px;background:var(--paper2);border-bottom:1px solid var(--line)}
#topbar .logo{font:400 22px var(--serif);color:var(--ink);white-space:nowrap}
#topbar .logo b{font-weight:400}
#topbar .tagline{font:500 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted2);white-space:nowrap;border-left:1px solid var(--line2);padding-left:16px}
@media(max-width:1023px){#topbar .tagline{display:none}}
.searchwrap{position:relative;flex:1;max-width:440px}
.searchwrap input{width:100%;height:38px;border-radius:19px;border:1px solid var(--line2);
  background:var(--card);padding:0 16px 0 34px;font:400 13.5px var(--sans);color:var(--ink);outline:none}
.searchwrap input:focus{border-color:var(--ink)}
.searchwrap .ic{position:absolute;left:13px;top:9px;color:var(--muted);font-size:15px;pointer-events:none}
.navlink{font:500 12.5px var(--sans);color:var(--text)}
.grow{flex:1}

/* search dropdown */
#searchpanel{position:absolute;left:0;top:46px;width:min(560px,92vw);max-height:70vh;overflow-y:auto;
  background:var(--card);border:1px solid var(--line2);border-radius:12px;box-shadow:0 14px 40px rgba(31,27,22,.18);
  padding:8px 0;z-index:50}
#searchpanel .grouphdr{padding:9px 16px 5px}
#searchpanel .sr{display:flex;gap:11px;align-items:flex-start;padding:8px 16px;cursor:pointer}
#searchpanel .sr:hover{background:var(--paper)}
#searchpanel .sr .tag{width:46px;flex:none;padding-top:2px}
#searchpanel .sr .title{font:400 15.5px/1.25 var(--serif);color:var(--ink)}
#searchpanel .sr .sub{font:400 11.5px/1.4 var(--sans);color:var(--muted)}
#searchpanel .empty{padding:14px 16px;font:400 13px var(--sans);color:var(--muted)}

/* ---------- category accent ---------- */
.cat-stay{color:var(--rust)} .cat-food{color:var(--olive)} .cat-places{color:#7d7263}
.cat-transport{color:#5f7183} .cat-nightlife{color:#7a5c8a} .cat-shopping{color:#9a6a3c}
.cat-experiences{color:#3f7a6a} .cat-tips{color:#96803a}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{height:34px;padding:0 13px;border-radius:17px;border:1px solid var(--line2);background:transparent;
  color:var(--text);font:500 12px/32px var(--sans);cursor:pointer;white-space:nowrap;transition:.12s}
.chip:hover{background:var(--card)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip .n{color:var(--muted2);margin-left:4px}
.chip.on .n{color:#cdbfae}

/* ---------- avatars ---------- */
.avatar{border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);color:#5a5145;background:var(--tan)}
.avatar.sage{background:var(--sage);color:#4a533f}

/* ---------- generic page frame ---------- */
.page{max-width:1160px;margin:0 auto;padding:26px 24px 80px}
.badge{font:500 9.5px var(--mono);letter-spacing:.05em;padding:2px 6px;border-radius:3px;background:#efe4cf;color:#7a6642}
.badge.contrib{background:#e6e9e0;color:#5f6f4a}

/* ---------- city page ---------- */
.city-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:4px}
.city-title{font:400 42px/1 var(--serif);color:var(--ink);margin:2px 0}
.city-sub{font:400 13px var(--sans);color:var(--muted)}

/* ---------- city photo hero ---------- */
.city-hero{position:relative;border-radius:14px;overflow:hidden;margin:2px 0 12px;
  aspect-ratio:1600/560;background:var(--tile)}
.city-hero .hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.city-hero .hero-overlay{position:absolute;left:0;right:0;bottom:0;padding:28px 26px 22px;
  background:linear-gradient(to top,
    rgba(16,11,7,.97) 0%,rgba(16,11,7,.9) 30%,rgba(16,11,7,.68) 55%,rgba(16,11,7,.3) 80%,transparent 100%)}
.city-hero .city-title.light{color:#fff;margin:2px 0 0;text-shadow:0 2px 20px rgba(0,0,0,.8)}
.city-hero .mono.light{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.city-hero .city-sub.light{color:#fff;font-size:14px;margin-top:4px;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.city-hero .hero-back{position:absolute;top:14px;left:14px;z-index:2;color:#fff;
  font:500 12px var(--sans);padding:7px 13px;border-radius:16px;
  background:rgba(24,17,11,.42);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.city-hero .hero-back:hover{background:rgba(24,17,11,.64);color:#fff}
.city-hero .hero-credit{position:absolute;top:14px;right:14px;z-index:2;
  font:500 9px var(--mono);letter-spacing:.04em;color:rgba(255,255,255,.8);
  background:rgba(24,17,11,.36);padding:5px 9px;border-radius:12px;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.city-hero .hero-credit:hover{color:#fff}
/* accent photo strip under the hero */
.accent-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 8px}
.accent-strip .accent{aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:var(--tile)}
.accent-strip .accent img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.accent-strip .accent:hover img{transform:scale(1.06)}
@media(max-width:640px){
  .city-hero{aspect-ratio:16/10}
  .city-hero .hero-overlay{padding:16px 16px 14px}
  .city-hero .city-title.light{font-size:29px}
  .accent-strip{gap:6px;margin-bottom:6px}
}
/* itinerary / voices tabs */
.tabbar{display:flex;gap:26px;margin:18px 0 2px;border-bottom:1px solid var(--line)}
.tab{background:none;border:none;padding:0 0 11px;cursor:pointer;position:relative;
  font:500 14px var(--sans);color:var(--muted);letter-spacing:.01em}
.tab .sub{font:400 11px var(--sans);color:var(--muted2);margin-left:6px}
.tab.on{color:var(--ink)}
.tab.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
/* itinerary view */
.itin-sec{padding:20px 0;border-bottom:1px solid var(--line)}
.itin-sec .sech{display:flex;align-items:baseline;gap:9px;margin-bottom:12px}
.itin-sec .sech .lab{font:500 10px var(--mono);letter-spacing:.1em}
.itin-sec .sech .cnt{font:400 11px var(--sans);color:var(--muted2)}
.spot{display:flex;gap:14px;align-items:baseline;padding:9px 0}
.spot + .spot{border-top:1px solid var(--line)}
.spot .rank{flex:none;width:22px;font:500 11px var(--mono);color:var(--muted2);padding-top:4px}
.spot .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.spot .nm{font:400 17px/1.3 var(--serif);color:var(--ink)}
.spot .note{font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.spot .side{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.spot .ment{font:400 10.5px var(--mono);color:var(--muted2);white-space:nowrap}
.spot .more{font:500 12px var(--sans);color:var(--rust);cursor:pointer;white-space:nowrap}
.spot .more:hover{color:var(--rust-dk)}
.itin-empty{padding:40px 0;font:400 14px var(--sans);color:var(--muted)}
/* inline source messages under a spot (read more) */
.sources{padding:2px 0 14px 36px;display:flex;flex-direction:column;gap:12px}
.srcmsg{border-left:2px solid var(--line);padding-left:13px;display:flex;flex-direction:column;gap:4px}
.srcmsg .hd{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap}
.srcmsg .hd a{font:600 12.5px var(--sans);color:var(--ink)}
.srcmsg .txt{font:400 14px/1.55 var(--serif);color:var(--text);text-wrap:pretty}
.srcmsg .date{font:400 10px var(--mono);color:var(--muted2)}
@media(max-width:640px){.spot{flex-wrap:wrap}.spot .side{align-items:flex-start;text-align:left;width:100%;flex-direction:row;gap:12px;padding-left:36px}.sources{padding-left:0}}
/* flash highlight when jumping from a spot to its source message */
.reccard.flash{animation:flash 2.6s ease}
@keyframes flash{0%,32%{background:#fbeede;box-shadow:0 0 0 6px #fbeede}100%{background:transparent;box-shadow:none}}
.filterbar{position:sticky;top:60px;z-index:20;background:var(--paper);padding:14px 0 12px;border-bottom:1px solid var(--line)}
.filtnote{display:flex;align-items:center;gap:9px;background:var(--tile);border-radius:8px;padding:9px 12px;margin-top:11px;
  font:400 12.5px var(--sans);color:var(--text)}
.feed{display:flex;flex-direction:column}
.entry{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}
.entry .who{flex:none;width:210px}
.entry .who .nm{font:600 14px var(--sans);color:var(--ink)}
.entry .who .meta{font:400 11.5px/1.5 var(--sans);color:var(--muted);margin-top:3px}
.entry .body{flex:1;display:flex;flex-direction:column;gap:11px;min-width:0}
.reccard{border-left:2px solid var(--line);padding-left:13px;display:flex;flex-direction:column;gap:5px}
.reccard .cattag{font:500 9.5px var(--mono);letter-spacing:.04em}
.reccard .txt{font:400 15px/1.55 var(--serif);color:var(--ink);text-wrap:pretty}
.reccard .date{font:400 10.5px var(--mono);color:var(--muted2)}
@media(max-width:720px){.entry{flex-direction:column;gap:10px}.entry .who{width:auto}}

/* ---------- profile ---------- */
.prof-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.prof-name{font:400 30px/1.1 var(--serif);color:var(--ink)}
.tiles{display:flex;gap:8px;margin:14px 0}
.tile{flex:1;background:var(--tile);border-radius:8px;padding:11px 12px}
.tile .v{font:400 22px var(--serif);color:var(--ink)}
.tile .l{font:400 9.5px var(--mono);color:var(--muted2);letter-spacing:.06em}
.section-h{font:500 10px var(--mono);letter-spacing:.1em;color:var(--muted2);margin:20px 0 10px}
.placechips{display:flex;flex-wrap:wrap;gap:7px}
.pchip{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line2);
  font:500 12px/30px var(--sans);color:var(--text)}
.pchip.lived{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- map (index) ---------- */
html.map,body.map{height:100%;overflow:hidden}
#wrap{display:flex;height:calc(100vh - 60px)}
#mapcol{flex:1;position:relative;background:#ece5d8;
  background-image:repeating-linear-gradient(135deg,rgba(31,27,22,.045) 0 1px,transparent 1px 12px)}
#map{display:block;width:100%;height:100%;cursor:grab}#map:active{cursor:grabbing}
.country{fill:#ded3bd;stroke:var(--paper);stroke-width:.7}
.country.out{fill:#e5e0d4;stroke:#f0ebe0}
.clabel{font:500 8.5px var(--mono);letter-spacing:.09em;fill:#a0937f;text-transform:uppercase;pointer-events:none;text-anchor:middle}
.pin{cursor:pointer}
.pin circle{stroke:var(--paper);stroke-width:1.6;transition:r .15s}
.pin text.cnt{font:600 9.5px var(--sans);fill:#fff;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.pin text.name{font:400 10.5px var(--mono);fill:#463f36;text-anchor:middle;opacity:0;transition:opacity .15s;pointer-events:none}
.pin:hover text.name,.pin.sel text.name{opacity:1}
.pin.sel circle{stroke:var(--ink);stroke-width:2.4}
.legend{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:column;gap:7px;
  background:rgba(250,246,239,.94);border:1px solid var(--line2);border-radius:8px;padding:11px 13px}
.legend .row{display:flex;align-items:center;gap:7px;font:400 10.5px var(--mono);color:var(--muted)}
.dot{width:10px;height:10px;border-radius:5px;display:inline-block}
.zoombtns{position:absolute;right:16px;top:16px;display:flex;flex-direction:column;gap:6px}
.zoombtns button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line2);
  background:rgba(250,246,239,.95);font:400 16px var(--sans);color:#463f36;cursor:pointer}
.zoombtns button:hover{background:var(--card)}
#panel{width:340px;flex:none;border-left:1px solid var(--line);background:var(--paper);overflow-y:auto;padding:20px}
#phead{padding:0 0 14px;margin-bottom:16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.btn-dark{height:44px;border-radius:22px;background:var(--ink);color:var(--paper);font:600 13px/44px var(--sans);
  text-align:center;cursor:pointer;display:block;margin-top:18px}
.btn-dark:hover{color:var(--paper);background:#000}
.who-row{display:flex;gap:9px;align-items:center}
.who-row .avatar{width:32px;height:32px;font-size:12px}

/* ============ responsive ============ */
@media(max-width:640px){
  /* top bar: logo + full-width search, drop the redundant nav */
  #topbar{gap:12px;padding:0 14px;height:56px}
  #topbar .navlink,#topbar .grow{display:none}
  #topbar .logo{font-size:20px}
  .searchwrap{max-width:none}
  /* pin the dropdown to the viewport so it never overflows the right edge */
  #searchpanel{position:fixed;left:8px;right:8px;top:56px;width:auto;max-height:76vh}
  /* generic pages */
  .page{padding:18px 16px 64px}
  .city-title{font-size:33px}
  .prof-name{font-size:26px}
  .tiles{flex-wrap:wrap}
  .tile{min-width:calc(50% - 4px)}
  .filterbar{top:56px}
  .tabbar{gap:20px}
  .entry .who{width:auto}
}
/* map page: stack the map above the panel and let the page scroll */
@media(max-width:760px){
  html.map,body.map{height:auto;overflow:auto}
  #wrap{flex-direction:column;height:auto}
  #mapcol{height:58vh;min-height:320px;flex:none}
  #panel{width:auto;flex:none;border-left:none;border-top:1px solid var(--line);
    max-height:none;overflow:visible}
  .legend{left:12px;bottom:12px;padding:9px 11px}
  .legend .row{font-size:10px}
}

/* ---------- source provenance (community / X / future: reddit, insta) ---------- */
.srcbadge{font:600 8.5px var(--mono);letter-spacing:.07em;padding:2px 6px;border-radius:3px;
  text-transform:uppercase;white-space:nowrap;line-height:1.35;display:inline-block}
.srcbadge.src-community{background:#e6e9e0;color:#556047}
.srcbadge.src-x{background:var(--ink);color:var(--paper)}
.srcbadge.src-reddit{background:#f4d9c9;color:#a3401b}
.srcbadge.src-instagram{background:#efe0ea;color:#8a3d73}
.srcbadge.src-other{background:#efe4cf;color:#7a6642}

/* bare accent form (search rows, itinerary section label) — no chip background */
.mono.src-x,.lab.src-x{color:var(--ink)}
.mono.src-community,.lab.src-community{color:var(--olive)}

/* cat tag + source badge share one row inside a card */
.tagrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tagrow .cattag{flex:1;min-width:0}

/* X creator cards */
.xcard .xfoot{display:flex;align-items:center;gap:12px;margin-top:3px}
.xcard .xlink{font:500 12px var(--sans);color:var(--rust);white-space:nowrap}
.xcard .xlink:hover{color:var(--rust-dk)}

/* read-more: label the source group */
.srclabel{font:500 9px var(--mono);letter-spacing:.1em;color:var(--muted2);text-transform:uppercase;margin-bottom:2px}

/* ---------- travel pet (walks along the bottom, waves on hover/click) ---------- */
#travel-pet{position:fixed;left:0;bottom:0;z-index:30;width:98px;height:124px;pointer-events:none}
#travel-pet .pet-move{position:absolute;left:0;bottom:2px;width:98px;height:124px;transform:translateX(0);will-change:transform}
#travel-pet .pet-scale{width:100%;height:100%;transform-origin:center bottom;transform:scaleX(1)}
#travel-pet svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:auto;cursor:pointer}
#travel-pet .pet-inner{transform-box:fill-box}
#travel-pet #leg-back,#travel-pet #leg-front{transform-box:fill-box;transform-origin:center top}
#travel-pet #bag{transform-box:fill-box;transform-origin:94% 3%}
#travel-pet #arm-free{transform-box:fill-box;transform-origin:50% 12%}
/* speech bubble */
#travel-pet .pet-bubble{position:absolute;left:50%;bottom:108px;transform:translateX(-50%) translateY(6px) scale(.9);
  background:var(--card);border:1px solid var(--line2);border-radius:13px;padding:6px 11px;
  font:500 11px var(--sans);color:var(--ink);white-space:nowrap;box-shadow:0 8px 22px rgba(31,27,22,.18);
  opacity:0;transition:opacity .22s ease,transform .22s ease;pointer-events:none}
#travel-pet .pet-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;
  margin-left:-5px;background:var(--card);border-right:1px solid var(--line2);border-bottom:1px solid var(--line2);
  transform:rotate(45deg)}
#travel-pet.pet-say .pet-bubble{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
/* animations while walking */
@keyframes petBob{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-4px) rotate(1.2deg)}}
@keyframes legFwd{0%,100%{transform:rotate(16deg)}50%{transform:rotate(-16deg)}}
@keyframes legBwd{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes bagSwing{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}}
.pet-walking .pet-inner{animation:petBob .55s ease-in-out infinite}
.pet-walking #leg-back{animation:legBwd .55s ease-in-out infinite}
.pet-walking #leg-front{animation:legFwd .55s ease-in-out infinite}
.pet-walking #bag{animation:bagSwing .55s ease-in-out infinite}
/* wave */
@keyframes petWave{0%,100%{transform:rotate(4deg)}25%{transform:rotate(-46deg)}50%{transform:rotate(-24deg)}75%{transform:rotate(-46deg)}}
.pet-waving #arm-free{animation:petWave .5s ease-in-out 3}
@media(max-width:640px){
  #travel-pet,#travel-pet .pet-move{width:76px;height:96px}
  #travel-pet .pet-bubble{bottom:84px;font-size:10px;padding:5px 9px}
}
@media(prefers-reduced-motion:reduce){
  .pet-walking .pet-inner,.pet-walking #leg-back,.pet-walking #leg-front,.pet-walking #bag,.pet-waving #arm-free{animation:none}
}