/* ==========================================================================
   City page panels
   --------------------------------------------------------------------------
   Everything below styles markup this theme does not author. The panels are
   generated in the nomad-stays repo and arrive through codeinjection_foot, so
   the class names here are a contract with that repo, not local names to
   rename freely: ghost/postCreation.js::CITY_PANEL_MOUNTS holds the other half.

   Every rule is scoped to `.stays-page .cp`. The panels land inside
   `.post-content`, whose element rules (p, a, h2, table, ul) would otherwise
   repaint them — a two-class scope outspecifies those without needing !important.
   ========================================================================== */

/* The design was drawn from the --na-* palette above, so these are aliases and
   not a second palette: the accent changes in one place and the panels follow.
   (--mbt was drawn at #E3F5EF, three hex points off --na-mbps-soft; the shared
   token wins over reproducing the drift.) */
.stays-page {
    --bg:  var(--na-bg);
    --sf:  var(--na-surface);
    --ink: var(--na-ink);
    --i2:  var(--na-ink-2);
    --i3:  var(--na-ink-3);
    --ln:  var(--na-line);
    --ln2: var(--na-line-2);
    --ac:  var(--na-accent);
    --acd: var(--na-accent-ink);
    --act: var(--na-accent-soft);
    --mb:  var(--na-mbps);
    --mbt: var(--na-mbps-soft);
}
/* The scope root is included deliberately: `.cp *` reaches every descendant but
   never the .cp element itself, and that element is the one carrying the width
   container, so a content-box root puts its 80px of padding outside max-width. */
.stays-page .cp,
.stays-page .cp-w,
.stays-page .cp *,
.stays-page .cp *::before,
.stays-page .cp *::after { box-sizing:border-box }
.stays-page .cp { margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased }
/* `body` sets `word-break:break-word`, which floors a box's min-content size at one character:
   any flex or grid item narrower than its own content breaks a word down the middle rather than
   sizing to it, and a place name is the one string that must never be hyphenated. */
.stays-page .cp,
.stays-page .cp * { word-break:normal;overflow-wrap:break-word;hyphens:none }
.stays-page .cp button { font-family:inherit }
.stays-page .cp a { color:var(--ac) }
.stays-page .cp a:hover { color:var(--acd) }
.stays-page .cp .w { max-width:1240px;margin:0 auto;padding:0 40px }
.stays-page .cp .kick { font-family:ui-monospace,Menlo,monospace;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--i3);margin:0 }
.stays-page .cp .kick.is-ac { color:var(--acd) }
.stays-page .cp .h1 { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:46px;line-height:1.04;letter-spacing:-.028em;margin:10px 0 0;max-width:19ch }
.stays-page .cp .h1 em { font-style:italic;color:var(--acd) }
.stays-page .cp .h2 { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:28px;line-height:1.12;letter-spacing:-.022em;margin:5px 0 0 }
.stays-page .cp .h3 { font-size:14.5px;font-weight:600;letter-spacing:-.005em;margin:0 0 14px }
.stays-page .cp .stand { font-size:16px;line-height:1.55;color:#3C3A34;max-width:64ch;margin:14px 0 0;text-wrap:pretty }
.stays-page .cp .lead { font-size:14px;line-height:1.6;color:var(--i2);margin:14px 0 0;text-wrap:pretty }
.stays-page .cp .fc-den { font-size:11.5px;line-height:1.45;color:var(--i3);margin:10px 0 0 }
.stays-page #cp-pills.cp { background:transparent }
.stays-page .cp .pills { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px }
/* The whole card is the link, so `a { color:var(--ac) }` would otherwise paint every figure a
   chart drops inside it accent purple. Ink here; the one thing that reads as a link is .pill-go. */
.stays-page .cp .pill { background:var(--bg);border:1px solid var(--ln);border-radius:14px;padding:15px 16px 14px;display:flex;flex-direction:column;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink);transition:border-color .12s,box-shadow .12s }
.stays-page .cp .pill:hover { border-color:var(--ac);box-shadow:0 2px 14px rgba(124,77,255,.13);background:var(--sf) }
.stays-page .cp .pill-k { font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acd);margin:0 }
.stays-page .cp .pill-i { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:20px;line-height:1.16;letter-spacing:-.018em;margin:9px 0 12px;color:var(--ink) }
.stays-page .cp .pill-go { margin-top:auto;padding-top:12px;font-size:12px;font-weight:600;color:var(--ac) }
.stays-page .cp .pill-go::after { content:' \2192' }
.stays-page .cp .pill:hover .pill-go { color:var(--acd) }
.stays-page .cp .pill-v { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:30px;line-height:1;letter-spacing:-.022em;margin:8px 0 0 }
.stays-page .cp .pill-v small { font-size:14px;color:var(--i2);font-family:Inter,sans-serif }
.stays-page .cp .pill .fc-den { margin-top:auto;padding-top:9px }

/* finding strip */
.stays-page .cp .strip { background:var(--ln2);border-bottom:1px solid var(--ln) }
.stays-page .cp .strip-in { display:flex;align-items:center;gap:20px;padding-top:13px;padding-bottom:13px }
.stays-page .cp .strip-k { font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--acd);margin:0;flex:0 0 auto }
.stays-page .cp .strip-t { font-size:14.5px;line-height:1.45;margin:0;flex:1 1 auto;color:var(--i2);text-wrap:pretty }
.stays-page .cp .strip-t b { color:var(--ink);font-weight:600 }
.stays-page .cp .strip-a { flex:0 0 auto;background:var(--sf);border:1px solid var(--ln);border-radius:999px;color:var(--ink);font-size:12.5px;padding:7px 14px;cursor:pointer }
.stays-page .cp .strip-a:hover { border-color:var(--ac);color:var(--acd) }
.stays-page .cp .pn { padding:30px 0 12px }
.stays-page .cp .pn-head { display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:20px }
.stays-page .cp .pn-head .fc-den { max-width:48ch;margin:0;text-align:right }
.stays-page .cp .card { background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:18px 20px 20px }
.stays-page .cp .card.is-dark { background:var(--ink);color:#EDEAE3;border-color:var(--ink) }
.stays-page .cp .card.is-dark .lead { color:#CFCBC1 }
.stays-page .cp .split { display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start }
.stays-page .cp .split+.card { margin-top:16px }
.stays-page .cp .stack { display:grid;gap:16px }
.stays-page .cp .tip { background:#EFF7F1;border:1px solid #CFE5D6;border-radius:12px;padding:11px 13px;font-size:12.5px;line-height:1.55;color:#1F4C33;margin:12px 0 0;text-wrap:pretty }
.stays-page .cp .tip b { font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#2E7D52;display:block;margin-bottom:4px;font-weight:600 }
.stays-page .cp .pill-tip { font-size:12px;line-height:1.5;color:var(--i2);margin:10px 0 0;text-wrap:pretty }
.stays-page .cp .pill-tip b { font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#2E7D52;margin-right:6px;font-weight:600 }
.stays-page .cp .warn { background:#FFF8E8;border:1px solid #F0DDBB;border-radius:14px;padding:14px 16px }
.stays-page .cp .warn-t { font-size:13px;font-weight:600;color:#5C4415;margin:0 }
.stays-page .cp .warn-b { font-size:12.5px;line-height:1.55;color:#6B5322;margin:6px 0 0;text-wrap:pretty }

/* charts */
.stays-page .cp .fc-bands { display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end }
.stays-page .cp .fc-band { display:flex;flex-direction:column;gap:5px }
.stays-page .cp .fc-band-col { height:96px;display:flex;align-items:flex-end;background:var(--ln2);border-radius:5px;overflow:hidden }
.stays-page .cp .fc-band-fill { display:block;width:100%;background:var(--mb);border-radius:5px 5px 0 0 }
.stays-page .cp .fc-band-v { font-size:13px;font-weight:600 }
.stays-page .cp .fc-band-l { font-size:10.5px;color:var(--i2);white-space:nowrap }
.stays-page .cp .fc-band-n { font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:var(--i3) }
.stays-page .cp .bands-sec { margin-top:22px;padding-top:16px;border-top:1px solid var(--ln2) }
.stays-page .cp .sub { font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--i3);margin:0 0 12px }
.stays-page .cp .fc-bands.is-compact { gap:3px;margin-top:12px }
.stays-page .cp .fc-bands.is-compact .fc-band-col { height:30px;border-radius:3px }
.stays-page .cp .fc-bands.is-compact .fc-band-l { font-size:8px;color:var(--i3);text-align:center;overflow:hidden;text-overflow:ellipsis }
.stays-page .cp .fc-iqr { position:relative;height:30px;margin-top:12px }
.stays-page .cp .fc-iqr.is-tall { height:46px;margin-top:22px }
.stays-page .cp .fc-iqr-line { position:absolute;top:11px;left:0;right:0;height:1px;background:var(--ln) }
.stays-page .cp .fc-iqr-box { position:absolute;top:4px;height:15px;background:var(--mbt);border:1px solid #BEE4D8;border-radius:3px }
.stays-page .cp .fc-iqr-md { position:absolute;top:1px;width:2px;height:21px;background:var(--mb) }
.stays-page .cp .fc-iqr-cap { position:absolute;top:22px;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:var(--i3);white-space:nowrap }
.stays-page .cp .fc-iqr-cap.is-l { left:0 }
.stays-page .cp .fc-iqr-cap.is-r { right:0 }
.stays-page .cp .fc-iqr-mdcap { position:absolute;top:-18px;transform:translateX(-50%);font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--mb);white-space:nowrap }
.stays-page .cp .fc-axis { position:relative;height:30px;margin-top:12px }
.stays-page .cp .fc-axis.is-tall { height:38px;margin-top:8px }
.stays-page .cp .fc-axis-line { position:absolute;top:12px;left:0;right:0;height:4px;background:var(--ln2);border-radius:2px }
.stays-page .cp .fc-axis-fill { position:absolute;top:12px;left:0;height:4px;background:#BEE4D8;border-radius:2px }
.stays-page .cp .fc-axis-mk { position:absolute;top:5px;width:3px;height:18px;background:var(--mb);border-radius:2px }
.stays-page .cp .fc-axis-cap { position:absolute;top:24px;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:var(--i3);white-space:nowrap }
.stays-page .cp .fc-axis-cap.is-l { left:0 }
.stays-page .cp .fc-axis-cap.is-r { right:0 }
.stays-page .cp .fc-prop { margin-top:12px }
.stays-page .cp .fc-prop-row { display:flex;align-items:center;gap:12px }
.stays-page .cp .fc-prop-pct { font-size:16px;font-weight:600;color:var(--mb);white-space:nowrap;flex:0 0 auto }
.stays-page .cp .fc-prop-bar { display:block;flex:1 1 auto;height:14px;background:var(--ln2);border-radius:7px;overflow:hidden }
.stays-page .cp .fc-prop-bar i { display:block;height:100%;background:var(--mb);border-radius:7px }
.stays-page .cp .fc-prop-cap { display:block;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--i3);margin-top:7px }
.stays-page .cp .fc-cmp-row { margin-bottom:18px }
.stays-page .cp .fc-cmp-row:last-child { margin-bottom:0 }
.stays-page .cp .fc-cmp-head { display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px }
.stays-page .cp .fc-cmp-head .fc-den { margin:0 }
.stays-page .cp .fc-cmp-lab { font-size:12.5px;font-weight:600 }
.stays-page .cp .fc-cmp-pair { margin-bottom:7px }
.stays-page .cp .fc-cmp-side { display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px }
.stays-page .cp .fc-cmp-name { font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--i3) }
.stays-page .cp .fc-cmp-val { font-size:13px;font-weight:600 }
.stays-page .cp .fc-cmp-val.is-win { color:var(--mb) }
.stays-page .cp .fc-cmp-track { display:block;height:9px;background:rgba(255,255,255,.1);border-radius:5px;overflow:hidden }
.stays-page .cp .fc-cmp-track i { display:block;height:100%;background:#7E7A70;border-radius:5px }
.stays-page .cp .fc-cmp-track i.is-win { background:var(--mb) }
.stays-page .cp .fc-themes { display:grid;gap:15px }
.stays-page .cp .fc-themes.is-tight { gap:13px }
.stays-page .cp .fc-theme-head { display:flex;justify-content:space-between;align-items:baseline;gap:12px }
.stays-page .cp .fc-theme-lab { font-size:13px;color:var(--i2) }
.stays-page .cp .fc-theme-fig { white-space:nowrap;font-size:11px;color:var(--i3) }
.stays-page .cp .fc-theme-fig b { font-size:15px;font-weight:600;color:var(--ink);margin-right:6px }
.stays-page .cp .fc-theme-track { display:block;height:9px;background:var(--ln2);border-radius:5px;overflow:hidden;margin-top:6px }
.stays-page .cp .fc-theme-track i { display:block;height:100%;background:#B9B4A8;border-radius:5px }
.stays-page .cp .fc-theme.is-strong .fc-theme-track i { background:var(--ac) }
.stays-page .cp .fc-theme.is-strong .fc-theme-lab { color:var(--ink);font-weight:600 }
.stays-page .cp .fc-theme-note { font-size:11.5px;line-height:1.45;color:var(--i3);margin:6px 0 0;text-wrap:pretty }
.stays-page .cp .cc-t { font-size:12px;font-weight:600;color:#B79BFF;margin:0 0 14px;letter-spacing:.01em }
.stays-page .cp .fc-cities { display:grid;gap:11px }
.stays-page .cp .fc-city { display:grid;grid-template-columns:108px 1fr 48px;gap:12px;align-items:center }
/* The column was sized for city names and now also carries neighbourhood names, which are
   longer: without this a name wider than the column breaks mid-word (Encarnaca/o). Wrap at
   spaces or not at all. */
/* Tokens, not literals: this row was drawn against a dark panel, so its own city rendered #fff on
   #fff and the unfilled track was a white the surface already was. Every neighbour above it reads
   the same four tokens. */
.stays-page .cp .fc-city-lab { font-size:12.5px;color:var(--i3);line-height:1.25;word-break:normal;overflow-wrap:normal;hyphens:none }
.stays-page .cp .fc-city-track { display:block;height:14px;background:var(--ln2);border-radius:7px;overflow:hidden }
.stays-page .cp .fc-city-track i { display:block;height:100%;background:#6B6760;border-radius:7px }
.stays-page .cp .fc-city-v { font-size:13px;font-weight:600;text-align:right;color:var(--i2) }
.stays-page .cp .fc-city.is-self .fc-city-lab { color:var(--ink);font-weight:600 }
.stays-page .cp .fc-city.is-self .fc-city-track i { background:var(--ac) }
.stays-page .cp .fc-city.is-self .fc-city-v { color:var(--ink);font-size:15px }
.stays-page .cp .fc-split { margin-top:4px }
.stays-page .cp .fc-split-bar { display:flex;height:18px;border-radius:9px;overflow:hidden;background:var(--ln2) }
.stays-page .cp .fc-split-bar i { display:block;height:100% }
.stays-page .cp .fc-split-bar i.is-bad { background:#C4703F }
.stays-page .cp .fc-split-bar i.is-good { background:var(--mb) }
.stays-page .cp .fc-split-bar i.is-mute { background:#D8D3C8 }
.stays-page .cp .fc-split-lg { display:flex;gap:22px;margin-top:14px;flex-wrap:wrap }
.stays-page .cp .fc-lg { display:flex;align-items:baseline;gap:7px }
.stays-page .cp .fc-lg-sw { width:9px;height:9px;border-radius:3px;flex:0 0 auto }
.stays-page .cp .fc-lg-sw.is-bad { background:#C4703F }
.stays-page .cp .fc-lg-sw.is-good { background:var(--mb) }
.stays-page .cp .fc-lg-sw.is-mute { background:#D8D3C8 }
/* No colour of its own: this legend renders on the light pills and inside the dark finding block,
   and an ink figure is invisible on the second. The tone rules below carry the meaning. */
.stays-page .cp .fc-lg-v { font-size:16px;font-weight:600 }
.stays-page .cp .fc-lg.is-bad .fc-lg-v { color:#A85A2E }
.stays-page .cp .fc-lg.is-good .fc-lg-v { color:var(--mb) }
.stays-page .cp .fc-lg-k { font-size:12px;color:var(--i3) }
.stays-page .cp .rev-grid { display:grid;grid-template-columns:1.15fr 1fr;gap:16px;margin-top:16px;align-items:start }

/* the finding block */
.stays-page .cp .find { background:var(--ink);color:#EDEAE3;border-radius:18px;padding:26px 28px 28px }
.stays-page .cp .find-kick { font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#B79BFF;margin:0 }
.stays-page .cp .find-h { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:31px;line-height:1.1;letter-spacing:-.024em;margin:10px 0 0;color:#fff;max-width:26ch }
.stays-page .cp .find-grid { display:grid;grid-template-columns:1.1fr 1fr;gap:40px;margin-top:20px;align-items:start }
.stays-page .cp .find-lede { font-size:17px;line-height:1.55;color:#F2EFE8;margin:0 0 14px;text-wrap:pretty }
.stays-page .cp .find-b { font-size:15px;line-height:1.62;color:#CFCBC1;margin:0;text-wrap:pretty }
.stays-page .cp .find-cav { margin-top:16px;background:rgba(124,77,255,.18);border-radius:12px;padding:13px 15px;font-size:13.5px;line-height:1.55;color:#DCD3FF }
.stays-page .cp .find .fc-den { color:#8B877C }

/* neighbourhoods */
.stays-page .cp .fc-mini { display:grid;gap:8px }
/* The name owns its own line; the figure sits beside the bar it belongs to, not above it. */
.stays-page .cp .fc-mini-r { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 12px }
.stays-page .cp .fc-mini-k { grid-column:1 / -1;font-size:10.5px;color:var(--i3) }
.stays-page .cp .fc-mini-track { display:block;height:10px;background:var(--ln2);border-radius:5px;overflow:hidden }
.stays-page .cp .fc-mini-track i { display:block;height:100%;background:#C9C4B8;border-radius:5px }
.stays-page .cp .fc-mini-r.is-win .fc-mini-track i { background:var(--mb) }
.stays-page .cp .fc-mini-r.is-win .fc-mini-k { color:var(--ink);font-weight:600 }
.stays-page .cp .fc-mini-v { font-size:12px;font-weight:600;color:var(--i2);text-align:right;min-width:44px }
.stays-page .cp .fc-mini-r.is-win .fc-mini-v { color:var(--mb) }

/* neighbourhood lens */
.stays-page .cp .nbl { display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start }
.stays-page .cp .nbl-c { background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:20px 22px 20px;display:flex;flex-direction:column }
.stays-page .cp .nbl-top { display:flex;justify-content:space-between;align-items:baseline;gap:12px }
.stays-page .cp .nbl-top .fc-den { margin:0;white-space:nowrap }
.stays-page .cp .nbl-t { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:26px;margin:0;letter-spacing:-.018em }
.stays-page .cp .nbl-tags { display:flex;gap:6px;flex-wrap:wrap;margin-top:11px }
.stays-page .cp .nbl-tag { font-size:11.5px;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--ln2);color:var(--i2) }
.stays-page .cp .nbl-m { display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;padding:14px 0;border-top:1px solid var(--ln2);border-bottom:1px solid var(--ln2) }
.stays-page .cp .nbl-mv { display:block;font-family:Fraunces,Georgia,serif;font-weight:500;font-size:22px;line-height:1;letter-spacing:-.02em }
.stays-page .cp .nbl-mv.is-mb { color:var(--mb) }
.stays-page .cp .nbl-mv small { font-family:Inter,sans-serif;font-size:11px;color:var(--i2);margin-left:4px }
.stays-page .cp .nbl-mk { display:block;font-family:ui-monospace,Menlo,monospace;font-size:9.5px;color:var(--i3);margin-top:6px }
.stays-page .cp .nbl-l { font-size:13.5px;line-height:1.55;color:var(--i2);margin:14px 0 0;text-wrap:pretty }
.stays-page .cp .nbl-qs { display:grid;gap:20px;margin-top:16px;padding-top:16px;border-top:1px solid var(--ln2) }
.stays-page .cp .nbl-qs .q-t { font-size:15.5px;line-height:1.42 }
.stays-page .cp .nbl-empty { margin-top:14px;border:1px dashed var(--ln);border-radius:12px;padding:13px 15px;background:#FCFBF9 }
.stays-page .cp .nbl-et { font-size:12.5px;font-weight:600;color:var(--i2);margin:0 }
.stays-page .cp .nbl-eb { font-size:11.5px;line-height:1.5;color:var(--i3);margin:5px 0 0;text-wrap:pretty }
.stays-page .cp .nbl-a { margin-top:auto;padding-top:16px;font-size:13px;font-weight:600;text-decoration:none }
.stays-page .cp .nbl-a::after { content:' \2192' }
.stays-page .cp .nbr { display:grid;gap:1px;margin-top:16px;background:var(--ln);border:1px solid var(--ln);border-radius:14px;overflow:hidden }
/* Three metrics of nowrap text share the second track, so it is sized for the widest set the
   row can carry rather than for the narrowest: too small and they spill over the note beside
   them. `flex-wrap` is the floor under that, so a fourth metric or a five-figure rent wraps. */
.stays-page .cp .nbr-r { display:grid;grid-template-columns:200px 368px minmax(0,1fr);gap:24px;align-items:center;background:var(--sf);padding:16px 20px }
.stays-page .cp .nbr-id { display:flex;flex-direction:column;align-items:flex-start;gap:4px }
.stays-page .cp .nbr-id .fc-den { margin:0 }
.stays-page .cp .nbr-t { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:19px;margin:0;letter-spacing:-.014em }
.stays-page .cp .nbr-tags { display:flex;gap:5px;flex-wrap:wrap;margin-top:3px }
/* Fixed tracks rather than flex: each row is its own grid, so content-sized columns put every
   row's rent under a different x and the eye cannot run down the numbers. */
.stays-page .cp .nbr-m { display:grid;grid-template-columns:100px 120px 116px;gap:16px;align-items:baseline;min-width:0 }
.stays-page .cp .nbr-mv { font-size:14px;font-weight:600;white-space:nowrap }
.stays-page .cp .nbr-mv.is-mb { color:var(--mb) }
.stays-page .cp .nbr-mv small { font-weight:400;color:var(--i3);font-size:11px }
.stays-page .cp .nbr-l { font-size:12.5px;line-height:1.5;color:var(--i3);margin:0;text-wrap:pretty }
.stays-page .cp .nbr-a { font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap }
.stays-page .cp .nbr-a::after { content:' \2192' }

/* quotes */
.stays-page .cp .q { margin:0 }
.stays-page .cp .q-tags { display:flex;gap:5px;flex-wrap:wrap;margin-bottom:10px }
.stays-page .cp .q-tag { padding:3px 9px;border-radius:999px;background:var(--act);color:var(--acd);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase }
.stays-page .cp .q-t { font-family:Fraunces,Georgia,serif;font-size:18px;line-height:1.45;font-style:italic;font-weight:400;letter-spacing:-.008em;color:var(--ink);margin:0;text-wrap:pretty }
.stays-page .cp .q-at { display:flex;align-items:baseline;gap:10px;margin-top:12px;flex-wrap:wrap }
.stays-page .cp .q-stars { color:var(--ink);font-size:12px;letter-spacing:.08em }
.stays-page .cp .q-r { font-size:13px;font-weight:600 }
.stays-page .cp .q-stay { font-size:13px;color:var(--i2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ln) }
.stays-page .cp .q-stay:hover { color:var(--acd);text-decoration-color:currentColor }
.stays-page .cp .q-d { font-size:12.5px;color:var(--i3) }
.stays-page .cp .voices { position:relative;overflow:hidden;background:var(--sf);border:1px solid var(--ln);border-radius:20px;padding:26px 30px 24px;margin-top:16px }
.stays-page .cp .qmark { position:absolute;top:2px;right:26px;font-family:Fraunces,Georgia,serif;font-size:96px;line-height:1;color:var(--act);pointer-events:none }
.stays-page .cp .voices-h { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:27px;letter-spacing:-.022em;margin:0 }
.stays-page .cp .voices-h em { font-style:italic;font-weight:400 }
.stays-page .cp .voices-sub { font-size:12.5px;color:var(--i3);margin:5px 0 0 }
.stays-page .cp .voices-grid { display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:22px }
.stays-page .cp .voices-cols { display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:22px }
.stays-page .cp .vcol { min-width:0 }
.stays-page .cp .vcol-t { display:flex;align-items:center;gap:8px;font-family:ui-monospace,Menlo,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--i2);margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid var(--ln) }
.stays-page .cp .vcol-t::before { content:'';width:9px;height:9px;border-radius:3px;flex:0 0 auto }
.stays-page .cp .vcol-t.is-good::before { background:var(--mb) }
.stays-page .cp .vcol-t.is-bad::before { background:#C4703F }
.stays-page .cp .vcol-qs { display:grid;gap:24px }
.stays-page .cp .voices-foot { margin-top:24px;padding-top:16px;border-top:1px solid var(--ln2) }
.stays-page .cp .voices-ft { font-size:11.5px;line-height:1.5;color:var(--i3);margin:0;max-width:76ch }
.stays-page .cp .voices-a { font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap }
.stays-page .cp .voices-a::after { content:' \2192' }
.stays-page .cp .qrow { display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--ln) }
.stays-page .cp .qside { font-size:13px;line-height:1.55;color:var(--i2);margin:0;text-wrap:pretty }

/* stays */
.stays-page .cp .map { height:170px;border:1px solid var(--ln);border-radius:16px;background:repeating-linear-gradient(135deg,#F1EEE7,#F1EEE7 8px,#F7F5F0 8px,#F7F5F0 16px);display:flex;align-items:center;justify-content:center;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--i3);letter-spacing:.1em }
.stays-page .cp .sgrid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px }
.stays-page .cp .sc { background:var(--sf);border:1px solid var(--ln);border-radius:16px;overflow:hidden }
.stays-page .cp .sc-img { height:110px;background:repeating-linear-gradient(135deg,#F1EEE7,#F1EEE7 8px,#fff 8px,#fff 16px);display:flex;align-items:flex-end;padding:9px 12px;font-family:ui-monospace,Menlo,monospace;font-size:10px;color:var(--i3) }
.stays-page .cp .sc-bd { padding:14px 16px 16px }
.stays-page .cp .sc-t { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:18px;margin:0;line-height:1.22 }
.stays-page .cp .tags { display:flex;gap:6px;flex-wrap:wrap;margin-top:11px }
.stays-page .cp .tag { font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--ln2);color:var(--i2) }
.stays-page .cp .tag.is-mb { background:var(--mbt);color:var(--mb) }
.stays-page .cp .tag.is-ac { background:var(--act);color:var(--acd) }
.stays-page .cp .tag.is-mute { background:transparent;border:1px dashed var(--ln);color:var(--i3);font-weight:500 }
.stays-page .cp .more { font-size:13px;color:var(--i3);margin:16px 0 0 }

/* cost */
.stays-page .cp .ws { display:grid;grid-template-columns:1fr 1fr;gap:22px }

/* nearby */
.stays-page .cp .seg { display:flex;gap:5px;background:var(--ln2);border-radius:999px;padding:4px;flex:0 0 auto }
.stays-page .cp .seg button { background:none;border:0;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:500;color:var(--i2);cursor:pointer }
.stays-page .cp .seg button.is-on { background:var(--ink);color:#fff }
.stays-page .cp .pgrid { display:grid;grid-template-columns:repeat(3,1fr);gap:16px }
.stays-page .cp .pc { background:var(--sf);border:1px solid var(--ln);border-radius:16px;padding:18px 20px 18px;display:flex;flex-direction:column }
.stays-page .cp .pc-top { display:flex;justify-content:space-between;align-items:baseline;gap:10px }
.stays-page .cp .pc-top .fc-den { margin:0 }
.stays-page .cp .pc-t { font-family:Fraunces,Georgia,serif;font-weight:500;font-size:24px;margin:0;letter-spacing:-.016em }
.stays-page .cp .pc-kv { margin-top:14px }
.stays-page .cp .pc-r { display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid #F3F0EA }
.stays-page .cp .pc-r:first-child { border-top:0;padding-top:0 }
.stays-page .cp .pc-k { font-size:12.5px;color:var(--i2) }
.stays-page .cp .pc-v { font-size:14px;font-weight:600;white-space:nowrap;text-align:right }
.stays-page .cp .dl { font-size:11px;font-weight:500;color:var(--i3);margin-left:5px }
.stays-page .cp .dl.is-up { color:var(--mb) }
.stays-page .cp .dl.is-dn { color:#B4432B }
.stays-page .cp .pc-l { font-size:13px;line-height:1.5;color:var(--i2);margin:13px 0 0;text-wrap:pretty }
.stays-page .cp .pc-a { margin-top:auto;padding-top:14px;font-size:13px;font-weight:600;text-decoration:none }
.stays-page .cp .pnote { display:flex;gap:9px;align-items:center;margin:16px 0 0 }
.stays-page .cp .pnote-t { font-size:12px;color:var(--i3) }
.stays-page .cp .phtag { font-family:ui-monospace,Menlo,monospace;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#9a5a00;background:repeating-linear-gradient(45deg,#FFF6E5,#FFF6E5 4px,#FDEDD3 4px,#FDEDD3 8px);border:1px solid #F0DDBB;padding:3px 8px;border-radius:999px }

/* faq + provenance */
.stays-page .cp .faq { border-top:1px solid var(--ln);margin-top:26px;padding:26px 0 6px }
.stays-page .cp .faq-l { display:grid;gap:2px }
.stays-page .cp .faq-i { border-bottom:1px solid var(--ln2);padding:12px 0 }
.stays-page .cp .faq-q { font-size:15px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px }
.stays-page .cp .faq-q::-webkit-details-marker { display:none }
.stays-page .cp .faq-q::after { content:'+';color:var(--ac);font-weight:500;font-size:17px }
.stays-page .cp .faq-i[open] .faq-q::after { content:'–' }
.stays-page .cp .faq-a { font-size:14px;line-height:1.62;color:var(--i2);margin:10px 0 2px;max-width:88ch;text-wrap:pretty }
.stays-page .cp .prov { border-top:1px solid var(--ln);margin-top:34px;background:var(--ln2) }
.stays-page .cp .prov-in { display:flex;gap:30px;align-items:flex-start;padding-top:20px;padding-bottom:24px }
.stays-page .cp .prov-t { font-size:11.5px;line-height:1.55;color:var(--i3);margin:0;max-width:100ch }
.stays-page .cp .prov-a { flex:0 0 auto;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap }

/* --------------------------------------------------------------------------
   Classes the generated markup emits that the design never defined.
   Found by rendering the real panels under the approved stylesheet and diffing
   the class list against it, not by reading either one.
   -------------------------------------------------------------------------- */

/* Wraps every published figure. Digits in a column only line up on a face whose
   numerals share one advance width, and Inter's proportional numerals do not. */
.stays-page .cp .fc-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* The strip's text column. `.strip-in` is the flex row and `.strip-t` carries
   `flex:1 1 auto`, but the generated markup nests the paragraph one level down,
   so without this the column collapses to its content and the caveat sits
   beside the sentence instead of beneath it. */
.stays-page .cp .strip-b {
    flex: 1 1 auto;
    min-width: 0;
}

/* The correction the lead finding carries. `.find-cav` is its counterpart in
   the dark block; this is the same idea on the light strip, where the tinted
   ground is what separates a caveat from the claim it qualifies. */
.stays-page .cp .strip-cav {
    margin: 8px 0 0;
    background: var(--act);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--acd);
    text-wrap: pretty;
}

/* One titled band of peer cards. Nearby renders several. */
.stays-page .cp .pgroup {
    margin-top: 26px;
}
.stays-page .cp .pgroup:first-of-type {
    margin-top: 16px;
}
/* The pull closes the gap under the group heading, so it belongs to the caption that sits under
   one. A group whose chart is followed by a second caption was getting its trailing line dragged
   up into the last bar row. */
.stays-page .cp .pgroup > .h3 + .fc-den {
    margin: -8px 0 14px;
}
.stays-page .cp .pgroup > .fc-den {
    margin: 12px 0 0;
}

/* --------------------------------------------------------------------------
   Reconciliation with .post-content. The design was drawn as a standalone page
   with a bare user-agent stylesheet under it; here the panels land inside
   Ghost's article body, which already styles these elements. Only the cases
   scoping cannot reach are listed — each was measured in the browser, not
   guessed, and each is a property whose value the design never states because
   it never had to.
   -------------------------------------------------------------------------- */

/* text-decoration propagates: it is painted by the ancestor across its whole
   inline box, so a descendant computing `none` still shows the line. `.pill` is
   an anchor, which is why every figure inside it was underlined. Reset it here
   and let the design's own rules (.q-stay) re-add it where it is wanted. */
.stays-page .cp a {
    text-decoration: none;
}

/* The design sets a family on the display headings only and lets the rest
   inherit the body face. Inheriting is exactly what .post-content h1-h6
   interrupts, so panel headings came out in the system stack. */
.stays-page .cp h1,
.stays-page .cp h2,
.stays-page .cp h3,
.stays-page .cp h4,
.stays-page .cp h5,
.stays-page .cp h6 {
    font-family: inherit;
    letter-spacing: normal;
}

/* A pull-quote in an article gets a rule and an indent; a quote in the panels is
   a card that already carries its own frame. */
.stays-page .cp blockquote {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    font-size: inherit;
}

/* --------------------------------------------------------------------------
   Theme-owned chrome. The mock draws these as a standalone page (.hero, .tabs,
   .panel); here they are handbuilt markup under cp- names so they cannot
   collide with anything the injected payload brings in.
   -------------------------------------------------------------------------- */
.stays-page .cp-w {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 40px;
}

.stays-page .cp-hero {
    background: var(--na-surface);
    border-bottom: 1px solid var(--na-line);
    padding: 34px 0 30px;
}

/* The pills replace the stat strip, but only once they actually arrive: an
   un-migrated city gets no payload, and :empty is the one test that is true
   before the injected script runs and false after it. The mount must therefore
   stay whitespace-free in the template. */
.stays-page #cp-pills:not(:empty) + .stats-strip {
    display: none;
}
.stays-page #cp-strip:empty {
    display: none;
}

.stays-page .cp-tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--na-bg);
    border-bottom: 1px solid var(--na-line);
}
.stays-page .cp-tabs-in {
    display: flex;
    gap: 6px;
    padding-top: 9px;
    padding-bottom: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.stays-page .cp-tabs-in::-webkit-scrollbar {
    display: none;
}
.stays-page .cp-tabs button {
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    font-family: var(--na-font-ui);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--na-ink-2);
    cursor: pointer;
}
.stays-page .cp-tabs button:hover {
    background: var(--na-line-2);
}
.stays-page .cp-tabs button.is-on,
.stays-page .cp-tabs button.is-on:hover {
    background: var(--na-accent);
    color: #fff;
    font-weight: 600;
}
.stays-page .cp-tabs button:focus-visible {
    outline: 2px solid var(--na-accent-ink);
    outline-offset: 2px;
}

/* The panel's own size, moved in beside the label. Empty until the payload
   fills it, and a tab whose panel has no countable basis keeps none — so the
   rule collapses rather than showing a bare pill. */
.stays-page .cp-tab-n {
    margin-left: 7px;
    font-family: ui-monospace, Menlo, monospace;
    font-size: 10.5px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--na-ink-3);
}
.stays-page .cp-tab-n:empty {
    display: none;
}
.stays-page .cp-tabs button.is-on .cp-tab-n {
    color: rgba(255, 255, 255, .72);
}

/* A tab bar showing one tab is not a tab bar. Every panel but Stays arrives
   hidden and is revealed by the injected script, so this has to re-evaluate
   after that script runs, which :has does and a load-time check would not. */
.stays-page .cp-tabs:not(:has(button[data-cp-tab]:not([data-cp-tab='stays']):not([hidden]))) {
    display: none;
}

.stays-page .cp-panel {
    display: none;
}
.stays-page .cp-panel.is-on {
    display: block;
}

/* --------------------------------------------------------------------------
   Responsive. The approved stylesheet has no media queries at all — it was
   drawn at desktop width — so this layer is written here rather than ported.
   Verified at 1280 / 1024 / 768 / 390: the page must never scroll sideways.
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
    .stays-page .cp .find-grid,
    .stays-page .cp .rev-grid,
    .stays-page .cp .nbl,
    .stays-page .cp .ws,
    .stays-page .cp .split,
    .stays-page .cp .voices-grid,
    .stays-page .cp .voices-cols,
    .stays-page .cp .qrow {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    .stays-page .cp .sgrid,
    .stays-page .cp .pgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* minmax(0,...) above rather than a bare 1fr, and this: a 1fr track floors at
       its item's min-content and a grid item's min-width is auto, so one
       unbreakable row inside a card sizes the whole column and the page scrolls
       sideways. It is why the mock's own .nbr-r was already minmax(0,1fr). */
    .stays-page .cp .card,
    .stays-page .cp .nbl-c,
    .stays-page .cp .pc,
    .stays-page .cp .sc {
        min-width: 0;
    }

    /* 450px of fixed columns before any content — the single widest cause of
       sideways scroll on the page. Below this width the row stacks. */
    .stays-page .cp .nbr-r {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start;
    }
    /* The fixed metric tracks exist to line the figures up down the page, which stops meaning
       anything once each row stacks — and 368px of them do not fit a phone. */
    .stays-page .cp .nbr-m {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 18px;
    }
    .stays-page .cp .nbr-a {
        justify-self: start;
    }

    .stays-page .cp .pn-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .stays-page .cp .pn-head .fc-den {
        text-align: left;
        max-width: none;
    }
}

@media only screen and (max-width: 768px) {
    .stays-page .cp-w,
    .stays-page .cp .w {
        padding: 0 20px;
    }

    .stays-page .cp-hero {
        padding: 24px 0 22px;
    }

    .stays-page .cp .h1 {
        font-size: 32px;
        max-width: none;
    }
    .stays-page .cp .h2,
    .stays-page .cp .find-h {
        font-size: 23px;
    }
    .stays-page .cp .stand {
        font-size: 15px;
    }

    .stays-page .cp .pills {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 20px;
    }

    .stays-page .cp .sgrid,
    .stays-page .cp .pgrid {
        grid-template-columns: 1fr;
    }

    /* The strip is a single row on desktop: label, sentence, jump link. Stacked,
       the label reads as a heading for the sentence rather than a column of its own. */
    .stays-page .cp .strip-in {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .stays-page .cp .find {
        padding: 20px 20px 22px;
    }
    .stays-page .cp .voices {
        padding: 22px 20px 20px;
    }
    .stays-page .cp .qmark {
        display: none;
    }

    .stays-page .cp .nbl-m {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Wide by nature and not worth stacking; give them their own scroller so
       the page body does not inherit the overflow. */
    .stays-page .cp .fc-bands {
        overflow-x: auto;
    }
}

@media only screen and (max-width: 480px) {
    .stays-page .cp .pills {
        grid-template-columns: 1fr;
    }
    .stays-page .cp .h1 {
        font-size: 27px;
    }
    .stays-page .cp .fc-city {
        grid-template-columns: 88px 1fr 42px;
        gap: 8px;
    }
    .stays-page .cp .nbl-m {
        grid-template-columns: 1fr;
    }
}