/* static/css/40-pages/geo.css */
.hp-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-meta);
  color: var(--color-text-secondary);
  padding-block: var(--space-3) 0;
}

.hp-breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.hp-breadcrumb__link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}
.hp-breadcrumb__link:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
  border-radius: var(--radius-control, 4px);
}

.hp-breadcrumb__sep {
  color: var(--color-text-tertiary);
}

.hp-breadcrumb__current {
  color: var(--color-text-primary);
  font-weight: var(--fw-medium);
}

.hp-geo-map-cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  max-width: 100%;
  padding: var(--space-2) var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--color-cta-secondary) 44%, transparent);
  color: var(--color-cta-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}

.hp-geo-map-cta svg {
  flex: 0 0 auto;
  transition: transform var(--dur-micro) var(--ease-standard);
}

.hp-geo-map-cta:hover {
  border-bottom-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.hp-geo-map-cta:hover svg {
  transform: translateY(-1px);
}

.hp-geo-map-cta:active {
  transform: translateY(1px);
}

.hp-geo-map-cta:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 3px;
  border-radius: var(--radius-control);
}

.hp-geo-nav {
  display: grid;
  gap: var(--space-3);
}

.hp-geo-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  align-items: baseline;
}

@media (min-width: 720px) {
  .hp-geo-row {
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: var(--space-4);
  }
}

.hp-geo-row__label {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--color-text-tertiary);
  padding-top: 6px;
  white-space: nowrap;
}

.hp-geo-row__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.hp-geo-chip {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: var(--tap);
  max-width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-standard),
              background var(--dur-micro) var(--ease-standard),
              color var(--dur-micro) var(--ease-standard),
              box-shadow var(--dur-micro) var(--ease-standard),
              transform var(--dur-micro) var(--ease-standard);
}

.hp-geo-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.hp-geo-chip:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
}

/* Recent hostel demand is encoded relatively within each visible city list.
   It never reuses Punk Score tier colors and never prints the underlying count. */
.hp-geo-chip--pop-quiet {
  border-color: color-mix(in srgb, var(--color-city-popularity-cool) 24%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-city-popularity-cool) 4%, var(--color-surface));
}

.hp-geo-chip--pop-rising {
  border-color: color-mix(in srgb, var(--color-city-popularity-cool) 44%, var(--color-border-subtle));
  background: color-mix(in srgb, var(--color-city-popularity-cool) 10%, var(--color-surface));
  box-shadow: 0 0 10px -7px color-mix(in srgb, var(--color-city-popularity-cool) 52%, transparent);
  font-weight: var(--fw-semibold);
}

.hp-geo-chip--pop-busy {
  min-height: 46px;
  padding-inline: 14px;
  border-color: color-mix(in srgb, var(--color-city-popularity-hot) 56%, var(--color-city-popularity-cool));
  background: color-mix(in srgb, var(--color-city-popularity-hot) 14%, var(--color-surface));
  box-shadow: 0 0 15px -6px color-mix(in srgb, var(--color-city-popularity-hot) 56%, transparent);
  font-weight: var(--fw-semibold);
}

.hp-geo-chip--pop-peak {
  min-height: 48px;
  padding-inline: 16px;
  border: 2px solid color-mix(in srgb, var(--color-city-popularity-hot) 76%, var(--color-city-popularity-cool));
  background:
    radial-gradient(120% 150% at 25% 0%,
      color-mix(in srgb, var(--color-city-popularity-cool) 22%, var(--color-surface)) 0%,
      color-mix(in srgb, var(--color-city-popularity-hot) 18%, var(--color-surface)) 72%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-city-popularity-cool) 18%, transparent),
    0 0 22px -7px color-mix(in srgb, var(--color-city-popularity-hot) 70%, transparent);
  font-weight: var(--fw-bold);
}

.hp-geo-chip[class*="hp-geo-chip--pop-"]:hover {
  transform: translateY(-1px);
  border-color: var(--color-city-popularity-hot);
  box-shadow: 0 0 24px -7px color-mix(in srgb, var(--color-city-popularity-hot) 78%, transparent);
}

.hp-geo-chip[class*="hp-geo-chip--pop-"]:focus-visible {
  outline-color: var(--color-city-popularity-hot);
}

.hp-geo-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 34px;
  padding: var(--space-1) var(--space-2);
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--dur-micro) var(--ease-standard),
              border-color var(--dur-micro) var(--ease-standard);
}
.hp-geo-more:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border-strong);
}
.hp-geo-more:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
}

.hp-geo-trust {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.hp-geo-trust__eyebrow {
  margin: 0;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.hp-geo-trust__body {
  max-width: 68ch;
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-copy, 1.55);
  color: var(--color-text-secondary);
}

.hp-geo-trust__link {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  padding: var(--space-1) 0;
  font-size: var(--fs-meta);
  font-weight: var(--fw-medium);
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
  transition: border-color var(--dur-micro) var(--ease-standard);
}
.hp-geo-trust__link:hover {
  border-bottom-color: var(--color-text-primary);
}
.hp-geo-trust__link:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
}

.hp-main > .container > .hp-guide-teasers + .hp-list {
  margin-top: var(--space-6);
}

.hp-geo-city-spotlights {
  display: grid;
  gap: var(--space-5);
  margin-block: var(--space-6) var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.hp-geo-city-spotlights__head {
  display: grid;
  gap: var(--space-2);
  max-width: 68ch;
}

.hp-geo-city-spotlights__title,
.hp-geo-results__title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-display);
  font-size: var(--fs-section);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.hp-geo-city-spotlights__intro {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.hp-geo-results {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .hp-geo-chip,
  .hp-geo-map-cta,
  .hp-geo-map-cta svg {
    transition: none;
  }

  .hp-geo-chip[class*="hp-geo-chip--pop-"]:hover,
  .hp-geo-map-cta:hover svg,
  .hp-geo-map-cta:active {
    transform: none;
  }
}

.hp-geo-activities {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-5) var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
}

.hp-geo-activities__head {
  display: grid;
  gap: var(--space-1);
}

.hp-geo-activities__eyebrow {
  margin: 0;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-tiny);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.hp-geo-activities__title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight, 1.2);
}

.hp-geo-activities__grid {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 760px) {
  .hp-geo-activities__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.hp-geo-activity {
  display: grid;
  grid-template-columns: 2.35rem minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.hp-geo-activity__rank {
  color: var(--color-text-tertiary);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
}

.hp-geo-activity__body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.hp-geo-activity__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--fs-card);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight, 1.2);
}

.hp-geo-activity__emoji {
  flex: 0 0 auto;
  font-size: 0.95em;
  line-height: 1;
}

.hp-geo-activity__summary {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--fs-meta);
  line-height: 1.45;
}

.hp-geo-activity__sources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hp-geo-activity__source {
  color: var(--color-text-secondary);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-tiny);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-subtle);
}

.hp-geo-activity__source:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border-strong);
}

.hp-geo-activity__source:focus-visible {
  outline: 2px solid var(--color-border-strong);
  outline-offset: 2px;
}

.hp-world-page > .container {
  max-width: min(1200px, 100vw);
}

.hp-world-rankings {
  display: grid;
  gap: var(--space-4);
}

.hp-world-list {
  container-type: inline-size;
  container-name: hp-list;
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hp-world-list__item {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  min-width: 0;
}

.hp-world-list__rank {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-meta);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

@media (min-width: 760px) {
  .hp-world-list__item {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  .hp-world-list__rank {
    position: sticky;
    top: calc(var(--app-header-height, 64px) + var(--space-4));
    justify-self: stretch;
    min-height: 40px;
    padding-top: var(--space-3);
  }
}

.hp-geo-section__title {
  font-size: var(--fs-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight, 1.2);
  color: var(--color-text-primary);
  margin: 0;
}

/* static/css/40-pages/parks.css */
.hp-parks { max-width: 960px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-8); overflow-wrap: anywhere; }
.hp-parks__header { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); margin:var(--space-5) 0; }
.hp-parks h1 { font-size:clamp(26px,5vw,40px); line-height:1.15; }
.hp-parks h2 { font-size:21px; }
.hp-parks p { line-height:1.5; }
.hp-parks .c-button { white-space:normal; max-width:100%; height:auto; text-align:left; }
.hp-parks small, .hp-parks__list small { display:block; color:var(--color-text-secondary); margin-top:var(--space-2); }
.hp-parks__reported { padding:var(--space-4); border-left:4px solid var(--color-text-tertiary); background:var(--color-surface); }
.hp-parks__list { list-style:none; padding:0; }
.hp-parks__list > li { border-bottom:1px solid var(--color-border-subtle); border-left:3px solid var(--color-border-strong); padding:var(--space-4); }
.hp-parks__list a { display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); align-items:center; min-height:44px; }
.hp-parks__list span { display:block; font-size:14px; }
.hp-parks__list ul { padding-left:var(--space-4); font-size:14px; }
.hp-parks [data-tone="closed"], .hp-parks__list > [data-tone="closed"] { border-left-color:var(--color-signal-danger); }
.hp-parks [data-tone="restricted"], .hp-parks__list > [data-tone="restricted"] { border-left-color:var(--color-signal-sus); }
.hp-parks [data-tone="open"], .hp-parks__list > [data-tone="open"] { border-left-color:var(--color-signal-positive); }
.hp-parks__section { padding:var(--space-5) 0; border-top:1px solid var(--color-border-subtle); }
.hp-parks summary { cursor:pointer; min-height:44px; padding:var(--space-3) 0; }
.hp-parks__evidence { padding:var(--space-3) 0; border-bottom:1px solid var(--color-border-subtle); }
.hp-parks__evidence blockquote { margin:var(--space-3) 0; padding-left:var(--space-3); border-left:2px solid var(--color-border-subtle); font-size:14px; line-height:1.55; white-space:pre-line; }
.hp-parks__table { max-width:100%; overflow:auto; }
.hp-parks table { width:100%; border-collapse:collapse; text-align:left; font-size:14px; }
.hp-parks td, .hp-parks th { padding:var(--space-2); border-bottom:1px solid var(--color-border-subtle); }
.hp-park-marker { width:34px; height:34px; padding:5px; background:var(--color-surface); color:var(--color-text-secondary); border:2px solid currentColor; border-radius:50% 50% 5px 5px; cursor:pointer; box-shadow:0 1px 4px #0003; }
.hp-park-marker[data-tone="closed"] { color:var(--color-signal-danger); }
.hp-park-marker[data-tone="restricted"] { color:var(--color-signal-sus); }
.hp-park-marker[data-tone="open"] { color:var(--color-signal-positive); }
.hp-park-marker svg { width:100%; height:100%; }
.hp-park-marker:focus-visible, .hp-parks a:focus-visible, .hp-parks summary:focus-visible { outline:3px solid var(--color-border-strong); outline-offset:3px; }
.hp-park-sheet { overflow-wrap:anywhere; }
.hp-park-sheet h3 { margin:0 0 var(--space-3); }
.hp-park-sheet li { margin-bottom:var(--space-2); }
@media (pointer:coarse) { .hp-park-marker { width:44px; height:44px; } }

/* static/css/40-pages/zz-contrast-rescue.css */
.hp-contrast-rescue .c-property-card__eyebrow,
.hp-contrast-rescue .c-property-card__name,
.hp-contrast-rescue .hp-hostel__eyebrow,
.hp-contrast-rescue .hp-hostel__name,
.hp-contrast-rescue .hp-score__title,
.hp-contrast-rescue .hp-score__value,
.hp-contrast-rescue .hp-score__level,
.hp-contrast-rescue .hp-score__meta,
.hp-contrast-rescue .c-rank-label,
.hp-contrast-rescue .c-lang-stack,
.hp-contrast-rescue .c-lang-divergence,
.hp-contrast-rescue .c-property-card__foot {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.88),
    0 0 10px rgba(0, 0, 0, 0.58),
    0 0 22px rgba(0, 0, 0, 0.36);
}

.c-property-card.hp-contrast-rescue .c-property-card__name::before,
.hp-hostel__hero.hp-contrast-rescue .hp-hostel__name::before {
  inset: -0.78em -1.38em;
  background: radial-gradient(
    ellipse at var(--hp-title-halo-x) 55%,
    rgba(var(--hp-halo-rgb), calc(var(--hp-halo-alpha) * 1.22)) 0%,
    rgba(var(--hp-halo-rgb), calc(var(--hp-halo-alpha) * 0.72)) 30%,
    rgba(var(--hp-halo-rgb), calc(var(--hp-halo-alpha) * 0.28)) 62%,
    transparent 100%
  );
}

@container hp-list (min-width: 720px) {
  .c-property-card.hp-contrast-rescue .c-property-card__body::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 6px),
      linear-gradient(
        to right,
        transparent 0%,
        color-mix(in oklab, #06090f 20%, transparent) 39%,
        color-mix(in oklab, #06090f 40%, transparent) 64%,
        color-mix(in oklab, #06090f 58%, transparent) 100%
      );
    backdrop-filter: blur(2.5px) saturate(122%);
    -webkit-backdrop-filter: blur(2.5px) saturate(122%);
  }

  .c-property-card.hp-contrast-rescue .c-property-card__body::after {
    content: "";
    position: absolute;
    inset: 14% 3% 12% 39%;
    z-index: -1;
    border-radius: var(--radius-card);
    background: radial-gradient(
      ellipse at 66% 45%,
      rgba(0, 0, 0, 0.36) 0%,
      rgba(0, 0, 0, 0.22) 42%,
      transparent 75%
    );
    filter: blur(10px);
    pointer-events: none;
  }
}

@container hp-list (max-width: 719.98px) {
  .c-property-card.hp-contrast-rescue .c-property-card__body {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 5px),
      color-mix(in oklab, #0b0e14 29%, transparent);
    backdrop-filter: blur(3.5px) saturate(118%);
    -webkit-backdrop-filter: blur(3.5px) saturate(118%);
  }
}

@media (min-width: 768px) {
  .hp-hostel__hero.hp-contrast-rescue .hp-hostel__hero-info::before {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 6px),
      linear-gradient(
        to right,
        transparent 0%,
        color-mix(in oklab, var(--hp-hero-dark) 24%, transparent) 42%,
        color-mix(in oklab, var(--hp-hero-dark) 44%, transparent) 65%,
        color-mix(in oklab, var(--hp-hero-dark) 60%, transparent) 100%
      );
    backdrop-filter: blur(2.5px) saturate(122%);
    -webkit-backdrop-filter: blur(2.5px) saturate(122%);
  }
}

@media (max-width: 767.98px) {
  .hp-hostel__hero.hp-contrast-rescue .hp-hostel__hero-info {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 5px),
      color-mix(in oklab, var(--hp-hero-dark) 30%, transparent);
    backdrop-filter: blur(3.5px) saturate(118%);
    -webkit-backdrop-filter: blur(3.5px) saturate(118%);
  }
}