/* Layout: content column + sticky map (desktop); stacked map-over-list on phones. Limestone ground, Adriatic blue accent. */
:root{
  --bg:#F1F3F2; --surface:#FFFFFF; --surface-2:#E7ECEA; --ink:#13282F; --muted:#56676C; --line:#D2DAD8;
  --accent:#0A6A8C; --accent-soft:#DCEBF0; --on-accent:#FFFFFF;
  --warn:#8A5D0B; --warn-bg:#F5EBD3; --sample:#5E4FA0; --sample-bg:#EAE6F6; --ok:#2B7349; --ok-bg:#DDEFE3; --bad:#A3352B;
  --d1:#0A6A8C; --d2:#B0502A; --d3:#4B7633; --d4:#6B5AA6; --d5:#7B5D2D;
  --c-sights:#1F5E8C; --c-food:#B0502A; --c-streets:#7B5D2D; --c-seafront:#18837D; --c-transport:#4A5064; --c-daytrip:#6B5AA6;
  --tile-filter:none;
  --shadow:0 1px 2px rgba(19,40,47,.06),0 8px 28px rgba(19,40,47,.10);
  --font-display:"Bodoni Moda","Bodoni 72",Didot,Georgia,serif;
  --font-body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0E181C; --surface:#152227; --surface-2:#1C2D33; --ink:#E4EDEE; --muted:#93A6AB; --line:#2A3D44;
  --accent:#5AB6D8; --accent-soft:#17323D; --on-accent:#08161B;
  --warn:#E3B45C; --warn-bg:#33291A; --sample:#B8ACEC; --sample-bg:#272340; --ok:#74C795; --ok-bg:#16301F; --bad:#F08A7E;
  --d1:#5AB6D8; --d2:#E58C60; --d3:#91C46E; --d4:#B8ACEC; --d5:#C9A46A;
  --c-sights:#6FA9D6; --c-food:#E58C60; --c-streets:#C9A46A; --c-seafront:#4CC2B8; --c-transport:#A2A8BF; --c-daytrip:#B8ACEC;
  --tile-filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.6);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;padding-top:env(safe-area-inset-top,0px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:1100;background:var(--bg)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--accent)}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1280px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

/* Site bar */
.sitebar{border-bottom:1px solid var(--line)}
.sitebar .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:12px}
.brand{font-family:var(--font-display);font-size:19px;font-weight:600;text-decoration:none;color:var(--ink);letter-spacing:.01em}
.sitebar nav{display:flex;gap:16px;font-size:13.5px}
.sitebar nav a{color:var(--muted);text-decoration:none}

/* Hero */
.hero{padding-block:28px 18px}
.hero .eyebrow{display:flex;flex-wrap:wrap;gap:6px 14px}
.hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(40px,9vw,68px);line-height:1;letter-spacing:-.01em;margin-top:14px}
.hero h1 em{font-weight:400}
.hero .lede{max-width:60ch;margin-top:14px;font-size:16px}
.trust{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.trust .stat{display:flex;flex-direction:column;gap:1px}
.trust .stat b{font-family:var(--font-mono);font-size:15px;font-weight:500;font-variant-numeric:tabular-nums}
.trust .stat span{font-size:12px;color:var(--muted)}
.trust p{flex:1 1 260px;font-size:13px;color:var(--muted);min-width:0}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font-size:inherit}

/* Unlock */
.unlock{margin-top:14px;border:1px solid var(--accent);background:var(--accent-soft);border-radius:14px;padding:14px;display:grid;gap:12px}
.unlock h3{font-size:17px;font-weight:600}
.unlock p{font-size:14px}
.unlock .buy{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.unlock form{display:flex;gap:8px;flex-wrap:wrap}
.unlock input{flex:1 1 220px;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 12px;font-family:var(--font-mono);font-size:13px}
.unlock .msg{font-size:13px}
.unlock .msg.err{color:var(--bad)}
.unlock .msg.ok{color:var(--ok)}
.localbar{background:var(--sample-bg);color:var(--sample);font-size:13px;font-weight:600}
.localbar .wrap{padding-block:8px}

/* Tabs */
.tabs{position:sticky;top:env(safe-area-inset-top,0px);z-index:1000;background:var(--bg);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tab{appearance:none;border:0;background:none;padding:14px 12px 12px;font-weight:600;font-size:14.5px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

/* App layout */
.app{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;padding-block:18px 64px}
.mapcol,.content{min-width:0}
@media (min-width:960px){
  .app{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px}
  .content{order:1}
  .mapcol{order:2;position:sticky;top:calc(env(safe-area-inset-top,0px) + 66px);align-self:start;height:calc(100vh - 92px)}
  .mapcol .mapbox{height:100%}
}
@media (max-width:959.98px){ .mapcol.hide-mobile{display:none} }

/* Map (Leaflet) */
.mapbox{position:relative;height:min(48vh,440px);min-height:280px;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
#map{width:100%;height:100%;background:var(--surface-2)}
.leaflet-tile-pane{filter:var(--tile-filter)}
.leaflet-container{font-family:var(--font-body)}
.leaflet-control-attribution{font-size:10px}
.pin{background:none;border:0}
.pin span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;font:500 11.5px/1 var(--font-mono);border:2.5px solid var(--surface);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.pin.small span{width:18px;height:18px}
.pin.sel span{outline:2.5px solid var(--ink);outline-offset:2px}
.mapnote{position:absolute;left:10px;bottom:22px;right:10px;display:flex;flex-wrap:wrap;gap:6px;pointer-events:none;z-index:500}
.mapnote span{font-size:11.5px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 10px;color:var(--ink);box-shadow:var(--shadow)}

/* Shared bits */
.section-head{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.section-head h2{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.1}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;white-space:nowrap;line-height:1.3}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.draft{color:var(--warn);background:var(--warn-bg)}
.badge.sample{color:var(--sample);background:var(--sample-bg)}
.badge.verified{color:var(--ok);background:var(--ok-bg)}
.badge.lock{color:var(--muted);background:var(--surface-2)}
.chip{appearance:none;border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:999px;font-size:13.5px;font-weight:500;cursor:pointer;display:inline-flex;gap:7px;align-items:center;white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%}
.chip .n{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.btn{appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:9px 14px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn[disabled]{opacity:.6;cursor:default}

/* Days */
.daypick{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;margin-bottom:16px}
.daybtn{appearance:none;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px 12px;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0}
.daybtn .k{font-family:var(--font-mono);font-size:11.5px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.daybtn .k i{width:10px;height:3px;border-radius:2px;display:inline-block}
.daybtn b{font-size:13.5px;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.daybtn[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dayhead h2{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.1}
.dayhead .meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px;color:var(--muted)}
.dayhead .meta b{color:var(--ink);font-weight:600}
.dayhead p.sum{margin-top:10px;max-width:62ch}
.pace{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--surface-2)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{appearance:none;border:0;background:none;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.pace p{font-size:12.5px;color:var(--muted);flex:1 1 200px;min-width:0}
.timeline{list-style:none;margin:18px 0 0;padding:0}
.stop{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;position:relative;padding-bottom:6px}
.stop::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--line)}
.stop:last-child::before{display:none}
.num{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-mono);font-size:13px;font-weight:500;color:#fff;position:relative;z-index:1}
.stopcard{appearance:none;text-align:left;width:100%;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 14px;cursor:pointer;display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.stopcard:hover{border-color:var(--muted)}
.stopcard .when{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stopcard h3{font-size:17px;font-weight:600;line-height:1.25}
.stopcard p{font-size:14px}
.stopcard .foot{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:4px;font-size:12.5px;color:var(--muted)}
.leg{font-size:12px;color:var(--muted);margin:-4px 0 8px}
.rest .num{background:var(--surface-2);color:var(--muted);border:1px dashed var(--muted)}
.rest .stopcard{background:transparent;border-style:dashed;cursor:default}
.lockedday{margin-top:16px;border:1px dashed var(--line);border-radius:14px;padding:16px;display:grid;gap:8px}

/* Places */
.places{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px}
@media (min-width:640px) and (max-width:959.98px){.places{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pcard{appearance:none;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:13px 14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;min-width:0}
.pcard:hover{border-color:var(--muted)}
.pcard .top{display:flex;justify-content:space-between;gap:8px;align-items:center}
.pcard .cat{display:flex;gap:6px;align-items:center;font-size:12px;font-weight:600;color:var(--muted);min-width:0}
.pcard .cat i{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.pcard h3{font-size:16.5px;font-weight:600;line-height:1.25}
.pcard p{font-size:13.5px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard .tags{display:flex;gap:6px;flex-wrap:wrap}
.pcard.locked{opacity:.75}
.tag{font-family:var(--font-mono);font-size:11px;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--muted)}
.count{font-size:12.5px;color:var(--muted);margin-top:10px}

/* Panels */
.stack{display:flex;flex-direction:column;gap:14px}
.panel{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:16px}
.panel h3{font-size:18px;font-weight:600;line-height:1.25}
.row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.panel p{margin-top:8px;max-width:65ch}
.opts{margin-top:12px;border-top:1px solid var(--line)}
.opt{display:grid;gap:4px;padding:10px 0;border-bottom:1px solid var(--line)}
.opt b{font-weight:600}
.opt .d{font-size:13.5px;color:var(--muted)}
.opt .facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px}
.unv{color:var(--warn);font-weight:500}
.callout{margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--surface-2);font-size:13.5px}
.callout b{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.srcs{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.srcs li{font-size:13.5px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.srcs .type{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legend{display:grid;gap:10px;margin-top:12px}
.legend div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font-size:14px}
.prose p+p{margin-top:10px}
.prose ul{margin:10px 0 0;padding-left:18px}
.prose li{margin:4px 0}

/* Place sheet */
.backdrop{position:fixed;inset:0;background:rgba(8,18,22,.42);z-index:1200;opacity:0;transition:opacity .2s}
.backdrop.on{opacity:1}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1201;max-height:88%;background:var(--surface);border-radius:20px 20px 0 0;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .25s ease}
.sheet.closed{transform:translateY(105%)}
@media (min-width:960px){
  .sheet{left:auto;top:0;width:460px;max-height:none;border-radius:0;border-left:1px solid var(--line)}
  .sheet.closed{transform:translateX(105%)}
}
.sheet-head{padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:10px}
.sheet-body{overflow-y:auto;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));-webkit-overflow-scrolling:touch}
.close{appearance:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;width:34px;height:34px;cursor:pointer;font-size:18px;line-height:1;display:grid;place-items:center}
.place h2{font-family:var(--font-display);font-weight:500;font-size:30px;line-height:1.08;margin-top:6px}
.place .local{font-style:italic;color:var(--muted);margin-top:4px}
.place .coords{margin-top:8px;color:var(--muted)}
.place .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.place section{margin-top:22px}
.place section h3{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.facts-table{border-top:1px solid var(--line);margin:0}
.ft{display:grid;grid-template-columns:minmax(0,9.5em) minmax(0,1fr);gap:4px 12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14px}
.ft dt{font-weight:600}
.ft dd{margin:0;min-width:0}
.ft dd small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.themes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.themes span{font-size:12.5px;border:1px dashed var(--line);border-radius:999px;padding:3px 9px;color:var(--muted)}
.notes{margin:0;padding-left:18px}
.notes li{margin:5px 0;font-size:14px}
.verified-line{margin-top:22px;padding:10px 12px;border-radius:10px;background:var(--surface-2);display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted)}
.verified-line b{color:var(--ink);font-weight:600}
.rating{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.rating i{width:14px;height:6px;border-radius:2px;background:var(--line);display:inline-block}
.rating i.on{background:var(--ok)}

/* Shop */
.shop-hero{padding-block:44px 28px}
.shop-hero h1{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,7vw,60px);line-height:1.04;max-width:16ch}
.shop-hero p{margin-top:16px;font-size:17px;max-width:56ch}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px;padding-bottom:40px}
.gcard{border:1px solid var(--line);background:var(--surface);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px}
.gcard h2{font-family:var(--font-display);font-weight:500;font-size:28px;line-height:1.1}
.gcard .facts{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted)}
.gcard .price{font-family:var(--font-mono);font-size:18px;font-weight:500}
.gcard .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;padding-block:8px 48px}
.method h3{font-size:16px;font-weight:600;margin-bottom:6px}
.method p{font-size:14px;color:var(--muted)}
footer{border-top:1px solid var(--line);padding-block:20px 40px;font-size:12.5px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Static pages */
.sitebar nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.doc{padding-block:36px 56px}
.doc > *{max-width:760px}
.doc h1{font-family:var(--font-display);font-weight:500;font-size:clamp(34px,6vw,48px);line-height:1.08}
.doc .lede{font-size:17px;margin-top:14px;max-width:60ch}
.doc h2{font-family:var(--font-display);font-weight:500;font-size:26px;line-height:1.15;margin-top:36px}
.doc h3{font-size:16px;font-weight:600;margin-top:22px}
.doc p,.doc ul{margin-top:10px;max-width:65ch}
.doc ul{padding-left:20px}
.doc li{margin:6px 0}
.doc .updated{margin-top:10px;font-size:13px;color:var(--muted)}
.doc details{border-top:1px solid var(--line);padding-block:14px}
.doc details:last-of-type{border-bottom:1px solid var(--line)}
.doc summary{cursor:pointer;font-weight:600;font-size:16px;list-style-position:outside}
.doc details p{margin-top:8px}
.faq{margin-top:22px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:14px;margin-top:18px}
.steps div{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:16px}
.steps b{display:block;font-family:var(--font-mono);font-size:12px;color:var(--muted);font-weight:500;margin-bottom:6px}
.steps h3{margin-top:0}
.steps p{font-size:14px;color:var(--muted);margin-top:6px}

/* Footer */
.foot-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;align-items:flex-start}
.foot-grid .brand{font-size:17px}
.foot-grid p{margin-top:4px}
.foot-grid nav{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-grid nav a{color:var(--muted);text-decoration:none;font-size:13.5px}
.foot-grid nav a:hover,.foot-grid nav a[aria-current="page"]{color:var(--ink)}
footer .fine{margin-top:16px;font-size:12px;color:var(--muted);max-width:80ch}
.guide-note{font-size:12.5px;color:var(--muted);padding-block:16px 0;border-top:1px solid var(--line)}
.btn[aria-disabled="true"]{opacity:.6;cursor:default;border-style:dashed}