/* ============================================================
   Vienna Photography Atlas — page styles.
   Self-contained, scoped under .ps-page.
   ============================================================ */

/* Fraunces is loaded via base.njk <link> for non-blocking render. */

.ps-page{
  /* ===== v2 spec — atlas-architecture-spec_v2.md ===== */
  /* Editorial typography token */
  --font-display:"Fraunces", "Cormorant Garamond", Georgia, serif;
  /* Backgrounds — warm-dark cinema palette (was pure cool gray) */
  --bg-deep:#08070a;
  --bg-base:#0c0b0a;
  --bg-elev-1:#15141a;
  --bg-elev-2:#1a1820;
  --bg-elev-3:#211f29;
  /* Glass */
  --glass-card:rgba(22,25,34,.62);
  --glass-toolbar:rgba(10,11,14,.55);
  --glass-overlay:rgba(10,11,14,.78);
  /* Foreground */
  --fg:#EDEEF2;
  --fg-mute:#A4ABB7;
  --fg-dim:#6E7382;
  /* Hairlines */
  --line-1:rgba(255,255,255,.06);
  --line-2:rgba(255,255,255,.10);
  --line-3:rgba(255,255,255,.14);
  /* Brand */
  --accent:#E03030;
  --accent-2:#FF4A4A;
  --accent-glow:rgba(224,48,48,.32);
  /* Sun cycle */
  --sun-sunrise:#FFB347;
  --sun-golden-am:#FFD27A;
  --sun-midday:#F4F0E5;
  --sun-golden-pm:#FF8A3A;
  --sun-sunset:#E2553B;
  --sun-blue:#6F7CBF;
  --sun-night:#2E5298;
  /* Categories */
  --cat-landmark:#FF6E5A;
  --cat-park:#6BCB77;
  --cat-hidden:#EFA0FF;
  --cat-rooftop:#B58CFF;
  --cat-cafe:#D4A357;
  --cat-studio:#4DA8FF;
  --cat-shop:#4ECDC4;
  /* legacy aliases — still referenced in older selectors */
  --cat-street:var(--cat-shop);
  --cat-art:var(--cat-cafe);
  --cat-water:var(--cat-studio);
  /* Shadows */
  --shadow-1:0 1px 2px rgba(0,0,0,.30);
  --shadow-2:0 8px 24px rgba(0,0,0,.40);
  --shadow-3:0 16px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.04);
  /* Radii */
  --radius-xs:6px;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;
  /* Blur */
  --blur-soft:blur(12px) saturate(140%);
  --blur-glass:blur(18px) saturate(160%);
  --blur-deep:blur(28px) saturate(180%);
  /* Motion */
  --ease:cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out:cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:140ms;
  --dur-base:220ms;
  --dur-slow:420ms;
  /* Type scale */
  --fs-display:56px;
  --fs-h1:32px;
  --fs-h2:22px;
  --fs-h3:16px;
  --fs-body:14px;
  --fs-meta:12px;
  --fs-micro:10.5px;
  /* Legacy aliases (kept until callers migrated) */
  --ps-bg:var(--bg-base);
  --ps-bg-2:var(--bg-elev-1);
  --ps-bg-3:var(--bg-elev-2);
  --ps-fg:var(--fg);
  --ps-fg-mute:var(--fg-mute);
  --ps-fg-dim:var(--fg-dim);
  --ps-accent:var(--accent);
  --ps-accent-2:var(--accent-2);
  --ps-line:var(--line-1);
  --ps-line-2:var(--line-2);
  --ps-radius:var(--radius-md);
  --ps-radius-sm:var(--radius-sm);
  --ps-shadow:var(--shadow-2);
  --ps-cat-historical:var(--cat-landmark);
  --ps-cat-photo-zone:var(--cat-park);
  --ps-month-skip:#2a2d34;
  --ps-month-good:#4a8a6a;
  --ps-month-peak:var(--cat-park);
  background:var(--bg-base);
  color:var(--fg);
  padding-bottom:0;
}

/* ===== BACK-TO-BLOG BAR ===== */
.ps-backbar{
  max-width:1200px; margin:0 auto; padding:18px 24px 0;
}
.ps-back-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px;
  font-size:13px; color:var(--ps-fg-mute);
  text-decoration:none;
  border:1px solid var(--ps-line);
  border-radius:999px;
  background:rgba(255,255,255,.02);
  transition:all .2s ease;
  font-weight:500;
}
.ps-back-link:hover{
  border-color:var(--ps-accent);
  color:var(--ps-fg);
  background:rgba(224,48,48,.08);
}

/* ===== HERO (own identity, photo backdrop, compact) ===== */
.ps-hero{
  position:relative;
  padding:40px 0 32px;
  overflow:hidden;
  isolation:isolate;
}
.ps-hero-photo .ps-hero-bg{
  position:absolute; inset:0;
  background-image:url("/images/photo-spots/kahlenberg-vienna.jpg");
  background-size:cover;
  background-position:center 35%;
  filter:brightness(.42) saturate(.9) contrast(1.05);
  z-index:-1;
}
.ps-hero-photo::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,14,.4) 0%, rgba(10,11,14,.5) 60%, var(--ps-bg) 100%);
  z-index:-1;
}
.ps-hero-inner{
  max-width:1440px; margin:0 auto;
  padding:0 24px 0 12px;
  position:relative;
}
.ps-hero-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
  gap:16px;
}
.ps-hero-tag{
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#bdc1c8;
  font-weight:500;
}
.ps-lang{
  display:inline-flex; align-items:center; gap:1px;
  font-size:12px;
  font-weight:500;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:5px 6px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ps-lang-current{
  color:#fff;
  padding:3px 10px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  font-variant-numeric:tabular-nums;
}
.ps-lang-other{
  color:#8a8f99;
  text-decoration:none;
  padding:3px 10px;
  border-radius:999px;
  transition:color .2s ease;
}
.ps-lang-other:hover{ color:#fff; }

.ps-h1{
  font-family:"Archivo Black", Inter, sans-serif;
  font-size:clamp(28px, 3.8vw, 44px); line-height:.95;
  margin:0 0 8px 0; letter-spacing:-.03em; color:#fff;
}
.ps-hero-sub{
  font-size:13.5px; line-height:1.45;
  color:#bdc1c8; max-width:560px; margin:0;
  letter-spacing:-.005em;
}
@media (max-width:640px){
  .ps-hero{ padding:56px 20px 40px; }
  .ps-h1{ font-size:32px; }
  .ps-hero-meta{ margin-bottom:24px; }
}

/* ===== COMPACT SUN WIDGET (collapsible) ===== */
.ps-sun-compact{
  max-width:1200px; margin:20px auto 0; padding:0 24px;
}
.ps-sun-toggle{
  width:100%;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px;
  background:var(--ps-bg-2);
  border:1px solid var(--ps-line);
  border-radius:999px;
  color:var(--ps-fg);
  cursor:pointer;
  font-family:inherit; font-size:13px;
  transition:border-color .2s ease;
}
.ps-sun-toggle:hover{ border-color:var(--ps-line-2); }
.ps-sun-toggle-label{
  font-weight:600;
  white-space:nowrap;
}
.ps-sun-quick{
  flex:1;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--ps-fg-mute);
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ps-sun-chevron{
  font-size:14px;
  color:var(--ps-fg-dim);
  transition:transform .2s ease;
}
.ps-sun-toggle[aria-expanded="true"] .ps-sun-chevron{
  transform:rotate(180deg);
}

.ps-sun-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:0;
  background:var(--ps-bg-2);
  border:1px solid var(--ps-line);
  border-radius:var(--ps-radius);
  padding:12px;
  margin-top:8px;
  animation:psFadeIn .25s ease;
}
.ps-sun-grid[hidden]{ display:none; }
.ps-sun-cell{
  display:flex; flex-direction:column; align-items:center;
  gap:2px; padding:8px 4px; text-align:center;
  border-right:1px solid var(--ps-line);
}
.ps-sun-cell:last-child{ border-right:0; }
.ps-sun-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--ps-fg-dim);
}
.ps-sun-val{
  font-variant-numeric:tabular-nums;
  font-size:15px; font-weight:600; color:var(--ps-fg);
}
@media (max-width:640px){
  .ps-sun-grid{ grid-template-columns:repeat(3, 1fr); }
  .ps-sun-cell{ border-bottom:1px solid var(--ps-line); }
  .ps-sun-cell:nth-child(3n){ border-right:0; }
  .ps-sun-cell:nth-last-child(-n+3){ border-bottom:0; }
  .ps-sun-quick{ display:none; }
}

/* ===== TOOLBAR (v2): chips align with map column, actions align with sidebar ===== */
.ps-toolbar{
  max-width:1440px;
  margin:0 auto;
  padding:16px 24px 0 12px;
  display:grid;
  align-items:center;
  gap:16px;
  grid-template-columns:1fr;
}
@media (min-width:1024px){
  .ps-toolbar{ grid-template-columns:minmax(0, 1fr) 360px; }
}
@media (min-width:1440px){
  .ps-toolbar{ grid-template-columns:minmax(0, 1fr) 400px; }
}

.ps-toolbar-actions{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  flex:0 0 auto;
}
.ps-search{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 10px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--ps-line);
  border-radius:8px;
  color:var(--ps-fg-mute);
  width:280px;
  max-width:42vw;
  transition:border-color .2s ease, background-color .2s ease;
}
.ps-search:focus-within{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:var(--ps-fg);
}
.ps-search-icon{
  width:14px; height:14px; flex-shrink:0;
  color:currentColor;
}
.ps-search-input{
  flex:1; min-width:0;
  background:transparent;
  border:0; outline:0;
  color:var(--ps-fg);
  font:inherit;
  font-size:13px;
  letter-spacing:-.005em;
}
.ps-search-input::placeholder{ color:var(--ps-fg-dim); }
.ps-search-input::-webkit-search-cancel-button{ display:none; }
.ps-search-hint{
  display:inline-flex; align-items:center;
  padding:1px 6px;
  font-family:'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size:10.5px;
  font-weight:500;
  color:var(--ps-fg-dim);
  background:rgba(255,255,255,.05);
  border:1px solid var(--ps-line);
  border-radius:4px;
}
.ps-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  padding:0;
  border:1px solid var(--ps-line);
  background:rgba(255,255,255,.04);
  color:var(--ps-fg-mute);
  border-radius:8px;
  cursor:pointer;
  position:relative;
  transition:all .2s ease;
}
.ps-icon-btn svg{ width:16px; height:16px; }
.ps-icon-btn:hover{
  color:var(--ps-fg);
  background:rgba(255,255,255,.07);
  border-color:var(--ps-line-2);
}
.ps-icon-btn:focus-visible{
  outline:2px solid var(--ps-accent);
  outline-offset:2px;
}
.ps-icon-btn.is-copied{
  color:#62d29a;
  border-color:rgba(98,210,154,.4);
}
.ps-icon-btn.is-copied::after{
  content:"Copied";
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  padding:4px 8px;
  font-size:11px;
  font-weight:500;
  color:#fff;
  background:#62d29a;
  border-radius:4px;
  white-space:nowrap;
  pointer-events:none;
  animation:psFadeIn .18s ease;
}
.ps-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:999px;
  background:linear-gradient(135deg, var(--ps-accent) 0%, var(--ps-accent-2) 100%);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ps-avatar:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(224,48,48,.35);
}
.ps-avatar:focus-visible{
  outline:2px solid var(--ps-accent);
  outline-offset:2px;
}

@media (max-width:760px){
  .ps-toolbar{ padding:10px 16px 0; gap:10px; }
  .ps-tabs{ gap:2px; }
  .ps-tab{ padding:8px 11px; font-size:13px; }
  .ps-search{ width:auto; max-width:none; flex:1 1 100%; order:3; }
  .ps-search-hint{ display:none; }
  .ps-toolbar-actions{ flex-wrap:wrap; gap:8px; }
}

/* ===== Chip strip (v2 spec §7): single row, multi-select, tinted-glass active ===== */
.ps-chips{
  flex:1 1 auto;
  min-width:0;
  display:flex; align-items:center;
  gap:8px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:0;
  scroll-padding-inline-end:24px;
  scroll-behavior:smooth;
  /* right-edge fade only so user sees there's more to scroll, but first chip stays sharp */
  -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
          mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}
.ps-chips::-webkit-scrollbar{ display:none; }
.ps-chip{
  --chip-tint:var(--accent);
  display:inline-flex; align-items:center; gap:6px;
  height:32px;
  padding:0 12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-1);
  border-radius:var(--radius-pill);
  color:var(--fg-mute);
  font-family:inherit;
  font-size:var(--fs-meta);
  font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  white-space:nowrap;
  scroll-snap-align:start;
  backdrop-filter:var(--blur-soft);
  -webkit-backdrop-filter:var(--blur-soft);
  transition:color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.ps-chip:hover{
  color:var(--fg);
  background:rgba(255,255,255,.06);
  border-color:var(--line-2);
}
.ps-chip:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.ps-chip.is-active{
  color:var(--fg);
  background:
    radial-gradient(120% 120% at 30% 30%,
      color-mix(in srgb, var(--chip-tint) 28%, transparent) 0%,
      transparent 70%),
    rgba(255,255,255,.04);
  border-color:color-mix(in srgb, var(--chip-tint) 40%, var(--line-2));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--chip-tint) 22%, transparent),
    0 0 12px color-mix(in srgb, var(--chip-tint) 25%, transparent);
}
.ps-chip-label{ letter-spacing:-.005em; }
.ps-chip-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:16px;
  padding:0 5px;
  font-size:10px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--fg-dim);
  background:rgba(255,255,255,.05);
  border-radius:var(--radius-xs);
}
.ps-chip.is-active .ps-chip-count{
  color:color-mix(in srgb, var(--chip-tint) 80%, white);
  background:color-mix(in srgb, var(--chip-tint) 18%, transparent);
}
.ps-chip-divider{
  background:transparent !important;
  border-color:transparent !important;
  color:var(--fg-dim);
  cursor:default;
  pointer-events:none;
  padding:0 4px;
  height:auto;
  font-size:14px;
  letter-spacing:0;
  box-shadow:none !important;
}

/* Per-chip tint — 7-category palette */
.ps-chip[data-chip-value="all"]       { --chip-tint:var(--accent); }
.ps-chip[data-chip-value="best-this-month"]{ --chip-tint:#FFC944; }

/* Category dot — 6px circle in --chip-tint color, before the label.
   Mirrors the pin colors on the map so chips are scannable at a glance.
   Skipped for "All" (no single category) and "Best of month" (has its own ⭐ icon). */
.ps-chip:not([data-chip-value="all"]):not(.ps-chip-bestnow)::before{
  content:"";
  flex-shrink:0;
  width:8px; height:8px;
  border-radius:999px;
  background:var(--chip-tint);
  box-shadow:0 0 6px color-mix(in srgb, var(--chip-tint) 55%, transparent);
  transition:box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.ps-chip:not([data-chip-value="all"]):not(.ps-chip-bestnow):hover::before{
  box-shadow:0 0 9px color-mix(in srgb, var(--chip-tint) 75%, transparent);
}
.ps-chip:not([data-chip-value="all"]):not(.ps-chip-bestnow).is-active::before{
  box-shadow:0 0 11px color-mix(in srgb, var(--chip-tint) 90%, transparent);
  transform:scale(1.15);
}
.ps-chip-bestnow{
  background:linear-gradient(135deg, rgba(255,201,68,.10), rgba(255,201,68,.04));
  border-color:rgba(255,201,68,.30);
}
.ps-chip-bestnow .ps-chip-icon{
  display:inline-flex;
  margin-right:5px;
  color:#FFD66B;
  filter:drop-shadow(0 0 4px rgba(255,201,68,.5));
  animation:psChipBestSparkle 2.6s ease-in-out infinite;
}
.ps-chip-bestnow.is-active{
  background:linear-gradient(135deg, rgba(255,201,68,.28), rgba(255,201,68,.14));
  border-color:rgba(255,201,68,.62);
  color:#fff4d0;
  box-shadow:0 0 0 1px rgba(255,201,68,.35), 0 4px 16px rgba(255,201,68,.15);
}
.ps-chip-bestnow.is-active .ps-chip-icon{
  color:#FFE9A0;
  filter:drop-shadow(0 0 7px rgba(255,201,68,.85));
}
@keyframes psChipBestSparkle{
  0%, 100% { transform:scale(1)    rotate(0deg);   opacity:.85; }
  50%      { transform:scale(1.15) rotate(15deg);  opacity:1;   }
}
@media (prefers-reduced-motion: reduce){
  .ps-chip-bestnow .ps-chip-icon{ animation:none; }
}
.ps-chip[data-chip-value="landmark"]  { --chip-tint:var(--cat-landmark); }
.ps-chip[data-chip-value="park"]      { --chip-tint:var(--cat-park); }
.ps-chip[data-chip-value="hidden"]    { --chip-tint:var(--cat-hidden); }
.ps-chip[data-chip-value="rooftop"]   { --chip-tint:var(--cat-rooftop); }
.ps-chip[data-chip-value="cafe"]      { --chip-tint:var(--cat-cafe); }
.ps-chip[data-chip-value="studio"]    { --chip-tint:var(--cat-studio); }
.ps-chip[data-chip-value="shop"]      { --chip-tint:var(--cat-shop); }

/* Dim row-cards that don't match active filter — gentle, still readable.
   Was opacity:.32 + saturate:.5 — too aggressive, made unfiltered cards look broken
   on initial load when stars/best-this-month logic mis-classified them. */
.ps-row-card.is-dim{
  opacity:.55;
  filter:saturate(.7);
  transition:opacity .2s ease, filter .2s ease;
}

/* ===== Map legend (single row under the map) ===== */
.ps-legend{
  margin-top:auto;
  padding:10px 14px;
  display:flex; align-items:center;
  flex-wrap:wrap;
  gap:8px 14px;
  background:var(--glass-card);
  backdrop-filter:var(--blur-soft);
  -webkit-backdrop-filter:var(--blur-soft);
  border:1px solid var(--line-1);
  border-radius:var(--radius-md);
}
.ps-legend-label{
  font-size:var(--fs-micro);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--fg-dim);
  flex-shrink:0;
}
.ps-legend-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap;
  gap:4px 12px;
  flex:1 1 auto;
}
.ps-legend-item{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-meta);
  color:var(--fg-mute);
  letter-spacing:-.005em;
}
.ps-legend-dot{
  width:8px; height:8px;
  border-radius:999px;
  background:var(--legend-color, var(--cat-landmark));
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,.5),
    0 0 6px color-mix(in srgb, var(--legend-color, var(--cat-landmark)) 55%, transparent);
}
.ps-legend-best{
  color:#FFD66B;
  font-weight:500;
}
.ps-legend-star{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 0 4px rgba(255,201,68,.55));
}
.ps-legend-landmark{ --legend-color:var(--cat-landmark); }
.ps-legend-park    { --legend-color:var(--cat-park); }
.ps-legend-hidden  { --legend-color:var(--cat-hidden); }
.ps-legend-rooftop { --legend-color:var(--cat-rooftop); }
.ps-legend-cafe    { --legend-color:var(--cat-cafe); }
.ps-legend-studio  { --legend-color:var(--cat-studio); }
.ps-legend-shop    { --legend-color:var(--cat-shop); }
.ps-legend-hint{
  margin-left:auto;
  font-size:var(--fs-meta);
  color:var(--fg-dim);
  letter-spacing:-.005em;
}
@media (max-width:760px){
  .ps-legend-hint{ display:none; }
}

/* ===== Hire poster (between map + rails) — editorial cinematic ===== */
.ps-hire{
  max-width:1320px;
  margin:32px auto;
  padding:0 24px;
  position:relative;
}
.ps-hire::before{
  content:""; position:absolute;
  left:24px; right:24px; top:0; bottom:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-elev-2);
  z-index:0;
}
.ps-hire-bg{
  position:relative;
  z-index:1;
  height:280px;
  background-size:cover;
  background-position:center 30%;
  filter:saturate(1.05) contrast(1.05);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.ps-hire-overlay{
  position:absolute;
  inset:0 24px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(90deg,
      rgba(6,7,10,.92) 0%,
      rgba(6,7,10,.78) 38%,
      rgba(6,7,10,.30) 65%,
      transparent 100%),
    linear-gradient(0deg,
      rgba(6,7,10,.40) 0%,
      transparent 50%);
  z-index:2;
  pointer-events:none;
}
.ps-hire-content{
  position:absolute;
  z-index:3;
  inset:0 24px;
  padding:36px 40px;
  display:flex; flex-direction:column; justify-content:center;
  gap:8px;
  max-width:640px;
}
.ps-hire-eyebrow{
  font-size:var(--fs-micro);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sun-sunrise);
  margin-bottom:6px;
}
.ps-hire-h{
  font-size:var(--fs-h1);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.022em;
  color:#fff;
  margin:0;
  max-width:440px;
}
.ps-hire-sub{
  font-size:var(--fs-body);
  color:rgba(255,255,255,.78);
  margin:6px 0 16px;
  max-width:440px;
}
.ps-hire-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:10px 16px;
  background:var(--accent);
  color:#fff;
  font-weight:600;
  font-size:13.5px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  width:fit-content;
  box-shadow:var(--shadow-2);
  transition:transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease),
             background-color var(--dur-fast) var(--ease);
}
.ps-hire-cta:hover{
  transform:translateY(-1px);
  background:var(--accent-2);
  box-shadow:var(--shadow-2), 0 0 24px var(--accent-glow);
}
.ps-hire-cta svg{
  transition:transform var(--dur-fast) var(--ease);
}
.ps-hire-cta:hover svg{
  transform:translateX(2px);
}

@media (max-width:760px){
  .ps-hire{ padding:0 16px; margin:20px auto; }
  .ps-hire::before{ left:16px; right:16px; }
  .ps-hire-bg{ height:240px; }
  .ps-hire-overlay{ inset:0 16px; }
  .ps-hire-content{ inset:0 16px; padding:24px 20px; max-width:none; }
  .ps-hire-h{ font-size:24px; }
}

/* ===== CUSTOM CATEGORY MENU (legacy — markup removed, kept for marker styling) ===== */
.ps-controls{
  max-width:1200px; margin:18px auto 0; padding:0 24px;
  display:none; /* legacy dropdown removed in Phase 2B */
}
/* ===== Linear/Vercel-style dropdown ===== */
.ps-menu{
  position:relative;
  max-width:280px;
}
.ps-menu-trigger{
  width:100%;
  display:flex; align-items:center; gap:8px;
  padding:9px 12px 9px 14px;
  background:#14161b;
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px;
  color:#e8e9ec;
  font-family:inherit; font-size:13px; font-weight:500;
  cursor:pointer;
  text-align:left;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.ps-menu-trigger:hover{
  border-color:rgba(255,255,255,.14);
  background:#181a20;
}
.ps-menu.is-open .ps-menu-trigger{
  border-color:rgba(255,255,255,.18);
  background:#181a20;
}
.ps-menu-trigger:focus-visible{
  outline:2px solid var(--ps-accent);
  outline-offset:1px;
}
.ps-menu-trigger-icon{
  font-size:14px;
  flex-shrink:0;
  line-height:1;
}
.ps-menu-trigger-label{
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:-.005em;
}
.ps-menu-trigger-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px;
  padding:0 7px;
  background:rgba(255,255,255,.08);
  border-radius:5px;
  color:#e8e9ec;
  font-size:10.5px; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.ps-menu-chevron{
  font-size:10px;
  color:#8a8f99;
  transition:transform .2s cubic-bezier(.4,0,.2,1);
  margin-left:0;
}
.ps-menu.is-open .ps-menu-chevron{ transform:rotate(180deg); color:#e8e9ec; }

.ps-menu-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0;
  z-index:1000;
  list-style:none; padding:4px; margin:0;
  background:#181a20;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.05),
    0 4px 8px rgba(0,0,0,.32),
    0 16px 32px rgba(0,0,0,.5);
  animation:psMenuOpen .15s cubic-bezier(.4,0,.2,1);
  transform-origin:top center;
}
@keyframes psMenuOpen{
  from{ opacity:0; transform:translateY(-4px) scale(.98); }
  to  { opacity:1; transform:translateY(0) scale(1); }
}
.ps-menu-list[hidden]{ display:none; }
.ps-menu-item{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  border-radius:5px;
  cursor:pointer;
  font-size:13px;
  color:#e8e9ec;
  transition:background-color .12s cubic-bezier(.4,0,.2,1);
  position:relative;
  outline:none;
}
.ps-menu-item:before{
  content:"";
  position:absolute; left:0; top:7px; bottom:7px; width:2px;
  background:transparent;
  border-radius:0 2px 2px 0;
  transition:background-color .15s cubic-bezier(.4,0,.2,1);
}
.ps-menu-item:hover{
  background:rgba(255,255,255,.04);
}
.ps-menu-item.is-active{
  background:rgba(255,80,80,.08);
}
.ps-menu-item.is-active:before{
  background:var(--ps-accent);
}
.ps-menu-item:focus-visible{
  background:rgba(255,255,255,.06);
}
.ps-menu-item-icon{
  font-size:14px;
  flex-shrink:0;
  line-height:1;
  opacity:.85;
}
.ps-menu-item-label{
  flex:1;
  font-weight:500;
  letter-spacing:-.005em;
}
.ps-menu-item-count{
  font-size:10.5px;
  color:#8a8f99;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.05);
  padding:1px 7px;
  border-radius:5px;
  min-width:22px;
  text-align:center;
}
.ps-menu-item.is-active .ps-menu-item-count{
  background:var(--ps-accent);
  color:#fff;
}
.ps-menu-item-check{
  display:none; /* Active state shown via left border line */
}
.ps-menu-item.is-active .ps-menu-item-check{ opacity:1; }

/* ===== MAP (v2 spec §8 — atmosphere) ===== */
.ps-map{ max-width:1200px; margin:20px auto 0; padding:0 24px; }
.ps-map-wrap{
  border:1px solid var(--line-1);
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:#04060c;
  position:relative;
  box-shadow:var(--shadow-2);
  isolation:isolate;
}
/* Atmospheric glow: warm radial centred on 1st Bezirk (city core) — bleeds into the dark tiles. */
.ps-map-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:401;
  background:
    radial-gradient(60% 50% at 52% 56%,
      rgba(255, 184, 71, .14) 0%,
      rgba(255, 184, 71, .06) 35%,
      transparent 70%),
    radial-gradient(120% 80% at 50% 50%,
      transparent 50%,
      rgba(6, 8, 18, .55) 100%);
  border-radius:inherit;
  mix-blend-mode:screen;
}
/* Soft inner shadow + edge-fade kept on top of the atmosphere */
.ps-map-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:402;
  box-shadow:inset 0 0 90px 0 rgba(0,0,0,.55);
  border-radius:inherit;
}
/* Cinematic tile tone — slight warm desaturation for editorial photo-mood. */
.ps-leaflet .leaflet-tile{
  filter:contrast(1.04) saturate(.65) brightness(.94) hue-rotate(-4deg);
}
/* Selective labels layer — small + low contrast so they don't fight markers */
.ps-leaflet .leaflet-overlay-pane .leaflet-tile{
  filter:contrast(.85) brightness(1.4) saturate(0);
  mix-blend-mode:screen;
}
.ps-map-empty{
  text-align:center;
  font-size:13px;
  color:var(--ps-fg-mute);
  margin:14px 0 0 0;
  padding:14px;
  background:var(--ps-bg-2);
  border:1px dashed var(--ps-line-2);
  border-radius:var(--ps-radius-sm);
}
.ps-leaflet{
  width:100%;
  height:720px;
  background:#0e0f12;
  z-index:1;
}
@media (max-width:820px){
  .ps-leaflet{ height:500px; }
}
@media (max-width:480px){
  .ps-leaflet{ height:440px; }
}

/* Leaflet UI overrides — dark theme match */
.leaflet-container{
  background:#0a0b0e;
  font-family:Inter, sans-serif;
  outline:none;
}
.leaflet-control-attribution{
  background:rgba(10,11,14,.85) !important;
  color:var(--ps-fg-dim) !important;
  font-size:10px !important;
  padding:3px 8px !important;
}
.leaflet-control-attribution a{ color:var(--ps-fg-mute) !important; }
/* Hide Leaflet attribution badge (incl. Ukrainian flag) — credit moved to outro */
.leaflet-control-attribution{ display:none !important; }

/* Custom zoom controls — glass tiles that match the toolbar */
.leaflet-control-zoom{
  border:0 !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  margin:14px !important;
  background:transparent !important;
}
.leaflet-control-zoom a{
  width:34px !important; height:34px !important;
  line-height:34px !important;
  font-size:18px !important;
  font-weight:400 !important;
  background:var(--glass-toolbar) !important;
  color:var(--fg) !important;
  border:1px solid var(--line-2) !important;
  border-radius:var(--radius-sm) !important;
  backdrop-filter:var(--blur-glass) !important;
  -webkit-backdrop-filter:var(--blur-glass) !important;
  transition:background-color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease) !important;
}
.leaflet-control-zoom a:hover{
  background:rgba(20,22,32,.85) !important;
  color:#fff !important;
  border-color:var(--line-3) !important;
}
.leaflet-control-zoom a + a{
  margin-top:0 !important;
}

/* ===== Map markers — circle dot + glow (v2 spec §4) =====
   Default: 22×22 SVG container (14 px visible dot + glow halo).
   Hover: scale + brighter glow. Click: opens full modal. */
.ps-marker{
  background:transparent !important;
  border:none !important;
  cursor:pointer;
  transition:transform var(--dur-fast) var(--ease);
}
.ps-marker svg{
  display:block;
  transform-origin:11px 11px;
  transition:transform var(--dur-base) var(--ease);
}
.ps-marker:hover{ z-index:1000 !important; }
.ps-marker:hover svg{
  transform:scale(1.45);
}
.ps-marker.is-active svg{
  transform:scale(1.7);
}
.ps-marker.is-flash svg{
  animation:psFlashDot .9s var(--ease);
}
/* Recommended pin: continuous soft pulse halo */
.ps-marker.is-recommended{
  z-index:900 !important;
}
.ps-marker.is-recommended svg{
  transform:scale(1.25);
  filter:drop-shadow(0 0 14px rgba(255,255,255,.45));
}
.ps-marker.is-recommended::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:14px; height:14px;
  border-radius:999px;
  background:rgba(255,255,255,.55);
  transform:translate(-50%, -50%);
  z-index:-1;
  animation:psPulseRing 2.4s var(--ease) infinite;
}
@keyframes psPulseRing{
  0%   { transform:translate(-50%, -50%) scale(1);   opacity:.8; }
  70%  { transform:translate(-50%, -50%) scale(3.4); opacity:0; }
  100% { transform:translate(-50%, -50%) scale(3.4); opacity:0; }
}
@keyframes psFlashDot{
  0%   { transform:scale(1); }
  35%  { transform:scale(2.2); filter:drop-shadow(0 0 12px rgba(255,255,255,.6)); }
  100% { transform:scale(1); }
}

/* Marker cluster — neutral dark base with subtle gold trim. Cluster = "container", not "accent".
   The accent slot is reserved for is-best-this-month pulse — they should NOT compete. */
.ps-cluster{
  background:transparent !important;
  border:none !important;
}
.ps-cluster .ps-cluster-inner{
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(20,18,14,.86);
  border:1px solid rgba(255,201,68,.30);
  color:#EDEEF2;
  font-family:"Inter", -apple-system, sans-serif;
  font-weight:600;
  font-size:13px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.005em;
  box-shadow:0 4px 14px rgba(0,0,0,.50), inset 0 0 0 3px rgba(20,18,14,.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:transform .15s var(--ease), border-color .15s var(--ease);
}
.ps-cluster:hover .ps-cluster-inner{
  transform:scale(1.06);
  border-color:rgba(255,201,68,.55);
  background:rgba(28,24,18,.92);
}
.ps-cluster-s .ps-cluster-inner{ font-size:12px; }
.ps-cluster-m .ps-cluster-inner{ font-size:14px; border-color:rgba(255,201,68,.40); }
.ps-cluster-l .ps-cluster-inner{
  font-size:15px;
  border-color:rgba(255,201,68,.50);
  background:rgba(20,18,14,.92);
}
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow{
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}

/* Best Place this month — gold STAR pins (replace dot pulse).
   Pulse animation is gated by the .shows-stars class on #ps-leaflet (toggled by JS
   based on the active chip). When a category filter like "Vienna Icons" is on,
   stars stop glowing so they don't compete for attention. */
.ps-marker.is-best-this-month{
  z-index:900 !important;
}
#ps-leaflet.shows-stars .ps-marker.is-best-this-month svg{
  animation:psBestStarPulse 2.4s var(--ease) infinite;
  filter:drop-shadow(0 0 8px rgba(255,201,68,.55));
}
#ps-leaflet:not(.shows-stars) .ps-marker.is-best-this-month svg{
  animation:none;
  filter:drop-shadow(0 0 4px rgba(255,201,68,.30));
}
#ps-leaflet.shows-stars .ps-marker.is-best-this-month::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:18px; height:18px;
  border-radius:999px;
  background:rgba(255,201,68,.40);
  transform:translate(-50%, -50%);
  z-index:-1;
  animation:psBestStarRing 2.4s var(--ease) infinite;
  pointer-events:none;
}
@keyframes psBestStarRing{
  0%   { transform:translate(-50%, -50%) scale(0.8); opacity:.7; }
  60%  { transform:translate(-50%, -50%) scale(2.5); opacity:0; }
  100% { transform:translate(-50%, -50%) scale(2.5); opacity:0; }
}
@keyframes psBestStarPulse{
  0%, 100% { transform:scale(1)    rotate(0deg);   filter:drop-shadow(0 0 6px rgba(255,201,68,.50)); }
  50%      { transform:scale(1.12) rotate(-3deg);  filter:drop-shadow(0 0 14px rgba(255,201,68,.95)); }
}
@media (prefers-reduced-motion: reduce){
  .ps-marker.is-best-this-month svg,
  .ps-marker.is-best-this-month::before{
    animation:none;
  }
  .ps-marker.is-best-this-month svg{
    filter:drop-shadow(0 0 8px rgba(255,201,68,.85));
  }
}

/* ===== Hover photo card (Leaflet tooltip) — editorial layout ===== */
.leaflet-tooltip.ps-marker-card{
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  pointer-events:none;
}
.leaflet-tooltip.ps-marker-card::before{ display:none; }
.ps-mc{
  display:block;
  width:300px;
  background:rgba(14,16,22,.94);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 8px 16px rgba(0,0,0,.45),
    0 24px 48px rgba(0,0,0,.55);
  font-family:inherit;
  color:var(--fg);
  white-space:normal;
  /* --ps-shift-x/y are set by JS on tooltipopen to clamp the card inside the map bounds */
  transform:translate(var(--ps-shift-x, 0px), var(--ps-shift-y, 0px));
  animation:psCardIn .18s var(--ease);
}
@keyframes psCardIn{
  from { opacity:0; transform:translate(var(--ps-shift-x, 0px), calc(var(--ps-shift-y, 0px) + 6px)) scale(.985); }
  to   { opacity:1; transform:translate(var(--ps-shift-x, 0px), var(--ps-shift-y, 0px)) scale(1); }
}
.ps-mc-photo{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  background:#0a0b0e;
  overflow:hidden;
}
.ps-mc-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s var(--ease);
}
.ps-mc:hover .ps-mc-img{ transform:scale(1.04); }
.ps-mc-photo::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:60%;
  background:linear-gradient(0deg, rgba(0,0,0,.5) 0%, transparent 100%);
  pointer-events:none;
}
.ps-mc-badge,
.ps-mc-permit{
  position:absolute;
  z-index:2;
  display:inline-flex; align-items:center;
  padding:4px 9px;
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  border-radius:999px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.ps-mc-badge{
  top:10px; right:10px;
  background:rgba(0,0,0,.65);
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
}
.ps-mc-permit{
  bottom:10px; left:10px;
  border:1px solid rgba(255,255,255,.10);
  max-width:calc(100% - 20px);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ps-mc-permit.is-free{
  background:rgba(107,203,119,.18);
  color:#9fe6ad;
}
.ps-mc-permit.is-permit{
  background:rgba(255,184,74,.18);
  color:#ffd17a;
}

/* Poster — fallback when a pin has no photo (hover card).
   aspect-ratio matches .ps-mc-photo so all hover-cards have identical media-area height. */
.ps-mc-poster{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:6px;
  padding:18px 16px 22px;
  aspect-ratio:16/10;
  background:
    linear-gradient(135deg, rgba(255,138,0,.10) 0%, rgba(126,91,208,.10) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 6px, rgba(255,255,255,0) 6px 12px),
    #11141a;
  color:rgba(255,255,255,.92);
}
.ps-mc-poster::after{ display:none; } /* kill the dark gradient that's there for photos */
.ps-mc-poster .ps-mc-poster-icon{
  width:36px; height:36px;
  color:rgba(255,184,74,.78);
  margin-bottom:2px;
}
.ps-mc-poster .ps-mc-poster-eyebrow{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:rgba(255,184,74,.85);
}
.ps-mc-poster .ps-mc-poster-headline{
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  color:#fff;
  max-width:240px;
}
.ps-mc.ps-mc-no-photo:hover .ps-mc-img{ transform:none; } /* no zoom on poster */

/* Hero — single main photo in detail modal (when no gallery but photo.src exists) */
.ps-detail-hero{
  margin:8px 0 4px;
  border-radius:14px;
  overflow:hidden;
  background:#0a0b0e;
  position:relative;
}
.ps-detail-hero-img{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.ps-detail-hero-caption{
  font-size:11px;
  line-height:1.4;
  color:rgba(255,255,255,.55);
  padding:8px 14px 10px;
  background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, transparent 100%);
  position:absolute;
  bottom:0; left:0; right:0;
}
.ps-detail-hero-caption a{
  color:rgba(255,255,255,.78);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.20);
}
.ps-detail-hero-caption a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.55); }

/* Compact poster — replaces the big photo block when a pin has no photo. */
/* The "main" .ps-detail-poster styles live further below (after gallery section); */
/* keeping the CTA / pill styles here so component pieces stay co-located. */
.ps-detail-poster-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
  margin-top:0;
}
.ps-detail-poster-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 16px;
  border-radius:999px;
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.ps-detail-poster-cta.is-insta{
  background:rgba(255,184,74,.16);
  color:#ffd17a;
  border-color:rgba(255,184,74,.30);
}
.ps-detail-poster-cta.is-insta:hover{
  background:rgba(255,184,74,.24);
  transform:translateY(-1px);
}
.ps-detail-poster-cta.is-email{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.14);
}
.ps-detail-poster-cta.is-email:hover{
  background:rgba(255,255,255,.10);
  transform:translateY(-1px);
}
.ps-detail-poster-rule{
  display:inline-flex;
  align-items:center;
  gap:5px;
  align-self:flex-start;
  margin:0;
  padding:0;
  font-size:10px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,201,68,.62);
  background:transparent;
  border:0;
  border-radius:0;
}
.ps-mc-poster-rule{
  display:block;
  margin-top:4px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,201,68,.78);
}

.ps-mc-body{
  padding:12px 14px 14px;
  display:flex; flex-direction:column;
  gap:8px;
}
.ps-mc-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--fg);
  line-height:1.2;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.ps-mc-row{
  display:flex; flex-direction:column;
  gap:1px;
  min-width:0;
}
.ps-mc-eyebrow{
  font-size:9.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--fg-dim);
}
.ps-mc-value{
  font-size:12.5px;
  color:var(--fg-mute);
  letter-spacing:-.005em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ps-mc-time{
  color:color-mix(in srgb, var(--sun-golden-pm) 70%, white);
  font-weight:500;
}
.ps-mc-cta{
  margin-top:2px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.10em;
  color:var(--accent);
}

/* Dimmed state (filter out) */
.ps-marker.is-dimmed .ps-marker-polaroid{
  filter:grayscale(1) brightness(.5);
  opacity:.5;
}
.ps-marker.is-dimmed{ opacity:.45; }

/* ===== Leaflet popup card ===== */
.leaflet-popup.ps-popup .leaflet-popup-content-wrapper{
  background:var(--ps-bg-2);
  color:var(--ps-fg);
  border:1px solid var(--ps-line-2);
  border-radius:var(--ps-radius);
  box-shadow:var(--ps-shadow);
  padding:0;
  overflow:hidden;
}
.leaflet-popup.ps-popup .leaflet-popup-content{
  margin:0; width:auto !important;
}
.leaflet-popup.ps-popup .leaflet-popup-tip{
  background:var(--ps-bg-2);
  border:1px solid var(--ps-line-2);
}
.leaflet-popup.ps-popup .leaflet-popup-close-button{
  color:var(--ps-fg-mute) !important;
  font-size:22px !important;
  padding:6px 8px !important;
  z-index:5;
}
.leaflet-popup.ps-popup .leaflet-popup-close-button:hover{
  color:#fff !important;
}
.ps-popup-card{
  width:300px;
  font-family:Inter, sans-serif;
}
.ps-popup-img-wrap{
  position:relative;
  aspect-ratio:3/2;
  background:#1a1c22;
}
.ps-popup-img{
  width:100%; height:100%; object-fit:cover;
  display:block;
}
.ps-popup-num{
  position:absolute; top:10px; left:10px;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px;
  padding:0 9px;
  background:var(--ps-accent);
  color:#fff;
  border-radius:999px;
  font-size:13px; font-weight:700;
  font-variant-numeric:tabular-nums;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
.ps-popup-body{
  padding:14px 16px 16px;
}
.ps-popup-title{
  font-size:15px; font-weight:700;
  margin:0 0 6px 0;
  color:var(--ps-fg);
  line-height:1.25;
}
.ps-popup-desc{
  font-size:12.5px; line-height:1.45;
  color:var(--ps-fg-mute);
  margin:0 0 10px 0;
}
.ps-popup-pills{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-bottom:12px;
}
.ps-popup-pill{
  display:inline-flex; align-items:center;
  padding:4px 10px;
  background:var(--ps-bg-3);
  border:1px solid var(--ps-line);
  border-radius:999px;
  font-size:11px;
  color:var(--ps-fg-mute);
  font-weight:500;
}
.ps-popup-pill.is-permit{
  background:rgba(224,48,48,.12);
  border-color:rgba(224,48,48,.35);
  color:#ff8080;
}
.ps-popup-pill.is-free{
  background:rgba(98,210,154,.10);
  border-color:rgba(98,210,154,.30);
  color:#7fdcaf;
}
.ps-popup-cta{
  width:100%;
  padding:9px 14px;
  background:var(--ps-accent);
  border:none;
  border-radius:8px;
  color:#fff;
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer;
  transition:background .2s ease;
}
.ps-popup-cta:hover{
  background:var(--ps-accent-2);
}

/* ===== MODAL ===== */
.ps-modal[hidden]{ display:none; }
.ps-modal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  animation:psFadeIn .2s ease;
}
.ps-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.ps-modal-panel{
  position:relative; z-index:1;
  background:var(--bg-elev-1);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);
  max-width:880px; width:100%;
  max-height:92vh;
  overflow-y:auto;
  padding:28px 32px 32px;
}
.ps-modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  background:transparent;
  border:1px solid var(--ps-line);
  border-radius:50%;
  color:var(--ps-fg);
  font-size:22px; line-height:1;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all .2s ease;
  font-family:inherit;
}
.ps-modal-close:hover{
  background:var(--ps-accent);
  border-color:var(--ps-accent);
}

/* Detail content (rendered hidden, shown in modal) */
.ps-detail-head{
  margin-bottom:18px;
}
.ps-detail-title{
  font-size:28px; font-weight:700;
  margin:0 0 4px 0;
  color:var(--fg);
  letter-spacing:-.018em;
  line-height:1.1;
}
.ps-detail-address{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px;
  color:var(--fg-mute);
  text-decoration:none;
  margin-bottom:14px;
  transition:color var(--dur-fast) var(--ease);
}
.ps-detail-address:hover{
  color:var(--accent);
}
.ps-detail-address svg{
  color:var(--cat-water);
  flex-shrink:0;
}

/* Gallery slider in modal */
.ps-detail-gallery{
  margin:0 0 22px;
  display:flex; flex-direction:column; gap:10px;
}
.ps-gallery-stage{
  position:relative;
  background:#0a0b0e;
  border-radius:var(--radius-md);
  overflow:hidden;
  aspect-ratio: 16/10;
}
.ps-gallery-figure{
  margin:0; padding:0;
  width:100%; height:100%;
  display:flex; flex-direction:column;
}
.ps-gallery-img{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.ps-gallery-caption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:60px 18px 14px;
  background:linear-gradient(0deg, rgba(0,0,0,.85) 0%, transparent 100%);
  color:#fff;
  pointer-events:auto;
}
.ps-gallery-text{
  margin:0 0 4px;
  font-size:14px; font-weight:500;
  letter-spacing:-.005em;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.ps-gallery-bottom{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px;
  font-size:11px;
  color:rgba(255,255,255,.78);
}
.ps-gallery-tech{
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  font-family:'SF Mono', ui-monospace, Menlo, monospace;
}
.ps-gallery-credit a{
  color:rgba(255,255,255,.62);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.ps-gallery-credit a:hover{ color:#fff; }
.ps-gallery-author{
  color:#fff !important;
  font-weight:600;
  border-bottom-color:var(--accent) !important;
}

/* Curator footer line under the gallery */
.ps-gallery-curator{
  margin:6px 0 0;
  font-size:11px;
  color:var(--fg-dim);
  text-align:right;
  letter-spacing:-.005em;
}
.ps-gallery-curator a{
  display:inline-flex; align-items:center; gap:5px;
  color:var(--fg-mute);
  text-decoration:none;
  margin-left:4px;
  transition:color var(--dur-fast) var(--ease);
}
.ps-gallery-curator a:hover{ color:var(--accent); }
.ps-gallery-curator svg{ flex-shrink:0; opacity:.85; }
.ps-gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.6);
  backdrop-filter:var(--blur-glass);
  -webkit-backdrop-filter:var(--blur-glass);
  border:1px solid var(--line-2);
  border-radius:999px;
  color:#fff;
  cursor:pointer;
  z-index:2;
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ps-gallery-arrow{ opacity:.85; }  /* visible by default — touch & desktop both */
.ps-gallery-stage:hover .ps-gallery-arrow{ opacity:1; }
.ps-gallery-prev{ left:12px; }
.ps-gallery-next{ right:12px; }
.ps-gallery-arrow:hover{ background:rgba(0,0,0,.85); }
.ps-gallery-arrow:active{ transform:translateY(-50%) scale(.94); }
.ps-gallery-arrow:focus-visible{ opacity:1; outline:2px solid var(--accent); outline-offset:2px; }

/* Single-line meta row below thumbnails (replaces caption-stack) */
.ps-gallery-meta-row{
  display:flex; align-items:baseline;
  flex-wrap:wrap;
  gap:6px 10px;
  margin:6px 0 0;
  padding:0 2px;
  font-size:11px;
  color:var(--fg-dim);
  letter-spacing:.005em;
}
.ps-gallery-meta-row [data-gallery-tech]{
  font-family:'SF Mono', ui-monospace, Menlo, monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  color:var(--fg-mute);
}
.ps-gallery-meta-row [data-gallery-tech]:not(:empty)::after{
  content:" · ";
  color:rgba(255,255,255,.20);
  margin:0 4px;
}
.ps-gallery-meta-row [data-gallery-credit]{
  color:rgba(255,255,255,.45);
}
.ps-gallery-meta-row [data-gallery-credit] a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.ps-gallery-meta-row [data-gallery-credit] a:hover{ color:#fff; }

/* "Why this month" callout — only renders for spots featured in current bestThisMonth list.
   Visual cue: gold border-left, subtle gold tint, star-shaped icon — matches map ⭐ pin style. */
.ps-detail-month-reason{
  margin:18px 0 4px;
  padding:12px 14px 14px;
  border-left:3px solid #FFC944;
  background:linear-gradient(135deg, rgba(255,201,68,.10), rgba(255,201,68,.04));
  border-radius:6px;
}
.ps-month-reason-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#FFD66B;
  margin-bottom:6px;
}
.ps-month-reason-label svg{
  filter:drop-shadow(0 0 4px rgba(255,201,68,.4));
}
.ps-month-reason-text{
  margin:0;
  font-size:15px;
  line-height:1.5;
  font-weight:500;
  color:#fff;
  letter-spacing:-.005em;
}
.ps-month-reason-tech{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.4;
  color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
}

/* Editorial prose block — replaces 3 red-headed sections with one flowing read */
.ps-detail-prose{
  margin:24px 0 22px;
  padding:0 2px;
}
.ps-detail-eyebrow{
  display:inline-block;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,201,68,.85);
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,201,68,.20);
}
.ps-detail-prose p{
  margin:0 0 12px;
  font-size:14.5px;
  line-height:1.65;
  color:var(--fg);
}
.ps-detail-prose p:last-child{ margin-bottom:0; }
.ps-detail-prose-lead{
  font-size:15.5px !important;
  font-weight:500;
  color:#fff !important;
  letter-spacing:-.005em;
}
.ps-detail-months-block{
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Compact poster — horizontal layout, ~120px tall instead of 280px */
.ps-detail-poster{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
  padding:14px 16px 12px;
  margin:8px 0 4px;
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,201,68,.10) 0%, rgba(126,91,208,.08) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.014) 0 6px, rgba(255,255,255,0) 6px 12px),
    #11141a;
  border:1px solid rgba(255,201,68,.18);
  text-align:left;
}
.ps-detail-poster-head{
  display:flex; align-items:center; gap:12px;
}
.ps-detail-poster-cam{
  flex-shrink:0;
  color:rgba(255,201,68,.78);
}
.ps-detail-poster-text{
  display:flex; flex-direction:column; gap:2px;
  min-width:0;
}
.ps-detail-poster-eyebrow{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:rgba(255,201,68,.85);
}
.ps-detail-poster-h{
  font-size:14.5px;
  font-weight:600;
  color:#fff;
  line-height:1.25;
}

.ps-gallery-thumbs{
  list-style:none; padding:0; margin:0;
  display:flex;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.ps-gallery-thumbs::-webkit-scrollbar{ display:none; }
.ps-gallery-thumb{
  flex:0 0 80px;
  width:80px; height:54px;
  padding:0;
  border:2px solid transparent;
  border-radius:8px;
  overflow:hidden;
  background:#0a0b0e;
  cursor:pointer;
  scroll-snap-align:start;
  transition:border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  opacity:.55;
}
.ps-gallery-thumb img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.ps-gallery-thumb:hover{
  opacity:.85;
}
.ps-gallery-thumb.is-active{
  border-color:var(--accent);
  opacity:1;
}

/* Recommendation block */
.ps-detail-recommendation{
  background:rgba(255,255,255,.03);
  border-left:2px solid var(--accent);
  padding:14px 18px;
  border-radius:0 8px 8px 0;
  margin:0 0 22px;
}
.ps-detail-recommendation .ps-detail-section-h{
  margin-bottom:8px;
}
.ps-detail-recommendation p{
  font-size:14px; line-height:1.6;
  color:var(--fg);
  margin:0;
}
.ps-detail-desc{
  font-size:15px; line-height:1.55;
  color:var(--ps-fg-mute);
  margin:0 0 16px 0;
}
.ps-detail-meta{
  display:flex; flex-wrap:wrap; gap:6px;
  font-size:12px;
  color:var(--fg-mute);
  padding:10px 0;
  border-top:1px solid var(--line-1);
  border-bottom:1px solid var(--line-1);
  margin-bottom:18px;
}
.ps-meta-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 8px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line-1);
  border-radius:var(--radius-pill);
  letter-spacing:-.005em;
}
.ps-meta-pill strong{
  color:var(--fg-dim);
  font-weight:600;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.ps-meta-pill > span:not(.ps-meta-dot){
  color:var(--fg);
  font-weight:500;
}
.ps-meta-dot{
  width:7px; height:7px;
  border-radius:999px;
  background:var(--meta-color, var(--accent));
  box-shadow:0 0 6px color-mix(in srgb, var(--meta-color, var(--accent)) 70%, transparent);
}

/* bestTime tints */
.ps-meta-time-sunrise   { --meta-color:var(--sun-sunrise); }
.ps-meta-time-golden-am { --meta-color:var(--sun-golden-am); }
.ps-meta-time-midday    { --meta-color:var(--sun-midday); }
.ps-meta-time-golden-pm { --meta-color:var(--sun-golden-pm); }
.ps-meta-time-blue      { --meta-color:var(--sun-blue); }
.ps-meta-time-night     { --meta-color:var(--sun-night); }
.ps-meta-time-any       { --meta-color:var(--fg-dim); }
.ps-meta-time .ps-meta-pill > span:last-child,
.ps-meta-time > span:last-child{
  color:color-mix(in srgb, var(--meta-color) 70%, white);
}

/* permit emphasis */
.ps-meta-permit > span:last-child{ color:var(--cat-art); }
.ps-meta-permit-free > span:last-child{ color:var(--cat-park); }
.ps-detail-section-h{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ps-accent-2);
  margin-bottom:6px;
}
.ps-detail-best-note,
.ps-detail-tip{
  margin-bottom:18px;
}
.ps-detail-best-note p,
.ps-detail-tip p{
  font-size:14px; line-height:1.6;
  color:var(--ps-fg);
  margin:0;
}
.ps-detail-months{
  margin-top:6px;
}
.ps-months{
  display:grid; grid-template-columns:repeat(12, 1fr);
  gap:3px;
}
.ps-month{
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:600;
  height:30px;
  border-radius:4px;
}
.ps-month-0{ background:var(--ps-month-skip); color:#666; }
.ps-month-1{ background:var(--ps-month-good); color:#0a0b0e; }
.ps-month-2{ background:var(--ps-month-peak); color:#0a0b0e; }
@media (max-width:480px){
  .ps-modal-panel{ padding:24px 18px; }
  .ps-detail-title{ font-size:19px; line-height:1.2; }
  .ps-month{ font-size:9px; height:26px; }

  /* Poster: compact on phone — was eating ~50% of viewport */
  .ps-detail-poster{
    padding:18px 14px 14px;
    gap:6px;
    margin:6px 0 0;
    border-radius:14px;
  }
  .ps-detail-poster-icon svg{ width:28px; height:28px; }
  .ps-detail-poster-eyebrow{ font-size:10px; letter-spacing:.10em; }
  .ps-detail-poster-h{ font-size:14.5px; line-height:1.25; }
  .ps-detail-poster-body{ font-size:12.5px; line-height:1.4; max-width:none; }
  .ps-detail-poster-actions{ flex-direction:row; gap:8px; margin-top:4px; flex-wrap:wrap; justify-content:center; }
  .ps-detail-poster-cta{ padding:8px 12px; font-size:12px; gap:6px; }
  .ps-detail-poster-cta svg{ width:13px; height:13px; }
  .ps-detail-poster-rule{ font-size:9.5px; padding:3px 8px; margin-top:6px; letter-spacing:.08em; }

  /* Detail body sections — smaller, tighter */
  .ps-detail-section-h{ font-size:11px; letter-spacing:.10em; }
  .ps-detail-best-note,
  .ps-detail-tip,
  .ps-detail-recommendation{
    margin-top:14px;
  }
  .ps-detail-best-note p,
  .ps-detail-tip p,
  .ps-detail-recommendation p{
    font-size:13.5px; line-height:1.55;
  }

  /* Header meta pills wrap nicely */
  .ps-detail-meta{ gap:6px; }
  .ps-meta-pill{ font-size:11px; padding:4px 9px; }
}

/* ===== Mobile polish (≤640px) — touch targets, hide redundant blocks ===== */
@media (max-width:640px){
  /* Chips: bigger touch target, more breathing space */
  .ps-chips{
    gap:8px;
    padding:4px 0;
    scroll-padding-inline-start:16px;
  }
  .ps-chip{
    height:38px;
    padding:0 14px;
    font-size:13.5px;
  }
  .ps-chip-count{
    min-width:20px; height:18px;
    font-size:10.5px;
  }

  /* Share/avatar action group — keep on same row as chips, no awkward wrap */
  .ps-toolbar-actions{
    flex-shrink:0;
    flex-wrap:nowrap;
    align-self:center;
  }
  .ps-icon-btn{
    width:38px; height:38px;
  }

  /* Legend block at bottom is redundant with chips — hide on mobile */
  .ps-legend{ display:none; }

  /* Row figure card — slightly smaller on mobile so 1.6 cards visible (peek) */
  .ps-row-card{ flex:0 0 240px; }

  /* Modal close — more prominent on mobile */
  .ps-modal-close{
    top:10px; right:10px;
    width:40px; height:40px;
    background:rgba(0,0,0,.55);
    border-color:rgba(255,255,255,.20);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    z-index:5;
  }
  .ps-modal-panel{ padding-top:54px; }

  /* Best Place this month widget — title smaller on phone */
  .ab-best-now-title{ font-size:16px; }
  .ab-best-now-icon{ width:16px; height:16px; }

  /* Modal redesign — magazine layout, photo dominates on phone */
  .ps-detail-head{ margin-bottom:14px; }
  .ps-detail-title{ font-size:21px !important; line-height:1.2; margin-bottom:6px; }
  .ps-detail-address{ font-size:12.5px; margin-bottom:10px; }
  .ps-detail-address svg{ width:12px; height:12px; }
  .ps-detail-meta{ gap:6px; }
  .ps-meta-pill{ font-size:10.5px; padding:3px 9px; }

  /* Bigger photo on phone (4:3 instead of 3:2) — image hugs more vertical real estate */
  .ps-gallery-stage{ aspect-ratio:4/3; border-radius:12px; }
  .ps-detail-hero{ border-radius:12px; }
  .ps-detail-hero-img{ aspect-ratio:4/3; }

  /* Caption overlay — readable but not blocking the photo */
  .ps-gallery-caption{ padding:42px 14px 12px; }
  .ps-gallery-text{ font-size:12.5px; line-height:1.3; margin:0; }

  /* Tech+credit micro-row */
  .ps-gallery-meta-row{ font-size:10px; gap:0 8px; }

  /* Hide curator credit on phone — poster + brand is already everywhere */
  .ps-gallery-curator{ display:none; }

  /* Editorial prose */
  .ps-detail-prose{ margin:18px 0 16px; }
  .ps-detail-prose p{ font-size:13.5px; line-height:1.6; margin-bottom:10px; }
  .ps-detail-prose-lead{ font-size:14.5px !important; }
  .ps-detail-eyebrow{ font-size:9.5px; letter-spacing:.16em; margin-bottom:8px; padding-bottom:5px; }
  .ps-detail-months-block{ margin-top:14px; padding-top:12px; }

  /* Compact poster — already styled; just tighten further on phone */
  .ps-detail-poster{ padding:12px 14px 12px; }
  .ps-detail-poster-cam{ width:20px; height:20px; }
  .ps-detail-poster-h{ font-size:13.5px; }
  .ps-detail-poster-cta{ padding:7px 11px; font-size:11.5px; }
  .ps-detail-poster-rule{ font-size:9.5px; }
}

/* Placeholder for row card when pin has no photo (poster fallback in row) */
.ps-row-figure-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:16/10;
  background:
    linear-gradient(135deg, rgba(255,201,68,.10) 0%, rgba(126,91,208,.06) 100%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 6px, rgba(255,255,255,0) 6px 12px),
    #11141a;
  color:rgba(255,201,68,.55);
  border-radius:8px;
}

/* Modal opening — smoother fade + scale (was abrupt) */
.ps-modal[hidden]{ display:none; }
.ps-modal:not([hidden]){
  animation:psModalIn .22s cubic-bezier(.22,1,.36,1);
}
.ps-modal:not([hidden]) .ps-modal-panel{
  animation:psModalPanelIn .26s cubic-bezier(.22,1,.36,1);
}
@keyframes psModalIn{
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes psModalPanelIn{
  from { opacity:0; transform:translateY(8px) scale(.98); }
  to   { opacity:1; transform:translateY(0)   scale(1);   }
}
@media (prefers-reduced-motion: reduce){
  .ps-modal:not([hidden]),
  .ps-modal:not([hidden]) .ps-modal-panel{ animation:none; }
}

/* ============================================================
   EDITORIAL POLISH — to lift the page out of "vibe-coded" stock look.
   Three moves: serif display font, warm film grain, gold hairlines.
   ============================================================ */

/* Grain is supplied globally by .grain in main.css — no second overlay here. */

/* 2. Serif display for editorial headlines — only specific moments, not body. */
.ps-page .ps-h1{
  font-family:var(--font-display);
  font-variation-settings:"opsz" 144, "SOFT" 0;
  font-weight:900;
  letter-spacing:-.035em;
  font-size:clamp(40px, 5.6vw, 64px);
  line-height:.94;
}
.ps-page .ps-h1 em,
.ps-page .ps-h1 i{
  font-style:italic;
  font-variation-settings:"opsz" 144, "SOFT" 50;
  font-weight:700;
}

/* Hero eyebrow — gold prefix dot, refined letter-spacing */
.ps-page .ps-hero-tag{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-left:18px;
  letter-spacing:.22em;
  color:#d4d1c8;
  font-weight:600;
}
.ps-page .ps-hero-tag::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:10px; height:1px;
  background:linear-gradient(90deg, transparent 0%, #FFC944 100%);
  transform:translateY(-50%);
}

/* Gold hairline under the hero — separates the masthead from content. */
.ps-page .ps-hero-inner::after{
  content:"";
  display:block;
  width:80px;
  height:1px;
  background:linear-gradient(90deg, #FFC944 0%, rgba(255,201,68,.15) 60%, transparent 100%);
  margin:18px 0 0;
}
@media (max-width:640px){
  .ps-page .ps-h1{ font-size:34px; line-height:1; letter-spacing:-.03em; }
  .ps-page .ps-hero-inner::after{ width:48px; margin-top:14px; }
}

/* 3. Modal detail title — also serif, also editorial. Photo + serif name = magazine. */
.ps-page .ps-detail-title,
.ps-modal .ps-detail-title{
  font-family:var(--font-display);
  font-variation-settings:"opsz" 144;
  font-weight:700;
  letter-spacing:-.022em;
  line-height:1.08;
}

/* 4. Atlas row title — serif eyebrow style for "New Place / Neue Orte" */
.ps-page .ps-row-title{
  font-family:var(--font-display);
  font-variation-settings:"opsz" 60;
  font-weight:700;
  letter-spacing:-.012em;
}

/* 5. Pin number badges in row cards — large serif, like magazine numbering */
.ps-page .ps-row-num{
  font-family:var(--font-display);
  font-variation-settings:"opsz" 144;
  font-weight:900;
  font-feature-settings:"tnum" 1;
}

/* 6. Subtle gold separator between major page regions
       (after toolbar, before "New Place" row, etc.) */
.ps-page .ps-rows{ position:relative; }
/* Gold separator: anchored to the title text itself so it aligns no matter what
   horizontal padding .ps-rows uses (24px desktop, 16px mobile). */
.ps-page .ps-row-title{ position:relative; padding-top:14px; }
.ps-page .ps-row-title::before{
  content:"";
  position:absolute;
  top:0; left:0;
  width:32px; height:1px;
  background:rgba(255,201,68,.32);
}

/* 7. Polished EN/DE switch — pill with serif numerals feel */
.ps-page .ps-lang{
  background:rgba(12,11,10,.55);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(0,0,0,.4);
}

/* 8. Hero photo cinematic duotone — subtle warm tint over the cool blue night photo. */
.ps-page .ps-hero-photo .ps-hero-bg{
  filter:brightness(.38) saturate(.6) contrast(1.1);
}
.ps-page .ps-hero-photo::before{
  background:
    radial-gradient(120% 60% at 0% 100%, rgba(255,201,68,.08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(12,11,10,.45) 0%, rgba(12,11,10,.6) 60%, var(--ps-bg) 100%);
}

/* Hidden detail source — never shown directly, used by JS to clone into modal */
.ps-details-source{ display:none; }

/* ===== OUTRO SECTION (proper page ending, replaces thin CTA) ===== */
.ps-outro{
  position:relative;
  margin-top:80px;
  padding:96px 24px 56px;
  border-top:1px solid var(--ps-line);
  background:radial-gradient(1200px 600px at 50% 0%, rgba(224,48,48,.08) 0%, transparent 60%), linear-gradient(180deg, var(--ps-bg) 0%, #07080a 100%);
  overflow:hidden;
}
.ps-outro-glow{
  position:absolute; inset:auto auto 30% 50%;
  width:600px; height:600px;
  transform:translate(-50%,50%);
  background:radial-gradient(circle, rgba(224,48,48,.18) 0%, transparent 65%);
  filter:blur(40px);
  pointer-events:none;
}
.ps-outro-inner{
  position:relative;
  max-width:880px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:40px;
  text-align:center;
}
.ps-outro-head{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.ps-outro-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ps-accent-2);
  font-weight:700;
  margin:0;
  padding:6px 14px;
  background:rgba(224,48,48,.1);
  border:1px solid rgba(224,48,48,.25);
  border-radius:999px;
}
.ps-outro-h{
  font-family:"Archivo Black", Inter, sans-serif;
  font-size:clamp(36px, 5.5vw, 64px);
  line-height:1.02;
  letter-spacing:-.03em;
  margin:0;
  color:#fff;
  background:linear-gradient(180deg, #fff 0%, #c4c8d2 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ps-outro-body{
  font-size:17px;
  line-height:1.65;
  color:var(--ps-fg-mute);
  max-width:580px;
  margin:0;
}
.ps-outro-body strong{ color:#fff; }

.ps-outro-perks{
  list-style:none; padding:0; margin:0;
  display:grid; gap:14px;
  width:100%;
  grid-template-columns:1fr;
}
@media (min-width:760px){
  .ps-outro-perks{ grid-template-columns:repeat(3,1fr); gap:18px; }
}
.ps-outro-perk{
  position:relative;
  padding:24px 22px 22px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  text-align:left;
  display:flex; flex-direction:column; gap:6px;
  transition:border-color .25s ease, transform .25s ease, background .25s ease;
}
.ps-outro-perk:hover{
  border-color:rgba(224,48,48,.35);
  transform:translateY(-2px);
  background:rgba(255,255,255,.04);
}
.ps-outro-perk-num{
  font-family:"Archivo Black", Inter, sans-serif;
  font-size:11px;
  letter-spacing:.16em;
  color:var(--ps-accent-2);
  margin-bottom:8px;
  display:block;
}
.ps-outro-perk strong{
  font-size:15px;
  font-weight:700;
  color:#fff;
  letter-spacing:-.005em;
}
.ps-outro-perk span:not(.ps-outro-perk-num){
  font-size:13.5px;
  line-height:1.55;
  color:var(--ps-fg-mute);
}

.ps-outro-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:linear-gradient(135deg, var(--ps-accent) 0%, var(--ps-accent-2) 100%);
  color:#fff;
  text-decoration:none;
  padding:18px 36px;
  border-radius:999px;
  font-size:16px; font-weight:600;
  letter-spacing:-.005em;
  transition:all .25s var(--ab-easing, cubic-bezier(.4,0,.2,1));
  box-shadow:0 8px 24px rgba(224,48,48,.32), 0 1px 0 rgba(255,255,255,.18) inset;
}
.ps-outro-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(224,48,48,.45), 0 1px 0 rgba(255,255,255,.22) inset;
}
.ps-outro-cta-icon{ flex:0 0 auto; opacity:.92; }
.ps-outro-cta-arrow{ flex:0 0 auto; transition:transform .25s ease; margin-left:2px; }
.ps-outro-cta:hover .ps-outro-cta-arrow{ transform:translateX(4px); }

.ps-outro-or{
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ps-fg-dim);
  margin:8px 0 -8px;
  position:relative;
  padding:0 16px;
}
.ps-outro-or::before,
.ps-outro-or::after{
  content:"";
  position:absolute;
  top:50%;
  width:60px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.ps-outro-or::before{ right:100%; }
.ps-outro-or::after{ left:100%; }

.ps-outro-socials{
  list-style:none; padding:0; margin:0;
  display:grid; gap:10px;
  grid-template-columns:1fr;
  width:100%;
}
@media (min-width:600px){
  .ps-outro-socials{ grid-template-columns:repeat(3,1fr); gap:12px; }
}
.ps-outro-social{
  display:grid;
  grid-template-columns:36px 1fr;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  color:var(--ps-fg-mute);
  text-decoration:none;
  transition:border-color .2s, background .2s, transform .2s;
  min-height:64px;
}
.ps-outro-social:hover{
  border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  transform:translateY(-1px);
  color:#fff;
}
.ps-outro-social-icon{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(224,48,48,.1);
  border:1px solid rgba(224,48,48,.18);
  border-radius:10px;
  color:var(--ps-accent-2);
  flex:0 0 auto;
}
.ps-outro-social span{
  display:flex; flex-direction:column; gap:3px;
  line-height:1.2;
  min-width:0;
  text-align:left;
}
.ps-outro-social strong{
  font-size:13px;
  font-weight:600;
  color:#fff;
  letter-spacing:.02em;
}
.ps-outro-social em{
  font-style:normal;
  font-size:11.5px;
  color:var(--ps-fg-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:block;
}
@media (max-width:600px){
  .ps-outro-social{
    grid-template-columns:40px 1fr;
    padding:14px 14px;
    min-height:60px;
  }
  .ps-outro-social-icon{ width:40px; height:40px; }
  .ps-outro-social em{ font-size:12px; }
}
.ps-outro-colophon{
  position:relative;
  max-width:880px; margin:64px auto 0;
  padding-top:28px;
  border-top:1px solid var(--ps-line);
  display:flex; flex-wrap:wrap; justify-content:center; gap:16px;
  font-size:11px;
  color:var(--ps-fg-dim);
  letter-spacing:.02em;
}
.ps-outro-colophon span:not(:last-child)::after{
  content:"·";
  margin-left:16px;
  color:var(--ps-fg-dim);
}
.ps-outro-colophon a,
.ps-outro-colophon a:visited{
  color:var(--ps-fg-mute,#a4a8b3);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:1px;
  transition:color .2s ease, border-color .2s ease;
}
.ps-outro-colophon a:hover,
.ps-outro-colophon a:focus{
  color:#fff;
  border-bottom-color:rgba(255,255,255,.45);
}

/* ===== Animations ===== */
@keyframes psFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to  { opacity:1; transform:translateY(0); }
}

/* ===== Base layer toggle (Map / Satellite) — top-right of map ===== */
.ps-base-toggle{
  display:flex;
  gap:2px;
  padding:3px;
  background:rgba(15,16,22,.92);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  font-family:inherit;
  margin:10px 0 0 10px;
}
.ps-base-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 13px;
  background:transparent;
  color:var(--ps-fg-mute,#a4a8b3);
  border:none;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
  font-family:inherit;
  transition:all .15s ease;
  -webkit-tap-highlight-color:transparent;
  min-height:32px;
}
.ps-base-btn:hover{ color:#fff; }
.ps-base-btn.is-active{
  background:linear-gradient(135deg, var(--accent,#E03030) 0%, var(--accent-2,#FF4A4A) 100%);
  color:#fff;
  box-shadow:0 1px 4px var(--accent-glow,rgba(224,48,48,.4));
}
.ps-base-btn svg{ flex:0 0 auto; }

/* Hide zoom control on mobile — toggle takes priority, pinch-zoom is native */
@media (max-width:600px){
  .ps-base-toggle{ margin:8px 0 0 8px; padding:2px; }
  .ps-base-btn{ padding:8px 12px; font-size:10px; min-height:36px; }
  .ps-base-btn span{ display:none; }      /* icon-only on tiny screens */
  .ps-base-btn svg{ width:14px; height:14px; }
  .ps-base-btn{ padding:8px 10px; }
}
@media (min-width:601px) and (max-width:900px){
  .ps-base-btn{ padding:6px 11px; min-height:34px; }
}

/* ===== About page ===== */
.va-about{
  max-width:760px;
  margin:0 auto;
  padding:80px 24px 80px;
  color:#e6e7ea;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.6;
}
.va-about-head{ margin-bottom:48px; }
.va-about-eyebrow{
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ps-fg-mute,#a4a8b3);
  margin:0 0 12px;
}
.va-about-h{
  font-size:clamp(34px,4vw,52px);
  font-weight:700;
  letter-spacing:-.02em;
  margin:0 0 8px;
  color:#fff;
}
.va-about-sub{
  font-size:17px;
  color:var(--ps-fg-mute,#a4a8b3);
  margin:0;
}
.va-about-section{ margin:40px 0; }
.va-about-section h2{
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent,#E03030);
  margin:0 0 16px;
}
.va-about-section p{ margin:0 0 14px; color:#d4d6dc; font-size:16px; }
.va-about-section strong{ color:#fff; }
.va-about-list{
  list-style:none;
  padding:0;
  margin:0;
}
.va-about-list li{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:15px;
  color:#d4d6dc;
}
.va-about-list li:last-child{ border-bottom:none; }
.va-about-list li strong{
  display:block;
  margin-bottom:4px;
  font-size:14px;
  letter-spacing:.04em;
  color:#fff;
  text-transform:uppercase;
}
.va-about-list a{
  color:var(--accent,#E03030);
  text-decoration:none;
  border-bottom:1px solid rgba(224,48,48,.3);
  transition:border-color .2s;
}
.va-about-list a:hover{ border-bottom-color:var(--accent,#E03030); }
.va-about-cta{
  display:inline-block;
  padding:13px 24px;
  background:linear-gradient(135deg,var(--accent,#E03030) 0%,var(--accent-2,#FF4A4A) 100%);
  color:#fff;
  text-decoration:none;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.04em;
  margin-top:8px;
  box-shadow:0 4px 14px var(--accent-glow,rgba(224,48,48,.4));
  transition:transform .15s,box-shadow .15s;
}
.va-about-cta:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px var(--accent-glow,rgba(224,48,48,.5));
}
.va-about-extlink{
  color:#fff;
  text-decoration:none;
  border-bottom:2px solid var(--accent,#E03030);
  padding-bottom:1px;
  transition:opacity .2s;
}
.va-about-extlink:hover{ opacity:.85; }
.va-about-back{
  margin-top:60px;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:13px;
}
.va-about-back a{
  color:var(--ps-fg-mute,#a4a8b3);
  text-decoration:none;
  transition:color .2s;
}
.va-about-back a:hover{ color:#fff; }

@media (max-width:600px){
  .va-about{ padding:48px 18px 60px; }
  .va-about-section{ margin:32px 0; }
  .va-about-h{ font-size:34px; }
}

body.is-about{
  background:var(--ps-bg,#04060c);
  min-height:100vh;
}