/* Generated from Urban Folk Design System, Oct 6/8 2026, A-80. Scoped to this module. */
@font-face { font-family: Manrope; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/manrope-regular.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/manrope-medium.woff2") format("woff2"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/manrope-semibold.woff2") format("woff2"); }
.uf-city {
  --uf-oxblood: #6f2932;
  --uf-oxblood-50: #fcf0f0;
  --uf-oxblood-100: #f8e2e3;
  --uf-oxblood-200: #f0c9cb;
  --uf-oxblood-300: #e5a8ab;
  --uf-oxblood-400: #ce7e84;
  --uf-oxblood-500: #b25760;
  --uf-oxblood-600: #8f3b45;
  --uf-oxblood-700: var(--uf-oxblood);
  --uf-oxblood-800: #561922;
  --uf-oxblood-900: #3d0f16;
  --uf-neutral-0: #ffffff;
  --uf-neutral-100: #ffffff;
  --uf-neutral-150: #f8f6f5;
  --uf-neutral-200: #eeeae9;
  --uf-neutral-300: #dcd8d7;
  --uf-neutral-400: #aca8a7;
  --uf-neutral-500: #837f7e;
  --uf-neutral-600: #6a6665;
  --uf-neutral-700: #504c4b;
  --uf-neutral-800: #383434;
  --uf-neutral-900: #1e1b1a;
  --uf-red-50: #fff0ed;
  --uf-red-500: #d64a39;
  --uf-red-700: #a01a0e;
  --uf-red-800: #840b03;
  --uf-teal-50: #e8f7f7;
  --uf-teal-500: #2c9095;
  --uf-teal-700: #00686c;
  --uf-teal-800: #015256;
  --uf-amber-50: #fbf2e4;
  --uf-amber-500: #a77610;
  --uf-amber-700: #8e6307;
  --uf-amber-800: #755003;
  --uf-blue-50: #ecf4ff;
  --uf-blue-500: #4281d0;
  --uf-blue-700: #1e5ba1;
  --uf-blue-800: #114785;
  --uf-surface-page: var(--uf-neutral-100);
  --uf-surface-card: var(--uf-neutral-0);
  --uf-surface-subtle: var(--uf-neutral-150);
  --uf-surface-sunken: var(--uf-neutral-200);
  --uf-surface-inverse: var(--uf-neutral-900);
  --uf-surface-brand: var(--uf-oxblood-700);
  --uf-surface-brand-subtle: var(--uf-oxblood-50);
  --uf-text-default: var(--uf-neutral-900);
  --uf-text-muted: var(--uf-neutral-600);
  --uf-text-disabled: var(--uf-neutral-400);
  --uf-text-inverse: var(--uf-neutral-0);
  --uf-text-link: var(--uf-oxblood-700);
  --uf-text-link-hover: var(--uf-oxblood-800);
  --uf-text-brand: var(--uf-oxblood-700);
  --uf-border-subtle: var(--uf-neutral-200);
  --uf-border-default: var(--uf-neutral-300);
  --uf-border-control: var(--uf-neutral-500);
  --uf-border-strong: var(--uf-neutral-900);
  --uf-action-primary: var(--uf-oxblood-700);
  --uf-action-primary-hover: var(--uf-oxblood-800);
  --uf-action-primary-active: var(--uf-oxblood-900);
  --uf-on-action-primary: var(--uf-neutral-0);
  --uf-action-subtle-hover: var(--uf-neutral-200);
  --uf-action-danger: var(--uf-red-700);
  --uf-action-danger-hover: var(--uf-red-800);
  --uf-on-action-danger: var(--uf-neutral-0);
  --uf-action-disabled-bg: var(--uf-neutral-200);
  --uf-action-disabled-fg: var(--uf-neutral-500);
  --uf-selection-bg: var(--uf-neutral-900);
  --uf-on-selection: var(--uf-neutral-0);
  --uf-selection-subtle-bg: var(--uf-neutral-200);
  --uf-focus-ring: var(--uf-neutral-900);
  --uf-focus-ring-inverse: var(--uf-neutral-0);
  --uf-overlay-scrim: rgba(30, 27, 26, 0.6);
  --uf-status-danger-fg: var(--uf-red-700);
  --uf-status-danger-bg: var(--uf-red-50);
  --uf-status-danger-border: var(--uf-red-500);
  --uf-status-success-fg: var(--uf-teal-700);
  --uf-status-success-bg: var(--uf-teal-50);
  --uf-status-success-border: var(--uf-teal-500);
  --uf-status-warning-fg: var(--uf-amber-700);
  --uf-status-warning-bg: var(--uf-amber-50);
  --uf-status-warning-border: var(--uf-amber-500);
  --uf-status-info-fg: var(--uf-blue-700);
  --uf-status-info-bg: var(--uf-blue-50);
  --uf-status-info-border: var(--uf-blue-500);
  --uf-space-1: 4px;
  --uf-space-2: 8px;
  --uf-space-3: 12px;
  --uf-space-4: 16px;
  --uf-space-5: 20px;
  --uf-space-6: 24px;
  --uf-space-8: 32px;
  --uf-space-10: 40px;
  --uf-space-12: 48px;
  --uf-space-16: 64px;
  --uf-space-20: 80px;
  --uf-space-24: 96px;
  --uf-radius-sm: 6px;
  --uf-radius-md: 8px;
  --uf-radius-lg: 12px;
  --uf-radius-xl: 24px;
  --uf-radius-full: 9999px;
  --uf-carousel-control-target: 44px;
  --uf-carousel-arrow-visual: 32px;
  --uf-control-sm: 36px;
  --uf-control-md: 48px;
  --uf-control-lg: 56px;
  --uf-icon-sm: 16px;
  --uf-icon-md: 20px;
  --uf-icon-lg: 24px;
  --uf-stroke-1: 1px;
  --uf-stroke-2: 2px;
  --uf-breakpoint-tablet: 768px;
  --uf-breakpoint-desktop: 1025px;
  --uf-breakpoint-wide: 1440px;
  --uf-container-max: 1280px;
  --uf-gutter-mobile: 24px;
  --uf-gutter-desktop: 40px;
  --uf-gutter-wide: 80px;
  --uf-measure-max: 68ch;
  --uf-dialog-width-sm: 400px;
  --uf-dialog-width-md: 560px;
  --uf-dialog-width-lg: 720px;
  --uf-shadow-tip: 0 2px 4px rgba(30, 27, 26, 0.18);
  --uf-shadow-float: 0 1px 2px rgba(30, 27, 26, 0.08), 0 6px 20px rgba(30, 27, 26, 0.12);
  --uf-shadow-overlay: 0 8px 28px rgba(30, 27, 26, 0.28);
  --uf-layer-sticky: 100;
  --uf-layer-dropdown: 200;
  --uf-layer-overlay: 300;
  --uf-layer-toast: 400;
  --uf-font-sans: Manrope, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.uf-city .uf-city__heading { font-family: var(--uf-font-sans); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; }
.uf-city .uf-city__panel-heading { font-family: var(--uf-font-sans); font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -0.005em; }
.uf-city .uf-city-card__title { font-family: var(--uf-font-sans); font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.uf-city .uf-city__subtitle, .uf-city .uf-city__empty, .uf-city .uf-city__notice { font-family: var(--uf-font-sans); font-size: 16px; line-height: 24px; font-weight: 400; letter-spacing: 0; }
.uf-city .uf-city-card__meta, .uf-city .uf-city-card__rating { font-family: var(--uf-font-sans); font-size: 14px; line-height: 20px; font-weight: 400; letter-spacing: 0; }
.uf-city .uf-city__tab { font-family: var(--uf-font-sans); font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: 0; }
.uf-city .uf-city__all, .uf-city .uf-city__pagination { font-family: var(--uf-font-sans); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; }

.uf-city { color: var(--uf-text-default); font-family: var(--uf-font-sans); min-width: 0; }
.uf-city *, .uf-city *::before, .uf-city *::after { box-sizing: border-box; }
.uf-city [hidden] { display: none !important; }
.uf-city .uf-city__heading, .uf-city .uf-city__panel-heading, .uf-city .uf-city-card__title { margin: 0; color: var(--uf-text-default); text-wrap: balance; }
.uf-city .uf-city__subtitle { margin: var(--uf-space-2) 0 0; color: var(--uf-text-muted); }
.uf-city__tabs { display: flex; gap: var(--uf-space-6); overflow-x: auto; padding: var(--uf-stroke-2) var(--uf-stroke-2) 0; margin-top: var(--uf-space-6); border-bottom: var(--uf-stroke-1) solid var(--uf-border-default); scrollbar-width: none; }
.uf-city__tabs::-webkit-scrollbar { display: none; }
.uf-city .uf-city__tab { flex: none; display: inline-flex; align-items: center; height: var(--uf-control-md); padding: var(--uf-space-1); color: var(--uf-text-muted); border-bottom: var(--uf-stroke-2) solid transparent; text-decoration: none; white-space: nowrap; background: transparent; }
.uf-city .uf-city__tab:hover { color: var(--uf-text-default); border-bottom-color: var(--uf-border-default); }
.uf-city .uf-city__tab[aria-selected="true"] { color: var(--uf-text-default); font-weight: 600; border-bottom-color: var(--uf-border-strong); }
.uf-city .uf-city__tab:focus-visible { outline: var(--uf-stroke-2) solid var(--uf-focus-ring); outline-offset: calc(-1 * var(--uf-stroke-2)); }
.uf-city__panel { margin-top: var(--uf-space-6); }
.uf-city__panel:focus-visible { outline: var(--uf-stroke-2) solid var(--uf-focus-ring); outline-offset: var(--uf-space-1); }
.uf-city__panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--uf-space-4); flex-wrap: wrap; margin-bottom: var(--uf-space-6); }
.uf-city .uf-city__all { display: inline-flex; align-items: center; min-height: var(--uf-control-md); border: var(--uf-stroke-1) solid var(--uf-border-strong); border-radius: var(--uf-radius-full); padding: var(--uf-space-2) var(--uf-space-5); color: var(--uf-text-default); background: var(--uf-surface-card); font-weight: 600; text-decoration: none; }
.uf-city .uf-city__all:hover { background: var(--uf-action-subtle-hover); }
.uf-city .uf-city__all:focus-visible, .uf-city .uf-city__pagination a:focus-visible { outline: var(--uf-stroke-2) solid var(--uf-focus-ring); outline-offset: var(--uf-stroke-2); }
.uf-city .uf-city__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--uf-space-4); row-gap: var(--uf-space-8); margin: 0; padding: 0; list-style: none; }
.uf-city .uf-city__item { min-width: 0; list-style: none; padding: 0; margin: 0; }
.uf-city .uf-city-card { display: grid; position: relative; isolation: isolate; align-content: start; gap: var(--uf-space-3); min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
.uf-city-card__media { aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: var(--uf-radius-lg); background: var(--uf-surface-sunken); }
.uf-city .uf-city-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; }
.uf-city-card__placeholder { display: grid; height: 100%; place-items: center; color: var(--uf-text-muted); }
.uf-city-card__placeholder svg { width: var(--uf-icon-lg); height: var(--uf-icon-lg); }
.uf-city-card__body { display: grid; gap: var(--uf-space-1); min-width: 0; }
.uf-city-card__head { display: flex; align-items: start; justify-content: space-between; gap: var(--uf-space-2); }
.uf-city .uf-city-card__title { min-width: 0; overflow-wrap: anywhere; }
.uf-city .uf-city-card__link { color: var(--uf-text-default); text-decoration: none; }
/* Local paint order: the stretched link covers the card; Save remains above it. */
.uf-city-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--uf-radius-lg); }
.uf-city .uf-city-card__link:hover { text-decoration: underline; }
.uf-city-card__link:focus-visible { outline: none; }
.uf-city-card__link:focus-visible::after { outline: var(--uf-stroke-2) solid var(--uf-focus-ring); outline-offset: var(--uf-stroke-2); }
.uf-city .uf-city-card__meta { margin: 0; color: var(--uf-text-muted); overflow-wrap: anywhere; }
.uf-city-card__rating { white-space: nowrap; }
.uf-city-card__rating b { font-weight: 600; }
.uf-city-card__rating svg { display: inline-block; width: var(--uf-icon-sm); height: var(--uf-icon-sm); vertical-align: middle; }
.uf-city-card__count { color: var(--uf-text-muted); }
.uf-city .uf-city-card__save { display: grid; place-items: center; position: absolute; top: var(--uf-space-2); right: var(--uf-space-2); z-index: 2; width: var(--uf-control-sm); height: var(--uf-control-sm); min-height: 0; padding: 0; margin: 0; border: 0; border-radius: var(--uf-radius-full); color: var(--uf-text-default); background: var(--uf-surface-card); box-shadow: none; cursor: pointer; }
.uf-city .uf-city-card__save:hover { background: var(--uf-action-subtle-hover); }
.uf-city-card__save:focus-visible { outline: var(--uf-stroke-2) solid var(--uf-focus-ring); outline-offset: var(--uf-stroke-2); }
.uf-city-card__save svg { display: block; width: var(--uf-icon-md); height: var(--uf-icon-md); }
.uf-city-card__save .uf-city-card__heart-filled { display: none; }
.uf-city-card__save[aria-pressed="true"] .uf-city-card__heart { display: none; }
.uf-city-card__save[aria-pressed="true"] .uf-city-card__heart-filled { display: block; color: var(--uf-action-primary); }
.uf-city-card__save[aria-busy="true"] { cursor: progress; }
.uf-city__empty, .uf-city__notice { margin: var(--uf-space-4) 0; }
.uf-city__pagination { display: flex; flex-wrap: wrap; gap: var(--uf-space-2); margin-top: var(--uf-space-8); }
.uf-city .uf-city__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: var(--uf-control-md); min-height: var(--uf-control-md); padding: var(--uf-space-2); color: var(--uf-text-default); border-radius: var(--uf-radius-full); text-decoration: none; }
.uf-city__pagination .current { font-weight: 600; background: var(--uf-selection-bg); color: var(--uf-on-selection); }
.uf-city__pagination a:hover { background: var(--uf-action-subtle-hover); }
.uf-city--results .uf-city__grid { margin-top: var(--uf-space-6); }
.uf-city__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (min-width: 768px) { .uf-city .uf-city__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--uf-space-6); } }
@media (min-width: 1025px) { .uf-city .uf-city__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .uf-city .uf-city__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }