/* Reset and basic setup */
body, html {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5; /* Paper-like background */
  font-family: "Noto Serif SC", "Songti SC", serif; /* Good for Chinese typography */
  overflow-x: hidden; /* Hide native horizontal scrollbar */

  -ms-overflow-style: none;  
  scrollbar-width: none;
}

/* Vertical Typography Class (Extracted directly from your reference) */
.uVerticalFont {
  writing-mode: vertical-rl;
  font-feature-settings: "vert" on;
  letter-spacing: 0.2em;
  line-height: 1.7em; /* changed in accordance to: typotheque.com/articles/typesetting-cjk-text */
  margin: 0 20px;
}

/* The viewport wrapper */
.lMain {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* The horizontal track that gets animated */
.lMain__horizontal {
  display: flex;
  flex-direction: row-reverse; /* Forces the first section to start on the right */
  width: max-content;          /* Expands dynamically based on your content */
  height: 100vh;
  position: absolute;
  right: 0;                    /* Anchors the start of the track to the right side of the screen */
}

/* Individual Sections */
.cSection {
  width: 100vw; /* Each section takes full viewport width. You can change this to fit content */
  height: 100vh;
  display: flex;
  flex-direction: row-reverse; /* Internal layout right-to-left */
  align-items: center;
  justify-content: center;
  padding: 5vw;
  box-sizing: border-box;
}

/* Image Collage */
.cSection--collage {
  position: relative; /* This traps absolute elements inside this specific section */
  width: 100vw;       /* Make it wide enough to fit your scattered images */
  display: block;     /* Turn off flexbox for this section */
}

/* Base style for collage images */
.cCollageItem {
  position: absolute;
  max-height: 80vh;   /* Ensure it doesn't break out of the vertical screen */
  object-fit: contain;
  transform: translate(50%, 50%)
}

/* Just to visually distinguish sections in this boilerplate */
.cSection:nth-child(even) {
  background-color: #e6e6e6;
}

/* Modifier for the landing section */
.cSection--landing {
  /* 10vh equals 10% of the viewport height for top and bottom */
  padding: 10vh 5vw; 
}

/* The wrapper that restricts the SVG dimensions */
.cMapContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The SVG configuration */
.cMapContainer svg {
  /* Forces the SVG to never exceed the container */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  /* Ensures it maintains its aspect ratio while fitting completely inside */
  object-fit: contain; 
}

/* Streamlining the stroke-width for all participant maps */
.cMapContainer svg path,
.cMapContainer svg line,
.cMapContainer svg polyline,
.cMapContainer svg polygon,
.cMapContainer svg rect,
.cMapContainer svg circle {
  /* Force the stroke width to exactly 10 */
  stroke-width: 5px !important; 
  
  /* CRITICAL FIX: This prevents the stroke from getting thicker or thinner 
     when the SVG scales up or down on different screen sizes */
  vector-effect: non-scaling-stroke !important; 
  
  /* Smoothes out the harsh corners of the drawn lines */
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}