/* ---------- Modal ---------- */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.5);
    display: none;
    align-items: center; justify-content: center;
    z-index: 100; padding: 24px;
    animation: fadein .15s ease;
  }
  /* Address autosuggest dropdown (Nominatim-backed) */
  .addr-suggest-dropdown {
    position: fixed;
    z-index: 10000;
    background: white;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15,23,42,0.18);
    max-height: 280px;
    overflow-y: auto;
    display: none;
    font-family: inherit;
  }
  .addr-suggest-item {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.35;
    border-bottom: 1px solid var(--border);
  }
  .addr-suggest-item:last-child { border-bottom: none; }
  .addr-suggest-item:hover,
  .addr-suggest-item.active { background: rgba(255,107,87,0.10); }
  .addr-suggest-primary { color: var(--text); }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
  .modal-overlay.open { display: flex; }
  .modal {
    background: white; border-radius: 16px;
    width: 100%; max-width: 580px;
    max-height: 90vh; overflow-y: auto;
    padding: 28px;
    box-shadow: var(--shadow-lg);
  }
  .modal h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -0.01em; }
  .modal p.subtitle { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

  /* ---------- Add-a-place modal reskin (navy / coral / cream) ----------
     Scoped to #actModalOverlay so every OTHER pop-up keeps its current look.
     This form is shared by the personal map AND Guide Studio — the reskin is
     look-only; no field name, id, or behaviour changes. */
  #actModalOverlay { background: rgba(8,12,28,0.55); }
  #actModalOverlay > .modal {
    max-width: 600px; padding: 0; border-radius: 20px;
    background: #fff; box-shadow: 0 30px 70px rgba(8,12,28,0.30);
  }
  #actModalOverlay > .modal > h2 {
    margin: 0; padding: 24px 30px 0;
    font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: #0F1B3D;
  }
  #actModalOverlay > .modal > p.subtitle {
    margin: 6px 0 0; padding: 0 30px 18px;
    border-bottom: 1px solid rgba(15,27,61,0.09);
    font-size: 14px; color: #6b7280;
  }
  #actModalOverlay > .modal > form { padding: 6px 30px 4px; }

  /* numbered section divider */
  .act-sec { display: flex; align-items: center; gap: 10px; margin: 24px 0 14px; }
  .act-sec-n {
    width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0;
    background: #0F1B3D; color: #fff; font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .act-sec-l {
    font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: #0F1B3D; white-space: nowrap;
  }
  .act-sec-line { flex: 1; height: 1px; background: rgba(15,27,61,0.10); }

  /* inputs: white with a coral focus ring (were teal + sandstone) */
  #actModalOverlay .field label { color: #0F1B3D; }
  #actModalOverlay .field input,
  #actModalOverlay .field select,
  #actModalOverlay .field textarea {
    background: #fff; border: 1px solid rgba(15,27,61,0.14); border-radius: 12px;
    padding: 12px 13px; font-size: 14.5px; color: #0F1B3D;
  }
  #actModalOverlay .field input:focus,
  #actModalOverlay .field select:focus,
  #actModalOverlay .field textarea:focus {
    border-color: #FF6B57; background: #fff;
    box-shadow: 0 0 0 3px rgba(255,107,87,0.16);
  }
  #actModalOverlay .field input::placeholder,
  #actModalOverlay .field textarea::placeholder { color: #9aa1ad; }

  /* price toggle, image drop-zone + primary action → coral accents */
  #actModalOverlay .price-toggle { border-color: rgba(15,27,61,0.14); border-radius: 12px; }
  #actModalOverlay .price-toggle button.active { background: #FF6B57; color: #fff; }
  #actModalOverlay .image-uploader { border-radius: 12px; }
  #actModalOverlay .image-uploader-empty strong { color: #FF6B57; }
  #actModalOverlay .image-uploader-empty:hover svg { color: #FF6B57; }

  #actModalOverlay .modal-actions {
    margin: 8px -30px 0; padding: 16px 30px;
    border-top: 1px solid rgba(15,27,61,0.09);
    position: sticky; bottom: 0; background: #fff;
  }
  #actModalOverlay .modal-actions .btn { border-radius: 999px; padding: 11px 20px; }
  #actModalOverlay .btn.primary { background: #FF6B57; border-color: #FF6B57; box-shadow: 0 8px 20px rgba(255,107,87,0.30); }
  #actModalOverlay .btn.primary:hover { background: #f0563f; border-color: #f0563f; }

  /* Detail modal — wider, two-column with independently-scrolling right column.
     Modal is a fixed 90vh flex container; the grid fills it so the right column
     has a real height to overflow-scroll inside. */
  .detail-overlay .modal {
    max-width: 880px;
    height: 90vh;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    display: flex;
  }
  .detail-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 1fr;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .detail-image {
    background-size: cover; background-position: center;
    background-color: var(--bg-soft);
    min-height: 0;
  }
  .detail-content {
    padding: 24px 26px;
    display: flex; flex-direction: column;
    overflow-y: auto;
    /* min-height:0 is required for a grid/flex item to actually overflow-scroll */
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }
  @media (max-width: 760px) {
    .detail-overlay .modal { height: 90vh; max-height: 90vh; }
    .detail-grid {
      grid-template-columns: 1fr;
      grid-template-rows: 200px 1fr;
      height: 100%;
    }
    .detail-image { min-height: 0; aspect-ratio: auto; }
    .detail-content { overflow-y: auto; }
  }
  .detail-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 4px;
  }
  .detail-title { font-size: 22px; margin: 0; letter-spacing: -0.01em; }
  .detail-short { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
  .detail-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    padding: 14px 0; border-top: 1px solid var(--border);
  }
  .detail-meta-item .label {
    font-size: 11px; color: var(--muted); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .detail-meta-item .value {
    font-size: 14px; font-weight: 700; margin-top: 4px;
    display: inline-flex; align-items: center; gap: 6px;
  }
  .detail-meta-item .value svg { width: 14px; height: 14px; color: var(--muted); }
  .detail-section { padding: 14px 0; border-top: 1px solid var(--border); }
  .detail-section h4 { margin: 0 0 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
  .detail-section p { margin: 0; font-size: 14px; line-height: 1.55; }
  .detail-mini-map {
    height: 160px; border-radius: 10px; overflow: hidden;
    margin-top: 8px; border: 1px solid var(--border); background: var(--bg-soft);
  }
  .detail-actions {
    display: flex; gap: 8px; margin-top: auto; padding-top: 14px;
  }
  .save-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--brand); background: var(--brand);
    color: white; padding: 9px 16px;
    border-radius: 999px; font-size: 13px; font-weight: 700;
  }
  .save-toggle.is-saved {
    background: white; color: var(--brand);
  }
  .save-toggle svg { width: 14px; height: 14px; }

  .field { margin-bottom: 14px; }
  .field label {
    display: block; font-size: 11px; font-weight: 700;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 6px;
  }
  .field label .req { color: var(--danger); }
  .field input, .field select, .field textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 10px;
    padding: 10px 12px; font-size: 14px; background: var(--bg-soft);
    outline: none; transition: border-color .15s, background .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--brand); background: white;
  }
  .field textarea { min-height: 110px; resize: vertical; }
  .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

  .price-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
  .price-toggle {
    display: flex; gap: 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  }
  .price-toggle button {
    background: var(--bg-soft); border: none; padding: 10px 14px;
    font-size: 13px; font-weight: 600; color: var(--muted);
  }
  .price-toggle button.active { background: var(--brand); color: white; }

  .modal-actions {
    display: flex; gap: 8px; margin-top: 20px;
    justify-content: space-between; align-items: center;
  }
  .modal-actions .btn { padding: 10px 18px; }

  .btn {
    border: 1px solid var(--border); background: #fff;
    padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 14px;
    transition: all .15s ease;
  }
  .btn:hover { background: var(--bg-soft); }
  .btn.primary { background: var(--cta); color: white; border-color: var(--cta); }
  .btn.primary:hover { background: var(--cta-dark); border-color: var(--cta-dark); }
  .btn.danger { color: var(--danger); border-color: #fecaca; }
  .btn.danger:hover { background: #fef2f2; }

  /* Guide checklist (shared by the "Also add to" field + the update/delete pick dialogs) */
  .gpick-list { display: flex; flex-direction: column; gap: 2px; }
  .gpick-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
    font-size: 14px; font-weight: 500; cursor: pointer; background: #fff;
    transition: background .12s ease, border-color .12s ease;
  }
  .gpick-opt:hover { background: var(--bg-soft); }
  .gpick-opt input { width: 17px; height: 17px; accent-color: var(--cta); cursor: pointer; }
  .gpick-cur { font-weight: 600; color: var(--muted-2); text-transform: none; letter-spacing: 0; }

  .sub-lbl {
    display: block; font-size: 11px; color: var(--muted-2);
    font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 4px;
  }

  /* Party steppers in detail modal */
  .party-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 10px; margin-bottom: 12px;
  }
  .party-stepper {
    background: var(--bg-soft);
    border-radius: 10px; padding: 10px 6px 10px;
    text-align: center;
  }
  .party-label {
    font-size: 10px; color: var(--muted);
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 8px;
  }
  .stepper {
    display: inline-flex; align-items: center; gap: 8px;
  }
  .stepper button {
    width: 28px; height: 28px; border-radius: 50%;
    background: white; border: 1px solid var(--border);
    font-size: 16px; font-weight: 700; line-height: 1;
    color: var(--text);
  }
  .stepper button:hover:not(:disabled) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
  .stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
  .stepper span { font-weight: 700; font-size: 16px; min-width: 18px; }
  .party-line-total {
    font-size: 11px; color: var(--muted-2); margin-top: 6px; min-height: 14px;
  }
  .party-total {
    background: var(--brand-soft); color: var(--brand);
    padding: 10px 14px; border-radius: 10px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 600;
  }
  .party-total strong { font-size: 16px; }

  .helper { font-size: 12px; color: var(--muted); margin-top: 6px; }
  .helper a { color: var(--brand); }
  .img-preview {
    width: 100%; aspect-ratio: 16/9; background: var(--bg-soft);
    border-radius: 10px; margin-top: 8px;
    background-size: cover; background-position: center;
    display: none;
  }
  .img-preview.show { display: block; }

  /* Website URL row with auto-fill button */
  .url-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .url-row .btn { white-space: nowrap; }
  .url-row .btn:disabled { opacity: 0.6; cursor: progress; }

  /* Image uploader */
  .image-uploader {
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    background: var(--bg-soft);
    overflow: hidden;
    transition: border-color .15s ease, background .15s ease;
  }
  .image-uploader.drag-over {
    border-color: var(--brand);
    background: var(--brand-soft);
  }
  .image-uploader-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--muted);
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font-size: 13px;
  }
  .image-uploader-empty:hover { color: var(--text); }
  .image-uploader-empty svg { width: 32px; height: 32px; color: var(--muted-2); }
  .image-uploader-empty:hover svg { color: var(--brand); }
  .image-uploader-empty strong { color: var(--brand); font-weight: 600; }
  .image-uploader-empty small { font-size: 11px; color: var(--muted-2); }
  .image-uploader-preview { position: relative; background: white; }
  .image-uploader-preview img {
    width: 100%; max-height: 240px;
    object-fit: cover; display: block;
  }
  .image-uploader-actions {
    display: flex; gap: 8px; padding: 10px;
    background: white; border-top: 1px solid var(--border);
  }
  .image-uploader-actions .btn {
    flex: 1; padding: 8px 12px; font-size: 13px;
  }

  .loc-display {
    margin-top: 6px; font-size: 12px; color: var(--muted);
    background: var(--brand-soft); border-radius: 8px;
    padding: 6px 10px; display: none;
  }
  .loc-display.show { display: block; }
  .loc-display strong { color: var(--brand); }

  .picker-list { display: flex; flex-direction: column; gap: 4px; max-height: 380px; overflow-y: auto; }
  .picker-item {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 10px; border: 1px solid var(--border);
    border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s;
    background: white;
  }
  .picker-item:hover { background: var(--bg-soft); border-color: var(--border-strong); }
  .picker-item.assigned { opacity: .55; }
  .picker-item img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
  .picker-item .info { flex: 1; min-width: 0; }
  .picker-item .info .t { font-weight: 600; font-size: 14px; }
  .picker-item .info .c { font-size: 12px; color: var(--muted); }
  .picker-item .price { font-weight: 700; font-size: 13px; }

  .toast {
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--text); color: white;
    padding: 10px 16px; border-radius: 10px;
    font-size: 13px; font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    z-index: 200;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

  /* ============================================================
     Mobile (Airbnb-style): slim top trip picker + bottom tab bar
     ============================================================ */
  .mobile-tabbar { display: none; }

  @media (max-width: 760px) {
    /* App becomes top-bar + content (bottom tab bar is fixed) */
    .app {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      height: 100dvh;
    }
    /* Sidebar collapses to a slim header with only the trip picker */
    .sidebar {
      max-height: none !important;
      padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px !important;
      border-right: none !important;
      border-bottom: 1px solid var(--border);
      background: #fff;
      overflow: visible !important;
    }
    /* Make sure the trip dropdown floats above the bottom tab bar */
    .trip-dropdown { z-index: 110; }
    .sidebar .brand,
    .sidebar .section-nav-top,
    .sidebar .section-toggle,
    .sidebar .section-nav,
    .sidebar .sidebar-footer { display: none !important; }
    .trip-picker { margin: 0; }
    .trip-picker-btn { padding: 8px 10px; }

    /* Main reserves space so the bottom tab bar doesn't cover content */
    .main { padding: 16px 16px calc(80px + env(safe-area-inset-bottom)); }
    .main.guide-full { padding: 0 0 calc(72px + env(safe-area-inset-bottom)); }

    /* Bottom tab bar */
    .mobile-tabbar {
      display: flex;
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #fff;
      border-top: 1px solid var(--border);
      padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
      box-shadow: 0 -2px 12px rgba(15,23,42,0.04);
      z-index: 100;
    }
    .mobile-tabbar button {
      flex: 1;
      display: flex; flex-direction: column; align-items: center; gap: 3px;
      background: transparent; border: none;
      padding: 4px 6px;
      color: var(--muted);
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.01em;
    }
    .mobile-tabbar button svg { width: 24px; height: 24px; }
    .mobile-tabbar button.active { color: var(--brand); }
    .mobile-tabbar button.active svg { stroke-width: 2.4; }
    /* Center "Start a Trip" FAB */
    .mobile-tabbar .mt-fab { justify-content: flex-start; }
    .mobile-tabbar .mt-fab .mt-fab-circle {
      width: 52px; height: 52px; border-radius: 50%;
      background: var(--cta); color: #fff;
      display: grid; place-items: center;
      margin-top: -20px;
      box-shadow: 0 8px 20px rgba(255,107,87,0.42);
      transition: background .15s ease, transform .08s ease;
    }
    .mobile-tabbar .mt-fab:active .mt-fab-circle { transform: translateY(1px); }
    .mobile-tabbar .mt-fab .mt-fab-circle svg { width: 28px; height: 28px; stroke-width: 2.4; }
    .mobile-tabbar .mt-fab.active { color: var(--muted); }

    /* Map top-overlay must clear the slim header */
    .map-top-overlay { top: 12px; }

    /* Home / Trips / Inbox / Profile: hide the trip-picker header, give the
       content its own safe-area top padding. */
    body.tl-view .sidebar { display: none !important; }
    body.tl-view .main { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  }

  /* ===================== Guide preview pop-up (design app-guide-preview) =====================
     Floats over the store grid. z-index 150 keeps it above the app nav/tabbar but
     below the create-profile / unlock gate (.cp-overlay z-200) it spawns on Unlock. */
  .gpv-overlay { position:fixed; inset:0; z-index:150; background:rgba(8,12,28,.6); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vh,40px); animation:gpvFade .18s ease; }
  @keyframes gpvFade { from { opacity:0; } to { opacity:1; } }
  .gpv-card { width:1040px; max-width:100%; max-height:100%; background:#FAF8F4; border-radius:26px; overflow:hidden; box-shadow:0 40px 100px rgba(8,12,28,.5); display:flex; flex-direction:column; animation:gpvRise .22s cubic-bezier(.2,.8,.2,1); }
  @keyframes gpvRise { from { transform:translateY(16px); opacity:.6; } to { transform:none; opacity:1; } }

  .gpv-hero { position:relative; flex:none; height:280px; background:#0F1B3D center/cover no-repeat; }
  .gpv-hero.noimg { background:linear-gradient(140deg,#1b2a55,#0F1B3D); }
  .gpv-hero-ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,28,.32) 0%,rgba(8,12,28,0) 34%,rgba(8,12,28,.82) 100%); }
  .gpv-stamp { position:absolute; top:18px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.92); color:#0F1B3D; font:800 11px/1 'Hanken Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
  .gpv-stamp-logo { height:15px; width:auto; display:block; }
  .gpv-close { position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; color:#fff; }
  .gpv-close svg { width:18px; height:18px; }
  .gpv-close:hover { background:rgba(255,255,255,.34); }
  .gpv-hero-body { position:absolute; left:clamp(22px,4vw,40px); right:clamp(22px,4vw,40px); bottom:22px; z-index:2; }
  .gpv-place { font:700 12px/1 'Hanken Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.86); }
  .gpv-title { margin:6px 0 0; font:800 clamp(30px,3.4vw,44px)/1.02 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 24px rgba(8,12,28,.4); }
  .gpv-meta { margin-top:10px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; font:600 14px/1 'Hanken Grotesk',sans-serif; color:rgba(255,255,255,.86); }
  .gpv-dot { opacity:.5; }

  .gpv-body { flex:1; min-height:0; overflow-y:auto; padding:clamp(22px,3vw,34px); }
  .gpv-blurb { margin:0; max-width:720px; font:400 16.5px/1.6 'Hanken Grotesk',sans-serif; color:#2B3550; text-wrap:pretty; }
  .gpv-map { position:relative; height:260px; margin-top:22px; border-radius:18px; overflow:hidden; border:1px solid #ECE6DC; background:#CBE2EE; }
  .gpv-map .map-container { position:absolute; inset:0; width:100%; height:100%; }
  .gpv-map .map-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 13px 'Hanken Grotesk',sans-serif; color:#5b647a; }
  .gpv-map-badge { position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.94); color:#0F1B3D; font:700 12.5px/1 'Hanken Grotesk',sans-serif; box-shadow:0 4px 12px rgba(8,12,28,.12); }
  .gpv-map-badge svg { width:14px; height:14px; }

  .gpv-inside-head { margin:26px 0 14px; display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .gpv-inside-head h3 { margin:0; font:800 22px/1 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#0F1B3D; }
  .gpv-inside-head span { font:600 13.5px/1 'Hanken Grotesk',sans-serif; color:#5b647a; }

  .gpv-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
  .gpv-cell { text-align:left; padding:0; border:1px solid #ECE6DC; background:#fff; border-radius:16px; overflow:hidden; cursor:pointer; font-family:'Hanken Grotesk',sans-serif; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  .gpv-cell[data-open-detail]:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(8,12,28,.14); border-color:color-mix(in oklab,#FF6B57 55%,white); }
  /* Highlighted when its map pin is hovered (see initGuidePreviewMap). */
  .gpv-cell--hi { transform:translateY(-3px); box-shadow:0 16px 34px rgba(255,107,87,.26); border-color:#FF6B57; }
  .gpv-cell.locked { cursor:default; }
  .gpv-cell-photo { position:relative; height:128px; background:#eceae4 center/cover no-repeat; }
  .gpv-cell-photo.noimg { background:linear-gradient(135deg,#1b2a55,#0F1B3D); }
  .gpv-cell-num { position:absolute; top:10px; left:10px; z-index:3; min-width:22px; height:22px; padding:0 6px; border-radius:999px; background:#FF6B57; color:#fff; font:800 11px/22px 'Hanken Grotesk',sans-serif; text-align:center; }
  .gpv-cell-free { position:absolute; top:10px; right:10px; z-index:3; padding:4px 9px; border-radius:999px; background:rgba(255,255,255,.94); color:#FF6B57; font:700 10.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:.05em; text-transform:uppercase; }
  /* Locked "Get Access" card: the place photo blurred behind a lock + label. */
  .gpv-cell-photo.locked { background:#e4e0d7; }
  .gpv-cell-blur { position:absolute; inset:-12px; background:#e4e0d7 center/cover no-repeat; filter:blur(9px) brightness(.92) saturate(.95); }
  .gpv-cell-photo.locked.noimg { background:linear-gradient(135deg,#2a3a63,#0F1B3D); }
  .gpv-cell-lockov { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; background:rgba(15,27,61,.34); }
  .gpv-lock-ic { width:38px; height:38px; border-radius:999px; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:#0F1B3D; }
  .gpv-lock-ic svg { width:18px; height:18px; }
  .gpv-getaccess { padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.94); color:#0F1B3D; font:700 11.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:.02em; transition:background .15s ease, color .15s ease; }
  .gpv-cell.locked:hover .gpv-getaccess { background:#FF6B57; color:#fff; }
  .gpv-cell-body { padding:11px 13px 13px; }
  .gpv-cell-name { font:700 14.5px/1.2 'Hanken Grotesk',sans-serif; letter-spacing:-.015em; color:#0F1B3D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .gpv-cell-name.muted { color:#8a92a3; }
  .gpv-cell-cat { margin-top:3px; font:400 12.5px/1 'Hanken Grotesk',sans-serif; color:#5b647a; }
  /* Legacy "+N more" card (guides published before the map-teaser existed). */
  .gpv-cell--more { display:flex; align-items:center; justify-content:center; min-height:180px; background:#faf8f4; border-style:dashed; }
  .gpv-more-in { text-align:center; font:800 16px/1.2 'Hanken Grotesk',sans-serif; color:#0F1B3D; }
  .gpv-more-in span { display:block; margin-top:4px; font:600 12px/1 'Hanken Grotesk',sans-serif; color:#5b647a; }

  .gpv-foot { flex:none; border-top:1px solid #ECE6DC; background:#fff; padding:16px clamp(22px,3vw,34px); display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .gpv-price-wrap { display:flex; align-items:baseline; gap:10px; }
  .gpv-price { font:800 30px/1 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#0F1B3D; }
  .gpv-price-sub { font:600 13.5px/1 'Hanken Grotesk',sans-serif; color:#5b647a; }
  .gpv-unlock { display:inline-flex; align-items:center; gap:9px; height:54px; padding:0 30px; border:none; border-radius:15px; cursor:pointer; background:#FF6B57; color:#fff; font:700 16px/1 'Hanken Grotesk',sans-serif; box-shadow:0 10px 24px color-mix(in oklab,#FF6B57 30%,transparent); }
  .gpv-unlock svg { width:18px; height:18px; }
  .gpv-unlock:hover { background:#f0563f; }
  .gpv-owned { display:inline-flex; align-items:center; gap:8px; height:54px; padding:0 26px; border-radius:15px; background:#efe9dd; color:#0F1B3D; font:700 16px/1 'Hanken Grotesk',sans-serif; }
  .gpv-owned svg { width:19px; height:19px; color:#FF6B57; }

  @media (max-width:720px) {
    .gpv-card { border-radius:20px; }
    .gpv-hero { height:220px; }
    .gpv-title { font-size:27px; }
    .gpv-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
    .gpv-foot { padding:14px 18px; }
    .gpv-unlock, .gpv-owned { height:50px; }
  }

  /* Single free-place preview — floats above the guide preview (openGuidePreviewActivity). */
  .gav-overlay { position:fixed; inset:0; z-index:200; background:rgba(8,12,28,.66); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vh,40px); animation:gpvFade .18s ease; }
  .gav-card { width:660px; max-width:100%; max-height:100%; background:#FAF8F4; border-radius:24px; overflow:hidden; box-shadow:0 40px 100px rgba(8,12,28,.5); display:flex; flex-direction:column; animation:gpvRise .22s cubic-bezier(.2,.8,.2,1); }
  .gav-hero { position:relative; flex:none; height:240px; background:#0F1B3D center/cover no-repeat; }
  .gav-hero.noimg { background:linear-gradient(140deg,#1b2a55,#0F1B3D); }
  .gav-hero-ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,28,.24) 0%,rgba(8,12,28,0) 38%,rgba(8,12,28,.84) 100%); }
  .gav-stamp { position:absolute; top:16px; left:16px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.94); color:#FF6B57; font:800 10.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:.06em; text-transform:uppercase; }
  .gav-close { position:absolute; top:16px; right:16px; z-index:2; width:40px; height:40px; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; color:#fff; }
  .gav-close svg { width:18px; height:18px; }
  .gav-close:hover { background:rgba(255,255,255,.34); }
  .gav-hero-body { position:absolute; left:clamp(20px,4vw,30px); right:clamp(20px,4vw,30px); bottom:20px; z-index:2; }
  .gav-cat { display:inline-flex; align-items:center; gap:6px; font:700 12px/1 'Hanken Grotesk',sans-serif; letter-spacing:.04em; text-transform:uppercase; color:rgba(255,255,255,.9); }
  .gav-cat svg { width:15px; height:15px; }
  .gav-title { margin:8px 0 0; font:800 clamp(24px,3vw,33px)/1.04 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 22px rgba(8,12,28,.4); }
  .gav-body { flex:1; min-height:0; overflow-y:auto; padding:22px clamp(20px,3vw,30px) 28px; }
  .gav-priceline { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  .gav-price { font:800 22px/1 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#0F1B3D; }
  .gav-price.free { color:#0f7a52; }
  .gav-price-suf { margin-left:5px; font:600 13px/1 'Hanken Grotesk',sans-serif; color:#5b647a; }
  .gav-short { margin:0 0 12px; font:600 16px/1.5 'Hanken Grotesk',sans-serif; color:#2B3550; text-wrap:pretty; }
  .gav-long { margin:0; font:400 15px/1.65 'Hanken Grotesk',sans-serif; color:#3a4560; white-space:pre-line; text-wrap:pretty; }
  .gav-long.muted { color:#8a92a3; }
  .gav-visit { display:inline-flex; align-items:center; gap:8px; margin-top:18px; height:44px; padding:0 20px; border-radius:12px; background:#0F1B3D; color:#fff; font:700 14px/1 'Hanken Grotesk',sans-serif; text-decoration:none; }
  .gav-visit svg { width:15px; height:15px; }
  .gav-visit:hover { background:#1b2a55; }
  .gav-map { position:relative; height:220px; margin-top:20px; border-radius:16px; overflow:hidden; border:1px solid #ECE6DC; background:#CBE2EE; }
  .gav-map .map-container { position:absolute; inset:0; width:100%; height:100%; }
  @media (max-width:720px) {
    .gav-card { border-radius:20px; }
    .gav-hero { height:200px; }
    .gav-title { font-size:25px; }
  }

  /* In-app place detail — matches the design (app/app-explore.jsx WhPlacePreview). */
  .pdv-overlay { position:fixed; inset:0; z-index:130; background:rgba(8,12,28,.44); display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vh,24px); animation:gpvFade .18s ease; }
  /* Store activity preview floats above the guide preview (gpv z-150). */
  .pdv-overlay.pdv-top { z-index:200; }
  .pdv-card { position:relative; width:460px; max-width:100%; max-height:100%; background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 36px 90px rgba(8,12,28,.4); display:flex; flex-direction:column; animation:gpvRise .22s cubic-bezier(.2,.8,.2,1); }
  .pdv-media { position:relative; flex:none; height:260px; background:#0F1B3D center/cover no-repeat; }
  .pdv-media.noimg { background:linear-gradient(140deg,#1b2a55,#0F1B3D); }
  .pdv-media-ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,28,.24) 0%,rgba(8,12,28,0) 40%,rgba(8,12,28,.5) 100%); }
  .pdv-tag { position:absolute; top:14px; left:14px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font:700 10.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:.05em; text-transform:uppercase; }
  .pdv-tag.mine { background:rgba(255,255,255,.94); color:#FF6B57; }
  .pdv-tag.approved { background:rgba(255,255,255,.94); color:#FF6B57; }
  .pdv-tag-logo { height:13px; width:auto; display:block; }
  .pdv-close { position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.22); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.32); display:flex; align-items:center; justify-content:center; color:#fff; }
  .pdv-close svg { width:17px; height:17px; }
  .pdv-close:hover { background:rgba(255,255,255,.34); }
  .pdv-body { flex:1; min-height:0; overflow-y:auto; padding:20px 24px 24px; }
  .pdv-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
  .pdv-head-l { min-width:0; }
  .pdv-cat { display:inline-flex; align-items:center; gap:7px; margin-bottom:8px; padding:5px 11px; border-radius:999px; background:#F4F1EA; font:700 11.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:.03em; color:#5b647a; }
  .pdv-cat svg { width:14px; height:14px; color:#FF6B57; }
  .pdv-title { margin:0; font:800 27px/1.06 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#0F1B3D; }
  .pdv-meta { margin-top:6px; display:flex; align-items:center; gap:7px; font:400 14px/1.4 'Hanken Grotesk',sans-serif; color:#5b647a; }
  .pdv-meta svg { width:15px; height:15px; flex:none; color:#5b647a; }
  .pdv-tier { flex:none; padding:8px 14px; border-radius:12px; background:#0F1B3D; color:#fff; font:800 15px/1 'Hanken Grotesk',sans-serif; white-space:nowrap; }
  .pdv-tier.free { background:color-mix(in oklab,#FF6B57 10%,white); color:#FF6B57; }
  .pdv-sec { margin-top:18px; }
  .pdv-sec h3 { margin:0 0 8px; font:800 17px/1.2 'Hanken Grotesk',sans-serif; letter-spacing:-.01em; color:#0F1B3D; }
  .pdv-about { margin:0; font:400 14.5px/1.62 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; white-space:pre-line; }
  .pdv-web { margin-top:16px; display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:13px; background:#F4F1EA; text-decoration:none; }
  .pdv-web svg { width:17px; height:17px; flex:none; }
  .pdv-web-ic { color:#FF6B57; }
  .pdv-web-t { flex:1; min-width:0; font:700 14px/1 'Hanken Grotesk',sans-serif; color:#0F1B3D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .pdv-web-arrow { color:#5b647a; }
  .pdv-says { margin-top:18px; padding:16px 18px; border-radius:16px; background:color-mix(in oklab,#FF6B57 7%,white); border:1px solid color-mix(in oklab,#FF6B57 20%,white); }
  .pdv-says-head { display:flex; align-items:center; gap:8px; margin-bottom:9px; font:700 11px/1 'Hanken Grotesk',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#FF6B57; }
  .pdv-says-logo { height:13px; width:auto; display:block; }
  .pdv-says-body { margin:0; font:400 italic 16.5px/1.5 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; }
  .pdv-tips { display:flex; flex-direction:column; gap:9px; }
  .pdv-tip { display:flex; gap:10px; align-items:flex-start; }
  .pdv-tip svg { width:16px; height:16px; flex:none; margin-top:1px; color:#FF6B57; }
  .pdv-tip span { font:400 14px/1.5 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; }
  .pdv-actions { margin-top:22px; display:flex; flex-direction:column; gap:11px; }
  .pdv-add { height:52px; border-radius:14px; cursor:pointer; border:none; background:#FF6B57; color:#fff; display:flex; align-items:center; justify-content:center; gap:8px; font:700 15.5px/1 'Hanken Grotesk',sans-serif; box-shadow:0 10px 24px color-mix(in oklab,#FF6B57 30%,transparent); }
  .pdv-add svg { width:18px; height:18px; }
  .pdv-add:hover { background:#f4553f; }
  .pdv-add.on { background:#0F1B3D; box-shadow:none; }
  .pdv-add.on:hover { background:#1b2a55; }
  .pdv-edit { height:46px; border-radius:13px; cursor:pointer; background:transparent; border:none; display:flex; align-items:center; justify-content:center; gap:8px; font:700 14px/1 'Hanken Grotesk',sans-serif; color:color-mix(in oklab,#0F1B3D 55%,white); }
  .pdv-edit:hover { color:#0F1B3D; }
  @media (max-width:720px) {
    .pdv-card { border-radius:20px; }
    .pdv-media { height:210px; }
    .pdv-title { font-size:24px; }
  }

  /* ---- wpp-*: the two-column store activity preview (design WhPlacePreview).
     Photo on the left, scrollable details on the right. Floats above the guide
     preview (z 200 > gpv 150). Kept separate from .pdv-* (used by openDetail). */
  .wpp-overlay { position:fixed; inset:0; z-index:200; background:rgba(8,12,28,.5); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:clamp(12px,3vh,36px); animation:gpvFade .18s ease; }
  .wpp-card { position:relative; width:940px; max-width:100%; height:min(660px,100%); background:#fff; border-radius:26px; overflow:hidden; box-shadow:0 40px 100px rgba(8,12,28,.44); display:flex; animation:gpvRise .22s cubic-bezier(.2,.8,.2,1); }
  .wpp-media { flex:1 1 0; min-width:0; position:relative; background:#0F1B3D center/cover no-repeat; }
  .wpp-media.noimg { background:linear-gradient(140deg,#1b2a55,#0F1B3D); }
  .wpp-stamp { position:absolute; top:16px; left:16px; z-index:2; display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.94); color:#FF6B57; font:700 10.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:.05em; text-transform:uppercase; }
  .wpp-stamp-logo { height:13px; width:auto; display:block; }
  .wpp-close { position:absolute; top:14px; right:14px; z-index:3; width:38px; height:38px; border-radius:999px; cursor:pointer; background:rgba(8,12,28,.42); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.34); display:flex; align-items:center; justify-content:center; color:#fff; }
  .wpp-close svg { width:17px; height:17px; }
  .wpp-close:hover { background:rgba(8,12,28,.56); }
  .wpp-detail { width:430px; flex-shrink:0; display:flex; flex-direction:column; min-height:0; border-left:1px solid rgba(15,27,61,.08); }
  .wpp-scroll { flex:1; min-height:0; overflow-y:auto; padding:26px 28px; }
  .wpp-title { margin:0; font:800 28px/1.08 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#0F1B3D; text-wrap:balance; }
  .wpp-meta { margin-top:10px; display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; }
  .wpp-meta-i { display:inline-flex; align-items:center; gap:7px; font:600 14.5px/1 'Hanken Grotesk',sans-serif; color:#0F1B3D; }
  .wpp-meta-i svg { width:17px; height:17px; flex:none; color:#0F1B3D; }
  .wpp-meta-i.sub { font-weight:400; color:#5b647a; }
  .wpp-meta-i.sub svg { color:#5b647a; }
  .wpp-meta-i.tier svg { color:#5b647a; }
  .wpp-meta-i.tier.free { color:#FF6B57; }
  .wpp-meta-i.tier.free svg { color:#FF6B57; }
  .wpp-rule { height:1px; background:rgba(15,27,61,.08); margin:18px 0; }
  .wpp-quick { display:flex; justify-content:flex-start; gap:26px; }
  .wpp-qa { display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:none; padding:0; cursor:pointer; text-decoration:none; }
  .wpp-qa-ic { width:52px; height:52px; border-radius:999px; border:1.5px solid rgba(15,27,61,.12); background:#fff; display:flex; align-items:center; justify-content:center; transition:border-color .15s ease, background .15s ease; }
  .wpp-qa-ic svg { width:21px; height:21px; color:#0F1B3D; }
  .wpp-qa-l { font:700 12.5px/1 'Hanken Grotesk',sans-serif; color:#0F1B3D; white-space:nowrap; }
  .wpp-qa:hover .wpp-qa-ic { border-color:rgba(15,27,61,.28); }
  .wpp-qa.on .wpp-qa-ic { border-color:#FF6B57; background:color-mix(in oklab,#FF6B57 10%,white); }
  .wpp-qa.on .wpp-qa-ic svg { color:#FF6B57; }
  .wpp-cta { width:100%; height:54px; margin-top:20px; border-radius:15px; cursor:pointer; border:none; background:#FF6B57; color:#fff; display:flex; align-items:center; justify-content:center; gap:9px; font:700 16px/1 'Hanken Grotesk',sans-serif; box-shadow:0 10px 24px color-mix(in oklab,#FF6B57 30%,transparent); }
  .wpp-cta svg { width:18px; height:18px; }
  .wpp-cta:hover { background:#f4553f; }
  .wpp-note { margin-top:12px; display:flex; gap:9px; padding:12px 14px; border-radius:13px; background:#F4F1EA; }
  .wpp-note svg { width:16px; height:16px; flex:none; margin-top:1px; color:#FF6B57; }
  .wpp-note span { font:400 13.5px/1.5 'Hanken Grotesk',sans-serif; color:#5b647a; text-wrap:pretty; }
  .wpp-by { display:flex; align-items:center; gap:11px; }
  .wpp-by-av { width:40px; height:40px; flex-shrink:0; border-radius:999px; background:#0F1B3D; display:flex; align-items:center; justify-content:center; }
  .wpp-by-av img { height:14px; width:auto; display:block; }
  .wpp-by-t { min-width:0; }
  .wpp-by-t strong { display:block; font:700 14.5px/1.2 'Hanken Grotesk',sans-serif; color:#0F1B3D; }
  .wpp-by-t em { display:block; font:400 13px/1.3 'Hanken Grotesk',sans-serif; font-style:normal; color:#5b647a; }
  .wpp-desc { margin:14px 0 0; font:400 14.5px/1.62 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .wpp-desc.open { display:block; -webkit-line-clamp:none; overflow:visible; }
  .wpp-more { margin-top:6px; padding:0; border:none; background:none; cursor:pointer; font:700 14px/1 'Hanken Grotesk',sans-serif; color:#FF6B57; }
  .wpp-says { margin-top:18px; padding:16px 18px; border-radius:16px; background:color-mix(in oklab,#FF6B57 7%,white); }
  .wpp-says-head { margin-bottom:9px; font:700 11px/1 'Hanken Grotesk',sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#FF6B57; }
  .wpp-says-body { margin:0; font:400 italic 16.5px/1.5 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; }
  .wpp-know { margin-top:20px; }
  .wpp-know h3 { margin:0 0 10px; font:800 17px/1.2 'Hanken Grotesk',sans-serif; letter-spacing:-.01em; color:#0F1B3D; }
  .wpp-tips { display:flex; flex-direction:column; gap:9px; }
  .wpp-tip { display:flex; gap:10px; align-items:flex-start; }
  .wpp-tip svg { width:16px; height:16px; flex:none; margin-top:1px; color:#FF6B57; }
  .wpp-tip span { font:400 14px/1.5 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; }
  /* Phones: stack the photo on top of the details, like .pdv-* did. */
  @media (max-width:720px) {
    .wpp-card { flex-direction:column; height:min(760px,100%); border-radius:20px; }
    .wpp-media { flex:none; height:210px; }
    /* Stacked on mobile the detail column must FILL the remaining card height
       (flex:1 1 0) and be allowed to shrink — the base rule sets flex-shrink:0,
       which kept it at full content height inside the height-capped, overflow-
       hidden card, so .wpp-scroll never got a bounded height and the info below
       the fold was clipped with no way to scroll. */
    .wpp-detail { width:auto; flex:1 1 0; border-left:none; border-top:1px solid rgba(15,27,61,.08); min-height:0; }
    .wpp-title { font-size:24px; }
  }

  /* "Read the full story" link inside the Wildhart-says box (place preview). */
  .wpp-story-link { margin-top:12px; display:inline-flex; align-items:center; gap:8px; padding:0; border:none; background:none; cursor:pointer; font:700 14px/1 'Hanken Grotesk',sans-serif; color:#FF6B57; }
  .wpp-story-link svg { width:16px; height:16px; flex:none; }
  .wpp-story-link svg:last-child { width:15px; height:15px; transition:transform .18s ease; }
  .wpp-story-link:hover svg:last-child { transform:translateX(3px); }
  .wpp-story-link span { border-bottom:1.5px solid color-mix(in oklab,#FF6B57 40%,transparent); padding-bottom:1px; }

  /* ===== Story reader (full-window blog article) ==========================
     Ported from the design's WhStoryReader. Fixed full-screen article with a
     hero, byline, an "about this place" card, and the content blocks.          */
  html.wst-lock { overflow:hidden; }
  .wst-overlay { position:fixed; inset:0; z-index:240; background:#FFFDFA; animation:wstPop .32s cubic-bezier(.2,1,.3,1) both; }
  @keyframes wstPop { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  .wst-progress { position:absolute; top:0; left:0; right:0; height:3px; z-index:4; background:transparent; }
  .wst-progress-bar { height:100%; width:0; background:#FF6B57; transition:width .08s linear; }
  .wst-close { position:absolute; top:18px; right:20px; z-index:5; height:42px; padding:0 16px; border-radius:999px; cursor:pointer; background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(15,27,61,.1); box-shadow:0 4px 14px rgba(8,12,28,.14); display:flex; align-items:center; gap:8px; font:700 14px/1 'Hanken Grotesk',sans-serif; color:#0F1B3D; }
  .wst-close svg { width:16px; height:16px; }
  .wst-scroll { position:absolute; inset:0; overflow-y:auto; }
  .wst-col { width:min(680px,100%); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
  .wst-hero { position:relative; height:clamp(300px,46vh,460px); background:#0F1B3D 50%/cover no-repeat; }
  .wst-hero.noimg { background:linear-gradient(135deg,#12203f,#0b1531); }
  .wst-hero-grad { position:absolute; inset:0; background:linear-gradient(180deg,rgba(8,12,28,.4) 0%,rgba(8,12,28,.1) 45%,rgba(8,12,28,.72) 100%); }
  .wst-hero-in { position:absolute; left:0; right:0; bottom:0; padding-bottom:clamp(24px,4vh,40px); }
  .wst-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 13px 6px 10px; border-radius:999px; background:rgba(255,255,255,.16); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.34); font:700 11.5px/1 'Hanken Grotesk',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#fff; }
  .wst-badge svg { width:14px; height:14px; }
  .wst-title { margin:16px 0 0; font:800 clamp(30px,4.4vw,46px)/1.06 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:#fff; text-wrap:balance; }
  .wst-dek { margin:12px 0 0; max-width:560px; font:400 italic clamp(16px,1.6vw,19px)/1.45 'Hanken Grotesk',sans-serif; color:rgba(255,255,255,.88); text-wrap:pretty; }
  .wst-body { padding:clamp(26px,4vh,40px) 0 90px; }
  .wst-byline { display:flex; align-items:center; gap:12px; padding-bottom:22px; border-bottom:1px solid rgba(15,27,61,.1); }
  .wst-av { width:44px; height:44px; flex:none; border-radius:999px; background:#0F1B3D; display:flex; align-items:center; justify-content:center; }
  .wst-av img { width:22px; height:22px; }
  .wst-by-main { flex:1; min-width:0; }
  .wst-by-name { font:700 15px/1.3 'Hanken Grotesk',sans-serif; color:#0F1B3D; }
  .wst-by-role { font:400 13.5px/1.3 'Hanken Grotesk',sans-serif; color:#5b6480; }
  .wst-by-meta { text-align:right; font:400 13px/1.5 'Hanken Grotesk',sans-serif; color:#5b6480; }
  .wst-place { margin-top:22px; display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; border:1px solid rgba(15,27,61,.1); background:#fff; }
  .wst-place-thumb { width:68px; height:54px; flex:none; border-radius:11px; background:#e7dfce 50%/cover no-repeat; }
  .wst-place-main { flex:1; min-width:0; }
  .wst-place-lbl { font:700 11px/1 'Hanken Grotesk',sans-serif; letter-spacing:.1em; text-transform:uppercase; color:#FF6B57; }
  .wst-place-name { margin-top:3px; font:700 15px/1.3 'Hanken Grotesk',sans-serif; color:#0F1B3D; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .wst-place-back { flex:none; height:40px; padding:0 16px; border-radius:11px; cursor:pointer; border:1.5px solid rgba(15,27,61,.12); background:#fff; font:700 14px/1 'Hanken Grotesk',sans-serif; color:#0F1B3D; }
  .wst-p { margin:20px 0 0; font:400 clamp(16px,1.5vw,17.5px)/1.7 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; }
  .wst-h { margin:34px 0 0; font:800 clamp(21px,2.2vw,25px)/1.15 'Hanken Grotesk',sans-serif; letter-spacing:-.01em; color:#0F1B3D; }
  .wst-q { margin:30px 0 0; padding:4px 0 4px 22px; border-left:2px solid #FF6B57; }
  .wst-q p { margin:0; font:400 italic clamp(19px,2.1vw,23px)/1.45 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; }
  .wst-list { margin:20px 0 0; display:flex; flex-direction:column; gap:11px; }
  .wst-li { display:flex; gap:11px; align-items:flex-start; }
  .wst-li .wst-dot { margin-top:7px; width:6px; height:6px; flex:none; border-radius:999px; background:#FF6B57; }
  .wst-li span:last-child { font:400 clamp(15.5px,1.4vw,16.5px)/1.6 'Hanken Grotesk',sans-serif; color:#0F1B3D; text-wrap:pretty; }
  .wst-fig { margin:30px 0 0; }
  .wst-fig-img { width:100%; height:clamp(220px,34vh,340px); border-radius:18px; background:#e7dfce 50%/cover no-repeat; }
  .wst-fig figcaption { margin-top:9px; font:400 13.5px/1.5 'Hanken Grotesk',sans-serif; color:#5b6480; text-wrap:pretty; }
  .wst-foot { margin-top:40px; padding-top:24px; border-top:1px solid rgba(15,27,61,.1); display:flex; align-items:center; gap:11px; }
  .wst-foot-mark { width:38px; height:38px; flex:none; border-radius:999px; background:#0F1B3D; display:flex; align-items:center; justify-content:center; }
  .wst-foot-mark img { width:18px; height:18px; }
  .wst-foot span:last-child { font:400 13.5px/1.5 'Hanken Grotesk',sans-serif; color:#5b6480; text-wrap:pretty; }

  /* ===== Story section inside the place editor ===========================  */
  .act-story-write { width:100%; justify-content:center; }
  .act-story-has { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); }
  .act-story-has-main { flex:1; min-width:0; }
  .act-story-has-title { font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .act-story-has-meta { margin-top:2px; font-size:13px; color:var(--muted); }
  .act-story-has-actions { display:flex; gap:8px; flex:none; }

  /* ===== Story editor (author full-window block editor) ==================  */
  .wse-overlay { position:fixed; inset:0; z-index:260; background:var(--bg); display:flex; flex-direction:column; animation:wstPop .26s cubic-bezier(.2,1,.3,1) both; }
  .wse-bar { flex:none; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(16px,3vw,28px); background:var(--surface); border-bottom:1px solid var(--border); }
  .wse-bar-title { font:800 17px/1 'Hanken Grotesk',sans-serif; letter-spacing:-.01em; color:var(--text); }
  .wse-bar-actions { display:flex; gap:10px; }
  .wse-scroll { flex:1; overflow-y:auto; padding:clamp(20px,4vh,40px) 0 120px; }
  .wse-col { width:min(720px,100%); margin:0 auto; padding:0 clamp(18px,5vw,32px); display:flex; flex-direction:column; }
  .wse-hero { position:relative; border:2px dashed var(--border-strong); border-radius:16px; overflow:hidden; background:var(--bg-soft); min-height:150px; display:flex; align-items:flex-end; }
  .wse-hero.has { border-style:solid; }
  .wse-hero-img { position:absolute; inset:0; background:50%/cover no-repeat; }
  .wse-hero-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; text-align:center; color:var(--muted); }
  .wse-hero-empty span { font-weight:700; color:var(--text); }
  .wse-hero-empty small { font-size:12.5px; }
  .wse-hero-actions { position:relative; z-index:1; display:flex; gap:8px; padding:12px; margin-left:auto; }
  .wse-hero.has .wse-hero-actions { background:linear-gradient(180deg,transparent,rgba(0,0,0,.35)); border-radius:12px; }
  .wse-title-in { margin-top:18px; width:100%; border:none; border-bottom:2px solid var(--border); background:transparent; padding:6px 2px; font:800 clamp(24px,3vw,32px)/1.15 'Hanken Grotesk',sans-serif; letter-spacing:-.02em; color:var(--text); }
  .wse-title-in:focus { outline:none; border-bottom-color:var(--cta); }
  .wse-dek-in { margin-top:12px; width:100%; border:1px solid var(--border); border-radius:10px; background:var(--surface); padding:10px 12px; font:400 italic 16px/1.5 'Hanken Grotesk',sans-serif; color:var(--text); resize:vertical; }
  .wse-dek-in:focus { outline:none; border-color:var(--cta); }
  .wse-meta-row { margin-top:14px; display:flex; gap:12px; flex-wrap:wrap; }
  .wse-lbl { flex:1; min-width:150px; display:flex; flex-direction:column; gap:5px; font:700 12px/1 'Hanken Grotesk',sans-serif; letter-spacing:.02em; color:var(--muted); text-transform:uppercase; }
  .wse-in { border:1px solid var(--border); border-radius:9px; background:var(--surface); padding:9px 11px; font:400 15px/1.4 'Hanken Grotesk',sans-serif; color:var(--text); }
  .wse-in:focus { outline:none; border-color:var(--cta); }
  .wse-blocks-h { margin:26px 0 12px; font:800 14px/1 'Hanken Grotesk',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .wse-empty { padding:22px; border:1px dashed var(--border-strong); border-radius:12px; text-align:center; color:var(--muted); font-size:14px; }
  .wse-block { margin-bottom:12px; border:1px solid var(--border); border-radius:13px; background:var(--surface); box-shadow:var(--shadow-sm); }
  .wse-block-top { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; border-bottom:1px solid var(--border); }
  .wse-block-type { font:700 12px/1 'Hanken Grotesk',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--cta); }
  .wse-block-ctrls { display:flex; gap:4px; }
  .wse-block-ctrls button { width:30px; height:30px; border:1px solid var(--border); border-radius:8px; background:var(--bg-soft); color:var(--text); cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; }
  .wse-block-ctrls button:hover:not(:disabled) { background:var(--bg-soft-2); }
  .wse-block-ctrls button:disabled { opacity:.35; cursor:default; }
  .wse-block-ctrls [data-del]:hover { background:var(--cta-soft); color:var(--cta-dark); border-color:var(--cta-soft); }
  .wse-block-body { padding:12px; display:flex; flex-direction:column; gap:10px; }
  .wse-ta { width:100%; border:1px solid var(--border); border-radius:9px; background:var(--surface); padding:10px 12px; font:400 15px/1.6 'Hanken Grotesk',sans-serif; color:var(--text); resize:vertical; }
  .wse-ta:focus, .wse-block-body .wse-in:focus { outline:none; border-color:var(--cta); }
  .wse-photo { position:relative; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--bg-soft); min-height:120px; display:flex; align-items:flex-end; }
  .wse-photo-img { position:absolute; inset:0; background:50%/cover no-repeat; }
  .wse-photo-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:13.5px; }
  .wse-photo-actions { position:relative; z-index:1; display:flex; gap:8px; padding:10px; margin-left:auto; }
  .wse-photo.has .wse-photo-actions { background:linear-gradient(180deg,transparent,rgba(0,0,0,.35)); border-radius:10px; }
  .wse-add { margin-top:10px; padding:16px; border:1px dashed var(--border-strong); border-radius:13px; background:var(--surface); }
  .wse-add-lbl { display:block; font:700 12px/1 'Hanken Grotesk',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
  .wse-add-btns { display:flex; gap:8px; flex-wrap:wrap; }
  .wse-add-btn { border:1px solid var(--border-strong); border-radius:999px; background:var(--bg-soft); padding:8px 15px; font:700 14px/1 'Hanken Grotesk',sans-serif; color:var(--text); cursor:pointer; }
  .wse-add-btn:hover { background:var(--cta-soft); border-color:var(--cta); color:var(--cta-dark); }