* {
  border-radius: 0 !important;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Base Panel Rules */
.col-panel {
  overflow: hidden;
}

@media (min-width: 1024px) {
  /* Strict 140px lock across all collapsed panels */
  .col-panel {
    flex: 0 0 140px;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    transition: flex-basis 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                width 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                max-width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: flex-basis, width, max-width;
  }

  /* Strict 540px active panel */
  .col-panel.is-active {
    flex: 0 0 540px;
    width: 540px;
    min-width: 540px;
    max-width: 540px;
  }

  /* Narrative visibility toggle */
  .col-panel:not(.is-active) .active-narrative {
    opacity: 0;
    pointer-events: none;
  }
  .col-panel.is-active .active-narrative {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease 0.1s;
  }

  /* Collapsed label visibility toggle */
  .col-panel:not(.is-active) .collapsed-label {
    opacity: 1;
    pointer-events: auto;
  }
  .col-panel.is-active .collapsed-label {
    opacity: 0;
    pointer-events: none;
  }
}

/* Uniform deck height */
.active-narrative {
  height: 180px;
  overflow: hidden;
}

/* Nav Pill / Dot Track */
.nav-dot {
  height: 6px;
  width: 6px;
  background-color: #cbd5e1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.nav-dot:hover {
  background-color: #7995b0;
}
.nav-dot.is-active {
  width: 24px;
  background-color: #2b579a;
}

/* Drag/zoom protection on images */
.col-panel img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

body, h1, h2, h3 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1 {
  /* Forces smooth curve rasterization in Firefox */
  text-rendering: geometricPrecision;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  font-variant-ligatures: common-ligatures;
}

h1 {
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
}

/* Mobile Fallback */
@media (max-width: 1023px) {
  .col-panel {
    flex: 0 0 85vw;
    width: 85vw;
    min-width: 85vw;
    max-width: 85vw;
    scroll-snap-align: start;
  }
  .collapsed-label {
    display: none !important;
  }
  .active-narrative {
    height: auto !important;
    opacity: 1 !important;
  }
}