/* Pocket guide design system.
   Extracted from the original Paris artifact; content never lives here.
   Shared by every guide page and the landing page. */
:root{
  --font-sans:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --font-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --text-xl:1.1875rem;--text-lg:.9375rem;--text-md:.875rem;--text-sm:.8125rem;--text-xs:.75rem;--text-2xs:.6875rem;
  --weight-body:460;--weight-medium:500;--weight-semibold:560;--weight-bold:600;
  --tracking-xl:-.01875rem;--tracking-md:-.00563rem;--tracking-sm:-.0025rem;--tracking-caps:.00063rem;
  --leading-body:1.25rem;
  --bg:#fdfdfc;--ink:#111;--ink-2:rgba(0,0,0,.65);--ink-3:rgba(0,0,0,.4);--ink-4:rgba(0,0,0,.3);
  --hairline:#f2f2f2;--hairline-2:#ededed;--hairline-3:#d9d9d9;--hairline-hover:#666;
  --accent:#3e9fff;--danger:#f43b5c;
  --fill-1:#fcfcfc;--fill-2:#f6f6f6;
  --radius-md:.5rem;--radius-lg:12px;--radius-pill:9999px;
  --duration-hover:.14s;
  --shadow-card:0 2px 8px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
}
@supports (color:color(display-p3 1 1 1)){:root{--accent:color(display-p3 .243137 .623529 1/1)}}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth}
body{font-family:var(--font-sans);font-size:16px;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{color:#111;background:#ededed}
:focus-visible{outline:2px solid rgba(0,122,255,.5)}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.page{max-width:36.375rem;margin:0 auto;padding:2.5rem 1rem 2.5rem}
@media (max-width:768px){.page{padding:1.5rem 1.25rem 2.5rem}}

h1{font-size:var(--text-md);font-weight:var(--weight-bold);letter-spacing:var(--tracking-md);line-height:var(--leading-body)}
.sub{padding-top:.25rem;color:var(--ink-3);font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);line-height:var(--leading-body)}
.sub em{color:#000;font-family:var(--font-serif);font-size:var(--text-md);font-style:italic;font-weight:430;letter-spacing:.01rem;font-variation-settings:"opsz" 10}

/* sticky picker */
.picker{position:sticky;top:0;z-index:20;background:var(--bg);padding:1rem 0 .75rem;margin-top:1rem}
.picker::after{content:"";position:absolute;left:0;right:0;bottom:-1rem;height:1rem;pointer-events:none;background:linear-gradient(var(--bg),transparent)}
.pickrow{display:flex;gap:.5rem;align-items:stretch}
.areawrap{position:relative;flex:1;min-width:0}
.iconbtn{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;border:0;cursor:pointer;background:#fff;border-radius:var(--radius-md);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.08);
  color:var(--ink-2);transition:background .2s ease,color .2s ease;
}
.iconbtn:hover{background:var(--fill-2)}
.iconbtn:active{transform:scale(.95)}
.iconbtn.busy{color:var(--accent);pointer-events:none}
.iconbtn svg{width:16px;height:16px}

/* area trigger: one control that opens the map + list sheet */
.areabtn{
  -webkit-appearance:none;appearance:none;width:100%;display:flex;align-items:baseline;gap:.5rem;
  font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-md);color:var(--ink);
  background:#fff;border:0;border-radius:var(--radius-md);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 1px 4px rgba(0,0,0,.08);
  padding:.6875rem 2.125rem .6875rem .875rem;cursor:pointer;text-align:left;
  transition:background .2s ease;
}
.areabtn:hover{background:var(--fill-2)}
.areabtn:active{transform:scale(.995)}
.areabtn .abname{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.areabtn .abcount{flex:0 0 auto;color:var(--ink-3);font-size:var(--text-sm);font-weight:var(--weight-body);font-variant-numeric:tabular-nums}
.areawrap::after{content:"";position:absolute;right:.9375rem;top:50%;width:.4rem;height:.4rem;margin-top:-.35rem;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg);pointer-events:none}

/* area picker sheet */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity 300ms cubic-bezier(.19,1,.22,1)}
.overlay.show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:50%;bottom:0;transform:translate(-50%,102%);z-index:101;
  width:min(36.375rem,100%);max-height:88vh;display:flex;flex-direction:column;
  background:#fff;border-radius:1rem 1rem 0 0;padding:.875rem 1rem calc(1rem + env(safe-area-inset-bottom));
  box-shadow:0 2px 8px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04);
  transition:transform 300ms cubic-bezier(.19,1,.22,1);
}
.sheet.show{transform:translate(-50%,0)}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:.625rem}
.sheet-head p{font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-md)}
.sheet-close{border:0;background:var(--fill-2);border-radius:9999px;width:1.75rem;height:1.75rem;cursor:pointer;color:var(--ink-2);font-size:var(--text-md);line-height:1;display:flex;align-items:center;justify-content:center}
.sheet-close:active{transform:scale(.95)}
#pickmap{flex:0 0 auto;height:34vh;min-height:13rem;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.sheet-areas{display:flex;flex-wrap:wrap;gap:.5rem;padding:.875rem .125rem .125rem;overflow-y:auto;overscroll-behavior:contain}
.area-chip{
  -webkit-appearance:none;appearance:none;border:0;display:inline-flex;align-items:baseline;
  background:#fff;border-radius:9999px;padding:.3125rem .6875rem;white-space:nowrap;cursor:pointer;
  font-family:var(--font-sans);font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-md);color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06);
  transition:transform .14s ease;
}
.area-chip:hover{transform:scale(1.05)}
.area-chip.cur{background:#111;color:#fff}
.area-chip .cnt{margin-left:.375rem;color:var(--ink-3);font-size:var(--text-sm);font-weight:var(--weight-body);font-variant-numeric:tabular-nums}
.area-chip.cur .cnt{color:rgba(255,255,255,.55)}
.leaflet-marker-icon.area-chip-wrap{background:transparent;border:0}

/* category rail */
.rail{display:flex;gap:.25rem;padding:2px;border-radius:6.25rem;background:var(--fill-2);margin-top:.625rem;position:relative;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail button{
  flex:1 0 auto;border:0;background:transparent;cursor:pointer;white-space:nowrap;
  font-family:var(--font-sans);padding:.3125rem .6875rem;border-radius:1.8125rem;
  font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:-.01125rem;color:var(--ink);opacity:.4;
  transition:opacity .2s ease;position:relative;z-index:2;
}
.rail button:active{transform:scale(.98)}
.rail button.on{opacity:1}
.rail .pill{position:absolute;top:2px;bottom:2px;left:0;background:#fff;border-radius:1.8125rem;box-shadow:0 1px 3px rgba(0,0,0,.08);transition:all .1s ease;z-index:1}

/* map */
#map{height:38vh;min-height:230px;margin-top:1rem;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.08);background:#f6f5f4}
/* keep Leaflet's internal z-indexes from painting over the sticky picker */
#map,#pickmap,.minimap{isolation:isolate}

/* per-area map header in the All view */
.minimap{height:24vh;min-height:160px;margin-top:2.25rem;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.08);background:#f6f5f4}
.minimap+.label{padding-top:.875rem}
.leaflet-container{font-family:var(--font-sans);font-size:var(--text-md)}
.leaflet-popup-content-wrapper{border-radius:.5rem;box-shadow:var(--shadow-card)}
.leaflet-popup-content{margin:.625rem .875rem;font-size:var(--text-md);font-weight:var(--weight-medium);letter-spacing:var(--tracking-md)}
.leaflet-popup-content a{color:#2480ed}
.leaflet-container .leaflet-control-attribution{font-size:9px;background:rgba(253,253,252,.8)}

/* notes */
.note{margin-top:1rem;font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);line-height:var(--leading-body);color:var(--ink-2)}
.note em{color:#000;font-family:var(--font-serif);font-size:var(--text-md);font-style:italic;font-weight:430;letter-spacing:.01rem;font-variation-settings:"opsz" 10}
.note b{color:var(--ink);font-weight:var(--weight-semibold)}

/* crosslink between a guide and its plan */
.xlink{padding-top:.375rem}

/* section label */
.label{padding-top:2rem;padding-bottom:.125rem;color:var(--ink-3);font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-md);line-height:var(--leading-body)}

/* rows */
.spots{padding-top:.5rem}
.spots li{border-bottom:1px solid var(--hairline);padding:.735rem 0}
.spots li:last-child{border-bottom:none}
.row-top{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem}
.name{font-size:var(--text-md);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-md)}
.name .nm{position:relative;transition:all .2s ease}
.name .nm::before{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;border-radius:2px;background:var(--hairline-3);transition:inherit}
.name:hover .nm::before{background:var(--hairline-hover)}
.name .arrow{color:var(--ink-4);font-size:var(--text-2xs);margin-left:.25rem;vertical-align:baseline}
.price{flex-shrink:0;color:var(--ink-3);font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);font-variant-numeric:tabular-nums}
.hours{padding-top:.125rem;color:var(--ink-3);font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);line-height:var(--leading-body)}
.hours .warn{color:var(--danger);font-weight:var(--weight-medium)}
.hours .open{color:#00a30a;font-weight:var(--weight-medium)}
.desc{padding-top:.25rem;color:var(--ink-2);font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);line-height:var(--leading-body)}

.empty{padding:1.25rem 0;color:var(--ink-3);font-size:var(--text-md);letter-spacing:var(--tracking-md)}

/* plan pages: route timeline */
.plan #map{height:34vh;min-height:210px}
.steps{padding-top:.5rem}
.steps li{display:grid;grid-template-columns:3.25rem 1fr;gap:.75rem;border-bottom:1px solid var(--hairline);padding:.735rem 0}
.steps li:last-child{border-bottom:none}
.t{color:var(--ink-3);font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);font-variant-numeric:tabular-nums;padding-top:1px}
.steps p{font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);line-height:var(--leading-body);color:var(--ink-2)}
.steps p b{color:var(--ink);font-weight:var(--weight-semibold)}
.steps li.divider{border-bottom:none;padding-bottom:.125rem;padding-top:1.25rem}
.steps li.divider p b{color:var(--ink-3)}
.stopnum{background:#111;color:#fff;border-radius:9999px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:.75rem;font-weight:var(--weight-semibold);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.leaflet-marker-icon.stopwrap{background:transparent;border:0}

/* plan pages: plain bullet rows (book, don't, drink) */
.plain{padding-top:.5rem}
.plain li{border-bottom:1px solid var(--hairline);padding:.735rem 0;font-size:var(--text-md);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);line-height:var(--leading-body);color:var(--ink-2)}
.plain li:last-child{border-bottom:none}
.plain b{color:var(--ink);font-weight:var(--weight-semibold)}
.plain .warn{color:var(--danger);font-weight:var(--weight-medium)}
.plain a{position:relative;color:var(--ink);font-weight:var(--weight-semibold)}
.plain a::before{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--hairline-3);transition:background .2s ease}
.plain a:hover::before{background:var(--hairline-hover)}
.desc a,.steps p a,.note a{position:relative}
.desc a::before,.steps p a::before,.note a::before{content:"";position:absolute;bottom:-1px;left:0;right:0;height:1px;background:var(--hairline-3);transition:background .2s ease}
.desc a:hover::before,.steps p a:hover::before,.note a:hover::before{background:var(--hairline-hover)}

/* footer */
footer{margin-top:3rem}
footer::before{content:"";display:block;width:3.125rem;height:1px;background:var(--hairline-2);margin-bottom:1rem}
footer p{color:var(--ink-3);font-size:var(--text-xs);font-weight:var(--weight-body);letter-spacing:var(--tracking-md);line-height:1.2}

/* stagger in */
.stagger>*{opacity:0;transform:translateY(8px);animation:staggerIn .5s ease forwards}
@keyframes staggerIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stagger>*{animation:none;opacity:1;transform:none}}