/* pp-city.css — the city page's own rules.

   These lived in a <style> block inside city.html. The page is generated 761
   times over now (city/<id>.html, by tools/gen-city.mjs), so a rule that lived
   in the template would be copied into every one of them. Loaded after
   pp-theme and pp-wow. */

.cy-hero{position:relative;height:520px;overflow:hidden;display:flex;align-items:flex-end}
.cy-hero .pp-photo{position:absolute;inset:0}
.cy-hero .pp-photo img{will-change:transform}
.cy-hero-in{position:relative;z-index:2;width:100%;padding-bottom:34px}
.cy-hero-in h1,.cy-hero-in .pp-kicker{color:#F2F6FB}
.cy-hero-in .pp-lead{color:#E8EFF7}
.cy-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:44px;align-items:start}
.cy-spine{position:sticky;top:calc(var(--pp-nav-h) + 18px);display:flex;flex-direction:column;gap:16px}
.cy-map{position:relative;border-radius:var(--pb-r-card-lg);overflow:hidden;border:1px solid var(--pb-border);background:var(--pb-map-ocean);height:340px}

/* ── the quick facts ─────────────────────────────────────────────
   One card, auto-fitting columns, divided rather than gapped. However many
   facts survive, the strip is the same shape. */
.cy-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  border:1px solid var(--pb-border);border-radius:var(--pb-r-card-lg);
  background:var(--pb-surface);overflow:hidden;box-shadow:var(--pp-card-glow)}
.cy-fact{padding:18px 20px;border-left:1px solid var(--pb-border);min-width:0}
.cy-fact:first-child{border-left:0}
.cy-fact-v{font-size:26px;font-weight:800;letter-spacing:-.02em;margin-top:6px;line-height:1.15}
@media (max-width:520px){
  .cy-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cy-fact:nth-child(-n+2){border-top:0}
  .cy-fact:nth-child(odd){border-left:0}
  .cy-fact:nth-child(n+3){border-top:1px solid var(--pb-border)}
  .cy-fact-v{font-size:22px}
}
/* Scoped to the element it was written for. As `.cy-map svg` it also caught
   the SVGs MapLibre puts inside its own controls and stretched them to the
   full pane. */
.cy-map > svg{position:absolute;inset:0;width:100%;height:100%}
/* The chip sits over the map, so it must not swallow a drag that starts on it. */
.cy-maplabel{pointer-events:none;position:absolute;left:12px;top:12px;z-index:3;padding:7px 12px;font-size:11px}
.cy-lm{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--pb-border);width:100%;text-align:left;font:inherit;color:inherit;background:none;cursor:pointer}
.cy-tick{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--pb-border-strong);flex:none;display:flex;align-items:center;justify-content:center;color:transparent;transition:all var(--pp-t-ui) var(--pp-ease)}
.cy-lm.is-on .cy-tick{background:#2DD4BF;border-color:#2DD4BF;color:#0E1420;animation:ppPop 320ms var(--pp-spring)}
.cy-lm.is-on .cy-name{color:var(--pb-muted);text-decoration:line-through}
.cy-lm-text{display:flex;flex-direction:column;min-width:0;flex:1}
.cy-name{font-weight:600}
.cy-lm-xp{margin-left:auto;flex:none}
/* the row is a tick; the card is a second, smaller button beside it, so the
   tick stays the tick */
.cy-lmrow{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--pb-border)}
.cy-lmrow .cy-lm{border-bottom:0;flex:1;min-width:0}
.cy-lm-about{flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--pb-border-strong);color:var(--pb-accent-ink);font-weight:700;font-size:13px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;transition:border-color var(--pp-t-ui) var(--pp-ease),background var(--pp-t-ui) var(--pp-ease)}
.cy-lm-about:hover,.cy-lm-about[aria-expanded="true"]{border-color:var(--pb-accent-border);background:var(--pb-accent-tint)}
.cy-lmrow .pp-popanchor{position:relative;flex:none}
.cy-days{display:inline-flex;border:1px solid var(--pb-border-strong);border-radius:999px;overflow:hidden;position:relative}
.cy-days button{padding:9px 18px;font-size:13px;color:var(--pb-text-2);position:relative;z-index:1}
.cy-days button[aria-pressed="true"]{color:#0E1420;font-weight:700}
.cy-days i{position:absolute;top:2px;bottom:2px;left:2px;border-radius:999px;background:#2DD4BF;transition:transform 220ms var(--pp-ease),width 220ms var(--pp-ease)}
.cy-day{display:grid;grid-template-columns:64px 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--pb-border)}
/* the landmark photo tiles: baked frames, and a card on tap or hover. The
   card is a .pp-pop anchored under the tile, so the tile must not clip it the
   way .pp-dcard clips its photograph; the photo rounds its own corners. */
.cy-tile{position:relative;overflow:visible;border:0;box-shadow:none;background:transparent}
.cy-tile .pp-photo,.cy-tile .cy-tilephoto{aspect-ratio:4/3;display:block;position:relative;overflow:hidden;border-radius:var(--pb-r-card);background:var(--pb-inset)}
.cy-tilephoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cy-tilephoto::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,12,20,.62),rgba(8,12,20,0) 55%);pointer-events:none}
.cy-tilecap{position:absolute;left:12px;right:12px;bottom:10px;z-index:2;color:#F2F6FB;font-weight:600;font-size:13px;text-align:left}
.cy-tiletick{position:absolute;right:10px;top:10px;z-index:2;width:24px;height:24px;border-radius:50%;background:#2DD4BF;color:#0E1420;display:flex;align-items:center;justify-content:center;font-weight:700}
button.cy-tilebtn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;border-radius:var(--pb-r-card)}
button.cy-tilebtn:focus-visible{outline:2px solid var(--pb-accent);outline-offset:2px}
.cy-tile .cg-lm-pop{left:0;right:auto}
@media (max-width:1180px){.cy-body{grid-template-columns:1fr;gap:28px}.cy-spine{position:static}}
@media (max-width:640px){.cy-hero{height:360px}}