:root {
      --ink:       #1a1612;
      --paper:     #ffffff;
      --panel:     #ffffff;
      --border:    #e0e0e0;
      --accent:    #0000FF;
      --muted:     #888888;
      --panel-w:   220px;
      --radius:    2px;
    }








.homepage-views{
    position:relative;
}

.homepage-view{
    position: absolute;
    inset: 0;

    width: 100%;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    overflow: hidden;
}

.homepage-view.is-active{
    position: relative;

    visibility: visible;
    opacity: 1;
    pointer-events: auto;

    overflow: visible;
}

/*
.homepage-view--map{
    height:100vh;
}
*/

.homepage-view--map.is-active{
    flex:1;
    display:flex;
    flex-direction:column;
}

/*
#projects-map{
    width: 100%;
    height: 100vh;
}
*/

/* VIEW SWITCH */

.view-switch{
    display:flex;
    gap:18px;
    align-items:center;
    padding:10px 14px 0;
}

.view-switch__button{
    appearance:none;
    background:none;
    border:none;
    padding:0 0 8px;
    cursor:pointer;
    position:relative;
    font-family: 'Punivers37Regular';
    font-size: 16px;
    
    text-transform: uppercase;
}




.view-switch__button.is-active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:5px;
    width:100%;
    height:1px;
    background:black;
}


.view-switch__button:not(:last-child)::before{
    content: "";
    width: 1px;
    height: 24px;
    background: black;
    position: absolute;
    right: -10px;
    top: 40%;
    transform: translateY(-50%);
}




.map-view *,
.map-view *::before,
.map-view *::after {
  box-sizing: border-box;
}


    .map-view {
      font-family: 'DM Mono', monospace;
      background: var(--paper);
      color: var(--ink);
/*       height: 100vh; */
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* ── Header ── */
   .map-view  header {
      display: flex;
      align-items: baseline;
      gap: 1.2rem;
      padding: 10px 20px;
      border-bottom: 1px solid var(--border);
      background: var(--paper);
      z-index: 1000;
      flex-shrink: 0;
    }
   .map-view  header h1 {
      font-family: 'DM Mono', monospace;
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      color: var(--ink);
    }
    .map-view header h1 em { font-style: normal; color: var(--ink); }
    #projects-count {
      font-size: 0.7rem;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    /* ── Layout ── */
 .map-view .layout{
  display:flex;
  align-items:stretch;
}

    /* ── Sidebar ── */
   .map-view  aside {
      width: var(--panel-w);
      background: var(--panel);
      border-right: 1.5px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex-shrink: 0;
    }
    .sidebar-head {
      padding: 10px 14px 8px;
      border-bottom: 1px solid var(--border);
      font-size: 0.72rem;
      letter-spacing: 0.02em;
      text-transform: none;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .toggle-all {
      background: none;
      border: 1px solid var(--border);
      border-radius: 0;
      font-family: inherit;
      font-size: 0.65rem;
      color: var(--muted);
      padding: 2px 7px;
      cursor: pointer;
      letter-spacing: 0.02em;
      transition: background 0.15s, color 0.15s;
    }
    .toggle-all:hover { background: var(--ink); color: var(--paper); }

    .map-view .category-list {
      overflow-y: auto;
      flex: none;
      max-height: 48vh;
      padding: 8px 0;
    }
    .map-view .category-list::-webkit-scrollbar { width: 4px; }
   .map-view .category-list::-webkit-scrollbar-track { background: transparent; }
    .map-view .category-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

   .map-view .cat-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 14px;
      cursor: pointer;
      transition: background 0.12s;
      user-select: none;
    }
   .map-view .cat-item:hover { background: rgba(0,0,0,0.05); }

    .cat-dot {
      width: 11px; height: 11px;
      border-radius: 50%;
      flex-shrink: 0;
      border: 1.5px solid rgba(0,0,0,0.18);
      transition: opacity 0.2s;
    }
    .cat-item.hidden .cat-dot { opacity: 0.3; }
    .cat-item.hidden .cat-label { opacity: 0.4; }

    .cat-icon {
      width: 16px; height: 16px;
      object-fit: contain;
      flex-shrink: 0;
      transition: opacity 0.2s;
    }
    .cat-item.hidden .cat-icon { opacity: 0.3; }

    .cat-icon-uncat {
      width: 16px; height: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #d1d5db;
      color: #000000;
      font-weight: 700;
      border-radius: 3px;
      border: 1px solid rgba(0,0,0,0.6);
      font-size: 11px;
      flex-shrink: 0;
    }

    .cat-label {
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.01em;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: opacity 0.2s;
    }
    .cat-count {
      font-size: 0.65rem;
      color: var(--muted);
    }

    /* Projects list */
    .projects-head {
      padding: 8px 14px 6px;
      border-top: 1px solid var(--border);
      font-size: 0.72rem;
      color: var(--muted);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
   .map-view .project-list {
      overflow-y: auto;
      max-height: 60vh;
      padding: 6px 0 12px;
    }
   .map-view .project-item {
	  
/* 	  conflict with theme */
	  all:unset; 
	   
      padding: 6px 14px;
      cursor: pointer;
      font-size: 0.75rem;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.12s;
      user-select: none;
    }
   .map-view .project-item:hover { background: rgba(0,0,0,0.04); }
   .map-view .project-title {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .project-cat {
      font-size: 0.65rem;
      color: var(--muted);
      flex-shrink: 0;
    }

    /* checkmark */
    .cat-check {
      width: 14px; height: 14px;
      border: 1.5px solid var(--border);
      border-radius: 2px;
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 9px;
      color: var(--paper);
      background: var(--ink);
      transition: background 0.15s;
    }
    .cat-item.hidden .cat-check { background: transparent; color: transparent; }

    /* ── Map ── */
#map{
  width:100%;
  
/*
  height:calc(100vh - 420px);
  min-height:700px;
*/
}
    /* ── Custom markers ── */
    .custom-marker-img {
      width: 36px; height: 36px;
      transition: transform 0.05s ease;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }
    .custom-marker-img:hover {
      transform: scale(1.05);
    }
    .custom-marker-uncat {
      width: 36px; height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #d1d5db;
      color: #000000;
      font-weight: 700;
      border-radius: 6px;
      border: 2px solid rgba(0,0,0,0.6);
      font-size: 16px;
      line-height: 1;
    }

    /* ── Popup ── */
    .leaflet-popup-content-wrapper {
      background: var(--paper);
      border: 1px solid var(--border);
      border-radius: 0;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      padding: 0;
    }
    .popup-cat-badge {
      display: inline-block;
      font-size: 0.62rem;
      letter-spacing: 0.04em;
      text-transform: none;
      padding: 2px 6px;
      margin-bottom: 6px;
      color: var(--muted);
      background: #f3f4f6;
      border-radius: 4px;
      font-weight: 400;
    }
    .popup-title {
      font-family: 'DM Mono', monospace;
      font-size: 0.82rem;
      font-weight: 400;
      line-height: 1.3;
      color: var(--ink);
      margin-bottom: 10px;
    }
    .popup-image {
      width: 100%;
      height: auto;
      display: block;
      margin-bottom: 10px;
      border-radius: 5px;
      object-fit: cover;
    }
    .popup-actions {
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .popup-link {
      font-size: 0.68rem;
      color: var(--accent);
      text-decoration: none;
      border-bottom: 1px solid transparent;
      transition: border-color 0.15s;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .popup-link:hover { border-color: var(--accent); }
    .popup-link svg { flex-shrink: 0; }
    .popup-navigate {
      color: var(--muted);
    }
    .popup-navigate:hover { border-color: var(--muted); }

    /* ── Loading ── */
    #loading {
      position: absolute; inset: 0;
      background: var(--paper);
      z-index: 9999;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 14px;
      transition: opacity 0.5s;
    }
    #loading.fade { opacity: 0; pointer-events: none; }
    .loading-title {
      font-family: 'DM Mono', monospace;
      font-size: 0.85rem;
      font-weight: 400;
      color: var(--ink);
    }
    .loading-title em { font-style: italic; color: var(--accent); }
    .loader-bar {
      width: 160px; height: 2px;
      background: var(--border);
      border-radius: 1px;
      overflow: hidden;
    }
    .loader-fill {
      height: 100%;
      background: var(--accent);
      width: 0%;
      animation: load 1.2s ease-in-out forwards;
    }
    @keyframes load { to { width: 100%; } }
    .loading-sub {
      font-size: 0.65rem;
      color: var(--muted);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* ── Error ── */
    #error-msg {
      display: none;
      position: absolute; inset: 0;
      background: var(--paper);
      z-index: 9999;
      align-items: center; justify-content: center;
      flex-direction: column; gap: 10px;
      font-size: 0.8rem; color: var(--accent);
    }